diff --git a/client/src/components/map/legend/types.ts b/client/src/components/map/legend/types.ts
index 3c92daa2..321063d5 100644
--- a/client/src/components/map/legend/types.ts
+++ b/client/src/components/map/legend/types.ts
@@ -96,9 +96,11 @@ export interface SortableItemProps extends PropsWithChildren {
 
 export interface LegendTypeProps {
   className?: string;
+  type: 'choropleth' | 'gradient' | 'basic';
   items: Array<{
     value: string;
     color: string;
+    label?: string;
   }>;
 }
 
diff --git a/client/src/containers/datasets/item.tsx b/client/src/containers/datasets/item.tsx
index 599bbd5b..c37a678f 100644
--- a/client/src/containers/datasets/item.tsx
+++ b/client/src/containers/datasets/item.tsx
@@ -15,7 +15,7 @@ import { INFO } from '@/containers/datasets/layers';
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogClose, DialogContent, DialogTrigger } from '@/components/ui/dialog';
 import { Switch } from '@/components/ui/switch';
-// TODO: replace with real type DatasetItemResonseDataItem
+
 export default function DatasetsItem(props: LayerListResponseDataItem) {
   const [layers, setLayersToURL] = useSyncLayers();
 
diff --git a/client/src/containers/datasets/layers/index.tsx b/client/src/containers/datasets/layers/index.tsx
index 9d1a386b..d3c3e962 100644
--- a/client/src/containers/datasets/layers/index.tsx
+++ b/client/src/containers/datasets/layers/index.tsx
@@ -1,22 +1,15 @@
-import type { LayerProps, DeckGLLayerProps, LayerSettings } from '@/types/layers';
+import type { LayerProps, DeckGLLayerProps } from '@/types/layers';
 
 import BiomassDensity from '@/containers/datasets/layers/biomass-density/layer';
-import BiomassDensityLegend from '@/containers/datasets/layers/biomass-density/legend';
 import BiomassDensityInfo from '@/containers/datasets/layers/constants/biomass-density';
 import NetForestCarbonFluxInfo from '@/containers/datasets/layers/constants/net-flux-carbon';
 import SoilCarbonDensityInfo from '@/containers/datasets/layers/constants/soil-carbon-density';
 import { LandDegradationLayer } from '@/containers/datasets/layers/land-degradation/layer';
-import LandDegradationLegend from '@/containers/datasets/layers/land-degradation/legend';
 import NetForestCarbonFluxLayer from '@/containers/datasets/layers/net-forest-carbon-flux/layer';
-import NetForestCarbonFluxLegend from '@/containers/datasets/layers/net-forest-carbon-flux/legend';
 import { ProjectsLayer } from '@/containers/datasets/layers/projects/layer';
-import ProjectsLegend from '@/containers/datasets/layers/projects/legend';
 import SoilCarbonDensityLayer from '@/containers/datasets/layers/soil-carbon-density/layer';
-import SoilCarbonDensityLegend from '@/containers/datasets/layers/soil-carbon-density/legend';
 import TreeCoverLayer from '@/containers/datasets/layers/tree-cover/layer';
-import TreeCoverLegend from '@/containers/datasets/layers/tree-cover/legend';
 import TreeCoverLossLayer from '@/containers/datasets/layers/tree-cover-loss/layer';
-import TreeCoverLossLegend from '@/containers/datasets/layers/tree-cover-loss/legend';
 
 import LandDegradationInfo from './constants/land-degradation';
 import TreeCoverInfo from './constants/tree-cover';
@@ -29,10 +22,6 @@ type SimpleLayerIndex = {
   [key: number]: React.ComponentType<LayerProps>;
 };
 
-type LegendIndex = {
-  [key: string]: React.ComponentType<{ settings: LayerSettings }>;
-};
-
 type InfoIndex = {
   [key: number]: React.ComponentType;
 };
@@ -51,16 +40,6 @@ const SIMPLE_LAYERS: SimpleLayerIndex = {
   6: LandDegradationLayer,
 };
 
-export const LEGENDS: LegendIndex = {
-  5: ProjectsLegend,
-  1: TreeCoverLegend,
-  3: NetForestCarbonFluxLegend,
-  2: BiomassDensityLegend,
-  4: SoilCarbonDensityLegend,
-  6: LandDegradationLegend,
-  7: TreeCoverLossLegend,
-};
-
 export const INFO: InfoIndex = {
   1: TreeCoverInfo,
   2: BiomassDensityInfo,
diff --git a/client/src/containers/datasets/layers/net-forest-carbon-flux/legend.tsx b/client/src/containers/datasets/layers/net-forest-carbon-flux/legend.tsx
deleted file mode 100644
index c23eb453..00000000
--- a/client/src/containers/datasets/layers/net-forest-carbon-flux/legend.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { cn } from '@/lib/classnames';
-
-import { useGetLayersId } from '@/types/generated/layer';
-import { LayerSettings, LegendType } from '@/types/layers';
-
-import LegendSettings from '@/containers/legend-settings';
-
-export default function Legend({ settings }: { settings: LayerSettings }) {
-  const { data } = useGetLayersId(Number(settings.id));
-
-  if (!data?.data?.attributes) return null;
-
-  const { legend_config, name } = data.data.attributes;
-  const { items } = legend_config as LegendType;
-
-  return (
-    <div className="flex w-full flex-col space-y-2">
-      <div className="flex w-full items-start justify-between">
-        <p className="max-w-[200px] text-xs capitalize">{name}</p>
-        <LegendSettings settings={settings} />
-      </div>
-
-      <div className={cn({ 'flex flex-col': true })}>
-        <div
-          className={cn({
-            'flex h-2 w-full': true,
-          })}
-          style={{
-            backgroundImage: `linear-gradient(to right, ${items.map((i) => i.color).join(',')})`,
-          }}
-        />
-
-        <ul className="mt-1 flex w-full justify-between">
-          {items
-            .filter(({ value }) => typeof value !== 'undefined' && value !== null)
-            .map(({ value }) => (
-              <li
-                key={`${value}`}
-                className={cn({
-                  'flex-shrink-0 text-xs': true,
-                })}
-              >
-                {value}
-              </li>
-            ))}
-        </ul>
-      </div>
-    </div>
-  );
-}
diff --git a/client/src/containers/datasets/layers/projects/legend.tsx b/client/src/containers/datasets/layers/projects/legend.tsx
deleted file mode 100644
index e36f1e66..00000000
--- a/client/src/containers/datasets/layers/projects/legend.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useGetLayersId } from '@/types/generated/layer';
-import { LayerSettings } from '@/types/layers';
-
-import LegendSettings from '@/containers/legend-settings';
-
-export default function Legend({ settings }: { settings: LayerSettings }) {
-  const { data } = useGetLayersId(Number(settings.id));
-
-  if (!data?.data?.attributes) return null;
-
-  const { name } = data.data.attributes;
-
-  return (
-    <div className="flex w-full items-center justify-between">
-      <div className="flex w-full items-center space-x-2">
-        <div className="h-3 w-3 rounded-full bg-green-500" />
-        <p className="text-xs capitalize">{name}</p>
-      </div>
-      <LegendSettings settings={settings} />
-    </div>
-  );
-}
diff --git a/client/src/containers/datasets/layers/soil-carbon-density/legend.tsx b/client/src/containers/datasets/layers/soil-carbon-density/legend.tsx
deleted file mode 100644
index c23eb453..00000000
--- a/client/src/containers/datasets/layers/soil-carbon-density/legend.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { cn } from '@/lib/classnames';
-
-import { useGetLayersId } from '@/types/generated/layer';
-import { LayerSettings, LegendType } from '@/types/layers';
-
-import LegendSettings from '@/containers/legend-settings';
-
-export default function Legend({ settings }: { settings: LayerSettings }) {
-  const { data } = useGetLayersId(Number(settings.id));
-
-  if (!data?.data?.attributes) return null;
-
-  const { legend_config, name } = data.data.attributes;
-  const { items } = legend_config as LegendType;
-
-  return (
-    <div className="flex w-full flex-col space-y-2">
-      <div className="flex w-full items-start justify-between">
-        <p className="max-w-[200px] text-xs capitalize">{name}</p>
-        <LegendSettings settings={settings} />
-      </div>
-
-      <div className={cn({ 'flex flex-col': true })}>
-        <div
-          className={cn({
-            'flex h-2 w-full': true,
-          })}
-          style={{
-            backgroundImage: `linear-gradient(to right, ${items.map((i) => i.color).join(',')})`,
-          }}
-        />
-
-        <ul className="mt-1 flex w-full justify-between">
-          {items
-            .filter(({ value }) => typeof value !== 'undefined' && value !== null)
-            .map(({ value }) => (
-              <li
-                key={`${value}`}
-                className={cn({
-                  'flex-shrink-0 text-xs': true,
-                })}
-              >
-                {value}
-              </li>
-            ))}
-        </ul>
-      </div>
-    </div>
-  );
-}
diff --git a/client/src/containers/datasets/layers/tree-cover-loss/legend.tsx b/client/src/containers/datasets/layers/tree-cover-loss/legend.tsx
deleted file mode 100644
index 5b67a236..00000000
--- a/client/src/containers/datasets/layers/tree-cover-loss/legend.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useGetLayersId } from '@/types/generated/layer';
-import { LayerSettings } from '@/types/layers';
-
-import LegendSettings from '@/containers/legend-settings';
-
-export default function Legend({ settings }: { settings: LayerSettings }) {
-  const { data } = useGetLayersId(Number(settings.id));
-
-  if (!data?.data?.attributes) return null;
-
-  const { name } = data.data.attributes;
-
-  return (
-    <div className="flex w-full justify-between">
-      <div className="flex w-full items-center space-x-2">
-        <div className="h-3 w-3 rounded-sm bg-[#dc6c9a]" />
-        <p className="text-xs capitalize">{name}</p>
-      </div>
-      <LegendSettings settings={settings} />
-    </div>
-  );
-}
diff --git a/client/src/containers/datasets/layers/tree-cover/legend.tsx b/client/src/containers/datasets/layers/tree-cover/legend.tsx
deleted file mode 100644
index 39e9a37c..00000000
--- a/client/src/containers/datasets/layers/tree-cover/legend.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useGetLayersId } from '@/types/generated/layer';
-import { LayerSettings } from '@/types/layers';
-
-import LegendSettings from '@/containers/legend-settings';
-
-export default function Legend({ settings }: { settings: LayerSettings }) {
-  const { data } = useGetLayersId(Number(settings.id));
-
-  if (!data?.data?.attributes) return null;
-
-  const { name } = data.data.attributes;
-
-  return (
-    <div className="flex w-full justify-between">
-      <div className="flex w-full items-center space-x-2">
-        <div className="h-3 w-3 rounded-sm bg-[#A7C360]" />
-        <p className="text-xs capitalize">{name}</p>
-      </div>
-      <LegendSettings settings={settings} />
-    </div>
-  );
-}
diff --git a/client/src/containers/datasets/list.tsx b/client/src/containers/datasets/list.tsx
index 9a88c9a4..7543186d 100644
--- a/client/src/containers/datasets/list.tsx
+++ b/client/src/containers/datasets/list.tsx
@@ -13,6 +13,8 @@ export default function DatasetsList() {
 
   const layers = data?.data || [];
 
+  if (!layers.length) return null;
+
   return (
     <ContentLoader
       data={data}
diff --git a/client/src/containers/map/legend/index.tsx b/client/src/containers/map/legend/index.tsx
index d8a42217..c9acb05e 100644
--- a/client/src/containers/map/legend/index.tsx
+++ b/client/src/containers/map/legend/index.tsx
@@ -6,11 +6,11 @@ import { cn } from '@/lib/classnames';
 
 import { useSyncLayers } from '@/hooks/datasets/sync-query';
 
+import MapLegendItem from '@/containers/map/legend/legend-item';
+
 import Legend from '@/components/map/legend';
 import { Button } from '@/components/ui/button';
 
-import MapLegendItem from './item';
-
 const MapLegends = ({ className = '' }) => {
   const [layers] = useSyncLayers();
 
@@ -56,7 +56,7 @@ const MapLegends = ({ className = '' }) => {
         <Button
           variant="primary"
           size="base"
-          className="ml-auto mt-auto h-8 w-8 rounded-full p-0"
+          className="ml-auto mt-auto h-8 w-8 shrink-0 rounded-full p-0"
           onClick={handleOpenLegend}
         >
           {openLegend ? <ChevronsRight size={12} /> : <ChevronsLeft size={12} />}
diff --git a/client/src/containers/map/legend/item.tsx b/client/src/containers/map/legend/item.tsx
deleted file mode 100644
index db97d310..00000000
--- a/client/src/containers/map/legend/item.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-'use-client';
-
-import type { LayerSettings } from '@/types/layers';
-
-import { LEGENDS } from '@/containers/datasets/layers';
-
-const MapLegendItem = ({ settings }: { settings: LayerSettings }) => {
-  const { id } = settings;
-  const LegendDetailComponent = LEGENDS[id];
-  return (
-    LegendDetailComponent && (
-      <div
-        key={id}
-        className="shadow-legend flex w-full items-center justify-between rounded bg-white px-4 py-2"
-      >
-        <LegendDetailComponent settings={settings} />
-      </div>
-    )
-  );
-};
-
-export default MapLegendItem;
diff --git a/client/src/containers/map/legend/legend-item/basic.tsx b/client/src/containers/map/legend/legend-item/basic.tsx
new file mode 100644
index 00000000..a7867d78
--- /dev/null
+++ b/client/src/containers/map/legend/legend-item/basic.tsx
@@ -0,0 +1,50 @@
+'use-client';
+
+import type { Layer } from '@/types/generated/strapi.schemas';
+import type { LayerSettings } from '@/types/layers';
+import type { Legend } from '@/types/map';
+
+import LegendSettings from '@/containers/legend-settings';
+
+const BasicLegendItem = ({
+  name,
+  legend_config,
+  settings,
+}: Layer & { settings: LayerSettings }) => {
+  const { items, notes } = legend_config as Legend;
+
+  return (
+    <div className="flex w-full">
+      {items.length === 1 ? (
+        <div className="flex w-full flex-col space-y-2">
+          <div className="flex w-full justify-between">
+            <div className="flex w-full items-center space-x-2">
+              <div className="h-3 w-3 rounded-sm" style={{ backgroundColor: items[0]?.color }} />
+              <p className="text-xs capitalize">{name}</p>
+            </div>
+            <LegendSettings settings={settings} />
+          </div>
+          {items[0]?.notes && <p className="text-xs text-gray-500">{items[0]?.notes}</p>}
+        </div>
+      ) : (
+        <div className="flex w-full justify-between">
+          <div>
+            <div className="flex w-full justify-between">
+              <p className="text-xs capitalize">{name}</p>
+              <LegendSettings settings={settings} />
+            </div>
+          </div>
+          {items.map((item) => (
+            <div key={item?.color} className="flex w-full items-center space-x-2">
+              <div className="h-3 w-3 rounded-sm" style={{ backgroundColor: item.color }} />
+              <p className="text-xs capitalize">{item.value}</p>
+            </div>
+          ))}
+          {notes && <p className="text-xs text-gray-500">{notes}</p>}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default BasicLegendItem;
diff --git a/client/src/containers/datasets/layers/land-degradation/legend.tsx b/client/src/containers/map/legend/legend-item/choropleth.tsx
similarity index 72%
rename from client/src/containers/datasets/layers/land-degradation/legend.tsx
rename to client/src/containers/map/legend/legend-item/choropleth.tsx
index f7207603..a0d92534 100644
--- a/client/src/containers/datasets/layers/land-degradation/legend.tsx
+++ b/client/src/containers/map/legend/legend-item/choropleth.tsx
@@ -1,16 +1,17 @@
-import { useGetLayersId } from '@/types/generated/layer';
-import type { LayerSettings, LegendType } from '@/types/layers';
+'use-client';
 
-import LegendSettings from '@/containers/legend-settings';
-
-export default function Legend({ settings }: { settings: LayerSettings }) {
-  const { data } = useGetLayersId(Number(settings.id));
-
-  if (!data?.data?.attributes) return null;
+import type { Layer } from '@/types/generated/strapi.schemas';
+import type { LayerSettings } from '@/types/layers';
+import type { Legend } from '@/types/map';
 
-  const { legend_config, name } = data.data.attributes;
-  const { items } = legend_config as LegendType;
+import LegendSettings from '@/containers/legend-settings';
 
+const ChoroplethLegendItem = ({
+  name,
+  legend_config,
+  settings,
+}: Layer & { settings: LayerSettings }) => {
+  const { items } = legend_config as Legend;
   return (
     <div className="flex w-full flex-col space-y-2">
       <div className="flex w-full items-start justify-between">
@@ -47,4 +48,6 @@ export default function Legend({ settings }: { settings: LayerSettings }) {
       </div>
     </div>
   );
-}
+};
+
+export default ChoroplethLegendItem;
diff --git a/client/src/containers/datasets/layers/biomass-density/legend.tsx b/client/src/containers/map/legend/legend-item/gradient.tsx
similarity index 73%
rename from client/src/containers/datasets/layers/biomass-density/legend.tsx
rename to client/src/containers/map/legend/legend-item/gradient.tsx
index c23eb453..2fbe0206 100644
--- a/client/src/containers/datasets/layers/biomass-density/legend.tsx
+++ b/client/src/containers/map/legend/legend-item/gradient.tsx
@@ -1,18 +1,19 @@
+'use-client';
+
 import { cn } from '@/lib/classnames';
 
-import { useGetLayersId } from '@/types/generated/layer';
-import { LayerSettings, LegendType } from '@/types/layers';
+import type { Layer } from '@/types/generated/strapi.schemas';
+import type { LayerSettings } from '@/types/layers';
+import type { Legend } from '@/types/map';
 
 import LegendSettings from '@/containers/legend-settings';
 
-export default function Legend({ settings }: { settings: LayerSettings }) {
-  const { data } = useGetLayersId(Number(settings.id));
-
-  if (!data?.data?.attributes) return null;
-
-  const { legend_config, name } = data.data.attributes;
-  const { items } = legend_config as LegendType;
-
+const GradientLegendItem = ({
+  name,
+  legend_config,
+  settings,
+}: Layer & { settings: LayerSettings }) => {
+  const { items } = legend_config as Legend;
   return (
     <div className="flex w-full flex-col space-y-2">
       <div className="flex w-full items-start justify-between">
@@ -47,4 +48,6 @@ export default function Legend({ settings }: { settings: LayerSettings }) {
       </div>
     </div>
   );
-}
+};
+
+export default GradientLegendItem;
diff --git a/client/src/containers/map/legend/legend-item/index.tsx b/client/src/containers/map/legend/legend-item/index.tsx
new file mode 100644
index 00000000..fd15a498
--- /dev/null
+++ b/client/src/containers/map/legend/legend-item/index.tsx
@@ -0,0 +1,39 @@
+'use-client';
+
+import { useGetLayersId } from '@/types/generated/layer';
+import type { LayerSettings } from '@/types/layers';
+import type { Legend } from '@/types/map';
+
+import BasicLegendItem from './basic';
+import ChoroplethLegendItem from './choropleth';
+import GradientLegendItem from './gradient';
+
+const MapLegendItem = ({ settings }: { settings: LayerSettings }) => {
+  const { id } = settings;
+
+  const { data } = useGetLayersId(Number(id));
+
+  if (!data?.data?.attributes) return null;
+
+  const { legend_config, name } = data.data.attributes;
+  const { type } = legend_config as Legend;
+
+  return (
+    <div
+      key={id}
+      className="shadow-legend flex w-full items-center justify-between rounded bg-white px-4 py-2"
+    >
+      {type === 'gradient' && (
+        <GradientLegendItem name={name} legend_config={legend_config} settings={settings} />
+      )}
+      {type === 'choropleth' && (
+        <ChoroplethLegendItem name={name} legend_config={legend_config} settings={settings} />
+      )}
+      {type === 'basic' && (
+        <BasicLegendItem name={name} settings={settings} legend_config={legend_config} />
+      )}
+    </div>
+  );
+};
+
+export default MapLegendItem;
diff --git a/client/src/types/generated/strapi.schemas.ts b/client/src/types/generated/strapi.schemas.ts
index abe9b631..b572584b 100644
--- a/client/src/types/generated/strapi.schemas.ts
+++ b/client/src/types/generated/strapi.schemas.ts
@@ -1484,9 +1484,9 @@ export interface Layer {
   params_config?: unknown;
   decode_function?: string;
   legend_config?: unknown;
-  description?: string;
-  info?: string;
   slug?: string;
+  description?: string;
+  dialog?: string;
   createdAt?: string;
   updatedAt?: string;
   publishedAt?: string;
@@ -1687,9 +1687,9 @@ export type LayerRequestData = {
   params_config?: unknown;
   decode_function?: string;
   legend_config?: unknown;
-  description?: string;
-  info?: unknown;
   slug?: string;
+  description?: string;
+  dialog?: string;
 };
 
 export interface LayerRequest {
diff --git a/client/src/types/map.ts b/client/src/types/map.ts
index 4f1d4d93..a2997e17 100644
--- a/client/src/types/map.ts
+++ b/client/src/types/map.ts
@@ -6,11 +6,12 @@ export type LegendType = (typeof LEGEND_TYPE)[number];
 
 export type Legend = {
   type: LegendType;
-  title: string;
+  name?: string;
   info?: string;
   description?: string;
-  items?: { color: string; value: string }[];
+  items: { color: string; value: string; notes?: string }[];
   intersections?: { id: number; color: string }[];
+  notes?: string;
 };
 
 export type MapSettings = {