diff --git a/frontend/src/html/popups.html b/frontend/src/html/popups.html
index 67cc9a165..21e399bf5 100644
--- a/frontend/src/html/popups.html
+++ b/frontend/src/html/popups.html
@@ -9,6 +9,7 @@
     <div class="title">Dev options</div>
     <button class="generateData">generate data</button>
     <button class="toggleMediaQueryDebug">toggle media query debug</button>
+    <button class="showTestNotifications">show test notifications</button>
   </div>
 </dialog>
 
diff --git a/frontend/src/ts/modals/dev-options.ts b/frontend/src/ts/modals/dev-options.ts
index 65166ccf2..4e8f7ca49 100644
--- a/frontend/src/ts/modals/dev-options.ts
+++ b/frontend/src/ts/modals/dev-options.ts
@@ -14,6 +14,20 @@ async function setup(modalEl: HTMLElement): Promise<void> {
   modalEl.querySelector(".generateData")?.addEventListener("click", () => {
     showPopup("devGenerateData");
   });
+  modalEl
+    .querySelector(".showTestNotifications")
+    ?.addEventListener("click", () => {
+      Notifications.add("This is a test", 1, {
+        duration: 0,
+      });
+      Notifications.add("This is a test", 0, {
+        duration: 0,
+      });
+      Notifications.add("This is a test", -1, {
+        duration: 0,
+      });
+      void modal.hide();
+    });
   modalEl
     .querySelector(".toggleMediaQueryDebug")
     ?.addEventListener("click", () => {