diff --git a/frontend/.oxlintrc-plugin.json b/frontend/.oxlintrc-plugin.json
index 51398c3d461d..d3762817b51d 100644
--- a/frontend/.oxlintrc-plugin.json
+++ b/frontend/.oxlintrc-plugin.json
@@ -7,8 +7,8 @@
   },
   "overrides": [
     {
-      "jsPlugins": ["eslint-plugin-solid"],
-      "files": ["src/**/*.tsx"],
+      "jsPlugins": ["eslint-plugin-solid", "@tanstack/eslint-plugin-query"],
+      "files": ["src/**/*.tsx", "src/**/*.ts"],
       "rules": {
         "solid/components-return-once": "error",
         "solid/event-handlers": "error",
@@ -32,7 +32,14 @@
             "html": "void"
           }
         ],
-        "solid/style-prop": "error"
+        "solid/style-prop": "error",
+        "@tanstack/query/exhaustive-deps": "error",
+        "@tanstack/query/no-rest-destructuring": "error",
+        "@tanstack/query/stable-query-client": "error",
+        "@tanstack/query/no-unstable-deps": "error",
+        "@tanstack/query/infinite-query-property-order": "error",
+        "@tanstack/query/no-void-query-fn": "error",
+        "@tanstack/query/mutation-property-order": "error"
       }
     }
   ]
diff --git a/frontend/__tests__/components/AsyncContent.spec.tsx b/frontend/__tests__/components/AsyncContent.spec.tsx
deleted file mode 100644
index 0147be215dd3..000000000000
--- a/frontend/__tests__/components/AsyncContent.spec.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { render, screen, waitFor } from "@solidjs/testing-library";
-import { createResource, Resource } from "solid-js";
-import { describe, it, expect } from "vitest";
-
-import AsyncContent from "../../src/ts/components/common/AsyncContent";
-
-describe("AsyncContent", () => {
-  function renderWithResource<T>(
-    resource: Resource<T>,
-    errorMessage?: string,
-  ): {
-    container: HTMLElement;
-  } {
-    const { container } = render(() => (
-      <AsyncContent resource={resource} errorMessage={errorMessage}>
-        {(data) => <div data-testid="content">{String(data)}</div>}
-      </AsyncContent>
-    ));
-
-    return {
-      container,
-    };
-  }
-
-  it("renders loading state while resource is pending", () => {
-    const [resource] = createResource(async () => {
-      await new Promise((resolve) => setTimeout(resolve, 100));
-      return "data";
-    });
-
-    const { container } = renderWithResource(resource);
-
-    const preloader = container.querySelector(".preloader");
-    expect(preloader).toBeInTheDocument();
-    expect(preloader).toHaveClass("preloader");
-    expect(preloader?.querySelector("i")).toHaveClass(
-      "fas",
-      "fa-fw",
-      "fa-spin",
-      "fa-circle-notch",
-    );
-  });
-
-  it("renders data when resource resolves", async () => {
-    const [resource] = createResource(async () => {
-      return "Test Data";
-    });
-
-    renderWithResource(resource);
-
-    await waitFor(() => {
-      expect(screen.getByTestId("content")).toHaveTextContent("Test Data");
-    });
-  });
-
-  it("renders error message when resource fails", async () => {
-    const [resource] = createResource(async () => {
-      throw new Error("Test error");
-    });
-
-    renderWithResource(resource, "Custom error message");
-
-    await waitFor(() => {
-      expect(screen.getByText(/Custom error message/)).toBeInTheDocument();
-    });
-  });
-
-  it("renders default error message when no custom message provided", async () => {
-    const [resource] = createResource(async () => {
-      throw new Error("Test error");
-    });
-
-    renderWithResource(resource);
-
-    await waitFor(() => {
-      expect(screen.getByText(/An error occurred/)).toBeInTheDocument();
-    });
-  });
-});
diff --git a/frontend/__tests__/components/common/AsyncContent.spec.tsx b/frontend/__tests__/components/common/AsyncContent.spec.tsx
new file mode 100644
index 000000000000..3e71764f398d
--- /dev/null
+++ b/frontend/__tests__/components/common/AsyncContent.spec.tsx
@@ -0,0 +1,154 @@
+import { render, screen, waitFor } from "@solidjs/testing-library";
+import { createResource, Resource, Show } from "solid-js";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import AsyncContent from "../../../src/ts/components/common/AsyncContent";
+import * as Notifications from "../../../src/ts/elements/notifications";
+
+describe("AsyncContent", () => {
+  const addNotificationMock = vi.spyOn(Notifications, "add");
+
+  beforeEach(() => {
+    addNotificationMock.mockClear();
+  });
+  describe("with resource", () => {
+    it("renders loading state while resource is pending", () => {
+      const [resource] = createResource(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        return "data";
+      });
+
+      const { container } = renderWithResource(resource);
+
+      const preloader = container.querySelector(".preloader");
+      expect(preloader).toBeInTheDocument();
+      expect(preloader).toHaveClass("preloader");
+      expect(preloader?.querySelector("i")).toHaveClass(
+        "fas",
+        "fa-fw",
+        "fa-spin",
+        "fa-circle-notch",
+      );
+    });
+
+    it("renders data when resource resolves", async () => {
+      const [resource] = createResource(async () => {
+        return "Test Data";
+      });
+
+      renderWithResource(resource);
+
+      await waitFor(() => {
+        expect(screen.getByTestId("content")).toHaveTextContent("Test Data");
+      });
+    });
+
+    it("renders error message when resource fails", async () => {
+      const [resource] = createResource(async () => {
+        throw new Error("Test error");
+      });
+
+      renderWithResource(resource, "Custom error message");
+
+      await waitFor(() => {
+        expect(screen.getByText(/Custom error message/)).toBeInTheDocument();
+      });
+      expect(addNotificationMock).toHaveBeenCalledWith(
+        "Custom error message: Test error",
+        -1,
+      );
+    });
+
+    it("renders default error message when no custom message provided", async () => {
+      const [resource] = createResource(async () => {
+        throw new Error("Test error");
+      });
+
+      renderWithResource(resource);
+
+      await waitFor(() => {
+        expect(screen.getByText(/An error occurred/)).toBeInTheDocument();
+      });
+      expect(addNotificationMock).toHaveBeenCalledWith(
+        "An error occurred: Test error",
+        -1,
+      );
+    });
+
+    it("renders content while resource is pending if alwaysShowContent", () => {
+      const [resource] = createResource(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        return "data";
+      });
+
+      const { container } = renderWithResource(resource, undefined, true);
+
+      const preloader = container.querySelector(".preloader");
+      expect(preloader).not.toBeInTheDocument();
+      expect(container.querySelector("div")).toHaveTextContent("no data");
+    });
+
+    it("renders data when resource resolves if alwaysShowContent", async () => {
+      const [resource] = createResource(async () => {
+        return "Test Data";
+      });
+
+      const { container } = renderWithResource(resource, undefined, true);
+
+      await waitFor(() => {
+        expect(screen.getByTestId("content")).toHaveTextContent("Test Data");
+      });
+      const preloader = container.querySelector(".preloader");
+      expect(preloader).not.toBeInTheDocument();
+    });
+
+    it("renders error message when resource fails if alwaysShowContent", async () => {
+      const [resource] = createResource(async () => {
+        throw new Error("Test error");
+      });
+
+      const { container } = renderWithResource(
+        resource,
+        "Custom error message",
+        true,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText(/Custom error message/)).toBeInTheDocument();
+      });
+      expect(addNotificationMock).toHaveBeenCalledWith(
+        "Custom error message: Test error",
+        -1,
+      );
+      console.log(container.innerHTML);
+    });
+    function renderWithResource<T>(
+      resource: Resource<T>,
+      errorMessage?: string,
+      alwaysShowContent?: true,
+    ): {
+      container: HTMLElement;
+    } {
+      const { container } = render(() => (
+        <AsyncContent
+          resource={resource}
+          errorMessage={errorMessage}
+          alwaysShowContent={alwaysShowContent}
+        >
+          {(data: T | undefined) => (
+            <>
+              foo
+              <Show when={data !== undefined} fallback={<div>no data</div>}>
+                <div data-testid="content">{String(data)}</div>
+              </Show>
+            </>
+          )}
+        </AsyncContent>
+      ));
+
+      return {
+        container,
+      };
+    }
+  });
+});
diff --git a/frontend/package.json b/frontend/package.json
index 86bee53b75f5..d97f5c655374 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -30,6 +30,8 @@
     "@sentry/browser": "9.14.0",
     "@sentry/vite-plugin": "3.3.1",
     "@solidjs/meta": "0.29.4",
+    "@tanstack/solid-query": "5.90.23",
+    "@tanstack/solid-query-devtools": "5.91.3",
     "@tanstack/solid-table": "8.21.3",
     "@ts-rest/core": "3.52.1",
     "animejs": "4.2.2",
@@ -66,6 +68,7 @@
     "@monkeytype/typescript-config": "workspace:*",
     "@solidjs/testing-library": "0.8.10",
     "@tailwindcss/vite": "4.1.18",
+    "@tanstack/eslint-plugin-query": "5.91.4",
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/user-event": "14.6.1",
diff --git a/frontend/src/index.html b/frontend/src/index.html
index fbdcff813444..b7ad14bba257 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -72,5 +72,6 @@
 
     <link rel="stylesheet" href="" id="globalFunBoxTheme" type="text/css" />
     <script type="module" src="ts/index.ts"></script>
+    <mount data-component="devtools"></mount>
   </body>
 </html>
diff --git a/frontend/src/ts/components/common/AsyncContent.tsx b/frontend/src/ts/components/common/AsyncContent.tsx
index 5d235672e904..be3e4a37037f 100644
--- a/frontend/src/ts/components/common/AsyncContent.tsx
+++ b/frontend/src/ts/components/common/AsyncContent.tsx
@@ -1,4 +1,13 @@
-import { ErrorBoundary, JSXElement, Resource, Show, Suspense } from "solid-js";
+import { UseQueryResult } from "@tanstack/solid-query";
+import {
+  createMemo,
+  ErrorBoundary,
+  JSXElement,
+  Match,
+  Resource,
+  Show,
+  Switch,
+} from "solid-js";
 
 import * as Notifications from "../../elements/notifications";
 import { createErrorMessage } from "../../utils/misc";
@@ -8,76 +17,110 @@ import { Fa } from "./Fa";
 
 export default function AsyncContent<T>(
   props: {
-    resource: Resource<T | undefined>;
     errorMessage?: string;
   } & (
     | {
-        alwaysShowContent?: never;
-        children: (data: T) => JSXElement;
+        resource: Resource<T | undefined>;
+        query?: never;
       }
     | {
-        alwaysShowContent: true;
-        showLoader?: true;
-        children: (data: T | undefined) => JSXElement;
+        resource?: never;
+        query: UseQueryResult<T>;
       }
-  ),
+  ) &
+    (
+      | {
+          alwaysShowContent?: never;
+          children: (data: T) => JSXElement;
+        }
+      | {
+          alwaysShowContent: true;
+          showLoader?: true;
+          children: (data: T | undefined) => JSXElement;
+        }
+    ),
 ): JSXElement {
+  const source = createMemo(() => {
+    if (props.resource !== undefined) {
+      return {
+        value: props.resource,
+        isLoading: () => props.resource.loading,
+        isError: () => false,
+      };
+    }
+
+    if (props.query !== undefined) {
+      return {
+        value: () => props.query.data,
+        isLoading: () => props.query?.isLoading,
+        isError: () => props.query.isError,
+        error: () => props.query.error,
+      };
+    }
+    throw new Error("missing source");
+  });
+
   const value = () => {
     try {
-      return props.resource();
+      return source().value;
     } catch (err) {
-      const message = createErrorMessage(
-        err,
-        props.errorMessage ?? "An error occurred",
-      );
-      console.error("AsyncContent error:", message);
-      Notifications.add(message, -1);
+      handleError(err);
       return undefined;
     }
   };
   const handleError = (err: unknown): string => {
-    console.error(err);
-    return createErrorMessage(err, props.errorMessage ?? "An error occurred");
+    const message = createErrorMessage(
+      err,
+      props.errorMessage ?? "An error occurred",
+    );
+    console.error("AsyncContext failed", message, err);
+    Notifications.add(message, -1);
+    return message;
   };
 
+  const loader = (
+    <div class="preloader p-4 text-center text-2xl text-main">
+      <Fa icon="fa-circle-notch" fixedWidth spin />
+    </div>
+  );
+
+  const errorText = (err: unknown): JSXElement => (
+    <div class="error">{handleError(err)}</div>
+  );
   return (
-    <Conditional
-      if={props.alwaysShowContent === true}
-      then={(() => {
-        const p = props as {
-          showLoader?: true;
-          children: (data: T | undefined) => JSXElement;
-        };
-        return (
+    <ErrorBoundary fallback={errorText}>
+      <Switch
+        fallback={
           <>
-            <Show when={p.showLoader && props.resource.loading}>
-              <div class="preloader text-main p-4 text-center text-2xl">
-                <Fa icon="fa-circle-notch" fixedWidth spin />
-              </div>
+            <Show when={source().isLoading() && !props.alwaysShowContent}>
+              {loader}
             </Show>
-            {p.children(value())}
+            <Conditional
+              if={props.alwaysShowContent === true}
+              then={(() => {
+                const p = props as {
+                  children: (data: T | undefined) => JSXElement;
+                };
+                return <>{p.children(value()?.())}</>;
+              })()}
+              else={
+                <Show
+                  when={
+                    source().value() !== null && source().value() !== undefined
+                  }
+                >
+                  {props.children(source().value() as T)}
+                </Show>
+              }
+            />
           </>
-        );
-      })()}
-      else={
-        <ErrorBoundary
-          fallback={(err) => <div class="error">{handleError(err)}</div>}
-        >
-          <Suspense
-            fallback={
-              <div class="preloader text-main p-4 text-center text-2xl">
-                <Fa icon="fa-circle-notch" fixedWidth spin />
-              </div>
-            }
-          >
-            <Show
-              when={props.resource() !== null && props.resource() !== undefined}
-            >
-              {props.children(props.resource() as T)}
-            </Show>
-          </Suspense>
-        </ErrorBoundary>
-      }
-    />
+        }
+      >
+        <Match when={source().isError()}>{errorText(source().error?.())}</Match>
+        <Match when={source().isLoading() && !props.alwaysShowContent}>
+          {loader}
+        </Match>
+      </Switch>
+    </ErrorBoundary>
   );
 }
diff --git a/frontend/src/ts/components/core/DevTools.tsx b/frontend/src/ts/components/core/DevTools.tsx
new file mode 100644
index 000000000000..ce32cc39bacf
--- /dev/null
+++ b/frontend/src/ts/components/core/DevTools.tsx
@@ -0,0 +1,6 @@
+import { SolidQueryDevtools } from "@tanstack/solid-query-devtools";
+import { JSXElement } from "solid-js";
+
+export function DevTools(): JSXElement {
+  return <SolidQueryDevtools />;
+}
diff --git a/frontend/src/ts/components/mount.tsx b/frontend/src/ts/components/mount.tsx
index adde13f61edb..a4dae541c9c4 100644
--- a/frontend/src/ts/components/mount.tsx
+++ b/frontend/src/ts/components/mount.tsx
@@ -1,8 +1,11 @@
+import { QueryClientProvider } from "@tanstack/solid-query";
 import { JSXElement } from "solid-js";
 import { render } from "solid-js/web";
 
+import { queryClient } from "../queries";
 import { qsa } from "../utils/dom";
 
+import { DevTools } from "./core/DevTools";
 import { Theme } from "./core/Theme";
 import { Footer } from "./layout/footer/Footer";
 import { Overlays } from "./layout/overlays/Overlays";
@@ -15,11 +18,19 @@ const components: Record<string, () => JSXElement> = {
   modals: () => <Modals />,
   overlays: () => <Overlays />,
   theme: () => <Theme />,
+  devtools: () => <DevTools />,
 };
 
 function mountToMountpoint(name: string, component: () => JSXElement): void {
   for (const mountPoint of qsa(name)) {
-    render(() => component(), mountPoint.native);
+    render(
+      () => (
+        <QueryClientProvider client={queryClient}>
+          {component()}
+        </QueryClientProvider>
+      ),
+      mountPoint.native,
+    );
   }
 }
 
diff --git a/frontend/src/ts/components/pages/AboutPage.tsx b/frontend/src/ts/components/pages/AboutPage.tsx
index 632b0b38620e..20335d005d87 100644
--- a/frontend/src/ts/components/pages/AboutPage.tsx
+++ b/frontend/src/ts/components/pages/AboutPage.tsx
@@ -1,12 +1,17 @@
-import { intervalToDuration } from "date-fns";
-import { createResource, For, JSXElement, Show } from "solid-js";
+import { useQuery } from "@tanstack/solid-query";
+import { For, JSXElement, Show } from "solid-js";
 
-import Ape from "../../ape";
+import { queryClient } from "../../queries";
+import {
+  getContributorsQueryOptions,
+  getSpeedHistogramQueryOptions,
+  getSupportersQueryOptions,
+  getTypingStatsQueryOptions,
+} from "../../queries/public";
 import { getConfig } from "../../signals/config";
 import { getActivePage } from "../../signals/core";
 import { showModal } from "../../stores/modals";
-import { getContributorsList, getSupportersList } from "../../utils/json-data";
-import { getNumberWithMagnitude, numberWithSpaces } from "../../utils/numbers";
+import { qsr } from "../../utils/dom";
 import AsyncContent from "../common/AsyncContent";
 import { Button } from "../common/Button";
 import { ChartJs } from "../common/ChartJs";
@@ -14,7 +19,7 @@ import { Fa, FaProps } from "../common/Fa";
 
 function H2(props: { text: string; fa: FaProps }): JSXElement {
   return (
-    <h2 class="text-sub flex place-items-center gap-4 pb-4 text-4xl">
+    <h2 class="flex place-items-center gap-4 pb-4 text-4xl text-sub">
       <Fa {...props.fa} />
       {props.text}
     </h2>
@@ -23,503 +28,417 @@ function H2(props: { text: string; fa: FaProps }): JSXElement {
 
 function H3(props: { text: string; fa: FaProps }): JSXElement {
   return (
-    <h3 class="text-sub flex place-items-center gap-2 pb-2">
+    <h3 class="flex place-items-center gap-2 pb-2 text-sub">
       <Fa {...props.fa} />
       {props.text}
     </h3>
   );
 }
 
+qsr("nav .view-about").on("mouseenter", () => {
+  prefetch();
+});
+
 export function AboutPage(): JSXElement {
   const isOpen = (): boolean => getActivePage() === "about";
-  const [contributors] = createResource(isOpen, async (open) =>
-    open ? await getContributorsList() : undefined,
-  );
-  const [supporters] = createResource(isOpen, async (open) =>
-    open ? await getSupportersList() : undefined,
-  );
 
-  const [typingStats] = createResource(isOpen, async (open) =>
-    open ? await fetchTypingStats() : undefined,
-  );
+  const contributors = useQuery(() => ({
+    ...getContributorsQueryOptions(),
+    enabled: isOpen(),
+  }));
 
-  const [speedHistogram] = createResource(isOpen, async (open) =>
-    open ? await fetchSpeedHistogram() : undefined,
-  );
+  const supporters = useQuery(() => ({
+    ...getSupportersQueryOptions(),
+    enabled: isOpen(),
+  }));
+
+  const typingStats = useQuery(() => ({
+    ...getTypingStatsQueryOptions(),
+    enabled: isOpen(),
+  }));
+
+  const speedHistogram = useQuery(() => ({
+    ...getSpeedHistogramQueryOptions(),
+    enabled: isOpen(),
+  }));
 
   return (
-    <Show when={isOpen}>
-      <div class="content-grid grid gap-8">
-        <section class="text-sub text-center">
-          Created with love by Miodec.
-          <br />
-          <a href="#supporters_title">Supported</a> and{" "}
-          <a href="#contributors_title">expanded</a> by many awesome people.
-          <br />
-          Launched on 15th of May, 2020.
-        </section>
-        <section>
-          <AsyncContent
-            alwaysShowContent
-            resource={typingStats}
-            errorMessage="Failed to get global typing stats"
-          >
-            {(data) => (
-              <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
-                <For
-                  each={
-                    [
-                      ["total tests started", data?.testsStarted],
-                      ["total typing time", data?.timeTyping],
-                      ["total tests completed", data?.testsCompleted],
-                    ] as const
-                  }
-                >
-                  {([title, data]) => (
-                    <div class="text-center">
-                      <div class="text-sub">{title}</div>
-                      <div class="text-5xl">{data?.text ?? "-"}</div>
-                      <div class="text-xl">{data?.subText ?? "-"}</div>
-                    </div>
-                  )}
-                </For>
-              </div>
-            )}
-          </AsyncContent>
-        </section>
-        <section class="h-48 w-full">
-          <AsyncContent
-            alwaysShowContent
-            resource={speedHistogram}
-            errorMessage="Failed to get global speed stats for histogram"
-          >
-            {(data) => (
-              <ChartJs
-                type="bar"
-                data={{
-                  labels: data?.labels ?? [],
-                  datasets: [
-                    {
-                      yAxisID: "count",
-                      label: "Users",
-                      data: data?.data ?? [],
+    <div class="content-grid grid gap-8">
+      <section class="text-center text-sub">
+        Created with love by Miodec.
+        <br />
+        <a href="#supporters_title">Supported</a> and{" "}
+        <a href="#contributors_title">expanded</a> by many awesome people.
+        <br />
+        Launched on 15th of May, 2020.
+      </section>
+      <section>
+        <AsyncContent
+          alwaysShowContent
+          query={typingStats}
+          errorMessage="Failed to get global typing stats"
+        >
+          {(data) => (
+            <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+              <For
+                each={
+                  [
+                    ["total tests started", data?.testsStarted],
+                    ["total typing time", data?.timeTyping],
+                    ["total tests completed", data?.testsCompleted],
+                  ] as const
+                }
+              >
+                {([title, data]) => (
+                  <div class="text-center">
+                    <div class="text-sub">{title}</div>
+                    <div class="text-5xl">{data?.text ?? "-"}</div>
+                    <div class="text-xl">{data?.subText ?? "-"}</div>
+                  </div>
+                )}
+              </For>
+            </div>
+          )}
+        </AsyncContent>
+      </section>
+      <section class="h-48 w-full">
+        <AsyncContent
+          alwaysShowContent
+          query={speedHistogram}
+          errorMessage="Failed to get global speed stats for histogram"
+        >
+          {(data) => (
+            <ChartJs
+              type="bar"
+              data={{
+                labels: data?.labels ?? [],
+                datasets: [
+                  {
+                    yAxisID: "count",
+                    label: "Users",
+                    data: data?.data ?? [],
+                  },
+                ],
+              }}
+              options={{
+                responsive: true,
+                maintainAspectRatio: false,
+                hover: {
+                  mode: "nearest",
+                  intersect: false,
+                },
+                scales: {
+                  x: {
+                    axis: "x",
+                    bounds: "ticks",
+                    display: true,
+                    title: {
+                      display: false,
+                      text: "Bucket",
                     },
-                  ],
-                }}
-                options={{
-                  responsive: true,
-                  maintainAspectRatio: false,
-                  hover: {
-                    mode: "nearest",
-                    intersect: false,
+                    offset: true,
                   },
-                  scales: {
-                    x: {
-                      axis: "x",
-                      bounds: "ticks",
-                      display: true,
-                      title: {
-                        display: false,
-                        text: "Bucket",
-                      },
-                      offset: true,
+                  count: {
+                    axis: "y",
+                    beginAtZero: true,
+                    min: 0,
+                    ticks: {
+                      autoSkip: true,
+                      autoSkipPadding: 20,
+                      stepSize: 10,
                     },
-                    count: {
-                      axis: "y",
-                      beginAtZero: true,
-                      min: 0,
-                      ticks: {
-                        autoSkip: true,
-                        autoSkipPadding: 20,
-                        stepSize: 10,
-                      },
+                    display: true,
+                    title: {
                       display: true,
-                      title: {
-                        display: true,
-                        text: "Users",
-                      },
+                      text: "Users",
                     },
                   },
-                  plugins: {
-                    annotation: {
-                      annotations: [],
-                    },
-                    tooltip: {
-                      animation: { duration: 250 },
-                      intersect: false,
-                      mode: "index",
-                    },
+                },
+                plugins: {
+                  annotation: {
+                    annotations: [],
                   },
-                }}
-              />
-            )}
-          </AsyncContent>
-          <div class="text-sub text-right text-xs">
-            distribution of time 60 leaderboard results (wpm)
-          </div>
-        </section>
-        <section>
-          <H2 fa={{ icon: "fa-info-circle" }} text="about" />
-          <p>
-            Monkeytype is a minimalistic and customizable typing test. It
-            features many test modes, an account system to save your typing
-            speed history, and user-configurable features such as themes,
-            sounds, a smooth caret, and more. Monkeytype attempts to emulate the
-            experience of natural keyboard typing during a typing test, by
-            unobtrusively presenting the text prompts and displaying typed
-            characters in-place, providing straightforward, real-time feedback
-            on typos, speed, and accuracy.
-            <br />
-            <br />
-            Test yourself in various modes, track your progress and improve your
-            speed.
-          </p>
-        </section>
-        <section>
-          <H3 fa={{ icon: "fa-align-left" }} text="word set" />
-          <p>
-            By default, this website uses the most common 200 words in the
-            English language to generate its tests. You can change to an
-            expanded set (1000 most common words) in the options, or change the
-            language entirely.
-          </p>
-        </section>
-        <section>
-          <H3 fa={{ icon: "fa-keyboard" }} text="keybinds" />
-          <p>
-            You can use <kbd>tab</kbd> and <kbd>enter</kbd> (or just{" "}
-            <kbd>tab</kbd> if you have quick tab mode enabled) to restart the
-            typing test. Open the command line by pressing <kbd>ctrl/cmd</kbd> +{" "}
-            <kbd>shift</kbd> + <kbd>p</kbd> or <kbd>esc</kbd> - there you can
-            access all the functionality you need without touching your mouse.
-          </p>
-        </section>
-        <section>
-          <H3 fa={{ icon: "fa-list-ol" }} text="stats" />
-          <dl class="grid">
-            <dt class="col-1 mr-4">wpm</dt>
-            <dd class="col-2">
-              - total number of characters in the correctly typed words
-              (including spaces), divided by 5 and normalised to 60 seconds.
-            </dd>
+                  tooltip: {
+                    animation: { duration: 250 },
+                    intersect: false,
+                    mode: "index",
+                  },
+                },
+              }}
+            />
+          )}
+        </AsyncContent>
+        <div class="text-right text-xs text-sub">
+          distribution of time 60 leaderboard results (wpm)
+        </div>
+      </section>
+      <section>
+        <H2 fa={{ icon: "fa-info-circle" }} text="about" />
+        <p>
+          Monkeytype is a minimalistic and customizable typing test. It features
+          many test modes, an account system to save your typing speed history,
+          and user-configurable features such as themes, sounds, a smooth caret,
+          and more. Monkeytype attempts to emulate the experience of natural
+          keyboard typing during a typing test, by unobtrusively presenting the
+          text prompts and displaying typed characters in-place, providing
+          straightforward, real-time feedback on typos, speed, and accuracy.
+          <br />
+          <br />
+          Test yourself in various modes, track your progress and improve your
+          speed.
+        </p>
+      </section>
+      <section>
+        <H3 fa={{ icon: "fa-align-left" }} text="word set" />
+        <p>
+          By default, this website uses the most common 200 words in the English
+          language to generate its tests. You can change to an expanded set
+          (1000 most common words) in the options, or change the language
+          entirely.
+        </p>
+      </section>
+      <section>
+        <H3 fa={{ icon: "fa-keyboard" }} text="keybinds" />
+        <p>
+          You can use <kbd>tab</kbd> and <kbd>enter</kbd> (or just{" "}
+          <kbd>tab</kbd> if you have quick tab mode enabled) to restart the
+          typing test. Open the command line by pressing <kbd>ctrl/cmd</kbd> +{" "}
+          <kbd>shift</kbd> + <kbd>p</kbd> or <kbd>esc</kbd> - there you can
+          access all the functionality you need without touching your mouse.
+        </p>
+      </section>
+      <section>
+        <H3 fa={{ icon: "fa-list-ol" }} text="stats" />
+        <dl class="grid">
+          <dt class="col-1 mr-4">wpm</dt>
+          <dd class="col-2">
+            - total number of characters in the correctly typed words (including
+            spaces), divided by 5 and normalised to 60 seconds.
+          </dd>
 
-            <dt class="col-1 mr-4">raw wpm</dt>
-            <dd class="col-2">
-              {" "}
-              - calculated just like wpm, but also includes incorrect words.
-            </dd>
+          <dt class="col-1 mr-4">raw wpm</dt>
+          <dd class="col-2">
+            {" "}
+            - calculated just like wpm, but also includes incorrect words.
+          </dd>
 
-            <dt class="col-1 mr-4">acc</dt>
-            <dd class="col-2"> - percentage of correctly pressed keys.</dd>
+          <dt class="col-1 mr-4">acc</dt>
+          <dd class="col-2"> - percentage of correctly pressed keys.</dd>
 
-            <dt class="col-1 mr-4">char</dt>
-            <dd class="col-2">
-              - correct characters / incorrect characters. Calculated after the
-              test has ended.
-            </dd>
+          <dt class="col-1 mr-4">char</dt>
+          <dd class="col-2">
+            - correct characters / incorrect characters. Calculated after the
+            test has ended.
+          </dd>
 
-            <dt class="col-1 mr-4">consistency</dt>
-            <dd class="col-2">
-              - based on the variance of your raw wpm. Closer to 100% is better.
-              Calculated using the coefficient of variation of raw wpm and
-              mapped onto a scale from 0 to 100.
-            </dd>
-          </dl>
-        </section>
-        <Show when={getConfig.ads === "sellout"}>
-          <div
-            id="ad-about-1-wrapper"
-            class="ad full-width advertisement ad-h place-self-center"
-          >
-            <div class="icon">
-              <Fa icon="fa-ad" />
-            </div>
-            <div id="ad-about-1"></div>
+          <dt class="col-1 mr-4">consistency</dt>
+          <dd class="col-2">
+            - based on the variance of your raw wpm. Closer to 100% is better.
+            Calculated using the coefficient of variation of raw wpm and mapped
+            onto a scale from 0 to 100.
+          </dd>
+        </dl>
+      </section>
+      <Show when={getConfig.ads === "sellout"}>
+        <div
+          id="ad-about-1-wrapper"
+          class="ad full-width advertisement ad-h place-self-center"
+        >
+          <div class="icon">
+            <Fa icon="fa-ad" />
           </div>
-          <div
-            id="ad-about-1-small-wrapper"
-            class="ad advertisement ad-h-s place-self-center"
-          >
-            <div class="icon small">
-              <Fa icon="fa-ad" />
-            </div>
-            <div id="ad-about-1-small"></div>
+          <div id="ad-about-1"></div>
+        </div>
+        <div
+          id="ad-about-1-small-wrapper"
+          class="ad advertisement ad-h-s place-self-center"
+        >
+          <div class="icon small">
+            <Fa icon="fa-ad" />
           </div>
-        </Show>
-        <section>
-          <H3 fa={{ icon: "fa-chart-area" }} text="results screen" />
-          <p>
-            After completing a test you will be able to see your wpm, raw wpm,
-            accuracy, character stats, test length, leaderboards info and test
-            info (you can hover over some values to get floating point numbers).
-            You can also see a graph of your wpm and raw over the duration of
-            the test. Remember that the wpm line is a global average, while the
-            raw wpm line is a local, momentary value (meaning if you stop, the
-            value is 0).
-          </p>
-        </section>
-        <section>
-          <H3 fa={{ icon: "fa-bug" }} text="bug report or feature request" />
-          <p>
-            If you encounter a bug, or have a feature request - join the Discord
-            server, send me an email, a direct message on Twitter or create an
-            issue on GitHub.
-          </p>
-        </section>
-        <div></div>
-        <section>
-          <H2 fa={{ icon: "fa-life-ring" }} text="support" />
-          <p>
-            Thanks to everyone who has supported this project. It would not be
-            possible without you and your continued support.
-          </p>
-          <div class="mt-4 text-xl">
-            <Button
-              fa={{
-                icon: "fa-donate",
-              }}
-              onClick={() => showModal("Support")}
-              text="support"
-              class="w-full p-8"
-            />
+          <div id="ad-about-1-small"></div>
+        </div>
+      </Show>
+      <section>
+        <H3 fa={{ icon: "fa-chart-area" }} text="results screen" />
+        <p>
+          After completing a test you will be able to see your wpm, raw wpm,
+          accuracy, character stats, test length, leaderboards info and test
+          info (you can hover over some values to get floating point numbers).
+          You can also see a graph of your wpm and raw over the duration of the
+          test. Remember that the wpm line is a global average, while the raw
+          wpm line is a local, momentary value (meaning if you stop, the value
+          is 0).
+        </p>
+      </section>
+      <section>
+        <H3 fa={{ icon: "fa-bug" }} text="bug report or feature request" />
+        <p>
+          If you encounter a bug, or have a feature request - join the Discord
+          server, send me an email, a direct message on Twitter or create an
+          issue on GitHub.
+        </p>
+      </section>
+      <div></div>
+      <section>
+        <H2 fa={{ icon: "fa-life-ring" }} text="support" />
+        <p>
+          Thanks to everyone who has supported this project. It would not be
+          possible without you and your continued support.
+        </p>
+        <div class="mt-4 text-xl">
+          <Button
+            fa={{
+              icon: "fa-donate",
+            }}
+            onClick={() => showModal("Support")}
+            text="support"
+            class="w-full p-8"
+          />
+        </div>
+      </section>
+      <div></div>
+      <section>
+        <H2 fa={{ icon: "fa-envelope" }} text="contact" />
+        <p>
+          If you encounter a bug, have a feature request or just want to say hi
+          - here are the different ways you can contact me directly.
+        </p>
+        <div class="mt-4 grid w-full grid-cols-1 gap-4 text-xl sm:grid-cols-2 lg:grid-cols-4">
+          <Button
+            text="mail"
+            fa={{ icon: "fa-envelope" }}
+            onClick={() => showModal("Contact")}
+            class="w-full p-8"
+          />
+          <Button
+            text="twitter"
+            fa={{ icon: "fa-twitter", variant: "brand" }}
+            href="https://x.com/monkeytype"
+            class="w-full p-8"
+          />
+          <Button
+            text="discord"
+            fa={{ icon: "fa-discord", variant: "brand" }}
+            href="https://discord.gg/monkeytype"
+            class="w-full p-8"
+          />
+          <Button
+            text="github"
+            fa={{ icon: "fa-github", variant: "brand" }}
+            href="https://github.com/monkeytypegame/monkeytype"
+            class="w-full p-8"
+          />
+        </div>
+      </section>
+      <div></div>
+      <section>
+        <H2 fa={{ icon: "fa-users" }} text="credits" />
+        <p>
+          <Button
+            type="text"
+            text="Montydrei"
+            href="https://www.reddit.com/user/montydrei"
+            class="p-0 pt-2 pr-2 pb-2"
+          />
+          for the name suggestion
+        </p>
+        <p>
+          <Button
+            type="text"
+            text="Everyone"
+            href="https://www.reddit.com/r/MechanicalKeyboards/comments/gc6wx3/experimenting_with_a_completely_new_type_of/"
+            class="p-0 pt-2 pr-2 pb-2"
+          />
+          who provided valuable feedback on the original reddit post for the
+          prototype of this website
+        </p>
+        <p>
+          <Button
+            type="text"
+            text="Supporters"
+            href="#supporters_title"
+            class="p-0 pt-2 pr-2 pb-2"
+          />
+          who helped financially by donating, enabling optional ads or buying
+          merch
+        </p>
+        <p>
+          <Button
+            type="text"
+            text="Contributors"
+            href="https://github.com/monkeytypegame/monkeytype/graphs/contributors"
+            class="p-0 pt-2 pr-2 pb-2"
+          />
+          on GitHub that have helped with implementing various features, adding
+          themes and more
+        </p>
+      </section>
+      <Show when={getConfig.ads === "sellout"}>
+        <div
+          id="ad-about-2-wrapper"
+          class="ad full-width advertisement ad-h place-self-center"
+        >
+          <div class="icon">
+            <Fa icon="fa-ad" />
           </div>
-        </section>
-        <div></div>
-        <section>
-          <H2 fa={{ icon: "fa-envelope" }} text="contact" />
-          <p>
-            If you encounter a bug, have a feature request or just want to say
-            hi - here are the different ways you can contact me directly.
-          </p>
-          <div class="mt-4 grid w-full grid-cols-1 gap-4 text-xl sm:grid-cols-2 lg:grid-cols-4">
-            <Button
-              text="mail"
-              fa={{ icon: "fa-envelope" }}
-              onClick={() => showModal("Contact")}
-              class="w-full p-8"
-            />
-            <Button
-              text="twitter"
-              fa={{ icon: "fa-twitter", variant: "brand" }}
-              href="https://x.com/monkeytype"
-              class="w-full p-8"
-            />
-            <Button
-              text="discord"
-              fa={{ icon: "fa-discord", variant: "brand" }}
-              href="https://discord.gg/monkeytype"
-              class="w-full p-8"
-            />
-            <Button
-              text="github"
-              fa={{ icon: "fa-github", variant: "brand" }}
-              href="https://github.com/monkeytypegame/monkeytype"
-              class="w-full p-8"
-            />
+          <div id="ad-about-2"></div>
+        </div>
+        <div
+          id="ad-about-2-small-wrapper"
+          class="ad advertisement ad-h-s place-self-center"
+        >
+          <div class="icon small">
+            <Fa icon="fa-ad" />
           </div>
-        </section>
-        <div></div>
-        <section>
-          <H2 fa={{ icon: "fa-users" }} text="credits" />
-          <p>
-            <Button
-              type="text"
-              text="Montydrei"
-              href="https://www.reddit.com/user/montydrei"
-              class="p-0 pt-2 pr-2 pb-2"
-            />
-            for the name suggestion
-          </p>
-          <p>
-            <Button
-              type="text"
-              text="Everyone"
-              href="https://www.reddit.com/r/MechanicalKeyboards/comments/gc6wx3/experimenting_with_a_completely_new_type_of/"
-              class="p-0 pt-2 pr-2 pb-2"
-            />
-            who provided valuable feedback on the original reddit post for the
-            prototype of this website
-          </p>
-          <p>
-            <Button
-              type="text"
-              text="Supporters"
-              href="#supporters_title"
-              class="p-0 pt-2 pr-2 pb-2"
-            />
-            who helped financially by donating, enabling optional ads or buying
-            merch
-          </p>
-          <p>
-            <Button
-              type="text"
-              text="Contributors"
-              href="https://github.com/monkeytypegame/monkeytype/graphs/contributors"
-              class="p-0 pt-2 pr-2 pb-2"
-            />
-            on GitHub that have helped with implementing various features,
-            adding themes and more
-          </p>
-        </section>
-        <Show when={getConfig.ads === "sellout"}>
-          <div
-            id="ad-about-2-wrapper"
-            class="ad full-width advertisement ad-h place-self-center"
-          >
-            <div class="icon">
-              <Fa icon="fa-ad" />
+          <div id="ad-about-2-small"></div>
+        </div>
+      </Show>
+      <div></div>
+      <section>
+        <H2 fa={{ icon: "fa-hand-holding-usd" }} text="top supporters" />
+        <AsyncContent
+          query={supporters}
+          errorMessage="Failed to get supporters"
+        >
+          {(data) => (
+            <div
+              class="grid"
+              style={{
+                "grid-template-columns": "repeat(auto-fill, minmax(13em, 1fr))",
+              }}
+            >
+              <For each={data}>{(name) => <div>{name}</div>}</For>
             </div>
-            <div id="ad-about-2"></div>
-          </div>
-          <div
-            id="ad-about-2-small-wrapper"
-            class="ad advertisement ad-h-s place-self-center"
-          >
-            <div class="icon small">
-              <Fa icon="fa-ad" />
+          )}
+        </AsyncContent>
+      </section>
+      <div></div>
+      <section>
+        <H2 fa={{ icon: "fa-code-branch" }} text="contributors" />
+        <AsyncContent
+          query={contributors}
+          errorMessage="Failed to get contributors"
+        >
+          {(data) => (
+            <div
+              class="grid"
+              style={{
+                "grid-template-columns": "repeat(auto-fill, minmax(13em, 1fr))",
+              }}
+            >
+              <For each={data}>{(name) => <div>{name}</div>}</For>
             </div>
-            <div id="ad-about-2-small"></div>
-          </div>
-        </Show>
-        <div></div>
-        <section>
-          <H2 fa={{ icon: "fa-hand-holding-usd" }} text="top supporters" />
-          <AsyncContent
-            resource={supporters}
-            errorMessage="Failed to get supporters"
-          >
-            {(data) => (
-              <div
-                class="grid"
-                style={{
-                  "grid-template-columns":
-                    "repeat(auto-fill, minmax(13em, 1fr))",
-                }}
-              >
-                <For each={data}>{(name) => <div>{name}</div>}</For>
-              </div>
-            )}
-          </AsyncContent>
-        </section>
-        <div></div>
-        <section>
-          <H2 fa={{ icon: "fa-code-branch" }} text="contributors" />
-          <AsyncContent
-            resource={contributors}
-            errorMessage="Failed to get contributors"
-          >
-            {(data) => (
-              <div
-                class="grid"
-                style={{
-                  "grid-template-columns":
-                    "repeat(auto-fill, minmax(13em, 1fr))",
-                }}
-              >
-                <For each={data}>{(name) => <div>{name}</div>}</For>
-              </div>
-            )}
-          </AsyncContent>
-        </section>
-      </div>
-    </Show>
+          )}
+        </AsyncContent>
+      </section>
+    </div>
   );
 }
 
-type GroupDisplay = {
-  label: string;
-  text: string;
-  subText: string;
-};
-
-async function fetchTypingStats(): Promise<{
-  timeTyping: GroupDisplay;
-  testsStarted: GroupDisplay;
-  testsCompleted: GroupDisplay;
-}> {
-  const response = await Ape.public.getTypingStats();
-
-  if (response.status !== 200) {
-    throw new Error(response.body.message);
-  }
-  const data = response.body.data;
-
-  const typingSecondsRounded = Math.round(data.timeTyping);
-  const typingDuration = intervalToDuration({
-    start: 0,
-    end: typingSecondsRounded * 1000,
-  });
-  const startedWithMagnitude = getNumberWithMagnitude(data.testsStarted);
-  const completedWithMagnitude = getNumberWithMagnitude(data.testsCompleted);
-
-  const result = {
-    timeTyping: {
-      label:
-        numberWithSpaces(Math.round(typingSecondsRounded / 3600)) + " hours",
-      text: typingDuration.years?.toString() ?? "",
-      subText: "years",
-    },
-    testsStarted: {
-      label: numberWithSpaces(data.testsStarted) + " tests",
-      text:
-        startedWithMagnitude.rounded < 10
-          ? startedWithMagnitude.roundedTo2.toString()
-          : startedWithMagnitude.rounded.toString(),
-      subText: startedWithMagnitude.orderOfMagnitude,
-    },
-    testsCompleted: {
-      label: numberWithSpaces(data.testsCompleted) + " tests",
-      text:
-        completedWithMagnitude.rounded < 10
-          ? completedWithMagnitude.roundedTo2.toString()
-          : completedWithMagnitude.rounded.toString(),
-      subText: completedWithMagnitude.orderOfMagnitude,
-    },
-  };
-  return result;
-}
-
-async function fetchSpeedHistogram(): Promise<
-  | {
-      labels: string[];
-      data: { x: number; y: number }[];
-    }
-  | undefined
-> {
-  const response = await Ape.public.getSpeedHistogram({
-    query: {
-      language: "english",
-      mode: "time",
-      mode2: "60",
-    },
-  });
-
-  if (response.status !== 200) {
-    throw new Error(response.body.message);
-  }
-
-  const data = response.body.data;
-
-  const histogramChartDataBucketed: { x: number; y: number }[] = [];
-  const labels: string[] = [];
-
-  const keys = Object.keys(data).sort(
-    (a, b) => parseInt(a, 10) - parseInt(b, 10),
-  );
-  for (const [i, key] of keys.entries()) {
-    const nextKey = keys[i + 1];
-    const bucket = parseInt(key, 10);
-    histogramChartDataBucketed.push({
-      x: bucket,
-      y: data[bucket] as number,
-    });
-    labels.push(`${bucket} - ${bucket + 9}`);
-    if (nextKey !== undefined && bucket + 10 !== parseInt(nextKey, 10)) {
-      for (let j = bucket + 10; j < parseInt(nextKey, 10); j += 10) {
-        histogramChartDataBucketed.push({ x: j, y: 0 });
-        labels.push(`${j} - ${j + 9}`);
-      }
-    }
-  }
-  return { data: histogramChartDataBucketed, labels };
+function prefetch(): void {
+  void queryClient.prefetchQuery(getContributorsQueryOptions());
+  void queryClient.prefetchQuery(getSupportersQueryOptions());
+  void queryClient.prefetchQuery(getTypingStatsQueryOptions());
+  void queryClient.prefetchQuery(getSpeedHistogramQueryOptions());
 }
diff --git a/frontend/src/ts/elements/settings/theme-picker.ts b/frontend/src/ts/elements/settings/theme-picker.ts
index 125f967e7e95..f76df63246da 100644
--- a/frontend/src/ts/elements/settings/theme-picker.ts
+++ b/frontend/src/ts/elements/settings/theme-picker.ts
@@ -321,7 +321,7 @@ qs(".pageSettings")?.onChild("click", ".section.themes .theme.button", (e) => {
   }
 });
 
-function handleColorInput(props: {
+function handleColorInput(options: {
   convertColor: boolean;
 }): (e: Event) => void {
   return (e) => {
@@ -332,7 +332,7 @@ function handleColorInput(props: {
 
     let color: string;
 
-    if (props.convertColor) {
+    if (options.convertColor) {
       try {
         color = Colors.convertStringToHex(target.value);
       } catch {
diff --git a/frontend/src/ts/hooks/useLocalStorage.ts b/frontend/src/ts/hooks/useLocalStorage.ts
index 439b0fb64a95..ce8413215fb1 100644
--- a/frontend/src/ts/hooks/useLocalStorage.ts
+++ b/frontend/src/ts/hooks/useLocalStorage.ts
@@ -45,7 +45,7 @@ export function useLocalStorage<T>(
   const [value, setValueInternal] = createSignal<T>(storage.get());
 
   // Custom setter that syncs to localStorage
-  const setValue = ((newValue: T | ((prev: T) => T)) => {
+  const setValue = (newValue: T | ((prev: T) => T)): T => {
     const resolvedValue =
       typeof newValue === "function"
         ? (newValue as (prev: T) => T)(value())
@@ -55,8 +55,8 @@ export function useLocalStorage<T>(
     if (success) {
       setValueInternal(() => resolvedValue);
     }
-    return value();
-  }) as Setter<T>;
+    return resolvedValue;
+  };
 
   // Sync changes across tabs/windows
   if (syncAcrossTabs) {
@@ -83,5 +83,5 @@ export function useLocalStorage<T>(
     });
   }
 
-  return [value, setValue];
+  return [value, setValue as Setter<T>];
 }
diff --git a/frontend/src/ts/input/handlers/keydown.ts b/frontend/src/ts/input/handlers/keydown.ts
index e15a5a244993..5bbb67c8ba0f 100644
--- a/frontend/src/ts/input/handlers/keydown.ts
+++ b/frontend/src/ts/input/handlers/keydown.ts
@@ -170,6 +170,14 @@ export async function onKeydown(event: KeyboardEvent): Promise<void> {
     return;
   }
 
+  if (!event.repeat) {
+    //delaying because type() is called before show()
+    // meaning the first keypress of the test is not animated
+    setTimeout(() => {
+      Monkey.type(event);
+    }, 0);
+  }
+
   if (Config.layout !== "default") {
     const emulatedChar = await getCharFromEvent(event);
     if (emulatedChar !== null) {
@@ -179,14 +187,6 @@ export async function onKeydown(event: KeyboardEvent): Promise<void> {
     }
   }
 
-  if (!event.repeat) {
-    //delaying because type() is called before show()
-    // meaning the first keypress of the test is not animated
-    setTimeout(() => {
-      Monkey.type(event);
-    }, 0);
-  }
-
   if (event.key === "Tab") {
     await handleTab(event, now);
     return;
diff --git a/frontend/src/ts/pages/page.ts b/frontend/src/ts/pages/page.ts
index aa23f89e43b6..44032b6cc3f6 100644
--- a/frontend/src/ts/pages/page.ts
+++ b/frontend/src/ts/pages/page.ts
@@ -94,16 +94,16 @@ export default class Page<T> {
   protected _beforeShow: (options: Options<T>) => Promise<void>;
   public afterShow: () => Promise<void>;
 
-  constructor(props: PageProperties<T>) {
-    this.id = props.id;
-    this.display = props.display;
-    this.element = props.element;
-    this.pathname = props.path;
-    this.loadingOptions = props.loadingOptions;
-    this.beforeHide = props.beforeHide ?? empty;
-    this.afterHide = props.afterHide ?? empty;
-    this._beforeShow = props.beforeShow ?? empty;
-    this.afterShow = props.afterShow ?? empty;
+  constructor(options: PageProperties<T>) {
+    this.id = options.id;
+    this.display = options.display;
+    this.element = options.element;
+    this.pathname = options.path;
+    this.loadingOptions = options.loadingOptions;
+    this.beforeHide = options.beforeHide ?? empty;
+    this.afterHide = options.afterHide ?? empty;
+    this._beforeShow = options.beforeShow ?? empty;
+    this.afterShow = options.afterShow ?? empty;
   }
 
   public async beforeShow(options: Options<T>): Promise<void> {
@@ -130,10 +130,10 @@ export class PageWithUrlParams<T, U extends UrlParamsSchema> extends Page<T> {
     options: OptionsWithUrlParams<T, U>,
   ) => Promise<void>;
 
-  constructor(props: PagePropertiesWithUrlParams<T, U>) {
-    super(props);
-    this.urlSchema = props.urlParamsSchema;
-    this._beforeShow = props.beforeShow ?? empty;
+  constructor(options: PagePropertiesWithUrlParams<T, U>) {
+    super(options);
+    this.urlSchema = options.urlParamsSchema;
+    this._beforeShow = options.beforeShow ?? empty;
   }
 
   private readUrlParams(): z.infer<U> | undefined {
diff --git a/frontend/src/ts/queries/index.ts b/frontend/src/ts/queries/index.ts
new file mode 100644
index 000000000000..d247b59fdc73
--- /dev/null
+++ b/frontend/src/ts/queries/index.ts
@@ -0,0 +1,3 @@
+import { QueryClient } from "@tanstack/solid-query";
+
+export const queryClient = new QueryClient();
diff --git a/frontend/src/ts/queries/public.ts b/frontend/src/ts/queries/public.ts
new file mode 100644
index 000000000000..f997bbd18448
--- /dev/null
+++ b/frontend/src/ts/queries/public.ts
@@ -0,0 +1,147 @@
+import { queryOptions } from "@tanstack/solid-query";
+import { intervalToDuration } from "date-fns";
+import Ape from "../ape";
+import { getContributorsList, getSupportersList } from "../utils/json-data";
+import { getNumberWithMagnitude, numberWithSpaces } from "../utils/numbers";
+import { baseKey } from "./utils/keys";
+
+const queryKeys = {
+  root: () => baseKey("public"),
+  contributors: () => [...queryKeys.root(), "contributors"],
+  supporters: () => [...queryKeys.root(), "supporters"],
+  typingStats: () => [...queryKeys.root(), "typingStats"],
+  speedHistogram: () => [...queryKeys.root(), "speedHistogram"],
+};
+
+//cache results for one hour
+const staleTime = 1000 * 60 * 60;
+
+// oxlint-disable-next-line typescript/explicit-function-return-type
+export const getContributorsQueryOptions = () =>
+  queryOptions({
+    queryKey: queryKeys.contributors(),
+    queryFn: getContributorsList,
+    staleTime,
+  });
+
+// oxlint-disable-next-line typescript/explicit-function-return-type
+export const getSupportersQueryOptions = () =>
+  queryOptions({
+    queryKey: queryKeys.supporters(),
+    queryFn: getSupportersList,
+    staleTime,
+  });
+
+// oxlint-disable-next-line typescript/explicit-function-return-type
+export const getTypingStatsQueryOptions = () =>
+  queryOptions({
+    queryKey: queryKeys.typingStats(),
+    queryFn: fetchTypingStats,
+    staleTime,
+  });
+
+// oxlint-disable-next-line typescript/explicit-function-return-type
+export const getSpeedHistogramQueryOptions = () =>
+  queryOptions({
+    queryKey: queryKeys.speedHistogram(),
+    queryFn: fetchSpeedHistogram,
+    staleTime,
+  });
+
+async function fetchSpeedHistogram(): Promise<
+  | {
+      labels: string[];
+      data: { x: number; y: number }[];
+    }
+  | undefined
+> {
+  const response = await Ape.public.getSpeedHistogram({
+    query: {
+      language: "english",
+      mode: "time",
+      mode2: "60",
+    },
+  });
+
+  if (response.status !== 200) {
+    throw new Error(response.body.message);
+  }
+
+  const data = response.body.data;
+
+  const histogramChartDataBucketed: { x: number; y: number }[] = [];
+  const labels: string[] = [];
+
+  const keys = Object.keys(data).sort(
+    (a, b) => parseInt(a, 10) - parseInt(b, 10),
+  );
+  for (const [i, key] of keys.entries()) {
+    const nextKey = keys[i + 1];
+    const bucket = parseInt(key, 10);
+    histogramChartDataBucketed.push({
+      x: bucket,
+      y: data[bucket] as number,
+    });
+    labels.push(`${bucket} - ${bucket + 9}`);
+    if (nextKey !== undefined && bucket + 10 !== parseInt(nextKey, 10)) {
+      for (let j = bucket + 10; j < parseInt(nextKey, 10); j += 10) {
+        histogramChartDataBucketed.push({ x: j, y: 0 });
+        labels.push(`${j} - ${j + 9}`);
+      }
+    }
+  }
+  return { data: histogramChartDataBucketed, labels };
+}
+
+type GroupDisplay = {
+  label: string;
+  text: string;
+  subText: string;
+};
+
+async function fetchTypingStats(): Promise<{
+  timeTyping: GroupDisplay;
+  testsStarted: GroupDisplay;
+  testsCompleted: GroupDisplay;
+}> {
+  const response = await Ape.public.getTypingStats();
+
+  if (response.status !== 200) {
+    throw new Error(response.body.message);
+  }
+  const data = response.body.data;
+
+  const typingSecondsRounded = Math.round(data.timeTyping);
+  const typingDuration = intervalToDuration({
+    start: 0,
+    end: typingSecondsRounded * 1000,
+  });
+  const startedWithMagnitude = getNumberWithMagnitude(data.testsStarted);
+  const completedWithMagnitude = getNumberWithMagnitude(data.testsCompleted);
+
+  const result = {
+    timeTyping: {
+      label:
+        numberWithSpaces(Math.round(typingSecondsRounded / 3600)) + " hours",
+      text: typingDuration.years?.toString() ?? "",
+      subText: "years",
+    },
+    testsStarted: {
+      label: numberWithSpaces(data.testsStarted) + " tests",
+      text:
+        startedWithMagnitude.rounded < 10
+          ? startedWithMagnitude.roundedTo2.toString()
+          : startedWithMagnitude.rounded.toString(),
+      subText: startedWithMagnitude.orderOfMagnitude,
+    },
+    testsCompleted: {
+      label: numberWithSpaces(data.testsCompleted) + " tests",
+      text:
+        completedWithMagnitude.rounded < 10
+          ? completedWithMagnitude.roundedTo2.toString()
+          : completedWithMagnitude.rounded.toString(),
+      subText: completedWithMagnitude.orderOfMagnitude,
+    },
+  };
+  return result;
+}
diff --git a/frontend/src/ts/queries/utils/keys.ts b/frontend/src/ts/queries/utils/keys.ts
new file mode 100644
index 000000000000..84cbbaf79e6f
--- /dev/null
+++ b/frontend/src/ts/queries/utils/keys.ts
@@ -0,0 +1,6 @@
+export function baseKey(
+  key: string,
+  options?: { isUserSpecific?: true },
+): unknown[] {
+  return options?.isUserSpecific ? ["user", key] : [key];
+}
diff --git a/frontend/src/ts/utils/json-data.ts b/frontend/src/ts/utils/json-data.ts
index da84b000122d..eace5cfa19de 100644
--- a/frontend/src/ts/utils/json-data.ts
+++ b/frontend/src/ts/utils/json-data.ts
@@ -168,7 +168,7 @@ export async function getChallengeList(): Promise<Challenge[]> {
  * @returns A promise that resolves to the list of supporters.
  */
 export async function getSupportersList(): Promise<string[]> {
-  const data = await cachedFetchJson<string[]>("/supporters.json");
+  const data = await fetchJson<string[]>("/supporters.json");
   return data;
 }
 
@@ -177,7 +177,7 @@ export async function getSupportersList(): Promise<string[]> {
  * @returns A promise that resolves to the list of contributors.
  */
 export async function getContributorsList(): Promise<string[]> {
-  const data = await cachedFetchJson<string[]>("/contributors.json");
+  const data = await fetchJson<string[]>("/contributors.json");
   return data;
 }
 
diff --git a/package.json b/package.json
index f67eaf2842aa..4c532cd090ce 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "monkeytype",
-  "version": "26.2.0",
+  "version": "26.6.0",
   "private": true,
   "license": "GPL-3.0",
   "type": "module",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dae83840169d..59bda0b9f6db 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -282,6 +282,12 @@ importers:
       '@solidjs/meta':
         specifier: 0.29.4
         version: 0.29.4(solid-js@1.9.10)
+      '@tanstack/solid-query':
+        specifier: 5.90.23
+        version: 5.90.23(solid-js@1.9.10)
+      '@tanstack/solid-query-devtools':
+        specifier: 5.91.3
+        version: 5.91.3(@tanstack/solid-query@5.90.23(solid-js@1.9.10))(solid-js@1.9.10)
       '@tanstack/solid-table':
         specifier: 8.21.3
         version: 8.21.3(solid-js@1.9.10)
@@ -385,6 +391,9 @@ importers:
       '@tailwindcss/vite':
         specifier: 4.1.18
         version: 4.1.18(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.70.0)(terser@5.46.0)(tsx@4.16.2)(yaml@2.8.1))
+      '@tanstack/eslint-plugin-query':
+        specifier: 5.91.4
+        version: 5.91.4(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
       '@testing-library/dom':
         specifier: 10.4.1
         version: 10.4.1
@@ -3379,6 +3388,32 @@ packages:
     peerDependencies:
       vite: ^5.2.0 || ^6 || ^7
 
+  '@tanstack/eslint-plugin-query@5.91.4':
+    resolution: {integrity: sha512-8a+GAeR7oxJ5laNyYBQ6miPK09Hi18o5Oie/jx8zioXODv/AUFLZQecKabPdpQSLmuDXEBPKFh+W5DKbWlahjQ==}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: ^5.0.0
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@tanstack/query-core@5.90.20':
+    resolution: {integrity: sha512-OMD2HLpNouXEfZJWcKeVKUgQ5n+n3A2JFmBaScpNDUqSrQSjiveC7dKMe53uJUg1nDG16ttFPz2xfilz6i2uVg==}
+
+  '@tanstack/query-devtools@5.93.0':
+    resolution: {integrity: sha512-+kpsx1NQnOFTZsw6HAFCW3HkKg0+2cepGtAWXjiiSOJJ1CtQpt72EE2nyZb+AjAbLRPoeRmPJ8MtQd8r8gsPdg==}
+
+  '@tanstack/solid-query-devtools@5.91.3':
+    resolution: {integrity: sha512-xzVwIIxQPbiublZP3RkGp8KVjt8zenv5y1YTSRarP32mLUHJgfdofvjsDvMEhhL/lomz90qa0jCIGsSxoSTyYQ==}
+    peerDependencies:
+      '@tanstack/solid-query': ^5.90.23
+      solid-js: ^1.6.0
+
+  '@tanstack/solid-query@5.90.23':
+    resolution: {integrity: sha512-pbZc4+Kgm7ktzIuu01R3KOWfazQKgNp4AZvW0RSvv+sNMpYoileUDAkXEcjDJe6RJmb3fVvTR4LlcSL5pxDElQ==}
+    peerDependencies:
+      solid-js: ^1.6.0
+
   '@tanstack/solid-table@8.21.3':
     resolution: {integrity: sha512-PmhfSLBxVKiFs01LtYOYrCRhCyTUjxmb4KlxRQiqcALtip8+DOJeeezQM4RSX/GUS0SMVHyH/dNboCpcO++k2A==}
     engines: {node: '>=12'}
@@ -10339,7 +10374,7 @@ snapshots:
     dependencies:
       '@babel/compat-data': 7.29.0
       '@babel/helper-validator-option': 7.27.1
-      browserslist: 4.28.0
+      browserslist: 4.28.1
       lru-cache: 5.1.1
       semver: 6.3.1
 
@@ -13095,6 +13130,30 @@ snapshots:
       tailwindcss: 4.1.18
       vite: 7.1.12(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.70.0)(terser@5.46.0)(tsx@4.16.2)(yaml@2.8.1)
 
+  '@tanstack/eslint-plugin-query@5.91.4(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/utils': 8.52.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.39.1(jiti@2.6.1)
+    optionalDependencies:
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@tanstack/query-core@5.90.20': {}
+
+  '@tanstack/query-devtools@5.93.0': {}
+
+  '@tanstack/solid-query-devtools@5.91.3(@tanstack/solid-query@5.90.23(solid-js@1.9.10))(solid-js@1.9.10)':
+    dependencies:
+      '@tanstack/query-devtools': 5.93.0
+      '@tanstack/solid-query': 5.90.23(solid-js@1.9.10)
+      solid-js: 1.9.10
+
+  '@tanstack/solid-query@5.90.23(solid-js@1.9.10)':
+    dependencies:
+      '@tanstack/query-core': 5.90.20
+      solid-js: 1.9.10
+
   '@tanstack/solid-table@8.21.3(solid-js@1.9.10)':
     dependencies:
       '@tanstack/table-core': 8.21.3