diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index 3646a88..1d080dc 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -15,7 +15,7 @@ const Navbar: React.FC = () => {
   const [unreadMessagesCount, setUnreadMessagesCount] = useState(0);
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-  const dropdownRef = useRef<HTMLLIElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
   const mobileMenuRef = useRef<HTMLDivElement>(null);
   const mobileToggleRef = useRef<HTMLButtonElement>(null);
 
@@ -253,6 +253,7 @@ const Navbar: React.FC = () => {
               ></i>
             )}
           </button>
+          {/* Mobile menu dropdown */}
           <div
             ref={mobileMenuRef}
             id="navbarNav"
@@ -273,23 +274,22 @@ const Navbar: React.FC = () => {
             }}
           >
             <div
-              className="d-flex align-items-center justify-content-center justify-content-lg-end w-100 py-3 py-lg-0 mobile-menu"
+              className="d-flex align-items-center justify-content-center w-100 py-3 mobile-menu"
             >
-              <ul className="navbar-nav flex-column flex-lg-row">
+              <ul className="navbar-nav flex-column">
                 {user ? (
                   <>
-                    {/* Mobile menu - show items directly */}
-                    <li className="d-lg-none">
+                    <li>
                       <Link className="dropdown-item" to="/profile" onClick={closeMobileMenu}>
                         <i className="bi bi-person me-2"></i>Profile
                       </Link>
                     </li>
-                    <li className="d-lg-none">
+                    <li>
                       <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">
+                    <li>
                       <Link className="dropdown-item" to="/owning" onClick={closeMobileMenu}>
                         <i className="bi bi-list-ul me-2"></i>Owning
                         {pendingRequestsCount > 0 && (
@@ -299,17 +299,17 @@ const Navbar: React.FC = () => {
                         )}
                       </Link>
                     </li>
-                    <li className="d-lg-none">
+                    <li>
                       <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">
+                    <li>
                       <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">
+                    <li>
                       <Link className="dropdown-item" to="/messages" onClick={closeMobileMenu}>
                         <i className="bi bi-envelope me-2"></i>Messages
                         {unreadMessagesCount > 0 && (
@@ -319,10 +319,10 @@ const Navbar: React.FC = () => {
                         )}
                       </Link>
                     </li>
-                    <li className="d-lg-none">
+                    <li>
                       <hr className="dropdown-divider" />
                     </li>
-                    <li className="d-lg-none">
+                    <li>
                       <button
                         className="dropdown-item"
                         onClick={() => {
@@ -333,134 +333,15 @@ const Navbar: React.FC = () => {
                         <i className="bi bi-box-arrow-right me-2"></i>Logout
                       </button>
                     </li>
-
-                    {/* Desktop dropdown */}
-                    <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={{
-                            display: "flex",
-                            alignItems: "center",
-                            position: "relative",
-                          }}
-                        >
-                          {(pendingRequestsCount > 0 ||
-                            unreadMessagesCount > 0) && (
-                            <span
-                              style={{
-                                position: "absolute",
-                                right: "-5px",
-                                top: "-5px",
-                                backgroundColor: "#dc3545",
-                                color: "white",
-                                borderRadius: "50%",
-                                width: "1.2em",
-                                height: "1.2em",
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: "center",
-                                fontSize: "0.7em",
-                                fontWeight: "bold",
-                                border: "2px solid white",
-                                zIndex: 1,
-                              }}
-                            >
-                              {pendingRequestsCount + unreadMessagesCount}
-                            </span>
-                          )}
-                          <Avatar user={user} size="sm" />
-                        </span>
-                      </button>
-                      {isDropdownOpen && (
-                      <ul
-                        className="dropdown-menu show"
-                        style={{
-                          position: "absolute",
-                          right: 0,
-                          top: "100%",
-                          zIndex: 1000,
-                        }}
-                      >
-                        <li>
-                          <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" onClick={() => setIsDropdownOpen(false)}>
-                            <i className="bi bi-calendar-check me-2"></i>
-                            Renting
-                          </Link>
-                        </li>
-                        <li>
-                          <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">
-                                {pendingRequestsCount}
-                              </span>
-                            )}
-                          </Link>
-                        </li>
-                        <li>
-                          <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" onClick={() => setIsDropdownOpen(false)}>
-                            <i className="bi bi-cash-coin me-2"></i>
-                            Earnings
-                          </Link>
-                        </li>
-                        <li>
-                          <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">
-                                {unreadMessagesCount}
-                              </span>
-                            )}
-                          </Link>
-                        </li>
-                        <li>
-                          <hr className="dropdown-divider" />
-                        </li>
-                        <li>
-                          <button
-                            className="dropdown-item"
-                            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">
+                    <li>
                       <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">
+                    <li>
                       <button
                         className="dropdown-item fw-bold"
                         style={{ color: "#000000" }}
@@ -472,29 +353,147 @@ const Navbar: React.FC = () => {
                         <i className="bi bi-box-arrow-in-right me-2"></i>Login or Sign Up
                       </button>
                     </li>
-
-                    {/* Desktop buttons */}
-                    <li className="nav-item d-none d-lg-block">
-                      <Link
-                        className="btn btn-outline-primary btn-sm text-nowrap me-2"
-                        to="/forum"
-                      >
-                        Forum
-                      </Link>
-                    </li>
-                    <li className="nav-item d-none d-lg-block">
-                      <button
-                        className="btn btn-primary btn-sm text-nowrap"
-                        onClick={() => openAuthModal("login")}
-                      >
-                        Login or Sign Up
-                      </button>
-                    </li>
                   </>
                 )}
               </ul>
             </div>
           </div>
+
+          {/* Desktop navigation - outside mobile menu container */}
+          <div className="d-none d-lg-flex align-items-center">
+            {user ? (
+              <div 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={{
+                      display: "flex",
+                      alignItems: "center",
+                      position: "relative",
+                    }}
+                  >
+                    {(pendingRequestsCount > 0 || unreadMessagesCount > 0) && (
+                      <span
+                        style={{
+                          position: "absolute",
+                          right: "-5px",
+                          top: "-5px",
+                          backgroundColor: "#dc3545",
+                          color: "white",
+                          borderRadius: "50%",
+                          width: "1.2em",
+                          height: "1.2em",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          fontSize: "0.7em",
+                          fontWeight: "bold",
+                          border: "2px solid white",
+                          zIndex: 1,
+                        }}
+                      >
+                        {pendingRequestsCount + unreadMessagesCount}
+                      </span>
+                    )}
+                    <Avatar user={user} size="sm" />
+                  </span>
+                </button>
+                {isDropdownOpen && (
+                  <ul
+                    className="dropdown-menu show"
+                    style={{
+                      position: "absolute",
+                      right: 0,
+                      top: "100%",
+                      zIndex: 1000,
+                    }}
+                  >
+                    <li>
+                      <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" onClick={() => setIsDropdownOpen(false)}>
+                        <i className="bi bi-calendar-check me-2"></i>
+                        Renting
+                      </Link>
+                    </li>
+                    <li>
+                      <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">
+                            {pendingRequestsCount}
+                          </span>
+                        )}
+                      </Link>
+                    </li>
+                    <li>
+                      <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" onClick={() => setIsDropdownOpen(false)}>
+                        <i className="bi bi-cash-coin me-2"></i>
+                        Earnings
+                      </Link>
+                    </li>
+                    <li>
+                      <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">
+                            {unreadMessagesCount}
+                          </span>
+                        )}
+                      </Link>
+                    </li>
+                    <li>
+                      <hr className="dropdown-divider" />
+                    </li>
+                    <li>
+                      <button
+                        className="dropdown-item"
+                        onClick={() => {
+                          setIsDropdownOpen(false);
+                          handleLogout();
+                        }}
+                      >
+                        <i className="bi bi-box-arrow-right me-2"></i>
+                        Logout
+                      </button>
+                    </li>
+                  </ul>
+                )}
+              </div>
+            ) : (
+              <>
+                <Link
+                  className="btn btn-outline-primary btn-sm text-nowrap me-2"
+                  to="/forum"
+                >
+                  Forum
+                </Link>
+                <button
+                  className="btn btn-primary btn-sm text-nowrap"
+                  onClick={() => openAuthModal("login")}
+                >
+                  Login or Sign Up
+                </button>
+              </>
+            )}
+          </div>
         </div>
       </nav>
     </>