From da6e281dd416ef12dd2b855419eb1ac50cd56a91 Mon Sep 17 00:00:00 2001
From: d1rshan <darshan.paccha@gmail.com>
Date: Sat, 23 May 2026 10:59:39 +0530
Subject: [PATCH 01/13] wip

---
 frontend/src/html/popups.html                 |  29 ---
 frontend/src/styles/popups.scss               |  68 ------
 frontend/src/ts/components/modals/Modals.tsx  |   2 +
 .../ts/components/modals/PbTablesModal.tsx    | 200 ++++++++++++++++++
 .../components/pages/profile/UserProfile.tsx  |   4 +-
 frontend/src/ts/modals/pb-tables.ts           | 107 ----------
 frontend/src/ts/states/modals.ts              |   1 +
 frontend/src/ts/states/pb-tables-modal.ts     |  14 ++
 8 files changed, 219 insertions(+), 206 deletions(-)
 create mode 100644 frontend/src/ts/components/modals/PbTablesModal.tsx
 delete mode 100644 frontend/src/ts/modals/pb-tables.ts
 create mode 100644 frontend/src/ts/states/pb-tables-modal.ts

diff --git a/frontend/src/html/popups.html b/frontend/src/html/popups.html
index 216026bc2132..b3b2bd386e6e 100644
--- a/frontend/src/html/popups.html
+++ b/frontend/src/html/popups.html
@@ -58,35 +58,6 @@
   </div>
 </div>
 
-<dialog id="pbTablesModal" class="modalWrapper hidden">
-  <div class="modal">
-    <table>
-      <thead>
-        <tr>
-          <td width="1%">words</td>
-          <td>
-            <span class="unit">wpm</span>
-            <br />
-            <span class="sub">accuracy</span>
-          </td>
-          <td>
-            raw
-            <br />
-            <span class="sub">consistency</span>
-          </td>
-          <td>difficulty</td>
-          <td>language</td>
-          <td>punctuation</td>
-          <td>numbers</td>
-          <td>lazy mode</td>
-          <td>date</td>
-        </tr>
-      </thead>
-      <tbody></tbody>
-    </table>
-  </div>
-</dialog>
-
 <dialog id="practiseWordsModal" class="modalWrapper hidden">
   <div class="modal" actions="">
     <div class="title">Practice words</div>
diff --git a/frontend/src/styles/popups.scss b/frontend/src/styles/popups.scss
index b5178db43a68..d14736c2d1c5 100644
--- a/frontend/src/styles/popups.scss
+++ b/frontend/src/styles/popups.scss
@@ -259,74 +259,6 @@ body.darkMode {
   }
 }
 
-#pbTablesModal {
-  .modal {
-    max-width: 100%;
-    overflow-y: scroll;
-    table {
-      border-spacing: 0;
-      border-collapse: collapse;
-      color: var(--text-color);
-
-      tbody {
-        clip-path: inset(0);
-      }
-
-      td {
-        padding: 0.5rem 0.5rem;
-      }
-
-      .modesticky {
-        position: sticky;
-        top: calc(1rem - 2px);
-        z-index: 2;
-      }
-
-      thead {
-        color: var(--sub-color);
-        font-size: 0.75rem;
-        position: sticky;
-        top: -2rem;
-        background-color: var(--bg-color) !important;
-        z-index: 3;
-      }
-
-      tbody tr.odd {
-        background: var(--sub-alt-color);
-      }
-
-      tbody tr.even {
-        background: var(--bg-color);
-      }
-
-      td.infoIcons span {
-        margin: 0 0.1rem;
-      }
-      .miniResultChartButton {
-        opacity: 0.25;
-        transition: 0.25s;
-        cursor: pointer;
-        &:hover {
-          opacity: 1;
-        }
-      }
-      .sub {
-        opacity: 0.5;
-      }
-      td {
-        text-align: right;
-      }
-      td:nth-child(6),
-      td:nth-child(7) {
-        text-align: center;
-      }
-      tbody td:nth-child(1) {
-        font-size: 1.5rem;
-      }
-    }
-  }
-}
-
 #importExportSettingsModal {
   .modal {
     max-width: 900px;
diff --git a/frontend/src/ts/components/modals/Modals.tsx b/frontend/src/ts/components/modals/Modals.tsx
index 44de2d887a34..5fa0b3aec832 100644
--- a/frontend/src/ts/components/modals/Modals.tsx
+++ b/frontend/src/ts/components/modals/Modals.tsx
@@ -6,6 +6,7 @@ import { CustomTestDurationModal } from "./CustomTestDurationModal";
 import { CustomTextModal } from "./CustomTextModal";
 import { CustomWordAmountModal } from "./CustomWordAmountModal";
 import { MobileTestConfigModal } from "./MobileTestConfigModal";
+import { PbTablesModal } from "./PbTablesModal";
 import { AddPresetModal } from "./preset/AddPresetModal";
 import { EditPresetModal } from "./preset/EditPresetModal";
 import { QuoteRateModal } from "./QuoteRateModal";
@@ -31,6 +32,7 @@ export function Modals(): JSXElement {
       <QuoteSearchModal />
       <CustomTestDurationModal />
       <CustomWordAmountModal />
+      <PbTablesModal />
       <ShareTestSettings />
       <MobileTestConfigModal />
       <CookiesModal />
diff --git a/frontend/src/ts/components/modals/PbTablesModal.tsx b/frontend/src/ts/components/modals/PbTablesModal.tsx
new file mode 100644
index 000000000000..8f4e0f9a184d
--- /dev/null
+++ b/frontend/src/ts/components/modals/PbTablesModal.tsx
@@ -0,0 +1,200 @@
+import { format as formatDate } from "date-fns/format";
+import {
+  type Mode,
+  type Mode2,
+  type PersonalBest,
+} from "@monkeytype/schemas/shared";
+import { createMemo, createSignal, For, JSXElement, Show } from "solid-js";
+
+import * as DB from "../../db";
+import { getConfig } from "../../config/store";
+import { pbTablesMode } from "../../states/pb-tables-modal";
+import { getLanguageDisplayString } from "../../utils/strings";
+import { Formatting } from "../../utils/format";
+import { AnimatedModal } from "../common/AnimatedModal";
+import { Fa } from "../common/Fa";
+
+type PBWithMode2 = PersonalBest & {
+  mode2: Mode2<Mode>;
+};
+
+type PBRow = {
+  rowClass: "odd" | "even";
+  pb: PBWithMode2;
+};
+
+type PBGroup = {
+  mode2: Mode2<Mode>;
+  rows: PBRow[];
+};
+
+function buildGroups(mode: Mode): PBGroup[] {
+  const snapshot = DB.getSnapshot();
+  if (snapshot === undefined) return [];
+
+  const allMode2 = snapshot.personalBests?.[mode] as
+    | Record<string, PBWithMode2[]>
+    | undefined;
+  if (allMode2 === undefined) return [];
+
+  const list: PBWithMode2[] = [];
+  Object.keys(allMode2).forEach((key) => {
+    const pbs = [...(allMode2[key] ?? [])].sort((a, b) => b.wpm - a.wpm);
+    pbs.forEach((pb) => {
+      list.push({
+        ...pb,
+        mode2: key as Mode2<Mode>,
+      });
+    });
+  });
+
+  const groups: PBGroup[] = [];
+  let currentGroup: PBGroup | undefined;
+
+  list.forEach((pb, index) => {
+    if (currentGroup?.mode2 !== pb.mode2) {
+      currentGroup = {
+        mode2: pb.mode2,
+        rows: [],
+      };
+      groups.push(currentGroup);
+    }
+
+    currentGroup.rows.push({
+      pb,
+      rowClass: index % 2 === 0 ? "odd" : "even",
+    });
+  });
+
+  return groups;
+}
+
+export function PbTablesModal(): JSXElement {
+  const [groups, setGroups] = createSignal<PBGroup[]>([]);
+  const format = createMemo(() => new Formatting(getConfig));
+  const mode = createMemo(() => pbTablesMode());
+
+  return (
+    <AnimatedModal
+      id="PbTables"
+      modalClass="max-w-full gap-0 overflow-y-scroll p-8"
+      beforeShow={() => {
+        setGroups(buildGroups(mode()));
+      }}
+    >
+      <table class="border-collapse border-spacing-0 text-text">
+        <thead class="sticky -top-8 z-3 bg-bg text-xs text-sub">
+          <tr>
+            <td class="px-2 py-2" width="1%">
+              {mode()}
+            </td>
+            <td class="px-2 py-2 text-right">
+              <span>{format().typingSpeedUnit}</span>
+              <br />
+              <span class="opacity-50">accuracy</span>
+            </td>
+            <td class="px-2 py-2 text-right">
+              raw
+              <br />
+              <span class="opacity-50">consistency</span>
+            </td>
+            <td class="px-2 py-2 text-right">difficulty</td>
+            <td class="px-2 py-2 text-right">language</td>
+            <td class="px-2 py-2 text-center">punctuation</td>
+            <td class="px-2 py-2 text-center">numbers</td>
+            <td class="px-2 py-2 text-right">lazy mode</td>
+            <td class="px-2 py-2 text-right">date</td>
+          </tr>
+        </thead>
+        <For each={groups()}>
+          {(group) => (
+            <tbody class="[clip-path:inset(0)]">
+              <For each={group.rows}>
+                {(row, index) => {
+                  const date = () =>
+                    row.pb.timestamp ? new Date(row.pb.timestamp) : undefined;
+                  const rowBackground =
+                    row.rowClass === "odd" ? "bg-sub-alt" : "bg-bg";
+
+                  return (
+                    <tr class={rowBackground}>
+                      <Show
+                        when={index() === 0}
+                        fallback={<td class="px-2 py-2 text-right"></td>}
+                      >
+                        <td
+                          class={`${rowBackground} sticky top-[calc(1rem-2px)] z-2 px-2 py-2 text-right text-2xl`}
+                        >
+                          {group.mode2}
+                        </td>
+                      </Show>
+                      <td class="px-2 py-2 text-right">
+                        {format().typingSpeed(row.pb.wpm)}
+                        <br />
+                        <span class="opacity-50">
+                          {format().accuracy(row.pb.acc)}
+                        </span>
+                      </td>
+                      <td class="px-2 py-2 text-right">
+                        {format().typingSpeed(row.pb.raw)}
+                        <br />
+                        <span class="opacity-50">
+                          {format().percentage(row.pb.consistency)}
+                        </span>
+                      </td>
+                      <td class="px-2 py-2 text-right">{row.pb.difficulty}</td>
+                      <td class="px-2 py-2 text-right">
+                        {row.pb.language
+                          ? getLanguageDisplayString(row.pb.language)
+                          : "-"}
+                      </td>
+                      <td class="px-2 py-2 text-center">
+                        <Show when={row.pb.punctuation}>
+                          <Fa icon="fa-check" />
+                        </Show>
+                      </td>
+                      <td class="px-2 py-2 text-center">
+                        <Show when={row.pb.numbers}>
+                          <Fa icon="fa-check" />
+                        </Show>
+                      </td>
+                      <td class="px-2 py-2 text-right">
+                        <Show when={row.pb.lazyMode}>
+                          <Fa icon="fa-check" />
+                        </Show>
+                      </td>
+                      <td class="px-2 py-2 text-right">
+                        <Show
+                          when={date() !== undefined}
+                          fallback={
+                            <>
+                              -
+                              <br />
+                              <span class="opacity-50">-</span>
+                            </>
+                          }
+                        >
+                          <Show when={date()}>
+                            {(safeDate) => (
+                              <>
+                                {formatDate(safeDate(), "dd MMM yyyy")}
+                                <br />
+                                <div class="opacity-50">
+                                  {formatDate(safeDate(), "HH:mm")}
+                                </div>
+                              </>
+                            )}
+                          </Show>
+                        </Show>
+                      </td>
+                    </tr>
+                  );
+                }}
+              </For>
+            </tbody>
+          )}
+        </For>
+      </table>
+    </AnimatedModal>
+  );
+}
diff --git a/frontend/src/ts/components/pages/profile/UserProfile.tsx b/frontend/src/ts/components/pages/profile/UserProfile.tsx
index 3bc907fb4b1e..82abcdc1ab9c 100644
--- a/frontend/src/ts/components/pages/profile/UserProfile.tsx
+++ b/frontend/src/ts/components/pages/profile/UserProfile.tsx
@@ -7,7 +7,7 @@ import { formatDate } from "date-fns/format";
 import { createMemo, For, JSXElement, Show } from "solid-js";
 
 import { getConfig } from "../../../config/store";
-import * as PbTablesModal from "../../../modals/pb-tables";
+import { showPbTablesModal } from "../../../states/pb-tables-modal";
 import { Formatting } from "../../../utils/format";
 import { formatTopPercentage } from "../../../utils/misc";
 import { Button } from "../../common/Button";
@@ -176,7 +176,7 @@ function PbTable<M extends "time" | "words">(props: {
             balloon={{ text: "Show all personal bests", position: "left" }}
             class="h-full rounded-none rounded-r text-sub hover:text-bg"
             fa={{ icon: "fa-ellipsis-v" }}
-            onClick={() => PbTablesModal.show(props.mode)}
+            onClick={() => showPbTablesModal(props.mode)}
           />
         </div>
       </Show>
diff --git a/frontend/src/ts/modals/pb-tables.ts b/frontend/src/ts/modals/pb-tables.ts
deleted file mode 100644
index 81d0da3b7426..000000000000
--- a/frontend/src/ts/modals/pb-tables.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-import * as DB from "../db";
-import { format } from "date-fns/format";
-import { getLanguageDisplayString } from "../utils/strings";
-import { Config } from "../config/store";
-import Format from "../singletons/format";
-import AnimatedModal from "../utils/animated-modal";
-import { Mode, Mode2, PersonalBest } from "@monkeytype/schemas/shared";
-
-type PBWithMode2 = {
-  mode2: Mode2<Mode>;
-} & PersonalBest;
-
-function update(mode: Mode): void {
-  const modalEl = modal.getModal();
-
-  const tableEl = modalEl.qs("table");
-  tableEl?.qsa("tbody").remove();
-  modalEl.qs("thead td:first-child")?.setText(mode);
-  modalEl.qs("thead span.unit")?.setText(Config.typingSpeedUnit);
-
-  const snapshot = DB.getSnapshot();
-  if (!snapshot) return;
-
-  const allmode2 = snapshot.personalBests?.[mode] as
-    | Record<string, PBWithMode2[]>
-    | undefined;
-
-  if (allmode2 === undefined) return;
-
-  const list: PBWithMode2[] = [];
-  Object.keys(allmode2).forEach(function (key) {
-    let pbs = allmode2[key] ?? [];
-    pbs = pbs.sort(function (a, b) {
-      return b.wpm - a.wpm;
-    });
-    pbs.forEach(function (pb) {
-      pb.mode2 = key;
-      list.push(pb);
-    });
-  });
-
-  let mode2memory: Mode2<Mode> | null = null;
-  let currentTbody: HTMLTableSectionElement | null = null;
-  let rowIndex: number = 1;
-
-  list.forEach((pb) => {
-    const isNewGroup = mode2memory !== pb.mode2 || currentTbody === null;
-    if (isNewGroup) {
-      currentTbody = document.createElement("tbody");
-      tableEl?.append(currentTbody);
-    }
-    let dateText = `-<br><span class="sub">-</span>`;
-    const date = new Date(pb.timestamp);
-    if (pb.timestamp) {
-      dateText = `${format(date, "dd MMM yyyy")}<br><div class='sub'>${format(
-        date,
-        "HH:mm",
-      )}</div>`;
-    }
-    currentTbody?.insertAdjacentHTML(
-      "beforeend",
-      `
-      <tr class="${rowIndex % 2 ? "odd" : "even"}">
-        ${
-          isNewGroup
-            ? `
-            <td class="modesticky">
-              ${pb.mode2}
-            </td>
-          `
-            : "<td></td>"
-        }
-        <td>
-          ${Format.typingSpeed(pb.wpm)}
-          <br />
-          <span class="sub">${Format.accuracy(pb.acc)}</span>
-        </td>
-        <td>
-          ${Format.typingSpeed(pb.raw)}
-          <br />
-          <span class="sub">${Format.percentage(pb.consistency)}</span>
-        </td>
-        <td>${pb.difficulty}</td>
-        <td>${pb.language ? getLanguageDisplayString(pb.language) : "-"}</td>
-        <td>${pb.punctuation ? '<i class="fas fa-check"></i>' : ""}</td>
-        <td>${pb.numbers ? '<i class="fas fa-check"></i>' : ""}</td>
-        <td>${pb.lazyMode ? '<i class="fas fa-check"></i>' : ""}</td>
-        <td>${dateText}</td>
-      </tr>
-    `,
-    );
-    mode2memory = pb.mode2;
-    rowIndex++;
-  });
-}
-
-export function show(mode: Mode): void {
-  void modal.show({
-    beforeAnimation: async () => {
-      update(mode);
-    },
-  });
-}
-
-const modal = new AnimatedModal({
-  dialogId: "pbTablesModal",
-});
diff --git a/frontend/src/ts/states/modals.ts b/frontend/src/ts/states/modals.ts
index 2fc42734ceeb..c6cffb19e40c 100644
--- a/frontend/src/ts/states/modals.ts
+++ b/frontend/src/ts/states/modals.ts
@@ -24,6 +24,7 @@ export type ModalId =
   | "ShareTestSettings"
   | "CustomWordAmount"
   | "MobileTestConfig"
+  | "PbTables"
   | "MiniResultChartModal"
   | "Cookies"
   | "AddPresetModal"
diff --git a/frontend/src/ts/states/pb-tables-modal.ts b/frontend/src/ts/states/pb-tables-modal.ts
new file mode 100644
index 000000000000..310149d1ecfa
--- /dev/null
+++ b/frontend/src/ts/states/pb-tables-modal.ts
@@ -0,0 +1,14 @@
+import { createSignal } from "solid-js";
+
+import { Mode } from "@monkeytype/schemas/shared";
+
+import { showModal } from "./modals";
+
+const [pbTablesMode, setPbTablesMode] = createSignal<Mode>("time");
+
+export { pbTablesMode };
+
+export function showPbTablesModal(mode: Mode): void {
+  setPbTablesMode(mode);
+  showModal("PbTables");
+}

From 89217f8650f51562397aee13da0d342e764cebdc Mon Sep 17 00:00:00 2001
From: d1rshan <darshan.paccha@gmail.com>
Date: Sat, 23 May 2026 11:01:38 +0530
Subject: [PATCH 02/13] fix lint

---
 .../ts/components/modals/PbTablesModal.tsx    | 20 +++++++------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/frontend/src/ts/components/modals/PbTablesModal.tsx b/frontend/src/ts/components/modals/PbTablesModal.tsx
index 8f4e0f9a184d..c50b0fd6228c 100644
--- a/frontend/src/ts/components/modals/PbTablesModal.tsx
+++ b/frontend/src/ts/components/modals/PbTablesModal.tsx
@@ -1,21 +1,17 @@
+import { type Mode, type PersonalBest } from "@monkeytype/schemas/shared";
 import { format as formatDate } from "date-fns/format";
-import {
-  type Mode,
-  type Mode2,
-  type PersonalBest,
-} from "@monkeytype/schemas/shared";
 import { createMemo, createSignal, For, JSXElement, Show } from "solid-js";
 
-import * as DB from "../../db";
 import { getConfig } from "../../config/store";
+import * as DB from "../../db";
 import { pbTablesMode } from "../../states/pb-tables-modal";
-import { getLanguageDisplayString } from "../../utils/strings";
 import { Formatting } from "../../utils/format";
+import { getLanguageDisplayString } from "../../utils/strings";
 import { AnimatedModal } from "../common/AnimatedModal";
 import { Fa } from "../common/Fa";
 
 type PBWithMode2 = PersonalBest & {
-  mode2: Mode2<Mode>;
+  mode2: string;
 };
 
 type PBRow = {
@@ -24,7 +20,7 @@ type PBRow = {
 };
 
 type PBGroup = {
-  mode2: Mode2<Mode>;
+  mode2: string;
   rows: PBRow[];
 };
 
@@ -43,7 +39,7 @@ function buildGroups(mode: Mode): PBGroup[] {
     pbs.forEach((pb) => {
       list.push({
         ...pb,
-        mode2: key as Mode2<Mode>,
+        mode2: key,
       });
     });
   });
@@ -85,9 +81,7 @@ export function PbTablesModal(): JSXElement {
       <table class="border-collapse border-spacing-0 text-text">
         <thead class="sticky -top-8 z-3 bg-bg text-xs text-sub">
           <tr>
-            <td class="px-2 py-2" width="1%">
-              {mode()}
-            </td>
+            <td class="w-[1%] px-2 py-2">{mode()}</td>
             <td class="px-2 py-2 text-right">
               <span>{format().typingSpeedUnit}</span>
               <br />

From 62476b9c03ce0647951849d1cd9ff94cca008918 Mon Sep 17 00:00:00 2001
From: d1rshan <darshan.paccha@gmail.com>
Date: Sat, 23 May 2026 14:33:18 +0530
Subject: [PATCH 03/13] move modal to user profile

---
 frontend/src/ts/components/modals/Modals.tsx             | 2 --
 frontend/src/ts/components/pages/profile/UserProfile.tsx | 4 ++++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/ts/components/modals/Modals.tsx b/frontend/src/ts/components/modals/Modals.tsx
index 5fa0b3aec832..44de2d887a34 100644
--- a/frontend/src/ts/components/modals/Modals.tsx
+++ b/frontend/src/ts/components/modals/Modals.tsx
@@ -6,7 +6,6 @@ import { CustomTestDurationModal } from "./CustomTestDurationModal";
 import { CustomTextModal } from "./CustomTextModal";
 import { CustomWordAmountModal } from "./CustomWordAmountModal";
 import { MobileTestConfigModal } from "./MobileTestConfigModal";
-import { PbTablesModal } from "./PbTablesModal";
 import { AddPresetModal } from "./preset/AddPresetModal";
 import { EditPresetModal } from "./preset/EditPresetModal";
 import { QuoteRateModal } from "./QuoteRateModal";
@@ -32,7 +31,6 @@ export function Modals(): JSXElement {
       <QuoteSearchModal />
       <CustomTestDurationModal />
       <CustomWordAmountModal />
-      <PbTablesModal />
       <ShareTestSettings />
       <MobileTestConfigModal />
       <CookiesModal />
diff --git a/frontend/src/ts/components/pages/profile/UserProfile.tsx b/frontend/src/ts/components/pages/profile/UserProfile.tsx
index 82abcdc1ab9c..8bb49003acac 100644
--- a/frontend/src/ts/components/pages/profile/UserProfile.tsx
+++ b/frontend/src/ts/components/pages/profile/UserProfile.tsx
@@ -11,6 +11,7 @@ import { showPbTablesModal } from "../../../states/pb-tables-modal";
 import { Formatting } from "../../../utils/format";
 import { formatTopPercentage } from "../../../utils/misc";
 import { Button } from "../../common/Button";
+import { PbTablesModal } from "../../modals/PbTablesModal";
 import { ActivityCalendar } from "./ActivityCalendar";
 import { UserDetails } from "./UserDetails";
 
@@ -56,6 +57,9 @@ export function UserProfile(props: {
         testActivity={props.profile.testActivity}
         isAccountPage={props.isAccountPage}
       />
+      <Show when={props.isAccountPage === true}>
+        <PbTablesModal />
+      </Show>
     </div>
   );
 }

From db3adc5979d045962ed7f964e06b2e09fc049650 Mon Sep 17 00:00:00 2001
From: d1rshan <darshan.paccha@gmail.com>
Date: Sat, 23 May 2026 14:59:21 +0530
Subject: [PATCH 04/13] move back to modals

---
 frontend/src/ts/components/modals/Modals.tsx             | 2 ++
 frontend/src/ts/components/pages/profile/UserProfile.tsx | 4 ----
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/frontend/src/ts/components/modals/Modals.tsx b/frontend/src/ts/components/modals/Modals.tsx
index 44de2d887a34..5fa0b3aec832 100644
--- a/frontend/src/ts/components/modals/Modals.tsx
+++ b/frontend/src/ts/components/modals/Modals.tsx
@@ -6,6 +6,7 @@ import { CustomTestDurationModal } from "./CustomTestDurationModal";
 import { CustomTextModal } from "./CustomTextModal";
 import { CustomWordAmountModal } from "./CustomWordAmountModal";
 import { MobileTestConfigModal } from "./MobileTestConfigModal";
+import { PbTablesModal } from "./PbTablesModal";
 import { AddPresetModal } from "./preset/AddPresetModal";
 import { EditPresetModal } from "./preset/EditPresetModal";
 import { QuoteRateModal } from "./QuoteRateModal";
@@ -31,6 +32,7 @@ export function Modals(): JSXElement {
       <QuoteSearchModal />
       <CustomTestDurationModal />
       <CustomWordAmountModal />
+      <PbTablesModal />
       <ShareTestSettings />
       <MobileTestConfigModal />
       <CookiesModal />
diff --git a/frontend/src/ts/components/pages/profile/UserProfile.tsx b/frontend/src/ts/components/pages/profile/UserProfile.tsx
index 8bb49003acac..82abcdc1ab9c 100644
--- a/frontend/src/ts/components/pages/profile/UserProfile.tsx
+++ b/frontend/src/ts/components/pages/profile/UserProfile.tsx
@@ -11,7 +11,6 @@ import { showPbTablesModal } from "../../../states/pb-tables-modal";
 import { Formatting } from "../../../utils/format";
 import { formatTopPercentage } from "../../../utils/misc";
 import { Button } from "../../common/Button";
-import { PbTablesModal } from "../../modals/PbTablesModal";
 import { ActivityCalendar } from "./ActivityCalendar";
 import { UserDetails } from "./UserDetails";
 
@@ -57,9 +56,6 @@ export function UserProfile(props: {
         testActivity={props.profile.testActivity}
         isAccountPage={props.isAccountPage}
       />
-      <Show when={props.isAccountPage === true}>
-        <PbTablesModal />
-      </Show>
     </div>
   );
 }

From 874e22f6ab0709f14b385cd5ced82c13e037ec79 Mon Sep 17 00:00:00 2001
From: d1rshan <darshan.paccha@gmail.com>
Date: Sat, 23 May 2026 15:15:34 +0530
Subject: [PATCH 05/13] temp mock data

---
 .../components/modals/PbTablesModal.mock.ts   | 578 ++++++++++++++++++
 .../ts/components/modals/PbTablesModal.tsx    |  13 +-
 2 files changed, 587 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/ts/components/modals/PbTablesModal.mock.ts

diff --git a/frontend/src/ts/components/modals/PbTablesModal.mock.ts b/frontend/src/ts/components/modals/PbTablesModal.mock.ts
new file mode 100644
index 000000000000..6a7c80b7981a
--- /dev/null
+++ b/frontend/src/ts/components/modals/PbTablesModal.mock.ts
@@ -0,0 +1,578 @@
+import { type PersonalBests } from "@monkeytype/schemas/shared";
+
+export const USE_MOCK_PB_DATA = true;
+
+export const MOCK_PERSONAL_BESTS: Pick<PersonalBests, "time" | "words"> = {
+  time: {
+    "15": [
+      {
+        wpm: 147,
+        raw: 152,
+        acc: 99.4,
+        consistency: 91.8,
+        difficulty: "expert",
+        language: "english",
+        punctuation: true,
+        numbers: true,
+        lazyMode: false,
+        timestamp: Date.UTC(2026, 4, 22, 10, 10),
+      },
+      {
+        wpm: 144,
+        raw: 149,
+        acc: 99.1,
+        consistency: 89.5,
+        difficulty: "expert",
+        language: "english",
+        punctuation: true,
+        numbers: false,
+        lazyMode: false,
+        timestamp: Date.UTC(2026, 4, 21, 15, 42),
+      },
+      {
+        wpm: 141,
+        raw: 146,
+        acc: 98.7,
+        consistency: 87.3,
+        difficulty: "expert",
+        language: "german",
+        punctuation: false,
+        numbers: true,
+        lazyMode: false,
+        timestamp: Date.UTC(2026, 4, 20, 9, 4),
+      },
+      {
+        wpm: 138,
+        raw: 143,
+        acc: 98.1,
+        consistency: 84.9,
+        difficulty: "normal",
+        language: "french",
+        punctuation: true,
+        numbers: false,
+        lazyMode: false,
+        timestamp: Date.UTC(2026, 4, 18, 18, 27),
+      },
+      {
+        wpm: 134,
+        raw: 139,
+        acc: 97.9,
+        consistency: 82.6,
+        difficulty: "normal",
+        language: "spanish",
+        punctuation: false,
+        numbers: true,
+        lazyMode: false,
+        timestamp: Date.UTC(2026, 4, 17, 8, 56),
+      },
+      {
+        wpm: 131,
+        raw: 137,
+        acc: 97.2,
+        consistency: 80.1,
+        difficulty: "normal",
+        language: "portuguese",
+        punctuation: true,
+        numbers: true,
+        lazyMode: false,
+        timestamp: Date.UTC(2026, 4, 16, 21, 33),
+      },
+      {
+        wpm: 128,
+        raw: 133,
+        acc: 96.8,
+        consistency: 78.4,
+        difficulty: "normal",
+        language: "italian",
+        punctuation: false,
+        numbers: false,
+        lazyMode: false,
+        timestamp: Date.UTC(2026, 4, 15, 12, 8),
+      },
+      {
+        wpm: 124,
+        raw: 129,
+        acc: 96.2,
+        consistency: 75.2,
+        difficulty: "normal",
+        language: "english",
+        punctuation: true,
+        numbers: false,
+        lazyMode: true,
+        timestamp: Date.UTC(2026, 4, 14, 16, 44),
+      },
+      {
+        wpm: 120,
+        raw: 126,
+        acc: 95.6,
+        consistency: 73.9,
+        difficulty: "normal",
+        language: undefined,
+        punctuation: false,
+        numbers: true,
+        lazyMode: true,
+        timestamp: 0,
+      },
+      {
+        wpm: 116,
+        raw: 121,
+        acc: 94.8,
+        consistency: 70.7,
+        difficulty: "normal",
+        language: "english",
+        punctuation: false,
+        numbers: false,
+        lazyMode: false,
+        timestamp: Date.UTC(2026, 4, 11, 11, 18),
+      },
+    ],
+    "30": [
+      {
+        wpm: 142,
+        raw: 147,
+        acc: 99.2,
+        consistency: 90.9,
+        difficulty: "expert",
+        language: "english",
+        punctuation: true,
+        numbers: true,
+        lazyMode: false,
+        timestamp: Date.UTC(2026, 4, 22, 8, 15),
+      },
+      {
+        wpm: 139,
+        raw: 144,
+        acc: 98.8,
+        consistency: 88.2,
+        difficulty: "expert",
+        language: "german",
+        punctuation: true,
+        numbers: false,
+        lazyMode: false,
+        timestamp: Date.UTC(2026, 4, 21, 13, 3),
+      },
+      {
+        wpm: 136,
+        raw: 141,
+        acc: 98.4,
+        consistency: 86.5,
+        difficulty: "expert",
+        language: "english",
+        punctuation: false,
+        numbers: true,
+        lazyMode: false,
+        timestamp: Date.UTC(2026, 4, 20, 17, 25),
+      },
+      {
+        wpm: 132,
+        raw: 138,
+        acc: 97.9,
+        consistency: 83.4,
+        difficulty: "normal",
+        language: "french",
+        punctuation: true,
+        numbers: false,
+        lazyMode: false,
+        timestamp: Date.UTC(2026, 4, 18, 10, 59),
+      },
+      {
+        wpm: 129,
+        raw: 135,
+        acc: 97.1,
+        consistency: 81.2,
+        difficulty: "normal",
+        language: "spanish",
+        punctuation: false,
+        numbers: false,
+        lazyMode: false,
+        timestamp: Date.UTC(2026, 4, 17, 19, 10),
+      },
+      {
+        wpm: 125,
+        raw: 130,
+        acc: 96.7,
+        consistency: 78.7,
+        difficulty: "normal",
+        language: "russian",
+        punctuation: true,
+        numbers: true,
+        lazyMode: false,
+        timestamp: Date.UTC(2026, 4, 16, 22, 6),
+      },
+      {
+        wpm: 121,
+        raw: 126,
+        acc: 95.9,
+        consistency: 75.8,
+        difficulty: "normal",
+        language: undefined,
+        punctuation: false,
+        numbers: true,
+        lazyMode: true,
+        timestamp: 0,
+      },
+      {
+        wpm: 117,
+        raw: 123,
+        acc: 95.1,
+        consistency: 72.1,
+        difficulty: "normal",
+        language: "english",
+        punctuation: false,
+        numbers: false,
+        lazyMode: false,
+        timestamp: Date.UTC(2026, 4, 13, 7, 40),
+      },
+    ],
+    "60": [
+      {
+        wpm: 133,
+        raw: 138,
+        acc: 98.6,
+        consistency: 87.1,
+        difficulty: "expert",
+        language: "english",
+        punctuation: true,
+        numbers: true,
+        lazyMode: false,
+        timestamp: Date.UTC(2026, 4, 20, 6, 50),
+      },
+      {
+        wpm: 129,
+        raw: 134,
+        acc: 98.2,
+        consistency: 84.2,
+        difficulty: "expert",
+        language: "german",
+        punctuation: true,
+        numbers: false,
+        lazyMode: false,
+        timestamp: Date.UTC(2026, 4, 18, 14, 11),
+      },
+      {
+        wpm: 125,
+        raw: 130,
+        acc: 97.5,
+        consistency: 80.6,
+        difficulty: "normal",
+        language: "english",
+        punctuation: false,
+        numbers: true,
+        lazyMode: false,
+        timestamp: Date.UTC(2026, 4, 16, 9, 29),
+      },
+      {
+        wpm: 121,
+        raw: 126,
+        acc: 96.9,
+        consistency: 77.8,
+        difficulty: "normal",
+        language: "french",
+        punctuation: true,
+        numbers: false,
+        lazyMode: false,
+        timestamp: Date.UTC(2026, 4, 15, 20, 13),
+      },
+      {
+        wpm: 117,
+        raw: 122,
+        acc: 96.3,
+        consistency: 74.5,
+        difficulty: "normal",
+        language: undefined,
+        punctuation: false,
+        numbers: true,
+        lazyMode: true,
+        timestamp: 0,
+      },
+      {
+        wpm: 113,
+        raw: 119,
+        acc: 95.5,
+        consistency: 70.8,
+        difficulty: "normal",
+        language: "spanish",
+        punctuation: false,
+        numbers: false,
+        lazyMode: false,
+        timestamp: Date.UTC(2026, 4, 12, 17, 54),
+      },
+    ],
+    "120": [
+      {
+        wpm: 126,
+        raw: 130,
+        acc: 98.1,
+        consistency: 82.9,
+        difficulty: "expert",
+        language: "english",
+        punctuation: true,
+        numbers: false,
+        lazyMode: false,
+        timestamp: Date.UTC(2026, 4, 19, 12, 21),
+      },
+      {
+        wpm: 122,
+        raw: 127,
+        acc: 97.2,
+        consistency: 79.4,
+        difficulty: "normal",
+        language: "german",
+        punctuation: true,
+        numbers: true,
+        lazyMode: false,
+        timestamp: Date.UTC(2026, 4, 17, 9, 5),
+      },
+      {
+        wpm: 118,
+        raw: 123,
+        acc: 96.4,
+        consistency: 75.7,
+        difficulty: "normal",
+        language: "english",
+        punctuation: false,
+        numbers: false,
+        lazyMode: true,
+        timestamp: Date.UTC(2026, 4, 14, 18, 36),
+      },
+      {
+        wpm: 114,
+        raw: 119,
+        acc: 95.8,
+        consistency: 72.6,
+        difficulty: "normal",
+        language: undefined,
+        punctuation: false,
+        numbers: true,
+        lazyMode: false,
+        timestamp: 0,
+      },
+    ],
+  },
+  words: {
+    "10": [
+      {
+        wpm: 151,
+        raw: 156,
+        acc: 99.5,
+        consistency: 92.4,
+        difficulty: "expert",
+        language: "english",
+        punctuation: true,
+        numbers: true,
+        lazyMode: false,
+        timestamp: Date.UTC(2026, 4, 22, 11, 4),
+      },
+      {
+        wpm: 147,
+        raw: 152,
+        acc: 99.1,
+        consistency: 89.8,
+        difficulty: "expert",
+        language: "german",
+        punctuation: true,
+        numbers: false,
+        lazyMode: false,
+        timestamp: Date.UTC(2026, 4, 21, 16, 55),
+      },
+      {
+        wpm: 143,
+        raw: 148,
+        acc: 98.7,
+        consistency: 87.2,
+        difficulty: "expert",
+        language: "french",
+        punctuation: false,
+        numbers: true,
+        lazyMode: false,
+        timestamp: Date.UTC(2026, 4, 20, 8, 22),
+      },
+      {
+        wpm: 139,
+        raw: 144,
+        acc: 98.3,
+        consistency: 84.6,
+        difficulty: "normal",
+        language: "english",
+        punctuation: true,
+        numbers: false,
+        lazyMode: false,
+        timestamp: Date.UTC(2026, 4, 19, 20, 9),
+      },
+      {
+        wpm: 134,
+        raw: 139,
+        acc: 97.8,
+        consistency: 81.3,
+        difficulty: "normal",
+        language: undefined,
+        punctuation: false,
+        numbers: true,
+        lazyMode: true,
+        timestamp: 0,
+      },
+      {
+        wpm: 129,
+        raw: 135,
+        acc: 96.9,
+        consistency: 77.5,
+        difficulty: "normal",
+        language: "spanish",
+        punctuation: false,
+        numbers: false,
+        lazyMode: false,
+        timestamp: Date.UTC(2026, 4, 15, 13, 40),
+      },
+    ],
+    "25": [
+      {
+        wpm: 145,
+        raw: 150,
+        acc: 99.3,
+        consistency: 90.6,
+        difficulty: "expert",
+        language: "english",
+        punctuation: true,
+        numbers: true,
+        lazyMode: false,
+        timestamp: Date.UTC(2026, 4, 22, 7, 48),
+      },
+      {
+        wpm: 141,
+        raw: 146,
+        acc: 98.9,
+        consistency: 88.3,
+        difficulty: "expert",
+        language: "german",
+        punctuation: true,
+        numbers: false,
+        lazyMode: false,
+        timestamp: Date.UTC(2026, 4, 20, 14, 6),
+      },
+      {
+        wpm: 137,
+        raw: 142,
+        acc: 98.2,
+        consistency: 84.8,
+        difficulty: "normal",
+        language: "french",
+        punctuation: false,
+        numbers: true,
+        lazyMode: false,
+        timestamp: Date.UTC(2026, 4, 18, 10, 50),
+      },
+      {
+        wpm: 132,
+        raw: 137,
+        acc: 97.4,
+        consistency: 80.7,
+        difficulty: "normal",
+        language: "english",
+        punctuation: true,
+        numbers: false,
+        lazyMode: false,
+        timestamp: Date.UTC(2026, 4, 16, 18, 18),
+      },
+      {
+        wpm: 128,
+        raw: 133,
+        acc: 96.6,
+        consistency: 76.4,
+        difficulty: "normal",
+        language: undefined,
+        punctuation: false,
+        numbers: true,
+        lazyMode: true,
+        timestamp: 0,
+      },
+    ],
+    "50": [
+      {
+        wpm: 138,
+        raw: 143,
+        acc: 98.8,
+        consistency: 86.1,
+        difficulty: "expert",
+        language: "english",
+        punctuation: true,
+        numbers: false,
+        lazyMode: false,
+        timestamp: Date.UTC(2026, 4, 19, 9, 12),
+      },
+      {
+        wpm: 133,
+        raw: 138,
+        acc: 97.9,
+        consistency: 82.2,
+        difficulty: "normal",
+        language: "german",
+        punctuation: true,
+        numbers: true,
+        lazyMode: false,
+        timestamp: Date.UTC(2026, 4, 17, 21, 41),
+      },
+      {
+        wpm: 129,
+        raw: 134,
+        acc: 97.1,
+        consistency: 78.9,
+        difficulty: "normal",
+        language: "english",
+        punctuation: false,
+        numbers: false,
+        lazyMode: true,
+        timestamp: Date.UTC(2026, 4, 15, 11, 27),
+      },
+      {
+        wpm: 124,
+        raw: 130,
+        acc: 96.1,
+        consistency: 74.6,
+        difficulty: "normal",
+        language: undefined,
+        punctuation: false,
+        numbers: true,
+        lazyMode: false,
+        timestamp: 0,
+      },
+    ],
+    "100": [
+      {
+        wpm: 131,
+        raw: 136,
+        acc: 98.1,
+        consistency: 81.8,
+        difficulty: "expert",
+        language: "english",
+        punctuation: true,
+        numbers: false,
+        lazyMode: false,
+        timestamp: Date.UTC(2026, 4, 18, 7, 17),
+      },
+      {
+        wpm: 126,
+        raw: 131,
+        acc: 97.2,
+        consistency: 77.6,
+        difficulty: "normal",
+        language: "french",
+        punctuation: false,
+        numbers: true,
+        lazyMode: false,
+        timestamp: Date.UTC(2026, 4, 14, 19, 58),
+      },
+      {
+        wpm: 121,
+        raw: 126,
+        acc: 96.4,
+        consistency: 73.2,
+        difficulty: "normal",
+        language: undefined,
+        punctuation: false,
+        numbers: false,
+        lazyMode: true,
+        timestamp: 0,
+      },
+    ],
+  },
+};
diff --git a/frontend/src/ts/components/modals/PbTablesModal.tsx b/frontend/src/ts/components/modals/PbTablesModal.tsx
index c50b0fd6228c..286d18abc738 100644
--- a/frontend/src/ts/components/modals/PbTablesModal.tsx
+++ b/frontend/src/ts/components/modals/PbTablesModal.tsx
@@ -7,6 +7,10 @@ import * as DB from "../../db";
 import { pbTablesMode } from "../../states/pb-tables-modal";
 import { Formatting } from "../../utils/format";
 import { getLanguageDisplayString } from "../../utils/strings";
+import {
+  MOCK_PERSONAL_BESTS,
+  USE_MOCK_PB_DATA,
+} from "./PbTablesModal.mock";
 import { AnimatedModal } from "../common/AnimatedModal";
 import { Fa } from "../common/Fa";
 
@@ -25,10 +29,11 @@ type PBGroup = {
 };
 
 function buildGroups(mode: Mode): PBGroup[] {
-  const snapshot = DB.getSnapshot();
-  if (snapshot === undefined) return [];
-
-  const allMode2 = snapshot.personalBests?.[mode] as
+  const allMode2 = (
+    USE_MOCK_PB_DATA
+      ? MOCK_PERSONAL_BESTS[mode]
+      : DB.getSnapshot()?.personalBests?.[mode]
+  ) as
     | Record<string, PBWithMode2[]>
     | undefined;
   if (allMode2 === undefined) return [];

From c98c28eb34f0fa000343e9c92604355e8e6f220f Mon Sep 17 00:00:00 2001
From: d1rshan <darshan.paccha@gmail.com>
Date: Sat, 23 May 2026 15:32:58 +0530
Subject: [PATCH 06/13] fix scroll conflict

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

diff --git a/frontend/src/ts/components/modals/PbTablesModal.tsx b/frontend/src/ts/components/modals/PbTablesModal.tsx
index 286d18abc738..809ec0feadab 100644
--- a/frontend/src/ts/components/modals/PbTablesModal.tsx
+++ b/frontend/src/ts/components/modals/PbTablesModal.tsx
@@ -78,7 +78,7 @@ export function PbTablesModal(): JSXElement {
   return (
     <AnimatedModal
       id="PbTables"
-      modalClass="max-w-full gap-0 overflow-y-scroll p-8"
+      modalClass="max-w-full gap-0 overflow-y-scroll overscroll-y-contain p-8"
       beforeShow={() => {
         setGroups(buildGroups(mode()));
       }}

From b5bff16ee5d2203a8f95b3658e303c6d96054ca6 Mon Sep 17 00:00:00 2001
From: d1rshan <darshan.paccha@gmail.com>
Date: Sat, 23 May 2026 15:33:54 +0530
Subject: [PATCH 07/13] remove bg for mode2

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

diff --git a/frontend/src/ts/components/modals/PbTablesModal.tsx b/frontend/src/ts/components/modals/PbTablesModal.tsx
index 809ec0feadab..a6e7eeba8ee4 100644
--- a/frontend/src/ts/components/modals/PbTablesModal.tsx
+++ b/frontend/src/ts/components/modals/PbTablesModal.tsx
@@ -122,7 +122,7 @@ export function PbTablesModal(): JSXElement {
                         fallback={<td class="px-2 py-2 text-right"></td>}
                       >
                         <td
-                          class={`${rowBackground} sticky top-[calc(1rem-2px)] z-2 px-2 py-2 text-right text-2xl`}
+                          class="sticky top-[calc(1rem-2px)] z-2 px-2 py-2 text-right text-2xl"
                         >
                           {group.mode2}
                         </td>

From 1035f2fa8b96dbbde5327b3771071bf387c08f30 Mon Sep 17 00:00:00 2001
From: d1rshan <darshan.paccha@gmail.com>
Date: Sat, 23 May 2026 16:10:25 +0530
Subject: [PATCH 08/13] cleanup

---
 .../ts/components/modals/PbTablesModal.tsx    | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/frontend/src/ts/components/modals/PbTablesModal.tsx b/frontend/src/ts/components/modals/PbTablesModal.tsx
index a6e7eeba8ee4..5ee16ec272d5 100644
--- a/frontend/src/ts/components/modals/PbTablesModal.tsx
+++ b/frontend/src/ts/components/modals/PbTablesModal.tsx
@@ -1,6 +1,6 @@
-import { type Mode, type PersonalBest } from "@monkeytype/schemas/shared";
-import { format as formatDate } from "date-fns/format";
 import { createMemo, createSignal, For, JSXElement, Show } from "solid-js";
+import { format as formatDate } from "date-fns/format";
+import { Mode2, Mode, PersonalBest } from "@monkeytype/schemas/shared";
 
 import { getConfig } from "../../config/store";
 import * as DB from "../../db";
@@ -15,7 +15,7 @@ import { AnimatedModal } from "../common/AnimatedModal";
 import { Fa } from "../common/Fa";
 
 type PBWithMode2 = PersonalBest & {
-  mode2: string;
+  mode2: Mode2<Mode>;
 };
 
 type PBRow = {
@@ -29,23 +29,22 @@ type PBGroup = {
 };
 
 function buildGroups(mode: Mode): PBGroup[] {
-  const allMode2 = (
+  const allmode2 = (
     USE_MOCK_PB_DATA
       ? MOCK_PERSONAL_BESTS[mode]
       : DB.getSnapshot()?.personalBests?.[mode]
   ) as
     | Record<string, PBWithMode2[]>
     | undefined;
-  if (allMode2 === undefined) return [];
+  if (allmode2 === undefined) return [];
 
   const list: PBWithMode2[] = [];
-  Object.keys(allMode2).forEach((key) => {
-    const pbs = [...(allMode2[key] ?? [])].sort((a, b) => b.wpm - a.wpm);
+  Object.keys(allmode2).forEach((key) => {
+    let pbs = allmode2[key] ?? [];
+    pbs = pbs.sort((a, b) => b.wpm - a.wpm);
     pbs.forEach((pb) => {
-      list.push({
-        ...pb,
-        mode2: key,
-      });
+      pb.mode2 = key;
+      list.push(pb);
     });
   });
 

From 8828b203a73535db1bfdeccff3788280fc989186 Mon Sep 17 00:00:00 2001
From: d1rshan <darshan.paccha@gmail.com>
Date: Sat, 23 May 2026 17:21:52 +0530
Subject: [PATCH 09/13] use table component (wip)

---
 .../ts/components/modals/PbTablesModal.tsx    | 276 +++++++++---------
 1 file changed, 136 insertions(+), 140 deletions(-)

diff --git a/frontend/src/ts/components/modals/PbTablesModal.tsx b/frontend/src/ts/components/modals/PbTablesModal.tsx
index 5ee16ec272d5..a851ad15d2f0 100644
--- a/frontend/src/ts/components/modals/PbTablesModal.tsx
+++ b/frontend/src/ts/components/modals/PbTablesModal.tsx
@@ -1,76 +1,66 @@
-import { createMemo, createSignal, For, JSXElement, Show } from "solid-js";
-import { format as formatDate } from "date-fns/format";
 import { Mode2, Mode, PersonalBest } from "@monkeytype/schemas/shared";
+import { format as formatDate } from "date-fns/format";
+import { createMemo, createSignal, For, JSXElement, Show } from "solid-js";
 
 import { getConfig } from "../../config/store";
 import * as DB from "../../db";
 import { pbTablesMode } from "../../states/pb-tables-modal";
 import { Formatting } from "../../utils/format";
 import { getLanguageDisplayString } from "../../utils/strings";
-import {
-  MOCK_PERSONAL_BESTS,
-  USE_MOCK_PB_DATA,
-} from "./PbTablesModal.mock";
 import { AnimatedModal } from "../common/AnimatedModal";
 import { Fa } from "../common/Fa";
+import {
+  Table,
+  TableBody,
+  TableHeader,
+  TableRow,
+  TableHead,
+  TableCell,
+} from "../ui/table/Table";
+import { MOCK_PERSONAL_BESTS, USE_MOCK_PB_DATA } from "./PbTablesModal.mock";
 
 type PBWithMode2 = PersonalBest & {
   mode2: Mode2<Mode>;
 };
 
-type PBRow = {
-  rowClass: "odd" | "even";
+type FlatRow = {
   pb: PBWithMode2;
-};
-
-type PBGroup = {
+  showMode2: boolean;
   mode2: string;
-  rows: PBRow[];
 };
 
-function buildGroups(mode: Mode): PBGroup[] {
+function buildRows(mode: Mode): FlatRow[] {
   const allmode2 = (
     USE_MOCK_PB_DATA
-      ? MOCK_PERSONAL_BESTS[mode]
+      ? MOCK_PERSONAL_BESTS[mode as "time" | "words"]
       : DB.getSnapshot()?.personalBests?.[mode]
-  ) as
-    | Record<string, PBWithMode2[]>
-    | undefined;
+  ) as Record<string, PBWithMode2[]> | undefined;
   if (allmode2 === undefined) return [];
 
   const list: PBWithMode2[] = [];
   Object.keys(allmode2).forEach((key) => {
     let pbs = allmode2[key] ?? [];
-    pbs = pbs.sort((a, b) => b.wpm - a.wpm);
+    pbs = [...pbs].sort((a, b) => b.wpm - a.wpm);
     pbs.forEach((pb) => {
       pb.mode2 = key;
       list.push(pb);
     });
   });
 
-  const groups: PBGroup[] = [];
-  let currentGroup: PBGroup | undefined;
+  const rows: FlatRow[] = [];
+  let currentMode2: string | undefined;
 
-  list.forEach((pb, index) => {
-    if (currentGroup?.mode2 !== pb.mode2) {
-      currentGroup = {
-        mode2: pb.mode2,
-        rows: [],
-      };
-      groups.push(currentGroup);
-    }
-
-    currentGroup.rows.push({
-      pb,
-      rowClass: index % 2 === 0 ? "odd" : "even",
-    });
+  list.forEach((pb) => {
+    const showMode2 = currentMode2 !== pb.mode2;
+    currentMode2 = pb.mode2;
+    rows.push({ pb, showMode2, mode2: pb.mode2 });
   });
 
-  return groups;
+  return rows;
 }
 
 export function PbTablesModal(): JSXElement {
-  const [groups, setGroups] = createSignal<PBGroup[]>([]);
+  const [rows, setRows] = createSignal<FlatRow[]>([]);
   const format = createMemo(() => new Formatting(getConfig));
   const mode = createMemo(() => pbTablesMode());
 
@@ -79,120 +69,126 @@ export function PbTablesModal(): JSXElement {
       id="PbTables"
       modalClass="max-w-full gap-0 overflow-y-scroll overscroll-y-contain p-8"
       beforeShow={() => {
-        setGroups(buildGroups(mode()));
+        setRows(buildRows(mode()));
       }}
     >
-      <table class="border-collapse border-spacing-0 text-text">
-        <thead class="sticky -top-8 z-3 bg-bg text-xs text-sub">
-          <tr>
-            <td class="w-[1%] px-2 py-2">{mode()}</td>
-            <td class="px-2 py-2 text-right">
-              <span>{format().typingSpeedUnit}</span>
+      <Table class="border-collapse text-text">
+        <TableHeader class="sticky -top-8 z-3 bg-bg text-xs">
+          <TableRow>
+            <TableHead scope="col" class="w-[1%]">
+              {mode()}
+            </TableHead>
+            <TableHead scope="col" class="text-right">
+              {format().typingSpeedUnit}
               <br />
               <span class="opacity-50">accuracy</span>
-            </td>
-            <td class="px-2 py-2 text-right">
+            </TableHead>
+            <TableHead scope="col" class="text-right">
               raw
               <br />
               <span class="opacity-50">consistency</span>
-            </td>
-            <td class="px-2 py-2 text-right">difficulty</td>
-            <td class="px-2 py-2 text-right">language</td>
-            <td class="px-2 py-2 text-center">punctuation</td>
-            <td class="px-2 py-2 text-center">numbers</td>
-            <td class="px-2 py-2 text-right">lazy mode</td>
-            <td class="px-2 py-2 text-right">date</td>
-          </tr>
-        </thead>
-        <For each={groups()}>
-          {(group) => (
-            <tbody class="[clip-path:inset(0)]">
-              <For each={group.rows}>
-                {(row, index) => {
-                  const date = () =>
-                    row.pb.timestamp ? new Date(row.pb.timestamp) : undefined;
-                  const rowBackground =
-                    row.rowClass === "odd" ? "bg-sub-alt" : "bg-bg";
+            </TableHead>
+            <TableHead scope="col" class="text-right">
+              difficulty
+            </TableHead>
+            <TableHead scope="col" class="text-right">
+              language
+            </TableHead>
+            <TableHead scope="col" class="text-center">
+              punctuation
+            </TableHead>
+            <TableHead scope="col" class="text-center">
+              numbers
+            </TableHead>
+            <TableHead scope="col" class="text-right">
+              lazy mode
+            </TableHead>
+            <TableHead scope="col" class="text-right">
+              date
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <For each={rows()}>
+            {(row) => {
+              const date = () =>
+                row.pb.timestamp ? new Date(row.pb.timestamp) : undefined;
 
-                  return (
-                    <tr class={rowBackground}>
-                      <Show
-                        when={index() === 0}
-                        fallback={<td class="px-2 py-2 text-right"></td>}
-                      >
-                        <td
-                          class="sticky top-[calc(1rem-2px)] z-2 px-2 py-2 text-right text-2xl"
-                        >
-                          {group.mode2}
-                        </td>
+              return (
+                <TableRow>
+                  <Show
+                    when={row.showMode2}
+                    fallback={<TableCell class="text-right" />}
+                  >
+                    <TableCell class="sticky top-[calc(1rem-2px)] z-2 text-right text-2xl">
+                      {row.mode2}
+                    </TableCell>
+                  </Show>
+                  <TableCell class="text-right">
+                    {format().typingSpeed(row.pb.wpm)}
+                    <br />
+                    <span class="opacity-50">
+                      {format().accuracy(row.pb.acc)}
+                    </span>
+                  </TableCell>
+                  <TableCell class="text-right">
+                    {format().typingSpeed(row.pb.raw)}
+                    <br />
+                    <span class="opacity-50">
+                      {format().percentage(row.pb.consistency)}
+                    </span>
+                  </TableCell>
+                  <TableCell class="text-right">{row.pb.difficulty}</TableCell>
+                  <TableCell class="text-right">
+                    {row.pb.language
+                      ? getLanguageDisplayString(row.pb.language)
+                      : "-"}
+                  </TableCell>
+                  <TableCell class="text-center">
+                    <Show when={row.pb.punctuation}>
+                      <Fa icon="fa-check" />
+                    </Show>
+                  </TableCell>
+                  <TableCell class="text-center">
+                    <Show when={row.pb.numbers}>
+                      <Fa icon="fa-check" />
+                    </Show>
+                  </TableCell>
+                  <TableCell class="text-right">
+                    <Show when={row.pb.lazyMode}>
+                      <Fa icon="fa-check" />
+                    </Show>
+                  </TableCell>
+                  <TableCell class="text-right">
+                    <Show
+                      when={date() !== undefined}
+                      fallback={
+                        <>
+                          -
+                          <br />
+                          <span class="opacity-50">-</span>
+                        </>
+                      }
+                    >
+                      <Show when={date()}>
+                        {(safeDate) => (
+                          <>
+                            {formatDate(safeDate(), "dd MMM yyyy")}
+                            <br />
+                            <div class="opacity-50">
+                              {formatDate(safeDate(), "HH:mm")}
+                            </div>
+                          </>
+                        )}
                       </Show>
-                      <td class="px-2 py-2 text-right">
-                        {format().typingSpeed(row.pb.wpm)}
-                        <br />
-                        <span class="opacity-50">
-                          {format().accuracy(row.pb.acc)}
-                        </span>
-                      </td>
-                      <td class="px-2 py-2 text-right">
-                        {format().typingSpeed(row.pb.raw)}
-                        <br />
-                        <span class="opacity-50">
-                          {format().percentage(row.pb.consistency)}
-                        </span>
-                      </td>
-                      <td class="px-2 py-2 text-right">{row.pb.difficulty}</td>
-                      <td class="px-2 py-2 text-right">
-                        {row.pb.language
-                          ? getLanguageDisplayString(row.pb.language)
-                          : "-"}
-                      </td>
-                      <td class="px-2 py-2 text-center">
-                        <Show when={row.pb.punctuation}>
-                          <Fa icon="fa-check" />
-                        </Show>
-                      </td>
-                      <td class="px-2 py-2 text-center">
-                        <Show when={row.pb.numbers}>
-                          <Fa icon="fa-check" />
-                        </Show>
-                      </td>
-                      <td class="px-2 py-2 text-right">
-                        <Show when={row.pb.lazyMode}>
-                          <Fa icon="fa-check" />
-                        </Show>
-                      </td>
-                      <td class="px-2 py-2 text-right">
-                        <Show
-                          when={date() !== undefined}
-                          fallback={
-                            <>
-                              -
-                              <br />
-                              <span class="opacity-50">-</span>
-                            </>
-                          }
-                        >
-                          <Show when={date()}>
-                            {(safeDate) => (
-                              <>
-                                {formatDate(safeDate(), "dd MMM yyyy")}
-                                <br />
-                                <div class="opacity-50">
-                                  {formatDate(safeDate(), "HH:mm")}
-                                </div>
-                              </>
-                            )}
-                          </Show>
-                        </Show>
-                      </td>
-                    </tr>
-                  );
-                }}
-              </For>
-            </tbody>
-          )}
-        </For>
-      </table>
+                    </Show>
+                  </TableCell>
+                </TableRow>
+              );
+            }}
+          </For>
+        </TableBody>
+      </Table>
     </AnimatedModal>
   );
 }

From 3ffd89331fb575454323424968e12eaf87b32912 Mon Sep 17 00:00:00 2001
From: d1rshan <darshan.paccha@gmail.com>
Date: Sat, 23 May 2026 19:47:50 +0530
Subject: [PATCH 10/13] cleanup

---
 .../ts/components/modals/PbTablesModal.tsx    | 36 ++++++-------------
 1 file changed, 11 insertions(+), 25 deletions(-)

diff --git a/frontend/src/ts/components/modals/PbTablesModal.tsx b/frontend/src/ts/components/modals/PbTablesModal.tsx
index a851ad15d2f0..d0391fb31278 100644
--- a/frontend/src/ts/components/modals/PbTablesModal.tsx
+++ b/frontend/src/ts/components/modals/PbTablesModal.tsx
@@ -75,37 +75,23 @@ export function PbTablesModal(): JSXElement {
       <Table class="border-collapse text-text">
         <TableHeader class="sticky -top-8 z-3 bg-bg text-xs">
           <TableRow>
-            <TableHead scope="col" class="w-[1%]">
-              {mode()}
-            </TableHead>
-            <TableHead scope="col" class="text-right">
+            <TableHead class="w-[1%]">{mode()}</TableHead>
+            <TableHead class="text-right">
               {format().typingSpeedUnit}
               <br />
               <span class="opacity-50">accuracy</span>
             </TableHead>
-            <TableHead scope="col" class="text-right">
+            <TableHead class="text-right">
               raw
               <br />
               <span class="opacity-50">consistency</span>
             </TableHead>
-            <TableHead scope="col" class="text-right">
-              difficulty
-            </TableHead>
-            <TableHead scope="col" class="text-right">
-              language
-            </TableHead>
-            <TableHead scope="col" class="text-center">
-              punctuation
-            </TableHead>
-            <TableHead scope="col" class="text-center">
-              numbers
-            </TableHead>
-            <TableHead scope="col" class="text-right">
-              lazy mode
-            </TableHead>
-            <TableHead scope="col" class="text-right">
-              date
-            </TableHead>
+            <TableHead class="text-right">difficulty</TableHead>
+            <TableHead class="text-right">language</TableHead>
+            <TableHead class="text-center">punctuation</TableHead>
+            <TableHead class="text-center">numbers</TableHead>
+            <TableHead class="text-right">lazy mode</TableHead>
+            <TableHead class="text-right">date</TableHead>
           </TableRow>
         </TableHeader>
         <TableBody>
@@ -118,9 +104,9 @@ export function PbTablesModal(): JSXElement {
                 <TableRow>
                   <Show
                     when={row.showMode2}
-                    fallback={<TableCell class="text-right" />}
+                    fallback={<TableCell class="bg-bg" />}
                   >
-                    <TableCell class="sticky top-[calc(1rem-2px)] z-2 text-right text-2xl">
+                    <TableCell class="sticky top-[calc(1rem-2px)] z-2 bg-bg text-right text-2xl">
                       {row.mode2}
                     </TableCell>
                   </Show>

From 8cfb8bd7d18d2e4c19de1304bcc442035b7bd290 Mon Sep 17 00:00:00 2001
From: d1rshan <darshan.paccha@gmail.com>
Date: Sat, 23 May 2026 20:02:44 +0530
Subject: [PATCH 11/13] more cleanup

---
 .../ts/components/modals/PbTablesModal.tsx    | 26 ++++++-------------
 1 file changed, 8 insertions(+), 18 deletions(-)

diff --git a/frontend/src/ts/components/modals/PbTablesModal.tsx b/frontend/src/ts/components/modals/PbTablesModal.tsx
index d0391fb31278..97a06653df36 100644
--- a/frontend/src/ts/components/modals/PbTablesModal.tsx
+++ b/frontend/src/ts/components/modals/PbTablesModal.tsx
@@ -72,7 +72,7 @@ export function PbTablesModal(): JSXElement {
         setRows(buildRows(mode()));
       }}
     >
-      <Table class="border-collapse text-text">
+      <Table>
         <TableHeader class="sticky -top-8 z-3 bg-bg text-xs">
           <TableRow>
             <TableHead class="w-[1%]">{mode()}</TableHead>
@@ -97,9 +97,6 @@ export function PbTablesModal(): JSXElement {
         <TableBody>
           <For each={rows()}>
             {(row) => {
-              const date = () =>
-                row.pb.timestamp ? new Date(row.pb.timestamp) : undefined;
-
               return (
                 <TableRow>
                   <Show
@@ -147,26 +144,19 @@ export function PbTablesModal(): JSXElement {
                   </TableCell>
                   <TableCell class="text-right">
                     <Show
-                      when={date() !== undefined}
+                      when={row.pb.timestamp}
                       fallback={
                         <>
-                          -
-                          <br />
+                          -<br />
                           <span class="opacity-50">-</span>
                         </>
                       }
                     >
-                      <Show when={date()}>
-                        {(safeDate) => (
-                          <>
-                            {formatDate(safeDate(), "dd MMM yyyy")}
-                            <br />
-                            <div class="opacity-50">
-                              {formatDate(safeDate(), "HH:mm")}
-                            </div>
-                          </>
-                        )}
-                      </Show>
+                      {formatDate(row.pb.timestamp, "dd MMM yyyy")}
+                      <br />
+                      <div class="opacity-50">
+                        {formatDate(row.pb.timestamp, "HH:mm")}
+                      </div>
                     </Show>
                   </TableCell>
                 </TableRow>

From a61f1c67428aaffe17ef3207163ea913cce623b4 Mon Sep 17 00:00:00 2001
From: d1rshan <darshan.paccha@gmail.com>
Date: Sat, 23 May 2026 20:15:10 +0530
Subject: [PATCH 12/13] rm bg and sticky

---
 frontend/src/ts/components/modals/PbTablesModal.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/frontend/src/ts/components/modals/PbTablesModal.tsx b/frontend/src/ts/components/modals/PbTablesModal.tsx
index 97a06653df36..ee9a8cad2283 100644
--- a/frontend/src/ts/components/modals/PbTablesModal.tsx
+++ b/frontend/src/ts/components/modals/PbTablesModal.tsx
@@ -99,11 +99,8 @@ export function PbTablesModal(): JSXElement {
             {(row) => {
               return (
                 <TableRow>
-                  <Show
-                    when={row.showMode2}
-                    fallback={<TableCell class="bg-bg" />}
-                  >
-                    <TableCell class="sticky top-[calc(1rem-2px)] z-2 bg-bg text-right text-2xl">
+                  <Show when={row.showMode2} fallback={<TableCell />}>
+                    <TableCell class="text-right text-2xl">
                       {row.mode2}
                     </TableCell>
                   </Show>

From 79c2e710b00f3d5720dd4ce5ecd22ead80f04127 Mon Sep 17 00:00:00 2001
From: d1rshan <darshan.paccha@gmail.com>
Date: Sat, 23 May 2026 21:40:26 +0530
Subject: [PATCH 13/13] fix type

---
 frontend/src/ts/components/modals/PbTablesModal.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/frontend/src/ts/components/modals/PbTablesModal.tsx b/frontend/src/ts/components/modals/PbTablesModal.tsx
index ee9a8cad2283..2e07cdbdb32e 100644
--- a/frontend/src/ts/components/modals/PbTablesModal.tsx
+++ b/frontend/src/ts/components/modals/PbTablesModal.tsx
@@ -23,13 +23,12 @@ type PBWithMode2 = PersonalBest & {
   mode2: Mode2<Mode>;
 };
 
-type FlatRow = {
+type PBRow = {
   pb: PBWithMode2;
   showMode2: boolean;
-  mode2: string;
 };
 
-function buildRows(mode: Mode): FlatRow[] {
+function buildRows(mode: Mode): PBRow[] {
   const allmode2 = (
     USE_MOCK_PB_DATA
       ? MOCK_PERSONAL_BESTS[mode as "time" | "words"]
@@ -47,20 +46,20 @@ function buildRows(mode: Mode): FlatRow[] {
     });
   });
 
-  const rows: FlatRow[] = [];
+  const rows: PBRow[] = [];
   let currentMode2: string | undefined;
 
   list.forEach((pb) => {
     const showMode2 = currentMode2 !== pb.mode2;
     currentMode2 = pb.mode2;
-    rows.push({ pb, showMode2, mode2: pb.mode2 });
+    rows.push({ pb, showMode2 });
   });
 
   return rows;
 }
 
 export function PbTablesModal(): JSXElement {
-  const [rows, setRows] = createSignal<FlatRow[]>([]);
+  const [rows, setRows] = createSignal<PBRow[]>([]);
   const format = createMemo(() => new Formatting(getConfig));
   const mode = createMemo(() => pbTablesMode());
 
@@ -101,7 +100,7 @@ export function PbTablesModal(): JSXElement {
                 <TableRow>
                   <Show when={row.showMode2} fallback={<TableCell />}>
                     <TableCell class="text-right text-2xl">
-                      {row.mode2}
+                      {row.pb.mode2}
                     </TableCell>
                   </Show>
                   <TableCell class="text-right">