diff --git a/app/rgpv/[branch]/page.tsx b/app/rgpv/[branch]/page.tsx
index ee83660..077e31c 100644
--- a/app/rgpv/[branch]/page.tsx
+++ b/app/rgpv/[branch]/page.tsx
@@ -17,7 +17,7 @@ export default async function BranchPage({ params }: BranchPageProps) {
   const { branch } = await params;
 
   return (
-    <main className="min-h-screen bg-background">
+    <main className="bg-background">
       <SemesterOverview branch={branch} />
     </main>
   );
diff --git a/components/breadcrumbs.tsx b/components/breadcrumbs.tsx
index c3e1516..4643ea0 100644
--- a/components/breadcrumbs.tsx
+++ b/components/breadcrumbs.tsx
@@ -2,7 +2,26 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { ChevronRight, Home } from "lucide-react";
+import { ChevronRight, Home, Sparkles } from "lucide-react";
+
+// Mapping dictionary for acronyms and friendly branch/path names
+const PATH_MAP: Record<string, string> = {
+  rgpv: "RGPV",
+  common: "1st Year Common",
+  aiml: "AI & Machine Learning",
+  cse: "Computer Science",
+  csit: "CS & Information Tech",
+  aids: "AI & Data Science",
+  csbs: "CS & Business Systems",
+  cscy: "Cyber Security",
+  civil: "Civil Engineering",
+  me: "Mechanical Eng.",
+  ec: "ECE",
+  ee: "Electrical Eng.",
+  eee: "EEE",
+  ei: "Instrumentation",
+  ex: "Electronics Eng.",
+};
 
 export function Breadcrumbs() {
   const pathname = usePathname();
@@ -11,70 +30,70 @@ export function Breadcrumbs() {
     pathname
   );
 
-  if (isWorkspaceFocusRoute) {
+  if (isWorkspaceFocusRoute || pathNames.length <= 1) {
     return null;
   }
 
-  if (pathNames.length <= 1) {
-    return null;
-  }
+  const formatSegment = (segment: string): string => {
+    const lower = segment.toLowerCase();
+    if (PATH_MAP[lower]) return PATH_MAP[lower];
+
+    if (/^semester-\d+$/.test(lower)) {
+      const num = lower.replace("semester-", "");
+      return `Semester ${num}`;
+    }
+
+    return decodeURIComponent(segment)
+      .replace(/-/g, " ")
+      .replace(/\b\w/g, (char) => char.toUpperCase());
+  };
 
   return (
-    <div
-      className={`mx-auto w-full ${isWorkspaceFocusRoute ? "max-w-[1500px] px-4 sm:px-4 lg:px-6" : "max-w-7xl px-6 lg:px-8"}`}
-    >
-      <nav
-        aria-label="breadcrumb"
-        className={isWorkspaceFocusRoute ? "py-2" : "py-4"}
-      >
-        <ol
-          className={`flex flex-wrap items-center gap-1.5 text-muted-foreground ${isWorkspaceFocusRoute ? "text-xs" : "text-sm"}`}
-        >
-          <li>
+    <div className="mx-auto w-full max-w-7xl px-4 sm:px-6 pt-4 sm:pt-6 pb-1 lg:px-8">
+      <nav aria-label="Breadcrumb">
+        <ol className="inline-flex max-w-full items-center gap-1.5 overflow-x-auto no-scrollbar whitespace-nowrap rounded-full border border-slate-200/80 bg-white/80 px-3.5 sm:px-4 py-1.5 text-xs font-medium text-slate-600 shadow-sm backdrop-blur-md dark:border-white/10 dark:bg-[#12121a]/80 dark:text-slate-400">
+          {/* Home button */}
+          <li className="shrink-0">
             <Link
               href="/"
-              className="flex items-center transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 rounded"
+              className="flex items-center gap-1 transition-colors hover:text-blue-600 dark:hover:text-blue-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 rounded"
               aria-label="Home"
             >
-              <Home
-                className={isWorkspaceFocusRoute ? "h-3.5 w-3.5" : "h-4 w-4"}
-              />
+              <Home className="h-3.5 w-3.5 text-slate-400 dark:text-slate-500" />
+              <span className="sr-only sm:not-sr-only sm:inline text-[11px] font-semibold text-slate-500 dark:text-slate-400">
+                Home
+              </span>
             </Link>
           </li>
+
           {pathNames.length > 0 && (
-            <ChevronRight
-              className={isWorkspaceFocusRoute ? "h-3.5 w-3.5" : "h-4 w-4"}
-            />
+            <ChevronRight className="h-3.5 w-3.5 text-slate-300 dark:text-slate-600 shrink-0" />
           )}
+
           {pathNames.map((link, index) => {
             const href = `/${pathNames.slice(0, index + 1).join("/")}`;
             const isLast = index === pathNames.length - 1;
-            const label = decodeURIComponent(link)
-              .replace(/-/g, " ")
-              .replace(/\b\w/g, (char) => char.toUpperCase());
+            const label = formatSegment(link);
 
             return (
-              <li key={href} className="flex items-center gap-1.5">
+              <li key={href} className="flex items-center gap-1.5 shrink-0">
                 {isLast ? (
                   <span
-                    className="font-medium text-foreground"
+                    className="inline-flex items-center gap-1.5 rounded-full bg-blue-50 px-2.5 py-0.5 font-semibold text-blue-700 dark:bg-blue-500/15 dark:text-blue-300 text-[11.5px]"
                     aria-current="page"
                   >
-                    {label}
+                    <Sparkles className="h-3 w-3 text-blue-500 dark:text-blue-400 shrink-0" />
+                    <span>{label}</span>
                   </span>
                 ) : (
                   <>
                     <Link
                       href={href}
-                      className="transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 rounded"
+                      className="transition-colors hover:text-blue-600 dark:hover:text-blue-400 text-slate-600 dark:text-slate-400 text-[11.5px]"
                     >
                       {label}
                     </Link>
-                    <ChevronRight
-                      className={
-                        isWorkspaceFocusRoute ? "h-3.5 w-3.5" : "h-4 w-4"
-                      }
-                    />
+                    <ChevronRight className="h-3.5 w-3.5 text-slate-300 dark:text-slate-600 shrink-0" />
                   </>
                 )}
               </li>
diff --git a/components/university/semester-overview.tsx b/components/university/semester-overview.tsx
index 6f5a1fa..91a00c8 100644
--- a/components/university/semester-overview.tsx
+++ b/components/university/semester-overview.tsx
@@ -2,193 +2,234 @@
 
 import Link from "next/link";
 import { motion } from "framer-motion";
-import { GraduationCap, ArrowRight, BookOpen } from "lucide-react";
+import { ArrowRight, Sparkles, Layers } from "lucide-react";
+import { branches } from "@/lib/data/branches";
 
 export default function SemesterOverview({ branch }: { branch: string }) {
-  const semesters =
-    branch === "common"
-      ? [
-          {
-            year: "1st Year",
-            description:
-              "Common curriculum for all engineering branches under RGPV.",
-            semesters: [
-              {
-                name: "Semester 1",
-                href: "/rgpv/common/semester-1",
-              },
-              {
-                name: "Semester 2",
-                href: "/rgpv/common/semester-2",
-              },
-            ],
-          },
-        ]
-      : [
-          {
-            year: "2nd Year",
-            description:
-              "Branch-specific core subjects and foundational engineering concepts.",
-            semesters: [
-              {
-                name: "Semester 3",
-                href: `/rgpv/${branch}/semester-3`,
-              },
-              {
-                name: "Semester 4",
-                href: `/rgpv/${branch}/semester-4`,
-              },
-            ],
-          },
-          {
-            year: "3rd Year",
-            description:
-              "Advanced technical subjects, electives, practical learning, and projects.",
-            semesters: [
-              {
-                name: "Semester 5",
-                href: `/rgpv/${branch}/semester-5`,
-              },
-              {
-                name: "Semester 6",
-                href: `/rgpv/${branch}/semester-6`,
-              },
-            ],
-          },
-          {
-            year: "4th Year",
-            description:
-              "Industry-focused subjects, major projects, internships, and specialization.",
-            semesters: [
-              {
-                name: "Semester 7",
-                href: `/rgpv/${branch}/semester-7`,
-              },
-              {
-                name: "Semester 8",
-                href: `/rgpv/${branch}/semester-8`,
-              },
-            ],
-          },
-        ];
+  const branchInfo = branches.find((b) => b.id === branch);
+  const branchDisplayName = branchInfo?.name || branch.toUpperCase();
+  const isCommon = branch === "common";
+
+  const yearsData = isCommon
+    ? [
+        {
+          year: "1st Year",
+          badge: "Foundation Year",
+          description:
+            "Universal engineering curriculum common across all RGPV branches.",
+          semesters: [
+            {
+              num: "01",
+              name: "Semester 1",
+              desc: "Physics Cycle • Foundational Engineering",
+              href: "/rgpv/common/semester-1",
+            },
+            {
+              num: "02",
+              name: "Semester 2",
+              desc: "Chemistry Cycle • Basic Applied Sciences",
+              href: "/rgpv/common/semester-2",
+            },
+          ],
+        },
+      ]
+    : [
+        {
+          year: "2nd Year",
+          badge: "Year II",
+          description: "Core engineering fundamentals & data structures.",
+          semesters: [
+            {
+              num: "03",
+              name: "Semester 3",
+              desc: "Core Subjects & Foundational Concepts",
+              href: `/rgpv/${branch}/semester-3`,
+            },
+            {
+              num: "04",
+              name: "Semester 4",
+              desc: "Systems, DBMS & Algorithm Design",
+              href: `/rgpv/${branch}/semester-4`,
+            },
+          ],
+        },
+        {
+          year: "3rd Year",
+          badge: "Year III",
+          description: "Advanced domain subjects, electives & practicals.",
+          semesters: [
+            {
+              num: "05",
+              name: "Semester 5",
+              desc: "Advanced Technical Subjects & Electives",
+              href: `/rgpv/${branch}/semester-5`,
+            },
+            {
+              num: "06",
+              name: "Semester 6",
+              desc: "Specialized Subjects & Minor Project",
+              href: `/rgpv/${branch}/semester-6`,
+            },
+          ],
+        },
+        {
+          year: "4th Year",
+          badge: "Year IV",
+          description: "Industry electives, major projects & internships.",
+          semesters: [
+            {
+              num: "07",
+              name: "Semester 7",
+              desc: "Advanced Electives & Major Project I",
+              href: `/rgpv/${branch}/semester-7`,
+            },
+            {
+              num: "08",
+              name: "Semester 8",
+              desc: "Industry Training & Capstone Project",
+              href: `/rgpv/${branch}/semester-8`,
+            },
+          ],
+        },
+      ];
 
   return (
-    <section className="relative overflow-hidden border-b border-border bg-background py-24">
-      <div className="absolute inset-0 -z-10">
-        {" "}
-        <div className="absolute left-0 top-0 h-[500px] w-[500px] rounded-full bg-blue-500/5 blur-[120px]" />{" "}
-        <div className="absolute right-0 bottom-0 h-[500px] w-[500px] rounded-full bg-indigo-500/5 blur-[120px]" />{" "}
+    <section className="relative overflow-hidden bg-background text-foreground py-16 sm:py-24 lg:py-28">
+      {/* Ambient background glows */}
+      <div className="pointer-events-none absolute inset-0 -z-10 overflow-hidden">
+        <div className="absolute -left-40 -top-40 h-[600px] w-[600px] rounded-full bg-blue-500/10 blur-[130px] dark:bg-blue-500/15" />
+        <div className="absolute right-0 top-1/4 h-[550px] w-[550px] rounded-full bg-indigo-500/10 blur-[130px] dark:bg-indigo-500/10" />
       </div>
 
-      <div className="mx-auto max-w-7xl px-6 lg:px-8">
-        {/* Header */}
+      <div className="mx-auto w-full max-w-6xl px-6 lg:px-8">
+        {/* Hero Header */}
         <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.5 }}
-          className="mx-auto mb-16 max-w-3xl text-center"
+          initial={{ opacity: 0, y: 14 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.45, ease: "easeOut" }}
+          className="mx-auto mb-12 max-w-3xl text-center"
         >
-          <div className="inline-flex items-center gap-2 rounded-full border border-blue-500/20 bg-blue-500/10 px-4 py-2 text-sm font-semibold text-blue-600 dark:text-blue-400">
-            <GraduationCap className="h-4 w-4" />
-            Academic Structure
+          {/* Badge */}
+          <div className="mb-4 inline-flex items-center gap-2 rounded-full border border-blue-500/20 bg-blue-500/10 px-4 py-1.5 text-xs font-semibold text-blue-600 dark:text-blue-400">
+            <Sparkles className="h-3.5 w-3.5" />
+            <span>{branchDisplayName}</span>
           </div>
 
-          <h2 className="mt-6 text-4xl font-extrabold tracking-tight text-foreground md:text-5xl leading-tight">
-            Semester Wise
-            <span className="block bg-gradient-to-r from-[#1D4ED8] to-indigo-600 bg-clip-text text-transparent pt-1 pb-2">
+          {/* Main Title */}
+          <h1 className="text-3xl font-extrabold tracking-tight sm:text-4xl md:text-5xl text-foreground leading-[1.15]">
+            Semester Wise{" "}
+            <span className="bg-gradient-to-r from-blue-600 via-indigo-600 to-cyan-500 bg-clip-text text-transparent dark:from-blue-400 dark:via-indigo-300 dark:to-cyan-400">
               Learning Path
             </span>
-          </h2>
+          </h1>
 
-          <p className="mt-6 text-lg leading-relaxed text-muted-foreground">
-            Navigate through your engineering journey semester by semester.
-            Access syllabus, previous year questions, Hyper AI, and learning
-            resources organized according to the official RGPV curriculum.
+          {/* Subtitle */}
+          <p className="mx-auto mt-4 max-w-xl text-base leading-relaxed text-muted-foreground">
+            Access official RGPV syllabus, previous year questions, and AI study
+            resources organized by semester.
           </p>
         </motion.div>
 
-        {/* Year Cards */}
-        <div
-          className={`grid gap-8 ${
-            branch === "common" ? "max-w-3xl mx-auto" : "lg:grid-cols-2"
-          }`}
-        >
-          {semesters.map((year, index) => (
-            <motion.div
-              key={year.year}
-              initial={{ opacity: 0, y: 25 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{
-                duration: 0.5,
-                delay: index * 0.08,
-              }}
-              className="rounded-[2rem] border border-border bg-card/50 p-8 backdrop-blur-xl"
-            >
-              <div className="mb-8 flex items-start gap-4">
-                <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-[#1D4ED8]/10">
-                  <BookOpen className="h-7 w-7 text-[#1D4ED8]" />
-                </div>
-
-                <div>
-                  <h3 className="text-3xl font-bold text-foreground">
-                    {year.year}
-                  </h3>
-
-                  <p className="mt-2 text-muted-foreground">
-                    {year.description}
-                  </p>
-                </div>
-              </div>
+        {/* Common Branch Layout (2-card Grid) */}
+        {isCommon ? (
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.45, delay: 0.1 }}
+            className="mx-auto max-w-3xl"
+          >
+            <div className="grid gap-6 sm:grid-cols-2">
+              {yearsData[0].semesters.map((sem) => (
+                <Link
+                  key={sem.name}
+                  href={sem.href}
+                  className="group relative flex flex-col justify-between overflow-hidden rounded-3xl border border-border bg-card/70 p-7 shadow-sm backdrop-blur-md transition-all duration-300 hover:border-blue-500/40 hover:bg-card hover:shadow-2xl dark:border-white/10 dark:bg-white/[0.03] dark:hover:bg-white/[0.06]"
+                >
+                  <div className="pointer-events-none absolute -right-12 -top-12 h-32 w-32 rounded-full bg-blue-500/10 blur-2xl transition-opacity duration-300 group-hover:opacity-100" />
 
-              <div className="grid gap-4 sm:grid-cols-2">
-                {year.semesters.map((semester) => (
-                  <Link
-                    key={semester.name}
-                    href={semester.href}
-                    className="group"
-                  >
-                    <div className="rounded-2xl border border-border bg-background/80 p-5 transition-all duration-300 hover:border-[#1D4ED8]/30 hover:shadow-lg">
-                      <div className="flex items-center justify-between">
-                        <div>
-                          <h4 className="font-semibold text-foreground">
-                            {semester.name}
-                          </h4>
+                  <div>
+                    <div className="flex items-center justify-between">
+                      <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-blue-600/10 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400 font-black text-base">
+                        {sem.num}
+                      </div>
+                      <span className="text-xs font-semibold text-muted-foreground">
+                        RGPV 1st Year
+                      </span>
+                    </div>
 
-                          <p className="mt-1 text-sm text-muted-foreground">
-                            Explore Subjects
-                          </p>
-                        </div>
+                    <h3 className="mt-6 text-2xl font-bold text-foreground group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+                      {sem.name}
+                    </h3>
+                    <p className="mt-2 text-sm text-muted-foreground leading-relaxed">
+                      {sem.desc}
+                    </p>
+                  </div>
 
-                        <ArrowRight className="h-5 w-5 text-[#1D4ED8] transition-transform duration-300 group-hover:translate-x-1" />
-                      </div>
+                  <div className="mt-8 flex items-center gap-2 text-sm font-semibold text-blue-600 dark:text-blue-400">
+                    <span>Explore Curriculum</span>
+                    <ArrowRight className="h-4 w-4 transition-transform duration-200 group-hover:translate-x-1" />
+                  </div>
+                </Link>
+              ))}
+            </div>
+          </motion.div>
+        ) : (
+          /* Non-Common Branches Layout (Clean 3-column Year Cards) */
+          <div className="grid gap-6 md:grid-cols-3">
+            {yearsData.map((yearBlock, idx) => (
+              <motion.div
+                key={yearBlock.year}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.45, delay: 0.1 + idx * 0.08 }}
+                className="group relative flex flex-col justify-between rounded-3xl border border-border bg-card/60 p-6 backdrop-blur-md transition-all duration-300 hover:border-blue-500/30 hover:bg-card dark:border-white/10 dark:bg-white/[0.025] dark:hover:bg-white/[0.05]"
+              >
+                <div>
+                  <div className="flex items-center justify-between mb-4">
+                    <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-500/10 text-blue-600 dark:text-blue-400">
+                      <Layers className="h-5 w-5" />
                     </div>
-                  </Link>
-                ))}
-              </div>
-            </motion.div>
-          ))}
-        </div>
+                    <span className="rounded-full bg-blue-500/10 px-3 py-1 text-xs font-semibold text-blue-600 dark:text-blue-400 border border-blue-500/20">
+                      {yearBlock.badge}
+                    </span>
+                  </div>
 
-        {/* Bottom Section */}
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.5 }}
-          className="mt-16 rounded-[2rem] border border-border bg-card/40 p-10 text-center backdrop-blur-xl"
-        >
-          <h3 className="text-2xl font-bold text-foreground">
-            Structured For Long-Term Learning
-          </h3>
+                  <h3 className="text-xl font-bold text-foreground">
+                    {yearBlock.year}
+                  </h3>
+                  <p className="mt-1 text-xs text-muted-foreground">
+                    {yearBlock.description}
+                  </p>
 
-          <p className="mx-auto mt-4 max-w-3xl text-muted-foreground">
-            Every semester is connected with subjects, syllabus topics, previous
-            year questions, and Hyper AI resources to create a complete academic
-            learning ecosystem.
-          </p>
-        </motion.div>
+                  <div className="mt-6 flex flex-col gap-3">
+                    {yearBlock.semesters.map((sem) => (
+                      <Link
+                        key={sem.name}
+                        href={sem.href}
+                        className="group/sem flex items-center justify-between rounded-2xl border border-border bg-background/80 p-4 transition-all duration-200 hover:border-blue-500/40 hover:bg-background hover:shadow-md dark:border-white/5 dark:bg-white/[0.02] dark:hover:bg-white/[0.06]"
+                      >
+                        <div className="flex items-center gap-3">
+                          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-600/10 text-blue-600 dark:bg-blue-400/20 dark:text-blue-400 text-xs font-bold">
+                            {sem.num}
+                          </div>
+                          <div>
+                            <h4 className="text-sm font-semibold text-foreground group-hover/sem:text-blue-600 dark:group-hover/sem:text-blue-400 transition-colors">
+                              {sem.name}
+                            </h4>
+                            <p className="text-[11px] text-muted-foreground">
+                              {sem.desc}
+                            </p>
+                          </div>
+                        </div>
+                        <ArrowRight className="h-4 w-4 text-muted-foreground group-hover/sem:translate-x-1 group-hover/sem:text-blue-600 dark:group-hover/sem:text-blue-400 transition-all shrink-0" />
+                      </Link>
+                    ))}
+                  </div>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        )}
       </div>
     </section>
   );