Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/AuthController.java
===================================================================
--- finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/AuthController.java	(revision 0c86e77a055e354a71be0ff7c053051ca180993b)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/AuthController.java	(revision 24a2a2a4a4b81dce438be6dc97bc572bf62a589e)
@@ -81,5 +81,5 @@
     }
 
-    @GetMapping("/logout")
+    @PostMapping("/logout")
     public ResponseEntity<Map<String, String>> logout(
             HttpServletResponse httpServletResponse,
Index: frontend/src/App.tsx
===================================================================
--- frontend/src/App.tsx	(revision 0c86e77a055e354a71be0ff7c053051ca180993b)
+++ frontend/src/App.tsx	(revision 24a2a2a4a4b81dce438be6dc97bc572bf62a589e)
@@ -2,4 +2,5 @@
 import LandingPage from "./LandingPage";
 import Login from "./Login";
+import Nav from "./Nav";
 import Register from "./Register";
 
@@ -7,5 +8,5 @@
 	return (
 		<div className="flex flex-col min-h-screen">
-			{/* <Nav /> */}
+			<Nav />
 			<main className="grow">
 				<Outlet />
Index: frontend/src/Login.tsx
===================================================================
--- frontend/src/Login.tsx	(revision 0c86e77a055e354a71be0ff7c053051ca180993b)
+++ frontend/src/Login.tsx	(revision 24a2a2a4a4b81dce438be6dc97bc572bf62a589e)
@@ -1,4 +1,75 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import axiosInstance, { scheduleTokenRefresh } from "./api/axiosInstance";
+import { useAuth } from "./context/authContext";
+import type { UserResponse } from "./types";
+
 const Login = () => {
-	return <div>login</div>;
+	const [username, setUsername] = useState("");
+	const [password, setPassword] = useState("");
+	const [error, setError] = useState<string | null>(null);
+	const { setUser } = useAuth();
+	const navigate = useNavigate();
+
+	const handleLogin = async (e: React.FormEvent) => {
+		e.preventDefault();
+		try {
+			const response = await axiosInstance.post<{
+				user: UserResponse;
+				tokenExpiresIn: number;
+			}>("/auth/login", { username, password });
+			scheduleTokenRefresh(response.data.tokenExpiresIn);
+			setUser({
+				username: response.data.user.username,
+				fullName: "demo",
+				email: "demo@demo.com",
+				role: response.data.user.role,
+			});
+			navigate("/");
+		} catch (error) {
+			setError("Login failed. Please check your credentials.");
+		}
+	};
+	return (
+		<div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
+			<h2 className="text-2xl mb-4">Login</h2>
+			<form
+				onSubmit={handleLogin}
+				className="bg-white p-6 rounded shadow-md w-80"
+			>
+				{error && <p className="text-red-500 mb-4">{error}</p>}
+				<div className="mb-4">
+					<label className="block text-gray-700 mb-2" htmlFor="username">
+						Username
+					</label>
+					<input
+						type="text"
+						id="username"
+						className="w-full p-2 border border-gray-300 rounded"
+						value={username}
+						onChange={(e) => setUsername(e.target.value)}
+					/>
+				</div>
+				<div className="mb-4">
+					<label className="block text-gray-700 mb-2" htmlFor="password">
+						Password
+					</label>
+					<input
+						type="password"
+						id="password"
+						className="w-full p-2 border border-gray-300 rounded"
+						value={password}
+						onChange={(e) => setPassword(e.target.value)}
+					/>
+				</div>
+				<button
+					type="submit"
+					className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors duration-200 w-full"
+				>
+					Login
+				</button>
+			</form>
+		</div>
+	);
 };
 
Index: frontend/src/Nav.tsx
===================================================================
--- frontend/src/Nav.tsx	(revision 24a2a2a4a4b81dce438be6dc97bc572bf62a589e)
+++ frontend/src/Nav.tsx	(revision 24a2a2a4a4b81dce438be6dc97bc572bf62a589e)
@@ -0,0 +1,68 @@
+import { Link } from "react-router-dom";
+import axiosInstance from "./api/axiosInstance";
+import { useAuth } from "./context/authContext";
+
+const Nav = () => {
+	const { user, setUser, isAuthLoading } = useAuth();
+
+	const handleLogout = async () => {
+		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">
+				Finkwave
+			</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">
+									<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={(e) => {
+										e.preventDefault();
+										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"
+								>
+									Logout
+								</button>
+							</div>
+						) : (
+							<div className="flex items-center space-x-2">
+								<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"
+								>
+									Login
+								</Link>
+							</div>
+						)}
+					</div>
+				)}
+			</div>
+		</div>
+	);
+};
+
+export default Nav;
Index: frontend/src/Register.tsx
===================================================================
--- frontend/src/Register.tsx	(revision 0c86e77a055e354a71be0ff7c053051ca180993b)
+++ frontend/src/Register.tsx	(revision 24a2a2a4a4b81dce438be6dc97bc572bf62a589e)
@@ -15,5 +15,6 @@
 	const navigate = useNavigate();
 
-	const handleRegister = async () => {
+	const handleRegister = async (e: React.FormEvent) => {
+		e.preventDefault();
 		const newUser: User = {
 			username,
@@ -35,4 +36,5 @@
 			scheduleTokenRefresh(response.data.tokenExpiresIn);
 			setUser(newUser);
+			// todo
 			// setUser(response.data.user);
 			navigate("/");
@@ -109,8 +111,7 @@
 					type="submit"
 					className="w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-600"
-					onClick={(e) => {
-						e.preventDefault();
-						handleRegister();
-					}}
+					onClick={(e: React.MouseEvent<HTMLButtonElement>) =>
+						handleRegister(e)
+					}
 				>
 					Register
Index: frontend/src/context/authContext.tsx
===================================================================
--- frontend/src/context/authContext.tsx	(revision 0c86e77a055e354a71be0ff7c053051ca180993b)
+++ frontend/src/context/authContext.tsx	(revision 24a2a2a4a4b81dce438be6dc97bc572bf62a589e)
@@ -41,5 +41,5 @@
 					tokenExpiresIn: number;
 					user: User;
-				}>("/user");
+				}>("/auth/user");
 				setUser(response.data.user);
 				scheduleTokenRefresh(response.data.tokenExpiresIn);