From a7d50ccee37bc2103a7dfa337fea0ccfb9792e1b Mon Sep 17 00:00:00 2001
From: Aditya Raut <araut7798@gmail.com>
Date: Sat, 4 Apr 2026 17:39:16 +0530
Subject: [PATCH] refactor: update theme styles and improve ThemeApplier
 functionality

- Adjusted light and dark theme colors for better contrast and aesthetics.
- Removed custom theme support from ThemeApplier and ThemeSelector.
- Enhanced CSS variable management in ThemeApplier for improved theme switching.
- Updated ThemeSelector styles for a more consistent appearance across themes.
---
 client/src/App.jsx                            |  21 +-
 .../components/CourseView/AssignmentCard.jsx  |  13 +-
 .../components/CourseView/CourseHeader.jsx    | 170 ++-
 .../components/CourseView/LiveClassCard.jsx   |   9 +-
 .../components/CourseView/LiveClassesTab.jsx  |   5 +-
 .../components/CourseView/MaterialCard.jsx    | 261 +++--
 client/src/components/CourseView/Modals.jsx   |  12 +-
 .../src/components/CourseView/QuizzesTab.jsx  |  14 +-
 .../src/components/CourseView/StudentsTab.jsx |  13 +-
 client/src/components/Navbar.jsx              |  42 +-
 client/src/context/ThemeContext.jsx           |   1 -
 client/src/index.css                          |  79 +-
 client/src/pages/CourseView.jsx               |  55 +-
 client/src/pages/Mainpage.jsx                 |  12 +-
 client/src/pages/TechArchitecture.jsx         | 997 ++++++------------
 client/src/theme/ThemeApplier.jsx             |  57 +-
 client/src/theme/ThemeSelector.jsx            |   5 +-
 17 files changed, 684 insertions(+), 1082 deletions(-)

diff --git a/client/src/App.jsx b/client/src/App.jsx
index 66a66e1..c5ba89a 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -39,25 +39,8 @@ function App() {
     <ThemeContext.Provider value={themeContextValue}>
       <AuthProvider>
         <ThemeApplier themeName={themeName} />
-        <div className="min-h-screen bg-[var(--bg)] text-[var(--text)] transition-colors duration-500 relative overflow-hidden">
-          {/* Animated morphing background orbs */}
-          <div className="pointer-events-none fixed inset-0 -z-10 opacity-70">
-            <div className="bg-orb bg-orb-1" />
-            <div className="bg-orb bg-orb-2" />
-            <div className="bg-orb bg-orb-3" />
-          </div>
-
-          {/* Subtle noise texture overlay */}
-          <div
-            className="pointer-events-none fixed inset-0 -z-10 opacity-[0.015]"
-            style={{
-              backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
-            }}
-          />
-
-          <div className="relative z-10">
-            <AppRoutes />
-          </div>
+        <div className="min-h-screen bg-[var(--bg)] text-[var(--text)] transition-colors duration-300">
+          <AppRoutes />
         </div>
       </AuthProvider>
     </ThemeContext.Provider>
diff --git a/client/src/components/CourseView/AssignmentCard.jsx b/client/src/components/CourseView/AssignmentCard.jsx
index f1f0c78..afd09af 100644
--- a/client/src/components/CourseView/AssignmentCard.jsx
+++ b/client/src/components/CourseView/AssignmentCard.jsx
@@ -43,12 +43,9 @@ function AssignmentCard({
 
   return (
     <div
-      className="group glass-heavy rounded-2xl border border-[var(--border)]/12 hover:border-[var(--accent)]/18 transition-all duration-400 overflow-hidden
+      className="group bg-[var(--surface)] rounded-2xl border border-[var(--border)] hover:border-[var(--accent)]/40 transition-all duration-300 overflow-hidden
                     hover:shadow-[0_16px_48px_-12px_rgba(0,0,0,0.12)]"
     >
-      {/* Status accent bar */}
-      <div className={`h-[2px] w-full bg-gradient-to-r ${statusConfig.bar}`} />
-
       <div className="p-5 sm:p-6">
         <div className="flex items-start gap-4">
           {/* Status icon */}
@@ -139,14 +136,14 @@ function AssignmentCard({
 
         {/* Student: submission form */}
         {!isTeacher && !hasSubmission && (
-          <div className="mt-5 pt-5 border-t border-[var(--border)]/10">
+          <div className="mt-5 pt-5 border-t border-[var(--border)]">
             <p className="text-[11px] font-bold text-[var(--muted)] mb-2.5 uppercase tracking-[0.12em]">
               Your Answer
             </p>
             <textarea
-              className="w-full px-4 py-3.5 glass-heavy border border-[var(--border)]/25 rounded-2xl text-sm outline-none
-                         resize-y focus:border-[var(--accent)] focus:ring-3 focus:ring-[var(--accent)]/10
-                         transition-all duration-300 text-[var(--text)] placeholder:text-[var(--muted)]/35 min-h-[100px] font-medium"
+              className="w-full px-4 py-3.5 bg-[var(--surface-elevated)] border border-[var(--border)] rounded-2xl text-sm outline-none
+                         resize-y focus:border-[var(--accent)] focus:ring-2 focus:ring-[var(--accent)]/12
+                         transition-all duration-300 text-[var(--text)] placeholder:text-[var(--muted)] min-h-[100px] font-medium"
               placeholder="Write your answer here..."
               value={submissionText || ""}
               onChange={(e) => onSubmit(assignment.id, e.target.value, true)}
diff --git a/client/src/components/CourseView/CourseHeader.jsx b/client/src/components/CourseView/CourseHeader.jsx
index e84f07e..eb8f1f0 100644
--- a/client/src/components/CourseView/CourseHeader.jsx
+++ b/client/src/components/CourseView/CourseHeader.jsx
@@ -12,93 +12,54 @@ function CourseHeader({
       icon: "📄",
       val: materials.length,
       label: "Materials",
-      gradient: "from-blue-500 to-indigo-600",
-      bgGlow: "bg-blue-500/10",
+      color: "text-blue-500",
+      bg: "bg-blue-500/10",
     },
     {
       icon: "📋",
       val: assignments.length,
       label: "Assignments",
-      gradient: "from-amber-500 to-orange-600",
-      bgGlow: "bg-amber-500/10",
+      color: "text-amber-500",
+      bg: "bg-amber-500/10",
     },
     {
       icon: "🧠",
       val: quizzes.length,
       label: "Quizzes",
-      gradient: "from-pink-500 to-rose-600",
-      bgGlow: "bg-pink-500/10",
+      color: "text-pink-500",
+      bg: "bg-pink-500/10",
     },
     {
       icon: "📹",
       val: liveClasses.length,
       label: "Live",
-      gradient: "from-red-500 to-red-700",
-      bgGlow: "bg-red-500/10",
+      color: "text-red-500",
+      bg: "bg-red-500/10",
     },
     {
       icon: "👨‍🎓",
       val: course.enrollmentCount ?? 0,
       label: "Students",
-      gradient: "from-emerald-500 to-teal-600",
-      bgGlow: "bg-emerald-500/10",
+      color: "text-emerald-500",
+      bg: "bg-emerald-500/10",
     },
   ];
 
   return (
-    <div className="relative rounded-[2rem] overflow-hidden mb-8 animate-[slide-down_0.6s_cubic-bezier(0.16,1,0.3,1)_both] shadow-[0_32px_80px_-16px_rgba(0,0,0,0.5)]">
-      {/* Main gradient background */}
-      <div className="absolute inset-0 bg-gradient-to-br from-[var(--accent)] via-violet-600 to-fuchsia-600" />
-
-      {/* Animated mesh overlay */}
-      <div
-        className="absolute inset-0 opacity-30"
-        style={{
-          backgroundImage: `
-            radial-gradient(circle at 20% 30%, rgba(255,255,255,0.15) 0%, transparent 50%),
-            radial-gradient(circle at 80% 70%, rgba(236,72,153,0.2) 0%, transparent 50%),
-            radial-gradient(circle at 50% 50%, rgba(139,92,246,0.15) 0%, transparent 60%)
-          `,
-        }}
-      />
-
-      {/* Floating orbs */}
-      <div className="absolute -top-16 -right-16 w-56 h-56 rounded-full bg-white/8 blur-3xl animate-float pointer-events-none" />
-      <div
-        className="absolute -bottom-12 -left-12 w-44 h-44 rounded-full bg-pink-400/15 blur-3xl animate-float pointer-events-none"
-        style={{ animationDelay: "2s" }}
-      />
-      <div
-        className="absolute top-1/3 right-1/3 w-32 h-32 rounded-full bg-violet-300/10 blur-2xl animate-float pointer-events-none"
-        style={{ animationDelay: "4s" }}
-      />
-
-      {/* Subtle grid pattern */}
-      <div
-        className="absolute inset-0 opacity-[0.04] pointer-events-none"
-        style={{
-          backgroundImage:
-            "linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px)",
-          backgroundSize: "40px 40px",
-        }}
-      />
-
-      <div className="relative px-8 py-9 sm:px-10 sm:py-10">
-        {/* Top: breadcrumb + subject badge */}
-        <div className="flex items-start justify-between gap-6 mb-6">
+    <div className="rounded-2xl border border-[var(--border)] bg-[var(--surface)] mb-6 overflow-hidden shadow-sm transition-colors duration-300">
+      <div className="px-6 py-5">
+        {/* Top row: breadcrumb + title */}
+        <div className="flex items-start justify-between gap-4 mb-4">
           <div className="flex-1 min-w-0">
             {/* Breadcrumb */}
-            <div className="flex items-center gap-2.5 mb-4">
-              <div className="w-8 h-8 rounded-xl bg-white/15 backdrop-blur-sm flex items-center justify-center text-base ring-1 ring-white/10">
-                📚
-              </div>
-              <span className="text-white/60 text-[11px] font-bold uppercase tracking-[0.15em]">
+            <div className="flex items-center gap-2 mb-2">
+              <span className="text-[11px] font-bold uppercase tracking-widest text-[var(--muted)]">
                 Course
               </span>
               {course.subject && (
                 <>
-                  <span className="text-white/25 text-xs">›</span>
-                  <span className="px-2.5 py-1 rounded-lg bg-white/10 text-white/80 text-[11px] font-bold uppercase tracking-[0.12em] backdrop-blur-sm ring-1 ring-white/10">
+                  <span className="text-[var(--muted)] text-xs">›</span>
+                  <span className="px-2 py-0.5 rounded-md bg-[var(--accent)]/10 text-[var(--accent)] text-[11px] font-bold uppercase tracking-wide">
                     {course.subject}
                   </span>
                 </>
@@ -106,22 +67,20 @@ function CourseHeader({
             </div>
 
             {/* Title */}
-            <h1 className="text-3xl sm:text-[2.5rem] font-black text-white mb-3 tracking-[-0.03em] leading-[1.1] drop-shadow-lg">
+            <h1 className="text-xl sm:text-2xl font-black text-[var(--text)] tracking-tight leading-tight mb-1">
               {course.title}
             </h1>
 
-            {/* Teacher name */}
-            <div className="flex items-center gap-2.5 mb-1">
-              <div className="w-7 h-7 rounded-full bg-white/15 backdrop-blur-sm flex items-center justify-center text-xs ring-1 ring-white/10">
-                👨‍🏫
-              </div>
-              <span className="text-white/75 text-sm font-semibold">
+            {/* Teacher */}
+            <div className="flex items-center gap-1.5">
+              <span className="text-sm">👨‍🏫</span>
+              <span className="text-sm text-[var(--text-secondary)] font-medium">
                 {course.teacher?.name}
               </span>
             </div>
 
             {course.description && (
-              <p className="text-sm text-white/50 leading-relaxed mt-3.5 max-w-2xl line-clamp-2 font-medium">
+              <p className="text-sm text-[var(--muted)] leading-relaxed mt-2 max-w-2xl line-clamp-1">
                 {course.description}
               </p>
             )}
@@ -129,12 +88,12 @@ function CourseHeader({
 
           {/* Subject badge (desktop) */}
           {course.subject && (
-            <div className="shrink-0 hidden lg:block">
-              <div className="px-6 py-4 bg-white/10 rounded-2xl border border-white/15 backdrop-blur-md text-center ring-1 ring-white/5">
-                <p className="text-white font-black text-lg tracking-wide mb-0.5">
+            <div className="hidden lg:flex items-center justify-center shrink-0 px-4 py-2 rounded-xl bg-[var(--accent)]/8 border border-[var(--accent)]/20 text-center">
+              <div>
+                <p className="text-[var(--accent)] font-black text-base tracking-wide">
                   {course.subject}
                 </p>
-                <p className="text-white/50 text-[10px] font-bold uppercase tracking-[0.15em]">
+                <p className="text-[var(--muted)] text-[10px] font-bold uppercase tracking-widest mt-0.5">
                   Subject
                 </p>
               </div>
@@ -143,25 +102,20 @@ function CourseHeader({
         </div>
 
         {/* Stats row */}
-        <div className="flex flex-wrap gap-2.5 mb-6">
+        <div className="flex flex-wrap gap-2 mb-4">
           {stats.map((s) => (
             <div
               key={s.label}
-              className="group flex items-center gap-3 px-4 py-3 bg-white/8 hover:bg-white/14 rounded-2xl
-                         border border-white/10 hover:border-white/20 backdrop-blur-sm transition-all duration-300 cursor-default
-                         hover:shadow-[0_8px_24px_-8px_rgba(0,0,0,0.3)]"
+              className={`flex items-center gap-2 px-3 py-2 rounded-xl border border-[var(--border)] ${s.bg} transition-all duration-200 cursor-default hover:-translate-y-0.5`}
             >
-              <div
-                className={`w-8 h-8 rounded-xl bg-gradient-to-br ${s.gradient} flex items-center justify-center text-sm
-                              shadow-lg group-hover:scale-110 group-hover:shadow-xl transition-all duration-300`}
-              >
-                {s.icon}
-              </div>
+              <span className="text-base">{s.icon}</span>
               <div>
-                <p className="text-white font-black text-lg leading-none tabular-nums">
+                <p
+                  className={`text-sm font-black leading-none tabular-nums ${s.color}`}
+                >
                   {s.val}
                 </p>
-                <p className="text-white/50 text-[9px] font-bold uppercase tracking-[0.15em] leading-none mt-1">
+                <p className="text-[9px] font-bold text-[var(--muted)] uppercase tracking-wider leading-none mt-0.5">
                   {s.label}
                 </p>
               </div>
@@ -171,42 +125,40 @@ function CourseHeader({
 
         {/* Student progress bar */}
         {!isTeacher && materials.length > 0 && (
-          <div className="bg-white/8 rounded-2xl px-5 py-4 border border-white/10 backdrop-blur-sm">
-            <div className="flex items-center justify-between text-xs font-bold text-white/80 mb-3">
-              <span className="flex items-center gap-2">
-                <span className="w-2 h-2 rounded-full bg-white animate-pulse" />
-                <span className="uppercase tracking-[0.1em] text-[11px]">
+          <div className="flex items-center gap-4 px-4 py-3 bg-[var(--surface-elevated)] rounded-xl border border-[var(--border)]">
+            <span className="text-lg shrink-0">📊</span>
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center justify-between mb-1.5">
+                <p className="text-xs font-bold text-[var(--text-secondary)]">
                   Your Progress
+                </p>
+                <span className="text-sm font-black text-emerald-500 tabular-nums">
+                  {matProgress}%
                 </span>
-              </span>
-              <span className="text-white font-black text-base tabular-nums">
-                {matProgress}%
-              </span>
-            </div>
-            <div className="relative h-3 bg-white/10 rounded-full overflow-hidden">
-              <div
-                className="absolute inset-y-0 left-0 bg-gradient-to-r from-white/80 to-white rounded-full
-                           transition-all duration-1000 ease-out shadow-[0_0_20px_rgba(255,255,255,0.4)]"
-                style={{ width: `${matProgress}%` }}
-              />
-              <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/15 to-transparent animate-[shimmer_2.5s_infinite]" />
+              </div>
+              <div className="h-1.5 bg-[var(--border)] rounded-full overflow-hidden">
+                <div
+                  className="h-full bg-gradient-to-r from-emerald-500 to-teal-400 rounded-full transition-all duration-700"
+                  style={{ width: `${matProgress}%` }}
+                />
+              </div>
+              <p className="text-[10px] text-[var(--muted)] mt-1">
+                {matProgress < 100
+                  ? "Keep going — you're doing great!"
+                  : "🎉 All materials completed!"}
+              </p>
             </div>
-            <p className="text-white/40 text-[11px] font-medium mt-2">
-              {matProgress < 100
-                ? "Keep going — you're doing great!"
-                : "🎉 All materials completed!"}
-            </p>
           </div>
         )}
 
-        {/* Teacher badges */}
+        {/* Teacher mode badges */}
         {isTeacher && (
-          <div className="flex items-center gap-2.5">
-            <span className="flex items-center gap-2 px-4 py-2 bg-white/10 rounded-xl border border-white/12 text-white/80 text-xs font-bold backdrop-blur-sm">
-              <span>🎓</span> Teaching Mode
+          <div className="flex items-center gap-2">
+            <span className="flex items-center gap-1.5 px-3 py-1.5 bg-[var(--accent)]/8 rounded-lg border border-[var(--accent)]/20 text-[var(--accent)] text-xs font-bold">
+              🎓 Teaching Mode
             </span>
-            <span className="flex items-center gap-2 px-4 py-2 bg-white/10 rounded-xl border border-white/12 text-white/80 text-xs font-bold backdrop-blur-sm">
-              <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse shadow-[0_0_8px_rgba(52,211,153,0.5)]" />
+            <span className="flex items-center gap-1.5 px-3 py-1.5 bg-emerald-500/8 rounded-lg border border-emerald-500/20 text-xs font-bold text-emerald-600 dark:text-emerald-400">
+              <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />
               Active Course
             </span>
           </div>
diff --git a/client/src/components/CourseView/LiveClassCard.jsx b/client/src/components/CourseView/LiveClassCard.jsx
index aad90da..a91e786 100644
--- a/client/src/components/CourseView/LiveClassCard.jsx
+++ b/client/src/components/CourseView/LiveClassCard.jsx
@@ -47,14 +47,9 @@ function LiveClassCard({
 
   return (
     <div
-      className={`group glass-heavy rounded-2xl border overflow-hidden transition-all duration-400
-                   hover:shadow-[0_16px_48px_-12px_rgba(0,0,0,0.12)] ${statusMeta.cardBorder}`}
+      className={`group bg-[var(--surface)] rounded-2xl border overflow-hidden transition-all duration-300
+                   hover:shadow-[0_8px_24px_-8px_rgba(0,0,0,0.10)] ${statusMeta.cardBorder}`}
     >
-      {/* Status bar */}
-      <div
-        className={`h-[2px] w-full bg-gradient-to-r ${statusMeta.bar} ${isLive ? "animate-pulse" : ""}`}
-      />
-
       <div className="p-5 sm:p-6 flex items-start gap-4">
         {/* Icon */}
         <div
diff --git a/client/src/components/CourseView/LiveClassesTab.jsx b/client/src/components/CourseView/LiveClassesTab.jsx
index b7cc5b5..50079dd 100644
--- a/client/src/components/CourseView/LiveClassesTab.jsx
+++ b/client/src/components/CourseView/LiveClassesTab.jsx
@@ -62,10 +62,7 @@ function LiveClassesTab({
       </div>
 
       {liveClasses.length === 0 ? (
-        <div
-          className="text-center py-20 glass-heavy rounded-3xl border border-[var(--border)]/10
-                        shadow-[0_4px_24px_-8px_rgba(0,0,0,0.06)]"
-        >
+        <div className="text-center py-20 bg-[var(--surface)] rounded-2xl border border-[var(--border)]">
           <div
             className="w-16 h-16 rounded-3xl bg-red-500/10 border border-red-500/15 flex items-center justify-center text-3xl mx-auto mb-5
                           shadow-[0_8px_24px_-8px_rgba(239,68,68,0.15)]"
diff --git a/client/src/components/CourseView/MaterialCard.jsx b/client/src/components/CourseView/MaterialCard.jsx
index 41d595b..f330b97 100644
--- a/client/src/components/CourseView/MaterialCard.jsx
+++ b/client/src/components/CourseView/MaterialCard.jsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import VideoEmbed from "./VideoEmbed";
 
 const TYPE_META = {
@@ -5,42 +6,48 @@ const TYPE_META = {
     icon: "▶️",
     label: "Video",
     bg: "from-red-500/20 to-red-600/8",
-    text: "text-red-400",
+    text: "text-red-500",
     border: "border-red-500/20",
     iconBg: "bg-red-500/12",
+    expandColor: "text-red-500",
   },
   document: {
     icon: "📄",
     label: "Document",
     bg: "from-amber-500/20 to-amber-600/8",
-    text: "text-amber-400",
+    text: "text-amber-500",
     border: "border-amber-500/20",
     iconBg: "bg-amber-500/12",
+    expandColor: "text-amber-500",
   },
   link: {
     icon: "🔗",
     label: "Link",
     bg: "from-emerald-500/20 to-teal-600/8",
-    text: "text-emerald-400",
+    text: "text-emerald-500",
     border: "border-emerald-500/20",
     iconBg: "bg-emerald-500/12",
+    expandColor: "text-emerald-500",
   },
   image: {
     icon: "🖼️",
     label: "Image",
     bg: "from-purple-500/20 to-purple-600/8",
-    text: "text-purple-400",
+    text: "text-purple-500",
     border: "border-purple-500/20",
     iconBg: "bg-purple-500/12",
+    expandColor: "text-purple-500",
   },
 };
+
 const defaultMeta = {
   icon: "📝",
   label: "Other",
   bg: "from-emerald-500/20 to-emerald-600/8",
-  text: "text-emerald-400",
+  text: "text-emerald-500",
   border: "border-emerald-500/20",
   iconBg: "bg-emerald-500/12",
+  expandColor: "text-emerald-500",
 };
 
 function isYouTubeUrl(url) {
@@ -57,124 +64,118 @@ function MaterialCard({
   const meta = TYPE_META[material.type] || defaultMeta;
   const fileUrl = material.fileUrl || "";
 
+  // Expanded = show full details+video; collapsed = headline only
+  const [expanded, setExpanded] = useState(false);
+
+  const hasMedia = !!fileUrl;
+
   return (
     <div
-      className={`group relative glass-heavy rounded-2xl border transition-all duration-400 overflow-hidden
+      className={`group rounded-2xl border transition-all duration-300 overflow-hidden bg-[var(--surface)]
                      ${
                        isDone
-                         ? "border-emerald-500/25 shadow-[0_0_24px_-6px_rgba(16,185,129,0.12)]"
-                         : "border-[var(--border)]/15 hover:border-[var(--accent)]/20 hover:shadow-[0_16px_48px_-12px_rgba(0,0,0,0.15)]"
+                         ? "border-emerald-500/30 shadow-[0_0_20px_-6px_rgba(16,185,129,0.10)]"
+                         : "border-[var(--border)] hover:border-[var(--accent)]/40 hover:shadow-[0_8px_24px_-8px_rgba(0,0,0,0.10)]"
                      }`}
     >
-      {/* Subtle top gradient line */}
-      <div
-        className={`h-[2px] w-full bg-gradient-to-r ${
-          isDone
-            ? "from-emerald-500/60 via-emerald-400/40 to-transparent"
-            : `${meta.bg.replace(/\/\d+/g, "")}`
-        }`}
-        style={{
-          background: isDone
-            ? "linear-gradient(90deg, rgba(16,185,129,0.5), rgba(20,184,166,0.3), transparent)"
-            : undefined,
-        }}
-      />
-
-      <div className="p-5 sm:p-6">
-        <div className="flex items-start gap-4">
-          {/* Type icon */}
-          <div
-            className={`w-12 h-12 rounded-2xl bg-gradient-to-br ${meta.bg} border ${meta.border}
-                           flex items-center justify-center text-xl shrink-0
-                           group-hover:scale-110 group-hover:shadow-lg transition-all duration-400`}
-          >
-            {meta.icon}
-          </div>
+      {/* ── HEADER ROW (always visible, clickable) ── */}
+      <button
+        type="button"
+        onClick={() => setExpanded((v) => !v)}
+        className="w-full flex items-center gap-4 px-5 py-4 text-left cursor-pointer
+                   transition-colors duration-200 hover:bg-[var(--surface-elevated)]"
+      >
+        {/* Type icon */}
+        <div
+          className={`w-10 h-10 rounded-xl bg-gradient-to-br ${meta.bg} border ${meta.border}
+                         flex items-center justify-center text-lg shrink-0
+                         group-hover:scale-105 transition-all duration-300 flex-shrink-0`}
+        >
+          {meta.icon}
+        </div>
 
-          <div className="flex-1 min-w-0">
-            {/* Title + badges row */}
-            <div className="flex items-start justify-between gap-3 mb-1.5">
-              <div className="flex items-center gap-2.5 flex-wrap min-w-0">
-                <h4 className="text-[15px] font-bold text-[var(--text)] leading-snug">
-                  {material.title}
-                </h4>
-                <span
-                  className={`px-2.5 py-[3px] rounded-lg text-[10px] font-black uppercase tracking-widest
-                                 bg-gradient-to-br ${meta.bg} ${meta.text} border ${meta.border}`}
+        {/* Title + badges */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 flex-wrap">
+            <h4 className="text-[14px] font-bold text-[var(--text)] leading-snug">
+              {material.title}
+            </h4>
+            <span
+              className={`px-2 py-[2px] rounded-md text-[10px] font-black uppercase tracking-widest
+                             bg-gradient-to-br ${meta.bg} ${meta.text} border ${meta.border}`}
+            >
+              {meta.label}
+            </span>
+            {isDone && (
+              <span className="flex items-center gap-1 px-2 py-[2px] rounded-md text-[10px] font-black uppercase tracking-widest bg-emerald-500/12 text-emerald-500 border border-emerald-500/20">
+                <svg
+                  width="9"
+                  height="9"
+                  viewBox="0 0 16 16"
+                  fill="currentColor"
                 >
-                  {meta.label}
-                </span>
-                {isDone && (
-                  <span className="flex items-center gap-1 px-2.5 py-[3px] rounded-lg text-[10px] font-black uppercase tracking-widest bg-emerald-500/12 text-emerald-400 border border-emerald-500/20">
-                    <svg
-                      width="10"
-                      height="10"
-                      viewBox="0 0 16 16"
-                      fill="currentColor"
-                    >
-                      <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z" />
-                    </svg>
-                    Done
-                  </span>
-                )}
-              </div>
-
-              {/* Actions */}
-              <div className="flex items-center gap-2 shrink-0">
-                {!isTeacher && (
-                  <button
-                    onClick={() => onToggleComplete(material.id)}
-                    className={`px-4 py-2 rounded-xl text-xs font-bold border cursor-pointer transition-all duration-300 active:scale-95
-                                 ${
-                                   isDone
-                                     ? "bg-emerald-500/12 hover:bg-emerald-500/20 text-emerald-400 border-emerald-500/20 shadow-[0_0_12px_-4px_rgba(16,185,129,0.2)]"
-                                     : "glass hover:bg-[var(--accent)]/10 text-[var(--muted)] hover:text-[var(--accent)] border-[var(--border)]/25 hover:border-[var(--accent)]/25"
-                                 }`}
-                  >
-                    {isDone ? "✓ Completed" : "Mark Done"}
-                  </button>
-                )}
-                {isTeacher && (
-                  <button
-                    onClick={() => onDelete(material.id)}
-                    className="px-4 py-2 bg-red-500/8 hover:bg-red-500/15 text-red-400 rounded-xl text-xs font-bold
-                               border border-red-500/15 hover:border-red-500/25 cursor-pointer transition-all duration-300 active:scale-95"
-                  >
-                    Delete
-                  </button>
-                )}
-              </div>
-            </div>
+                  <path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z" />
+                </svg>
+                Done
+              </span>
+            )}
+          </div>
+
+          {/* Date line (always visible) */}
+          <p className="text-[11px] text-[var(--muted)] mt-0.5">
+            Added{" "}
+            {new Date(material.createdAt).toLocaleDateString("en-US", {
+              month: "short",
+              day: "numeric",
+              year: "numeric",
+            })}
+          </p>
+        </div>
+
+        {/* Chevron expand/collapse indicator */}
+        <div className="shrink-0 flex items-center gap-2">
+          {hasMedia && (
+            <span
+              className={`text-[11px] font-semibold ${meta.expandColor} opacity-70`}
+            >
+              {expanded ? "Collapse" : "View"}
+            </span>
+          )}
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="currentColor"
+            className={`text-[var(--muted)] transition-transform duration-300 ${expanded ? "rotate-180" : ""}`}
+          >
+            <path d="M4.22 6.22a.75.75 0 011.06 0L8 8.94l2.72-2.72a.75.75 0 111.06 1.06l-3.25 3.25a.75.75 0 01-1.06 0L4.22 7.28a.75.75 0 010-1.06z" />
+          </svg>
+        </div>
+      </button>
 
+      {/* ── EXPANDED CONTENT ── */}
+      {expanded && (
+        <div className="px-5 pb-5 border-t border-[var(--border)]">
+          <div className="pt-4 space-y-4">
             {/* Description */}
             {material.description && (
-              <p className="text-[13px] text-[var(--muted)] mb-2.5 leading-relaxed line-clamp-2">
+              <p className="text-[13px] text-[var(--muted)] leading-relaxed">
                 {material.description}
               </p>
             )}
 
-            {/* Date */}
-            <p className="text-[11px] text-[var(--muted)]/50 font-medium mb-2">
-              Added{" "}
-              {new Date(material.createdAt).toLocaleDateString("en-US", {
-                month: "short",
-                day: "numeric",
-                year: "numeric",
-              })}
-            </p>
-
-            {/* Video: YouTube embed OR HTML5 player (Cloudinary / direct URL) */}
+            {/* Video: YouTube embed OR HTML5 player */}
             {material.type === "video" &&
               fileUrl &&
               (isYouTubeUrl(fileUrl) ? (
-                <div className="mt-3 rounded-xl overflow-hidden ring-1 ring-[var(--border)]/10">
+                <div className="rounded-xl overflow-hidden ring-1 ring-[var(--border)]">
                   <VideoEmbed url={fileUrl} />
                 </div>
               ) : (
                 <video
                   controls
-                  className="w-full mt-3 rounded-xl ring-1 ring-[var(--border)]/10"
-                  style={{ maxHeight: 220 }}
+                  className="w-full rounded-xl ring-1 ring-[var(--border)]"
+                  style={{ maxHeight: 260 }}
                 >
                   <source src={fileUrl} />
                   Your browser does not support the video tag.
@@ -186,8 +187,8 @@ function MaterialCard({
               <img
                 src={fileUrl}
                 alt={material.title}
-                className="w-full mt-3 rounded-xl object-cover ring-1 ring-[var(--border)]/10"
-                style={{ maxHeight: 220 }}
+                className="w-full rounded-xl object-cover ring-1 ring-[var(--border)]"
+                style={{ maxHeight: 260 }}
               />
             )}
 
@@ -198,14 +199,14 @@ function MaterialCard({
                   href={fileUrl}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className={`inline-flex items-center gap-2 text-xs font-bold mt-1 px-3 py-1.5 rounded-lg
+                  className={`inline-flex items-center gap-2 text-xs font-bold px-4 py-2 rounded-lg
                              ${meta.iconBg} ${meta.text} border ${meta.border}
-                             hover:shadow-md transition-all duration-300 hover:scale-[1.02]`}
+                             hover:shadow-md transition-all duration-200 hover:scale-[1.02]`}
                 >
                   {meta.icon} Open {meta.label}
                   <svg
-                    width="12"
-                    height="12"
+                    width="11"
+                    height="11"
                     viewBox="0 0 16 16"
                     fill="currentColor"
                     className="opacity-60"
@@ -214,19 +215,45 @@ function MaterialCard({
                   </svg>
                 </a>
               )}
-          </div>
-        </div>
 
-        {/* Completed footer */}
-        {isDone && (
-          <div className="mt-4 pt-3.5 border-t border-emerald-500/10 flex items-center gap-2">
-            <div className="w-2 h-2 rounded-full bg-emerald-400 shadow-[0_0_6px_rgba(52,211,153,0.5)]" />
-            <span className="text-[11px] font-bold text-emerald-400/80 uppercase tracking-[0.12em]">
-              Material completed
-            </span>
+            {/* Actions row */}
+            <div className="flex items-center gap-2 pt-1 border-t border-[var(--border)]">
+              {!isTeacher && (
+                <button
+                  onClick={() => onToggleComplete(material.id)}
+                  className={`px-4 py-2 rounded-xl text-xs font-bold border cursor-pointer transition-all duration-200 active:scale-95
+                               ${
+                                 isDone
+                                   ? "bg-emerald-500/12 hover:bg-emerald-500/20 text-emerald-500 border-emerald-500/25"
+                                   : "bg-[var(--surface-elevated)] hover:bg-[var(--accent)]/10 text-[var(--muted)] hover:text-[var(--accent)] border-[var(--border)] hover:border-[var(--accent)]/30"
+                               }`}
+                >
+                  {isDone ? "✓ Completed" : "Mark as Done"}
+                </button>
+              )}
+              {isTeacher && (
+                <button
+                  onClick={() => onDelete(material.id)}
+                  className="px-4 py-2 bg-red-500/8 hover:bg-red-500/15 text-red-500 rounded-xl text-xs font-bold
+                             border border-red-500/20 hover:border-red-500/30 cursor-pointer transition-all duration-200 active:scale-95"
+                >
+                  Delete
+                </button>
+              )}
+
+              {/* Completed footer indicator */}
+              {isDone && (
+                <div className="flex items-center gap-1.5 ml-auto">
+                  <div className="w-2 h-2 rounded-full bg-emerald-500" />
+                  <span className="text-[11px] font-bold text-emerald-500 uppercase tracking-[0.1em]">
+                    Completed
+                  </span>
+                </div>
+              )}
+            </div>
           </div>
-        )}
-      </div>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/client/src/components/CourseView/Modals.jsx b/client/src/components/CourseView/Modals.jsx
index cf0ec96..0130cc4 100644
--- a/client/src/components/CourseView/Modals.jsx
+++ b/client/src/components/CourseView/Modals.jsx
@@ -1,8 +1,8 @@
 const inputCls =
-  "w-full px-4 py-3.5 border border-[var(--border)]/40 rounded-2xl text-sm outline-none focus:border-[var(--accent)] focus:ring-4 focus:ring-[var(--accent)]/10 focus:shadow-[0_8px_24px_-8px_var(--accent)/20] transition-all duration-300 glass-heavy text-[var(--text)] placeholder:text-[var(--muted)]/40 hover:border-[var(--accent)]/25 font-medium";
+  "w-full px-4 py-3 bg-[var(--surface-elevated)] border border-[var(--border)] rounded-xl text-sm outline-none focus:border-[var(--accent)] focus:ring-2 focus:ring-[var(--accent)]/12 transition-all duration-200 text-[var(--text)] placeholder:text-[var(--muted)] font-medium";
 
 const textareaCls =
-  "w-full px-4 py-3.5 border border-[var(--border)]/40 rounded-2xl text-sm outline-none resize-y focus:border-[var(--accent)] focus:ring-4 focus:ring-[var(--accent)]/10 focus:shadow-[0_8px_24px_-8px_var(--accent)/20] transition-all duration-300 glass-heavy text-[var(--text)] placeholder:text-[var(--muted)]/40 hover:border-[var(--accent)]/25 font-medium";
+  "w-full px-4 py-3 bg-[var(--surface-elevated)] border border-[var(--border)] rounded-xl text-sm outline-none resize-y focus:border-[var(--accent)] focus:ring-2 focus:ring-[var(--accent)]/12 transition-all duration-200 text-[var(--text)] placeholder:text-[var(--muted)] font-medium";
 
 export const MATERIAL_TYPES = [
   { value: "video", label: "Video" },
@@ -17,14 +17,14 @@ export const FILE_UPLOAD_TYPES = ["video", "document", "image"];
 
 export const modalOverlay = (onClose, children) => (
   <div
-    className="fixed inset-0 bg-black/60 backdrop-blur-xl flex items-center justify-center z-50 p-5
+    className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-5
                animate-[fade-in_0.2s_ease_both]"
     onClick={(e) => e.target === e.currentTarget && onClose()}
   >
     <div
-      className="glass-heavy border border-[var(--border)]/30 rounded-3xl p-8 w-full max-w-lg max-h-[90vh] overflow-y-auto 
-                    shadow-[0_40px_100px_-20px_rgba(0,0,0,0.5),0_0_0_1px_rgba(255,255,255,0.05)] text-[var(--text)]
-                    animate-[scale-in_0.35s_cubic-bezier(0.16,1,0.3,1)_both]"
+      className="bg-[var(--surface)] border border-[var(--border)] rounded-2xl p-7 w-full max-w-lg max-h-[90vh] overflow-y-auto
+                    shadow-[0_24px_60px_-12px_rgba(0,0,0,0.25)] text-[var(--text)]
+                    animate-[scale-in_0.3s_cubic-bezier(0.16,1,0.3,1)_both] transition-colors duration-300"
     >
       {children}
     </div>
diff --git a/client/src/components/CourseView/QuizzesTab.jsx b/client/src/components/CourseView/QuizzesTab.jsx
index b65b22e..a6ea18a 100644
--- a/client/src/components/CourseView/QuizzesTab.jsx
+++ b/client/src/components/CourseView/QuizzesTab.jsx
@@ -36,10 +36,7 @@ function QuizzesTab({ quizzes, isTeacher, onDelete, onAddClick }) {
       </div>
 
       {quizzes.length === 0 ? (
-        <div
-          className="text-center py-20 glass-heavy rounded-3xl border border-[var(--border)]/10
-                        shadow-[0_4px_24px_-8px_rgba(0,0,0,0.06)]"
-        >
+        <div className="text-center py-20 bg-[var(--surface)] rounded-2xl border border-[var(--border)]">
           <div
             className="w-16 h-16 rounded-3xl bg-pink-500/10 border border-pink-500/15 flex items-center justify-center text-3xl mx-auto mb-5
                           shadow-[0_8px_24px_-8px_rgba(236,72,153,0.15)]"
@@ -68,14 +65,11 @@ function QuizzesTab({ quizzes, isTeacher, onDelete, onAddClick }) {
           {quizzes.map((q, i) => (
             <div
               key={q.id}
-              className="group glass-heavy rounded-2xl border border-[var(--border)]/12 hover:border-[var(--accent)]/20
-                         overflow-hidden transition-all duration-400 animate-[slide-up_0.4s_cubic-bezier(0.16,1,0.3,1)_both]
-                         hover:shadow-[0_16px_48px_-12px_rgba(0,0,0,0.12)]"
+              className="group bg-[var(--surface)] rounded-2xl border border-[var(--border)] hover:border-[var(--accent)]/40
+                         overflow-hidden transition-all duration-300 animate-[slide-up_0.4s_cubic-bezier(0.16,1,0.3,1)_both]
+                         hover:shadow-[0_8px_24px_-8px_rgba(0,0,0,0.1)]"
               style={{ animationDelay: `${i * 60}ms` }}
             >
-              {/* Quiz accent bar */}
-              <div className="h-[2px] w-full bg-gradient-to-r from-pink-500 to-rose-500" />
-
               <div className="p-5 sm:p-6 flex items-start gap-4">
                 {/* Icon */}
                 <div
diff --git a/client/src/components/CourseView/StudentsTab.jsx b/client/src/components/CourseView/StudentsTab.jsx
index df954a1..c4469c0 100644
--- a/client/src/components/CourseView/StudentsTab.jsx
+++ b/client/src/components/CourseView/StudentsTab.jsx
@@ -31,10 +31,7 @@ function StudentsTab({ students }) {
       </div>
 
       {students.length === 0 ? (
-        <div
-          className="text-center py-20 glass-heavy rounded-3xl border border-[var(--border)]/10
-                        shadow-[0_4px_24px_-8px_rgba(0,0,0,0.06)]"
-        >
+        <div className="text-center py-20 bg-[var(--surface)] rounded-2xl border border-[var(--border)]">
           <div
             className="w-16 h-16 rounded-3xl bg-emerald-500/10 border border-emerald-500/15 flex items-center justify-center text-3xl mx-auto mb-5
                           shadow-[0_8px_24px_-8px_rgba(16,185,129,0.15)]"
@@ -56,9 +53,9 @@ function StudentsTab({ students }) {
               return (
                 <div
                   key={s.id}
-                  className="group glass-heavy rounded-2xl p-4.5 border border-[var(--border)]/10 hover:border-[var(--accent)]/15
-                             flex items-center gap-3.5 transition-all duration-400
-                             hover:shadow-[0_12px_36px_-8px_rgba(0,0,0,0.1)]
+                  className="group bg-[var(--surface)] rounded-xl p-4 border border-[var(--border)] hover:border-[var(--accent)]/40
+                             flex items-center gap-3.5 transition-all duration-300
+                             hover:shadow-[0_8px_24px_-8px_rgba(0,0,0,0.08)]
                              animate-[slide-up_0.4s_cubic-bezier(0.16,1,0.3,1)_both]"
                   style={{ animationDelay: `${i * 40}ms` }}
                 >
@@ -102,7 +99,7 @@ function StudentsTab({ students }) {
           </div>
 
           {/* Footer info */}
-          <div className="mt-5 px-5 py-3.5 glass rounded-2xl border border-[var(--border)]/8 flex items-center gap-2.5">
+          <div className="mt-5 px-4 py-3 bg-[var(--surface-elevated)] rounded-xl border border-[var(--border)] flex items-center gap-2.5">
             <span className="text-[12px] text-[var(--muted)] font-medium">
               💡 {students.length} student{students.length !== 1 ? "s" : ""}{" "}
               enrolled in this course
diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx
index df749f5..b111d82 100644
--- a/client/src/components/Navbar.jsx
+++ b/client/src/components/Navbar.jsx
@@ -24,11 +24,6 @@ const THEME_META = {
     icon: "🌙",
     color: "from-indigo-500 to-purple-600",
   },
-  [themeMap.custom]: {
-    label: "Cosmic",
-    icon: "✨",
-    color: "from-violet-500 to-fuchsia-500",
-  },
 };
 
 const AI_TABS = [
@@ -123,9 +118,7 @@ function Navbar({ showBack }) {
   };
 
   const cycleTheme = () => {
-    const i = themeKeys.indexOf(themeName);
-    const next = themeKeys[(i + 1) % themeKeys.length];
-    setThemeName(next);
+    setThemeName((prev) => (prev === "light" ? "dark" : "light"));
   };
 
   const handleLogout = () => {
@@ -277,12 +270,9 @@ function Navbar({ showBack }) {
 
       {/* Right Section */}
       <div className="flex items-center gap-1.5 sm:gap-2.5">
-        {/* Desktop theme switch */}
-        <div
-          className="hidden lg:flex items-center gap-0.5 p-1 rounded-xl border border-[var(--border)]/50
-                     glass shadow-[0_2px_8px_rgba(0,0,0,0.06)]"
-        >
-          {themeKeys.map((key) => {
+        {/* Desktop theme toggle: Light / Dark */}
+        <div className="hidden lg:flex items-center gap-0.5 p-1 rounded-xl border border-[var(--border)] bg-[var(--surface-elevated)]">
+          {Object.keys(themeMap).map((key) => {
             const active = themeName === key;
             return (
               <button
@@ -290,13 +280,13 @@ function Navbar({ showBack }) {
                 type="button"
                 onClick={() => setThemeName(key)}
                 title={THEME_META[key]?.label || key}
-                className={`px-2.5 py-1.5 rounded-lg text-xs font-semibold transition-all duration-300 ${
+                className={`px-3 py-1.5 rounded-lg text-xs font-semibold transition-all duration-200 flex items-center gap-1.5 ${
                   active
-                    ? "bg-[var(--accent)] text-[var(--accent-contrast)] shadow-[0_4px_16px_-4px_var(--accent)] scale-105"
-                    : "text-[var(--muted)] hover:text-[var(--text)] hover:bg-[var(--accent)]/8"
+                    ? "bg-[var(--accent)] text-[var(--accent-contrast)] shadow-[0_4px_12px_-4px_var(--accent)]"
+                    : "text-[var(--muted)] hover:text-[var(--text)] hover:bg-[var(--surface)]"
                 } active:scale-95`}
               >
-                <span className="mr-1">{THEME_META[key]?.icon || "🎨"}</span>
+                <span>{THEME_META[key]?.icon || "🎨"}</span>
                 <span className="hidden xl:inline">
                   {THEME_META[key]?.label || key}
                 </span>
@@ -305,18 +295,18 @@ function Navbar({ showBack }) {
           })}
         </div>
 
-        {/* Mobile theme switch */}
+        {/* Mobile: icon-only toggle */}
         <button
           type="button"
           onClick={cycleTheme}
-          className="lg:hidden h-9 w-9 rounded-xl border border-[var(--border)]/50
-                     glass text-sm cursor-pointer hover:bg-[var(--accent)]/12 
-                     transition-all duration-300 active:scale-90 flex items-center justify-center
-                     hover:border-[var(--accent)]/40 hover:shadow-[0_4px_16px_-4px_var(--accent)]"
-          title="Change theme"
-          aria-label="Change theme"
+          className="lg:hidden h-9 w-9 rounded-xl border border-[var(--border)] bg-[var(--surface-elevated)]
+                     text-sm cursor-pointer hover:bg-[var(--accent)]/12
+                     transition-all duration-200 active:scale-90 flex items-center justify-center
+                     hover:border-[var(--accent)]/40"
+          title={`Switch to ${themeName === "light" ? "dark" : "light"} mode`}
+          aria-label="Toggle theme"
         >
-          {THEME_META[themeName]?.icon || "🎨"}
+          {themeName === "dark" ? "☀️" : "🌙"}
         </button>
 
         {/* AUTHENTICATED USER SECTION */}
diff --git a/client/src/context/ThemeContext.jsx b/client/src/context/ThemeContext.jsx
index 698a958..c41ec5b 100644
--- a/client/src/context/ThemeContext.jsx
+++ b/client/src/context/ThemeContext.jsx
@@ -3,7 +3,6 @@ import { createContext, useContext } from "react";
 export const themes = {
   light: "light",
   dark: "dark",
-  custom: "custom",
 };
 
 export const ThemeContext = createContext({
diff --git a/client/src/index.css b/client/src/index.css
index 0743771..6e2cf57 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -501,45 +501,50 @@ body {
 }
 
 /* ═══════════════════════════════════════════════════
-   ANIMATED BACKGROUND ORBS
+   LIGHT THEME (default)
    ═══════════════════════════════════════════════════ */
 
-.bg-orb {
-  position: absolute;
-  border-radius: 50%;
-  filter: blur(100px);
-  pointer-events: none;
-  animation:
-    morph 15s ease-in-out infinite,
-    glow 4s ease-in-out infinite;
-}
-
-.bg-orb-1 {
-  width: 500px;
-  height: 500px;
-  background: color-mix(in srgb, var(--accent) 18%, transparent);
-  top: -10%;
-  right: -5%;
-  animation-delay: 0s;
-}
-
-.bg-orb-2 {
-  width: 600px;
-  height: 600px;
-  background: color-mix(in srgb, #8b5cf6 12%, transparent);
-  bottom: -15%;
-  left: -10%;
-  animation-delay: -5s;
-}
-
-.bg-orb-3 {
-  width: 400px;
-  height: 400px;
-  background: color-mix(in srgb, #ec4899 10%, transparent);
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  animation-delay: -10s;
+:root,
+.light {
+  --bg: #f1f5f9;
+  --surface: #ffffff;
+  --surface-elevated: #ffffff;
+  --surface-hover: #f8fafc;
+  --text: #0f172a;
+  --text-secondary: #334155;
+  --muted: #64748b;
+  --accent: #4f46e5;
+  --accent-light: #6366f1;
+  --accent-contrast: #ffffff;
+  --border: #e2e8f0;
+  --border-light: #f1f5f9;
+  --success: #16a34a;
+  --warning: #d97706;
+  --danger: #dc2626;
+  --info: #0284c7;
+}
+
+/* ═══════════════════════════════════════════════════
+   DARK THEME
+   ═══════════════════════════════════════════════════ */
+
+.dark {
+  --bg: #0f172a;
+  --surface: #1e293b;
+  --surface-elevated: #273549;
+  --surface-hover: #253044;
+  --text: #f1f5f9;
+  --text-secondary: #cbd5e1;
+  --muted: #94a3b8;
+  --accent: #818cf8;
+  --accent-light: #a5b4fc;
+  --accent-contrast: #0f172a;
+  --border: #334155;
+  --border-light: #293547;
+  --success: #22c55e;
+  --warning: #f59e0b;
+  --danger: #f87171;
+  --info: #38bdf8;
 }
 
 /* ═══════════════════════════════════════════════════
diff --git a/client/src/pages/CourseView.jsx b/client/src/pages/CourseView.jsx
index 10b9d25..9524089 100644
--- a/client/src/pages/CourseView.jsx
+++ b/client/src/pages/CourseView.jsx
@@ -583,7 +583,7 @@ function CourseView() {
   };
 
   return (
-    <div className="min-h-screen bg-[radial-gradient(circle_at_top,_#0f172a,_#020617)] text-white flex flex-col relative overflow-hidden">
+    <div className="min-h-screen bg-[var(--bg)] text-[var(--text)] flex flex-col transition-colors duration-300">
       <Navbar showBack />
 
       <div className="flex-1 w-full max-w-7xl mx-auto px-4 sm:px-6 py-6">
@@ -607,13 +607,13 @@ function CourseView() {
             style={{ top: "1rem" }}
           >
             {/* Sidebar nav card */}
-            <div className="glass-dark rounded-2xl overflow-hidden border border-white/5 shadow-2xl glow">
+            <div className="rounded-2xl overflow-hidden border border-[var(--border)] bg-[var(--surface)] shadow-lg">
               {/* Sidebar header */}
-              <div className="px-4 py-4 border-b border-white/5 bg-gradient-to-r from-[#7CFF4F]/10 to-transparent">
-                <p className="text-[10px] font-bold uppercase tracking-widest text-gray-400">
+              <div className="px-4 py-4 border-b border-[var(--border)] bg-gradient-to-r from-[var(--accent)]/8 to-transparent">
+                <p className="text-[10px] font-bold uppercase tracking-widest text-[var(--muted)]">
                   Course Content
                 </p>
-                <p className="text-sm font-semibold text-white truncate">
+                <p className="text-sm font-semibold text-[var(--text)] truncate">
                   {course.title}
                 </p>
               </div>
@@ -628,34 +628,25 @@ function CourseView() {
                       key={t}
                       onClick={() => navigate(`/course/${id}/${t}`)}
                       className={`group w-full flex items-center gap-3 px-3 py-3 rounded-xl
-text-sm font-semibold transition-all duration-300 cursor-pointer mb-1 relative overflow-hidden
+text-sm font-semibold transition-all duration-200 cursor-pointer mb-1 relative overflow-hidden border-none
 ${
   isActive
-    ? "text-[#7CFF4F] bg-[#7CFF4F]/10 glow"
-    : "text-gray-400 hover:text-white hover:bg-white/5"
+    ? "bg-[var(--accent)]/12 text-[var(--accent)]"
+    : "text-[var(--muted)] hover:text-[var(--text)] hover:bg-[var(--surface-elevated)]"
 }`}
                       style={
                         isActive
-                          ? {
-                              background:
-                                "linear-gradient(90deg, var(--accent)/12%, var(--accent)/4%)",
-                              boxShadow: "inset 3px 0 0 var(--accent)",
-                            }
+                          ? { boxShadow: "inset 3px 0 0 var(--accent)" }
                           : {}
                       }
                     >
-                      {/* Hover bg */}
-                      {!isActive && (
-                        <span className="absolute inset-0 rounded-xl bg-[var(--border)]/0 group-hover:bg-[var(--border)]/12 transition-all duration-200" />
-                      )}
-
                       {/* Icon */}
                       <span
                         className={`w-9 h-9 rounded-xl flex items-center justify-center text-lg transition-all
   ${
     isActive
-      ? "bg-[#7CFF4F]/20 text-[#7CFF4F]"
-      : "bg-white/5 group-hover:bg-white/10"
+      ? "bg-[var(--accent)]/20"
+      : "bg-[var(--surface-elevated)] group-hover:bg-[var(--border)]"
   }`}
                       >
                         {meta.icon}
@@ -672,7 +663,7 @@ ${
                                         ${
                                           isActive
                                             ? "bg-[var(--accent)]/20 text-[var(--accent)]"
-                                            : "bg-[var(--border)]/20 text-[var(--muted)] group-hover:bg-[var(--border)]/30"
+                                            : "bg-[var(--border)] text-[var(--muted)]"
                                         }`}
                       >
                         {tabCount[t]}
@@ -684,7 +675,7 @@ ${
 
               {/* Progress strip for students */}
               {!isTeacher && materials.length > 0 && (
-                <div className="px-4 py-3 border-t border-[var(--border)]/15">
+                <div className="px-4 py-3 border-t border-[var(--border)]">
                   <div className="flex justify-between items-center mb-1.5">
                     <span className="text-[10px] font-bold text-[var(--muted)] uppercase tracking-wider">
                       Progress
@@ -693,13 +684,13 @@ ${
                       {matProgress}%
                     </span>
                   </div>
-                  <div className="h-2 bg-white/10 rounded-full overflow-hidden">
+                  <div className="h-2 bg-[var(--border)] rounded-full overflow-hidden">
                     <div
-                      className="h-full bg-gradient-to-r from-[#7CFF4F] to-lime-400 rounded-full transition-all duration-700 shadow-[0_0_10px_#7CFF4F]"
+                      className="h-full bg-gradient-to-r from-emerald-500 to-teal-400 rounded-full transition-all duration-700"
                       style={{ width: `${matProgress}%` }}
                     />
                   </div>
-                  <p className="text-[10px] text-[var(--muted)]/70 mt-1.5 font-medium">
+                  <p className="text-[10px] text-[var(--muted)] mt-1.5 font-medium">
                     {completedMats.size}/{materials.length} materials done
                   </p>
                 </div>
@@ -707,7 +698,7 @@ ${
 
               {/* Quick stats for teacher */}
               {isTeacher && (
-                <div className="px-4 py-2 rounded-xl bg-[#7CFF4F] text-black font-semibold glow-hover transition-all duration-300">
+                <div className="px-4 pb-4">
                   <p className="text-[10px] font-bold text-[var(--muted)] uppercase tracking-wider mb-2">
                     Overview
                   </p>
@@ -716,27 +707,27 @@ ${
                       {
                         label: "Students",
                         val: course.enrollmentCount || 0,
-                        color: "text-emerald-400",
+                        color: "text-emerald-500",
                       },
                       {
                         label: "Materials",
                         val: materials.length,
-                        color: "text-emerald-400",
+                        color: "text-blue-500",
                       },
                       {
                         label: "Quizzes",
                         val: quizzes.length,
-                        color: "text-pink-400",
+                        color: "text-pink-500",
                       },
                       {
                         label: "Live",
                         val: liveClasses.length,
-                        color: "text-red-400",
+                        color: "text-red-500",
                       },
                     ].map((s) => (
                       <div
                         key={s.label}
-                        className="glass-dark rounded-2xl p-6 border border-white/10 shadow-2xl glow"
+                        className="rounded-xl p-3 border border-[var(--border)] bg-[var(--surface-elevated)]"
                       >
                         <p className={`text-sm font-black ${s.color}`}>
                           {s.val}
@@ -784,7 +775,7 @@ ${
             </div>
 
             {/* Tab content */}
-            <div className="glass-dark rounded-2xl p-5 border border-white/5 shadow-xl glow animate-fade-in">
+            <div className="rounded-2xl p-5 border border-[var(--border)] bg-[var(--surface)] shadow-sm animate-fade-in transition-colors duration-300">
               <div className="animate-[fade-in_0.3s_ease_both]" key={tab}>
                 {tab === "materials" && (
                   <MaterialsTab
diff --git a/client/src/pages/Mainpage.jsx b/client/src/pages/Mainpage.jsx
index 008deda..c0558cf 100644
--- a/client/src/pages/Mainpage.jsx
+++ b/client/src/pages/Mainpage.jsx
@@ -212,8 +212,8 @@ export default function LearningHero() {
           </div>
         </section>
 
-        {/* ── FEATURES BAR ── */}
-        <section className="bg-slate-900 dark:bg-slate-950">
+        {/* —— FEATURES BAR —— */}
+        <section className="bg-[var(--surface-elevated)] border-y border-[var(--border)] transition-colors duration-300">
           <div className="flex flex-col sm:flex-row sm:flex-wrap">
             {features.map((f, i) => (
               <div
@@ -222,22 +222,22 @@ export default function LearningHero() {
                   flex items-start gap-4 px-6 py-8 sm:flex-1 sm:min-w-[180px]
                   ${
                     i < features.length - 1
-                      ? "border-b border-white/10 sm:border-b-0 sm:border-r sm:border-white/15"
+                      ? "border-b border-[var(--border)] sm:border-b-0 sm:border-r sm:border-[var(--border)]"
                       : ""
                   }
                 `}
               >
                 {/* Feature icon */}
-                <div className="text-amber-400 dark:text-yellow-400 shrink-0 mt-0.5">
+                <div className="text-[var(--accent)] shrink-0 mt-0.5">
                   {f.icon}
                 </div>
 
                 {/* Feature text */}
                 <div>
-                  <p className="text-white text-sm font-bold leading-snug mb-1.5">
+                  <p className="text-[var(--text)] text-sm font-bold leading-snug mb-1.5">
                     {f.title}
                   </p>
-                  <p className="text-white/50 text-xs leading-relaxed">
+                  <p className="text-[var(--muted)] text-xs leading-relaxed">
                     {f.desc}
                   </p>
                 </div>
diff --git a/client/src/pages/TechArchitecture.jsx b/client/src/pages/TechArchitecture.jsx
index 3c3b17b..98f336a 100644
--- a/client/src/pages/TechArchitecture.jsx
+++ b/client/src/pages/TechArchitecture.jsx
@@ -1,348 +1,315 @@
+import { useContext } from "react";
 import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
+import { ThemeContext } from "../context/ThemeContext";
 
-const ARCH_LAYERS = [
+/* ─────────────────────────────────────────────────────────
+   DATA
+───────────────────────────────────────────────────────── */
+
+const AI_TOOLS = [
+  "generateQuiz",
+  "summarizeMaterial",
+  "explainConcept",
+  "gradeAndFeedback",
+  "createStudySchedule",
+  "analyzePerformance",
+  "generateCourseOutline",
+];
+
+const FLOW_STEPS = [
+  {
+    num: "Step 1 — Client Request",
+    title: "React SPA sends HTTP/WS request",
+    desc: "Browser makes REST call (axios/fetch) with httpOnly cookie or sends Socket.IO event. Google OAuth sends ID token for social login.",
+  },
+  {
+    num: "Step 2 — Middleware Pipeline",
+    title: "CORS → Body Parser → Cookie Parser → JWT Auth",
+    desc: "Request passes through Express middleware chain. CORS validates origin, body is parsed to JSON, cookie is extracted, JWT is verified and user is attached to req.user.",
+  },
+  {
+    num: "Step 3 — Route Matching",
+    title: "Express Router dispatches to Controller",
+    desc: "Matched route (e.g., POST /api/courses/:courseId/quizzes) calls the corresponding controller function. Nested routes use mergeParams for :courseId inheritance.",
+  },
+  {
+    num: "Step 4 — AI Processing (if /api/ai/*)",
+    title: "Agent Loop or Direct LLM Call",
+    desc: "For AI routes: either a direct llm.js function call (quiz, summarize, explain) or the agentic loop in agent.js where Claude autonomously selects and chains tools across multiple iterations.",
+  },
+  {
+    num: "Step 5 — Database Operations",
+    title: "Mongoose Models → MongoDB Atlas",
+    desc: "Controller performs CRUD via Mongoose models. Relationships maintained through ObjectId refs. Unique compound indexes prevent duplicate enrollments, submissions, and quiz results.",
+  },
+  {
+    num: "Step 6 — Real-time Broadcast",
+    title: "Socket.IO emits to rooms & users",
+    desc: "After DB mutation, socketService.js emits events to relevant Socket.IO rooms: course:{id} for all course members, user:{id} for personal notifications, liveclass:{id} for live class participants.",
+  },
+  {
+    num: "Step 7 — Response",
+    title: "JSON response sent to client",
+    desc: "Formatted response object returned. Auth routes set httpOnly secure cookies. File uploads return Cloudinary URLs. Error responses include descriptive error messages with appropriate HTTP status codes.",
+  },
+];
+
+const STEP_COLORS = [
+  "#5b9cf6",
+  "#a78bfa",
+  "#34d399",
+  "#fbbf24",
+  "#22d3ee",
+  "#f472b6",
+  "#5b9cf6",
+];
+
+const SOCKET_EVENTS = [
+  {
+    name: "join-course / leave-course",
+    desc: "Student joins/leaves course room for live updates",
+  },
+  {
+    name: "broadcaster / viewer",
+    desc: "WebRTC signaling: teacher broadcasts, students view",
+  },
+  {
+    name: "offer / answer / ice-candidate",
+    desc: "WebRTC peer connection negotiation",
+  },
+  {
+    name: "new-comment / new-reply",
+    desc: "Live class chat with threaded replies",
+  },
+  {
+    name: "raise-hand / lower-hand",
+    desc: "Student participation in live class",
+  },
+  { name: "send-reaction", desc: "Emoji reactions during live class" },
+  {
+    name: "assignment:new / quiz:new",
+    desc: "Real-time content creation notifications",
+  },
+  { name: "material:progress", desc: "Live progress % update to student" },
   {
-    cls: "client",
+    name: "recording-available",
+    desc: "Notify students when recording is uploaded",
+  },
+  { name: "live-class-status", desc: "Broadcast: scheduled → live → ended" },
+  {
+    name: "screen-share-started/stopped",
+    desc: "Teacher screen sharing state",
+  },
+  { name: "class-ended", desc: "Notify all participants class has ended" },
+];
+
+/* ─────────────────────────────────────────────────────────
+   ARCH LAYERS (data)
+───────────────────────────────────────────────────────── */
+const LAYERS = [
+  {
+    id: "client",
     label: "① Client Layer",
+    accent: "#5b9cf6",
     nodes: [
-      { text: "React SPA", sub: "Vite · CORS: localhost:5173", color: "blue" },
+      {
+        text: "React SPA",
+        sub: "Vite · CORS: localhost:5173",
+        color: "#5b9cf6",
+      },
       {
         text: "Socket.IO Client",
         sub: "Real-time events & WebRTC",
-        color: "blue",
+        color: "#5b9cf6",
       },
       {
         text: "Google OAuth UI",
         sub: "ID Token / Access Token flow",
-        color: "blue",
+        color: "#5b9cf6",
       },
     ],
   },
   {
-    cls: "middleware",
+    id: "middleware",
     label: "② Middleware Layer — Express 5",
+    accent: "#a78bfa",
+    arrow: "HTTP REST + WebSocket",
     nodes: [
-      { text: "CORS", sub: "Origin whitelist", color: "purple" },
-      { text: "Body Parser", sub: "express.json()", color: "purple" },
-      { text: "Cookie Parser", sub: "httpOnly cookies", color: "purple" },
-      { text: "JWT Auth", sub: "requireAuth middleware", color: "purple" },
-      { text: "Multer", sub: "Memory + Disk storage", color: "purple" },
-      { text: "Socket.IO", sub: "WebRTC signaling server", color: "purple" },
-      { text: "Static Files", sub: "/uploads directory", color: "purple" },
+      { text: "CORS", sub: "Origin whitelist", color: "#a78bfa" },
+      { text: "Body Parser", sub: "express.json()", color: "#a78bfa" },
+      { text: "Cookie Parser", sub: "httpOnly cookies", color: "#a78bfa" },
+      { text: "JWT Auth", sub: "requireAuth middleware", color: "#a78bfa" },
+      { text: "Multer", sub: "Memory + Disk storage", color: "#a78bfa" },
+      { text: "Socket.IO", sub: "WebRTC signaling server", color: "#a78bfa" },
+      { text: "Static Files", sub: "/uploads directory", color: "#a78bfa" },
     ],
   },
   {
-    cls: "routes",
+    id: "routes",
     label: "③ Routes & Controllers",
+    accent: "#34d399",
+    arrow: "Route matching → Controller",
     nodes: [
       {
         text: "/api/auth",
         sub: "Register · OTP · Login · Google · Logout",
-        color: "green",
+        color: "#34d399",
       },
       {
         text: "/api/courses",
         sub: "CRUD · Enroll · Unenroll · Students",
-        color: "green",
+        color: "#34d399",
       },
       {
         text: "/api/assignments",
         sub: "CRUD · Submit · Grade",
-        color: "green",
+        color: "#34d399",
+      },
+      {
+        text: "/api/quizzes",
+        sub: "CRUD · Submit · Results",
+        color: "#34d399",
       },
-      { text: "/api/quizzes", sub: "CRUD · Submit · Results", color: "green" },
       {
         text: "/api/live-classes",
         sub: "Schedule · Join · Comments · Q&A · Recording",
-        color: "green",
+        color: "#34d399",
       },
       {
         text: "/api/enrollments",
         sub: "Enroll · Unenroll · Progress tracking",
-        color: "green",
+        color: "#34d399",
       },
       {
         text: "/api/notifications",
         sub: "List · Mark all read",
-        color: "green",
+        color: "#34d399",
       },
       {
         text: "/api/dashboard",
         sub: "Teacher & Student dashboards",
-        color: "green",
+        color: "#34d399",
       },
       {
         text: "/api/ai/*",
         sub: "Chat · Quiz · Summarize · Agent · Feedback",
-        color: "amber",
+        color: "#fbbf24",
       },
     ],
   },
   {
-    cls: "data",
+    id: "data",
     label: "⑤ Data Layer — MongoDB + Mongoose",
+    accent: "#22d3ee",
+    arrow: "Mongoose queries",
     nodes: [
       {
         text: "User",
         sub: "name · email · password · role · googleId",
-        color: "teal",
+        color: "#22d3ee",
       },
       {
         text: "Course",
         sub: "title · teacher · enrolledStudents[]",
-        color: "teal",
+        color: "#22d3ee",
       },
       {
         text: "Assignment",
         sub: "title · dueDate · maxScore · course",
-        color: "teal",
+        color: "#22d3ee",
       },
       {
         text: "Submission",
         sub: "content · score · feedback · status",
-        color: "teal",
+        color: "#22d3ee",
       },
       {
         text: "Quiz",
         sub: "questions[] · timeLimit · isActive",
-        color: "teal",
+        color: "#22d3ee",
       },
       {
         text: "QuizResult",
         sub: "answers[] · score · totalPoints",
-        color: "teal",
+        color: "#22d3ee",
       },
       {
         text: "LiveClass",
         sub: "type: meetLink|platform · status · attendees",
-        color: "teal",
+        color: "#22d3ee",
       },
       {
         text: "Material",
         sub: "fileUrl · cloudinaryPublicId · order",
-        color: "teal",
+        color: "#22d3ee",
       },
       {
         text: "Enrollment",
         sub: "progress · status · completedAt",
-        color: "teal",
+        color: "#22d3ee",
       },
-      { text: "Notification", sub: "message · type · read", color: "teal" },
+      { text: "Notification", sub: "message · type · read", color: "#22d3ee" },
       {
         text: "AIStudyPlan",
         sub: "student · content · courses[]",
-        color: "teal",
+        color: "#22d3ee",
       },
       {
         text: "AICourseOutline",
         sub: "teacher · content · subject",
-        color: "teal",
+        color: "#22d3ee",
       },
     ],
   },
   {
-    cls: "external",
+    id: "external",
     label: "⑥ External Services",
+    accent: "#f472b6",
+    arrow: "External API calls",
     nodes: [
       {
         text: "MongoDB Atlas",
         sub: "Cloud database · retryWrites",
-        color: "pink",
+        color: "#f472b6",
       },
       {
         text: "Anthropic API",
         sub: "Claude claude-sonnet-4-6 · Tool use",
-        color: "pink",
+        color: "#f472b6",
+      },
+      {
+        text: "Cloudinary",
+        sub: "Video · Image · PDF uploads",
+        color: "#f472b6",
       },
-      { text: "Cloudinary", sub: "Video · Image · PDF uploads", color: "pink" },
       {
         text: "Gmail SMTP",
         sub: "OTP emails · Course notifications",
-        color: "pink",
+        color: "#f472b6",
       },
-      { text: "Google OAuth", sub: "ID token verification", color: "pink" },
+      { text: "Google OAuth", sub: "ID token verification", color: "#f472b6" },
     ],
   },
 ];
 
-const AI_TOOLS = [
-  "generateQuiz",
-  "summarizeMaterial",
-  "explainConcept",
-  "gradeAndFeedback",
-  "createStudySchedule",
-  "analyzePerformance",
-  "generateCourseOutline",
-];
-
-const FLOW_STEPS = [
-  {
-    num: "Step 1 — Client Request",
-    title: "React SPA sends HTTP/WS request",
-    desc: "Browser makes REST call (axios/fetch) with httpOnly cookie or sends Socket.IO event. Google OAuth sends ID token for social login.",
-  },
-  {
-    num: "Step 2 — Middleware Pipeline",
-    title: "CORS → Body Parser → Cookie Parser → JWT Auth",
-    desc: "Request passes through Express middleware chain. CORS validates origin, body is parsed to JSON, cookie is extracted, JWT is verified and user is attached to req.user.",
-  },
-  {
-    num: "Step 3 — Route Matching",
-    title: "Express Router dispatches to Controller",
-    desc: "Matched route (e.g., POST /api/courses/:courseId/quizzes) calls the corresponding controller function. Nested routes use mergeParams for :courseId inheritance.",
-  },
-  {
-    num: "Step 4 — AI Processing (if /api/ai/*)",
-    title: "Agent Loop or Direct LLM Call",
-    desc: "For AI routes: either a direct llm.js function call (quiz, summarize, explain) or the agentic loop in agent.js where Claude autonomously selects and chains tools across multiple iterations.",
-  },
-  {
-    num: "Step 5 — Database Operations",
-    title: "Mongoose Models → MongoDB Atlas",
-    desc: "Controller performs CRUD via Mongoose models. Relationships maintained through ObjectId refs. Unique compound indexes prevent duplicate enrollments, submissions, and quiz results.",
-  },
-  {
-    num: "Step 6 — Real-time Broadcast",
-    title: "Socket.IO emits to rooms & users",
-    desc: "After DB mutation, socketService.js emits events to relevant Socket.IO rooms: course:{id} for all course members, user:{id} for personal notifications, liveclass:{id} for live class participants.",
-  },
-  {
-    num: "Step 7 — Response",
-    title: "JSON response sent to client",
-    desc: "Formatted response object returned. Auth routes set httpOnly secure cookies. File uploads return Cloudinary URLs. Error responses include descriptive error messages with appropriate HTTP status codes.",
-  },
-];
-
-const SOCKET_EVENTS = [
-  {
-    name: "join-course / leave-course",
-    desc: "Student joins/leaves course room for live updates",
-  },
-  {
-    name: "broadcaster / viewer",
-    desc: "WebRTC signaling: teacher broadcasts, students view",
-  },
-  {
-    name: "offer / answer / ice-candidate",
-    desc: "WebRTC peer connection negotiation",
-  },
-  {
-    name: "new-comment / new-reply",
-    desc: "Live class chat with threaded replies",
-  },
-  {
-    name: "raise-hand / lower-hand",
-    desc: "Student participation in live class",
-  },
-  { name: "send-reaction", desc: "Emoji reactions during live class" },
-  {
-    name: "assignment:new / quiz:new",
-    desc: "Real-time content creation notifications",
-  },
-  { name: "material:progress", desc: "Live progress % update to student" },
-  {
-    name: "recording-available",
-    desc: "Notify students when recording is uploaded",
-  },
-  { name: "live-class-status", desc: "Broadcast: scheduled → live → ended" },
-  {
-    name: "screen-share-started/stopped",
-    desc: "Teacher screen sharing state",
-  },
-  { name: "class-ended", desc: "Notify all participants class has ended" },
-];
-
-const LAYER_COLORS = {
-  client: {
-    border: "rgba(91,156,246,0.3)",
-    bg: "rgba(91,156,246,0.06)",
-    tag: "#5b9cf6",
-  },
-  middleware: {
-    border: "rgba(167,139,250,0.3)",
-    bg: "rgba(167,139,250,0.06)",
-    tag: "#a78bfa",
-  },
-  routes: {
-    border: "rgba(52,211,153,0.3)",
-    bg: "rgba(52,211,153,0.06)",
-    tag: "#34d399",
-  },
-  ai: {
-    border: "rgba(251,191,36,0.3)",
-    bg: "rgba(251,191,36,0.06)",
-    tag: "#fbbf24",
-  },
-  data: {
-    border: "rgba(34,211,238,0.3)",
-    bg: "rgba(34,211,238,0.06)",
-    tag: "#22d3ee",
-  },
-  external: {
-    border: "rgba(244,114,182,0.3)",
-    bg: "rgba(244,114,182,0.06)",
-    tag: "#f472b6",
-  },
-};
-
-const NODE_COLORS = {
-  blue: "#5b9cf6",
-  purple: "#a78bfa",
-  green: "#34d399",
-  amber: "#fbbf24",
-  teal: "#22d3ee",
-  pink: "#f472b6",
-  red: "#f87171",
-};
-
-const STEP_COLORS = [
-  "#5b9cf6",
-  "#a78bfa",
-  "#34d399",
-  "#fbbf24",
-  "#22d3ee",
-  "#f472b6",
-  "#5b9cf6",
-];
+/* ─────────────────────────────────────────────────────────
+   COMPONENTS
+───────────────────────────────────────────────────────── */
 
 function FlowArrow({ label }) {
   return (
-    <div
-      style={{
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        height: 36,
-        position: "relative",
-      }}
-    >
-      <div
-        style={{
-          width: 2,
-          height: "100%",
-          background: "linear-gradient(to bottom, #2a2f4a, #8b90b0)",
-        }}
-      />
-      <span
-        style={{
-          position: "absolute",
-          bottom: -2,
-          fontSize: 10,
-          color: "#8b90b0",
-        }}
-      >
+    <div className="flex justify-center items-center h-9 relative my-1">
+      <div className="w-px h-full bg-[var(--border)]" />
+      <span className="absolute bottom-0 text-[var(--muted)] text-[10px]">
         ▼
       </span>
       {label && (
         <span
+          className="absolute right-[calc(50%+14px)] text-[var(--muted)] whitespace-nowrap"
           style={{
-            position: "absolute",
-            right: "calc(50% + 14px)",
-            fontFamily: "'JetBrains Mono', monospace",
             fontSize: "0.6rem",
-            color: "#8b90b0",
-            whiteSpace: "nowrap",
+            fontFamily: "'JetBrains Mono', monospace",
           }}
         >
           {label}
@@ -355,38 +322,26 @@ function FlowArrow({ label }) {
 function Node({ text, sub, color }) {
   return (
     <div
+      className="rounded-xl px-4 py-2.5 text-sm font-semibold transition-all duration-200 cursor-default hover:-translate-y-0.5"
       style={{
-        background: "#1c2038",
-        border: "1px solid #2a2f4a",
-        borderLeft: `3px solid ${NODE_COLORS[color] || "#8b90b0"}`,
-        borderRadius: 10,
-        padding: "10px 16px",
-        fontSize: "0.82rem",
-        fontWeight: 600,
-        color: "#e2e4f0",
-        cursor: "default",
-        transition: "all 0.2s",
+        background: "var(--surface)",
+        border: "1px solid var(--border)",
+        borderLeft: `3px solid ${color}`,
+        color: "var(--text)",
       }}
       onMouseEnter={(e) => {
-        e.currentTarget.style.transform = "translateY(-2px)";
-        e.currentTarget.style.borderColor = NODE_COLORS[color];
+        e.currentTarget.style.borderColor = color;
       }}
       onMouseLeave={(e) => {
-        e.currentTarget.style.transform = "";
-        e.currentTarget.style.borderColor = "#2a2f4a";
-        e.currentTarget.style.borderLeftColor = NODE_COLORS[color];
+        e.currentTarget.style.borderColor = "var(--border)";
+        e.currentTarget.style.borderLeftColor = color;
       }}
     >
-      {text}
+      <span>{text}</span>
       {sub && (
         <span
-          style={{
-            display: "block",
-            fontWeight: 300,
-            fontSize: "0.7rem",
-            color: "#8b90b0",
-            marginTop: 2,
-          }}
+          className="block text-[var(--muted)] mt-0.5"
+          style={{ fontWeight: 300, fontSize: "0.7rem" }}
         >
           {sub}
         </span>
@@ -395,299 +350,150 @@ function Node({ text, sub, color }) {
   );
 }
 
-function ArchLayer({ cls, label, children }) {
-  const c = LAYER_COLORS[cls] || LAYER_COLORS.client;
+function ArchLayer({ label, accent, children }) {
   return (
     <div
+      className="relative rounded-2xl p-5 transition-all duration-300"
       style={{
-        border: `1px solid ${c.border}`,
-        borderRadius: 16,
-        padding: 20,
-        background: c.bg,
-        position: "relative",
-        animation: "fadeUp 0.6s ease both",
+        border: `1px solid ${accent}33`,
+        background: `${accent}0d`,
       }}
     >
       <div
+        className="absolute -top-[11px] left-5 px-3 text-[10px] font-bold uppercase tracking-widest"
         style={{
-          position: "absolute",
-          top: -11,
-          left: 20,
-          background: "#0c0f1a",
-          padding: "0 12px",
+          background: "var(--bg)",
+          color: accent,
           fontFamily: "'JetBrains Mono', monospace",
-          fontSize: "0.7rem",
-          fontWeight: 600,
           letterSpacing: "1.5px",
-          textTransform: "uppercase",
-          color: c.tag,
         }}
       >
         {label}
       </div>
-      <div style={{ display: "flex", flexWrap: "wrap", gap: 10, marginTop: 4 }}>
-        {children}
-      </div>
+      <div className="flex flex-wrap gap-2.5 mt-1">{children}</div>
     </div>
   );
 }
 
+/* ─────────────────────────────────────────────────────────
+   PAGE
+───────────────────────────────────────────────────────── */
+
 function TechArchitecture() {
+  const { themeName } = useContext(ThemeContext);
+
   return (
-    <div
-      style={{
-        background: "#0c0f1a",
-        color: "#e2e4f0",
-        minHeight: "100vh",
-        display: "flex",
-        flexDirection: "column",
-      }}
-    >
+    <div className="min-h-screen bg-[var(--bg)] text-[var(--text)] flex flex-col transition-colors duration-300">
       <style>{`
         @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Outfit:wght@300;400;600;700;800&display=swap');
-        .ta-root * { box-sizing: border-box; }
         @keyframes fadeUp {
           from { opacity: 0; transform: translateY(20px); }
           to   { opacity: 1; transform: translateY(0); }
         }
+        .ta-fadein { animation: fadeUp 0.5s ease both; }
       `}</style>
 
       <Navbar />
 
-      <main
-        className="ta-root"
-        style={{
-          flex: 1,
-          fontFamily: "'Outfit', sans-serif",
-          padding: "40px 24px 60px",
-        }}
-      >
-        <div style={{ maxWidth: 1200, margin: "0 auto" }}>
-          {/* Header */}
-          <div style={{ textAlign: "center", marginBottom: 48 }}>
+      <main className="flex-1 px-6 pb-16 pt-10 font-[Outfit,sans-serif]">
+        <div className="max-w-5xl mx-auto">
+          {/* ── Header ── */}
+          <div className="text-center mb-12 ta-fadein">
             <span
+              className="block text-xs font-bold uppercase tracking-[2px] mb-3"
               style={{
+                color: "var(--accent)",
                 fontFamily: "'JetBrains Mono', monospace",
-                fontSize: "0.75rem",
-                color: "#a78bfa",
-                letterSpacing: "2px",
-                textTransform: "uppercase",
-                marginBottom: 12,
-                display: "block",
               }}
             >
               Technical Architecture &amp; Backend Flow
             </span>
-            <h1
-              style={{
-                fontSize: "2.4rem",
-                fontWeight: 800,
-                letterSpacing: -1,
-                background:
-                  "linear-gradient(135deg, #5b9cf6, #a78bfa, #f472b6)",
-                WebkitBackgroundClip: "text",
-                WebkitTextFillColor: "transparent",
-                backgroundClip: "text",
-                marginBottom: 8,
-              }}
-            >
+            <h1 className="text-4xl sm:text-5xl font-extrabold tracking-tight mb-3 gradient-text">
               SmartClass LMS Backend
             </h1>
-            <p
-              style={{ color: "#8b90b0", fontSize: "1.05rem", fontWeight: 300 }}
-            >
+            <p className="text-[var(--text-secondary)] text-lg font-light">
               Express 5 · MongoDB · Socket.IO · Claude AI · Cloudinary
             </p>
           </div>
 
-          {/* Architecture Layers */}
-          <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
-            <ArchLayer cls="client" label="① Client Layer">
-              <Node
-                text="React SPA"
-                sub="Vite · CORS: localhost:5173"
-                color="blue"
-              />
-              <Node
-                text="Socket.IO Client"
-                sub="Real-time events & WebRTC"
-                color="blue"
-              />
-              <Node
-                text="Google OAuth UI"
-                sub="ID Token / Access Token flow"
-                color="blue"
-              />
-            </ArchLayer>
-
-            <FlowArrow label="HTTP REST + WebSocket" />
-
-            <ArchLayer cls="middleware" label="② Middleware Layer — Express 5">
-              <Node text="CORS" sub="Origin whitelist" color="purple" />
-              <Node text="Body Parser" sub="express.json()" color="purple" />
-              <Node
-                text="Cookie Parser"
-                sub="httpOnly cookies"
-                color="purple"
-              />
-              <Node
-                text="JWT Auth"
-                sub="requireAuth middleware"
-                color="purple"
-              />
-              <Node text="Multer" sub="Memory + Disk storage" color="purple" />
-              <Node
-                text="Socket.IO"
-                sub="WebRTC signaling server"
-                color="purple"
-              />
-              <Node
-                text="Static Files"
-                sub="/uploads directory"
-                color="purple"
-              />
-            </ArchLayer>
-
-            <FlowArrow label="Route matching → Controller" />
-
-            <ArchLayer cls="routes" label="③ Routes & Controllers">
-              <Node
-                text="/api/auth"
-                sub="Register · OTP · Login · Google · Logout"
-                color="green"
-              />
-              <Node
-                text="/api/courses"
-                sub="CRUD · Enroll · Unenroll · Students"
-                color="green"
-              />
-              <Node
-                text="/api/assignments"
-                sub="CRUD · Submit · Grade"
-                color="green"
-              />
-              <Node
-                text="/api/quizzes"
-                sub="CRUD · Submit · Results"
-                color="green"
-              />
-              <Node
-                text="/api/live-classes"
-                sub="Schedule · Join · Comments · Q&A · Recording"
-                color="green"
-              />
-              <Node
-                text="/api/enrollments"
-                sub="Enroll · Unenroll · Progress tracking"
-                color="green"
-              />
-              <Node
-                text="/api/notifications"
-                sub="List · Mark all read"
-                color="green"
-              />
-              <Node
-                text="/api/dashboard"
-                sub="Teacher & Student dashboards"
-                color="green"
-              />
-              <Node
-                text="/api/ai/*"
-                sub="Chat · Quiz · Summarize · Agent · Feedback"
-                color="amber"
-              />
-            </ArchLayer>
+          {/* ── Architecture Layers ── */}
+          <div className="flex flex-col gap-5">
+            {LAYERS.map((layer, li) => (
+              <div
+                key={layer.id}
+                className="ta-fadein"
+                style={{ animationDelay: `${li * 80}ms` }}
+              >
+                {layer.arrow && <FlowArrow label={layer.arrow} />}
+                <ArchLayer label={layer.label} accent={layer.accent}>
+                  {layer.nodes.map((n) => (
+                    <Node
+                      key={n.text}
+                      text={n.text}
+                      sub={n.sub}
+                      color={n.color}
+                    />
+                  ))}
+                </ArchLayer>
+              </div>
+            ))}
 
+            {/* AI / Agentic Layer — special 2-column layout */}
             <FlowArrow label="Business logic" />
-
-            {/* AI Layer */}
             <div
+              className="relative rounded-2xl p-5 ta-fadein"
               style={{
-                border: "1px solid rgba(251,191,36,0.3)",
-                borderRadius: 16,
-                padding: 20,
-                background: "rgba(251,191,36,0.06)",
-                position: "relative",
-                animation: "fadeUp 0.6s ease both",
+                border: "1px solid #fbbf2433",
+                background: "#fbbf240d",
               }}
             >
               <div
+                className="absolute -top-[11px] left-5 px-3 text-[10px] font-bold uppercase tracking-widest"
                 style={{
-                  position: "absolute",
-                  top: -11,
-                  left: 20,
-                  background: "#0c0f1a",
-                  padding: "0 12px",
+                  background: "var(--bg)",
+                  color: "#fbbf24",
                   fontFamily: "'JetBrains Mono', monospace",
-                  fontSize: "0.7rem",
-                  fontWeight: 600,
                   letterSpacing: "1.5px",
-                  textTransform: "uppercase",
-                  color: "#fbbf24",
                 }}
               >
                 ④ AI / Agentic Layer — Claude API
               </div>
-              <div
-                style={{
-                  display: "grid",
-                  gridTemplateColumns: "1fr 1fr",
-                  gap: 12,
-                  marginTop: 12,
-                }}
-              >
-                <div
-                  style={{ display: "flex", flexDirection: "column", gap: 8 }}
-                >
-                  <Node
-                    text="agent.js"
-                    sub={
-                      "Agentic loop · Max 10 iterations\nAuto tool selection · Multi-step chains"
-                    }
-                    color="amber"
-                  />
-                  <Node
-                    text="llm.js"
-                    sub={"callClaude() base helper\nModel: claude-sonnet-4-6"}
-                    color="amber"
-                  />
-                  <Node
-                    text="tools.js"
-                    sub="7 tool schemas for Claude tool_use"
-                    color="amber"
-                  />
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mt-2">
+                {/* Left: core files */}
+                <div className="flex flex-col gap-2">
+                  {[
+                    {
+                      text: "agent.js",
+                      sub: "Agentic loop · Max 10 iterations\nAuto tool selection · Multi-step chains",
+                    },
+                    {
+                      text: "llm.js",
+                      sub: "callClaude() base helper\nModel: claude-sonnet-4-6",
+                    },
+                    {
+                      text: "tools.js",
+                      sub: "7 tool schemas for Claude tool_use",
+                    },
+                  ].map((n) => (
+                    <Node
+                      key={n.text}
+                      text={n.text}
+                      sub={n.sub}
+                      color="#fbbf24"
+                    />
+                  ))}
                 </div>
-                <div
-                  style={{
-                    display: "grid",
-                    gridTemplateColumns: "1fr 1fr",
-                    gap: 6,
-                  }}
-                >
+                {/* Right: tools grid */}
+                <div className="grid grid-cols-2 gap-1.5">
                   {AI_TOOLS.map((t) => (
                     <div
                       key={t}
+                      className="rounded-lg px-2.5 py-1.5 text-center text-xs font-semibold cursor-default transition-all duration-200 hover:scale-[1.03]"
                       style={{
-                        background: "rgba(251,191,36,0.1)",
-                        border: "1px solid rgba(251,191,36,0.2)",
-                        borderRadius: 8,
-                        padding: "6px 10px",
-                        fontSize: "0.72rem",
-                        fontWeight: 600,
+                        background: "rgba(251,191,36,0.10)",
+                        border: "1px solid rgba(251,191,36,0.22)",
                         color: "#fbbf24",
-                        textAlign: "center",
-                        transition: "all 0.2s",
-                        cursor: "default",
-                      }}
-                      onMouseEnter={(e) => {
-                        e.currentTarget.style.background =
-                          "rgba(251,191,36,0.2)";
-                        e.currentTarget.style.transform = "scale(1.03)";
-                      }}
-                      onMouseLeave={(e) => {
-                        e.currentTarget.style.background =
-                          "rgba(251,191,36,0.1)";
-                        e.currentTarget.style.transform = "";
+                        fontFamily: "'JetBrains Mono', monospace",
                       }}
                     >
                       {t}
@@ -696,192 +502,54 @@ function TechArchitecture() {
                 </div>
               </div>
             </div>
-
-            <FlowArrow label="Mongoose queries" />
-
-            <ArchLayer cls="data" label="⑤ Data Layer — MongoDB + Mongoose">
-              <Node
-                text="User"
-                sub="name · email · password · role · googleId"
-                color="teal"
-              />
-              <Node
-                text="Course"
-                sub="title · teacher · enrolledStudents[]"
-                color="teal"
-              />
-              <Node
-                text="Assignment"
-                sub="title · dueDate · maxScore · course"
-                color="teal"
-              />
-              <Node
-                text="Submission"
-                sub="content · score · feedback · status"
-                color="teal"
-              />
-              <Node
-                text="Quiz"
-                sub="questions[] · timeLimit · isActive"
-                color="teal"
-              />
-              <Node
-                text="QuizResult"
-                sub="answers[] · score · totalPoints"
-                color="teal"
-              />
-              <Node
-                text="LiveClass"
-                sub="type: meetLink|platform · status · attendees"
-                color="teal"
-              />
-              <Node
-                text="Material"
-                sub="fileUrl · cloudinaryPublicId · order"
-                color="teal"
-              />
-              <Node
-                text="Enrollment"
-                sub="progress · status · completedAt"
-                color="teal"
-              />
-              <Node
-                text="Notification"
-                sub="message · type · read"
-                color="teal"
-              />
-              <Node
-                text="AIStudyPlan"
-                sub="student · content · courses[]"
-                color="teal"
-              />
-              <Node
-                text="AICourseOutline"
-                sub="teacher · content · subject"
-                color="teal"
-              />
-            </ArchLayer>
-
-            <FlowArrow label="External API calls" />
-
-            <ArchLayer cls="external" label="⑥ External Services">
-              <Node
-                text="MongoDB Atlas"
-                sub="Cloud database · retryWrites"
-                color="pink"
-              />
-              <Node
-                text="Anthropic API"
-                sub="Claude claude-sonnet-4-6 · Tool use"
-                color="pink"
-              />
-              <Node
-                text="Cloudinary"
-                sub="Video · Image · PDF uploads"
-                color="pink"
-              />
-              <Node
-                text="Gmail SMTP"
-                sub="OTP emails · Course notifications"
-                color="pink"
-              />
-              <Node
-                text="Google OAuth"
-                sub="ID token verification"
-                color="pink"
-              />
-            </ArchLayer>
           </div>
 
-          {/* Request Lifecycle */}
-          <div style={{ marginTop: 56 }}>
-            <h2
-              style={{
-                fontSize: "1.5rem",
-                fontWeight: 700,
-                marginBottom: 24,
-                color: "#e2e4f0",
-              }}
-            >
-              Request <span style={{ color: "#a78bfa" }}>Lifecycle</span> Flow
+          {/* ── Request Lifecycle ── */}
+          <div className="mt-14">
+            <h2 className="text-2xl font-bold mb-6 text-[var(--text)]">
+              Request <span className="text-[var(--accent)]">Lifecycle</span>{" "}
+              Flow
             </h2>
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "column",
-                gap: 0,
-                position: "relative",
-                paddingLeft: 32,
-              }}
-            >
+            <div className="relative flex flex-col gap-3 pl-8">
+              {/* vertical line */}
               <div
+                className="absolute left-[11px] top-0 bottom-0 w-0.5 rounded-full"
                 style={{
-                  position: "absolute",
-                  left: 11,
-                  top: 0,
-                  bottom: 0,
-                  width: 2,
                   background:
                     "linear-gradient(to bottom, #5b9cf6, #a78bfa, #34d399, #fbbf24, #22d3ee, #f472b6)",
-                  borderRadius: 2,
                 }}
               />
               {FLOW_STEPS.map((s, i) => (
                 <div
                   key={i}
+                  className="relative rounded-xl p-4 border ta-fadein transition-colors duration-300"
                   style={{
-                    position: "relative",
-                    padding: "12px 16px",
-                    background: "#141829",
-                    border: "1px solid #2a2f4a",
-                    borderRadius: 10,
-                    marginBottom: 12,
-                    animation: "fadeUp 0.5s ease both",
+                    background: "var(--surface)",
+                    borderColor: "var(--border)",
+                    animationDelay: `${i * 60}ms`,
                   }}
                 >
+                  {/* dot */}
                   <div
+                    className="absolute -left-[27px] top-[18px] w-3 h-3 rounded-full border-2"
                     style={{
-                      position: "absolute",
-                      left: -27,
-                      top: 18,
-                      width: 12,
-                      height: 12,
-                      borderRadius: "50%",
-                      border: "2px solid #0c0f1a",
+                      borderColor: "var(--bg)",
                       background: STEP_COLORS[i],
                     }}
                   />
                   <div
+                    className="text-[10px] font-bold uppercase tracking-wider mb-1"
                     style={{
-                      fontFamily: "'JetBrains Mono', monospace",
-                      fontSize: "0.65rem",
-                      fontWeight: 700,
-                      letterSpacing: 1,
-                      textTransform: "uppercase",
-                      marginBottom: 4,
                       color: STEP_COLORS[i],
+                      fontFamily: "'JetBrains Mono', monospace",
                     }}
                   >
                     {s.num}
                   </div>
-                  <h4
-                    style={{
-                      fontSize: "0.9rem",
-                      fontWeight: 700,
-                      marginBottom: 3,
-                      color: "#e2e4f0",
-                    }}
-                  >
+                  <h4 className="text-sm font-bold mb-1 text-[var(--text)]">
                     {s.title}
                   </h4>
-                  <p
-                    style={{
-                      fontSize: "0.78rem",
-                      color: "#8b90b0",
-                      fontWeight: 300,
-                      lineHeight: 1.5,
-                    }}
-                  >
+                  <p className="text-xs text-[var(--muted)] font-light leading-relaxed">
                     {s.desc}
                   </p>
                 </div>
@@ -889,70 +557,77 @@ function TechArchitecture() {
             </div>
           </div>
 
-          {/* Socket Events */}
-          <div style={{ marginTop: 48 }}>
-            <h2
-              style={{
-                fontSize: "1.5rem",
-                fontWeight: 700,
-                marginBottom: 20,
-                color: "#e2e4f0",
-              }}
-            >
-              Real-time <span style={{ color: "#f87171" }}>Socket.IO</span>{" "}
-              Events
+          {/* ── Socket Events ── */}
+          <div className="mt-12">
+            <h2 className="text-2xl font-bold mb-5 text-[var(--text)]">
+              Real-time{" "}
+              <span style={{ color: "var(--danger)" }}>Socket.IO</span> Events
             </h2>
-            <div
-              style={{
-                display: "grid",
-                gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
-                gap: 10,
-              }}
-            >
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2.5">
               {SOCKET_EVENTS.map((ev) => (
                 <div
                   key={ev.name}
+                  className="rounded-xl p-3 border transition-all duration-200 cursor-default hover:-translate-y-0.5"
                   style={{
-                    background: "#141829",
-                    border: "1px solid #2a2f4a",
-                    borderRadius: 10,
-                    padding: "12px 14px",
-                    transition: "all 0.2s",
-                    cursor: "default",
+                    background: "var(--surface)",
+                    borderColor: "var(--border)",
                   }}
                   onMouseEnter={(e) => {
-                    e.currentTarget.style.borderColor = "#f87171";
-                    e.currentTarget.style.transform = "translateY(-2px)";
+                    e.currentTarget.style.borderColor = "var(--danger)";
                   }}
                   onMouseLeave={(e) => {
-                    e.currentTarget.style.borderColor = "#2a2f4a";
-                    e.currentTarget.style.transform = "";
+                    e.currentTarget.style.borderColor = "var(--border)";
                   }}
                 >
                   <div
+                    className="text-xs font-bold mb-1"
                     style={{
+                      color: "var(--danger)",
                       fontFamily: "'JetBrains Mono', monospace",
-                      fontSize: "0.72rem",
-                      fontWeight: 600,
-                      color: "#f87171",
-                      marginBottom: 4,
                     }}
                   >
                     {ev.name}
                   </div>
-                  <div
-                    style={{
-                      fontSize: "0.72rem",
-                      color: "#8b90b0",
-                      fontWeight: 300,
-                    }}
-                  >
+                  <div className="text-xs text-[var(--muted)] font-light leading-snug">
                     {ev.desc}
                   </div>
                 </div>
               ))}
             </div>
           </div>
+
+          {/* ── Legend ── */}
+          <div
+            className="mt-12 rounded-2xl p-5 border transition-colors duration-300"
+            style={{
+              background: "var(--surface)",
+              borderColor: "var(--border)",
+            }}
+          >
+            <h3 className="text-sm font-bold text-[var(--text)] mb-4 uppercase tracking-wider">
+              Layer Legend
+            </h3>
+            <div className="flex flex-wrap gap-3">
+              {[
+                { label: "Client", color: "#5b9cf6" },
+                { label: "Middleware", color: "#a78bfa" },
+                { label: "Routes", color: "#34d399" },
+                { label: "AI / Agent", color: "#fbbf24" },
+                { label: "Data", color: "#22d3ee" },
+                { label: "External", color: "#f472b6" },
+              ].map((item) => (
+                <div key={item.label} className="flex items-center gap-2">
+                  <span
+                    className="w-3 h-3 rounded-full flex-shrink-0"
+                    style={{ background: item.color }}
+                  />
+                  <span className="text-xs text-[var(--muted)] font-medium">
+                    {item.label}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
         </div>
       </main>
 
diff --git a/client/src/theme/ThemeApplier.jsx b/client/src/theme/ThemeApplier.jsx
index ca6e1e3..d426f67 100644
--- a/client/src/theme/ThemeApplier.jsx
+++ b/client/src/theme/ThemeApplier.jsx
@@ -2,68 +2,69 @@ import { useEffect } from "react";
 
 const themeStyles = {
   light: {
-    "--bg": "#f8f9fc",
+    "--bg": "#f1f5f9",
     "--surface": "#ffffff",
     "--surface-elevated": "#ffffff",
+    "--surface-hover": "#f8fafc",
     "--text": "#0f172a",
     "--text-secondary": "#334155",
     "--muted": "#64748b",
-    "--accent": "#6366f1",
-    "--accent-light": "#818cf8",
+    "--accent": "#4f46e5",
+    "--accent-light": "#6366f1",
     "--accent-contrast": "#ffffff",
     "--border": "#e2e8f0",
     "--border-light": "#f1f5f9",
     "--shadow-color": "220 60% 2%",
     "--glow-color": "239 84% 67%",
-    className: "",
+    "--success": "#16a34a",
+    "--warning": "#d97706",
+    "--danger": "#dc2626",
+    "--info": "#0284c7",
+    className: "light",
   },
   dark: {
-    "--bg": "#030712",
-    "--surface": "#0f1729",
-    "--surface-elevated": "#1a2340",
+    "--bg": "#0f172a",
+    "--surface": "#1e293b",
+    "--surface-elevated": "#273549",
+    "--surface-hover": "#253044",
     "--text": "#f1f5f9",
     "--text-secondary": "#cbd5e1",
     "--muted": "#94a3b8",
     "--accent": "#818cf8",
     "--accent-light": "#a5b4fc",
     "--accent-contrast": "#0f172a",
-    "--border": "#1e293b",
-    "--border-light": "#1e293b",
+    "--border": "#334155",
+    "--border-light": "#293547",
     "--shadow-color": "222 47% 4%",
     "--glow-color": "239 84% 67%",
+    "--success": "#22c55e",
+    "--warning": "#f59e0b",
+    "--danger": "#f87171",
+    "--info": "#38bdf8",
     className: "dark",
   },
-  custom: {
-    "--bg": "#0c0a1a",
-    "--surface": "#150f2d",
-    "--surface-elevated": "#1e1745",
-    "--text": "#e0e7ff",
-    "--text-secondary": "#c7d2fe",
-    "--muted": "#8b8d9e",
-    "--accent": "#a78bfa",
-    "--accent-light": "#c4b5fd",
-    "--accent-contrast": "#0c0a1a",
-    "--border": "#2e2654",
-    "--border-light": "#2e2654",
-    "--shadow-color": "260 50% 4%",
-    "--glow-color": "263 70% 70%",
-    className: "custom-theme",
-  },
 };
 
 function ThemeApplier({ themeName }) {
   useEffect(() => {
     const current = themeStyles[themeName] || themeStyles.light;
+
+    // Apply all CSS custom properties to :root
     Object.entries(current).forEach(([key, value]) => {
       if (key.startsWith("--"))
         document.documentElement.style.setProperty(key, value);
     });
-    document.documentElement.classList.remove("dark", "custom-theme");
-    if (current.className)
+
+    // Toggle dark class for Tailwind dark: utilities
+    document.documentElement.classList.remove("light", "dark");
+    if (current.className) {
       document.documentElement.classList.add(current.className);
+    }
+
+    // Persist selection
     localStorage.setItem("smartclass_theme", themeName);
 
-    // Set meta theme-color for mobile browsers
+    // Set mobile browser chrome colour
     const meta =
       document.querySelector('meta[name="theme-color"]') ||
       document.createElement("meta");
diff --git a/client/src/theme/ThemeSelector.jsx b/client/src/theme/ThemeSelector.jsx
index 7e4a5e1..66988ee 100644
--- a/client/src/theme/ThemeSelector.jsx
+++ b/client/src/theme/ThemeSelector.jsx
@@ -3,12 +3,11 @@ import { themes } from "../context/ThemeContext";
 const THEME_META = {
   [themes.light]: { label: "Light", icon: "☀️" },
   [themes.dark]: { label: "Dark", icon: "🌙" },
-  [themes.custom]: { label: "Custom", icon: "✨" },
 };
 
 function ThemeSelector({ themeName, setThemeName }) {
   return (
-    <div className="fixed right-3 top-3 z-50 rounded-2xl border border-[var(--border)] bg-[color-mix(in_srgb,var(--surface)_82%,transparent)] backdrop-blur-xl px-2 py-2 shadow-[0_10px_30px_rgba(0,0,0,0.18)]">
+    <div className="fixed right-3 top-3 z-50 rounded-2xl border border-[var(--border)] bg-[var(--surface)] px-2 py-2 shadow-[0_10px_30px_rgba(0,0,0,0.12)]">
       <div className="flex items-center gap-2">
         {Object.keys(themes).map((key) => {
           const active = themeName === key;
@@ -19,7 +18,7 @@ function ThemeSelector({ themeName, setThemeName }) {
               className={`group relative flex items-center gap-1.5 rounded-xl px-3 py-1.5 text-xs font-semibold transition-all duration-200 ${
                 active
                   ? "bg-[var(--accent)] text-[var(--accent-contrast)] shadow-[0_8px_20px_-10px_var(--accent)] scale-105"
-                  : "bg-[var(--surface)] text-[var(--muted)] hover:text-[var(--text)] hover:-translate-y-0.5"
+                  : "bg-[var(--surface-elevated)] text-[var(--muted)] hover:text-[var(--text)] hover:-translate-y-0.5"
               }`}
               type="button"
               title={THEME_META[key]?.label || key}