diff --git a/client/src/components/legend/item/component.tsx b/client/src/components/legend/item/component.tsx
index 95108fa2b6..dfda56c1f4 100644
--- a/client/src/components/legend/item/component.tsx
+++ b/client/src/components/legend/item/component.tsx
@@ -1,23 +1,24 @@
+import { useState, useCallback } from 'react';
 import classNames from 'classnames';
 import { EyeIcon, EyeOffIcon, XIcon } from '@heroicons/react/solid';
-import { useCallback } from 'react';
+import { InformationCircleIcon as Outline } from '@heroicons/react/outline';
 
 import OpacityControl from './opacityControl';
 import DragHandle from './dragHandle';
 import { ComparisonToggle } from './comparisonModeToggle';
 
-import InfoToolTip from 'components/info-tooltip/component';
+import Modal from 'components/modal';
 import Loading from 'components/loading';
 import { useAppSelector } from 'store/hooks';
 import { scenarios } from 'store/features/analysis';
 
+import type { Indicator, Layer, Material } from 'types';
 import type { Dispatch } from 'react';
 
 export type LegendItemProps = {
-  name: React.ReactNode;
-  info?: string;
+  name: string;
+  metadata: Layer['metadata'] | Indicator['metadata'] | Material['metadata'];
   unit?: string;
-  description?: string;
   isLoading?: boolean;
   showToolbar?: boolean;
   children?: React.ReactNode;
@@ -32,7 +33,7 @@ export type LegendItemProps = {
 
 export const LegendItem = ({
   name,
-  info,
+  metadata,
   unit,
   isLoading = false,
   showToolbar = true,
@@ -46,66 +47,88 @@ export const LegendItem = ({
   isActive,
 }: LegendItemProps) => {
   const { isComparisonEnabled } = useAppSelector(scenarios);
+  const [layerInfoVisibility, setLayerInfoVisibility] = useState(false);
+
+  const showLayerInfo = useCallback(() => {
+    setLayerInfoVisibility(true);
+  }, []);
+
+  const dismissLayerInfo = useCallback(() => {
+    setLayerInfoVisibility(false);
+  }, []);
 
   const handleToggleActive = useCallback(() => {
     onToggle(!isActive);
   }, [isActive, onToggle]);
 
   return (
-    <div
-      className={classNames('flex flex-row gap-1 relative group py-3 pl-1 pr-2', {
-        'bg-gray-50': !main,
-      })}
-    >
-      <DragHandle className="invisible group-hover:visible" />
-      <div className="flex-grow min-w-0 space-y-2">
-        {isLoading && (
-          <div className="flex justify-center w-full align-center">
-            <Loading />
-          </div>
-        )}
-        {name && (
-          <div
-            className={classNames('flex items-start justify-between flex-grow', {
-              hidden: isLoading,
-            })}
-          >
-            <div className="flex-grow max-w-full min-w-0 text-sm text-left">{name}</div>
-            {showToolbar && (
-              <div className="flex flex-row items-center">
-                <div className="flex items-center gap-x-1 mt-0.5">
-                  <OpacityControl opacity={opacity} onChange={onChangeOpacity} />
-                  {info && <InfoToolTip icon="outline" info={info} />}
-                  <button type="button" onClick={handleToggleActive}>
-                    {isActive ? (
-                      <EyeOffIcon className="w-4 h-4"></EyeOffIcon>
-                    ) : (
-                      <EyeIcon className="w-4 h-4"></EyeIcon>
-                    )}
-                  </button>
-                  {onHideLayer && (
-                    <button type="button" onClick={onHideLayer}>
-                      <XIcon className="w-4 h-4" />
+    <>
+      <div
+        className={classNames('flex flex-row gap-1 relative group py-3 pl-1 pr-2', {
+          'bg-gray-50': !main,
+        })}
+      >
+        <DragHandle className="invisible group-hover:visible" />
+        <div className="flex-grow min-w-0 space-y-2">
+          {isLoading && (
+            <div className="flex justify-center w-full align-center">
+              <Loading />
+            </div>
+          )}
+          {name && (
+            <div
+              className={classNames('flex items-start justify-between flex-grow', {
+                hidden: isLoading,
+              })}
+            >
+              <div className="flex-grow max-w-full min-w-0 text-sm text-left">{name}</div>
+              {showToolbar && (
+                <div className="flex flex-row items-center">
+                  <div className="flex items-center gap-x-1 mt-0.5">
+                    <OpacityControl opacity={opacity} onChange={onChangeOpacity} />
+                    {/* {info && <InfoToolTip icon="outline" info={info} />} */}
+                    <button type="button" onClick={showLayerInfo}>
+                      <Outline className="w-4 h-4 text-gray-900" />
                     </button>
-                  )}
+                    <button type="button" onClick={handleToggleActive}>
+                      {isActive ? (
+                        <EyeOffIcon className="w-4 h-4"></EyeOffIcon>
+                      ) : (
+                        <EyeIcon className="w-4 h-4"></EyeIcon>
+                      )}
+                    </button>
+                    {onHideLayer && (
+                      <button type="button" onClick={onHideLayer}>
+                        <XIcon className="w-4 h-4" />
+                      </button>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+          {!isLoading && (
+            <div className="space-y-2 overflow-hidden">
+              {showComparisonModeToggle && isComparisonEnabled && <ComparisonToggle />}
+              {children && (
+                <div className="flex flex-row justify-between w-full gap-2 text-gray-500">
+                  <div className="flex-grow">{children}</div>
+                  <div className="-mt-0.5 px text-2xs">{unit && `(${unit})`}</div>
                 </div>
-              </div>
-            )}
-          </div>
-        )}
-        {!isLoading && (
-          <div className="space-y-2 overflow-hidden">
-            {showComparisonModeToggle && isComparisonEnabled && <ComparisonToggle />}
-            {children && (
-              <div className="flex flex-row justify-between w-full gap-2 text-gray-500">
-                <div className="flex-grow">{children}</div>
-                <div className="-mt-0.5 px text-2xs">{unit && `(${unit})`}</div>
-              </div>
-            )}
-          </div>
-        )}
+              )}
+            </div>
+          )}
+        </div>
       </div>
-    </div>
+      <Modal
+        size="narrow"
+        title={metadata?.name}
+        open={layerInfoVisibility}
+        onDismiss={dismissLayerInfo}
+      >
+        {metadata?.description}
+      </Modal>
+    </>
   );
 };
 
diff --git a/client/src/containers/analysis-visualization/analysis-legend/contextual-legend-item/component.tsx b/client/src/containers/analysis-visualization/analysis-legend/contextual-legend-item/component.tsx
index ffbd2e80da..92204eb316 100644
--- a/client/src/containers/analysis-visualization/analysis-legend/contextual-legend-item/component.tsx
+++ b/client/src/containers/analysis-visualization/analysis-legend/contextual-legend-item/component.tsx
@@ -74,9 +74,8 @@ const ContextualLegendItem = ({ layer }: ContextualLegendItemProps) => {
       onToggle={onToggleLayer}
       id={layer.id}
       isLoading={areLayersLoading || isLoadingData}
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      name={layer.metadata!.legend.name}
-      info={layer.metadata?.description}
+      name={layer.metadata?.legend?.name}
+      metadata={layer.metadata}
       opacity={layer.opacity}
       {...layer.metadata?.legend}
       onChangeOpacity={handleOpacity}
diff --git a/client/src/containers/analysis-visualization/analysis-legend/impact-legend-item/component.tsx b/client/src/containers/analysis-visualization/analysis-legend/impact-legend-item/component.tsx
index d4fcb8de8b..c07640ea85 100644
--- a/client/src/containers/analysis-visualization/analysis-legend/impact-legend-item/component.tsx
+++ b/client/src/containers/analysis-visualization/analysis-legend/impact-legend-item/component.tsx
@@ -63,9 +63,10 @@ const ImpactLayer = () => {
     <LegendItem
       isActive={layer.active}
       onToggle={onToggleLayer}
-      info={indicator?.metadata?.description}
+      // info={indicator?.metadata?.description}
       {...layer.metadata.legend}
       name={name}
+      metadata={indicator?.metadata}
       opacity={layer.opacity}
       onChangeOpacity={handleOpacity}
       showComparisonModeToggle
diff --git a/client/src/containers/analysis-visualization/analysis-legend/material-legend-item/component.tsx b/client/src/containers/analysis-visualization/analysis-legend/material-legend-item/component.tsx
index 3e4767f194..a101d91ed8 100644
--- a/client/src/containers/analysis-visualization/analysis-legend/material-legend-item/component.tsx
+++ b/client/src/containers/analysis-visualization/analysis-legend/material-legend-item/component.tsx
@@ -105,9 +105,9 @@ const MaterialLayer = () => {
       isActive={layer.active}
       onToggle={onToggleLayer}
       name={Selector}
-      info={material?.metadata?.name}
       {...data?.metadata?.legend}
       unit={data?.metadata?.unit}
+      metadata={material?.metadata}
       showToolbar
       opacity={layer.opacity}
       onChangeOpacity={handleOpacity}
diff --git a/client/src/types.d.ts b/client/src/types.d.ts
index c9581315b0..1c8607a9cb 100644
--- a/client/src/types.d.ts
+++ b/client/src/types.d.ts
@@ -131,6 +131,7 @@ export type Material = {
     cautions: string;
     citation: string;
     datasets: string[];
+    description?: string;
     'date of content': string;
     'frequency of updates': string;
     'geographic coverage': string;