Index: frontend/src/pages/MusicalCollection.tsx
===================================================================
--- frontend/src/pages/MusicalCollection.tsx	(revision f5bc95e4a628b62884f4631d8a118a9790052953)
+++ frontend/src/pages/MusicalCollection.tsx	(revision 85512ff50bc46445db00d8c3ecea57616baddb36)
@@ -3,249 +3,249 @@
 import axiosInstance, { baseURL } from "../api/axiosInstance";
 import SongItem from "../components/SongItem";
-import { handleError } from "../utils/error";
+import { getErrorMessage } from "../utils/error";
 import type { Album, Playlist, Song } from "../utils/types";
 interface CollectionView {
-	id: number;
-	title: string;
-	cover?: string | null;
-	genre?: string;
-	type: string;
-	releasedBy: string;
-	isLikedByCurrentUser?: boolean;
-	songs: Song[];
+  id: number;
+  title: string;
+  cover?: string | null;
+  genre?: string;
+  type: string;
+  releasedBy: string;
+  isLikedByCurrentUser?: boolean;
+  songs: Song[];
 }
 
 const MusicalCollection = () => {
-	const { type, id } = useParams();
-	const [collection, setCollection] = useState<CollectionView | null>(null);
-	const [isLoading, setIsLoading] = useState(true);
-	const [error, setError] = useState<string | null>(null);
-
-	const normalizeCollection = (
-		data: Album | Playlist,
-		type: string,
-	): CollectionView => {
-		if (type === "album") {
-			const album = data as Album;
-			return {
-				id: album.id,
-				title: album.title,
-				cover: album.cover,
-				genre: album.genre,
-				type: album.type,
-				releasedBy: album.releasedBy,
-				isLikedByCurrentUser: album.isLikedByCurrentUser,
-				songs: album.songs,
-			};
-		} else {
-			const playlist = data as Playlist;
-			return {
-				id: playlist.id,
-				title: playlist.name,
-				cover: playlist.cover,
-				genre: undefined,
-				type: "PLAYLIST",
-				releasedBy: playlist.creatorName,
-				isLikedByCurrentUser: undefined,
-				songs: playlist.songsInPlaylist,
-			};
-		}
-	};
-
-	const toggleLike = async (songId: number) => {
-		try {
-			await axiosInstance.post(`/musical-entity/${songId}/like`);
-			setCollection((prev) => {
-				if (!prev) return null;
-				return {
-					...prev,
-					songs: prev.songs.map((s) =>
-						s.id === songId
-							? { ...s, isLikedByCurrentUser: !s.isLikedByCurrentUser }
-							: s,
-					),
-				};
-			});
-		} catch (err) {
-			console.error("Error toggling like:", err);
-		}
-	};
-
-	const toggleCollectionLike = async () => {
-		if (!collection) return;
-		try {
-			await axiosInstance.post(`/musical-entity/${collection.id}/like`);
-			setCollection((prev) => {
-				if (!prev) return null;
-				return { ...prev, isLikedByCurrentUser: !prev.isLikedByCurrentUser };
-			});
-		} catch (err) {
-			console.error("Error toggling collection like:", err);
-		}
-	};
-
-	useEffect(() => {
-		const fetchData = async () => {
-			setIsLoading(true);
-			setError(null);
-			try {
-				const endpoint =
-					type === "album" ? `/albums/${id}` : `/playlists/${id}`;
-				const response = await axiosInstance.get(endpoint);
-
-				const normalized = normalizeCollection(response.data, type!);
-				setCollection(normalized);
-			} catch (err: any) {
-				setError(handleError(err));
-			} finally {
-				setIsLoading(false);
-			}
-		};
-		fetchData();
-	}, [id, type]);
-
-	if (isLoading) {
-		return (
-			<div className="min-h-screen bg-linear-to-br from-[#1e1e2e] to-[#0f0f1e] flex items-center justify-center">
-				<div className="flex flex-col items-center gap-4">
-					<div className="w-12 h-12 border-4 border-white/10 border-t-[#1db954] rounded-full animate-spin" />
-					<p className="text-gray-400 text-lg">Loading collection…</p>
-				</div>
-			</div>
-		);
-	}
-
-	if (error) {
-		return (
-			<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>
-		);
-	}
-
-	if (!collection) return null;
-
-	return (
-		<div className="min-h-screen bg-linear-to-br from-[#1e1e2e] to-[#0f0f1e] text-white">
-			<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">
-					{/* Cover art */}
-					<div className="w-full md:w-72 shrink-0">
-						<div className="relative w-full pt-[100%] rounded-xl overflow-hidden shadow-2xl bg-[#181818]">
-							<img
-								src={
-									collection.cover
-										? `${baseURL}/${collection.cover}`
-										: "/favicon.png"
-								}
-								alt={collection.title}
-								className="absolute inset-0 w-full h-full object-cover"
-								onError={(e) => {
-									(e.target as HTMLImageElement).src = "/favicon.png";
-								}}
-							/>
-						</div>
-					</div>
-
-					{/* Collection 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">
-							{collection.genre ? `${collection.genre} • ` : ""}
-							{collection.type === "PLAYLIST" ? "Playlist" : "Album"}
-						</span>
-						<h1 className="text-4xl md:text-5xl font-extrabold leading-tight truncate">
-							{collection.title}
-						</h1>
-
-						<p className="text-xl text-gray-300 font-semibold">
-							{collection.releasedBy}
-						</p>
-
-						{collection.songs && (
-							<p className="text-sm text-gray-500">
-								{collection.songs.length} song
-								{collection.songs.length !== 1 ? "s" : ""}
-							</p>
-						)}
-
-						{/* Action buttons */}
-						<div className="flex items-center gap-3 mt-4">
-							{type === "album" && (
-								<button
-									onClick={toggleCollectionLike}
-									className={`flex items-center gap-2 px-5 py-3 rounded-full text-sm font-semibold transition-colors cursor-pointer ${
-										collection.isLikedByCurrentUser
-											? "bg-[#1db954] text-black"
-											: "bg-white/10 text-white hover:bg-white/20"
-									}`}
-								>
-									<svg
-										className="w-5 h-5"
-										fill={
-											collection.isLikedByCurrentUser ? "currentColor" : "none"
-										}
-										stroke="currentColor"
-										viewBox="0 0 24 24"
-									>
-										<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
-									</svg>
-									{collection.isLikedByCurrentUser ? "Liked" : "Like"}
-								</button>
-							)}
-						</div>
-					</div>
-				</div>
-
-				{/* Songs list */}
-				<div className="border-t border-white/10 pt-6">
-					<h2 className="text-2xl font-bold mb-4">Songs</h2>
-
-					{collection.songs && collection.songs.length > 0 ? (
-						<div className="space-y-1">
-							{collection.songs.map((song, index) => (
-								<SongItem
-									key={song.id}
-									song={song}
-									index={index + 1}
-									onLikeToggle={() => toggleLike(song.id)}
-								/>
-							))}
-						</div>
-					) : (
-						<div className="text-center py-12 text-gray-400">
-							<p className="text-lg">No songs available</p>
-						</div>
-					)}
-				</div>
-			</div>
-		</div>
-	);
+  const { type, id } = useParams();
+  const [collection, setCollection] = useState<CollectionView | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const normalizeCollection = (
+    data: Album | Playlist,
+    type: string,
+  ): CollectionView => {
+    if (type === "album") {
+      const album = data as Album;
+      return {
+        id: album.id,
+        title: album.title,
+        cover: album.cover,
+        genre: album.genre,
+        type: album.type,
+        releasedBy: album.releasedBy,
+        isLikedByCurrentUser: album.isLikedByCurrentUser,
+        songs: album.songs,
+      };
+    } else {
+      const playlist = data as Playlist;
+      return {
+        id: playlist.id,
+        title: playlist.name,
+        cover: playlist.cover,
+        genre: undefined,
+        type: "PLAYLIST",
+        releasedBy: playlist.creatorName,
+        isLikedByCurrentUser: undefined,
+        songs: playlist.songsInPlaylist,
+      };
+    }
+  };
+
+  const toggleLike = async (songId: number) => {
+    try {
+      await axiosInstance.post(`/musical-entity/${songId}/like`);
+      setCollection((prev) => {
+        if (!prev) return null;
+        return {
+          ...prev,
+          songs: prev.songs.map((s) =>
+            s.id === songId
+              ? { ...s, isLikedByCurrentUser: !s.isLikedByCurrentUser }
+              : s,
+          ),
+        };
+      });
+    } catch (err) {
+      console.error("Error toggling like:", err);
+    }
+  };
+
+  const toggleCollectionLike = async () => {
+    if (!collection) return;
+    try {
+      await axiosInstance.post(`/musical-entity/${collection.id}/like`);
+      setCollection((prev) => {
+        if (!prev) return null;
+        return { ...prev, isLikedByCurrentUser: !prev.isLikedByCurrentUser };
+      });
+    } catch (err) {
+      console.error("Error toggling collection like:", err);
+    }
+  };
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const endpoint =
+          type === "album" ? `/albums/${id}` : `/playlists/${id}`;
+        const response = await axiosInstance.get(endpoint);
+
+        const normalized = normalizeCollection(response.data, type!);
+        setCollection(normalized);
+      } catch (err: any) {
+        setError(getErrorMessage(err));
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchData();
+  }, [id, type]);
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen bg-linear-to-br from-[#1e1e2e] to-[#0f0f1e] flex items-center justify-center">
+        <div className="flex flex-col items-center gap-4">
+          <div className="w-12 h-12 border-4 border-white/10 border-t-[#1db954] rounded-full animate-spin" />
+          <p className="text-gray-400 text-lg">Loading collection…</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <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>
+    );
+  }
+
+  if (!collection) return null;
+
+  return (
+    <div className="min-h-screen bg-linear-to-br from-[#1e1e2e] to-[#0f0f1e] text-white">
+      <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">
+          {/* Cover art */}
+          <div className="w-full md:w-72 shrink-0">
+            <div className="relative w-full pt-[100%] rounded-xl overflow-hidden shadow-2xl bg-[#181818]">
+              <img
+                src={
+                  collection.cover
+                    ? `${baseURL}/${collection.cover}`
+                    : "/favicon.png"
+                }
+                alt={collection.title}
+                className="absolute inset-0 w-full h-full object-cover"
+                onError={(e) => {
+                  (e.target as HTMLImageElement).src = "/favicon.png";
+                }}
+              />
+            </div>
+          </div>
+
+          {/* Collection 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">
+              {collection.genre ? `${collection.genre} • ` : ""}
+              {collection.type === "PLAYLIST" ? "Playlist" : "Album"}
+            </span>
+            <h1 className="text-4xl md:text-5xl font-extrabold leading-tight truncate">
+              {collection.title}
+            </h1>
+
+            <p className="text-xl text-gray-300 font-semibold">
+              {collection.releasedBy}
+            </p>
+
+            {collection.songs && (
+              <p className="text-sm text-gray-500">
+                {collection.songs.length} song
+                {collection.songs.length !== 1 ? "s" : ""}
+              </p>
+            )}
+
+            {/* Action buttons */}
+            <div className="flex items-center gap-3 mt-4">
+              {type === "album" && (
+                <button
+                  onClick={toggleCollectionLike}
+                  className={`flex items-center gap-2 px-5 py-3 rounded-full text-sm font-semibold transition-colors cursor-pointer ${
+                    collection.isLikedByCurrentUser
+                      ? "bg-[#1db954] text-black"
+                      : "bg-white/10 text-white hover:bg-white/20"
+                  }`}
+                >
+                  <svg
+                    className="w-5 h-5"
+                    fill={
+                      collection.isLikedByCurrentUser ? "currentColor" : "none"
+                    }
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+                  </svg>
+                  {collection.isLikedByCurrentUser ? "Liked" : "Like"}
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Songs list */}
+        <div className="border-t border-white/10 pt-6">
+          <h2 className="text-2xl font-bold mb-4">Songs</h2>
+
+          {collection.songs && collection.songs.length > 0 ? (
+            <div className="space-y-1">
+              {collection.songs.map((song, index) => (
+                <SongItem
+                  key={song.id}
+                  song={song}
+                  index={index + 1}
+                  onLikeToggle={() => toggleLike(song.id)}
+                />
+              ))}
+            </div>
+          ) : (
+            <div className="text-center py-12 text-gray-400">
+              <p className="text-lg">No songs available</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
 };
 
Index: frontend/src/pages/UserDetail.tsx
===================================================================
--- frontend/src/pages/UserDetail.tsx	(revision f5bc95e4a628b62884f4631d8a118a9790052953)
+++ frontend/src/pages/UserDetail.tsx	(revision 85512ff50bc46445db00d8c3ecea57616baddb36)
@@ -7,27 +7,28 @@
 import UserListModal from "../components/userProfile/UserListModal";
 import { useAuth } from "../context/authContext";
-import { handleError } from "../utils/error";
+import { getErrorMessage } from "../utils/error";
 import type {
-	ArtistContribution,
-	BaseNonAdminUser,
-	MusicalEntity,
-	Playlist,
+  ArtistContribution,
+  BaseNonAdminUser,
+  MusicalEntity,
+  Playlist,
 } from "../utils/types";
+import { useCreatedPlaylists } from "../context/playlistContext";
 
 interface FollowStatus {
-	isFollowing: boolean;
-	followerCount: number;
-	followingCount: number;
+  isFollowing: boolean;
+  followerCount: number;
+  followingCount: number;
 }
 
 interface Artist extends BaseNonAdminUser {
-	userType: "ARTIST";
-	contributions: ArtistContribution[];
+  userType: "ARTIST";
+  contributions: ArtistContribution[];
 }
 interface Listener extends BaseNonAdminUser {
-	userType: "LISTENER";
-	likedEntities: MusicalEntity[];
-	createdPlaylists: Playlist[];
-	savedPlaylists: Playlist[];
+  userType: "LISTENER";
+  likedEntities: MusicalEntity[];
+  createdPlaylists: Playlist[];
+  savedPlaylists: Playlist[];
 }
 
@@ -35,301 +36,305 @@
 
 const UserDetail = () => {
-	const { username: usernameParam } = useParams();
-	const { user: currentUser } = useAuth();
-	const navigate = useNavigate();
-	const [user, setUser] = useState<UserProfile | null>(null);
-	const [error, setError] = useState<string | null>(null);
-	const [showModal, setShowModal] = useState(false);
-	const [modalTitle, setModalTitle] = useState("");
-	const [modalUsers, setModalUsers] = useState<any[]>([]);
-	const [isLoadingModal, setIsLoadingModal] = useState(false);
-	const [isFollowing, setIsFollowing] = useState(false);
-
-	const username = usernameParam || currentUser?.username;
-	const isOwnProfile = currentUser?.username === username;
-
-	if (!usernameParam && !currentUser) {
-		return (
-			<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>
-		);
-	}
-
-	const handleFollow = async () => {
-		if (!user) return;
-
-		setIsFollowing(true);
-		try {
-			const response = await axiosInstance.post<FollowStatus>(
-				`/users/na/${username}/follow`,
-			);
-			setUser((prev) => {
-				if (!prev) return null;
-				return {
-					...prev,
-					isFollowedByCurrentUser: response.data.isFollowing,
-					followers: response.data.followerCount,
-					following: response.data.followingCount,
-				};
-			});
-		} catch (err: any) {
-			setError(handleError(err));
-		} finally {
-			setIsFollowing(false);
-		}
-	};
-
-	const handleFollowInModal = async (targetUsername: string) => {
-		try {
-			const response = await axiosInstance.post<FollowStatus>(
-				`/users/na/${targetUsername}/follow`,
-			);
-
-			setModalUsers((prevUsers) =>
-				prevUsers.map((u) =>
-					u.username === targetUsername
-						? { ...u, isFollowedByCurrentUser: response.data.isFollowing }
-						: u,
-				),
-			);
-		} catch (err: any) {
-			setError(handleError(err));
-		}
-	};
-
-	const displayFollowers = async () => {
-		setIsLoadingModal(true);
-		try {
-			const response = await axiosInstance.get(
-				`/users/na/${username}/followers`,
-			);
-			setModalUsers(response.data);
-			setModalTitle("Followers");
-			setShowModal(true);
-		} catch (err) {
-			setError(handleError(err));
-		} finally {
-			setIsLoadingModal(false);
-		}
-	};
-	const displayFollowing = async () => {
-		setIsLoadingModal(true);
-		try {
-			const response = await axiosInstance.get(
-				`/users/na/${username}/following`,
-			);
-			setModalUsers(response.data);
-			setModalTitle("Following");
-			setShowModal(true);
-		} catch (err: any) {
-			setError(handleError(err));
-		} finally {
-			setIsLoadingModal(false);
-		}
-	};
-
-	useEffect(() => {
-		const fetchUser = async () => {
-			setError(null);
-			try {
-				const response = await axiosInstance.get(`/users/na/${username}`);
-				setUser(response.data);
-			} catch (err: any) {
-				setError(handleError(err));
-			}
-		};
-		fetchUser();
-	}, [username]);
-
-	if (error) {
-		return (
-			<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>
-		);
-	}
-
-	if (!user) {
-		return <LoadingSpinner />;
-	}
-
-	return (
-		<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/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>
-			)}
-
-			<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
-									src={`${baseURL}/${user.profilePhoto}`}
-									alt={user.fullName}
-									className="w-full h-full object-cover"
-								/>
-							) : (
-								<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>
-
-					{/* 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>
-						<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={`${user.userType === "LISTENER" ? "cursor-pointer hover:text-white" : ""} transition-colors`}
-								onClick={
-									user.userType === "LISTENER" ? displayFollowers : undefined
-								}
-							>
-								<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={`${user.userType === "LISTENER" ? "cursor-pointer hover:text-white" : ""} transition-colors`}
-								onClick={
-									user.userType === "LISTENER" ? displayFollowing : undefined
-								}
-							>
-								<span className="text-xl font-bold text-white">
-									{user.following}
-								</span>
-								<span className="text-sm text-gray-400 ml-1">Following</span>
-							</div>
-						</div>
-
-						{/* 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} />
-				) : (
-					<ListenerView
-						likedEntities={user.likedEntities}
-						createdPlaylists={user.createdPlaylists}
-						savedPlaylists={user.savedPlaylists}
-					/>
-				)}
-
-				{showModal && (
-					<UserListModal
-						title={modalTitle}
-						users={modalUsers}
-						onClose={() => setShowModal(false)}
-						onFollowToggle={handleFollowInModal}
-					/>
-				)}
-			</div>
-		</div>
-	);
+  const { username: usernameParam } = useParams();
+  const { user: currentUser } = useAuth();
+  const { createdPlaylists: currentUserCreatedPlaylists } =
+    useCreatedPlaylists();
+  const navigate = useNavigate();
+  const [user, setUser] = useState<UserProfile | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [showModal, setShowModal] = useState(false);
+  const [modalTitle, setModalTitle] = useState("");
+  const [modalUsers, setModalUsers] = useState<any[]>([]);
+  const [isLoadingModal, setIsLoadingModal] = useState(false);
+  const [isFollowing, setIsFollowing] = useState(false);
+
+  const username = usernameParam || currentUser?.username;
+  const isOwnProfile = currentUser?.username === username;
+
+  if (!usernameParam && !currentUser) {
+    return (
+      <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>
+    );
+  }
+
+  const handleFollow = async () => {
+    if (!user) return;
+
+    setIsFollowing(true);
+    try {
+      const response = await axiosInstance.post<FollowStatus>(
+        `/users/na/${username}/follow`,
+      );
+      setUser((prev) => {
+        if (!prev) return null;
+        return {
+          ...prev,
+          isFollowedByCurrentUser: response.data.isFollowing,
+          followers: response.data.followerCount,
+          following: response.data.followingCount,
+        };
+      });
+    } catch (err: any) {
+      setError(getErrorMessage(err));
+    } finally {
+      setIsFollowing(false);
+    }
+  };
+
+  const handleFollowInModal = async (targetUsername: string) => {
+    try {
+      const response = await axiosInstance.post<FollowStatus>(
+        `/users/na/${targetUsername}/follow`,
+      );
+
+      setModalUsers((prevUsers) =>
+        prevUsers.map((u) =>
+          u.username === targetUsername
+            ? { ...u, isFollowedByCurrentUser: response.data.isFollowing }
+            : u,
+        ),
+      );
+    } catch (err: any) {
+      setError(getErrorMessage(err));
+    }
+  };
+
+  const displayFollowers = async () => {
+    setIsLoadingModal(true);
+    try {
+      const response = await axiosInstance.get(
+        `/users/na/${username}/followers`,
+      );
+      setModalUsers(response.data);
+      setModalTitle("Followers");
+      setShowModal(true);
+    } catch (err) {
+      setError(getErrorMessage(err));
+    } finally {
+      setIsLoadingModal(false);
+    }
+  };
+  const displayFollowing = async () => {
+    setIsLoadingModal(true);
+    try {
+      const response = await axiosInstance.get(
+        `/users/na/${username}/following`,
+      );
+      setModalUsers(response.data);
+      setModalTitle("Following");
+      setShowModal(true);
+    } catch (err: any) {
+      setError(getErrorMessage(err));
+    } finally {
+      setIsLoadingModal(false);
+    }
+  };
+
+  useEffect(() => {
+    const fetchUser = async () => {
+      setError(null);
+      setUser(null);
+      try {
+        const response = await axiosInstance.get(`/users/na/${username}`);
+
+        setUser(response.data);
+      } catch (err: any) {
+        setError(getErrorMessage(err));
+      }
+    };
+    fetchUser();
+  }, [username]);
+
+  if (error) {
+    return (
+      <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>
+    );
+  }
+
+  if (!user) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <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/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>
+      )}
+
+      <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
+                  src={`${baseURL}/${user.profilePhoto}`}
+                  alt={user.fullName}
+                  className="w-full h-full object-cover"
+                />
+              ) : (
+                <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>
+
+          {/* 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>
+            <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={`${user.userType === "LISTENER" ? "cursor-pointer hover:text-white" : ""} transition-colors`}
+                onClick={
+                  user.userType === "LISTENER" ? displayFollowers : undefined
+                }
+              >
+                <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={`${user.userType === "LISTENER" ? "cursor-pointer hover:text-white" : ""} transition-colors`}
+                onClick={
+                  user.userType === "LISTENER" ? displayFollowing : undefined
+                }
+              >
+                <span className="text-xl font-bold text-white">
+                  {user.following}
+                </span>
+                <span className="text-sm text-gray-400 ml-1">Following</span>
+              </div>
+            </div>
+
+            {/* 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} />
+        ) : (
+          <ListenerView
+            likedEntities={user.likedEntities}
+            createdPlaylists={user.createdPlaylists}
+            savedPlaylists={user.savedPlaylists}
+          />
+        )}
+
+        {showModal && (
+          <UserListModal
+            title={modalTitle}
+            users={modalUsers}
+            onClose={() => setShowModal(false)}
+            onFollowToggle={handleFollowInModal}
+          />
+        )}
+      </div>
+    </div>
+  );
 };