diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index 6b303f3..ff57e8c 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -10,8 +10,10 @@ import {
   getProjects, deleteProject, updateProject,
   getProjectFolders, createProjectFolder, renameProjectFolder, deleteProjectFolder,
   moveProjectToFolder, moveProjectFolder, getProjectShares, getUsers, createProjectShare,
+  getDrawings, getElements,
   type Project, type ProjectFolder, type ProjectShare, type SimpleUser,
 } from '../services/api';
+import type { CADElement } from '../types/cad.types';
 
 const API_BASE = import.meta.env.VITE_API_BASE || '';
 const UNFILED_ID = '__unfiled__';
@@ -20,43 +22,96 @@ interface DashboardProps {
   onOpenProject: (projectId: string) => void;
 }
 
-/** Render a static SVG preview of a project's first few elements */
-function CanvasPreview({ project }: { project: Project }) {
-  // Static preview: use project description or name hash to generate a deterministic mini-canvas
-  const seed = project.id.charCodeAt(0) + project.id.charCodeAt(project.id.length - 1);
-  const shapes = useMemo(() => {
-    const arr: React.ReactNode[] = [];
-    const colors = ['#2563eb', '#8b5cf6', '#10b981', '#f59e0b'];
-    for (let i = 0; i < 4; i++) {
-      const x = 10 + ((seed + i * 23) % 60);
-      const y = 5 + ((seed + i * 17) % 40);
-      const w = 8 + ((seed + i * 13) % 20);
-      const h = 8 + ((seed + i * 7) % 15);
-      const color = colors[i % colors.length];
-      const shapeType = (seed + i) % 3;
-      if (shapeType === 0) {
-        arr.push(
-          <rect key={i} x={x} y={y} width={w} height={h} fill="none" stroke={color} strokeWidth={1} rx={1} />
-        );
-      } else if (shapeType === 1) {
-        arr.push(
-          <circle key={i} cx={x + w / 2} cy={y + h / 2} r={Math.min(w, h) / 2} fill="none" stroke={color} strokeWidth={1} />
-        );
-      } else {
-        arr.push(
-          <line key={i} x1={x} y1={y} x2={x + w} y2={y + h} stroke={color} strokeWidth={1} />
-        );
+/** Render a real SVG preview of a project's first drawing elements */
+function CanvasPreview({ project, token }: { project: Project; token: string }) {
+  const [elements, setElements] = useState<CADElement[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+    async function loadPreview() {
+      try {
+        const drawings = await getDrawings(token, project.id);
+        if (drawings.length === 0) { if (!cancelled) setElements([]); return; }
+        const els = await getElements(token, drawings[0].id);
+        if (!cancelled) setElements(els);
+      } catch {
+        if (!cancelled) setElements([]);
+      } finally {
+        if (!cancelled) setLoading(false);
       }
     }
-    return arr;
-  }, [seed]);
+    loadPreview();
+    return () => { cancelled = true; };
+  }, [token, project.id]);
+
+  // Compute bounding box of all elements for viewBox scaling
+  const bbox = useMemo(() => {
+    if (elements.length === 0) return null;
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const el of elements) {
+      minX = Math.min(minX, el.x);
+      minY = Math.min(minY, el.y);
+      maxX = Math.max(maxX, el.x + el.width);
+      maxY = Math.max(maxY, el.y + el.height);
+    }
+    return { minX, minY, w: Math.max(maxX - minX, 10), h: Math.max(maxY - minY, 10) };
+  }, [elements]);
+
+  const svgElements = useMemo(() => {
+    if (!bbox || elements.length === 0) return [];
+    return elements.slice(0, 50).map((el) => {
+      const stroke = el.properties.stroke || '#60a5fa';
+      const fill = el.properties.fill || 'none';
+      const sw = Math.max((el.properties.strokeWidth || 1), 0.5);
+      const x = el.x - bbox.minX;
+      const y = el.y - bbox.minY;
+      const w = el.width;
+      const h = el.height;
+      switch (el.type) {
+        case 'rect':
+        case 'table':
+        case 'stage':
+          return <rect key={el.id} x={x} y={y} width={w} height={h} fill={fill} stroke={stroke} strokeWidth={sw} />;
+        case 'circle':
+          return <circle key={el.id} cx={x + w/2} cy={y + h/2} r={Math.min(w, h)/2} fill={fill} stroke={stroke} strokeWidth={sw} />;
+        case 'line':
+        case 'leader':
+          return <line key={el.id} x1={x} y1={y} x2={x + w} y2={y + h} stroke={stroke} strokeWidth={sw} />;
+        case 'text':
+          return <text key={el.id} x={x} y={y + Math.min(h, 10)} fontSize={Math.min(el.properties.fontSize || 8, 10)} fill={stroke}>{el.properties.text || ''}</text>;
+        case 'polygon':
+        case 'polyline':
+          if (el.properties.points && el.properties.points.length > 1) {
+            const pts = el.properties.points.map(p => `${p.x - bbox.minX},${p.y - bbox.minY}`).join(' ');
+            return <polygon key={el.id} points={pts} fill={fill} stroke={stroke} strokeWidth={sw} />;
+          }
+          return null;
+        case 'chair':
+          return <circle key={el.id} cx={x + w/2} cy={y + h/2} r={Math.min(w, h)/2} fill={fill} stroke={stroke} strokeWidth={sw} />;
+        case 'arc':
+          return <path key={el.id} d={`M ${x} ${y+h/2} A ${w/2} ${h/2} 0 0 1 ${x+w} ${y+h/2}`} fill="none" stroke={stroke} strokeWidth={sw} />;
+        default:
+          return <rect key={el.id} x={x} y={y} width={w} height={h} fill="none" stroke={stroke} strokeWidth={sw} strokeDasharray="2,2" />;
+      }
+    });
+  }, [elements, bbox]);
 
   return (
     <div className="dashboard-card-preview" title="Vorschau der Zeichenfläche">
-      <svg viewBox="0 0 100 60" preserveAspectRatio="xMidYMid meet" className="dashboard-preview-svg">
-        <rect x="0" y="0" width="100" height="60" fill="var(--color-canvas-bg-2, #1e293b)" />
-        {shapes}
-      </svg>
+      {loading ? (
+        <div className="dashboard-preview-loading">...</div>
+      ) : elements.length === 0 || !bbox ? (
+        <svg viewBox="0 0 100 60" preserveAspectRatio="xMidYMid meet" className="dashboard-preview-svg">
+          <rect x="0" y="0" width="100" height="60" fill="var(--color-canvas-bg-2, #1e293b)" />
+          <text x="50" y="35" textAnchor="middle" fontSize="6" fill="#64748b">Leere Zeichnung</text>
+        </svg>
+      ) : (
+        <svg viewBox={`${bbox.minX - 5} ${bbox.minY - 5} ${bbox.w + 10} ${bbox.h + 10}`} preserveAspectRatio="xMidYMid meet" className="dashboard-preview-svg">
+          <rect x={bbox.minX - 5} y={bbox.minY - 5} width={bbox.w + 10} height={bbox.h + 10} fill="var(--color-canvas-bg-2, #1e293b)" />
+          {svgElements}
+        </svg>
+      )}
     </div>
   );
 }
@@ -624,7 +679,7 @@ export function Dashboard({ onOpenProject }: DashboardProps) {
                   onDragStart={(e) => handleProjectDragStart(e, project.id)}
                   onDragEnd={() => { setDraggedProjectId(null); setDragOverFolderId(null); }}
                 >
-                  <CanvasPreview project={project} />
+                  <CanvasPreview project={project} token={token!} />
                   <h3 className="dashboard-card-title">{project.name}</h3>
                   {project.description && <p className="dashboard-card-desc">{project.description}</p>}
                   <div className="dashboard-project-meta">