diff --git a/frontend/package.json b/frontend/package.json
index 73180d0afa0f..bcda3e352565 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@date-fns/utc": "1.2.0",
+    "@leonabcd123/modern-caps-lock": "2.0.3",
     "@monkeytype/contracts": "workspace:*",
     "@monkeytype/funbox": "workspace:*",
     "@monkeytype/schemas": "workspace:*",
diff --git a/frontend/src/ts/test/caps-warning.ts b/frontend/src/ts/test/caps-warning.ts
index 87a7ed847ac7..97a329059923 100644
--- a/frontend/src/ts/test/caps-warning.ts
+++ b/frontend/src/ts/test/caps-warning.ts
@@ -1,13 +1,12 @@
 import Config from "../config";
-import * as Misc from "../utils/misc";
 import { qsr } from "../utils/dom";
+import { onCapsLockChange } from "@leonabcd123/modern-caps-lock";
 
 const el = qsr("#capsWarning");
+let visible = false;
 
 export let capsState = false;
 
-let visible = false;
-
 function show(): void {
   if (!visible) {
     el.removeClass("hidden");
@@ -22,16 +21,7 @@ function hide(): void {
   }
 }
 
-function update(event: KeyboardEvent): void {
-  if (event.key === "CapsLock" && capsState !== null) {
-    capsState = !capsState;
-  } else {
-    const modState = event.getModifierState?.("CapsLock");
-    if (modState !== undefined) {
-      capsState = modState;
-    }
-  }
-
+function updateCapsWarningVisibility(): void {
   try {
     if (Config.capsLockWarning && capsState) {
       show();
@@ -41,8 +31,7 @@ function update(event: KeyboardEvent): void {
   } catch {}
 }
 
-document.addEventListener("keyup", update);
-
-document.addEventListener("keydown", (event) => {
-  if (Misc.isMac()) update(event);
+onCapsLockChange((currentCapsState: boolean) => {
+  capsState = currentCapsState;
+  updateCapsWarningVisibility();
 });
diff --git a/frontend/src/ts/utils/misc.ts b/frontend/src/ts/utils/misc.ts
index 0d4939206bb7..b5f321a51450 100644
--- a/frontend/src/ts/utils/misc.ts
+++ b/frontend/src/ts/utils/misc.ts
@@ -716,13 +716,17 @@ function isPlatform(searchTerm: string | RegExp): boolean {
   }
 }
 
-export function isLinux(): boolean {
-  return isPlatform("Linux");
-}
+//function isWindows(): boolean {
+//return isPlatform("Win");
+//}
 
-export function isMac(): boolean {
-  return isPlatform("Mac");
-}
+//function isLinux(): boolean {
+//return isPlatform("Linux");
+//}
+
+//function isMac(): boolean {
+//return isPlatform("Mac");
+//}
 
 export function isMacLike(): boolean {
   return isPlatform(/Mac|iPod|iPhone|iPad/);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1a63eaa93366..897e43b29117 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -261,6 +261,9 @@ importers:
       '@date-fns/utc':
         specifier: 1.2.0
         version: 1.2.0
+      '@leonabcd123/modern-caps-lock':
+        specifier: 2.0.3
+        version: 2.0.3
       '@monkeytype/contracts':
         specifier: workspace:*
         version: link:../packages/contracts
@@ -2522,6 +2525,9 @@ packages:
   '@kwsites/promise-deferred@1.1.1':
     resolution: {integrity: sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==}
 
+  '@leonabcd123/modern-caps-lock@2.0.3':
+    resolution: {integrity: sha512-g4wPe1tHAR7hxOrvUwzxCrxBD+pjI1vEe+STXgsL2jQS95MXxge7h4afKXTLKguOtPc6gqK0Ljle4FLI60rWhw==}
+
   '@mapbox/node-pre-gyp@1.0.11':
     resolution: {integrity: sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==}
     hasBin: true
@@ -12513,6 +12519,8 @@ snapshots:
 
   '@kwsites/promise-deferred@1.1.1': {}
 
+  '@leonabcd123/modern-caps-lock@2.0.3': {}
+
   '@mapbox/node-pre-gyp@1.0.11(encoding@0.1.13)':
     dependencies:
       detect-libc: 2.0.3
@@ -16765,7 +16773,7 @@ snapshots:
 
   http-proxy-agent@7.0.2:
     dependencies:
-      agent-base: 7.1.1
+      agent-base: 7.1.4
       debug: 4.4.3
     transitivePeerDependencies:
       - supports-color