diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index fd5eac86..bae3b550 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,12 +1,14 @@
-import { NavLink, Link } from "react-router-dom";
+import { NavLink, Link, useNavigate, useLocation } from "react-router-dom";
 import { useState, useContext } 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 Navbar: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);
 
   const themeContext = useContext(ThemeContext);
+  const navigate = useNavigate();
+  const location = useLocation();
 
   if (!themeContext) return null;
 
@@ -19,8 +21,28 @@ const Navbar: React.FC = () => {
         : "text-slate-700 dark:text-gray-300 hover:text-blue-500"
     }`;
 
+  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);
 
+  // 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);
+    }
+  };
+
   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">
       <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
@@ -35,16 +57,24 @@ 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}>
+          <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>
@@ -73,7 +103,6 @@ const Navbar: React.FC = () => {
 
         {/* Mobile Controls */}
         <div className="md:hidden flex items-center gap-2">
-
           {/* Theme Toggle */}
           <button
             onClick={toggleTheme}
@@ -106,36 +135,28 @@ const Navbar: React.FC = () => {
       {isOpen && (
         <div className="md:hidden border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
           <div className="px-6 py-5 flex flex-col gap-3">
-
-            <NavLink
-              to="/"
-              className={navLinkStyles}
-              onClick={closeMenu}
-            >
+            <NavLink to="/" end className={navLinkStyles} onClick={closeMenu}>
               Home
             </NavLink>
 
-            <NavLink
-              to="/track"
-              className={navLinkStyles}
-              onClick={closeMenu}
-            >
+            {/* 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}
-            >
+            <NavLink to="/contributors" className={navLinkStyles} onClick={closeMenu}>
               Contributors
             </NavLink>
 
-            <NavLink
-              to="/login"
-              className={navLinkStyles}
-              onClick={closeMenu}
-            >
+            <NavLink to="/login" className={navLinkStyles} onClick={closeMenu}>
               Login
             </NavLink>
           </div>
@@ -145,4 +166,4 @@ const Navbar: React.FC = () => {
   );
 };
 
-export default Navbar;
+export default Navbar;
\ No newline at end of file