From 5d3bcb7ca28b94ab52dfeeb8c79fa0520bff2737 Mon Sep 17 00:00:00 2001
From: Leonabcd123 <156839416+Leonabcd123@users.noreply.github.com>
Date: Wed, 10 Dec 2025 20:46:36 +0200
Subject: [PATCH 01/15] fix(composition-display): Add compositionDisplay
 SettingsGroup (@Leonabcd123) (#7211)

### Description

Add compositionDisplay SettingsGroup to allow users to select the value
they want for the compositionDisplay setting.
---
 frontend/src/ts/config.ts         | 7 +++++++
 frontend/src/ts/pages/settings.ts | 5 +++++
 2 files changed, 12 insertions(+)

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/pages/settings.ts b/frontend/src/ts/pages/settings.ts
index 0c60509f463e..558d059a3843 100644
--- a/frontend/src/ts/pages/settings.ts
+++ b/frontend/src/ts/pages/settings.ts
@@ -204,6 +204,11 @@ async function initGroups(): Promise<void> {
     UpdateConfig.setIndicateTypos,
     "button",
   );
+  groups["compositionDisplay"] = new SettingsGroup(
+    "compositionDisplay",
+    UpdateConfig.setCompositionDisplay,
+    "button",
+  );
   groups["hideExtraLetters"] = new SettingsGroup(
     "hideExtraLetters",
     UpdateConfig.setHideExtraLetters,

From 6d8ef91155a4b62bda70238ee85636c3beccc54e Mon Sep 17 00:00:00 2001
From: Leonabcd123 <156839416+Leonabcd123@users.noreply.github.com>
Date: Wed, 10 Dec 2025 21:00:38 +0200
Subject: [PATCH 02/15] fix(custom-text): Don't trim custom text (@Leonabcd123)
 (#7170)

### Description

Removed the `.trim()` call that deleted leading and trailing literal
tabs or newlines from custom text.

This is to make sure that no matter what the custom text is, it will
always stay the same after updating it. The current problem is that
leading and trailing tabs and newlines will be removed when you click on
"change" and "ok" for the second time (because they're now in their
literal form, not \t and \n).
---
 frontend/src/ts/modals/custom-text.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

From de4e8729969e7d139b7faeeb6e136fa68d82f4a3 Mon Sep 17 00:00:00 2001
From: Leonabcd123 <156839416+Leonabcd123@users.noreply.github.com>
Date: Wed, 10 Dec 2025 21:09:30 +0200
Subject: [PATCH 03/15] fix(lazy-mode): Save lazy mode in local storage after
 getting not supported message (@Leonabcd123) (#7171)

### Description

Save lazy mode status in local storage after getting the "This language
does not support lazy mode" message. This is so the user doesn't get the
same message every time they refresh, and it matches up with the
settings that show that lazy mode is disabled even though it's enabled
in local storage.
---
 frontend/src/ts/test/test-logic.ts | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/ts/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts
index 7e18d352716e..824b86d48e23 100644
--- a/frontend/src/ts/test/test-logic.ts
+++ b/frontend/src/ts/test/test-logic.ts
@@ -400,6 +400,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 +495,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 +503,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 +1630,10 @@ ConfigEvent.subscribe((eventKey, eventValue, nosave) => {
       ArabicLazyMode.set(eventValue as boolean);
     }
     if (eventValue === false) {
-      rememberLazyMode = false;
+      if (!showedLazyModeNotification) {
+        rememberLazyMode = false;
+      }
+      showedLazyModeNotification = false;
     }
   }
 });

From 204fffebe86e0481d0a785dd1eb567ecfd8de5a3 Mon Sep 17 00:00:00 2001
From: JuniorKlump <jr.klump@proton.me>
Date: Thu, 11 Dec 2025 00:40:11 +0530
Subject: [PATCH 04/15] impr(quotes): add English quotes (@JuniorKlumpy)
 (#7180)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### Description

Added two new quotes as follows:

>Everything should be made as simple as possible, but not simpler.
– Albert Einstein

>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.
– Heart of Darkness
---
 frontend/static/quotes/english.json | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/frontend/static/quotes/english.json b/frontend/static/quotes/english.json
index dc1c8a50c0e8..784992e05f92 100644
--- a/frontend/static/quotes/english.json
+++ b/frontend/static/quotes/english.json
@@ -39087,6 +39087,18 @@
       "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
     }
   ]
 }

From 1dd0ca70ec590329e3964df45e0c3df0d55576d4 Mon Sep 17 00:00:00 2001
From: Jack <jack@monkeytype.com>
Date: Wed, 10 Dec 2025 20:34:37 +0100
Subject: [PATCH 05/15] refactor: begin transition away from jquery (@miodec,
 @fehmer) (#7185)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Christian Fehmer <cfe@sexy-developer.com>
Co-authored-by: Gian Peña <36643266+gianpena@users.noreply.github.com>
Co-authored-by: Leonabcd123 <156839416+Leonabcd123@users.noreply.github.com>
---
 .github/pull_request_template.md              |   2 +
 docs/CONTRIBUTING_ADVANCED.md                 |   2 +
 frontend/__tests__/setup-tests.ts             |  44 +-
 frontend/src/index.html                       |   2 +-
 frontend/src/styles/notifications.scss        |   1 +
 frontend/src/ts/auth.ts                       |  40 +-
 frontend/src/ts/commandline/commandline.ts    |   5 +-
 frontend/src/ts/controllers/ad-controller.ts  |  67 +-
 .../ts/controllers/analytics-controller.ts    |   3 +-
 .../ts/controllers/challenge-controller.ts    |  13 +-
 .../src/ts/controllers/chart-controller.ts    |   5 +-
 .../src/ts/controllers/eg-ad-controller.ts    |   8 +-
 .../src/ts/controllers/page-controller.ts     |   3 +-
 .../src/ts/controllers/sound-controller.ts    |   2 +-
 .../src/ts/controllers/theme-controller.ts    |  72 +--
 frontend/src/ts/elements/account-button.ts    |  55 +-
 frontend/src/ts/elements/alerts.ts            | 159 +++--
 frontend/src/ts/elements/character-counter.ts |  45 +-
 .../ts/elements/custom-background-filter.ts   | 134 ++--
 frontend/src/ts/elements/input-indicator.ts   |  34 +-
 frontend/src/ts/elements/input-validation.ts  |  62 +-
 frontend/src/ts/elements/keymap.ts            |  66 +-
 frontend/src/ts/elements/loader.ts            |   7 +-
 frontend/src/ts/elements/modes-notice.ts      |  61 +-
 frontend/src/ts/elements/monkey-power.ts      |  30 +-
 frontend/src/ts/elements/no-css.ts            |   9 +-
 frontend/src/ts/elements/notifications.ts     | 112 ++--
 .../ts/elements/settings/fps-limit-section.ts |  23 +-
 .../ts/elements/settings/settings-group.ts    |  41 +-
 frontend/src/ts/index.ts                      |   4 +
 frontend/src/ts/modals/edit-preset.ts         |  13 +-
 frontend/src/ts/modals/edit-profile.ts        |  56 +-
 frontend/src/ts/modals/google-sign-up.ts      |   9 +-
 frontend/src/ts/modals/quote-report.ts        |   3 +-
 frontend/src/ts/modals/quote-submit.ts        |   3 +-
 frontend/src/ts/modals/save-custom-text.ts    |   3 +-
 frontend/src/ts/modals/user-report.ts         |   3 +-
 frontend/src/ts/pages/login.ts                |  29 +-
 frontend/src/ts/pages/profile-search.ts       |   5 +-
 frontend/src/ts/pages/settings.ts             |  19 +-
 frontend/src/ts/ready.ts                      |  15 +-
 frontend/src/ts/ui.ts                         |  18 +-
 frontend/src/ts/utils/dom.ts                  | 604 ++++++++++++++++++
 frontend/src/ts/utils/simple-modal.ts         |  17 +-
 44 files changed, 1309 insertions(+), 599 deletions(-)
 create mode 100644 frontend/src/ts/utils/dom.ts

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/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/sound-controller.ts b/frontend/src/ts/controllers/sound-controller.ts
index 007774b11b38..288bc39c4bd1 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";
 });
 
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..f1279028ddeb 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,16 @@ const stenoKeys: LayoutObject = {
   },
 };
 
-function findKeyElements(char: string): JQuery {
+function findKeyElements(char: string): ElementsWithUtils {
   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 {
@@ -97,9 +99,7 @@ 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();
+    const elements = findKeyElements(key);
     if (elements.length === 0) return;
 
     const themecolors = await ThemeColors.getAll();
@@ -125,7 +125,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 +137,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 +459,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 +593,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 +606,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 +671,7 @@ KeymapEvent.subscribe((mode, key, correct) => {
   }
 });
 
-$(document).on("keydown", (e) => {
+document.addEventListener("keydown", (e) => {
   if (
     Config.keymapLegendStyle === "dynamic" &&
     (e.code === "ShiftLeft" ||
@@ -679,7 +683,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/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/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..cf8ef2167423 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(
diff --git a/frontend/src/ts/pages/settings.ts b/frontend/src/ts/pages/settings.ts
index 558d059a3843..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;
 
@@ -648,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,
@@ -662,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,
@@ -673,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,
@@ -687,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,
@@ -698,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/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) {

From 3482242660c25a028967fdfb9e59d6e84e26542c Mon Sep 17 00:00:00 2001
From: Leonabcd123 <156839416+Leonabcd123@users.noreply.github.com>
Date: Wed, 10 Dec 2025 21:45:48 +0200
Subject: [PATCH 06/15] fix(indicate typos): Replace tabs with _ when indicate
 typos is replace or both (@Leonabcd123) (#7191)

### Description

When indicate typos is set to replace or to both, make sure to have tabs
replaced with _.

Current behavior is that the literal tab character replaces the char,
making it disappear.
---
 frontend/src/ts/test/test-ui.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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) +

From d1011bd1f53917ae9d9a513a90d4c84d0ba68136 Mon Sep 17 00:00:00 2001
From: MythicalWillbur <Williamlin0199+GITHUB@gmail.com>
Date: Wed, 10 Dec 2025 13:53:20 -0600
Subject: [PATCH 07/15] impr(quotes): add English quote (@MythicalWillbur)
 (#7192)

### Description

<!-- Please describe the change(s) made in your PR -->

Added a quote in English from When Breath Becomes Air as I like the
book.

<!-- pro tip: you can press . (dot or period) in the code tab of any
GitHub repo to get access to GitHub's VS Code web editor Enjoy! :) -->

---------

Co-authored-by: Miodec <jack@monkeytype.com>
---
 frontend/static/quotes/english.json | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/frontend/static/quotes/english.json b/frontend/static/quotes/english.json
index 784992e05f92..a3c8192e8975 100644
--- a/frontend/static/quotes/english.json
+++ b/frontend/static/quotes/english.json
@@ -39099,6 +39099,12 @@
       "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
     }
   ]
 }

From 64a0bdc3e2e58af285053997be7a6206e1a9cb30 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <fehmer@users.noreply.github.com>
Date: Wed, 10 Dec 2025 21:13:27 +0100
Subject: [PATCH 08/15] fix: caps-lock warning stuck on linux (@fehmer) (#7195)

Just pressing caps-lock on linux (firefox, chrome) activates the
caps-lock warning but does not clear the caps-lock warning until
pressing another key.
---
 frontend/src/ts/test/caps-warning.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

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 {

From 8932661676b385982a9e9ee7abd1e57b1b71b23c Mon Sep 17 00:00:00 2001
From: Leonabcd123 <156839416+Leonabcd123@users.noreply.github.com>
Date: Wed, 10 Dec 2025 22:20:17 +0200
Subject: [PATCH 09/15] fix(sounds): Clear all sounds on test finish
 (@Leonabcd123) (#7196)

### Description

Use `Howler.stop()` to stop all sounds after finishing a test.

Closes #7194
---
 frontend/src/ts/controllers/sound-controller.ts | 5 +++++
 frontend/src/ts/test/test-logic.ts              | 2 ++
 2 files changed, 7 insertions(+)

diff --git a/frontend/src/ts/controllers/sound-controller.ts b/frontend/src/ts/controllers/sound-controller.ts
index 288bc39c4bd1..c1dd3547dda0 100644
--- a/frontend/src/ts/controllers/sound-controller.ts
+++ b/frontend/src/ts/controllers/sound-controller.ts
@@ -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/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts
index 824b86d48e23..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") {

From fa3bac35ede89b140107456e1c190533c6b82983 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 10 Dec 2025 22:38:20 +0100
Subject: [PATCH 10/15] refactor: move navigate options to the navigation event

also update the event params
---
 .../src/ts/controllers/route-controller.ts    | 21 +++++++------------
 .../src/ts/observables/navigation-event.ts    | 15 ++++++++-----
 frontend/src/ts/pages/profile-search.ts       |  3 +--
 3 files changed, 18 insertions(+), 21 deletions(-)

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/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/profile-search.ts b/frontend/src/ts/pages/profile-search.ts
index cf8ef2167423..684bf7a8bea8 100644
--- a/frontend/src/ts/pages/profile-search.ts
+++ b/frontend/src/ts/pages/profile-search.ts
@@ -64,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,
   });
 });

From 38cc8e12da9934bc49b32352adf455deefae8ccb Mon Sep 17 00:00:00 2001
From: ALAMO276 <alexmoberly@icloud.com>
Date: Wed, 10 Dec 2025 15:51:46 -0600
Subject: [PATCH 11/15] feat(layout): add colemak_angle layout (@ALAMO276)
 (#7200)

### Description

I added the Colemak with the angle mod

### Checks

- [ ] 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?
- Make sure to follow the [languages
documentation](https://github.com/monkeytypegame/monkeytype/blob/master/docs/LANGUAGES.md)
  - [ ] Add language to `packages/schemas/src/languages.ts`
- [ ] Add language to exactly one group in
`frontend/src/ts/constants/languages.ts`
  - [ ] Add language json file to `frontend/static/languages`
- [ ] Adding a theme?
- Make sure to follow the [themes
documentation](https://github.com/monkeytypegame/monkeytype/blob/master/docs/THEMES.md)
  - [ ] Add theme to `packages/schemas/src/themes.ts`
  - [ ] Add theme to `frontend/src/ts/constants/themes.ts`
  - [ ] Add theme css file to `frontend/static/themes`
- [ ] Add some screenshot of the theme, especially with different test
settings (colorful, flip colors) to your pull request
- [x] Adding a layout?
- [x] Make sure to follow the [layouts
documentation](https://github.com/monkeytypegame/monkeytype/blob/master/docs/LAYOUTS.md)
  - [x] Add layout to `packages/schemas/src/layouts.ts`
  - [x] Add layout json file to `frontend/static/layouts`
- [ ] Adding a font?
- Make sure to follow the [themes
documentation](https://github.com/monkeytypegame/monkeytype/blob/master/docs/FONTS.md)
  - [ ] Add font file  to `frontend/static/webfonts`
  - [ ] Add font to `packages/schemas/src/fonts.ts`
  - [ ] Add font to `frontend/src/ts/constants/fonts.ts`
- [ ] Check if any open issues are related to this PR; if so, be sure to
tag them below.
- [ ] Make sure the PR title follows the Conventional Commits standard.
(https://www.conventionalcommits.org for more info)
- [ ] Make sure to include your GitHub username prefixed with @ inside
parentheses at the end of the PR title.

<!-- label(optional scope): pull request title (@your_github_username)
-->

<!-- I know I know they seem boring but please do them, they help us and
you will find out it also helps you.-->

Closes #

<!-- the issue(s) your PR resolves if any (delete if that is not the
case) -->
<!-- please also reference any issues and or PRs related to your pull
request -->
<!-- Also remove it if you are not following any issues. -->

<!-- pro tip: you can mention an issue, PR, or discussion on GitHub by
referencing its hash number e.g:
[#1234](https://github.com/monkeytypegame/monkeytype/pull/1234) -->

<!-- pro tip: you can press . (dot or period) in the code tab of any
GitHub repo to get access to GitHub's VS Code web editor Enjoy! :) -->
---
 frontend/static/layouts/colemak_angle.json | 62 ++++++++++++++++++++++
 packages/schemas/src/layouts.ts            |  1 +
 2 files changed, 63 insertions(+)
 create mode 100644 frontend/static/layouts/colemak_angle.json

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/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",

From 3d902bb15f826a484dc3db08bc19eb12f2c65319 Mon Sep 17 00:00:00 2001
From: Leonabcd123 <156839416+Leonabcd123@users.noreply.github.com>
Date: Wed, 10 Dec 2025 23:53:19 +0200
Subject: [PATCH 12/15] fix(british-english): Apply british english after
 punctuation (@Leonabcd123) (#7202)

### Description

Apply british english after punctuation so that double quotes will be
correctly converted to single quotes.

Closes #7201
---
 frontend/src/ts/test/words-generator.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

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);

From 9309c0c5ff071e84733137570978c094363ee9ce Mon Sep 17 00:00:00 2001
From: Jierie Ezequiel Jacla <jierie0216@gmail.com>
Date: Thu, 11 Dec 2025 05:54:20 +0800
Subject: [PATCH 13/15] impr(quotes): add filipino quotes from literature
 (@AintJierie) (#7207)

### Description

<!-- Please describe the change(s) made in your PR -->

### Checks

- [x] Adding quotes?
- [x] Make sure to include translations for the quotes in the
description (or another comment) so we can verify their content.
- [ ] Adding a language?
- Make sure to follow the [languages
documentation](https://github.com/monkeytypegame/monkeytype/blob/master/docs/LANGUAGES.md)
  - [ ] Add language to `packages/schemas/src/languages.ts`
- [ ] Add language to exactly one group in
`frontend/src/ts/constants/languages.ts`
  - [ ] Add language json file to `frontend/static/languages`
- [ ] Adding a theme?
- Make sure to follow the [themes
documentation](https://github.com/monkeytypegame/monkeytype/blob/master/docs/THEMES.md)
  - [ ] Add theme to `packages/schemas/src/themes.ts`
  - [ ] Add theme to `frontend/src/ts/constants/themes.ts`
  - [ ] Add theme css file to `frontend/static/themes`
- [ ] Add some screenshot of the theme, especially with different test
settings (colorful, flip colors) to your pull request
- [ ] Adding a layout?
- [ ] Make sure to follow the [layouts
documentation](https://github.com/monkeytypegame/monkeytype/blob/master/docs/LAYOUTS.md)
  - [ ] Add layout to `packages/schemas/src/layouts.ts`
  - [ ] Add layout json file to `frontend/static/layouts`
- [ ] Adding a font?
- Make sure to follow the [themes
documentation](https://github.com/monkeytypegame/monkeytype/blob/master/docs/FONTS.md)
  - [ ] Add font file  to `frontend/static/webfonts`
  - [ ] Add font to `packages/schemas/src/fonts.ts`
  - [ ] Add font to `frontend/src/ts/constants/fonts.ts`
- [ ] Check if any open issues are related to this PR; if so, be sure to
tag them below.
- [ ] Make sure the PR title follows the Conventional Commits standard.
(https://www.conventionalcommits.org for more info)
- [ ] Make sure to include your GitHub username prefixed with @ inside
parentheses at the end of the PR title.

<!-- label(optional scope): pull request title (@your_github_username)
-->

<!-- I know I know they seem boring but please do them, they help us and
you will find out it also helps you.-->

Closes #

<!-- the issue(s) your PR resolves if any (delete if that is not the
case) -->
<!-- please also reference any issues and or PRs related to your pull
request -->
<!-- Also remove it if you are not following any issues. -->

<!-- pro tip: you can mention an issue, PR, or discussion on GitHub by
referencing its hash number e.g:
[#1234](https://github.com/monkeytypegame/monkeytype/pull/1234) -->

<!-- pro tip: you can press . (dot or period) in the code tab of any
GitHub repo to get access to GitHub's VS Code web editor Enjoy! :) -->
---
 frontend/static/quotes/filipino.json | 54 ++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)

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
     }
   ]
 }

From f6421e721584f989daf21978313a72cc3625d3cf Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 10 Dec 2025 23:11:53 +0100
Subject: [PATCH 14/15] fix: uncaught throw when trying to find newline key
 element

---
 frontend/src/ts/elements/keymap.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/ts/elements/keymap.ts b/frontend/src/ts/elements/keymap.ts
index f1279028ddeb..555bcbfdcd6f 100644
--- a/frontend/src/ts/elements/keymap.ts
+++ b/frontend/src/ts/elements/keymap.ts
@@ -61,7 +61,9 @@ const stenoKeys: LayoutObject = {
   },
 };
 
-function findKeyElements(char: string): ElementsWithUtils {
+function findKeyElements(char: string): ElementsWithUtils | null {
+  if (char === "\n") return null;
+
   if (char === " ") {
     return keymap.qsa(".keySpace");
   }
@@ -87,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) {
@@ -100,7 +104,7 @@ async function flashKey(key: string, correct?: boolean): Promise<void> {
   if (key === undefined) return;
   requestDebouncedAnimationFrame(`keymap.flashKey.${key}`, async () => {
     const elements = findKeyElements(key);
-    if (elements.length === 0) return;
+    if (elements === null || elements.length === 0) return;
 
     const themecolors = await ThemeColors.getAll();
 

From 872027c16034f4053a0d0b2f83b2be5c57e102bf Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 10 Dec 2025 23:14:21 +0100
Subject: [PATCH 15/15] impr: ignore enter key when trying to bail out via
 shift+enter

---
 frontend/src/ts/input/handlers/keydown.ts | 1 +
 1 file changed, 1 insertion(+)

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);