Index: frontend/package-lock.json
===================================================================
--- frontend/package-lock.json	(revision f6ce33af2aa128898769b886882d71c8df729673)
+++ frontend/package-lock.json	(revision efe76febc84767c79b12dc47ef59644804ce6f97)
@@ -12,4 +12,5 @@
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
+        "react-router-dom": "^7.13.0",
         "tailwindcss": "^4.1.18"
       },
@@ -2154,4 +2155,17 @@
       "dev": true,
       "license": "MIT"
+    },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
     },
     "node_modules/cross-spawn": {
@@ -3341,4 +3355,42 @@
       }
     },
+    "node_modules/react-router": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.13.0.tgz",
+      "integrity": "sha512-PZgus8ETambRT17BUm/LL8lX3Of+oiLaPuVTRH3l1eLvSPpKO3AvhAEb5N7ihAFZQrYDqkvvWfFh9p0z9VsjLw==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.13.0.tgz",
+      "integrity": "sha512-5CO/l5Yahi2SKC6rGZ+HDEjpjkGaG/ncEP7eWFTvFxbHP8yeeI0PxTDjimtpXYlR3b3i9/WIL4VJttPrESIf2g==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.13.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
@@ -3410,4 +3462,10 @@
         "semver": "bin/semver.js"
       }
+    },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
     },
     "node_modules/shebang-command": {
Index: frontend/package.json
===================================================================
--- frontend/package.json	(revision f6ce33af2aa128898769b886882d71c8df729673)
+++ frontend/package.json	(revision efe76febc84767c79b12dc47ef59644804ce6f97)
@@ -14,4 +14,5 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-router-dom": "^7.13.0",
     "tailwindcss": "^4.1.18"
   },
Index: frontend/src/App.tsx
===================================================================
--- frontend/src/App.tsx	(revision f6ce33af2aa128898769b886882d71c8df729673)
+++ frontend/src/App.tsx	(revision efe76febc84767c79b12dc47ef59644804ce6f97)
@@ -1,19 +1,34 @@
 import { useEffect } from "react";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import AllUsers from "./components/userProfile/AllUsersHelper";
+import UserDetail from "./components/userProfile/UserDetail";
+
+function Home() {
+  useEffect(() => {
+    const fetchData = async () => {
+      const response = await fetch("http://localhost:8080/");
+      const data = await response.json();
+      console.log(data);
+    };
+    fetchData();
+  });
+
+  return (
+    <>
+      <p className="text-red-500">ok</p>
+    </>
+  );
+}
 
 function App() {
-	useEffect(() => {
-		const fetchData = async () => {
-			const response = await fetch("http://localhost:8080/");
-			const data = await response.json();
-			console.log(data);
-		};
-		fetchData();
-	});
-
-	return (
-		<>
-			<p className="text-red-500">ok</p>
-		</>
-	);
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/users" element={<AllUsers />} />
+        <Route path="/users/:userId" element={<UserDetail />} />
+      </Routes>
+    </BrowserRouter>
+  );
 }
 
Index: frontend/src/components/userProfile/AllUsersHelper.tsx
===================================================================
--- frontend/src/components/userProfile/AllUsersHelper.tsx	(revision efe76febc84767c79b12dc47ef59644804ce6f97)
+++ frontend/src/components/userProfile/AllUsersHelper.tsx	(revision efe76febc84767c79b12dc47ef59644804ce6f97)
@@ -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 efe76febc84767c79b12dc47ef59644804ce6f97)
+++ frontend/src/components/userProfile/UserDetail.tsx	(revision efe76febc84767c79b12dc47ef59644804ce6f97)
@@ -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;