diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index 5594e22..52dcc5c 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -6,39 +6,103 @@ import { RecentActivityCard } from "@/components/dashboard/recent-activity-card"
 
 export default function DashboardPage() {
   return (
-    <div className="relative w-full bg-background pt-16 pb-12 animate-in fade-in duration-700">
+    <div className="relative w-full bg-background dark:bg-transparent pt-16 pb-12 animate-in fade-in duration-700 z-0">
+      {/* Background Layers */}
+      <div className="absolute inset-0 -z-10 overflow-hidden">
+        {/* Light Mode Wavy Refraction Background (Properly visible at the top) */}
+        <div
+          className="absolute inset-0 dark:hidden"
+          style={{
+            backgroundImage: `
+              url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 800' preserveAspectRatio='none'%3E%3Cpath fill='%234a6cf7' fill-opacity='0.10' d='M0,400 C320,500 420,300 720,400 C1020,500 1120,300 1440,400 L1440,0 L0,0 Z'/%3E%3Cpath fill='%236e8efb' fill-opacity='0.14' d='M0,500 C320,400 420,600 720,500 C1020,400 1120,600 1440,500 L1440,0 L0,0 Z'/%3E%3Cpath fill='%234a6cf7' fill-opacity='0.08' d='M0,600 C320,700 420,500 720,600 C1020,700 1120,500 1440,600 L1440,0 L0,0 Z'/%3E%3C/svg%3E"),
+              linear-gradient(to top, #f0f4ff, #ffffff)
+            `,
+            backgroundSize: "cover, auto",
+            backgroundPosition: "center, top",
+            backgroundRepeat: "no-repeat, no-repeat",
+            WebkitMaskImage:
+              "linear-gradient(to bottom, black 0%, black 50%, transparent 100%)",
+            maskImage:
+              "linear-gradient(to bottom, black 0%, black 50%, transparent 100%)",
+          }}
+        />
+      </div>
+
       {/* Top Section Divider for visual separation from Universities */}
       <div className="absolute inset-x-0 top-0 h-px w-full bg-gradient-to-r from-transparent via-blue-500/30 to-transparent" />
 
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="flex flex-col gap-8">
           {/* 1. Premium Welcome Banner (Full Width) */}
-          <div className="relative w-full overflow-hidden rounded-[24px] border border-border/80 bg-gradient-to-br from-card to-background p-8 sm:p-10 shadow-sm group">
-            <div className="absolute inset-0 -z-10 opacity-30 transition-opacity duration-500 group-hover:opacity-60">
-              <div className="absolute -left-[5%] -top-[10%] h-[300px] w-[300px] rounded-full bg-blue-600/20 blur-[100px]" />
-              <div className="absolute right-[5%] bottom-[10%] h-[300px] w-[300px] rounded-full bg-indigo-600/20 blur-[100px]" />
+          <div className="relative w-full overflow-hidden rounded-[24px] border border-blue-100/50 bg-gradient-to-br from-blue-50/50 to-indigo-50/50 dark:border-blue-400/15 dark:bg-slate-900/60 dark:bg-gradient-to-b dark:from-white/[0.02] dark:to-transparent backdrop-blur-2xl p-8 shadow-sm dark:shadow-[0_8px_32px_0_rgba(0,0,0,0.2)] group transition-all duration-300 dark:hover:border-blue-400/30">
+            {/* Ambient Background Glow (Dark Mode only) */}
+            <div className="hidden dark:block absolute inset-0 -z-10 opacity-[0.12] transition-opacity duration-500 group-hover:opacity-[0.24]">
+              <div className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 h-[300px] w-[500px] rounded-full bg-cyan-500/24 blur-[100px]" />
             </div>
 
-            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-6 relative z-10">
-              <div className="flex flex-col gap-3">
-                <div className="inline-flex items-center rounded-full border border-blue-500/20 bg-blue-500/10 px-3 py-1 text-xs font-semibold text-blue-400 w-fit">
-                  Student Dashboard
-                </div>
-                <h1 className="text-3xl font-extrabold tracking-tight text-foreground sm:text-4xl">
-                  Welcome Back 👋
+            <div className="relative z-10 flex flex-col items-center text-center gap-5">
+              <div className="inline-flex items-center rounded-full border border-blue-200 bg-blue-100 px-4 py-1 text-xs font-semibold text-blue-700 dark:border-cyan-500/20 dark:bg-cyan-500/10 dark:text-cyan-400 dark:shadow-[0_0_15px_rgba(6,182,212,0.1)] backdrop-blur-md">
+                Student Dashboard
+              </div>
+
+              <div className="flex flex-col items-center gap-2.5">
+                <h1 className="text-3xl font-extrabold tracking-tight text-zinc-900 dark:text-white sm:text-4xl">
+                  Welcome Back, Alex{" "}
+                  <span className="inline-block animate-wave">👋</span>
                 </h1>
-                <p className="max-w-xl text-[15px] leading-relaxed text-muted-foreground font-medium">
-                  Pick up where you left off. Access your syllabus, study your
-                  AI-generated notes, and practice with past year questions.
+                <p className="max-w-2xl text-[14.5px] leading-relaxed text-zinc-600 dark:text-zinc-400 font-medium mt-1">
+                  Pick up where you left off. Access your personalized syllabus,
+                  study your AI-generated notes, and practice with past year
+                  questions.
                 </p>
               </div>
+
+              {/* Decorative Activity Pulse (Hidden on mobile) */}
+              <div className="absolute right-6 top-1/2 -translate-y-1/2 hidden md:flex flex-col items-end gap-1.5 opacity-60 transition-opacity hover:opacity-100">
+                <svg
+                  width="100"
+                  height="24"
+                  viewBox="0 0 120 30"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="text-cyan-500/50"
+                >
+                  {/* Faint Background Track */}
+                  <path
+                    d="M0 15H30L35 10L42 22L50 5L58 28L65 15H120"
+                    stroke="currentColor"
+                    strokeWidth="1"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    className="opacity-20"
+                  />
+                  {/* Live Pulse (subtle) */}
+                  <path
+                    d="M0 15H30L35 10L42 22L50 5L58 28L65 15H120"
+                    stroke="currentColor"
+                    strokeWidth="1.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    className="animate-pulse-line opacity-80"
+                  />
+                </svg>
+                <div className="flex items-center gap-1.5 mr-1">
+                  <span className="relative flex h-1.5 w-1.5">
+                    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-60"></span>
+                    <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-emerald-500/80"></span>
+                  </span>
+                  <span className="text-[9px] font-semibold tracking-widest text-zinc-500 dark:text-zinc-400 uppercase">
+                    Workspace Active
+                  </span>
+                </div>
+              </div>
             </div>
           </div>
 
-          <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
+          <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-stretch">
             {/* 2. Continue Learning Section (Left side) */}
             <div className="col-span-1 lg:col-span-7 flex flex-col gap-5">
-              <div className="flex items-center justify-between px-1">
+              <div className="flex items-center justify-between px-1 shrink-0">
                 <h2 className="text-xl font-bold tracking-tight text-foreground">
                   Continue Learning
                 </h2>
@@ -49,23 +113,25 @@ export default function DashboardPage() {
                   View all history &rarr;
                 </Link>
               </div>
-              <div className="grid grid-cols-1 gap-5">
+              <div className="flex flex-col gap-5 flex-1">
                 <RecentActivityCard
                   title="Mathematics-III (BT-401)"
                   subtitle="RGPV • CSE • Semester 4"
                   href="/rgpv/cse/semester-4/bt-401"
                   timeAgo="2 hours ago"
                   progressText="Unit 2: Laplace Transform"
-                  statusColor="bg-emerald-500"
+                  progressValue={75}
+                  theme="cyan"
                   type="book"
                 />
                 <RecentActivityCard
-                  title="Data Structures (BT-402)"
+                  title="Analysis Design of Algorithm (CS-402)"
                   subtitle="RGPV • CSE • Semester 4"
-                  href="/rgpv/cse/semester-4/bt-402"
+                  href="/rgpv/cse/semester-4/cs-402"
                   timeAgo="Yesterday"
                   progressText="Viewing June-2024 PYQ"
-                  statusColor="bg-orange-500"
+                  progressValue={40}
+                  theme="orange"
                   type="file"
                 />
               </div>
@@ -73,12 +139,12 @@ export default function DashboardPage() {
 
             {/* 3. Quick Actions (Right side grid) */}
             <div className="col-span-1 lg:col-span-5 flex flex-col gap-5">
-              <div className="flex items-center justify-between px-1">
+              <div className="flex items-center justify-between px-1 shrink-0">
                 <h2 className="text-xl font-bold tracking-tight text-foreground">
                   Quick Actions
                 </h2>
               </div>
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-5 flex-1">
                 <QuickActionCard
                   title="Universities"
                   description="Explore institutions."
diff --git a/app/globals.css b/app/globals.css
index 526371d..13ecb95 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -109,3 +109,21 @@
     transparent 50%
   );
 }
+
+/* Activity Pulse Animation */
+@keyframes pulse-line {
+  0% {
+    stroke-dashoffset: 170;
+  }
+  50% {
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dashoffset: -170;
+  }
+}
+
+.animate-pulse-line {
+  stroke-dasharray: 170;
+  animation: pulse-line 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
diff --git a/components/dashboard/quick-action-card.tsx b/components/dashboard/quick-action-card.tsx
index b59c14a..e3a6461 100644
--- a/components/dashboard/quick-action-card.tsx
+++ b/components/dashboard/quick-action-card.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { ArrowRight, LucideIcon } from "lucide-react";
+import { LucideIcon } from "lucide-react";
 
 type ColorVariant = "blue" | "indigo" | "emerald" | "purple";
 
@@ -20,36 +20,20 @@ export function QuickActionCard({
 }: QuickActionCardProps) {
   const variants = {
     blue: {
-      wrapper:
-        "hover:border-[#1D4ED8]/30 focus-visible:ring-[#1D4ED8] dark:hover:border-blue-500/30",
-      iconBox:
-        "bg-blue-50 text-[#1D4ED8] group-hover:bg-[#1D4ED8] group-hover:text-white dark:bg-blue-500/10 dark:text-blue-400 dark:group-hover:bg-blue-500 dark:group-hover:text-white",
-      title: "group-hover:text-[#1D4ED8] dark:group-hover:text-blue-400",
-      arrow: "group-hover:text-[#1D4ED8] dark:group-hover:text-blue-400",
+      wrapper: "hover:border-blue-500/30 focus-visible:ring-blue-500",
+      iconBox: "bg-blue-500/10 text-blue-400 border-blue-500/20",
     },
     indigo: {
-      wrapper:
-        "hover:border-indigo-500/30 focus-visible:ring-indigo-500 dark:hover:border-indigo-500/30",
-      iconBox:
-        "bg-indigo-50 text-indigo-600 group-hover:bg-indigo-600 group-hover:text-white dark:bg-indigo-500/10 dark:text-indigo-400 dark:group-hover:bg-indigo-500 dark:group-hover:text-white",
-      title: "group-hover:text-indigo-600 dark:group-hover:text-indigo-400",
-      arrow: "group-hover:text-indigo-600 dark:group-hover:text-indigo-400",
+      wrapper: "hover:border-purple-500/30 focus-visible:ring-purple-500",
+      iconBox: "bg-purple-500/10 text-purple-400 border-purple-500/20",
     },
     emerald: {
-      wrapper:
-        "hover:border-emerald-500/30 focus-visible:ring-emerald-500 dark:hover:border-emerald-500/30",
-      iconBox:
-        "bg-emerald-50 text-emerald-600 group-hover:bg-emerald-600 group-hover:text-white dark:bg-emerald-500/10 dark:text-emerald-400 dark:group-hover:bg-emerald-500 dark:group-hover:text-white",
-      title: "group-hover:text-emerald-600 dark:group-hover:text-emerald-400",
-      arrow: "group-hover:text-emerald-600 dark:group-hover:text-emerald-400",
+      wrapper: "hover:border-emerald-500/30 focus-visible:ring-emerald-500",
+      iconBox: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20",
     },
     purple: {
-      wrapper:
-        "hover:border-purple-500/30 focus-visible:ring-purple-500 dark:hover:border-purple-500/30",
-      iconBox:
-        "bg-purple-50 text-purple-600 group-hover:bg-purple-600 group-hover:text-white dark:bg-purple-500/10 dark:text-purple-400 dark:group-hover:bg-purple-500 dark:group-hover:text-white",
-      title: "group-hover:text-purple-600 dark:group-hover:text-purple-400",
-      arrow: "group-hover:text-purple-600 dark:group-hover:text-purple-400",
+      wrapper: "hover:border-amber-500/30 focus-visible:ring-amber-500",
+      iconBox: "bg-amber-500/10 text-amber-400 border-amber-500/20",
     },
   };
 
@@ -58,30 +42,41 @@ export function QuickActionCard({
   return (
     <Link
       href={href}
-      className={`group relative flex flex-col gap-3 overflow-hidden rounded-[20px] border border-black/10 dark:border-white/[0.08] bg-black/[0.02] dark:bg-white/[0.03] p-5 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)] transition-transform hover:-translate-y-1 hover:shadow-xl hover:bg-black/[0.04] dark:hover:bg-white/[0.05] hover:border-blue-500/30 ${style.wrapper}`}
+      className={`group relative flex flex-col justify-between h-full overflow-hidden rounded-[20px] border border-zinc-200/80 bg-white p-5 shadow-[0_8px_24px_rgba(149,157,165,0.15)] hover:border-blue-200 hover:shadow-[0_8px_24px_rgba(96,165,250,0.2)] hover:-translate-y-1 transition-all duration-300 dark:bg-slate-900/60 dark:border-blue-400/15 dark:bg-gradient-to-b dark:from-white/[0.02] dark:to-transparent dark:shadow-[0_8px_32px_0_rgba(0,0,0,0.2)] dark:hover:shadow-[0_15px_40px_rgba(0,0,0,0.4)] dark:hover:border-blue-400/30 ${style.wrapper}`}
     >
-      <div className="absolute inset-0 bg-gradient-to-br from-black/5 dark:from-white/5 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
+      {/* Subtle Radial Glow on the Right Edge (Only in Dark Mode or very faint in Light Mode) */}
+      <div
+        className={`absolute top-0 -right-20 w-48 h-full rounded-full blur-[50px] opacity-[0.02] dark:opacity-[0.05] transition-opacity duration-300 group-hover:opacity-[0.04] dark:group-hover:opacity-[0.12] ${
+          colorVariant === "blue"
+            ? "bg-blue-500"
+            : colorVariant === "indigo"
+              ? "bg-purple-500"
+              : colorVariant === "emerald"
+                ? "bg-emerald-500"
+                : "bg-amber-500"
+        }`}
+      />
 
-      <div className="relative z-10 flex items-center justify-between">
-        <div
-          className={`flex h-12 w-12 items-center justify-center rounded-xl transition-colors duration-300 ${style.iconBox}`}
-        >
-          <Icon className="h-6 w-6" />
-        </div>
+      <div className="absolute inset-0 bg-gradient-to-br from-zinc-100/50 dark:from-white/[0.02] to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
+
+      {/* Top Section: Icon */}
+      <div className="relative z-10 flex items-start justify-between">
         <div
-          className={`flex h-8 w-8 items-center justify-center rounded-full bg-background border border-border opacity-0 transition-all duration-300 group-hover:opacity-100 group-hover:bg-[#1D4ED8]/10 group-hover:border-[#1D4ED8]/20 group-hover:text-[#1D4ED8] ${style.arrow}`}
+          className={`flex h-[42px] w-[42px] items-center justify-center rounded-[12px] shadow-sm dark:shadow-inner border border-zinc-200/60 bg-zinc-50 dark:border-white/[0.08] dark:bg-[#0c1017] transition-colors ${style.iconBox}`}
         >
-          <ArrowRight className="h-4 w-4" />
+          <Icon
+            className="h-5 w-5 dark:drop-shadow-[0_0_8px_currentColor]"
+            strokeWidth={2}
+          />
         </div>
       </div>
 
-      <div className="relative z-10 mt-1">
-        <h3
-          className={`font-bold text-[15px] sm:text-base tracking-tight text-foreground group-hover:text-blue-600 dark:group-hover:text-blue-400 ${style.title}`}
-        >
+      {/* Bottom Section: Text */}
+      <div className="relative z-10 mt-8 flex flex-col gap-0.5">
+        <h3 className="font-bold text-[15px] tracking-tight text-zinc-900 dark:text-white leading-snug">
           {title}
         </h3>
-        <p className="mt-1 text-[13px] sm:text-sm leading-relaxed text-muted-foreground font-medium line-clamp-2">
+        <p className="text-[12.5px] font-medium text-zinc-500 dark:text-zinc-400">
           {description}
         </p>
       </div>
diff --git a/components/dashboard/recent-activity-card.tsx b/components/dashboard/recent-activity-card.tsx
index 35a1784..168b7a3 100644
--- a/components/dashboard/recent-activity-card.tsx
+++ b/components/dashboard/recent-activity-card.tsx
@@ -7,8 +7,10 @@ interface RecentActivityCardProps {
   href: string;
   timeAgo: string;
   progressText: string;
-  statusColor: string;
+  statusColor?: string; // Kept for backwards compatibility
   type: "book" | "file";
+  progressValue: number;
+  theme?: "cyan" | "orange";
 }
 
 export function RecentActivityCard({
@@ -17,46 +19,85 @@ export function RecentActivityCard({
   href,
   timeAgo,
   progressText,
-  statusColor,
   type,
+  progressValue,
+  theme = "cyan",
 }: RecentActivityCardProps) {
   const Icon = type === "book" ? BookOpen : FileText;
 
+  // Determine dynamic colors based on theme
+  const isCyan = theme === "cyan";
+  const barBgClass = isCyan
+    ? "bg-cyan-400 shadow-[0_0_15px_rgba(34,211,238,0.56)]"
+    : "bg-orange-400 shadow-[0_0_15px_rgba(251,146,60,0.56)]";
+  const dotClass = isCyan
+    ? "bg-white shadow-[0_0_10px_rgba(34,211,238,1)]"
+    : "bg-white shadow-[0_0_10px_rgba(251,146,60,1)]";
+  const statusDotClass = isCyan ? "bg-cyan-400" : "bg-orange-400";
+
   return (
     <Link
       href={href}
-      className="group relative flex flex-col justify-between overflow-hidden rounded-[20px] border border-black/10 dark:border-white/[0.08] bg-black/[0.02] dark:bg-white/[0.03] p-5 sm:p-6 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)] transition-transform hover:-translate-y-1 hover:shadow-xl hover:bg-black/[0.04] dark:hover:bg-white/[0.05] hover:border-blue-500/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8]"
+      className="group relative flex flex-col justify-between overflow-hidden rounded-[20px] border border-zinc-200/80 bg-white p-5 shadow-[0_8px_24px_rgba(149,157,165,0.15)] hover:border-blue-200 hover:shadow-[0_8px_24px_rgba(96,165,250,0.2)] hover:-translate-y-1 transition-all duration-300 dark:bg-slate-900/60 dark:border-blue-400/15 dark:bg-gradient-to-b dark:from-white/[0.02] dark:to-transparent dark:shadow-[0_8px_32px_0_rgba(0,0,0,0.2)] dark:hover:shadow-[0_15px_40px_rgba(0,0,0,0.4)] dark:hover:border-blue-400/30 focus-visible:outline-none focus-visible:ring-2 flex-1 h-full"
     >
-      <div className="absolute inset-0 bg-gradient-to-br from-black/5 dark:from-white/5 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
-
-      <div className="relative z-10 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-        <div className="flex gap-4 items-center sm:items-start">
-          <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-background border border-border text-muted-foreground transition-colors group-hover:bg-[#1D4ED8]/10 group-hover:text-[#1D4ED8] dark:group-hover:text-blue-400">
-            <Icon className="h-6 w-6" />
+      <div className="relative z-10 flex flex-col gap-5">
+        {/* Header Row */}
+        <div className="flex justify-between items-start gap-4">
+          <div className="flex items-center gap-3.5">
+            <div
+              className={`flex h-[42px] w-[42px] shrink-0 items-center justify-center rounded-[12px] border border-zinc-200 bg-zinc-50 dark:border-white/[0.08] dark:bg-[#0c1017] dark:shadow-inner transition-colors ${isCyan ? "text-cyan-600 dark:text-cyan-400" : "text-orange-600 dark:text-orange-400"}`}
+            >
+              <Icon
+                className="h-5 w-5 dark:drop-shadow-[0_0_8px_currentColor]"
+                strokeWidth={2}
+              />
+            </div>
+            <div className="flex flex-col justify-center">
+              <h3 className="font-bold text-[15px] tracking-tight text-zinc-900 dark:text-white leading-snug">
+                {title}
+              </h3>
+              <p className="text-[12px] font-medium text-zinc-500 dark:text-zinc-400">
+                {subtitle}
+              </p>
+            </div>
           </div>
-          <div className="flex flex-col justify-center">
-            <h3 className="font-bold text-[15px] sm:text-base tracking-tight text-foreground group-hover:text-[#1D4ED8] dark:group-hover:text-blue-400">
-              {title}
-            </h3>
-            <p className="mt-0.5 text-[13px] sm:text-sm font-medium text-muted-foreground">
-              {subtitle}
-            </p>
+
+          <div className="flex flex-col items-end gap-1.5">
+            <div className="flex items-center gap-1.5 rounded-md border border-zinc-200/60 bg-zinc-50 dark:border-white/5 dark:bg-[#1b2234] px-2 py-0.5 text-[10.5px] font-medium text-zinc-600 dark:text-zinc-300">
+              <Clock className="h-3 w-3 text-zinc-400" />
+              <span>{timeAgo}</span>
+            </div>
+            <span className="text-[11px] font-medium text-zinc-500 dark:text-zinc-400 pr-0.5">
+              {progressValue}% complete
+            </span>
           </div>
         </div>
-        <div className="hidden sm:flex w-fit items-center gap-1.5 self-start rounded-md bg-background border border-border px-2.5 py-1 text-xs font-semibold text-muted-foreground">
-          <Clock className="h-3.5 w-3.5" />
-          <span>{timeAgo}</span>
-        </div>
-      </div>
 
-      <div className="relative z-10 mt-6 flex items-center justify-between border-t border-border pt-4">
-        <div className="flex items-center gap-2.5 text-[13px] sm:text-sm font-medium text-muted-foreground">
-          <span className={`h-2 w-2 rounded-full ${statusColor}`} />
-          {progressText}
+        {/* Full-Width Progress Bar Row */}
+        <div className="relative w-full h-[2px] rounded-full bg-zinc-200 dark:bg-[#1e2638] mt-1 mb-1">
+          <div
+            className={`absolute top-0 left-0 h-full rounded-full ${barBgClass} transition-all duration-700`}
+            style={{ width: `${progressValue}%` }}
+          />
+          {/* Glowing Knob */}
+          <div
+            className={`absolute top-1/2 -translate-y-1/2 h-2.5 w-2.5 rounded-full ${dotClass} transition-all duration-700`}
+            style={{ left: `calc(${progressValue}% - 5px)` }}
+          />
         </div>
-        <div className="flex items-center text-[13px] sm:text-sm font-bold text-[#1D4ED8] transition-colors dark:text-blue-400">
-          Resume{" "}
-          <ChevronRight className="ml-0.5 h-4 w-4 transition-transform group-hover:translate-x-1" />
+
+        {/* Footer Row */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2 text-[12px] font-medium text-zinc-600 dark:text-zinc-300">
+            <span
+              className={`h-1.5 w-1.5 rounded-full ${statusDotClass} dark:shadow-[0_0_8px_currentColor]`}
+            />
+            {progressText}
+          </div>
+          <div className="flex items-center px-3 py-1 rounded-full border border-zinc-200 bg-zinc-50 text-zinc-700 dark:border-white/5 dark:bg-[#1b2234] text-[11.5px] font-medium dark:text-zinc-300 transition-colors dark:group-hover:bg-white/10 dark:group-hover:text-white group-hover:bg-zinc-100">
+            Resume{" "}
+            <ChevronRight className="ml-0.5 h-3.5 w-3.5 text-zinc-400 dark:text-zinc-500 transition-transform group-hover:translate-x-1" />
+          </div>
         </div>
       </div>
     </Link>
diff --git a/components/syllabus/module-card.tsx b/components/syllabus/module-card.tsx
index 806f27c..3fb4fae 100644
--- a/components/syllabus/module-card.tsx
+++ b/components/syllabus/module-card.tsx
@@ -104,18 +104,28 @@ export default function ModuleCard({
       {/* TOPICS - ALWAYS VISIBLE */}
       <div className="px-6 pb-6 md:px-8">
         <div className="flex flex-wrap gap-3">
-          {(module.topics || []).map((topic) => (
-            <Link
-              key={topic.id}
-              href={`/rgpv/${branch}/${semester}/${subject}/ai?topicId=${encodeURIComponent(
-                topic.id
-              )}`}
-              onClick={(e) => e.stopPropagation()}
-              className="rounded-full border border-border bg-background px-4 py-2 text-sm font-medium text-foreground transition hover:border-blue-500/40 hover:text-blue-500"
-            >
-              {topic.title}
-            </Link>
-          ))}
+          {(module.topics || []).map((topic, index) => {
+            const isString = typeof topic === "string";
+            const topicId = isString
+              ? (topic as string)
+              : (topic as { id: string }).id;
+            const topicTitle = isString
+              ? (topic as string)
+              : (topic as { title: string }).title;
+
+            return (
+              <Link
+                key={topicId || `topic-${index}`}
+                href={`/rgpv/${branch}/${semester}/${subject}/ai?topicId=${encodeURIComponent(
+                  topicId
+                )}`}
+                onClick={(e) => e.stopPropagation()}
+                className="rounded-full border border-border bg-background px-4 py-2 text-sm font-medium text-foreground transition hover:border-blue-500/40 hover:text-blue-500"
+              >
+                {topicTitle}
+              </Link>
+            );
+          })}
         </div>
       </div>
 
diff --git a/lib/content/index.ts b/lib/content/index.ts
index a073467..ff21bb2 100644
--- a/lib/content/index.ts
+++ b/lib/content/index.ts
@@ -98,11 +98,21 @@ export async function getTopicById(
   for (const syllabusModule of modules) {
     const topics = syllabusModule.topics ?? [];
 
-    const topic = topics.find((item) => item.id === topicId);
+    const topic = topics.find((item) => {
+      if (typeof item === "string") {
+        return item === topicId;
+      }
+      return (item as { id: string }).id === topicId;
+    });
 
     if (topic) {
+      const topicObj =
+        typeof topic === "string"
+          ? ({ id: topic, title: topic, slug: topic, displayOrder: 0 } as Topic)
+          : (topic as Topic);
+
       return {
-        topic,
+        topic: topicObj,
         module: {
           id: syllabusModule.id,
           number: syllabusModule.number,