Index: frontend/src/components/userProfile/UserDetailView.tsx
===================================================================
--- frontend/src/components/userProfile/UserDetailView.tsx	(revision a3ae097ff557650aeeb473a86f99d8430c23d60d)
+++ frontend/src/components/userProfile/UserDetailView.tsx	(revision 0f71490112c86ba2e2d18bbf12dac1b42e534433)
@@ -3,25 +3,8 @@
 import ArtistView from "./ArtistView";
 import ListenerView from "./ListenerView";
-
-interface MusicalEntityDTO {
-  id: number;
-  title: string;
-  genre: string;
-  type: string;
-}
-
-interface ArtistContributionDTO {
-  musicalEntityId: number;
-  title: string;
-  role: string;
-  entityType: string;
-}
-
-interface Playlist {
-  id: number;
-  name: string;
-  cover: string;
-  creatorName: string;
-}
+import axiosInstance from "../../api/axiosInstance";
+import type { ArtistContributionDTO } from "../../types";
+import type { MusicalEntityDTO } from "../../types";
+import type { Playlist } from "../../types";
 
 interface User {
@@ -32,4 +15,5 @@
   followers: number;
   following: number;
+  isFollowedByCurrentUser: boolean;
 
   musicalEntities?: {
@@ -45,4 +29,5 @@
 
 const UserDetail = () => {
+  // user refers to the selected user NOT to the user from context
   const { userId } = useParams();
   const navigate = useNavigate();
@@ -54,15 +39,11 @@
       setError(null);
       try {
-        const response = await fetch(`http://localhost:8080/users/${userId}`);
+        const response = await axiosInstance.get(`/users/${userId}`);
 
-        if (!response.ok) {
-          const errorData = await response.json();
-          throw new Error(errorData.error || "Failed to fetch user");
-        }
-
-        const data = await response.json();
-        setUser(data);
+        setUser(response.data);
       } catch (err: any) {
-        setError(err.message);
+        const errorMessage =
+          err.response?.data?.error || "Failed to fetch user";
+        setError(errorMessage);
       }
     };
@@ -115,6 +96,6 @@
             </div>
 
-            <button className="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors font-medium">
-              Follow
+            <button className="px-6 py-2 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg shadow-md transition-colors duration-200 cursor-pointer">
+              {user.isFollowedByCurrentUser ? "Unfollow" : "Follow"}
             </button>
           </div>