Index: frontend/src/components/userProfile/ArtistView.tsx
===================================================================
--- frontend/src/components/userProfile/ArtistView.tsx	(revision cb4a1da079608fdb022036c90eb6e41f26046827)
+++ frontend/src/components/userProfile/ArtistView.tsx	(revision db5fb23a9c7d281ecb48c2ebf32e7ff4d9a24c38)
@@ -1,209 +1,149 @@
+import { Disc3, Music } from "lucide-react";
+import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { useState } from "react";
-import { Music, Disc3, Play, Plus } from "lucide-react";
+import { toast } from "react-toastify";
+import axiosInstance from "../../api/axiosInstance";
 import type { ArtistContribution } from "../../utils/types";
-import axiosInstance from "../../api/axiosInstance";
+import SongItem from "../SongItem";
 
 interface ArtistViewProps {
-  contributions: ArtistContribution[];
+	contributions: ArtistContribution[];
 }
 
 const ArtistView = ({ contributions }: ArtistViewProps) => {
-  const navigate = useNavigate();
-  const [items, setItems] = useState(contributions);
-  const [toast, setToast] = useState<{ message: string; show: boolean }>({
-    message: "",
-    show: false,
-  });
+	const navigate = useNavigate();
+	const [items, setItems] = useState(contributions);
 
-  const albums = items.filter((c) => c.entityType === "ALBUM");
-  const songs = items.filter((c) => c.entityType === "SONG");
+	const albums = items.filter((c) => c.entityType === "ALBUM");
+	const songs = items.filter((c) => c.entityType === "SONG");
 
-  const getRoleColor = (role: string) => {
-    const colors: { [key: string]: string } = {
-      COMPOSER: "bg-purple-100 text-purple-700",
-      PERFORMER: "bg-blue-100 text-blue-700",
-      PRODUCER: "bg-green-100 text-green-700",
-      MAIN_VOCAL: "bg-pink-100 text-pink-700",
-    };
-    return colors[role] || "bg-gray-100 text-gray-700";
-  };
+	const getRoleColor = (role: string) => {
+		const colors: { [key: string]: string } = {
+			COMPOSER: "bg-purple-500/20 text-purple-300",
+			PERFORMER: "bg-blue-500/20 text-blue-300",
+			PRODUCER: "bg-green-500/20 text-green-300",
+			MAIN_VOCAL: "bg-pink-500/20 text-pink-300",
+		};
+		return colors[role] || "bg-white/10 text-gray-300";
+	};
 
-  const showToast = (message: string) => {
-    setToast({ message, show: true });
-    setTimeout(() => {
-      setToast({ message: "", show: false });
-    }, 2000);
-  };
+	const handleLike = async (id: number, title: string) => {
+		try {
+			const response = await axiosInstance.post(`/musical-entity/${id}/like`);
+			const data = response.data;
 
-  const handleLike = async (id: number, title: string) => {
-    try {
-      const response = await axiosInstance.post(`/musical-entity/${id}/like`);
-      const data = response.data;
+			setItems((prevItems) =>
+				prevItems.map((item) =>
+					item.id === data.entityId
+						? { ...item, isLikedByCurrentUser: data.isLiked }
+						: item,
+				),
+			);
+			toast.success(
+				data.isLiked ? `Liked "${title}"` : `Removed "${title}" from likes`,
+			);
+		} catch (err: any) {
+			toast.error(err.response?.data?.error || "Failed to like the item");
+		}
+	};
 
-      setItems((prevItems) =>
-        prevItems.map((item) =>
-          item.id === data.entityId
-            ? { ...item, isLikedByCurrentUser: data.isLiked }
-            : item,
-        ),
-      );
+	return (
+		<div className="mt-8">
+			{albums.length > 0 && (
+				<div className="mb-12">
+					<div className="flex items-center gap-3 mb-6">
+						<Disc3 className="w-6 h-6 text-[#1db954]" />
+						<h2 className="text-2xl font-bold text-white">Albums</h2>
+					</div>
+					<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+						{albums.map((album) => (
+							<div
+								key={album.id}
+								className="group cursor-pointer"
+								onClick={() => navigate(`/collection/album/${album.id}`)}
+							>
+								<div className="relative aspect-square rounded-lg mb-3 overflow-hidden shadow-md group-hover:shadow-xl transition-all duration-300 bg-[#181818]">
+									<img
+										src={album.cover || "/favicon.png"}
+										alt={album.title}
+										className="w-full h-full object-cover"
+										onError={(e) => {
+											(e.target as HTMLImageElement).src = "/favicon.png";
+										}}
+									/>
 
-      showToast(
-        data.isLiked ? `Liked "${title}"` : `Removed ${title} from likes`,
-      );
-    } catch (err: any) {
-      showToast(err.response?.data?.error);
-    }
-  };
+									<button
+										className="absolute top-2 right-2 p-2 bg-black/70 hover:bg-black/90 rounded-full shadow-md transition-all duration-200 opacity-0 group-hover:opacity-100 cursor-pointer"
+										title={album.isLikedByCurrentUser ? "Unlike" : "Like"}
+										onClick={(e) => {
+											e.stopPropagation();
+											handleLike(album.id, album.title);
+										}}
+									>
+										<svg
+											className="w-5 h-5"
+											fill={album.isLikedByCurrentUser ? "#ef4444" : "none"}
+											stroke={
+												album.isLikedByCurrentUser ? "#ef4444" : "#9ca3af"
+											}
+											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>
 
-  return (
-    <div className="mt-8">
-      {toast.show && (
-        <div className="fixed bottom-8 left-1/2 -translate-x-1/2 z-50 animate-fade-in-up">
-          <div className="bg-gray-900 text-white px-6 py-3 rounded-full shadow-lg text-sm font-medium">
-            {toast.message}
-          </div>
-        </div>
-      )}
+									<div className="absolute bottom-0 left-0 right-0 bg-linear-to-t from-black/80 to-transparent p-3">
+										<span
+											className={`text-xs px-2 py-1 rounded-full font-medium ${getRoleColor(album.role)}`}
+										>
+											{album.role.replace("_", " ")}
+										</span>
+									</div>
+								</div>
+								<h3 className="font-semibold text-sm line-clamp-2 text-white group-hover:text-[#1db954] transition-colors">
+									{album.title}
+								</h3>
+							</div>
+						))}
+					</div>
+				</div>
+			)}
 
-      {albums.length > 0 && (
-        <div className="mb-12">
-          <div className="flex items-center gap-3 mb-6">
-            <Disc3 className="w-6 h-6 text-gray-700" />
-            <h2 className="text-2xl font-bold text-gray-800">Albums</h2>
-          </div>
-          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-            {albums.map((album) => (
-              <div
-                key={album.id}
-                className="group cursor-pointer"
-                onClick={() => navigate(`/collection/album/${album.id}`)}
-              >
-                <div className="relative aspect-square bg-gradient-to-br from-blue-400 to-purple-500 rounded-lg mb-3 overflow-hidden shadow-md group-hover:shadow-lg transition-all duration-300">
-                  <div className="absolute inset-0 flex items-center justify-center">
-                    <Disc3 className="w-16 h-16 text-white opacity-30" />
-                  </div>
+			{songs.length > 0 && (
+				<div className="mb-12">
+					<div className="flex items-center gap-3 mb-6">
+						<Music className="w-6 h-6 text-[#1db954]" />
+						<h2 className="text-2xl font-bold text-white">Songs</h2>
+					</div>
+					<div className="space-y-1">
+						{songs.map((song) => (
+							<SongItem
+								key={song.id}
+								song={{
+									id: song.id,
+									title: song.title,
+									cover: song.cover,
+									genre: song.genre,
+									link: song.link,
+									isLikedByCurrentUser: song.isLikedByCurrentUser,
+								}}
+								role={song.role}
+								onLikeToggle={() => handleLike(song.id, song.title)}
+							/>
+						))}
+					</div>
+				</div>
+			)}
 
-                  <button
-                    className="absolute top-2 right-2 p-2 bg-white/90 hover:bg-white rounded-full shadow-md transition-all duration-200 opacity-0 group-hover:opacity-100 cursor-pointer"
-                    title={album.isLikedByCurrentUser ? "Unlike" : "Like"}
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleLike(album.id, album.title);
-                    }}
-                  >
-                    <svg
-                      className="w-5 h-5"
-                      fill={album.isLikedByCurrentUser ? "#ef4444" : "none"}
-                      stroke={
-                        album.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 className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-3">
-                    <span
-                      className={`text-xs px-2 py-1 rounded-full font-medium ${getRoleColor(album.role)}`}
-                    >
-                      {album.role.replace("_", " ")}
-                    </span>
-                  </div>
-                </div>
-                <h3 className="font-semibold text-sm line-clamp-2 text-gray-900 group-hover:text-blue-600 transition-colors">
-                  {album.title}
-                </h3>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {songs.length > 0 && (
-        <div className="mb-12">
-          <div className="flex items-center gap-3 mb-6">
-            <Music className="w-6 h-6 text-gray-700" />
-            <h2 className="text-2xl font-bold text-gray-800">Songs</h2>
-          </div>
-          <div className="space-y-2">
-            {songs.map((song) => (
-              <div
-                key={song.id}
-                className="group relative flex items-center gap-4 p-3 rounded-lg hover:bg-gray-50 transition-all cursor-pointer"
-                onClick={() => navigate(`/musical-entity/${song.id}`)}
-              >
-                <div className="relative shrink-0">
-                  <div className="w-12 h-12 bg-gradient-to-br from-blue-400 to-purple-500 rounded flex items-center justify-center shadow-sm">
-                    <Music className="w-6 h-6 text-white" />
-                  </div>
-                  <button
-                    className="absolute inset-0 bg-black/60 rounded flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200"
-                    aria-label="Play song"
-                  >
-                    <Play className="w-6 h-6 text-white fill-white" />
-                  </button>
-                </div>
-
-                <div className="flex-1 min-w-0">
-                  <h3 className="font-semibold text-base text-gray-900 group-hover:text-blue-600 transition-colors truncate">
-                    {song.title}
-                  </h3>
-                  <div className="flex items-center gap-2 mt-1">
-                    <span className="text-sm text-gray-600">{song.genre}</span>
-                  </div>
-                </div>
-
-                <span
-                  className={`px-3 py-1 rounded-full text-sm font-medium ${getRoleColor(song.role)}`}
-                >
-                  {song.role.replace("_", " ")}
-                </span>
-
-                <div className="flex items-center gap-2">
-                  <button
-                    className="p-2 hover:bg-gray-200 rounded-full transition-colors duration-200 cursor-pointer"
-                    title="Add to playlist"
-                  >
-                    <Plus className="w-5 h-5 text-gray-600" />
-                  </button>
-
-                  <button
-                    className="p-2 hover:bg-gray-200 rounded-full transition-colors duration-200 cursor-pointer"
-                    title={song.isLikedByCurrentUser ? "Unlike" : "Like"}
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleLike(song.id, song.title);
-                    }}
-                  >
-                    <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>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {contributions.length === 0 && (
-        <div className="flex flex-col items-center justify-center py-16 text-gray-400">
-          <Music className="w-20 h-20 mb-4 opacity-20" />
-          <p className="text-lg font-medium">No contributions yet</p>
-          <p className="text-sm mt-2">Start creating music to see it here</p>
-        </div>
-      )}
-    </div>
-  );
+			{contributions.length === 0 && (
+				<div className="flex flex-col items-center justify-center py-16 text-gray-500">
+					<Music className="w-20 h-20 mb-4 opacity-20" />
+					<p className="text-lg font-medium">No contributions yet</p>
+					<p className="text-sm mt-2">Start creating music to see it here</p>
+				</div>
+			)}
+		</div>
+	);
 };
 
Index: frontend/src/components/userProfile/ListenerView.tsx
===================================================================
--- frontend/src/components/userProfile/ListenerView.tsx	(revision cb4a1da079608fdb022036c90eb6e41f26046827)
+++ frontend/src/components/userProfile/ListenerView.tsx	(revision db5fb23a9c7d281ecb48c2ebf32e7ff4d9a24c38)
@@ -1,333 +1,285 @@
+import { Album, Bookmark, Heart, ListMusic, Music } from "lucide-react";
+import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { Heart, ListMusic, Music, Album, Bookmark } from "lucide-react";
-import type { Playlist, MusicalEntity } from "../../utils/types";
+import { toast } from "react-toastify";
 import axiosInstance from "../../api/axiosInstance";
-import { useState } from "react";
+import type { MusicalEntity, Playlist } from "../../utils/types";
+import SongItem from "../SongItem";
 
 interface ListenerViewProps {
-  likedEntities: MusicalEntity[] | [];
-  createdPlaylists: Playlist[] | [];
-  savedPlaylists: Playlist[] | [];
+	likedEntities: MusicalEntity[] | [];
+	createdPlaylists: Playlist[] | [];
+	savedPlaylists: Playlist[] | [];
 }
 
 const ListenerView = ({
-  likedEntities,
-  createdPlaylists,
-  savedPlaylists,
+	likedEntities,
+	createdPlaylists,
+	savedPlaylists,
 }: ListenerViewProps) => {
-  const navigate = useNavigate();
-  const [items, setItems] = useState(likedEntities);
-  const [savedItems, setSavedItems] = useState(savedPlaylists);
-  const [toast, setToast] = useState<{ message: string; show: boolean }>({
-    message: "",
-    show: false,
-  });
-
-  const showToast = (message: string) => {
-    setToast({ message, show: true });
-    setTimeout(() => {
-      setToast({ message: "", show: false });
-    }, 2000);
-  };
-
-  const likedSongs = items.filter((e) => e.type === "SONG");
-  const likedAlbums = items.filter((e) => e.type === "ALBUM");
-
-  const handleSavePlaylist = async (
-    e: React.MouseEvent,
-    playlistId: number,
-    playlistName: string,
-  ) => {
-    e.stopPropagation();
-
-    try {
-      const response = await axiosInstance.post(`/playlist/${playlistId}/save`);
-      const data = response.data;
-
-      setSavedItems((prevItems) =>
-        data.isSaved
-          ? [...prevItems, prevItems.find((p) => p.id === playlistId)!]
-          : prevItems.filter((p) => p.id !== playlistId),
-      );
-
-      showToast(
-        data.isSaved
-          ? `Saved "${playlistName}"`
-          : `Removed "${playlistName}" from saved playlists`,
-      );
-    } catch (err: any) {
-      showToast(err.response?.data?.error || "Failed to save playlist");
-    }
-  };
-
-  const handleLike = async (id: number, title: string) => {
-    try {
-      const response = await axiosInstance.post(`/musical-entity/${id}/like`);
-      const data = response.data;
-
-      setItems((prevItems) =>
-        prevItems.map((item) =>
-          item.id === data.entityId
-            ? { ...item, isLikedByCurrentUser: data.isLiked }
-            : item,
-        ),
-      );
-
-      showToast(
-        data.isLiked ? `Liked "${title}"` : `Removed "${title}" from likes`,
-      );
-    } catch (err: any) {
-      showToast(err.response?.data?.error);
-    }
-  };
-
-  return (
-    <div className="mt-8 space-y-12">
-      {toast.show && (
-        <div className="fixed bottom-8 left-1/2 -translate-x-1/2 z-50 animate-fade-in-up">
-          <div className="bg-gray-900 text-white px-6 py-3 rounded-full shadow-lg text-sm font-medium">
-            {toast.message}
-          </div>
-        </div>
-      )}
-
-      {createdPlaylists && createdPlaylists.length > 0 && (
-        <section>
-          <div className="flex items-center gap-3 mb-6">
-            <ListMusic className="w-6 h-6 text-gray-700" />
-            <h3 className="text-2xl font-bold text-gray-800">
-              Created Playlists
-            </h3>
-            <span className="text-sm text-gray-500">
-              ({createdPlaylists.length})
-            </span>
-          </div>
-
-          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-            {createdPlaylists.map((playlist) => (
-              <div
-                key={playlist.id}
-                className="group cursor-pointer"
-                onClick={() => navigate(`/collection/playlist/${playlist.id}`)}
-              >
-                <div className="relative aspect-square rounded-lg overflow-hidden bg-gray-100 mb-3 shadow-md group-hover:shadow-lg transition-all">
-                  {playlist.cover ? (
-                    <img
-                      src={playlist.cover}
-                      alt={playlist.name}
-                      className="w-full h-full object-cover"
-                    />
-                  ) : (
-                    <div className="w-full h-full bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center">
-                      <ListMusic className="w-16 h-16 text-white opacity-30" />
-                    </div>
-                  )}
-
-                  <button
-                    onClick={(e) =>
-                      handleSavePlaylist(e, playlist.id, playlist.name)
-                    }
-                    className="absolute top-2 right-2 p-2 bg-white/90 hover:bg-white rounded-full shadow-md transition-all duration-200 opacity-0 group-hover:opacity-100"
-                    title={playlist.isSavedByCurrentUser ? "Unsave" : "Save"}
-                  >
-                    <Bookmark
-                      className={`w-5 h-5 ${
-                        playlist.isSavedByCurrentUser
-                          ? "fill-blue-600 text-blue-600"
-                          : "text-gray-600"
-                      }`}
-                    />
-                  </button>
-                </div>
-                <p className="text-sm font-semibold text-gray-900 truncate group-hover:text-blue-600 transition-colors">
-                  {playlist.name}
-                </p>
-                <p className="text-xs text-gray-500 truncate">
-                  {playlist.creatorName}
-                </p>
-              </div>
-            ))}
-          </div>
-        </section>
-      )}
-
-      {savedItems && savedItems.length > 0 && (
-        <section>
-          <div className="flex items-center gap-3 mb-6">
-            <Bookmark className="w-6 h-6 text-blue-600 fill-blue-600" />
-            <h3 className="text-2xl font-bold text-gray-800">
-              Saved Playlists
-            </h3>
-            <span className="text-sm text-gray-500">({savedItems.length})</span>
-          </div>
-
-          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-            {savedItems.map((playlist) => (
-              <div
-                key={playlist.id}
-                className="group cursor-pointer"
-                onClick={() => navigate(`/collection/playlist/${playlist.id}`)}
-              >
-                <div className="relative aspect-square rounded-lg overflow-hidden bg-gray-100 mb-3 shadow-md group-hover:shadow-lg transition-all">
-                  {playlist.cover ? (
-                    <img
-                      src={playlist.cover}
-                      alt={playlist.name}
-                      className="w-full h-full object-cover"
-                    />
-                  ) : (
-                    <div className="w-full h-full bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center">
-                      <ListMusic className="w-16 h-16 text-white opacity-30" />
-                    </div>
-                  )}
-
-                  <button
-                    onClick={(e) =>
-                      handleSavePlaylist(e, playlist.id, playlist.name)
-                    }
-                    className="absolute top-2 right-2 p-2 bg-white/90 hover:bg-white rounded-full shadow-md transition-all duration-200 opacity-0 group-hover:opacity-100"
-                    title="Unsave"
-                  >
-                    <Bookmark className="w-5 h-5 fill-blue-600 text-blue-600" />
-                  </button>
-                </div>
-                <p className="text-sm font-semibold text-gray-900 truncate group-hover:text-blue-600 transition-colors">
-                  {playlist.name}
-                </p>
-                <p className="text-xs text-gray-500 truncate">
-                  {playlist.creatorName}
-                </p>
-              </div>
-            ))}
-          </div>
-        </section>
-      )}
-
-      {likedSongs && likedSongs.length > 0 && (
-        <section>
-          <div className="flex items-center gap-3 mb-6">
-            <Heart className="w-6 h-6 text-red-500 fill-red-500" />
-            <h3 className="text-2xl font-bold text-gray-800">Liked Songs</h3>
-            <span className="text-sm text-gray-500">
-              ({likedSongs?.length})
-            </span>
-          </div>
-
-          <div className="space-y-2">
-            {likedSongs.map((song, index) => (
-              <div
-                key={song.id}
-                className="flex items-center gap-4 p-3 rounded-lg hover:bg-gray-50 cursor-pointer group transition-colors"
-                onClick={() => navigate(`/musical-entity/${song.id}`)}
-              >
-                <span className="text-gray-500 font-medium w-8 text-center">
-                  {index + 1}
-                </span>
-                <div className="w-12 h-12 rounded bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center flex-shrink-0 shadow-sm">
-                  <Music className="w-6 h-6 text-white" />
-                </div>
-                <div className="flex-1 min-w-0">
-                  <p className="font-semibold text-gray-900 truncate group-hover:text-blue-600 transition-colors">
-                    {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
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleLike(song.id, song.title);
-                  }}
-                  className="p-2 hover:bg-gray-200 rounded-full transition-colors duration-200 cursor-pointer"
-                  title={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>
-        </section>
-      )}
-
-      {likedAlbums && likedAlbums.length > 0 && (
-        <section>
-          <div className="flex items-center gap-3 mb-6">
-            <Album className="w-6 h-6 text-gray-700" />
-            <h3 className="text-2xl font-bold text-gray-800">Liked Albums</h3>
-            <span className="text-sm text-gray-500">
-              ({likedAlbums.length})
-            </span>
-          </div>
-
-          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-            {likedAlbums.map((album) => (
-              <div
-                key={album.id}
-                className="group cursor-pointer"
-                onClick={() => navigate(`/collection/album/${album.id}`)}
-              >
-                <div className="relative aspect-square rounded-lg overflow-hidden bg-gradient-to-br from-blue-400 to-purple-500 mb-3 flex items-center justify-center shadow-md group-hover:shadow-lg transition-all">
-                  <Album className="w-16 h-16 text-white opacity-30" />
-
-                  <button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleLike(album.id, album.title);
-                    }}
-                    className="absolute top-2 right-2 p-2 bg-white/90 hover:bg-white rounded-full shadow-md transition-all duration-200 opacity-0 group-hover:opacity-100 cursor-pointer"
-                    title={album.isLikedByCurrentUser ? "Unlike" : "Like"}
-                  >
-                    <svg
-                      className="w-5 h-5"
-                      fill={album.isLikedByCurrentUser ? "#ef4444" : "none"}
-                      stroke={
-                        album.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>
-                <p className="font-semibold text-sm text-gray-900 truncate group-hover:text-blue-600 transition-colors">
-                  {album.title}
-                </p>
-                <p className="text-xs text-gray-600 truncate mt-1">
-                  {album.releasedBy}
-                </p>
-              </div>
-            ))}
-          </div>
-        </section>
-      )}
-
-      {likedEntities &&
-        likedEntities.length === 0 &&
-        (!createdPlaylists || createdPlaylists.length === 0) &&
-        (!savedItems || savedItems.length === 0) && (
-          <div className="flex flex-col items-center justify-center py-16 text-gray-400">
-            <Music className="w-20 h-20 mb-4 opacity-20" />
-            <p className="text-lg font-medium">Nothing here yet</p>
-            <p className="text-sm mt-2">
-              Start exploring music to build your collection
-            </p>
-          </div>
-        )}
-    </div>
-  );
+	const navigate = useNavigate();
+	const [items, setItems] = useState(likedEntities);
+	const [savedItems, setSavedItems] = useState(savedPlaylists);
+
+	const likedSongs = items.filter((e) => e.type === "SONG");
+	const likedAlbums = items.filter((e) => e.type === "ALBUM");
+
+	const handleSavePlaylist = async (
+		e: React.MouseEvent,
+		playlistId: number,
+		playlistName: string,
+	) => {
+		e.stopPropagation();
+
+		try {
+			const response = await axiosInstance.post(`/playlist/${playlistId}/save`);
+			const data = response.data;
+
+			setSavedItems((prevItems) =>
+				data.isSaved
+					? [...prevItems, prevItems.find((p) => p.id === playlistId)!]
+					: prevItems.filter((p) => p.id !== playlistId),
+			);
+
+			toast.success(
+				data.isSaved
+					? `Saved "${playlistName}" to your library`
+					: `Removed "${playlistName}" from your library`,
+			);
+		} catch (err: any) {
+			toast.error(err.response?.data?.error || "Failed to save the playlist");
+		}
+	};
+
+	const handleLike = async (id: number, title: string) => {
+		try {
+			const response = await axiosInstance.post(`/musical-entity/${id}/like`);
+			const data = response.data;
+
+			setItems((prevItems) =>
+				prevItems.map((item) =>
+					item.id === data.entityId
+						? { ...item, isLikedByCurrentUser: data.isLiked }
+						: item,
+				),
+			);
+
+			toast.success(
+				data.isLiked ? `Liked "${title}"` : `Removed "${title}" from likes`,
+			);
+		} catch (err: any) {
+			toast.error(err.response?.data?.error || "Failed to like the item");
+		}
+	};
+
+	return (
+		<div className="mt-8 space-y-12">
+			{createdPlaylists && createdPlaylists.length > 0 && (
+				<section>
+					<div className="flex items-center gap-3 mb-6">
+						<ListMusic className="w-6 h-6 text-[#1db954]" />
+						<h3 className="text-2xl font-bold text-white">Created Playlists</h3>
+						<span className="text-sm text-gray-500">
+							({createdPlaylists.length})
+						</span>
+					</div>
+
+					<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+						{createdPlaylists.map((playlist) => (
+							<div
+								key={playlist.id}
+								className="group cursor-pointer"
+								onClick={() => navigate(`/collection/playlist/${playlist.id}`)}
+							>
+								<div className="relative aspect-square rounded-lg overflow-hidden bg-[#181818] mb-3 shadow-md group-hover:shadow-xl transition-all">
+									<img
+										src={playlist.cover || "/favicon.png"}
+										alt={playlist.name}
+										className="w-full h-full object-cover"
+										onError={(e) => {
+											(e.target as HTMLImageElement).src = "/favicon.png";
+										}}
+									/>
+
+									<button
+										onClick={(e) =>
+											handleSavePlaylist(e, playlist.id, playlist.name)
+										}
+										className="absolute top-2 right-2 p-2 bg-black/70 hover:bg-black/90 rounded-full shadow-md transition-all duration-200 opacity-0 group-hover:opacity-100"
+										title={playlist.isSavedByCurrentUser ? "Unsave" : "Save"}
+									>
+										<Bookmark
+											className={`w-5 h-5 ${
+												playlist.isSavedByCurrentUser
+													? "fill-[#1db954] text-[#1db954]"
+													: "text-gray-400"
+											}`}
+										/>
+									</button>
+								</div>
+								<p className="text-sm font-semibold text-white truncate group-hover:text-[#1db954] transition-colors">
+									{playlist.name}
+								</p>
+								<p className="text-xs text-gray-400 truncate">
+									{playlist.creatorName}
+								</p>
+							</div>
+						))}
+					</div>
+				</section>
+			)}
+
+			{savedItems && savedItems.length > 0 && (
+				<section>
+					<div className="flex items-center gap-3 mb-6">
+						<Bookmark className="w-6 h-6 text-[#1db954] fill-[#1db954]" />
+						<h3 className="text-2xl font-bold text-white">Saved Playlists</h3>
+						<span className="text-sm text-gray-500">({savedItems.length})</span>
+					</div>
+
+					<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+						{savedItems.map((playlist) => (
+							<div
+								key={playlist.id}
+								className="group cursor-pointer"
+								onClick={() => navigate(`/collection/playlist/${playlist.id}`)}
+							>
+								<div className="relative aspect-square rounded-lg overflow-hidden bg-[#181818] mb-3 shadow-md group-hover:shadow-xl transition-all">
+									<img
+										src={playlist.cover || "/favicon.png"}
+										alt={playlist.name}
+										className="w-full h-full object-cover"
+										onError={(e) => {
+											(e.target as HTMLImageElement).src = "/favicon.png";
+										}}
+									/>
+
+									<button
+										onClick={(e) =>
+											handleSavePlaylist(e, playlist.id, playlist.name)
+										}
+										className="absolute top-2 right-2 p-2 bg-black/70 hover:bg-black/90 rounded-full shadow-md transition-all duration-200 opacity-0 group-hover:opacity-100"
+										title="Unsave"
+									>
+										<Bookmark className="w-5 h-5 fill-[#1db954] text-[#1db954]" />
+									</button>
+								</div>
+								<p className="text-sm font-semibold text-white truncate group-hover:text-[#1db954] transition-colors">
+									{playlist.name}
+								</p>
+								<p className="text-xs text-gray-400 truncate">
+									{playlist.creatorName}
+								</p>
+							</div>
+						))}
+					</div>
+				</section>
+			)}
+
+			{likedSongs && likedSongs.length > 0 && (
+				<section>
+					<div className="flex items-center gap-3 mb-6">
+						<Heart className="w-6 h-6 text-red-500 fill-red-500" />
+						<h3 className="text-2xl font-bold text-white">Liked Songs</h3>
+						<span className="text-sm text-gray-500">
+							({likedSongs?.length})
+						</span>
+					</div>
+
+					<div className="space-y-1">
+						{likedSongs.map((song, index) => (
+							<SongItem
+								key={song.id}
+								song={{
+									id: song.id,
+									title: song.title,
+									cover: song.cover,
+									genre: song.genre,
+									link: (song as any).link,
+									releasedBy: song.releasedBy,
+									isLikedByCurrentUser: song.isLikedByCurrentUser,
+								}}
+								index={index + 1}
+								onLikeToggle={() => handleLike(song.id, song.title)}
+							/>
+						))}
+					</div>
+				</section>
+			)}
+
+			{likedAlbums && likedAlbums.length > 0 && (
+				<section>
+					<div className="flex items-center gap-3 mb-6">
+						<Album className="w-6 h-6 text-[#1db954]" />
+						<h3 className="text-2xl font-bold text-white">Liked Albums</h3>
+						<span className="text-sm text-gray-500">
+							({likedAlbums.length})
+						</span>
+					</div>
+
+					<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+						{likedAlbums.map((album) => (
+							<div
+								key={album.id}
+								className="group cursor-pointer"
+								onClick={() => navigate(`/collection/album/${album.id}`)}
+							>
+								<div className="relative aspect-square rounded-lg overflow-hidden bg-[#181818] mb-3 shadow-md group-hover:shadow-xl transition-all">
+									<img
+										src={album.cover || "/favicon.png"}
+										alt={album.title}
+										className="w-full h-full object-cover"
+										onError={(e) => {
+											(e.target as HTMLImageElement).src = "/favicon.png";
+										}}
+									/>
+
+									<button
+										onClick={(e) => {
+											e.stopPropagation();
+											handleLike(album.id, album.title);
+										}}
+										className="absolute top-2 right-2 p-2 bg-black/70 hover:bg-black/90 rounded-full shadow-md transition-all duration-200 opacity-0 group-hover:opacity-100 cursor-pointer"
+										title={album.isLikedByCurrentUser ? "Unlike" : "Like"}
+									>
+										<svg
+											className="w-5 h-5"
+											fill={album.isLikedByCurrentUser ? "#ef4444" : "none"}
+											stroke={
+												album.isLikedByCurrentUser ? "#ef4444" : "#9ca3af"
+											}
+											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>
+								<p className="font-semibold text-sm text-white truncate group-hover:text-[#1db954] transition-colors">
+									{album.title}
+								</p>
+								<p className="text-xs text-gray-400 truncate mt-1">
+									{album.releasedBy}
+								</p>
+							</div>
+						))}
+					</div>
+				</section>
+			)}
+
+			{likedEntities &&
+				likedEntities.length === 0 &&
+				(!createdPlaylists || createdPlaylists.length === 0) &&
+				(!savedItems || savedItems.length === 0) && (
+					<div className="flex flex-col items-center justify-center py-16 text-gray-500">
+						<Music className="w-20 h-20 mb-4 opacity-20" />
+						<p className="text-lg font-medium">Nothing here yet</p>
+						<p className="text-sm mt-2">
+							Start exploring music to build your collection
+						</p>
+					</div>
+				)}
+		</div>
+	);
 };
 
Index: frontend/src/components/userProfile/UserListModal.tsx
===================================================================
--- frontend/src/components/userProfile/UserListModal.tsx	(revision cb4a1da079608fdb022036c90eb6e41f26046827)
+++ frontend/src/components/userProfile/UserListModal.tsx	(revision db5fb23a9c7d281ecb48c2ebf32e7ff4d9a24c38)
@@ -1,3 +1,4 @@
 import { useNavigate } from "react-router-dom";
+import { baseURL } from "../../api/axiosInstance";
 import type { BaseNonAdminUser } from "../../utils/types";
 
@@ -16,14 +17,13 @@
 }: ModalProps) => {
 	const navigate = useNavigate();
-	const baseURL = import.meta.env.VITE_API_BASE_URL;
 
 	return (
-		<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
-			<div className="bg-white rounded-xl shadow-2xl w-full max-w-md max-h-[70vh] flex flex-col">
-				<div className="p-4 border-b flex justify-between items-center">
-					<h2 className="text-xl font-bold">{title}</h2>
+		<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
+			<div className="bg-[#1a1a2e] border border-white/10 rounded-xl shadow-2xl w-full max-w-md max-h-[70vh] flex flex-col">
+				<div className="p-4 border-b border-white/10 flex justify-between items-center">
+					<h2 className="text-xl font-bold text-white">{title}</h2>
 					<button
 						onClick={onClose}
-						className="text-gray-500 hover:text-black text-2xl cursor-pointer"
+						className="text-gray-400 hover:text-white text-2xl cursor-pointer transition-colors"
 					>
 						&times;
@@ -38,5 +38,5 @@
 							<div
 								key={u.username}
-								className="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition-colors"
+								className="flex items-center justify-between p-3 hover:bg-white/5 rounded-lg transition-colors"
 							>
 								<div
@@ -47,5 +47,5 @@
 									}}
 								>
-									<div className="w-10 h-10 rounded-full bg-blue-100 overflow-hidden shrink-0 flex items-center justify-center">
+									<div className="w-10 h-10 rounded-full bg-[#282828] overflow-hidden shrink-0 flex items-center justify-center">
 										{u.profilePhoto ? (
 											<img
@@ -55,21 +55,24 @@
 											/>
 										) : (
-											<span className="text-blue-600 font-bold">
+											<span className="text-[#1db954] font-bold">
 												{u.fullName.charAt(0)}
 											</span>
 										)}
 									</div>
-									<p className="font-semibold text-gray-900">{u.fullName}</p>
+									<div>
+										<p className="font-semibold text-white">{u.fullName}</p>
+										<p className="text-sm text-gray-400">@{u.username}</p>
+									</div>
 								</div>
 
 								<button
 									onClick={() => onFollowToggle(u.username)}
-									className={`px-4 py-1 text-sm font-medium rounded-md transition-colors cursor-pointer ${
+									className={`px-4 py-1.5 text-sm font-medium rounded-full transition-colors cursor-pointer ${
 										u.isFollowedByCurrentUser
-											? "bg-gray-200 text-gray-700 hover:bg-gray-300"
-											: "bg-blue-500 text-white hover:bg-blue-600"
+											? "bg-white/10 text-white hover:bg-white/20"
+											: "bg-[#1db954] text-black hover:bg-[#1ed760]"
 									}`}
 								>
-									{u.isFollowedByCurrentUser ? "Unfollow" : "Follow"}
+									{u.isFollowedByCurrentUser ? "Following" : "Follow"}
 								</button>
 							</div>