diff --git a/package.json b/package.json
index 1d1ebdb9..ab6c1cba 100755
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "chartjs-adapter-date-fns": "^3.0.0",
     "chartjs-plugin-annotation": "^3.1.0",
     "date-fns": "^4.1.0",
+    "dompurify": "^3.3.2",
     "dotenv": "^16.4.7",
     "file-saver": "^2.0.5",
     "html2canvas": "^1.4.1",
@@ -33,6 +34,7 @@
     "react-ga4": "^2.1.0",
     "react-hot-toast": "^2.5.1",
     "react-icons": "^5.5.0",
+    "react-intersection-observer": "^10.0.3",
     "react-router": "7.6.3",
     "react-router-dom": "7.6.3",
     "react-scripts": "5.0.1",
diff --git a/src/App.jsx b/src/App.jsx
index e4d876e9..941f0372 100755
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,10 +6,12 @@ import PlansPage from "./components/plansPage";
 import PlanViewPage from "./components/plan_detailView";
 import AgroHorticulture from "./pages/AgroHorticulture";
 import RWBDashboard from "./pages/RWBDashboard";
+import ToastHandler from "./components/ui/ToastHandler";
 
 function App() {
   return (
     <BrowserRouter>
+      <ToastHandler />
       <Routes>
         <Route path="/" element={<LEHomepage />} />
         <Route path="/kyl_dashboard" element={<KYLDashboardPage />} />
diff --git a/src/components/buttons/select_button.jsx b/src/components/buttons/select_button.jsx
index 6d632011..0f1f663e 100755
--- a/src/components/buttons/select_button.jsx
+++ b/src/components/buttons/select_button.jsx
@@ -1,7 +1,14 @@
-import { useMemo } from 'react';
-import Select from 'react-select';
+import { useMemo } from "react";
+import Select from "react-select";
 
-const SelectButton = ({ stateData, handleItemSelect, setState, currVal }) => {
+const SelectButton = ({
+  stateData,
+  handleItemSelect,
+  setState,
+  currVal,
+  className = "",
+  placeholder = "Select option",
+}) => {
   // ---------- sort by label, keeping original untouched ----------
   const sortedOptions = useMemo(() => {
     if (!stateData) return [];
@@ -9,38 +16,76 @@ const SelectButton = ({ stateData, handleItemSelect, setState, currVal }) => {
   }, [stateData]);
 
   const customStyles = {
-    container: (provided) => ({ ...provided, width: '100%' }),
+    container: (provided) => ({ ...provided, width: "100%" }),
     control: (base, state) => ({
       ...base,
-      borderColor: 'black',
-      backgroundColor: 'white',
-      textAlign: 'center',
-      width: '100%',
+      minHeight: 44,
+      borderRadius: 12,
+      borderColor: state.isFocused ? "#8B5CF6" : "#D1D5DB",
+      backgroundColor: state.isDisabled ? "#F9FAFB" : "white",
+      textAlign: "left",
+      width: "100%",
+      boxShadow: state.isFocused ? "0 0 0 3px rgba(139, 92, 246, 0.18)" : "none",
+      cursor: state.isDisabled ? "not-allowed" : "pointer",
+      transition: "border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease",
+      "&:hover": {
+        borderColor: state.isFocused ? "#8B5CF6" : "#A78BFA",
+      },
+    }),
+    valueContainer: (base) => ({
+      ...base,
+      paddingLeft: 10,
+      paddingRight: 10,
+    }),
+    placeholder: (base) => ({
+      ...base,
+      color: "#6B7280",
+    }),
+    singleValue: (base) => ({
+      ...base,
+      color: "#111827",
     }),
     option: (styles, { isFocused, isSelected }) => ({
       ...styles,
-      color: '#111827',
+      color: "#111827",
       backgroundColor: isSelected
-        ? '#11182732'
+        ? "#EDE9FE"
         : isFocused
-        ? '#11182717'
+        ? "#F5F3FF"
         : undefined,
-      ':active': { ...styles[':active'], backgroundColor: '#11182717' },
+      cursor: "pointer",
+      transition: "background-color 180ms ease",
+      ":active": { ...styles[":active"], backgroundColor: "#DDD6FE" },
+    }),
+    menu: (provided) => ({
+      ...provided,
+      width: "100%",
+      borderRadius: 12,
+      overflow: "hidden",
+      boxShadow: "0 16px 32px rgba(15, 23, 42, 0.14)",
+    }),
+    indicatorSeparator: () => ({ display: "none" }),
+    dropdownIndicator: (base, state) => ({
+      ...base,
+      color: state.isFocused ? "#8B5CF6" : "#6B7280",
+      transition: "color 180ms ease, transform 180ms ease",
+      transform: state.selectProps.menuIsOpen ? "rotate(180deg)" : "rotate(0deg)",
     }),
-    menu: (provided) => ({ ...provided, width: '100%' }),
   };
 
   return (
-    <div className="w-full">
+    <div className={`w-full ${className}`}>
       <Select
+        classNamePrefix="react-select"
         styles={customStyles}
-        options={sortedOptions}     
+        options={sortedOptions}
         value={currVal}
         onChange={(e) => handleItemSelect(setState, e)}
         isDisabled={!stateData}
+        placeholder={placeholder}
       />
     </div>
   );
 };
 
-export default SelectButton;
\ No newline at end of file
+export default SelectButton;
diff --git a/src/components/data/Filters.json b/src/components/data/Filters.json
index a03f2092..6ae854a7 100644
--- a/src/components/data/Filters.json
+++ b/src/components/data/Filters.json
@@ -246,14 +246,14 @@
                         }
                     },
                     {
-                        "label": "Minimum one week of dry spell",
+                        "label": "At least one week of dry spell",
                         "value": {
                             "lower": 1,
                             "upper": 999999999
                         }
                     },
                     {
-                        "label": "Minimum two weeks of dry spells",
+                        "label": "At least two weeks of dry spells",
                         "value": {
                             "lower": 2,
                             "upper": 9999999999
@@ -490,45 +490,70 @@
             },
             {
                 "name": "soge_class",
-                "label" : "Stage of groundwater extraction",
-                "type" : 1,
-                "values" : [
-                    {"label" : "Safe", "value" : 0},
-                    {"label" : "Semi-Critical", "value" : 1},
-                    {"label" : "Critical", "value" : 2},
-                    {"label" : "Over-exploited", "value" : 3},
-                    {"label" : "Not Assessed", "value" : 4}                      
-                    ],
-                "layer_store" : ["soge"],
-                "layer_name" : ["soge_vector"],
-                "vectorStyle" : [{
-                    "fill" : "rgba(255, 255, 255, 0.5)",
-                    "stroke" : "rgba(255, 255, 255, 1)",
-                    "lower" : 0, "upper" : 0
-                },
-                {
-                    "fill" : "rgba(224, 243, 248, 0.5)",
-                    "stroke" : "rgba(224, 243, 248, 1)",
-                    "lower" : 1, "upper" : 1
-                },
-                {
-                    "fill" : "rgba(69, 117, 180, 0.5)",
-                    "stroke" : "rgba(69, 117, 180, 1)",
-                    "lower" : 2, "upper" : 2
-                },
-                {
-                    "fill" : "rgba(49, 54, 149, 0.5)",
-                    "stroke" : "rgba(49, 54, 149, 1)",
-                    "lower" : 3, "upper" : 3
-                },
-                {
-                    "fill" : "rgba(169, 169, 169, 0.5)",
-                    "stroke" : "rgba(169, 169, 169, 1)",
-                    "lower" : 4, "upper" : 4
-                }
-            ],
-                "rasterStyle" : "",
-                "styleIdx" : 12
+                "label": "Stage of groundwater extraction",
+                "type": 1,
+                "values": [
+                    {
+                        "label": "Safe",
+                        "value": 0
+                    },
+                    {
+                        "label": "Semi-Critical",
+                        "value": 1
+                    },
+                    {
+                        "label": "Critical",
+                        "value": 2
+                    },
+                    {
+                        "label": "Over-exploited",
+                        "value": 3
+                    },
+                    {
+                        "label": "Not Assessed",
+                        "value": 4
+                    }
+                ],
+                "layer_store": [
+                    "soge"
+                ],
+                "layer_name": [
+                    "soge_vector"
+                ],
+                "vectorStyle": [
+                    {
+                        "fill": "rgba(255, 255, 255, 0.5)",
+                        "stroke": "rgba(255, 255, 255, 1)",
+                        "lower": 0,
+                        "upper": 0
+                    },
+                    {
+                        "fill": "rgba(224, 243, 248, 0.5)",
+                        "stroke": "rgba(224, 243, 248, 1)",
+                        "lower": 1,
+                        "upper": 1
+                    },
+                    {
+                        "fill": "rgba(69, 117, 180, 0.5)",
+                        "stroke": "rgba(69, 117, 180, 1)",
+                        "lower": 2,
+                        "upper": 2
+                    },
+                    {
+                        "fill": "rgba(49, 54, 149, 0.5)",
+                        "stroke": "rgba(49, 54, 149, 1)",
+                        "lower": 3,
+                        "upper": 3
+                    },
+                    {
+                        "fill": "rgba(169, 169, 169, 0.5)",
+                        "stroke": "rgba(169, 169, 169, 1)",
+                        "lower": 4,
+                        "upper": 4
+                    }
+                ],
+                "rasterStyle": "",
+                "styleIdx": 12
             },
             {
                 "name": "trend_g",
@@ -666,7 +691,7 @@
         "Restoration": [
             {
                 "name": "decrease_in_tree_cover",
-                "label": "Reduction in tree cover",
+                "label": "Deforestation",
                 "type": 2,
                 "values": [
                     {
@@ -1287,5 +1312,111 @@
                 "styleIdx": 8
             }
         ]
+    },
+    "Waterbody": {
+        "Waterbody": [
+            {
+                "name": "waterbody_size",
+                "label": "Size of Waterbody",
+                "type": 2,
+                "values": [
+                    {
+                        "label": "WB < 1 ha",
+                        "value": {
+                            "lower": 0,
+                            "upper": 1
+                        }
+                    },
+                    {
+                        "label": "1 ha < WB < 5 ha",
+                        "value": {
+                            "lower": 1,
+                            "upper": 5
+                        }
+                    },
+                    {
+                        "label": "5 ha < WB < 10 ha",
+                        "value": {
+                            "lower": 5,
+                            "upper": 10
+                        }
+                    },
+                    {
+                        "label": "WB > 10 ha",
+                        "value": {
+                            "lower": 10,
+                            "upper": 999999
+                        }
+                    }
+                ],
+                "layer_store": [
+                    "waterbodies"
+                ],
+                "layer_name": [
+                    "waterbodies"
+                ],
+                "vectorStyle": [
+                    {}
+                ],
+                "rasterStyle": "",
+                "styleIdx": 0
+            },
+            {
+                "name": "surface_water_trend",
+                "label": "Surface Water Trend",
+                "type": 1,
+                "values": [
+                    {
+                        "label": "Positive Trend",
+                        "value": 1
+                    },
+                    {
+                        "label": "Negative Trend",
+                        "value": -1
+                    },
+                    {
+                        "label": "Steady",
+                        "value": 0
+                    }
+                ],
+                "layer_store": [
+                    "waterbodies"
+                ],
+                "layer_name": [
+                    "waterbodies"
+                ],
+                "vectorStyle": [
+                    {}
+                ],
+                "rasterStyle": "",
+                "styleIdx": 1
+            },
+            {
+                "name": "drainage_line",
+                "label": "Drainage Line",
+                "type": 1,
+                "values": [
+                    {
+                        "label": "On drainage line",
+                        "value": 1
+                    },
+                    {
+                        "label": "Off drainage line",
+                        "value": 0
+                    }
+                ],
+                "layer_store": [
+                    "waterbodies"
+                ],
+                "layer_name": [
+                    "waterbodies"
+                ],
+                "vectorStyle": [
+                    {}
+                ],
+                "rasterStyle": "",
+                "styleIdx": 2
+            }
+        ]
     }
 }
\ No newline at end of file
diff --git a/src/components/kyl_indicatorFilter.jsx b/src/components/kyl_indicatorFilter.jsx
index 9d5ebea4..f3906919 100644
--- a/src/components/kyl_indicatorFilter.jsx
+++ b/src/components/kyl_indicatorFilter.jsx
@@ -17,10 +17,14 @@ const KYLIndicatorFilter = ({ filter, onFilterChange, isDisabled, getFormattedSe
                 <h3 className="text-sm font-semibold text-gray-900">
                     {filter.label}
                 </h3>
-                <ToggleButton 
-                    isOn={toggleStates[filter.name]} 
-                    toggleSwitch={() => handleLayerSelection(filter)}
-                />
+
+                {filter.category !== "Waterbody" && (
+                    <ToggleButton 
+                        isOn={toggleStates[filter.name]} 
+                        toggleSwitch={() => handleLayerSelection(filter)}
+                    />
+                )}
+
             </div>
             <div className="space-y-2 pt-1">
                 {filter.values.map((option) => {
diff --git a/src/components/kyl_leftSidebar.jsx b/src/components/kyl_leftSidebar.jsx
index 65cfb170..cf647eb5 100644
--- a/src/components/kyl_leftSidebar.jsx
+++ b/src/components/kyl_leftSidebar.jsx
@@ -35,7 +35,8 @@ const KYLLeftSidebar = ({
 
     const combinedSelectedValues = {
         ...filterSelections.selectedMWSValues,
-        ...filterSelections.selectedVillageValues
+        ...filterSelections.selectedVillageValues,
+        ...filterSelections.selectedWaterbodyValues
     };
 
     const handleClearAll = () => {
@@ -59,7 +60,8 @@ const KYLLeftSidebar = ({
         // Clear all filters
         setFilterSelections({
             selectedMWSValues: {},
-            selectedVillageValues: {}
+            selectedVillageValues: {},
+            selectedWaterbodyValues:{}
         });
     };
 
diff --git a/src/components/kyl_mapContainer.jsx b/src/components/kyl_mapContainer.jsx
index f9770afd..c924e27a 100644
--- a/src/components/kyl_mapContainer.jsx
+++ b/src/components/kyl_mapContainer.jsx
@@ -221,8 +221,8 @@ const MapLegend = ({ showMWS, showVillages, currentLayer, mappedAssets, mappedDe
   ];
 
   const rainfallLegendItems = [
-    { color: "#B0E0E6", label: "Semi-arid" },
-    { color: "#87CEFA", label: "Arid" },
+    { color: "#B0E0E6", label: "Arid" },
+    { color: "#87CEFA", label: "Semi-arid" },
     { color: "#1E90FF", label: "Moderate" },
     { color: "#0073E6", label: "High" },
     { color: "#004080", label: "Very high" },
@@ -290,9 +290,9 @@ const MapLegend = ({ showMWS, showVillages, currentLayer, mappedAssets, mappedDe
   ];
 
   const TrendLegendItems = [
-    { color: "#B8860B", label: "Increasing trend of G" },
-    { color: "#FFECB3", label: "Decreasing trend of G" },
-    { color: "#FFD700", label: "No trend of G" },
+    { color: "#B8860B", label: "Positive Trend" },
+    { color: "#FFECB3", label: "Negative Trend" },
+    { color: "#FFD700", label: "No Trend" },
   ];
 
   const CropDegradationItems = [
@@ -716,7 +716,7 @@ const MapLegend = ({ showMWS, showVillages, currentLayer, mappedAssets, mappedDe
               {isDryspellLayerActive && (
                 <div className="space-y-2">
                   <h4 className="text-xs font-medium text-gray-600">
-                    Dryspell Vector
+                    Dry spell Vector
                   </h4>
                   {dryspellLengendItems.map((item, index) => (
                     <div
@@ -898,7 +898,7 @@ const MapLegend = ({ showMWS, showVillages, currentLayer, mappedAssets, mappedDe
               {isTrendLayerActive && (
                 <div className="space-y-2">
                   <h4 className="text-xs font-medium text-gray-600">
-                    Groundwater Trend
+                    Water balance Trend
                   </h4>
                   {TrendLegendItems.map((item, index) => (
                     <div
diff --git a/src/components/kyl_rightSidebar.jsx b/src/components/kyl_rightSidebar.jsx
index c4bb7285..e33bd722 100644
--- a/src/components/kyl_rightSidebar.jsx
+++ b/src/components/kyl_rightSidebar.jsx
@@ -145,6 +145,15 @@ const KYLRightSidebar = ({
         },
       }));
     }
+    else if (sourceType === "Waterbody") {
+      setFilterSelections((prev) => ({
+        ...prev,
+        selectedWaterbodyValues: {
+          ...prev.selectedWaterbodyValues,
+          [filter.name]: null,
+        },
+      }));
+    }
   };
 
   const toggleWaterbodies = () => {
@@ -152,22 +161,31 @@ const KYLRightSidebar = ({
       console.warn("Waterbodies layer not loaded yet");
       return;
     }
-
-    setLoadingWB(true);
-
-    setTimeout(() => {
-      if (showWB) {
-        mapRef.current.removeLayer(waterbodiesLayerRef.current);
-        setShowWB(false);
-      } else {
-        mapRef.current.removeLayer(boundaryLayerRef.current);
-        mapRef.current.addLayer(waterbodiesLayerRef.current);
-        mapRef.current.addLayer(boundaryLayerRef.current);
-        setShowWB(true);
-      }
-
-      setLoadingWB(false);
-    }, 500);
+  
+    const source = waterbodiesLayerRef.current.getSource();
+  
+    if (!showWB) {
+      setLoadingWB(true);
+  
+      const handleSourceChange = () => {
+        if (source.getState() === "ready") {
+          setLoadingWB(false);
+        }
+      };
+  
+      // attach change listener
+      source.once("change", handleSourceChange);
+  
+      mapRef.current.removeLayer(boundaryLayerRef.current);
+      mapRef.current.addLayer(waterbodiesLayerRef.current);
+      mapRef.current.addLayer(boundaryLayerRef.current);
+  
+      setShowWB(true);
+  
+    } else {
+      mapRef.current.removeLayer(waterbodiesLayerRef.current);
+      setShowWB(false);
+    }
   };
 
   const toggleConnectivity = () => {
@@ -907,8 +925,11 @@ const KYLRightSidebar = ({
                       </div>
                       <button
                         onClick={() => handleIndicatorRemoval(filter)}
-                        className={`text-gray-400 hover:text-gray-600 ml-2 ${toggleStates[filter.name] ? "invisible" : "visible"
-                          }`}
+                        className={`text-gray-400 hover:text-gray-600 ml-2 ${
+                          toggleStates[filter.name] && filter.layer_store?.[0] !== "waterbody"
+                            ? "invisible"
+                            : "visible"
+                        }`}
                       >
                         <svg
                           className="w-3 h-3"
diff --git a/src/components/landscape-explorer/map/Map.jsx b/src/components/landscape-explorer/map/Map.jsx
index 8e07af5f..4f67faf1 100644
--- a/src/components/landscape-explorer/map/Map.jsx
+++ b/src/components/landscape-explorer/map/Map.jsx
@@ -19,6 +19,8 @@ import getVectorLayers from "../../../actions/getVectorLayers";
 import getWebGlLayers from "../../../actions/getWebGlLayers";
 import getImageLayers from "../../../actions/getImageLayers";
 import getStates from "../../../actions/getStates";
+import { toast } from "react-hot-toast";
+import Loader from "../../ui/Loader.jsx";
 
 // Import asset icons
 import mapMarker from '../../../assets/map_marker.svg';
@@ -807,6 +809,7 @@ const MapLegend = ({ toggledLayers, lulcYear1, lulcYear2, lulcYear3 }) => {
 const Map = forwardRef(({
   isLoading,
   setIsLoading,
+  loadingMessage = "Loading map...",
   state,
   district,
   block,
@@ -864,6 +867,7 @@ const Map = forwardRef(({
   const [isLayersFetched, setIsLayersFetched] = useState(false);
   const [stateData, setStateData] = useState(null);
   const [isInitialized, setIsInitialized] = useState(false);
+  const notifiedLayerErrors = useRef(new Set());
 
   // Color constants from original implementation
   const terrainClusterColors = ["#324A1C", "#97C76B", "#673A13", "#E5E059"];
@@ -2293,6 +2297,14 @@ const Map = forwardRef(({
   }, [lulcYear3])
 
   // Initialize map once
+  useEffect(() => {
+    Object.entries(layerErrors).forEach(([layer, error]) => {
+      if (!error || notifiedLayerErrors.current.has(layer)) return;
+      notifiedLayerErrors.current.add(layer);
+      toast.error(`Failed to load ${layer}.`);
+    });
+  }, [layerErrors]);
+
   useEffect(() => {
     if (!mapRef.current) {
       initializeMap();
@@ -2422,20 +2434,16 @@ const Map = forwardRef(({
       />
 
       {isLoading && (
-        <div className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-30">
-          <div className="bg-white p-4 rounded-lg shadow-lg flex items-center space-x-3">
-            <svg className="animate-spin h-5 w-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-            </svg>
-            <span className="text-gray-700">Loading map...</span>
+        <div className="absolute inset-0 flex items-center justify-center bg-slate-950/20 backdrop-blur-[2px]">
+          <div className="ui-fade-in rounded-2xl border border-violet-100 bg-white px-5 py-4 shadow-xl">
+            <Loader label={loadingMessage} size="md" />
           </div>
         </div>
       )}
 
       {/* Layer error notifications */}
       {Object.keys(layerErrors).length > 0 && (
-        <div className="absolute bottom-24 right-6 bg-white p-2 rounded-lg shadow-lg text-sm max-w-xs">
+        <div className="ui-fade-in absolute bottom-24 right-6 max-w-xs rounded-2xl border border-red-100 bg-white p-3 text-sm shadow-lg">
           <div className="text-red-500 font-medium">Some layers failed to load:</div>
           <ul className="text-gray-600 text-xs mt-1">
             {Object.entries(layerErrors).map(([layer, error]) => (
@@ -2448,4 +2456,4 @@ const Map = forwardRef(({
   );
 });
 
-export default Map;
\ No newline at end of file
+export default Map;
diff --git a/src/components/landscape-explorer/map/MapControls.jsx b/src/components/landscape-explorer/map/MapControls.jsx
index 25e44978..39117682 100644
--- a/src/components/landscape-explorer/map/MapControls.jsx
+++ b/src/components/landscape-explorer/map/MapControls.jsx
@@ -81,16 +81,17 @@ const MapControls = ({
   };
 
   // Count total active layers
-  const totalActiveLayers = 
-    getActiveLayersByCategory('resources').length
+  const totalActiveLayers = Object.values(toggledLayers).filter(Boolean).length;
 
   return (
     <div className="absolute bottom-6 right-6 flex flex-col space-y-2">
       {/* Layer controls button - show active layer count */}
       <button
         onClick={() => setShowLayerControls(!showLayerControls)}
-        className="bg-white rounded-lg shadow-lg p-2 flex items-center justify-center hover:bg-gray-100 relative"
+        className="ui-pressable relative flex items-center justify-center rounded-2xl border border-violet-100 bg-white/95 p-2 shadow-lg backdrop-blur hover:bg-violet-50 focus-visible:ring-0"
         title="Toggle layer controls"
+        aria-expanded={showLayerControls}
+        aria-label="Toggle layer controls"
       >
         <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 6h11M9 12h11M9 18h11M5 6a1 1 0 11-2 0 1 1 0 012 0zM5 12a1 1 0 11-2 0 1 1 0 012 0zM5 18a1 1 0 11-2 0 1 1 0 012 0z" />
@@ -104,7 +105,7 @@ const MapControls = ({
 
       {/* Layer control panel */}
       {showLayerControls && (
-        <div className="bg-white rounded-lg shadow-lg p-3 w-60 max-h-[calc(100vh-150px)] overflow-auto">
+        <div className="ui-fade-in w-60 max-h-[calc(100vh-150px)] overflow-auto rounded-2xl border border-violet-100 bg-white/95 p-3 shadow-lg backdrop-blur">
           <h3 className="font-medium text-gray-700 mb-2">Layer Controls</h3>
           
           {/* Layer category buttons in a wrapped grid */}
@@ -146,7 +147,7 @@ const MapControls = ({
                   type="checkbox"
                   checked={showMWS}
                   onChange={() => setShowMWS(!showMWS)}
-                  className="form-checkbox h-4 w-4 text-blue-600 rounded"
+                  className="h-4 w-4 rounded border-gray-300 text-violet-600 focus:ring-violet-500"
                 />
                 <span className="text-sm text-gray-700">Show Watersheds</span>
               </label>
@@ -155,7 +156,7 @@ const MapControls = ({
                   type="checkbox"
                   checked={showVillages}
                   onChange={() => setShowVillages(!showVillages)}
-                  className="form-checkbox h-4 w-4 text-blue-600 rounded"
+                  className="h-4 w-4 rounded border-gray-300 text-violet-600 focus:ring-violet-500"
                 />
                 <span className="text-sm text-gray-700">Show Boundaries</span>
               </label>
@@ -175,7 +176,7 @@ const MapControls = ({
                       type="checkbox"
                       checked={toggledLayers[layer.id] || false}
                       onChange={(e) => handleToggleClick(layer.id, e.target.checked)}
-                      className="form-checkbox h-4 w-4 text-blue-600 rounded"
+                      className="h-4 w-4 rounded border-gray-300 text-violet-600 focus:ring-violet-500"
                     />
                     <span className="text-sm text-gray-700">{layer.label}</span>
                   </label>
@@ -187,11 +188,12 @@ const MapControls = ({
       )}
 
       {/* Zoom controls */}
-      <div className="bg-white rounded-lg shadow-lg overflow-hidden">
+      <div className="overflow-hidden rounded-2xl border border-violet-100 bg-white/95 shadow-lg backdrop-blur">
         <button
           onClick={handleZoomIn}
-          className="p-2 w-8 h-8 flex items-center justify-center hover:bg-gray-100"
+          className="ui-pressable flex h-10 w-10 items-center justify-center hover:bg-violet-50 focus-visible:ring-0"
           title="Zoom in"
+          aria-label="Zoom in"
         >
           <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
             <path fillRule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clipRule="evenodd" />
@@ -200,8 +202,9 @@ const MapControls = ({
         <div className="border-t border-gray-200"></div>
         <button
           onClick={handleZoomOut}
-          className="p-2 w-8 h-8 flex items-center justify-center hover:bg-gray-100"
+          className="ui-pressable flex h-10 w-10 items-center justify-center hover:bg-violet-50 focus-visible:ring-0"
           title="Zoom out"
+          aria-label="Zoom out"
         >
           <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
             <path fillRule="evenodd" d="M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z" clipRule="evenodd" />
@@ -210,8 +213,9 @@ const MapControls = ({
         <div className="border-t border-gray-200"></div>
         <button
           onClick={handleResetView}
-          className="p-2 w-8 h-8 flex items-center justify-center hover:bg-gray-100"
+          className="ui-pressable flex h-10 w-10 items-center justify-center hover:bg-violet-50 focus-visible:ring-0"
           title="Reset view"
+          aria-label="Reset map view"
         >
           <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
             <path fillRule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clipRule="evenodd" />
@@ -222,4 +226,4 @@ const MapControls = ({
   );
 };
 
-export default MapControls; 
\ No newline at end of file
+export default MapControls; 
diff --git a/src/components/landscape-explorer/sidebar/LeftSidebar.jsx b/src/components/landscape-explorer/sidebar/LeftSidebar.jsx
index 6303a0cb..0f65a426 100644
--- a/src/components/landscape-explorer/sidebar/LeftSidebar.jsx
+++ b/src/components/landscape-explorer/sidebar/LeftSidebar.jsx
@@ -44,10 +44,10 @@ const LeftSidebar = ({ onClose }) => {
     return (
       <button 
         onClick={onClickEvent}
-        className={`px-3 py-2 rounded text-sm font-medium transition-colors whitespace-nowrap ${
+        className={`ui-pressable whitespace-nowrap rounded-xl border px-3 py-2 text-sm font-medium focus-visible:ring-0 ${
           isActive 
-            ? 'bg-[#8B5CF6] text-white'
-            : 'bg-[#EDE9FE] text-[#8B5CF6] hover:bg-[#DDD6FE]'
+            ? 'border-violet-500 bg-[#8B5CF6] text-white shadow-md'
+            : 'border-violet-200 bg-[#EDE9FE] text-[#8B5CF6] hover:bg-[#DDD6FE]'
         }`}
       >
         {name}
@@ -56,8 +56,8 @@ const LeftSidebar = ({ onClose }) => {
   };
 
   return (
-    <div className="bg-[#1E1B2E] w-96 h-full overflow-auto flex flex-col">
-      <div className="flex items-center justify-between p-4 border-b border-gray-700">
+    <div className="ui-slide-in flex h-full w-96 flex-col overflow-auto border-r border-[#332E4A] bg-[#1E1B2E]">
+      <div className="flex items-center justify-between border-b border-gray-700 p-4">
         <div className="flex items-center gap-3">
           <img src={landscape_icon} alt="Landscape Explorer" className="w-10 h-10" />
           <div>
@@ -67,7 +67,8 @@ const LeftSidebar = ({ onClose }) => {
         </div>
         <button 
           onClick={onClose}
-          className="text-gray-400 hover:text-white p-2 rounded-full hover:bg-[#332E4A]"
+          className="ui-pressable rounded-full p-2 text-gray-400 hover:bg-[#332E4A] hover:text-white focus-visible:ring-0"
+          aria-label="Close information panel"
         >
           <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
             <path fillRule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
@@ -87,7 +88,7 @@ const LeftSidebar = ({ onClose }) => {
         ))}
       </div>
 
-      <div className="p-4 bg-[#2A263C] rounded-md mx-3 mt-2">
+      <div className="ui-surface mx-3 mt-2 rounded-2xl bg-[#2A263C] p-4">
         <div className="text-lg font-semibold text-gray-200 mb-3 border-b border-gray-700 pb-2">
           {currSection}
         </div>
@@ -100,14 +101,14 @@ const LeftSidebar = ({ onClose }) => {
               href="https://gitlab.com/corestack.org/corestack" 
               target="_blank" 
               rel="noopener noreferrer" 
-              className="bg-[#8B5CF6] px-3 py-2 rounded-md text-white text-sm hover:bg-[#7C3AED] transition"
+              className="ui-pressable rounded-xl bg-[#8B5CF6] px-3 py-2 text-sm text-white hover:bg-[#7C3AED] focus-visible:ring-0"
             >
               KNOW MORE
             </a>
             {layerDetail[currTab]["style_url"].map((item, index) => (
               <button 
                 key={index}
-                className="bg-[#8B5CF6] px-3 py-2 rounded-md text-white text-sm hover:bg-[#7C3AED] transition"
+                className="ui-pressable rounded-xl bg-[#8B5CF6] px-3 py-2 text-sm text-white hover:bg-[#7C3AED] focus-visible:ring-0"
                 onClick={() => handleLayerStyleDownload(item["url"])}
               >
                 {item["name"]}
@@ -123,39 +124,39 @@ const LeftSidebar = ({ onClose }) => {
             Map Marker's Directory
           </h4>
           <div className="px-3 py-2 overflow-y-auto grid gap-1">
-            <div className="flex items-center p-2 bg-[#332E4A] rounded-md">
+            <div className="ui-surface flex items-center rounded-xl bg-[#332E4A] p-2">
               <img src={well_icon} alt="Well Marker" className="h-8 w-8" />
               <span className="text-gray-300 text-sm pl-2">Well Marker</span>
             </div>
-            <div className="flex items-center p-2 bg-[#332E4A] rounded-md">
+            <div className="ui-surface flex items-center rounded-xl bg-[#332E4A] p-2">
               <img src={livelihood_icon} alt="Livelihood Marker" className="h-8 w-8" />
               <span className="text-gray-300 text-sm pl-2">Livelihood Marker</span>
             </div>
-            <div className="flex items-center p-2 bg-[#332E4A] rounded-md">
+            <div className="ui-surface flex items-center rounded-xl bg-[#332E4A] p-2">
               <img src={settlement_icon} alt="Settlement Marker" className="h-8 w-8" />
               <span className="text-gray-300 text-sm pl-2">Settlement Marker</span>
             </div>
-            <div className="flex items-center p-2 bg-[#332E4A] rounded-md">
+            <div className="ui-surface flex items-center rounded-xl bg-[#332E4A] p-2">
               <img src={waterbodies_icon} alt="Waterbodies Marker" className="h-8 w-8" />
               <span className="text-gray-300 text-sm pl-2">Waterbodies Marker</span>
             </div>
-            <div className="flex items-center p-2 bg-[#332E4A] rounded-md">
+            <div className="ui-surface flex items-center rounded-xl bg-[#332E4A] p-2">
               <img src={tcb_icon} alt="TCB Marker" className="h-8 w-8" />
               <span className="text-gray-300 text-sm pl-2">Trench-Cum-Bund Marker</span>
             </div>
-            <div className="flex items-center p-2 bg-[#332E4A] rounded-md">
+            <div className="ui-surface flex items-center rounded-xl bg-[#332E4A] p-2">
               <img src={land_leveling_icon} alt="Land Leveling Marker" className="h-8 w-8" />
               <span className="text-gray-300 text-sm pl-2">Land Leveling Marker</span>
             </div>
-            <div className="flex items-center p-2 bg-[#332E4A] rounded-md">
+            <div className="ui-surface flex items-center rounded-xl bg-[#332E4A] p-2">
               <img src={farm_pond_icon} alt="Farm Pond Marker" className="h-8 w-8" />
               <span className="text-gray-300 text-sm pl-2">Farm Pond Marker</span>
             </div>
-            <div className="flex items-center p-2 bg-[#332E4A] rounded-md">
+            <div className="ui-surface flex items-center rounded-xl bg-[#332E4A] p-2">
               <img src={check_dam_icon} alt="Check Dam Marker" className="h-8 w-8" />
               <span className="text-gray-300 text-sm pl-2">Check Dam Marker</span>
             </div>
-            <div className="flex items-center p-2 bg-[#332E4A] rounded-md">
+            <div className="ui-surface flex items-center rounded-xl bg-[#332E4A] p-2">
               <img src={boulder_icon} alt="Boulder Marker" className="h-8 w-8" />
               <span className="text-gray-300 text-sm pl-2">Boulder Marker</span>
             </div>
@@ -167,31 +168,31 @@ const LeftSidebar = ({ onClose }) => {
             NREGA Color Coding
           </h4>
           <div className="px-3 py-2 overflow-y-auto grid gap-1">
-            <div className="flex items-center p-2 bg-[#332E4A] rounded-md">
+            <div className="ui-surface flex items-center rounded-xl bg-[#332E4A] p-2">
               <div className="h-6 w-6 rounded-full bg-yellow-500" />
               <span className="text-gray-300 text-sm pl-2">Land Restoration</span>
             </div>
-            <div className="flex items-center p-2 bg-[#332E4A] rounded-md">
+            <div className="ui-surface flex items-center rounded-xl bg-[#332E4A] p-2">
               <div className="h-6 w-6 rounded-full bg-pink-400" />
               <span className="text-gray-300 text-sm pl-2">Off-Farm Livelihood Assets</span>
             </div>
-            <div className="flex items-center p-2 bg-[#332E4A] rounded-md">
+            <div className="ui-surface flex items-center rounded-xl bg-[#332E4A] p-2">
               <div className="h-6 w-6 rounded-full bg-sky-800" />
               <span className="text-gray-300 text-sm pl-2">Irrigation on farms</span>
             </div>
-            <div className="flex items-center p-2 bg-[#332E4A] rounded-md">
+            <div className="ui-surface flex items-center rounded-xl bg-[#332E4A] p-2">
               <div className="h-6 w-6 rounded-full bg-emerald-400" />
               <span className="text-gray-300 text-sm pl-2">Plantations</span>
             </div>
-            <div className="flex items-center p-2 bg-[#332E4A] rounded-md">
+            <div className="ui-surface flex items-center rounded-xl bg-[#332E4A] p-2">
               <div className="h-6 w-6 rounded-full bg-blue-400" />
               <span className="text-gray-300 text-sm pl-2">Soil and Water Conservation</span>
             </div>
-            <div className="flex items-center p-2 bg-[#332E4A] rounded-md">
+            <div className="ui-surface flex items-center rounded-xl bg-[#332E4A] p-2">
               <div className="h-6 w-6 rounded-full bg-gray-600" />
               <span className="text-gray-300 text-sm pl-2">Community Assets</span>
             </div>
-            <div className="flex items-center p-2 bg-[#332E4A] rounded-md">
+            <div className="ui-surface flex items-center rounded-xl bg-[#332E4A] p-2">
               <div className="h-6 w-6 rounded-full bg-zinc-800" />
               <span className="text-gray-300 text-sm pl-2">Unidentified</span>
             </div>
@@ -202,4 +203,4 @@ const LeftSidebar = ({ onClose }) => {
   );
 };
 
-export default LeftSidebar;
\ No newline at end of file
+export default LeftSidebar;
diff --git a/src/components/landscape-explorer/sidebar/RightSidebar.jsx b/src/components/landscape-explorer/sidebar/RightSidebar.jsx
index d388f17f..39bb1be6 100644
--- a/src/components/landscape-explorer/sidebar/RightSidebar.jsx
+++ b/src/components/landscape-explorer/sidebar/RightSidebar.jsx
@@ -1,5 +1,7 @@
 import { useState, useEffect } from 'react';
 import SelectButton from '../../buttons/select_button';
+import Loader from '../../ui/Loader.jsx';
+import { toast } from "react-hot-toast";
 import { 
   downloadGeoJson, 
   downloadKml, 
@@ -125,9 +127,9 @@ const DownloadButton = ({
     }
   };
 
-  const buttonClasses = `px-2 py-1 bg-[#EDE9FE] text-[#8B5CF6] rounded-md text-xs 
-    hover:bg-[#DDD6FE] text-center transition-colors duration-200 
-    flex items-center justify-center ${isDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'} ${className}`;
+  const buttonClasses = `ui-pressable inline-flex items-center justify-center rounded-xl border border-violet-100 px-2.5 py-1.5 text-center text-xs font-medium
+    ${isDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:border-violet-200 hover:bg-[#DDD6FE]'}
+    bg-[#EDE9FE] text-[#8B5CF6] focus-visible:ring-0 ${className}`;
 
   return href ? (
     <a 
@@ -221,14 +223,16 @@ const handleStyleDownload = (layerName) => {
 const LayerItem = ({ layer, isSelected, onToggle, onDownload, isLayersFetched, isLoading }) => {
   
   return (
-    <div className="border-b border-gray-200 py-3">
-      <div className="flex items-center justify-between">
+    <div className="ui-fade-in border-b border-gray-100 py-3 last:border-b-0">
+      <div className="flex items-center justify-between gap-3">
         <span className="text-sm font-medium text-gray-700">{layer.label}</span>
         <button 
           onClick={() => {
             onToggle(layer.name);
           }}
-          className="text-xs"
+          className="ui-pressable rounded-full focus-visible:ring-0"
+          aria-pressed={isSelected}
+          aria-label={`${isSelected ? "Disable" : "Enable"} ${layer.label}`}
         >
           {isSelected 
             ? <ToggleOnIcon /> 
@@ -238,7 +242,7 @@ const LayerItem = ({ layer, isSelected, onToggle, onDownload, isLayersFetched, i
       
       {/* Download Options */}
       {(layer.hasGeojson || layer.hasKml || layer.hasGeoTiff) && isSelected && (
-        <div className="flex mt-2 space-x-2">
+        <div className="ui-fade-in mt-2 flex flex-wrap gap-2">
           {layer.hasGeojson && (
             <DownloadButton 
               name="GeoJSON"
@@ -279,7 +283,7 @@ const LayerItem = ({ layer, isSelected, onToggle, onDownload, isLayersFetched, i
 // LULC Selection Component
 const LulcSelector = ({ level, lulcYear, setLulcYear, onDownload, isLayersFetched, isLoading }) => {
   return (
-    <div className="bg-white rounded-md shadow-sm p-3 mb-3 border border-gray-100">
+    <div className="ui-surface ui-fade-in mb-3 rounded-2xl border border-gray-100 bg-white p-3 shadow-sm">
       <h4 className="text-sm font-medium text-gray-700 mb-2">{level.label}</h4>
       
       <div className="mb-3">
@@ -312,20 +316,20 @@ const LulcSelector = ({ level, lulcYear, setLulcYear, onDownload, isLayersFetche
 // Main action buttons
 const ActionButtons = ({ onDownloadExcel, isLoading, canFetchLayers }) => {
   return (
-    <div className="flex space-x-3 mb-2">
+    <div className="mb-2 flex space-x-3">
       <button 
         onClick={onDownloadExcel}
         disabled={isLoading || !canFetchLayers}
-        className={`flex items-center justify-center text-gray-700 bg-gray-100 border border-gray-300 py-2 px-4 focus:outline-none w-full ${
+        className={`ui-pressable flex w-full items-center justify-center rounded-xl border py-2.5 px-4 text-sm font-medium focus-visible:ring-0 ${
           !canFetchLayers
-            ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+            ? 'cursor-not-allowed border-gray-200 bg-gray-100 text-gray-400'
             : isLoading 
-              ? 'bg-gray-50 text-gray-400 cursor-not-allowed' 
-              : 'hover:bg-gray-200'
-        } rounded text-sm font-medium transition-colors duration-200`}
+              ? 'cursor-not-allowed border-gray-200 bg-gray-50 text-gray-400' 
+              : 'border-violet-100 bg-violet-50 text-violet-700 hover:bg-violet-100'
+        }`}
       >
-        <DownloadIcon />
-        <span className="ml-2">Download Excel</span>
+        {isLoading ? <Loader inline size="sm" label="" /> : <DownloadIcon />}
+        <span className="ml-2">{isLoading ? "Processing..." : "Download Excel"}</span>
       </button>
     </div>
   );
@@ -354,7 +358,7 @@ const RightSidebar = ({
   lulcYear3,
   setLulcYear3
 }) => {
-  const [selectedCategory, setSelectedCategory] = useState('basic');
+  const [selectedCategory, setSelectedCategory] = useState('land');
   const [isLayersFetched, setIsLayersFetched] = useState(false);
 
 
@@ -377,7 +381,6 @@ const RightSidebar = ({
   // Handle toggle clicklandLayersData
   const handleToggleClick = (filterName) => {
     // If there's a handleLayerToggle prop, call it
-    console.log(filterName)
     if (handleLayerToggle) {
       const currentState = toggledLayers?.[filterName] || false;
       handleLayerToggle(filterName, !currentState);
@@ -386,7 +389,7 @@ const RightSidebar = ({
   // Handle download click with proper URL formatting and direct download
   const handleDownloadClick = (filterName, format) => {
     if (!district || !block) {
-      alert('Please select a district and block first');
+      toast.error("Please select a district and block first.");
       return;
     }
 
@@ -500,7 +503,7 @@ const RightSidebar = ({
   // LULC Layer download handler
   const handleLulcLayerDownload = (level) => {
     if (!district || !block) {
-      alert('Please select a district and block first');
+      toast.error("Please select a district and block first.");
       return;
     }
     
@@ -515,7 +518,7 @@ const RightSidebar = ({
     }
     
     if (!yearValue) {
-      alert('Please select a year first');
+      toast.error("Please select a year first.");
       return;
     }
     
@@ -532,7 +535,7 @@ const RightSidebar = ({
   const handleImageLayerDownload = (layerName) => {
 
     if (!district || !block) {
-      alert('Please select a district and block first');
+      toast.error("Please select a district and block first.");
       return;
     }
     
@@ -561,7 +564,7 @@ const RightSidebar = ({
   // Handle Excel download with enhanced functionality
   const handleLocalExcelDownload = () => {
     if (!state || !district || !block) {
-      alert('Please select a state, district, and block first');
+      toast.error("Please select a state, district, and block first.");
       return;
     }
     
@@ -581,20 +584,26 @@ const RightSidebar = ({
 
 
   return (
-    <div className="w-[380px] flex flex-col h-full bg-white shadow-md relative">
-      <div className="flex justify-between items-center p-4 border-b border-gray-200">
+    <div className="ui-slide-in relative flex h-full w-[380px] flex-col border-l border-violet-100 bg-white/95 shadow-xl backdrop-blur">
+      <div className="flex items-center justify-between border-b border-gray-100 p-4">
         <h2 className="font-semibold text-gray-800 text-lg">Filters & Data</h2>
         <button 
           onClick={onClose}
-          className="text-gray-500 hover:text-gray-700"
+          className="ui-pressable rounded-full p-2 text-gray-500 hover:bg-violet-50 hover:text-gray-700 focus-visible:ring-0"
+          aria-label="Close filters and data panel"
         >
           <ChevronRightIcon />
         </button>
       </div>
       
       {/* Location Selection */}
-      <div className="p-3 border-b border-gray-200 bg-gray-50">
+      <div className="border-b border-gray-100 bg-gradient-to-b from-violet-50 to-white p-3">
         <div className="space-y-3">
+          {!statesData ? (
+            <div className="rounded-2xl border border-violet-100 bg-white p-3">
+              <Loader variant="skeleton" label="Loading locations..." />
+            </div>
+          ) : null}
           <div className="flex items-center gap-2">
             <label className="text-sm text-gray-600 min-w-[45px]">State</label>
             <SelectButton
@@ -602,7 +611,8 @@ const RightSidebar = ({
               stateData={statesData}
               handleItemSelect={handleItemSelect}
               setState={setState}
-              className="w-full border border-gray-200 rounded-md py-1.5 px-3 text-gray-800 bg-white"
+              className="w-full"
+              placeholder="Select State"
             />
           </div>
           <div className="flex items-center gap-2">
@@ -612,7 +622,8 @@ const RightSidebar = ({
               stateData={state !== null ? state.district : null}
               handleItemSelect={handleItemSelect}
               setState={setDistrict}
-              className="w-full border border-gray-200 rounded-md py-1.5 px-3 text-gray-800 bg-white"
+              className="w-full"
+              placeholder="Select District"
             />
           </div>
           <div className="flex items-center gap-2">
@@ -622,14 +633,15 @@ const RightSidebar = ({
               stateData={district !== null ? district.blocks : null}
               handleItemSelect={handleItemSelect}
               setState={setBlock}
-              className="w-full border border-gray-200 rounded-md py-1.5 px-3 text-gray-800 bg-white"
+              className="w-full"
+              placeholder="Select Tehsil"
             />
           </div>
         </div>
       </div>
 
       {/* Action Buttons - only Download Excel */}
-      <div className="px-3 py-1">
+      <div className="px-3 py-2">
         <ActionButtons 
           onDownloadExcel={handleLocalExcelDownload}
           isLoading={isLoading}
@@ -649,17 +661,20 @@ const RightSidebar = ({
       {state && district && block && (
         <>
           {/* Category Tabs as buttons in grid layout */}
-          <div className="px-3 pb-2 pt-0 border-b border-gray-200">
+          <div className="border-b border-gray-100 px-3 pb-2 pt-0">
             <div className="grid grid-cols-2 gap-2">
               {mainCategories.map(cat => (
                 <button
                   key={cat.id}
-                  className={`py-2 px-3 rounded-md text-sm ${
+                  className={`ui-pressable rounded-xl border px-3 py-2 text-sm focus-visible:ring-0 ${
                     selectedCategory === cat.id 
-                      ? 'bg-white border border-gray-300 text-gray-800 font-medium' 
-                      : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                      ? 'border-violet-200 bg-violet-50 text-violet-700 font-medium shadow-sm' 
+                      : 'border-transparent bg-gray-100 text-gray-600 hover:border-gray-200 hover:bg-gray-50'
                   }`}
-                  onClick={() => setSelectedCategory(cat.id)}
+                  onClick={() => {
+                    setSelectedCategory(cat.id);
+                    toast(`${cat.label} layers selected.`, { icon: "📂" });
+                  }}
                 >
                   {cat.label}
                 </button>
@@ -822,4 +837,4 @@ const RightSidebar = ({
   );
 };
 
-export default RightSidebar;
\ No newline at end of file
+export default RightSidebar;
diff --git a/src/components/landscape-explorer/utils/downloadHelper.js b/src/components/landscape-explorer/utils/downloadHelper.js
index 05439844..b2b6c304 100644
--- a/src/components/landscape-explorer/utils/downloadHelper.js
+++ b/src/components/landscape-explorer/utils/downloadHelper.js
@@ -1,6 +1,7 @@
 /**
  * Enhanced download helper functions with direct link approach for reliable downloads
  */
+import { toast } from "react-hot-toast";
 
 // For GeoJSON, we need to fetch the data and force a download as browsers tend to open JSON files
 export const downloadGeoJson = async (url, layerName) => {
@@ -28,9 +29,12 @@ export const downloadGeoJson = async (url, layerName) => {
       document.body.removeChild(link);
       URL.revokeObjectURL(objectUrl);
     }, 100);
+    toast.success(`${layerName} GeoJSON download started.`);
+    return true;
   } catch (error) {
     console.error('Error downloading GeoJSON:', error);
-    alert('Failed to download GeoJSON. Please try again.');
+    toast.error("Failed to download GeoJSON. Please try again.");
+    return false;
   }
 };
 
@@ -46,12 +50,16 @@ export const downloadKml = (url, layerName) => {
   setTimeout(() => {
     document.body.removeChild(link);
   }, 100);
+  toast.success(`${layerName} KML download started.`);
+  return true;
 };
 
 // For GeoTIFF files, window.open is usually the best approach
 export const downloadGeoTiff = (url, layerName) => {
   // GeoTIFF files are typically served by WCS services that require window.open
   window.open(url);
+  toast.success(`${layerName} GeoTIFF download opened in a new tab.`);
+  return true;
 };
 
 // For Excel downloads, use the direct fetch approach for blob data
@@ -84,10 +92,11 @@ export const downloadExcel = async (url, filename) => {
       URL.revokeObjectURL(objectUrl);
     }, 100);
     
+    toast.success("Excel download started.");
     return true;
   } catch (error) {
     console.error('Excel download error:', error);
-    alert('Failed to download Excel. Please try again.');
+    toast.error("Failed to download Excel. Please try again.");
     return false;
   }
-};
\ No newline at end of file
+};
diff --git a/src/components/ui/Loader.jsx b/src/components/ui/Loader.jsx
new file mode 100644
index 00000000..ea566d94
--- /dev/null
+++ b/src/components/ui/Loader.jsx
@@ -0,0 +1,47 @@
+const Loader = ({
+  label = "Loading...",
+  size = "md",
+  inline = false,
+  variant = "spinner",
+  className = "",
+}) => {
+  const sizeMap = {
+    sm: "h-4 w-4 border-2",
+    md: "h-6 w-6 border-2",
+    lg: "h-10 w-10 border-[3px]",
+  };
+
+  if (variant === "skeleton") {
+    return (
+      <div
+        className={`ui-fade-in ${inline ? "" : "w-full"} ${className}`}
+        aria-label={label}
+        aria-live="polite"
+        role="status"
+      >
+        <div className="space-y-2">
+          <div className="ui-skeleton h-4 rounded-full" />
+          <div className="ui-skeleton h-4 w-5/6 rounded-full" />
+          <div className="ui-skeleton h-4 w-2/3 rounded-full" />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`ui-fade-in ${inline ? "inline-flex" : "flex"} items-center justify-center gap-3 ${className}`}
+      aria-label={label}
+      aria-live="polite"
+      role="status"
+    >
+      <span
+        className={`${sizeMap[size]} animate-spin rounded-full border-violet-200 border-t-violet-600`}
+        aria-hidden="true"
+      />
+      {label ? <span className="text-sm text-gray-600">{label}</span> : null}
+    </div>
+  );
+};
+
+export default Loader;
diff --git a/src/components/ui/ToastHandler.jsx b/src/components/ui/ToastHandler.jsx
new file mode 100644
index 00000000..ce8735a5
--- /dev/null
+++ b/src/components/ui/ToastHandler.jsx
@@ -0,0 +1,40 @@
+import { Toaster } from "react-hot-toast";
+
+const toastOptions = {
+  duration: 3200,
+  style: {
+    borderRadius: "14px",
+    background: "#111827",
+    color: "#ffffff",
+    padding: "12px 14px",
+    boxShadow: "0 18px 40px rgba(15, 23, 42, 0.18)",
+  },
+  success: {
+    iconTheme: {
+      primary: "#22c55e",
+      secondary: "#ffffff",
+    },
+  },
+  error: {
+    iconTheme: {
+      primary: "#ef4444",
+      secondary: "#ffffff",
+    },
+  },
+};
+
+const ToastHandler = () => {
+  return (
+    <Toaster
+      position="top-right"
+      toastOptions={toastOptions}
+      containerStyle={{
+        top: 20,
+        right: 20,
+      }}
+      gutter={10}
+    />
+  );
+};
+
+export default ToastHandler;
diff --git a/src/components/water_project_dashboard.jsx b/src/components/water_project_dashboard.jsx
index 208285de..bc6f3417 100644
--- a/src/components/water_project_dashboard.jsx
+++ b/src/components/water_project_dashboard.jsx
@@ -24,6 +24,8 @@ import * as XLSX from "xlsx";
 import { saveAs } from "file-saver";
 import DownloadIcon from "@mui/icons-material/Download";
 
+
+
 const WaterProjectDashboard = () => {
   const [selectedWaterbody, setSelectedWaterbody] = useState(null);
   const [selectedFeature, setSelectedFeature] = useState(null);
@@ -67,6 +69,7 @@ const WaterProjectDashboard = () => {
     const tehsilZoi = useRecoilValue(tehsilZoiFeaturesAtom);
     const zoiFeatures = isTehsilMode ? tehsilZoi : projectZoi;
     const activeSelectedWaterbody = isTehsilMode ? selectedWaterbodyForTehsil : selectedWaterbody;
+    const [tehsilPageLoading, setTehsilPageLoading] = useState(typeParam === "tehsil");
 
     const [view, setView] = useState(
       isTehsilMode ? "map" : typeParam === "tehsil" ? "map" : "table"
@@ -113,6 +116,7 @@ const WaterProjectDashboard = () => {
       if (!districtParam || !blockParam) return;    
     
       const fetchTehsilData = async () => {
+        setTehsilPageLoading(true);
         const result = await getWaterbodyData({
           district: { label: districtParam },
           block: { label: blockParam },
@@ -130,6 +134,7 @@ const WaterProjectDashboard = () => {
           setMwsFromLocalStorage(allGeo);
           localStorage.setItem("matched_mws_features", JSON.stringify(allGeo));
         }
+        setTehsilPageLoading(false);
       };
       fetchTehsilData();
     }, [
@@ -220,16 +225,16 @@ const WaterProjectDashboard = () => {
     }
   }, [location.search]);
 
-  useEffect(() => {
-    if (!loadingData) return;
+  // useEffect(() => {
+  //   if (!loadingData) return;
   
-    const t = setTimeout(() => {
-      setTimeoutReached(true);
-      setLoadingData(false);   // loader off
-    }, 10000); // 10 seconds
+  //   const t = setTimeout(() => {
+  //     setTimeoutReached(true);
+  //     setLoadingData(false);   // loader off
+  //   }, 10000); // 10 seconds
   
-    return () => clearTimeout(t);
-  }, [loadingData]);
+  //   return () => clearTimeout(t);
+  // }, [loadingData]);
   
   const extractMwsUidList = (mwsUidString) => {
     if (!mwsUidString) return [];
@@ -1607,8 +1612,8 @@ const mwsSheet = XLSX.utils.json_to_sheet(mwsData, {
         </div>
   
         {/* LOADING OVERLAY */}
-        {isTehsilMode && loadingData && !activeSelectedWaterbody && (
-          <div className="fixed inset-0 bg-black/20 flex items-center justify-center z-[9999]">
+        {isTehsilMode && tehsilPageLoading && (
+                        <div className="fixed inset-0 bg-black/20 flex items-center justify-center z-[9999]">
             <div className="bg-white rounded-lg shadow-xl p-6 flex flex-col items-center gap-3">
               <CircularProgress />
               <p className="text-gray-700 font-medium">Loading waterbody data...</p>
diff --git a/src/index.css b/src/index.css
index 172121e7..2db8d533 100755
--- a/src/index.css
+++ b/src/index.css
@@ -20,6 +20,125 @@
 :root {
   --browser-zoom: 1;
   --inv-zoom: calc(1 / var(--browser-zoom));
+  --motion-duration-fast: 160ms;
+  --motion-duration-base: 220ms;
+  --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --focus-ring: 0 0 0 3px rgba(139, 92, 246, 0.2);
+}
+
+body {
+  color: #111827;
+  background: linear-gradient(180deg, #faf8ff 0%, #ffffff 24%);
+}
+
+button,
+a,
+input,
+select,
+[role="button"],
+[role="option"],
+.react-select__control {
+  transition:
+    background-color var(--motion-duration-fast) var(--motion-ease),
+    border-color var(--motion-duration-fast) var(--motion-ease),
+    color var(--motion-duration-fast) var(--motion-ease),
+    box-shadow var(--motion-duration-fast) var(--motion-ease),
+    transform var(--motion-duration-fast) var(--motion-ease),
+    opacity var(--motion-duration-fast) var(--motion-ease);
+}
+
+:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.ui-surface {
+  transition:
+    box-shadow var(--motion-duration-base) var(--motion-ease),
+    transform var(--motion-duration-base) var(--motion-ease),
+    border-color var(--motion-duration-fast) var(--motion-ease);
+}
+
+.ui-surface:hover {
+  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
+}
+
+.ui-pressable:hover {
+  transform: translateY(-1px) scale(1.01);
+}
+
+.ui-pressable:active {
+  transform: scale(0.98);
+}
+
+.ui-fade-in {
+  animation: uiFadeIn var(--motion-duration-base) var(--motion-ease);
+}
+
+.ui-slide-in {
+  animation: uiSlideIn var(--motion-duration-base) var(--motion-ease);
+}
+
+.ui-skeleton {
+  position: relative;
+  overflow: hidden;
+  background: #ede9fe;
+}
+
+.ui-skeleton::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
+  animation: uiShimmer 1.4s infinite;
+}
+
+@keyframes uiFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes uiSlideIn {
+  from {
+    opacity: 0;
+    transform: translateX(12px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes uiShimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: 1ms !important;
+  }
+
+  .ui-pressable:hover,
+  .ui-pressable:active,
+  .ui-surface:hover {
+    transform: none !important;
+  }
 }
 
 .legend-container {
@@ -118,4 +237,4 @@
 
 .chart-wrapper canvas {
   font-size: inherit !important;
-}
\ No newline at end of file
+}
diff --git a/src/pages/LandscapeExplorer.jsx b/src/pages/LandscapeExplorer.jsx
index 52cda349..03d0f362 100644
--- a/src/pages/LandscapeExplorer.jsx
+++ b/src/pages/LandscapeExplorer.jsx
@@ -3,6 +3,7 @@ import Map from "../components/landscape-explorer/map/Map.jsx";
 import LeftSidebar from "../components/landscape-explorer/sidebar/LeftSidebar.jsx";
 import RightSidebar from "../components/landscape-explorer/sidebar/RightSidebar.jsx";
 import { useRecoilState } from "recoil";
+import { toast } from "react-hot-toast";
 import {
   stateDataAtom,
   stateAtom,
@@ -19,11 +20,16 @@ import {
   initializeAnalytics,
 } from "../services/analytics";
 import LandingNavbar from "../components/landing_navbar.jsx";
+import Loader from "../components/ui/Loader.jsx";
+import locations from "../locations.json";
 
 const LandscapeExplorer = () => {
   const [showLeftSidebar, setShowLeftSidebar] = useState(false);
   const [showRightSidebar, setShowRightSidebar] = useState(true);
   const [isLoading, setIsLoading] = useState(false);
+  const [loadingMessage, setLoadingMessage] = useState("Loading map data...");
+  const [isFetchingLocations, setIsFetchingLocations] = useState(false);
+  const pendingFeedbackRef = useRef(null);
 
   // Recoil state
   const [statesData, setStatesData] = useRecoilState(stateDataAtom);
@@ -98,6 +104,7 @@ const LandscapeExplorer = () => {
       // Reset all dependent state values
       if (value) {
         trackEvent("Location", "select_state", value.label);
+        toast.success(`State selected: ${value.label}`);
       }
       setDistrict(null);
       setBlock(null);
@@ -107,6 +114,7 @@ const LandscapeExplorer = () => {
       // Reset block and filters when district changes
       if (value) {
         trackEvent("Location", "select_district", value.label);
+        toast.success(`District selected: ${value.label}`);
       }
       setBlock(null);
       resetAllStates();
@@ -117,19 +125,17 @@ const LandscapeExplorer = () => {
       // When block is selected, enable fetch button and prepare layers automatically
       setCanFetchLayers(true);
       trackEvent("Location", "select_tehsil", value.label);
-      // Auto-prepare layers instead of requiring Fetch Layers button
-      setTimeout(() => {
-        if (mapRef.current && mapRef.current.prepareLayers) {
-          setIsLoading(true);
-          mapRef.current.prepareLayers();
-          setLayersReady(true);
-          setToggledLayers((prev) => ({
-            ...prev,
-            demographics: true,
-          }));
-          setIsLoading(false);
-        }
-      }, 100);
+      toast.success(`Tehsil selected: ${value.label}`);
+      toast("Preparing map layers for the selected area...", {
+        icon: "🗺️",
+      });
+      pendingFeedbackRef.current = "layers";
+      setLoadingMessage("Loading map layers...");
+      setLayersReady(true);
+      setToggledLayers((prev) => ({
+        ...prev,
+        demographics: true,
+      }));
     } else {
       // Standard case for other setters
       setter(value);
@@ -189,6 +195,9 @@ const LandscapeExplorer = () => {
       ...prev,
       [layerName]: isVisible,
     }));
+    toast(isVisible ? `${layerName.replace(/_/g, " ")} enabled` : `${layerName.replace(/_/g, " ")} hidden`, {
+      icon: isVisible ? "✨" : "🫥",
+    });
 
     // Then update the map with a slight delay
     setTimeout(() => {
@@ -201,7 +210,7 @@ const LandscapeExplorer = () => {
   // Handle GeoJSON download
   const handleGeoJsonLayers = (layerName) => {
     if (!district || !block) {
-      alert("Please select a district and block first");
+      toast.error("Please select a district and block first.");
       return;
     }
 
@@ -246,7 +255,7 @@ const LandscapeExplorer = () => {
   // Handle KML download
   const handleKMLLayers = (layerName) => {
     if (!district || !block) {
-      alert("Please select a district and block first");
+      toast.error("Please select a district and block first.");
       return;
     }
 
@@ -291,10 +300,12 @@ const LandscapeExplorer = () => {
   // Handle Excel download
   const handleExcelDownload = () => {
     if (!district || !block) {
-      alert("Please select a district and block first");
+      toast.error("Please select a district and block first.");
       return;
     }
 
+    pendingFeedbackRef.current = "excel";
+    setLoadingMessage("Preparing Excel download...");
     setIsLoading(true);
 
     // Using the exact URL format from the original implementation
@@ -324,8 +335,9 @@ const LandscapeExplorer = () => {
       })
       .catch((error) => {
         console.error("Error downloading Excel:", error);
+        pendingFeedbackRef.current = null;
         setIsLoading(false);
-        alert("Failed to download Excel data. Please try again.");
+        toast.error("Failed to download Excel data. Please try again.");
       });
   };
 
@@ -339,10 +351,39 @@ const LandscapeExplorer = () => {
     initializeAnalytics();
     trackPageView("/download_layers");
     if (statesData === null) {
-      getStates().then((data) => setStatesData(data));
+      setIsFetchingLocations(true);
+      setLoadingMessage("Loading available locations...");
+      pendingFeedbackRef.current = "locations";
+      getStates()
+        .then((data) => {
+          setStatesData(data);
+          if (data === locations) {
+            toast("Using cached MWS-derived location data.", {
+              icon: "⚠️",
+            });
+          }
+        })
+        .catch(() => {
+          toast.error("Failed to load locations.");
+        })
+        .finally(() => {
+          setIsFetchingLocations(false);
+        });
     }
   }, [statesData, setStatesData]);
 
+  useEffect(() => {
+    if (isLoading) return;
+
+    if (pendingFeedbackRef.current === "layers" && block) {
+      toast.success(`Map layers loaded for ${block.label}.`);
+      pendingFeedbackRef.current = null;
+    } else if (pendingFeedbackRef.current === "excel") {
+      toast.success("Excel export is ready.");
+      pendingFeedbackRef.current = null;
+    }
+  }, [isLoading, block]);
+
   // Handle map-initiated layer toggle updates
   const handleMapToggle = (layerName, isVisible) => {
     // Set the recursion prevention flag
@@ -379,11 +420,16 @@ const LandscapeExplorer = () => {
         )}
 
         <div className="flex-1 relative p-2">
+          {isFetchingLocations && (
+            <div className="absolute inset-x-6 top-6 z-20 rounded-2xl border border-violet-100 bg-white/95 px-4 py-3 shadow-lg backdrop-blur ui-fade-in">
+              <Loader inline label="Loading available locations..." size="sm" />
+            </div>
+          )}
           {!showLeftSidebar && (
             <button
               onClick={() => setShowLeftSidebar(true)}
-              className="absolute top-4 left-4 z-10 bg-[#EDE9FE] p-2 rounded-md shadow-md text-[#8B5CF6]
-              hover:bg-[#8B5CF6] hover:text-white transition-colors"
+              className="ui-pressable absolute top-4 left-4 z-10 rounded-xl border border-violet-100 bg-[#F5F3FF] p-2 text-[#7C3AED] shadow-md hover:bg-[#8B5CF6] hover:text-white focus-visible:ring-0"
+              aria-label="Open information panel"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -404,6 +450,7 @@ const LandscapeExplorer = () => {
             ref={setMapRef}
             isLoading={isLoading}
             setIsLoading={setIsLoading}
+            loadingMessage={loadingMessage}
             state={state}
             district={district}
             block={block}
@@ -450,10 +497,10 @@ const LandscapeExplorer = () => {
         )}
 
         {!showRightSidebar && (
-          <div className="absolute top-20 right-0 z-10 bg-white p-2 px-3 rounded-l-md shadow-md hover:bg-gray-100 transition-colors flex items-center">
+          <div className="ui-slide-in absolute top-20 right-0 z-10 flex items-center rounded-l-2xl border border-r-0 border-violet-100 bg-white/95 p-2 px-3 shadow-lg backdrop-blur hover:bg-violet-50">
             <button
               onClick={() => setShowRightSidebar(true)}
-              className="flex items-center"
+              className="ui-pressable flex items-center rounded-xl focus-visible:ring-0"
               aria-label="Open filters panel"
             >
               <span className="font-medium text-gray-700 mr-2">
diff --git a/src/pages/kyl_dashboard.jsx b/src/pages/kyl_dashboard.jsx
index ebb1c628..ac1695ff 100644
--- a/src/pages/kyl_dashboard.jsx
+++ b/src/pages/kyl_dashboard.jsx
@@ -214,6 +214,7 @@ const transformName = (name) => {
 
     processSelections(filterSelections.selectedMWSValues, "MWS");
     processSelections(filterSelections.selectedVillageValues, "Village");
+    processSelections(filterSelections.selectedWaterbodyValues, "Waterbody");
 
     // Convert grouped object back to array
     Object.values(groupedSelections).forEach(group => {
@@ -282,6 +283,8 @@ const transformName = (name) => {
 
   // Filter selection handlers
   const handleFilterSelection = (name, option, isChecked) => {
+    console.log("Filter Clicked:", name, option, isChecked);
+console.log("Current filterSelections:", filterSelections);
     const sourceType = determineFilterSource(name);
     option = {
       ...option,
@@ -350,6 +353,30 @@ const transformName = (name) => {
           },
         };
       });
+    } else if (sourceType.name === "Waterbody") {
+      if (!showWB) {
+        toast.error("Please enable 'Show Waterbodies' to apply waterbody filters.");
+        return;
+      }
+      setFilterSelections((prev) => {
+        const currentArray = prev.selectedWaterbodyValues?.[name] || [];
+    
+        let newArray;
+        if (isChecked) {
+          const exists = currentArray.some(item => item.label === option.label);
+          newArray = exists ? currentArray : [...currentArray, option];
+        } else {
+          newArray = currentArray.filter(item => item.label !== option.label);
+        }
+    
+        return {
+          ...prev,
+          selectedWaterbodyValues: {
+            ...(prev.selectedWaterbodyValues || {}),
+            [name]: newArray.length > 0 ? newArray : null,
+          },
+        };
+      });
     }
   };
 
@@ -788,7 +815,7 @@ const transformName = (name) => {
         }
       },
     });
-
+    arrowLayer.setZIndex(9999);
     arrowLayer.setVisible(false);
     mapRef.current.addLayer(arrowLayer);
     mwsArrowLayerRef.current = arrowLayer;
@@ -1132,7 +1159,8 @@ const transformName = (name) => {
         [filter.name]: false,
       }));
       //setFiltersEnabled(true);
-    } else if (currentLayer.length === 0) {
+    } 
+    else if (currentLayer.length === 0) {
       let layerRef = [];
       mapRef.current.removeLayer(mwsLayerRef.current);
       mapRef.current.removeLayer(boundaryLayerRef.current);
@@ -1392,6 +1420,7 @@ const transformName = (name) => {
     setFilterSelections({
       selectedMWSValues: {},
       selectedVillageValues: {},
+      selectedWaterbodyValues:{}
     });
 
     setIndicatorType(null);
@@ -2198,6 +2227,48 @@ const transformName = (name) => {
     return result;
   }, [selectedMWS, dataJson, villageJson]);
 
+  // this is Mann–Kendall trend statistic (S)
+  function calculateTrend(values) {
+    let S = 0;
+  
+    for (let i = 0; i < values.length - 1; i++) {
+      for (let j = i + 1; j < values.length; j++) {
+        if (values[j] > values[i]) S++;
+        else if (values[j] < values[i]) S--;
+      }
+    }
+  
+    if (S > 0) return 1;   // increasing
+    if (S < 0) return -1;  // decreasing
+    return 0;              // steady
+  }
+
+  //This is sen's slope
+  // function calculateTrend(values) {
+  //   const slopes = [];
+  
+  //   for (let i = 0; i < values.length - 1; i++) {
+  //     for (let j = i + 1; j < values.length; j++) {
+  //       slopes.push((values[j] - values[i]) / (j - i));
+  //     }
+  //   }
+  
+  //   // sort slopes
+  //   slopes.sort((a, b) => a - b);
+  
+  //   // median slope
+  //   const mid = Math.floor(slopes.length / 2);
+  //   const senSlope =
+  //     slopes.length % 2
+  //       ? slopes[mid]
+  //       : (slopes[mid - 1] + slopes[mid]) / 2;
+  
+  //   if (senSlope > 0) return 1;   // increasing
+  //   if (senSlope < 0) return -1;  // decreasing
+  //   return 0;                     // steady
+  // }
+
+
   useEffect(() => {
     if (!waterbodiesLayerRef.current || !mwsLayerRef.current) return;
 
@@ -2245,6 +2316,77 @@ const transformName = (name) => {
     }
   }, [selectedMWS, showWB]);
 
+  useEffect(() => {
+    if (!waterbodiesLayerRef.current) return;
+  
+    const wbSource = waterbodiesLayerRef.current.getSource();
+    const wbFeatures = wbSource.getFeatures();
+
+console.log("Waterbody Features:", wbFeatures);
+console.log("First Waterbody Props:", wbFeatures[0]?.getProperties());
+  
+    if (!wbFeatures.length) return;
+  
+    const wbFilters = filterSelections.selectedWaterbodyValues || {};
+    const filterKeys = Object.keys(wbFilters).filter(k => wbFilters[k]);
+  
+    if (filterKeys.length === 0) {
+      wbFeatures.forEach(f => f.setStyle(undefined));
+      return;
+    }
+  
+    wbFeatures.forEach((feature) => {
+      const props = feature.getProperties();
+      let matches = true;
+  
+      filterKeys.forEach((filterName) => {
+        const selectedOptions = wbFilters[filterName];
+        if (!selectedOptions) return;
+  
+        if (filterName === "waterbody_size") {
+          const area = Number(
+            props.area_ored ??
+            props.AREA_HA ??
+            props.area ??
+            props.Area ??
+            0
+          );
+  
+          const pass = selectedOptions.some(opt =>
+            area >= opt.value.lower && area <= opt.value.upper
+          );
+  
+          if (!pass) matches = false;
+        }
+  
+        if (filterName === "drainage_line") {
+          const value = Number(props.on_drainage_line ?? 0);
+        
+          const pass = selectedOptions.some(opt => value === opt.value);
+        
+          if (!pass) matches = false;
+        }
+  
+        if (filterName === "surface_water_trend") {
+
+          const areas = Object.keys(props)
+            .filter(key => key.startsWith("area_") && key !== "area_ored")
+            .sort()
+            .map(key => Number(props[key] ?? 0));
+        
+          const trend = calculateTrend(areas);
+        
+          const pass = selectedOptions.some(opt => trend === opt.value);
+        
+          if (!pass) matches = false;
+        }
+      });
+  
+      feature.setStyle(matches ? undefined : new Style({}));
+    });
+  
+  }, [filterSelections.selectedWaterbodyValues, showWB]);
+
   return (
     <div className="min-h-screenbg-white flex flex-col">
       <Toaster />
diff --git a/src/store/locationStore.jsx b/src/store/locationStore.jsx
index 0f2d9b84..71a85de3 100644
--- a/src/store/locationStore.jsx
+++ b/src/store/locationStore.jsx
@@ -27,6 +27,7 @@ export const filterSelectionsAtom = atom({
   default: {
     selectedMWSValues: {}, // { filterName: [selectedOptions] }
     selectedVillageValues: {}, // { filterName: [selectedOptions] }
+    selectedWaterbodyValues:{}
   },
 });