Index: frontend/src/components/userProfile/ArtistView.tsx
===================================================================
--- frontend/src/components/userProfile/ArtistView.tsx	(revision fd81a1852ddb6ef6fb10e109702ca71525257923)
+++ frontend/src/components/userProfile/ArtistView.tsx	(revision fd81a1852ddb6ef6fb10e109702ca71525257923)
@@ -0,0 +1,55 @@
+import { useNavigate } from "react-router-dom";
+
+interface ArtistContributionDTO {
+  musicalEntityId: number;
+  title: string;
+  role: string;
+  entityType: string;
+}
+
+interface ArtistViewProps {
+  contributions: ArtistContributionDTO[];
+}
+
+const ArtistView = ({ contributions }: ArtistViewProps) => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="mt-8 border-t pt-6">
+      <h2 className="text-2xl font-bold mb-4">Contributions</h2>
+      <div className="grid gap-3">
+        {contributions.map((contribution, index) => (
+          <div
+            key={index}
+            className="p-4 border rounded hover:shadow-md transition-shadow cursor-pointer"
+            onClick={() =>
+              navigate(`/musical-entity/${contribution.musicalEntityId}`)
+            }
+          >
+            <div className="flex justify-between items-center">
+              <div className="flex-1">
+                <p className="font-semibold text-lg">{contribution.title}</p>
+                <p className="text-sm text-gray-500 mt-1">
+                  ID: {contribution.musicalEntityId}
+                </p>
+              </div>
+              <div className="flex gap-2">
+                <span className="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-medium">
+                  {contribution.role}
+                </span>
+                <span className="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm font-medium">
+                  {contribution.entityType}
+                </span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+      {contributions.length === 0 && (
+        <p className="text-gray-500 text-center py-4">No contributions yet</p>
+      )}
+    </div>
+  );
+};
+
+export default ArtistView;
Index: frontend/src/components/userProfile/ListenerView.tsx
===================================================================
--- frontend/src/components/userProfile/ListenerView.tsx	(revision fd81a1852ddb6ef6fb10e109702ca71525257923)
+++ frontend/src/components/userProfile/ListenerView.tsx	(revision fd81a1852ddb6ef6fb10e109702ca71525257923)
@@ -0,0 +1,147 @@
+import { useNavigate } from "react-router-dom";
+
+interface MusicalEntityDTO {
+  id: number;
+  title: string;
+  genre: string;
+  type: string;
+}
+
+interface Playlist {
+  id: number;
+  name: string;
+  cover: string;
+  creatorName: string;
+}
+
+interface ListenerViewProps {
+  likedEntities: MusicalEntityDTO[];
+  playlists?: Playlist[];
+}
+
+const ListenerView = ({ likedEntities, playlists }: ListenerViewProps) => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="mt-8 border-t pt-6 space-y-10">
+      {/* --- PLAYLISTS SECTION --- */}
+      <section>
+        <h3 className="text-2xl font-bold mb-6 flex items-center gap-2">
+          <span>My Playlists</span>
+          <span className="text-sm font-normal text-gray-400">
+            ({playlists?.length})
+          </span>
+        </h3>
+
+        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
+          {playlists?.map((playlist) => (
+            <div
+              key={playlist.id}
+              className="group cursor-pointer"
+              onClick={() => navigate(`/playlist/${playlist.id}`)}
+            >
+              {/* Playlist Cover Container */}
+              <div className="aspect-square relative overflow-hidden rounded-xl shadow-md bg-gray-200 mb-3">
+                {playlist.cover ? (
+                  <img
+                    src={playlist.cover}
+                    alt={playlist.name}
+                    className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
+                  />
+                ) : (
+                  <div className="w-full h-full flex items-center justify-center bg-linear-to-br from-gray-300 to-gray-400 text-white">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      className="h-12 w-12"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"
+                      />
+                    </svg>
+                  </div>
+                )}
+                {/* Hover Overlay */}
+                <div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                  <div className="bg-blue-500 p-3 rounded-full text-white shadow-xl transform translate-y-4 group-hover:translate-y-0 transition-transform">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      className="h-6 w-6"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
+                      />
+                    </svg>
+                  </div>
+                </div>
+              </div>
+
+              <h4 className="font-bold text-gray-900 truncate group-hover:text-blue-600 transition-colors">
+                {playlist.name}
+              </h4>
+              <p className="text-xs text-gray-500 uppercase tracking-wider">
+                Playlist
+              </p>
+            </div>
+          ))}
+
+          {playlists?.length === 0 && (
+            <div className="col-span-full py-8 border-2 border-dashed border-gray-200 rounded-xl text-center">
+              <p className="text-gray-400">No playlists created yet</p>
+            </div>
+          )}
+        </div>
+      </section>
+
+      {/* --- LIKED MUSIC SECTION --- */}
+      <section>
+        <h3 className="text-2xl font-bold mb-4">Liked Music</h3>
+        <div className="grid gap-2">
+          {likedEntities.map((entity) => (
+            <div
+              key={entity.id}
+              className="p-4 bg-gray-50 rounded-lg border border-transparent hover:border-gray-200 hover:bg-white transition-all cursor-pointer group shadow-xs"
+              onClick={() => navigate(`/musical-entity/${entity.id}`)}
+            >
+              <div className="flex justify-between items-center">
+                <div className="flex-1">
+                  <span className="font-semibold text-gray-800 group-hover:text-blue-600">
+                    {entity.title}
+                  </span>
+                  <p className="text-sm text-gray-500 mt-1">{entity.genre}</p>
+                </div>
+                <span
+                  className={`px-3 py-1 rounded-full text-xs font-bold tracking-wider ${
+                    entity.type === "SONG"
+                      ? "bg-green-100 text-green-700"
+                      : "bg-blue-100 text-blue-700"
+                  }`}
+                >
+                  {entity.type}
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+        {likedEntities.length === 0 && (
+          <p className="text-gray-500 text-center py-4 italic">
+            No liked music yet
+          </p>
+        )}
+      </section>
+    </div>
+  );
+};
+
+export default ListenerView;
Index: frontend/src/components/userProfile/UserDetail.tsx
===================================================================
--- frontend/src/components/userProfile/UserDetail.tsx	(revision 0d9725cfa22ae513a665db5f34f5a086b3660f82)
+++ frontend/src/components/userProfile/UserDetail.tsx	(revision fd81a1852ddb6ef6fb10e109702ca71525257923)
@@ -1,4 +1,27 @@
 import { useEffect, useState } from "react";
 import { useParams, useNavigate } from "react-router-dom";
+import ArtistView from "./ArtistView";
+import ListenerView from "./ListenerView";
+
+interface MusicalEntityDTO {
+  id: number;
+  title: string;
+  genre: string;
+  type: string;
+}
+
+interface ArtistContributionDTO {
+  musicalEntityId: number;
+  title: string;
+  role: string;
+  entityType: string;
+}
+
+interface Playlist {
+  id: number;
+  name: string;
+  cover: string;
+  creatorName: string;
+}
 
 interface User {
@@ -6,20 +29,17 @@
   username: string;
   fullName: string;
-  followerCount: number;
-  followingCount: number;
   userType: string;
-  contributions?: {
-    role: string;
-    title: string;
-    musicalEntityId: number;
-    entityType: string;
-  }[];
+  followers: number;
+  following: number;
 
-  likedEntities?: {
-    entityId: number;
-    entityTitle: string;
-    entityGenre: string;
-    entityType: string;
-  }[];
+  musicalEntities?: {
+    contributions: ArtistContributionDTO[];
+  };
+
+  likes?: {
+    likedEntities: MusicalEntityDTO[];
+  };
+
+  createdPlaylists?: Playlist[];
 }
 
@@ -34,4 +54,5 @@
       const response = await fetch(`http://localhost:8080/users/${userId}`);
       const data = await response.json();
+      console.log("Fetched user data:", data);
       setUser(data);
     };
@@ -43,65 +64,55 @@
   return (
     <div className="container mx-auto p-6">
-      {/* <button
-        onClick={() => navigate("/allUsers")}
+      <button
+        onClick={() => navigate(-1)}
         className="mb-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
       >
-        ← Back to All Users
-      </button> */}
+        ← Back
+      </button>
+
       <div className="bg-white shadow-lg rounded-lg p-8">
-        <h1 className="text-4xl font-bold mb-4">{user.fullName}</h1>
-        <p className="text-gray-600 text-lg mb-2">Username: @{user.username}</p>
-        <p className="text-gray-600 text-lg mb-2">
-          Followers: {user.followerCount}
-        </p>
-        <p className="text-gray-600 text-lg mb-2">
-          Following: {user.followingCount}
-        </p>
-        <p>Type: {user.userType}</p>
-        {user.userType === "Artist" && user.contributions && (
-          <div className="mt-8 border-t pt-6">
-            <h2 className="text-2xl font-bold mb-4">Discography</h2>
-            <div className="grid gap-3">
-              {user.contributions.map((item, index) => (
-                <div
-                  key={index}
-                  className="p-4 border rounded flex justify-between items-center"
-                >
-                  <div>
-                    <p className="font-semibold">{item.title}</p>
-                    <p className="text-sm text-gray-500">{item.entityType}</p>
-                  </div>
-                  <span className="bg-gray-100 px-3 py-1 rounded-full text-sm font-medium">
-                    {item.role}
-                  </span>
-                  <span className="bg-gray-100 px-3 py-1 rounded-full text-sm font-medium">
-                    {item.musicalEntityId}
-                  </span>
-                </div>
-              ))}
+        {/* Profile Header */}
+        <div className="flex items-start gap-6 mb-8">
+          {/* Profile Photo */}
+          <div className="shrink-0">
+            <div className="w-32 h-32 rounded-full bg-linear-to-br from-blue-400 to-purple-500 flex items-center justify-center text-white text-4xl font-bold shadow-lg">
+              {user.fullName.charAt(0).toUpperCase()}
             </div>
           </div>
+
+          {/* User Info */}
+          <div className="flex-1">
+            <h1 className="text-4xl font-bold mb-2">{user.fullName}</h1>
+            <span className="inline-block px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium mb-4">
+              {user.userType}
+            </span>
+
+            {/* Followers/Following Stats */}
+            <div className="flex gap-6 mb-4 text-gray-700">
+              <div className="flex flex-col">
+                <span className="text-2xl font-bold">{user.followers}</span>
+                <span className="text-sm text-gray-500">Followers</span>
+              </div>
+              <div className="flex flex-col">
+                <span className="text-2xl font-bold">{user.following}</span>
+                <span className="text-sm text-gray-500">Following</span>
+              </div>
+            </div>
+
+            <button className="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors font-medium">
+              Follow
+            </button>
+          </div>
+        </div>
+
+        {user.userType === "ARTIST" && user.musicalEntities?.contributions && (
+          <ArtistView contributions={user.musicalEntities.contributions} />
         )}
 
-        {user.userType === "Listener" && user.likedEntities && (
-          <div>
-            <h3 className="text-2xl font-bold mb-4">Liked Songs & Albums</h3>
-            <div className="grid gap-2">
-              {user.likedEntities.map((like) => (
-                <div
-                  key={like.entityId}
-                  className="p-3 bg-gray-50 rounded flex justify-between"
-                >
-                  <span>{like.entityTitle}</span>
-                  <span className="text-sm text-gray-400">
-                    {like.entityType}
-                  </span>
-                  <span className="text-sm text-gray-400">
-                    {like.entityGenre}
-                  </span>
-                </div>
-              ))}
-            </div>
-          </div>
+        {user.userType === "LISTENER" && user.likes?.likedEntities && (
+          <ListenerView
+            likedEntities={user.likes.likedEntities}
+            playlists={user.createdPlaylists}
+          />
         )}
       </div>