Index: frontend/src/components/userProfile/AllUsersHelper.tsx
===================================================================
--- frontend/src/components/userProfile/AllUsersHelper.tsx	(revision 0f71490112c86ba2e2d18bbf12dac1b42e534433)
+++ 	(revision )
@@ -1,87 +1,0 @@
-import React, { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import axiosInstance from "../../api/axiosInstance";
-interface User {
-  id: number;
-  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();
-
-  useEffect(() => {
-    const fetchUsers = async () => {
-      const response = axiosInstance.get("/users/all");
-      setUsers((await response).data);
-    };
-    fetchUsers();
-  }, []);
-
-  const handleUserClick = (userId: number) => {
-    navigate(`/users/${userId}`);
-  };
-
-  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>
-    );
-  }
-
-  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>
-  );
-};
-
-export default AllUsers;
Index: frontend/src/components/userProfile/UserDetailView.tsx
===================================================================
--- frontend/src/components/userProfile/UserDetailView.tsx	(revision 0f71490112c86ba2e2d18bbf12dac1b42e534433)
+++ 	(revision )
@@ -1,119 +1,0 @@
-import { useEffect, useState } from "react";
-import { useParams, useNavigate } from "react-router-dom";
-import ArtistView from "./ArtistView";
-import ListenerView from "./ListenerView";
-import axiosInstance from "../../api/axiosInstance";
-import type { ArtistContributionDTO } from "../../types";
-import type { MusicalEntityDTO } from "../../types";
-import type { Playlist } from "../../types";
-
-interface User {
-  id: number;
-  username: string;
-  fullName: string;
-  userType: string;
-  followers: number;
-  following: number;
-  isFollowedByCurrentUser: boolean;
-
-  musicalEntities?: {
-    contributions: ArtistContributionDTO[];
-  };
-
-  likes?: {
-    likedEntities: MusicalEntityDTO[];
-  };
-
-  createdPlaylists?: Playlist[];
-}
-
-const UserDetail = () => {
-  // user refers to the selected user NOT to the user from context
-  const { userId } = useParams();
-  const navigate = useNavigate();
-  const [user, setUser] = useState<User | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    const fetchUser = async () => {
-      setError(null);
-      try {
-        const response = await axiosInstance.get(`/users/${userId}`);
-
-        setUser(response.data);
-      } catch (err: any) {
-        const errorMessage =
-          err.response?.data?.error || "Failed to fetch user";
-        setError(errorMessage);
-      }
-    };
-    fetchUser();
-  }, [userId]);
-
-  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">
-      <button
-        onClick={() => navigate(-1)}
-        className="mb-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
-      >
-        ← 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">
-              {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">
-                <span className="text-2xl font-bold">{user.followers}</span>
-                <span className="text-sm text-gray-500">Followers</span>
-              </div>
-              <div className="flex flex-col">
-                <span className="text-2xl font-bold">{user.following}</span>
-                <span className="text-sm text-gray-500">Following</span>
-              </div>
-            </div>
-
-            <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>
-        </div>
-
-        {user.userType === "ARTIST" && user.musicalEntities?.contributions && (
-          <ArtistView contributions={user.musicalEntities.contributions} />
-        )}
-
-        {user.userType === "LISTENER" && user.likes?.likedEntities && (
-          <ListenerView
-            likedEntities={user.likes.likedEntities}
-            playlists={user.createdPlaylists}
-          />
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default UserDetail;