diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index 7f424b9..3646a88 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { Link, useNavigate, useLocation } from "react-router-dom";
 import { useAuth } from "../contexts/AuthContext";
 import { useSocket } from "../contexts/SocketContext";
 import { rentalAPI, messageAPI } from "../services/api";
@@ -9,9 +9,55 @@ const Navbar: React.FC = () => {
   const { user, logout, openAuthModal } = useAuth();
   const { onNewMessage, onMessageRead } = useSocket();
   const navigate = useNavigate();
+  const location = useLocation();
   const [searchTerm, setSearchTerm] = useState("");
   const [pendingRequestsCount, setPendingRequestsCount] = useState(0);
   const [unreadMessagesCount, setUnreadMessagesCount] = useState(0);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const dropdownRef = useRef<HTMLLIElement>(null);
+  const mobileMenuRef = useRef<HTMLDivElement>(null);
+  const mobileToggleRef = useRef<HTMLButtonElement>(null);
+
+  const closeDropdown = useCallback(() => {
+    setIsDropdownOpen(false);
+  }, []);
+
+  const closeMobileMenu = useCallback(() => {
+    setIsMobileMenuOpen(false);
+  }, []);
+
+  // Close menus when route changes
+  useEffect(() => {
+    closeDropdown();
+    closeMobileMenu();
+  }, [location.pathname, closeDropdown, closeMobileMenu]);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      // Desktop dropdown
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsDropdownOpen(false);
+      }
+      // Mobile menu
+      if (
+        isMobileMenuOpen &&
+        mobileMenuRef.current &&
+        mobileToggleRef.current &&
+        !mobileMenuRef.current.contains(event.target as Node) &&
+        !mobileToggleRef.current.contains(event.target as Node)
+      ) {
+        setIsMobileMenuOpen(false);
+      }
+    };
+
+    document.addEventListener("click", handleClickOutside, true);
+
+    return () => {
+      document.removeEventListener("click", handleClickOutside, true);
+    };
+  }, [isMobileMenuOpen]);
 
   // Fetch pending rental requests count when user logs in
   useEffect(() => {
@@ -109,31 +155,16 @@ const Navbar: React.FC = () => {
     <>
       <style>
         {`
-          @media (max-width: 991.98px) {
-            #navbarNav {
-              position: absolute;
-              top: calc(100% - 8px);
-              right: 0.5rem;
-              left: auto;
-              z-index: 1000;
-              min-width: 10rem;
-              padding: 0;
-              background-color: #fff;
-              border: 1px solid rgba(0,0,0,.15);
-              border-radius: 0.375rem;
-              box-shadow: 0 0.5rem 1rem rgba(0,0,0,.175);
-            }
-            #navbarNav .mobile-menu {
-              padding: 0;
-            }
-            #navbarNav .dropdown-item {
-              padding: 0.25rem 1rem;
-            }
-            #navbarNav .dropdown-divider {
-              margin: 0.5rem 0;
-              border-top: 1px solid rgba(0,0,0,.15);
-              opacity: 1;
-            }
+          #navbarNav .mobile-menu {
+            padding: 0;
+          }
+          #navbarNav .dropdown-item {
+            padding: 0.25rem 1rem;
+          }
+          #navbarNav .dropdown-divider {
+            margin: 0.5rem 0;
+            border-top: 1px solid rgba(0,0,0,.15);
+            opacity: 1;
           }
         `}
       </style>
@@ -170,13 +201,16 @@ const Navbar: React.FC = () => {
 
           {/* Mobile menu toggle */}
           <button
-            className="navbar-toggler border-0 p-0"
+            ref={mobileToggleRef}
+            className="navbar-toggler border-0 p-0 d-lg-none"
             type="button"
-            data-bs-toggle="collapse"
-            data-bs-target="#navbarNav"
             aria-controls="navbarNav"
-            aria-expanded="false"
+            aria-expanded={isMobileMenuOpen}
             aria-label="Toggle navigation"
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsMobileMenuOpen((prev) => !prev);
+            }}
           >
             {user ? (
               <span
@@ -219,7 +253,25 @@ const Navbar: React.FC = () => {
               ></i>
             )}
           </button>
-          <div className="collapse navbar-collapse" id="navbarNav">
+          <div
+            ref={mobileMenuRef}
+            id="navbarNav"
+            className="d-lg-none"
+            style={{
+              display: isMobileMenuOpen ? "block" : "none",
+              position: "absolute",
+              top: "calc(100% - 8px)",
+              right: "0.5rem",
+              left: "auto",
+              zIndex: 1000,
+              minWidth: "10rem",
+              padding: 0,
+              backgroundColor: "#fff",
+              border: "1px solid rgba(0,0,0,.15)",
+              borderRadius: "0.375rem",
+              boxShadow: "0 0.5rem 1rem rgba(0,0,0,.175)",
+            }}
+          >
             <div
               className="d-flex align-items-center justify-content-center justify-content-lg-end w-100 py-3 py-lg-0 mobile-menu"
             >
@@ -228,17 +280,17 @@ const Navbar: React.FC = () => {
                   <>
                     {/* Mobile menu - show items directly */}
                     <li className="d-lg-none">
-                      <Link className="dropdown-item" to="/profile">
+                      <Link className="dropdown-item" to="/profile" onClick={closeMobileMenu}>
                         <i className="bi bi-person me-2"></i>Profile
                       </Link>
                     </li>
                     <li className="d-lg-none">
-                      <Link className="dropdown-item" to="/renting">
+                      <Link className="dropdown-item" to="/renting" onClick={closeMobileMenu}>
                         <i className="bi bi-calendar-check me-2"></i>Renting
                       </Link>
                     </li>
                     <li className="d-lg-none">
-                      <Link className="dropdown-item" to="/owning">
+                      <Link className="dropdown-item" to="/owning" onClick={closeMobileMenu}>
                         <i className="bi bi-list-ul me-2"></i>Owning
                         {pendingRequestsCount > 0 && (
                           <span className="badge bg-danger rounded-pill ms-2">
@@ -248,17 +300,17 @@ const Navbar: React.FC = () => {
                       </Link>
                     </li>
                     <li className="d-lg-none">
-                      <Link className="dropdown-item" to="/forum">
+                      <Link className="dropdown-item" to="/forum" onClick={closeMobileMenu}>
                         <i className="bi bi-chat-dots me-2"></i>Forum
                       </Link>
                     </li>
                     <li className="d-lg-none">
-                      <Link className="dropdown-item" to="/earnings">
+                      <Link className="dropdown-item" to="/earnings" onClick={closeMobileMenu}>
                         <i className="bi bi-cash-coin me-2"></i>Earnings
                       </Link>
                     </li>
                     <li className="d-lg-none">
-                      <Link className="dropdown-item" to="/messages">
+                      <Link className="dropdown-item" to="/messages" onClick={closeMobileMenu}>
                         <i className="bi bi-envelope me-2"></i>Messages
                         {unreadMessagesCount > 0 && (
                           <span className="badge bg-danger rounded-pill ms-2">
@@ -273,21 +325,26 @@ const Navbar: React.FC = () => {
                     <li className="d-lg-none">
                       <button
                         className="dropdown-item"
-                        onClick={handleLogout}
+                        onClick={() => {
+                          closeMobileMenu();
+                          handleLogout();
+                        }}
                       >
                         <i className="bi bi-box-arrow-right me-2"></i>Logout
                       </button>
                     </li>
 
                     {/* Desktop dropdown */}
-                    <li className="nav-item dropdown d-none d-lg-block">
-                      <a
-                        className="nav-link dropdown-toggle"
-                        href="#"
-                        id="navbarDropdown"
-                        role="button"
-                        data-bs-toggle="dropdown"
-                        aria-expanded="false"
+                    <li className="nav-item d-none d-lg-block" ref={dropdownRef} style={{ position: "relative" }}>
+                      <button
+                        type="button"
+                        className="nav-link btn btn-link p-0"
+                        aria-expanded={isDropdownOpen}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setIsDropdownOpen((prev) => !prev);
+                        }}
+                        style={{ cursor: "pointer", border: "none", background: "none" }}
                       >
                         <span
                           style={{
@@ -322,24 +379,30 @@ const Navbar: React.FC = () => {
                           )}
                           <Avatar user={user} size="sm" />
                         </span>
-                      </a>
+                      </button>
+                      {isDropdownOpen && (
                       <ul
-                        className="dropdown-menu"
-                        aria-labelledby="navbarDropdown"
+                        className="dropdown-menu show"
+                        style={{
+                          position: "absolute",
+                          right: 0,
+                          top: "100%",
+                          zIndex: 1000,
+                        }}
                       >
                         <li>
-                          <Link className="dropdown-item" to="/profile">
+                          <Link className="dropdown-item" to="/profile" onClick={() => setIsDropdownOpen(false)}>
                             <i className="bi bi-person me-2"></i>Profile
                           </Link>
                         </li>
                         <li>
-                          <Link className="dropdown-item" to="/renting">
+                          <Link className="dropdown-item" to="/renting" onClick={() => setIsDropdownOpen(false)}>
                             <i className="bi bi-calendar-check me-2"></i>
                             Renting
                           </Link>
                         </li>
                         <li>
-                          <Link className="dropdown-item" to="/owning">
+                          <Link className="dropdown-item" to="/owning" onClick={() => setIsDropdownOpen(false)}>
                             <i className="bi bi-list-ul me-2"></i>Owning
                             {pendingRequestsCount > 0 && (
                               <span className="badge bg-danger rounded-pill ms-2">
@@ -349,19 +412,19 @@ const Navbar: React.FC = () => {
                           </Link>
                         </li>
                         <li>
-                          <Link className="dropdown-item" to="/forum">
+                          <Link className="dropdown-item" to="/forum" onClick={() => setIsDropdownOpen(false)}>
                             <i className="bi bi-chat-dots me-2"></i>
                             Forum
                           </Link>
                         </li>
                         <li>
-                          <Link className="dropdown-item" to="/earnings">
+                          <Link className="dropdown-item" to="/earnings" onClick={() => setIsDropdownOpen(false)}>
                             <i className="bi bi-cash-coin me-2"></i>
                             Earnings
                           </Link>
                         </li>
                         <li>
-                          <Link className="dropdown-item" to="/messages">
+                          <Link className="dropdown-item" to="/messages" onClick={() => setIsDropdownOpen(false)}>
                             <i className="bi bi-envelope me-2"></i>Messages
                             {unreadMessagesCount > 0 && (
                               <span className="badge bg-danger rounded-pill ms-2">
@@ -376,20 +439,24 @@ const Navbar: React.FC = () => {
                         <li>
                           <button
                             className="dropdown-item"
-                            onClick={handleLogout}
+                            onClick={() => {
+                              setIsDropdownOpen(false);
+                              handleLogout();
+                            }}
                           >
                             <i className="bi bi-box-arrow-right me-2"></i>
                             Logout
                           </button>
                         </li>
                       </ul>
+                      )}
                     </li>
                   </>
                 ) : (
                   <>
                     {/* Mobile menu items */}
                     <li className="d-lg-none">
-                      <Link className="dropdown-item" to="/forum">
+                      <Link className="dropdown-item" to="/forum" onClick={closeMobileMenu}>
                         <i className="bi bi-chat-dots me-2"></i>Forum
                       </Link>
                     </li>
@@ -397,7 +464,10 @@ const Navbar: React.FC = () => {
                       <button
                         className="dropdown-item fw-bold"
                         style={{ color: "#000000" }}
-                        onClick={() => openAuthModal("login")}
+                        onClick={() => {
+                          closeMobileMenu();
+                          openAuthModal("login");
+                        }}
                       >
                         <i className="bi bi-box-arrow-in-right me-2"></i>Login or Sign Up
                       </button>