From 28db631f22937dfe1af120ddb1fc2dbb0991c24d Mon Sep 17 00:00:00 2001
From: Christian Fehmer <fehmer@users.noreply.github.com>
Date: Fri, 26 Jun 2026 10:29:39 +0200
Subject: [PATCH] refactor: solid account settings (@fehmer) (#8090)

Co-authored-by: Miodec <jack@monkeytype.com>
---
 frontend/src/html/pages/account-settings.html | 285 -----------------
 frontend/src/index.html                       |   4 +-
 frontend/src/styles/account-settings.scss     | 195 ------------
 frontend/src/styles/index.scss                |   2 +-
 frontend/src/styles/media-queries-blue.scss   |  15 -
 frontend/src/styles/media-queries-green.scss  |  14 -
 frontend/src/styles/media-queries-yellow.scss |  18 --
 frontend/src/ts/auth.tsx                      | 141 ++++++++-
 frontend/src/ts/collections/ape-keys.ts       | 200 ++++++++++++
 frontend/src/ts/components/common/Setting.tsx | 132 ++++++++
 .../account-settings/AddPasswordAuthModal.tsx |  50 +--
 .../RemoveAuthMethodModal.tsx                 |   9 -
 .../account-settings/UnlinkDiscordModal.tsx   |   6 +-
 .../account-settings/UpdateNameModal.tsx      |  13 +-
 frontend/src/ts/components/mount.tsx          |   4 +-
 .../account-settings/AccountSettingsPage.tsx  |  57 ++++
 .../pages/account-settings/AccountTab.tsx     | 180 +++++++++++
 .../pages/account-settings/ApeKeysTab.tsx     | 209 +++++++++++++
 .../account-settings/AuthenticationTab.tsx    | 118 +++++++
 .../{BlockedUsers.tsx => BlockedUsersTab.tsx} |  16 +-
 .../pages/account-settings/DangerZoneTab.tsx  |  54 ++++
 .../pages/account-settings/utils.tsx          |  30 ++
 .../pages/connections/PendingRequests.tsx     |   2 +-
 .../ts/components/pages/settings/Setting.tsx  |  84 -----
 .../pages/settings/SettingsPage.tsx           |   2 +-
 .../custom-setting/AnimationFpsLimit.tsx      |   2 +-
 .../custom-setting/AutoSwitchTheme.tsx        |   2 +-
 .../custom-setting/CustomBackground.tsx       |   2 +-
 .../CustomBackgroundFilters.tsx               |   2 +-
 .../custom-setting/CustomLayoutfluid.tsx      |   2 +-
 .../custom-setting/CustomPolyglot.tsx         |   2 +-
 .../settings/custom-setting/FontFamily.tsx    |   2 +-
 .../pages/settings/custom-setting/Funbox.tsx  |   2 +-
 .../settings/custom-setting/ImportExport.tsx  |   2 +-
 .../settings/custom-setting/KeymapLayout.tsx  |   2 +-
 .../settings/custom-setting/KeymapSize.tsx    |   2 +-
 .../settings/custom-setting/Language.tsx      |   2 +-
 .../pages/settings/custom-setting/Layout.tsx  |   2 +-
 .../settings/custom-setting/MaxLineWidth.tsx  |   2 +-
 .../pages/settings/custom-setting/MinAcc.tsx  |   2 +-
 .../settings/custom-setting/MinBurst.tsx      |   2 +-
 .../settings/custom-setting/MinSpeed.tsx      |   2 +-
 .../settings/custom-setting/PaceCaret.tsx     |   2 +-
 .../pages/settings/custom-setting/Presets.tsx |   2 +-
 .../settings/custom-setting/SoundVolume.tsx   |   2 +-
 .../pages/settings/custom-setting/Tags.tsx    |   2 +-
 .../pages/settings/custom-setting/Theme.tsx   |   2 +-
 .../src/ts/components/ui/table/DataTable.tsx  | 153 ++++-----
 .../src/ts/controllers/page-controller.ts     |  16 +-
 .../account-settings/ape-key-table.ts         | 245 ---------------
 frontend/src/ts/pages/account-settings.ts     | 294 ------------------
 frontend/src/ts/states/account-settings.ts    |  68 ++++
 .../src/ts/states/leaderboard-selection.ts    |   2 +-
 53 files changed, 1318 insertions(+), 1344 deletions(-)
 delete mode 100644 frontend/src/html/pages/account-settings.html
 delete mode 100644 frontend/src/styles/account-settings.scss
 create mode 100644 frontend/src/ts/collections/ape-keys.ts
 create mode 100644 frontend/src/ts/components/common/Setting.tsx
 create mode 100644 frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx
 create mode 100644 frontend/src/ts/components/pages/account-settings/AccountTab.tsx
 create mode 100644 frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx
 create mode 100644 frontend/src/ts/components/pages/account-settings/AuthenticationTab.tsx
 rename frontend/src/ts/components/pages/account-settings/{BlockedUsers.tsx => BlockedUsersTab.tsx} (90%)
 create mode 100644 frontend/src/ts/components/pages/account-settings/DangerZoneTab.tsx
 create mode 100644 frontend/src/ts/components/pages/account-settings/utils.tsx
 delete mode 100644 frontend/src/ts/components/pages/settings/Setting.tsx
 delete mode 100644 frontend/src/ts/elements/account-settings/ape-key-table.ts
 delete mode 100644 frontend/src/ts/pages/account-settings.ts

diff --git a/frontend/src/html/pages/account-settings.html b/frontend/src/html/pages/account-settings.html
deleted file mode 100644
index f809e0eac9cd..000000000000
--- a/frontend/src/html/pages/account-settings.html
+++ /dev/null
@@ -1,285 +0,0 @@
-<div class="page pageAccountSettings hidden" id="pageAccountSettings">
-  <div class="content">
-    <!-- <div class="title">
-      <i class="fas fa-cog"></i>
-      account settings
-    </div> -->
-    <div class="main">
-      <div class="tabs">
-        <button class="text" data-tab="account">
-          <i class="fas fa-user"></i>
-          account
-        </button>
-        <button class="text" data-tab="authentication">
-          <i class="fas fa-key"></i>
-          authentication
-        </button>
-        <button class="text" data-tab="blockedUsers">
-          <i class="fas fa-user-shield"></i>
-          blocked users
-        </button>
-        <button class="text" data-tab="apeKeys">
-          <i class="fas fa-code"></i>
-          ape keys
-        </button>
-        <button class="text" data-tab="dangerZone">
-          <i class="fas fa-exclamation-triangle"></i>
-          danger zone
-        </button>
-      </div>
-      <div class="right">
-        <div class="tab hidden" data-tab="account">
-          <div class="section discordIntegration">
-            <div class="title">
-              <i class="fab fa-discord"></i>
-              <span>discord integration</span>
-            </div>
-            <div class="text">
-              When you connect your monkeytype account to your Discord account,
-              you will be automatically assigned a new role every time you
-              achieve a new personal best in a 60 second test. If you link your
-              accounts before joining the Discord server, the bot
-              <i>will not</i>
-              give you a role.
-            </div>
-            <div class="buttons">
-              <button class="getLinkAndGoToOauth">link</button>
-            </div>
-            <div class="info hidden">
-              <div>
-                <i class="fas fa-check"></i>
-                Your accounts are linked!
-              </div>
-              <div id="discordButtonGroup">
-                <button
-                  id="updateDiscordAvatarButton"
-                  class="textButton getLinkAndGoToOauth"
-                >
-                  <i class="fas fa-sync-alt" aria-hidden="true"></i>
-                  Update avatar
-                </button>
-                <button id="unlinkDiscordButton" class="textButton">
-                  <i class="fas fa-unlink" aria-hidden="true"></i>
-                  Unlink
-                </button>
-              </div>
-            </div>
-          </div>
-          <div class="section updateAccountName">
-            <div class="title">
-              <i class="fas fa-user"></i>
-              <span>update account name</span>
-            </div>
-            <div class="text">
-              Change the name of your account.
-              <span class="red">You can only do this once every 30 days.</span>
-            </div>
-            <div class="buttons">
-              <button id="updateAccountName">update name</button>
-            </div>
-          </div>
-          <div class="section setStreakHourOffset">
-            <div class="title">
-              <i class="fas fa-clock"></i>
-              <span>set streak hour offset</span>
-            </div>
-            <div class="text">
-              Streaks reset at midnight UTC by default. If this is not
-              convenient for you (for example if it means that streaks reset in
-              the middle of the day), you can change the hour offset here.
-              <span class="red">You can only do this once!</span>
-            </div>
-            <div class="buttons">
-              <button id="setStreakHourOffset">update hour offset</button>
-            </div>
-            <div class="info">
-              <i class="fas fa-exclamation-triangle"></i>
-              You have already set your streak hour offset to
-              <span>0</span>
-              .
-            </div>
-          </div>
-          <div class="section optOutOfLeaderboards">
-            <div class="title">
-              <i class="fas fa-crown"></i>
-              <span>opt out of leaderboards</span>
-            </div>
-            <div class="text">
-              Use this if you frequently trigger the anticheat (for example if
-              using stenography) to opt out of leaderboards.
-              <span class="red">You can't undo this action!</span>
-            </div>
-            <div class="optedOut">
-              <i class="fas fa-exclamation-triangle"></i>
-              You have opted out of leaderboards.
-            </div>
-            <div class="buttons">
-              <button id="optOutOfLeaderboardsButton">opt out</button>
-            </div>
-          </div>
-          <div class="section resetPersonalBests">
-            <div class="title">
-              <i class="fas fa-crown"></i>
-              <span>reset personal bests</span>
-            </div>
-            <div class="text">
-              Resets all your personal bests (but doesn't delete any tests from
-              your history).
-              <span class="red">You can't undo this!</span>
-            </div>
-            <div class="buttons">
-              <button id="resetPersonalBestsButton">
-                reset personal bests
-              </button>
-            </div>
-          </div>
-          <!--  -->
-        </div>
-        <div class="tab hidden" data-tab="apeKeys">
-          <div class="section apeKeys">
-            <div class="title">
-              <i class="fas fa-key"></i>
-              <span>ape keys</span>
-            </div>
-            <div class="text">
-              Generate Ape Keys to access certain API endpoints
-              <span style="display: inline-flex">
-                (
-                <a
-                  href="https://api.monkeytype.com/docs"
-                  target="_blank"
-                  rel="noopener"
-                >
-                  documentation
-                </a>
-                ).&nbsp;
-              </span>
-              More endpoints will be added in the future.
-            </div>
-            <div class="lostAccess hidden">
-              <i class="fas fa-times"></i>
-              You have lost access to Ape Keys. Please contact support if you
-              believe this is a mistake.
-            </div>
-            <div class="buttons">
-              <button id="generateNewApeKey">generate new key</button>
-            </div>
-          </div>
-          <table>
-            <thead>
-              <tr>
-                <td width="1px">active</td>
-                <td>name</td>
-                <td>created on</td>
-                <td>modified on</td>
-                <td>last used on</td>
-                <td width="1px"></td>
-              </tr>
-            </thead>
-            <tbody></tbody>
-          </table>
-        </div>
-        <div class="tab hidden" data-tab="authentication">
-          <!-- <div class="title">
-            <i class="fas fa-key"></i>
-            authentication
-          </div> -->
-          <div class="section passwordAuthSettings">
-            <div class="title">
-              <i class="fas fa-lock"></i>
-              <span>password authentication settings</span>
-            </div>
-            <div class="text">
-              Add password authentication, update your password or email.
-            </div>
-            <div class="buttons vertical">
-              <button id="addPasswordAuth">add password authentication</button>
-              <button id="emailPasswordAuth">update email</button>
-              <button id="passPasswordAuth">update password</button>
-              <button id="removePasswordAuth">
-                remove password authentication
-              </button>
-            </div>
-          </div>
-          <div class="section googleAuthSettings">
-            <div class="title">
-              <i class="fab fa-google"></i>
-              <span>google authentication settings</span>
-            </div>
-            <div class="text">Add or remove Google authentication.</div>
-            <div class="buttons vertical">
-              <button id="addGoogleAuth">add google authentication</button>
-              <button id="removeGoogleAuth">
-                remove google authentication
-              </button>
-            </div>
-          </div>
-          <div class="section githubAuthSettings">
-            <div class="title">
-              <i class="fab fa-github"></i>
-              <span>github authentication settings</span>
-            </div>
-            <div class="text">Add or remove GitHub authentication.</div>
-            <div class="buttons vertical">
-              <button id="addGithubAuth">add github authentication</button>
-              <button id="removeGithubAuth">
-                remove github authentication
-              </button>
-            </div>
-          </div>
-          <div class="section revokeAllTokens">
-            <div class="title">
-              <i class="fas fa-user-slash"></i>
-              <span>revoke all tokens</span>
-            </div>
-            <div class="text">
-              Revokes all tokens connected to your account. Do this if you think
-              someone else has access to your account.
-              <br />
-              <span class="red">This will log you out of all devices.</span>
-            </div>
-            <div class="buttons">
-              <button class="danger" id="revokeAllTokens">
-                revoke all tokens
-              </button>
-            </div>
-          </div>
-        </div>
-        <div class="tab hidden" data-tab="blockedUsers">
-          <mount data-component="blockedusers" />
-        </div>
-        <div class="tab hidden" data-tab="dangerZone">
-          <div class="section resetAccount">
-            <div class="title">
-              <i class="fas fa-redo-alt"></i>
-              <span>reset account</span>
-            </div>
-            <div class="text">
-              Completely resets your account to a blank state.
-              <br />
-              <span class="red">You can't undo this action!</span>
-            </div>
-            <div class="buttons">
-              <button class="danger" id="resetAccount">reset account</button>
-            </div>
-          </div>
-          <div class="section deleteAccount">
-            <div class="title">
-              <i class="fas fa-trash"></i>
-              <span>delete account</span>
-            </div>
-            <div class="text">
-              Deletes your account and all data connected to it.
-              <br />
-              <span class="red">You can't undo this action!</span>
-            </div>
-            <div class="buttons">
-              <button class="danger" id="deleteAccount">delete account</button>
-            </div>
-          </div>
-        </div>
-        <!-- end of tabs -->
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/frontend/src/index.html b/frontend/src/index.html
index 1cd091b68f42..e462f01e88d2 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -61,7 +61,9 @@
           <mount data-component="notfoundpage"></mount>
         </div>
 
-        <load src="html/pages/account-settings.html" />
+        <div class="page pageAccountSettings hidden" id="pageAccountSettings">
+          <mount data-component="accountsettingspage"></mount>
+        </div>
 
         <div class="page pageFriends hidden" id="pageFriends">
           <mount data-component="friendspage"></mount>
diff --git a/frontend/src/styles/account-settings.scss b/frontend/src/styles/account-settings.scss
deleted file mode 100644
index ca4816e592e3..000000000000
--- a/frontend/src/styles/account-settings.scss
+++ /dev/null
@@ -1,195 +0,0 @@
-.pageAccountSettings {
-  & > .content > .title {
-    font-size: 2rem;
-    color: var(--sub-color);
-    display: inline-flex;
-    align-items: baseline;
-    margin-bottom: 1em;
-    i {
-      margin-right: 0.5em;
-    }
-  }
-  .main {
-    display: grid;
-    grid-template-columns: 15rem 1fr;
-    gap: 4rem;
-    .tabs {
-      background: var(--sub-alt-color);
-      border-radius: calc(var(--roundness) * 2);
-      padding: 1rem 0;
-      display: flex;
-      flex-direction: column;
-      height: max-content;
-      button {
-        padding: 1em 2em;
-        width: 100%;
-        justify-content: flex-start;
-        &.active {
-          color: var(--text-color);
-        }
-      }
-    }
-    .right {
-      padding-top: 1rem;
-      .tab {
-        display: grid;
-        gap: 2rem;
-
-        & > .title {
-          color: var(--sub-color);
-          font-size: 2rem;
-          margin-bottom: 2rem;
-        }
-
-        .section {
-          display: grid;
-          grid-template-areas: "title buttons" "text buttons";
-          grid-template-columns: 2fr 1fr;
-          grid-template-rows: auto 1fr;
-          column-gap: 2rem;
-          row-gap: 0.5rem;
-          align-items: center;
-          .title {
-            color: var(--sub-color);
-            grid-area: title;
-          }
-          .text {
-            grid-area: text;
-            align-self: normal;
-            .red {
-              color: var(--error-color);
-            }
-          }
-          .buttons {
-            grid-area: buttons;
-            display: grid;
-            &.vertical {
-              grid-auto-flow: row;
-              gap: 0.5rem;
-            }
-          }
-          &.discordIntegration {
-            .info {
-              grid-area: buttons;
-              text-align: center;
-              color: var(--main-color);
-            }
-
-            #discordButtonGroup {
-              display: grid;
-              grid-auto-flow: column;
-              justify-content: center;
-              gap: 0.5rem;
-            }
-
-            #unlinkDiscordButton,
-            #updateDiscordAvatarButton {
-              margin: 0.5rem auto 0 auto;
-              font-size: 0.75rem;
-              line-height: 0.7rem;
-            }
-
-            .howto {
-              margin-top: 1rem;
-              color: var(--text-color);
-            }
-          }
-          &.optOutOfLeaderboards {
-            .optedOut {
-              grid-area: buttons;
-              text-align: center;
-              color: var(--sub-color);
-            }
-          }
-          &.setStreakHourOffset {
-            .info {
-              grid-area: buttons;
-              text-align: center;
-              color: var(--sub-color);
-            }
-          }
-          &.apeKeys {
-            .lostAccess {
-              grid-area: buttons;
-              text-align: center;
-              color: var(--error-color);
-            }
-          }
-        }
-        &[data-tab="apeKeys"] {
-          table {
-            width: 100%;
-            border-spacing: 0;
-            border-collapse: collapse;
-
-            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;
-              }
-            }
-            .keyButtons {
-              display: flex;
-              gap: 0.5rem;
-            }
-          }
-        }
-
-        &[data-tab="apeKeys"] {
-          tr td:first-child {
-            text-align: center;
-          }
-        }
-      }
-    }
-    // .right {
-    //   background: var(--sub-alt-color);
-    //   border-radius: calc(var(--roundness) * 2);
-    // }
-  }
-}
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index 1b1dc6632a16..5b53a661e173 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -18,7 +18,7 @@
 @layer custom-styles {
   @import "buttons", "ads", "test-activity", "animations", "caret",
     "commandline", "core", "fonts", "inputs", "keymap", "monkey", "popups",
-    "scroll", "account-settings", "test", "loading", "media-queries";
+    "scroll", "test", "loading", "media-queries";
 
   .chartCanvas {
     width: 100% !important;
diff --git a/frontend/src/styles/media-queries-blue.scss b/frontend/src/styles/media-queries-blue.scss
index 424c0fffce5c..b833df2a8cc7 100644
--- a/frontend/src/styles/media-queries-blue.scss
+++ b/frontend/src/styles/media-queries-blue.scss
@@ -28,21 +28,6 @@
       }
     }
   }
-  .pageAccountSettings {
-    .main {
-      grid-template-columns: 1fr;
-      grid-template-rows: auto auto;
-      .tabs {
-        padding: 0;
-        display: grid;
-        grid-auto-flow: row;
-        button {
-          justify-content: center;
-          padding: 1em 0.5em;
-        }
-      }
-    }
-  }
 }
 @media (pointer: coarse) and (max-width: 778px) {
   #restartTestButton {
diff --git a/frontend/src/styles/media-queries-green.scss b/frontend/src/styles/media-queries-green.scss
index 559d955b3833..444da3e43b4e 100644
--- a/frontend/src/styles/media-queries-green.scss
+++ b/frontend/src/styles/media-queries-green.scss
@@ -4,20 +4,6 @@
   .content-grid {
     --content-max-width: 768px;
   }
-  .pageAccountSettings .main {
-    gap: 2rem;
-    .right .tab .section {
-      grid-template-columns: 1fr;
-      grid-template-areas:
-        "title"
-        "text" "buttons";
-      &.discordIntegration .info {
-        height: 8rem;
-        display: grid;
-        align-content: center;
-      }
-    }
-  }
   .pageTest {
     #result .wrapper .stats.morestats {
       display: grid;
diff --git a/frontend/src/styles/media-queries-yellow.scss b/frontend/src/styles/media-queries-yellow.scss
index 535a872cffda..bdc5cde176a8 100644
--- a/frontend/src/styles/media-queries-yellow.scss
+++ b/frontend/src/styles/media-queries-yellow.scss
@@ -5,13 +5,6 @@
     --content-max-width: 1024px;
   }
 
-  .pageAccountSettings .main {
-    gap: 2rem;
-    .right .tab .section {
-      grid-template-columns: 1fr 1fr;
-    }
-  }
-
   .pageTest {
     #liveStatsTextTop,
     #liveStatsTextBottom {
@@ -36,15 +29,4 @@
       display: none;
     }
   }
-
-  .pageFriends {
-    .content .friends table,
-    .content .pendingRequests table {
-      font-size: 0.9rem;
-
-      .badge .text {
-        display: none;
-      }
-    }
-  }
 }
diff --git a/frontend/src/ts/auth.tsx b/frontend/src/ts/auth.tsx
index 52b7231bd230..5647b94bec9a 100644
--- a/frontend/src/ts/auth.tsx
+++ b/frontend/src/ts/auth.tsx
@@ -6,14 +6,17 @@ import {
   EmailAuthProvider,
   GithubAuthProvider,
   GoogleAuthProvider,
+  linkWithCredential,
   linkWithPopup,
   reauthenticateWithCredential,
   reauthenticateWithPopup,
   unlink,
+  updateEmail,
   updateProfile,
   User,
   User as UserType,
 } from "firebase/auth";
+import { createMemo } from "solid-js";
 import { z, ZodString } from "zod";
 
 import Ape from "./ape";
@@ -31,14 +34,17 @@ import {
   signInWithEmailAndPassword,
   signInWithPopup,
 } from "./firebase";
+import { createSignalWithSetters } from "./hooks/createSignalWithSetters";
+import { createEffectOn } from "./hooks/effects";
 import * as Sentry from "./sentry";
-import { isAuthenticated, setUserId } from "./states/core";
+import { getUserId, isAuthenticated, setUserId } from "./states/core";
 import { hideLoaderBar, showLoaderBar } from "./states/loader-bar";
 import {
   showErrorNotification,
   showNoticeNotification,
   showSuccessNotification,
 } from "./states/notifications";
+import { FaObject } from "./types/font-awesome";
 import { isDevEnvironment } from "./utils/env";
 import { createErrorMessage } from "./utils/error";
 import { typedKeys } from "./utils/misc";
@@ -47,6 +53,7 @@ import { OneOf } from "./utils/types";
 
 type AuthMethodInfo = {
   display: string;
+  fa: FaObject;
 } & OneOf<{
   provider: AuthProvider;
   providerId: string;
@@ -60,18 +67,22 @@ const authMethods = {
   password: {
     display: "Password",
     providerId: "password",
+    fa: { icon: "fa-lock" },
   },
   github: {
     display: "GitHub",
     provider: new GithubAuthProvider(),
+    fa: { variant: "brand", icon: "fa-github" },
   },
   google: {
     display: "Google",
     provider: new GoogleAuthProvider(),
+    fa: { variant: "brand", icon: "fa-google" },
   },
 } as const satisfies Record<string, AuthMethodInfo>;
 
 export type AuthMethod = keyof typeof authMethods;
+export type ProviderAuthMethod = Exclude<AuthMethod, "password">;
 
 export type AuthResult =
   | {
@@ -98,6 +109,41 @@ type ReauthenticateOptions = {
   password?: string;
 };
 
+const [getAuthenticatedUserReactive, { updateAuthenticatedUser }] =
+  createSignalWithSetters<Pick<User, "providerData"> | null>(null)({
+    updateAuthenticatedUser: (set) => {
+      const user = getAuthenticatedUser();
+      if (user === null) {
+        set(null);
+      } else {
+        set({ providerData: user.providerData });
+      }
+    },
+  });
+export { getAuthenticatedUser };
+
+createEffectOn(getUserId, () => {
+  updateAuthenticatedUser();
+});
+
+const authenticationMemos = Object.fromEntries(
+  typedKeys(authMethods).map((authMethod) => {
+    const memo = createMemo(() => {
+      const providerId = getProviderId(authMethod);
+
+      const user = getAuthenticatedUserReactive();
+      if (user === null) return undefined;
+      const result = {
+        isInUse: user.providerData.some((p) => p.providerId === providerId),
+        hasAdditionalAuthMethods: hasAdditionalAuthMethods(authMethod),
+      };
+
+      return result;
+    });
+    return [authMethod, memo];
+  }),
+);
+
 export async function sendVerificationEmail(): Promise<void> {
   if (!isAuthAvailable()) {
     showErrorNotification("Authentication uninitialized", { durationMs: 3000 });
@@ -241,34 +287,88 @@ export async function signInWithProvider(
   return { success: true };
 }
 
-export async function addAuthProvider(authMethod: AuthMethod): Promise<void> {
+export async function addAuthProvider(
+  options:
+    | { authMethod: ProviderAuthMethod }
+    | {
+        authMethod: "password";
+        email: string;
+        password: string;
+      },
+): Promise<void> {
   if (!isAuthAvailable()) {
     showErrorNotification("Authentication uninitialized", { durationMs: 3000 });
     return;
   }
-  const provider = getAuthProvider(authMethod);
-  if (provider === undefined) {
-    showErrorNotification(`Authentication ${authMethod} is missing a provider`);
-    return;
-  }
-  const providerName = getAuthMethodDisplay(authMethod);
+  const authMethod = options.authMethod;
 
-  showLoaderBar();
   const user = getAuthenticatedUser();
+  const providerName = getAuthMethodDisplay(authMethod);
+
   if (!user) return;
+  showLoaderBar();
   try {
-    await linkWithPopup(user, provider);
-    hideLoaderBar();
+    if (authMethod === "password") {
+      await addPasswordProvider(user, options);
+    } else {
+      await addPopupProvider(user, options);
+    }
+
     showSuccessNotification(`${providerName} authentication added`);
-    authEvent.dispatch({ type: "authConfigUpdated" });
+    updateAuthenticatedUser();
   } catch (error) {
-    hideLoaderBar();
     showErrorNotification(`Failed to add ${providerName} authentication`, {
       error,
     });
+  } finally {
+    hideLoaderBar();
+  }
+}
+
+async function addPasswordProvider(
+  user: User,
+  options: {
+    email: string;
+    password: string;
+  },
+) {
+  const reauth = await reauthenticate({ password: options.password });
+  if (reauth.status !== "success") {
+    throw new Error(reauth.message);
+  }
+  const credential = EmailAuthProvider.credential(
+    options.email,
+    options.password,
+  );
+  await linkWithCredential(reauth.user, credential);
+  await updateEmail(user, options.email);
+  const response = await Ape.users.updateEmail({
+    body: {
+      newEmail: options.email,
+      previousEmail: reauth.user.email as string,
+    },
+  });
+  if (response.status !== 200) {
+    throw new Error(
+      "Password authentication added but updating the database email failed. This shouldn't happen, please contact support. Error",
+    );
   }
 }
 
+async function addPopupProvider(
+  user: User,
+  options: { authMethod: ProviderAuthMethod },
+) {
+  const authMethod = options.authMethod;
+  const provider = getAuthProvider(authMethod);
+  if (provider === undefined) {
+    throw new Error(`Authentication ${authMethod} is missing a provider`);
+  }
+
+  await linkWithPopup(user, provider);
+  authEvent.dispatch({ type: "authConfigUpdated" });
+}
+
 export async function removeAuthProvider(
   authMethod: AuthMethod,
   options?: { password?: string },
@@ -285,6 +385,7 @@ export async function removeAuthProvider(
   }
   try {
     await unlink(reauth.user, getProviderId(authMethod));
+    updateAuthenticatedUser();
   } catch (e) {
     const message = createErrorMessage(
       e,
@@ -464,7 +565,7 @@ function getPreferredAuthenticationMethod(
   return undefined;
 }
 
-function isUsingAuthentication(authMethod: AuthMethod): boolean {
+export function isUsingAuthentication(authMethod: AuthMethod): boolean {
   const providerId = getProviderId(authMethod);
   return (
     getAuthenticatedUser()?.providerData.some(
@@ -473,6 +574,10 @@ function isUsingAuthentication(authMethod: AuthMethod): boolean {
   );
 }
 
+export function isUsingAuthenticationReactive(authMethod: AuthMethod): boolean {
+  return authenticationMemos[authMethod]?.()?.isInUse ?? false;
+}
+
 export function getPasswordSchema(): ZodString {
   return isDevEnvironment() ? z.string().min(6) : PasswordSchema;
 }
@@ -487,10 +592,18 @@ export function hasAdditionalAuthMethods(authMethod: AuthMethod) {
   );
 }
 
+export function hasAdditionalAuthMethodsReactive(authMethod: AuthMethod) {
+  return authenticationMemos[authMethod]?.()?.hasAdditionalAuthMethods ?? false;
+}
+
 export function getAuthMethodDisplay(authMethod: AuthMethod): string {
   return authMethods[authMethod].display;
 }
 
+export function getAuthMethodIcon(authMethod: AuthMethod): FaObject {
+  return authMethods[authMethod].fa;
+}
+
 function getProviderId(authMethod: AuthMethod): string {
   const info = authMethods[authMethod];
 
diff --git a/frontend/src/ts/collections/ape-keys.ts b/frontend/src/ts/collections/ape-keys.ts
new file mode 100644
index 000000000000..262cf1809eb6
--- /dev/null
+++ b/frontend/src/ts/collections/ape-keys.ts
@@ -0,0 +1,200 @@
+import { queryCollectionOptions } from "@tanstack/query-db-collection";
+import {
+  createCollection,
+  createOptimisticAction,
+  useLiveQuery,
+} from "@tanstack/solid-db";
+import Ape from "../ape";
+import { queryClient } from "../queries";
+import { baseKey } from "../queries/utils/keys";
+import { isAuthenticated } from "../states/core";
+import {
+  setApeKeysDenied,
+  setLastGeneratedApeKey,
+} from "../states/account-settings";
+import { applyIdWorkaround, tempId } from "./utils/misc";
+import { typedEntries } from "../utils/misc";
+import { ApeKey } from "@monkeytype/schemas/ape-keys";
+import { showSuccessNotification } from "../states/notifications";
+import {
+  replaceSpacesWithUnderscores,
+  replaceUnderscoresWithSpaces,
+} from "../utils/strings";
+
+export type ApeKeyEntry = ApeKey & { _id: string };
+const queryKeys = {
+  root: () => [...baseKey("apeKeys", { isUserSpecific: true })],
+};
+
+// oxlint-disable-next-line typescript/explicit-function-return-type
+export function useApeKeyLiveQuery() {
+  return useLiveQuery((q) =>
+    isAuthenticated()
+      ? q
+          .from({ keys: apeKeysCollection })
+          .orderBy(({ keys }) => keys.createdOn, "asc")
+      : undefined,
+  );
+}
+
+const apeKeysCollection = createCollection(
+  queryCollectionOptions({
+    staleTime: Infinity,
+    queryKey: queryKeys.root(),
+    queryClient,
+    enabled: isAuthenticated,
+    getKey: (it) => it._id,
+    queryFn: async () => {
+      const response = await Ape.apeKeys.get();
+
+      if (response.status !== 200) {
+        if (
+          response.body.message ===
+          "You have lost access to ape keys, please contact support"
+        ) {
+          setApeKeysDenied(true);
+        }
+
+        throw new Error(`Error fetching ape keys: ${response.body.message}`);
+      }
+
+      const dataArray = typedEntries(response.body.data)
+        .map(
+          ([_id, data]) =>
+            ({
+              ...data,
+              _id,
+              name: replaceUnderscoresWithSpaces(data.name),
+            }) satisfies ApeKeyEntry,
+        )
+        .map(applyIdWorkaround);
+
+      return dataArray;
+    },
+  }),
+);
+
+type ActionType = {
+  insertKey: { name: string };
+  setEnabled: { apeKeyId: string; enabled: boolean };
+  rename: { apeKeyId: string; name: string };
+  remove: { apeKeyId: string };
+};
+
+const actions = {
+  insertKey: createOptimisticAction<ActionType["insertKey"]>({
+    onMutate: ({ name }) => {
+      apeKeysCollection.insert({
+        _id: tempId(),
+        name: replaceSpacesWithUnderscores(name),
+        enabled: false,
+        lastUsedOn: -1,
+        createdOn: Date.now(),
+        modifiedOn: Date.now(),
+      });
+    },
+    mutationFn: async ({ name }) => {
+      const response = await Ape.apeKeys.add({
+        body: { name, enabled: false },
+      });
+
+      if (response.status !== 200) {
+        throw new Error(`Failed to add key: ${response.body.message}`);
+      }
+
+      const newKey = {
+        ...response.body.data.apeKeyDetails,
+        _id: response.body.data.apeKeyId,
+        name: replaceUnderscoresWithSpaces(name),
+      };
+
+      apeKeysCollection.utils.writeInsert(newKey);
+
+      setLastGeneratedApeKey(response.body.data.apeKey);
+    },
+  }),
+  setEnabled: createOptimisticAction<ActionType["setEnabled"]>({
+    onMutate: ({ apeKeyId, enabled }) => {
+      apeKeysCollection.update(apeKeyId, (key) => {
+        key.enabled = enabled;
+      });
+    },
+    mutationFn: async ({ apeKeyId, enabled }) => {
+      const response = await Ape.apeKeys.save({
+        params: { apeKeyId },
+        body: { enabled },
+      });
+
+      if (response.status !== 200) {
+        throw new Error(`Failed to update key: ${response.body.message}`);
+      }
+
+      apeKeysCollection.utils.writeUpdate({ _id: apeKeyId, enabled });
+
+      showSuccessNotification(`Key ${enabled ? "active" : "inactive"}`);
+    },
+  }),
+  rename: createOptimisticAction<ActionType["rename"]>({
+    onMutate: ({ apeKeyId, name }) => {
+      apeKeysCollection.update(apeKeyId, (key) => {
+        key.name = replaceUnderscoresWithSpaces(name);
+      });
+    },
+    mutationFn: async ({ apeKeyId, name }) => {
+      const response = await Ape.apeKeys.save({
+        params: { apeKeyId },
+        body: { name },
+      });
+
+      if (response.status !== 200) {
+        throw new Error(`Failed to update key: ${response.body.message}`);
+      }
+
+      apeKeysCollection.utils.writeUpdate({
+        _id: apeKeyId,
+        name: replaceUnderscoresWithSpaces(name),
+      });
+    },
+  }),
+  remove: createOptimisticAction<ActionType["remove"]>({
+    onMutate: ({ apeKeyId }) => {
+      apeKeysCollection.delete(apeKeyId);
+    },
+    mutationFn: async ({ apeKeyId }) => {
+      const response = await Ape.apeKeys.delete({ params: { apeKeyId } });
+      if (response.status !== 200) {
+        throw new Error(`Failed to delete key: ${response.body.message}`);
+      }
+
+      apeKeysCollection.utils.writeDelete(apeKeyId);
+    },
+  }),
+};
+
+export async function insertApeKey(
+  params: ActionType["insertKey"],
+): Promise<void> {
+  const transaction = actions.insertKey(params);
+  await transaction.isPersisted.promise;
+}
+
+export async function updateApeKeyEnabled(
+  params: ActionType["setEnabled"],
+): Promise<void> {
+  const transaction = actions.setEnabled(params);
+  await transaction.isPersisted.promise;
+}
+
+export async function renameApeKey(
+  params: ActionType["rename"],
+): Promise<void> {
+  const transaction = actions.rename(params);
+  await transaction.isPersisted.promise;
+}
+
+export async function removeApeKey(
+  params: ActionType["remove"],
+): Promise<void> {
+  const transaction = actions.remove(params);
+  await transaction.isPersisted.promise;
+}
diff --git a/frontend/src/ts/components/common/Setting.tsx b/frontend/src/ts/components/common/Setting.tsx
new file mode 100644
index 000000000000..fc5d7e6d8947
--- /dev/null
+++ b/frontend/src/ts/components/common/Setting.tsx
@@ -0,0 +1,132 @@
+import { JSXElement, ParentProps, Show } from "solid-js";
+import { z } from "zod";
+import { serialize } from "zod-urlsearchparams";
+
+import {
+  showErrorNotification,
+  showSuccessNotification,
+} from "../../states/notifications";
+import { cn } from "../../utils/cn";
+import { Button } from "./Button";
+import { FaProps } from "./Fa";
+import { H3 } from "./Headers";
+
+export type SettingProps = {
+  title: string;
+  fa: FaProps;
+  description: string | JSXElement;
+  inputs?: JSXElement;
+  fullWidthInputs?: JSXElement;
+  breakpoints?: "none" | "normal" | "narrow";
+} & ParentProps &
+  (
+    | {
+        /**
+         * data-settings-key
+         */
+        key: string;
+        showDeepLink?: true;
+      }
+    | {
+        key?: never;
+        showDeepLink: false;
+      }
+  ) &
+  (
+    | {
+        disabled: boolean;
+        disabledDescription: JSXElement;
+      }
+    | {
+        disabled?: never;
+        disabledDescription?: never;
+      }
+  );
+
+export function Setting(props: SettingProps): JSXElement {
+  const breakpoints = () => props.breakpoints ?? "normal";
+  return (
+    <div
+      class={cn(
+        "group grid gap-2",
+        "-m-4 rounded-double p-4",
+        // "animate-[ring-flash_4s_ease-in_forwards]",
+      )}
+      {...("key" in props && props.key !== undefined
+        ? { "data-setting-key": props.key }
+        : {})}
+    >
+      <div class="flex gap-2">
+        <H3 text={props.title} fa={props.fa} class="pb-0" />
+        <Show when={props.showDeepLink !== false}>
+          <DeepLinkButton key={(props as { key: string }).key} />
+        </Show>
+      </div>
+
+      <Show
+        when={props.disabled === undefined || !props.disabled}
+        fallback=<div>{props.disabledDescription}</div>
+      >
+        <div
+          class={cn(
+            "grid grid-cols-1 gap-2",
+            breakpoints() === "normal" &&
+              "md:grid-cols-[1fr_1fr] md:gap-x-8 lg:grid-cols-[1.5fr_1fr] xl:grid-cols-[2fr_1fr]",
+
+            breakpoints() === "narrow" &&
+              "md:gap-x-8 lg:grid lg:grid-cols-2 xl:grid-cols-[2fr_1fr]",
+
+            props.inputs === undefined &&
+              breakpoints() === "normal" &&
+              "grid-cols-1 md:grid-cols-1 lg:grid-cols-1 xl:grid-cols-1",
+          )}
+        >
+          <Show when={props.description !== ""}>
+            <div>{props.description}</div>
+          </Show>
+          <Show when={props.inputs !== undefined}>
+            <div>{props.inputs}</div>
+          </Show>
+          <Show when={props.children}>
+            <div>{props.children}</div>
+          </Show>
+        </div>
+
+        <Show when={props.fullWidthInputs}>{props.fullWidthInputs}</Show>
+      </Show>
+    </div>
+  );
+}
+
+function DeepLinkButton(props: { key: string }) {
+  return (
+    <Button
+      class="-m-2 p-2 opacity-0 group-hover:opacity-100"
+      variant="text"
+      fa={{ icon: "fa-link" }}
+      onClick={() => {
+        const urlParams = serialize({
+          schema: z.object({
+            highlight: z.string(),
+          }),
+          data: {
+            highlight: props.key,
+          },
+        });
+        const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
+        window.history.replaceState({}, "", newUrl);
+
+        navigator.clipboard
+          .writeText(window.location.toString())
+          .then(() => {
+            showSuccessNotification("Link copied to clipboard");
+          })
+          .catch((e: unknown) => {
+            showErrorNotification("Failed to copy to clipboard", {
+              error: e,
+            });
+          });
+      }}
+    />
+  );
+}
diff --git a/frontend/src/ts/components/modals/account-settings/AddPasswordAuthModal.tsx b/frontend/src/ts/components/modals/account-settings/AddPasswordAuthModal.tsx
index a9f4593392b5..f30813912285 100644
--- a/frontend/src/ts/components/modals/account-settings/AddPasswordAuthModal.tsx
+++ b/frontend/src/ts/components/modals/account-settings/AddPasswordAuthModal.tsx
@@ -1,15 +1,10 @@
 import { UserEmailSchema } from "@monkeytype/schemas/users";
-import { EmailAuthProvider, linkWithCredential } from "firebase/auth";
 import { z } from "zod";
 
-import Ape from "../../../ape";
-import { getPasswordSchema, reauthenticate } from "../../../auth";
+import { addAuthProvider, getPasswordSchema } from "../../../auth";
 import { showSimpleModal } from "../../../states/simple-modal";
-import { createErrorMessage } from "../../../utils/error";
 
-export function showAddPasswordAuthModal(options: {
-  callback: () => void;
-}): void {
+export function showAddPasswordAuthModal(): void {
   showSimpleModal({
     title: "Add password authentication",
     buttonText: "reauthenticate to add",
@@ -53,48 +48,11 @@ export function showAddPasswordAuthModal(options: {
         };
       }
 
-      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();
+      await addAuthProvider({ authMethod: "password", email, password });
 
       return {
         status: "success",
-        message: "Password authentication added",
+        showNotification: false,
       };
     },
   });
diff --git a/frontend/src/ts/components/modals/account-settings/RemoveAuthMethodModal.tsx b/frontend/src/ts/components/modals/account-settings/RemoveAuthMethodModal.tsx
index 0485f003052f..023154a2ee88 100644
--- a/frontend/src/ts/components/modals/account-settings/RemoveAuthMethodModal.tsx
+++ b/frontend/src/ts/components/modals/account-settings/RemoveAuthMethodModal.tsx
@@ -11,11 +11,9 @@ import {
 import { isAuthenticated } from "../../../states/core";
 import { showNoticeNotification } from "../../../states/notifications";
 import { showSimpleModal } from "../../../states/simple-modal";
-import { reloadAfter } from "../../../utils/misc";
 
 export function showRemoveAuthMethodModal(options: {
   authMethod: AuthMethod;
-  callback: () => void;
 }): void {
   if (!isAuthenticated()) return;
 
@@ -54,13 +52,6 @@ export function showRemoveAuthMethodModal(options: {
 
     execFn: async ({ password }) => {
       const result = await removeAuthProvider(options.authMethod, { password });
-      if (result.status !== "success") {
-        return result;
-      }
-
-      options.callback();
-
-      reloadAfter(3);
       return result;
     },
   });
diff --git a/frontend/src/ts/components/modals/account-settings/UnlinkDiscordModal.tsx b/frontend/src/ts/components/modals/account-settings/UnlinkDiscordModal.tsx
index 6e8604cec8a5..879087b1bc9a 100644
--- a/frontend/src/ts/components/modals/account-settings/UnlinkDiscordModal.tsx
+++ b/frontend/src/ts/components/modals/account-settings/UnlinkDiscordModal.tsx
@@ -2,9 +2,7 @@ import Ape from "../../../ape";
 import { getSnapshot, setSnapshot } from "../../../db";
 import { showSimpleModal } from "../../../states/simple-modal";
 
-export function showUnlinkDiscordModal(options: {
-  callback: () => void;
-}): void {
+export function showUnlinkDiscordModal(): void {
   showSimpleModal({
     title: "Unlink Discord",
     text: "Are you sure you want to unlink your Discord account?",
@@ -31,8 +29,6 @@ export function showUnlinkDiscordModal(options: {
       snap.discordId = undefined;
       setSnapshot(snap);
 
-      options.callback();
-
       return {
         status: "success",
         message: "Discord unlinked",
diff --git a/frontend/src/ts/components/modals/account-settings/UpdateNameModal.tsx b/frontend/src/ts/components/modals/account-settings/UpdateNameModal.tsx
index 9e503fb12473..0dbf627f9a60 100644
--- a/frontend/src/ts/components/modals/account-settings/UpdateNameModal.tsx
+++ b/frontend/src/ts/components/modals/account-settings/UpdateNameModal.tsx
@@ -7,14 +7,13 @@ import {
   isUsingPasswordAuthentication,
   reauthenticate,
 } from "../../../auth";
-import * as DB from "../../../db";
+import { setSnapshot, getSnapshot } from "../../../db";
 import { isAuthenticated } from "../../../states/core";
 import { showSimpleModal } from "../../../states/simple-modal";
-import { reloadAfter } from "../../../utils/misc";
 import { remoteValidation } from "../../../utils/remote-validation";
 
 export function showUpdateNameModal(): void {
-  const snapshot = DB.getSnapshot();
+  const snapshot = getSnapshot();
   if (!isAuthenticated() || !snapshot) return;
 
   showSimpleModal({
@@ -22,7 +21,7 @@ export function showUpdateNameModal(): void {
     buttonText: isUsingPasswordAuthentication()
       ? "update"
       : "reauthenticate to update",
-    text: DB.getSnapshot()?.needsToChangeName
+    text: snapshot.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({
@@ -70,10 +69,8 @@ export function showUpdateNameModal(): void {
       }
 
       snapshot.name = newName;
-      DB.setSnapshot(snapshot);
-      if (snapshot.needsToChangeName) {
-        reloadAfter(2);
-      }
+
+      setSnapshot(snapshot);
 
       return {
         status: "success",
diff --git a/frontend/src/ts/components/mount.tsx b/frontend/src/ts/components/mount.tsx
index ada62540a141..1c83bf273b5d 100644
--- a/frontend/src/ts/components/mount.tsx
+++ b/frontend/src/ts/components/mount.tsx
@@ -13,7 +13,7 @@ import { Overlays } from "./layout/overlays/Overlays";
 import { Modals } from "./modals/Modals";
 import { NotFoundPage } from "./pages/404Page";
 import { AboutPage } from "./pages/AboutPage";
-import { BlockedUsers } from "./pages/account-settings/BlockedUsers";
+import { AccountSettingsPage } from "./pages/account-settings/AccountSettingsPage";
 import { AccountPage } from "./pages/account/AccountPage";
 import { MyProfile } from "./pages/account/MyProfile";
 import { FriendsPage } from "./pages/connections/FriendsPage";
@@ -46,8 +46,8 @@ const components: Record<string, () => JSXElement> = {
   commandlinehotkey: () => <CommandlineHotkey />,
   testmodesnotice: () => <TestModesNotice />,
   friendspage: () => <FriendsPage />,
-  blockedusers: () => <BlockedUsers />,
   notfoundpage: () => <NotFoundPage />,
+  accountsettingspage: () => <AccountSettingsPage />,
 };
 
 function mountToMountpoint(name: string, component: () => JSXElement): void {
diff --git a/frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx b/frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx
new file mode 100644
index 000000000000..4ffb60f5d863
--- /dev/null
+++ b/frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx
@@ -0,0 +1,57 @@
+import { For, JSXElement } from "solid-js";
+
+import {
+  AccountSettingsTab,
+  accountSettingsTabs,
+  getCurrentTab,
+  setCurrentTab,
+} from "../../../states/account-settings";
+import { Button } from "../../common/Button";
+import { Page } from "../../common/Page";
+import { AccountTab } from "./AccountTab";
+import { ApeKeysTab } from "./ApeKeysTab";
+import { AuthenticationTab } from "./AuthenticationTab";
+import { BlockedUsersTab } from "./BlockedUsersTab";
+import { DangerZoneTab } from "./DangerZoneTab";
+
+const tabContent: Record<AccountSettingsTab, () => JSXElement> = {
+  account: () => <AccountTab />,
+  authentication: () => <AuthenticationTab />,
+  blockedUsers: () => <BlockedUsersTab />,
+  apeKeys: () => <ApeKeysTab />,
+  dangerZone: () => <DangerZoneTab />,
+};
+
+export function AccountSettingsPage() {
+  return (
+    <Page id="accountSettings">
+      <div class="content-grid flex flex-col gap-8 md:flex-row">
+        <div class="w-full shrink-0 md:w-60">
+          <Sidebar />
+        </div>
+        <div class="flex w-full flex-1 flex-col gap-8">
+          {tabContent[getCurrentTab()]()}
+        </div>
+      </div>
+    </Page>
+  );
+}
+
+function Sidebar() {
+  return (
+    <div class="flex flex-col gap-4 rounded-double bg-sub-alt p-4 md:items-start">
+      <For each={Object.entries(accountSettingsTabs)}>
+        {([key, tab]) => (
+          <Button
+            text={tab.text}
+            variant="text"
+            fa={{ icon: tab.icon }}
+            active={getCurrentTab() === key}
+            class="[--themable-button-active:var(--themable-button-text)]"
+            onClick={() => setCurrentTab(key as AccountSettingsTab)}
+          />
+        )}
+      </For>
+    </div>
+  );
+}
diff --git a/frontend/src/ts/components/pages/account-settings/AccountTab.tsx b/frontend/src/ts/components/pages/account-settings/AccountTab.tsx
new file mode 100644
index 000000000000..40436b03386b
--- /dev/null
+++ b/frontend/src/ts/components/pages/account-settings/AccountTab.tsx
@@ -0,0 +1,180 @@
+import { Show } from "solid-js";
+
+import Ape from "../../../ape";
+import * as StreakHourOffsetModal from "../../../modals/streak-hour-offset";
+import { showLoaderBar } from "../../../states/loader-bar";
+import { showErrorNotification } from "../../../states/notifications";
+import { getSnapshot } from "../../../states/snapshot";
+import { Button } from "../../common/Button";
+import { Fa } from "../../common/Fa";
+import {
+  showOptOutOfLeaderboardsModal,
+  showResetPersonalBestsModal,
+} from "../../modals/account-settings/ReauthConfirmModals";
+import { showUnlinkDiscordModal } from "../../modals/account-settings/UnlinkDiscordModal";
+import { showUpdateNameModal } from "../../modals/account-settings/UpdateNameModal";
+import { Section } from "./utils";
+
+export function AccountTab() {
+  return (
+    <>
+      <Discord />
+
+      <UpdateAccountName />
+      <UpdateStreakOffset />
+      <OptOutLeaderboard />
+      <ResetPersonalBests />
+    </>
+  );
+}
+
+function Discord() {
+  const isLinked = () => getSnapshot()?.discordId !== undefined;
+  return (
+    <Section
+      title="discord integration"
+      fa={{ variant: "brand", icon: "fa-discord" }}
+      description=<>
+        When you connect your Monkeytype account to your Discord account, you
+        will be automatically assigned a new role every time you achieve a new
+        personal best in a 60 second test. If you link your accounts before
+        joining the Discord server, the bot <i>will not</i> give you a role.
+      </>
+      button={
+        isLinked()
+          ? undefined
+          : {
+              text: "link",
+              onClick: () => {
+                showLoaderBar();
+                void Ape.users.getDiscordOAuth().then((response) => {
+                  if (response.status === 200) {
+                    window.open(response.body.data.url, "_self");
+                  } else {
+                    showErrorNotification(
+                      `Failed to get OAuth from discord: ${response.body.message}`,
+                    );
+                  }
+                });
+              },
+            }
+      }
+    >
+      <Show when={isLinked()}>
+        <div class="m-4 flex h-full flex-col items-center justify-center gap-2">
+          <div class="text-main">
+            <Fa icon="fa-check" /> Your accounts are linked!
+          </div>
+          <div class="text-sm">
+            <Button
+              variant="text"
+              text="Update avatar"
+              fa={{ icon: "fa-sync-alt" }}
+              onClick={() => {
+                showLoaderBar();
+                void Ape.users.getDiscordOAuth().then((response) => {
+                  if (response.status === 200) {
+                    window.open(response.body.data.url, "_self");
+                  } else {
+                    showErrorNotification(
+                      `Failed to get OAuth from discord: ${response.body.message}`,
+                    );
+                  }
+                });
+              }}
+            />
+            <Button
+              variant="text"
+              text="Unlink"
+              fa={{ icon: "fa-unlink" }}
+              onClick={() => showUnlinkDiscordModal()}
+            />
+          </div>
+        </div>
+      </Show>
+    </Section>
+  );
+}
+
+function UpdateAccountName() {
+  return (
+    <Section
+      title="update account name"
+      fa={{ icon: "fa-user" }}
+      description=<>
+        Change the name of your account.{" "}
+        <span class="text-error">You can only do this once every 30 days.</span>
+      </>
+      button={{
+        text: "update name",
+        onClick: () => showUpdateNameModal(),
+      }}
+    />
+  );
+}
+
+function UpdateStreakOffset() {
+  return (
+    <Section
+      title="set streak hour offset"
+      fa={{ icon: "fa-clock" }}
+      description=<>
+        Streaks reset at midnight UTC by default. If this is not convenient for
+        you (for example if it means that streaks reset in the middle of the
+        day), you can change the hour offset here.{" "}
+        <span class="text-error">You can only do this once!</span>
+      </>
+      button={{
+        text: "update hour offset",
+        onClick: () => StreakHourOffsetModal.show(),
+      }}
+      disabled={getSnapshot()?.streakHourOffset !== undefined}
+      disabledDescription=<>
+        <Fa icon="fa-exclamation-triangle" /> You have already set your streak
+        hour offset to{" "}
+        {`${(getSnapshot()?.streakHourOffset ?? 0) > 0 ? "+" : ""} ${getSnapshot()?.streakHourOffset}`}
+        .
+      </>
+    />
+  );
+}
+
+function OptOutLeaderboard() {
+  return (
+    <Section
+      title="opt out of leaderboards"
+      fa={{ icon: "fa-crown" }}
+      description=<>
+        Use this if you frequently trigger the anticheat (for example if using
+        stenography) to opt out of leaderboards.{" "}
+        <span class="text-error">You can&apos;t undo this action!</span>
+      </>
+      button={{
+        text: "opt out",
+        onClick: () => showOptOutOfLeaderboardsModal(),
+      }}
+      disabled={getSnapshot()?.lbOptOut === true}
+      disabledDescription=<>
+        <Fa icon="fa-exclamation-triangle" />
+        You have opted out of leaderboards.
+      </>
+    />
+  );
+}
+
+function ResetPersonalBests() {
+  return (
+    <Section
+      title="reset personal bests"
+      fa={{ icon: "fa-crown" }}
+      description=<>
+        Resets all your personal bests (but doesn&apos;t delete any tests from
+        your history). <span class="text-error">You can&apos;t undo this!</span>
+      </>
+      button={{
+        text: "reset personal bests",
+        onClick: () => showResetPersonalBestsModal(),
+      }}
+    />
+  );
+}
diff --git a/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx b/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx
new file mode 100644
index 000000000000..a62f02bcd258
--- /dev/null
+++ b/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx
@@ -0,0 +1,209 @@
+import { ApeKeyNameSchema } from "@monkeytype/schemas/ape-keys";
+import { tryCatch } from "@monkeytype/util/trycatch";
+import { createColumnHelper } from "@tanstack/solid-table";
+import { format as dateFormat } from "date-fns";
+import { createMemo, Show } from "solid-js";
+import { z } from "zod";
+
+import {
+  ApeKeyEntry,
+  insertApeKey,
+  removeApeKey,
+  renameApeKey,
+  updateApeKeyEnabled,
+  useApeKeyLiveQuery,
+} from "../../../collections/ape-keys";
+import { isApeKeysDenied } from "../../../states/account-settings";
+import { showModal } from "../../../states/modals";
+import { showSimpleModal } from "../../../states/simple-modal";
+import { replaceSpacesWithUnderscores } from "../../../utils/strings";
+import AsyncContent from "../../common/AsyncContent";
+import { Button } from "../../common/Button";
+import { Fa } from "../../common/Fa";
+import { DataTable, DataTableColumnDef } from "../../ui/table/DataTable";
+import { Section } from "./utils";
+
+export function ApeKeysTab() {
+  const columns = createMemo(() => getColumns());
+  const apeKeyQuery = useApeKeyLiveQuery();
+  return (
+    <>
+      <Section
+        title="ape keys"
+        fa={{ icon: "fa-key" }}
+        description=<>
+          Generate Ape Keys to access certain API endpoints (
+          <Button
+            text="documentation"
+            href="https://api.monkeytype.com/docs"
+            variant="text"
+          />
+          ).
+        </>
+        button={{
+          text: "generate new key",
+          onClick: addNewKey,
+        }}
+        disabled={isApeKeysDenied() === true}
+        disabledDescription=<>
+          <Fa icon="fa-times" /> You have lost access to Ape Keys. Please
+          contact support if you believe this is a mistake.
+        </>
+      />
+      <Show when={isApeKeysDenied() !== true}>
+        <AsyncContent collections={{ apeKeyQuery }}>
+          {({ apeKeyQueryData }) => (
+            <DataTable
+              id="apeKeys"
+              columns={columns()}
+              data={apeKeyQueryData()}
+              fallback={
+                <div class="text-center text-sub">
+                  You don&lsquo;t have any ape keys yet.
+                </div>
+              }
+            />
+          )}
+        </AsyncContent>
+      </Show>
+    </>
+  );
+}
+
+function getColumns(): DataTableColumnDef<ApeKeyEntry>[] {
+  const defineColumn = createColumnHelper<ApeKeyEntry>().accessor;
+
+  const columns = [
+    defineColumn("_id", {
+      header: "active",
+      cell: (info) => (
+        <Button
+          variant="text"
+          fa={
+            info.row.original.enabled
+              ? { fixedWidth: true, icon: "fa-check-square" }
+              : { variant: "regular", fixedWidth: true, icon: "fa-square" }
+          }
+          onClick={() =>
+            void updateApeKeyEnabled({
+              apeKeyId: info.getValue(),
+              enabled: !info.row.original.enabled,
+            })
+          }
+        />
+      ),
+    }),
+    defineColumn("name", {
+      header: "name",
+    }),
+    defineColumn("createdOn", {
+      header: "created on",
+      cell: (info) => dateFormat(info.getValue(), "dd MMM yyyy HH:mm"),
+    }),
+    defineColumn("modifiedOn", {
+      header: "modified on",
+      cell: (info) => dateFormat(info.getValue(), "dd MMM yyyy HH:mm"),
+    }),
+    defineColumn("lastUsedOn", {
+      header: "last used on",
+      cell: (info) =>
+        info.getValue() === -1
+          ? "-"
+          : dateFormat(info.getValue(), "dd MMM yyyy HH:mm"),
+    }),
+    defineColumn("_id", {
+      header: "",
+      cell: (info) => (
+        <div class="flex justify-end gap-2">
+          <Button
+            fa={{ fixedWidth: true, icon: "fa-pen" }}
+            balloon={{ text: "rename" }}
+            onClick={() => showRenameModal(info.getValue())}
+          />
+          <Button
+            fa={{ fixedWidth: true, icon: "fa-trash-alt" }}
+            balloon={{ text: "delete" }}
+            onClick={() => {
+              showSimpleModal({
+                title: "Delete Ape key",
+                text: "Are you sure?",
+                buttonText: "delete",
+                execFn: async () => {
+                  const { error } = await tryCatch(
+                    removeApeKey({ apeKeyId: info.getValue() }),
+                  );
+                  if (error !== null) {
+                    return { status: "error", message: error.message };
+                  }
+                  return { status: "success", message: "Key deleted" };
+                },
+              });
+            }}
+          />
+        </div>
+      ),
+    }),
+  ];
+
+  //mark each column non sortable
+  return columns.map((it) => ({ ...it, enableSorting: false }));
+}
+
+function addNewKey(): void {
+  showSimpleModal({
+    title: "Generate new Ape key",
+    buttonText: "generate",
+    schema: z.object({ name: ApeKeyNameSchema }),
+    inputs: {
+      name: {
+        type: "text",
+        placeholder: "Name",
+        preprocess: replaceSpacesWithUnderscores,
+      },
+    },
+
+    execFn: async ({ name }) => {
+      const { error } = await tryCatch(insertApeKey({ name }));
+
+      if (error !== null) {
+        return { status: "error", message: error.message };
+      }
+
+      return {
+        status: "success",
+        message: "Key generated",
+        afterHide: (): void => {
+          showModal("ViewApeKey");
+        },
+      };
+    },
+  });
+}
+
+function showRenameModal(apeKeyId: string): void {
+  showSimpleModal({
+    title: "Edit Ape key",
+    buttonText: "edit",
+    schema: z.object({ name: ApeKeyNameSchema }),
+    inputs: {
+      name: {
+        type: "text",
+        placeholder: "name",
+        preprocess: replaceSpacesWithUnderscores,
+      },
+    },
+
+    execFn: async ({ name }) => {
+      const { error } = await tryCatch(renameApeKey({ apeKeyId, name }));
+
+      if (error !== null) {
+        return { status: "error", message: error.message };
+      }
+
+      return {
+        status: "success",
+        message: "Key updated",
+      };
+    },
+  });
+}
diff --git a/frontend/src/ts/components/pages/account-settings/AuthenticationTab.tsx b/frontend/src/ts/components/pages/account-settings/AuthenticationTab.tsx
new file mode 100644
index 000000000000..97d3a062de33
--- /dev/null
+++ b/frontend/src/ts/components/pages/account-settings/AuthenticationTab.tsx
@@ -0,0 +1,118 @@
+import { Show } from "solid-js";
+
+import {
+  addAuthProvider,
+  getAuthMethodDisplay,
+  getAuthMethodIcon,
+  hasAdditionalAuthMethodsReactive,
+  isUsingAuthenticationReactive,
+  ProviderAuthMethod,
+} from "../../../auth";
+import { Button } from "../../common/Button";
+import { showAddPasswordAuthModal } from "../../modals/account-settings/AddPasswordAuthModal";
+import { showRevokeAllTokensModal } from "../../modals/account-settings/ReauthConfirmModals";
+import { showRemoveAuthMethodModal } from "../../modals/account-settings/RemoveAuthMethodModal";
+import { showUpdateEmailModal } from "../../modals/account-settings/UpdateEmailModal";
+import { showUpdatePasswordModal } from "../../modals/account-settings/UpdatePasswordModal";
+import { Section } from "./utils";
+
+export function AuthenticationTab() {
+  return (
+    <>
+      <PasswordAuthentication />
+      <ProviderAuthentication authMethod="google" />
+      <ProviderAuthentication authMethod="github" />
+      <RevokeAllTokens />
+    </>
+  );
+}
+
+function PasswordAuthentication() {
+  return (
+    <Section
+      title="password authentication settings"
+      fa={getAuthMethodIcon("password")}
+      description=<>
+        Add password authentication, update your password or email.
+      </>
+    >
+      <Show
+        when={isUsingAuthenticationReactive("password")}
+        fallback=<Button
+          text="add password authentication"
+          class="w-full"
+          onClick={() => showAddPasswordAuthModal()}
+        />
+      >
+        <div class="flex flex-col gap-2">
+          <Button
+            class="w-full"
+            text="update email"
+            onClick={() => showUpdateEmailModal()}
+          />
+          <Button
+            class="w-full"
+            text="update password"
+            onClick={() => showUpdatePasswordModal()}
+          />
+          <Show when={hasAdditionalAuthMethodsReactive("password")}>
+            <Button
+              class="w-full"
+              text="remove password authentication"
+              onClick={() =>
+                showRemoveAuthMethodModal({ authMethod: "password" })
+              }
+            />
+          </Show>
+        </div>
+      </Show>
+    </Section>
+  );
+}
+
+function ProviderAuthentication(props: { authMethod: ProviderAuthMethod }) {
+  return (
+    <Section
+      title={`${getAuthMethodDisplay(props.authMethod)}`}
+      fa={getAuthMethodIcon(props.authMethod)}
+      description=<>
+        Add or remove {getAuthMethodDisplay(props.authMethod)} authentication.
+      </>
+      button={
+        isUsingAuthenticationReactive(props.authMethod)
+          ? {
+              text: `remove ${getAuthMethodDisplay(props.authMethod)} authentication`,
+              disabled: !hasAdditionalAuthMethodsReactive(props.authMethod),
+              onClick: () =>
+                showRemoveAuthMethodModal({ authMethod: props.authMethod }),
+            }
+          : {
+              text: `add ${getAuthMethodDisplay(props.authMethod)} authentication`,
+              onClick: () =>
+                void addAuthProvider({ authMethod: props.authMethod }),
+            }
+      }
+    />
+  );
+}
+
+function RevokeAllTokens() {
+  return (
+    <Section
+      title="revoke all tokens"
+      fa={{ icon: "fa-user-slash" }}
+      description=<>
+        Revokes all tokens connected to your account. Do this if you think
+        someone else has access to your account.
+        <br />
+        <span class="text-error">This will log you out of all devices.</span>
+      </>
+      button={{
+        text: "revoke all tokens",
+        class:
+          "[--themable-button-bg:var(--error-color)] [--themable-button-text:var(--bg-color)]",
+        onClick: () => showRevokeAllTokensModal(),
+      }}
+    />
+  );
+}
diff --git a/frontend/src/ts/components/pages/account-settings/BlockedUsers.tsx b/frontend/src/ts/components/pages/account-settings/BlockedUsersTab.tsx
similarity index 90%
rename from frontend/src/ts/components/pages/account-settings/BlockedUsers.tsx
rename to frontend/src/ts/components/pages/account-settings/BlockedUsersTab.tsx
index 8d56f3eff67d..6e8cdd5cb639 100644
--- a/frontend/src/ts/components/pages/account-settings/BlockedUsers.tsx
+++ b/frontend/src/ts/components/pages/account-settings/BlockedUsersTab.tsx
@@ -10,19 +10,21 @@ import {
 import { showSimpleModal } from "../../../states/simple-modal";
 import AsyncContent from "../../common/AsyncContent";
 import { Button } from "../../common/Button";
-import { H3 } from "../../common/Headers";
 import { User } from "../../common/User";
 import { DataTable, DataTableColumnDef } from "../../ui/table/DataTable";
+import { Section } from "./utils";
 
-export function BlockedUsers() {
+export function BlockedUsersTab() {
   const query = useBlockedConnectionsQuery();
   const columns = createMemo(getColumns);
 
   return (
-    <div>
-      <H3 text="blocked users" fa={{ icon: "fa-user-shield" }} />
-      <p>Blocked users cannot send you friend requests.</p>
-
+    <Section
+      title="blocked users"
+      fa={{ icon: "fa-user-shield" }}
+      fullWidth
+      description=<>Blocked users cannot send you friend requests.</>
+    >
       <AsyncContent collections={{ query }}>
         {({ queryData }) => (
           <Show
@@ -37,7 +39,7 @@ export function BlockedUsers() {
           </Show>
         )}
       </AsyncContent>
-    </div>
+    </Section>
   );
 }
 
diff --git a/frontend/src/ts/components/pages/account-settings/DangerZoneTab.tsx b/frontend/src/ts/components/pages/account-settings/DangerZoneTab.tsx
new file mode 100644
index 000000000000..11fff1ec0c1c
--- /dev/null
+++ b/frontend/src/ts/components/pages/account-settings/DangerZoneTab.tsx
@@ -0,0 +1,54 @@
+import {
+  showDeleteAccountModal,
+  showResetAccountModal,
+} from "../../modals/account-settings/ReauthConfirmModals";
+import { Section } from "./utils";
+
+export function DangerZoneTab() {
+  return (
+    <>
+      <ResetAccount />
+      <DeleteAccount />
+    </>
+  );
+}
+
+function ResetAccount() {
+  return (
+    <Section
+      title="reset account"
+      fa={{ icon: "fa-redo-alt" }}
+      description=<>
+        Completely resets your account to a blank state.
+        <br />
+        <span class="text-error">You can&apos;t undo this action!</span>
+      </>
+      button={{
+        text: "reset account",
+        class:
+          "[--themable-button-bg:var(--error-color)] [--themable-button-text:var(--bg-color)]",
+        onClick: () => showResetAccountModal(),
+      }}
+    />
+  );
+}
+
+function DeleteAccount() {
+  return (
+    <Section
+      title="delete account"
+      fa={{ icon: "fa-trash" }}
+      description=<>
+        Deletes your account and all data connected to it.
+        <br />
+        <span class="text-error">You can&apos;t undo this action!</span>
+      </>
+      button={{
+        text: "delete account",
+        class:
+          "[--themable-button-bg:var(--error-color)] [--themable-button-text:var(--bg-color)]",
+        onClick: () => showDeleteAccountModal(),
+      }}
+    />
+  );
+}
diff --git a/frontend/src/ts/components/pages/account-settings/utils.tsx b/frontend/src/ts/components/pages/account-settings/utils.tsx
new file mode 100644
index 000000000000..6bdcd77a253c
--- /dev/null
+++ b/frontend/src/ts/components/pages/account-settings/utils.tsx
@@ -0,0 +1,30 @@
+import { splitProps } from "solid-js";
+
+import { cn } from "../../../utils/cn";
+import { Button, ButtonProps } from "../../common/Button";
+import { Setting, SettingProps } from "../../common/Setting";
+
+export function Section(
+  props: Omit<
+    SettingProps,
+    "breakpoints" | "inputs" | "key" | "showDeepLink" | "fullWidthInputs"
+  > & {
+    button?: ButtonProps;
+    fullWidth?: boolean;
+  },
+) {
+  const [local, settingsProps] = splitProps(props, ["button", "fullWidth"]);
+  return (
+    <Setting
+      {...(settingsProps as SettingProps)}
+      showDeepLink={false}
+      key={undefined}
+      breakpoints={local.fullWidth ? "none" : "narrow"}
+      inputs={
+        local.button !== undefined ? (
+          <Button {...local.button} class={cn("w-full", local.button?.class)} />
+        ) : undefined
+      }
+    />
+  );
+}
diff --git a/frontend/src/ts/components/pages/connections/PendingRequests.tsx b/frontend/src/ts/components/pages/connections/PendingRequests.tsx
index 24f3fcf713f7..9b1ae72e0c34 100644
--- a/frontend/src/ts/components/pages/connections/PendingRequests.tsx
+++ b/frontend/src/ts/components/pages/connections/PendingRequests.tsx
@@ -31,7 +31,7 @@ export function PendingRequests() {
             <DataTable
               id="pendingConnections"
               columns={columns()}
-              data={[...pendingQueryData()]}
+              data={pendingQueryData()}
             />
           </Show>
         )}
diff --git a/frontend/src/ts/components/pages/settings/Setting.tsx b/frontend/src/ts/components/pages/settings/Setting.tsx
deleted file mode 100644
index 4de64430c3d5..000000000000
--- a/frontend/src/ts/components/pages/settings/Setting.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { JSXElement, Show } from "solid-js";
-import { z } from "zod";
-import { serialize } from "zod-urlsearchparams";
-
-import {
-  showErrorNotification,
-  showSuccessNotification,
-} from "../../../states/notifications";
-import { cn } from "../../../utils/cn";
-import { Button } from "../../common/Button";
-import { FaProps } from "../../common/Fa";
-import { H3 } from "../../common/Headers";
-
-type Props = {
-  key: string;
-  title: string;
-  fa: FaProps;
-  description: string | JSXElement;
-  inputs?: JSXElement;
-  fullWidthInputs?: JSXElement;
-};
-
-export function Setting(props: Props): JSXElement {
-  return (
-    <div
-      class={cn(
-        "group grid gap-2",
-        "-m-4 rounded-double p-4",
-        // "animate-[ring-flash_4s_ease-in_forwards]",
-      )}
-      data-setting-key={props.key}
-    >
-      <div class="flex gap-2">
-        <H3 text={props.title} fa={props.fa} class="pb-0" />
-        <Button
-          class="-m-2 p-2 opacity-0 group-hover:opacity-100"
-          variant="text"
-          fa={{ icon: "fa-link" }}
-          onClick={() => {
-            const urlParams = serialize({
-              schema: z.object({
-                highlight: z.string(),
-              }),
-              data: {
-                highlight: props.key,
-              },
-            });
-            const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
-            window.history.replaceState({}, "", newUrl);
-
-            navigator.clipboard
-              .writeText(window.location.toString())
-              .then(() => {
-                showSuccessNotification("Link copied to clipboard");
-              })
-              .catch((e: unknown) => {
-                showErrorNotification("Failed to copy to clipboard", {
-                  error: e,
-                });
-              });
-          }}
-        />
-      </div>
-      <Show when={props.inputs !== undefined}>
-        <div
-          class={cn(
-            "grid grid-cols-1 gap-2",
-            "md:grid-cols-[1fr_1fr] md:gap-x-8",
-            "lg:grid-cols-[1.5fr_1fr]",
-            "xl:grid-cols-[2fr_1fr]",
-            props.inputs === undefined &&
-              "grid-cols-1 md:grid-cols-1 lg:grid-cols-1 xl:grid-cols-1",
-          )}
-        >
-          <Show when={props.description !== ""}>
-            <div class="">{props.description}</div>
-          </Show>
-          <div>{props.inputs}</div>
-        </div>
-      </Show>
-      <Show when={props.fullWidthInputs}>{props.fullWidthInputs}</Show>
-    </div>
-  );
-}
diff --git a/frontend/src/ts/components/pages/settings/SettingsPage.tsx b/frontend/src/ts/components/pages/settings/SettingsPage.tsx
index 16da1cc15277..df344727ae74 100644
--- a/frontend/src/ts/components/pages/settings/SettingsPage.tsx
+++ b/frontend/src/ts/components/pages/settings/SettingsPage.tsx
@@ -25,6 +25,7 @@ import { Anime, AnimeShow } from "../../common/anime";
 import { Button } from "../../common/Button";
 import { Fa } from "../../common/Fa";
 import { Page } from "../../common/Page";
+import { Setting } from "../../common/Setting";
 import { CommandlineHotkey } from "../../hotkeys/CommandlineHotkey";
 import { InputField } from "../../ui/form/InputField";
 import { fromSchema } from "../../ui/form/utils";
@@ -51,7 +52,6 @@ import { SoundVolume } from "./custom-setting/SoundVolume";
 import { Tags } from "./custom-setting/Tags";
 import { Theme } from "./custom-setting/Theme";
 import { QuickNav } from "./QuickNav";
-import { Setting } from "./Setting";
 
 export function SettingsPage(): JSXElement {
   const [hasLocalBg] = createResource(
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/AnimationFpsLimit.tsx b/frontend/src/ts/components/pages/settings/custom-setting/AnimationFpsLimit.tsx
index c7ad5b19eba3..0f17bc74865f 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/AnimationFpsLimit.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/AnimationFpsLimit.tsx
@@ -5,9 +5,9 @@ import { fpsLimitSchema, getfpsLimit, setfpsLimit } from "../../../../anim";
 import { useSavedIndicator } from "../../../../hooks/useSavedIndicator";
 import { Button } from "../../../common/Button";
 import { Separator } from "../../../common/Separator";
+import { Setting } from "../../../common/Setting";
 import { InputField } from "../../../ui/form/InputField";
 import { fromSchema } from "../../../ui/form/utils";
-import { Setting } from "../Setting";
 
 export function AnimationFpsLimit(): JSXElement {
   const savedIndicator = useSavedIndicator();
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/AutoSwitchTheme.tsx b/frontend/src/ts/components/pages/settings/custom-setting/AutoSwitchTheme.tsx
index cd46bf20c74b..9e53a2e09d5f 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/AutoSwitchTheme.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/AutoSwitchTheme.tsx
@@ -7,8 +7,8 @@ import { getConfig } from "../../../../config/store";
 import { ThemesList } from "../../../../constants/themes";
 import { cn } from "../../../../utils/cn";
 import { Button } from "../../../common/Button";
+import { Setting } from "../../../common/Setting";
 import SlimSelect from "../../../ui/SlimSelect";
-import { Setting } from "../Setting";
 
 export function AutoSwitchTheme(): JSXElement {
   return (
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/CustomBackground.tsx b/frontend/src/ts/components/pages/settings/custom-setting/CustomBackground.tsx
index 9f2b526696ea..0e79cc766360 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/CustomBackground.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/CustomBackground.tsx
@@ -16,9 +16,9 @@ import { getOptions } from "../../../../utils/zod";
 import { Button } from "../../../common/Button";
 import { Fa } from "../../../common/Fa";
 import { Separator } from "../../../common/Separator";
+import { Setting } from "../../../common/Setting";
 import { InputField } from "../../../ui/form/InputField";
 import { fromSchema } from "../../../ui/form/utils";
-import { Setting } from "../Setting";
 
 export function CustomBackground(): JSXElement {
   const savedIndicator = useSavedIndicator();
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/CustomBackgroundFilters.tsx b/frontend/src/ts/components/pages/settings/custom-setting/CustomBackgroundFilters.tsx
index b4d43e4598c4..5a01de0fabaa 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/CustomBackgroundFilters.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/CustomBackgroundFilters.tsx
@@ -4,8 +4,8 @@ import { configMetadata } from "../../../../config/metadata";
 import { setConfig } from "../../../../config/setters";
 import { getConfig } from "../../../../config/store";
 import { applyCustomBackgroundFilters } from "../../../../controllers/theme-controller";
+import { Setting } from "../../../common/Setting";
 import { Slider } from "../../../common/Slider";
-import { Setting } from "../Setting";
 
 export function CustomBackgroundFilters(): JSXElement {
   let refBlur: HTMLInputElement | undefined = undefined;
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/CustomLayoutfluid.tsx b/frontend/src/ts/components/pages/settings/custom-setting/CustomLayoutfluid.tsx
index 51afb4bceb9e..ff8315d15530 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/CustomLayoutfluid.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/CustomLayoutfluid.tsx
@@ -6,8 +6,8 @@ import { setConfig } from "../../../../config/setters";
 import { getConfig } from "../../../../config/store";
 import { LayoutsList } from "../../../../constants/layouts";
 import { areUnsortedArraysEqual } from "../../../../utils/arrays";
+import { Setting } from "../../../common/Setting";
 import SlimSelect from "../../../ui/SlimSelect";
-import { Setting } from "../Setting";
 
 export function CustomLayoutfluid(): JSXElement {
   return (
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/CustomPolyglot.tsx b/frontend/src/ts/components/pages/settings/custom-setting/CustomPolyglot.tsx
index 5de756d72e51..3b65c893504d 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/CustomPolyglot.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/CustomPolyglot.tsx
@@ -11,8 +11,8 @@ import {
 } from "../../../../constants/languages";
 import { areUnsortedArraysEqual } from "../../../../utils/arrays";
 import { getLanguageDisplayString } from "../../../../utils/strings";
+import { Setting } from "../../../common/Setting";
 import SlimSelect from "../../../ui/SlimSelect";
-import { Setting } from "../Setting";
 
 export function CustomPolyglot(): JSXElement {
   return (
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/FontFamily.tsx b/frontend/src/ts/components/pages/settings/custom-setting/FontFamily.tsx
index 19ace4b8a7c4..f3d789623ee2 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/FontFamily.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/FontFamily.tsx
@@ -13,7 +13,7 @@ import { normalizeName } from "../../../../utils/strings";
 import { getOptions } from "../../../../utils/zod";
 import { Button } from "../../../common/Button";
 import { Separator } from "../../../common/Separator";
-import { Setting } from "../Setting";
+import { Setting } from "../../../common/Setting";
 
 export function FontFamily(): JSXElement {
   const [hasLocalFont, { refetch }] = createResource(async () =>
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/Funbox.tsx b/frontend/src/ts/components/pages/settings/custom-setting/Funbox.tsx
index 340654f92456..a13ec89540f9 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/Funbox.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/Funbox.tsx
@@ -7,7 +7,7 @@ import { toggleFunbox } from "../../../../config/setters";
 import { getConfig } from "../../../../config/store";
 import { getActiveFunboxNames } from "../../../../test/funbox/list";
 import { Button } from "../../../common/Button";
-import { Setting } from "../Setting";
+import { Setting } from "../../../common/Setting";
 
 export function Funbox(): JSXElement {
   return (
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/ImportExport.tsx b/frontend/src/ts/components/pages/settings/custom-setting/ImportExport.tsx
index 14d5d0ea8cc7..83581b4ac7e6 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/ImportExport.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/ImportExport.tsx
@@ -9,7 +9,7 @@ import {
 } from "../../../../states/notifications";
 import { showSimpleModal } from "../../../../states/simple-modal";
 import { Button } from "../../../common/Button";
-import { Setting } from "../Setting";
+import { Setting } from "../../../common/Setting";
 
 export function ImportExport(): JSXElement {
   return (
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/KeymapLayout.tsx b/frontend/src/ts/components/pages/settings/custom-setting/KeymapLayout.tsx
index bc62e730bf21..fb7bb99b2366 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/KeymapLayout.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/KeymapLayout.tsx
@@ -5,8 +5,8 @@ import { configMetadata } from "../../../../config/metadata";
 import { setConfig } from "../../../../config/setters";
 import { getConfig } from "../../../../config/store";
 import { LayoutsList } from "../../../../constants/layouts";
+import { Setting } from "../../../common/Setting";
 import SlimSelect from "../../../ui/SlimSelect";
-import { Setting } from "../Setting";
 
 export function KeymapLayout(): JSXElement {
   return (
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/KeymapSize.tsx b/frontend/src/ts/components/pages/settings/custom-setting/KeymapSize.tsx
index b1620895b688..3da2f86f1145 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/KeymapSize.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/KeymapSize.tsx
@@ -3,8 +3,8 @@ import { JSXElement } from "solid-js";
 import { configMetadata } from "../../../../config/metadata";
 import { setConfig } from "../../../../config/setters";
 import { getConfig } from "../../../../config/store";
+import { Setting } from "../../../common/Setting";
 import { Slider } from "../../../common/Slider";
-import { Setting } from "../Setting";
 
 export function KeymapSize(): JSXElement {
   return (
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/Language.tsx b/frontend/src/ts/components/pages/settings/custom-setting/Language.tsx
index f3acf14a7cf9..05da846d38b8 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/Language.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/Language.tsx
@@ -10,8 +10,8 @@ import {
   LanguageGroups,
 } from "../../../../constants/languages";
 import { getLanguageDisplayString } from "../../../../utils/strings";
+import { Setting } from "../../../common/Setting";
 import SlimSelect from "../../../ui/SlimSelect";
-import { Setting } from "../Setting";
 
 export function Language(): JSXElement {
   return (
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/Layout.tsx b/frontend/src/ts/components/pages/settings/custom-setting/Layout.tsx
index 1f6271834d80..03b715be812c 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/Layout.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/Layout.tsx
@@ -5,8 +5,8 @@ import { configMetadata } from "../../../../config/metadata";
 import { setConfig } from "../../../../config/setters";
 import { getConfig } from "../../../../config/store";
 import { LayoutsList } from "../../../../constants/layouts";
+import { Setting } from "../../../common/Setting";
 import SlimSelect from "../../../ui/SlimSelect";
-import { Setting } from "../Setting";
 
 export function Layout(): JSXElement {
   return (
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/MaxLineWidth.tsx b/frontend/src/ts/components/pages/settings/custom-setting/MaxLineWidth.tsx
index 822523b1cb95..59e9d59cdd04 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/MaxLineWidth.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/MaxLineWidth.tsx
@@ -6,10 +6,10 @@ import { configMetadata } from "../../../../config/metadata";
 import { setConfig } from "../../../../config/setters";
 import { getConfig } from "../../../../config/store";
 import { useSavedIndicator } from "../../../../hooks/useSavedIndicator";
+import { Setting } from "../../../common/Setting";
 // import { showSuccessNotification } from "../../../../states/notifications";
 import { InputField } from "../../../ui/form/InputField";
 import { fromSchema } from "../../../ui/form/utils";
-import { Setting } from "../Setting";
 
 export function MaxLineWidth(): JSXElement {
   const { component: SavedIndicator, flash } = useSavedIndicator();
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/MinAcc.tsx b/frontend/src/ts/components/pages/settings/custom-setting/MinAcc.tsx
index 2abd3ced0477..7db767a927a7 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/MinAcc.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/MinAcc.tsx
@@ -8,9 +8,9 @@ import { getConfig } from "../../../../config/store";
 import { useSavedIndicator } from "../../../../hooks/useSavedIndicator";
 // import { showSuccessNotification } from "../../../../states/notifications";
 import { Button } from "../../../common/Button";
+import { Setting } from "../../../common/Setting";
 import { InputField } from "../../../ui/form/InputField";
 import { fromSchema } from "../../../ui/form/utils";
-import { Setting } from "../Setting";
 
 export function MinAcc(): JSXElement {
   const savedIndicator = useSavedIndicator();
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/MinBurst.tsx b/frontend/src/ts/components/pages/settings/custom-setting/MinBurst.tsx
index adec7f6979d5..8600b2a825ca 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/MinBurst.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/MinBurst.tsx
@@ -8,9 +8,9 @@ import { getConfig } from "../../../../config/store";
 import { useSavedIndicator } from "../../../../hooks/useSavedIndicator";
 // import { showSuccessNotification } from "../../../../states/notifications";
 import { Button } from "../../../common/Button";
+import { Setting } from "../../../common/Setting";
 import { InputField } from "../../../ui/form/InputField";
 import { fromSchema } from "../../../ui/form/utils";
-import { Setting } from "../Setting";
 
 export function MinBurst(): JSXElement {
   const savedIndicator = useSavedIndicator();
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/MinSpeed.tsx b/frontend/src/ts/components/pages/settings/custom-setting/MinSpeed.tsx
index b9ae408602a4..34a21200f0af 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/MinSpeed.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/MinSpeed.tsx
@@ -8,9 +8,9 @@ import { getConfig } from "../../../../config/store";
 import { useSavedIndicator } from "../../../../hooks/useSavedIndicator";
 // import { showSuccessNotification } from "../../../../states/notifications";
 import { Button } from "../../../common/Button";
+import { Setting } from "../../../common/Setting";
 import { InputField } from "../../../ui/form/InputField";
 import { fromSchema } from "../../../ui/form/utils";
-import { Setting } from "../Setting";
 
 export function MinSpeed(): JSXElement {
   const savedIndicator = useSavedIndicator();
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/PaceCaret.tsx b/frontend/src/ts/components/pages/settings/custom-setting/PaceCaret.tsx
index 89226f20319e..ea019e169907 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/PaceCaret.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/PaceCaret.tsx
@@ -11,9 +11,9 @@ import { getConfig } from "../../../../config/store";
 import { useSavedIndicator } from "../../../../hooks/useSavedIndicator";
 import { getOptions } from "../../../../utils/zod";
 import { Button } from "../../../common/Button";
+import { Setting } from "../../../common/Setting";
 import { InputField } from "../../../ui/form/InputField";
 import { fromSchema } from "../../../ui/form/utils";
-import { Setting } from "../Setting";
 
 export function PaceCaret(): JSXElement {
   const savedIndicator = useSavedIndicator();
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/Presets.tsx b/frontend/src/ts/components/pages/settings/custom-setting/Presets.tsx
index 1bcfc893806f..334cbe43029a 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/Presets.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/Presets.tsx
@@ -9,7 +9,7 @@ import { showEditPresetModal } from "../../../../states/edit-preset-modal";
 import { showModal } from "../../../../states/modals";
 import { showSimpleModal } from "../../../../states/simple-modal";
 import { Button } from "../../../common/Button";
-import { Setting } from "../Setting";
+import { Setting } from "../../../common/Setting";
 
 export function Presets(): JSXElement {
   const presets = usePresetsLiveQuery();
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/SoundVolume.tsx b/frontend/src/ts/components/pages/settings/custom-setting/SoundVolume.tsx
index 4f5dc93cadc0..043cce5fa24e 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/SoundVolume.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/SoundVolume.tsx
@@ -7,8 +7,8 @@ import {
   playClick,
   previewClick,
 } from "../../../../controllers/sound-controller";
+import { Setting } from "../../../common/Setting";
 import { Slider } from "../../../common/Slider";
-import { Setting } from "../Setting";
 
 export function SoundVolume(): JSXElement {
   return (
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/Tags.tsx b/frontend/src/ts/components/pages/settings/custom-setting/Tags.tsx
index dfc3301f225f..969e7f2655fa 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/Tags.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/Tags.tsx
@@ -13,8 +13,8 @@ import {
 import { showSimpleModal } from "../../../../states/simple-modal";
 import { normalizeName } from "../../../../utils/strings";
 import { Button } from "../../../common/Button";
+import { Setting } from "../../../common/Setting";
 import { showAddTagModal } from "../../../modals/AddTagModal";
-import { Setting } from "../Setting";
 
 export function Tags(): JSXElement {
   const tags = useTagsLiveQuery();
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/Theme.tsx b/frontend/src/ts/components/pages/settings/custom-setting/Theme.tsx
index b7ad5a73c554..b72ba8bbda8c 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/Theme.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/Theme.tsx
@@ -41,7 +41,7 @@ import { AnimeMatch } from "../../../common/anime/AnimeMatch";
 import { Button } from "../../../common/Button";
 import { Fa } from "../../../common/Fa";
 import { Separator } from "../../../common/Separator";
-import { Setting } from "../Setting";
+import { Setting } from "../../../common/Setting";
 
 export const sortedThemes: ThemeWithName[] = [...ThemesList].sort((a, b) => {
   const b1 = hexToHSL(a.bg);
diff --git a/frontend/src/ts/components/ui/table/DataTable.tsx b/frontend/src/ts/components/ui/table/DataTable.tsx
index 06aa1d07a757..afff4a24521f 100644
--- a/frontend/src/ts/components/ui/table/DataTable.tsx
+++ b/frontend/src/ts/components/ui/table/DataTable.tsx
@@ -70,7 +70,7 @@ export type DataTableProps<TData, TValue> = {
 };
 
 // oxlint-disable-next-line typescript/no-explicit-any
-export function DataTable<TData, TValue = any>(
+export function DataTable<TData extends Object, TValue = any>(
   props: DataTableProps<TData, TValue>,
 ): JSXElement {
   const [sorting, setSorting] = useLocalStorage<SortingState>({
@@ -103,92 +103,100 @@ export function DataTable<TData, TValue = any>(
     }
   });
 
-  const table = createSolidTable<TData>({
-    get data() {
-      return props.data;
-    },
-    get columns() {
-      return props.columns;
-    },
-    getCoreRowModel: getCoreRowModel(),
-    onSortingChange: (it) => {
-      setSorting(it);
-      props.onSortingChange?.(sorting());
-    },
+  // Ensure reactivity: always produce a fresh array reference
+  const data = createMemo(() => props.data.map((it) => ({ ...it })));
 
-    //oxlint-disable-next-line solid/reactivity
-    ...(props.onSortingChange
-      ? { manualSorting: true }
-      : { getSortedRowModel: getSortedRowModel() }),
-    enableRowSelection: () => props.rowSelection !== undefined,
-    getRowId: (row, index) =>
-      props.rowSelection !== undefined
-        ? props.rowSelection.getRowId(row)
-        : index.toString(),
-    onRowSelectionChange: setRowSelection,
-
-    state: {
-      get sorting() {
-        return sorting();
+  // Recreate the table instance whenever data or columns change
+  const table = createMemo(() =>
+    createSolidTable<TData>({
+      data: data(),
+      get columns() {
+        return props.columns;
       },
-      get rowSelection() {
-        return rowSelection();
+      getCoreRowModel: getCoreRowModel(),
+      onSortingChange: (it) => {
+        setSorting(it);
+        props.onSortingChange?.(sorting());
       },
-    },
-  });
+
+      //oxlint-disable-next-line solid/reactivity
+      ...(props.onSortingChange
+        ? { manualSorting: true }
+        : { getSortedRowModel: getSortedRowModel() }),
+      enableRowSelection: () => props.rowSelection !== undefined,
+      getRowId: (row, index) =>
+        props.rowSelection !== undefined
+          ? props.rowSelection.getRowId(row)
+          : typeof (row as Record<string, unknown>)["_id"] === "string"
+            ? ((row as Record<string, unknown>)["_id"] as string)
+            : index.toString(),
+      onRowSelectionChange: setRowSelection,
+
+      state: {
+        get sorting() {
+          return sorting();
+        },
+        get rowSelection() {
+          return rowSelection();
+        },
+      },
+    }),
+  );
 
   //create column visibility classes once, make them accessible via the column.id
   const columnVisibility = createMemo(() => {
     return Object.fromEntries(
-      table.getAllColumns().map((it) => {
-        const breakpoint =
-          it.columnDef.meta?.breakpoint === "xxl"
-            ? "2xl"
-            : it.columnDef.meta?.breakpoint;
-        const maxBreakpoint =
-          it.columnDef.meta?.maxBreakpoint === "xxl"
-            ? "2xl"
-            : it.columnDef.meta?.maxBreakpoint;
+      table()
+        .getAllColumns()
+        .map((it) => {
+          const breakpoint =
+            it.columnDef.meta?.breakpoint === "xxl"
+              ? "2xl"
+              : it.columnDef.meta?.breakpoint;
+          const maxBreakpoint =
+            it.columnDef.meta?.maxBreakpoint === "xxl"
+              ? "2xl"
+              : it.columnDef.meta?.maxBreakpoint;
 
-        // 🚨 Tailwind does not generate CSS for dynamically constructed class names.
-        const classes = {
-          hidden: false,
-          "xxs:table-cell": false,
-          "xs:table-cell": false,
-          "sm:table-cell": false,
-          "md:table-cell": false,
-          "lg:table-cell": false,
-          "xl:table-cell": false,
-          "2xl:table-cell": false,
-          "xxs:hidden": false,
-          "xs:hidden": false,
-          "sm:hidden": false,
-          "md:hidden": false,
-          "lg:hidden": false,
-          "xl:hidden": false,
-          "2xl:hidden": false,
-        };
-        if (breakpoint !== undefined) {
-          classes.hidden = true;
-          classes[`${breakpoint}:table-cell`] = true;
-        }
-        if (maxBreakpoint !== undefined) {
-          classes[`${maxBreakpoint}:hidden`] = true;
-        }
-        return [it.id, classes];
-      }),
+          // 🚨 Tailwind does not generate CSS for dynamically constructed class names.
+          const classes = {
+            hidden: false,
+            "xxs:table-cell": false,
+            "xs:table-cell": false,
+            "sm:table-cell": false,
+            "md:table-cell": false,
+            "lg:table-cell": false,
+            "xl:table-cell": false,
+            "2xl:table-cell": false,
+            "xxs:hidden": false,
+            "xs:hidden": false,
+            "sm:hidden": false,
+            "md:hidden": false,
+            "lg:hidden": false,
+            "xl:hidden": false,
+            "2xl:hidden": false,
+          };
+          if (breakpoint !== undefined) {
+            classes.hidden = true;
+            classes[`${breakpoint}:table-cell`] = true;
+          }
+          if (maxBreakpoint !== undefined) {
+            classes[`${maxBreakpoint}:hidden`] = true;
+          }
+          return [it.id, classes];
+        }),
     );
   });
 
   return (
     <Show
-      when={table.getRowModel().rows?.length || props.noDataRow !== undefined}
+      when={table().getRowModel().rows?.length || props.noDataRow !== undefined}
       fallback={props.fallback}
     >
       <Table id={props.id} class={props.class}>
         <Show when={!props.hideHeader}>
           <TableHeader>
-            <For each={table.getHeaderGroups()}>
+            <For each={table().getHeaderGroups()}>
               {(headerGroup) => (
                 <TableRow>
                   <For each={headerGroup.headers}>
@@ -302,7 +310,7 @@ export function DataTable<TData, TValue = any>(
           </TableHeader>
         </Show>
         <TableBody>
-          <For each={table.getRowModel().rows}>
+          <For each={table().getRowModel().rows}>
             {(row) => (
               <TableRow
                 {...{
@@ -357,12 +365,13 @@ export function DataTable<TData, TValue = any>(
           </For>
           <Show
             when={
-              !table.getRowModel().rows?.length && props.noDataRow !== undefined
+              !table().getRowModel().rows?.length &&
+              props.noDataRow !== undefined
             }
           >
             <TableRow>
               <TableCell
-                colSpan={table.getAllColumns().length}
+                colSpan={table().getAllColumns().length}
                 class="text-center text-sub"
               >
                 {props.noDataRow !== undefined &&
diff --git a/frontend/src/ts/controllers/page-controller.ts b/frontend/src/ts/controllers/page-controller.ts
index c61925a533e8..5550c12cbe8b 100644
--- a/frontend/src/ts/controllers/page-controller.ts
+++ b/frontend/src/ts/controllers/page-controller.ts
@@ -7,7 +7,6 @@ import {
 } from "../states/core";
 import * as PageTest from "../pages/test";
 import * as PageLoading from "../pages/loading";
-import * as PageAccountSettings from "../pages/account-settings";
 import * as PageTransition from "../legacy-states/page-transition";
 import * as AdController from "../controllers/ad-controller";
 import * as Focus from "../test/focus";
@@ -23,7 +22,7 @@ import { onDOMReady, qsa, qsr } from "../utils/dom";
 import * as Skeleton from "../utils/skeleton";
 import {
   LeaderboardUrlParamsSchema,
-  readGetParameters,
+  readLeaderboardGetParameters,
 } from "../states/leaderboard-selection";
 import { configurationPromise as serverConfigurationPromise } from "../ape/server-configuration";
 import { getSnapshot } from "../db";
@@ -34,6 +33,10 @@ import {
   isConnectionsReady,
   waitForConnectionsReady,
 } from "../collections/connections";
+import {
+  AccountSettingsUrlParamsSchema,
+  readAccountSettingsGetParameters,
+} from "../states/account-settings";
 
 type ChangeOptions = {
   force?: boolean;
@@ -131,7 +134,12 @@ const pages = {
       ],
     },
   }),
-  accountSettings: PageAccountSettings.page,
+  accountSettings: solidPage("accountSettings", {
+    urlParamsSchema: AccountSettingsUrlParamsSchema,
+    beforeShow: async (options) => {
+      readAccountSettingsGetParameters(options.urlParams);
+    },
+  }),
   leaderboards: solidPage("leaderboards", {
     urlParamsSchema: LeaderboardUrlParamsSchema,
     loadingOptions: {
@@ -142,7 +150,7 @@ const pages = {
       },
     },
     beforeShow: async (options) => {
-      readGetParameters(options.urlParams);
+      readLeaderboardGetParameters(options.urlParams);
     },
   }),
 };
diff --git a/frontend/src/ts/elements/account-settings/ape-key-table.ts b/frontend/src/ts/elements/account-settings/ape-key-table.ts
deleted file mode 100644
index cdfa052466bc..000000000000
--- a/frontend/src/ts/elements/account-settings/ape-key-table.ts
+++ /dev/null
@@ -1,245 +0,0 @@
-import { showLoaderBar, hideLoaderBar } from "../../states/loader-bar";
-import {
-  showErrorNotification,
-  showSuccessNotification,
-} from "../../states/notifications";
-import Ape from "../../ape";
-import {
-  ApeKey,
-  ApeKeys,
-  ApeKeyNameSchema,
-} from "@monkeytype/schemas/ape-keys";
-import { format } from "date-fns/format";
-import { isAuthenticated } from "../../states/core";
-import { qs, qsr } from "../../utils/dom";
-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 = {};
-
-const element = qsr("#pageAccountSettings .tab[data-tab='apeKeys']");
-
-async function getData(): Promise<boolean> {
-  if (!isAuthenticated()) return false;
-
-  showLoaderRow();
-  const response = await Ape.apeKeys.get();
-
-  if (response.status !== 200) {
-    if (
-      response.body.message ===
-      "You have lost access to ape keys, please contact support"
-    ) {
-      lostAccess = true;
-      void update();
-      return false;
-    }
-    showErrorNotification("Error getting ape keys", { response });
-    return false;
-  }
-
-  apeKeys = response.body.data;
-  return true;
-}
-
-function showLoaderRow(): void {
-  const table = element.qs("table tbody");
-
-  table?.empty();
-  table?.appendHtml(
-    "<tr><td colspan='6' style='text-align: center;font-size:1rem;'><i class='fas fa-spin fa-circle-notch'></i></td></tr>",
-  );
-}
-
-function refreshList(): void {
-  const data = apeKeys;
-  if (data === undefined || data === null) return;
-  const table = element.qs("table tbody");
-  table?.empty();
-  const apeKeyIds = Object.keys(data);
-  if (apeKeyIds.length === 0) {
-    table?.appendHtml(
-      "<tr><td colspan='6' style='text-align: center;'>No keys found</td></tr>",
-    );
-    return;
-  }
-  apeKeyIds.forEach((apeKeyId) => {
-    const key = data[apeKeyId] as ApeKey;
-    table?.appendHtml(`
-      <tr keyId="${apeKeyId}">
-        <td>
-          <button class="textButton toggleActive" style="font-size: 1.25rem">
-            ${
-              key.enabled
-                ? `<i class="fas fa-fw fa-check-square"></i>`
-                : `<i class="far fa-fw fa-square"></i>`
-            }
-          </button>
-        </td>
-        <td>${key.name}</td>
-        <td>${format(new Date(key.createdOn), "dd MMM yyyy HH:mm")}</td>
-        <td>${format(new Date(key.modifiedOn), "dd MMM yyyy HH:mm")}</td>
-        <td>${
-          key.lastUsedOn === -1
-            ? "-"
-            : format(new Date(key.lastUsedOn), "dd MMM yyyy HH:mm")
-        }</td>
-        <td>
-          <div class="keyButtons">
-            <button class="editButton">
-              <i class="fas fa-fw fa-pen"></i>
-            </button>
-            <button class="deleteButton">
-              <i class="fas fa-fw fa-trash-alt"></i>
-            </button>
-          </div>
-        </td>
-      </tr>
-    `);
-  });
-  for (const tr of table?.qsa("tr") ?? []) {
-    const keyid = tr.getAttribute("keyid") as string;
-    tr.qs("button.toggleActive")?.on("click", (e) => {
-      void toggleActiveKey(keyid);
-    });
-    tr.qs("button.deleteButton")?.on("click", (e) => {
-      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",
-          };
-        },
-      });
-    });
-    tr.qs("button.editButton")?.on("click", (e) => {
-      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",
-          };
-        },
-      });
-    });
-  }
-}
-
-async function toggleActiveKey(keyId: string): Promise<void> {
-  const key = apeKeys?.[keyId];
-  if (!key || apeKeys === undefined) return;
-  showLoaderBar();
-  const response = await Ape.apeKeys.save({
-    params: { apeKeyId: keyId },
-    body: { enabled: !key.enabled },
-  });
-  hideLoaderBar();
-  if (response.status !== 200) {
-    showErrorNotification("Failed to update key", { response });
-    return;
-  }
-  key.enabled = !key.enabled;
-  refreshList();
-  if (key.enabled) {
-    showSuccessNotification("Key active");
-  } else {
-    showSuccessNotification("Key inactive");
-  }
-}
-
-let onApeKeyChange: (() => void) | undefined = undefined;
-
-let lostAccess = false;
-
-export async function update(onApeKeyChangee?: () => void): Promise<void> {
-  if (lostAccess) {
-    qs(".pageAccountSettings .tab[data-tab='apeKeys'] table")?.remove();
-    qs(".pageAccountSettings .section.apeKeys .buttons")?.remove();
-    qs(".pageAccountSettings .section.apeKeys .lostAccess")?.removeClass(
-      "hidden",
-    );
-    return;
-  }
-  onApeKeyChange = onApeKeyChangee;
-  await getData();
-  refreshList();
-}
-
-qs(".pageAccountSettings")?.onChild("click", "#generateNewApeKey", () => {
-  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",
-        afterHide: (): void => {
-          setLastGeneratedApeKey(data.apeKey);
-          showModal("ViewApeKey");
-        },
-      };
-    },
-  });
-});
diff --git a/frontend/src/ts/pages/account-settings.ts b/frontend/src/ts/pages/account-settings.ts
deleted file mode 100644
index 6452541bc1f4..000000000000
--- a/frontend/src/ts/pages/account-settings.ts
+++ /dev/null
@@ -1,294 +0,0 @@
-import { PageWithUrlParams } from "./page";
-import * as Skeleton from "../utils/skeleton";
-import { getAuthenticatedUser } from "../firebase";
-import { getActivePage, isAuthenticated } from "../states/core";
-import { swapElements } from "../utils/misc";
-import { getSnapshot } from "../db";
-import Ape from "../ape";
-import * as StreakHourOffsetModal from "../modals/streak-hour-offset";
-import { showLoaderBar } from "../states/loader-bar";
-import * as ApeKeyTable from "../elements/account-settings/ape-key-table";
-import { showErrorNotification } from "../states/notifications";
-import { z } from "zod";
-import { authEvent } from "../events/auth";
-import { qs, qsa, qsr, onDOMReady } from "../utils/dom";
-import { addAuthProvider } 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");
-
-const StateSchema = z.object({
-  tab: z.enum([
-    "authentication",
-    "account",
-    "apeKeys",
-    "dangerZone",
-    "blockedUsers",
-  ]),
-});
-type State = z.infer<typeof StateSchema>;
-
-const UrlParameterSchema = StateSchema.partial();
-
-const state: State = {
-  tab: "account",
-};
-
-function updateAuthenticationSections(): void {
-  pageElement.qsa(".section.passwordAuthSettings button")?.hide();
-  pageElement.qsa(".section.googleAuthSettings button")?.hide();
-  pageElement.qsa(".section.githubAuthSettings button")?.hide();
-
-  const user = getAuthenticatedUser();
-  if (user === null) return;
-
-  const passwordProvider = user.providerData.some(
-    (provider) => provider.providerId === "password",
-  );
-  const googleProvider = user.providerData.some(
-    (provider) => provider.providerId === "google.com",
-  );
-  const githubProvider = user.providerData.some(
-    (provider) => provider.providerId === "github.com",
-  );
-
-  if (passwordProvider) {
-    pageElement.qs(".section.passwordAuthSettings #emailPasswordAuth")?.show();
-    pageElement.qs(".section.passwordAuthSettings #passPasswordAuth")?.show();
-    if (googleProvider || githubProvider) {
-      pageElement
-        .qs(".section.passwordAuthSettings #removePasswordAuth")
-        ?.show();
-    }
-  } else {
-    pageElement.qs(".section.passwordAuthSettings #addPasswordAuth")?.show();
-  }
-
-  if (googleProvider) {
-    pageElement.qs(".section.googleAuthSettings #removeGoogleAuth")?.show();
-    if (passwordProvider || githubProvider) {
-      pageElement.qs(".section.googleAuthSettings #removeGoogleAuth")?.enable();
-    } else {
-      pageElement
-        .qs(".section.googleAuthSettings #removeGoogleAuth")
-        ?.disable();
-    }
-  } else {
-    pageElement.qs(".section.googleAuthSettings #addGoogleAuth")?.show();
-  }
-  if (githubProvider) {
-    pageElement.qs(".section.githubAuthSettings #removeGithubAuth")?.show();
-    if (passwordProvider || googleProvider) {
-      pageElement.qs(".section.githubAuthSettings #removeGithubAuth")?.enable();
-    } else {
-      pageElement
-        .qs(".section.githubAuthSettings #removeGithubAuth")
-        ?.disable();
-    }
-  } else {
-    pageElement.qs(".section.githubAuthSettings #addGithubAuth")?.show();
-  }
-}
-
-function updateIntegrationSections(): void {
-  //no code and no discord
-  if (!isAuthenticated()) {
-    pageElement.qs(".section.discordIntegration")?.hide();
-  } else {
-    if (!getSnapshot()) return;
-    pageElement.qs(".section.discordIntegration")?.show();
-
-    if (getSnapshot()?.discordId === undefined) {
-      //show button
-      pageElement.qs(".section.discordIntegration .buttons")?.show();
-      pageElement.qs(".section.discordIntegration .info")?.hide();
-    } else {
-      pageElement.qs(".section.discordIntegration .buttons")?.hide();
-      pageElement.qs(".section.discordIntegration .info")?.show();
-    }
-  }
-}
-
-function updateTabs(): void {
-  void swapElements(
-    pageElement.qs(".tab.active"),
-    pageElement.qs(`.tab[data-tab="${state.tab}"]`),
-    250,
-    async () => {
-      //
-    },
-    async () => {
-      pageElement.qsa(".tab")?.removeClass("active");
-      pageElement.qs(`.tab[data-tab="${state.tab}"]`)?.addClass("active");
-      if (state.tab === "apeKeys") void ApeKeyTable.update(updateUI);
-    },
-  );
-  pageElement.qsa("button")?.removeClass("active");
-  pageElement.qs(`button[data-tab="${state.tab}"]`)?.addClass("active");
-}
-
-function updateAccountSections(): void {
-  pageElement.qs(".section.optOutOfLeaderboards .optedOut")?.hide();
-  pageElement.qs(".section.optOutOfLeaderboards .buttons")?.show();
-  pageElement.qs(".section.setStreakHourOffset .info")?.hide();
-  pageElement.qs(".section.setStreakHourOffset .buttons")?.show();
-
-  const snapshot = getSnapshot();
-  if (snapshot?.lbOptOut === true) {
-    pageElement.qs(".section.optOutOfLeaderboards .optedOut")?.show();
-    pageElement.qs(".section.optOutOfLeaderboards .buttons")?.hide();
-  }
-  if (snapshot?.streakHourOffset !== undefined) {
-    pageElement.qs(".section.setStreakHourOffset .info")?.show();
-    const sign = snapshot?.streakHourOffset > 0 ? "+" : "";
-    pageElement
-      .qs(".section.setStreakHourOffset .info span")
-      ?.setText(sign + snapshot?.streakHourOffset);
-    pageElement.qs(".section.setStreakHourOffset .buttons")?.hide();
-  }
-}
-
-export function updateUI(): void {
-  if (getActivePage() !== "accountSettings") return;
-  updateAuthenticationSections();
-  updateIntegrationSections();
-  updateAccountSections();
-  updateTabs();
-  page.setUrlParams(state);
-}
-
-qs(".page.pageAccountSettings")?.onChild("click", ".tabs button", (event) => {
-  state.tab = (event.target as HTMLElement).getAttribute(
-    "data-tab",
-  ) as State["tab"];
-  updateTabs();
-  page.setUrlParams(state);
-});
-
-qsa(
-  ".page.pageAccountSettings .section.discordIntegration .getLinkAndGoToOauth",
-)?.on("click", () => {
-  showLoaderBar();
-  void Ape.users.getDiscordOAuth().then((response) => {
-    if (response.status === 200) {
-      window.open(response.body.data.url, "_self");
-    } else {
-      showErrorNotification(
-        `Failed to get OAuth from discord: ${response.body.message}`,
-      );
-    }
-  });
-});
-
-qs(".page.pageAccountSettings #setStreakHourOffset")?.on("click", () => {
-  StreakHourOffsetModal.show();
-});
-
-qs(".pageAccountSettings")?.onChild("click", "#unlinkDiscordButton", () => {
-  showUnlinkDiscordModal({ callback: updateUI });
-});
-
-qs(".pageAccountSettings")?.onChild("click", "#removeGoogleAuth", () => {
-  showRemoveAuthMethodModal({ authMethod: "google", callback: updateUI });
-});
-
-qs(".pageAccountSettings")?.onChild("click", "#removeGithubAuth", () => {
-  showRemoveAuthMethodModal({ authMethod: "github", callback: updateUI });
-});
-
-qs(".pageAccountSettings")?.onChild("click", "#removePasswordAuth", () => {
-  showRemoveAuthMethodModal({ authMethod: "password", callback: updateUI });
-});
-
-qs(".pageAccountSettings")?.onChild("click", "#addPasswordAuth", () => {
-  showAddPasswordAuthModal({ callback: updateUI });
-});
-
-qs(".pageAccountSettings")?.onChild("click", "#updateAccountName", () => {
-  showUpdateNameModal();
-});
-
-qs(".pageAccountSettings")?.onChild("click", "#emailPasswordAuth", () => {
-  showUpdateEmailModal();
-});
-
-qs(".pageAccountSettings")?.onChild("click", "#passPasswordAuth", () => {
-  showUpdatePasswordModal();
-});
-
-qs(".pageAccountSettings")?.onChild("click", "#deleteAccount", () => {
-  showDeleteAccountModal();
-});
-
-qs(".pageAccountSettings")?.onChild("click", "#resetAccount", () => {
-  showResetAccountModal();
-});
-
-qs(".pageAccountSettings")?.onChild(
-  "click",
-  "#optOutOfLeaderboardsButton",
-  () => {
-    showOptOutOfLeaderboardsModal();
-  },
-);
-
-qs(".pageAccountSettings")?.onChild("click", "#revokeAllTokens", () => {
-  showRevokeAllTokensModal();
-});
-
-qs(".pageAccountSettings")?.onChild(
-  "click",
-  "#resetPersonalBestsButton",
-  () => {
-    showResetPersonalBestsModal();
-  },
-);
-
-qs(".pageAccountSettings")?.onChild("click", "#addGoogleAuth", () => {
-  void addAuthProvider("google");
-});
-
-qs(".pageAccountSettings")?.onChild("click", "#addGithubAuth", () => {
-  void addAuthProvider("github");
-});
-
-authEvent.subscribe((event) => {
-  if (event.type === "authConfigUpdated") {
-    updateUI();
-  }
-});
-
-export const page = new PageWithUrlParams({
-  id: "accountSettings",
-  display: "Account Settings",
-  element: pageElement,
-  path: "/account-settings",
-  urlParamsSchema: UrlParameterSchema,
-  afterHide: async (): Promise<void> => {
-    Skeleton.remove("pageAccountSettings");
-  },
-  beforeShow: async (options): Promise<void> => {
-    if (options.urlParams?.tab !== undefined) {
-      state.tab = options.urlParams.tab;
-    }
-    Skeleton.append("pageAccountSettings", "main");
-    pageElement.qs(`.tab[data-tab="${state.tab}"]`)?.addClass("active");
-    updateUI();
-  },
-});
-
-onDOMReady(() => {
-  Skeleton.save("pageAccountSettings");
-});
diff --git a/frontend/src/ts/states/account-settings.ts b/frontend/src/ts/states/account-settings.ts
index ad24dbe7eac0..c6e396685c64 100644
--- a/frontend/src/ts/states/account-settings.ts
+++ b/frontend/src/ts/states/account-settings.ts
@@ -1,5 +1,73 @@
 import { createSignal } from "solid-js";
+import { z } from "zod";
+import { createEffectOn } from "../hooks/effects";
+import { FaSolidIcon } from "../types/font-awesome";
+import { getActivePage, isAuthenticated } from "./core";
+import { serialize as serializeUrlSearchParams } from "zod-urlsearchparams";
 
 export const [getLastGeneratedApeKey, setLastGeneratedApeKey] = createSignal<
   string | undefined
 >(undefined);
+
+export const AccountSettingsTabSchema = z.enum([
+  "account",
+  "authentication",
+  "blockedUsers",
+  "apeKeys",
+  "dangerZone",
+]);
+export type AccountSettingsTab = z.infer<typeof AccountSettingsTabSchema>;
+
+export const accountSettingsTabs: Record<
+  AccountSettingsTab,
+  { icon: FaSolidIcon; text: string }
+> = {
+  account: { text: "account", icon: "fa-user" },
+  authentication: { text: "authentication", icon: "fa-key" },
+  blockedUsers: { text: "blocked users", icon: "fa-user-shield" },
+  apeKeys: { text: "ape keys", icon: "fa-code" },
+  dangerZone: { text: "danger zone", icon: "fa-exclamation-triangle" },
+};
+
+export const AccountSettingsUrlParamsSchema = z
+  .object({
+    tab: AccountSettingsTabSchema,
+  })
+  .partial();
+export type AccountSettingsUrlParams = z.infer<
+  typeof AccountSettingsUrlParamsSchema
+>;
+
+export const [getCurrentTab, setCurrentTab] =
+  createSignal<AccountSettingsTab>("account");
+
+export const [isApeKeysDenied, setApeKeysDenied] = createSignal<
+  boolean | undefined
+>(undefined);
+
+createEffectOn(isAuthenticated, (hasUser) => {
+  if (!hasUser) {
+    setApeKeysDenied(undefined);
+  }
+});
+
+export function readAccountSettingsGetParameters(
+  params: AccountSettingsUrlParams | undefined,
+): void {
+  if (params === undefined || params.tab === undefined) return;
+
+  setCurrentTab(params.tab);
+}
+
+createEffectOn(getCurrentTab, (tab) => {
+  //make sure we only replace the url if we are on the accountSettings page. If this is missing the url-handler will not work correctly
+  if (getActivePage() !== "accountSettings") return;
+  const data: AccountSettingsUrlParams = { tab };
+
+  const urlParams = serializeUrlSearchParams({
+    schema: AccountSettingsUrlParamsSchema,
+    data,
+  });
+  const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
+  window.history.replaceState({}, "", newUrl);
+});
diff --git a/frontend/src/ts/states/leaderboard-selection.ts b/frontend/src/ts/states/leaderboard-selection.ts
index d4771c26dfe5..81dcf8755bc5 100644
--- a/frontend/src/ts/states/leaderboard-selection.ts
+++ b/frontend/src/ts/states/leaderboard-selection.ts
@@ -67,7 +67,7 @@ export const getSelection = (): Selection => {
 
 export { setSelection };
 
-export function readGetParameters(
+export function readLeaderboardGetParameters(
   params: LeaderboardUrlParams | undefined,
 ): void {
   if (params === undefined || params.type === undefined) return;