Index: frontend/src/components/userProfile/ArtistView.tsx
===================================================================
--- frontend/src/components/userProfile/ArtistView.tsx	(revision 2b08bed6a1ac91c0de26078bed3ee44d43611bd4)
+++ frontend/src/components/userProfile/ArtistView.tsx	(revision 3de009b3a9676182b474a121be9e8d177d692101)
@@ -1,5 +1,7 @@
 import { useNavigate } from "react-router-dom";
-import { Music, Disc3 } from "lucide-react";
+import { useState } from "react";
+import { Music, Disc3, Play, Plus } from "lucide-react";
 import type { ArtistContribution } from "../../utils/types";
+import axiosInstance from "../../api/axiosInstance";
 
 interface ArtistViewProps {
@@ -9,42 +11,103 @@
 const ArtistView = ({ contributions }: ArtistViewProps) => {
   const navigate = useNavigate();
-
-  const albums = contributions.filter((c) => c.entityType === "ALBUM");
-  const songs = contributions.filter((c) => c.entityType === "SONG");
+  const [items, setItems] = useState(contributions);
+  const [toast, setToast] = useState<{ message: string; show: boolean }>({
+    message: "",
+    show: false,
+  });
+
+  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-500",
-      PERFORMER: "bg-blue-500",
-      PRODUCER: "bg-green-500",
-      MAIN_VOCAL: "bg-pink-500",
+      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-500";
+    return colors[role] || "bg-gray-100 text-gray-700";
+  };
+
+  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;
+
+      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">
+      {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>
+      )}
+
       {albums.length > 0 && (
         <div className="mb-12">
           <div className="flex items-center gap-3 mb-6">
-            <Disc3 className="w-8 h-8 text-purple-600" />
-            <h2 className="text-3xl font-bold">Albums</h2>
+            <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, index) => (
+            {albums.map((album) => (
               <div
-                key={index}
+                key={album.id}
                 className="group cursor-pointer"
-                onClick={() =>
-                  navigate(`/collection/album/${album.musicalEntityId}`)
-                }
+                onClick={() => navigate(`/collection/album/${album.id}`)}
               >
-                <div className="relative aspect-square bg-linear-to-br from-purple-400 via-pink-400 to-blue-400 rounded-lg mb-3 overflow-hidden shadow-lg group-hover:shadow-2xl transition-all duration-300 group-hover:scale-105">
+                <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-20 h-20 text-white opacity-40" />
-                  </div>
-                  <div className="absolute bottom-0 left-0 right-0 bg-linear-to-t from-black/60 to-transparent p-4">
+                    <Disc3 className="w-16 h-16 text-white opacity-30" />
+                  </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 text-white ${getRoleColor(album.role)}`}
+                      className={`text-xs px-2 py-1 rounded-full font-medium ${getRoleColor(album.role)}`}
                     >
                       {album.role.replace("_", " ")}
@@ -52,5 +115,5 @@
                   </div>
                 </div>
-                <h3 className="font-semibold text-base line-clamp-2 group-hover:text-blue-600 transition-colors">
+                <h3 className="font-semibold text-sm line-clamp-2 text-gray-900 group-hover:text-blue-600 transition-colors">
                   {album.title}
                 </h3>
@@ -64,32 +127,68 @@
         <div className="mb-12">
           <div className="flex items-center gap-3 mb-6">
-            <Music className="w-8 h-8 text-blue-600" />
-            <h2 className="text-3xl font-bold">Songs</h2>
+            <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, index) => (
+            {songs.map((song) => (
               <div
-                key={index}
-                className="group flex items-center gap-4 p-4 rounded-lg hover:bg-gray-50 transition-all cursor-pointer border border-transparent hover:border-gray-200"
-                onClick={() =>
-                  navigate(`/musical-entity/${song.musicalEntityId}`)
-                }
+                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="shrink-0 w-14 h-14 bg-linear-to-br from-blue-400 to-cyan-400 rounded flex items-center justify-center group-hover:scale-110 transition-transform shadow-md">
-                  <Music className="w-7 h-7 text-white" />
-                </div>
+                <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-lg group-hover:text-blue-600 transition-colors truncate">
+                  <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">
-                    {song.genre}
-                  </div>
-                </div>
+                    <span className="text-sm text-gray-600">{song.genre}</span>
+                  </div>
+                </div>
+
                 <span
-                  className={`px-4 py-2 rounded-full text-white text-sm font-medium ${getRoleColor(song.role)} shadow-md`}
+                  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>
             ))}
@@ -100,6 +199,6 @@
       {contributions.length === 0 && (
         <div className="flex flex-col items-center justify-center py-16 text-gray-400">
-          <Music className="w-24 h-24 mb-4 opacity-20" />
-          <p className="text-xl font-medium">No contributions yet</p>
+          <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>