diff --git a/src/frontend/src/pages/ApiKeysPage/index.tsx b/src/frontend/src/pages/ApiKeysPage/index.tsx
deleted file mode 100644
index 4e271825e..000000000
--- a/src/frontend/src/pages/ApiKeysPage/index.tsx
+++ /dev/null
@@ -1,319 +0,0 @@
-import { useContext, useEffect, useRef, useState } from "react";
-import IconComponent from "../../components/genericIconComponent";
-import ShadTooltip from "../../components/shadTooltipComponent";
-import { Button } from "../../components/ui/button";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "../../components/ui/table";
-import { AuthContext } from "../../contexts/authContext";
-import { deleteApiKey, getApiKey } from "../../controllers/API";
-import ConfirmationModal from "../../modals/confirmationModal";
-import SecretKeyModal from "../../modals/secretKeyModal";
-
-import moment from "moment";
-import Header from "../../components/headerComponent";
-import {
-  DEL_KEY_ERROR_ALERT,
-  DEL_KEY_SUCCESS_ALERT,
-} from "../../constants/alerts_constants";
-import {
-  API_PAGE_PARAGRAPH,
-  API_PAGE_USER_KEYS,
-  LAST_USED_SPAN_1,
-  LAST_USED_SPAN_2,
-} from "../../constants/constants";
-import useAlertStore from "../../stores/alertStore";
-import { ApiKey } from "../../types/components";
-import TableComponent from "../../components/tableComponent";
-import TableAutoCellRender from "../../components/tableAutoCellRender";
-
-export default function ApiKeysPage() {
-  const [loadingKeys, setLoadingKeys] = useState(true);
-  const setSuccessData = useAlertStore((state) => state.setSuccessData);
-  const setErrorData = useAlertStore((state) => state.setErrorData);
-  const { userData } = useContext(AuthContext);
-  const [userId, setUserId] = useState("");
-  const keysList = useRef([]);
-
-  useEffect(() => {
-    getKeys();
-  }, [userData]);
-
-  function getKeys() {
-    setLoadingKeys(true);
-    if (userData) {
-      getApiKey()
-        .then((keys: [ApiKey]) => {
-          keysList.current = keys["api_keys"].map((apikey: ApiKey) => ({
-            ...apikey,
-            last_used_at: apikey.last_used_at ?? "Never",
-          }));
-          setUserId(keys["user_id"]);
-          setLoadingKeys(false);
-        })
-        .catch((error) => {
-          setLoadingKeys(false);
-        });
-    }
-  }
-
-  function resetFilter() {
-    getKeys();
-  }
-
-  function handleDeleteKey(keys) {
-    deleteApiKey(keys)
-      .then((res) => {
-        resetFilter();
-        setSuccessData({
-          title: DEL_KEY_SUCCESS_ALERT,
-        });
-      })
-      .catch((error) => {
-        setErrorData({
-          title: DEL_KEY_ERROR_ALERT,
-          list: [error["response"]["data"]["detail"]],
-        });
-      });
-  }
-
-  function lastUsedMessage() {
-    return (
-      <div className="text-xs">
-        <span>
-          {LAST_USED_SPAN_1}
-          <br></br> {LAST_USED_SPAN_2}
-        </span>
-      </div>
-    );
-  }
-
-  const columnDefs = [
-    { headerName: "Name", field: "name", cellRenderer: TableAutoCellRender },
-    { headerName: "Key", field: "api_key", cellRenderer: TableAutoCellRender },
-    {
-      headerName: "Created",
-      field: "created_at",
-      cellRenderer: TableAutoCellRender,
-    },
-    {
-      headerName: "Last Used",
-      field: "last_used_at",
-      cellRenderer: TableAutoCellRender,
-    },
-    {
-      headerName: "Total Uses",
-      field: "total_uses",
-      cellRenderer: TableAutoCellRender,
-    },
-  ];
-
-  return (
-    <>
-      <Header></Header>
-      {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">
-                      API keys
-                    </h2>
-                    <p className="text-muted-foreground">
-                      {API_PAGE_PARAGRAPH}
-                    </p>
-                  </div>
-                  <div className="flex items-center space-x-2"></div>
-                </div>
-
-                {keysList.current &&
-                  keysList.current.length === 0 &&
-                  !loadingKeys && (
-                    <>
-                      <div className="flex items-center justify-between">
-                        <h2>{API_PAGE_USER_KEYS}</h2>
-                      </div>
-                    </>
-                  )}
-                <>
-                  {loadingKeys && (
-                    <div>
-                      <strong>Loading...</strong>
-                    </div>
-                  )}
-                  <div
-                    className={
-                      "h-[30rem] max-h-[35rem]  rounded-md border-2 bg-muted custom-scroll" +
-                      (loadingKeys ? " border-0" : "")
-                    }
-                  >
-                    {keysList.current &&
-                      keysList.current.length > 0 &&
-                      !loadingKeys && (
-                        <>
-                          <TableComponent
-                            pagination
-                            columnDefs={columnDefs}
-                            rowData={keysList.current}
-                          />
-                        </>
-                      )}
-                  </div>
-                  {/* <Table className={"table-fixed bg-muted outline-1"}>
-                    <TableHeader
-                      className={
-                        loadingKeys
-                          ? "hidden"
-                          : "table-fixed bg-muted outline-1"
-                      }
-                    >
-                      <TableRow>
-                        <TableHead className="h-10">Name</TableHead>
-                        <TableHead className="h-10">Key</TableHead>
-                        <TableHead className="h-10">Created</TableHead>
-                        <TableHead className="flex h-10 items-center">
-                          Last Used
-                          <ShadTooltip
-                            side="top"
-                            content={lastUsedMessage()}
-                          >
-                            <div>
-                              <IconComponent
-                                name="Info"
-                                className="ml-1 h-3 w-3"
-                              />
-                            </div>
-                          </ShadTooltip>
-                        </TableHead>
-                        <TableHead className="h-10">Total Uses</TableHead>
-                        <TableHead className="h-10 w-[100px]  text-right"></TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    {!loadingKeys && (
-                      <TableBody>
-                        {keysList.current.map(
-                          (api_keys: ApiKey, index: number) => (
-                            <TableRow key={index}>
-                              <TableCell className="truncate py-2">
-                                <ShadTooltip content={api_keys.name}>
-                                  <span className="cursor-default">
-                                    {api_keys.name ? api_keys.name : "-"}
-                                  </span>
-                                </ShadTooltip>
-                              </TableCell>
-                              <TableCell className="truncate py-2">
-                                <span className="cursor-default">
-                                  {api_keys.api_key}
-                                </span>
-                              </TableCell>
-                              <TableCell className="truncate py-2 ">
-                                <ShadTooltip
-                                  side="top"
-                                  content={moment(
-                                    api_keys.created_at
-                                  ).format("YYYY-MM-DD HH:mm")}
-                                >
-                                  <div>
-                                    {moment(api_keys.created_at).format(
-                                      "YYYY-MM-DD HH:mm"
-                                    )}
-                                  </div>
-                                </ShadTooltip>
-                              </TableCell>
-                              <TableCell className="truncate py-2">
-                                <ShadTooltip
-                                  side="top"
-                                  content={
-                                    moment(api_keys.last_used_at).format(
-                                      "YYYY-MM-DD HH:mm"
-                                    ) === "Invalid date"
-                                      ? "Never"
-                                      : moment(
-                                        api_keys.last_used_at
-                                      ).format("YYYY-MM-DD HH:mm")
-                                  }
-                                >
-                                  <div>
-                                    {moment(api_keys.last_used_at).format(
-                                      "YYYY-MM-DD HH:mm"
-                                    ) === "Invalid date"
-                                      ? "Never"
-                                      : moment(
-                                        api_keys.last_used_at
-                                      ).format("YYYY-MM-DD HH:mm")}
-                                  </div>
-                                </ShadTooltip>
-                              </TableCell>
-                              <TableCell className="truncate py-2">
-                                {api_keys.total_uses}
-                              </TableCell>
-                              <TableCell className="flex w-[100px] py-2 text-right">
-                                <div className="flex">
-                                  <ConfirmationModal
-                                    title="Delete"
-                                    titleHeader="Delete User"
-                                    modalContentTitle="Attention!"
-                                    cancelText="Cancel"
-                                    confirmationText="Delete"
-                                    icon={"UserMinus2"}
-                                    data={api_keys.id}
-                                    index={index}
-                                    onConfirm={(index, keys) => {
-                                      handleDeleteKey(keys);
-                                    }}
-                                  >
-                                    <ConfirmationModal.Content>
-                                      <span>
-                                        Are you sure you want to delete
-                                        this key? This action cannot be
-                                        undone.
-                                      </span>
-                                    </ConfirmationModal.Content>
-                                    <ConfirmationModal.Trigger>
-                                      <IconComponent
-                                        name="Trash2"
-                                        className="ml-2 h-4 w-4 cursor-pointer"
-                                      />
-                                    </ConfirmationModal.Trigger>
-                                  </ConfirmationModal>
-                                </div>
-                              </TableCell>
-                            </TableRow>
-                          )
-                        )}
-                      </TableBody>
-                    )}
-                  </Table> */}
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <SecretKeyModal
-                        title="Create new secret key"
-                        cancelText="Cancel"
-                        confirmationText="Create secret key"
-                        icon={"Key"}
-                        data={userId}
-                        onCloseModal={getKeys}
-                      >
-                        <Button>
-                          <IconComponent name="Plus" className="mr-1 h-5 w-5" />
-                          Create new secret key
-                        </Button>
-                      </SecretKeyModal>
-                    </div>
-                  </div>
-                </>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  );
-}