Index: frontend/src/pages/UserDetail.tsx
===================================================================
--- frontend/src/pages/UserDetail.tsx	(revision 1579b4f9eaf503a14012d471db11e16e645306e3)
+++ 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>
+  );
 };