diff --git a/src/frontend/src/components/catchAllRoutes/index.tsx b/src/frontend/src/components/catchAllRoutes/index.tsx
index f6fc70883..06faa9099 100644
--- a/src/frontend/src/components/catchAllRoutes/index.tsx
+++ b/src/frontend/src/components/catchAllRoutes/index.tsx
@@ -6,7 +6,7 @@ export const CatchAllRoute = () => {
 
   // Redirect to the root ("/") when the catch-all route is matched
   useEffect(() => {
-    navigate('/');
+    navigate("/");
   }, []);
 
   return null;
diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index b69fa5608..7c2e0d822 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -34,7 +34,7 @@ export default function Header() {
   return (
     <div className="header-arrangement">
       <div className="header-start-display">
-      <Link to="/">
+        <Link to="/">
           <span className="ml-4 text-2xl">⛓️</span>
         </Link>
         <Button
diff --git a/src/frontend/src/controllers/API/api.tsx b/src/frontend/src/controllers/API/api.tsx
index 132c3e29a..dad3b3b41 100644
--- a/src/frontend/src/controllers/API/api.tsx
+++ b/src/frontend/src/controllers/API/api.tsx
@@ -47,14 +47,11 @@ function ApiInterceptor() {
                 navigate("/login");
               }
             }
-          } 
-          
-          if(!refreshToken && error?.config?.url?.includes(
-            "login"
-          ) ){
-            return Promise.reject(error);
           }
-          else{
+
+          if (!refreshToken && error?.config?.url?.includes("login")) {
+            return Promise.reject(error);
+          } else {
             logout();
             navigate("/login");
           }
@@ -63,7 +60,6 @@ function ApiInterceptor() {
           return Promise.reject(error);
           // }
         }
-
       }
     );
 
diff --git a/src/frontend/src/modals/UserManagementModal/index.tsx b/src/frontend/src/modals/UserManagementModal/index.tsx
index 8a75a20d7..cb48ec872 100644
--- a/src/frontend/src/modals/UserManagementModal/index.tsx
+++ b/src/frontend/src/modals/UserManagementModal/index.tsx
@@ -12,7 +12,6 @@ import {
 } from "../../types/components";
 import { nodeIconsLucide } from "../../utils/styleUtils";
 import BaseModal from "../baseModal";
-import InputComponent from "../../components/inputComponent";
 
 export default function UserManagementModal({
   title,
diff --git a/src/frontend/src/pages/AdminPage/index.tsx b/src/frontend/src/pages/AdminPage/index.tsx
index 486f5bb56..28d078496 100644
--- a/src/frontend/src/pages/AdminPage/index.tsx
+++ b/src/frontend/src/pages/AdminPage/index.tsx
@@ -15,6 +15,7 @@ import {
   TableRow,
 } from "../../components/ui/table";
 import { alertContext } from "../../contexts/alertContext";
+import { AuthContext } from "../../contexts/authContext";
 import {
   addUser,
   deleteUser,
@@ -23,7 +24,6 @@ import {
 } from "../../controllers/API";
 import ConfirmationModal from "../../modals/ConfirmationModal";
 import UserManagementModal from "../../modals/UserManagementModal";
-import { AuthContext } from "../../contexts/authContext";
 
 export default function AdminPage() {
   const [inputValue, setInputValue] = useState("");
@@ -49,9 +49,9 @@ export default function AdminPage() {
     setLoadingUsers(true);
     getUsersPage(index, size)
       .then((users) => {
-        setTotalRowsCount(users['total_count']);
-        userList.current = users['users'];
-        setFilterUserList(users['users']);
+        setTotalRowsCount(users["total_count"]);
+        userList.current = users["users"];
+        setFilterUserList(users["users"]);
         setLoadingUsers(false);
       })
       .catch((error) => {
@@ -140,214 +140,208 @@ export default function AdminPage() {
   }
 
   return (
-
     <>
-        {
-      userData && (
-
-    
+      {userData && (
         <div className="main-page-panel">
-        <div className="m-auto flex h-full flex-row justify-center">
-          <div className="basis-5/6">
-            <div className="m-auto flex h-full flex-col space-y-8 p-8 ">
-              <div className="flex items-center justify-between space-y-2">
-                <div>
-                  <h2 className="text-2xl font-bold tracking-tight">
-                    Welcome back!
-                  </h2>
-                  <p className="text-muted-foreground">
-                    Here&apos;s a list of all users!
-                  </p>
+          <div className="m-auto flex h-full flex-row justify-center">
+            <div className="basis-5/6">
+              <div className="m-auto flex h-full flex-col space-y-8 p-8 ">
+                <div className="flex items-center justify-between space-y-2">
+                  <div>
+                    <h2 className="text-2xl font-bold tracking-tight">
+                      Welcome back!
+                    </h2>
+                    <p className="text-muted-foreground">
+                      Here&apos;s a list of all users!
+                    </p>
+                  </div>
+                  <div className="flex items-center space-x-2"></div>
                 </div>
-                <div className="flex items-center space-x-2"></div>
-              </div>
 
-              {userList.current.length === 0 && !loadingUsers && (
+                {userList.current.length === 0 && !loadingUsers && (
+                  <>
+                    <div className="flex items-center justify-between">
+                      <h2>There's no users registered :)</h2>
+                    </div>
+                  </>
+                )}
                 <>
                   <div className="flex items-center justify-between">
-                    <h2>There's no users registered :)</h2>
-                  </div>
-                </>
-              )}
-              <>
-                <div className="flex items-center justify-between">
-                  <div className="flex flex-1 items-center space-x-2">
-                    <Input
-                      value={inputValue}
-                      placeholder="Filter users..."
-                      className="h-8 w-[150px] lg:w-[250px]"
-                      onChange={(e) => handleFilterUsers(e.target.value)}
-                    />
-                    {inputValue.length > 0 && (
-                      <Button
-                        onClick={() => {
-                          setInputValue("");
-                          setFilterUserList(userList.current);
+                    <div className="flex flex-1 items-center space-x-2">
+                      <Input
+                        value={inputValue}
+                        placeholder="Filter users..."
+                        className="h-8 w-[150px] lg:w-[250px]"
+                        onChange={(e) => handleFilterUsers(e.target.value)}
+                      />
+                      {inputValue.length > 0 && (
+                        <Button
+                          onClick={() => {
+                            setInputValue("");
+                            setFilterUserList(userList.current);
+                          }}
+                          variant="ghost"
+                          className="h-8 px-2 lg:px-3"
+                        >
+                          Reset
+                          <X className="ml-2 h-4 w-4" />
+                        </Button>
+                      )}
+                    </div>
+                    <div>
+                      <UserManagementModal
+                        title="New User"
+                        titleHeader={"Add a new user"}
+                        cancelText="Cancel"
+                        confirmationText="Save"
+                        icon={"UserPlus2"}
+                        onConfirm={(index, user) => {
+                          handleNewUser(user);
                         }}
-                        variant="ghost"
-                        className="h-8 px-2 lg:px-3"
                       >
-                        Reset
-                        <X className="ml-2 h-4 w-4" />
-                      </Button>
-                    )}
+                        <Button>New User</Button>
+                      </UserManagementModal>
+                    </div>
                   </div>
-                  <div>
-                    <UserManagementModal
-                      title="New User"
-                      titleHeader={"Add a new user"}
-                      cancelText="Cancel"
-                      confirmationText="Save"
-                      icon={"UserPlus2"}
-                      onConfirm={(index, user) => {
-                        handleNewUser(user);
-                      }}
-                    >
-                      <Button>New User</Button>
-                    </UserManagementModal>
-                  </div>
-                </div>
-                {loadingUsers && (
-                  <div>
-                    <strong>Loading...</strong>
-                  </div>
-                )}
-                <div
-                  className={
-                    "max-h-[26rem] overflow-scroll overflow-x-hidden rounded-md border-2 bg-muted custom-scroll" +
-                    (loadingUsers ? " border-0" : "")
-                  }
-                >
-                  <Table className={"table-fixed bg-muted outline-1"}>
-                    <TableHeader
-                      className={
-                        loadingUsers
-                          ? "hidden"
-                          : "table-fixed bg-muted outline-1"
-                      }
-                    >
-                      <TableRow>
-                        <TableHead className="h-10">Id</TableHead>
-                        <TableHead className="h-10">Username</TableHead>
-                        <TableHead className="h-10">Disabled</TableHead>
-                        <TableHead className="h-10">Superuser</TableHead>
-                        <TableHead className="h-10">Created At</TableHead>
-                        <TableHead className="h-10">Updated At</TableHead>
-                        <TableHead className="h-10 w-[100px]  text-right"></TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    {!loadingUsers && (
-                      <TableBody>
-                        {filterUserList.map((user, index) => (
-                          <TableRow key={index}>
-                            <TableCell className="truncate py-2 font-medium">
-                              <ShadTooltip content={user.id}>
-                                <span className="cursor-default">
-                                  {user.id}
-                                </span>
-                              </ShadTooltip>
-                            </TableCell>
-                            <TableCell className="truncate py-2">
-                              <ShadTooltip content={user.username}>
-                                <span className="cursor-default">
-                                  {user.username}
-                                </span>
-                              </ShadTooltip>
-                            </TableCell>
-                            <TableCell className="relative left-5 truncate py-2">
-                              <Checkbox
-                                id="is_disabled"
-                                checked={user.is_disabled}
-                              />
-                            </TableCell>
-                            <TableCell className="relative left-5 truncate py-2">
-                              <Checkbox
-                                id="is_superuser"
-                                checked={user.is_superuser}
-                              />
-                            </TableCell>
-                            <TableCell className="truncate py-2 ">
-                              {
-                                new Date(user.create_at)
-                                  .toISOString()
-                                  .split("T")[0]
-                              }
-                            </TableCell>
-                            <TableCell className="truncate py-2">
-                              {
-                                new Date(user.updated_at)
-                                  .toISOString()
-                                  .split("T")[0]
-                              }
-                            </TableCell>
-                            <TableCell className="flex w-[100px] py-2 text-right">
-                              <div className="flex">
-                                <UserManagementModal
-                                  title="Edit"
-                                  titleHeader={`${user.id}`}
-                                  cancelText="Cancel"
-                                  confirmationText="Edit"
-                                  icon={"UserPlus2"}
-                                  data={user}
-                                  index={index}
-                                  onConfirm={(index, editUser) => {
-                                    handleEditUser(user.id, editUser);
-                                  }}
-                                >
-                                  <ShadTooltip content="Edit" side="top">
-                                    <IconComponent
-                                      name="Pencil"
-                                      className="h-4 w-4 cursor-pointer"
-                                    />
-                                  </ShadTooltip>
-                                </UserManagementModal>
+                  {loadingUsers && (
+                    <div>
+                      <strong>Loading...</strong>
+                    </div>
+                  )}
+                  <div
+                    className={
+                      "max-h-[26rem] overflow-scroll overflow-x-hidden rounded-md border-2 bg-muted custom-scroll" +
+                      (loadingUsers ? " border-0" : "")
+                    }
+                  >
+                    <Table className={"table-fixed bg-muted outline-1"}>
+                      <TableHeader
+                        className={
+                          loadingUsers
+                            ? "hidden"
+                            : "table-fixed bg-muted outline-1"
+                        }
+                      >
+                        <TableRow>
+                          <TableHead className="h-10">Id</TableHead>
+                          <TableHead className="h-10">Username</TableHead>
+                          <TableHead className="h-10">Disabled</TableHead>
+                          <TableHead className="h-10">Superuser</TableHead>
+                          <TableHead className="h-10">Created At</TableHead>
+                          <TableHead className="h-10">Updated At</TableHead>
+                          <TableHead className="h-10 w-[100px]  text-right"></TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      {!loadingUsers && (
+                        <TableBody>
+                          {filterUserList.map((user, index) => (
+                            <TableRow key={index}>
+                              <TableCell className="truncate py-2 font-medium">
+                                <ShadTooltip content={user.id}>
+                                  <span className="cursor-default">
+                                    {user.id}
+                                  </span>
+                                </ShadTooltip>
+                              </TableCell>
+                              <TableCell className="truncate py-2">
+                                <ShadTooltip content={user.username}>
+                                  <span className="cursor-default">
+                                    {user.username}
+                                  </span>
+                                </ShadTooltip>
+                              </TableCell>
+                              <TableCell className="relative left-5 truncate py-2">
+                                <Checkbox
+                                  id="is_disabled"
+                                  checked={user.is_disabled}
+                                />
+                              </TableCell>
+                              <TableCell className="relative left-5 truncate py-2">
+                                <Checkbox
+                                  id="is_superuser"
+                                  checked={user.is_superuser}
+                                />
+                              </TableCell>
+                              <TableCell className="truncate py-2 ">
+                                {
+                                  new Date(user.create_at)
+                                    .toISOString()
+                                    .split("T")[0]
+                                }
+                              </TableCell>
+                              <TableCell className="truncate py-2">
+                                {
+                                  new Date(user.updated_at)
+                                    .toISOString()
+                                    .split("T")[0]
+                                }
+                              </TableCell>
+                              <TableCell className="flex w-[100px] py-2 text-right">
+                                <div className="flex">
+                                  <UserManagementModal
+                                    title="Edit"
+                                    titleHeader={`${user.id}`}
+                                    cancelText="Cancel"
+                                    confirmationText="Edit"
+                                    icon={"UserPlus2"}
+                                    data={user}
+                                    index={index}
+                                    onConfirm={(index, editUser) => {
+                                      handleEditUser(user.id, editUser);
+                                    }}
+                                  >
+                                    <ShadTooltip content="Edit" side="top">
+                                      <IconComponent
+                                        name="Pencil"
+                                        className="h-4 w-4 cursor-pointer"
+                                      />
+                                    </ShadTooltip>
+                                  </UserManagementModal>
 
-                                <ConfirmationModal
-                                  title="Delete"
-                                  titleHeader="Delete User"
-                                  modalContentTitle="Attention!"
-                                  modalContent="Are you sure you want to delete this user? This action cannot be undone."
-                                  cancelText="Cancel"
-                                  confirmationText="Delete"
-                                  icon={"UserMinus2"}
-                                  data={user}
-                                  index={index}
-                                  onConfirm={(index, user) => {
-                                    handleDeleteUser(user);
-                                  }}
-                                >
-                                  <ShadTooltip content="Delete" side="top">
-                                    <IconComponent
-                                      name="Trash2"
-                                      className="ml-2 h-4 w-4 cursor-pointer"
-                                    />
-                                  </ShadTooltip>
-                                </ConfirmationModal>
-                              </div>
-                            </TableCell>
-                          </TableRow>
-                        ))}
-                      </TableBody>
-                    )}
-                  </Table>
-                </div>
+                                  <ConfirmationModal
+                                    title="Delete"
+                                    titleHeader="Delete User"
+                                    modalContentTitle="Attention!"
+                                    modalContent="Are you sure you want to delete this user? This action cannot be undone."
+                                    cancelText="Cancel"
+                                    confirmationText="Delete"
+                                    icon={"UserMinus2"}
+                                    data={user}
+                                    index={index}
+                                    onConfirm={(index, user) => {
+                                      handleDeleteUser(user);
+                                    }}
+                                  >
+                                    <ShadTooltip content="Delete" side="top">
+                                      <IconComponent
+                                        name="Trash2"
+                                        className="ml-2 h-4 w-4 cursor-pointer"
+                                      />
+                                    </ShadTooltip>
+                                  </ConfirmationModal>
+                                </div>
+                              </TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      )}
+                    </Table>
+                  </div>
 
-                <PaginatorComponent
-                  pageIndex={index}
-                  pageSize={size}
-                  totalRowsCount={filterUserList.length}
-                  paginate={(pageIndex, pageSize) => {
-                    handleChangePagination(pageSize, pageIndex);
-                  }}
-                ></PaginatorComponent>
-              </>
+                  <PaginatorComponent
+                    pageIndex={index}
+                    pageSize={size}
+                    totalRowsCount={filterUserList.length}
+                    paginate={(pageIndex, pageSize) => {
+                      handleChangePagination(pageSize, pageIndex);
+                    }}
+                  ></PaginatorComponent>
+                </>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      )
-    }
-
+      )}
     </>
   );
 }
diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx
index 4c417b3bb..81421d057 100644
--- a/src/frontend/src/routes.tsx
+++ b/src/frontend/src/routes.tsx
@@ -1,5 +1,8 @@
 import { Route, Routes } from "react-router-dom";
+import { ProtectedAdminRoute } from "./components/authAdminGuard";
+import { ProtectedRoute } from "./components/authGuard";
 import { ProtectedLoginRoute } from "./components/authLoginGuard";
+import { CatchAllRoute } from "./components/catchAllRoutes";
 import AdminPage from "./pages/AdminPage";
 import LoginAdminPage from "./pages/AdminPage/LoginPage";
 import CommunityPage from "./pages/CommunityPage";
@@ -8,9 +11,6 @@ import HomePage from "./pages/MainPage";
 import DeleteAccountPage from "./pages/deleteAccountPage";
 import LoginPage from "./pages/loginPage";
 import SignUp from "./pages/signUpPage";
-import { CatchAllRoute } from "./components/catchAllRoutes";
-import { ProtectedRoute } from "./components/authGuard";
-import { ProtectedAdminRoute } from "./components/authAdminGuard";
 
 const Router = () => {
   return (