diff --git a/app/(public)/creators/page.tsx b/app/(public)/creators/page.tsx
index 43b06ef..9a89538 100644
--- a/app/(public)/creators/page.tsx
+++ b/app/(public)/creators/page.tsx
@@ -9,8 +9,6 @@ import {
   Users,
   Code2,
   Palette,
-  BrainCircuit,
-  Award,
   GraduationCap,
 } from "lucide-react";
 import { FaGithub, FaLinkedin, FaTwitter, FaInstagram } from "react-icons/fa";
@@ -138,8 +136,6 @@ export default function TeamPage() {
             className="grid gap-6 md:grid-cols-2 lg:grid-cols-3"
           >
             {teamMembers.map((member) => {
-              const Icon = member.icon;
-
               return (
                 <motion.div
                   key={member.id}
diff --git a/app/globals.css b/app/globals.css
index 7fad8dc..c9ceb44 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@custom-variant dark (&:is(.dark *));
 
 @layer base {
   :root {
@@ -78,3 +79,33 @@
 ::-webkit-scrollbar-thumb:hover {
   background: hsl(var(--muted-foreground));
 }
+
+/* Hero Badge Shimmer */
+@keyframes badge-shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+.badge-shimmer {
+  background-image: linear-gradient(
+    110deg,
+    transparent 25%,
+    rgba(59, 130, 246, 0.12) 37%,
+    transparent 50%
+  );
+  background-size: 200% 100%;
+  animation: badge-shimmer 4s ease-in-out infinite;
+}
+
+.dark .badge-shimmer {
+  background-image: linear-gradient(
+    110deg,
+    transparent 25%,
+    rgba(96, 165, 250, 0.08) 37%,
+    transparent 50%
+  );
+}
diff --git a/components/footer.tsx b/components/footer.tsx
index 6c66e49..119ef3c 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -1,168 +1,481 @@
+"use client";
+
+import React, { useState, useRef, useEffect } from "react";
 import Link from "next/link";
-import { Mail, BookOpen, GraduationCap } from "lucide-react";
 import Image from "next/image";
+import { Mail, Zap, Shield, Users, Bell, Globe } from "lucide-react";
+
+const GithubIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
+    <path d="M9 18c-4.51 2-5-2-7-2" />
+  </svg>
+);
+
+const LinkedinIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
+    <rect width="4" height="12" x="2" y="9" />
+    <circle cx="4" cy="4" r="2" />
+  </svg>
+);
+
+const TwitterIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" />
+  </svg>
+);
+
+const InstagramIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
+    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
+    <line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
+  </svg>
+);
+
+const SocialDropdown = ({
+  icon: Icon,
+  label,
+  links,
+  size = "sm",
+  hoverClass,
+}: {
+  icon: React.ElementType;
+  label: string;
+  links: { name: string; url: string }[];
+  size?: "sm" | "md";
+  hoverClass?: string;
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const baseClasses =
+    size === "md"
+      ? "group flex h-[36px] w-[36px] items-center justify-center rounded-full border border-slate-200 dark:border-white/[0.08] bg-white dark:bg-white/[0.01] text-slate-500 dark:text-slate-400 shadow-sm dark:shadow-[inset_0_1px_1px_rgba(255,255,255,0.02)] transition-all duration-300 ease-out hover:-translate-y-0.5 "
+      : "group flex h-[32px] w-[32px] items-center justify-center rounded-full border border-slate-200 dark:border-white/[0.08] bg-white dark:bg-white/[0.01] text-slate-500 dark:text-slate-400 shadow-sm dark:shadow-[inset_0_1px_1px_rgba(255,255,255,0.02)] transition-all duration-300 ease-out hover:-translate-y-0.5 ";
+
+  const btnClasses =
+    baseClasses +
+    (hoverClass ||
+      "hover:border-blue-500/40 dark:hover:border-blue-500/40 hover:bg-blue-50 dark:hover:bg-blue-500/5 hover:text-blue-600 dark:hover:text-blue-400 hover:shadow-md dark:hover:shadow-[0_0_15px_rgba(59,130,246,0.2),inset_0_1px_1px_rgba(255,255,255,0.1)]");
+
+  const iconClasses =
+    size === "md"
+      ? "h-[17px] w-[17px] transition-transform duration-300 group-hover:scale-105"
+      : "h-[16px] w-[16px] transition-transform duration-300 group-hover:scale-105";
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <button
+        onClick={(e) => {
+          e.preventDefault();
+          setIsOpen(!isOpen);
+        }}
+        aria-label={label}
+        className={btnClasses}
+      >
+        <Icon className={iconClasses} />
+      </button>
+
+      {isOpen && (
+        <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-[150px] rounded-[14px] border border-slate-200 dark:border-white/10 bg-white/90 dark:bg-[#0a101f]/90 shadow-lg dark:shadow-[0_8px_32px_rgba(0,0,0,0.4),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-xl z-50 overflow-hidden transform animate-in fade-in zoom-in-95 duration-200">
+          <div className="p-1.5 flex flex-col gap-1">
+            {links.map((link: { name: string; url: string }, i: number) => (
+              <a
+                key={i}
+                href={link.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={() => setIsOpen(false)}
+                className="block px-3 py-2 text-[12px] font-medium text-slate-600 dark:text-slate-300 rounded-[10px] hover:bg-slate-100 dark:hover:bg-white/10 hover:text-slate-900 dark:hover:text-white transition-colors"
+              >
+                {link.name}
+              </a>
+            ))}
+          </div>
+          {/* Small arrow indicator */}
+          <div className="absolute -bottom-[5px] left-1/2 -translate-x-1/2 w-2.5 h-2.5 rotate-45 border-r border-b border-slate-200 dark:border-white/10 bg-white/90 dark:bg-[#0a101f]/90 backdrop-blur-xl"></div>
+        </div>
+      )}
+    </div>
+  );
+};
 
 export default function Footer() {
   return (
-    <footer className="relative mt-12 border-t border-white/5 bg-[#020617] pt-12 pb-6">
-      <div className="absolute top-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-blue-500/40 to-transparent" />
-
-      <div className="relative mx-auto max-w-7xl px-6 lg:px-8">
-        <div className="grid gap-10 lg:grid-cols-5 lg:gap-8">
-          {/* Brand */}
-          <div className="lg:col-span-2">
-            <Link href="/" className="group inline-flex items-center gap-3">
-              <div className="relative flex h-10 w-10 items-center justify-center overflow-hidden rounded-xl bg-white/5 p-1.5 shadow-sm ring-1 ring-white/10 transition-all group-hover:bg-blue-500/10 group-hover:ring-blue-500/30">
+    <footer className="relative -mt-10 border-t border-[#D8E2F0] dark:border-white/[0.04] bg-[#F5F7FF] dark:bg-[#020617] overflow-hidden">
+      {/* Premium ambient light effect at the top */}
+      <div className="absolute top-0 inset-x-0 flex justify-center pointer-events-none">
+        <div className="w-[80%] h-[1px] bg-gradient-to-r from-transparent via-blue-500/10 dark:via-blue-500/20 to-transparent" />
+        <div className="absolute top-0 w-[40%] h-[150px] bg-blue-500/5 blur-[120px] rounded-full" />
+      </div>
+
+      {/* Premium Outer wrapper */}
+      <div className="relative mx-auto max-w-[1600px] px-6 py-10 md:px-12 lg:px-16 xl:px-20 z-10">
+        {/* Top Section */}
+        <div className="flex flex-col xl:flex-row xl:justify-between gap-10 xl:gap-8">
+          {/* Brand - Flexible Width */}
+          <div className="flex flex-col shrink-0 xl:w-[260px] xl:pr-6 pt-1.5">
+            <Link
+              href="/"
+              className="group inline-flex items-center gap-3.5 w-fit"
+            >
+              <div className="relative flex h-[54px] w-[54px] items-center justify-center overflow-hidden rounded-[14px] bg-white dark:bg-white/[0.02] p-1.5 shadow-sm dark:shadow-[inset_0_1px_1px_rgba(255,255,255,0.05)] ring-1 ring-slate-200 dark:ring-white/[0.08] transition-all duration-500 ease-[cubic-bezier(0.25,1,0.5,1)] group-hover:bg-blue-50 dark:group-hover:bg-blue-500/10 group-hover:ring-blue-200 dark:group-hover:ring-blue-500/30 group-hover:shadow-[0_0_20px_rgba(59,130,246,0.15)]">
                 <Image
                   src="/hl-logo.png"
                   alt="Hyper Learning Logo"
-                  width={32}
-                  height={32}
+                  width={46}
+                  height={46}
                   className="object-contain"
                 />
               </div>
-
               <div>
-                <h2 className="text-lg font-bold tracking-tight text-white transition-colors group-hover:text-blue-400">
+                <h2 className="text-[23px] font-bold tracking-tight text-slate-900 dark:text-transparent dark:bg-gradient-to-r dark:from-white dark:to-white/70 dark:bg-clip-text transition-all duration-300 group-hover:text-blue-600 dark:group-hover:to-white">
                   Hyper Learning
                 </h2>
-                <p className="text-xs font-semibold tracking-wide text-blue-500/80">
+                <p className="text-[10.5px] font-semibold tracking-[0.2em] uppercase text-blue-500 dark:text-indigo-300 mt-0.5">
                   AI-Powered Learning
                 </p>
               </div>
             </Link>
 
-            <p className="mt-4 max-w-sm text-sm leading-relaxed text-white/50">
-              Transforming how engineering students learn. Get ahead with
-              AI-generated notes, precise syllabus mapping, and interactive exam
-              preparation.
+            <p className="mt-5 max-w-[240px] text-[12.5px] leading-[1.6] text-slate-700 dark:text-slate-200 font-medium">
+              AI-powered learning platform for engineering students.
             </p>
 
-            <div className="mt-6 flex items-center gap-3">
+            <div className="mt-7 flex items-center gap-3">
               <a
                 href="mailto:contact@hyperlearning.tech"
-                className="group flex h-9 w-9 items-center justify-center rounded-full border border-white/10 bg-white/5 text-white/60 transition-all duration-300 hover:border-[#EA4335]/50 hover:bg-[#EA4335]/10 hover:text-[#EA4335] hover:shadow-[0_0_12px_rgba(234,67,53,0.15)]"
+                className="group flex h-[40px] w-[40px] items-center justify-center rounded-full border border-slate-200 dark:border-white/[0.08] bg-white dark:bg-white/[0.01] text-slate-500 dark:text-slate-400 shadow-sm dark:shadow-[inset_0_1px_1px_rgba(255,255,255,0.02)] transition-all duration-300 ease-out hover:-translate-y-0.5 hover:border-blue-200 dark:hover:border-red-500/40 hover:bg-blue-50 dark:hover:bg-red-500/5 hover:text-blue-600 dark:hover:text-red-400 hover:shadow-[0_0_15px_rgba(59,130,246,0.3)] dark:hover:shadow-[0_0_15px_rgba(239,68,68,0.2),inset_0_1px_1px_rgba(255,255,255,0.1)]"
+                aria-label="Email"
               >
-                <Mail className="h-4 w-4 transition-transform group-hover:scale-110" />
+                <Mail strokeWidth={2.5} className="h-[19px] w-[19px]" />
               </a>
               <a
                 href="https://github.com/imuniqueshiv"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="group flex h-9 w-9 items-center justify-center rounded-full border border-white/10 bg-white/5 text-white/60 transition-all duration-300 hover:border-white/20 hover:bg-white/10 hover:text-white hover:shadow-[0_0_15px_rgba(255,255,255,0.1)]"
+                className="group flex h-[40px] w-[40px] items-center justify-center rounded-full border border-slate-200 dark:border-white/[0.08] bg-white dark:bg-white/[0.01] text-slate-500 dark:text-slate-400 shadow-sm dark:shadow-[inset_0_1px_1px_rgba(255,255,255,0.02)] transition-all duration-300 ease-out hover:-translate-y-0.5 hover:border-blue-200 dark:hover:border-white/40 hover:bg-blue-50 dark:hover:bg-white/5 hover:text-blue-600 dark:hover:text-white hover:shadow-[0_0_15px_rgba(59,130,246,0.3)] dark:hover:shadow-[0_0_15px_rgba(255,255,255,0.15),inset_0_1px_1px_rgba(255,255,255,0.1)]"
+                aria-label="GitHub"
               >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="18"
-                  height="18"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  className="transition-transform group-hover:scale-110"
-                >
-                  <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
-                  <path d="M9 18c-4.51 2-5-2-7-2" />
-                </svg>
+                <GithubIcon className="h-[19px] w-[19px] transition-transform duration-300 group-hover:scale-105" />
+              </a>
+              <a
+                href="https://twitter.com/imuniqueshiv"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="group flex h-[40px] w-[40px] items-center justify-center rounded-full border border-slate-200 dark:border-white/[0.08] bg-white dark:bg-white/[0.01] text-slate-500 dark:text-slate-400 shadow-sm dark:shadow-[inset_0_1px_1px_rgba(255,255,255,0.02)] transition-all duration-300 ease-out hover:-translate-y-0.5 hover:border-blue-200 dark:hover:border-sky-500/40 hover:bg-blue-50 dark:hover:bg-sky-500/5 hover:text-blue-600 dark:hover:text-sky-400 hover:shadow-[0_0_15px_rgba(59,130,246,0.3)] dark:hover:shadow-[0_0_15px_rgba(14,165,233,0.2),inset_0_1px_1px_rgba(255,255,255,0.1)]"
+                aria-label="Twitter"
+              >
+                <TwitterIcon className="h-[19px] w-[19px] transition-transform duration-300 group-hover:scale-105" />
+              </a>
+              <a
+                href="https://www.linkedin.com/in/shiv-raj-singh-387973299/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="group flex h-[40px] w-[40px] items-center justify-center rounded-full border border-slate-200 dark:border-white/[0.08] bg-white dark:bg-white/[0.01] text-slate-500 dark:text-slate-400 shadow-sm dark:shadow-[inset_0_1px_1px_rgba(255,255,255,0.02)] transition-all duration-300 ease-out hover:-translate-y-0.5 hover:border-blue-200 dark:hover:border-[#0A66C2]/40 hover:bg-blue-50 dark:hover:bg-[#0A66C2]/5 hover:text-blue-600 dark:hover:text-[#0A66C2] hover:shadow-[0_0_15px_rgba(59,130,246,0.3)] dark:hover:shadow-[0_0_15px_rgba(10,102,194,0.3),inset_0_1px_1px_rgba(255,255,255,0.1)]"
+                aria-label="LinkedIn"
+              >
+                <LinkedinIcon className="h-[19px] w-[19px] transition-transform duration-300 group-hover:scale-105" />
               </a>
             </div>
           </div>
 
-          {/* Platform */}
-          <div>
-            <h3 className="mb-6 text-[13px] font-bold uppercase tracking-[0.2em] text-white/80">
-              Platform
-            </h3>
-            <ul className="space-y-4">
-              {["Subjects", "Universities", "Dashboard", "Student Login"].map(
-                (item, i) => (
-                  <li key={i}>
+          {/* Navigation Container */}
+          <div className="flex flex-col gap-10 sm:flex-row sm:gap-8 xl:gap-10 shrink-0">
+            {/* Platform */}
+            <div className="flex flex-col sm:w-[130px] xl:border-l border-slate-200 dark:border-white/[0.03] xl:pl-8">
+              <h3 className="mb-3 text-[11px] font-extrabold uppercase tracking-[0.2em] text-black dark:text-white/90">
+                Platform
+              </h3>
+              <div className="mb-5 h-[1.5px] w-[23px] rounded-full bg-slate-200 dark:bg-transparent dark:bg-gradient-to-r dark:from-blue-500 dark:to-indigo-500/50" />
+              <ul className="space-y-3.5">
+                {[
+                  { name: "Subjects", href: "/subjects" },
+                  { name: "Universities", href: "/#Universities" },
+                  { name: "Dashboard", href: "/dashboard" },
+                  { name: "Student Login", href: "/sign-in" },
+                ].map((item) => (
+                  <li key={item.name}>
                     <Link
-                      href={
-                        item === "Universities"
-                          ? "/#Universities"
-                          : item === "Student Login"
-                            ? "/sign-in"
-                            : `/${item.toLowerCase()}`
-                      }
-                      className="group relative flex w-fit items-center text-[15px] font-medium text-slate-400 transition-all duration-300 hover:text-white"
+                      href={item.href}
+                      className="group flex w-fit items-center text-[14px] font-medium text-slate-500 dark:text-slate-400 transition-all duration-300 ease-[cubic-bezier(0.25,1,0.5,1)] hover:translate-x-1 hover:text-blue-600 dark:hover:text-white whitespace-nowrap"
                     >
-                      <span className="relative mr-3 flex h-1.5 w-1.5 shrink-0 items-center justify-center">
-                        <span className="absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-0 transition-all duration-500 group-hover:scale-[2.5] group-hover:opacity-20" />
-                        <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-white/30 transition-colors duration-300 group-hover:bg-blue-400" />
+                      <span className="mr-2.5 text-[14px] text-slate-300 dark:text-slate-700/50 transition-all duration-300 group-hover:text-blue-500 dark:group-hover:text-blue-400 group-hover:drop-shadow-[0_0_6px_rgba(59,130,246,0.5)]">
+                        •
                       </span>
-                      <span className="transition-transform duration-300 group-hover:translate-x-1">
-                        {item}
+                      {item.name}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            {/* Learning */}
+            <div className="flex flex-col sm:w-[130px] sm:border-l border-slate-200 dark:border-white/[0.03] sm:pl-8">
+              <h3 className="mb-3 text-[11px] font-extrabold uppercase tracking-[0.2em] text-black dark:text-white/90">
+                Learning
+              </h3>
+              <div className="mb-5 h-[1.5px] w-[23px] rounded-full bg-slate-200 dark:bg-transparent dark:bg-gradient-to-r dark:from-blue-500 dark:to-indigo-500/50" />
+              <ul className="space-y-3.5">
+                {[
+                  { name: "AI Notes", href: "/rgpv" },
+                  { name: "PYQs", href: "/rgpv" },
+                  { name: "AI Tutor", href: "/rgpv" },
+                  { name: "Syllabus", href: "/rgpv" },
+                ].map((item) => (
+                  <li key={item.name}>
+                    <Link
+                      href={item.href}
+                      className="group flex w-fit items-center text-[14px] font-medium text-slate-500 dark:text-slate-400 transition-all duration-300 ease-[cubic-bezier(0.25,1,0.5,1)] hover:translate-x-1 hover:text-blue-600 dark:hover:text-white whitespace-nowrap"
+                    >
+                      <span className="mr-2.5 text-[14px] text-slate-300 dark:text-slate-700/50 transition-all duration-300 group-hover:text-blue-500 dark:group-hover:text-blue-400 group-hover:drop-shadow-[0_0_6px_rgba(59,130,246,0.5)]">
+                        •
                       </span>
+                      {item.name}
                     </Link>
                   </li>
-                )
-              )}
-            </ul>
-          </div>
+                ))}
+              </ul>
+            </div>
 
-          {/* Learning */}
-          <div>
-            <h3 className="mb-6 text-[13px] font-bold uppercase tracking-[0.2em] text-white/80">
-              Learning
-            </h3>
-            <ul className="space-y-4">
-              {["AI Notes", "PYQs", "AI Tutor", "Syllabus"].map((item, i) => (
-                <li key={i}>
-                  <Link
-                    href="/rgpv"
-                    className="group relative flex w-fit items-center text-[15px] font-medium text-slate-400 transition-all duration-300 hover:text-white"
-                  >
-                    <span className="relative mr-3 flex h-1.5 w-1.5 shrink-0 items-center justify-center">
-                      <span className="absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-0 transition-all duration-500 group-hover:scale-[2.5] group-hover:opacity-20" />
-                      <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-white/30 transition-colors duration-300 group-hover:bg-blue-400" />
-                    </span>
-                    <span className="transition-transform duration-300 group-hover:translate-x-1">
-                      {item}
-                    </span>
-                  </Link>
-                </li>
-              ))}
-            </ul>
+            {/* Company */}
+            <div className="flex flex-col sm:w-[130px] sm:border-l border-slate-200 dark:border-white/[0.03] sm:pl-8">
+              <h3 className="mb-3 text-[11px] font-extrabold uppercase tracking-[0.2em] text-black dark:text-white/90">
+                Company
+              </h3>
+              <div className="mb-5 h-[1.5px] w-[23px] rounded-full bg-slate-200 dark:bg-transparent dark:bg-gradient-to-r dark:from-blue-500 dark:to-indigo-500/50" />
+              <ul className="space-y-3.5">
+                {[
+                  { name: "About Us", href: "/about" },
+                  { name: "Contact", href: "/contact" },
+                  { name: "Creators", href: "/creators" },
+                  { name: "Privacy Policy", href: "/" },
+                ].map((item) => (
+                  <li key={item.name}>
+                    <Link
+                      href={item.href}
+                      className="group flex w-fit items-center text-[14px] font-medium text-slate-500 dark:text-slate-400 transition-all duration-300 ease-[cubic-bezier(0.25,1,0.5,1)] hover:translate-x-1 hover:text-blue-600 dark:hover:text-white whitespace-nowrap"
+                    >
+                      <span className="mr-2.5 text-[14px] text-slate-300 dark:text-slate-700/50 transition-all duration-300 group-hover:text-blue-500 dark:group-hover:text-blue-400 group-hover:drop-shadow-[0_0_6px_rgba(59,130,246,0.5)]">
+                        •
+                      </span>
+                      {item.name}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
           </div>
 
-          {/* Company */}
-          <div>
-            <h3 className="mb-6 text-[13px] font-bold uppercase tracking-[0.2em] text-white/80">
-              Company
-            </h3>
-            <ul className="space-y-4">
-              {["About", "Contact", "Creators", "Privacy"].map((item, i) => (
-                <li key={i}>
-                  <Link
-                    href={item === "Privacy" ? "/" : `/${item.toLowerCase()}`}
-                    className="group relative flex w-fit items-center text-[15px] font-medium text-slate-400 transition-all duration-300 hover:text-white"
-                  >
-                    <span className="relative mr-3 flex h-1.5 w-1.5 shrink-0 items-center justify-center">
-                      <span className="absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-0 transition-all duration-500 group-hover:scale-[2.5] group-hover:opacity-20" />
-                      <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-white/30 transition-colors duration-300 group-hover:bg-blue-400" />
-                    </span>
-                    <span className="transition-transform duration-300 group-hover:translate-x-1">
-                      {item}
-                    </span>
-                  </Link>
-                </li>
+          {/* Feature Cards */}
+          <div className="w-full xl:border-l xl:border-slate-200 dark:xl:border-white/[0.03] xl:pl-10">
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 h-full">
+              {[
+                {
+                  title: "AI-Powered",
+                  desc: "Smarter learning for better results",
+                  icon: Zap,
+                },
+                {
+                  title: "Trusted & Secure",
+                  desc: "Your data is safe and protected",
+                  icon: Shield,
+                },
+                {
+                  title: "Built for Engineers",
+                  desc: "Designed by learners, for learners",
+                  icon: Users,
+                },
+                {
+                  title: "Always Updated",
+                  desc: "New content & features added",
+                  icon: Bell,
+                },
+              ].map((feature, idx) => (
+                <div
+                  key={idx}
+                  className="group relative flex h-full min-h-[140px] flex-col items-center justify-center overflow-hidden rounded-[16px] border border-[#D8E2F0] dark:border-white/[0.04] bg-gradient-to-b from-white to-[#FBFCFF] dark:bg-transparent dark:bg-gradient-to-b dark:from-white/[0.06] dark:to-white/[0.02] p-4 text-center shadow-[0_12px_30px_rgba(15,23,42,0.08)] dark:shadow-[0_4px_12px_rgba(0,0,0,0.15)] backdrop-blur-md transition-all duration-500 ease-[cubic-bezier(0.25,1,0.5,1)] hover:-translate-y-1 hover:border-blue-200 dark:hover:border-blue-500/30 hover:shadow-[0_15px_40px_rgba(59,130,246,0.1)] dark:hover:shadow-[0_8px_32px_rgba(59,130,246,0.12),inset_0_1px_1px_rgba(255,255,255,0.05)]"
+                >
+                  {/* Faint Inner Top Highlight */}
+                  <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/80 dark:via-white/30 to-transparent" />
+
+                  {/* Icon with Radial Blue Glow */}
+                  <div className="relative mb-3.5 flex items-center justify-center">
+                    <div className="absolute inset-0 bg-blue-100 dark:bg-blue-500/20 blur-[12px] rounded-full transition-all duration-500 group-hover:bg-blue-200 dark:group-hover:bg-blue-500/40" />
+                    <feature.icon
+                      className="relative z-10 h-[22px] w-[22px] text-blue-600 dark:text-blue-400/80 transition-all duration-500 ease-[cubic-bezier(0.25,1,0.5,1)] group-hover:scale-110 group-hover:text-blue-500 dark:group-hover:text-blue-300 group-hover:drop-shadow-[0_0_12px_rgba(59,130,246,0.3)] dark:group-hover:drop-shadow-[0_0_12px_rgba(59,130,246,0.6)]"
+                      strokeWidth={1.75}
+                    />
+                  </div>
+
+                  <h4 className="text-[13px] font-extrabold tracking-wide text-slate-900 dark:text-white/80 drop-shadow-sm dark:drop-shadow-[0_1px_2px_rgba(255,255,255,0.15)]">
+                    {feature.title}
+                  </h4>
+                  <p className="mt-2 text-[11px] leading-[1.6] text-slate-500 dark:text-slate-300/80 font-medium">
+                    {feature.desc}
+                  </p>
+                </div>
               ))}
-            </ul>
+            </div>
           </div>
         </div>
 
-        {/* Divider & Bottom Section */}
-        <div className="mt-12 flex flex-col items-center justify-center gap-3 border-t border-white/10 pt-6 pb-2">
-          <p className="text-center text-xs font-medium text-white/40">
+        {/* Bottom Section */}
+        <div className="mt-10 flex h-auto flex-col items-center justify-between gap-5 rounded-[20px] border border-[#C2D4EA] dark:border-white/[0.05] bg-[#EDF2F8] dark:bg-white/[0.01] backdrop-blur-lg px-6 py-4 shadow-sm dark:shadow-[0_8px_32px_rgba(0,0,0,0.12),inset_0_1px_0_rgba(255,255,255,0.04)] lg:h-[48px] lg:flex-row lg:rounded-full lg:px-8 lg:py-0 transition-all hover:border-slate-300 dark:hover:border-white/[0.08]">
+          {/* Left: Copyright */}
+          <p className="text-[11.5px] font-medium text-slate-500 dark:text-slate-400/80 shrink-0">
             © {new Date().getFullYear()} Hyper Learning. All rights reserved.
           </p>
-          <p className="max-w-xl text-center text-[11px] font-medium text-white/30">
-            Disclaimer: Some content may contain errors. Please cross-check and
-            share corrections via our feedback section.
+
+          {/* Center: Disclaimer */}
+          <p className="text-[11.5px] font-medium text-slate-500 dark:text-slate-400/80 text-center flex-1 mx-4">
+            <span className="text-slate-700 dark:text-slate-300">
+              Disclaimer:
+            </span>{" "}
+            Some content may contain errors. Please cross-check and share
+            corrections via our feedback section.
           </p>
+
+          {/* Right: Socials */}
+          <div className="flex items-center gap-4 shrink-0">
+            <span className="text-[11px] font-bold tracking-wider uppercase text-slate-900 dark:text-slate-400/80">
+              Follow Us
+            </span>
+            <div className="flex items-center gap-2">
+              {[
+                {
+                  icon: InstagramIcon,
+                  label: "Instagram",
+                  hoverClass:
+                    "hover:bg-blue-600 hover:border-blue-600 hover:text-white hover:shadow-md dark:hover:border-pink-500/40 dark:hover:bg-pink-500/5 dark:hover:text-pink-400 dark:hover:shadow-[0_0_15px_rgba(236,72,153,0.2),inset_0_1px_1px_rgba(255,255,255,0.1)]",
+                  links: [
+                    {
+                      name: "Nitin's Instagram",
+                      url: "https://www.instagram.com/nitin__.pandey/",
+                    },
+                    {
+                      name: "Ramu's Instagram",
+                      url: "https://www.instagram.com/frrr_ace/",
+                    },
+                  ],
+                },
+                {
+                  icon: LinkedinIcon,
+                  label: "LinkedIn",
+                  hoverClass:
+                    "hover:bg-blue-600 hover:border-blue-600 hover:text-white hover:shadow-md dark:hover:border-[#0A66C2]/40 dark:hover:bg-[#0A66C2]/5 dark:hover:text-[#0A66C2] dark:hover:shadow-[0_0_15px_rgba(10,102,194,0.3),inset_0_1px_1px_rgba(255,255,255,0.1)]",
+                  links: [
+                    {
+                      name: "Nitin's LinkedIn",
+                      url: "https://linkedin.com/in/nitin-mohan-9251ab328",
+                    },
+                    {
+                      name: "Ramu's LinkedIn",
+                      url: "https://www.linkedin.com/in/ramoo-kachhee-9b1616405/",
+                    },
+                  ],
+                },
+                {
+                  icon: GithubIcon,
+                  label: "GitHub",
+                  hoverClass:
+                    "hover:bg-blue-600 hover:border-blue-600 hover:text-white hover:shadow-md dark:hover:border-white/40 dark:hover:bg-white/5 dark:hover:text-white dark:hover:shadow-[0_0_15px_rgba(255,255,255,0.15),inset_0_1px_1px_rgba(255,255,255,0.1)]",
+                  links: [
+                    {
+                      name: "Nitin's GitHub",
+                      url: "https://github.com/nitinmohan18",
+                    },
+                    {
+                      name: "Ramu's GitHub",
+                      url: "https://github.com/RamuuXfree",
+                    },
+                  ],
+                },
+              ].map((social, idx) => (
+                <SocialDropdown
+                  key={idx}
+                  size="sm"
+                  icon={social.icon}
+                  label={social.label}
+                  links={social.links}
+                  hoverClass={social.hoverClass}
+                />
+              ))}
+
+              {/* Direct Link to Nitin's Portfolio */}
+              <a
+                href="https://nitinpandey-portfolio.vercel.app/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="group flex h-[32px] w-[32px] items-center justify-center rounded-full border border-slate-200 dark:border-white/[0.08] bg-white dark:bg-white/[0.01] text-slate-500 dark:text-slate-400 shadow-sm dark:shadow-[inset_0_1px_1px_rgba(255,255,255,0.02)] transition-all duration-300 ease-out hover:-translate-y-0.5 hover:bg-blue-600 hover:border-blue-600 hover:text-white hover:shadow-md dark:hover:border-emerald-500/40 dark:hover:bg-emerald-500/5 dark:hover:text-emerald-400 dark:hover:shadow-[0_0_15px_rgba(16,185,129,0.2),inset_0_1px_1px_rgba(255,255,255,0.1)]"
+                aria-label="Portfolio"
+              >
+                <Globe
+                  strokeWidth={2.5}
+                  className="h-[16px] w-[16px] transition-transform duration-300 group-hover:scale-105"
+                />
+              </a>
+            </div>
+          </div>
         </div>
       </div>
     </footer>
diff --git a/components/navbar.tsx b/components/navbar.tsx
index faf5819..6a3ff2f 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -2,11 +2,11 @@
 
 import Link from "next/link";
 import Image from "next/image";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { Menu, X, Sun, Moon } from "lucide-react";
 import { motion, AnimatePresence } from "framer-motion";
 import { useTheme } from "next-themes";
-import { useRouter } from "next/navigation";
+import { useRouter, usePathname } from "next/navigation";
 
 const navLinks = [
   {
@@ -33,6 +33,9 @@ export default function Navbar() {
   const { theme, setTheme } = useTheme();
   const [mounted, setMounted] = useState(false);
   const router = useRouter();
+  const pathname = usePathname();
+  const [activeSection, setActiveSection] = useState<string>("/#Home");
+  const isClickScrolling = useRef(false);
 
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -41,9 +44,34 @@ export default function Navbar() {
 
     const handleScroll = () => {
       setScrolled(window.scrollY > 20);
+
+      if (!isClickScrolling.current) {
+        const sections = navLinks
+          .filter((link) => link.href.startsWith("/#"))
+          .map((link) => link.href.substring(2));
+
+        let current = "";
+        for (const section of sections) {
+          const element = document.getElementById(section);
+          if (element) {
+            const rect = element.getBoundingClientRect();
+            if (rect.top <= 120 && rect.bottom >= 120) {
+              current = section;
+              break;
+            }
+          }
+        }
+
+        if (current) {
+          setActiveSection(`/#${current}`);
+        } else if (window.scrollY < 100) {
+          setActiveSection("/#Home");
+        }
+      }
     };
 
     window.addEventListener("scroll", handleScroll, { passive: true });
+    handleScroll();
 
     return () => {
       clearTimeout(timer);
@@ -62,16 +90,27 @@ export default function Navbar() {
       const element = document.getElementById(targetId);
 
       if (element) {
+        isClickScrolling.current = true;
+        setActiveSection(href);
         element.scrollIntoView({ behavior: "smooth", block: "start" });
         // Close mobile menu if open
         setIsOpen(false);
+
+        setTimeout(() => {
+          isClickScrolling.current = false;
+        }, 800);
       } else {
         // If element not found, navigate to home and then scroll
         router.push("/");
         setTimeout(() => {
           const el = document.getElementById(targetId);
           if (el) {
+            isClickScrolling.current = true;
+            setActiveSection(href);
             el.scrollIntoView({ behavior: "smooth", block: "start" });
+            setTimeout(() => {
+              isClickScrolling.current = false;
+            }, 800);
           }
         }, 100);
       }
@@ -80,80 +119,127 @@ export default function Navbar() {
 
   return (
     <header
-      className={`sticky top-0 z-50 transition-all duration-300 ${
+      className={`dark sticky top-0 z-50 transition-all duration-500 border-b border-white/10 ${
         scrolled
-          ? "border-b border-[#00008B]/20 bg-[#00008B]/95 shadow-md backdrop-blur-xl supports-[backdrop-filter]:bg-[#00008B]/80"
-          : "bg-[#00008B] border-transparent"
+          ? "bg-[#091A40]/85 shadow-[0_8px_30px_rgb(0,0,0,0.12)] backdrop-blur-xl supports-[backdrop-filter]:bg-[#091A40]/70"
+          : "bg-gradient-to-r from-[#061126] via-[#0D245A] to-[#061126]"
       }`}
     >
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
-        <div className="flex h-20 items-center justify-between">
+        <div className="flex h-16 md:h-[72px] items-center justify-between">
           {/* Logo */}
           <Link
             href="/"
-            className="flex items-center gap-3 transition-opacity duration-200 hover:opacity-90"
+            className="group flex items-center gap-3.5 transition-opacity duration-300 hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8]/50 dark:focus-visible:ring-white/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background dark:focus-visible:ring-offset-[#0B1528] rounded-lg"
           >
-            <div className="relative h-12 w-12 flex-shrink-0">
+            <div className="relative h-10 w-10 md:h-11 md:w-11 flex-shrink-0 transition-transform duration-300 group-hover:scale-[1.02]">
               <Image
                 src="/hl-logo.png"
                 alt="Hyper Learning Official Logo"
-                width={48}
-                height={48}
+                width={44}
+                height={44}
                 className="object-contain"
                 priority
               />
             </div>
 
-            <div>
-              <span className="block text-xl font-bold text-[#F4F5F7]">
+            <div className="flex flex-col justify-center">
+              <span className="block text-lg md:text-[20px] font-extrabold tracking-tighter text-foreground dark:text-[#F4F5F7]">
                 Hyper Learning
               </span>
-
-              <p className="text-xs text-[#AFC8FF]">
+              <p className="text-[11px] md:text-xs font-medium text-muted-foreground dark:text-[#94A3B8] mt-0.5">
                 AI-Powered Learning Platform
               </p>
             </div>
           </Link>
 
           {/* Desktop Navigation */}
-          <nav className="hidden items-center gap-8 md:flex">
-            {navLinks.map((link) => (
-              <Link
-                key={link.label}
-                href={link.href}
-                onClick={(e) => handleNavClick(e, link.href)}
-                className="text-[15px] font-medium text-[#AFC8FF] transition-all duration-200 hover:text-white"
-              >
-                {link.label}
-              </Link>
-            ))}
+          <nav className="hidden items-center gap-2 md:flex">
+            {navLinks.map((link) => {
+              const isActive =
+                (pathname === "/" &&
+                  link.href.startsWith("/#") &&
+                  activeSection === link.href) ||
+                (pathname === link.href && !link.href.startsWith("/#"));
+
+              return (
+                <Link
+                  key={link.label}
+                  href={link.href}
+                  onClick={(e) => handleNavClick(e, link.href)}
+                  className={`group relative px-4 py-2 text-[14.5px] tracking-[0.01em] transition-colors duration-200 rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 ${
+                    isActive
+                      ? "text-foreground font-semibold dark:text-white"
+                      : "text-muted-foreground font-medium hover:text-foreground dark:text-slate-300 dark:hover:text-white"
+                  }`}
+                >
+                  {isActive && (
+                    <motion.div
+                      layoutId="activeNavIndicator"
+                      className="absolute inset-0 rounded-full bg-white border border-black/5 shadow-[0_1px_3px_rgba(0,0,0,0.08),inset_0_1px_0_rgba(255,255,255,0.6)] dark:bg-white/[0.08] dark:border-white/[0.08] dark:shadow-[inset_0_1px_1px_rgba(255,255,255,0.15),0_2px_4px_rgba(0,0,0,0.2)] dark:backdrop-blur-md"
+                      transition={{
+                        type: "spring",
+                        stiffness: 350,
+                        damping: 30,
+                      }}
+                    />
+                  )}
+                  <span className="relative z-10">{link.label}</span>
+
+                  {/* Hover Underline */}
+                  {!isActive && (
+                    <span className="absolute bottom-1.5 left-1/2 h-[1.5px] w-[calc(100%-1.5rem)] -translate-x-1/2 origin-center scale-x-0 bg-gradient-to-r from-transparent via-blue-600/80 to-transparent transition-transform duration-500 ease-[cubic-bezier(0.25,1,0.5,1)] group-hover:scale-x-100 dark:via-white/70" />
+                  )}
+                </Link>
+              );
+            })}
           </nav>
 
           {/* Desktop Actions */}
           <div className="hidden items-center gap-3 md:flex">
-            <button
-              onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
-              aria-label="Toggle theme"
-              className="relative flex h-10 w-10 items-center justify-center text-white transition-all duration-200 hover:scale-110 hover:text-[#AFC8FF]"
-            >
-              {mounted &&
-                (theme === "dark" ? (
-                  <Sun className="h-5 w-5" />
-                ) : (
-                  <Moon className="h-5 w-5" />
-                ))}
-            </button>
+            {mounted && (
+              <button
+                onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+                aria-label="Toggle theme"
+                className="flex h-[34px] w-[68px] items-center overflow-hidden rounded-full border border-black/10 dark:border-white/15 bg-black/[0.02] dark:bg-black/20 shadow-[inset_0_1px_3px_rgba(0,0,0,0.06)] dark:shadow-[inset_0_2px_6px_rgba(0,0,0,0.3)] transition-all hover:border-black/20 dark:hover:border-white/25 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8]/50 dark:focus-visible:ring-white/50"
+              >
+                <div
+                  className={`flex h-full w-1/2 items-center justify-center transition-all duration-300 ${
+                    theme !== "dark"
+                      ? "bg-white dark:bg-white/15 shadow-[0_1px_3px_rgba(0,0,0,0.1)] dark:shadow-[0_1px_4px_rgba(0,0,0,0.2)]"
+                      : "hover:bg-black/5 dark:hover:bg-white/5"
+                  }`}
+                >
+                  <Sun
+                    strokeWidth={2.5}
+                    className={`h-[15px] w-[15px] ${theme !== "dark" ? "text-amber-600 drop-shadow-sm" : "text-slate-500 dark:text-white/40"}`}
+                  />
+                </div>
+                <div
+                  className={`flex h-full w-1/2 items-center justify-center transition-all duration-300 ${
+                    theme === "dark"
+                      ? "bg-white dark:bg-white/15 shadow-[0_1px_3px_rgba(0,0,0,0.1)] dark:shadow-[0_1px_4px_rgba(0,0,0,0.2)]"
+                      : "hover:bg-black/5 dark:hover:bg-white/5"
+                  }`}
+                >
+                  <Moon
+                    strokeWidth={2.5}
+                    className={`h-[15px] w-[15px] ${theme === "dark" ? "text-white drop-shadow-sm" : "text-slate-500 dark:text-white/40"}`}
+                  />
+                </div>
+              </button>
+            )}
 
             <Link
               href="/sign-in"
-              className="rounded-xl border border-white/20 px-4 py-2 text-sm font-medium text-[#F4F5F7] transition-all duration-200 hover:border-white/40 hover:bg-white/10"
+              className="flex h-[34px] items-center justify-center rounded-[14px] border border-black/10 dark:border-white/10 px-5 text-[14px] font-semibold text-foreground transition-all duration-300 bg-gradient-to-b from-black/[0.01] to-black/[0.05] dark:from-white/[0.08] dark:to-white/[0.01] backdrop-blur-md shadow-[inset_0_1px_0px_rgba(255,255,255,0.6),0_1px_2px_rgba(0,0,0,0.05)] dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.1),0_1px_2px_rgba(0,0,0,0.2)] hover:shadow-[inset_0_1px_0px_rgba(255,255,255,0.8),0_2px_6px_rgba(0,0,0,0.08)] dark:hover:shadow-[inset_0_1px_0px_rgba(255,255,255,0.15),0_2px_8px_rgba(0,0,0,0.3)] hover:-translate-y-[0.5px] hover:border-black/20 dark:hover:border-white/20 dark:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8]/50 dark:focus-visible:ring-white/50"
             >
               Sign In
             </Link>
 
             <Link
               href="/subjects"
-              className="rounded-xl bg-white px-5 py-2 text-sm font-semibold text-[#00008B] shadow-sm transition-all duration-200 hover:bg-slate-100"
+              className="rounded-xl bg-[#1D4ED8] px-5 py-2 text-[14px] font-semibold text-white shadow-sm transition-all duration-300 hover:bg-[#1E40AF] hover:scale-[1.01] hover:shadow dark:bg-white dark:text-[#0B1528] dark:hover:bg-[#F4F5F7] active:scale-[0.99] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8]/50 dark:focus-visible:ring-white/50"
             >
               Start Learning
             </Link>
@@ -165,7 +251,7 @@ export default function Navbar() {
             aria-expanded={isOpen}
             aria-controls="mobile-menu"
             aria-label={isOpen ? "Close menu" : "Open menu"}
-            className="rounded-lg p-2 text-white transition-colors hover:bg-white/10 md:hidden"
+            className="rounded-xl p-2 text-foreground dark:text-white transition-colors hover:bg-black/5 dark:hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8]/50 dark:focus-visible:ring-white/50 md:hidden"
           >
             {isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
           </button>
@@ -182,44 +268,69 @@ export default function Navbar() {
             initial={{ opacity: 0, height: 0 }}
             animate={{ opacity: 1, height: "auto" }}
             exit={{ opacity: 0, height: 0 }}
-            transition={{ duration: 0.25 }}
-            className="overflow-hidden border-t border-white/10 bg-[#00008B]/95 backdrop-blur-xl md:hidden"
+            transition={{ duration: 0.25, ease: "easeInOut" }}
+            className="overflow-hidden border-t border-border/50 dark:border-white/10 bg-background/95 dark:bg-[#091A40]/95 backdrop-blur-xl md:hidden"
           >
-            <div className="space-y-2 px-6 py-6">
-              {navLinks.map((link) => (
-                <Link
-                  key={link.label}
-                  href={link.href}
-                  onClick={(e) => {
-                    handleNavClick(e, link.href);
-                    setIsOpen(false);
-                  }}
-                  className="block rounded-xl px-4 py-3 text-[#AFC8FF] transition-all duration-200 hover:bg-white/10 hover:text-white"
-                >
-                  {link.label}
-                </Link>
-              ))}
+            <div className="space-y-1 px-6 py-6">
+              {navLinks.map((link) => {
+                const isActive =
+                  (pathname === "/" &&
+                    link.href.startsWith("/#") &&
+                    activeSection === link.href) ||
+                  (pathname === link.href && !link.href.startsWith("/#"));
+
+                return (
+                  <Link
+                    key={link.label}
+                    href={link.href}
+                    onClick={(e) => {
+                      handleNavClick(e, link.href);
+                      setIsOpen(false);
+                    }}
+                    className={`block rounded-xl px-4 py-3 text-[15px] font-medium tracking-[0.02em] transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8]/50 dark:focus-visible:ring-white/50 ${
+                      isActive
+                        ? "text-foreground bg-black/5 dark:text-white dark:bg-white/5"
+                        : "text-muted-foreground hover:bg-black/5 hover:text-foreground dark:text-[#AFC8FF] dark:hover:bg-white/5 dark:hover:text-white"
+                    }`}
+                  >
+                    {link.label}
+                  </Link>
+                );
+              })}
 
-              <div className="mt-4 flex flex-col gap-3">
+              <div className="mt-6 flex flex-col gap-3 border-t border-border/50 dark:border-white/10 pt-6">
                 <button
-                  onClick={() => {
-                    setTheme(theme === "dark" ? "light" : "dark");
-                    setIsOpen(false);
-                  }}
-                  className="flex items-center justify-center rounded-xl border border-white/20 px-4 py-3 text-[#F4F5F7] transition-all duration-200 hover:bg-white/10"
+                  onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+                  aria-label="Toggle theme"
+                  className="flex w-full items-center justify-between rounded-xl p-3 text-base font-medium text-foreground transition-colors hover:bg-black/5 dark:text-white/90 dark:hover:bg-white/10"
                 >
-                  {mounted &&
-                    (theme === "dark" ? (
-                      <Sun className="h-5 w-5" />
-                    ) : (
-                      <Moon className="h-5 w-5" />
-                    ))}
+                  <span>Theme</span>
+                  {mounted && (
+                    <div className="flex h-[34px] w-[68px] items-center overflow-hidden rounded-full border border-black/20 dark:border-white/25 bg-transparent">
+                      <div
+                        className={`flex h-full w-1/2 items-center justify-center transition-colors ${theme !== "dark" ? "bg-black/10 dark:bg-white/20" : ""}`}
+                      >
+                        <Sun
+                          strokeWidth={2.5}
+                          className={`h-[15px] w-[15px] ${theme !== "dark" ? "text-amber-600" : "text-slate-500 dark:text-white/60"}`}
+                        />
+                      </div>
+                      <div
+                        className={`flex h-full w-1/2 items-center justify-center transition-colors ${theme === "dark" ? "bg-black/10 dark:bg-white/20" : ""}`}
+                      >
+                        <Moon
+                          strokeWidth={2.5}
+                          className={`h-[15px] w-[15px] ${theme === "dark" ? "text-white" : "text-slate-500 dark:text-white/60"}`}
+                        />
+                      </div>
+                    </div>
+                  )}
                 </button>
 
                 <Link
                   href="/sign-in"
                   onClick={() => setIsOpen(false)}
-                  className="rounded-xl border border-white/20 px-4 py-3 text-center text-[#F4F5F7]"
+                  className="w-full rounded-xl border border-black/20 px-4 py-3 text-center text-[15px] font-semibold text-foreground transition-all duration-200 hover:bg-black/5 dark:border-white/25 dark:text-white dark:hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8]/50 dark:focus-visible:ring-white/50"
                 >
                   Sign In
                 </Link>
@@ -227,7 +338,7 @@ export default function Navbar() {
                 <Link
                   href="/subjects"
                   onClick={() => setIsOpen(false)}
-                  className="rounded-xl bg-white px-4 py-3 text-center font-semibold text-[#00008B]"
+                  className="w-full rounded-xl bg-[#1D4ED8] px-4 py-3 text-center text-[15px] font-semibold text-white shadow-sm transition-all duration-250 hover:bg-[#1E40AF] active:scale-[0.98] dark:bg-white dark:text-[#0B1528] dark:hover:bg-[#F4F5F7] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8]/50 dark:focus-visible:ring-white/50"
                 >
                   Start Learning
                 </Link>
diff --git a/features/landing/hero.tsx b/features/landing/hero.tsx
index 459bbf7..dc1e1da 100644
--- a/features/landing/hero.tsx
+++ b/features/landing/hero.tsx
@@ -1,8 +1,46 @@
 "use client";
 
+import { useEffect, useRef } from "react";
 import Link from "next/link";
-import { ArrowRight, BrainCircuit, Sparkles, CheckCircle2 } from "lucide-react";
-import { motion, Variants } from "framer-motion";
+import { ArrowRight, BrainCircuit, CheckCircle2 } from "lucide-react";
+import { motion, Variants, animate, useInView } from "framer-motion";
+
+function Counter({
+  from = 0,
+  to,
+  suffix = "",
+  prefix = "",
+}: {
+  from?: number;
+  to: number;
+  suffix?: string;
+  prefix?: string;
+}) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const inView = useInView(ref, { once: true, margin: "-100px" });
+
+  useEffect(() => {
+    if (inView && ref.current) {
+      animate(from, to, {
+        duration: 1.5,
+        ease: "easeOut",
+        onUpdate: (value) => {
+          if (ref.current) {
+            ref.current.textContent = `${prefix}${Math.round(value)}${suffix}`;
+          }
+        },
+      });
+    }
+  }, [inView, from, to, prefix, suffix]);
+
+  return (
+    <span ref={ref}>
+      {prefix}
+      {from}
+      {suffix}
+    </span>
+  );
+}
 
 export default function Hero() {
   const containerVariants: Variants = {
@@ -61,32 +99,42 @@ export default function Hero() {
           >
             {/* Badge */}
             <motion.div variants={itemVariants}>
-              <div className="mb-8 inline-flex items-center gap-2 rounded-full border border-blue-200/60 bg-blue-50/80 px-4 py-2 text-sm font-semibold text-blue-700 shadow-sm backdrop-blur-md dark:border-blue-500/20 dark:bg-blue-500/10 dark:text-blue-400">
-                <Sparkles className="h-4 w-4 text-blue-600 dark:text-blue-400" />
-                Trusted Learning Companion for Engineering Students
+              <div className="badge-shimmer mb-8 inline-flex items-center gap-2.5 rounded-full border border-blue-200/40 bg-blue-50/80 px-4 py-1.5 text-sm font-semibold text-blue-700 shadow-sm backdrop-blur-md dark:border-blue-500/15 dark:bg-blue-500/10 dark:text-blue-400">
+                <span className="relative flex h-2 w-2">
+                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75" />
+                  <span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-500" />
+                </span>
+                Smart Learning for Engineers
               </div>
             </motion.div>
 
             {/* Heading */}
             <motion.h1
               variants={itemVariants}
-              className="max-w-4xl text-5xl font-extrabold tracking-tight text-foreground md:text-6xl lg:text-7xl leading-[1.1]"
+              className="max-w-4xl text-5xl font-extrabold tracking-tight md:text-6xl lg:text-7xl leading-[1.05]"
             >
-              Learn Better.
-              <br />
-              <span className="bg-gradient-to-r from-[#1D4ED8] to-indigo-600 bg-clip-text text-transparent">
-                Study Smarter.
+              <span className="bg-gradient-to-b from-[hsl(var(--foreground))] to-[hsl(var(--muted-foreground))] bg-clip-text text-transparent">
+                Learn Better.
               </span>
               <br />
-              <span className="text-base font-medium italic text-muted-foreground md:text-xl lg:text-2xl">
-                &quot;Minimizing Distractions, Maximizing Clarity.&quot;
+              <span className="relative">
+                <span className="relative bg-gradient-to-r from-[#1D4ED8] to-indigo-500 bg-clip-text text-transparent">
+                  Study Smarter.
+                </span>
               </span>
             </motion.h1>
 
+            <motion.p
+              variants={itemVariants}
+              className="mt-6 mb-1 text-base font-normal text-muted-foreground/90 md:text-lg lg:text-xl tracking-wide"
+            >
+              &quot;Minimizing Distractions, Maximizing Clarity.&quot;
+            </motion.p>
+
             {/* Description */}
             <motion.p
               variants={itemVariants}
-              className="mt-6 max-w-2xl text-lg leading-relaxed text-muted-foreground"
+              className="mt-6 max-w-2xl text-lg leading-7 text-muted-foreground"
             >
               Access syllabus-mapped previous year questions, AI-powered notes,
               topic-wise explanations, and instant learning support designed to
@@ -102,7 +150,7 @@ export default function Hero() {
               <a
                 href="#Universities"
                 onClick={scrollToUniversities}
-                className="group relative inline-flex items-center justify-center gap-2 overflow-hidden rounded-xl bg-[#1D4ED8] px-8 py-4 font-semibold text-white shadow-lg shadow-blue-500/25 transition-all duration-300 hover:bg-[#1E40AF] hover:shadow-blue-500/40 hover:-translate-y-0.5"
+                className="group relative inline-flex items-center justify-center gap-2 overflow-hidden rounded-xl bg-[#1D4ED8] px-8 py-3.5 font-semibold text-white shadow-lg shadow-blue-500/25 transition-all duration-300 hover:bg-[#1E40AF] hover:shadow-blue-500/40 hover:-translate-y-0.5 active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8] focus-visible:ring-offset-2 focus-visible:ring-offset-background"
               >
                 Start Learning
                 <ArrowRight className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" />
@@ -110,7 +158,7 @@ export default function Hero() {
 
               <Link
                 href="/about"
-                className="inline-flex items-center justify-center rounded-xl border-2 border-border bg-background/50 px-8 py-4 font-semibold text-foreground backdrop-blur-sm transition-all duration-300 hover:border-[#1D4ED8] hover:bg-background hover:text-[#1D4ED8]"
+                className="inline-flex items-center justify-center rounded-xl border border-border bg-background/50 px-8 py-3.5 font-semibold text-foreground backdrop-blur-sm transition-all duration-300 hover:border-[#1D4ED8]/50 hover:bg-background hover:text-[#1D4ED8] active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8] focus-visible:ring-offset-2 focus-visible:ring-offset-background"
               >
                 Explore Platform
               </Link>
@@ -119,23 +167,29 @@ export default function Hero() {
             {/* Stats */}
             <motion.div
               variants={itemVariants}
-              className="mt-16 grid max-w-xl grid-cols-3 gap-6 border-t border-border/60 pt-10"
+              className="mt-14 grid max-w-xl grid-cols-3 divide-x divide-border/50 border-t border-border/60 pt-8"
             >
-              <div>
-                <p className="text-3xl font-black text-foreground">22-25</p>
-                <p className="mt-1.5 font-medium text-sm text-muted-foreground">
-                  PYQ Coverage
+              <div className="pr-6">
+                <p className="text-3xl font-extrabold tracking-tight text-foreground">
+                  <Counter to={25} suffix="+" />
+                </p>
+                <p className="mt-1.5 text-[11px] font-medium uppercase tracking-[0.2em] text-muted-foreground">
+                  Years of PYQs
                 </p>
               </div>
-              <div>
-                <p className="text-3xl font-black text-foreground">100%</p>
-                <p className="mt-1.5 font-medium text-sm text-muted-foreground">
+              <div className="px-6">
+                <p className="text-3xl font-extrabold tracking-tight text-foreground">
+                  <Counter to={100} suffix="%" />
+                </p>
+                <p className="mt-1.5 text-[11px] font-medium uppercase tracking-[0.2em] text-muted-foreground">
                   Syllabus Mapped
                 </p>
               </div>
-              <div>
-                <p className="text-3xl font-black text-foreground">24/7</p>
-                <p className="mt-1.5 font-medium text-sm text-muted-foreground">
+              <div className="pl-6">
+                <p className="text-3xl font-extrabold tracking-tight text-foreground">
+                  <Counter to={24} suffix="/7" />
+                </p>
+                <p className="mt-1.5 text-[11px] font-medium uppercase tracking-[0.2em] text-muted-foreground">
                   AI Assistant
                 </p>
               </div>
@@ -149,91 +203,101 @@ export default function Hero() {
             transition={{ duration: 0.8, ease: "easeOut", delay: 0.2 }}
             className="relative"
           >
-            <div className="relative rounded-[2rem] border border-border/60 bg-background/80 p-6 shadow-2xl backdrop-blur-xl">
-              {/* Chat Header */}
-              <div className="mb-6 flex items-center justify-between border-b border-border pb-4">
-                <div className="flex items-center gap-3">
-                  <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-[#1D4ED8]/10">
-                    <BrainCircuit className="h-5 w-5 text-[#1D4ED8]" />
-                  </div>
+            <div className="relative rounded-[2rem] border border-border/20 dark:border-white/[0.08] bg-transparent p-[5px] shadow-[0_0_20px_rgba(29,78,216,0.02)] dark:shadow-[0_0_30px_rgba(29,78,216,0.04)] backdrop-blur-xl">
+              <div className="relative h-full w-full rounded-[calc(2rem-5px)] border border-border/35 dark:border-white/[0.05] bg-background/80 p-6 shadow-inner">
+                {/* Chat Header */}
+                <div className="mb-6 flex items-center justify-between border-b border-border/50 pb-4">
+                  <div className="flex items-center gap-3">
+                    <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-[#1D4ED8]/10">
+                      <BrainCircuit className="h-5 w-5 text-[#1D4ED8]" />
+                    </div>
 
-                  <div>
-                    <h3 className="font-semibold text-foreground">Hyper AI</h3>
+                    <div>
+                      <h3 className="font-semibold text-foreground">
+                        Hyper AI
+                      </h3>
 
-                    <p className="text-xs text-muted-foreground">
-                      Online • Ready to Help
-                    </p>
+                      <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                        <span className="relative flex h-1.5 w-1.5">
+                          <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75" />
+                          <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-emerald-500" />
+                        </span>
+                        Online • Ready to Help
+                      </p>
+                    </div>
                   </div>
                 </div>
-              </div>
 
-              <div className="space-y-5">
-                {/* User Message */}
-                <div className="flex justify-end">
-                  <div className="max-w-[80%] rounded-2xl rounded-br-md bg-[#1D4ED8] px-5 py-3 text-sm font-medium text-white">
-                    Explain Big O notation with an example.
+                <div className="space-y-5">
+                  {/* User Message */}
+                  <div className="flex justify-end">
+                    <div className="max-w-[80%] rounded-tl-2xl rounded-tr-2xl rounded-bl-2xl rounded-br-sm bg-[#1D4ED8] px-5 py-3 text-sm font-medium text-white shadow-sm">
+                      Explain Big O notation with an example.
+                    </div>
                   </div>
-                </div>
 
-                {/* Hyper AI Message */}
-                <div className="flex justify-start">
-                  <div className="max-w-[90%] rounded-2xl rounded-bl-md border border-border bg-card px-5 py-4">
-                    <div className="mb-3 flex items-center gap-2">
-                      <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-[#1D4ED8]/10">
-                        <BrainCircuit className="h-4 w-4 text-[#1D4ED8]" />
-                      </div>
+                  {/* Hyper AI Message */}
+                  <div className="flex justify-start">
+                    <div className="max-w-[90%] rounded-tl-2xl rounded-tr-2xl rounded-br-2xl rounded-bl-sm border border-border/50 dark:border-white/[0.05] bg-card px-5 py-4 shadow-sm">
+                      <div className="mb-3 flex items-center gap-2">
+                        <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-[#1D4ED8]/10">
+                          <BrainCircuit className="h-4 w-4 text-[#1D4ED8]" />
+                        </div>
 
-                      <span className="text-sm font-semibold text-[#1D4ED8]">
-                        Hyper AI
-                      </span>
-                    </div>
+                        <span className="text-sm font-semibold text-[#1D4ED8]">
+                          Hyper AI
+                        </span>
+                      </div>
 
-                    <p className="text-sm leading-7 text-foreground/80">
-                      Big O notation represents the maximum growth rate of an
-                      algorithm as input size increases.
-                    </p>
+                      <p className="text-sm leading-6 text-foreground/80">
+                        Big O notation represents the maximum growth rate of an
+                        algorithm as input size increases.
+                      </p>
 
-                    <p className="mt-3 text-sm leading-7 text-foreground/80">
-                      For example, Linear Search has{" "}
-                      <span className="font-semibold text-[#1D4ED8]">O(n)</span>{" "}
-                      complexity because each element may need to be checked
-                      once.
-                    </p>
+                      <p className="mt-2.5 text-sm leading-6 text-foreground/80">
+                        For example, Linear Search has{" "}
+                        <span className="font-semibold text-[#1D4ED8]">
+                          O(n)
+                        </span>{" "}
+                        complexity because each element may need to be checked
+                        once.
+                      </p>
+                    </div>
                   </div>
-                </div>
 
-                {/* Related Questions */}
-                <div className="rounded-2xl border border-border bg-muted/30 p-5">
-                  <p className="text-xs font-bold uppercase tracking-wider text-[#1D4ED8]">
-                    Related Previous Year Questions
-                  </p>
+                  {/* Related Questions */}
+                  <div className="rounded-2xl border border-border/50 bg-muted/30 p-5">
+                    <p className="text-xs font-semibold uppercase tracking-wider text-[#1D4ED8]">
+                      Related Previous Year Questions
+                    </p>
 
-                  <div className="mt-4 space-y-3 text-sm font-medium text-foreground/80">
-                    <div className="flex items-center gap-2">
-                      <CheckCircle2 className="h-4 w-4 text-emerald-500" />
-                      Dec 2025 — Q1(b)
-                    </div>
+                    <div className="mt-2 space-y-1 text-sm font-medium text-foreground/80">
+                      <div className="group flex cursor-pointer items-center gap-2.5 rounded-lg px-2.5 py-2 transition-colors hover:bg-foreground/5 -mx-2.5">
+                        <CheckCircle2 className="h-4 w-4 text-emerald-500 transition-transform group-hover:scale-110" />
+                        Dec 2025 — Q1(b)
+                      </div>
 
-                    <div className="flex items-center gap-2">
-                      <CheckCircle2 className="h-4 w-4 text-emerald-500" />
-                      Jun 2025 — Q3(a)
-                    </div>
+                      <div className="group flex cursor-pointer items-center gap-2.5 rounded-lg px-2.5 py-2 transition-colors hover:bg-foreground/5 -mx-2.5">
+                        <CheckCircle2 className="h-4 w-4 text-emerald-500 transition-transform group-hover:scale-110" />
+                        Jun 2025 — Q3(a)
+                      </div>
 
-                    <div className="flex items-center gap-2">
-                      <CheckCircle2 className="h-4 w-4 text-emerald-500" />
-                      Dec 2024 — Q2
+                      <div className="group flex cursor-pointer items-center gap-2.5 rounded-lg px-2.5 py-2 transition-colors hover:bg-foreground/5 -mx-2.5">
+                        <CheckCircle2 className="h-4 w-4 text-emerald-500 transition-transform group-hover:scale-110" />
+                        Dec 2024 — Q2
+                      </div>
                     </div>
                   </div>
-                </div>
 
-                {/* Input Box */}
-                <div className="rounded-2xl border border-border bg-background px-4 py-3">
-                  <div className="flex items-center justify-between">
-                    <span className="text-sm text-muted-foreground">
-                      Ask Hyper AI anything...
-                    </span>
+                  {/* Input Box */}
+                  <div className="rounded-2xl border border-border/50 bg-muted/30 px-5 py-3.5 transition-all focus-within:border-primary/50 focus-within:ring-4 focus-within:ring-primary/10 hover:border-border cursor-text">
+                    <div className="flex items-center justify-between">
+                      <span className="text-sm text-muted-foreground">
+                        Ask Hyper AI anything...
+                      </span>
 
-                    <ArrowRight className="h-4 w-4 text-muted-foreground" />
+                      <ArrowRight className="h-4 w-4 text-muted-foreground" />
+                    </div>
                   </div>
                 </div>
               </div>
diff --git a/features/landing/universities.tsx b/features/landing/universities.tsx
index 32fb948..26bc78a 100644
--- a/features/landing/universities.tsx
+++ b/features/landing/universities.tsx
@@ -1,17 +1,8 @@
 "use client";
 
-import Link from "next/link";
 import { useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
-import {
-  GraduationCap,
-  ArrowRight,
-  Sparkles,
-  Search,
-  Building2,
-  BookOpen,
-  Clock,
-} from "lucide-react";
+import { GraduationCap, ArrowRight, Sparkles, Search } from "lucide-react";
 
 const universities = [
   {
@@ -81,9 +72,8 @@ export default function Universities() {
           className="mx-auto mb-6 max-w-3xl text-center"
         >
           <div className="mb-6 flex items-center justify-center">
-            <div className="group relative inline-flex items-center gap-2 rounded-full border border-blue-500/30 bg-blue-950/40 px-4 py-1.5 text-sm font-semibold text-blue-300 shadow-[0_0_20px_rgba(37,99,235,0.15)] backdrop-blur-xl transition-all hover:border-blue-400/60 hover:bg-blue-900/50 hover:shadow-[0_0_30px_rgba(37,99,235,0.3)]">
-              <div className="absolute inset-0 rounded-full bg-gradient-to-r from-blue-500/10 via-transparent to-indigo-500/10 pointer-events-none opacity-50 group-hover:opacity-100 transition-opacity" />
-              <GraduationCap className="relative z-10 h-4 w-4 text-blue-400 drop-shadow-[0_0_5px_rgba(96,165,250,0.5)]" />
+            <div className="group relative inline-flex items-center gap-2.5 rounded-full border border-blue-200/40 bg-blue-50/80 px-4 py-1.5 text-sm font-semibold text-blue-700 shadow-sm backdrop-blur-md dark:border-blue-500/15 dark:bg-blue-500/10 dark:text-blue-400 transition-all">
+              <GraduationCap className="relative z-10 h-4 w-4 text-blue-700 dark:text-blue-400" />
               <span className="relative z-10 tracking-wide">
                 University Support
               </span>
@@ -112,7 +102,7 @@ export default function Universities() {
           viewport={{ once: true }}
           className="mx-auto mb-10 max-w-2xl"
         >
-          <div className="relative group flex items-center justify-between rounded-full border border-white/10 bg-white/[0.03] p-2 shadow-2xl backdrop-blur-xl transition-all focus-within:border-blue-500/50 focus-within:bg-white/[0.05] focus-within:shadow-[0_0_30px_rgba(37,99,235,0.15)]">
+          <div className="relative group flex items-center justify-between rounded-full border border-border/50 dark:border-white/10 bg-background/80 dark:bg-white/[0.03] p-2 shadow-xl dark:shadow-2xl backdrop-blur-xl transition-all focus-within:border-blue-500/50 focus-within:bg-background dark:focus-within:bg-white/[0.05] focus-within:shadow-[0_0_30px_rgba(37,99,235,0.1)] dark:focus-within:shadow-[0_0_30px_rgba(37,99,235,0.15)]">
             <input
               type="text"
               aria-label="Search universities"
@@ -121,9 +111,9 @@ export default function Universities() {
               placeholder="Search universities by name, branch, or location..."
               className="w-full bg-transparent px-6 py-3 text-base text-foreground placeholder:text-muted-foreground/50 focus:outline-none"
             />
-            <div className="group/lens relative mr-1 flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-white/5 bg-white/[0.02] text-white/50 backdrop-blur-2xl transition-all duration-500 hover:scale-[1.03] hover:border-white/20 hover:bg-white/10 hover:text-white hover:shadow-[0_0_10px_rgba(255,255,255,0.05)] cursor-pointer active:scale-95 overflow-hidden">
-              <div className="absolute inset-0 rounded-full shadow-[inset_0_1px_1px_rgba(255,255,255,0.4)] pointer-events-none" />
-              <Search className="relative z-10 h-[18px] w-[18px] drop-shadow-md transition-transform duration-300 group-hover/lens:scale-[1.05]" />
+            <div className="group/lens relative mr-1 flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-border/50 bg-muted/50 text-muted-foreground transition-all duration-500 hover:scale-[1.03] hover:border-border hover:bg-muted hover:text-foreground hover:shadow-sm cursor-pointer active:scale-95 overflow-hidden">
+              <div className="absolute inset-0 rounded-full shadow-[inset_0_1px_1px_rgba(0,0,0,0.05)] dark:shadow-[inset_0_1px_1px_rgba(255,255,255,0.4)] pointer-events-none" />
+              <Search className="relative z-10 h-[18px] w-[18px] transition-transform duration-300 group-hover/lens:scale-[1.05]" />
             </div>
           </div>
         </motion.div>
@@ -145,11 +135,11 @@ export default function Universities() {
                   animate={{ opacity: 1, scale: 1 }}
                   exit={{ opacity: 0, scale: 0.9 }}
                   transition={{ duration: 0.3 }}
-                  className={`group relative flex flex-col overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-b from-white/5 to-transparent p-5 shadow-2xl backdrop-blur-xl transition-all duration-500 hover:-translate-y-[5.5px] hover:border-blue-500/20 hover:shadow-[0_10px_40px_-10px_rgba(59,130,246,0.15)] dark:from-white/5 dark:to-transparent ${
+                  className={`group relative flex flex-col overflow-hidden rounded-3xl border border-border/50 dark:border-white/10 bg-card dark:bg-gradient-to-b dark:from-white/5 dark:to-transparent p-5 shadow-lg dark:shadow-2xl backdrop-blur-xl transition-all duration-500 hover:-translate-y-[5.5px] hover:border-blue-400/30 hover:shadow-[0_0_15px_rgba(59,130,246,0.15)] dark:hover:border-blue-400/30 dark:hover:shadow-[0_0_15px_rgba(59,130,246,0.2)] ${
                     university.status === "Available" ? "cursor-pointer" : ""
                   }`}
                 >
-                  <div className="absolute inset-0 rounded-3xl border border-white/5 transition-colors pointer-events-none group-hover:border-blue-500/15" />
+                  <div className="absolute inset-0 rounded-3xl border border-border/50 dark:border-white/5 transition-colors pointer-events-none group-hover:border-blue-500/15" />
                   {/* Hover Glow */}
                   <div className="absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100">
                     <div className="absolute -right-10 -top-10 h-40 w-40 rounded-full bg-blue-500/15 blur-3xl dark:bg-blue-500/15" />
@@ -157,8 +147,8 @@ export default function Universities() {
 
                   {/* Badge */}
                   <div className="relative z-10 mb-4 flex items-center justify-between">
-                    <div className="flex h-14 w-14 items-center justify-center rounded-2xl border border-blue-500/20 bg-blue-500/10 text-blue-600 shadow-[inset_0_0_20px_rgba(59,130,246,0.1)] dark:text-blue-400">
-                      <GraduationCap className="h-7 w-7" />
+                    <div className="relative flex h-14 w-14 items-center justify-center rounded-2xl border border-blue-500/20 bg-gradient-to-br from-blue-500/10 via-indigo-500/10 to-purple-500/10 text-blue-600 shadow-[inset_0_1px_1px_rgba(255,255,255,0.4)] dark:border-blue-400/20 dark:from-blue-400/10 dark:via-indigo-400/10 dark:to-purple-400/10 dark:text-blue-400 dark:shadow-[inset_0_1px_1px_rgba(255,255,255,0.1)]">
+                      <GraduationCap className="relative z-10 h-7 w-7 drop-shadow-sm" />
                     </div>
 
                     <span
@@ -193,7 +183,7 @@ export default function Universities() {
                           className={`rounded-lg px-2.5 py-1 text-xs font-bold ring-1 ring-inset ${
                             university.status === "Available"
                               ? "bg-blue-50 text-blue-700 ring-blue-700/10 dark:bg-blue-500/10 dark:text-blue-300 dark:ring-blue-500/20"
-                              : "bg-white/[0.02] text-white/50 ring-white/10"
+                              : "bg-muted text-muted-foreground ring-border/50 dark:bg-white/[0.02] dark:text-white/50 dark:ring-white/10"
                           }`}
                         >
                           {branch}