From 4b011487f73c48257e29530d8c5d128b6434fad8 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Tue, 7 Jul 2026 18:50:18 +0200
Subject: [PATCH 1/4] chore: fix formatting

---
 frontend/src/ts/components/pages/test/Keymap.tsx     | 2 +-
 frontend/storybook/stories/AccountXpBar.stories.tsx  | 3 ++-
 frontend/storybook/stories/Anime.stories.tsx         | 3 ++-
 frontend/storybook/stories/AnimeGroup.stories.tsx    | 3 ++-
 frontend/storybook/stories/AnimePresence.stories.tsx | 3 ++-
 frontend/storybook/stories/AnimeSwitch.stories.tsx   | 3 ++-
 frontend/storybook/stories/AsyncContent.stories.tsx  | 3 ++-
 frontend/storybook/stories/Balloon.stories.tsx       | 3 ++-
 frontend/storybook/stories/Checkbox.stories.tsx      | 3 ++-
 frontend/storybook/stories/DataTable.stories.tsx     | 3 ++-
 frontend/storybook/stories/Form.stories.tsx          | 3 ++-
 frontend/storybook/stories/Header.stories.tsx        | 3 ++-
 frontend/storybook/stories/Nav.stories.tsx           | 3 ++-
 frontend/storybook/stories/SlimSelect.stories.tsx    | 3 ++-
 14 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index 4194e840dd20..8250656d212b 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -99,7 +99,7 @@ function KeyboardDefinitionRenderer(props: {
 }) {
   return (
     <div
-      class="w-fit xxs:zoom-(--kb-zoom-xxs) xs:zoom-(--kb-zoom-xs) sm:zoom-(--kb-zoom-sm) md:zoom-(--kb-zoom-md) lg:zoom-(--kb-zoom-lg) xl:zoom-(--kb-zoom-xl) 2xl:zoom-(--kb-zoom-2xl)"
+      class="xxs:zoom-(--kb-zoom-xxs) xs:zoom-(--kb-zoom-xs) sm:zoom-(--kb-zoom-sm) md:zoom-(--kb-zoom-md) lg:zoom-(--kb-zoom-lg) xl:zoom-(--kb-zoom-xl) 2xl:zoom-(--kb-zoom-2xl) w-fit"
       style={{
         "--kb-zoom-xxs": Math.min(getConfig.keymapSize, 0.5),
         "--kb-zoom-xs": Math.min(getConfig.keymapSize, 0.7),
diff --git a/frontend/storybook/stories/AccountXpBar.stories.tsx b/frontend/storybook/stories/AccountXpBar.stories.tsx
index 1f503a40214f..ac9a1a703db0 100644
--- a/frontend/storybook/stories/AccountXpBar.stories.tsx
+++ b/frontend/storybook/stories/AccountXpBar.stories.tsx
@@ -1,8 +1,9 @@
 import type { XpBreakdown } from "@monkeytype/schemas/results";
 
-import preview from "#.storybook/preview";
 import { onMount } from "solid-js";
 
+import preview from "#.storybook/preview";
+
 import { AccountXpBar } from "../../src/ts/components/layout/header/AccountXpBar";
 import { setXpBarData, setAnimatedLevel } from "../../src/ts/states/header";
 
diff --git a/frontend/storybook/stories/Anime.stories.tsx b/frontend/storybook/stories/Anime.stories.tsx
index c261c70009ea..a2ed36d22d07 100644
--- a/frontend/storybook/stories/Anime.stories.tsx
+++ b/frontend/storybook/stories/Anime.stories.tsx
@@ -1,7 +1,8 @@
-import preview from "#.storybook/preview";
 import { AnimationParams } from "animejs";
 import { Component, createSignal } from "solid-js";
 
+import preview from "#.storybook/preview";
+
 import { Anime } from "../../src/ts/components/common/anime/Anime";
 
 const meta = preview.meta({
diff --git a/frontend/storybook/stories/AnimeGroup.stories.tsx b/frontend/storybook/stories/AnimeGroup.stories.tsx
index 2ee544caca9c..6680a6d7858a 100644
--- a/frontend/storybook/stories/AnimeGroup.stories.tsx
+++ b/frontend/storybook/stories/AnimeGroup.stories.tsx
@@ -1,7 +1,8 @@
-import preview from "#.storybook/preview";
 import { AnimationParams } from "animejs";
 import { Component, createSignal, For } from "solid-js";
 
+import preview from "#.storybook/preview";
+
 import { AnimeGroup } from "../../src/ts/components/common/anime/AnimeGroup";
 
 const meta = preview.meta({
diff --git a/frontend/storybook/stories/AnimePresence.stories.tsx b/frontend/storybook/stories/AnimePresence.stories.tsx
index f0e5aed8bdcd..a342645c803a 100644
--- a/frontend/storybook/stories/AnimePresence.stories.tsx
+++ b/frontend/storybook/stories/AnimePresence.stories.tsx
@@ -1,7 +1,8 @@
-import preview from "#.storybook/preview";
 import { AnimationParams } from "animejs";
 import { Component, createSignal, For, Show } from "solid-js";
 
+import preview from "#.storybook/preview";
+
 import { Anime } from "../../src/ts/components/common/anime/Anime";
 import { AnimePresence } from "../../src/ts/components/common/anime/AnimePresence";
 
diff --git a/frontend/storybook/stories/AnimeSwitch.stories.tsx b/frontend/storybook/stories/AnimeSwitch.stories.tsx
index 04ef572ad758..94fd1a3b2afc 100644
--- a/frontend/storybook/stories/AnimeSwitch.stories.tsx
+++ b/frontend/storybook/stories/AnimeSwitch.stories.tsx
@@ -1,6 +1,7 @@
-import preview from "#.storybook/preview";
 import { Component, createSignal } from "solid-js";
 
+import preview from "#.storybook/preview";
+
 import { AnimeMatch } from "../../src/ts/components/common/anime/AnimeMatch";
 import { AnimeSwitch } from "../../src/ts/components/common/anime/AnimeSwitch";
 
diff --git a/frontend/storybook/stories/AsyncContent.stories.tsx b/frontend/storybook/stories/AsyncContent.stories.tsx
index 8a6f71393417..a7e00de380c2 100644
--- a/frontend/storybook/stories/AsyncContent.stories.tsx
+++ b/frontend/storybook/stories/AsyncContent.stories.tsx
@@ -1,10 +1,11 @@
-import preview from "#.storybook/preview";
 import {
   QueryClient,
   QueryClientProvider,
   useQuery,
 } from "@tanstack/solid-query";
 
+import preview from "#.storybook/preview";
+
 import AsyncContent from "../../src/ts/components/common/AsyncContent";
 
 const queryClient = new QueryClient({
diff --git a/frontend/storybook/stories/Balloon.stories.tsx b/frontend/storybook/stories/Balloon.stories.tsx
index bf72c7423bb5..a5f3b276f3a3 100644
--- a/frontend/storybook/stories/Balloon.stories.tsx
+++ b/frontend/storybook/stories/Balloon.stories.tsx
@@ -1,6 +1,7 @@
-import preview from "#.storybook/preview";
 import { Component } from "solid-js";
 
+import preview from "#.storybook/preview";
+
 import { Balloon } from "../../src/ts/components/common/Balloon";
 
 const meta = preview.meta({
diff --git a/frontend/storybook/stories/Checkbox.stories.tsx b/frontend/storybook/stories/Checkbox.stories.tsx
index 8b3603700ab4..c92870caedf1 100644
--- a/frontend/storybook/stories/Checkbox.stories.tsx
+++ b/frontend/storybook/stories/Checkbox.stories.tsx
@@ -1,7 +1,8 @@
-import preview from "#.storybook/preview";
 import { AnyFieldApi } from "@tanstack/solid-form";
 import { Accessor, Component, createSignal } from "solid-js";
 
+import preview from "#.storybook/preview";
+
 import { Checkbox } from "../../src/ts/components/ui/form/Checkbox";
 
 function createFieldMock(options: { name?: string; value?: boolean }) {
diff --git a/frontend/storybook/stories/DataTable.stories.tsx b/frontend/storybook/stories/DataTable.stories.tsx
index 5d72ceaf0c1b..dc894c2ede9e 100644
--- a/frontend/storybook/stories/DataTable.stories.tsx
+++ b/frontend/storybook/stories/DataTable.stories.tsx
@@ -1,6 +1,7 @@
-import preview from "#.storybook/preview";
 import { Component, createSignal } from "solid-js";
 
+import preview from "#.storybook/preview";
+
 import {
   DataTable,
   DataTableColumnDef,
diff --git a/frontend/storybook/stories/Form.stories.tsx b/frontend/storybook/stories/Form.stories.tsx
index cbb7c92183e3..7bef7fb92cfe 100644
--- a/frontend/storybook/stories/Form.stories.tsx
+++ b/frontend/storybook/stories/Form.stories.tsx
@@ -1,8 +1,9 @@
-import preview from "#.storybook/preview";
 import { createForm } from "@tanstack/solid-form";
 import { createSignal } from "solid-js";
 import { z } from "zod";
 
+import preview from "#.storybook/preview";
+
 import { Checkbox } from "../../src/ts/components/ui/form/Checkbox";
 import { InputField } from "../../src/ts/components/ui/form/InputField";
 import { SubmitButton } from "../../src/ts/components/ui/form/SubmitButton";
diff --git a/frontend/storybook/stories/Header.stories.tsx b/frontend/storybook/stories/Header.stories.tsx
index 818a871c5160..34e27ec6eeae 100644
--- a/frontend/storybook/stories/Header.stories.tsx
+++ b/frontend/storybook/stories/Header.stories.tsx
@@ -1,6 +1,7 @@
-import preview from "#.storybook/preview";
 import { QueryClient, QueryClientProvider } from "@tanstack/solid-query";
 
+import preview from "#.storybook/preview";
+
 import { Header } from "../../src/ts/components/layout/header/Header";
 
 const queryClient = new QueryClient({
diff --git a/frontend/storybook/stories/Nav.stories.tsx b/frontend/storybook/stories/Nav.stories.tsx
index 15bda19f652f..2df26fa0fc48 100644
--- a/frontend/storybook/stories/Nav.stories.tsx
+++ b/frontend/storybook/stories/Nav.stories.tsx
@@ -1,6 +1,7 @@
-import preview from "#.storybook/preview";
 import { QueryClient, QueryClientProvider } from "@tanstack/solid-query";
 
+import preview from "#.storybook/preview";
+
 import { Nav } from "../../src/ts/components/layout/header/Nav";
 
 const queryClient = new QueryClient({
diff --git a/frontend/storybook/stories/SlimSelect.stories.tsx b/frontend/storybook/stories/SlimSelect.stories.tsx
index d6817410f3cc..c3575b681c1b 100644
--- a/frontend/storybook/stories/SlimSelect.stories.tsx
+++ b/frontend/storybook/stories/SlimSelect.stories.tsx
@@ -1,7 +1,8 @@
-import preview from "#.storybook/preview";
 import { Component, createSignal } from "solid-js";
 import { fn } from "storybook/test";
 
+import preview from "#.storybook/preview";
+
 import SlimSelect from "../../src/ts/components/ui/SlimSelect";
 
 const meta = preview.meta({

From eec443292ba99d1c91691c843e7d8bc934729e9d Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Tue, 7 Jul 2026 19:33:48 +0200
Subject: [PATCH 2/4] fix: modal tab navigation when quick restart is set to
 tab not working correctly

---
 frontend/src/ts/components/common/AnimatedModal.tsx | 1 +
 frontend/src/ts/input/hotkeys/utils.ts              | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/ts/components/common/AnimatedModal.tsx b/frontend/src/ts/components/common/AnimatedModal.tsx
index 1c504cafc9e4..bad4d6c7c639 100644
--- a/frontend/src/ts/components/common/AnimatedModal.tsx
+++ b/frontend/src/ts/components/common/AnimatedModal.tsx
@@ -334,6 +334,7 @@ export function AnimatedModal(props: AnimatedModalProps): JSXElement {
           props.modalClass,
         )}
         ref={modalRef}
+        tabIndex={-1}
         onScroll={(e) => props.onScroll?.(e)}
       >
         <Show when={props.title !== undefined && props.title !== ""}>
diff --git a/frontend/src/ts/input/hotkeys/utils.ts b/frontend/src/ts/input/hotkeys/utils.ts
index 5093d103f0da..add98cfc994a 100644
--- a/frontend/src/ts/input/hotkeys/utils.ts
+++ b/frontend/src/ts/input/hotkeys/utils.ts
@@ -51,7 +51,8 @@ function isInteractiveElementFocused(): boolean {
     document.activeElement?.tagName === "SELECT" ||
     document.activeElement?.tagName === "BUTTON" ||
     document.activeElement?.classList.contains("button") === true ||
-    document.activeElement?.classList.contains("textButton") === true
+    document.activeElement?.classList.contains("textButton") === true ||
+    document.activeElement?.classList.contains("modal") === true
   );
 }
 

From a224275a5dcfcc5af38aaa766c7fc1956d7fe537 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <fehmer@users.noreply.github.com>
Date: Tue, 7 Jul 2026 19:37:43 +0200
Subject: [PATCH 3/4] refactor: solid modals with recaptcha (@fehmer) (#8187)

Co-authored-by: Miodec <jack@monkeytype.com>
---
 .../components/common/AnimatedModal.spec.tsx  |   9 +
 frontend/src/html/popups.html                 |  46 ----
 frontend/src/styles/popups.scss               |  87 --------
 .../ts/components/common/AnimatedModal.tsx    |  38 ++--
 .../components/modals/ForgotPasswordModal.tsx |  96 +++++++++
 .../components/modals/GoogleSignUpModal.tsx   | 166 +++++++++++++++
 frontend/src/ts/components/modals/Modals.tsx  |   6 +
 .../ts/components/modals/QuoteReportModal.tsx |  58 ++----
 .../ts/components/modals/QuoteSearchModal.tsx |   7 -
 .../ts/components/modals/QuoteSubmitModal.tsx |  53 +++--
 .../modals/RegisterCaptchaModal.tsx           |  52 ++---
 .../ts/components/modals/UserReportModal.tsx  | 147 +++++++++++++
 .../src/ts/components/pages/login/Login.tsx   |   4 +-
 .../components/pages/profile/UserDetails.tsx  |  19 +-
 .../src/ts/components/ui/form/Captcha.tsx     |  53 +++++
 .../ts/components/ui/form/TextareaField.tsx   |   1 +
 .../src/ts/controllers/captcha-controller.ts  |  54 -----
 frontend/src/ts/index.ts                      |   1 -
 frontend/src/ts/modals/forgot-password.ts     | 100 ---------
 frontend/src/ts/modals/google-sign-up.ts      | 196 ------------------
 frontend/src/ts/modals/user-report.ts         | 157 --------------
 frontend/src/ts/states/modals.ts              |   5 +-
 frontend/src/ts/states/quote-report.ts        |   8 -
 frontend/src/ts/states/user-report.ts         |   5 +
 packages/contracts/src/quotes.ts              |   3 +-
 packages/contracts/src/users.ts               |  14 +-
 26 files changed, 606 insertions(+), 779 deletions(-)
 create mode 100644 frontend/src/ts/components/modals/ForgotPasswordModal.tsx
 create mode 100644 frontend/src/ts/components/modals/GoogleSignUpModal.tsx
 create mode 100644 frontend/src/ts/components/modals/UserReportModal.tsx
 create mode 100644 frontend/src/ts/components/ui/form/Captcha.tsx
 delete mode 100644 frontend/src/ts/controllers/captcha-controller.ts
 delete mode 100644 frontend/src/ts/modals/forgot-password.ts
 delete mode 100644 frontend/src/ts/modals/google-sign-up.ts
 delete mode 100644 frontend/src/ts/modals/user-report.ts
 create mode 100644 frontend/src/ts/states/user-report.ts

diff --git a/frontend/__tests__/components/common/AnimatedModal.spec.tsx b/frontend/__tests__/components/common/AnimatedModal.spec.tsx
index 6b6d3540fbb1..3eb79f9a145e 100644
--- a/frontend/__tests__/components/common/AnimatedModal.spec.tsx
+++ b/frontend/__tests__/components/common/AnimatedModal.spec.tsx
@@ -2,9 +2,11 @@ import { render } from "@solidjs/testing-library";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 
 import { AnimatedModal } from "../../../src/ts/components/common/AnimatedModal";
+import { hideModal, ModalId, showModal } from "../../../src/ts/states/modals";
 
 describe("AnimatedModal", () => {
   beforeEach(() => {
+    showModal("Support" as ModalId);
     vi.clearAllMocks();
 
     // Mock dialog methods that don't exist in jsdom
@@ -57,6 +59,13 @@ describe("AnimatedModal", () => {
     ).toHaveTextContent("Test Content");
   });
 
+  it("doesnt render children if not open", () => {
+    hideModal("Support" as ModalId);
+    const { modalDiv } = renderModal({});
+
+    expect(modalDiv).not.toBeInTheDocument();
+  });
+
   it("has escape handler attached", () => {
     const { dialog } = renderModal({});
 
diff --git a/frontend/src/html/popups.html b/frontend/src/html/popups.html
index 2f920af7ec60..2a8f560ac554 100644
--- a/frontend/src/html/popups.html
+++ b/frontend/src/html/popups.html
@@ -1,12 +1,3 @@
-<dialog id="forgotPasswordModal" class="modalWrapper hidden">
-  <div class="modal">
-    <div class="title">Forgot password</div>
-    <input type="text" placeholder="email" />
-    <div class="g-recaptcha"></div>
-    <!-- <button>send</button> -->
-  </div>
-</dialog>
-
 <div id="videoAdPopupWrapper" class="popupWrapper hidden">
   <div id="videoAdPopup">
     <div class="preloader">
@@ -84,43 +75,6 @@
   </div>
 </dialog>
 
-<dialog id="googleSignUpModal" class="modalWrapper hidden">
-  <form class="modal">
-    <div class="title">Account name</div>
-    <div class="text">Please enter a username before continuing</div>
-    <input type="text" placeholder="username" />
-    <div class="captcha"></div>
-    <button>continue</button>
-  </form>
-</dialog>
-<dialog id="userReportModal" class="modalWrapper hidden">
-  <div class="modal">
-    <div class="title">Report a user</div>
-    <div class="text">
-      Please report users responsibly and add comments in English only. Misuse
-      may result in you losing access to this feature.
-    </div>
-    <label>user</label>
-    <div class="user"></div>
-    <label>reason</label>
-    <select name="report-reason" class="reason">
-      <option value="Inappropriate name">Inappropriate name</option>
-      <option value="Inappropriate bio">Inappropriate bio</option>
-      <option value="Inappropriate social links">
-        Inappropriate social links
-      </option>
-      <option value="Suspected cheating">Suspected cheating</option>
-    </select>
-    <label>comment</label>
-    <textarea class="comment" autocomplete="off"></textarea>
-    <div
-      class="g-recaptcha"
-      data-sitekey="6Lc-V8McAAAAAJ7s6LGNe7MBZnRiwbsbiWts87aj"
-    ></div>
-    <button>Report</button>
-  </div>
-</dialog>
-
 <dialog id="editResultTagsModal" class="modalWrapper hidden">
   <div class="modal">
     <div class="title">Edit result tags</div>
diff --git a/frontend/src/styles/popups.scss b/frontend/src/styles/popups.scss
index f0fa36a4f34c..39443219b03c 100644
--- a/frontend/src/styles/popups.scss
+++ b/frontend/src/styles/popups.scss
@@ -75,12 +75,6 @@ body.darkMode {
   }
 }
 
-#forgotPasswordModal {
-  .modal {
-    max-width: 400px;
-  }
-}
-
 #practiseWordsModal {
   .modal {
     max-width: 400px;
@@ -114,54 +108,6 @@ body.darkMode {
   }
 }
 
-#googleSignUpModal {
-  .modal {
-    max-width: 425px;
-    overflow: unset;
-    .captcha {
-      display: flex;
-      justify-content: center;
-    }
-    // .inputAndIndicator {
-    //   input {
-    //     width: 100%;
-    //   }
-    //   position: relative;
-    //   .checkStatus {
-    //     width: 2.25rem;
-    //     height: 2.25rem;
-    //     position: absolute;
-    //     right: 0;
-    //     top: 0;
-    //     /* background: red; */
-    //     display: grid;
-    //     grid-template-columns: 2.25rem;
-    //     grid-template-rows: 2.25rem;
-    //     place-items: center center;
-    //     cursor: pointer;
-
-    //     .checking,
-    //     .available,
-    //     .unavailable,
-    //     .taken {
-    //       grid-column: 1/2;
-    //       grid-row: 1/2;
-    //     }
-    //     .checking {
-    //       color: var(--sub-color);
-    //     }
-    //     .available {
-    //       color: var(--main-color);
-    //     }
-    //     .unavailable,
-    //     .taken {
-    //       color: var(--error-color);
-    //     }
-    //   }
-    // }
-  }
-}
-
 #videoAdPopupWrapper {
   display: flex;
   padding: 2rem;
@@ -259,39 +205,6 @@ body.darkMode {
   }
 }
 
-#importExportSettingsModal {
-  .modal {
-    max-width: 900px;
-  }
-}
-
-#userReportModal {
-  .modal {
-    max-width: 800px;
-
-    label {
-      color: var(--sub-color);
-      margin-bottom: -0.5rem;
-    }
-
-    // .text {
-    //   // color: var(--sub-color);
-    // }
-
-    .user {
-      font-size: 1.5rem;
-    }
-
-    textarea {
-      resize: vertical;
-      width: 100%;
-      padding: 10px;
-      line-height: 1.2rem;
-      min-height: 5rem;
-    }
-  }
-}
-
 #editResultTagsModal {
   .modal {
     max-width: 600px;
diff --git a/frontend/src/ts/components/common/AnimatedModal.tsx b/frontend/src/ts/components/common/AnimatedModal.tsx
index bad4d6c7c639..5ed76aa10e22 100644
--- a/frontend/src/ts/components/common/AnimatedModal.tsx
+++ b/frontend/src/ts/components/common/AnimatedModal.tsx
@@ -3,10 +3,10 @@ import { JSXElement, ParentProps, Show, onCleanup } from "solid-js";
 import { createEffectOn } from "../../hooks/effects";
 import { useRefWithUtils } from "../../hooks/useRefWithUtils";
 import {
-  hideModal as storeHideModal,
   ModalId,
-  isModalOpen,
   isModalChained,
+  isModalOpen,
+  hideModal as storeHideModal,
 } from "../../states/modals";
 import { cn } from "../../utils/cn";
 import { applyReducedMotion } from "../../utils/misc";
@@ -328,20 +328,26 @@ export function AnimatedModal(props: AnimatedModalProps): JSXElement {
       onKeyDown={handleKeyDown}
       onMouseDown={handleBackdropClick}
     >
-      <div
-        class={cn(
-          "modal pointer-events-auto grid h-max max-h-full w-full max-w-md gap-4 overflow-auto overscroll-y-none rounded-double bg-bg p-4 text-text ring-4 ring-sub-alt sm:p-8",
-          props.modalClass,
-        )}
-        ref={modalRef}
-        tabIndex={-1}
-        onScroll={(e) => props.onScroll?.(e)}
-      >
-        <Show when={props.title !== undefined && props.title !== ""}>
-          <div class="text-2xl text-sub">{props.title}</div>
-        </Show>
-        {props.children}
-      </div>
+      {/*
+      Don't show the modal content on non-visible modals.
+      If the modal contains data from e.g. a collection the collection would init on page load instead of when it is needed.
+      */}
+      <Show when={isModalOpen(props.id)}>
+        <div
+          class={cn(
+            "modal pointer-events-auto grid h-max max-h-full w-full max-w-md gap-4 overflow-auto overscroll-y-none rounded-double bg-bg p-4 text-text ring-4 ring-sub-alt sm:p-8",
+            props.modalClass,
+          )}
+          ref={modalRef}
+          tabIndex={-1}
+          onScroll={(e) => props.onScroll?.(e)}
+        >
+          <Show when={props.title !== undefined && props.title !== ""}>
+            <div class="text-2xl text-sub">{props.title}</div>
+          </Show>
+          {props.children}
+        </div>
+      </Show>
     </dialog>
   );
 }
diff --git a/frontend/src/ts/components/modals/ForgotPasswordModal.tsx b/frontend/src/ts/components/modals/ForgotPasswordModal.tsx
new file mode 100644
index 000000000000..c66b819d5d51
--- /dev/null
+++ b/frontend/src/ts/components/modals/ForgotPasswordModal.tsx
@@ -0,0 +1,96 @@
+import { UserEmailSchema } from "@monkeytype/schemas/users";
+import { createForm } from "@tanstack/solid-form";
+
+import Ape from "../../ape";
+import { hideLoaderBar, showLoaderBar } from "../../states/loader-bar";
+import { hideModal } from "../../states/modals";
+import {
+  showErrorNotification,
+  showNoticeNotification,
+  showSuccessNotification,
+} from "../../states/notifications";
+import { AnimatedModal } from "../common/AnimatedModal";
+import { Captcha } from "../ui/form/Captcha";
+import { InputField } from "../ui/form/InputField";
+import { SubmitButton } from "../ui/form/SubmitButton";
+import { allFieldsMandatory, fromSchema } from "../ui/form/utils";
+
+export function ForgotPasswordModal() {
+  const form = createForm(() => ({
+    defaultValues: {
+      email: "",
+      captcha: "",
+    },
+    onSubmitInvalid: () => {
+      showNoticeNotification("Please fill in all fields");
+    },
+    onSubmit: async ({ value }) => {
+      await apply(value);
+      form.reset();
+    },
+    validators: {
+      onChange: allFieldsMandatory(),
+    },
+  }));
+
+  return (
+    <AnimatedModal id="ForgotPassword" title="Forgot password">
+      <form
+        class="flex flex-col justify-center gap-4"
+        onSubmit={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          void form.handleSubmit();
+        }}
+      >
+        <form.Field
+          name="email"
+          validators={{
+            onChange: fromSchema(UserEmailSchema, {
+              convert: (it) => it?.trim(),
+            }),
+          }}
+          children={(field) => (
+            <InputField field={field} placeholder="email" type="email" />
+          )}
+        />
+
+        <form.Field
+          name="captcha"
+          children={(field) => <Captcha field={field} />}
+        />
+
+        <SubmitButton form={form} text="request password reset" />
+      </form>
+    </AnimatedModal>
+  );
+}
+
+async function apply(options: {
+  email: string;
+  captcha: string;
+}): Promise<void> {
+  const { email, captcha } = options;
+
+  if (email === undefined || email === "") {
+    showNoticeNotification("Please enter your email address");
+    return;
+  }
+
+  showLoaderBar();
+  const result = await Ape.users.forgotPasswordEmail({
+    body: { email, captcha },
+  });
+
+  hideLoaderBar();
+  if (result.status !== 200) {
+    showErrorNotification(
+      `Failed to send password reset email: ${result.body.message}`,
+    );
+    return;
+  }
+
+  showSuccessNotification(result.body.message, { durationMs: 5000 });
+
+  hideModal("ForgotPassword");
+}
diff --git a/frontend/src/ts/components/modals/GoogleSignUpModal.tsx b/frontend/src/ts/components/modals/GoogleSignUpModal.tsx
new file mode 100644
index 000000000000..d4a29b4128c0
--- /dev/null
+++ b/frontend/src/ts/components/modals/GoogleSignUpModal.tsx
@@ -0,0 +1,166 @@
+import { UserNameSchema } from "@monkeytype/schemas/users";
+import { createForm } from "@tanstack/solid-form";
+import {
+  getAdditionalUserInfo,
+  sendEmailVerification,
+  updateProfile,
+  UserCredential,
+} from "firebase/auth";
+
+import Ape from "../../ape";
+import { loadUser, signOut } from "../../auth";
+import { authEvent } from "../../events/auth";
+import { googleSignUpEvent } from "../../events/google-sign-up";
+import { resetIgnoreAuthCallback, setUserState } from "../../firebase";
+import { hideLoaderBar, showLoaderBar } from "../../states/loader-bar";
+import { hideModal, ModalId, showModal } from "../../states/modals";
+import {
+  showErrorNotification,
+  showNoticeNotification,
+  showSuccessNotification,
+} from "../../states/notifications";
+import { remoteValidationForm } from "../../utils/remote-validation";
+import { AnimatedModal } from "../common/AnimatedModal";
+import { Captcha } from "../ui/form/Captcha";
+import { InputField } from "../ui/form/InputField";
+import { SubmitButton } from "../ui/form/SubmitButton";
+import { allFieldsMandatory, fromSchema } from "../ui/form/utils";
+
+const modalId: ModalId = "GoogleSignup";
+let signedInUser: UserCredential | undefined = undefined;
+
+export function GoogleSignupModal() {
+  const form = createForm(() => ({
+    defaultValues: {
+      username: "",
+      captcha: "",
+    },
+    onSubmit: async ({ value }) => apply(value),
+    onSubmitInvalid: () => {
+      showNoticeNotification("Please fill in all fields");
+    },
+    validators: {
+      onChange: allFieldsMandatory(),
+    },
+  }));
+
+  return (
+    <AnimatedModal
+      id={modalId}
+      title="Account name"
+      afterHide={() => void afterHide()}
+    >
+      <p>Please enter a username before continuing</p>
+      <form
+        class="flex flex-col justify-center gap-4"
+        onSubmit={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          void form.handleSubmit();
+        }}
+      >
+        <form.Field
+          name="username"
+          validators={{
+            onChange: fromSchema(UserNameSchema),
+            onChangeAsyncDebounceMs: 1000,
+            onChangeAsync: remoteValidationForm(
+              async (name: string) =>
+                Ape.users.getNameAvailability({ params: { name } }),
+              { check: (data) => data.available || "Name not available" },
+            ),
+          }}
+          children={(field) => (
+            <InputField field={field} placeholder="username" type="input" />
+          )}
+        />
+        <form.Field
+          name="captcha"
+          children={(field) => (
+            <Captcha
+              field={field}
+              class="flex w-full flex-row justify-center"
+            />
+          )}
+        />
+
+        <SubmitButton form={form} text="continue" />
+      </form>
+    </AnimatedModal>
+  );
+}
+
+async function afterHide(): Promise<void> {
+  resetIgnoreAuthCallback();
+  if (signedInUser !== undefined) {
+    showNoticeNotification("Sign up process cancelled", {
+      durationMs: 5000,
+    });
+    if (getAdditionalUserInfo(signedInUser)?.isNewUser) {
+      await Ape.users.delete();
+      await signedInUser?.user.delete().catch(() => {
+        //user might be deleted already by the server
+      });
+    }
+    signOut();
+    signedInUser = undefined;
+  }
+}
+async function apply(options: {
+  username: string;
+  captcha: string;
+}): Promise<void> {
+  const { username: name, captcha } = options;
+  if (!signedInUser) {
+    showErrorNotification(
+      "Missing user credential. Please close the popup and try again.",
+    );
+    return;
+  }
+  if (!captcha) {
+    showNoticeNotification("Please complete the captcha");
+    return;
+  }
+
+  showLoaderBar();
+  try {
+    if (name.length === 0) throw new Error("Name cannot be empty");
+    const response = await Ape.users.create({ body: { name, captcha } });
+    if (response.status !== 200) {
+      throw new Error(`Failed to create user: ${response.body.message}`);
+    }
+
+    setUserState(signedInUser.user);
+    await updateProfile(signedInUser.user, { displayName: name });
+    await sendEmailVerification(signedInUser.user);
+    showSuccessNotification("Account created");
+    await loadUser(signedInUser.user);
+
+    authEvent.dispatch({
+      type: "authStateChanged",
+      data: { isUserSignedIn: true, loadPromise: Promise.resolve() },
+    });
+    signedInUser = undefined;
+  } catch (e) {
+    console.log(e);
+    showErrorNotification("Failed to sign in with Google", { error: e });
+    if (signedInUser && getAdditionalUserInfo(signedInUser)?.isNewUser) {
+      await Ape.users.delete();
+      await signedInUser?.user.delete().catch(() => {
+        //user might be deleted already by the server
+      });
+    }
+    signOut();
+    signedInUser = undefined;
+  } finally {
+    hideLoaderBar();
+    hideModal(modalId);
+  }
+}
+
+googleSignUpEvent.subscribe((data) => {
+  if (data.signedInUser !== undefined && data.isNewUser) {
+    signedInUser = data.signedInUser;
+    showModal(modalId);
+  }
+});
diff --git a/frontend/src/ts/components/modals/Modals.tsx b/frontend/src/ts/components/modals/Modals.tsx
index 81b34905e493..49d255ad8d00 100644
--- a/frontend/src/ts/components/modals/Modals.tsx
+++ b/frontend/src/ts/components/modals/Modals.tsx
@@ -6,6 +6,8 @@ import { CookiesModal } from "./CookiesModal";
 import { CustomTestDurationModal } from "./CustomTestDurationModal";
 import { CustomTextModal } from "./CustomTextModal";
 import { CustomWordAmountModal } from "./CustomWordAmountModal";
+import { ForgotPasswordModal } from "./ForgotPasswordModal";
+import { GoogleSignupModal } from "./GoogleSignUpModal";
 import { LastSignedOutResultModal } from "./LastSignedOutResultModal";
 import { MobileTestConfigModal } from "./MobileTestConfigModal";
 import { AddPresetModal } from "./preset/AddPresetModal";
@@ -18,6 +20,7 @@ import { ShareTestSettings } from "./ShareTestSettings";
 import { SimpleModal } from "./SimpleModal";
 import { StreakHourOffsetModal } from "./StreakHourOffsetModal";
 import { SupportModal } from "./SupportModal";
+import { UserReportModal } from "./UserReportModal";
 import { VersionHistoryModal } from "./VersionHistoryModal";
 
 export function Modals(): JSXElement {
@@ -42,6 +45,9 @@ export function Modals(): JSXElement {
       <ViewApeKeyModal />
       <LastSignedOutResultModal />
       <StreakHourOffsetModal />
+      <GoogleSignupModal />
+      <ForgotPasswordModal />
+      <UserReportModal />
     </>
   );
 }
diff --git a/frontend/src/ts/components/modals/QuoteReportModal.tsx b/frontend/src/ts/components/modals/QuoteReportModal.tsx
index d7e0b1bcd6dc..11b47eb0231e 100644
--- a/frontend/src/ts/components/modals/QuoteReportModal.tsx
+++ b/frontend/src/ts/components/modals/QuoteReportModal.tsx
@@ -4,45 +4,43 @@ import { JSXElement, createSignal } from "solid-js";
 
 import Ape from "../../ape";
 import { Config } from "../../config/store";
-import * as CaptchaController from "../../controllers/captcha-controller";
 import QuotesController from "../../controllers/quotes-controller";
-import { useRef } from "../../hooks/useRef";
 import { hideLoaderBar, showLoaderBar } from "../../states/loader-bar";
 import { hideModalAndClearChain } from "../../states/modals";
 import {
-  showNoticeNotification,
   showErrorNotification,
+  showNoticeNotification,
   showSuccessNotification,
 } from "../../states/notifications";
 import { quoteId } from "../../states/quote-report";
 import { removeLanguageSize } from "../../utils/strings";
 import { AnimatedModal } from "../common/AnimatedModal";
-import { Button } from "../common/Button";
 import { Separator } from "../common/Separator";
+import { Captcha } from "../ui/form/Captcha";
 import { LabeledField } from "../ui/form/LabeledField";
-import { fieldMandatory } from "../ui/form/utils";
+import { SubmitButton } from "../ui/form/SubmitButton";
+import { TextareaField } from "../ui/form/TextareaField";
+import { allFieldsMandatory, fieldMandatory } from "../ui/form/utils";
 import SlimSelect from "../ui/SlimSelect";
 
 export function QuoteReportModal(): JSXElement {
-  const [captchaRef, captchaEl] = useRef<HTMLDivElement>();
   const [quoteText, setQuoteText] = createSignal("");
-  const [captchaComplete, setCaptchaComplete] = createSignal(false);
 
   const form = createForm(() => ({
     defaultValues: {
       reason: "Grammatical error" as QuoteReportReason,
       comment: "",
+      captcha: "",
     },
     onSubmit: async ({ value }) => {
-      const captchaResponse = CaptchaController.getResponse("quoteReportModal");
-      if (!captchaResponse) {
+      const id = quoteId().toString();
+      const quoteLanguage = removeLanguageSize(Config.language);
+
+      if (value.captcha === "") {
         showNoticeNotification("Please complete the captcha");
         return;
       }
 
-      const id = quoteId().toString();
-      const quoteLanguage = removeLanguageSize(Config.language);
-
       if (id === "" || id === "0") {
         showNoticeNotification("Please select a quote");
         return;
@@ -63,7 +61,7 @@ export function QuoteReportModal(): JSXElement {
           quoteLanguage,
           reason: value.reason,
           comment: value.comment,
-          captcha: captchaResponse,
+          captcha: value.captcha,
         },
       });
       hideLoaderBar();
@@ -79,15 +77,18 @@ export function QuoteReportModal(): JSXElement {
     onSubmitInvalid: () => {
       showNoticeNotification("Please fill in all fields");
     },
+    validators: {
+      onChange: allFieldsMandatory(),
+    },
   }));
 
   const handleBeforeShow = async (): Promise<void> => {
-    setCaptchaComplete(false);
     form.update({
       ...form.options,
       defaultValues: {
         reason: "Grammatical error" as QuoteReportReason,
         comment: "",
+        captcha: "",
       },
     });
     form.reset();
@@ -99,18 +100,6 @@ export function QuoteReportModal(): JSXElement {
     setQuoteText(quote?.text ?? "");
   };
 
-  const handleAfterShow = (): void => {
-    const el = captchaEl();
-    if (el === undefined) return;
-    CaptchaController.render(el, "quoteReportModal", () => {
-      setCaptchaComplete(true);
-    });
-  };
-
-  const handleAfterHide = (): void => {
-    CaptchaController.reset("quoteReportModal");
-  };
-
   return (
     <AnimatedModal
       modalClass="w-full max-w-[750px]"
@@ -118,8 +107,6 @@ export function QuoteReportModal(): JSXElement {
       mode="dialog"
       title="Report a quote"
       beforeShow={handleBeforeShow}
-      afterShow={handleAfterShow}
-      afterHide={handleAfterHide}
     >
       <form
         class="grid gap-4"
@@ -175,13 +162,11 @@ export function QuoteReportModal(): JSXElement {
           children={(field) => (
             <LabeledField label="comment">
               <div class="relative">
-                <textarea
+                <TextareaField
+                  field={field}
                   class="bg-bg-secondary min-h-50 w-full rounded p-2 text-text"
-                  value={field().state.value}
-                  onInput={(e) => field().handleChange(e.currentTarget.value)}
-                  onBlur={() => field().handleBlur()}
                   autocomplete="off"
-                ></textarea>
+                />
                 <div
                   class={`absolute right-2 bottom-2 text-xs ${250 - field().state.value.length < 0 ? "text-error" : "text-sub"}`}
                 >
@@ -191,8 +176,11 @@ export function QuoteReportModal(): JSXElement {
             </LabeledField>
           )}
         />
-        <div ref={captchaRef}></div>
-        <Button type="submit" text="report" disabled={!captchaComplete()} />
+        <form.Field
+          name="captcha"
+          children={(field) => <Captcha field={field} />}
+        />
+        <SubmitButton form={form} text="report" />
       </form>
     </AnimatedModal>
   );
diff --git a/frontend/src/ts/components/modals/QuoteSearchModal.tsx b/frontend/src/ts/components/modals/QuoteSearchModal.tsx
index 35e26fbd9dfb..1e5e587d3074 100644
--- a/frontend/src/ts/components/modals/QuoteSearchModal.tsx
+++ b/frontend/src/ts/components/modals/QuoteSearchModal.tsx
@@ -12,7 +12,6 @@ import { z } from "zod";
 import Ape from "../../ape";
 import { setConfig } from "../../config/setters";
 import { Config } from "../../config/store";
-import { isCaptchaAvailable } from "../../controllers/captcha-controller";
 import QuotesController, { Quote } from "../../controllers/quotes-controller";
 import * as DB from "../../db";
 import { createDebouncedEffectOn } from "../../hooks/effects";
@@ -425,12 +424,6 @@ export function QuoteSearchModal(): JSXElement {
   };
 
   const handleSubmitClick = async (): Promise<void> => {
-    if (!isCaptchaAvailable()) {
-      showErrorNotification(
-        "Captcha is not available. Please refresh the page or contact support if this issue persists.",
-      );
-      return;
-    }
     showLoaderBar();
     const getSubmissionEnabled = await Ape.quotes.isSubmissionEnabled();
     const isEnabled =
diff --git a/frontend/src/ts/components/modals/QuoteSubmitModal.tsx b/frontend/src/ts/components/modals/QuoteSubmitModal.tsx
index 931b60f8122a..c2838c75e2f8 100644
--- a/frontend/src/ts/components/modals/QuoteSubmitModal.tsx
+++ b/frontend/src/ts/components/modals/QuoteSubmitModal.tsx
@@ -1,3 +1,4 @@
+import { QuoteTextSchema } from "@monkeytype/contracts/quotes";
 import { Language } from "@monkeytype/schemas/languages";
 import { createForm } from "@tanstack/solid-form";
 import { JSXElement } from "solid-js";
@@ -5,26 +6,28 @@ import { JSXElement } from "solid-js";
 import Ape from "../../ape";
 import { Config } from "../../config/store";
 import { LanguageGroupNames } from "../../constants/languages";
-import * as CaptchaController from "../../controllers/captcha-controller";
-import { useRef } from "../../hooks/useRef";
 import { hideLoaderBar, showLoaderBar } from "../../states/loader-bar";
 import { hideModalAndClearChain } from "../../states/modals";
 import {
-  showNoticeNotification,
   showErrorNotification,
+  showNoticeNotification,
   showSuccessNotification,
 } from "../../states/notifications";
 import { removeLanguageSize } from "../../utils/strings";
 import { AnimatedModal } from "../common/AnimatedModal";
-import { Button } from "../common/Button";
+import { Captcha } from "../ui/form/Captcha";
 import { InputField } from "../ui/form/InputField";
 import { LabeledField } from "../ui/form/LabeledField";
-import { fieldMandatory } from "../ui/form/utils";
+import { SubmitButton } from "../ui/form/SubmitButton";
+import { TextareaField } from "../ui/form/TextareaField";
+import {
+  allFieldsMandatory,
+  fieldMandatory,
+  fromSchema,
+} from "../ui/form/utils";
 import SlimSelect from "../ui/SlimSelect";
 
 export function QuoteSubmitModal(): JSXElement {
-  const [captchaRef, captchaEl] = useRef<HTMLDivElement>();
-
   const languageOptions = LanguageGroupNames.filter(
     (g) => g !== "swiss_german",
   ).map((g) => ({
@@ -37,17 +40,16 @@ export function QuoteSubmitModal(): JSXElement {
       text: "",
       source: "",
       language: removeLanguageSize(Config.language) as string,
+      captcha: "",
     },
     onSubmit: async ({ value }) => {
-      const captcha = CaptchaController.getResponse("submitQuote");
-
       showLoaderBar();
       const response = await Ape.quotes.add({
         body: {
           text: value.text,
           source: value.source,
           language: value.language as Language,
-          captcha,
+          captcha: value.captcha,
         },
       });
       hideLoaderBar();
@@ -58,33 +60,29 @@ export function QuoteSubmitModal(): JSXElement {
       }
 
       showSuccessNotification("Quote submitted.");
-      CaptchaController.reset("submitQuote");
       hideModalAndClearChain("QuoteSubmit");
     },
     onSubmitInvalid: () => {
       showNoticeNotification("Please fill in all fields");
     },
+    validators: {
+      onChange: allFieldsMandatory(),
+    },
   }));
 
   const handleAfterShow = (): void => {
-    const el = captchaEl();
-    if (el === undefined) return;
-    CaptchaController.render(el, "submitQuote");
     form.update({
       ...form.options,
       defaultValues: {
         text: "",
         source: "",
         language: removeLanguageSize(Config.language) as string,
+        captcha: "",
       },
     });
     form.reset();
   };
 
-  const handleAfterHide = (): void => {
-    CaptchaController.reset("submitQuote");
-  };
-
   return (
     <AnimatedModal
       id="QuoteSubmit"
@@ -92,7 +90,6 @@ export function QuoteSubmitModal(): JSXElement {
       title="Submit a quote"
       focusFirstInput={true}
       afterShow={handleAfterShow}
-      afterHide={handleAfterHide}
     >
       <form
         class="grid gap-4"
@@ -122,18 +119,15 @@ export function QuoteSubmitModal(): JSXElement {
         </ul>
         <form.Field
           name="text"
-          validators={{ onChange: fieldMandatory<string>() }}
+          validators={{ onChange: fromSchema(QuoteTextSchema) }}
           children={(field) => (
             <LabeledField label="quote">
               <div class="relative">
-                <textarea
+                <TextareaField
+                  field={field}
                   class="bg-bg-secondary w-full rounded p-2 text-text"
-                  value={field().state.value}
-                  onInput={(e) => field().handleChange(e.currentTarget.value)}
-                  onBlur={() => field().handleBlur()}
                   autocomplete="off"
-                  dir="auto"
-                ></textarea>
+                />
                 <div
                   class={`absolute right-2 bottom-2 text-xs ${250 - field().state.value.length < 0 ? "text-error" : "text-sub"}`}
                 >
@@ -170,8 +164,11 @@ export function QuoteSubmitModal(): JSXElement {
             </LabeledField>
           )}
         />
-        <div ref={captchaRef}></div>
-        <Button type="submit" text="submit" />
+        <form.Field
+          name="captcha"
+          children={(field) => <Captcha field={field} />}
+        />
+        <SubmitButton form={form} text="submit" />
       </form>
     </AnimatedModal>
   );
diff --git a/frontend/src/ts/components/modals/RegisterCaptchaModal.tsx b/frontend/src/ts/components/modals/RegisterCaptchaModal.tsx
index 8fcd76951bdd..bf6f45f4d93f 100644
--- a/frontend/src/ts/components/modals/RegisterCaptchaModal.tsx
+++ b/frontend/src/ts/components/modals/RegisterCaptchaModal.tsx
@@ -1,15 +1,10 @@
+import { createForm } from "@tanstack/solid-form";
 import { JSXElement } from "solid-js";
 
-import {
-  isCaptchaAvailable,
-  render as renderCaptcha,
-  reset as resetCaptcha,
-} from "../../controllers/captcha-controller";
-import { useRef } from "../../hooks/useRef";
 import { hideModal, showModal } from "../../states/modals";
-import { showErrorNotification } from "../../states/notifications";
 import { promiseWithResolvers } from "../../utils/misc";
 import { AnimatedModal } from "../common/AnimatedModal";
+import { Captcha } from "../ui/form/Captcha";
 
 const {
   promise: captchaPromise,
@@ -18,40 +13,45 @@ const {
 } = promiseWithResolvers<string | undefined>();
 
 export async function showRegisterCaptchaModal(): Promise<string | undefined> {
-  if (!isCaptchaAvailable()) {
-    showErrorNotification(
-      "Could not show register popup: Captcha is not available. This could happen due to a blocked or failed network request. Please refresh the page or contact support if this issue persists.",
-    );
-    return undefined;
-  }
-
   resetCaptchaPromise();
   showModal("RegisterCaptcha");
   return captchaPromise;
 }
 
 export function RegisterCaptchaModal(): JSXElement {
-  const [captchaRef, captchaEl] = useRef<HTMLDivElement>();
-
-  const handleBeforeShow = (): void => {
-    const el = captchaEl();
-    if (el === undefined) return;
-    resetCaptcha("register");
-    renderCaptcha(el, "register", (token) => {
-      resolveCaptcha(token);
+  const form = createForm(() => ({
+    defaultValues: { captcha: "" },
+    onSubmit: async ({ value }) => {
+      resolveCaptcha(value.captcha);
       hideModal("RegisterCaptcha");
-    });
-  };
+    },
+  }));
 
   return (
     <AnimatedModal
       id="RegisterCaptcha"
       mode="dialog"
       modalClass="p-4 sm:p-4 w-max"
+      beforeShow={() => resetCaptchaPromise()}
       afterHide={() => resolveCaptcha(undefined)}
-      beforeShow={handleBeforeShow}
     >
-      <div ref={captchaRef}></div>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          void form.handleSubmit();
+        }}
+      >
+        <form.Field
+          name="captcha"
+          children={(field) => (
+            <Captcha
+              field={field}
+              onSuccess={(captcha) => void form.handleSubmit({ captcha })}
+            />
+          )}
+        />
+      </form>
     </AnimatedModal>
   );
 }
diff --git a/frontend/src/ts/components/modals/UserReportModal.tsx b/frontend/src/ts/components/modals/UserReportModal.tsx
new file mode 100644
index 000000000000..5260bca06ddd
--- /dev/null
+++ b/frontend/src/ts/components/modals/UserReportModal.tsx
@@ -0,0 +1,147 @@
+import { ReportUserCommentSchema } from "@monkeytype/contracts/users";
+import { ReportUserReason } from "@monkeytype/schemas/users";
+import { createForm } from "@tanstack/solid-form";
+
+import Ape from "../../ape";
+import { hideLoaderBar, showLoaderBar } from "../../states/loader-bar";
+import { hideModal } from "../../states/modals";
+import {
+  showErrorNotification,
+  showNoticeNotification,
+  showSuccessNotification,
+} from "../../states/notifications";
+import { getUserToReport, setUserToReport } from "../../states/user-report";
+import { AnimatedModal } from "../common/AnimatedModal";
+import { Captcha } from "../ui/form/Captcha";
+import { LabeledField } from "../ui/form/LabeledField";
+import { SubmitButton } from "../ui/form/SubmitButton";
+import { TextareaField } from "../ui/form/TextareaField";
+import { allFieldsMandatory, fromSchema } from "../ui/form/utils";
+import SlimSelect from "../ui/SlimSelect";
+
+export function UserReportModal() {
+  const form = createForm(() => ({
+    defaultValues: {
+      uid: getUserToReport()?.uid ?? "",
+      reason: "Inappropriate name",
+      comment: "",
+      captcha: "",
+    },
+    onSubmit: async ({ value }) => {
+      await apply(value);
+      form.reset();
+    },
+    onSubmitInvalid: () => {
+      showNoticeNotification("Please fill in all fields");
+    },
+    validators: {
+      onChange: allFieldsMandatory(),
+    },
+  }));
+  return (
+    <AnimatedModal
+      modalClass="max-w-3xl"
+      id="UserReport"
+      title={`Report user ${getUserToReport()?.name}`}
+    >
+      <p>
+        Please report users responsibly and add comments in English only. Misuse
+        may result in you losing access to this feature.
+      </p>
+
+      <form
+        class="flex flex-col gap-4"
+        onSubmit={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          void form.handleSubmit();
+        }}
+      >
+        <form.Field
+          name="reason"
+          children={(field) => (
+            <LabeledField label="reason">
+              <SlimSelect
+                appendTo="container"
+                options={[
+                  { value: "Inappropriate name", text: "Inappropriate name" },
+                  { value: "Inappropriate bio", text: "Inappropriate bio" },
+                  {
+                    value: "Inappropriate social links",
+                    text: "Inappropriate social links",
+                  },
+                  ...[
+                    !getUserToReport()?.lbOptOut
+                      ? {
+                          value: "Suspected cheating",
+                          text: "Suspected cheating",
+                        }
+                      : undefined,
+                  ],
+                ].filter((it) => it !== undefined)}
+                selected={field().state.value}
+                onChange={(val) => field().handleChange(val as string)}
+                settings={{ showSearch: false }}
+              />
+            </LabeledField>
+          )}
+        />
+
+        <form.Field
+          name="comment"
+          validators={{ onChange: fromSchema(ReportUserCommentSchema) }}
+          children={(field) => (
+            <LabeledField label="comment">
+              <div class="relative">
+                <TextareaField
+                  field={field}
+                  class="bg-bg-secondary min-h-50 w-full rounded p-2 text-text"
+                  autocomplete="off"
+                />
+                <div
+                  class={`absolute right-2 bottom-2 text-xs ${250 - field().state.value.length < 0 ? "text-error" : "text-sub"}`}
+                >
+                  {250 - field().state.value.length}
+                </div>
+              </div>
+            </LabeledField>
+          )}
+        />
+        <form.Field
+          name="captcha"
+          children={(field) => <Captcha field={field} />}
+        />
+        <SubmitButton form={form} text="report" class="w-full" />
+      </form>
+    </AnimatedModal>
+  );
+}
+
+async function apply(options: {
+  uid: string;
+  reason: string;
+  comment: string;
+  captcha: string;
+}): Promise<void> {
+  const { uid, reason, comment, captcha } = options;
+
+  showLoaderBar();
+  const response = await Ape.users.report({
+    body: {
+      uid,
+      reason: reason as ReportUserReason,
+      comment,
+      captcha,
+    },
+  });
+  hideLoaderBar();
+
+  if (response.status !== 200) {
+    showErrorNotification("Failed to report user", { response });
+    return;
+  }
+
+  showSuccessNotification("Report submitted. Thank you!");
+  setUserToReport(null);
+  hideModal("UserReport");
+}
diff --git a/frontend/src/ts/components/pages/login/Login.tsx b/frontend/src/ts/components/pages/login/Login.tsx
index 62deece48b6e..029266645103 100644
--- a/frontend/src/ts/components/pages/login/Login.tsx
+++ b/frontend/src/ts/components/pages/login/Login.tsx
@@ -7,12 +7,12 @@ import {
   signIn,
   signInWithProvider,
 } from "../../../auth";
-import * as ForgotPasswordModal from "../../../modals/forgot-password";
 import {
   disableLoginPageInputs,
   enableLoginPageInputs,
   getLoginPageInputsEnabled,
 } from "../../../states/login";
+import { showModal } from "../../../states/modals";
 import {
   showErrorNotification,
   showNoticeNotification,
@@ -153,7 +153,7 @@ export function Login(): JSXElement {
         text="forgot password?"
         variant="text"
         class="text justify-end text-xs"
-        onClick={() => ForgotPasswordModal.show()}
+        onClick={() => showModal("ForgotPassword")}
         disabled={!getLoginPageInputsEnabled()}
       />
     </div>
diff --git a/frontend/src/ts/components/pages/profile/UserDetails.tsx b/frontend/src/ts/components/pages/profile/UserDetails.tsx
index 1824eac6ed2f..70fe2fbb8b3b 100644
--- a/frontend/src/ts/components/pages/profile/UserDetails.tsx
+++ b/frontend/src/ts/components/pages/profile/UserDetails.tsx
@@ -16,12 +16,12 @@ import { For, JSXElement, Show } from "solid-js";
 
 import { addConnection, hasConnection } from "../../../collections/connections";
 import { Snapshot } from "../../../constants/default-snapshot";
-import * as UserReportModal from "../../../modals/user-report";
 import { bp } from "../../../states/breakpoints";
 import { getUserId, isAuthenticated } from "../../../states/core";
 import { showModal } from "../../../states/modals";
 import { showNoticeNotification } from "../../../states/notifications";
 import { getLastResult } from "../../../states/snapshot";
+import { setUserToReport } from "../../../states/user-report";
 import { cn } from "../../../utils/cn";
 import { secondsToString } from "../../../utils/date-and-time";
 import { formatXp, getXpDetails } from "../../../utils/levels";
@@ -136,13 +136,16 @@ function ActionButtons(props: {
                 },
               )}
               fa={{ icon: "fa-flag", fixedWidth: true }}
-              onClick={() =>
-                void UserReportModal.show({
-                  uid: props.profile.uid as string,
-                  name: props.profile.name,
-                  lbOptOut: props.profile.lbOptOut ?? false,
-                })
-              }
+              onClick={() => {
+                if (!isAuthenticated()) {
+                  showNoticeNotification(
+                    "You must be logged in to submit a report",
+                  );
+                  return;
+                }
+                setUserToReport(props.profile);
+                showModal("UserReport");
+              }}
             />
           </Show>
           <Show when={showFriendsButton()}>
diff --git a/frontend/src/ts/components/ui/form/Captcha.tsx b/frontend/src/ts/components/ui/form/Captcha.tsx
new file mode 100644
index 000000000000..1d4af3e2b70d
--- /dev/null
+++ b/frontend/src/ts/components/ui/form/Captcha.tsx
@@ -0,0 +1,53 @@
+import { AnyFieldApi } from "@tanstack/solid-form";
+import { Accessor, onMount } from "solid-js";
+import { envConfig } from "virtual:env-config";
+
+import { useRefWithUtils } from "../../../hooks/useRefWithUtils";
+import { showErrorNotification } from "../../../states/notifications";
+import { ElementWithUtils } from "../../../utils/dom";
+
+const errorText =
+  "Captcha is not available. This could happen due to a blocked or failed network request. Please refresh the page or contact support if this issue persists.";
+
+type Grecaptcha = {
+  render: (
+    element: HTMLElement,
+    options: { sitekey: string; callback?: (responseToken: string) => void },
+  ) => number;
+  reset: (widgetId: number) => void;
+  getResponse: (widgetId: number) => string;
+};
+
+export function Captcha(props: {
+  field: Accessor<AnyFieldApi>;
+  class?: string;
+  onSuccess?: (responseToken: string) => void;
+}) {
+  const [captchaRef, captchaEl] = useRefWithUtils<HTMLDivElement>();
+
+  onMount(() => {
+    const el = captchaEl() as ElementWithUtils<HTMLDivElement>;
+
+    const grecaptcha = getGrecaptcha();
+    if (grecaptcha === undefined) {
+      el.setText(errorText);
+    }
+    getGrecaptcha()?.render(el.native, {
+      sitekey: envConfig.recaptchaSiteKey,
+      callback: (token) => {
+        props.field().setValue(token);
+        props.onSuccess?.(token);
+      },
+    });
+  });
+  return <div ref={captchaRef} class={props.class}></div>;
+}
+
+function getGrecaptcha(): Grecaptcha | undefined {
+  if (!("grecaptcha" in window)) {
+    showErrorNotification(errorText);
+    return undefined;
+  }
+
+  return (window as { grecaptcha?: Grecaptcha }).grecaptcha;
+}
diff --git a/frontend/src/ts/components/ui/form/TextareaField.tsx b/frontend/src/ts/components/ui/form/TextareaField.tsx
index 555027c597ce..c1d6deaf9714 100644
--- a/frontend/src/ts/components/ui/form/TextareaField.tsx
+++ b/frontend/src/ts/components/ui/form/TextareaField.tsx
@@ -37,6 +37,7 @@ export function TextareaField(props: {
         maxLength={props.maxLength}
         onKeyDown={(e) => props.onKeyDown?.(e)}
         onKeyPress={(e) => props.onKeyPress?.(e)}
+        dir="auto"
       ></textarea>
       <Show when={props.field().options.validators}>
         <FieldIndicator field={props.field()} />
diff --git a/frontend/src/ts/controllers/captcha-controller.ts b/frontend/src/ts/controllers/captcha-controller.ts
deleted file mode 100644
index 7b85f6942e05..000000000000
--- a/frontend/src/ts/controllers/captcha-controller.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { envConfig } from "virtual:env-config";
-const siteKey = envConfig.recaptchaSiteKey;
-
-const captchas: Record<string, number> = {};
-
-type Grecaptcha = {
-  render: (
-    element: HTMLElement,
-    options: { sitekey: string; callback?: (responseToken: string) => void },
-  ) => number;
-  reset: (widgetId: number) => void;
-  getResponse: (widgetId: number) => string;
-};
-
-function getGrecaptcha(): Grecaptcha {
-  if (!("grecaptcha" in window)) {
-    throw new Error("grecaptcha is not defined");
-  }
-
-  return window.grecaptcha as Grecaptcha;
-}
-
-export function isCaptchaAvailable(): boolean {
-  return "grecaptcha" in window;
-}
-
-export function render(
-  element: HTMLElement,
-  id: string,
-  callback?: (responseToken: string) => void,
-): void {
-  if (captchas[id] !== undefined && captchas[id] !== null) {
-    return;
-  }
-  const widgetId = getGrecaptcha().render(element, {
-    sitekey: siteKey,
-    callback,
-  });
-  captchas[id] = widgetId;
-}
-
-export function reset(id: string): void {
-  if (captchas[id] === undefined || captchas[id] === null) {
-    return;
-  }
-  getGrecaptcha().reset(captchas[id]);
-}
-
-export function getResponse(id: string): string {
-  if (captchas[id] === undefined || captchas[id] === null) {
-    return "";
-  }
-  return getGrecaptcha().getResponse(captchas[id]);
-}
diff --git a/frontend/src/ts/index.ts b/frontend/src/ts/index.ts
index d814affb5af9..c20fa982111a 100644
--- a/frontend/src/ts/index.ts
+++ b/frontend/src/ts/index.ts
@@ -6,7 +6,6 @@ import "solid-devtools";
 
 import "./event-handlers/global";
 import "./event-handlers/test";
-import "./modals/google-sign-up";
 
 import { init } from "./firebase";
 import * as Logger from "./utils/logger";
diff --git a/frontend/src/ts/modals/forgot-password.ts b/frontend/src/ts/modals/forgot-password.ts
deleted file mode 100644
index 3862e2949003..000000000000
--- a/frontend/src/ts/modals/forgot-password.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-import * as CaptchaController from "../controllers/captcha-controller";
-import AnimatedModal from "../utils/animated-modal";
-import Ape from "../ape/index";
-import {
-  showNoticeNotification,
-  showErrorNotification,
-  showSuccessNotification,
-} from "../states/notifications";
-
-import { showLoaderBar, hideLoaderBar } from "../states/loader-bar";
-import { UserEmailSchema } from "@monkeytype/schemas/users";
-import { ElementWithUtils } from "../utils/dom";
-
-export function show(): void {
-  if (!CaptchaController.isCaptchaAvailable()) {
-    showErrorNotification(
-      "Could not show forgot password popup: Captcha is not available. This could happen due to a blocked or failed network request. Please refresh the page or contact support if this issue persists.",
-    );
-    return;
-  }
-
-  void modal.show({
-    mode: "dialog",
-    focusFirstInput: true,
-    beforeAnimation: async (modal) => {
-      CaptchaController.reset("forgotPasswordModal");
-      CaptchaController.render(
-        modal.qsr(".g-recaptcha").native,
-        "forgotPasswordModal",
-        async () => {
-          await submit();
-        },
-      );
-    },
-  });
-}
-
-async function submit(): Promise<void> {
-  const captchaResponse = CaptchaController.getResponse("forgotPasswordModal");
-  if (!captchaResponse) {
-    showNoticeNotification("Please complete the captcha");
-    return;
-  }
-
-  const email =
-    modal.getModal().qs<HTMLInputElement>("input")?.getValue()?.trim() ?? "";
-
-  if (email === "") {
-    showNoticeNotification("Please enter your email address");
-    CaptchaController.reset("forgotPasswordModal");
-    return;
-  }
-
-  const validation = UserEmailSchema.safeParse(email);
-  if (!validation.success) {
-    showNoticeNotification("Please enter a valid email address");
-    CaptchaController.reset("forgotPasswordModal");
-    return;
-  }
-
-  showLoaderBar();
-  void Ape.users
-    .forgotPasswordEmail({
-      body: { email, captcha: captchaResponse },
-    })
-    .then((result) => {
-      hideLoaderBar();
-      if (result.status !== 200) {
-        showErrorNotification(
-          `Failed to send password reset email: ${result.body.message}`,
-        );
-        return;
-      }
-
-      showSuccessNotification(result.body.message, { durationMs: 5000 });
-    });
-
-  hide();
-}
-
-function hide(): void {
-  void modal.hide();
-}
-
-async function setup(modalEl: ElementWithUtils): Promise<void> {
-  modalEl.qs("button")?.on("click", async () => {
-    await submit();
-  });
-}
-
-const modal = new AnimatedModal({
-  dialogId: "forgotPasswordModal",
-  setup,
-  customEscapeHandler: async (): Promise<void> => {
-    hide();
-  },
-  customWrapperClickHandler: async (): Promise<void> => {
-    hide();
-  },
-});
diff --git a/frontend/src/ts/modals/google-sign-up.ts b/frontend/src/ts/modals/google-sign-up.ts
deleted file mode 100644
index 63ab9b4686b4..000000000000
--- a/frontend/src/ts/modals/google-sign-up.ts
+++ /dev/null
@@ -1,196 +0,0 @@
-import { ElementWithUtils, qsr } from "../utils/dom";
-import {
-  showNoticeNotification,
-  showErrorNotification,
-  showSuccessNotification,
-} from "../states/notifications";
-import {
-  sendEmailVerification,
-  updateProfile,
-  UserCredential,
-  getAdditionalUserInfo,
-} from "firebase/auth";
-import Ape from "../ape";
-import * as AccountController from "../auth";
-import * as CaptchaController from "../controllers/captcha-controller";
-
-import { showLoaderBar, hideLoaderBar } from "../states/loader-bar";
-import { googleSignUpEvent } from "../events/google-sign-up";
-import AnimatedModal from "../utils/animated-modal";
-import { resetIgnoreAuthCallback, setUserState } from "../firebase";
-import { ValidatedHtmlInputElement } from "../elements/input-validation";
-import { UserNameSchema } from "@monkeytype/schemas/users";
-import { remoteValidation } from "../utils/remote-validation";
-import { authEvent } from "../events/auth";
-
-let signedInUser: UserCredential | undefined = undefined;
-
-function show(credential: UserCredential): void {
-  void modal.show({
-    mode: "dialog",
-    focusFirstInput: true,
-    beforeAnimation: async (modalEl) => {
-      signedInUser = credential;
-
-      if (!CaptchaController.isCaptchaAvailable()) {
-        showErrorNotification(
-          "Could not show google sign up popup: Captcha is not available. This could happen due to a blocked or failed network request. Please refresh the page or contact support if this issue persists.",
-        );
-        return;
-      }
-      CaptchaController.reset("googleSignUpModal");
-      CaptchaController.render(
-        modalEl.qsr(".captcha").native,
-        "googleSignUpModal",
-      );
-      enableInput();
-      disableButton();
-    },
-    afterAnimation: async () => {
-      if (!CaptchaController.isCaptchaAvailable()) {
-        void hide();
-      }
-    },
-  });
-}
-
-async function hide(): Promise<void> {
-  void modal.hide({
-    afterAnimation: async () => {
-      resetIgnoreAuthCallback();
-      if (signedInUser !== undefined) {
-        showNoticeNotification("Sign up process cancelled", {
-          durationMs: 5000,
-        });
-        if (getAdditionalUserInfo(signedInUser)?.isNewUser) {
-          await Ape.users.delete();
-          await signedInUser?.user.delete().catch(() => {
-            //user might be deleted already by the server
-          });
-        }
-        AccountController.signOut();
-        signedInUser = undefined;
-      }
-    },
-  });
-}
-
-async function apply(): Promise<void> {
-  if (!signedInUser) {
-    showErrorNotification(
-      "Missing user credential. Please close the popup and try again.",
-    );
-    return;
-  }
-
-  const captcha = CaptchaController.getResponse("googleSignUpModal");
-  if (!captcha) {
-    showNoticeNotification("Please complete the captcha");
-    return;
-  }
-
-  disableInput();
-  disableButton();
-
-  showLoaderBar();
-  const name = modal
-    .getModal()
-    .qsr<HTMLInputElement>("input")
-    .getValue() as string;
-  try {
-    if (name.length === 0) throw new Error("Name cannot be empty");
-    const response = await Ape.users.create({ body: { name, captcha } });
-    if (response.status !== 200) {
-      throw new Error(`Failed to create user: ${response.body.message}`);
-    }
-
-    if (response.status === 200) {
-      setUserState(signedInUser.user);
-      await updateProfile(signedInUser.user, { displayName: name });
-      await sendEmailVerification(signedInUser.user);
-      showSuccessNotification("Account created");
-      await AccountController.loadUser(signedInUser.user);
-
-      authEvent.dispatch({
-        type: "authStateChanged",
-        data: { isUserSignedIn: true, loadPromise: Promise.resolve() },
-      });
-
-      signedInUser = undefined;
-      hideLoaderBar();
-      void hide();
-    }
-  } catch (e) {
-    console.log(e);
-    showErrorNotification("Failed to sign in with Google", { error: e });
-    if (signedInUser && getAdditionalUserInfo(signedInUser)?.isNewUser) {
-      await Ape.users.delete();
-      await signedInUser?.user.delete().catch(() => {
-        //user might be deleted already by the server
-      });
-    }
-    AccountController.signOut();
-    signedInUser = undefined;
-    void hide();
-    hideLoaderBar();
-    return;
-  }
-}
-
-function enableButton(): void {
-  modal.getModal().qsr("button").enable();
-}
-
-function disableButton(): void {
-  modal.getModal().qsr("button").disable();
-}
-
-const nameInputEl = qsr<HTMLInputElement>("#googleSignUpModal input");
-
-function enableInput(): void {
-  nameInputEl?.enable();
-}
-
-function disableInput(): void {
-  nameInputEl?.disable();
-}
-
-new ValidatedHtmlInputElement(nameInputEl, {
-  schema: UserNameSchema,
-  isValid: remoteValidation(
-    async (name) => Ape.users.getNameAvailability({ params: { name } }),
-    { check: (data) => data.available || "Name not available" },
-  ),
-  debounceDelay: 1000,
-  callback: (result) => {
-    if (result.status === "success") {
-      enableButton();
-    } else {
-      disableButton();
-    }
-  },
-});
-
-async function setup(modalEl: ElementWithUtils): Promise<void> {
-  modalEl.on("submit", (e) => {
-    e.preventDefault();
-    void apply();
-  });
-}
-
-googleSignUpEvent.subscribe(({ signedInUser, isNewUser }) => {
-  if (signedInUser !== undefined && isNewUser) {
-    show(signedInUser);
-  }
-});
-
-const modal = new AnimatedModal({
-  dialogId: "googleSignUpModal",
-  setup,
-  customEscapeHandler: async (): Promise<void> => {
-    void hide();
-  },
-  customWrapperClickHandler: async (): Promise<void> => {
-    void hide();
-  },
-});
diff --git a/frontend/src/ts/modals/user-report.ts b/frontend/src/ts/modals/user-report.ts
deleted file mode 100644
index 13db2a555000..000000000000
--- a/frontend/src/ts/modals/user-report.ts
+++ /dev/null
@@ -1,157 +0,0 @@
-import Ape from "../ape";
-
-import { showLoaderBar, hideLoaderBar } from "../states/loader-bar";
-import {
-  showNoticeNotification,
-  showErrorNotification,
-  showSuccessNotification,
-} from "../states/notifications";
-import * as CaptchaController from "../controllers/captcha-controller";
-import SlimSelect from "slim-select";
-import AnimatedModal from "../utils/animated-modal";
-import { isAuthenticated } from "../states/core";
-import { CharacterCounter } from "../elements/character-counter";
-import { ReportUserReason } from "@monkeytype/schemas/users";
-import { qsr } from "../utils/dom";
-
-type State = {
-  userUid?: string;
-  lbOptOut?: boolean;
-};
-
-const state: State = {
-  userUid: undefined,
-  lbOptOut: undefined,
-};
-
-type ShowOptions = {
-  uid: string;
-  name: string;
-  lbOptOut: boolean;
-};
-
-let select: SlimSelect | undefined = undefined;
-
-export async function show(options: ShowOptions): Promise<void> {
-  if (!isAuthenticated()) {
-    showNoticeNotification("You must be logged in to submit a report");
-    return;
-  }
-
-  if (!CaptchaController.isCaptchaAvailable()) {
-    showErrorNotification(
-      "Could not show user report popup: Captcha is not available. This could happen due to a blocked or failed network request. Please refresh the page or contact support if this issue persists.",
-    );
-    return;
-  }
-
-  void modal.show({
-    mode: "dialog",
-    focusFirstInput: true,
-    beforeAnimation: async (modalEl) => {
-      CaptchaController.render(
-        modalEl.qsr(".g-recaptcha").native,
-        "userReportModal",
-      );
-
-      const { name } = options;
-      state.userUid = options.uid;
-      state.lbOptOut = options.lbOptOut;
-
-      modalEl.qs(".user")?.setText(name);
-      modalEl.qs<HTMLSelectElement>(".reason")?.setValue("Inappropriate name");
-      modalEl.qs<HTMLTextAreaElement>(".comment")?.setValue("");
-
-      select = new SlimSelect({
-        select: modalEl.qs(".reason")?.native as HTMLElement,
-        settings: {
-          showSearch: false,
-          contentLocation: modalEl.native,
-        },
-      });
-    },
-  });
-
-  new CharacterCounter(modal.getModal().qsr(".comment"), 250);
-}
-
-async function hide(): Promise<void> {
-  void modal.hide();
-}
-
-async function submitReport(): Promise<void> {
-  const captchaResponse = CaptchaController.getResponse("userReportModal");
-  if (!captchaResponse) {
-    showNoticeNotification("Please complete the captcha");
-    return;
-  }
-
-  const reason = qsr<HTMLSelectElement>(
-    "#userReportModal select.reason",
-  ).getValue() as ReportUserReason;
-  const comment = qsr<HTMLTextAreaElement>(
-    "#userReportModal .comment",
-  ).getValue() as string;
-  const captcha = captchaResponse;
-
-  if (!reason) {
-    showNoticeNotification("Please select a valid report reason");
-    return;
-  }
-
-  if (!comment) {
-    showNoticeNotification("Please provide a comment");
-    return;
-  }
-
-  if (reason === "Suspected cheating" && state.lbOptOut) {
-    showNoticeNotification(
-      "You cannot report this user for suspected cheating as they have opted out of the leaderboards.",
-      {
-        durationMs: 10000,
-      },
-    );
-    return;
-  }
-
-  const characterDifference = comment.length - 250;
-  if (characterDifference > 0) {
-    showNoticeNotification(
-      `Report comment is ${characterDifference} character(s) too long`,
-    );
-    return;
-  }
-
-  showLoaderBar();
-  const response = await Ape.users.report({
-    body: {
-      uid: state.userUid as string,
-      reason,
-      comment,
-      captcha,
-    },
-  });
-  hideLoaderBar();
-
-  if (response.status !== 200) {
-    showErrorNotification("Failed to report user", { response });
-    return;
-  }
-
-  showSuccessNotification("Report submitted. Thank you!");
-  void hide();
-}
-
-const modal = new AnimatedModal({
-  dialogId: "userReportModal",
-  setup: async (modalEl): Promise<void> => {
-    modalEl.qs("button")?.on("click", () => {
-      void submitReport();
-    });
-  },
-  cleanup: async (): Promise<void> => {
-    select?.destroy();
-    select = undefined;
-    CaptchaController.reset("userReportModal");
-  },
-});
diff --git a/frontend/src/ts/states/modals.ts b/frontend/src/ts/states/modals.ts
index a82240d98129..1f83c9435279 100644
--- a/frontend/src/ts/states/modals.ts
+++ b/frontend/src/ts/states/modals.ts
@@ -32,7 +32,10 @@ export type ModalId =
   | "EditProfile"
   | "ViewApeKey"
   | "LastSignedOutResult"
-  | "StreakHourOffset";
+  | "StreakHourOffset"
+  | "GoogleSignup"
+  | "ForgotPassword"
+  | "UserReport";
 
 export type ModalVisibility = {
   visible: boolean;
diff --git a/frontend/src/ts/states/quote-report.ts b/frontend/src/ts/states/quote-report.ts
index 08028c5b7e9d..ae84b85b17e3 100644
--- a/frontend/src/ts/states/quote-report.ts
+++ b/frontend/src/ts/states/quote-report.ts
@@ -1,19 +1,11 @@
 import { createSignal } from "solid-js";
-import { isCaptchaAvailable } from "../controllers/captcha-controller";
 import { showModal } from "./modals";
-import { showErrorNotification } from "./notifications";
 
 const [quoteId, setQuoteId] = createSignal(0);
 
 export { quoteId };
 
 export function showQuoteReportModal(id: number): void {
-  if (!isCaptchaAvailable()) {
-    showErrorNotification(
-      "Captcha is not available. Please refresh the page or contact support if this issue persists.",
-    );
-    return;
-  }
   setQuoteId(id);
   showModal("QuoteReport");
 }
diff --git a/frontend/src/ts/states/user-report.ts b/frontend/src/ts/states/user-report.ts
new file mode 100644
index 000000000000..755025b6ed3e
--- /dev/null
+++ b/frontend/src/ts/states/user-report.ts
@@ -0,0 +1,5 @@
+import { UserProfile } from "@monkeytype/schemas/users";
+import { createSignal } from "solid-js";
+
+export const [getUserToReport, setUserToReport] =
+  createSignal<UserProfile | null>(null);
diff --git a/packages/contracts/src/quotes.ts b/packages/contracts/src/quotes.ts
index fab5ed9c1deb..da05f6c0be48 100644
--- a/packages/contracts/src/quotes.ts
+++ b/packages/contracts/src/quotes.ts
@@ -30,8 +30,9 @@ export type IsSubmissionEnabledResponse = z.infer<
   typeof IsSubmissionEnabledResponseSchema
 >;
 
+export const QuoteTextSchema = z.string().min(60);
 export const AddQuoteRequestSchema = z.object({
-  text: z.string().min(60),
+  text: QuoteTextSchema,
   source: z.string(),
   language: LanguageSchema,
   captcha: z.string(), //we don't generate the captcha so there should be no validation
diff --git a/packages/contracts/src/users.ts b/packages/contracts/src/users.ts
index 7a01febb6648..e833e3f48fc3 100644
--- a/packages/contracts/src/users.ts
+++ b/packages/contracts/src/users.ts
@@ -290,15 +290,17 @@ export type UpdateUserInboxRequest = z.infer<
   typeof UpdateUserInboxRequestSchema
 >;
 
+export const ReportUserCommentSchema = z
+  .string()
+  .regex(/^([.]|[^/<>])+$/)
+  .max(250)
+  .optional()
+  .or(z.string().length(0));
+
 export const ReportUserRequestSchema = z.object({
   uid: z.string(),
   reason: ReportUserReasonSchema,
-  comment: z
-    .string()
-    .regex(/^([.]|[^/<>])+$/)
-    .max(250)
-    .optional()
-    .or(z.string().length(0)),
+  comment: ReportUserCommentSchema,
   captcha: z.string(), //we don't generate the captcha so there should be no validation
 });
 export type ReportUserRequest = z.infer<typeof ReportUserRequestSchema>;

From ad2a46892e0db06f65544b508939ff98723370ba Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Tue, 7 Jul 2026 21:17:41 +0200
Subject: [PATCH 4/4] chore: fix formatting

---
 frontend/src/ts/components/pages/test/Keymap.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
index 8250656d212b..4194e840dd20 100644
--- a/frontend/src/ts/components/pages/test/Keymap.tsx
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -99,7 +99,7 @@ function KeyboardDefinitionRenderer(props: {
 }) {
   return (
     <div
-      class="xxs:zoom-(--kb-zoom-xxs) xs:zoom-(--kb-zoom-xs) sm:zoom-(--kb-zoom-sm) md:zoom-(--kb-zoom-md) lg:zoom-(--kb-zoom-lg) xl:zoom-(--kb-zoom-xl) 2xl:zoom-(--kb-zoom-2xl) w-fit"
+      class="w-fit xxs:zoom-(--kb-zoom-xxs) xs:zoom-(--kb-zoom-xs) sm:zoom-(--kb-zoom-sm) md:zoom-(--kb-zoom-md) lg:zoom-(--kb-zoom-lg) xl:zoom-(--kb-zoom-xl) 2xl:zoom-(--kb-zoom-2xl)"
       style={{
         "--kb-zoom-xxs": Math.min(getConfig.keymapSize, 0.5),
         "--kb-zoom-xs": Math.min(getConfig.keymapSize, 0.7),