diff --git a/client/src/components/CourseView/LiveClassCard.jsx b/client/src/components/CourseView/LiveClassCard.jsx
index a91e786..44e4520 100644
--- a/client/src/components/CourseView/LiveClassCard.jsx
+++ b/client/src/components/CourseView/LiveClassCard.jsx
@@ -12,88 +12,95 @@ function LiveClassCard({
 
   const statusMeta = isLive
     ? {
-        label: "LIVE NOW",
-        dot: "bg-red-500 shadow-[0_0_8px_rgba(239,68,68,0.6)]",
+        label: "Live",
+        color: "text-red-500",
         bg: "bg-red-500/10",
-        text: "text-red-400",
-        border: "border-red-500/25",
-        bar: "from-red-500 to-red-600",
-        icon: "📡",
-        cardBorder:
-          "border-red-500/25 shadow-[0_0_32px_-8px_rgba(239,68,68,0.15)]",
+        border: "border-red-500/20",
+        dot: "bg-red-500",
       }
     : isEnded
       ? {
           label: "Ended",
-          dot: "bg-[var(--muted)]/40",
-          bg: "bg-[var(--border)]/8",
-          text: "text-[var(--muted)]",
-          border: "border-[var(--border)]/18",
-          bar: "from-gray-500 to-gray-600",
-          icon: "📼",
-          cardBorder: "border-[var(--border)]/15",
+          color: "text-gray-400",
+          bg: "bg-gray-500/10",
+          border: "border-gray-500/20",
+          dot: "bg-gray-400",
         }
       : {
           label: "Scheduled",
-          dot: "bg-blue-400",
+          color: "text-blue-500",
           bg: "bg-blue-500/10",
-          text: "text-blue-400",
           border: "border-blue-500/20",
-          bar: "from-blue-500 to-indigo-600",
-          icon: "📅",
-          cardBorder:
-            "border-[var(--border)]/12 hover:border-[var(--accent)]/18",
+          dot: "bg-blue-500",
         };
 
   return (
     <div
+<<<<<<< HEAD
+      className="group rounded-2xl border border-[var(--border)]/15 bg-[var(--card)] backdrop-blur-xl 
+                    shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden"
+    >
+      {/* Top Accent Bar */}
+      <div
+        className={`h-1 w-full ${
+          isLive
+            ? "bg-gradient-to-r from-red-500 to-red-600"
+            : isScheduled
+              ? "bg-gradient-to-r from-blue-500 to-indigo-500"
+              : "bg-gradient-to-r from-gray-400 to-gray-500"
+        }`}
+      />
+
+      <div className="p-6 flex gap-4">
+=======
       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}`}
     >
       <div className="p-5 sm:p-6 flex items-start gap-4">
+>>>>>>> 42795c9a6a2ed72e942e6619110abc54bb76c281
         {/* Icon */}
         <div
-          className={`w-12 h-12 rounded-2xl flex items-center justify-center text-xl shrink-0 border
-                       ${statusMeta.bg} ${statusMeta.border}
-                       ${isLive ? "animate-pulse" : "group-hover:scale-105 transition-transform duration-400"}`}
+          className={`w-12 h-12 rounded-xl flex items-center justify-center text-xl border shrink-0
+          ${statusMeta.bg} ${statusMeta.border}`}
         >
-          {statusMeta.icon}
+          {isLive ? "📡" : isEnded ? "📼" : "📅"}
         </div>
 
+        {/* Content */}
         <div className="flex-1 min-w-0">
-          {/* Title + status */}
-          <div className="flex items-center gap-2.5 mb-1.5 flex-wrap">
-            <h4 className="text-[15px] font-bold text-[var(--text)] leading-snug">
+          {/* Title + badges */}
+          <div className="flex items-center flex-wrap gap-2 mb-2">
+            <h3 className="text-base font-semibold text-[var(--text)] leading-tight">
               {liveClass.title}
-            </h4>
+            </h3>
+
             <span
-              className={`flex items-center gap-1.5 px-2.5 py-[3px] rounded-lg text-[10px] font-black uppercase tracking-[0.1em] border
-                           ${statusMeta.bg} ${statusMeta.text} ${statusMeta.border}`}
+              className={`flex items-center gap-1 px-2 py-[2px] text-[10px] font-semibold rounded-md border
+              ${statusMeta.bg} ${statusMeta.color} ${statusMeta.border}`}
             >
               <span
-                className={`w-1.5 h-1.5 rounded-full ${statusMeta.dot} ${isLive ? "animate-pulse" : ""}`}
+                className={`w-1.5 h-1.5 rounded-full ${statusMeta.dot} ${
+                  isLive ? "animate-pulse" : ""
+                }`}
               />
               {statusMeta.label}
             </span>
-            {/* Type badge */}
-            <span
-              className="flex items-center gap-1 px-2 py-[3px] rounded-lg text-[10px] font-bold
-                               bg-[var(--border)]/8 text-[var(--muted)] border border-[var(--border)]/15"
-            >
-              {isPlatform ? "🖥️ On Platform" : "🔗 External Link"}
+
+            <span className="text-[10px] px-2 py-[2px] rounded-md bg-[var(--border)]/10 border border-[var(--border)]/15 text-[var(--muted)]">
+              {isPlatform ? "Platform" : "External"}
             </span>
           </div>
 
           {/* Description */}
           {liveClass.description && (
-            <p className="text-[13px] text-[var(--muted)] mb-3 leading-relaxed line-clamp-2">
+            <p className="text-sm text-[var(--muted)] mb-3 line-clamp-2">
               {liveClass.description}
             </p>
           )}
 
-          {/* Meta pills */}
-          <div className="flex flex-wrap gap-2 mb-4">
-            <span className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-[11px] font-bold bg-[var(--border)]/8 text-[var(--muted)] border border-[var(--border)]/12">
+          {/* Meta */}
+          <div className="flex flex-wrap gap-2 mb-4 text-xs">
+            <span className="px-3 py-1 rounded-lg bg-[var(--border)]/10 border border-[var(--border)]/15 text-[var(--muted)]">
               📅{" "}
               {new Date(liveClass.scheduledAt).toLocaleDateString("en-US", {
                 month: "short",
@@ -105,115 +112,95 @@ function LiveClassCard({
                 minute: "2-digit",
               })}
             </span>
+
             {liveClass.attendeeCount > 0 && (
-              <span className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-[11px] font-bold bg-emerald-500/8 text-emerald-400 border border-emerald-500/12">
-                👥 {liveClass.attendeeCount} attended
+              <span className="px-3 py-1 rounded-lg bg-emerald-500/10 text-emerald-500 border border-emerald-500/20">
+                👥 {liveClass.attendeeCount}
               </span>
             )}
           </div>
 
-          {/* External meeting link (meetLink type only) */}
-          <div className="flex flex-wrap items-center gap-3 mb-4">
+          {/* Links */}
+          <div className="flex flex-wrap gap-3 mb-4 text-xs">
             {!isPlatform && liveClass.meetingLink && !isEnded && (
               <a
                 href={liveClass.meetingLink}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="inline-flex items-center gap-2 text-xs font-bold text-[var(--accent)] hover:underline decoration-[var(--accent)]/30 underline-offset-2 transition-all"
+                className="text-[var(--accent)] hover:underline"
               >
                 🔗 Meeting Link
-                <svg
-                  width="10"
-                  height="10"
-                  viewBox="0 0 16 16"
-                  fill="currentColor"
-                  className="opacity-50"
-                >
-                  <path d="M3.75 2h3.5a.75.75 0 010 1.5H4.56l7.72 7.72a.75.75 0 11-1.06 1.06L3.5 4.56v2.69a.75.75 0 01-1.5 0v-3.5A1.75 1.75 0 013.75 2z" />
-                </svg>
               </a>
             )}
+
             {liveClass.recordingUrl && (
               <a
                 href={liveClass.recordingUrl}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="inline-flex items-center gap-2 text-xs font-bold text-violet-400 hover:underline decoration-violet-400/30 underline-offset-2 transition-all"
+                className="text-violet-500 hover:underline"
               >
-                ▶ Watch Recording
+                ▶ Recording
               </a>
             )}
           </div>
 
           {/* Actions */}
-          <div className="flex flex-wrap gap-2.5">
+          <div className="flex flex-wrap gap-2">
             {isTeacher ? (
               <>
                 {isScheduled && (
                   <button
                     onClick={() => onStatusChange(liveClass.id, "live")}
-                    className="flex items-center gap-2 px-5 py-2.5 bg-red-500/12 hover:bg-red-500/20 text-red-400 rounded-xl text-xs font-bold border border-red-500/20 cursor-pointer transition-all duration-300 active:scale-95
-                               hover:shadow-[0_8px_20px_-6px_rgba(239,68,68,0.2)]"
+                    className="px-4 py-2 text-xs font-medium rounded-lg bg-red-500 text-white hover:bg-red-600 transition"
                   >
-                    <span className="w-2 h-2 rounded-full bg-red-500 animate-pulse" />
-                    Start Live
+                    Start
                   </button>
                 )}
-                {/* Enter classroom (platform) or end class */}
+
                 {isLive && isPlatform && (
                   <button
                     onClick={() => onJoin(liveClass.id, null)}
-                    className="flex items-center gap-2.5 px-5 py-2.5 bg-gradient-to-r from-violet-500 to-indigo-600
-                               hover:shadow-[0_12px_28px_-6px_rgba(139,92,246,0.45)]
-                               text-white rounded-xl text-xs font-black border-none cursor-pointer transition-all duration-300 active:scale-95"
+                    className="px-4 py-2 text-xs font-medium rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 transition"
                   >
-                    🖥️ Enter Classroom
+                    Enter
                   </button>
                 )}
+
                 {isLive && (
                   <button
                     onClick={() => onStatusChange(liveClass.id, "ended")}
-                    className="flex items-center gap-2 px-5 py-2.5 bg-[var(--border)]/10 hover:bg-[var(--border)]/20 text-[var(--muted)] rounded-xl text-xs font-bold border border-[var(--border)]/18 cursor-pointer transition-all duration-300 active:scale-95"
+                    className="px-4 py-2 text-xs font-medium rounded-lg border border-[var(--border)] text-[var(--muted)] hover:bg-[var(--border)]/10 transition"
                   >
-                    ⬛ End Class
+                    End
                   </button>
                 )}
+
                 <button
                   onClick={() => onDelete(liveClass.id)}
-                  className="px-5 py-2.5 bg-red-500/6 hover:bg-red-500/14 text-red-400 rounded-xl text-xs font-bold border border-red-500/15 cursor-pointer transition-all duration-300 active:scale-95"
+                  className="px-4 py-2 text-xs font-medium rounded-lg text-red-500 hover:bg-red-500/10 transition"
                 >
                   Delete
                 </button>
               </>
             ) : (
               isLive && (
-                <>
-                  {isPlatform ? (
-                    /* Platform class → navigate to the live room */
-                    <button
-                      onClick={() => onJoin(liveClass.id, null)}
-                      className="flex items-center gap-2.5 px-6 py-2.5 bg-gradient-to-r from-violet-500 to-indigo-600
-                                 hover:shadow-[0_12px_28px_-6px_rgba(139,92,246,0.45)]
-                                 text-white rounded-xl text-xs font-black border-none cursor-pointer transition-all duration-300 active:scale-95"
-                    >
-                      <span className="w-2 h-2 rounded-full bg-white animate-pulse shadow-[0_0_6px_rgba(255,255,255,0.6)]" />
-                      Join Live Now
-                    </button>
-                  ) : (
-                    /* External meeting link → open in new tab */
-                    <button
-                      onClick={() =>
-                        onJoin(liveClass.id, liveClass.meetingLink)
-                      }
-                      className="flex items-center gap-2.5 px-6 py-2.5 bg-gradient-to-r from-red-500 to-red-600
-                                 hover:shadow-[0_12px_28px_-6px_rgba(239,68,68,0.45)]
-                                 text-white rounded-xl text-xs font-black border-none cursor-pointer transition-all duration-300 active:scale-95"
-                    >
-                      <span className="w-2 h-2 rounded-full bg-white animate-pulse shadow-[0_0_6px_rgba(255,255,255,0.6)]" />
-                      Join Live Now
-                    </button>
-                  )}
-                </>
+                <button
+                  onClick={() =>
+                    onJoin(
+                      liveClass.id,
+                      isPlatform ? null : liveClass.meetingLink,
+                    )
+                  }
+                  className={`px-5 py-2 text-xs font-semibold rounded-lg text-white transition
+                    ${
+                      isPlatform
+                        ? "bg-indigo-600 hover:bg-indigo-700"
+                        : "bg-red-500 hover:bg-red-600"
+                    }`}
+                >
+                  Join Live
+                </button>
               )
             )}
           </div>
diff --git a/client/src/components/CourseView/LiveClassesTab.jsx b/client/src/components/CourseView/LiveClassesTab.jsx
index 50079dd..2b5d77d 100644
--- a/client/src/components/CourseView/LiveClassesTab.jsx
+++ b/client/src/components/CourseView/LiveClassesTab.jsx
@@ -2,12 +2,16 @@ import LiveClassCard from "./LiveClassCard";
 
 function SectionLabel({ dot, label, count }) {
   return (
-    <div className="flex items-center gap-2.5 mb-4">
-      <span className={`w-2.5 h-2.5 rounded-full ${dot}`} />
-      <h3 className="font-medium text-sm">
-        {label}
-        <span className="text-[var(--muted)] ml-2">({count})</span>
-      </h3>
+    <div className="flex items-center justify-between mb-3">
+      <div className="flex items-center gap-2">
+        <span className={`w-2.5 h-2.5 rounded-full ${dot}`} />
+        <h3 className="text-sm font-semibold text-[var(--text)] tracking-tight">
+          {label}
+        </h3>
+      </div>
+      <span className="text-xs font-medium text-[var(--muted)] bg-[var(--card)] px-2.5 py-0.5 rounded-lg">
+        {count}
+      </span>
     </div>
   );
 }
@@ -25,33 +29,36 @@ function LiveClassesTab({
   const ended = liveClasses.filter((lc) => lc.status === "ended");
 
   return (
-    <div>
-      {/* Section header */}
-      <div className="flex items-center justify-between mb-6">
+    <div className="space-y-8">
+      {/* Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <div className="flex items-center gap-3">
-          <div className="w-10 h-10 rounded-2xl bg-gradient-to-br from-red-500/20 to-red-600/10 border border-red-500/15 flex items-center justify-center text-lg">
+          <div className="w-11 h-11 rounded-2xl bg-gradient-to-br from-red-500/20 to-red-600/10 border border-red-500/20 flex items-center justify-center text-lg shadow-sm">
             📹
           </div>
           <div>
-            <h2 className="text-base font-bold text-[var(--text)] leading-tight">
+            <h2 className="text-lg font-semibold text-[var(--text)] tracking-tight">
               Live Classes
             </h2>
-            <p className="text-[11px] text-[var(--muted)] font-medium mt-0.5">
+            <p className="text-xs text-[var(--muted)] mt-0.5">
               {liveClasses.length}{" "}
-              {liveClasses.length === 1 ? "session" : "sessions"} total
+              {liveClasses.length === 1 ? "session" : "sessions"}
               {liveNow.length > 0 && (
-                <span className="text-red-400 font-bold ml-1">
-                  · {liveNow.length} live now
+                <span className="ml-2 text-red-500 font-semibold">
+                  • {liveNow.length} live
                 </span>
               )}
             </p>
           </div>
         </div>
+
         {isTeacher && (
           <button
             onClick={onAddClick}
-            className="flex items-center gap-2 px-5 py-2.5 sc-btn-glow rounded-xl text-sm font-bold cursor-pointer active:scale-95
-                       shadow-[0_8px_24px_-8px_var(--accent)]"
+            className="flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl text-sm font-semibold
+              bg-[var(--accent)] text-white
+              hover:opacity-90 transition-all duration-200
+              active:scale-95 shadow-md"
           >
             <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
               <path d="M8 2a.75.75 0 01.75.75v4.5h4.5a.75.75 0 010 1.5h-4.5v4.5a.75.75 0 01-1.5 0v-4.5h-4.5a.75.75 0 010-1.5h4.5v-4.5A.75.75 0 018 2z" />
@@ -61,45 +68,55 @@ function LiveClassesTab({
         )}
       </div>
 
+      {/* Empty State */}
       {liveClasses.length === 0 ? (
+<<<<<<< HEAD
+        <div className="text-center py-16 rounded-2xl border border-[var(--border)]/20 bg-[var(--card)] shadow-sm">
+          <div className="w-14 h-14 rounded-2xl bg-red-500/10 border border-red-500/20 flex items-center justify-center text-2xl mx-auto mb-4">
+=======
         <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)]"
           >
+>>>>>>> 42795c9a6a2ed72e942e6619110abc54bb76c281
             📹
           </div>
-          <p className="text-lg font-bold text-[var(--text)] mb-2">
+          <p className="text-base font-semibold text-[var(--text)]">
             No live classes yet
           </p>
-          <p className="text-sm text-[var(--muted)] max-w-xs mx-auto leading-relaxed">
+          <p className="text-sm text-[var(--muted)] mt-1 max-w-xs mx-auto">
             {isTeacher
-              ? "Schedule your first live session."
-              : "No live classes have been scheduled yet."}
+              ? "Start by scheduling your first session."
+              : "No sessions available at the moment."}
           </p>
+
           {isTeacher && (
             <button
               onClick={onAddClick}
-              className="mt-6 px-6 py-3 sc-btn-glow rounded-xl text-sm font-bold cursor-pointer active:scale-95"
+              className="mt-5 px-5 py-2.5 rounded-xl text-sm font-semibold
+                bg-[var(--accent)] text-white
+                hover:opacity-90 transition active:scale-95"
             >
               + Schedule Class
             </button>
           )}
         </div>
       ) : (
-        <div className="space-y-8">
+        <div className="space-y-10">
+          {/* Live */}
           {liveNow.length > 0 && (
             <section>
               <SectionLabel
-                dot="bg-red-500 animate-pulse shadow-[0_0_8px_rgba(239,68,68,0.5)]"
+                dot="bg-red-500 animate-pulse"
                 label="Live Now"
                 count={liveNow.length}
               />
-              <div className="space-y-3">
+              <div className="grid gap-4">
                 {liveNow.map((lc, i) => (
                   <div
                     key={lc.id}
-                    className="animate-[slide-up_0.4s_cubic-bezier(0.16,1,0.3,1)_both]"
+                    className="animate-[fadeInUp_0.4s_ease_both]"
                     style={{ animationDelay: `${i * 60}ms` }}
                   >
                     <LiveClassCard
@@ -115,6 +132,7 @@ function LiveClassesTab({
             </section>
           )}
 
+          {/* Upcoming */}
           {upcoming.length > 0 && (
             <section>
               <SectionLabel
@@ -122,11 +140,11 @@ function LiveClassesTab({
                 label="Upcoming"
                 count={upcoming.length}
               />
-              <div className="space-y-3">
+              <div className="grid gap-4">
                 {upcoming.map((lc, i) => (
                   <div
                     key={lc.id}
-                    className="animate-[slide-up_0.4s_cubic-bezier(0.16,1,0.3,1)_both]"
+                    className="animate-[fadeInUp_0.4s_ease_both]"
                     style={{ animationDelay: `${i * 60}ms` }}
                   >
                     <LiveClassCard
@@ -142,18 +160,19 @@ function LiveClassesTab({
             </section>
           )}
 
+          {/* Past */}
           {ended.length > 0 && (
             <section>
               <SectionLabel
-                dot="bg-[var(--muted)]/30"
+                dot="bg-[var(--muted)]/40"
                 label="Past Sessions"
                 count={ended.length}
               />
-              <div className="space-y-3">
+              <div className="grid gap-4">
                 {ended.map((lc, i) => (
                   <div
                     key={lc.id}
-                    className="animate-[slide-up_0.4s_cubic-bezier(0.16,1,0.3,1)_both]"
+                    className="animate-[fadeInUp_0.4s_ease_both]"
                     style={{ animationDelay: `${i * 60}ms` }}
                   >
                     <LiveClassCard
diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx
index b111d82..85d1464 100644
--- a/client/src/components/Navbar.jsx
+++ b/client/src/components/Navbar.jsx
@@ -4,7 +4,8 @@ import { ThemeContext, themes as themeMap } from "../context/ThemeContext";
 import { useAuth } from "../context/AuthContext";
 import { getSocket } from "../socket";
 import { apiFetch } from "../utils/api.js";
-
+import { Sun, Moon, Sparkles } from "lucide-react";
+import { Bell } from "lucide-react";
 function timeAgo(date) {
   const s = Math.floor((Date.now() - new Date(date)) / 1000);
   if (s < 60) return "just now";
@@ -16,13 +17,16 @@ function timeAgo(date) {
 const THEME_META = {
   [themeMap.light]: {
     label: "Light",
-    icon: "☀️",
-    color: "from-amber-400 to-orange-400",
+    icon: Sun,
   },
   [themeMap.dark]: {
     label: "Dark",
+<<<<<<< HEAD
+    icon: Moon,
+=======
     icon: "🌙",
     color: "from-indigo-500 to-purple-600",
+>>>>>>> 42795c9a6a2ed72e942e6619110abc54bb76c281
   },
 };
 
@@ -54,7 +58,7 @@ const NAV_LINKS = [
   { label: "Live Classes", icon: "📹", path: "/live-classes" },
 ];
 
-function Navbar({ showBack }) {
+function Navbar() {
   const navigate = useNavigate();
   const location = useLocation();
   const { themeName, setThemeName } = useContext(ThemeContext);
@@ -110,13 +114,6 @@ function Navbar({ showBack }) {
     return () => document.removeEventListener("mousedown", handler);
   }, []);
 
-  const markAll = async () => {
-    await apiFetch(`/api/notifications/read-all/${user.id}`, {
-      method: "PATCH",
-    });
-    setNotifs((prev) => prev.map((n) => ({ ...n, read: true })));
-  };
-
   const cycleTheme = () => {
     setThemeName((prev) => (prev === "light" ? "dark" : "light"));
   };
@@ -129,16 +126,17 @@ function Navbar({ showBack }) {
   return (
     <nav
       data-theme={themeName}
-      className={`sticky top-0 z-50 h-auto sm:h-16 px-4 sm:px-6 py-3 sm:py-0 flex items-center justify-between
-                 text-[var(--text)] transition-all duration-500 ease-out
-                 ${
-                   scrolled
-                     ? "glass-heavy border-b border-[var(--border)]/60 shadow-[0_4px_30px_-8px_rgba(0,0,0,0.25)]"
-                     : "bg-transparent border-b border-transparent"
-                 }`}
+      className={`sticky top-0 z-50 px-4 sm:px-6 h-16 flex items-center justify-between
+  transition-all duration-500
+  ${
+    scrolled
+      ? "backdrop-blur-xl bg-white/70 dark:bg-black/40 border-b border-[var(--border)] shadow-md"
+      : "bg-transparent"
+  }`}
     >
-      {/* Left Section - Logo & Brand */}
-      <div className="flex items-center gap-2 sm:gap-5 min-w-0 flex-1">
+      {/* LEFT */}
+      <div className="flex items-center gap-5 min-w-0 flex-1">
+        {/* LOGO */}
         <button
           onClick={() =>
             navigate(
@@ -149,65 +147,57 @@ function Navbar({ showBack }) {
                 : "/",
             )
           }
-          className="flex items-center gap-2 sm:gap-3 no-underline min-w-0 group bg-transparent border-none cursor-pointer 
-                     p-1.5 rounded-xl hover:bg-[var(--accent)]/8 transition-all duration-300 active:scale-95"
+          className="flex items-center gap-3 group"
         >
           <div
-            className="w-9 sm:w-10 h-9 sm:h-10 rounded-xl flex items-center justify-center text-lg sm:text-xl flex-shrink-0
-                       bg-gradient-to-br from-[var(--accent)] to-[color-mix(in_srgb,var(--accent)_65%,#7c3aed)]
-                       text-[var(--accent-contrast)]
-                       shadow-[0_8px_24px_-8px_var(--accent)]
-                       group-hover:scale-110 group-hover:shadow-[0_12px_32px_-8px_var(--accent)]
-                       group-hover:rotate-[-5deg]
-                       transition-all duration-500 ease-out"
+            className="w-10 h-10 rounded-xl flex items-center justify-center
+        bg-gradient-to-br from-[var(--accent)] to-green-600 text-white
+        shadow-md group-hover:scale-110 transition-all duration-300"
           >
             🎓
           </div>
-          <div className="leading-tight min-w-0 hidden xs:block">
-            <span
-              className="block text-base sm:text-lg font-extrabold tracking-tight text-[var(--text)] truncate
-                           group-hover:text-[var(--accent)] transition-colors duration-300"
+
+          <div className="hidden sm:block leading-tight select-none">
+            {/* Brand Name */}
+            <p
+              className="
+    text-lg font-extrabold tracking-tight
+    bg-gradient-to-r from-green-500 via-emerald-500 to-green-600
+    bg-clip-text text-transparent
+    group-hover:scale-[1.03]
+    transition-all duration-300
+  "
             >
-              SmartClass
-            </span>
-            <span className="hidden sm:block text-[10px] text-[var(--muted)] font-semibold tracking-wider uppercase">
-              Learn · Manage · Grow
-            </span>
+              Smart<span className=" text-[var(--text)]">Class</span>
+            </p>
+
+            {/* Tagline */}
+            <p
+              className="
+    text-[10px] font-medium tracking-wide
+    text-gray-500
+    group-hover:text-green-500
+    transition-all duration-300
+  "
+            >
+              Learn • Grow • Build
+            </p>
           </div>
         </button>
 
-        {showBack && (
-          <button
-            onClick={() => navigate(-1)}
-            className="text-xs sm:text-sm font-semibold text-[var(--muted)] hover:text-[var(--accent)]
-                       bg-transparent border-none cursor-pointer transition-all duration-300 ml-2 sm:ml-4 pl-2 sm:pl-4
-                       border-l border-[var(--border)]/50 active:opacity-70 hover:-translate-x-0.5
-                       flex items-center gap-1"
-            title="Go back"
-          >
-            <span className="transition-transform group-hover:-translate-x-1">
-              ←
-            </span>{" "}
-            Back
-          </button>
-        )}
-
-        {/* Desktop Nav Links — authenticated only */}
+        {/* DESKTOP NAV */}
         {isAuthenticated && (
-          <nav
-            ref={navDropdownRef}
-            className="hidden lg:flex items-center gap-1 ml-2 pl-4 border-l border-[var(--border)]/40"
-          >
+          <div className="hidden lg:flex items-center gap-2 ml-4">
             {NAV_LINKS.map((link) => {
               const active = link.matchPrefix
                 ? location.pathname.startsWith(link.matchPrefix)
                 : location.pathname === link.path;
+
               const isOpen = navDropdown === link.label;
 
               return (
                 <div key={link.label} className="relative">
                   <button
-                    type="button"
                     onClick={() => {
                       if (link.dropdown) {
                         setNavDropdown(isOpen ? null : link.label);
@@ -216,46 +206,50 @@ function Navbar({ showBack }) {
                         setNavDropdown(null);
                       }
                     }}
-                    className={`flex items-center gap-1.5 px-3 py-2 rounded-xl text-sm font-semibold transition-all duration-300 active:scale-95 border-none cursor-pointer
-                      ${
-                        active
-                          ? "bg-[var(--accent)] text-[var(--accent-contrast)] shadow-[0_4px_16px_-4px_var(--accent)]"
-                          : "text-[var(--muted)] hover:text-[var(--text)] hover:bg-[var(--accent)]/8"
-                      }`}
+                    className={`flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold transition-all duration-300
+  ${
+    active
+      ? " text-white shadow-[0_6px_20px_-6px_rgba(34,197,94,0.6)]"
+      : "text-[var(--muted)] hover:bg-green-500/10 hover:text-green-500"
+  }`}
                   >
                     <span>{link.icon}</span>
-                    <span>{link.label}</span>
+                    {link.label}
                     {link.dropdown && (
                       <span
-                        className={`text-xs transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`}
+                        className={`text-xs transition-transform ${isOpen ? "rotate-180" : ""}`}
                       >
                         ▾
                       </span>
                     )}
                   </button>
 
-                  {/* Dropdown panel */}
+                  {/* DROPDOWN */}
                   {link.dropdown && isOpen && (
-                    <div className="absolute left-0 top-full mt-2 w-48 rounded-2xl border border-[var(--border)]/50 glass-heavy shadow-[0_20px_40px_-8px_rgba(0,0,0,0.25)] overflow-hidden z-[300] animate-[scale-in_0.2s_cubic-bezier(0.16,1,0.3,1)_both] origin-top-left">
+                    <div
+                      className="absolute top-full mt-2 w-52 rounded-2xl
+                  bg-white dark:bg-black border border-[var(--border)]
+                  shadow-xl overflow-hidden animate-[scale-in_0.2s_ease]"
+                    >
                       {link.dropdown.map((item) => {
                         const itemActive = location.pathname === item.path;
+
                         return (
                           <button
                             key={item.path}
-                            type="button"
                             onClick={() => {
                               navigate(item.path);
                               setNavDropdown(null);
                             }}
-                            className={`w-full flex items-center gap-2.5 px-4 py-2.5 text-sm font-medium transition-all duration-200 border-none cursor-pointer text-left
-                              ${
-                                itemActive
-                                  ? "bg-[var(--accent)]/15 text-[var(--accent)] font-semibold"
-                                  : "text-[var(--text)] hover:bg-[var(--accent)]/8"
-                              }`}
+                            className={`w-full text-left px-4 py-2.5 text-sm flex items-center gap-2 transition
+                          ${
+                            itemActive
+                              ? "bg-[var(--accent)]/15 text-[var(--accent)] font-semibold"
+                              : "hover:bg-[var(--accent)]/8"
+                          }`}
                           >
                             <span>{item.icon}</span>
-                            <span>{item.label}</span>
+                            {item.label}
                           </button>
                         );
                       })}
@@ -264,10 +258,15 @@ function Navbar({ showBack }) {
                 </div>
               );
             })}
-          </nav>
+          </div>
         )}
       </div>
 
+<<<<<<< HEAD
+      {/* RIGHT */}
+      <div className="flex items-center gap-3">
+        {/* THEME */}
+=======
       {/* Right Section */}
       <div className="flex items-center gap-1.5 sm:gap-2.5">
         {/* Desktop theme toggle: Light / Dark */}
@@ -296,9 +295,25 @@ function Navbar({ showBack }) {
         </div>
 
         {/* Mobile: icon-only toggle */}
+>>>>>>> 42795c9a6a2ed72e942e6619110abc54bb76c281
         <button
-          type="button"
           onClick={cycleTheme}
+<<<<<<< HEAD
+          className="flex items-center gap-2 px-3 py-2 rounded-xl border border-[var(--border)]
+  hover:bg-[var(--accent)]/10 transition-all duration-200"
+        >
+          {(() => {
+            const Icon = THEME_META[themeName]?.icon;
+            return (
+              <>
+                <Icon className="w-4 h-4" />
+                <span className="text-sm font-semibold hidden sm:inline">
+                  {THEME_META[themeName]?.label}
+                </span>
+              </>
+            );
+          })()}
+=======
           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
@@ -307,123 +322,52 @@ function Navbar({ showBack }) {
           aria-label="Toggle theme"
         >
           {themeName === "dark" ? "☀️" : "🌙"}
+>>>>>>> 42795c9a6a2ed72e942e6619110abc54bb76c281
         </button>
 
-        {/* AUTHENTICATED USER SECTION */}
         {isAuthenticated ? (
           <>
-            {/* User Info - Desktop Only */}
-            <div
-              className="hidden lg:flex items-center gap-3 px-3 py-1.5 rounded-xl
-                           border border-[var(--accent)]/20 bg-[var(--accent)]/6
-                           hover:bg-[var(--accent)]/10 transition-all duration-300"
-            >
-              <div className="text-right">
-                <p className="text-sm font-bold text-[var(--text)] leading-tight">
-                  {user.name}
-                </p>
-                <p className="text-[10px] text-[var(--muted)] font-medium">
-                  {user.email}
-                </p>
-              </div>
-              <div
-                className="w-9 h-9 rounded-xl bg-gradient-to-br from-[var(--accent)] to-[color-mix(in_srgb,var(--accent)_60%,#ec4899)] 
-                             flex items-center justify-center text-[var(--accent-contrast)] text-xs font-bold
-                             shadow-[0_4px_12px_-4px_var(--accent)] ring-2 ring-[var(--accent)]/20"
-              >
-                {user.name?.charAt(0).toUpperCase()}
-              </div>
-            </div>
-
-            {/* Notifications */}
+            {/* NOTIFICATIONS */}
             <div className="relative" ref={ref}>
               <button
-                onClick={() => setOpen((o) => !o)}
-                className="relative h-9 w-9 rounded-xl text-lg leading-none flex items-center justify-center
-                           hover:bg-[var(--accent)]/12 border border-transparent hover:border-[var(--border)]/60
-                           bg-transparent cursor-pointer transition-all duration-300 active:scale-90"
-                aria-label="Notifications"
+                onClick={() => setOpen(!open)}
+                className="relative h-9 w-9 flex items-center justify-center rounded-xl
+            hover:bg-[var(--accent)]/10 transition"
               >
-                🔔
+                <Bell className="w-5 h-5 text-[var(--text)]" />
                 {unread > 0 && (
-                  <span
-                    className="absolute -top-1.5 -right-1.5 min-w-[20px] h-[20px] rounded-full
-                               bg-gradient-to-br from-red-500 to-rose-600 text-white text-[10px] font-bold
-                               flex items-center justify-center px-1 notify-pulse
-                               shadow-[0_4px_12px_-2px_rgba(239,68,68,0.5)]
-                               ring-2 ring-[var(--bg)]"
-                  >
-                    {unread > 9 ? "9+" : unread}
+                  <span className="absolute -top-1 -right-1 text-[10px] bg-red-500 text-white px-1.5 rounded-full">
+                    {unread}
                   </span>
                 )}
               </button>
 
-              {/* Notifications Dropdown */}
               {open && (
                 <div
-                  className="absolute right-0 top-12 w-[360px] sm:w-96 rounded-2xl border border-[var(--border)]/60
-                             glass-heavy shadow-[0_20px_60px_-12px_rgba(0,0,0,0.3)] overflow-hidden z-[200] 
-                             animate-[scale-in_0.3s_cubic-bezier(0.16,1,0.3,1)_both]
-                             origin-top-right"
+                  className="absolute right-0 top-12 w-80 rounded-2xl bg-[var(--surface)] border border-[var(--border)]
+              shadow-xl overflow-hidden animate-[scale-in_0.2s_ease]"
                 >
-                  <div
-                    className="flex items-center justify-between px-5 py-4 border-b border-[var(--border)]/40
-                                  bg-gradient-to-r from-[var(--accent)]/8 to-transparent"
-                  >
-                    <div>
-                      <span className="text-sm font-bold text-[var(--text)]">
-                        Notifications
-                      </span>
-                      {unread > 0 && (
-                        <span className="ml-2 px-2 py-0.5 rounded-full text-[10px] font-bold bg-[var(--accent)]/15 text-[var(--accent)]">
-                          {unread} new
-                        </span>
-                      )}
-                    </div>
-                    {unread > 0 && (
-                      <button
-                        onClick={markAll}
-                        className="text-xs text-[var(--accent)] font-semibold hover:underline bg-transparent border-none cursor-pointer active:opacity-70
-                                   hover:bg-[var(--accent)]/8 px-2 py-1 rounded-lg transition-colors"
-                      >
-                        Mark all read
-                      </button>
-                    )}
+                  <div className="px-4 py-3 border-b border-[var(--border)] font-semibold text-[var(--text)]">
+                    Notifications
                   </div>
 
-                  <div className="max-h-80 overflow-y-auto">
+                  <div className="max-h-64 overflow-y-auto">
                     {notifs.length === 0 ? (
-                      <div className="px-4 py-12 text-center text-sm text-[var(--muted)]">
-                        <div className="text-4xl mb-3 opacity-40">🔔</div>
-                        <p className="font-medium">No notifications yet</p>
-                        <p className="text-xs mt-1 opacity-70">
-                          You're all caught up!
-                        </p>
-                      </div>
+                      <p className="text-sm text-[var(--muted)] p-4 text-center">
+                        No notifications
+                      </p>
                     ) : (
-                      notifs.map((n, i) => (
+                      notifs.map((n) => (
                         <div
                           key={n.id}
-                          className={`flex gap-3 px-5 py-3.5 border-b border-[var(--border)]/20 last:border-0 
-                                     transition-all duration-300 hover:bg-[var(--accent)]/6 cursor-pointer group ${
-                                       !n.read ? "bg-[var(--accent)]/6" : ""
-                                     }`}
-                          style={{ animationDelay: `${i * 30}ms` }}
+                          className="px-4 py-3 text-sm hover:bg-[var(--accent)]/5 border-b border-[var(--border)]/10 last:border-b-0"
                         >
-                          {!n.read && (
-                            <div
-                              className="w-2 h-2 rounded-full bg-[var(--accent)] mt-2 flex-shrink-0 
-                                          group-hover:scale-125 transition-transform shadow-[0_0_8px_var(--accent)]"
-                            />
-                          )}
-                          <div className="flex-1 min-w-0">
-                            <p className="text-sm text-[var(--text)] leading-snug font-medium">
-                              {n.message}
-                            </p>
-                            <p className="text-[11px] text-[var(--muted)] mt-1 font-medium">
-                              {timeAgo(n.createdAt)}
-                            </p>
-                          </div>
+                          <p className="text-[var(--text)] leading-relaxed">
+                            {n.message}
+                          </p>
+                          <p className="text-[10px] text-[var(--muted)] mt-1">
+                            {timeAgo(n.createdAt)}
+                          </p>
                         </div>
                       ))
                     )}
@@ -432,134 +376,92 @@ function Navbar({ showBack }) {
               )}
             </div>
 
-            {/* Mobile Menu Button */}
-            <button
-              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-              className="lg:hidden h-9 w-9 rounded-xl border border-[var(--border)]/50 
-                         glass flex items-center justify-center text-lg
-                         hover:bg-[var(--accent)]/12 transition-all duration-300 active:scale-90"
-              aria-label="Menu"
+            {/* USER */}
+            <div
+              className="hidden lg:flex items-center gap-3 px-4 py-2 rounded-2xl border border-[var(--border)]
+  shadow-sm hover:shadow-md hover:border-[var(--accent)]/30 transition-all duration-200"
             >
-              <div className="flex flex-col gap-1 items-center">
-                <span
-                  className={`block w-4 h-0.5 bg-[var(--text)] rounded-full transition-all duration-300 ${mobileMenuOpen ? "rotate-45 translate-y-1.5" : ""}`}
-                />
-                <span
-                  className={`block w-4 h-0.5 bg-[var(--text)] rounded-full transition-all duration-300 ${mobileMenuOpen ? "opacity-0 scale-0" : ""}`}
-                />
-                <span
-                  className={`block w-4 h-0.5 bg-[var(--text)] rounded-full transition-all duration-300 ${mobileMenuOpen ? "-rotate-45 -translate-y-1.5" : ""}`}
-                />
+              {/* Text */}
+              <div className="text-right">
+                <p className="text-sm font-bold text-[var(--text)] leading-tight">
+                  {user.name}
+                </p>
+                <p className="text-[11px] text-[var(--muted)]">{user.email}</p>
               </div>
-            </button>
 
-            {/* Logout Button - Desktop */}
+              {/* Avatar */}
+              <div
+                className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--accent)] to-green-600
+    text-white flex items-center justify-center font-bold shadow-sm"
+              >
+                {user.name?.charAt(0)}
+              </div>
+            </div>
+
             <button
               onClick={handleLogout}
-              className="hidden lg:flex px-4 py-2 rounded-xl text-sm font-semibold border border-[var(--border)]/50
-                         text-[var(--accent)] glass hover:bg-[var(--accent)]/12
-                         hover:border-[var(--accent)]/40 hover:shadow-[0_4px_16px_-4px_var(--accent)]
-                         transition-all duration-300 cursor-pointer active:scale-95 items-center gap-2"
+              className="hidden lg:block px-4 py-2 rounded-xl text-sm font-semibold border border-[var(--border)]
+          text-[var(--text)] hover:bg-[var(--accent)]/10 hover:border-[var(--accent)]/30 transition-all duration-200"
+            >
+              Logout
+            </button>
+
+            {/* MOBILE MENU */}
+            <button
+              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+              className="lg:hidden h-9 w-9 rounded-xl flex items-center justify-center border border-[var(--border)]
+          hover:bg-[var(--accent)]/10 transition-all duration-200"
             >
-              <span>Logout</span>
+              ☰
             </button>
 
-            {/* Mobile Menu Dropdown */}
             {mobileMenuOpen && (
               <div
-                ref={mobileMenuRef}
-                className="absolute right-4 top-16 w-60 rounded-2xl border border-[var(--border)]/50
-                           glass-heavy shadow-[0_20px_60px_-12px_rgba(0,0,0,0.3)] overflow-hidden z-[200]
-                           animate-[scale-in_0.3s_cubic-bezier(0.16,1,0.3,1)_both]
-                           origin-top-right lg:hidden"
+                className="absolute right-4 top-16 w-64 rounded-2xl bg-[var(--surface)] border border-[var(--border)]
+            shadow-xl p-2 animate-[scale-in_0.2s_ease]"
               >
-                <div className="p-4 border-b border-[var(--border)]/40 bg-gradient-to-r from-[var(--accent)]/8 to-transparent">
-                  <p className="text-xs font-bold text-[var(--muted)] uppercase tracking-wider mb-1">
-                    Account
-                  </p>
-                  <p className="text-sm font-bold text-[var(--text)]">
-                    {user.name}
-                  </p>
-                  <div
-                    className="inline-block mt-2 px-2.5 py-0.5 rounded-lg text-[10px] font-bold 
-                                bg-[var(--accent)]/14 text-[var(--accent)] capitalize tracking-wide"
-                  >
-                    {user.role}
-                  </div>
-                </div>
-                <div className="p-2 border-b border-[var(--border)]/30">
-                  {NAV_LINKS.map((link) => {
-                    const active = location.pathname === link.path;
-                    return (
-                      <button
-                        key={link.path}
-                        type="button"
-                        onClick={() => {
-                          navigate(link.path);
-                          setMobileMenuOpen(false);
-                        }}
-                        className={`w-full text-left px-4 py-2.5 rounded-xl text-sm font-semibold flex items-center gap-2.5
-                          transition-all duration-300 active:scale-95 border-none cursor-pointer
-                          ${
-                            active
-                              ? "bg-[var(--accent)]/15 text-[var(--accent)]"
-                              : "text-[var(--text)] hover:bg-[var(--accent)]/8"
-                          }`}
-                      >
-                        <span>{link.icon}</span>
-                        <span>{link.label}</span>
-                      </button>
-                    );
-                  })}
-                </div>
-                <div className="p-2">
+                {NAV_LINKS.map((link) => (
                   <button
-                    onClick={handleLogout}
-                    className="w-full text-left px-4 py-3 rounded-xl text-sm font-semibold
-                               text-red-500 hover:bg-red-500/10
-                               transition-all duration-300 active:scale-95 border-none bg-transparent cursor-pointer
-                               flex items-center gap-2"
+                    key={link.path}
+                    onClick={() => {
+                      navigate(link.path);
+                      setMobileMenuOpen(false);
+                    }}
+                    className="w-full text-left px-4 py-3 rounded-xl hover:bg-[var(--accent)]/10
+                text-[var(--text)] font-medium transition-all duration-200 flex items-center gap-3"
                   >
-                    <span>🚪</span> Logout
+                    <span className="text-lg">{link.icon}</span>
+                    {link.label}
                   </button>
-                </div>
+                ))}
+
+                <div className="border-t border-[var(--border)] my-2" />
+
+                <button
+                  onClick={handleLogout}
+                  className="w-full text-left px-4 py-3 text-red-500 hover:bg-red-500/10 rounded-xl
+              font-medium transition-all duration-200 flex items-center gap-3"
+                >
+                  <span>🚪</span>
+                  Logout
+                </button>
               </div>
             )}
           </>
         ) : (
-          /* GUEST / NOT AUTHENTICATED SECTION */
           <>
             <button
               onClick={() => navigate("/")}
-              className="hidden sm:flex px-4 py-2 rounded-xl text-sm font-semibold 
-                         border border-[var(--border)]/50 text-[var(--text)] glass
-                         hover:border-[var(--accent)]/40 hover:bg-[var(--accent)]/8
-                         hover:shadow-[0_4px_16px_-4px_var(--accent)]
-                         transition-all duration-300 cursor-pointer active:scale-95"
+              className="px-4 py-2 rounded-xl border"
             >
               Home
             </button>
 
-            <button
-              onClick={() => navigate("/signin")}
-              className="hidden sm:flex px-4 py-2 rounded-xl text-sm font-semibold 
-                         border border-[var(--accent)]/50 text-[var(--accent)] glass
-                         hover:border-[var(--accent)] hover:bg-[var(--accent)]/15
-                         hover:shadow-[0_4px_16px_-4px_var(--accent)]
-                         transition-all duration-300 cursor-pointer active:scale-95
-                         items-center gap-2"
-            >
-              Sign In
-            </button>
-
             <button
               onClick={() => navigate("/signup")}
-              className="px-4 py-2 rounded-xl text-sm font-bold border-none
-                         text-[var(--accent-contrast)] sc-btn-glow
-                         cursor-pointer active:scale-95"
+              className="px-4 py-2 rounded-xl bg-[var(--accent)] text-white font-semibold"
             >
-              <span className="hidden xs:inline">Sign Up</span>
-              <span className="xs:hidden">Join</span>
+              Sign Up
             </button>
           </>
         )}
diff --git a/client/src/pages/CourseView.jsx b/client/src/pages/CourseView.jsx
index 9524089..8e04f4c 100644
--- a/client/src/pages/CourseView.jsx
+++ b/client/src/pages/CourseView.jsx
@@ -167,7 +167,16 @@ function CourseView() {
     loadLiveClasses();
     loadStudents();
     loadProgress();
-  }, [id]);
+  }, [
+    id,
+    loadCourse,
+    loadMaterials,
+    loadAssignments,
+    loadQuizzes,
+    loadLiveClasses,
+    loadStudents,
+    loadProgress,
+  ]);
 
   // Keep ref in sync so async socket handlers can read latest expanded state
   useEffect(() => {
@@ -583,11 +592,15 @@ function CourseView() {
   };
 
   return (
+<<<<<<< HEAD
+    <div className="min-h-screen bg-[var(--bg)] text-[var(--text)] flex flex-col">
+=======
     <div className="min-h-screen bg-[var(--bg)] text-[var(--text)] flex flex-col transition-colors duration-300">
+>>>>>>> 42795c9a6a2ed72e942e6619110abc54bb76c281
       <Navbar showBack />
 
-      <div className="flex-1 w-full max-w-7xl mx-auto px-4 sm:px-6 py-6">
-        {/* Course Header Banner */}
+      <div className="flex-1 w-full max-w-7xl mx-auto px-4 sm:px-6 py-8 space-y-6">
+        {/* Header */}
         <CourseHeader
           course={course}
           materials={materials}
@@ -598,6 +611,17 @@ function CourseView() {
           matProgress={matProgress}
         />
 
+<<<<<<< HEAD
+        {/* Layout */}
+        <div className="flex gap-6 items-start">
+          {/* ── SIDEBAR ── */}
+          <aside className="hidden md:flex flex-col w-64 shrink-0 sticky top-6 self-start">
+            <div className="rounded-2xl border border-[var(--border)]/15 bg-[var(--surface)]/80 backdrop-blur-xl shadow-[0_10px_40px_-15px_rgba(0,0,0,0.25)] overflow-hidden">
+              {/* Header */}
+              <div className="px-5 py-5 border-b border-[var(--border)]/15 bg-[var(--bg)]/60 backdrop-blur-md">
+                <p className="text-[10px] uppercase tracking-widest text-[var(--muted)] font-medium mb-1">
+                  Course
+=======
         {/* Two-column layout: Left Sidebar + Content */}
         <div className="flex gap-5 items-start">
           {/* ── LEFT SIDEBAR ── */}
@@ -612,21 +636,40 @@ function CourseView() {
               <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
+>>>>>>> 42795c9a6a2ed72e942e6619110abc54bb76c281
                 </p>
                 <p className="text-sm font-semibold text-[var(--text)] truncate">
                   {course.title}
                 </p>
               </div>
 
-              {/* Tab buttons */}
-              <div className="p-2">
+              {/* Tabs */}
+              <div className="p-2.5 space-y-1.5">
                 {tabs.map((t) => {
                   const meta = TAB_META[t];
                   const isActive = tab === t;
+
                   return (
                     <button
                       key={t}
                       onClick={() => navigate(`/course/${id}/${t}`)}
+<<<<<<< HEAD
+                      className={`group w-full flex items-center gap-3 px-3.5 py-2.5 rounded-xl text-sm transition-all duration-200
+            ${
+              isActive
+                ? "bg-[var(--accent)]/12 text-[var(--accent)] border border-[var(--accent)]/20"
+                : "text-[var(--muted)] hover:text-[var(--text)] hover:bg-[var(--border)]/10"
+            }`}
+                    >
+                      {/* Icon */}
+                      <span
+                        className={`w-8 h-8 flex items-center justify-center rounded-lg text-sm transition-all
+              ${
+                isActive
+                  ? "bg-[var(--accent)]/20 text-[var(--accent)]"
+                  : "bg-[var(--border)]/10 group-hover:bg-[var(--border)]/20"
+              }`}
+=======
                       className={`group w-full flex items-center gap-3 px-3 py-3 rounded-xl
 text-sm font-semibold transition-all duration-200 cursor-pointer mb-1 relative overflow-hidden border-none
 ${
@@ -648,23 +691,33 @@ ${
       ? "bg-[var(--accent)]/20"
       : "bg-[var(--surface-elevated)] group-hover:bg-[var(--border)]"
   }`}
+>>>>>>> 42795c9a6a2ed72e942e6619110abc54bb76c281
                       >
                         {meta.icon}
                       </span>
 
                       {/* Label */}
-                      <span className="relative flex-1 text-left text-xs font-bold truncate">
+                      <span className="flex-1 text-left text-xs font-medium truncate">
                         {meta.label}
                       </span>
 
-                      {/* Count badge */}
+                      {/* Count */}
                       <span
+<<<<<<< HEAD
+                        className={`text-[10px] font-medium px-2 py-[2px] rounded-md transition-all
+              ${
+                isActive
+                  ? "bg-[var(--accent)]/20 text-[var(--accent)]"
+                  : "bg-[var(--border)]/20 text-[var(--muted)] group-hover:bg-[var(--border)]/30"
+              }`}
+=======
                         className={`relative text-[10px] font-black px-2 py-0.5 rounded-lg shrink-0 transition-all duration-200
                                         ${
                                           isActive
                                             ? "bg-[var(--accent)]/20 text-[var(--accent)]"
                                             : "bg-[var(--border)] text-[var(--muted)]"
                                         }`}
+>>>>>>> 42795c9a6a2ed72e942e6619110abc54bb76c281
                       >
                         {tabCount[t]}
                       </span>
@@ -672,6 +725,8 @@ ${
                   );
                 })}
               </div>
+<<<<<<< HEAD
+=======
 
               {/* Progress strip for students */}
               {!isTeacher && materials.length > 0 && (
@@ -740,33 +795,32 @@ ${
                   </div>
                 </div>
               )}
+>>>>>>> 42795c9a6a2ed72e942e6619110abc54bb76c281
             </div>
           </aside>
 
           {/* ── MAIN CONTENT ── */}
           <div className="flex-1 min-w-0 space-y-5">
-            {/* Mobile tab selector */}
-            <div className="flex gap-2 overflow-x-auto pb-2 mb-4 md:hidden scrollbar-hide">
+            {/* Mobile Tabs */}
+            <div className="flex gap-2 overflow-x-auto pb-2 md:hidden">
               {tabs.map((t) => {
                 const meta = TAB_META[t];
                 const isActive = tab === t;
+
                 return (
                   <button
                     key={t}
                     onClick={() => navigate(`/course/${id}/${t}`)}
-                    className={`flex items-center gap-1.5 px-3 py-2 rounded-xl whitespace-nowrap
-                                text-xs font-bold transition-all duration-200 cursor-pointer shrink-0
-                                ${
-                                  isActive
-                                    ? "bg-[var(--accent)]/15 text-[var(--accent)] border border-[var(--accent)]/20"
-                                    : "glass border border-[var(--border)]/20 text-[var(--muted)] hover:text-[var(--text)]"
-                                }`}
+                    className={`flex items-center gap-1.5 px-3 py-2 rounded-2xl text-xs font-semibold whitespace-nowrap transition-all duration-200
+                  ${
+                    isActive
+                      ? "bg-[var(--accent)]/15 text-[var(--accent)] border border-[var(--accent)]/20"
+                      : "text-[var(--muted)] border border-[var(--border)]/20 hover:bg-[var(--border)]/10"
+                  }`}
                   >
-                    <span>{meta.icon}</span>
-                    <span>{meta.label}</span>
-                    <span
-                      className={`text-[9px] font-black px-1 py-0.5 rounded ${isActive ? "bg-[var(--accent)]/20 text-[var(--accent)]" : "bg-[var(--border)]/20 text-[var(--muted)]"}`}
-                    >
+                    {meta.icon}
+                    {meta.label}
+                    <span className="text-[9px] px-1 rounded bg-[var(--border)]/20">
                       {tabCount[t]}
                     </span>
                   </button>
@@ -774,9 +828,15 @@ ${
               })}
             </div>
 
+<<<<<<< HEAD
+            {/* Content */}
+            <div className="rounded-[2rem] border border-[var(--border)]/20 bg-[var(--surface)] p-6 shadow-[0_24px_64px_-40px_rgba(15,23,42,0.45)]">
+              <div key={tab} className="animate-[fadeIn_0.25s_ease]">
+=======
             {/* Tab content */}
             <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}>
+>>>>>>> 42795c9a6a2ed72e942e6619110abc54bb76c281
                 {tab === "materials" && (
                   <MaterialsTab
                     materials={materials}
@@ -787,6 +847,7 @@ ${
                     onAddClick={() => setModal("material")}
                   />
                 )}
+
                 {tab === "assignments" && (
                   <AssignmentsTab
                     assignments={assignments}
@@ -807,6 +868,7 @@ ${
                     onAddClick={() => setModal("assignment")}
                   />
                 )}
+
                 {tab === "quizzes" && (
                   <QuizzesTab
                     quizzes={quizzes}
@@ -815,6 +877,7 @@ ${
                     onAddClick={() => setModal("quiz")}
                   />
                 )}
+
                 {tab === "live-classes" && (
                   <LiveClassesTab
                     liveClasses={liveClasses}
@@ -825,6 +888,7 @@ ${
                     onAddClick={() => setModal("live-class")}
                   />
                 )}
+
                 {tab === "students" && isTeacher && (
                   <StudentsTab students={students} />
                 )}
@@ -836,6 +900,7 @@ ${
 
       <Footer />
 
+      {/* Modals untouched */}
       <GradeModal
         isOpen={!!gradingSubId}
         gradeForm={gradeForm}
diff --git a/client/src/pages/LiveClassRoom.jsx b/client/src/pages/LiveClassRoom.jsx
index 355b87a..203486e 100644
--- a/client/src/pages/LiveClassRoom.jsx
+++ b/client/src/pages/LiveClassRoom.jsx
@@ -135,8 +135,12 @@ export default function LiveClassRoom() {
   const [chatOpen, setChatOpen] = useState(true);
   const [panelTab, setPanelTab] = useState("chat");
   const [commentText, setCommentText] = useState("");
+<<<<<<< HEAD
+  const [replyTo, setReplyTo] = useState(null); // { id, userName }
+=======
   const [replyTo, setReplyTo] = useState(null);
   const [questionText, setQuestionText] = useState("");
+>>>>>>> 42795c9a6a2ed72e942e6619110abc54bb76c281
   const chatEndRef = useRef(null);
 
   // ── presence state ──────────────────────────────────────────────────────────
@@ -353,7 +357,7 @@ export default function LiveClassRoom() {
     } catch {
       /* user cancelled */
     }
-  }, [id, socket]);
+  }, [id, socket, stopScreenShare]);
 
   const stopScreenShare = useCallback(() => {
     screenStreamRef.current?.getTracks().forEach((t) => t.stop());
@@ -547,6 +551,9 @@ export default function LiveClassRoom() {
     [id, user.id, commentText, replyTo],
   );
 
+<<<<<<< HEAD
+  // Mount pending screen stream once remoteScreenRef is available
+=======
   const postQuestion = useCallback(
     async (e) => {
       e.preventDefault();
@@ -576,6 +583,7 @@ export default function LiveClassRoom() {
   );
 
   // Mount pending screen stream once ref is available
+>>>>>>> 42795c9a6a2ed72e942e6619110abc54bb76c281
   useEffect(() => {
     if (
       teacherHasScreen &&
@@ -839,7 +847,22 @@ export default function LiveClassRoom() {
         ["recording-available", onRecordingAvailable],
       ].forEach(([ev, fn]) => socket.off(ev, fn));
     };
+<<<<<<< HEAD
+  }, [
+    id,
+    isTeacher,
+    loadClass,
+    loadComments,
+    loadQuestions,
+    makePeerForViewer,
+    navigate,
+    showReaction,
+    socket,
+    user.id,
+  ]);
+=======
   }, [id, isTeacher]); // eslint-disable-line react-hooks/exhaustive-deps
+>>>>>>> 42795c9a6a2ed72e942e6619110abc54bb76c281
 
   // ─── derived ──────────────────────────────────────────────────────────────
   const topLevel = comments.filter((c) => !c.parentComment);
@@ -1363,6 +1386,140 @@ export default function LiveClassRoom() {
           </div>
         </div>
 
+<<<<<<< HEAD
+        {/* ═══ SIDEBAR PANEL ════════════════════════════════════════════════════ */}
+        <aside className="w-80 flex flex-col shrink-0 border-l border-[var(--border)]/15 bg-[var(--surface)]/80 backdrop-blur-xl">
+          {/* Tabs */}
+          <div className="p-2 border-b border-[var(--border)]/15">
+            <div className="flex bg-[var(--border)]/10 rounded-xl p-1">
+              {[
+                { key: "chat", label: "💬 Chat", badge: comments.length },
+                {
+                  key: "qa",
+                  label: "❓ Q&A",
+                  badge: questions.filter((q) => !q.isAnswered).length,
+                },
+                { key: "people", label: "👥", badge: handCount || null },
+              ].map(({ key, label, badge }) => (
+                <button
+                  key={key}
+                  onClick={() => setPanelTab(key)}
+                  className={`flex-1 flex items-center justify-center gap-1 py-2 rounded-lg text-[11px] font-medium transition-all
+          ${
+            panelTab === key
+              ? "bg-[var(--surface)] shadow-sm text-[var(--text)]"
+              : "text-[var(--muted)] hover:text-[var(--text)]"
+          }`}
+                >
+                  {label}
+                  {badge > 0 && (
+                    <span className="text-[9px] px-1.5 rounded bg-[var(--border)]/20">
+                      {badge}
+                    </span>
+                  )}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* ── CHAT ── */}
+          {panelTab === "chat" && (
+            <>
+              <div className="flex-1 overflow-y-auto px-3 py-4 space-y-4">
+                {topLevel.length === 0 && (
+                  <div className="h-full flex flex-col items-center justify-center opacity-40">
+                    <span className="text-3xl">💬</span>
+                    <p className="text-xs text-[var(--muted)] mt-2">
+                      No messages yet
+                    </p>
+                  </div>
+                )}
+
+                {topLevel.map((c) => {
+                  const replies = getReplies(c.id);
+
+                  return (
+                    <div key={c.id} className="space-y-2">
+                      <div className="flex gap-2">
+                        <Avatar name={c.user?.name || "?"} />
+
+                        <div className="flex-1">
+                          {/* Header */}
+                          <div className="flex items-center gap-2 text-[11px]">
+                            <span className="font-semibold text-[var(--text)]">
+                              {c.user?.name}
+                            </span>
+
+                            {c.isTeacherReply && (
+                              <span className="px-1.5 py-[2px] text-[9px] rounded bg-[var(--accent)]/15 text-[var(--accent)]">
+                                Teacher
+                              </span>
+                            )}
+
+                            <span className="text-[var(--muted)]/50">
+                              {timeAgo(c.createdAt)}
+                            </span>
+                          </div>
+
+                          {/* Message bubble */}
+                          <div className="mt-1 px-3 py-2 rounded-xl bg-[var(--border)]/10 text-[13px] text-[var(--text)]/90 leading-snug">
+                            {c.text}
+                          </div>
+
+                          <button
+                            onClick={() =>
+                              setReplyTo(
+                                replyTo?.id === c.id
+                                  ? null
+                                  : { id: c.id, userName: c.user?.name },
+                              )
+                            }
+                            className="mt-1 text-[10px] text-[var(--muted)] hover:text-[var(--accent)]"
+                          >
+                            Reply
+                          </button>
+                        </div>
+                      </div>
+
+                      {/* Replies */}
+                      {replies.length > 0 && (
+                        <div className="ml-8 space-y-2 border-l border-[var(--border)]/20 pl-3">
+                          {replies.map((r) => (
+                            <div key={r.id} className="flex gap-2">
+                              <Avatar name={r.user?.name || "?"} />
+                              <div className="flex-1">
+                                <p className="text-[11px] font-medium">
+                                  {r.user?.name}
+                                </p>
+                                <div className="mt-1 px-3 py-2 rounded-lg bg-[var(--border)]/8 text-[12px]">
+                                  {r.text}
+                                </div>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+
+              {/* Input */}
+              <form
+                onSubmit={postComment}
+                className="p-3 border-t border-[var(--border)]/15 flex gap-2"
+              >
+                <input
+                  value={commentText}
+                  onChange={(e) => setCommentText(e.target.value)}
+                  placeholder="Send a message…"
+                  className="flex-1 px-3 py-2 rounded-xl text-sm border border-[var(--border)]/25 bg-transparent focus:border-[var(--accent)] outline-none"
+                />
+                <button
+                  type="submit"
+                  disabled={!commentText.trim()}
+                  className="w-9 h-9 rounded-xl bg-[var(--accent)] text-white flex items-center justify-center disabled:opacity-40"
+=======
         {/* ═ CHAT / Q&A / PEOPLE SIDEBAR ════════════════════════════════════ */}
         {chatOpen && (
           <aside className="w-80 flex flex-col border-l border-white/8 bg-[#1c1c1e] shrink-0">
@@ -1382,6 +1539,7 @@ export default function LiveClassRoom() {
                         ? "text-violet-300 border-b-2 border-violet-400"
                         : "text-white/35 hover:text-white/70"
                     }`}
+>>>>>>> 42795c9a6a2ed72e942e6619110abc54bb76c281
                 >
                   {label}
                   {badge > 0 && (
@@ -1393,6 +1551,46 @@ export default function LiveClassRoom() {
               ))}
             </div>
 
+<<<<<<< HEAD
+          {/* ── Q&A ── */}
+          {panelTab === "qa" && (
+            <div className="flex-1 overflow-y-auto p-4 space-y-3">
+              {questions.map((q) => (
+                <div
+                  key={q.id}
+                  className={`p-4 rounded-xl border ${
+                    q.isAnswered
+                      ? "bg-emerald-500/10 border-emerald-500/20"
+                      : "bg-[var(--border)]/10 border-[var(--border)]/15"
+                  }`}
+                >
+                  <p className="text-[13px] font-medium">{q.question}</p>
+
+                  {q.isAnswered && (
+                    <span className="text-[10px] text-emerald-400 mt-1 inline-block">
+                      Answered
+                    </span>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* ── PEOPLE ── */}
+          {panelTab === "people" && (
+            <div className="flex-1 overflow-y-auto p-4 space-y-6">
+              {/* Host */}
+              <div>
+                <p className="text-[10px] uppercase text-[var(--muted)] mb-2">
+                  Host
+                </p>
+
+                <div className="flex items-center gap-3 p-3 rounded-xl bg-[var(--border)]/10 border border-[var(--border)]/15">
+                  <Avatar name={liveClass.teacher?.name || "T"} />
+                  <p className="text-[13px] font-semibold">
+                    {liveClass.teacher?.name}
+                  </p>
+=======
             {/* ─ Chat ─────────────────────────────────────────────────────── */}
             {panelTab === "chat" && (
               <>
@@ -1654,8 +1852,20 @@ export default function LiveClassRoom() {
                       </div>
                     </div>
                   </div>
+>>>>>>> 42795c9a6a2ed72e942e6619110abc54bb76c281
                 </div>
 
+<<<<<<< HEAD
+              {/* Participants */}
+              <div>
+                <p className="text-[10px] uppercase text-[var(--muted)] mb-2">
+                  Participants · {participantCount}
+                </p>
+
+                <p className="text-[12px] text-[var(--muted)]">
+                  {participantCount} people joined
+                </p>
+=======
                 {/* Raised hands */}
                 {handCount > 0 && (
                   <div>
@@ -1751,6 +1961,7 @@ export default function LiveClassRoom() {
                     </a>
                   )}
                 </div>
+>>>>>>> 42795c9a6a2ed72e942e6619110abc54bb76c281
               </div>
             )}
           </aside>
diff --git a/client/src/pages/StudentDashboard.jsx b/client/src/pages/StudentDashboard.jsx
index 84d2a16..06b73a4 100644
--- a/client/src/pages/StudentDashboard.jsx
+++ b/client/src/pages/StudentDashboard.jsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 import { useAuth } from "../context/AuthContext";
 import { apiFetch } from "../utils/api.js";
@@ -7,6 +7,9 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
+import { GraduationCap } from "lucide-react";
+import { Brain, ClipboardList, Clock, Calendar, FileText } from "lucide-react";
+import { BookOpen, Video } from "lucide-react";
 import {
   LineChart,
   Line,
@@ -22,6 +25,14 @@ import {
   Legend,
   ResponsiveContainer,
 } from "recharts";
+import {
+  MessageCircle,
+  CalendarDays,
+  Lightbulb,
+  BarChart3,
+  BrainCircuit,
+  Sparkles,
+} from "lucide-react";
 
 function SdAiMarkdown({ text }) {
   return (
@@ -203,10 +214,37 @@ function StudentDashboard() {
   const [perfContext, setPerfContext] = useState(null); // real performance data from DB
 
   const openAiModal = (type) => {
+    if (!user?.id) return;
+
     setAiModal(type);
     setAiResult(null);
     setAiError("");
     setPlanSaved(false);
+
+    if (type === "chat") {
+      setChatInput("");
+      setAiError("");
+    }
+
+    if (type === "explain") {
+      setExplainForm((f) => ({
+        ...f,
+        concept: f.concept || "",
+        difficulty_level: f.difficulty_level || "intermediate",
+        course_context: f.course_context || "",
+      }));
+    }
+
+    if (type === "performance") {
+      setPerfForm((f) => ({
+        ...f,
+        subject: f.subject || "",
+        quiz_scores: f.quiz_scores || "",
+        assignment_grades: f.assignment_grades || "",
+        course_progress: f.course_progress || 0,
+      }));
+    }
+
     if (type === "plan") {
       setPlanForm((f) => ({
         ...f,
@@ -243,6 +281,17 @@ function StudentDashboard() {
     setPlanSaved(false);
   };
 
+  useEffect(() => {
+    if (aiModal) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [aiModal]);
+
   async function aiPost(path, body, method = "POST") {
     const res = await apiFetch(`/api/ai${path}`, {
       method,
@@ -542,7 +591,7 @@ function StudentDashboard() {
     }
   };
 
-  const load = async () => {
+  const load = useCallback(async () => {
     try {
       setLoading(true);
       const dashResponse = await apiFetch(`/api/students/${user.id}/dashboard`);
@@ -565,7 +614,7 @@ function StudentDashboard() {
     } finally {
       setLoading(false);
     }
-  };
+  }, [user?.id]);
 
   useEffect(() => {
     if (user?.id) {
@@ -580,7 +629,7 @@ function StudentDashboard() {
         socket.off("dashboard-update");
       };
     }
-  }, [user?.id]);
+  }, [load]);
 
   const enroll = async (courseId) => {
     setEnrollingId(courseId);
@@ -629,36 +678,28 @@ function StudentDashboard() {
 
   const stats = [
     {
-      icon: "📚",
+      icon: BookOpen,
       val: dashData.totalEnrolled ?? enrolled.length,
       label: "Enrolled",
-      color: "from-blue-500 to-blue-600",
-      bg: "from-blue-500/15 to-blue-600/5",
     },
     {
-      icon: "📋",
+      icon: ClipboardList,
       val: dashData.pendingAssignments ?? 0,
       label: "Pending",
-      color: "from-amber-500 to-amber-600",
-      bg: "from-amber-500/15 to-amber-600/5",
     },
     {
-      icon: "🧠",
+      icon: Brain,
       val: dashData.completedQuizzes ?? 0,
       label: "Quizzes Done",
-      color: "from-purple-500 to-purple-600",
-      bg: "from-purple-500/15 to-purple-600/5",
     },
     {
-      icon: "📹",
+      icon: Video,
       val: dashData.upcomingClasses?.length ?? 0,
       label: "Upcoming",
-      color: "from-emerald-500 to-emerald-600",
-      bg: "from-emerald-500/15 to-emerald-600/5",
     },
   ];
 
-  const chartColors = ["#818cf8", "#a78bfa", "#f472b6", "#fbbf24", "#34d399"];
+  const chartColors = ["#7cff6b", "#a78bfa", "#f472b6", "#fbbf24", "#34d399"];
 
   const tooltipStyle = {
     backgroundColor: "var(--surface)",
@@ -671,15 +712,17 @@ function StudentDashboard() {
 
   return (
     <div className="min-h-screen bg-[var(--bg)] text-[var(--text)] flex flex-col relative overflow-hidden">
+      <div className="absolute inset-0 -z-10">
+        <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_20%_20%,#7c3aed33,transparent_40%)]" />
+        <div className="absolute bottom-0 right-0 w-full h-full bg-[radial-gradient(circle_at_80%_80%,#22c55e33,transparent_40%)]" />
+      </div>
       <Navbar />
 
       <div className="flex-1 max-w-7xl mx-auto w-full px-4 sm:px-6 py-8 relative z-10">
         {/* Header */}
         <div className="mb-12 animate-[slide-down_0.6s_cubic-bezier(0.16,1,0.3,1)_both]">
           <div className="flex items-center gap-5 mb-2">
-            <div className="text-5xl sm:text-6xl drop-shadow-lg animate-float">
-              👋
-            </div>
+            <GraduationCap className="w-12 h-12 text-[var(--accent)] animate-float" />
             <div>
               <h1 className="text-3xl sm:text-5xl font-extrabold tracking-tight text-[var(--text)] sc-title">
                 Welcome back,{" "}
@@ -697,33 +740,56 @@ function StudentDashboard() {
         </div>
 
         {/* Stats Grid */}
-        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-12">
-          {stats.map((s, i) => (
-            <div
-              key={s.label}
-              className={`group sc-card-premium glass rounded-2xl p-6 bg-gradient-to-br ${s.bg}
-                         animate-[slide-up_0.5s_cubic-bezier(0.16,1,0.3,1)_both]`}
-              style={{ animationDelay: `${i * 80}ms` }}
-            >
-              <div
-                className={`w-12 h-12 rounded-xl flex items-center justify-center text-2xl mb-4
-                              bg-gradient-to-br ${s.color} shadow-lg
-                              group-hover:scale-110 group-hover:rotate-[-5deg] transition-all duration-500`}
-              >
-                <span className="brightness-0 invert">{s.icon}</span>
-              </div>
-              <div
-                className="text-4xl font-extrabold text-[var(--text)] mb-1 tracking-tighter font-[var(--font-mono)]
-                              animate-[count-up_0.8s_cubic-bezier(0.16,1,0.3,1)_both]"
-                style={{ animationDelay: `${200 + i * 100}ms` }}
-              >
-                {s.val}
-              </div>
-              <p className="text-[10px] font-bold text-[var(--muted)] uppercase tracking-wider">
-                {s.label}
-              </p>
-            </div>
-          ))}
+        <div className="relative flex flex-col gap-8 mb-12">
+          {/* Top Divider */}
+          <div className="h-[1px] w-full bg-gradient-to-r from-transparent via-green-400 to-transparent opacity-40" />
+
+          {/* Stats Cards */}
+          <div className="flex flex-wrap justify-center gap-8">
+            {stats.map((s) => {
+              const Icon = s.icon;
+
+              return (
+                <div
+                  key={s.label}
+                  className="
+            group relative w-[240px] h-[160px]
+            rounded-2xl
+            bg-white
+            border border-green-100
+            shadow-md
+            hover:shadow-xl
+            transition-all duration-300
+            hover:-translate-y-1
+          "
+                >
+                  {/* Soft Hover Glow */}
+                  <div className="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition duration-300">
+                    <div className="absolute inset-0 bg-green-100/40" />
+                  </div>
+
+                  {/* Content */}
+                  <div className="relative z-10 flex flex-col items-center justify-center h-full gap-4 text-center px-4">
+                    {/* Icon */}
+                    <div className="p-3 rounded-xl bg-green-50 group-hover:bg-green-100 transition">
+                      <Icon className="w-7 h-7 text-green-600" />
+                    </div>
+
+                    {/* Value */}
+                    <p className="text-3xl font-bold text-gray-800">{s.val}</p>
+
+                    {/* Label */}
+                    <p className="text-sm text-gray-500 font-medium">
+                      {s.label}
+                    </p>
+                  </div>
+
+                  {/* Bottom Accent Line */}
+                  <div className="absolute bottom-0 left-0 w-0 h-[3px] bg-green-500 group-hover:w-full transition-all duration-300 rounded-b-2xl" />
+                </div>
+              );
+            })}
+          </div>
         </div>
 
         {/* AI Assistant Section */}
@@ -732,117 +798,158 @@ function StudentDashboard() {
           style={{ animationDelay: "120ms" }}
         >
           <h2 className="text-2xl font-extrabold text-[var(--text)] mb-5 flex items-center gap-3 sc-title">
-            <span className="w-10 h-10 rounded-xl bg-violet-500/15 flex items-center justify-center text-xl">
-              🤖
-            </span>
+            <div className="w-10 h-10 rounded-xl bg-[var(--accent)]/15 flex items-center justify-center">
+              <BrainCircuit className="w-5 h-5 text-[var(--accent)]" />
+            </div>
             AI Assistant
           </h2>
-          <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
-            {[
-              {
-                icon: "💬",
-                label: "AI Chat",
-                desc: "Ask anything educational",
-                type: "chat",
-                color: "from-blue-500/15 to-blue-600/5",
-              },
-              {
-                icon: "📅",
-                label: "Study Plan",
-                desc: "Personalized weekly schedule",
-                type: "plan",
-                color: "from-emerald-500/15 to-emerald-600/5",
-              },
-              {
-                icon: "💡",
-                label: "Explain",
-                desc: "Understand any concept",
-                type: "explain",
-                color: "from-amber-500/15 to-amber-600/5",
-              },
-              {
-                icon: "📊",
-                label: "Performance",
-                desc: "Analyze your scores",
-                type: "performance",
-                color: "from-purple-500/15 to-purple-600/5",
-              },
-            ].map((tool) => (
-              <button
-                key={tool.type}
-                onClick={() => openAiModal(tool.type)}
-                className={`group sc-card-premium glass rounded-2xl p-4 text-left bg-gradient-to-br ${tool.color} hover-lift active:scale-95 transition-all duration-300 border border-[var(--border)]/30 hover:border-[var(--accent)]/30`}
-              >
-                <div className="text-2xl mb-2">{tool.icon}</div>
-                <p className="text-sm font-extrabold text-[var(--text)] mb-0.5">
-                  {tool.label}
-                </p>
-                <p className="text-[10px] text-[var(--muted)] font-medium leading-snug">
-                  {tool.desc}
-                </p>
-              </button>
-            ))}
+          <div className="relative flex flex-col gap-8">
+            {/* Top Divider */}
+            <div className="h-[1px] w-full bg-gradient-to-r from-transparent via-green-400 to-transparent opacity-40" />
+
+            {/* AI Tools */}
+            <div className="flex flex-wrap justify-center gap-8">
+              {[
+                {
+                  icon: MessageCircle,
+                  label: "AI Chat",
+                  desc: "Ask anything instantly",
+                  type: "chat",
+                },
+                {
+                  icon: CalendarDays,
+                  label: "Study Plan",
+                  desc: "Smart weekly planner",
+                  type: "plan",
+                },
+                {
+                  icon: Lightbulb,
+                  label: "Explain",
+                  desc: "Break down concepts",
+                  type: "explain",
+                },
+                {
+                  icon: BarChart3,
+                  label: "Performance",
+                  desc: "Analyze progress",
+                  type: "performance",
+                },
+              ].map((tool) => {
+                const Icon = tool.icon;
+
+                return (
+                  <button
+                    key={tool.type}
+                    onClick={() => openAiModal(tool.type)}
+                    className="
+            group relative w-[240px] h-[160px]
+            rounded-2xl
+            bg-white
+            border border-green-100
+            shadow-md
+            hover:shadow-xl
+            transition-all duration-300
+            hover:-translate-y-1
+          "
+                  >
+                    {/* Soft Hover Glow */}
+                    <div className="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition duration-300">
+                      <div className="absolute inset-0 bg-green-100/40" />
+                    </div>
+
+                    {/* Content */}
+                    <div className="relative z-10 flex flex-col items-center justify-center h-full gap-4 text-center px-4">
+                      {/* Icon */}
+                      <div className="p-4 rounded-xl bg-green-50 group-hover:bg-green-100 transition">
+                        <Icon className="w-7 h-7 text-green-600" />
+                      </div>
+
+                      {/* Title */}
+                      <p className="text-base font-semibold text-gray-800">
+                        {tool.label}
+                      </p>
+
+                      {/* Description */}
+                      <p className="text-sm text-gray-500">{tool.desc}</p>
+                    </div>
+
+                    {/* Bottom Accent Line */}
+                    <div className="absolute bottom-0 left-0 w-0 h-[3px] bg-green-500 group-hover:w-full transition-all duration-300 rounded-b-2xl" />
+                  </button>
+                );
+              })}
+            </div>
           </div>
         </div>
 
         {/* ── Active Quizzes ── */}
-        <div
-          className="mb-12 animate-[slide-up_0.5s_cubic-bezier(0.16,1,0.3,1)_both]"
-          style={{ animationDelay: "140ms" }}
-        >
-          <h2 className="text-2xl font-extrabold text-[var(--text)] mb-5 flex items-center gap-3 sc-title">
-            <span className="w-10 h-10 rounded-xl bg-pink-500/15 flex items-center justify-center text-xl">
-              🧠
-            </span>
-            Active Quizzes
-          </h2>
+        <div className="mb-14">
+          {/* Header */}
+          <div className="flex items-center justify-between mb-6">
+            <h2 className="text-2xl font-bold flex items-center gap-3 text-[var(--text)]">
+              <div className="p-2 rounded-xl bg-[var(--accent)]/15 ">
+                <Brain className="w-6 h-6 text-[var(--accent)]" />
+              </div>
+              Active Quizzes
+            </h2>
+          </div>
+
           {quizzesLoading ? (
             <div className="flex items-center gap-3 text-[var(--muted)] text-sm py-6">
-              <span className="w-5 h-5 border-2 border-current/30 border-t-current rounded-full animate-spin" />
+              <span className="w-5 h-5 border-2 border-gray-300 border-t-green-500 rounded-full animate-spin" />
               Loading quizzes…
             </div>
           ) : activeQuizzes.length === 0 ? (
-            <div className="sc-card-premium glass rounded-2xl p-8 text-center">
-              <div className="text-4xl mb-3">🎯</div>
-              <p className="text-sm font-semibold text-[var(--muted)]">
-                No active quizzes right now. Check back later!
+            <div className="bg-white border border-green-100 rounded-2xl p-10 text-center shadow-sm">
+              <Brain className="w-10 h-10 text-green-400 mx-auto mb-3" />
+              <p className="text-gray-500 font-medium">
+                No active quizzes right now
               </p>
             </div>
           ) : (
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
               {activeQuizzes.map((q) => (
                 <div
                   key={q.id}
-                  className="sc-card-premium glass rounded-2xl p-5 flex flex-col gap-3 border border-[var(--border)]/30 hover:border-[var(--accent)]/30 transition-all hover-lift"
+                  className="group bg-white border border-green-100 rounded-2xl p-6 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1 flex flex-col justify-between"
                 >
-                  <div className="flex items-start justify-between gap-2">
-                    <div className="flex-1 min-w-0">
-                      <p className="font-extrabold text-[var(--text)] truncate">
-                        {q.title}
-                      </p>
-                      <p className="text-xs text-[var(--muted)] mt-0.5">
-                        📚 {q.courseTitle}
-                      </p>
-                    </div>
-                    <span className="px-2.5 py-1 rounded-lg bg-pink-500/15 text-pink-400 text-[10px] font-bold border border-pink-500/20 shrink-0">
-                      {q.questionCount ?? q.questions?.length ?? 0}Q
-                    </span>
-                  </div>
-                  <div className="flex items-center justify-between text-xs text-[var(--muted)]">
-                    <span>
-                      {q.timeLimit ? `⏱ ${q.timeLimit} min` : "No time limit"}
-                    </span>
-                    {q.dueDate && (
-                      <span>
-                        Due: {new Date(q.dueDate).toLocaleDateString()}
+                  {/* Top */}
+                  <div>
+                    <p className="font-semibold text-gray-800 text-lg mb-1 line-clamp-1">
+                      {q.title}
+                    </p>
+
+                    <p className="text-xs text-gray-500 mb-4">
+                      {q.courseTitle}
+                    </p>
+
+                    {/* Meta */}
+                    <div className="flex flex-wrap gap-3 text-xs text-gray-500">
+                      <span className="flex items-center gap-1">
+                        <FileText className="w-4 h-4" />
+                        {q.questionCount ?? q.questions?.length ?? 0} Q
                       </span>
-                    )}
+
+                      <span className="flex items-center gap-1">
+                        <Clock className="w-4 h-4" />
+                        {q.timeLimit ? `${q.timeLimit} min` : "No limit"}
+                      </span>
+
+                      {q.dueDate && (
+                        <span className="flex items-center gap-1">
+                          <Calendar className="w-4 h-4" />
+                          {new Date(q.dueDate).toLocaleDateString()}
+                        </span>
+                      )}
+                    </div>
                   </div>
+
+                  {/* Button */}
                   <button
                     onClick={() => startQuiz(q)}
-                    className="w-full py-2.5 sc-btn-glow rounded-xl text-sm font-bold cursor-pointer active:scale-95"
+                    className="mt-6 py-3 rounded-xl bg-green-500 text-white text-sm font-semibold hover:bg-green-600 transition active:scale-95"
                   >
-                    Take Quiz →
+                    Start Quiz →
                   </button>
                 </div>
               ))}
@@ -851,74 +958,78 @@ function StudentDashboard() {
         </div>
 
         {/* ── My Assignments ── */}
-        <div
-          className="mb-12 animate-[slide-up_0.5s_cubic-bezier(0.16,1,0.3,1)_both]"
-          style={{ animationDelay: "160ms" }}
-        >
-          <h2 className="text-2xl font-extrabold text-[var(--text)] mb-5 flex items-center gap-3 sc-title">
-            <span className="w-10 h-10 rounded-xl bg-amber-500/15 flex items-center justify-center text-xl">
-              📝
-            </span>
-            My Assignments
-          </h2>
+        <div className="mb-14">
+          {/* Header */}
+          <div className="flex items-center justify-between mb-6">
+            <h2 className="text-2xl font-bold flex items-center gap-3 text-[var(--text)]">
+              <div className="p-2 rounded-xl bg-[var(--accent)]/15 ">
+                <ClipboardList className="w-6 h-6 text-[var(--accent)]" />
+              </div>
+              My Assignments
+            </h2>
+          </div>
+
           {assignmentsLoading ? (
             <div className="flex items-center gap-3 text-[var(--muted)] text-sm py-6">
-              <span className="w-5 h-5 border-2 border-current/30 border-t-current rounded-full animate-spin" />
+              <span className="w-5 h-5 border-2 border-gray-300 border-t-green-500 rounded-full animate-spin" />
               Loading assignments…
             </div>
           ) : myAssignments.length === 0 ? (
-            <div className="sc-card-premium glass rounded-2xl p-8 text-center">
-              <div className="text-4xl mb-3">📋</div>
-              <p className="text-sm font-semibold text-[var(--muted)]">
-                No assignments yet.
-              </p>
+            <div className="bg-white border border-green-100 rounded-2xl p-10 text-center shadow-sm">
+              <ClipboardList className="w-10 h-10 text-green-400 mx-auto mb-3" />
+              <p className="text-gray-500 font-medium">No assignments yet</p>
             </div>
           ) : (
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
               {myAssignments.map((a) => {
                 const isOverdue = a.dueDate && new Date(a.dueDate) < new Date();
+
                 return (
                   <div
                     key={a.id}
-                    className="sc-card-premium glass rounded-2xl p-5 flex flex-col gap-3 border border-[var(--border)]/30 hover:border-[var(--accent)]/30 transition-all hover-lift"
+                    className="group bg-white border border-green-100 rounded-2xl p-6 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1 flex flex-col justify-between"
                   >
-                    <div className="flex items-start justify-between gap-2">
-                      <div className="flex-1 min-w-0">
-                        <p className="font-extrabold text-[var(--text)] truncate">
-                          {a.title}
-                        </p>
-                        <p className="text-xs text-[var(--muted)] mt-0.5">
-                          📚 {a.courseTitle}
-                        </p>
-                      </div>
-                      <span className="px-2.5 py-1 rounded-lg bg-amber-500/15 text-amber-400 text-[10px] font-bold border border-amber-500/20 shrink-0">
-                        {a.maxScore}pts
-                      </span>
-                    </div>
-                    {a.description && (
-                      <p className="text-xs text-[var(--muted)] line-clamp-2 leading-relaxed">
-                        {a.description}
+                    {/* Top */}
+                    <div>
+                      <p className="font-semibold text-gray-800 text-lg mb-1 line-clamp-1">
+                        {a.title}
                       </p>
-                    )}
-                    <div className="flex items-center justify-between text-xs">
-                      {a.dueDate ? (
-                        <span
-                          className={
-                            isOverdue
-                              ? "text-red-400 font-semibold"
-                              : "text-[var(--muted)]"
-                          }
-                        >
-                          {isOverdue ? "⚠ Overdue" : "Due"}:{" "}
-                          {new Date(a.dueDate).toLocaleDateString()}
-                        </span>
-                      ) : (
-                        <span className="text-[var(--muted)]">No due date</span>
+
+                      <p className="text-xs text-gray-500 mb-3">
+                        {a.courseTitle}
+                      </p>
+
+                      {a.description && (
+                        <p className="text-sm text-gray-500 mb-4 line-clamp-2">
+                          {a.description}
+                        </p>
                       )}
+
+                      {/* Meta */}
+                      <div className="flex justify-between text-xs">
+                        <span className="text-gray-500">{a.maxScore} pts</span>
+
+                        {a.dueDate ? (
+                          <span
+                            className={
+                              isOverdue
+                                ? "text-red-500 font-semibold"
+                                : "text-gray-500"
+                            }
+                          >
+                            {isOverdue ? "Overdue" : "Due"}:{" "}
+                            {new Date(a.dueDate).toLocaleDateString()}
+                          </span>
+                        ) : (
+                          <span className="text-gray-400">No due date</span>
+                        )}
+                      </div>
                     </div>
+
+                    {/* Button */}
                     <button
                       onClick={() => openSubmitModal(a)}
-                      className="w-full py-2.5 sc-btn-glow rounded-xl text-sm font-bold cursor-pointer active:scale-95"
+                      className="mt-6 py-3 rounded-xl border border-green-500 text-green-600 font-semibold text-sm hover:bg-green-50 transition active:scale-95"
                     >
                       Submit / View →
                     </button>
@@ -940,7 +1051,7 @@ function StudentDashboard() {
                 style={{ animationDelay: "100ms" }}
               >
                 <h3 className="text-lg font-bold text-[var(--text)] mb-5 flex items-center gap-2.5">
-                  <span className="w-8 h-8 rounded-lg bg-blue-500/15 flex items-center justify-center text-sm">
+                  <span className="w-8 h-8 rounded-lg bg-green-500/15 flex items-center justify-center text-sm">
                     📊
                   </span>
                   Performance Trend
@@ -1093,7 +1204,7 @@ function StudentDashboard() {
                       className={`px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider whitespace-nowrap ${
                         lc.status === "live"
                           ? "bg-red-500/15 text-red-500 animate-pulse border border-red-500/30 shadow-[0_0_12px_rgba(239,68,68,0.2)]"
-                          : "bg-blue-500/15 text-blue-500 border border-blue-500/30"
+                          : "bg-green-500/15 text-green-500 border border-green-500/30"
                       }`}
                     >
                       {lc.status === "live" ? "🔴 LIVE" : "🗓️ Scheduled"}
@@ -1195,7 +1306,7 @@ function StudentDashboard() {
                         {
                           val: c.materialCount || 0,
                           label: "Materials",
-                          color: "blue",
+                          color: "green",
                         },
                         {
                           val: c.assignmentCount || 0,
@@ -1254,98 +1365,96 @@ function StudentDashboard() {
             className="animate-[slide-up_0.6s_cubic-bezier(0.16,1,0.3,1)_both]"
             style={{ animationDelay: "400ms" }}
           >
-            <div className="flex items-center justify-between mb-6">
+            {/* Header */}
+            <div className="flex items-center justify-between mb-8">
               <div>
-                <h2 className="text-2xl font-extrabold text-[var(--text)] flex items-center gap-3 sc-title">
-                  <span className="w-10 h-10 rounded-xl bg-emerald-500/15 flex items-center justify-center text-xl">
+                <h2 className="text-2xl font-extrabold text-[var(--text)] flex items-center gap-3">
+                  <span className="w-10 h-10 rounded-xl bg-emerald-100 flex items-center justify-center text-lg">
                     🌟
                   </span>
                   Explore More
                 </h2>
-                <p className="text-sm text-[var(--muted)] mt-1 font-medium ml-[52px]">
+                <p className="text-sm text-[var(--text)] mt-1 ml-[52px]">
                   Expand your skills with new courses
                 </p>
               </div>
-              <span
-                className="px-4 py-2 rounded-full glass text-emerald-500 text-xs font-bold
-                               border border-emerald-500/25"
-              >
+
+              <span className="px-4 py-2 rounded-full text-emerald-600 text-xs font-bold bg-emerald-50 border border-emerald-200">
                 {available.length} available
               </span>
             </div>
 
+            {/* Cards */}
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
               {available.map((c, i) => (
                 <div
                   key={c.id}
-                  className="group sc-card-premium glass rounded-2xl p-6 overflow-hidden
-                           animate-[slide-up_0.5s_cubic-bezier(0.16,1,0.3,1)_both]"
+                  className="group bg-white rounded-2xl p-6 border border-gray-100 shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1"
                   style={{ animationDelay: `${(enrolled.length + i) * 80}ms` }}
                 >
-                  <div
-                    className="absolute inset-0 bg-gradient-to-br from-emerald-500/0 to-emerald-500/0
-                                 group-hover:from-emerald-500/5 group-hover:to-emerald-500/0 transition-all duration-500"
-                  />
-                  <div className="relative">
-                    <div className="flex items-start justify-between mb-3 gap-3">
-                      <h3 className="text-lg font-bold text-[var(--text)] flex-1 leading-snug group-hover:text-emerald-500 transition-colors duration-300">
-                        {c.title}
-                      </h3>
-                      {c.subject && (
-                        <span
-                          className="px-3 py-1 bg-emerald-500/12 text-emerald-500 rounded-lg text-[10px] font-bold whitespace-nowrap
-                                         uppercase tracking-wider border border-emerald-500/15"
-                        >
-                          {c.subject}
-                        </span>
-                      )}
-                    </div>
+                  {/* Title + Subject */}
+                  <div className="flex items-start justify-between mb-3 gap-3">
+                    <h3 className="text-lg font-bold text-gray-800 flex-1 leading-snug group-hover:text-emerald-600 transition">
+                      {c.title}
+                    </h3>
+
+                    {c.subject && (
+                      <span className="px-3 py-1 bg-emerald-50 text-emerald-600 rounded-lg text-[10px] font-bold uppercase tracking-wider border border-emerald-100">
+                        {c.subject}
+                      </span>
+                    )}
+                  </div>
 
-                    <p className="text-xs text-[var(--muted)] mb-3 flex items-center gap-1.5 font-medium">
-                      👨‍🏫 {c.teacher?.name || "Unknown"}
-                    </p>
+                  {/* Teacher */}
+                  <p className="text-xs text-gray-500 mb-2 font-medium">
+                    👨‍🏫 {c.teacher?.name || "Unknown"}
+                  </p>
 
-                    <p className="text-sm text-[var(--muted)] mb-4 leading-relaxed line-clamp-2 font-medium">
-                      {c.description ||
-                        "Explore this amazing course and expand your knowledge"}
-                    </p>
+                  {/* Description */}
+                  <p className="text-sm text-gray-600 mb-4 leading-relaxed line-clamp-2">
+                    {c.description ||
+                      "Explore this amazing course and expand your knowledge"}
+                  </p>
 
-                    <div className="grid grid-cols-2 gap-3 mb-5">
-                      <div className="p-2.5 rounded-xl bg-gradient-to-br from-emerald-500/10 to-emerald-600/5 border border-emerald-500/15 text-center">
-                        <p className="font-extrabold text-[var(--text)] text-lg">
-                          {c.enrollmentCount || 0}
-                        </p>
-                        <p className="text-[9px] text-[var(--muted)] font-bold uppercase tracking-wider mt-0.5">
-                          Enrolled
-                        </p>
-                      </div>
-                      <div className="p-2.5 rounded-xl bg-gradient-to-br from-emerald-500/10 to-emerald-600/5 border border-emerald-500/15 text-center">
-                        <p className="font-extrabold text-[var(--text)] text-lg">
-                          {c.materialCount || 0}
-                        </p>
-                        <p className="text-[9px] text-[var(--muted)] font-bold uppercase tracking-wider mt-0.5">
-                          Materials
-                        </p>
-                      </div>
+                  {/* Stats */}
+                  <div className="grid grid-cols-2 gap-3 mb-5">
+                    <div className="p-3 rounded-xl bg-emerald-50 border border-emerald-100 text-center">
+                      <p className="font-bold text-gray-800 text-lg">
+                        {c.enrollmentCount || 0}
+                      </p>
+                      <p className="text-[10px] text-gray-500 font-semibold mt-0.5">
+                        Enrolled
+                      </p>
                     </div>
 
-                    <button
-                      onClick={() => enroll(c.id)}
-                      disabled={enrollingId === c.id}
-                      className="w-full py-3 rounded-xl text-sm font-bold border-2 cursor-pointer disabled:cursor-not-allowed transition-all duration-300
-                               bg-emerald-500/10 hover:bg-emerald-500/20 disabled:opacity-60 text-emerald-500 border-emerald-500/30
-                               hover:shadow-[0_8px_24px_-8px_rgba(16,185,129,0.4)] hover:-translate-y-1 active:scale-95"
-                    >
-                      {enrollingId === c.id ? (
-                        <span className="flex items-center justify-center gap-2">
-                          <span className="w-3.5 h-3.5 border-2 border-emerald-500/30 border-t-emerald-500 rounded-full animate-spin" />
-                          Enrolling...
-                        </span>
-                      ) : (
-                        "+ Enroll Now"
-                      )}
-                    </button>
+                    <div className="p-3 rounded-xl bg-emerald-50 border border-emerald-100 text-center">
+                      <p className="font-bold text-gray-800 text-lg">
+                        {c.materialCount || 0}
+                      </p>
+                      <p className="text-[10px] text-gray-500 font-semibold mt-0.5">
+                        Materials
+                      </p>
+                    </div>
                   </div>
+
+                  {/* Button */}
+                  <button
+                    onClick={() => enroll(c.id)}
+                    disabled={enrollingId === c.id}
+                    className="w-full py-3 rounded-xl text-sm font-bold cursor-pointer transition-all duration-300
+              bg-emerald-500 text-white hover:bg-emerald-600
+              disabled:opacity-60 disabled:cursor-not-allowed
+              hover:shadow-md active:scale-95"
+                  >
+                    {enrollingId === c.id ? (
+                      <span className="flex items-center justify-center gap-2">
+                        <span className="w-4 h-4 border-2 border-white/40 border-t-white rounded-full animate-spin" />
+                        Enrolling...
+                      </span>
+                    ) : (
+                      "+ Enroll Now"
+                    )}
+                  </button>
                 </div>
               ))}
             </div>
@@ -1650,12 +1759,15 @@ function StudentDashboard() {
                 <div className="border-t border-[var(--border)]/30 pt-4 space-y-3">
                   <div className="flex items-center justify-between">
                     <p className="text-sm font-bold text-[var(--text)] flex items-center gap-2">
-                      🤖 AI Feedback
+                      <div className="w-10 h-10 rounded-xl bg-[var(--accent)]/15 flex items-center justify-center">
+                        <BrainCircuit className="w-5 h-5 text-[var(--accent)]" />
+                      </div>{" "}
+                      AI Feedback
                     </p>
                     <button
                       onClick={getAIFeedback}
                       disabled={aiFeedbackLoading}
-                      className="px-4 py-2 rounded-xl border border-violet-500/30 text-violet-400 text-xs font-bold hover:bg-violet-500/10 transition-all cursor-pointer disabled:opacity-50 flex items-center gap-2"
+                      className="px-4 py-2 rounded-xl border border-green-500/30 text-green-400 text-xs font-bold hover:bg-green-500/10 transition-all cursor-pointer disabled:opacity-50 flex items-center gap-2"
                     >
                       {aiFeedbackLoading ? (
                         <>
@@ -1669,7 +1781,7 @@ function StudentDashboard() {
                   </div>
                   {mySubmission.feedback && !aiFeedback && (
                     <div className="border border-[var(--border)]/40 rounded-xl overflow-hidden">
-                      <div className="px-4 py-2 border-b border-[var(--border)]/30 bg-violet-500/5 text-xs text-[var(--muted)] font-semibold uppercase tracking-wider">
+                      <div className="px-4 py-2 border-b border-[var(--border)]/30 bg-green-500/5 text-xs text-[var(--muted)] font-semibold uppercase tracking-wider">
                         Saved Feedback
                       </div>
                       <div className="p-4">
@@ -1678,9 +1790,9 @@ function StudentDashboard() {
                     </div>
                   )}
                   {aiFeedback && (
-                    <div className="border border-violet-500/30 rounded-xl overflow-hidden">
-                      <div className="px-4 py-2 border-b border-violet-500/20 bg-violet-500/5 flex items-center gap-2">
-                        <span className="w-2 h-2 rounded-full bg-violet-400 animate-pulse" />
+                    <div className="border border-green-500/30 rounded-xl overflow-hidden">
+                      <div className="px-4 py-2 border-b border-green-500/20 bg-green-500/5 flex items-center gap-2">
+                        <span className="w-2 h-2 rounded-full bg-green-400 animate-pulse" />
                         <span className="text-xs text-[var(--muted)] font-semibold uppercase tracking-wider">
                           AI Analysis
                         </span>
@@ -1707,7 +1819,7 @@ function StudentDashboard() {
             {/* Header */}
             <div className="flex items-center justify-between p-5 border-b border-[var(--border)]/30 shrink-0">
               <h3 className="text-lg font-extrabold text-[var(--text)] flex items-center gap-3">
-                <span className="w-9 h-9 rounded-xl bg-violet-500/15 flex items-center justify-center text-lg">
+                <span className="w-9 h-9 rounded-xl bg-green-500/15 flex items-center justify-center text-lg">
                   {aiModal === "chat"
                     ? "💬"
                     : aiModal === "plan"
@@ -1732,20 +1844,32 @@ function StudentDashboard() {
             <div className="overflow-y-auto flex-1 p-5 space-y-4">
               {/* ── CHAT ── */}
               {aiModal === "chat" && (
-                <div className="flex flex-col gap-3 h-full">
-                  <div className="glass rounded-xl border border-[var(--border)]/40 min-h-[260px] max-h-[40vh] overflow-y-auto p-4 space-y-3">
+                <div className="flex flex-col h-full">
+                  {/* Chat Box */}
+                  <div className="flex-1 bg-white rounded-2xl border border-green-100 shadow-sm p-4 overflow-y-auto space-y-4">
+                    {/* Empty State */}
                     {chatHistory.length === 0 && (
-                      <p className="text-center text-[var(--muted)] text-sm mt-6">
+                      <div className="flex flex-col items-center justify-center h-full text-center text-gray-400 text-sm">
+                        <div className="text-3xl mb-2">💬</div>
                         Ask me anything about your courses…
-                      </p>
+                      </div>
                     )}
+
+                    {/* Messages */}
                     {chatHistory.map((m, i) => (
                       <div
                         key={i}
                         className={`flex ${m.role === "user" ? "justify-end" : "justify-start"}`}
                       >
                         <div
-                          className={`max-w-[82%] px-4 py-2.5 rounded-2xl text-sm leading-relaxed ${m.role === "user" ? "bg-[var(--accent)] text-white rounded-br-sm" : "glass border border-[var(--border)]/40 text-[var(--text)] rounded-bl-sm"}`}
+                          className={`
+              max-w-[75%] px-4 py-3 text-sm leading-relaxed rounded-2xl shadow-sm
+              ${
+                m.role === "user"
+                  ? "bg-green-500 text-white rounded-br-md"
+                  : "bg-gray-50 border border-gray-200 text-gray-800 rounded-bl-md"
+              }
+            `}
                         >
                           {m.role === "assistant" ? (
                             <SdAiMarkdown text={m.content} />
@@ -1755,49 +1879,62 @@ function StudentDashboard() {
                         </div>
                       </div>
                     ))}
+
+                    {/* Typing Loader */}
                     {aiLoading && (
                       <div className="flex justify-start">
-                        <div className="glass border border-[var(--border)]/40 px-4 py-3 rounded-2xl rounded-bl-sm">
-                          <span className="flex gap-1">
+                        <div className="bg-gray-50 border border-gray-200 px-4 py-3 rounded-2xl rounded-bl-md shadow-sm">
+                          <div className="flex gap-1">
                             {[0, 1, 2].map((i) => (
                               <span
                                 key={i}
-                                className="w-2 h-2 bg-[var(--accent)] rounded-full animate-bounce"
+                                className="w-2 h-2 bg-green-500 rounded-full animate-bounce"
                                 style={{ animationDelay: `${i * 0.15}s` }}
                               />
                             ))}
-                          </span>
+                          </div>
                         </div>
                       </div>
                     )}
+
+                    {/* Error */}
                     {aiError && (
                       <p className="text-red-400 text-xs text-center">
                         {aiError}
                       </p>
                     )}
+
                     <div ref={chatBottomRef} />
                   </div>
-                  <form onSubmit={sendChat} className="flex gap-2 shrink-0">
+
+                  {/* Input Area */}
+                  <form
+                    onSubmit={sendChat}
+                    className="mt-3 flex items-center gap-2 bg-white border border-green-100 rounded-xl p-2 shadow-sm"
+                  >
                     <input
-                      className="flex-1 px-4 py-3 border border-[var(--border)]/50 rounded-xl text-sm outline-none focus:border-[var(--accent)] focus:ring-4 focus:ring-[var(--accent)]/10 transition-all glass text-[var(--text)] placeholder:text-[var(--muted)]/50"
+                      className="flex-1 px-3 py-2 text-sm outline-none text-gray-700 placeholder-gray-400"
                       value={chatInput}
                       onChange={(e) => setChatInput(e.target.value)}
                       placeholder="Ask anything educational…"
                     />
+
                     <button
                       type="submit"
                       disabled={aiLoading || !chatInput.trim()}
-                      className="px-5 py-3 rounded-xl bg-[var(--accent)] text-white font-semibold text-sm disabled:opacity-50 cursor-pointer active:scale-95 transition-all"
+                      className="px-4 py-2 rounded-lg bg-green-500 text-white font-semibold text-sm disabled:opacity-50 transition hover:bg-green-600 active:scale-95"
                     >
                       Send
                     </button>
                   </form>
+
+                  {/* Clear Button */}
                   <button
                     onClick={() => {
                       setChatHistory([]);
                       setAiError("");
                     }}
-                    className="text-xs text-[var(--muted)] hover:text-red-400 transition-colors text-right"
+                    className="text-xs text-gray-400 hover:text-red-500 transition mt-2 text-right"
                   >
                     Clear conversation
                   </button>
@@ -2156,28 +2293,28 @@ function StudentDashboard() {
 
               {/* ── PERFORMANCE ── */}
               {aiModal === "performance" && (
-                <div className="space-y-4">
-                  {/* Load real data from DB */}
-                  {perfContext &&
-                    perfContext.courses &&
-                    perfContext.courses.length > 0 && (
-                      <div className="rounded-xl border border-[var(--border)]/30 bg-[var(--accent)]/5 p-3">
-                        <p className="text-xs font-bold text-[var(--muted)] uppercase tracking-wider mb-2">
-                          Load Real Data From DB
-                        </p>
-                        <div className="flex flex-wrap gap-2">
-                          {perfContext.courses.map((c) => (
-                            <button
-                              key={c.courseId}
-                              onClick={() => loadRealPerformanceData(c)}
-                              className="px-3 py-1.5 rounded-lg border border-[var(--accent)]/30 text-xs font-semibold text-[var(--accent)] hover:bg-[var(--accent)]/10 transition-all cursor-pointer"
-                            >
-                              {c.title}
-                            </button>
-                          ))}
-                        </div>
+                <div className="space-y-6">
+                  {/* REAL DATA */}
+                  {perfContext?.courses?.length > 0 && (
+                    <div className="bg-white border border-gray-100 rounded-2xl p-4 shadow-sm">
+                      <p className="text-xs font-bold text-gray-500 mb-3">
+                        Load Real Data
+                      </p>
+                      <div className="flex flex-wrap gap-2">
+                        {perfContext.courses.map((c) => (
+                          <button
+                            key={c.courseId}
+                            onClick={() => loadRealPerformanceData(c)}
+                            className="px-3 py-1.5 rounded-lg text-xs font-semibold bg-emerald-50 text-emerald-600 border border-emerald-200 hover:bg-emerald-100 transition"
+                          >
+                            {c.title}
+                          </button>
+                        ))}
                       </div>
-                    )}
+                    </div>
+                  )}
+
+                  {/* FORM */}
                   <form
                     onSubmit={(e) => {
                       e.preventDefault();
@@ -2194,130 +2331,113 @@ function StudentDashboard() {
                         course_progress: Number(perfForm.course_progress),
                       });
                     }}
-                    className="space-y-4"
+                    className="bg-white rounded-2xl border border-gray-100 p-6 shadow-sm space-y-5"
                   >
-                    <div className="grid grid-cols-2 gap-4">
-                      <div>
-                        <label className="block text-xs font-bold text-[var(--muted)] uppercase tracking-wider mb-1.5">
-                          Subject *
-                        </label>
-                        <input
-                          className="w-full px-4 py-3 border border-[var(--border)]/50 rounded-xl text-sm outline-none focus:border-[var(--accent)] focus:ring-4 focus:ring-[var(--accent)]/10 transition-all glass text-[var(--text)] placeholder:text-[var(--muted)]/50"
-                          required
-                          value={perfForm.subject}
-                          onChange={(e) =>
-                            setPerfForm((f) => ({
-                              ...f,
-                              subject: e.target.value,
-                            }))
-                          }
-                          placeholder="e.g. Data Structures"
-                        />
-                      </div>
-                      <div>
-                        <label className="block text-xs font-bold text-[var(--muted)] uppercase tracking-wider mb-1.5">
-                          Course Progress (%)
-                        </label>
-                        <input
-                          type="number"
-                          min={0}
-                          max={100}
-                          className="w-full px-4 py-3 border border-[var(--border)]/50 rounded-xl text-sm outline-none focus:border-[var(--accent)] focus:ring-4 focus:ring-[var(--accent)]/10 transition-all glass text-[var(--text)]"
-                          value={perfForm.course_progress}
-                          onChange={(e) =>
-                            setPerfForm((f) => ({
-                              ...f,
-                              course_progress: e.target.value,
-                            }))
-                          }
-                        />
-                      </div>
-                      <div className="col-span-2">
-                        <label className="block text-xs font-bold text-[var(--muted)] uppercase tracking-wider mb-1.5">
-                          Quiz Scores (comma-separated)
-                        </label>
-                        <input
-                          className="w-full px-4 py-3 border border-[var(--border)]/50 rounded-xl text-sm outline-none focus:border-[var(--accent)] focus:ring-4 focus:ring-[var(--accent)]/10 transition-all glass text-[var(--text)] placeholder:text-[var(--muted)]/50"
-                          value={perfForm.quiz_scores}
-                          onChange={(e) =>
-                            setPerfForm((f) => ({
-                              ...f,
-                              quiz_scores: e.target.value,
-                            }))
-                          }
-                          placeholder="e.g. 72, 68, 80, 85"
-                        />
-                      </div>
-                      <div className="col-span-2">
-                        <label className="block text-xs font-bold text-[var(--muted)] uppercase tracking-wider mb-1.5">
-                          Assignment Grades (comma-separated)
-                        </label>
-                        <input
-                          className="w-full px-4 py-3 border border-[var(--border)]/50 rounded-xl text-sm outline-none focus:border-[var(--accent)] focus:ring-4 focus:ring-[var(--accent)]/10 transition-all glass text-[var(--text)] placeholder:text-[var(--muted)]/50"
-                          value={perfForm.assignment_grades}
-                          onChange={(e) =>
-                            setPerfForm((f) => ({
-                              ...f,
-                              assignment_grades: e.target.value,
-                            }))
-                          }
-                          placeholder="e.g. 75, 82, 88"
-                        />
-                      </div>
+                    <h3 className="text-lg font-bold text-gray-800">
+                      Analyze Performance
+                    </h3>
+
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                      <input
+                        required
+                        value={perfForm.subject}
+                        onChange={(e) =>
+                          setPerfForm((f) => ({
+                            ...f,
+                            subject: e.target.value,
+                          }))
+                        }
+                        placeholder="Subject"
+                        className="px-4 py-3 rounded-xl border border-gray-200 text-sm focus:ring-2 focus:ring-emerald-200 outline-none"
+                      />
+
+                      <input
+                        type="number"
+                        min={0}
+                        max={100}
+                        value={perfForm.course_progress}
+                        onChange={(e) =>
+                          setPerfForm((f) => ({
+                            ...f,
+                            course_progress: e.target.value,
+                          }))
+                        }
+                        placeholder="Progress %"
+                        className="px-4 py-3 rounded-xl border border-gray-200 text-sm focus:ring-2 focus:ring-emerald-200 outline-none"
+                      />
+
+                      <input
+                        value={perfForm.quiz_scores}
+                        onChange={(e) =>
+                          setPerfForm((f) => ({
+                            ...f,
+                            quiz_scores: e.target.value,
+                          }))
+                        }
+                        placeholder="Quiz scores (e.g. 70,80,90)"
+                        className="col-span-2 px-4 py-3 rounded-xl border border-gray-200 text-sm focus:ring-2 focus:ring-emerald-200 outline-none"
+                      />
+
+                      <input
+                        value={perfForm.assignment_grades}
+                        onChange={(e) =>
+                          setPerfForm((f) => ({
+                            ...f,
+                            assignment_grades: e.target.value,
+                          }))
+                        }
+                        placeholder="Assignment grades (e.g. 75,85)"
+                        className="col-span-2 px-4 py-3 rounded-xl border border-gray-200 text-sm focus:ring-2 focus:ring-emerald-200 outline-none"
+                      />
                     </div>
+
+                    {/* ACTIONS */}
                     <div className="flex gap-3">
                       <button
                         type="submit"
                         disabled={aiLoading || perfLoadingReal}
-                        className="flex-1 py-3 sc-btn-glow rounded-xl text-sm font-bold cursor-pointer disabled:opacity-50 flex items-center justify-center gap-2"
+                        className="flex-1 py-3 rounded-xl bg-emerald-500 text-white font-semibold hover:bg-emerald-600 transition"
                       >
-                        {aiLoading ? (
-                          <>
-                            <span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
-                            Analyzing…
-                          </>
-                        ) : (
-                          "Analyze Performance →"
-                        )}
+                        {aiLoading ? "Analyzing..." : "Analyze"}
                       </button>
+
                       {perfForm.subject && (
                         <button
                           type="button"
                           onClick={analyzeRealPerformance}
                           disabled={aiLoading || perfLoadingReal}
-                          className="px-4 py-3 rounded-xl border border-[var(--accent)]/40 text-[var(--accent)] text-sm font-bold hover:bg-[var(--accent)]/10 transition-all cursor-pointer disabled:opacity-50 flex items-center gap-2 shrink-0"
+                          className="px-4 py-3 rounded-xl border border-emerald-300 text-emerald-600 hover:bg-emerald-50 transition"
                         >
-                          {perfLoadingReal ? (
-                            <span className="w-4 h-4 border-2 border-current/30 border-t-current rounded-full animate-spin" />
-                          ) : (
-                            "📊"
-                          )}{" "}
-                          Real Data
+                          {perfLoadingReal ? "..." : "Real Data"}
                         </button>
                       )}
                     </div>
+
                     {aiError && (
-                      <p className="text-red-400 text-sm">{aiError}</p>
-                    )}
-                    {aiResult && (
-                      <div
-                        ref={aiResultRef}
-                        className="border border-[var(--border)]/40 rounded-xl overflow-hidden"
-                      >
-                        <div className="px-4 py-2 border-b border-[var(--border)]/30 bg-green-500/5 flex items-center gap-2">
-                          <span className="w-2 h-2 rounded-full bg-green-400 animate-pulse" />
-                          <span className="text-xs text-[var(--muted)] font-semibold uppercase tracking-wider">
-                            Analysis — {aiResult.subject}
-                          </span>
-                        </div>
-                        <div className="p-4 max-h-[40vh] overflow-y-auto">
-                          <SdAiMarkdown
-                            text={aiResult.analysis || JSON.stringify(aiResult)}
-                          />
-                        </div>
-                      </div>
+                      <p className="text-red-500 text-sm">{aiError}</p>
                     )}
                   </form>
+
+                  {/* RESULT */}
+                  {aiResult && (
+                    <div
+                      ref={aiResultRef}
+                      className="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden"
+                    >
+                      <div className="px-5 py-3 bg-emerald-50 border-b flex items-center gap-2">
+                        <span className="w-2 h-2 bg-emerald-500 rounded-full animate-pulse" />
+                        <span className="text-sm font-semibold text-emerald-700">
+                          {aiResult.subject} Analysis
+                        </span>
+                      </div>
+
+                      <div className="p-5 max-h-[50vh] overflow-y-auto text-sm text-gray-700">
+                        <SdAiMarkdown
+                          text={aiResult.analysis || JSON.stringify(aiResult)}
+                        />
+                      </div>
+                    </div>
+                  )}
                 </div>
               )}
             </div>
diff --git a/client/src/pages/TeacherDashboard.jsx b/client/src/pages/TeacherDashboard.jsx
index e711cab..81862b7 100644
--- a/client/src/pages/TeacherDashboard.jsx
+++ b/client/src/pages/TeacherDashboard.jsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 import { useAuth } from "../context/AuthContext";
 import { apiFetch } from "../utils/api.js";
@@ -597,14 +597,17 @@ function TeacherDashboard() {
     );
   };
 
-  const load = () =>
-    apiFetch(`/api/teachers/${user.id}/dashboard`)
-      .then((r) => r.json())
-      .then((d) => !d.error && setData(d));
+  const load = useCallback(
+    () =>
+      apiFetch(`/api/teachers/${user.id}/dashboard`)
+        .then((r) => r.json())
+        .then((d) => !d.error && setData(d)),
+    [user.id],
+  );
 
   useEffect(() => {
     load();
-  }, [user.id]);
+  }, [load]);
 
   const openCreate = () => {
     setEditCourse(null);
diff --git a/client/src/theme/ThemeApplier.jsx b/client/src/theme/ThemeApplier.jsx
index d426f67..5702e9e 100644
--- a/client/src/theme/ThemeApplier.jsx
+++ b/client/src/theme/ThemeApplier.jsx
@@ -23,6 +23,21 @@ const themeStyles = {
     className: "light",
   },
   dark: {
+<<<<<<< HEAD
+    "--bg": "#0a0a0a",
+    "--surface": "#111827",
+    "--surface-elevated": "#1f2937",
+    "--text": "#ffffff",
+    "--text-secondary": "#f1f5f9",
+    "--muted": "#9ca3af",
+    "--accent": "#7cff6b",
+    "--accent-light": "#9cff8a",
+    "--accent-contrast": "#0a0a0a",
+    "--border": "#374151",
+    "--border-light": "#4b5563",
+    "--shadow-color": "0 0% 0%",
+    "--glow-color": "120 100% 50%",
+=======
     "--bg": "#0f172a",
     "--surface": "#1e293b",
     "--surface-elevated": "#273549",
@@ -41,6 +56,7 @@ const themeStyles = {
     "--warning": "#f59e0b",
     "--danger": "#f87171",
     "--info": "#38bdf8",
+>>>>>>> 42795c9a6a2ed72e942e6619110abc54bb76c281
     className: "dark",
   },
 };