diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 8e60e33d..ec49a07f 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -19,65 +19,86 @@ const Navbar: React.FC = () => {
     }`;
 
   return (
-    <nav className="sticky top-0 z-50 w-full bg-indigo-50/70 dark:bg-gray-900/95 backdrop-blur-xl border-b border-indigo-100/50 dark:border-gray-800 shadow-sm">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex justify-between items-center h-20">
-
-          <Link to="/" className="flex items-center shrink-0">
-            <img
-              src="/crl-icon.png"
-              alt="CRL Icon"
-              className="h-10 w-10 mr-3"
-            />
-            <div className="flex items-center tracking-tight">
-              <span className="text-2xl font-extrabold text-slate-900 dark:text-white">
-                GitHub
-              </span>
-              <span className="text-2xl font-extrabold text-blue-600 ml-1">
-                Tracker
-              </span>
-            </div>
+    <nav className="sticky top-0 z-50 bg-white dark:bg-gray-900 text-black dark:text-white border-b border-gray-100 dark:border-gray-800 transition-colors duration-300">
+      <div className="container mx-auto px-6 py-4 flex justify-between items-center">
+        {/* Logo Section */}
+        <Link
+          to="/"
+          className="text-2xl font-bold hover:text-gray-300 cursor-pointer flex items-center"
+        >
+          <img src="/crl-icon.png" alt="CRL Icon" className="h-8 mr-2" />
+          GitHub Tracker
+        </Link>
+
+        {/* Desktop Links */}
+        <div className="hidden md:flex space-x-6">
+          <Link
+            to="/"
+            className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
+          >
+            Home
           </Link>
+          <Link
+            to="/track"
+            className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
+          >
+            Tracker
+          </Link>
+          <Link
+            to="/contributors"
+            className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
+          >
+            Contributors
+          </Link>
+          <Link
+            to="/login"
+            className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
+          >
+            Login
+          </Link>
+          <button
+            onClick={toggleTheme}
+            className="text-sm font-semibold px-3 py-1 rounded border border-gray-500 hover:text-gray-300 hover:border-gray-300 transition duration-200"
+          >
+            {mode === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
+          </button>
+        </div>
 
-          <div className="hidden lg:flex items-center justify-center flex-1 space-x-1">
-            <NavLink to="/" className={navLinkStyles}>
-              Home
-            </NavLink>
-
-            <NavLink to="/track" className={navLinkStyles}>
-              Tracker
-            </NavLink>
-
-            <NavLink to="/contributors" className={navLinkStyles}>
-              Contributors
-            </NavLink>
-          </div>
-
-          <div className="hidden lg:flex items-center space-x-5">
-            <button
-              onClick={toggleTheme}
-              className="p-2.5 rounded-full text-slate-500 dark:text-gray-400"
-            >
-              {mode === "dark" ? (
-                <Sun className="h-5 w-5" />
-              ) : (
-                <Moon className="h-5 w-5" />
-              )}
-            </button>
-
-            <Link
-              to="/login"
-              className="text-lg font-bold text-slate-700 dark:text-gray-200 hover:text-blue-600"
-            >
-              Login
-            </Link>
+        {/* Mobile Menu Button */}
+        <div className="md:hidden">
+          <button
+            onClick={() => setIsOpen(!isOpen)}
+            className="relative w-8 h-8 flex flex-col space-y-[5px] items-center group focus:outline-none"
+          >
+            <span
+              className={`block h-[3px] w-full bg-black dark:bg-white rounded-lg transition-transform duration-300 ${
+                isOpen ? "rotate-45 translate-y-2" : ""
+              }`}
+            ></span>
+            <span
+              className={`block h-[3px] w-full bg-black dark:bg-white rounded-lg transition-opacity duration-300 ${
+                isOpen ? "opacity-0" : ""
+              }`}
+            ></span>
+            <span
+              className={`block h-[3px] w-full bg-black dark:bg-white rounded-lg transition-transform duration-300 ${
+                isOpen ? "-rotate-45 -translate-y-2" : ""
+              }`}
+            ></span>
+          </button>
+        </div>
+      </div>
 
+      {/* Mobile Links */}
+      {isOpen && (
+        <div className="md:hidden bg-white dark:bg-gray-800 text-black dark:text-white">
+          <div className="space-y-4 px-6 py-4">
             <Link
-              to="/signup"
-              className="flex items-center space-x-2 px-7 py-3 text-lg font-bold text-white bg-blue-600 rounded-full"
+              to="/"
+              className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
+              onClick={() => setIsOpen(false)}
             >
-              <UserPlus className="h-5 w-5" />
-              <span>Sign Up</span>
+              Home
             </Link>
           </div>