diff --git a/src/frontend/src/controllers/API/queries/auth/use-get-users-page.ts b/src/frontend/src/controllers/API/queries/auth/use-get-users-page.ts
index 96a0e9ada..e35276c94 100644
--- a/src/frontend/src/controllers/API/queries/auth/use-get-users-page.ts
+++ b/src/frontend/src/controllers/API/queries/auth/use-get-users-page.ts
@@ -1,21 +1,27 @@
-import { keepPreviousData } from "@tanstack/react-query";
-import { Users, useQueryFunctionType } from "../../../../types/api";
+import { keepPreviousData, UseMutationResult } from "@tanstack/react-query";
+import {
+  useMutationFunctionType,
+  useQueryFunctionType,
+  Users,
+} from "../../../../types/api";
 import { api } from "../../api";
 import { getURL } from "../../helpers/constants";
 import { UseRequestProcessor } from "../../services/request-processor";
 
-interface getUsersPageQueryParams {
+interface getUsersQueryParams {
   skip: number;
   limit: number;
 }
 
-export const useGetUserPage: useQueryFunctionType<
-  getUsersPageQueryParams,
-  Users
-> = ({ skip, limit }) => {
-  const { query } = UseRequestProcessor();
+export const useGetUsers: useMutationFunctionType<any, getUsersQueryParams> = (
+  options?,
+) => {
+  const { mutate } = UseRequestProcessor();
 
-  async function getUsersPage(): Promise<Array<Users>> {
+  async function getUsers({
+    skip,
+    limit,
+  }: getUsersQueryParams): Promise<Array<Users>> {
     const res = await api.get(
       `${getURL("USERS")}/?skip=${skip}&limit=${limit}`,
     );
@@ -25,9 +31,11 @@ export const useGetUserPage: useQueryFunctionType<
     return [];
   }
 
-  const queryResult = query(["useGetUserPage"], getUsersPage, {
-    placeholderData: keepPreviousData,
-  });
+  const mutation: UseMutationResult<
+    getUsersQueryParams,
+    any,
+    getUsersQueryParams
+  > = mutate(["useRefreshAccessToken"], getUsers, options);
 
-  return queryResult;
+  return mutation;
 };
diff --git a/src/frontend/src/pages/AdminPage/index.tsx b/src/frontend/src/pages/AdminPage/index.tsx
index 8a7912674..e715340d4 100644
--- a/src/frontend/src/pages/AdminPage/index.tsx
+++ b/src/frontend/src/pages/AdminPage/index.tsx
@@ -1,6 +1,7 @@
 import {
   useAddUser,
   useDeleteUsers,
+  useGetUsers,
   useUpdateUser,
 } from "@/controllers/API/queries/auth";
 import { cloneDeep } from "lodash";
@@ -34,7 +35,6 @@ import {
   ADMIN_HEADER_TITLE,
 } from "../../constants/constants";
 import { AuthContext } from "../../contexts/authContext";
-import { getUsersPage } from "../../controllers/API";
 import ConfirmationModal from "../../modals/confirmationModal";
 import UserManagementModal from "../../modals/userManagementModal";
 import useAlertStore from "../../stores/alertStore";
@@ -47,7 +47,6 @@ export default function AdminPage() {
 
   const [size, setPageSize] = useState(12);
   const [index, setPageIndex] = useState(1);
-  const [loadingUsers, setLoadingUsers] = useState(true);
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const { userData } = useContext(AuthContext);
@@ -75,39 +74,47 @@ export default function AdminPage() {
 
   const [filterUserList, setFilterUserList] = useState(userList.current);
 
+  const { mutate: mutateGetUsers, isPending } = useGetUsers({});
+
   function getUsers() {
-    setLoadingUsers(true);
-    getUsersPage(index - 1, size)
-      .then((users) => {
-        setTotalRowsCount(users["total_count"]);
-        userList.current = users["users"];
-        setFilterUserList(users["users"]);
-        setLoadingUsers(false);
-      })
-      .catch((error) => {
-        setLoadingUsers(false);
-      });
+    mutateGetUsers(
+      {
+        skip: size * (index - 1),
+        limit: size,
+      },
+      {
+        onSuccess: (users) => {
+          setTotalRowsCount(users["total_count"]);
+          userList.current = users["users"];
+          setFilterUserList(users["users"]);
+        },
+        onError: () => {},
+      },
+    );
   }
 
   function handleChangePagination(pageIndex: number, pageSize: number) {
-    setLoadingUsers(true);
     setPageSize(pageSize);
     setPageIndex(pageIndex);
-    getUsersPage(pageSize * (pageIndex - 1), pageSize)
-      .then((users) => {
-        setTotalRowsCount(users["total_count"]);
-        userList.current = users["users"];
-        setFilterUserList(users["users"]);
-        setLoadingUsers(false);
-      })
-      .catch((error) => {
-        setLoadingUsers(false);
-      });
+
+    mutateGetUsers(
+      {
+        skip: pageSize * (pageIndex - 1),
+        limit: pageSize,
+      },
+      {
+        onSuccess: (users) => {
+          setTotalRowsCount(users["total_count"]);
+          userList.current = users["users"];
+          setFilterUserList(users["users"]);
+        },
+      },
+    );
   }
 
   function resetFilter() {
     setPageIndex(1);
-    setPageSize(10);
+    setPageSize(12);
     getUsers();
   }
 
@@ -302,7 +309,7 @@ export default function AdminPage() {
               </UserManagementModal>
             </div>
           </div>
-          {loadingUsers ? (
+          {isPending ? (
             <div className="flex h-full w-full items-center justify-center">
               <LoadingComponent remSize={12} />
             </div>
@@ -317,13 +324,13 @@ export default function AdminPage() {
               <div
                 className={
                   "m-4 h-full overflow-x-hidden overflow-y-scroll rounded-md border-2 bg-background custom-scroll" +
-                  (loadingUsers ? " border-0" : "")
+                  (isPending ? " border-0" : "")
                 }
               >
                 <Table className={"table-fixed outline-1"}>
                   <TableHeader
                     className={
-                      loadingUsers ? "hidden" : "table-fixed bg-muted outline-1"
+                      isPending ? "hidden" : "table-fixed bg-muted outline-1"
                     }
                   >
                     <TableRow>
@@ -336,7 +343,7 @@ export default function AdminPage() {
                       <TableHead className="h-10 w-[100px] text-right"></TableHead>
                     </TableRow>
                   </TableHeader>
-                  {!loadingUsers && (
+                  {!isPending && (
                     <TableBody>
                       {filterUserList.map((user: UserInputType, index) => (
                         <TableRow key={index}>