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/navbar.tsx b/components/navbar.tsx
index faf5819..da8ab58 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,53 +119,72 @@ export default function Navbar() {
 
   return (
     <header
-      className={`sticky top-0 z-50 transition-all duration-300 ${
+      className={`sticky top-0 z-50 transition-all duration-500 ${
         scrolled
-          ? "border-b border-[#00008B]/20 bg-[#00008B]/95 shadow-md backdrop-blur-xl supports-[backdrop-filter]:bg-[#00008B]/80"
-          : "bg-[#00008B] border-transparent"
+          ? "border-b border-border/50 dark:border-white/5 bg-background/85 dark:bg-[#0B1528]/85 shadow-sm backdrop-blur-md supports-[backdrop-filter]:bg-background/70 dark:supports-[backdrop-filter]:bg-[#0B1528]/70"
+          : "bg-background dark:bg-gradient-to-r dark:from-[#0B1528] dark:to-[#0A101D] border-b border-border/50 dark:border-white/5"
       }`}
     >
       <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={`relative px-3 py-1.5 text-[14px] font-medium tracking-[0.02em] transition-colors duration-200 rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8]/50 dark:focus-visible:ring-white/50 ${
+                    isActive
+                      ? "text-foreground dark:text-white"
+                      : "text-muted-foreground hover:text-foreground dark:text-[#AFC8FF] dark:hover:text-white after:absolute after:bottom-[4px] after:left-3 after:right-3 after:h-[1px] after:bg-foreground/60 dark:after:bg-white/60 after:scale-x-0 after:origin-right hover:after:origin-left hover:after:scale-x-100 after:transition-transform after:duration-300 after:ease-out"
+                  }`}
+                >
+                  {isActive && (
+                    <motion.div
+                      className="absolute inset-0 rounded-full bg-black/[0.04] border border-black/10 dark:bg-white/[0.06] dark:border-white/10"
+                      initial={{ opacity: 0, scale: 0.95 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      transition={{ duration: 0.25, ease: "easeOut" }}
+                    />
+                  )}
+                  <span className="relative z-10">{link.label}</span>
+                </Link>
+              );
+            })}
           </nav>
 
           {/* Desktop Actions */}
@@ -134,26 +192,26 @@ export default function Navbar() {
             <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]"
+              className="relative flex h-10 w-10 items-center justify-center rounded-full text-foreground/80 transition-colors duration-200 hover:bg-black/5 hover:text-foreground dark:text-white/90 dark:hover:bg-white/10 dark:hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8]/50 dark:focus-visible:ring-white/50"
             >
               {mounted &&
                 (theme === "dark" ? (
-                  <Sun className="h-5 w-5" />
+                  <Sun className="h-[18px] w-[18px]" />
                 ) : (
-                  <Moon className="h-5 w-5" />
+                  <Moon className="h-[18px] w-[18px]" />
                 ))}
             </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="rounded-xl border border-border px-5 py-2 text-[14px] font-medium text-foreground transition-all duration-300 hover:border-border/80 hover:bg-muted dark:border-white/15 dark:text-[#F4F5F7] dark:hover:border-white/25 dark:hover:bg-white/5 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 +223,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 +240,56 @@ 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-[#0B1528]/95 backdrop-blur-md 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"
+                  className="flex w-full items-center justify-center rounded-xl border border-border px-4 py-3 text-foreground/90 transition-all duration-200 hover:bg-black/5 hover:text-foreground dark:border-white/15 dark:text-white/90 dark:hover:bg-white/5 dark:hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8]/50 dark:focus-visible:ring-white/50"
                 >
                   {mounted &&
                     (theme === "dark" ? (
-                      <Sun className="h-5 w-5" />
+                      <Sun className="h-[18px] w-[18px]" />
                     ) : (
-                      <Moon className="h-5 w-5" />
+                      <Moon className="h-[18px] w-[18px]" />
                     ))}
                 </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-border px-4 py-3 text-center text-[15px] font-medium text-foreground transition-all duration-200 hover:bg-muted dark:border-white/15 dark:text-[#F4F5F7] dark:hover:bg-white/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8]/50 dark:focus-visible:ring-white/50"
                 >
                   Sign In
                 </Link>
@@ -227,7 +297,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..d1eea24 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,46 @@ 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="absolute -inset-x-4 -inset-y-2 bg-[#1D4ED8]/8 blur-xl rounded-full dark:bg-[#1D4ED8]/10"
+                  aria-hidden="true"
+                />
+                <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 +154,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 +162,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 +171,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,9 +207,9 @@ 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">
+            <div className="relative rounded-[2rem] border border-border/50 dark:border-white/[0.08] bg-background/80 p-6 shadow-[0_0_40px_rgba(29,78,216,0.08)] dark:shadow-[0_0_40px_rgba(29,78,216,0.15)] backdrop-blur-xl">
               {/* Chat Header */}
-              <div className="mb-6 flex items-center justify-between border-b border-border pb-4">
+              <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]" />
@@ -160,7 +218,11 @@ export default function Hero() {
                   <div>
                     <h3 className="font-semibold text-foreground">Hyper AI</h3>
 
-                    <p className="text-xs text-muted-foreground">
+                    <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>
@@ -170,14 +232,14 @@ export default function Hero() {
               <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">
+                  <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>
 
                 {/* 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="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]" />
@@ -188,12 +250,12 @@ export default function Hero() {
                       </span>
                     </div>
 
-                    <p className="text-sm leading-7 text-foreground/80">
+                    <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">
+                    <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
@@ -203,31 +265,31 @@ export default function Hero() {
                 </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]">
+                <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" />
+                  <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" />
+                    <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" />
+                    <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>
 
                 {/* Input Box */}
-                <div className="rounded-2xl border border-border bg-background px-4 py-3">
+                <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...
diff --git a/features/landing/universities.tsx b/features/landing/universities.tsx
index 32fb948..140dd84 100644
--- a/features/landing/universities.tsx
+++ b/features/landing/universities.tsx
@@ -112,7 +112,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 +121,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 +145,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-500/20 hover:shadow-[0_10px_40px_-10px_rgba(59,130,246,0.15)] ${
                     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" />
@@ -193,7 +193,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}