Index: frontend/src/pages/UserDetail.tsx
===================================================================
--- frontend/src/pages/UserDetail.tsx	(revision 0792d02b326867cae564f7072133934be31d9dee)
+++ frontend/src/pages/UserDetail.tsx	(revision cb4a1da079608fdb022036c90eb6e41f26046827)
@@ -7,25 +7,25 @@
 import { handleError } from "../utils/error";
 import type {
-  MusicalEntity,
-  Playlist,
-  ArtistContribution,
-  BaseNonAdminUser,
+	ArtistContribution,
+	BaseNonAdminUser,
+	MusicalEntity,
+	Playlist,
 } from "../utils/types";
 
 interface FollowStatus {
-  isFollowing: boolean;
-  followerCount: number;
-  followingCount: number;
+	isFollowing: boolean;
+	followerCount: number;
+	followingCount: number;
 }
 
 interface Artist extends BaseNonAdminUser {
-  userType: "ARTIST";
-  contributions: ArtistContribution[];
+	userType: "ARTIST";
+	contributions: ArtistContribution[];
 }
 interface Listener extends BaseNonAdminUser {
-  userType: "LISTENER";
-  likedEntities: MusicalEntity[];
-  createdPlaylists: Playlist[];
-  savedPlaylists: Playlist[];
+	userType: "LISTENER";
+	likedEntities: MusicalEntity[];
+	createdPlaylists: Playlist[];
+	savedPlaylists: Playlist[];
 }
 
@@ -33,221 +33,225 @@
 
 const UserDetail = () => {
-  // user refers to the selected user NOT to the user from context
-  const baseURL = import.meta.env.VITE_API_BASE_URL;
-  const { username } = useParams();
-  const navigate = useNavigate();
-  const [user, setUser] = useState<UserProfile | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [showModal, setShowModal] = useState(false);
-  const [modalTitle, setModalTitle] = useState("");
-  const [modalUsers, setModalUsers] = useState<any[]>([]);
-  const [isLoadingModal, setIsLoadingModal] = useState(false);
-  const [isFollowing, setIsFollowing] = useState(false);
-
-  const handleFollow = async () => {
-    if (!user) return;
-
-    setIsFollowing(true);
-    try {
-      const response = await axiosInstance.post<FollowStatus>(
-        `/users/${username}/follow`,
-      );
-      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 (targetUsername: string) => {
-    try {
-      const response = await axiosInstance.post<FollowStatus>(
-        `/users/${username}/follow`,
-      );
-
-      setModalUsers((prevUsers) =>
-        prevUsers.map((u) =>
-          u.username === targetUsername
-            ? { ...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));
-    }
-  };
-
-  const displayFollowers = async () => {
-    setIsLoadingModal(true);
-    try {
-      const response = await axiosInstance.get(`/users/${username}/followers`);
-      setModalUsers(response.data);
-      setModalTitle("Followers");
-      setShowModal(true);
-    } catch (err) {
-      setError(handleError(err));
-    } finally {
-      setIsLoadingModal(false);
-    }
-  };
-  const displayFollowing = async () => {
-    setIsLoadingModal(true);
-    try {
-      const response = await axiosInstance.get(`/users/${username}/following`);
-      setModalUsers(response.data);
-      setModalTitle("Following");
-      setShowModal(true);
-    } catch (err: any) {
-      setError(handleError(err));
-    } finally {
-      setIsLoadingModal(false);
-    }
-  };
-
-  useEffect(() => {
-    const fetchUser = async () => {
-      setError(null);
-      try {
-        const response = await axiosInstance.get(`/users/${username}`);
-        console.log(response.data);
-        setUser(response.data);
-      } catch (err: any) {
-        setError(handleError(err));
-      }
-    };
-    fetchUser();
-  }, [username]);
-
-  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 (!user) return <div className="p-6">Loading...</div>;
-
-  return (
-    <div className="container mx-auto p-6">
-      {isLoadingModal && (
-        <div className="fixed inset-0 z-40 bg-black/30 backdrop-blur-sm flex items-center justify-center">
-          <div className="flex items-center gap-3">
-            <div className="w-6 h-6 border-3 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
-          </div>
-        </div>
-      )}
-      <button
-        onClick={() => navigate(-1)}
-        className="mb-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors duration-200 cursor-pointer"
-      >
-        ← Back
-      </button>
-
-      <div className="bg-white shadow-lg rounded-lg p-8">
-        <div className="flex items-start gap-6 mb-8">
-          <div className="shrink-0">
-            <div className="w-32 h-32 rounded-full bg-linear-to-br from-blue-400 to-purple-500 flex items-center justify-center text-white text-4xl font-bold shadow-lg overflow-hidden">
-              {user.profilePhoto ? (
-                <img
-                  src={`${baseURL}/${user.profilePhoto}`}
-                  alt={user.fullName}
-                  className="w-full h-full object-cover"
-                />
-              ) : (
-                user.fullName.charAt(0).toUpperCase()
-              )}
-            </div>
-          </div>
-
-          <div className="flex-1">
-            <h1 className="text-4xl font-bold mb-2">{user.fullName}</h1>
-            <span className="inline-block px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium mb-4">
-              {user.userType}
-            </span>
-
-            <div className="flex gap-6 mb-4 text-gray-700">
-              <div
-                className={`flex flex-col ${user.userType == "LISTENER" ? "cursor-pointer" : "cursor-default"}`}
-                onClick={
-                  user.userType === "LISTENER" ? displayFollowers : undefined
-                }
-              >
-                <span className="text-2xl font-bold">{user.followers}</span>
-                <span className="text-sm text-gray-500">Followers</span>
-              </div>
-              <div
-                className={`flex flex-col ${user.userType == "LISTENER" ? "cursor-pointer" : "cursor-default"}`}
-                onClick={
-                  user.userType === "LISTENER" ? displayFollowing : undefined
-                }
-              >
-                <span className="text-2xl font-bold">{user.following}</span>
-                <span className="text-sm text-gray-500">Following</span>
-              </div>
-            </div>
-
-            <button
-              onClick={handleFollow}
-              disabled={isFollowing}
-              className={`
+	// user refers to the selected user NOT to the user from context
+	const baseURL = import.meta.env.VITE_API_BASE_URL;
+	const { username } = useParams();
+	const navigate = useNavigate();
+	const [user, setUser] = useState<UserProfile | null>(null);
+	const [error, setError] = useState<string | null>(null);
+	const [showModal, setShowModal] = useState(false);
+	const [modalTitle, setModalTitle] = useState("");
+	const [modalUsers, setModalUsers] = useState<any[]>([]);
+	const [isLoadingModal, setIsLoadingModal] = useState(false);
+	const [isFollowing, setIsFollowing] = useState(false);
+
+	const handleFollow = async () => {
+		if (!user) return;
+
+		setIsFollowing(true);
+		try {
+			const response = await axiosInstance.post<FollowStatus>(
+				`/users/na/${username}/follow`,
+			);
+			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 (targetUsername: string) => {
+		try {
+			const response = await axiosInstance.post<FollowStatus>(
+				`/users/na/${username}/follow`,
+			);
+
+			setModalUsers((prevUsers) =>
+				prevUsers.map((u) =>
+					u.username === targetUsername
+						? { ...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));
+		}
+	};
+
+	const displayFollowers = async () => {
+		setIsLoadingModal(true);
+		try {
+			const response = await axiosInstance.get(
+				`/users/na/${username}/followers`,
+			);
+			setModalUsers(response.data);
+			setModalTitle("Followers");
+			setShowModal(true);
+		} catch (err) {
+			setError(handleError(err));
+		} finally {
+			setIsLoadingModal(false);
+		}
+	};
+	const displayFollowing = async () => {
+		setIsLoadingModal(true);
+		try {
+			const response = await axiosInstance.get(
+				`/users/na/${username}/following`,
+			);
+			setModalUsers(response.data);
+			setModalTitle("Following");
+			setShowModal(true);
+		} catch (err: any) {
+			setError(handleError(err));
+		} finally {
+			setIsLoadingModal(false);
+		}
+	};
+
+	useEffect(() => {
+		const fetchUser = async () => {
+			setError(null);
+			try {
+				const response = await axiosInstance.get(`/users/na/${username}`);
+				console.log(response.data);
+				setUser(response.data);
+			} catch (err: any) {
+				setError(handleError(err));
+			}
+		};
+		fetchUser();
+	}, [username]);
+
+	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 (!user) return <div className="p-6">Loading...</div>;
+
+	return (
+		<div className="container mx-auto p-6">
+			{isLoadingModal && (
+				<div className="fixed inset-0 z-40 bg-black/30 backdrop-blur-sm flex items-center justify-center">
+					<div className="flex items-center gap-3">
+						<div className="w-6 h-6 border-3 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
+					</div>
+				</div>
+			)}
+			<button
+				onClick={() => navigate(-1)}
+				className="mb-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors duration-200 cursor-pointer"
+			>
+				← Back
+			</button>
+
+			<div className="bg-white shadow-lg rounded-lg p-8">
+				<div className="flex items-start gap-6 mb-8">
+					<div className="shrink-0">
+						<div className="w-32 h-32 rounded-full bg-linear-to-br from-blue-400 to-purple-500 flex items-center justify-center text-white text-4xl font-bold shadow-lg overflow-hidden">
+							{user.profilePhoto ? (
+								<img
+									src={`${baseURL}/${user.profilePhoto}`}
+									alt={user.fullName}
+									className="w-full h-full object-cover"
+								/>
+							) : (
+								user.fullName.charAt(0).toUpperCase()
+							)}
+						</div>
+					</div>
+
+					<div className="flex-1">
+						<h1 className="text-4xl font-bold mb-2">{user.fullName}</h1>
+						<span className="inline-block px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium mb-4">
+							{user.userType}
+						</span>
+
+						<div className="flex gap-6 mb-4 text-gray-700">
+							<div
+								className={`flex flex-col ${user.userType == "LISTENER" ? "cursor-pointer" : "cursor-default"}`}
+								onClick={
+									user.userType === "LISTENER" ? displayFollowers : undefined
+								}
+							>
+								<span className="text-2xl font-bold">{user.followers}</span>
+								<span className="text-sm text-gray-500">Followers</span>
+							</div>
+							<div
+								className={`flex flex-col ${user.userType == "LISTENER" ? "cursor-pointer" : "cursor-default"}`}
+								onClick={
+									user.userType === "LISTENER" ? displayFollowing : undefined
+								}
+							>
+								<span className="text-2xl font-bold">{user.following}</span>
+								<span className="text-sm text-gray-500">Following</span>
+							</div>
+						</div>
+
+						<button
+							onClick={handleFollow}
+							disabled={isFollowing}
+							className={`
                 px-6 py-2 font-semibold rounded-lg shadow-md 
                 transition-colors duration-200
                 ${
-                  isFollowing
-                    ? "bg-gray-400 text-gray-200 cursor-not-allowed"
-                    : user.isFollowedByCurrentUser
-                      ? "bg-gray-200 text-gray-700 hover:bg-gray-300 cursor-pointer"
-                      : "bg-blue-500 text-white hover:bg-blue-600 cursor-pointer"
-                }
+									isFollowing
+										? "bg-gray-400 text-gray-200 cursor-not-allowed"
+										: user.isFollowedByCurrentUser
+											? "bg-gray-200 text-gray-700 hover:bg-gray-300 cursor-pointer"
+											: "bg-blue-500 text-white hover:bg-blue-600 cursor-pointer"
+								}
               `}
-            >
-              {user.isFollowedByCurrentUser ? "Unfollow" : "Follow"}
-            </button>
-          </div>
-        </div>
-
-        {user.userType === "ARTIST" ? (
-          <ArtistView contributions={user.contributions} />
-        ) : (
-          <ListenerView
-            likedEntities={user.likedEntities}
-            createdPlaylists={user.createdPlaylists}
-            savedPlaylists={user.savedPlaylists}
-          />
-        )}
-
-        {showModal && (
-          <UserListModal
-            title={modalTitle}
-            users={modalUsers}
-            onClose={() => setShowModal(false)}
-            onFollowToggle={handleFollowInModal}
-          />
-        )}
-      </div>
-    </div>
-  );
+						>
+							{user.isFollowedByCurrentUser ? "Unfollow" : "Follow"}
+						</button>
+					</div>
+				</div>
+
+				{user.userType === "ARTIST" ? (
+					<ArtistView contributions={user.contributions} />
+				) : (
+					<ListenerView
+						likedEntities={user.likedEntities}
+						createdPlaylists={user.createdPlaylists}
+						savedPlaylists={user.savedPlaylists}
+					/>
+				)}
+
+				{showModal && (
+					<UserListModal
+						title={modalTitle}
+						users={modalUsers}
+						onClose={() => setShowModal(false)}
+						onFollowToggle={handleFollowInModal}
+					/>
+				)}
+			</div>
+		</div>
+	);
 };