diff --git a/frontend/src/Components/Navbar/Navbar.jsx b/frontend/src/Components/Navbar/Navbar.jsx
index 8d0c486..b738872 100644
--- a/frontend/src/Components/Navbar/Navbar.jsx
+++ b/frontend/src/Components/Navbar/Navbar.jsx
@@ -1,4 +1,3 @@
-// src/Components/Navbar/Navbar.jsx
 import React, { useEffect, useState } from "react";
 import {
   UserCircle,
@@ -9,11 +8,10 @@ import {
   Github,
   Phone,
   HelpCircle,
-  MessageCircle,
-  MessageSquarePlus
+  X,
 } from "lucide-react";
-import { FloatingNav } from "../ui/floating-navbar";
 import { Link, useNavigate } from "react-router-dom";
+import { FloatingNav } from "../ui/floating-navbar";
 import DarkModeToggle from "../ui/DarkModeToggle";
 import { useTimer } from "../../context/TimerContext";
 
@@ -26,16 +24,96 @@ const publicNavItems = [
   { name: "FAQ", link: "#faq", icon: <HelpCircle className="h-4 w-4" /> },
 ];
 
+// --- Mobile Navigation Overlay Component (defined in the same file) ---
+const MobileNavOverlay = ({ isOpen, onClose, navItems, isAuthenticated, handleLogout }) => {
+    const overlayClasses = `mobile-nav-overlay ${isOpen ? "open" : ""}`;
+
+    const handleLinkClick = () => {
+      onClose();
+    };
+    
+    const handleLogoutClick = () => {
+      handleLogout();
+      onClose();
+    }
+
+    return (
+      <div className={overlayClasses}>
+        <button onClick={onClose} className="absolute top-8 right-8 text-foreground">
+          <X size={32} />
+        </button>
+        <nav className="flex flex-col items-center justify-center h-full">
+          <ul>
+            {!isAuthenticated ? (
+              navItems.map((item) => (
+                <li key={item.name}>
+                  <a href={item.link} onClick={handleLinkClick}>
+                    {item.name}
+                  </a>
+                </li>
+              ))
+            ) : (
+              <>
+                <li>
+                  <Link to="/profile" onClick={handleLinkClick}>
+                    Profile
+                  </Link>
+                </li>
+                {/* Add other authenticated links here */}
+              </>
+            )}
+          </ul>
+        </nav>
+
+        <div className="mobile-nav-footer">
+          {!isAuthenticated ? (
+            <>
+              <Link to="/register" className="w-full">
+                <button onClick={handleLinkClick} className="signup-btn-mobile">
+                  Sign Up
+                </button>
+              </Link>
+              <DarkModeToggle />
+            </>
+          ) : (
+            <>
+              <button onClick={handleLogoutClick} className="logout-btn-mobile">
+                Logout
+              </button>
+              <DarkModeToggle />
+            </>
+          )}
+        </div>
+      </div>
+    );
+}; 
+
+
+// --- Main Navbar Component ---
 const Navbar = () => {
   const [showFloating, setShowFloating] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
   const [displayTime, setDisplayTime] = useState("25:00");
-  const [isAuthenticated, setIsAuthenticated] = useState(
-    !!localStorage.getItem("token")
-  );
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
 
   const navigate = useNavigate();
   const { timeLeft, isRunning } = useTimer();
+  
+  useEffect(() => {
+    setIsAuthenticated(!!localStorage.getItem("token"));
+  }, []);
+  
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth >= 1024) {
+        setMenuOpen(false);
+      }
+    };
+    
+    window.addEventListener('resize', handleResize);
+    
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
 
   useEffect(() => {
     const handleScroll = () => setShowFloating(window.scrollY > 100);
@@ -74,8 +152,6 @@ const Navbar = () => {
           style={{ background: "var(--card)", borderColor: "var(--border)" }}
         >
           <div className="mx-auto mr-1 flex max-w-7xl items-center justify-between">
-            {/* Logo */}
-        
             <Link to="/">
               <h1
                 className="text-2xl md:text-3xl lg:text-4xl font-extrabold tracking-tight hover:scale-105 transition-transform duration-300"
@@ -85,144 +161,94 @@ const Navbar = () => {
               </h1>
             </Link>
 
-            {/* Desktop Navigation - visible from lg */}
             <nav className="hidden lg:flex space-x-6 lg:space-x-8 items-center">
-              {!isAuthenticated &&
-                publicNavItems.map((item) => (
-                  <a
-                    key={item.name}
-                    href={item.link}
-                    className="relative text-[15px] md:text-[16px] lg:text-[17px] font-medium transition-all duration-300 group flex items-center gap-2"
-                    style={{ color: "var(--card-foreground)" }}
-                  >
-                    {item.icon} <span>{item.name}</span>
-                    <span className="absolute left-0 -bottom-1 w-0 h-[2px] bg-gradient-to-r from-[var(--primary)] to-purple-500 transition-all duration-500 group-hover:w-full"></span>
-                  </a>
-                ))}
-
-              {isAuthenticated && isRunning && (
-                <div
-                  onClick={() => navigate("/pomodoro")}
-                  className="flex items-center gap-2 cursor-pointer px-3 py-1 rounded-lg transition-all duration-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:shadow-md hover:shadow-[var(--primary)]/30"
-                >
-                  <Clock className="w-5 h-5 text-blue-500 animate-pulse" />
-                  <span className="text-sm font-mono">{displayTime}</span>
-                </div>
-              )}
-
-              {/* Auth Section */}
-              {isAuthenticated ? (
-                <div className="flex items-center gap-3 ml-4">
-                  <Link
-                    to="/profile"
-                    className="flex items-center gap-2 text-[16px] lg:text-[17px] font-medium relative group"
-                    style={{ color: "var(--primary)" }}
-                  >
-                    <UserCircle className="h-4 w-4" /> <span>Profile</span>
-                    <span className="absolute left-0 -bottom-1 w-0 h-[2px] bg-gradient-to-r from-[var(--primary)] to-purple-500 transition-all duration-500 group-hover:w-full"></span>
-                  </Link>
-                  <button
-                    onClick={handleLogout}
-                    className="text-[16px] lg:text-[17px] font-medium text-red-500 transition-colors duration-300 hover:text-red-600"
-                  >
-                    Logout
-                  </button>
-                  <DarkModeToggle />
-                </div>
-              ) : (
-                <div className="flex items-center gap-3 ml-4">
-                  <Link to="/register">
-                    <button className="px-4 md:px-5 lg:px-6 py-2 rounded-md font-semibold bg-[var(--primary)] text-[var(--primary-foreground)] shadow-md transition-transform duration-300 hover:scale-105 hover:shadow-lg cursor-pointer text-sm md:text-base">
-                      Sign Up
-                    </button>
-                  </Link>
-                  <DarkModeToggle />
-                </div>
-              )}
+               {!isAuthenticated &&
+                 publicNavItems.map((item) => (
+                   <a
+                     key={item.name}
+                     href={item.link}
+                     className="relative text-[15px] md:text-[16px] lg:text-[17px] font-medium transition-all duration-300 group flex items-center gap-2"
+                     style={{ color: "var(--card-foreground)" }}
+                   >
+                     {item.icon} <span>{item.name}</span>
+                     <span className="absolute left-0 -bottom-1 w-0 h-[2px] bg-gradient-to-r from-[var(--primary)] to-purple-500 transition-all duration-500 group-hover:w-full"></span>
+                   </a>
+                 ))}
+
+               {isAuthenticated && isRunning && (
+                 <div
+                   onClick={() => navigate("/pomodoro")}
+                   className="flex items-center gap-2 cursor-pointer px-3 py-1 rounded-lg transition-all duration-300 hover:bg-gray-200 dark:hover:bg-gray-700 hover:shadow-md hover:shadow-[var(--primary)]/30"
+                 >
+                   <Clock className="w-5 h-5 text-blue-500 animate-pulse" />
+                   <span className="text-sm font-mono">{displayTime}</span>
+                 </div>
+               )}
+
+               {isAuthenticated ? (
+                 <div className="flex items-center gap-3 ml-4">
+                   <Link
+                     to="/profile"
+                     className="flex items-center gap-2 text-[16px] lg:text-[17px] font-medium relative group"
+                     style={{ color: "var(--primary)" }}
+                   >
+                     <UserCircle className="h-4 w-4" /> <span>Profile</span>
+                     <span className="absolute left-0 -bottom-1 w-0 h-[2px] bg-gradient-to-r from-[var(--primary)] to-purple-500 transition-all duration-500 group-hover:w-full"></span>
+                   </Link>
+                   <button
+                     onClick={handleLogout}
+                     className="text-[16px] lg:text-[17px] font-medium text-red-500 transition-colors duration-300 hover:text-red-600"
+                   >
+                     Logout
+                   </button>
+                   <DarkModeToggle />
+                 </div>
+               ) : (
+                 <div className="flex items-center gap-3 ml-4">
+                   <Link to="/register">
+                     <button className="px-4 md:px-5 lg:px-6 py-2 rounded-md font-semibold bg-[var(--primary)] text-[var(--primary-foreground)] shadow-md transition-transform duration-300 hover:scale-105 hover:shadow-lg cursor-pointer text-sm md:text-base">
+                       Sign Up
+                     </button>
+                   </Link>
+                   <DarkModeToggle />
+                 </div>
+               )}
             </nav>
 
-            {/* Mobile & Tablet Hamburger */}
             <div className="lg:hidden">
               <button
                 onClick={() => setMenuOpen(!menuOpen)}
-                className="relative w-8 h-6 flex flex-col justify-between items-center"
+                className="relative w-8 h-6 flex flex-col justify-between items-center z-[110]"
               >
                 <span
-                  className={`block h-1 w-full bg-current rounded transform transition duration-300 ease-in-out ${
-                    menuOpen ? "rotate-45 translate-y-2" : ""
+                  className={`block h-1 w-full rounded transform transition duration-300 ease-in-out ${
+                    menuOpen ? "rotate-45 translate-y-[9px] bg-white" : "bg-current"
                   }`}
                 />
                 <span
-                  className={`block h-1 w-full bg-current rounded transition duration-300 ease-in-out ${
-                    menuOpen ? "opacity-0" : ""
+                  className={`block h-1 w-full rounded transition duration-300 ease-in-out ${
+                    menuOpen ? "opacity-0" : "bg-current"
                   }`}
                 />
                 <span
-                  className={`block h-1 w-full bg-current rounded transform transition duration-300 ease-in-out ${
-                    menuOpen ? "-rotate-45 -translate-y-2" : ""
+                  className={`block h-1 w-full rounded transform transition duration-300 ease-in-out ${
+                    menuOpen ? "-rotate-45 -translate-y-[9px] bg-white" : "bg-current"
                   }`}
                 />
               </button>
-
-              {menuOpen && (
-                <div className="mt-4 flex flex-col gap-3 px-4 pb-4">
-                  {!isAuthenticated ? (
-                    <>
-                      {publicNavItems.map((item) => (
-                        <a
-                          key={item.name}
-                          href={item.link}
-                          className="relative text-[15px] md:text-[16px] font-medium transition-all duration-300 group flex items-center gap-2"
-                          style={{ color: "var(--card-foreground)" }}
-                        >
-                          {item.icon} <span>{item.name}</span>
-                          <span className="absolute left-0 -bottom-1 w-0 h-[2px] bg-gradient-to-r from-[var(--primary)] to-purple-500 transition-all duration-500 group-hover:w-full"></span>
-                        </a>
-                      ))}
-                      <Link to="/register">
-                        <button className="cursor-pointer w-full px-4 md:px-5 py-2 mt-2 rounded-md font-semibold bg-[var(--primary)] text-[var(--primary-foreground)] shadow-md transition-transform duration-300 hover:scale-105 hover:shadow-lg text-sm md:text-base">
-                          Sign Up
-                        </button>
-                      </Link>
-                      <DarkModeToggle />
-                    </>
-                  ) : (
-                    <>
-                      <Link
-                        to="/profile"
-                        className="relative flex items-center gap-2 text-[16px] font-medium group"
-                        style={{ color: "var(--primary)" }}
-                      >
-                        <UserCircle className="h-4 w-4" /> <span>Profile</span>
-                        <span className="absolute left-0 -bottom-1 w-0 h-[2px] bg-gradient-to-r from-[var(--primary)] to-purple-500 transition-all duration-500 group-hover:w-full"></span>
-                      </Link>
-                      {isRunning && (
-                        <div
-                          onClick={() => navigate("/pomodoro")}
-                          className="flex items-center gap-2 cursor-pointer hover:shadow-md hover:shadow-[var(--primary)]/30 transition-all duration-300"
-                        >
-                          <Clock className="w-5 h-5 text-blue-500 animate-pulse" />
-                          <span className="text-sm font-mono">
-                            {displayTime}
-                          </span>
-                        </div>
-                      )}
-                      <button
-                        onClick={handleLogout}
-                        className="text-[16px] font-medium text-red-500 hover:text-red-600 transition-colors"
-                      >
-                        Logout
-                      </button>
-                      <DarkModeToggle />
-                    </>
-                  )}
-                </div>
-              )}
             </div>
           </div>
         </header>
       )}
 
+      <MobileNavOverlay
+        isOpen={menuOpen}
+        onClose={() => setMenuOpen(false)}
+        navItems={publicNavItems}
+        isAuthenticated={isAuthenticated}
+        handleLogout={handleLogout}
+      />
+
       {showFloating && (
         <FloatingNav navItems={!isAuthenticated ? publicNavItems : []} />
       )}
@@ -231,3 +257,4 @@ const Navbar = () => {
 };
 
 export default Navbar;
+
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 9c60d6d..5113992 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -199,4 +199,86 @@
 
 html {
   scroll-behavior: smooth;
-}
\ No newline at end of file
+}
+/* --- Mobile Navigation Overlay --- */
+.mobile-nav-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--color-background); /* Uses your theme color */
+  z-index: 100; /* Ensure it's on top of other content */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.mobile-nav-overlay.open {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* --- Navigation Links --- */
+.mobile-nav-overlay nav ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  text-align: center;
+}
+
+.mobile-nav-overlay nav li {
+  margin: 1.5rem 0;
+}
+
+.mobile-nav-overlay nav a {
+  color: var(--color-foreground);
+  text-decoration: none;
+  font-size: 2rem;
+  font-weight: 500;
+  transition: color 0.2s ease;
+}
+
+.mobile-nav-overlay nav a:hover {
+  color: var(--color-primary); /* Uses your theme's primary color */
+}
+
+/* --- Footer Elements (Sign Up & Logout) --- */
+.mobile-nav-footer {
+  position: absolute;
+  bottom: 3rem;
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  width: calc(100% - 4rem);
+  justify-content: center;
+}
+
+.signup-btn-mobile {
+  background-color: var(--color-primary);
+  color: var(--color-primary-foreground);
+  border: none;
+  width: 100%;
+  padding: 0.8rem 1.5rem;
+  border-radius: var(--radius-md);
+  font-size: 1.1rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.logout-btn-mobile {
+  background-color: var(--color-destructive);
+  color: white; /* Assuming destructive buttons should have white text */
+  border: none;
+  width: 100%;
+  padding: 0.8rem 1.5rem;
+  border-radius: var(--radius-md);
+  font-size: 1.1rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+