diff --git a/REDESIGN_PROMPT.md b/REDESIGN_PROMPT.md
new file mode 100644
index 0000000..118da60
--- /dev/null
+++ b/REDESIGN_PROMPT.md
@@ -0,0 +1,83 @@
+# Redesign Prompt - Prep Interview Platform
+
+## Project Context
+
+This is "Prep" - an interview preparation platform for multiple positions and levels of experience and skills. It is built with **Next.js 16 (App Router)**, **React 19**, **TypeScript**, **Tailwind CSS v4**, and **Bun**. The current design uses a dark-first theme with glass morphism effects, yellow accent colors, and an ambient background.
+
+## Task
+
+Your task is to completely redesign the styling and visual identity of this website. Create an incredible, creative, and unique design that pushes the limits of modern web design capabilities. The goal is to transform this from a basic study resource into a visually stunning, professional interview prep platform.
+
+## Requirements
+
+### Tech Stack (already configured - do NOT reinitialize)
+
+- Next.js 16 with App Router (Turbopack)
+- Tailwind CSS v4 (using `@theme` directive in `globals.css`, no separate config file)
+- React 19
+- TypeScript
+- Bun
+- Framer Motion (already installed for animations)
+- Lucide React (icons)
+
+### Design Specifications
+
+Create **A COMPLETE REDESIGN of the entire website** that replaces the current styling and layout. This includes the homepage, content pages, and shared layout elements.
+
+The redesign should include:
+
+1. **A cohesive visual system** applied across all pages (homepage, topic pages, documentation views)
+2. **A unique color palette and typography** that feels fresh and professional
+3. **Creative layout and visual hierarchy** - experiment with grids, asymmetry, overlapping elements, scroll effects
+4. **Smooth animations** using Framer Motion - page transitions, hover effects, scroll-triggered reveals
+5. **Responsive design** that works on mobile, tablet, and desktop
+6. **Dark mode support**
+
+### Design Direction
+
+Pick the most compelling direction (or blend ideas) from the following:
+
+- Minimalist/Swiss design - clean grids, strong typography, lots of whitespace
+- Glassmorphism/Neomorphism - frosted glass cards, depth effects, layered surfaces
+- Bold/Brutalist - raw typography, harsh contrasts, unconventional layouts
+
+### Content to Showcase
+
+- Hero section with platform name and value proposition
+- Topics covered: HTML & CSS, JavaScript, React, API Integration
+- Study features: Code examples, interactive notes, table of contents navigation
+- Call-to-action for getting started
+
+### Technical Constraints
+
+- Use the existing `src/app/` directory structure
+- Reuse existing components from `src/components/` where appropriate, or create new ones
+- All styles should use Tailwind utility classes and CSS variables defined in `globals.css`
+- Maintain accessibility standards (focus states, semantic HTML, ARIA labels)
+- Keep Framer Motion animations respectful of `prefers-reduced-motion`
+- Dev server runs on the default Next.js port (use `bun run dev`)
+
+### What NOT to Do
+
+- Do NOT reinitialize the project or change the build system
+- Do NOT remove existing pages or components (add new ones alongside)
+- Do NOT install unnecessary dependencies - use what's already available
+
+## Evaluation Criteria
+
+After creating the redesign, review it by:
+
+1. Opening the dev server (`bun run dev`)
+2. Navigating to `/`
+3. Checking responsive behavior
+4. Verifying animations work smoothly
+5. Ensuring no console errors
+
+Iterate and refine until satisfied with the quality.
+
+## Delivery
+
+When the redesign is complete and verified:
+
+1. Commit all changes to the current branch
+2. Create a pull request to `main` with a summary of the redesign
diff --git a/src/app/(main)/home.tsx b/src/app/(main)/home.tsx
index 831aacb..987877c 100644
--- a/src/app/(main)/home.tsx
+++ b/src/app/(main)/home.tsx
@@ -1,4 +1,7 @@
 'use client';
+
+import { motion } from 'framer-motion';
+import { ArrowRight, BookOpen, Code2, Layers } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import type { Section } from '@/types';
 
@@ -13,76 +16,157 @@ const sections: Section[] = [
   },
 ];
 
-export default function HomeComponent() {
-  const router = useRouter();
+const features = [
+  {
+    icon: Code2,
+    title: 'Code Examples',
+    description: 'Real-world code snippets with syntax highlighting',
+  },
+  {
+    icon: BookOpen,
+    title: 'Interactive Notes',
+    description: 'Structured study notes organized by topic',
+  },
+  {
+    icon: Layers,
+    title: 'Progressive Learning',
+    description: 'Topics build on each other from basics to advanced',
+  },
+];
 
-  const totalItems = sections.length;
-  const columns = 3;
+const container = {
+  hidden: { opacity: 0 },
+  show: {
+    opacity: 1,
+    transition: { staggerChildren: 0.1, delayChildren: 0.2 },
+  },
+};
 
-  const colSpanClasses: { [key: number]: string } = {
-    2: 'md:col-span-2',
-    3: 'md:col-span-3',
-    6: 'md:col-span-6',
-  };
+const item = {
+  hidden: { opacity: 0, y: 20 },
+  show: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.5, ease: 'easeOut' as const },
+  },
+};
 
-  return (
-    <div className='flex min-h-screen flex-col items-center gap-8 py-8 md:justify-center lg:justify-center'>
-      <div className='max-w-6xl px-4 text-center'>
-        <h1 className='text-balance font-bold font-sans text-2xl md:text-3xl lg:text-4xl'>
-          Any interview prep
-        </h1>
-      </div>
-      <div className='grid max-w-6xl grid-cols-1 gap-6 px-4 md:grid-cols-6'>
-        {sections.map((section, index) => {
-          const rowNumber = Math.floor(index / columns);
-          const isLastRow =
-            rowNumber === Math.floor((totalItems - 1) / columns);
+export default function HomeComponent() {
+  const router = useRouter();
 
-          const itemsOnLastRow = totalItems % columns;
-          const itemsOnThisRow =
-            isLastRow && itemsOnLastRow > 0 ? itemsOnLastRow : columns;
+  return (
+    <div className='flex min-h-screen flex-col'>
+      {/* Hero */}
+      <motion.section
+        animate={{ opacity: 1 }}
+        className='flex flex-1 flex-col items-center justify-center px-4 py-20 text-center sm:py-32'
+        initial={{ opacity: 0 }}
+        transition={{ duration: 0.6 }}
+      >
+        <motion.div
+          animate={{ opacity: 1, y: 0 }}
+          initial={{ opacity: 0, y: 30 }}
+          transition={{ duration: 0.7, ease: 'easeOut' }}
+        >
+          <span className='mb-4 inline-block rounded-full border border-[var(--border-accent)] bg-[var(--accent-glow)] px-4 py-1.5 font-mono text-[var(--accent)] text-xs uppercase tracking-widest'>
+            Interview Prep Platform
+          </span>
+        </motion.div>
 
-          const colSpan = Math.round(6 / itemsOnThisRow);
+        <motion.h1
+          animate={{ opacity: 1, y: 0 }}
+          className='mb-6 max-w-3xl font-bold text-4xl leading-tight sm:text-5xl md:text-7xl'
+          initial={{ opacity: 0, y: 30 }}
+          transition={{ duration: 0.7, delay: 0.1, ease: 'easeOut' }}
+        >
+          <span className='text-gradient'>Prepare</span>
+          <br />
+          <span className='text-[var(--foreground)]'>for any interview</span>
+        </motion.h1>
 
-          const className = `rounded-lg border border-zinc-800 bg-zinc-900/90 p-6 shadow-sm transition-colors duration-200 hover:border-zinc-600 ${
-            colSpanClasses[colSpan]
-          }`;
+        <motion.p
+          animate={{ opacity: 1, y: 0 }}
+          className='mb-10 max-w-xl text-[var(--foreground-muted)] text-lg leading-relaxed'
+          initial={{ opacity: 0, y: 20 }}
+          transition={{ duration: 0.6, delay: 0.2, ease: 'easeOut' }}
+        >
+          Structured study notes, code examples, and hands-on practice for
+          frontend developer interviews.
+        </motion.p>
 
-          return (
-            <button
-              className={`${className} flex flex-col text-left`}
+        {/* Topic Cards */}
+        <motion.div
+          animate='show'
+          className='grid w-full max-w-3xl gap-4 px-4 sm:grid-cols-1'
+          initial='hidden'
+          variants={container}
+        >
+          {sections.map((section) => (
+            <motion.button
+              className='surface-card-hover group flex items-center gap-6 p-6 text-left sm:p-8'
               disabled={section.inProgress}
               key={`${section.title}-${section.level}`}
               onClick={() => router.push(section.href)}
               type='button'
+              variants={item}
+              whileHover={{ scale: 1.01 }}
+              whileTap={{ scale: 0.99 }}
             >
-              <div className='flex-grow'>
-                <div className='mb-2'>
-                  <h2 className='font-bold text-xl text-zinc-100'>
+              <div className='flex-1'>
+                <div className='mb-1 flex items-center gap-3'>
+                  <h2 className='font-bold text-[var(--foreground)] text-xl sm:text-2xl'>
                     {section.title}
                   </h2>
                   {section.level && (
-                    <span className='font-medium text-sm text-yellow-500'>
+                    <span className='rounded-full bg-[var(--accent-glow)] px-2.5 py-0.5 font-mono text-[var(--accent)] text-xs'>
                       {section.level}
                     </span>
                   )}
-                  {section.inProgress && (
-                    <span className='ml-2 text-red-400 text-sm'>
-                      (in progress)
-                    </span>
-                  )}
                 </div>
-                <p className='mb-4 text-sm text-zinc-400 leading-relaxed'>
+                <p className='text-[var(--foreground-muted)] text-sm leading-relaxed sm:text-base'>
                   {section.description}
                 </p>
               </div>
-              <div className='flex items-center font-medium text-sm text-zinc-500'>
-                {section.inProgress ? 'Coming soon...' : 'Start learning →'}
+              <ArrowRight
+                className='shrink-0 text-[var(--foreground-muted)] transition-transform group-hover:translate-x-1 group-hover:text-[var(--accent)]'
+                size={24}
+              />
+            </motion.button>
+          ))}
+        </motion.div>
+      </motion.section>
+
+      {/* Features */}
+      <motion.section
+        className='border-[var(--border)] border-t py-16 sm:py-24'
+        initial={{ opacity: 0 }}
+        transition={{ duration: 0.6 }}
+        viewport={{ once: true, margin: '-100px' }}
+        whileInView={{ opacity: 1 }}
+      >
+        <div className='mx-auto grid max-w-4xl gap-8 px-4 sm:grid-cols-3'>
+          {features.map((feature, i) => (
+            <motion.div
+              className='text-center'
+              initial={{ opacity: 0, y: 20 }}
+              key={feature.title}
+              transition={{ duration: 0.5, delay: i * 0.1 }}
+              viewport={{ once: true }}
+              whileInView={{ opacity: 1, y: 0 }}
+            >
+              <div className='mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-[var(--surface-2)]'>
+                <feature.icon className='text-[var(--accent)]' size={24} />
               </div>
-            </button>
-          );
-        })}
-      </div>
+              <h3 className='mb-2 font-semibold text-[var(--foreground)]'>
+                {feature.title}
+              </h3>
+              <p className='text-[var(--foreground-muted)] text-sm'>
+                {feature.description}
+              </p>
+            </motion.div>
+          ))}
+        </div>
+      </motion.section>
     </div>
   );
 }
diff --git a/src/app/frontend/junior/frontend-junior.tsx b/src/app/frontend/junior/frontend-junior.tsx
index 86969bd..65e56d0 100644
--- a/src/app/frontend/junior/frontend-junior.tsx
+++ b/src/app/frontend/junior/frontend-junior.tsx
@@ -1,4 +1,7 @@
 'use client';
+
+import { motion } from 'framer-motion';
+import { ArrowLeft, ArrowRight, CheckCircle2, Clock } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import type { Section } from '@/types';
 
@@ -36,68 +39,128 @@ const sections: Section[] = [
   },
 ];
 
+const container = {
+  hidden: { opacity: 0 },
+  show: {
+    opacity: 1,
+    transition: { staggerChildren: 0.08, delayChildren: 0.15 },
+  },
+};
+
+const cardVariant = {
+  hidden: { opacity: 0, y: 16 },
+  show: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.4, ease: 'easeOut' as const },
+  },
+};
+
 export default function FrontendJunior() {
   const router = useRouter();
 
-  const totalItems = sections.length;
-  const columns = 3;
-
-  const colSpanClasses: { [key: number]: string } = {
-    2: 'md:col-span-2',
-    3: 'md:col-span-3',
-    6: 'md:col-span-6',
-  };
+  const completedCount = sections.filter((s) => !s.inProgress).length;
 
   return (
-    <div className='flex min-h-screen flex-col items-center gap-8 py-8 md:justify-center lg:justify-center'>
-      <div className='max-w-6xl px-4 text-center'>
-        <h1 className='text-balance font-bold font-sans text-2xl md:text-3xl lg:text-4xl'>
-          Junior Frontend Developer Preparation
-        </h1>
-        <p className='mb-4 text-sm text-zinc-400 leading-relaxed'>
-          (in development, &apos;in progress&apos; parts are not completed)
-        </p>
-      </div>
-      <div className='grid max-w-6xl grid-cols-1 gap-6 px-4 md:grid-cols-6'>
-        {sections.map((section, index) => {
-          const rowNumber = Math.floor(index / columns);
-          const isLastRow =
-            rowNumber === Math.floor((totalItems - 1) / columns);
-
-          const itemsOnLastRow = totalItems % columns;
-          const itemsOnThisRow =
-            isLastRow && itemsOnLastRow > 0 ? itemsOnLastRow : columns;
-
-          const colSpan = Math.round(6 / itemsOnThisRow);
+    <div className='min-h-screen px-4 py-12 sm:py-20'>
+      <div className='mx-auto max-w-4xl'>
+        {/* Back nav */}
+        <motion.button
+          animate={{ opacity: 1, x: 0 }}
+          className='mb-8 flex items-center gap-2 text-[var(--foreground-muted)] text-sm transition-colors hover:text-[var(--accent)]'
+          initial={{ opacity: 0, x: -10 }}
+          onClick={() => router.push('/')}
+          transition={{ duration: 0.3 }}
+          type='button'
+        >
+          <ArrowLeft size={16} />
+          Back to home
+        </motion.button>
 
-          const className = `rounded-lg border border-zinc-800 bg-zinc-900/90 p-6 shadow-sm transition-colors duration-200 hover:border-zinc-600 ${
-            colSpanClasses[colSpan]
-          }`;
+        {/* Header */}
+        <motion.div
+          animate={{ opacity: 1, y: 0 }}
+          className='mb-10'
+          initial={{ opacity: 0, y: 20 }}
+          transition={{ duration: 0.5 }}
+        >
+          <h1 className='mb-3 font-bold text-3xl sm:text-4xl md:text-5xl'>
+            <span className='text-gradient'>Junior Frontend</span>
+            <br />
+            <span className='text-[var(--foreground)]'>Developer Prep</span>
+          </h1>
+          <div className='flex items-center gap-4'>
+            <p className='text-[var(--foreground-muted)]'>
+              {completedCount} of {sections.length} topics available
+            </p>
+            <div className='h-1.5 w-24 overflow-hidden rounded-full bg-[var(--surface-2)]'>
+              <div
+                className='h-full rounded-full bg-[var(--accent)]'
+                style={{
+                  width: `${(completedCount / sections.length) * 100}%`,
+                }}
+              />
+            </div>
+          </div>
+        </motion.div>
 
-          return (
-            <button
-              className={`${className} flex flex-col text-left`}
+        {/* Topic grid */}
+        <motion.div
+          animate='show'
+          className='grid gap-3 sm:grid-cols-2'
+          initial='hidden'
+          variants={container}
+        >
+          {sections.map((section, index) => (
+            <motion.button
+              className={`surface-card-hover group relative flex flex-col p-5 text-left sm:p-6 ${
+                section.inProgress ? 'cursor-default opacity-60' : ''
+              }`}
+              disabled={section.inProgress}
               key={section.title}
-              onClick={() => router.push(section.href)}
+              onClick={() => !section.inProgress && router.push(section.href)}
               type='button'
+              variants={cardVariant}
+              whileHover={section.inProgress ? {} : { scale: 1.01 }}
+              whileTap={section.inProgress ? {} : { scale: 0.99 }}
             >
-              <div className='flex-grow'>
-                <h2 className='mb-3 font-bold text-xl text-zinc-100'>
-                  {section.title}{' '}
-                  {section.inProgress && (
-                    <span className='text-red-400'>(in progress)</span>
-                  )}
-                </h2>
-                <p className='mb-4 text-sm text-zinc-400 leading-relaxed'>
-                  {section.description}
-                </p>
+              {/* Status badge */}
+              <div className='mb-3 flex items-center justify-between'>
+                <span className='font-mono text-[var(--foreground-muted)] text-xs'>
+                  {String(index + 1).padStart(2, '0')}
+                </span>
+                {section.inProgress ? (
+                  <span className='flex items-center gap-1 text-[var(--foreground-muted)] text-xs'>
+                    <Clock size={12} />
+                    Coming soon
+                  </span>
+                ) : (
+                  <span className='flex items-center gap-1 text-[var(--success)] text-xs'>
+                    <CheckCircle2 size={12} />
+                    Available
+                  </span>
+                )}
               </div>
-              <div className='flex items-center font-medium text-sm text-zinc-500'>
-                Learn more →
-              </div>
-            </button>
-          );
-        })}
+
+              <h2 className='mb-2 font-bold text-[var(--foreground)] text-lg'>
+                {section.title}
+              </h2>
+              <p className='mb-4 flex-1 text-[var(--foreground-muted)] text-sm leading-relaxed'>
+                {section.description}
+              </p>
+
+              {!section.inProgress && (
+                <div className='flex items-center gap-1 font-medium text-[var(--accent)] text-sm'>
+                  Start learning
+                  <ArrowRight
+                    className='transition-transform group-hover:translate-x-1'
+                    size={14}
+                  />
+                </div>
+              )}
+            </motion.button>
+          ))}
+        </motion.div>
       </div>
     </div>
   );
diff --git a/src/app/globals.css b/src/app/globals.css
index e1274dc..9956bec 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,29 +1,49 @@
 @import "tailwindcss";
 
 :root {
-  /* Default to dark theme */
-  --background: #0a0a0a;
-  --foreground: #ededed;
-  --accent: #eab308; /* yellow-500 */
-  --muted: #a1a1aa; /* zinc-400 */
-  --muted-foreground: #d4d4d8; /* zinc-300 */
-  --border: rgba(255, 255, 255, 0.08);
-  --glass-bg: rgba(0, 0, 0, 0.1);
-  --glass-strong-bg: rgba(0, 0, 0, 0.22);
+  /* ── Core palette ── */
+  --background: #09090b;
+  --background-secondary: #0f0f14;
+  --foreground: #f4f4f5;
+  --foreground-muted: #a1a1aa;
+
+  /* ── Accent: indigo → violet gradient endpoints ── */
+  --accent: #818cf8; /* indigo-400 */
+  --accent-strong: #6366f1; /* indigo-500 */
+  --accent-glow: rgba(99, 102, 241, 0.25);
+
+  /* ── Secondary accent: emerald (success, highlights) ── */
+  --success: #34d399;
+  --success-bg: rgba(52, 211, 153, 0.12);
+
+  /* ── Surface layers ── */
+  --surface-0: rgba(255, 255, 255, 0.02);
+  --surface-1: rgba(255, 255, 255, 0.04);
+  --surface-2: rgba(255, 255, 255, 0.06);
+  --surface-3: rgba(255, 255, 255, 0.09);
+
+  /* ── Borders ── */
+  --border: rgba(255, 255, 255, 0.06);
+  --border-strong: rgba(255, 255, 255, 0.12);
+  --border-accent: rgba(129, 140, 248, 0.3);
+
+  /* ── Glass ── */
+  --glass-bg: rgba(15, 15, 22, 0.6);
+  --glass-strong-bg: rgba(15, 15, 22, 0.8);
+
+  /* ── Misc ── */
   --ring: var(--accent);
-  /* Current page header height (controlled by PageHeader) */
   --page-header-height: 128px;
-  /* Offset built-in anchor navigation and scrollIntoView to account for sticky header */
   scroll-padding-top: var(--page-header-height, 128px);
 
-  /* Ambient background hues */
-  --ambient-1: 255 90 31; /* warm orange */
-  --ambient-2: 234 179 8; /* yellow-500 */
-  --ambient-3: 168 85 247; /* purple */
-  --ambient-4: 14 165 233; /* cyan */
+  /* ── Ambient mesh gradient hues ── */
+  --mesh-1: #4f46e5; /* indigo-600 */
+  --mesh-2: #7c3aed; /* violet-600 */
+  --mesh-3: #06b6d4; /* cyan-500 */
+  --mesh-4: #8b5cf6; /* violet-500 */
 }
 
-/* Smooth scrolling for anchor navigation; respect reduced motion */
+/* ── Smooth scroll ── */
 html {
   scroll-behavior: smooth;
 }
@@ -33,13 +53,14 @@ html {
   }
 }
 
-/* Ensure headings with anchors don't hide under the sticky header */
+/* ── Heading anchor offset ── */
 h2[id],
 h3[id],
 h4[id] {
-  scroll-margin-top: calc(var(--page-header-height, 128px) + 16px);
+  scroll-margin-top: calc(var(--page-header-height, 128px) + 24px);
 }
 
+/* ── Tailwind v4 theme ── */
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -47,19 +68,33 @@ h4[id] {
   --font-mono: var(--font-geist-mono);
 }
 
-/* Respect system light preference while favoring dark by default */
+/* ── Light mode ── */
 @media (prefers-color-scheme: light) {
   :root {
-    --background: #ffffff;
-    --foreground: #171717;
-    --muted: #52525b; /* zinc-600 */
-    --muted-foreground: #3f3f46; /* zinc-700 */
-    --border: rgba(0, 0, 0, 0.08);
-    --glass-bg: rgba(255, 255, 255, 0.5);
-    --glass-strong-bg: rgba(255, 255, 255, 0.6);
+    --background: #fafafa;
+    --background-secondary: #f4f4f5;
+    --foreground: #18181b;
+    --foreground-muted: #71717a;
+    --accent: #6366f1;
+    --accent-strong: #4f46e5;
+    --accent-glow: rgba(99, 102, 241, 0.15);
+    --surface-0: rgba(0, 0, 0, 0.01);
+    --surface-1: rgba(0, 0, 0, 0.03);
+    --surface-2: rgba(0, 0, 0, 0.05);
+    --surface-3: rgba(0, 0, 0, 0.08);
+    --border: rgba(0, 0, 0, 0.06);
+    --border-strong: rgba(0, 0, 0, 0.12);
+    --border-accent: rgba(99, 102, 241, 0.25);
+    --glass-bg: rgba(255, 255, 255, 0.7);
+    --glass-strong-bg: rgba(255, 255, 255, 0.85);
+    --mesh-1: #c7d2fe;
+    --mesh-2: #ddd6fe;
+    --mesh-3: #a5f3fc;
+    --mesh-4: #c4b5fd;
   }
 }
 
+/* ── Body ── */
 body {
   background: var(--background);
   color: var(--foreground);
@@ -76,26 +111,7 @@ body {
     "Segoe UI Emoji";
 }
 
-/* Image + gradient background is rendered via AmbientBackground component */
-
-/* subtle vignette to highlight glass layers */
-body::after {
-  content: "";
-  position: fixed;
-  inset: 0;
-  z-index: -1;
-  background:
-    radial-gradient(
-      60% 60% at 50% 0%,
-      rgba(255, 255, 255, 0.03),
-      transparent 70%
-    ),
-    radial-gradient(80% 50% at 50% 100%, rgba(0, 0, 0, 0.25), transparent 70%);
-  pointer-events: none;
-  transition: filter 0.28s ease-in-out;
-}
-
-/* Accessible focus styles */
+/* ── Focus styles ── */
 button:focus-visible,
 a:focus-visible,
 [role="button"]:focus-visible {
@@ -103,28 +119,50 @@ a:focus-visible,
   outline-offset: 2px;
 }
 
-/* Glass utility classes */
+/* ── Glass utilities ── */
 .glass {
   background: var(--glass-bg);
   border: 1px solid var(--border);
-  backdrop-filter: blur(12px) saturate(140%);
+  backdrop-filter: blur(16px) saturate(150%);
+  -webkit-backdrop-filter: blur(16px) saturate(150%);
 }
 
 .glass-strong {
   background: var(--glass-strong-bg);
-  border-bottom: 1px solid var(--border);
-  backdrop-filter: blur(14px) saturate(160%);
+  border-bottom: 1px solid var(--border-strong);
+  backdrop-filter: blur(20px) saturate(170%);
+  -webkit-backdrop-filter: blur(20px) saturate(170%);
+}
+
+/* ── Surface cards ── */
+.surface-card {
+  background: var(--surface-1);
+  border: 1px solid var(--border);
+  border-radius: 12px;
 }
 
-/* Mobile: allow full viewport width */
+.surface-card-hover {
+  background: var(--surface-1);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  transition: all 0.2s ease;
+}
+
+.surface-card-hover:hover {
+  background: var(--surface-2);
+  border-color: var(--border-accent);
+  box-shadow:
+    0 0 0 1px var(--accent-glow),
+    0 8px 32px -8px rgba(99, 102, 241, 0.12);
+}
+
+/* ── Width presets (desktop only) ── */
 @media (max-width: 640px) {
   .content-container {
     max-width: 100vw;
   }
 }
 
-/* SSR-safe initial width via data attribute (desktop only to avoid descending specificity with mobile override) */
-/* Runtime inline style from PageContainer drives width; these are fallback for SSR/first paint */
 @media (min-width: 641px) {
   html[data-content-width="narrow"] .content-container {
     max-width: 50vw;
@@ -140,7 +178,7 @@ a:focus-visible,
   }
 }
 
-/* Hide scrollbars */
+/* ── Scrollbar hide ── */
 .scrollbar-hide {
   -ms-overflow-style: none;
   scrollbar-width: none;
@@ -149,3 +187,23 @@ a:focus-visible,
 .scrollbar-hide::-webkit-scrollbar {
   display: none;
 }
+
+/* ── Gradient text utility ── */
+.text-gradient {
+  background: linear-gradient(
+    135deg,
+    var(--accent) 0%,
+    #a78bfa 50%,
+    #c084fc 100%
+  );
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* ── Glow effect ── */
+.glow-accent {
+  box-shadow:
+    0 0 20px var(--accent-glow),
+    0 0 60px rgba(99, 102, 241, 0.08);
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 1fb796d..d59b38b 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -18,7 +18,7 @@ const geistMono = Geist_Mono({
 
 export const metadata: Metadata = {
   title: 'Prep',
-  description: 'Prep for interviews and practice',
+  description: 'Interview preparation platform for developers',
 };
 
 export default async function RootLayout({
diff --git a/src/components/ambient-background/ambient-background.tsx b/src/components/ambient-background/ambient-background.tsx
index bef1f56..c0d78e6 100644
--- a/src/components/ambient-background/ambient-background.tsx
+++ b/src/components/ambient-background/ambient-background.tsx
@@ -1,7 +1,5 @@
 'use client';
 
-import Image from 'next/image';
-
 export function AmbientBackground() {
   return (
     <div
@@ -9,21 +7,46 @@ export function AmbientBackground() {
       className='fixed inset-0'
       style={{ zIndex: -10, pointerEvents: 'none', overflow: 'hidden' }}
     >
-      <Image
-        alt=''
-        className='absolute inset-0 h-full w-full object-cover'
-        fetchPriority='high'
-        fill
-        priority
-        sizes='100vw'
-        src='https://persistent.oaistatic.com/burrito-nux/1920.webp'
-        style={{ transform: 'scale(1.02)', opacity: 0.4, filter: 'blur(24px)' }}
+      {/* Mesh gradient orbs */}
+      <div
+        className='absolute h-[600px] w-[600px] rounded-full opacity-20 blur-[120px]'
+        style={{
+          background: 'var(--mesh-1)',
+          top: '-10%',
+          left: '-5%',
+        }}
+      />
+      <div
+        className='absolute h-[500px] w-[500px] rounded-full opacity-15 blur-[120px]'
+        style={{
+          background: 'var(--mesh-2)',
+          top: '20%',
+          right: '-10%',
+        }}
+      />
+      <div
+        className='absolute h-[400px] w-[400px] rounded-full opacity-10 blur-[100px]'
+        style={{
+          background: 'var(--mesh-3)',
+          bottom: '5%',
+          left: '30%',
+        }}
+      />
+      <div
+        className='absolute h-[350px] w-[350px] rounded-full opacity-10 blur-[100px]'
+        style={{
+          background: 'var(--mesh-4)',
+          bottom: '20%',
+          right: '15%',
+        }}
       />
+      {/* Noise texture overlay for depth */}
       <div
-        className='absolute inset-0'
+        className='absolute inset-0 opacity-[0.015]'
         style={{
-          backgroundImage:
-            'linear-gradient(to bottom, rgba(0,0,0,0), var(--background))',
+          backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
+          backgroundRepeat: 'repeat',
+          backgroundSize: '128px 128px',
         }}
       />
     </div>
diff --git a/src/components/code-block/code-block.tsx b/src/components/code-block/code-block.tsx
index c83e946..7a84fa1 100644
--- a/src/components/code-block/code-block.tsx
+++ b/src/components/code-block/code-block.tsx
@@ -3,7 +3,6 @@ import { coldarkDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { parseHighlightLines } from '@/helpers/parse-highlight-lines';
 import type { CodeBlockProps } from '@/types';
 
-// Move regex patterns to top level for better performance
 const COMMENT_REGEX = /^\/\*\s*\w+\s*\*\/\s*\n?/;
 const LEADING_SPACES_REGEX = /^\s+/;
 const TRAILING_SPACES_REGEX = /\s+$/;
@@ -45,7 +44,6 @@ export const CodeBlock = ({
   const highlightedLines = parseHighlightLines(highlightLines);
   const highlightedLinesEnd = parseHighlightLines(highlightLinesEnd);
 
-  // Line props function for highlighting
   const getLineProps = (lineNumber: number) => {
     const isHighlighted = highlightedLines.includes(lineNumber);
     const isHighlightedEnd = highlightedLinesEnd.includes(lineNumber);
@@ -54,12 +52,11 @@ export const CodeBlock = ({
     let borderLeft = 'none';
 
     if (isHighlightedEnd) {
-      backgroundColor = 'rgba(34, 197, 94, 0.15)'; // Green for end lines
-      borderLeft = '3px solid rgb(34, 197, 94)';
+      backgroundColor = 'rgba(52, 211, 153, 0.12)';
+      borderLeft = '3px solid rgb(52, 211, 153)';
     } else if (isHighlighted) {
-      // Yellow accent for highlighted lines
-      backgroundColor = 'rgba(234, 179, 8, 0.18)';
-      borderLeft = '3px solid rgb(234, 179, 8)';
+      backgroundColor = 'rgba(129, 140, 248, 0.15)';
+      borderLeft = '3px solid rgb(129, 140, 248)';
     }
 
     return {
@@ -76,16 +73,16 @@ export const CodeBlock = ({
   };
 
   return (
-    <div className='mb-4 overflow-hidden rounded-lg border border-zinc-700 bg-zinc-900'>
+    <div className='mb-4 overflow-hidden rounded-xl border border-[var(--border-strong)] bg-[var(--background-secondary)]'>
       {comment && (
-        <div className='border-zinc-700 border-b bg-zinc-800 px-4 py-2 text-gray-400 text-sm'>
+        <div className='border-[var(--border)] border-b bg-[var(--surface-2)] px-4 py-2 font-mono text-[var(--foreground-muted)] text-xs'>
           {`/* ${comment} */`}
         </div>
       )}
       <SyntaxHighlighter
         codeTagProps={{
           style: {
-            fontFamily: `ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace`,
+            fontFamily: `var(--font-geist-mono), ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace`,
             display: 'grid',
             gridTemplateColumns: '1fr',
           },
@@ -95,7 +92,7 @@ export const CodeBlock = ({
           padding: '1rem',
           background: 'transparent',
           fontSize: '0.875rem',
-          lineHeight: '1.5',
+          lineHeight: '1.6',
           overflowX: 'auto',
         }}
         language={language}
diff --git a/src/components/layout/content-page.tsx b/src/components/layout/content-page.tsx
index 92cf0dd..53f1f93 100644
--- a/src/components/layout/content-page.tsx
+++ b/src/components/layout/content-page.tsx
@@ -14,7 +14,7 @@ export function ContentPage({
   allowWidthToggle = true,
 }: ContentPageProps) {
   return (
-    <div className='min-h-screen text-white'>
+    <div className='min-h-screen text-[var(--foreground)]'>
       <PageHeader
         description={description}
         title={title}
diff --git a/src/components/layout/page-container.tsx b/src/components/layout/page-container.tsx
index b7ca7df..5f61e76 100644
--- a/src/components/layout/page-container.tsx
+++ b/src/components/layout/page-container.tsx
@@ -11,50 +11,52 @@ const presetToMaxWidth: Record<WidthPreset, string> = {
   full: '100vw',
 };
 
+const VALID_PRESETS = new Set<string>(Object.keys(presetToMaxWidth));
+const STORAGE_KEY = 'prep:content-width';
+const COOKIE_KEY = 'prep-content-width';
+
+function readPersistedWidth(): WidthPreset | null {
+  if (typeof window === 'undefined') return null;
+  try {
+    const fromStorage = window.localStorage.getItem(STORAGE_KEY);
+    if (fromStorage && VALID_PRESETS.has(fromStorage)) {
+      return fromStorage as WidthPreset;
+    }
+  } catch {
+    /* ignore */
+  }
+  const attr = document.documentElement.dataset.contentWidth;
+  if (attr && VALID_PRESETS.has(attr)) {
+    return attr as WidthPreset;
+  }
+  return null;
+}
+
 export function PageContainer({
   children,
   className = '',
   initialWidth = 'comfortable',
   allowWidthToggle = true,
 }: PageContainerProps) {
-  const storageKey = 'prep:content-width';
-  const [width, setWidth] = useState<WidthPreset>(() => {
-    if (typeof document !== 'undefined') {
-      const attr = document.documentElement.dataset.contentWidth as
-        | WidthPreset
-        | undefined;
-      if (attr && attr in presetToMaxWidth) {
-        return attr;
-      }
-    }
-    return initialWidth;
-  });
-
-  const [headerHeight, setHeaderHeight] = useState<number>(120);
+  const [width, setWidth] = useState<WidthPreset>(initialWidth);
+  const [hydrated, setHydrated] = useState(false);
 
+  // Sync with persisted value once on mount (intentionally ignoring width to avoid re-running)
   useEffect(() => {
-    if (typeof window === 'undefined') {
-      return;
-    }
-    const header = document.getElementById('page-header');
-    if (!header) {
-      return;
+    const persisted = readPersistedWidth();
+    if (persisted) {
+      setWidth(persisted);
+      document.documentElement.dataset.contentWidth = persisted;
     }
-
-    const update = () => setHeaderHeight(header.getBoundingClientRect().height);
-    update();
-    const observer = new ResizeObserver(update);
-    observer.observe(header);
-    return () => {
-      observer.disconnect();
-    };
+    setHydrated(true);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: mount-only effect
   }, []);
 
   const applyWidthPreference = (next: WidthPreset) => {
     setWidth(next);
     try {
       if (typeof window !== 'undefined') {
-        window.localStorage.setItem(storageKey, next);
+        window.localStorage.setItem(STORAGE_KEY, next);
       }
       document.documentElement.dataset.contentWidth = next;
       if ('cookieStore' in globalThis) {
@@ -72,18 +74,18 @@ export function PageContainer({
         if (cookieStore) {
           cookieStore
             .set({
-              name: 'prep-content-width',
+              name: COOKIE_KEY,
               value: next,
               path: '/',
               expires,
             })
             .catch(() => {
-              /* ignore Cookie Store failures */
+              /* Cookie Store write failure is non-critical */
             });
         }
       }
     } catch {
-      /* ignore SSR/storage write errors */
+      /* ignore */
     }
   };
 
@@ -97,14 +99,12 @@ export function PageContainer({
 
   return (
     <div className='w-full'>
-      {allowWidthToggle && (
+      {allowWidthToggle && hydrated && (
         <WidthSwitcher
           currentWidth={width}
-          headerHeightFallback={headerHeight}
           onChangeWidth={applyWidthPreference}
         />
       )}
-
       <div className={containerClasses}>{children}</div>
     </div>
   );
diff --git a/src/components/notes-area/notes-area.tsx b/src/components/notes-area/notes-area.tsx
index 6644a05..e0c9370 100644
--- a/src/components/notes-area/notes-area.tsx
+++ b/src/components/notes-area/notes-area.tsx
@@ -6,9 +6,9 @@ export const NotesArea = ({
 }: NotesAreaProps) => {
   return (
     <div
-      className={`${minHeight} border border-zinc-700 bg-zinc-800 p-4 text-gray-50`}
+      className={`${minHeight} rounded-xl border border-[var(--border-strong)] border-dashed bg-[var(--surface-1)] p-4 text-[var(--foreground)]`}
     >
-      <p className='italic'>{placeholder}</p>
+      <p className='text-[var(--foreground-muted)] italic'>{placeholder}</p>
     </div>
   );
 };
diff --git a/src/components/page-header/page-header.tsx b/src/components/page-header/page-header.tsx
index 219d2b2..df9a13b 100644
--- a/src/components/page-header/page-header.tsx
+++ b/src/components/page-header/page-header.tsx
@@ -11,11 +11,6 @@ export const PageHeader = ({
   title,
   topicHome,
 }: PageHeaderProps) => {
-  type MediaQueryListWithLegacy = MediaQueryList & {
-    addListener: (listener: (e: MediaQueryListEvent) => void) => void;
-    removeListener: (listener: (e: MediaQueryListEvent) => void) => void;
-  };
-
   const router = useRouter();
   const [isScrolled, setIsScrolled] = useState(false);
   const [isInitialLoad, setIsInitialLoad] = useState(true);
@@ -28,7 +23,6 @@ export const PageHeader = ({
   const isHiddenOnMobileRef = useRef(false);
   const lastCssHeaderHeight = useRef<string | null>(null);
 
-  // Threshold constants for mobile hysteresis
   const JITTER_PX = 5;
   const HIDE_THRESHOLD_PX = 24;
   const SHOW_THRESHOLD_PX = 64;
@@ -84,13 +78,11 @@ export const PageHeader = ({
         resetNonMobileState();
         return;
       }
-
       const absDelta = Math.abs(delta);
       if (absDelta <= JITTER_PX) {
         maybeResetAtTop(currentScrollY);
         return;
       }
-
       if (delta > 0) {
         accumulateDown(delta);
         maybeHideOnMobile(currentScrollY);
@@ -98,7 +90,6 @@ export const PageHeader = ({
         accumulateUp(delta);
         maybeShowOnMobile();
       }
-
       maybeResetAtTop(currentScrollY);
     },
     [
@@ -111,7 +102,6 @@ export const PageHeader = ({
     ]
   );
 
-  // Track mobile breakpoint to enable full hide behavior on small screens
   useEffect(() => {
     if (typeof window === 'undefined') return;
     const mq: MediaQueryList = window.matchMedia('(max-width: 639px)');
@@ -120,22 +110,12 @@ export const PageHeader = ({
       setIsMobileScreen(mq.matches);
     };
     setMobileFlag();
-    const hasModernListener = typeof mq.addEventListener === 'function';
-    if (hasModernListener) {
-      mq.addEventListener('change', setMobileFlag);
-    } else {
-      (mq as MediaQueryListWithLegacy).addListener(setMobileFlag);
-    }
+    mq.addEventListener('change', setMobileFlag);
     return () => {
-      if (hasModernListener) {
-        mq.removeEventListener('change', setMobileFlag);
-      } else {
-        (mq as MediaQueryListWithLegacy).removeListener(setMobileFlag);
-      }
+      mq.removeEventListener('change', setMobileFlag);
     };
   }, []);
 
-  // Scroll listener with rAF batching
   useEffect(() => {
     if (typeof window === 'undefined') return;
     let rafId: number | null = null;
@@ -145,7 +125,6 @@ export const PageHeader = ({
         rafId = null;
         const currentScrollY = Math.max(0, window.scrollY);
         const delta = currentScrollY - lastScrollY.current;
-        // Avoid toggling collapse state on mobile to reduce flicker; rely on full-hide
         if (!isMobile.current) {
           setIsScrolled(currentScrollY > 20 && delta > 0);
         }
@@ -153,7 +132,6 @@ export const PageHeader = ({
         lastScrollY.current = currentScrollY;
       });
     };
-
     setIsInitialLoad(false);
     onScroll();
     window.addEventListener('scroll', onScroll, { passive: true });
@@ -163,18 +141,14 @@ export const PageHeader = ({
     };
   }, [handleMobileScroll]);
 
-  // Expose current header height as a CSS variable for other components
   useEffect(() => {
-    if (typeof document === 'undefined') {
-      return;
-    }
+    if (typeof document === 'undefined') return;
     const expandedHeight = '128px';
     const collapsedHeight = '72px';
     let current: string;
     if (isHiddenOnMobile) {
       current = '0px';
     } else if (isMobileScreen) {
-      // On mobile, when visible, keep the header at full height for clear tap targets
       current = expandedHeight;
     } else if (isInitialLoad || !isScrolled) {
       current = expandedHeight;
@@ -206,7 +180,6 @@ export const PageHeader = ({
       style={{
         willChange: 'height',
         overflow: 'hidden',
-        // Remove bottom border when fully hidden on mobile to avoid a 1px line
         borderBottomWidth: isHiddenOnMobile ? 0 : 1,
         transform: 'translateZ(0)',
         backfaceVisibility: 'hidden',
@@ -217,11 +190,11 @@ export const PageHeader = ({
         ease: 'easeOut',
       }}
     >
-      <div className='mx-auto h-full max-w-4xl px-6'>
+      <div className='mx-auto h-full max-w-5xl px-6'>
         <div className='flex h-full items-center justify-between'>
           <div className='flex-1 overflow-hidden'>
             <motion.h1
-              className='font-bold text-2xl text-white sm:text-3xl md:text-4xl'
+              className='font-bold text-2xl text-gradient sm:text-3xl md:text-4xl'
               layout={!isMobileScreen}
               transition={{ duration: 0.25, ease: 'easeInOut' }}
             >
@@ -230,7 +203,7 @@ export const PageHeader = ({
             <AnimatePresence>
               {(isInitialLoad || !isScrolled) && (
                 <motion.p
-                  className='text-sm text-zinc-300 sm:text-base'
+                  className='text-[var(--foreground-muted)] text-sm sm:text-base'
                   exit={{ opacity: 0, height: 0 }}
                   initial={{ opacity: 1, height: 'auto' }}
                   layout={!isMobileScreen}
@@ -241,24 +214,24 @@ export const PageHeader = ({
               )}
             </AnimatePresence>
           </div>
-          <div className='flex items-center gap-4'>
+          <div className='flex items-center gap-3'>
             {topicHome && (
               <button
                 aria-label='Go to topic home'
-                className='rounded-md p-1 text-white transition-colors hover:text-yellow-500'
+                className='rounded-lg p-2 text-[var(--foreground-muted)] transition-colors hover:bg-[var(--surface-2)] hover:text-[var(--accent)]'
                 onClick={() => router.push(topicHome)}
                 type='button'
               >
-                <BookOpenCheck size={24} />
+                <BookOpenCheck size={20} />
               </button>
             )}
             <button
               aria-label='Go to home page'
-              className='rounded-md p-1 text-white transition-colors hover:text-yellow-500'
+              className='rounded-lg p-2 text-[var(--foreground-muted)] transition-colors hover:bg-[var(--surface-2)] hover:text-[var(--accent)]'
               onClick={() => router.push('/')}
               type='button'
             >
-              <House size={24} />
+              <House size={20} />
             </button>
           </div>
         </div>
diff --git a/src/components/section-card/section-card.tsx b/src/components/section-card/section-card.tsx
index 26e0617..01bb7fb 100644
--- a/src/components/section-card/section-card.tsx
+++ b/src/components/section-card/section-card.tsx
@@ -5,16 +5,18 @@ export const SectionCard = ({ title, children }: SectionCardProps) => {
   const id = slugify(title);
   return (
     <section
-      className='mb-12 rounded-lg border border-zinc-800 bg-zinc-900/90 p-6 backdrop-blur supports-[backdrop-filter]:bg-zinc-900/65'
+      className='mb-10 rounded-xl border border-[var(--border)] bg-[var(--surface-1)] p-6 sm:p-8'
       id={id}
     >
       <h2
-        className='mb-4 border-zinc-700 border-b pb-2 font-bold text-2xl text-white'
+        className='mb-5 border-[var(--border-strong)] border-b pb-3 font-bold text-2xl text-[var(--foreground)]'
         id={id}
       >
-        {title}
+        <span className='text-gradient'>{title}</span>
       </h2>
-      <div className='space-y-4 text-white leading-relaxed'>{children}</div>
+      <div className='space-y-4 text-[var(--foreground)] leading-relaxed'>
+        {children}
+      </div>
     </section>
   );
 };
diff --git a/src/components/table-of-contents/table-of-contents.tsx b/src/components/table-of-contents/table-of-contents.tsx
index 8bde15c..cdeb2fa 100644
--- a/src/components/table-of-contents/table-of-contents.tsx
+++ b/src/components/table-of-contents/table-of-contents.tsx
@@ -1,38 +1,32 @@
 'use client';
 
-import { motion } from 'framer-motion';
-import { Pin, PinOff } from 'lucide-react';
-import { useEffect, useRef, useState } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { List, Pin, PinOff, X } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import type { TocHeading, TocItem } from '@/types';
 
 export const TableOfContents = () => {
   const [items, setItems] = useState<TocItem[]>([]);
   const [open, setOpen] = useState(false);
   const [pinned, setPinned] = useState(false);
-  const [headerHeight, setHeaderHeight] = useState(0);
+  const [activeId, setActiveId] = useState<string>('');
   const [isLoaded, setIsLoaded] = useState(false);
-  const touchStartRef = useRef<number | null>(null);
-  const openRef = useRef(open);
-  const pinnedRef = useRef(pinned);
+  const navRef = useRef<HTMLDivElement>(null);
+  const observerRef = useRef<IntersectionObserver | null>(null);
 
+  // Build TOC from headings
   useEffect(() => {
     const getHeadingLevel = (tagName: string): number => {
-      if (tagName === 'H2') {
-        return 2;
-      }
-      if (tagName === 'H3') {
-        return 3;
-      }
+      if (tagName === 'H2') return 2;
+      if (tagName === 'H3') return 3;
       return 4;
     };
 
-    const createTocItem = (el: HTMLElement): TocHeading => {
-      return {
-        id: el.id,
-        text: el.textContent || '',
-        level: getHeadingLevel(el.tagName),
-      };
-    };
+    const createTocItem = (el: HTMLElement): TocHeading => ({
+      id: el.id,
+      text: el.textContent || '',
+      level: getHeadingLevel(el.tagName),
+    });
 
     const updateTOC = () => {
       const headings = Array.from(
@@ -40,10 +34,8 @@ export const TableOfContents = () => {
       );
 
       const mapped: TocItem[] = [];
-
       for (const el of headings) {
         const item = createTocItem(el);
-
         if (item.level === 2) {
           mapped.push({ id: item.id, text: item.text, children: [] });
         } else {
@@ -57,29 +49,63 @@ export const TableOfContents = () => {
       setIsLoaded(true);
     };
 
-    // Initial update with delay to ensure content is rendered
     const timeoutId = setTimeout(updateTOC, 0);
+    return () => clearTimeout(timeoutId);
+  }, []);
 
-    const header = document.getElementById('page-header');
-    let resizeObserver: ResizeObserver | null = null;
-    let updateHeight: (() => void) | null = null;
+  // Active section tracking via IntersectionObserver
+  useEffect(() => {
+    if (!isLoaded || items.length === 0) return;
+
+    const allIds = items.flatMap((item) => [
+      item.id,
+      ...item.children.map((c) => c.id),
+    ]);
+
+    const headingElements = allIds
+      .map((id) => document.getElementById(id))
+      .filter(Boolean) as HTMLElement[];
+
+    if (headingElements.length === 0) return;
+
+    observerRef.current = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            setActiveId(entry.target.id);
+          }
+        }
+      },
+      {
+        rootMargin: '-20% 0px -70% 0px',
+        threshold: 0,
+      }
+    );
 
-    if (header) {
-      updateHeight = () =>
-        setHeaderHeight(header.getBoundingClientRect().height);
-      updateHeight();
-      resizeObserver = new ResizeObserver(updateHeight);
-      resizeObserver.observe(header);
+    for (const el of headingElements) {
+      observerRef.current.observe(el);
     }
 
     return () => {
-      clearTimeout(timeoutId);
-      if (resizeObserver) {
-        resizeObserver.disconnect();
+      observerRef.current?.disconnect();
+    };
+  }, [isLoaded, items]);
+
+  // Close on click outside (using ref, not fragile query)
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (pinned) return;
+      if (!open) return;
+      if (navRef.current && !navRef.current.contains(event.target as Node)) {
+        setOpen(false);
       }
     };
-  }, []);
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [open, pinned]);
 
+  // Mobile swipe to open
+  const touchStartRef = useRef<number | null>(null);
   useEffect(() => {
     const onTouchStart = (e: TouchEvent) => {
       if (window.innerWidth < 768) {
@@ -103,183 +129,132 @@ export const TableOfContents = () => {
     };
   }, []);
 
-  // Also open on single tap anywhere near the left edge on mobile
+  // Disable pinning on mobile
   useEffect(() => {
-    const onTouchTap = (e: TouchEvent) => {
-      if (window.innerWidth >= 768) return;
-      if (e.touches.length !== 1) return;
-      const x = e.touches[0].clientX;
-      if (x < 30) {
-        setOpen(true);
-      }
+    const mq = window.matchMedia('(max-width: 767px)');
+    const handleChange = () => {
+      if (mq.matches && pinned) setPinned(false);
     };
-    window.addEventListener('touchstart', onTouchTap, { passive: true });
-    return () => {
-      window.removeEventListener('touchstart', onTouchTap);
-    };
-  }, []);
-
-  const handleMouseLeave = () => {
-    if (!pinned) {
-      setOpen(false);
-    }
-  };
-
-  const handleLinkClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
-    if (!pinned) {
-      setOpen(false);
-    }
+    handleChange();
+    mq.addEventListener('change', handleChange);
+    return () => mq.removeEventListener('change', handleChange);
+  }, [pinned]);
 
-    // Prevent default navigation and use CSS scroll-margin/scroll-padding
-    e.preventDefault();
-    const href = e.currentTarget.getAttribute('href');
-    if (href?.startsWith('#')) {
-      const targetId = href.substring(1);
-      const targetElement = document.getElementById(targetId);
-      if (targetElement) {
-        targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
-        // Update the address bar without triggering a jump
-        if (
-          typeof history !== 'undefined' &&
-          typeof history.replaceState === 'function'
-        ) {
+  const handleLinkClick = useCallback(
+    (e: React.MouseEvent<HTMLAnchorElement>) => {
+      if (!pinned) setOpen(false);
+      e.preventDefault();
+      const href = e.currentTarget.getAttribute('href');
+      if (href?.startsWith('#')) {
+        const targetId = href.substring(1);
+        const targetElement = document.getElementById(targetId);
+        if (targetElement) {
+          targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
           history.replaceState(null, '', href);
         }
       }
-    }
-  };
+    },
+    [pinned]
+  );
 
-  const handleTriggerClick = () => {
-    setOpen(!open);
-  };
+  const isActive = (id: string) => activeId === id;
 
-  // Handle click outside on mobile and always unpin when mobile
-  useEffect(() => {
-    openRef.current = open;
-    pinnedRef.current = pinned;
-  }, [open, pinned]);
+  const isParentActive = (section: TocItem) =>
+    activeId === section.id || section.children.some((c) => c.id === activeId);
 
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (window.innerWidth >= 768) return;
-      // On mobile ensure menu is unpinned
-      if (pinnedRef.current) {
-        setPinned(false);
-      }
-      if (!openRef.current || pinnedRef.current) {
-        return;
-      }
-      const target = event.target as Element;
-      const tocNav = document.querySelector('nav[style*="top:"]');
-      const tocContent = tocNav?.querySelector('.scrollbar-hide');
-
-      if (tocContent && !tocContent.contains(target)) {
-        setOpen(false);
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-
-  // Don't render until content is loaded to prevent flickering
-  if (!isLoaded) {
-    return null;
-  }
+  if (!isLoaded) return null;
 
   return (
-    <nav
-      className='pointer-events-none fixed left-0 z-40'
-      style={{
-        top: `var(--page-header-height, ${headerHeight}px)`,
-        transition: 'top 0.28s ease-in-out',
-      }}
-    >
-      <div className='relative'>
-        {/* Hover/edge affordance – no explicit button */}
-        <div
-          aria-hidden='true'
-          className='pointer-events-auto absolute top-0 left-0 w-3 md:w-4'
-          onMouseEnter={() => setOpen(true)}
-          onTouchStart={handleTriggerClick}
-          style={{
-            height: `calc(100dvh - var(--page-header-height, ${headerHeight}px))`,
-          }}
-        />
+    <>
+      {/* Toggle button - visible on mobile and desktop when TOC is closed */}
+      <button
+        aria-label='Open table of contents'
+        className={`fixed left-4 z-50 rounded-lg p-2 transition-all duration-200 ${
+          open ? 'pointer-events-none opacity-0' : 'opacity-100'
+        } glass hover:bg-[var(--surface-2)]`}
+        onClick={() => setOpen(true)}
+        style={{
+          top: 'calc(var(--page-header-height, 128px) + 12px)',
+          transition: 'top 0.28s ease-in-out, opacity 0.2s ease',
+        }}
+        type='button'
+      >
+        <List className='text-[var(--foreground-muted)]' size={18} />
+      </button>
 
-        {/* Preview hint when closed - same height as open state */}
-        {!open && (
+      {/* Backdrop on mobile */}
+      <AnimatePresence>
+        {open && (
           <motion.div
-            animate={{ opacity: 1, x: 0 }}
-            className='pointer-events-none absolute top-0 left-0 w-2 md:w-3'
+            animate={{ opacity: 1 }}
+            className='fixed inset-0 z-40 bg-black/40 md:hidden'
             exit={{ opacity: 0 }}
-            initial={{ opacity: 0, x: -16 }}
-            style={{
-              height: `calc(100dvh - var(--page-header-height, ${headerHeight}px))`,
+            initial={{ opacity: 0 }}
+            onClick={() => {
+              if (!pinned) setOpen(false);
             }}
-            transition={{ type: 'tween', ease: 'easeInOut', duration: 0.35 }}
-          >
-            {/* Soft glow hint */}
-            <div
-              className='h-full w-full opacity-80'
-              style={{
-                background:
-                  'linear-gradient(to right, color-mix(in srgb, rgba(255, 255, 255, 0.3) 100%, var(--glass-strong-bg) 20%), transparent)',
-              }}
-            />
-            <div className='absolute inset-y-0 right-0 w-px md:hidden' />
-          </motion.div>
+          />
         )}
+      </AnimatePresence>
 
-        {/* Main menu */}
-        <motion.div
-          animate={{
-            x: open ? 0 : '-100%',
-            opacity: open ? 1 : 0,
-          }}
-          className='scrollbar-hide glass pointer-events-auto relative min-w-[260px] max-w-sm overflow-y-auto p-4 text-sm text-white/95 md:border'
-          initial={{
-            x: '-100%',
-            opacity: 0,
-          }}
-          onBlur={handleMouseLeave}
-          onFocus={() => setOpen(true)}
-          onMouseEnter={() => setOpen(true)}
-          onMouseLeave={handleMouseLeave}
-          style={{
-            scrollbarWidth: 'none',
-            msOverflowStyle: 'none',
-            width: 'fit-content',
-            height: `calc(100dvh - var(--page-header-height, ${headerHeight}px))`,
-          }}
-          transition={{
-            type: 'tween',
-            ease: 'easeInOut',
-            duration: 0.3,
-          }}
-        >
-          <div className='relative'>
-            {/* Pin icon aligned with first section */}
-            <button
-              className='-right-2 absolute top-0 hidden md:block'
-              onClick={() => setPinned(!pinned)}
-              type='button'
-            >
-              {pinned ? (
-                <PinOff className='fill-white' size={18} />
-              ) : (
-                <Pin size={18} />
-              )}
-            </button>
+      {/* TOC panel */}
+      <AnimatePresence>
+        {open && (
+          <motion.nav
+            animate={{ x: 0, opacity: 1 }}
+            className='scrollbar-hide glass fixed left-0 z-50 overflow-y-auto p-5 text-sm md:max-w-xs'
+            exit={{ x: '-100%', opacity: 0 }}
+            initial={{ x: '-100%', opacity: 0 }}
+            ref={navRef}
+            style={{
+              top: 'var(--page-header-height, 128px)',
+              height: 'calc(100dvh - var(--page-header-height, 128px))',
+              width: 'min(300px, 85vw)',
+              transition: 'top 0.28s ease-in-out',
+            }}
+            transition={{
+              type: 'tween',
+              ease: 'easeInOut',
+              duration: 0.25,
+            }}
+          >
+            {/* Header row */}
+            <div className='mb-4 flex items-center justify-between'>
+              <span className='font-semibold text-[var(--foreground-muted)] text-xs uppercase tracking-widest'>
+                Contents
+              </span>
+              <div className='flex items-center gap-1'>
+                <button
+                  aria-label={
+                    pinned ? 'Unpin table of contents' : 'Pin table of contents'
+                  }
+                  className='hidden rounded-md p-1.5 text-[var(--foreground-muted)] transition-colors hover:bg-[var(--surface-2)] hover:text-[var(--accent)] md:block'
+                  onClick={() => setPinned(!pinned)}
+                  type='button'
+                >
+                  {pinned ? <PinOff size={14} /> : <Pin size={14} />}
+                </button>
+                <button
+                  aria-label='Close table of contents'
+                  className='rounded-md p-1.5 text-[var(--foreground-muted)] transition-colors hover:bg-[var(--surface-2)] hover:text-[var(--foreground)]'
+                  onClick={() => setOpen(false)}
+                  type='button'
+                >
+                  <X size={14} />
+                </button>
+              </div>
+            </div>
 
-            <ul className='space-y-3 pr-8'>
+            {/* TOC tree */}
+            <ul className='space-y-2'>
               {items.map((section) => (
                 <li key={section.id}>
-                  {/* Level 1: SectionCard (h2) */}
                   <a
-                    className='block break-words text-left font-bold text-white transition-colors duration-200 hover:text-[var(--accent)] focus-visible:outline-none'
+                    className={`block rounded-md px-2 py-1.5 font-medium text-sm transition-all duration-150 ${
+                      isParentActive(section)
+                        ? 'bg-[var(--accent-glow)] text-[var(--accent)]'
+                        : 'text-[var(--foreground)] hover:bg-[var(--surface-2)] hover:text-[var(--accent)]'
+                    }`}
                     href={`#${section.id}`}
                     onClick={handleLinkClick}
                   >
@@ -287,32 +262,24 @@ export const TableOfContents = () => {
                   </a>
 
                   {section.children.length > 0 && (
-                    <ul className='mt-2 space-y-1 border-zinc-600 border-l pl-4'>
+                    <ul className='mt-1 ml-3 space-y-0.5 border-[var(--border)] border-l pl-3'>
                       {section.children.map((child) => {
-                        // Check if this is a Header (h3) or Subheader (h4)
                         const isSubheader = child.level === 4;
-
                         return (
                           <li key={child.id}>
-                            {isSubheader ? (
-                              /* Level 3: Subheader (h4) with double border */
-                              <a
-                                className='block break-words border-zinc-600 border-l pl-4 text-left text-xs text-zinc-400 leading-relaxed transition-colors duration-200 hover:text-[var(--accent)] focus-visible:outline-none'
-                                href={`#${child.id}`}
-                                onClick={handleLinkClick}
-                              >
-                                {child.text}
-                              </a>
-                            ) : (
-                              /* Level 2: Header (h3) */
-                              <a
-                                className='block break-words text-left text-gray-200 text-sm transition-colors duration-200 hover:text-[var(--accent)] focus-visible:outline-none'
-                                href={`#${child.id}`}
-                                onClick={handleLinkClick}
-                              >
-                                {child.text}
-                              </a>
-                            )}
+                            <a
+                              className={`block rounded-md px-2 py-1 transition-all duration-150 ${
+                                isSubheader ? 'text-xs' : 'text-sm'
+                              } ${isSubheader ? 'ml-2' : ''} ${
+                                isActive(child.id)
+                                  ? 'bg-[var(--accent-glow)] text-[var(--accent)]'
+                                  : 'text-[var(--foreground-muted)] hover:bg-[var(--surface-1)] hover:text-[var(--accent)]'
+                              }`}
+                              href={`#${child.id}`}
+                              onClick={handleLinkClick}
+                            >
+                              {child.text}
+                            </a>
                           </li>
                         );
                       })}
@@ -321,9 +288,9 @@ export const TableOfContents = () => {
                 </li>
               ))}
             </ul>
-          </div>
-        </motion.div>
-      </div>
-    </nav>
+          </motion.nav>
+        )}
+      </AnimatePresence>
+    </>
   );
 };
diff --git a/src/components/typography/callout.tsx b/src/components/typography/callout.tsx
index bdc7fd0..eec6014 100644
--- a/src/components/typography/callout.tsx
+++ b/src/components/typography/callout.tsx
@@ -3,7 +3,7 @@ import type { CalloutProps } from '@/types';
 export const Callout = ({ children, className = '' }: CalloutProps) => {
   return (
     <p
-      className={`mb-3 rounded-md border-yellow-500 border-l-4 bg-zinc-800/60 p-3 text-zinc-100 ${className}`}
+      className={`mb-3 rounded-lg border-[var(--accent)] border-l-4 bg-[var(--surface-2)] p-4 text-[var(--foreground)] ${className}`}
     >
       {children}
     </p>
diff --git a/src/components/typography/code-span.tsx b/src/components/typography/code-span.tsx
index 13778e9..dc46403 100644
--- a/src/components/typography/code-span.tsx
+++ b/src/components/typography/code-span.tsx
@@ -9,7 +9,7 @@ export const CodeSpan = ({
 
   return (
     <code
-      className={`rounded bg-zinc-800/80 px-2 py-1 font-mono text-yellow-500 ${sizeClass} ${className}`}
+      className={`rounded-md bg-[var(--surface-3)] px-2 py-1 font-mono text-[var(--accent)] ${sizeClass} ${className}`}
     >
       {children}
     </code>
diff --git a/src/components/typography/header.tsx b/src/components/typography/header.tsx
index 2d7e70b..6764abb 100644
--- a/src/components/typography/header.tsx
+++ b/src/components/typography/header.tsx
@@ -6,7 +6,7 @@ export const Header = ({ children, className = '', id }: HeaderProps) => {
   const headerId = id || slugify(text);
   return (
     <h3
-      className={`mb-3 font-bold text-xl underline decoration-2 decoration-yellow-500 underline-offset-4 ${className}`}
+      className={`mb-3 font-bold text-[var(--foreground)] text-xl underline decoration-2 decoration-[var(--accent)] underline-offset-4 ${className}`}
       id={headerId}
     >
       {children}
diff --git a/src/components/typography/subheader.tsx b/src/components/typography/subheader.tsx
index 0dc75bf..e892899 100644
--- a/src/components/typography/subheader.tsx
+++ b/src/components/typography/subheader.tsx
@@ -7,7 +7,7 @@ export const Subheader = ({ children, className = '', id }: SubheaderProps) => {
 
   return (
     <h4
-      className={`mb-2 font-extrabold text-lg text-zinc-100 uppercase tracking-wide ${className}`}
+      className={`mb-2 font-extrabold text-[var(--foreground)] text-lg uppercase tracking-wide ${className}`}
       id={headerId}
     >
       {children}
diff --git a/src/components/typography/text.tsx b/src/components/typography/text.tsx
index f7a06bc..9367bbf 100644
--- a/src/components/typography/text.tsx
+++ b/src/components/typography/text.tsx
@@ -5,7 +5,10 @@ export const Text = ({
   className = '',
   variant = 'default',
 }: TextProps) => {
-  const variantClass = variant === 'muted' ? 'text-zinc-300' : 'text-white';
+  const variantClass =
+    variant === 'muted'
+      ? 'text-[var(--foreground-muted)]'
+      : 'text-[var(--foreground)]';
 
   return <p className={`mb-3 ${variantClass} ${className}`}>{children}</p>;
 };
diff --git a/src/components/width-switcher/width-switcher.tsx b/src/components/width-switcher/width-switcher.tsx
index d478462..dc550a0 100644
--- a/src/components/width-switcher/width-switcher.tsx
+++ b/src/components/width-switcher/width-switcher.tsx
@@ -1,61 +1,49 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import type { WidthPreset } from '@/types';
 
 type WidthSwitcherProps = {
   currentWidth: WidthPreset;
   onChangeWidth: (next: WidthPreset) => void;
-  headerHeightFallback?: number;
 };
 
+const presets: { key: WidthPreset; icon: string }[] = [
+  { key: 'narrow', icon: '┃' },
+  { key: 'comfortable', icon: '┃┃' },
+  { key: 'wide', icon: '┃┃┃' },
+  { key: 'full', icon: '┃┃┃┃' },
+];
+
 export function WidthSwitcher({
   currentWidth,
   onChangeWidth,
-  headerHeightFallback = 120,
 }: WidthSwitcherProps) {
-  // Track live header height via ResizeObserver as a fallback when the CSS var is not yet set
-  const [headerHeight, setHeaderHeight] =
-    useState<number>(headerHeightFallback);
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-    const header = document.getElementById('page-header');
-    if (!header) return;
-    const update = () => setHeaderHeight(header.getBoundingClientRect().height);
-    update();
-    const observer = new ResizeObserver(update);
-    observer.observe(header);
-    return () => observer.disconnect();
-  }, []);
-
   return (
     <div
       className='sticky z-40 mb-2 hidden w-full justify-center px-6 sm:flex'
       style={{
-        top: `var(--page-header-height, ${headerHeight}px)`,
+        top: 'var(--page-header-height, 128px)',
         transition: 'top 0.28s ease-in-out',
         transform: 'translateY(50%)',
       }}
     >
-      <div className='glass inline-flex items-center gap-1 rounded-full p-1 text-sm text-white'>
-        {(['narrow', 'comfortable', 'wide', 'full'] as WidthPreset[]).map(
-          (preset) => (
-            <button
-              aria-pressed={currentWidth === preset}
-              className={`rounded-full px-3 py-1 capitalize transition-colors ${
-                currentWidth === preset
-                  ? 'bg-yellow-500 text-black'
-                  : 'text-zinc-200 hover:text-yellow-500'
-              }`}
-              key={preset}
-              onClick={() => onChangeWidth(preset)}
-              type='button'
-            >
-              {preset}
-            </button>
-          )
-        )}
+      <div className='glass inline-flex items-center gap-0.5 rounded-full p-1 text-sm'>
+        {presets.map((preset) => (
+          <button
+            aria-label={`Set width to ${preset.key}`}
+            aria-pressed={currentWidth === preset.key}
+            className={`rounded-full px-3 py-1 font-mono text-xs capitalize transition-all duration-200 ${
+              currentWidth === preset.key
+                ? 'bg-[var(--accent-strong)] text-white shadow-sm'
+                : 'text-[var(--foreground-muted)] hover:bg-[var(--surface-2)] hover:text-[var(--accent)]'
+            }`}
+            key={preset.key}
+            onClick={() => onChangeWidth(preset.key)}
+            type='button'
+          >
+            {preset.key}
+          </button>
+        ))}
       </div>
     </div>
   );