diff --git a/next-env.d.ts b/next-env.d.ts
index 4f11a03dc..a4a7b3f5c 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/src/containers/datasets/national-dashboard/indicator-source/index.tsx b/src/containers/datasets/national-dashboard/indicator-source/index.tsx
index 025bdb522..354368438 100644
--- a/src/containers/datasets/national-dashboard/indicator-source/index.tsx
+++ b/src/containers/datasets/national-dashboard/indicator-source/index.tsx
@@ -84,6 +84,7 @@ const IndicatorSource = ({
           },
           ...activeLayers,
         ] as ActiveLayers[]);
+
     setActiveLayers(layersUpdate);
   }, [activeLayers, setActiveLayers, id, dataSource, isActive, layerIndex, locationIso, source]);
 
diff --git a/src/containers/datasets/national-dashboard/layer.tsx b/src/containers/datasets/national-dashboard/layer.tsx
index 931dec86c..5209fba9a 100644
--- a/src/containers/datasets/national-dashboard/layer.tsx
+++ b/src/containers/datasets/national-dashboard/layer.tsx
@@ -12,10 +12,9 @@ const MangrovesNationalDashboardLayer = ({ beforeId, id }: LayerProps) => {
   const [activeLayers] = useRecoilState(activeLayersAtom);
   const activeLayer = activeLayers?.find((l) => l.id === id);
   const SOURCE = useSource({ settings: activeLayer.settings });
-
   const LAYER = useLayers({
     id: 'mangrove_national_dashboard_layer',
-    opacity: parseFloat(activeLayer.opacity),
+    opacity: parseFloat(activeLayer?.opacity),
     visibility: activeLayer.visibility,
     settings: activeLayer.settings,
   });
@@ -23,7 +22,7 @@ const MangrovesNationalDashboardLayer = ({ beforeId, id }: LayerProps) => {
 
   return (
     <Source {...SOURCE}>
-      <Layer key={LAYER.id} {...LAYER} beforeId={beforeId} />
+      <Layer key={LAYER.id} id={SOURCE.id} {...LAYER} beforeId={beforeId} />
     </Source>
   );
 };
diff --git a/src/containers/map/index.tsx b/src/containers/map/index.tsx
index 152209263..81ad3fe6c 100644
--- a/src/containers/map/index.tsx
+++ b/src/containers/map/index.tsx
@@ -344,6 +344,7 @@ const MapContainer = ({ mapId }: { mapId: string }) => {
     setLoaded(true);
   }, []);
   const pitch = map?.getPitch();
+
   return (
     <div
       className="print:page-break-after print:page-break-inside-avoid absolute top-0 left-0 z-0 h-screen w-screen print:relative print:top-4 print:w-[90vw]"
diff --git a/src/containers/map/layer-manager/index.tsx b/src/containers/map/layer-manager/index.tsx
index 87205ac76..1a7beaaa8 100644
--- a/src/containers/map/layer-manager/index.tsx
+++ b/src/containers/map/layer-manager/index.tsx
@@ -42,36 +42,12 @@ const LayerManagerContainer = () => {
   } = useRouter();
   const id = params?.[1];
 
-  const locationType = (params?.[0] || 'worldwide') as LocationTypes;
-  function filterLayersByLocationType(widgets: WidgetTypes[], locationType: string): string[] {
-    const filteredLayers: string[] = [];
-
-    widgets.forEach((widget) => {
-      if (widget.locationType?.includes(locationType)) {
-        if (widget.layersIds) {
-          filteredLayers.push(...widget.layersIds);
-        }
-        if (widget.contextualLayersIds) {
-          filteredLayers.push(...widget.contextualLayersIds);
-        }
-        if (widget.subLayersIds) {
-          filteredLayers.push(...widget.subLayersIds);
-        }
-      }
-    });
-
-    return filteredLayers;
-  }
-
-  const filteredLayers = filterLayersByLocationType(widgets, locationType);
-
   // layers that act as basemap (such planet imagery or high resolution extent) must be always at the bottom
   const basemap_layers = ACTIVE_LAYERS?.filter(
     (layer) => layer?.includes('planet') || layer === 'hi-res-extent'
   );
   const no_planet_layers = ACTIVE_LAYERS?.filter(
-    (layer) =>
-      !layer?.includes('planet') && layer !== 'hi-res-extent' && filteredLayers?.includes(layer)
+    (layer) => !layer?.includes('planet') && layer !== 'hi-res-extent'
   );
 
   const filterNationalDashboardLayers = !NATIONAL_DASHBOARD_LOCATIONS?.includes(id)
@@ -79,6 +55,7 @@ const LayerManagerContainer = () => {
     : no_planet_layers;
 
   const LAYERS_FILTERED = [...(filterNationalDashboardLayers || []), ...(basemap_layers || [])];
+
   const handleAdd = useCallback(
     (styleIds: LayerProps['id'][]) => {
       setInteractiveLayerIds((prevInteractiveIds) => [...prevInteractiveIds, ...styleIds]);
diff --git a/src/containers/map/legend/index.tsx b/src/containers/map/legend/index.tsx
index 1684921ce..190ef7c55 100644
--- a/src/containers/map/legend/index.tsx
+++ b/src/containers/map/legend/index.tsx
@@ -51,7 +51,11 @@ const Legend = ({ embedded = false }: { embedded?: boolean }) => {
 
   const filteredLayersIds = filterLayersByLocationType(widgets, locationType);
   const filteredLayers = activeLayers?.filter(({ id }) => {
-    return filteredLayersIds.includes(id);
+    return (
+      filteredLayersIds.includes(id) ||
+      (id.includes('mangrove_national_dashboard') &&
+        filteredLayersIds.includes('mangrove_national_dashboard'))
+    );
   }) as ActiveLayers[];
 
   const [isOpen, setIsOpen] = useState(false);
@@ -67,7 +71,7 @@ const Legend = ({ embedded = false }: { embedded?: boolean }) => {
   const handleChangeOrder = useCallback(
     (order: string[]) => {
       const newLayers = order.map((id) => {
-        return activeLayers?.find((l) => l.id === id);
+        return activeLayers?.find((l) => l.id === id || l.id.includes(id));
       }) as ActiveLayers[];
       const activeLayerPlanet = activeLayers?.filter((l) => l.id.includes('planet'));
       setActiveLayers([...newLayers, ...activeLayerPlanet]);