Index: frontend/src/pages/AllUsers.tsx
===================================================================
--- frontend/src/pages/AllUsers.tsx	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
+++ frontend/src/pages/AllUsers.tsx	(revision 0792d02b326867cae564f7072133934be31d9dee)
@@ -4,84 +4,82 @@
 
 interface User {
-	id: number;
-	username: string;
-	fullName: string;
+  username: string;
+  fullName: string;
 }
 
 const AllUsers = () => {
-	const [users, setUsers] = useState<User[]>([]);
-	const [searchedUser, setSearchedUser] = useState<string>("");
-	const [error, setError] = useState<string | null>(null);
-	const navigate = useNavigate();
+  const [users, setUsers] = useState<User[]>([]);
+  const [searchedUser, setSearchedUser] = useState<string>("");
+  const [error, setError] = useState<string | null>(null);
+  const navigate = useNavigate();
 
-	useEffect(() => {
-		const fetchUsers = async () => {
-			const response = axiosInstance.get("/users/all");
-			setUsers((await response).data);
-		};
-		fetchUsers();
-	}, []);
+  useEffect(() => {
+    const fetchUsers = async () => {
+      const response = axiosInstance.get("/users/all");
+      setUsers((await response).data);
+    };
+    fetchUsers();
+  }, []);
 
-	const handleUserClick = (userId: number) => {
-		navigate(`/users/${userId}`);
-	};
+  const handleUserClick = (username: string) => {
+    navigate(`/users/${username}`);
+  };
 
-	const handleSearch = async (e: React.FormEvent) => {
-		e.preventDefault();
-		try {
-			const response = await axiosInstance.get(`/users/search`, {
-				params: { name: searchedUser },
-			});
-			setUsers(response.data);
-		} catch (err: any) {
-			const errorMessage = err.response?.data?.error || "Search failed";
-			setError(errorMessage);
-		}
-	};
+  const handleSearch = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      const response = await axiosInstance.get(`/users/search`, {
+        params: { name: searchedUser },
+      });
+      setUsers(response.data);
+    } catch (err: any) {
+      const errorMessage = err.response?.data?.error || "Search failed";
+      setError(errorMessage);
+    }
+  };
 
-	if (users.length == 0) return <div className="p-6">Loading...</div>;
-	if (error) {
-		return (
-			<div className="p-6 bg-red-50 border border-red-200 text-red-700 rounded-lg">
-				<h2 className="font-bold">Error</h2>
-				<p>{error}</p>
-			</div>
-		);
-	}
+  if (users.length == 0) return <div className="p-6">Loading...</div>;
+  if (error) {
+    return (
+      <div className="p-6 bg-red-50 border border-red-200 text-red-700 rounded-lg">
+        <h2 className="font-bold">Error</h2>
+        <p>{error}</p>
+      </div>
+    );
+  }
 
-	return (
-		<div className="container mx-auto p-6">
-			<h1 className="text-3xl font-bold mb-6">All Users</h1>
-			<form onSubmit={handleSearch} className="flex gap-2 mb-10">
-				<input
-					type="text"
-					value={searchedUser}
-					onChange={(e) => setSearchedUser(e.target.value)}
-					className="border p-2 rounded w-full"
-					placeholder="Search for a user..."
-				/>
-				<button
-					type="submit"
-					className="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 transition-colors"
-				>
-					Search
-				</button>
-			</form>
+  return (
+    <div className="container mx-auto p-6">
+      <h1 className="text-3xl font-bold mb-6">All Users</h1>
+      <form onSubmit={handleSearch} className="flex gap-2 mb-10">
+        <input
+          type="text"
+          value={searchedUser}
+          onChange={(e) => setSearchedUser(e.target.value)}
+          className="border p-2 rounded w-full"
+          placeholder="Search for a user..."
+        />
+        <button
+          type="submit"
+          className="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 transition-colors"
+        >
+          Search
+        </button>
+      </form>
 
-			<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>
-	);
+      <div className="grid gap-4">
+        {users.map((u) => (
+          <div
+            key={u.username}
+            onClick={() => handleUserClick(u.username)}
+            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>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
 };
 
Index: frontend/src/pages/UserDetail.tsx
===================================================================
--- frontend/src/pages/UserDetail.tsx	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
+++ frontend/src/pages/UserDetail.tsx	(revision 0792d02b326867cae564f7072133934be31d9dee)
@@ -27,4 +27,5 @@
   likedEntities: MusicalEntity[];
   createdPlaylists: Playlist[];
+  savedPlaylists: Playlist[];
 }
 
@@ -34,5 +35,5 @@
   // user refers to the selected user NOT to the user from context
   const baseURL = import.meta.env.VITE_API_BASE_URL;
-  const { userId } = useParams();
+  const { username } = useParams();
   const navigate = useNavigate();
   const [user, setUser] = useState<UserProfile | null>(null);
@@ -50,5 +51,5 @@
     try {
       const response = await axiosInstance.post<FollowStatus>(
-        `/users/${userId}/follow`,
+        `/users/${username}/follow`,
       );
       setUser((prev) => {
@@ -68,13 +69,13 @@
   };
 
-  const handleFollowInModal = async (targetId: number) => {
+  const handleFollowInModal = async (targetUsername: string) => {
     try {
       const response = await axiosInstance.post<FollowStatus>(
-        `/users/${targetId}/follow`,
+        `/users/${username}/follow`,
       );
 
       setModalUsers((prevUsers) =>
         prevUsers.map((u) =>
-          u.id === targetId
+          u.username === targetUsername
             ? { ...u, isFollowedByCurrentUser: response.data.isFollowing }
             : u,
@@ -100,5 +101,5 @@
     setIsLoadingModal(true);
     try {
-      const response = await axiosInstance.get(`/users/${userId}/followers`);
+      const response = await axiosInstance.get(`/users/${username}/followers`);
       setModalUsers(response.data);
       setModalTitle("Followers");
@@ -113,5 +114,5 @@
     setIsLoadingModal(true);
     try {
-      const response = await axiosInstance.get(`/users/${userId}/following`);
+      const response = await axiosInstance.get(`/users/${username}/following`);
       setModalUsers(response.data);
       setModalTitle("Following");
@@ -128,5 +129,5 @@
       setError(null);
       try {
-        const response = await axiosInstance.get(`/users/${userId}`);
+        const response = await axiosInstance.get(`/users/${username}`);
         console.log(response.data);
         setUser(response.data);
@@ -136,5 +137,5 @@
     };
     fetchUser();
-  }, [userId]);
+  }, [username]);
 
   if (error) {
@@ -233,5 +234,6 @@
           <ListenerView
             likedEntities={user.likedEntities}
-            playlists={user.createdPlaylists}
+            createdPlaylists={user.createdPlaylists}
+            savedPlaylists={user.savedPlaylists}
           />
         )}