diff --git a/src/App.css b/src/App.css
index 8f860de..8b661f3 100644
--- a/src/App.css
+++ b/src/App.css
@@ -8,53 +8,53 @@
 @layer base {
   :root {
     /* Background colors */
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+    --background: hsl(0 0% 100%);
+    --foreground: hsl(222.2 84% 4.9%);
 
     /* Card colors */
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    --card: hsl(0 0% 100%);
+    --card-foreground: hsl(222.2 84% 4.9%);
 
     /* Popover colors */
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
+    --popover: hsl(0 0% 100%);
+    --popover-foreground: hsl(222.2 84% 4.9%);
 
     /* Primary - Blue (existing brand color) */
-    --primary: 221.2 83.2% 53.3%; /* blue-600 */
-    --primary-foreground: 210 40% 98%;
+    --primary: hsl(221.2 83.2% 53.3%); /* blue-600 */
+    --primary-foreground: hsl(210 40% 98%);
 
     /* Secondary - Orange (existing secondary color) */
-    --secondary: 24.6 95% 53.1%; /* orange-500 */
-    --secondary-foreground: 60 9.1% 97.8%;
+    --secondary: hsl(24.6 95% 53.1%); /* orange-500 */
+    --secondary-foreground: hsl(60 9.1% 97.8%);
 
     /* Muted colors */
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+    --muted: hsl(210 40% 96.1%);
+    --muted-foreground: hsl(215.4 16.3% 46.9%);
 
     /* Accent - Purple (existing accent color) */
-    --accent: 262.1 83.3% 57.8%; /* purple-500 */
-    --accent-foreground: 210 40% 98%;
+    --accent: hsl(262.1 83.3% 57.8%); /* purple-500 */
+    --accent-foreground: hsl(210 40% 98%);
 
     /* Destructive - Red (existing danger color) */
-    --destructive: 0 84.2% 60.2%; /* red-500 */
-    --destructive-foreground: 210 40% 98%;
+    --destructive: hsl(0 84.2% 60.2%); /* red-500 */
+    --destructive-foreground: hsl(210 40% 98%);
 
     /* Success - Green (existing success color) */
-    --success: 142.1 76.2% 36.3%; /* green-600 */
-    --success-foreground: 210 40% 98%;
+    --success: hsl(142.1 76.2% 36.3%); /* green-600 */
+    --success-foreground: hsl(210 40% 98%);
 
     /* Warning - Amber (existing warning color) */
-    --warning: 45.4 93.4% 47.5%; /* amber-500 */
-    --warning-foreground: 60 9.1% 97.8%;
+    --warning: hsl(45.4 93.4% 47.5%); /* amber-500 */
+    --warning-foreground: hsl(60 9.1% 97.8%);
 
     /* Info - Cyan (existing info color) */
-    --info: 188.7 85.7% 53.3%; /* cyan-500 */
-    --info-foreground: 210 40% 98%;
+    --info: hsl(188.7 85.7% 53.3%); /* cyan-500 */
+    --info-foreground: hsl(210 40% 98%);
 
     /* Border and input */
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 221.2 83.2% 53.3%; /* matches primary */
+    --border: hsl(214.3 31.8% 91.4%);
+    --input: hsl(214.3 31.8% 91.4%);
+    --ring: hsl(221.2 83.2% 53.3%); /* matches primary */
 
     /* Radius */
     --radius: 0.5rem;
@@ -62,42 +62,43 @@
 
   @media (prefers-color-scheme: dark) {
     :root {
-      --background: 222.2 84% 4.9%;
-      --foreground: 210 40% 98%;
+      --background: hsl(222.2 84% 4.9%);
 
-      --card: 222.2 84% 4.9%;
-      --card-foreground: 210 40% 98%;
+      --foreground: hsl(210 40% 98%);
 
-      --popover: 222.2 84% 4.9%;
-      --popover-foreground: 210 40% 98%;
+      --card: oklch(27.8% 0.033 256.848);
+      --card-foreground: hsl(210 40% 98%);
 
-      --primary: 217.2 91.2% 59.8%; /* blue-500 lighter for dark */
-      --primary-foreground: 210 40% 98%;
+      --popover: hsl(222.2 84% 4.9%);
+      --popover-foreground: hsl(210 40% 98%);
 
-      --secondary: 20.5 90.2% 48.2%; /* orange-600 for dark */
-      --secondary-foreground: 210 40% 98%;
+      --primary: hsl(217.2 91.2% 59.8%); /* blue-500 lighter for dark */
+      --primary-foreground: hsl(210 40% 98%);
 
-      --muted: 217.2 32.6% 17.5%;
-      --muted-foreground: 215 20.2% 65.1%;
+      --secondary: hsl(20.5 90.2% 48.2%); /* orange-600 for dark */
+      --secondary-foreground: hsl(210 40% 98%);
 
-      --accent: 263.4 70% 50.4%; /* purple-600 for dark */
-      --accent-foreground: 210 40% 98%;
+      --muted: hsl(217.2 32.6% 17.5%);
+      --muted-foreground: hsl(215 20.2% 65.1%);
 
-      --destructive: 0 62.8% 30.6%; /* red-900 */
-      --destructive-foreground: 210 40% 98%;
+      --accent: hsl(263.4 70% 50.4%); /* purple-600 for dark */
+      --accent-foreground: hsl(210 40% 98%);
 
-      --success: 142.1 70.6% 45.3%; /* green-500 for dark */
-      --success-foreground: 210 40% 98%;
+      --destructive: hsl(0 62.8% 30.6%); /* red-900 */
+      --destructive-foreground: hsl(210 40% 98%);
 
-      --warning: 47.9 95.8% 53.1%; /* amber-400 for dark */
-      --warning-foreground: 26 83.3% 14.1%;
+      --success: hsl(142.1 70.6% 45.3%); /* green-500 for dark */
+      --success-foreground: hsl(210 40% 98%);
 
-      --info: 188.7 85.7% 53.3%; /* cyan-500 */
-      --info-foreground: 210 40% 98%;
+      --warning: hsl(47.9 95.8% 53.1%); /* amber-400 for dark */
+      --warning-foreground: hsl(26 83.3% 14.1%);
 
-      --border: 217.2 32.6% 17.5%;
-      --input: 217.2 32.6% 17.5%;
-      --ring: 224.3 76.3% 48%;
+      --info: hsl(188.7 85.7% 53.3%); /* cyan-500 */
+      --info-foreground: hsl(210 40% 98%);
+
+      --border: hsl(217.2 32.6% 37.5%);
+      --input: hsl(217.2 32.6% 47.5%);
+      --ring: hsl(224.3 76.3% 48%);
     }
   }
 }
@@ -109,25 +110,25 @@
 
 @theme {
   /* SHADCN/UI COLORS - For bg-primary, bg-destructive, etc. */
-  --color-primary: hsl(var(--primary));
-  --color-primary-foreground: hsl(var(--primary-foreground));
-  --color-secondary: hsl(var(--secondary));
-  --color-secondary-foreground: hsl(var(--secondary-foreground));
-  --color-destructive: hsl(var(--destructive));
-  --color-destructive-foreground: hsl(var(--destructive-foreground));
-  --color-muted: hsl(var(--muted));
-  --color-muted-foreground: hsl(var(--muted-foreground));
-  --color-accent: hsl(var(--accent));
-  --color-accent-foreground: hsl(var(--accent-foreground));
-  --color-background: hsl(var(--background));
-  --color-foreground: hsl(var(--foreground));
-  --color-card: hsl(var(--card));
-  --color-card-foreground: hsl(var(--card-foreground));
-  --color-popover: hsl(var(--popover));
-  --color-popover-foreground: hsl(var(--popover-foreground));
-  --color-border: hsl(var(--border));
-  --color-input: hsl(var(--input));
-  --color-ring: hsl(var(--ring));
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
 
   /* PRIMARY - Main brand color (references Blue) - For bg-primary-600 style classes */
   --color-primary-50: var(--color-blue-50);
@@ -227,7 +228,7 @@
   /* Canvas/Konva-specific colors for embroidery rendering */
   --color-canvas-grid: #e0e0e0;
   --color-canvas-origin: #888888;
-  --color-canvas-hoop: #2196F3;
+  --color-canvas-hoop: #2196f3;
   --color-canvas-bounds: #ff0000;
   --color-canvas-position: #ff0000;
 }
@@ -292,7 +293,8 @@
 
 /* Pulse glow effect - uses primary-600 */
 @keyframes pulseGlow {
-  0%, 100% {
+  0%,
+  100% {
     box-shadow: 0 0 0 0 rgb(37 99 235 / 0.4); /* primary-600 with 40% opacity */
   }
   50% {
diff --git a/src/App.tsx b/src/App.tsx
index a42724f..f732876 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -66,7 +66,7 @@ function App() {
   }, [resumedPattern, resumeFileName, pesData, setPattern, setPatternOffset]);
 
   return (
-    <div className="h-screen flex flex-col bg-gray-300 dark:bg-gray-900 overflow-hidden">
+    <div className="h-screen flex flex-col bg-gray-100 dark:bg-gray-900 overflow-hidden">
       <AppHeader />
 
       <div className="flex-1 p-4 sm:p-5 lg:p-6 w-full overflow-y-auto lg:overflow-hidden flex flex-col">
diff --git a/src/components/PatternCanvasPlaceholder.tsx b/src/components/PatternCanvasPlaceholder.tsx
index d2ebf1e..4e9d2ec 100644
--- a/src/components/PatternCanvasPlaceholder.tsx
+++ b/src/components/PatternCanvasPlaceholder.tsx
@@ -1,10 +1,29 @@
-import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  CardDescription,
+} from "@/components/ui/card";
+import { PhotoIcon } from "@heroicons/react/24/solid";
 
 export function PatternCanvasPlaceholder() {
   return (
-    <Card className="p-0 gap-0 lg:h-full animate-fadeIn flex flex-col">
-      <CardHeader className="p-6 pb-4 border-b-2 border-gray-300 dark:border-gray-600">
-        <CardTitle className="text-base lg:text-lg">Pattern Preview</CardTitle>
+    <Card
+      className={`p-0 gap-0 lg:h-full flex flex-col border-l-4  border-gray-400 dark:border-gray-600`}
+    >
+      <CardHeader className="p-4 pb-3">
+        <div className="flex items-start gap-3">
+          <PhotoIcon
+            className={`w-6 h-6 text-gray-600 dark:text-gray-400 flex-shrink-0 mt-0.5`}
+          />
+          <div className="flex-1 min-w-0">
+            <CardTitle className="text-sm">Pattern Preview</CardTitle>
+            <CardDescription className="text-xs">
+              No pattern loaded
+            </CardDescription>
+          </div>
+        </div>
       </CardHeader>
       <CardContent className="p-6 flex-1 flex flex-col">
         <div className="h-[400px] sm:h-[500px] lg:flex-1 flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-800 rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 relative overflow-hidden">