diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 000000000000..b12b915d02d6
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,4 @@
+Be extremely concise. Sacrifice grammar for concision.
+Frontend is partially migrated from vanilla JS to SolidJS — new components use `.tsx`, legacy code remains vanilla.
+Run `pnpm run lint` when checking for linting OR typescript errors with oxlint. 
+Single test file: `pnpm vitest run path/to/test.ts`
diff --git a/frontend/__tests__/components/common/Button.spec.tsx b/frontend/__tests__/components/common/Button.spec.tsx
index b753e0cea454..8f55964d5460 100644
--- a/frontend/__tests__/components/common/Button.spec.tsx
+++ b/frontend/__tests__/components/common/Button.spec.tsx
@@ -172,44 +172,6 @@ describe("Button component", () => {
     expect(child).toHaveTextContent("Child");
   });
 
-  it("applies custom class list when classList prop is provided", () => {
-    const { container } = render(() => (
-      <Button
-        onClick={() => {
-          //
-        }}
-        text="Hello"
-        classList={{
-          customTrue: true,
-          customFalse: false,
-          customUndefined: undefined,
-        }}
-      />
-    ));
-
-    const button = container.querySelector("button");
-    expect(button).toHaveClass("customTrue");
-    expect(button).not.toHaveClass("customFalse");
-    expect(button).not.toHaveClass("customUndefined");
-  });
-
-  it("applies active", () => {
-    const { container } = render(() => (
-      <Button
-        onClick={() => {
-          //
-        }}
-        text="Hello"
-        active
-      />
-    ));
-
-    const button = container.querySelector("button");
-    expect(button).toHaveClass("bg-main");
-    expect(button).toHaveClass("text-bg");
-    expect(button).toHaveClass("hover:bg-text");
-  });
-
   it("applies aria-label to button provided as text", () => {
     const { container } = render(() => (
       <Button
diff --git a/frontend/__tests__/root/config.spec.ts b/frontend/__tests__/root/config.spec.ts
index 0259cbb03c64..5589e3dca480 100644
--- a/frontend/__tests__/root/config.spec.ts
+++ b/frontend/__tests__/root/config.spec.ts
@@ -10,7 +10,6 @@ import * as FunboxValidation from "../../src/ts/test/funbox/funbox-validation";
 import * as ConfigValidation from "../../src/ts/config-validation";
 import * as ConfigEvent from "../../src/ts/observables/config-event";
 import * as ApeConfig from "../../src/ts/ape/config";
-import * as AccountButton from "../../src/ts/elements/account-button";
 import * as Notifications from "../../src/ts/elements/notifications";
 const { replaceConfig, getConfig } = Config.__testing;
 
@@ -32,7 +31,6 @@ describe("Config", () => {
     );
     const dispatchConfigEventMock = vi.spyOn(ConfigEvent, "dispatch");
     const dbSaveConfigMock = vi.spyOn(ApeConfig, "saveConfig");
-    const accountButtonLoadingMock = vi.spyOn(AccountButton, "loading");
     const notificationAddMock = vi.spyOn(Notifications, "add");
     const miscReloadAfterMock = vi.spyOn(Misc, "reloadAfter");
     const miscTriggerResizeMock = vi.spyOn(Misc, "triggerResize");
@@ -42,7 +40,6 @@ describe("Config", () => {
       isConfigValueValidMock,
       dispatchConfigEventMock,
       dbSaveConfigMock,
-      accountButtonLoadingMock,
       notificationAddMock,
       miscReloadAfterMock,
       miscTriggerResizeMock,
@@ -182,14 +179,8 @@ describe("Config", () => {
       //wait for debounce
       await vi.advanceTimersByTimeAsync(2500);
 
-      //show loading
-      expect(accountButtonLoadingMock).toHaveBeenNthCalledWith(1, true);
-
       //save
       expect(dbSaveConfigMock).toHaveBeenCalledWith({ numbers: true });
-
-      //hide loading
-      expect(accountButtonLoadingMock).toHaveBeenNthCalledWith(2, false);
     });
 
     it("saves configOverride values to localstorage if nosave=false", async () => {
@@ -224,7 +215,6 @@ describe("Config", () => {
       //wait for debounce
       await vi.advanceTimersByTimeAsync(2500);
 
-      expect(accountButtonLoadingMock).not.toHaveBeenCalled();
       expect(dbSaveConfigMock).not.toHaveBeenCalled();
     });
 
diff --git a/frontend/src/html/head.html b/frontend/src/html/head.html
index 89607f07f79f..11e94da1b107 100644
--- a/frontend/src/html/head.html
+++ b/frontend/src/html/head.html
@@ -39,6 +39,7 @@
       --error-extra-color: #7e2a33;
       --colorful-error-color: #ca4754;
       --colorful-error-extra-color: #7e2a33;
+      --nav-focus-opacity: 0;
     }
   </style>
   <link
diff --git a/frontend/src/html/header.html b/frontend/src/html/header.html
deleted file mode 100644
index f064e13b3922..000000000000
--- a/frontend/src/html/header.html
+++ /dev/null
@@ -1,187 +0,0 @@
-<header>
-  <a id="logo" href="/" router-link>
-    <div class="icon">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        style="isolation: isolate"
-        viewBox="-680 -1030 300 180"
-      >
-        <g>
-          <path
-            d="M -430 -910 L -430 -910 C -424.481 -910 -420 -905.519 -420 -900 L -420 -900 C -420 -894.481 -424.481 -890 -430 -890 L -430 -890 C -435.519 -890 -440 -894.481 -440 -900 L -440 -900 C -440 -905.519 -435.519 -910 -430 -910 Z"
-          />
-          <path
-            d=" M -570 -910 L -510 -910 C -504.481 -910 -500 -905.519 -500 -900 L -500 -900 C -500 -894.481 -504.481 -890 -510 -890 L -570 -890 C -575.519 -890 -580 -894.481 -580 -900 L -580 -900 C -580 -905.519 -575.519 -910 -570 -910 Z "
-          />
-          <path
-            d="M -590 -970 L -590 -970 C -584.481 -970 -580 -965.519 -580 -960 L -580 -940 C -580 -934.481 -584.481 -930 -590 -930 L -590 -930 C -595.519 -930 -600 -934.481 -600 -940 L -600 -960 C -600 -965.519 -595.519 -970 -590 -970 Z"
-          />
-          <path
-            d=" M -639.991 -960.515 C -639.72 -976.836 -626.385 -990 -610 -990 L -610 -990 C -602.32 -990 -595.31 -987.108 -590 -982.355 C -584.69 -987.108 -577.68 -990 -570 -990 L -570 -990 C -553.615 -990 -540.28 -976.836 -540.009 -960.515 C -540.001 -960.345 -540 -960.172 -540 -960 L -540 -960 L -540 -940 C -540 -934.481 -544.481 -930 -550 -930 L -550 -930 C -555.519 -930 -560 -934.481 -560 -940 L -560 -960 L -560 -960 C -560 -965.519 -564.481 -970 -570 -970 C -575.519 -970 -580 -965.519 -580 -960 L -580 -960 L -580 -960 L -580 -940 C -580 -934.481 -584.481 -930 -590 -930 L -590 -930 C -595.519 -930 -600 -934.481 -600 -940 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 C -600 -965.519 -604.481 -970 -610 -970 C -615.519 -970 -620 -965.519 -620 -960 L -620 -960 L -620 -940 C -620 -934.481 -624.481 -930 -630 -930 L -630 -930 C -635.519 -930 -640 -934.481 -640 -940 L -640 -960 L -640 -960 C -640 -960.172 -639.996 -960.344 -639.991 -960.515 Z "
-          />
-          <path
-            d=" M -460 -930 L -460 -900 C -460 -894.481 -464.481 -890 -470 -890 L -470 -890 C -475.519 -890 -480 -894.481 -480 -900 L -480 -930 L -508.82 -930 C -514.99 -930 -520 -934.481 -520 -940 L -520 -940 C -520 -945.519 -514.99 -950 -508.82 -950 L -431.18 -950 C -425.01 -950 -420 -945.519 -420 -940 L -420 -940 C -420 -934.481 -425.01 -930 -431.18 -930 L -460 -930 Z "
-          />
-          <path
-            d="M -470 -990 L -430 -990 C -424.481 -990 -420 -985.519 -420 -980 L -420 -980 C -420 -974.481 -424.481 -970 -430 -970 L -470 -970 C -475.519 -970 -480 -974.481 -480 -980 L -480 -980 C -480 -985.519 -475.519 -990 -470 -990 Z"
-          />
-          <path
-            d=" M -630 -910 L -610 -910 C -604.481 -910 -600 -905.519 -600 -900 L -600 -900 C -600 -894.481 -604.481 -890 -610 -890 L -630 -890 C -635.519 -890 -640 -894.481 -640 -900 L -640 -900 C -640 -905.519 -635.519 -910 -630 -910 Z "
-          />
-          <path
-            d=" M -515 -990 L -510 -990 C -504.481 -990 -500 -985.519 -500 -980 L -500 -980 C -500 -974.481 -504.481 -970 -510 -970 L -515 -970 C -520.519 -970 -525 -974.481 -525 -980 L -525 -980 C -525 -985.519 -520.519 -990 -515 -990 Z "
-          />
-          <path
-            d=" M -660 -910 L -680 -910 L -680 -980 C -680 -1007.596 -657.596 -1030 -630 -1030 L -430 -1030 C -402.404 -1030 -380 -1007.596 -380 -980 L -380 -900 C -380 -872.404 -402.404 -850 -430 -850 L -630 -850 C -657.596 -850 -680 -872.404 -680 -900 L -680 -920 L -660 -920 L -660 -900 C -660 -883.443 -646.557 -870 -630 -870 L -430 -870 C -413.443 -870 -400 -883.443 -400 -900 L -400 -980 C -400 -996.557 -413.443 -1010 -430 -1010 L -630 -1010 C -646.557 -1010 -660 -996.557 -660 -980 L -660 -910 Z "
-          />
-        </g>
-      </svg>
-    </div>
-    <h1 class="text">
-      <div class="top">monkey see</div>
-      monkeytype
-
-      <!-- <div class="bottom">5 year anniversary!</div> -->
-    </h1>
-  </a>
-  <nav>
-    <a
-      id="startTestButton"
-      class="textButton view-start"
-      data-nav-item="test"
-      href="/"
-      onclick="this.blur()"
-      router-link
-      title="start test"
-    >
-      <div class="icon">
-        <i class="fas fa-fw fa-keyboard"></i>
-      </div>
-    </a>
-    <a
-      class="textButton view-leaderboards"
-      data-nav-item="leaderboards"
-      href="/leaderboards"
-      onclick="this.blur()"
-      router-link
-      title="leaderboards"
-    >
-      <div class="icon">
-        <i class="fas fa-fw fa-crown"></i>
-      </div>
-    </a>
-    <a
-      class="textButton view-about"
-      data-nav-item="about"
-      href="/about"
-      onclick="this.blur()"
-      router-link
-      title="about"
-    >
-      <div class="icon">
-        <i class="fas fa-fw fa-info"></i>
-      </div>
-    </a>
-    <a
-      class="textButton view-settings"
-      data-nav-item="settings"
-      href="/settings"
-      onclick="this.blur()"
-      router-link
-      title="settings"
-    >
-      <div class="icon">
-        <i class="fas fa-fw fa-cog"></i>
-      </div>
-    </a>
-    <div class="spacer"></div>
-    <button
-      class="text showAlerts"
-      onclick="this.blur()"
-      data-nav-item="alerts"
-    >
-      <div class="icon">
-        <i class="fas fa-fw fa-bell"></i>
-      </div>
-      <div class="notificationBubble hidden"></div>
-    </button>
-    <a
-      class="textButton view-login"
-      data-nav-item="login"
-      href="/login"
-      onclick="this.blur()"
-      router-link
-    >
-      <i class="far fa-fw fa-user"></i>
-    </a>
-    <div class="accountButtonAndMenu hidden">
-      <a
-        class="textButton view-account"
-        data-nav-item="account"
-        href="/account"
-        onclick="this.blur()"
-        router-link
-      >
-        <div class="spinner">
-          <i class="fas fa-fw fa-spin fa-circle-notch"></i>
-        </div>
-        <div class="avatar"></div>
-        <div class="notificationBubble hidden"></div>
-        <div class="text"></div>
-        <div class="levelAndBar">
-          <div class="level" data-balloon-pos="up">1</div>
-          <div class="xpBar">
-            <div class="bar"></div>
-            <div class="xpBreakdown">
-              <div class="total"></div>
-              <!-- <div class="divider"></div> -->
-              <div class="list"></div>
-            </div>
-          </div>
-        </div>
-      </a>
-      <div class="menu">
-        <div class="spacer"></div>
-        <div class="items">
-          <a href="/account" class="button" onclick="this.blur()" router-link>
-            <i class="fas fa-fw fa-chart-line"></i>
-            User stats
-          </a>
-          <a
-            href="/friends"
-            class="button goToFriends"
-            onclick="this.blur()"
-            router-link
-          >
-            <i class="fas fa-fw fa-user-friends"></i>
-            Friends
-            <span class="notificationBubble hidden">99</span>
-          </a>
-          <a
-            href="/404"
-            class="button goToProfile"
-            onclick="this.blur()"
-            router-link
-          >
-            <i class="fas fa-fw fa-globe-americas"></i>
-            Public profile
-          </a>
-          <a
-            href="/account-settings"
-            class="button"
-            onclick="this.blur()"
-            router-link
-          >
-            <i class="fas fa-fw fa-cog"></i>
-            Account settings
-          </a>
-          <button class="signOut" onclick="this.blur()">
-            <i class="fas fa-fw fa-sign-out-alt"></i>
-            Sign out
-          </button>
-        </div>
-      </div>
-    </div>
-  </nav>
-</header>
diff --git a/frontend/src/index.html b/frontend/src/index.html
index 8073ca189c58..2e4b89c28cd3 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -27,7 +27,7 @@
     </div>
     <!-- <div id="div-gpt-ad-mkt-0" style="height: 100vh"></div> -->
     <div id="app" class="content-grid focus hidden">
-      <load src="html/header.html" />
+      <mount data-component="header"></mount>
       <main class="full-width content-grid" style="height: 100%">
         <div id="ad-vertical-left-wrapper" class="ad advertisement ad-v focus">
           <div class="icon"><i class="fas fa-ad"></i></div>
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index cfb4b0880562..26504cdd4732 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -18,7 +18,7 @@
 @layer custom-styles {
   @import "buttons", "404", "ads", "account", "animations", "caret",
     "commandline", "core", "fonts", "inputs", "keymap", "login", "monkey",
-    "nav", "notifications", "popups", "scroll", "settings", "account-settings",
+    "notifications", "popups", "scroll", "settings", "account-settings",
     "leaderboards", "test", "loading", "friends", "media-queries";
 
   .chartCanvas {
diff --git a/frontend/src/styles/media-queries-blue.scss b/frontend/src/styles/media-queries-blue.scss
index f27fa33e30ad..b3634b288738 100644
--- a/frontend/src/styles/media-queries-blue.scss
+++ b/frontend/src/styles/media-queries-blue.scss
@@ -18,15 +18,6 @@
       }
     }
   }
-  header {
-    nav {
-      .textButton.view-account {
-        .text {
-          display: none;
-        }
-      }
-    }
-  }
   .page404 {
     .content {
       grid-template-columns: 300px;
diff --git a/frontend/src/styles/media-queries-brown.scss b/frontend/src/styles/media-queries-brown.scss
index 0dec474c9c7a..d1127446d29f 100644
--- a/frontend/src/styles/media-queries-brown.scss
+++ b/frontend/src/styles/media-queries-brown.scss
@@ -2,13 +2,6 @@
 @use "./media.scss" as *;
 
 @include media-query(brown) {
-  header {
-    nav {
-      font-size: 0.8rem;
-      line-height: 0.8rem;
-      gap: 0.1rem;
-    }
-  }
   .page404 {
     .content {
       grid-template-columns: 1fr;
diff --git a/frontend/src/styles/media-queries-gray.scss b/frontend/src/styles/media-queries-gray.scss
index 4cdd96e29510..9f311306abaf 100644
--- a/frontend/src/styles/media-queries-gray.scss
+++ b/frontend/src/styles/media-queries-gray.scss
@@ -14,10 +14,4 @@
       display: none;
     }
   }
-  header {
-    gap: 0.25rem;
-    nav .textButton {
-      padding: 0.5em 0.25em;
-    }
-  }
 }
diff --git a/frontend/src/styles/media-queries-green.scss b/frontend/src/styles/media-queries-green.scss
index 68e886cf336e..556c9bacb757 100644
--- a/frontend/src/styles/media-queries-green.scss
+++ b/frontend/src/styles/media-queries-green.scss
@@ -8,21 +8,6 @@
     font-size: 0.7rem;
     --horizontalPadding: 0.6em;
   }
-  header {
-    #logo {
-      .text {
-        font-size: 1.5rem;
-        .top {
-          display: none;
-        }
-      }
-    }
-    nav {
-      .textButton.view-account {
-        gap: 0.5em;
-      }
-    }
-  }
   .pageAccountSettings .main {
     gap: 2rem;
     .right .tab .section {
diff --git a/frontend/src/styles/media-queries-purple.scss b/frontend/src/styles/media-queries-purple.scss
index 3020530eade0..908548af8a6d 100644
--- a/frontend/src/styles/media-queries-purple.scss
+++ b/frontend/src/styles/media-queries-purple.scss
@@ -39,24 +39,6 @@
       }
     }
   }
-  header {
-    nav {
-      font-size: 0.9rem;
-      line-height: 0.9rem;
-      gap: 0.25rem;
-      .view-account {
-        .text {
-          display: none;
-        }
-      }
-    }
-    #logo {
-      grid-template-columns: 1fr;
-      .text {
-        display: none;
-      }
-    }
-  }
   .pageLogin {
     flex-direction: column;
     gap: 4rem;
diff --git a/frontend/src/styles/nav.scss b/frontend/src/styles/nav.scss
deleted file mode 100644
index e3c018f55bfe..000000000000
--- a/frontend/src/styles/nav.scss
+++ /dev/null
@@ -1,458 +0,0 @@
-nav {
-  font-size: 1rem;
-  line-height: 1rem;
-  color: var(--sub-color);
-  display: flex;
-  gap: 0.5rem;
-  width: 100%;
-
-  .spacer {
-    flex-grow: 1;
-  }
-
-  button.showAlerts {
-    position: relative;
-  }
-
-  .textButton {
-    position: relative;
-    .text {
-      font-size: 0.75em;
-      align-self: center;
-      .fas {
-        margin-left: 0.33em;
-      }
-    }
-
-    .icon,
-    .spinner {
-      width: 1.25em;
-      height: 1.25em;
-      display: grid;
-      place-content: center center;
-    }
-    .spinner {
-      opacity: 0;
-      transition: opacity 0.125s;
-    }
-  }
-
-  .accountButtonAndMenu {
-    position: relative;
-    .view-account {
-      position: relative;
-      align-items: center;
-      gap: 0.33em;
-      display: grid;
-      grid-auto-flow: column;
-
-      .notificationBubble {
-        left: 3em;
-        top: 0.5em;
-      }
-
-      .spinner,
-      .avatar {
-        grid-column: 1/2;
-        grid-row: 1/2;
-        place-self: center center;
-      }
-
-      .discordImage {
-        width: 1.25em;
-        height: 1.25em;
-      }
-
-      .levelAndBar {
-        transition: 0.125s;
-      }
-
-      .level {
-        width: max-content;
-        font-size: 0.65em;
-        line-height: 0.65em;
-        align-self: center;
-        color: var(--bg-color);
-        background: var(--sub-color);
-        padding: 0.4em 0.4em;
-        border-radius: calc(var(--roundness) / 2);
-      }
-
-      .xpBar {
-        z-index: 5;
-        opacity: 0;
-        pointer-events: none;
-        position: absolute;
-        height: 0.25em;
-        bottom: -0.5em;
-        width: 100%;
-        min-width: 16ch;
-        right: 0;
-        background: var(--sub-alt-color);
-        border-radius: var(--roundness);
-        grid-template-columns: auto 2.5em;
-        .bar {
-          left: 0;
-          width: 0%;
-          height: 100%;
-          background: var(--main-color);
-          border-radius: var(--roundness);
-        }
-        .xpBreakdown {
-          backdrop-filter: blur(1em);
-          /*background: linear-gradient(
-            90deg,
-            transparent 0%,
-            var(--bg-color) 10%
-          );*/
-          min-width: 100%;
-          width: max-content;
-          position: absolute;
-          color: var(--text-color);
-          display: grid;
-          // gap: 0.5em;
-          //justify-items: center;
-          // width: 32ch;
-          justify-self: end;
-          right: 0;
-          padding: 0.5em;
-          border-radius: var(--roundness);
-
-          .total {
-            text-align: right;
-            font-size: 1em;
-            color: var(--main-color);
-            width: max-content;
-            justify-self: end;
-          }
-          .divider {
-            width: 100%;
-            height: 0.1rem;
-            background: var(--sub-alt-color);
-            border-radius: var(--roundness);
-            opacity: 0.5;
-          }
-          .list {
-            margin-top: 0.5em;
-            .line {
-              font-size: 0.8em;
-              display: grid;
-              grid-template-columns: auto 10ch;
-              gap: 0.5em;
-
-              & div {
-                text-align: right;
-              }
-
-              .positive {
-                color: var(--main-color);
-              }
-              .negative {
-                color: var(--error-color);
-              }
-              .total {
-                font-weight: bold;
-              }
-            }
-          }
-        }
-      }
-      &:hover {
-        .level {
-          background-color: var(--text-color);
-        }
-        .userFlags {
-          color: var(--text-color);
-        }
-      }
-      &:focus-within {
-        z-index: 10;
-      }
-    }
-    .menu {
-      // display: none;
-      pointer-events: none;
-      z-index: 5;
-      opacity: 0;
-      position: absolute;
-      top: 99%;
-      right: 0;
-      font-size: 0.75rem;
-      min-width: 23ch;
-      width: 100%;
-      transition: opacity 0.125s;
-
-      .spacer {
-        width: 100%;
-        height: 0.5em;
-        background: transparent;
-      }
-
-      .items {
-        box-shadow: 0 0 0 0.5em var(--bg-color);
-        background: var(--sub-alt-color);
-        display: grid;
-        border-radius: var(--roundness);
-        gap: 0.25em;
-
-        a,
-        button {
-          justify-items: start;
-          justify-content: left;
-          padding-left: 0;
-          border-radius: 0;
-          gap: 0;
-          i {
-            margin-right: 0.7em;
-            margin-left: 0.9em;
-          }
-          &:last-child {
-            border-radius: 0 0 var(--roundness) var(--roundness);
-          }
-          &:first-child {
-            border-radius: var(--roundness) var(--roundness) 0 0;
-          }
-          &:focus-visible {
-            border-radius: var(--roundness);
-          }
-        }
-
-        & .goToFriends {
-          display: grid;
-          grid-template-columns: auto 1fr auto;
-          text-align: left;
-          .notificationBubble {
-            margin-right: 0.5em;
-            position: unset;
-            box-shadow: 0 0 0 0.5em var(--sub-alt-color);
-            display: block;
-          }
-        }
-      }
-    }
-    &:hover,
-    &:focus-within {
-      & .menu {
-        pointer-events: all;
-        opacity: 1;
-      }
-      // .view-account {
-      // background: var(--sub-alt-color);
-      // }
-    }
-  }
-
-  .separator {
-    width: 2px;
-    height: 1rem;
-    background-color: var(--sub-color);
-  }
-}
-
-header {
-  grid-template-areas: "logo menu";
-  line-height: 2.3rem;
-  font-size: 2.3rem;
-  /* text-align: center; */
-  // transition: 0.25s;
-  // padding: 0 5px;
-  display: grid;
-  grid-auto-flow: column;
-  grid-template-columns: auto 1fr;
-  z-index: 3;
-  align-items: center;
-  gap: 0.5rem;
-  -webkit-user-select: none;
-  user-select: none;
-
-  #logo {
-    // margin-bottom: 0.6rem;
-    cursor: pointer;
-    display: grid;
-    grid-template-columns: auto 1fr;
-    gap: 0.5rem;
-    transition: none;
-    text-decoration: none;
-    color: var(--text-color);
-    padding: 0.35rem 0.25rem;
-    margin-left: -0.25rem;
-    margin-right: -0.25rem;
-
-    .icon {
-      width: 2.5rem;
-      display: grid;
-      align-items: center;
-      background-color: transparent;
-      // margin-bottom: 0.15rem;
-      svg path {
-        transition: 0.25s;
-        fill: var(--main-color);
-      }
-    }
-    .text {
-      .top {
-        position: absolute;
-        left: 0.35em;
-        font-size: 0.325em;
-        line-height: 0.325em;
-        color: var(--sub-color);
-        transition:
-          color 0.125s,
-          opacity 0.125s;
-      }
-      position: relative;
-      font-size: 2rem;
-      line-height: 2rem;
-      font-family: "Lexend Deca", sans-serif;
-      transition: color 0.25s;
-      font-weight: unset;
-      margin-block-start: unset;
-      margin-block-end: unset;
-      margin-top: -0.23em;
-    }
-    white-space: nowrap;
-    -webkit-user-select: none;
-    user-select: none;
-
-    .bottom {
-      // margin-left: -0.15rem;
-      // color: var(--main-color);
-      // transition: 0.25s;
-      // cursor: pointer;
-      font-size: 0.4em;
-      position: absolute;
-      right: -10px;
-      bottom: -20px;
-      color: var(--main-color);
-      transform: rotate(-5deg);
-      animation: pulse 1.5s infinite;
-    }
-
-    @keyframes pulse {
-      0% {
-        transform: rotate(-5deg) scale(1);
-      }
-      50% {
-        transform: rotate(-5deg) scale(1.1);
-      }
-      100% {
-        transform: rotate(-5deg) scale(1);
-      }
-    }
-    &:focus-visible {
-      outline: none;
-      box-shadow:
-        0 0 0 0.1rem var(--bg-color),
-        0 0 0 0.2rem var(--text-color);
-      border-radius: var(--roundness);
-      .text .top {
-        opacity: 0;
-        transition: none;
-      }
-    }
-  }
-
-  .config {
-    grid-area: config;
-    transition: 0.125s;
-    .mobileConfig {
-      display: none;
-      .textButton {
-        margin-right: -1rem;
-        padding: 0.5rem 1rem;
-        font-size: 2rem;
-      }
-    }
-
-    .desktopConfig {
-      justify-self: right;
-      display: grid;
-      // grid-auto-flow: row;
-      grid-template-rows: 0.7rem 0.7rem 0.7rem;
-      grid-gap: 0.2rem;
-      // width: min-content;
-      // width: -moz-min-content;
-      // transition: 0.25s;
-      /*   margin-bottom: 0.1rem; */
-      justify-items: self-end;
-
-      .group {
-        // transition: 0.25s;
-
-        .title {
-          color: var(--sub-color);
-          font-size: 0.5rem;
-          line-height: 0.5rem;
-          margin-bottom: 0.15rem;
-        }
-
-        .buttons {
-          display: flex;
-          .textButton {
-            font-size: 0.7rem;
-            line-height: 0.7rem;
-            padding: 0px 0.15rem;
-          }
-        }
-        &.disabled {
-          pointer-events: none;
-          opacity: 0.25;
-        }
-      }
-
-      .punctuationMode {
-        margin-bottom: -0.1rem;
-      }
-
-      .numbersMode {
-        margin-bottom: -0.1rem;
-      }
-    }
-  }
-  //top focus
-  &.focus {
-    color: var(--sub-color) !important;
-
-    .notificationBubble {
-      opacity: 0;
-    }
-
-    .result {
-      opacity: 0 !important;
-    }
-
-    .icon svg path {
-      fill: var(--sub-color) !important;
-    }
-
-    #logo .text {
-      color: var(--sub-color) !important;
-      // opacity: 0 !important;
-    }
-
-    #logo .top {
-      opacity: 0 !important;
-    }
-
-    #logo .bottom {
-      opacity: 0 !important;
-    }
-
-    .config {
-      opacity: 0 !important;
-    }
-
-    nav {
-      color: transparent;
-
-      .textButton,
-      button {
-        color: transparent !important;
-      }
-      .avatar,
-      .levelAndBar {
-        opacity: 0 !important;
-      }
-    }
-  }
-}
diff --git a/frontend/src/ts/components/common/Bar.tsx b/frontend/src/ts/components/common/Bar.tsx
new file mode 100644
index 000000000000..2e0a0227d802
--- /dev/null
+++ b/frontend/src/ts/components/common/Bar.tsx
@@ -0,0 +1,46 @@
+import { JSXElement } from "solid-js";
+
+import { Anime } from "./anime";
+
+type Props = {
+  percent: number;
+  fill: "main" | "text";
+  bg: "bg" | "sub-alt";
+  showPercentageOnHover?: boolean;
+  animationDuration?: number;
+  animationEase?: string;
+};
+
+const bgClassMap: Record<Props["bg"], string> = {
+  bg: "bg-bg",
+  "sub-alt": "bg-sub-alt",
+};
+
+const fillClassMap: Record<Props["fill"], string> = {
+  main: "bg-main",
+  text: "bg-text",
+};
+
+export function Bar(props: Props): JSXElement {
+  return (
+    <div
+      class={`h-[0.5em] flex-1 rounded ${bgClassMap[props.bg]}`}
+      {...((props.showPercentageOnHover ?? false)
+        ? {
+            "data-balloon-pos": "up",
+            "aria-label": props.percent.toFixed(2) + "%",
+          }
+        : {})}
+    >
+      <Anime
+        animation={{
+          width: props.percent + "%",
+          duration: props.animationDuration ?? 0,
+          ease: props.animationEase ?? "out(2)",
+        }}
+      >
+        <div class={`h-[0.5em] rounded ${fillClassMap[props.fill]}`}></div>
+      </Anime>
+    </div>
+  );
+}
diff --git a/frontend/src/ts/components/common/Button.tsx b/frontend/src/ts/components/common/Button.tsx
index e5b15a9b5b26..1671eee3aeff 100644
--- a/frontend/src/ts/components/common/Button.tsx
+++ b/frontend/src/ts/components/common/Button.tsx
@@ -1,4 +1,4 @@
-import { JSX, JSXElement, Show } from "solid-js";
+import { JSXElement, Show } from "solid-js";
 
 import { cn } from "../../utils/cn";
 import { Conditional } from "./Conditional";
@@ -8,17 +8,19 @@ type BaseProps = {
   text?: string;
   fa?: FaProps;
   class?: string;
-  classList?: JSX.HTMLAttributes<HTMLButtonElement>["classList"];
-  type?: "text" | "button";
+  variant?: "text" | "button";
   children?: JSXElement;
   ariaLabel?:
     | string
     | { text: string; position: "up" | "down" | "left" | "right" };
   "router-link"?: true;
+  onClick?: () => void;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+  dataset?: Record<string, string>;
 };
 
 type ButtonProps = BaseProps & {
-  onClick: () => void;
   href?: never;
   sameTarget?: true;
   active?: boolean;
@@ -27,13 +29,14 @@ type ButtonProps = BaseProps & {
 
 type AnchorProps = BaseProps & {
   href: string;
-  onClick?: never;
+  // onClick?: never;
   disabled?: never;
 };
 
 export function Button(props: ButtonProps | AnchorProps): JSXElement {
-  const isAnchor = "href" in props;
-  const isActive = (): boolean => (!isAnchor && props.active) ?? false;
+  const isAnchor = (): boolean => "href" in props;
+  const isActive = (): boolean =>
+    (!isAnchor() && !("href" in props) && props.active) ?? false;
 
   const content = (
     <>
@@ -58,26 +61,32 @@ export function Button(props: ButtonProps | AnchorProps): JSXElement {
 
   const getClasses = (): string => {
     return cn(
-      "inline-flex h-min cursor-pointer appearance-none items-center justify-center gap-[0.5em] rounded border-0 p-[0.5em] text-center leading-[1.25] text-text transition-colors transition-opacity duration-125 ease-in-out select-none",
+      "inline-flex h-min cursor-pointer appearance-none items-center justify-center gap-[0.5em] rounded border-0 p-[0.5em] text-center leading-[1.25] text-text transition-[color,background,opacity] duration-125 ease-in-out select-none",
       "focus-visible:shadow-[0_0_0_0.1rem_var(--bg-color),_0_0_0_0.2rem_var(--text-color)] focus-visible:outline-none",
+      "bg-(--themable-button-bg) text-(--themable-button-text) hover:bg-(--themable-button-hover-bg) hover:text-(--themable-button-hover-text)",
+      "[--themable-button-active:var(--main-color)]",
+      props.variant === "text" &&
+        "[--themable-button-bg:transparent] [--themable-button-hover-bg:transparent] [--themable-button-hover-text:var(--text-color)] [--themable-button-text:var(--sub-color)]",
+      (props?.variant ?? "button") === "button" &&
+        "[--themable-button-bg:var(--sub-alt-color)] [--themable-button-hover-bg:var(--text-color)] [--themable-button-hover-text:var(--bg-color)] [--themable-button-text:var(--text-color)]",
+      (props?.variant ?? "button") === "button" &&
+        isActive() &&
+        "[--themable-button-bg:var(--main-color)] [--themable-button-hover-bg:var(--text-color)] [--themable-button-hover-text:var(--bg-color)] [--themable-button-text:var(--bg-color)]",
+      (props?.variant ?? "button") === "button" &&
+        isActive() &&
+        "[--themable-button-bg:var(--themable-button-active)] [--themable-button-hover-bg:var(--text-color)] [--themable-button-hover-text:var(--bg-color)] [--themable-button-text:var(--bg-color)]",
       {
-        "bg-sub-alt hover:bg-text hover:text-bg": props.type !== "text",
-        "bg-transparent text-sub hover:text-text": props.type === "text",
-        [props.class ?? ""]: props.class !== undefined,
-        "bg-main text-bg hover:bg-text": isActive(),
-
-        ...props.classList,
+        "pointer-events-none opacity-[0.33]": props.disabled,
       },
       {
-        "opacity-[0.33]": props.disabled,
-        "bg-text text-bg": isActive() && props.disabled,
+        [props.class ?? ""]: props.class !== undefined,
       },
     );
   };
 
   return (
     <Conditional
-      if={isAnchor}
+      if={isAnchor()}
       then={
         <a
           class={getClasses()}
@@ -94,6 +103,11 @@ export function Button(props: ButtonProps | AnchorProps): JSXElement {
           }
           {...ariaLabel()}
           {...(props["router-link"] ? { "router-link": "" } : {})}
+          onClick={() => props.onClick?.()}
+          onMouseEnter={() => props.onMouseEnter?.()}
+          onMouseLeave={() => props.onMouseLeave?.()}
+          data-ui-variant={props.variant ?? "button"}
+          {...props.dataset}
         >
           {content}
         </a>
@@ -103,9 +117,13 @@ export function Button(props: ButtonProps | AnchorProps): JSXElement {
           type="button"
           class={getClasses()}
           onClick={() => props.onClick?.()}
+          onMouseEnter={() => props.onMouseEnter?.()}
+          onMouseLeave={() => props.onMouseLeave?.()}
           {...ariaLabel()}
           {...(props["router-link"] ? { "router-link": "" } : {})}
           disabled={props.disabled ?? false}
+          data-ui-variant={props.variant ?? "button"}
+          {...props.dataset}
         >
           {content}
         </button>
diff --git a/frontend/src/ts/components/common/DiscordAvatar.tsx b/frontend/src/ts/components/common/DiscordAvatar.tsx
index 3edd40c926a6..7752b6417476 100644
--- a/frontend/src/ts/components/common/DiscordAvatar.tsx
+++ b/frontend/src/ts/components/common/DiscordAvatar.tsx
@@ -13,6 +13,7 @@ export function DiscordAvatar(props: {
   discordAvatar: string | undefined;
   size?: number;
   class?: string;
+  fallbackIcon?: "user-circle" | "user";
 }): JSXElement {
   const cacheKey = (): string => `${props.discordId}/${props.discordAvatar}`;
   const [showSpinner, setShowSpinner] = createSignal(true);
@@ -22,6 +23,35 @@ export function DiscordAvatar(props: {
     props.discordAvatar !== undefined &&
     avatar[cacheKey()] !== false;
 
+  const fallback = () => {
+    if (
+      props.fallbackIcon === "user-circle" ||
+      props.fallbackIcon === undefined
+    ) {
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 496 512"
+          class="fill-current transition-colors duration-125"
+        >
+          {/* <!--!Font Awesome Free v5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--> */}
+          <path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 96c48.6 0 88 39.4 88 88s-39.4 88-88 88-88-39.4-88-88 39.4-88 88-88zm0 344c-58.7 0-111.3-26.6-146.5-68.2 18.8-35.4 55.6-59.8 98.5-59.8 2.4 0 4.8.4 7.1 1.1 13 4.2 26.6 6.9 40.9 6.9 14.3 0 28-2.7 40.9-6.9 2.3-.7 4.7-1.1 7.1-1.1 42.9 0 79.7 24.4 98.5 59.8C359.3 421.4 306.7 448 248 448z"></path>
+        </svg>
+      );
+    } else {
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 448 512"
+          class="fill-current p-[0.2em] transition-colors duration-125"
+        >
+          {/* <!--!Font Awesome Free v5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--> */}
+          <path d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"></path>
+        </svg>
+      );
+    }
+  };
+
   return (
     <div
       class={cn("grid h-[1.25em] w-[1.25em] place-items-center", props.class)}
@@ -33,7 +63,7 @@ export function DiscordAvatar(props: {
             <Show when={showSpinner()}>
               <LoadingCircle
                 mode="svg"
-                class="col-start-1 row-start-1 h-full w-full fill-sub"
+                class="col-start-1 row-start-1 h-full w-full fill-current"
               />
             </Show>
             <img
@@ -50,16 +80,7 @@ export function DiscordAvatar(props: {
             />
           </>
         }
-        else={
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 496 512"
-            class="fill-sub"
-          >
-            {/* <!--!Font Awesome Free v5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--> */}
-            <path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 96c48.6 0 88 39.4 88 88s-39.4 88-88 88-88-39.4-88-88 39.4-88 88-88zm0 344c-58.7 0-111.3-26.6-146.5-68.2 18.8-35.4 55.6-59.8 98.5-59.8 2.4 0 4.8.4 7.1 1.1 13 4.2 26.6 6.9 40.9 6.9 14.3 0 28-2.7 40.9-6.9 2.3-.7 4.7-1.1 7.1-1.1 42.9 0 79.7 24.4 98.5 59.8C359.3 421.4 306.7 448 248 448z"></path>
-          </svg>
-        }
+        else={fallback()}
       />
     </div>
   );
diff --git a/frontend/src/ts/components/common/NotificationBubble.tsx b/frontend/src/ts/components/common/NotificationBubble.tsx
new file mode 100644
index 000000000000..77a6e4df09e2
--- /dev/null
+++ b/frontend/src/ts/components/common/NotificationBubble.tsx
@@ -0,0 +1,28 @@
+import { JSXElement, Show } from "solid-js";
+
+import { cn } from "../../utils/cn";
+
+type Props = {
+  variant: "fromCorner" | "atCorner" | "center";
+  show: boolean;
+  class?: string;
+};
+
+export function NotificationBubble(props: Props): JSXElement {
+  return (
+    <Show when={props.show}>
+      <div
+        class={cn(
+          "absolute h-[0.5em] w-[0.5em] rounded-full bg-main ring-[0.25em] ring-bg",
+          props.variant === "fromCorner" && "top-0 right-0 m-[0.375em]",
+          props.variant === "atCorner" &&
+            "top-0 right-0 translate-x-1/2 -translate-y-1/2",
+          props.variant === "center" &&
+            "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+          props.class,
+        )}
+        data-ui-element="notificationBubble"
+      ></div>
+    </Show>
+  );
+}
diff --git a/frontend/src/ts/components/common/User.tsx b/frontend/src/ts/components/common/User.tsx
index 3b8598b05a62..83b6716cbe25 100644
--- a/frontend/src/ts/components/common/User.tsx
+++ b/frontend/src/ts/components/common/User.tsx
@@ -1,39 +1,114 @@
 import { User as UserType } from "@monkeytype/schemas/users";
-import { JSXElement, Show } from "solid-js";
+import { AnimationParams } from "animejs";
+import { createEffect, createSignal, JSXElement, on, Show } from "solid-js";
 
 import {
   SupportsFlags,
   UserFlagOptions,
 } from "../../controllers/user-flag-controller";
+import { cn } from "../../utils/cn";
+import { Anime, AnimeConditional } from "./anime";
 import { Button } from "./Button";
+import { Conditional } from "./Conditional";
 import { DiscordAvatar } from "./DiscordAvatar";
+import { Fa } from "./Fa";
+import { NotificationBubble } from "./NotificationBubble";
 import { UserBadge } from "./UserBadge";
 import { UserFlags } from "./UserFlags";
 
-export function User(
-  props: {
-    user: SupportsFlags &
-      Pick<UserType, "uid" | "name" | "discordId" | "discordAvatar"> & {
-        badgeId?: number;
-      };
-    showAvatar?: boolean;
-  } & UserFlagOptions,
-): JSXElement {
+type Props = {
+  class?: string;
+  user: SupportsFlags &
+    Pick<UserType, "uid" | "name" | "discordId" | "discordAvatar" | "xp"> & {
+      badgeId?: number;
+    };
+  showAvatar?: boolean;
+  hideNameOnSmallScreens?: boolean;
+  linkToProfile?: boolean;
+  level?: number;
+  showSpinner?: boolean;
+  showNotificationBubble?: boolean;
+} & UserFlagOptions;
+
+export function User(props: Props): JSXElement {
+  const [flashAnimation, setFlashAnimation] = createSignal<
+    AnimationParams | undefined
+  >(undefined);
+  const [isAnimating, setIsAnimating] = createSignal(false);
+  let levelEl: HTMLElement | undefined;
+
+  createEffect(
+    on(
+      () => props.level,
+      () => {
+        const rand = (Math.random() * 2 - 1) / 4;
+        const rand2 = (Math.random() + 1) / 2;
+        setFlashAnimation({
+          scale: [1 + 0.5 * rand2, 1],
+          backgroundColor: [
+            "var(--themable-button-active)",
+            "var(--themable-button-text)",
+          ],
+          rotate: [10 * rand, 0],
+          duration: 2000,
+          ease: "out(5)",
+          onBegin: () => setIsAnimating(true),
+          onComplete: () => {
+            setIsAnimating(false);
+            if (levelEl) {
+              levelEl.style.backgroundColor = "";
+            }
+          },
+        });
+      },
+      { defer: true },
+    ),
+  );
+
   return (
-    <div class="inline-flex items-center text-sm leading-none">
+    <div class={cn("grid grid-flow-col place-items-center gap-2", props.class)}>
       <Show when={props.showAvatar ?? true}>
-        <DiscordAvatar
-          discordId={props.user.discordId}
-          discordAvatar={props.user.discordAvatar}
-        />
+        <div class="relative w-[1.25em]" data-ui-element="navAvatar">
+          <NotificationBubble
+            variant="atCorner"
+            show={props.showNotificationBubble ?? false}
+            class="m-0.5"
+          />
+          <AnimeConditional
+            exitBeforeEnter
+            if={props.showSpinner ?? false}
+            then={<Fa icon={"fa-circle-notch"} spin={true} />}
+            else={
+              <DiscordAvatar
+                size={64}
+                discordId={props.user.discordId}
+                discordAvatar={props.user.discordAvatar}
+                fallbackIcon="user"
+              />
+            }
+          />
+        </div>
       </Show>
-      <Button
-        type="text"
-        href={`/profile/${props.user.name}`}
-        text={props.user.name}
-        router-link
-      />
-      <div class="flex items-center justify-center gap-2 text-sub">
+      <div
+        class={cn("text-xs", {
+          "hidden sm:block": props.hideNameOnSmallScreens,
+        })}
+      >
+        <Conditional
+          if={props.linkToProfile ?? false}
+          then={
+            <Button
+              variant="text"
+              href={`/profile/${props.user.name}`}
+              text={props.user.name}
+              router-link
+            />
+          }
+          else={props.user.name}
+        />
+      </div>
+
+      <div class="flex items-center justify-center gap-2">
         <UserFlags
           {...props.user}
           isFriend={props.isFriend}
@@ -41,6 +116,20 @@ export function User(
         />
         <UserBadge id={props.user.badgeId} />
       </div>
+      <Show when={props.level !== undefined}>
+        <Anime
+          ref={(el) => (levelEl = el)}
+          animation={flashAnimation()}
+          class={cn(
+            "bg-(--themable-button-text) text-(--bg-color)",
+            "rounded-half px-[0.5em] py-[0.1em] text-[0.7em]",
+            { "transition-colors duration-125": !isAnimating() },
+          )}
+          data-ui-element="userLevel"
+        >
+          {props.level}
+        </Anime>
+      </Show>
     </div>
   );
 }
diff --git a/frontend/src/ts/components/common/UserFlags.tsx b/frontend/src/ts/components/common/UserFlags.tsx
index ae27505900f7..a5f5d90e38ae 100644
--- a/frontend/src/ts/components/common/UserFlags.tsx
+++ b/frontend/src/ts/components/common/UserFlags.tsx
@@ -7,16 +7,25 @@ import {
   UserFlagOptions,
 } from "../../controllers/user-flag-controller";
 import { Fa } from "./Fa";
-export function UserFlags(props: SupportsFlags & UserFlagOptions): JSXElement {
+export function UserFlags(
+  props: SupportsFlags &
+    UserFlagOptions & {
+      class?: string;
+    },
+): JSXElement {
   const flags = (): UserFlag[] => getMatchingFlags(props);
 
   return (
     <For each={flags()}>
       {(flag) => (
-        <Show when={!props.iconsOnly} fallback={<Fa icon={flag.icon} />}>
+        <Show
+          when={!props.iconsOnly}
+          fallback={<Fa icon={flag.icon} class={props.class} />}
+        >
           <div
             aria-label={flag.description}
             data-balloon-pos="right"
+            class={props.class}
             style={{
               background: flag.background ?? "inherit",
               color: flag.color ?? "inherit",
diff --git a/frontend/src/ts/components/layout/footer/Footer.tsx b/frontend/src/ts/components/layout/footer/Footer.tsx
index 2609656e015b..77c4e79a2edc 100644
--- a/frontend/src/ts/components/layout/footer/Footer.tsx
+++ b/frontend/src/ts/components/layout/footer/Footer.tsx
@@ -25,7 +25,7 @@ export function Footer(): JSXElement {
       >
         <div class="grid grid-cols-1 justify-items-start xs:grid-cols-2 sm:grid-cols-4 lg:flex">
           <Button
-            type="text"
+            variant="text"
             text="contact"
             fa={{
               icon: "fa-envelope",
@@ -34,7 +34,7 @@ export function Footer(): JSXElement {
             onClick={() => showModal("Contact")}
           />
           <Button
-            type="text"
+            variant="text"
             text="support"
             fa={{
               icon: "fa-donate",
@@ -43,7 +43,7 @@ export function Footer(): JSXElement {
             onClick={() => showModal("Support")}
           />
           <Button
-            type="text"
+            variant="text"
             text="github"
             fa={{
               icon: "fa-code",
@@ -52,7 +52,7 @@ export function Footer(): JSXElement {
             href="https://github.com/monkeytypegame/monkeytype"
           />
           <Button
-            type="text"
+            variant="text"
             text="discord"
             fa={{
               icon: "fa-discord",
@@ -62,7 +62,7 @@ export function Footer(): JSXElement {
             href="https://www.discord.gg/monkeytype"
           />
           <Button
-            type="text"
+            variant="text"
             text="twitter"
             fa={{
               icon: "fa-twitter",
@@ -72,7 +72,7 @@ export function Footer(): JSXElement {
             href="https://x.com/monkeytype"
           />
           <Button
-            type="text"
+            variant="text"
             text="terms"
             fa={{
               icon: "fa-file-contract",
@@ -82,7 +82,7 @@ export function Footer(): JSXElement {
           />
           <Button
             href="/security-policy.html"
-            type="text"
+            variant="text"
             text="security"
             fa={{
               icon: "fa-shield-alt",
@@ -91,7 +91,7 @@ export function Footer(): JSXElement {
           />
           <Button
             href="/privacy-policy.html"
-            type="text"
+            variant="text"
             text="privacy"
             fa={{
               icon: "fa-lock",
diff --git a/frontend/src/ts/components/layout/header/AccountMenu.tsx b/frontend/src/ts/components/layout/header/AccountMenu.tsx
new file mode 100644
index 000000000000..f04098b99a9f
--- /dev/null
+++ b/frontend/src/ts/components/layout/header/AccountMenu.tsx
@@ -0,0 +1,89 @@
+import { JSXElement, Show } from "solid-js";
+
+import { get as getServerConfiguration } from "../../../ape/server-configuration";
+import { signOut } from "../../../auth";
+import { getSnapshot } from "../../../stores/snapshot";
+import { Button } from "../../common/Button";
+import { NotificationBubble } from "../../common/NotificationBubble";
+
+type Props = {
+  showFriendsNotificationBubble?: boolean;
+};
+
+export function AccountMenu(props: Props): JSXElement {
+  const buttonClass =
+    "w-full justify-start px-3 py-2 whitespace-nowrap gap-2 bg-transparent";
+
+  return (
+    <div
+      class="pointer-events-none absolute right-0 z-1000 w-auto text-xs opacity-0 transition-opacity duration-125 [&_a]:pointer-events-auto [&_button]:pointer-events-auto"
+      data-ui-element="accountMenu"
+    >
+      <div class="h-3"></div>
+      <div
+        class="grid grid-flow-row rounded bg-sub-alt ring-6 ring-bg"
+        data-ui-element="accountMenu"
+      >
+        <Button
+          text="User stats"
+          class={buttonClass}
+          fa={{
+            icon: "fa-chart-line",
+            fixedWidth: true,
+          }}
+          href="/account"
+          router-link
+        />
+        <Show when={getServerConfiguration()?.connections.enabled}>
+          <Button
+            text="Friends"
+            class={buttonClass + " relative"}
+            fa={{
+              icon: "fa-user-friends",
+              fixedWidth: true,
+            }}
+            href="/friends"
+            router-link
+          >
+            <NotificationBubble
+              show={props.showFriendsNotificationBubble ?? false}
+              variant="center"
+              class="right-2 left-auto"
+            />
+          </Button>
+        </Show>
+        <Button
+          text="Public profile"
+          class={buttonClass}
+          fa={{
+            icon: "fa-globe-americas",
+            fixedWidth: true,
+          }}
+          href={"/profile/" + (getSnapshot()?.name ?? "")}
+          router-link
+        />
+        <Button
+          text="Account settings"
+          class={buttonClass}
+          fa={{
+            icon: "fa-cog",
+            fixedWidth: true,
+          }}
+          href="/account-settings"
+          router-link
+        />
+        <Button
+          text="Sign out"
+          class={buttonClass}
+          fa={{
+            icon: "fa-sign-out-alt",
+            fixedWidth: true,
+          }}
+          onClick={() => {
+            signOut();
+          }}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/ts/components/layout/header/AccountXpBar.tsx b/frontend/src/ts/components/layout/header/AccountXpBar.tsx
new file mode 100644
index 000000000000..c957dd94b818
--- /dev/null
+++ b/frontend/src/ts/components/layout/header/AccountXpBar.tsx
@@ -0,0 +1,379 @@
+import { XpBreakdown } from "@monkeytype/schemas/results";
+import { isSafeNumber } from "@monkeytype/util/numbers";
+import {
+  createMemo,
+  createSignal,
+  For,
+  JSXElement,
+  onCleanup,
+  ParentProps,
+} from "solid-js";
+
+import { createEvent } from "../../../hooks/createEvent";
+import { createSignalWithSetters } from "../../../hooks/createSignalWithSetters";
+import { createEffectOn } from "../../../hooks/effects";
+import {
+  getSkipBreakdownEvent,
+  getXpBarData,
+  setAnimatedLevel,
+} from "../../../signals/header";
+import { getXpDetails } from "../../../utils/levels";
+import { sleep } from "../../../utils/misc";
+import { Anime, AnimePresence, AnimeShow } from "../../common/anime";
+import { Bar } from "../../common/Bar";
+
+type BreakdownItem = {
+  label: string;
+  amount: number | string;
+};
+
+export function AccountXpBar(): JSXElement {
+  const [getShowBar, setShowBar] = createSignal(false);
+  const [getShowBreakdown, setShowBreakdown] = createSignal(false);
+  const [getBreakdownItems, setBreakdownItems] = createSignal<BreakdownItem[]>(
+    [],
+  );
+  const [getBarPercent, setBarPercent] = createSignal(0);
+  const [getBarAnimationDuration, setBarAnimationDuration] = createSignal(0);
+  const [getBarAnimationEase, setBarAnimationEase] = createSignal("out(5)");
+
+  const [getAnimationEvent, fireAnimationEvent] = createEvent();
+  const [getTotal, { setTotal }] = createSignalWithSetters(0)({
+    setTotal: (set, value: number) => {
+      set(value);
+      fireAnimationEvent();
+    },
+  });
+
+  onCleanup(() => {
+    runId++;
+  });
+
+  let canSkip = true;
+  let skipped = false;
+  let runId = 0;
+
+  const flashAnimation = createMemo(() => {
+    getAnimationEvent(); // trigger on every total update, even if value unchanged
+    const rand = (Math.random() * 2 - 1) / 4;
+    const rand2 = (Math.random() + 1) / 2;
+    return {
+      scale: [1 + 0.5 * rand2, 1],
+      rotate: [10 * rand, 0],
+      duration: 2000,
+      ease: "out(5)",
+    };
+  });
+
+  const addItem = (label: string, amount: number | string): void => {
+    setBreakdownItems((items) => [...items, { label, amount }]);
+  };
+
+  createEffectOn(getSkipBreakdownEvent, async () => {
+    if (skipped || !canSkip) return;
+
+    const myId = runId; // capture before first await
+    const data = getXpBarData();
+    if (!data) return;
+
+    const breakdown = data.breakdown;
+    if (!getShowBreakdown() || !breakdown) return;
+
+    skipped = true;
+    setShowBreakdown(false);
+    setBreakdownItems([]);
+    setTotal(data.addedXp);
+    await sleep(3000);
+    if (runId !== myId) return;
+    setShowBar(false);
+  });
+
+  createEffectOn(getXpBarData, async (data) => {
+    const myId = ++runId;
+    const isStale = (): boolean => runId !== myId;
+    if (data !== null) {
+      skipped = false;
+      canSkip = true;
+      const breakdown = data.breakdown;
+      const promises = [];
+      if (breakdown) {
+        promises.push(runBreakdown(breakdown, isStale));
+        setShowBreakdown(true);
+      } else {
+        setShowBreakdown(false);
+        setBreakdownItems([]);
+        setTotal(data.addedXp);
+      }
+      setShowBar(true);
+      await sleep(125);
+      if (isStale()) return;
+
+      promises.push(
+        fullBarAnimation(
+          data.resultingXp - data.addedXp,
+          data.resultingXp,
+          isStale,
+        ),
+      );
+      if (skipped) return;
+      await Promise.all(promises);
+      canSkip = false;
+      await sleep(4000);
+      if (isStale() || skipped) return;
+      setShowBreakdown(false);
+      await sleep(1000);
+      if (isStale() || skipped) return;
+      setShowBar(false);
+    }
+  });
+
+  const runBreakdown = async (
+    breakdown: XpBreakdown,
+    isStale: () => boolean,
+  ): Promise<void> => {
+    const delay = 500;
+    setBreakdownItems([]);
+    let total = breakdown.base ?? 0;
+    setTotal(total);
+
+    addItem("time typing", breakdown.base ?? 0);
+
+    if (isSafeNumber(breakdown.fullAccuracy)) {
+      await sleep(delay);
+      if (isStale() || skipped) return;
+      total += breakdown.fullAccuracy;
+      setTotal(total);
+      addItem("perfect", breakdown.fullAccuracy);
+    } else if (isSafeNumber(breakdown.corrected)) {
+      await sleep(delay);
+      if (isStale() || skipped) return;
+      total += breakdown.corrected;
+      setTotal(total);
+      addItem("clean", breakdown.corrected);
+    }
+
+    if (isSafeNumber(breakdown.quote)) {
+      await sleep(delay);
+      if (isStale() || skipped) return;
+      total += breakdown.quote;
+      setTotal(total);
+      addItem("quote", breakdown.quote);
+    } else {
+      if (isSafeNumber(breakdown.punctuation)) {
+        await sleep(delay);
+        if (isStale() || skipped) return;
+        total += breakdown.punctuation;
+        setTotal(total);
+        addItem("punctuation", breakdown.punctuation);
+      }
+      if (isSafeNumber(breakdown.numbers)) {
+        await sleep(delay);
+        if (isStale() || skipped) return;
+        total += breakdown.numbers;
+        setTotal(total);
+        addItem("numbers", breakdown.numbers);
+      }
+    }
+
+    if (isSafeNumber(breakdown.funbox)) {
+      await sleep(delay);
+      if (isStale() || skipped) return;
+      total += breakdown.funbox;
+      setTotal(total);
+      addItem("funbox", breakdown.funbox);
+    }
+
+    if (isSafeNumber(breakdown.streak)) {
+      await sleep(delay);
+      if (isStale() || skipped) return;
+      total += breakdown.streak;
+      setTotal(total);
+      addItem("streak", breakdown.streak);
+    }
+
+    if (isSafeNumber(breakdown.accPenalty) && breakdown.accPenalty > 0) {
+      await sleep(delay);
+      if (isStale() || skipped) return;
+      total -= breakdown.accPenalty;
+      setTotal(total);
+      addItem("accuracy penalty", -breakdown.accPenalty);
+    }
+
+    if (isSafeNumber(breakdown.incomplete) && breakdown.incomplete > 0) {
+      await sleep(delay);
+      if (isStale() || skipped) return;
+      total += breakdown.incomplete;
+      setTotal(total);
+      addItem("incomplete tests", breakdown.incomplete);
+    }
+
+    if (isSafeNumber(breakdown.configMultiplier)) {
+      await sleep(delay);
+      if (isStale() || skipped) return;
+      total *= breakdown.configMultiplier;
+      setTotal(total);
+      addItem("global multiplier", `x${breakdown.configMultiplier}`);
+    }
+
+    if (isSafeNumber(breakdown.daily)) {
+      await sleep(delay);
+      if (isStale() || skipped) return;
+      total += breakdown.daily;
+      setTotal(total);
+      addItem("daily bonus", breakdown.daily);
+    }
+  };
+
+  const animateBar = async (
+    percent: number,
+    duration: number,
+    isStale: () => boolean,
+  ): Promise<void> => {
+    if (isStale()) return;
+    setBarAnimationDuration(duration);
+    setBarPercent(percent);
+    await sleep(duration);
+    if (!isStale()) setBarAnimationDuration(0);
+  };
+
+  const fullBarAnimation = async (
+    fromXp: number,
+    toXp: number,
+    isStale: () => boolean,
+  ): Promise<void> => {
+    const prevDetails = getXpDetails(fromXp);
+    const newDetails = getXpDetails(toXp);
+
+    const startingLevel = prevDetails.levelFloat;
+    const endingLevel = newDetails.levelFloat;
+
+    const difference = newDetails.levelFloat - prevDetails.levelFloat;
+
+    await animateBar(prevDetails.levelProgressPercent, 0, isStale);
+    if (isStale()) return;
+
+    if (endingLevel % 1 === 0) {
+      // Exact level up, animate to 100% then reset to 0% for next level
+      setBarAnimationEase("out(5)");
+      await animateBar(100, 1000, isStale);
+      if (isStale()) return;
+      setAnimatedLevel(Math.floor(endingLevel));
+      await animateBar(0, 0, isStale);
+    } else if (Math.floor(startingLevel) === Math.floor(endingLevel)) {
+      // Same level, just animate to the new percentage
+      setBarAnimationEase("out(5)");
+      await animateBar(newDetails.levelProgressPercent, 1000, isStale);
+    } else {
+      // Multiple levels gained, animate to 100% for each intermediate level
+      const quickSpeed = Math.min(1000 / difference, 200);
+      let toAnimate = difference;
+
+      let firstOneDone = false;
+      let animationDuration = quickSpeed;
+      let decrement = 1 - (startingLevel % 1);
+      let currentLevel = Math.floor(startingLevel);
+
+      setBarAnimationEase("linear");
+
+      do {
+        if (isStale()) return;
+
+        if (firstOneDone) {
+          await animateBar(0, 0, isStale);
+          decrement = 1;
+        }
+
+        await animateBar(100, animationDuration, isStale);
+        currentLevel += 1;
+        setAnimatedLevel(currentLevel);
+
+        toAnimate -= decrement;
+        firstOneDone = true;
+      } while (toAnimate > 1);
+
+      if (isStale()) return;
+
+      await animateBar(0, 0, isStale);
+
+      if (isStale()) return;
+
+      setBarAnimationEase("out(5)");
+      await animateBar(newDetails.levelProgressPercent, 1000, isStale);
+    }
+  };
+
+  const XPBar = () => (
+    <AnimeShow when={getShowBar()}>
+      <div class="absolute top-full right-0 mt-1 w-full">
+        <div class="text-[0.5em]">
+          <Bar
+            fill="main"
+            bg="sub-alt"
+            percent={getBarPercent()}
+            animationDuration={getBarAnimationDuration()}
+            animationEase={getBarAnimationEase()}
+          />
+        </div>
+      </div>
+    </AnimeShow>
+  );
+
+  const Total = () => (
+    <AnimeShow when={getShowBar()}>
+      <Anime
+        animation={flashAnimation()}
+        class="w-max justify-self-end p-2 text-base font-bold text-main"
+      >
+        +{getTotal()}
+      </Anime>
+    </AnimeShow>
+  );
+
+  const Breakdown = () => (
+    <AnimeShow when={getShowBreakdown()} class="mb-2">
+      <AnimePresence mode="list">
+        <For each={getBreakdownItems()} fallback={null}>
+          {(item) => (
+            <Anime
+              initial={{ opacity: 0, marginRight: 10 }}
+              animate={{ opacity: 1, marginRight: 0, duration: 125 }}
+              exit={{ opacity: 0, marginRight: 10, duration: 125 }}
+              class="flex justify-end gap-4 px-2 text-xs"
+            >
+              <span class="w-max text-text">{item.label}</span>
+              <span
+                class={
+                  typeof item.amount === "number" && item.amount < 0
+                    ? "text-error"
+                    : "text-main"
+                }
+              >
+                {typeof item.amount === "string"
+                  ? item.amount
+                  : item.amount >= 0
+                    ? `+${item.amount}`
+                    : `${item.amount}`}
+              </span>
+            </Anime>
+          )}
+        </For>
+      </AnimePresence>
+    </AnimeShow>
+  );
+
+  const BlurredBackground = (props: ParentProps) => (
+    <div class="absolute top-full right-0 mt-2 grid min-w-full justify-end rounded-b text-right text-sm backdrop-blur-sm">
+      {props.children}
+    </div>
+  );
+
+  return (
+    <>
+      <XPBar />
+      <BlurredBackground>
+        <Total />
+        <Breakdown />
+      </BlurredBackground>
+    </>
+  );
+}
diff --git a/frontend/src/ts/components/layout/header/Header.tsx b/frontend/src/ts/components/layout/header/Header.tsx
new file mode 100644
index 000000000000..e6bb7b812404
--- /dev/null
+++ b/frontend/src/ts/components/layout/header/Header.tsx
@@ -0,0 +1,21 @@
+import { JSXElement } from "solid-js";
+
+import { getFocus, getIsScreenshotting } from "../../../signals/core";
+import { cn } from "../../../utils/cn";
+import { Logo } from "./Logo";
+import { Nav } from "./Nav";
+
+export function Header(): JSXElement {
+  return (
+    <header
+      class={cn("flex place-items-center gap-2", {
+        "opacity-0": getIsScreenshotting(),
+      })}
+      data-ui-element="header"
+      data-focused={getFocus() ? "" : undefined}
+    >
+      <Logo />
+      <Nav />
+    </header>
+  );
+}
diff --git a/frontend/src/ts/components/layout/header/Logo.tsx b/frontend/src/ts/components/layout/header/Logo.tsx
new file mode 100644
index 000000000000..f8a7c106443b
--- /dev/null
+++ b/frontend/src/ts/components/layout/header/Logo.tsx
@@ -0,0 +1,66 @@
+import { JSXElement } from "solid-js";
+
+import { getActivePage, getFocus } from "../../../signals/core";
+import { restart } from "../../../test/test-logic";
+import { cn } from "../../../utils/cn";
+import { isDevEnvironment } from "../../../utils/misc";
+
+export function Logo(): JSXElement {
+  return (
+    <a
+      href={`${location.origin}/`}
+      class="-m-2 flex h-6 w-max gap-2 rounded-[0.8rem] p-2 focus-visible:**:data-[ui-element='logoSubtext']:text-transparent"
+      aria-label="Monkeytype Home"
+      router-link
+      style={{
+        "box-sizing": "content-box",
+        "font-family": "Lexend Deca ,sans-serif",
+      }}
+      data-ui-element="logo"
+      onClick={() => {
+        if (getActivePage() === "test") restart();
+      }}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="-680 -1030 300 180"
+        class={cn("fill-[currentColor] text-main transition-colors", {
+          "text-sub": getFocus(),
+        })}
+      >
+        <g>
+          <path d="M -430 -910 L -430 -910 C -424.481 -910 -420 -905.519 -420 -900 L -420 -900 C -420 -894.481 -424.481 -890 -430 -890 L -430 -890 C -435.519 -890 -440 -894.481 -440 -900 L -440 -900 C -440 -905.519 -435.519 -910 -430 -910 Z"></path>
+          <path d=" M -570 -910 L -510 -910 C -504.481 -910 -500 -905.519 -500 -900 L -500 -900 C -500 -894.481 -504.481 -890 -510 -890 L -570 -890 C -575.519 -890 -580 -894.481 -580 -900 L -580 -900 C -580 -905.519 -575.519 -910 -570 -910 Z "></path>
+          <path d="M -590 -970 L -590 -970 C -584.481 -970 -580 -965.519 -580 -960 L -580 -940 C -580 -934.481 -584.481 -930 -590 -930 L -590 -930 C -595.519 -930 -600 -934.481 -600 -940 L -600 -960 C -600 -965.519 -595.519 -970 -590 -970 Z"></path>
+          <path d=" M -639.991 -960.515 C -639.72 -976.836 -626.385 -990 -610 -990 L -610 -990 C -602.32 -990 -595.31 -987.108 -590 -982.355 C -584.69 -987.108 -577.68 -990 -570 -990 L -570 -990 C -553.615 -990 -540.28 -976.836 -540.009 -960.515 C -540.001 -960.345 -540 -960.172 -540 -960 L -540 -960 L -540 -940 C -540 -934.481 -544.481 -930 -550 -930 L -550 -930 C -555.519 -930 -560 -934.481 -560 -940 L -560 -960 L -560 -960 C -560 -965.519 -564.481 -970 -570 -970 C -575.519 -970 -580 -965.519 -580 -960 L -580 -960 L -580 -960 L -580 -940 C -580 -934.481 -584.481 -930 -590 -930 L -590 -930 C -595.519 -930 -600 -934.481 -600 -940 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 C -600 -965.519 -604.481 -970 -610 -970 C -615.519 -970 -620 -965.519 -620 -960 L -620 -960 L -620 -940 C -620 -934.481 -624.481 -930 -630 -930 L -630 -930 C -635.519 -930 -640 -934.481 -640 -940 L -640 -960 L -640 -960 C -640 -960.172 -639.996 -960.344 -639.991 -960.515 Z "></path>
+          <path d=" M -460 -930 L -460 -900 C -460 -894.481 -464.481 -890 -470 -890 L -470 -890 C -475.519 -890 -480 -894.481 -480 -900 L -480 -930 L -508.82 -930 C -514.99 -930 -520 -934.481 -520 -940 L -520 -940 C -520 -945.519 -514.99 -950 -508.82 -950 L -431.18 -950 C -425.01 -950 -420 -945.519 -420 -940 L -420 -940 C -420 -934.481 -425.01 -930 -431.18 -930 L -460 -930 Z "></path>
+          <path d="M -470 -990 L -430 -990 C -424.481 -990 -420 -985.519 -420 -980 L -420 -980 C -420 -974.481 -424.481 -970 -430 -970 L -470 -970 C -475.519 -970 -480 -974.481 -480 -980 L -480 -980 C -480 -985.519 -475.519 -990 -470 -990 Z"></path>
+          <path d=" M -630 -910 L -610 -910 C -604.481 -910 -600 -905.519 -600 -900 L -600 -900 C -600 -894.481 -604.481 -890 -610 -890 L -630 -890 C -635.519 -890 -640 -894.481 -640 -900 L -640 -900 C -640 -905.519 -635.519 -910 -630 -910 Z "></path>
+          <path d=" M -515 -990 L -510 -990 C -504.481 -990 -500 -985.519 -500 -980 L -500 -980 C -500 -974.481 -504.481 -970 -510 -970 L -515 -970 C -520.519 -970 -525 -974.481 -525 -980 L -525 -980 C -525 -985.519 -520.519 -990 -515 -990 Z "></path>
+          <path d=" M -660 -910 L -680 -910 L -680 -980 C -680 -1007.596 -657.596 -1030 -630 -1030 L -430 -1030 C -402.404 -1030 -380 -1007.596 -380 -980 L -380 -900 C -380 -872.404 -402.404 -850 -430 -850 L -630 -850 C -657.596 -850 -680 -872.404 -680 -900 L -680 -920 L -660 -920 L -660 -900 C -660 -883.443 -646.557 -870 -630 -870 L -430 -870 C -413.443 -870 -400 -883.443 -400 -900 L -400 -980 C -400 -996.557 -413.443 -1010 -430 -1010 L -630 -1010 C -646.557 -1010 -660 -996.557 -660 -980 L -660 -910 Z "></path>
+        </g>
+      </svg>
+      <div class="hidden h-6 place-content-center text-[2rem] leading-0 sm:grid">
+        <div
+          class={cn(
+            "-mt-[1.65em] hidden pl-[0.5em] text-[0.315em] leading-0 text-sub transition-colors duration-125 lg:block",
+            {
+              "text-transparent": getFocus(),
+            },
+          )}
+          data-ui-element="logoSubtext"
+        >
+          {isDevEnvironment() ? "localhost" : "monkey see"}
+        </div>
+        <h1
+          class={cn("-mt-[0.11em] text-text transition-colors duration-250", {
+            "text-sub": getFocus(),
+          })}
+          data-ui-element="logoText"
+        >
+          monkeytype
+        </h1>
+      </div>
+    </a>
+  );
+}
diff --git a/frontend/src/ts/components/layout/header/Nav.tsx b/frontend/src/ts/components/layout/header/Nav.tsx
new file mode 100644
index 000000000000..79bd36f4a421
--- /dev/null
+++ b/frontend/src/ts/components/layout/header/Nav.tsx
@@ -0,0 +1,209 @@
+import { useQuery } from "@tanstack/solid-query";
+import { createMemo, JSXElement, Show } from "solid-js";
+
+import { showAlerts } from "../../../elements/alerts";
+import { createEffectOn } from "../../../hooks/effects";
+import { getServerConfigurationQueryOptions } from "../../../queries/server-configuration";
+import { getActivePage, getFocus } from "../../../signals/core";
+import {
+  getAccountButtonSpinner,
+  getAnimatedLevel,
+  setAnimatedLevel,
+} from "../../../signals/header";
+import { getSnapshot } from "../../../stores/snapshot";
+import { restart } from "../../../test/test-logic";
+import { cn } from "../../../utils/cn";
+import { getLevelFromTotalXp } from "../../../utils/levels";
+import { AnimeConditional } from "../../common/anime";
+import { Button } from "../../common/Button";
+import { NotificationBubble } from "../../common/NotificationBubble";
+import { User } from "../../common/User";
+import { prefetchAboutPage } from "../../pages/AboutPage";
+import { AccountMenu } from "./AccountMenu";
+import { AccountXpBar } from "./AccountXpBar";
+
+export function Nav(): JSXElement {
+  const buttonClass = () =>
+    cn("aspect-square", {
+      "opacity-(--nav-focus-opacity)": getFocus(),
+    });
+
+  createEffectOn(getSnapshot, (snapshot) => {
+    if (snapshot === undefined) {
+      setAnimatedLevel(0);
+      return;
+    }
+    setAnimatedLevel(getLevelFromTotalXp(snapshot.xp ?? 0));
+  });
+
+  const showFriendsNotificationBubble = createMemo((): boolean => {
+    const friends = getSnapshot()?.connections;
+
+    if (friends !== undefined) {
+      const pendingFriendRequests = Object.values(friends).filter(
+        (it) => it === "incoming",
+      ).length;
+      if (pendingFriendRequests > 0) {
+        return true;
+      }
+    }
+    return false;
+  });
+
+  const showAlertsNotificationBubble = createMemo((): boolean => {
+    const snapshot = getSnapshot();
+    if (snapshot === undefined) return false;
+
+    return snapshot.inboxUnreadSize > 0;
+  });
+
+  const serverConfig = useQuery(() => getServerConfigurationQueryOptions());
+  const showLoginButton = (): boolean =>
+    serverConfig.data?.users.signUp ?? true;
+
+  return (
+    <nav class={cn("z-5 flex w-full items-center gap-1 md:gap-2")}>
+      <Button
+        variant="text"
+        fa={{
+          icon: "fa-keyboard",
+          fixedWidth: true,
+        }}
+        router-link
+        href="/"
+        class={buttonClass()}
+        dataset={{
+          "data-nav-item": "test",
+        }}
+        onClick={() => {
+          if (getActivePage() === "test") restart();
+        }}
+      />
+      <Button
+        variant="text"
+        fa={{
+          icon: "fa-crown",
+          fixedWidth: true,
+        }}
+        router-link
+        dataset={{
+          "data-nav-item": "leaderboards",
+        }}
+        class={buttonClass()}
+        href="/leaderboards"
+      />
+      <Button
+        variant="text"
+        fa={{
+          icon: "fa-info",
+          fixedWidth: true,
+        }}
+        class={buttonClass()}
+        dataset={{
+          "data-nav-item": "about",
+        }}
+        href="/about"
+        router-link
+        onMouseEnter={() => {
+          prefetchAboutPage();
+        }}
+      />
+      <Button
+        variant="text"
+        fa={{
+          icon: "fa-cog",
+          fixedWidth: true,
+        }}
+        class={buttonClass()}
+        href="/settings"
+        dataset={{
+          "data-nav-item": "settings",
+        }}
+        router-link
+      />
+      <div class="grow"></div>
+      <Button
+        variant="text"
+        fa={{
+          icon: "fa-bell",
+          fixedWidth: true,
+        }}
+        dataset={{
+          "data-nav-item": "alerts",
+        }}
+        onClick={() => {
+          void showAlerts();
+        }}
+        class={cn(buttonClass(), "relative")}
+      >
+        <NotificationBubble
+          variant="fromCorner"
+          show={showAlertsNotificationBubble()}
+        />
+      </Button>
+      <AnimeConditional
+        exitBeforeEnter
+        if={getSnapshot()}
+        then={(snap) => (
+          <>
+            <div
+              class={cn(
+                "relative",
+                "hover:**:data-[ui-element='accountMenu']:pointer-events-auto hover:**:data-[ui-element='accountMenu']:opacity-100",
+                "focus-within:**:data-[ui-element='accountMenu']:pointer-events-auto focus-within:**:data-[ui-element='accountMenu']:opacity-100",
+              )}
+            >
+              <Button
+                variant="text"
+                class={cn(
+                  "h-full",
+                  "hover:**:data-[ui-element='userLevel']:bg-(--themable-button-hover-text)",
+                  { "opacity-(--nav-focus-opacity)": getFocus() },
+                )}
+                href="/account"
+                router-link
+                dataset={{
+                  "data-nav-item": "account",
+                }}
+              >
+                <User
+                  user={snap()}
+                  showAvatar={true}
+                  iconsOnly={true}
+                  hideNameOnSmallScreens={true}
+                  level={getAnimatedLevel()}
+                  showSpinner={getAccountButtonSpinner()}
+                  showNotificationBubble={showFriendsNotificationBubble()}
+                />
+              </Button>
+              <AccountMenu
+                showFriendsNotificationBubble={showFriendsNotificationBubble()}
+              />
+            </div>
+            <div class="relative">
+              <AccountXpBar />
+            </div>
+          </>
+        )}
+        else={
+          <Show when={showLoginButton()}>
+            <Button
+              variant="text"
+              href="/login"
+              dataset={{
+                "data-nav-item": "login",
+              }}
+              fa={{
+                icon: "fa-user",
+                variant: "regular",
+                fixedWidth: true,
+              }}
+              router-link
+              class={buttonClass()}
+            />
+          </Show>
+        }
+      />
+    </nav>
+  );
+}
diff --git a/frontend/src/ts/components/modals/ContactModal.tsx b/frontend/src/ts/components/modals/ContactModal.tsx
index 9f5e0c31e16a..cbe950cb45ab 100644
--- a/frontend/src/ts/components/modals/ContactModal.tsx
+++ b/frontend/src/ts/components/modals/ContactModal.tsx
@@ -20,7 +20,7 @@ export function ContactModal(): JSXElement {
       </div>
       <div class="mt-4 grid gap-4 md:grid-cols-2">
         <Button
-          type="button"
+          variant="button"
           href="mailto:contact@monkeytype.com?subject=[Question] "
           text="Question"
           class={buttonClass}
@@ -30,7 +30,7 @@ export function ContactModal(): JSXElement {
           }}
         />
         <Button
-          type="button"
+          variant="button"
           href="mailto:contact@monkeytype.com?subject=[Feedback] "
           fa={{
             icon: "fa-comment-dots",
@@ -40,7 +40,7 @@ export function ContactModal(): JSXElement {
           class={buttonClass}
         />
         <Button
-          type="button"
+          variant="button"
           href="mailto:support@monkeytype.com?subject=[Bug] "
           fa={{
             icon: "fa-bug",
@@ -50,7 +50,7 @@ export function ContactModal(): JSXElement {
           class={buttonClass}
         />
         <Button
-          type="button"
+          variant="button"
           href="mailto:support@monkeytype.com?subject=[Account] "
           fa={{
             icon: "fa-user-circle",
@@ -60,7 +60,7 @@ export function ContactModal(): JSXElement {
           class={buttonClass}
         />
         <Button
-          type="button"
+          variant="button"
           href="mailto:jack@monkeytype.com?subject=[Business] "
           fa={{
             icon: "fa-briefcase",
@@ -70,7 +70,7 @@ export function ContactModal(): JSXElement {
           class={buttonClass}
         />
         <Button
-          type="button"
+          variant="button"
           href="mailto:contact@monkeytype.com?subject=[Other] "
           fa={{
             icon: "fa-ellipsis-h",
diff --git a/frontend/src/ts/components/modals/DevOptionsModal.tsx b/frontend/src/ts/components/modals/DevOptionsModal.tsx
index a2e72abac929..fbd63de84d3f 100644
--- a/frontend/src/ts/components/modals/DevOptionsModal.tsx
+++ b/frontend/src/ts/components/modals/DevOptionsModal.tsx
@@ -2,8 +2,8 @@ import { createSignal, For, JSXElement } from "solid-js";
 import { envConfig } from "virtual:env-config";
 
 import { signIn } from "../../auth";
+import { addXp } from "../../db";
 import * as Notifications from "../../elements/notifications";
-import { update } from "../../elements/xp-bar";
 import { getInputElement } from "../../input/input-element";
 import { showPopup } from "../../modals/simple-modals";
 import { showLoaderBar, hideLoaderBar } from "../../signals/loader-bar";
@@ -106,18 +106,32 @@ export function DevOptionsModal(): JSXElement {
     },
     {
       icon: "fa-star",
-      label: () => "XP Bar Test",
+      label: () => "XP Simple Test",
       onClick: () => {
         setTimeout(() => {
-          void update(1000000, 20800, {
+          addXp(1000);
+        }, 500);
+        hideModal("DevOptions");
+      },
+    },
+    {
+      icon: "fa-star",
+      label: () => "XP with breakdown Test",
+      onClick: () => {
+        setTimeout(() => {
+          const fakeBreakdown = {
             base: 100,
-            fullAccuracy: 200,
-            accPenalty: 300,
-            quote: 400,
-            punctuation: 500,
-            streak: 10_000,
+            quote: 10,
+            corrected: 5,
+            funbox: 5,
+            streak: 10,
+            incomplete: 10,
+            accPenalty: 5,
             configMultiplier: 2,
-          });
+            daily: 10000,
+          };
+          const totalFakeXp = 10270;
+          addXp(totalFakeXp, fakeBreakdown);
         }, 500);
         hideModal("DevOptions");
       },
@@ -145,7 +159,7 @@ export function DevOptionsModal(): JSXElement {
         <For each={buttons}>
           {(btn) => (
             <Button
-              type="button"
+              variant="button"
               onClick={btn.onClick}
               fa={{ icon: btn.icon, fixedWidth: true }}
               text={btn.label()}
diff --git a/frontend/src/ts/components/modals/SupportModal.tsx b/frontend/src/ts/components/modals/SupportModal.tsx
index e507b0ef0972..92183d18c799 100644
--- a/frontend/src/ts/components/modals/SupportModal.tsx
+++ b/frontend/src/ts/components/modals/SupportModal.tsx
@@ -24,7 +24,7 @@ export function SupportModal(): JSXElement {
       </div>
       <div class="grid grid-cols-1 gap-4 xs:grid-cols-2 md:grid-cols-4">
         <Button
-          type="button"
+          variant="button"
           onClick={() => {
             setCommandlineSubgroup("ads");
             showModal("Commandline");
@@ -38,7 +38,7 @@ export function SupportModal(): JSXElement {
           class={buttonClass}
         />
         <Button
-          type="button"
+          variant="button"
           href="https://ko-fi.com/monkeytype"
           fa={{
             icon: "fa-donate",
@@ -49,7 +49,7 @@ export function SupportModal(): JSXElement {
           class={buttonClass}
         />
         <Button
-          type="button"
+          variant="button"
           href="https://www.patreon.com/monkeytype"
           fa={{
             variant: "brand",
@@ -61,7 +61,7 @@ export function SupportModal(): JSXElement {
           class={buttonClass}
         />
         <Button
-          type="button"
+          variant="button"
           href="https://monkeytype.store"
           fa={{
             icon: "fa-tshirt",
diff --git a/frontend/src/ts/components/mount.tsx b/frontend/src/ts/components/mount.tsx
index fd8149609be9..480477782ece 100644
--- a/frontend/src/ts/components/mount.tsx
+++ b/frontend/src/ts/components/mount.tsx
@@ -7,6 +7,7 @@ import { qsa } from "../utils/dom";
 import { DevTools } from "./core/DevTools";
 import { Theme } from "./core/Theme";
 import { Footer } from "./layout/footer/Footer";
+import { Header } from "./layout/header/Header";
 import { Overlays } from "./layout/overlays/Overlays";
 import { Modals } from "./modals/Modals";
 import { AboutPage } from "./pages/AboutPage";
@@ -23,6 +24,7 @@ const components: Record<string, () => JSXElement> = {
   modals: () => <Modals />,
   overlays: () => <Overlays />,
   theme: () => <Theme />,
+  header: () => <Header />,
   devtools: () => <DevTools />,
 };
 
diff --git a/frontend/src/ts/components/pages/AboutPage.tsx b/frontend/src/ts/components/pages/AboutPage.tsx
index de2a4c73ea6b..2dee8f227b68 100644
--- a/frontend/src/ts/components/pages/AboutPage.tsx
+++ b/frontend/src/ts/components/pages/AboutPage.tsx
@@ -11,7 +11,6 @@ import {
 import { getConfig } from "../../signals/config";
 import { getActivePage } from "../../signals/core";
 import { showModal } from "../../stores/modals";
-import { qsr } from "../../utils/dom";
 import { getNumberWithMagnitude } from "../../utils/numbers";
 import AsyncContent from "../common/AsyncContent";
 import { Button } from "../common/Button";
@@ -19,9 +18,12 @@ import { ChartJs } from "../common/ChartJs";
 import { Fa } from "../common/Fa";
 import { H2, H3 } from "../common/Headers";
 
-qsr("nav .view-about").on("mouseenter", () => {
-  prefetch();
-});
+export function prefetchAboutPage(): void {
+  void queryClient.prefetchQuery(getContributorsQueryOptions());
+  void queryClient.prefetchQuery(getSupportersQueryOptions());
+  void queryClient.prefetchQuery(getTypingStatsQueryOptions());
+  void queryClient.prefetchQuery(getSpeedHistogramQueryOptions());
+}
 
 export function AboutPage(): JSXElement {
   const isOpen = (): boolean => getActivePage() === "about";
@@ -340,7 +342,7 @@ export function AboutPage(): JSXElement {
         <H2 fa={{ icon: "fa-users" }} text="credits" />
         <p>
           <Button
-            type="text"
+            variant="text"
             text="Montydrei"
             href="https://www.reddit.com/user/montydrei"
             class="p-0 pt-2 pr-2 pb-2"
@@ -349,7 +351,7 @@ export function AboutPage(): JSXElement {
         </p>
         <p>
           <Button
-            type="text"
+            variant="text"
             text="Everyone"
             href="https://www.reddit.com/r/MechanicalKeyboards/comments/gc6wx3/experimenting_with_a_completely_new_type_of/"
             class="p-0 pt-2 pr-2 pb-2"
@@ -359,7 +361,7 @@ export function AboutPage(): JSXElement {
         </p>
         <p>
           <Button
-            type="text"
+            variant="text"
             text="Supporters"
             href="#supporters_title"
             class="p-0 pt-2 pr-2 pb-2"
@@ -369,7 +371,7 @@ export function AboutPage(): JSXElement {
         </p>
         <p>
           <Button
-            type="text"
+            variant="text"
             text="Contributors"
             href="https://github.com/monkeytypegame/monkeytype/graphs/contributors"
             class="p-0 pt-2 pr-2 pb-2"
@@ -447,10 +449,3 @@ export function AboutPage(): JSXElement {
     </div>
   );
 }
-
-function prefetch(): void {
-  void queryClient.prefetchQuery(getContributorsQueryOptions());
-  void queryClient.prefetchQuery(getSupportersQueryOptions());
-  void queryClient.prefetchQuery(getTypingStatsQueryOptions());
-  void queryClient.prefetchQuery(getSpeedHistogramQueryOptions());
-}
diff --git a/frontend/src/ts/components/pages/profile/UserDetails.tsx b/frontend/src/ts/components/pages/profile/UserDetails.tsx
index 1a13516913ed..6f5db0ed798a 100644
--- a/frontend/src/ts/components/pages/profile/UserDetails.tsx
+++ b/frontend/src/ts/components/pages/profile/UserDetails.tsx
@@ -26,6 +26,7 @@ import { cn } from "../../../utils/cn";
 import { secondsToString } from "../../../utils/date-and-time";
 import { formatXp, getXpDetails } from "../../../utils/levels";
 import { AutoShrink } from "../../common/AutoShrink";
+import { Bar } from "../../common/Bar";
 import { Button } from "../../common/Button";
 import { Conditional } from "../../common/Conditional";
 import { DiscordAvatar } from "../../common/DiscordAvatar";
@@ -319,9 +320,7 @@ function AvatarAndName(props: {
 
 function LevelAndBar(props: { xp?: number }): JSXElement {
   const xpDetails = () => getXpDetails(props.xp ?? 0);
-  const bar = () =>
-    ((xpDetails().levelCurrentXp / xpDetails().levelMaxXp) * 100).toFixed(2) +
-    "%";
+  const bar = () => xpDetails().levelProgressPercent;
 
   return (
     <div class="col-span-2 flex w-full items-center gap-2">
@@ -332,20 +331,7 @@ function LevelAndBar(props: { xp?: number }): JSXElement {
       >
         {xpDetails().level}
       </div>
-      <div
-        class="h-2 flex-1 rounded bg-bg"
-        data-balloon-pos="up"
-        aria-label={bar()}
-      >
-        <div
-          class="h-2 rounded bg-main"
-          style={{
-            width: bar(),
-          }}
-        >
-          &nbsp;
-        </div>
-      </div>
+      <Bar percent={bar()} fill="main" bg="bg" showPercentageOnHover />
       <div
         class="shrink-0 text-xs"
         data-balloon-pos="up"
@@ -486,7 +472,7 @@ function Socials(props: {
         >
           <Show when={props.socials?.github}>
             <Button
-              type="text"
+              variant="text"
               fa={{ icon: "fa-github", variant: "brand", fixedWidth: true }}
               href={`https://github.com/${props.socials?.github}`}
               ariaLabel={{ text: props.socials?.github ?? "", position: "up" }}
@@ -494,7 +480,7 @@ function Socials(props: {
           </Show>
           <Show when={props.socials?.twitter}>
             <Button
-              type="text"
+              variant="text"
               fa={{ icon: "fa-twitter", variant: "brand", fixedWidth: true }}
               href={`https://x.com/${props.socials?.twitter}`}
               ariaLabel={{ text: props.socials?.twitter ?? "", position: "up" }}
@@ -502,7 +488,7 @@ function Socials(props: {
           </Show>
           <Show when={props.socials?.website}>
             <Button
-              type="text"
+              variant="text"
               fa={{ icon: "fa-globe", fixedWidth: true }}
               href={props.socials?.website ?? ""}
               ariaLabel={{ text: props.socials?.website ?? "", position: "up" }}
diff --git a/frontend/src/ts/config.ts b/frontend/src/ts/config.ts
index 488eea2d346f..c911dd34e1d1 100644
--- a/frontend/src/ts/config.ts
+++ b/frontend/src/ts/config.ts
@@ -1,7 +1,6 @@
 import * as Notifications from "./elements/notifications";
 import { isConfigValueValid } from "./config-validation";
 import * as ConfigEvent from "./observables/config-event";
-import * as AccountButton from "./elements/account-button";
 import { debounce } from "throttle-debounce";
 import {
   canSetConfigWithCurrentFunboxes,
@@ -23,6 +22,7 @@ import { parseWithSchema as parseJsonWithSchema } from "@monkeytype/util/json";
 import { ZodSchema } from "zod";
 import * as TestState from "./test/test-state";
 import { ConfigMetadataObject, configMetadata } from "./config-metadata";
+import { setAccountButtonSpinner } from "./signals/header";
 import { deleteConfig, saveConfig } from "./ape/config";
 import Ape from "./ape";
 import { SnapshotInitError } from "./db";
@@ -48,9 +48,9 @@ let config: Config = {
 let configToSend: Partial<Config> = {};
 const saveToDatabase = debounce(1000, () => {
   if (Object.keys(configToSend).length > 0) {
-    AccountButton.loading(true);
-    void saveConfig(configToSend).then(() => {
-      AccountButton.loading(false);
+    setAccountButtonSpinner(true);
+    void saveConfig(configToSend).finally(() => {
+      setAccountButtonSpinner(false);
     });
   }
   configToSend = {} as Config;
@@ -74,9 +74,10 @@ export function saveFullConfigToLocalStorage(noDbCheck = false): void {
   console.log("saving full config to localStorage");
   configLS.set(config);
   if (!noDbCheck) {
-    AccountButton.loading(true);
-    void saveConfig(config);
-    AccountButton.loading(false);
+    setAccountButtonSpinner(true);
+    void saveConfig(config).finally(() => {
+      setAccountButtonSpinner(false);
+    });
   }
 }
 
diff --git a/frontend/src/ts/db.ts b/frontend/src/ts/db.ts
index 4a83b325bb72..3227f472c3f0 100644
--- a/frontend/src/ts/db.ts
+++ b/frontend/src/ts/db.ts
@@ -36,6 +36,8 @@ import {
   setLastResult,
   setSnapshot as setSolidSnapshot,
 } from "./stores/snapshot";
+import { XpBreakdown } from "@monkeytype/schemas/results";
+import { setXpBarData } from "./signals/header";
 
 let dbSnapshot: Snapshot | undefined;
 const firstDayOfTheWeek = getFirstDayOfTheWeek();
@@ -250,6 +252,7 @@ export async function initSnapshot(): Promise<Snapshot | false> {
     snap.connections = convertConnections(connectionsData);
 
     dbSnapshot = snap;
+
     return dbSnapshot;
   } catch (e) {
     dbSnapshot = getDefaultSnapshot();
@@ -955,6 +958,7 @@ export async function updateLbMemory<M extends Mode>(
 
 export type SaveLocalResultData = {
   xp?: number;
+  xpBreakdown?: XpBreakdown;
   streak?: number;
   result?: SnapshotResult<Mode>;
   isPb?: boolean;
@@ -1020,9 +1024,16 @@ export function saveLocalResult(data: SaveLocalResultData): void {
   setSnapshot(snapshot, {
     dispatchEvent: false,
   });
+  if (data.xp !== undefined) {
+    setXpBarData({
+      addedXp: data.xp,
+      resultingXp: snapshot.xp,
+      breakdown: data.xpBreakdown,
+    });
+  }
 }
 
-export function addXp(xp: number): void {
+export function addXp(xp: number, breakdown?: XpBreakdown): void {
   const snapshot = getSnapshot();
   if (!snapshot) return;
 
@@ -1031,6 +1042,11 @@ export function addXp(xp: number): void {
   setSnapshot(snapshot, {
     dispatchEvent: false,
   });
+  setXpBarData({
+    addedXp: xp,
+    resultingXp: snapshot.xp,
+    breakdown: breakdown,
+  });
 }
 
 export function updateInboxUnreadSize(newSize: number): void {
diff --git a/frontend/src/ts/elements/account-button.ts b/frontend/src/ts/elements/account-button.ts
deleted file mode 100644
index f6cf7da1d4e4..000000000000
--- a/frontend/src/ts/elements/account-button.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-import * as Misc from "../utils/misc";
-import {
-  getHtmlByUserFlags,
-  SupportsFlags,
-} from "../controllers/user-flag-controller";
-import { isAuthenticated } from "../firebase";
-import * as XpBar from "./xp-bar";
-import { getAvatarElement } from "../utils/discord-avatar";
-import * as AuthEvent from "../observables/auth-event";
-import { getSnapshot } from "../db";
-import { qsr } from "../utils/dom";
-
-const nav = qsr("header nav");
-const accountButtonAndMenuEl = nav.qsr(".accountButtonAndMenu");
-const loginButtonEl = nav.qsr(".textButton.view-login");
-
-export function hide(): void {
-  accountButtonAndMenuEl.hide();
-  loginButtonEl.hide();
-}
-
-export function loading(state: boolean): void {
-  accountButtonAndMenuEl
-    .qs(".spinner")
-    ?.setStyle({ opacity: state ? "1" : "0" });
-  accountButtonAndMenuEl
-    .qs(".avatar")
-    ?.setStyle({ opacity: state ? "0" : "1" });
-}
-
-export function updateName(name: string): void {
-  accountButtonAndMenuEl.qs(".view-account > .text")?.setText(name);
-}
-
-function updateFlags(flags: SupportsFlags): void {
-  accountButtonAndMenuEl
-    .qs(".view-account > .text")
-    ?.appendHtml(getHtmlByUserFlags(flags, { iconsOnly: true }));
-}
-
-export function updateAvatar(avatar?: {
-  discordId?: string;
-  discordAvatar?: string;
-}): void {
-  const element = getAvatarElement(avatar ?? {}, {
-    userIcon: "fas fa-fw fa-user",
-  });
-  accountButtonAndMenuEl.qs(".avatar")?.replaceWith(element);
-}
-
-export function update(): void {
-  if (isAuthenticated()) {
-    const snapshot = getSnapshot();
-
-    if (snapshot === undefined) return;
-
-    const { xp, name } = snapshot;
-
-    loading(false);
-    updateName(name);
-    updateFlags(snapshot ?? {});
-    XpBar.setXp(xp);
-    updateAvatar(snapshot);
-
-    accountButtonAndMenuEl
-      .qs(".menu .items .goToProfile")
-      ?.setAttribute("href", `/profile/${name}`);
-    void Misc.swapElements(loginButtonEl, accountButtonAndMenuEl, 250);
-  } else {
-    void Misc.swapElements(
-      accountButtonAndMenuEl,
-      loginButtonEl,
-      250,
-      async () => {
-        updateName("");
-        updateFlags({});
-        XpBar.setXp(0);
-        updateAvatar();
-      },
-    );
-  }
-
-  updateFriendRequestsIndicator();
-}
-
-export function updateFriendRequestsIndicator(): void {
-  const friends = getSnapshot()?.connections;
-
-  const bubbleElements = accountButtonAndMenuEl.qsa(
-    ".view-account > .notificationBubble, .goToFriends > .notificationBubble",
-  );
-  if (friends !== undefined) {
-    const pendingFriendRequests = Object.values(friends).filter(
-      (it) => it === "incoming",
-    ).length;
-    if (pendingFriendRequests > 0) {
-      bubbleElements.show();
-      return;
-    }
-  }
-
-  bubbleElements.hide();
-}
-
-const coarse = window.matchMedia("(pointer:coarse)")?.matches;
-if (coarse) {
-  accountButtonAndMenuEl.qs(".view-account")?.setAttribute("href", "");
-}
-
-AuthEvent.subscribe((event) => {
-  if (
-    (event.type === "authStateChanged" && !event.data.isUserSignedIn) ||
-    event.type === "snapshotUpdated"
-  ) {
-    update();
-  }
-});
diff --git a/frontend/src/ts/elements/account-settings/blocked-user-table.ts b/frontend/src/ts/elements/account-settings/blocked-user-table.ts
index b8494b79a5ba..9d012ced8c6c 100644
--- a/frontend/src/ts/elements/account-settings/blocked-user-table.ts
+++ b/frontend/src/ts/elements/account-settings/blocked-user-table.ts
@@ -5,7 +5,6 @@ import { format } from "date-fns/format";
 import { isAuthenticated } from "../../firebase";
 import { getReceiverUid } from "../../pages/friends";
 import * as DB from "../../db";
-import { updateFriendRequestsIndicator } from "../account-button";
 import { qsr } from "../../utils/dom";
 
 let blockedUsers: Connection[] = [];
@@ -97,7 +96,7 @@ element.onChild("click", "table button.delete", async (e) => {
 
       // oxlint-disable-next-line no-dynamic-delete, no-unsafe-member-access
       delete snapshot.connections[uid];
-      updateFriendRequestsIndicator();
+      DB.setSnapshot(snapshot);
     }
   }
 });
diff --git a/frontend/src/ts/elements/alerts.ts b/frontend/src/ts/elements/alerts.ts
index ccefc55d75c4..e5617981383c 100644
--- a/frontend/src/ts/elements/alerts.ts
+++ b/frontend/src/ts/elements/alerts.ts
@@ -13,10 +13,9 @@ import {
 } from "../utils/misc";
 import AnimatedModal from "../utils/animated-modal";
 import { MonkeyMail } from "@monkeytype/schemas/users";
-import * as XPBar from "../elements/xp-bar";
 import * as AuthEvent from "../observables/auth-event";
 import { animate } from "animejs";
-import { qs, qsr } from "../utils/dom";
+import { qsr } from "../utils/dom";
 
 const alertsPopupEl = qsr("#alertsPopup");
 const accountAlertsListEl = alertsPopupEl.qsr(".accountAlerts .list");
@@ -48,7 +47,6 @@ const state: State = {
 };
 
 function hide(): void {
-  setNotificationBubbleVisible(false);
   DB.updateInboxUnreadSize(0);
   void modal.hide({
     afterAnimation: async () => {
@@ -111,16 +109,13 @@ function hide(): void {
       }
 
       if (totalXpClaimed > 0) {
-        const snapxp = DB.getSnapshot()?.xp ?? 0;
-        void XPBar.update(snapxp, totalXpClaimed);
-
         DB.addXp(totalXpClaimed);
       }
     },
   });
 }
 
-async function show(): Promise<void> {
+export async function showAlerts(): Promise<void> {
   void modal.show({
     beforeAnimation: async () => {
       if (isAuthenticated()) {
@@ -313,14 +308,6 @@ function fillNotifications(): void {
   }
 }
 
-export function setNotificationBubbleVisible(tf: boolean): void {
-  if (tf) {
-    qs("header nav .showAlerts .notificationBubble")?.show();
-  } else {
-    qs("header nav .showAlerts .notificationBubble")?.hide();
-  }
-}
-
 function updateInboxSize(): void {
   const remainingItems = accountAlerts.length - mailToDelete.length;
   alertsPopupEl
@@ -454,10 +441,6 @@ async function copyNotificationToClipboard(target: HTMLElement): Promise<void> {
   }
 }
 
-qs("header nav .showAlerts")?.on("click", () => {
-  void show();
-});
-
 NotificationEvent.subscribe((message, level, options) => {
   let title = "Notice";
   if (level === -1) {
@@ -482,12 +465,7 @@ NotificationEvent.subscribe((message, level, options) => {
 });
 
 AuthEvent.subscribe((event) => {
-  if (event.type === "snapshotUpdated" && event.data.isInitial) {
-    const snapshot = DB.getSnapshot();
-    setNotificationBubbleVisible((snapshot?.inboxUnreadSize ?? 0) > 0);
-  }
   if (event.type === "authStateChanged" && !event.data.isUserSignedIn) {
-    setNotificationBubbleVisible(false);
     accountAlerts = [];
     mailToMarkRead = [];
     mailToDelete = [];
diff --git a/frontend/src/ts/elements/xp-bar.ts b/frontend/src/ts/elements/xp-bar.ts
deleted file mode 100644
index 1fcfd41950cc..000000000000
--- a/frontend/src/ts/elements/xp-bar.ts
+++ /dev/null
@@ -1,432 +0,0 @@
-import * as Misc from "../utils/misc";
-import * as Levels from "../utils/levels";
-import { XpBreakdown } from "@monkeytype/schemas/results";
-import { isSafeNumber } from "@monkeytype/util/numbers";
-import { animate } from "animejs";
-import { getTheme } from "../signals/theme";
-
-let breakdownVisible = false;
-let skip = false;
-let breakdownDone = false;
-
-let lastUpdate: {
-  currentXp: number;
-  addedXp: number;
-  breakdown?: XpBreakdown;
-} = {
-  currentXp: 0,
-  addedXp: 0,
-  breakdown: undefined,
-};
-
-const xpBreakdownTotalEl = document.querySelector(
-  "nav .xpBar .xpBreakdown .total",
-) as HTMLElement;
-const xpBreakdownListEl = document.querySelector(
-  "nav .xpBar .xpBreakdown .list",
-) as HTMLElement;
-const levelEl = document.querySelector("nav .level") as HTMLElement;
-const barEl = document.querySelector("nav .xpBar .bar") as HTMLElement;
-const barWrapperEl = document.querySelector("nav .xpBar") as HTMLElement;
-
-export async function skipBreakdown(): Promise<void> {
-  skip = true;
-
-  if (!breakdownVisible) return;
-
-  if (!breakdownDone) {
-    void flashTotalXp(lastUpdate.addedXp, true);
-  } else {
-    xpBreakdownTotalEl.textContent = `+${lastUpdate.addedXp}`;
-  }
-
-  animate(xpBreakdownListEl, {
-    opacity: [1, 0],
-    duration: Misc.applyReducedMotion(250),
-    onComplete: () => {
-      xpBreakdownListEl.innerHTML = "";
-      xpBreakdownListEl.classList.add("hidden");
-    },
-  });
-
-  levelEl.textContent = `${Levels.getLevelFromTotalXp(
-    lastUpdate.currentXp + lastUpdate.addedXp,
-  )}`;
-
-  const endingDetails = Levels.getXpDetails(
-    lastUpdate.currentXp + lastUpdate.addedXp,
-  );
-  const endingLevel =
-    endingDetails.level +
-    endingDetails.levelCurrentXp / endingDetails.levelMaxXp;
-
-  barEl.style.width = `${(endingLevel % 1) * 100}%`;
-  await Misc.sleep(2000);
-  breakdownVisible = false;
-
-  animate(barWrapperEl, {
-    opacity: [1, 0],
-    duration: Misc.applyReducedMotion(250),
-  });
-}
-
-export function setXp(xp: number): void {
-  const xpDetails = Levels.getXpDetails(xp);
-  const levelCompletionRatio = xpDetails.levelCurrentXp / xpDetails.levelMaxXp;
-  levelEl.textContent = `${xpDetails.level}`;
-  barEl.style.width = levelCompletionRatio * 100 + "%";
-}
-
-export async function update(
-  currentXp: number,
-  addedXp: number,
-  breakdown?: XpBreakdown,
-): Promise<void> {
-  skip = false;
-  breakdownVisible = true;
-  lastUpdate = {
-    currentXp,
-    addedXp,
-    breakdown,
-  };
-
-  levelEl.textContent = `${Levels.getLevelFromTotalXp(currentXp)}`;
-
-  const startingXp = Levels.getXpDetails(currentXp);
-  const endingXp = Levels.getXpDetails(currentXp + addedXp);
-  const startingLevel =
-    startingXp.level + startingXp.levelCurrentXp / startingXp.levelMaxXp;
-  const endingLevel =
-    endingXp.level + endingXp.levelCurrentXp / endingXp.levelMaxXp;
-
-  xpBreakdownListEl.style.opacity = "0";
-  xpBreakdownListEl.innerHTML = "";
-  barWrapperEl.style.opacity = "0";
-  xpBreakdownTotalEl.textContent = "";
-
-  const showParent = Misc.promiseAnimate(barWrapperEl, {
-    opacity: 1,
-    duration: Misc.applyReducedMotion(125),
-    ease: "linear",
-  });
-
-  const showList = Misc.promiseAnimate(xpBreakdownListEl, {
-    opacity: 1,
-    duration: Misc.applyReducedMotion(125),
-    ease: "linear",
-  });
-
-  if (breakdown !== undefined) {
-    xpBreakdownListEl.classList.remove("hidden");
-    void Promise.all([showParent, showList]);
-  } else {
-    xpBreakdownListEl.classList.add("hidden");
-    void showParent;
-  }
-
-  if (skip) return;
-
-  const xpBarPromise = animateXpBar(startingLevel, endingLevel);
-  const xpBreakdownPromise = animateXpBreakdown(addedXp, breakdown);
-
-  await Promise.all([xpBarPromise, xpBreakdownPromise]);
-
-  if (skip) return;
-
-  await Misc.sleep(5000);
-
-  if (skip) return;
-
-  breakdownVisible = false;
-  levelEl.textContent = `${Levels.getLevelFromTotalXp(currentXp + addedXp)}`;
-
-  animate(barWrapperEl, {
-    opacity: [1, 0],
-    duration: Misc.applyReducedMotion(250),
-  });
-}
-
-async function flashTotalXp(totalXp: number, force = false): Promise<void> {
-  if (!force && skip) return;
-
-  xpBreakdownTotalEl.textContent = `+${totalXp}`;
-
-  const rand = (Math.random() * 2 - 1) / 4;
-  const rand2 = (Math.random() + 1) / 2;
-
-  animate(xpBreakdownTotalEl, {
-    scale: [1 + 0.5 * rand2, 1],
-    rotate: [10 * rand, 0],
-    duration: Misc.applyReducedMotion(2000),
-    ease: "out(5)",
-  });
-}
-
-async function addBreakdownListItem(
-  string: string,
-  amount: number | string | undefined,
-  options?: { extraClass?: string; noAnimation?: boolean },
-): Promise<void> {
-  if (skip) return;
-
-  if (amount === undefined) {
-    xpBreakdownListEl.insertAdjacentHTML(
-      "beforeend",
-      `<div class="line" data-string='${string}'><div>${string}</div><div></div></div>`,
-    );
-  } else if (typeof amount === "string") {
-    xpBreakdownListEl.insertAdjacentHTML(
-      "beforeend",
-      `
-      <div class="line" data-string='${string}'>
-      <div class="${options?.extraClass}">${string}</div>
-      <div class="${options?.extraClass}">${amount}</div>
-      </div>`,
-    );
-  } else {
-    const positive = amount === undefined ? undefined : amount >= 0;
-
-    xpBreakdownListEl.insertAdjacentHTML(
-      "beforeend",
-      `
-      <div class="line" data-string='${string}'>
-
-        <div class="${options?.extraClass}">${string}</div>
-        <div class="${positive ? "positive" : "negative"} ${
-          options?.extraClass
-        }">${positive ? "+" : "-"}${Math.abs(amount)}</div>
-      </div>`,
-    );
-  }
-
-  if (options?.noAnimation) return;
-
-  const el = xpBreakdownListEl.querySelector(
-    `.line[data-string='${string}']`,
-  ) as HTMLElement;
-
-  await Misc.promiseAnimate(el, {
-    opacity: [0, 1],
-    duration: Misc.applyReducedMotion(250),
-  });
-}
-
-async function animateXpBreakdown(
-  addedXp: number,
-  breakdown?: XpBreakdown,
-): Promise<void> {
-  if (skip) return;
-
-  xpBreakdownListEl.style.opacity = "1";
-  if (!breakdown) {
-    xpBreakdownTotalEl.textContent = `+${addedXp}`;
-    return;
-  }
-  const delay = Misc.applyReducedMotion(250);
-  let total = 0;
-  xpBreakdownListEl.innerHTML = "";
-  xpBreakdownListEl.classList.remove("hidden");
-
-  xpBreakdownTotalEl.textContent = `+0`;
-
-  total += breakdown.base ?? 0;
-  xpBreakdownTotalEl.textContent = `+${total}`;
-  await addBreakdownListItem("time typing", breakdown.base, {
-    noAnimation: true,
-  });
-
-  await Misc.sleep(delay);
-
-  if (isSafeNumber(breakdown.fullAccuracy)) {
-    await Misc.sleep(delay);
-    total += breakdown.fullAccuracy;
-    void flashTotalXp(total);
-    await addBreakdownListItem("perfect", breakdown.fullAccuracy);
-  } else if (isSafeNumber(breakdown.corrected)) {
-    await Misc.sleep(delay);
-    total += breakdown.corrected;
-    void flashTotalXp(total);
-    await addBreakdownListItem("clean", breakdown.corrected);
-  }
-
-  if (skip) return;
-
-  if (isSafeNumber(breakdown.quote)) {
-    await Misc.sleep(delay);
-    total += breakdown.quote;
-    void flashTotalXp(total);
-    await addBreakdownListItem("quote", breakdown.quote);
-  } else {
-    if (isSafeNumber(breakdown.punctuation)) {
-      await Misc.sleep(delay);
-      total += breakdown.punctuation;
-      void flashTotalXp(total);
-      await addBreakdownListItem("punctuation", breakdown.punctuation);
-    }
-    if (isSafeNumber(breakdown.numbers)) {
-      await Misc.sleep(delay);
-      total += breakdown.numbers;
-      void flashTotalXp(total);
-      await addBreakdownListItem("numbers", breakdown.numbers);
-    }
-  }
-
-  if (skip) return;
-
-  if (isSafeNumber(breakdown.funbox)) {
-    await Misc.sleep(delay);
-    total += breakdown.funbox;
-    void flashTotalXp(total);
-    await addBreakdownListItem("funbox", breakdown.funbox);
-  }
-
-  if (skip) return;
-
-  if (isSafeNumber(breakdown.streak)) {
-    await Misc.sleep(delay);
-    total += breakdown.streak;
-    void flashTotalXp(total);
-    await addBreakdownListItem("streak", breakdown.streak);
-  }
-
-  if (skip) return;
-
-  if (isSafeNumber(breakdown.accPenalty) && breakdown.accPenalty > 0) {
-    await Misc.sleep(delay);
-    total -= breakdown.accPenalty;
-    void flashTotalXp(total);
-    await addBreakdownListItem("accuracy penalty", breakdown.accPenalty * -1);
-  }
-
-  if (skip) return;
-
-  if (isSafeNumber(breakdown.incomplete) && breakdown.incomplete > 0) {
-    await Misc.sleep(delay);
-    total += breakdown.incomplete;
-    void flashTotalXp(total);
-    await addBreakdownListItem("incomplete tests", breakdown.incomplete);
-  }
-
-  if (skip) return;
-
-  if (isSafeNumber(breakdown.configMultiplier)) {
-    await Misc.sleep(delay);
-    total *= breakdown.configMultiplier;
-    void flashTotalXp(total);
-    await addBreakdownListItem(
-      "global multiplier",
-      `x${breakdown.configMultiplier}`,
-    );
-  }
-
-  if (skip) return;
-
-  if (isSafeNumber(breakdown.daily)) {
-    await Misc.sleep(delay);
-    total += breakdown.daily;
-    void flashTotalXp(total);
-    await addBreakdownListItem("daily bonus", breakdown.daily);
-  }
-
-  breakdownDone = true;
-
-  if (skip) return;
-
-  await Misc.sleep(delay);
-}
-
-async function animateXpBar(
-  startingLevel: number,
-  endingLevel: number,
-): Promise<void> {
-  if (skip) return;
-
-  const difference = endingLevel - startingLevel;
-
-  barEl.style.width = `${(startingLevel % 1) * 100}%`;
-
-  if (endingLevel % 1 === 0) {
-    //ending level is exactly round, meaning fill the bar to 100%, flash, set to 0
-    await Misc.promiseAnimate(barEl, {
-      width: "100%",
-      duration: Misc.applyReducedMotion(1000),
-      ease: "out(5)",
-    });
-
-    if (skip) return;
-
-    void flashLevel();
-    barEl.style.width = `0%`;
-  } else if (Math.floor(startingLevel) === Math.floor(endingLevel)) {
-    //ending level is the same, just animate the bar to the correct percentage
-    await Misc.promiseAnimate(barEl, {
-      width: `${(endingLevel % 1) * 100}%`,
-      duration: Misc.applyReducedMotion(1000),
-      ease: "out(5)",
-    });
-  } else {
-    // const quickSpeed = Misc.mapRange(difference, 10, 2000, 200, 1);
-    const quickSpeed = Math.min(1000 / difference, 200);
-    let toAnimate = difference;
-
-    let firstOneDone = false;
-    let animationDuration = quickSpeed;
-    let decrement = 1 - (startingLevel % 1);
-
-    do {
-      if (skip) return;
-
-      if (firstOneDone) {
-        void flashLevel();
-        barEl.style.width = "0%";
-        decrement = 1;
-      }
-
-      await Misc.promiseAnimate(barEl, {
-        width: "100%",
-        duration: Misc.applyReducedMotion(animationDuration),
-        ease: "linear",
-      });
-
-      toAnimate -= decrement;
-      firstOneDone = true;
-    } while (toAnimate > 1);
-
-    if (skip) return;
-
-    void flashLevel();
-    barEl.style.width = "0%";
-
-    if (skip) return;
-
-    await Misc.promiseAnimate(barEl, {
-      width: `${(toAnimate % 1) * 100}%`,
-      duration: Misc.applyReducedMotion(1000),
-      ease: "out(5)",
-    });
-  }
-  return;
-}
-
-async function flashLevel(): Promise<void> {
-  const themecolors = getTheme();
-
-  levelEl.textContent = `${parseInt(levelEl.textContent ?? "0") + 1}`;
-
-  const rand = Math.random() * 2 - 1;
-  const rand2 = Math.random() + 1;
-
-  /**
-   * `borderSpacing` has no visible effect on this element,
-   * and is used in the animation only to provide numerical
-   * values for the `step(step)` function.
-   */
-
-  animate(levelEl, {
-    scale: [1 + 0.5 * rand2, 1],
-    backgroundColor: [themecolors.main, themecolors.sub],
-    rotate: [10 * rand, 0],
-    duration: Misc.applyReducedMotion(2000),
-    ease: "out(5)",
-  });
-}
diff --git a/frontend/src/ts/event-handlers/nav.ts b/frontend/src/ts/event-handlers/nav.ts
deleted file mode 100644
index 2878adda99e6..000000000000
--- a/frontend/src/ts/event-handlers/nav.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { signOut } from "../auth";
-import { qs } from "../utils/dom";
-
-qs("nav .accountButtonAndMenu .menu button.signOut")?.on("click", () => {
-  signOut();
-});
diff --git a/frontend/src/ts/hooks/createEvent.ts b/frontend/src/ts/hooks/createEvent.ts
index 85c9686aa631..4247ede6913a 100644
--- a/frontend/src/ts/hooks/createEvent.ts
+++ b/frontend/src/ts/hooks/createEvent.ts
@@ -22,6 +22,7 @@ import { Accessor, createSignal } from "solid-js";
  * dispatchSave(); // triggers the effect
  * ```
  */
+
 export function createEvent(): [Accessor<number>, () => void] {
   const [get, set] = createSignal(0);
   return [
diff --git a/frontend/src/ts/hooks/useRefWithUtils.ts b/frontend/src/ts/hooks/useRefWithUtils.ts
index 32fc5232764f..7203e98abc0b 100644
--- a/frontend/src/ts/hooks/useRefWithUtils.ts
+++ b/frontend/src/ts/hooks/useRefWithUtils.ts
@@ -1,17 +1,15 @@
-import { Accessor } from "solid-js";
+import { Accessor, createSignal } from "solid-js";
 import { ElementWithUtils } from "../utils/dom";
 
 export function useRefWithUtils<T extends HTMLElement>(): [
   ref: (el: T) => void,
   element: Accessor<ElementWithUtils<T> | undefined>,
 ] {
-  let elementWithUtils: ElementWithUtils<T> | undefined;
+  const [element, setElement] = createSignal<ElementWithUtils<T> | undefined>();
 
   const ref = (el: T): void => {
-    elementWithUtils = new ElementWithUtils(el);
+    setElement(new ElementWithUtils(el));
   };
 
-  const element = (): ElementWithUtils<T> | undefined => elementWithUtils;
-
   return [ref, element];
 }
diff --git a/frontend/src/ts/index.ts b/frontend/src/ts/index.ts
index 10f8dbc13943..97cb163ab474 100644
--- a/frontend/src/ts/index.ts
+++ b/frontend/src/ts/index.ts
@@ -5,7 +5,6 @@ import "./event-handlers/settings";
 import "./event-handlers/account";
 import "./event-handlers/leaderboards";
 import "./event-handlers/login";
-import "./event-handlers/nav";
 
 import "./modals/google-sign-up";
 
diff --git a/frontend/src/ts/ready.ts b/frontend/src/ts/ready.ts
index 58c72ad9bfa8..2788d8ef3fbf 100644
--- a/frontend/src/ts/ready.ts
+++ b/frontend/src/ts/ready.ts
@@ -1,7 +1,6 @@
 import * as Misc from "./utils/misc";
 import * as MonkeyPower from "./elements/monkey-power";
 import * as MerchBanner from "./elements/merch-banner";
-import * as AccountButton from "./elements/account-button";
 //@ts-expect-error no types for this package
 import Konami from "konami";
 import * as ServerConfiguration from "./ape/server-configuration";
@@ -30,14 +29,10 @@ onDOMReady(async () => {
 
   void ServerConfiguration.sync().then(() => {
     if (!ServerConfiguration.get()?.users.signUp) {
-      AccountButton.hide();
       qs(".register")?.hide();
       qs(".login")?.hide();
       qs(".disabledNotification")?.show();
     }
-    if (!ServerConfiguration.get()?.connections.enabled) {
-      qs(".accountButtonAndMenu .goToFriends")?.hide();
-    }
   });
 
   MonkeyPower.init();
diff --git a/frontend/src/ts/signals/header.ts b/frontend/src/ts/signals/header.ts
new file mode 100644
index 000000000000..45f65dea9d83
--- /dev/null
+++ b/frontend/src/ts/signals/header.ts
@@ -0,0 +1,18 @@
+import { createSignal } from "solid-js";
+import { createEvent } from "../hooks/createEvent";
+import { XpBreakdown } from "@monkeytype/schemas/results";
+
+export type XpBarData = {
+  addedXp: number;
+  resultingXp: number;
+  breakdown?: XpBreakdown;
+};
+
+export const [getAnimatedLevel, setAnimatedLevel] = createSignal(0);
+export const [getAccountButtonSpinner, setAccountButtonSpinner] =
+  createSignal(false);
+export const [getXpBarData, setXpBarData] = createSignal<XpBarData | null>(
+  null,
+);
+
+export const [getSkipBreakdownEvent, skipBreakdown] = createEvent();
diff --git a/frontend/src/ts/signals/loader-bar.ts b/frontend/src/ts/signals/loader-bar.ts
index c82bade1362e..a4aeed13b596 100644
--- a/frontend/src/ts/signals/loader-bar.ts
+++ b/frontend/src/ts/signals/loader-bar.ts
@@ -1,18 +1,13 @@
-import { createSignal } from "solid-js";
+import { createSignalWithSetters } from "../hooks/createSignalWithSetters";
 
 type LoaderSignal = null | {
   visible: boolean;
   instant?: boolean;
 };
 
-const [getLoaderBarSignal, set] = createSignal<LoaderSignal>(null);
-
-export function showLoaderBar(instant = false): void {
-  set({ visible: true, instant });
-}
-
-export function hideLoaderBar(): void {
-  set({ visible: false });
-}
-
-export { getLoaderBarSignal };
+export const [getLoaderBarSignal, { showLoaderBar, hideLoaderBar }] =
+  createSignalWithSetters<LoaderSignal>(null)({
+    showLoaderBar: (set, instant: boolean = false) =>
+      set({ visible: true, instant }),
+    hideLoaderBar: (set) => set({ visible: false }),
+  });
diff --git a/frontend/src/ts/stores/snapshot.ts b/frontend/src/ts/stores/snapshot.ts
index ae2ee51f8b17..9b7eb087219c 100644
--- a/frontend/src/ts/stores/snapshot.ts
+++ b/frontend/src/ts/stores/snapshot.ts
@@ -1,9 +1,9 @@
-import { createStore, reconcile } from "solid-js/store";
+import { createStore, reconcile, unwrap } from "solid-js/store";
 import { Snapshot, SnapshotResult } from "../constants/default-snapshot";
 import { createSignal } from "solid-js";
 import { Mode } from "@monkeytype/schemas/shared";
 
-type MiniSnapshot = Omit<
+export type MiniSnapshot = Omit<
   Snapshot,
   "results" | "tags" | "presets" | "filterPresets"
 >;
@@ -17,7 +17,7 @@ export function setSnapshot(newValue: MiniSnapshot | undefined): void {
   } else {
     updateSnapshot(
       "value",
-      reconcile(structuredClone(newValue), { merge: true }),
+      reconcile(structuredClone(unwrap(newValue)), { merge: true }),
     );
   }
 }
diff --git a/frontend/src/ts/test/focus.ts b/frontend/src/ts/test/focus.ts
index 41cf2de3257b..0908543f6d6d 100644
--- a/frontend/src/ts/test/focus.ts
+++ b/frontend/src/ts/test/focus.ts
@@ -22,7 +22,6 @@ function initializeCache(): void {
   const cursorSelector = "body, button, a";
   const elementsSelector = [
     "app",
-    "header",
     "footer",
     "main",
     "#bannerCenter",
diff --git a/frontend/src/ts/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts
index 1159082b0075..aff11815a7cd 100644
--- a/frontend/src/ts/test/test-logic.ts
+++ b/frontend/src/ts/test/test-logic.ts
@@ -18,7 +18,6 @@ import * as Funbox from "./funbox/funbox";
 import * as PaceCaret from "./pace-caret";
 import * as Caret from "./caret";
 import * as TestTimer from "./test-timer";
-import * as AccountButton from "../elements/account-button";
 import * as DB from "../db";
 import * as Replay from "./replay";
 import * as TodayTracker from "./today-tracker";
@@ -46,7 +45,6 @@ import {
   CompletedEvent,
   CompletedEventCustomText,
 } from "@monkeytype/schemas/results";
-import * as XPBar from "../elements/xp-bar";
 import {
   findSingleActiveFunboxWithFunction,
   getActiveFunboxes,
@@ -69,6 +67,7 @@ import { setInputElementValue } from "../input/input-element";
 import { debounce } from "throttle-debounce";
 import * as Time from "../states/time";
 import { qs } from "../utils/dom";
+import { setAccountButtonSpinner } from "../signals/header";
 
 let failReason = "";
 
@@ -1190,15 +1189,12 @@ async function saveResult(
   completedEvent: CompletedEvent,
   isRetrying: boolean,
 ): Promise<null | Awaited<ReturnType<typeof Ape.results.add>>> {
-  AccountButton.loading(true);
-
   if (!Config.resultSaving) {
     Notifications.add("Result not saved: disabled by user", -1, {
       duration: 3,
       customTitle: "Notice",
       important: true,
     });
-    AccountButton.loading(false);
     return null;
   }
 
@@ -1215,9 +1211,11 @@ async function saveResult(
 
   console.trace();
 
+  setAccountButtonSpinner(true);
+
   const response = await Ape.results.add({ body: { result } });
 
-  AccountButton.loading(false);
+  setAccountButtonSpinner(false);
 
   if (response.status !== 200) {
     //only allow retry if status is not in this list
@@ -1253,14 +1251,10 @@ async function saveResult(
   const localDataToSave: DB.SaveLocalResultData = {};
 
   if (data.xp !== undefined) {
-    const snapxp = DB.getSnapshot()?.xp ?? 0;
-
-    void XPBar.update(
-      snapxp,
-      data.xp,
-      TestState.resultVisible ? data.xpBreakdown : undefined,
-    );
     localDataToSave.xp = data.xp;
+    if (TestState.resultVisible) {
+      localDataToSave.xpBreakdown = data.xpBreakdown;
+    }
   }
 
   if (data.streak !== undefined) {
@@ -1514,11 +1508,6 @@ qs(".pageTest")?.onChild("click", "#testConfig .numbersMode.textButton", () => {
   }
 });
 
-qs("header")?.onChild("click", "nav #startTestButton, #logo", () => {
-  if (getActivePage() === "test") restart();
-  // Result.showConfetti();
-});
-
 // ===============================
 
 ConfigEvent.subscribe(({ key, newValue, nosave }) => {
diff --git a/frontend/src/ts/test/test-screenshot.ts b/frontend/src/ts/test/test-screenshot.ts
index 45232db81786..73711d873ac4 100644
--- a/frontend/src/ts/test/test-screenshot.ts
+++ b/frontend/src/ts/test/test-screenshot.ts
@@ -29,7 +29,6 @@ function revert(): void {
   qs(".pageTest .buttons")?.show();
   qs("noscript")?.show();
   qs("#nocss")?.show();
-  qs("header")?.removeClass("invisible");
   qs("#result")?.removeClass("noBalloons");
   qs(".wordInputHighlight")?.show();
   qsa(".highlightContainer")?.show();
@@ -97,7 +96,6 @@ async function generateCanvas(): Promise<HTMLCanvasElement | null> {
   // Ensure spacer is removed before adding a new one if function is called rapidly
   qs(".pageTest .screenshotSpacer")?.remove();
   qs(".page.pageTest")?.prependHtml("<div class='screenshotSpacer'></div>");
-  qs("header")?.addClass("invisible");
   qs("#result")?.addClass("noBalloons");
   qs(".wordInputHighlight")?.hide();
   qsa(".highlightContainer")?.hide();
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index 2c8d2e818065..fcf13281fe7d 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -52,7 +52,6 @@ import * as Ligatures from "./break-ligatures";
 import * as LayoutfluidFunboxTimer from "../test/funbox/layoutfluid-funbox-timer";
 import * as Keymap from "../elements/keymap";
 import * as ThemeController from "../controllers/theme-controller";
-import * as XPBar from "../elements/xp-bar";
 import * as ModesNotice from "../elements/modes-notice";
 import * as Last10Average from "../elements/last-10-average";
 import * as MemoryFunboxTimer from "./funbox/memory-funbox-timer";
@@ -64,6 +63,7 @@ import {
   qsr,
 } from "../utils/dom";
 import { getTheme } from "../signals/theme";
+import { skipBreakdown } from "../signals/header";
 
 export const updateHintsPositionDebounced = Misc.debounceUntilResolved(
   updateHintsPosition,
@@ -1916,7 +1916,7 @@ export function onTestRestart(source: "testPage" | "resultPage"): void {
     if (Config.randomTheme !== "off") {
       void ThemeController.randomizeTheme();
     }
-    void XPBar.skipBreakdown();
+    skipBreakdown();
   }
 
   currentTestLine = 0;
diff --git a/frontend/src/ts/ui.ts b/frontend/src/ts/ui.ts
index 31d564d51533..f4d983f8bf23 100644
--- a/frontend/src/ts/ui.ts
+++ b/frontend/src/ts/ui.ts
@@ -44,7 +44,6 @@ export function setMediaQueryDebugLevel(level: number): void {
 }
 
 if (isDevEnvironment()) {
-  qs("header #logo .top")?.setText("localhost");
   qs("head title")?.setText(
     (qs("head title")?.native.textContent ?? "") + " (localhost)",
   );
diff --git a/frontend/src/ts/utils/levels.ts b/frontend/src/ts/utils/levels.ts
index 794b4b18cae7..545d013c6a69 100644
--- a/frontend/src/ts/utils/levels.ts
+++ b/frontend/src/ts/utils/levels.ts
@@ -35,8 +35,10 @@ function getTotalXpToReachLevel(level: number): number {
 
 export type XPDetails = {
   level: number;
+  levelFloat: number;
   levelCurrentXp: number;
   levelMaxXp: number;
+  levelProgressPercent: number;
 };
 
 /**
@@ -47,10 +49,16 @@ export type XPDetails = {
  */
 export function getXpDetails(totalXp: number): XPDetails {
   const level = getLevelFromTotalXp(totalXp);
+  const currentLevelXp = totalXp - getTotalXpToReachLevel(level);
+  const levelMaxXp = getLevelMaxXp(level);
+  const progress = levelMaxXp > 0 ? currentLevelXp / levelMaxXp : 0;
+  const levelFloat = level + progress;
   return {
     level,
-    levelCurrentXp: totalXp - getTotalXpToReachLevel(level),
-    levelMaxXp: getLevelMaxXp(level),
+    levelFloat,
+    levelCurrentXp: currentLevelXp,
+    levelMaxXp: levelMaxXp,
+    levelProgressPercent: (progress > 1 ? 1 : progress) * 100,
   };
 }
 
diff --git a/frontend/src/ts/utils/url-handler.ts b/frontend/src/ts/utils/url-handler.ts
index 6f039a3c5a26..10756a454177 100644
--- a/frontend/src/ts/utils/url-handler.ts
+++ b/frontend/src/ts/utils/url-handler.ts
@@ -9,7 +9,6 @@ import Ape from "../ape";
 import * as DB from "../db";
 
 import { showLoaderBar, hideLoaderBar } from "../signals/loader-bar";
-import * as AccountButton from "../elements/account-button";
 import { restart as restartTest } from "../test/test-logic";
 import * as ChallengeController from "../controllers/challenge-controller";
 import {
@@ -73,7 +72,6 @@ export async function linkDiscord(hashOverride: string): Promise<void> {
     }
 
     DB.setSnapshot(snapshot);
-    AccountButton.updateAvatar(snapshot);
   }
 }
 
diff --git a/frontend/static/funbox/crt.css b/frontend/static/funbox/crt.css
index c09a984186d1..69afe711358f 100644
--- a/frontend/static/funbox/crt.css
+++ b/frontend/static/funbox/crt.css
@@ -120,23 +120,25 @@ body.crtmode #paceCaret.carrot {
   box-shadow: none;
 }
 
-body.crtmode #logo .icon {
+body.crtmode header [data-ui-element="logo"] svg {
   filter: drop-shadow(3px 0px 1px var(--crt-main-color-glow))
     drop-shadow(-3px 0px 0px var(--crt-main-color-glow));
 }
 
-body.crtmode .avatars,
-body.crtmode nav .view-account .avatar,
-/* Adding `filter` style to .levelAndBar would make it
-the containing block for the absolute positioned .xpBar */
-body.crtmode nav .view-account .levelAndBar .level,
-body.crtmode nav .view-account .levelAndBar .xpBar,
-body.crtmode header.focus #logo .icon {
+body.crtmode header [data-ui-element="navAvatar"] svg {
   filter: drop-shadow(3px 0px 1px var(--crt-sub-color-glow))
     drop-shadow(-3px 0px 0px var(--crt-sub-color-glow));
 }
 
-body.crtmode nav .accountButtonAndMenu .view-account .xpBar .xpBreakdown {
+body.crtmode [data-ui-element="navAvatar"],
+body.crtmode [data-ui-element="userLevel"],
+body.crtmode [data-ui-element="xpBar"],
+body.crtmode header[data-focused] [data-ui-element="logo"] svg {
+  filter: drop-shadow(3px 0px 1px var(--crt-sub-color-glow))
+    drop-shadow(-3px 0px 0px var(--crt-sub-color-glow));
+}
+
+body.crtmode [data-ui-element="xpBreakdown"] {
   backdrop-filter: none;
   background: var(--bg-color);
 }
diff --git a/frontend/static/images/themes/chaos_theory/caret.webp b/frontend/static/images/themes/chaos_theory/caret.webp
new file mode 100644
index 000000000000..87f26072ba8b
Binary files /dev/null and b/frontend/static/images/themes/chaos_theory/caret.webp differ
diff --git a/frontend/static/themes/9009.css b/frontend/static/themes/9009.css
index 64d74cdb1e1f..1a21387ac229 100644
--- a/frontend/static/themes/9009.css
+++ b/frontend/static/themes/9009.css
@@ -5,16 +5,39 @@ kbd {
 
 [data-nav-item] {
   color: var(--main-color);
+  &:hover {
+    color: color-mix(in srgb, var(--main-color) 85%, white 15%);
+  }
 }
 
 [data-nav-item="test"] {
   color: var(--error-color);
+  &:hover {
+    color: color-mix(in srgb, var(--error-color) 85%, white 15%);
+  }
 }
 
 [data-nav-item="alerts"] {
-  color: var(--color-alt);
+  color: var(--sub-alt-color);
+  &:hover {
+    color: color-mix(in srgb, var(--sub-alt-color) 85%, black 15%);
+  }
+}
+
+[data-nav-item="account"] {
+  --themable-button-text: var(--main-color);
+  &:hover {
+    --themable-button-text: color-mix(
+      in srgb,
+      var(--themable-button-text),
+      white 25%
+    );
+  }
 }
 
 [data-nav-item="settings"] {
   color: var(--caret-color);
+  &:hover {
+    color: color-mix(in srgb, var(--caret-color) 85%, white 15%);
+  }
 }
diff --git a/frontend/static/themes/aether.css b/frontend/static/themes/aether.css
index 006cfc771721..9ee458ccbaf0 100644
--- a/frontend/static/themes/aether.css
+++ b/frontend/static/themes/aether.css
@@ -1,21 +1,40 @@
 [data-nav-item="test"] {
   color: #e4002b;
+  &:hover {
+    color: color-mix(in srgb, #e4002b 75%, white 25%);
+  }
 }
 
 [data-nav-item="leaderboards"] {
   color: #c53562;
+  &:hover {
+    color: color-mix(in srgb, #c53562 75%, white 25%);
+  }
 }
 
 [data-nav-item="about"] {
   color: #95549e;
+  &:hover {
+    color: color-mix(in srgb, #95549e 75%, white 25%);
+  }
 }
 
 [data-nav-item="settings"] {
   color: #6744a1;
+  &:hover {
+    color: color-mix(in srgb, #6744a1 75%, white 25%);
+  }
 }
 
 [data-nav-item="alerts"],
 [data-nav-item="account"],
 [data-nav-item="login"] {
-  color: #393c73;
+  --themable-button-text: #393c73;
+  &:hover {
+    --themable-button-text: color-mix(
+      in srgb,
+      var(--themable-button-text),
+      white 25%
+    );
+  }
 }
diff --git a/frontend/static/themes/aurora.css b/frontend/static/themes/aurora.css
index 8faf3c82c0c8..6bd63ad96ea3 100644
--- a/frontend/static/themes/aurora.css
+++ b/frontend/static/themes/aurora.css
@@ -34,7 +34,6 @@
   }
 }
 
-.button.discord::after,
 #caret,
 .pageSettings .section .buttons .button.active,
 .pageSettings .section.languages .buttons .language.active,
@@ -42,19 +41,20 @@
   animation: aurora-bg 5s linear infinite;
 }
 
-header.focus .button.discord::after,
-header .button.discord.dotHidden::after {
-  animation-name: none !important;
+[data-ui-element="logo"] h1 {
+  color: var(--main-color);
 }
-
-#logo .bottom,
-header .config .group .buttons .textButton.active,
+[data-ui-element="logoSubtext"],
+[data-ui-element="logo"]:hover h1,
 #result .stats .group .bottom,
 [data-nav-item]:hover,
-header .config .group .buttons .textButton:hover,
-footer .textButton:hover,
-footer button.text:hover,
-a:not(.button):hover {
+footer button:hover,
+a:not(.button):not([data-ui-variant="button"]):hover {
+  animation: aurora 5s linear infinite;
+}
+
+[data-nav-item="account"]:hover svg {
+  color: transparent;
   animation: aurora 5s linear infinite;
 }
 
diff --git a/frontend/static/themes/beach.css b/frontend/static/themes/beach.css
index 33d916cb1b6d..a6ae7b635a8a 100644
--- a/frontend/static/themes/beach.css
+++ b/frontend/static/themes/beach.css
@@ -1,3 +1,6 @@
 [data-nav-item] {
   color: #ff6f69;
+  &:hover {
+    color: var(--main-color);
+  }
 }
diff --git a/frontend/static/themes/bingsu.css b/frontend/static/themes/bingsu.css
index 664786834d40..d887a2a8a049 100644
--- a/frontend/static/themes/bingsu.css
+++ b/frontend/static/themes/bingsu.css
@@ -1,3 +1,6 @@
 [data-nav-item="test"] {
   color: var(--caret-color);
+  &:hover {
+    color: var(--sub-color);
+  }
 }
diff --git a/frontend/static/themes/blueberry_dark.css b/frontend/static/themes/blueberry_dark.css
index 4bb07d9f6a91..2176550be8fe 100644
--- a/frontend/static/themes/blueberry_dark.css
+++ b/frontend/static/themes/blueberry_dark.css
@@ -1,3 +1,3 @@
-header #logo .bottom {
+[data-ui-element="logo"] h1 {
   color: #962f7e;
 }
diff --git a/frontend/static/themes/blueberry_light.css b/frontend/static/themes/blueberry_light.css
index c713fe897986..60408289f14b 100644
--- a/frontend/static/themes/blueberry_light.css
+++ b/frontend/static/themes/blueberry_light.css
@@ -1,3 +1,3 @@
-header #logo .bottom {
+[data-ui-element="logo"] h1 {
   color: #df4576;
 }
diff --git a/frontend/static/themes/camping.css b/frontend/static/themes/camping.css
index fb3dbdd0eea8..15334ce754a6 100644
--- a/frontend/static/themes/camping.css
+++ b/frontend/static/themes/camping.css
@@ -1,3 +1,3 @@
-header #logo .bottom {
+[data-ui-element="logo"] h1 {
   color: #ad4f4e;
 }
diff --git a/frontend/static/themes/catppuccin.css b/frontend/static/themes/catppuccin.css
index b197eed19b3b..0f38c8855c62 100644
--- a/frontend/static/themes/catppuccin.css
+++ b/frontend/static/themes/catppuccin.css
@@ -1,27 +1,52 @@
 [data-nav-item="test"] {
   color: #f38ba8;
+  &:hover {
+    color: color-mix(in srgb, #f38ba8 75%, white 25%);
+  }
 }
 
 [data-nav-item="leaderboards"] {
   color: #fab387;
+  &:hover {
+    color: color-mix(in srgb, #fab387 75%, white 25%);
+  }
 }
 
 [data-nav-item="about"] {
   color: #f9e2af;
+  &:hover {
+    color: color-mix(in srgb, #f9e2af 75%, white 25%);
+  }
 }
 
 [data-nav-item="settings"] {
   color: #a6e3a1;
+  &:hover {
+    color: color-mix(in srgb, #a6e3a1 75%, white 25%);
+  }
 }
 
 [data-nav-item="account"] {
-  color: #89dceb;
+  --themable-button-text: #89dceb;
+  &:hover {
+    --themable-button-text: color-mix(
+      in srgb,
+      var(--themable-button-text),
+      white 25%
+    );
+  }
 }
 
 [data-nav-item="alerts"] {
   color: #89b4fa;
+  &:hover {
+    color: color-mix(in srgb, #89b4fa 75%, white 25%);
+  }
 }
 
 [data-nav-item="login"] {
   color: #b4befe;
+  &:hover {
+    color: color-mix(in srgb, #b4befe 75%, white 25%);
+  }
 }
diff --git a/frontend/static/themes/chaos_theory.css b/frontend/static/themes/chaos_theory.css
index a7d25e112171..f016618d7452 100644
--- a/frontend/static/themes/chaos_theory.css
+++ b/frontend/static/themes/chaos_theory.css
@@ -1,30 +1,42 @@
-header #logo .text {
+[data-ui-element="logo"] > div {
   transform: rotateY(180deg);
   unicode-bidi: bidi-override;
   transition: 0.5s;
 }
 
-header #logo .top {
+[data-ui-element="logoSubtext"] {
   font-family: "Comic Sans MS", "Comic Sans", cursive;
 }
 
-header #logo .icon {
+[data-ui-element="logo"] svg {
   transform: rotateX(180deg);
   transition: 0.5s;
 }
 
+header[data-focused] {
+  & [data-ui-element="logo"] > div,
+  [data-ui-element="logo"] svg {
+    transform: rotateY(0deg);
+    direction: ltr;
+  }
+  & [data-nav-item] {
+    --nav-focus-opacity: 1;
+    background: var(--sub-color);
+    transform: rotateY(180deg);
+  }
+  & [data-nav-item="account"] {
+    --themable-button-bg: var(--sub-color);
+  }
+}
+
 #words .incorrect.extra {
   transform: rotateY(180deg);
   unicode-bidi: bidi-override;
   direction: rtl;
 }
 
-/* footer .leftright .right .current-theme .text { */
-/* font-family: "Comic Sans MS", "Comic Sans", cursive; */
-/* } */
-
 #caret {
-  background-image: url(https://i.imgur.com/yN31JmJ.png) !important;
+  background-image: url(/images/themes/chaos_theory/caret.webp) !important;
   background-color: transparent !important;
   background-size: 1rem !important;
   background-position: center !important;
@@ -59,47 +71,15 @@ header #logo .icon {
   align-content: right;
 }
 
-header.focus [data-nav-item],
-header.focus nav:before,
-header.focus nav:after {
-  background: var(--sub-color);
-  transform: rotateY(180deg) !important;
-}
-
-header.focus #logo .text,
-header.focus #logo:before,
-header.focus #logo:after {
-  transform: rotateY(0deg);
-  direction: ltr;
-}
-
-header.focus #logo .icon,
-header.focus #logo:before,
-header.focus #logo:after {
-  transform: rotateX(0deg);
-  direction: ltr;
-}
-
-footer .leftright .right .current-theme .fas.fa-fw.fa-palette {
-  transform: rotateY(0deg);
-  transition: 0.5s;
-}
-
-footer .leftright .right .current-theme:hover .fas.fa-fw.fa-palette {
-  transform: rotateY(180deg);
-  transition: 0.5s;
-}
-
-nav {
-  gap: 0.5rem;
-}
-
 [data-nav-item] {
-  border-radius: 10rem i !important;
   color: var(--bg-color);
   transition: 0.5s;
 }
 
+[data-nav-item]:hover {
+  filter: brightness(1.25);
+}
+
 [data-nav-item="test"] {
   background: #ab92e1;
 }
@@ -116,82 +96,91 @@ nav {
   background: #ff5869;
 }
 
-[data-nav-item="account"] {
+[data-nav-item="alerts"] {
   background: #fc76d9;
+  & svg {
+    fill: var(--bg-color);
+  }
 }
 
-nav .notificationBubble {
-  box-shadow: none;
-  background: var(--color-bg);
-  padding-right: 0.2em;
-  right: 0.85em;
-  left: 2.75em;
+[data-nav-item="account"] {
+  --themable-button-bg: var(--main-color);
+  --themable-button-text: var(--bg-color);
+  --themable-button-hover-bg: var(--main-color);
+  --themable-button-hover-text: var(--bg-color);
+  --themable-button-active: var(--bg-color);
 }
 
-nav .level {
-  background: var(--color-bg);
-  color: var(--main-color);
+[data-nav-item="alerts"],
+[data-ui-element="navAvatar"] {
+  & [data-ui-element="notificationBubble"] {
+    box-shadow: none;
+    background: var(--bg-color);
+  }
 }
 
-[data-nav-item="alerts"] {
-  background: #fc76d9;
+[data-ui-element="userLevel"] {
+  color: var(--themable-button-bg);
+  background: var(--themable-button-text);
 }
 
 [data-nav-item="login"] {
   background: #ab92e1;
 }
 
-body.crtmode [data-nav-item="test"] {
-  box-shadow:
-    3px 0 1px color-mix(in srgb, #ab92e1 20%, transparent),
-    -3px 0 color-mix(in srgb, #ab92e1 30%, transparent),
-    0 0 3px;
-}
-
-body.crtmode [data-nav-item="leaderboards"] {
-  box-shadow:
-    3px 0 1px color-mix(in srgb, #f3ea5d 20%, transparent),
-    -3px 0 color-mix(in srgb, #f3ea5d 30%, transparent),
-    0 0 3px;
-}
-
-body.crtmode [data-nav-item="about"] {
-  box-shadow:
-    3px 0 1px color-mix(in srgb, #7ae1bf 20%, transparent),
-    -3px 0 color-mix(in srgb, #7ae1bf 30%, transparent),
-    0 0 3px;
-}
-
-body.crtmode [data-nav-item="settings"] {
-  box-shadow:
-    3px 0 1px color-mix(in srgb, #ff5869 20%, transparent),
-    -3px 0 color-mix(in srgb, #ff5869 30%, transparent),
-    0 0 3px;
-}
-
-body.crtmode [data-nav-item="account"],
-body.crtmode [data-nav-item="alerts"] {
-  box-shadow:
-    3px 0 1px color-mix(in srgb, #fc76d9 20%, transparent),
-    -3px 0 color-mix(in srgb, #fc76d9 30%, transparent),
-    0 0 3px;
-}
-
-body.crtmode [data-nav-item="login"] {
-  box-shadow:
-    3px 0 1px color-mix(in srgb, #ab92e1 20%, transparent),
-    -3px 0 color-mix(in srgb, #ab92e1 30%, transparent),
-    0 0 3px;
-}
-
-body.crtmode #caret {
-  box-shadow: none !important;
-  filter: drop-shadow(3px 0px 1px var(--crt-main-color-glow))
-    drop-shadow(-3px 0px 0px var(--crt-main-color-glow));
-}
-
-body.crtmode header.focus [data-nav-item] {
-  box-shadow:
-    3px 0 1px var(--crt-sub-color-glow),
-    -3px 0 var(--crt-sub-color-glow);
+body.crtmode {
+  & [data-nav-item="test"] {
+    box-shadow:
+      3px 0 1px color-mix(in srgb, #ab92e1 20%, transparent),
+      -3px 0 color-mix(in srgb, #ab92e1 30%, transparent),
+      0 0 3px;
+  }
+
+  & [data-nav-item="leaderboards"] {
+    box-shadow:
+      3px 0 1px color-mix(in srgb, #f3ea5d 20%, transparent),
+      -3px 0 color-mix(in srgb, #f3ea5d 30%, transparent),
+      0 0 3px;
+  }
+
+  & [data-nav-item="about"] {
+    box-shadow:
+      3px 0 1px color-mix(in srgb, #7ae1bf 20%, transparent),
+      -3px 0 color-mix(in srgb, #7ae1bf 30%, transparent),
+      0 0 3px;
+  }
+
+  & [data-nav-item="settings"] {
+    box-shadow:
+      3px 0 1px color-mix(in srgb, #ff5869 20%, transparent),
+      -3px 0 color-mix(in srgb, #ff5869 30%, transparent),
+      0 0 3px;
+  }
+
+  & [data-nav-item="account"],
+  & [data-nav-item="alerts"] {
+    box-shadow:
+      3px 0 1px color-mix(in srgb, #fc76d9 20%, transparent),
+      -3px 0 color-mix(in srgb, #fc76d9 30%, transparent),
+      0 0 3px;
+  }
+
+  & [data-nav-item="login"] {
+    box-shadow:
+      3px 0 1px color-mix(in srgb, #ab92e1 20%, transparent),
+      -3px 0 color-mix(in srgb, #ab92e1 30%, transparent),
+      0 0 3px;
+  }
+
+  & #caret {
+    box-shadow: none !important;
+    filter: drop-shadow(3px 0px 1px var(--crt-main-color-glow))
+      drop-shadow(-3px 0px 0px var(--crt-main-color-glow));
+  }
+
+  & header[data-focused] [data-nav-item] {
+    box-shadow:
+      3px 0 1px var(--crt-sub-color-glow),
+      -3px 0 var(--crt-sub-color-glow);
+  }
 }
diff --git a/frontend/static/themes/cheesecake.css b/frontend/static/themes/cheesecake.css
index 1cc659ebb702..259ac690311d 100644
--- a/frontend/static/themes/cheesecake.css
+++ b/frontend/static/themes/cheesecake.css
@@ -31,6 +31,6 @@
   }
 }
 
-header .icon > svg path {
+[data-ui-element="logo"] svg path {
   animation: 10s linear infinite 0.1s cheesecake;
 }
diff --git a/frontend/static/themes/dark_note.css b/frontend/static/themes/dark_note.css
index 06d3c25476be..e9dd63b4e40e 100644
--- a/frontend/static/themes/dark_note.css
+++ b/frontend/static/themes/dark_note.css
@@ -1,3 +1,11 @@
+:root {
+  /* custom vars */
+  --theme-bg-stripe-color: #434653;
+  --theme-bg-stripe-opacity: 0.1;
+  --theme-accent-stripe-color: #bf8200;
+  --current-color: var(--text-color);
+}
+
 .colorfulMode {
   --current-color: var(--main-color);
 }
diff --git a/frontend/static/themes/desert_oasis.css b/frontend/static/themes/desert_oasis.css
index 5ed8f6a608db..5ee82c3a7a4b 100644
--- a/frontend/static/themes/desert_oasis.css
+++ b/frontend/static/themes/desert_oasis.css
@@ -1,3 +1,10 @@
 [data-nav-item] {
-  color: #76bb40;
+  --themable-button-text: #76bb40;
+  &:hover {
+    --themable-button-text: color-mix(
+      in srgb,
+      var(--themable-button-text),
+      white 25%
+    );
+  }
 }
diff --git a/frontend/static/themes/dmg.css b/frontend/static/themes/dmg.css
index 781b438656e5..7f9588555cdd 100644
--- a/frontend/static/themes/dmg.css
+++ b/frontend/static/themes/dmg.css
@@ -1,55 +1,48 @@
-nav {
-  gap: 0.5rem;
-}
-
-header.focus [data-nav-item] {
-  background: var(--bg-color);
-  size: 1rem;
-}
-
-header.focus [data-nav-item="test"] {
-  background: #e34c6c;
-}
-
-header.focus nav:before,
-header.focus nav:after {
-  background: var(--sub-color);
-}
-
 [data-nav-item] {
   border-radius: 10rem !important;
   color: var(--bg-color);
   background: var(--main-color);
 }
 
-nav .notificationBubble {
-  box-shadow: none;
-  background: var(--color-sub);
-  padding-right: 0.2em;
-  right: 0.85em;
-  left: 2.75em;
+[data-nav-item]:hover {
+  filter: brightness(1.25);
 }
 
-nav .level {
-  background: var(--color-bg);
-  color: var(--main-color);
+header[data-focused] [data-nav-item="test"] {
+  --nav-focus-opacity: 1;
+  background: #e34c6c;
 }
 
-body.crtmode [data-nav-item] {
-  box-shadow:
-    3px 0 1px var(--crt-main-color-glow),
-    -3px 0 var(--crt-main-color-glow),
-    0 0 3px;
+[data-nav-item="alerts"],
+[data-ui-element="navAvatar"] {
+  & [data-ui-element="notificationBubble"] {
+    box-shadow: none;
+    background: var(--bg-color);
+  }
 }
 
-body.crtmode header.focus [data-nav-item],
-body.crtmode [data-nav-item]:hover {
-  box-shadow: none;
+[data-ui-element="userLevel"] {
+  background: var(--color-bg);
+  color: var(--main-color);
 }
 
-body.crtmode header.focus [data-nav-item="test"] {
-  box-shadow:
-    3px 0 1px color-mix(in srgb, #e34c6c 20%, transparent),
-    -3px 0 color-mix(in srgb, #e34c6c 30%, transparent),
-    0 0 3px;
+body.crtmode {
+  & [data-nav-item] {
+    box-shadow:
+      3px 0 1px var(--crt-main-color-glow),
+      -3px 0 var(--crt-main-color-glow),
+      0 0 3px;
+  }
+
+  & header[data-focused] [data-nav-item],
+  & [data-nav-item]:hover {
+    box-shadow: none;
+  }
+
+  & header[data-focused] [data-nav-item="test"] {
+    box-shadow:
+      3px 0 1px color-mix(in srgb, #e34c6c 20%, transparent),
+      -3px 0 color-mix(in srgb, #e34c6c 30%, transparent),
+      0 0 3px;
+  }
 }
diff --git a/frontend/static/themes/dots.css b/frontend/static/themes/dots.css
index 9204dd4b9a51..d13cb6bbe682 100644
--- a/frontend/static/themes/dots.css
+++ b/frontend/static/themes/dots.css
@@ -1,16 +1,11 @@
-nav {
-  gap: 0.5rem;
-}
-
-header.focus [data-nav-item],
-header.focus nav:before,
-header.focus nav:after {
-  background: var(--sub-color);
-}
-
 [data-nav-item] {
   border-radius: 10rem !important;
-  color: #121520;
+  --themable-button-text: #121520;
+  --themable-button-hover-text: var(--bg-color);
+}
+
+[data-nav-item]:hover {
+  filter: brightness(1.25);
 }
 
 [data-nav-item="test"] {
@@ -29,61 +24,72 @@ header.focus nav:after {
   background: #4acb8a;
 }
 
-header.focus [data-nav-item="login"],
-header.focus [data-nav-item="account"] {
-  background: transparent !important;
-}
-
 [data-nav-item="alerts"],
 [data-nav-item="login"],
 [data-nav-item="account"] {
-  color: var(--sub-color);
-}
-
-[data-nav-item="alerts"]:hover,
-[data-nav-item="login"]:hover,
-[data-nav-item="account"]:hover {
-  color: var(--text-color);
+  --themable-button-text: #393c73;
+  --themable-button-hover-text: var(--text-color);
 }
 
 [data-nav-item="account"] .xpBar {
   bottom: -0.75rem !important;
 }
 
-body.crtmode [data-nav-item="test"] {
-  box-shadow:
-    3px 0 1px color-mix(in srgb, #f94348 20%, transparent),
-    -3px 0 color-mix(in srgb, #f94348 30%, transparent),
-    0 0 3px;
-}
-
-body.crtmode [data-nav-item="leaderboards"] {
-  box-shadow:
-    3px 0 1px color-mix(in srgb, #9261ff 20%, transparent),
-    -3px 0 color-mix(in srgb, #9261ff 30%, transparent),
-    0 0 3px;
-}
-
-body.crtmode [data-nav-item="about"] {
-  box-shadow:
-    3px 0 1px color-mix(in srgb, #3cc5f8 20%, transparent),
-    -3px 0 color-mix(in srgb, #3cc5f8 30%, transparent),
-    0 0 3px;
-}
-
-body.crtmode [data-nav-item="settings"] {
-  box-shadow:
-    3px 0 1px color-mix(in srgb, #4acb8a 20%, transparent),
-    -3px 0 color-mix(in srgb, #4acb8a 30%, transparent),
-    0 0 3px;
-}
-
-body.crtmode header.focus [data-nav-item] {
-  box-shadow:
-    3px 0 1px var(--crt-sub-color-glow),
-    -3px 0 var(--crt-sub-color-glow);
-}
-
-body.crtmode header.focus [data-nav-item="account"] {
-  box-shadow: none;
+[data-nav-item="account"]:hover svg {
+  /* color: var(--text-color); */
+}
+
+header[data-focused] {
+  & [data-nav-item] {
+    --nav-focus-opacity: 1;
+    background: var(--sub-color);
+  }
+  & [data-nav-item="alerts"],
+  & [data-nav-item="login"],
+  & [data-nav-item="account"] {
+    --nav-focus-opacity: 0;
+    background: transparent;
+  }
+}
+
+body.crtmode {
+  & [data-nav-item="test"] {
+    box-shadow:
+      3px 0 1px color-mix(in srgb, #f94348 20%, transparent),
+      -3px 0 color-mix(in srgb, #f94348 30%, transparent),
+      0 0 3px;
+  }
+
+  & [data-nav-item="leaderboards"] {
+    box-shadow:
+      3px 0 1px color-mix(in srgb, #9261ff 20%, transparent),
+      -3px 0 color-mix(in srgb, #9261ff 30%, transparent),
+      0 0 3px;
+  }
+
+  & [data-nav-item="about"] {
+    box-shadow:
+      3px 0 1px color-mix(in srgb, #3cc5f8 20%, transparent),
+      -3px 0 color-mix(in srgb, #3cc5f8 30%, transparent),
+      0 0 3px;
+  }
+
+  & [data-nav-item="settings"] {
+    box-shadow:
+      3px 0 1px color-mix(in srgb, #4acb8a 20%, transparent),
+      -3px 0 color-mix(in srgb, #4acb8a 30%, transparent),
+      0 0 3px;
+  }
+
+  & header[data-focused] {
+    & [data-nav-item] {
+      box-shadow:
+        3px 0 1px var(--crt-sub-color-glow),
+        -3px 0 var(--crt-sub-color-glow);
+    }
+
+    & [data-nav-item="account"] {
+      box-shadow: none;
+    }
+  }
 }
diff --git a/frontend/static/themes/dracula.css b/frontend/static/themes/dracula.css
index 280443a728df..c428b5be7c25 100644
--- a/frontend/static/themes/dracula.css
+++ b/frontend/static/themes/dracula.css
@@ -1,21 +1,38 @@
 [data-nav-item="test"] {
   color: #ec75c4;
+  &:hover {
+    color: color-mix(in srgb, #ec75c4 75%, black 25%);
+  }
 }
 
 [data-nav-item="leaderboards"] {
   color: #8be9fd;
+  &:hover {
+    color: color-mix(in srgb, #8be9fd 75%, black 25%);
+  }
 }
 
 [data-nav-item="about"] {
   color: #50fa7b;
+  &:hover {
+    color: color-mix(in srgb, #50fa7b 75%, black 25%);
+  }
 }
 
 [data-nav-item="settings"] {
   color: #f1fa8c;
+  &:hover {
+    color: color-mix(in srgb, #f1fa8c 75%, black 25%);
+  }
 }
 
-[data-nav-item="alerts"],
-[data-nav-item="account"],
-[data-nav-item="login"] {
-  color: #ffb86c;
+[data-nav-item="alerts"] {
+  --themable-button-text: #ffb86c;
+  &:hover {
+    --themable-button-text: color-mix(
+      in srgb,
+      var(--themable-button-text) 75%,
+      black 25%
+    );
+  }
 }
diff --git a/frontend/static/themes/dualshot.css b/frontend/static/themes/dualshot.css
index 68c5d1f6dae7..6268706d2fa1 100644
--- a/frontend/static/themes/dualshot.css
+++ b/frontend/static/themes/dualshot.css
@@ -1,21 +1,38 @@
 [data-nav-item="test"] {
   color: #2884bb;
+  &:hover {
+    color: color-mix(in srgb, #2884bb 75%, white 25%);
+  }
 }
 
 [data-nav-item="leaderboards"] {
   color: #25a5a9;
+  &:hover {
+    color: color-mix(in srgb, #25a5a9 75%, white 25%);
+  }
 }
 
 [data-nav-item="about"] {
   color: #de9c24;
+  &:hover {
+    color: color-mix(in srgb, #de9c24 75%, white 25%);
+  }
 }
 
 [data-nav-item="settings"] {
   color: #d82231;
+  &:hover {
+    color: color-mix(in srgb, #d82231 75%, white 25%);
+  }
 }
 
 [data-nav-item="alerts"],
 [data-nav-item="account"],
 [data-nav-item="login"] {
-  color: #212222;
+  --themable-button-text: #212222;
+  --themable-button-hover-text: color-mix(
+    in srgb,
+    var(--themable-button-text) 75%,
+    white 20%
+  );
 }
diff --git a/frontend/static/themes/fire.css b/frontend/static/themes/fire.css
index e94d02b9afde..d4a78109cdae 100644
--- a/frontend/static/themes/fire.css
+++ b/frontend/static/themes/fire.css
@@ -34,7 +34,6 @@
   }
 }
 
-.button.discord::after,
 #caret,
 .pageSettings .section .buttons .button.active,
 .pageSettings .section.languages .buttons .language.active,
@@ -42,19 +41,26 @@
   animation: fire-bg 5s linear infinite;
 }
 
-header.focus .button.discord::after,
-header .button.discord.dotHidden::after {
-  animation-name: none !important;
+[data-ui-element="logo"] h1 {
+  color: var(--main-color);
 }
 
-#logo .bottom,
-header .config .group .buttons .textButton.active,
+[data-ui-element="logoSubtext"],
+[data-ui-element="logo"]:hover h1,
 #result .stats .group .bottom,
 [data-nav-item]:hover,
-header .config .group .buttons .textButton:hover,
-footer .textButton:hover,
-footer button.text:hover,
-a:not(.button):hover {
+footer button:hover,
+a:not(.button):not([data-ui-variant="button"]):hover {
+  animation: fire 5s linear infinite;
+}
+
+[data-ui-element="logo"]:hover svg {
+  color: transparent;
+  animation: fire 5s linear infinite;
+}
+
+[data-nav-item="account"]:hover svg {
+  color: transparent;
   animation: fire 5s linear infinite;
 }
 
diff --git a/frontend/static/themes/froyo.css b/frontend/static/themes/froyo.css
index 051d8e103320..55afbf35c8e3 100644
--- a/frontend/static/themes/froyo.css
+++ b/frontend/static/themes/froyo.css
@@ -1,21 +1,38 @@
 [data-nav-item="test"] {
   color: #ff7e73;
+  &:hover {
+    color: color-mix(in srgb, #ff7e73 75%, black 25%);
+  }
 }
 
 [data-nav-item="leaderboards"] {
   color: #f5c370;
+  &:hover {
+    color: color-mix(in srgb, #f5c370 75%, black 25%);
+  }
 }
 
 [data-nav-item="about"] {
   color: #08d9a3;
+  &:hover {
+    color: color-mix(in srgb, #08d9a3 75%, black 25%);
+  }
 }
 
 [data-nav-item="settings"] {
   color: #0ca5e2;
+  &:hover {
+    color: color-mix(in srgb, #0ca5e2 75%, black 25%);
+  }
 }
 
 [data-nav-item="alerts"],
 [data-nav-item="account"],
 [data-nav-item="login"] {
-  color: #875ac6;
+  --themable-button-text: #875ac6;
+  --themable-button-hover-text: color-mix(
+    in srgb,
+    var(--themable-button-text) 75%,
+    black 25%
+  );
 }
diff --git a/frontend/static/themes/fruit_chew.css b/frontend/static/themes/fruit_chew.css
index d6471c6f39e5..6dfe2a022b0e 100644
--- a/frontend/static/themes/fruit_chew.css
+++ b/frontend/static/themes/fruit_chew.css
@@ -1,21 +1,38 @@
 [data-nav-item="test"] {
   color: #a6bf50;
+  &:hover {
+    color: color-mix(in srgb, #a6bf50 75%, white 25%);
+  }
 }
 
 [data-nav-item="leaderboards"] {
   color: #c3921a;
+  &:hover {
+    color: color-mix(in srgb, #c3921a 75%, white 25%);
+  }
 }
 
 [data-nav-item="about"] {
   color: #b92221;
+  &:hover {
+    color: color-mix(in srgb, #b92221 75%, white 25%);
+  }
 }
 
 [data-nav-item="settings"] {
   color: #88b6ce;
+  &:hover {
+    color: color-mix(in srgb, #88b6ce 75%, white 25%);
+  }
 }
 
 [data-nav-item="alerts"],
 [data-nav-item="account"],
 [data-nav-item="login"] {
-  color: #661968;
+  --themable-button-text: #661968;
+  --themable-button-hover-text: color-mix(
+    in srgb,
+    var(--themable-button-text) 75%,
+    white 25%
+  );
 }
diff --git a/frontend/static/themes/fundamentals.css b/frontend/static/themes/fundamentals.css
index 94cb67db41e2..1f9ef4f245a3 100644
--- a/frontend/static/themes/fundamentals.css
+++ b/frontend/static/themes/fundamentals.css
@@ -1,3 +1,3 @@
-header #logo .bottom {
+[data-ui-element="logo"] h1 {
   color: #196378;
 }
diff --git a/frontend/static/themes/future_funk.css b/frontend/static/themes/future_funk.css
index df3f607f7175..83c76010d44d 100644
--- a/frontend/static/themes/future_funk.css
+++ b/frontend/static/themes/future_funk.css
@@ -1,21 +1,38 @@
 [data-nav-item="test"] {
   color: #f04e98;
+  &:hover {
+    color: color-mix(in srgb, #f04e98 75%, black 25%);
+  }
 }
 
 [data-nav-item="leaderboards"] {
   color: #f8bed6;
+  &:hover {
+    color: color-mix(in srgb, #f8bed6 75%, black 25%);
+  }
 }
 
 [data-nav-item="about"] {
   color: #f6eb61;
+  &:hover {
+    color: color-mix(in srgb, #f6eb61 75%, black 25%);
+  }
 }
 
 [data-nav-item="settings"] {
   color: #a4dbe8;
+  &:hover {
+    color: color-mix(in srgb, #a4dbe8 75%, black 25%);
+  }
 }
 
 [data-nav-item="alerts"],
 [data-nav-item="account"],
 [data-nav-item="login"] {
-  color: #a266ed;
+  --themable-button-text: #a266ed;
+  --themable-button-hover-text: color-mix(
+    in srgb,
+    var(--themable-button-text) 75%,
+    black 25%
+  );
 }
diff --git a/frontend/static/themes/graen.css b/frontend/static/themes/graen.css
index 6e10ab6c4c8a..a3ad7ec884b0 100644
--- a/frontend/static/themes/graen.css
+++ b/frontend/static/themes/graen.css
@@ -1,3 +1,6 @@
 [data-nav-item] {
   color: #601420;
+  &:hover {
+    color: var(--main-color);
+  }
 }
diff --git a/frontend/static/themes/grape.css b/frontend/static/themes/grape.css
index 100d24cfa22a..08f8aa161848 100644
--- a/frontend/static/themes/grape.css
+++ b/frontend/static/themes/grape.css
@@ -34,7 +34,6 @@
   }
 }
 
-.button.discord::after,
 #caret,
 .pageSettings .section .buttons .button.active,
 .pageSettings .section.languages .buttons .language.active,
@@ -42,19 +41,21 @@
   animation: grape-bg 5s linear infinite;
 }
 
-header.focus .button.discord::after,
-header .button.discord.dotHidden::after {
-  animation-name: none !important;
+[data-ui-element="logo"] h1 {
+  color: var(--main-color);
 }
 
-#logo .bottom,
-header .config .group .buttons .textButton.active,
+[data-ui-element="logoSubtext"],
+[data-ui-element="logo"]:hover h1,
 #result .stats .group .bottom,
 [data-nav-item]:hover,
-header .config .group .buttons .textButton:hover,
-footer .textButton:hover,
-footer button.text:hover,
-a:not(.button):hover {
+footer button:hover,
+a:not(.button):not([data-ui-variant="button"]):hover {
+  animation: grape 5s linear infinite;
+}
+
+[data-nav-item="account"]:hover svg {
+  color: transparent;
   animation: grape 5s linear infinite;
 }
 
diff --git a/frontend/static/themes/horizon.css b/frontend/static/themes/horizon.css
index f48f53692e62..995a67b78ac1 100644
--- a/frontend/static/themes/horizon.css
+++ b/frontend/static/themes/horizon.css
@@ -1,21 +1,38 @@
 [data-nav-item="test"] {
   color: #d55170;
+  &:hover {
+    color: color-mix(in srgb, #d55170 75%, white 25%);
+  }
 }
 
 [data-nav-item="leaderboards"] {
   color: #e4a88a;
+  &:hover {
+    color: color-mix(in srgb, #e4a88a 75%, white 25%);
+  }
 }
 
 [data-nav-item="about"] {
   color: #db886f;
+  &:hover {
+    color: color-mix(in srgb, #db886f 75%, white 25%);
+  }
 }
 
 [data-nav-item="settings"] {
   color: #db887a;
+  &:hover {
+    color: color-mix(in srgb, #db887a 75%, white 25%);
+  }
 }
 
 [data-nav-item="alerts"],
 [data-nav-item="account"],
 [data-nav-item="login"] {
-  color: #ffc819;
+  --themable-button-text: #ffc819;
+  --themable-button-hover-text: color-mix(
+    in srgb,
+    var(--themable-button-text) 75%,
+    white 25%
+  );
 }
diff --git a/frontend/static/themes/incognito.css b/frontend/static/themes/incognito.css
index f51a6bef6930..5c393ad991c6 100644
--- a/frontend/static/themes/incognito.css
+++ b/frontend/static/themes/incognito.css
@@ -1,26 +1,28 @@
-header #logo .text {
+header [data-ui-element="logoText"] {
   background: linear-gradient(
     90deg,
     var(--text-color) 64%,
     var(--main-color) 36%
   );
-  -webkit-background-clip: text;
+  background-clip: text;
   color: transparent;
   padding-bottom: 0.1em;
+  line-height: 1;
 }
 
-header #logo .icon svg path {
-  fill: var(--text-color);
+[data-ui-element="logoSubtext"] {
+  margin-top: 0em;
 }
 
-/* fix logo clipping */
-header #logo .icon {
+header [data-ui-element="logo"] svg {
+  color: var(--text-color);
   padding-bottom: 0.05em;
 }
+
+/* fix logo clipping */
 nav {
   padding-bottom: 0.2em;
 }
 header {
   margin-bottom: -0.1em;
 }
-/*  */
diff --git a/frontend/static/themes/ishtar.css b/frontend/static/themes/ishtar.css
index 1c0f22be93ed..cd16bfebb452 100644
--- a/frontend/static/themes/ishtar.css
+++ b/frontend/static/themes/ishtar.css
@@ -1,3 +1,3 @@
-header #logo .bottom {
+[data-ui-element="logo"] h1 {
   color: #fae1c3;
 }
diff --git a/frontend/static/themes/lavender.css b/frontend/static/themes/lavender.css
index fd5c6a8357f5..2efeffff3610 100644
--- a/frontend/static/themes/lavender.css
+++ b/frontend/static/themes/lavender.css
@@ -1,25 +1,24 @@
 [data-nav-item] {
   border-radius: 10rem !important;
-  background: var(--text-color);
-  color: var(--main-color);
+  --themable-button-bg: var(--text-color);
+  --themable-button-text: var(--main-color);
+  --themable-button-hover-bg: var(--text-color);
+  --themable-button-hover-text: var(--bg-color);
 }
 
-[data-nav-item]:hover {
-  color: var(--bg-color);
-  background: var(--text-color);
+[data-nav-item="alerts"],
+[data-ui-element="navAvatar"] {
+  & [data-ui-element="notificationBubble"] {
+    box-shadow: none;
+    background: var(--bg-color);
+  }
 }
 
-nav .notificationBubble {
-  box-shadow: none;
-  background: var(--color-bg);
-  padding-right: 0.2em;
-  right: 0.85em;
-  left: 2.75em;
-}
-
-nav .level {
-  background: var(--color-bg);
-  color: var(--text-color);
+[data-ui-element="userLevel"] {
+  --themable-flash-color: var(--text-color);
+  --themable-bg-color: var(--bg-color);
+  --themable-text-color: var(--main-color);
+  --themable-hover-bg-color: var(--bg-color);
 }
 
 body.crtmode [data-nav-item] {
@@ -28,3 +27,13 @@ body.crtmode [data-nav-item] {
     -3px 0 var(--crt-text-color-glow),
     0 0 3px;
 }
+
+header[data-focused] {
+  [data-nav-item="test"],
+  [data-nav-item="leaderboards"],
+  [data-nav-item="about"],
+  [data-nav-item="settings"] {
+    /* --themable-button-bg: var(--sub-color); */
+    --nav-focus-opacity: 0.5;
+  }
+}
diff --git a/frontend/static/themes/metropolis.css b/frontend/static/themes/metropolis.css
index 27ef783c69e8..39196897c760 100644
--- a/frontend/static/themes/metropolis.css
+++ b/frontend/static/themes/metropolis.css
@@ -1,4 +1,4 @@
-header #logo .bottom {
+[data-ui-element="logo"] h1 {
   color: #f4bc46;
 }
 
@@ -6,5 +6,5 @@ header #logo .bottom {
 [data-nav-item="leaderboards"],
 [data-nav-item="about"],
 [data-nav-item="settings"] {
-  color: #d44729;
+  --themable-button-text: #d44729;
 }
diff --git a/frontend/static/themes/milkshake.css b/frontend/static/themes/milkshake.css
index b5d50d86e722..d34b62013923 100644
--- a/frontend/static/themes/milkshake.css
+++ b/frontend/static/themes/milkshake.css
@@ -1,21 +1,38 @@
 [data-nav-item="test"] {
   color: #f19dac;
+  &:hover {
+    color: color-mix(in srgb, #f19dac 75%, black 25%);
+  }
 }
 
 [data-nav-item="leaderboards"] {
   color: #f6f4a0;
+  &:hover {
+    color: color-mix(in srgb, #f6f4a0 75%, black 25%);
+  }
 }
 
 [data-nav-item="about"] {
   color: #73e4d0;
+  &:hover {
+    color: color-mix(in srgb, #73e4d0 75%, black 25%);
+  }
 }
 
 [data-nav-item="settings"] {
   color: #61cfe6;
+  &:hover {
+    color: color-mix(in srgb, #61cfe6 75%, black 25%);
+  }
 }
 
 [data-nav-item="alerts"],
 [data-nav-item="account"],
 [data-nav-item="login"] {
-  color: #ba96db;
+  --themable-button-text: #ba96db;
+  --themable-button-hover-text: color-mix(
+    in srgb,
+    var(--themable-button-text) 75%,
+    black 25%
+  );
 }
diff --git a/frontend/static/themes/modern_ink.css b/frontend/static/themes/modern_ink.css
index d877c2cdb282..9ec47c901fc4 100644
--- a/frontend/static/themes/modern_ink.css
+++ b/frontend/static/themes/modern_ink.css
@@ -1,7 +1,12 @@
 [data-nav-item="test"],
 [data-nav-item="account"],
 [data-nav-item="login"] {
-  color: #ff0000;
+  --themable-button-text: #ff0000;
+  --themable-button-hover-text: color-mix(
+    in srgb,
+    var(--themable-button-text) 75%,
+    black 25%
+  );
 }
 
 .word.error {
diff --git a/frontend/static/themes/moonlight.css b/frontend/static/themes/moonlight.css
index d46c47423296..c76ad99f3125 100644
--- a/frontend/static/themes/moonlight.css
+++ b/frontend/static/themes/moonlight.css
@@ -1,13 +1,11 @@
 /*inspired by GMK MOONLIGHT*/
 
-nav {
-  gap: 0.5rem;
-}
-
-header.focus [data-nav-item],
-header.focus nav:before,
-header.focus nav:after {
-  background: var(--bg-color);
+header[data-focused] {
+  & [data-nav-item],
+  & nav:before,
+  & nav:after {
+    background: var(--bg-color);
+  }
 }
 
 [data-nav-item="test"],
@@ -17,26 +15,25 @@ header.focus nav:after {
   border-radius: rem !important;
   color: #191f28 !important;
   background: #c69f68;
-}
-[data-nav-item="test"]:hover,
-[data-nav-item="leaderboards"]:hover,
-[data-nav-item="about"]:hover,
-[data-nav-item="settings"]:hover {
-  border-radius: rem !important;
-  color: #4b5975 !important;
-  transition: 0.25s;
+  &:hover {
+    border-radius: rem !important;
+    color: #4b5975 !important;
+    transition: 0.25s;
+  }
 }
 
-body.crtmode [data-nav-item="test"],
-body.crtmode [data-nav-item="leaderboards"],
-body.crtmode [data-nav-item="about"],
-body.crtmode [data-nav-item="settings"] {
-  box-shadow:
-    3px 0 1px color-mix(in srgb, #c69f68 20%, transparent),
-    -3px 0 color-mix(in srgb, #c69f68 30%, transparent),
-    0 0 3px;
-}
+body.crtmode {
+  & [data-nav-item="test"],
+  & [data-nav-item="leaderboards"],
+  & [data-nav-item="about"],
+  & [data-nav-item="settings"] {
+    box-shadow:
+      3px 0 1px color-mix(in srgb, #c69f68 20%, transparent),
+      -3px 0 color-mix(in srgb, #c69f68 30%, transparent),
+      0 0 3px;
+  }
 
-body.crtmode header.focus [data-nav-item] {
-  box-shadow: none;
+  & header[data-focused] [data-nav-item] {
+    box-shadow: none;
+  }
 }
diff --git a/frontend/static/themes/mr_sleeves.css b/frontend/static/themes/mr_sleeves.css
index 632664de107b..50c0e281daa4 100644
--- a/frontend/static/themes/mr_sleeves.css
+++ b/frontend/static/themes/mr_sleeves.css
@@ -1,3 +1,3 @@
-header #logo .bottom {
+[data-ui-element="logo"] h1 {
   color: #8fadc9;
 }
diff --git a/frontend/static/themes/oblivion.css b/frontend/static/themes/oblivion.css
index 183ecf525289..791450a720d2 100644
--- a/frontend/static/themes/oblivion.css
+++ b/frontend/static/themes/oblivion.css
@@ -1,21 +1,38 @@
 [data-nav-item="test"] {
   color: #9a90b4;
+  &:hover {
+    color: color-mix(in srgb, #9a90b4 75%, white 25%);
+  }
 }
 
 [data-nav-item="leaderboards"] {
   color: #8db14b;
+  &:hover {
+    color: color-mix(in srgb, #8db14b 75%, white 25%);
+  }
 }
 
 [data-nav-item="about"] {
   color: #fca321;
+  &:hover {
+    color: color-mix(in srgb, #fca321 75%, white 25%);
+  }
 }
 
 [data-nav-item="settings"] {
   color: #2984a5;
+  &:hover {
+    color: color-mix(in srgb, #2984a5 75%, white 25%);
+  }
 }
 
 [data-nav-item="alerts"],
 [data-nav-item="account"],
 [data-nav-item="login"] {
-  color: #dd452e;
+  --themable-button-text: #dd452e;
+  --themable-button-hover-text: color-mix(
+    in srgb,
+    var(--themable-button-text) 75%,
+    white 25%
+  );
 }
diff --git a/frontend/static/themes/phantom.css b/frontend/static/themes/phantom.css
index 5f85e363fed7..f26a15c0ac80 100644
--- a/frontend/static/themes/phantom.css
+++ b/frontend/static/themes/phantom.css
@@ -54,17 +54,17 @@
   --untyped-letter-color: #565f89;
 }
 
-header:not(.focus) #logo .text {
+header:not([data-focused]) [data-ui-element="logoText"] {
   color: var(--text-color);
   animation: phantom-glow 3s infinite alternate;
 }
 
-header #logo .text .top {
+header [data-ui-element="logoSubtext"] {
   color: inherit;
   animation: none;
 }
 
-header #logo .icon {
+header [data-ui-element="logo"] svg {
   color: var(--main-color) !important;
 }
 
@@ -107,17 +107,27 @@ input[type="submit"]:hover {
   animation: phantom-bg 3s linear infinite;
 }
 
-#logo .bottom,
-header .config .group .buttons .textButton.active,
+[data-ui-element="logoSubtext"],
 #result .stats .group .bottom,
 [data-nav-item]:hover,
-header .config .group .buttons .textButton:hover,
-footer .textButton:hover,
-footer button.text:hover,
-a:not(.button):hover {
+a:not(.button):not([data-ui-variant="button"]):hover {
   animation: phantom-glow 3s linear infinite;
 }
 
+footer a:hover,
+footer button:hover {
+  animation: phantom-glow 3s linear infinite;
+  background: none;
+}
+
+[data-nav-item]:hover {
+  background: none;
+}
+
+#testConfig button:hover {
+  background: none;
+}
+
 .afk,
 .timeToday,
 #words .word letter.correct,
@@ -141,3 +151,9 @@ a:not(.button):hover {
 #words.highlight-off .word.typed letter {
   animation: phantom-glow 5s linear infinite;
 }
+
+[data-ui-element="accountMenu"] a:hover,
+[data-ui-element="accountMenu"] button:hover {
+  animation: none;
+  background: var(--text-color);
+}
diff --git a/frontend/static/themes/rainbow_trail.css b/frontend/static/themes/rainbow_trail.css
index 6165ae82c35c..918bc39b4011 100644
--- a/frontend/static/themes/rainbow_trail.css
+++ b/frontend/static/themes/rainbow_trail.css
@@ -1,4 +1,4 @@
-header #logo .text {
+header [data-ui-element="logoText"] {
   background: linear-gradient(
     90deg,
     #60b6ce,
@@ -13,26 +13,17 @@ header #logo .text {
   );
   background-size: 500% auto;
   background-clip: text;
-  -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   animation: rainbow-gradient 30s alternate ease-in-out infinite;
   padding-bottom: 0.1em;
+  line-height: 1;
 }
 
-/* fix logo clipping */
-header #logo .icon {
-  padding-bottom: 0.05em;
+[data-ui-element="logoSubtext"] {
+  margin-top: 0em;
 }
-nav {
-  padding-bottom: 0.2em;
-}
-
-header {
-  margin-bottom: -0.1em;
-}
-/*  */
 
-header #logo .top,
+header [data-ui-element="logoSubtext"],
 .view-account .levelAndBar .level,
 [aria-label][data-balloon-pos]::after {
   -webkit-text-fill-color: initial;
@@ -48,7 +39,12 @@ button.text:hover,
 #nextTestButton:hover > i,
 #practiseWordsButton:hover > i,
 #watchReplayButton:hover > i,
-#watchVideoAdButton:hover > i {
+#watchVideoAdButton:hover > i,
+footer a:hover,
+footer a:hover > i,
+footer button:hover,
+footer button:hover > i,
+footer button:hover > .relative > i {
   background: linear-gradient(
     90deg,
     #60b6ce,
@@ -63,20 +59,11 @@ button.text:hover,
   );
   background-size: 500% auto;
   background-clip: text;
-  -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   animation: rainbow-gradient 5s alternate ease-in-out infinite;
   transition: all 1s ease;
 }
 
-.current-theme.textButton {
-  animation: rainbow-infinite-loop 5s alternate ease-in-out infinite;
-}
-
-.current-theme.textButton:hover {
-  -webkit-text-fill-color: initial;
-}
-
 #liveStatsTextTop.timerMain,
 #liveStatsTextBottom.timerMain,
 #liveStatsMini.timerMain {
@@ -113,7 +100,8 @@ button.text:hover,
 }
 
 .button:hover,
-button:not(.textButton):not(.text):hover {
+button:not(.textButton):not(.text):not([data-ui-variant="text"]):hover,
+[data-nav-item]:hover {
   animation: rainbow-button 2s alternate ease-in-out infinite;
 }
 
@@ -130,6 +118,10 @@ button:not(.textButton):not(.text):hover {
   color: #111111;
 }
 
+footer button:hover {
+  animation: none !important;
+}
+
 @keyframes rainbow {
   0% {
     color: #60b6ce;
diff --git a/frontend/static/themes/retrocast.css b/frontend/static/themes/retrocast.css
index d87cc521d717..b10830631272 100644
--- a/frontend/static/themes/retrocast.css
+++ b/frontend/static/themes/retrocast.css
@@ -2,14 +2,25 @@
 [data-nav-item="leaderboards"],
 [data-nav-item="about"] {
   color: #88dbdf;
+  &:hover {
+    color: color-mix(in srgb, #88dbdf 75%, black 25%);
+  }
 }
 
 [data-nav-item="settings"] {
   color: #ff585d;
+  &:hover {
+    color: color-mix(in srgb, #ff585d 75%, black 25%);
+  }
 }
 
 [data-nav-item="alerts"],
 [data-nav-item="account"],
 [data-nav-item="login"] {
-  color: #f3e03b;
+  --themable-button-text: #f3e03b;
+  --themable-button-hover-text: color-mix(
+    in srgb,
+    var(--themable-button-text) 75%,
+    black 25%
+  );
 }
diff --git a/frontend/static/themes/rgb.css b/frontend/static/themes/rgb.css
index 23cccad92c50..482807bdc3dc 100644
--- a/frontend/static/themes/rgb.css
+++ b/frontend/static/themes/rgb.css
@@ -61,10 +61,9 @@
   }
 }
 
-.button.discord::after,
-.pageSettings .section .buttons .button.active,
+.pageSettings .section .buttons button.active,
 .pageSettings .section.languages .buttons .language.active,
-.pageAccount .group.filterButtons .buttons .button.active {
+.pageAccount .group.filterButtons .buttons button.active {
   animation: rgb-bg 5s linear infinite;
 }
 
@@ -72,20 +71,22 @@
   animation: rgb-bg 5s linear infinite !important;
 }
 
-header.focus .button.discord::after,
-header .button.discord.dotHidden::after {
-  animation-name: none !important;
+header[data-focused] {
+  & [data-ui-element="logoSubtext"] {
+    animation: none;
+  }
+  & [data-ui-element="logo"] svg path {
+    animation: none;
+  }
 }
 
-#logo .bottom,
-header .config .group .buttons .textButton.active,
+[data-ui-element="logoSubtext"],
 #result .stats .group .bottom,
 [data-nav-item]:hover,
-header .config .group .buttons .textButton:hover,
-footer .textButton:hover,
-footer button.text:hover,
-a:not(.button):hover,
-#words.flipped .word {
+footer button:hover,
+#words.flipped .word,
+footer a:hover,
+a:not(.button):not([data-ui-variant="button"]):hover {
   animation: rgb 5s linear infinite;
 }
 
@@ -98,6 +99,12 @@ a:not(.button):hover,
   --untyped-letter-animation: rgb 5s linear infinite;
 }
 
-header #logo path {
+header [data-ui-element="logo"] svg path,
+header [data-nav-item="account"]:hover [data-ui-element="navAvatar"] svg path {
   animation: rgb-fill 5s linear infinite;
 }
+
+[data-ui-element="accountMenu"] a:hover,
+[data-ui-element="accountMenu"] button:hover {
+  animation: none;
+}
diff --git a/frontend/static/themes/sewing_tin_light.css b/frontend/static/themes/sewing_tin_light.css
index c11d563aeafd..870dd1ce59aa 100644
--- a/frontend/static/themes/sewing_tin_light.css
+++ b/frontend/static/themes/sewing_tin_light.css
@@ -6,9 +6,9 @@
   color: #c6915e;
 }
 
-header #logo .text {
+header [data-ui-element="logoText"] {
   background-color: #ffffff; /* fallback */
-  background: -webkit-linear-gradient(
+  background: linear-gradient(
     #2d2076,
     #2d2076 25%,
     #2e3395 25%,
@@ -19,25 +19,13 @@ header #logo .text {
     #385eca
   );
   background-clip: text;
-  -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   padding-bottom: 0.1em;
+  line-height: 1;
 }
 
-/* fix logo clipping */
-header #logo .icon {
-  padding-bottom: 0.05em;
-}
-nav {
-  padding-bottom: 0.2em;
-}
-
-header {
-  margin-bottom: -0.1em;
-}
-/*  */
-
-header #logo .text .top {
+[data-ui-element="logoSubtext"] {
+  margin-top: 0em;
   /* prevent it from being transparent */
   -webkit-text-fill-color: #385eca;
 }
diff --git a/frontend/static/themes/shadow.css b/frontend/static/themes/shadow.css
index 7e186fdad682..0a34c8ea72ca 100644
--- a/frontend/static/themes/shadow.css
+++ b/frontend/static/themes/shadow.css
@@ -1,8 +1,8 @@
-header #logo .icon {
+header [data-ui-element="logo"] svg {
   color: #8c3230;
 }
 
-header #logo .text {
+header [data-ui-element="logoText"] {
   color: #557d8d;
 }
 
@@ -26,17 +26,18 @@ header #logo .text {
   color: white;
 }
 
-header .config .group .buttons .textButton.active,
 #result .stats .group,
 [data-nav-item]:hover,
-header .config .group .buttons .textButton:hover,
-footer .textButton:hover,
-footer button.text:hover,
-a:not(.button):hover {
+footer button:hover,
+a:not(.button):not([data-ui-variant="button"]):hover {
+  animation: shadow-repeat 3s linear infinite forwards;
+}
+
+[data-nav-item="account"]:hover svg {
+  color: currentColor;
   animation: shadow-repeat 3s linear infinite forwards;
 }
 
-#logo,
 #typingTest .word letter.correct,
 #typingTest #words.highlight-word .word.typed letter.correct,
 #typingTest #words.highlight-next-word .word.typed letter.correct,
diff --git a/frontend/static/themes/snes.css b/frontend/static/themes/snes.css
index 2bec7c474d5c..de84a0e10d1a 100644
--- a/frontend/static/themes/snes.css
+++ b/frontend/static/themes/snes.css
@@ -1,16 +1,16 @@
-nav {
-  gap: 0.5rem;
-}
-
-header.focus [data-nav-item],
-header.focus nav:before,
-header.focus nav:after {
+header[data-focused] [data-nav-item],
+header[data-focused] nav:before,
+header[data-focused] nav:after {
   background: #99989f;
 }
 
 [data-nav-item] {
   border-radius: 10rem !important;
-  color: var(--bg-color);
+  --themable-button-text: var(--bg-color);
+}
+
+[data-nav-item]:hover {
+  filter: brightness(1.25);
 }
 
 [data-nav-item="test"] {
@@ -30,63 +30,93 @@ header.focus nav:after {
 }
 
 [data-nav-item="alerts"],
-[data-nav-item="account"],
 [data-nav-item="login"] {
   background: #9f8ad4;
 }
 
-nav .notificationBubble {
-  box-shadow: none;
-  padding-right: 0.2em;
-  right: 0.85em;
-  left: 2.75em;
+[data-nav-item="account"]:hover [data-ui-element="navAvatar"] svg {
+  fill: var(--bg-color);
 }
 
-nav .level {
-  background: var(--color-bg);
-  color: var(--main-color);
+[data-nav-item="alerts"],
+[data-ui-element="navAvatar"] {
+  & [data-ui-element="notificationBubble"] {
+    box-shadow: none;
+    background: var(--bg-color);
+  }
 }
 
-body.crtmode [data-nav-item="test"] {
-  box-shadow:
-    3px 0 1px color-mix(in srgb, #553d94 20%, transparent),
-    -3px 0 color-mix(in srgb, #553d94 30%, transparent),
-    0 0 3px;
+[data-nav-item="account"] {
+  --themable-button-text: var(--bg-color);
+  --themable-button-bg: var(--sub-color);
+  --themable-button-hover-bg: color-mix(
+    in srgb,
+    var(--sub-color) 75%,
+    white 15%
+  );
+  --themable-button-hover-text: color-mix(
+    in srgb,
+    var(--themable-button-text) 75%,
+    white 15%
+  );
+  [data-ui-element="userLevel"] {
+    background: var(--themable-button-text);
+    color: var(--themable-button-bg);
+  }
 }
 
-body.crtmode [data-nav-item="leaderboards"] {
-  box-shadow:
-    3px 0 1px color-mix(in srgb, #6851a4 20%, transparent),
-    -3px 0 color-mix(in srgb, #6851a4 30%, transparent),
-    0 0 3px;
+header[data-focused] {
+  [data-nav-item="test"],
+  [data-nav-item="leaderboards"],
+  [data-nav-item="about"],
+  [data-nav-item="settings"] {
+    --themable-button-bg: var(--sub-alt-color);
+    --nav-focus-opacity: 0.5;
+  }
 }
 
-body.crtmode [data-nav-item="about"] {
-  box-shadow:
-    3px 0 1px color-mix(in srgb, #7962b3 20%, transparent),
-    -3px 0 color-mix(in srgb, #7962b3 30%, transparent),
-    0 0 3px;
-}
+body.crtmode {
+  & [data-nav-item="test"] {
+    box-shadow:
+      3px 0 1px color-mix(in srgb, #553d94 20%, transparent),
+      -3px 0 color-mix(in srgb, #553d94 30%, transparent),
+      0 0 3px;
+  }
 
-body.crtmode [data-nav-item="settings"] {
-  box-shadow:
-    3px 0 1px color-mix(in srgb, #8c76c3 20%, transparent),
-    -3px 0 color-mix(in srgb, #8c76c3 30%, transparent),
-    0 0 3px;
-}
+  & [data-nav-item="leaderboards"] {
+    box-shadow:
+      3px 0 1px color-mix(in srgb, #6851a4 20%, transparent),
+      -3px 0 color-mix(in srgb, #6851a4 30%, transparent),
+      0 0 3px;
+  }
 
-body.crtmode [data-nav-item="alerts"],
-body.crtmode [data-nav-item="account"],
-body.crtmode [data-nav-item="login"] {
-  box-shadow:
-    3px 0 1px color-mix(in srgb, #9f8ad4 20%, transparent),
-    -3px 0 color-mix(in srgb, #9f8ad4 30%, transparent),
-    0 0 3px;
-}
+  & [data-nav-item="about"] {
+    box-shadow:
+      3px 0 1px color-mix(in srgb, #7962b3 20%, transparent),
+      -3px 0 color-mix(in srgb, #7962b3 30%, transparent),
+      0 0 3px;
+  }
+
+  & [data-nav-item="settings"] {
+    box-shadow:
+      3px 0 1px color-mix(in srgb, #8c76c3 20%, transparent),
+      -3px 0 color-mix(in srgb, #8c76c3 30%, transparent),
+      0 0 3px;
+  }
+
+  & [data-nav-item="alerts"],
+  & [data-nav-item="account"],
+  & [data-nav-item="login"] {
+    box-shadow:
+      3px 0 1px color-mix(in srgb, #9f8ad4 20%, transparent),
+      -3px 0 color-mix(in srgb, #9f8ad4 30%, transparent),
+      0 0 3px;
+  }
 
-body.crtmode header.focus [data-nav-item] {
-  box-shadow:
-    3px 0 1px color-mix(in srgb, #99989f 20%, transparent),
-    -3px 0 color-mix(in srgb, #99989f 30%, transparent),
-    0 0 3px;
+  & header[data-focused] [data-nav-item] {
+    box-shadow:
+      3px 0 1px color-mix(in srgb, #99989f 20%, transparent),
+      -3px 0 color-mix(in srgb, #99989f 30%, transparent),
+      0 0 3px;
+  }
 }
diff --git a/frontend/static/themes/solarized_osaka.css b/frontend/static/themes/solarized_osaka.css
index 166020bafbde..86bc806960ad 100644
--- a/frontend/static/themes/solarized_osaka.css
+++ b/frontend/static/themes/solarized_osaka.css
@@ -3,20 +3,14 @@
   --untyped-letter-color: #586e75;
 }
 
-header #logo {
-  color: var(--text-color);
-}
-
-header #logo .icon {
-  color: var(--text-color) !important;
-}
-
 kbd {
   color: var(--text-color);
   background-color: var(--sub-alt-color);
 }
 
 button.text:hover,
+button[data-ui-variant="text"]:hover,
+a:not(.button):not([data-ui-variant="button"]):hover,
 .button.text:hover,
 .textButton:hover {
   color: var(--caret-color);
@@ -28,7 +22,7 @@ button.text.active,
   color: var(--main-color);
 }
 
-button:not(.textButton):hover,
+button:not(.textButton):not([data-ui-variant="text"]):hover,
 .button:hover,
 input[type="button"]:hover,
 input[type="reset"]:hover,
diff --git a/frontend/static/themes/stealth.css b/frontend/static/themes/stealth.css
index eab4ed4318d5..c078db40ece8 100644
--- a/frontend/static/themes/stealth.css
+++ b/frontend/static/themes/stealth.css
@@ -1,5 +1,8 @@
 [data-nav-item="settings"] {
   color: #e25303;
+  &:hover {
+    color: color-mix(in srgb, #e25303 75%, black 25%);
+  }
 }
 #liveStatsTextTop {
   color: #5e676e;
diff --git a/frontend/static/themes/suisei.css b/frontend/static/themes/suisei.css
index f24cdc685fd3..eb69a9f698f7 100644
--- a/frontend/static/themes/suisei.css
+++ b/frontend/static/themes/suisei.css
@@ -10,34 +10,27 @@
   }
 }
 
-header #logo .text {
+[data-ui-element="logoText"] {
   background: linear-gradient(120deg, var(--main-color), var(--sub-color));
   background-clip: text;
-  -webkit-background-clip: text;
   color: transparent;
   padding-bottom: 0.1em;
+  line-height: 1;
 }
 
-/* fix logo clipping */
-header #logo .icon {
-  padding-bottom: 0.05em;
-}
-header {
-  margin-bottom: -0.1em;
-}
-/*  */
-
-header #logo .text .top {
+[data-ui-element="logoSubtext"] {
+  margin-top: 0em;
   color: var(--main-color);
 }
-header.focus #logo .text {
+
+header[data-focused] [data-ui-element="logoText"] {
   background: linear-gradient(-120deg, var(--main-color), var(--sub-color));
   background-clip: text;
   -webkit-text-fill-color: transparent;
   color: transparent;
   padding-bottom: 0.1em;
 }
-header.focus [data-nav-item] {
+header[data-focused] [data-nav-item] {
   background: none;
 }
 [data-nav-item] {
diff --git a/frontend/static/themes/sunset.css b/frontend/static/themes/sunset.css
index 14eb74444983..e42e19ba6ddc 100644
--- a/frontend/static/themes/sunset.css
+++ b/frontend/static/themes/sunset.css
@@ -3,11 +3,7 @@
 [data-nav-item="about"],
 [data-nav-item="settings"] {
   color: #f79777;
-}
-
-[data-nav-item="test"]:hover,
-[data-nav-item="leaderboards"]:hover,
-[data-nav-item="about"]:hover,
-[data-nav-item="settings"]:hover {
-  color: #ffca99;
+  &:hover {
+    color: #ffca99;
+  }
 }
diff --git a/frontend/static/themes/taro.css b/frontend/static/themes/taro.css
index 026de5ce55b9..44eeec5abc5b 100644
--- a/frontend/static/themes/taro.css
+++ b/frontend/static/themes/taro.css
@@ -5,11 +5,20 @@
 [data-nav-item="test"] {
   background: var(--caret-color);
   border-radius: 50%;
+  --nav-focus-opacity: 1;
 }
 
 [data-nav-item="leaderboards"] {
   background: var(--error-color);
   border-radius: 50%;
+  --nav-focus-opacity: 1;
+}
+
+header[data-focused] {
+  & [data-nav-item="test"],
+  & [data-nav-item="leaderboards"] {
+    color: transparent;
+  }
 }
 
 body.crtmode [data-nav-item="test"] {
diff --git a/frontend/static/themes/terrazzo.css b/frontend/static/themes/terrazzo.css
index 710e3a71e0c0..08f2b33cba72 100644
--- a/frontend/static/themes/terrazzo.css
+++ b/frontend/static/themes/terrazzo.css
@@ -1,5 +1,5 @@
 /* hide buttons while typing */
-header.focus nav > .textButton {
+header[data-focused] [data-nav-item] {
   background: none;
 }
 
@@ -37,50 +37,54 @@ header.focus nav > .textButton {
   opacity: 0.8;
 }
 
-body.crtmode [data-nav-item="test"] {
-  box-shadow:
-    3px 0 1px color-mix(in srgb, var(--sub-color) 20%, transparent),
-    -3px 0 color-mix(in srgb, var(--sub-color) 30%, transparent),
-    0 0 3px;
+body.crtmode {
+  & [data-nav-item="test"] {
+    box-shadow:
+      3px 0 1px color-mix(in srgb, var(--sub-color) 20%, transparent),
+      -3px 0 color-mix(in srgb, var(--sub-color) 30%, transparent),
+      0 0 3px;
+  }
+  & [data-nav-item="leaderboards"] {
+    box-shadow:
+      3px 0 1px color-mix(in srgb, #9a7a61 20%, transparent),
+      -3px 0 color-mix(in srgb, #9a7a61 30%, transparent),
+      0 0 3px;
+  }
+  & [data-nav-item="about"] {
+    box-shadow:
+      3px 0 1px color-mix(in srgb, var(--main-color) 20%, transparent),
+      -3px 0 color-mix(in srgb, var(--main-color) 30%, transparent),
+      0 0 3px;
+  }
+  & [data-nav-item="settings"] {
+    box-shadow:
+      3px 0 1px color-mix(in srgb, var(--text-color) 20%, transparent),
+      -3px 0 color-mix(in srgb, var(--text-color) 30%, transparent),
+      0 0 3px;
+  }
+  & header[data-focused] [data-nav-item] {
+    box-shadow: none;
+  }
 }
-body.crtmode [data-nav-item="leaderboards"] {
-  box-shadow:
-    3px 0 1px color-mix(in srgb, #9a7a61 20%, transparent),
-    -3px 0 color-mix(in srgb, #9a7a61 30%, transparent),
-    0 0 3px;
-}
-body.crtmode [data-nav-item="about"] {
-  box-shadow:
-    3px 0 1px color-mix(in srgb, var(--main-color) 20%, transparent),
-    -3px 0 color-mix(in srgb, var(--main-color) 30%, transparent),
-    0 0 3px;
-}
-body.crtmode [data-nav-item="settings"] {
-  box-shadow:
-    3px 0 1px color-mix(in srgb, var(--text-color) 20%, transparent),
-    -3px 0 color-mix(in srgb, var(--text-color) 30%, transparent),
-    0 0 3px;
-}
-body.crtmode header.focus nav > .textButton {
-  box-shadow: none;
-}
-
 /* color individual parts of the mt logo */
-#logo .icon svg path:nth-child(2),
-#logo .icon svg path:nth-child(8) {
-  fill: var(--text-color);
-}
-#logo .icon svg path:nth-child(1),
-#logo .icon svg path:nth-child(6),
-#logo .icon svg path:nth-child(7) {
-  fill: var(--sub-color);
-}
-#logo .icon svg path:nth-child(3),
-#logo .icon svg path:nth-child(4),
-#logo .icon svg path:nth-child(5) {
-  fill: var(--main-color);
-}
 
-#logo .icon svg path:nth-child(9) {
-  fill: #9a7a61;
+[data-ui-element="logo"] svg path {
+  &:nth-child(2),
+  &:nth-child(8) {
+    fill: var(--text-color);
+  }
+  &:nth-child(1),
+  &:nth-child(6),
+  &:nth-child(7) {
+    fill: var(--sub-color);
+  }
+  &:nth-child(3),
+  &:nth-child(4),
+  &:nth-child(5) {
+    fill: var(--main-color);
+  }
+
+  &:nth-child(9) {
+    fill: #9a7a61;
+  }
 }
diff --git a/frontend/static/themes/trackday.css b/frontend/static/themes/trackday.css
index 783eb9a48a38..bc1e096140dc 100644
--- a/frontend/static/themes/trackday.css
+++ b/frontend/static/themes/trackday.css
@@ -1,11 +1,20 @@
 [data-nav-item="test"] {
   color: #e0513e;
+  &:hover {
+    color: color-mix(in srgb, #e0513e 75%, white 25%);
+  }
 }
 
 [data-nav-item="leaderboards"] {
   color: #ccc500;
+  &:hover {
+    color: color-mix(in srgb, #ccc500 75%, white 25%);
+  }
 }
 
 [data-nav-item="about"] {
   color: #cfcfcf;
+  &:hover {
+    color: color-mix(in srgb, #cfcfcf 75%, white 25%);
+  }
 }
diff --git a/frontend/static/themes/trance.css b/frontend/static/themes/trance.css
index c41881454f69..451df1ad0705 100644
--- a/frontend/static/themes/trance.css
+++ b/frontend/static/themes/trance.css
@@ -24,25 +24,26 @@
 
 .button.discord::after,
 #caret,
-.pageSettings .section .buttons .button.active,
+.pageSettings .section .buttons button.active,
 .pageSettings .section.languages .buttons .language.active,
-.pageAccount .group.filterButtons .buttons .button.active {
+.pageAccount .group.filterButtons .buttons button.active {
   animation: trance-bg 5s linear infinite;
 }
 
-header.focus .button.discord::after,
+header[data-focused] .button.discord::after,
 header .button.discord.dotHidden::after {
   animation-name: none !important;
 }
 
-#logo .bottom,
-header .config .group .buttons .textButton.active,
 #result .stats .group .bottom,
 [data-nav-item]:hover,
-header .config .group .buttons .textButton:hover,
-footer .textButton:hover,
-footer button.text:hover,
-a:not(.button):hover {
+footer button:hover,
+a:not(.button):not([data-ui-variant="button"]):hover {
+  animation: trance 5s linear infinite;
+}
+
+[data-nav-item="account"]:hover svg {
+  color: transparent;
   animation: trance 5s linear infinite;
 }
 
diff --git a/packages/oxlint-config/rules/jsx.jsonc b/packages/oxlint-config/rules/jsx.jsonc
index 16bbcd9dda26..7c202bd5661e 100644
--- a/packages/oxlint-config/rules/jsx.jsonc
+++ b/packages/oxlint-config/rules/jsx.jsonc
@@ -22,7 +22,13 @@
         "react/no-unknown-property": [
           "error",
           {
-            "ignore": ["class", "classList", "innerHTML", "onScrollEnd"],
+            "ignore": [
+              "class",
+              "classList",
+              "innerHTML",
+              "onScrollEnd",
+              "router-link",
+            ],
           },
         ],
         "react/jsx-no-comment-textnodes": "error",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8c39eccefdf9..486ce741414a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -438,7 +438,7 @@ importers:
         version: 5.0.2
       '@vitest/coverage-v8':
         specifier: 4.0.15
-        version: 4.0.15(vitest@4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.31.1)(sass@1.70.0)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.1))
+        version: 4.0.15(vitest@4.0.15(@types/node@24.9.1)(happy-dom@20.0.10)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.31.1)(sass@1.70.0)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.1))
       autoprefixer:
         specifier: 10.4.27
         version: 10.4.27(postcss@8.5.6)
@@ -531,7 +531,7 @@ importers:
         version: 2.11.10(@testing-library/jest-dom@6.9.1)(solid-js@1.9.10)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.70.0)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.1))
       vitest:
         specifier: 4.0.15
-        version: 4.0.15(@opentelemetry/api@1.8.0)(@types/node@24.9.1)(happy-dom@20.0.10)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.31.1)(sass@1.70.0)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.1)
+        version: 4.0.15(@types/node@24.9.1)(happy-dom@20.0.10)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.31.1)(sass@1.70.0)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.1)
 
   packages/contracts:
     dependencies:
@@ -13809,6 +13809,23 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@vitest/coverage-v8@4.0.15(vitest@4.0.15(@types/node@24.9.1)(happy-dom@20.0.10)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.31.1)(sass@1.70.0)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.1))':
+    dependencies:
+      '@bcoe/v8-coverage': 1.0.2
+      '@vitest/utils': 4.0.15
+      ast-v8-to-istanbul: 0.3.8
+      istanbul-lib-coverage: 3.2.2
+      istanbul-lib-report: 3.0.1
+      istanbul-lib-source-maps: 5.0.6
+      istanbul-reports: 3.2.0
+      magicast: 0.5.1
+      obug: 2.1.1
+      std-env: 3.10.0
+      tinyrainbow: 3.0.3
+      vitest: 4.0.15(@types/node@24.9.1)(happy-dom@20.0.10)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.31.1)(sass@1.70.0)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.1)
+    transitivePeerDependencies:
+      - supports-color
+
   '@vitest/expect@4.0.15':
     dependencies:
       '@standard-schema/spec': 1.0.0
@@ -20940,6 +20957,45 @@ snapshots:
       - tsx
       - yaml
 
+  vitest@4.0.15(@types/node@24.9.1)(happy-dom@20.0.10)(jiti@2.6.1)(jsdom@27.4.0)(lightningcss@1.31.1)(sass@1.70.0)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.1):
+    dependencies:
+      '@vitest/expect': 4.0.15
+      '@vitest/mocker': 4.0.15(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.70.0)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.1))
+      '@vitest/pretty-format': 4.0.15
+      '@vitest/runner': 4.0.15
+      '@vitest/snapshot': 4.0.15
+      '@vitest/spy': 4.0.15
+      '@vitest/utils': 4.0.15
+      es-module-lexer: 1.7.0
+      expect-type: 1.2.2
+      magic-string: 0.30.21
+      obug: 2.1.1
+      pathe: 2.0.3
+      picomatch: 4.0.3
+      std-env: 3.10.0
+      tinybench: 2.9.0
+      tinyexec: 1.0.2
+      tinyglobby: 0.2.15
+      tinyrainbow: 3.0.3
+      vite: 7.1.12(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.31.1)(sass@1.70.0)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.1)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/node': 24.9.1
+      happy-dom: 20.0.10
+      jsdom: 27.4.0
+    transitivePeerDependencies:
+      - jiti
+      - less
+      - lightningcss
+      - msw
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - terser
+      - tsx
+      - yaml
+
   vlq@0.2.3: {}
 
   w3c-xmlserializer@5.0.0: