diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index fd5eac86..4471692e 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,28 +1,74 @@
 import { NavLink, Link } from "react-router-dom";
-import { useState, useContext } from "react";
+import { useState, useContext, useRef, useEffect } from "react";
 import { ThemeContext } from "../context/ThemeContext";
-import { Moon, Sun, Menu, X, Github } from "lucide-react";
+import { Moon, Sun, Menu, X } from "lucide-react";
+
+const navItems = [
+  { to: "/", label: "Home" },
+  { to: "/track", label: "Tracker" },
+  { to: "/contributors", label: "Contributors" },
+  { to: "/login", label: "Login" },
+];
 
 const Navbar: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);
-
+  const [pillStyle, setPillStyle] = useState<{
+    left: number;
+    width: number;
+    opacity: number;
+  }>({ left: 0, width: 0, opacity: 0 });
+  
+  const [scrolled,setScrolled]= useState(false);
+  useEffect( () => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY>20);
+    };
+
+    handleScroll();
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => window.removeEventListener("scroll", handleScroll);
+  },[]);
+
+  const navRef = useRef<HTMLDivElement>(null);
   const themeContext = useContext(ThemeContext);
 
   if (!themeContext) return null;
 
   const { toggleTheme, mode } = themeContext;
 
-  const navLinkStyles = ({ isActive }: { isActive: boolean }) =>
-    `px-4 py-2 rounded-xl text-sm lg:text-base font-semibold transition-all duration-300 ${
+  const closeMenu = () => setIsOpen(false);
+
+  const handleMouseEnter = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    const nav = navRef.current;
+    const item = e.currentTarget;
+    if (!nav) return;
+    const navRect = nav.getBoundingClientRect();
+    const itemRect = item.getBoundingClientRect();
+    setPillStyle({
+      left: itemRect.left - navRect.left,
+      width: itemRect.width,
+      opacity: 1,
+    });
+  };
+
+  const handleMouseLeave = () => {
+    setPillStyle((prev) => ({ ...prev, opacity: 0 }));
+  };
+
+  const navLinkClass = ({ isActive }: { isActive: boolean }) =>
+    `relative z-10 px-4 py-2 rounded-xl text-sm lg:text-base font-semibold transition-colors duration-200 ${
       isActive
-        ? "text-blue-600 bg-blue-100 dark:bg-blue-900/40 shadow-sm"
-        : "text-slate-700 dark:text-gray-300 hover:text-blue-500"
+        ? "text-blue-600 dark:text-blue-400"
+        : "text-slate-700 dark:text-gray-300"
     }`;
 
-  const closeMenu = () => setIsOpen(false);
-
   return (
-    <nav className="sticky top-0 z-50 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 transition-colors duration-300 backdrop-blur">
+      <nav className={`sticky top-0 z-50 border-b transition-all duration-300 ${
+          scrolled
+            ? "bg-white/70 dark:bg-gray-900/70 backdrop-blur-2xl border-gray-200 dark:border-gray-800 shadow-sm"
+            : "bg-white dark:bg-gray-900 border-transparent"
+        }`}
+      >
       <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
 
         {/* Logo */}
@@ -35,27 +81,42 @@ const Navbar: React.FC = () => {
             alt="CRL Icon"
             className="h-8 w-8 object-contain"
           />
-
           <span>GitHub Tracker</span>
         </Link>
 
         {/* Desktop Navigation */}
-        <div className="hidden md:flex items-center gap-3">
-          <NavLink to="/" className={navLinkStyles}>
-            Home
-          </NavLink>
-
-          <NavLink to="/track" className={navLinkStyles}>
-            Tracker
-          </NavLink>
-
-          <NavLink to="/contributors" className={navLinkStyles}>
-            Contributors
-          </NavLink>
+        <div
+          ref={navRef}
+          className="hidden md:flex items-center gap-1 relative"
+          onMouseLeave={handleMouseLeave}
+        >
+          {/* Sliding pill */}
+          <span
+            className="absolute top-0 h-full rounded-xl bg-gray-100 dark:bg-gray-800 pointer-events-none"
+            style={{
+              left: pillStyle.left,
+              width: pillStyle.width,
+              opacity: pillStyle.opacity,
+              transition: "left 0.2s ease, width 0.2s ease, opacity 0.15s ease",
+              backdropFilter: "blur(20px)",
+              WebkitBackdropFilter: "blur(20px)",
+              background:
+                mode === "dark" ? "rgba(255,255,255,0.08)" : "rgba(255,255,255,0.35)",
+              boxShadow:
+                mode === "dark" ? "0 4px 20px rgba(0,0,0,0.25)" : "0 4px 20px rgba(0,0,0,0.08)",
+            }}
+          />
 
-          <NavLink to="/login" className={navLinkStyles}>
-            Login
-          </NavLink>
+          {navItems.map((item) => (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              onMouseEnter={handleMouseEnter}
+              className={navLinkClass}
+            >
+              {item.label}
+            </NavLink>
+          ))}
 
           {/* Theme Toggle */}
           <button
@@ -73,8 +134,6 @@ const Navbar: React.FC = () => {
 
         {/* Mobile Controls */}
         <div className="md:hidden flex items-center gap-2">
-
-          {/* Theme Toggle */}
           <button
             onClick={toggleTheme}
             className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
@@ -83,11 +142,10 @@ const Navbar: React.FC = () => {
             {mode === "dark" ? (
               <Sun className="h-5 w-5 text-yellow-400" />
             ) : (
-              <Moon className="h-5 w-5 text-white" />
+              <Moon className="h-5 w-5 text-black" />
             )}
           </button>
 
-          {/* Menu Toggle */}
           <button
             onClick={() => setIsOpen(!isOpen)}
             className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
@@ -104,40 +162,24 @@ const Navbar: React.FC = () => {
 
       {/* Mobile Menu */}
       {isOpen && (
-        <div className="md:hidden border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
+        <div className="md:hidden border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 ani-fade-in">
           <div className="px-6 py-5 flex flex-col gap-3">
-
-            <NavLink
-              to="/"
-              className={navLinkStyles}
-              onClick={closeMenu}
-            >
-              Home
-            </NavLink>
-
-            <NavLink
-              to="/track"
-              className={navLinkStyles}
-              onClick={closeMenu}
-            >
-              Tracker
-            </NavLink>
-
-            <NavLink
-              to="/contributors"
-              className={navLinkStyles}
-              onClick={closeMenu}
-            >
-              Contributors
-            </NavLink>
-
-            <NavLink
-              to="/login"
-              className={navLinkStyles}
-              onClick={closeMenu}
-            >
-              Login
-            </NavLink>
+            {navItems.map((item) => (
+              <NavLink
+                key={item.to}
+                to={item.to}
+                onClick={closeMenu}
+                className={({ isActive }) =>
+                  `px-4 py-2 rounded-xl text-sm font-semibold transition-all duration-300 ${
+                    isActive
+                      ? "text-blue-600 bg-blue-100 dark:bg-blue-900/40 shadow-sm"
+                      : "text-slate-700 dark:text-gray-300 hover:text-blue-500"
+                  }`
+                }
+              >
+                {item.label}
+              </NavLink>
+            ))}
           </div>
         </div>
       )}
@@ -145,4 +187,4 @@ const Navbar: React.FC = () => {
   );
 };
 
-export default Navbar;
+export default Navbar;
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 3f5943c5..b422a729 100644
--- a/src/index.css
+++ b/src/index.css
@@ -89,3 +89,21 @@
 .icon-issue-closed {
   color: #cf222e;
 }
+
+@layer utilities{
+  @keyframes fade-in{
+    from {
+      opacity:0; 
+      transform: translateY(20px); 
+      filter:blur(45px);
+    }
+    to{
+      opacity:1;
+      transform: translateY(0); 
+      filter:blur(0);
+    }
+  }
+  .ani-fade-in{
+    animation: fade-in 0.8s ease-out both;
+  }
+}
\ No newline at end of file