Index: frontend/src/pages/MusicalCollection.tsx
===================================================================
--- frontend/src/pages/MusicalCollection.tsx	(revision dc30259a457c1232ee6ee1f6096c9fa50172e058)
+++ frontend/src/pages/MusicalCollection.tsx	(revision 1579b4f9eaf503a14012d471db11e16e645306e3)
@@ -1,206 +1,247 @@
 import { useEffect, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import axiosInstance from "../api/axiosInstance";
-import LoadingSpinner from "../components/LoadingSpinner";
-import type { Song, Album, Playlist } from "../utils/types";
+import SongItem from "../components/SongItem";
 import { handleError } from "../utils/error";
+import type { Album, Playlist, Song } from "../utils/types";
 interface CollectionView {
-  id: number;
-  title: string;
-  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 navigate = useNavigate();
-  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,
-        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,
-        genre: undefined,
-        type: "PLAYLIST",
-        releasedBy: playlist.creatorName,
-        isLikedByCurrentUser: undefined,
-        songs: playlist.songsInPlaylist,
-      };
-    }
-  };
-
-  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 <LoadingSpinner />;
-  }
-
-  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>
-    );
-  }
-
-  if (!collection) return null;
-
-  return (
-    <div className="container mx-auto p-6">
-      <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-40 h-40 rounded-lg bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center text-white text-5xl font-bold shadow-lg">
-              {collection.title.charAt(0).toUpperCase()}
-            </div>
-          </div>
-
-          <div className="flex-1">
-            <span className="inline-block px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium mb-2">
-              {collection.type}
-            </span>
-            <h1 className="text-4xl font-bold mb-3">{collection.title}</h1>
-
-            <div className="flex items-center gap-3 text-gray-700 mb-4">
-              <span className="font-semibold">{collection.releasedBy}</span>
-              {collection.genre && (
-                <>
-                  <span>•</span>
-                  <span className="text-gray-600">{collection.genre}</span>
-                </>
-              )}
-              {collection.songs && (
-                <>
-                  <span>•</span>
-                  <span className="text-gray-600">
-                    {collection.songs.length} song
-                    {collection.songs.length !== 1 ? "s" : ""}
-                  </span>
-                </>
-              )}
-            </div>
-
-            {type === "album" && (
-              <button
-                className="flex items-center gap-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors duration-200"
-                aria-label={collection.isLikedByCurrentUser ? "Unlike" : "Like"}
-              >
-                <svg
-                  className="w-5 h-5"
-                  fill={collection.isLikedByCurrentUser ? "#ef4444" : "none"}
-                  stroke={
-                    collection.isLikedByCurrentUser ? "#ef4444" : "#6b7280"
-                  }
-                  strokeWidth="2"
-                  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>
-                <span className="text-sm font-medium text-gray-700">
-                  {collection.isLikedByCurrentUser ? "Liked" : "Like"}
-                </span>
-              </button>
-            )}
-          </div>
-        </div>
-
-        <div className="border-t pt-6">
-          <h2 className="text-2xl font-bold mb-4 text-gray-800">Songs</h2>
-
-          {collection.songs && collection.songs.length > 0 ? (
-            <div className="space-y-2">
-              {collection.songs.map((song, index) => (
-                <div
-                  key={song.id}
-                  className="flex items-center gap-4 p-3 rounded-lg hover:bg-gray-50 transition-colors duration-150"
-                >
-                  <span className="text-gray-500 font-medium w-8 text-center">
-                    {index + 1}
-                  </span>
-
-                  <div className="flex-1 min-w-0">
-                    <p className="font-semibold text-gray-900 truncate">
-                      {song.title}
-                    </p>
-                    <p className="text-sm text-gray-600 truncate">
-                      {song.releasedBy}
-                    </p>
-                  </div>
-
-                  <span className="text-sm text-gray-600 px-3 py-1 bg-gray-100 rounded-full">
-                    {song.genre}
-                  </span>
-
-                  <button
-                    className="p-2 hover:bg-gray-100 rounded-full transition-colors duration-200"
-                    aria-label={song.isLikedByCurrentUser ? "Unlike" : "Like"}
-                  >
-                    <svg
-                      className="w-5 h-5"
-                      fill={song.isLikedByCurrentUser ? "#ef4444" : "none"}
-                      stroke={song.isLikedByCurrentUser ? "#ef4444" : "#6b7280"}
-                      strokeWidth="2"
-                      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>
-                  </button>
-                </div>
-              ))}
-            </div>
-          ) : (
-            <p className="text-center text-gray-500 py-8">No songs available</p>
-          )}
-        </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(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 || "/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>
+	);
 };