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>
+  );
 };