diff --git a/src/components/contextual/card.tsx b/src/components/contextual/card.tsx
index 04008a5b2..582aa12ba 100644
--- a/src/components/contextual/card.tsx
+++ b/src/components/contextual/card.tsx
@@ -14,7 +14,6 @@ import type { BasemapId } from 'containers/datasets/contextual-layers/basemaps';
 
 import { Checkbox, CheckboxIndicator } from 'components/checkbox';
 import Icon from 'components/icon';
-import DateSelect from 'components/planet-date-select';
 import Info from 'components/widget-controls/info';
 import { WIDGET_CARD_WRAPPER_STYLE } from 'styles/widgets';
 import type { ContextualBasemapsId, MosaicId, WidgetSlugType } from 'types/widget';
@@ -48,14 +47,7 @@ type CardBasemapContextualProps = {
   hasDropdown?: boolean;
 };
 
-const CardBasemapContextual = ({
-  id,
-  mosaic_id,
-  type,
-  name,
-  description,
-  hasDropdown,
-}: CardBasemapContextualProps) => {
+const CardBasemapContextual = ({ id, type, name, description }: CardBasemapContextualProps) => {
   const [basemapStored, setBasemap] = useRecoilState(basemapAtom);
   const [basemapContextualSelected, setBasemapContextual] = useRecoilState(basemapContextualAtom);
 
@@ -120,11 +112,6 @@ const CardBasemapContextual = ({
           {description && <p>{description}</p>}
         </div>
       </div>
-      {/* {isActive && hasDropdown && (
-        <div className="pb-4">
-          <DateSelect mosaic_id={mosaic_id} id={id} />
-        </div>
-      )} */}
     </div>
   );
 };
diff --git a/src/components/contextual/contextual-basemaps.tsx b/src/components/contextual/contextual-basemaps.tsx
index aa6d99900..84f090fb4 100644
--- a/src/components/contextual/contextual-basemaps.tsx
+++ b/src/components/contextual/contextual-basemaps.tsx
@@ -1,76 +1,77 @@
 import { useCallback, useState } from 'react';
+import type { SetStateAction } from 'react';
 
 import cn from 'lib/classnames';
 
 import { activeLayersAtom } from 'store/layers';
 
-import { PiCircleFill } from 'react-icons/pi';
 import { useRecoilState } from 'recoil';
 
 import { CONTEXTUAL_LAYERS_PLANET_SERIES_ATTRIBUTES } from 'containers/datasets/contextual-layers/constants';
 
-import { Checkbox, CheckboxIndicator } from 'components/checkbox';
 import DateSelect from 'components/planet-date-select';
+import RadioGroup from 'components/radio-group';
+import RadioGroupItem from 'components/radio-group/radio-group-item';
 import type { ActiveLayers } from 'types/layers';
 import type { ContextualBasemapsId } from 'types/widget';
 
 const BasemapsMapSettings = () => {
   const [activeLayers, setActiveLayers] = useRecoilState(activeLayersAtom);
-  const defaultActive = activeLayers.find((layer) => layer.id.includes('planet'))?.id || null;
+  const defaultActive = activeLayers.find((layer) => layer.id.includes('planet'))?.id || 'no-layer';
   const [isActive, setIsActive] = useState(defaultActive);
 
   const handleClick = useCallback(
     (id) => {
-      if (isActive === id) {
-        setIsActive(null);
-      } else setIsActive(id);
-
+      setIsActive(id);
+      const noPlanetLayers = activeLayers.filter((w) => !w.id.includes('planet_medres'));
       const layersUpdate =
-        !!activeLayers.find((layer) => layer.id === id) && isActive === null
-          ? activeLayers.filter((w) => w.id !== id)
+        id === 'no-layer'
+          ? noPlanetLayers
           : ([
               {
                 id: id as ContextualBasemapsId,
                 opacity: '1',
                 visibility: 'visible',
               },
-              ...activeLayers,
+              ...noPlanetLayers,
             ] as ActiveLayers[]);
-
       setActiveLayers(layersUpdate);
     },
-    [activeLayers, setActiveLayers, isActive]
+    [activeLayers, setActiveLayers]
   );
 
   return (
-    <div className="relative flex flex-col pb-4 font-light text-black/85">
-      <>
+    <div className="relative flex flex-col text-sm text-black/85">
+      <RadioGroup onValueChange={handleClick}>
+        <div className="flex space-x-4">
+          <RadioGroupItem
+            option={{ value: 'no-layer', label: 'No layer' }}
+            data-testid='"no-layer"'
+          />
+          <label
+            className={cn({
+              'font-semibold text-brand-800': isActive === 'no-layer',
+            })}
+            htmlFor="No layer"
+          >
+            No layer
+          </label>
+        </div>
+
         {CONTEXTUAL_LAYERS_PLANET_SERIES_ATTRIBUTES.map(({ id, name, mosaic_id }) => {
           return (
-            <div key={id} className="ml-0.5 flex flex-col">
-              <div className="flex items-center space-x-4 py-1 font-light text-black/85">
-                <Checkbox
-                  id={id}
+            <div key={id} className="space-y-2">
+              <div className="flex space-x-4">
+                <RadioGroupItem option={{ value: id, label: name }} data-testid={id} />
+                <label
                   className={cn({
-                    'flex h-3 w-3 shrink-0 items-center justify-center rounded-full border border-black/85':
-                      true,
-                    'border-4 border-brand-800': id === isActive,
+                    'font-semibold text-brand-800': isActive === id,
                   })}
-                  onCheckedChange={() => {
-                    handleClick(id);
-                  }}
-                  data-testid={id}
-                  checked={!!activeLayers.find((layer) => layer.id === id) && isActive === id}
+                  htmlFor={id}
                 >
-                  <CheckboxIndicator>
-                    <PiCircleFill className="h-1.5 w-1.5 rounded-full fill-white" />
-                  </CheckboxIndicator>
-                </Checkbox>
-                <label className="font-sm m-0 text-sm font-semibold text-brand-800" htmlFor={id}>
                   {name}
                 </label>
               </div>
-
               {isActive === id && (
                 <div className="ml-6">
                   <DateSelect
@@ -84,7 +85,7 @@ const BasemapsMapSettings = () => {
             </div>
           );
         })}
-      </>
+      </RadioGroup>
     </div>
   );
 };
diff --git a/src/components/highlighted-places/index.tsx b/src/components/highlighted-places/index.tsx
index 691177668..49728fd7a 100644
--- a/src/components/highlighted-places/index.tsx
+++ b/src/components/highlighted-places/index.tsx
@@ -22,7 +22,7 @@ const HighlightedPlaces = ({ onSelectLocation }: { onSelectLocation: () => void
 
   const {
     data: { location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
 
   const isHighlightedPlace = Object.values(HIGHLIGHTED_PLACES).includes(location_id);
 
diff --git a/src/components/radio-group/radio-group-item/index.tsx b/src/components/radio-group/radio-group-item/index.tsx
index 1dfaefcfd..29362bb97 100644
--- a/src/components/radio-group/radio-group-item/index.tsx
+++ b/src/components/radio-group/radio-group-item/index.tsx
@@ -17,12 +17,9 @@ const RadioGroupItem = ({ option, className }: { option: RadioOption; className?
       id={option.value}
     >
       <RadioGroup.Indicator className="flex items-center justify-center">
-        <CgRadioCheck className="h-2.5 w-2.5 border-red-500 fill-current text-current" />
+        <CgRadioCheck className="h-2.5 w-2.5 text-brand-800" />
       </RadioGroup.Indicator>
     </RadioGroup.Item>
-    <label className="font-sm m-0 text-sm font-semibold text-brand-800" htmlFor={option.value}>
-      {option.label}
-    </label>
   </div>
 );
 
diff --git a/src/containers/datasets/alerts/hooks.tsx b/src/containers/datasets/alerts/hooks.tsx
index 347a5d71f..f391acf63 100644
--- a/src/containers/datasets/alerts/hooks.tsx
+++ b/src/containers/datasets/alerts/hooks.tsx
@@ -139,7 +139,7 @@ export function useAlerts<T>(
   const id = queryParams?.[1];
   const {
     data: { location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
   const { enabled: isAnalysisRunning } = useRecoilValue(analysisAtom);
 
   const fetchAlerts = () =>
@@ -438,7 +438,7 @@ export function useSources(): SourceProps[] {
   const id = queryParams?.[1];
   const {
     data: { location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
 
   return [
     {
diff --git a/src/containers/datasets/biomass/hooks.tsx b/src/containers/datasets/biomass/hooks.tsx
index 7b7fdc8c6..492bcc55e 100644
--- a/src/containers/datasets/biomass/hooks.tsx
+++ b/src/containers/datasets/biomass/hooks.tsx
@@ -56,7 +56,7 @@ export function useMangroveBiomass(
   const id = queryParams?.[1];
   const {
     data: { name: location, id: currentLocation, location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
 
   const geojson = customGeojson || uploadedGeojson;
 
diff --git a/src/containers/datasets/blue-carbon/hooks.tsx b/src/containers/datasets/blue-carbon/hooks.tsx
index 7de1c04f6..5594a1ff9 100644
--- a/src/containers/datasets/blue-carbon/hooks.tsx
+++ b/src/containers/datasets/blue-carbon/hooks.tsx
@@ -53,7 +53,7 @@ export function useMangroveBlueCarbon(
 
   const {
     data: { name: location, id: currentLocation, location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
   const { customGeojson } = useRecoilValue(drawingToolAtom);
   const { uploadedGeojson } = useRecoilValue(drawingUploadToolAtom);
   const { enabled: isAnalysisEnabled } = useRecoilValue(analysisAtom);
diff --git a/src/containers/datasets/carbon-market-potential/hooks.tsx b/src/containers/datasets/carbon-market-potential/hooks.tsx
index eb32c3eb7..df52a2075 100644
--- a/src/containers/datasets/carbon-market-potential/hooks.tsx
+++ b/src/containers/datasets/carbon-market-potential/hooks.tsx
@@ -59,7 +59,7 @@ export function useCarbonMarketPotential(
   const id = queryParams?.[1];
   const {
     data: { name: location, id: currentLocation, location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
 
   const { units: unit, label, ...rest } = params;
   const unitLabel = units.find((u) => u.value === unit)?.label;
diff --git a/src/containers/datasets/drivers-change/hooks.tsx b/src/containers/datasets/drivers-change/hooks.tsx
index 1ad430d1a..a67741e23 100644
--- a/src/containers/datasets/drivers-change/hooks.tsx
+++ b/src/containers/datasets/drivers-change/hooks.tsx
@@ -39,7 +39,7 @@ export function useMangroveDriversChange(
   const id = queryParams?.[1];
   const {
     data: { name: location, id: currentLocation },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
 
   const fetchMangroveDriversChange = () =>
     API.request({
diff --git a/src/containers/datasets/emissions-mitigation/hooks.tsx b/src/containers/datasets/emissions-mitigation/hooks.tsx
index 87c456eab..fbdb1d49e 100644
--- a/src/containers/datasets/emissions-mitigation/hooks.tsx
+++ b/src/containers/datasets/emissions-mitigation/hooks.tsx
@@ -121,7 +121,7 @@ export function useMangroveEmissionsMitigation(
   const id = queryParams?.[1];
   const {
     data: { name: location, id: currentLocation, location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
   const { filteredIndicators, ...rest } = params;
 
   const fetchMangroveEmissionsMitigation = () =>
diff --git a/src/containers/datasets/fisheries/hooks.tsx b/src/containers/datasets/fisheries/hooks.tsx
index 40b82ddf0..3902b0708 100644
--- a/src/containers/datasets/fisheries/hooks.tsx
+++ b/src/containers/datasets/fisheries/hooks.tsx
@@ -61,7 +61,7 @@ export function useMangroveFisheries(
   const id = queryParams?.[1];
   const {
     data: { name: location, id: currentLocation, location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
 
   const fetchMangroveFisheries = () =>
     API.request({
diff --git a/src/containers/datasets/flood-protection/coastal-protection/index.tsx b/src/containers/datasets/flood-protection/coastal-protection/index.tsx
index f6634f15f..473f8a79b 100644
--- a/src/containers/datasets/flood-protection/coastal-protection/index.tsx
+++ b/src/containers/datasets/flood-protection/coastal-protection/index.tsx
@@ -15,7 +15,7 @@ const CoastalProtection = () => {
   const id = queryParams?.[1];
   const {
     data: { name: location },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
   return (
     <div
       className={cn({
diff --git a/src/containers/datasets/flood-protection/hooks.tsx b/src/containers/datasets/flood-protection/hooks.tsx
index 2b5d5b81c..8df9da1a3 100644
--- a/src/containers/datasets/flood-protection/hooks.tsx
+++ b/src/containers/datasets/flood-protection/hooks.tsx
@@ -63,7 +63,7 @@ export function useMangrovesFloodProtection(
   const id = queryParams?.[1];
   const {
     data: { name: location, id: currentLocation, location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
 
   const selectedPeriod = useMemo(() => period || 'annual', [period]);
   const getBars = useCallback(
diff --git a/src/containers/datasets/habitat-extent/hooks.tsx b/src/containers/datasets/habitat-extent/hooks.tsx
index fc06329cf..c5b0d552e 100644
--- a/src/containers/datasets/habitat-extent/hooks.tsx
+++ b/src/containers/datasets/habitat-extent/hooks.tsx
@@ -43,7 +43,7 @@ export function useMangroveHabitatExtent(
   const id = queryParams?.[1];
   const {
     data: { name: location, id: currentLocation, location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
   const { enabled: isAnalysisEnabled } = useRecoilValue(analysisAtom);
   const { customGeojson } = useRecoilValue(drawingToolAtom);
   const { uploadedGeojson } = useRecoilValue(drawingUploadToolAtom);
diff --git a/src/containers/datasets/height/hooks.tsx b/src/containers/datasets/height/hooks.tsx
index d374c81eb..a09bfc033 100644
--- a/src/containers/datasets/height/hooks.tsx
+++ b/src/containers/datasets/height/hooks.tsx
@@ -86,7 +86,7 @@ export function useMangroveHeight(
   const id = queryParams?.[1];
   const {
     data: { name: location, id: currentLocation, location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
   const { customGeojson } = useRecoilValue(drawingToolAtom);
   const { uploadedGeojson } = useRecoilValue(drawingUploadToolAtom);
   const { enabled: isAnalysisEnabled } = useRecoilValue(analysisAtom);
diff --git a/src/containers/datasets/international-status/climate-watch/hooks.tsx b/src/containers/datasets/international-status/climate-watch/hooks.tsx
index 3b90ce872..5fbf07e08 100644
--- a/src/containers/datasets/international-status/climate-watch/hooks.tsx
+++ b/src/containers/datasets/international-status/climate-watch/hooks.tsx
@@ -25,7 +25,7 @@ export function useClimateWatchNDCS(
   const id = queryParams?.[1];
   const {
     data: { iso },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
 
   const fetchClimateWatchNDCS = () =>
     ClimateWatchAPI.request({
@@ -71,7 +71,7 @@ export function useClimateWatchNDCSCountriesDocs(
   const id = queryParams?.[1];
   const {
     data: { iso },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
 
   const fetchClimateWatchNDCS = () =>
     ClimateWatchAPI.request({
diff --git a/src/containers/datasets/international-status/frel-ipcc/hooks.tsx b/src/containers/datasets/international-status/frel-ipcc/hooks.tsx
index d79643adc..2fdd81297 100644
--- a/src/containers/datasets/international-status/frel-ipcc/hooks.tsx
+++ b/src/containers/datasets/international-status/frel-ipcc/hooks.tsx
@@ -27,7 +27,7 @@ export function useMangroveInternationalStatus(
   const id = queryParams?.[1];
   const {
     data: { name: location, id: currentLocation, location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
 
   const fetchMangroveInternationalStatus = () =>
     API.request({
diff --git a/src/containers/datasets/iucn-ecoregion/hooks.tsx b/src/containers/datasets/iucn-ecoregion/hooks.tsx
index 1673a7290..897dc604d 100644
--- a/src/containers/datasets/iucn-ecoregion/hooks.tsx
+++ b/src/containers/datasets/iucn-ecoregion/hooks.tsx
@@ -139,7 +139,7 @@ export function useMangroveEcoregions(
 
 export function useSource(): SourceProps {
   return {
-    id: 'mangrove-iucn-ecoregion-layer',
+    id: 'mangrove-iucn-ecoregion',
     type: 'vector',
     url: 'mapbox://globalmangrovewatch.20gft2fx',
   };
diff --git a/src/containers/datasets/locations/hooks.tsx b/src/containers/datasets/locations/hooks.tsx
index 4a2233b30..239c454f5 100644
--- a/src/containers/datasets/locations/hooks.tsx
+++ b/src/containers/datasets/locations/hooks.tsx
@@ -40,8 +40,8 @@ export function useLocations<T = DataResponse>(
 }
 
 export function useLocation(
-  locationType: LocationTypes,
   id: Location['location_id'],
+  locationType?: LocationTypes,
   queryOptions: UseQueryOptions<{ data: DataResponse['data'][0] }, Error, Location> = {}
 ) {
   const _id = ['wdpa', 'country'].includes(locationType) ? id : 'worldwide';
diff --git a/src/containers/datasets/national-dashboard/hooks.tsx b/src/containers/datasets/national-dashboard/hooks.tsx
index 490a99201..0d9ecf73c 100644
--- a/src/containers/datasets/national-dashboard/hooks.tsx
+++ b/src/containers/datasets/national-dashboard/hooks.tsx
@@ -28,8 +28,8 @@ export function useNationalDashboard(
   const locationType = queryParams?.[0] as LocationTypes;
   const id = queryParams?.[1];
   const {
-    data: { id: currentLocation, location_id },
-  } = useLocation(locationType, id);
+    data: { id: currentLocation, location_id, iso },
+  } = useLocation(id, locationType);
 
   const fetchMangroveNationalDashboard = () =>
     API.request({
@@ -44,7 +44,7 @@ export function useNationalDashboard(
   return useQuery(['national_dashboard', params, location_id], fetchMangroveNationalDashboard, {
     select: (data) => ({
       ...data,
-      location: currentLocation,
+      locationIso: iso,
     }),
     ...queryOptions,
   });
@@ -74,12 +74,13 @@ export function useLayers({
     query: { params: queryParams },
   } = useRouter();
   const locationType = queryParams?.[0] as LocationTypes;
-  const locationId = queryParams?.[1];
+  const location = queryParams?.[1];
+
   const {
-    data: { id: currentLocationId },
-  } = useLocation(locationType, locationId);
+    data: { iso },
+  } = useLocation(location, locationType);
 
-  if (!settings || settings.locationId !== currentLocationId) return null;
+  if (!settings || settings.location !== iso) return null;
 
   return {
     id,
diff --git a/src/containers/datasets/national-dashboard/indicator-source/index.tsx b/src/containers/datasets/national-dashboard/indicator-source/index.tsx
index 6fc16619f..01e735c53 100644
--- a/src/containers/datasets/national-dashboard/indicator-source/index.tsx
+++ b/src/containers/datasets/national-dashboard/indicator-source/index.tsx
@@ -1,7 +1,4 @@
 import { useMemo, useCallback } from 'react';
-import { useEffect } from 'react';
-
-import { useRouter } from 'next/router';
 
 import cn from 'lib/classnames';
 import { numberFormat } from 'lib/format';
@@ -10,9 +7,6 @@ import { activeLayersAtom } from 'store/layers';
 
 import { useRecoilState } from 'recoil';
 
-import { useLocation } from 'containers/datasets/locations/hooks';
-import type { LocationTypes } from 'containers/datasets/locations/types';
-
 import Icon from 'components/icon';
 import { Popover, PopoverContent, PopoverTrigger } from 'components/popover';
 import { SwitchWrapper, SwitchRoot, SwitchThumb } from 'components/switch';
@@ -38,7 +32,7 @@ type DataSourceTypes = {
 
 type IndicatorSourceTypes = {
   id: WidgetSlugType;
-  location: number;
+  locationIso: string;
   layerIndex: number;
   source: string;
   years: number[];
@@ -52,7 +46,7 @@ type IndicatorSourceTypes = {
 const IndicatorSource = ({
   id,
   source,
-  location,
+  locationIso,
   layerIndex,
   years,
   unit,
@@ -64,35 +58,9 @@ const IndicatorSource = ({
   const [activeLayers, setActiveLayers] = useRecoilState(activeLayersAtom);
   const activeLayersIds = activeLayers.map((l) => l.id);
   const isActive = useMemo(() => activeLayersIds.includes(id), [activeLayersIds, id]);
-  const natDashLayer = useMemo(() => activeLayers.find((l) => l.id === id), [activeLayers, id]);
-  const {
-    query: { params: queryParams },
-  } = useRouter();
-  const locationType = queryParams?.[0] as LocationTypes;
-  const locationId = queryParams?.[1];
-  const {
-    data: { id: currentLocationId },
-  } = useLocation(locationType, locationId);
-
-  useEffect(() => {
-    const isNationalDashboardActive = activeLayers.find(
-      (layer) => layer.id === 'mangrove_national_dashboard_layer'
-    );
-    if (
-      isNationalDashboardActive &&
-      Number(location) !== isNationalDashboardActive.settings?.locationId
-    ) {
-      const updatedLayers = activeLayers.filter(
-        (layer) => layer.id !== 'mangrove_national_dashboard_layer'
-      );
-      setActiveLayers(updatedLayers);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const handleClick = useCallback(() => {
     const layersUpdate = isActive
-      ? activeLayers.filter((w) => w.id !== id)
+      ? activeLayers.filter((w) => !w.id.includes('mangrove_national_dashboard_layer'))
       : ([
           {
             id,
@@ -100,7 +68,7 @@ const IndicatorSource = ({
             visibility: 'visible',
             settings: {
               name: source,
-              locationId: location,
+              location: locationIso,
               layerIndex,
               source: dataSource.layer_link,
               source_layer: dataSource.source_layer || DATA_SOURCES[dataSource.layer_link],
@@ -109,7 +77,7 @@ const IndicatorSource = ({
           ...activeLayers,
         ] as ActiveLayers[]);
     setActiveLayers(layersUpdate);
-  }, [activeLayers, setActiveLayers, id]);
+  }, [activeLayers, setActiveLayers, id, dataSource, isActive, layerIndex, locationIso, source]);
 
   return (
     <div key={source} className="grid grid-cols-4 items-start justify-between space-x-2 py-4">
@@ -133,15 +101,14 @@ const IndicatorSource = ({
               </span>
             </PopoverTrigger>
 
-            <PopoverContent className="rounded-2xl px-2 shadow-dropdown">
-              <ul className="z-20 max-h-32 space-y-0.5">
+            <PopoverContent>
+              <ul className="max-h-56 space-y-2">
                 {years?.map((u) => (
-                  <li key={u}>
+                  <li key={u} className="last-of-type:pb-4">
                     <button
                       aria-label="set year"
                       className={cn({
-                        'rounded-lg py-1 px-2 hover:bg-brand-800/20': true,
-                        'font-semibold text-brand-800': yearSelected === u,
+                        'font-bold': true,
                       })}
                       type="button"
                       onClick={() => setYearSelected(u)}
@@ -156,7 +123,6 @@ const IndicatorSource = ({
           </Popover>
         )}
       </div>
-
       {dataSource?.value && (
         <span>
           {numberFormat(dataSource.value)}
@@ -170,12 +136,8 @@ const IndicatorSource = ({
             info: dataSource?.layer_info,
           }}
         />
-        <SwitchWrapper id={'mangrove_national_dashboard_layer'}>
-          <SwitchRoot
-            id={id}
-            onClick={handleClick}
-            checked={isActive && Number(currentLocationId) === natDashLayer?.settings?.locationId}
-          >
+        <SwitchWrapper id={id}>
+          <SwitchRoot id={id} onClick={handleClick} checked={isActive}>
             <SwitchThumb />
           </SwitchRoot>
         </SwitchWrapper>
diff --git a/src/containers/datasets/national-dashboard/widget.tsx b/src/containers/datasets/national-dashboard/widget.tsx
index f8a49330a..7f894adff 100644
--- a/src/containers/datasets/national-dashboard/widget.tsx
+++ b/src/containers/datasets/national-dashboard/widget.tsx
@@ -6,6 +6,8 @@ import cn from 'lib/classnames';
 
 import chroma from 'chroma-js';
 
+import { useLocation } from 'containers/datasets/locations/hooks';
+
 import Loading from 'components/loading';
 import { WIDGET_CARD_WRAPPER_STYLE, WIDGET_SUBTITLE_STYLE } from 'styles/widgets';
 
@@ -46,7 +48,6 @@ const NationalDashboard = () => {
                 {sources.map(({ source, years, unit, data_source }) => {
                   const dataSource = data_source.find((d) => d.year === currentYear);
                   const color = colorsScale.filter((c, i) => i === index);
-
                   return (
                     <>
                       <div className="grid grid-cols-4 text-sm font-normal">
@@ -56,8 +57,8 @@ const NationalDashboard = () => {
                       </div>
 
                       <IndicatorSource
-                        id="mangrove_national_dashboard_layer"
-                        location={data.location}
+                        id={`mangrove_national_dashboard_layer_${dataSource.source_layer}`}
+                        locationIso={data.locationIso}
                         layerIndex={index}
                         key={source}
                         source={source}
diff --git a/src/containers/datasets/net-change/hooks.tsx b/src/containers/datasets/net-change/hooks.tsx
index b2fba6faf..b2cf560e3 100644
--- a/src/containers/datasets/net-change/hooks.tsx
+++ b/src/containers/datasets/net-change/hooks.tsx
@@ -98,7 +98,7 @@ export function useMangroveNetChange(
   const id = queryParams?.[1];
   const {
     data: { name: location, id: currentLocation, location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
   const { customGeojson } = useRecoilValue(drawingToolAtom);
   const { uploadedGeojson } = useRecoilValue(drawingUploadToolAtom);
   const { enabled: isAnalysisEnabled } = useRecoilValue(analysisAtom);
diff --git a/src/containers/datasets/protection/hooks.tsx b/src/containers/datasets/protection/hooks.tsx
index 5f6b80465..e60ff769f 100644
--- a/src/containers/datasets/protection/hooks.tsx
+++ b/src/containers/datasets/protection/hooks.tsx
@@ -70,7 +70,7 @@ export function useMangroveProtectedAreas(
   const id = queryParams?.[1];
   const {
     data: { name: location, id: currentLocation, location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
 
   const { unit, ...restParams } = params;
   const fetchMangroveProtectedAreas = () =>
diff --git a/src/containers/datasets/restoration-sites/hooks.tsx b/src/containers/datasets/restoration-sites/hooks.tsx
index 9b17013ce..d4542b205 100644
--- a/src/containers/datasets/restoration-sites/hooks.tsx
+++ b/src/containers/datasets/restoration-sites/hooks.tsx
@@ -32,7 +32,7 @@ export function useMangroveRestorationSites(
   const id = queryParams?.[1];
   const {
     data: { name: location, id: currentLocation, location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
   const mapFilters = useRecoilValue(RestorationSitesMapFilters);
   const filtersPending = useRecoilValue(RestorationSitesFiltersApplication);
 
@@ -71,7 +71,7 @@ export function useMangroveRestorationSitesFilters(
   const id = queryParams?.[1];
   const {
     data: { id: currentLocation, location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
   const fetchMangroveRestorationSitesFilters = () =>
     API.request({
       method: 'GET',
diff --git a/src/containers/datasets/restoration/fisheries/hooks.tsx b/src/containers/datasets/restoration/fisheries/hooks.tsx
index 41e057d68..1b68d83d3 100644
--- a/src/containers/datasets/restoration/fisheries/hooks.tsx
+++ b/src/containers/datasets/restoration/fisheries/hooks.tsx
@@ -30,7 +30,7 @@ export function useMangroveEcosystemServices(
   const id = queryParams?.[1];
   const {
     data: { id: currentLocation, location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
 
   const fetchMangroveEcosystemServices = () =>
     API.request({
diff --git a/src/containers/datasets/restoration/loss/hooks.tsx b/src/containers/datasets/restoration/loss/hooks.tsx
index 56f445588..5478c839b 100644
--- a/src/containers/datasets/restoration/loss/hooks.tsx
+++ b/src/containers/datasets/restoration/loss/hooks.tsx
@@ -64,7 +64,7 @@ export function useMangroveDegradationAndLoss(
   const id = queryParams?.[1];
   const {
     data: { name: location, id: currentLocation, location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
   const fetchMangroveDegradationAndLoss = () =>
     API.request<DataResponse>({
       method: 'GET',
diff --git a/src/containers/datasets/restoration/overview/hooks.tsx b/src/containers/datasets/restoration/overview/hooks.tsx
index ab12ddb8b..76ed98303 100644
--- a/src/containers/datasets/restoration/overview/hooks.tsx
+++ b/src/containers/datasets/restoration/overview/hooks.tsx
@@ -27,7 +27,7 @@ export function useMangroveRestoration(
   const id = queryParams?.[1];
   const {
     data: { name: location, id: currentLocation, location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
 
   const fetchMangroveRestoration = () =>
     API.request<DataResponse>({
diff --git a/src/containers/datasets/restoration/restoration-value/hooks.tsx b/src/containers/datasets/restoration/restoration-value/hooks.tsx
index 36f3b013d..71a9fbfb4 100644
--- a/src/containers/datasets/restoration/restoration-value/hooks.tsx
+++ b/src/containers/datasets/restoration/restoration-value/hooks.tsx
@@ -24,7 +24,7 @@ export function useMangroveEcosystemServices(
   const id = queryParams?.[1];
   const {
     data: { name: location, id: currentLocation, location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
   const fetchMangroveEcosystemServices = () =>
     API.request({
       method: 'GET',
diff --git a/src/containers/datasets/species-distribution/hooks.tsx b/src/containers/datasets/species-distribution/hooks.tsx
index d453cbf41..5b4ad8523 100644
--- a/src/containers/datasets/species-distribution/hooks.tsx
+++ b/src/containers/datasets/species-distribution/hooks.tsx
@@ -29,7 +29,7 @@ export function useMangroveSpecies(
   const id = queryParams?.[1];
   const {
     data: { name: location, id: currentLocation, location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
   const fetchMangroveSpecies = () =>
     API.request({
       method: 'GET',
diff --git a/src/containers/datasets/species-location/hooks.tsx b/src/containers/datasets/species-location/hooks.tsx
index 70dfe1950..03d6b0df6 100644
--- a/src/containers/datasets/species-location/hooks.tsx
+++ b/src/containers/datasets/species-location/hooks.tsx
@@ -41,7 +41,7 @@ export function useMangroveSpeciesLocation<T>(
   const id = queryParams?.[1];
   const {
     data: { id: currentLocation, location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
 
   return useQuery([QUERY_KEY, location_id], fetchMangroveSpecies, {
     placeholderData: queryClient.getQueryData<DataResponse>([QUERY_KEY, location_id]) || {
diff --git a/src/containers/datasets/species-location/widget.tsx b/src/containers/datasets/species-location/widget.tsx
index ed5ad84c1..abec4ffa5 100644
--- a/src/containers/datasets/species-location/widget.tsx
+++ b/src/containers/datasets/species-location/widget.tsx
@@ -35,7 +35,7 @@ const SpeciesLocation = () => {
   const id = queryParams?.[1];
   const {
     data: { name: location },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
   const [specieSelected, setSpecie] =
     useRecoilState<DataResponse['data'][number]>(SpeciesLocationState);
 
diff --git a/src/containers/datasets/species-threatened/hooks.tsx b/src/containers/datasets/species-threatened/hooks.tsx
index b7a362b26..b22f8a167 100644
--- a/src/containers/datasets/species-threatened/hooks.tsx
+++ b/src/containers/datasets/species-threatened/hooks.tsx
@@ -81,7 +81,7 @@ export function useMangroveSpecies(
   const id = queryParams?.[1];
   const {
     data: { name: location, id: currentLocation, location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
 
   const fetchMangroveSpecies = () =>
     API.request({
diff --git a/src/containers/location-widget/index.tsx b/src/containers/location-widget/index.tsx
index d47f42974..d0d047b06 100644
--- a/src/containers/location-widget/index.tsx
+++ b/src/containers/location-widget/index.tsx
@@ -27,7 +27,7 @@ const LocationWidget = () => {
   const id = params?.[1];
   const {
     data: { name },
-  } = useLocation(locationType, id, {
+  } = useLocation(id, locationType, {
     enabled: (!!locationType && !!id) || locationType !== 'custom-area',
   });
 
diff --git a/src/containers/locations-list/mobile/highlighted-places/index.tsx b/src/containers/locations-list/mobile/highlighted-places/index.tsx
index f97cd17ff..7db07cf57 100644
--- a/src/containers/locations-list/mobile/highlighted-places/index.tsx
+++ b/src/containers/locations-list/mobile/highlighted-places/index.tsx
@@ -22,7 +22,7 @@ const HighlightedPlacesMobile = () => {
 
   const {
     data: { location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
   const isHighlightedPlace = Object.values(HIGHLIGHTED_PLACES).includes(location_id);
 
   const formatToKm = (mts) => {
diff --git a/src/containers/map/index.tsx b/src/containers/map/index.tsx
index 6c8358325..3e71bbe8e 100644
--- a/src/containers/map/index.tsx
+++ b/src/containers/map/index.tsx
@@ -231,7 +231,7 @@ const MapContainer = ({ mapId }: { mapId: string }) => {
     );
 
     const iucnEcoregionFeature = e?.features.find(
-      ({ layer }) => layer.id === 'mangrove-iucn-ecoregion-layer'
+      ({ layer }) => layer.id === 'mangrove_iucn_ecoregion-layer'
     );
 
     if (locationFeature) {
diff --git a/src/containers/map/layer-manager/index.tsx b/src/containers/map/layer-manager/index.tsx
index 6884dc195..0edd20686 100644
--- a/src/containers/map/layer-manager/index.tsx
+++ b/src/containers/map/layer-manager/index.tsx
@@ -4,7 +4,6 @@ import { Layer } from 'react-map-gl';
 
 import { activeLayersAtom } from 'store/layers';
 import { interactiveLayerIdsAtom } from 'store/map';
-import { basemapContextualAtom } from 'store/map-settings';
 
 import { useRecoilState, useRecoilValue } from 'recoil';
 
@@ -13,38 +12,24 @@ import { LAYERS, BASEMAPS } from 'containers/datasets';
 import type { LayerProps } from 'types/layers';
 import type { ContextualBasemapsId, WidgetSlugType } from 'types/widget';
 
-const RestorationLayer = LAYERS['mangrove_restoration'];
 const CountryBoundariesLayer = LAYERS['country-boundaries'];
-const RestorationSitesLayer = LAYERS['mangrove_restoration_sites'];
-const IucnEcoregionLayer = LAYERS['mangrove_iucn_ecoregion'];
-
-const EXCLUDED_DATA_LAYERS: (WidgetSlugType | ContextualBasemapsId)[] = [
-  'mangrove_restoration_sites',
-  'mangrove_restoration',
-  'mangrove_iucn_ecoregion',
-] satisfies (WidgetSlugType | ContextualBasemapsId)[];
 
 const LayerManagerContainer = () => {
   const layers = useRecoilValue(activeLayersAtom);
-  const layersIds = layers.map((l) => l.id);
 
-  const basemap = useRecoilValue(basemapContextualAtom);
   const [, setInteractiveLayerIds] = useRecoilState(interactiveLayerIdsAtom);
 
   const activeLayersIds = layers.map((l) => l.id);
 
   const LAYERS_FILTERED = useMemo(() => {
     const filteredLayers = activeLayersIds.filter(
-      (layer: WidgetSlugType & ContextualBasemapsId & 'custom-area') =>
-        !EXCLUDED_DATA_LAYERS.includes(layer) && !!LAYERS[layer]
+      (layer: WidgetSlugType | ContextualBasemapsId | 'custom-area') => {
+        return Object.keys(LAYERS).some((k) => layer.includes(k));
+      }
     );
 
-    // if (!!basemap) {
-    //   filteredLayers.push(basemap);
-    // }
-
     return filteredLayers;
-  }, [activeLayersIds, basemap]);
+  }, [activeLayersIds]);
 
   const handleAdd = useCallback(
     (styleIds: LayerProps['id'][]) => {
@@ -92,7 +77,9 @@ const LayerManagerContainer = () => {
       })}
 
       {LAYERS_FILTERED.map((layer, i) => {
-        const LayerComponent = LAYERS[layer] || BASEMAPS[layer];
+        const layerId = Object.keys(LAYERS).find((k) => layer.includes(k));
+
+        const LayerComponent = LAYERS[layerId] || BASEMAPS[layerId];
         const beforeId = i === 0 ? 'custom-layers' : `${LAYERS_FILTERED[i - 1]}-bg`;
         return (
           <LayerComponent
@@ -113,28 +100,6 @@ const LayerManagerContainer = () => {
           onRemove={handleRemove}
         />
       }
-
-      {layersIds.includes('mangrove_restoration_sites') && (
-        <RestorationSitesLayer id="mangrove-restoration-sites-layer" />
-      )}
-
-      {layersIds.includes('mangrove_restoration') && (
-        <RestorationLayer
-          id="mangrove_restoration"
-          beforeId="country-boundaries-layer"
-          onAdd={handleAdd}
-          onRemove={handleRemove}
-        />
-      )}
-
-      {layersIds.includes('mangrove_iucn_ecoregion') && (
-        <IucnEcoregionLayer
-          id="mangrove-iucn-ecoregion"
-          beforeId="country-boundaries-layer"
-          onAdd={handleAdd}
-          onRemove={handleRemove}
-        />
-      )}
     </>
   );
 };
diff --git a/src/containers/map/legend/index.tsx b/src/containers/map/legend/index.tsx
index eeb32d7c9..5fc5bd343 100644
--- a/src/containers/map/legend/index.tsx
+++ b/src/containers/map/legend/index.tsx
@@ -55,8 +55,8 @@ const Legend = ({ embedded = false }: { embedded?: boolean }) => {
     [activeLayers, setActiveLayers]
   );
 
-  const nationalDashboardLayerName = activeLayers.find(
-    (l) => l.id === 'mangrove_national_dashboard_layer'
+  const nationalDashboardLayerName = activeLayers.find((l) =>
+    l.id.includes('mangrove_national_dashboard_layer')
   )?.settings?.name;
 
   const removeLayer = useCallback(
@@ -150,13 +150,12 @@ const Legend = ({ embedded = false }: { embedded?: boolean }) => {
                   <SortableList onChangeOrder={onChangeOrder}>
                     {activeLayers.map((l) => {
                       if (l.id === 'custom-area') return null;
+                      const layerId = Object.keys(MAP_LEGENDS).find((k) => l.id.includes(k));
+                      const WidgetLegend = MAP_LEGENDS[layerId] as React.ElementType;
 
-                      const WidgetLegend = MAP_LEGENDS[l.id] as React.ElementType;
-
-                      const widgetId =
-                        l.id === 'mangrove_national_dashboard_layer'
-                          ? 'mangrove_national_dashboard'
-                          : l.id;
+                      const widgetId = l.id.includes('mangrove_national_dashboard_layer')
+                        ? 'mangrove_national_dashboard'
+                        : l.id;
 
                       const Widget = WIDGETS[widgetId] as React.ElementType;
 
@@ -165,12 +164,13 @@ const Legend = ({ embedded = false }: { embedded?: boolean }) => {
                       const layerNameToDisplay = layerName(l.id);
                       if (
                         layerNameToDisplay === undefined &&
-                        l.id !== 'mangrove_national_dashboard_layer'
+                        !l.id.includes('mangrove_national_dashboard_layer')
                       )
                         return null;
 
                       const title =
-                        l.id === 'mangrove_national_dashboard_layer' && nationalDashboardLayerName
+                        l.id.includes('mangrove_national_dashboard_layer') &&
+                        nationalDashboardLayerName
                           ? `National Dashboard`
                           : layerNameToDisplay;
 
diff --git a/src/containers/map/mobile/legend/index.tsx b/src/containers/map/mobile/legend/index.tsx
index 943d1c8c4..82b4ebf39 100644
--- a/src/containers/map/mobile/legend/index.tsx
+++ b/src/containers/map/mobile/legend/index.tsx
@@ -158,12 +158,13 @@ const Legend = () => {
                       const layerNameToDisplay = layerName(l.id);
                       if (
                         layerNameToDisplay === undefined &&
-                        l.id !== 'mangrove_national_dashboard_layer'
+                        !l.id.includes('mangrove_national_dashboard_layer')
                       )
                         return null;
 
                       const title =
-                        l.id === 'mangrove_national_dashboard_layer' && nationalDashboardLayerName
+                        l.id.includes('mangrove_national_dashboard_layer') &&
+                        nationalDashboardLayerName
                           ? `National Dashboard`
                           : layerNameToDisplay;
 
diff --git a/src/layouts/desktop/index.tsx b/src/layouts/desktop/index.tsx
index 2bfd3d66e..0edde3993 100644
--- a/src/layouts/desktop/index.tsx
+++ b/src/layouts/desktop/index.tsx
@@ -29,7 +29,7 @@ const DesktopLayout = () => {
 
   const {
     data: { name: location },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
 
   return (
     <div className="overflow-hidden print:overflow-visible">
diff --git a/src/store/layers/index.ts b/src/store/layers/index.ts
index f5c0ec406..ef61c479f 100644
--- a/src/store/layers/index.ts
+++ b/src/store/layers/index.ts
@@ -10,7 +10,7 @@ const LayerSettings = object({
   source: optional(string()),
   source_layer: optional(string()),
   date: optional(string()),
-  locationId: optional(number()),
+  location: optional(string()),
   layerIndex: optional(number()),
 });
 
@@ -33,7 +33,7 @@ export const activeLayersAtom = atom<
       name?: string;
       source?: string;
       source_layer?: string;
-      locationId?: number;
+      location?: string;
       layerIndex?: number;
       date?: string;
       [key: string]: string | number;
diff --git a/src/types/widget.ts b/src/types/widget.ts
index 7e2702296..4f0a00f65 100644
--- a/src/types/widget.ts
+++ b/src/types/widget.ts
@@ -39,7 +39,7 @@ export type WidgetSlugType =
   | 'mangrove_coastal_protection_area'
   | 'mangrove_coastal_protection_population'
   | 'mangrove_coastal_protection_stock'
-  | 'mangrove_national_dashboard_layer'
+  | `mangrove_national_dashboard_layer_${string}`
   | 'mangrove_protected_areas'
   | 'mangrove_iucn_ecoregion'
   | 'mangrove_allen_coral_reef'