From a6fd38909088c4ae51d36e42360d088a5a620954 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 21 Jan 2026 12:04:31 +0100
Subject: [PATCH 01/15] refactor: remove jquery from result-filters

---
 frontend/src/html/pages/account.html          |   2 +-
 .../src/ts/elements/account/result-filters.ts | 161 ++++++++++--------
 frontend/src/ts/utils/dom.ts                  |  26 +++
 3 files changed, 117 insertions(+), 72 deletions(-)

diff --git a/frontend/src/html/pages/account.html b/frontend/src/html/pages/account.html
index 77bb5a5ea236..1bf16ae4c580 100644
--- a/frontend/src/html/pages/account.html
+++ b/frontend/src/html/pages/account.html
@@ -374,7 +374,7 @@
         </div>
       </div>
     </div>
-    <div class="group filterButtons" style="display: none">
+    <div class="group filterButtons hidden">
       <div class="buttonsAndTitle" style="grid-column: 1/-1">
         <div class="title">
           <i class="fas fa-tools"></i>
diff --git a/frontend/src/ts/elements/account/result-filters.ts b/frontend/src/ts/elements/account/result-filters.ts
index 8330eec32390..fffecacb1e48 100644
--- a/frontend/src/ts/elements/account/result-filters.ts
+++ b/frontend/src/ts/elements/account/result-filters.ts
@@ -20,6 +20,7 @@ import { Snapshot } from "../../constants/default-snapshot";
 import { LanguageList } from "../../constants/languages";
 import * as AuthEvent from "../../observables/auth-event";
 import { sanitize } from "../../utils/sanitize";
+import { qs, qsa } from "../../utils/dom";
 
 export function mergeWithDefaultFilters(
   filters: Partial<ResultFilters>,
@@ -159,12 +160,12 @@ export async function setFilterPreset(id: string): Promise<void> {
   }
 
   // make all filter preset butons inactive
-  $(
+  qsa(
     `.pageAccount .group.presetFilterButtons .filterBtns .filterPresets .select-filter-preset`,
   ).removeClass("active");
 
   // make current filter presest button active
-  $(
+  qsa(
     `.pageAccount .group.presetFilterButtons .filterBtns .filterPresets .select-filter-preset[data-id=${id}]`,
   ).addClass("active");
 }
@@ -233,7 +234,7 @@ async function deleteFilterPreset(id: string): Promise<void> {
 
 function deSelectFilterPreset(): void {
   // make all filter preset buttons inactive
-  $(
+  qsa(
     ".pageAccount .group.presetFilterButtons .filterBtns .filterPresets .select-filter-preset",
   ).removeClass("active");
 }
@@ -323,29 +324,29 @@ export function updateActive(): void {
       }
 
       if (groupsUsingSelect.has(group)) {
-        const option = $(
+        const option = qs<HTMLOptionElement>(
           `.pageAccount .group.filterButtons .filterGroup[group="${group}"] option[value="${filter}"]`,
         );
         if (filterValue === true) {
-          option.prop("selected", true);
+          option?.setSelected(true);
         } else {
-          option.prop("selected", false);
+          option?.setSelected(false);
         }
       } else {
         let buttonEl;
         if (group === "date") {
-          buttonEl = $(
+          buttonEl = qs(
             `.pageAccount .group.topFilters .filterGroup[group="${group}"] button[filter="${filter}"]`,
           );
         } else {
-          buttonEl = $(
+          buttonEl = qs(
             `.pageAccount .group.filterButtons .filterGroup[group="${group}"] button[filter="${filter}"]`,
           );
         }
         if (filterValue === true) {
-          buttonEl.addClass("active");
+          buttonEl?.addClass("active");
         } else {
-          buttonEl.removeClass("active");
+          buttonEl?.removeClass("active");
         }
       }
     }
@@ -358,12 +359,12 @@ export function updateActive(): void {
 
     const newData = ss.store.getData();
 
-    const allOption = $(
+    const allOption = qs<HTMLOptionElement>(
       `.pageAccount .group.filterButtons .filterGroup[group="${id}"] option[value="all"]`,
     );
 
     if (everythingSelected) {
-      allOption.prop("selected", true);
+      allOption?.setSelected(true);
       for (const data of newData) {
         if ("value" in data) {
           if (data.value === "all") data.selected = true;
@@ -373,7 +374,7 @@ export function updateActive(): void {
       ss.store.setData(newData);
       ss.render.renderValues();
     } else {
-      allOption.prop("selected", false);
+      allOption?.setSelected(false);
     }
 
     for (const data of newData) {
@@ -490,9 +491,7 @@ export function updateActive(): void {
   //tags
   chartString += addText("tags");
 
-  setTimeout(() => {
-    $(".pageAccount .group.chart .above").html(chartString);
-  }, 0);
+  qs(".pageAccount .group.chart .above")?.setHtml(chartString);
 }
 
 function toggle<G extends ResultFiltersGroup>(
@@ -523,52 +522,64 @@ function toggle<G extends ResultFiltersGroup>(
   }
 }
 
-$(
-  ".pageAccount .filterButtons .buttonsAndTitle .buttons, .pageAccount .group.topFilters .buttonsAndTitle.testDate .buttons",
-).on("click", "button", (e) => {
-  const group = $(e.target)
-    .parents(".buttons")
-    .attr("group") as ResultFiltersGroup;
-  const filter = $(e.target).attr("filter") as ResultFiltersGroupItem<
-    typeof group
-  >;
-  if ($(e.target).hasClass("allFilters")) {
-    Misc.typedKeys(getFilters()).forEach((group) => {
-      // id and name field do not correspond to any ui elements, no need to update
-      if (group === "_id" || group === "name") {
-        return;
-      }
+for (const el of qsa(`
+  .pageAccount .filterButtons .buttonsAndTitle .buttons,
+  .pageAccount .group.topFilters .buttonsAndTitle.testDate .buttons
+  `)) {
+  el.onChild("click", "button", (e) => {
+    const childTarget = e.childTarget as HTMLElement;
+    const group = (e.target as HTMLElement).parentElement?.getAttribute(
+      "group",
+    ) as ResultFiltersGroup | null;
+    if (group === null) {
+      throw new Error("Cannot find group of target.");
+    }
 
-      setAllFilters(group, true);
-    });
-    setAllFilters("date", false);
-    filters.date.all = true;
-  } else if ($(e.target).hasClass("noFilters")) {
-    Misc.typedKeys(getFilters()).forEach((group) => {
-      // id and name field do not correspond to any ui elements, no need to update
-      if (group === "_id" || group === "name") {
-        return;
-      }
+    const filter = childTarget.getAttribute("filter") as ResultFiltersGroupItem<
+      typeof group
+    > | null;
+    if (filter === null) {
+      throw new Error("Cannot find filter of target.");
+    }
+
+    if (childTarget.classList.contains("allFilters")) {
+      Misc.typedKeys(getFilters()).forEach((group) => {
+        // id and name field do not correspond to any ui elements, no need to update
+        if (group === "_id" || group === "name") {
+          return;
+        }
 
-      if (group !== "date") {
+        setAllFilters(group, true);
+      });
+      setAllFilters("date", false);
+      filters.date.all = true;
+    } else if (childTarget.classList.contains("noFilters")) {
+      Misc.typedKeys(getFilters()).forEach((group) => {
+        // id and name field do not correspond to any ui elements, no need to update
+        if (group === "_id" || group === "name") {
+          return;
+        }
+
+        if (group !== "date") {
+          setAllFilters(group, false);
+        }
+      });
+    } else if ((e.target as HTMLElement).tagName === "BUTTON") {
+      if (e.shiftKey) {
         setAllFilters(group, false);
+        filters[group][filter] =
+          true as ResultFilters[typeof group][typeof filter];
+      } else {
+        toggle(group, filter);
+        // filters[group][filter] = !filters[group][filter];
       }
-    });
-  } else if ($(e.target).is("button")) {
-    if (e.shiftKey) {
-      setAllFilters(group, false);
-      filters[group][filter] =
-        true as ResultFilters[typeof group][typeof filter];
-    } else {
-      toggle(group, filter);
-      // filters[group][filter] = !filters[group][filter];
     }
-  }
-  updateActive();
-  save();
-});
+    updateActive();
+    save();
+  });
+}
 
-$(".pageAccount .topFilters button.allFilters").on("click", () => {
+qs(".pageAccount .topFilters button.allFilters")?.on("click", () => {
   // user is changing the filters -> current filter is no longer a filter preset
   deSelectFilterPreset();
 
@@ -588,7 +599,7 @@ $(".pageAccount .topFilters button.allFilters").on("click", () => {
   save();
 });
 
-$(".pageAccount .topFilters button.currentConfigFilter").on("click", () => {
+qs(".pageAccount .topFilters button.currentConfigFilter")?.on("click", () => {
   // user is changing the filters -> current filter is no longer a filter preset
   deSelectFilterPreset();
 
@@ -673,11 +684,19 @@ $(".pageAccount .topFilters button.currentConfigFilter").on("click", () => {
   save();
 });
 
-$(".pageAccount .topFilters button.toggleAdvancedFilters").on("click", () => {
-  $(".pageAccount .filterButtons").slideToggle(250);
-  $(".pageAccount .topFilters button.toggleAdvancedFilters").toggleClass(
-    "active",
+qs(".pageAccount .topFilters button.toggleAdvancedFilters")?.on("click", () => {
+  const buttons = qs(".pageAccount .filterButtons");
+  const advancedFiltersButton = qs(
+    ".pageAccount .topFilters button.toggleAdvancedFilters",
   );
+
+  if (buttons?.isVisible()) {
+    void buttons.slideUp(250);
+    advancedFiltersButton?.removeClass("active");
+  } else {
+    void buttons?.slideDown(250);
+    advancedFiltersButton?.addClass("active");
+  }
 });
 
 function adjustScrollposition(
@@ -873,19 +892,19 @@ export async function appendDropdowns(
 }
 
 function tagDropdownUpdate(snapshot: Snapshot): void {
-  const tagsSection = $(
+  const tagsSection = qs(
     ".pageAccount .content .filterButtons .buttonsAndTitle.tags",
   );
 
   if (snapshot.tags.length === 0) {
-    tagsSection.addClass("hidden");
+    tagsSection?.addClass("hidden");
     if (groupSelects["tags"]) {
       groupSelects["tags"].destroy();
       delete groupSelects["tags"];
     }
     setFilter("tags", "none", true);
   } else {
-    tagsSection.removeClass("hidden");
+    tagsSection?.removeClass("hidden");
 
     updateTagsDropdownOptions();
 
@@ -922,13 +941,13 @@ function tagDropdownUpdate(snapshot: Snapshot): void {
   }
 }
 
-$(".group.presetFilterButtons .filterBtns").on(
-  "click",
-  ".filterPresets .delete-filter-preset",
-  (e) => {
-    void deleteFilterPreset($(e.currentTarget).data("id") as string);
-  },
-);
+for (const el of qsa(".group.presetFilterButtons .filterBtns")) {
+  el.onChild("click", ".filterPresets .delete-filter-preset", (e) => {
+    void deleteFilterPreset(
+      (e.childTarget as HTMLElement).dataset["id"] as string,
+    );
+  });
+}
 
 function verifyResultFiltersStructure(filterIn: ResultFilters): ResultFilters {
   const filter = mergeWithDefaultFilters(
diff --git a/frontend/src/ts/utils/dom.ts b/frontend/src/ts/utils/dom.ts
index 0a1f31de73d9..577de80ca499 100644
--- a/frontend/src/ts/utils/dom.ts
+++ b/frontend/src/ts/utils/dom.ts
@@ -650,6 +650,31 @@ export class ElementWithUtils<T extends HTMLElement = HTMLElement> {
     return undefined;
   }
 
+  /**
+   * Set selected state of option element
+   * @param selected The selected state to set
+   */
+  setSelected(
+    this: ElementWithUtils<HTMLOptionElement>,
+    selected: boolean,
+  ): this {
+    if (this.native instanceof HTMLOptionElement) {
+      this.native.selected = selected;
+    }
+    return this as unknown as this;
+  }
+
+  /**
+   * Get selected state of option element
+   * @returns The selected state of the element, or undefined if the element is not an option.
+   */
+  getSelected(this: ElementWithUtils<HTMLOptionElement>): boolean | undefined {
+    if (this.native instanceof HTMLOptionElement) {
+      return this.native.selected;
+    }
+    return undefined;
+  }
+
   /**
    * Get the parent element
    */
@@ -1010,6 +1035,7 @@ export class ElementsWithUtils<
     }
     return this;
   }
+
   /**
    * Set attribute value on all elements in the array
    */

From 744ea2d2b523189bf3db677415ac9bc8ed7594cf Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 21 Jan 2026 12:12:50 +0100
Subject: [PATCH 02/15] refactor: remove jq from ape key table

---
 .../account-settings/ape-key-table.ts         | 45 +++++++++++--------
 1 file changed, 26 insertions(+), 19 deletions(-)

diff --git a/frontend/src/ts/elements/account-settings/ape-key-table.ts b/frontend/src/ts/elements/account-settings/ape-key-table.ts
index b39c1cbd0bbc..2e57f3085f81 100644
--- a/frontend/src/ts/elements/account-settings/ape-key-table.ts
+++ b/frontend/src/ts/elements/account-settings/ape-key-table.ts
@@ -5,6 +5,8 @@ import { ApeKey, ApeKeys } from "@monkeytype/schemas/ape-keys";
 import { format } from "date-fns/format";
 import { SimpleModal, TextArea } from "../../utils/simple-modal";
 import { isAuthenticated } from "../../firebase";
+import { qs, qsr } from "../../utils/dom";
+
 const editApeKey = new SimpleModal({
   id: "editApeKey",
   title: "Edit Ape key",
@@ -104,11 +106,16 @@ const viewApeKey = new SimpleModal({
   },
   beforeShowFn: (_thisPopup): void => {
     _thisPopup.canClose = false;
-    $("#simpleModal textarea").css("height", "110px");
-    $("#simpleModal .submitButton").addClass("hidden");
+
+    const modalEl = _thisPopup.modal.getModal();
+
+    modalEl.qs("textarea")?.setStyle({
+      height: "110px",
+    });
+    modalEl.qs(".submitButton")?.addClass("hidden");
     setTimeout(() => {
       _thisPopup.canClose = true;
-      $("#simpleModal .submitButton").removeClass("hidden");
+      modalEl.qs(".submitButton")?.removeClass("hidden");
     }, 5000);
   },
 });
@@ -160,7 +167,7 @@ const generateApeKey = new SimpleModal({
 
 let apeKeys: ApeKeys | null = {};
 
-const element = $("#pageAccountSettings .tab[data-tab='apeKeys']");
+const element = qsr("#pageAccountSettings .tab[data-tab='apeKeys']");
 
 async function getData(): Promise<boolean> {
   if (!isAuthenticated()) return false;
@@ -186,10 +193,10 @@ async function getData(): Promise<boolean> {
 }
 
 function showLoaderRow(): void {
-  const table = element.find("table tbody");
+  const table = element.qs("table tbody");
 
-  table.empty();
-  table.append(
+  table?.empty();
+  table?.appendHtml(
     "<tr><td colspan='6' style='text-align: center;font-size:1rem;'><i class='fas fa-spin fa-circle-notch'></i></td></tr>",
   );
 }
@@ -197,18 +204,18 @@ function showLoaderRow(): void {
 function refreshList(): void {
   const data = apeKeys;
   if (data === undefined || data === null) return;
-  const table = element.find("table tbody");
-  table.empty();
+  const table = element.qs("table tbody");
+  table?.empty();
   const apeKeyIds = Object.keys(data);
   if (apeKeyIds.length === 0) {
-    table.append(
+    table?.appendHtml(
       "<tr><td colspan='6' style='text-align: center;'>No keys found</td></tr>",
     );
     return;
   }
   apeKeyIds.forEach((apeKeyId) => {
     const key = data[apeKeyId] as ApeKey;
-    table.append(`
+    table?.appendHtml(`
       <tr keyId="${apeKeyId}">
         <td>
           <button class="textButton toggleActive" style="font-size: 1.25rem">
@@ -240,15 +247,15 @@ function refreshList(): void {
       </tr>
     `);
   });
-  for (const tr of table.find("tr")) {
+  for (const tr of table?.qsa("tr") ?? []) {
     const keyid = tr.getAttribute("keyid") as string;
-    tr.querySelector("button.toggleActive")?.addEventListener("click", (e) => {
+    tr.qs("button.toggleActive")?.on("click", (e) => {
       void toggleActiveKey(keyid);
     });
-    tr.querySelector("button.deleteButton")?.addEventListener("click", (e) => {
+    tr.qs("button.deleteButton")?.on("click", (e) => {
       deleteApeKeyModal.show([keyid], {});
     });
-    tr.querySelector("button.editButton")?.addEventListener("click", (e) => {
+    tr.qs("button.editButton")?.on("click", (e) => {
       editApeKey.show([keyid], {});
     });
   }
@@ -282,9 +289,9 @@ let lostAccess = false;
 
 export async function update(onApeKeyChangee?: () => void): Promise<void> {
   if (lostAccess) {
-    $(".pageAccountSettings .tab[data-tab='apeKeys'] table").remove();
-    $(".pageAccountSettings .section.apeKeys .buttons").remove();
-    $(".pageAccountSettings .section.apeKeys .lostAccess").removeClass(
+    qs(".pageAccountSettings .tab[data-tab='apeKeys'] table")?.remove();
+    qs(".pageAccountSettings .section.apeKeys .buttons")?.remove();
+    qs(".pageAccountSettings .section.apeKeys .lostAccess")?.removeClass(
       "hidden",
     );
     return;
@@ -294,6 +301,6 @@ export async function update(onApeKeyChangee?: () => void): Promise<void> {
   refreshList();
 }
 
-$(".pageAccountSettings").on("click", "#generateNewApeKey", () => {
+qs(".pageAccountSettings")?.onChild("click", "#generateNewApeKey", () => {
   generateApeKey.show([], {});
 });

From 58d4242494e4292bcc65b775a7dc9bb9f932f978 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 21 Jan 2026 12:21:25 +0100
Subject: [PATCH 03/15] refactor: remove jq from blocked users

---
 .../account-settings/blocked-user-table.ts    | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/frontend/src/ts/elements/account-settings/blocked-user-table.ts b/frontend/src/ts/elements/account-settings/blocked-user-table.ts
index 9bb28e169905..819ed1b77748 100644
--- a/frontend/src/ts/elements/account-settings/blocked-user-table.ts
+++ b/frontend/src/ts/elements/account-settings/blocked-user-table.ts
@@ -6,9 +6,10 @@ import { isAuthenticated } from "../../firebase";
 import { getReceiverUid } from "../../pages/friends";
 import * as DB from "../../db";
 import { updateFriendRequestsIndicator } from "../account-button";
+import { qsr } from "../../utils/dom";
 
 let blockedUsers: Connection[] = [];
-const element = $("#pageAccountSettings .tab[data-tab='blockedUsers']");
+const element = qsr("#pageAccountSettings .tab[data-tab='blockedUsers']");
 
 async function getData(): Promise<boolean> {
   showLoaderRow();
@@ -37,19 +38,19 @@ export async function update(): Promise<void> {
 }
 
 function showLoaderRow(): void {
-  const table = element.find("table tbody");
+  const table = element.qs("table tbody");
 
-  table.empty();
-  table.append(
+  table?.empty();
+  table?.appendHtml(
     "<tr><td colspan='3' style='text-align: center;font-size:1rem;'><i class='fas fa-spin fa-circle-notch'></i></td></tr>",
   );
 }
 
 function refreshList(): void {
-  const table = element.find("table tbody");
-  table.empty();
+  const table = element.qs("table tbody");
+  table?.empty();
   if (blockedUsers.length === 0) {
-    table.append(
+    table?.appendHtml(
       "<tr><td colspan='3' style='text-align: center;'>No blocked users</td></tr>",
     );
     return;
@@ -69,12 +70,12 @@ function refreshList(): void {
     </tr>
     `,
   );
-  table.append(content.join());
+  table?.appendHtml(content.join());
 }
 
-element.on("click", "table button.delete", async (e) => {
-  const row = (e.target as HTMLElement).closest("tr") as HTMLElement;
-  const id = row.dataset["id"];
+element.onChild("click", "table button.delete", async (e) => {
+  const row = (e.childTarget as HTMLElement).closest("tr") as HTMLElement;
+  const id = row?.dataset["id"];
 
   if (id === undefined) {
     throw new Error("Cannot find id of target.");

From 5a53b1bad19941a20cf9a27422a3f592b46a4a91 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 21 Jan 2026 12:22:05 +0100
Subject: [PATCH 04/15] refactor: remove jq

---
 .../src/ts/elements/settings/account-settings-notice.ts    | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/ts/elements/settings/account-settings-notice.ts b/frontend/src/ts/elements/settings/account-settings-notice.ts
index e0ee323f5a68..e29ce44e644e 100644
--- a/frontend/src/ts/elements/settings/account-settings-notice.ts
+++ b/frontend/src/ts/elements/settings/account-settings-notice.ts
@@ -1,6 +1,7 @@
 import { z } from "zod";
 import { LocalStorageWithSchema } from "../../utils/local-storage-with-schema";
 import { navigate } from "../../controllers/route-controller";
+import { qs } from "../../utils/dom";
 
 const ls = new LocalStorageWithSchema({
   key: "accountSettingsMessageDismissed",
@@ -9,11 +10,11 @@ const ls = new LocalStorageWithSchema({
 });
 
 if (ls.get()) {
-  $(".pageSettings .accountSettingsNotice").remove();
+  qs(".pageSettings .accountSettingsNotice")?.remove();
 }
 
-$(".pageSettings .accountSettingsNotice .dismissAndGo").on("click", () => {
+qs(".pageSettings .accountSettingsNotice .dismissAndGo")?.on("click", () => {
   ls.set(true);
   void navigate("/account-settings");
-  $(".pageSettings .accountSettingsNotice").remove();
+  qs(".pageSettings .accountSettingsNotice")?.remove();
 });

From 3d2190e3f8edb2220180a7eb48af658d0730f5e4 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 21 Jan 2026 12:27:49 +0100
Subject: [PATCH 05/15] refactor: remove jq from word highlight

---
 frontend/src/ts/elements/result-word-highlight.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/ts/elements/result-word-highlight.ts b/frontend/src/ts/elements/result-word-highlight.ts
index fb2905feafe3..8869b71f4135 100644
--- a/frontend/src/ts/elements/result-word-highlight.ts
+++ b/frontend/src/ts/elements/result-word-highlight.ts
@@ -5,6 +5,7 @@
 
 import * as Misc from "../utils/misc";
 import * as TestState from "../test/test-state";
+import { qsr } from "../utils/dom";
 
 const PADDING_X = 16;
 const PADDING_Y = 12;
@@ -22,8 +23,8 @@ type Line = {
 // Array of Line objects
 let lines: Line[] = [];
 
-// JQuery collection of all word elements
-let wordEls: JQuery;
+// collection of all word elements
+let wordEls: HTMLElement[];
 
 // Dictionary mapping word indices to line indices
 let wordIndexToLineIndexDict: Record<number, number> = {};
@@ -196,9 +197,9 @@ async function init(): Promise<boolean> {
     );
   }
 
-  RWH_el = $("#resultWordsHistory")[0] as HTMLElement;
+  RWH_el = qsr("#resultWordsHistory").native;
   RWH_rect = RWH_el.getBoundingClientRect();
-  wordEls = $(RWH_el).find(".words .word[input]");
+  wordEls = qsr("#resultWordsHistory").qsa(".words .word[input]").native;
 
   // remove non-input words
   if (wordEls.length === 0) {

From 36670114c3488728bd2f859c0880574b5a8d02b5 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 21 Jan 2026 13:13:44 +0100
Subject: [PATCH 06/15] refactor: remove jq from profile

---
 frontend/src/ts/elements/profile.ts | 194 ++++++++++++++--------------
 1 file changed, 100 insertions(+), 94 deletions(-)

diff --git a/frontend/src/ts/elements/profile.ts b/frontend/src/ts/elements/profile.ts
index f56bcfe29eb4..d45378c2a0c0 100644
--- a/frontend/src/ts/elements/profile.ts
+++ b/frontend/src/ts/elements/profile.ts
@@ -20,6 +20,7 @@ import { getAvatarElement } from "../utils/discord-avatar";
 import { formatXp } from "../utils/levels";
 import { formatTopPercentage } from "../utils/misc";
 import { get as getServerConfiguration } from "../ape/server-configuration";
+import { qs } from "../utils/dom";
 
 type ProfileViewPaths = "profile" | "account";
 type UserProfileOrSnapshot = UserProfile | Snapshot;
@@ -31,11 +32,11 @@ export async function update(
   profile: UserProfileOrSnapshot,
 ): Promise<void> {
   const elementClass = where.charAt(0).toUpperCase() + where.slice(1);
-  const profileElement = $(`.page${elementClass} .profile`);
-  const details = $(`.page${elementClass} .profile .details`);
+  const profileElement = qs(`.page${elementClass} .profile`);
+  const details = qs(`.page${elementClass} .profile .details`);
 
-  profileElement.attr("uid", profile.uid ?? "");
-  profileElement.attr("name", profile.name ?? "");
+  profileElement?.setAttribute("uid", profile.uid ?? "");
+  profileElement?.setAttribute("name", profile.name ?? "");
 
   // ============================================================================
   // DO FREAKING NOT USE .HTML OR .APPEND HERE - USER INPUT!!!!!!
@@ -52,8 +53,8 @@ export async function update(
     return;
   }
 
-  const avatar = details.find(".avatarAndName .avatar");
-  avatar.replaceWith(getAvatarElement(profile, { size: 256 }));
+  const avatar = details?.qs(".avatarAndName .avatar");
+  avatar?.replaceWith(getAvatarElement(profile, { size: 256 }));
 
   if (profile.inventory?.badges && !banned) {
     let mainHtml = "";
@@ -67,27 +68,27 @@ export async function update(
       }
     }
 
-    details.find(".badges").empty().append(mainHtml);
-    details.find(".allBadges").empty().append(restHtml);
+    details?.qs(".badges")?.empty().appendHtml(mainHtml);
+    details?.qs(".allBadges")?.empty().appendHtml(restHtml);
   }
 
-  details.find(".name").text(profile.name);
+  details?.qs(".name")?.setText(profile.name);
   details
-    .find(".userFlags")
-    .html(
+    ?.qs(".userFlags")
+    ?.setHtml(
       getHtmlByUserFlags({ ...profile, isFriend: DB.isFriend(profile.uid) }),
     );
 
   if (profile.lbOptOut === true) {
     if (where === "profile") {
       profileElement
-        .find(".lbOptOutReminder")
-        .removeClass("hidden")
-        .text(
+        ?.qs(".lbOptOutReminder")
+        ?.removeClass("hidden")
+        ?.setText(
           "Note: This account has opted out of the leaderboards, meaning their results aren't verified by the anticheat system and may not be legitimate.",
         );
     } else {
-      profileElement.find(".lbOptOutReminder").addClass("hidden");
+      profileElement?.qs(".lbOptOutReminder")?.addClass("hidden");
     }
   }
 
@@ -100,14 +101,17 @@ export async function update(
   const creationDate = new Date(profile.addedAt);
   const diffDays = differenceInDays(new Date(), creationDate);
   const balloonText = `${diffDays} day${diffDays !== 1 ? "s" : ""} ago`;
-  details.find(".joined").text(joinedText).attr("aria-label", balloonText);
+  details
+    ?.qs(".joined")
+    ?.setText(joinedText)
+    .setAttribute("aria-label", balloonText);
 
   let hoverText = "";
 
   if (profile.streak && profile?.streak > 1) {
     details
-      .find(".streak")
-      .text(
+      ?.qs(".streak")
+      ?.setText(
         `Current streak: ${profile.streak} ${
           profile.streak === 1 ? "day" : "days"
         }`,
@@ -116,7 +120,7 @@ export async function update(
       profile.maxStreak === 1 ? "day" : "days"
     }`;
   } else {
-    details.find(".streak").text("");
+    details?.qs(".streak")?.setText("");
     hoverText = "";
   }
 
@@ -189,29 +193,29 @@ export async function update(
   }
 
   details
-    .find(".streak")
-    .attr("aria-label", hoverText)
-    .attr("data-balloon-break", "");
+    ?.qs(".streak")
+    ?.setAttribute("aria-label", hoverText)
+    ?.setAttribute("data-balloon-break", "");
 
   const { completedPercentage, restartRatio } = Misc.formatTypingStatsRatio(
     profile.typingStats,
   );
 
-  const typingStatsEl = details.find(".typingStats");
+  const typingStatsEl = details?.qs(".typingStats");
   typingStatsEl
-    .find(".started .value")
-    .text(profile.typingStats?.startedTests ?? 0);
+    ?.qs(".started .value")
+    ?.setText(`${profile.typingStats?.startedTests ?? 0}`);
   typingStatsEl
-    .find(".completed .value")
-    .text(profile.typingStats?.completedTests ?? 0)
-    .attr("data-balloon-pos", "up")
-    .attr(
+    ?.qs(".completed .value")
+    ?.setText(`${profile.typingStats?.completedTests ?? 0}`)
+    .setAttribute("data-balloon-pos", "up")
+    .setAttribute(
       "aria-label",
       `${completedPercentage}% (${restartRatio} restarts per completed test)`,
     );
   typingStatsEl
-    .find(".timeTyping .value")
-    .text(
+    ?.qs(".timeTyping .value")
+    ?.setText(
       secondsToString(
         Math.round(profile.typingStats?.timeTyping ?? 0),
         true,
@@ -225,10 +229,10 @@ export async function update(
 
   if (!banned) {
     bio = !!(profile.details?.bio ?? "");
-    details.find(".bio .value").text(profile.details?.bio ?? "");
+    details?.qs(".bio .value")?.setText(profile.details?.bio ?? "");
 
     keyboard = !!(profile.details?.keyboard ?? "");
-    details.find(".keyboard .value").text(profile.details?.keyboard ?? "");
+    details?.qs(".keyboard .value")?.setText(profile.details?.keyboard ?? "");
 
     if (
       (profile.details?.socialProfiles?.github !== undefined &&
@@ -239,12 +243,12 @@ export async function update(
         profile.details?.socialProfiles?.website !== "")
     ) {
       socials = true;
-      const socialsEl = details.find(".socials .value");
-      socialsEl.empty();
+      const socialsEl = details?.qs(".socials .value");
+      socialsEl?.empty();
 
       const git = profile.details?.socialProfiles.github ?? "";
       if (git) {
-        socialsEl.append(
+        socialsEl?.appendHtml(
           `<a href='https://github.com/${Misc.escapeHTML(
             git,
           )}/' target="_blank" rel="nofollow me" aria-label="${Misc.escapeHTML(
@@ -255,7 +259,7 @@ export async function update(
 
       const twitter = profile.details?.socialProfiles.twitter ?? "";
       if (twitter) {
-        socialsEl.append(
+        socialsEl?.appendHtml(
           `<a href='https://x.com/${Misc.escapeHTML(
             twitter,
           )}' target="_blank" rel="nofollow me" aria-label="${Misc.escapeHTML(
@@ -271,7 +275,7 @@ export async function update(
       const websiteName = website?.match(regex)?.[1] ?? website;
 
       if (website) {
-        socialsEl.append(
+        socialsEl?.appendHtml(
           `<a href='${Misc.escapeHTML(
             website,
           )}' target="_blank" rel="nofollow me" aria-label="${Misc.escapeHTML(
@@ -286,85 +290,85 @@ export async function update(
   //lbs
 
   if (banned) {
-    profileElement.find(".leaderboardsPositions").addClass("hidden");
+    profileElement?.qs(".leaderboardsPositions")?.addClass("hidden");
   } else {
-    profileElement.find(".leaderboardsPositions").removeClass("hidden");
+    profileElement?.qs(".leaderboardsPositions")?.removeClass("hidden");
 
     const t15 = profile.allTimeLbs?.time?.["15"]?.["english"] ?? null;
     const t60 = profile.allTimeLbs?.time?.["60"]?.["english"] ?? null;
 
     if (t15 === null && t60 === null) {
-      profileElement.find(".leaderboardsPositions").addClass("hidden");
+      profileElement?.qs(".leaderboardsPositions")?.addClass("hidden");
     } else {
       if (t15 !== null) {
         profileElement
-          .find(".leaderboardsPositions .group.t15 .pos")
-          .text(Format.rank(t15?.rank));
+          ?.qs(".leaderboardsPositions .group.t15 .pos")
+          ?.setText(Format.rank(t15?.rank));
         profileElement
-          .find(".leaderboardsPositions .group.t15 .topPercentage")
-          .text(formatTopPercentage(t15));
+          ?.qs(".leaderboardsPositions .group.t15 .topPercentage")
+          ?.setText(formatTopPercentage(t15));
       }
 
       if (t60 !== null) {
         profileElement
-          .find(".leaderboardsPositions .group.t60 .pos")
-          .text(Format.rank(t60?.rank));
+          ?.qs(".leaderboardsPositions .group.t60 .pos")
+          ?.setText(Format.rank(t60?.rank));
 
         profileElement
-          .find(".leaderboardsPositions .group.t60 .topPercentage")
-          .text(formatTopPercentage(t60));
+          ?.qs(".leaderboardsPositions .group.t60 .topPercentage")
+          ?.setText(formatTopPercentage(t60));
       }
     }
   }
 
   if (profile.uid === getAuthenticatedUser()?.uid) {
-    profileElement.find(".userReportButton").addClass("hidden");
+    profileElement?.qs(".userReportButton")?.addClass("hidden");
   } else {
-    profileElement.find(".userReportButton").removeClass("hidden");
+    profileElement?.qs(".userReportButton")?.removeClass("hidden");
   }
 
   const bioAndKey = bio || keyboard;
 
   if (!bio) {
-    details.find(".bio").addClass("hidden");
+    details?.qs(".bio")?.addClass("hidden");
   } else {
-    details.find(".bio").removeClass("hidden");
+    details?.qs(".bio")?.removeClass("hidden");
   }
 
   if (!keyboard) {
-    details.find(".keyboard").addClass("hidden");
+    details?.qs(".keyboard")?.addClass("hidden");
   } else {
-    details.find(".keyboard").removeClass("hidden");
+    details?.qs(".keyboard")?.removeClass("hidden");
   }
 
   if (!bioAndKey) {
-    details.find(".bioAndKeyboard").addClass("hidden");
-    details.find(".sep2").addClass("hidden");
+    details?.qs(".bioAndKeyboard")?.addClass("hidden");
+    details?.qs(".sep2")?.addClass("hidden");
   } else {
-    details.find(".bioAndKeyboard").removeClass("hidden");
-    details.find(".sep2").removeClass("hidden");
+    details?.qs(".bioAndKeyboard")?.removeClass("hidden");
+    details?.qs(".sep2")?.removeClass("hidden");
   }
 
   if (!socials) {
-    details.find(".socials").addClass("hidden");
-    details.find(".sep3").addClass("hidden");
+    details?.qs(".socials")?.addClass("hidden");
+    details?.qs(".sep3")?.addClass("hidden");
   } else {
-    details.find(".socials").removeClass("hidden");
-    details.find(".sep3").removeClass("hidden");
+    details?.qs(".socials")?.removeClass("hidden");
+    details?.qs(".sep3")?.removeClass("hidden");
   }
 
-  details.removeClass("none");
-  details.removeClass("bioAndKey");
-  details.removeClass("soc");
-  details.removeClass("both");
+  details?.removeClass("none");
+  details?.removeClass("bioAndKey");
+  details?.removeClass("soc");
+  details?.removeClass("both");
   if (!socials && !bioAndKey) {
-    details.addClass("none");
+    details?.addClass("none");
   } else if (socials && !bioAndKey) {
-    details.addClass("soc");
+    details?.addClass("soc");
   } else if (!socials && bioAndKey) {
-    details.addClass("bioAndKey");
+    details?.addClass("bioAndKey");
   } else if (socials && bioAndKey) {
-    details.addClass("both");
+    details?.addClass("both");
   }
 
   updateFriendRequestButton();
@@ -376,36 +380,39 @@ export function updateXp(
   sameUserCheck = false,
 ): void {
   const elementClass = where.charAt(0).toUpperCase() + where.slice(1);
-  const profileElement = $(`.page${elementClass} .profile`);
-  const details = $(`.page${elementClass} .profile .details .levelAndBar`);
+  const profileElement = qs(`.page${elementClass} .profile`);
+  const details = qs(`.page${elementClass} .profile .details .levelAndBar`);
 
   if (details === undefined || details === null) return;
 
   if (sameUserCheck && where === "profile") {
     const authedUserUid = getAuthenticatedUser()?.uid;
-    if (authedUserUid !== profileElement.attr("uid")) return;
+    if (authedUserUid !== profileElement?.getAttribute("uid")) return;
   }
 
   const xpDetails = Levels.getXpDetails(xp);
   const xpForLevel = xpDetails.levelMaxXp;
   const xpToDisplay = xpDetails.levelCurrentXp;
   details
-    .find(".level")
-    .text(xpDetails.level)
-    .attr("aria-label", `${formatXp(xp)} total xp`);
+    ?.qs(".level")
+    ?.setText(`${xpDetails.level}`)
+    ?.setAttribute("aria-label", `${formatXp(xp)} total xp`);
   details
-    .find(".xp")
-    .text(`${formatXp(xpToDisplay)}/${formatXp(xpForLevel)}`)
-    .attr(
+    ?.qs(".xp")
+    ?.setText(`${formatXp(xpToDisplay)}/${formatXp(xpForLevel)}`)
+    ?.setAttribute(
       "aria-label",
       `${formatXp(xpForLevel - xpToDisplay)} xp until next level`,
     );
   details
-    .find(".xpBar .bar")
-    .css("width", `${(xpToDisplay / xpForLevel) * 100}%`);
+    ?.qs(".xpBar .bar")
+    ?.setStyle({ width: `${(xpToDisplay / xpForLevel) * 100}%` });
   details
-    .find(".xpBar")
-    .attr("aria-label", `${((xpToDisplay / xpForLevel) * 100).toFixed(2)}%`);
+    ?.qs(".xpBar")
+    ?.setAttribute(
+      "aria-label",
+      `${((xpToDisplay / xpForLevel) * 100).toFixed(2)}%`,
+    );
 }
 
 export function updateNameFontSize(where: ProfileViewPaths): void {
@@ -415,25 +422,24 @@ export function updateNameFontSize(where: ProfileViewPaths): void {
 
   let details;
   if (where === "account") {
-    details = $(".pageAccount .profile .details");
+    details = qs(".pageAccount .profile .details");
   } else if (where === "profile") {
-    details = $(".pageProfile .profile .details");
+    details = qs(".pageProfile .profile .details");
   }
   if (!details) return;
-  const nameFieldjQ = details.find(".user");
-  const nameFieldParent = nameFieldjQ.parent()[0];
-  const nameField = nameFieldjQ[0];
+  const nameField = details?.qs(".user");
+  const nameFieldParent = nameField?.getParent();
   const upperLimit = convertRemToPixels(2);
 
   if (!nameField || !nameFieldParent) return;
 
-  nameField.style.fontSize = `10px`;
-  const parentWidth = nameFieldParent.clientWidth;
-  const widthAt10 = nameField.clientWidth;
+  nameField.native.style.fontSize = `10px`;
+  const parentWidth = nameFieldParent.native.clientWidth;
+  const widthAt10 = nameField.native.clientWidth;
   const ratioAt10 = parentWidth / widthAt10;
   const fittedFontSize = ratioAt10 * 10;
   const finalFontSize = Math.min(Math.max(fittedFontSize, 10), upperLimit);
-  nameField.style.fontSize = `${finalFontSize}px`;
+  nameField.native.style.fontSize = `${finalFontSize}px`;
 }
 
 export function updateFriendRequestButton(): void {
@@ -463,6 +469,6 @@ const throttledEvent = throttle(1000, () => {
   }
 });
 
-$(window).on("resize", () => {
+window.addEventListener("resize", () => {
   throttledEvent();
 });

From b8d9de048a0d2dce87bdf86a8bb76f50e95a9e37 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 21 Jan 2026 13:14:13 +0100
Subject: [PATCH 07/15] refactor: remove jq

---
 frontend/src/ts/pages/settings.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/ts/pages/settings.ts b/frontend/src/ts/pages/settings.ts
index e28ce4e2a464..6b2614dd24f6 100644
--- a/frontend/src/ts/pages/settings.ts
+++ b/frontend/src/ts/pages/settings.ts
@@ -758,13 +758,13 @@ function toggleSettingsGroup(groupName: string): void {
       hide: false,
     });
     groupEl?.addClass("slideup");
-    $(`.pageSettings .sectionGroupTitle[group=${groupName}]`).addClass(
+    qs(`.pageSettings .sectionGroupTitle[group=${groupName}]`)?.addClass(
       "rotateIcon",
     );
   } else {
     void groupEl?.slideDown(250);
     groupEl?.removeClass("slideup");
-    $(`.pageSettings .sectionGroupTitle[group=${groupName}]`).removeClass(
+    qs(`.pageSettings .sectionGroupTitle[group=${groupName}]`)?.removeClass(
       "rotateIcon",
     );
   }

From 5c22ffdfaab76ed72046d8978d90f2387cf243c0 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 21 Jan 2026 13:27:00 +0100
Subject: [PATCH 08/15] refactor: rework media query debugger, remove old
 debugger

---
 frontend/src/index.html                       |  1 -
 frontend/src/styles/media-queries-blue.scss   |  6 ---
 frontend/src/styles/media-queries-brown.scss  |  6 ---
 frontend/src/styles/media-queries-gray.scss   |  6 ---
 frontend/src/styles/media-queries-green.scss  |  6 ---
 frontend/src/styles/media-queries-orange.scss |  6 ---
 frontend/src/styles/media-queries-purple.scss |  6 ---
 frontend/src/styles/media-queries-yellow.scss |  6 ---
 frontend/src/styles/media-queries.scss        | 31 +------------
 .../layout/overlays/MediaQueryDebugger.tsx    | 44 +++++++++++++++++++
 .../components/layout/overlays/Overlays.tsx   |  5 +--
 .../utils/TailwindMediaQueryDebugger.tsx      | 31 -------------
 frontend/src/ts/modals/dev-options.ts         |  2 +-
 13 files changed, 48 insertions(+), 108 deletions(-)
 create mode 100644 frontend/src/ts/components/layout/overlays/MediaQueryDebugger.tsx
 delete mode 100644 frontend/src/ts/components/utils/TailwindMediaQueryDebugger.tsx

diff --git a/frontend/src/index.html b/frontend/src/index.html
index b4105b17e56a..fbdcff813444 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -4,7 +4,6 @@
 
   <body>
     <mount data-component="overlays"></mount>
-    <div id="mediaQueryDebug"></div>
     <load src="html/warnings.html" />
     <div class="customBackground"></div>
 
diff --git a/frontend/src/styles/media-queries-blue.scss b/frontend/src/styles/media-queries-blue.scss
index afa79f435be9..70ad61f9c7ad 100644
--- a/frontend/src/styles/media-queries-blue.scss
+++ b/frontend/src/styles/media-queries-blue.scss
@@ -1,12 +1,6 @@
 @use "./media.scss" as *;
 
 @include media-query(blue) {
-  #mediaQueryDebug {
-    background: #29b6f6;
-    &::before {
-      content: "blue";
-    }
-  }
   .content-grid {
     --content-max-width: 640px;
   }
diff --git a/frontend/src/styles/media-queries-brown.scss b/frontend/src/styles/media-queries-brown.scss
index 2dd85a1b2740..0dec474c9c7a 100644
--- a/frontend/src/styles/media-queries-brown.scss
+++ b/frontend/src/styles/media-queries-brown.scss
@@ -2,12 +2,6 @@
 @use "./media.scss" as *;
 
 @include media-query(brown) {
-  #mediaQueryDebug {
-    background: #8d6e63;
-    &::before {
-      content: "brown";
-    }
-  }
   header {
     nav {
       font-size: 0.8rem;
diff --git a/frontend/src/styles/media-queries-gray.scss b/frontend/src/styles/media-queries-gray.scss
index 72813ed15f52..4cdd96e29510 100644
--- a/frontend/src/styles/media-queries-gray.scss
+++ b/frontend/src/styles/media-queries-gray.scss
@@ -2,12 +2,6 @@
 @use "./media.scss" as *;
 
 @include media-query(gray) {
-  #mediaQueryDebug {
-    background: gray;
-    &::before {
-      content: "gray";
-    }
-  }
   .pageLeaderboards .content .tableAndUser {
     .titleAndButtons {
       grid-template-columns: 1fr;
diff --git a/frontend/src/styles/media-queries-green.scss b/frontend/src/styles/media-queries-green.scss
index eff2856b47bc..9ed28326e8c9 100644
--- a/frontend/src/styles/media-queries-green.scss
+++ b/frontend/src/styles/media-queries-green.scss
@@ -1,12 +1,6 @@
 @use "./media.scss" as *;
 
 @include media-query(green) {
-  #mediaQueryDebug {
-    background: #9ccc65;
-    &::before {
-      content: "green";
-    }
-  }
   .content-grid {
     --content-max-width: 768px;
   }
diff --git a/frontend/src/styles/media-queries-orange.scss b/frontend/src/styles/media-queries-orange.scss
index bfacd4420772..c31e32a38377 100644
--- a/frontend/src/styles/media-queries-orange.scss
+++ b/frontend/src/styles/media-queries-orange.scss
@@ -1,12 +1,6 @@
 @use "./media.scss" as *;
 
 @include media-query(orange) {
-  #mediaQueryDebug {
-    background: #ffa726;
-    &::before {
-      content: "orange";
-    }
-  }
   .content-grid {
     --content-max-width: 1280px;
   }
diff --git a/frontend/src/styles/media-queries-purple.scss b/frontend/src/styles/media-queries-purple.scss
index b4dd2809bd57..c5298c85d5a4 100644
--- a/frontend/src/styles/media-queries-purple.scss
+++ b/frontend/src/styles/media-queries-purple.scss
@@ -1,12 +1,6 @@
 @use "./media.scss" as *;
 
 @include media-query(purple) {
-  #mediaQueryDebug {
-    background: #7e57c2;
-    &::before {
-      content: "purple";
-    }
-  }
   .content-grid {
     --content-max-width: 100%;
     --padding-inline: 1rem;
diff --git a/frontend/src/styles/media-queries-yellow.scss b/frontend/src/styles/media-queries-yellow.scss
index 0ab5f29accdc..6f6c9b77d1a0 100644
--- a/frontend/src/styles/media-queries-yellow.scss
+++ b/frontend/src/styles/media-queries-yellow.scss
@@ -1,12 +1,6 @@
 @use "./media.scss" as *;
 
 @include media-query(yellow) {
-  #mediaQueryDebug {
-    background: #ffee58;
-    &::before {
-      content: "yellow";
-    }
-  }
   .content-grid {
     --content-max-width: 1024px;
   }
diff --git a/frontend/src/styles/media-queries.scss b/frontend/src/styles/media-queries.scss
index cec20fa04dff..e9358c2d5290 100644
--- a/frontend/src/styles/media-queries.scss
+++ b/frontend/src/styles/media-queries.scss
@@ -1,39 +1,10 @@
-#mediaQueryDebug {
-  height: 0.5rem;
-  width: 100%;
-  background: #f44336;
-  position: fixed;
-  z-index: 99999999;
-  top: 0px;
-  &::before {
-    content: "red";
-    padding-top: 0.75rem;
-    padding-left: 0.5rem;
-    display: block;
-    z-index: 99999999;
-    position: absolute;
-  }
-  display: none;
-}
-
 body {
   &.mediaQueryDebugLevel1 {
-    #mediaQueryDebug {
-      display: block;
-    }
-  }
-  &.mediaQueryDebugLevel2 {
-    #mediaQueryDebug {
-      display: block;
-    }
     .content-grid {
       border: 0.1rem dashed var(--main-color);
     }
   }
-  &.mediaQueryDebugLevel3 {
-    #mediaQueryDebug {
-      display: block;
-    }
+  &.mediaQueryDebugLevel2 {
     .content-grid > * {
       border: 0.1rem dashed var(--sub-color);
     }
diff --git a/frontend/src/ts/components/layout/overlays/MediaQueryDebugger.tsx b/frontend/src/ts/components/layout/overlays/MediaQueryDebugger.tsx
new file mode 100644
index 000000000000..9876ffa7d308
--- /dev/null
+++ b/frontend/src/ts/components/layout/overlays/MediaQueryDebugger.tsx
@@ -0,0 +1,44 @@
+import { JSXElement, Match, Show, Switch } from "solid-js";
+
+import { bp } from "../../../signals/breakpoints";
+import { isDevEnvironment } from "../../../utils/misc";
+
+export function MediaQueryDebugger(): JSXElement {
+  return (
+    <Show when={isDevEnvironment()}>
+      <div class="text-text fixed top-2 z-999999999999999 flex flex-col gap-2 font-mono text-xs">
+        <div class="bg-sub-alt flex w-min rounded-r px-2 py-1">
+          <div class="mr-2">OLD</div>
+          <div class="hidden 2xl:block">red</div>
+          <div class="hidden xl:block 2xl:hidden">orange</div>
+          <div class="hidden lg:block xl:hidden">yellow</div>
+          <div class="hidden md:block lg:hidden">green</div>
+          <div class="hidden sm:block md:hidden">blue</div>
+          <div class="xs:block hidden sm:hidden">purple</div>
+          <div class="xs:hidden">gray</div>
+        </div>
+        <div class="bg-sub-alt flex w-min rounded-r px-2 py-1">
+          <div class="mr-2">CSS</div>
+          <div class="hidden 2xl:block">2xl</div>
+          <div class="hidden xl:block 2xl:hidden">xl</div>
+          <div class="hidden lg:block xl:hidden">lg</div>
+          <div class="hidden md:block lg:hidden">md</div>
+          <div class="hidden sm:block md:hidden">sm</div>
+          <div class="xs:block hidden sm:hidden">xs</div>
+          <div class="xs:hidden">xxs</div>
+        </div>
+        <div class="bg-sub-alt flex w-min rounded-r px-2 py-1">
+          <div class="mr-2">JS</div>
+          <Switch>
+            <Match when={bp().xxl}>2xl</Match>
+            <Match when={bp().xl}>xl</Match>
+            <Match when={bp().lg}>lg</Match>
+            <Match when={bp().md}>md</Match>
+            <Match when={bp().sm}>sm</Match>
+            <Match when={bp().xs}>xs</Match>
+          </Switch>
+        </div>
+      </div>
+    </Show>
+  );
+}
diff --git a/frontend/src/ts/components/layout/overlays/Overlays.tsx b/frontend/src/ts/components/layout/overlays/Overlays.tsx
index f7626e5fe8f3..99a9f8efa7b8 100644
--- a/frontend/src/ts/components/layout/overlays/Overlays.tsx
+++ b/frontend/src/ts/components/layout/overlays/Overlays.tsx
@@ -1,16 +1,15 @@
 import { JSXElement } from "solid-js";
 
-import { TailwindMediaQueryDebugger } from "../../utils/TailwindMediaQueryDebugger";
-
 import { Banners } from "./Banners";
 import { FpsCounter } from "./FpsCounter";
 import { LoaderBar } from "./LoaderBar";
+import { MediaQueryDebugger } from "./MediaQueryDebugger";
 
 export function Overlays(): JSXElement {
   return (
     <>
       <Banners />
-      <TailwindMediaQueryDebugger />
+      <MediaQueryDebugger />
       <LoaderBar />
       <FpsCounter />
     </>
diff --git a/frontend/src/ts/components/utils/TailwindMediaQueryDebugger.tsx b/frontend/src/ts/components/utils/TailwindMediaQueryDebugger.tsx
deleted file mode 100644
index 53da2f95869e..000000000000
--- a/frontend/src/ts/components/utils/TailwindMediaQueryDebugger.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { JSXElement, Match, Show, Switch } from "solid-js";
-
-import { bp } from "../../signals/breakpoints";
-import { isDevEnvironment } from "../../utils/misc";
-
-export function TailwindMediaQueryDebugger(): JSXElement {
-  return (
-    <Show when={isDevEnvironment()}>
-      <div class="bg-sub-alt text-text fixed top-12 left-2 z-999999999999999 flex rounded px-2 py-1 font-mono font-bold shadow-lg">
-        <div class="hidden 2xl:block">2xl</div>
-        <div class="hidden xl:block 2xl:hidden">xl</div>
-        <div class="hidden lg:block xl:hidden">lg</div>
-        <div class="hidden md:block lg:hidden">md</div>
-        <div class="hidden sm:block md:hidden">sm</div>
-        <div class="xs:block hidden sm:hidden">xs</div>
-        <div class="xs:hidden">xxs</div>
-        <div>
-          /
-          <Switch>
-            <Match when={bp().xxl}>2xl</Match>
-            <Match when={bp().xl}>xl</Match>
-            <Match when={bp().lg}>lg</Match>
-            <Match when={bp().md}>md</Match>
-            <Match when={bp().sm}>sm</Match>
-            <Match when={bp().xs}>xs</Match>
-          </Switch>
-        </div>
-      </div>
-    </Show>
-  );
-}
diff --git a/frontend/src/ts/modals/dev-options.ts b/frontend/src/ts/modals/dev-options.ts
index 20eee52e91bc..73ff64740068 100644
--- a/frontend/src/ts/modals/dev-options.ts
+++ b/frontend/src/ts/modals/dev-options.ts
@@ -38,7 +38,7 @@ async function setup(modalEl: ElementWithUtils): Promise<void> {
   });
   modalEl.qs(".toggleMediaQueryDebug")?.on("click", () => {
     mediaQueryDebugLevel++;
-    if (mediaQueryDebugLevel > 3) {
+    if (mediaQueryDebugLevel > 2) {
       mediaQueryDebugLevel = 0;
     }
     Notifications.add(

From af801335e4b8e7a02031a00bb6388abe56dc00e4 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 21 Jan 2026 13:30:35 +0100
Subject: [PATCH 09/15] refactor: move scroll to top and mobile commandline to
 overlays

---
 .../src/ts/components/layout/footer/Footer.tsx    | 14 --------------
 .../ts/components/layout/overlays/Overlays.tsx    | 15 +++++++++++++++
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/frontend/src/ts/components/layout/footer/Footer.tsx b/frontend/src/ts/components/layout/footer/Footer.tsx
index 685612e9c706..1f915b61cb7c 100644
--- a/frontend/src/ts/components/layout/footer/Footer.tsx
+++ b/frontend/src/ts/components/layout/footer/Footer.tsx
@@ -4,26 +4,12 @@ import { getFocus } from "../../../signals/core";
 import { showModal } from "../../../stores/modals";
 import { Button } from "../../common/Button";
 
-import { ScrollToTop } from "./ScrollToTop";
 import { ThemeIndicator } from "./ThemeIndicator";
 import { VersionButton } from "./VersionButton";
 
 export function Footer(): JSXElement {
   return (
     <footer class="text-sub relative text-xs">
-      <ScrollToTop />
-      <button
-        type="button"
-        id="commandLineMobileButton"
-        class="bg-main text-bg fixed bottom-8 left-8 z-99 hidden h-12 w-12 rounded-full text-center leading-12"
-        onClick={() => {
-          showModal("Commandline");
-        }}
-        tabIndex="-1"
-      >
-        <i class="fas fa-terminal"></i>
-      </button>
-
       <div
         class="mb-8 text-center leading-loose transition-opacity"
         classList={{
diff --git a/frontend/src/ts/components/layout/overlays/Overlays.tsx b/frontend/src/ts/components/layout/overlays/Overlays.tsx
index 99a9f8efa7b8..88aa2b82649c 100644
--- a/frontend/src/ts/components/layout/overlays/Overlays.tsx
+++ b/frontend/src/ts/components/layout/overlays/Overlays.tsx
@@ -1,5 +1,8 @@
 import { JSXElement } from "solid-js";
 
+import { showModal } from "../../../stores/modals";
+import { ScrollToTop } from "../footer/ScrollToTop";
+
 import { Banners } from "./Banners";
 import { FpsCounter } from "./FpsCounter";
 import { LoaderBar } from "./LoaderBar";
@@ -8,6 +11,18 @@ import { MediaQueryDebugger } from "./MediaQueryDebugger";
 export function Overlays(): JSXElement {
   return (
     <>
+      <ScrollToTop />
+      <button
+        type="button"
+        id="commandLineMobileButton"
+        class="bg-main text-bg fixed bottom-8 left-8 z-99 hidden h-12 w-12 rounded-full text-center leading-12"
+        onClick={() => {
+          showModal("Commandline");
+        }}
+        tabIndex="-1"
+      >
+        <i class="fas fa-terminal"></i>
+      </button>
       <Banners />
       <MediaQueryDebugger />
       <LoaderBar />

From f40e9f5f26c0e3df59707d565600fe368911db9f Mon Sep 17 00:00:00 2001
From: Christian Fehmer <fehmer@users.noreply.github.com>
Date: Wed, 21 Jan 2026 16:04:13 +0100
Subject: [PATCH 10/15] fix: breakpoints signal should always have xxs true
 (@fehmer) (#7408)

---
 .../src/ts/components/layout/overlays/MediaQueryDebugger.tsx    | 1 +
 frontend/src/ts/signals/breakpoints.ts                          | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/ts/components/layout/overlays/MediaQueryDebugger.tsx b/frontend/src/ts/components/layout/overlays/MediaQueryDebugger.tsx
index 9876ffa7d308..7a5fa96cb380 100644
--- a/frontend/src/ts/components/layout/overlays/MediaQueryDebugger.tsx
+++ b/frontend/src/ts/components/layout/overlays/MediaQueryDebugger.tsx
@@ -36,6 +36,7 @@ export function MediaQueryDebugger(): JSXElement {
             <Match when={bp().md}>md</Match>
             <Match when={bp().sm}>sm</Match>
             <Match when={bp().xs}>xs</Match>
+            <Match when={bp().xxs}>xxs</Match>
           </Switch>
         </div>
       </div>
diff --git a/frontend/src/ts/signals/breakpoints.ts b/frontend/src/ts/signals/breakpoints.ts
index 343ece2d6089..e1664f25718c 100644
--- a/frontend/src/ts/signals/breakpoints.ts
+++ b/frontend/src/ts/signals/breakpoints.ts
@@ -6,7 +6,7 @@ type Breakpoints = Record<BreakpointKeys, boolean>;
 
 const styles = getComputedStyle(document.documentElement);
 const tw: Record<BreakpointKeys, number> = {
-  xxs: parseInt(styles.getPropertyValue("--breakpoint-xxs")),
+  xxs: 0,
   xs: parseInt(styles.getPropertyValue("--breakpoint-xs")),
   sm: parseInt(styles.getPropertyValue("--breakpoint-sm")),
   md: parseInt(styles.getPropertyValue("--breakpoint-md")),

From 355c25e572af643f43cafc22f3745f97fea93346 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <fehmer@users.noreply.github.com>
Date: Wed, 21 Jan 2026 16:04:42 +0100
Subject: [PATCH 11/15] fix(account): buttons not updating history chart
 (@fehmer) (#7407)

---
 frontend/src/ts/controllers/chart-controller.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/ts/controllers/chart-controller.ts b/frontend/src/ts/controllers/chart-controller.ts
index 3f08b8b96adb..af7bb8e6fb78 100644
--- a/frontend/src/ts/controllers/chart-controller.ts
+++ b/frontend/src/ts/controllers/chart-controller.ts
@@ -1360,6 +1360,7 @@ ConfigEvent.subscribe(({ key, newValue }) => {
     updateAccuracy();
     updateAverage10();
     updateAverage100();
+    accountHistory.update();
   }
   if (key === "fontFamily") setDefaultFontFamily(newValue);
 });

From b50c6d37a4863ea8fd8a550329dcf4cc451c999e Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 21 Jan 2026 16:45:03 +0100
Subject: [PATCH 12/15] refactor: remove jq from result batches

---
 frontend/src/ts/elements/result-batches.ts | 35 ++++++++++++----------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/frontend/src/ts/elements/result-batches.ts b/frontend/src/ts/elements/result-batches.ts
index 500c63545abe..d72645da9991 100644
--- a/frontend/src/ts/elements/result-batches.ts
+++ b/frontend/src/ts/elements/result-batches.ts
@@ -3,13 +3,14 @@ import * as ServerConfiguration from "../ape/server-configuration";
 import { blendTwoHexColors } from "../utils/colors";
 import { mapRange } from "@monkeytype/util/numbers";
 import { getTheme } from "../signals/theme";
+import { qs } from "../utils/dom";
 
 export function hide(): void {
-  $(".pageAccount .resultBatches").addClass("hidden");
+  qs(".pageAccount .resultBatches")?.addClass("hidden");
 }
 
 export function show(): void {
-  $(".pageAccount .resultBatches").removeClass("hidden");
+  qs(".pageAccount .resultBatches")?.removeClass("hidden");
 }
 
 export async function update(): Promise<void> {
@@ -38,27 +39,29 @@ export async function update(): Promise<void> {
     : limits.regularUser;
   const percentageLimit = Math.round((results?.length / currentLimit) * 100);
 
-  const barsWrapper = $(".pageAccount .resultBatches .bars");
+  const barsWrapper = qs(".pageAccount .resultBatches .bars");
 
   const bars = {
     downloaded: {
-      fill: barsWrapper.find(".downloaded .fill"),
-      rightText: barsWrapper.find(".downloaded.rightText"),
+      fill: barsWrapper?.qs(".downloaded .fill"),
+      rightText: barsWrapper?.qs(".downloaded.rightText"),
     },
     limit: {
-      fill: barsWrapper.find(".limit .fill"),
-      rightText: barsWrapper.find(".limit.rightText"),
+      fill: barsWrapper?.qs(".limit .fill"),
+      rightText: barsWrapper?.qs(".limit.rightText"),
     },
   };
 
-  bars.downloaded.fill.css("width", Math.min(percentageDownloaded, 100) + "%");
-  bars.downloaded.rightText.text(
+  bars.downloaded.fill?.setStyle({
+    width: Math.min(percentageDownloaded, 100) + "%",
+  });
+  bars.downloaded.rightText?.setText(
     `${results?.length} / ${completedTests} (${percentageDownloaded}%)`,
   );
 
   const colors = getTheme();
 
-  bars.limit.fill.css({
+  bars.limit.fill?.setStyle({
     width: Math.min(percentageLimit, 100) + "%",
     background: blendTwoHexColors(
       colors.sub,
@@ -66,12 +69,12 @@ export async function update(): Promise<void> {
       mapRange(percentageLimit, 50, 100, 0, 1),
     ),
   });
-  bars.limit.rightText.text(
+  bars.limit.rightText?.setText(
     `${results?.length} / ${currentLimit} (${percentageLimit}%)`,
   );
 
-  const text = $(".pageAccount .resultBatches > .text");
-  text.text("");
+  const text = qs(".pageAccount .resultBatches > .text");
+  text?.setText("");
 
   if (results.length >= completedTests) {
     disableButton();
@@ -91,15 +94,15 @@ export async function update(): Promise<void> {
 }
 
 export function disableButton(): void {
-  $(".pageAccount .resultBatches button").prop("disabled", true);
+  qs(".pageAccount .resultBatches button")?.disable();
 }
 
 export function enableButton(): void {
-  $(".pageAccount .resultBatches button").prop("disabled", false);
+  qs(".pageAccount .resultBatches button")?.enable();
 }
 
 export function updateButtonText(text: string): void {
-  $(".pageAccount .resultBatches button").text(text);
+  qs(".pageAccount .resultBatches button")?.setText(text);
 }
 
 export function showOrHideIfNeeded(): void {

From 41d50631696916e45871cde3736fd8676dcf7de5 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 21 Jan 2026 16:55:33 +0100
Subject: [PATCH 13/15] fix: warning banner not showing if qs got more than 1
 element

!nuf
---
 frontend/src/ts/utils/dom.ts | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/frontend/src/ts/utils/dom.ts b/frontend/src/ts/utils/dom.ts
index 577de80ca499..7092aa549a09 100644
--- a/frontend/src/ts/utils/dom.ts
+++ b/frontend/src/ts/utils/dom.ts
@@ -3,6 +3,7 @@ import {
   AnimationParams,
   JSAnimation,
 } from "animejs";
+import { addBanner } from "../stores/banners";
 
 /**
  * list of deferred callbacks to be executed once we reached ready state
@@ -1071,19 +1072,11 @@ function checkUniqueSelector(
     console.trace("Stack trace for qs/qsr call:");
     if (document.querySelector("#domUtilsQsWarning") !== null) return;
 
-    const bannerCenter = document.querySelector("#bannerCenter");
-    const warning = document.createElement("div");
-    warning.classList.add("psa", "bad", "content-grid");
-    warning.id = "domUtilsQsWarning";
-    warning.innerHTML = `
-        <div class="container">
-          <div class="icon lefticon"><i class="fas fa-fw fa-exclamation-triangle"></i></div>
-          <div class="text">
-             "Warning: qs/qsr detected selector(s) matching multiple elements, check console for details."
-          </div>
-        </div>
-      </div>`;
-    bannerCenter?.appendChild(warning);
+    addBanner({
+      level: "error",
+      icon: "fas fa-exclamation-triangle",
+      text: "Warning: qs/qsr detected selector(s) matching multiple elements, check console for details.",
+    });
   }
 }
 

From 10845c3eb3d97cd2772d47395b524eea79f0a9f6 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 21 Jan 2026 16:57:49 +0100
Subject: [PATCH 14/15] fix: use qsa to grab all elements

!nuf
---
 .../src/ts/elements/settings/account-settings-notice.ts     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/ts/elements/settings/account-settings-notice.ts b/frontend/src/ts/elements/settings/account-settings-notice.ts
index e29ce44e644e..7b54c68708dc 100644
--- a/frontend/src/ts/elements/settings/account-settings-notice.ts
+++ b/frontend/src/ts/elements/settings/account-settings-notice.ts
@@ -1,7 +1,7 @@
 import { z } from "zod";
 import { LocalStorageWithSchema } from "../../utils/local-storage-with-schema";
 import { navigate } from "../../controllers/route-controller";
-import { qs } from "../../utils/dom";
+import { qs, qsa } from "../../utils/dom";
 
 const ls = new LocalStorageWithSchema({
   key: "accountSettingsMessageDismissed",
@@ -10,11 +10,11 @@ const ls = new LocalStorageWithSchema({
 });
 
 if (ls.get()) {
-  qs(".pageSettings .accountSettingsNotice")?.remove();
+  qsa(".pageSettings .accountSettingsNotice")?.remove();
 }
 
 qs(".pageSettings .accountSettingsNotice .dismissAndGo")?.on("click", () => {
   ls.set(true);
   void navigate("/account-settings");
-  qs(".pageSettings .accountSettingsNotice")?.remove();
+  qsa(".pageSettings .accountSettingsNotice")?.remove();
 });

From ddf905679a0a33dfe602d030f8c85e7f0c4b5482 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 21 Jan 2026 17:01:42 +0100
Subject: [PATCH 15/15] refactor: remove jq from theme-picker

---
 .../src/ts/elements/settings/theme-picker.ts  | 127 ++++++++++--------
 1 file changed, 70 insertions(+), 57 deletions(-)

diff --git a/frontend/src/ts/elements/settings/theme-picker.ts b/frontend/src/ts/elements/settings/theme-picker.ts
index 8d779f3b62e3..125f967e7e95 100644
--- a/frontend/src/ts/elements/settings/theme-picker.ts
+++ b/frontend/src/ts/elements/settings/theme-picker.ts
@@ -140,37 +140,37 @@ export async function fillPresetButtons(): Promise<void> {
 
 export async function fillCustomButtons(): Promise<void> {
   // Update custom theme buttons
-  const customThemesEl = $(
+  const customThemesEl = qs(
     ".pageSettings .section.themes .allCustomThemes.buttons",
-  ).empty();
-  const addButton = $(".pageSettings .section.themes .addCustomThemeButton");
-  const saveButton = $(
+  )?.empty();
+  const addButton = qs(".pageSettings .section.themes .addCustomThemeButton");
+  const saveButton = qs(
     ".pageSettings .section.themes .tabContent.customTheme #saveCustomThemeButton",
   );
 
   if (!isAuthenticated()) {
-    saveButton.text("save");
-    addButton.addClass("hidden");
-    customThemesEl.css("margin-bottom", "0");
+    saveButton?.setText("save");
+    addButton?.addClass("hidden");
+    customThemesEl?.setStyle({ marginBottom: "0" });
     return;
   }
 
-  saveButton.text("save as new");
-  addButton.removeClass("hidden");
+  saveButton?.setText("save as new");
+  addButton?.removeClass("hidden");
 
   const customThemes = DB.getSnapshot()?.customThemes ?? [];
 
   if (customThemes.length === 0) {
-    customThemesEl.css("margin-bottom", "0");
+    customThemesEl?.setStyle({ marginBottom: "0" });
   } else {
-    customThemesEl.css("margin-bottom", "1rem");
+    customThemesEl?.setStyle({ marginBottom: "1rem" });
   }
 
   for (const customTheme of customThemes) {
     const bgColor = customTheme.colors[0];
     const mainColor = customTheme.colors[1];
 
-    customThemesEl.append(
+    customThemesEl?.appendHtml(
       `<div class="customTheme button" customThemeId='${customTheme._id}' 
       style="color:${mainColor};background:${bgColor}">
       <div class="editButton"><i class="fas fa-pen"></i></div>
@@ -220,12 +220,12 @@ function saveCustomThemeColors(): void {
 export function updateActiveTab(): void {
   // Set force to true only when some change for the active tab has taken place
   // Prevent theme buttons from being added twice by doing an update only when the state has changed
-  $(".pageSettings .section.themes .tabs button").removeClass("active");
-  $(
+  qsa(".pageSettings .section.themes .tabs button")?.removeClass("active");
+  qs(
     `.pageSettings .section.themes .tabs button[data-tab="${
       Config.customTheme ? "custom" : "preset"
     }"]`,
-  ).addClass("active");
+  )?.addClass("active");
 
   if (Config.customTheme) {
     void Misc.swapElements(
@@ -251,13 +251,10 @@ export async function updateThemeUI(): Promise<void> {
 // Add events to the DOM
 
 // Handle click on theme: preset or custom tab
-$(".pageSettings .section.themes .tabs button").on("click", (e) => {
-  $(".pageSettings .section.themes .tabs button").removeClass("active");
-  const $target = $(e.currentTarget);
-  $target.addClass("active");
-  // setCustomInputs();
-  //test
-  if ($target.attr("data-tab") === "preset") {
+qsa(".pageSettings .section.themes .tabs button")?.on("click", (e) => {
+  qsa(".pageSettings .section.themes .tabs button")?.removeClass("active");
+  (e.currentTarget as HTMLElement).classList.add("active");
+  if ((e.currentTarget as HTMLElement).getAttribute("data-tab") === "preset") {
     setConfig("customTheme", false);
   } else {
     setConfig("customTheme", true);
@@ -265,45 +262,61 @@ $(".pageSettings .section.themes .tabs button").on("click", (e) => {
 });
 
 // Handle click on custom theme button
-$(".pageSettings").on("click", " .section.themes .customTheme.button", (e) => {
-  // Do not apply if user wanted to delete it
-  if ($(e.target).hasClass("delButton")) return;
-  if ($(e.target).hasClass("editButton")) return;
-  const customThemeId = $(e.currentTarget).attr("customThemeId") ?? "";
-  const theme = DB.getSnapshot()?.customThemes?.find(
-    (e) => e._id === customThemeId,
-  );
-
-  if (theme === undefined) {
-    //this shouldnt happen but typescript needs this check
-    console.error(
-      "Could not find custom theme in snapshot for id ",
-      customThemeId,
+qs(".pageSettings")?.onChild(
+  "click",
+  ".section.themes .customTheme.button",
+  (e) => {
+    // Do not apply if user wanted to delete it
+
+    const target = e.childTarget as HTMLElement;
+
+    if ((e.target as HTMLElement).classList.contains("delButton")) return;
+    if ((e.target as HTMLElement).classList.contains("editButton")) return;
+    const customThemeId = target.getAttribute("customThemeId") ?? "";
+    const theme = DB.getSnapshot()?.customThemes?.find(
+      (e) => e._id === customThemeId,
     );
-    return;
-  }
 
-  setConfig("customThemeColors", theme.colors);
-});
+    if (theme === undefined) {
+      //this shouldnt happen but typescript needs this check
+      console.error(
+        "Could not find custom theme in snapshot for id ",
+        customThemeId,
+      );
+      return;
+    }
+
+    setConfig("customThemeColors", theme.colors);
+  },
+);
 
 // Handle click on favorite preset theme button
-$(".pageSettings").on("click", ".section.themes .theme .favButton", (e) => {
-  const theme = $(e.currentTarget)
-    .parents(".theme.button")
-    .attr("theme") as ThemeName;
-  if (theme !== undefined) {
-    toggleFavourite(theme);
-  } else {
-    console.error(
-      "Could not find the theme attribute attached to the button clicked!",
-    );
-  }
-});
+qs(".pageSettings")?.onChild(
+  "click",
+  ".section.themes .theme .favButton",
+  (e) => {
+    const theme = (e.childTarget as HTMLElement)
+      .closest(".theme.button")
+      ?.getAttribute("theme") as ThemeName;
+    if (theme !== undefined) {
+      toggleFavourite(theme);
+    } else {
+      console.error(
+        "Could not find the theme attribute attached to the button clicked!",
+      );
+    }
+  },
+);
 
 // Handle click on preset theme button
-$(".pageSettings").on("click", ".section.themes .theme.button", (e) => {
-  const theme = $(e.currentTarget).attr("theme") as ThemeName;
-  if (!$(e.target).hasClass("favButton") && theme !== undefined) {
+qs(".pageSettings")?.onChild("click", ".section.themes .theme.button", (e) => {
+  const theme = (e.childTarget as HTMLElement).getAttribute(
+    "theme",
+  ) as ThemeName;
+  if (
+    !(e.childTarget as HTMLElement).classList.contains("favButton") &&
+    theme !== undefined
+  ) {
     setConfig("theme", theme);
   }
 });
@@ -364,7 +377,7 @@ qsa(".pageSettings .section.themes .tabContainer .customTheme input.input")
     }
   });
 
-$(".pageSettings #loadCustomColorsFromPreset").on("click", async () => {
+qs(".pageSettings #loadCustomColorsFromPreset")?.on("click", async () => {
   ThemeController.applyPreset(Config.theme);
   const themeColors = getTheme();
 
@@ -375,7 +388,7 @@ $(".pageSettings #loadCustomColorsFromPreset").on("click", async () => {
     );
 });
 
-$(".pageSettings #saveCustomThemeButton").on("click", async () => {
+qs(".pageSettings #saveCustomThemeButton")?.on("click", async () => {
   saveCustomThemeColors();
   if (isAuthenticated()) {
     const newCustomTheme = {