diff --git a/frontend/src/styles/core.scss b/frontend/src/styles/core.scss
index a0f1d9e8c..611b9593f 100644
--- a/frontend/src/styles/core.scss
+++ b/frontend/src/styles/core.scss
@@ -159,7 +159,7 @@ body {
   }
 }
 
-#middle {
+main {
   display: grid; //stupid fix for stupid safari
 }
 
diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss
index e2ca354a7..6ee552b1c 100644
--- a/frontend/src/styles/test.scss
+++ b/frontend/src/styles/test.scss
@@ -1239,7 +1239,7 @@
   }
 }
 
-#middle.focus .pageTest {
+main.focus .pageTest {
   #testModesNotice {
     opacity: 0 !important;
   }
diff --git a/frontend/src/styles/z_media-queries.scss b/frontend/src/styles/z_media-queries.scss
index dc738f47d..eeafbf1fe 100644
--- a/frontend/src/styles/z_media-queries.scss
+++ b/frontend/src/styles/z_media-queries.scss
@@ -701,7 +701,7 @@
     gap: 5rem;
     grid-auto-flow: unset;
   }
-  #middle {
+  main {
     #result {
       grid-template-areas:
         "stats stats"
@@ -928,7 +928,7 @@
     gap: 1rem;
     padding: 1rem;
   }
-  #middle {
+  main {
     #result {
       .stats {
         grid-template-areas:
diff --git a/frontend/src/ts/pages/404.ts b/frontend/src/ts/pages/404.ts
index 0cde79ef0..0d3ff1fc1 100644
--- a/frontend/src/ts/pages/404.ts
+++ b/frontend/src/ts/pages/404.ts
@@ -12,7 +12,7 @@ export const page = new Page(
     Skeleton.remove("page404");
   },
   async () => {
-    Skeleton.append("page404", "middle");
+    Skeleton.append("page404", "main");
   },
   async () => {
     //
diff --git a/frontend/src/ts/pages/about.ts b/frontend/src/ts/pages/about.ts
index f4a0e154d..1a38c5162 100644
--- a/frontend/src/ts/pages/about.ts
+++ b/frontend/src/ts/pages/about.ts
@@ -196,7 +196,7 @@ export const page = new Page(
     Skeleton.remove("pageAbout");
   },
   async () => {
-    Skeleton.append("pageAbout", "middle");
+    Skeleton.append("pageAbout", "main");
     fill();
   },
   async () => {
diff --git a/frontend/src/ts/pages/account.ts b/frontend/src/ts/pages/account.ts
index 5a1f5d937..43bed1981 100644
--- a/frontend/src/ts/pages/account.ts
+++ b/frontend/src/ts/pages/account.ts
@@ -1314,7 +1314,7 @@ export const page = new Page(
     Skeleton.remove("pageAccount");
   },
   async () => {
-    Skeleton.append("pageAccount", "middle");
+    Skeleton.append("pageAccount", "main");
     await ResultFilters.appendButtons();
     ResultFilters.updateActive();
     await Misc.sleep(0);
diff --git a/frontend/src/ts/pages/login.ts b/frontend/src/ts/pages/login.ts
index c48a2f05e..171727112 100644
--- a/frontend/src/ts/pages/login.ts
+++ b/frontend/src/ts/pages/login.ts
@@ -331,7 +331,7 @@ export const page = new Page(
     Skeleton.remove("pageLogin");
   },
   async () => {
-    Skeleton.append("pageLogin", "middle");
+    Skeleton.append("pageLogin", "main");
     enableInputs();
     enableSignUpButton();
   },
diff --git a/frontend/src/ts/pages/profile-search.ts b/frontend/src/ts/pages/profile-search.ts
index 71e3f2489..d3d13a72c 100644
--- a/frontend/src/ts/pages/profile-search.ts
+++ b/frontend/src/ts/pages/profile-search.ts
@@ -12,7 +12,7 @@ export const page = new Page(
     Skeleton.remove("pageProfileSearch");
   },
   async () => {
-    Skeleton.append("pageProfileSearch", "middle");
+    Skeleton.append("pageProfileSearch", "main");
     $(".page.pageProfileSearch input").val("");
   },
   async () => {
diff --git a/frontend/src/ts/pages/profile.ts b/frontend/src/ts/pages/profile.ts
index dae48c875..03ca58f45 100644
--- a/frontend/src/ts/pages/profile.ts
+++ b/frontend/src/ts/pages/profile.ts
@@ -211,7 +211,7 @@ export const page = new Page<undefined | Profile.ProfileData>(
     reset();
   },
   async (options) => {
-    Skeleton.append("pageProfile", "middle");
+    Skeleton.append("pageProfile", "main");
     const uidOrName = options?.params?.["uidOrName"];
     if (uidOrName) {
       $(".page.pageProfile .preloader").removeClass("hidden");
diff --git a/frontend/src/ts/pages/settings.ts b/frontend/src/ts/pages/settings.ts
index 59e8a12b3..8c7605a08 100644
--- a/frontend/src/ts/pages/settings.ts
+++ b/frontend/src/ts/pages/settings.ts
@@ -1255,7 +1255,7 @@ export const page = new Page(
     reset();
   },
   async () => {
-    Skeleton.append("pageSettings", "middle");
+    Skeleton.append("pageSettings", "main");
     await fillSettingsPage();
     await update(false);
   },
diff --git a/frontend/src/ts/popups/skeleton.ts b/frontend/src/ts/popups/skeleton.ts
index 29f6bfea1..a74e4a946 100644
--- a/frontend/src/ts/popups/skeleton.ts
+++ b/frontend/src/ts/popups/skeleton.ts
@@ -16,10 +16,12 @@ export function remove(id: string): void {
   }
 }
 
-export function append(id: string, parentOverride = ""): void {
+type ParentOverride = "main";
+
+export function append(id: string, parentOverride?: ParentOverride): void {
   const popup = skeletons.get(id) as HTMLElement;
   if (parentOverride) {
-    (<HTMLElement>document.getElementById(parentOverride)).append(popup);
+    (<HTMLElement>document.querySelector(parentOverride)).append(popup);
   } else {
     parent.append(popup);
   }
diff --git a/frontend/src/ts/popups/support-popup.ts b/frontend/src/ts/popups/support-popup.ts
index f874c29c8..304290927 100644
--- a/frontend/src/ts/popups/support-popup.ts
+++ b/frontend/src/ts/popups/support-popup.ts
@@ -25,7 +25,7 @@ $("#supportMeButton").on("click", () => {
   show();
 });
 
-$("#middle").on("click", ".pageAbout #supportMeAboutButton", () => {
+$("main").on("click", ".pageAbout #supportMeAboutButton", () => {
   show();
 });
 
diff --git a/frontend/src/ts/test/focus.ts b/frontend/src/ts/test/focus.ts
index b13883ea0..ae986413d 100644
--- a/frontend/src/ts/test/focus.ts
+++ b/frontend/src/ts/test/focus.ts
@@ -14,7 +14,7 @@ export function set(foc: boolean, withCursor = false): void {
     $("header").addClass("focus");
     $("footer").addClass("focus");
     if (!withCursor) $("body").css("cursor", "none");
-    $("#middle").addClass("focus");
+    $("main").addClass("focus");
     $("#testConfig").addClass("focus");
     $("#mobileTestConfig").addClass("focus");
     $("#bannerCenter").addClass("focus");
@@ -33,7 +33,7 @@ export function set(foc: boolean, withCursor = false): void {
     $("header").removeClass("focus");
     $("footer").removeClass("focus");
     $("body").css("cursor", "default");
-    $("#middle").removeClass("focus");
+    $("main").removeClass("focus");
     $("#testConfig").removeClass("focus");
     $("#mobileTestConfig").removeClass("focus");
     $("#bannerCenter").removeClass("focus");
diff --git a/frontend/src/ts/test/result.ts b/frontend/src/ts/test/result.ts
index 83f68f1dd..7cbbeaa44 100644
--- a/frontend/src/ts/test/result.ts
+++ b/frontend/src/ts/test/result.ts
@@ -759,8 +759,8 @@ export async function update(
   }
 
   if (GlarsesMode.get()) {
-    $("#middle #result .noStressMessage").remove();
-    $("#middle #result").prepend(`
+    $("main #result .noStressMessage").remove();
+    $("main #result").prepend(`
 
       <div class='noStressMessage' style="
         text-align: center;
@@ -772,28 +772,28 @@ export async function update(
       </div>
 
     `);
-    $("#middle #result .stats").addClass("hidden");
-    $("#middle #result .chart").addClass("hidden");
-    $("#middle #result #resultWordsHistory").addClass("hidden");
-    $("#middle #result #resultReplay").addClass("hidden");
-    $("#middle #result .loginTip").addClass("hidden");
-    $("#middle #result #showWordHistoryButton").addClass("hidden");
-    $("#middle #result #watchReplayButton").addClass("hidden");
-    $("#middle #result #saveScreenshotButton").addClass("hidden");
+    $("main #result .stats").addClass("hidden");
+    $("main #result .chart").addClass("hidden");
+    $("main #result #resultWordsHistory").addClass("hidden");
+    $("main #result #resultReplay").addClass("hidden");
+    $("main #result .loginTip").addClass("hidden");
+    $("main #result #showWordHistoryButton").addClass("hidden");
+    $("main #result #watchReplayButton").addClass("hidden");
+    $("main #result #saveScreenshotButton").addClass("hidden");
 
     console.log(
       `Test Completed: ${result.wpm} wpm ${result.acc}% acc ${result.rawWpm} raw ${result.consistency}% consistency`
     );
   } else {
-    $("#middle #result .stats").removeClass("hidden");
-    $("#middle #result .chart").removeClass("hidden");
-    // $("#middle #result #resultWordsHistory").removeClass("hidden");
+    $("main #result .stats").removeClass("hidden");
+    $("main #result .chart").removeClass("hidden");
+    // $("main #result #resultWordsHistory").removeClass("hidden");
     if (!Auth?.currentUser) {
-      $("#middle #result .loginTip").removeClass("hidden");
+      $("main #result .loginTip").removeClass("hidden");
     }
-    $("#middle #result #showWordHistoryButton").removeClass("hidden");
-    $("#middle #result #watchReplayButton").removeClass("hidden");
-    $("#middle #result #saveScreenshotButton").removeClass("hidden");
+    $("main #result #showWordHistoryButton").removeClass("hidden");
+    $("main #result #watchReplayButton").removeClass("hidden");
+    $("main #result #saveScreenshotButton").removeClass("hidden");
   }
 
   if (window.scrollY > 0) {
diff --git a/frontend/static/email-handler.html b/frontend/static/email-handler.html
index 9762a64b4..e7fceff25 100644
--- a/frontend/static/email-handler.html
+++ b/frontend/static/email-handler.html
@@ -48,7 +48,7 @@
         font-size: 2.5rem;
       }
 
-      #middle {
+      main {
         color: var(--text-color);
         display: grid;
         justify-content: center;
@@ -144,7 +144,7 @@
           </div>
         </div>
       </div>
-      <div id="middle">
+      <main>
         <div class="preloader">
           <div class="icon">
             <i class="fas fa-fw fa-spin fa-circle-notch"></i>
@@ -161,7 +161,7 @@
           />
           <div class="button">Change</div>
         </div>
-      </div>
+      </main>
     </div>
   </body>
   <script src="js/jquery-3.5.1.min.js"></script>
@@ -193,19 +193,15 @@
         .then((resp) => {
           // Email address has been verified.
 
-          $("#middle .preloader .icon").html(
-            `<i class="fas fa-fw fa-check"></i>`
-          );
-          $("#middle .preloader .text").text(
+          $("main .preloader .icon").html(`<i class="fas fa-fw fa-check"></i>`);
+          $("main .preloader .text").text(
             `Your email address has been verified`
           );
-          $("#middle .preloader .subText").text(`You can now close this tab`);
+          $("main .preloader .subText").text(`You can now close this tab`);
         })
         .catch((error) => {
-          $("#middle .preloader .icon").html(
-            `<i class="fas fa-fw fa-times"></i>`
-          );
-          $("#middle .preloader .text").text(error.message);
+          $("main .preloader .icon").html(`<i class="fas fa-fw fa-times"></i>`);
+          $("main .preloader .text").text(error.message);
 
           // Code is invalid or expired. Ask the user to verify their email address
           // again.
@@ -213,14 +209,14 @@
     }
 
     function showResetPassword() {
-      $("#middle .preloader").addClass("hidden");
-      $("#middle .resetPassword").removeClass("hidden");
-      $("#middle .resetPassword input").trigger("focus");
+      $("main .preloader").addClass("hidden");
+      $("main .resetPassword").removeClass("hidden");
+      $("main .resetPassword input").trigger("focus");
     }
 
     function hideResetPassword() {
-      $("#middle .preloader").removeClass("hidden");
-      $("#middle .resetPassword").addClass("hidden");
+      $("main .preloader").removeClass("hidden");
+      $("main .resetPassword").addClass("hidden");
     }
 
     function handleResetPassword(actionCode, continueUrl) {
@@ -232,10 +228,8 @@
         .then((email) => {
           var accountEmail = email;
 
-          var newPassword = $("#middle .resetPassword .pwd").val();
-          var newPasswordConfirm = $(
-            "#middle .resetPassword .pwd-confirm"
-          ).val();
+          var newPassword = $("main .resetPassword .pwd").val();
+          var newPasswordConfirm = $("main .resetPassword .pwd-confirm").val();
 
           if (newPassword !== newPasswordConfirm) {
             alert("Passwords do not match");
@@ -257,35 +251,29 @@
             .confirmPasswordReset(actionCode, newPassword)
             .then((resp) => {
               // Password reset has been confirmed and new password updated.
-              $("#middle .preloader .icon").html(
+              $("main .preloader .icon").html(
                 `<i class="fas fa-fw fa-check"></i>`
               );
-              $("#middle .preloader .text").text(
-                `Your password has been changed`
-              );
-              $("#middle .preloader .subText").text(
-                `You can now close this tab`
-              );
+              $("main .preloader .text").text(`Your password has been changed`);
+              $("main .preloader .subText").text(`You can now close this tab`);
 
               firebase
                 .auth()
                 .signInWithEmailAndPassword(accountEmail, newPassword);
             })
             .catch((error) => {
-              $("#middle .preloader .icon").html(
+              $("main .preloader .icon").html(
                 `<i class="fas fa-fw fa-times"></i>`
               );
-              $("#middle .preloader .text").text(error.message);
+              $("main .preloader .text").text(error.message);
               // Error occurred during confirmation. The code might have expired or the
               // password is too weak.
             });
         })
         .catch((error) => {
-          $("#middle .preloader .icon").html(
-            `<i class="fas fa-fw fa-times"></i>`
-          );
-          $("#middle .preloader .text").text(error.message);
-          // $("#middle .preloader .subText").text(error);
+          $("main .preloader .icon").html(`<i class="fas fa-fw fa-times"></i>`);
+          $("main .preloader .text").text(error.message);
+          // $("main .preloader .subText").text(error);
 
           // Invalid or expired action code. Ask user to try to reset the password
           // again.
@@ -308,19 +296,15 @@
           return auth.applyActionCode(actionCode);
         })
         .then(() => {
-          $("#middle .preloader .icon").html(
-            `<i class="fas fa-fw fa-check"></i>`
-          );
-          $("#middle .preloader .text").text(
-            `Your account email was reverted.`
-          );
-          $("#middle .preloader .subText").text(``);
+          $("main .preloader .icon").html(`<i class="fas fa-fw fa-check"></i>`);
+          $("main .preloader .text").text(`Your account email was reverted.`);
+          $("main .preloader .subText").text(``);
 
-          $("#middle .preloader").append(`
+          $("main .preloader").append(`
           <br>
           In case you believe your account was compromised, please request a password reset email:
           `);
-          $("#middle .preloader").append(`
+          $("main .preloader").append(`
           <br>
           <div class="button" onclick="sendPasswordResetEmail('${restoredEmail}')">Send Password Reset Email</div>
           `);
@@ -333,10 +317,8 @@
           // in case the account was compromised:
         })
         .catch((error) => {
-          $("#middle .preloader .icon").html(
-            `<i class="fas fa-fw fa-times"></i>`
-          );
-          $("#middle .preloader .text").text(error.message);
+          $("main .preloader .icon").html(`<i class="fas fa-fw fa-times"></i>`);
+          $("main .preloader .text").text(error.message);
         });
     }
 
@@ -344,17 +326,13 @@
       auth
         .sendPasswordResetEmail(email)
         .then(() => {
-          $("#middle .preloader .icon").html(
-            `<i class="fas fa-fw fa-check"></i>`
-          );
-          $("#middle .preloader .text").text(`Password reset email sent`);
-          $("#middle .preloader .subText").text(`Please check your inbox`);
+          $("main .preloader .icon").html(`<i class="fas fa-fw fa-check"></i>`);
+          $("main .preloader .text").text(`Password reset email sent`);
+          $("main .preloader .subText").text(`Please check your inbox`);
         })
         .catch((error) => {
-          $("#middle .preloader .icon").html(
-            `<i class="fas fa-fw fa-times"></i>`
-          );
-          $("#middle .preloader .text").text(error.message);
+          $("main .preloader .icon").html(`<i class="fas fa-fw fa-times"></i>`);
+          $("main .preloader .text").text(error.message);
         });
     }
 
@@ -390,20 +368,18 @@
           // var auth = firebase.auth();
 
           if (!mode) {
-            $("#middle .preloader .icon").html(
+            $("main .preloader .icon").html(
               `<i class="fas fa-fw fa-times"></i>`
             );
-            $("#middle .preloader .text").text(`Mode parameter not found`);
+            $("main .preloader .text").text(`Mode parameter not found`);
             return;
           }
 
           if (!actionCode) {
-            $("#middle .preloader .icon").html(
+            $("main .preloader .icon").html(
               `<i class="fas fa-fw fa-times"></i>`
             );
-            $("#middle .preloader .text").text(
-              `Action code parameter not found`
-            );
+            $("main .preloader .text").text(`Action code parameter not found`);
             return;
           }
 
@@ -426,26 +402,24 @@
               handleVerifyEmail(actionCode, continueUrl);
               break;
             default:
-              $("#middle .preloader .icon").html(
+              $("main .preloader .icon").html(
                 `<i class="fas fa-fw fa-times"></i>`
               );
-              $("#middle .preloader .text").text(`Invalid mode`);
+              $("main .preloader .text").text(`Invalid mode`);
               console.error("no mode found");
             // Error: invalid mode.
           }
 
-          $("#middle .resetPassword .button").on("click", () => {
+          $("main .resetPassword .button").on("click", () => {
             handleResetPassword(actionCode, continueUrl);
           });
 
-          $("#middle .resetPassword input").on("keypress", (e) => {
+          $("main .resetPassword input").on("keypress", (e) => {
             if (e.key === "Enter") handleResetPassword(actionCode, continueUrl);
           });
         } catch (e) {
-          $("#middle .preloader .icon").html(
-            `<i class="fas fa-fw fa-times"></i>`
-          );
-          $("#middle .preloader .text").text(
+          $("main .preloader .icon").html(`<i class="fas fa-fw fa-times"></i>`);
+          $("main .preloader .text").text(
             `Fatal error: ${e.message}. If this issue persists, please report it.`
           );
         }
diff --git a/frontend/static/funbox/crt.css b/frontend/static/funbox/crt.css
index 844a8290d..bebb75835 100644
--- a/frontend/static/funbox/crt.css
+++ b/frontend/static/funbox/crt.css
@@ -43,7 +43,7 @@ body.crtmode #scanline {
   animation: scanline 10s linear infinite;
 }
 body.crtmode header,
-body.crtmode #middle,
+body.crtmode main,
 body.crtmode footer,
 body.crtmode #result,
 body.crtmode #popups,
diff --git a/frontend/static/funbox/mirror.css b/frontend/static/funbox/mirror.css
index b3aa7212f..af9b72252 100644
--- a/frontend/static/funbox/mirror.css
+++ b/frontend/static/funbox/mirror.css
@@ -1,3 +1,3 @@
-#middle {
+main {
   transform: scaleX(-1);
 }
diff --git a/frontend/static/funbox/space_balls.css b/frontend/static/funbox/space_balls.css
index 26ac1a7e4..7456b7fc5 100644
--- a/frontend/static/funbox/space_balls.css
+++ b/frontend/static/funbox/space_balls.css
@@ -16,7 +16,7 @@ body {
   background-position: center;
 }
 
-#middle {
+main {
   transform: rotateX(35deg);
 }
 
diff --git a/frontend/static/funbox/upside_down.css b/frontend/static/funbox/upside_down.css
index ffe88ed5f..dfae19401 100644
--- a/frontend/static/funbox/upside_down.css
+++ b/frontend/static/funbox/upside_down.css
@@ -1,3 +1,3 @@
-#middle {
+main {
   transform: scaleX(-1) scaleY(-1);
 }
diff --git a/frontend/static/main.html b/frontend/static/main.html
index 28a12f2fc..f21f72544 100644
--- a/frontend/static/main.html
+++ b/frontend/static/main.html
@@ -31,7 +31,7 @@
       </div>
       <div id="centerContent" class="hidden">
         <%= compilation.assets["html/header.html"].source() %>
-        <div id="middle" style="height: 100%">
+        <main style="height: 100%">
           <%= compilation.assets["html/pages/loading.html"].source() %> <%=
           compilation.assets["html/pages/test.html"].source() %> <%=
           compilation.assets["html/pages/about.html"].source() %> <%=
@@ -40,7 +40,7 @@
           compilation.assets["html/pages/account.html"].source() %> <%=
           compilation.assets["html/pages/profile.html"].source() %> <%=
           compilation.assets["html/pages/404.html"].source() %>
-        </div>
+        </main>
 
         <%= compilation.assets["html/footer.html"].source() %>
 
diff --git a/frontend/static/privacy-policy.html b/frontend/static/privacy-policy.html
index 376674c26..3c21eb695 100644
--- a/frontend/static/privacy-policy.html
+++ b/frontend/static/privacy-policy.html
@@ -41,7 +41,7 @@
         font-size: 2.5rem;
       }
 
-      #middle {
+      main {
         color: var(--text-color);
       }
 
@@ -108,7 +108,7 @@
           </div>
         </div>
       </header>
-      <div id="middle">
+      <main>
         <p>
           <!-- make sure to update this date every time the policy is changed -->
         </p>
@@ -458,7 +458,7 @@
         >
           Miodec#1512
         </span>
-      </div>
+      </main>
     </div>
   </body>
   <script defer>
diff --git a/frontend/static/security-policy.html b/frontend/static/security-policy.html
index 3d38db421..f6c177958 100644
--- a/frontend/static/security-policy.html
+++ b/frontend/static/security-policy.html
@@ -41,7 +41,7 @@
         font-size: 2.5rem;
       }
 
-      #middle {
+      main {
         color: var(--text-color);
       }
 
@@ -112,7 +112,7 @@
           </div>
         </div>
       </header>
-      <div id="middle">
+      <main>
         <p>
           We take the security and integrity of Monkeytype very seriously. If
           you have found a vulnerability, please report it
@@ -163,7 +163,7 @@
           condition, create significant strains on critical resources, or
           negatively impact users of the site outside of test accounts.
         </p>
-      </div>
+      </main>
     </div>
   </body>
   <script defer>
diff --git a/frontend/static/terms-of-service.html b/frontend/static/terms-of-service.html
index ab55650d5..de441a7fc 100644
--- a/frontend/static/terms-of-service.html
+++ b/frontend/static/terms-of-service.html
@@ -41,7 +41,7 @@
         font-size: 2.5rem;
       }
 
-      #middle {
+      main {
         color: var(--text-color);
       }
 
@@ -108,7 +108,7 @@
           </div>
         </div>
       </header>
-      <div id="middle">
+      <main>
         <!-- 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>
         <h1>Agreement</h1>
@@ -351,7 +351,7 @@
         >
           Miodec#1512
         </span>
-      </div>
+      </main>
       <p>
         Terms based on
         <a