Index: frontend/src/components/userProfile/UserListModal.tsx
===================================================================
--- frontend/src/components/userProfile/UserListModal.tsx	(revision 615dceec5ce09f962e30b3bc96b8c511eea814eb)
+++ frontend/src/components/userProfile/UserListModal.tsx	(revision 947fcaadc3ddb75ae7bee1ae398ae0f43c988c1e)
@@ -1,97 +1,97 @@
+import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { baseURL } from "../../api/axiosInstance";
+import { useAuth } from "../../context/authContext";
 import type { BaseNonAdminUser } from "../../utils/types";
-import { useEffect } from "react";
-import { useAuth } from "../../context/authContext";
 
 interface ModalProps {
-  title: string;
-  users: BaseNonAdminUser[];
-  onClose: () => void;
-  onFollowToggle: (targetUsername: string) => Promise<void>;
+	title: string;
+	users: BaseNonAdminUser[];
+	onClose: () => void;
+	onFollowToggle: (targetUsername: string) => Promise<void>;
 }
 
 const UserListModal = ({
-  title,
-  users,
-  onClose,
-  onFollowToggle,
+	title,
+	users,
+	onClose,
+	onFollowToggle,
 }: ModalProps) => {
-  const navigate = useNavigate();
-  const { user } = useAuth();
-  useEffect(() => {
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.body.style.overflow = "";
-    };
-  }, []);
+	const navigate = useNavigate();
+	const { user } = useAuth();
+	useEffect(() => {
+		document.body.style.overflow = "hidden";
+		return () => {
+			document.body.style.overflow = "";
+		};
+	}, []);
 
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
-      <div className="bg-[#1a1a2e] border border-white/10 rounded-xl shadow-2xl w-full max-w-md max-h-[70vh] flex flex-col">
-        <div className="p-4 border-b border-white/10 flex justify-between items-center">
-          <h2 className="text-xl font-bold text-white">{title}</h2>
-          <button
-            onClick={onClose}
-            className="text-gray-400 hover:text-white text-2xl cursor-pointer transition-colors"
-          >
-            &times;
-          </button>
-        </div>
+	return (
+		<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
+			<div className="bg-[#1a1a2e] border border-white/10 rounded-xl shadow-2xl w-full max-w-md max-h-[70vh] flex flex-col">
+				<div className="p-4 border-b border-white/10 flex justify-between items-center">
+					<h2 className="text-xl font-bold text-white">{title}</h2>
+					<button
+						onClick={onClose}
+						className="text-gray-400 hover:text-white text-2xl cursor-pointer transition-colors"
+					>
+						&times;
+					</button>
+				</div>
 
-        <div className="overflow-y-auto p-4 flex-1">
-          {users.length === 0 ? (
-            <p className="text-center text-gray-500 py-8">No users found.</p>
-          ) : (
-            users.map((u) => (
-              <div
-                key={u.username}
-                className="flex items-center justify-between p-3 hover:bg-white/5 rounded-lg transition-colors"
-              >
-                <div
-                  className="flex items-center gap-4 cursor-pointer flex-1"
-                  onClick={() => {
-                    onClose();
-                    navigate(`/users/${u.username}`);
-                  }}
-                >
-                  <div className="w-10 h-10 rounded-full bg-[#282828] overflow-hidden shrink-0 flex items-center justify-center">
-                    {u.profilePhoto ? (
-                      <img
-                        src={`${baseURL}/${u.profilePhoto}`}
-                        className="w-full h-full object-cover"
-                        alt=""
-                      />
-                    ) : (
-                      <span className="text-[#1db954] font-bold">
-                        {u.fullName.charAt(0)}
-                      </span>
-                    )}
-                  </div>
-                  <div>
-                    <p className="font-semibold text-white">{u.fullName}</p>
-                    <p className="text-sm text-gray-400">@{u.username}</p>
-                  </div>
-                </div>
-                {user && (
-                  <button
-                    onClick={() => onFollowToggle(u.username)}
-                    className={`px-4 py-1.5 text-sm font-medium rounded-full transition-colors cursor-pointer ${
-                      u.isFollowedByCurrentUser
-                        ? "bg-white/10 text-white hover:bg-white/20"
-                        : "bg-[#1db954] text-black hover:bg-[#1ed760]"
-                    }`}
-                  >
-                    {u.isFollowedByCurrentUser ? "Following" : "Follow"}
-                  </button>
-                )}
-              </div>
-            ))
-          )}
-        </div>
-      </div>
-      <div className="absolute inset-0 -z-10" onClick={onClose}></div>
-    </div>
-  );
+				<div className="overflow-y-auto p-4 flex-1">
+					{users.length === 0 ? (
+						<p className="text-center text-gray-500 py-8">No users found.</p>
+					) : (
+						users.map((u) => (
+							<div
+								key={u.username}
+								className="flex items-center justify-between p-3 hover:bg-white/5 rounded-lg transition-colors"
+							>
+								<div
+									className="flex items-center gap-4 cursor-pointer flex-1"
+									onClick={() => {
+										onClose();
+										navigate(`/users/${u.username}`);
+									}}
+								>
+									<div className="w-10 h-10 rounded-full bg-[#282828] overflow-hidden shrink-0 flex items-center justify-center">
+										{u.profilePhoto ? (
+											<img
+												src={`${baseURL}/${u.profilePhoto}`}
+												className="w-full h-full object-cover"
+												alt=""
+											/>
+										) : (
+											<span className="text-[#1db954] font-bold">
+												{u.fullName.charAt(0)}
+											</span>
+										)}
+									</div>
+									<div>
+										<p className="font-semibold text-white">{u.fullName}</p>
+										<p className="text-sm text-gray-400">@{u.username}</p>
+									</div>
+								</div>
+								{user && user.username !== u.username && (
+									<button
+										onClick={() => onFollowToggle(u.username)}
+										className={`px-4 py-1.5 text-sm font-medium rounded-full transition-colors cursor-pointer ${
+											u.isFollowedByCurrentUser
+												? "bg-white/10 text-white hover:bg-white/20"
+												: "bg-[#1db954] text-black hover:bg-[#1ed760]"
+										}`}
+									>
+										{u.isFollowedByCurrentUser ? "Following" : "Follow"}
+									</button>
+								)}
+							</div>
+						))
+					)}
+				</div>
+			</div>
+			<div className="absolute inset-0 -z-10" onClick={onClose}></div>
+		</div>
+	);
 };