Index: frontend/src/components/userProfile/AllUsersHelper.tsx
===================================================================
--- frontend/src/components/userProfile/AllUsersHelper.tsx	(revision 0d9725cfa22ae513a665db5f34f5a086b3660f82)
+++ frontend/src/components/userProfile/AllUsersHelper.tsx	(revision 0d9725cfa22ae513a665db5f34f5a086b3660f82)
@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+interface User {
+  id: number;
+  username: string;
+  fullName: string;
+}
+
+const AllUsers = () => {
+  const [users, setUsers] = useState<User[]>([]);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const fetchUsers = async () => {
+      const response = await fetch("http://localhost:8080/users/all");
+      const data = await response.json();
+      setUsers(data);
+    };
+    fetchUsers();
+  }, []);
+
+  const handleUserClick = (userId: number) => {
+    navigate(`/users/${userId}`);
+  };
+
+  return (
+    <div className="container mx-auto p-6">
+      <h1 className="text-3xl font-bold mb-6">All Users</h1>
+      <div className="grid gap-4">
+        {users.map((u) => (
+          <div
+            key={u.id}
+            onClick={() => handleUserClick(u.id)}
+            className="bg-white shadow-md rounded-lg p-4 hover:shadow-lg hover:bg-gray-50 cursor-pointer transition-all"
+          >
+            <h2 className="text-xl font-semibold">{u.fullName}</h2>
+            <p className="text-gray-600">@{u.username}</p>
+            <p className="text-gray-600">{u.id}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default AllUsers;
Index: frontend/src/components/userProfile/UserDetail.tsx
===================================================================
--- frontend/src/components/userProfile/UserDetail.tsx	(revision 0d9725cfa22ae513a665db5f34f5a086b3660f82)
+++ frontend/src/components/userProfile/UserDetail.tsx	(revision 0d9725cfa22ae513a665db5f34f5a086b3660f82)
@@ -0,0 +1,112 @@
+import { useEffect, useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+
+interface User {
+  id: number;
+  username: string;
+  fullName: string;
+  followerCount: number;
+  followingCount: number;
+  userType: string;
+  contributions?: {
+    role: string;
+    title: string;
+    musicalEntityId: number;
+    entityType: string;
+  }[];
+
+  likedEntities?: {
+    entityId: number;
+    entityTitle: string;
+    entityGenre: string;
+    entityType: string;
+  }[];
+}
+
+const UserDetail = () => {
+  const { userId } = useParams();
+  const navigate = useNavigate();
+  const [user, setUser] = useState<User | null>(null);
+
+  useEffect(() => {
+    const fetchUser = async () => {
+      console.log(userId);
+      const response = await fetch(`http://localhost:8080/users/${userId}`);
+      const data = await response.json();
+      setUser(data);
+    };
+    fetchUser();
+  }, [userId]);
+
+  if (!user) return <div className="p-6">Loading...</div>;
+
+  return (
+    <div className="container mx-auto p-6">
+      {/* <button
+        onClick={() => navigate("/allUsers")}
+        className="mb-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+      >
+        ← Back to All Users
+      </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>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {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>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default UserDetail;