diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 1350193..bf983b6 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,12 +1,35 @@
-import { NavLink, Link, useNavigate, useLocation } from "react-router-dom";
-import { useState, useContext } from "react";
+import { NavLink, Link } from "react-router-dom";
+import { useState, useContext, useRef, useEffect } from "react";
 import { ThemeContext } from "../context/ThemeContext";
 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 [user, setUser] = useState<NavbarUser | null>(() => readStoredUser());
-
+  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);
   const navigate = useNavigate();
   const location = useLocation();
@@ -16,55 +39,39 @@ const Navbar: React.FC = () => {
   const { toggleTheme, mode } = themeContext;
   const { isAuthenticated, isLoading, logout } = authContext;
 
-  const navLinkStyles = ({ isActive }: { isActive: boolean }) =>
-    `px-4 py-2 rounded-xl text-sm lg:text-base font-semibold transition-all duration-300 ${
-      isActive
-        ? "text-blue-600 bg-blue-100 dark:text-blue-400 dark:bg-blue-900/40 shadow-sm"
-        : "text-slate-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-50 dark:hover:bg-gray-800"
-    }`;
-
-  const featureLinkStyles =
-    "px-4 py-2 rounded-xl text-sm lg:text-base font-semibold transition-all duration-300 text-slate-700 dark:text-gray-300 hover:text-blue-500 cursor-pointer";
-
   const closeMenu = () => setIsOpen(false);
-  const handleLogout = () => {
-    if (typeof window !== "undefined") {
-      window.localStorage.removeItem(AUTH_STORAGE_KEY);
-    }
-    setUser(null);
-    closeMenu();
-  };
 
-  const handleLogout = async () => {
-    try {
-      await logout();
-      navigate("/login", { replace: true });
-    } catch {
-      // optionally surface a toast/message
-    } finally {
-      closeMenu();
-    }
+  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,
+    });
   };
 
-  // Smooth scroll to #features on homepage
-  const handleFeaturesClick = () => {
-    closeMenu();
-    if (location.pathname === "/") {
-      const section = document.getElementById("features");
-      if (section) {
-        section.scrollIntoView({ behavior: "smooth" });
-      }
-    } else {
-      navigate("/#features");
-      setTimeout(() => {
-        const section = document.getElementById("features");
-        if (section) section.scrollIntoView({ behavior: "smooth" });
-      }, 100);
-    }
+  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 dark:text-blue-400"
+        : "text-slate-700 dark:text-gray-300"
+    }`;
+
   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">
         <Link
           to="/"
@@ -78,34 +85,39 @@ const Navbar: React.FC = () => {
           <span>GitHub Tracker</span>
         </Link>
 
-        <div className="hidden md:flex items-center gap-3">
-          <NavLink to="/" end className={navLinkStyles}>
-            Home
-          </NavLink>
-
-          {/* Features: smooth scroll to #features section on homepage */}
-          <span className={featureLinkStyles} onClick={handleFeaturesClick}>
-            Features
-          </span>
-
-          <NavLink to="/about" className={navLinkStyles}>
-            About
-          </NavLink>
-
-          <NavLink to="/track" className={navLinkStyles}>
-            Tracker
-          </NavLink>
-          <NavLink to="/contributors" className={navLinkStyles}>
-            Contributors
-          </NavLink>
-
-          {user ? (
-            <ProfileDropdown user={user} onLogout={handleLogout} />
-          ) : (
-            <NavLink to="/login" className={navLinkStyles}>
-              Login
+        {/* Desktop Navigation */}
+        <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)",
+            }}
+          />
+
+          {navItems.map((item) => (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              onMouseEnter={handleMouseEnter}
+              className={navLinkClass}
+            >
+              {item.label}
             </NavLink>
-          )}
+          ))}
 
           <button
             onClick={toggleTheme}
@@ -121,7 +133,6 @@ const Navbar: React.FC = () => {
         </div>
 
         <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"
@@ -130,9 +141,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>
+
           <button
             onClick={() => setIsOpen(!isOpen)}
             className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
@@ -148,32 +160,24 @@ const Navbar: React.FC = () => {
       </div>
 
       {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="/" end className={navLinkStyles} onClick={closeMenu}>
-              Home
-            </NavLink>
-
-            {/* Features: smooth scroll to #features section on homepage */}
-            <span className={featureLinkStyles} onClick={handleFeaturesClick}>
-              Features
-            </span>
-
-            <NavLink to="/about" className={navLinkStyles} onClick={closeMenu}>
-              About
-            </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>
       )}
diff --git a/src/index.css b/src/index.css
index afa03a6..8603cbc 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,159 +1,109 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@keyframes how-it-works-dash-flow {
-  from {
-    background-position: 0 0;
-  }
-
-  to {
-    background-position: 72px 0;
-  }
-}
-
-@keyframes how-it-works-dash-flow-vertical {
-  from {
-    background-position: 0 0;
-  }
-
-  to {
-    background-position: 0 72px;
-  }
-}
-
-.how-it-works-flow-line {
-  display: block;
-  height: 2px;
-  border-radius: 9999px;
-  background-image: repeating-linear-gradient(
-    90deg,
-    rgba(96, 165, 250, 0.78) 0,
-    rgba(96, 165, 250, 0.78) 14px,
-    rgba(96, 165, 250, 0.08) 14px,
-    rgba(96, 165, 250, 0.08) 26px
-  );
-  background-size: 28px 2px;
-  animation: how-it-works-dash-flow 10s linear infinite;
-  box-shadow: 0 0 18px rgba(59, 130, 246, 0.24);
-}
-
-.how-it-works-flow-line.light {
-  background-image: repeating-linear-gradient(
-    90deg,
-    rgba(59, 130, 246, 0.6) 0,
-    rgba(59, 130, 246, 0.6) 12px,
-    rgba(59, 130, 246, 0.12) 12px,
-    rgba(59, 130, 246, 0.12) 24px
-  );
-  box-shadow: 0 0 14px rgba(59, 130, 246, 0.14);
-}
-
-.how-it-works-flow-line.vertical {
-  width: 2px;
-  height: 100%;
-  background-image: repeating-linear-gradient(
-    180deg,
-    rgba(96, 165, 250, 0.78) 0,
-    rgba(96, 165, 250, 0.78) 14px,
-    rgba(96, 165, 250, 0.08) 14px,
-    rgba(96, 165, 250, 0.08) 26px
-  );
-  background-size: 2px 28px;
-  animation: how-it-works-dash-flow-vertical 10s linear infinite;
-}
-
-.how-it-works-flow-line.vertical.light {
-  background-image: repeating-linear-gradient(
-    180deg,
-    rgba(59, 130, 246, 0.6) 0,
-    rgba(59, 130, 246, 0.6) 12px,
-    rgba(59, 130, 246, 0.12) 12px,
-    rgba(59, 130, 246, 0.12) 24px
-  );
-}
-
-
-.icon-merged {
-  color: #2ea44f; /* Or use your theme color */
-}
-.icon-pr-open {
-  color: #0969da;
-}
-.icon-pr-closed {
-  color: #cf222e;
-}
-.icon-issue-open {
-  color: #2ea44f;
-}
-.icon-issue-closed {
-  color: #cf222e;
-}
-
-html.theme-transitioning,
-html.theme-transitioning *,
-html.theme-transitioning *::before,
-html.theme-transitioning *::after {
-  transition-property: background-color, border-color, color, fill, stroke, box-shadow, opacity, transform;
-  transition-duration: 600ms;
-  transition-timing-function: ease-in-out;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  html.theme-transitioning,
-  html.theme-transitioning *,
-  html.theme-transitioning *::before,
-  html.theme-transitioning *::after {
-    transition-duration: 0ms;
-  }
-}
-
-@keyframes theme-icon-pop {
-  0% {
-    opacity: 0;
-    transform: rotate(-90deg) scale(0.75);
-  }
-
-  100% {
-    opacity: 1;
-    transform: rotate(0deg) scale(1);
-  }
-}
-
-.theme-toggle-icon {
-  animation: theme-icon-pop 500ms ease-out;
-}
-
-/* ── Contribution Recommender Widget ─────────────────────────── */
-
-@keyframes recommender-pulse {
-  0%, 100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 0.4;
-    transform: scale(0.75);
-  }
-}
-
-@keyframes recommender-shimmer {
-  0% {
-    left: -100%;
-  }
-  100% {
-    left: 200%;
-  }
-}
-
-.recommender-card-hover {
-  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
-}
-
-.recommender-card-hover:hover {
-  transform: translateY(-2px);
-}
-
-.agent-step-bar {
-  transition: background-color 0.4s ease;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@keyframes how-it-works-dash-flow {
+  from {
+    background-position: 0 0;
+  }
+
+  to {
+    background-position: 72px 0;
+  }
+}
+
+@keyframes how-it-works-dash-flow-vertical {
+  from {
+    background-position: 0 0;
+  }
+
+  to {
+    background-position: 0 72px;
+  }
+}
+
+.how-it-works-flow-line {
+  display: block;
+  height: 2px;
+  border-radius: 9999px;
+  background-image: repeating-linear-gradient(
+    90deg,
+    rgba(96, 165, 250, 0.78) 0,
+    rgba(96, 165, 250, 0.78) 14px,
+    rgba(96, 165, 250, 0.08) 14px,
+    rgba(96, 165, 250, 0.08) 26px
+  );
+  background-size: 28px 2px;
+  animation: how-it-works-dash-flow 10s linear infinite;
+  box-shadow: 0 0 18px rgba(59, 130, 246, 0.24);
+}
+
+.how-it-works-flow-line.light {
+  background-image: repeating-linear-gradient(
+    90deg,
+    rgba(59, 130, 246, 0.6) 0,
+    rgba(59, 130, 246, 0.6) 12px,
+    rgba(59, 130, 246, 0.12) 12px,
+    rgba(59, 130, 246, 0.12) 24px
+  );
+  box-shadow: 0 0 14px rgba(59, 130, 246, 0.14);
+}
+
+.how-it-works-flow-line.vertical {
+  width: 2px;
+  height: 100%;
+  background-image: repeating-linear-gradient(
+    180deg,
+    rgba(96, 165, 250, 0.78) 0,
+    rgba(96, 165, 250, 0.78) 14px,
+    rgba(96, 165, 250, 0.08) 14px,
+    rgba(96, 165, 250, 0.08) 26px
+  );
+  background-size: 2px 28px;
+  animation: how-it-works-dash-flow-vertical 10s linear infinite;
+}
+
+.how-it-works-flow-line.vertical.light {
+  background-image: repeating-linear-gradient(
+    180deg,
+    rgba(59, 130, 246, 0.6) 0,
+    rgba(59, 130, 246, 0.6) 12px,
+    rgba(59, 130, 246, 0.12) 12px,
+    rgba(59, 130, 246, 0.12) 24px
+  );
+}
+
+
+.icon-merged {
+  color: #2ea44f; /* Or use your theme color */
+}
+.icon-pr-open {
+  color: #0969da;
+}
+.icon-pr-closed {
+  color: #cf222e;
+}
+.icon-issue-open {
+  color: #2ea44f;
+}
+.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;
+  }
+}