Index: frontend/src/pages/UserDetail.tsx
===================================================================
--- frontend/src/pages/UserDetail.tsx	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
+++ frontend/src/pages/UserDetail.tsx	(revision 929e93c33edbce0bd95761ba0c816259b90f33d4)
@@ -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}
           />
         )}