diff --git a/frontend/src/components/AudioVisualizer.tsx b/frontend/src/components/AudioVisualizer.tsx
index 994c85c..c671521 100644
--- a/frontend/src/components/AudioVisualizer.tsx
+++ b/frontend/src/components/AudioVisualizer.tsx
@@ -8,12 +8,12 @@ interface AudioVisualizerProps {
 }
 
 export default function AudioVisualizer({
-  barCount = 28,
-  height = 80,
-  gap = 3,
+  barCount = 40,
+  height = 96,
+  gap = 2,
 }: AudioVisualizerProps) {
   const { isPlaying, getFrequencyData } = useAudio();
-  const [heights, setHeights] = useState<number[]>(() => Array(barCount).fill(4));
+  const [heights, setHeights] = useState<number[]>(() => Array(barCount).fill(3));
   const rafRef = useRef<number>(0);
   const playingRef = useRef(isPlaying);
   const getDataRef = useRef(getFrequencyData);
@@ -27,33 +27,30 @@ export default function AudioVisualizer({
     const animate = () => {
       const rawData = getDataRef.current?.();
       if (rawData && playingRef.current) {
-        // Build symmetric mirrored heights
         const newHeights: number[] = [];
-
         for (let i = 0; i < barCount; i++) {
-          // Mirror index: distance from center
           const distFromCenter = Math.abs(i - (barCount - 1) / 2);
           const halfIdx = Math.floor(distFromCenter);
           const dataIndex = Math.min(halfIdx, rawData.length - 1);
-
           const value = rawData[dataIndex] ?? 0;
 
-          // Smooth falloff curve toward edges for aesthetic hill shape
-          const edgeFade = 1 - (distFromCenter / half) * 0.35;
+          // Smoother edge fade — keep center bars taller
+          const edgeFade = 1 - (distFromCenter / half) * 0.2;
 
-          // Boost mid frequencies for speech
-          const midBoost = distFromCenter < half * 0.5 ? 1.1 : 1;
+          // Mid boost for vocals/speech
+          const midBoost = distFromCenter < half * 0.6 ? 1.15 : 1;
 
-          const h = Math.max(4, Math.min(100, (value / 255) * 100 * edgeFade * midBoost));
+          // More dynamic range — minimum height of 6%
+          const h = Math.max(6, Math.min(100, (value / 255) * 100 * edgeFade * midBoost));
           newHeights.push(h);
         }
-
         setHeights(newHeights);
       } else {
+        // Gentle decay when paused — slower falloff for smoother look
         setHeights(prev =>
           prev.map(h => {
-            const next = h * 0.88;
-            return next < 4.5 ? 4 : next;
+            const next = h * 0.92;
+            return next < 3.5 ? 3 : next;
           })
         );
       }
@@ -64,21 +61,25 @@ export default function AudioVisualizer({
     return () => cancelAnimationFrame(rafRef.current);
   }, [barCount]);
 
+  const barWidth = Math.max(2, (100 - gap * (barCount - 1)) / barCount);
+
   return (
     <div
-      className="flex items-end justify-center"
-      style={{ height, gap }}
+      className="flex items-end justify-center w-full"
+      style={{ height, gap: `${gap}%` }}
       aria-hidden="true"
     >
       {heights.map((h, i) => (
         <div
           key={i}
-          className="rounded-full bg-gradient-to-t from-[var(--accent-primary)] to-[var(--accent-secondary)]"
+          className="rounded-full"
           style={{
-            width: 3,
+            width: `${barWidth}%`,
             height: `${h}%`,
-            transition: playingRef.current ? 'height 60ms linear' : 'height 220ms ease-out',
-            opacity: 0.45 + (h / 180),
+            background: `linear-gradient(to top, var(--accent-primary), var(--accent-secondary))`,
+            transition: playingRef.current ? 'height 80ms linear' : 'height 300ms ease-out',
+            opacity: 0.55 + (h / 200),
+            boxShadow: h > 40 ? `0 0 ${Math.floor(h / 6)}px rgba(99, 102, 241, ${Math.min(0.5, h / 200)})` : 'none',
           }}
         />
       ))}
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
index fe4d9b0..f761276 100644
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -8,30 +8,30 @@
 
 @layer base {
   :root {
-    /* Dark theme (default) */
-    --bg-base:          #020617;
-    --bg-surface:       #0f1222;
-    --bg-elevated:      #161a2e;
-    --bg-glass:         rgba(15, 18, 34, 0.7);
-    --text-primary:     #f1f5f9;
-    --text-secondary:   #94a3b8;
-    --text-muted:       #64748b;
-    --accent-primary:   #6366f1;
-    --accent-secondary: #06b6d4;
-    --accent-rose:      #f43f5e;
-    --accent-gold:      #f59e0b;
-    --accent-emerald:   #10b981;
-    --accent-glow:      rgba(99, 102, 241, 0.25);
-    --border-color:     rgba(255, 255, 255, 0.06);
-    --border-hover:     rgba(255, 255, 255, 0.12);
+    /* Dark theme (default) — calibrated to Stitch designs */
+    --bg-base:          #010615;
+    --bg-surface:       #0b0f20;
+    --bg-elevated:      #11162c;
+    --bg-glass:         rgba(11, 15, 32, 0.75);
+    --text-primary:     #f0f4ff;
+    --text-secondary:   #8892b0;
+    --text-muted:       #566080;
+    --accent-primary:   #6c6ff7;
+    --accent-secondary: #0dc5e0;
+    --accent-rose:      #f84b6b;
+    --accent-gold:      #f7b80a;
+    --accent-emerald:   #12c278;
+    --accent-glow:      rgba(108, 111, 247, 0.28);
+    --border-color:     rgba(255, 255, 255, 0.07);
+    --border-hover:     rgba(255, 255, 255, 0.14);
     --radius-sm:        0.625rem;
     --radius-md:        0.875rem;
     --radius-lg:        1.125rem;
-    --radius-xl:        1.375rem;
-    --glass-blur:       blur(24px) saturate(180%);
-    --shadow-card:      0 2px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.03);
-    --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
-    --shadow-glow:      0 0 24px var(--accent-glow);
+    --radius-xl:        1.5rem;
+    --glass-blur:       blur(28px) saturate(180%);
+    --shadow-card:      0 2px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
+    --shadow-card-hover: 0 10px 36px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+    --shadow-glow:      0 0 28px var(--accent-glow);
     --font-display:     'Montserrat', ui-sans-serif, system-ui, sans-serif;
     --font-body:        'Outfit', ui-sans-serif, system-ui, sans-serif;
     --transition-base:  200ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -97,9 +97,9 @@ body::before {
   z-index: -1;
   pointer-events: none;
   background:
-    radial-gradient(ellipse 80% 35% at 10% 5%,  rgba(99, 102, 241, 0.08) 0%, transparent 55%),
-    radial-gradient(ellipse 60% 40% at 90% 95%, rgba(6, 182, 212, 0.06) 0%, transparent 55%),
-    radial-gradient(ellipse 50% 30% at 50% 50%, rgba(99, 102, 241, 0.03) 0%, transparent 50%);
+    radial-gradient(ellipse 80% 30% at 5% 0%,   rgba(108, 111, 247, 0.10) 0%, transparent 50%),
+    radial-gradient(ellipse 55% 35% at 95% 100%, rgba(13, 197, 224, 0.07) 0%, transparent 50%),
+    radial-gradient(ellipse 40% 25% at 50% 50%, rgba(108, 111, 247, 0.04) 0%, transparent 50%);
 }
 
 body.light-theme::before {