diff --git a/frontend/src/html/popups.html b/frontend/src/html/popups.html
index 216026bc2132..736ca9f527b9 100644
--- a/frontend/src/html/popups.html
+++ b/frontend/src/html/popups.html
@@ -45,10 +45,6 @@
   </div>
 </dialog>
 
-<dialog id="simpleModal" class="modalWrapper hidden">
-  <form class="modal"></form>
-</dialog>
-
 <div id="videoAdPopupWrapper" class="popupWrapper hidden">
   <div id="videoAdPopup">
     <div class="preloader">
@@ -126,12 +122,6 @@
   </div>
 </dialog>
 
-<dialog id="shareCustomThemeUrlModal" class="modalWrapper hidden">
-  <div class="modal">
-    <input type="text" title="custom theme" />
-    <div class="button">ok</div>
-  </div>
-</dialog>
 <dialog id="googleSignUpModal" class="modalWrapper hidden">
   <form class="modal">
     <div class="title">Account name</div>
@@ -202,44 +192,7 @@
     <button class="saveButton">save</button>
   </div>
 </dialog>
-<dialog id="editPresetModal" class="modalWrapper hidden">
-  <form class="modal">
-    <div class="title popupTitle"></div>
-    <div class="group">
-      <div class="presetNameTitle">name</div>
-      <input type="text" title="presets" />
-    </div>
-    <label class="changePresetToCurrentCheckbox checkbox">
-      <input type="checkbox" />
-      Change preset to current settings
-    </label>
-    <div class="inputs">
-      <div class="presetType group" data-id="presetType">
-        <div class="title">Preset Type</div>
-        <div class="presetTypeButtonGroup">
-          <button value="full" type="button">full</button>
-          <button value="partial" type="button">partial</button>
-        </div>
-      </div>
-      <div class="partialPresetGroups group">
-        <div class="title">partial groups</div>
-        <div class="checkboxList"></div>
-      </div>
-    </div>
-    <div class="text deletePrompt"></div>
-    <button class="submit" type="submit">add</button>
-  </form>
-</dialog>
-<dialog id="shareCustomThemeModal" class="modalWrapper hidden">
-  <div class="modal">
-    <div class="title">Share custom theme</div>
-    <label class="checkbox">
-      <input type="checkbox" id="includeBackground" />
-      Include background information
-    </label>
-    <button>copy link to clipboard</button>
-  </div>
-</dialog>
+
 <dialog id="commandLine" class="modalWrapper hidden">
   <div class="modal">
     <div
diff --git a/frontend/src/styles/popups.scss b/frontend/src/styles/popups.scss
index b5178db43a68..bb232ae714d3 100644
--- a/frontend/src/styles/popups.scss
+++ b/frontend/src/styles/popups.scss
@@ -114,35 +114,6 @@ body.darkMode {
   }
 }
 
-#simpleModal {
-  .modal {
-    max-width: 500px;
-
-    form {
-      display: grid;
-      gap: 1rem;
-    }
-
-    .inputs {
-      display: grid;
-      gap: 1rem;
-    }
-
-    .text {
-      font-size: 1rem;
-      color: var(--text-color);
-    }
-  }
-  & [data-popup-id="viewApeKey"] {
-    textarea:disabled {
-      opacity: 1;
-    }
-  }
-  & [data-popup-id="devGenerateData"] {
-    max-width: 700px;
-  }
-}
-
 #googleSignUpModal {
   .modal {
     max-width: 425px;
@@ -333,102 +304,6 @@ body.darkMode {
   }
 }
 
-#apeKeysModal {
-  .modal {
-    max-width: 1000px;
-
-    grid-template-rows: max-content auto;
-    align-items: baseline;
-
-    .top {
-      display: grid;
-      grid-template-columns: 1fr auto;
-      .title {
-        font-size: 1.5rem;
-        color: var(--sub-color);
-      }
-      button {
-        padding: 0.5em 2em;
-      }
-    }
-
-    .textButton {
-      justify-content: center;
-    }
-
-    .keyButtons {
-      display: grid;
-      grid-auto-flow: column;
-      gap: 1rem;
-      .button {
-        width: 3rem;
-      }
-    }
-
-    table {
-      width: 100%;
-      border-spacing: 0;
-      border-collapse: collapse;
-
-      tr td:first-child {
-        text-align: center;
-      }
-
-      tr.me {
-        td {
-          color: var(--main-color);
-          // font-weight: 900;
-        }
-      }
-
-      td {
-        padding: 0.5rem 0.5rem;
-      }
-
-      thead {
-        color: var(--sub-color);
-        font-size: 0.75rem;
-
-        td {
-          padding: 0.5rem;
-          background: var(--bg-color);
-          position: sticky;
-          top: 0;
-          z-index: 99;
-        }
-      }
-
-      tbody {
-        color: var(--text-color);
-
-        tr:nth-child(odd) td {
-          background: var(--sub-alt-color);
-        }
-      }
-
-      tfoot {
-        td {
-          padding: 1rem 0.5rem;
-          position: sticky;
-          bottom: -5px;
-          background: var(--bg-color);
-          color: var(--main-color);
-          z-index: 4;
-        }
-      }
-
-      tr {
-        td:first-child {
-          padding-left: 1rem;
-        }
-        td:last-child {
-          padding-right: 1rem;
-        }
-      }
-    }
-  }
-}
-
 #userReportModal {
   .modal {
     max-width: 800px;
@@ -466,84 +341,6 @@ body.darkMode {
     }
   }
 }
-#shareCustomThemeModal {
-  .modal {
-    max-width: 400px;
-
-    .buttons {
-      display: grid;
-      gap: 1rem;
-      grid-template-columns: 1fr 1fr 1fr;
-    }
-  }
-}
-#shareCustomThemeUrlModal {
-  .modal {
-    max-width: 900px;
-  }
-}
-
-#editPresetModal {
-  .modal {
-    max-width: 450px;
-    gap: 1rem;
-    .presetNameTitle {
-      font-size: 0.75rem;
-      color: var(--sub-color);
-      text-transform: lowercase;
-    }
-  }
-
-  .group {
-    display: grid;
-    gap: 0.5rem;
-    align-items: center;
-    width: 100%;
-  }
-
-  input[type="text"] {
-    width: 100%;
-  }
-
-  .inputs {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 1rem;
-    font-size: 0.75rem;
-    .title {
-      color: var(--sub-color);
-      text-transform: lowercase;
-    }
-    .partialPresetGroups {
-      .checkboxList {
-        display: grid;
-        gap: 1rem;
-        grid-template-columns: 1fr 1fr;
-        .title {
-          color: var(--text-color);
-          text-transform: lowercase;
-        }
-        .checkboxTitlePair {
-          display: flex;
-          gap: 0.5rem;
-          button {
-            flex-grow: 1;
-          }
-        }
-      }
-    }
-    .presetType {
-      .presetTypeButtonGroup {
-        display: flex;
-        width: 100%;
-        gap: 0.5rem;
-        button {
-          flex-grow: 1;
-        }
-      }
-    }
-  }
-}
 
 #streakHourOffsetModal {
   .modal {
diff --git a/frontend/src/styles/tailwind.css b/frontend/src/styles/tailwind.css
index 56ff24b08c93..566e152a00e2 100644
--- a/frontend/src/styles/tailwind.css
+++ b/frontend/src/styles/tailwind.css
@@ -113,4 +113,11 @@
   .settings-highlight {
     animation: ring-flash 4s ease-in forwards;
   }
+
+  .darkMode {
+    input[type="date"]::-webkit-calendar-picker-indicator,
+    input[type="datetime-local"]::-webkit-calendar-picker-indicator {
+      filter: invert(1);
+    }
+  }
 }
diff --git a/frontend/src/ts/components/layout/overlays/Banners.tsx b/frontend/src/ts/components/layout/overlays/Banners.tsx
index 71d114ce006a..60ed03a466a9 100644
--- a/frontend/src/ts/components/layout/overlays/Banners.tsx
+++ b/frontend/src/ts/components/layout/overlays/Banners.tsx
@@ -3,7 +3,6 @@ import { debounce } from "throttle-debounce";
 
 import { createEffectOn } from "../../../hooks/effects";
 import { useRefWithUtils } from "../../../hooks/useRefWithUtils";
-import { showPopup } from "../../../modals/simple-modals-base";
 import {
   Banner as BannerType,
   addBanner,
@@ -14,6 +13,7 @@ import { setGlobalOffsetTop } from "../../../states/core";
 import { getSnapshot } from "../../../states/snapshot";
 import { cn } from "../../../utils/cn";
 import { Fa } from "../../common/Fa";
+import { showUpdateNameModal } from "../../modals/account-settings/UpdateNameModal";
 
 function Banner(props: BannerType): JSXElement {
   const remove = (): void => {
@@ -89,9 +89,7 @@ export function Banners(): JSXElement {
               <button
                 type="button"
                 class="px-2 py-1"
-                onClick={() => {
-                  showPopup("updateName");
-                }}
+                onClick={() => showUpdateNameModal()}
               >
                 Click here
               </button>{" "}
diff --git a/frontend/src/ts/components/modals/DevOptionsModal.tsx b/frontend/src/ts/components/modals/DevOptionsModal.tsx
index e758460bf855..80226e72d746 100644
--- a/frontend/src/ts/components/modals/DevOptionsModal.tsx
+++ b/frontend/src/ts/components/modals/DevOptionsModal.tsx
@@ -1,5 +1,7 @@
+import { UserNameSchema } from "@monkeytype/schemas/users";
 import { createSignal, For, JSXElement } from "solid-js";
 import { envConfig } from "virtual:env-config";
+import { z } from "zod";
 
 import Ape from "../../ape";
 import { signIn } from "../../auth";
@@ -7,18 +9,19 @@ import { refetchInboxCollection } from "../../collections/inbox";
 import { addXp } from "../../db";
 import { toggleCaretDebug } from "../../elements/caret";
 import { getInputElement } from "../../input/input-element";
-import { showPopup } from "../../modals/simple-modals";
-import { showLoaderBar, hideLoaderBar } from "../../states/loader-bar";
+import { hideLoaderBar, showLoaderBar } from "../../states/loader-bar";
 import { hideModal, showModal } from "../../states/modals";
 import {
-  showNoticeNotification,
   showErrorNotification,
+  showNoticeNotification,
   showSuccessNotification,
 } from "../../states/notifications";
+import { showSimpleModal } from "../../states/simple-modal";
 import { toggleUserFakeChartData } from "../../test/result";
 import { disableSlowTimerFail } from "../../test/test-timer";
 import { FaSolidIcon } from "../../types/font-awesome";
 import { setMediaQueryDebugLevel } from "../../ui";
+import { remoteValidation } from "../../utils/remote-validation";
 import { AnimatedModal } from "../common/AnimatedModal";
 import { Button } from "../common/Button";
 
@@ -35,7 +38,7 @@ export function DevOptionsModal(): JSXElement {
     {
       icon: "fa-database",
       label: () => "Generate Data",
-      onClick: () => showPopup("devGenerateData"),
+      onClick: () => showGenerateDataModal(),
     },
     {
       icon: "fa-bell",
@@ -222,3 +225,90 @@ export function DevOptionsModal(): JSXElement {
     </>
   );
 }
+
+function showGenerateDataModal(): void {
+  showSimpleModal({
+    title: "Generate data",
+    text: `if create user is checked, user will be created with <name>@example.com and password: password`,
+    class: "max-w-2xl",
+    schema: z.object({
+      username: UserNameSchema,
+      createUser: z.boolean(),
+      firstTestTimestamp: z.date().max(new Date()),
+      lastTestTimestamp: z.date().max(new Date()).optional(),
+      minTestsPerDay: z.number().safe().int().min(0).max(200),
+      maxTestsPerDay: z.number().safe().int().min(0).max(200),
+    }),
+    inputs: {
+      createUser: {
+        type: "checkbox",
+        label: "create user",
+        description:
+          "if checked, user will be created with {username}@example.com and password: password",
+      },
+      username: {
+        type: "text",
+        label: "username",
+        placeholder: "username",
+        validation: {
+          isValid: remoteValidation(
+            async (name: string) =>
+              Ape.users.getNameAvailability({ params: { name } }),
+            { check: (data) => !data.available || "Unknown user" },
+          ),
+          debounceDelay: 1000,
+        },
+      },
+      firstTestTimestamp: {
+        type: "date",
+        label: "first test",
+      },
+      lastTestTimestamp: {
+        type: "date",
+        label: "last test",
+      },
+      minTestsPerDay: {
+        type: "range",
+        label: "min tests per day",
+        initVal: 0,
+
+        step: 10,
+      },
+      maxTestsPerDay: {
+        type: "range",
+        label: "max tests per day",
+        initVal: 50,
+
+        step: 10,
+      },
+    },
+    buttonText: "generate (might take a while)",
+    execFn: async ({
+      username,
+      createUser,
+      firstTestTimestamp,
+      lastTestTimestamp,
+      minTestsPerDay,
+      maxTestsPerDay,
+    }) => {
+      const result = await Ape.dev.generateData({
+        body: {
+          username,
+          createUser,
+          firstTestTimestamp: firstTestTimestamp?.getTime(),
+          lastTestTimestamp: lastTestTimestamp?.getTime(),
+          minTestsPerDay,
+          maxTestsPerDay,
+        },
+      });
+
+      return {
+        status: result.status === 200 ? "success" : "error",
+        message: result.body.message,
+        hideOptions: {
+          clearModalChain: true,
+        },
+      };
+    },
+  });
+}
diff --git a/frontend/src/ts/components/modals/Modals.tsx b/frontend/src/ts/components/modals/Modals.tsx
index 44de2d887a34..b0c3b9728b15 100644
--- a/frontend/src/ts/components/modals/Modals.tsx
+++ b/frontend/src/ts/components/modals/Modals.tsx
@@ -1,5 +1,6 @@
 import { JSXElement } from "solid-js";
 
+import { ViewApeKeyModal } from "./account-settings/ViewApeKeyModal";
 import { ContactModal } from "./ContactModal";
 import { CookiesModal } from "./CookiesModal";
 import { CustomTestDurationModal } from "./CustomTestDurationModal";
@@ -36,6 +37,7 @@ export function Modals(): JSXElement {
       <CookiesModal />
       <AddPresetModal />
       <EditPresetModal />
+      <ViewApeKeyModal />
     </>
   );
 }
diff --git a/frontend/src/ts/components/modals/SimpleModal.tsx b/frontend/src/ts/components/modals/SimpleModal.tsx
index 6aac8bea6270..d07efad88d59 100644
--- a/frontend/src/ts/components/modals/SimpleModal.tsx
+++ b/frontend/src/ts/components/modals/SimpleModal.tsx
@@ -9,7 +9,7 @@ import {
   Switch,
   untrack,
 } from "solid-js";
-import { z, ZodDefault, ZodFirstPartyTypeKind, ZodTypeAny } from "zod";
+import { z, ZodFirstPartyTypeKind } from "zod";
 
 import { hideLoaderBar, showLoaderBar } from "../../states/loader-bar";
 import {
@@ -26,6 +26,7 @@ import {
 } from "../../states/simple-modal";
 import { cn } from "../../utils/cn";
 import { typedEntries } from "../../utils/misc";
+import { getZodType, unwrapSchema } from "../../utils/zod";
 import { AnimatedModal } from "../common/AnimatedModal";
 import { Checkbox } from "../ui/form/Checkbox";
 import { InputField } from "../ui/form/InputField";
@@ -57,7 +58,10 @@ function getDefaultValues(
   }
 
   return Object.fromEntries(
-    Object.entries(inputs).map(([key, input]) => [key, input.initVal ?? null]),
+    Object.entries(inputs).map(([key, input]) => [
+      key,
+      input.initVal ?? undefined,
+    ]),
   );
 }
 
@@ -247,7 +251,7 @@ export function SimpleModal(): JSXElement {
       title={config()?.title}
       focusFirstInput={config()?.focusFirstInput ?? true}
       beforeShow={resetForm}
-      modalClass={config()?.class}
+      modalClass={cn("max-w-lg", config()?.class)}
     >
       <form
         class="grid gap-4"
@@ -357,8 +361,9 @@ export function SimpleModal(): JSXElement {
  */
 export function convertFn<T>(
   input: SimpleModalInput<T>,
-  schema: z.ZodTypeAny,
-): (val: string | boolean) => T {
+  rawSchema: z.ZodTypeAny,
+): (val: string | boolean) => T | undefined {
+  const schema = unwrapSchema(rawSchema);
   const type = getZodType(schema);
   const preprocess = (raw: unknown): T => {
     const value = input.preprocess ? input.preprocess(raw as T) : raw;
@@ -373,6 +378,7 @@ export function convertFn<T>(
   switch (type) {
     case ZodFirstPartyTypeKind.ZodBoolean:
       return (val) => {
+        if (val === null || val === undefined) return undefined;
         const bool =
           typeof val === "boolean" ? val : val === "true" || val === "1";
         return preprocess(bool);
@@ -380,27 +386,19 @@ export function convertFn<T>(
 
     case ZodFirstPartyTypeKind.ZodNumber:
       return (val) => {
+        if (val === null || val === undefined) return undefined;
         const num = typeof val === "string" ? parseFloat(val) : Number(val);
         return preprocess(num);
       };
 
     case ZodFirstPartyTypeKind.ZodDate:
       return (val) => {
+        if (val === null || val === undefined) return undefined;
         const date = new Date(val as string);
         return preprocess(date);
       };
 
-    case ZodFirstPartyTypeKind.ZodDefault: {
-      const defaultSchema = schema as ZodDefault<ZodTypeAny>;
-      return convertFn(input, defaultSchema._def.innerType);
-    }
-
     default:
       return (val) => preprocess(val);
   }
 }
-
-function getZodType(schema: ZodTypeAny): ZodFirstPartyTypeKind {
-  // oxlint-disable-next-line typescript/no-unsafe-assignment typescript/no-unsafe-member-access
-  return schema._def["typeName"] as ZodFirstPartyTypeKind;
-}
diff --git a/frontend/src/ts/components/modals/account-settings/AddPasswordAuthModal.tsx b/frontend/src/ts/components/modals/account-settings/AddPasswordAuthModal.tsx
new file mode 100644
index 000000000000..706a18e367a2
--- /dev/null
+++ b/frontend/src/ts/components/modals/account-settings/AddPasswordAuthModal.tsx
@@ -0,0 +1,104 @@
+import { UserEmailSchema } from "@monkeytype/schemas/users";
+import { EmailAuthProvider, linkWithCredential } from "firebase/auth";
+import { z } from "zod";
+
+import Ape from "../../../ape";
+import { showSimpleModal } from "../../../states/simple-modal";
+import { createErrorMessage } from "../../../utils/error";
+import {
+  getPasswordSchema,
+  reauthenticate,
+} from "../../../utils/firebase-auth";
+
+export function showAddPasswordAuthModal(options: {
+  callback: () => void;
+}): void {
+  showSimpleModal({
+    title: "Add password authentication",
+    buttonText: "reauthenticate to add",
+    schema: z.object({
+      email: UserEmailSchema,
+      emailConfirm: UserEmailSchema,
+      password: getPasswordSchema(),
+      passConfirm: getPasswordSchema(),
+    }),
+    inputs: {
+      email: {
+        placeholder: "email",
+        type: "email",
+      },
+      emailConfirm: {
+        placeholder: "confirm email",
+        type: "email",
+      },
+      password: {
+        placeholder: "new password",
+        type: "password",
+      },
+      passConfirm: {
+        placeholder: "confirm new password",
+        type: "password",
+      },
+    },
+
+    execFn: async ({ email, emailConfirm, password, passConfirm }) => {
+      if (email !== emailConfirm) {
+        return {
+          status: "notice",
+          message: "Emails don't match",
+        };
+      }
+
+      if (password !== passConfirm) {
+        return {
+          status: "notice",
+          message: "Passwords don't match",
+        };
+      }
+
+      const reauth = await reauthenticate({ password });
+      if (reauth.status !== "success") {
+        return {
+          status: reauth.status,
+          message: reauth.message,
+        };
+      }
+
+      try {
+        const credential = EmailAuthProvider.credential(email, password);
+        await linkWithCredential(reauth.user, credential);
+      } catch (e) {
+        const message = createErrorMessage(
+          e,
+          "Failed to add password authentication",
+        );
+        return {
+          status: "error",
+          message,
+        };
+      }
+
+      const response = await Ape.users.updateEmail({
+        body: {
+          newEmail: email,
+          previousEmail: reauth.user.email as string,
+        },
+      });
+      if (response.status !== 200) {
+        return {
+          status: "error",
+          message:
+            "Password authentication added but updating the database email failed. This shouldn't happen, please contact support. Error",
+          notificationOptions: { response },
+        };
+      }
+
+      options.callback();
+
+      return {
+        status: "success",
+        message: "Password authentication added",
+      };
+    },
+  });
+}
diff --git a/frontend/src/ts/components/modals/account-settings/ReauthConfirmModals.tsx b/frontend/src/ts/components/modals/account-settings/ReauthConfirmModals.tsx
new file mode 100644
index 000000000000..387e0e1f35c2
--- /dev/null
+++ b/frontend/src/ts/components/modals/account-settings/ReauthConfirmModals.tsx
@@ -0,0 +1,205 @@
+import { z } from "zod";
+
+import Ape from "../../../ape";
+import { resetConfig } from "../../../config/lifecycle";
+import { getSnapshot } from "../../../db";
+import { isAuthenticated } from "../../../states/core";
+import { showNoticeNotification } from "../../../states/notifications";
+import { ExecReturn, showSimpleModal } from "../../../states/simple-modal";
+import FileStorage from "../../../utils/file-storage";
+import {
+  getPasswordSchema,
+  isUsingPasswordAuthentication,
+  reauthenticate,
+} from "../../../utils/firebase-auth";
+import { reloadAfter } from "../../../utils/misc";
+
+export function showDeleteAccountModal(): void {
+  showReauthConfirmModal({
+    title: "Delete account",
+    buttonText: "delete",
+    confirmText: `I understand I will lose access to my Monkeytype account and all my data will be deleted and cannot be recovered.`,
+    action: async () => {
+      showNoticeNotification("Deleting all data...");
+      const response = await Ape.users.delete();
+
+      if (response.status !== 200) {
+        return {
+          status: "error",
+          message: "Failed to delete user data",
+          notificationOptions: { response },
+        };
+      }
+      reloadAfter(3);
+
+      return {
+        status: "success",
+        message: "Account deleted, goodbye",
+      };
+    },
+  });
+}
+
+export function showOptOutOfLeaderboardsModal(): void {
+  showReauthConfirmModal({
+    title: "Opt out of leaderboards",
+    buttonText: "opt out",
+    confirmText: `I understand my account will be removed from all leaderboards and this cannot be undone.`,
+
+    action: async () => {
+      const response = await Ape.users.optOutOfLeaderboards();
+      if (response.status !== 200) {
+        return {
+          status: "error",
+          message: "Failed to opt out",
+          notificationOptions: { response },
+        };
+      }
+
+      reloadAfter(3);
+
+      return {
+        status: "success",
+        message: "Leaderboards opt out successful",
+      };
+    },
+  });
+}
+
+export function showResetAccountModal(): void {
+  showReauthConfirmModal({
+    title: "Reset account",
+    buttonText: "reset",
+    confirmText: `I understand all my data will be deleted and cannot be recovered.`,
+    action: async () => {
+      showNoticeNotification("Resetting settings...");
+      await resetConfig();
+      await FileStorage.deleteFile("LocalBackgroundFile");
+      await FileStorage.deleteFile("LocalFontFamilyFile");
+
+      showNoticeNotification("Resetting account...");
+      const response = await Ape.users.reset();
+      if (response.status !== 200) {
+        return {
+          status: "error",
+          message: "Failed to reset account",
+          notificationOptions: { response },
+        };
+      }
+
+      reloadAfter(3);
+
+      return {
+        status: "success",
+        message: "Account reset",
+      };
+    },
+  });
+}
+
+export function showResetPersonalBestsModal(): void {
+  showReauthConfirmModal({
+    title: "Reset personal bests",
+    buttonText: "reset",
+    confirmText: `I understand all my personal bests will be deleted and this cannot be undone`,
+    action: async () => {
+      const response = await Ape.users.deletePersonalBests();
+      if (response.status !== 200) {
+        return {
+          status: "error",
+          message: "Failed to reset personal bests",
+          notificationOptions: { response },
+        };
+      }
+
+      const snapshot = getSnapshot();
+      if (!snapshot) {
+        return {
+          status: "error",
+          message: "Failed to reset personal bests: no snapshot",
+        };
+      }
+
+      snapshot.personalBests = {
+        time: {},
+        words: {},
+        quote: {},
+        zen: {},
+        custom: {},
+      };
+
+      return {
+        status: "success",
+        message: "Personal bests reset",
+      };
+    },
+  });
+}
+
+export function showRevokeAllTokensModal() {
+  showReauthConfirmModal({
+    title: "Revoke all tokens",
+    confirmText: `I understand that all my tokens will get revoked and I will be logged out of all devices.`,
+    buttonText: "revoke all",
+    action: async () => {
+      const response = await Ape.users.revokeAllTokens();
+      if (response.status !== 200) {
+        return {
+          status: "error",
+          message: "Failed to revoke tokens",
+          notificationOptions: { response },
+        };
+      }
+
+      reloadAfter(3);
+
+      return {
+        status: "success",
+        message: "Tokens revoked",
+      };
+    },
+  });
+}
+
+function showReauthConfirmModal(options: {
+  title: string;
+  buttonText: string;
+  confirmText: string;
+  action: () => Promise<ExecReturn>;
+}): void {
+  if (!isAuthenticated()) return;
+
+  showSimpleModal({
+    title: options.title,
+    buttonText: isUsingPasswordAuthentication()
+      ? options.buttonText
+      : `reauthenticate to ${options.buttonText}`,
+    schema: z.object({
+      password: getPasswordSchema(),
+      confirm: z.literal(true),
+    }),
+    inputs: {
+      password: {
+        placeholder: "password",
+        type: "password",
+        hidden: !isUsingPasswordAuthentication(),
+      },
+      confirm: {
+        type: "checkbox",
+        label: options.confirmText,
+      },
+    },
+
+    execFn: async ({ password }) => {
+      const reauth = await reauthenticate({ password });
+      if (reauth.status !== "success") {
+        return {
+          status: reauth.status,
+          message: reauth.message,
+        };
+      }
+
+      return options.action();
+    },
+  });
+}
diff --git a/frontend/src/ts/components/modals/account-settings/RemoveAuthMethodModal.tsx b/frontend/src/ts/components/modals/account-settings/RemoveAuthMethodModal.tsx
new file mode 100644
index 000000000000..7b5d1537b070
--- /dev/null
+++ b/frontend/src/ts/components/modals/account-settings/RemoveAuthMethodModal.tsx
@@ -0,0 +1,101 @@
+import { unlink } from "firebase/auth";
+import { z } from "zod";
+
+import { isAuthenticated } from "../../../states/core";
+import { showNoticeNotification } from "../../../states/notifications";
+import { showSimpleModal } from "../../../states/simple-modal";
+import { createErrorMessage } from "../../../utils/error";
+import {
+  AuthMethod,
+  getPasswordSchema,
+  isUsingGithubAuthentication,
+  isUsingGoogleAuthentication,
+  isUsingPasswordAuthentication,
+  reauthenticate,
+} from "../../../utils/firebase-auth";
+import { reloadAfter } from "../../../utils/misc";
+
+const displayByMethod: Record<AuthMethod, string> = {
+  password: "Password",
+  "github.com": "GitHub",
+  "google.com": "Google",
+};
+export function showRemoveAuthMethodModal(options: {
+  authMethod: AuthMethod;
+  callback: () => void;
+}): void {
+  if (!isAuthenticated()) return;
+
+  //check there is at least one authentication remaining
+  const hasRemainingAuth = [
+    isUsingPasswordAuthentication() && options.authMethod !== "password",
+    isUsingGithubAuthentication() && options.authMethod !== "github.com",
+    isUsingGoogleAuthentication() && options.authMethod !== "google.com",
+  ].find((it) => it);
+
+  if (!hasRemainingAuth) {
+    showNoticeNotification("No remaining authentication enabled");
+    return;
+  }
+
+  const methodDisplay = displayByMethod[options.authMethod];
+
+  showSimpleModal({
+    title: `Remove ${methodDisplay} authentication`,
+    buttonText: "remove",
+    buttonAlwaysEnabled: options.authMethod !== "password",
+    schema: z.object({
+      password: getPasswordSchema(),
+      checked: z.literal(true),
+    }),
+    inputs: {
+      password: {
+        placeholder: "Password",
+        type: "password",
+        hidden:
+          !isUsingPasswordAuthentication() || options.authMethod === "password",
+      },
+      checked: {
+        type: "checkbox",
+        label: `I understand I will lose access to my Monkeytype account if my Google/GitHub account is lost or disabled.`,
+        hidden: options.authMethod !== "password",
+      },
+    },
+
+    execFn: async ({ password }) => {
+      const reauth = await reauthenticate({
+        password,
+        excludeMethod: options.authMethod,
+      });
+      if (reauth.status !== "success") {
+        return {
+          status: reauth.status,
+          message: reauth.message,
+        };
+      }
+
+      try {
+        await unlink(reauth.user, options.authMethod);
+      } catch (e) {
+        const message = createErrorMessage(
+          e,
+          options.authMethod === "password"
+            ? "Failed to remove password authentication"
+            : `Failed to unlink ${methodDisplay} account`,
+        );
+        return {
+          status: "error",
+          message,
+        };
+      }
+
+      options.callback();
+
+      reloadAfter(3);
+      return {
+        status: "success",
+        message: `${methodDisplay} authentication removed`,
+      };
+    },
+  });
+}
diff --git a/frontend/src/ts/components/modals/account-settings/UnlinkDiscordModal.tsx b/frontend/src/ts/components/modals/account-settings/UnlinkDiscordModal.tsx
new file mode 100644
index 000000000000..6e8604cec8a5
--- /dev/null
+++ b/frontend/src/ts/components/modals/account-settings/UnlinkDiscordModal.tsx
@@ -0,0 +1,42 @@
+import Ape from "../../../ape";
+import { getSnapshot, setSnapshot } from "../../../db";
+import { showSimpleModal } from "../../../states/simple-modal";
+
+export function showUnlinkDiscordModal(options: {
+  callback: () => void;
+}): void {
+  showSimpleModal({
+    title: "Unlink Discord",
+    text: "Are you sure you want to unlink your Discord account?",
+    buttonText: "unlink",
+    execFn: async () => {
+      const snap = getSnapshot();
+      if (!snap) {
+        return {
+          status: "error",
+          message: "Failed to unlink Discord: no snapshot",
+        };
+      }
+
+      const response = await Ape.users.unlinkDiscord();
+      if (response.status !== 200) {
+        return {
+          status: "error",
+          message: "Failed to unlink Discord",
+          notificationOptions: { response },
+        };
+      }
+
+      snap.discordAvatar = undefined;
+      snap.discordId = undefined;
+      setSnapshot(snap);
+
+      options.callback();
+
+      return {
+        status: "success",
+        message: "Discord unlinked",
+      };
+    },
+  });
+}
diff --git a/frontend/src/ts/components/modals/account-settings/UpdateEmailModal.tsx b/frontend/src/ts/components/modals/account-settings/UpdateEmailModal.tsx
new file mode 100644
index 000000000000..9075810dd9d4
--- /dev/null
+++ b/frontend/src/ts/components/modals/account-settings/UpdateEmailModal.tsx
@@ -0,0 +1,84 @@
+import { UserEmailSchema } from "@monkeytype/schemas/users";
+import { z } from "zod";
+
+import Ape from "../../../ape";
+import { signOut } from "../../../auth";
+import { isAuthenticated } from "../../../states/core";
+import { showNoticeNotification } from "../../../states/notifications";
+import { showSimpleModal } from "../../../states/simple-modal";
+import {
+  getPasswordSchema,
+  isUsingPasswordAuthentication,
+  reauthenticate,
+} from "../../../utils/firebase-auth";
+
+export function showUpdateEmailModal(): void {
+  if (!isAuthenticated()) return;
+  if (!isUsingPasswordAuthentication()) {
+    showNoticeNotification("Password authentication is not enabled");
+    return;
+  }
+
+  showSimpleModal({
+    title: "Update email",
+    buttonText: "update",
+    schema: z.object({
+      password: getPasswordSchema(),
+      email: UserEmailSchema,
+      emailConfirm: UserEmailSchema,
+    }),
+    inputs: {
+      password: {
+        placeholder: "Password",
+        type: "password",
+      },
+      email: {
+        type: "text",
+        placeholder: "New email",
+      },
+      emailConfirm: {
+        type: "text",
+        placeholder: "Confirm new email",
+      },
+    },
+
+    execFn: async ({ password, email, emailConfirm }) => {
+      if (email !== emailConfirm) {
+        return {
+          status: "notice",
+          message: "Emails don't match",
+        };
+      }
+
+      const reauth = await reauthenticate({ password });
+      if (reauth.status !== "success") {
+        return {
+          status: reauth.status,
+          message: reauth.message,
+        };
+      }
+
+      const response = await Ape.users.updateEmail({
+        body: {
+          newEmail: email,
+          previousEmail: reauth.user.email as string,
+        },
+      });
+
+      if (response.status !== 200) {
+        return {
+          status: "error",
+          message: "Failed to update email",
+          notificationOptions: { response },
+        };
+      }
+
+      signOut();
+
+      return {
+        status: "success",
+        message: "Email updated",
+      };
+    },
+  });
+}
diff --git a/frontend/src/ts/components/modals/account-settings/UpdateNameModal.tsx b/frontend/src/ts/components/modals/account-settings/UpdateNameModal.tsx
new file mode 100644
index 000000000000..a3e4d3a6cdc0
--- /dev/null
+++ b/frontend/src/ts/components/modals/account-settings/UpdateNameModal.tsx
@@ -0,0 +1,84 @@
+import { UserNameSchema } from "@monkeytype/schemas/users";
+import { z } from "zod";
+
+import Ape from "../../../ape";
+import * as DB from "../../../db";
+import { isAuthenticated } from "../../../states/core";
+import { showSimpleModal } from "../../../states/simple-modal";
+import {
+  getPasswordSchema,
+  isUsingPasswordAuthentication,
+  reauthenticate,
+} from "../../../utils/firebase-auth";
+import { reloadAfter } from "../../../utils/misc";
+import { remoteValidation } from "../../../utils/remote-validation";
+
+export function showUpdateNameModal(): void {
+  const snapshot = DB.getSnapshot();
+  if (!isAuthenticated() || !snapshot) return;
+
+  showSimpleModal({
+    title: "Update name",
+    buttonText: isUsingPasswordAuthentication()
+      ? "reauthenticate to update"
+      : "update",
+    text: DB.getSnapshot()?.needsToChangeName
+      ? "You need to change your account name. This might be because you have a duplicate name, no account name or your name is not allowed (contains whitespace or invalid characters). Sorry for the inconvenience."
+      : undefined,
+    schema: z.object({
+      password: getPasswordSchema(),
+      newName: UserNameSchema,
+    }),
+    inputs: {
+      password: {
+        placeholder: "password",
+        type: "password",
+        hidden: !isUsingPasswordAuthentication(),
+      },
+      newName: {
+        placeholder: "new name",
+        type: "text",
+        validation: {
+          isValid: remoteValidation(
+            async (name: string) =>
+              Ape.users.getNameAvailability({ params: { name } }),
+            { check: (data) => data.available || "Name not available" },
+          ),
+          debounceDelay: 1000,
+        },
+      },
+    },
+
+    execFn: async ({ password, newName }) => {
+      const reauth = await reauthenticate({ password });
+      if (reauth.status !== "success") {
+        return {
+          status: reauth.status,
+          message: reauth.message,
+        };
+      }
+
+      const response = await Ape.users.updateName({
+        body: { name: newName },
+      });
+      if (response.status !== 200) {
+        return {
+          status: "error",
+          message: "Failed to update name",
+          notificationOptions: { response },
+        };
+      }
+
+      snapshot.name = newName;
+      DB.setSnapshot(snapshot);
+      if (snapshot.needsToChangeName) {
+        reloadAfter(2);
+      }
+
+      return {
+        status: "success",
+        message: "Name updated",
+      };
+    },
+  });
+}
diff --git a/frontend/src/ts/components/modals/account-settings/UpdatePasswordModal.tsx b/frontend/src/ts/components/modals/account-settings/UpdatePasswordModal.tsx
new file mode 100644
index 000000000000..26c5a59f9fd7
--- /dev/null
+++ b/frontend/src/ts/components/modals/account-settings/UpdatePasswordModal.tsx
@@ -0,0 +1,84 @@
+import { z } from "zod";
+
+import Ape from "../../../ape";
+import { signOut } from "../../../auth";
+import { isAuthenticated } from "../../../states/core";
+import { showNoticeNotification } from "../../../states/notifications";
+import { showSimpleModal } from "../../../states/simple-modal";
+import {
+  getPasswordSchema,
+  isUsingPasswordAuthentication,
+  reauthenticate,
+} from "../../../utils/firebase-auth";
+
+export function showUpdatePasswordModal(): void {
+  if (!isAuthenticated()) return;
+  if (!isUsingPasswordAuthentication()) {
+    showNoticeNotification("Password authentication is not enabled");
+  }
+  showSimpleModal({
+    title: "Update password",
+    schema: z.object({
+      previousPass: getPasswordSchema(),
+      newPassword: getPasswordSchema(),
+      newPassConfirm: getPasswordSchema(),
+    }),
+    inputs: {
+      previousPass: {
+        placeholder: "current password",
+        type: "password",
+      },
+      newPassword: {
+        placeholder: "new password",
+        type: "password",
+      },
+      newPassConfirm: {
+        placeholder: "confirm new password",
+        type: "password",
+      },
+    },
+    buttonText: "update",
+    execFn: async ({ previousPass, newPassword, newPassConfirm }) => {
+      if (newPassword !== newPassConfirm) {
+        return {
+          status: "notice",
+          message: "New passwords don't match",
+        };
+      }
+
+      if (newPassword === previousPass) {
+        return {
+          status: "notice",
+          message: "New password must be different from previous password",
+        };
+      }
+
+      const reauth = await reauthenticate({ password: previousPass });
+      if (reauth.status !== "success") {
+        return {
+          status: reauth.status,
+          message: reauth.message,
+        };
+      }
+
+      const response = await Ape.users.updatePassword({
+        body: { newPassword },
+      });
+
+      if (response.status !== 200) {
+        return {
+          status: "error",
+          message: "Failed to update password",
+          notificationOptions: { response },
+        };
+      }
+
+      signOut();
+
+      return {
+        status: "success",
+        message: "Password updated",
+      };
+    },
+  });
+}
diff --git a/frontend/src/ts/components/modals/account-settings/ViewApeKeyModal.tsx b/frontend/src/ts/components/modals/account-settings/ViewApeKeyModal.tsx
new file mode 100644
index 000000000000..725a32eca6f3
--- /dev/null
+++ b/frontend/src/ts/components/modals/account-settings/ViewApeKeyModal.tsx
@@ -0,0 +1,58 @@
+import { createSignal } from "solid-js";
+
+import { createEffectOn } from "../../../hooks/effects";
+import {
+  getLastGeneratedApeKey,
+  setLastGeneratedApeKey,
+} from "../../../states/account-settings";
+import { hideModal, isModalOpen } from "../../../states/modals";
+import { AnimatedModal } from "../../common/AnimatedModal";
+import { Button } from "../../common/Button";
+import { H2 } from "../../common/Headers";
+
+export function ViewApeKeyModal() {
+  let timeout: NodeJS.Timeout | undefined;
+  const [isDisabled, setIsDisabled] = createSignal<boolean>(true);
+  createEffectOn(
+    () => isModalOpen("ViewApeKey"),
+    (isOpen) => {
+      if (!isOpen) {
+        setLastGeneratedApeKey(undefined);
+        return;
+      }
+      setIsDisabled(true);
+      if (timeout !== undefined) {
+        clearTimeout(timeout);
+      }
+      timeout = setTimeout(() => setIsDisabled(false), 5000);
+    },
+  );
+
+  return (
+    <AnimatedModal
+      id="ViewApeKey"
+      closeOnEscape={!isDisabled()}
+      closeOnWrapperClick={!isDisabled()}
+    >
+      <H2 text="Ape key" />
+      <textarea class="h-25 opacity-100" disabled>
+        {getLastGeneratedApeKey()}
+      </textarea>
+      <p>
+        This is your new Ape Key. Please keep it safe. You will only see it
+        once!
+      </p>
+      <p>
+        <strong>Note: </strong>
+        Ape Keys are disabled by default, you need to enable them before they
+        can be used.
+      </p>
+
+      <Button
+        onClick={() => hideModal("ViewApeKey")}
+        text="close"
+        disabled={isDisabled()}
+      />
+    </AnimatedModal>
+  );
+}
diff --git a/frontend/src/ts/components/pages/account/Filters.tsx b/frontend/src/ts/components/pages/account/Filters.tsx
index 5f0ae2065b6e..4cb91f7121ca 100644
--- a/frontend/src/ts/components/pages/account/Filters.tsx
+++ b/frontend/src/ts/components/pages/account/Filters.tsx
@@ -1,12 +1,13 @@
 import { QuoteLength } from "@monkeytype/schemas/configs";
+import { PresetNameSchema } from "@monkeytype/schemas/presets";
 import {
-  ResultFilterPresetNameSchema,
   ResultFilters,
   ResultFiltersGroupItem,
   ResultFiltersKeys,
 } from "@monkeytype/schemas/users";
 import { createMemo, createSignal, For, JSXElement, Show } from "solid-js";
 import { SetStoreFunction, unwrap } from "solid-js/store";
+import { z } from "zod";
 
 import {
   deleteResultFilterPreset,
@@ -16,9 +17,8 @@ import {
 import { type TagItem, useTagsLiveQuery } from "../../../collections/tags";
 import { getConfig } from "../../../config/store";
 import defaultResultFilters from "../../../constants/default-result-filters";
-import { SimpleModal } from "../../../elements/simple-modal";
+import { showSimpleModal } from "../../../states/simple-modal";
 import { FaSolidIcon } from "../../../types/font-awesome";
-import { IsValidResponse } from "../../../types/validation";
 import { cn } from "../../../utils/cn";
 import { createErrorMessage } from "../../../utils/error";
 import {
@@ -34,63 +34,6 @@ import { Separator } from "../../common/Separator";
 import SlimSelect from "../../ui/SlimSelect";
 import { verifyResultFiltersStructure } from "./utils";
 
-const presetNameValidation = async (
-  tagName: string,
-): Promise<IsValidResponse> => {
-  const validationResult = ResultFilterPresetNameSchema.safeParse(
-    normalizeName(tagName),
-  );
-  if (validationResult.success) return true;
-  return validationResult.error.errors.map((err) => err.message).join(", ");
-};
-const newFilterPresetModal = new SimpleModal({
-  id: "newFilterPresetModal",
-  title: "New Filter Preset",
-  inputs: [
-    {
-      placeholder: "Preset Name",
-      type: "text",
-      initVal: "",
-      validation: {
-        isValid: presetNameValidation,
-        debounceDelay: 0,
-      },
-    },
-  ],
-  buttonText: "add",
-  execFn: async (thisPopup, name) => {
-    const filters = thisPopup.context as ResultFilters;
-
-    try {
-      await insertResultFilterPreset({ name: normalizeName(name), filters });
-      return { status: "success", message: "Filter preset created" };
-    } catch (e) {
-      const message = createErrorMessage(e, "Error creating filter preset");
-      return { status: "error", message };
-    }
-  },
-});
-
-const deleteResultFilterPresetModal = new SimpleModal({
-  id: "removeFilterPresetModal",
-  title: "Delete Filter Preset",
-  buttonText: "delete",
-  beforeInitFn: (thisPopup) => {
-    thisPopup.text = `Are you sure you want to delete preset ${thisPopup.parameters[1]}?`;
-  },
-  execFn: async (thisPopup) => {
-    try {
-      await deleteResultFilterPreset({
-        presetId: thisPopup.parameters[0] as string,
-      });
-      return { status: "success", message: `Filter preset removed` };
-    } catch (e) {
-      const message = createErrorMessage(e, "Error deleting filter preset");
-      return { status: "error", message };
-    }
-  },
-});
-
 export function Filters(props: {
   filters: ResultFilters;
   onChangeFilters: SetStoreFunction<ResultFilters>;
@@ -119,10 +62,29 @@ export function Filters(props: {
                   <Button
                     fa={{ icon: "fa-trash", fixedWidth: true }}
                     onClick={() =>
-                      deleteResultFilterPresetModal.show(
-                        [preset._id, preset.name],
-                        {},
-                      )
+                      showSimpleModal({
+                        title: "Delete Filter Preset",
+                        buttonText: "delete",
+                        text: `Are you sure you want to delete preset ${preset.name}?`,
+
+                        execFn: async () => {
+                          try {
+                            await deleteResultFilterPreset({
+                              presetId: preset._id,
+                            });
+                            return {
+                              status: "success",
+                              message: `Filter preset removed`,
+                            };
+                          } catch (e) {
+                            const message = createErrorMessage(
+                              e,
+                              "Error deleting filter preset",
+                            );
+                            return { status: "error", message };
+                          }
+                        },
+                      })
                     }
                   />
                 </div>
@@ -296,8 +258,38 @@ export function Filters(props: {
           <Button
             text="save as preset"
             onClick={() =>
-              newFilterPresetModal.show(undefined, {
-                context: { ...unwrap(props.filters), _id: "tmp" },
+              showSimpleModal({
+                title: "New Filter Preset",
+                buttonText: "add",
+                schema: z.object({ name: PresetNameSchema }),
+                inputs: {
+                  name: {
+                    placeholder: "Preset Name",
+                    type: "text",
+                    preprocess: normalizeName,
+                  },
+                },
+
+                execFn: async ({ name }) => {
+                  const filters = { ...unwrap(props.filters), _id: "tmp" };
+
+                  try {
+                    await insertResultFilterPreset({
+                      name: normalizeName(name),
+                      filters,
+                    });
+                    return {
+                      status: "success",
+                      message: "Filter preset created",
+                    };
+                  } catch (e) {
+                    const message = createErrorMessage(
+                      e,
+                      "Error creating filter preset",
+                    );
+                    return { status: "error", message };
+                  }
+                },
               })
             }
           />
diff --git a/frontend/src/ts/components/pages/login/Register.tsx b/frontend/src/ts/components/pages/login/Register.tsx
index 3eedcc384a8c..0284dd83996f 100644
--- a/frontend/src/ts/components/pages/login/Register.tsx
+++ b/frontend/src/ts/components/pages/login/Register.tsx
@@ -1,11 +1,6 @@
-import {
-  PasswordSchema,
-  UserEmailSchema,
-  UserNameSchema,
-} from "@monkeytype/schemas/users";
+import { UserEmailSchema, UserNameSchema } from "@monkeytype/schemas/users";
 import { createForm } from "@tanstack/solid-form";
 import { JSXElement } from "solid-js";
-import { z } from "zod";
 
 import Ape from "../../../ape";
 import { signUp } from "../../../auth";
@@ -19,7 +14,7 @@ import {
   showErrorNotification,
   showNoticeNotification,
 } from "../../../states/notifications";
-import { isDevEnvironment } from "../../../utils/env";
+import { getPasswordSchema } from "../../../utils/firebase-auth";
 import { remoteValidationForm } from "../../../utils/remote-validation";
 import { H3 } from "../../common/Headers";
 import { showRegisterCaptchaModal } from "../../modals/RegisterCaptchaModal";
@@ -219,9 +214,7 @@ export function Register(): JSXElement {
         <form.Field
           name="password"
           validators={{
-            onChange: fromSchema(
-              isDevEnvironment() ? z.string().min(6) : PasswordSchema,
-            ),
+            onChange: fromSchema(getPasswordSchema()),
           }}
           children={(field) => (
             <InputField
diff --git a/frontend/src/ts/components/ui/form/InputField.tsx b/frontend/src/ts/components/ui/form/InputField.tsx
index cd4a9c7f7e4d..ca53029572a3 100644
--- a/frontend/src/ts/components/ui/form/InputField.tsx
+++ b/frontend/src/ts/components/ui/form/InputField.tsx
@@ -4,6 +4,7 @@ import { Accessor, createSignal, JSXElement, Show } from "solid-js";
 import { ZodDate, ZodFirstPartyTypeKind, ZodNumber, ZodTypeAny } from "zod";
 
 import { cn } from "../../../utils/cn";
+import { getZodType, unwrapSchema } from "../../../utils/zod";
 import { FieldIndicator } from "./FieldIndicator";
 
 export function InputField(props: {
@@ -110,12 +111,13 @@ export function InputField(props: {
   );
 }
 
-function getNumberOptions(schema: ZodTypeAny | undefined): {
+function getNumberOptions(rawSchema: ZodTypeAny | undefined): {
   min?: number;
   max?: number;
   step?: string;
 } {
-  if (schema === undefined) return {};
+  if (rawSchema === undefined) return {};
+  const schema = unwrapSchema(rawSchema);
   if (getZodType(schema) !== ZodFirstPartyTypeKind.ZodNumber) return {};
   const numberSchema = schema as ZodNumber;
 
@@ -127,13 +129,14 @@ function getNumberOptions(schema: ZodTypeAny | undefined): {
 }
 
 function getDateOptions(
-  schema: ZodTypeAny | undefined,
+  rawSchema: ZodTypeAny | undefined,
   format: (val: Date | undefined) => string | undefined,
 ): {
   min?: string;
   max?: string;
 } {
-  if (schema === undefined) return {};
+  if (rawSchema === undefined) return {};
+  const schema = unwrapSchema(rawSchema);
   if (getZodType(schema) !== ZodFirstPartyTypeKind.ZodDate) return {};
 
   const applyFormat = (it: Date | null) =>
@@ -144,8 +147,3 @@ function getDateOptions(
     max: applyFormat((schema as ZodDate).maxDate),
   };
 }
-
-function getZodType(schema: ZodTypeAny): ZodFirstPartyTypeKind {
-  // oxlint-disable-next-line typescript/no-unsafe-assignment typescript/no-unsafe-member-access
-  return schema._def["typeName"] as ZodFirstPartyTypeKind;
-}
diff --git a/frontend/src/ts/elements/account-settings/ape-key-table.ts b/frontend/src/ts/elements/account-settings/ape-key-table.ts
index eb96275b4137..55810f091500 100644
--- a/frontend/src/ts/elements/account-settings/ape-key-table.ts
+++ b/frontend/src/ts/elements/account-settings/ape-key-table.ts
@@ -10,165 +10,12 @@ import {
   ApeKeyNameSchema,
 } from "@monkeytype/schemas/ape-keys";
 import { format } from "date-fns/format";
-import { SimpleModal, TextArea } from "../simple-modal";
 import { isAuthenticated } from "../../states/core";
 import { qs, qsr } from "../../utils/dom";
-
-const editApeKey = new SimpleModal({
-  id: "editApeKey",
-  title: "Edit Ape key",
-  inputs: [
-    {
-      type: "text",
-      placeholder: "name",
-      initVal: "",
-      validation: { schema: ApeKeyNameSchema },
-    },
-  ],
-  buttonText: "edit",
-  execFn: async (_thisPopup, input) => {
-    const response = await Ape.apeKeys.save({
-      params: { apeKeyId: _thisPopup.parameters[0] ?? "" },
-      body: {
-        name: input,
-      },
-    });
-    if (response.status !== 200) {
-      return {
-        status: "error",
-        message: "Failed to update key",
-        notificationOptions: { response },
-      };
-    }
-    return {
-      status: "success",
-      message: "Key updated",
-      hideOptions: {
-        clearModalChain: true,
-      },
-    };
-  },
-});
-
-const deleteApeKeyModal = new SimpleModal({
-  id: "deleteApeKey",
-  title: "Delete Ape key",
-  text: "Are you sure?",
-  buttonText: "delete",
-  execFn: async (_thisPopup) => {
-    const response = await Ape.apeKeys.delete({
-      params: { apeKeyId: _thisPopup.parameters[0] ?? "" },
-    });
-    if (response.status !== 200) {
-      return {
-        status: "error",
-        message: "Failed to delete key",
-        notificationOptions: { response },
-      };
-    }
-
-    onApeKeyChange?.();
-
-    return {
-      status: "success",
-      message: "Key deleted",
-      hideOptions: {
-        clearModalChain: true,
-      },
-    };
-  },
-});
-
-const viewApeKey = new SimpleModal({
-  id: "viewApeKey",
-  title: "Ape key",
-  inputs: [
-    {
-      type: "textarea",
-      disabled: true,
-      placeholder: "key",
-      initVal: "",
-    },
-  ],
-  textAllowHtml: true,
-  text: `
-    This is your new Ape Key. Please keep it safe. You will only see it once!<br><br>
-    <strong>Note:</strong> Ape Keys are disabled by default, you need to enable them before they can be used.`,
-  buttonText: "close",
-  hideCallsExec: true,
-  execFn: async (_thisPopup) => {
-    return {
-      status: "success",
-      showNotification: false,
-      hideOptions: {
-        clearModalChain: true,
-      },
-    };
-  },
-  beforeInitFn: (_thisPopup): void => {
-    (_thisPopup.inputs[0] as TextArea).initVal = _thisPopup
-      .parameters[0] as string;
-  },
-  beforeShowFn: (_thisPopup): void => {
-    _thisPopup.canClose = false;
-
-    const modalEl = _thisPopup.modal.getModal();
-
-    modalEl.qs("textarea")?.setStyle({
-      height: "110px",
-    });
-    modalEl.qs(".submitButton")?.hide();
-    setTimeout(() => {
-      _thisPopup.canClose = true;
-      modalEl.qs(".submitButton")?.show();
-    }, 5000);
-  },
-});
-
-const generateApeKey = new SimpleModal({
-  id: "generateApeKey",
-  title: "Generate new Ape key",
-  inputs: [
-    {
-      type: "text",
-      placeholder: "Name",
-      initVal: "",
-      validation: { schema: ApeKeyNameSchema },
-    },
-  ],
-  buttonText: "generate",
-  execFn: async (thisPopup, name) => {
-    const response = await Ape.apeKeys.add({ body: { name, enabled: false } });
-    if (response.status !== 200) {
-      return {
-        status: "error",
-        message: "Failed to generate key",
-        notificationOptions: { response },
-      };
-    }
-
-    const data = response.body.data;
-
-    const modalChain = thisPopup.modal.getPreviousModalInChain();
-
-    onApeKeyChange?.();
-
-    return {
-      status: "success",
-      message: "Key generated",
-      hideOptions: {
-        clearModalChain: true,
-        animationMode: "modalOnly",
-      },
-      afterHide: (): void => {
-        viewApeKey.show([data.apeKey], {
-          modalChain,
-          animationMode: "modalOnly",
-        });
-      },
-    };
-  },
-});
+import { showSimpleModal } from "../../states/simple-modal";
+import { z } from "zod";
+import { showModal } from "../../states/modals";
+import { setLastGeneratedApeKey } from "../../states/account-settings";
 
 let apeKeys: ApeKeys | null = {};
 
@@ -258,10 +105,67 @@ function refreshList(): void {
       void toggleActiveKey(keyid);
     });
     tr.qs("button.deleteButton")?.on("click", (e) => {
-      deleteApeKeyModal.show([keyid], {});
+      showSimpleModal({
+        title: "Delete Ape key",
+        text: "Are you sure?",
+        buttonText: "delete",
+        execFn: async (_thisPopup) => {
+          const response = await Ape.apeKeys.delete({
+            params: { apeKeyId: keyid },
+          });
+          if (response.status !== 200) {
+            return {
+              status: "error",
+              message: "Failed to delete key",
+              notificationOptions: { response },
+            };
+          }
+
+          onApeKeyChange?.();
+
+          return {
+            status: "success",
+            message: "Key deleted",
+            hideOptions: {
+              clearModalChain: true,
+            },
+          };
+        },
+      });
     });
     tr.qs("button.editButton")?.on("click", (e) => {
-      editApeKey.show([keyid], {});
+      showSimpleModal({
+        title: "Edit Ape key",
+        buttonText: "edit",
+        schema: z.object({ name: ApeKeyNameSchema }),
+        inputs: {
+          name: {
+            type: "text",
+            placeholder: "name",
+          },
+        },
+
+        execFn: async ({ name }) => {
+          const response = await Ape.apeKeys.save({
+            params: { apeKeyId: keyid },
+            body: { name },
+          });
+          if (response.status !== 200) {
+            return {
+              status: "error",
+              message: "Failed to update key",
+              notificationOptions: { response },
+            };
+          }
+          return {
+            status: "success",
+            message: "Key updated",
+            hideOptions: {
+              clearModalChain: true,
+            },
+          };
+        },
+      });
     });
   }
 }
@@ -307,5 +211,45 @@ export async function update(onApeKeyChangee?: () => void): Promise<void> {
 }
 
 qs(".pageAccountSettings")?.onChild("click", "#generateNewApeKey", () => {
-  generateApeKey.show([], {});
+  showSimpleModal({
+    title: "Generate new Ape key",
+    buttonText: "generate",
+    schema: z.object({ name: ApeKeyNameSchema }),
+    inputs: {
+      name: {
+        type: "text",
+        placeholder: "Name",
+      },
+    },
+
+    execFn: async ({ name }) => {
+      const response = await Ape.apeKeys.add({
+        body: { name, enabled: false },
+      });
+      if (response.status !== 200) {
+        return {
+          status: "error",
+          message: "Failed to generate key",
+          notificationOptions: { response },
+        };
+      }
+
+      const data = response.body.data;
+
+      onApeKeyChange?.();
+
+      return {
+        status: "success",
+        message: "Key generated",
+        hideOptions: {
+          clearModalChain: true,
+          animationMode: "modalOnly",
+        },
+        afterHide: (): void => {
+          setLastGeneratedApeKey(data.apeKey);
+          showModal("ViewApeKey");
+        },
+      };
+    },
+  });
 });
diff --git a/frontend/src/ts/elements/simple-modal.ts b/frontend/src/ts/elements/simple-modal.ts
deleted file mode 100644
index 983dcc5754ca..000000000000
--- a/frontend/src/ts/elements/simple-modal.ts
+++ /dev/null
@@ -1,488 +0,0 @@
-import AnimatedModal, {
-  HideOptions,
-  ShowOptions,
-} from "../utils/animated-modal";
-import { Attributes, buildTag } from "../utils/tag-builder";
-import { format as dateFormat } from "date-fns/format";
-
-import { showLoaderBar, hideLoaderBar } from "../states/loader-bar";
-import {
-  showNoticeNotification,
-  addNotificationWithLevel,
-} from "../states/notifications";
-import {
-  ValidatedHtmlInputElement,
-  ValidationOptions,
-} from "./input-validation";
-import { ElementWithUtils, qsr } from "../utils/dom";
-import { Validation, ValidationResult } from "../types/validation";
-
-import { ExecReturn as BaseExecReturn } from "../states/simple-modal";
-const simpleModalEl = qsr<HTMLDialogElement>("#simpleModal");
-
-type CommonInput<TType, TValue> = {
-  type: TType;
-  name?: string;
-  initVal?: TValue;
-  placeholder?: string;
-  hidden?: boolean;
-  disabled?: boolean;
-  optional?: boolean;
-  label?: string;
-  class?: string;
-  oninput?: (event: Event) => void;
-  /**
-   * Validate the input value and indicate the validation result next to the input.
-   * If the schema is defined it is always checked first.
-   * Only if the schema validaton is passed or missing the `isValid` method is called.
-   */
-  validation?: Validation<string>;
-};
-
-export type TextInput = {
-  readOnly?: boolean;
-  clickToSelect?: boolean;
-} & CommonInput<"text", string>;
-export type TextArea = {
-  readOnly?: boolean;
-  clickToSelect?: boolean;
-} & CommonInput<"textarea", string>;
-export type PasswordInput = CommonInput<"password", string>;
-type EmailInput = CommonInput<"email", string>;
-
-type RangeInput = {
-  min: number;
-  max: number;
-  step?: number;
-} & CommonInput<"range", number>;
-
-type DateTimeInput = {
-  min?: Date;
-  max?: Date;
-} & CommonInput<"datetime-local", Date>;
-
-type DateInput = {
-  min?: Date;
-  max?: Date;
-} & CommonInput<"date", Date>;
-
-type CheckboxInput = {
-  label: string;
-  placeholder?: never;
-  description?: string;
-} & CommonInput<"checkbox", boolean>;
-
-type NumberInput = {
-  min?: number;
-  max?: number;
-} & CommonInput<"number", number>;
-
-type SimpleModalInput =
-  | TextInput
-  | TextArea
-  | PasswordInput
-  | EmailInput
-  | RangeInput
-  | DateTimeInput
-  | DateInput
-  | CheckboxInput
-  | NumberInput;
-
-type SimpleModalConfig = {
-  class?: string;
-  title: string;
-  inputs?: SimpleModalInput[];
-  text?: string;
-  textClass?: string;
-  textAllowHtml?: boolean;
-  buttonText?: string;
-  buttonAlwaysEnabled?: boolean;
-  focusFirstInput?: true | "focusAndSelect";
-  execFn: (...inputValues: string[]) => Promise<ExecReturn>;
-};
-export type ExecReturn = BaseExecReturn & {
-  hideOptions?: HideOptions;
-};
-
-type FormInput = SimpleModalInput & {
-  hasError?: boolean;
-  currentValue: () => string;
-};
-type SimpleModalOptions = Omit<SimpleModalConfig, "execFn"> & {
-  id: string;
-  execFn: (thisPopup: SimpleModal, ...params: string[]) => Promise<ExecReturn>;
-  beforeInitFn?: (thisPopup: SimpleModal) => void;
-  beforeShowFn?: (thisPopup: SimpleModal) => void;
-  canClose?: boolean;
-  hideCallsExec?: boolean;
-  showLabels?: boolean;
-  afterClickAway?: () => void;
-};
-
-export class SimpleModal {
-  parameters: string[];
-  wrapper: ElementWithUtils<HTMLDialogElement>;
-  element: ElementWithUtils;
-  modal: AnimatedModal;
-  id: string;
-  title: string;
-  inputs: FormInput[];
-  text?: string;
-  textAllowHtml: boolean;
-  buttonText?: string;
-  execFn: (thisPopup: SimpleModal, ...params: string[]) => Promise<ExecReturn>;
-  beforeInitFn: ((thisPopup: SimpleModal) => void) | undefined;
-  beforeShowFn: ((thisPopup: SimpleModal) => void) | undefined;
-  canClose: boolean;
-  hideCallsExec: boolean;
-  showLabels: boolean;
-  afterClickAway: (() => void) | undefined;
-  context?: unknown;
-  constructor(options: SimpleModalOptions) {
-    this.parameters = [];
-    this.id = options.id;
-    this.execFn = options.execFn;
-    this.title = options.title;
-    this.inputs = (options.inputs as FormInput[]) ?? [];
-    this.text = options.text;
-    this.textAllowHtml = options.textAllowHtml ?? false;
-    this.wrapper = modal.getWrapper();
-    this.element = modal.getModal();
-    this.modal = modal;
-    this.buttonText = options.buttonText;
-    this.beforeInitFn = options.beforeInitFn;
-    this.beforeShowFn = options.beforeShowFn;
-    this.canClose = options.canClose ?? true;
-    this.hideCallsExec = options.hideCallsExec ?? false;
-    this.showLabels = options.showLabels ?? false;
-    this.afterClickAway = options.afterClickAway;
-  }
-  reset(): void {
-    this.element.setHtml(`
-    <div class="title"></div>
-    <div class="inputs"></div>
-    <div class="text"></div>
-    <button type="submit" class="submitButton"></button>`);
-  }
-
-  init(): void {
-    this.reset();
-    this.element.setAttribute("data-popup-id", this.id);
-    this.element.qs(".title")?.setText(this.title);
-    if (this.textAllowHtml) {
-      this.element.qs(".text")?.setHtml(this.text ?? "");
-    } else {
-      this.element.qs(".text")?.setText(this.text ?? "");
-    }
-
-    this.initInputs();
-
-    if (this.buttonText === "" || this.buttonText === undefined) {
-      this.element.qs(".submitButton")?.remove();
-    } else {
-      this.element.qs(".submitButton")?.setText(this.buttonText);
-      this.updateSubmitButtonState();
-    }
-
-    if ((this.text ?? "") === "") {
-      this.element.qs(".text")?.hide();
-    } else {
-      this.element.qs(".text")?.show();
-    }
-  }
-
-  initInputs(): void {
-    const allInputsHidden = this.inputs.every((i) => i.hidden);
-    if (allInputsHidden || this.inputs.length === 0) {
-      this.element.qs(".inputs")?.hide();
-      return;
-    }
-
-    const inputsEl = this.element.qs(".inputs");
-    if (this.showLabels) inputsEl?.addClass("withLabel");
-
-    this.inputs.forEach((input, index) => {
-      const id = `${this.id}_${index}`;
-
-      if (this.showLabels && !input.hidden) {
-        inputsEl?.appendHtml(`<label for="${id}">${input.label ?? ""}</label>`);
-      }
-
-      const tagname = input.type === "textarea" ? "textarea" : "input";
-      const classes = input.hidden ? ["hidden"] : undefined;
-      const attributes: Attributes = {
-        id: id,
-        placeholder: input.placeholder ?? "",
-        autocomplete: "off",
-      };
-
-      if (input.type !== "textarea") {
-        attributes["value"] = input.initVal?.toString() ?? "";
-        attributes["type"] = input.type;
-      }
-      if (!input.hidden && !input.optional) {
-        attributes["required"] = true;
-      }
-      if (input.disabled) {
-        attributes["disabled"] = true;
-      }
-
-      if (input.type === "textarea") {
-        inputsEl?.appendHtml(
-          buildTag({
-            tagname,
-            classes,
-            attributes,
-            innerHTML: input.initVal,
-          }),
-        );
-      } else if (input.type === "checkbox") {
-        let html = buildTag({ tagname, classes, attributes });
-
-        if (input.description !== undefined) {
-          html += `<span>${input.description}</span>`;
-        }
-        if (!this.showLabels) {
-          html = `
-          <label class="checkbox">
-            ${html}
-            <div>${input.label}</div>
-          </label>
-        `;
-        } else {
-          html = `<div>${html}</div>`;
-        }
-        inputsEl?.appendHtml(html);
-      } else if (input.type === "range") {
-        inputsEl?.appendHtml(`
-          <div>
-            ${buildTag({
-              tagname,
-              classes,
-              attributes: {
-                ...attributes,
-                min: input.min.toString(),
-                max: input.max.toString(),
-                step: input.step?.toString(),
-                oninput: "this.nextElementSibling.innerHTML = this.value",
-              },
-            })}
-            <span>${input.initVal ?? ""}</span>
-          </div>
-          `);
-      } else {
-        switch (input.type) {
-          case "text":
-          case "password":
-          case "email":
-            break;
-
-          case "datetime-local": {
-            if (input.min !== undefined) {
-              attributes["min"] = dateFormat(
-                input.min,
-                "yyyy-MM-dd'T'HH:mm:ss",
-              );
-            }
-            if (input.max !== undefined) {
-              attributes["max"] = dateFormat(
-                input.max,
-                "yyyy-MM-dd'T'HH:mm:ss",
-              );
-            }
-            if (input.initVal !== undefined) {
-              attributes["value"] = dateFormat(
-                input.initVal,
-                "yyyy-MM-dd'T'HH:mm:ss",
-              );
-            }
-            break;
-          }
-          case "date": {
-            if (input.min !== undefined) {
-              attributes["min"] = dateFormat(input.min, "yyyy-MM-dd");
-            }
-            if (input.max !== undefined) {
-              attributes["max"] = dateFormat(input.max, "yyyy-MM-dd");
-            }
-            if (input.initVal !== undefined) {
-              attributes["value"] = dateFormat(input.initVal, "yyyy-MM-dd");
-            }
-            break;
-          }
-          case "number": {
-            attributes["min"] = input.min?.toString();
-            attributes["max"] = input.max?.toString();
-            break;
-          }
-        }
-        inputsEl?.appendHtml(buildTag({ tagname, classes, attributes }));
-      }
-      const element = qsr<HTMLInputElement>(`#${attributes["id"]}`);
-
-      const originalOnInput = element.native.oninput;
-      element.native.oninput = (e) => {
-        if (originalOnInput) originalOnInput.call(element.native, e);
-        input.oninput?.(e);
-        this.updateSubmitButtonState();
-      };
-
-      input.currentValue = () => {
-        if (element.native.type === "checkbox") {
-          return element.native.checked ? "true" : "false";
-        }
-        return element.native.value;
-      };
-
-      if (input.validation !== undefined) {
-        const options: ValidationOptions<string> = {
-          schema: input.validation.schema ?? undefined,
-          isValid:
-            input.validation.isValid !== undefined
-              ? async (val: string) => {
-                  //@ts-expect-error this is fine
-                  return input.validation.isValid(val, this);
-                }
-              : undefined,
-
-          callback: (result: ValidationResult) => {
-            input.hasError = result.status !== "success";
-
-            this.updateSubmitButtonState();
-          },
-          debounceDelay: input.validation.debounceDelay,
-        };
-
-        new ValidatedHtmlInputElement(element, options);
-      }
-    });
-
-    this.element.qs(".inputs")?.show();
-  }
-
-  exec(): void {
-    if (!this.canClose) return;
-    if (this.hasMissingRequired()) {
-      showNoticeNotification("Please fill in all fields");
-      return;
-    }
-
-    if (this.hasValidationErrors()) {
-      showNoticeNotification("Please solve all validation errors");
-      return;
-    }
-
-    this.disableInputs();
-    showLoaderBar();
-    const vals: string[] = this.inputs.map((it) => it.currentValue());
-    void this.execFn(this, ...vals).then((res) => {
-      hideLoaderBar();
-      if (!res.showNotification) {
-        addNotificationWithLevel(
-          res.message as string,
-          res.status,
-          res.notificationOptions,
-        );
-      }
-      if (res.status === "success" || res.alwaysHide) {
-        void this.hide(true, res.hideOptions).then(() => {
-          if (res.afterHide) {
-            res.afterHide();
-          }
-        });
-      } else {
-        this.enableInputs();
-        simpleModalEl.qsa("input")[0]?.focus();
-      }
-    });
-  }
-
-  disableInputs(): void {
-    simpleModalEl.qsa("input").disable();
-    simpleModalEl.qsa("button").disable();
-    simpleModalEl.qsa("textarea").disable();
-    simpleModalEl.qsa(".checkbox").addClass("disabled");
-  }
-
-  enableInputs(): void {
-    simpleModalEl.qsa("input").enable();
-    simpleModalEl.qsa("button").enable();
-    simpleModalEl.qsa("textarea").enable();
-    simpleModalEl.qsa(".checkbox").removeClass("disabled");
-  }
-
-  show(
-    parameters: string[] = [],
-    showOptions: ShowOptions & { context?: unknown },
-  ): void {
-    activePopup = this;
-    this.parameters = parameters;
-    this.context = showOptions.context;
-    void modal.show({
-      focusFirstInput: true,
-      ...showOptions,
-      beforeAnimation: async () => {
-        this.beforeInitFn?.(this);
-        this.init();
-        this.beforeShowFn?.(this);
-      },
-    });
-  }
-
-  async hide(callerIsExec?: boolean, hideOptions?: HideOptions): Promise<void> {
-    if (!this.canClose) return;
-    if (this.hideCallsExec && !callerIsExec) {
-      this.exec();
-    } else {
-      activePopup = null;
-      await modal.hide(hideOptions);
-    }
-  }
-
-  hasMissingRequired(): boolean {
-    return this.inputs
-      .filter((i) => i.hidden !== true && i.optional !== true)
-      .some((v) => v.currentValue() === undefined || v.currentValue() === "");
-  }
-
-  hasValidationErrors(): boolean {
-    return this.inputs.some((i) => i.hasError === true);
-  }
-
-  updateSubmitButtonState(): void {
-    const button = this.element.qs<HTMLButtonElement>(".submitButton");
-    if (button === null) return;
-
-    if (this.hasMissingRequired() || this.hasValidationErrors()) {
-      button.disable();
-    } else {
-      button.enable();
-    }
-  }
-}
-
-function hide(): void {
-  if (activePopup) {
-    void activePopup.hide();
-    return;
-  }
-}
-
-let activePopup: SimpleModal | null = null;
-
-const modal = new AnimatedModal({
-  dialogId: "simpleModal",
-  setup: async (modalEl): Promise<void> => {
-    modalEl.on("submit", (e) => {
-      e.preventDefault();
-      activePopup?.exec();
-    });
-  },
-  customEscapeHandler: (e): void => {
-    hide();
-  },
-  customWrapperClickHandler: (e): void => {
-    activePopup?.afterClickAway?.();
-    hide();
-  },
-});
diff --git a/frontend/src/ts/index.ts b/frontend/src/ts/index.ts
index 10a5f7efaf93..b9e848c87352 100644
--- a/frontend/src/ts/index.ts
+++ b/frontend/src/ts/index.ts
@@ -22,7 +22,6 @@ import * as Result from "./test/result";
 import { onAuthStateChanged } from "./auth";
 import { enable } from "./legacy-states/glarses-mode";
 import "./test/caps-warning";
-import "./modals/simple-modals";
 import "./input/listeners";
 import "./controllers/route-controller";
 import "./elements/no-css";
diff --git a/frontend/src/ts/modals/simple-modals-base.ts b/frontend/src/ts/modals/simple-modals-base.ts
deleted file mode 100644
index c3d9fccdad0d..000000000000
--- a/frontend/src/ts/modals/simple-modals-base.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { showErrorNotification } from "../states/notifications";
-import { ShowOptions } from "../utils/animated-modal";
-import { SimpleModal } from "../elements/simple-modal";
-
-export type PopupKey =
-  | "updateEmail"
-  | "updateName"
-  | "updatePassword"
-  | "removeGoogleAuth"
-  | "removeGithubAuth"
-  | "removePasswordAuth"
-  | "addPasswordAuth"
-  | "deleteAccount"
-  | "resetAccount"
-  | "optOutOfLeaderboards"
-  | "resetPersonalBests"
-  | "revokeAllTokens"
-  | "unlinkDiscord"
-  | "editApeKey"
-  | "updateCustomTheme"
-  | "deleteCustomTheme"
-  | "devGenerateData";
-
-export const list: Record<PopupKey, SimpleModal | undefined> = {
-  updateEmail: undefined,
-  updateName: undefined,
-  updatePassword: undefined,
-  removeGoogleAuth: undefined,
-  removeGithubAuth: undefined,
-  removePasswordAuth: undefined,
-  addPasswordAuth: undefined,
-  deleteAccount: undefined,
-  resetAccount: undefined,
-  optOutOfLeaderboards: undefined,
-  resetPersonalBests: undefined,
-  revokeAllTokens: undefined,
-  unlinkDiscord: undefined,
-  editApeKey: undefined,
-  updateCustomTheme: undefined,
-  deleteCustomTheme: undefined,
-  devGenerateData: undefined,
-};
-
-export function showPopup(
-  key: PopupKey,
-  showParams = [] as string[],
-  showOptions: ShowOptions = {},
-): void {
-  const popup = list[key];
-  if (popup === undefined) {
-    showErrorNotification("Failed to show popup - popup is not defined");
-    return;
-  }
-  popup.show(showParams, showOptions);
-}
diff --git a/frontend/src/ts/modals/simple-modals.ts b/frontend/src/ts/modals/simple-modals.ts
deleted file mode 100644
index 92150c9e408e..000000000000
--- a/frontend/src/ts/modals/simple-modals.ts
+++ /dev/null
@@ -1,1116 +0,0 @@
-import Ape from "../ape";
-import * as AccountController from "../auth";
-import * as DB from "../db";
-import { resetConfig } from "../config/lifecycle";
-import { setConfig } from "../config/setters";
-import { showNoticeNotification } from "../states/notifications";
-import { FirebaseError } from "firebase/app";
-import { getAuthenticatedUser, isAuthAvailable } from "../firebase";
-import { isAuthenticated } from "../states/core";
-import {
-  EmailAuthProvider,
-  User,
-  linkWithCredential,
-  reauthenticateWithCredential,
-  reauthenticateWithPopup,
-  unlink,
-} from "firebase/auth";
-import { reloadAfter } from "../utils/misc";
-import { isDevEnvironment } from "../utils/env";
-import { createErrorMessage } from "../utils/error";
-import * as ThemeController from "../controllers/theme-controller";
-import * as CustomThemes from "../collections/custom-themes";
-import * as AccountSettings from "../pages/account-settings";
-
-import { GenerateDataRequest } from "@monkeytype/contracts/dev";
-import {
-  CustomThemeNameSchema,
-  PasswordSchema,
-  UserEmailSchema,
-  UserNameSchema,
-} from "@monkeytype/schemas/users";
-import FileStorage from "../utils/file-storage";
-import { z } from "zod";
-import { remoteValidation } from "../utils/remote-validation";
-import { list, PopupKey, showPopup } from "./simple-modals-base";
-import { getTheme } from "../states/theme";
-import { normalizeName } from "../utils/strings";
-import { IsValidResponse } from "../types/validation";
-import {
-  ExecReturn,
-  SimpleModal,
-  PasswordInput,
-  TextInput,
-} from "../elements/simple-modal";
-
-export { list, showPopup };
-export type { PopupKey };
-
-type AuthMethod = "password" | "github.com" | "google.com";
-
-type ReauthSuccess = {
-  status: "success";
-  message: string;
-  user: User;
-};
-
-type ReauthFailed = {
-  status: "error" | "notice";
-  message: string;
-};
-
-type ReauthenticateOptions = {
-  excludeMethod?: AuthMethod;
-  password?: string;
-};
-
-function getPreferredAuthenticationMethod(
-  exclude?: AuthMethod,
-): AuthMethod | undefined {
-  const authMethods = ["password", "github.com", "google.com"] as AuthMethod[];
-  const filteredMethods = authMethods.filter((it) => it !== exclude);
-  for (const method of filteredMethods) {
-    if (isUsingAuthentication(method)) return method;
-  }
-  return undefined;
-}
-
-function isUsingPasswordAuthentication(): boolean {
-  return isUsingAuthentication("password");
-}
-
-function isUsingGithubAuthentication(): boolean {
-  return isUsingAuthentication("github.com");
-}
-
-function isUsingGoogleAuthentication(): boolean {
-  return isUsingAuthentication("google.com");
-}
-
-function isUsingAuthentication(authProvider: AuthMethod): boolean {
-  return (
-    getAuthenticatedUser()?.providerData.some(
-      (p) => p.providerId === authProvider,
-    ) ?? false
-  );
-}
-
-async function reauthenticate(
-  options: ReauthenticateOptions,
-): Promise<ReauthSuccess | ReauthFailed> {
-  if (!isAuthAvailable()) {
-    return {
-      status: "error",
-      message: "Authentication is not initialized",
-    };
-  }
-
-  const user = getAuthenticatedUser();
-  if (user === null) {
-    return {
-      status: "error",
-      message: "User is not signed in",
-    };
-  }
-
-  const authMethod = getPreferredAuthenticationMethod(options.excludeMethod);
-
-  try {
-    if (authMethod === undefined) {
-      return {
-        status: "error",
-        message:
-          "Failed to reauthenticate: there is no valid authentication present on the account.",
-      };
-    }
-
-    if (authMethod === "password") {
-      if (options.password === undefined) {
-        return {
-          status: "error",
-          message: "Failed to reauthenticate using password: password missing.",
-        };
-      }
-      const credential = EmailAuthProvider.credential(
-        user.email as string,
-        options.password,
-      );
-      await reauthenticateWithCredential(user, credential);
-    } else {
-      const authProvider =
-        authMethod === "github.com"
-          ? AccountController.githubProvider
-          : AccountController.gmailProvider;
-      await reauthenticateWithPopup(user, authProvider);
-    }
-
-    return {
-      status: "success",
-      message: "Reauthenticated",
-      user,
-    };
-  } catch (e) {
-    const typedError = e as FirebaseError;
-    if (typedError.code === "auth/wrong-password") {
-      return {
-        status: "notice",
-        message: "Incorrect password",
-      };
-    } else if (typedError.code === "auth/invalid-credential") {
-      return {
-        status: "notice",
-        message:
-          "Password is incorrect or your account does not have password authentication enabled.",
-      };
-    } else {
-      return {
-        status: "error",
-        message: `Failed to reauthenticate: ${
-          typedError?.message ?? JSON.stringify(e)
-        }`,
-      };
-    }
-  }
-}
-
-list.updateEmail = new SimpleModal({
-  id: "updateEmail",
-  title: "Update email",
-  inputs: [
-    {
-      placeholder: "Password",
-      type: "password",
-      initVal: "",
-    },
-    {
-      type: "text",
-      placeholder: "New email",
-      initVal: "",
-      validation: {
-        schema: UserEmailSchema,
-      },
-    },
-    {
-      type: "text",
-      placeholder: "Confirm new email",
-      initVal: "",
-      validation: {
-        schema: UserEmailSchema,
-      },
-    },
-  ],
-  buttonText: "update",
-  execFn: async (
-    _thisPopup,
-    password,
-    email,
-    emailConfirm,
-  ): Promise<ExecReturn> => {
-    if (email !== emailConfirm) {
-      return {
-        status: "notice",
-        message: "Emails don't match",
-      };
-    }
-
-    const reauth = await reauthenticate({ password });
-    if (reauth.status !== "success") {
-      return {
-        status: reauth.status,
-        message: reauth.message,
-      };
-    }
-
-    const response = await Ape.users.updateEmail({
-      body: {
-        newEmail: email,
-        previousEmail: reauth.user.email as string,
-      },
-    });
-
-    if (response.status !== 200) {
-      return {
-        status: "error",
-        message: "Failed to update email",
-        notificationOptions: { response },
-      };
-    }
-
-    AccountController.signOut();
-
-    return {
-      status: "success",
-      message: "Email updated",
-    };
-  },
-  beforeInitFn: (thisPopup): void => {
-    if (!isAuthenticated()) return;
-    if (!isUsingPasswordAuthentication()) {
-      thisPopup.inputs = [];
-      thisPopup.buttonText = "";
-      thisPopup.text = "Password authentication is not enabled";
-    }
-  },
-});
-
-list.removeGoogleAuth = new SimpleModal({
-  id: "removeGoogleAuth",
-  title: "Remove Google authentication",
-  inputs: [
-    {
-      placeholder: "Password",
-      type: "password",
-      initVal: "",
-    },
-  ],
-  buttonText: "remove",
-  execFn: async (_thisPopup, password): Promise<ExecReturn> => {
-    const reauth = await reauthenticate({
-      password,
-      excludeMethod: "google.com",
-    });
-    if (reauth.status !== "success") {
-      return {
-        status: reauth.status,
-        message: reauth.message,
-      };
-    }
-
-    try {
-      await unlink(reauth.user, "google.com");
-    } catch (e) {
-      const message = createErrorMessage(e, "Failed to unlink Google account");
-      return {
-        status: "error",
-        message,
-      };
-    }
-
-    AccountSettings.updateUI();
-
-    reloadAfter(3);
-    return {
-      status: "success",
-      message: "Google authentication removed",
-    };
-  },
-  beforeInitFn: (thisPopup): void => {
-    if (!isAuthenticated()) return;
-    if (!isUsingPasswordAuthentication()) {
-      thisPopup.inputs = [];
-      if (!isUsingGithubAuthentication()) {
-        thisPopup.buttonText = "";
-        thisPopup.text = "Password or GitHub authentication is not enabled";
-      }
-    }
-  },
-});
-
-list.removeGithubAuth = new SimpleModal({
-  id: "removeGithubAuth",
-  title: "Remove GitHub authentication",
-  inputs: [
-    {
-      placeholder: "Password",
-      type: "password",
-      initVal: "",
-    },
-  ],
-  buttonText: "remove",
-  execFn: async (_thisPopup, password): Promise<ExecReturn> => {
-    const reauth = await reauthenticate({
-      password,
-      excludeMethod: "github.com",
-    });
-    if (reauth.status !== "success") {
-      return {
-        status: reauth.status,
-        message: reauth.message,
-      };
-    }
-
-    try {
-      await unlink(reauth.user, "github.com");
-    } catch (e) {
-      const message = createErrorMessage(e, "Failed to unlink GitHub account");
-      return {
-        status: "error",
-        message,
-      };
-    }
-
-    AccountSettings.updateUI();
-
-    reloadAfter(3);
-    return {
-      status: "success",
-      message: "GitHub authentication removed",
-    };
-  },
-  beforeInitFn: (thisPopup): void => {
-    if (!isAuthenticated()) return;
-    if (!isUsingPasswordAuthentication()) {
-      thisPopup.inputs = [];
-      if (!isUsingGoogleAuthentication()) {
-        thisPopup.buttonText = "";
-        thisPopup.text = "Password or Google authentication is not enabled";
-      }
-    }
-  },
-});
-
-list.removePasswordAuth = new SimpleModal({
-  id: "removePaswordAuth",
-  title: "Remove Password authentication",
-  inputs: [
-    {
-      type: "checkbox",
-      label: `I understand I will lose access to my Monkeytype account if my Google/GitHub account is lost or disabled.`,
-    },
-  ],
-  buttonText: "reauthenticate to remove",
-  execFn: async (_thisPopup): Promise<ExecReturn> => {
-    const reauth = await reauthenticate({
-      excludeMethod: "password",
-    });
-    if (reauth.status !== "success") {
-      return {
-        status: reauth.status,
-        message: reauth.message,
-      };
-    }
-
-    try {
-      await unlink(reauth.user, "password");
-    } catch (e) {
-      const message = createErrorMessage(
-        e,
-        "Failed to remove password authentication",
-      );
-      return {
-        status: "error",
-        message,
-      };
-    }
-
-    AccountSettings.updateUI();
-
-    reloadAfter(3);
-    return {
-      status: "success",
-      message: "Password authentication removed",
-    };
-  },
-  beforeInitFn: (): void => {
-    if (!isAuthenticated()) return;
-  },
-});
-
-list.updateName = new SimpleModal({
-  id: "updateName",
-  title: "Update name",
-  inputs: [
-    {
-      placeholder: "password",
-      type: "password",
-      initVal: "",
-    },
-    {
-      placeholder: "new name",
-      type: "text",
-      initVal: "",
-      validation: {
-        schema: UserNameSchema,
-        isValid: remoteValidation(
-          async (name) => Ape.users.getNameAvailability({ params: { name } }),
-          { check: (data) => data.available || "Name not available" },
-        ),
-        debounceDelay: 1000,
-      },
-    },
-  ],
-  buttonText: "update",
-  execFn: async (_thisPopup, password, newName): Promise<ExecReturn> => {
-    const reauth = await reauthenticate({ password });
-    if (reauth.status !== "success") {
-      return {
-        status: reauth.status,
-        message: reauth.message,
-      };
-    }
-
-    const response = await Ape.users.updateName({
-      body: { name: newName },
-    });
-    if (response.status !== 200) {
-      return {
-        status: "error",
-        message: "Failed to update name",
-        notificationOptions: { response },
-      };
-    }
-
-    const snapshot = DB.getSnapshot();
-    if (snapshot) {
-      snapshot.name = newName;
-      DB.setSnapshot(snapshot);
-      if (snapshot.needsToChangeName) {
-        reloadAfter(2);
-      }
-    }
-
-    return {
-      status: "success",
-      message: "Name updated",
-    };
-  },
-  beforeInitFn: (thisPopup): void => {
-    if (!isAuthenticated()) return;
-    const snapshot = DB.getSnapshot();
-    if (!snapshot) return;
-    if (!isUsingPasswordAuthentication()) {
-      (thisPopup.inputs[0] as PasswordInput).hidden = true;
-      thisPopup.buttonText = "reauthenticate to update";
-    }
-    if (snapshot.needsToChangeName === true) {
-      thisPopup.text =
-        "You need to change your account name. This might be because you have a duplicate name, no account name or your name is not allowed (contains whitespace or invalid characters). Sorry for the inconvenience.";
-    }
-  },
-});
-
-list.updatePassword = new SimpleModal({
-  id: "updatePassword",
-  title: "Update password",
-  inputs: [
-    {
-      placeholder: "current password",
-      type: "password",
-      initVal: "",
-    },
-    {
-      placeholder: "new password",
-      type: "password",
-      initVal: "",
-      validation: {
-        schema: isDevEnvironment() ? z.string().min(6) : PasswordSchema,
-      },
-    },
-    {
-      placeholder: "confirm new password",
-      type: "password",
-      initVal: "",
-    },
-  ],
-  buttonText: "update",
-  execFn: async (
-    _thisPopup,
-    previousPass,
-    newPassword,
-    newPassConfirm,
-  ): Promise<ExecReturn> => {
-    if (newPassword !== newPassConfirm) {
-      return {
-        status: "notice",
-        message: "New passwords don't match",
-      };
-    }
-
-    if (newPassword === previousPass) {
-      return {
-        status: "notice",
-        message: "New password must be different from previous password",
-      };
-    }
-
-    const reauth = await reauthenticate({ password: previousPass });
-    if (reauth.status !== "success") {
-      return {
-        status: reauth.status,
-        message: reauth.message,
-      };
-    }
-
-    const response = await Ape.users.updatePassword({
-      body: { newPassword },
-    });
-
-    if (response.status !== 200) {
-      return {
-        status: "error",
-        message: "Failed to update password",
-        notificationOptions: { response },
-      };
-    }
-
-    AccountController.signOut();
-
-    return {
-      status: "success",
-      message: "Password updated",
-    };
-  },
-  beforeInitFn: (thisPopup): void => {
-    if (!isAuthenticated()) return;
-    if (!isUsingPasswordAuthentication()) {
-      thisPopup.inputs = [];
-      thisPopup.buttonText = "";
-      thisPopup.text = "Password authentication is not enabled";
-    }
-  },
-});
-
-list.addPasswordAuth = new SimpleModal({
-  id: "addPasswordAuth",
-  title: "Add password authentication",
-  inputs: [
-    {
-      placeholder: "email",
-      type: "email",
-      initVal: "",
-    },
-    {
-      placeholder: "confirm email",
-      type: "email",
-      initVal: "",
-    },
-    {
-      placeholder: "new password",
-      type: "password",
-      initVal: "",
-    },
-    {
-      placeholder: "confirm new password",
-      type: "password",
-      initVal: "",
-    },
-  ],
-  buttonText: "reauthenticate to add",
-  execFn: async (
-    _thisPopup,
-    email,
-    emailConfirm,
-    password,
-    passConfirm,
-  ): Promise<ExecReturn> => {
-    if (email !== emailConfirm) {
-      return {
-        status: "notice",
-        message: "Emails don't match",
-      };
-    }
-
-    if (password !== passConfirm) {
-      return {
-        status: "notice",
-        message: "Passwords don't match",
-      };
-    }
-
-    const reauth = await reauthenticate({ password });
-    if (reauth.status !== "success") {
-      return {
-        status: reauth.status,
-        message: reauth.message,
-      };
-    }
-
-    try {
-      const credential = EmailAuthProvider.credential(email, password);
-      await linkWithCredential(reauth.user, credential);
-    } catch (e) {
-      const message = createErrorMessage(
-        e,
-        "Failed to add password authentication",
-      );
-      return {
-        status: "error",
-        message,
-      };
-    }
-
-    const response = await Ape.users.updateEmail({
-      body: {
-        newEmail: email,
-        previousEmail: reauth.user.email as string,
-      },
-    });
-    if (response.status !== 200) {
-      return {
-        status: "error",
-        message:
-          "Password authentication added but updating the database email failed. This shouldn't happen, please contact support. Error",
-        notificationOptions: { response },
-      };
-    }
-
-    AccountSettings.updateUI();
-    return {
-      status: "success",
-      message: "Password authentication added",
-    };
-  },
-});
-
-list.deleteAccount = new SimpleModal({
-  id: "deleteAccount",
-  title: "Delete account",
-  inputs: [
-    {
-      placeholder: "password",
-      type: "password",
-      initVal: "",
-    },
-  ],
-  text: "This is the last time you can change your mind. After pressing the button everything is gone.",
-  buttonText: "delete",
-  execFn: async (_thisPopup, password): Promise<ExecReturn> => {
-    const reauth = await reauthenticate({ password });
-    if (reauth.status !== "success") {
-      return {
-        status: reauth.status,
-        message: reauth.message,
-      };
-    }
-
-    showNoticeNotification("Deleting all data...");
-    const response = await Ape.users.delete();
-
-    if (response.status !== 200) {
-      return {
-        status: "error",
-        message: "Failed to delete user data",
-        notificationOptions: { response },
-      };
-    }
-
-    reloadAfter(3);
-
-    return {
-      status: "success",
-      message: "Account deleted, goodbye",
-    };
-  },
-  beforeInitFn: (thisPopup): void => {
-    if (!isAuthenticated()) return;
-    if (!isUsingPasswordAuthentication()) {
-      thisPopup.inputs = [];
-      thisPopup.buttonText = "reauthenticate to delete";
-    }
-  },
-});
-
-list.resetAccount = new SimpleModal({
-  id: "resetAccount",
-  title: "Reset account",
-  inputs: [
-    {
-      placeholder: "password",
-      type: "password",
-      initVal: "",
-    },
-  ],
-  text: "This is the last time you can change your mind. After pressing the button everything is gone.",
-  buttonText: "reset",
-  execFn: async (_thisPopup, password): Promise<ExecReturn> => {
-    const reauth = await reauthenticate({ password });
-    if (reauth.status !== "success") {
-      return {
-        status: reauth.status,
-        message: reauth.message,
-      };
-    }
-
-    showNoticeNotification("Resetting settings...");
-    await resetConfig();
-    await FileStorage.deleteFile("LocalBackgroundFile");
-
-    showNoticeNotification("Resetting account...");
-    const response = await Ape.users.reset();
-    if (response.status !== 200) {
-      return {
-        status: "error",
-        message: "Failed to reset account",
-        notificationOptions: { response },
-      };
-    }
-
-    reloadAfter(3);
-
-    return {
-      status: "success",
-      message: "Account reset",
-    };
-  },
-  beforeInitFn: (thisPopup): void => {
-    if (!isAuthenticated()) return;
-    if (!isUsingPasswordAuthentication()) {
-      thisPopup.inputs = [];
-      thisPopup.buttonText = "reauthenticate to reset";
-    }
-  },
-});
-
-list.optOutOfLeaderboards = new SimpleModal({
-  id: "optOutOfLeaderboards",
-  title: "Opt out of leaderboards",
-  inputs: [
-    {
-      placeholder: "password",
-      type: "password",
-      initVal: "",
-    },
-  ],
-  text: "Are you sure you want to opt out of leaderboards?",
-  buttonText: "opt out",
-  execFn: async (_thisPopup, password): Promise<ExecReturn> => {
-    const reauth = await reauthenticate({ password });
-    if (reauth.status !== "success") {
-      return {
-        status: reauth.status,
-        message: reauth.message,
-      };
-    }
-
-    const response = await Ape.users.optOutOfLeaderboards();
-    if (response.status !== 200) {
-      return {
-        status: "error",
-        message: "Failed to opt out",
-        notificationOptions: { response },
-      };
-    }
-
-    reloadAfter(3);
-
-    return {
-      status: "success",
-      message: "Leaderboards opt out successful",
-    };
-  },
-  beforeInitFn: (thisPopup): void => {
-    if (!isAuthenticated()) return;
-    if (!isUsingPasswordAuthentication()) {
-      thisPopup.inputs = [];
-      thisPopup.buttonText = "reauthenticate to opt out";
-    }
-  },
-});
-
-list.resetPersonalBests = new SimpleModal({
-  id: "resetPersonalBests",
-  title: "Reset personal bests",
-  inputs: [
-    {
-      placeholder: "password",
-      type: "password",
-      initVal: "",
-    },
-  ],
-  buttonText: "reset",
-  execFn: async (_thisPopup, password): Promise<ExecReturn> => {
-    const reauth = await reauthenticate({ password });
-    if (reauth.status !== "success") {
-      return {
-        status: reauth.status,
-        message: reauth.message,
-      };
-    }
-
-    const response = await Ape.users.deletePersonalBests();
-    if (response.status !== 200) {
-      return {
-        status: "error",
-        message: "Failed to reset personal bests",
-        notificationOptions: { response },
-      };
-    }
-
-    const snapshot = DB.getSnapshot();
-    if (!snapshot) {
-      return {
-        status: "error",
-        message: "Failed to reset personal bests: no snapshot",
-      };
-    }
-
-    snapshot.personalBests = {
-      time: {},
-      words: {},
-      quote: {},
-      zen: {},
-      custom: {},
-    };
-
-    return {
-      status: "success",
-      message: "Personal bests reset",
-    };
-  },
-  beforeInitFn: (thisPopup): void => {
-    if (!isAuthenticated()) return;
-    if (!isUsingPasswordAuthentication()) {
-      thisPopup.inputs = [];
-      thisPopup.buttonText = "reauthenticate to reset";
-    }
-  },
-});
-
-list.revokeAllTokens = new SimpleModal({
-  id: "revokeAllTokens",
-  title: "Revoke all tokens",
-  inputs: [
-    {
-      placeholder: "password",
-      type: "password",
-      initVal: "",
-    },
-  ],
-  text: "Are you sure you want to do this? This will log you out of all devices.",
-  buttonText: "revoke all",
-  execFn: async (_thisPopup, password): Promise<ExecReturn> => {
-    const reauth = await reauthenticate({ password });
-    if (reauth.status !== "success") {
-      return {
-        status: reauth.status,
-        message: reauth.message,
-      };
-    }
-
-    const response = await Ape.users.revokeAllTokens();
-    if (response.status !== 200) {
-      return {
-        status: "error",
-        message: "Failed to revoke tokens",
-        notificationOptions: { response },
-      };
-    }
-
-    reloadAfter(3);
-
-    return {
-      status: "success",
-      message: "Tokens revoked",
-    };
-  },
-  beforeInitFn: (thisPopup): void => {
-    if (!isAuthenticated()) return;
-    const snapshot = DB.getSnapshot();
-    if (!snapshot) return;
-    if (!isUsingPasswordAuthentication()) {
-      (thisPopup.inputs[0] as PasswordInput).hidden = true;
-      thisPopup.buttonText = "reauthenticate to revoke all tokens";
-    }
-  },
-});
-
-list.unlinkDiscord = new SimpleModal({
-  id: "unlinkDiscord",
-  title: "Unlink Discord",
-  text: "Are you sure you want to unlink your Discord account?",
-  buttonText: "unlink",
-  execFn: async (): Promise<ExecReturn> => {
-    const snap = DB.getSnapshot();
-    if (!snap) {
-      return {
-        status: "error",
-        message: "Failed to unlink Discord: no snapshot",
-      };
-    }
-
-    const response = await Ape.users.unlinkDiscord();
-    if (response.status !== 200) {
-      return {
-        status: "error",
-        message: "Failed to unlink Discord",
-        notificationOptions: { response },
-      };
-    }
-
-    snap.discordAvatar = undefined;
-    snap.discordId = undefined;
-    DB.setSnapshot(snap);
-    AccountSettings.updateUI();
-
-    return {
-      status: "success",
-      message: "Discord unlinked",
-    };
-  },
-});
-
-const customThemeValidation = async (
-  name: string,
-): Promise<IsValidResponse> => {
-  const validationResult = CustomThemeNameSchema.safeParse(normalizeName(name));
-  if (validationResult.success) return true;
-  return validationResult.error.errors.map((err) => err.message).join(", ");
-};
-
-list.updateCustomTheme = new SimpleModal({
-  id: "updateCustomTheme",
-  title: "Update custom theme",
-  inputs: [
-    {
-      type: "text",
-      placeholder: "name",
-      initVal: "",
-      validation: { isValid: customThemeValidation, debounceDelay: 0 },
-    },
-    {
-      type: "checkbox",
-      initVal: false,
-      label: "Update custom theme to current colors",
-      optional: true,
-    },
-  ],
-  buttonText: "update",
-  execFn: async (_thisPopup, name, updateColors): Promise<ExecReturn> => {
-    const themeId = _thisPopup.parameters[0] as string;
-    const customTheme = CustomThemes.__nonReactive.getCustomTheme(themeId);
-    if (customTheme === undefined) {
-      return {
-        status: "error",
-        message: "Failed to update custom theme: theme not found",
-      };
-    }
-
-    let newColors =
-      updateColors === "true"
-        ? ThemeController.convertThemeToCustomColors(getTheme())
-        : customTheme.colors;
-
-    await CustomThemes.editCustomTheme({
-      themeId: customTheme._id,
-      name: normalizeName(name),
-      colors: newColors,
-    });
-    setConfig("customThemeColors", newColors);
-
-    return {
-      status: "success",
-      message: "Custom theme updated",
-    };
-  },
-  beforeInitFn: (_thisPopup): void => {
-    const themeId = _thisPopup.parameters[0] as string;
-    const customTheme = CustomThemes.__nonReactive.getCustomTheme(themeId);
-    if (!customTheme) return;
-    (_thisPopup.inputs[0] as TextInput).initVal = customTheme.name.replace(
-      /_/g,
-      " ",
-    );
-  },
-});
-
-list.deleteCustomTheme = new SimpleModal({
-  id: "deleteCustomTheme",
-  title: "Delete custom theme",
-  text: "Are you sure?",
-  buttonText: "delete",
-  execFn: async (_thisPopup): Promise<ExecReturn> => {
-    await CustomThemes.deleteCustomTheme({
-      themeId: _thisPopup.parameters[0] as string,
-    });
-
-    return {
-      status: "success",
-      message: "Custom theme deleted",
-    };
-  },
-});
-
-list.devGenerateData = new SimpleModal({
-  id: "devGenerateData",
-  title: "Generate data",
-  showLabels: true,
-  inputs: [
-    {
-      type: "text",
-      label: "username",
-      placeholder: "username",
-      oninput: (event): void => {
-        const target = event.target as HTMLInputElement;
-        const span = document.querySelector(
-          "#devGenerateData_1 + span",
-        ) as HTMLInputElement;
-        span.innerText = `if checked, user will be created with ${target.value}@example.com and password: password`;
-        return;
-      },
-      validation: {
-        schema: UserNameSchema,
-      },
-    },
-    {
-      type: "checkbox",
-      label: "create user",
-      description:
-        "if checked, user will be created with {username}@example.com and password: password",
-      optional: true,
-    },
-    {
-      type: "date",
-      label: "first test",
-      optional: true,
-    },
-    {
-      type: "date",
-      label: "last test",
-      max: new Date(),
-      optional: true,
-    },
-    {
-      type: "range",
-      label: "min tests per day",
-      initVal: 0,
-      min: 0,
-      max: 200,
-      step: 10,
-    },
-    {
-      type: "range",
-      label: "max tests per day",
-      initVal: 50,
-      min: 0,
-      max: 200,
-      step: 10,
-    },
-  ],
-  buttonText: "generate (might take a while)",
-  execFn: async (
-    _thisPopup,
-    username,
-    createUser,
-    firstTestTimestamp,
-    lastTestTimestamp,
-    minTestsPerDay,
-    maxTestsPerDay,
-  ): Promise<ExecReturn> => {
-    const request: GenerateDataRequest = {
-      username,
-      createUser: createUser === "true",
-    };
-    if (firstTestTimestamp !== undefined && firstTestTimestamp.length > 0) {
-      request.firstTestTimestamp = Date.parse(firstTestTimestamp);
-    }
-    if (lastTestTimestamp !== undefined && lastTestTimestamp.length > 0) {
-      request.lastTestTimestamp = Date.parse(lastTestTimestamp);
-    }
-    if (minTestsPerDay !== undefined && minTestsPerDay.length > 0) {
-      request.minTestsPerDay = Number.parseInt(minTestsPerDay);
-    }
-    if (maxTestsPerDay !== undefined && maxTestsPerDay.length > 0) {
-      request.maxTestsPerDay = Number.parseInt(maxTestsPerDay);
-    }
-
-    const result = await Ape.dev.generateData({ body: request });
-
-    return {
-      status: result.status === 200 ? "success" : "error",
-      message: result.body.message,
-      hideOptions: {
-        clearModalChain: true,
-      },
-    };
-  },
-});
diff --git a/frontend/src/ts/pages/account-settings.ts b/frontend/src/ts/pages/account-settings.ts
index 21618bcc7ee1..2df56a08e236 100644
--- a/frontend/src/ts/pages/account-settings.ts
+++ b/frontend/src/ts/pages/account-settings.ts
@@ -13,8 +13,20 @@ import { showErrorNotification } from "../states/notifications";
 import { z } from "zod";
 import { authEvent } from "../events/auth";
 import { qs, qsa, qsr, onDOMReady } from "../utils/dom";
-import { showPopup } from "../modals/simple-modals-base";
 import { addGithubAuth, addGoogleAuth } from "../auth";
+import { showUpdateEmailModal } from "../components/modals/account-settings/UpdateEmailModal";
+import { showUpdateNameModal } from "../components/modals/account-settings/UpdateNameModal";
+import { showUpdatePasswordModal } from "../components/modals/account-settings/UpdatePasswordModal";
+import { showRemoveAuthMethodModal } from "../components/modals/account-settings/RemoveAuthMethodModal";
+import { showAddPasswordAuthModal } from "../components/modals/account-settings/AddPasswordAuthModal";
+import {
+  showDeleteAccountModal,
+  showOptOutOfLeaderboardsModal,
+  showResetAccountModal,
+  showResetPersonalBestsModal,
+  showRevokeAllTokensModal,
+} from "../components/modals/account-settings/ReauthConfirmModals";
+import { showUnlinkDiscordModal } from "../components/modals/account-settings/UnlinkDiscordModal";
 
 const pageElement = qsr(".page.pageAccountSettings");
 
@@ -187,65 +199,65 @@ qs(".page.pageAccountSettings #setStreakHourOffset")?.on("click", () => {
 });
 
 qs(".pageAccountSettings")?.onChild("click", "#unlinkDiscordButton", () => {
-  showPopup("unlinkDiscord");
+  showUnlinkDiscordModal({ callback: updateUI });
 });
 
 qs(".pageAccountSettings")?.onChild("click", "#removeGoogleAuth", () => {
-  showPopup("removeGoogleAuth");
+  showRemoveAuthMethodModal({ authMethod: "google.com", callback: updateUI });
 });
 
 qs(".pageAccountSettings")?.onChild("click", "#removeGithubAuth", () => {
-  showPopup("removeGithubAuth");
+  showRemoveAuthMethodModal({ authMethod: "github.com", callback: updateUI });
 });
 
 qs(".pageAccountSettings")?.onChild("click", "#removePasswordAuth", () => {
-  showPopup("removePasswordAuth");
+  showRemoveAuthMethodModal({ authMethod: "password", callback: updateUI });
 });
 
 qs(".pageAccountSettings")?.onChild("click", "#addPasswordAuth", () => {
-  showPopup("addPasswordAuth");
+  showAddPasswordAuthModal({ callback: updateUI });
+});
+
+qs(".pageAccountSettings")?.onChild("click", "#updateAccountName", () => {
+  showUpdateNameModal();
 });
 
 qs(".pageAccountSettings")?.onChild("click", "#emailPasswordAuth", () => {
-  showPopup("updateEmail");
+  showUpdateEmailModal();
 });
 
 qs(".pageAccountSettings")?.onChild("click", "#passPasswordAuth", () => {
-  showPopup("updatePassword");
+  showUpdatePasswordModal();
 });
 
 qs(".pageAccountSettings")?.onChild("click", "#deleteAccount", () => {
-  showPopup("deleteAccount");
+  showDeleteAccountModal();
 });
 
 qs(".pageAccountSettings")?.onChild("click", "#resetAccount", () => {
-  showPopup("resetAccount");
+  showResetAccountModal();
 });
 
 qs(".pageAccountSettings")?.onChild(
   "click",
   "#optOutOfLeaderboardsButton",
   () => {
-    showPopup("optOutOfLeaderboards");
+    showOptOutOfLeaderboardsModal();
   },
 );
 
 qs(".pageAccountSettings")?.onChild("click", "#revokeAllTokens", () => {
-  showPopup("revokeAllTokens");
+  showRevokeAllTokensModal();
 });
 
 qs(".pageAccountSettings")?.onChild(
   "click",
   "#resetPersonalBestsButton",
   () => {
-    showPopup("resetPersonalBests");
+    showResetPersonalBestsModal();
   },
 );
 
-qs(".pageAccountSettings")?.onChild("click", "#updateAccountName", () => {
-  showPopup("updateName");
-});
-
 qs(".pageAccountSettings")?.onChild("click", "#addGoogleAuth", () => {
   void addGoogleAuth();
 });
diff --git a/frontend/src/ts/pages/friends.ts b/frontend/src/ts/pages/friends.ts
index 4da6ef1f5185..3edf4962187e 100644
--- a/frontend/src/ts/pages/friends.ts
+++ b/frontend/src/ts/pages/friends.ts
@@ -1,6 +1,5 @@
 import Page from "./page";
 import * as Skeleton from "../utils/skeleton";
-import { SimpleModal } from "../elements/simple-modal";
 import Ape from "../ape";
 import {
   intervalToDuration,
@@ -37,86 +36,14 @@ import { showLoaderBar, hideLoaderBar } from "../states/loader-bar";
 import { LocalStorageWithSchema } from "../utils/local-storage-with-schema";
 import { remoteValidation } from "../utils/remote-validation";
 import { qs, qsr, onDOMReady } from "../utils/dom";
+import { showSimpleModal } from "../states/simple-modal";
+import { z } from "zod";
 
 let friendsTable: SortedTable<Friend> | undefined = undefined;
 
 let pendingRequests: Connection[] | undefined;
 let friendsList: Friend[] | undefined;
 
-const addFriendModal = new SimpleModal({
-  id: "addFriend",
-  title: "Add a friend",
-  inputs: [
-    {
-      placeholder: "user name",
-      type: "text",
-      initVal: "",
-      validation: {
-        schema: UserNameWithoutFilterSchema,
-        isValid: remoteValidation(
-          async (name) => Ape.users.getNameAvailability({ params: { name } }),
-          { check: (data) => !data.available || "Unknown user" },
-        ),
-        debounceDelay: 1000,
-      },
-    },
-  ],
-  buttonText: "request",
-  execFn: async (_thisPopup, receiverName) => {
-    const result = await addFriend(receiverName);
-
-    if (result === true) {
-      updatePendingConnections();
-      return { status: "success", message: `Request sent to ${receiverName}` };
-    }
-
-    let status: "error" | "notice" | "success" = "error";
-    let message: string = "Unknown error";
-
-    if (result.includes("already exists")) {
-      status = "notice";
-      message = `You are already friends with ${receiverName}`;
-    } else if (result.includes("request already sent")) {
-      status = "notice";
-      message = `You have already sent a friend request to ${receiverName}`;
-    } else if (result.includes("blocked by initiator")) {
-      status = "notice";
-      message = `You have blocked ${receiverName}`;
-    } else if (result.includes("blocked by receiver")) {
-      status = "notice";
-      message = `${receiverName} has blocked you`;
-    }
-
-    return { status, message, alwaysHide: true };
-  },
-});
-
-const removeFriendModal = new SimpleModal({
-  id: "confirmUnfriend",
-  title: "Remove friend",
-  buttonText: "remove friend",
-  text: "Are you sure you want to remove as a friend?",
-  beforeInitFn: (thisPopup) => {
-    thisPopup.text = `Are you sure you want to remove ${thisPopup.parameters[1]} as a friend?`;
-  },
-  execFn: async (thisPopup) => {
-    const connectionId = thisPopup.parameters[0] as string;
-    const result = await Ape.connections.delete({
-      params: { id: connectionId },
-    });
-    if (result.status !== 200) {
-      return { status: "error", message: result.body.message };
-    } else {
-      friendsList = friendsList?.filter(
-        (it) => it.connectionId !== connectionId,
-      );
-      friendsTable?.setData(friendsList ?? []);
-      friendsTable?.updateBody();
-      return { status: "success", message: `Friend removed` };
-    }
-  },
-});
-
 async function fetchPendingConnections(): Promise<void> {
   const result = await Ape.connections.get({
     query: { status: "pending", type: "incoming" },
@@ -370,9 +297,58 @@ function formatStreak(length?: number, prefix?: string): string {
     : "-";
 }
 
-qs(".pageFriends button.friendAdd")?.on("click", () => {
-  addFriendModal.show(undefined, {});
-});
+qs(".pageFriends button.friendAdd")?.on("click", () =>
+  showSimpleModal({
+    title: "Add a friend",
+    buttonText: "request",
+    schema: z.object({ receiverName: UserNameWithoutFilterSchema }),
+    inputs: {
+      receiverName: {
+        placeholder: "user name",
+        type: "text",
+        validation: {
+          isValid: remoteValidation(
+            async (name: string) =>
+              Ape.users.getNameAvailability({ params: { name } }),
+            { check: (data) => !data.available || "Unknown user" },
+          ),
+          debounceDelay: 1000,
+        },
+      },
+    },
+
+    execFn: async ({ receiverName }) => {
+      const result = await addFriend(receiverName);
+
+      if (result === true) {
+        updatePendingConnections();
+        return {
+          status: "success",
+          message: `Request sent to ${receiverName}`,
+        };
+      }
+
+      let status: "error" | "notice" | "success" = "error";
+      let message: string = "Unknown error";
+
+      if (result.includes("already exists")) {
+        status = "notice";
+        message = `You are already friends with ${receiverName}`;
+      } else if (result.includes("request already sent")) {
+        status = "notice";
+        message = `You have already sent a friend request to ${receiverName}`;
+      } else if (result.includes("blocked by initiator")) {
+        status = "notice";
+        message = `You have blocked ${receiverName}`;
+      } else if (result.includes("blocked by receiver")) {
+        status = "notice";
+        message = `${receiverName} has blocked you`;
+      }
+
+      return { status, message, alwaysHide: true };
+    },
+  }),
+);
 
 // need to set the listener for action buttons on the table because the table content is getting replaced
 qs(".pageFriends .pendingRequests table")?.on("click", async (e) => {
@@ -463,7 +439,27 @@ qs(".pageFriends .friends table")?.on("click", async (e) => {
   if (action === "remove") {
     const name = row.querySelector("a.entryName")?.textContent ?? "";
 
-    removeFriendModal.show([connectionId, name], {});
+    showSimpleModal({
+      title: "Remove friend",
+      buttonText: "remove friend",
+      text: `Are you sure you want to remove ${name} as a friend?`,
+
+      execFn: async () => {
+        const result = await Ape.connections.delete({
+          params: { id: connectionId },
+        });
+        if (result.status !== 200) {
+          return { status: "error", message: result.body.message };
+        } else {
+          friendsList = friendsList?.filter(
+            (it) => it.connectionId !== connectionId,
+          );
+          friendsTable?.setData(friendsList ?? []);
+          friendsTable?.updateBody();
+          return { status: "success", message: `Friend removed` };
+        }
+      },
+    });
   }
 });
 
diff --git a/frontend/src/ts/states/account-settings.ts b/frontend/src/ts/states/account-settings.ts
new file mode 100644
index 000000000000..ad24dbe7eac0
--- /dev/null
+++ b/frontend/src/ts/states/account-settings.ts
@@ -0,0 +1,5 @@
+import { createSignal } from "solid-js";
+
+export const [getLastGeneratedApeKey, setLastGeneratedApeKey] = createSignal<
+  string | undefined
+>(undefined);
diff --git a/frontend/src/ts/states/modals.ts b/frontend/src/ts/states/modals.ts
index 2fc42734ceeb..47b7f82d525b 100644
--- a/frontend/src/ts/states/modals.ts
+++ b/frontend/src/ts/states/modals.ts
@@ -28,7 +28,8 @@ export type ModalId =
   | "Cookies"
   | "AddPresetModal"
   | "EditPresetModal"
-  | "EditProfile";
+  | "EditProfile"
+  | "ViewApeKey";
 
 export type ModalVisibility = {
   visible: boolean;
diff --git a/frontend/src/ts/utils/firebase-auth.ts b/frontend/src/ts/utils/firebase-auth.ts
new file mode 100644
index 000000000000..3d0f2794862b
--- /dev/null
+++ b/frontend/src/ts/utils/firebase-auth.ts
@@ -0,0 +1,143 @@
+import * as AccountController from "../auth";
+import {
+  EmailAuthProvider,
+  reauthenticateWithCredential,
+  reauthenticateWithPopup,
+  User,
+} from "firebase/auth";
+import { getAuthenticatedUser, isAuthAvailable } from "../firebase";
+import { FirebaseError } from "firebase/app";
+import { isDevEnvironment } from "./env";
+import { PasswordSchema } from "@monkeytype/schemas/users";
+import { z, ZodString } from "zod";
+
+export type AuthMethod = "password" | "github.com" | "google.com";
+
+type ReauthSuccess = {
+  status: "success";
+  message: string;
+  user: User;
+};
+
+type ReauthFailed = {
+  status: "error" | "notice";
+  message: string;
+};
+
+type ReauthenticateOptions = {
+  excludeMethod?: AuthMethod;
+  password?: string;
+};
+
+export function isUsingPasswordAuthentication(): boolean {
+  return isUsingAuthentication("password");
+}
+
+export function isUsingGithubAuthentication(): boolean {
+  return isUsingAuthentication("github.com");
+}
+
+export function isUsingGoogleAuthentication(): boolean {
+  return isUsingAuthentication("google.com");
+}
+
+function isUsingAuthentication(authProvider: AuthMethod): boolean {
+  return (
+    getAuthenticatedUser()?.providerData.some(
+      (p) => p.providerId === authProvider,
+    ) ?? false
+  );
+}
+
+export async function reauthenticate(
+  options: ReauthenticateOptions,
+): Promise<ReauthSuccess | ReauthFailed> {
+  if (!isAuthAvailable()) {
+    return {
+      status: "error",
+      message: "Authentication is not initialized",
+    };
+  }
+
+  const user = getAuthenticatedUser();
+  if (user === null) {
+    return {
+      status: "error",
+      message: "User is not signed in",
+    };
+  }
+
+  const authMethod = getPreferredAuthenticationMethod(options.excludeMethod);
+
+  try {
+    if (authMethod === undefined) {
+      return {
+        status: "error",
+        message:
+          "Failed to reauthenticate: there is no valid authentication present on the account.",
+      };
+    }
+
+    if (authMethod === "password") {
+      if (options.password === undefined) {
+        return {
+          status: "error",
+          message: "Failed to reauthenticate using password: password missing.",
+        };
+      }
+      const credential = EmailAuthProvider.credential(
+        user.email as string,
+        options.password,
+      );
+      await reauthenticateWithCredential(user, credential);
+    } else {
+      const authProvider =
+        authMethod === "github.com"
+          ? AccountController.githubProvider
+          : AccountController.gmailProvider;
+      await reauthenticateWithPopup(user, authProvider);
+    }
+
+    return {
+      status: "success",
+      message: "Reauthenticated",
+      user,
+    };
+  } catch (e) {
+    const typedError = e as FirebaseError;
+    if (typedError.code === "auth/wrong-password") {
+      return {
+        status: "notice",
+        message: "Incorrect password",
+      };
+    } else if (typedError.code === "auth/invalid-credential") {
+      return {
+        status: "notice",
+        message:
+          "Password is incorrect or your account does not have password authentication enabled.",
+      };
+    } else {
+      return {
+        status: "error",
+        message: `Failed to reauthenticate: ${
+          typedError?.message ?? JSON.stringify(e)
+        }`,
+      };
+    }
+  }
+}
+
+function getPreferredAuthenticationMethod(
+  exclude?: AuthMethod,
+): AuthMethod | undefined {
+  const authMethods = ["password", "github.com", "google.com"] as AuthMethod[];
+  const filteredMethods = authMethods.filter((it) => it !== exclude);
+  for (const method of filteredMethods) {
+    if (isUsingAuthentication(method)) return method;
+  }
+  return undefined;
+}
+
+export function getPasswordSchema(): ZodString {
+  return isDevEnvironment() ? z.string().min(6) : PasswordSchema;
+}
diff --git a/frontend/src/ts/utils/zod.ts b/frontend/src/ts/utils/zod.ts
index 325d715f1079..6f5266a8eb2b 100644
--- a/frontend/src/ts/utils/zod.ts
+++ b/frontend/src/ts/utils/zod.ts
@@ -1,4 +1,4 @@
-import { z, ZodSchema } from "zod";
+import { z, ZodFirstPartyTypeKind, ZodSchema, ZodTypeAny } from "zod";
 
 export function getOptions<T extends ZodSchema>(
   schema: T,
@@ -16,3 +16,26 @@ export function getOptions<T extends ZodSchema>(
   }
   return undefined;
 }
+
+export function getZodType(schema: ZodTypeAny): ZodFirstPartyTypeKind {
+  // oxlint-disable-next-line typescript/no-unsafe-assignment typescript/no-unsafe-member-access
+  return schema._def["typeName"] as ZodFirstPartyTypeKind;
+}
+
+/**
+ * Unwraps a Zod schema by removing optional or default wrappers,
+ * returning the underlying inner schema.
+ **/
+export function unwrapSchema<T extends ZodTypeAny>(schema: T): T {
+  const type = getZodType(schema);
+
+  if (
+    type === ZodFirstPartyTypeKind.ZodOptional ||
+    type === ZodFirstPartyTypeKind.ZodDefault
+  ) {
+    // oxlint-disable-next-line typescript/no-unsafe-assignment typescript/no-unsafe-member-access
+    return schema._def["innerType"] as T;
+  }
+
+  return schema;
+}