diff --git a/frontend/src/styles/nav.scss b/frontend/src/styles/nav.scss
index 548951b23..b96221d0d 100644
--- a/frontend/src/styles/nav.scss
+++ b/frontend/src/styles/nav.scss
@@ -120,7 +120,7 @@
   }
 }
 
-#top {
+header {
   grid-template-areas: "logo menu";
   line-height: 2.3rem;
   font-size: 2.3rem;
diff --git a/frontend/src/styles/z_media-queries.scss b/frontend/src/styles/z_media-queries.scss
index aaf16f17d..b70dc1631 100644
--- a/frontend/src/styles/z_media-queries.scss
+++ b/frontend/src/styles/z_media-queries.scss
@@ -346,7 +346,7 @@
 
 //800px
 @media only screen and (max-width: 50rem) {
-  #top .logo .text {
+  header .logo .text {
     font-size: 1.5rem;
     line-height: 1.5rem;
     margin-top: -0.1em;
@@ -509,7 +509,7 @@
 
 //650px
 @media only screen and (max-width: 40.625rem) {
-  #top {
+  header {
     #menu {
       .textButton.account {
         .text {
@@ -693,7 +693,7 @@
   .pageAbout .section .contributors {
     grid-template-columns: 1fr 1fr;
   }
-  #top .logo .bottom {
+  header .logo .bottom {
     margin-top: 0;
   }
   .pageLogin {
@@ -738,7 +738,7 @@
 
 //550px
 @media only screen and (max-width: 34.375rem) {
-  #top {
+  header {
     .logo {
       grid-template-columns: auto;
       .text {
@@ -894,7 +894,7 @@
     }
   }
 
-  #top {
+  header {
     #menu {
       font-size: 1rem;
     }
@@ -916,7 +916,7 @@
     }
   }
   #centerContent {
-    #top {
+    header {
       // grid-template-columns: 1fr auto;
       .desktopConfig {
         display: none;
@@ -972,7 +972,7 @@
 
 //400px
 @media only screen and (max-width: 25rem) {
-  #top .config {
+  header .config {
     grid-gap: 0.25rem;
     .group .buttons {
       font-size: 0.65rem;
@@ -980,7 +980,7 @@
     }
   }
 
-  #top #menu {
+  header #menu {
     font-size: 0.75rem;
   }
 
diff --git a/frontend/src/ts/commandline/lists/navigation.ts b/frontend/src/ts/commandline/lists/navigation.ts
index 8f2e22369..58409dab0 100644
--- a/frontend/src/ts/commandline/lists/navigation.ts
+++ b/frontend/src/ts/commandline/lists/navigation.ts
@@ -16,7 +16,7 @@ const commands: MonkeyTypes.Command[] = [
     display: "View Leaderboards",
     icon: "fa-crown",
     exec: (): void => {
-      $("#top #menu .textButton.view-leaderboards").trigger("click");
+      $("header #menu .textButton.view-leaderboards").trigger("click");
     },
   },
   {
@@ -42,7 +42,7 @@ const commands: MonkeyTypes.Command[] = [
     icon: "fa-user",
     alias: "stats",
     exec: (): void => {
-      $("#top #menu .textButton.view-account").hasClass("hidden")
+      $("header #menu .textButton.view-account").hasClass("hidden")
         ? navigate("/login")
         : navigate("/account");
     },
diff --git a/frontend/src/ts/controllers/account-controller.ts b/frontend/src/ts/controllers/account-controller.ts
index 44b9f56ed..73e6cb5ce 100644
--- a/frontend/src/ts/controllers/account-controller.ts
+++ b/frontend/src/ts/controllers/account-controller.ts
@@ -100,7 +100,7 @@ async function getDataAndInit(): Promise<boolean> {
     const msg = e.message || e;
     Notifications.add("Failed to get user data: " + msg, -1);
 
-    $("#top #menu .account").css("opacity", 1);
+    $("header #menu .account").css("opacity", 1);
     return false;
   }
   if (ActivePage.get() === "loading") {
@@ -194,7 +194,9 @@ export async function loadUser(user: UserType): Promise<void> {
   // var providerData = user.providerData;
   LoginPage.hidePreloader();
 
-  $("#top .signInOut .icon").html(`<i class="fas fa-fw fa-sign-out-alt"></i>`);
+  $("header .signInOut .icon").html(
+    `<i class="fas fa-fw fa-sign-out-alt"></i>`
+  );
 
   // showFavouriteThemesAtTheTop();
 
@@ -226,12 +228,12 @@ if (Auth && ConnectionState.get()) {
     console.log(`auth state changed, user ${user ? true : false}`);
     console.debug(user);
     if (user) {
-      $("#top .signInOut .icon").html(
+      $("header .signInOut .icon").html(
         `<i class="fas fa-fw fa-sign-out-alt"></i>`
       );
       await loadUser(user);
     } else {
-      $("#top .signInOut .icon").html(`<i class="far fa-fw fa-user"></i>`);
+      $("header .signInOut .icon").html(`<i class="far fa-fw fa-user"></i>`);
       if (window.location.pathname === "/account") {
         window.history.replaceState("", "", "/login");
       }
@@ -268,7 +270,7 @@ if (Auth && ConnectionState.get()) {
     // await UpdateConfig.loadPromise;
     const search = window.location.search;
     const hash = window.location.hash;
-    $("#top .signInOut .icon").html(`<i class="far fa-fw fa-user"></i>`);
+    $("header .signInOut .icon").html(`<i class="far fa-fw fa-user"></i>`);
     if (window.location.pathname === "/account") {
       window.history.replaceState("", "", "/login");
     }
@@ -439,7 +441,7 @@ export function signOut(): void {
       DB.setSnapshot(undefined);
       LoginPage.enableSignUpButton();
       LoginPage.enableInputs();
-      $("#top .signInOut .icon").html(`<i class="far fa-fw fa-user"></i>`);
+      $("header .signInOut .icon").html(`<i class="far fa-fw fa-user"></i>`);
       setTimeout(() => {
         hideFavoriteQuoteLength();
       }, 125);
@@ -613,7 +615,7 @@ $(".pageLogin .login button.signInWithGoogle").on("click", () => {
 // signInWithGitHub();
 // });
 
-$("#top .signInOut").on("click", () => {
+$("header .signInOut").on("click", () => {
   if (Auth === undefined) {
     Notifications.add("Authentication uninitialized", -1, {
       duration: 3,
diff --git a/frontend/src/ts/controllers/challenge-controller.ts b/frontend/src/ts/controllers/challenge-controller.ts
index 1e391ab29..2085231ee 100644
--- a/frontend/src/ts/controllers/challenge-controller.ts
+++ b/frontend/src/ts/controllers/challenge-controller.ts
@@ -204,7 +204,7 @@ export async function setup(challengeName: string): Promise<boolean> {
     Notifications.add(message, -1);
     ManualRestart.set();
     setTimeout(() => {
-      $("#top .config").removeClass("hidden");
+      $("header .config").removeClass("hidden");
       $(".page.pageTest").removeClass("hidden");
     }, 250);
     return false;
@@ -217,7 +217,7 @@ export async function setup(challengeName: string): Promise<boolean> {
       Notifications.add("Challenge not found", 0);
       ManualRestart.set();
       setTimeout(() => {
-        $("#top .config").removeClass("hidden");
+        $("header .config").removeClass("hidden");
         $(".page.pageTest").removeClass("hidden");
       }, 250);
       return false;
@@ -307,7 +307,7 @@ export async function setup(challengeName: string): Promise<boolean> {
     }
     ManualRestart.set();
     notitext = challenge.message;
-    $("#top .config").removeClass("hidden");
+    $("header .config").removeClass("hidden");
     $(".page.pageTest").removeClass("hidden");
 
     if (notitext === undefined) {
diff --git a/frontend/src/ts/elements/account-button.ts b/frontend/src/ts/elements/account-button.ts
index 186ef9eab..d62155d36 100644
--- a/frontend/src/ts/elements/account-button.ts
+++ b/frontend/src/ts/elements/account-button.ts
@@ -13,11 +13,13 @@ export function skipXpBreakdown(): void {
 
 export function loading(state: boolean): void {
   if (state) {
-    $("#top #menu .account").css("opacity", 1).css("pointer-events", "none");
+    $("header #menu .account").css("opacity", 1).css("pointer-events", "none");
 
     if (usingAvatar) {
-      $("#top #menu .account .loading").css("opacity", 1).removeClass("hidden");
-      $("#top #menu .account .avatar")
+      $("header #menu .account .loading")
+        .css("opacity", 1)
+        .removeClass("hidden");
+      $("header #menu .account .avatar")
         .stop(true, true)
         .css({ opacity: 1 })
         .animate(
@@ -26,11 +28,11 @@ export function loading(state: boolean): void {
           },
           100,
           () => {
-            $("#top #menu .account .avatar").addClass("hidden");
+            $("header #menu .account .avatar").addClass("hidden");
           }
         );
     } else {
-      $("#top #menu .account .loading")
+      $("header #menu .account .loading")
         .stop(true, true)
         .removeClass("hidden")
         .css({ opacity: 0 })
@@ -40,7 +42,7 @@ export function loading(state: boolean): void {
           },
           100
         );
-      $("#top #menu .account .user")
+      $("header #menu .account .user")
         .stop(true, true)
         .css({ opacity: 1 })
         .animate(
@@ -49,16 +51,16 @@ export function loading(state: boolean): void {
           },
           100,
           () => {
-            $("#top #menu .account .user").addClass("hidden");
+            $("header #menu .account .user").addClass("hidden");
           }
         );
     }
   } else {
-    $("#top #menu .account").css("opacity", 1).css("pointer-events", "auto");
+    $("header #menu .account").css("opacity", 1).css("pointer-events", "auto");
 
     if (usingAvatar) {
-      $("#top #menu .account .loading").css("opacity", 1).addClass("hidden");
-      $("#top #menu .account .avatar")
+      $("header #menu .account .loading").css("opacity", 1).addClass("hidden");
+      $("header #menu .account .avatar")
         .stop(true, true)
         .removeClass("hidden")
         .css({ opacity: 0 })
@@ -69,7 +71,7 @@ export function loading(state: boolean): void {
           100
         );
     } else {
-      $("#top #menu .account .loading")
+      $("header #menu .account .loading")
         .stop(true, true)
         .css({ opacity: 1 })
         .animate(
@@ -78,10 +80,10 @@ export function loading(state: boolean): void {
           },
           100,
           () => {
-            $("#top #menu .account .loading").addClass("hidden");
+            $("header #menu .account .loading").addClass("hidden");
           }
         );
-      $("#top #menu .account .user")
+      $("header #menu .account .user")
         .stop(true, true)
         .removeClass("hidden")
         .css({ opacity: 0 })
@@ -102,8 +104,8 @@ export async function update(
 ): Promise<void> {
   if (Auth?.currentUser) {
     if (xp !== undefined) {
-      $("#top #menu .level").text(Math.floor(Misc.getLevel(xp)));
-      $("#top #menu .bar").css({
+      $("header #menu .level").text(Math.floor(Misc.getLevel(xp)));
+      $("header #menu .bar").css({
         width: (Misc.getLevel(xp) % 1) * 100 + "%",
       });
     }
@@ -111,20 +113,20 @@ export async function update(
       Misc.getDiscordAvatarUrl(discordId, discordAvatar).then(
         (discordAvatarUrl) => {
           if (discordAvatarUrl) {
-            $("#top #menu .account .avatar").css(
+            $("header #menu .account .avatar").css(
               "background-image",
               `url(${discordAvatarUrl})`
             );
             usingAvatar = true;
 
-            $("#top #menu .account .user").addClass("hidden");
-            $("#top #menu .account .avatar").removeClass("hidden");
+            $("header #menu .account .user").addClass("hidden");
+            $("header #menu .account .avatar").removeClass("hidden");
           }
         }
       );
     } else {
-      $("#top #menu .account .avatar").addClass("hidden");
-      $("#top #menu .account .user").removeClass("hidden");
+      $("header #menu .account .avatar").addClass("hidden");
+      $("header #menu .account .user").removeClass("hidden");
     }
     $("#menu .textButton.account")
       .removeClass("hidden")
diff --git a/frontend/src/ts/elements/alerts.ts b/frontend/src/ts/elements/alerts.ts
index ee28a5a55..51f3ad614 100644
--- a/frontend/src/ts/elements/alerts.ts
+++ b/frontend/src/ts/elements/alerts.ts
@@ -337,9 +337,9 @@ function fillNotifications(): void {
 
 export function setNotificationBubbleVisible(tf: boolean): void {
   if (tf) {
-    $("#top #menu .showAlerts .notificationBubble").removeClass("hidden");
+    $("header #menu .showAlerts .notificationBubble").removeClass("hidden");
   } else {
-    $("#top #menu .showAlerts .notificationBubble").addClass("hidden");
+    $("header #menu .showAlerts .notificationBubble").addClass("hidden");
   }
 }
 
@@ -430,7 +430,7 @@ $("#alertsPopupWrapper .accountAlerts").on("click", ".deleteAll", () => {
   }
 });
 
-$("#top #menu .showAlerts").on("click", () => {
+$("header #menu .showAlerts").on("click", () => {
   show();
 });
 
diff --git a/frontend/src/ts/elements/leaderboards.ts b/frontend/src/ts/elements/leaderboards.ts
index 8fc797ad6..48555bda0 100644
--- a/frontend/src/ts/elements/leaderboards.ts
+++ b/frontend/src/ts/elements/leaderboards.ts
@@ -881,13 +881,13 @@ $(document).on("keydown", (event) => {
   }
 });
 
-$("#top #menu").on("click", ".textButton", (e) => {
+$("header #menu").on("click", ".textButton", (e) => {
   if ($(e.currentTarget).hasClass("leaderboards")) {
     show();
   }
 });
 
-$(document).on("keypress", "#top #menu .textButton", (e) => {
+$(document).on("keypress", "header #menu .textButton", (e) => {
   if (e.key === "Enter") {
     $(e.currentTarget).trigger("click");
   }
diff --git a/frontend/src/ts/test/focus.ts b/frontend/src/ts/test/focus.ts
index ecbee6405..91363bc99 100644
--- a/frontend/src/ts/test/focus.ts
+++ b/frontend/src/ts/test/focus.ts
@@ -11,7 +11,7 @@ export function set(foc: boolean, withCursor = false): void {
   if (foc && !state) {
     state = true;
     Caret.stopAnimation();
-    $("#top").addClass("focus");
+    $("header").addClass("focus");
     $("#bottom").addClass("focus");
     if (!withCursor) $("body").css("cursor", "none");
     $("#middle").addClass("focus");
@@ -30,7 +30,7 @@ export function set(foc: boolean, withCursor = false): void {
   } else if (!foc && state) {
     state = false;
     Caret.startAnimation();
-    $("#top").removeClass("focus");
+    $("header").removeClass("focus");
     $("#bottom").removeClass("focus");
     $("body").css("cursor", "default");
     $("#middle").removeClass("focus");
diff --git a/frontend/src/ts/test/test-config.ts b/frontend/src/ts/test/test-config.ts
index 8b9341470..7d9795f84 100644
--- a/frontend/src/ts/test/test-config.ts
+++ b/frontend/src/ts/test/test-config.ts
@@ -2,11 +2,11 @@ import * as ConfigEvent from "../observables/config-event";
 // import * as Misc from "../utils/misc";
 
 // export function show() {
-//   $("#top .config").removeClass("hidden").css("opacity", 1);
+//   $("header .config").removeClass("hidden").css("opacity", 1);
 // }
 
 // export function hide() {
-//   $("#top .config").css("opacity", 0).addClass("hidden");
+//   $("header .config").css("opacity", 0).addClass("hidden");
 // }
 
 export function show(): void {
diff --git a/frontend/src/ts/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts
index f14579d34..171531cfd 100644
--- a/frontend/src/ts/test/test-logic.ts
+++ b/frontend/src/ts/test/test-logic.ts
@@ -1578,7 +1578,7 @@ $("#popups").on(
   }
 );
 
-$("#top").on("click", "#menu #startTestButton, .logo", () => {
+$("header").on("click", "#menu #startTestButton, .logo", () => {
   if (ActivePage.get() === "test") restart();
 });
 
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index fbcd9dd44..b712d64be 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -411,7 +411,7 @@ export async function screenshot(): Promise<void> {
     $(".pageTest .buttons").removeClass("hidden");
     $("noscript").removeClass("hidden");
     $("#nocss").removeClass("hidden");
-    $("#top, #bottom").removeClass("invisible");
+    $("header, #bottom").removeClass("invisible");
     $("#result").removeClass("noBalloons");
     if (revertCookie) $("#cookiePopupWrapper").removeClass("hidden");
     if (revealReplay) $("#resultReplay").removeClass("hidden");
@@ -450,7 +450,7 @@ export async function screenshot(): Promise<void> {
   $("#ad-result-small-wrapper").addClass("hidden");
   $("#testConfig").addClass("hidden");
   $(".page.pageTest").prepend("<div class='screenshotSpacer'></div>");
-  $("#top, #bottom").addClass("invisible");
+  $("header, #bottom").addClass("invisible");
   $("#result").addClass("noBalloons");
   if (revertCookie) $("#cookiePopupWrapper").addClass("hidden");
 
diff --git a/frontend/src/ts/ui.ts b/frontend/src/ts/ui.ts
index 4ab529d3c..7391ea1c9 100644
--- a/frontend/src/ts/ui.ts
+++ b/frontend/src/ts/ui.ts
@@ -43,7 +43,7 @@ if (isLocalhost()) {
   window.onerror = function (error): void {
     Notifications.add(error.toString(), -1);
   };
-  $("#top .logo .top").text("localhost");
+  $("header .logo .top").text("localhost");
   $("head title").text($("head title").text() + " (localhost)");
   $("body").append(
     `<div class="devIndicator tl">local</div><div class="devIndicator br">local</div>`
diff --git a/frontend/static/email-handler.html b/frontend/static/email-handler.html
index e76c51d0e..9762a64b4 100644
--- a/frontend/static/email-handler.html
+++ b/frontend/static/email-handler.html
@@ -44,7 +44,7 @@
     <meta name="twitter:image" content="https://monkeytype.com/mtsocial.png" />
     <meta name="twitter:card" content="summary_large_image" />
     <style>
-      #top {
+      header {
         font-size: 2.5rem;
       }
 
@@ -97,7 +97,7 @@
 
   <body>
     <div id="centerContent">
-      <div id="top">
+      <div header>
         <div class="logo">
           <div class="icon">
             <svg
@@ -453,7 +453,7 @@
       false
     );
 
-    document.querySelector("#top").addEventListener("click", () => {
+    document.querySelector("header").addEventListener("click", () => {
       window.location = "/";
     });
   </script>
diff --git a/frontend/static/funbox/crt.css b/frontend/static/funbox/crt.css
index c9b52bf2f..180f99ecb 100644
--- a/frontend/static/funbox/crt.css
+++ b/frontend/static/funbox/crt.css
@@ -42,7 +42,7 @@ body.crtmode #scanline {
   );
   animation: scanline 10s linear infinite;
 }
-body.crtmode #top,
+body.crtmode header,
 body.crtmode #middle,
 body.crtmode #bottom,
 body.crtmode #result,
@@ -102,7 +102,7 @@ body.crtmode .logo .icon {
 body.crtmode .avatars,
 body.crtmode #menu .account .avatar,
 body.crtmode #menu .account .levelAndBar,
-body.crtmode #top.focus .logo .icon {
+body.crtmode header.focus .logo .icon {
   filter: drop-shadow(3px 0px 1px var(--crt-sub-color-glow))
     drop-shadow(-3px 0px 0px var(--crt-sub-color-glow));
 }
diff --git a/frontend/static/html/header.html b/frontend/static/html/header.html
index 9dc66334f..e4b26da16 100644
--- a/frontend/static/html/header.html
+++ b/frontend/static/html/header.html
@@ -1,4 +1,4 @@
-<div id="top">
+<header>
   <a class="logo" href="/" router-link>
     <div class="icon">
       <svg
@@ -141,4 +141,4 @@
     <i class="fas fa-sign-out-alt"></i>
     sign out
   </div> -->
-</div>
+</header>
diff --git a/frontend/static/privacy-policy.html b/frontend/static/privacy-policy.html
index faed9305a..376674c26 100644
--- a/frontend/static/privacy-policy.html
+++ b/frontend/static/privacy-policy.html
@@ -37,7 +37,7 @@
     <meta name="twitter:image" content="https://monkeytype.com/mtsocial.png" />
     <meta name="twitter:card" content="summary_large_image" />
     <style>
-      #top {
+      header {
         font-size: 2.5rem;
       }
 
@@ -61,7 +61,7 @@
 
   <body>
     <div id="centerContent">
-      <div id="top">
+      <header>
         <div class="logo">
           <div class="icon">
             <svg
@@ -107,7 +107,7 @@
             <span style="color: var(--main-color)">Privacy Policy</span>
           </div>
         </div>
-      </div>
+      </header>
       <div id="middle">
         <p>
           <!-- make sure to update this date every time the policy is changed -->
@@ -471,7 +471,7 @@
       }
     }
 
-    document.querySelector("#top").addEventListener("click", () => {
+    document.querySelector("header").addEventListener("click", () => {
       window.location = "/";
     });
   </script>
diff --git a/frontend/static/security-policy.html b/frontend/static/security-policy.html
index ccc0a5a0c..3d38db421 100644
--- a/frontend/static/security-policy.html
+++ b/frontend/static/security-policy.html
@@ -37,7 +37,7 @@
     <meta name="twitter:image" content="https://monkeytype.com/mtsocial.png" />
     <meta name="twitter:card" content="summary_large_image" />
     <style>
-      #top {
+      header {
         font-size: 2.5rem;
       }
 
@@ -65,7 +65,7 @@
 
   <body>
     <div id="centerContent">
-      <div id="top">
+      <header>
         <div class="logo">
           <div class="icon">
             <svg
@@ -111,7 +111,7 @@
             <span style="color: var(--main-color)">Security Policy</span>
           </div>
         </div>
-      </div>
+      </header>
       <div id="middle">
         <p>
           We take the security and integrity of Monkeytype very seriously. If
@@ -176,7 +176,7 @@
       }
     }
 
-    document.querySelector("#top").addEventListener("click", () => {
+    document.querySelector("header").addEventListener("click", () => {
       window.location = "/";
     });
   </script>
diff --git a/frontend/static/terms-of-service.html b/frontend/static/terms-of-service.html
index 11fcccead..ab55650d5 100644
--- a/frontend/static/terms-of-service.html
+++ b/frontend/static/terms-of-service.html
@@ -37,7 +37,7 @@
     <meta name="twitter:image" content="https://monkeytype.com/mtsocial.png" />
     <meta name="twitter:card" content="summary_large_image" />
     <style>
-      #top {
+      header {
         font-size: 2.5rem;
       }
 
@@ -61,7 +61,7 @@
 
   <body>
     <div id="centerContent">
-      <div id="top">
+      <header>
         <div class="logo">
           <div class="icon">
             <svg
@@ -107,7 +107,7 @@
             <span style="color: var(--main-color)">Terms of Service</span>
           </div>
         </div>
-      </div>
+      </header>
       <div id="middle">
         <!-- make sure to update this date every time the tos is changed -->
         <p>These terms of service were last updated on June 19, 2022.</p>
@@ -374,7 +374,7 @@
       }
     }
 
-    document.querySelector("#top").addEventListener("click", () => {
+    document.querySelector("header").addEventListener("click", () => {
       window.location = "/";
     });
   </script>
diff --git a/frontend/static/themes/aurora.css b/frontend/static/themes/aurora.css
index 57f015ccc..e05bc8268 100644
--- a/frontend/static/themes/aurora.css
+++ b/frontend/static/themes/aurora.css
@@ -55,16 +55,16 @@
   animation: aurora-bg 5s linear infinite;
 }
 
-#top.focus .button.discord::after,
-#top .button.discord.dotHidden::after {
+header.focus .button.discord::after,
+header .button.discord.dotHidden::after {
   animation-name: none !important;
 }
 
 .logo .bottom,
-#top .config .group .buttons .textButton.active,
+header .config .group .buttons .textButton.active,
 #result .stats .group .bottom,
 #menu .textButton:hover,
-#top .config .group .buttons .textButton:hover,
+header .config .group .buttons .textButton:hover,
 a:hover,
 #words.flipped .word {
   animation: aurora 5s linear infinite;
diff --git a/frontend/static/themes/blueberry_dark.css b/frontend/static/themes/blueberry_dark.css
index 88d2a3b14..b89267741 100644
--- a/frontend/static/themes/blueberry_dark.css
+++ b/frontend/static/themes/blueberry_dark.css
@@ -11,6 +11,6 @@
   --colorful-error-extra-color: #d996ac;
 }
 
-#top .logo .bottom {
+header .logo .bottom {
   color: #962f7e;
 }
diff --git a/frontend/static/themes/blueberry_light.css b/frontend/static/themes/blueberry_light.css
index b6cd6a6dd..c9ac50851 100644
--- a/frontend/static/themes/blueberry_light.css
+++ b/frontend/static/themes/blueberry_light.css
@@ -11,6 +11,6 @@
   --colorful-error-extra-color: #d996ac;
 }
 
-#top .logo .bottom {
+header .logo .bottom {
   color: #df4576;
 }
diff --git a/frontend/static/themes/camping.css b/frontend/static/themes/camping.css
index 831e2a837..ca61410ee 100644
--- a/frontend/static/themes/camping.css
+++ b/frontend/static/themes/camping.css
@@ -11,6 +11,6 @@
   --colorful-error-extra-color: #7e3a39;
 }
 
-#top .logo .bottom {
+header .logo .bottom {
   color: #ad4f4e;
 }
diff --git a/frontend/static/themes/chaos_theory.css b/frontend/static/themes/chaos_theory.css
index 8f30562fb..f64acec6e 100644
--- a/frontend/static/themes/chaos_theory.css
+++ b/frontend/static/themes/chaos_theory.css
@@ -12,17 +12,17 @@
   --colorful-error-extra-color: #b03c47;
 }
 
-#top .logo .text {
+header .logo .text {
   -webkit-transform: rotateY(180deg);
   unicode-bidi: bidi-override;
   transition: 0.5s;
 }
 
-#top .logo .top {
+header .logo .top {
   font-family: "Comic Sans MS", "Comic Sans", cursive;
 }
 
-#top .logo .icon {
+header .logo .icon {
   -webkit-transform: rotateX(180deg);
   transition: 0.5s;
 }
@@ -73,23 +73,23 @@
   align-content: right;
 }
 
-#top.focus #menu .textButton,
-#top.focus #menu:before,
-#top.focus #menu:after {
+header.focus #menu .textButton,
+header.focus #menu:before,
+header.focus #menu:after {
   background: var(--sub-color);
   -webkit-transform: rotateY(180deg) !important;
 }
 
-#top.focus .logo .text,
-#top.focus .logo:before,
-#top.focus .logo:after {
+header.focus .logo .text,
+header.focus .logo:before,
+header.focus .logo:after {
   -webkit-transform: rotateY(0deg);
   direction: ltr;
 }
 
-#top.focus .logo .icon,
-#top.focus .logo:before,
-#top.focus .logo:after {
+header.focus .logo .icon,
+header.focus .logo:before,
+header.focus .logo:after {
   -webkit-transform: rotateX(0deg);
   direction: ltr;
 }
@@ -187,7 +187,7 @@ body.crtmode {
       drop-shadow(-3px 0px 0px var(--crt-main-color-glow));
   }
 
-  #top.focus #menu .textButton {
+  header.focus #menu .textButton {
     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 2fc6022aa..9b792fc7e 100644
--- a/frontend/static/themes/cheesecake.css
+++ b/frontend/static/themes/cheesecake.css
@@ -43,6 +43,6 @@
   }
 }
 
-#top > div.logo > div.icon > svg path {
+header > div.logo > div.icon > svg path {
   animation: 10s linear infinite 0.1s rgb;
 }
diff --git a/frontend/static/themes/dmg.css b/frontend/static/themes/dmg.css
index b06a259e4..d94d8af55 100644
--- a/frontend/static/themes/dmg.css
+++ b/frontend/static/themes/dmg.css
@@ -15,15 +15,15 @@
   gap: 0.5rem;
 }
 
-#top.focus #menu .textButton {
+header.focus #menu .textButton {
   background: var(--bg-color);
   size: 1rem;
 }
-#top.focus #menu .textButton:nth-child(1) {
+header.focus #menu .textButton:nth-child(1) {
   background: #e34c6c;
 }
-#top.focus #menu:before,
-#top.focus #menu:after {
+header.focus #menu:before,
+header.focus #menu:after {
   background: var(--sub-color);
 }
 
@@ -39,7 +39,7 @@ body.crtmode {
       -3px 0 var(--crt-main-color-glow), 0 0 3px;
   }
 
-  #top.focus #menu .textButton {
+  header.focus #menu .textButton {
     box-shadow: none;
     &:nth-child(1) {
       box-shadow: 3px 0 1px color-mix(in srgb, #e34c6c 20%, transparent),
diff --git a/frontend/static/themes/dots.css b/frontend/static/themes/dots.css
index 7ab633fdb..d8b3f4faa 100644
--- a/frontend/static/themes/dots.css
+++ b/frontend/static/themes/dots.css
@@ -15,9 +15,9 @@
   gap: 0.5rem;
 }
 
-#top.focus #menu .textButton,
-#top.focus #menu:before,
-#top.focus #menu:after {
+header.focus #menu .textButton,
+header.focus #menu:before,
+header.focus #menu:after {
   background: var(--sub-color);
 }
 
@@ -51,7 +51,7 @@
   background: #4acb8a;
 }
 
-#top.focus #menu .textButton:nth-child(6) {
+header.focus #menu .textButton:nth-child(6) {
   background: transparent !important;
 }
 
@@ -84,7 +84,7 @@
     border-radius: 10rem;
 } */
 
-#top.focus #menu .textButton.discord::after {
+header.focus #menu .textButton.discord::after {
   border-color: transparent;
 }
 
@@ -123,7 +123,7 @@ body.crtmode {
       -3px 0 color-mix(in srgb, #ff9349 30%, transparent), 0 0 3px;
   }
 
-  #top.focus #menu .textButton {
+  header.focus #menu .textButton {
     box-shadow: 3px 0 1px var(--crt-sub-color-glow),
       -3px 0 var(--crt-sub-color-glow);
 
diff --git a/frontend/static/themes/fire.css b/frontend/static/themes/fire.css
index 0f4caff4b..676518ec2 100644
--- a/frontend/static/themes/fire.css
+++ b/frontend/static/themes/fire.css
@@ -55,16 +55,16 @@
   animation: fire-bg 5s linear infinite;
 }
 
-#top.focus .button.discord::after,
-#top .button.discord.dotHidden::after {
+header.focus .button.discord::after,
+header .button.discord.dotHidden::after {
   animation-name: none !important;
 }
 
 .logo .bottom,
-#top .config .group .buttons .textButton.active,
+header .config .group .buttons .textButton.active,
 #result .stats .group .bottom,
 #menu .textButton:hover,
-#top .config .group .buttons .textButton:hover,
+header .config .group .buttons .textButton:hover,
 a:hover,
 #words.flipped .word {
   animation: fire 5s linear infinite;
diff --git a/frontend/static/themes/fundamentals.css b/frontend/static/themes/fundamentals.css
index 8b85a47dc..4d3018e77 100644
--- a/frontend/static/themes/fundamentals.css
+++ b/frontend/static/themes/fundamentals.css
@@ -11,6 +11,6 @@
   --colorful-error-extra-color: #413157;
 }
 
-#top .logo .bottom {
+header .logo .bottom {
   color: #196378;
 }
diff --git a/frontend/static/themes/grape.css b/frontend/static/themes/grape.css
index b3ed842d7..99cd1500b 100644
--- a/frontend/static/themes/grape.css
+++ b/frontend/static/themes/grape.css
@@ -55,16 +55,16 @@
   animation: pastel-bg 5s linear infinite;
 }
 
-#top.focus .button.discord::after,
-#top .button.discord.dotHidden::after {
+header.focus .button.discord::after,
+header .button.discord.dotHidden::after {
   animation-name: none !important;
 }
 
 .logo .bottom,
-#top .config .group .buttons .textButton.active,
+header .config .group .buttons .textButton.active,
 #result .stats .group .bottom,
 #menu .textButton:hover,
-#top .config .group .buttons .textButton:hover,
+header .config .group .buttons .textButton:hover,
 a:hover,
 #words.flipped .word {
   animation: pastel 5s linear infinite;
diff --git a/frontend/static/themes/ishtar.css b/frontend/static/themes/ishtar.css
index 9b0450bd7..c14eb69f4 100644
--- a/frontend/static/themes/ishtar.css
+++ b/frontend/static/themes/ishtar.css
@@ -11,6 +11,6 @@
   --colorful-error-extra-color: #849224;
 }
 
-#top .logo .bottom {
+header .logo .bottom {
   color: #fae1c3;
 }
diff --git a/frontend/static/themes/metropolis.css b/frontend/static/themes/metropolis.css
index aad20f352..422527fdd 100644
--- a/frontend/static/themes/metropolis.css
+++ b/frontend/static/themes/metropolis.css
@@ -11,7 +11,7 @@
   --colorful-error-extra-color: #8f2f19;
 }
 
-#top .logo .bottom {
+header .logo .bottom {
   color: #f4bc46;
 }
 
diff --git a/frontend/static/themes/moonlight.css b/frontend/static/themes/moonlight.css
index 44299d270..5c41bec47 100644
--- a/frontend/static/themes/moonlight.css
+++ b/frontend/static/themes/moonlight.css
@@ -14,9 +14,9 @@
 #menu {
   gap: 0.5rem;
 }
-#top.focus #menu .textButton,
-#top.focus #menu:before,
-#top.focus #menu:after {
+header.focus #menu .textButton,
+header.focus #menu:before,
+header.focus #menu:after {
   background: var(--bg-color);
 }
 #menu .textButton:nth-child(1),
@@ -58,7 +58,7 @@
 #menu .textButton:nth-child(8) {
   background: #c69f68;
 } */
-#top.focus #menu .textButton.discord::after {
+header.focus #menu .textButton.discord::after {
   border-color: transparent;
 }
 
@@ -70,7 +70,7 @@ body.crtmode {
     box-shadow: 3px 0 1px color-mix(in srgb, #c69f68 20%, transparent),
       -3px 0 color-mix(in srgb, #c69f68 30%, transparent), 0 0 3px;
   }
-  #top.focus #menu .textButton {
+  header.focus #menu .textButton {
     box-shadow: none;
   }
 }
diff --git a/frontend/static/themes/mr_sleeves.css b/frontend/static/themes/mr_sleeves.css
index 8ede9e158..59debea3a 100644
--- a/frontend/static/themes/mr_sleeves.css
+++ b/frontend/static/themes/mr_sleeves.css
@@ -11,11 +11,11 @@
   --colorful-error-extra-color: #667c91;
 }
 
-#top .logo .bottom {
+header .logo .bottom {
   color: #8fadc9;
 }
 
-#top .config .group .buttons .textButton.active {
+header .config .group .buttons .textButton.active {
   color: #daa99b;
 }
 
diff --git a/frontend/static/themes/rainbow_trail.css b/frontend/static/themes/rainbow_trail.css
index e34e54f89..f1f09e621 100644
--- a/frontend/static/themes/rainbow_trail.css
+++ b/frontend/static/themes/rainbow_trail.css
@@ -9,7 +9,7 @@
   --colorful-error-color: #ff0008;
 }
 
-#top .logo .text {
+header .logo .text {
   background: linear-gradient(
     90deg,
     #60b6ce,
@@ -29,7 +29,7 @@
   animation: rainbow-gradient 30s alternate ease-in-out infinite;
 }
 
-#top .logo .top,
+header .logo .top,
 .account .levelAndBar .level,
 [aria-label][data-balloon-pos]::after {
   -webkit-text-fill-color: initial;
diff --git a/frontend/static/themes/rgb.css b/frontend/static/themes/rgb.css
index ec0c35584..4766c85ef 100644
--- a/frontend/static/themes/rgb.css
+++ b/frontend/static/themes/rgb.css
@@ -85,16 +85,16 @@
   animation: rgb-bg 5s linear infinite !important;
 }
 
-#top.focus .button.discord::after,
-#top .button.discord.dotHidden::after {
+header.focus .button.discord::after,
+header .button.discord.dotHidden::after {
   animation-name: none !important;
 }
 
 .logo .bottom,
-#top .config .group .buttons .textButton.active,
+header .config .group .buttons .textButton.active,
 #result .stats .group .bottom,
 #menu .textButton:hover,
-#top .config .group .buttons .textButton:hover,
+header .config .group .buttons .textButton:hover,
 a:hover,
 #words.flipped .word {
   animation: rgb 5s linear infinite;
@@ -113,6 +113,6 @@ a:hover,
   animation: rgb 5s linear infinite;
 }
 
-#top .logo path {
+header .logo path {
   animation: rgb-fill 5s linear infinite;
 }
diff --git a/frontend/static/themes/sewing_tin_light.css b/frontend/static/themes/sewing_tin_light.css
index 81e5e4b1c..93bc91541 100644
--- a/frontend/static/themes/sewing_tin_light.css
+++ b/frontend/static/themes/sewing_tin_light.css
@@ -19,7 +19,7 @@
   color: #c6915e;
 }
 
-#top .logo .text {
+header .logo .text {
   background-color: #ffffff; /* fallback */
   background: -webkit-linear-gradient(
     #2d2076,
@@ -36,7 +36,7 @@
   -webkit-text-fill-color: transparent;
 }
 
-#top .logo .text .top {
+header .logo .text .top {
   /* 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 05b20c651..715ec517f 100644
--- a/frontend/static/themes/shadow.css
+++ b/frontend/static/themes/shadow.css
@@ -11,11 +11,11 @@
   --colorful-error-extra-color: #d8d8d8;
 }
 
-#top .logo .icon {
+header .logo .icon {
   color: #8c3230;
 }
 
-#top .logo .text {
+header .logo .text {
   color: #557d8d;
 }
 
@@ -39,10 +39,10 @@
   color: white;
 }
 
-#top .config .group .buttons .textButton.active,
+header .config .group .buttons .textButton.active,
 #result .stats .group,
 #menu .textButton:hover,
-#top .config .group .buttons .textButton:hover,
+header .config .group .buttons .textButton:hover,
 a:hover {
   animation: shadow-repeat 3s linear infinite forwards;
 }
diff --git a/frontend/static/themes/snes.css b/frontend/static/themes/snes.css
index ffa2a2aef..34f6253c4 100644
--- a/frontend/static/themes/snes.css
+++ b/frontend/static/themes/snes.css
@@ -15,9 +15,9 @@
   gap: 0.5rem;
 }
 
-#top.focus #menu .textButton,
-#top.focus #menu:before,
-#top.focus #menu:after {
+header.focus #menu .textButton,
+header.focus #menu:before,
+header.focus #menu:after {
   background: #99989f;
 }
 
@@ -50,7 +50,7 @@
   background: #a692d7;
 }
 
-#top.focus #menu .textButton.discord::after {
+header.focus #menu .textButton.discord::after {
   border-color: transparent;
 }
 
@@ -86,7 +86,7 @@ body.crtmode {
       -3px 0 color-mix(in srgb, #a692d7 30%, transparent), 0 0 3px;
   }
 
-  #top.focus #menu .textButton {
+  header.focus #menu .textButton {
     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/trance.css b/frontend/static/themes/trance.css
index 7784894be..5a59d51aa 100644
--- a/frontend/static/themes/trance.css
+++ b/frontend/static/themes/trance.css
@@ -43,16 +43,16 @@
   animation: trance-bg 5s linear infinite;
 }
 
-#top.focus .button.discord::after,
-#top .button.discord.dotHidden::after {
+header.focus .button.discord::after,
+header .button.discord.dotHidden::after {
   animation-name: none !important;
 }
 
 .logo .bottom,
-#top .config .group .buttons .textButton.active,
+header .config .group .buttons .textButton.active,
 #result .stats .group .bottom,
 #menu .textButton:hover,
-#top .config .group .buttons .textButton:hover,
+header .config .group .buttons .textButton:hover,
 a:hover,
 #words.flipped .word {
   animation: trance 5s linear infinite;