Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/GlobalExceptionHandler.java
===================================================================
--- finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/GlobalExceptionHandler.java	(revision 2730163380202029196d71a92f0cbde3dfdd5b0a)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/GlobalExceptionHandler.java	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
@@ -3,7 +3,5 @@
 import java.util.Map;
 
-import com.ukim.finki.develop.finkwave.exceptions.AlbumNotFoundException;
-import com.ukim.finki.develop.finkwave.exceptions.FollowException;
-import com.ukim.finki.develop.finkwave.exceptions.UserNotFoundException;
+import com.ukim.finki.develop.finkwave.exceptions.*;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
@@ -15,6 +13,4 @@
 import org.springframework.web.multipart.MaxUploadSizeExceededException;
 import org.springframework.web.server.ResponseStatusException;
-
-import com.ukim.finki.develop.finkwave.exceptions.AuthException;
 
 @RestControllerAdvice
@@ -39,5 +35,5 @@
     public ResponseEntity<Map<String, String>> handleUserNotFound(UserNotFoundException ex) {
         return ResponseEntity
-                .status(HttpStatus.BAD_REQUEST)
+                .status(HttpStatus.NOT_FOUND)
                 .body(Map.of("error", ex.getMessage()));
     }
@@ -53,5 +49,12 @@
     public ResponseEntity<Map<String, String>> handleAlbumNotFound(AlbumNotFoundException ex) {
         return ResponseEntity
-                .status(HttpStatus.BAD_REQUEST)
+                .status(HttpStatus.NOT_FOUND)
+                .body(Map.of("error", ex.getMessage()));
+    }
+
+    @ExceptionHandler(MusicalEntityNotFoundException.class)
+    public ResponseEntity<Map<String, String>> handleMusicalEntityNotFound(MusicalEntityNotFoundException ex) {
+        return ResponseEntity
+                .status(HttpStatus.NOT_FOUND)
                 .body(Map.of("error", ex.getMessage()));
     }
Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/MusicalEntityController.java
===================================================================
--- finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/MusicalEntityController.java	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/MusicalEntityController.java	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
@@ -0,0 +1,24 @@
+package com.ukim.finki.develop.finkwave.controller;
+
+import com.ukim.finki.develop.finkwave.model.dto.LikeStatusDto;
+import com.ukim.finki.develop.finkwave.service.LikeService;
+import lombok.AllArgsConstructor;
+import org.springframework.http.HttpEntity;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+@RestController
+@AllArgsConstructor
+@RequestMapping("/musical-entity")
+public class MusicalEntityController {
+
+    private final LikeService likeService;
+
+    @PostMapping("/{id}/like")
+    public HttpEntity<LikeStatusDto>likeMusicalEntity(@PathVariable(name = "id") Long entityId){
+        return ResponseEntity.ok(likeService.toggleLike(entityId));
+    }
+}
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 2730163380202029196d71a92f0cbde3dfdd5b0a)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/NonAdminUserController.java	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
@@ -1,4 +1,5 @@
 package com.ukim.finki.develop.finkwave.controller;
 
+import com.ukim.finki.develop.finkwave.model.dto.FollowStatusDto;
 import com.ukim.finki.develop.finkwave.model.dto.NonAdminUserDto;
 import com.ukim.finki.develop.finkwave.service.FollowService;
@@ -46,8 +47,7 @@
 
     @PostMapping("/{id}/follow")
-    public HttpEntity<NonAdminUserDto>followUser(@PathVariable Long id){
-        followService.toggleFollow(id);
+    public HttpEntity<FollowStatusDto>followUser(@PathVariable Long id){
 
-        return ResponseEntity.ok(nonAdminUserService.getById(id));
+        return ResponseEntity.ok(followService.toggleFollow(id));
     }
 
Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/exceptions/MusicalEntityNotFoundException.java
===================================================================
--- finkwave/src/main/java/com/ukim/finki/develop/finkwave/exceptions/MusicalEntityNotFoundException.java	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/exceptions/MusicalEntityNotFoundException.java	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
@@ -0,0 +1,7 @@
+package com.ukim.finki.develop.finkwave.exceptions;
+
+public class MusicalEntityNotFoundException extends RuntimeException{
+    public MusicalEntityNotFoundException(String message) {
+        super(message);
+    }
+}
Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/Like.java
===================================================================
--- finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/Like.java	(revision 2730163380202029196d71a92f0cbde3dfdd5b0a)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/Like.java	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
@@ -3,4 +3,5 @@
 import jakarta.persistence.*;
 import lombok.Getter;
+import lombok.NoArgsConstructor;
 import lombok.Setter;
 import org.hibernate.annotations.OnDelete;
@@ -10,4 +11,5 @@
 @Setter
 @Entity
+@NoArgsConstructor
 @Table(name = "likes", schema = "project")
 public class Like {
@@ -27,3 +29,8 @@
     private MusicalEntity musicalEntity;
 
+    public Like(MusicalEntity musicalEntity, Listener listener) {
+        this.musicalEntity = musicalEntity;
+        this.listener = listener;
+        this.id=new LikeId(listener.getId(),musicalEntity.getId());
+    }
 }
Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/LikeId.java
===================================================================
--- finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/LikeId.java	(revision 2730163380202029196d71a92f0cbde3dfdd5b0a)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/LikeId.java	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
@@ -3,5 +3,7 @@
 import jakarta.persistence.Column;
 import jakarta.persistence.Embeddable;
+import lombok.AllArgsConstructor;
 import lombok.Getter;
+import lombok.NoArgsConstructor;
 import lombok.Setter;
 import org.hibernate.Hibernate;
@@ -13,4 +15,6 @@
 @Setter
 @Embeddable
+@AllArgsConstructor
+@NoArgsConstructor
 public class LikeId implements Serializable {
     private static final long serialVersionUID = -2521356135522333223L;
Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/ArtistContributionDto.java
===================================================================
--- finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/ArtistContributionDto.java	(revision 2730163380202029196d71a92f0cbde3dfdd5b0a)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/ArtistContributionDto.java	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
@@ -9,5 +9,5 @@
 @AllArgsConstructor
 public class ArtistContributionDto {
-    private Long musicalEntityId;
+    private Long id;
     private String title;
     private String genre;
Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/FollowStatusDto.java
===================================================================
--- finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/FollowStatusDto.java	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/FollowStatusDto.java	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
@@ -0,0 +1,4 @@
+package com.ukim.finki.develop.finkwave.model.dto;
+
+public record FollowStatusDto(boolean isFollowing, Long followerCount, Long followingCount)
+{ }
Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/LikeStatusDto.java
===================================================================
--- finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/LikeStatusDto.java	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/LikeStatusDto.java	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
@@ -0,0 +1,4 @@
+package com.ukim.finki.develop.finkwave.model.dto;
+
+public record LikeStatusDto(Long entityId,Boolean isLiked, String type) {
+}
Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/PlaylistDto.java
===================================================================
--- finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/PlaylistDto.java	(revision 2730163380202029196d71a92f0cbde3dfdd5b0a)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/model/dto/PlaylistDto.java	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
@@ -15,6 +15,6 @@
     private String cover;
     private String creatorName;
-
     private List<MusicalEntityDto>songsInPlaylist;
+    private Boolean isSavedByCurrentUser;
 
 }
Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/repository/LikeRepository.java
===================================================================
--- finkwave/src/main/java/com/ukim/finki/develop/finkwave/repository/LikeRepository.java	(revision 2730163380202029196d71a92f0cbde3dfdd5b0a)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/repository/LikeRepository.java	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
@@ -15,18 +15,24 @@
 @Repository
 public interface LikeRepository extends JpaRepository<Like, LikeId> {
-    @Query("SELECT NEW com.ukim.finki.develop.finkwave.model.dto.MusicalEntityDto(l.musicalEntity.id, " +
-            "l.musicalEntity.title," +
-            "l.musicalEntity.genre, " +
-           "CASE WHEN s.id IS NOT NULL THEN 'SONG' " +
-           "WHEN a.id IS NOT NULL THEN 'ALBUM' " +
-           "ELSE 'UNKNOWN' END," +
-            "u.fullName," +
-            "true)" +
-           "FROM Like l " +
-           "LEFT JOIN Song s ON s.musicalEntities.id = l.musicalEntity.id " +
-           "LEFT JOIN Album a ON a.musicalEntities.id = l.musicalEntity.id " +
-            "LEFT JOIN User u ON u.id=l.musicalEntity.releasedBy.id "+
-           "WHERE l.listener.id = :listenerId")
-    List<MusicalEntityDto> findLikedEntitiesWithTypeByListenerId(@Param("listenerId") Long listenerId);
+    @Query("SELECT NEW com.ukim.finki.develop.finkwave.model.dto.MusicalEntityDto(" +
+            "me.id, " +
+            "me.title, " +
+            "me.genre, " +
+            "CASE WHEN s.id IS NOT NULL THEN 'SONG' " +
+            "     WHEN a.id IS NOT NULL THEN 'ALBUM' " +
+            "     ELSE 'UNKNOWN' END, " +
+            "u.fullName, " +
+            "(CASE WHEN currentUserLike.id IS NOT NULL THEN true ELSE false END)" +
+            ") " +
+            "FROM Like l " +
+            "JOIN l.musicalEntity me " +
+            "JOIN me.releasedBy nu " +
+            "JOIN nu.nonAdminUser.user u " +
+            "LEFT JOIN Song s ON s.musicalEntities.id = me.id " +
+            "LEFT JOIN Album a ON a.musicalEntities.id = me.id " +
+            "LEFT JOIN Like currentUserLike ON currentUserLike.musicalEntity.id = me.id " +
+            "AND currentUserLike.listener.id = :currentUserId " +
+            "WHERE l.listener.id = :listenerId")
+    List<MusicalEntityDto> findLikedEntitiesWithTypeByListenerId(@Param("currentUserId")Long currentUserId,@Param("listenerId") Long listenerId);
 
 
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 2730163380202029196d71a92f0cbde3dfdd5b0a)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/repository/SavedPlaylistRepository.java	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
@@ -7,5 +7,9 @@
 import com.ukim.finki.develop.finkwave.model.SavedPlaylistId;
 
+import java.util.List;
+
 @Repository
 public interface SavedPlaylistRepository extends JpaRepository<SavedPlaylist, SavedPlaylistId> {
+
+    List<SavedPlaylist>findAllByListener_Id(Long currentUserId);
 }
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 2730163380202029196d71a92f0cbde3dfdd5b0a)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/FollowService.java	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
@@ -6,4 +6,5 @@
 import com.ukim.finki.develop.finkwave.model.FollowId;
 import com.ukim.finki.develop.finkwave.model.NonAdminUser;
+import com.ukim.finki.develop.finkwave.model.dto.FollowStatusDto;
 import com.ukim.finki.develop.finkwave.model.dto.NonAdminUserDto;
 import com.ukim.finki.develop.finkwave.repository.ArtistRepository;
@@ -75,6 +76,7 @@
 
 
-    public void toggleFollow(Long id){
+    public FollowStatusDto toggleFollow(Long id){
         Long currentUserId=authService.getCurrentUserID();
+        boolean isFollowing;
 
         if (currentUserId.equals(id)){
@@ -87,4 +89,5 @@
         if (followRepository.existsById(followId)){
             followRepository.deleteById(followId);
+            isFollowing=false;
 
         }else{
@@ -95,6 +98,11 @@
 
             followRepository.save(new Follow(follower, followee));
+            isFollowing=true;
 
         }
+        return new FollowStatusDto(
+                isFollowing,
+                followRepository.countByFolloweeId(id),
+                followRepository.countByFollowerId(id));
 
     }
Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/LikeService.java
===================================================================
--- finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/LikeService.java	(revision 2730163380202029196d71a92f0cbde3dfdd5b0a)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/LikeService.java	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
@@ -1,6 +1,13 @@
 package com.ukim.finki.develop.finkwave.service;
 
+import com.ukim.finki.develop.finkwave.exceptions.MusicalEntityNotFoundException;
+import com.ukim.finki.develop.finkwave.exceptions.UserNotFoundException;
+import com.ukim.finki.develop.finkwave.model.Like;
+import com.ukim.finki.develop.finkwave.model.LikeId;
+import com.ukim.finki.develop.finkwave.model.Listener;
+import com.ukim.finki.develop.finkwave.model.MusicalEntity;
+import com.ukim.finki.develop.finkwave.model.dto.LikeStatusDto;
 import com.ukim.finki.develop.finkwave.model.dto.MusicalEntityDto;
-import com.ukim.finki.develop.finkwave.repository.LikeRepository;
+import com.ukim.finki.develop.finkwave.repository.*;
 import lombok.AllArgsConstructor;
 import org.springframework.stereotype.Service;
@@ -11,8 +18,46 @@
 @AllArgsConstructor
 public class LikeService {
+    private final LikeRepository likeRepository;
+    private final AuthService authService;
+    private final MusicalEntityRepository musicalEntityRepository;
+    private AlbumRepository albumRepository;
+    private final SongRepository songRepository;
+    private final ListenerRepository listenerRepository;
 
-    private final LikeRepository likeRepository;
-    public List<MusicalEntityDto> findLikedEntitiesWithTypeByListenerId(Long listenerId){
-        return likeRepository.findLikedEntitiesWithTypeByListenerId(listenerId);
+    public List<MusicalEntityDto> findLikedEntitiesWithTypeByListenerId(Long currentUserId,Long listenerId){
+        return likeRepository.findLikedEntitiesWithTypeByListenerId(currentUserId,listenerId);
     }
+
+    public LikeStatusDto toggleLike(Long entityId){
+        Long currentUserId=authService.getCurrentUserID();
+
+
+        LikeId likeId=new LikeId(currentUserId,entityId);
+        boolean isLiked;
+        if (likeRepository.existsById(likeId)){
+            likeRepository.deleteById(likeId);
+            isLiked=false;
+        }
+        else{
+            Listener listener=listenerRepository.findById(currentUserId).orElseThrow(
+                    ()->new UserNotFoundException("Listener not found")
+            );
+            MusicalEntity entity=musicalEntityRepository.findById(entityId).orElseThrow(
+                    ()->new MusicalEntityNotFoundException("Entity not found")
+            );
+            likeRepository.save(new Like(entity,listener));
+            isLiked=true;
+        }
+        return new LikeStatusDto(entityId,isLiked,determineType(entityId));
+
+    }
+
+    private String determineType(Long id){
+        if (albumRepository.existsById(id)){
+            return "ALBUM";
+        }else if(songRepository.existsById(id)){
+            return "SONG";
+        }return "UNDEFINED";
+    }
+
 }
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 2730163380202029196d71a92f0cbde3dfdd5b0a)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/ListenerService.java	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
@@ -18,6 +18,6 @@
     private final PlaylistService playlistService;
 
-    public List<MusicalEntityDto> getLikedEntities(Long listenerId) {
-        return  likeService.findLikedEntitiesWithTypeByListenerId(listenerId);
+    public List<MusicalEntityDto> getLikedEntities(Long currentUserId,Long listenerId) {
+        return  likeService.findLikedEntitiesWithTypeByListenerId(currentUserId,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 2730163380202029196d71a92f0cbde3dfdd5b0a)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/NonAdminUserService.java	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
@@ -10,4 +10,5 @@
 import org.springframework.transaction.annotation.Transactional;
 import java.util.List;
+import java.util.Set;
 import java.util.stream.Collectors;
 
@@ -23,4 +24,5 @@
     private final FollowRepository followRepository;
     private final AuthService authService;
+    private final SavedPlaylistRepository savedPlaylistRepository;
 
     @Transactional(readOnly = true)
@@ -53,5 +55,5 @@
       
         if (listenerRepository.existsById(id)) {
-            dto=getListenerProfile(id, followers, following);
+            dto=getListenerProfile(id,currentUserId, followers, following);
             dto.setIsFollowedByCurrentUser(isFollowedByCurrentUser);
             return dto;
@@ -71,10 +73,12 @@
     }
 
-    private NonAdminUserDto getListenerProfile(Long listenerId, Long followers, Long 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));
 
 
-        List<MusicalEntityDto>musicalEntityDtos=listenerService.getLikedEntities(listenerId);
+        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(
@@ -83,5 +87,6 @@
                         p.getCover(),
                         p.getCreatedBy().getNonAdminUser().getUser().getFullName(),
-                        null
+                        null,
+                        savedIds.contains(p.getId())
                 )).toList();
 
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 2730163380202029196d71a92f0cbde3dfdd5b0a)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/PlaylistService.java	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
@@ -6,4 +6,5 @@
 import com.ukim.finki.develop.finkwave.model.dto.PlaylistDto;
 import com.ukim.finki.develop.finkwave.repository.PlaylistRepository;
+import com.ukim.finki.develop.finkwave.repository.SavedPlaylistRepository;
 import com.ukim.finki.develop.finkwave.repository.SongRepository;
 import lombok.AllArgsConstructor;
@@ -12,4 +13,6 @@
 
 import java.util.List;
+import java.util.Set;
+import java.util.stream.Collectors;
 
 @Service
@@ -20,4 +23,5 @@
     private final SongRepository songRepository;
     private final AuthService authService;
+    private final SavedPlaylistRepository savedPlaylistRepository;
 
     public List<Playlist>findByCreatorId(Long id){
@@ -29,4 +33,6 @@
         Playlist playlist = playlistRepository.findById(id).orElseThrow(()-> new PlaylistNotFoundException(id));
         List<MusicalEntityDto>songsInPlaylist=songRepository.findSongsByPlaylistId(id,currentUserId);
+        Set<Long> savedIds = savedPlaylistRepository.findAllByListener_Id(currentUserId)
+                .stream().map(sp -> sp.getPlaylist().getId()).collect(Collectors.toSet());
         return new PlaylistDto(
                 playlist.getId(),
@@ -34,5 +40,7 @@
                 playlist.getCover(),
                 playlist.getCreatedBy().getNonAdminUser().getUser().getFullName(),
-                songsInPlaylist
+                songsInPlaylist,
+                savedIds.contains(playlist.getId())
+
         );
     }
Index: frontend/src/components/userProfile/ArtistView.tsx
===================================================================
--- frontend/src/components/userProfile/ArtistView.tsx	(revision 2730163380202029196d71a92f0cbde3dfdd5b0a)
+++ frontend/src/components/userProfile/ArtistView.tsx	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
@@ -1,5 +1,7 @@
 import { useNavigate } from "react-router-dom";
-import { Music, Disc3 } from "lucide-react";
+import { useState } from "react";
+import { Music, Disc3, Play, Plus } from "lucide-react";
 import type { ArtistContribution } from "../../utils/types";
+import axiosInstance from "../../api/axiosInstance";
 
 interface ArtistViewProps {
@@ -9,42 +11,103 @@
 const ArtistView = ({ contributions }: ArtistViewProps) => {
   const navigate = useNavigate();
-
-  const albums = contributions.filter((c) => c.entityType === "ALBUM");
-  const songs = contributions.filter((c) => c.entityType === "SONG");
+  const [items, setItems] = useState(contributions);
+  const [toast, setToast] = useState<{ message: string; show: boolean }>({
+    message: "",
+    show: false,
+  });
+
+  const albums = items.filter((c) => c.entityType === "ALBUM");
+  const songs = items.filter((c) => c.entityType === "SONG");
 
   const getRoleColor = (role: string) => {
     const colors: { [key: string]: string } = {
-      COMPOSER: "bg-purple-500",
-      PERFORMER: "bg-blue-500",
-      PRODUCER: "bg-green-500",
-      MAIN_VOCAL: "bg-pink-500",
+      COMPOSER: "bg-purple-100 text-purple-700",
+      PERFORMER: "bg-blue-100 text-blue-700",
+      PRODUCER: "bg-green-100 text-green-700",
+      MAIN_VOCAL: "bg-pink-100 text-pink-700",
     };
-    return colors[role] || "bg-gray-500";
+    return colors[role] || "bg-gray-100 text-gray-700";
+  };
+
+  const showToast = (message: string) => {
+    setToast({ message, show: true });
+    setTimeout(() => {
+      setToast({ message: "", show: false });
+    }, 2000);
+  };
+
+  const handleLike = async (id: number, title: string) => {
+    try {
+      const response = await axiosInstance.post(`/musical-entity/${id}/like`);
+      const data = response.data;
+
+      setItems((prevItems) =>
+        prevItems.map((item) =>
+          item.id === data.entityId
+            ? { ...item, isLikedByCurrentUser: data.isLiked }
+            : item,
+        ),
+      );
+
+      showToast(
+        data.isLiked ? `Liked "${title}"` : `Removed ${title} from likes`,
+      );
+    } catch (err: any) {
+      showToast(err.response?.data?.error);
+    }
   };
 
   return (
     <div className="mt-8">
+      {toast.show && (
+        <div className="fixed bottom-8 left-1/2 -translate-x-1/2 z-50 animate-fade-in-up">
+          <div className="bg-gray-900 text-white px-6 py-3 rounded-full shadow-lg text-sm font-medium">
+            {toast.message}
+          </div>
+        </div>
+      )}
+
       {albums.length > 0 && (
         <div className="mb-12">
           <div className="flex items-center gap-3 mb-6">
-            <Disc3 className="w-8 h-8 text-purple-600" />
-            <h2 className="text-3xl font-bold">Albums</h2>
+            <Disc3 className="w-6 h-6 text-gray-700" />
+            <h2 className="text-2xl font-bold text-gray-800">Albums</h2>
           </div>
           <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-            {albums.map((album, index) => (
+            {albums.map((album) => (
               <div
-                key={index}
+                key={album.id}
                 className="group cursor-pointer"
-                onClick={() =>
-                  navigate(`/collection/album/${album.musicalEntityId}`)
-                }
+                onClick={() => navigate(`/collection/album/${album.id}`)}
               >
-                <div className="relative aspect-square bg-linear-to-br from-purple-400 via-pink-400 to-blue-400 rounded-lg mb-3 overflow-hidden shadow-lg group-hover:shadow-2xl transition-all duration-300 group-hover:scale-105">
+                <div className="relative aspect-square bg-gradient-to-br from-blue-400 to-purple-500 rounded-lg mb-3 overflow-hidden shadow-md group-hover:shadow-lg transition-all duration-300">
                   <div className="absolute inset-0 flex items-center justify-center">
-                    <Disc3 className="w-20 h-20 text-white opacity-40" />
-                  </div>
-                  <div className="absolute bottom-0 left-0 right-0 bg-linear-to-t from-black/60 to-transparent p-4">
+                    <Disc3 className="w-16 h-16 text-white opacity-30" />
+                  </div>
+
+                  <button
+                    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 cursor-pointer"
+                    title={album.isLikedByCurrentUser ? "Unlike" : "Like"}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleLike(album.id, album.title);
+                    }}
+                  >
+                    <svg
+                      className="w-5 h-5"
+                      fill={album.isLikedByCurrentUser ? "#ef4444" : "none"}
+                      stroke={
+                        album.isLikedByCurrentUser ? "#ef4444" : "#6b7280"
+                      }
+                      strokeWidth="2"
+                      viewBox="0 0 24 24"
+                    >
+                      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+                    </svg>
+                  </button>
+
+                  <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-3">
                     <span
-                      className={`text-xs px-2 py-1 rounded-full text-white ${getRoleColor(album.role)}`}
+                      className={`text-xs px-2 py-1 rounded-full font-medium ${getRoleColor(album.role)}`}
                     >
                       {album.role.replace("_", " ")}
@@ -52,5 +115,5 @@
                   </div>
                 </div>
-                <h3 className="font-semibold text-base line-clamp-2 group-hover:text-blue-600 transition-colors">
+                <h3 className="font-semibold text-sm line-clamp-2 text-gray-900 group-hover:text-blue-600 transition-colors">
                   {album.title}
                 </h3>
@@ -64,32 +127,68 @@
         <div className="mb-12">
           <div className="flex items-center gap-3 mb-6">
-            <Music className="w-8 h-8 text-blue-600" />
-            <h2 className="text-3xl font-bold">Songs</h2>
+            <Music className="w-6 h-6 text-gray-700" />
+            <h2 className="text-2xl font-bold text-gray-800">Songs</h2>
           </div>
           <div className="space-y-2">
-            {songs.map((song, index) => (
+            {songs.map((song) => (
               <div
-                key={index}
-                className="group flex items-center gap-4 p-4 rounded-lg hover:bg-gray-50 transition-all cursor-pointer border border-transparent hover:border-gray-200"
-                onClick={() =>
-                  navigate(`/musical-entity/${song.musicalEntityId}`)
-                }
+                key={song.id}
+                className="group relative flex items-center gap-4 p-3 rounded-lg hover:bg-gray-50 transition-all cursor-pointer"
+                onClick={() => navigate(`/musical-entity/${song.id}`)}
               >
-                <div className="shrink-0 w-14 h-14 bg-linear-to-br from-blue-400 to-cyan-400 rounded flex items-center justify-center group-hover:scale-110 transition-transform shadow-md">
-                  <Music className="w-7 h-7 text-white" />
-                </div>
+                <div className="relative shrink-0">
+                  <div className="w-12 h-12 bg-gradient-to-br from-blue-400 to-purple-500 rounded flex items-center justify-center shadow-sm">
+                    <Music className="w-6 h-6 text-white" />
+                  </div>
+                  <button
+                    className="absolute inset-0 bg-black/60 rounded flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+                    aria-label="Play song"
+                  >
+                    <Play className="w-6 h-6 text-white fill-white" />
+                  </button>
+                </div>
+
                 <div className="flex-1 min-w-0">
-                  <h3 className="font-semibold text-lg group-hover:text-blue-600 transition-colors truncate">
+                  <h3 className="font-semibold text-base text-gray-900 group-hover:text-blue-600 transition-colors truncate">
                     {song.title}
                   </h3>
                   <div className="flex items-center gap-2 mt-1">
-                    {song.genre}
-                  </div>
-                </div>
+                    <span className="text-sm text-gray-600">{song.genre}</span>
+                  </div>
+                </div>
+
                 <span
-                  className={`px-4 py-2 rounded-full text-white text-sm font-medium ${getRoleColor(song.role)} shadow-md`}
+                  className={`px-3 py-1 rounded-full text-sm font-medium ${getRoleColor(song.role)}`}
                 >
                   {song.role.replace("_", " ")}
                 </span>
+
+                <div className="flex items-center gap-2">
+                  <button
+                    className="p-2 hover:bg-gray-200 rounded-full transition-colors duration-200 cursor-pointer"
+                    title="Add to playlist"
+                  >
+                    <Plus className="w-5 h-5 text-gray-600" />
+                  </button>
+
+                  <button
+                    className="p-2 hover:bg-gray-200 rounded-full transition-colors duration-200 cursor-pointer"
+                    title={song.isLikedByCurrentUser ? "Unlike" : "Like"}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleLike(song.id, song.title);
+                    }}
+                  >
+                    <svg
+                      className="w-5 h-5"
+                      fill={song.isLikedByCurrentUser ? "#ef4444" : "none"}
+                      stroke={song.isLikedByCurrentUser ? "#ef4444" : "#6b7280"}
+                      strokeWidth="2"
+                      viewBox="0 0 24 24"
+                    >
+                      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+                    </svg>
+                  </button>
+                </div>
               </div>
             ))}
@@ -100,6 +199,6 @@
       {contributions.length === 0 && (
         <div className="flex flex-col items-center justify-center py-16 text-gray-400">
-          <Music className="w-24 h-24 mb-4 opacity-20" />
-          <p className="text-xl font-medium">No contributions yet</p>
+          <Music className="w-20 h-20 mb-4 opacity-20" />
+          <p className="text-lg font-medium">No contributions yet</p>
           <p className="text-sm mt-2">Start creating music to see it here</p>
         </div>
Index: frontend/src/components/userProfile/ListenerView.tsx
===================================================================
--- frontend/src/components/userProfile/ListenerView.tsx	(revision 2730163380202029196d71a92f0cbde3dfdd5b0a)
+++ frontend/src/components/userProfile/ListenerView.tsx	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
@@ -1,6 +1,7 @@
 import { useNavigate } from "react-router-dom";
-import { Heart, ListMusic, Music, Album } from "lucide-react";
+import { Heart, ListMusic, Music, Album, Bookmark } from "lucide-react";
 import type { Playlist, MusicalEntity } from "../../utils/types";
-
+import axiosInstance from "../../api/axiosInstance";
+import { useState } from "react";
 interface ListenerViewProps {
   likedEntities: MusicalEntity[] | [];
@@ -10,23 +11,67 @@
 const ListenerView = ({ likedEntities, playlists }: ListenerViewProps) => {
   const navigate = useNavigate();
-
-  const likedSongs = likedEntities?.filter((e) => e.type === "SONG");
-  const likedAlbums = likedEntities?.filter((e) => e.type === "ALBUM");
+  const [items, setItems] = useState(likedEntities);
+  const [toast, setToast] = useState<{ message: string; show: boolean }>({
+    message: "",
+    show: false,
+  });
+
+  const showToast = (message: string) => {
+    setToast({ message, show: true });
+    setTimeout(() => {
+      setToast({ message: "", show: false });
+    }, 2000);
+  };
+
+  const likedSongs = items.filter((e) => e.type === "SONG");
+  const likedAlbums = items.filter((e) => e.type === "ALBUM");
+
+  const handleSavePlaylist = (e: React.MouseEvent, playlistId: number) => {
+    e.stopPropagation();
+
+    console.log("Save playlist:", playlistId);
+  };
+
+  const handleLike = async (id: number, title: string) => {
+    try {
+      const response = await axiosInstance.post(`/musical-entity/${id}/like`);
+      const data = response.data;
+
+      setItems((prevItems) =>
+        prevItems.map((item) =>
+          item.id === data.entityId
+            ? { ...item, isLikedByCurrentUser: data.isLiked }
+            : item,
+        ),
+      );
+
+      showToast(
+        data.isLiked ? `Liked "${title}"` : `Removed "${title}" from likes`,
+      );
+    } catch (err: any) {
+      showToast(err.response?.data?.error);
+    }
+  };
 
   return (
     <div className="mt-8 space-y-12">
+      {toast.show && (
+        <div className="fixed bottom-8 left-1/2 -translate-x-1/2 z-50 animate-fade-in-up">
+          <div className="bg-gray-900 text-white px-6 py-3 rounded-full shadow-lg text-sm font-medium">
+            {toast.message}
+          </div>
+        </div>
+      )}
       {playlists && playlists.length > 0 && (
         <section>
-          <div className="flex items-center gap-2 mb-6 pb-2 border-b-2 border-gray-200">
+          <div className="flex items-center gap-3 mb-6">
             <ListMusic className="w-6 h-6 text-gray-700" />
             <h3 className="text-2xl font-bold text-gray-800">
               Created Playlists
             </h3>
-            <span className="text-sm text-gray-400 ml-1">
-              ({playlists.length})
-            </span>
-          </div>
-
-          <div className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+            <span className="text-sm text-gray-500">({playlists.length})</span>
+          </div>
+
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
             {playlists.map((playlist) => (
               <div
@@ -35,19 +80,37 @@
                 onClick={() => navigate(`/collection/playlist/${playlist.id}`)}
               >
-                <div className="aspect-square rounded-md overflow-hidden bg-gray-100 mb-2 relative shadow-sm group-hover:shadow-lg transition-all">
+                <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 group-hover:opacity-90 transition-opacity"
+                      className="w-full h-full object-cover"
                     />
                   ) : (
-                    <div className="w-full h-full bg-gradient-to-br from-gray-200 to-gray-300 flex items-center justify-center">
-                      <ListMusic className="w-10 h-10 text-gray-400" />
+                    <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>
                   )}
-                </div>
-                <p className="text-sm font-medium text-gray-800 truncate group-hover:text-blue-600 transition-colors">
+
+                  {/* Save button overlay */}
+                  <button
+                    onClick={(e) => handleSavePlaylist(e, playlist.id)}
+                    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"}
+                  >
+                    <Bookmark
+                      className={`w-5 h-5 ${
+                        playlist.isSavedByCurrentUser
+                          ? "fill-blue-600 text-blue-600"
+                          : "text-gray-600"
+                      }`}
+                    />
+                  </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>
@@ -59,31 +122,55 @@
       {likedSongs && likedSongs.length > 0 && (
         <section>
-          <div className="flex items-center gap-2 mb-6 pb-2 border-b-2 border-gray-200">
+          <div className="flex items-center gap-3 mb-6">
             <Heart className="w-6 h-6 text-red-500 fill-red-500" />
             <h3 className="text-2xl font-bold text-gray-800">Liked Songs</h3>
-            <span className="text-sm text-gray-400 ml-1">
+            <span className="text-sm text-gray-500">
               ({likedSongs?.length})
             </span>
           </div>
 
-          <div className="space-y-1">
+          <div className="space-y-2">
             {likedSongs.map((song, index) => (
               <div
                 key={song.id}
-                className="flex items-center gap-4 p-3 rounded hover:bg-gray-50 cursor-pointer group transition-colors"
+                className="flex items-center gap-4 p-3 rounded-lg hover:bg-gray-50 cursor-pointer group transition-colors"
                 onClick={() => navigate(`/musical-entity/${song.id}`)}
               >
-                <span className="text-sm text-gray-400 w-8 text-right font-medium">
+                <span className="text-gray-500 font-medium w-8 text-center">
                   {index + 1}
                 </span>
-                <div className="w-12 h-12 rounded bg-gradient-to-br from-red-100 to-pink-100 flex items-center justify-center flex-shrink-0">
-                  <Music className="w-6 h-6 text-red-600" />
+                <div className="w-12 h-12 rounded bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center flex-shrink-0 shadow-sm">
+                  <Music className="w-6 h-6 text-white" />
                 </div>
                 <div className="flex-1 min-w-0">
-                  <p className="font-medium text-gray-800 truncate group-hover:text-blue-600 transition-colors">
+                  <p className="font-semibold text-gray-900 truncate group-hover:text-blue-600 transition-colors">
                     {song.title}
                   </p>
-                  <p className="text-xs text-gray-500">{song.genre}</p>
-                </div>
+                  <p className="text-sm text-gray-600 truncate">
+                    {song.releasedBy}
+                  </p>
+                </div>
+                <span className="text-sm text-gray-600 px-3 py-1 bg-gray-100 rounded-full">
+                  {song.genre}
+                </span>
+
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleLike(song.id, song.title);
+                  }}
+                  className="p-2 hover:bg-gray-200 rounded-full transition-colors duration-200 cursor-pointer"
+                  title={song.isLikedByCurrentUser ? "Unlike" : "Like"}
+                >
+                  <svg
+                    className="w-5 h-5"
+                    fill={song.isLikedByCurrentUser ? "#ef4444" : "none"}
+                    stroke={song.isLikedByCurrentUser ? "#ef4444" : "#6b7280"}
+                    strokeWidth="2"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+                  </svg>
+                </button>
               </div>
             ))}
@@ -94,13 +181,13 @@
       {likedAlbums && likedAlbums.length > 0 && (
         <section>
-          <div className="flex items-center gap-2 mb-6 pb-2 border-b-2 border-gray-200">
-            <Album className="w-6 h-6 text-blue-600" />
+          <div className="flex items-center gap-3 mb-6">
+            <Album className="w-6 h-6 text-gray-700" />
             <h3 className="text-2xl font-bold text-gray-800">Liked Albums</h3>
-            <span className="text-sm text-gray-400 ml-1">
+            <span className="text-sm text-gray-500">
               ({likedAlbums.length})
             </span>
           </div>
 
-          <div className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-5">
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
             {likedAlbums.map((album) => (
               <div
@@ -109,11 +196,34 @@
                 onClick={() => navigate(`/collection/album/${album.id}`)}
               >
-                <div className="aspect-square rounded-lg overflow-hidden bg-gradient-to-br from-blue-100 to-indigo-100 mb-3 flex items-center justify-center shadow-sm group-hover:shadow-md transition-all">
-                  <Album className="w-16 h-16 text-blue-600 opacity-60" />
-                </div>
-                <p className="font-medium text-sm text-gray-800 truncate group-hover:text-blue-600 transition-colors">
+                <div className="relative aspect-square rounded-lg overflow-hidden bg-gradient-to-br from-blue-400 to-purple-500 mb-3 flex items-center justify-center shadow-md group-hover:shadow-lg transition-all">
+                  <Album className="w-16 h-16 text-white opacity-30" />
+
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleLike(album.id, album.title);
+                    }}
+                    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 cursor-pointer"
+                    title={album.isLikedByCurrentUser ? "Unlike" : "Like"}
+                  >
+                    <svg
+                      className="w-5 h-5"
+                      fill={album.isLikedByCurrentUser ? "#ef4444" : "none"}
+                      stroke={
+                        album.isLikedByCurrentUser ? "#ef4444" : "#6b7280"
+                      }
+                      strokeWidth="2"
+                      viewBox="0 0 24 24"
+                    >
+                      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+                    </svg>
+                  </button>
+                </div>
+                <p className="font-semibold text-sm text-gray-900 truncate group-hover:text-blue-600 transition-colors">
                   {album.title}
                 </p>
-                <p className="text-xs text-gray-500 mt-0.5">{album.genre}</p>
+                <p className="text-xs text-gray-600 truncate mt-1">
+                  {album.releasedBy}
+                </p>
               </div>
             ))}
@@ -125,9 +235,8 @@
         likedEntities.length === 0 &&
         (!playlists || playlists.length === 0) && (
-          <div className="flex flex-col items-center justify-center py-16 text-gray-300">
-            <p className="text-lg font-medium text-gray-400">
-              Nothing here yet
-            </p>
-            <p className="text-sm text-gray-400 mt-1">
+          <div className="flex flex-col items-center justify-center py-16 text-gray-400">
+            <Music className="w-20 h-20 mb-4 opacity-20" />
+            <p className="text-lg font-medium">Nothing here yet</p>
+            <p className="text-sm mt-2">
               Start exploring music to build your collection
             </p>
Index: frontend/src/pages/UserDetail.tsx
===================================================================
--- frontend/src/pages/UserDetail.tsx	(revision 2730163380202029196d71a92f0cbde3dfdd5b0a)
+++ frontend/src/pages/UserDetail.tsx	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
@@ -13,4 +13,10 @@
 } from "../utils/types";
 
+interface FollowStatus {
+  isFollowing: boolean;
+  followerCount: number;
+  followingCount: number;
+}
+
 interface Artist extends BaseNonAdminUser {
   userType: "ARTIST";
@@ -43,12 +49,49 @@
     setIsFollowing(true);
     try {
-      const response = await axiosInstance.post<UserProfile>(
+      const response = await axiosInstance.post<FollowStatus>(
         `/users/${userId}/follow`,
       );
-      setUser(response.data);
+      setUser((prev) => {
+        if (!prev) return null;
+        return {
+          ...prev,
+          isFollowedByCurrentUser: response.data.isFollowing,
+          followers: response.data.followerCount,
+          following: response.data.followingCount,
+        };
+      });
     } catch (err: any) {
       setError(handleError(err));
     } finally {
       setIsFollowing(false);
+    }
+  };
+
+  const handleFollowInModal = async (targetId: number) => {
+    try {
+      const response = await axiosInstance.post<FollowStatus>(
+        `/users/${targetId}/follow`,
+      );
+
+      setModalUsers((prevUsers) =>
+        prevUsers.map((u) =>
+          u.id === targetId
+            ? { ...u, isFollowedByCurrentUser: response.data.isFollowing }
+            : u,
+        ),
+      );
+
+      // if (user && user.id === targetId) {
+      //   setUser((prev) => {
+      //     if (!prev) return null;
+      //     return {
+      //       ...prev,
+      //       isFollowedByCurrentUser: response.data.isFollowing,
+      //       followers: response.data.followerCount,
+      //     };
+      //   });
+      // }
+    } catch (err: any) {
+      setError(handleError(err));
     }
   };
@@ -81,29 +124,4 @@
   };
 
-  const handleFollowInModal = async (targetId: number) => {
-    try {
-      await axiosInstance.post(`/users/${targetId}/follow`);
-      setModalUsers((prevUsers) =>
-        prevUsers.map((u) => {
-          if (u.id === targetId) {
-            const isNowFollowing = !u.isFollowedByCurrentUser;
-            return {
-              ...u,
-              isFollowedByCurrentUser: isNowFollowing,
-            };
-          }
-          return u;
-        }),
-      );
-
-      // if (user && user.id === targetId) {
-      //   const response = await axiosInstance.get(`/users/${targetId}`);
-      //   setUser(response.data);
-      // }
-    } catch (err: any) {
-      setError(handleError(err));
-    }
-  };
-
   useEffect(() => {
     const fetchUser = async () => {
@@ -111,4 +129,5 @@
       try {
         const response = await axiosInstance.get(`/users/${userId}`);
+        console.log(response.data);
         setUser(response.data);
       } catch (err: any) {
Index: frontend/src/utils/types.ts
===================================================================
--- frontend/src/utils/types.ts	(revision 2730163380202029196d71a92f0cbde3dfdd5b0a)
+++ frontend/src/utils/types.ts	(revision d2af1a6462831374bb635fedb32ad46c8129abf2)
@@ -8,5 +8,5 @@
 
 export interface ArtistContribution {
-  musicalEntityId: number;
+  id: number;
   title: string;
   genre: string;
@@ -40,4 +40,5 @@
   creatorName: string;
   songsInPlaylist: Song[];
+  isSavedByCurrentUser: boolean;
 }