diff --git a/backend/.oxlintrc.json b/backend/.oxlintrc.json
index a5e663c35482..10e1703b16a0 100644
--- a/backend/.oxlintrc.json
+++ b/backend/.oxlintrc.json
@@ -3,5 +3,13 @@
   "extends": [
     "../packages/oxlint-config/index.jsonc"
     // "@monkeytype/oxlint-config"
+  ],
+  "overrides": [
+    {
+      "files": ["src/**/*.ts"],
+      "rules": {
+        "import/no-cycle": "off" //todo: fix cycles and turn this on
+      }
+    }
   ]
 }
diff --git a/frontend/__tests__/components/AnimatedModal.spec.tsx b/frontend/__tests__/components/AnimatedModal.spec.tsx
index 1c10d9f573fe..4ca8e8870eea 100644
--- a/frontend/__tests__/components/AnimatedModal.spec.tsx
+++ b/frontend/__tests__/components/AnimatedModal.spec.tsx
@@ -13,8 +13,6 @@ describe("AnimatedModal", () => {
   });
 
   function renderModal(props: {
-    isOpen: boolean;
-    onClose: () => void;
     onEscape?: (e: KeyboardEvent) => void;
     onBackdropClick?: (e: MouseEvent) => void;
     class?: string;
@@ -29,7 +27,7 @@ describe("AnimatedModal", () => {
     modalDiv: HTMLDivElement;
   } {
     const { container } = render(() => (
-      <AnimatedModal id="TestModal" {...props}>
+      <AnimatedModal id="Support" {...props}>
         <div data-testid="modal-content">Test Content</div>
       </AnimatedModal>
     ));
@@ -45,14 +43,14 @@ describe("AnimatedModal", () => {
   }
 
   it("renders dialog with correct id and class", () => {
-    const { dialog } = renderModal({ isOpen: false, onClose: vi.fn() });
+    const { dialog } = renderModal({});
 
-    expect(dialog).toHaveAttribute("id", "TestModal");
+    expect(dialog).toHaveAttribute("id", "SupportModal");
     expect(dialog).toHaveClass("modalWrapper", "hidden");
   });
 
   it("renders children inside modal div", () => {
-    const { modalDiv } = renderModal({ isOpen: false, onClose: vi.fn() });
+    const { modalDiv } = renderModal({});
 
     expect(
       modalDiv.querySelector("[data-testid='modal-content']"),
@@ -60,25 +58,19 @@ describe("AnimatedModal", () => {
   });
 
   it("has escape handler attached", () => {
-    const onClose = vi.fn();
-
-    const { dialog } = renderModal({ isOpen: true, onClose });
+    const { dialog } = renderModal({});
 
     expect(dialog.onkeydown).toBeDefined();
   });
 
   it("has backdrop click handler attached", () => {
-    const onClose = vi.fn();
-
-    const { dialog } = renderModal({ isOpen: true, onClose });
+    const { dialog } = renderModal({});
 
     expect(dialog.onmousedown).toBeDefined();
   });
 
   it("applies custom class to dialog", () => {
     const { dialog } = renderModal({
-      isOpen: false,
-      onClose: vi.fn(),
       class: "customClass",
     });
 
@@ -87,11 +79,9 @@ describe("AnimatedModal", () => {
 
   it("renders with animationMode none", () => {
     const { dialog } = renderModal({
-      isOpen: false,
-      onClose: vi.fn(),
       animationMode: "none",
     });
 
-    expect(dialog).toHaveAttribute("id", "TestModal");
+    expect(dialog).toHaveAttribute("id", "SupportModal");
   });
 });
diff --git a/frontend/__tests__/components/Button.spec.tsx b/frontend/__tests__/components/Button.spec.tsx
new file mode 100644
index 000000000000..5f68eb9145d2
--- /dev/null
+++ b/frontend/__tests__/components/Button.spec.tsx
@@ -0,0 +1,167 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, cleanup } from "@solidjs/testing-library";
+import { Button } from "../../src/ts/components/Button";
+
+describe("Button component", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("renders a button element when onClick is provided", () => {
+    const onClick = vi.fn();
+
+    const { container } = render(() => (
+      <Button onClick={onClick} text="Click me" />
+    ));
+
+    const button = container.querySelector("button");
+    expect(button).toBeTruthy();
+    expect(button?.textContent).toContain("Click me");
+  });
+
+  it("renders an anchor element when href is provided", () => {
+    const { container } = render(() => (
+      <Button href="https://example.com" text="Go" />
+    ));
+
+    const anchor = container.querySelector("a");
+    expect(anchor).toBeTruthy();
+    expect(anchor?.getAttribute("href")).toBe("https://example.com");
+    expect(anchor?.getAttribute("target")).toBe("_blank");
+    expect(anchor?.getAttribute("rel")).toContain("noreferrer");
+  });
+
+  it("calls onClick when button is clicked", async () => {
+    const onClick = vi.fn();
+
+    const { container } = render(() => (
+      <Button onClick={onClick} text="Click me" />
+    ));
+
+    const button = container.querySelector("button");
+    button?.click();
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders icon when icon prop is provided", () => {
+    const { container } = render(() => (
+      <Button
+        onClick={() => {
+          //
+        }}
+        icon="fa-test"
+      />
+    ));
+
+    const icon = container.querySelector("i");
+    expect(icon).toBeTruthy();
+    expect(icon?.className).toContain("icon");
+    expect(icon?.className).toContain("fa-test");
+  });
+
+  it("applies fa-fw class when text is missing", () => {
+    const { container } = render(() => (
+      <Button
+        onClick={() => {
+          //
+        }}
+        icon="fa-test"
+      />
+    ));
+
+    const icon = container.querySelector("i");
+    expect(icon?.classList.contains("fa-fw")).toBe(true);
+  });
+
+  it("applies fa-fw class when fixedWidthIcon is true", () => {
+    const { container } = render(() => (
+      <Button
+        onClick={() => {
+          //
+        }}
+        icon="fa-test"
+        text="Hello"
+        fixedWidthIcon
+      />
+    ));
+
+    const icon = container.querySelector("i");
+    expect(icon?.classList.contains("fa-fw")).toBe(true);
+  });
+
+  it("does not apply fa-fw when text is present and fixedWidthIcon is false", () => {
+    const { container } = render(() => (
+      <Button
+        onClick={() => {
+          //
+        }}
+        icon="fa-test"
+        text="Hello"
+      />
+    ));
+
+    const icon = container.querySelector("i");
+    expect(icon?.classList.contains("fa-fw")).toBe(false);
+  });
+
+  it("applies default button class", () => {
+    const { container } = render(() => (
+      <Button
+        onClick={() => {
+          //
+        }}
+        text="Hello"
+      />
+    ));
+
+    const button = container.querySelector("button");
+    expect(button?.classList.contains("button")).toBe(false);
+  });
+
+  it("applies textButton class when type is text", () => {
+    const { container } = render(() => (
+      <Button
+        onClick={() => {
+          //
+        }}
+        text="Hello"
+        type="text"
+      />
+    ));
+
+    const button = container.querySelector("button");
+    expect(button?.classList.contains("textButton")).toBe(true);
+  });
+
+  it("applies custom class when class prop is provided", () => {
+    const { container } = render(() => (
+      <Button
+        onClick={() => {
+          //
+        }}
+        text="Hello"
+        class="custom-class"
+      />
+    ));
+
+    const button = container.querySelector("button");
+    expect(button?.classList.contains("custom-class")).toBe(true);
+  });
+
+  it("renders children content", () => {
+    const { container } = render(() => (
+      <Button
+        onClick={() => {
+          //
+        }}
+      >
+        <span data-testid="child">Child</span>
+      </Button>
+    ));
+
+    const child = container.querySelector('[data-testid="child"]');
+    expect(child).toBeTruthy();
+    expect(child?.textContent).toBe("Child");
+  });
+});
diff --git a/frontend/src/html/footer.html b/frontend/src/html/footer.html
deleted file mode 100644
index 4d2f7db9d711..000000000000
--- a/frontend/src/html/footer.html
+++ /dev/null
@@ -1,86 +0,0 @@
-<footer>
-  <div id="commandLineMobileButton">
-    <i class="fas fa-terminal"></i>
-  </div>
-  <div class="keyTips">
-    <kbd>tab</kbd>
-    and
-    <kbd>enter</kbd>
-    - Restart Test
-    <br />
-    <kbd>ctrl/cmd</kbd>
-    +
-    <kbd>shift</kbd>
-    +
-    <kbd>p</kbd>
-    or
-    <kbd>esc</kbd>
-    - Command Line
-  </div>
-  <div class="leftright">
-    <div class="left">
-      <button class="textButton" id="contactPopupButton">
-        <i class="fas fa-fw fa-envelope"></i>
-        <div class="text">contact</div>
-      </button>
-      <button id="supportMeButton" class="textButton">
-        <i class="fas fa-fw fa-donate"></i>
-        <div class="text">support</div>
-      </button>
-      <a
-        href="https://github.com/monkeytypegame/monkeytype"
-        class="textButton"
-        target="_blank"
-        rel="noreferrer noopener"
-      >
-        <i class="fas fa-fw fa-code"></i>
-        <div class="text">github</div>
-      </a>
-      <a
-        href="https://www.discord.gg/monkeytype"
-        class="textButton"
-        target="_blank"
-        rel="noreferrer noopener"
-        class="discordLink"
-      >
-        <i class="fab fa-fw fa-discord"></i>
-        <div class="text">discord</div>
-      </a>
-      <a
-        href="https://x.com/monkeytype"
-        class="textButton"
-        target="_blank"
-        rel="noreferrer noopener"
-      >
-        <i class="fab fa-fw fa-twitter"></i>
-        <div class="text">twitter</div>
-      </a>
-      <a href="/terms-of-service.html" class="textButton" target="_blank">
-        <i class="fas fa-fw fa-file-contract"></i>
-        <div class="text">terms</div>
-      </a>
-      <a href="/security-policy.html" class="textButton" target="_blank">
-        <i class="fas fa-fw fa-shield-alt"></i>
-        <div class="text">security</div>
-      </a>
-      <a href="/privacy-policy.html" class="textButton" target="_blank">
-        <i class="fas fa-fw fa-lock"></i>
-        <div class="text">privacy</div>
-      </a>
-    </div>
-    <div class="right">
-      <button
-        class="current-theme textButton"
-        aria-label="Shift-click to toggle custom theme"
-        data-balloon-pos="left"
-      >
-        <div class="icon">
-          <i class="fas fa-star favIndicator"></i>
-          <i class="fas fa-fw fa-palette"></i>
-        </div>
-        <div class="text">serika dark</div>
-      </button>
-      <VersionButton />
-    </div>
-  </div>
-</footer>
diff --git a/frontend/src/html/popups.html b/frontend/src/html/popups.html
index 29378eb83de2..f67aa61a004f 100644
--- a/frontend/src/html/popups.html
+++ b/frontend/src/html/popups.html
@@ -1,4 +1,4 @@
-<VersionHistoryModal />
+<Modals />
 
 <dialog id="registerCaptchaModal" class="modalWrapper hidden">
   <div class="modal">
@@ -1120,148 +1120,6 @@
     <button>copy link to clipboard</button>
   </div>
 </dialog>
-
-<dialog id="supportModal" class="modalWrapper hidden">
-  <div class="modal">
-    <div class="title">Support Monkeytype</div>
-    <div class="text">
-      Thank you so much for thinking about supporting this project. It would not
-      be possible without you and your continued support.
-      <i class="fas fa-heart"></i>
-    </div>
-    <div class="buttons">
-      <button class="ads">
-        <div class="icon"><i class="fas fa-fw fa-ad"></i></div>
-        <div class="text">Enable Ads</div>
-      </button>
-      <!-- <div class="button watchVideoAd">
-        <div class="icon"><i class="fas fa-fw fa-ad"></i></div>
-        <div class="text">
-          Watch
-          <br />
-          a Video Ad
-        </div>
-      </div> -->
-      <a
-        class="button"
-        href="https://ko-fi.com/monkeytype"
-        target="_blank"
-        rel="noreferrer noopener"
-      >
-        <div class="icon"><i class="fas fa-fw fa-donate"></i></div>
-        <div class="text">Donate</div>
-      </a>
-      <a
-        class="button"
-        href="https://www.patreon.com/monkeytype"
-        target="_blank"
-        rel="noreferrer noopener"
-      >
-        <div class="icon"><i class="fab fa-fw fa-patreon"></i></div>
-        <div class="text">Join Patreon</div>
-      </a>
-      <a
-        class="button"
-        href="https://monkeytype.store"
-        target="_blank"
-        rel="noreferrer noopener"
-      >
-        <div class="icon"><i class="fas fa-fw fa-tshirt"></i></div>
-        <div class="text">Buy Merch</div>
-      </a>
-    </div>
-  </div>
-</dialog>
-<dialog id="contactModal" class="modalWrapper hidden">
-  <div class="modal">
-    <div class="title">Contact</div>
-    <div class="text">
-      Feel free to send an email to contact@monkeytype.com. For business
-      inquiries, email jack@monkeytype.com (the buttons below will open the
-      default mail client).
-      <br />
-      <br />
-      Please
-      <span>do not send</span>
-      requests to delete account, update email, update name or clear personal
-      bests - you can do that in the settings page.
-    </div>
-    <div class="buttons">
-      <a
-        class="button"
-        target="_blank"
-        href="mailto:contact@monkeytype.com?subject=[Question] "
-        rel="noopener"
-      >
-        <div class="icon"><i class="fas fa-question-circle"></i></div>
-        <div class="textGroup">
-          <div class="text">Question</div>
-          <!-- <div class="subtext">Confused about something?</div> -->
-        </div>
-      </a>
-      <a
-        class="button"
-        target="_blank"
-        href="mailto:contact@monkeytype.com?subject=[Feedback] "
-        rel="noopener"
-      >
-        <div class="icon"><i class="fas fa-comment-dots"></i></div>
-        <div class="textGroup">
-          <div class="text">Feedback</div>
-          <!-- <div class="subtext">Feel like the website could be improved?</div> -->
-        </div>
-      </a>
-      <a
-        class="button"
-        target="_blank"
-        href="mailto:support@monkeytype.com?subject=[Bug] "
-        rel="noopener"
-      >
-        <div class="icon"><i class="fas fa-bug"></i></div>
-        <div class="textGroup">
-          <div class="text">Bug Report</div>
-          <!-- <div class="subtext">Report any bugs you found. You can also open a new issue on GitHub.</div> -->
-        </div>
-      </a>
-      <a
-        class="button"
-        target="_blank"
-        href="mailto:support@monkeytype.com?subject=[Account] "
-        rel="noopener"
-      >
-        <div class="icon"><i class="fas fa-user-circle"></i></div>
-        <div class="textGroup">
-          <div class="text">Account Help</div>
-          <!-- <div class="subtext">Report any problems with your account like login issues.</div> -->
-        </div>
-      </a>
-      <a
-        class="button"
-        target="_blank"
-        href="mailto:jack@monkeytype.com?subject=[Business] "
-        rel="noopener"
-      >
-        <div class="icon"><i class="fas fa-briefcase"></i></div>
-        <div class="textGroup">
-          <div class="text">Business Inquiry</div>
-          <!-- <div class="subtext">Let's work together.</div> -->
-        </div>
-      </a>
-      <a
-        class="button"
-        target="_blank"
-        href="mailto:contact@monkeytype.com?subject=[Other] "
-        rel="noopener"
-      >
-        <div class="icon"><i class="fas fa-ellipsis-h"></i></div>
-        <div class="textGroup">
-          <div class="text">Other</div>
-          <!-- <div class="subtext">We will try to help.</div> -->
-        </div>
-      </a>
-    </div>
-  </div>
-</dialog>
 <dialog id="commandLine" class="modalWrapper hidden">
   <div class="modal">
     <div
diff --git a/frontend/src/index.html b/frontend/src/index.html
index 00f398d48211..70da78146f8e 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -21,7 +21,6 @@
         <div class="bar"></div>
       </div>
     </div>
-    <ScrollToTop />
     <div id="popups">
       <load src="html/popups.html" />
     </div>
@@ -49,7 +48,7 @@
         <load src="html/pages/friends.html" />
         <load src="html/pages/leaderboards.html" />
       </main>
-      <load src="html/footer.html" />
+      <footer />
       <div
         id="ad-footer-wrapper"
         class="full-width ad advertisement ad-h focus"
diff --git a/frontend/src/styles/buttons.scss b/frontend/src/styles/buttons.scss
index 4f0d559bd348..b7c23b488faa 100644
--- a/frontend/src/styles/buttons.scss
+++ b/frontend/src/styles/buttons.scss
@@ -8,9 +8,11 @@ button,
 .textButton {
   .fas,
   .far,
-  .fab {
+  .fab,
+  .icon {
     line-height: 1.25;
     pointer-events: none;
+    justify-self: center;
   }
   &.fullWidth {
     width: 100%;
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index e54d06f47926..9b0dc5e3bbaf 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -1,5 +1,5 @@
 @import "buttons", "fonts", "404", "ads", "about", "account", "animations",
-  "banners", "caret", "commandline", "core", "footer", "inputs", "keymap",
-  "login", "monkey", "nav", "notifications", "popups", "profile", "scroll",
-  "settings", "account-settings", "leaderboards", "test", "loading", "friends",
+  "banners", "caret", "commandline", "core", "inputs", "keymap", "login",
+  "monkey", "nav", "notifications", "popups", "profile", "scroll", "settings",
+  "account-settings", "leaderboards", "test", "loading", "friends",
   "media-queries";
diff --git a/frontend/src/styles/media-queries-green.scss b/frontend/src/styles/media-queries-green.scss
index 6fe6da04dddf..78fca23abc3c 100644
--- a/frontend/src/styles/media-queries-green.scss
+++ b/frontend/src/styles/media-queries-green.scss
@@ -217,18 +217,6 @@
       grid-template-areas: "title title" "t15 t60";
     }
   }
-  footer {
-    .leftright {
-      .left {
-        display: grid;
-        grid-template-columns: repeat(4, auto);
-      }
-      .right {
-        display: grid;
-        grid-template-columns: 1fr;
-      }
-    }
-  }
   #customTextModal {
     .modal {
       grid-template-areas:
@@ -243,13 +231,6 @@
       }
     }
   }
-  #supportModal {
-    .modal {
-      .buttons {
-        grid-template-columns: 1fr 1fr;
-      }
-    }
-  }
   .testActivity {
     --gap-size: 0.1em;
     --font-size: 0.8em;
diff --git a/frontend/src/styles/media-queries-purple.scss b/frontend/src/styles/media-queries-purple.scss
index e0d9f655b452..0e5fe0534e8a 100644
--- a/frontend/src/styles/media-queries-purple.scss
+++ b/frontend/src/styles/media-queries-purple.scss
@@ -204,15 +204,6 @@
     border-radius: 0.3rem;
     font-size: 0.6rem;
   }
-  footer {
-    .leftright {
-      grid-template-columns: 1fr 1fr;
-      .left {
-        width: unset;
-        grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
-      }
-    }
-  }
   #alertsPopup .modal {
     max-width: calc(100% - 4rem);
   }
@@ -258,44 +249,6 @@
       grid-template-columns: 1fr 1fr;
     }
   }
-  #contactModal {
-    .modal {
-      .buttons {
-        grid-template-columns: 1fr;
-        .button {
-          padding: 0.5rem 1rem;
-          .icon,
-          .text {
-            font-size: 1rem;
-          }
-        }
-      }
-    }
-  }
-  #supportModal {
-    .modal {
-      .buttons {
-        grid-template-columns: 1fr;
-        button,
-        a.button {
-          display: grid;
-          grid-template-columns: auto 1fr;
-          justify-content: start;
-          align-items: center;
-          gap: 1.5rem;
-          padding: 0;
-          .icon {
-            font-size: 1.5rem;
-            margin-left: 1.5rem;
-          }
-          .text {
-            text-align: left;
-            font-size: 1rem;
-          }
-        }
-      }
-    }
-  }
   .testActivity {
     .wrapper {
       width: 100%;
diff --git a/frontend/src/styles/popups.scss b/frontend/src/styles/popups.scss
index 026aa177ba2c..5418f2f68af1 100644
--- a/frontend/src/styles/popups.scss
+++ b/frontend/src/styles/popups.scss
@@ -1384,57 +1384,6 @@ body.darkMode {
     }
   }
 }
-
-#supportModal {
-  .modal {
-    max-width: 900px;
-    width: 100%;
-    // height: 400px;
-    overflow-y: scroll;
-    max-height: 100%;
-    background: var(--bg-color);
-    border-radius: var(--roundness);
-    display: grid;
-    gap: 1rem;
-    @extend .ffscroll;
-
-    .text {
-      color: var(--text-color);
-    }
-
-    .subtext {
-      color: var(--sub-color);
-      font-size: 0.75rem;
-    }
-
-    .buttons {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-      gap: 1rem;
-
-      button,
-      .button {
-        display: block;
-        width: 100%;
-        height: 100%;
-        padding: 1rem 0;
-        display: grid;
-        gap: 1rem;
-        text-decoration: none;
-        .text {
-          transition: 0.25s;
-        }
-        &:hover .text {
-          color: var(--bg-color);
-        }
-        .icon {
-          font-size: 3rem;
-          line-height: 3rem;
-        }
-      }
-    }
-  }
-}
 #shareCustomThemeModal {
   .modal {
     max-width: 400px;
@@ -1451,54 +1400,6 @@ body.darkMode {
     max-width: 900px;
   }
 }
-#contactModal {
-  .modal {
-    overflow-y: scroll;
-    display: grid;
-    gap: 1rem;
-    @extend .ffscroll;
-    max-width: 900px;
-
-    .text {
-      color: var(--text-color);
-      span {
-        color: var(--error-color);
-      }
-    }
-
-    .buttons {
-      display: grid;
-      gap: 1rem;
-      grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
-
-      .button {
-        padding: 1rem;
-        gap: 1rem;
-        display: grid;
-        grid-template-areas: "icon textgroup";
-        grid-template-columns: auto 1fr;
-        text-align: left;
-        align-items: center;
-        .textGroup {
-          grid-area: textgroup;
-        }
-        .text {
-          font-size: 1.5rem;
-          line-height: 2rem;
-          transition: 0.125s;
-        }
-        &:hover .text {
-          color: var(--bg-color);
-        }
-        .icon {
-          grid-area: icon;
-          font-size: 2rem;
-          line-height: 2rem;
-        }
-      }
-    }
-  }
-}
 
 #editPresetModal {
   .modal {
diff --git a/frontend/src/ts/commandline/commandline.ts b/frontend/src/ts/commandline/commandline.ts
index 27f383160bb6..b4a9a8885a63 100644
--- a/frontend/src/ts/commandline/commandline.ts
+++ b/frontend/src/ts/commandline/commandline.ts
@@ -7,7 +7,11 @@ import { clearFontPreview } from "../ui";
 import AnimatedModal, { ShowOptions } from "../utils/animated-modal";
 import * as Notifications from "../elements/notifications";
 import * as OutOfFocus from "../test/out-of-focus";
-import { getActivePage } from "../signals/core";
+import {
+  getActivePage,
+  getCommandlineSubgroup,
+  setCommandlineSubgroup,
+} from "../signals/core";
 import * as Loader from "../elements/loader";
 import { Command, CommandsSubgroup, CommandWithValidation } from "./types";
 import { areSortedArraysEqual, areUnsortedArraysEqual } from "../utils/arrays";
@@ -21,6 +25,13 @@ import {
 import { isInputElementFocused } from "../input/input-element";
 import { qs } from "../utils/dom";
 import { ConfigKey } from "@monkeytype/schemas/configs";
+import { createEffect } from "solid-js";
+import {
+  getModalVisibility,
+  hideModal as storeHideModal,
+  hideModalAndClearChain as storeClearChain,
+  isModalOpen,
+} from "../stores/modals";
 
 type CommandlineMode = "search" | "input";
 type InputModeParams = {
@@ -31,6 +42,8 @@ type InputModeParams = {
   validation?: ValidationResult;
 };
 
+const MODAL_STORE_ID = "Commandline";
+
 let activeIndex = 0;
 let usingSingleList = false;
 let inputValue = "";
@@ -98,27 +111,30 @@ export function show(
         value: null,
         icon: null,
       };
-      if (settings?.subgroupOverride !== undefined) {
-        if (typeof settings.subgroupOverride === "string") {
-          const exists = CommandlineLists.doesListExist(
-            settings.subgroupOverride,
-          );
+      const subgroupSignal = getCommandlineSubgroup();
+
+      const overrideStringOrGroup =
+        settings?.subgroupOverride ?? subgroupSignal ?? null;
+
+      if (overrideStringOrGroup !== undefined) {
+        if (typeof overrideStringOrGroup === "string") {
+          const exists = CommandlineLists.doesListExist(overrideStringOrGroup);
           if (exists) {
             Loader.show();
             subgroupOverride = await CommandlineLists.getList(
-              settings.subgroupOverride,
+              overrideStringOrGroup,
             );
             Loader.hide();
           } else {
             subgroupOverride = null;
             usingSingleList = Config.singleListCommandLine === "on";
             Notifications.add(
-              `Command list ${settings.subgroupOverride} not found`,
+              `Command list ${overrideStringOrGroup} not found`,
               0,
             );
           }
         } else {
-          subgroupOverride = settings.subgroupOverride;
+          subgroupOverride = overrideStringOrGroup;
         }
         usingSingleList = false;
       } else {
@@ -180,17 +196,31 @@ function hide(clearModalChain = false): void {
   clearFontPreview();
   void ThemeController.clearPreview();
   isAnimating = true;
-  void modal.hide({
-    clearModalChain,
-    afterAnimation: async () => {
-      hideWarning();
-      addCommandlineBackground();
-      if (getActivePage() !== "test") {
-        (document.activeElement as HTMLElement | undefined)?.blur();
-      }
-      isAnimating = false;
-    },
-  });
+
+  // If managed by store, notify the store
+  if (isModalOpen(MODAL_STORE_ID)) {
+    if (clearModalChain) {
+      storeClearChain(MODAL_STORE_ID);
+    } else {
+      storeHideModal(MODAL_STORE_ID);
+    }
+    // Cleanup will happen in the effect when visibility changes
+  } else {
+    // Old modal system, hide directly
+    void modal.hide({
+      clearModalChain,
+      afterAnimation: async () => {
+        hideWarning();
+        addCommandlineBackground();
+        if (getActivePage() !== "test") {
+          (document.activeElement as HTMLElement | undefined)?.blur();
+        }
+        isAnimating = false;
+        subgroupOverride = null;
+        setCommandlineSubgroup(null);
+      },
+    });
+  }
 }
 
 async function goBackOrHide(): Promise<void> {
@@ -817,6 +847,7 @@ function createValidationHandler(command: Command): void {
 
 const modal = new AnimatedModal({
   dialogId: "commandLine",
+  storeId: MODAL_STORE_ID,
   customEscapeHandler: (): void => {
     //
   },
@@ -961,3 +992,45 @@ const modal = new AnimatedModal({
     });
   },
 });
+
+let lastVisibility: { visible: boolean; chained: boolean } | null = null;
+
+createEffect(() => {
+  const visibility = getModalVisibility(MODAL_STORE_ID);
+  const isVisible = visibility?.visible ?? false;
+  const wasVisible = lastVisibility?.visible ?? false;
+
+  // Show when visibility changes from false to true
+  if (isVisible && !wasVisible) {
+    show();
+  }
+  // Hide when visibility changes from true to false (triggered by store)
+  else if (!isVisible && wasVisible) {
+    // Only trigger hide if modal is actually open
+    if (modal.isOpen()) {
+      clearFontPreview();
+      void ThemeController.clearPreview();
+      // The store already updated, just trigger the animation
+      void modal.hide({
+        clearModalChain: !visibility?.chained,
+        afterAnimation: async () => {
+          hideWarning();
+          addCommandlineBackground();
+          if (getActivePage() !== "test") {
+            (document.activeElement as HTMLElement | undefined)?.blur();
+          }
+          isAnimating = false;
+          subgroupOverride = null;
+          setCommandlineSubgroup(null);
+
+          // After animation completes, notify store to show pending modal
+          if (visibility?.chained) {
+            storeHideModal(MODAL_STORE_ID);
+          }
+        },
+      });
+    }
+  }
+
+  lastVisibility = visibility ? { ...visibility } : null;
+});
diff --git a/frontend/src/ts/commandline/lists.ts b/frontend/src/ts/commandline/lists.ts
index cefee0c7bf60..2aab6e96cd60 100644
--- a/frontend/src/ts/commandline/lists.ts
+++ b/frontend/src/ts/commandline/lists.ts
@@ -45,6 +45,8 @@ challengesPromise
     );
   });
 
+const adsCommands = buildCommands("ads");
+
 export const commands: CommandsSubgroup = {
   title: "",
   list: [
@@ -211,7 +213,7 @@ export const commands: CommandsSubgroup = {
     ),
 
     //danger zone
-    ...buildCommands("ads"),
+    ...adsCommands,
 
     //other
     ...LoadChallengeCommands,
@@ -374,6 +376,7 @@ const lists = {
   funbox: FunboxCommands[0]?.subgroup,
   tags: TagsCommands[0]?.subgroup,
   resultSaving: ResultSavingCommands[0]?.subgroup,
+  ads: adsCommands[0]?.subgroup,
 };
 
 const subgroupByConfigKey = Object.fromEntries(
diff --git a/frontend/src/ts/components/AnimatedModal.tsx b/frontend/src/ts/components/AnimatedModal.tsx
index 428a9d09a5d5..d1fcee375618 100644
--- a/frontend/src/ts/components/AnimatedModal.tsx
+++ b/frontend/src/ts/components/AnimatedModal.tsx
@@ -1,7 +1,12 @@
 import { JSXElement, createEffect, onCleanup, ParentProps } from "solid-js";
 import { applyReducedMotion } from "../utils/misc";
-import { useModalChain } from "./ModalChainContext";
 import { useRefWithUtils } from "../hooks/useRefWithUtils";
+import {
+  hideModal as storeHideModal,
+  ModalId,
+  isModalOpen,
+  isModalChained,
+} from "../stores/modals";
 
 type AnimationParams = {
   opacity?: number | [number, number];
@@ -15,9 +20,7 @@ type AnimationConfig = {
 };
 
 type AnimatedModalProps = ParentProps<{
-  id: string;
-  isOpen: boolean;
-  onClose: () => void;
+  id: ModalId;
   mode?: "modal" | "dialog";
   animationMode?: "none" | "both" | "modalOnly";
   customAnimations?: {
@@ -32,12 +35,6 @@ type AnimatedModalProps = ParentProps<{
   onEscape?: (e: KeyboardEvent) => void;
   onBackdropClick?: (e: MouseEvent) => void;
 
-  // Chain-related props
-  useChain?: boolean;
-  modalChain?: string;
-  clearChainOnClose?: boolean;
-  showOptionsWhenReturning?: Record<string, unknown>;
-
   class?: string;
 }>;
 
@@ -48,45 +45,25 @@ export function AnimatedModal(props: AnimatedModalProps): JSXElement {
   // Refs are assigned by SolidJS via the ref attribute
   const [dialogRef, dialogEl] = useRefWithUtils<HTMLDialogElement>();
   const [modalRef, modalEl] = useRefWithUtils<HTMLDivElement>();
-  // oxlint-disable-next-line solid/reactivity
-  const modalChain = props.useChain ? useModalChain() : undefined;
 
-  // Register this modal in the chain
-  createEffect(() => {
-    if (props.useChain && modalChain && props.isOpen) {
-      modalChain.pushModal({
-        id: props.id,
-        show: showModal,
-        hide: hideModal,
-        showOptions: props.showOptionsWhenReturning,
-      });
-    }
-  });
+  const visibility = (): boolean => isModalOpen(props.id);
 
   // Handle open/close with animations
   createEffect(() => {
-    if (props.isOpen) {
-      void showModal();
+    const isChained = isModalChained(props.id);
+
+    if (visibility()) {
+      void showModal(isChained);
     } else {
-      void hideModal();
+      void hideModal(isChained);
     }
   });
 
-  async function showModal(): Promise<void> {
+  async function showModal(isChained: boolean): Promise<void> {
     if (dialogEl() === undefined || modalEl() === undefined) return;
 
     await props.beforeShow?.();
 
-    // If chaining from another modal, hide it first
-    const previousModal = modalChain?.getPreviousModal();
-    const isChained =
-      props.modalChain !== undefined ||
-      (previousModal && previousModal.id !== props.id);
-
-    if (isChained && previousModal) {
-      await previousModal.hide();
-    }
-
     // Open the dialog
     dialogEl()?.removeClass("hidden");
     if (props.mode === "dialog") {
@@ -167,21 +144,19 @@ export function AnimatedModal(props: AnimatedModalProps): JSXElement {
     }
   }
 
-  async function hideModal(): Promise<void> {
+  async function hideModal(isChained: boolean): Promise<void> {
     // Guard: only hide if visible and not already animating
     if (dialogEl() === undefined || modalEl() === undefined) return;
 
     await props.beforeHide?.();
 
-    const hasChain = modalChain && modalChain.getChainLength() > 0;
-
     const modalAnimDuration = applyReducedMotion(
       (props.customAnimations?.hide?.modal?.duration ??
         DEFAULT_ANIMATION_DURATION) *
-        (hasChain ? MODAL_ONLY_ANIMATION_MULTIPLIER : 1),
+        (isChained ? MODAL_ONLY_ANIMATION_MULTIPLIER : 1),
     );
 
-    const animMode = hasChain ? "modalOnly" : (props.animationMode ?? "both");
+    const animMode = isChained ? "modalOnly" : (props.animationMode ?? "both");
 
     if (animMode === "both" || animMode === "none") {
       const wrapperDuration = applyReducedMotion(
@@ -227,23 +202,7 @@ export function AnimatedModal(props: AnimatedModalProps): JSXElement {
 
   async function handleAfterHide(): Promise<void> {
     await props.afterHide?.();
-
-    // Clear chain if requested
-    if (props.clearChainOnClose && modalChain) {
-      modalChain.clearChain();
-    }
-
-    // Show previous modal in chain
-    const shouldShowPrevious = modalChain && modalChain.getChainLength() > 0;
-    if (shouldShowPrevious) {
-      const previous = modalChain.popModal();
-      if (previous && previous.id !== props.id) {
-        await previous.show();
-        return; // Don't call onClose when chaining
-      }
-    }
-
-    props.onClose();
+    storeHideModal(props.id);
   }
 
   async function handleAfterShow(): Promise<void> {
@@ -266,13 +225,13 @@ export function AnimatedModal(props: AnimatedModalProps): JSXElement {
   }
 
   const handleKeyDown = (e: KeyboardEvent): void => {
-    if (e.key === "Escape" && props.isOpen) {
+    if (e.key === "Escape" && visibility()) {
       e.preventDefault();
       e.stopPropagation();
       if (props.onEscape) {
         props.onEscape(e);
       } else {
-        void hideModal();
+        storeHideModal(props.id);
       }
     }
   };
@@ -282,7 +241,7 @@ export function AnimatedModal(props: AnimatedModalProps): JSXElement {
       if (props.onBackdropClick) {
         props.onBackdropClick(e);
       } else {
-        void hideModal();
+        storeHideModal(props.id);
       }
     }
   };
@@ -291,15 +250,11 @@ export function AnimatedModal(props: AnimatedModalProps): JSXElement {
     if (dialogEl()?.native.open) {
       dialogEl()?.native.close();
     }
-    // Remove from chain to prevent stale references
-    if (modalChain) {
-      modalChain.popModal();
-    }
   });
 
   return (
     <dialog
-      id={props.id}
+      id={`${props.id as string}Modal`}
       ref={dialogRef}
       class={`modalWrapper hidden ${props.class ?? ""}`}
       onKeyDown={handleKeyDown}
diff --git a/frontend/src/ts/components/Button.tsx b/frontend/src/ts/components/Button.tsx
new file mode 100644
index 000000000000..89596d0ea393
--- /dev/null
+++ b/frontend/src/ts/components/Button.tsx
@@ -0,0 +1,73 @@
+import { JSXElement, Show } from "solid-js";
+import { Conditional } from "./Conditional";
+
+type BaseProps = {
+  text?: string;
+  icon?: string;
+  fixedWidthIcon?: boolean;
+  class?: string;
+  type?: "text" | "button";
+  children?: JSXElement;
+};
+
+type ButtonProps = BaseProps & {
+  onClick: () => void;
+  href?: never;
+};
+
+type AnchorProps = BaseProps & {
+  href: string;
+  onClick?: never;
+};
+
+export function Button(props: ButtonProps | AnchorProps): JSXElement {
+  const isAnchor = "href" in props;
+  const buttonClass = isAnchor ? "button" : "";
+
+  const content = (
+    <>
+      <Show when={props.icon !== undefined}>
+        <i
+          class={`icon ${props.icon}`}
+          classList={{
+            "fa-fw": props.text === undefined || props.fixedWidthIcon === true,
+          }}
+        ></i>
+      </Show>
+      <Show when={props.text !== undefined}>{props.text}</Show>
+      {props.children}
+    </>
+  );
+
+  const getClassList = (): Record<string, boolean> => {
+    return {
+      [(props.type ?? "button") === "text" ? "textButton" : buttonClass]: true,
+      [props.class ?? ""]: props.class !== undefined,
+    };
+  };
+
+  return (
+    <Conditional
+      if={isAnchor}
+      then={
+        <a
+          classList={getClassList()}
+          href={props.href}
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          {content}
+        </a>
+      }
+      else={
+        <button
+          type="button"
+          classList={getClassList()}
+          onClick={() => props.onClick?.()}
+        >
+          {content}
+        </button>
+      }
+    />
+  );
+}
diff --git a/frontend/src/ts/components/Conditional.tsx b/frontend/src/ts/components/Conditional.tsx
new file mode 100644
index 000000000000..698cc06aeb11
--- /dev/null
+++ b/frontend/src/ts/components/Conditional.tsx
@@ -0,0 +1,13 @@
+import { JSXElement, Show } from "solid-js";
+
+export function Conditional(props: {
+  if: boolean;
+  then: JSXElement;
+  else?: JSXElement;
+}): JSXElement {
+  return (
+    <Show when={props.if} fallback={props.else}>
+      {props.then}
+    </Show>
+  );
+}
diff --git a/frontend/src/ts/components/ContactModal.scss b/frontend/src/ts/components/ContactModal.scss
new file mode 100644
index 000000000000..ca50648a7f9a
--- /dev/null
+++ b/frontend/src/ts/components/ContactModal.scss
@@ -0,0 +1,36 @@
+@use "../../styles/media.scss" as *;
+
+#ContactModal {
+  .modal {
+    max-width: 900px;
+
+    .text {
+      span {
+        color: var(--error-color);
+      }
+    }
+
+    .buttons {
+      display: grid;
+      gap: 1rem;
+      grid-template-columns: repeat(auto-fit, minmax(22em, 1fr));
+
+      @include media-query(purple) {
+        grid-template-columns: 1fr;
+      }
+
+      a {
+        text-align: left;
+        padding: 1em;
+        gap: 1em;
+        place-content: center start;
+        place-items: center center;
+        font-size: 1.5em;
+
+        @include media-query(purple) {
+          font-size: 1em;
+        }
+      }
+    }
+  }
+}
diff --git a/frontend/src/ts/components/ContactModal.tsx b/frontend/src/ts/components/ContactModal.tsx
new file mode 100644
index 000000000000..2800ba24808c
--- /dev/null
+++ b/frontend/src/ts/components/ContactModal.tsx
@@ -0,0 +1,66 @@
+import { JSXElement } from "solid-js";
+import { AnimatedModal } from "./AnimatedModal";
+import "./ContactModal.scss";
+import { Button } from "./Button";
+
+export function ContactModal(): JSXElement {
+  return (
+    <AnimatedModal id="Contact">
+      <div class="title">Contact</div>
+      <div class="text">
+        Feel free to send an email to contact@monkeytype.com. For business
+        inquiries, email jack@monkeytype.com (the buttons below will open the
+        default mail client).
+        <br />
+        <br />
+        Please <span>do not send</span> requests to delete account, update
+        email, update name or clear personal bests - you can do that in the
+        settings page.
+      </div>
+      <div class="buttons">
+        <Button
+          type="button"
+          href="mailto:contact@monkeytype.com?subject=[Question] "
+          fixedWidthIcon
+          icon="fas fa-question-circle"
+          text="Question"
+        />
+        <Button
+          type="button"
+          href="mailto:contact@monkeytype.com?subject=[Feedback] "
+          fixedWidthIcon
+          icon="fas fa-comment-dots"
+          text="Feedback"
+        />
+        <Button
+          type="button"
+          href="mailto:support@monkeytype.com?subject=[Bug] "
+          fixedWidthIcon
+          icon="fas fa-bug"
+          text="Bug Report"
+        />
+        <Button
+          type="button"
+          href="mailto:support@monkeytype.com?subject=[Account] "
+          fixedWidthIcon
+          icon="fas fa-user-circle"
+          text="Account Help"
+        />
+        <Button
+          type="button"
+          href="mailto:jack@monkeytype.com?subject=[Business] "
+          fixedWidthIcon
+          icon="fas fa-briefcase"
+          text="Business Inquiry"
+        />
+        <Button
+          type="button"
+          href="mailto:contact@monkeytype.com?subject=[Other] "
+          fixedWidthIcon
+          icon="fas fa-ellipsis-h"
+          text="Other"
+        />
+      </div>
+    </AnimatedModal>
+  );
+}
diff --git a/frontend/src/styles/footer.scss b/frontend/src/ts/components/Footer.scss
similarity index 58%
rename from frontend/src/styles/footer.scss
rename to frontend/src/ts/components/Footer.scss
index b4ee5c5e3421..ba9cb9b98b3b 100644
--- a/frontend/src/styles/footer.scss
+++ b/frontend/src/ts/components/Footer.scss
@@ -1,12 +1,12 @@
+@use "../../styles/media.scss" as *;
+
 footer {
   position: relative;
-  text-align: center;
-  line-height: 1rem;
   font-size: 0.75rem;
   color: var(--sub-color);
-  // margin: -0.5em;
 
   .keyTips {
+    text-align: center;
     transition: 0.125s;
     margin-bottom: 2em;
     line-height: 2;
@@ -33,17 +33,10 @@ footer {
 
   .leftright {
     margin: -0.5em;
-    -webkit-user-select: none;
-    user-select: none;
-    display: grid;
-    grid-template-columns: 1fr max-content;
+    display: flex;
+    justify-content: space-between;
     gap: 2rem;
-    .textButton {
-      text-decoration: none;
-      font-size: 0.75rem;
-      line-height: 1rem;
-      padding: 0.25em 0.5em;
-    }
+
     .left {
       text-align: left;
       display: flex;
@@ -56,15 +49,7 @@ footer {
       justify-self: right;
       width: max-content;
       height: max-content;
-    }
-    .left .textButton,
-    .right .textButton {
-      display: grid;
-      grid-auto-flow: column;
-      gap: 0.25rem;
-      align-items: baseline;
-      width: -moz-available;
-      width: max-content;
+      justify-items: end;
     }
   }
 
@@ -83,34 +68,54 @@ footer {
     }
   }
 
-  .current-theme {
-    .icon {
-      position: relative;
-      .favIndicator {
-        font-size: 0.5em;
-        top: -0.5em;
-        right: -0.5em;
-        padding: 0.25em;
-        position: absolute;
-        background: var(--bg-color);
-        border-radius: 100%;
-      }
-    }
-  }
-
   &.focus {
     .keyTips {
-      opacity: 0 !important;
+      opacity: 0;
     }
-    .textButton {
-      opacity: 0 !important;
+    button,
+    a {
+      opacity: 0;
     }
     #newVersionIndicator {
-      opacity: 0 !important;
+      opacity: 0;
     }
     #commandLineMobileButton {
-      opacity: 0 !important;
-      pointer-events: none !important;
+      opacity: 0;
+      pointer-events: none;
     }
   }
+
+  @include media-query(green) {
+    & {
+      .leftright {
+        .left {
+          display: grid;
+          grid-template-columns: repeat(4, auto);
+        }
+        .right {
+          display: grid;
+          grid-template-columns: 1fr;
+        }
+      }
+    }
+  }
+
+  @include media-query(purple) {
+    & {
+      .leftright {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        .left {
+          width: unset;
+          grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
+        }
+      }
+    }
+  }
+}
+
+@media (hover: none) and (pointer: coarse) {
+  #commandLineMobileButton {
+    display: block !important;
+  }
 }
diff --git a/frontend/src/ts/components/Footer.tsx b/frontend/src/ts/components/Footer.tsx
new file mode 100644
index 000000000000..233017eadfb6
--- /dev/null
+++ b/frontend/src/ts/components/Footer.tsx
@@ -0,0 +1,95 @@
+import { JSXElement } from "solid-js";
+import { VersionButton } from "./VersionButton";
+import { Button } from "./Button";
+import { showModal } from "../stores/modals";
+import "./Footer.scss";
+import { ThemeIndicator } from "./ThemeIndicator";
+import { ScrollToTop } from "./ScrollToTop";
+
+export function Footer(): JSXElement {
+  return (
+    <footer>
+      <ScrollToTop />
+      <div
+        id="commandLineMobileButton"
+        onClick={() => {
+          showModal("Commandline");
+        }}
+      >
+        <i class="fas fa-terminal"></i>
+      </div>
+
+      <div class="keyTips">
+        <kbd>tab</kbd> and <kbd>enter</kbd> - restart test
+        <br />
+        <kbd>ctrl/cmd</kbd> + <kbd>shift</kbd> + <kbd>p</kbd> or <kbd>esc</kbd>{" "}
+        - command line
+      </div>
+
+      <div class="leftright">
+        <div class="left">
+          <Button
+            type="text"
+            text="contact"
+            icon="fas fa-envelope"
+            fixedWidthIcon
+            onClick={() => showModal("Contact")}
+          />
+          <Button
+            type="text"
+            text="support"
+            icon="fas fa-donate"
+            fixedWidthIcon
+            onClick={() => showModal("Support")}
+          />
+          <Button
+            type="text"
+            text="github"
+            icon="fas fa-code"
+            fixedWidthIcon
+            href="https://github.com/monkeytypegame/monkeytype"
+          />
+          <Button
+            type="text"
+            text="discord"
+            icon="fab fa-discord"
+            fixedWidthIcon
+            href="https://www.discord.gg/monkeytype"
+          />
+          <Button
+            type="text"
+            text="twitter"
+            icon="fab fa-twitter"
+            fixedWidthIcon
+            href="https://x.com/monkeytype"
+          />
+          <Button
+            type="text"
+            text="terms"
+            icon="fas fa-file-contract"
+            fixedWidthIcon
+            href="/terms-of-service.html"
+          />
+          <Button
+            href="/security-policy.html"
+            type="text"
+            text="security"
+            icon="fas fa-shield-alt"
+            fixedWidthIcon
+          />
+          <Button
+            href="/privacy-policy.html"
+            type="text"
+            text="privacy"
+            icon="fas fa-lock"
+            fixedWidthIcon
+          />
+        </div>
+        <div class="right">
+          <ThemeIndicator />
+          <VersionButton />
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/frontend/src/ts/components/ModalChainContext.tsx b/frontend/src/ts/components/ModalChainContext.tsx
deleted file mode 100644
index 0b8dc24e0fe9..000000000000
--- a/frontend/src/ts/components/ModalChainContext.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import {
-  createContext,
-  useContext,
-  ParentProps,
-  createSignal,
-  JSXElement,
-} from "solid-js";
-
-type ModalChainItem = {
-  id: string;
-  show: () => void | Promise<void>;
-  hide: () => void | Promise<void>;
-  showOptions?: Record<string, unknown>;
-};
-
-type ModalChainContextValue = {
-  pushModal: (item: ModalChainItem) => void;
-  popModal: () => ModalChainItem | undefined;
-  getPreviousModal: () => ModalChainItem | undefined;
-  clearChain: () => void;
-  getChainLength: () => number;
-};
-
-const ModalChainContext = createContext<ModalChainContextValue>();
-
-export function ModalChainProvider(props: ParentProps): JSXElement {
-  const [chain, setChain] = createSignal<ModalChainItem[]>([]);
-
-  const pushModal = (item: ModalChainItem): void => {
-    setChain((prev) => [...prev, item]);
-  };
-
-  const popModal = (): ModalChainItem | undefined => {
-    const current = chain();
-    if (current.length === 0) return undefined;
-
-    const popped = current[current.length - 1];
-    setChain(current.slice(0, -1));
-    return popped;
-  };
-
-  const getPreviousModal = (): ModalChainItem | undefined => {
-    const current = chain();
-    return current.length > 0 ? current[current.length - 1] : undefined;
-  };
-
-  const clearChain = (): void => {
-    setChain([]);
-  };
-
-  const getChainLength = (): number => {
-    return chain().length;
-  };
-
-  return (
-    <ModalChainContext.Provider
-      value={{
-        pushModal,
-        popModal,
-        getPreviousModal,
-        clearChain,
-        getChainLength,
-      }}
-    >
-      {props.children}
-    </ModalChainContext.Provider>
-  );
-}
-
-export function useModalChain(): ModalChainContextValue | undefined {
-  return useContext(ModalChainContext);
-}
diff --git a/frontend/src/ts/components/Modals.tsx b/frontend/src/ts/components/Modals.tsx
new file mode 100644
index 000000000000..ff6983dfcd85
--- /dev/null
+++ b/frontend/src/ts/components/Modals.tsx
@@ -0,0 +1,14 @@
+import { JSXElement } from "solid-js";
+import { VersionHistoryModal } from "./VersionHistoryModal";
+import { ContactModal } from "./ContactModal";
+import { SupportModal } from "./SupportModal";
+
+export function Modals(): JSXElement {
+  return (
+    <>
+      <VersionHistoryModal />
+      <ContactModal />
+      <SupportModal />
+    </>
+  );
+}
diff --git a/frontend/src/ts/components/SupportModal.scss b/frontend/src/ts/components/SupportModal.scss
new file mode 100644
index 000000000000..65fac07b939f
--- /dev/null
+++ b/frontend/src/ts/components/SupportModal.scss
@@ -0,0 +1,42 @@
+@use "../../styles/media.scss" as *;
+
+#SupportModal {
+  .modal {
+    max-width: 900px;
+
+    .buttons {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+      gap: 1rem;
+
+      @include media-query(green) {
+        grid-template-columns: 1fr 1fr;
+      }
+
+      @include media-query(purple) {
+        grid-template-columns: 1fr;
+      }
+
+      button,
+      a {
+        display: grid;
+        gap: 1em;
+        padding: 1em;
+        .icon {
+          font-size: 3em;
+          line-height: 1;
+          @include media-query(purple) {
+            font-size: 2em;
+          }
+        }
+
+        @include media-query(purple) {
+          grid-template-columns: auto 1fr;
+          place-content: center center;
+          place-items: center start;
+          text-align: left;
+        }
+      }
+    }
+  }
+}
diff --git a/frontend/src/ts/components/SupportModal.tsx b/frontend/src/ts/components/SupportModal.tsx
new file mode 100644
index 000000000000..f4942b462c6e
--- /dev/null
+++ b/frontend/src/ts/components/SupportModal.tsx
@@ -0,0 +1,52 @@
+import { JSXElement } from "solid-js";
+import { AnimatedModal } from "./AnimatedModal";
+import "./SupportModal.scss";
+import { showModal } from "../stores/modals";
+import { setCommandlineSubgroup } from "../signals/core";
+import { Button } from "./Button";
+
+export function SupportModal(): JSXElement {
+  return (
+    <AnimatedModal id="Support">
+      <div class="title">Support Monkeytype</div>
+      <div class="text">
+        Thank you so much for thinking about supporting this project. It would
+        not be possible without you and your continued support.
+        <i class="fas fa-heart"></i>
+      </div>
+      <div class="buttons">
+        <Button
+          type="button"
+          onClick={() => {
+            setCommandlineSubgroup("ads");
+            showModal("Commandline");
+          }}
+          icon="fas fa-ad"
+          text="Enable Ads"
+          fixedWidthIcon
+        />
+        <Button
+          type="button"
+          href="https://ko-fi.com/monkeytype"
+          icon="fas fa-donate"
+          text="Donate"
+          fixedWidthIcon
+        />
+        <Button
+          type="button"
+          href="https://www.patreon.com/monkeytype"
+          icon="fab fa-patreon"
+          text="Join Patreon"
+          fixedWidthIcon
+        />
+        <Button
+          type="button"
+          href="https://monkeytype.store"
+          icon="fas fa-tshirt"
+          text="Buy Merch"
+          fixedWidthIcon
+        />
+      </div>
+    </AnimatedModal>
+  );
+}
diff --git a/frontend/src/ts/components/ThemeIndicator.scss b/frontend/src/ts/components/ThemeIndicator.scss
new file mode 100644
index 000000000000..183a810b33e9
--- /dev/null
+++ b/frontend/src/ts/components/ThemeIndicator.scss
@@ -0,0 +1,14 @@
+.current-theme {
+  .icon {
+    position: relative;
+    .favIndicator {
+      font-size: 0.5em;
+      top: -0.5em;
+      right: -0.5em;
+      padding: 0.25em;
+      position: absolute;
+      background: var(--bg-color);
+      border-radius: 100%;
+    }
+  }
+}
diff --git a/frontend/src/ts/components/ThemeIndicator.tsx b/frontend/src/ts/components/ThemeIndicator.tsx
new file mode 100644
index 000000000000..4ad1e918d5f0
--- /dev/null
+++ b/frontend/src/ts/components/ThemeIndicator.tsx
@@ -0,0 +1,51 @@
+import { JSXElement, Show } from "solid-js";
+import { getThemeIndicator } from "../signals/core";
+import Config, { setConfig } from "../config";
+import { isAuthenticated } from "../firebase";
+import * as DB from "../db";
+import * as Notifications from "../elements/notifications";
+import * as Commandline from "../commandline/commandline";
+import "./ThemeIndicator.scss";
+
+export function ThemeIndicator(): JSXElement {
+  const handleClick = (e: MouseEvent): void => {
+    if (e.shiftKey) {
+      if (Config.customTheme) {
+        setConfig("customTheme", false);
+        return;
+      }
+      if (
+        isAuthenticated() &&
+        (DB.getSnapshot()?.customThemes?.length ?? 0) < 1
+      ) {
+        Notifications.add("No custom themes!", 0);
+        setConfig("customTheme", false);
+        return;
+      }
+      setConfig("customTheme", true);
+    } else {
+      const subgroup = Config.customTheme ? "customTheme" : "themes";
+      Commandline.show({
+        subgroupOverride: subgroup,
+      });
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      class="textButton current-theme"
+      aria-label="Shift-click to toggle custom theme"
+      data-balloon-pos="left"
+      onClick={handleClick}
+    >
+      <div class="icon">
+        <Show when={getThemeIndicator().isFavorite}>
+          <i class="fas fa-star favIndicator"></i>
+        </Show>
+        <i class="fas fa-fw fa-palette"></i>
+      </div>
+      <div class="text">{getThemeIndicator().text}</div>
+    </button>
+  );
+}
diff --git a/frontend/src/ts/components/VersionButton.scss b/frontend/src/ts/components/VersionButton.scss
new file mode 100644
index 000000000000..5ab0616562bc
--- /dev/null
+++ b/frontend/src/ts/components/VersionButton.scss
@@ -0,0 +1,17 @@
+.currentVersion {
+  display: flex;
+  #newVersionIndicator {
+    margin: 0;
+    padding: 0 0.25em;
+    font-size: unset;
+    background-color: var(--main-color);
+    border-radius: calc(var(--roundness) / 2);
+    color: var(--bg-color);
+    text-align: center;
+    cursor: pointer;
+    transition: 0.125s;
+    &.focus {
+      opacity: 0 !important;
+    }
+  }
+}
diff --git a/frontend/src/ts/components/VersionButton.tsx b/frontend/src/ts/components/VersionButton.tsx
index 527707ce5a17..cb29bfd72745 100644
--- a/frontend/src/ts/components/VersionButton.tsx
+++ b/frontend/src/ts/components/VersionButton.tsx
@@ -5,6 +5,7 @@ import { COMPATIBILITY_CHECK } from "@monkeytype/contracts";
 import { lastSeenServerCompatibility } from "../ape/adapters/ts-rest-adapter";
 import { getVersion } from "../signals/core";
 import { showModal } from "../stores/modals";
+import "./VersionButton.scss";
 
 export function VersionButton(): JSXElement {
   const [indicatorVisible, setIndicatorVisible] = createSignal(true);
diff --git a/frontend/src/ts/components/VersionHistoryModal.tsx b/frontend/src/ts/components/VersionHistoryModal.tsx
index 5180ac5fb0c2..d4a7eeab1137 100644
--- a/frontend/src/ts/components/VersionHistoryModal.tsx
+++ b/frontend/src/ts/components/VersionHistoryModal.tsx
@@ -4,7 +4,7 @@ import { getReleasesFromGitHub } from "../utils/json-data";
 import { AnimatedModal } from "./AnimatedModal";
 import "./VersionHistoryModal.scss";
 import AsyncContent from "./AsyncContent";
-import { hideModal, isModalOpen } from "../stores/modals";
+import { isModalOpen } from "../stores/modals";
 
 export function VersionHistoryModal(): JSXElement {
   const isOpen = (): boolean => isModalOpen("VersionHistory");
@@ -41,11 +41,7 @@ export function VersionHistoryModal(): JSXElement {
   });
 
   return (
-    <AnimatedModal
-      id="VersionHistoryModal"
-      isOpen={isOpen()}
-      onClose={() => hideModal("VersionHistory")}
-    >
+    <AnimatedModal id="VersionHistory">
       <AsyncContent
         resource={releases}
         errorMessage="Failed to load version history"
diff --git a/frontend/src/ts/components/mount.tsx b/frontend/src/ts/components/mount.tsx
index 69f50e5cd2f4..fceb52743005 100644
--- a/frontend/src/ts/components/mount.tsx
+++ b/frontend/src/ts/components/mount.tsx
@@ -1,14 +1,13 @@
 import { render } from "solid-js/web";
 import { qsa } from "../utils/dom";
-import { ScrollToTop } from "./ScrollToTop";
-import { VersionButton } from "./VersionButton";
-import { VersionHistoryModal } from "./VersionHistoryModal";
+
 import { JSXElement } from "solid-js";
+import { Footer } from "./Footer";
+import { Modals } from "./Modals";
 
 const components: Record<string, () => JSXElement> = {
-  VersionButton: VersionButton,
-  ScrollToTop: ScrollToTop,
-  VersionHistoryModal: VersionHistoryModal,
+  Footer: () => <Footer />,
+  Modals: () => <Modals />,
 };
 
 function mountToMountpoint(name: string, component: () => JSXElement): void {
diff --git a/frontend/src/ts/controllers/theme-controller.ts b/frontend/src/ts/controllers/theme-controller.ts
index 827314b11f81..1bceeb5443ad 100644
--- a/frontend/src/ts/controllers/theme-controller.ts
+++ b/frontend/src/ts/controllers/theme-controller.ts
@@ -14,6 +14,7 @@ import { ThemeName } from "@monkeytype/schemas/configs";
 import { themes, ThemesList } from "../constants/themes";
 import fileStorage from "../utils/file-storage";
 import { qs, qsa } from "../utils/dom";
+import { setThemeIndicator } from "../signals/core";
 
 export let randomTheme: ThemeName | string | null = null;
 let isPreviewingTheme = false;
@@ -197,46 +198,21 @@ async function apply(
 }
 
 function updateFooterIndicator(nameOverride?: string): void {
-  const indicator = document.querySelector<HTMLElement>(
-    "footer .right .current-theme",
-  );
-  const text = indicator?.querySelector<HTMLElement>(".text");
-  const favIcon = indicator?.querySelector<HTMLElement>(".favIndicator");
-
-  if (
-    !(indicator instanceof HTMLElement) ||
-    !(text instanceof HTMLElement) ||
-    !(favIcon instanceof HTMLElement)
-  ) {
-    return;
-  }
-
   //text
   let str: string = Config.theme;
   if (randomTheme !== null) str = randomTheme;
   if (Config.customTheme) str = "custom";
   if (nameOverride !== undefined && nameOverride !== "") str = nameOverride;
   str = str.replace(/_/g, " ");
-  text.innerText = str;
 
   //fav icon
-  const isCustom = Config.customTheme;
-  // hide the favorite icon completely for custom themes
-  if (isCustom) {
-    favIcon.style.display = "none";
-    return;
-  }
-  favIcon.style.display = "";
   const currentTheme = nameOverride ?? randomTheme ?? Config.theme;
   const isFavorite =
+    !Config.customTheme &&
     currentTheme !== null &&
     Config.favThemes.includes(currentTheme as ThemeName);
 
-  if (isFavorite) {
-    favIcon.style.display = "block";
-  } else {
-    favIcon.style.display = "none";
-  }
+  setThemeIndicator({ text: str, isFavorite });
 }
 
 type PreviewState = {
diff --git a/frontend/src/ts/event-handlers/about.ts b/frontend/src/ts/event-handlers/about.ts
index 0cde61d83e88..b2cfbe53baaf 100644
--- a/frontend/src/ts/event-handlers/about.ts
+++ b/frontend/src/ts/event-handlers/about.ts
@@ -1,11 +1,10 @@
-import * as SupportPopup from "../modals/support";
-import * as ContactModal from "../modals/contact";
+import { showModal } from "../stores/modals";
 import { qs } from "../utils/dom";
 
 qs("#pageAbout #supportMeAboutButton")?.on("click", () => {
-  SupportPopup.show();
+  showModal("Support");
 });
 
 qs("#pageAbout #contactPopupButton2")?.on("click", () => {
-  ContactModal.show();
+  showModal("Contact");
 });
diff --git a/frontend/src/ts/event-handlers/footer.ts b/frontend/src/ts/event-handlers/footer.ts
deleted file mode 100644
index ed36d4dd3224..000000000000
--- a/frontend/src/ts/event-handlers/footer.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import Config, { setConfig } from "../config";
-import { isAuthenticated } from "../firebase";
-import * as DB from "../db";
-import * as Notifications from "../elements/notifications";
-import * as Commandline from "../commandline/commandline";
-import * as SupportPopup from "../modals/support";
-import * as ContactModal from "../modals/contact";
-import { qs } from "../utils/dom";
-
-qs("footer #commandLineMobileButton")?.on("click", async () => {
-  Commandline.show({
-    singleListOverride: false,
-  });
-});
-
-qs("footer .right .current-theme")?.on("click", async (event) => {
-  const e = event as MouseEvent;
-  if (e.shiftKey) {
-    if (Config.customTheme) {
-      setConfig("customTheme", false);
-      return;
-    }
-    if (
-      isAuthenticated() &&
-      (DB.getSnapshot()?.customThemes?.length ?? 0) < 1
-    ) {
-      Notifications.add("No custom themes!", 0);
-      setConfig("customTheme", false);
-      return;
-    }
-    setConfig("customTheme", true);
-  } else {
-    const subgroup = Config.customTheme ? "customTheme" : "themes";
-    Commandline.show({
-      subgroupOverride: subgroup,
-    });
-  }
-});
-
-qs("footer #supportMeButton")?.on("click", () => {
-  SupportPopup.show();
-});
-
-qs("footer #contactPopupButton")?.on("click", () => {
-  ContactModal.show();
-});
diff --git a/frontend/src/ts/index.ts b/frontend/src/ts/index.ts
index 42fc3427a33b..17c1573546a4 100644
--- a/frontend/src/ts/index.ts
+++ b/frontend/src/ts/index.ts
@@ -1,5 +1,4 @@
 import "./event-handlers/global";
-import "./event-handlers/footer";
 import "./event-handlers/keymap";
 import "./event-handlers/test";
 import "./event-handlers/about";
diff --git a/frontend/src/ts/modals/contact.ts b/frontend/src/ts/modals/contact.ts
deleted file mode 100644
index 8d808ee84c76..000000000000
--- a/frontend/src/ts/modals/contact.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import AnimatedModal from "../utils/animated-modal";
-
-export function show(): void {
-  void modal.show();
-}
-
-const modal = new AnimatedModal({
-  dialogId: "contactModal",
-});
diff --git a/frontend/src/ts/modals/streak-hour-offset.ts b/frontend/src/ts/modals/streak-hour-offset.ts
index 68b0f3e3257b..1bb295d21c52 100644
--- a/frontend/src/ts/modals/streak-hour-offset.ts
+++ b/frontend/src/ts/modals/streak-hour-offset.ts
@@ -45,7 +45,6 @@ export function show(): void {
 
 function updatePreview(): void {
   const inputValue = state.offset;
-
   const preview = modal.getModal().qs(".preview");
 
   const date = new Date();
@@ -58,6 +57,7 @@ function updatePreview(): void {
   newDate.setUTCMilliseconds(0);
 
   newDate.setHours(newDate.getHours() - -1 * inputValue); //idk why, but it only works when i subtract (so i have to negate inputValue)
+  newDate.setMinutes(newDate.getMinutes() - -1 * ((inputValue % 1) * 60));
 
   preview?.setHtml(`
     <div class="row"><div>Current local reset time:</div><div>${date.toLocaleTimeString()}</div></div>
diff --git a/frontend/src/ts/modals/support.ts b/frontend/src/ts/modals/support.ts
deleted file mode 100644
index 19cc05285508..000000000000
--- a/frontend/src/ts/modals/support.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import AnimatedModal from "../utils/animated-modal";
-import * as Commandline from "../commandline/commandline";
-
-export function show(): void {
-  void modal.show();
-}
-
-const modal = new AnimatedModal({
-  dialogId: "supportModal",
-  setup: async (modalEl): Promise<void> => {
-    modalEl.qs("button.ads")?.on("click", async () => {
-      Commandline.show(
-        { subgroupOverride: "ads" },
-        {
-          modalChain: modal,
-        },
-      );
-    });
-  },
-});
diff --git a/frontend/src/ts/signals/core.ts b/frontend/src/ts/signals/core.ts
index 4db91d9493c4..cdf74aeb82db 100644
--- a/frontend/src/ts/signals/core.ts
+++ b/frontend/src/ts/signals/core.ts
@@ -9,3 +9,15 @@ export const [getVersion, setVersion] = createSignal<{
   text: "",
   isNew: false,
 });
+
+export const [getThemeIndicator, setThemeIndicator] = createSignal<{
+  text: string;
+  isFavorite: boolean;
+}>({
+  text: "unknown",
+  isFavorite: false,
+});
+
+export const [getCommandlineSubgroup, setCommandlineSubgroup] = createSignal<
+  "ads" | null
+>(null);
diff --git a/frontend/src/ts/stores/modals.ts b/frontend/src/ts/stores/modals.ts
index 1797c9820888..749ebf11a593 100644
--- a/frontend/src/ts/stores/modals.ts
+++ b/frontend/src/ts/stores/modals.ts
@@ -1,19 +1,122 @@
 import { createStore } from "solid-js/store";
 
-type ModalId = "VersionHistory";
+export type ModalId = "VersionHistory" | "Contact" | "Support" | "Commandline";
 
-const [openModals, setOpenModals] = createStore<
-  Partial<Record<ModalId, boolean>>
->({});
+export type ModalVisibility = {
+  visible: boolean;
+  chained: boolean;
+};
+
+type ModalState = {
+  openModals: Partial<Record<ModalId, ModalVisibility>>;
+  modalStack: ModalId[];
+  pendingModal: ModalId | null;
+  pendingIsChained: boolean;
+};
+
+const [modalState, setModalState] = createStore<ModalState>({
+  openModals: {},
+  modalStack: [],
+  pendingModal: null,
+  pendingIsChained: false,
+});
 
 export function showModal(id: ModalId): void {
-  setOpenModals(id, true);
-}
+  const currentlyOpenModal = getCurrentlyOpenModal();
 
+  if (currentlyOpenModal !== null && currentlyOpenModal !== id) {
+    // A different modal is open, chain them
+    setModalState((state) => ({
+      modalStack: [...state.modalStack, currentlyOpenModal],
+      pendingModal: id,
+      pendingIsChained: true,
+    }));
+
+    // Hide current modal with chained flag - the new modal will show after hide completes
+    setModalState("openModals", currentlyOpenModal, {
+      visible: false,
+      chained: true,
+    });
+  } else {
+    // No modal open, show immediately
+    setModalState("openModals", id, { visible: true, chained: false });
+  }
+}
 export function hideModal(id: ModalId): void {
-  setOpenModals(id, false);
+  // Check if there's a pending modal to show (chained show/hide)
+  if (modalState.pendingModal !== null) {
+    const nextModal = modalState.pendingModal;
+    const isChained = modalState.pendingIsChained;
+
+    setModalState({
+      pendingModal: null,
+      pendingIsChained: false,
+    });
+
+    // Don't update the current modal's state - it's already false
+    setModalState("openModals", nextModal, {
+      visible: true,
+      chained: isChained,
+    });
+    return;
+  }
+
+  // Check if this modal was part of a chain (user dismissed, go back)
+  const stackCopy = [...modalState.modalStack];
+  const previousModal = stackCopy.pop();
+
+  if (previousModal !== undefined) {
+    // Queue the previous modal to show after hide animation completes
+    setModalState({
+      modalStack: stackCopy,
+      pendingModal: previousModal,
+      pendingIsChained: true,
+    });
+
+    // Mark current modal as hiding with chained flag
+    setModalState("openModals", id, { visible: false, chained: true });
+  } else {
+    // No chain, just hide normally
+    setModalState("openModals", id, { visible: false, chained: false });
+  }
+}
+
+export function hideModalAndClearChain(id: ModalId): void {
+  // Clear the entire chain
+  setModalState({
+    modalStack: [],
+    pendingModal: null,
+    pendingIsChained: false,
+  });
+
+  // Just hide the modal normally
+  setModalState("openModals", id, { visible: false, chained: false });
+}
+
+export function hideCurrentModalAndClearChain(): void {
+  const currentlyOpenModal = getCurrentlyOpenModal();
+  if (currentlyOpenModal !== null) {
+    hideModalAndClearChain(currentlyOpenModal);
+  }
+}
+
+export function getModalVisibility(id: ModalId): ModalVisibility | null {
+  return modalState.openModals[id] ?? null;
 }
 
 export function isModalOpen(id: ModalId): boolean {
-  return !!openModals[id];
+  return modalState.openModals[id]?.visible === true;
+}
+
+export function isModalChained(id: ModalId): boolean {
+  return modalState.openModals[id]?.chained === true;
+}
+
+function getCurrentlyOpenModal(): ModalId | null {
+  for (const [id, visibility] of Object.entries(modalState.openModals)) {
+    if (visibility?.visible) {
+      return id as ModalId;
+    }
+  }
+  return null;
 }
diff --git a/frontend/src/ts/utils/animated-modal.ts b/frontend/src/ts/utils/animated-modal.ts
index 52f832fbeb8e..c0a8deb09b2a 100644
--- a/frontend/src/ts/utils/animated-modal.ts
+++ b/frontend/src/ts/utils/animated-modal.ts
@@ -2,6 +2,12 @@ import { AnimationParams } from "animejs";
 import { applyReducedMotion, isPopupVisible } from "./misc";
 import * as Skeleton from "./skeleton";
 import { ElementWithUtils, qs } from "./dom";
+import {
+  isModalChained,
+  isModalOpen,
+  ModalId,
+  hideModal as storeHideModal,
+} from "../stores/modals";
 
 type CustomWrapperAndModalAnimations = {
   wrapper?: AnimationParams & {
@@ -35,6 +41,7 @@ export type ShowOptions<T = unknown> = ShowHideOptions<T> & {
   mode?: "modal" | "dialog";
   focusFirstInput?: true | "focusAndSelect";
   modalChain?: AnimatedModal;
+  chained?: boolean;
 };
 
 export type HideOptions<T = unknown> = ShowHideOptions<T> & {
@@ -44,6 +51,7 @@ export type HideOptions<T = unknown> = ShowHideOptions<T> & {
 
 type ConstructorParams<T> = {
   dialogId: string;
+  storeId?: ModalId;
   appendTo?: Skeleton.SkeletonAppendParents;
   customAnimations?: ConstructorCustomAnimations;
   showOptionsWhenInChain?: ShowOptions<T>;
@@ -63,6 +71,7 @@ export default class AnimatedModal<
   private wrapperEl: ElementWithUtils<HTMLDialogElement>;
   private modalEl: ElementWithUtils;
   private dialogId: string;
+  private storeId: ModalId | undefined;
   private open = false;
   private setupRan = false;
   private previousModalInChain: AnimatedModal | undefined;
@@ -116,6 +125,7 @@ export default class AnimatedModal<
     }
 
     this.dialogId = constructorParams.dialogId;
+    this.storeId = constructorParams.storeId;
     this.wrapperEl = dialogElement;
     this.modalEl = modalElement;
     this.customShowAnimations = constructorParams.customAnimations?.show;
@@ -145,7 +155,14 @@ export default class AnimatedModal<
           this.customEscapeHandler(e);
           void this.cleanup?.();
         } else {
-          await this.hide();
+          // If this modal is managed by the store (has a modalId and is open in store), notify it
+          if (this.storeId !== undefined && isModalOpen(this.storeId)) {
+            // Disable pointer events immediately to prevent further interactions
+            this.wrapperEl.setStyle({ pointerEvents: "none" });
+            storeHideModal(this.storeId);
+          } else {
+            await this.hide();
+          }
         }
       }
     });
@@ -156,7 +173,12 @@ export default class AnimatedModal<
           this.customWrapperClickHandler(e);
           void this.cleanup?.();
         } else {
-          await this.hide();
+          // If this modal is managed by the store (has a modalId and is open in store), notify it
+          if (this.storeId !== undefined && isModalOpen(this.storeId)) {
+            storeHideModal(this.storeId);
+          } else {
+            await this.hide();
+          }
         }
       }
     });
@@ -217,12 +239,16 @@ export default class AnimatedModal<
         return;
       }
 
+      // Check if this modal is being opened in chained mode from the store
+      const isChainedFromStore =
+        this.storeId !== undefined && isModalChained(this.storeId);
+
       const modalAnimationDuration = applyReducedMotion(
         (options?.customAnimation?.modal?.duration ??
           options?.animationDurationMs ??
           this.customShowAnimations?.modal?.duration ??
           DEFAULT_ANIMATION_DURATION) *
-          (options?.modalChain !== undefined
+          (options?.modalChain !== undefined || isChainedFromStore
             ? MODAL_ONLY_ANIMATION_MULTIPLIER
             : 1),
       );
@@ -271,7 +297,7 @@ export default class AnimatedModal<
       );
 
       const animationMode =
-        this.previousModalInChain !== undefined
+        this.previousModalInChain !== undefined || isChainedFromStore
           ? "modalOnly"
           : (options?.animationMode ?? "both");
 
@@ -360,8 +386,13 @@ export default class AnimatedModal<
           this.customHideAnimations?.wrapper?.duration ??
           DEFAULT_ANIMATION_DURATION,
       );
+
+      // Check if this modal is part of a chain from the store
+      const isChainedFromStore =
+        this.storeId !== undefined && isModalChained(this.storeId);
+
       const animationMode =
-        this.previousModalInChain !== undefined
+        this.previousModalInChain !== undefined || isChainedFromStore
           ? "modalOnly"
           : (options?.animationMode ?? "both");
 
@@ -386,6 +417,11 @@ export default class AnimatedModal<
             await options?.afterAnimation?.(this.modalEl);
             void this.cleanup?.();
 
+            // Notify the store that this modal has been hidden
+            if (this.storeId !== undefined) {
+              storeHideModal(this.storeId);
+            }
+
             if (
               this.previousModalInChain !== undefined &&
               !options?.dontShowPreviousModalInchain
@@ -417,6 +453,11 @@ export default class AnimatedModal<
             await options?.afterAnimation?.(this.modalEl);
             void this.cleanup?.();
 
+            // Notify the store that this modal has been hidden
+            if (this.storeId !== undefined) {
+              storeHideModal(this.storeId);
+            }
+
             if (
               this.previousModalInChain !== undefined &&
               !options?.dontShowPreviousModalInchain
diff --git a/frontend/src/ts/utils/caret.ts b/frontend/src/ts/utils/caret.ts
index 11935474a789..97435fbc105f 100644
--- a/frontend/src/ts/utils/caret.ts
+++ b/frontend/src/ts/utils/caret.ts
@@ -405,8 +405,15 @@ export class Caret {
     isLanguageRightToLeft: boolean;
     isDirectionReversed: boolean;
   }): { left: number; top: number; width: number } {
+    // in zen, custom or polyglot mode we need to check per-letter
+    const checkRtlByLetter =
+      Config.mode === "zen" ||
+      Config.mode === "custom" ||
+      Config.funbox.includes("polyglot");
     const [isWordRTL, isFullMatch] = isWordRightToLeft(
-      options.wordText,
+      checkRtlByLetter
+        ? (options.letter.native.textContent ?? "")
+        : options.wordText,
       options.isLanguageRightToLeft,
       options.isDirectionReversed,
     );
@@ -455,7 +462,7 @@ export class Caret {
 
     // yes, this is all super verbose, but its easier to maintain and understand
     if (isWordRTL) {
-      if (isFullMatch) options.word.addClass("wordRtl");
+      if (!checkRtlByLetter && isFullMatch) options.word.addClass("wordRtl");
       let afterLetterCorrection = 0;
       if (options.side === "afterLetter") {
         if (this.isFullWidth()) {
diff --git a/frontend/static/themes/9009.css b/frontend/static/themes/9009.css
index d3c5fab10a9d..436b004b331a 100644
--- a/frontend/static/themes/9009.css
+++ b/frontend/static/themes/9009.css
@@ -23,7 +23,7 @@
   border-bottom: solid 2px var(--error-color);
 }
 
-key {
+kbd {
   color: var(--sub-color);
   background-color: var(--main-color);
 }
diff --git a/frontend/static/themes/solarized_osaka.css b/frontend/static/themes/solarized_osaka.css
index da0fe6cb077d..c2cfea3469f4 100644
--- a/frontend/static/themes/solarized_osaka.css
+++ b/frontend/static/themes/solarized_osaka.css
@@ -24,7 +24,7 @@ header #logo .icon {
   color: var(--text-color) !important;
 }
 
-key {
+kbd {
   color: var(--text-color);
   background-color: var(--sub-alt-color);
 }