diff --git a/frontend/src/ts/collections/presets.ts b/frontend/src/ts/collections/presets.ts
index 379d24368fcc..334085f427ef 100644
--- a/frontend/src/ts/collections/presets.ts
+++ b/frontend/src/ts/collections/presets.ts
@@ -36,6 +36,7 @@ const presetsCollection = createCollection(
     getKey: (it) => it._id,
     queryFn: async () => {
       if (!isAuthenticated()) return [];
+
       const response = await Ape.presets.get();
 
       if (response.status !== 200) {
diff --git a/frontend/src/ts/components/common/Page.tsx b/frontend/src/ts/components/common/Page.tsx
new file mode 100644
index 000000000000..4148f1c7b82b
--- /dev/null
+++ b/frontend/src/ts/components/common/Page.tsx
@@ -0,0 +1,16 @@
+import { ParentProps, Show } from "solid-js";
+
+import { PageName } from "../../pages/page";
+import { getActivePage, isAuthenticated } from "../../states/core";
+
+export function Page(
+  props: {
+    id: PageName;
+    needsAuthentication?: boolean;
+  } & ParentProps,
+) {
+  const isOpen = () => getActivePage() === props.id;
+  const isAllowed = () => !props.needsAuthentication || isAuthenticated();
+
+  return <Show when={isOpen() && isAllowed()}>{props.children}</Show>;
+}
diff --git a/frontend/src/ts/components/mount.tsx b/frontend/src/ts/components/mount.tsx
index b0ce72d8e261..93c429d3a05e 100644
--- a/frontend/src/ts/components/mount.tsx
+++ b/frontend/src/ts/components/mount.tsx
@@ -18,14 +18,14 @@ import { LeaderboardPage } from "./pages/leaderboard/LeaderboardPage";
 import { LoginPage } from "./pages/login/LoginPage";
 import { ProfilePage } from "./pages/profile/ProfilePage";
 import { ProfileSearchPage } from "./pages/profile/ProfileSearchPage";
-import { Settings } from "./pages/settings/Settings";
+import { SettingsPage } from "./pages/settings/SettingsPage";
 import { TestConfig } from "./pages/test/TestConfig";
 import { Popups } from "./popups/Popups";
 
 const components: Record<string, () => JSXElement> = {
   footer: () => <Footer />,
   aboutpage: () => <AboutPage />,
-  settingspage: () => <Settings />,
+  settingspage: () => <SettingsPage />,
   accountpage: () => <AccountPage />,
   loginpage: () => <LoginPage />,
   leaderboardpage: () => <LeaderboardPage />,
@@ -40,7 +40,6 @@ const components: Record<string, () => JSXElement> = {
   devtools: () => <DevTools />,
   testconfig: () => <TestConfig />,
   commandlinehotkey: () => <CommandlineHotkey />,
-  solidSettings: () => <Settings />,
 };
 
 function mountToMountpoint(name: string, component: () => JSXElement): void {
diff --git a/frontend/src/ts/components/pages/AboutPage.tsx b/frontend/src/ts/components/pages/AboutPage.tsx
index 9b626218ad18..d80be6029b59 100644
--- a/frontend/src/ts/components/pages/AboutPage.tsx
+++ b/frontend/src/ts/components/pages/AboutPage.tsx
@@ -16,6 +16,7 @@ import AsyncContent from "../common/AsyncContent";
 import { Button } from "../common/Button";
 import { ChartJs } from "../common/ChartJs";
 import { H2, H3 } from "../common/Headers";
+import { Page } from "../common/Page";
 import { CommandlineHotkey } from "../hotkeys/CommandlineHotkey";
 import { QuickRestartHotkey } from "../hotkeys/QuickRestartHotkey";
 
@@ -51,365 +52,375 @@ export function AboutPage(): JSXElement {
   };
 
   return (
-    <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
-          queries={{ typingStats }}
-          errorMessage="Failed to get global typing stats"
-        >
-          {({ typingStatsData }) => (
-            <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
-              <For
-                each={
-                  [
-                    [
-                      "total tests started",
-                      () => typingStatsData()?.testsStarted,
-                    ],
-                    ["total typing time", () => typingStatsData()?.timeTyping],
+    <Page id="about">
+      <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
+            queries={{ typingStats }}
+            errorMessage="Failed to get global typing stats"
+          >
+            {({ typingStatsData }) => (
+              <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+                <For
+                  each={
                     [
-                      "total tests completed",
-                      () => typingStatsData()?.testsCompleted,
-                    ],
-                  ] as const
-                }
-              >
-                {([title, stat]) => (
-                  <div class="text-center">
-                    <div class="text-sub">{title}</div>
-                    <div class="text-5xl">{stat()?.text ?? "-"}</div>
-                    <div class="text-xl">{stat()?.subText ?? "-"}</div>
-                  </div>
-                )}
-              </For>
-            </div>
-          )}
-        </AsyncContent>
-      </section>
-      <section class="h-48 w-full">
-        <AsyncContent
-          alwaysShowContent
-          queries={{ speedHistogram }}
-          errorMessage="Failed to get global speed stats for histogram"
-        >
-          {({ speedHistogramData }) => (
-            <>
-              <ChartJs
-                name="SpeedHistogram"
-                type="bar"
-                data={{
-                  labels: speedHistogramData()?.labels ?? [],
-                  datasets: [
-                    {
-                      yAxisID: "count",
-                      label: "Users",
-                      data: speedHistogramData()?.data ?? [],
-                      minBarLength: 2,
-                      backgroundColor: getTheme().main,
-                      borderColor: getTheme().main,
-                    },
-                  ],
-                }}
-                options={{
-                  responsive: true,
-                  maintainAspectRatio: false,
-                  hover: {
-                    mode: "nearest",
-                    intersect: false,
-                  },
-                  scales: {
-                    x: {
-                      axis: "x",
-                      bounds: "ticks",
-                      display: true,
-                      title: {
-                        display: false,
-                        text: "Bucket",
+                      [
+                        "total tests started",
+                        () => typingStatsData()?.testsStarted,
+                      ],
+                      [
+                        "total typing time",
+                        () => typingStatsData()?.timeTyping,
+                      ],
+                      [
+                        "total tests completed",
+                        () => typingStatsData()?.testsCompleted,
+                      ],
+                    ] as const
+                  }
+                >
+                  {([title, stat]) => (
+                    <div class="text-center">
+                      <div class="text-sub">{title}</div>
+                      <div class="text-5xl">{stat()?.text ?? "-"}</div>
+                      <div class="text-xl">{stat()?.subText ?? "-"}</div>
+                    </div>
+                  )}
+                </For>
+              </div>
+            )}
+          </AsyncContent>
+        </section>
+        <section class="h-48 w-full">
+          <AsyncContent
+            alwaysShowContent
+            queries={{ speedHistogram }}
+            errorMessage="Failed to get global speed stats for histogram"
+          >
+            {({ speedHistogramData }) => (
+              <>
+                <ChartJs
+                  name="SpeedHistogram"
+                  type="bar"
+                  data={{
+                    labels: speedHistogramData()?.labels ?? [],
+                    datasets: [
+                      {
+                        yAxisID: "count",
+                        label: "Users",
+                        data: speedHistogramData()?.data ?? [],
+                        minBarLength: 2,
+                        backgroundColor: getTheme().main,
+                        borderColor: getTheme().main,
                       },
-                      offset: true,
+                    ],
+                  }}
+                  options={{
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    hover: {
+                      mode: "nearest",
+                      intersect: false,
                     },
-                    count: {
-                      axis: "y",
-                      beginAtZero: true,
-                      min: 0,
-                      ticks: {
-                        autoSkip: true,
-                        autoSkipPadding: 20,
-                        stepSize: 10,
+                    scales: {
+                      x: {
+                        axis: "x",
+                        bounds: "ticks",
+                        display: true,
+                        title: {
+                          display: false,
+                          text: "Bucket",
+                        },
+                        offset: true,
                       },
-                      display: true,
-                      title: {
+                      count: {
+                        axis: "y",
+                        beginAtZero: true,
+                        min: 0,
+                        ticks: {
+                          autoSkip: true,
+                          autoSkipPadding: 20,
+                          stepSize: 10,
+                        },
                         display: true,
-                        text: "Users",
+                        title: {
+                          display: true,
+                          text: "Users",
+                        },
                       },
                     },
-                  },
-                  plugins: {
-                    annotation: {
-                      annotations: [],
-                    },
-                    tooltip: {
-                      animation: { duration: 250 },
-                      intersect: false,
-                      mode: "index",
-                      callbacks: {
-                        afterLabel: (context) => {
-                          return (
-                            (context.raw as { topPercentage?: string })
-                              .topPercentage ?? ""
-                          );
+                    plugins: {
+                      annotation: {
+                        annotations: [],
+                      },
+                      tooltip: {
+                        animation: { duration: 250 },
+                        intersect: false,
+                        mode: "index",
+                        callbacks: {
+                          afterLabel: (context) => {
+                            return (
+                              (context.raw as { topPercentage?: string })
+                                .topPercentage ?? ""
+                            );
+                          },
                         },
                       },
                     },
-                  },
-                }}
-              />
-              <div class="text-right text-xs text-sub">
-                distribution of time 60 leaderboard results (wpm) <br />
-                {numberOfHistogramRecords(speedHistogramData()?.data)} total
-                results
-              </div>
-            </>
-          )}
-        </AsyncContent>
-      </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 <QuickRestartHotkey /> to restart the typing test. Open
-          the command line by pressing <CommandlineHotkey /> - 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>
+                  }}
+                />
+                <div class="text-right text-xs text-sub">
+                  distribution of time 60 leaderboard results (wpm) <br />
+                  {numberOfHistogramRecords(speedHistogramData()?.data)} total
+                  results
+                </div>
+              </>
+            )}
+          </AsyncContent>
+        </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 <QuickRestartHotkey /> to restart the typing test. Open
+            the command line by pressing <CommandlineHotkey /> - 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>
-      <Advertisement id="ad-about-1" visible="sellout" />
-      <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
-            variant="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
-            variant="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
-            variant="text"
-            text="Supporters"
-            href="#supporters_title"
-            class="p-0 pt-2 pr-2 pb-2"
+            <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>
+        <Advertisement id="ad-about-1" visible="sellout" />
+        <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
+              variant="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
+              variant="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
+              variant="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
+              variant="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>
+        <Advertisement id="ad-about-2" visible="sellout" />
+        <div></div>
+        <section>
+          <H2
+            id="supporters_title"
+            fa={{ icon: "fa-hand-holding-usd" }}
+            text="top supporters"
           />
-          who helped financially by donating, enabling optional ads or buying
-          merch
-        </p>
-        <p>
-          <Button
-            variant="text"
-            text="Contributors"
-            href="https://github.com/monkeytypegame/monkeytype/graphs/contributors"
-            class="p-0 pt-2 pr-2 pb-2"
+          <AsyncContent
+            queries={{ supporters }}
+            errorMessage="Failed to get supporters"
+          >
+            {({ supportersData }) => (
+              <div
+                class="grid"
+                style={{
+                  "grid-template-columns":
+                    "repeat(auto-fill, minmax(13em, 1fr))",
+                }}
+              >
+                <For each={supportersData()}>{(name) => <div>{name}</div>}</For>
+              </div>
+            )}
+          </AsyncContent>
+        </section>
+        <div></div>
+        <section>
+          <H2
+            id="contributors_title"
+            fa={{ icon: "fa-code-branch" }}
+            text="contributors"
           />
-          on GitHub that have helped with implementing various features, adding
-          themes and more
-        </p>
-      </section>
-      <Advertisement id="ad-about-2" visible="sellout" />
-      <div></div>
-      <section>
-        <H2
-          id="supporters_title"
-          fa={{ icon: "fa-hand-holding-usd" }}
-          text="top supporters"
-        />
-        <AsyncContent
-          queries={{ supporters }}
-          errorMessage="Failed to get supporters"
-        >
-          {({ supportersData }) => (
-            <div
-              class="grid"
-              style={{
-                "grid-template-columns": "repeat(auto-fill, minmax(13em, 1fr))",
-              }}
-            >
-              <For each={supportersData()}>{(name) => <div>{name}</div>}</For>
-            </div>
-          )}
-        </AsyncContent>
-      </section>
-      <div></div>
-      <section>
-        <H2
-          id="contributors_title"
-          fa={{ icon: "fa-code-branch" }}
-          text="contributors"
-        />
-        <AsyncContent
-          queries={{ contributors }}
-          errorMessage="Failed to get contributors"
-        >
-          {({ contributorsData }) => (
-            <div
-              class="grid"
-              style={{
-                "grid-template-columns": "repeat(auto-fill, minmax(13em, 1fr))",
-              }}
-            >
-              <For each={contributorsData()}>{(name) => <div>{name}</div>}</For>
-            </div>
-          )}
-        </AsyncContent>
-      </section>
-    </div>
+          <AsyncContent
+            queries={{ contributors }}
+            errorMessage="Failed to get contributors"
+          >
+            {({ contributorsData }) => (
+              <div
+                class="grid"
+                style={{
+                  "grid-template-columns":
+                    "repeat(auto-fill, minmax(13em, 1fr))",
+                }}
+              >
+                <For each={contributorsData()}>
+                  {(name) => <div>{name}</div>}
+                </For>
+              </div>
+            )}
+          </AsyncContent>
+        </section>
+      </div>
+    </Page>
   );
 }
diff --git a/frontend/src/ts/components/pages/account/AccountPage.tsx b/frontend/src/ts/components/pages/account/AccountPage.tsx
index a65511872362..fb8c61e33e98 100644
--- a/frontend/src/ts/components/pages/account/AccountPage.tsx
+++ b/frontend/src/ts/components/pages/account/AccountPage.tsx
@@ -16,6 +16,7 @@ import { downloadResultsCSV } from "../../../utils/misc";
 import { Advertisement } from "../../common/Advertisement";
 import AsyncContent from "../../common/AsyncContent";
 import { Button } from "../../common/Button";
+import { Page } from "../../common/Page";
 import { Charts } from "./Charts";
 import { Filters } from "./Filters";
 import { MyProfile } from "./MyProfile";
@@ -24,7 +25,6 @@ import { TestStats } from "./TestStats";
 import { VerifyNotice } from "./VerifyNotice";
 
 export function AccountPage(): JSXElement {
-  const isOpen = (): boolean => getActivePage() === "account";
   const [limit, setLimit] = createSignal(10);
 
   const [sorting, setSorting] = createSignal<{
@@ -36,7 +36,7 @@ export function AccountPage(): JSXElement {
   });
 
   const queryState = createMemo(() => {
-    if (!isOpen() || !isAuthenticated()) return undefined;
+    if (getActivePage() !== "account" || !isAuthenticated()) return undefined;
 
     return createResultsQueryState(filters);
   });
@@ -49,7 +49,7 @@ export function AccountPage(): JSXElement {
   const resultsQuery = useResultsLiveQuery({ queryState, sorting, limit });
 
   return (
-    <Show when={isAuthenticated() && isOpen()}>
+    <Page id="account" needsAuthentication>
       <div class="flex flex-col gap-8">
         <VerifyNotice />
         <MyProfile />
@@ -135,6 +135,6 @@ export function AccountPage(): JSXElement {
           </>
         </Show>
       </div>
-    </Show>
+    </Page>
   );
 }
diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
index ffb05ddda3ec..e3a6157bb64a 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
@@ -25,6 +25,7 @@ import {
 import { cn } from "../../../utils/cn";
 import AsyncContent from "../../common/AsyncContent";
 import { LoadingCircle } from "../../common/LoadingCircle";
+import { Page } from "../../common/Page";
 import { Separator } from "../../common/Separator";
 import { Navigation } from "./Navigation";
 import { NextUpdate } from "./NextUpdate";
@@ -167,7 +168,7 @@ export function LeaderboardPage(): JSXElement {
   };
 
   return (
-    <Show when={isOpen()}>
+    <Page id="leaderboards">
       <div class="content-grid flex flex-col gap-8 lg:flex-row">
         <div class="w-full shrink-0 lg:w-60 2xl:w-75">
           <AsyncContent queries={{ serverConfigurationQuery }}>
@@ -301,6 +302,6 @@ export function LeaderboardPage(): JSXElement {
           </AsyncContent>
         </div>
       </div>
-    </Show>
+    </Page>
   );
 }
diff --git a/frontend/src/ts/components/pages/login/LoginPage.tsx b/frontend/src/ts/components/pages/login/LoginPage.tsx
index 6e3c5f248bf9..f813f48c38c1 100644
--- a/frontend/src/ts/components/pages/login/LoginPage.tsx
+++ b/frontend/src/ts/components/pages/login/LoginPage.tsx
@@ -2,20 +2,18 @@ import { useQuery } from "@tanstack/solid-query";
 import { JSXElement, Show } from "solid-js";
 
 import { getServerConfigurationQueryOptions } from "../../../queries/server-configuration";
-import { getActivePage } from "../../../states/core";
 import { getLoginPageInputsEnabled } from "../../../states/login";
+import { Page } from "../../common/Page";
 import { Login } from "./Login";
 import { Register } from "./Register";
 
 export function LoginPage(): JSXElement {
-  const isOpen = () => getActivePage() === "login";
-
   const serverConfig = useQuery(() => getServerConfigurationQueryOptions());
   const isSignUpDisabled = (): boolean =>
     !(serverConfig.data?.users.signUp ?? true);
 
   return (
-    <Show when={isOpen()}>
+    <Page id="login">
       <Show when={!getLoginPageInputsEnabled()}>
         <div class="fixed top-1/2 left-1/2 z-1 -translate-x-1/2 -translate-y-1/2 text-3xl text-main transition-opacity duration-250">
           <i class="fas fa-fw fa-spin fa-circle-notch"></i>
@@ -36,6 +34,6 @@ export function LoginPage(): JSXElement {
           </p>
         </div>
       </Show>
-    </Show>
+    </Page>
   );
 }
diff --git a/frontend/src/ts/components/pages/profile/ProfilePage.tsx b/frontend/src/ts/components/pages/profile/ProfilePage.tsx
index a7197213f095..48146a33de5f 100644
--- a/frontend/src/ts/components/pages/profile/ProfilePage.tsx
+++ b/frontend/src/ts/components/pages/profile/ProfilePage.tsx
@@ -6,6 +6,7 @@ import { getUserProfile } from "../../../queries/profile";
 import { getActivePage, getSelectedProfileName } from "../../../states/core";
 import AsyncContent from "../../common/AsyncContent";
 import { Fa } from "../../common/Fa";
+import { Page } from "../../common/Page";
 import { UserProfile } from "./UserProfile";
 
 const pageName: PageName = "profile";
@@ -18,7 +19,7 @@ export function ProfilePage(): JSXElement {
   }));
 
   return (
-    <Show when={isOpen}>
+    <Page id="profile">
       <div class="flex h-full items-center justify-center text-lg">
         <AsyncContent queries={{ profileQuery }} ignoreError={true}>
           {({ profileQueryData }) => (
@@ -32,6 +33,6 @@ export function ProfilePage(): JSXElement {
           </div>
         </Show>
       </div>
-    </Show>
+    </Page>
   );
 }
diff --git a/frontend/src/ts/components/pages/profile/ProfileSearchPage.tsx b/frontend/src/ts/components/pages/profile/ProfileSearchPage.tsx
index 7fe44eae60d7..333ab8188a2c 100644
--- a/frontend/src/ts/components/pages/profile/ProfileSearchPage.tsx
+++ b/frontend/src/ts/components/pages/profile/ProfileSearchPage.tsx
@@ -1,6 +1,6 @@
 import { UserNameWithoutFilterSchema } from "@monkeytype/schemas/users";
 import { createForm } from "@tanstack/solid-form";
-import { createEffect, createSignal, JSXElement, Show } from "solid-js";
+import { createEffect, createSignal, JSXElement } from "solid-js";
 
 import { navigationEvent } from "../../../events/navigation";
 import { useRefWithUtils } from "../../../hooks/useRefWithUtils";
@@ -9,6 +9,7 @@ import { getUserProfile } from "../../../queries/profile";
 import { getActivePage } from "../../../states/core";
 import { showNoticeNotification } from "../../../states/notifications";
 import { H2 } from "../../common/Headers";
+import { Page } from "../../common/Page";
 import { InputField } from "../../ui/form/InputField";
 import { SubmitButton } from "../../ui/form/SubmitButton";
 import { fromSchema } from "../../ui/form/utils";
@@ -51,7 +52,7 @@ export function ProfileSearchPage(): JSXElement {
   });
 
   return (
-    <Show when={isOpen()}>
+    <Page id="profileSearch">
       <div class="grid min-h-full place-items-center">
         <form
           class="inline-grid w-96 gap-2"
@@ -104,6 +105,6 @@ export function ProfileSearchPage(): JSXElement {
           </div>
         </form>
       </div>
-    </Show>
+    </Page>
   );
 }
diff --git a/frontend/src/ts/components/pages/settings/Settings.tsx b/frontend/src/ts/components/pages/settings/SettingsPage.tsx
similarity index 97%
rename from frontend/src/ts/components/pages/settings/Settings.tsx
rename to frontend/src/ts/components/pages/settings/SettingsPage.tsx
index 99b4f006ea9f..fe7b77e8c3f2 100644
--- a/frontend/src/ts/components/pages/settings/Settings.tsx
+++ b/frontend/src/ts/components/pages/settings/SettingsPage.tsx
@@ -14,18 +14,17 @@ import {
 } from "../../../controllers/sound-controller";
 import { useLocalStorage } from "../../../hooks/useLocalStorage";
 import { useSavedIndicator } from "../../../hooks/useSavedIndicator";
-import { getActivePage, isAuthenticated } from "../../../states/core";
+import { isAuthenticated } from "../../../states/core";
 import { showModal } from "../../../states/modals";
 import { showSimpleModal } from "../../../states/simple-modal";
-// import { hotkeys } from "../../../states/hotkeys";
 import { cn } from "../../../utils/cn";
 import fileStorage from "../../../utils/file-storage";
 import { wordsToCamelCase } from "../../../utils/strings";
-// import { isFirefox } from "../../../utils/misc";
 import { getOptions } from "../../../utils/zod";
 import { Anime, AnimeShow } from "../../common/anime";
 import { Button } from "../../common/Button";
 import { Fa } from "../../common/Fa";
+import { Page } from "../../common/Page";
 import { CommandlineHotkey } from "../../hotkeys/CommandlineHotkey";
 import { InputField } from "../../ui/form/InputField";
 import { fromSchema } from "../../ui/form/utils";
@@ -33,7 +32,6 @@ import { AnimationFpsLimit } from "./custom-setting/AnimationFpsLimit";
 import { AutoSwitchTheme } from "./custom-setting/AutoSwitchTheme";
 import { CustomBackground } from "./custom-setting/CustomBackground";
 import { CustomBackgroundFilters } from "./custom-setting/CustomBackgroundFilters";
-// import { Kbd } from "../../common/Kbd";
 import { CustomLayoutfluid } from "./custom-setting/CustomLayoutfluid";
 import { CustomPolyglot } from "./custom-setting/CustomPolyglot";
 import { FontFamily } from "./custom-setting/FontFamily";
@@ -55,15 +53,14 @@ import { Theme } from "./custom-setting/Theme";
 import { QuickNav } from "./QuickNav";
 import { Setting } from "./Setting";
 
-export function Settings(): JSXElement {
+export function SettingsPage(): JSXElement {
   const [hasLocalBg] = createResource(
     () => fileStorage.track("LocalBackgroundFile"),
     async () => fileStorage.hasFile("LocalBackgroundFile"),
   );
-  const isOpen = (): boolean => getActivePage() === "settings";
 
   return (
-    <Show when={isOpen()}>
+    <Page id="settings">
       <div class="grid gap-8">
         <QuickNav />
         <Show when={getConfig.showKeyTips}>
@@ -253,7 +250,7 @@ export function Settings(): JSXElement {
 
         <AccountSettingsNotice />
       </div>
-    </Show>
+    </Page>
   );
 }