diff --git a/backend/config/passportConfig.js b/backend/config/passportConfig.js
index 842f50ca..59ac9e51 100644
--- a/backend/config/passportConfig.js
+++ b/backend/config/passportConfig.js
@@ -38,7 +38,11 @@ passport.serializeUser((user, done) => {
 passport.deserializeUser(async (id, done) => {
     try {
         const user = await User.findById(id);
-        done(null, user);
+        done(null, user ? {
+            id: user._id.toString(),
+            username: user.username,
+            email: user.email
+        } : null);
     } catch (err) {
         done(err, null);
     }
diff --git a/backend/routes/auth.js b/backend/routes/auth.js
index 7c2cda78..b97f662a 100644
--- a/backend/routes/auth.js
+++ b/backend/routes/auth.js
@@ -30,6 +30,17 @@ router.post("/signup", validateRequest(signupSchema), async (req, res) => {
     }
 });
 
+// Session status route
+router.get("/me", (req, res) => {
+    const isAuthenticated = typeof req.isAuthenticated === "function" && req.isAuthenticated();
+
+    if (!isAuthenticated) {
+        return res.status(200).json({ authenticated: false, user: null });
+    }
+
+    return res.status(200).json({ authenticated: true, user: req.user });
+});
+
 // Login route
 router.post("/login", validateRequest(loginSchema), passport.authenticate('local'), (req, res) => {
     res.status(200).json( { message: 'Login successful', user: req.user } );
@@ -40,10 +51,18 @@ router.get("/logout", (req, res) => {
 
     req.logout((err) => {
 
-        if (err)
+        if (err) {
             return res.status(500).json({ message: 'Logout failed', error: err.message });
-        else
-            res.status(200).json({ message: 'Logged out successfully' });
+        }
+
+        req.session.destroy((sessionErr) => {
+            if (sessionErr) {
+                return res.status(500).json({ message: 'Logout failed', error: sessionErr.message });
+            }
+
+            res.clearCookie('connect.sid');
+            return res.status(200).json({ message: 'Logged out successfully' });
+        });
     });
 });
 
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index fd5eac86..3e352a0a 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,16 +1,21 @@
 import { NavLink, Link } from "react-router-dom";
 import { useState, useContext } from "react";
 import { ThemeContext } from "../context/ThemeContext";
-import { Moon, Sun, Menu, X, Github } from "lucide-react";
+import { AuthContext } from "../context/AuthContext";
+import { Moon, Sun, Menu, X } from "lucide-react";
+import { useNavigate } from "react-router-dom";
 
 const Navbar: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);
 
   const themeContext = useContext(ThemeContext);
+  const authContext = useContext(AuthContext);
+  const navigate = useNavigate();
 
-  if (!themeContext) return null;
+  if (!themeContext || !authContext) return null;
 
   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 ${
@@ -21,6 +26,17 @@ const Navbar: React.FC = () => {
 
   const closeMenu = () => setIsOpen(false);
 
+  const handleLogout = async () => {
+    try {
+      await logout();
+      navigate("/login", { replace: true });
+    } catch {
+      // optionally surface a toast/message
+    } finally {
+      closeMenu();
+    }
+  };
+
   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">
@@ -53,9 +69,26 @@ const Navbar: React.FC = () => {
             Contributors
           </NavLink>
 
-          <NavLink to="/login" className={navLinkStyles}>
-            Login
-          </NavLink>
+          {!isLoading && !isAuthenticated && (
+            <>
+              <NavLink to="/login" className={navLinkStyles}>
+                Login
+              </NavLink>
+
+              <NavLink to="/signup" className={navLinkStyles}>
+                Signup
+              </NavLink>
+            </>
+          )}
+
+          {!isLoading && isAuthenticated && (
+            <button
+              onClick={handleLogout}
+              className="px-4 py-2 rounded-xl text-sm lg:text-base font-semibold transition-all duration-300 text-white bg-rose-500 hover:bg-rose-600 shadow-sm"
+            >
+              Logout
+            </button>
+          )}
 
           {/* Theme Toggle */}
           <button
@@ -131,13 +164,34 @@ const Navbar: React.FC = () => {
               Contributors
             </NavLink>
 
-            <NavLink
-              to="/login"
-              className={navLinkStyles}
-              onClick={closeMenu}
-            >
-              Login
-            </NavLink>
+            {!isLoading && !isAuthenticated && (
+              <>
+                <NavLink
+                  to="/login"
+                  className={navLinkStyles}
+                  onClick={closeMenu}
+                >
+                  Login
+                </NavLink>
+
+                <NavLink
+                  to="/signup"
+                  className={navLinkStyles}
+                  onClick={closeMenu}
+                >
+                  Signup
+                </NavLink>
+              </>
+            )}
+
+            {!isLoading && isAuthenticated && (
+              <button
+                onClick={handleLogout}
+                className="text-left px-4 py-2 rounded-xl text-sm lg:text-base font-semibold transition-all duration-300 text-white bg-rose-500 hover:bg-rose-600 shadow-sm"
+              >
+                Logout
+              </button>
+            )}
           </div>
         </div>
       )}
diff --git a/src/components/__test__/Navbar.test.tsx b/src/components/__test__/Navbar.test.tsx
index 780b9bb3..1b860e50 100644
--- a/src/components/__test__/Navbar.test.tsx
+++ b/src/components/__test__/Navbar.test.tsx
@@ -1,21 +1,37 @@
 // src/components/__tests__/Navbar.test.tsx
-import { render, screen, fireEvent } from '@testing-library/react'
-import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, fireEvent, act } from '@testing-library/react'
+import { describe, it, expect, vi } from 'vitest'
 import { MemoryRouter } from 'react-router-dom'
 import { ThemeContext } from "../../context/ThemeContext";
+import { AuthContext } from "../../context/AuthContext";
 import Navbar from '../Navbar.tsx'
 
 // Helper to render Navbar with a mock ThemeContext
-const renderNavbar = (mode: 'light' | 'dark' = 'light') => {
+const renderNavbar = (
+  mode: 'light' | 'dark' = 'light',
+  isAuthenticated = false
+) => {
   const toggleTheme = vi.fn()
+  const logout = vi.fn().mockResolvedValue(undefined)
   render(
     <MemoryRouter>
       <ThemeContext.Provider value={{ mode, toggleTheme }}>
-        <Navbar />
+        <AuthContext.Provider
+          value={{
+            user: isAuthenticated ? { id: '1', username: 'tester', email: 'tester@example.com' } : null,
+            isAuthenticated,
+            isLoading: false,
+            refreshAuth: vi.fn(),
+            handleLoginSuccess: vi.fn(),
+            logout,
+          }}
+        >
+          <Navbar />
+        </AuthContext.Provider>
       </ThemeContext.Provider>
     </MemoryRouter>
   )
-  return { toggleTheme }
+  return { toggleTheme, logout }
 }
 
 describe('Navbar', () => {
@@ -31,6 +47,14 @@ describe('Navbar', () => {
     expect(screen.getByRole('link', { name: /^tracker$/i })).toBeInTheDocument()
     expect(screen.getByRole('link', { name: /contributors/i })).toBeInTheDocument()
     expect(screen.getByRole('link', { name: /login/i })).toBeInTheDocument()
+    expect(screen.getByRole('link', { name: /signup/i })).toBeInTheDocument()
+  })
+
+  it('shows logout instead of login and signup when authenticated', () => {
+    renderNavbar('light', true)
+    expect(screen.getByRole('button', { name: /logout/i })).toBeInTheDocument()
+    expect(screen.queryByRole('link', { name: /login/i })).not.toBeInTheDocument()
+    expect(screen.queryByRole('link', { name: /signup/i })).not.toBeInTheDocument()
   })
 
   // --- Theme toggle ---
@@ -51,34 +75,42 @@ describe('Navbar', () => {
   // --- Mobile menu ---
   it('mobile menu is hidden by default', () => {
     renderNavbar()
-    expect(screen.queryByText('About')).not.toBeInTheDocument()
+    expect(screen.getAllByRole('link', { name: /signup/i })).toHaveLength(1)
   })
 
   it('opens mobile menu when hamburger is clicked', () => {
     renderNavbar()
-    const hamburger = screen.getAllByRole('button')[1] // second button = hamburger
+    const hamburger = screen.getByLabelText(/toggle menu/i)
     fireEvent.click(hamburger)
-    expect(screen.getByText('About')).toBeInTheDocument()
-    expect(screen.getByText('Contact')).toBeInTheDocument()
+    expect(screen.getAllByRole('link', { name: /login/i })).toHaveLength(2)
+    expect(screen.getAllByRole('link', { name: /signup/i })).toHaveLength(2)
   })
 
   it('closes mobile menu when a nav link is clicked', () => {
     renderNavbar()
-    const hamburger = screen.getAllByRole('button')[1]
+    const hamburger = screen.getByLabelText(/toggle menu/i)
     fireEvent.click(hamburger)                          // open
     const homeLinks = screen.getAllByRole('link', { name: /home/i })
     fireEvent.click(homeLinks[homeLinks.length - 1]) // click the mobile one
-    expect(screen.queryByText('About')).not.toBeInTheDocument()  // closed
+    expect(screen.getAllByRole('link', { name: /signup/i })).toHaveLength(1)  // closed
   })
 
   it('calls toggleTheme from the mobile menu button', () => {
     const { toggleTheme } = renderNavbar('dark')
-    const hamburger = screen.getAllByRole('button')[1]
+    const hamburger = screen.getByLabelText(/toggle menu/i)
     fireEvent.click(hamburger)
-    fireEvent.click(screen.getByText(/light/i))
+    fireEvent.click(screen.getAllByLabelText(/toggle theme/i)[1])
     expect(toggleTheme).toHaveBeenCalledTimes(1)
   })
 
+  it('calls logout when the authenticated logout button is clicked', async () => {
+    const { logout } = renderNavbar('light', true)
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: /logout/i }))
+    })
+    expect(logout).toHaveBeenCalledTimes(1)
+  })
+
   // --- Returns null when ThemeContext is missing ---
   it('renders nothing if ThemeContext is not provided', () => {
     const { container } = render(
diff --git a/src/context/AuthContext.tsx b/src/context/AuthContext.tsx
new file mode 100644
index 00000000..29209624
--- /dev/null
+++ b/src/context/AuthContext.tsx
@@ -0,0 +1,76 @@
+/* eslint-disable react-refresh/only-export-components */
+import { createContext, useCallback, useEffect, useState, ReactNode } from "react";
+import axios from "axios";
+
+interface AuthUser {
+  id: string;
+  username: string;
+  email: string;
+}
+
+interface AuthContextType {
+  user: AuthUser | null;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  refreshAuth: () => Promise<void>;
+  handleLoginSuccess: (user: AuthUser) => void;
+  logout: () => Promise<void>;
+}
+
+const backendUrl = import.meta.env.VITE_BACKEND_URL ?? "";
+
+export const AuthContext = createContext<AuthContextType | null>(null);
+
+const AuthProvider = ({ children }: { children: ReactNode }) => {
+  const [user, setUser] = useState<AuthUser | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const refreshAuth = useCallback(async () => {
+    try {
+      const response = await axios.get(`${backendUrl}/api/auth/me`, {
+        withCredentials: true,
+      });
+
+      setUser(response.data.authenticated ? response.data.user : null);
+    } catch {
+      setUser(null);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void refreshAuth();
+  }, [refreshAuth]);
+
+  const handleLoginSuccess = useCallback((nextUser: AuthUser) => {
+    setUser(nextUser);
+    setIsLoading(false);
+  }, []);
+
+  const logout = useCallback(async () => {
+    await axios.get(`${backendUrl}/api/auth/logout`, {
+      withCredentials: true,
+    });
+
+    setUser(null);
+  }, []);
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        isAuthenticated: Boolean(user),
+        isLoading,
+        refreshAuth,
+        handleLoginSuccess,
+        logout,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export default AuthProvider;
+export type { AuthContextType, AuthUser };
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
index 4c5b79dd..ee48a8e7 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -4,13 +4,16 @@ import App from "./App.tsx";
 import "./index.css";
 import { BrowserRouter } from "react-router-dom";
 import ThemeWrapper from "./context/ThemeContext.tsx";
+import AuthProvider from "./context/AuthContext.tsx";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <ThemeWrapper>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
+      <BrowserRouter>
+        <AuthProvider>
+          <App />
+        </AuthProvider>
+      </BrowserRouter>
     </ThemeWrapper>
   </StrictMode>
 );
\ No newline at end of file
diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx
index 92b7073e..58e52e52 100644
--- a/src/pages/Login/Login.tsx
+++ b/src/pages/Login/Login.tsx
@@ -3,6 +3,7 @@ import axios from "axios";
 import { useNavigate, Link } from "react-router-dom";
 import { ThemeContext } from "../../context/ThemeContext";
 import type { ThemeContextType } from "../../context/ThemeContext";
+import { AuthContext } from "../../context/AuthContext";
 
 const backendUrl = import.meta.env.VITE_BACKEND_URL;
 
@@ -18,6 +19,7 @@ const Login: React.FC = () => {
 
   const navigate = useNavigate();
   const themeContext = useContext(ThemeContext) as ThemeContextType;
+  const authContext = useContext(AuthContext);
   const { mode } = themeContext;
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -30,10 +32,13 @@ const Login: React.FC = () => {
     setIsLoading(true);
 
     try {
-      const response = await axios.post(`${backendUrl}/api/auth/login`, formData);
+      const response = await axios.post(`${backendUrl}/api/auth/login`, formData, {
+        withCredentials: true,
+      });
       setMessage(response.data.message);
 
       if (response.data.message === 'Login successful') {
+        authContext?.handleLoginSuccess(response.data.user);
         navigate("/");
       }
     } catch (error: unknown) {