Index: frontend/src/pages/AllUsers.tsx
===================================================================
--- frontend/src/pages/AllUsers.tsx	(revision 4e5cf92d976588170fa715007a49de90e673172a)
+++ frontend/src/pages/AllUsers.tsx	(revision 0792d02b326867cae564f7072133934be31d9dee)
@@ -4,84 +4,82 @@
 
 interface User {
-	id: number;
-	username: string;
-	fullName: string;
+  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();
+  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();
-	}, []);
+  useEffect(() => {
+    const fetchUsers = async () => {
+      const response = axiosInstance.get("/users/all");
+      setUsers((await response).data);
+    };
+    fetchUsers();
+  }, []);
 
-	const handleUserClick = (userId: number) => {
-		navigate(`/users/${userId}`);
-	};
+  const handleUserClick = (username: string) => {
+    navigate(`/users/${username}`);
+  };
 
-	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);
-		}
-	};
+  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>
-		);
-	}
+  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>
+  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>
-	);
+      <div className="grid gap-4">
+        {users.map((u) => (
+          <div
+            key={u.username}
+            onClick={() => handleUserClick(u.username)}
+            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>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
 };