diff --git a/frontend/src/ts/ape/server-configuration.ts b/frontend/src/ts/ape/server-configuration.ts
index 75a60cfd99cd..c63100950238 100644
--- a/frontend/src/ts/ape/server-configuration.ts
+++ b/frontend/src/ts/ape/server-configuration.ts
@@ -1,8 +1,7 @@
 import { Configuration } from "@monkeytype/schemas/configuration";
-import Ape from ".";
 import { promiseWithResolvers } from "../utils/misc";
-
-let config: Configuration | undefined = undefined;
+import { queryClient } from "../queries";
+import { getServerConfigurationQueryOptions } from "../queries/server-configuration";
 
 const {
   promise: configurationPromise,
@@ -13,19 +12,16 @@ const {
 export { configurationPromise };
 
 export function get(): Configuration | undefined {
-  return config;
+  return queryClient.getQueryData(
+    getServerConfigurationQueryOptions().queryKey,
+  );
 }
 
 export async function sync(): Promise<void> {
-  const response = await Ape.configuration.get();
-
-  if (response.status !== 200) {
-    const message = `Could not fetch configuration: ${response.body.message}`;
-    console.error(message);
-    reject(message);
-    return;
-  } else {
-    config = response.body.data ?? undefined;
+  try {
+    await queryClient.fetchQuery(getServerConfigurationQueryOptions());
     resolve(true);
+  } catch (e) {
+    reject(e);
   }
 }
diff --git a/frontend/src/ts/components/common/Button.tsx b/frontend/src/ts/components/common/Button.tsx
index acd421c94a66..b786bfba842d 100644
--- a/frontend/src/ts/components/common/Button.tsx
+++ b/frontend/src/ts/components/common/Button.tsx
@@ -1,4 +1,4 @@
-import { JSXElement, Show } from "solid-js";
+import { JSX, JSXElement, Show } from "solid-js";
 
 import { Conditional } from "./Conditional";
 import { Fa, FaProps } from "./Fa";
@@ -7,7 +7,9 @@ type BaseProps = {
   text?: string;
   fa?: FaProps;
   class?: string;
+  classList?: JSX.HTMLAttributes<HTMLButtonElement>["classList"];
   type?: "text" | "button";
+  active?: boolean;
   children?: JSXElement;
 };
 
@@ -15,11 +17,13 @@ type ButtonProps = BaseProps & {
   onClick: () => void;
   href?: never;
   sameTarget?: true;
+  disabled?: boolean;
 };
 
 type AnchorProps = BaseProps & {
   href: string;
   onClick?: never;
+  disabled?: never;
 };
 
 export function Button(props: ButtonProps | AnchorProps): JSXElement {
@@ -36,10 +40,13 @@ export function Button(props: ButtonProps | AnchorProps): JSXElement {
     </>
   );
 
-  const getClassList = (): Record<string, boolean> => {
+  const getClassList = (): Record<string, boolean | undefined> => {
     return {
       [(props.type ?? "button") === "text" ? "textButton" : buttonClass]: true,
       [props.class ?? ""]: props.class !== undefined,
+      "bg-main": props.active,
+      "text-bg": props.active,
+      ...props.classList,
     };
   };
 
@@ -61,6 +68,7 @@ export function Button(props: ButtonProps | AnchorProps): JSXElement {
           type="button"
           classList={getClassList()}
           onClick={() => props.onClick?.()}
+          disabled={props.disabled ?? false}
         >
           {content}
         </button>
diff --git a/frontend/src/ts/components/common/Fa.tsx b/frontend/src/ts/components/common/Fa.tsx
index 60604d84f930..aac4445f4134 100644
--- a/frontend/src/ts/components/common/Fa.tsx
+++ b/frontend/src/ts/components/common/Fa.tsx
@@ -12,13 +12,13 @@ export function Fa(props: FaProps): JSXElement {
   const variant = (): string => props.variant ?? "solid";
   return (
     <i
-      class={props.icon}
       classList={{
         ["fas"]: variant() === "solid",
         ["far"]: variant() === "regular",
         ["fab"]: variant() === "brand",
         ["fa-fw"]: props.fixedWidth === true,
         ["fa-spin"]: props.spin === true,
+        [props.icon]: true,
       }}
       style={{
         "font-size": props.size !== undefined ? `${props.size}em` : undefined,
diff --git a/frontend/src/ts/components/common/Headers.tsx b/frontend/src/ts/components/common/Headers.tsx
new file mode 100644
index 000000000000..e9e5946b64b4
--- /dev/null
+++ b/frontend/src/ts/components/common/Headers.tsx
@@ -0,0 +1,58 @@
+import { JSXElement, Show } from "solid-js";
+
+import { cn } from "../../utils/cn";
+
+import { Fa, FaProps } from "./Fa";
+
+export function H1(props: {
+  class?: string;
+  text: string;
+  fa?: FaProps;
+}): JSXElement {
+  return (
+    <h1
+      class={cn(
+        "flex place-items-center gap-4 pb-4 text-4xl text-sub",
+        props.class,
+      )}
+    >
+      <Show when={props.fa}>
+        <Fa {...(props.fa as FaProps)} />
+      </Show>
+      {props.text}
+    </h1>
+  );
+}
+
+export function H2(props: {
+  class?: string;
+  text: string;
+  fa?: FaProps;
+}): JSXElement {
+  return (
+    <h2
+      class={cn(
+        "flex place-items-center gap-4 pb-4 text-2xl text-sub",
+        props.class,
+      )}
+    >
+      <Show when={props.fa}>
+        <Fa {...(props.fa as FaProps)} />
+      </Show>
+      {props.text}
+    </h2>
+  );
+}
+
+export function H3(props: {
+  class?: string;
+  text: string;
+  fa: FaProps;
+}): JSXElement {
+  return (
+    <h3 class={cn("flex place-items-center gap-2 pb-2 text-sub", props.class)}>
+      <Fa {...props.fa} />
+      {props.text}
+    </h3>
+  );
+}
diff --git a/frontend/src/ts/components/common/LoadingCircle.tsx b/frontend/src/ts/components/common/LoadingCircle.tsx
new file mode 100644
index 000000000000..50469a57bcb8
--- /dev/null
+++ b/frontend/src/ts/components/common/LoadingCircle.tsx
@@ -0,0 +1,12 @@
+import { JSXElement } from "solid-js";
+
+import { cn } from "../../utils/cn";
+
+import { Fa } from "./Fa";
+export function LoadingCircle(props: { class?: string }): JSXElement {
+  return (
+    <div class={cn("preloader text-main", props.class)}>
+      <Fa icon="fa-circle-notch" fixedWidth spin />
+    </div>
+  );
+}
diff --git a/frontend/src/ts/components/mount.tsx b/frontend/src/ts/components/mount.tsx
index a4dae541c9c4..e0976c33ed03 100644
--- a/frontend/src/ts/components/mount.tsx
+++ b/frontend/src/ts/components/mount.tsx
@@ -10,11 +10,11 @@ import { Theme } from "./core/Theme";
 import { Footer } from "./layout/footer/Footer";
 import { Overlays } from "./layout/overlays/Overlays";
 import { Modals } from "./modals/Modals";
-import { AboutPage } from "./pages/AboutPage";
+import { LeaderboardPage } from "./pages/leaderboard/LeaderboardPage";
 
 const components: Record<string, () => JSXElement> = {
   footer: () => <Footer />,
-  aboutpage: () => <AboutPage />,
+  aboutpage: () => <LeaderboardPage />,
   modals: () => <Modals />,
   overlays: () => <Overlays />,
   theme: () => <Theme />,
diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
new file mode 100644
index 000000000000..34a4add459c9
--- /dev/null
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
@@ -0,0 +1,369 @@
+import { LanguageSchema } from "@monkeytype/schemas/languages";
+import { ModeSchema } from "@monkeytype/schemas/shared";
+import { useQuery } from "@tanstack/solid-query";
+import {
+  Accessor,
+  createEffect,
+  createSignal,
+  JSXElement,
+  Setter,
+  Show,
+} from "solid-js";
+import { z } from "zod";
+
+import { configurationPromise as serverConfigurationPromise } from "../../../ape/server-configuration";
+import { getSnapshot, updateLbMemory } from "../../../db";
+import { useLocalStorage } from "../../../hooks/useLocalStorage";
+import { PageWithUrlParams } from "../../../pages/page";
+import { queryClient } from "../../../queries";
+import {
+  getLeaderboardQueryOptions,
+  getRankQueryOptions,
+  Selection,
+  SelectionSchema,
+} from "../../../queries/leaderboards";
+import { getServerConfigurationQueryOptions } from "../../../queries/server-configuration";
+import { getActivePage, isLoggedIn } from "../../../signals/core";
+import { qsr } from "../../../utils/dom";
+import * as Skeleton from "../../../utils/skeleton";
+import AsyncContent from "../../common/AsyncContent";
+
+import { Sidebar } from "./Sidebar";
+import { Table } from "./Table";
+import { TableNavigation } from "./TableNavigation";
+import { Title } from "./Title";
+import { UserRank } from "./UserRank";
+
+//TODO change
+export const pageName = "about";
+
+export const LeaderboardUrlParamsSchema = z
+  .object({
+    type: z.enum(["allTime", "daily", "weekly"]),
+    mode: ModeSchema.optional(),
+    mode2: z.string().optional(),
+    language: LanguageSchema.optional(),
+    yesterday: z.boolean().optional(),
+    lastWeek: z.boolean().optional(),
+    friendsOnly: z.boolean().optional(),
+    page: z.number().optional(),
+    goToUserPage: z.boolean().optional(),
+  })
+  .partial();
+type LeaderboardUrlParams = z.infer<typeof LeaderboardUrlParamsSchema>;
+
+qsr(`nav .view-${pageName}`).on("mouseenter", () => {
+  prefetch();
+});
+
+const [selection, setSelection] = lsSelection();
+const [page, setPage] = createSignal(0);
+
+export function LeaderboardPage(): JSXElement {
+  const isOpen = (): boolean => getActivePage() === pageName;
+
+  const [scrollToUser, setScrollToUser] = createSignal(false);
+
+  createEffect(() => {
+    //TODO fetch previous page as well, check boundaries
+    if (isOpen()) {
+      void queryClient.prefetchQuery(
+        getLeaderboardQueryOptions({
+          ...selection(),
+          page: page() + 1,
+        }),
+      );
+    }
+  });
+
+  createEffect(() => {
+    //update url after the data is loaded
+    if (dataQuery.isSuccess) updateGetParameters(selection(), page());
+  });
+
+  createEffect(() => {
+    //update url after the data is loaded
+    if (rankQuery.isSuccess) syncLbMemory();
+  });
+
+  const dataQuery = useQuery(() => ({
+    ...getLeaderboardQueryOptions({
+      ...selection(),
+      page: page() ?? 0,
+    }),
+    enabled: isOpen(),
+  }));
+
+  const rankQuery = useQuery(() => ({
+    ...getRankQueryOptions(selection()),
+    enabled: isLoggedIn() && isOpen(),
+  }));
+
+  const serverConfigurationQuery = useQuery(() => ({
+    ...getServerConfigurationQueryOptions(),
+    enabled: isOpen(),
+  }));
+
+  const onSelectionChange = (newSelection: Selection): void => {
+    setSelection(newSelection);
+    setPage(0);
+  };
+
+  const userPage = (): number | undefined => {
+    const userRank = rankQuery.data?.friendsRank ?? rankQuery.data?.rank;
+    if (userRank === undefined) return undefined;
+    const page = Math.ceil(userRank / 50) - 1;
+    return page;
+  };
+
+  return (
+    <div class="content-grid grid">
+      <div class="flex flex-col gap-8 lg:flex-row">
+        <div class="w-full lg:w-60">
+          <AsyncContent query={serverConfigurationQuery}>
+            {(config) => (
+              <Sidebar
+                selection={selection}
+                onSelect={onSelectionChange}
+                validModeRules={config.dailyLeaderboards.validModeRules ?? []}
+              />
+            )}
+          </AsyncContent>
+        </div>
+
+        <div class="flex w-full flex-1 flex-col gap-4">
+          <Title
+            selection={selection()}
+            onPreviousSelect={() =>
+              setSelection((old) => ({
+                ...old,
+                previous: !old.previous,
+              }))
+            }
+          />
+
+          <Show when={isLoggedIn()}>
+            <AsyncContent query={rankQuery} alwaysShowContent>
+              {(data) => (
+                <UserRank
+                  type={selection().type === "weekly" ? "xp" : "wpm"}
+                  data={data}
+                  friendsOnly={selection().friendsOnly}
+                  total={dataQuery.data?.count}
+                  minWpm={
+                    dataQuery.data && "minWpm" in dataQuery.data
+                      ? (dataQuery.data.minWpm as number)
+                      : undefined
+                  }
+                  memoryDifference={getLbMemoryDifference(
+                    selection(),
+                    data?.rank,
+                  )}
+                  isLbOptOut={getSnapshot()?.lbOptOut ?? false}
+                  isBanned={getSnapshot()?.banned ?? false}
+                  minTimeTyping={
+                    serverConfigurationQuery.data?.leaderboards.minTimeTyping ??
+                    0
+                  }
+                  userTimeTyping={getSnapshot()?.typingStats.timeTyping ?? 0}
+                />
+              )}
+            </AsyncContent>
+          </Show>
+
+          <TableNavigation
+            type={selection().type}
+            lastPage={Math.ceil((dataQuery.data?.count ?? 0) / 50)}
+            currentPage={page()}
+            onPageChange={setPage}
+            userPage={userPage()}
+            onScrollToUser={setScrollToUser}
+            isLoading={
+              dataQuery.isLoading ||
+              dataQuery.isFetching ||
+              dataQuery.isRefetching
+            }
+          >
+            <AsyncContent query={dataQuery} alwaysShowContent>
+              {(data) => (
+                <Table
+                  type={selection().type === "weekly" ? "xp" : "wpm"}
+                  entries={data?.entries ?? []}
+                  friendsOnly={selection().friendsOnly}
+                  scrollToUser={scrollToUser}
+                  onScrolledToUser={() => setScrollToUser(false)}
+                />
+              )}
+            </AsyncContent>
+          </TableNavigation>
+        </div>
+      </div>
+    </div>
+  );
+
+  function syncLbMemory(): void {
+    if (
+      rankQuery.data !== undefined &&
+      rankQuery.data !== null &&
+      selection !== undefined &&
+      selection().type === "allTime"
+    ) {
+      const diff = getLbMemoryDifference(selection(), rankQuery.data.rank);
+
+      if (diff !== 0) {
+        void updateLbMemory(
+          "time",
+          selection().mode2 as string,
+          "english",
+          rankQuery.data.rank,
+          true,
+        );
+      }
+    }
+  }
+}
+
+function getLbMemoryDifference(
+  selection: Selection,
+  currentRank: number | undefined,
+): number | undefined {
+  if (
+    selection.type !== "allTime" ||
+    selection.mode !== "time" ||
+    selection.language !== "english" ||
+    selection.friendsOnly ||
+    currentRank === undefined
+  ) {
+    return undefined;
+  }
+  const oldRank =
+    getSnapshot()?.lbMemory?.time?.[selection.mode2]?.english ?? 0;
+  const diff = oldRank - currentRank;
+
+  return diff;
+}
+
+function lsSelection(): [Accessor<Selection>, Setter<Selection>] {
+  return useLocalStorage<Selection>({
+    key: "leaderboardSelector",
+    schema: SelectionSchema,
+    fallback: {
+      type: "allTime",
+      mode: "time",
+      mode2: "15",
+      language: "english",
+      friendsOnly: false,
+      previous: false,
+    },
+    migrate: (value) => {
+      if (value === null || typeof value !== "object") {
+        return {} as Selection;
+      }
+      const result = value as Selection;
+      if ("lastWeek" in result) {
+        delete result["lastWeek"];
+        result.previous = true;
+      } else if ("yesterday" in result) {
+        delete result["yesterday"];
+        result.previous = true;
+      }
+
+      if (result.type === "weekly") {
+        delete result.mode;
+        delete result.mode2;
+        delete result.language;
+      }
+      return result;
+    },
+  });
+}
+
+function updateGetParameters(selection: Selection, page: number): void {
+  const params: LeaderboardUrlParams = {
+    type: selection.type,
+    mode: selection.mode,
+    mode2: selection.mode2,
+    language: selection.language,
+    page: page + 1,
+  };
+
+  if (selection.type === "weekly" && selection.previous) {
+    params.lastWeek = true;
+  }
+  if (selection.type === "daily" && selection.previous) {
+    params.yesterday = true;
+  }
+  if (selection.friendsOnly) {
+    params.friendsOnly = true;
+  }
+  skeletonPage.setUrlParams(params);
+}
+
+export function readGetParameters(
+  params: LeaderboardUrlParams | undefined,
+): void {
+  if (params === undefined || params.type === undefined) return;
+
+  let newSelection: Partial<Selection> = {
+    type: params.type,
+    friendsOnly: params.friendsOnly ?? false,
+  };
+
+  if (params.type === "weekly") {
+    newSelection.previous = params.lastWeek ?? false;
+  } else {
+    newSelection.mode = params.mode ?? "time";
+    newSelection.mode2 = params.mode2 ?? "15";
+    newSelection.language = params.language ?? "english";
+    newSelection.previous =
+      (params.type === "daily" && params.yesterday) ?? false;
+  }
+
+  setSelection({ ...selection(), ...newSelection } as Selection);
+
+  if (params.page !== undefined) {
+    setPage(params.page - 1);
+  }
+}
+
+function prefetch(): void {
+  void queryClient.prefetchQuery(
+    getLeaderboardQueryOptions({
+      type: "allTime",
+      mode: "time",
+      mode2: "15",
+      language: "english",
+      friendsOnly: false,
+      page: 0,
+      previous: false,
+    }),
+  );
+}
+
+export const skeletonPage = new PageWithUrlParams({
+  id: "about",
+  element: qsr(".page.pageAbout"),
+  path: "/about",
+  urlParamsSchema: LeaderboardUrlParamsSchema,
+  loadingOptions: {
+    style: "spinner",
+    loadingMode: () => "sync",
+    loadingPromise: async () => {
+      await serverConfigurationPromise;
+    },
+  },
+
+  afterHide: async (): Promise<void> => {
+    Skeleton.remove("pageLeaderboards");
+  },
+  beforeShow: async (options): Promise<void> => {
+    Skeleton.append("pageLeaderboards", "main");
+    readGetParameters(options.urlParams);
+  },
+});
+
+/* TODO enable when moving to the correct page
+onDOMReady(async () => {
+  Skeleton.save("pageLeaderboards");
+});
+*/
diff --git a/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx b/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx
new file mode 100644
index 000000000000..73c121cd6782
--- /dev/null
+++ b/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx
@@ -0,0 +1,262 @@
+import { ValidModeRule } from "@monkeytype/schemas/configuration";
+import { Language } from "@monkeytype/schemas/languages";
+import { Mode } from "@monkeytype/schemas/shared";
+import { Accessor, For, JSXElement, Show } from "solid-js";
+
+import { Selection } from "../../../queries/leaderboards";
+import { isLoggedIn } from "../../../signals/core";
+import { FaSolidIcon } from "../../../types/font-awesome";
+import { Button } from "../../common/Button";
+
+type GroupItem<T> = { id: T; text: string; icon: FaSolidIcon };
+
+type LanguagesByModeByMode2 = Partial<Record<Mode, Record<string, Language[]>>>;
+
+type ValidLeaderboards = {
+  allTime: LanguagesByModeByMode2;
+  weekly: LanguagesByModeByMode2;
+  daily: LanguagesByModeByMode2;
+};
+
+export type ModeSelect = Pick<Selection, "mode" | "mode2">;
+
+export function Sidebar(props: {
+  selection: Accessor<Selection>;
+  onSelect: (selection: Selection) => void;
+  validModeRules: ValidModeRule[];
+}): JSXElement {
+  function updateSelection(patch: Partial<Selection>): void {
+    props.onSelect(
+      normalizeSelection(
+        //@ts-expect-error this is fine
+        { ...props.selection(), ...patch },
+        getValidLeaderboards(props.validModeRules),
+      ),
+    );
+  }
+
+  function selectType(type: Selection["type"]): void {
+    updateSelection({ type });
+  }
+
+  function selectMode(value: ModeSelect): void {
+    updateSelection({ mode: value.mode, mode2: value.mode2 });
+  }
+
+  function selectLanguage(language: Language): void {
+    updateSelection({ language });
+  }
+  function selectFriendsOnly(friendsOnly: boolean): void {
+    updateSelection({ friendsOnly });
+  }
+
+  return (
+    <>
+      <Group
+        selected={props.selection().type}
+        onSelect={selectType}
+        items={[
+          {
+            id: "allTime",
+            text: "all-time english",
+            icon: "fa-globe-americas",
+          },
+          { id: "weekly", text: "weekly xp", icon: "fa-calendar-day" },
+          { id: "daily", text: "daily", icon: "fa-sun" },
+        ]}
+      />
+      <Show when={isLoggedIn()}>
+        <Group
+          selected={props.selection().friendsOnly}
+          onSelect={selectFriendsOnly}
+          items={[
+            { id: false, text: "everyone", icon: "fa-users" },
+            { id: true, text: "friends only", icon: "fa-user-friends" },
+          ]}
+        />
+      </Show>
+
+      <Show when={props.selection().type !== "weekly"}>
+        <Group
+          selected={{
+            mode: props.selection().mode,
+            mode2: props.selection().mode2,
+          }}
+          onSelect={selectMode}
+          items={getModeButtons(
+            getValidLeaderboards(props.validModeRules)[props.selection().type],
+            props.selection().language as Language,
+          )}
+        />
+      </Show>
+      <Show when={props.selection().type === "daily"}>
+        <Group
+          selected={props.selection().language as Language}
+          onSelect={selectLanguage}
+          items={getLanguageButtons(
+            getValidLeaderboards(props.validModeRules).daily,
+            props.selection().mode as Mode,
+            props.selection().mode2 as string,
+          )}
+        />
+      </Show>
+    </>
+  );
+}
+
+function Group<T>(props: {
+  items: GroupItem<T>[];
+  selected: T;
+  onSelect: (selected: T) => void;
+}): JSXElement {
+  const isEqual = (a: unknown, b: unknown): boolean =>
+    typeof a === "object" ? JSON.stringify(a) === JSON.stringify(b) : a === b;
+
+  return (
+    <div class="mb-4 grid gap-4 rounded-xl bg-sub-alt p-4">
+      <For each={props.items}>
+        {(item) => (
+          <Button
+            onClick={() => props.onSelect(item.id)}
+            fa={{ icon: item.icon }}
+            text={item.text}
+            class="justify-start"
+            active={isEqual(item.id, props.selected)}
+          />
+        )}
+      </For>
+    </div>
+  );
+}
+
+function normalizeSelection(
+  draft: Selection,
+  valid: ValidLeaderboards,
+): Selection {
+  if (draft.type === "weekly") {
+    return {
+      ...draft,
+      mode: undefined,
+      mode2: undefined,
+      language: undefined,
+      previous: false,
+    };
+  }
+
+  let { mode, mode2, language } = draft;
+  const validModes = valid[draft.type];
+
+  if (valid === undefined) throw new Error("no valid leaderboards");
+
+  if (mode === null || validModes[mode] === undefined) {
+    const firstMode = Object.keys(validModes).sort()[0] as Mode | undefined;
+    if (!firstMode) {
+      throw new Error(`No valid mode for type ${draft.type}`);
+    }
+    mode = firstMode;
+  }
+
+  const validMode2 = validModes[mode] as Record<string, Language[]>;
+
+  if (mode2 === null || validMode2[mode2] === undefined) {
+    const firstMode2 = Object.keys(validMode2).sort(
+      (a, b) => parseInt(a) - parseInt(b),
+    )[0];
+    if (firstMode2 === undefined) {
+      throw new Error(`No valid mode2 for ${draft.type}:${mode}`);
+    }
+    mode2 = firstMode2;
+  }
+
+  const supportedLanguages = validMode2[mode2];
+  if (!supportedLanguages || supportedLanguages.length === 0) {
+    throw new Error(`Invalid leaderboard config for ${mode}:${mode2}`);
+  }
+
+  if (!language || !supportedLanguages.includes(language)) {
+    language = supportedLanguages.sort()[0] as Language;
+  }
+
+  return { ...draft, mode, mode2, language };
+}
+
+function getModeButtons(
+  valid: LanguagesByModeByMode2,
+  language?: Language,
+): GroupItem<ModeSelect>[] {
+  const modes = Object.entries(valid).flatMap(([mode, mode2List]) =>
+    Object.entries(mode2List)
+      .filter(
+        ([_, languages]) =>
+          language === undefined || languages.includes(language),
+      )
+      .flatMap(([mode2]) => ({
+        id: { mode, mode2 },
+        text: `${mode} ${mode2}`,
+        icon: mode === "time" ? "fa-clock" : "fa-align-left",
+      })),
+  );
+
+  return modes as GroupItem<ModeSelect>[];
+}
+
+function getLanguageButtons(
+  valid: LanguagesByModeByMode2,
+  mode: Mode,
+  mode2: string,
+): GroupItem<Language>[] {
+  if (mode === undefined) return [];
+
+  return (valid[mode]?.[mode2] ?? []).map((language) => ({
+    id: language,
+    text: language,
+    icon: "fa-globe",
+  }));
+}
+function getValidLeaderboards(
+  validModeRules: ValidModeRule[],
+): ValidLeaderboards {
+  //a rule can contain multiple values. create a flat list out of them
+  const dailyRules = validModeRules.flatMap((rule) => {
+    const languages = convertRuleOption(rule.language) as Language[];
+    const mode2List = convertRuleOption(rule.mode2);
+
+    return mode2List.map((mode2) => ({
+      mode: rule.mode as Mode,
+      mode2,
+      languages,
+    }));
+  });
+
+  return {
+    allTime: {
+      time: {
+        "15": ["english"],
+        "60": ["english"],
+      },
+    },
+    weekly: {},
+    daily: dailyRules.reduce<
+      Partial<Record<Mode, Record<string /*mode2*/, Language[]>>>
+    >((acc, { mode, mode2, languages }) => {
+      let modes = acc[mode];
+      if (modes === undefined) {
+        modes = {};
+        acc[mode] = modes;
+      }
+
+      let modes2 = modes[mode2];
+      if (modes2 === undefined) {
+        modes2 = [];
+        modes[mode2] = modes2;
+      }
+
+      modes2.push(...languages);
+      return acc;
+    }, {}),
+  };
+}
+
+function convertRuleOption(rule: string): string[] {
+  return rule.startsWith("(") ? rule.slice(1, -1).split("|") : [rule];
+}
diff --git a/frontend/src/ts/components/pages/leaderboard/Table.tsx b/frontend/src/ts/components/pages/leaderboard/Table.tsx
new file mode 100644
index 000000000000..d9e3289913a3
--- /dev/null
+++ b/frontend/src/ts/components/pages/leaderboard/Table.tsx
@@ -0,0 +1,431 @@
+import {
+  LeaderboardEntry,
+  XpLeaderboardEntry,
+} from "@monkeytype/schemas/leaderboards";
+import { createColumnHelper } from "@tanstack/solid-table";
+import { format as dateFormat } from "date-fns/format";
+import { formatDistanceToNow } from "date-fns/formatDistanceToNow";
+import { Accessor, createMemo, JSXElement } from "solid-js";
+
+import { createEffectOn } from "../../../hooks/effects";
+import { bp } from "../../../signals/breakpoints";
+import { getConfig } from "../../../signals/config";
+import { getUserId } from "../../../signals/core";
+import { secondsToString } from "../../../utils/date-and-time";
+import { qs } from "../../../utils/dom";
+import { Formatting } from "../../../utils/format";
+import { abbreviateNumber } from "../../../utils/numbers";
+import { Conditional } from "../../common/Conditional";
+import { Fa } from "../../common/Fa";
+import { DataTable, DataTableColumnDef } from "../../ui/table/DataTable";
+
+type WpmEntry = LeaderboardEntry;
+type XpEntry = XpLeaderboardEntry;
+export type TableEntry = WpmEntry | XpEntry;
+
+export function Table(
+  props: {
+    type: "wpm" | "xp";
+    entries: TableEntry[];
+    friendsOnly: boolean;
+    hideHeader?: true;
+  } & (
+    | {
+        scrollToUser: Accessor<boolean>;
+        onScrolledToUser: () => void;
+        userOverride?: never;
+      }
+    | {
+        scrollToUser?: never;
+        onScrolledToUser?: never;
+        userOverride: Accessor<JSXElement>;
+      }
+  ),
+): JSXElement {
+  const commonProps = createMemo(() => ({
+    id: "leaderboardTable",
+    hideHeader: props.hideHeader,
+    class: "table-auto [&>tbody>tr>td]:whitespace-nowrap",
+    rowSelection:
+      props.userOverride !== undefined
+        ? undefined
+        : {
+            getRowId: (row: { uid: string }) => row.uid,
+            activeRow: getUserId,
+            class: "text-main",
+          },
+  }));
+
+  const wpmColumns = createMemo(() =>
+    getWpmColumns({
+      friendsOnly: props.friendsOnly,
+      format: new Formatting(getConfig),
+      userOverride: props.userOverride,
+      addHeader: props.userOverride !== undefined && bp().xl,
+    }),
+  );
+  const xpColumns = createMemo(() =>
+    getXpColumns({
+      friendsOnly: props.friendsOnly,
+      userOverride: props.userOverride,
+      addHeader: props.userOverride !== undefined && bp().xl,
+    }),
+  );
+
+  createEffectOn(
+    () => props.scrollToUser?.(),
+    (enabled) => {
+      if (enabled) {
+        requestAnimationFrame(() => {
+          qs("#leaderboardTable tr[data-state='selected']")?.scrollIntoView({
+            block: "center",
+          });
+          props.onScrolledToUser?.();
+        });
+      }
+    },
+  );
+
+  return (
+    <Conditional
+      if={props.type === "wpm"}
+      then={
+        <DataTable
+          {...commonProps()}
+          columns={wpmColumns()}
+          data={props.entries as LeaderboardEntry[]}
+        />
+      }
+      else={
+        <DataTable
+          {...commonProps()}
+          columns={xpColumns()}
+          data={props.entries as XpLeaderboardEntry[]}
+        />
+      }
+    />
+  );
+}
+
+function getWpmColumns({
+  friendsOnly,
+  format,
+  userOverride,
+  addHeader,
+}: {
+  friendsOnly: boolean;
+  format: Formatting;
+  userOverride?: Accessor<JSXElement>;
+  addHeader?: boolean;
+}): DataTableColumnDef<WpmEntry>[] {
+  const defineColumn = createColumnHelper<WpmEntry>().accessor;
+  const columns = [
+    defineColumn("friendsRank", {
+      header: () => <Fa icon="fa-user-friends" />,
+      cell: (info) =>
+        info.getValue() === 1 ? <Fa icon="fa-crown" /> : info.getValue(),
+      meta: {
+        align: "center",
+        headerMeta: {
+          "aria-label": "Friends rank",
+          "data-balloon-pos": "down",
+        },
+      },
+    }),
+    defineColumn("rank", {
+      header: () => <Fa icon={friendsOnly ? "fa-users" : "fa-hashtag"} />,
+      cell: (info) =>
+        info.getValue() === 1 ? <Fa icon="fa-crown" /> : info.getValue(),
+      meta: {
+        align: "center",
+        headerMeta: {
+          "aria-label": "Global rank",
+          "data-balloon-pos": "down",
+        },
+      },
+    }),
+    defineColumn("uid", {
+      header: "name",
+      cell: (info) => userOverride?.() ?? <User user={info.row.original} />,
+      meta: {
+        cellMeta: () => ({ class: "w-full" }),
+      },
+    }),
+    defineColumn("wpm", {
+      header: format.typingSpeedUnit,
+      cell: (info) =>
+        wrapWithHeader(
+          format.typingSpeed(info.getValue(), { showDecimalPlaces: true }),
+          format.typingSpeedUnit,
+          addHeader,
+        ),
+      meta: {
+        align: "right",
+        breakpoint: "xl",
+      },
+    }),
+    defineColumn("acc", {
+      header: "accuracy",
+      cell: (info) =>
+        wrapWithHeader(
+          format.percentage(info.getValue(), { showDecimalPlaces: true }),
+          "accuracy",
+          addHeader,
+        ),
+      meta: {
+        align: "right",
+        breakpoint: "xl",
+      },
+    }),
+    defineColumn("wpm", {
+      id: "wpmAcc",
+      header: () => (
+        <>
+          <div>{format.typingSpeedUnit}</div>
+          <div class="opacity-50">accucacy</div>
+        </>
+      ),
+      cell: (info) => (
+        <>
+          <div>
+            {format.typingSpeed(info.row.original.wpm, {
+              showDecimalPlaces: true,
+            })}
+          </div>
+          <div class="text-sub">
+            {format.percentage(info.row.original.acc, {
+              showDecimalPlaces: true,
+            })}
+          </div>
+        </>
+      ),
+      meta: {
+        align: "right",
+        maxBreakpoint: "xl",
+      },
+    }),
+    defineColumn("raw", {
+      header: "raw",
+      cell: (info) =>
+        wrapWithHeader(
+          format.typingSpeed(info.getValue(), { showDecimalPlaces: true }),
+          "raw",
+          addHeader,
+        ),
+      meta: {
+        align: "right",
+        breakpoint: "xl",
+      },
+    }),
+    defineColumn("consistency", {
+      header: "consistency",
+      cell: (info) =>
+        wrapWithHeader(
+          format.percentage(info.getValue(), { showDecimalPlaces: true }),
+          "consistency",
+          addHeader,
+        ),
+      meta: {
+        align: "right",
+        breakpoint: "xl",
+      },
+    }),
+    defineColumn("raw", {
+      id: "rawCon",
+      header: () => (
+        <>
+          <div>raw</div>
+          <div class="opacity-50">consistency</div>
+        </>
+      ),
+      cell: (info) => (
+        <>
+          <div>
+            {format.typingSpeed(info.row.original.raw, {
+              showDecimalPlaces: true,
+            })}
+          </div>
+          <div class="text-sub">
+            {" "}
+            {format.percentage(info.row.original.consistency, {
+              showDecimalPlaces: true,
+            })}
+          </div>
+        </>
+      ),
+      meta: {
+        align: "right",
+        maxBreakpoint: "xl",
+      },
+    }),
+    defineColumn("timestamp", {
+      header: "date",
+      cell: (info) =>
+        info.getValue() !== undefined ? (
+          addHeader ? (
+            wrapWithHeader(
+              dateFormat(info.getValue(), "dd MMM yyyy HH:mm"),
+              "date",
+              true,
+            )
+          ) : (
+            <>
+              <div class="text-xs">
+                {dateFormat(info.getValue(), "dd MMM yyyy")}
+              </div>
+              <div class="text-xs text-sub">
+                {dateFormat(info.getValue(), "HH:mm")}
+              </div>
+            </>
+          )
+        ) : (
+          ""
+        ),
+      meta: {
+        align: "right",
+      },
+    }),
+  ];
+
+  if (!friendsOnly) {
+    columns.shift();
+  }
+
+  return columns.map((it) => ({ ...it, enableSorting: false }));
+}
+
+function getXpColumns({
+  friendsOnly,
+  userOverride,
+  addHeader,
+}: {
+  friendsOnly: boolean;
+  userOverride?: Accessor<JSXElement>;
+  addHeader?: boolean;
+}): DataTableColumnDef<XpEntry>[] {
+  const defineColumn = createColumnHelper<XpEntry>().accessor;
+  const columns = [
+    defineColumn("friendsRank", {
+      header: () => <Fa icon="fa-user-friends" />,
+      cell: (info) =>
+        info.getValue() === 1 ? <Fa icon="fa-crown" /> : info.getValue(),
+      meta: {
+        align: "center",
+        headerMeta: {
+          "aria-label": "Friends rank",
+          "data-balloon-pos": "down",
+        },
+      },
+    }),
+    defineColumn("rank", {
+      header: () => <Fa icon={friendsOnly ? "fa-users" : "fa-hashtag"} />,
+      cell: (info) =>
+        info.getValue() === 1 ? <Fa icon="fa-crown" /> : info.getValue(),
+      meta: {
+        align: "center",
+        headerMeta: {
+          "aria-label": "Global rank",
+          "data-balloon-pos": "down",
+        },
+      },
+    }),
+    defineColumn("uid", {
+      header: "name",
+      cell: (info) => userOverride?.() ?? <User user={info.row.original} />,
+      meta: {
+        cellMeta: () => ({ class: "w-full" }),
+      },
+    }),
+    defineColumn("totalXp", {
+      header: "xp gained",
+      cell: (info) =>
+        wrapWithHeader(
+          info.getValue() < 1000
+            ? info.getValue().toFixed(0)
+            : abbreviateNumber(info.getValue()),
+          "xp gained",
+          addHeader,
+        ),
+      meta: {
+        align: "right",
+      },
+    }),
+    defineColumn("timeTypedSeconds", {
+      header: "time typed",
+      cell: (info) =>
+        wrapWithHeader(
+          secondsToString(Math.round(info.getValue()), true, true, ":"),
+          "time typed",
+          addHeader,
+        ),
+      meta: {
+        align: "right",
+      },
+    }),
+
+    defineColumn("lastActivityTimestamp", {
+      header: "date",
+      cell: (info) =>
+        info.getValue() !== undefined ? (
+          addHeader ? (
+            wrapWithHeader(
+              dateFormat(info.getValue(), "dd MMM yyyy HH:mm"),
+              "last activity",
+              true,
+            )
+          ) : (
+            <>
+              <div class="text-xs">
+                {dateFormat(info.getValue(), "dd MMM yyyy")}
+              </div>
+              <div class="text-xs text-sub">
+                {dateFormat(info.getValue(), "HH:mm")}
+              </div>
+            </>
+          )
+        ) : (
+          ""
+        ),
+      meta: {
+        align: "right",
+        cellMeta: (info) =>
+          info.value !== undefined
+            ? {
+                "aria-label": formatDistanceToNow(info.value, {
+                  addSuffix: true,
+                }),
+                "data-balloon-pos": "left",
+              }
+            : {},
+      },
+    }),
+  ];
+
+  if (!friendsOnly) {
+    columns.shift();
+  }
+
+  return columns.map((it) => ({
+    ...it,
+    enableSorting: false,
+  }));
+}
+//placeholder
+function User(props: { user: { name: string } }): JSXElement {
+  return <div>{props.user.name}</div>;
+}
+
+function wrapWithHeader(
+  value: string,
+  header: string,
+  enabled?: boolean,
+): string | JSXElement {
+  return enabled ? (
+    <>
+      <div class="text-xs text-sub">{header}</div>
+      <div>{value}</div>
+    </>
+  ) : (
+    value
+  );
+}
diff --git a/frontend/src/ts/components/pages/leaderboard/TableNavigation.tsx b/frontend/src/ts/components/pages/leaderboard/TableNavigation.tsx
new file mode 100644
index 000000000000..4e1aa2a9b732
--- /dev/null
+++ b/frontend/src/ts/components/pages/leaderboard/TableNavigation.tsx
@@ -0,0 +1,148 @@
+import { UTCDateMini } from "@date-fns/utc/date/mini";
+import { endOfDay, endOfWeek } from "date-fns";
+import { differenceInSeconds } from "date-fns/differenceInSeconds";
+import {
+  JSXElement,
+  ParentProps,
+  Setter,
+  Show,
+  createEffect,
+  createMemo,
+  createSignal,
+  onCleanup,
+} from "solid-js";
+
+import { LeaderboardType } from "../../../queries/leaderboards";
+import { secondsToString } from "../../../utils/date-and-time";
+import { Button } from "../../common/Button";
+import { LoadingCircle } from "../../common/LoadingCircle";
+
+export function TableNavigation(
+  props: {
+    type: LeaderboardType;
+    lastPage: number;
+    userPage?: number;
+    currentPage: number;
+    onPageChange: Setter<number>;
+    onScrollToUser: Setter<boolean>;
+    isLoading?: boolean;
+  } & ParentProps,
+): JSXElement {
+  return (
+    <>
+      <div class="grid grid-cols-2 items-center justify-between text-base">
+        <div>
+          <NextUpdate type={props.type} />
+        </div>
+        <Navigation
+          isLoading={props.isLoading}
+          lastPage={props.lastPage}
+          userPage={props.userPage}
+          currentPage={props.currentPage}
+          onPageChange={props.onPageChange}
+          onScrollToUser={props.onScrollToUser}
+        />
+      </div>
+
+      {props.children}
+
+      <div class="grid grid-cols-1 items-center justify-between text-base">
+        <Navigation
+          lastPage={props.lastPage}
+          currentPage={props.currentPage}
+          onPageChange={props.onPageChange}
+          onScrollToUser={props.onScrollToUser}
+        />
+      </div>
+    </>
+  );
+}
+
+function Navigation(props: {
+  lastPage: number;
+  userPage?: number;
+  currentPage: number;
+  onPageChange: Setter<number>;
+  onScrollToUser: Setter<boolean>;
+  isLoading?: boolean;
+}): JSXElement {
+  return (
+    <div class="grid grid-flow-col items-center gap-2 justify-self-end">
+      <Show when={props.isLoading}>
+        <LoadingCircle />
+      </Show>
+      <Button
+        onClick={() => props.onPageChange(0)}
+        fa={{ icon: "fa-crown", fixedWidth: true }}
+        disabled={props.currentPage === 0}
+      />
+      <Show when={props.userPage !== undefined}>
+        <Button
+          onClick={() => {
+            props.onPageChange(props.userPage as number);
+            props.onScrollToUser(true);
+          }}
+          fa={{ icon: "fa-user", fixedWidth: true }}
+          disabled={
+            props.userPage === undefined || props.currentPage === props.userPage
+          }
+        />
+      </Show>
+      <Button
+        onClick={() =>
+          props.onPageChange((old) =>
+            Math.max(0, Math.min(old, props.lastPage) - 1),
+          )
+        }
+        fa={{ icon: "fa-chevron-left", fixedWidth: true }}
+        disabled={props.currentPage === 0}
+      />
+      <Button
+        //TODO
+        onClick={() => props.onPageChange(() => 7)}
+        fa={{ icon: "fa-hashtag", fixedWidth: true }}
+        disabled={true}
+      />
+      <Button
+        onClick={() => props.onPageChange((old) => old + 1)}
+        fa={{ icon: "fa-chevron-right", fixedWidth: true }}
+        disabled={props.currentPage + 1 >= props.lastPage}
+      />
+    </div>
+  );
+}
+
+function NextUpdate(props: { type: LeaderboardType }): JSXElement {
+  const [tick, setTick] = createSignal(Date.now());
+
+  // Update the tick every second
+  createEffect(() => {
+    const interval = setInterval(() => setTick(Date.now()), 1000);
+    onCleanup(() => clearInterval(interval));
+  });
+
+  const nextUpdate = createMemo(() => {
+    const now = new Date(tick());
+    if (props.type === "daily") {
+      const diff = differenceInSeconds(now, endOfDay(new UTCDateMini()));
+      return "Next reset in: " + secondsToString(diff, true);
+    } else if (props.type === "allTime") {
+      const minutesToNextUpdate = 14 - (now.getMinutes() % 15);
+      const secondsToNextUpdate = 60 - now.getSeconds();
+      const totalSeconds = minutesToNextUpdate * 60 + secondsToNextUpdate;
+      return "Next update in: " + secondsToString(totalSeconds, true);
+    } else if (props.type === "weekly") {
+      const nextWeekTimestamp = endOfWeek(new UTCDateMini(), {
+        weekStartsOn: 1,
+      });
+      const totalSeconds = differenceInSeconds(now, nextWeekTimestamp);
+      return (
+        "Next reset in: " +
+        secondsToString(totalSeconds, true, true, ":", true, true)
+      );
+    }
+    return "";
+  });
+
+  return <div class="text-sub">{nextUpdate()}</div>;
+}
diff --git a/frontend/src/ts/components/pages/leaderboard/Title.tsx b/frontend/src/ts/components/pages/leaderboard/Title.tsx
new file mode 100644
index 000000000000..6ec12d99151a
--- /dev/null
+++ b/frontend/src/ts/components/pages/leaderboard/Title.tsx
@@ -0,0 +1,110 @@
+import { UTCDateMini } from "@date-fns/utc/date/mini";
+import {
+  endOfDay,
+  endOfWeek,
+  startOfDay,
+  startOfWeek,
+  subDays,
+  subHours,
+  subMinutes,
+} from "date-fns";
+import { format as dateFormat } from "date-fns/format";
+import { createMemo, JSXElement, Show } from "solid-js";
+
+import { Selection } from "../../../queries/leaderboards";
+import { capitalizeFirstLetter } from "../../../utils/strings";
+import { Button } from "../../common/Button";
+import { H2 } from "../../common/Headers";
+
+export function Title(props: {
+  selection: Selection;
+  onPreviousSelect: () => void;
+}): JSXElement {
+  const title = createMemo(() => {
+    const type =
+      props.selection.type === "allTime"
+        ? "All-time"
+        : props.selection.type === "weekly"
+          ? "Weekly XP"
+          : "Daily";
+
+    const friend = props.selection.friendsOnly ? "Friends " : "";
+
+    const language = capitalizeFirstLetter(props.selection.language ?? "");
+
+    const mode =
+      props.selection.type !== "weekly"
+        ? ` ${capitalizeFirstLetter(props.selection.mode ?? "")} ${props.selection.mode2}`
+        : "";
+    return `${type} ${language} ${mode} ${friend}Leaderboard`;
+  });
+
+  const subTitle = createMemo(() => {
+    const utcDateFormat = "EEEE, do MMMM yyyy";
+    const localDateFormat = "EEEE, do MMMM yyyy HH:mm";
+    const toLocalString = (
+      timestamp: UTCDateMini,
+      endTimestamp: UTCDateMini,
+    ): string =>
+      `local time\n${dateFormat(utcToLocalDate(timestamp), localDateFormat)} -\n${dateFormat(utcToLocalDate(endTimestamp), localDateFormat)}`;
+
+    if (props.selection.type === "daily") {
+      let timestamp = startOfDay(new UTCDateMini());
+      if (props.selection.previous) {
+        timestamp = subHours(timestamp, 24);
+      }
+      const endTimestamp = endOfDay(timestamp);
+      return {
+        dateString: dateFormat(timestamp, utcDateFormat) + " UTC",
+        localString: toLocalString(timestamp, endTimestamp),
+        buttonText: props.selection.previous ? "show today" : "show yesterday",
+      };
+    } else if (props.selection.type === "weekly") {
+      let timestamp = startOfWeek(new UTCDateMini(), { weekStartsOn: 1 });
+      if (props.selection.previous) {
+        timestamp = subDays(timestamp, 7);
+      }
+      const endTimestamp = endOfWeek(timestamp, { weekStartsOn: 1 });
+
+      return {
+        dateString: `${dateFormat(timestamp, utcDateFormat)} - ${dateFormat(endTimestamp, utcDateFormat)} UTC`,
+        localString: toLocalString(timestamp, endTimestamp),
+        buttonText: props.selection.previous
+          ? "show this week"
+          : "show last week",
+      };
+    }
+    return null;
+  });
+
+  return (
+    <div>
+      <H2 text={title()} class="p-0" />
+      <Show when={subTitle() !== null}>
+        <div class="flex items-center gap-2">
+          <div
+            data-balloon-pos="down"
+            data-balloon-break
+            aria-label={subTitle()?.localString}
+          >
+            {subTitle()?.dateString}
+          </div>
+          <div class="h-[1.75em] w-[0.25em] rounded bg-sub-alt"></div>
+          <Button
+            text={subTitle()?.buttonText}
+            type="text"
+            onClick={props.onPreviousSelect}
+            fa={{
+              icon: props.selection.previous ? "fa-forward" : "fa-backward",
+              variant: "solid",
+            }}
+          />
+        </div>
+      </Show>
+    </div>
+  );
+}
+
+function utcToLocalDate(timestamp: UTCDateMini): Date {
+  return subMinutes(timestamp, new Date().getTimezoneOffset());
+}
diff --git a/frontend/src/ts/components/pages/leaderboard/UserRank.tsx b/frontend/src/ts/components/pages/leaderboard/UserRank.tsx
new file mode 100644
index 000000000000..6aeec2c986f1
--- /dev/null
+++ b/frontend/src/ts/components/pages/leaderboard/UserRank.tsx
@@ -0,0 +1,124 @@
+import {
+  LeaderboardEntry,
+  XpLeaderboardEntry,
+} from "@monkeytype/schemas/leaderboards";
+import { formatDuration, intervalToDuration } from "date-fns";
+import { createMemo, JSXElement, Match, Show, Switch } from "solid-js";
+
+import { getConfig } from "../../../signals/config";
+import { Formatting } from "../../../utils/format";
+import { Conditional } from "../../common/Conditional";
+import { Fa } from "../../common/Fa";
+import { LoadingCircle } from "../../common/LoadingCircle";
+
+import { Table, TableEntry } from "./Table";
+
+export function UserRank(props: {
+  type: "wpm" | "xp";
+  data?: LeaderboardEntry | XpLeaderboardEntry | null;
+  minWpm?: number;
+  friendsOnly: boolean;
+  total: number | undefined;
+  memoryDifference: number | undefined;
+  isLbOptOut: boolean;
+  isBanned: boolean;
+  minTimeTyping: number;
+  userTimeTyping: number;
+}): JSXElement {
+  const format = createMemo(() => new Formatting(getConfig));
+  const userOverride = (): JSXElement => {
+    if (
+      props.data === undefined ||
+      props.data === null ||
+      props.total === undefined
+    ) {
+      return "";
+    }
+    const rank = props.friendsOnly
+      ? (props.data.friendsRank as number)
+      : props.data.rank;
+    const percentile = (rank / props.total) * 100;
+
+    let percentileString = `Top ${percentile.toFixed(2)}%`;
+    if (rank === 1) {
+      percentileString = "GOAT";
+    }
+
+    return (
+      <>
+        <div>You ({percentileString})</div>
+        <div class="text-xs text-sub">
+          {" "}
+          <Show when={props.memoryDifference !== undefined}>
+            ({" "}
+            <Switch>
+              <Match when={props.memoryDifference === 0}>=</Match>
+              <Match when={(props.memoryDifference as number) > 0}>
+                <>
+                  <Fa icon="fa-angle-up" fixedWidth />
+                  {Math.abs(props.memoryDifference as number)}
+                </>
+              </Match>
+              <Match when={(props.memoryDifference as number) < 0}>
+                <>
+                  <Fa icon="fa-angle-down" fixedWidth />
+                  {Math.abs(props.memoryDifference as number)}
+                </>
+              </Match>
+            </Switch>{" "}
+            since you last checked)
+          </Show>
+        </div>
+      </>
+    );
+  };
+  return (
+    <div class="flex rounded bg-sub-alt">
+      <Show
+        when={props.data !== undefined}
+        fallback={<LoadingCircle class="w-full p-4 text-center" />}
+      >
+        <Conditional
+          if={props.data !== null}
+          then={
+            <Table
+              type={props.type}
+              entries={[props.data as TableEntry]}
+              friendsOnly={props.friendsOnly}
+              userOverride={userOverride}
+              hideHeader={true}
+            />
+          }
+          else={
+            <div class="w-full p-4 text-center">
+              <Switch fallback="not qualified">
+                <Match when={props.isLbOptOut}>
+                  You have opted out of the leaderboards.
+                </Match>
+                <Match when={props.isBanned}>Your account is banned.</Match>
+                <Match when={props.userTimeTyping < props.minTimeTyping}>
+                  Your account must have
+                  {formatDuration(
+                    intervalToDuration({
+                      start: 0,
+                      end: props.minTimeTyping * 1000,
+                    }),
+                  )}{" "}
+                  typed to be placed on the leaderboard.
+                </Match>
+                <Match when={props.minWpm}>
+                  Not qualified (min speed required:{" "}
+                  {format().typingSpeed(props.minWpm, {
+                    showDecimalPlaces: true,
+                    suffix: ` ${format().typingSpeedUnit}`,
+                  })}
+                  )
+                </Match>
+              </Switch>
+            </div>
+          }
+        />
+      </Show>
+    </div>
+  );
+}
diff --git a/frontend/src/ts/components/ui/table/DataTable.tsx b/frontend/src/ts/components/ui/table/DataTable.tsx
index 664ff05aad48..791aa5597f96 100644
--- a/frontend/src/ts/components/ui/table/DataTable.tsx
+++ b/frontend/src/ts/components/ui/table/DataTable.tsx
@@ -8,7 +8,17 @@ import {
   getSortedRowModel,
   SortingState,
 } from "@tanstack/solid-table";
-import { createMemo, For, JSXElement, Match, Show, Switch } from "solid-js";
+import {
+  Accessor,
+  createEffect,
+  createMemo,
+  createSignal,
+  For,
+  JSXElement,
+  Match,
+  Show,
+  Switch,
+} from "solid-js";
 import { z } from "zod";
 
 import { useLocalStorage } from "../../../hooks/useLocalStorage";
@@ -32,19 +42,28 @@ const SortingStateSchema = z.array(
   }),
 );
 
-export type AnyColumnDef<TData, TValue = unknown> =
+// oxlint-disable-next-line typescript/no-explicit-any
+export type DataTableColumnDef<TData, TValue = any> =
   | ColumnDef<TData, TValue>
   | AccessorFnColumnDef<TData, TValue>
   | AccessorKeyColumnDef<TData, TValue>;
 
-type DataTableProps<TData, TValue> = {
+export type DataTableProps<TData, TValue> = {
   id: string;
-  columns: AnyColumnDef<TData, TValue>[];
+  columns: DataTableColumnDef<TData, TValue>[];
   data: TData[];
   fallback?: JSXElement;
+  hideHeader?: true;
+  rowSelection?: {
+    getRowId: (row: TData) => string;
+    class: string;
+    activeRow: Accessor<string | null>;
+  };
+  class?: string;
 };
 
-export function DataTable<TData, TValue = unknown>(
+// oxlint-disable-next-line typescript/no-explicit-any
+export function DataTable<TData, TValue = any>(
   props: DataTableProps<TData, TValue>,
 ): JSXElement {
   const [sorting, setSorting] = useLocalStorage<SortingState>({
@@ -71,19 +90,33 @@ export function DataTable<TData, TValue = unknown>(
     const current = bp();
     const result = Object.fromEntries(
       props.columns.map((col, index) => {
-        const id =
+        col.id =
           col.id ??
           ("accessorKey" in col && col.accessorKey !== null
             ? String(col.accessorKey)
             : `__col_${index}`);
 
-        return [id, current[col.meta?.breakpoint ?? "xxs"]];
+        const visible =
+          current[col.meta?.breakpoint ?? "xxs"] &&
+          (col.meta?.maxBreakpoint === undefined ||
+            !current[col.meta?.maxBreakpoint]);
+
+        return [col.id, visible];
       }),
     );
 
     return result;
   });
 
+  const [rowSelection, setRowSelection] = createSignal({});
+  createEffect(() => {
+    if (!props.rowSelection || props.rowSelection.activeRow === undefined) {
+      setRowSelection({});
+    } else {
+      setRowSelection({ [`${props.rowSelection.activeRow()}`]: true });
+    }
+  });
+
   const table = createSolidTable<TData>({
     get data() {
       return props.data;
@@ -94,6 +127,13 @@ export function DataTable<TData, TValue = unknown>(
     getCoreRowModel: getCoreRowModel(),
     onSortingChange: setSorting,
     getSortedRowModel: getSortedRowModel(),
+    enableRowSelection: () => props.rowSelection !== undefined,
+    getRowId: (row, index) =>
+      props.rowSelection !== undefined
+        ? props.rowSelection.getRowId(row)
+        : index.toString(),
+    onRowSelectionChange: setRowSelection,
+
     state: {
       get sorting() {
         return sorting();
@@ -101,40 +141,101 @@ export function DataTable<TData, TValue = unknown>(
       get columnVisibility() {
         return columnVisibility();
       },
+      get rowSelection() {
+        return rowSelection();
+      },
     },
   });
 
   return (
     <Show when={table.getRowModel().rows?.length} fallback={props.fallback}>
-      <Table>
-        <TableHeader>
-          <For each={table.getHeaderGroups()}>
-            {(headerGroup) => (
-              <TableRow>
-                <For each={headerGroup.headers}>
-                  {(header) => (
-                    <Conditional
-                      if={header.column.getCanSort()}
-                      then={
-                        <TableHead
-                          colSpan={header.colSpan}
-                          aria-sort={
-                            header.column.getIsSorted() === "asc"
-                              ? "ascending"
-                              : header.column.getIsSorted() === "desc"
-                                ? "descending"
-                                : "none"
-                          }
-                        >
-                          <button
-                            type="button"
-                            role="button"
-                            onClick={(e) => {
-                              header.column.getToggleSortingHandler()?.(e);
+      <Table id={props.id} class={props.class}>
+        <Show when={!props.hideHeader}>
+          <TableHeader>
+            <For each={table.getHeaderGroups()}>
+              {(headerGroup) => (
+                <TableRow>
+                  <For each={headerGroup.headers}>
+                    {(header) => (
+                      <Conditional
+                        if={header.column.getCanSort()}
+                        then={
+                          <TableHead
+                            colSpan={header.colSpan}
+                            aria-sort={
+                              header.column.getIsSorted() === "asc"
+                                ? "ascending"
+                                : header.column.getIsSorted() === "desc"
+                                  ? "descending"
+                                  : "none"
+                            }
+                          >
+                            <button
+                              type="button"
+                              role="button"
+                              onClick={(e) => {
+                                header.column.getToggleSortingHandler()?.(e);
+                              }}
+                              class="m-0 box-border flex h-full w-full cursor-pointer items-start justify-start rounded-none border-0 bg-transparent p-2 font-normal whitespace-nowrap text-sub hover:bg-sub-alt"
+                              classList={{
+                                "text-left":
+                                  (header.column.columnDef.meta?.align ??
+                                    "left") === "left",
+                                "text-center":
+                                  header.column.columnDef.meta?.align ===
+                                  "center",
+                                "text-right":
+                                  header.column.columnDef.meta?.align ===
+                                  "right",
+                              }}
+                              {...(header.column.columnDef.meta?.headerMeta ??
+                                {})}
+                            >
+                              <Show when={!header.isPlaceholder}>
+                                {flexRender(
+                                  header.column.columnDef.header,
+                                  header.getContext(),
+                                )}
+                              </Show>
+
+                              <Switch fallback={<i class="fa-fw"></i>}>
+                                <Match
+                                  when={header.column.getIsSorted() === "asc"}
+                                >
+                                  <Fa
+                                    icon={"fa-sort-up"}
+                                    fixedWidth
+                                    aria-hidden="true"
+                                  />
+                                </Match>
+                                <Match
+                                  when={header.column.getIsSorted() === "desc"}
+                                >
+                                  <Fa
+                                    icon={"fa-sort-down"}
+                                    fixedWidth
+                                    aria-hidden="true"
+                                  />
+                                </Match>
+                              </Switch>
+                            </button>
+                          </TableHead>
+                        }
+                        else={
+                          <TableHead
+                            colSpan={header.colSpan}
+                            classList={{
+                              "text-left":
+                                (header.column.columnDef.meta?.align ??
+                                  "left") === "left",
+                              "text-center":
+                                header.column.columnDef.meta?.align ===
+                                "center",
+                              "text-right":
+                                header.column.columnDef.meta?.align === "right",
                             }}
-                            class="text-sub hover:bg-sub-alt m-0 box-border flex h-full w-full cursor-pointer items-start justify-start rounded-none border-0 bg-transparent p-2 text-left font-normal whitespace-nowrap"
-                            {...(header.column.columnDef.meta
-                              ?.sortableHeaderMeta ?? {})}
+                            {...(header.column.columnDef.meta?.headerMeta ??
+                              {})}
                           >
                             <Show when={!header.isPlaceholder}>
                               {flexRender(
@@ -142,51 +243,27 @@ export function DataTable<TData, TValue = unknown>(
                                 header.getContext(),
                               )}
                             </Show>
-
-                            <Switch fallback={<i class="fa-fw"></i>}>
-                              <Match
-                                when={header.column.getIsSorted() === "asc"}
-                              >
-                                <Fa
-                                  icon={"fa-sort-up"}
-                                  fixedWidth
-                                  aria-hidden="true"
-                                />
-                              </Match>
-                              <Match
-                                when={header.column.getIsSorted() === "desc"}
-                              >
-                                <Fa
-                                  icon={"fa-sort-down"}
-                                  fixedWidth
-                                  aria-hidden="true"
-                                />
-                              </Match>
-                            </Switch>
-                          </button>
-                        </TableHead>
-                      }
-                      else={
-                        <TableHead colSpan={header.colSpan}>
-                          <Show when={!header.isPlaceholder}>
-                            {flexRender(
-                              header.column.columnDef.header,
-                              header.getContext(),
-                            )}
-                          </Show>
-                        </TableHead>
-                      }
-                    />
-                  )}
-                </For>
-              </TableRow>
-            )}
-          </For>
-        </TableHeader>
+                          </TableHead>
+                        }
+                      />
+                    )}
+                  </For>
+                </TableRow>
+              )}
+            </For>
+          </TableHeader>
+        </Show>
         <TableBody>
           <For each={table.getRowModel().rows}>
             {(row) => (
-              <TableRow data-state={row.getIsSelected() && "selected"}>
+              <TableRow
+                data-state={row.getIsSelected() && "selected"}
+                class={
+                  row.getIsSelected() && props.rowSelection
+                    ? props.rowSelection.class
+                    : ""
+                }
+              >
                 <For each={row.getVisibleCells()}>
                   {(cell) => {
                     const cellMeta =
@@ -197,7 +274,18 @@ export function DataTable<TData, TValue = unknown>(
                           })
                         : (cell.column.columnDef.meta?.cellMeta ?? {});
                     return (
-                      <TableCell {...cellMeta}>
+                      <TableCell
+                        {...cellMeta}
+                        classList={{
+                          "text-left":
+                            (cell.column.columnDef.meta?.align ?? "left") ===
+                            "left",
+                          "text-center":
+                            cell.column.columnDef.meta?.align === "center",
+                          "text-right":
+                            cell.column.columnDef.meta?.align === "right",
+                        }}
+                      >
                         {flexRender(
                           cell.column.columnDef.cell,
                           cell.getContext(),
diff --git a/frontend/src/ts/components/ui/table/Table.tsx b/frontend/src/ts/components/ui/table/Table.tsx
index 1e1f5e762ae4..484cf9abc706 100644
--- a/frontend/src/ts/components/ui/table/Table.tsx
+++ b/frontend/src/ts/components/ui/table/Table.tsx
@@ -57,7 +57,7 @@ const TableHead: Component<ComponentProps<"th">> = (props) => {
     <th
       aria-label={local["aria-label"]}
       class={cn(
-        "text-sub has-button:p-0 appearance-none p-2 text-left align-bottom text-xs font-normal",
+        "text-sub has-button:p-0 appearance-none p-2 align-bottom text-xs font-normal",
         local.class,
       )}
       {...others}
diff --git a/frontend/src/ts/controllers/page-controller.ts b/frontend/src/ts/controllers/page-controller.ts
index 112179c62dd3..bdd38e23a14d 100644
--- a/frontend/src/ts/controllers/page-controller.ts
+++ b/frontend/src/ts/controllers/page-controller.ts
@@ -1,23 +1,25 @@
-import * as Misc from "../utils/misc";
-import * as Strings from "../utils/strings";
-import { getActivePage, setActivePage } from "../signals/core";
-import * as Settings from "../pages/settings";
+import * as AdController from "../controllers/ad-controller";
+import * as Page404 from "../pages/404";
 import * as Account from "../pages/account";
-import * as PageTest from "../pages/test";
-import * as PageLogin from "../pages/login";
+import * as PageAccountSettings from "../pages/account-settings";
+import * as Friends from "../pages/friends";
+import * as PageLeaderboards from "../pages/leaderboards";
 import * as PageLoading from "../pages/loading";
+import * as PageLogin from "../pages/login";
+import Page, { LoadingOptions, PageName } from "../pages/page";
 import * as PageProfile from "../pages/profile";
 import * as PageProfileSearch from "../pages/profile-search";
-import * as Friends from "../pages/friends";
-import * as Page404 from "../pages/404";
-import * as PageLeaderboards from "../pages/leaderboards";
-import * as PageAccountSettings from "../pages/account-settings";
+import * as Settings from "../pages/settings";
+import * as PageTest from "../pages/test";
+import { getActivePage, setActivePage } from "../signals/core";
 import * as PageTransition from "../states/page-transition";
-import * as AdController from "../controllers/ad-controller";
 import * as Focus from "../test/focus";
-import Page, { PageName, LoadingOptions } from "../pages/page";
 import { onDOMReady, qsa, qsr } from "../utils/dom";
+import * as Misc from "../utils/misc";
 import * as Skeleton from "../utils/skeleton";
+import * as Strings from "../utils/strings";
+
+import { skeletonPage } from "../components/pages/leaderboard/LeaderboardPage";
 
 type ChangeOptions = {
   force?: boolean;
@@ -30,7 +32,7 @@ const pages = {
   loading: PageLoading.page,
   test: PageTest.page,
   settings: Settings.page,
-  about: solidPage("about"),
+  about: skeletonPage,
   account: Account.page,
   login: PageLogin.page,
   profile: PageProfile.page,
@@ -295,7 +297,12 @@ export async function change(
   return true;
 }
 
-function solidPage(id: PageName, props?: { path?: string }): Page<undefined> {
+function _solidPage(
+  id: PageName,
+  props?: {
+    path?: string;
+  },
+): Page<undefined> {
   const path = props?.path ?? `/${id}`;
   const internalId = `page${Strings.capitalizeFirstLetter(id)}`;
   onDOMReady(() => Skeleton.save(internalId));
diff --git a/frontend/src/ts/firebase.ts b/frontend/src/ts/firebase.ts
index 85b562673397..c12620e4d5ab 100644
--- a/frontend/src/ts/firebase.ts
+++ b/frontend/src/ts/firebase.ts
@@ -35,6 +35,7 @@ import {
 import { tryCatch } from "@monkeytype/util/trycatch";
 import { dispatch as dispatchSignUpEvent } from "./observables/google-sign-up-event";
 import { addBanner } from "./stores/banners";
+import { setUserId } from "./signals/core";
 
 let app: FirebaseApp | undefined;
 let Auth: AuthType | undefined;
@@ -75,6 +76,7 @@ export async function init(callback: ReadyCallback): Promise<void> {
 
     onAuthStateChanged(Auth, async (user) => {
       if (!ignoreAuthCallback) {
+        setUserId(user?.uid ?? null);
         await callback(true, user);
       }
     });
@@ -82,6 +84,7 @@ export async function init(callback: ReadyCallback): Promise<void> {
     app = undefined;
     Auth = undefined;
     console.error("Firebase failed to initialize", e);
+    setUserId(null);
     await callback(false, null);
     if (isDevEnvironment()) {
       addBanner({
diff --git a/frontend/src/ts/pages/page.ts b/frontend/src/ts/pages/page.ts
index 44032b6cc3f6..49d6a314183a 100644
--- a/frontend/src/ts/pages/page.ts
+++ b/frontend/src/ts/pages/page.ts
@@ -115,7 +115,7 @@ type OptionsWithUrlParams<T, U extends UrlParamsSchema> = Options<T> & {
   urlParams?: z.infer<U>;
 };
 
-type UrlParamsSchema = z.ZodObject<Record<string, z.ZodTypeAny>>;
+export type UrlParamsSchema = z.ZodObject<Record<string, z.ZodTypeAny>>;
 type PagePropertiesWithUrlParams<T, U extends UrlParamsSchema> = Omit<
   PageProperties<T>,
   "beforeShow"
diff --git a/frontend/src/ts/queries/keys.ts b/frontend/src/ts/queries/keys.ts
new file mode 100644
index 000000000000..84cbbaf79e6f
--- /dev/null
+++ b/frontend/src/ts/queries/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/queries/leaderboards.ts b/frontend/src/ts/queries/leaderboards.ts
new file mode 100644
index 000000000000..140209d985f7
--- /dev/null
+++ b/frontend/src/ts/queries/leaderboards.ts
@@ -0,0 +1,208 @@
+import {
+  GetLeaderboardQuery,
+  GetLeaderboardRankQuery,
+} from "@monkeytype/contracts/leaderboards";
+import { LanguageSchema } from "@monkeytype/schemas/languages";
+import { ModeSchema } from "@monkeytype/schemas/shared";
+import { QueryKey, queryOptions } from "@tanstack/solid-query";
+import { z } from "zod";
+import Ape from "../ape";
+
+export type LeaderboardType = Selection["type"];
+const XpSelection = z.object({
+  type: z.literal("weekly"),
+  friendsOnly: z.boolean(),
+  previous: z.boolean(),
+  language: z.never().optional(),
+  mode: z.never().optional(),
+  mode2: z.never().optional(),
+});
+const WpmSelection = z.object({
+  type: z.enum(["daily", "allTime"]),
+  friendsOnly: z.boolean(),
+  previous: z.boolean(),
+  mode: ModeSchema,
+  mode2: z.string(),
+  language: LanguageSchema,
+});
+
+export const SelectionSchema = WpmSelection.or(XpSelection);
+export type Selection = z.infer<typeof SelectionSchema>;
+
+const queryKeys = {
+  root: (options: Selection & { userSpecific?: true }) => [
+    options.userSpecific === true || options.friendsOnly
+      ? "user"
+      : "leaderboard",
+    "leaderboard",
+    options.type,
+    {
+      mode: options.mode,
+      mode2: options.mode2,
+      language: options.language,
+      friendsOnly: options.friendsOnly,
+      previous: options.previous,
+    },
+  ],
+  data: (options: Selection & { page: number }) => [
+    ...queryKeys.root(options),
+    { page: options.page },
+  ],
+  rank: (options: Selection) =>
+    queryKeys.root({ ...options, userSpecific: true }), //rank is always user specific
+};
+
+export const getLeaderboardQueryOptions = (
+  options: Selection & {
+    page: number;
+  }, // oxlint-disable-next-line typescript/explicit-function-return-type
+) =>
+  queryOptions({
+    queryKey: queryKeys.data(options),
+    queryFn: async (ctx) => {
+      const page = ctx.queryKey[4] as { page: number } | undefined;
+      if (page === undefined) throw new Error("page missing in query");
+
+      const selection = getSelectionFromQueryKey(ctx.queryKey);
+
+      let request;
+
+      if (selection.type === "weekly") {
+        request = Ape.leaderboards.getWeeklyXp({
+          query: {
+            friendsOnly: selection.friendsOnly ? true : undefined,
+            weeksBefore: selection.previous ? 1 : undefined,
+            pageSize: 50,
+            page: page.page,
+          },
+        });
+      } else {
+        const baseQuery: GetLeaderboardQuery = {
+          mode: selection.mode,
+          mode2: selection.mode2,
+          language: selection.language,
+          friendsOnly: selection.friendsOnly ? true : undefined,
+          pageSize: 50,
+          page: page.page,
+        };
+        if (selection.type === "allTime") {
+          request = Ape.leaderboards.get({ query: baseQuery });
+        } else {
+          request = Ape.leaderboards.getDaily({
+            query: {
+              ...baseQuery,
+              daysBefore: selection.previous ? 1 : undefined,
+            },
+          });
+        }
+      }
+
+      const response = await request;
+      if (response.status !== 200) {
+        throw new Error(
+          `Failed to get ${selection.type} leaderboard rank: ` +
+            response.body.message,
+        );
+      }
+      return response.body.data;
+    },
+    //5 minutes for alltime, one minute for others
+    staleTime: options.type === "allTime" ? 1000 * 60 * 60 : 1000 * 60,
+    placeholderData: (old) => {
+      if (
+        old === undefined ||
+        old["entries"] === undefined ||
+        old["entries"].length === 0 ||
+        old["entries"][0] === undefined
+      ) {
+        return undefined;
+      }
+      const last = old["entries"][0];
+      if (
+        (options.type === "weekly" && !("totalXp" in last)) ||
+        (options.type !== "weekly" && !("wpm" in last))
+      ) {
+        return undefined;
+      }
+
+      return old;
+    },
+  });
+
+// oxlint-disable-next-line typescript/explicit-function-return-type
+export const getRankQueryOptions = (options: Selection) =>
+  queryOptions({
+    queryKey: queryKeys.rank(options),
+    queryFn: async (ctx) => {
+      let request;
+      const selection = getSelectionFromQueryKey(ctx.queryKey);
+      if (selection.type === "weekly") {
+        request = Ape.leaderboards.getWeeklyXpRank({
+          query: {
+            friendsOnly: selection.friendsOnly ? true : undefined,
+            weeksBefore: selection.previous ? 1 : undefined,
+          },
+        });
+      } else {
+        const baseQuery: GetLeaderboardRankQuery = {
+          mode: selection.mode,
+          mode2: selection.mode2,
+          language: selection.language,
+          friendsOnly: selection.friendsOnly ? true : undefined,
+        };
+        if (selection.type === "allTime") {
+          request = Ape.leaderboards.getRank({ query: baseQuery });
+        } else {
+          request = Ape.leaderboards.getDailyRank({
+            query: {
+              ...baseQuery,
+              daysBefore: selection.previous ? 1 : undefined,
+            },
+          });
+        }
+      }
+
+      const response = await request;
+      if (response.status !== 200) {
+        throw new Error(
+          `Failed to get ${selection.type} leaderboard rank: ` +
+            response.body.message,
+        );
+      }
+      return response.body.data;
+    },
+    //5 minutes for alltime, one minute for others
+    staleTime: options.type === "allTime" ? 1000 * 60 * 60 : 1000 * 60,
+  });
+
+function getSelectionFromQueryKey(queryKey: QueryKey): Selection {
+  if (queryKey.length < 3) throw new Error("invalid query key");
+
+  const type = queryKey[2] as LeaderboardType | undefined;
+  const mode = queryKey[3] as
+    | Required<Omit<Selection, "type"> & { previous: boolean }>
+    | undefined;
+
+  if (type === undefined) throw new Error("type missing in query");
+  if (mode === undefined) throw new Error("mode missing in query");
+
+  if (type === "weekly") {
+    return {
+      type: "weekly",
+      friendsOnly: mode.friendsOnly,
+      previous: mode.previous,
+    };
+  } else {
+    if (mode.language === undefined) {
+      throw new Error("language missing in query");
+    }
+    return {
+      type,
+      mode: mode.mode,
+      mode2: mode.mode2,
+      language: mode.language,
+      friendsOnly: mode.friendsOnly,
+      previous: mode.previous,
+    };
+  }
+}
diff --git a/frontend/src/ts/queries/server-configuration.ts b/frontend/src/ts/queries/server-configuration.ts
new file mode 100644
index 000000000000..c4cd1a9115b1
--- /dev/null
+++ b/frontend/src/ts/queries/server-configuration.ts
@@ -0,0 +1,27 @@
+import { queryOptions } from "@tanstack/solid-query";
+import { baseKey } from "./keys";
+import Ape from "../ape";
+
+const queryKeys = {
+  root: () => baseKey("serverConfiguration"),
+};
+
+const staleTime = 1000 * 60 * 60;
+
+// oxlint-disable-next-line typescript/explicit-function-return-type
+export const getServerConfigurationQueryOptions = () =>
+  queryOptions({
+    queryKey: queryKeys.root(),
+    queryFn: async () => {
+      const response = await Ape.configuration.get();
+
+      if (response.status !== 200) {
+        throw new Error(
+          `Could not fetch configuration: ${response.body.message}`,
+        );
+      }
+      return response.body.data;
+    },
+    staleTime,
+    gcTime: Infinity,
+  });
diff --git a/frontend/src/ts/signals/core.ts b/frontend/src/ts/signals/core.ts
index f3c6127b08e0..8614eda9e779 100644
--- a/frontend/src/ts/signals/core.ts
+++ b/frontend/src/ts/signals/core.ts
@@ -1,4 +1,4 @@
-import { createSignal } from "solid-js";
+import { createMemo, createSignal } from "solid-js";
 import { PageName } from "../pages/page";
 
 export const [getActivePage, setActivePage] = createSignal<PageName>("loading");
@@ -29,3 +29,8 @@ export const [getCommandlineSubgroup, setCommandlineSubgroup] = createSignal<
 export const [getFocus, setFocus] = createSignal(false);
 export const [getGlobalOffsetTop, setGlobalOffsetTop] = createSignal(0);
 export const [getIsScreenshotting, setIsScreenshotting] = createSignal(false);
+
+const [userId, setUserId] = createSignal<string | null>(null);
+export { setUserId };
+export const getUserId = createMemo(() => userId());
+export const isLoggedIn = createMemo(() => getUserId() !== null);
diff --git a/frontend/src/ts/types/tanstack-table.d.ts b/frontend/src/ts/types/tanstack-table.d.ts
index d69863e3b835..b0719fca4858 100644
--- a/frontend/src/ts/types/tanstack-table.d.ts
+++ b/frontend/src/ts/types/tanstack-table.d.ts
@@ -12,6 +12,17 @@ declare module "@tanstack/solid-table" {
      */
     breakpoint?: BreakpointKey;
 
+    /**
+     * define maximal breakpoint for the column to be visible.
+     * If not set, the column is always visible
+     */
+    maxBreakpoint?: BreakpointKey;
+
+    /**
+     * align header and cells, default: `left`
+     */
+    align?: "left" | "right" | "center";
+
     /**
      * additional attributes to be set on the table cell.
      * Can be used to define mouse-overs with `aria-label` and `data-balloon-pos`
@@ -24,9 +35,9 @@ declare module "@tanstack/solid-table" {
         }) => JSX.HTMLAttributes<HTMLTableCellElement>);
 
     /**
-     * additional attributes to be set on the header if it is sortable
+     * additional attributes to be set on the header
      * Can be used to define mouse-overs with `aria-label` and `data-balloon-pos`
      */
-    sortableHeaderMeta?: JSX.HTMLAttributes;
+    headerMeta?: JSX.HTMLAttributes;
   }
 }
diff --git a/frontend/src/ts/utils/format.ts b/frontend/src/ts/utils/format.ts
index c8ebab24b644..896f32c39bd8 100644
--- a/frontend/src/ts/utils/format.ts
+++ b/frontend/src/ts/utils/format.ts
@@ -1,6 +1,9 @@
 import { get as getTypingSpeedUnit } from "../utils/typing-speed-units";
 import * as Numbers from "@monkeytype/util/numbers";
-import { Config as ConfigType } from "@monkeytype/schemas/configs";
+import {
+  Config as ConfigType,
+  TypingSpeedUnit,
+} from "@monkeytype/schemas/configs";
 import Config from "../config";
 
 export type FormatOptions = {
@@ -21,8 +24,14 @@ export type FallbackOptions = {
 };
 
 export class Formatting {
-  constructor(private config: ConfigType) {
-    //
+  public typingSpeedUnit: TypingSpeedUnit;
+  private alwaysShowDecimalPlaces;
+
+  constructor(
+    config: Pick<ConfigType, "typingSpeedUnit" | "alwaysShowDecimalPlaces">,
+  ) {
+    this.typingSpeedUnit = config.typingSpeedUnit;
+    this.alwaysShowDecimalPlaces = config.alwaysShowDecimalPlaces;
   }
 
   typingSpeed(
@@ -32,7 +41,7 @@ export class Formatting {
     const options = { ...FORMAT_DEFAULT_OPTIONS, ...formatOptions };
     if (wpm === undefined || wpm === null) return options.fallback ?? "";
 
-    const result = getTypingSpeedUnit(this.config.typingSpeedUnit).fromWpm(wpm);
+    const result = getTypingSpeedUnit(this.typingSpeedUnit).fromWpm(wpm);
 
     return this.number(result, options);
   }
@@ -74,10 +83,7 @@ export class Formatting {
     }
     const suffix = formatOptions.suffix ?? "";
 
-    if (
-      formatOptions.showDecimalPlaces ??
-      this.config.alwaysShowDecimalPlaces
-    ) {
+    if (formatOptions.showDecimalPlaces ?? this.alwaysShowDecimalPlaces) {
       return Numbers.roundTo2(value).toFixed(2) + suffix;
     }
     return (formatOptions.rounding ?? Math.round)(value).toString() + suffix;