diff --git a/frontend/src/ts/pages/friends.ts b/frontend/src/ts/pages/friends.ts
index e8b5c0c64..3a3bca05c 100644
--- a/frontend/src/ts/pages/friends.ts
+++ b/frontend/src/ts/pages/friends.ts
@@ -30,7 +30,7 @@ import { Friend, UserNameSchema } from "@monkeytype/schemas/users";
 import * as Loader from "../elements/loader";
 import { LocalStorageWithSchema } from "../utils/local-storage-with-schema";
 import { remoteValidation } from "../utils/remote-validation";
-import { qsr } from "../utils/dom";
+import { qs, qsa, qsr, onDOMReady } from "../utils/dom";
 
 let friendsTable: SortedTable<Friend> | undefined = undefined;
 
@@ -155,12 +155,12 @@ async function fetchPendingConnections(): Promise<void> {
 }
 
 function updatePendingConnections(): void {
-  $(".pageFriends .pendingRequests").addClass("hidden");
+  qsa(".pageFriends .pendingRequests").hide();
 
   if (pendingRequests === undefined || pendingRequests.length === 0) {
-    $(".pageFriends .pendingRequests").addClass("hidden");
+    qsa(".pageFriends .pendingRequests").hide();
   } else {
-    $(".pageFriends .pendingRequests").removeClass("hidden");
+    qsa(".pageFriends .pendingRequests").show();
 
     const html = pendingRequests
       .map(
@@ -193,7 +193,7 @@ function updatePendingConnections(): void {
       )
       .join("\n");
 
-    $(".pageFriends .pendingRequests tbody").html(html);
+    qs(".pageFriends .pendingRequests tbody")?.setHtml(html);
   }
 }
 
@@ -208,17 +208,17 @@ async function fetchFriends(): Promise<void> {
 }
 
 function updateFriends(): void {
-  $(".pageFriends .friends .nodata").addClass("hidden");
-  $(".pageFriends .friends table").addClass("hidden");
+  qs(".pageFriends .friends .nodata")?.hide();
+  qs(".pageFriends .friends table")?.hide();
 
-  $(".pageFriends .friends .error").addClass("hidden");
+  qs(".pageFriends .friends .error")?.hide();
 
   if (friendsList === undefined || friendsList.length === 0) {
-    $(".pageFriends .friends table").addClass("hidden");
-    $(".pageFriends .friends .nodata").removeClass("hidden");
+    qs(".pageFriends .friends table")?.hide();
+    qs(".pageFriends .friends .nodata")?.show();
   } else {
-    $(".pageFriends .friends table").removeClass("hidden");
-    $(".pageFriends .friends .nodata").addClass("hidden");
+    qs(".pageFriends .friends table")?.show();
+    qs(".pageFriends .friends .nodata")?.hide();
 
     if (friendsTable === undefined) {
       friendsTable = new SortedTable<Friend>({
@@ -386,19 +386,20 @@ function formatStreak(length?: number, prefix?: string): string {
     : "-";
 }
 
-$(".pageFriends button.friendAdd").on("click", () => {
+qs(".pageFriends button.friendAdd")?.on("click", () => {
   addFriendModal.show(undefined, {});
 });
 
 // need to set the listener for action buttons on the table because the table content is getting replaced
-$(".pageFriends .pendingRequests table").on("click", async (e) => {
-  const action = Array.from(e.target.classList).find((it) =>
+qs(".pageFriends .pendingRequests table")?.on("click", async (e) => {
+  const target = e.target as HTMLElement;
+  const action = Array.from(target.classList).find((it) =>
     ["accepted", "rejected", "blocked"].includes(it),
   ) as "accepted" | "rejected" | "blocked";
 
   if (action === undefined) return;
 
-  const row = e.target.closest("tr") as HTMLElement;
+  const row = target.closest("tr") as HTMLElement;
   const id = row.dataset["id"];
   if (id === undefined) {
     throw new Error("Cannot find id of target.");
@@ -462,14 +463,15 @@ $(".pageFriends .pendingRequests table").on("click", async (e) => {
   }
 });
 // need to set the listener for action buttons on the table because the table content is getting replaced
-$(".pageFriends .friends table").on("click", async (e) => {
-  const action = Array.from(e.target.classList).find((it) =>
+qs(".pageFriends .friends table")?.on("click", async (e) => {
+  const target = e.target as HTMLElement;
+  const action = Array.from(target.classList).find((it) =>
     ["remove"].includes(it),
   );
 
   if (action === undefined) return;
 
-  const row = e.target.closest("tr") as HTMLElement;
+  const row = target.closest("tr") as HTMLElement;
   const connectionId = row.dataset["connectionId"];
   if (connectionId === undefined) {
     throw new Error("Cannot find id of target.");
@@ -551,7 +553,7 @@ export const page = new Page<undefined>({
   },
 });
 
-$(() => {
+onDOMReady(() => {
   Skeleton.save("pageFriends");
 });