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>