diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index a606d77..38572c5 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -6,7 +6,7 @@ const MATRIX_CELLS = Array.from({ length: 21 }, (_, i) => i);
 
 const Hero = () => {
   return (
-    <section className="relative overflow-hidden bg-slate-50 dark:bg-[#030712] text-slate-900 dark:text-white px-6 py-20 lg:py-32 min-h-[90vh] flex items-center transition-colors duration-500">
+    <section id="home" className="relative overflow-hidden bg-slate-50 dark:bg-[#030712] text-slate-900 dark:text-white px-6 py-20 lg:py-32 min-h-[90vh] flex items-center transition-colors duration-500">
       
       {/* 1. Cyber Grid Overlay */}
       <div className="absolute inset-0 bg-[linear-gradient(to_right,#e2e8f0_1px,transparent_1px),linear-gradient(to_bottom,#e2e8f0_1px,transparent_1px)] dark:bg-[linear-gradient(to_right,#1f293710_1px,transparent_1px),linear-gradient(to_bottom,#1f293710_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] pointer-events-none" />
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index bf983b6..78dedd1 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -86,27 +86,24 @@ const Navbar: React.FC = () => {
         </Link>
 
         {/* 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)",
-            }}
-          />
+        <div className="hidden md:flex items-center gap-3">
+          <a href="#home" className="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">
+  Home
+</a>
+<a href="/#features" className="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">
+  Features
+</a>
+
+<a href="/#how-it-works" className="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">
+  How It Works
+</a>
+          <NavLink to="/track" className={navLinkStyles}>
+            Tracker
+          </NavLink>
+
+          <NavLink to="/contributors" className={navLinkStyles}>
+            Contributors
+          </NavLink>
 
           {navItems.map((item) => (
             <NavLink
@@ -162,22 +159,54 @@ const Navbar: React.FC = () => {
       {isOpen && (
         <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">
-            {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>
-            ))}
+
+            <a
+  href="#home"
+  className="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"
+  onClick={closeMenu}
+>
+  Home
+</a>
+
+<a
+  href="/#features"
+  className="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"
+  onClick={closeMenu}
+>
+  Features
+</a>
+
+<a
+  href="/#how-it-works"
+  className="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"
+  onClick={closeMenu}
+>
+  How It Works
+</a>
+
+            <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>
           </div>
         </div>
       )}
diff --git a/src/index.css b/src/index.css
index 8603cbc..724c9fd 100644
--- a/src/index.css
+++ b/src/index.css
@@ -89,21 +89,10 @@
 .icon-issue-closed {
   color: #cf222e;
 }
+html {
+  scroll-behavior: smooth;
+}
 
-@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;
-  }
+section {
+  scroll-margin-top: 90px;
 }