diff --git a/packages/base/src/dialogs/symbology/hooks/useGetSymbology.ts b/packages/base/src/dialogs/symbology/hooks/useGetSymbology.ts
new file mode 100644
index 000000000..a127fcf6e
--- /dev/null
+++ b/packages/base/src/dialogs/symbology/hooks/useGetSymbology.ts
@@ -0,0 +1,83 @@
+import { IJupyterGISModel } from '@jupytergis/schema';
+import { useEffect, useState } from 'react';
+
+interface IUseGetSymbologyProps {
+  layerId?: string;
+  model: IJupyterGISModel;
+}
+
+interface IUseGetSymbologyResult {
+  symbology: Record<string, any> | null;
+  isLoading: boolean;
+  error?: Error;
+}
+
+/**
+ * Extracts symbology information (paint/layout + symbologyState)
+ * for a given layer from the JupyterGIS model.
+ * Keeps symbology updated when the layer changes.
+ */
+export const useGetSymbology = ({
+  layerId,
+  model,
+}: IUseGetSymbologyProps): IUseGetSymbologyResult => {
+  const [symbology, setSymbology] = useState<Record<string, any> | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | undefined>();
+
+  useEffect(() => {
+    if (!layerId) {
+      return;
+    }
+
+    let disposed = false;
+
+    const fetchSymbology = () => {
+      try {
+        setIsLoading(true);
+        setError(undefined);
+
+        const layer = model.getLayer(layerId);
+
+        if (!layer) {
+          throw new Error(`Layer not found: ${layerId}`);
+        }
+
+        const params = layer.parameters ?? {};
+        const { symbologyState, color, ...rest } = params;
+
+        const result: Record<string, any> = {
+          ...rest,
+          ...(color ? { color } : {}),
+          ...(symbologyState ? { symbologyState } : {}),
+        };
+
+        if (!disposed) {
+          setSymbology(result);
+        }
+      } catch (err) {
+        if (!disposed) {
+          setError(err as Error);
+          setSymbology(null);
+        }
+      } finally {
+        if (!disposed) {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    // initial load
+    fetchSymbology();
+
+    model.sharedModel.awareness.on('change', () => {
+      fetchSymbology();
+    });
+
+    return () => {
+      disposed = true;
+    };
+  }, [layerId, model]);
+
+  return { symbology, isLoading, error };
+};
diff --git a/packages/base/src/panelview/components/layers.tsx b/packages/base/src/panelview/components/layers.tsx
index 4014ae92f..7909dee65 100644
--- a/packages/base/src/panelview/components/layers.tsx
+++ b/packages/base/src/panelview/components/layers.tsx
@@ -8,7 +8,12 @@ import {
 } from '@jupytergis/schema';
 import { DOMUtils } from '@jupyterlab/apputils';
 import { IStateDB } from '@jupyterlab/statedb';
-import { Button, LabIcon, caretDownIcon } from '@jupyterlab/ui-components';
+import {
+  Button,
+  LabIcon,
+  caretDownIcon,
+  caretRightIcon,
+} from '@jupyterlab/ui-components';
 import { CommandRegistry } from '@lumino/commands';
 import { ReadonlyPartialJSONObject, UUID } from '@lumino/coreutils';
 import React, {
@@ -18,8 +23,10 @@ import React, {
 } from 'react';
 
 import { CommandIDs, icons } from '@/src/constants';
+import { useGetSymbology } from '@/src/dialogs/symbology/hooks/useGetSymbology';
 import { nonVisibilityIcon, visibilityIcon } from '@/src/icons';
 import { ILeftPanelClickHandlerParams } from '@/src/panelview/leftpanel';
+import { LegendItem } from './legendItem';
 
 const LAYER_GROUP_CLASS = 'jp-gis-layerGroup';
 const LAYER_GROUP_HEADER_CLASS = 'jp-gis-layerGroupHeader';
@@ -394,6 +401,15 @@ const LayerComponent: React.FC<ILayerProps> = props => {
     // TODO Support multi-selection as `model?.jGISModel?.localState?.selected.value` does
     isSelected(layerId, gisModel),
   );
+  const [expanded, setExpanded] = useState(false);
+
+  const { symbology } = useGetSymbology({
+    layerId,
+    model: gisModel as IJupyterGISModel,
+  });
+
+  const hasSupportedSymbology = symbology?.symbologyState !== undefined;
+
   const name = layer.name;
 
   useEffect(() => {
@@ -444,12 +460,32 @@ const LayerComponent: React.FC<ILayerProps> = props => {
       onDragOver={Private.onDragOver}
       onDragEnd={Private.onDragEnd}
       data-id={layerId}
+      style={{ display: 'flex', flexDirection: 'column' }}
     >
       <div
         className={LAYER_TITLE_CLASS}
         onClick={setSelection}
         onContextMenu={setSelection}
+        style={{ display: 'flex' }}
       >
+        {/* Expand/collapse legend button (only if symbology is supported) */}
+        {hasSupportedSymbology && (
+          <Button
+            minimal
+            onClick={e => {
+              e.stopPropagation();
+              setExpanded(v => !v);
+            }}
+            title={expanded ? 'Hide legend' : 'Show legend'}
+          >
+            <LabIcon.resolveReact
+              icon={expanded ? caretDownIcon : caretRightIcon}
+              tag="span"
+            />
+          </Button>
+        )}
+
+        {/* Visibility toggle */}
         <Button
           title={layer.visible ? 'Hide layer' : 'Show layer'}
           onClick={toggleVisibility}
@@ -473,6 +509,13 @@ const LayerComponent: React.FC<ILayerProps> = props => {
           {name}
         </span>
       </div>
+
+      {/* Show legend only if supported symbology */}
+      {expanded && gisModel && hasSupportedSymbology && (
+        <div style={{ marginTop: 6, width: '100%' }}>
+          <LegendItem layerId={layerId} model={gisModel} />
+        </div>
+      )}
     </div>
   );
 };
diff --git a/packages/base/src/panelview/components/legendItem.tsx b/packages/base/src/panelview/components/legendItem.tsx
new file mode 100644
index 000000000..50fa2fbd2
--- /dev/null
+++ b/packages/base/src/panelview/components/legendItem.tsx
@@ -0,0 +1,243 @@
+import { IJupyterGISModel } from '@jupytergis/schema';
+import React, { useEffect, useState } from 'react';
+
+import { useGetSymbology } from '@/src/dialogs/symbology/hooks/useGetSymbology';
+
+export const LegendItem: React.FC<{
+  layerId: string;
+  model: IJupyterGISModel;
+}> = ({ layerId, model }) => {
+  const { symbology, isLoading, error } = useGetSymbology({ layerId, model });
+  const [content, setContent] = useState<JSX.Element | null>(null);
+
+  const parseColorStops = (expr: any): { value: number; color: string }[] => {
+    if (!Array.isArray(expr) || expr[0] !== 'interpolate') {
+      return [];
+    }
+    const stops: { value: number; color: string }[] = [];
+    for (let i = 3; i < expr.length; i += 2) {
+      const value = expr[i] as number;
+      const rgba = expr[i + 1] as [number, number, number, number] | string;
+      const color = Array.isArray(rgba)
+        ? `rgba(${rgba[0]},${rgba[1]},${rgba[2]},${rgba[3]})`
+        : String(rgba);
+      stops.push({ value, color });
+    }
+    return stops;
+  };
+
+  const parseCaseCategories = (
+    expr: any,
+  ): { category: string | number; color: string }[] => {
+    if (!Array.isArray(expr) || expr[0] !== 'case') {
+      return [];
+    }
+    const categories: { category: string | number; color: string }[] = [];
+    for (let i = 1; i < expr.length - 1; i += 2) {
+      const condition = expr[i];
+      const colorExpr = expr[i + 1];
+      let category: any = '';
+      if (Array.isArray(condition) && condition[0] === '==') {
+        category = condition[2];
+      }
+      let color = '';
+      if (Array.isArray(colorExpr)) {
+        color = `rgba(${colorExpr[0]},${colorExpr[1]},${colorExpr[2]},${colorExpr[3]})`;
+      } else if (typeof colorExpr === 'string') {
+        color = colorExpr;
+      }
+      categories.push({ category, color });
+    }
+    return categories;
+  };
+
+  useEffect(() => {
+    if (isLoading) {
+      setContent(<p style={{ fontSize: '0.8em' }}>Loading…</p>);
+      return;
+    }
+    if (error) {
+      setContent(
+        <p style={{ color: 'red', fontSize: '0.8em' }}>{error.message}</p>,
+      );
+      return;
+    }
+    if (!symbology) {
+      setContent(<p style={{ fontSize: '0.8em' }}>No symbology</p>);
+      return;
+    }
+
+    const renderType = symbology.symbologyState?.renderType;
+    const property = symbology.symbologyState?.value;
+    const fill =
+      symbology.color?.['fill-color'] ?? symbology.color?.['circle-fill-color'];
+    const stroke =
+      symbology.color?.['stroke-color'] ??
+      symbology.color?.['circle-stroke-color'];
+
+    // Single Symbol
+    if (renderType === 'Single Symbol') {
+      setContent(
+        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', padding: 6 }}>
+          {fill && (
+            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+              <span
+                style={{
+                  width: 16,
+                  height: 16,
+                  border: '1px solid #000',
+                  background: fill,
+                }}
+              />
+              <span style={{ fontSize: '0.8em' }}>Fill</span>
+            </div>
+          )}
+          {stroke && (
+            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+              <span
+                style={{
+                  width: 24,
+                  height: 2,
+                  background: stroke,
+                  border: '1px solid #000',
+                }}
+              />
+              <span style={{ fontSize: '0.8em' }}>Stroke</span>
+            </div>
+          )}
+          {!fill && !stroke && (
+            <span style={{ fontSize: '0.8em' }}>No symbol colors</span>
+          )}
+        </div>,
+      );
+      return;
+    }
+
+    // Graduated
+    if (renderType === 'Graduated') {
+      const stops = parseColorStops(fill || stroke);
+      if (!stops.length) {
+        setContent(<p style={{ fontSize: '0.8em' }}>No graduated symbology</p>);
+        return;
+      }
+
+      const segments = stops
+        .map((s, i) => {
+          const pct = (i / (stops.length - 1)) * 100;
+          return `${s.color} ${pct}%`;
+        })
+        .join(', ');
+      const gradient = `linear-gradient(to right, ${segments})`;
+
+      setContent(
+        <div style={{ padding: 6, width: '90%' }}>
+          {property && (
+            <div style={{ fontSize: '1em', marginBottom: 20 }}>
+              <strong>{property}</strong>
+            </div>
+          )}
+          <div
+            style={{
+              position: 'relative',
+              height: 12,
+              background: gradient,
+              border: '1px solid #ccc',
+              borderRadius: 3,
+              marginBottom: 20,
+              marginTop: 10,
+            }}
+          >
+            {stops.map((s, i) => {
+              const left = (i / (stops.length - 1)) * 100;
+              const up = i % 2 === 0;
+              return (
+                <div
+                  key={i}
+                  style={{
+                    position: 'absolute',
+                    left: `${left}%`,
+                    transform: 'translateX(-50%)',
+                  }}
+                >
+                  <div
+                    style={{
+                      width: 1,
+                      height: 8,
+                      background: '#333',
+                      margin: '0 auto',
+                    }}
+                  />
+                  <div
+                    style={{
+                      position: 'absolute',
+                      top: up ? -18 : 12,
+                      fontSize: '0.7em',
+                      whiteSpace: 'nowrap',
+                      marginTop: up ? 0 : 4,
+                    }}
+                  >
+                    {s.value.toFixed(2)}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>,
+      );
+      return;
+    }
+
+    // Categorized
+    if (renderType === 'Categorized') {
+      const cats = parseCaseCategories(fill || stroke);
+      if (!cats.length) {
+        setContent(
+          <p style={{ fontSize: '0.8em' }}>No categorized symbology</p>,
+        );
+        return;
+      }
+
+      setContent(
+        <div style={{ padding: 6 }}>
+          {property && (
+            <div style={{ fontSize: '1em', marginBottom: 6 }}>
+              <strong>{property}</strong>
+            </div>
+          )}
+          <div
+            style={{
+              display: 'grid',
+              gap: 6,
+              maxHeight: 200,
+              overflowY: 'auto',
+              paddingRight: 4,
+            }}
+          >
+            {cats.map((c, i) => (
+              <div
+                key={i}
+                style={{ display: 'flex', alignItems: 'center', gap: 8 }}
+              >
+                <span
+                  style={{
+                    width: 16,
+                    height: 16,
+                    background: c.color || '#ccc',
+                    border: '1px solid #000',
+                    borderRadius: 2,
+                  }}
+                />
+                <span style={{ fontSize: '0.75em' }}>{String(c.category)}</span>
+              </div>
+            ))}
+          </div>
+        </div>,
+      );
+      return;
+    }
+
+    setContent(<p>Unsupported symbology: {String(renderType)}</p>);
+  }, [symbology, isLoading, error]);
+
+  return <div>{content}</div>;
+};
diff --git a/packages/base/style/leftPanel.css b/packages/base/style/leftPanel.css
index 4a5d4c5fe..6765a7ec6 100644
--- a/packages/base/style/leftPanel.css
+++ b/packages/base/style/leftPanel.css
@@ -41,7 +41,7 @@
 .jp-gis-source {
   display: flex;
   flex-direction: row;
-  align-items: center;
+  /* align-items: center; */
   color: var(--jp-ui-font-color1);
 }