Index: frontend/src/pages/Nav.tsx
===================================================================
--- frontend/src/pages/Nav.tsx	(revision 4e5cf92d976588170fa715007a49de90e673172a)
+++ frontend/src/pages/Nav.tsx	(revision 4e5cf92d976588170fa715007a49de90e673172a)
@@ -0,0 +1,85 @@
+import { Link } from "react-router-dom";
+import axiosInstance, { baseURL } from "../api/axiosInstance";
+import Logo from "../assets/logo-finkwave.png";
+import { useAuth } from "../context/authContext";
+
+const Nav = () => {
+	const { user, setUser, isAuthLoading } = useAuth();
+
+	const handleLogout = async (e: React.MouseEvent<HTMLButtonElement>) => {
+		e.preventDefault();
+		try {
+			await axiosInstance.post("/auth/logout");
+			setUser(undefined);
+		} catch (error) {
+			console.error("Logout failed:", error);
+		}
+	};
+
+	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="flex items-center space-x-4">
+				{!isAuthLoading && (
+					<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">
+									{user.profilePhoto ? (
+										<img
+											src={`${baseURL}/${user.profilePhoto}`}
+											alt={`${user.username}'s profile`}
+											className="w-8 h-8 rounded-full object-cover"
+										/>
+									) : (
+										<div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
+											<span className="text-white text-sm font-semibold">
+												{user.username.charAt(0).toUpperCase()}
+											</span>
+										</div>
+									)}
+
+									<div className="text-white">
+										<p className="text-sm font-medium">{user.username}</p>
+										<p className="text-xs text-gray-300 capitalize">
+											{user.role}
+										</p>
+									</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>
+						) : (
+							<div className="flex items-center space-x-4">
+								<Link
+									to="/login"
+									className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm 
+                                    font-medium transition-colors duration-200 cursor-pointer"
+								>
+									Login
+								</Link>
+								<Link
+									to="/register"
+									className="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg text-sm
+                                    font-medium transition-colors duration-200 cursor-pointer"
+								>
+									Register
+								</Link>
+							</div>
+						)}
+					</div>
+				)}
+			</div>
+		</div>
+	);
+};
+
+export default Nav;