diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 23aeb691305d..05cea772f65b 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -4,6 +4,8 @@
 
 ### Checks
 
+- [ ] Adding/modifying Typescript code?
+  - [ ] I have used `qs`,`qsa` or `qsr` instead of JQuery selectors.
 - [ ] Adding quotes?
   - [ ] Make sure to include translations for the quotes in the description (or another comment) so we can verify their content.
 - [ ] Adding a language?
diff --git a/docs/CONTRIBUTING_ADVANCED.md b/docs/CONTRIBUTING_ADVANCED.md
index b762aab97988..13c5d774c6d1 100644
--- a/docs/CONTRIBUTING_ADVANCED.md
+++ b/docs/CONTRIBUTING_ADVANCED.md
@@ -155,6 +155,8 @@ If you are on a UNIX system and you get a spawn error, run npm with `sudo`.
 
 Code formatting is enforced by [Prettier](https://prettier.io/docs/en/install.html), which automatically runs every time you make a commit.
 
+We are currently in the process of converting from JQuery to vanilla JS. When submitting new code, please use the `qs`, `qsa` and `qsr` helper functions. These return a class with a lot of JQuery-like methods. You can read how they work and import them from `frontend/src/ts/utils/dom.ts`.
+
 For guidelines on commit messages, adding themes, languages, or quotes, please refer to [CONTRIBUTING.md](./CONTRIBUTING.md). Following these guidelines will increase the chances of getting your change accepted.
 
 ## Questions
diff --git a/frontend/__tests__/setup-tests.ts b/frontend/__tests__/setup-tests.ts
index ce5a30cf562a..43b2255ae136 100644
--- a/frontend/__tests__/setup-tests.ts
+++ b/frontend/__tests__/setup-tests.ts
@@ -18,6 +18,44 @@ vi.mock("../src/ts/firebase", () => ({
   isAuthenticated: () => false,
 }));
 
-const input = document.createElement("input");
-input.id = "wordsInput";
-document.body.appendChild(input);
+vi.mock("../src/ts/utils/dom", () => {
+  const createMockElement = (): any => {
+    const mock = {
+      qsr: vi.fn(),
+      qs: vi.fn().mockReturnValue(null),
+      find: vi.fn(),
+      addClass: vi.fn(),
+      removeClass: vi.fn(),
+      hide: vi.fn(),
+      show: vi.fn(),
+      setText: vi.fn(),
+      prependHtml: vi.fn(),
+      empty: vi.fn(),
+      appendHtml: vi.fn(),
+      native: document.createElement("div"),
+    };
+
+    // Make chainable methods return the mock itself
+    mock.qsr.mockImplementation(() => createMockElement());
+    mock.addClass.mockReturnValue(mock);
+    mock.removeClass.mockReturnValue(mock);
+    mock.hide.mockReturnValue(mock);
+    mock.show.mockReturnValue(mock);
+    mock.setText.mockReturnValue(mock);
+    mock.prependHtml.mockReturnValue(mock);
+    mock.empty.mockReturnValue(mock);
+
+    return mock;
+  };
+
+  return {
+    qsr: vi.fn().mockImplementation(() => createMockElement()),
+    qs: vi.fn().mockImplementation(() => createMockElement()),
+    qsa: vi.fn().mockReturnValue([]),
+  };
+});
+
+// Mock document.querySelector to return a div
+global.document.querySelector = vi
+  .fn()
+  .mockReturnValue(document.createElement("div"));
diff --git a/frontend/src/index.html b/frontend/src/index.html
index a8491bf061dc..c514c2b85840 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -10,7 +10,7 @@
     <div id="backgroundLoader" class="hidden"></div>
     <div id="bannerCenter" class="focus"></div>
     <div id="notificationCenter">
-      <div class="clearAll button invisible" style="display: none">
+      <div class="clearAll button hidden">
         <i class="fas fa-times"></i>
         Clear all
       </div>
diff --git a/frontend/src/styles/notifications.scss b/frontend/src/styles/notifications.scss
index c2f0f7cad5b2..54a808dc24b7 100644
--- a/frontend/src/styles/notifications.scss
+++ b/frontend/src/styles/notifications.scss
@@ -13,6 +13,7 @@
   .clearAll.button {
     font-size: 0.75em;
     margin-bottom: 1rem;
+    overflow: hidden;
   }
   &.focus .clearAll {
     visibility: hidden;
diff --git a/frontend/src/ts/auth.ts b/frontend/src/ts/auth.ts
index 65be9fbeecae..6286478316ca 100644
--- a/frontend/src/ts/auth.ts
+++ b/frontend/src/ts/auth.ts
@@ -30,6 +30,7 @@ import { getActiveFunboxesWithFunction } from "./test/funbox/list";
 import * as Sentry from "./sentry";
 import { tryCatch } from "@monkeytype/util/trycatch";
 import * as AuthEvent from "./observables/auth-event";
+import { qs, qsa } from "./utils/dom";
 
 export const gmailProvider = new GoogleAuthProvider();
 export const githubProvider = new GithubAuthProvider();
@@ -43,9 +44,9 @@ async function sendVerificationEmail(): Promise<void> {
   }
 
   Loader.show();
-  $(".sendVerificationEmail").prop("disabled", true);
+  qs(".sendVerificationEmail")?.disable();
   const result = await Ape.users.verificationEmail();
-  $(".sendVerificationEmail").prop("disabled", false);
+  qs(".sendVerificationEmail")?.enable();
   if (result.status !== 200) {
     Loader.hide();
     Notifications.add(
@@ -100,7 +101,7 @@ async function getDataAndInit(): Promise<boolean> {
   } catch (error) {
     console.error(error);
     LoginPage.enableInputs();
-    $("header nav .view-account").css("opacity", 1);
+    qs("header nav .view-account")?.setStyle({ opacity: "1" });
     if (error instanceof DB.SnapshotInitError) {
       if (error.responseCode === 429) {
         Notifications.add(
@@ -215,9 +216,9 @@ export async function signIn(email: string, password: string): Promise<void> {
     return;
   }
 
-  const rememberMe = $(".pageLogin .login #rememberMe input").prop(
-    "checked",
-  ) as boolean;
+  const rememberMe =
+    qs<HTMLInputElement>(".pageLogin .login #rememberMe input")?.isChecked() ??
+    false;
 
   const { error } = await tryCatch(
     signInWithEmailAndPassword(email, password, rememberMe),
@@ -249,9 +250,9 @@ async function signInWithProvider(provider: AuthProvider): Promise<void> {
   LoginPage.showPreloader();
   LoginPage.disableInputs();
   LoginPage.disableSignUpButton();
-  const rememberMe = $(".pageLogin .login #rememberMe input").prop(
-    "checked",
-  ) as boolean;
+  const rememberMe =
+    qs<HTMLInputElement>(".pageLogin .login #rememberMe input")?.isChecked() ??
+    false;
 
   const { error } = await tryCatch(signInWithPopup(provider, rememberMe));
 
@@ -406,24 +407,24 @@ async function signUp(): Promise<void> {
   }
 }
 
-$(".pageLogin .login form").on("submit", (e) => {
+qs(".pageLogin .login form")?.on("submit", (e) => {
   e.preventDefault();
   const email =
-    ($(".pageLogin .login input")[0] as HTMLInputElement).value ?? "";
+    qsa<HTMLInputElement>(".pageLogin .login input")?.[0]?.getValue() ?? "";
   const password =
-    ($(".pageLogin .login input")[1] as HTMLInputElement).value ?? "";
+    qsa<HTMLInputElement>(".pageLogin .login input")?.[1]?.getValue() ?? "";
   void signIn(email, password);
 });
 
-$(".pageLogin .login button.signInWithGoogle").on("click", () => {
+qs(".pageLogin .login button.signInWithGoogle")?.on("click", () => {
   void signInWithGoogle();
 });
 
-$(".pageLogin .login button.signInWithGitHub").on("click", () => {
+qs(".pageLogin .login button.signInWithGitHub")?.on("click", () => {
   void signInWithGitHub();
 });
 
-$("nav .accountButtonAndMenu .menu button.signOut").on("click", () => {
+qs("nav .accountButtonAndMenu .menu button.signOut")?.on("click", () => {
   if (!isAuthAvailable()) {
     Notifications.add("Authentication uninitialized", -1, {
       duration: 3,
@@ -433,19 +434,20 @@ $("nav .accountButtonAndMenu .menu button.signOut").on("click", () => {
   signOut();
 });
 
-$(".pageLogin .register form").on("submit", (e) => {
+qs(".pageLogin .register form")?.on("submit", (e) => {
   e.preventDefault();
   void signUp();
 });
 
-$(".pageAccountSettings").on("click", "#addGoogleAuth", () => {
+qs(".pageAccountSettings")?.onChild("click", "#addGoogleAuth", () => {
   void addGoogleAuth();
 });
-$(".pageAccountSettings").on("click", "#addGithubAuth", () => {
+
+qs(".pageAccountSettings")?.onChild("click", "#addGithubAuth", () => {
   void addGithubAuth();
 });
 
-$(".pageAccount").on("click", ".sendVerificationEmail", () => {
+qs(".pageAccount")?.onChild("click", ".sendVerificationEmail", () => {
   if (!ConnectionState.get()) {
     Notifications.add("You are offline", 0, {
       duration: 2,
diff --git a/frontend/src/ts/commandline/commandline.ts b/frontend/src/ts/commandline/commandline.ts
index b24021d4717b..0ccc07f8a6fa 100644
--- a/frontend/src/ts/commandline/commandline.ts
+++ b/frontend/src/ts/commandline/commandline.ts
@@ -19,6 +19,7 @@ import {
   ValidationResult,
 } from "../elements/input-validation";
 import { isInputElementFocused } from "../input/input-element";
+import { qs } from "../utils/dom";
 
 type CommandlineMode = "search" | "input";
 type InputModeParams = {
@@ -55,14 +56,14 @@ let lastState:
   | undefined;
 
 function removeCommandlineBackground(): void {
-  $("#commandLine").addClass("noBackground");
+  qs("#commandLine")?.addClass("noBackground");
   if (Config.showOutOfFocusWarning) {
     OutOfFocus.hide();
   }
 }
 
 function addCommandlineBackground(): void {
-  $("#commandLine").removeClass("noBackground");
+  qs("#commandLine")?.removeClass("noBackground");
   if (Config.showOutOfFocusWarning && !isInputElementFocused()) {
     OutOfFocus.show();
   }
diff --git a/frontend/src/ts/config.ts b/frontend/src/ts/config.ts
index 1f447a12b532..e8d23a60c74b 100644
--- a/frontend/src/ts/config.ts
+++ b/frontend/src/ts/config.ts
@@ -629,6 +629,13 @@ export function setIndicateTypos(
   return genericSet("indicateTypos", value, nosave);
 }
 
+export function setCompositionDisplay(
+  value: ConfigSchemas.CompositionDisplay,
+  nosave?: boolean,
+): boolean {
+  return genericSet("compositionDisplay", value, nosave);
+}
+
 export function setAutoSwitchTheme(
   boolean: boolean,
   nosave?: boolean,
diff --git a/frontend/src/ts/controllers/ad-controller.ts b/frontend/src/ts/controllers/ad-controller.ts
index 9dd7cd258228..1029b0e92451 100644
--- a/frontend/src/ts/controllers/ad-controller.ts
+++ b/frontend/src/ts/controllers/ad-controller.ts
@@ -7,6 +7,7 @@ import Config from "../config";
 import * as TestState from "../test/test-state";
 import * as EG from "./eg-ad-controller";
 import * as PW from "./pw-ad-controller";
+import { onDocumentReady, qs } from "../utils/dom";
 
 const breakpoint = 900;
 let widerThanBreakpoint = true;
@@ -61,32 +62,32 @@ function removeAll(): void {
 }
 
 function removeSellout(): void {
-  $("#ad-footer-wrapper").remove();
-  $("#ad-footer-small-wrapper").remove();
-  $("#ad-about-1-wrapper").remove();
-  $("#ad-about-1-small-wrapper").remove();
-  $("#ad-about-2-wrapper").remove();
-  $("#ad-about-2-small-wrapper").remove();
-  $("#ad-settings-1-wrapper").remove();
-  $("#ad-settings-1-small-wrapper").remove();
-  $("#ad-settings-2-wrapper").remove();
-  $("#ad-settings-2-small-wrapper").remove();
-  $("#ad-settings-3-wrapper").remove();
-  $("#ad-settings-3-small-wrapper").remove();
-  $("#ad-account-1-wrapper").remove();
-  $("#ad-account-1-small-wrapper").remove();
-  $("#ad-account-2-wrapper").remove();
-  $("#ad-account-2-small-wrapper").remove();
+  qs("#ad-footer-wrapper")?.remove();
+  qs("#ad-footer-small-wrapper")?.remove();
+  qs("#ad-about-1-wrapper")?.remove();
+  qs("#ad-about-1-small-wrapper")?.remove();
+  qs("#ad-about-2-wrapper")?.remove();
+  qs("#ad-about-2-small-wrapper")?.remove();
+  qs("#ad-settings-1-wrapper")?.remove();
+  qs("#ad-settings-1-small-wrapper")?.remove();
+  qs("#ad-settings-2-wrapper")?.remove();
+  qs("#ad-settings-2-small-wrapper")?.remove();
+  qs("#ad-settings-3-wrapper")?.remove();
+  qs("#ad-settings-3-small-wrapper")?.remove();
+  qs("#ad-account-1-wrapper")?.remove();
+  qs("#ad-account-1-small-wrapper")?.remove();
+  qs("#ad-account-2-wrapper")?.remove();
+  qs("#ad-account-2-small-wrapper")?.remove();
 }
 
 function removeOn(): void {
-  $("#ad-vertical-right-wrapper").remove();
-  $("#ad-vertical-left-wrapper").remove();
+  qs("#ad-vertical-right-wrapper")?.remove();
+  qs("#ad-vertical-left-wrapper")?.remove();
 }
 
 function removeResult(): void {
-  $("#ad-result-wrapper").remove();
-  $("#ad-result-small-wrapper").remove();
+  qs("#ad-result-wrapper")?.remove();
+  qs("#ad-result-small-wrapper")?.remove();
 }
 
 function updateVerticalMargin(): void {
@@ -219,7 +220,7 @@ export async function renderResult(): Promise<void> {
   await checkCookieblocker();
 
   if (adBlock) {
-    $("#ad-result-wrapper .iconAndText .text").html(`
+    qs("#ad-result-wrapper .iconAndText .text")?.setHtml(`
     Using an ad blocker? No worries
     <div class="smalltext">
       We understand ads can be annoying
@@ -233,7 +234,7 @@ export async function renderResult(): Promise<void> {
   }
 
   if (cookieBlocker) {
-    $("#ad-result-wrapper .iconAndText .text").html(`
+    qs("#ad-result-wrapper .iconAndText .text")?.setHtml(`
     Ads not working? Ooops
     <div class="smalltext">
       You may have a cookie popup blocker enabled - ads will not show without your consent
@@ -255,15 +256,15 @@ export async function renderResult(): Promise<void> {
 
 export function updateFooterAndVerticalAds(visible: boolean): void {
   if (visible) {
-    $("#ad-vertical-left-wrapper").removeClass("testPage");
-    $("#ad-vertical-right-wrapper").removeClass("testPage");
-    $("#ad-footer-wrapper").removeClass("testPage");
-    $("#ad-footer-small-wrapper").removeClass("testPage");
+    qs("#ad-vertical-left-wrapper")?.removeClass("testPage");
+    qs("#ad-vertical-right-wrapper")?.removeClass("testPage");
+    qs("#ad-footer-wrapper")?.removeClass("testPage");
+    qs("#ad-footer-small-wrapper")?.removeClass("testPage");
   } else {
-    $("#ad-vertical-left-wrapper").addClass("testPage");
-    $("#ad-vertical-right-wrapper").addClass("testPage");
-    $("#ad-footer-wrapper").addClass("testPage");
-    $("#ad-footer-small-wrapper").addClass("testPage");
+    qs("#ad-vertical-left-wrapper")?.addClass("testPage");
+    qs("#ad-vertical-right-wrapper")?.addClass("testPage");
+    qs("#ad-footer-wrapper")?.addClass("testPage");
+    qs("#ad-footer-small-wrapper")?.addClass("testPage");
   }
 }
 
@@ -293,7 +294,7 @@ const debouncedMarginUpdate = debounce(500, updateVerticalMargin);
 const debouncedBreakpointUpdate = debounce(500, updateBreakpoint);
 const debouncedBreakpoint2Update = debounce(500, updateBreakpoint2);
 
-$(window).on("resize", () => {
+window.addEventListener("resize", () => {
   debouncedMarginUpdate();
   debouncedBreakpointUpdate();
   debouncedBreakpoint2Update();
@@ -316,7 +317,7 @@ BannerEvent.subscribe(() => {
   updateVerticalMargin();
 });
 
-$(() => {
+onDocumentReady(() => {
   updateBreakpoint(true);
   updateBreakpoint2();
 });
@@ -325,7 +326,7 @@ window.onerror = function (error): void {
   //@ts-expect-error ---
   if (choice === "eg") {
     if (typeof error === "string" && error.startsWith("EG APS")) {
-      $("#ad-result-wrapper .iconAndText").addClass("withLeft");
+      qs("#ad-result-wrapper .iconAndText")?.addClass("withLeft");
     }
   }
 };
diff --git a/frontend/src/ts/controllers/analytics-controller.ts b/frontend/src/ts/controllers/analytics-controller.ts
index b16b41502d04..51eefe265d33 100644
--- a/frontend/src/ts/controllers/analytics-controller.ts
+++ b/frontend/src/ts/controllers/analytics-controller.ts
@@ -5,6 +5,7 @@ import {
 } from "firebase/analytics";
 import { getAnalytics } from "../firebase";
 import { createErrorMessage } from "../utils/misc";
+import { qs } from "../utils/dom";
 
 let analytics: AnalyticsType;
 
@@ -28,7 +29,7 @@ export function activateAnalytics(): void {
   try {
     analytics = getAnalytics();
     setAnalyticsCollectionEnabled(analytics, true);
-    $("body").append(`
+    qs("body")?.appendHtml(`
     <script
     async
     src="https://www.googletagmanager.com/gtag/js?id=UA-165993088-1"
diff --git a/frontend/src/ts/controllers/challenge-controller.ts b/frontend/src/ts/controllers/challenge-controller.ts
index e69cc8041c29..eb6eccdcba76 100644
--- a/frontend/src/ts/controllers/challenge-controller.ts
+++ b/frontend/src/ts/controllers/challenge-controller.ts
@@ -20,6 +20,7 @@ import { CompletedEvent } from "@monkeytype/schemas/results";
 import { areUnsortedArraysEqual } from "../utils/arrays";
 import { tryCatch } from "@monkeytype/util/trycatch";
 import { Challenge } from "@monkeytype/schemas/challenges";
+import { qs } from "../utils/dom";
 
 let challengeLoading = false;
 
@@ -219,8 +220,8 @@ export async function setup(challengeName: string): Promise<boolean> {
     Notifications.add(message, -1);
     ManualRestart.set();
     setTimeout(() => {
-      $("header .config").removeClass("hidden");
-      $(".page.pageTest").removeClass("hidden");
+      qs("header .config")?.removeClass("hidden");
+      qs(".page.pageTest")?.removeClass("hidden");
     }, 250);
     return false;
   }
@@ -234,8 +235,8 @@ export async function setup(challengeName: string): Promise<boolean> {
       Notifications.add("Challenge not found", 0);
       ManualRestart.set();
       setTimeout(() => {
-        $("header .config").removeClass("hidden");
-        $(".page.pageTest").removeClass("hidden");
+        qs("header .config")?.removeClass("hidden");
+        qs(".page.pageTest")?.removeClass("hidden");
       }, 250);
       return false;
     }
@@ -316,8 +317,8 @@ export async function setup(challengeName: string): Promise<boolean> {
     }
     ManualRestart.set();
     notitext = challenge.message;
-    $("header .config").removeClass("hidden");
-    $(".page.pageTest").removeClass("hidden");
+    qs("header .config")?.removeClass("hidden");
+    qs(".page.pageTest")?.removeClass("hidden");
 
     if (notitext === undefined) {
       Notifications.add(`Challenge '${challenge.display}' loaded.`, 0);
diff --git a/frontend/src/ts/controllers/chart-controller.ts b/frontend/src/ts/controllers/chart-controller.ts
index 32e4de9d6fd3..2a8c1e8ce243 100644
--- a/frontend/src/ts/controllers/chart-controller.ts
+++ b/frontend/src/ts/controllers/chart-controller.ts
@@ -68,6 +68,7 @@ import * as Arrays from "../utils/arrays";
 import * as Numbers from "@monkeytype/util/numbers";
 import { blendTwoHexColors } from "../utils/colors";
 import { typedKeys } from "../utils/misc";
+import { qs } from "../utils/dom";
 
 class ChartWithUpdateColors<
   TType extends ChartType = ChartType,
@@ -1101,8 +1102,8 @@ function updateAccountChartButton(
   className: ButtonBelowChart,
 ): void {
   isActive
-    ? $(`.pageAccount ${className}`).addClass("active")
-    : $(`.pageAccount ${className}`).removeClass("active");
+    ? qs(`.pageAccount ${className}`)?.addClass("active")
+    : qs(`.pageAccount ${className}`)?.removeClass("active");
 }
 
 function updateResults(updateChart = true): void {
diff --git a/frontend/src/ts/controllers/eg-ad-controller.ts b/frontend/src/ts/controllers/eg-ad-controller.ts
index 3de85395c018..bb4145bb64aa 100644
--- a/frontend/src/ts/controllers/eg-ad-controller.ts
+++ b/frontend/src/ts/controllers/eg-ad-controller.ts
@@ -1,6 +1,8 @@
+import { qs } from "../utils/dom";
+
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 export function init(): void {
-  $("head").append(`<script>
+  qs("head")?.appendHtml(`<script>
   !function(e){var s=new XMLHttpRequest;s.open("GET","https://api.enthusiastgaming.net/scripts/cdn.enthusiast.gg/script/eg-aps/release/eg-aps-bootstrap-v2.0.0.bundle.js?site=monkeytype.com",!0),s.onreadystatechange=function(){var t;4==s.readyState&&(200<=s.status&&s.status<300||304==s.status)&&((t=e.createElement("script")).type="text/javascript",t.text=s.responseText,e.head.appendChild(t))},s.send(null)}(document);
   (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
     new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
@@ -8,8 +10,8 @@ export function init(): void {
   'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
   })(window,document,'script','dataLayer','GTM-W7WN5QV');
   </script>`);
-  $("body")
-    .prepend(`<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W7WN5QV"
+  qs("body")
+    ?.prependHtml(`<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W7WN5QV"
   height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>`);
 }
 
diff --git a/frontend/src/ts/controllers/page-controller.ts b/frontend/src/ts/controllers/page-controller.ts
index 2950baf11e5f..fbf98be33d61 100644
--- a/frontend/src/ts/controllers/page-controller.ts
+++ b/frontend/src/ts/controllers/page-controller.ts
@@ -17,6 +17,7 @@ import * as PageTransition from "../states/page-transition";
 import * as AdController from "../controllers/ad-controller";
 import * as Focus from "../test/focus";
 import Page, { PageName, LoadingOptions } from "../pages/page";
+import { qsa } from "../utils/dom";
 
 type ChangeOptions = {
   force?: boolean;
@@ -201,7 +202,7 @@ export async function change(
 
   //start
   PageTransition.set(true);
-  $(".page").removeClass("active");
+  qsa(".page")?.removeClass("active");
 
   //previous page
   await previousPage?.beforeHide?.();
diff --git a/frontend/src/ts/controllers/route-controller.ts b/frontend/src/ts/controllers/route-controller.ts
index 918b310d0281..d9d4295251c4 100644
--- a/frontend/src/ts/controllers/route-controller.ts
+++ b/frontend/src/ts/controllers/route-controller.ts
@@ -5,20 +5,11 @@ import { isAuthAvailable, isAuthenticated } from "../firebase";
 import { isFunboxActive } from "../test/funbox/list";
 import * as TestState from "../test/test-state";
 import * as Notifications from "../elements/notifications";
-import { LoadingOptions } from "../pages/page";
 import * as NavigationEvent from "../observables/navigation-event";
 
 //source: https://www.youtube.com/watch?v=OstALBk-jTc
 // https://www.youtube.com/watch?v=OstALBk-jTc
 
-//this will be used in tribe
-type NavigateOptions = {
-  force?: boolean;
-  empty?: boolean;
-  data?: unknown;
-  loadingOptions?: LoadingOptions;
-};
-
 function pathToRegex(path: string): RegExp {
   return new RegExp(
     "^" + path.replace(/\//g, "\\/").replace(/:\w+/g, "(.+)") + "$",
@@ -42,7 +33,7 @@ type Route = {
   path: string;
   load: (
     params: Record<string, string>,
-    navigateOptions: NavigateOptions,
+    navigateOptions: NavigationEvent.NavigateOptions,
   ) => Promise<void>;
 };
 
@@ -166,7 +157,7 @@ export async function navigate(
   url = window.location.pathname +
     window.location.search +
     window.location.hash,
-  options = {} as NavigateOptions,
+  options = {} as NavigationEvent.NavigateOptions,
 ): Promise<void> {
   if (
     !options.force &&
@@ -211,7 +202,9 @@ export async function navigate(
   await router(options);
 }
 
-async function router(options = {} as NavigateOptions): Promise<void> {
+async function router(
+  options = {} as NavigationEvent.NavigateOptions,
+): Promise<void> {
   const matches = routes.map((r) => {
     return {
       route: r,
@@ -251,6 +244,6 @@ document.addEventListener("DOMContentLoaded", () => {
   });
 });
 
-NavigationEvent.subscribe((it) => {
-  void navigate(it.url, { data: it.data });
+NavigationEvent.subscribe((url, options) => {
+  void navigate(url, options);
 });
diff --git a/frontend/src/ts/controllers/sound-controller.ts b/frontend/src/ts/controllers/sound-controller.ts
index 007774b11b38..c1dd3547dda0 100644
--- a/frontend/src/ts/controllers/sound-controller.ts
+++ b/frontend/src/ts/controllers/sound-controller.ts
@@ -436,7 +436,7 @@ export async function previewError(val: string): Promise<void> {
 
 let currentCode = "KeyA";
 
-$(document).on("keydown", (event) => {
+document.addEventListener("keydown", (event) => {
   currentCode = event.code || "KeyA";
 });
 
@@ -638,6 +638,11 @@ export async function playTimeWarning(): Promise<void> {
   soundToPlay.play();
 }
 
+export async function clearAllSounds(): Promise<void> {
+  const Howl = (await gethowler()).Howler;
+  Howl.stop();
+}
+
 function playNote(
   codeOverride?: string,
   oscillatorTypeOverride?: SupportedOscillatorTypes,
diff --git a/frontend/src/ts/controllers/theme-controller.ts b/frontend/src/ts/controllers/theme-controller.ts
index fd326b3f51fd..e05397dc5fbc 100644
--- a/frontend/src/ts/controllers/theme-controller.ts
+++ b/frontend/src/ts/controllers/theme-controller.ts
@@ -13,6 +13,7 @@ import { debounce } from "throttle-debounce";
 import { ThemeName } from "@monkeytype/schemas/configs";
 import { themes, ThemesList } from "../constants/themes";
 import fileStorage from "../utils/file-storage";
+import { qs, qsa } from "../utils/dom";
 
 export let randomTheme: ThemeName | string | null = null;
 let isPreviewingTheme = false;
@@ -56,7 +57,10 @@ async function updateFavicon(): Promise<void> {
   </g>
 </svg>`;
 
-    $("#favicon").attr("href", "data:image/svg+xml;base64," + btoa(svgPre));
+    qs("#favicon")?.setAttribute(
+      "href",
+      "data:image/svg+xml;base64," + btoa(svgPre),
+    );
   }, 125);
 }
 
@@ -73,16 +77,16 @@ export async function loadStyle(name: string): Promise<void> {
   return new Promise((resolve) => {
     function swapCurrentToNext(): void {
       console.debug("Theme controller swapping elements");
-      const current = $("#currentTheme");
-      const next = $("#nextTheme");
-      if (next.length === 0) {
+      const current = qs("#currentTheme");
+      const next = qs("#nextTheme");
+      if (current === null || next === null) {
         console.debug(
-          "Theme controller failed to swap elements, next is missing",
+          "Theme controller failed to swap elements, next or current is missing",
         );
         return;
       }
       current.remove();
-      next.attr("id", "currentTheme");
+      next.setAttribute("id", "currentTheme");
     }
 
     console.debug("Theme controller loading style", name);
@@ -91,7 +95,7 @@ export async function loadStyle(name: string): Promise<void> {
         Loader.show();
       }, 100),
     );
-    $("#nextTheme").remove();
+    qs("#nextTheme")?.remove();
     const headScript = document.querySelector("#currentTheme");
     const link = document.createElement("link");
     link.type = "text/css";
@@ -103,7 +107,7 @@ export async function loadStyle(name: string): Promise<void> {
       swapCurrentToNext();
       loadStyleLoaderTimeouts.map((t) => clearTimeout(t));
       loadStyleLoaderTimeouts = [];
-      $("#keymap .keymapKey").stop(true, true).removeAttr("style");
+      qsa("#keymap .keymapKey")?.setStyle({});
       resolve();
     };
     link.onerror = (e): void => {
@@ -114,7 +118,7 @@ export async function loadStyle(name: string): Promise<void> {
       swapCurrentToNext();
       loadStyleLoaderTimeouts.map((t) => clearTimeout(t));
       loadStyleLoaderTimeouts = [];
-      $("#keymap .keymapKey").stop(true, true).removeAttr("style");
+      qsa("#keymap .keymapKey")?.setStyle({});
       resolve();
     };
     if (name === "custom") {
@@ -168,8 +172,7 @@ async function apply(
 
   ThemeColors.reset();
 
-  $(".keymapKey").attr("style", "");
-  // $("#currentTheme").attr("href", `themes/${name}.css`);
+  qsa("#keymap .keymapKey")?.setStyle({});
   await loadStyle(name);
 
   if (name !== "custom") {
@@ -180,17 +183,16 @@ async function apply(
 
   // if (!isPreview) {
   const colors = await ThemeColors.getAll();
-  $(".keymapKey").attr("style", "");
+  qsa("#keymap .keymapKey")?.setStyle({});
   ChartController.updateAllChartColors();
   void updateFavicon();
-  $("#metaThemeColor").attr("content", colors.bg);
-  // }
+  qs("#metaThemeColor")?.setAttribute("content", colors.bg);
   updateFooterIndicator(isPreview ? themeName : undefined);
 
   if (isColorDark(await ThemeColors.get("bg"))) {
-    $("body").addClass("darkMode");
+    qs("body")?.addClass("darkMode");
   } else {
-    $("body").removeClass("darkMode");
+    qs("body")?.removeClass("darkMode");
   }
 }
 
@@ -377,29 +379,21 @@ async function clearRandom(): Promise<void> {
 
 function applyCustomBackgroundSize(): void {
   if (Config.customBackgroundSize === "max") {
-    $(".customBackground img").css({
-      // width: "calc(100%)",
-      // height: "calc(100%)",
+    qs(".customBackground img")?.setStyle({
       objectFit: "",
     });
   } else {
-    $(".customBackground img").css({
+    qs(".customBackground img")?.setStyle({
       objectFit: Config.customBackgroundSize,
     });
   }
 }
 
 export async function applyCustomBackground(): Promise<void> {
-  // $(".customBackground").css({
-  //   backgroundImage: `url(${Config.customBackground})`,
-  //   backgroundAttachment: "fixed",
-  // });
-
   let backgroundUrl = Config.customBackground;
-
-  $(
+  qs<HTMLInputElement>(
     ".pageSettings .section[data-config-name='customBackgroundSize'] input[type='text']",
-  ).val(backgroundUrl);
+  )?.setValue(backgroundUrl);
 
   //if there is a localBackgroundFile available, use it.
   const localBackgroundFile = await fileStorage.getFile("LocalBackgroundFile");
@@ -409,17 +403,17 @@ export async function applyCustomBackground(): Promise<void> {
   }
 
   // hide the filter section initially and always
-  $(
+  qs(
     ".pageSettings .section[data-config-name='customBackgroundFilter']",
-  ).addClass("hidden");
+  )?.addClass("hidden");
 
   if (backgroundUrl === "") {
-    $("#words").removeClass("noErrorBorder");
-    $("#resultWordsHistory").removeClass("noErrorBorder");
-    $(".customBackground img").remove();
+    qs("#words")?.removeClass("noErrorBorder");
+    qs("#resultWordsHistory")?.removeClass("noErrorBorder");
+    qs(".customBackground img")?.remove();
   } else {
-    $("#words").addClass("noErrorBorder");
-    $("#resultWordsHistory").addClass("noErrorBorder");
+    qs("#words")?.addClass("noErrorBorder");
+    qs("#resultWordsHistory")?.addClass("noErrorBorder");
 
     //use setAttribute for possible unsafe customBackground value
     const container = document.querySelector(".customBackground");
@@ -432,9 +426,9 @@ export async function applyCustomBackground(): Promise<void> {
     );
     img.onload = () => {
       // show the filter section only if the image loads successfully
-      $(
+      qs(
         ".pageSettings .section[data-config-name='customBackgroundFilter']",
-      ).removeClass("hidden");
+      )?.removeClass("hidden");
     };
 
     container?.replaceChildren(img);
@@ -450,11 +444,11 @@ export async function applyFontFamily(): Promise<void> {
   const localFont = await fileStorage.getFile("LocalFontFamilyFile");
   if (localFont === undefined) {
     //use config font
-    $(".customFont").empty();
+    qs(".customFont")?.empty();
   } else {
     font = "LOCALCUSTOM";
 
-    $(".customFont").html(`
+    qs(".customFont")?.setHtml(`
       @font-face{ 
         font-family: LOCALCUSTOM;
         src: url(${localFont});
diff --git a/frontend/src/ts/elements/account-button.ts b/frontend/src/ts/elements/account-button.ts
index 6e4a6de7c2cd..ed29c0b758e4 100644
--- a/frontend/src/ts/elements/account-button.ts
+++ b/frontend/src/ts/elements/account-button.ts
@@ -8,25 +8,34 @@ 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 {
-  $("nav .accountButtonAndMenu").addClass("hidden");
-  $("nav .textButton.view-login").addClass("hidden");
+  accountButtonAndMenuEl.addClass("hidden");
+  loginButtonEl.addClass("hidden");
 }
 
 export function loading(state: boolean): void {
-  $("nav .accountButtonAndMenu .spinner").css({ opacity: state ? "1" : "0" });
-  $("nav .accountButtonAndMenu .avatar").css({ opacity: state ? "0" : "1" });
+  accountButtonAndMenuEl
+    .qs(".spinner")
+    ?.setStyle({ opacity: state ? "1" : "0" });
+  accountButtonAndMenuEl
+    .qs(".avatar")
+    ?.setStyle({ opacity: state ? "0" : "1" });
 }
 
 export function updateName(name: string): void {
-  $("header nav .view-account > .text").text(name);
+  accountButtonAndMenuEl.qs(".view-account > .text")?.setText(name);
 }
 
 function updateFlags(flags: SupportsFlags): void {
-  $("nav .textButton.view-account > .text").append(
-    getHtmlByUserFlags(flags, { iconsOnly: true }),
-  );
+  accountButtonAndMenuEl
+    .qs(".view-account > .text")
+    ?.appendHtml(getHtmlByUserFlags(flags, { iconsOnly: true }));
 }
 
 export function updateAvatar(avatar?: {
@@ -36,7 +45,7 @@ export function updateAvatar(avatar?: {
   const element = getAvatarElement(avatar ?? {}, {
     userIcon: "fas fa-fw fa-user",
   });
-  $("header nav .view-account .avatar").replaceWith(element);
+  accountButtonAndMenuEl.qs(".avatar")?.replaceWith(element);
 }
 
 export function update(): void {
@@ -53,19 +62,18 @@ export function update(): void {
     XpBar.setXp(xp);
     updateAvatar(snapshot);
 
-    $("nav .accountButtonAndMenu .menu .items .goToProfile").attr(
-      "href",
-      `/profile/${name}`,
-    );
+    accountButtonAndMenuEl
+      .qs(".menu .items .goToProfile")
+      ?.setAttribute("href", `/profile/${name}`);
     void Misc.swapElements(
-      document.querySelector("nav .textButton.view-login") as HTMLElement,
-      document.querySelector("nav .accountButtonAndMenu") as HTMLElement,
+      loginButtonEl.native,
+      accountButtonAndMenuEl.native,
       250,
     );
   } else {
     void Misc.swapElements(
-      document.querySelector("nav .accountButtonAndMenu") as HTMLElement,
-      document.querySelector("nav .textButton.view-login") as HTMLElement,
+      accountButtonAndMenuEl.native,
+      loginButtonEl.native,
       250,
       async () => {
         updateName("");
@@ -82,26 +90,25 @@ export function update(): void {
 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) {
-      $("nav .view-account > .notificationBubble").removeClass("hidden");
-      $("nav .goToFriends > .notificationBubble")
-        .removeClass("hidden")
-        .text(pendingFriendRequests);
+      bubbleElements.show();
       return;
     }
   }
 
-  $("nav .view-account > .notificationBubble").addClass("hidden");
-  $("nav .goToFriends > .notificationBubble").addClass("hidden");
+  bubbleElements.hide();
 }
 
 const coarse = window.matchMedia("(pointer:coarse)")?.matches;
 if (coarse) {
-  $("nav .accountButtonAndMenu .textButton.view-account").attr("href", "");
+  accountButtonAndMenuEl.qs(".view-account")?.setAttribute("href", "");
 }
 
 AuthEvent.subscribe((event) => {
diff --git a/frontend/src/ts/elements/alerts.ts b/frontend/src/ts/elements/alerts.ts
index ccd81a8a42e7..295c292fd960 100644
--- a/frontend/src/ts/elements/alerts.ts
+++ b/frontend/src/ts/elements/alerts.ts
@@ -14,6 +14,14 @@ import * as XPBar from "../elements/xp-bar";
 import * as AuthEvent from "../observables/auth-event";
 import * as ActivePage from "../states/active-page";
 import { animate } from "animejs";
+import { qs, qsr } from "../utils/dom";
+
+const alertsPopupEl = qsr("#alertsPopup");
+const accountAlertsListEl = alertsPopupEl.qsr(".accountAlerts .list");
+const psasListEl = alertsPopupEl.qsr(".psas .list");
+const notificationHistoryListEl = alertsPopupEl.qsr(
+  ".notificationHistory .list",
+);
 
 let accountAlerts: MonkeyMail[] = [];
 let maxMail = 0;
@@ -35,8 +43,8 @@ function hide(): void {
   DB.updateInboxUnreadSize(0);
   void modal.hide({
     afterAnimation: async () => {
-      $("#alertsPopup .notificationHistory .list").empty();
-      $("#alertsPopup .psas .list").empty();
+      notificationHistoryListEl?.empty();
+      psasListEl?.empty();
 
       const badgesClaimed: string[] = [];
       let totalXpClaimed = 0;
@@ -112,13 +120,13 @@ async function show(): Promise<void> {
   void modal.show({
     beforeAnimation: async () => {
       if (isAuthenticated()) {
-        $("#alertsPopup .accountAlerts").removeClass("hidden");
-        $("#alertsPopup .separator.accountSeparator").removeClass("hidden");
-        $("#alertsPopup .accountAlerts .list").html(`
+        alertsPopupEl.qs(".accountAlerts")?.show();
+        alertsPopupEl.qs(".separator.accountSeparator")?.show();
+        accountAlertsListEl.setHtml(`
           <div class="preloader"><i class="fas fa-fw fa-spin fa-circle-notch"></i></div>`);
       } else {
-        $("#alertsPopup .accountAlerts").addClass("hidden");
-        $("#alertsPopup .separator.accountSeparator").addClass("hidden");
+        alertsPopupEl.qs(".accountAlerts")?.hide();
+        alertsPopupEl.qs(".separator.accountSeparator")?.hide();
       }
 
       accountAlerts = [];
@@ -138,7 +146,7 @@ async function show(): Promise<void> {
 
 async function getAccountAlerts(): Promise<void> {
   if (!ConnectionState.get()) {
-    $("#alertsPopup .accountAlerts .list").html(`
+    accountAlertsListEl.setHtml(`
     <div class="nothing">
     You are offline
     </div>
@@ -149,14 +157,14 @@ async function getAccountAlerts(): Promise<void> {
   const inboxResponse = await Ape.users.getInbox();
 
   if (inboxResponse.status === 503) {
-    $("#alertsPopup .accountAlerts .list").html(`
+    accountAlertsListEl.setHtml(`
     <div class="nothing">
     Account inboxes are temporarily unavailable
     </div>
     `);
     return;
   } else if (inboxResponse.status !== 200) {
-    $("#alertsPopup .accountAlerts .list").html(`
+    accountAlertsListEl.setHtml(`
     <div class="nothing">
     Error getting inbox: ${inboxResponse.body.message} Please try again later
     </div>
@@ -167,10 +175,21 @@ async function getAccountAlerts(): Promise<void> {
 
   accountAlerts = inboxData.inbox;
 
+  // accountAlerts = [
+  //   {
+  //     id: "test-alert-1",
+  //     subject: "Welcome to Monkeytype!",
+  //     body: "Thank you for joining Monkeytype. We hope you enjoy your stay!",
+  //     timestamp: new Date().toISOString(),
+  //     read: false,
+  //     rewards: [{ type: "xp", item: 100 }],
+  //   },
+  // ];
+
   updateClaimDeleteAllButton();
 
   if (accountAlerts.length === 0) {
-    $("#alertsPopup .accountAlerts .list").html(`
+    accountAlertsListEl.setHtml(`
     <div class="nothing">
     Nothing to show
     </div>
@@ -182,7 +201,7 @@ async function getAccountAlerts(): Promise<void> {
 
   updateInboxSize();
 
-  $("#alertsPopup .accountAlerts .list").empty();
+  accountAlertsListEl.empty();
 
   for (const ie of accountAlerts) {
     if (!ie.read && ie.rewards.length === 0) {
@@ -198,7 +217,7 @@ async function getAccountAlerts(): Promise<void> {
       </div>`;
     }
 
-    $("#alertsPopup .accountAlerts .list").append(`
+    accountAlertsListEl.appendHtml(`
     
       <div class="item" data-id="${ie.id}">
         <div class="indicator ${ie.read ? "" : "main"}"></div>
@@ -236,11 +255,9 @@ export function addPSA(message: string, level: number): void {
 
 function fillPSAs(): void {
   if (state.psas.length === 0) {
-    $("#alertsPopup .psas .list").html(
-      `<div class="nothing">Nothing to show</div>`,
-    );
+    psasListEl.setHtml(`<div class="nothing">Nothing to show</div>`);
   } else {
-    $("#alertsPopup .psas .list").empty();
+    psasListEl.empty();
 
     for (const p of state.psas) {
       const { message, level } = p;
@@ -252,7 +269,7 @@ function fillPSAs(): void {
       } else if (level === 0) {
         levelClass = "sub";
       }
-      $("#alertsPopup .psas .list").prepend(`
+      psasListEl.prependHtml(`
         <div class="item">
         <div class="indicator ${levelClass}"></div>
         <div class="body">
@@ -266,12 +283,11 @@ function fillPSAs(): void {
 
 function fillNotifications(): void {
   if (state.notifications.length === 0) {
-    $("#alertsPopup .notificationHistory .list").html(
+    notificationHistoryListEl.setHtml(
       `<div class="nothing">Nothing to show</div>`,
     );
   } else {
-    $("#alertsPopup .notificationHistory .list").empty();
-
+    notificationHistoryListEl.empty();
     for (const n of state.notifications) {
       const { message, level, customTitle } = n;
       let title = "Notice";
@@ -288,7 +304,7 @@ function fillNotifications(): void {
         title = customTitle;
       }
 
-      $("#alertsPopup .notificationHistory .list").prepend(`
+      notificationHistoryListEl.prependHtml(`
       <div class="item">
       <div class="indicator ${levelClass}"></div>
       <div class="title">${title}</div>
@@ -303,24 +319,24 @@ function fillNotifications(): void {
 
 export function setNotificationBubbleVisible(tf: boolean): void {
   if (tf) {
-    $("header nav .showAlerts .notificationBubble").removeClass("hidden");
+    qs("header nav .showAlerts .notificationBubble")?.show();
   } else {
-    $("header nav .showAlerts .notificationBubble").addClass("hidden");
+    qs("header nav .showAlerts .notificationBubble")?.hide();
   }
 }
 
 function updateInboxSize(): void {
   const remainingItems = accountAlerts.length - mailToDelete.length;
-  $("#alertsPopup .accountAlerts .title .right").text(
-    `${remainingItems}/${maxMail}`,
-  );
+  alertsPopupEl
+    .qs(".accountAlerts .title .right")
+    ?.setText(`${remainingItems}/${maxMail}`);
 }
 
 function deleteAlert(id: string): void {
   mailToDelete.push(id);
-  $(`#alertsPopup .accountAlerts .list .item[data-id="${id}"]`).remove();
-  if ($("#alertsPopup .accountAlerts .list .item").length === 0) {
-    $("#alertsPopup .accountAlerts .list").html(`
+  alertsPopupEl.qs(`.accountAlerts .list .item[data-id="${id}"]`)?.remove();
+  if (alertsPopupEl.qsa(".accountAlerts .list .item").length === 0) {
+    accountAlertsListEl.setHtml(`
     <div class="nothing">
     Nothing to show
     </div>
@@ -332,34 +348,35 @@ function deleteAlert(id: string): void {
 
 function markReadAlert(id: string): void {
   mailToMarkRead.push(id);
-  const item = $(`#alertsPopup .accountAlerts .list .item[data-id="${id}"]`);
+  const item = alertsPopupEl.qsr(`.accountAlerts .list .item[data-id="${id}"]`);
   updateClaimDeleteAllButton();
 
-  item.find(".indicator").removeClass("main");
-  item.find(".buttons").empty();
+  item.qs(".indicator")?.removeClass("main");
+  item.qs(".buttons")?.empty();
   item
-    .find(".buttons")
-    .append(
+    .qs(".buttons")
+    ?.appendHtml(
       `<button class="deleteAlert textButton" aria-label="Delete" data-balloon-pos="left"><i class="fas fa-trash"></i></button>`,
     );
 
-  animate(item.find(".rewards")[0] as HTMLElement, {
+  const itemToAnimate = item.qsr(".rewards");
+  animate(itemToAnimate.native, {
     opacity: 0,
     height: 0,
     marginTop: 0,
     duration: 250,
     onComplete: () => {
-      item.find(".rewards").remove();
+      itemToAnimate.remove();
     },
   });
 }
 
 function updateClaimDeleteAllButton(): void {
-  const claimAllButton = $("#alertsPopup .accountAlerts .claimAll");
-  const deleteAllButton = $("#alertsPopup .accountAlerts .deleteAll");
+  const claimAllButton = alertsPopupEl.qs(".accountAlerts .claimAll");
+  const deleteAllButton = alertsPopupEl.qs(".accountAlerts .deleteAll");
 
-  claimAllButton.addClass("hidden");
-  deleteAllButton.addClass("hidden");
+  claimAllButton?.hide();
+  deleteAllButton?.hide();
   if (accountAlerts.length > 0) {
     let rewardsCount = 0;
     for (const ie of accountAlerts) {
@@ -369,17 +386,17 @@ function updateClaimDeleteAllButton(): void {
     }
 
     if (rewardsCount > 0) {
-      claimAllButton.removeClass("hidden");
+      claimAllButton?.show();
     } else {
-      deleteAllButton.removeClass("hidden");
+      deleteAllButton?.show();
     }
   }
   if (mailToDelete.length === accountAlerts.length) {
-    deleteAllButton.addClass("hidden");
+    deleteAllButton?.hide();
   }
 }
 
-$("header nav .showAlerts").on("click", () => {
+qs("header nav .showAlerts")?.on("click", () => {
   void show();
 });
 
@@ -404,7 +421,7 @@ AuthEvent.subscribe((event) => {
     accountAlerts = [];
     mailToMarkRead = [];
     mailToDelete = [];
-    $("#alertsPopup .accountAlerts .list").empty();
+    accountAlertsListEl.empty();
   }
 });
 
@@ -429,7 +446,7 @@ const modal = new AnimatedModal({
     hide();
   },
   setup: async (): Promise<void> => {
-    $("#alertsPopup .accountAlerts").on("click", ".claimAll", () => {
+    alertsPopupEl.qs(".accountAlerts")?.onChild("click", ".claimAll", () => {
       for (const ie of accountAlerts) {
         if (!ie.read && !mailToMarkRead.includes(ie.id)) {
           markReadAlert(ie.id);
@@ -437,7 +454,7 @@ const modal = new AnimatedModal({
       }
     });
 
-    $("#alertsPopup .accountAlerts").on("click", ".deleteAll", () => {
+    alertsPopupEl.qs(".accountAlerts")?.onChild("click", ".deleteAll", () => {
       for (const ie of accountAlerts) {
         if (!mailToDelete.includes(ie.id)) {
           deleteAlert(ie.id);
@@ -445,30 +462,38 @@ const modal = new AnimatedModal({
       }
     });
 
-    $("#alertsPopup .mobileClose").on("click", () => {
+    alertsPopupEl.qs(".mobileClose")?.on("click", () => {
       hide();
     });
 
-    $("#alertsPopup .accountAlerts .list").on(
-      "click",
-      ".item .buttons .deleteAlert",
-      (e) => {
-        const id = $(e.currentTarget)
-          .closest(".item")
-          .attr("data-id") as string;
+    alertsPopupEl
+      .qs(".accountAlerts .list")
+      ?.onChild("click", ".item .buttons .deleteAlert", (e) => {
+        const id = (e.target as HTMLElement | null)
+          ?.closest(".item")
+          ?.getAttribute("data-id")
+          ?.toString();
+
+        if (id === undefined) {
+          throw new Error("Alert ID is undefined");
+        }
+
         deleteAlert(id);
-      },
-    );
+      });
+
+    alertsPopupEl
+      .qs(".accountAlerts .list")
+      ?.onChild("click", ".item .buttons .markReadAlert", (e) => {
+        const id = (e.target as HTMLElement | null)
+          ?.closest(".item")
+          ?.getAttribute("data-id")
+          ?.toString();
+
+        if (id === undefined) {
+          throw new Error("Alert ID is undefined");
+        }
 
-    $("#alertsPopup .accountAlerts .list").on(
-      "click",
-      ".item .buttons .markReadAlert",
-      (e) => {
-        const id = $(e.currentTarget)
-          .closest(".item")
-          .attr("data-id") as string;
         markReadAlert(id);
-      },
-    );
+      });
   },
 });
diff --git a/frontend/src/ts/elements/character-counter.ts b/frontend/src/ts/elements/character-counter.ts
index b118cd59a372..550fff6cfade 100644
--- a/frontend/src/ts/elements/character-counter.ts
+++ b/frontend/src/ts/elements/character-counter.ts
@@ -1,27 +1,40 @@
+import { createElementWithUtils, ElementWithUtils } from "../utils/dom";
+
 export class CharacterCounter {
-  private textareaElement: JQuery<HTMLTextAreaElement>;
-  private parentElement: JQuery;
-  private counterElement: JQuery;
+  private textareaElement: ElementWithUtils<HTMLTextAreaElement>;
+  private parentElement: ElementWithUtils;
+  private counterElement: ElementWithUtils;
   private maxLength: number;
 
-  constructor(textareaElement: JQuery<HTMLTextAreaElement>, maxLength: number) {
+  constructor(
+    textareaElement: ElementWithUtils<HTMLTextAreaElement>,
+    maxLength: number,
+  ) {
     this.textareaElement = textareaElement;
     this.maxLength = maxLength;
 
-    this.textareaElement.attr("maxlength", this.maxLength.toString());
+    this.textareaElement.setAttribute("maxlength", this.maxLength.toString());
 
-    // Wrap the textarea element in a div if not already wrapped
-    if (!this.textareaElement.parent().hasClass("textareaWithCounter")) {
-      $(this.textareaElement).wrap(`<div class="textareaWithCounter"></div>`);
+    const textAreaParent = this.textareaElement.getParent();
+    if (!textAreaParent) {
+      // Wrap the textarea element in a div if not already wrapped
+      const wrapper = this.textareaElement?.wrapWith(
+        `<div class="textareaWithCounter"></div>`,
+      );
+      this.parentElement = wrapper;
+    } else {
+      this.parentElement = textAreaParent;
     }
-    this.parentElement = $(this.textareaElement).parent(".textareaWithCounter");
 
-    // Create the counter element if it doesn't exist
-    if (this.parentElement.find(".char-counter").length === 0) {
-      this.counterElement = $(`<span class="char-counter"></span>`);
-      this.parentElement.append(this.counterElement);
+    const counterElement = this.parentElement.qs(".char-counter");
+    if (counterElement !== null) {
+      this.counterElement = counterElement;
     } else {
-      this.counterElement = this.parentElement.find(".char-counter");
+      const counterElement = createElementWithUtils("span", {
+        classList: ["char-counter"],
+      });
+      this.parentElement.append(counterElement);
+      this.counterElement = counterElement;
     }
 
     this.updateCounter();
@@ -30,9 +43,9 @@ export class CharacterCounter {
 
   private updateCounter(): void {
     const maxLength = this.maxLength;
-    const currentLength = (this.textareaElement.val() as string).length;
+    const currentLength = (this.textareaElement.getValue() ?? "").length;
     const remaining = maxLength - currentLength;
-    this.counterElement.text(`${currentLength}/${maxLength}`);
+    this.counterElement.setText(`${currentLength}/${maxLength}`);
 
     const remainingPercentage = (remaining / this.maxLength) * 100;
 
diff --git a/frontend/src/ts/elements/custom-background-filter.ts b/frontend/src/ts/elements/custom-background-filter.ts
index 822b04da7991..fc764871ba32 100644
--- a/frontend/src/ts/elements/custom-background-filter.ts
+++ b/frontend/src/ts/elements/custom-background-filter.ts
@@ -2,6 +2,11 @@ import { CustomBackgroundFilter } from "@monkeytype/schemas/configs";
 import * as UpdateConfig from "../config";
 import * as ConfigEvent from "../observables/config-event";
 import { debounce } from "throttle-debounce";
+import { qs, qsr } from "../utils/dom";
+
+const section = qsr(
+  ".pageSettings .section[data-config-name='customBackgroundFilter']",
+);
 
 const filters = {
   blur: {
@@ -45,37 +50,31 @@ export function apply(): void {
     top: `-${filters.blur.value * 2}rem`,
     position: "absolute",
   };
-  $(".customBackground img").css(css);
+  qs(".customBackground img")?.setStyle(css);
 }
 
 function syncSliders(): void {
-  $(".section[data-config-name='customBackgroundFilter'] .blur input").val(
-    filters.blur.value,
-  );
-  $(
-    ".section[data-config-name='customBackgroundFilter'] .brightness input",
-  ).val(filters.brightness.value);
-  $(".section[data-config-name='customBackgroundFilter'] .saturate input").val(
-    filters.saturate.value,
-  );
-  $(".section[data-config-name='customBackgroundFilter'] .opacity input").val(
-    filters.opacity.value,
-  );
+  section
+    .qs<HTMLInputElement>(".blur input")
+    ?.setValue(filters.blur.value.toString());
+  section
+    .qs<HTMLInputElement>(".brightness input")
+    ?.setValue(filters.brightness.value.toString());
+  section
+    .qs<HTMLInputElement>(".saturate input")
+    ?.setValue(filters.saturate.value.toString());
+  section
+    .qs<HTMLInputElement>(".opacity input")
+    ?.setValue(filters.opacity.value.toString());
 }
 
 function updateNumbers(): void {
-  $(".section[data-config-name='customBackgroundFilter'] .blur .value").html(
-    filters.blur.value.toFixed(1),
-  );
-  $(
-    ".section[data-config-name='customBackgroundFilter'] .brightness .value",
-  ).html(filters.brightness.value.toFixed(1));
-  $(
-    ".section[data-config-name='customBackgroundFilter'] .saturate .value",
-  ).html(filters.saturate.value.toFixed(1));
-  $(".section[data-config-name='customBackgroundFilter'] .opacity .value").html(
-    filters.opacity.value.toFixed(1),
-  );
+  section.qs(".blur .value")?.setHtml(filters.blur.value.toFixed(1));
+  section
+    .qs(".brightness .value")
+    ?.setHtml(filters.brightness.value.toFixed(1));
+  section.qs(".saturate .value")?.setHtml(filters.saturate.value.toFixed(1));
+  section.qs(".opacity .value")?.setHtml(filters.opacity.value.toFixed(1));
 }
 
 export function updateUI(): void {
@@ -91,64 +90,41 @@ function loadConfig(config: CustomBackgroundFilter): void {
   updateUI();
 }
 
-$(".section[data-config-name='customBackgroundFilter'] .blur input").on(
-  "input",
-  () => {
-    filters.blur.value = parseFloat(
-      $(
-        ".section[data-config-name='customBackgroundFilter'] .blur input",
-      ).val() as string,
-    );
-    updateNumbers();
-    apply();
-  },
-);
+section.qs(".blur input")?.on("input", () => {
+  filters.blur.value = parseFloat(
+    section.qs<HTMLInputElement>(".blur input")?.getValue() ?? "0",
+  );
+  updateNumbers();
+  apply();
+});
 
-$(".section[data-config-name='customBackgroundFilter'] .brightness input").on(
-  "input",
-  () => {
-    filters.brightness.value = parseFloat(
-      $(
-        ".section[data-config-name='customBackgroundFilter'] .brightness input",
-      ).val() as string,
-    );
-    updateNumbers();
-    apply();
-  },
-);
+section.qs(".brightness input")?.on("input", () => {
+  filters.brightness.value = parseFloat(
+    section.qs<HTMLInputElement>(".brightness input")?.getValue() ?? "1",
+  );
+  updateNumbers();
+  apply();
+});
 
-$(".section[data-config-name='customBackgroundFilter'] .saturate input").on(
-  "input",
-  () => {
-    filters.saturate.value = parseFloat(
-      $(
-        ".section[data-config-name='customBackgroundFilter'] .saturate input",
-      ).val() as string,
-    );
-    updateNumbers();
-    apply();
-  },
-);
+section.qs(".saturate input")?.on("input", () => {
+  filters.saturate.value = parseFloat(
+    section.qs<HTMLInputElement>(".saturate input")?.getValue() ?? "1",
+  );
+  updateNumbers();
+  apply();
+});
 
-$(".section[data-config-name='customBackgroundFilter'] .opacity input").on(
-  "input",
-  () => {
-    filters.opacity.value = parseFloat(
-      $(
-        ".section[data-config-name='customBackgroundFilter'] .opacity input",
-      ).val() as string,
-    );
-    updateNumbers();
-    apply();
-  },
-);
+section.qs(".opacity input")?.on("input", () => {
+  filters.opacity.value = parseFloat(
+    section.qs<HTMLInputElement>(".opacity input")?.getValue() ?? "1",
+  );
+  updateNumbers();
+  apply();
+});
 
-$(".section[data-config-name='customBackgroundFilter'] input").on(
-  "input",
-  () => {
-    debouncedSave();
-  },
-);
+section.qsa("input")?.on("input", () => {
+  debouncedSave();
+});
 
 const debouncedSave = debounce(2000, async () => {
   const arr = Object.keys(filters).map(
diff --git a/frontend/src/ts/elements/input-indicator.ts b/frontend/src/ts/elements/input-indicator.ts
index a5c970dcf591..56b65fc3e6a1 100644
--- a/frontend/src/ts/elements/input-indicator.ts
+++ b/frontend/src/ts/elements/input-indicator.ts
@@ -1,3 +1,5 @@
+import { ElementWithUtils } from "../utils/dom";
+
 type InputIndicatorOption = {
   icon: string;
   spinIcon?: true;
@@ -6,18 +8,20 @@ type InputIndicatorOption = {
 };
 
 export class InputIndicator {
-  private inputElement: JQuery | HTMLInputElement;
-  private parentElement: JQuery;
+  private inputElement: ElementWithUtils<HTMLInputElement>;
+  private parentElement: ElementWithUtils;
   private options: Record<string, InputIndicatorOption>;
   private currentStatus: keyof typeof this.options | null;
 
   constructor(
-    inputElement: JQuery | HTMLInputElement,
+    inputElement: ElementWithUtils<HTMLInputElement>,
     options: Record<string, InputIndicatorOption>,
   ) {
     this.inputElement = inputElement;
-    $(this.inputElement).wrap(`<div class="inputAndIndicator"></div>`);
-    this.parentElement = $(this.inputElement).parent(".inputAndIndicator");
+    const wrapper = this.inputElement.wrapWith(
+      `<div class="inputAndIndicator"></div>`,
+    );
+    this.parentElement = wrapper;
     this.options = options;
     this.currentStatus = null;
 
@@ -46,13 +50,13 @@ export class InputIndicator {
 
     indicator += `</div>`;
 
-    this.parentElement.append(indicator);
+    this.parentElement.appendHtml(indicator);
   }
 
   hide(): void {
-    this.parentElement.find(".statusIndicator div").addClass("hidden");
+    this.parentElement.qsa(".statusIndicator div")?.hide();
     this.currentStatus = null;
-    $(this.inputElement).css("padding-right", "0.5em");
+    this.inputElement.setStyle({ paddingRight: "0.5em" });
   }
 
   show(optionId: keyof typeof this.options, messageOverride?: string): void {
@@ -60,21 +64,21 @@ export class InputIndicator {
 
     this.currentStatus = optionId;
 
-    const indicator = this.parentElement.find(`[data-option-id="${optionId}"]`);
+    const indicator = this.parentElement.qs(`[data-option-id="${optionId}"]`);
 
-    indicator.removeClass("hidden");
+    indicator?.show();
 
     if (messageOverride !== undefined && messageOverride !== "") {
       if (messageOverride.length > 20) {
-        indicator.attr("data-balloon-length", "large");
+        indicator?.setAttribute("data-balloon-length", "large");
       } else {
-        indicator.removeAttr("data-balloon-length");
+        indicator?.removeAttribute("data-balloon-length");
       }
-      indicator.attr("aria-label", messageOverride);
+      indicator?.setAttribute("aria-label", messageOverride);
     }
 
-    $(this.inputElement).css("padding-right", "2.1em");
-    this.parentElement.attr("data-indicator-status", optionId);
+    this.inputElement.setStyle({ paddingRight: "2.1em" });
+    this.parentElement.setAttribute("data-indicator-status", optionId);
   }
 
   get(): keyof typeof this.options | null {
diff --git a/frontend/src/ts/elements/input-validation.ts b/frontend/src/ts/elements/input-validation.ts
index 33caf8d9c3da..0e755f9c44b3 100644
--- a/frontend/src/ts/elements/input-validation.ts
+++ b/frontend/src/ts/elements/input-validation.ts
@@ -8,6 +8,7 @@ import {
 } from "@monkeytype/schemas/configs";
 import Config, * as UpdateConfig from "../config";
 import * as Notifications from "../elements/notifications";
+import { ElementWithUtils } from "../utils/dom";
 
 export type ValidationResult = {
   status: "checking" | "success" | "failed" | "warning";
@@ -122,13 +123,13 @@ export function createInputEventHandler<T>(
     if (callIsValid === undefined) {
       callback({ status: "success" });
       //call original handler if defined
-      originalInput.oninput?.(e);
+      originalInput.oninput?.(e as InputEvent);
       return;
     }
 
     await callIsValid(originalInput, currentValue, checkValue as T);
     //call original handler if defined
-    originalInput.oninput?.(e);
+    originalInput.oninput?.(e as InputEvent);
   };
 }
 
@@ -142,17 +143,25 @@ export type ValidationOptions<T> = (T extends string
   callback?: (result: ValidationResult) => void;
 };
 
-export class ValidatedHtmlInputElement<T = string> {
-  public native: HTMLInputElement;
+export class ValidatedHtmlInputElement<
+  T = string,
+> extends ElementWithUtils<HTMLInputElement> {
   private indicator: InputIndicator;
   private currentStatus: ValidationResult = {
     status: "checking",
   };
 
-  constructor(inputElement: HTMLInputElement, options: ValidationOptions<T>) {
-    this.native = inputElement;
+  constructor(
+    inputElement: HTMLInputElement | ElementWithUtils<HTMLInputElement>,
+    options: ValidationOptions<T>,
+  ) {
+    super(
+      inputElement instanceof ElementWithUtils
+        ? inputElement.native
+        : inputElement,
+    );
 
-    this.indicator = new InputIndicator(inputElement, {
+    this.indicator = new InputIndicator(this, {
       success: {
         icon: "fa-check",
         level: 1,
@@ -188,33 +197,32 @@ export class ValidatedHtmlInputElement<T = string> {
       "inputValueConvert" in options ? options.inputValueConvert : undefined,
     );
 
-    inputElement.addEventListener("input", handler);
+    this.on("input", handler);
   }
 
   getValidationResult(): ValidationResult {
     return this.currentStatus;
   }
-  setValue(val: string | null): this {
-    this.native.value = val ?? "";
+
+  override setValue(val: string | null): this {
     if (val === null) {
       this.indicator.hide();
       this.currentStatus = { status: "checking" };
     } else {
-      this.native.dispatchEvent(new Event("input"));
+      super.setValue(val);
+      this.dispatch("input");
     }
 
     return this;
   }
-  getValue(): string {
-    return this.native.value;
-  }
+
   triggerValidation(): void {
-    this.native.dispatchEvent(new Event("input"));
+    this.dispatch("input");
   }
 }
 
 export type ConfigInputOptions<K extends ConfigKey, T = ConfigType[K]> = {
-  input: HTMLInputElement | null;
+  input: ElementWithUtils<HTMLInputElement>;
   configName: K;
   validation?: (T extends string
     ? Omit<Validation<T>, "schema">
@@ -242,10 +250,6 @@ export function handleConfigInput<T extends ConfigKey>({
   configName,
   validation,
 }: ConfigInputOptions<T, ConfigType[T]>): void {
-  if (input === null) {
-    throw new Error(`Failed to find input element for ${configName}`);
-  }
-
   const inputValueConvert =
     validation !== undefined && "inputValueConvert" in validation
       ? validation.inputValueConvert
@@ -269,23 +273,23 @@ export function handleConfigInput<T extends ConfigKey>({
   let shakeTimeout: null | NodeJS.Timeout;
 
   const handleStore = (): void => {
-    if (input.value === "" && (validation?.resetIfEmpty ?? true)) {
+    if (input.getValue() === "" && (validation?.resetIfEmpty ?? true)) {
       //use last config value, clear validation
-      input.value = new String(Config[configName]).toString();
-      input.dispatchEvent(new Event("input"));
+      input.setValue(new String(Config[configName]).toString());
+      input.dispatch("input");
     }
     if (status === "failed") {
-      input.parentElement?.classList.add("hasError");
+      input.getParent()?.addClass("hasError");
       if (shakeTimeout !== null) {
         clearTimeout(shakeTimeout);
       }
       shakeTimeout = setTimeout(() => {
-        input.parentElement?.classList.remove("hasError");
+        input.getParent()?.removeClass("hasError");
       }, 500);
       return;
     }
-    const value = (inputValueConvert?.(input.value) ??
-      input.value) as ConfigType[T];
+    const value = (inputValueConvert?.(input.getValue() ?? "") ??
+      input.getValue()) as ConfigType[T];
 
     if (Config[configName] === value) {
       return;
@@ -299,10 +303,10 @@ export function handleConfigInput<T extends ConfigKey>({
     }
   };
 
-  input.addEventListener("keypress", (e) => {
+  input.on("keypress", (e) => {
     if (e.key === "Enter") {
       handleStore();
     }
   });
-  input.addEventListener("focusout", (e) => handleStore());
+  input.on("focusout", (e) => handleStore());
 }
diff --git a/frontend/src/ts/elements/keymap.ts b/frontend/src/ts/elements/keymap.ts
index afbe14c94e79..555bcbfdcd6f 100644
--- a/frontend/src/ts/elements/keymap.ts
+++ b/frontend/src/ts/elements/keymap.ts
@@ -16,9 +16,11 @@ import { getActiveFunboxNames } from "../test/funbox/list";
 import { areSortedArraysEqual } from "../utils/arrays";
 import { LayoutObject } from "@monkeytype/schemas/layouts";
 import { animate } from "animejs";
+import { ElementsWithUtils, qsr } from "../utils/dom";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
 
 export const keyDataDelimiter = "\uE000";
+const keymap = qsr("#keymap");
 
 const stenoKeys: LayoutObject = {
   keymapShowTopRow: true,
@@ -59,16 +61,18 @@ const stenoKeys: LayoutObject = {
   },
 };
 
-function findKeyElements(char: string): JQuery {
+function findKeyElements(char: string): ElementsWithUtils | null {
+  if (char === "\n") return null;
+
   if (char === " ") {
-    return $("#keymap .keySpace");
+    return keymap.qsa(".keySpace");
   }
 
   if (char === '"') {
-    return $(`#keymap .keymapKey[data-key*='${char}']`);
+    return keymap.qsa(`.keymapKey[data-key*='${char}']`);
   }
 
-  return $(`#keymap .keymapKey[data-key*="${char}"]`);
+  return keymap.qsa(`.keymapKey[data-key*="${char}"]`);
 }
 
 function highlightKey(currentKey: string): void {
@@ -85,6 +89,8 @@ function highlightKey(currentKey: string): void {
       }
 
       const $target = findKeyElements(currentKey);
+      if ($target === null || $target.length === 0) return;
+
       $target.addClass("activeKey");
     } catch (e) {
       if (e instanceof Error) {
@@ -97,10 +103,8 @@ function highlightKey(currentKey: string): void {
 async function flashKey(key: string, correct?: boolean): Promise<void> {
   if (key === undefined) return;
   requestDebouncedAnimationFrame(`keymap.flashKey.${key}`, async () => {
-    const $target = findKeyElements(key);
-
-    const elements = $target.toArray();
-    if (elements.length === 0) return;
+    const elements = findKeyElements(key);
+    if (elements === null || elements.length === 0) return;
 
     const themecolors = await ThemeColors.getAll();
 
@@ -125,7 +129,7 @@ async function flashKey(key: string, correct?: boolean): Promise<void> {
         };
       }
 
-      animate(elements, {
+      animate(elements.native, {
         color: [startingStyle.color, themecolors.sub],
         backgroundColor: [startingStyle.backgroundColor, themecolors.subAlt],
         borderColor: [startingStyle.borderColor, themecolors.sub],
@@ -137,11 +141,11 @@ async function flashKey(key: string, correct?: boolean): Promise<void> {
 }
 
 export function hide(): void {
-  $("#keymap").addClass("hidden");
+  keymap.addClass("hidden");
 }
 
 export function show(): void {
-  $("#keymap").removeClass("hidden");
+  keymap.removeClass("hidden");
 }
 
 function buildRow(options: {
@@ -459,16 +463,18 @@ export async function refresh(): Promise<void> {
       });
     }
 
-    $("#keymap").html(keymapElement);
-
-    $("#keymap").removeClass("staggered");
-    $("#keymap").removeClass("matrix");
-    $("#keymap").removeClass("split");
-    $("#keymap").removeClass("split_matrix");
-    $("#keymap").removeClass("alice");
-    $("#keymap").removeClass("steno");
-    $("#keymap").removeClass("steno_matrix");
-    $("#keymap").addClass(Config.keymapStyle);
+    keymap.setHtml(keymapElement);
+
+    keymap.removeClass([
+      "staggered",
+      "matrix",
+      "split",
+      "split_matrix",
+      "alice",
+      "steno",
+      "steno_matrix",
+    ]);
+    keymap.addClass(Config.keymapStyle);
   } catch (e) {
     if (e instanceof Error) {
       console.log(
@@ -591,12 +597,12 @@ let ignoreConfigEvent = false;
 
 ConfigEvent.subscribe((eventKey) => {
   const handleMode = (): void => {
-    $(".activeKey").removeClass("activeKey");
-    $(".keymapKey").attr("style", "");
+    keymap.qsa(".activeKey").removeClass("activeKey");
+    keymap.qsa(".keymapKey").setAttribute("style", "");
     Config.keymapMode === "off" ? hide() : show();
   };
   const handleSize = (): void => {
-    $("#keymap").css("zoom", Config.keymapSize);
+    keymap.setStyle({ zoom: Config.keymapSize.toString() });
   };
   const handleLegendStyle = (): void => {
     let style = Config.keymapLegendStyle;
@@ -604,26 +610,28 @@ ConfigEvent.subscribe((eventKey) => {
     // Remove existing styles
     const keymapLegendStyles = ["lowercase", "uppercase", "blank", "dynamic"];
     keymapLegendStyles.forEach((name) => {
-      $(".keymapLegendStyle").removeClass(name);
+      keymap.qsa(".keymapLegendStyle").removeClass(name);
     });
 
     style = style || "lowercase";
 
     // Mutate the keymap in the DOM, if it exists.
     // 1. Remove everything
-    $(".keymapKey > .letter").css("display", "");
-    $(".keymapKey > .letter").css("text-transform", "");
+    keymap.qsa(".keymapKey > .letter").setStyle({ display: "" });
+    keymap.qsa(".keymapKey > .letter").setStyle({ textTransform: "" });
 
     // 2. Append special styles onto the DOM elements
     if (style === "uppercase") {
-      $(".keymapKey > .letter").css("text-transform", "capitalize");
+      keymap
+        .qsa(".keymapKey > .letter")
+        .setStyle({ textTransform: "capitalize" });
     }
     if (style === "blank") {
-      $(".keymapKey > .letter").css("display", "none");
+      keymap.qsa(".keymapKey > .letter").setStyle({ display: "none" });
     }
 
     // Update and save to cookie for persistence
-    $(".keymapLegendStyle").addClass(style);
+    keymap.qsa(".keymapLegendStyle").addClass(style);
   };
 
   if (eventKey === "fullConfigChange") {
@@ -667,7 +675,7 @@ KeymapEvent.subscribe((mode, key, correct) => {
   }
 });
 
-$(document).on("keydown", (e) => {
+document.addEventListener("keydown", (e) => {
   if (
     Config.keymapLegendStyle === "dynamic" &&
     (e.code === "ShiftLeft" ||
@@ -679,7 +687,7 @@ $(document).on("keydown", (e) => {
   }
 });
 
-$(document).on("keyup", (e) => {
+document.addEventListener("keyup", (e) => {
   if (
     Config.keymapLegendStyle === "dynamic" &&
     (e.code === "ShiftLeft" ||
diff --git a/frontend/src/ts/elements/loader.ts b/frontend/src/ts/elements/loader.ts
index 16a400d36cd1..929fcdcb5a51 100644
--- a/frontend/src/ts/elements/loader.ts
+++ b/frontend/src/ts/elements/loader.ts
@@ -1,7 +1,8 @@
 import { animate, JSAnimation } from "animejs";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
+import { qsr } from "../utils/dom";
 
-const element = document.querySelector("#backgroundLoader") as HTMLElement;
+const element = qsr("#backgroundLoader");
 let showAnim: JSAnimation | null = null;
 
 export function show(instant = false): void {
@@ -11,7 +12,7 @@ export function show(instant = false): void {
       duration: 125,
       delay: instant ? 0 : 125,
       onBegin: () => {
-        element.classList.remove("hidden");
+        element.removeClass("hidden");
       },
     });
   });
@@ -24,7 +25,7 @@ export function hide(): void {
       opacity: 0,
       duration: 125,
       onComplete: () => {
-        element.classList.add("hidden");
+        element.addClass("hidden");
       },
     });
   });
diff --git a/frontend/src/ts/elements/modes-notice.ts b/frontend/src/ts/elements/modes-notice.ts
index d526d8151a39..0d22d57aeb42 100644
--- a/frontend/src/ts/elements/modes-notice.ts
+++ b/frontend/src/ts/elements/modes-notice.ts
@@ -11,6 +11,7 @@ import { getLanguageDisplayString } from "../utils/strings";
 import Format from "../utils/format";
 import { getActiveFunboxes, getActiveFunboxNames } from "../test/funbox/list";
 import { escapeHTML, getMode2 } from "../utils/misc";
+import { qsr } from "../utils/dom";
 
 ConfigEvent.subscribe((eventKey) => {
   const configKeys: ConfigEvent.ConfigEventKey[] = [
@@ -37,32 +38,34 @@ ConfigEvent.subscribe((eventKey) => {
   }
 });
 
+const testModesNotice = qsr(".pageTest #testModesNotice");
+
 export async function update(): Promise<void> {
-  $(".pageTest #testModesNotice").empty();
+  testModesNotice.empty();
 
   if (TestState.isRepeated && Config.mode !== "quote") {
-    $(".pageTest #testModesNotice").append(
+    testModesNotice.appendHtml(
       `<div class="textButton noInteraction" style="color:var(--error-color);"><i class="fas fa-sync-alt"></i>repeated</div>`,
     );
   }
 
   if (!TestState.savingEnabled) {
-    $(".pageTest #testModesNotice").append(
+    testModesNotice.appendHtml(
       `<div class="textButton" commands="resultSaving" style="color:var(--error-color);"><i class="fas fa-save"></i>saving disabled</div>`,
     );
   }
 
   if (TestWords.hasTab) {
     if (Config.quickRestart === "esc") {
-      $(".pageTest #testModesNotice").append(
+      testModesNotice.appendHtml(
         `<div class="textButton noInteraction"><i class="fas fa-long-arrow-alt-right"></i>shift + tab to open commandline</div>`,
       );
-      $(".pageTest #testModesNotice").append(
+      testModesNotice.appendHtml(
         `<div class="textButton noInteraction"><i class="fas fa-level-down-alt fa-rotate-90"></i>shift + esc to restart</div>`,
       );
     }
     if (Config.quickRestart === "tab") {
-      $(".pageTest #testModesNotice").append(
+      testModesNotice.appendHtml(
         `<div class="textButton noInteraction"><i class="fas fa-level-down-alt fa-rotate-90"></i>shift + tab to restart</div>`,
       );
     }
@@ -72,7 +75,7 @@ export async function update(): Promise<void> {
     (TestWords.hasNewline || Config.funbox.includes("58008")) &&
     Config.quickRestart === "enter"
   ) {
-    $(".pageTest #testModesNotice").append(
+    testModesNotice.appendHtml(
       `<div class="textButton noInteraction"><i class="fas fa-level-down-alt fa-rotate-90"></i>shift + enter to restart</div>`,
     );
   }
@@ -80,7 +83,7 @@ export async function update(): Promise<void> {
   const customTextName = CustomTextState.getCustomTextName();
   const isLong = CustomTextState.isCustomTextLong();
   if (Config.mode === "custom" && customTextName !== "" && isLong) {
-    $(".pageTest #testModesNotice").append(
+    testModesNotice.appendHtml(
       `<div class="textButton noInteraction"><i class="fas fa-book"></i>${escapeHTML(
         customTextName,
       )} (shift + enter to save progress)</div>`,
@@ -88,13 +91,13 @@ export async function update(): Promise<void> {
   }
 
   if (TestState.activeChallenge) {
-    $(".pageTest #testModesNotice").append(
+    testModesNotice.appendHtml(
       `<div class="textButton noInteraction"><i class="fas fa-award"></i>${TestState.activeChallenge.display}</div>`,
     );
   }
 
   if (Config.mode === "zen") {
-    $(".pageTest #testModesNotice").append(
+    testModesNotice.appendHtml(
       `<div class="textButton noInteraction"><i class="fas fa-poll"></i>shift + enter to finish zen </div>`,
     );
   }
@@ -102,7 +105,7 @@ export async function update(): Promise<void> {
   const usingPolyglot = getActiveFunboxNames().includes("polyglot");
 
   if (Config.mode !== "zen" && !usingPolyglot) {
-    $(".pageTest #testModesNotice").append(
+    testModesNotice.appendHtml(
       `<button class="textButton" commands="languages"><i class="fas fa-globe-americas"></i>${getLanguageDisplayString(
         Config.language,
         Config.mode === "quote",
@@ -118,29 +121,29 @@ export async function update(): Promise<void> {
       })
       .join(", ");
 
-    $(".pageTest #testModesNotice").append(
+    testModesNotice.appendHtml(
       `<button class="textButton" commandId="setCustomPolyglotCustom"><i class="fas fa-globe-americas"></i>${languages}</button>`,
     );
   }
 
   if (Config.difficulty === "expert") {
-    $(".pageTest #testModesNotice").append(
+    testModesNotice.appendHtml(
       `<button class="textButton" commands="difficulty"><i class="fas fa-star-half-alt"></i>expert</button>`,
     );
   } else if (Config.difficulty === "master") {
-    $(".pageTest #testModesNotice").append(
+    testModesNotice.appendHtml(
       `<button class="textButton" commands="difficulty"><i class="fas fa-star"></i>master</button>`,
     );
   }
 
   if (Config.blindMode) {
-    $(".pageTest #testModesNotice").append(
+    testModesNotice.appendHtml(
       `<button class="textButton" commands="blindMode"><i class="fas fa-eye-slash"></i>blind</button>`,
     );
   }
 
   if (Config.lazyMode) {
-    $(".pageTest #testModesNotice").append(
+    testModesNotice.appendHtml(
       `<button class="textButton" commands="lazyMode"><i class="fas fa-couch"></i>lazy</button>`,
     );
   }
@@ -154,7 +157,7 @@ export async function update(): Promise<void> {
       suffix: ` ${Config.typingSpeedUnit}`,
     });
 
-    $(".pageTest #testModesNotice").append(
+    testModesNotice.appendHtml(
       `<button class="textButton" commands="paceCaretMode"><i class="fas fa-tachometer-alt"></i>${
         Config.paceCaret === "average"
           ? "average"
@@ -186,7 +189,7 @@ export async function update(): Promise<void> {
 
       const text = `${avgWPMText} ${avgAccText}`.trim();
 
-      $(".pageTest #testModesNotice").append(
+      testModesNotice.appendHtml(
         `<button class="textButton" commands="showAverage"><i class="fas fa-chart-bar"></i>avg: ${text}</button>`,
       );
     }
@@ -217,13 +220,13 @@ export async function update(): Promise<void> {
       })} ${pb?.acc}% acc`;
     }
 
-    $(".pageTest #testModesNotice").append(
+    testModesNotice.appendHtml(
       `<button class="textButton" commands="showPb"><i class="fas fa-crown"></i>${str}</button>`,
     );
   }
 
   if (Config.minWpm !== "off") {
-    $(".pageTest #testModesNotice").append(
+    testModesNotice.appendHtml(
       `<button class="textButton" commands="minWpm"><i class="fas fa-bomb"></i>min ${Format.typingSpeed(
         Config.minWpmCustomSpeed,
         { showDecimalPlaces: false, suffix: ` ${Config.typingSpeedUnit}` },
@@ -232,13 +235,13 @@ export async function update(): Promise<void> {
   }
 
   if (Config.minAcc !== "off") {
-    $(".pageTest #testModesNotice").append(
+    testModesNotice.appendHtml(
       `<button class="textButton" commands="minAcc"><i class="fas fa-bomb"></i>min ${Config.minAccCustom}% acc</button>`,
     );
   }
 
   if (Config.minBurst !== "off") {
-    $(".pageTest #testModesNotice").append(
+    testModesNotice.appendHtml(
       `<button class="textButton" commands="minBurst"><i class="fas fa-bomb"></i>min ${Format.typingSpeed(
         Config.minBurstCustomSpeed,
         { showDecimalPlaces: false },
@@ -249,7 +252,7 @@ export async function update(): Promise<void> {
   }
 
   if (Config.funbox.length > 0) {
-    $(".pageTest #testModesNotice").append(
+    testModesNotice.appendHtml(
       `<button class="textButton" commands="funbox"><i class="fas fa-gamepad"></i>${Config.funbox
         .map((it) => it.replace(/_/g, " "))
         .join(", ")}</button>`,
@@ -257,24 +260,24 @@ export async function update(): Promise<void> {
   }
 
   if (Config.confidenceMode === "on") {
-    $(".pageTest #testModesNotice").append(
+    testModesNotice.appendHtml(
       `<button class="textButton" commands="confidenceMode"><i class="fas fa-backspace"></i>confidence</button>`,
     );
   }
   if (Config.confidenceMode === "max") {
-    $(".pageTest #testModesNotice").append(
+    testModesNotice.appendHtml(
       `<button class="textButton" commands="confidenceMode"><i class="fas fa-backspace"></i>max confidence</button>`,
     );
   }
 
   if (Config.stopOnError !== "off") {
-    $(".pageTest #testModesNotice").append(
+    testModesNotice.appendHtml(
       `<button class="textButton" commands="stopOnError"><i class="fas fa-hand-paper"></i>stop on ${Config.stopOnError}</button>`,
     );
   }
 
   if (Config.layout !== "default") {
-    $(".pageTest #testModesNotice").append(
+    testModesNotice.appendHtml(
       `<button class="textButton" commands="layouts"><i class="fas fa-keyboard"></i>emulating ${Config.layout.replace(
         /_/g,
         " ",
@@ -283,7 +286,7 @@ export async function update(): Promise<void> {
   }
 
   if (Config.oppositeShiftMode !== "off") {
-    $(".pageTest #testModesNotice").append(
+    testModesNotice.appendHtml(
       `<button class="textButton" commands="oppositeShiftMode"><i class="fas fa-exchange-alt"></i>opposite shift${
         Config.oppositeShiftMode === "keymap" ? " (keymap)" : ""
       }</button>`,
@@ -299,7 +302,7 @@ export async function update(): Promise<void> {
     });
 
     if (tagsString !== "") {
-      $(".pageTest #testModesNotice").append(
+      testModesNotice.appendHtml(
         `<button class="textButton" commands="tags"><i class="fas fa-tag"></i>${tagsString.substring(
           0,
           tagsString.length - 2,
diff --git a/frontend/src/ts/elements/monkey-power.ts b/frontend/src/ts/elements/monkey-power.ts
index 270675037ff4..c5529b4c628e 100644
--- a/frontend/src/ts/elements/monkey-power.ts
+++ b/frontend/src/ts/elements/monkey-power.ts
@@ -3,9 +3,10 @@ import * as SlowTimer from "../states/slow-timer";
 import Config from "../config";
 import { isSafeNumber } from "@monkeytype/util/numbers";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
+import { ElementWithUtils, qsr } from "../utils/dom";
 
-const html = document.querySelector("html") as HTMLElement;
-const body = document.body;
+const html = qsr("html");
+const body = qsr("body");
 
 type Particle = {
   x: number;
@@ -18,7 +19,7 @@ type Particle = {
 
 type CTX = {
   particles: Particle[];
-  caret?: HTMLElement;
+  caret?: ElementWithUtils;
   canvas?: HTMLCanvasElement;
   context2d?: CanvasRenderingContext2D;
   rendering: boolean;
@@ -122,7 +123,7 @@ function updateParticle(particle: Particle): void {
 }
 
 export function init(): void {
-  ctx.caret = document.querySelector("#caret") as HTMLElement;
+  ctx.caret = qsr("#caret");
   ctx.canvas = createCanvas();
   ctx.context2d = ctx.canvas.getContext("2d") as CanvasRenderingContext2D;
 }
@@ -172,13 +173,16 @@ export function reset(immediate = false): void {
   delete ctx.resetTimeOut;
 
   clearTimeout(ctx.resetTimeOut);
-  body.style.transition = "all .25s, transform 0.8s";
-  body.style.transform = `translate(0,0)`;
+  body.setStyle({
+    transition: "all .25s, transform 0.8s",
+    transform: "translate(0,0)",
+  });
   setTimeout(
     () => {
-      body.style.transition = "all .25s, transform .05s";
-      html.style.overflow = "inherit";
-      html.style.overflowY = "scroll";
+      body.setStyle({
+        transition: "all .25s, transform .05s",
+      });
+      html.setStyle({ overflow: "inherit", overflowY: "scroll" });
     },
     immediate ? 0 : 1000,
   );
@@ -209,21 +213,21 @@ export async function addPower(good = true, extra = false): Promise<void> {
 
     // Shake
     if (["3", "4"].includes(Config.monkeyPowerLevel)) {
-      html.style.overflow = "hidden";
+      html.setStyle({ overflow: "hidden" });
       const shake = [
         Math.round(shakeAmount - Math.random() * shakeAmount),
         Math.round(shakeAmount - Math.random() * shakeAmount),
       ];
-      body.style.transform = `translate(${shake[0]}px, ${shake[1]}px)`;
+      body.setStyle({ transform: `translate(${shake[0]}px, ${shake[1]}px)` });
       if (isSafeNumber(ctx.resetTimeOut)) clearTimeout(ctx.resetTimeOut);
       ctx.resetTimeOut = setTimeout(reset, 2000) as unknown as number;
     }
 
     // Sparks
-    const offset = ctx.caret?.getBoundingClientRect();
+    const offset = ctx.caret?.native.getBoundingClientRect();
     const coords = [
       offset?.left ?? 0,
-      (offset?.top ?? 0) + (ctx.caret?.offsetHeight ?? 0) / 2,
+      (offset?.top ?? 0) + (ctx.caret?.native.offsetHeight ?? 0) / 2,
     ];
 
     for (
diff --git a/frontend/src/ts/elements/no-css.ts b/frontend/src/ts/elements/no-css.ts
index 003180775bc7..42d41933cb4d 100644
--- a/frontend/src/ts/elements/no-css.ts
+++ b/frontend/src/ts/elements/no-css.ts
@@ -1,6 +1,7 @@
 import { envConfig } from "virtual:env-config";
+import { qs } from "../utils/dom";
 
-$("#nocss .requestedStylesheets").html(
+qs("#nocss .requestedStylesheets")?.setHtml(
   "Requested stylesheets:<br>" +
     (
       [
@@ -12,7 +13,7 @@ $("#nocss .requestedStylesheets").html(
       .join("<br>"),
 );
 
-$("#nocss .requestedJs").html(
+qs("#nocss .requestedJs")?.setHtml(
   "Requested Javascript files:<br>" +
     ([...document.querySelectorAll("script")] as HTMLScriptElement[])
       .map((l) => l.src)
@@ -23,7 +24,7 @@ $("#nocss .requestedJs").html(
 );
 
 if (window.navigator.userAgent.toLowerCase().includes("mac")) {
-  $("#nocss .keys").html(`
+  qs("#nocss .keys")?.setHtml(`
     <span
       style="
         padding: 1rem;
@@ -60,7 +61,7 @@ if (window.navigator.userAgent.toLowerCase().includes("mac")) {
     </span>
   `);
 } else {
-  $("#nocss .keys").html(`
+  qs("#nocss .keys")?.setHtml(`
     <span
       style="
         padding: 1rem;
diff --git a/frontend/src/ts/elements/notifications.ts b/frontend/src/ts/elements/notifications.ts
index ece7ac415797..c15e0638ffa3 100644
--- a/frontend/src/ts/elements/notifications.ts
+++ b/frontend/src/ts/elements/notifications.ts
@@ -4,11 +4,18 @@ import * as BannerEvent from "../observables/banner-event";
 import * as NotificationEvent from "../observables/notification-event";
 import { convertRemToPixels } from "../utils/numbers";
 import { animate } from "animejs";
+import { qsr } from "../utils/dom";
+
+const notificationCenter = qsr("#notificationCenter");
+const notificationCenterHistory = notificationCenter.qsr(".history");
+const bannerCenter = qsr("#bannerCenter");
+const app = qsr("#app");
+const clearAllButton = notificationCenter.qsr(".clearAll");
 
 function updateMargin(): void {
-  const height = $("#bannerCenter").height() as number;
-  $("#app").css("padding-top", height + convertRemToPixels(2) + "px");
-  $("#notificationCenter").css("margin-top", height + "px");
+  const height = bannerCenter.native.offsetHeight;
+  app.setStyle({ paddingTop: height + convertRemToPixels(2) + "px" });
+  notificationCenter.setStyle({ marginTop: height + "px" });
 }
 
 let visibleStickyNotifications = 0;
@@ -100,25 +107,23 @@ class Notification {
         visibleStickyNotifications++;
         updateClearAllButton();
       }
-      $("#notificationCenter .history").prepend(`
+      notificationCenterHistory.prependHtml(`
         <div class="notif ${cls}" id=${this.id} style="opacity: 0;">
             <div class="message"><div class="title"><div class="icon">${icon}</div>${title}</div>${this.message}</div>
         </div>
       `);
-      const notif = document.querySelector<HTMLElement>(
-        `#notificationCenter .notif[id='${this.id}']`,
-      );
+      const notif = notificationCenter.qs(`.notif[id='${this.id}']`);
       if (notif === null) return;
 
-      const notifHeight = notif.offsetHeight;
+      const notifHeight = notif.native.offsetHeight;
       const duration = Misc.applyReducedMotion(250);
 
-      animate(notif, {
+      animate(notif.native, {
         opacity: [0, 1],
         duration: duration / 2,
         delay: duration / 2,
       });
-      notif?.addEventListener("click", () => {
+      notif?.on("click", () => {
         this.hide();
         this.closeCallback();
         if (this.duration === 0) {
@@ -127,18 +132,15 @@ class Notification {
         updateClearAllButton();
       });
 
-      const historyElement = document.querySelector(
-        "#notificationCenter .history",
-      ) as HTMLElement;
-      animate(historyElement, {
+      animate(notificationCenterHistory.native, {
         marginTop: {
           from: "-=" + notifHeight,
           to: 0,
         },
         duration: duration / 2,
       });
-      $(`#notificationCenter .notif[id='${this.id}']`).on("hover", () => {
-        $(`#notificationCenter .notif[id='${this.id}']`).toggleClass("hover");
+      notif?.on("hover", () => {
+        notif?.toggleClass("hover");
       });
     } else if (this.type === "banner" || this.type === "psa") {
       let leftside = `<div class="icon lefticon">${icon}</div>`;
@@ -149,7 +151,7 @@ class Notification {
         leftside = `<div class="icon lefticon"><i class="fas fa-fw fa-bullhorn"></i></div><div class="image" style="background-image: url(${this.customIcon})"></div>`;
       }
 
-      $("#bannerCenter").prepend(`
+      bannerCenter.prependHtml(`
         <div class="${this.type} ${cls} content-grid ${
           withImage ? "withImage" : ""
         }" id="${this.id}">
@@ -173,25 +175,27 @@ class Notification {
       updateMargin();
       BannerEvent.dispatch();
       if (this.duration >= 0) {
-        $(
-          `#bannerCenter .banner[id='${this.id}'] .closeButton, #bannerCenter .psa[id='${this.id}'] .closeButton`,
-        ).on("click", () => {
-          this.hide();
-          this.closeCallback();
-        });
+        bannerCenter
+          .qsa(
+            `.banner[id='${this.id}'] .closeButton, .psa[id='${this.id}'] .closeButton`,
+          )
+          .on("click", () => {
+            this.hide();
+            this.closeCallback();
+          });
       }
       // NOTE: This need to be changed if the update banner text is changed
       if (/please (<a.*>)?refresh/i.test(this.message)) {
         // add pointer when refresh is needed
-        $(
-          `#bannerCenter .banner[id='${this.id}'], #bannerCenter .psa[id='${this.id}']`,
-        ).addClass("clickable");
+        bannerCenter
+          .qsa(`.banner[id='${this.id}'], .psa[id='${this.id}']`)
+          .addClass("clickable");
         // refresh on clicking banner
-        $(
-          `#bannerCenter .banner[id='${this.id}'], #bannerCenter .psa[id='${this.id}']`,
-        ).on("click", () => {
-          window.location.reload();
-        });
+        bannerCenter
+          .qsa(`.banner[id='${this.id}'], .psa[id='${this.id}']`)
+          .on("click", () => {
+            window.location.reload();
+          });
       }
     }
     if (this.duration > 0) {
@@ -202,13 +206,13 @@ class Notification {
   }
   hide(): void {
     if (this.type === "notification") {
-      const elem = document.querySelector(
-        `#notificationCenter .notif[id='${this.id}']`,
-      ) as HTMLElement;
+      const notif = notificationCenter.qs(`.notif[id='${this.id}']`);
+
+      if (notif === null) return;
 
       const duration = Misc.applyReducedMotion(250);
 
-      animate(elem, {
+      animate(notif.native, {
         opacity: {
           to: 0,
           duration: duration,
@@ -224,13 +228,13 @@ class Notification {
           delay: duration / 2,
         },
         onComplete: () => {
-          elem.remove();
+          notif.remove();
         },
       });
     } else if (this.type === "banner" || this.type === "psa") {
-      $(
-        `#bannerCenter .banner[id='${this.id}'], #bannerCenter .psa[id='${this.id}']`,
-      ).remove();
+      bannerCenter
+        .qsa(`.banner[id='${this.id}'], .psa[id='${this.id}']`)
+        .remove();
       updateMargin();
       BannerEvent.dispatch();
     }
@@ -239,11 +243,23 @@ class Notification {
 
 function updateClearAllButton(): void {
   if (visibleStickyNotifications > 1) {
-    $("#notificationCenter .clearAll").removeClass("invisible");
-    $("#notificationCenter .clearAll").slideDown(125);
+    animate(clearAllButton.native, {
+      height: [0, "2.25em"],
+      padding: [0, "0.5em"],
+      duration: 125,
+      onBegin: () => {
+        clearAllButton?.removeClass("hidden");
+      },
+    });
   } else if (visibleStickyNotifications < 1) {
-    $("#notificationCenter .clearAll").addClass("invisible");
-    $("#notificationCenter .clearAll").slideUp(125);
+    animate(clearAllButton.native, {
+      height: ["2.25em", 0],
+      padding: ["0.5em", 0],
+      duration: 125,
+      onComplete: () => {
+        clearAllButton?.addClass("hidden");
+      },
+    });
   }
 }
 
@@ -323,20 +339,20 @@ export function addPSA(
 }
 
 export function clearAllNotifications(): void {
-  $("#notificationCenter .notif").remove();
+  notificationCenter.qsa(".notif").remove();
   visibleStickyNotifications = 0;
   updateClearAllButton();
 }
 
 const debouncedMarginUpdate = debounce(100, updateMargin);
 
-$(window).on("resize", () => {
+window.addEventListener("resize", () => {
   debouncedMarginUpdate();
 });
 
-$("#notificationCenter .clearAll").on("click", () => {
-  $("#notificationCenter .notif.bad").each((_, element) => {
-    $(element)[0]?.click();
+notificationCenter.qs(".clearAll")?.on("click", () => {
+  notificationCenter.qsa(".notif").forEach((element) => {
+    element.native.click();
   });
   visibleStickyNotifications = 0;
   updateClearAllButton();
diff --git a/frontend/src/ts/elements/settings/fps-limit-section.ts b/frontend/src/ts/elements/settings/fps-limit-section.ts
index 6e1fc483e751..49e309d1b3e4 100644
--- a/frontend/src/ts/elements/settings/fps-limit-section.ts
+++ b/frontend/src/ts/elements/settings/fps-limit-section.ts
@@ -1,17 +1,14 @@
 import { getfpsLimit, fpsLimitSchema, setfpsLimit } from "../../anim";
+import { qsr } from "../../utils/dom";
 import { ValidatedHtmlInputElement } from "../input-validation";
 import * as Notifications from "../notifications";
 
-const section = document.querySelector(
-  "#pageSettings .section.fpsLimit",
-) as HTMLElement;
+const section = qsr("#pageSettings .section.fpsLimit");
 
-const button = section.querySelector(
-  "button[data-fpsLimit='native']",
-) as HTMLButtonElement;
+const button = section?.qs("button[data-fpsLimit='native']");
 
 const input = new ValidatedHtmlInputElement(
-  section.querySelector('input[type="number"]') as HTMLInputElement,
+  section.qsr('input[type="number"]'),
   {
     schema: fpsLimitSchema,
     inputValueConvert: (val: string) => parseInt(val, 10),
@@ -22,10 +19,10 @@ export function update(): void {
   const fpsLimit = getfpsLimit();
   if (fpsLimit >= 1000) {
     input.setValue(null);
-    button.classList.add("active");
+    button?.addClass("active");
   } else {
     input.setValue(fpsLimit.toString());
-    button.classList.remove("active");
+    button?.removeClass("active");
   }
 }
 
@@ -38,19 +35,19 @@ function save(value: number): void {
 
 function saveFromInput(): void {
   if (input.getValidationResult().status !== "success") return;
-  const val = parseInt(input.getValue(), 10);
+  const val = parseInt(input.getValue() ?? "", 10);
   save(val);
 }
 
-button.addEventListener("click", () => {
+button?.on("click", () => {
   save(1000);
   update();
 });
 
-input.native.addEventListener("keypress", (e) => {
+input.on("keypress", (e) => {
   if (e.key === "Enter") {
     saveFromInput();
   }
 });
 
-input.native.addEventListener("focusout", (e) => saveFromInput());
+input.on("focusout", (e) => saveFromInput());
diff --git a/frontend/src/ts/elements/settings/settings-group.ts b/frontend/src/ts/elements/settings/settings-group.ts
index 37320f9f2053..3651181cac9e 100644
--- a/frontend/src/ts/elements/settings/settings-group.ts
+++ b/frontend/src/ts/elements/settings/settings-group.ts
@@ -9,6 +9,7 @@ import {
   ConfigInputOptions,
   Validation,
 } from "../input-validation";
+import { ElementWithUtils, qs, qsa } from "../../utils/dom";
 
 type Mode = "select" | "button" | "range" | "input";
 
@@ -22,7 +23,7 @@ export default class SettingsGroup<K extends ConfigKey, T = ConfigType[K]> {
   public mode: Mode;
   public setCallback?: () => void;
   public updateCallback?: () => void;
-  private elements: Element[];
+  private elements: ElementWithUtils[];
   private validation?: T extends string
     ? SimpleValidation<T>
     : SimpleValidation<T> & {
@@ -65,7 +66,7 @@ export default class SettingsGroup<K extends ConfigKey, T = ConfigType[K]> {
     };
 
     if (this.mode === "select") {
-      const el = document.querySelector(
+      const el = qs<HTMLSelectElement>(
         `.pageSettings .section[data-config-name=${this.configName}] select`,
       );
 
@@ -79,18 +80,21 @@ export default class SettingsGroup<K extends ConfigKey, T = ConfigType[K]> {
         );
       }
 
-      el.addEventListener("change", (e) => {
-        const target = $(e.target as HTMLSelectElement);
-        if (target.hasClass("disabled") || target.hasClass("no-auto-handle")) {
+      el.on("change", (e) => {
+        if (
+          e.target instanceof HTMLElement &&
+          (e.target?.classList?.contains("disabled") ||
+            e.target?.classList?.contains("no-auto-handle"))
+        ) {
           return;
         }
 
-        this.setValue(target.val() as T);
+        this.setValue(el.getValue() as T);
       });
 
       this.elements = [el];
     } else if (this.mode === "button") {
-      const els = document.querySelectorAll(`
+      const els = qsa<HTMLButtonElement>(`
         .pageSettings .section[data-config-name=${this.configName}] .buttons button, .pageSettings .section[data-config-name=${this.configName}] .inputs button`);
 
       if (els.length === 0) {
@@ -98,10 +102,10 @@ export default class SettingsGroup<K extends ConfigKey, T = ConfigType[K]> {
       }
 
       for (const button of els) {
-        button.addEventListener("click", (e) => {
+        button.on("click", (e) => {
           if (
-            button.classList.contains("disabled") ||
-            button.classList.contains("no-auto-handle")
+            button.hasClass("disabled") ||
+            button.hasClass("no-auto-handle")
           ) {
             return;
           }
@@ -125,7 +129,7 @@ export default class SettingsGroup<K extends ConfigKey, T = ConfigType[K]> {
 
       this.elements = Array.from(els);
     } else if (this.mode === "input") {
-      const input: HTMLInputElement | null = document.querySelector(`
+      const input = qs<HTMLInputElement>(`
         .pageSettings .section[data-config-name=${this.configName}] .inputs .inputAndButton input`);
       if (input === null) {
         throw new Error(`Failed to find input element for ${configName}`);
@@ -151,7 +155,7 @@ export default class SettingsGroup<K extends ConfigKey, T = ConfigType[K]> {
 
       this.elements = [input];
     } else if (this.mode === "range") {
-      const el = document.querySelector(
+      const el = qs<HTMLInputElement>(
         `.pageSettings .section[data-config-name=${this.configName}] input[type=range]`,
       );
 
@@ -163,14 +167,11 @@ export default class SettingsGroup<K extends ConfigKey, T = ConfigType[K]> {
         this.setValue(val);
       });
 
-      el.addEventListener("input", (e) => {
-        if (
-          el.classList.contains("disabled") ||
-          el.classList.contains("no-auto-handle")
-        ) {
+      el.on("input", (e) => {
+        if (el.hasClass("disabled") || el.hasClass("no-auto-handle")) {
           return;
         }
-        const val = parseFloat((el as HTMLInputElement).value) as unknown as T;
+        const val = parseFloat(el.getValue() ?? "") as T;
         this.updateUI(val);
         debounced(val);
       });
@@ -227,9 +228,9 @@ export default class SettingsGroup<K extends ConfigKey, T = ConfigType[K]> {
         if (typed === "false") typed = false as T;
 
         if (typed !== newValue) {
-          button.classList.remove("active");
+          button.removeClass("active");
         } else {
-          button.classList.add("active");
+          button.addClass("active");
         }
       }
     } else if (this.mode === "range") {
diff --git a/frontend/src/ts/index.ts b/frontend/src/ts/index.ts
index 17167bb2f56a..f74f3104e236 100644
--- a/frontend/src/ts/index.ts
+++ b/frontend/src/ts/index.ts
@@ -47,6 +47,7 @@ import "./elements/psa";
 import "./utils/url-handler";
 import "./modals/last-signed-out-result";
 import { applyEngineSettings } from "./anim";
+import { qs, qsa, qsr } from "./utils/dom";
 
 // Lock Math.random
 Object.defineProperty(Math, "random", {
@@ -93,6 +94,9 @@ addToGlobal({
   egVideoListener: egVideoListener,
   toggleDebugLogs: Logger.toggleDebugLogs,
   toggleSentryDebug: Sentry.toggleDebug,
+  qs: qs,
+  qsa: qsa,
+  qsr: qsr,
 });
 
 if (isDevEnvironment()) {
diff --git a/frontend/src/ts/input/handlers/keydown.ts b/frontend/src/ts/input/handlers/keydown.ts
index 7f3daa7802f3..e15a5a244993 100644
--- a/frontend/src/ts/input/handlers/keydown.ts
+++ b/frontend/src/ts/input/handlers/keydown.ts
@@ -72,6 +72,7 @@ export async function handleEnter(
             },
           );
         }
+        e.preventDefault();
         return;
       } else {
         TestState.setBailedOut(true);
diff --git a/frontend/src/ts/modals/custom-text.ts b/frontend/src/ts/modals/custom-text.ts
index 062bc6ffdcc0..b3396bcadcfa 100644
--- a/frontend/src/ts/modals/custom-text.ts
+++ b/frontend/src/ts/modals/custom-text.ts
@@ -269,7 +269,7 @@ function cleanUpText(): string[] {
 
   if (text === "") return [];
 
-  text = text.normalize().trim();
+  text = text.normalize();
   // text = text.replace(/[\r]/gm, " ");
 
   //replace any characters that look like a space with an actual space
diff --git a/frontend/src/ts/modals/edit-preset.ts b/frontend/src/ts/modals/edit-preset.ts
index 39f819153d84..a45b976cb3f4 100644
--- a/frontend/src/ts/modals/edit-preset.ts
+++ b/frontend/src/ts/modals/edit-preset.ts
@@ -22,6 +22,7 @@ import {
 import { getDefaultConfig } from "../constants/default-config";
 import { SnapshotPreset } from "../constants/default-snapshot";
 import { ValidatedHtmlInputElement } from "../elements/input-validation";
+import { qsr } from "../utils/dom";
 
 const state = {
   presetType: "full" as PresetType,
@@ -47,9 +48,7 @@ export function show(action: string, id?: string, name?: string): void {
       $("#editPresetModal .modal .text").addClass("hidden");
       addCheckBoxes();
       presetNameEl ??= new ValidatedHtmlInputElement(
-        document.querySelector(
-          "#editPresetModal .modal input",
-        ) as HTMLInputElement,
+        qsr("#editPresetModal .modal input"),
         {
           schema: PresetNameSchema,
         },
@@ -58,8 +57,8 @@ export function show(action: string, id?: string, name?: string): void {
         $("#editPresetModal .modal").attr("data-action", "add");
         $("#editPresetModal .modal .popupTitle").html("Add new preset");
         $("#editPresetModal .modal .submit").html(`add`);
-        presetNameEl?.setValue(null);
-        presetNameEl?.native.parentElement?.classList.remove("hidden");
+        presetNameEl.setValue(null);
+        presetNameEl.getParent()?.removeClass("hidden");
         $("#editPresetModal .modal input").removeClass("hidden");
         $(
           "#editPresetModal .modal label.changePresetToCurrentCheckbox",
@@ -74,7 +73,7 @@ export function show(action: string, id?: string, name?: string): void {
         $("#editPresetModal .modal .popupTitle").html("Edit preset");
         $("#editPresetModal .modal .submit").html(`save`);
         presetNameEl?.setValue(name);
-        presetNameEl?.native.parentElement?.classList.remove("hidden");
+        presetNameEl?.getParent()?.removeClass("hidden");
 
         $("#editPresetModal .modal input").removeClass("hidden");
         $(
@@ -103,7 +102,7 @@ export function show(action: string, id?: string, name?: string): void {
         $("#editPresetModal .modal .inputs").addClass("hidden");
         $("#editPresetModal .modal .presetType").addClass("hidden");
         $("#editPresetModal .modal .presetNameTitle").addClass("hidden");
-        presetNameEl?.native.parentElement?.classList.add("hidden");
+        presetNameEl?.getParent()?.addClass("hidden");
       }
       updateUI();
     },
diff --git a/frontend/src/ts/modals/edit-profile.ts b/frontend/src/ts/modals/edit-profile.ts
index 60d3b637a4b7..633c89d39711 100644
--- a/frontend/src/ts/modals/edit-profile.ts
+++ b/frontend/src/ts/modals/edit-profile.ts
@@ -15,6 +15,7 @@ import {
   WebsiteSchema,
 } from "@monkeytype/schemas/users";
 import { InputIndicator } from "../elements/input-indicator";
+import { ElementWithUtils, qsr } from "../utils/dom";
 
 export function show(): void {
   if (!ConnectionState.get()) {
@@ -42,17 +43,15 @@ function hide(): void {
   });
 }
 
-const bioInput: JQuery<HTMLTextAreaElement> = $("#editProfileModal .bio");
-const keyboardInput: JQuery<HTMLTextAreaElement> = $(
-  "#editProfileModal .keyboard",
-);
-const twitterInput = $("#editProfileModal .twitter");
-const githubInput = $("#editProfileModal .github");
-const websiteInput = $("#editProfileModal .website");
-const badgeIdsSelect = $("#editProfileModal .badgeSelectionContainer");
-const showActivityOnPublicProfileInput = document.querySelector(
+const bioInput = qsr<HTMLTextAreaElement>("#editProfileModal .bio");
+const keyboardInput = qsr<HTMLTextAreaElement>("#editProfileModal .keyboard");
+const twitterInput = qsr<HTMLInputElement>("#editProfileModal .twitter");
+const githubInput = qsr<HTMLInputElement>("#editProfileModal .github");
+const websiteInput = qsr<HTMLInputElement>("#editProfileModal .website");
+const badgeIdsSelect = qsr("#editProfileModal .badgeSelectionContainer");
+const showActivityOnPublicProfileInput = qsr<HTMLInputElement>(
   "#editProfileModal .editProfileShowActivityOnPublicProfile",
-) as HTMLInputElement;
+);
 
 const indicators = [
   addValidation(twitterInput, TwitterProfileSchema),
@@ -70,13 +69,13 @@ function hydrateInputs(): void {
     snapshot.details ?? {};
   currentSelectedBadgeId = -1;
 
-  bioInput.val(bio ?? "");
-  keyboardInput.val(keyboard ?? "");
-  twitterInput.val(socialProfiles?.twitter ?? "");
-  githubInput.val(socialProfiles?.github ?? "");
-  websiteInput.val(socialProfiles?.website ?? "");
-  badgeIdsSelect.html("");
-  showActivityOnPublicProfileInput.checked =
+  bioInput.setValue(bio ?? "");
+  keyboardInput.setValue(keyboard ?? "");
+  twitterInput.setValue(socialProfiles?.twitter ?? "");
+  githubInput.setValue(socialProfiles?.github ?? "");
+  websiteInput.setValue(socialProfiles?.website ?? "");
+  badgeIdsSelect.setHtml("");
+  showActivityOnPublicProfileInput.native.checked =
     showActivityOnPublicProfile ?? false;
 
   badges?.forEach((badge: Badge) => {
@@ -88,10 +87,10 @@ function hydrateInputs(): void {
     const badgeWrapper = `<button type="button" class="badgeSelectionItem ${
       badge.selected ? "selected" : ""
     }" selection-id=${badge.id}>${badgeOption}</button>`;
-    badgeIdsSelect.append(badgeWrapper);
+    badgeIdsSelect?.appendHtml(badgeWrapper);
   });
 
-  badgeIdsSelect.prepend(
+  badgeIdsSelect?.prependHtml(
     `<button type="button" class="badgeSelectionItem ${
       currentSelectedBadgeId === -1 ? "selected" : ""
     }" selection-id=${-1}>
@@ -106,7 +105,7 @@ function hydrateInputs(): void {
     const selectionId = $(currentTarget).attr("selection-id") as string;
     currentSelectedBadgeId = parseInt(selectionId, 10);
 
-    badgeIdsSelect.find(".badgeSelectionItem").removeClass("selected");
+    badgeIdsSelect?.qsa(".badgeSelectionItem")?.removeClass("selected");
     $(currentTarget).addClass("selected");
   });
 
@@ -119,13 +118,13 @@ function initializeCharacterCounters(): void {
 }
 
 function buildUpdatesFromInputs(): UserProfileDetails {
-  const bio = (bioInput.val() ?? "") as string;
-  const keyboard = (keyboardInput.val() ?? "") as string;
-  const twitter = (twitterInput.val() ?? "") as string;
-  const github = (githubInput.val() ?? "") as string;
-  const website = (websiteInput.val() ?? "") as string;
+  const bio = bioInput.getValue() ?? "";
+  const keyboard = keyboardInput.getValue() ?? "";
+  const twitter = twitterInput.getValue() ?? "";
+  const github = githubInput.getValue() ?? "";
+  const website = websiteInput.getValue() ?? "";
   const showActivityOnPublicProfile =
-    showActivityOnPublicProfileInput.checked ?? false;
+    showActivityOnPublicProfileInput.isChecked() ?? false;
 
   const profileUpdates: UserProfileDetails = {
     bio,
@@ -199,7 +198,10 @@ async function updateProfile(): Promise<void> {
   hide();
 }
 
-function addValidation(element: JQuery, schema: Zod.Schema): InputIndicator {
+function addValidation(
+  element: ElementWithUtils<HTMLInputElement>,
+  schema: Zod.Schema,
+): InputIndicator {
   const indicator = new InputIndicator(element, {
     valid: {
       icon: "fa-check",
diff --git a/frontend/src/ts/modals/google-sign-up.ts b/frontend/src/ts/modals/google-sign-up.ts
index fc783ce3522d..d436fbc01846 100644
--- a/frontend/src/ts/modals/google-sign-up.ts
+++ b/frontend/src/ts/modals/google-sign-up.ts
@@ -17,6 +17,7 @@ import { resetIgnoreAuthCallback } from "../firebase";
 import { ValidatedHtmlInputElement } from "../elements/input-validation";
 import { UserNameSchema } from "@monkeytype/schemas/users";
 import { remoteValidation } from "../utils/remote-validation";
+import { qsr } from "../utils/dom";
 
 let signedInUser: UserCredential | undefined = undefined;
 
@@ -141,16 +142,14 @@ function disableButton(): void {
   $("#googleSignUpModal button").prop("disabled", true);
 }
 
-const nameInputEl = document.querySelector(
-  "#googleSignUpModal input",
-) as HTMLInputElement;
+const nameInputEl = qsr<HTMLInputElement>("#googleSignUpModal input");
 
 function enableInput(): void {
-  nameInputEl.disabled = false;
+  nameInputEl?.enable();
 }
 
 function disableInput(): void {
-  nameInputEl.disabled = true;
+  nameInputEl?.disable();
 }
 
 new ValidatedHtmlInputElement(nameInputEl, {
diff --git a/frontend/src/ts/modals/quote-report.ts b/frontend/src/ts/modals/quote-report.ts
index dd47b817d91c..991ec10bc543 100644
--- a/frontend/src/ts/modals/quote-report.ts
+++ b/frontend/src/ts/modals/quote-report.ts
@@ -9,6 +9,7 @@ import SlimSelect from "slim-select";
 import AnimatedModal, { ShowOptions } from "../utils/animated-modal";
 import { CharacterCounter } from "../elements/character-counter";
 import { QuoteReportReason } from "@monkeytype/schemas/quotes";
+import { qsr } from "../utils/dom";
 
 type State = {
   quoteToReport?: Quote;
@@ -60,7 +61,7 @@ export async function show(
         },
       });
 
-      new CharacterCounter($("#quoteReportModal .comment"), 250);
+      new CharacterCounter(qsr("#quoteReportModal .comment"), 250);
     },
   });
 }
diff --git a/frontend/src/ts/modals/quote-submit.ts b/frontend/src/ts/modals/quote-submit.ts
index 172f5e64bd7f..07d0befc78cc 100644
--- a/frontend/src/ts/modals/quote-submit.ts
+++ b/frontend/src/ts/modals/quote-submit.ts
@@ -9,6 +9,7 @@ import AnimatedModal, { ShowOptions } from "../utils/animated-modal";
 import { CharacterCounter } from "../elements/character-counter";
 import { Language } from "@monkeytype/schemas/languages";
 import { LanguageGroupNames } from "../constants/languages";
+import { qsr } from "../utils/dom";
 
 let dropdownReady = false;
 async function initDropdown(): Promise<void> {
@@ -83,7 +84,7 @@ export async function show(showOptions: ShowOptions): Promise<void> {
       $("#quoteSubmitModal .newQuoteLanguage").trigger("change");
       $("#quoteSubmitModal input").val("");
 
-      new CharacterCounter($("#quoteSubmitModal .newQuoteText"), 250);
+      new CharacterCounter(qsr("#quoteSubmitModal .newQuoteText"), 250);
     },
   });
 }
diff --git a/frontend/src/ts/modals/save-custom-text.ts b/frontend/src/ts/modals/save-custom-text.ts
index 1f5771526123..d5a13400da1d 100644
--- a/frontend/src/ts/modals/save-custom-text.ts
+++ b/frontend/src/ts/modals/save-custom-text.ts
@@ -4,6 +4,7 @@ import * as CustomTextState from "../states/custom-text-name";
 import AnimatedModal, { ShowOptions } from "../utils/animated-modal";
 import { ValidatedHtmlInputElement } from "../elements/input-validation";
 import { z } from "zod";
+import { qsr } from "../utils/dom";
 
 type IncomingData = {
   text: string[];
@@ -18,7 +19,7 @@ const state: State = {
 };
 
 const validatedInput = new ValidatedHtmlInputElement(
-  $("#saveCustomTextModal .textName")[0] as HTMLInputElement,
+  qsr("#saveCustomTextModal .textName"),
   {
     debounceDelay: 500,
     schema: z
diff --git a/frontend/src/ts/modals/user-report.ts b/frontend/src/ts/modals/user-report.ts
index 972293ad3517..f54945928e8f 100644
--- a/frontend/src/ts/modals/user-report.ts
+++ b/frontend/src/ts/modals/user-report.ts
@@ -7,6 +7,7 @@ import AnimatedModal from "../utils/animated-modal";
 import { isAuthenticated } from "../firebase";
 import { CharacterCounter } from "../elements/character-counter";
 import { ReportUserReason } from "@monkeytype/schemas/users";
+import { qsr } from "../utils/dom";
 
 type State = {
   userUid?: string;
@@ -68,7 +69,7 @@ export async function show(options: ShowOptions): Promise<void> {
     },
   });
 
-  new CharacterCounter($("#userReportModal .comment"), 250);
+  new CharacterCounter(qsr("#userReportModal .comment"), 250);
 }
 
 async function hide(): Promise<void> {
diff --git a/frontend/src/ts/observables/navigation-event.ts b/frontend/src/ts/observables/navigation-event.ts
index 42241636204f..51d4584a6162 100644
--- a/frontend/src/ts/observables/navigation-event.ts
+++ b/frontend/src/ts/observables/navigation-event.ts
@@ -1,9 +1,14 @@
-type NavigationEvent = {
-  url: string;
+import { LoadingOptions } from "../pages/page";
+
+export type NavigateOptions = {
+  force?: boolean;
+  empty?: boolean;
+  //this will be used in tribe
   data?: unknown;
+  loadingOptions?: LoadingOptions;
 };
 
-type SubscribeFunction = (event: NavigationEvent) => void;
+type SubscribeFunction = (url: string, options: NavigateOptions) => void;
 
 const subscribers: SubscribeFunction[] = [];
 
@@ -11,10 +16,10 @@ export function subscribe(fn: SubscribeFunction): void {
   subscribers.push(fn);
 }
 
-export function dispatch(event: NavigationEvent): void {
+export function dispatch(url: string, options: NavigateOptions): void {
   subscribers.forEach((fn) => {
     try {
-      fn(event);
+      fn(url, options);
     } catch (e) {
       console.error("Navigation event subscriber threw an error");
       console.error(e);
diff --git a/frontend/src/ts/pages/login.ts b/frontend/src/ts/pages/login.ts
index 9422ddf920eb..73c63da7850a 100644
--- a/frontend/src/ts/pages/login.ts
+++ b/frontend/src/ts/pages/login.ts
@@ -11,6 +11,7 @@ import { ValidatedHtmlInputElement } from "../elements/input-validation";
 import { isDevEnvironment } from "../utils/misc";
 import { z } from "zod";
 import { remoteValidation } from "../utils/remote-validation";
+import { qsr } from "../utils/dom";
 
 let registerForm: {
   name?: string;
@@ -69,9 +70,9 @@ export function getSignupData(): SignupData | false {
   return isFormComplete() ? (registerForm as SignupData) : false;
 }
 
-const nameInputEl = document.querySelector(
+const nameInputEl = qsr<HTMLInputElement>(
   ".page.pageLogin .register.side input.usernameInput",
-) as HTMLInputElement;
+);
 new ValidatedHtmlInputElement(nameInputEl, {
   schema: UserNameSchema,
   isValid: remoteValidation(
@@ -81,7 +82,7 @@ new ValidatedHtmlInputElement(nameInputEl, {
   debounceDelay: 1000,
   callback: (result) => {
     registerForm.name =
-      result.status === "success" ? nameInputEl.value : undefined;
+      result.status === "success" ? nameInputEl?.getValue() : undefined;
     updateSignupButton();
   },
 });
@@ -91,9 +92,7 @@ let disposableEmailModule: typeof import("disposable-email-domains-js") | null =
 let moduleLoadAttempted = false;
 
 const emailInputEl = new ValidatedHtmlInputElement(
-  document.querySelector(
-    ".page.pageLogin .register.side input.emailInput",
-  ) as HTMLInputElement,
+  qsr(".page.pageLogin .register.side input.emailInput"),
   {
     schema: UserEmailSchema,
     isValid: async (email: string) => {
@@ -137,13 +136,13 @@ const emailInputEl = new ValidatedHtmlInputElement(
     callback: (result) => {
       if (result.status === "success") {
         //re-validate the verify email
-        emailVerifyInputEl.dispatchEvent(new Event("input"));
+        emailVerifyInputEl?.dispatch("input");
       }
     },
   },
 );
 
-emailInputEl.native.addEventListener("focus", async () => {
+emailInputEl.on("focus", async () => {
   if (!moduleLoadAttempted) {
     moduleLoadAttempted = true;
     try {
@@ -154,9 +153,9 @@ emailInputEl.native.addEventListener("focus", async () => {
   }
 });
 
-const emailVerifyInputEl = document.querySelector(
+const emailVerifyInputEl = qsr<HTMLInputElement>(
   ".page.pageLogin .register.side input.verifyEmailInput",
-) as HTMLInputElement;
+);
 new ValidatedHtmlInputElement(emailVerifyInputEl, {
   isValid: async (emailVerify: string) => {
     return emailInputEl.getValue() === emailVerify
@@ -175,23 +174,21 @@ new ValidatedHtmlInputElement(emailVerifyInputEl, {
 });
 
 const passwordInputEl = new ValidatedHtmlInputElement(
-  document.querySelector(
-    ".page.pageLogin .register.side .passwordInput",
-  ) as HTMLInputElement,
+  qsr(".page.pageLogin .register.side .passwordInput"),
   {
     schema: isDevEnvironment() ? z.string().min(6) : PasswordSchema,
     callback: (result) => {
       if (result.status === "success") {
         //re-validate the verify password
-        passwordVerifyInputEl.dispatchEvent(new Event("input"));
+        passwordVerifyInputEl?.dispatch("input");
       }
     },
   },
 );
 
-const passwordVerifyInputEl = document.querySelector(
+const passwordVerifyInputEl = qsr<HTMLInputElement>(
   ".page.pageLogin .register.side .verifyPasswordInput",
-) as HTMLInputElement;
+);
 new ValidatedHtmlInputElement(passwordVerifyInputEl, {
   isValid: async (passwordVerify: string) => {
     return passwordInputEl.getValue() === passwordVerify
diff --git a/frontend/src/ts/pages/profile-search.ts b/frontend/src/ts/pages/profile-search.ts
index 7c016d1afc3b..684bf7a8bea8 100644
--- a/frontend/src/ts/pages/profile-search.ts
+++ b/frontend/src/ts/pages/profile-search.ts
@@ -5,6 +5,7 @@ import { ValidatedHtmlInputElement } from "../elements/input-validation";
 import { UserNameSchema, UserProfile } from "@monkeytype/schemas/users";
 import { remoteValidation } from "../utils/remote-validation";
 import * as NavigationEvent from "../observables/navigation-event";
+import { qsr } from "../utils/dom";
 
 let nameInputEl: ValidatedHtmlInputElement | null = null;
 let lastProfile: UserProfile | null = null;
@@ -28,9 +29,7 @@ export const page = new Page({
     Skeleton.append("pageProfileSearch", "main");
 
     nameInputEl ??= new ValidatedHtmlInputElement(
-      document.querySelector(
-        ".page.pageProfileSearch input",
-      ) as HTMLInputElement,
+      qsr(".page.pageProfileSearch input"),
       {
         schema: UserNameSchema,
         isValid: remoteValidation(
@@ -65,8 +64,7 @@ export const page = new Page({
 $(".page.pageProfileSearch form").on("submit", (e) => {
   e.preventDefault();
   if (lastProfile === null) return;
-  NavigationEvent.dispatch({
-    url: `/profile/${lastProfile.name}`,
+  NavigationEvent.dispatch(`/profile/${lastProfile.name}`, {
     data: lastProfile,
   });
 });
diff --git a/frontend/src/ts/pages/settings.ts b/frontend/src/ts/pages/settings.ts
index 0c60509f463e..bdb76e5254f0 100644
--- a/frontend/src/ts/pages/settings.ts
+++ b/frontend/src/ts/pages/settings.ts
@@ -43,6 +43,7 @@ import * as CustomBackgroundPicker from "../elements/settings/custom-background-
 import * as CustomFontPicker from "../elements/settings/custom-font-picker";
 import * as AuthEvent from "../observables/auth-event";
 import * as FpsLimitSection from "../elements/settings/fps-limit-section";
+import { qsr } from "../utils/dom";
 
 let settingsInitialized = false;
 
@@ -204,6 +205,11 @@ async function initGroups(): Promise<void> {
     UpdateConfig.setIndicateTypos,
     "button",
   );
+  groups["compositionDisplay"] = new SettingsGroup(
+    "compositionDisplay",
+    UpdateConfig.setCompositionDisplay,
+    "button",
+  );
   groups["hideExtraLetters"] = new SettingsGroup(
     "hideExtraLetters",
     UpdateConfig.setHideExtraLetters,
@@ -643,9 +649,7 @@ async function fillSettingsPage(): Promise<void> {
   });
 
   handleConfigInput({
-    input: document.querySelector(
-      ".pageSettings .section[data-config-name='minWpm'] input",
-    ),
+    input: qsr(".pageSettings .section[data-config-name='minWpm'] input"),
     configName: "minWpmCustomSpeed",
     validation: {
       schema: true,
@@ -657,9 +661,7 @@ async function fillSettingsPage(): Promise<void> {
   });
 
   handleConfigInput({
-    input: document.querySelector(
-      ".pageSettings .section[data-config-name='minAcc'] input",
-    ),
+    input: qsr(".pageSettings .section[data-config-name='minAcc'] input"),
     configName: "minAccCustom",
     validation: {
       schema: true,
@@ -668,9 +670,7 @@ async function fillSettingsPage(): Promise<void> {
   });
 
   handleConfigInput({
-    input: document.querySelector(
-      ".pageSettings .section[data-config-name='minBurst'] input",
-    ),
+    input: qsr(".pageSettings .section[data-config-name='minBurst'] input"),
     configName: "minBurstCustomSpeed",
     validation: {
       schema: true,
@@ -682,9 +682,7 @@ async function fillSettingsPage(): Promise<void> {
   });
 
   handleConfigInput({
-    input: document.querySelector(
-      ".pageSettings .section[data-config-name='paceCaret'] input",
-    ),
+    input: qsr(".pageSettings .section[data-config-name='paceCaret'] input"),
     configName: "paceCaretCustomSpeed",
     validation: {
       schema: true,
@@ -693,7 +691,7 @@ async function fillSettingsPage(): Promise<void> {
   });
 
   handleConfigInput({
-    input: document.querySelector(
+    input: qsr(
       ".pageSettings .section[data-config-name='customBackgroundSize'] input[type='text']",
     ),
     configName: "customBackground",
diff --git a/frontend/src/ts/ready.ts b/frontend/src/ts/ready.ts
index 31a8f1d459c5..742ca75cdd56 100644
--- a/frontend/src/ts/ready.ts
+++ b/frontend/src/ts/ready.ts
@@ -10,14 +10,17 @@ import { getActiveFunboxesWithFunction } from "./test/funbox/list";
 import { loadPromise } from "./config";
 import { authPromise } from "./firebase";
 import { animate } from "animejs";
+import { onDocumentReady, qs } from "./utils/dom";
 
-$(async (): Promise<void> => {
+onDocumentReady(async () => {
   await loadPromise;
   await authPromise;
 
   //this line goes back to pretty much the beginning of the project and im pretty sure its here
   //to make sure the initial theme application doesnt animate the background color
-  $("body").css("transition", "background .25s, transform .05s");
+  qs("body")?.setStyle({
+    transition: "background .25s, transform .05s",
+  });
   MerchBanner.showIfNotClosedBefore();
 
   for (const fb of getActiveFunboxesWithFunction("applyGlobalCSS")) {
@@ -34,12 +37,12 @@ $(async (): Promise<void> => {
     void ServerConfiguration.sync().then(() => {
       if (!ServerConfiguration.get()?.users.signUp) {
         AccountButton.hide();
-        $(".register").addClass("hidden");
-        $(".login").addClass("hidden");
-        $(".disabledNotification").removeClass("hidden");
+        qs(".register")?.addClass("hidden");
+        qs(".login")?.addClass("hidden");
+        qs(".disabledNotification")?.removeClass("hidden");
       }
       if (!ServerConfiguration.get()?.connections.enabled) {
-        $(".accountButtonAndMenu .goToFriends").addClass("hidden");
+        qs(".accountButtonAndMenu .goToFriends")?.addClass("hidden");
       }
     });
   }
diff --git a/frontend/src/ts/test/caps-warning.ts b/frontend/src/ts/test/caps-warning.ts
index aa0c6760dbf2..cb78f72fbd7a 100644
--- a/frontend/src/ts/test/caps-warning.ts
+++ b/frontend/src/ts/test/caps-warning.ts
@@ -22,9 +22,13 @@ function hide(): void {
 }
 
 function update(event: JQuery.KeyDownEvent | JQuery.KeyUpEvent): void {
-  const modState = event?.originalEvent?.getModifierState?.("CapsLock");
-  if (modState !== undefined) {
-    capsState = modState;
+  if (event?.originalEvent?.key === "CapsLock" && capsState !== null) {
+    capsState = !capsState;
+  } else {
+    const modState = event?.originalEvent?.getModifierState?.("CapsLock");
+    if (modState !== undefined) {
+      capsState = modState;
+    }
   }
 
   try {
diff --git a/frontend/src/ts/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts
index 7e18d352716e..365708a7ecaa 100644
--- a/frontend/src/ts/test/test-logic.ts
+++ b/frontend/src/ts/test/test-logic.ts
@@ -12,6 +12,7 @@ import * as CustomText from "./custom-text";
 import * as CustomTextState from "../states/custom-text-name";
 import * as TestStats from "./test-stats";
 import * as PractiseWords from "./practise-words";
+import * as SoundController from "../controllers/sound-controller";
 import * as ShiftTracker from "./shift-tracker";
 import * as AltTracker from "./alt-tracker";
 import * as Focus from "./focus";
@@ -296,6 +297,7 @@ export function restart(options = {} as RestartOptions): void {
   TestUI.reset();
   CompositionState.setComposing(false);
   CompositionState.setData("");
+  void SoundController.clearAllSounds();
 
   if (TestState.resultVisible) {
     if (Config.randomTheme !== "off") {
@@ -400,6 +402,7 @@ export function restart(options = {} as RestartOptions): void {
 
 let lastInitError: Error | null = null;
 let rememberLazyMode: boolean;
+let showedLazyModeNotification: boolean = false;
 let testReinitCount = 0;
 
 async function init(): Promise<boolean> {
@@ -494,7 +497,7 @@ async function init(): Promise<boolean> {
           important: true,
         },
       );
-      UpdateConfig.setLazyMode(false, true);
+      UpdateConfig.setLazyMode(false, false);
     } else if (rememberLazyMode && anySupportsLazyMode) {
       UpdateConfig.setLazyMode(true, true);
     }
@@ -502,10 +505,12 @@ async function init(): Promise<boolean> {
     // normal mode
     if (Config.lazyMode && !allowLazyMode) {
       rememberLazyMode = true;
+      showedLazyModeNotification = true;
       Notifications.add("This language does not support lazy mode.", 0, {
         important: true,
       });
-      UpdateConfig.setLazyMode(false, true);
+
+      UpdateConfig.setLazyMode(false, false);
     } else if (rememberLazyMode && !language.noLazyMode) {
       UpdateConfig.setLazyMode(true, true);
     }
@@ -1627,7 +1632,10 @@ ConfigEvent.subscribe((eventKey, eventValue, nosave) => {
       ArabicLazyMode.set(eventValue as boolean);
     }
     if (eventValue === false) {
-      rememberLazyMode = false;
+      if (!showedLazyModeNotification) {
+        rememberLazyMode = false;
+      }
+      showedLazyModeNotification = false;
     }
   }
 });
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index 0b3f727c8174..e70bce04f8b9 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -856,7 +856,7 @@ export async function updateWordLetters({
               `<letter class="incorrect ${tabChar}${nlChar}">` +
               (Config.indicateTypos === "replace" ||
               Config.indicateTypos === "both"
-                ? inputChars[i] === " "
+                ? inputChars[i] === " " || inputChars[i] === "\t"
                   ? "_"
                   : inputChars[i]
                 : currentLetter) +
diff --git a/frontend/src/ts/test/words-generator.ts b/frontend/src/ts/test/words-generator.ts
index 00ed47d8607c..bca09c16433f 100644
--- a/frontend/src/ts/test/words-generator.ts
+++ b/frontend/src/ts/test/words-generator.ts
@@ -918,7 +918,6 @@ export async function getNextWord(
   randomWord = randomWord.replace(/ +/gm, " ");
   randomWord = randomWord.replace(/(^ )|( $)/gm, "");
   randomWord = applyLazyModeToWord(randomWord, currentLanguage);
-  randomWord = await applyBritishEnglishToWord(randomWord, previousWordRaw);
 
   if (Config.language.startsWith("swiss_german")) {
     randomWord = randomWord.replace(/ß/g, "ss");
@@ -936,6 +935,9 @@ export async function getNextWord(
       wordsBound,
     );
   }
+
+  randomWord = await applyBritishEnglishToWord(randomWord, previousWordRaw);
+
   if (Config.numbers) {
     if (random() < 0.1) {
       randomWord = GetText.getNumbers(4);
diff --git a/frontend/src/ts/ui.ts b/frontend/src/ts/ui.ts
index 780537796083..d0e7b59d271f 100644
--- a/frontend/src/ts/ui.ts
+++ b/frontend/src/ts/ui.ts
@@ -11,6 +11,7 @@ import { isCustomTextLong } from "./states/custom-text-name";
 import { canQuickRestart } from "./utils/quick-restart";
 import { FontName } from "@monkeytype/schemas/fonts";
 import { applyFontFamily } from "./controllers/theme-controller";
+import { qs } from "./utils/dom";
 
 let isPreviewingFont = false;
 export function previewFontFamily(font: FontName): void {
@@ -48,7 +49,7 @@ function updateKeytips(): void {
       : "ctrl";
 
   const commandKey = Config.quickRestart === "esc" ? "tab" : "esc";
-  $("footer .keyTips").html(`
+  qs("footer .keyTips")?.setHtml(`
     ${
       Config.quickRestart === "off"
         ? "<key>tab</key> + <key>enter</key>"
@@ -58,9 +59,11 @@ function updateKeytips(): void {
 }
 
 if (isDevEnvironment()) {
-  $("header #logo .top").text("localhost");
-  $("head title").text($("head title").text() + " (localhost)");
-  $("body").append(
+  qs("header #logo .top")?.setText("localhost");
+  qs("head title")?.setText(
+    (qs("head title")?.native.textContent ?? "") + " (localhost)",
+  );
+  qs("body")?.appendHtml(
     `<div class="devIndicator tl">local</div><div class="devIndicator br">local</div>`,
   );
 }
@@ -107,7 +110,7 @@ const throttledEvent = throttle(250, () => {
   Caret.hide();
 });
 
-$(window).on("resize", () => {
+window.addEventListener("resize", () => {
   throttledEvent();
   debouncedEvent();
 });
@@ -115,10 +118,11 @@ $(window).on("resize", () => {
 ConfigEvent.subscribe(async (eventKey) => {
   if (eventKey === "quickRestart") updateKeytips();
   if (eventKey === "showKeyTips") {
+    const keyTipsElement = qs("footer .keyTips");
     if (Config.showKeyTips) {
-      $("footer .keyTips").removeClass("hidden");
+      keyTipsElement?.removeClass("hidden");
     } else {
-      $("footer .keyTips").addClass("hidden");
+      keyTipsElement?.addClass("hidden");
     }
   }
   if (eventKey === "fontFamily") {
diff --git a/frontend/src/ts/utils/dom.ts b/frontend/src/ts/utils/dom.ts
new file mode 100644
index 000000000000..6befb2eabbde
--- /dev/null
+++ b/frontend/src/ts/utils/dom.ts
@@ -0,0 +1,604 @@
+/**
+ * Query Selector
+ *
+ * Query the document for a single element matching the selector.
+ * @returns An ElementWithUtils wrapping the found element, null if not found.
+ */
+export function qs<T extends HTMLElement = HTMLElement>(
+  selector: string,
+): ElementWithUtils<T> | null {
+  const el = document.querySelector<T>(selector);
+  return el ? new ElementWithUtils(el) : null;
+}
+
+/**
+ * Query Selector All
+ *
+ * Query the document for all elements matching the selector.
+ * @returns An ArrayWithUtils containing ElementWithUtils wrapping each found element.
+ */
+export function qsa<T extends HTMLElement = HTMLElement>(
+  selector: string,
+): ElementsWithUtils<T> {
+  const elements = Array.from(document.querySelectorAll<T>(selector))
+    .filter((el) => el !== null)
+    .map((el) => new ElementWithUtils(el));
+  return new ElementsWithUtils<T>(...elements);
+}
+
+/**
+ * Query Selector Required
+ *
+ * Query the document for a single element matching the selector.
+ * Useful for elements that are guaranteed to exist,
+ * as you don't need to handle the null case.
+ * @returns An ElementWithUtils wrapping the found element.
+ * @throws Error if the element is not found.
+ */
+export function qsr<T extends HTMLElement = HTMLElement>(
+  selector: string,
+): ElementWithUtils<T> {
+  const el = document.querySelector<T>(selector);
+  if (el === null) {
+    throw new Error(`Required element not found: ${selector}`);
+  }
+  return new ElementWithUtils(el);
+}
+
+/**
+ * Execute a callback function when the document is fully loaded.
+ * If the document is already loaded, the callback is executed immediately.
+ */
+export function onDocumentReady(callback: () => void): void {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", callback);
+  } else {
+    callback();
+  }
+}
+
+/**
+ * Creates an ElementWithUtils wrapping a newly created element.
+ * @param tagName The tag name of the element to create.
+ * @param options Optional options to set on the element.
+ * @returns An ElementWithUtils wrapping the created element.
+ */
+export function createElementWithUtils<T extends HTMLElement>(
+  tagName: string,
+  options?: {
+    classList?: string[];
+  },
+): ElementWithUtils<T> {
+  const element = document.createElement(tagName) as T;
+  if (options?.classList !== undefined) {
+    element.classList.add(...options.classList);
+  }
+  return new ElementWithUtils(element);
+}
+
+type ElementWithValue =
+  | HTMLInputElement
+  | HTMLTextAreaElement
+  | HTMLSelectElement;
+
+export class ElementWithUtils<T extends HTMLElement = HTMLElement> {
+  /**
+   * The native dom element
+   */
+  public native: T;
+
+  constructor(native: T) {
+    this.native = native;
+  }
+
+  /**
+   * Set disabled attribute to true
+   */
+  disable(): this {
+    this.native.setAttribute("disabled", "true");
+    return this;
+  }
+
+  /**
+   * Remove disabled attribute
+   */
+  enable(): this {
+    this.native.removeAttribute("disabled");
+    return this;
+  }
+
+  /**
+   * Check if the element is disabled
+   */
+  isDisabled(): boolean {
+    return this.native.hasAttribute("disabled");
+  }
+
+  /**
+   * Get attribute value
+   */
+  getAttribute(attribute: string): string | null {
+    return this.native.getAttribute(attribute);
+  }
+
+  /**
+   * Check if the element has the specified attribute
+   */
+  hasAttribute(attribute: string): boolean {
+    return this.native.hasAttribute(attribute);
+  }
+
+  /**
+   * Set attribute value
+   */
+  setAttribute(qualifiedName: string, value: string): this {
+    this.native.setAttribute(qualifiedName, value);
+    return this;
+  }
+
+  /**
+   * Remove attribute
+   */
+  removeAttribute(qualifiedName: string): this {
+    this.native.removeAttribute(qualifiedName);
+    return this;
+  }
+
+  /**
+   * Check if the input element is checked
+   */
+  isChecked(this: ElementWithUtils<HTMLInputElement>): boolean | undefined {
+    if (!(this.native instanceof HTMLInputElement)) {
+      return undefined;
+    }
+    return this.native.checked;
+  }
+
+  /**
+   * Add the "hidden" class to the element
+   */
+  hide(): this {
+    this.addClass("hidden");
+    return this;
+  }
+
+  /**
+   * Remove the "hidden" class from the element
+   */
+  show(): this {
+    this.removeClass("hidden");
+    return this;
+  }
+
+  /**
+   * Add a class to the element
+   */
+  addClass(className: string | string[]): this {
+    if (Array.isArray(className)) {
+      this.native.classList.add(...className);
+    } else {
+      this.native.classList.add(className);
+    }
+    return this;
+  }
+
+  /**
+   * Remove a class from the element
+   */
+  removeClass(className: string | string[]): this {
+    if (Array.isArray(className)) {
+      this.native.classList.remove(...className);
+    } else {
+      this.native.classList.remove(className);
+    }
+    return this;
+  }
+
+  /**
+   * Check if the element has a class
+   */
+  hasClass(className: string): boolean {
+    return this.native.classList.contains(className);
+  }
+
+  /**
+   * Toggle a class on the element
+   */
+  toggleClass(className: string): this {
+    this.native.classList.toggle(className);
+    return this;
+  }
+
+  /**
+   * Attach an event listener to the element
+   */
+  on<K extends keyof HTMLElementEventMap>(
+    event: K,
+    handler: (this: T, ev: HTMLElementEventMap[K]) => void,
+  ): this;
+  on(event: string, handler: EventListenerOrEventListenerObject): this;
+  on(
+    event: keyof HTMLElementEventMap | string,
+    handler:
+      | EventListenerOrEventListenerObject
+      | ((this: T, ev: Event) => void),
+  ): this {
+    // this type was some AI magic but if it works it works
+    this.native.addEventListener(
+      event,
+      handler as EventListenerOrEventListenerObject,
+    );
+    return this;
+  }
+
+  /**
+   * Attach an event listener to child elements matching the query.
+   * Useful for dynamically added elements.
+   */
+  onChild<K extends keyof HTMLElementEventMap>(
+    event: K,
+    query: string,
+    handler: (this: HTMLElement, ev: HTMLElementEventMap[K]) => void,
+  ): this;
+  onChild(
+    event: string,
+    query: string,
+    handler: EventListenerOrEventListenerObject,
+  ): this;
+  onChild(
+    event: keyof HTMLElementEventMap | string,
+    query: string,
+    handler:
+      | EventListenerOrEventListenerObject
+      | ((this: HTMLElement, ev: Event) => void),
+  ): this {
+    // this type was some AI magic but if it works it works
+    this.native.addEventListener(event, (e) => {
+      const target = e.target as HTMLElement;
+      if (target !== null && target.matches(query)) {
+        if (typeof handler === "function") {
+          handler.call(target, e);
+        } else {
+          handler.handleEvent(e);
+        }
+      }
+    });
+    return this;
+  }
+
+  /**
+   * Set innerHTML of the element
+   */
+  setHtml(content: string): this {
+    this.native.innerHTML = content;
+    return this;
+  }
+
+  /**
+   * Set textContent of the element
+   */
+  setText(content: string): this {
+    this.native.textContent = content;
+    return this;
+  }
+
+  /**
+   * Remove the element from the DOM
+   */
+  remove(): void {
+    if (this.native.parentNode) {
+      this.native.parentNode.removeChild(this.native);
+    }
+  }
+
+  /**
+   * Set multiple style properties on the element.
+   * Empty object clears all styles.
+   */
+  setStyle(object: Partial<CSSStyleDeclaration>): this {
+    const entries = Object.entries(object);
+    if (entries.length === 0) {
+      this.native.style.cssText = "";
+      return this;
+    }
+    for (const [key, value] of entries) {
+      if (value !== undefined) {
+        //@ts-expect-error -- Index signature issue
+        this.native.style[key] = value;
+      }
+    }
+    return this;
+  }
+
+  /**
+   * Check if the element is focused
+   */
+  isFocused(): boolean {
+    return this.native === document.activeElement;
+  }
+
+  /**
+   * Query the element for a child element matching the selector
+   */
+  qs<U extends HTMLElement>(selector: string): ElementWithUtils<U> | null {
+    const found = this.native.querySelector<U>(selector);
+    return found ? new ElementWithUtils(found) : null;
+  }
+
+  /**
+   * Query the element for all child elements matching the selector
+   */
+  qsa<U extends HTMLElement = HTMLElement>(
+    selector: string,
+  ): ElementsWithUtils<U> {
+    const elements = Array.from(this.native.querySelectorAll<U>(selector))
+      .filter((el) => el !== null)
+      .map((el) => new ElementWithUtils<U>(el));
+
+    return new ElementsWithUtils<U>(...elements);
+  }
+
+  /**
+   * Query the element for a child element matching the selector.
+   * This element must exist, otherwise an error is thrown.
+   * @throws Error if the element is not found.
+   */
+  qsr<U extends HTMLElement>(selector: string): ElementWithUtils<U> {
+    const found = this.native.querySelector<U>(selector);
+    if (found === null) {
+      throw new Error(`Required element not found: ${selector}`);
+    }
+    return new ElementWithUtils(found);
+  }
+
+  /**
+   * Empty the element's innerHTML
+   */
+  empty(): this {
+    this.native.innerHTML = "";
+    return this;
+  }
+
+  /**
+   * Append HTML string to the element's innerHTML
+   */
+  appendHtml(htmlString: string): this {
+    this.native.insertAdjacentHTML("beforeend", htmlString);
+    return this;
+  }
+
+  /**
+   * Append a child element
+   */
+  append(element: HTMLElement | ElementWithUtils): this {
+    if (element instanceof ElementWithUtils) {
+      this.native.appendChild(element.native);
+    } else {
+      this.native.append(element);
+    }
+    return this;
+  }
+
+  /**
+   * Prepend HTML string to the element's innerHTML
+   */
+  prependHtml(htmlString: string): this {
+    this.native.insertAdjacentHTML("afterbegin", htmlString);
+    return this;
+  }
+
+  /**
+   * Dispatch an event on the element
+   */
+  dispatch(event: keyof HTMLElementEventMap, eventInitDict?: EventInit): this {
+    this.native.dispatchEvent(new Event(event, eventInitDict));
+    return this;
+  }
+
+  /**
+   * Get the element's bounding client rect offset
+   */
+  offset(): { top: number; left: number } {
+    const rect = this.native.getBoundingClientRect();
+    const scrollLeft =
+      window.pageXOffset || document.documentElement.scrollLeft;
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    return { top: rect.top + scrollTop, left: rect.left + scrollLeft };
+  }
+
+  /**
+   * Wrap the element with the provided HTML string
+   */
+  wrapWith(htmlString: string): ElementWithUtils<T> {
+    const wrapper = document.createElement("div");
+    wrapper.innerHTML = htmlString;
+    const wrapperElement = wrapper.firstElementChild;
+    if (wrapperElement === null) {
+      throw new Error("Invalid HTML string provided to wrapWith.");
+    }
+
+    this.native.parentNode?.insertBefore(wrapperElement, this.native);
+    wrapperElement.appendChild(this.native);
+    return new ElementWithUtils(wrapperElement as T);
+  }
+
+  /**
+   * Set value of input or textarea to a string.
+   */
+  setValue(this: ElementWithUtils<ElementWithValue>, value: string): this {
+    if (this.native instanceof HTMLInputElement) {
+      this.native.value = value;
+    }
+    return this as unknown as this;
+  }
+
+  /**
+   * Get value of input or textarea
+   * @returns The value of the element, or undefined if the element is not an input or textarea.
+   */
+  getValue(this: ElementWithUtils<ElementWithValue>): string | undefined {
+    if (!(this.native instanceof HTMLInputElement)) {
+      return undefined;
+    }
+    return this.native.value;
+  }
+
+  /**
+   * Get the parent element
+   */
+  getParent<U extends HTMLElement = HTMLElement>(): ElementWithUtils<U> | null {
+    if (this.native.parentElement) {
+      return new ElementWithUtils(this.native.parentElement as U);
+    }
+    return null;
+  }
+
+  /**
+   * Replace this element with another element
+   */
+  replaceWith(element: HTMLElement | ElementWithUtils): this {
+    if (element instanceof ElementWithUtils) {
+      this.native.replaceWith(element.native);
+    } else {
+      this.native.replaceWith(element);
+    }
+    return this;
+  }
+}
+
+/**
+ * An array of ElementWithUtils with utility methods that operate on all elements in the array.
+ */
+export class ElementsWithUtils<
+  T extends HTMLElement = HTMLElement,
+> extends Array<ElementWithUtils<T>> {
+  /**
+   * Array of native DOM elements
+   */
+  public native: T[];
+
+  constructor(...items: ElementWithUtils<T>[]) {
+    super(...items);
+    this.native = items.map((item) => item.native);
+  }
+
+  /**
+   * Remove all elements in the array from the DOM
+   */
+  remove(): void {
+    for (const item of this) {
+      item.remove();
+    }
+  }
+
+  /**
+   * Remove a class from all elements in the array
+   */
+  removeClass(className: string | string[]): this {
+    for (const item of this) {
+      item.removeClass(className);
+    }
+    return this;
+  }
+
+  /**
+   * Add a class to all elements in the array
+   */
+  addClass(className: string | string[]): this {
+    for (const item of this) {
+      item.addClass(className);
+    }
+    return this;
+  }
+
+  /**
+   * Set innerHTML of all elements in the array
+   */
+  setHtml(htmlString: string): this {
+    for (const item of this) {
+      item.setHtml(htmlString);
+    }
+    return this;
+  }
+
+  /**
+   * Set the disabled attribute on all elements in the array
+   */
+  disable(): this {
+    for (const item of this) {
+      item.disable();
+    }
+    return this;
+  }
+
+  /**
+   * Remove the disabled attribute from all elements in the array
+   */
+  enable(): this {
+    for (const item of this) {
+      item.enable();
+    }
+    return this;
+  }
+
+  /**
+   * Add the "hidden" class to all elements in the array
+   */
+  hide(): this {
+    for (const item of this) {
+      item.hide();
+    }
+    return this;
+  }
+
+  /**
+   * Remove the "hidden" class from all elements in the array
+   */
+  show(): this {
+    for (const item of this) {
+      item.show();
+    }
+    return this;
+  }
+
+  /**
+   * Set multiple style properties on all elements in the array.
+   * An empty object clears all styles.
+   */
+  setStyle(object: Partial<CSSStyleDeclaration>): this {
+    for (const item of this) {
+      item.setStyle(object);
+    }
+    return this;
+  }
+
+  /**
+   * Attach an event listener to all elements in the array
+   */
+  on<K extends keyof HTMLElementEventMap>(
+    event: K,
+    handler: (this: T, ev: HTMLElementEventMap[K]) => void,
+  ): this;
+  on(event: string, handler: EventListenerOrEventListenerObject): this;
+  on(
+    event: keyof HTMLElementEventMap | string,
+    handler:
+      | EventListenerOrEventListenerObject
+      | ((this: T, ev: Event) => void),
+  ): this {
+    for (const item of this) {
+      item.on(event, handler);
+    }
+    return this;
+  }
+
+  /**
+   * Set attribute value on all elements in the array
+   */
+  setAttribute(key: string, value: string): this {
+    for (const item of this) {
+      item.setAttribute(key, value);
+    }
+    return this;
+  }
+}
diff --git a/frontend/src/ts/utils/simple-modal.ts b/frontend/src/ts/utils/simple-modal.ts
index ae0d19154cee..361ea5156c01 100644
--- a/frontend/src/ts/utils/simple-modal.ts
+++ b/frontend/src/ts/utils/simple-modal.ts
@@ -11,6 +11,7 @@ import {
   ValidationOptions,
   ValidationResult,
 } from "../elements/input-validation";
+import { qsr } from "./dom";
 
 type CommonInput<TType, TValue> = {
   type: TType;
@@ -318,22 +319,20 @@ export class SimpleModal {
         }
         inputs.append(buildTag({ tagname, classes, attributes }));
       }
-      const element = document.querySelector(
-        "#" + attributes["id"],
-      ) as HTMLInputElement;
+      const element = qsr<HTMLInputElement>("#" + attributes["id"]);
 
-      const originalOnInput = element.oninput;
-      element.oninput = (e) => {
-        if (originalOnInput) originalOnInput.call(element, e);
+      const originalOnInput = element.native.oninput;
+      element.native.oninput = (e) => {
+        if (originalOnInput) originalOnInput.call(element.native, e);
         input.oninput?.(e);
         this.updateSubmitButtonState();
       };
 
       input.currentValue = () => {
-        if (element.type === "checkbox") {
-          return element.checked ? "true" : "false";
+        if (element.native.type === "checkbox") {
+          return element.native.checked ? "true" : "false";
         }
-        return element.value;
+        return element.native.value;
       };
 
       if (input.validation !== undefined) {
diff --git a/frontend/static/layouts/colemak_angle.json b/frontend/static/layouts/colemak_angle.json
new file mode 100644
index 000000000000..b01d4638943c
--- /dev/null
+++ b/frontend/static/layouts/colemak_angle.json
@@ -0,0 +1,62 @@
+{
+  "keymapShowTopRow": false,
+  "type": "ansi",
+  "keys": {
+    "row1": [
+      ["`", "~"],
+      ["1", "!"],
+      ["2", "@"],
+      ["3", "#"],
+      ["4", "$"],
+      ["5", "%"],
+      ["6", "^"],
+      ["7", "&"],
+      ["8", "*"],
+      ["9", "("],
+      ["0", ")"],
+      ["-", "_"],
+      ["=", "+"]
+    ],
+    "row2": [
+      ["q", "Q"],
+      ["w", "W"],
+      ["f", "F"],
+      ["p", "P"],
+      ["g", "G"],
+      ["j", "J"],
+      ["l", "L"],
+      ["u", "U"],
+      ["y", "Y"],
+      [";", ":"],
+      ["[", "{"],
+      ["]", "}"],
+      ["\\", "|"]
+    ],
+    "row3": [
+      ["a", "A"],
+      ["r", "R"],
+      ["s", "S"],
+      ["t", "T"],
+      ["d", "D"],
+      ["h", "H"],
+      ["n", "N"],
+      ["e", "E"],
+      ["i", "I"],
+      ["o", "O"],
+      ["'", "\""]
+    ],
+    "row4": [
+      ["x", "X"],
+      ["c", "C"],
+      ["v", "V"],
+      ["b", "B"],
+      ["z", "Z"],
+      ["k", "K"],
+      ["m", "M"],
+      [",", "<"],
+      [".", ">"],
+      ["/", "?"]
+    ],
+    "row5": [[" "]]
+  }
+}
diff --git a/frontend/static/quotes/english.json b/frontend/static/quotes/english.json
index dc1c8a50c0e8..a3c8192e8975 100644
--- a/frontend/static/quotes/english.json
+++ b/frontend/static/quotes/english.json
@@ -39087,6 +39087,24 @@
       "source": "Undertale",
       "id": 7727,
       "length": 103
+    },
+    {
+      "text": "Everything should be made as simple as possible, but not simpler.",
+      "source": "Albert Einstein",
+      "id": 7728,
+      "length": 65
+    },
+    {
+      "text": "Do you see him? Do you see the story? Do you see anything? It seems I am trying to tell you a dream-making a vain attempt, because no relation of a dream can convey the dream-sensation, that commingling of absurdity, surprise, and bewilderment in a tremor of struggling revolt, that notion of being captured by the incredible which is the very essence of dreams.",
+      "source": "Heart of Darkness",
+      "id": 7729,
+      "length": 362
+    },
+    {
+      "text": "You can’t ever reach perfection, but you can believe in an asymptote toward which you are ceaselessly striving.",
+      "source": "When Breath Becomes Air",
+      "id": 7730,
+      "length": 111
     }
   ]
 }
diff --git a/frontend/static/quotes/filipino.json b/frontend/static/quotes/filipino.json
index 6ceda1ff0ef7..24f329b99f93 100644
--- a/frontend/static/quotes/filipino.json
+++ b/frontend/static/quotes/filipino.json
@@ -222,6 +222,60 @@
       "source": "Si, Bob Ong",
       "length": 445,
       "id": 36
+    },
+    {
+      "text": "Mamamatay akong hindi man lang nakikita ang maningning na pagbubukang-liwayway sa aking Inang Bayan! Kayong makakakita, batiin ninyo siya at huwag kalilimutan ang mga nalugmok sa dilim ng gabi.",
+      "source": "Noli Me Tangere, Jose Rizal",
+      "length": 193,
+      "id": 37
+    },
+    {
+      "text": "Hikayatin mo lahat ng kakilala mo na magkaroon ng kahit isa man lang paboritong libro sa buhay nila. Dahil wala nang mas kawawa pa sa mga taong literado pero hindi nagbabasa.",
+      "source": "Stainless Longganisa, Bob Ong",
+      "length": 174,
+      "id": 38
+    },
+    {
+      "text": "Me quota ang pag-ibig. Sa bawat limang umiibig, isa lang ang magiging maligaya. Ang iba, iibig sa di sila iniibig. Iibig nang di natututo. O iibig sa wala. O di iibig kailanman.",
+      "source": "Para Kay B, Ricky Lee",
+      "length": 177,
+      "id": 39
+    },
+    {
+      "text": "O pagsintang labis na makapangyarihan, sampung mag-aama'y iyong nasasaklaw! 'Pag ikaw ang nasok sa puso ninuman, hahamaking lahat masunod ka lamang!",
+      "source": "Florante at Laura, Francisco Balagtas",
+      "length": 148,
+      "id": 40
+    },
+    {
+      "text": "Tama na sa akin 'yung maligaya ako paminsan-minsan. Para kapag malungkot ako, masasabi ko sa sarili ko: Minsan naman, maligaya rin ako.",
+      "source": "Bata, Bata... Pa'no Ka Ginawa?, Lualhati Bautista",
+      "length": 135,
+      "id": 41
+    },
+    {
+      "text": "Dalawang dekada ka lang mag-aaral. Kung di mo pagtitiyagaan, anak, limang dekada ng kahirapan ang kapalit. Sobrang lugi. Kung alam lang iyon ng mga kabataan, sa pananaw ko e walang gugustuhing umiwas sa eskwela.",
+      "source": "Stainless Longganisa, Bob Ong",
+      "length": 211,
+      "id": 42
+    },
+    {
+      "text": "Ang poot ay walang nililikha kundi mga dambuhala, mga kasamaan, mga salarin. Tanging ang tunay na pag-ibig lamang ang nakakalikha ng mga bagay na tunay na kahanga-hanga.",
+      "source": "El Filibusterismo, Jose Rizal",
+      "length": 169,
+      "id": 43
+    },
+    {
+      "text": "Ang hindi marunong lumingon sa pinanggalingan ay hindi makararating sa paroroonan.",
+      "source": "Salawikain",
+      "length": 82,
+      "id": 44
+    },
+    {
+      "text": "Aling pag-ibig pa ang hihigit kaya sa pagkadalisay at pagkadakila gaya ng pag-ibig sa tinubuang lupa? Aling pag-ibig pa? Wala na nga, wala.",
+      "source": "Pag-ibig sa Tinubuang Lupa, Andres Bonifacio",
+      "length": 139,
+      "id": 45
     }
   ]
 }
diff --git a/packages/schemas/src/layouts.ts b/packages/schemas/src/layouts.ts
index 7c29b79416e8..f55d5f6abc1e 100644
--- a/packages/schemas/src/layouts.ts
+++ b/packages/schemas/src/layouts.ts
@@ -6,6 +6,7 @@ export const LayoutNameSchema = z.enum(
     "qwerty",
     "dvorak",
     "colemak",
+    "colemak_angle",
     "colemak_wide",
     "colemak_dh",
     "colemak_dh_iso",