Index: frontend/src/pages/UserDetail.tsx
===================================================================
--- frontend/src/pages/UserDetail.tsx	(revision dc30259a457c1232ee6ee1f6096c9fa50172e058)
+++ frontend/src/pages/UserDetail.tsx	(revision f5bc95e4a628b62884f4631d8a118a9790052953)
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
-import axiosInstance from "../api/axiosInstance";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import axiosInstance, { baseURL } from "../api/axiosInstance";
 import LoadingSpinner from "../components/LoadingSpinner";
 import ArtistView from "../components/userProfile/ArtistView";
@@ -35,8 +35,5 @@
 
 const UserDetail = () => {
-	// user refers to the selected user NOT to the user from context
-	const baseURL = import.meta.env.VITE_API_BASE_URL;
 	const { username: usernameParam } = useParams();
-	// sintaksava dole znaci zemi go user od auth context i preimenuvaj go vo currentUser, za da ne se izmesa so user-ot dole
 	const { user: currentUser } = useAuth();
 	const navigate = useNavigate();
@@ -49,19 +46,21 @@
 	const [isFollowing, setIsFollowing] = useState(false);
 
-	// determine which username to use: URL param or current user's username
 	const username = usernameParam || currentUser?.username;
-
-	// if we're on /me route and no user is logged in, show error
+	const isOwnProfile = currentUser?.username === username;
+
 	if (!usernameParam && !currentUser) {
 		return (
-			<div className="p-6 bg-red-50 border border-red-200 text-red-700 rounded-lg">
-				<h2 className="font-bold">Authentication Required</h2>
-				<p>You must be logged in to view your profile.</p>
-				<button
-					onClick={() => navigate("/login")}
-					className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors duration-200 cursor-pointer"
-				>
-					Go to Login
-				</button>
+			<div className="min-h-screen bg-linear-to-br from-[#1e1e2e] to-[#0f0f1e] flex items-center justify-center">
+				<div className="text-center">
+					<p className="text-red-400 text-xl mb-4">
+						You must be logged in to view your profile.
+					</p>
+					<button
+						onClick={() => navigate("/login")}
+						className="text-[#1db954] hover:underline text-sm cursor-pointer"
+					>
+						Go to Login
+					</button>
+				</div>
 			</div>
 		);
@@ -95,5 +94,5 @@
 		try {
 			const response = await axiosInstance.post<FollowStatus>(
-				`/users/na/${username}/follow`,
+				`/users/na/${targetUsername}/follow`,
 			);
 
@@ -105,15 +104,4 @@
 				),
 			);
-
-			// if (user && user.id === targetId) {
-			//   setUser((prev) => {
-			//     if (!prev) return null;
-			//     return {
-			//       ...prev,
-			//       isFollowedByCurrentUser: response.data.isFollowing,
-			//       followers: response.data.followerCount,
-			//     };
-			//   });
-			// }
 		} catch (err: any) {
 			setError(handleError(err));
@@ -157,5 +145,4 @@
 			try {
 				const response = await axiosInstance.get(`/users/na/${username}`);
-				console.log(response.data);
 				setUser(response.data);
 			} catch (err: any) {
@@ -168,7 +155,11 @@
 	if (error) {
 		return (
-			<div className="p-6 bg-red-50 border border-red-200 text-red-700 rounded-lg">
-				<h2 className="font-bold">Error</h2>
-				<p>{error}</p>
+			<div className="min-h-screen bg-linear-to-br from-[#1e1e2e] to-[#0f0f1e] flex items-center justify-center">
+				<div className="text-center">
+					<p className="text-red-400 text-xl mb-4">{error}</p>
+					<Link to="/" className="text-[#1db954] hover:underline text-sm">
+						← Back to Home
+					</Link>
+				</div>
 			</div>
 		);
@@ -180,23 +171,38 @@
 
 	return (
-		<div className="container mx-auto p-6">
+		<div className="min-h-screen bg-linear-to-br from-[#1e1e2e] to-[#0f0f1e] text-white">
 			{isLoadingModal && (
-				<div className="fixed inset-0 z-40 bg-black/30 backdrop-blur-sm flex items-center justify-center">
-					<div className="flex items-center gap-3">
-						<div className="w-6 h-6 border-3 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
-					</div>
+				<div className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm flex items-center justify-center">
+					<div className="w-10 h-10 border-4 border-white/10 border-t-[#1db954] rounded-full animate-spin" />
 				</div>
 			)}
-			<button
-				onClick={() => navigate(-1)}
-				className="mb-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors duration-200 cursor-pointer"
-			>
-				← Back
-			</button>
-
-			<div className="bg-white shadow-lg rounded-lg p-8">
-				<div className="flex items-start gap-6 mb-8">
-					<div className="shrink-0">
-						<div className="w-32 h-32 rounded-full bg-linear-to-br from-blue-400 to-purple-500 flex items-center justify-center text-white text-4xl font-bold shadow-lg overflow-hidden">
+
+			<div className="max-w-5xl mx-auto px-6 py-10">
+				{/* Back link */}
+				<Link
+					to="/"
+					className="inline-flex items-center gap-1 text-gray-400 hover:text-white text-sm mb-8 transition-colors"
+				>
+					<svg
+						className="w-4 h-4"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeWidth={2}
+							d="M15 19l-7-7 7-7"
+						/>
+					</svg>
+					Back to Home
+				</Link>
+
+				{/* Hero section */}
+				<div className="flex flex-col md:flex-row gap-8 mb-10">
+					{/* Profile photo */}
+					<div className="w-full md:w-48 shrink-0">
+						<div className="relative w-48 h-48 rounded-full overflow-hidden shadow-2xl bg-[#181818] mx-auto md:mx-0">
 							{user.profilePhoto ? (
 								<img
@@ -206,56 +212,103 @@
 								/>
 							) : (
-								user.fullName.charAt(0).toUpperCase()
+								<div className="w-full h-full bg-linear-to-br from-[#1db954] to-[#1ed760] flex items-center justify-center text-white text-5xl font-bold">
+									{user.fullName.charAt(0).toUpperCase()}
+								</div>
 							)}
 						</div>
 					</div>
 
-					<div className="flex-1">
-						<h1 className="text-4xl font-bold mb-2">{user.fullName}</h1>
-						<span className="inline-block px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium mb-4">
-							{user.userType}
+					{/* User info */}
+					<div className="flex flex-col justify-end gap-3 min-w-0">
+						<span className="text-xs uppercase tracking-widest text-gray-400 font-medium">
+							{user.userType === "ARTIST" ? "Artist" : "Listener"} • Profile
 						</span>
-
-						<div className="flex gap-6 mb-4 text-gray-700">
+						<h1 className="text-4xl md:text-5xl font-extrabold leading-tight">
+							{user.fullName}
+						</h1>
+						<p className="text-gray-400">@{user.username}</p>
+
+						{/* Stats */}
+						<div className="flex items-center gap-6 mt-2">
 							<div
-								className={`flex flex-col ${user.userType == "LISTENER" ? "cursor-pointer" : "cursor-default"}`}
+								className={`${user.userType === "LISTENER" ? "cursor-pointer hover:text-white" : ""} transition-colors`}
 								onClick={
 									user.userType === "LISTENER" ? displayFollowers : undefined
 								}
 							>
-								<span className="text-2xl font-bold">{user.followers}</span>
-								<span className="text-sm text-gray-500">Followers</span>
+								<span className="text-xl font-bold text-white">
+									{user.followers}
+								</span>
+								<span className="text-sm text-gray-400 ml-1">Followers</span>
 							</div>
 							<div
-								className={`flex flex-col ${user.userType == "LISTENER" ? "cursor-pointer" : "cursor-default"}`}
+								className={`${user.userType === "LISTENER" ? "cursor-pointer hover:text-white" : ""} transition-colors`}
 								onClick={
 									user.userType === "LISTENER" ? displayFollowing : undefined
 								}
 							>
-								<span className="text-2xl font-bold">{user.following}</span>
-								<span className="text-sm text-gray-500">Following</span>
+								<span className="text-xl font-bold text-white">
+									{user.following}
+								</span>
+								<span className="text-sm text-gray-400 ml-1">Following</span>
 							</div>
 						</div>
 
-						<button
-							onClick={handleFollow}
-							disabled={isFollowing}
-							className={`
-                px-6 py-2 font-semibold rounded-lg shadow-md 
-                transition-colors duration-200
-                ${
-									isFollowing
-										? "bg-gray-400 text-gray-200 cursor-not-allowed"
-										: user.isFollowedByCurrentUser
-											? "bg-gray-200 text-gray-700 hover:bg-gray-300 cursor-pointer"
-											: "bg-blue-500 text-white hover:bg-blue-600 cursor-pointer"
-								}
-              `}
-						>
-							{user.isFollowedByCurrentUser ? "Unfollow" : "Follow"}
-						</button>
+						{/* Follow button - hidden on own profile */}
+						{!isOwnProfile && (
+							<div className="mt-4">
+								<button
+									onClick={handleFollow}
+									disabled={isFollowing}
+									className={`flex items-center gap-2 px-6 py-3 rounded-full text-sm font-semibold transition-all cursor-pointer ${
+										isFollowing
+											? "bg-gray-700 text-gray-400 cursor-not-allowed"
+											: user.isFollowedByCurrentUser
+												? "bg-white/10 text-white hover:bg-white/20"
+												: "bg-[#1db954] text-black hover:bg-[#1ed760] hover:scale-105"
+									}`}
+								>
+									{user.isFollowedByCurrentUser ? (
+										<>
+											<svg
+												className="w-5 h-5"
+												fill="none"
+												stroke="currentColor"
+												viewBox="0 0 24 24"
+											>
+												<path
+													strokeLinecap="round"
+													strokeLinejoin="round"
+													strokeWidth={2}
+													d="M5 13l4 4L19 7"
+												/>
+											</svg>
+											Following
+										</>
+									) : (
+										<>
+											<svg
+												className="w-5 h-5"
+												fill="none"
+												stroke="currentColor"
+												viewBox="0 0 24 24"
+											>
+												<path
+													strokeLinecap="round"
+													strokeLinejoin="round"
+													strokeWidth={2}
+													d="M12 4v16m8-8H4"
+												/>
+											</svg>
+											Follow
+										</>
+									)}
+								</button>
+							</div>
+						)}
 					</div>
 				</div>
 
+				{/* Content */}
 				{user.userType === "ARTIST" ? (
 					<ArtistView contributions={user.contributions} />