small style changes

io-app-front/src/components/AdvancedAnalysisModal/AdvancedAnalysisModal.jsx

@@ -58,13 +58,13 @@ export default function AdvancedAnalysisModal({ opened, onClose, onRunCompare, i
         {!results && (
           <Center h={500}>
             <Stack align="center" gap="xl" w="100%" maw={600}>
-              <Text size="lg" fw={500} c="dimmed" lts={1}>SELECT MODELS TO COMPARE</Text>
+              <Text size="lg" fw={500} c="dimmed" lts={1}>Select models to compare</Text>
               <Group grow w="100%">
                 <Select label="Model A" data={modelOptions} allowDeselect={false} value={modelA} onChange={setModelA} disabled={isLoading} />
                 <Select label="Model B" data={modelOptions} allowDeselect={false} value={modelB} onChange={setModelB} disabled={isLoading} />
               </Group>
-              <Button fullWidth size="lg" color="blue" onClick={() => onRunCompare(modelA, modelB)} loading={isLoading}>
-                START ANALYSIS
+              <Button fullWidth size="lg" color="blue" onClick={() => onRunCompare(modelA, modelB)} loading={isLoading} className={classes.startAnalysisButton}>
+                Start Analysis
               </Button>
             </Stack>
           </Center>

io-app-front/src/components/AdvancedAnalysisModal/AdvancedAnalysisModal.module.css

@@ -289,3 +289,18 @@
     color: rgba(255, 255, 255, 0.9);
     font-weight: 600;
 }
+
+.startAnalysisButton {
+    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.4s ease;
+    will-change: transform;
+    transform: scale(1);
+}
+
+.startAnalysisButton:hover {
+    transform: scale(1.02);
+}
+
+.startAnalysisButton:active {
+    transform: scale(0.96);
+    transition-duration: 0.1s;
+}

io-app-front/src/components/AnalysisPanel/AnalysisPanel.jsx

@@ -79,6 +79,7 @@ function AnalysisPanel({
             loading={isSingleLoading}
             size="md"
             fullWidth
+            className={styles.runAnalysisButton}
           >
             Run Analysis
           </Button>
@@ -90,6 +91,7 @@ function AnalysisPanel({
             disabled={!isLocationReady || isAdvancedLoading}
             size="md"
             fullWidth
+            className={styles.advancedAnalysisButton}
           >
             Advanced Analysis
           </Button>

io-app-front/src/components/AnalysisPanel/AnalysisPanel.module.css

@@ -51,3 +51,18 @@
     backdrop-filter: blur(10px);
     margin-bottom: 8px;
 }
+
+.runAnalysisButton, .advancedAnalysisButton {
+    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.4s ease;
+    will-change: transform;
+    transform: scale(1);
+}
+
+.runAnalysisButton:hover, .advancedAnalysisButton:hover {
+    transform: scale(1.02);
+}
+
+.runAnalysisButton:active, .advancedAnalysisButton:active {
+    transform: scale(0.96);
+    transition-duration: 0.1s;
+}

io-app-front/src/components/LayerSelector/LayerSelector.jsx

@@ -6,8 +6,8 @@ const layerOptions = [
     group: 'Main Images',
     items: [
       { label: 'Satellite (RGB)', value: 'rgb' },
-      { label: 'Segmentation', value: 'image' },
-      { label: 'Raw Segmentation', value: 'raw_segmentation' }
+      { label: 'Raw Output', value: 'raw_segmentation' },
+      { label: 'Output (with Spectral Indices)', value: 'image' },
     ]
   },
   {
@@ -27,7 +27,7 @@ export function LayerSelector({ layersConfig, onLayersChange }) {
       <Divider
         my="lg"
         color="gray.8"
-        label="Map Display"
+        label="Map Layers"
         labelPosition="center"
         styles={{ label: { color: '#868e96', fontWeight: 600 } }}
       />

io-app-front/src/components/MapLegend/MapLegend.module.css

@@ -22,9 +22,10 @@
 .colorBadge {
     width: 14px;
     height: 14px;
-    border-radius: 3px;
-    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    border: 1px solid rgba(255, 255, 255, 0.2);
     flex-shrink: 0;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
 }
 
 .itemLabel {

io-app-front/src/components/MapView/MapView.jsx

@@ -4,6 +4,8 @@ import { useMap } from '../../hooks/useMap'
 import { useAnalysisLayers } from '../../hooks/useAnalysisLayers'
 import MapLegend from '../MapLegend/MapLegend'
 import LayerOpacitySlider from '../LayerOpacitySlider/LayerOpacitySlider'
+import { IconPlus, IconMinus, IconMapPin } from '@tabler/icons-react'
+import { Tooltip } from '@mantine/core'
 
 import styles from './MapView.module.css';
 
@@ -18,7 +20,7 @@ function MapView({
 
   const [localOpacity, setLocalOpacity] = useState(0.5);
 
-  const { mapInstance, isMapLoaded } = useMap(
+  const { mapInstance, isMapLoaded, handleZoomIn, handleZoomOut, handleFlyBackToAnalysis } = useMap(
     mapContainerRef,
     mapboxAccessToken,
     selectedLocation,
@@ -33,6 +35,7 @@ function MapView({
     localOpacity,
   );
 
+
   useEffect(() => {
     if (!isMapLoaded || !mapInstance) return;
 
@@ -51,13 +54,35 @@ function MapView({
       {analysisResult && (
         <>
           <MapLegend analysisResult={analysisResult} />
-
           <LayerOpacitySlider
             opacity={localOpacity}
             onChange={setLocalOpacity}
           />
         </>
       )}
+      <div className={styles.mapActionsPanel}>
+        <Tooltip label="Zoom In" position="left" withArrow offset={15} openDelay={500} closeDelay={200} classNames={{ tooltip: styles.customTooltip }}>
+          <button onClick={handleZoomIn} className={styles.mapActionButton}>
+            <IconPlus size={20} stroke={1.5} />
+          </button>
+        </Tooltip>
+
+        <div className={styles.actionDivider} />
+
+        <Tooltip label="Zoom Out" position="left" withArrow offset={15} openDelay={500} closeDelay={200} classNames={{ tooltip: styles.customTooltip }}>
+          <button onClick={handleZoomOut} className={styles.mapActionButton}>
+            <IconMinus size={20} stroke={1.5} />
+          </button>
+        </Tooltip>
+
+        <div className={styles.actionDivider} />
+
+        <Tooltip label="Fly Back to Analysis" position="left" withArrow offset={15} openDelay={500} closeDelay={200} classNames={{ tooltip: styles.customTooltip }}>
+          <button onClick={handleFlyBackToAnalysis} className={styles.mapActionButton}>
+            <IconMapPin size={20} stroke={1.5} />
+          </button>
+        </Tooltip>
+      </div>
     </div>
   );
 }

io-app-front/src/components/MapView/MapView.module.css

@@ -9,3 +9,70 @@
     width: 100%;
     height: 100%;
 }
+
+.mapActionsPanel {
+    position: absolute;
+    bottom: 80px;
+    right: 20px;
+    display: flex;
+    flex-direction: column;
+    z-index: 100;
+    width: 44px;
+
+    background-color: rgba(10, 10, 12, 0.8);
+    backdrop-filter: blur(40px);
+    -webkit-backdrop-filter: blur(40px);
+
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 12px;
+    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
+
+    overflow: hidden;
+}
+
+.mapActionButton {
+    width: 44px;
+    height: 44px;
+    background: transparent;
+    border: none;
+    color: rgba(255, 255, 255, 0.7);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.mapActionButton:hover {
+    color: #fff;
+}
+
+.actionDivider {
+    height: 1px;
+    background-color: rgba(255, 255, 255, 0.08);
+    width: 28px;
+    margin: 0 auto;
+}
+
+.mapActionButton:active {
+    background-color: rgba(255, 255, 255, 0.1);
+    transform: scale(0.96);
+}
+
+.customTooltip {
+    background-color: rgba(10, 10, 12, 0.9) !important;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    color: #fff !important;
+    font-size: 12px !important;
+    font-weight: 500;
+    padding: 6px 12px !important;
+    border-radius: 6px !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+}
+
+.customTooltip::before {
+    background-color: rgba(10, 10, 12, 0.9) !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+}

io-app-front/src/components/SearchBar/SearchBar.module.css

@@ -1,26 +1 @@
-.searchInput {
-    background-color: #25262b;
-    color: #fff;
-    border-color: #373a40;
-    border-radius: 20px;
-}
 
-.searchInput:focus {
-    border-color: #228be6;
-}
-
-.searchDropdown {
-    background-color: #25262b;
-    border-color: #373a40;
-    border-radius: 8px;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
-}
-
-.searchOption {
-    color: #c1c2c5;
-    transition: background-color 0.2s ease;
-}
-
-.searchOption:hover {
-    background-color: #2c2e33;
-}

io-app-front/src/hooks/useMap.js

@@ -36,14 +36,6 @@ export const useMap = (mapContainerRef, mapboxAccessToken, selectedLocation, ana
       'bottom-right'
     );
 
-    mapRef.current.addControl(
-      new mapboxgl.NavigationControl({
-        showZoom: true,
-        showCompass: false
-      }),
-      'bottom-right'
-    );
-
     return () => {
       mapRef.current?.remove();
       markerRef.current?.remove();
@@ -97,5 +89,26 @@ export const useMap = (mapContainerRef, mapboxAccessToken, selectedLocation, ana
     }
   }, [analysisResult, isMapLoaded]);
 
-  return { mapInstance, isMapLoaded };
+  const handleZoomIn = () => {
+    mapRef.current?.zoomIn({ duration: 300 });
+  }
+
+  const handleZoomOut = () => {
+    mapRef.current?.zoomOut({ duration: 300 });
+  }
+
+  const handleFlyBackToAnalysis = () => {
+    const target = analysisResult || selectedLocation;
+
+    if (mapRef.current && target) {
+      mapRef.current.flyTo({
+        center: [target.lng || target.lon, target.lat],
+        zoom: 12,
+        essential: true,
+        duration: 2500,
+      });
+    }
+  }
+
+  return { mapInstance, isMapLoaded, handleZoomIn, handleZoomOut, handleFlyBackToAnalysis };
 }

io-app-front/src/index.css

@@ -5,3 +5,8 @@
     bottom: 0;
     left: 0;
 }
+
+.mapboxgl-ctrl-bottom-right {
+    right: 20px !important;
+    bottom: 20px !important;
+}