diff --git a/frontend/src/html/popups.html b/frontend/src/html/popups.html
index adc69206cda9..ef9f5bedf0c9 100644
--- a/frontend/src/html/popups.html
+++ b/frontend/src/html/popups.html
@@ -56,6 +56,7 @@
     <button class="toggleMediaQueryDebug">toggle media query debug</button>
     <button class="showTestNotifications">show test notifications</button>
     <button class="showRealWordsInput">show real words input</button>
+    <button class="xpBarTest">xp bar test</button>
   </div>
 </dialog>
 
diff --git a/frontend/src/ts/modals/dev-options.ts b/frontend/src/ts/modals/dev-options.ts
index 3bbdf4c0e817..e1e6f3a6745f 100644
--- a/frontend/src/ts/modals/dev-options.ts
+++ b/frontend/src/ts/modals/dev-options.ts
@@ -5,6 +5,7 @@ import * as Notifications from "../elements/notifications";
 import { setMediaQueryDebugLevel } from "../ui";
 import { signIn } from "../controllers/account-controller";
 import * as Loader from "../elements/loader";
+import { update } from "../elements/xp-bar";
 
 let mediaQueryDebugLevel = 0;
 
@@ -68,6 +69,20 @@ async function setup(modalEl: HTMLElement): Promise<void> {
     );
     void modal.hide();
   });
+  modalEl.querySelector(".xpBarTest")?.addEventListener("click", () => {
+    setTimeout(() => {
+      void update(1000000, 20800, {
+        base: 100,
+        fullAccuracy: 200,
+        accPenalty: 300,
+        quote: 400,
+        punctuation: 500,
+        streak: 10_000,
+        configMultiplier: 2,
+      });
+    }, 500);
+    void modal.hide();
+  });
 }
 
 const modal = new AnimatedModal({