Index: frontend/src/pages/Login.tsx
===================================================================
--- frontend/src/pages/Login.tsx	(revision 3238007b9dbc5f9b1be113a3d57611699c0c7302)
+++ frontend/src/pages/Login.tsx	(revision ce45c7a7871379455b3a3c55a48f767ca2e0e739)
@@ -1,4 +1,4 @@
 import { useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 import axiosInstance, { scheduleTokenRefresh } from "../api/axiosInstance";
@@ -32,42 +32,75 @@
 	};
 	return (
-		<div className="flex flex-col items-center justify-center min-h-[90vh] 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 className="min-h-screen bg-linear-to-br from-[#1e1e2e] to-[#0f0f1e] flex items-center justify-center px-4">
+			<div className="w-full max-w-md">
+				<div className="text-center mb-8">
+					<h1 className="text-4xl font-extrabold text-white mb-2">
+						Welcome Back
+					</h1>
+					<p className="text-gray-400">Log in to continue to FinkWave</p>
 				</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 cursor-pointer"
+
+				<form
+					onSubmit={handleLogin}
+					className="bg-[#181818] rounded-xl p-8 space-y-6"
 				>
-					Login
-				</button>
-			</form>
+					{error && (
+						<div className="bg-red-500/10 border border-red-500/20 rounded-lg p-3">
+							<p className="text-red-400 text-sm">{error}</p>
+						</div>
+					)}
+
+					<div>
+						<label
+							className="block text-sm font-medium text-gray-300 mb-2"
+							htmlFor="username"
+						>
+							Username
+						</label>
+						<input
+							type="text"
+							id="username"
+							className="w-full bg-[#282828] border border-white/10 rounded-lg py-3 px-4 text-white placeholder-gray-500 focus:outline-none focus:border-[#1db954] focus:ring-1 focus:ring-[#1db954] transition-all"
+							placeholder="Enter your username"
+							value={username}
+							onChange={(e) => setUsername(e.target.value)}
+						/>
+					</div>
+
+					<div>
+						<label
+							className="block text-sm font-medium text-gray-300 mb-2"
+							htmlFor="password"
+						>
+							Password
+						</label>
+						<input
+							type="password"
+							id="password"
+							className="w-full bg-[#282828] border border-white/10 rounded-lg py-3 px-4 text-white placeholder-gray-500 focus:outline-none focus:border-[#1db954] focus:ring-1 focus:ring-[#1db954] transition-all"
+							placeholder="Enter your password"
+							value={password}
+							onChange={(e) => setPassword(e.target.value)}
+						/>
+					</div>
+
+					<button
+						type="submit"
+						className="w-full py-3 bg-[#1db954] rounded-full text-black font-semibold hover:bg-[#1ed760] transition-colors cursor-pointer"
+					>
+						Log In
+					</button>
+
+					<p className="text-center text-sm text-gray-400">
+						Don't have an account?{" "}
+						<Link
+							to="/register"
+							className="text-[#1db954] hover:underline font-medium"
+						>
+							Sign up
+						</Link>
+					</p>
+				</form>
+			</div>
 		</div>
 	);