diff --git a/app/Controllers/Http/Submitter/DatasetController.ts b/app/Controllers/Http/Submitter/DatasetController.ts
index a308634..cda7da6 100644
--- a/app/Controllers/Http/Submitter/DatasetController.ts
+++ b/app/Controllers/Http/Submitter/DatasetController.ts
@@ -105,6 +105,7 @@ export default class DatasetController {
                 'reviewed',
                 'rejected_editor',
                 'rejected_reviewer',
+                'rejected_to_reviewer',
             ])
             .where('account_id', user.id)
             .preload('titles')
diff --git a/app/validators/project.ts b/app/validators/project.ts
index bad6c7c..7f3d1f8 100644
--- a/app/validators/project.ts
+++ b/app/validators/project.ts
@@ -3,13 +3,13 @@ import vine from '@vinejs/vine';
 
 export const createProjectValidator = vine.compile(
     vine.object({
-        label: vine.string().trim().minLength(1).maxLength(50),
+        label: vine.string().trim().minLength(1).maxLength(50) .regex(/^[a-z0-9-]+$/),
         name: vine
             .string()
             .trim()
             .minLength(3)
             .maxLength(255)
-            .regex(/^[a-z0-9-]+$/),
+            .regex(/^[a-zA-Z0-9äöüßÄÖÜ\s-]+$/),
         description: vine.string().trim().maxLength(255).minLength(5).optional(),
     }),
 );
@@ -22,7 +22,7 @@ export const updateProjectValidator = vine.compile(
             .trim()
             .minLength(3)
             .maxLength(255)
-            .regex(/^[a-z0-9-]+$/),
+            .regex(/^[a-zA-Z0-9äöüßÄÖÜ\s-]+$/),
          description: vine.string().trim().maxLength(255).minLength(5).optional(),
     }),
 );
diff --git a/components.d.ts b/components.d.ts
index 3834bf1..001762d 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -11,3 +11,21 @@ declare module '@vue/runtime-core' {
         NInput: (typeof import('naive-ui'))['NInput'];
     }
 }
+
+// types/leaflet-src-dom-DomEvent.d.ts
+declare module 'leaflet/src/dom/DomEvent' {
+    export type DomEventHandler = (e?: any) => void;
+
+    // Attach event listeners. `obj` can be any DOM node or object with event handling.
+    export function on(obj: any, types: string, fn: DomEventHandler, context?: any): void;
+
+    // Detach event listeners.
+    export function off(obj: any, types: string, fn?: DomEventHandler, context?: any): void;
+
+    // Prevent default on native events
+    export function preventDefault(ev?: Event | undefined): void;
+
+    // Optional: other helpers you might need later
+    export function stopPropagation(ev?: Event | undefined): void;
+    export function stop(ev?: Event | undefined): void;
+}
\ No newline at end of file
diff --git a/resources/js/Components/Map/MapOptions.ts b/resources/js/Components/Map/MapOptions.ts
index 8a2de5a..ede8d87 100644
--- a/resources/js/Components/Map/MapOptions.ts
+++ b/resources/js/Components/Map/MapOptions.ts
@@ -1,7 +1,11 @@
-import type { LatLngBoundsExpression } from 'leaflet/src/geo/LatLngBounds';
-import type { LatLngExpression } from 'leaflet/src/geo/LatLng';
-import type { Layer } from 'leaflet/src/layer/Layer';
-import type { CRS } from 'leaflet/src/geo/crs/CRS';
+// import type { LatLngBoundsExpression } from 'leaflet/src/geo/LatLngBounds';
+// import type { LatLngExpression } from 'leaflet/src/geo/LatLng';
+// import type { Layer } from 'leaflet/src/layer/Layer';
+// import type { CRS } from 'leaflet/src/geo/crs/CRS';
+import type { LatLngBoundsExpression } from 'leaflet';
+import type { LatLngExpression } from 'leaflet';
+import type { Layer } from 'leaflet';
+import type { CRS } from 'leaflet';
 
 export interface MapOptions {
     preferCanvas?: boolean | undefined;
diff --git a/resources/js/Components/Map/SearchMap.vue b/resources/js/Components/Map/SearchMap.vue
index aac036e..7c02269 100644
--- a/resources/js/Components/Map/SearchMap.vue
+++ b/resources/js/Components/Map/SearchMap.vue
@@ -8,7 +8,6 @@ import { svg } from 'leaflet/src/layer/vector/SVG';
 import axios from 'axios';
 import { LatLngBoundsExpression } from 'leaflet/src/geo/LatLngBounds';
 import { tileLayerWMS } from 'leaflet/src/layer/tile/TileLayer.WMS';
-// import { TileLayer } from 'leaflet/src/layer/tile/TileLayer';
 import { Attribution } from 'leaflet/src/control/Control.Attribution';
 import DrawControlComponent from '@/Components/Map/draw.component.vue';
 import ZoomControlComponent from '@/Components/Map/zoom.component.vue';
@@ -17,14 +16,7 @@ import { LayerGroup } from 'leaflet/src/layer/LayerGroup';
 import { OpensearchDocument } from '@/Dataset';
 
 Map.include({
-    // @namespace Map; @method getRenderer(layer: Path): Renderer
-    // Returns the instance of `Renderer` that should be used to render the given
-    // `Path`. It will ensure that the `renderer` options of the map and paths
-    // are respected, and that the renderers do exist on the map.
     getRenderer: function (layer) {
-        // @namespace Path; @option renderer: Renderer
-        // Use this specific instance of `Renderer` for this path. Takes
-        // precedence over the map's [default renderer](#map-renderer).
         var renderer = layer.options.renderer || this._getPaneRenderer(layer.options.pane) || this.options.renderer || this._renderer;
 
         if (!renderer) {
@@ -51,21 +43,18 @@ Map.include({
     },
 
     _createRenderer: function (options) {
-        // @namespace Map; @option preferCanvas: Boolean = false
-        // Whether `Path`s should be rendered on a `Canvas` renderer.
-        // By default, all `Path`s are rendered in a `SVG` renderer.
         return (this.options.preferCanvas && canvas(options)) || svg(options);
     },
 });
+
 const DEFAULT_BASE_LAYER_NAME = 'BaseLayer';
 const DEFAULT_BASE_LAYER_ATTRIBUTION = '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors';
 const OPENSEARCH_HOST = 'https://catalog.geosphere.at';
-// const OPENSEARCH_HOST = `${process.env.OPENSEARCH_HOST}`;
-// const OPENSEARCH_HOST = `http://${process.env.OPENSEARCH_PUBLIC_HOST}`;
+
 let map: Map;
 
 const props = defineProps({
-    dheckable: Boolean,
+    checkable: Boolean,
     datasets: {
         type: Array<OpensearchDocument>,
         default: () => [],
@@ -89,10 +78,7 @@ const items = computed({
     get() {
         return props.datasets;
     },
-    // setter
     set(value) {
-        // Note: we are using destructuring assignment syntax here.
-
         props.datasets.length = 0;
         props.datasets.push(...value);
     },
@@ -103,15 +89,13 @@ const fitBounds: LatLngBoundsExpression = [
     [49.0390742051, 16.9796667823],
 ];
 
-// const mapId = 'map';
 const drawControl: Ref<DrawControlComponent | null> = ref(null);
 const southWest = ref(null);
 const northEast = ref(null);
 const mapService = MapService();
+const isLoading = ref(false);
 
 const filterLayerGroup = new LayerGroup();
-// Replace with your actual data
-// const datasets: Ref<OpensearchDocument[]> = ref([]);
 
 onMounted(() => {
     initMap();
@@ -122,7 +106,6 @@ onUnmounted(() => {
 });
 
 const initMap = async () => {
-    // init leaflet map
     map = new Map('map', props.mapOptions);
     mapService.setMap(props.mapId, map);
     map.scrollWheelZoom.disable();
@@ -140,11 +123,6 @@ const initMap = async () => {
         layers: 'OSM-WMS',
     });
 
-    // let baseAt = new TileLayer('https://{s}.wien.gv.at/basemap/bmapgrau/normal/google3857/{z}/{y}/{x}.png', {
-    //     subdomains: ['maps', 'maps1', 'maps2', 'maps3', 'maps4'],
-    //     attribution: DEFAULT_BASE_LAYER_ATTRIBUTION,
-    // });
-
     let layerOptions = {
         label: DEFAULT_BASE_LAYER_NAME,
         visible: true,
@@ -153,62 +131,15 @@ const initMap = async () => {
     layerOptions.layer.addTo(map);
 
     map.on('Draw.Event.CREATED', handleDrawEventCreated);
-
-    // // const query = {
-    // // 	query: {
-    // // 		term: {
-    // // 			id: "103"
-    // // 		}
-    // // 	}
-    // // };
-    // // to do : call extra method:
-    // const query = {
-    // 	// q: 'id:103'
-    // 	// q: 'author:"Iglseder, Christoph" OR title:"Datensatz"',
-    // 	// q: 'author:"Iglseder"',
-    // 	q: '*',
-    // 	_source: 'author,bbox_xmin,bbox_xmax,bbox_ymin,bbox_ymax,abstract,title',
-    // 	size: 1000
-    // 	// qf:"title^3 author^2 subject^1",
-    // }
-    // try {
-    // 	let response = await axios({
-    // 		method: 'GET',
-    // 		url: OPEN_SEARCH_HOST + '/tethys-records/_search',
-    // 		headers: { 'Content-Type': 'application/json' },
-    // 		params: query
-    // 	});
-    // 	// Loop through the hits in the response
-    // 	response.data.hits.hits.forEach(hit => {
-    // 		// Get the geo_location attribute
-    // 		// var geo_location = hit._source.geo_location;
-    // 		let xMin = hit._source.bbox_xmin;
-    // 		let xMax = hit._source.bbox_xmax;
-    // 		let yMin = hit._source.bbox_ymin;
-    // 		let yMax = hit._source.bbox_ymax;
-    // 		var bbox: LatLngBoundsExpression = [[yMin, xMin], [yMax, xMax]];
-    // 		// Parse the WKT string to get the bounding box coordinates
-    // 		// var bbox = wktToBbox(geo_location);
-
-    // 		// // Add the bounding box to the map as a rectangle
-    // 		new Rectangle(bbox, { color: "#ff7800", weight: 1 }).addTo(map);
-    // 		// console.log(hit._source);
-    // 	});
-    // } catch (error) {
-    // 	console.error(error);
-    // }
 };
 
 const handleDrawEventCreated = async (event) => {
+    isLoading.value = true;
     filterLayerGroup.clearLayers();
     items.value = [];
 
     let layer = event.layer;
     let bounds = layer.getBounds();
-    // coverage.x_min = bounds.getSouthWest().lng;
-    // coverage.y_min = bounds.getSouthWest().lat;
-    // coverage.x_max = bounds.getNorthEast().lng;
-    // coverage.y_max = bounds.getNorthEast().lat;
 
     try {
         let response = await axios({
@@ -225,7 +156,6 @@ const handleDrawEventCreated = async (event) => {
                         filter: {
                             geo_shape: {
                                 geo_location: {
-                                    // replace 'location' with your geo-point field name
                                     shape: {
                                         type: 'envelope',
                                         coordinates: [
@@ -237,16 +167,12 @@ const handleDrawEventCreated = async (event) => {
                                 },
                             },
                         },
-                        // _source: 'author,bbox_xmin,bbox_xmax,bbox_ymin,bbox_ymax,abstract,title',
-                        // "size": 1000
                     },
                 },
             },
         });
-        // Loop through the hits in the response
+
         response.data.hits.hits.forEach((hit) => {
-            // Get the geo_location attribute
-            // var geo_location = hit._source.geo_location;
             let xMin = hit._source.bbox_xmin;
             let xMax = hit._source.bbox_xmax;
             let yMin = hit._source.bbox_ymin;
@@ -255,46 +181,255 @@ const handleDrawEventCreated = async (event) => {
                 [yMin, xMin],
                 [yMax, xMax],
             ];
-            // Parse the WKT string to get the bounding box coordinates
-            // var bbox = wktToBbox(geo_location);
 
-            // // Add the bounding box to the map as a rectangle
-            let rect = new Rectangle(bbox, { color: '#ff7800', weight: 1 });
+            let rect = new Rectangle(bbox, {
+                color: '#65DC21',
+                weight: 2,
+                fillColor: '#65DC21',
+                fillOpacity: 0.2,
+                className: 'animated-rectangle',
+            });
             filterLayerGroup.addLayer(rect);
-            // add to result list
             items.value.push(hit._source);
         });
     } catch (error) {
         console.error(error);
+    } finally {
+        isLoading.value = false;
     }
 };
 </script>
 
 <template>
-    <SectionMain>        
-            <div id="map" class="map-container mt-6 mb-6 rounded-2xl py-12 px-6 text-center dark:bg-slate-900 bg-white">
+    <SectionMain>
+        <div class="map-container-wrapper">
+            <!-- Loading Overlay -->
+            <div v-if="isLoading" class="loading-overlay">
+                <div class="loading-spinner"></div>
+                <p class="loading-text">Searching datasets...</p>
+            </div>
+
+            <!-- Map Instructions Banner -->
+            <div class="map-instructions">
+                <svg class="instruction-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <circle cx="12" cy="12" r="10" />
+                    <path d="M12 16v-4M12 8h.01" />
+                </svg>
+                <p class="instruction-text">
+                    <strong>Tip:</strong> Use the drawing tool to select an area on the map and discover datasets
+                </p>
+            </div>
+
+            <div id="map" class="map-container">
                 <ZoomControlComponent ref="zoomControl" :mapId="mapId"></ZoomControlComponent>
-                <DrawControlComponent ref="drawControl" :preserve="false" :mapId="mapId" :southWest="southWest"
-                    :northEast="northEast">
+                <DrawControlComponent ref="drawControl" :preserve="false" :mapId="mapId" :southWest="southWest" :northEast="northEast">
                 </DrawControlComponent>
-            </div>   
-    </SectionMain>   
+            </div>
+        </div>
+    </SectionMain>
 </template>
 
-
-<style scoped lang="css">
-/* .leaflet-container {
-    height: 600px;
-    width: 100%;
-    background-color: transparent;
-    outline-offset: 1px;
-} */
-.leaflet-container {
-    height: 600px;
-    width: 100%;
+<style scoped>
+.map-container-wrapper {
+    position: relative;
+    border-radius: 1rem;
+    overflow: hidden;
+    background: white;
+    box-shadow:
+        0 4px 6px -1px rgba(0, 0, 0, 0.1),
+        0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
 
-.leaflet-container .leaflet-pane {
-    z-index: 30!important;
+.dark .map-container-wrapper {
+    background: #1f2937;
 }
-</style>
\ No newline at end of file
+
+/* Map Instructions Banner */
+.map-instructions {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 1rem 1.5rem;
+    background: linear-gradient(135deg, rgba(101, 220, 33, 0.1) 0%, rgba(53, 124, 6, 0.1) 100%);
+    border-bottom: 2px solid #e5e7eb;
+}
+
+.dark .map-instructions {
+    background: linear-gradient(135deg, rgba(101, 220, 33, 0.2) 0%, rgba(53, 124, 6, 0.2) 100%);
+    border-bottom-color: #374151;
+}
+
+.instruction-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+    color: #65dc21;
+    flex-shrink: 0;
+}
+
+.instruction-text {
+    font-size: 0.875rem;
+    color: #4b5563;
+    margin: 0;
+}
+
+.dark .instruction-text {
+    color: #d1d5db;
+}
+
+.instruction-text strong {
+    color: #65dc21;
+    font-weight: 600;
+}
+
+/* Loading Overlay */
+.loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.95);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    backdrop-filter: blur(4px);
+}
+
+.dark .loading-overlay {
+    background: rgba(31, 41, 55, 0.95);
+}
+
+.loading-spinner {
+    width: 3rem;
+    height: 3rem;
+    border: 4px solid #e5e7eb;
+    border-top-color: #65dc21;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+.dark .loading-spinner {
+    border-color: #374151;
+    border-top-color: #65dc21;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.loading-text {
+    margin-top: 1rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #65dc21;
+}
+
+/* Map Container */
+.map-container {
+    position: relative;
+    height: 600px;
+    width: 100%;
+    background: #f9fafb;
+}
+
+.dark .map-container {
+    background: #111827;
+}
+
+/* Leaflet Overrides */
+:deep(.leaflet-container) {
+    height: 600px;
+    width: 100%;
+    background: transparent;
+    font-family: inherit;
+}
+
+:deep(.leaflet-container .leaflet-pane) {
+    z-index: 30 !important;
+}
+
+/* Enhanced Rectangle Styling */
+:deep(.animated-rectangle) {
+    animation: pulseRectangle 2s ease-in-out infinite;
+}
+
+@keyframes pulseRectangle {
+    0%,
+    100% {
+        opacity: 0.6;
+    }
+    50% {
+        opacity: 1;
+    }
+}
+
+/* Control Enhancements */
+:deep(.leaflet-control) {
+    border-radius: 0.5rem;
+    box-shadow:
+        0 4px 6px -1px rgba(0, 0, 0, 0.1),
+        0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    border: none;
+}
+
+:deep(.leaflet-bar a) {
+    border-radius: 0.5rem;
+    transition: all 0.2s ease;
+}
+
+:deep(.leaflet-bar a:hover) {
+    background: #65dc21;
+    color: white;
+}
+
+:deep(.leaflet-draw-toolbar a) {
+    background: white;
+    transition: all 0.2s ease;
+}
+
+.dark :deep(.leaflet-draw-toolbar a) {
+    background: #374151;
+    color: #d1d5db;
+}
+
+:deep(.leaflet-draw-toolbar a:hover) {
+    background: #65dc21;
+}
+
+/* Popup Enhancements */
+:deep(.leaflet-popup-content-wrapper) {
+    border-radius: 0.75rem;
+    box-shadow:
+        0 10px 15px -3px rgba(0, 0, 0, 0.1),
+        0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+:deep(.leaflet-popup-tip) {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .map-container {
+        height: 400px;
+    }
+
+    .map-instructions {
+        padding: 0.75rem 1rem;
+    }
+
+    .instruction-text {
+        font-size: 0.8125rem;
+    }
+}
+
+@media (max-width: 640px) {
+    .map-container {
+        height: 350px;
+    }
+}
+</style>
diff --git a/resources/js/Components/Map/draw.component.vue b/resources/js/Components/Map/draw.component.vue
index 1bfb9af..2638213 100644
--- a/resources/js/Components/Map/draw.component.vue
+++ b/resources/js/Components/Map/draw.component.vue
@@ -1,14 +1,29 @@
 <template>
-    <div ref="drawControl" class="gba-control-draw btn-group-vertical map-control">
-        <!-- <button type="button" class="button is-light is-small" (click)="locateUser()" [ngClass]="isToggled ? 'is-primary': 'is-active'">
-      <fa-icon [icon]="faSearchLocation"></fa-icon>
-    </button> -->
-        <!--  -->
-        <button ref="inputDraw"
-            class="inline-flex cursor-pointer justify-center items-center whitespace-nowrap focus:outline-none transition-colors duration-150 border rounded ring-blue-700 text-black border-teal-50 hover:bg-gray-200 text-sm p-1"
-            type="button" :class="[_enabled ? 'cursor-not-allowed bg-cyan-200' : 'bg-teal-50 is-active']"
-            @click.prevent="toggleDraw">
-            <BaseIcon v-if="mdiDrawPen" :path="mdiDrawPen" />
+    <div class="draw-control-container">
+        <button
+            ref="drawButton"
+            class="draw-button"
+            :class="{ 'is-active': enabled }"
+            type="button"
+            @click.stop.prevent="toggleDraw"
+            :aria-label="enabled ? 'Stop drawing' : 'Start drawing'"
+            :aria-pressed="enabled"
+        >
+            <!-- Icon changes based on state -->
+            <!-- <BaseIcon 
+                v-if="enabled" 
+                :path="mdiClose" 
+                :size="20" 
+            /> -->
+            <BaseIcon               
+                :path="mdiVectorRectangle" 
+                :size="20" 
+            />
+            
+            <!-- Status indicator -->
+            <!-- <span class="draw-status-badge" :class="{ 'is-active': enabled }">
+                {{ enabled ? 'Active' : 'Draw' }}
+            </span> -->
         </button>
     </div>
 </template>
@@ -17,16 +32,14 @@
 import { Component, Vue, Prop } from 'vue-facing-decorator';
 
 import BaseIcon from '@/Components/BaseIcon.vue';
-import { mdiDrawPen } from '@mdi/js';
+import { mdiVectorRectangle, mdiClose } from '@mdi/js';
 import { MapService } from '@/Stores/map.service';
-import { Map } from 'leaflet/src/map/index';
-// import { LayerGroup } from 'leaflet/src/layer/LayerGroup';
-// import { LatLngBounds, Rectangle } from 'leaflet';
+import { Map } from 'leaflet';
 import { on, off, preventDefault } from 'leaflet/src/dom/DomEvent';
-import { Rectangle } from 'leaflet/src/layer/vector/Rectangle';
-import { LatLngBounds } from 'leaflet/src/geo/LatLngBounds';
+
+import { Rectangle } from 'leaflet';
+import { LatLngBounds } from 'leaflet';
 import { LatLng } from 'leaflet';
-import { LeafletMouseEvent } from 'leaflet';
 
 @Component({
     name: 'draw-control',
@@ -34,19 +47,19 @@ import { LeafletMouseEvent } from 'leaflet';
         BaseIcon,
     },
 })
-export default class DrawControlComponent extends Vue {
+export class DrawControlComponent extends Vue {
     public TYPE = 'rectangle';
-    mdiDrawPen = mdiDrawPen;
-    // private featuresLayer;
+    mdiVectorRectangle = mdiVectorRectangle;
+    mdiClose = mdiClose;
 
     options = {
         shapeOptions: {
             stroke: true,
-            color: '#22C55E',
+            color: '#65DC21',
             weight: 4,
             opacity: 0.5,
             fill: true,
-            fillColor: '#22C55E', //same as color by default
+            fillColor: '#65DC21',
             fillOpacity: 0.2,
             clickable: true,
         },
@@ -56,7 +69,6 @@ export default class DrawControlComponent extends Vue {
     };
 
     @Prop() public mapId: string;
-    // @Prop() public map: Map;
     @Prop public southWest: LatLng;
     @Prop public northEast: LatLng;
     @Prop({
@@ -65,13 +77,17 @@ export default class DrawControlComponent extends Vue {
     public preserve: boolean;
 
     mapService = MapService();
-    public _enabled: boolean;
+    private _enabled: boolean;
     private _map: Map;
     private _isDrawing: boolean = false;
     private _startLatLng: LatLng;
     private _mapDraggable: boolean;
     private _shape: Rectangle | undefined;
 
+    get enabled() {
+        return this._enabled;
+    }
+
     enable() {
         if (this._enabled) {
             return this;
@@ -93,49 +109,35 @@ export default class DrawControlComponent extends Vue {
         return this;
     }
 
-    enabled() {
-        return !!this._enabled;
-    }
-
-    // @Ref('inputDraw') private _inputDraw: HTMLElement;
+    // enabled() {
+    //     return !!this._enabled;
+    // }
 
     private addHooks() {
-        // L.Draw.Feature.prototype.addHooks.call(this);
         this._map = this.mapService.getMap(this.mapId);
         if (this._map) {
             this._mapDraggable = this._map.dragging.enabled();
             if (this._mapDraggable) {
                 this._map.dragging.disable();
             }
-            //TODO refactor: move cursor to styles
-            // this._map.domElement.style.cursor = 'crosshair';
-            this._map._container.style.cursor = 'crosshair';
-            // this._tooltip.updateContent({text: this._initialLabelText});
+            this._map.getContainer().style.cursor = 'crosshair';
 
             this._map
                 .on('mousedown', this._onMouseDown, this)
                 .on('mousemove', this._onMouseMove, this)
                 .on('touchstart', this._onMouseDown, this)
-                .on('touchmove', this._onMouseMove, this);
-            // we should prevent default, otherwise default behavior (scrolling) will fire,
-            // and that will cause document.touchend to fire and will stop the drawing
-            // (circle, rectangle) in touch mode.
-            // (update): we have to send passive now to prevent scroll, because by default it is {passive: true} now, which means,
-            // handler can't event.preventDefault
-            // check the news https://developers.google.com/web/updates/2016/06/passive-event-listeners
-            // document.addEventListener('touchstart', preventDefault, { passive: false });
+                .on('touchmove', this._onMouseMove, this);          
+          
         }
     }
 
     private removeHooks() {
-        // L.Draw.Feature.prototype.removeHooks.call(this);
         if (this._map) {
             if (this._mapDraggable) {
                 this._map.dragging.enable();
             }
 
-            //TODO refactor: move cursor to styles
-            this._map._container.style.cursor = '';
+            this._map.getContainer().style.cursor = '';
 
             this._map
                 .off('mousedown', this._onMouseDown, this)
@@ -146,46 +148,36 @@ export default class DrawControlComponent extends Vue {
             off(document, 'mouseup', this._onMouseUp, this);
             off(document, 'touchend', this._onMouseUp, this);
 
-            // document.removeEventListener('touchstart', preventDefault);
-
-            // If the box element doesn't exist they must not have moved the mouse, so don't need to destroy/return
             if (this._shape && this.preserve == false) {
                 this._map.removeLayer(this._shape);
-                // delete this._shape;
                 this._shape = undefined;
             }
         }
         this._isDrawing = false;
     }
 
-    private _onMouseDown(e: LeafletMouseEvent) {
+    // private _onMouseDown(e: LeafletMouseEvent) {
+    private _onMouseDown(e: any) {
         this._isDrawing = true;
         this._startLatLng = e.latlng;
 
-        // DomEvent.on(document, 'mouseup', this._onMouseUp, this)
-        //     .on(document, 'touchend', this._onMouseUp, this)
-        //     .preventDefault(e.originalEvent);
         on(document, 'mouseup', this._onMouseUp, this);
         on(document, 'touchend', this._onMouseUp, this);
         preventDefault(e.originalEvent);
     }
-
-    private _onMouseMove(e: LeafletMouseEvent) {
+    // private _onMouseMove(e: LeafletMouseEvent) {
+    private _onMouseMove(e: any) {
         var latlng = e.latlng;
 
-        // this._tooltip.updatePosition(latlng);
         if (this._isDrawing) {
-            // this._tooltip.updateContent(this._getTooltipText());
             this._drawShape(latlng);
         }
     }
-
     private _onMouseUp() {
         if (this._shape) {
             this._fireCreatedEvent(this._shape);
         }
 
-        // this.removeHooks();
         this.disable();
         if (this.options.repeatMode) {
             this.enable();
@@ -194,14 +186,12 @@ export default class DrawControlComponent extends Vue {
 
     private _fireCreatedEvent(shape: Rectangle) {
         var rectangle = new Rectangle(shape.getBounds(), this.options.shapeOptions);
-        // L.Draw.SimpleShape.prototype._fireCreatedEvent.call(this, rectangle);
         this._map.fire('Draw.Event.CREATED', { layer: rectangle, type: this.TYPE });
     }
 
     public removeShape() {
         if (this._shape) {
             this._map.removeLayer(this._shape);
-            // delete this._shape;
             this._shape = undefined;
         }
     }
@@ -210,7 +200,6 @@ export default class DrawControlComponent extends Vue {
         if (!this._shape) {
             const bounds = new LatLngBounds(southWest, northEast);
             this._shape = new Rectangle(bounds, this.options.shapeOptions);
-            // this._map.addLayer(this._shape);
             this._map = this.mapService.getMap(this.mapId);
             this._shape.addTo(this._map);
         } else {
@@ -218,12 +207,10 @@ export default class DrawControlComponent extends Vue {
         }
     }
 
-    // from Draw Rectangle
     private _drawShape(latlng: LatLng) {
         if (!this._shape) {
             const bounds = new LatLngBounds(this._startLatLng, latlng);
             this._shape = new Rectangle(bounds, this.options.shapeOptions);
-            // this._map.addLayer(this._shape);
             this._shape.addTo(this._map);
         } else {
             this._shape.setBounds(new LatLngBounds(this._startLatLng, latlng));
@@ -237,44 +224,336 @@ export default class DrawControlComponent extends Vue {
             this.enable();
         }
     }
-
-    // private enable() {
-    //     //if (this.map.mapTool) this.map.mapTool.on('editable:drawing:start', this.disable.bind(this));
-    //     // dom.addClass(this.map.container, 'measure-enabled');
-    //     //this.fireAndForward('showmeasure');
-    //     this._startMarker(this.southWest, this.options);
-    // }
-
-    // private disable() {
-    //     //if (this.map.mapTool) this.map.mapTool.off('editable:drawing:start', this.disable.bind(this));
-    //     // dom.removeClass(this.map.container, 'measure-enabled');
-    //     // this.featuresLayer.clearLayers();
-    //     // //this.fireAndForward('hidemeasure');
-    //     // if (this._drawingEditor) {
-    //     //     this._drawingEditor.cancelDrawing();
-    //     // }
-    // }
 }
+export default DrawControlComponent;
 </script>
 
-<style lang="css">
-.gba-control-draw {
+<style scoped>
+.draw-control-container {
+    position: absolute;
+    left: 1rem;
+    top: 8rem;
+    z-index: 1000;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
-    cursor: pointer;
-    border-radius: 4px;
-    position: absolute;
-    left: 10px;
-    top: 100px;
-    z-index: 40;
 }
 
-.btn-group-vertical button {
-    display: block;
+.draw-button {
+    display: flex;
+    align-items: center;
+    gap: 0;
+    padding: 0.625rem;
+    background: white;
+    border: 2px solid #e5e7eb;
+    border-radius: 0.75rem;
+    color: #374151;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    outline: none;
+    font-size: 0.875rem;
+    font-weight: 600;
+    position: relative;
+    overflow: visible;
+    width: 2.5rem;
+    height: 2.5rem;
+    justify-content: center;
+}
 
-    margin-left: 0;
-    margin-top: 0.5em;
+.dark .draw-button {
+    background: #1f2937;
+    border-color: #374151;
+    color: #d1d5db;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+}
+
+/* Inactive state hover */
+.draw-button:not(.is-active):hover {
+    background: #f9fafb;
+    border-color: #65DC21;
+    color: #357C06;
+    transform: translateY(-2px);
+    /* box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); */
+    width: auto;
+    padding: 0.625rem 1rem;
+    gap: 0.5rem;
+}
+
+.dark .draw-button:not(.is-active):hover {
+    background: #111827;
+    border-color: #65DC21;
+    color: #65DC21;
+}
+
+/* Active state */
+.draw-button.is-active {
+    background: linear-gradient(135deg, #65DC21 0%, #357C06 100%);
+    border-color: #357C06;
+    color: white;
+    box-shadow: 0 10px 15px -3px rgba(101, 220, 33, 0.4), 0 4px 6px -2px rgba(101, 220, 33, 0.2);
+    width: auto;
+    padding: 0.625rem 1rem;
+    gap: 0.5rem;
+}
+
+.dark .draw-button.is-active {
+    box-shadow: 0 10px 15px -3px rgba(101, 220, 33, 0.5), 0 4px 6px -2px rgba(101, 220, 33, 0.3);
+}
+
+/* Active state hover */
+.draw-button.is-active:hover {
+    background: linear-gradient(135deg, #429E04 0%, #295B09 100%);
+    transform: translateY(-2px);
+    box-shadow: 0 20px 25px -5px rgba(101, 220, 33, 0.4), 0 10px 10px -5px rgba(101, 220, 33, 0.2);
+}
+
+/* Active state press */
+.draw-button:active {
+    transform: translateY(0) scale(0.98);
+}
+
+/* Focus state */
+.draw-button:focus-visible {
+    outline: 3px solid rgba(101, 220, 33, 0.5);
+    outline-offset: 2px;
+}
+
+/* Icon styling */
+.draw-button :deep(svg) {
+    width: 1.25rem;
+    height: 1.25rem;
+    transition: transform 0.3s ease;
+}
+
+/* .draw-button.is-active :deep(svg) {
+    transform: rotate(90deg);
+} */
+
+/* Status badge */
+.draw-status-badge {
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    transition: all 0.3s ease;
+    max-width: 0;
+    opacity: 0;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+/* Show badge on hover when inactive */
+.draw-button:not(.is-active):hover .draw-status-badge {
+    max-width: 100px;
+    opacity: 1;
+}
+
+/* Show badge when active */
+.draw-button.is-active .draw-status-badge {
+    max-width: 100px;
+    opacity: 1;
+}
+
+/* Pulse animation for active state */
+.draw-button.is-active::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 0.75rem;
+    transform: translate(-50%, -50%) scale(0);
+    animation: pulse 2s ease-out infinite;
+    pointer-events: none;
+}
+
+/* @keyframes pulse {
+    0% {
+        transform: translate(-50%, -50%) scale(0);
+        opacity: 1;
+    }
+    100% {
+        transform: translate(-50%, -50%) scale(1.5);
+        opacity: 0;
+    }
+} */
+
+/* Glow effect for active state */
+.draw-button.is-active::after {
+    content: '';
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    background: linear-gradient(135deg, #65DC21, #357C06);
+    border-radius: 0.75rem;
+    opacity: 0;
+    z-index: -1;
+    transition: opacity 0.3s ease;
+    filter: blur(8px);
+}
+
+.draw-button.is-active:hover::after {
+    opacity: 0.6;
+}
+
+/* Inactive state indicator */
+.draw-button:not(.is-active) .draw-status-badge {
+    color: #6b7280;
+}
+
+.dark .draw-button:not(.is-active) .draw-status-badge {
+    color: #9ca3af;
+}
+
+.draw-button:not(.is-active):hover .draw-status-badge {
+    color: #357C06;
+}
+
+.dark .draw-button:not(.is-active):hover .draw-status-badge {
+    color: #65DC21;
+}
+
+/* Active state indicator */
+.draw-button.is-active .draw-status-badge {
+    color: white;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+/* Tooltip on hover */
+.draw-button:hover::after {
+    content: attr(aria-label);
+    position: absolute;
+    bottom: calc(100% + 0.5rem);
+    left: 50%;
+    transform: translateX(-50%);
+    background: #1f2937;
+    color: white;
+    padding: 0.375rem 0.75rem;
+    border-radius: 0.375rem;
+    font-size: 0.75rem;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+    z-index: 1001;
+    animation: fadeInTooltip 0.2s ease 0.5s forwards;
+}
+
+/* @keyframes fadeInTooltip {
+    from {
+        opacity: 0;
+        transform: translateX(-50%) translateY(4px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(-50%) translateY(0);
+    }
+} */
+
+/* Ripple effect on click */
+.draw-button::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.3);
+    transform: translate(-50%, -50%);
+    transition: width 0.6s, height 0.6s;
+}
+
+.draw-button:active::before {
+    width: 300px;
+    height: 300px;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .draw-control-container {
+        right: 0.75rem;
+        top: 0.75rem;
+    }
+    
+    .draw-button {
+        width: 2.25rem;
+        height: 2.25rem;
+        padding: 0.5rem;
+        font-size: 0.8125rem;
+    }
+    
+    .draw-button:not(.is-active):hover,
+    .draw-button.is-active {
+        padding: 0.5rem 0.875rem;
+    }
+    
+    .draw-button :deep(svg) {
+        width: 1.125rem;
+        height: 1.125rem;
+    }
+    
+    .draw-status-badge {
+        font-size: 0.6875rem;
+    }
+    
+    /* Hide tooltip on mobile */
+    .draw-button:hover::after {
+        display: none;
+    }
+}
+
+/* @media (max-width: 640px) {
+    .draw-control-container {
+        right: 0.5rem;
+        top: 0.5rem;
+    }
+    
+    .draw-button {
+        width: 2rem;
+        height: 2rem;
+        padding: 0.5rem;
+    }
+    
+    .draw-button:not(.is-active):hover,
+    .draw-button.is-active {
+        padding: 0.5rem 0.75rem;
+    }
+    
+    .draw-button :deep(svg) {
+        width: 1rem;
+        height: 1rem;
+    }
+} */
+
+/* Accessibility: reduce motion */
+@media (prefers-reduced-motion: reduce) {
+    .draw-button,
+    .draw-button :deep(svg),
+    .draw-status-badge {
+        transition: none;
+    }
+    
+    .draw-button.is-active::before,
+    .draw-button.is-active::after {
+        animation: none;
+    }
 }
 </style>
+
+<style>
+/* Global styles for draw mode */
+.leaflet-container.draw-mode-active {
+    cursor: crosshair !important;
+}
+
+.leaflet-container.draw-mode-active * {
+    cursor: crosshair !important;
+}
+</style>
\ No newline at end of file
diff --git a/resources/js/Components/Map/map.component.vue b/resources/js/Components/Map/map.component.vue
index d6d6f29..353162b 100644
--- a/resources/js/Components/Map/map.component.vue
+++ b/resources/js/Components/Map/map.component.vue
@@ -1,21 +1,72 @@
 <template>
-    <div style="position: relative">
-        <!-- <Map className="h-36" :center="state.center" :zoom="state.zoom"> // map component content </Map> -->
-        <div :id="mapId" class="rounded">
-            <div class="dark:bg-slate-900 bg-slate flex flex-col">
+    <div class="relative w-full">
+        <!-- Map Container -->
+        <div 
+            :id="mapId" 
+            class="relative h-[600px] w-full bg-gray-50 dark:bg-gray-900 rounded-xl overflow-hidden"
+        >
+            <div class="relative w-full h-full">
                 <ZoomControlComponent ref="zoom" :mapId="mapId" />
                 <DrawControlComponent ref="draw" :mapId="mapId" :southWest="southWest" :northEast="northEast" />
             </div>
         </div>
-        <div class="gba-control-validate btn-group-vertical">
+        
+        <!-- Validate Button -->
+        <div class="absolute left-4 top-44 z-[1000] select-none">
             <button
-                class="min-w-27 inline-flex cursor-pointer justify-center items-center whitespace-nowrap focus:outline-none transition-colors duration-150 border rounded ring-blue-700 text-black text-sm p-1"
+                class="group flex items-center justify-center relative overflow-visible outline-none font-semibold text-sm transition-all duration-300 ease-in-out
+                       w-10 h-10 rounded-xl border-2 shadow-md
+                       focus-visible:outline focus-visible:outline-3 focus-visible:outline-offset-2"
+                :class="[
+                    validBoundingBox 
+                        ? 'bg-gradient-to-br from-lime-500 to-lime-700 border-lime-700 text-white shadow-lime-500/40 cursor-default gap-2 w-auto px-4 focus-visible:outline-lime-500/50' 
+                        : 'bg-white dark:bg-gray-800 border-red-500 text-red-600 dark:text-red-400 gap-0 hover:bg-red-50 dark:hover:bg-gray-900 hover:border-red-500 hover:text-red-700 dark:hover:text-red-300 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-red-500/30 hover:w-auto hover:px-4 hover:gap-2 focus-visible:outline-red-500/50'
+                ]"
                 type="button"
                 @click.stop.prevent="validateBoundingBox"
-                :class="[validBoundingBox ? 'cursor-not-allowed bg-green-500 is-active' : 'bg-red-500 ']"
+                :aria-label="validBoundingBox ? 'Bounding box is valid' : 'Validate bounding box'"
             >
-                <!-- <BaseIcon v-if="mdiMapCheckOutline" :path="mdiMapCheckOutline" /> -->
-                {{ label }}
+                <!-- Icon -->
+                <BaseIcon 
+                    v-if="mdiMapCheckOutline" 
+                    :path="mdiMapCheckOutline" 
+                    :size="20"
+                    :class="[
+                        'transition-transform duration-300',
+                        validBoundingBox && 'animate-[checkPulse_2s_ease-in-out_infinite]'
+                    ]"
+                />
+                
+                <!-- Status badge -->
+                <span 
+                    class="text-xs font-bold uppercase tracking-wider whitespace-nowrap transition-all duration-300 overflow-hidden"
+                    :class="[
+                        validBoundingBox 
+                            ? 'max-w-[100px] opacity-100 text-white drop-shadow' 
+                            : 'max-w-0 opacity-0 group-hover:max-w-[100px] group-hover:opacity-100'
+                    ]"
+                >
+                    {{ label }}
+                </span>
+
+                <!-- Pulse animation for valid state -->
+                <span 
+                    v-if="validBoundingBox"
+                    class="absolute top-1/2 left-1/2 w-full h-full bg-white/30 rounded-xl -translate-x-1/2 -translate-y-1/2 animate-[pulse_2s_ease-out_infinite] pointer-events-none"
+                ></span>
+
+                <!-- Ripple effect on click -->
+                <span 
+                    class="absolute top-1/2 left-1/2 w-0 h-0 rounded-full bg-white/30 -translate-x-1/2 -translate-y-1/2 transition-all duration-[600ms] active:w-[300px] active:h-[300px]"
+                ></span>
+
+                <!-- Tooltip -->
+                <span 
+                    v-if="!validBoundingBox"
+                    class="absolute left-[calc(100%+0.5rem)] top-1/2 -translate-y-1/2 px-3 py-1.5 bg-gray-800 text-white text-xs rounded-md whitespace-nowrap opacity-0 pointer-events-none transition-opacity duration-200 z-[1001] group-hover:opacity-100 group-hover:animate-[fadeInTooltip_0.2s_ease_0.5s_forwards]"
+                >
+                    Click to validate
+                </span>
             </button>
         </div>
     </div>
@@ -27,8 +78,7 @@ import { Component, Vue, Prop, Ref } from 'vue-facing-decorator';
 import { Map } from 'leaflet/src/map/index';
 import { Control } from 'leaflet/src/control/Control';
 import { LatLngBoundsExpression, LatLngBounds } from 'leaflet/src/geo/LatLngBounds';
-// import { toLatLng } from 'leaflet/src/geo/LatLng';
-import { LatLng } from 'leaflet'; //'leaflet/src/geo/LatLng';
+import { LatLng } from 'leaflet';
 import { tileLayerWMS } from 'leaflet/src/layer/tile/TileLayer.WMS';
 import { Attribution } from 'leaflet/src/control/Control.Attribution';
 import { mdiMapCheckOutline } from '@mdi/js';
@@ -37,22 +87,15 @@ import BaseIcon from '@/Components/BaseIcon.vue';
 import { MapOptions } from './MapOptions';
 import { LayerOptions, LayerMap } from './LayerOptions';
 import { MapService } from '@/Stores/map.service';
-import ZoomControlComponent from './zoom.component.vue';
-import DrawControlComponent from './draw.component.vue';
+import { ZoomControlComponent } from './zoom.component.vue';
+import { DrawControlComponent } from './draw.component.vue';
 import { Coverage } from '@/Dataset';
 import { canvas } from 'leaflet/src/layer/vector/Canvas';
 import { svg } from 'leaflet/src/layer/vector/SVG';
 import Notification from '@/utils/toast';
 
 Map.include({
-    // @namespace Map; @method getRenderer(layer: Path): Renderer
-    // Returns the instance of `Renderer` that should be used to render the given
-    // `Path`. It will ensure that the `renderer` options of the map and paths
-    // are respected, and that the renderers do exist on the map.
     getRenderer: function (layer) {
-        // @namespace Path; @option renderer: Renderer
-        // Use this specific instance of `Renderer` for this path. Takes
-        // precedence over the map's [default renderer](#map-renderer).
         var renderer = layer.options.renderer || this._getPaneRenderer(layer.options.pane) || this.options.renderer || this._renderer;
 
         if (!renderer) {
@@ -79,15 +122,11 @@ Map.include({
     },
 
     _createRenderer: function (options) {
-        // @namespace Map; @option preferCanvas: Boolean = false
-        // Whether `Path`s should be rendered on a `Canvas` renderer.
-        // By default, all `Path`s are rendered in a `SVG` renderer.
         return (this.options.preferCanvas && canvas(options)) || svg(options);
     },
 });
 
 const DEFAULT_BASE_LAYER_NAME = 'BaseLayer';
-// const DEFAULT_BASE_LAYER_URL = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
 const DEFAULT_BASE_LAYER_ATTRIBUTION = '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors';
 
 @Component({
@@ -98,33 +137,19 @@ const DEFAULT_BASE_LAYER_ATTRIBUTION = '&copy; <a target="_blank" href="http://o
         BaseIcon,
     },
 })
-export default class MapComponent extends Vue {
-    /**
-     * A map with the given ID is created inside this component.
-     * This ID can be used the get the map instance over the map cache service.
-     */
+export class MapComponent extends Vue {
     @Prop()
     public mapId: string;
 
-    /**
-     * The corresponding leaflet map options (see: https://leafletjs.com/reference-1.3.4.html#map-option)
-     */
     @Prop()
     public mapOptions: MapOptions;
 
     @Prop()
     public coverage: Coverage;
 
-    // markerService: MarkerService
-    /**
-     * Bounds for the map
-     */
     @Prop({ default: null })
     public fitBounds: LatLngBoundsExpression;
 
-    /**
-     * Describes the the zoom control options (see: https://leafletjs.com/reference-1.3.4.html#control-zoom)
-     */
     @Prop()
     public zoomControlOptions: Control.ZoomOptions;
 
@@ -132,7 +157,7 @@ export default class MapComponent extends Vue {
     public baseMaps: LayerMap;
 
     get label(): string {
-        return this.validBoundingBox ? '  valid' : 'invalid';
+        return this.validBoundingBox ? 'Valid' : 'Invalid';
     }
 
     get validBoundingBox(): boolean {
@@ -144,35 +169,31 @@ export default class MapComponent extends Vue {
 
         let isBoundValid = true;
         if (isValidNumber) {
-            let _southWest: LatLng = new LatLng(this.coverage.y_min, this.coverage.x_min);
-            let _northEast: LatLng = new LatLng(this.coverage.y_max, this.coverage.x_max);
+            let _southWest: LatLng = new LatLng(this.coverage.y_min!, this.coverage.x_min!);
+            let _northEast: LatLng = new LatLng(this.coverage.y_max!, this.coverage.x_max!);
             const bounds = new LatLngBounds(this.southWest, this.northEast);
             if (!bounds.isValid() || !(_southWest.lat < _northEast.lat && _southWest.lng < _northEast.lng)) {
-                // this.draw.removeShape();
-                // Notification.showTemporary('Bounds are not valid.');
                 isBoundValid = false;
             }
         }
         return isValidNumber && isBoundValid;
     }
 
-    @Ref('zoom') private zoom: ZoomControlComponent;
-    @Ref('draw') private draw: DrawControlComponent;
+    @Ref('zoom') 
+    private zoom: ZoomControlComponent;
+    
+    @Ref('draw') 
+    private draw: DrawControlComponent;
 
-    // services:
     mapService = MapService();
 
     mdiMapCheckOutline = mdiMapCheckOutline;
     southWest: LatLng;
     northEast: LatLng;
 
-    /**
-     * Informs when initialization is done with map id.
-     */
     public onMapInitializedEvent: EventEmitter<string> = new EventEmitter<string>();
 
     public map!: Map;
-    // protected drawnItems!: FeatureGroup<any>;
 
     validateBoundingBox() {
         if (this.validBoundingBox == false) {
@@ -182,53 +203,22 @@ export default class MapComponent extends Vue {
         }
         this.map.control && this.map.control.disable();
         var _this = this;
-        // // _this.locationErrors.length = 0;
-        // this.drawnItems.clearLayers();
-        // //var xmin = document.getElementById("xmin").value;
-        // var xmin = (<HTMLInputElement>document.getElementById("xmin")).value;
-        // // var ymin = document.getElementById("ymin").value;
-        // var ymin = (<HTMLInputElement>document.getElementById("ymin")).value;
-        // //var xmax = document.getElementById("xmax").value;
-        // var xmax = (<HTMLInputElement>document.getElementById("xmax")).value;
-        // //var ymax = document.getElementById("ymax").value;
-        // var ymax = (<HTMLInputElement>document.getElementById("ymax")).value;
-        // var bounds = [[ymin, xmin], [ymax, xmax]];
-
-        // let _southWest: LatLng;
-        // let _northEast: LatLng;
-        // if (this.coverage.x_min && this.coverage.y_min) {
-        let _southWest: LatLng = new LatLng(this.coverage.y_min, this.coverage.x_min);
-        // }
-        // if (this.coverage.x_max && this.coverage.y_max) {
-        let _northEast: LatLng = new LatLng(this.coverage.y_max, this.coverage.x_max);
-        // }
+ 
+        let _southWest: LatLng = new LatLng(this.coverage.y_min!, this.coverage.x_min!);
+        let _northEast: LatLng = new LatLng(this.coverage.y_max!, this.coverage.x_max!);
+ 
         const bounds = new LatLngBounds(this.southWest, this.northEast);
         if (!bounds.isValid() || !(_southWest.lat < _northEast.lat && _southWest.lng < _northEast.lng)) {
             this.draw.removeShape();
             Notification.showTemporary('Bounds are not valid.');
         } else {
-            // this.draw.drawShape(_southWest, _northEast);
             try {
                 this.draw.drawShape(_southWest, _northEast);
                 _this.map.fitBounds(bounds);
 
-                // var boundingBox = L.rectangle(bounds, { color: "#005F6A", weight: 1 });
-                // // this.geolocation.xmin = xmin;
-                // // this.geolocation.ymin = ymin;
-                // // this.geolocation.xmax = xmax;
-                // // this.geolocation.ymax = ymax;
-
-                // _this.drawnItems.addLayer(boundingBox);
-                // _this.map.fitBounds(bounds);
-                // this.options.message = "valid bounding box";
-                // this.$toast.success("valid bounding box", this.options);
-                Notification.showSuccess('valid bounding box');
+                Notification.showSuccess('Valid bounding box');
             } catch (err) {
-                // this.options.message = e.message;
-                // // _this.errors.push(e);
-                // this.$toast.error(e.message, this.options);
                 Notification.showTemporary('An error occurred while drawing bounding box');
-                // generatingCodes.value = false;
                 throw err;
             }
         }
@@ -242,16 +232,11 @@ export default class MapComponent extends Vue {
         this.map.off('zoomend zoomlevelschange');
     }
 
-    // @Emit(this.onMapInitializedEvent)
     protected initMap(): void {
-        // let map: Map = (this.map = this.mapService.getMap(this.mapId));
-
         let map: Map = (this.map = new Map(this.mapId, this.mapOptions));
         this.mapService.setMap(this.mapId, map);
         map.scrollWheelZoom.disable();
 
-        // return this.mapId;
-        //    this.$emit("onMapInitializedEvent", this.mapId);
         this.onMapInitializedEvent.emit(this.mapId);
         this.addBaseMap();
 
@@ -260,45 +245,28 @@ export default class MapComponent extends Vue {
 
         map.on(
             'Draw.Event.CREATED',
-            function (event) {
-                // drawnItems.clearLayers();
-                // var type = event.type;
+            (event: any) => {
                 var layer = event.layer;
-
-                // if (type === "rectancle") {
-                // layer.bindPopup("A popup!" + layer.getBounds().toBBoxString());
                 var bounds = layer.getBounds();
                 this.coverage.x_min = bounds.getSouthWest().lng;
                 this.coverage.y_min = bounds.getSouthWest().lat;
-                // console.log(this.geolocation.xmin);
                 this.coverage.x_max = bounds.getNorthEast().lng;
                 this.coverage.y_max = bounds.getNorthEast().lat;
-                // }
-
-                // drawnItems.addLayer(layer);
             },
-            this,
         );
 
-        // Initialise the FeatureGroup to store editable layers
-        // let drawnItems = (this.drawnItems = new FeatureGroup());
-        // map.addLayer(drawnItems);
-
         this.map.on('zoomend zoomlevelschange', this.zoom.updateDisabled, this.zoom);
 
-        // if (this.fitBounds) {
-        //     this.map.fitBounds(this.fitBounds);
-        // }
         if (this.coverage.x_min && this.coverage.y_min) {
-            this.southWest = new LatLng(this.coverage.y_min, this.coverage.x_min);
+            this.southWest = new LatLng(this.coverage.y_min!, this.coverage.x_min!);
         } else {
             this.southWest = new LatLng(46.5, 9.9);
         }
         if (this.coverage.x_max && this.coverage.y_max) {
-            this.northEast = new LatLng(this.coverage.y_max, this.coverage.x_max);
+            this.northEast = new LatLng(this.coverage.y_max!, this.coverage.x_max!);
         } else {
             this.northEast = new LatLng(48.9, 16.9);
-        } // this.northEast = toLatLng(48.9, 16.9);
+        }
         const bounds = new LatLngBounds(this.southWest, this.northEast);
         map.fitBounds(bounds);
 
@@ -318,10 +286,6 @@ export default class MapComponent extends Vue {
     private addBaseMap(layerOptions?: LayerOptions): void {
         if (this.map) {
             if (!this.baseMaps || this.baseMaps.size === 0) {
-                // let bmapgrau = tileLayer('https://{s}.wien.gv.at/basemap/bmapgrau/normal/google3857/{z}/{y}/{x}.png', {
-                //         subdomains: ['maps', 'maps1', 'maps2', 'maps3', 'maps4'],
-                //         attribution: 'Datenquelle: <a href="http://www.basemap.at/">basemap.at</a>',
-                // });
                 let osmGgray = tileLayerWMS('https://ows.terrestris.de/osm-gray/service', {
                     format: 'image/png',
                     attribution: DEFAULT_BASE_LAYER_ATTRIBUTION,
@@ -337,45 +301,61 @@ export default class MapComponent extends Vue {
         }
     }
 }
+export default MapComponent;
 </script>
 
-<style scoped lang="css">
-/* .leaflet-container {
+<style scoped>
+/* Leaflet container - only what can't be done with Tailwind */
+:deep(.leaflet-container) {
     height: 600px;
     width: 100%;
-    background-color: transparent;
-    outline-offset: 1px;
-} */
-.leaflet-container {
-    height: 600px;
-    width: 100%;
-    background: none;
+    background: transparent;
 }
 
-.gba-control-validate {
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    cursor: pointer;
-    border-radius: 4px;
-    position: absolute;
-    left: 10px;
-    top: 150px;
-    z-index: 999;
+:deep(.leaflet-container .leaflet-pane) {
+    z-index: 30 !important;
 }
 
-.btn-group-vertical button {
-    display: block;
-
-    margin-left: 0;
-    margin-top: 0.5em;
+/* Custom animations */
+@keyframes checkPulse {
+    0%, 100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.1);
+    }
 }
 
-.leaflet-container .leaflet-pane {
-    z-index: 30!important;
+@keyframes pulse {
+    0% {
+        transform: translate(-50%, -50%) scale(0);
+        opacity: 1;
+    }
+    100% {
+        transform: translate(-50%, -50%) scale(1.5);
+        opacity: 0;
+    }
 }
-/* .leaflet-pane  {
-    z-index: 30;
-} */
-</style>
+
+@keyframes fadeInTooltip {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    :deep(.leaflet-container) {
+        height: 100%;
+    }
+}
+
+@media (max-width: 640px) {
+    :deep(.leaflet-container) {
+        height: 100%;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/resources/js/Components/Map/zoom.component.vue b/resources/js/Components/Map/zoom.component.vue
index bd7fc4a..49851a9 100644
--- a/resources/js/Components/Map/zoom.component.vue
+++ b/resources/js/Components/Map/zoom.component.vue
@@ -1,21 +1,27 @@
 <template>
-    <div class="gba-control-zoom btn-group-vertical">
+    <div class="zoom-control-container">
         <button
             ref="inputPlus"
-            class="disabled:bg-gray-200 inline-flex cursor-pointer justify-center items-center whitespace-nowrap focus:outline-none transition-colors duration-150 border rounded ring-blue-700 bg-teal-50 text-black border-teal-50 text-sm p-1"
+            class="zoom-button zoom-button-plus"
             type="button"
             @click.stop.prevent="zoomIn"
+            :disabled="isZoomInDisabled"
+            aria-label="Zoom in"
         >
-            <BaseIcon v-if="mdiPlus" :path="mdiPlus" />
+            <BaseIcon v-if="mdiPlus" :path="mdiPlus" :size="20" />
         </button>
 
+        <div class="zoom-separator"></div>
+
         <button
             ref="inputMinus"
-            class="disabled:bg-gray-200 inline-flex cursor-pointer justify-center items-center whitespace-nowrap focus:outline-none transition-colors duration-150 border rounded ring-blue-700 bg-teal-50 text-black border-teal-50 text-sm p-1"
+            class="zoom-button zoom-button-minus"
             type="button"
             @click.stop.prevent="zoomOut"
+            :disabled="isZoomOutDisabled"
+            aria-label="Zoom out"
         >
-            <BaseIcon v-if="mdiMinus" :path="mdiMinus" />
+            <BaseIcon v-if="mdiMinus" :path="mdiMinus" :size="20" />
         </button>
     </div>
 </template>
@@ -26,6 +32,7 @@ import { MapService } from '@/Stores/map.service';
 
 import BaseIcon from '@/Components/BaseIcon.vue';
 import { mdiPlus, mdiMinus } from '@mdi/js';
+import { Map } from 'leaflet';
 
 @Component({
     name: 'zoom-control',
@@ -33,7 +40,7 @@ import { mdiPlus, mdiMinus } from '@mdi/js';
         BaseIcon,
     },
 })
-export default class ZoomControlComponent extends Vue {
+export class ZoomControlComponent extends Vue {
     mdiPlus = mdiPlus;
     mdiMinus = mdiMinus;
 
@@ -46,16 +53,23 @@ export default class ZoomControlComponent extends Vue {
     @Ref('inputMinus') inputMinus: HTMLButtonElement;
 
     mapService = MapService();
-    map;
+    map: Map | null = null;
+    isZoomInDisabled = false;
+    isZoomOutDisabled = false;
 
-    // mounted() {
-    //     let map = (this.map = this.mapService.getMap(this.mapId));
-    //     map.on('zoomend zoomlevelschange', this.updateDisabled, this);
-    // }
+    mounted() {
+        let map = (this.map = this.mapService.getMap(this.mapId));
+        if (map) {
+            map.on('zoomend zoomlevelschange', this.updateDisabled, this);
+            this.updateDisabled();
+        }
+    }
 
-    // unmounted() {
-    //     this.map.off('zoomend zoomlevelschange');
-    // }
+    unmounted() {
+        if (this.map) {
+            this.map.off('zoomend zoomlevelschange', this.updateDisabled, this);
+        }
+    }
 
     public zoomIn() {
         let map = this.mapService.getMap(this.mapId);
@@ -69,44 +83,266 @@ export default class ZoomControlComponent extends Vue {
 
     public updateDisabled() {
         let map = this.mapService.getMap(this.mapId);
-        // let className = 'leaflet-disabled';
+        if (!map) return;
 
-        this.inputPlus.disabled = false;
-        this.inputPlus.setAttribute('aria-disabled', 'false');
+        this.isZoomInDisabled = map.getZoom() >= map.getMaxZoom();
+        this.isZoomOutDisabled = map.getZoom() <= map.getMinZoom();
 
-        this.inputMinus.disabled = false;
-        this.inputMinus.setAttribute('aria-disabled', 'false');
-
-        if (map.getZoom() === map.getMinZoom()) {
-            this.inputMinus.disabled = true;
-            this.inputMinus.setAttribute('aria-disabled', 'true');
+        if (this.inputPlus) {
+            this.inputPlus.disabled = this.isZoomInDisabled;
+            this.inputPlus.setAttribute('aria-disabled', this.isZoomInDisabled.toString());
         }
-        if (map.getZoom() === map.getMaxZoom()) {
-            this.inputPlus.disabled = true;
-            this.inputPlus.setAttribute('aria-disabled', 'true');
+
+        if (this.inputMinus) {
+            this.inputMinus.disabled = this.isZoomOutDisabled;
+            this.inputMinus.setAttribute('aria-disabled', this.isZoomOutDisabled.toString());
         }
     }
 }
+export default ZoomControlComponent;
 </script>
 
-<style lang="css">
-.gba-control-zoom {
+<style scoped>
+.zoom-control-container {
+    position: absolute;
+    left: 1rem;
+    top: 1rem;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    background: white;
+    border-radius: 0.75rem;
+    box-shadow:
+        0 4px 6px -1px rgba(0, 0, 0, 0.1),
+        0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    overflow: hidden;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
-    cursor: pointer;
-    border-radius: 4px;
-    position: absolute;
-    left: 10px;
-    top: 10px;
-    z-index: 40;
+    transition: box-shadow 0.2s ease;
 }
 
-.btn-group-vertical button {
-    display: block;
+.zoom-control-container:hover {
+    box-shadow:
+        0 10px 15px -3px rgba(0, 0, 0, 0.1),
+        0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
 
-    margin-left: 0;
-    margin-top: 0.5em;
+.dark .zoom-control-container {
+    background: #1f2937;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+}
+
+.dark .zoom-control-container:hover {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
+}
+
+.zoom-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    padding: 0;
+    background: white;
+    border: none;
+    color: #374151;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    position: relative;
+    outline: none;
+}
+
+.dark .zoom-button {
+    background: #1f2937;
+    color: #d1d5db;
+}
+
+.zoom-button:hover:not(:disabled) {
+    background: #65dc21;
+    color: white;
+    transform: scale(1.05);
+}
+
+.dark .zoom-button:hover:not(:disabled) {
+    background: #65dc21;
+}
+
+.zoom-button:active:not(:disabled) {
+    transform: scale(0.95);
+}
+
+.zoom-button:disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+    background: #f3f4f6;
+    color: #9ca3af;
+}
+
+.dark .zoom-button:disabled {
+    background: #111827;
+    color: #4b5563;
+}
+
+.zoom-button:focus-visible {
+    outline: 2px solid #65dc21;
+    outline-offset: -2px;
+}
+
+/* Icon sizing */
+.zoom-button :deep(svg) {
+    width: 1.25rem;
+    height: 1.25rem;
+}
+
+/* Separator between buttons */
+.zoom-separator {
+    height: 1px;
+    background: #e5e7eb;
+}
+
+.dark .zoom-separator {
+    background: #374151;
+}
+
+/* Hover effect for the plus button */
+.zoom-button-plus::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(101, 220, 33, 0.1) 0%, rgba(53, 124, 6, 0.1) 100%);
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    pointer-events: none;
+}
+
+.zoom-button-plus:hover:not(:disabled)::after {
+    opacity: 1;
+}
+
+/* Hover effect for the minus button */
+.zoom-button-minus::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(101, 220, 33, 0.1) 0%, rgba(53, 124, 6, 0.1) 100%);
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    pointer-events: none;
+}
+
+.zoom-button-minus:hover:not(:disabled)::after {
+    opacity: 1;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .zoom-control-container {
+        left: 0.75rem;
+        top: 0.75rem;
+    }
+
+    .zoom-button {
+        width: 2.25rem;
+        height: 2.25rem;
+    }
+
+    .zoom-button :deep(svg) {
+        width: 1.125rem;
+        height: 1.125rem;
+    }
+}
+
+@media (max-width: 640px) {
+    .zoom-control-container {
+        left: 0.5rem;
+        top: 0.5rem;
+    }
+
+    .zoom-button {
+        width: 2rem;
+        height: 2rem;
+    }
+
+    .zoom-button :deep(svg) {
+        width: 1rem;
+        height: 1rem;
+    }
+}
+
+/* Animation for button press */
+@keyframes buttonPress {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(0.95);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+.zoom-button:active:not(:disabled) {
+    animation: buttonPress 0.2s ease;
+}
+
+/* Tooltip-like effect on hover (optional) */
+.zoom-button-plus:hover:not(:disabled)::before {
+    content: 'Zoom In';
+    position: absolute;
+    left: calc(100% + 0.5rem);
+    top: 50%;
+    transform: translateY(-50%);
+    background: #1f2937;
+    color: white;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+    font-size: 0.75rem;
+    white-space: nowrap;
+    opacity: 0;
+    animation: fadeIn 0.2s ease 0.5s forwards;
+    pointer-events: none;
+    z-index: 1001;
+}
+
+.zoom-button-minus:hover:not(:disabled)::before {
+    content: 'Zoom Out';
+    position: absolute;
+    left: calc(100% + 0.5rem);
+    top: 50%;
+    transform: translateY(-50%);
+    background: #1f2937;
+    color: white;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+    font-size: 0.75rem;
+    white-space: nowrap;
+    opacity: 0;
+    animation: fadeIn 0.2s ease 0.5s forwards;
+    pointer-events: none;
+    z-index: 1001;
+}
+
+@keyframes fadeIn {
+    to {
+        opacity: 1;
+    }
+}
+
+/* Hide tooltips on mobile */
+@media (max-width: 768px) {
+    .zoom-button-plus:hover:not(:disabled)::before,
+    .zoom-button-minus:hover:not(:disabled)::before {
+        display: none;
+    }
 }
 </style>
diff --git a/resources/js/Pages/Admin/Project/Create.vue b/resources/js/Pages/Admin/Project/Create.vue
index 688e0ee..769a041 100644
--- a/resources/js/Pages/Admin/Project/Create.vue
+++ b/resources/js/Pages/Admin/Project/Create.vue
@@ -39,9 +39,9 @@ const submit = async () => {
 
             <CardBox form @submit.prevent="submit()" class="shadow-lg">
                 <div class="grid grid-cols-1 gap-6">
-                    <FormField label="Label" help="Required. Displayed project label" :class="{ 'text-red-400': form.errors.label }">
+                    <FormField label="Label"  help="Lowercase letters, numbers, and hyphens only" :class="{ 'text-red-400': form.errors.label }">
                         <FormControl
-                            v-model="form.label"
+                            v-model="form.label"                           
                             type="text"
                             placeholder="e.g., my-awesome-project"                           
                             required
@@ -56,7 +56,7 @@ const submit = async () => {
 
                     <FormField
                         label="Name"
-                        help="Required. Project identifier (slug, lowercase, no spaces)"
+                        help="Required. Project title shown to users"
                         :class="{ 'text-red-400': form.errors.name }"
                     >
                         <FormControl
diff --git a/resources/js/Pages/Admin/Project/Edit.vue b/resources/js/Pages/Admin/Project/Edit.vue
index 4fceaf1..5f13ef9 100644
--- a/resources/js/Pages/Admin/Project/Edit.vue
+++ b/resources/js/Pages/Admin/Project/Edit.vue
@@ -48,11 +48,12 @@ const submit = async () => {
                 <div class="grid grid-cols-1 gap-6">
                     <FormField 
                         label="Label" 
-                        help="Project label (read-only)" 
+                        help="Lowercase letters, numbers, and hyphens only" 
                     >
                         <FormControl 
                             v-model="form.label" 
                             type="text" 
+                            help="Lowercase letters, numbers, and hyphens only"
                             :is-read-only=true                         
                             class="bg-gray-100 dark:bg-slate-800 cursor-not-allowed opacity-75"
                         />
@@ -60,7 +61,7 @@ const submit = async () => {
 
                     <FormField 
                         label="Name" 
-                        help="Required. Project identifier (slug)" 
+                        help="Required. Project title shown to users"
                         :class="{ 'text-red-400': form.errors.name }"
                     >
                         <FormControl 
diff --git a/resources/js/Pages/Editor/Dataset/Index.vue b/resources/js/Pages/Editor/Dataset/Index.vue
index e154d48..a2642a4 100644
--- a/resources/js/Pages/Editor/Dataset/Index.vue
+++ b/resources/js/Pages/Editor/Dataset/Index.vue
@@ -2,11 +2,12 @@
 // import { Head, Link, useForm, usePage } from '@inertiajs/inertia-vue3';
 import { Head, usePage } from '@inertiajs/vue3';
 import { ComputedRef } from 'vue';
-import { mdiSquareEditOutline, mdiAlertBoxOutline, mdiShareVariant, mdiBookEdit, mdiUndo, mdiLibraryShelves } from '@mdi/js';
-import { computed } from 'vue';
+import { mdiSquareEditOutline, mdiAlertBoxOutline, mdiShareVariant, mdiBookEdit, mdiUndo, mdiLibraryShelves, mdiAccountArrowLeft, mdiAccountArrowRight, mdiFingerprint, mdiPublish, mdiChevronDown, mdiChevronUp, mdiTrayArrowDown, mdiCheckDecagram } from '@mdi/js';
+import { computed, ref, onMounted } from 'vue';
 import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
 import SectionMain from '@/Components/SectionMain.vue';
 import BaseButton from '@/Components/BaseButton.vue';
+import BaseIcon from '@/Components/BaseIcon.vue';
 import CardBox from '@/Components/CardBox.vue';
 import BaseButtons from '@/Components/BaseButtons.vue';
 import NotificationBar from '@/Components/NotificationBar.vue';
@@ -26,78 +27,93 @@ const props = defineProps({
         type: Object,
         default: () => ({}),
     },
-    // user: {
-    //     type: Object,
-    //     default: () => ({}),
-    // }
 });
 
 const flash: ComputedRef<any> = computed(() => {
-    // let test = usePage();
-    // console.log(test);
     return usePage().props.flash;
 });
 
+// Legend visibility state with localStorage persistence
+const showLegend = ref(true);
+
+onMounted(() => {
+    const savedState = localStorage.getItem('datasetLegendVisible');
+    if (savedState !== null) {
+        showLegend.value = savedState === 'true';
+    }
+});
+
+const toggleLegend = () => {
+    showLegend.value = !showLegend.value;
+    localStorage.setItem('datasetLegendVisible', String(showLegend.value));
+};
 
-// const getRowClass = (dataset) => {
-//     // (props.options ? 'select' : props.type)
-//     let rowclass = '';
-//     if (dataset.server_state == 'accepted') {
-//         rowclass = 'bg-accepted';
-//     } else if (dataset.server_state == 'rejected_reviewer') {
-//         rowclass = 'bg-rejected-reviewer';
-//     } else if (dataset.server_state == 'reviewed') {
-//         rowclass = 'bg-reviewed';
-//     } else if (dataset.server_state == 'released') {
-//         rowclass = 'bg-released';
-//     } else if (dataset.server_state == 'published') {
-//         rowclass = 'bg-published';
-//     } else {
-//         rowclass = '';
-//     }
-//     return rowclass;
-// };
 const getRowClass = (dataset) => {
-    // (props.options ? 'select' : props.type)
-    let rowclass = '';
-    if (dataset.server_state == 'released') {
-        rowclass = 'bg-released';
-    } else if (dataset.server_state == 'editor_accepted' || dataset.server_state == 'rejected_reviewer') {
-        rowclass = 'bg-editor-accepted';
-    } else if (dataset.server_state == 'reviewed') {
-        rowclass = 'bg-reviewed';
-    } else if (dataset.server_state == 'published') {
-        rowclass = 'bg-published';
-    } else {
-        rowclass = '';
-    }
-    return rowclass;
-};
-
-// New method to format server state
-const formatServerState = (state: string) => {
-    if (state === 'inprogress') {
-        return 'draft';
-    } else if (state === 'released') {
-        return 'submitted';
-    } else if (state === 'approved') {
-        return 'ready for review';
-    } else if (state === 'reviewer_accepted') {
-        return 'in review';
-    }
-    return state; // Return the original state for other cases
+    // Return Tailwind classes that will be defined in tailwind.config
+    const stateClasses = {
+        'released': 'bg-released dark:bg-released-dark',
+        'editor_accepted': 'bg-editor-accepted dark:bg-editor-accepted-dark',
+        'rejected_reviewer': 'bg-rejected-reviewer dark:bg-rejected-reviewer-dark',
+        'reviewed': 'bg-reviewed dark:bg-reviewed-dark',
+        'published': 'bg-published dark:bg-published-dark',
+    };
+    
+    return stateClasses[dataset.server_state] || '';
 };
 
 
+// Method to get state badge color
+const getStateColor = (state: string) => {
+    const stateColors = {
+        'inprogress': 'bg-sky-200 text-sky-900 dark:bg-sky-900 dark:text-sky-200',
+        'released': 'bg-blue-300 text-blue-900 dark:bg-blue-900 dark:text-blue-200',
+        'editor_accepted': 'bg-teal-200 text-teal-900 dark:bg-teal-900 dark:text-teal-200',
+        'rejected_reviewer': 'bg-amber-200 text-amber-900 dark:bg-amber-900 dark:text-amber-200',
+        'rejected_to_reviewer': 'bg-yellow-200 text-yellow-900 dark:bg-yellow-900 dark:text-yellow-200', 
+         'rejected_editor': 'bg-rose-300 text-rose-900 dark:bg-rose-900 dark:text-rose-200',
+        'reviewed': 'bg-yellow-300 text-yellow-900 dark:bg-yellow-900 dark:text-yellow-200',
+        'published': 'bg-green-300 text-green-900 dark:bg-green-900 dark:text-green-200',
+        'approved': 'bg-cyan-200 text-cyan-900 dark:bg-cyan-900 dark:text-cyan-200',
+        'reviewer_accepted': 'bg-lime-200 text-lime-900 dark:bg-lime-900 dark:text-lime-200',
+    };
+    return stateColors[state] || 'bg-sky-200 text-sky-900 dark:bg-sky-900 dark:text-sky-200';
+};
+
+// Dynamic legend definitions
+const datasetStates = [
+    { key: 'released', label: 'Submitted' },
+    { key: 'editor_accepted', label: 'In Approval' },
+    // { key: 'approved', label: 'Ready for Review' },
+    // { key: 'reviewer_accepted', label: 'In Review' },
+    { key: 'reviewed', label: 'Reviewed' },
+    { key: 'published', label: 'Published' },
+    { key: 'rejected_reviewer', label: 'Rejected by Reviewer' },
+];
+const getLabel = (key: string) => {
+  return datasetStates.find(s => s.key === key)?.label || 'Unknown'
+}
+
+const availableActions = [
+    { icon: mdiSquareEditOutline, label: 'Edit', color: 'text-blue-500' },
+    { icon: mdiTrayArrowDown, label: 'Receive', color: 'text-cyan-500' },
+    { icon: mdiCheckDecagram, label: 'Approve (Send to Reviewer)', color: 'text-teal-600' },
+    { icon: mdiAccountArrowLeft, label: 'Reject to Submitter', color: 'text-amber-600' },
+    { icon: mdiAccountArrowRight, label: 'Reject to Reviewer', color: 'text-yellow-600' },
+    { icon: mdiLibraryShelves, label: 'Classify', color: 'text-blue-500' },
+    { icon: mdiPublish, label: 'Publish', color: 'text-green-600' },
+    { icon: mdiFingerprint, label: 'Mint DOI', color: 'text-cyan-600' },
+];
+
+const truncateTitle = (text: string, length = 50) => {
+    if (!text) return '';
+    return text.length > length ? text.substring(0, length) + '...' : text;
+};
 </script>
 
 <template>
     <LayoutAuthenticated>
-
         <Head title="Editor Datasets" />
         <SectionMain>
-
-
             <NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
                 {{ flash.message }}
             </NotificationBar>
@@ -108,6 +124,80 @@ const formatServerState = (state: string) => {
                 {{ flash.error }}
             </NotificationBar>
 
+            <!-- Legend -->
+            <CardBox class="mb-4">
+                <!-- Legend Header with Toggle -->
+                <div 
+                    class="flex items-center justify-between cursor-pointer select-none p-4 border-b border-gray-200 dark:border-slate-700 hover:bg-gray-50 dark:hover:bg-slate-800/50 transition-colors"
+                    @click="toggleLegend"
+                >
+                    <div class="flex items-center gap-2">
+                        <svg class="w-5 h-5 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                        <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">
+                            Legend - States & Actions
+                        </h3>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <span class="text-xs text-gray-500 dark:text-gray-400">
+                            {{ showLegend ? 'Click to hide' : 'Click to show' }}
+                        </span>
+                        <BaseIcon 
+                            :path="showLegend ? mdiChevronUp : mdiChevronDown" 
+                            :size="20" 
+                            class="text-gray-500 dark:text-gray-400 transition-transform"
+                        />
+                    </div>
+                </div>
+
+                <!-- Collapsible Legend Content -->
+                <transition
+                    enter-active-class="transition-all duration-300 ease-out"
+                    enter-from-class="max-h-0 opacity-0"
+                    enter-to-class="max-h-96 opacity-100"
+                    leave-active-class="transition-all duration-300 ease-in"
+                    leave-from-class="max-h-96 opacity-100"
+                    leave-to-class="max-h-0 opacity-0"
+                >
+                    <div v-show="showLegend" class="overflow-hidden">
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 p-4">
+                            <!-- State Colors Legend -->
+                            <div>
+                                <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center gap-2">
+                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+                                    </svg>
+                                    Dataset States
+                                </h3>
+                                <div class="grid grid-cols-2 gap-2 text-xs">
+                                    <div v-for="state in datasetStates" :key="state.key" class="flex items-center gap-2">
+                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full" :class="getStateColor(state.key)">
+                                            {{ state.label }}
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Actions Legend -->
+                            <div>
+                                <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center gap-2">
+                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+                                    </svg>
+                                    Available Actions
+                                </h3>
+                                <div class="grid grid-cols-1 gap-1.5 text-xs">
+                                    <div v-for="action in availableActions" :key="action.label" class="flex items-center gap-2">
+                                        <BaseIcon :path="action.icon" :size="16" :class="action.color" />
+                                        <span class="text-gray-700 dark:text-gray-300">{{ action.label }}</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </transition>
+            </CardBox>
 
             <!-- table -->
             <CardBox class="mb-6" has-table>
@@ -115,172 +205,144 @@ const formatServerState = (state: string) => {
                     <table>
                         <thead>
                             <tr>
-                                <th scope="col" class="py-3 text-left text-xs font-medium uppercase tracking-wider dark:text-white">
-                                    <!-- <Sort label="Dataset Title" attribute="title" :search="form.search" /> -->
-                                    Title
-                                </th>
-                                <th scope="col" class="py-3 text-left text-xs font-medium uppercase tracking-wider dark:text-white">
-                                    Submitter
-                                </th>
-                                <th scope="col" class="py-3 text-left text-xs font-medium uppercase tracking-wider dark:text-white">
-                                    State
-                                </th>
-                                <th scope="col" class="py-3 text-left text-xs font-medium uppercase tracking-wider dark:text-white">
-                                    Editor
-                                </th>
-                                <th scope="col" class="py-3 text-left text-xs font-medium uppercase tracking-wider dark:text-white">
-                                    Date of last modification
-                                </th>
-                                <th scope="col" class="relative px-6 py-3 dark:text-white" v-if="can.edit || can.delete">
-                                    <span class="sr-only">Actions</span>
-                                </th>
+                                <th>Title</th>
+                                <th>Submitter</th>
+                                <th>State</th>
+                                <th>Editor</th>
+                                <th>Modified</th>
+                                <th v-if="can.edit || can.delete">Actions</th>
                             </tr>
                         </thead>
 
-                        <tbody class="bg-white divide-y divide-gray-200">
+                        <tbody>
                             <tr v-for="dataset in props.datasets.data" :key="dataset.id"
-                                :class="[getRowClass(dataset)]">
-                                <td data-label="Login"
-                                    class="py-4 whitespace-nowrap text-gray-700 table-title">
-                                    <!-- <Link v-bind:href="stardust.route('settings.user.show', [user.id])"
-                                    class="no-underline hover:underline text-cyan-600 dark:text-cyan-400">
-                                {{ user.login }}
-                                </Link> -->
-                                    <!-- {{ user.id }} -->
-                                    {{ dataset.main_title }}
+                                :class="['hover:bg-gray-50 dark:hover:bg-slate-800 transition-colors', getRowClass(dataset)]">
+                                <td data-label="Title">
+                                    <div class="max-w-xs">
+                                        <span 
+                                            class="text-gray-700 dark:text-gray-300 text-sm font-medium"
+                                            :title="dataset.main_title"
+                                        >
+                                            {{ truncateTitle(dataset.main_title) }}
+                                        </span>
+                                    </div>
                                 </td>
-                                <td class="py-4 whitespace-nowrap text-gray-700">
-                                    <div class="text-sm">{{ dataset.user.login }}</div>
+                                <td data-label="Submitter">
+                                    <span class="text-sm text-gray-700 dark:text-gray-300">
+                                        {{ dataset.user.login }}
+                                    </span>
                                 </td>
-                                <td class="py-4 whitespace-nowrap text-gray-700">
-                                    <div class="text-sm"> {{ formatServerState(dataset.server_state) }}</div>
-                                    <div v-if="dataset.server_state === 'rejected_reviewer' && dataset.reject_reviewer_note"
-                                        class="inline-block relative ml-2 group">
-                                        <button
-                                            class="w-5 h-5 rounded-full bg-gray-200 text-gray-600 text-xs flex items-center justify-center focus:outline-none hover:bg-gray-300">
-                                            i
-                                        </button>
-                                        <div
-                                            class="absolute left-0 top-full mt-1 w-64 bg-white shadow-lg rounded-md p-3 text-xs text-left z-50 transform scale-0 origin-top-left transition-transform duration-100 group-hover:scale-100">
-                                            <p class="text-gray-700 max-h-40 overflow-y-auto overflow-x-hidden whitespace-normal break-words">
-                                                {{ dataset.reject_reviewer_note }}
-                                            </p>
-                                            <div class="absolute -top-1 left-1 w-2 h-2 bg-white transform rotate-45">
+                                <td data-label="State">
+                                    <div class="flex items-center gap-2">
+                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium capitalize"
+                                            :class="getStateColor(dataset.server_state)">
+                                            {{ getLabel(dataset.server_state) }}
+                                        </span>
+                                        <div v-if="dataset.server_state === 'rejected_reviewer' && dataset.reject_reviewer_note"
+                                            class="relative group">
+                                            <button
+                                                class="w-5 h-5 rounded-full bg-gray-200 dark:bg-slate-700 text-gray-600 dark:text-gray-300 text-xs flex items-center justify-center focus:outline-none hover:bg-gray-300 dark:hover:bg-slate-600 transition-colors">
+                                                i
+                                            </button>
+                                            <div
+                                                class="absolute left-0 top-full mt-1 w-64 bg-white dark:bg-slate-800 shadow-lg rounded-md p-3 text-xs text-left z-50 transform scale-0 origin-top-left transition-transform duration-100 group-hover:scale-100 border border-gray-200 dark:border-slate-700">
+                                                <p class="text-gray-700 dark:text-gray-300 max-h-40 overflow-y-auto overflow-x-hidden whitespace-normal break-words">
+                                                    {{ dataset.reject_reviewer_note }}
+                                                </p>
+                                                <div class="absolute -top-1 left-1 w-2 h-2 bg-white dark:bg-slate-800 border-l border-t border-gray-200 dark:border-slate-700 transform rotate-45">
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
                                 </td>
 
-                                <td class="py-4 whitespace-nowrap text-gray-700"
-                                    v-if="dataset.server_state === 'released'">
-                                    <div class="text-sm" :title="dataset.server_date_modified">
-                                        Preferred reviewer: {{ dataset.preferred_reviewer }}
-                                    </div>
+                                <td data-label="Editor" v-if="dataset.server_state === 'released'">
+                                    <span class="text-sm text-gray-600 dark:text-gray-400 italic" :title="dataset.server_date_modified">
+                                        Preferred: {{ dataset.preferred_reviewer }}
+                                    </span>
                                 </td>
-                                <td class="py-4 whitespace-nowrap text-gray-700"
+                                <td data-label="Editor"
                                     v-else-if="dataset.server_state === 'editor_accepted' || dataset.server_state === 'rejected_reviewer'">
-                                    <div class="text-sm" :title="dataset.server_date_modified">
-                                        In approval by: {{ dataset.editor?.login }}
-                                    </div>
+                                    <span class="text-sm text-gray-600 dark:text-gray-400 italic" :title="dataset.server_date_modified">
+                                        In approval: {{ dataset.editor?.login }}
+                                    </span>
                                 </td>
-                                <td class="py-4 whitespace-nowrap text-gray-700" v-else>
-                                    <div class="text-sm">{{ dataset.editor?.login }}</div>
+                                <td data-label="Editor" v-else>
+                                    <span class="text-sm text-gray-700 dark:text-gray-300">
+                                        {{ dataset.editor?.login || '—' }}
+                                    </span>
                                 </td>
 
-                                <td data-label="modified" class="py-4 whitespace-nowrap text-gray-700">
-                                    <div class="text-sm" :title="dataset.server_date_modified">
+                                <td data-label="Modified">
+                                    <span class="text-sm text-gray-600 dark:text-gray-400" :title="dataset.server_date_modified">
                                         {{ dataset.server_date_modified }}
-                                    </div>
+                                    </span>
                                 </td>
-                                <td
-                                    class="py-4 whitespace-nowrap text-right text-sm font-medium text-gray-700 dark:text-white">
-                                    <div type="justify-start lg:justify-end" class="grid grid-cols-2 gap-x-2 gap-y-2"
-                                        no-wrap>
-
+                                <td v-if="can.edit || can.delete" class="before:hidden lg:w-1 whitespace-nowrap">
+                                    <BaseButtons type="justify-start lg:justify-end" no-wrap>
                                         <BaseButton v-if="can.receive && (dataset.server_state == 'released')"
                                             :route-name="stardust.route('editor.dataset.receive', [dataset.id])"
-                                            color="info" :icon="mdiSquareEditOutline" :label="'Receive edit task'" small
-                                            class="col-span-1" />
+                                            color="info" :icon="mdiTrayArrowDown" small 
+                                            title="Receive edit task" />
 
                                         <BaseButton
                                             v-if="can.approve && (dataset.server_state == 'editor_accepted' || dataset.server_state == 'rejected_reviewer')"
                                             :route-name="stardust.route('editor.dataset.approve', [dataset.id])"
-                                            color="info" :icon="mdiShareVariant" :label="'Approve'" small
-                                            class="col-span-1" />
+                                            color="success" :icon="mdiCheckDecagram" small 
+                                            title="Approve (Send to Reviewer)" />
 
                                         <BaseButton
                                             v-if="can.approve && (dataset.server_state == 'editor_accepted' || dataset.server_state == 'rejected_reviewer')"
                                             :route-name="stardust.route('editor.dataset.reject', [dataset.id])"
-                                            color="info" :icon="mdiUndo" label="Reject" small class="col-span-1">
-                                        </BaseButton>
+                                            color="danger" :icon="mdiAccountArrowLeft" small
+                                            title="Reject to Submitter" />
 
                                         <BaseButton
                                             v-if="can.edit && (dataset.server_state == 'editor_accepted' || dataset.server_state == 'rejected_reviewer')"
                                             :route-name="stardust.route('editor.dataset.edit', [Number(dataset.id)])"
-                                            color="info" :icon="mdiSquareEditOutline" :label="'Edit'" small
-                                            class="col-span-1">
-                                        </BaseButton>
+                                            color="info" :icon="mdiSquareEditOutline" small
+                                            title="Edit" />
 
                                         <BaseButton
                                             v-if="can.edit && (dataset.server_state == 'editor_accepted' || dataset.server_state == 'rejected_reviewer')"
                                             :route-name="stardust.route('editor.dataset.categorize', [dataset.id])"
-                                            color="info" :icon="mdiLibraryShelves" :label="'Classify'" small
-                                            class="col-span-1">
-                                        </BaseButton>
+                                            color="info" :icon="mdiLibraryShelves" small
+                                            title="Classify" />
                                        
                                         <BaseButton v-if="can.publish && (dataset.server_state == 'reviewed')"
                                             :route-name="stardust.route('editor.dataset.rejectToReviewer', [dataset.id])"
-                                            color="info" :icon="mdiUndo" :label="'Reject To Reviewer'" small
-                                            class="col-span-1" />
+                                            color="warning" :icon="mdiAccountArrowRight" small
+                                            title="Reject to Reviewer" />
+                                            
                                         <BaseButton v-if="can.publish && (dataset.server_state == 'reviewed')"
                                             :route-name="stardust.route('editor.dataset.publish', [dataset.id])"
-                                            color="info" :icon="mdiBookEdit" :label="'Publish'" small
-                                            class="col-span-1" />
+                                            color="success" :icon="mdiPublish" small
+                                            title="Publish" />
 
                                         <BaseButton
                                             v-if="can.publish && (dataset.server_state == 'published' && !dataset.identifier)"
                                             :route-name="stardust.route('editor.dataset.doi', [dataset.id])"
-                                            color="info" :icon="mdiBookEdit" :label="'Mint DOI'" small
-                                            class="col-span-1 last-in-row" />
-
-                                    </div>
+                                            color="info" :icon="mdiFingerprint" small
+                                            title="Mint DOI" />
+                                    </BaseButtons>
                                 </td>
                             </tr>
                         </tbody>
                     </table>
                 </div>
                 <div v-else>
-                    <!-- Show warning message if datasets are not defined or empty -->
-                    <div class="bg-yellow-200 text-yellow-800 rounded-md p-4">
-                        <p>No datasets defined.</p>
-                        <!-- You can add more descriptive text here -->
+                    <div class="text-center py-12">
+                        <div class="flex flex-col items-center justify-center text-gray-500 dark:text-gray-400">
+                            <p class="text-lg font-medium mb-2">No datasets found</p>
+                            <p class="text-sm">Datasets will appear here when they are submitted</p>
+                        </div>
                     </div>
                 </div>
 
-
-                <!-- <BaseButton
-                                        v-if="can.edit && (dataset.server_state == 'editor_accepted' || dataset.server_state == 'rejected_reviewer')"
-                                        :route-name="stardust.route('editor.dataset.edit', [dataset.id])" color="info"
-                                        :icon="mdiSquareEditOutline" :label="'Edit'" small />  -->
                 <div class="py-4">
                     <Pagination v-bind:data="datasets.meta" />
-
                 </div>
             </CardBox>
         </SectionMain>
     </LayoutAuthenticated>
-</template>
-
-
-<style scoped lang="css">
-.table-title {
-    max-width: 200px;
-    /* set a maximum width */
-    overflow: hidden;
-    /* hide overflow */
-    text-overflow: ellipsis;
-    /* show ellipsis for overflowed text */
-    white-space: nowrap;
-    /* prevent wrapping */
-}
-</style>
\ No newline at end of file
+</template>
\ No newline at end of file
diff --git a/resources/js/Pages/Map.vue b/resources/js/Pages/Map.vue
index 4c19625..9d599f1 100644
--- a/resources/js/Pages/Map.vue
+++ b/resources/js/Pages/Map.vue
@@ -1,40 +1,15 @@
 <script setup lang="ts">
 import { Head } from '@inertiajs/vue3';
 import { ref, Ref } from 'vue';
-import { mdiChartTimelineVariant, mdiGithub } from '@mdi/js';
+import { mdiChartTimelineVariant, mdiGithub, mdiMapMarker, mdiCalendar, mdiLockOpenVariant } from '@mdi/js';
 import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
 import SectionMain from '@/Components/SectionMain.vue';
 import BaseButton from '@/Components/BaseButton.vue';
 import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
 import { MapOptions } from '@/Components/Map/MapOptions';
-// import { stardust } from '@eidellev/adonis-stardust/client';
 import SearchMap from '@/Components/Map/SearchMap.vue';
 import { OpensearchDocument } from '@/Dataset';
 
-// const fitBounds: LatLngBoundsExpression = [
-// 	[46.4318173285, 9.47996951665],
-// 	[49.0390742051, 16.9796667823],
-// ];
-
-// const mapId = 'map';
-
-// const coverage = {
-// 	x_min: undefined,
-// 	y_min: undefined,
-// 	x_max: undefined,
-// 	y_max: undefined,
-// 	elevation_min: undefined,
-// 	elevation_max: undefined,
-// 	elevation_absolut: undefined,
-// 	depth_min: undefined,
-// 	depth_max: undefined,
-// 	depth_absolut: undefined,
-// 	time_min: undefined,
-// 	time_max: undefined,
-// 	time_absolut: undefined,
-// };
-
-// Replace with your actual data
 const datasets: Ref<OpensearchDocument[]> = ref([]);
 const openAccessLicences: Array<string> = ['CC-BY-4.0', 'CC-BY-SA-4.0'];
 
@@ -48,58 +23,499 @@ const mapOptions: MapOptions = {
 
 <template>
     <LayoutAuthenticated :showAsideMenu="false">
-
         <Head title="Map" />
 
-        <!-- <section class="p-6" v-bind:class="containerMaxW"> -->
         <SectionMain>
             <SectionTitleLineWithButton v-bind:icon="mdiChartTimelineVariant" title="Tethys Map" main>
-                <BaseButton href="https://gitea.geosphere.at/geolba/tethys" target="_blank" :icon="mdiGithub"
-                    label="Star on GeoSPhere Forgejo" color="contrast" rounded-full small />
-                <!-- <BaseButton :route-name="stardust.route('app.login.show')" label="Login" color="white" rounded-full small /> -->
+                <BaseButton
+                    href="https://gitea.geosphere.at/geolba/tethys"
+                    target="_blank"
+                    :icon="mdiGithub"
+                    label="Star on GeoSphere Forgejo"
+                    color="contrast"
+                    rounded-full
+                    small
+                />
             </SectionTitleLineWithButton>
 
-            <!-- <SectionBannerStarOnGitea /> -->
+            <!-- Map Component with enhanced styling -->
+            <div class="map-wrapper">
+                <SearchMap :datasets="datasets" :map-options="mapOptions"></SearchMap>
+            </div>
 
-            <!-- <CardBox> -->
-            <!-- <div id="map" class="map-container mapDesktop mt-6 mb-6 rounded-2xl py-12 px-6 text-center">
-				<DrawControlComponent ref="draw" :preserve="false" :mapId="mapId" :southWest="southWest"
-					:northEast="northEast">
-				</DrawControlComponent>
-			</div> -->
-            <SearchMap :datasets="datasets" :map-options="mapOptions"></SearchMap>
+            <!-- Results Header -->
+            <div v-if="datasets.length > 0" class="results-header">
+                <h2 class="results-title">
+                    <span class="results-count">{{ datasets.length }}</span>
+                    {{ datasets.length === 1 ? 'Dataset' : 'Datasets' }} Found
+                </h2>
+                <p class="results-subtitle">Click on any card to view details</p>
+            </div>
 
-            <div d="search-result-list-wrapper" class="flex flex-wrap col-span-24 h-full">
-                <div v-for="dataset in datasets" :key="dataset.id" class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 p-4">
-                    <div class="bg-white rounded shadow p-6">
-                        <h3 class="text-lg leading-tight text-gray-500 dark:text-slate-400">
+            <!-- Enhanced Results Grid -->
+            <div class="results-grid">
+                <div
+                    v-for="(dataset, index) in datasets"
+                    :key="dataset.id"
+                    class="dataset-card"
+                    :style="{ animationDelay: `${index * 50}ms` }"
+                >
+                    <!-- Card Header with Icon -->
+                    <div class="card-header">
+                        <div class="card-icon">
+                            <svg class="icon" viewBox="0 0 24 24">
+                                <path :d="mdiMapMarker" />
+                            </svg>
+                        </div>
+                        <span class="card-type">{{ dataset.doctype }}</span>
+                    </div>
+
+                    <!-- Card Content -->
+                    <div class="card-content">
+                        <h3 class="card-title">
                             {{ dataset.title_output }}
                         </h3>
-                        <!-- <h2 class="text-xl font-bold mb-2">{{ dataset.title_output }}</h2> -->
-                        <p class="text-gray-700 mb-2">{{ dataset.abstract_output }}</p>
-                        <div class="text-sm text-gray-600">
-                            <div v-for="author in dataset.author" :key="author" class="mb-1">{{ author }}</div>
-                        </div>
-                        <div class="mt-4">
-                            <span
-                                class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
-                                {{ dataset.year }}
-                            </span>
-                            <span
-                                class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
-                                {{ dataset.language }}
-                            </span>
-                        </div>
-                        <p>
-                            <span class="label"><i class="fas fa-file"></i> {{ dataset.doctype }}</span>
-                            <!-- <span>Licence: {{ document.licence }}</span> -->
-                            <span v-if="openAccessLicences.includes(dataset.licence)" class="label titlecase"><i
-                                    class="fas fa-lock-open"></i> Open Access</span>
+                        <p class="card-abstract">
+                            {{ dataset.abstract_output }}
                         </p>
                     </div>
+
+                    <!-- Authors Section -->
+                    <div v-if="dataset.author && dataset.author.length > 0" class="card-authors">
+                        <div class="author-label">Authors:</div>
+                        <div class="author-list">
+                            <span v-for="(author, idx) in dataset.author.slice(0, 3)" :key="idx" class="author-tag">
+                                {{ author }}
+                            </span>
+                            <span v-if="dataset.author.length > 3" class="author-more"> +{{ dataset.author.length - 3 }} more </span>
+                        </div>
+                    </div>
+
+                    <!-- Card Footer with Metadata -->
+                    <div class="card-footer">
+                        <div class="metadata-tags">
+                            <span class="tag tag-year">
+                                <svg class="tag-icon" viewBox="0 0 24 24">
+                                    <path :d="mdiCalendar" />
+                                </svg>
+                                {{ dataset.year }}
+                            </span>
+                            <span class="tag tag-language">
+                                {{ dataset.language?.toUpperCase() }}
+                            </span>
+                            <span v-if="openAccessLicences.includes(dataset.licence)" class="tag tag-open-access">
+                                <svg class="tag-icon" viewBox="0 0 24 24">
+                                    <path :d="mdiLockOpenVariant" />
+                                </svg>
+                                Open Access
+                            </span>
+                        </div>
+                    </div>
+
+                    <!-- Hover Effect Overlay -->
+                    <div class="card-overlay"></div>
                 </div>
             </div>
+
+            <!-- Empty State -->
+            <div v-if="datasets.length === 0" class="empty-state">
+                <div class="empty-icon">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
+                        <circle cx="12" cy="10" r="3" />
+                    </svg>
+                </div>
+                <h3 class="empty-title">No datasets selected</h3>
+                <p class="empty-description">Draw a rectangle on the map to search for datasets in that area</p>
+            </div>
         </SectionMain>
-        <!-- </section> -->
     </LayoutAuthenticated>
 </template>
+
+<style scoped>
+/* Map Wrapper */
+.map-wrapper {
+    margin-top: 1.5rem;
+    margin-bottom: 2rem;
+    position: relative;
+    border-radius: 1rem;
+    overflow: hidden;
+    box-shadow:
+        0 4px 6px -1px rgba(0, 0, 0, 0.1),
+        0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    transition: box-shadow 0.3s ease;
+}
+
+.map-wrapper:hover {
+    box-shadow:
+        0 10px 15px -3px rgba(0, 0, 0, 0.1),
+        0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+/* Results Header */
+.results-header {
+    margin-bottom: 1.5rem;
+    padding-bottom: 1rem;
+    border-bottom: 2px solid #e5e7eb;
+}
+
+.dark .results-header {
+    border-bottom-color: #374151;
+}
+
+.results-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #1f2937;
+    margin-bottom: 0.25rem;
+}
+
+.dark .results-title {
+    color: #f9fafb;
+}
+
+.results-count {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    background: linear-gradient(135deg, #65dc21 0%, #357c06 100%);
+    color: white;
+    border-radius: 0.5rem;
+    font-size: 1.25rem;
+    margin-right: 0.5rem;
+}
+
+.results-subtitle {
+    color: #6b7280;
+    font-size: 0.875rem;
+}
+
+.dark .results-subtitle {
+    color: #9ca3af;
+}
+
+/* Results Grid */
+.results-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 1.5rem;
+    margin-top: 2rem;
+}
+
+/* Dataset Card */
+.dataset-card {
+    background: white;
+    border-radius: 1rem;
+    overflow: hidden;
+    box-shadow:
+        0 1px 3px 0 rgba(0, 0, 0, 0.1),
+        0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    cursor: pointer;
+    animation: fadeInUp 0.5s ease-out forwards;
+    opacity: 0;
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.dark .dataset-card {
+    background: #1f2937;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
+}
+
+.dataset-card:hover {
+    transform: translateY(-4px);
+    box-shadow:
+        0 20px 25px -5px rgba(0, 0, 0, 0.1),
+        0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+.dark .dataset-card:hover {
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+}
+
+/* Card Header */
+.card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 1.5rem;
+    background: linear-gradient(135deg, #65dc21 0%, #357c06 100%);
+    color: white;
+}
+
+.card-icon {
+    width: 2rem;
+    height: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 0.5rem;
+}
+
+.icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    fill: currentColor;
+}
+
+.card-type {
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    background: rgba(255, 255, 255, 0.2);
+    padding: 0.25rem 0.75rem;
+    border-radius: 9999px;
+}
+
+/* Card Content */
+.card-content {
+    padding: 1.5rem;
+}
+
+.card-title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: #1f2937;
+    margin-bottom: 0.75rem;
+    line-height: 1.4;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.dark .card-title {
+    color: #f9fafb;
+}
+
+.card-abstract {
+    color: #6b7280;
+    font-size: 0.875rem;
+    line-height: 1.6;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.dark .card-abstract {
+    color: #9ca3af;
+}
+
+/* Authors Section */
+.card-authors {
+    padding: 0 1.5rem 1rem;
+    border-top: 1px solid #f3f4f6;
+}
+
+.dark .card-authors {
+    border-top-color: #374151;
+}
+
+.author-label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: #6b7280;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: 0.5rem;
+}
+
+.dark .author-label {
+    color: #9ca3af;
+}
+
+.author-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.author-tag {
+    font-size: 0.75rem;
+    color: #4b5563;
+    background: #f3f4f6;
+    padding: 0.25rem 0.625rem;
+    border-radius: 0.375rem;
+    white-space: nowrap;
+}
+
+.dark .author-tag {
+    color: #d1d5db;
+    background: #374151;
+}
+
+.author-more {
+    font-size: 0.75rem;
+    color: #6b7280;
+    font-style: italic;
+}
+
+.dark .author-more {
+    color: #9ca3af;
+}
+
+/* Card Footer */
+.card-footer {
+    padding: 1rem 1.5rem;
+    background: #f9fafb;
+    border-top: 1px solid #f3f4f6;
+}
+
+.dark .card-footer {
+    background: #111827;
+    border-top-color: #374151;
+}
+
+.metadata-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    padding: 0.375rem 0.75rem;
+    border-radius: 9999px;
+    transition: transform 0.2s ease;
+}
+
+.tag:hover {
+    transform: scale(1.05);
+}
+
+.tag-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+    fill: currentColor;
+}
+
+.tag-year {
+    background: #dbeafe;
+    color: #1e40af;
+}
+
+.dark .tag-year {
+    background: #1e3a8a;
+    color: #93c5fd;
+}
+
+.tag-language {
+    background: #fce7f3;
+    color: #9f1239;
+}
+
+.dark .tag-language {
+    background: #831843;
+    color: #fbcfe8;
+}
+
+.tag-open-access {
+    background: #d1fae5;
+    color: #065f46;
+}
+
+.dark .tag-open-access {
+    background: #064e3b;
+    color: #6ee7b7;
+}
+
+/* Card Overlay */
+.card-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(101, 220, 33, 0.1) 0%, rgba(53, 124, 6, 0.1) 100%);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    pointer-events: none;
+}
+
+.dataset-card:hover .card-overlay {
+    opacity: 1;
+}
+
+/* Empty State */
+.empty-state {
+    text-align: center;
+    padding: 4rem 2rem;
+    background: white;
+    border-radius: 1rem;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+}
+
+.dark .empty-state {
+    background: #1f2937;
+}
+
+.empty-icon {
+    width: 4rem;
+    height: 4rem;
+    margin: 0 auto 1.5rem;
+    color: #d1d5db;
+}
+
+.dark .empty-icon {
+    color: #4b5563;
+}
+
+.empty-icon svg {
+    width: 100%;
+    height: 100%;
+}
+
+.empty-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: #1f2937;
+    margin-bottom: 0.5rem;
+}
+
+.dark .empty-title {
+    color: #f9fafb;
+}
+
+.empty-description {
+    color: #6b7280;
+    font-size: 0.875rem;
+}
+
+.dark .empty-description {
+    color: #9ca3af;
+}
+
+/* Responsive Design */
+@media (max-width: 640px) {
+    .results-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .results-title {
+        font-size: 1.25rem;
+    }
+
+    .card-content {
+        padding: 1rem;
+    }
+}
+</style>
diff --git a/resources/js/Pages/Reviewer/Dataset/Index.vue b/resources/js/Pages/Reviewer/Dataset/Index.vue
index 36d2351..e3e0737 100644
--- a/resources/js/Pages/Reviewer/Dataset/Index.vue
+++ b/resources/js/Pages/Reviewer/Dataset/Index.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { Head, usePage } from '@inertiajs/vue3';
 import { ComputedRef } from 'vue';
-import { mdiAlertBoxOutline, mdiGlasses, mdiReiterate } from '@mdi/js';
-import { computed } from 'vue';
+import { mdiAlertBoxOutline, mdiGlasses, mdiAccountArrowLeft, mdiChevronDown, mdiChevronUp } from '@mdi/js';
+import { computed, ref, onMounted } from 'vue';
 import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
 import SectionMain from '@/Components/SectionMain.vue';
 import BaseButton from '@/Components/BaseButton.vue';
+import BaseIcon from '@/Components/BaseIcon.vue';
 import CardBox from '@/Components/CardBox.vue';
 import BaseButtons from '@/Components/BaseButtons.vue';
 import NotificationBar from '@/Components/NotificationBar.vue';
@@ -25,63 +26,83 @@ const props = defineProps({
         type: Object,
         default: () => ({}),
     },
-    // user: {
-    //     type: Object,
-    //     default: () => ({}),
-    // }
 });
 
 const flash: ComputedRef<any> = computed(() => {
-    // let test = usePage();
-    // console.log(test);
     return usePage().props.flash;
 });
 
+// Legend visibility state with localStorage persistence
+const showLegend = ref(true);
+
+onMounted(() => {
+    const savedState = localStorage.getItem('reviewerDatasetLegendVisible');
+    if (savedState !== null) {
+        showLegend.value = savedState === 'true';
+    }
+});
+
+const toggleLegend = () => {
+    showLegend.value = !showLegend.value;
+    localStorage.setItem('reviewerDatasetLegendVisible', String(showLegend.value));
+};
 
 const getRowClass = (dataset) => {
-    // (props.options ? 'select' : props.type)
-    let rowclass = '';
-    if (dataset.server_state == 'approved') {
-        rowclass = 'bg-approved';
-    } else if (dataset.server_state == 'rejected_reviewer') {
-        rowclass = 'bg-rejected-reviewer';
-    } else if (dataset.server_state == 'reviewed') {
-        rowclass = 'bg-reviewed';
-    } else if (dataset.server_state == 'released') {
-        rowclass = 'bg-released';
-    } else if (dataset.server_state == 'published') {
-        rowclass = 'bg-published';
-    } else if (dataset.server_state == 'rejected_to_reviewer') {
-        rowclass = 'bg-rejected-reviewer';
-    } else {
-        rowclass = '';
-    }
-    return rowclass;
+    // Return Tailwind classes that will be defined in tailwind.config
+    const stateClasses = {
+        'approved': 'bg-approved dark:bg-approved-dark',       
+        'rejected_reviewer': 'bg-rejected-reviewer dark:bg-rejected-reviewer-dark',
+        'rejected_to_reviewer': 'bg-rejected-reviewer dark:bg-rejected-reviewer-dark',
+        'reviewed': 'bg-reviewed dark:bg-reviewed-dark',       
+    };
+    
+    return stateClasses[dataset.server_state] || '';
 };
 
-// New method to format server state
-const formatServerState = (state: string) => {
-    if (state === 'inprogress') {
-        return 'draft';
-    } else if (state === 'released') {
-        return 'submitted';
-    } else if (state === 'approved') {
-        return 'ready for review';
-    } else if (state === 'reviewer_accepted') {
-        return 'in review';
-    }
-    return state; // Return the original state for other cases
+// Method to get state badge color
+const getStateColor = (state: string) => {
+    const stateColors = {
+        'inprogress': 'bg-sky-200 text-sky-900 dark:bg-sky-900 dark:text-sky-200',
+        'released': 'bg-blue-300 text-blue-900 dark:bg-blue-900 dark:text-blue-200',
+        'editor_accepted': 'bg-teal-200 text-teal-900 dark:bg-teal-900 dark:text-teal-200',
+        'rejected_reviewer': 'bg-amber-200 text-amber-900 dark:bg-amber-900 dark:text-amber-200',
+        'rejected_to_reviewer': 'bg-yellow-200 text-yellow-900 dark:bg-yellow-900 dark:text-yellow-200', 
+         'rejected_editor': 'bg-rose-300 text-rose-900 dark:bg-rose-900 dark:text-rose-200',
+        'reviewed': 'bg-yellow-300 text-yellow-900 dark:bg-yellow-900 dark:text-yellow-200',
+        'published': 'bg-green-300 text-green-900 dark:bg-green-900 dark:text-green-200',
+        'approved': 'bg-cyan-200 text-cyan-900 dark:bg-cyan-900 dark:text-cyan-200',
+        'reviewer_accepted': 'bg-lime-200 text-lime-900 dark:bg-lime-900 dark:text-lime-200',
+    };
+    return stateColors[state] || 'bg-sky-200 text-sky-900 dark:bg-sky-900 dark:text-sky-200';
 };
 
 
+
+const truncateTitle = (text: string, length = 50) => {
+    if (!text) return '';
+    return text.length > length ? text.substring(0, length) + '...' : text;
+};
+
+// Dynamic legend definitions
+const datasetStates = [
+    { key: 'approved', label: 'Ready for Review' },
+    { key: 'rejected_to_reviewer', label: 'Rejected To Reviewer' }   
+];
+const getLabel = (key: string) => {
+  return datasetStates.find(s => s.key === key)?.label || 'Unknown'
+}
+
+const availableActions = [
+    { icon: mdiGlasses, label: 'View / Review', color: 'text-blue-500' },
+    { icon: mdiAccountArrowLeft, label: 'Reject to Editor', color: 'text-yellow-600' },
+];
+
 </script>
 
 <template>
     <LayoutAuthenticated>
-
-        <Head title="Dataset List" />
+        <Head title="Reviewer Datasets" />
         <SectionMain>
-            <!-- <FormValidationErrors v-bind:errors="errors" /> -->
             <NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
                 {{ flash.message }}
             </NotificationBar>
@@ -92,86 +113,162 @@ const formatServerState = (state: string) => {
                 {{ flash.error }}
             </NotificationBar>
 
+            <!-- Legend -->
+            <CardBox class="mb-4">
+                <!-- Legend Header with Toggle -->
+                <!-- <div 
+                    class="flex items-center justify-between cursor-pointer select-none p-4 border-b border-gray-200 dark:border-slate-700 hover:bg-gray-50 dark:hover:bg-slate-800/50 transition-colors"
+                    @click="toggleLegend"
+                >
+                    <div class="flex items-center gap-2">
+                        <svg class="w-5 h-5 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                        <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">
+                            Legend - States & Actions
+                        </h3>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <span class="text-xs text-gray-500 dark:text-gray-400">
+                            {{ showLegend ? 'Click to hide' : 'Click to show' }}
+                        </span>
+                        <BaseIcon 
+                            :path="showLegend ? mdiChevronUp : mdiChevronDown" 
+                            :size="20" 
+                            class="text-gray-500 dark:text-gray-400 transition-transform"
+                        />
+                    </div>
+                </div> -->
+
+                <!-- Collapsible Legend Content -->
+                <transition
+                    enter-active-class="transition-all duration-300 ease-out"
+                    enter-from-class="max-h-0 opacity-0"
+                    enter-to-class="max-h-96 opacity-100"
+                    leave-active-class="transition-all duration-300 ease-in"
+                    leave-from-class="max-h-96 opacity-100"
+                    leave-to-class="max-h-0 opacity-0"
+                >
+                    <div v-show="showLegend" class="overflow-hidden">
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 p-4">
+                            <!-- State Colors Legend -->
+                            <div>
+                                <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center gap-2">
+                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+                                    </svg>
+                                    Dataset States
+                                </h3>
+                                <div class="grid grid-cols-2 gap-2 text-xs">
+                                    <div v-for="state in datasetStates" :key="state.key" class="flex items-center gap-2">
+                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full" :class="getStateColor(state.key)">
+                                            {{ state.label }}
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Actions Legend -->
+                            <div>
+                                <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center gap-2">
+                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+                                    </svg>
+                                    Available Actions
+                                </h3>
+                                <div class="grid grid-cols-1 gap-1.5 text-xs">
+                                    <div v-for="action in availableActions" :key="action.label" class="flex items-center gap-2">
+                                        <BaseIcon :path="action.icon" :size="16" :class="action.color" />
+                                        <span class="text-gray-700 dark:text-gray-300">{{ action.label }}</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </transition>
+            </CardBox>
+
             <!-- table -->
             <CardBox class="mb-6" has-table>
                 <div v-if="props.datasets.data.length > 0">
                     <table>
                         <thead>
                             <tr>
-                                <th scope="col" class="py-3 text-left text-xs font-medium uppercase tracking-wider dark:text-white">
-                                    <!-- <Sort label="Dataset Title" attribute="title" :search="form.search" /> -->
-                                    Title
-                                </th>
-                                <th scope="col" class="py-3 text-left text-xs font-medium uppercase tracking-wider dark:text-white">
-                                    ID
-                                </th>
-                                <th scope="col" class="py-3 text-left text-xs font-medium uppercase tracking-wider dark:text-white">
-                                    <!-- <Sort label="Email" attribute="email" :search="form.search" /> -->
-                                    State
-                                </th>
-
-                                <th scope="col" class="py-3 text-left text-xs font-medium uppercase tracking-wider">
-                                    Editor
-                                </th>
-                                <th scope="col" class="py-3 text-left text-xs font-medium uppercase tracking-wider dark:text-white">
-                                   Remaining Time
-                                </th>
-                                <th scope="col" class="relative px-6 py-3 dark:text-white" v-if="can.edit || can.delete">
-                                    <span class="sr-only">Actions</span>
-                                </th>
+                                <th>Title</th>
+                                <th>ID</th>
+                                <th>State</th>
+                                <th>Editor</th>
+                                <th>Remaining Time</th>
+                                <th v-if="can.edit || can.delete">Actions</th>
                             </tr>
                         </thead>
 
                         <tbody>
-                            <tr v-for="dataset in props.datasets.data" :key="dataset.id" :class="[getRowClass(dataset)]">
-                                <td data-label="Login"
-                                    class="py-4 whitespace-nowrap text-gray-700">                                   
-                                    <div class="text-sm table-title">{{ dataset.main_title }}</div>
+                            <tr v-for="dataset in props.datasets.data" :key="dataset.id"
+                                :class="['hover:bg-gray-50 dark:hover:bg-slate-800 transition-colors', getRowClass(dataset)]">
+                                <td data-label="Title">
+                                    <div class="max-w-xs">
+                                        <span 
+                                            class="text-gray-700 dark:text-gray-300 text-sm font-medium"
+                                            :title="dataset.main_title"
+                                        >
+                                            {{ truncateTitle(dataset.main_title) }}
+                                        </span>
+                                    </div>
                                 </td>
-                                <td class="py-4 whitespace-nowrap text-gray-700">
-                                    <div class="text-sm">{{ dataset.id }}</div>
+                                <td data-label="ID">
+                                    <span class="text-sm text-gray-700 dark:text-gray-300 font-mono">
+                                        {{ dataset.id }}
+                                    </span>
                                 </td>
-                                <td class="py-4 whitespace-nowrap text-gray-700">
-                                    <div class="text-sm">{{ formatServerState(dataset.server_state) }}</div>
-                                    <div v-if="dataset.server_state === 'rejected_to_reviewer' && dataset.reject_editor_note"
-                                        class="inline-block relative ml-2 group">
-                                        <button
-                                            class="w-5 h-5 rounded-full bg-gray-200 text-gray-600 text-xs flex items-center justify-center focus:outline-none hover:bg-gray-300">
-                                            i
-                                        </button>
-                                        <div
-                                            class="absolute left-0 top-full mt-1 w-64 bg-white shadow-lg rounded-md p-3 text-xs text-left z-50 transform scale-0 origin-top-left transition-transform duration-100 group-hover:scale-100">
-                                            <p class="text-gray-700 max-h-40 overflow-y-auto overflow-x-hidden whitespace-normal break-words">
-                                                {{ dataset.reject_editor_note }}
-                                            </p>
-                                            <div class="absolute -top-1 left-1 w-2 h-2 bg-white transform rotate-45">
+                                <td data-label="State">
+                                    <div class="flex items-center gap-2">
+                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium capitalize"
+                                            :class="getStateColor(dataset.server_state)">
+                                            {{ getLabel(dataset.server_state) }}
+                                        </span>
+                                        <div v-if="dataset.server_state === 'rejected_to_reviewer' && dataset.reject_editor_note"
+                                            class="relative group">
+                                            <button
+                                                class="w-5 h-5 rounded-full bg-gray-200 dark:bg-slate-700 text-gray-600 dark:text-gray-300 text-xs flex items-center justify-center focus:outline-none hover:bg-gray-300 dark:hover:bg-slate-600 transition-colors">
+                                                i
+                                            </button>
+                                            <div
+                                                class="absolute left-0 top-full mt-1 w-64 bg-white dark:bg-slate-800 shadow-lg rounded-md p-3 text-xs text-left z-50 transform scale-0 origin-top-left transition-transform duration-100 group-hover:scale-100 border border-gray-200 dark:border-slate-700">
+                                                <p class="text-gray-700 dark:text-gray-300 max-h-40 overflow-y-auto overflow-x-hidden whitespace-normal break-words">
+                                                    {{ dataset.reject_editor_note }}
+                                                </p>
+                                                <div class="absolute -top-1 left-1 w-2 h-2 bg-white dark:bg-slate-800 border-l border-t border-gray-200 dark:border-slate-700 transform rotate-45">
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
                                 </td>
-                              
-                               
-                                <td class="py-4 whitespace-nowrap text-gray-700">
-                                    <div class="text-sm">{{ dataset.editor?.login }}</div>
+
+                                <td data-label="Editor">
+                                    <span class="text-sm text-gray-700 dark:text-gray-300">
+                                        {{ dataset.editor?.login || '—' }}
+                                    </span>
                                 </td>
 
-                                <td data-label="modified" class="py-4 whitespace-nowrap text-gray-700">
-                                    <div class="text-sm" :title="dataset.remaining_time">
-                                        {{ dataset.remaining_time + ' days' }}
-                                    </div>
+                                <td data-label="Remaining Time">
+                                    <span class="text-sm text-gray-600 dark:text-gray-400" :title="dataset.remaining_time">
+                                        {{ dataset.remaining_time }} days
+                                    </span>
                                 </td>
-                                <td
-                                    class="py-4 whitespace-nowrap text-right text-sm font-medium text-gray-700">
+                                <td v-if="can.reject" class="before:hidden lg:w-1 whitespace-nowrap">
                                     <BaseButtons type="justify-start lg:justify-end" no-wrap>
                                         <BaseButton 
                                             v-if="can.reject && (dataset.server_state == 'approved' || dataset.server_state == 'rejected_to_reviewer')"
                                             :route-name="stardust.route('reviewer.dataset.review', [dataset.id])"
-                                            color="info" :icon="mdiGlasses" :label="'View'" small />
+                                            color="info" :icon="mdiGlasses" small 
+                                            title="View / Review" />
                                         
                                         <BaseButton
                                             v-if="can.reject && (dataset.server_state == 'approved' || dataset.server_state == 'rejected_to_reviewer')"
                                             :route-name="stardust.route('reviewer.dataset.reject', [dataset.id])"
-                                            color="info" :icon="mdiReiterate" :label="'Reject'" small />
+                                            color="warning" :icon="mdiAccountArrowLeft" small 
+                                            title="Reject to Editor" />
                                     </BaseButtons>
                                 </td>
                             </tr>
@@ -179,21 +276,16 @@ const formatServerState = (state: string) => {
                     </table>
                 </div>
                 <div v-else>
-                    <!-- Show warning message if datasets are not defined or empty -->
-                    <div class="bg-yellow-200 text-yellow-800 rounded-md p-4">
-                        <p>No datasets defined.</p>
-                        <!-- You can add more descriptive text here -->
+                    <div class="text-center py-12">
+                        <div class="flex flex-col items-center justify-center text-gray-500 dark:text-gray-400">
+                            <p class="text-lg font-medium mb-2">No datasets found</p>
+                            <p class="text-sm">Datasets will appear here when they are ready for review</p>
+                        </div>
                     </div>
                 </div>
 
-
-                <!-- <BaseButton
-                                        v-if="can.edit && (dataset.server_state == 'editor_accepted' || dataset.server_state == 'rejected_reviewer')"
-                                        :route-name="stardust.route('editor.dataset.edit', [dataset.id])" color="info"
-                                        :icon="mdiSquareEditOutline" :label="'Edit'" small />  -->
                 <div class="py-4">
                     <Pagination v-bind:data="datasets.meta" />
-
                 </div>
             </CardBox>
         </SectionMain>
@@ -201,15 +293,24 @@ const formatServerState = (state: string) => {
 </template>
 
 <style scoped lang="css">
-.table-title {
-    max-width: 200px;
-    /* set a maximum width */
-    overflow: hidden;
-    /* hide overflow */
-    text-overflow: ellipsis;
-    /* show ellipsis for overflowed text */
-    white-space: nowrap;
-    /* prevent wrapping */
+/* Background colors are now defined in tailwind.config.js */
+/* .bg-approved {
+    @apply bg-approved dark:bg-approved-dark;
 }
 
+.bg-rejected-reviewer {
+    @apply bg-rejected-reviewer dark:bg-rejected-reviewer-dark;
+}
+
+.bg-reviewed {
+    @apply bg-reviewed dark:bg-reviewed-dark;
+}
+
+.bg-released {
+    @apply bg-released dark:bg-released-dark;
+}
+
+.bg-published {
+    @apply bg-published dark:bg-published-dark;
+} */
 </style>
\ No newline at end of file
diff --git a/resources/js/Pages/Submitter/Dataset/Index.vue b/resources/js/Pages/Submitter/Dataset/Index.vue
index 5b01370..0d8ac47 100644
--- a/resources/js/Pages/Submitter/Dataset/Index.vue
+++ b/resources/js/Pages/Submitter/Dataset/Index.vue
@@ -1,17 +1,18 @@
 <script setup lang="ts">
-// import { Head, Link, useForm, usePage } from '@inertiajs/inertia-vue3';
 import { Head, usePage } from '@inertiajs/vue3';
 import { ComputedRef } from 'vue';
-import { mdiSquareEditOutline, mdiTrashCan, mdiAlertBoxOutline, mdiLockOpen, mdiLibraryShelves } from '@mdi/js';
-import { computed } from 'vue';
+import { mdiSquareEditOutline, mdiTrashCan, mdiAlertBoxOutline, mdiLockOpen, mdiLibraryShelves, mdiChevronDown, mdiChevronUp } from '@mdi/js';
+import { computed, ref, onMounted } from 'vue';
 import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
 import SectionMain from '@/Components/SectionMain.vue';
 import BaseButton from '@/Components/BaseButton.vue';
+import BaseIcon from '@/Components/BaseIcon.vue';
 import CardBox from '@/Components/CardBox.vue';
 import BaseButtons from '@/Components/BaseButtons.vue';
 import NotificationBar from '@/Components/NotificationBar.vue';
 import Pagination from '@/Components/Pagination.vue';
 import { stardust } from '@eidellev/adonis-stardust/client';
+import Label from '@/Components/unused/Label.vue';
 
 const props = defineProps({
     datasets: {
@@ -26,63 +27,120 @@ const props = defineProps({
         type: Object,
         default: () => ({}),
     },
-    // user: {
-    //     type: Object,
-    //     default: () => ({}),
-    // }
 });
 
 const flash: ComputedRef<any> = computed(() => {
-    // let test = usePage();
-    // console.log(test);
     return usePage().props.flash;
 });
 
+// Legend visibility state with localStorage persistence
+const showLegend = ref(true);
+
+onMounted(() => {
+    const savedState = localStorage.getItem('submitterDatasetLegendVisible');
+    if (savedState !== null) {
+        showLegend.value = savedState === 'true';
+    }
+});
+
+const toggleLegend = () => {
+    showLegend.value = !showLegend.value;
+    localStorage.setItem('submitterDatasetLegendVisible', String(showLegend.value));
+};
+
 const validStates = ['inprogress', 'rejected_editor'];
 
+
 const getRowClass = (dataset) => {
-    // (props.options ? 'select' : props.type)
-    let rowclass = '';
-    if (dataset.server_state == 'inprogress') {
-        rowclass = 'bg-inprogress';
-    } else if (dataset.server_state == 'released') {
-        rowclass = 'bg-released';
-    } else if (dataset.server_state == 'editor_accepted' || dataset.server_state == 'rejected_reviewer') {
-        rowclass = 'bg-editor-accepted';
-    } else if (dataset.server_state == 'approved') {
-        rowclass = 'bg-approved';
-    } else if (dataset.server_state == 'reviewed') {
-        rowclass = 'bg-reviewed';
-    } else if (dataset.server_state == 'rejected_editor') {
-        rowclass = 'bg-rejected-editor';
-    } else {
-        rowclass = '';
-    }
-    return rowclass;
+    // Return Tailwind classes that will be defined in tailwind.config
+    const stateClasses = {
+        'inprogress': 'bg-inprogress dark:bg-inprogress-dark',
+        'released': 'bg-released dark:bg-released-dark',
+        'editor_accepted': 'bg-editor-accepted dark:bg-editor-accepted-dark',
+        'rejected_reviewer': 'bg-rejected-reviewer dark:bg-rejected-reviewer-dark',
+         'rejected_to_reviewer': 'bg-rejected-reviewer dark:bg-rejected-reviewer-dark',
+       
+        'approved': 'bg-approved dark:bg-approved-dark',
+        'reviewed': 'bg-reviewed dark:bg-reviewed-dark',
+        'published': 'bg-published dark:bg-published-dark',
+        'rejected_editor': 'bg-rejected-editor dark:bg-rejected-editor-dark',
+    };
+    
+    return stateClasses[dataset.server_state] || '';
 };
 
+
 // New method to format server state
-const formatServerState = (state: string) => {
-    if (state === 'inprogress') {
-        return 'draft';
-    } else if (state === 'released') {
-        return 'submitted';
-    } else if (state === 'approved') {
-        return 'ready for review';
-    } else if (state === 'reviewer_accepted') {
-        return 'in review';
-    }
-    return state; // Return the original state for other cases
+// const formatServerState = (state: string) => {
+//     if (state === 'inprogress') {
+//         return 'draft';
+//     } else if (state === 'released') {
+//         return 'submitted';
+//     } else if (state === 'editor_accepted') {
+//         return 'in approval';
+//     } else if (state === 'approved') {
+//         return 'ready for review';
+//     } else if (state === 'reviewer_accepted') {
+//         return 'in review';
+//     } else if (state === 'rejected_editor') {
+//         return 'rejected by editor';
+//     }
+//     return state;
+// };
+
+// Method to get state badge color
+// Method to get state badge color
+
+const getStateColor = (state: string) => {
+    const stateColors = {
+        'inprogress': 'bg-sky-200 text-sky-900 dark:bg-sky-900 dark:text-sky-200',
+        'released': 'bg-blue-300 text-blue-900 dark:bg-blue-900 dark:text-blue-200',
+        'editor_accepted': 'bg-teal-200 text-teal-900 dark:bg-teal-900 dark:text-teal-200',
+        'rejected_reviewer': 'bg-amber-200 text-amber-900 dark:bg-amber-900 dark:text-amber-200',
+        'rejected_to_reviewer': 'bg-yellow-200 text-yellow-900 dark:bg-yellow-900 dark:text-yellow-200', 
+         'rejected_editor': 'bg-rose-300 text-rose-900 dark:bg-rose-900 dark:text-rose-200',
+        'reviewed': 'bg-yellow-300 text-yellow-900 dark:bg-yellow-900 dark:text-yellow-200',
+        'published': 'bg-green-300 text-green-900 dark:bg-green-900 dark:text-green-200',
+        'approved': 'bg-cyan-200 text-cyan-900 dark:bg-cyan-900 dark:text-cyan-200',
+        'reviewer_accepted': 'bg-lime-200 text-lime-900 dark:bg-lime-900 dark:text-lime-200',
+    };
+    return stateColors[state] || 'bg-sky-200 text-sky-900 dark:bg-sky-900 dark:text-sky-200';
 };
 
+// Dynamic legend definitions
+const datasetStates = [
+    { key: 'inprogress', label: 'Draft' },
+    { key: 'released', label: 'Submitted' },
+    { key: 'editor_accepted', label: 'In Approval' },
+    { key: 'approved', label: 'Ready for Review' },
+    { key: 'reviewer_accepted', label: 'In Review' },
+    { key: 'reviewed', label: 'Reviewed' },
+    // { key: 'published', label: 'Published' },
+    { key: 'rejected_editor', label: 'Rejected by Editor' },
+    { key: 'rejected_reviewer', label: 'Rejected by Reviewer' },
+    { key: 'rejected_to_reviewer', label: 'Rejected To Reviewer' }
+];
+const getLabel = (key: string) => {
+  return datasetStates.find(s => s.key === key)?.label || 'Unknown'
+}
+
+const availableActions = [
+    { icon: mdiLockOpen, label: 'Release (Submit)', color: 'text-blue-500' },
+    { icon: mdiSquareEditOutline, label: 'Edit', color: 'text-blue-500' },
+    { icon: mdiLibraryShelves, label: 'Classify', color: 'text-blue-500' },
+    { icon: mdiTrashCan, label: 'Delete', color: 'text-red-500' },
+];
+
+const truncateTitle = (text: string, length = 50) => {
+    if (!text) return '';
+    return text.length > length ? text.substring(0, length) + '...' : text;
+};
 </script>
 
 <template>
     <LayoutAuthenticated>
-
-        <Head title="Dataset List" />
+        <Head title="My Datasets" />
         <SectionMain>
-            <!-- <FormValidationErrors v-bind:errors="errors" /> -->
             <NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
                 {{ flash.message }}
             </NotificationBar>
@@ -90,86 +148,170 @@ const formatServerState = (state: string) => {
                 {{ flash.warning }}
             </NotificationBar>
 
-            <!-- table -->
-            <CardBox class="mb-6" has-table>
-                <table class="w-full table-fixed">
-                    <thead>
-                        <tr>
-                            <th scope="col" class="py-3 text-left text-xs font-medium uppercase tracking-wider dark:text-white">
-                                <!-- <Sort label="Dataset Title" attribute="title" :search="form.search" /> -->
-                                Dataset Title
-                            </th>
-                            <th scope="col" class="py-3 text-left text-xs font-medium uppercase tracking-wider dark:text-white">
-                                <!-- <Sort label="Email" attribute="email" :search="form.search" /> -->
-                                Server State
-                            </th>
-                            <th scope="col" class="py-3 text-left text-xs font-medium uppercase tracking-wider dark:text-white">
-                                Date of last modification
-                            </th>
-                            <th scope="col" class="relative px-6 py-3 dark:text-white" v-if="can.edit || can.delete">
-                                <span class="sr-only">Actions</span>
-                            </th>
-                        </tr>
-                    </thead>
+            <!-- Legend -->
+            <CardBox class="mb-4">
+                <!-- Legend Header with Toggle -->
+                <div 
+                    class="flex items-center justify-between cursor-pointer select-none p-4 border-b border-gray-200 dark:border-slate-700 hover:bg-gray-50 dark:hover:bg-slate-800/50 transition-colors"
+                    @click="toggleLegend"
+                >
+                    <div class="flex items-center gap-2">
+                        <svg class="w-5 h-5 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                        <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">
+                            Legend - States & Actions
+                        </h3>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <span class="text-xs text-gray-500 dark:text-gray-400">
+                            {{ showLegend ? 'Click to hide' : 'Click to show' }}
+                        </span>
+                        <BaseIcon 
+                            :path="showLegend ? mdiChevronUp : mdiChevronDown" 
+                            :size="20" 
+                            class="text-gray-500 dark:text-gray-400 transition-transform"
+                        />
+                    </div>
+                </div>
 
-                    <tbody class="bg-white divide-y divide-gray-200">
-                        <tr v-for="dataset in props.datasets.data" :key="dataset.id" :class="getRowClass(dataset)">
-                            <td data-label="Login"
-                                class="py-4 whitespace-nowrap text-gray-700 table-title">
-                                <!-- <Link v-bind:href="stardust.route('settings.user.show', [user.id])"
-                                    class="no-underline hover:underline text-cyan-600 dark:text-cyan-400">
-                                {{ user.login }}
-                                </Link> -->
-                                <!-- {{ user.id }} -->
-                                {{ dataset.main_title }}                                
-                            </td>
-                            <td class="py-4 whitespace-nowrap text-gray-700">
-                                {{ formatServerState(dataset.server_state) }}
-                                <div v-if="dataset.server_state === 'rejected_editor' && dataset.reject_editor_note"
-                                    class="inline-block relative ml-2 group">
-                                    <button
-                                        class="w-5 h-5 rounded-full bg-gray-200 text-gray-600 text-xs flex items-center justify-center focus:outline-none hover:bg-gray-300">
-                                        i
-                                    </button>
-                                    <div
-                                        class="absolute left-0 top-full mt-1 w-64 bg-white shadow-lg rounded-md p-3 text-xs text-left z-50 transform scale-0 origin-top-left transition-transform duration-100 group-hover:scale-100">
-                                        <p
-                                            class="text-gray-700 max-h-40 overflow-y-auto overflow-x-hidden whitespace-normal break-words">
-                                            {{ dataset.reject_editor_note }}
-                                        </p>
-                                        <div class="absolute -top-1 left-1 w-2 h-2 bg-white transform rotate-45">
-                                        </div>
+                <!-- Collapsible Legend Content -->
+                <transition
+                    enter-active-class="transition-all duration-300 ease-out"
+                    enter-from-class="max-h-0 opacity-0"
+                    enter-to-class="max-h-96 opacity-100"
+                    leave-active-class="transition-all duration-300 ease-in"
+                    leave-from-class="max-h-96 opacity-100"
+                    leave-to-class="max-h-0 opacity-0"
+                >
+                    <div v-show="showLegend" class="overflow-hidden">
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 p-4">
+                            <!-- State Colors Legend -->
+                            <div>
+                                <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center gap-2">
+                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+                                    </svg>
+                                    Dataset States
+                                </h3>
+                                <div class="grid grid-cols-2 gap-2 text-xs">
+                                    <div v-for="state in datasetStates" :key="state.key" class="flex items-center gap-2">
+                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full" :class="getStateColor(state.key)">
+                                            {{ state.label }}
+                                        </span>
                                     </div>
                                 </div>
-                            </td>
+                            </div>
 
-                            <td data-label="modified" class="py-4 whitespace-nowrap text-gray-700">
-                                <div class="text-sm" :title="dataset.server_date_modified">
-                                    {{ dataset.server_date_modified }}
+                            <!-- Actions Legend -->
+                            <div>
+                                <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center gap-2">
+                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+                                    </svg>
+                                    Available Actions
+                                </h3>
+                                <div class="grid grid-cols-1 gap-1.5 text-xs">
+                                    <div v-for="action in availableActions" :key="action.label" class="flex items-center gap-2">
+                                        <BaseIcon :path="action.icon" :size="16" :class="action.color" />
+                                        <span class="text-gray-700 dark:text-gray-300">{{ action.label }}</span>
+                                    </div>
                                 </div>
-                            </td>
-                            <td
-                                class="py-4 whitespace-nowrap text-right text-sm font-medium text-gray-700">
-                                <BaseButtons v-if="validStates.includes(dataset.server_state)"
-                                    type="justify-start lg:justify-end" no-wrap>
-                                    <!-- release created dataset -->
-                                    <BaseButton v-if="can.edit"
-                                        :route-name="stardust.route('dataset.release', [dataset.id])" color="info"
-                                        :icon="mdiLockOpen" :label="'Release'" small />
-                                    <BaseButton v-if="can.edit"
-                                        :route-name="stardust.route('dataset.edit', [dataset.id])" color="info"
-                                        :icon="mdiSquareEditOutline" :label="'Edit'" small />
-                                    <BaseButton v-if="can.edit"
-                                        :route-name="stardust.route('dataset.categorize', [dataset.id])" color="info"
-                                        :icon="mdiLibraryShelves" :label="'Classify'" small />
-                                    <BaseButton v-if="can.delete" color="danger"
-                                        :route-name="stardust.route('dataset.delete', [dataset.id])" :icon="mdiTrashCan"
-                                        small />
-                                </BaseButtons>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
+                            </div>
+                        </div>
+                    </div>
+                </transition>
+            </CardBox>
+
+            <!-- table -->
+            <CardBox class="mb-6" has-table>
+                <div v-if="props.datasets.data.length > 0">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>Title</th>
+                                <th>State</th>
+                                <th>Modified</th>
+                                <th v-if="can.edit || can.delete">Actions</th>
+                            </tr>
+                        </thead>
+
+                        <tbody>
+                            <tr v-for="dataset in props.datasets.data" :key="dataset.id"
+                                :class="['hover:bg-gray-50 dark:hover:bg-slate-800 transition-colors', getRowClass(dataset)]">
+                                <td data-label="Title">
+                                    <div class="max-w-xs">
+                                        <span 
+                                            class="text-gray-700 dark:text-gray-300 text-sm font-medium"
+                                            :title="dataset.main_title"
+                                        >
+                                            {{ truncateTitle(dataset.main_title) }}
+                                        </span>
+                                    </div>
+                                </td>
+                                <td data-label="State">
+                                    <div class="flex items-center gap-2">
+                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium capitalize"
+                                            :class="getStateColor(dataset.server_state)">
+                                            {{ getLabel(dataset.server_state) }}
+                                        </span>
+                                        <div v-if="dataset.server_state === 'rejected_editor' && dataset.reject_editor_note"
+                                            class="relative group">
+                                            <button
+                                                class="w-5 h-5 rounded-full bg-gray-200 dark:bg-slate-700 text-gray-600 dark:text-gray-300 text-xs flex items-center justify-center focus:outline-none hover:bg-gray-300 dark:hover:bg-slate-600 transition-colors">
+                                                i
+                                            </button>
+                                            <div
+                                                class="absolute left-0 top-full mt-1 w-64 bg-white dark:bg-slate-800 shadow-lg rounded-md p-3 text-xs text-left z-50 transform scale-0 origin-top-left transition-transform duration-100 group-hover:scale-100 border border-gray-200 dark:border-slate-700">
+                                                <p class="text-gray-700 dark:text-gray-300 max-h-40 overflow-y-auto overflow-x-hidden whitespace-normal break-words">
+                                                    {{ dataset.reject_editor_note }}
+                                                </p>
+                                                <div class="absolute -top-1 left-1 w-2 h-2 bg-white dark:bg-slate-800 border-l border-t border-gray-200 dark:border-slate-700 transform rotate-45">
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </td>
+
+                                <td data-label="Modified">
+                                    <span class="text-sm text-gray-600 dark:text-gray-400" :title="dataset.server_date_modified">
+                                        {{ dataset.server_date_modified }}
+                                    </span>
+                                </td>
+                                <td v-if="can.edit || can.delete" class="before:hidden lg:w-1 whitespace-nowrap">
+                                    <BaseButtons v-if="validStates.includes(dataset.server_state)"
+                                        type="justify-start lg:justify-end" no-wrap>
+                                        <BaseButton v-if="can.edit"
+                                            :route-name="stardust.route('dataset.release', [dataset.id])" color="info"
+                                            :icon="mdiLockOpen" small 
+                                            title="Release (Submit)" />
+                                        <BaseButton v-if="can.edit"
+                                            :route-name="stardust.route('dataset.edit', [dataset.id])" color="info"
+                                            :icon="mdiSquareEditOutline" small 
+                                            title="Edit" />
+                                        <BaseButton v-if="can.edit"
+                                            :route-name="stardust.route('dataset.categorize', [dataset.id])" color="info"
+                                            :icon="mdiLibraryShelves" small 
+                                            title="Classify" />
+                                        <BaseButton v-if="can.delete" color="danger"
+                                            :route-name="stardust.route('dataset.delete', [dataset.id])" :icon="mdiTrashCan"
+                                            small 
+                                            title="Delete" />
+                                    </BaseButtons>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div v-else>
+                    <div class="text-center py-12">
+                        <div class="flex flex-col items-center justify-center text-gray-500 dark:text-gray-400">
+                            <p class="text-lg font-medium mb-2">No datasets found</p>
+                            <p class="text-sm">Create your first dataset to get started</p>
+                        </div>
+                    </div>
+                </div>
+
                 <div class="py-4">
                     <Pagination v-bind:data="datasets.meta" />
                 </div>
@@ -179,56 +321,28 @@ const formatServerState = (state: string) => {
 </template>
 
 <style scoped lang="css">
-.table-title {
-    max-width: 200px;
-    /* set a maximum width */
-    overflow: hidden;
-    /* hide overflow */
-    text-overflow: ellipsis;
-    /* show ellipsis for overflowed text */
-    white-space: nowrap;
-    /* prevent wrapping */
+/* Background colors are now defined in tailwind.config.js */
+/* .bg-inprogress {
+    @apply bg-inprogress dark:bg-inprogress-dark;
 }
 
-.table-fixed {
-    table-layout: fixed;
+.bg-released {
+    @apply bg-released dark:bg-released-dark;
 }
 
-/* .pure-table tr.released {  
-    background-color: rgb(52 211 153);
-    color: gray;
+.bg-editor-accepted {
+    @apply bg-editor-accepted dark:bg-editor-accepted-dark;
+}
+
+.bg-approved {
+    @apply bg-approved dark:bg-approved-dark;
+}
+
+.bg-reviewed {
+    @apply bg-reviewed dark:bg-reviewed-dark;
+}
+
+.bg-rejected-editor {
+    @apply bg-rejected-editor dark:bg-rejected-editor-dark;
 } */
-
-/* .pure-table tr.inprogress {
-    padding: 0.8em;   
-    background-color: rgb(94 234 212);
-    color: gray;
-} */
-
-/* .pure-table tr.editor_accepted {   
-    background-color: rgb(125 211 252);
-    color: gray;
-} */
-
-/* .pure-table tr.rejected_reviewer {
-    padding: 0.8em;
-    background-color: orange;
-    color: gray;
-} */
-
-/* .pure-table tr.rejected_editor {  
-    background-color: orange;
-    color: gray;
-} */
-
-/* .pure-table tr.reviewed {   
-    background-color: yellow;
-    color: gray;
-} */
-
-/* .pure-table tr.approved {  
-    background-color: rgb(86, 86, 241);
-    color: whitesmoke; 
-
-}*/
-</style>
+</style>
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index e41b62d..357ffee 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,25 +12,66 @@ module.exports = {
             gray: 'gray',
         },
         extend: {
-            backgroundImage: { 
-                'radio-checked': "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' /%3E%3C/svg%3E\")",
-                'checkbox-checked': "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E\")",
+            backgroundImage: {
+                'radio-checked':
+                    "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' /%3E%3C/svg%3E\")",
+                'checkbox-checked':
+                    "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E\")",
+            },
+            backgroundColor: {
+                // Draft / In Progress - Light blue-gray
+                'draft': 'rgb(224 242 254)', // sky-100
+                'draft-dark': 'rgb(12 74 110 / 0.3)', // sky-900/30
+                'inprogress': 'rgb(224 242 254)', // sky-100
+                'inprogress-dark': 'rgb(12 74 110 / 0.3)', // sky-900/30
+
+                // Released / Submitted - Bright blue
+                'released': 'rgb(191 219 254)', // blue-200
+                'released-dark': 'rgb(30 58 138 / 0.3)', // blue-900/30
+
+                // Editor Accepted - Blue-green (teal)
+                'editor-accepted': 'rgb(204 251 241)', // teal-100
+                'editor-accepted-dark': 'rgb(19 78 74 / 0.3)', // teal-900/30
+
+                // Rejected by Reviewer - Yellow-orange (amber)
+                'rejected-reviewer': 'rgb(254 243 199)', // amber-100
+                'rejected-reviewer-dark': 'rgb(120 53 15 / 0.3)', // amber-900/30
+
+                // Rejected by Editor - Rose/Red (back to submitter)
+                'rejected-editor': 'rgb(254 205 211)', // rose-200
+                'rejected-editor-dark': 'rgb(136 19 55 / 0.3)', // rose-900/30
+
+                // Approved / Ready for Review - Cyan (blue-green)
+                'approved': 'rgb(207 250 254)', // cyan-100
+                'approved-dark': 'rgb(22 78 99 / 0.3)', // cyan-900/30
+
+                // Reviewer Accepted / In Review - Lime yellow-green
+                'reviewer-accepted': 'rgb(236 252 203)', // lime-100
+                'reviewer-accepted-dark': 'rgb(54 83 20 / 0.3)', // lime-900/30
+
+                // Reviewed - Soft yellow
+                'reviewed': 'rgb(254 240 138)', // yellow-200
+                'reviewed-dark': 'rgb(113 63 18 / 0.3)', // yellow-900/30
+
+                // Published - Fresh green
+                'published': 'rgb(187 247 208)', // green-200
+                'published-dark': 'rgb(20 83 45 / 0.3)', // green-900/30
             },
             colors: {
-                'primary': '#22C55E',    
-                'inprogress': 'rgb(94 234 212)',           
+                'primary': '#22C55E',
+                'inprogress': 'rgb(94 234 212)',
                 'released': 'rgb(52 211 153)',
                 'editor-accepted': 'rgb(125 211 252)',
-                'approved': '#FFEB3B', //A lighter yellow, which is cheerful and can indicate that something is in a pending state. 
+                'approved': '#FFEB3B', //A lighter yellow, which is cheerful and can indicate that something is in a pending state.
                 'rejected-editor': '#f97316',
                 'rejected-reviewer': '#f97316',
                 'reviewed': '#FFC107', // warm amber, suggesting caution but still positive
                 'published': '#8BC34A', //  lighter green, which is also fresh and positive
-                'primary-dark': '#DCFCE7',              
-                'lime': {                    
+                'primary-dark': '#DCFCE7',
+                'lime': {
                     DEFAULT: '#BFCE40',
                     dark: 'rgba(5,46,55,0.7)',
-                    50:  '#FBFCF7',
+                    50: '#FBFCF7',
                     100: '#F8FBE1',
                     200: '#EEF69E',
                     300: '#DCEC53',
@@ -40,7 +81,7 @@ module.exports = {
                     700: '#357C06',
                     800: '#295B09',
                     900: '#20450A',
-                  },
+                },
             },
             fontFamily: {
                 sans: ['Inter', ...defaultTheme.fontFamily.sans],
@@ -106,7 +147,7 @@ module.exports = {
                 { values: theme('asideScrollbars') },
             );
         }),
-        plugin(function({ addUtilities }) {
+        plugin(function ({ addUtilities }) {
             const newUtilities = {
                 '.drag-none': {
                     '-webkit-user-drag': 'none',
@@ -115,10 +156,10 @@ module.exports = {
                     '-o-user-drag': 'none',
                     'user-drag': 'none',
                 },
-            }
-            addUtilities(newUtilities)
+            };
+            addUtilities(newUtilities);
         }),
         // As of Tailwind CSS v3.3, the `@tailwindcss/line-clamp` plugin is now included by default
         // require('@tailwindcss/line-clamp'),
     ],
-};
\ No newline at end of file
+};