diff --git a/src/app/admin/designs/[id]/edit/page.tsx b/src/app/admin/designs/[id]/edit/page.tsx
index 5fe2cd6..cac3ddb 100644
--- a/src/app/admin/designs/[id]/edit/page.tsx
+++ b/src/app/admin/designs/[id]/edit/page.tsx
@@ -110,7 +110,13 @@ export default function EditDesignPage({ params }: { params: { id: string } }) {
         </div>
 
         {/* Full Design Canvas */}
-        <DesignCanvas product={design.product} isAdminEditing={true} />
+        <DesignCanvas
+          product={design.product}
+          isAdminEditing={true}
+          initialDesignJson={design.designJson}
+          initialColor={design.color}
+          initialSize={design.size}
+        />
       </div>
     </div>
   );
diff --git a/src/components/DesignCanvas.tsx b/src/components/DesignCanvas.tsx
index 2454e23..5e67076 100644
--- a/src/components/DesignCanvas.tsx
+++ b/src/components/DesignCanvas.tsx
@@ -487,9 +487,21 @@ function generateCurvePath(type: string, radius: number, reverse: boolean = fals
   return path;
 }
 
-export default function DesignCanvas({ product, isAdminEditing = false }: { product: ProductDTO; isAdminEditing?: boolean }) {
-  const [color, setColor] = useState(product.colors[0]);
-  const [size, setSize] = useState<string | null>(product.sizes[0] ?? null);
+export default function DesignCanvas({
+  product,
+  isAdminEditing = false,
+  initialDesignJson,
+  initialColor,
+  initialSize,
+}: {
+  product: ProductDTO;
+  isAdminEditing?: boolean;
+  initialDesignJson?: string;
+  initialColor?: string;
+  initialSize?: string | null;
+}) {
+  const [color, setColor] = useState(initialColor ?? product.colors[0]);
+  const [size, setSize] = useState<string | null>(initialSize ?? (product.sizes[0] ?? null));
   const [designWidthCm, setDesignWidthCm] = useState<number | null>(null);
   const [designHeightCm, setDesignHeightCm] = useState<number | null>(null);
   const [view, setView] = useState<'front' | 'back'>('front');
@@ -527,6 +539,26 @@ export default function DesignCanvas({ product, isAdminEditing = false }: { prod
   // touching that coordinate system. Konva reads the container's actual
   // rendered (post-transform) bounding box for pointer math, so clicks/drags
   // still line up correctly at any scale.
+  useEffect(() => {
+    // Load admin-provided design for editing
+    if (isAdminEditing && initialDesignJson) {
+      try {
+        const design = JSON.parse(initialDesignJson);
+        if (design.front && Array.isArray(design.front)) {
+          setElementsFront(design.front);
+          console.log('✓ Loaded', design.front.length, 'front elements from design approval');
+        }
+        if (design.back && Array.isArray(design.back)) {
+          setElementsBack(design.back);
+          console.log('✓ Loaded', design.back.length, 'back elements from design approval');
+        }
+      } catch (e) {
+        console.error('Failed to load design approval JSON:', e);
+      }
+      return; // Skip draft loading when editing approved design
+    }
+  }, [isAdminEditing, initialDesignJson]);
+
   useEffect(() => {
     if (typeof window === 'undefined') return;