Index: frontend/src/pages/Nav.tsx
===================================================================
--- frontend/src/pages/Nav.tsx	(revision b70fbeb1a16c9d900c276242b590510a38a98b4a)
+++ frontend/src/pages/Nav.tsx	(revision cb4a1da079608fdb022036c90eb6e41f26046827)
@@ -1,2 +1,3 @@
+import { useEffect, useRef, useState } from "react";
 import { Link } from "react-router-dom";
 import { toast } from "react-toastify";
@@ -5,6 +6,13 @@
 import { useAuth } from "../context/authContext";
 
-const Nav = () => {
+interface NavProps {
+	isSidebarOpen?: boolean;
+	onToggleSidebar?: () => void;
+}
+
+const Nav = ({ isSidebarOpen = false, onToggleSidebar }: NavProps) => {
 	const { user, setUser, isAuthLoading } = useAuth();
+	const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+	const dropdownRef = useRef<HTMLDivElement>(null);
 
 	const handleLogout = async (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -13,4 +21,5 @@
 			await axiosInstance.post("/auth/logout");
 			setUser(undefined);
+			setIsDropdownOpen(false);
 			toast.success("Logout successful!");
 		} catch (error) {
@@ -20,9 +29,52 @@
 	};
 
+	useEffect(() => {
+		const handleClickOutside = (event: MouseEvent) => {
+			if (
+				dropdownRef.current &&
+				!dropdownRef.current.contains(event.target as Node)
+			) {
+				setIsDropdownOpen(false);
+			}
+		};
+
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside);
+		};
+	}, []);
+
 	return (
-		<div className="bg-gray-800 p-4 flex justify-between items-center">
-			<Link to="/" className="text-white text-lg font-semibold">
-				<img src={Logo} alt="Finkwave Logo" className="h-12 w-auto" />
-			</Link>
+		<div
+			className={`bg-gray-800 p-4 flex justify-between items-center fixed top-0 right-0 z-50 transition-all duration-300 ${
+				isSidebarOpen ? "left-64" : "left-0"
+			}`}
+		>
+			<div className="flex items-center gap-4">
+				{onToggleSidebar && (
+					<button
+						onClick={onToggleSidebar}
+						className="text-white hover:text-[#1db954] transition-colors p-2"
+						aria-label="Toggle sidebar"
+					>
+						<svg
+							className="w-6 h-6"
+							fill="none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								strokeWidth={2}
+								d="M4 6h16M4 12h16M4 18h16"
+							/>
+						</svg>
+					</button>
+				)}
+				<Link to="/" className="text-white text-lg font-semibold">
+					<img src={Logo} alt="Finkwave Logo" className="h-12 w-auto" />
+				</Link>
+			</div>
 
 			<div className="flex items-center space-x-4">
@@ -30,34 +82,41 @@
 					<div className="flex items-center space-x-3">
 						{user ? (
-							<div className="flex items-center space-x-3">
-								<div className="flex items-center space-x-2 bg-slate-700 rounded-lg px-3 py-2">
+							<div className="relative" ref={dropdownRef}>
+								<button
+									onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+									className="focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-full"
+								>
 									{user.profilePhoto ? (
 										<img
 											src={`${baseURL}/${user.profilePhoto}`}
 											alt={`${user.username}'s profile`}
-											className="w-8 h-8 rounded-full object-cover"
+											className="w-10 h-10 rounded-full object-cover cursor-pointer hover:ring-2 hover:ring-blue-400 transition-all"
 										/>
 									) : (
-										<div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
-											<span className="text-white text-sm font-semibold">
+										<div className="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center cursor-pointer hover:ring-2 hover:ring-blue-400 transition-all">
+											<span className="text-white text-lg font-semibold">
 												{user.username.charAt(0).toUpperCase()}
 											</span>
 										</div>
 									)}
+								</button>
 
-									<div className="text-white">
-										<p className="text-sm font-medium">{user.username}</p>
-										<p className="text-xs text-gray-300 capitalize">
-											{user.role}
-										</p>
+								{isDropdownOpen && (
+									<div className="absolute right-0 mt-2 w-48 bg-gray-700 rounded-lg shadow-lg py-1 z-50">
+										<Link
+											to="#"
+											className="block px-4 py-2 text-sm text-white hover:bg-gray-600 transition-colors"
+											onClick={() => setIsDropdownOpen(false)}
+										>
+											Account
+										</Link>
+										<button
+											onClick={handleLogout}
+											className="w-full text-left px-4 py-2 text-sm text-white hover:bg-gray-600 transition-colors"
+										>
+											Log out
+										</button>
 									</div>
-								</div>
-								<button
-									onClick={handleLogout}
-									className="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg text-sm 
-                                    font-medium transition-colors duration-200 flex items-center space-x-1 cursor-pointer"
-								>
-									Logout
-								</button>
+								)}
 							</div>
 						) : (