diff --git a/src/app/(main)/home.tsx b/src/app/(main)/home.tsx
index 831aacb..70fc84e 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, Sparkles } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import type { Section } from '@/types';
 
@@ -13,76 +16,186 @@ const sections: Section[] = [
   },
 ];
 
-export default function HomeComponent() {
-  const router = useRouter();
+const features = [
+  {
+    icon: Code2,
+    title: 'Code Examples',
+    description:
+      'Syntax-highlighted, real-world code snippets you can learn from',
+  },
+  {
+    icon: BookOpen,
+    title: 'Interactive Notes',
+    description: 'Structured study materials with clear explanations',
+  },
+  {
+    icon: Layers,
+    title: 'Topic Navigation',
+    description: 'Organized by skill level with table of contents',
+  },
+];
 
-  const totalItems = sections.length;
-  const columns = 3;
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    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 itemVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.5, ease: [0.25, 0.46, 0.45, 0.94] as const },
+  },
+};
+
+export default function HomeComponent() {
+  const router = useRouter();
 
   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);
+    <div className='flex min-h-screen flex-col items-center px-4 py-16 sm:px-6 md:py-24'>
+      {/* Hero */}
+      <motion.div
+        animate='visible'
+        className='mb-16 max-w-3xl text-center md:mb-24'
+        initial='hidden'
+        variants={containerVariants}
+      >
+        <motion.div
+          className='mb-6 inline-flex items-center gap-2 rounded-full border border-[var(--border)] bg-[var(--card-bg)] px-4 py-1.5 text-[var(--muted)] text-sm'
+          variants={itemVariants}
+        >
+          <Sparkles className='h-3.5 w-3.5 text-[var(--accent)]' />
+          Interview Preparation Platform
+        </motion.div>
 
-          const itemsOnLastRow = totalItems % columns;
-          const itemsOnThisRow =
-            isLastRow && itemsOnLastRow > 0 ? itemsOnLastRow : columns;
+        <motion.h1
+          className='mb-6 font-bold text-4xl leading-tight tracking-tight sm:text-5xl md:text-6xl lg:text-7xl'
+          variants={itemVariants}
+        >
+          Ace your next <span className='text-gradient'>interview</span>
+        </motion.h1>
 
-          const colSpan = Math.round(6 / itemsOnThisRow);
+        <motion.p
+          className='mx-auto mb-10 max-w-xl text-[var(--muted)] text-base leading-relaxed sm:text-lg'
+          variants={itemVariants}
+        >
+          Structured study materials, real code examples, and comprehensive
+          topic coverage to help you prepare with confidence.
+        </motion.p>
 
-          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.div variants={itemVariants}>
+          <button
+            className='group inline-flex items-center gap-2.5 rounded-xl bg-[var(--accent)] px-6 py-3 font-semibold text-[#0b0f1a] text-sm transition-all duration-300 hover:shadow-[0_0_24px_rgba(52,211,153,0.3)] hover:brightness-110 sm:px-8 sm:py-3.5 sm:text-base'
+            onClick={() => router.push('/frontend/junior')}
+            type='button'
+          >
+            Start Preparing
+            <ArrowRight className='h-4 w-4 transition-transform duration-300 group-hover:translate-x-0.5' />
+          </button>
+        </motion.div>
+      </motion.div>
 
-          return (
-            <button
-              className={`${className} flex flex-col text-left`}
+      {/* Topic Cards */}
+      <motion.div
+        className='mb-20 w-full max-w-4xl md:mb-28'
+        initial='hidden'
+        variants={containerVariants}
+        viewport={{ once: true, margin: '-50px' }}
+        whileInView='visible'
+      >
+        <motion.h2
+          className='mb-8 text-center font-semibold text-[var(--muted)] text-lg uppercase tracking-wide'
+          variants={itemVariants}
+        >
+          Topics
+        </motion.h2>
+        <div className='grid grid-cols-1 gap-4 sm:gap-6'>
+          {sections.map((section) => (
+            <motion.button
+              className='glass-card group relative flex flex-col overflow-hidden rounded-2xl p-6 text-left sm:flex-row sm:items-center sm:p-8'
               disabled={section.inProgress}
               key={`${section.title}-${section.level}`}
               onClick={() => router.push(section.href)}
               type='button'
+              variants={itemVariants}
+              whileHover={{ scale: 1.01 }}
+              whileTap={{ scale: 0.995 }}
             >
-              <div className='flex-grow'>
-                <div className='mb-2'>
-                  <h2 className='font-bold text-xl text-zinc-100'>
+              {/* Gradient accent line at top */}
+              <div
+                className='absolute top-0 right-0 left-0 h-px'
+                style={{ background: 'var(--accent-gradient)' }}
+              />
+
+              <div className='flex-1'>
+                <div className='mb-2 flex items-center gap-3'>
+                  <h3 className='font-bold text-[var(--foreground)] text-lg sm:text-xl'>
                     {section.title}
-                  </h2>
+                  </h3>
                   {section.level && (
-                    <span className='font-medium text-sm text-yellow-500'>
+                    <span className='rounded-full bg-[var(--accent)]/10 px-2.5 py-0.5 font-medium text-[var(--accent)] text-xs'>
                       {section.level}
                     </span>
                   )}
                   {section.inProgress && (
-                    <span className='ml-2 text-red-400 text-sm'>
-                      (in progress)
+                    <span className='rounded-full bg-amber-500/10 px-2.5 py-0.5 text-amber-400 text-xs'>
+                      In Progress
                     </span>
                   )}
                 </div>
-                <p className='mb-4 text-sm text-zinc-400 leading-relaxed'>
+                <p className='text-[var(--muted)] text-sm leading-relaxed'>
                   {section.description}
                 </p>
               </div>
-              <div className='flex items-center font-medium text-sm text-zinc-500'>
-                {section.inProgress ? 'Coming soon...' : 'Start learning →'}
+
+              <div className='mt-4 flex items-center gap-1 font-medium text-[var(--accent)] text-sm transition-all duration-300 group-hover:gap-2 sm:mt-0 sm:ml-6'>
+                {section.inProgress ? (
+                  'Coming soon'
+                ) : (
+                  <>
+                    Explore
+                    <ArrowRight className='h-4 w-4' />
+                  </>
+                )}
               </div>
-            </button>
-          );
-        })}
-      </div>
+            </motion.button>
+          ))}
+        </div>
+      </motion.div>
+
+      {/* Features Grid */}
+      <motion.div
+        className='w-full max-w-4xl'
+        initial='hidden'
+        variants={containerVariants}
+        viewport={{ once: true, margin: '-50px' }}
+        whileInView='visible'
+      >
+        <div className='grid grid-cols-1 gap-4 sm:grid-cols-3 sm:gap-6'>
+          {features.map((feature) => (
+            <motion.div
+              className='glass-card rounded-2xl p-6'
+              key={feature.title}
+              variants={itemVariants}
+            >
+              <feature.icon className='mb-3 h-5 w-5 text-[var(--accent)]' />
+              <h3 className='mb-1.5 font-semibold text-[var(--foreground)] text-sm'>
+                {feature.title}
+              </h3>
+              <p className='text-[var(--muted)] text-xs leading-relaxed'>
+                {feature.description}
+              </p>
+            </motion.div>
+          ))}
+        </div>
+      </motion.div>
     </div>
   );
 }
diff --git a/src/app/frontend/junior/frontend-junior.tsx b/src/app/frontend/junior/frontend-junior.tsx
index 86969bd..b93c91e 100644
--- a/src/app/frontend/junior/frontend-junior.tsx
+++ b/src/app/frontend/junior/frontend-junior.tsx
@@ -1,7 +1,20 @@
 'use client';
+
+import { motion } from 'framer-motion';
+import {
+  ArrowLeft,
+  ArrowRight,
+  Code2,
+  FileCode,
+  Globe,
+  Layers,
+  Wrench,
+} from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import type { Section } from '@/types';
 
+const topicIcons = [FileCode, Code2, Globe, Layers, Wrench];
+
 const sections: Section[] = [
   {
     href: '/frontend/junior/html&css',
@@ -36,69 +49,150 @@ const sections: Section[] = [
   },
 ];
 
-export default function FrontendJunior() {
-  const router = useRouter();
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: { staggerChildren: 0.08, delayChildren: 0.15 },
+  },
+};
 
-  const totalItems = sections.length;
-  const columns = 3;
+const itemVariants = {
+  hidden: { opacity: 0, y: 16 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.45, ease: [0.25, 0.46, 0.45, 0.94] as const },
+  },
+};
 
-  const colSpanClasses: { [key: number]: string } = {
-    2: 'md:col-span-2',
-    3: 'md:col-span-3',
-    6: 'md:col-span-6',
-  };
+export default function FrontendJunior() {
+  const router = useRouter();
 
   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);
+    <div className='flex min-h-screen flex-col items-center px-4 py-12 sm:px-6 md:py-20'>
+      {/* Back nav */}
+      <motion.div
+        animate={{ opacity: 1, x: 0 }}
+        className='mb-8 w-full max-w-4xl'
+        initial={{ opacity: 0, x: -10 }}
+        transition={{ duration: 0.3 }}
+      >
+        <button
+          className='group inline-flex items-center gap-1.5 text-[var(--muted)] text-sm transition-colors hover:text-[var(--accent)]'
+          onClick={() => router.push('/')}
+          type='button'
+        >
+          <ArrowLeft className='group-hover:-translate-x-0.5 h-3.5 w-3.5 transition-transform' />
+          Back to topics
+        </button>
+      </motion.div>
 
-          const itemsOnLastRow = totalItems % columns;
-          const itemsOnThisRow =
-            isLastRow && itemsOnLastRow > 0 ? itemsOnLastRow : columns;
+      {/* Header */}
+      <motion.div
+        animate='visible'
+        className='mb-12 w-full max-w-4xl md:mb-16'
+        initial='hidden'
+        variants={containerVariants}
+      >
+        <motion.div
+          className='mb-3 inline-flex items-center gap-2 rounded-full border border-[var(--border)] bg-[var(--card-bg)] px-3 py-1 font-medium text-[var(--accent)] text-xs'
+          variants={itemVariants}
+        >
+          Junior Level
+        </motion.div>
+        <motion.h1
+          className='mb-3 font-bold text-3xl tracking-tight sm:text-4xl md:text-5xl'
+          variants={itemVariants}
+        >
+          Frontend Development
+        </motion.h1>
+        <motion.p
+          className='max-w-lg text-[var(--muted)] text-sm leading-relaxed sm:text-base'
+          variants={itemVariants}
+        >
+          Master the fundamentals of modern frontend development. Topics marked
+          as in progress are coming soon.
+        </motion.p>
+      </motion.div>
 
-          const colSpan = Math.round(6 / itemsOnThisRow);
+      {/* Topic Grid */}
+      <motion.div
+        animate='visible'
+        className='w-full max-w-4xl'
+        initial='hidden'
+        variants={containerVariants}
+      >
+        <div className='grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4 lg:grid-cols-3'>
+          {sections.map((section, index) => {
+            const Icon = topicIcons[index] || Code2;
+            const isDisabled = section.inProgress;
 
-          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]
-          }`;
+            return (
+              <motion.button
+                className={`glass-card group relative flex flex-col overflow-hidden rounded-xl p-5 text-left sm:p-6 ${
+                  isDisabled ? 'cursor-not-allowed opacity-50' : ''
+                }`}
+                disabled={isDisabled}
+                key={section.title}
+                onClick={() => !isDisabled && router.push(section.href)}
+                type='button'
+                variants={itemVariants}
+                whileHover={isDisabled ? {} : { scale: 1.02, y: -2 }}
+                whileTap={isDisabled ? {} : { scale: 0.98 }}
+              >
+                {/* Top gradient bar */}
+                {!isDisabled && (
+                  <div
+                    className='absolute top-0 right-0 left-0 h-px'
+                    style={{ background: 'var(--accent-gradient)' }}
+                  />
+                )}
 
-          return (
-            <button
-              className={`${className} flex flex-col text-left`}
-              key={section.title}
-              onClick={() => router.push(section.href)}
-              type='button'
-            >
-              <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>
-                  )}
+                <div className='mb-3 flex items-center gap-3'>
+                  <div className='flex h-8 w-8 items-center justify-center rounded-lg bg-[var(--accent)]/10'>
+                    <Icon className='h-4 w-4 text-[var(--accent)]' />
+                  </div>
+                  <span className='font-mono text-[var(--muted)] text-xs'>
+                    {String(index + 1).padStart(2, '0')}
+                  </span>
+                </div>
+
+                <h2 className='mb-2 font-semibold text-[var(--foreground)] text-base'>
+                  {section.title}
                 </h2>
-                <p className='mb-4 text-sm text-zinc-400 leading-relaxed'>
+
+                {section.inProgress && (
+                  <span className='mb-2 inline-block w-fit rounded-full bg-amber-500/10 px-2 py-0.5 text-amber-400 text-xs'>
+                    In Progress
+                  </span>
+                )}
+
+                <p className='mb-4 flex-1 text-[var(--muted)] text-xs leading-relaxed'>
                   {section.description}
                 </p>
-              </div>
-              <div className='flex items-center font-medium text-sm text-zinc-500'>
-                Learn more →
-              </div>
-            </button>
-          );
-        })}
-      </div>
+
+                <div
+                  className={`flex items-center gap-1 font-medium text-xs transition-all duration-300 ${
+                    isDisabled
+                      ? 'text-[var(--muted)]'
+                      : 'text-[var(--accent)] group-hover:gap-2'
+                  }`}
+                >
+                  {isDisabled ? (
+                    'Coming soon'
+                  ) : (
+                    <>
+                      Start learning
+                      <ArrowRight className='h-3 w-3' />
+                    </>
+                  )}
+                </div>
+              </motion.button>
+            );
+          })}
+        </div>
+      </motion.div>
     </div>
   );
 }
diff --git a/src/app/globals.css b/src/app/globals.css
index e1274dc..0bd2b4d 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,26 +1,32 @@
 @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);
+  /* ─── Design System: Deep Navy + Emerald/Cyan Accent ─── */
+  --background: #0b0f1a;
+  --background-secondary: #111827;
+  --foreground: #e8edf5;
+  --accent: #34d399; /* emerald-400 */
+  --accent-secondary: #06b6d4; /* cyan-500 */
+  --accent-gradient: linear-gradient(135deg, #06b6d4, #34d399);
+  --muted: #94a3b8; /* slate-400 */
+  --muted-foreground: #cbd5e1; /* slate-300 */
+  --border: rgba(148, 163, 184, 0.1);
+  --border-strong: rgba(148, 163, 184, 0.2);
+  --glass-bg: rgba(15, 23, 42, 0.6);
+  --glass-strong-bg: rgba(15, 23, 42, 0.85);
+  --card-bg: rgba(15, 23, 42, 0.5);
   --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 */
+  /* Offset anchor navigation 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 background hues - deep blues and teals */
+  --ambient-1: 6 182 212; /* cyan-500 */
+  --ambient-2: 52 211 153; /* emerald-400 */
+  --ambient-3: 99 102 241; /* indigo-500 */
+  --ambient-4: 139 92 246; /* violet-500 */
 }
 
 /* Smooth scrolling for anchor navigation; respect reduced motion */
@@ -37,12 +43,17 @@ html {
 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);
 }
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
+  --color-accent: var(--accent);
+  --color-accent-secondary: var(--accent-secondary);
+  --color-muted: var(--muted);
+  --color-border: var(--border);
+  --color-card-bg: var(--card-bg);
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
 }
@@ -50,13 +61,16 @@ h4[id] {
 /* Respect system light preference while favoring dark by default */
 @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: #f8fafc;
+    --background-secondary: #f1f5f9;
+    --foreground: #0f172a;
+    --muted: #64748b;
+    --muted-foreground: #475569;
+    --border: rgba(15, 23, 42, 0.08);
+    --border-strong: rgba(15, 23, 42, 0.15);
+    --glass-bg: rgba(248, 250, 252, 0.7);
+    --glass-strong-bg: rgba(248, 250, 252, 0.9);
+    --card-bg: rgba(241, 245, 249, 0.7);
   }
 }
 
@@ -76,9 +90,7 @@ body {
     "Segoe UI Emoji";
 }
 
-/* Image + gradient background is rendered via AmbientBackground component */
-
-/* subtle vignette to highlight glass layers */
+/* Subtle vignette overlay */
 body::after {
   content: "";
   position: fixed;
@@ -86,11 +98,15 @@ body::after {
   z-index: -1;
   background:
     radial-gradient(
-      60% 60% at 50% 0%,
-      rgba(255, 255, 255, 0.03),
-      transparent 70%
+      ellipse 80% 50% at 50% 0%,
+      rgba(6, 182, 212, 0.03),
+      transparent 60%
     ),
-    radial-gradient(80% 50% at 50% 100%, rgba(0, 0, 0, 0.25), transparent 70%);
+    radial-gradient(
+      ellipse 60% 40% at 50% 100%,
+      rgba(0, 0, 0, 0.3),
+      transparent 70%
+    );
   pointer-events: none;
   transition: filter 0.28s ease-in-out;
 }
@@ -107,13 +123,40 @@ a:focus-visible,
 .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%);
+  backdrop-filter: blur(20px) saturate(170%);
+  -webkit-backdrop-filter: blur(20px) saturate(170%);
+}
+
+/* Card glass variant */
+.glass-card {
+  background: var(--card-bg);
+  border: 1px solid var(--border);
+  backdrop-filter: blur(12px) saturate(130%);
+  -webkit-backdrop-filter: blur(12px) saturate(130%);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.glass-card:hover {
+  border-color: var(--border-strong);
+  background: rgba(15, 23, 42, 0.65);
+  box-shadow:
+    0 8px 32px rgba(6, 182, 212, 0.08),
+    0 0 0 1px var(--border-strong);
+}
+
+/* Accent gradient text utility */
+.text-gradient {
+  background: var(--accent-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }
 
 /* Mobile: allow full viewport width */
@@ -123,8 +166,7 @@ a:focus-visible,
   }
 }
 
-/* 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 */
+/* SSR-safe initial width via data attribute (desktop only) */
 @media (min-width: 641px) {
   html[data-content-width="narrow"] .content-container {
     max-width: 50vw;
@@ -149,3 +191,26 @@ a:focus-visible,
 .scrollbar-hide::-webkit-scrollbar {
   display: none;
 }
+
+/* Thin styled scrollbar for TOC */
+.scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(148, 163, 184, 0.2) transparent;
+}
+
+.scrollbar-thin::-webkit-scrollbar {
+  width: 4px;
+}
+
+.scrollbar-thin::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  background: rgba(148, 163, 184, 0.2);
+  border-radius: 2px;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  background: rgba(148, 163, 184, 0.4);
+}
diff --git a/src/components/ambient-background/ambient-background.tsx b/src/components/ambient-background/ambient-background.tsx
index bef1f56..f0d7157 100644
--- a/src/components/ambient-background/ambient-background.tsx
+++ b/src/components/ambient-background/ambient-background.tsx
@@ -1,29 +1,117 @@
 'use client';
 
-import Image from 'next/image';
+import { motion } from 'framer-motion';
+import { useEffect, useState } from 'react';
 
 export function AmbientBackground() {
+  const [prefersReduced, setPrefersReduced] = useState(false);
+
+  useEffect(() => {
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
+    setPrefersReduced(mq.matches);
+    const handler = (e: MediaQueryListEvent) => setPrefersReduced(e.matches);
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }, []);
+
   return (
     <div
       aria-hidden
       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)' }}
+      {/* Base gradient */}
+      <div
+        className='absolute inset-0'
+        style={{
+          background:
+            'radial-gradient(ellipse 120% 80% at 50% -20%, rgba(99, 102, 241, 0.15), transparent 60%), radial-gradient(ellipse 80% 60% at 80% 50%, rgba(6, 182, 212, 0.1), transparent 50%), radial-gradient(ellipse 80% 60% at 20% 80%, rgba(139, 92, 246, 0.08), transparent 50%)',
+        }}
       />
+
+      {/* Animated orbs */}
+      <motion.div
+        animate={
+          prefersReduced
+            ? {}
+            : {
+                x: [0, 30, -20, 0],
+                y: [0, -40, 20, 0],
+                scale: [1, 1.1, 0.95, 1],
+              }
+        }
+        className='absolute top-[-10%] right-[10%] h-[500px] w-[500px] rounded-full opacity-20'
+        style={{
+          background:
+            'radial-gradient(circle, rgba(6, 182, 212, 0.4), transparent 70%)',
+          filter: 'blur(80px)',
+        }}
+        transition={{
+          duration: 20,
+          repeat: Number.POSITIVE_INFINITY,
+          ease: 'easeInOut',
+        }}
+      />
+      <motion.div
+        animate={
+          prefersReduced
+            ? {}
+            : {
+                x: [0, -25, 35, 0],
+                y: [0, 30, -25, 0],
+                scale: [1, 0.9, 1.05, 1],
+              }
+        }
+        className='absolute bottom-[10%] left-[5%] h-[400px] w-[400px] rounded-full opacity-15'
+        style={{
+          background:
+            'radial-gradient(circle, rgba(52, 211, 153, 0.4), transparent 70%)',
+          filter: 'blur(80px)',
+        }}
+        transition={{
+          duration: 25,
+          repeat: Number.POSITIVE_INFINITY,
+          ease: 'easeInOut',
+        }}
+      />
+      <motion.div
+        animate={
+          prefersReduced
+            ? {}
+            : {
+                x: [0, 40, -15, 0],
+                y: [0, -20, 35, 0],
+              }
+        }
+        className='absolute top-[40%] left-[50%] h-[350px] w-[350px] rounded-full opacity-10'
+        style={{
+          background:
+            'radial-gradient(circle, rgba(139, 92, 246, 0.5), transparent 70%)',
+          filter: 'blur(80px)',
+        }}
+        transition={{
+          duration: 30,
+          repeat: Number.POSITIVE_INFINITY,
+          ease: 'easeInOut',
+        }}
+      />
+
+      {/* Fade to background at bottom */}
       <div
         className='absolute inset-0'
+        style={{
+          background:
+            'linear-gradient(to bottom, transparent 40%, var(--background) 100%)',
+        }}
+      />
+
+      {/* Grid overlay for subtle texture */}
+      <div
+        className='absolute inset-0 opacity-[0.015]'
         style={{
           backgroundImage:
-            'linear-gradient(to bottom, rgba(0,0,0,0), var(--background))',
+            'linear-gradient(rgba(148, 163, 184, 1) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, 1) 1px, transparent 1px)',
+          backgroundSize: '64px 64px',
         }}
       />
     </div>
diff --git a/src/components/code-block/code-block.tsx b/src/components/code-block/code-block.tsx
index c83e946..ca13fd8 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(6, 182, 212, 0.12)';
+      borderLeft = '3px solid rgb(6, 182, 212)';
     }
 
     return {
@@ -76,9 +73,15 @@ 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)]'
+      style={{ background: 'rgba(15, 23, 42, 0.6)' }}
+    >
       {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 px-4 py-2 font-mono text-[var(--muted)] text-xs'
+          style={{ background: 'rgba(15, 23, 42, 0.4)' }}
+        >
           {`/* ${comment} */`}
         </div>
       )}
@@ -94,8 +97,8 @@ export const CodeBlock = ({
           margin: 0,
           padding: '1rem',
           background: 'transparent',
-          fontSize: '0.875rem',
-          lineHeight: '1.5',
+          fontSize: '0.8125rem',
+          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..77a80c0 100644
--- a/src/components/layout/page-container.tsx
+++ b/src/components/layout/page-container.tsx
@@ -11,6 +11,8 @@ const presetToMaxWidth: Record<WidthPreset, string> = {
   full: '100vw',
 };
 
+const validPresets = new Set<string>(Object.keys(presetToMaxWidth));
+
 export function PageContainer({
   children,
   className = '',
@@ -18,20 +20,26 @@ export function PageContainer({
   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 [width, setWidth] = useState<WidthPreset>(initialWidth);
 
   const [headerHeight, setHeaderHeight] = useState<number>(120);
 
+  // Sync width state from localStorage/data-attribute after hydration
+  useEffect(() => {
+    // First check localStorage (most reliable client-side)
+    const stored = localStorage.getItem(storageKey);
+    if (stored && validPresets.has(stored)) {
+      setWidth(stored as WidthPreset);
+      document.documentElement.dataset.contentWidth = stored;
+      return;
+    }
+    // Fallback to data attribute set by boot script or SSR cookie
+    const attr = document.documentElement.dataset.contentWidth;
+    if (attr && validPresets.has(attr)) {
+      setWidth(attr as WidthPreset);
+    }
+  }, []);
+
   useEffect(() => {
     if (typeof window === 'undefined') {
       return;
diff --git a/src/components/notes-area/notes-area.tsx b/src/components/notes-area/notes-area.tsx
index 6644a05..3024c69 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-lg border border-[var(--border)] border-dashed bg-[var(--card-bg)] p-4 text-[var(--muted)]`}
     >
-      <p className='italic'>{placeholder}</p>
+      <p className='text-sm italic'>{placeholder}</p>
     </div>
   );
 };
diff --git a/src/components/page-header/page-header.tsx b/src/components/page-header/page-header.tsx
index 219d2b2..c294e67 100644
--- a/src/components/page-header/page-header.tsx
+++ b/src/components/page-header/page-header.tsx
@@ -28,7 +28,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;
@@ -111,7 +110,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)');
@@ -135,7 +133,6 @@ export const PageHeader = ({
     };
   }, []);
 
-  // Scroll listener with rAF batching
   useEffect(() => {
     if (typeof window === 'undefined') return;
     let rafId: number | null = null;
@@ -145,7 +142,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);
         }
@@ -163,7 +159,6 @@ export const PageHeader = ({
     };
   }, [handleMobileScroll]);
 
-  // Expose current header height as a CSS variable for other components
   useEffect(() => {
     if (typeof document === 'undefined') {
       return;
@@ -174,7 +169,6 @@ export const PageHeader = ({
     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 +200,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 +210,20 @@ export const PageHeader = ({
         ease: 'easeOut',
       }}
     >
+      {/* Gradient accent line at bottom */}
+      <div
+        className='absolute right-0 bottom-0 left-0 h-px'
+        style={{
+          background: 'var(--accent-gradient)',
+          opacity: isHiddenOnMobile ? 0 : 0.3,
+        }}
+      />
+
       <div className='mx-auto h-full max-w-4xl 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-[var(--foreground)] sm:text-3xl md:text-4xl'
               layout={!isMobileScreen}
               transition={{ duration: 0.25, ease: 'easeInOut' }}
             >
@@ -230,7 +232,7 @@ export const PageHeader = ({
             <AnimatePresence>
               {(isInitialLoad || !isScrolled) && (
                 <motion.p
-                  className='text-sm text-zinc-300 sm:text-base'
+                  className='text-[var(--muted)] text-sm sm:text-base'
                   exit={{ opacity: 0, height: 0 }}
                   initial={{ opacity: 1, height: 'auto' }}
                   layout={!isMobileScreen}
@@ -241,24 +243,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(--muted)] transition-colors hover:bg-[var(--border)] 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(--muted)] transition-colors hover:bg-[var(--border)] 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..06b5f99 100644
--- a/src/components/section-card/section-card.tsx
+++ b/src/components/section-card/section-card.tsx
@@ -5,16 +5,23 @@ 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='glass-card relative mb-10 overflow-hidden rounded-xl p-6 sm:p-8'
       id={id}
     >
+      {/* Top gradient accent */}
+      <div
+        className='absolute top-0 right-0 left-0 h-px'
+        style={{ background: 'var(--accent-gradient)', opacity: 0.4 }}
+      />
       <h2
-        className='mb-4 border-zinc-700 border-b pb-2 font-bold text-2xl text-white'
+        className='mb-5 border-[var(--border)] border-b pb-3 font-bold text-[var(--foreground)] text-xl sm:text-2xl'
         id={id}
       >
         {title}
       </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..13f3233 100644
--- a/src/components/table-of-contents/table-of-contents.tsx
+++ b/src/components/table-of-contents/table-of-contents.tsx
@@ -1,8 +1,8 @@
 'use client';
 
 import { motion } from 'framer-motion';
-import { Pin, PinOff } from 'lucide-react';
-import { useEffect, useRef, useState } from 'react';
+import { List, Pin, PinOff } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import type { TocHeading, TocItem } from '@/types';
 
 export const TableOfContents = () => {
@@ -11,28 +11,24 @@ export const TableOfContents = () => {
   const [pinned, setPinned] = useState(false);
   const [headerHeight, setHeaderHeight] = useState(0);
   const [isLoaded, setIsLoaded] = useState(false);
+  const [activeId, setActiveId] = useState<string>('');
   const touchStartRef = useRef<number | null>(null);
   const openRef = useRef(open);
   const pinnedRef = useRef(pinned);
 
+  // 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 +36,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,15 +51,13 @@ export const TableOfContents = () => {
       setIsLoaded(true);
     };
 
-    // Initial update with delay to ensure content is rendered
     const timeoutId = setTimeout(updateTOC, 0);
 
     const header = document.getElementById('page-header');
     let resizeObserver: ResizeObserver | null = null;
-    let updateHeight: (() => void) | null = null;
 
     if (header) {
-      updateHeight = () =>
+      const updateHeight = () =>
         setHeaderHeight(header.getBoundingClientRect().height);
       updateHeight();
       resizeObserver = new ResizeObserver(updateHeight);
@@ -74,12 +66,41 @@ export const TableOfContents = () => {
 
     return () => {
       clearTimeout(timeoutId);
-      if (resizeObserver) {
-        resizeObserver.disconnect();
-      }
+      resizeObserver?.disconnect();
     };
   }, []);
 
+  // IntersectionObserver for active section tracking
+  useEffect(() => {
+    if (!isLoaded) return;
+
+    const headings = document.querySelectorAll<HTMLElement>(
+      'h2[id], h3[id], h4[id]'
+    );
+    if (headings.length === 0) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            setActiveId(entry.target.id);
+          }
+        }
+      },
+      {
+        rootMargin: '-20% 0px -70% 0px',
+        threshold: 0,
+      }
+    );
+
+    for (const heading of headings) {
+      observer.observe(heading);
+    }
+
+    return () => observer.disconnect();
+  }, [isLoaded]);
+
+  // Touch gestures for mobile
   useEffect(() => {
     const onTouchStart = (e: TouchEvent) => {
       if (window.innerWidth < 768) {
@@ -103,94 +124,83 @@ export const TableOfContents = () => {
     };
   }, []);
 
-  // Also open on single tap anywhere near the left edge 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) {
+      if (e.touches[0].clientX < 30) {
         setOpen(true);
       }
     };
     window.addEventListener('touchstart', onTouchTap, { passive: true });
-    return () => {
-      window.removeEventListener('touchstart', onTouchTap);
-    };
+    return () => window.removeEventListener('touchstart', onTouchTap);
   }, []);
 
-  const handleMouseLeave = () => {
-    if (!pinned) {
-      setOpen(false);
-    }
-  };
+  const handleMouseLeave = useCallback(() => {
+    if (!pinned) setOpen(false);
+  }, [pinned]);
 
-  const handleLinkClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
-    if (!pinned) {
-      setOpen(false);
-    }
+  const handleLinkClick = useCallback(
+    (e: React.MouseEvent<HTMLAnchorElement>) => {
+      if (!pinned) setOpen(false);
 
-    // 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'
-        ) {
-          history.replaceState(null, '', href);
+      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' });
+          if (typeof history !== 'undefined') {
+            history.replaceState(null, '', href);
+          }
+          setActiveId(targetId);
         }
       }
-    }
-  };
+    },
+    [pinned]
+  );
 
-  const handleTriggerClick = () => {
-    setOpen(!open);
-  };
+  const handleTriggerClick = useCallback(() => {
+    setOpen((prev) => !prev);
+  }, []);
 
-  // Handle click outside on mobile and always unpin when mobile
+  // Keep refs in sync
   useEffect(() => {
     openRef.current = open;
     pinnedRef.current = pinned;
   }, [open, pinned]);
 
+  // Close on outside click (mobile)
   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;
-      }
+      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');
-
+      const tocContent = tocNav?.querySelector('.scrollbar-thin');
       if (tocContent && !tocContent.contains(target)) {
         setOpen(false);
       }
     };
 
     document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
+    return () => document.removeEventListener('mousedown', handleClickOutside);
   }, []);
 
-  // Don't render until content is loaded to prevent flickering
-  if (!isLoaded) {
-    return null;
-  }
+  // Determine if a section or its children are active
+  const isSectionActive = (section: TocItem) => {
+    if (activeId === section.id) return true;
+    return section.children.some((child) => child.id === activeId);
+  };
+
+  if (!isLoaded) return null;
 
   return (
     <nav
+      aria-label='Table of contents'
       className='pointer-events-none fixed left-0 z-40'
       style={{
         top: `var(--page-header-height, ${headerHeight}px)`,
@@ -198,7 +208,7 @@ export const TableOfContents = () => {
       }}
     >
       <div className='relative'>
-        {/* Hover/edge affordance – no explicit button */}
+        {/* Hover trigger zone */}
         <div
           aria-hidden='true'
           className='pointer-events-auto absolute top-0 left-0 w-3 md:w-4'
@@ -209,117 +219,134 @@ export const TableOfContents = () => {
           }}
         />
 
-        {/* Preview hint when closed - same height as open state */}
+        {/* Closed hint - subtle accent line */}
         {!open && (
           <motion.div
             animate={{ opacity: 1, x: 0 }}
-            className='pointer-events-none absolute top-0 left-0 w-2 md:w-3'
+            className='pointer-events-none absolute top-0 left-0 w-0.5'
             exit={{ opacity: 0 }}
-            initial={{ opacity: 0, x: -16 }}
+            initial={{ opacity: 0, x: -4 }}
             style={{
               height: `calc(100dvh - var(--page-header-height, ${headerHeight}px))`,
+              background: 'var(--accent-gradient)',
+              opacity: 0.3,
             }}
             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>
+          />
         )}
 
-        {/* Main menu */}
+        {/* Mobile FAB trigger */}
+        <motion.button
+          animate={{ opacity: 1, scale: 1 }}
+          aria-label='Open table of contents'
+          className='pointer-events-auto fixed right-4 bottom-4 z-50 flex h-12 w-12 items-center justify-center rounded-full shadow-lg md:hidden'
+          initial={{ opacity: 0, scale: 0.8 }}
+          onClick={handleTriggerClick}
+          style={{
+            background: 'var(--accent)',
+            color: '#0b0f1a',
+            display: open ? 'none' : 'flex',
+          }}
+          type='button'
+          whileTap={{ scale: 0.9 }}
+        >
+          <List size={20} />
+        </motion.button>
+
+        {/* Main panel */}
         <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,
-          }}
+          className='scrollbar-thin glass pointer-events-auto relative min-w-[240px] max-w-[280px] overflow-y-auto p-4 pr-2 text-sm 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,
+            duration: 0.25,
           }}
         >
           <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>
-
-            <ul className='space-y-3 pr-8'>
-              {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'
-                    href={`#${section.id}`}
-                    onClick={handleLinkClick}
-                  >
-                    {section.text}
-                  </a>
-
-                  {section.children.length > 0 && (
-                    <ul className='mt-2 space-y-1 border-zinc-600 border-l pl-4'>
-                      {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) */
+            {/* Header */}
+            <div className='mb-3 flex items-center justify-between pr-1'>
+              <span className='font-semibold text-[var(--foreground)] text-xs uppercase tracking-wider'>
+                Contents
+              </span>
+              <button
+                aria-label={
+                  pinned ? 'Unpin table of contents' : 'Pin table of contents'
+                }
+                className='hidden rounded p-1 text-[var(--muted)] transition-colors hover:text-[var(--accent)] md:block'
+                onClick={() => setPinned(!pinned)}
+                type='button'
+              >
+                {pinned ? <PinOff size={14} /> : <Pin size={14} />}
+              </button>
+            </div>
+
+            <ul className='space-y-1'>
+              {items.map((section) => {
+                const sectionIsActive = isSectionActive(section);
+                const headingIsActive = activeId === section.id;
+
+                let headingColorClass = 'text-[var(--muted)]';
+                if (headingIsActive) {
+                  headingColorClass =
+                    'bg-[var(--accent)]/10 text-[var(--accent)]';
+                } else if (sectionIsActive) {
+                  headingColorClass = 'text-[var(--foreground)]';
+                }
+
+                return (
+                  <li key={section.id}>
+                    <a
+                      className={`block rounded-md px-2 py-1.5 text-left font-semibold text-xs transition-all duration-200 hover:text-[var(--accent)] focus-visible:outline-none ${headingColorClass}`}
+                      href={`#${section.id}`}
+                      onClick={handleLinkClick}
+                    >
+                      {section.text}
+                    </a>
+
+                    {section.children.length > 0 && (
+                      <ul className='mt-0.5 ml-2 space-y-0.5 border-[var(--border)] border-l'>
+                        {section.children.map((child) => {
+                          const isChildActive = activeId === child.id;
+                          const isSubheader = child.level === 4;
+
+                          return (
+                            <li key={child.id}>
                               <a
-                                className='block break-words text-left text-gray-200 text-sm transition-colors duration-200 hover:text-[var(--accent)] focus-visible:outline-none'
+                                className={`block rounded-md py-1 transition-all duration-200 hover:text-[var(--accent)] focus-visible:outline-none ${
+                                  isSubheader
+                                    ? 'pl-6 text-[10px]'
+                                    : 'pl-3 text-[11px]'
+                                } ${
+                                  isChildActive
+                                    ? 'bg-[var(--accent)]/10 text-[var(--accent)]'
+                                    : 'text-[var(--muted)]'
+                                }`}
                                 href={`#${child.id}`}
                                 onClick={handleLinkClick}
                               >
                                 {child.text}
                               </a>
-                            )}
-                          </li>
-                        );
-                      })}
-                    </ul>
-                  )}
-                </li>
-              ))}
+                            </li>
+                          );
+                        })}
+                      </ul>
+                    )}
+                  </li>
+                );
+              })}
             </ul>
           </div>
         </motion.div>
diff --git a/src/components/typography/callout.tsx b/src/components/typography/callout.tsx
index bdc7fd0..500eb3b 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(--accent)]/5 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..4124a3d 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(--accent)]/10 px-1.5 py-0.5 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..b44f9f9 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-gradient text-lg sm:text-xl ${className}`}
       id={headerId}
     >
       {children}
diff --git a/src/components/typography/subheader.tsx b/src/components/typography/subheader.tsx
index 0dc75bf..16cdeec 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-bold text-[var(--foreground)] text-base uppercase tracking-wider ${className}`}
       id={headerId}
     >
       {children}
diff --git a/src/components/typography/text.tsx b/src/components/typography/text.tsx
index f7a06bc..1b0e305 100644
--- a/src/components/typography/text.tsx
+++ b/src/components/typography/text.tsx
@@ -5,7 +5,12 @@ export const Text = ({
   className = '',
   variant = 'default',
 }: TextProps) => {
-  const variantClass = variant === 'muted' ? 'text-zinc-300' : 'text-white';
+  const variantClass =
+    variant === 'muted' ? 'text-[var(--muted)]' : 'text-[var(--foreground)]';
 
-  return <p className={`mb-3 ${variantClass} ${className}`}>{children}</p>;
+  return (
+    <p className={`mb-3 leading-relaxed ${variantClass} ${className}`}>
+      {children}
+    </p>
+  );
 };
diff --git a/src/components/width-switcher/width-switcher.tsx b/src/components/width-switcher/width-switcher.tsx
index d478462..d23789f 100644
--- a/src/components/width-switcher/width-switcher.tsx
+++ b/src/components/width-switcher/width-switcher.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { motion } from 'framer-motion';
 import { useEffect, useState } from 'react';
 import type { WidthPreset } from '@/types';
 
@@ -9,12 +10,13 @@ type WidthSwitcherProps = {
   headerHeightFallback?: number;
 };
 
+const presets: WidthPreset[] = ['narrow', 'comfortable', 'wide', 'full'];
+
 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);
 
@@ -38,24 +40,37 @@ export function WidthSwitcher({
         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) => (
+      <div className='glass relative inline-flex items-center gap-0.5 rounded-full p-1 text-xs'>
+        {presets.map((preset) => {
+          const isActive = currentWidth === preset;
+          return (
             <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'
+              aria-pressed={isActive}
+              className={`relative z-10 rounded-full px-3 py-1.5 capitalize transition-colors duration-200 ${
+                isActive
+                  ? 'text-[#0b0f1a]'
+                  : 'text-[var(--muted)] hover:text-[var(--foreground)]'
               }`}
               key={preset}
               onClick={() => onChangeWidth(preset)}
               type='button'
             >
+              {isActive && (
+                <motion.div
+                  className='absolute inset-0 rounded-full bg-[var(--accent)]'
+                  layoutId='width-indicator'
+                  style={{ zIndex: -1 }}
+                  transition={{
+                    type: 'spring',
+                    stiffness: 400,
+                    damping: 30,
+                  }}
+                />
+              )}
               {preset}
             </button>
-          )
-        )}
+          );
+        })}
       </div>
     </div>
   );