From 2224ed25e0adc6dbb76e9138bbdd6392a0723ec2 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sat, 21 Mar 2026 09:44:35 +0100
Subject: [PATCH 01/15] fix slim appending to body

---
 frontend/src/ts/components/ui/SlimSelect.tsx | 21 ++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/frontend/src/ts/components/ui/SlimSelect.tsx b/frontend/src/ts/components/ui/SlimSelect.tsx
index dfd7619a023d..06db3ff05e6e 100644
--- a/frontend/src/ts/components/ui/SlimSelect.tsx
+++ b/frontend/src/ts/components/ui/SlimSelect.tsx
@@ -47,6 +47,7 @@ export type SlimSelectProps = {
 
 export default function SlimSelect(props: SlimSelectProps): JSXElement {
   let selectRef!: HTMLSelectElement;
+  let containerRef!: HTMLDivElement;
   let slimSelect: SlimSelectCore | null = null;
 
   // State tracking
@@ -243,7 +244,10 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
     const config: Config = {
       select: selectRef,
       data: getDataWithAll(buildData(getOptions(), getSelected())) as Option[],
-      ...(props.settings && { settings: props.settings }),
+      settings: {
+        ...props.settings,
+        contentLocation: containerRef,
+      },
       ...(props.cssClasses && { cssClasses: props.cssClasses }),
       events: {
         ...props.events,
@@ -459,8 +463,17 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
   });
 
   return (
-    <select ref={(el) => (selectRef = el)} multiple={props.multiple}>
-      {props.children}
-    </select>
+    <div
+      ref={(el) => (containerRef = el)}
+      class="relative [&>.ss-content]:top-full! [&>.ss-content]:left-0! [&>.ss-content]:w-full!"
+    >
+      <select
+        ref={(el) => (selectRef = el)}
+        multiple={props.multiple}
+        class="z-10000"
+      >
+        {props.children}
+      </select>
+    </div>
   );
 }

From db6b8f076ee61207d197e11fa1c30c731c489f38 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sun, 22 Mar 2026 10:48:45 +0100
Subject: [PATCH 02/15] brr

---
 frontend/src/html/popups.html                 | 194 ------
 frontend/src/styles/popups.scss               | 397 ------------
 frontend/src/ts/commandline/lists.ts          |   4 +-
 frontend/src/ts/components/common/Button.tsx  |  18 +-
 frontend/src/ts/components/modals/Modals.tsx  |   6 +
 .../components/modals/QuoteApproveModal.tsx   | 221 +++++++
 .../ts/components/modals/QuoteRateModal.tsx   | 198 ++++++
 .../ts/components/modals/QuoteReportModal.tsx | 165 +++++
 .../ts/components/modals/QuoteSearchModal.tsx | 536 +++++++++++++++
 .../ts/components/modals/QuoteSubmitModal.tsx | 144 +++++
 frontend/src/ts/event-handlers/test.ts        |  12 +-
 frontend/src/ts/modals/mobile-test-config.ts  |   6 +-
 frontend/src/ts/modals/quote-approve.ts       | 239 -------
 frontend/src/ts/modals/quote-filter.ts        |  51 --
 frontend/src/ts/modals/quote-rate.ts          | 252 --------
 frontend/src/ts/modals/quote-report.ts        | 155 -----
 frontend/src/ts/modals/quote-search.ts        | 612 ------------------
 frontend/src/ts/modals/quote-submit.ts        | 131 ----
 frontend/src/ts/states/modals.ts              |   7 +-
 frontend/src/ts/states/quote-rate.ts          |  78 +++
 frontend/src/ts/states/quote-report.ts        |  11 +
 frontend/src/ts/states/test.ts                |   0
 frontend/src/ts/test/result.ts                |   5 +-
 frontend/src/ts/test/test-logic.ts            |   4 +-
 24 files changed, 1388 insertions(+), 2058 deletions(-)
 create mode 100644 frontend/src/ts/components/modals/QuoteApproveModal.tsx
 create mode 100644 frontend/src/ts/components/modals/QuoteRateModal.tsx
 create mode 100644 frontend/src/ts/components/modals/QuoteReportModal.tsx
 create mode 100644 frontend/src/ts/components/modals/QuoteSearchModal.tsx
 create mode 100644 frontend/src/ts/components/modals/QuoteSubmitModal.tsx
 delete mode 100644 frontend/src/ts/modals/quote-approve.ts
 delete mode 100644 frontend/src/ts/modals/quote-filter.ts
 delete mode 100644 frontend/src/ts/modals/quote-rate.ts
 delete mode 100644 frontend/src/ts/modals/quote-report.ts
 delete mode 100644 frontend/src/ts/modals/quote-search.ts
 delete mode 100644 frontend/src/ts/modals/quote-submit.ts
 create mode 100644 frontend/src/ts/states/quote-rate.ts
 create mode 100644 frontend/src/ts/states/quote-report.ts
 create mode 100644 frontend/src/ts/states/test.ts

diff --git a/frontend/src/html/popups.html b/frontend/src/html/popups.html
index 10931f0aedcd..186461ccf92b 100644
--- a/frontend/src/html/popups.html
+++ b/frontend/src/html/popups.html
@@ -310,87 +310,6 @@
   </div>
 </dialog>
 
-<dialog id="quoteRateModal" class="modalWrapper hidden">
-  <div class="modal">
-    <div class="warning">
-      If you find a grammatical error, think the quote has inappropriate
-      language or feel like it's low quality -
-      <span>don't give it a low rating!</span>
-      Please report it instead. You can do so by closing this popup and clicking
-      the "Flag" icon.
-    </div>
-    <div class="quote">
-      <div class="text">-</div>
-      <div class="id">
-        <div class="top">id</div>
-        <div class="val">-</div>
-      </div>
-      <div class="length">
-        <div class="top">length</div>
-        <div class="val">-</div>
-      </div>
-      <div class="source">
-        <div class="top">source</div>
-        <div class="val">-</div>
-      </div>
-    </div>
-    <div class="spacer"></div>
-    <div class="spacer2"></div>
-    <div class="ratingStats">
-      <div class="ratingCount">
-        <div class="top">ratings</div>
-        <div class="val">-</div>
-      </div>
-      <div class="ratingAverage">
-        <div class="top">average</div>
-        <div class="val">-</div>
-      </div>
-      <div class="starsWrapper">
-        <div class="top">your rating</div>
-        <div class="stars">
-          <button class="star" data-rating="1">
-            <i class="fas fa-fw fa-star"></i>
-          </button>
-          <button class="star" data-rating="2">
-            <i class="fas fa-fw fa-star"></i>
-          </button>
-          <button class="star" data-rating="3">
-            <i class="fas fa-fw fa-star"></i>
-          </button>
-          <button class="star" data-rating="4">
-            <i class="fas fa-fw fa-star"></i>
-          </button>
-          <button class="star" data-rating="5">
-            <i class="fas fa-fw fa-star"></i>
-          </button>
-        </div>
-      </div>
-    </div>
-    <!-- <div class="button rate1">
-            <i class="fas fa-star"></i>
-            <i class="far fa-star"></i>
-            <i class="far fa-star"></i>
-          </div>
-          <div class="button rate2">
-            <i class="fas fa-star"></i>
-            <i class="fas fa-star"></i>
-            <i class="far fa-star"></i>
-          </div>
-          <div class="button rate3">
-            <i class="fas fa-star"></i>
-            <i class="fas fa-star"></i>
-            <i class="fas fa-star"></i>
-          </div> -->
-    <button
-      class="textButton submitButton"
-      aria-label="Submit review"
-      data-balloon-pos="up"
-    >
-      <i class="fas fa-chevron-right"></i>
-    </button>
-  </div>
-</dialog>
-
 <dialog id="importExportSettingsModal" class="modalWrapper hidden">
   <form class="modal" data-mode="">
     <input type="text" title="import settings" />
@@ -835,107 +754,6 @@
     <button>ok</button>
   </form>
 </dialog>
-<dialog id="quoteSearchModal" class="modalWrapper hidden">
-  <div class="modal">
-    <div id="quoteSearchTop">
-      <div class="title">Quote search</div>
-      <div class="buttons">
-        <button class="goToQuoteSubmit">
-          <i class="fas fa-plus"></i>
-          Submit a quote
-        </button>
-        <button class="goToQuoteApprove">
-          <i class="fas fa-check"></i>
-          Approve quotes
-        </button>
-      </div>
-    </div>
-    <div id="quoteSearchControlsWrapper">
-      <input
-        id="searchBox"
-        class="searchBox"
-        dir="auto"
-        type="text"
-        maxlength="200"
-        autocomplete="off"
-        placeholder="filter by text, source or id"
-      />
-      <select class="quoteLengthFilter" multiple></select>
-      <button class="toggleFavorites">
-        <i class="fas fa-fw fa-heart"></i>
-        <!-- favorites -->
-      </button>
-    </div>
-    <div dir="auto" id="quoteSearchResults" class="quoteSearchResults"></div>
-    <div id="quoteSearchPageNavigator">
-      <button class="prevPage" disabled>
-        <i class="fas fa-fw fa-chevron-left"></i>
-      </button>
-      <div class="pageInfo">No search results</div>
-      <button class="nextPage" disabled>
-        <i class="fas fa-fw fa-chevron-right"></i>
-      </button>
-    </div>
-  </div>
-</dialog>
-<dialog id="quoteSubmitModal" class="modalWrapper hidden">
-  <div class="modal">
-    <div class="title">Submit a quote</div>
-    <ul>
-      <li>
-        Do not include content that contains any libelous or otherwise unlawful,
-        abusive or obscene text.
-      </li>
-      <li>Verify quotes added aren't duplicates of any already present</li>
-      <li>
-        Please do not add extremely short quotes (less than 60 characters)
-      </li>
-      <li>
-        <b>
-          Submitting low quality quotes or misusing this form will cause you to
-          lose access to this feature
-        </b>
-      </li>
-    </ul>
-    <label>quote</label>
-    <textarea class="newQuoteText" autocomplete="off" dir="auto"></textarea>
-    <label>source</label>
-    <input class="newQuoteSource" type="text" autocomplete="off" />
-    <label>language</label>
-    <select name="language" class="newQuoteLanguage"></select>
-    <div class="g-recaptcha"></div>
-    <button>submit</button>
-  </div>
-</dialog>
-<dialog id="quoteReportModal" class="modalWrapper hidden">
-  <div class="modal">
-    <div class="title">Report a quote</div>
-    <div class="text">
-      Please report quotes responsibly - misuse may result in you losing access
-      to this feature.
-      <br />
-      <br />
-      <span class="red">Please add comments in English only.</span>
-    </div>
-    <label>quote</label>
-    <div class="quote" dir="auto"></div>
-    <label>reason</label>
-    <select name="report-reason" class="reason" title="reason">
-      <option value="Grammatical error">Grammatical error</option>
-      <option value="Duplicate quote">Duplicate quote</option>
-      <option value="Inappropriate content">Inappropriate content</option>
-      <option value="Low quality content">Low quality content</option>
-      <option value="Incorrect source">Incorrect source</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="userReportModal" class="modalWrapper hidden">
   <div class="modal">
     <div class="title">Report a user</div>
@@ -963,18 +781,6 @@
     <button>Report</button>
   </div>
 </dialog>
-<dialog id="quoteApproveModal" class="modalWrapper hidden">
-  <div class="modal">
-    <div class="top">
-      <div class="title">Approve quotes</div>
-      <button class="refreshList">
-        <i class="fas fa-sync-alt"></i>
-        Refresh list
-      </button>
-    </div>
-    <div class="quotes"></div>
-  </div>
-</dialog>
 <dialog id="streakHourOffsetModal" class="modalWrapper hidden">
   <div class="modal">
     <div class="title">Set streak hour offset</div>
diff --git a/frontend/src/styles/popups.scss b/frontend/src/styles/popups.scss
index ae36bf124d25..89e4ec05a0b4 100644
--- a/frontend/src/styles/popups.scss
+++ b/frontend/src/styles/popups.scss
@@ -514,114 +514,6 @@ body.darkMode {
   }
 }
 
-#quoteRateModal {
-  .modal {
-    max-width: 800px;
-    overflow: unset;
-
-    display: grid;
-    grid-template-areas: "warning warning warning" "spacer2 spacer2 spacer2" "ratingStats ratingStats submitButton" "spacer spacer spacer" "quote quote quote";
-    grid-template-columns: auto 1fr;
-
-    color: var(--text-color);
-
-    .warning {
-      grid-area: warning;
-      span {
-        color: var(--error-color);
-      }
-    }
-    .spacer,
-    .spacer2 {
-      grid-area: spacer;
-      width: 100%;
-      height: 0.1rem;
-      border-radius: var(--roundness);
-      background: var(--sub-color);
-      opacity: 0.25;
-    }
-
-    .spacer2 {
-      grid-area: spacer2;
-    }
-
-    button.submitButton {
-      font-size: 2rem;
-      grid-area: submitButton;
-      color: var(--sub-color);
-      &:hover {
-        color: var(--text-color);
-      }
-    }
-
-    .top {
-      color: var(--sub-color);
-      font-size: 0.8rem;
-    }
-
-    .ratingStats {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr;
-      gap: 1rem;
-      grid-area: ratingStats;
-      .top {
-        font-size: 1rem;
-      }
-      .val {
-        font-size: 2.25rem;
-      }
-    }
-
-    .quote {
-      display: grid;
-      grid-area: quote;
-      gap: 1rem;
-      grid-template-areas:
-        "text text text"
-        "id length source";
-      grid-template-columns: 1fr 1fr 3fr;
-      .text {
-        grid-area: text;
-      }
-      .id {
-        grid-area: id;
-      }
-      .length {
-        grid-area: length;
-      }
-      .source {
-        grid-area: source;
-      }
-    }
-
-    .stars {
-      display: grid;
-      color: var(--sub-color);
-      font-size: 2rem;
-      grid-template-columns: auto auto auto auto auto;
-      justify-content: flex-start;
-      align-items: center;
-      cursor: pointer;
-      button.star {
-        padding: 0;
-        background: none;
-        color: var(--sub-color);
-        &:hover.active {
-          color: var(--text-color);
-        }
-      }
-      i {
-        pointer-events: none;
-      }
-      .star.active {
-        color: var(--main-color);
-      }
-      // &:hover .star.active {
-      //   color: var(--text-color);
-      // }
-    }
-  }
-}
 
 #simpleModal {
   .modal {
@@ -958,156 +850,6 @@ body.darkMode {
   }
 }
 
-#quoteSearchModal {
-  .highlight {
-    color: var(--main-color);
-  }
-
-  .modal {
-    background: var(--bg-color);
-    border-radius: var(--roundness);
-    padding: 2rem;
-    display: grid;
-    gap: 1rem;
-    width: 80vw;
-    max-width: 1000px;
-    height: 80vh;
-    grid-template-rows: auto auto auto 1fr;
-
-    #quoteSearchTop {
-      display: flex;
-      justify-content: space-between;
-
-      .title {
-        font-size: 1.5rem;
-        color: var(--sub-color);
-      }
-
-      .buttons {
-        display: grid;
-        gap: 0.5rem;
-        button {
-          width: 180px;
-        }
-      }
-    }
-
-    #quoteSearchControlsWrapper {
-      display: grid;
-      grid-template-columns: 1.5fr 1fr max-content;
-      gap: 1rem;
-
-      #searchBox {
-        width: 100%;
-      }
-
-      .toggleFavorites {
-        height: 100%;
-        align-items: center;
-      }
-    }
-
-    #quoteSearchPageNavigator {
-      display: flex;
-      align-items: flex-end;
-      justify-content: center;
-    }
-
-    .prevPage,
-    .nextPage {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-    }
-
-    .pageInfo {
-      flex: 1;
-      text-align: center;
-      max-width: 20rem;
-      color: var(--sub-color);
-      padding: 0.5rem 1.5rem;
-    }
-
-    #quoteSearchResults {
-      display: grid;
-      gap: 0.5rem;
-      height: auto;
-      overflow-y: scroll;
-      align-content: baseline;
-
-      .searchResult {
-        display: grid;
-        grid-template-columns: 1fr 1fr 3fr 0fr 0fr;
-        grid-template-areas:
-          "text text text text text"
-          "id len source report favorite";
-        grid-auto-rows: auto;
-        width: 100%;
-        gap: 0.5rem;
-        transition: 0.25s;
-        padding: 1rem;
-        box-sizing: border-box;
-        -webkit-user-select: none;
-        user-select: none;
-        cursor: pointer;
-        height: min-content;
-
-        .text {
-          grid-area: text;
-          overflow: visible;
-          color: var(--text-color);
-        }
-        .id {
-          grid-area: id;
-          font-size: 0.8rem;
-          color: var(--sub-color);
-        }
-        .length {
-          grid-area: len;
-          font-size: 0.8rem;
-          color: var(--sub-color);
-        }
-        .source {
-          grid-area: source;
-          font-size: 0.8rem;
-          color: var(--sub-color);
-        }
-        .resultChevron {
-          grid-area: chevron;
-          display: flex;
-          align-items: center;
-          justify-items: center;
-          color: var(--sub-color);
-          font-size: 2rem;
-        }
-        .report {
-          grid-area: report;
-          color: var(--sub-color);
-          transition: 0.25s;
-          &:hover {
-            color: var(--text-color);
-          }
-        }
-        .favorite {
-          grid-area: favorite;
-          color: var(--sub-color);
-          transition: 0.25s;
-          &:hover {
-            color: var(--text-color);
-          }
-        }
-        .sub {
-          opacity: 0.5;
-        }
-      }
-      .searchResult:hover {
-        background: var(--sub-alt-color);
-        border-radius: 5px;
-      }
-    }
-  }
-}
 
 #importExportSettingsModal {
   .modal {
@@ -1115,24 +857,6 @@ body.darkMode {
   }
 }
 
-#quoteSubmitModal {
-  .modal {
-    max-width: 1000px;
-
-    label {
-      color: var(--sub-color);
-      margin-bottom: -0.5em;
-    }
-
-    textarea {
-      resize: vertical;
-      width: 100%;
-      padding: 10px;
-      line-height: 1.2rem;
-      min-height: 5rem;
-    }
-  }
-}
 #apeKeysModal {
   .modal {
     max-width: 1000px;
@@ -1231,127 +955,6 @@ body.darkMode {
   }
 }
 
-#quoteApproveModal {
-  .modal {
-    max-width: 1000px;
-    max-height: 600px;
-    height: 100%;
-    grid-template-rows: auto 1fr;
-
-    .top {
-      display: flex;
-      justify-content: space-between;
-      .title {
-        font-size: 1.5rem;
-        color: var(--sub-color);
-      }
-      button {
-        padding: 0.5em 1em;
-      }
-    }
-
-    .quotes {
-      display: grid;
-      gap: 2rem;
-      height: auto;
-      overflow-y: scroll;
-      align-content: baseline;
-      @extend .ffscroll;
-
-      .quote {
-        display: grid;
-        grid-template-columns: 1fr auto;
-        grid-auto-rows: auto 2rem;
-        width: 100%;
-        gap: 1rem;
-        transition: 0.25s;
-        box-sizing: border-box;
-        -webkit-user-select: none;
-        user-select: none;
-        height: min-content;
-        margin-bottom: 1rem;
-        padding: 0.25em;
-        padding-right: 0.5rem;
-
-        .text {
-          grid-column: 1/2;
-          grid-row: 1/2;
-          overflow: visible;
-          color: var(--text-color);
-          resize: vertical;
-          min-height: 5rem;
-        }
-        .source {
-          grid-column: 1/2;
-          grid-row: 2/3;
-          color: var(--text-color);
-        }
-        .buttons {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          grid-column: 2/3;
-          grid-row: 1/4;
-          color: var(--sub-color);
-          gap: 1rem;
-        }
-
-        .bottom {
-          display: flex;
-          justify-content: space-around;
-          color: var(--sub-color);
-          flex-wrap: wrap;
-          gap: 1rem;
-          .length.red {
-            color: var(--error-color);
-          }
-          i.fas {
-            margin-right: 0.5em;
-          }
-        }
-
-        .sub {
-          opacity: 0.5;
-        }
-      }
-      .searchResult:hover {
-        background: var(--sub-alt-color);
-        border-radius: 5px;
-      }
-    }
-  }
-}
-
-#quoteReportModal {
-  .modal {
-    max-width: 800px;
-
-    label {
-      color: var(--sub-color);
-      margin-bottom: -0.5rem;
-    }
-
-    .red {
-      color: var(--error-color);
-    }
-
-    // .text {
-    //   // color: var(--sub-color);
-    // }
-
-    .quote {
-      font-size: 1.5rem;
-    }
-
-    textarea {
-      resize: vertical;
-      width: 100%;
-      padding: 10px;
-      line-height: 1.2rem;
-      min-height: 5rem;
-    }
-  }
-}
 
 #userReportModal {
   .modal {
diff --git a/frontend/src/ts/commandline/lists.ts b/frontend/src/ts/commandline/lists.ts
index 2af52dec0463..896128b544da 100644
--- a/frontend/src/ts/commandline/lists.ts
+++ b/frontend/src/ts/commandline/lists.ts
@@ -30,7 +30,6 @@ import {
 import * as VideoAdPopup from "../popups/video-ad-popup";
 import * as ShareTestSettingsPopup from "../modals/share-test-settings";
 import * as TestStats from "../test/test-stats";
-import * as QuoteSearchModal from "../modals/quote-search";
 import { Command, CommandsSubgroup } from "./types";
 import { buildCommandForConfigKey } from "./util";
 import { CommandlineConfigMetadataObject } from "./commandline-metadata";
@@ -41,6 +40,7 @@ import {
   showFpsCounter,
 } from "../components/layout/overlays/FpsCounter";
 import { applyConfigFromJson } from "../config/lifecycle";
+import { showModal } from "../states/modals";
 
 const challengesPromise = JSONData.getChallengeList();
 challengesPromise
@@ -88,7 +88,7 @@ export const commands: CommandsSubgroup = {
       icon: "fa-search",
       exec: (): void => {
         setConfig("mode", "quote");
-        void QuoteSearchModal.show();
+        showModal("QuoteSearch");
       },
       shouldFocusTestUI: false,
     },
diff --git a/frontend/src/ts/components/common/Button.tsx b/frontend/src/ts/components/common/Button.tsx
index 545a4209a990..6527f74c9643 100644
--- a/frontend/src/ts/components/common/Button.tsx
+++ b/frontend/src/ts/components/common/Button.tsx
@@ -13,10 +13,10 @@ type BaseProps = {
   children?: JSXElement;
   balloon?: BalloonProps;
   "router-link"?: true;
-  onClick?: () => void;
+  onClick?: (e: MouseEvent) => void;
   type?: HTMLButtonElement["type"];
-  onMouseEnter?: () => void;
-  onMouseLeave?: () => void;
+  onMouseEnter?: (e: MouseEvent) => void;
+  onMouseLeave?: (e: MouseEvent) => void;
   dataset?: Record<string, string>;
   active?: boolean;
 };
@@ -98,9 +98,9 @@ export function Button(props: ButtonProps | AnchorProps): JSXElement {
           }
           {...balloonHtmlProps()}
           {...(props["router-link"] ? { "router-link": "" } : {})}
-          onClick={() => props.onClick?.()}
-          onMouseEnter={() => props.onMouseEnter?.()}
-          onMouseLeave={() => props.onMouseLeave?.()}
+          onClick={(e) => props.onClick?.(e)}
+          onMouseEnter={(e) => props.onMouseEnter?.(e)}
+          onMouseLeave={(e) => props.onMouseLeave?.(e)}
           data-ui-variant={variant()}
           data-ui-element="button"
           {...props.dataset}
@@ -113,9 +113,9 @@ export function Button(props: ButtonProps | AnchorProps): JSXElement {
           // oxlint-disable-next-line button-has-type
           type={(props as ButtonProps).type ?? "button"}
           class={getClasses()}
-          onClick={() => props.onClick?.()}
-          onMouseEnter={() => props.onMouseEnter?.()}
-          onMouseLeave={() => props.onMouseLeave?.()}
+          onClick={(e) => props.onClick?.(e)}
+          onMouseEnter={(e) => props.onMouseEnter?.(e)}
+          onMouseLeave={(e) => props.onMouseLeave?.(e)}
           {...balloonHtmlProps()}
           {...(props["router-link"] ? { "router-link": "" } : {})}
           disabled={props.disabled ?? false}
diff --git a/frontend/src/ts/components/modals/Modals.tsx b/frontend/src/ts/components/modals/Modals.tsx
index 0c8a5c21c784..ec41ec316ec8 100644
--- a/frontend/src/ts/components/modals/Modals.tsx
+++ b/frontend/src/ts/components/modals/Modals.tsx
@@ -1,6 +1,9 @@
 import { JSXElement } from "solid-js";
 
 import { ContactModal } from "./ContactModal";
+import { QuoteRateModal } from "./QuoteRateModal";
+import { QuoteReportModal } from "./QuoteReportModal";
+import { QuoteSearchModal } from "./QuoteSearchModal";
 import { RegisterCaptchaModal } from "./RegisterCaptchaModal";
 import { SimpleModal } from "./SimpleModal";
 import { SupportModal } from "./SupportModal";
@@ -14,6 +17,9 @@ export function Modals(): JSXElement {
       <RegisterCaptchaModal />
       <SupportModal />
       <SimpleModal />
+      <QuoteRateModal />
+      <QuoteReportModal />
+      <QuoteSearchModal />
     </>
   );
 }
diff --git a/frontend/src/ts/components/modals/QuoteApproveModal.tsx b/frontend/src/ts/components/modals/QuoteApproveModal.tsx
new file mode 100644
index 000000000000..38533934d886
--- /dev/null
+++ b/frontend/src/ts/components/modals/QuoteApproveModal.tsx
@@ -0,0 +1,221 @@
+import { Quote } from "@monkeytype/schemas/quotes";
+import { format } from "date-fns/format";
+import { JSXElement, createSignal, For, Show } from "solid-js";
+
+import Ape from "../../ape";
+import { hideLoaderBar, showLoaderBar } from "../../states/loader-bar";
+import {
+  showErrorNotification,
+  showSuccessNotification,
+} from "../../states/notifications";
+import { cn } from "../../utils/cn";
+import { AnimatedModal } from "../common/AnimatedModal";
+import { Button } from "../common/Button";
+import { Fa } from "../common/Fa";
+
+function QuoteApproveItem(props: {
+  quote: Quote;
+  onRemove: () => void;
+}): JSXElement {
+  const originalText = (): string => props.quote.text;
+  const originalSource = (): string => props.quote.source;
+  const [text, setText] = createSignal(originalText());
+  const [source, setSource] = createSignal(originalSource());
+  const [disabled, setDisabled] = createSignal(false);
+
+  const isEdited = (): boolean =>
+    text() !== originalText() || source() !== originalSource();
+
+  const undo = (): void => {
+    setText(originalText());
+    setSource(originalSource());
+  };
+
+  const approve = async (): Promise<void> => {
+    if (!confirm("Are you sure?")) return;
+    setDisabled(true);
+
+    showLoaderBar();
+    const response = await Ape.quotes.approveSubmission({
+      body: { quoteId: props.quote._id },
+    });
+    hideLoaderBar();
+
+    if (response.status !== 200) {
+      setDisabled(false);
+      showErrorNotification("Failed to approve quote", { response });
+      return;
+    }
+
+    showSuccessNotification(`Quote approved. ${response.body.message ?? ""}`);
+    props.onRemove();
+  };
+
+  const refuse = async (): Promise<void> => {
+    if (!confirm("Are you sure?")) return;
+    setDisabled(true);
+
+    showLoaderBar();
+    const response = await Ape.quotes.rejectSubmission({
+      body: { quoteId: props.quote._id },
+    });
+    hideLoaderBar();
+
+    if (response.status !== 200) {
+      setDisabled(false);
+      showErrorNotification("Failed to refuse quote", { response });
+      return;
+    }
+
+    showSuccessNotification("Quote refused.");
+    props.onRemove();
+  };
+
+  const editAndApprove = async (): Promise<void> => {
+    if (!confirm("Are you sure?")) return;
+    setDisabled(true);
+
+    showLoaderBar();
+    const response = await Ape.quotes.approveSubmission({
+      body: {
+        quoteId: props.quote._id,
+        editText: text(),
+        editSource: source(),
+      },
+    });
+    hideLoaderBar();
+
+    if (response.status !== 200) {
+      setDisabled(false);
+      showErrorNotification("Failed to approve quote", { response });
+      return;
+    }
+
+    showSuccessNotification(
+      `Quote edited and approved. ${response.body.message ?? ""}`,
+    );
+    props.onRemove();
+  };
+
+  return (
+    <div class="bg-bg-secondary grid gap-2 rounded p-3">
+      <textarea
+        class="w-full rounded bg-bg p-2 text-text"
+        value={text()}
+        onInput={(e) => setText(e.currentTarget.value)}
+        disabled={disabled()}
+      ></textarea>
+      <input
+        class="w-full rounded bg-bg p-2 text-text"
+        type="text"
+        placeholder="Source"
+        value={source()}
+        onInput={(e) => setSource(e.currentTarget.value)}
+        disabled={disabled()}
+      />
+      <div class="flex gap-2">
+        <Button
+          variant="text"
+          fa={{ icon: "fa-undo-alt", fixedWidth: true }}
+          disabled={disabled() || !isEdited()}
+          onClick={undo}
+          balloon={{ text: "Undo changes", position: "left" }}
+        />
+        <Button
+          variant="text"
+          fa={{ icon: "fa-times", fixedWidth: true }}
+          disabled={disabled()}
+          onClick={() => void refuse()}
+          balloon={{ text: "Refuse quote", position: "left" }}
+        />
+        <Show when={!isEdited()}>
+          <Button
+            variant="text"
+            fa={{ icon: "fa-check", fixedWidth: true }}
+            disabled={disabled()}
+            onClick={() => void approve()}
+            balloon={{ text: "Approve quote", position: "left" }}
+          />
+        </Show>
+        <Show when={isEdited()}>
+          <Button
+            variant="text"
+            fa={{ icon: "fa-pen", fixedWidth: true }}
+            disabled={disabled()}
+            onClick={() => void editAndApprove()}
+            balloon={{ text: "Edit and approve quote", position: "left" }}
+          />
+        </Show>
+      </div>
+      <div class="flex gap-4 text-xs text-sub">
+        <div class={cn(text().length < 60 && "text-error")}>
+          <Fa icon="fa-ruler" fixedWidth /> {text().length}
+        </div>
+        <div>
+          <Fa icon="fa-globe-americas" fixedWidth /> {props.quote.language}
+        </div>
+        <div>
+          <Fa icon="fa-calendar" fixedWidth />{" "}
+          {format(new Date(props.quote.timestamp), "dd MMM yyyy HH:mm")}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function QuoteApproveModal(): JSXElement {
+  const [quotes, setQuotes] = createSignal<Quote[]>([]);
+
+  const fetchQuotes = async (): Promise<void> => {
+    showLoaderBar();
+    const response = await Ape.quotes.get();
+    hideLoaderBar();
+
+    if (response.status !== 200) {
+      showErrorNotification("Failed to get new quotes", { response });
+      return;
+    }
+
+    setQuotes(response.body.data ?? []);
+  };
+
+  const handleBeforeShow = (): void => {
+    setQuotes([]);
+    void fetchQuotes();
+  };
+
+  const removeQuote = (index: number): void => {
+    setQuotes((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  return (
+    <AnimatedModal
+      id="QuoteApprove"
+      title="Approve quotes"
+      beforeShow={handleBeforeShow}
+      modalClass="max-w-4xl"
+    >
+      <div class="flex items-center justify-end">
+        <Button
+          variant="text"
+          fa={{ icon: "fa-sync-alt" }}
+          text="Refresh list"
+          onClick={() => {
+            setQuotes([]);
+            void fetchQuotes();
+          }}
+        />
+      </div>
+      <div class="grid gap-2">
+        <For each={quotes()}>
+          {(quote, index) => (
+            <QuoteApproveItem
+              quote={quote}
+              onRemove={() => removeQuote(index())}
+            />
+          )}
+        </For>
+      </div>
+    </AnimatedModal>
+  );
+}
diff --git a/frontend/src/ts/components/modals/QuoteRateModal.tsx b/frontend/src/ts/components/modals/QuoteRateModal.tsx
new file mode 100644
index 000000000000..08b0953f2fe3
--- /dev/null
+++ b/frontend/src/ts/components/modals/QuoteRateModal.tsx
@@ -0,0 +1,198 @@
+import { isSafeNumber } from "@monkeytype/util/numbers";
+import { JSXElement, createSignal, For } from "solid-js";
+
+import Ape from "../../ape";
+import * as DB from "../../db";
+import { hideLoaderBar, showLoaderBar } from "../../states/loader-bar";
+import { hideModalAndClearChain } from "../../states/modals";
+import {
+  showNoticeNotification,
+  showErrorNotification,
+  showSuccessNotification,
+} from "../../states/notifications";
+import {
+  currentQuote,
+  quoteStats,
+  getQuoteStats,
+  updateQuoteStats,
+  getRatingAverage,
+} from "../../states/quote-rate";
+import { cn } from "../../utils/cn";
+import { qs } from "../../utils/dom";
+import { AnimatedModal } from "../common/AnimatedModal";
+import { Button } from "../common/Button";
+
+export function QuoteRateModal(): JSXElement {
+  const [rating, setRating] = createSignal(0);
+  const [hoverRating, setHoverRating] = createSignal(0);
+
+  const getLengthDesc = (): string => {
+    const quote = currentQuote();
+    if (!quote) return "-";
+    if (quote.group === 0) return "short";
+    if (quote.group === 1) return "medium";
+    if (quote.group === 2) return "long";
+    if (quote.group === 3) return "thicc";
+    return "-";
+  };
+
+  const displayRating = (): number => hoverRating() || rating();
+
+  const handleBeforeShow = (): void => {
+    const quote = currentQuote();
+    if (!quote) return;
+    setRating(0);
+    setHoverRating(0);
+    const snapshot = DB.getSnapshot();
+    const alreadyRated = snapshot?.quoteRatings?.[quote.language]?.[quote.id];
+    if (isSafeNumber(alreadyRated)) {
+      setRating(alreadyRated);
+    }
+    void getQuoteStats(quote);
+  };
+
+  const submit = async (): Promise<void> => {
+    if (rating() === 0) {
+      showNoticeNotification("Please select a rating");
+      return;
+    }
+    const quote = currentQuote();
+    if (!quote) return;
+
+    hideModalAndClearChain("QuoteRate");
+
+    showLoaderBar();
+    const response = await Ape.quotes.addRating({
+      body: { quoteId: quote.id, language: quote.language, rating: rating() },
+    });
+    hideLoaderBar();
+
+    if (response.status !== 200) {
+      showErrorNotification("Failed to submit quote rating", { response });
+      return;
+    }
+
+    const snapshot = DB.getSnapshot();
+    if (!snapshot) return;
+    const quoteRatings = snapshot.quoteRatings ?? {};
+    const languageRatings = quoteRatings?.[quote.language] ?? {};
+    const stats = quoteStats() ?? {};
+
+    if (isSafeNumber(languageRatings?.[quote.id])) {
+      const oldRating = quoteRatings[quote.language]?.[quote.id] as number;
+      const diff = rating() - oldRating;
+      languageRatings[quote.id] = rating();
+      const newStats = {
+        ratings: stats?.ratings,
+        totalRating: isNaN(stats?.totalRating as number)
+          ? 0
+          : (stats?.totalRating as number) + diff,
+        quoteId: quote.id,
+        language: quote.language,
+      };
+      updateQuoteStats(newStats);
+      showSuccessNotification("Rating updated");
+    } else {
+      languageRatings[quote.id] = rating();
+      if (isSafeNumber(stats?.ratings) && isSafeNumber(stats.totalRating)) {
+        const newStats = {
+          ratings: (stats.ratings as number) + 1,
+          totalRating: (stats.totalRating as number) + rating(),
+          quoteId: quote.id,
+          language: quote.language,
+        };
+        updateQuoteStats(newStats);
+      } else {
+        updateQuoteStats({
+          ratings: 1,
+          totalRating: rating(),
+          quoteId: quote.id,
+          language: quote.language,
+        });
+      }
+      showSuccessNotification("Rating submitted");
+    }
+
+    snapshot.quoteRatings = quoteRatings;
+    DB.setSnapshot(snapshot);
+
+    const currentStats = quoteStats();
+    if (currentStats) {
+      const avg = getRatingAverage(currentStats);
+      updateQuoteStats({ ...currentStats, average: avg });
+      qs(".pageTest #result #rateQuoteButton .rating")?.setText(avg.toFixed(1));
+      qs(".pageTest #result #rateQuoteButton .icon")?.removeClass("far");
+      qs(".pageTest #result #rateQuoteButton .icon")?.addClass("fas");
+    }
+  };
+
+  return (
+    <AnimatedModal id="QuoteRate" beforeShow={handleBeforeShow}>
+      <div class="text-sm text-sub">
+        If you find a grammatical error, think the quote has inappropriate
+        language or feel like it's low quality -{" "}
+        <span class="font-bold text-text">don't give it a low rating!</span>{" "}
+        Please report it instead. You can do so by closing this popup and
+        clicking the "Flag" icon.
+      </div>
+      <div class="grid gap-1">
+        <div class="text-text" dir="auto">
+          {currentQuote()?.text ?? "-"}
+        </div>
+        <div class="flex gap-4 text-sm text-sub">
+          <div>
+            <span class="text-xs">id</span> {currentQuote()?.id ?? "-"}
+          </div>
+          <div>
+            <span class="text-xs">length</span> {getLengthDesc()}
+          </div>
+          <div>
+            <span class="text-xs">source</span> {currentQuote()?.source ?? "-"}
+          </div>
+        </div>
+      </div>
+      <div class="flex items-center justify-center gap-4">
+        <div class="text-center">
+          <div class="text-xs text-sub">ratings</div>
+          <div class="text-text">
+            {quoteStats()?.ratings?.toString() ?? "0"}
+          </div>
+        </div>
+        <div class="text-center">
+          <div class="text-xs text-sub">average</div>
+          <div class="text-text">
+            {quoteStats()?.average?.toFixed(1) ?? "-"}
+          </div>
+        </div>
+        <div class="text-center">
+          <div class="text-xs text-sub">your rating</div>
+          <div class="flex gap-1">
+            <For each={[1, 2, 3, 4, 5]}>
+              {(star) => (
+                <Button
+                  variant="text"
+                  class={cn(
+                    "text-lg",
+                    displayRating() >= star
+                      ? "[--themable-button-text:var(--main-color)]"
+                      : "",
+                  )}
+                  fa={{ icon: "fa-star", fixedWidth: true }}
+                  onClick={() => setRating(star)}
+                  onMouseEnter={() => setHoverRating(star)}
+                  onMouseLeave={() => setHoverRating(0)}
+                />
+              )}
+            </For>
+          </div>
+        </div>
+      </div>
+      <Button
+        variant="text"
+        class="mx-auto text-lg"
+        fa={{ icon: "fa-chevron-right" }}
+        onClick={() => void submit()}
+      />
+    </AnimatedModal>
+  );
+}
diff --git a/frontend/src/ts/components/modals/QuoteReportModal.tsx b/frontend/src/ts/components/modals/QuoteReportModal.tsx
new file mode 100644
index 000000000000..1c656c9ec312
--- /dev/null
+++ b/frontend/src/ts/components/modals/QuoteReportModal.tsx
@@ -0,0 +1,165 @@
+import { QuoteReportReason } from "@monkeytype/schemas/quotes";
+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,
+  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 SlimSelect from "../ui/SlimSelect";
+
+export function QuoteReportModal(): JSXElement {
+  const [captchaRef, captchaEl] = useRef<HTMLDivElement>();
+  const [quoteText, setQuoteText] = createSignal("");
+  const [reason, setReason] =
+    createSignal<QuoteReportReason>("Grammatical error");
+  const [comment, setComment] = createSignal("");
+
+  const charsRemaining = (): number => 250 - comment().length;
+
+  const handleBeforeShow = async (): Promise<void> => {
+    setComment("");
+    setReason("Grammatical error");
+
+    const language =
+      Config.language === "swiss_german" ? "german" : Config.language;
+    const { quotes } = await QuotesController.getQuotes(language);
+    const quote = quotes.find((q) => q.id === quoteId());
+    setQuoteText(quote?.text ?? "");
+  };
+
+  const handleAfterShow = (): void => {
+    const el = captchaEl();
+    if (el === undefined) return;
+    CaptchaController.render(el, "quoteReportModal");
+  };
+
+  const handleAfterHide = (): void => {
+    CaptchaController.reset("quoteReportModal");
+  };
+
+  const submit = async (): Promise<void> => {
+    const captchaResponse = CaptchaController.getResponse("quoteReportModal");
+    if (!captchaResponse) {
+      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;
+    }
+
+    if (!reason()) {
+      showNoticeNotification("Please select a valid report reason");
+      return;
+    }
+
+    if (!comment()) {
+      showNoticeNotification("Please provide a comment");
+      return;
+    }
+
+    const characterDifference = comment().length - 250;
+    if (characterDifference > 0) {
+      showNoticeNotification(
+        `Report comment is ${characterDifference} character(s) too long`,
+      );
+      return;
+    }
+
+    showLoaderBar();
+    const response = await Ape.quotes.report({
+      body: {
+        quoteId: id,
+        quoteLanguage,
+        reason: reason(),
+        comment: comment(),
+        captcha: captchaResponse,
+      },
+    });
+    hideLoaderBar();
+
+    if (response.status !== 200) {
+      showErrorNotification("Failed to report quote", { response });
+      return;
+    }
+
+    showSuccessNotification("Report submitted. Thank you!");
+    hideModalAndClearChain("QuoteReport");
+  };
+
+  return (
+    <AnimatedModal
+      modalClass="min-w-[750px]"
+      id="QuoteReport"
+      mode="dialog"
+      title="Report a quote"
+      beforeShow={handleBeforeShow}
+      afterShow={handleAfterShow}
+      afterHide={handleAfterHide}
+    >
+      Please report quotes responsibly - misuse may result in you losing access
+      to this feature.
+      <br />
+      <span class="text-error">Please add comments in English only.</span>
+      <Separator />
+      <div class="grid gap-1">
+        <label class="text-sub">quote</label>
+        <div class="text-text text-xl" dir="auto">
+          {quoteText()}
+        </div>
+      </div>
+      <div class="grid gap-1">
+        <label class="text-sub">reason</label>
+        <SlimSelect
+          options={[
+            { value: "Grammatical error", text: "Grammatical error" },
+            { value: "Duplicate quote", text: "Duplicate quote" },
+            { value: "Inappropriate content", text: "Inappropriate content" },
+            { value: "Low quality content", text: "Low quality content" },
+            { value: "Incorrect source", text: "Incorrect source" },
+          ]}
+          selected={reason()}
+          onChange={(val) =>
+            setReason((val ?? "Grammatical error") as QuoteReportReason)
+          }
+          settings={{ showSearch: false }}
+        />
+      </div>
+      <div class="grid gap-1">
+        <label class="text-sub">comment</label>
+        <div class="relative">
+          <textarea
+            class="bg-bg-secondary w-full rounded p-2 text-text min-h-50"
+            value={comment()}
+            onInput={(e) => setComment(e.currentTarget.value)}
+            autocomplete="off"
+          ></textarea>
+          <div
+            class={`absolute right-2 bottom-2 text-xs ${charsRemaining() < 0 ? "text-error" : "text-sub"}`}
+          >
+            {charsRemaining()}
+          </div>
+        </div>
+      </div>
+      <div ref={captchaRef}></div>
+      <Button text="report" onClick={() => void submit()} />
+    </AnimatedModal>
+  );
+}
diff --git a/frontend/src/ts/components/modals/QuoteSearchModal.tsx b/frontend/src/ts/components/modals/QuoteSearchModal.tsx
new file mode 100644
index 000000000000..0a152012fdd5
--- /dev/null
+++ b/frontend/src/ts/components/modals/QuoteSearchModal.tsx
@@ -0,0 +1,536 @@
+import {
+  JSXElement,
+  createSignal,
+  createEffect,
+  For,
+  Show,
+  on,
+} from "solid-js";
+
+import Ape from "../../ape";
+import { setConfig } from "../../config/setters";
+import { Config } from "../../config/store";
+import QuotesController, { Quote } from "../../controllers/quotes-controller";
+import * as DB from "../../db";
+import { isAuthenticated } from "../../firebase";
+import { hideLoaderBar, showLoaderBar } from "../../states/loader-bar";
+import {
+  hideModalAndClearChain,
+  isModalOpen,
+  showModal,
+} from "../../states/modals";
+import {
+  showNoticeNotification,
+  showErrorNotification,
+} from "../../states/notifications";
+import { showQuoteReportModal } from "../../states/quote-report";
+import { showSimpleModal } from "../../states/simple-modal";
+import * as TestLogic from "../../test/test-logic";
+import * as TestState from "../../test/test-state";
+import { cn } from "../../utils/cn";
+import { getLanguage } from "../../utils/json-data";
+import {
+  buildSearchService,
+  SearchService,
+  TextExtractor,
+} from "../../utils/search-service";
+import { highlightMatches } from "../../utils/strings";
+import { AnimatedModal } from "../common/AnimatedModal";
+import { Button } from "../common/Button";
+import SlimSelect from "../ui/SlimSelect";
+import { QuoteApproveModal } from "./QuoteApproveModal";
+import { QuoteSubmitModal } from "./QuoteSubmitModal";
+
+const PAGE_SIZE = 100;
+
+const searchServiceCache: Record<string, SearchService<Quote>> = {};
+
+function getSearchService<T>(
+  language: string,
+  data: T[],
+  textExtractor: TextExtractor<T>,
+): SearchService<T> {
+  if (language in searchServiceCache) {
+    return searchServiceCache[language] as unknown as SearchService<T>;
+  }
+  const newSearchService = buildSearchService<T>(data, textExtractor);
+  searchServiceCache[language] =
+    newSearchService as unknown as (typeof searchServiceCache)[typeof language];
+  return newSearchService;
+}
+
+function exactSearch(quotes: Quote[], captured: RegExp[]): [Quote[], string[]] {
+  const matches: Quote[] = [];
+  const exactSearchQueryTerms: Set<string> = new Set<string>();
+
+  for (const quote of quotes) {
+    const textAndSource = quote.text + quote.source;
+    const currentMatches: string[] = [];
+    let noMatch = false;
+
+    for (const regex of captured) {
+      const match = textAndSource.match(regex);
+      if (!match) {
+        noMatch = true;
+        break;
+      }
+      currentMatches.push(RegExp.escape(match[0]));
+    }
+
+    if (!noMatch) {
+      currentMatches.forEach((m) => exactSearchQueryTerms.add(m));
+      matches.push(quote);
+    }
+  }
+
+  return [matches, Array.from(exactSearchQueryTerms)];
+}
+
+function getLengthDesc(quote: Quote): string {
+  if (quote.length < 101) return "short";
+  if (quote.length < 301) return "medium";
+  if (quote.length < 601) return "long";
+  return "thicc";
+}
+
+function Item(props: {
+  quote: Quote;
+  matchedTerms: string[];
+  dataBalloonDirection: string;
+  onSelect: () => void;
+  onReport: () => void;
+  onToggleFavorite: () => void;
+}): JSXElement {
+  const loggedOut = (): boolean => !isAuthenticated();
+  const isFav = (): boolean =>
+    !loggedOut() && QuotesController.isQuoteFavorite(props.quote);
+
+  return (
+    <div
+      class="grid cursor-pointer select-none gap-2 rounded p-4 transition-[background-color] duration-125 hover:bg-sub-alt"
+      onClick={() => props.onSelect()}
+    >
+      <div
+        class="text-text [&_.highlight]:text-main"
+        dir="auto"
+        // oxlint-disable-next-line solid/no-innerhtml
+        innerHTML={highlightMatches(props.quote.text, props.matchedTerms)}
+      ></div>
+      <div class="grid grid-cols-2 gap-2 sm:grid-cols-[1fr_1fr_3fr]">
+        <div class="text-sub text-xs">
+          <div class="opacity-50">id</div>
+          <span
+            class="[&_.highlight]:text-main"
+            // oxlint-disable-next-line solid/no-innerhtml
+            innerHTML={highlightMatches(
+              props.quote.id.toString(),
+              props.matchedTerms,
+            )}
+          ></span>
+        </div>
+        <div class="text-sub text-xs">
+          <div class="opacity-50">length</div>
+          {getLengthDesc(props.quote)}
+        </div>
+        <div class="flex col-span- sm:col-span-1">
+          <div class="text-sub text-xs grow">
+            <div class="opacity-50">source</div>
+            <span
+              class="[&_.highlight]:text-main"
+              // oxlint-disable-next-line solid/no-innerhtml
+              innerHTML={highlightMatches(
+                props.quote.source,
+                props.matchedTerms,
+              )}
+            ></span>
+          </div>
+          <Show when={!loggedOut()}>
+            <div class="flex shrink">
+              <Button
+                variant="text"
+                fa={{ icon: "fa-flag" }}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  props.onReport();
+                }}
+                balloon={{
+                  text: "Report quote",
+                  position: props.dataBalloonDirection as "left" | "right",
+                }}
+              />
+              <Button
+                variant="text"
+                fa={{
+                  icon: "fa-heart",
+                  variant: isFav() ? "solid" : "regular",
+                }}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  props.onToggleFavorite();
+                }}
+                balloon={{
+                  text: "Favorite quote",
+                  position: props.dataBalloonDirection as "left" | "right",
+                }}
+              />
+            </div>
+          </Show>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function QuoteSearchModal(): JSXElement {
+  const [searchText, setSearchText] = createSignal("");
+  const [currentPage, setCurrentPage] = createSignal(1);
+  const [lengthFilter, setLengthFilter] = createSignal<string[]>([]);
+  const [showFavoritesOnly, setShowFavoritesOnly] = createSignal(false);
+  const [customFilterMin, setCustomFilterMin] = createSignal(0);
+  const [customFilterMax, setCustomFilterMax] = createSignal(0);
+  const [hasCustomFilter, setHasCustomFilter] = createSignal(false);
+  const [quotes, setQuotes] = createSignal<Quote[]>([]);
+  const [searchResults, setSearchResults] = createSignal<{
+    quotes: Quote[];
+    matchedTerms: string[];
+  }>({ quotes: [], matchedTerms: [] });
+  const [dataBalloonDirection, setDataBalloonDirection] = createSignal("left");
+  const [favVersion, setFavVersion] = createSignal(0);
+
+  let debounceTimer: ReturnType<typeof setTimeout> | undefined;
+
+  const isOpen = (): boolean => isModalOpen("QuoteSearch");
+
+  const isQuoteMod = (): boolean => {
+    const quoteMod = DB.getSnapshot()?.quoteMod;
+    return (
+      quoteMod !== undefined &&
+      (quoteMod === true || (quoteMod as string) !== "")
+    );
+  };
+
+  const performSearch = (text: string): void => {
+    const allQuotes = quotes();
+    if (allQuotes.length === 0) {
+      setSearchResults({ quotes: [], matchedTerms: [] });
+      return;
+    }
+
+    let matches: Quote[] = [];
+    let matchedQueryTerms: string[] = [];
+
+    if (text === "") {
+      setSearchResults({ quotes: allQuotes, matchedTerms: [] });
+      return;
+    }
+
+    let exactSearchMatches: Quote[] = [];
+    let exactSearchMatchedQueryTerms: string[] = [];
+
+    const quotationsRegex = /"(.*?)"/g;
+    const exactSearchQueries = Array.from(text.matchAll(quotationsRegex));
+    const removedSearchText = text.replaceAll(quotationsRegex, "");
+
+    if (exactSearchQueries[0]) {
+      const searchQueriesRaw = exactSearchQueries.map(
+        (query) => new RegExp(RegExp.escape(query[1] ?? ""), "i"),
+      );
+      [exactSearchMatches, exactSearchMatchedQueryTerms] = exactSearch(
+        allQuotes,
+        searchQueriesRaw,
+      );
+    }
+
+    const quoteSearchService = getSearchService<Quote>(
+      Config.language,
+      allQuotes,
+      (quote: Quote) => `${quote.text} ${quote.id} ${quote.source}`,
+    );
+
+    if (exactSearchMatches.length > 0 || removedSearchText === text) {
+      const ids = exactSearchMatches.map((m) => m.id);
+      ({ results: matches, matchedQueryTerms } = quoteSearchService.query(
+        removedSearchText,
+        ids,
+      ));
+      exactSearchMatches.forEach((m) => {
+        if (!matches.includes(m)) matches.push(m);
+      });
+      matchedQueryTerms = [
+        ...exactSearchMatchedQueryTerms,
+        ...matchedQueryTerms,
+      ];
+    }
+
+    setSearchResults({ quotes: matches, matchedTerms: matchedQueryTerms });
+  };
+
+  const filteredQuotes = (): Quote[] => {
+    favVersion();
+
+    let result = searchResults().quotes;
+
+    const lengths = lengthFilter();
+    if (lengths.length > 0) {
+      const groupFilter = new Set(
+        lengths.filter((v) => v !== "4").map((v) => parseInt(v, 10)),
+      );
+      const hasCustom = lengths.includes("4");
+
+      result = result.filter((quote) => {
+        if (groupFilter.has(quote.group)) return true;
+        if (
+          hasCustom &&
+          hasCustomFilter() &&
+          quote.length >= customFilterMin() &&
+          quote.length <= customFilterMax()
+        ) {
+          return true;
+        }
+        return false;
+      });
+    }
+
+    if (showFavoritesOnly()) {
+      result = result.filter((quote) =>
+        QuotesController.isQuoteFavorite(quote),
+      );
+    }
+
+    return result;
+  };
+
+  const totalPages = (): number =>
+    Math.max(1, Math.ceil(filteredQuotes().length / PAGE_SIZE));
+
+  const pageQuotes = (): Quote[] => {
+    const start = (currentPage() - 1) * PAGE_SIZE;
+    return filteredQuotes().slice(start, start + PAGE_SIZE);
+  };
+
+  const pageInfo = (): string => {
+    const filtered = filteredQuotes();
+    if (filtered.length === 0) return "No search results";
+    const start = (currentPage() - 1) * PAGE_SIZE + 1;
+    const end = Math.min(currentPage() * PAGE_SIZE, filtered.length);
+    return `${start} - ${end} of ${filtered.length}`;
+  };
+
+  createEffect(
+    on(searchText, (text) => {
+      if (!isOpen()) return;
+      clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(() => {
+        setCurrentPage(1);
+        performSearch(text);
+      }, 250);
+    }),
+  );
+
+  createEffect(
+    on(lengthFilter, (lengths) => {
+      if (lengths.includes("4") && !hasCustomFilter()) {
+        showSimpleModal({
+          title: "Enter minimum and maximum number of words",
+          inputs: [
+            { type: "number", placeholder: "1" },
+            { type: "number", placeholder: "100" },
+          ],
+          buttonText: "save",
+          execFn: async (min: string, max: string) => {
+            const minNum = parseInt(min, 10);
+            const maxNum = parseInt(max, 10);
+            if (isNaN(minNum) || isNaN(maxNum)) {
+              return { status: "notice", message: "Invalid min/max values" };
+            }
+            setCustomFilterMin(minNum);
+            setCustomFilterMax(maxNum);
+            setHasCustomFilter(true);
+            return { status: "success", message: "Saved custom filter" };
+          },
+        });
+      }
+    }),
+  );
+
+  const handleBeforeShow = (): void => {
+    setSearchText("");
+    setCurrentPage(1);
+    setLengthFilter([]);
+    setShowFavoritesOnly(false);
+    setHasCustomFilter(false);
+  };
+
+  const handleAfterShow = async (): Promise<void> => {
+    const quotesLanguage = await getLanguage(Config.language);
+    setDataBalloonDirection(quotesLanguage?.rightToLeft ? "right" : "left");
+    const { quotes: fetchedQuotes } = await QuotesController.getQuotes(
+      Config.language,
+    );
+    setQuotes(fetchedQuotes);
+    performSearch(searchText());
+  };
+
+  const applyQuote = (quoteId: number): void => {
+    if (isNaN(quoteId) || quoteId < 0) {
+      showNoticeNotification("Quote ID must be at least 1");
+      return;
+    }
+    TestState.setSelectedQuoteId(quoteId);
+    setConfig("quoteLength", [-2]);
+    TestLogic.restart();
+    hideModalAndClearChain("QuoteSearch");
+  };
+
+  const toggleFavorite = async (quote: Quote): Promise<void> => {
+    const alreadyFavorited = QuotesController.isQuoteFavorite(quote);
+
+    try {
+      showLoaderBar();
+      await QuotesController.setQuoteFavorite(quote, !alreadyFavorited);
+      hideLoaderBar();
+      setFavVersion((v) => v + 1);
+    } catch (e) {
+      hideLoaderBar();
+      showErrorNotification(
+        alreadyFavorited
+          ? "Failed to remove quote from favorites"
+          : "Failed to add quote to favorites",
+        { error: e },
+      );
+    }
+  };
+
+  const handleSubmitClick = async (): Promise<void> => {
+    showLoaderBar();
+    const getSubmissionEnabled = await Ape.quotes.isSubmissionEnabled();
+    const isEnabled =
+      (getSubmissionEnabled.status === 200 &&
+        getSubmissionEnabled.body.data?.isEnabled) ??
+      false;
+    hideLoaderBar();
+    if (!isEnabled) {
+      showNoticeNotification(
+        "Quote submission is disabled temporarily due to a large submission queue.",
+        { durationMs: 5000 },
+      );
+      return;
+    }
+    showModal("QuoteSubmit");
+  };
+
+  return (
+    <>
+      <AnimatedModal
+        id="QuoteSearch"
+        focusFirstInput={true}
+        beforeShow={handleBeforeShow}
+        afterShow={handleAfterShow}
+        modalClass="max-w-[1000px] h-[80vh] grid-rows-[auto_auto_1fr_auto]"
+      >
+        <div class="flex justify-between flex-col sm:flex-row gap-2">
+          <div class="text-2xl text-sub">Quote search</div>
+          <div class="grid gap-2">
+            <Show when={true}>
+              {/* TODO: <Show when={isAuthenticated()}> */}
+              <Button
+                fa={{ icon: "fa-plus" }}
+                text="Submit a quote"
+                onClick={() => void handleSubmitClick()}
+              />
+            </Show>
+            <Show when={true}>
+              {/* TODO: <Show when={isQuoteMod()}> */}
+              <Button
+                fa={{ icon: "fa-check" }}
+                text="Approve quotes"
+                onClick={() => showModal("QuoteApprove")}
+              />
+            </Show>
+          </div>
+        </div>
+        <div class="flex gap-4 flex-col sm:flex-row">
+          <input
+            class="grow-3"
+            type="text"
+            maxLength={200}
+            autocomplete="off"
+            placeholder="filter by text, source or id"
+            dir="auto"
+            value={searchText()}
+            onInput={(e) => setSearchText(e.currentTarget.value)}
+          />
+          <div class="grow">
+            <SlimSelect
+              multiple
+              options={[
+                { value: "0", text: "short" },
+                { value: "1", text: "medium" },
+                { value: "2", text: "long" },
+                { value: "3", text: "thicc" },
+                { value: "4", text: "custom" },
+              ]}
+              selected={lengthFilter()}
+              onChange={(val) => setLengthFilter(val)}
+              settings={{
+                showSearch: false,
+                placeholderText: "filter by length",
+              }}
+            />
+          </div>
+          <Show when={() => isAuthenticated()}>
+            <Button
+              variant="button"
+              fa={{ icon: "fa-heart", fixedWidth: true }}
+              active={showFavoritesOnly()}
+              onClick={() => setShowFavoritesOnly((v) => !v)}
+            />
+          </Show>
+        </div>
+        <div class="grid content-baseline gap-2 overflow-y-auto" dir="auto">
+          <For each={pageQuotes()}>
+            {(quote) => (
+              <Item
+                quote={quote}
+                matchedTerms={searchResults().matchedTerms}
+                dataBalloonDirection={dataBalloonDirection()}
+                onSelect={() => applyQuote(quote.id)}
+                onReport={() => showQuoteReportModal(quote.id)}
+                onToggleFavorite={() => void toggleFavorite(quote)}
+              />
+            )}
+          </For>
+        </div>
+        <div
+          class={cn(
+            "grid grid-cols-2 gap-2 items-center justify-center",
+            "sm:grid-cols-3",
+          )}
+        >
+          <Button
+            class="px-10 sm:w-max justify-self-end"
+            fa={{ icon: "fa-chevron-left", fixedWidth: true }}
+            disabled={currentPage() <= 1}
+            onClick={() => setCurrentPage((p) => p - 1)}
+          />
+          <div
+            class={cn(
+              "px-4 text-center text-sub row-start-1 col-span-2",
+              "sm:col-span-1 sm:row-auto",
+            )}
+          >
+            {pageInfo()}
+          </div>
+          <Button
+            class="px-10 sm:w-max"
+            fa={{ icon: "fa-chevron-right", fixedWidth: true }}
+            disabled={currentPage() >= totalPages()}
+            onClick={() => setCurrentPage((p) => p + 1)}
+          />
+        </div>
+      </AnimatedModal>
+      <QuoteSubmitModal />
+      <QuoteApproveModal />
+    </>
+  );
+}
diff --git a/frontend/src/ts/components/modals/QuoteSubmitModal.tsx b/frontend/src/ts/components/modals/QuoteSubmitModal.tsx
new file mode 100644
index 000000000000..0b8db222751e
--- /dev/null
+++ b/frontend/src/ts/components/modals/QuoteSubmitModal.tsx
@@ -0,0 +1,144 @@
+import { Language } from "@monkeytype/schemas/languages";
+import { JSXElement, createSignal } 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,
+  showSuccessNotification,
+} from "../../states/notifications";
+import { removeLanguageSize } from "../../utils/strings";
+import { AnimatedModal } from "../common/AnimatedModal";
+import { Button } from "../common/Button";
+import SlimSelect from "../ui/SlimSelect";
+
+export function QuoteSubmitModal(): JSXElement {
+  const [captchaRef, captchaEl] = useRef<HTMLDivElement>();
+  const [text, setText] = createSignal("");
+  const [source, setSource] = createSignal("");
+  const [language, setLanguage] = createSignal<string>(
+    removeLanguageSize(Config.language),
+  );
+
+  const charsRemaining = (): number => 250 - text().length;
+
+  const languageOptions = LanguageGroupNames.filter(
+    (g) => g !== "swiss_german",
+  ).map((g) => ({
+    value: g,
+    text: g.replace(/_/g, " "),
+  }));
+
+  const handleAfterShow = (): void => {
+    const el = captchaEl();
+    if (el === undefined) return;
+    CaptchaController.render(el, "submitQuote");
+    setLanguage(removeLanguageSize(Config.language));
+    setSource("");
+  };
+
+  const handleAfterHide = (): void => {
+    CaptchaController.reset("submitQuote");
+  };
+
+  const submit = async (): Promise<void> => {
+    const captcha = CaptchaController.getResponse("submitQuote");
+    const quoteText = text();
+    const quoteSource = source();
+    const quoteLang = language() as Language;
+
+    if (!quoteText || !quoteSource || !quoteLang) {
+      showNoticeNotification("Please fill in all fields");
+      return;
+    }
+
+    showLoaderBar();
+    const response = await Ape.quotes.add({
+      body: {
+        text: quoteText,
+        source: quoteSource,
+        language: quoteLang,
+        captcha,
+      },
+    });
+    hideLoaderBar();
+
+    if (response.status !== 200) {
+      showErrorNotification("Failed to submit quote", { response });
+      return;
+    }
+
+    showSuccessNotification("Quote submitted.");
+    setText("");
+    setSource("");
+    CaptchaController.reset("submitQuote");
+    hideModalAndClearChain("QuoteSubmit");
+  };
+
+  return (
+    <AnimatedModal
+      id="QuoteSubmit"
+      mode="dialog"
+      title="Submit a quote"
+      focusFirstInput={true}
+      afterShow={handleAfterShow}
+      afterHide={handleAfterHide}
+    >
+      <ul class="list-disc pl-4 text-sm text-sub">
+        <li>
+          Do not include content that contains any libelous or otherwise
+          unlawful, abusive or obscene text.
+        </li>
+        <li>
+          Verify quotes added aren{"'"}t duplicates of any already present
+        </li>
+        <li>
+          Please do not add extremely short quotes (less than 60 characters)
+        </li>
+        <li>
+          <b>
+            Submitting low quality quotes or misusing this form will cause you
+            to lose access to this feature
+          </b>
+        </li>
+      </ul>
+      <label class="text-xs text-sub">quote</label>
+      <div class="relative">
+        <textarea
+          class="bg-bg-secondary w-full rounded p-2 text-text"
+          value={text()}
+          onInput={(e) => setText(e.currentTarget.value)}
+          autocomplete="off"
+          dir="auto"
+        ></textarea>
+        <div
+          class={`absolute right-2 bottom-2 text-xs ${charsRemaining() < 0 ? "text-error" : "text-sub"}`}
+        >
+          {charsRemaining()}
+        </div>
+      </div>
+      <label class="text-xs text-sub">source</label>
+      <input
+        class="bg-bg-secondary w-full rounded p-2 text-text"
+        type="text"
+        value={source()}
+        onInput={(e) => setSource(e.currentTarget.value)}
+        autocomplete="off"
+      />
+      <label class="text-xs text-sub">language</label>
+      <SlimSelect
+        options={languageOptions}
+        selected={language()}
+        onChange={(val) => setLanguage(val ?? "")}
+      />
+      <div ref={captchaRef}></div>
+      <Button text="submit" onClick={() => void submit()} />
+    </AnimatedModal>
+  );
+}
diff --git a/frontend/src/ts/event-handlers/test.ts b/frontend/src/ts/event-handlers/test.ts
index 1fc30c519a2b..69b1c8a2b6c6 100644
--- a/frontend/src/ts/event-handlers/test.ts
+++ b/frontend/src/ts/event-handlers/test.ts
@@ -10,9 +10,8 @@ import {
   showNoticeNotification,
   showErrorNotification,
 } from "../states/notifications";
-import * as QuoteRateModal from "../modals/quote-rate";
-import * as QuoteReportModal from "../modals/quote-report";
-import * as QuoteSearchModal from "../modals/quote-search";
+import { showQuoteRateModal } from "../states/quote-rate";
+import { showQuoteReportModal } from "../states/quote-report";
 import * as CustomTextModal from "../modals/custom-text";
 import * as PractiseWordsModal from "../modals/practise-words";
 import { navigate } from "../controllers/route-controller";
@@ -21,6 +20,7 @@ import * as ShareTestSettingsPopup from "../modals/share-test-settings";
 import { ConfigKey } from "@monkeytype/schemas/configs";
 import { ListsObjectKeys } from "../commandline/lists";
 import { qs } from "../utils/dom";
+import { showModal } from "../states/modals";
 
 const testPage = qs(".pageTest");
 
@@ -81,7 +81,7 @@ qs(".pageTest #rateQuoteButton")?.on("click", async () => {
     showErrorNotification("Failed to show quote rating popup: no quote");
     return;
   }
-  QuoteRateModal.show(TestWords.currentQuote);
+  showQuoteRateModal(TestWords.currentQuote);
 });
 
 qs(".pageTest #reportQuoteButton")?.on("click", async () => {
@@ -89,14 +89,14 @@ qs(".pageTest #reportQuoteButton")?.on("click", async () => {
     showErrorNotification("Failed to show quote report popup: no quote");
     return;
   }
-  void QuoteReportModal.show(TestWords.currentQuote?.id);
+  showQuoteReportModal(TestWords.currentQuote?.id);
 });
 
 testPage?.onChild("click", "#testConfig .quoteLength .textButton", (event) => {
   const target = event.childTarget as HTMLElement;
   const len = parseInt(target?.getAttribute("quoteLength") ?? "0");
   if (len === -2) {
-    void QuoteSearchModal.show();
+    showModal("QuoteSearch");
   }
 });
 
diff --git a/frontend/src/ts/modals/mobile-test-config.ts b/frontend/src/ts/modals/mobile-test-config.ts
index 7dd85ccc5d79..5f2aa638b9ed 100644
--- a/frontend/src/ts/modals/mobile-test-config.ts
+++ b/frontend/src/ts/modals/mobile-test-config.ts
@@ -3,7 +3,6 @@ import { Config } from "../config/store";
 import { setConfig, setQuoteLengthAll } from "../config/setters";
 import * as CustomWordAmountPopup from "./custom-word-amount";
 import * as CustomTestDurationPopup from "./custom-test-duration";
-import * as QuoteSearchModal from "./quote-search";
 import * as CustomTextPopup from "./custom-text";
 import AnimatedModal from "../utils/animated-modal";
 import { QuoteLength, QuoteLengthConfig } from "@monkeytype/schemas/configs";
@@ -11,6 +10,7 @@ import { Mode } from "@monkeytype/schemas/shared";
 import { areUnsortedArraysEqual } from "../utils/arrays";
 import * as ShareTestSettingsPopup from "./share-test-settings";
 import { ElementWithUtils } from "../utils/dom";
+import { showModal } from "../states/modals";
 
 function update(): void {
   const el = modal.getModal();
@@ -126,9 +126,7 @@ async function setup(modalEl: ElementWithUtils): Promise<void> {
         TestLogic.restart();
       }
     } else if (lenAttr === "-2") {
-      void QuoteSearchModal.show({
-        modalChain: modal,
-      });
+      showModal("QuoteSearch");
     } else {
       const len = parseInt(lenAttr, 10) as QuoteLength;
       let arr: QuoteLengthConfig = [];
diff --git a/frontend/src/ts/modals/quote-approve.ts b/frontend/src/ts/modals/quote-approve.ts
deleted file mode 100644
index d204c1002f39..000000000000
--- a/frontend/src/ts/modals/quote-approve.ts
+++ /dev/null
@@ -1,239 +0,0 @@
-import Ape from "../ape";
-
-import { showLoaderBar, hideLoaderBar } from "../states/loader-bar";
-import {
-  showErrorNotification,
-  showSuccessNotification,
-} from "../states/notifications";
-import { format } from "date-fns/format";
-import AnimatedModal, { ShowOptions } from "../utils/animated-modal";
-import { Quote } from "@monkeytype/schemas/quotes";
-import { escapeHTML } from "../utils/misc";
-import { createElementWithUtils, ElementWithUtils } from "../utils/dom";
-
-let quotes: Quote[] = [];
-
-function updateList(): void {
-  const modalEl = modal.getModal();
-  modalEl.qsr(".quotes").empty();
-  quotes.forEach((quote, index) => {
-    const quoteEl = createElementWithUtils("div");
-    quoteEl.setHtml(`
-      <div class="quote" data-id="${index}" data-db-id="${quote._id}">
-        <textarea class="text">${escapeHTML(quote.text)}</textarea>
-        <input type="text" class="source" placeholder="Source" value="${escapeHTML(
-          quote.source,
-        )}">
-        <div class="buttons">
-          <button disabled class="textButton undo" aria-label="Undo changes" data-balloon-pos="left"><i class="fas fa-fw fa-undo-alt"></i></button>
-          <button class="textButton refuse" aria-label="Refuse quote" data-balloon-pos="left"><i class="fas fa-fw fa-times"></i></button>
-          <button class="textButton approve" aria-label="Approve quote" data-balloon-pos="left"><i class="fas fa-fw fa-check"></i></button>
-          <button class="textButton edit hidden" aria-label="Edit and approve quote" data-balloon-pos="left"><i class="fas fa-fw fa-pen"></i></button>
-        </div>
-        <div class="bottom">
-          <div class="length ${
-            quote.text.length < 60 ? "red" : ""
-          }"><i class="fas fa-fw fa-ruler"></i>${quote.text.length}</div>
-          <div class="language"><i class="fas fa-fw fa-globe-americas"></i>${
-            quote.language
-          }</div>
-          <div class="timestamp"><i class="fas fa-fw fa-calendar"></i>${format(
-            new Date(quote.timestamp),
-            "dd MMM yyyy HH:mm",
-          )}</div>
-        </div>
-      </div>
-    `);
-
-    modalEl.qsr(".quotes").append(quoteEl);
-    quoteEl.qsr(".source").on("input", () => {
-      modalEl.qsr(`.quote[data-id="${index}"] .undo`).enable();
-      modalEl.qsr(`.quote[data-id="${index}"] .approve`).hide();
-      modalEl.qsr(`.quote[data-id="${index}"] .edit`).show();
-    });
-    quoteEl.qsr(".text").on("input", () => {
-      modalEl.qsr(`.quote[data-id="${index}"] .undo`).enable();
-      modalEl.qsr(`.quote[data-id="${index}"] .approve`).hide();
-      modalEl.qsr(`.quote[data-id="${index}"] .edit`).show();
-      updateQuoteLength(index);
-    });
-    quoteEl.qsr(".undo").on("click", () => {
-      undoQuote(index);
-    });
-    quoteEl.qsr(".approve").on("click", () => {
-      void approveQuote(index, quote._id);
-    });
-    quoteEl.qsr(".refuse").on("click", () => {
-      void refuseQuote(index, quote._id);
-    });
-    quoteEl.qsr(".edit").on("click", () => {
-      void editQuote(index, quote._id);
-    });
-  });
-}
-
-function updateQuoteLength(index: number): void {
-  const modalEl = modal.getModal();
-  const len = (
-    modalEl
-      .qsr<HTMLTextAreaElement>(`.quote[data-id="${index}"] .text`)
-      .getValue() as string
-  )?.length;
-  modalEl
-    .qsr(`.quote[data-id="${index}"] .length`)
-    .setHtml(`<i class="fas fa-fw fa-ruler"></i>${len}`);
-  if (len < 60) {
-    modalEl.qsr(`.quote[data-id="${index}"] .length`).addClass("red");
-  } else {
-    modalEl.qsr(`.quote[data-id="${index}"] .length`).removeClass("red");
-  }
-}
-
-async function getQuotes(): Promise<void> {
-  showLoaderBar();
-  const response = await Ape.quotes.get();
-  hideLoaderBar();
-
-  if (response.status !== 200) {
-    showErrorNotification("Failed to get new quotes", { response });
-    return;
-  }
-
-  quotes = response.body.data ?? [];
-  updateList();
-}
-
-export async function show(showOptions?: ShowOptions): Promise<void> {
-  void modal.show({
-    ...showOptions,
-    beforeAnimation: async () => {
-      quotes = [];
-      void getQuotes();
-    },
-  });
-}
-
-// function hide(clearModalChain = false): void {
-//   void modal.hide({
-//     clearModalChain
-//   })
-// }
-
-function resetButtons(index: number): void {
-  const quote = modal.getModal().qsr(`.quotes .quote[data-id="${index}"]`);
-  quote.qsa("button").enable();
-  if (quote.qsr(".edit").hasClass("hidden")) {
-    quote.qsr(".undo").disable();
-  }
-}
-
-function undoQuote(index: number): void {
-  const modalEl = modal.getModal();
-  modalEl
-    .qsr<HTMLTextAreaElement>(`.quote[data-id="${index}"] .text`)
-    .setValue(quotes[index]?.text ?? "");
-  modalEl
-    .qsr<HTMLInputElement>(`.quote[data-id="${index}"] .source`)
-    .setValue(quotes[index]?.source ?? "");
-  modalEl.qsr(`.quote[data-id="${index}"] .undo`).disable();
-  modalEl.qsr(`.quote[data-id="${index}"] .approve`).show();
-  modalEl.qsr(`.quote[data-id="${index}"] .edit`).hide();
-  updateQuoteLength(index);
-}
-
-async function approveQuote(index: number, dbid: string): Promise<void> {
-  if (!confirm("Are you sure?")) return;
-  const quote = modal.getModal().qsr(`.quotes .quote[data-id="${index}"]`);
-  quote.qsa("button").disable();
-  quote.qsa("textarea, input").disable();
-
-  showLoaderBar();
-  const response = await Ape.quotes.approveSubmission({
-    body: { quoteId: dbid },
-  });
-  hideLoaderBar();
-
-  if (response.status !== 200) {
-    resetButtons(index);
-    quote.qsa("textarea, input").enable();
-    showErrorNotification("Failed to approve quote", { response });
-    return;
-  }
-
-  showSuccessNotification(`Quote approved. ${response.body.message ?? ""}`);
-  quotes.splice(index, 1);
-  updateList();
-}
-
-async function refuseQuote(index: number, dbid: string): Promise<void> {
-  if (!confirm("Are you sure?")) return;
-  const quote = modal.getModal().qsr(`.quotes .quote[data-id="${index}"]`);
-  quote.qsa("button").disable();
-  quote.qsa("textarea, input").disable();
-
-  showLoaderBar();
-  const response = await Ape.quotes.rejectSubmission({
-    body: { quoteId: dbid },
-  });
-  hideLoaderBar();
-
-  if (response.status !== 200) {
-    resetButtons(index);
-    quote.qsa("textarea, input").enable();
-    showErrorNotification("Failed to refuse quote", { response });
-    return;
-  }
-
-  showSuccessNotification("Quote refused.");
-  quotes.splice(index, 1);
-  updateList();
-}
-
-async function editQuote(index: number, dbid: string): Promise<void> {
-  if (!confirm("Are you sure?")) return;
-  const modalEl = modal.getModal();
-  const editText = modalEl
-    .qsr<HTMLTextAreaElement>(`.quote[data-id="${index}"] .text`)
-    .getValue() as string;
-  const editSource = modalEl
-    .qsr<HTMLInputElement>(`.quote[data-id="${index}"] .source`)
-    .getValue() as string;
-  const quote = modalEl.qsr(`.quotes .quote[data-id="${index}"]`);
-  quote.qsa("button").disable();
-  quote.qsa("textarea, input").disable();
-
-  showLoaderBar();
-  const response = await Ape.quotes.approveSubmission({
-    body: {
-      quoteId: dbid,
-      editText,
-      editSource,
-    },
-  });
-  hideLoaderBar();
-
-  if (response.status !== 200) {
-    resetButtons(index);
-    quote.qsa("textarea, input").enable();
-    showErrorNotification("Failed to approve quote", { response });
-    return;
-  }
-
-  showSuccessNotification(
-    `Quote edited and approved. ${response.body.message ?? ""}`,
-  );
-  quotes.splice(index, 1);
-  updateList();
-}
-
-async function setup(modalEl: ElementWithUtils): Promise<void> {
-  modalEl.qs("button.refreshList")?.on("click", () => {
-    modalEl.qsr(".quotes").empty();
-    void getQuotes();
-  });
-}
-
-const modal = new AnimatedModal({
-  dialogId: "quoteApproveModal",
-  setup,
-});
diff --git a/frontend/src/ts/modals/quote-filter.ts b/frontend/src/ts/modals/quote-filter.ts
deleted file mode 100644
index 1a7ef5529eda..000000000000
--- a/frontend/src/ts/modals/quote-filter.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { SimpleModal } from "../elements/simple-modal";
-
-export let minFilterLength: number = 0;
-export let maxFilterLength: number = 0;
-export let removeCustom: boolean = false;
-
-export function setRemoveCustom(value: boolean): void {
-  removeCustom = value;
-}
-
-function refresh(): void {
-  const refreshEvent = new CustomEvent("refresh");
-  document.dispatchEvent(refreshEvent);
-}
-
-export const quoteFilterModal = new SimpleModal({
-  id: "quoteFilter",
-  title: "Enter minimum and maximum number of words",
-  inputs: [
-    {
-      placeholder: "1",
-      type: "number",
-    },
-    {
-      placeholder: "100",
-      type: "number",
-    },
-  ],
-  buttonText: "save",
-  execFn: async (_thisPopup, min, max) => {
-    const minNum = parseInt(min, 10);
-    const maxNum = parseInt(max, 10);
-    if (isNaN(minNum) || isNaN(maxNum)) {
-      return {
-        status: "notice",
-        message: "Invalid min/max values",
-      };
-    }
-
-    minFilterLength = minNum;
-    maxFilterLength = maxNum;
-    refresh();
-
-    let message: string = "Saved custom filter";
-    return { status: "success", message };
-  },
-  afterClickAway: () => {
-    setRemoveCustom(true);
-    refresh();
-  },
-});
diff --git a/frontend/src/ts/modals/quote-rate.ts b/frontend/src/ts/modals/quote-rate.ts
deleted file mode 100644
index d787cb249d02..000000000000
--- a/frontend/src/ts/modals/quote-rate.ts
+++ /dev/null
@@ -1,252 +0,0 @@
-import { Language } from "@monkeytype/schemas/languages";
-import Ape from "../ape";
-import { Quote } from "../controllers/quotes-controller";
-import * as DB from "../db";
-import { hideLoaderBar, showLoaderBar } from "../states/loader-bar";
-import {
-  showNoticeNotification,
-  showErrorNotification,
-  showSuccessNotification,
-} from "../states/notifications";
-import AnimatedModal, { ShowOptions } from "../utils/animated-modal";
-import { isSafeNumber } from "@monkeytype/util/numbers";
-import { qs, ElementWithUtils } from "../utils/dom";
-
-let rating = 0;
-
-type QuoteStats = {
-  average?: number;
-  ratings?: number;
-  totalRating?: number;
-  quoteId?: number;
-  language?: Language;
-};
-
-let quoteStats: QuoteStats | null | Record<string, never> = null;
-let currentQuote: Quote | null = null;
-
-export function clearQuoteStats(): void {
-  quoteStats = null;
-}
-
-function reset(): void {
-  const modalEl = modal.getModal();
-  modalEl.qsr(`.quote .text`).setText("-");
-  modalEl.qsr(`.quote .source .val`).setText("-");
-  modalEl.qsr(`.quote .id .val`).setText("-");
-  modalEl.qsr(`.quote .length .val`).setText("-");
-  modalEl.qsr(".ratingCount .val").setText("-");
-  modalEl.qsr(".ratingAverage .val").setText("-");
-}
-
-function getRatingAverage(quoteStats: QuoteStats): number {
-  if (
-    isSafeNumber(quoteStats.ratings) &&
-    isSafeNumber(quoteStats.totalRating) &&
-    quoteStats.ratings > 0 &&
-    quoteStats.totalRating > 0
-  ) {
-    return Math.round((quoteStats.totalRating / quoteStats.ratings) * 10) / 10;
-  }
-
-  return 0;
-}
-
-export async function getQuoteStats(
-  quote?: Quote,
-): Promise<QuoteStats | undefined> {
-  if (!quote) {
-    return;
-  }
-
-  showLoaderBar();
-  currentQuote = quote;
-  const response = await Ape.quotes.getRating({
-    query: { quoteId: currentQuote.id, language: currentQuote.language },
-  });
-  hideLoaderBar();
-
-  if (response.status !== 200) {
-    showErrorNotification("Failed to get quote ratings", { response });
-    return;
-  }
-
-  if (response.body.data === null) {
-    return {} as QuoteStats;
-  }
-
-  quoteStats = response.body.data as QuoteStats;
-  if (quoteStats !== undefined && quoteStats.average === undefined) {
-    quoteStats.average = getRatingAverage(quoteStats);
-  }
-
-  return quoteStats;
-}
-
-function refreshStars(force?: number): void {
-  const modalEl = modal.getModal();
-  const limit = force ?? rating;
-  modalEl.qsa(`.star`).removeClass("active");
-  for (let i = 1; i <= limit; i++) {
-    modalEl.qsr(`.star[data-rating="${i}"]`).addClass("active");
-  }
-}
-
-async function updateRatingStats(): Promise<void> {
-  if (!quoteStats) await getQuoteStats();
-  const modalEl = modal.getModal();
-  const ratings = quoteStats?.ratings;
-  modalEl
-    .qsr(".ratingCount .val")
-    .setText(ratings === undefined ? "0" : ratings.toString());
-  modalEl
-    .qsr(".ratingAverage .val")
-    .setText(quoteStats?.average?.toFixed(1) ?? "-");
-}
-
-function updateData(): void {
-  if (!currentQuote) return;
-  let lengthDesc;
-  if (currentQuote.group === 0) {
-    lengthDesc = "short";
-  } else if (currentQuote.group === 1) {
-    lengthDesc = "medium";
-  } else if (currentQuote.group === 2) {
-    lengthDesc = "long";
-  } else if (currentQuote.group === 3) {
-    lengthDesc = "thicc";
-  }
-  const modalEl = modal.getModal();
-  modalEl.qsr(`.quote .text`).setText(currentQuote.text);
-  modalEl.qsr(`.quote .source .val`).setText(currentQuote.source);
-  modalEl.qsr(`.quote .id .val`).setText(`${currentQuote.id}`);
-  modalEl.qsr(`.quote .length .val`).setText(lengthDesc as string);
-  void updateRatingStats();
-}
-
-export function show(quote: Quote, showOptions?: ShowOptions): void {
-  void modal.show({
-    ...showOptions,
-    beforeAnimation: async () => {
-      reset();
-      currentQuote = quote;
-      rating = 0;
-      const snapshot = DB.getSnapshot();
-      const alreadyRated =
-        snapshot?.quoteRatings?.[currentQuote.language]?.[currentQuote.id];
-      if (isSafeNumber(alreadyRated)) {
-        rating = alreadyRated;
-      }
-      refreshStars();
-      updateData();
-    },
-  });
-}
-
-function hide(clearChain = false): void {
-  void modal.hide({
-    clearModalChain: clearChain,
-  });
-}
-
-async function submit(): Promise<void> {
-  if (rating === 0) {
-    showNoticeNotification("Please select a rating");
-    return;
-  }
-  if (!currentQuote) {
-    return;
-  }
-
-  hide(true);
-
-  showLoaderBar();
-  const response = await Ape.quotes.addRating({
-    body: { quoteId: currentQuote.id, language: currentQuote.language, rating },
-  });
-  hideLoaderBar();
-
-  if (response.status !== 200) {
-    showErrorNotification("Failed to submit quote rating", { response });
-    return;
-  }
-
-  const snapshot = DB.getSnapshot();
-  if (!snapshot) return;
-  const quoteRatings = snapshot.quoteRatings ?? {};
-
-  const languageRatings = quoteRatings?.[currentQuote.language] ?? {};
-
-  if (isSafeNumber(languageRatings?.[currentQuote.id])) {
-    const oldRating = quoteRatings[currentQuote.language]?.[
-      currentQuote.id
-    ] as number;
-    const diff = rating - oldRating;
-    languageRatings[currentQuote.id] = rating;
-    quoteStats = {
-      ratings: quoteStats?.ratings,
-      totalRating: isNaN(quoteStats?.totalRating as number)
-        ? 0
-        : (quoteStats?.totalRating as number) + diff,
-      quoteId: currentQuote.id,
-      language: currentQuote.language,
-    } as QuoteStats;
-    showSuccessNotification("Rating updated");
-  } else {
-    languageRatings[currentQuote.id] = rating;
-    if (
-      isSafeNumber(quoteStats?.ratings) &&
-      isSafeNumber(quoteStats.totalRating)
-    ) {
-      quoteStats.ratings++;
-      quoteStats.totalRating += rating;
-    } else {
-      quoteStats = {
-        ratings: 1,
-        totalRating: rating,
-        quoteId: currentQuote.id,
-        language: currentQuote.language,
-      } as QuoteStats;
-    }
-    showSuccessNotification("Rating submitted");
-  }
-
-  snapshot.quoteRatings = quoteRatings;
-  DB.setSnapshot(snapshot);
-
-  quoteStats.average = getRatingAverage(quoteStats);
-  qs(".pageTest #result #rateQuoteButton .rating")?.setText(
-    quoteStats.average?.toFixed(1),
-  );
-  qs(".pageTest #result #rateQuoteButton .icon")?.removeClass("far");
-  qs(".pageTest #result #rateQuoteButton .icon")?.addClass("fas");
-}
-
-async function setup(modalEl: ElementWithUtils): Promise<void> {
-  modalEl.qs(".submitButton")?.on("click", () => {
-    void submit();
-  });
-
-  const stars = modalEl.qsa(".stars button.star");
-  stars.on("click", (e) => {
-    const ratingValue = parseInt(
-      (e.currentTarget as HTMLElement).getAttribute("data-rating") as string,
-    );
-    rating = ratingValue;
-    refreshStars();
-  });
-  stars.on("mouseenter", (e) => {
-    const ratingHover = parseInt(
-      (e.currentTarget as HTMLElement).getAttribute("data-rating") as string,
-    );
-    refreshStars(ratingHover);
-  });
-  stars.on("mouseleave", () => {
-    refreshStars();
-  });
-}
-
-const modal = new AnimatedModal({
-  dialogId: "quoteRateModal",
-  setup,
-});
diff --git a/frontend/src/ts/modals/quote-report.ts b/frontend/src/ts/modals/quote-report.ts
deleted file mode 100644
index d977becbe5a6..000000000000
--- a/frontend/src/ts/modals/quote-report.ts
+++ /dev/null
@@ -1,155 +0,0 @@
-import { ElementWithUtils, qsr } from "../utils/dom";
-import Ape from "../ape";
-import { Config } from "../config/store";
-import { showLoaderBar, hideLoaderBar } from "../states/loader-bar";
-import {
-  showNoticeNotification,
-  showErrorNotification,
-  showSuccessNotification,
-} from "../states/notifications";
-import QuotesController, { Quote } from "../controllers/quotes-controller";
-import * as CaptchaController from "../controllers/captcha-controller";
-import { removeLanguageSize } from "../utils/strings";
-import SlimSelect from "slim-select";
-import AnimatedModal, { ShowOptions } from "../utils/animated-modal";
-import { CharacterCounter } from "../elements/character-counter";
-import { QuoteReportReason } from "@monkeytype/schemas/quotes";
-
-type State = {
-  quoteToReport?: Quote;
-  reasonSelect?: SlimSelect | undefined;
-};
-
-const state: State = {
-  quoteToReport: undefined,
-  reasonSelect: undefined,
-};
-
-export async function show(
-  quoteId: number,
-  showOptions?: ShowOptions,
-): Promise<void> {
-  if (!CaptchaController.isCaptchaAvailable()) {
-    showErrorNotification(
-      "Could not show quote 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",
-    ...showOptions,
-    beforeAnimation: async (modalEl) => {
-      CaptchaController.render(
-        modalEl.qsr(".g-recaptcha").native,
-        "quoteReportModal",
-      );
-
-      const language =
-        Config.language === "swiss_german" ? "german" : Config.language;
-
-      const { quotes } = await QuotesController.getQuotes(language);
-      state.quoteToReport = quotes.find((quote) => {
-        return quote.id === quoteId;
-      });
-
-      modalEl.qsr(".quote").setText(state.quoteToReport?.text as string);
-      modalEl.qsr<HTMLSelectElement>(".reason").setValue("Grammatical error");
-      modalEl.qsr<HTMLTextAreaElement>(".comment").setValue("");
-
-      state.reasonSelect = new SlimSelect({
-        select: "#quoteReportModal .reason",
-        settings: {
-          showSearch: false,
-        },
-      });
-
-      new CharacterCounter(modalEl.qsr(".comment"), 250);
-    },
-  });
-}
-
-async function hide(clearChain = false): Promise<void> {
-  void modal.hide({
-    clearModalChain: clearChain,
-  });
-}
-
-async function submitReport(): Promise<void> {
-  const captchaResponse = CaptchaController.getResponse("quoteReportModal");
-  if (!captchaResponse) {
-    showNoticeNotification("Please complete the captcha");
-    return;
-  }
-
-  const quoteId = state.quoteToReport?.id.toString();
-  const quoteLanguage = removeLanguageSize(Config.language);
-  const reason = qsr<HTMLSelectElement>(
-    "#quoteReportModal select.reason",
-  ).getValue() as QuoteReportReason;
-  const comment = qsr<HTMLTextAreaElement>(
-    "#quoteReportModal .comment",
-  ).getValue() as string;
-  const captcha = captchaResponse;
-
-  if (quoteId === undefined || quoteId === "") {
-    showNoticeNotification("Please select a quote");
-    return;
-  }
-
-  if (!reason) {
-    showNoticeNotification("Please select a valid report reason");
-    return;
-  }
-
-  if (!comment) {
-    showNoticeNotification("Please provide a comment");
-    return;
-  }
-
-  const characterDifference = comment.length - 250;
-  if (characterDifference > 0) {
-    showNoticeNotification(
-      `Report comment is ${characterDifference} character(s) too long`,
-    );
-    return;
-  }
-
-  showLoaderBar();
-  const response = await Ape.quotes.report({
-    body: {
-      quoteId,
-      quoteLanguage,
-      reason,
-      comment,
-      captcha,
-    },
-  });
-  hideLoaderBar();
-
-  if (response.status !== 200) {
-    showErrorNotification("Failed to report quote", { response });
-    return;
-  }
-
-  showSuccessNotification("Report submitted. Thank you!");
-  void hide(true);
-}
-
-async function setup(modalEl: ElementWithUtils): Promise<void> {
-  modalEl.qs("button")?.on("click", async () => {
-    await submitReport();
-  });
-}
-
-async function cleanup(): Promise<void> {
-  CaptchaController.reset("quoteReportModal");
-  state.reasonSelect?.destroy();
-  state.reasonSelect = undefined;
-}
-
-const modal = new AnimatedModal({
-  dialogId: "quoteReportModal",
-  setup,
-  cleanup,
-});
diff --git a/frontend/src/ts/modals/quote-search.ts b/frontend/src/ts/modals/quote-search.ts
deleted file mode 100644
index 1b7d6d910a76..000000000000
--- a/frontend/src/ts/modals/quote-search.ts
+++ /dev/null
@@ -1,612 +0,0 @@
-import { Config } from "../config/store";
-import { setConfig } from "../config/setters";
-import * as DB from "../db";
-import {
-  showNoticeNotification,
-  showErrorNotification,
-} from "../states/notifications";
-import * as QuoteSubmitPopup from "./quote-submit";
-import * as QuoteApprovePopup from "./quote-approve";
-import * as QuoteFilterPopup from "./quote-filter";
-import * as QuoteReportModal from "./quote-report";
-import {
-  buildSearchService,
-  SearchService,
-  TextExtractor,
-} from "../utils/search-service";
-import QuotesController, { Quote } from "../controllers/quotes-controller";
-import { isAuthenticated } from "../firebase";
-import { debounce } from "throttle-debounce";
-import Ape from "../ape";
-
-import { showLoaderBar, hideLoaderBar } from "../states/loader-bar";
-import SlimSelect from "slim-select";
-import * as TestState from "../test/test-state";
-import AnimatedModal, { ShowOptions } from "../utils/animated-modal";
-import * as TestLogic from "../test/test-logic";
-import { highlightMatches } from "../utils/strings";
-import { getLanguage } from "../utils/json-data";
-import { qsr, ElementWithUtils } from "../utils/dom";
-
-const searchServiceCache: Record<string, SearchService<Quote>> = {};
-
-const pageSize = 100;
-let currentPageNumber = 1;
-let usingCustomLength = true;
-let dataBalloonDirection = "left";
-let quotes: Quote[];
-let lengthFilterSelectionForChain: string[] | null = null;
-
-async function updateQuotes(): Promise<void> {
-  ({ quotes } = await QuotesController.getQuotes(Config.language));
-}
-
-async function updateTooltipDirection(): Promise<void> {
-  const quotesLanguage = await getLanguage(Config.language);
-  const quotesLanguageIsRTL = quotesLanguage?.rightToLeft ?? false;
-  dataBalloonDirection = quotesLanguageIsRTL ? "right" : "left";
-}
-
-function getSearchService<T>(
-  language: string,
-  data: T[],
-  textExtractor: TextExtractor<T>,
-): SearchService<T> {
-  if (language in searchServiceCache) {
-    return searchServiceCache[language] as unknown as SearchService<T>;
-  }
-
-  const newSearchService = buildSearchService<T>(data, textExtractor);
-  searchServiceCache[language] =
-    newSearchService as unknown as (typeof searchServiceCache)[typeof language];
-
-  return newSearchService;
-}
-
-function applyQuoteLengthFilter(quotes: Quote[]): Quote[] {
-  if (!modal.isOpen()) return [];
-  const quoteLengthDropdown = modal
-    .getModal()
-    .qs<HTMLSelectElement>("select.quoteLengthFilter");
-  const quoteLengthFilterValue =
-    getLengthFilterSelectionFromModal(quoteLengthDropdown);
-
-  if (quoteLengthFilterValue.length === 0) {
-    usingCustomLength = true;
-    return quotes;
-  }
-
-  const quoteLengthFilter = new Set(
-    quoteLengthFilterValue.map((filterValue) => parseInt(filterValue, 10)),
-  );
-
-  const customFilterIndex = quoteLengthFilterValue.indexOf("4");
-
-  if (customFilterIndex !== -1) {
-    if (QuoteFilterPopup.removeCustom) {
-      QuoteFilterPopup.setRemoveCustom(false);
-      const selectElement = quoteLengthDropdown?.native as
-        | HTMLSelectElement
-        | null
-        | undefined;
-
-      if (!selectElement) {
-        return quotes;
-      }
-
-      //@ts-expect-error SlimSelect adds slim to the element
-      const ss = selectElement.slim as SlimSelect | undefined;
-
-      if (ss !== undefined) {
-        const currentSelected = ss.getSelected();
-
-        // remove custom selection
-        const customIndex = currentSelected.indexOf("4");
-        if (customIndex > -1) {
-          currentSelected.splice(customIndex, 1);
-        }
-
-        ss.setSelected(currentSelected);
-      }
-    } else {
-      if (usingCustomLength) {
-        QuoteFilterPopup.quoteFilterModal.show(undefined, {});
-        usingCustomLength = false;
-      } else {
-        const filteredQuotes = quotes.filter(
-          (quote) =>
-            (quote.length >= QuoteFilterPopup.minFilterLength &&
-              quote.length <= QuoteFilterPopup.maxFilterLength) ||
-            quoteLengthFilter.has(quote.group),
-        );
-
-        return filteredQuotes;
-      }
-    }
-  } else {
-    usingCustomLength = true;
-  }
-
-  const filteredQuotes = quotes.filter((quote) =>
-    quoteLengthFilter.has(quote.group),
-  );
-
-  return filteredQuotes;
-}
-
-function applyQuoteFavFilter(quotes: Quote[]): Quote[] {
-  if (!modal.isOpen()) return [];
-  const showFavOnly = (
-    document.querySelector(".toggleFavorites") as HTMLDivElement
-  ).classList.contains("active");
-
-  const filteredQuotes = quotes.filter((quote) => {
-    if (showFavOnly) {
-      return QuotesController.isQuoteFavorite(quote);
-    }
-
-    return true;
-  });
-
-  return filteredQuotes;
-}
-
-function buildQuoteSearchResult(
-  quote: Quote,
-  matchedSearchTerms: string[],
-): string {
-  let lengthDesc;
-  if (quote.length < 101) {
-    lengthDesc = "short";
-  } else if (quote.length < 301) {
-    lengthDesc = "medium";
-  } else if (quote.length < 601) {
-    lengthDesc = "long";
-  } else {
-    lengthDesc = "thicc";
-  }
-
-  const loggedOut = !isAuthenticated();
-  const isFav = !loggedOut && QuotesController.isQuoteFavorite(quote);
-
-  return `
-  <div class="searchResult" data-quote-id="${quote.id}">
-
-    <div class="text">
-      ${highlightMatches(quote.text, matchedSearchTerms)}
-    </div>
-
-    <div class="id">
-      <div class="sub">id</div>
-      <span class="quote-id">
-        ${highlightMatches(quote.id.toString(), matchedSearchTerms)}
-      </span>
-    </div>
-
-    <div class="length">
-      <div class="sub">length</div>
-      ${lengthDesc}
-    </div>
-
-    <div class="source">
-      <div class="sub">source</div>
-      ${highlightMatches(quote.source, matchedSearchTerms)}
-    </div>
-
-    <div class="textButton report ${
-      loggedOut && "hidden"
-    }" aria-label="Report quote" data-balloon-pos=${dataBalloonDirection}>
-      <i class="fas fa-flag report"></i>
-    </div>
-
-    <div class="textButton favorite ${
-      loggedOut && "hidden"
-    }" aria-label="Favorite quote" data-balloon-pos=${dataBalloonDirection}>
-      <i class="${isFav ? "fas" : "far"} fa-heart favorite"></i>
-    </div>
-
-  </div>
-  `;
-}
-
-function exactSearch(quotes: Quote[], captured: RegExp[]): [Quote[], string[]] {
-  const matches: Quote[] = [];
-  const exactSearchQueryTerms: Set<string> = new Set<string>();
-
-  for (const quote of quotes) {
-    const textAndSource = quote.text + quote.source;
-    const currentMatches = [];
-    let noMatch = false;
-
-    for (const regex of captured) {
-      const match = textAndSource.match(regex);
-
-      if (!match) {
-        noMatch = true;
-        break;
-      }
-
-      currentMatches.push(RegExp.escape(match[0]));
-    }
-
-    if (!noMatch) {
-      currentMatches.forEach((match) => exactSearchQueryTerms.add(match));
-      matches.push(quote);
-    }
-  }
-
-  return [matches, Array.from(exactSearchQueryTerms)];
-}
-
-async function updateResults(searchText: string): Promise<void> {
-  if (!modal.isOpen()) return;
-
-  if (quotes === undefined) {
-    ({ quotes } = await QuotesController.getQuotes(Config.language));
-  }
-
-  let matches: Quote[] = [];
-  let matchedQueryTerms: string[] = [];
-  let exactSearchMatches: Quote[] = [];
-  let exactSearchMatchedQueryTerms: string[] = [];
-
-  const quotationsRegex = /"(.*?)"/g;
-  const exactSearchQueries = Array.from(searchText.matchAll(quotationsRegex));
-  const removedSearchText = searchText.replaceAll(quotationsRegex, "");
-
-  if (exactSearchQueries[0]) {
-    const searchQueriesRaw = exactSearchQueries.map(
-      (query) => new RegExp(RegExp.escape(query[1] ?? ""), "i"),
-    );
-
-    [exactSearchMatches, exactSearchMatchedQueryTerms] = exactSearch(
-      quotes,
-      searchQueriesRaw,
-    );
-  }
-
-  const quoteSearchService = getSearchService<Quote>(
-    Config.language,
-    quotes,
-    (quote: Quote) => {
-      return `${quote.text} ${quote.id} ${quote.source}`;
-    },
-  );
-
-  if (exactSearchMatches.length > 0 || removedSearchText === searchText) {
-    const ids = exactSearchMatches.map((match) => match.id);
-
-    ({ results: matches, matchedQueryTerms } = quoteSearchService.query(
-      removedSearchText,
-      ids,
-    ));
-
-    exactSearchMatches.forEach((match) => {
-      if (!matches.includes(match)) matches.push(match);
-    });
-
-    matchedQueryTerms = [...exactSearchMatchedQueryTerms, ...matchedQueryTerms];
-  }
-
-  const quotesToShow = applyQuoteLengthFilter(
-    applyQuoteFavFilter(searchText === "" ? quotes : matches),
-  );
-
-  const resultsList = qsr("#quoteSearchResults");
-  resultsList.empty();
-
-  const totalPages = Math.ceil(quotesToShow.length / pageSize);
-
-  if (currentPageNumber >= totalPages) {
-    qsr("#quoteSearchPageNavigator .nextPage").disable();
-  } else {
-    qsr("#quoteSearchPageNavigator .nextPage").enable();
-  }
-
-  if (currentPageNumber <= 1) {
-    qsr("#quoteSearchPageNavigator .prevPage").disable();
-  } else {
-    qsr("#quoteSearchPageNavigator .prevPage").enable();
-  }
-
-  if (quotesToShow.length === 0) {
-    modal.getModal().qsr(".pageInfo").setHtml("No search results");
-    return;
-  }
-
-  const startIndex = (currentPageNumber - 1) * pageSize;
-  const endIndex = Math.min(currentPageNumber * pageSize, quotesToShow.length);
-
-  modal
-    .getModal()
-    .qsr(".pageInfo")
-    .setHtml(`${startIndex + 1} - ${endIndex} of ${quotesToShow.length}`);
-
-  quotesToShow.slice(startIndex, endIndex).forEach((quote) => {
-    const quoteSearchResult = buildQuoteSearchResult(quote, matchedQueryTerms);
-    resultsList.appendHtml(quoteSearchResult);
-  });
-
-  const searchResults = modal.getModal().qsa(".searchResult");
-  searchResults.qs(".textButton.favorite")?.on("click", (e) => {
-    e.stopPropagation();
-    const quoteId = parseInt(
-      (e.currentTarget as HTMLElement)?.closest<HTMLElement>(".searchResult")
-        ?.dataset?.["quoteId"] as string,
-    );
-    if (quoteId === undefined || isNaN(quoteId)) {
-      showErrorNotification(
-        "Could not toggle quote favorite: quote id is not a number",
-      );
-      return;
-    }
-    void toggleFavoriteForQuote(`${quoteId}`);
-  });
-  searchResults.qs(".textButton.report")?.on("click", (e) => {
-    e.stopPropagation();
-    const quoteId = parseInt(
-      (e.currentTarget as HTMLElement)?.closest<HTMLElement>(".searchResult")
-        ?.dataset?.["quoteId"] as string,
-    );
-    if (quoteId === undefined || isNaN(quoteId)) {
-      showErrorNotification(
-        "Could not open quote report modal: quote id is not a number",
-      );
-      return;
-    }
-    void QuoteReportModal.show(quoteId, {
-      modalChain: modal,
-    });
-  });
-  searchResults.on("click", (e) => {
-    const quoteId = parseInt(
-      (e.currentTarget as HTMLElement)?.closest<HTMLElement>(".searchResult")
-        ?.dataset?.["quoteId"] as string,
-    );
-    TestState.setSelectedQuoteId(quoteId);
-    apply(quoteId);
-  });
-}
-
-let lengthSelect: SlimSelect | undefined = undefined;
-
-function getLengthFilterSelectionFromModal(
-  quoteLengthDropdown?: ElementWithUtils<HTMLSelectElement> | null,
-): string[] {
-  const dropdown =
-    quoteLengthDropdown ??
-    modal.getModal().qs<HTMLSelectElement>("select.quoteLengthFilter");
-  return dropdown
-    ? Array.from(dropdown.native.selectedOptions).map((el) => el.value)
-    : [];
-}
-
-function initLengthSelect(initialSelection?: string[] | null): void {
-  lengthSelect = new SlimSelect({
-    select: "#quoteSearchModal .quoteLengthFilter",
-
-    settings: {
-      showSearch: false,
-      placeholderText: "filter by length",
-      contentLocation: modal.getModal().native,
-    },
-    data: [
-      {
-        text: "short",
-        value: "0",
-      },
-      {
-        text: "medium",
-        value: "1",
-      },
-      {
-        text: "long",
-        value: "2",
-      },
-      {
-        text: "thicc",
-        value: "3",
-      },
-      {
-        text: "custom",
-        value: "4",
-      },
-    ],
-  });
-
-  if (initialSelection !== undefined && initialSelection !== null) {
-    lengthSelect.setSelected(initialSelection);
-  }
-}
-
-export async function show(showOptions?: ShowOptions): Promise<void> {
-  void modal.show({
-    ...showOptions,
-    focusFirstInput: true,
-    beforeAnimation: async (modalEl) => {
-      lengthFilterSelectionForChain = null;
-      usingCustomLength = true;
-      if (!isAuthenticated()) {
-        modalEl.qsr(".goToQuoteSubmit").hide();
-        modalEl.qsr(".toggleFavorites").hide();
-      } else {
-        modalEl.qsr(".goToQuoteSubmit").show();
-        modalEl.qsr(".toggleFavorites").show();
-      }
-
-      const quoteMod = DB.getSnapshot()?.quoteMod;
-      const isQuoteMod =
-        quoteMod !== undefined &&
-        (quoteMod === true || (quoteMod as string) !== "");
-
-      if (isQuoteMod) {
-        modalEl.qsr(".goToQuoteApprove").show();
-      } else {
-        modalEl.qsr(".goToQuoteApprove").hide();
-      }
-
-      initLengthSelect();
-    },
-    afterAnimation: async () => {
-      await updateTooltipDirection();
-      await updateQuotes();
-    },
-  });
-}
-
-function hide(clearChain = false): void {
-  void modal.hide({
-    clearModalChain: clearChain,
-  });
-}
-
-function apply(val: number): void {
-  if (isNaN(val)) {
-    val = parseInt(
-      (document.getElementById("searchBox") as HTMLInputElement).value,
-    );
-  }
-  if (val !== null && !isNaN(val) && val >= 0) {
-    setConfig("quoteLength", [-2]);
-    TestState.setSelectedQuoteId(val);
-  } else {
-    showNoticeNotification("Quote ID must be at least 1");
-    return;
-  }
-  TestLogic.restart();
-  hide(true);
-}
-
-const searchForQuotes = debounce(250, (): void => {
-  if (!modal.isOpen()) return;
-  const searchText = (document.getElementById("searchBox") as HTMLInputElement)
-    .value;
-  currentPageNumber = 1;
-  void updateResults(searchText);
-});
-
-async function toggleFavoriteForQuote(quoteId: string): Promise<void> {
-  const quoteLang = Config.language;
-
-  if (quoteLang === undefined || quoteId === "") {
-    showErrorNotification("Could not get quote stats!");
-    return;
-  }
-
-  const quote = {
-    language: quoteLang,
-    id: parseInt(quoteId, 10),
-  } as Quote;
-
-  const alreadyFavorited = QuotesController.isQuoteFavorite(quote);
-
-  const button = modal
-    .getModal()
-    .qsr(`.searchResult[data-quote-id="${quoteId}"] .textButton.favorite i`);
-  const dbSnapshot = DB.getSnapshot();
-  if (!dbSnapshot) return;
-
-  if (alreadyFavorited) {
-    try {
-      showLoaderBar();
-      await QuotesController.setQuoteFavorite(quote, false);
-      hideLoaderBar();
-      button.removeClass("fas").addClass("far");
-    } catch (e) {
-      hideLoaderBar();
-      showErrorNotification("Failed to remove quote from favorites", {
-        error: e,
-      });
-    }
-  } else {
-    try {
-      showLoaderBar();
-      await QuotesController.setQuoteFavorite(quote, true);
-      hideLoaderBar();
-      button.removeClass("far").addClass("fas");
-    } catch (e) {
-      hideLoaderBar();
-      showErrorNotification("Failed to add quote to favorites", { error: e });
-    }
-  }
-}
-
-async function setup(modalEl: ElementWithUtils): Promise<void> {
-  modalEl.qs(".searchBox")?.on("input", (e) => {
-    searchForQuotes();
-  });
-  modalEl.qs("button.toggleFavorites")?.on("click", (e) => {
-    if (!isAuthenticated()) {
-      // notify("You need to be logged in to use this feature!");
-      return;
-    }
-
-    (e.currentTarget as HTMLElement)?.classList.toggle("active");
-    searchForQuotes();
-  });
-  modalEl.qs(".goToQuoteApprove")?.on("click", (e) => {
-    void QuoteApprovePopup.show({
-      modalChain: modal,
-    });
-  });
-  modalEl.qs(".goToQuoteSubmit")?.on("click", async (e) => {
-    showLoaderBar();
-    const getSubmissionEnabled = await Ape.quotes.isSubmissionEnabled();
-    const isSubmissionEnabled =
-      (getSubmissionEnabled.status === 200 &&
-        getSubmissionEnabled.body.data?.isEnabled) ??
-      false;
-    hideLoaderBar();
-    if (!isSubmissionEnabled) {
-      showNoticeNotification(
-        "Quote submission is disabled temporarily due to a large submission queue.",
-        {
-          durationMs: 5000,
-        },
-      );
-      return;
-    }
-    void QuoteSubmitPopup.show({
-      modalChain: modal,
-    });
-  });
-  modalEl.qs(".quoteLengthFilter")?.on("change", searchForQuotes);
-  modalEl.qs(".nextPage")?.on("click", () => {
-    const searchText = (
-      document.getElementById("searchBox") as HTMLInputElement
-    ).value;
-    currentPageNumber++;
-    void updateResults(searchText);
-  });
-  modalEl.qs(".prevPage")?.on("click", () => {
-    const searchText = (
-      document.getElementById("searchBox") as HTMLInputElement
-    ).value;
-    currentPageNumber--;
-    void updateResults(searchText);
-  });
-
-  document?.addEventListener("refresh", () => {
-    const searchText = (
-      document.getElementById("searchBox") as HTMLInputElement
-    ).value;
-    void updateResults(searchText);
-  });
-}
-
-async function cleanup(): Promise<void> {
-  lengthFilterSelectionForChain = getLengthFilterSelectionFromModal();
-  lengthSelect?.destroy();
-  lengthSelect = undefined;
-}
-
-const modal = new AnimatedModal({
-  dialogId: "quoteSearchModal",
-  setup,
-  cleanup,
-  showOptionsWhenInChain: {
-    beforeAnimation: async (): Promise<void> => {
-      initLengthSelect(lengthFilterSelectionForChain);
-    },
-  },
-});
diff --git a/frontend/src/ts/modals/quote-submit.ts b/frontend/src/ts/modals/quote-submit.ts
deleted file mode 100644
index e75854ee6182..000000000000
--- a/frontend/src/ts/modals/quote-submit.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-import { ElementWithUtils } from "../utils/dom";
-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 * as Strings from "../utils/strings";
-import { Config } from "../config/store";
-import SlimSelect from "slim-select";
-import AnimatedModal, { ShowOptions } from "../utils/animated-modal";
-import { CharacterCounter } from "../elements/character-counter";
-import { Language } from "@monkeytype/schemas/languages";
-import { LanguageGroupNames } from "../constants/languages";
-
-let dropdownReady = false;
-async function initDropdown(): Promise<void> {
-  if (dropdownReady) return;
-
-  for (const group of LanguageGroupNames) {
-    if (group === "swiss_german") continue;
-    modal
-      .getModal()
-      .qsr(".newQuoteLanguage")
-      .appendHtml(
-        `<option value="${group}">${group.replace(/_/g, " ")}</option>`,
-      );
-  }
-  dropdownReady = true;
-}
-
-let select: SlimSelect | undefined = undefined;
-
-async function submitQuote(): Promise<void> {
-  const modalEl = modal.getModal();
-  const text = modalEl
-    .qsr<HTMLTextAreaElement>(".newQuoteText")
-    .getValue() as string;
-  const source = modalEl
-    .qsr<HTMLInputElement>(".newQuoteSource")
-    .getValue() as string;
-  const language = modalEl
-    .qsr<HTMLSelectElement>("select.newQuoteLanguage")
-    .getValue() as Language;
-  const captcha = CaptchaController.getResponse("submitQuote");
-
-  if (!text || !source || !language) {
-    showNoticeNotification("Please fill in all fields");
-    return;
-  }
-
-  showLoaderBar();
-  const response = await Ape.quotes.add({
-    body: { text, source, language, captcha },
-  });
-  hideLoaderBar();
-
-  if (response.status !== 200) {
-    showErrorNotification("Failed to submit quote", { response });
-    return;
-  }
-
-  showSuccessNotification("Quote submitted.");
-  modalEl.qsr<HTMLTextAreaElement>(".newQuoteText").setValue("");
-  modalEl.qsr<HTMLInputElement>(".newQuoteSource").setValue("");
-  CaptchaController.reset("submitQuote");
-}
-
-export async function show(showOptions: ShowOptions): Promise<void> {
-  if (!CaptchaController.isCaptchaAvailable()) {
-    showErrorNotification(
-      "Could not show quote submit 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({
-    ...showOptions,
-    mode: "dialog",
-    focusFirstInput: true,
-    afterAnimation: async (modalEl) => {
-      CaptchaController.render(
-        modalEl.qsr(".g-recaptcha").native,
-        "submitQuote",
-      );
-      await initDropdown();
-
-      select = new SlimSelect({
-        select: "#quoteSubmitModal .newQuoteLanguage",
-      });
-
-      modalEl
-        .qsr<HTMLSelectElement>("select.newQuoteLanguage")
-        .setValue(Strings.removeLanguageSize(Config.language));
-      modalEl
-        .qsr<HTMLSelectElement>("select.newQuoteLanguage")
-        .dispatch("change");
-      modalEl.qsr<HTMLInputElement>("input").setValue("");
-
-      new CharacterCounter(modalEl.qsr(".newQuoteText"), 250);
-    },
-  });
-}
-
-function hide(clearModalChain: boolean): void {
-  void modal.hide({
-    clearModalChain,
-  });
-}
-
-async function setup(modalEl: ElementWithUtils): Promise<void> {
-  modalEl.qs("button")?.on("click", () => {
-    void submitQuote();
-    hide(true);
-  });
-}
-
-async function cleanup(): Promise<void> {
-  CaptchaController.reset("submitQuote");
-  select?.destroy();
-  select = undefined;
-}
-
-const modal = new AnimatedModal({
-  dialogId: "quoteSubmitModal",
-  setup,
-  cleanup,
-});
diff --git a/frontend/src/ts/states/modals.ts b/frontend/src/ts/states/modals.ts
index ffada9e73b32..0e5f1c339592 100644
--- a/frontend/src/ts/states/modals.ts
+++ b/frontend/src/ts/states/modals.ts
@@ -9,7 +9,12 @@ export type ModalId =
   | "DevInboxPicker"
   | "RegisterCaptcha"
   | "Alerts"
-  | "SimpleModal";
+  | "SimpleModal"
+  | "QuoteSearch"
+  | "QuoteRate"
+  | "QuoteReport"
+  | "QuoteSubmit"
+  | "QuoteApprove";
 
 export type ModalVisibility = {
   visible: boolean;
diff --git a/frontend/src/ts/states/quote-rate.ts b/frontend/src/ts/states/quote-rate.ts
new file mode 100644
index 000000000000..02fdecac96dd
--- /dev/null
+++ b/frontend/src/ts/states/quote-rate.ts
@@ -0,0 +1,78 @@
+import { createSignal } from "solid-js";
+import { Language } from "@monkeytype/schemas/languages";
+import Ape from "../ape";
+import { Quote } from "../controllers/quotes-controller";
+import { hideLoaderBar, showLoaderBar } from "./loader-bar";
+import { showErrorNotification } from "./notifications";
+import { showModal } from "./modals";
+import { isSafeNumber } from "@monkeytype/util/numbers";
+
+type QuoteStats = {
+  average?: number;
+  ratings?: number;
+  totalRating?: number;
+  quoteId?: number;
+  language?: Language;
+};
+
+const [currentQuote, setCurrentQuote] = createSignal<Quote | null>(null);
+const [quoteStats, setQuoteStats] = createSignal<
+  QuoteStats | null | Record<string, never>
+>(null);
+
+export { currentQuote, quoteStats };
+
+export function clearQuoteStats(): void {
+  setQuoteStats(null);
+}
+
+export function getRatingAverage(stats: QuoteStats): number {
+  if (
+    isSafeNumber(stats.ratings) &&
+    isSafeNumber(stats.totalRating) &&
+    stats.ratings > 0 &&
+    stats.totalRating > 0
+  ) {
+    return Math.round((stats.totalRating / stats.ratings) * 10) / 10;
+  }
+  return 0;
+}
+
+export async function getQuoteStats(
+  quote?: Quote,
+): Promise<QuoteStats | undefined> {
+  if (!quote) return;
+
+  showLoaderBar();
+  setCurrentQuote(quote);
+  const response = await Ape.quotes.getRating({
+    query: { quoteId: quote.id, language: quote.language },
+  });
+  hideLoaderBar();
+
+  if (response.status !== 200) {
+    showErrorNotification("Failed to get quote ratings", { response });
+    return;
+  }
+
+  if (response.body.data === null) {
+    return {} as QuoteStats;
+  }
+
+  const stats = response.body.data as QuoteStats;
+  if (stats !== undefined && stats.average === undefined) {
+    stats.average = getRatingAverage(stats);
+  }
+
+  setQuoteStats(stats);
+  return stats;
+}
+
+export function updateQuoteStats(stats: QuoteStats): void {
+  setQuoteStats(stats);
+}
+
+export function showQuoteRateModal(quote: Quote): void {
+  setCurrentQuote(quote);
+  showModal("QuoteRate");
+}
diff --git a/frontend/src/ts/states/quote-report.ts b/frontend/src/ts/states/quote-report.ts
new file mode 100644
index 000000000000..76c788d6814b
--- /dev/null
+++ b/frontend/src/ts/states/quote-report.ts
@@ -0,0 +1,11 @@
+import { createSignal } from "solid-js";
+import { showModal } from "./modals";
+
+const [quoteId, setQuoteId] = createSignal<number>(0);
+
+export { quoteId };
+
+export function showQuoteReportModal(id: number): void {
+  setQuoteId(id);
+  showModal("QuoteReport");
+}
diff --git a/frontend/src/ts/states/test.ts b/frontend/src/ts/states/test.ts
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/frontend/src/ts/test/result.ts b/frontend/src/ts/test/result.ts
index 8669d7dc51f1..31e5e0a90ac1 100644
--- a/frontend/src/ts/test/result.ts
+++ b/frontend/src/ts/test/result.ts
@@ -16,7 +16,7 @@ import {
   addNotificationWithLevel,
 } from "../states/notifications";
 import { isAuthenticated } from "../firebase";
-import * as quoteRateModal from "../modals/quote-rate";
+import { getQuoteStats } from "../states/quote-rate";
 import * as GlarsesMode from "../legacy-states/glarses-mode";
 import * as SlowTimer from "../legacy-states/slow-timer";
 import * as DateTime from "../utils/date-and-time";
@@ -902,8 +902,7 @@ export function updateRateQuote(randomQuote: Quote | null): void {
         ?.removeClass("far")
         ?.addClass("fas");
     }
-    quoteRateModal
-      .getQuoteStats(randomQuote)
+    getQuoteStats(randomQuote)
       .then((quoteStats) => {
         qs(".pageTest #result #rateQuoteButton .rating")?.setText(
           quoteStats?.average?.toFixed(1) ?? "",
diff --git a/frontend/src/ts/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts
index 8db390113010..d3a3b07e516f 100644
--- a/frontend/src/ts/test/test-logic.ts
+++ b/frontend/src/ts/test/test-logic.ts
@@ -24,7 +24,7 @@ import * as DB from "../db";
 import * as Replay from "./replay";
 import * as TodayTracker from "./today-tracker";
 import * as ChallengeContoller from "../controllers/challenge-controller";
-import * as QuoteRateModal from "../modals/quote-rate";
+import { clearQuoteStats } from "../states/quote-rate";
 import * as Result from "./result";
 import { getActivePage, restartTestEvent } from "../states/core";
 import * as TestInput from "./test-input";
@@ -301,7 +301,7 @@ export function restart(options = {} as RestartOptions): void {
   Caret.resetPosition();
   PaceCaret.reset();
   TestInput.input.setKoreanStatus(false);
-  QuoteRateModal.clearQuoteStats();
+  clearQuoteStats();
   CompositionState.setComposing(false);
   CompositionState.setData("");
 

From 8f30bdb8ad88a0be03e5340bc9802fb463550aea Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sun, 22 Mar 2026 10:56:39 +0100
Subject: [PATCH 03/15] disable button

---
 .../ts/components/modals/QuoteReportModal.tsx  | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/frontend/src/ts/components/modals/QuoteReportModal.tsx b/frontend/src/ts/components/modals/QuoteReportModal.tsx
index 1c656c9ec312..aaadb64fec00 100644
--- a/frontend/src/ts/components/modals/QuoteReportModal.tsx
+++ b/frontend/src/ts/components/modals/QuoteReportModal.tsx
@@ -26,12 +26,16 @@ export function QuoteReportModal(): JSXElement {
   const [reason, setReason] =
     createSignal<QuoteReportReason>("Grammatical error");
   const [comment, setComment] = createSignal("");
+  const [captchaComplete, setCaptchaComplete] = createSignal(false);
 
   const charsRemaining = (): number => 250 - comment().length;
+  const canSubmit = (): boolean =>
+    comment().length > 0 && comment().length <= 250 && captchaComplete();
 
   const handleBeforeShow = async (): Promise<void> => {
     setComment("");
     setReason("Grammatical error");
+    setCaptchaComplete(false);
 
     const language =
       Config.language === "swiss_german" ? "german" : Config.language;
@@ -43,7 +47,9 @@ export function QuoteReportModal(): JSXElement {
   const handleAfterShow = (): void => {
     const el = captchaEl();
     if (el === undefined) return;
-    CaptchaController.render(el, "quoteReportModal");
+    CaptchaController.render(el, "quoteReportModal", () => {
+      setCaptchaComplete(true);
+    });
   };
 
   const handleAfterHide = (): void => {
@@ -121,7 +127,7 @@ export function QuoteReportModal(): JSXElement {
       <Separator />
       <div class="grid gap-1">
         <label class="text-sub">quote</label>
-        <div class="text-text text-xl" dir="auto">
+        <div class="text-xl text-text" dir="auto">
           {quoteText()}
         </div>
       </div>
@@ -146,7 +152,7 @@ export function QuoteReportModal(): JSXElement {
         <label class="text-sub">comment</label>
         <div class="relative">
           <textarea
-            class="bg-bg-secondary w-full rounded p-2 text-text min-h-50"
+            class="bg-bg-secondary min-h-50 w-full rounded p-2 text-text"
             value={comment()}
             onInput={(e) => setComment(e.currentTarget.value)}
             autocomplete="off"
@@ -159,7 +165,11 @@ export function QuoteReportModal(): JSXElement {
         </div>
       </div>
       <div ref={captchaRef}></div>
-      <Button text="report" onClick={() => void submit()} />
+      <Button
+        text="report"
+        disabled={!canSubmit()}
+        onClick={() => void submit()}
+      />
     </AnimatedModal>
   );
 }

From 8b5b668e81ec797d5d0b3cc4f2ac4b7096f437dc Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sun, 22 Mar 2026 10:57:13 +0100
Subject: [PATCH 04/15] todo

---
 .../ts/components/modals/QuoteSearchModal.tsx | 26 +++++++++----------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/frontend/src/ts/components/modals/QuoteSearchModal.tsx b/frontend/src/ts/components/modals/QuoteSearchModal.tsx
index 0a152012fdd5..bdb9bcb9791e 100644
--- a/frontend/src/ts/components/modals/QuoteSearchModal.tsx
+++ b/frontend/src/ts/components/modals/QuoteSearchModal.tsx
@@ -107,7 +107,7 @@ function Item(props: {
 
   return (
     <div
-      class="grid cursor-pointer select-none gap-2 rounded p-4 transition-[background-color] duration-125 hover:bg-sub-alt"
+      class="grid cursor-pointer gap-2 rounded p-4 transition-[background-color] duration-125 select-none hover:bg-sub-alt"
       onClick={() => props.onSelect()}
     >
       <div
@@ -117,7 +117,7 @@ function Item(props: {
         innerHTML={highlightMatches(props.quote.text, props.matchedTerms)}
       ></div>
       <div class="grid grid-cols-2 gap-2 sm:grid-cols-[1fr_1fr_3fr]">
-        <div class="text-sub text-xs">
+        <div class="text-xs text-sub">
           <div class="opacity-50">id</div>
           <span
             class="[&_.highlight]:text-main"
@@ -128,12 +128,12 @@ function Item(props: {
             )}
           ></span>
         </div>
-        <div class="text-sub text-xs">
+        <div class="text-xs text-sub">
           <div class="opacity-50">length</div>
           {getLengthDesc(props.quote)}
         </div>
-        <div class="flex col-span- sm:col-span-1">
-          <div class="text-sub text-xs grow">
+        <div class="col-span- flex sm:col-span-1">
+          <div class="grow text-xs text-sub">
             <div class="opacity-50">source</div>
             <span
               class="[&_.highlight]:text-main"
@@ -428,19 +428,17 @@ export function QuoteSearchModal(): JSXElement {
         afterShow={handleAfterShow}
         modalClass="max-w-[1000px] h-[80vh] grid-rows-[auto_auto_1fr_auto]"
       >
-        <div class="flex justify-between flex-col sm:flex-row gap-2">
+        <div class="flex flex-col justify-between gap-2 sm:flex-row">
           <div class="text-2xl text-sub">Quote search</div>
           <div class="grid gap-2">
-            <Show when={true}>
-              {/* TODO: <Show when={isAuthenticated()}> */}
+            <Show when={isAuthenticated()}>
               <Button
                 fa={{ icon: "fa-plus" }}
                 text="Submit a quote"
                 onClick={() => void handleSubmitClick()}
               />
             </Show>
-            <Show when={true}>
-              {/* TODO: <Show when={isQuoteMod()}> */}
+            <Show when={isQuoteMod()}>
               <Button
                 fa={{ icon: "fa-check" }}
                 text="Approve quotes"
@@ -449,7 +447,7 @@ export function QuoteSearchModal(): JSXElement {
             </Show>
           </div>
         </div>
-        <div class="flex gap-4 flex-col sm:flex-row">
+        <div class="flex flex-col gap-4 sm:flex-row">
           <input
             class="grow-3"
             type="text"
@@ -503,19 +501,19 @@ export function QuoteSearchModal(): JSXElement {
         </div>
         <div
           class={cn(
-            "grid grid-cols-2 gap-2 items-center justify-center",
+            "grid grid-cols-2 items-center justify-center gap-2",
             "sm:grid-cols-3",
           )}
         >
           <Button
-            class="px-10 sm:w-max justify-self-end"
+            class="justify-self-end px-10 sm:w-max"
             fa={{ icon: "fa-chevron-left", fixedWidth: true }}
             disabled={currentPage() <= 1}
             onClick={() => setCurrentPage((p) => p - 1)}
           />
           <div
             class={cn(
-              "px-4 text-center text-sub row-start-1 col-span-2",
+              "col-span-2 row-start-1 px-4 text-center text-sub",
               "sm:col-span-1 sm:row-auto",
             )}
           >

From 5b2519f0779e87c3deeb8b6655a2e1a2226bef09 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sun, 22 Mar 2026 11:05:46 +0100
Subject: [PATCH 05/15] style

---
 .../ts/components/modals/QuoteRateModal.tsx   | 122 ++++++++++--------
 1 file changed, 67 insertions(+), 55 deletions(-)

diff --git a/frontend/src/ts/components/modals/QuoteRateModal.tsx b/frontend/src/ts/components/modals/QuoteRateModal.tsx
index 08b0953f2fe3..2e79b636f5f0 100644
--- a/frontend/src/ts/components/modals/QuoteRateModal.tsx
+++ b/frontend/src/ts/components/modals/QuoteRateModal.tsx
@@ -21,6 +21,8 @@ import { cn } from "../../utils/cn";
 import { qs } from "../../utils/dom";
 import { AnimatedModal } from "../common/AnimatedModal";
 import { Button } from "../common/Button";
+import { Fa } from "../common/Fa";
+import { Separator } from "../common/Separator";
 
 export function QuoteRateModal(): JSXElement {
   const [rating, setRating] = createSignal(0);
@@ -96,8 +98,8 @@ export function QuoteRateModal(): JSXElement {
       languageRatings[quote.id] = rating();
       if (isSafeNumber(stats?.ratings) && isSafeNumber(stats.totalRating)) {
         const newStats = {
-          ratings: (stats.ratings as number) + 1,
-          totalRating: (stats.totalRating as number) + rating(),
+          ratings: stats.ratings + 1,
+          totalRating: stats.totalRating + rating(),
           quoteId: quote.id,
           language: quote.language,
         };
@@ -127,72 +129,82 @@ export function QuoteRateModal(): JSXElement {
   };
 
   return (
-    <AnimatedModal id="QuoteRate" beforeShow={handleBeforeShow}>
-      <div class="text-sm text-sub">
-        If you find a grammatical error, think the quote has inappropriate
-        language or feel like it's low quality -{" "}
-        <span class="font-bold text-text">don't give it a low rating!</span>{" "}
-        Please report it instead. You can do so by closing this popup and
-        clicking the "Flag" icon.
+    <AnimatedModal
+      id="QuoteRate"
+      beforeShow={handleBeforeShow}
+      modalClass="max-w-[800px] overflow-visible"
+    >
+      <div class="text-text">
+        If you find a grammatical error or the quote has inappropriate language
+        - <span class="text-error">don{"'"}t give it a low rating!</span> Please
+        report it instead. You can do so by closing this popup and clicking the{" "}
+        <Fa class="text-sub" icon="fa-flag" /> flag icon.
       </div>
-      <div class="grid gap-1">
-        <div class="text-text" dir="auto">
+      <Separator />
+      <div class="grid gap-2">
+        <div class="text-xl text-text" dir="auto">
           {currentQuote()?.text ?? "-"}
         </div>
-        <div class="flex gap-4 text-sm text-sub">
-          <div>
-            <span class="text-xs">id</span> {currentQuote()?.id ?? "-"}
+        <div class="grid grid-cols-[1fr_1fr_3fr] gap-2">
+          <div class="text-xs text-sub">
+            <div class="text-sub opacity-50">id</div>
+            {currentQuote()?.id ?? "-"}
           </div>
-          <div>
-            <span class="text-xs">length</span> {getLengthDesc()}
+          <div class="text-xs text-sub">
+            <div class="text-sub opacity-50">length</div>
+            {getLengthDesc()}
           </div>
-          <div>
-            <span class="text-xs">source</span> {currentQuote()?.source ?? "-"}
+          <div class="text-xs text-sub">
+            <div class="text-sub opacity-50">source</div>
+            {currentQuote()?.source ?? "-"}
           </div>
         </div>
       </div>
-      <div class="flex items-center justify-center gap-4">
-        <div class="text-center">
-          <div class="text-xs text-sub">ratings</div>
-          <div class="text-text">
-            {quoteStats()?.ratings?.toString() ?? "0"}
+      <Separator />
+      <div class="flex items-center gap-4">
+        <div class="grid flex-1 grid-cols-4 gap-4">
+          <div>
+            <div class="text-sub">ratings</div>
+            <div class="text-4xl text-text">
+              {quoteStats()?.ratings?.toString() ?? "0"}
+            </div>
           </div>
-        </div>
-        <div class="text-center">
-          <div class="text-xs text-sub">average</div>
-          <div class="text-text">
-            {quoteStats()?.average?.toFixed(1) ?? "-"}
+          <div>
+            <div class="text-sub">average</div>
+            <div class="text-4xl text-text">
+              {quoteStats()?.average?.toFixed(1) ?? "-"}
+            </div>
           </div>
-        </div>
-        <div class="text-center">
-          <div class="text-xs text-sub">your rating</div>
-          <div class="flex gap-1">
-            <For each={[1, 2, 3, 4, 5]}>
-              {(star) => (
-                <Button
-                  variant="text"
-                  class={cn(
-                    "text-lg",
-                    displayRating() >= star
-                      ? "[--themable-button-text:var(--main-color)]"
-                      : "",
-                  )}
-                  fa={{ icon: "fa-star", fixedWidth: true }}
-                  onClick={() => setRating(star)}
-                  onMouseEnter={() => setHoverRating(star)}
-                  onMouseLeave={() => setHoverRating(0)}
-                />
-              )}
-            </For>
+          <div>
+            <div class="text-sub">your rating</div>
+            <div class="flex gap-1 text-2xl">
+              <For each={[1, 2, 3, 4, 5]}>
+                {(star) => (
+                  <Button
+                    variant="text"
+                    class={cn(
+                      "p-0 text-2xl",
+                      displayRating() >= star
+                        ? "[--themable-button-text:var(--main-color)]"
+                        : "",
+                    )}
+                    fa={{ icon: "fa-star", fixedWidth: true }}
+                    onClick={() => setRating(star)}
+                    onMouseEnter={() => setHoverRating(star)}
+                    onMouseLeave={() => setHoverRating(0)}
+                  />
+                )}
+              </For>
+            </div>
           </div>
         </div>
+        <Button
+          variant="text"
+          class="text-3xl"
+          fa={{ icon: "fa-chevron-right" }}
+          onClick={() => void submit()}
+        />
       </div>
-      <Button
-        variant="text"
-        class="mx-auto text-lg"
-        fa={{ icon: "fa-chevron-right" }}
-        onClick={() => void submit()}
-      />
     </AnimatedModal>
   );
 }

From 2882e1d62e94baa20675bd53e8fef519f1a7b7ce Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sun, 22 Mar 2026 11:16:51 +0100
Subject: [PATCH 06/15] refactor: update favorite toggle logic in
 QuoteSearchModal

---
 .../src/ts/components/modals/QuoteSearchModal.tsx   | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/src/ts/components/modals/QuoteSearchModal.tsx b/frontend/src/ts/components/modals/QuoteSearchModal.tsx
index bdb9bcb9791e..5bad1708a62e 100644
--- a/frontend/src/ts/components/modals/QuoteSearchModal.tsx
+++ b/frontend/src/ts/components/modals/QuoteSearchModal.tsx
@@ -102,8 +102,15 @@ function Item(props: {
   onToggleFavorite: () => void;
 }): JSXElement {
   const loggedOut = (): boolean => !isAuthenticated();
-  const isFav = (): boolean =>
-    !loggedOut() && QuotesController.isQuoteFavorite(props.quote);
+  const [isFav, setIsFav] = createSignal(
+    // oxlint-disable-next-line solid/reactivity -- intentionally reading once as initial value
+    !loggedOut() && QuotesController.isQuoteFavorite(props.quote),
+  );
+
+  const handleToggleFavorite = (): void => {
+    setIsFav((v) => !v);
+    props.onToggleFavorite();
+  };
 
   return (
     <div
@@ -166,7 +173,7 @@ function Item(props: {
                 }}
                 onClick={(e) => {
                   e.stopPropagation();
-                  props.onToggleFavorite();
+                  handleToggleFavorite();
                 }}
                 balloon={{
                   text: "Favorite quote",

From 3dd7e0ed723e4e83e5a6450f981b5cfbd9dc29a9 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sun, 22 Mar 2026 11:24:54 +0100
Subject: [PATCH 07/15] no loader bar

---
 frontend/src/ts/states/quote-rate.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/frontend/src/ts/states/quote-rate.ts b/frontend/src/ts/states/quote-rate.ts
index 02fdecac96dd..c4342b69136d 100644
--- a/frontend/src/ts/states/quote-rate.ts
+++ b/frontend/src/ts/states/quote-rate.ts
@@ -2,7 +2,6 @@ import { createSignal } from "solid-js";
 import { Language } from "@monkeytype/schemas/languages";
 import Ape from "../ape";
 import { Quote } from "../controllers/quotes-controller";
-import { hideLoaderBar, showLoaderBar } from "./loader-bar";
 import { showErrorNotification } from "./notifications";
 import { showModal } from "./modals";
 import { isSafeNumber } from "@monkeytype/util/numbers";
@@ -43,12 +42,12 @@ export async function getQuoteStats(
 ): Promise<QuoteStats | undefined> {
   if (!quote) return;
 
-  showLoaderBar();
+  // showLoaderBar();
   setCurrentQuote(quote);
   const response = await Ape.quotes.getRating({
     query: { quoteId: quote.id, language: quote.language },
   });
-  hideLoaderBar();
+  // hideLoaderBar();
 
   if (response.status !== 200) {
     showErrorNotification("Failed to get quote ratings", { response });

From 5b22e193f3b0f3197a427e4157cfbb2d719ee3c6 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sun, 22 Mar 2026 11:29:46 +0100
Subject: [PATCH 08/15] remove

---
 frontend/src/ts/states/quote-rate.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/src/ts/states/quote-rate.ts b/frontend/src/ts/states/quote-rate.ts
index c4342b69136d..ca48379a2413 100644
--- a/frontend/src/ts/states/quote-rate.ts
+++ b/frontend/src/ts/states/quote-rate.ts
@@ -42,12 +42,10 @@ export async function getQuoteStats(
 ): Promise<QuoteStats | undefined> {
   if (!quote) return;
 
-  // showLoaderBar();
   setCurrentQuote(quote);
   const response = await Ape.quotes.getRating({
     query: { quoteId: quote.id, language: quote.language },
   });
-  // hideLoaderBar();
 
   if (response.status !== 200) {
     showErrorNotification("Failed to get quote ratings", { response });

From 90d30bc3c9d0889269a25d2e561ac22e5fd0b300 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sun, 22 Mar 2026 11:29:49 +0100
Subject: [PATCH 09/15] fix

---
 frontend/src/ts/components/modals/QuoteSearchModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/ts/components/modals/QuoteSearchModal.tsx b/frontend/src/ts/components/modals/QuoteSearchModal.tsx
index 5bad1708a62e..b7dd5e71761b 100644
--- a/frontend/src/ts/components/modals/QuoteSearchModal.tsx
+++ b/frontend/src/ts/components/modals/QuoteSearchModal.tsx
@@ -139,7 +139,7 @@ function Item(props: {
           <div class="opacity-50">length</div>
           {getLengthDesc(props.quote)}
         </div>
-        <div class="col-span- flex sm:col-span-1">
+        <div class="col-span-2 flex sm:col-span-1">
           <div class="grow text-xs text-sub">
             <div class="opacity-50">source</div>
             <span

From 1aead227bcd8a2add0734b07178436e368d78504 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sun, 22 Mar 2026 11:30:56 +0100
Subject: [PATCH 10/15] remove

---
 frontend/src/ts/states/test.ts | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 frontend/src/ts/states/test.ts

diff --git a/frontend/src/ts/states/test.ts b/frontend/src/ts/states/test.ts
deleted file mode 100644
index e69de29bb2d1..000000000000

From e8a6a69d983b9c78381a00baea9b38f7cee5a075 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sun, 22 Mar 2026 11:34:06 +0100
Subject: [PATCH 11/15] fixes

---
 .../ts/components/modals/QuoteSearchModal.tsx | 25 ++++++++++++++-----
 frontend/src/ts/states/quote-rate.ts          |  1 +
 frontend/src/ts/states/quote-report.ts        |  8 ++++++
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/frontend/src/ts/components/modals/QuoteSearchModal.tsx b/frontend/src/ts/components/modals/QuoteSearchModal.tsx
index b7dd5e71761b..2ba8ac5fa2e5 100644
--- a/frontend/src/ts/components/modals/QuoteSearchModal.tsx
+++ b/frontend/src/ts/components/modals/QuoteSearchModal.tsx
@@ -10,6 +10,7 @@ import {
 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 { isAuthenticated } from "../../firebase";
@@ -99,7 +100,7 @@ function Item(props: {
   dataBalloonDirection: string;
   onSelect: () => void;
   onReport: () => void;
-  onToggleFavorite: () => void;
+  onToggleFavorite: () => Promise<boolean>;
 }): JSXElement {
   const loggedOut = (): boolean => !isAuthenticated();
   const [isFav, setIsFav] = createSignal(
@@ -107,9 +108,12 @@ function Item(props: {
     !loggedOut() && QuotesController.isQuoteFavorite(props.quote),
   );
 
-  const handleToggleFavorite = (): void => {
+  const handleToggleFavorite = async (): Promise<void> => {
     setIsFav((v) => !v);
-    props.onToggleFavorite();
+    const success = await props.onToggleFavorite();
+    if (!success) {
+      setIsFav((v) => !v);
+    }
   };
 
   return (
@@ -173,7 +177,7 @@ function Item(props: {
                 }}
                 onClick={(e) => {
                   e.stopPropagation();
-                  handleToggleFavorite();
+                  void handleToggleFavorite();
                 }}
                 balloon={{
                   text: "Favorite quote",
@@ -389,7 +393,7 @@ export function QuoteSearchModal(): JSXElement {
     hideModalAndClearChain("QuoteSearch");
   };
 
-  const toggleFavorite = async (quote: Quote): Promise<void> => {
+  const toggleFavorite = async (quote: Quote): Promise<boolean> => {
     const alreadyFavorited = QuotesController.isQuoteFavorite(quote);
 
     try {
@@ -397,6 +401,7 @@ export function QuoteSearchModal(): JSXElement {
       await QuotesController.setQuoteFavorite(quote, !alreadyFavorited);
       hideLoaderBar();
       setFavVersion((v) => v + 1);
+      return true;
     } catch (e) {
       hideLoaderBar();
       showErrorNotification(
@@ -405,10 +410,17 @@ export function QuoteSearchModal(): JSXElement {
           : "Failed to add quote to favorites",
         { error: e },
       );
+      return false;
     }
   };
 
   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 =
@@ -501,7 +513,8 @@ export function QuoteSearchModal(): JSXElement {
                 dataBalloonDirection={dataBalloonDirection()}
                 onSelect={() => applyQuote(quote.id)}
                 onReport={() => showQuoteReportModal(quote.id)}
-                onToggleFavorite={() => void toggleFavorite(quote)}
+                // oxlint-disable-next-line solid/reactivity, typescript-eslint/promise-function-async -- fire-and-forget, no reactive tracking needed
+                onToggleFavorite={() => toggleFavorite(quote)}
               />
             )}
           </For>
diff --git a/frontend/src/ts/states/quote-rate.ts b/frontend/src/ts/states/quote-rate.ts
index ca48379a2413..7e3275cbad94 100644
--- a/frontend/src/ts/states/quote-rate.ts
+++ b/frontend/src/ts/states/quote-rate.ts
@@ -53,6 +53,7 @@ export async function getQuoteStats(
   }
 
   if (response.body.data === null) {
+    setQuoteStats({});
     return {} as QuoteStats;
   }
 
diff --git a/frontend/src/ts/states/quote-report.ts b/frontend/src/ts/states/quote-report.ts
index 76c788d6814b..6c9091b0df95 100644
--- a/frontend/src/ts/states/quote-report.ts
+++ b/frontend/src/ts/states/quote-report.ts
@@ -1,11 +1,19 @@
 import { createSignal } from "solid-js";
+import { isCaptchaAvailable } from "../controllers/captcha-controller";
 import { showModal } from "./modals";
+import { showErrorNotification } from "./notifications";
 
 const [quoteId, setQuoteId] = createSignal<number>(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");
 }

From 61ddbf33b733885afea16456b574eb234964d539 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sun, 22 Mar 2026 11:36:12 +0100
Subject: [PATCH 12/15] fix

---
 frontend/src/ts/components/modals/QuoteSearchModal.tsx | 2 +-
 frontend/src/ts/components/modals/QuoteSubmitModal.tsx | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/ts/components/modals/QuoteSearchModal.tsx b/frontend/src/ts/components/modals/QuoteSearchModal.tsx
index 2ba8ac5fa2e5..4c4bc59e43d7 100644
--- a/frontend/src/ts/components/modals/QuoteSearchModal.tsx
+++ b/frontend/src/ts/components/modals/QuoteSearchModal.tsx
@@ -495,7 +495,7 @@ export function QuoteSearchModal(): JSXElement {
               }}
             />
           </div>
-          <Show when={() => isAuthenticated()}>
+          <Show when={isAuthenticated()}>
             <Button
               variant="button"
               fa={{ icon: "fa-heart", fixedWidth: true }}
diff --git a/frontend/src/ts/components/modals/QuoteSubmitModal.tsx b/frontend/src/ts/components/modals/QuoteSubmitModal.tsx
index 0b8db222751e..0f50024404f5 100644
--- a/frontend/src/ts/components/modals/QuoteSubmitModal.tsx
+++ b/frontend/src/ts/components/modals/QuoteSubmitModal.tsx
@@ -40,6 +40,7 @@ export function QuoteSubmitModal(): JSXElement {
     if (el === undefined) return;
     CaptchaController.render(el, "submitQuote");
     setLanguage(removeLanguageSize(Config.language));
+    setText("");
     setSource("");
   };
 

From 0126fa232181207139395a1bbbfae7a7360b972a Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sun, 22 Mar 2026 11:36:42 +0100
Subject: [PATCH 13/15] responsiveness

---
 frontend/src/ts/components/modals/QuoteReportModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/ts/components/modals/QuoteReportModal.tsx b/frontend/src/ts/components/modals/QuoteReportModal.tsx
index aaadb64fec00..e6e6aa49a28c 100644
--- a/frontend/src/ts/components/modals/QuoteReportModal.tsx
+++ b/frontend/src/ts/components/modals/QuoteReportModal.tsx
@@ -112,7 +112,7 @@ export function QuoteReportModal(): JSXElement {
 
   return (
     <AnimatedModal
-      modalClass="min-w-[750px]"
+      modalClass="w-full max-w-[750px]"
       id="QuoteReport"
       mode="dialog"
       title="Report a quote"

From eb87be96b64ec44029d898a95f476acf66134f48 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sun, 22 Mar 2026 16:42:49 +0100
Subject: [PATCH 14/15] use ts form

---
 .../components/modals/QuoteApproveModal.tsx   |  71 +++--
 .../ts/components/modals/QuoteReportModal.tsx | 245 ++++++++++--------
 .../ts/components/modals/QuoteSubmitModal.tsx | 221 +++++++++-------
 3 files changed, 308 insertions(+), 229 deletions(-)

diff --git a/frontend/src/ts/components/modals/QuoteApproveModal.tsx b/frontend/src/ts/components/modals/QuoteApproveModal.tsx
index 38533934d886..2d6a7d4a4248 100644
--- a/frontend/src/ts/components/modals/QuoteApproveModal.tsx
+++ b/frontend/src/ts/components/modals/QuoteApproveModal.tsx
@@ -1,4 +1,5 @@
 import { Quote } from "@monkeytype/schemas/quotes";
+import { createForm } from "@tanstack/solid-form";
 import { format } from "date-fns/format";
 import { JSXElement, createSignal, For, Show } from "solid-js";
 
@@ -17,18 +18,19 @@ function QuoteApproveItem(props: {
   quote: Quote;
   onRemove: () => void;
 }): JSXElement {
-  const originalText = (): string => props.quote.text;
-  const originalSource = (): string => props.quote.source;
-  const [text, setText] = createSignal(originalText());
-  const [source, setSource] = createSignal(originalSource());
   const [disabled, setDisabled] = createSignal(false);
 
-  const isEdited = (): boolean =>
-    text() !== originalText() || source() !== originalSource();
+  const form = createForm(() => ({
+    defaultValues: {
+      text: props.quote.text,
+      source: props.quote.source,
+    },
+  }));
+
+  const isEdited = (): boolean => form.state.isDirty;
 
   const undo = (): void => {
-    setText(originalText());
-    setSource(originalSource());
+    form.reset();
   };
 
   const approve = async (): Promise<void> => {
@@ -79,8 +81,8 @@ function QuoteApproveItem(props: {
     const response = await Ape.quotes.approveSubmission({
       body: {
         quoteId: props.quote._id,
-        editText: text(),
-        editSource: source(),
+        editText: form.state.values.text,
+        editSource: form.state.values.source,
       },
     });
     hideLoaderBar();
@@ -99,19 +101,31 @@ function QuoteApproveItem(props: {
 
   return (
     <div class="bg-bg-secondary grid gap-2 rounded p-3">
-      <textarea
-        class="w-full rounded bg-bg p-2 text-text"
-        value={text()}
-        onInput={(e) => setText(e.currentTarget.value)}
-        disabled={disabled()}
-      ></textarea>
-      <input
-        class="w-full rounded bg-bg p-2 text-text"
-        type="text"
-        placeholder="Source"
-        value={source()}
-        onInput={(e) => setSource(e.currentTarget.value)}
-        disabled={disabled()}
+      <form.Field
+        name="text"
+        children={(field) => (
+          <textarea
+            class="w-full rounded bg-bg p-2 text-text"
+            value={field().state.value}
+            onInput={(e) => field().handleChange(e.currentTarget.value)}
+            onBlur={() => field().handleBlur()}
+            disabled={disabled()}
+          ></textarea>
+        )}
+      />
+      <form.Field
+        name="source"
+        children={(field) => (
+          <input
+            class="w-full rounded bg-bg p-2 text-text"
+            type="text"
+            placeholder="Source"
+            value={field().state.value}
+            onInput={(e) => field().handleChange(e.currentTarget.value)}
+            onBlur={() => field().handleBlur()}
+            disabled={disabled()}
+          />
+        )}
       />
       <div class="flex gap-2">
         <Button
@@ -148,9 +162,14 @@ function QuoteApproveItem(props: {
         </Show>
       </div>
       <div class="flex gap-4 text-xs text-sub">
-        <div class={cn(text().length < 60 && "text-error")}>
-          <Fa icon="fa-ruler" fixedWidth /> {text().length}
-        </div>
+        <form.Field
+          name="text"
+          children={(field) => (
+            <div class={cn(field().state.value.length < 60 && "text-error")}>
+              <Fa icon="fa-ruler" fixedWidth /> {field().state.value.length}
+            </div>
+          )}
+        />
         <div>
           <Fa icon="fa-globe-americas" fixedWidth /> {props.quote.language}
         </div>
diff --git a/frontend/src/ts/components/modals/QuoteReportModal.tsx b/frontend/src/ts/components/modals/QuoteReportModal.tsx
index e6e6aa49a28c..0de7c72fae9f 100644
--- a/frontend/src/ts/components/modals/QuoteReportModal.tsx
+++ b/frontend/src/ts/components/modals/QuoteReportModal.tsx
@@ -1,4 +1,5 @@
 import { QuoteReportReason } from "@monkeytype/schemas/quotes";
+import { createForm } from "@tanstack/solid-form";
 import { JSXElement, createSignal } from "solid-js";
 
 import Ape from "../../ape";
@@ -18,24 +19,77 @@ import { removeLanguageSize } from "../../utils/strings";
 import { AnimatedModal } from "../common/AnimatedModal";
 import { Button } from "../common/Button";
 import { Separator } from "../common/Separator";
+import { fieldMandatory } from "../ui/form/utils";
 import SlimSelect from "../ui/SlimSelect";
 
 export function QuoteReportModal(): JSXElement {
   const [captchaRef, captchaEl] = useRef<HTMLDivElement>();
   const [quoteText, setQuoteText] = createSignal("");
-  const [reason, setReason] =
-    createSignal<QuoteReportReason>("Grammatical error");
-  const [comment, setComment] = createSignal("");
   const [captchaComplete, setCaptchaComplete] = createSignal(false);
 
-  const charsRemaining = (): number => 250 - comment().length;
-  const canSubmit = (): boolean =>
-    comment().length > 0 && comment().length <= 250 && captchaComplete();
+  const form = createForm(() => ({
+    defaultValues: {
+      reason: "Grammatical error" as QuoteReportReason,
+      comment: "",
+    },
+    onSubmit: async ({ value }) => {
+      const captchaResponse = CaptchaController.getResponse("quoteReportModal");
+      if (!captchaResponse) {
+        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;
+      }
+
+      const characterDifference = value.comment.length - 250;
+      if (characterDifference > 0) {
+        showNoticeNotification(
+          `Report comment is ${characterDifference} character(s) too long`,
+        );
+        return;
+      }
+
+      showLoaderBar();
+      const response = await Ape.quotes.report({
+        body: {
+          quoteId: id,
+          quoteLanguage,
+          reason: value.reason,
+          comment: value.comment,
+          captcha: captchaResponse,
+        },
+      });
+      hideLoaderBar();
+
+      if (response.status !== 200) {
+        showErrorNotification("Failed to report quote", { response });
+        return;
+      }
+
+      showSuccessNotification("Report submitted. Thank you!");
+      hideModalAndClearChain("QuoteReport");
+    },
+    onSubmitInvalid: () => {
+      showNoticeNotification("Please fill in all fields");
+    },
+  }));
 
   const handleBeforeShow = async (): Promise<void> => {
-    setComment("");
-    setReason("Grammatical error");
     setCaptchaComplete(false);
+    form.update({
+      ...form.options,
+      defaultValues: {
+        reason: "Grammatical error" as QuoteReportReason,
+        comment: "",
+      },
+    });
+    form.reset();
 
     const language =
       Config.language === "swiss_german" ? "german" : Config.language;
@@ -56,60 +110,6 @@ export function QuoteReportModal(): JSXElement {
     CaptchaController.reset("quoteReportModal");
   };
 
-  const submit = async (): Promise<void> => {
-    const captchaResponse = CaptchaController.getResponse("quoteReportModal");
-    if (!captchaResponse) {
-      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;
-    }
-
-    if (!reason()) {
-      showNoticeNotification("Please select a valid report reason");
-      return;
-    }
-
-    if (!comment()) {
-      showNoticeNotification("Please provide a comment");
-      return;
-    }
-
-    const characterDifference = comment().length - 250;
-    if (characterDifference > 0) {
-      showNoticeNotification(
-        `Report comment is ${characterDifference} character(s) too long`,
-      );
-      return;
-    }
-
-    showLoaderBar();
-    const response = await Ape.quotes.report({
-      body: {
-        quoteId: id,
-        quoteLanguage,
-        reason: reason(),
-        comment: comment(),
-        captcha: captchaResponse,
-      },
-    });
-    hideLoaderBar();
-
-    if (response.status !== 200) {
-      showErrorNotification("Failed to report quote", { response });
-      return;
-    }
-
-    showSuccessNotification("Report submitted. Thank you!");
-    hideModalAndClearChain("QuoteReport");
-  };
-
   return (
     <AnimatedModal
       modalClass="w-full max-w-[750px]"
@@ -120,56 +120,81 @@ export function QuoteReportModal(): JSXElement {
       afterShow={handleAfterShow}
       afterHide={handleAfterHide}
     >
-      Please report quotes responsibly - misuse may result in you losing access
-      to this feature.
-      <br />
-      <span class="text-error">Please add comments in English only.</span>
-      <Separator />
-      <div class="grid gap-1">
-        <label class="text-sub">quote</label>
-        <div class="text-xl text-text" dir="auto">
-          {quoteText()}
-        </div>
-      </div>
-      <div class="grid gap-1">
-        <label class="text-sub">reason</label>
-        <SlimSelect
-          options={[
-            { value: "Grammatical error", text: "Grammatical error" },
-            { value: "Duplicate quote", text: "Duplicate quote" },
-            { value: "Inappropriate content", text: "Inappropriate content" },
-            { value: "Low quality content", text: "Low quality content" },
-            { value: "Incorrect source", text: "Incorrect source" },
-          ]}
-          selected={reason()}
-          onChange={(val) =>
-            setReason((val ?? "Grammatical error") as QuoteReportReason)
-          }
-          settings={{ showSearch: false }}
-        />
-      </div>
-      <div class="grid gap-1">
-        <label class="text-sub">comment</label>
-        <div class="relative">
-          <textarea
-            class="bg-bg-secondary min-h-50 w-full rounded p-2 text-text"
-            value={comment()}
-            onInput={(e) => setComment(e.currentTarget.value)}
-            autocomplete="off"
-          ></textarea>
-          <div
-            class={`absolute right-2 bottom-2 text-xs ${charsRemaining() < 0 ? "text-error" : "text-sub"}`}
-          >
-            {charsRemaining()}
+      <form
+        class="grid gap-4"
+        onSubmit={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          void form.handleSubmit();
+        }}
+      >
+        Please report quotes responsibly - misuse may result in you losing
+        access to this feature.
+        <br />
+        <span class="text-error">Please add comments in English only.</span>
+        <Separator />
+        <div class="grid gap-1">
+          <label class="text-sub">quote</label>
+          <div class="text-xl text-text" dir="auto">
+            {quoteText()}
           </div>
         </div>
-      </div>
-      <div ref={captchaRef}></div>
-      <Button
-        text="report"
-        disabled={!canSubmit()}
-        onClick={() => void submit()}
-      />
+        <form.Field
+          name="reason"
+          children={(field) => (
+            <div class="grid gap-1">
+              <label class="text-sub">reason</label>
+              <SlimSelect
+                options={[
+                  { value: "Grammatical error", text: "Grammatical error" },
+                  { value: "Duplicate quote", text: "Duplicate quote" },
+                  {
+                    value: "Inappropriate content",
+                    text: "Inappropriate content",
+                  },
+                  {
+                    value: "Low quality content",
+                    text: "Low quality content",
+                  },
+                  { value: "Incorrect source", text: "Incorrect source" },
+                ]}
+                selected={field().state.value}
+                onChange={(val) =>
+                  field().handleChange(
+                    (val ?? "Grammatical error") as QuoteReportReason,
+                  )
+                }
+                settings={{ showSearch: false }}
+              />
+            </div>
+          )}
+        />
+        <form.Field
+          name="comment"
+          validators={{ onChange: fieldMandatory<string>() }}
+          children={(field) => (
+            <div class="grid gap-1">
+              <label class="text-sub">comment</label>
+              <div class="relative">
+                <textarea
+                  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"}`}
+                >
+                  {250 - field().state.value.length}
+                </div>
+              </div>
+            </div>
+          )}
+        />
+        <div ref={captchaRef}></div>
+        <Button type="submit" text="report" disabled={!captchaComplete()} />
+      </form>
     </AnimatedModal>
   );
 }
diff --git a/frontend/src/ts/components/modals/QuoteSubmitModal.tsx b/frontend/src/ts/components/modals/QuoteSubmitModal.tsx
index 0f50024404f5..8733983b7254 100644
--- a/frontend/src/ts/components/modals/QuoteSubmitModal.tsx
+++ b/frontend/src/ts/components/modals/QuoteSubmitModal.tsx
@@ -1,5 +1,6 @@
 import { Language } from "@monkeytype/schemas/languages";
-import { JSXElement, createSignal } from "solid-js";
+import { createForm } from "@tanstack/solid-form";
+import { JSXElement } from "solid-js";
 
 import Ape from "../../ape";
 import { Config } from "../../config/store";
@@ -16,17 +17,11 @@ import {
 import { removeLanguageSize } from "../../utils/strings";
 import { AnimatedModal } from "../common/AnimatedModal";
 import { Button } from "../common/Button";
+import { fieldMandatory } from "../ui/form/utils";
 import SlimSelect from "../ui/SlimSelect";
 
 export function QuoteSubmitModal(): JSXElement {
   const [captchaRef, captchaEl] = useRef<HTMLDivElement>();
-  const [text, setText] = createSignal("");
-  const [source, setSource] = createSignal("");
-  const [language, setLanguage] = createSignal<string>(
-    removeLanguageSize(Config.language),
-  );
-
-  const charsRemaining = (): number => 250 - text().length;
 
   const languageOptions = LanguageGroupNames.filter(
     (g) => g !== "swiss_german",
@@ -35,51 +30,57 @@ export function QuoteSubmitModal(): JSXElement {
     text: g.replace(/_/g, " "),
   }));
 
-  const handleAfterShow = (): void => {
-    const el = captchaEl();
-    if (el === undefined) return;
-    CaptchaController.render(el, "submitQuote");
-    setLanguage(removeLanguageSize(Config.language));
-    setText("");
-    setSource("");
-  };
+  const form = createForm(() => ({
+    defaultValues: {
+      text: "",
+      source: "",
+      language: removeLanguageSize(Config.language) as string,
+    },
+    onSubmit: async ({ value }) => {
+      const captcha = CaptchaController.getResponse("submitQuote");
 
-  const handleAfterHide = (): void => {
-    CaptchaController.reset("submitQuote");
-  };
+      showLoaderBar();
+      const response = await Ape.quotes.add({
+        body: {
+          text: value.text,
+          source: value.source,
+          language: value.language as Language,
+          captcha,
+        },
+      });
+      hideLoaderBar();
 
-  const submit = async (): Promise<void> => {
-    const captcha = CaptchaController.getResponse("submitQuote");
-    const quoteText = text();
-    const quoteSource = source();
-    const quoteLang = language() as Language;
+      if (response.status !== 200) {
+        showErrorNotification("Failed to submit quote", { response });
+        return;
+      }
 
-    if (!quoteText || !quoteSource || !quoteLang) {
+      showSuccessNotification("Quote submitted.");
+      CaptchaController.reset("submitQuote");
+      hideModalAndClearChain("QuoteSubmit");
+    },
+    onSubmitInvalid: () => {
       showNoticeNotification("Please fill in all fields");
-      return;
-    }
+    },
+  }));
 
-    showLoaderBar();
-    const response = await Ape.quotes.add({
-      body: {
-        text: quoteText,
-        source: quoteSource,
-        language: quoteLang,
-        captcha,
+  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,
       },
     });
-    hideLoaderBar();
-
-    if (response.status !== 200) {
-      showErrorNotification("Failed to submit quote", { response });
-      return;
-    }
+    form.reset();
+  };
 
-    showSuccessNotification("Quote submitted.");
-    setText("");
-    setSource("");
+  const handleAfterHide = (): void => {
     CaptchaController.reset("submitQuote");
-    hideModalAndClearChain("QuoteSubmit");
   };
 
   return (
@@ -91,55 +92,89 @@ export function QuoteSubmitModal(): JSXElement {
       afterShow={handleAfterShow}
       afterHide={handleAfterHide}
     >
-      <ul class="list-disc pl-4 text-sm text-sub">
-        <li>
-          Do not include content that contains any libelous or otherwise
-          unlawful, abusive or obscene text.
-        </li>
-        <li>
-          Verify quotes added aren{"'"}t duplicates of any already present
-        </li>
-        <li>
-          Please do not add extremely short quotes (less than 60 characters)
-        </li>
-        <li>
-          <b>
-            Submitting low quality quotes or misusing this form will cause you
-            to lose access to this feature
-          </b>
-        </li>
-      </ul>
-      <label class="text-xs text-sub">quote</label>
-      <div class="relative">
-        <textarea
-          class="bg-bg-secondary w-full rounded p-2 text-text"
-          value={text()}
-          onInput={(e) => setText(e.currentTarget.value)}
-          autocomplete="off"
-          dir="auto"
-        ></textarea>
-        <div
-          class={`absolute right-2 bottom-2 text-xs ${charsRemaining() < 0 ? "text-error" : "text-sub"}`}
-        >
-          {charsRemaining()}
-        </div>
-      </div>
-      <label class="text-xs text-sub">source</label>
-      <input
-        class="bg-bg-secondary w-full rounded p-2 text-text"
-        type="text"
-        value={source()}
-        onInput={(e) => setSource(e.currentTarget.value)}
-        autocomplete="off"
-      />
-      <label class="text-xs text-sub">language</label>
-      <SlimSelect
-        options={languageOptions}
-        selected={language()}
-        onChange={(val) => setLanguage(val ?? "")}
-      />
-      <div ref={captchaRef}></div>
-      <Button text="submit" onClick={() => void submit()} />
+      <form
+        class="grid gap-4"
+        onSubmit={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          void form.handleSubmit();
+        }}
+      >
+        <ul class="list-disc pl-4 text-sm text-sub">
+          <li>
+            Do not include content that contains any libelous or otherwise
+            unlawful, abusive or obscene text.
+          </li>
+          <li>
+            Verify quotes added aren{"'"}t duplicates of any already present
+          </li>
+          <li>
+            Please do not add extremely short quotes (less than 60 characters)
+          </li>
+          <li>
+            <b>
+              Submitting low quality quotes or misusing this form will cause you
+              to lose access to this feature
+            </b>
+          </li>
+        </ul>
+        <form.Field
+          name="text"
+          validators={{ onChange: fieldMandatory<string>() }}
+          children={(field) => (
+            <div class="grid gap-1">
+              <label class="text-xs text-sub">quote</label>
+              <div class="relative">
+                <textarea
+                  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"}`}
+                >
+                  {250 - field().state.value.length}
+                </div>
+              </div>
+            </div>
+          )}
+        />
+        <form.Field
+          name="source"
+          validators={{ onChange: fieldMandatory<string>() }}
+          children={(field) => (
+            <div class="grid gap-1">
+              <label class="text-xs text-sub">source</label>
+              <input
+                class="bg-bg-secondary w-full rounded p-2 text-text"
+                type="text"
+                value={field().state.value}
+                onInput={(e) => field().handleChange(e.currentTarget.value)}
+                onBlur={() => field().handleBlur()}
+                autocomplete="off"
+              />
+            </div>
+          )}
+        />
+        <form.Field
+          name="language"
+          children={(field) => (
+            <div class="grid gap-1">
+              <label class="text-xs text-sub">language</label>
+              <SlimSelect
+                options={languageOptions}
+                selected={field().state.value}
+                onChange={(val) => field().handleChange(val ?? "")}
+              />
+            </div>
+          )}
+        />
+        <div ref={captchaRef}></div>
+        <Button type="submit" text="submit" />
+      </form>
     </AnimatedModal>
   );
 }

From 885133f94772c04684ec67da46f3184f1315fc9f Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sun, 22 Mar 2026 21:29:51 +0100
Subject: [PATCH 15/15] fix

---
 frontend/src/styles/popups.scss | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/frontend/src/styles/popups.scss b/frontend/src/styles/popups.scss
index 89e4ec05a0b4..2a5c1a0e92d4 100644
--- a/frontend/src/styles/popups.scss
+++ b/frontend/src/styles/popups.scss
@@ -514,7 +514,6 @@ body.darkMode {
   }
 }
 
-
 #simpleModal {
   .modal {
     max-width: 500px;
@@ -850,7 +849,6 @@ body.darkMode {
   }
 }
 
-
 #importExportSettingsModal {
   .modal {
     max-width: 900px;
@@ -955,7 +953,6 @@ body.darkMode {
   }
 }
 
-
 #userReportModal {
   .modal {
     max-width: 800px;