Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/NonAdminUserController.java
===================================================================
--- finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/NonAdminUserController.java	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/NonAdminUserController.java	(revision 0792d02b326867cae564f7072133934be31d9dee)
@@ -26,7 +26,7 @@
     }
 
-    @GetMapping("/{id}")
-    public HttpEntity<NonAdminUserDto>getById(@PathVariable Long id){
-        return ResponseEntity.ok(nonAdminUserService.getById(id));
+    @GetMapping("/{username}")
+    public HttpEntity<NonAdminUserDto>getById(@PathVariable String username){
+        return ResponseEntity.ok(nonAdminUserService.getNonAdminUserProfile(username));
     }
 
@@ -36,18 +36,18 @@
     }
 
-    @GetMapping("/{id}/followers")
-    public HttpEntity<List<NonAdminUserDto>>getFollowersForUser(@PathVariable Long id){
-        return ResponseEntity.ok(followService.getFollowersForUser(id));
+    @GetMapping("/{username}/followers")
+    public HttpEntity<List<NonAdminUserDto>>getFollowersForUser(@PathVariable String username){
+        return ResponseEntity.ok(followService.getFollowersForUser(username));
     }
 
-    @GetMapping("/{id}/following")
-    public HttpEntity<List<NonAdminUserDto>>getFollowingForUser(@PathVariable Long id){
-        return ResponseEntity.ok(followService.getFollowingForUser(id));
+    @GetMapping("/{username}/following")
+    public HttpEntity<List<NonAdminUserDto>>getFollowingForUser(@PathVariable String username){
+        return ResponseEntity.ok(followService.getFollowingForUser(username));
     }
 
-    @PostMapping("/{id}/follow")
-    public HttpEntity<FollowStatusDto>followUser(@PathVariable Long id){
+    @PostMapping("/{username}/follow")
+    public HttpEntity<FollowStatusDto>followUser(@PathVariable String username){
 
-        return ResponseEntity.ok(followService.toggleFollow(id));
+        return ResponseEntity.ok(followService.toggleFollow(username));
     }
 
Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/ListenerDto.java
===================================================================
--- finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/ListenerDto.java	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/ListenerDto.java	(revision 0792d02b326867cae564f7072133934be31d9dee)
@@ -11,3 +11,4 @@
     private List<MusicalEntityDto> likedEntities;
     private List<PlaylistDto> createdPlaylists;
+    private List<PlaylistDto>savedPlaylists;
 }
Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/NonAdminUserDto.java
===================================================================
--- finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/NonAdminUserDto.java	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/NonAdminUserDto.java	(revision 0792d02b326867cae564f7072133934be31d9dee)
@@ -9,5 +9,4 @@
 
 public  class NonAdminUserDto {
-    private Long id;
     private String username;
     private String fullName;
Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/repository/ArtistRepository.java
===================================================================
--- finkwave/src/main/java/com/ukim/finki/develop/finkwave/repository/ArtistRepository.java	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/repository/ArtistRepository.java	(revision 0792d02b326867cae564f7072133934be31d9dee)
@@ -19,3 +19,10 @@
     Optional<Artist>findByIdWithUser(@Param("artistId")Long artistId);
 
+    @Query("SELECT a FROM Artist a " +
+            "JOIN FETCH a.nonAdminUser nau " +
+            "JOIN FETCH nau.user u " +
+            "WHERE u.username = :username")
+    Optional<Artist> findByUsername(@Param("username") String username);
+
+
 }
Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/repository/ListenerRepository.java
===================================================================
--- finkwave/src/main/java/com/ukim/finki/develop/finkwave/repository/ListenerRepository.java	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/repository/ListenerRepository.java	(revision 0792d02b326867cae564f7072133934be31d9dee)
@@ -17,3 +17,10 @@
            "WHERE l.id = :listenerId")
     Optional<Listener> findByIdWithUser(@Param("listenerId") Long listenerId);
+
+    @Query("SELECT l FROM Listener l " +
+            "JOIN FETCH l.nonAdminUser nu " +
+            "JOIN FETCH nu.user u " +
+            "WHERE u.username=:username")
+
+    Optional<Listener>findByUsername(@Param("username")String username);
 }
Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/repository/NonAdminUserRepository.java
===================================================================
--- finkwave/src/main/java/com/ukim/finki/develop/finkwave/repository/NonAdminUserRepository.java	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/repository/NonAdminUserRepository.java	(revision 0792d02b326867cae564f7072133934be31d9dee)
@@ -3,4 +3,5 @@
 import org.springframework.data.jpa.repository.JpaRepository;
 import org.springframework.data.jpa.repository.Query;
+import org.springframework.data.repository.query.Param;
 import org.springframework.stereotype.Repository;
 
@@ -8,4 +9,5 @@
 
 import java.util.List;
+import java.util.Optional;
 
 @Repository
@@ -20,4 +22,9 @@
     List<NonAdminUser> searchByName(String name);
 
+    @Query("SELECT nau FROM NonAdminUser nau " +
+            "JOIN FETCH nau.user u " +
+            "WHERE u.username = :username")
+    Optional<NonAdminUser> findByUsername(@Param("username") String username);
+
 
 
Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/repository/SavedPlaylistRepository.java
===================================================================
--- finkwave/src/main/java/com/ukim/finki/develop/finkwave/repository/SavedPlaylistRepository.java	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/repository/SavedPlaylistRepository.java	(revision 0792d02b326867cae564f7072133934be31d9dee)
@@ -1,5 +1,8 @@
 package com.ukim.finki.develop.finkwave.repository;
 
+import com.ukim.finki.develop.finkwave.model.Playlist;
 import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Query;
+import org.springframework.data.repository.query.Param;
 import org.springframework.stereotype.Repository;
 
@@ -13,3 +16,11 @@
 
     List<SavedPlaylist>findAllByListener_Id(Long currentUserId);
+
+    @Query("SELECT p FROM SavedPlaylist sp " +
+            "JOIN sp.playlist p " +
+            "JOIN FETCH p.createdBy l " +
+            "JOIN FETCH l.nonAdminUser nau " +
+            "JOIN FETCH nau.user u " +
+            "WHERE sp.id.listenerId = :listenerId")
+    List<Playlist> findSavedPlaylistsMetadata(@Param("listenerId") Long listenerId);
 }
Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/FollowService.java
===================================================================
--- finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/FollowService.java	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/FollowService.java	(revision 0792d02b326867cae564f7072133934be31d9dee)
@@ -3,4 +3,5 @@
 import com.ukim.finki.develop.finkwave.exceptions.FollowException;
 import com.ukim.finki.develop.finkwave.exceptions.UserNotFoundException;
+import com.ukim.finki.develop.finkwave.model.Artist;
 import com.ukim.finki.develop.finkwave.model.Follow;
 import com.ukim.finki.develop.finkwave.model.FollowId;
@@ -17,4 +18,5 @@
 import java.util.ArrayList;
 import java.util.List;
+import java.util.Optional;
 import java.util.Set;
 import java.util.stream.Collectors;
@@ -39,8 +41,17 @@
     }
 
-    public List<NonAdminUserDto>getFollowersForUser(Long id){
-        if (artistRepository.existsById(id)){
+    private  NonAdminUser getNonAdminUser(String username){
+        Optional<Artist>artistOptional=artistRepository.findByUsername(username);
+        if (artistOptional.isPresent()){
             throw new FollowException("Cannot view for artist");
         }
+        return nonAdminUserRepository.findByUsername(username)
+                .orElseThrow(()-> new UserNotFoundException("Cannot find user with username: "+ username));
+    }
+
+    public List<NonAdminUserDto>getFollowersForUser(String username){
+        NonAdminUser nonAdminUser=getNonAdminUser(username);
+
+        Long id=nonAdminUser.getId();
         List<Follow> followers = followRepository.findFollowersWithProfile(id);
         Long currentUserId=authService.getCurrentUserID();
@@ -50,16 +61,14 @@
                 .map(f -> {
                     NonAdminUser follower = f.getFollower();
-                    NonAdminUserDto dto = mapper.toDto(follower, null, null, null);
+                    boolean isFollowedByCurrentUser=isFollowedByCurrentUser(currentUserId,follower.getId());
 
-                    dto.setIsFollowedByCurrentUser(isFollowedByCurrentUser(currentUserId,follower.getId()));
-                    return dto;
+                    return mapper.toDto(follower, null, new FollowStatusDto(isFollowedByCurrentUser,null,null));
                 })
                 .toList();
     }
 
-    public List<NonAdminUserDto>getFollowingForUser(Long id){
-        if (artistRepository.existsById(id)){
-            throw new FollowException("Cannot view for artist");
-        }
+    public List<NonAdminUserDto>getFollowingForUser(String username){
+        NonAdminUser nonAdminUser=getNonAdminUser(username);
+        Long id=nonAdminUser.getId();
         List<Follow>followings=followRepository.getFollowsByFollower_Id(id);
         Long currentUserId=authService.getCurrentUserID();
@@ -67,7 +76,6 @@
                 .map(f->{
                     NonAdminUser followee=f.getFollowee();
-                    NonAdminUserDto dto=mapper.toDto(f.getFollowee(),null,null,null);
-                    dto.setIsFollowedByCurrentUser(isFollowedByCurrentUser(currentUserId,followee.getId()));
-                    return dto;
+                    boolean isFollowedByCurrentUser=isFollowedByCurrentUser(currentUserId,followee.getId());
+                    return mapper.toDto(f.getFollowee(),null,new FollowStatusDto(isFollowedByCurrentUser,null,null));
                 })
                 .toList();
@@ -76,7 +84,10 @@
 
 
-    public FollowStatusDto toggleFollow(Long id){
+    public FollowStatusDto toggleFollow(String username){
         Long currentUserId=authService.getCurrentUserID();
         boolean isFollowing;
+        NonAdminUser nonAdminUser=nonAdminUserRepository.findByUsername(username)
+                .orElseThrow(()-> new UserNotFoundException("Cannot find user with username: "+ username));
+        Long id=nonAdminUser.getId();
 
         if (currentUserId.equals(id)){
Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/ListenerService.java
===================================================================
--- finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/ListenerService.java	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/ListenerService.java	(revision 0792d02b326867cae564f7072133934be31d9dee)
@@ -28,4 +28,8 @@
         return playlistService.findByCreatorId(listenerId);
     }
+
+    public List<Playlist>getPlaylistsSavedByUser(Long listenerId){
+        return playlistService.findSavedByUser(listenerId);
+    }
 }
 
Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/NonAdminUserService.java
===================================================================
--- finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/NonAdminUserService.java	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/NonAdminUserService.java	(revision 0792d02b326867cae564f7072133934be31d9dee)
@@ -9,5 +9,8 @@
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
+
+import java.util.Collections;
 import java.util.List;
+import java.util.Optional;
 import java.util.Set;
 import java.util.stream.Collectors;
@@ -31,5 +34,5 @@
                 .map(user -> {
                     String type = determineType(user.getId());
-                    return mapper.toDto(user, type, null, null);
+                    return mapper.toDto(user, type, new FollowStatusDto(false,null,null));
                 })
                 .collect(Collectors.toList());
@@ -37,59 +40,67 @@
 
     @Transactional(readOnly = true)
-    public NonAdminUserDto getById(Long id) {
-        Long followers=followRepository.countByFolloweeId(id);
-        Long following=followRepository.countByFollowerId(id);
+    public NonAdminUserDto getNonAdminUserProfile(String username) {
+
         Long currentUserId= authService.getCurrentUserID();
 
-        boolean isFollowedByCurrentUser=false;
-        if (currentUserId != null) {
-            isFollowedByCurrentUser = followRepository.isFollowing(currentUserId, id);
+
+        Optional<Artist>artistOptional=artistRepository.findByUsername(username);
+    
+        if (artistOptional.isPresent()) {
+            Artist artist = artistOptional.get();
+            return getArtistProfile(artist, currentUserId);
         }
-        NonAdminUserDto dto;
-    
-        if (artistRepository.existsById(id)) {
-             dto=getArtistProfile(id, followers, following);
-             dto.setIsFollowedByCurrentUser(isFollowedByCurrentUser);
-             return dto;
+
+        Optional<Listener>listenerOptional=listenerRepository.findByUsername(username);
+      
+        if (listenerOptional.isPresent()) {
+            Listener listener=listenerOptional.get();
+            return getListenerProfile(listener,currentUserId);
         }
-      
-        if (listenerRepository.existsById(id)) {
-            dto=getListenerProfile(id,currentUserId, followers, following);
-            dto.setIsFollowedByCurrentUser(isFollowedByCurrentUser);
-            return dto;
-        }
-        
-        throw new RuntimeException("User not found with id: " + id);
+
+        throw new UserNotFoundException("User not found: " + username);
     }
 
-    private NonAdminUserDto getArtistProfile(Long artistId, Long followers, Long following) {
-        Artist artist = artistRepository.findByIdWithUser(artistId)
-            .orElseThrow(()->new UserNotFoundException("Artist not found with id: " + artistId));
+    private FollowStatusDto getFollowingInfo(Long id,Long currentUserId){
+        Long followers = followRepository.countByFolloweeId(id);
+        Long following = followRepository.countByFollowerId(id);
+        boolean isFollowing = followRepository.isFollowing(currentUserId, id);
+        return new FollowStatusDto(isFollowing,followers,following);
+    }
+
+    private NonAdminUserDto getArtistProfile(Artist artist,Long currentUserId) {
+        Long artistId=artist.getId();
+
+        List<ArtistContributionDto>artistContributionDtos=artistService.getArtistContributions(artistId);
+        FollowStatusDto followStatusDto=getFollowingInfo(artistId,currentUserId);
+
+        return mapper.toArtistDTO(artist, artistContributionDtos,followStatusDto);
+    }
+
+    private NonAdminUserDto getListenerProfile(Listener listener, Long currentUserId) {
+        Long profileId = listener.getId();
+
+        FollowStatusDto followStatusDto = getFollowingInfo(profileId, currentUserId);
 
 
-        List<ArtistContributionDto>artistContributionDtos=artistService.getArtistContributions(artistId);
+        List<MusicalEntityDto> likedEntities = listenerService.getLikedEntities(currentUserId, profileId);
 
-        return mapper.toArtistDTO(artist, artistContributionDtos,followers,following);
-    }
-
-    private NonAdminUserDto getListenerProfile(Long listenerId,Long currentUserId, Long followers, Long following) {
-        Listener listener = listenerRepository.findByIdWithUser(listenerId)
-            .orElseThrow(()->new UserNotFoundException("Listener not found with id: " + listenerId));
+        Set<Long> visitorSavedPlaylistIds = (currentUserId != null)
+                ? savedPlaylistRepository.findAllByListener_Id(currentUserId).stream()
+                .map(sp -> sp.getPlaylist().getId())
+                .collect(Collectors.toSet())
+                : Collections.emptySet();
 
 
-        List<MusicalEntityDto>musicalEntityDtos=listenerService.getLikedEntities(currentUserId,listenerId);
-        Set<Long> savedIds = savedPlaylistRepository.findAllByListener_Id(currentUserId)
-                .stream().map(sp -> sp.getPlaylist().getId()).collect(Collectors.toSet());
-        List<PlaylistDto>playlists=listenerService.getPlaylistsCreatedByUser(listenerId).stream()
-                .map(p->new PlaylistDto(
-                        p.getId(),
-                        p.getName(),
-                        p.getCover(),
-                        p.getCreatedBy().getNonAdminUser().getUser().getFullName(),
-                        null,
-                        savedIds.contains(p.getId())
-                )).toList();
+        List<PlaylistDto> createdPlaylists = listenerService.getPlaylistsCreatedByUser(profileId).stream()
+                .map(p -> mapToPlaylistDto(p, visitorSavedPlaylistIds))
+                .toList();
 
-        return mapper.toListenerDTO(listener, musicalEntityDtos,followers,following,playlists);
+
+        List<PlaylistDto> savedPlaylists = savedPlaylistRepository.findSavedPlaylistsMetadata(profileId).stream()
+                .map(p -> mapToPlaylistDto(p, visitorSavedPlaylistIds))
+                .toList();
+
+        return mapper.toListenerDTO(listener, likedEntities, followStatusDto, createdPlaylists, savedPlaylists);
     }
 
@@ -104,8 +115,8 @@
         return nonAdminUserRepository.searchByName(name).stream()
                 .map(user -> {
-                    String type = determineType(user.getId());
-                    Long followers = followRepository.countByFolloweeId(user.getId());
-                    Long following = followRepository.countByFollowerId(user.getId());
-                    return mapper.toDto(user, type, followers, following);
+                    Long userId= user.getId();
+                    String type = determineType(userId);
+                    FollowStatusDto followStatusDto=getFollowingInfo(userId,null);
+                    return mapper.toDto(user, type,followStatusDto);
                 })
                 .collect(Collectors.toList());
@@ -113,5 +124,14 @@
 
 
-
+    private PlaylistDto mapToPlaylistDto(Playlist p, Set<Long> savedBy) {
+        return new PlaylistDto(
+                p.getId(),
+                p.getName(),
+                p.getCover(),
+                p.getCreatedBy().getNonAdminUser().getUser().getFullName(),
+                null,
+                savedBy.contains(p.getId())
+        );
+    }
     private String determineType(Long id) {
         if (artistRepository.existsById(id)) {
Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/PlaylistService.java
===================================================================
--- finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/PlaylistService.java	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/PlaylistService.java	(revision 0792d02b326867cae564f7072133934be31d9dee)
@@ -29,4 +29,8 @@
     }
 
+    public List<Playlist>findSavedByUser(Long id){
+        return savedPlaylistRepository.findSavedPlaylistsMetadata(id);
+    }
+
     public PlaylistDto getPlaylist(Long id){
         Long currentUserId=authService.getCurrentUserID();
@@ -48,3 +52,5 @@
 
 
+
+
 }
Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/mappers/NonAdminUserMapper.java
===================================================================
--- finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/mappers/NonAdminUserMapper.java	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/mappers/NonAdminUserMapper.java	(revision 0792d02b326867cae564f7072133934be31d9dee)
@@ -15,22 +15,27 @@
 public class NonAdminUserMapper {
 
-    public NonAdminUserDto toArtistDTO(Artist artist, List<ArtistContributionDto> entitiesDTO, Long followers, Long following) {
+    public NonAdminUserDto toArtistDTO(Artist artist, List<ArtistContributionDto> entitiesDTO, FollowStatusDto followStatusDto) {
         ArtistDto dto=new ArtistDto();
-        populateBaseClassFields(dto,artist.getNonAdminUser(),"ARTIST",followers,following);
+        populateBaseClassFields(dto,artist.getNonAdminUser(),"ARTIST",followStatusDto);
         dto.setContributions(entitiesDTO);
         return dto;
     }
 
-    public NonAdminUserDto toListenerDTO(Listener listener, List<MusicalEntityDto> musicalEntityDtos, Long followers, Long following, List<PlaylistDto>playlists) {
+    public NonAdminUserDto toListenerDTO(Listener listener,
+                                         List<MusicalEntityDto> musicalEntityDtos,
+                                         FollowStatusDto followStatusDto,
+                                         List<PlaylistDto>createdPlaylists,
+                                         List<PlaylistDto>savedPlaylists) {
         ListenerDto dto=new ListenerDto();
-        populateBaseClassFields(dto,listener.getNonAdminUser(),"LISTENER",followers,following);
+        populateBaseClassFields(dto,listener.getNonAdminUser(),"LISTENER",followStatusDto);
         dto.setLikedEntities(musicalEntityDtos);
-        dto.setCreatedPlaylists(playlists);
+        dto.setCreatedPlaylists(createdPlaylists);
+        dto.setSavedPlaylists(savedPlaylists);
         return dto;
     }
 
-    public NonAdminUserDto toDto(NonAdminUser user,String type, Long followers,Long following){
+    public NonAdminUserDto toDto(NonAdminUser user,String type, FollowStatusDto followStatusDto){
        NonAdminUserDto dto=new NonAdminUserDto();
-       populateBaseClassFields(dto,user,type,followers,following);
+       populateBaseClassFields(dto,user,type,followStatusDto);
        return dto;
     }
@@ -38,13 +43,12 @@
 
 
-    private void populateBaseClassFields(NonAdminUserDto dto,NonAdminUser user,String type,Long followers,Long following){
-
-        dto.setId(user.getId());
+    private void populateBaseClassFields(NonAdminUserDto dto,NonAdminUser user,String type,FollowStatusDto followStatusDto){
         dto.setUsername(user.getUser().getUsername());
         dto.setFullName(user.getUser().getFullName());
         dto.setProfilePhoto(user.getUser().getProfilePhoto());
         dto.setUserType(type);
-        dto.setFollowers(followers);
-        dto.setFollowing(following);
+        dto.setFollowers(followStatusDto.followerCount());
+        dto.setFollowing(followStatusDto.followingCount());
+        dto.setIsFollowedByCurrentUser(followStatusDto.isFollowing());
     }
 }
Index: frontend/src/App.tsx
===================================================================
--- frontend/src/App.tsx	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
+++ frontend/src/App.tsx	(revision 0792d02b326867cae564f7072133934be31d9dee)
@@ -51,5 +51,5 @@
       },
       {
-        path: "/users/:userId",
+        path: "/users/:username",
         element: <UserDetail />,
       },
Index: frontend/src/components/userProfile/ListenerView.tsx
===================================================================
--- frontend/src/components/userProfile/ListenerView.tsx	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
+++ frontend/src/components/userProfile/ListenerView.tsx	(revision 0792d02b326867cae564f7072133934be31d9dee)
@@ -4,12 +4,19 @@
 import axiosInstance from "../../api/axiosInstance";
 import { useState } from "react";
+
 interface ListenerViewProps {
   likedEntities: MusicalEntity[] | [];
-  playlists: Playlist[] | [];
+  createdPlaylists: Playlist[] | [];
+  savedPlaylists: Playlist[] | [];
 }
 
-const ListenerView = ({ likedEntities, playlists }: ListenerViewProps) => {
+const ListenerView = ({
+  likedEntities,
+  createdPlaylists,
+  savedPlaylists,
+}: ListenerViewProps) => {
   const navigate = useNavigate();
   const [items, setItems] = useState(likedEntities);
+  const [savedItems, setSavedItems] = useState(savedPlaylists);
   const [toast, setToast] = useState<{ message: string; show: boolean }>({
     message: "",
@@ -27,8 +34,29 @@
   const likedAlbums = items.filter((e) => e.type === "ALBUM");
 
-  const handleSavePlaylist = (e: React.MouseEvent, playlistId: number) => {
+  const handleSavePlaylist = async (
+    e: React.MouseEvent,
+    playlistId: number,
+    playlistName: string,
+  ) => {
     e.stopPropagation();
 
-    console.log("Save playlist:", playlistId);
+    try {
+      const response = await axiosInstance.post(`/playlist/${playlistId}/save`);
+      const data = response.data;
+
+      setSavedItems((prevItems) =>
+        data.isSaved
+          ? [...prevItems, prevItems.find((p) => p.id === playlistId)!]
+          : prevItems.filter((p) => p.id !== playlistId),
+      );
+
+      showToast(
+        data.isSaved
+          ? `Saved "${playlistName}"`
+          : `Removed "${playlistName}" from saved playlists`,
+      );
+    } catch (err: any) {
+      showToast(err.response?.data?.error || "Failed to save playlist");
+    }
   };
 
@@ -63,5 +91,6 @@
         </div>
       )}
-      {playlists && playlists.length > 0 && (
+
+      {createdPlaylists && createdPlaylists.length > 0 && (
         <section>
           <div className="flex items-center gap-3 mb-6">
@@ -70,9 +99,11 @@
               Created Playlists
             </h3>
-            <span className="text-sm text-gray-500">({playlists.length})</span>
+            <span className="text-sm text-gray-500">
+              ({createdPlaylists.length})
+            </span>
           </div>
 
           <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-            {playlists.map((playlist) => (
+            {createdPlaylists.map((playlist) => (
               <div
                 key={playlist.id}
@@ -93,7 +124,8 @@
                   )}
 
-                  {/* Save button overlay */}
                   <button
-                    onClick={(e) => handleSavePlaylist(e, playlist.id)}
+                    onClick={(e) =>
+                      handleSavePlaylist(e, playlist.id, playlist.name)
+                    }
                     className="absolute top-2 right-2 p-2 bg-white/90 hover:bg-white rounded-full shadow-md transition-all duration-200 opacity-0 group-hover:opacity-100"
                     title={playlist.isSavedByCurrentUser ? "Unsave" : "Save"}
@@ -106,4 +138,56 @@
                       }`}
                     />
+                  </button>
+                </div>
+                <p className="text-sm font-semibold text-gray-900 truncate group-hover:text-blue-600 transition-colors">
+                  {playlist.name}
+                </p>
+                <p className="text-xs text-gray-500 truncate">
+                  {playlist.creatorName}
+                </p>
+              </div>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {savedItems && savedItems.length > 0 && (
+        <section>
+          <div className="flex items-center gap-3 mb-6">
+            <Bookmark className="w-6 h-6 text-blue-600 fill-blue-600" />
+            <h3 className="text-2xl font-bold text-gray-800">
+              Saved Playlists
+            </h3>
+            <span className="text-sm text-gray-500">({savedItems.length})</span>
+          </div>
+
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+            {savedItems.map((playlist) => (
+              <div
+                key={playlist.id}
+                className="group cursor-pointer"
+                onClick={() => navigate(`/collection/playlist/${playlist.id}`)}
+              >
+                <div className="relative aspect-square rounded-lg overflow-hidden bg-gray-100 mb-3 shadow-md group-hover:shadow-lg transition-all">
+                  {playlist.cover ? (
+                    <img
+                      src={playlist.cover}
+                      alt={playlist.name}
+                      className="w-full h-full object-cover"
+                    />
+                  ) : (
+                    <div className="w-full h-full bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center">
+                      <ListMusic className="w-16 h-16 text-white opacity-30" />
+                    </div>
+                  )}
+
+                  <button
+                    onClick={(e) =>
+                      handleSavePlaylist(e, playlist.id, playlist.name)
+                    }
+                    className="absolute top-2 right-2 p-2 bg-white/90 hover:bg-white rounded-full shadow-md transition-all duration-200 opacity-0 group-hover:opacity-100"
+                    title="Unsave"
+                  >
+                    <Bookmark className="w-5 h-5 fill-blue-600 text-blue-600" />
                   </button>
                 </div>
@@ -234,5 +318,6 @@
       {likedEntities &&
         likedEntities.length === 0 &&
-        (!playlists || playlists.length === 0) && (
+        (!createdPlaylists || createdPlaylists.length === 0) &&
+        (!savedItems || savedItems.length === 0) && (
           <div className="flex flex-col items-center justify-center py-16 text-gray-400">
             <Music className="w-20 h-20 mb-4 opacity-20" />
Index: frontend/src/components/userProfile/UserListModal.tsx
===================================================================
--- frontend/src/components/userProfile/UserListModal.tsx	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
+++ frontend/src/components/userProfile/UserListModal.tsx	(revision 0792d02b326867cae564f7072133934be31d9dee)
@@ -6,5 +6,5 @@
   users: BaseNonAdminUser[];
   onClose: () => void;
-  onFollowToggle: (targetId: number) => Promise<void>;
+  onFollowToggle: (targetUsername: string) => Promise<void>;
 }
 
@@ -37,5 +37,5 @@
             users.map((u) => (
               <div
-                key={u.id}
+                key={u.username}
                 className="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition-colors"
               >
@@ -44,5 +44,5 @@
                   onClick={() => {
                     onClose();
-                    navigate(`/users/${u.id}`);
+                    navigate(`/users/${u.username}`);
                   }}
                 >
@@ -64,5 +64,5 @@
 
                 <button
-                  onClick={() => onFollowToggle(u.id)}
+                  onClick={() => onFollowToggle(u.username)}
                   className={`px-4 py-1 text-sm font-medium rounded-md transition-colors cursor-pointer ${
                     u.isFollowedByCurrentUser
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}
           />
         )}
Index: frontend/src/utils/types.ts
===================================================================
--- frontend/src/utils/types.ts	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
+++ frontend/src/utils/types.ts	(revision 0792d02b326867cae564f7072133934be31d9dee)
@@ -44,5 +44,5 @@
 
 export interface BaseNonAdminUser {
-  id: number;
+  username: string;
   fullName: string;
   userType: string;