diff --git a/backend/__tests__/api/controllers/preset.spec.ts b/backend/__tests__/api/controllers/preset.spec.ts
index b0ce8cbef536..dd247c24e01a 100644
--- a/backend/__tests__/api/controllers/preset.spec.ts
+++ b/backend/__tests__/api/controllers/preset.spec.ts
@@ -181,7 +181,7 @@ describe("PresetController", () => {
       });
       expect(addPresetMock).not.toHaveBeenCalled();
     });
-    it("should not fail with emtpy config", async () => {
+    it("should not fail with empty config", async () => {
       //GIVEN
 
       addPresetMock.mockResolvedValue({ presetId: "1" });
@@ -357,7 +357,7 @@ describe("PresetController", () => {
         },
       });
     });
-    it("should not fail with emtpy config", async () => {
+    it("should not fail with empty config", async () => {
       //GIVEN
 
       editPresetMock.mockResolvedValue({} as any);
diff --git a/frontend/__tests__/__harness__/mock-static.ts b/frontend/__tests__/__harness__/mock-static.ts
new file mode 100644
index 000000000000..19bfdbd34ab8
--- /dev/null
+++ b/frontend/__tests__/__harness__/mock-static.ts
@@ -0,0 +1,22 @@
+import { readFileSync } from "fs";
+import { resolve } from "path";
+import { fileURLToPath } from "url";
+import { vi } from "vitest";
+
+const BASE_DIR = resolve(fileURLToPath(import.meta.url), "../../../static");
+
+async function readJson<T>(filePath: string): Promise<T> {
+  const fullPath = resolve(BASE_DIR, filePath.replace(/^\//, ""));
+  const data = readFileSync(fullPath, "utf-8");
+  return JSON.parse(data) as T;
+}
+
+vi.mock("../../src/ts/utils/json-data", async (importOriginal) => {
+  const original = (await importOriginal()) as any;
+
+  // oxlint-disable-next-line typescript/no-unsafe-return
+  return {
+    ...original,
+    getLayout: async (name: string) => readJson(`/layouts/${name}.json`),
+  };
+});
diff --git a/frontend/__tests__/components/pages/test/keymapConverter.spec.ts b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
new file mode 100644
index 000000000000..07487c3e0e20
--- /dev/null
+++ b/frontend/__tests__/components/pages/test/keymapConverter.spec.ts
@@ -0,0 +1,1127 @@
+import { describe, expect, it } from "vitest";
+import { convertLayoutToKeymap } from "../../../../src/ts/components/pages/test/keymapConverter";
+
+import qwertyLayout from "../../../../static/layouts/qwerty.json";
+import qwertzLayout from "../../../../static/layouts/qwertz.json";
+
+import { LayoutObject } from "@monkeytype/schemas/layouts";
+import {
+  Alt,
+  BackspaceShort,
+  Ctrl,
+  EnterShort,
+  Hyper,
+  HyperShort,
+  Meta,
+  Shift,
+} from "../../../../src/ts/components/pages/test/keymapLayouts";
+
+function expectLegend(...legends: string[]): { legends: string[] } {
+  if (legends.length === 1) {
+    return { legends: [...legends, ...legends, ...legends, ...legends] };
+  }
+  if (legends.length === 2) {
+    return { legends: [...legends, "", ""] };
+  }
+
+  return { legends };
+}
+
+describe("keymap converter", () => {
+  describe("convertLayoutToKeymap", () => {
+    describe("staggered", () => {
+      it("converts qwerty staggered", () => {
+        const [row1, row2, row3, row4, row5] = convertLayoutToKeymap(
+          qwertyLayout as LayoutObject,
+          {
+            keymapStyle: "staggered",
+            showAllKeys: false,
+          },
+        );
+
+        expect(row1, "row1").toEqual([
+          { ...expectLegend("1", "!") },
+          { ...expectLegend("2", "@") },
+          { ...expectLegend("3", "#") },
+          { ...expectLegend("4", "$") },
+          { ...expectLegend("5", "%") },
+          { ...expectLegend("6", "^") },
+          { ...expectLegend("7", "&") },
+          { ...expectLegend("8", "*") },
+          { ...expectLegend("9", "(") },
+          { ...expectLegend("0", ")") },
+          { ...expectLegend("-", "_") },
+          { ...expectLegend("=", "+") },
+        ]);
+
+        expect(row2, "row2").toEqual([
+          { ...expectLegend("q", "Q"), x: 0.5 },
+          { ...expectLegend("w", "W") },
+          { ...expectLegend("e", "E") },
+          { ...expectLegend("r", "R") },
+          { ...expectLegend("t", "T") },
+          { ...expectLegend("y", "Y") },
+          { ...expectLegend("u", "U") },
+          { ...expectLegend("i", "I") },
+          { ...expectLegend("o", "O") },
+          { ...expectLegend("p", "P") },
+          { ...expectLegend("[", "{") },
+          { ...expectLegend("]", "}") },
+        ]);
+
+        expect(row3, "row3").toEqual([
+          { ...expectLegend("a", "A"), x: 1 },
+          { ...expectLegend("s", "S") },
+          { ...expectLegend("d", "D") },
+          { ...expectLegend("f", "F"), isHoming: true },
+          { ...expectLegend("g", "G") },
+          { ...expectLegend("h", "H") },
+          { ...expectLegend("j", "J"), isHoming: true },
+          { ...expectLegend("k", "K") },
+          { ...expectLegend("l", "L") },
+          { ...expectLegend(";", ":") },
+          { ...expectLegend("'", '"') },
+        ]);
+
+        expect(row4, "row4").toEqual([
+          { ...expectLegend("z", "Z"), x: 1.5 },
+          { ...expectLegend("x", "X") },
+          { ...expectLegend("c", "C") },
+          { ...expectLegend("v", "V") },
+          { ...expectLegend("b", "B") },
+          { ...expectLegend("n", "N") },
+          { ...expectLegend("m", "M") },
+          { ...expectLegend(",", "<") },
+          { ...expectLegend(".", ">") },
+          { ...expectLegend("/", "?") },
+        ]);
+
+        expect(row5, "row5").toEqual([
+          {
+            ...expectLegend(" "),
+            width: 6,
+            x: 3.5,
+            isLayoutIndicator: true,
+          },
+        ]);
+      });
+
+      it("converts qwerty staggered all keys", () => {
+        const [row1, row2, row3, row4, row5] = convertLayoutToKeymap(
+          qwertyLayout as LayoutObject,
+          {
+            keymapStyle: "staggered",
+            showAllKeys: true,
+          },
+        );
+
+        // Test only keys added when showAllKeys is true (not covered by basic staggered test)
+        // Row1: BS added at end
+        expect(row1?.[row1.length - 1], "row1 last").toEqual({
+          ...expectLegend("Backspace"),
+          width: 2,
+        });
+
+        // Row2: Tab added at start
+        expect(row2?.[0], "row2 first").toEqual({
+          ...expectLegend("Tab"),
+          width: 1.5,
+        });
+
+        // Row3: Caps added at start, Enter added at end
+        expect(row3?.[0], "row3 first").toEqual({
+          ...expectLegend("Caps"),
+          width: 1.75,
+        });
+        expect(row3?.[row3?.length - 1], "row3 last").toEqual({
+          ...expectLegend("Enter"),
+          width: 2.25,
+        });
+
+        // Row4: Shift added at start and end
+        expect(row4?.[0], "row4 first").toEqual({
+          ...expectLegend(Shift),
+          width: 2.25,
+        });
+        expect(row4?.[row4.length - 1], "row4 last").toEqual({
+          ...expectLegend(Shift),
+          width: 2.75,
+        });
+
+        // Row5: Ctrl, Monke, Alt at start; Alt, Monke, Meta, Ctrl at end
+        expect(row5, "row5").toEqual([
+          {
+            ...expectLegend(Ctrl),
+            width: 1.25,
+          },
+          {
+            ...expectLegend(Meta),
+            width: 1.25,
+          },
+          {
+            ...expectLegend(Alt),
+            width: 1.25,
+          },
+          {
+            isLayoutIndicator: true,
+            ...expectLegend(" "),
+            width: 6.25,
+            x: 0,
+          },
+          {
+            ...expectLegend(Alt),
+            width: 1.25,
+          },
+          {
+            ...expectLegend(Meta),
+            width: 1.25,
+          },
+          {
+            ...expectLegend(Hyper),
+            width: 1.25,
+          },
+          {
+            ...expectLegend(Ctrl),
+            width: 1.25,
+          },
+        ]);
+
+        // Also verify total counts are as expected with extra keys
+        expect(row1?.length, "row1 length").toBe(14);
+        expect(row2?.length, "row2 length").toBe(14);
+        expect(row3?.length, "row3 length").toBe(13);
+        expect(row4?.length, "row4 length").toBe(12);
+      });
+
+      it("converts qwertz staggered", () => {
+        const [row1, row2, row3, row4, row5] = convertLayoutToKeymap(
+          qwertzLayout as LayoutObject,
+          {
+            keymapStyle: "staggered",
+            showAllKeys: false,
+          },
+        );
+
+        expect(row1, "row1").toEqual([
+          { ...expectLegend("1", "!") },
+          { ...expectLegend("2", `"`) },
+          { ...expectLegend("3", "§") },
+          { ...expectLegend("4", "$") },
+          { ...expectLegend("5", "%") },
+          { ...expectLegend("6", "&") },
+          { ...expectLegend("7", "/") },
+          { ...expectLegend("8", "(") },
+          { ...expectLegend("9", ")") },
+          { ...expectLegend("0", "=") },
+          { ...expectLegend("ß", "?") },
+          { ...expectLegend("´", "`") },
+        ]);
+
+        expect(row2, "row2").toEqual([
+          { ...expectLegend("q", "Q"), x: 0.5 },
+          { ...expectLegend("w", "W") },
+          { ...expectLegend("e", "E") },
+          { ...expectLegend("r", "R") },
+          { ...expectLegend("t", "T") },
+          { ...expectLegend("z", "Z") },
+          { ...expectLegend("u", "U") },
+          { ...expectLegend("i", "I") },
+          { ...expectLegend("o", "O") },
+          { ...expectLegend("p", "P") },
+          { ...expectLegend("ü", "Ü") },
+          { ...expectLegend("+", "*") },
+        ]);
+
+        expect(row3, "row3").toEqual([
+          { ...expectLegend("a", "A"), x: 1 },
+          { ...expectLegend("s", "S") },
+          { ...expectLegend("d", "D") },
+          { ...expectLegend("f", "F"), isHoming: true },
+          { ...expectLegend("g", "G") },
+          { ...expectLegend("h", "H") },
+          { ...expectLegend("j", "J"), isHoming: true },
+          { ...expectLegend("k", "K") },
+          { ...expectLegend("l", "L") },
+          { ...expectLegend("ö", "Ö") },
+          { ...expectLegend("ä", "Ä") },
+          { ...expectLegend("#", "'") },
+        ]);
+
+        expect(row4, "row4").toEqual([
+          { ...expectLegend("<", ">"), x: 0.25 },
+          { ...expectLegend("y", "Y") },
+          { ...expectLegend("x", "X") },
+          { ...expectLegend("c", "C") },
+          { ...expectLegend("v", "V") },
+          { ...expectLegend("b", "B") },
+          { ...expectLegend("n", "N") },
+          { ...expectLegend("m", "M") },
+          { ...expectLegend(",", ";") },
+          { ...expectLegend(".", ":") },
+          { ...expectLegend("-", "_") },
+        ]);
+
+        expect(row5, "row5").toEqual([
+          {
+            ...expectLegend(" "),
+            width: 6,
+            x: 3.5,
+            isLayoutIndicator: true,
+          },
+        ]);
+      });
+
+      it("converts qwertz staggered all keys", () => {
+        const [row1, row2, row3, row4, row5] = convertLayoutToKeymap(
+          qwertzLayout as LayoutObject,
+          {
+            keymapStyle: "staggered",
+            showAllKeys: true,
+          },
+        );
+
+        // Test only keys added when showAllKeys is true (not covered by basic staggered test)
+
+        // Row1: BS added at end
+        expect(row1?.[row1.length - 1], "row1 last").toEqual({
+          ...expectLegend("Backspace"),
+          width: 2,
+        });
+
+        // Row2: Tab added at start, Enter (with height) added at end
+        expect(row2?.[0], "row2 first").toEqual({
+          ...expectLegend("Tab"),
+          width: 1.5,
+        });
+        expect(row2?.[row2.length - 1], "row2 last").toEqual({
+          ...expectLegend("Enter"),
+          height: 2,
+          width: 1.5,
+          align: "top",
+        });
+
+        // Row3: Caps added at start
+        expect(row3?.[0], "row3 first").toEqual({
+          ...expectLegend("Caps"),
+          width: 1.75,
+        });
+
+        // Row4: Shift added at start and end
+        expect(row4?.[0], "row4 first").toEqual({
+          ...expectLegend(Shift),
+          width: 1.25,
+        });
+        expect(row4?.[row4.length - 1], "row4 last").toEqual({
+          ...expectLegend(Shift),
+          width: 2.75,
+        });
+
+        // Row5: Ctrl, Monke, Alt at start; Alt, Monke, Meta, Ctrl at end
+        expect(row5, "row5").toEqual([
+          {
+            ...expectLegend(Ctrl),
+            width: 1.25,
+          },
+          {
+            ...expectLegend(Meta),
+            width: 1.25,
+          },
+          {
+            ...expectLegend(Alt),
+            width: 1.25,
+          },
+          {
+            isLayoutIndicator: true,
+            ...expectLegend(" "),
+            width: 6.25,
+            x: 0,
+          },
+          {
+            ...expectLegend(Alt),
+            width: 1.25,
+          },
+          {
+            ...expectLegend(Meta),
+            width: 1.25,
+          },
+          {
+            ...expectLegend(Hyper),
+            width: 1.25,
+          },
+          {
+            ...expectLegend(Ctrl),
+            width: 1.25,
+          },
+        ]);
+
+        // Also verify total counts are as expected with extra keys
+        expect(row1?.length, "row1 length").toBe(14);
+        expect(row2?.length, "row2 length").toBe(14);
+        expect(row3?.length, "row3 length").toBe(13);
+        expect(row4?.length, "row4 length").toBe(13);
+      });
+    });
+
+    describe("split", () => {
+      it("converts qwerty split", () => {
+        const [row1, row2, row3, row4, row5] = convertLayoutToKeymap(
+          qwertyLayout as LayoutObject,
+          {
+            keymapStyle: "split",
+            showAllKeys: false,
+          },
+        );
+
+        // Test split-specific differences from staggered (not covered by basic test)
+        // Split adds x=1 gap after column 7 for rows 1-4, and row5 has 2 keys with gap
+
+        // Row 1: col7 (index 6) = '7' gets gap x=1
+        expect(row1?.[6], "row1 key 7").toEqual({
+          ...expectLegend("7", "&"),
+          x: 1,
+        });
+
+        // Row 2: col6 (index 5) = 'y' gets gap x=1
+        expect(row2?.[5], "row2 key y").toEqual({
+          ...expectLegend("y", "Y"),
+          x: 1,
+        });
+
+        // Row 3: col6 (index 5) = 'h' gets gap x=1
+        expect(row3?.[5], "row3 key h").toEqual({
+          ...expectLegend("h", "H"),
+          x: 1,
+        });
+
+        // Row 4: col6 (index 5) = 'n' gets gap x=1
+        expect(row4?.[5], "row4 key n").toEqual({
+          ...expectLegend("n", "N"),
+          x: 1,
+        });
+
+        // Row 5: split has two keys with gap in middle
+        expect(row5?.length, "row5 length").toBe(2);
+        expect(row5?.[0], "row5 left").toEqual({
+          ...expectLegend(" "),
+          width: 3,
+          x: 3.5,
+          isLayoutIndicator: true,
+        });
+        expect(row5?.[1], "row5 right").toEqual({
+          ...expectLegend(" "),
+          width: 3,
+          x: 1,
+        });
+      });
+
+      it("converts qwerty split all keys", () => {
+        const [_row1, _row2, _row3, _row4, row5] = convertLayoutToKeymap(
+          qwertyLayout as LayoutObject,
+          {
+            keymapStyle: "split",
+            showAllKeys: true,
+          },
+        );
+        expect(row5?.[3], "row5 left shift").toEqual({
+          ...expectLegend(" "),
+          width: 3,
+          x: 0,
+          isLayoutIndicator: true,
+        });
+        expect(row5?.[4], "row5 right shift").toEqual({
+          ...expectLegend(" "),
+          width: 3,
+          x: 1.25,
+        });
+      });
+
+      it("converts qwertz split", () => {
+        const [row1, row2, row3, row4, row5] = convertLayoutToKeymap(
+          qwertzLayout as LayoutObject,
+          {
+            keymapStyle: "split",
+            showAllKeys: false,
+          },
+        );
+
+        // Test split-specific differences from staggered (not covered by basic test)
+
+        // Row 1: col7 (index 6) = '7' gets gap x=1
+        expect(row1?.[6], "row1 key 7").toEqual({
+          ...expectLegend("7", "/"),
+          x: 1,
+        });
+
+        // Row 2: col6 (index 5) = 'z' gets gap x=1
+        expect(row2?.[5], "row2 key z").toEqual({
+          ...expectLegend("z", "Z"),
+          x: 1,
+        });
+
+        // Row 3: col6 (index 5) = 'h' gets gap x=1
+        expect(row3?.[5], "row3 key h").toEqual({
+          ...expectLegend("h", "H"),
+          x: 1,
+        });
+
+        // Row 4: col5 (index 6) = 'b' gets gap x=1
+        expect(row4?.[6], "row4 key n").toEqual({
+          ...expectLegend("n", "N"),
+          x: 1,
+        });
+
+        // Row 5: split has two keys with gap in middle
+        expect(row5?.length, "row5 length").toBe(2);
+        expect(row5?.[0], "row5 left").toEqual({
+          ...expectLegend(" "),
+          width: 3,
+          x: 3.5,
+          isLayoutIndicator: true,
+        });
+        expect(row5?.[1], "row5 right").toEqual({
+          ...expectLegend(" "),
+          width: 3,
+          x: 1,
+        });
+      });
+
+      it("converts qwertz split all keys", () => {
+        const [_row1, _row2, _row3, _row4, row5] = convertLayoutToKeymap(
+          qwertzLayout as LayoutObject,
+          {
+            keymapStyle: "split",
+            showAllKeys: true,
+          },
+        );
+        expect(row5?.[3], "row5 left shift").toEqual({
+          ...expectLegend(" "),
+          width: 3,
+          x: 0,
+          isLayoutIndicator: true,
+        });
+        expect(row5?.[4], "row5 right shift").toEqual({
+          ...expectLegend(" "),
+          width: 3,
+          x: 1.25,
+        });
+      });
+    });
+
+    describe("matrix", () => {
+      it("converts qwerty matrix", () => {
+        const [row1, row2, row3, row4, row5] = convertLayoutToKeymap(
+          qwertyLayout as LayoutObject,
+          {
+            keymapStyle: "matrix",
+            showAllKeys: false,
+          },
+        );
+
+        expect(row1, "row1").toEqual([
+          { ...expectLegend("1", "!") },
+          { ...expectLegend("2", "@") },
+          { ...expectLegend("3", "#") },
+          { ...expectLegend("4", "$") },
+          { ...expectLegend("5", "%") },
+          { ...expectLegend("6", "^") },
+          { ...expectLegend("7", "&") },
+          { ...expectLegend("8", "*") },
+          { ...expectLegend("9", "(") },
+          { ...expectLegend("0", ")") },
+        ]);
+
+        expect(row2, "row2").toEqual([
+          { ...expectLegend("q", "Q") },
+          { ...expectLegend("w", "W") },
+          { ...expectLegend("e", "E") },
+          { ...expectLegend("r", "R") },
+          { ...expectLegend("t", "T") },
+          { ...expectLegend("y", "Y") },
+          { ...expectLegend("u", "U") },
+          { ...expectLegend("i", "I") },
+          { ...expectLegend("o", "O") },
+          { ...expectLegend("p", "P") },
+        ]);
+
+        expect(row3, "row3").toEqual([
+          { ...expectLegend("a", "A") },
+          { ...expectLegend("s", "S") },
+          { ...expectLegend("d", "D") },
+          { ...expectLegend("f", "F"), isHoming: true },
+          { ...expectLegend("g", "G") },
+          { ...expectLegend("h", "H") },
+          { ...expectLegend("j", "J"), isHoming: true },
+          { ...expectLegend("k", "K") },
+          { ...expectLegend("l", "L") },
+          { ...expectLegend(";", ":") },
+        ]);
+
+        expect(row4, "row4").toEqual([
+          { ...expectLegend("z", "Z") },
+          { ...expectLegend("x", "X") },
+          { ...expectLegend("c", "C") },
+          { ...expectLegend("v", "V") },
+          { ...expectLegend("b", "B") },
+          { ...expectLegend("n", "N") },
+          { ...expectLegend("m", "M") },
+          { ...expectLegend(",", "<") },
+          { ...expectLegend(".", ">") },
+          { ...expectLegend("/", "?") },
+        ]);
+
+        expect(row5, "row5").toEqual([
+          {
+            ...expectLegend(" "),
+            width: 4,
+            x: 3,
+            isLayoutIndicator: true,
+          },
+        ]);
+      });
+
+      it("converts qwerty matrix all keys", () => {
+        const [row1, row2, row3, row4, row5] = convertLayoutToKeymap(
+          qwertyLayout as LayoutObject,
+          {
+            keymapStyle: "matrix",
+            showAllKeys: true,
+          },
+        );
+
+        // Test only keys added when showAllKeys is true (not covered by basic matrix test)
+        //Row1: starting with `
+        expect(row1?.[0], "row1 first").toEqual({
+          ...expectLegend("`", "~"),
+        });
+
+        // Row1: BS added at end
+        expect(row1?.[row1.length - 1], "row1 last").toEqual({
+          ...expectLegend(BackspaceShort),
+        });
+
+        // Row2: Tab added at start
+        expect(row2?.[0], "row2 first").toEqual({
+          ...expectLegend("Tab"),
+        });
+
+        // Row2: Del added at end
+        expect(row2?.[row2.length - 1], "row2 last").toEqual({
+          ...expectLegend("[", "{"),
+        });
+
+        // Row3: Esc added at start
+        expect(row3?.[0], "row3 first").toEqual({
+          ...expectLegend("Esc"),
+        });
+
+        // Row3: ends with '
+        expect(row3?.[row3.length - 1], "row3 last").toEqual({
+          ...expectLegend("'", '"'),
+        });
+
+        // Row4: Shift added at start and end
+        expect(row4?.[0], "row4 first").toEqual({
+          ...expectLegend(Shift),
+        });
+        expect(row4?.[row4.length - 1], "row4 last").toEqual({
+          ...expectLegend(EnterShort),
+        });
+
+        // Row5: Ctrl, Monke, Alt at start; Alt,  Meta, Ctrl at end
+        expect(row5, "row5").toEqual([
+          {
+            ...expectLegend(Ctrl),
+          },
+          {
+            ...expectLegend(Meta),
+          },
+          {
+            ...expectLegend(Alt),
+          },
+          {
+            isLayoutIndicator: true,
+            ...expectLegend(" "),
+            width: 6,
+            x: 0,
+          },
+          {
+            ...expectLegend(Alt),
+          },
+          {
+            ...expectLegend(HyperShort),
+          },
+          {
+            ...expectLegend(Ctrl),
+          },
+        ]);
+        // Also verify total counts are as expected with extra keys
+        expect(row1?.length, "row1 length").toBe(12);
+        expect(row2?.length, "row2 length").toBe(12);
+        expect(row3?.length, "row3 length").toBe(12);
+        expect(row4?.length, "row4 length").toBe(12);
+      });
+    });
+
+    describe("split matrix", () => {
+      it("converts qwerty split  matrix", () => {
+        const [row1, row2, row3, row4, row5] = convertLayoutToKeymap(
+          qwertyLayout as LayoutObject,
+          {
+            keymapStyle: "split_matrix",
+            showAllKeys: false,
+          },
+        );
+
+        // Row 1: col6 (index 5) = '6' gets gap x=1
+        expect(row1?.[5], "row1 key 7").toEqual({
+          ...expectLegend("6", "^"),
+          x: 1,
+        });
+
+        // Row 2: col6 (index 5) = 'y' gets gap x=1
+        expect(row2?.[5], "row2 key y").toEqual({
+          ...expectLegend("y", "Y"),
+          x: 1,
+        });
+
+        // Row 3: col6 (index 5) = 'h' gets gap x=1
+        expect(row3?.[5], "row3 key h").toEqual({
+          ...expectLegend("h", "H"),
+          x: 1,
+        });
+
+        // Row 4: col6 (index 5) = 'n' gets gap x=1
+        expect(row4?.[5], "row4 key n").toEqual({
+          ...expectLegend("n", "N"),
+          x: 1,
+        });
+
+        // Row 5: split has two keys with gap in middle
+        expect(row5?.length, "row5 length").toBe(2);
+        expect(row5?.[0], "row5 left").toEqual({
+          ...expectLegend(" "),
+          width: 3,
+          x: 2,
+          isLayoutIndicator: true,
+        });
+        expect(row5?.[1], "row5 right").toEqual({
+          ...expectLegend(" "),
+          width: 3,
+          x: 1,
+        });
+      });
+    });
+
+    describe("steno", () => {
+      it("converts steno", () => {
+        const [row1, row2, row3, row4, row5] = convertLayoutToKeymap(
+          { type: "ansi" } as LayoutObject,
+          {
+            keymapStyle: "steno",
+            showAllKeys: false,
+          },
+        );
+
+        expect(row1, "row1").toEqual([]);
+        expect(row2, "row2").toEqual([
+          { ...expectLegend("s", "S"), height: 2 },
+          { ...expectLegend("t", "T") },
+          { ...expectLegend("p", "P") },
+          { ...expectLegend("h", "H") },
+          { ...expectLegend("*"), height: 2 },
+          { ...expectLegend("f", "F") },
+          { ...expectLegend("p", "P") },
+          { ...expectLegend("l", "L") },
+          { ...expectLegend("t", "T") },
+          { ...expectLegend("d", "D") },
+        ]);
+        expect(row3, "row3").toEqual([
+          { ...expectLegend("k", "K"), x: 1 },
+          { ...expectLegend("w", "W") },
+          { ...expectLegend("r", "R") },
+          { ...expectLegend("r", "R"), x: 1 },
+          { ...expectLegend("b", "B") },
+          { ...expectLegend("g", "G") },
+          { ...expectLegend("s", "S") },
+          { ...expectLegend("z", "Z") },
+        ]);
+        expect(row4, "row4").toEqual([
+          { ...expectLegend("a", "A"), x: 2.25 },
+          { ...expectLegend("o", "O") },
+          { ...expectLegend("e", "E"), x: 0.5 },
+          { ...expectLegend("u", "U") },
+        ]);
+        expect(row5, "row5").toBeUndefined();
+      });
+
+      it("converts steno matrix", () => {
+        const [row1, row2, row3, row4, row5] = convertLayoutToKeymap(
+          { type: "ansi" } as LayoutObject,
+          {
+            keymapStyle: "steno_matrix",
+            showAllKeys: false,
+          },
+        );
+
+        expect(row1, "row1").toEqual([]);
+        expect(row2, "row2").toEqual([
+          { ...expectLegend("s", "S") },
+          { ...expectLegend("t", "T") },
+          { ...expectLegend("p", "P") },
+          { ...expectLegend("h", "H") },
+          { ...expectLegend("*") },
+          { ...expectLegend("f", "F"), x: 1 },
+          { ...expectLegend("p", "P") },
+          { ...expectLegend("l", "L") },
+          { ...expectLegend("t", "T") },
+          { ...expectLegend("d", "D") },
+        ]);
+        expect(row3, "row3").toEqual([
+          { ...expectLegend("s", "S") },
+          { ...expectLegend("k", "K") },
+          { ...expectLegend("w", "W") },
+          { ...expectLegend("r", "R") },
+          { ...expectLegend("*") },
+          { ...expectLegend("r", "R"), x: 1 },
+          { ...expectLegend("b", "B") },
+          { ...expectLegend("g", "G") },
+          { ...expectLegend("s", "S") },
+          { ...expectLegend("z", "Z") },
+        ]);
+        expect(row4, "row4").toEqual([
+          { ...expectLegend("a", "A"), x: 3 },
+          { ...expectLegend("o", "O") },
+          { ...expectLegend("e", "E"), x: 1 },
+          { ...expectLegend("u", "U") },
+        ]);
+        expect(row5, "row5").toBeUndefined();
+      });
+    });
+
+    describe("alice", () => {
+      it("converts qwerty alice", () => {
+        const [row1, row2, row3, row4, row5] = convertLayoutToKeymap(
+          qwertyLayout as LayoutObject,
+          {
+            keymapStyle: "alice",
+            showAllKeys: false,
+          },
+        );
+
+        expect(row1, "row1").toEqual([
+          { ...expectLegend("1", "!") },
+          { ...expectLegend("2", "@"), y: -0.1 },
+          { ...expectLegend("3", "#"), y: 0.1, rotation: 10 },
+          { ...expectLegend("4", "$"), y: 0.3, rotation: 10 },
+          { ...expectLegend("5", "%"), y: 0.5, rotation: 10 },
+          { ...expectLegend("6", "^"), y: 0.7, rotation: 10 },
+          { ...expectLegend("7", "&"), x: 0.15, y: 0.6, rotation: -10 },
+          { ...expectLegend("8", "*"), y: 0.4, rotation: -10 },
+          { ...expectLegend("9", "("), y: 0.2, rotation: -10 },
+          { ...expectLegend("0", ")"), rotation: -10 },
+          { ...expectLegend("-", "_"), y: -0.1 },
+          { ...expectLegend("=", "+") },
+        ]);
+
+        expect(row2, "row2").toEqual([
+          { ...expectLegend("q", "Q"), x: 0.15 },
+          { ...expectLegend("w", "W"), rotation: 10 },
+          { ...expectLegend("e", "E"), y: 0.2, rotation: 10 },
+          { ...expectLegend("r", "R"), y: 0.4, rotation: 10 },
+          { ...expectLegend("t", "T"), y: 0.6, rotation: 10 },
+          { ...expectLegend("y", "Y"), x: 0.75, y: 0.7, rotation: -10 },
+          { ...expectLegend("u", "U"), y: 0.5, rotation: -10 },
+          { ...expectLegend("i", "I"), y: 0.3, rotation: -10 },
+          { ...expectLegend("o", "O"), y: 0.1, rotation: -10 },
+          { ...expectLegend("p", "P"), y: -0.1 },
+          { ...expectLegend("[", "{") },
+          { ...expectLegend("]", "}") },
+        ]);
+
+        expect(row3, "row3").toEqual([
+          { ...expectLegend("a", "A"), x: 0.3 },
+          { ...expectLegend("s", "S"), y: 0.1, rotation: 10 },
+          { ...expectLegend("d", "D"), y: 0.3, rotation: 10 },
+          { ...expectLegend("f", "F"), y: 0.5, rotation: 10, isHoming: true },
+          { ...expectLegend("g", "G"), y: 0.7, rotation: 10 },
+          { ...expectLegend("h", "H"), x: 1.15, y: 0.7, rotation: -10 },
+          { ...expectLegend("j", "J"), y: 0.5, rotation: -10, isHoming: true },
+          { ...expectLegend("k", "K"), y: 0.3, rotation: -10 },
+          { ...expectLegend("l", "L"), y: 0.1, rotation: -10 },
+          { ...expectLegend(";", ":") },
+          { ...expectLegend("'", '"') },
+        ]);
+
+        expect(row4, "row4").toEqual([
+          { ...expectLegend("z", "Z"), x: 0.45 },
+          { ...expectLegend("x", "X"), y: 0.25, rotation: 10 },
+          { ...expectLegend("c", "C"), y: 0.45, rotation: 10 },
+          { ...expectLegend("v", "V"), y: 0.65, rotation: 10 },
+          { ...expectLegend("b", "B"), y: 0.85, rotation: 10 },
+          { ...expectLegend("b", "B"), x: 0.7, y: 0.8, rotation: -10 },
+          { ...expectLegend("n", "N"), y: 0.6, rotation: -10 },
+          { ...expectLegend("m", "M"), y: 0.4, rotation: -10 },
+          { ...expectLegend(",", "<"), y: 0.2, rotation: -10 },
+          { ...expectLegend(".", ">") },
+          { ...expectLegend("/", "?") },
+        ]);
+
+        expect(row5, "row5").toEqual([
+          {
+            ...expectLegend(" "),
+            width: 3,
+            x: 2.3,
+            y: 0.7,
+            rotation: 10,
+          },
+          {
+            ...expectLegend(" "),
+            width: 3,
+            x: 1,
+            y: 0.7,
+            rotation: -10,
+            isLayoutIndicator: true,
+          },
+        ]);
+      });
+
+      it("converts qwerty alice all keys", () => {
+        const [row1, row2, row3, row4, row5] = convertLayoutToKeymap(
+          qwertyLayout as LayoutObject,
+          {
+            keymapStyle: "alice",
+            showAllKeys: true,
+          },
+        );
+
+        // Row1: Esc, ` added at start, BS added at end
+        expect(row1?.[0], "row1 first").toEqual({
+          ...expectLegend("Esc"),
+          x: 0.4,
+        });
+        expect(row1?.[1], "row1 second").toEqual({
+          ...expectLegend("`", "~"),
+          x: 0.15,
+        });
+        expect(row1?.[row1.length - 1], "row1 last").toEqual({
+          ...expectLegend("Backspace"),
+          width: 2,
+        });
+
+        // Row2: PgUp added at start, \ added at end
+        expect(row2?.[0], "row2 first").toEqual({
+          ...expectLegend("PgUp"),
+          x: 0.2,
+        });
+        expect(row2?.[row2.length - 1], "row2 last").toEqual({
+          ...expectLegend("\\", "|"),
+          width: 1.5,
+        });
+
+        // Row3: PgDn added at start, Enter added at end
+        expect(row3?.[0], "row3 first").toEqual({
+          ...expectLegend("PgDn"),
+        });
+        expect(row3?.[row3?.length - 1], "row3 last").toEqual({
+          ...expectLegend("Enter"),
+          width: 2.25,
+        });
+
+        // Row4: left Shift (with x:1), right Shift (width 1.75), fn added at end
+        expect(row4?.[0], "row4 first").toEqual({
+          ...expectLegend(Shift),
+          width: 2.25,
+          x: 1,
+        });
+        expect(row4?.[row4.length - 2], "row4 second to last").toEqual({
+          ...expectLegend(Shift),
+          width: 1.75,
+        });
+        expect(row4?.[row4.length - 1], "row4 last").toEqual({
+          ...expectLegend("fn"),
+        });
+
+        // Row5: Ctrl, Alt, space, Meta, space, Alt, Ctrl (with rotations)
+        expect(row5, "row5").toEqual([
+          {
+            ...expectLegend(Ctrl),
+            width: 1.5,
+            x: 1,
+          },
+          {
+            ...expectLegend(Alt),
+            width: 1.5,
+            x: 1,
+            y: 0.25,
+            rotation: 10,
+          },
+          {
+            ...expectLegend(" "),
+            width: 2,
+            x: 0,
+            y: 0.6,
+            rotation: 10,
+          },
+          {
+            ...expectLegend(Meta),
+            width: 1.5,
+            y: 0.9,
+            rotation: 10,
+          },
+          {
+            ...expectLegend(" "),
+            width: 2.75,
+            x: 0.65,
+            y: 0.7,
+            rotation: -10,
+            isLayoutIndicator: true,
+          },
+          {
+            ...expectLegend(Alt),
+            width: 1.5,
+            y: 0.3,
+            rotation: -10,
+          },
+          {
+            ...expectLegend(Ctrl),
+            width: 1.5,
+            x: 2.25,
+          },
+        ]);
+
+        // Also verify total counts are as expected with extra keys
+        expect(row1?.length, "row1 length").toBe(15);
+        expect(row2?.length, "row2 length").toBe(15);
+        expect(row3?.length, "row3 length").toBe(14);
+        expect(row4?.length, "row4 length").toBe(14);
+      });
+
+      it("converts qwertz alice", () => {
+        const [row1, row2, row3, row4, row5] = convertLayoutToKeymap(
+          qwertzLayout as LayoutObject,
+          {
+            keymapStyle: "alice",
+            showAllKeys: false,
+          },
+        );
+
+        expect(row1, "row1").toEqual([
+          { ...expectLegend("1", "!") },
+          { ...expectLegend("2", `"`), y: -0.1 },
+          { ...expectLegend("3", "§"), y: 0.1, rotation: 10 },
+          { ...expectLegend("4", "$"), y: 0.3, rotation: 10 },
+          { ...expectLegend("5", "%"), y: 0.5, rotation: 10 },
+          { ...expectLegend("6", "&"), y: 0.7, rotation: 10 },
+          { ...expectLegend("7", "/"), x: 0.15, y: 0.6, rotation: -10 },
+          { ...expectLegend("8", "("), y: 0.4, rotation: -10 },
+          { ...expectLegend("9", ")"), y: 0.2, rotation: -10 },
+          { ...expectLegend("0", "="), rotation: -10 },
+          { ...expectLegend("ß", "?"), y: -0.1 },
+          { ...expectLegend("´", "`") },
+        ]);
+
+        expect(row2, "row2").toEqual([
+          { ...expectLegend("q", "Q"), x: 0.15 },
+          { ...expectLegend("w", "W"), rotation: 10 },
+          { ...expectLegend("e", "E"), y: 0.2, rotation: 10 },
+          { ...expectLegend("r", "R"), y: 0.4, rotation: 10 },
+          { ...expectLegend("t", "T"), y: 0.6, rotation: 10 },
+          { ...expectLegend("z", "Z"), x: 0.75, y: 0.7, rotation: -10 },
+          { ...expectLegend("u", "U"), y: 0.5, rotation: -10 },
+          { ...expectLegend("i", "I"), y: 0.3, rotation: -10 },
+          { ...expectLegend("o", "O"), y: 0.1, rotation: -10 },
+          { ...expectLegend("p", "P"), y: -0.1 },
+          { ...expectLegend("ü", "Ü") },
+          { ...expectLegend("+", "*") },
+        ]);
+
+        expect(row3, "row3").toEqual([
+          { ...expectLegend("a", "A"), x: 0.3 },
+          { ...expectLegend("s", "S"), y: 0.1, rotation: 10 },
+          { ...expectLegend("d", "D"), y: 0.3, rotation: 10 },
+          { ...expectLegend("f", "F"), y: 0.5, rotation: 10, isHoming: true },
+          { ...expectLegend("g", "G"), y: 0.7, rotation: 10 },
+          { ...expectLegend("h", "H"), x: 1.15, y: 0.7, rotation: -10 },
+          { ...expectLegend("j", "J"), y: 0.5, rotation: -10, isHoming: true },
+          { ...expectLegend("k", "K"), y: 0.3, rotation: -10 },
+          { ...expectLegend("l", "L"), y: 0.1, rotation: -10 },
+          { ...expectLegend("ö", "Ö") },
+          { ...expectLegend("ä", "Ä") },
+          { ...expectLegend("#", "'") },
+        ]);
+
+        expect(row4, "row4").toEqual([
+          { ...expectLegend("y", "Y"), x: 0.45 },
+          { ...expectLegend("x", "X"), y: 0.25, rotation: 10 },
+          { ...expectLegend("c", "C"), y: 0.45, rotation: 10 },
+          { ...expectLegend("v", "V"), y: 0.65, rotation: 10 },
+          { ...expectLegend("b", "B"), y: 0.85, rotation: 10 },
+          { ...expectLegend("b", "B"), x: 0.7, y: 0.8, rotation: -10 },
+          { ...expectLegend("n", "N"), y: 0.6, rotation: -10 },
+          { ...expectLegend("m", "M"), y: 0.4, rotation: -10 },
+          { ...expectLegend(",", ";"), y: 0.2, rotation: -10 },
+          { ...expectLegend(".", ":") },
+          { ...expectLegend("-", "_") },
+        ]);
+
+        expect(row5, "row5").toEqual([
+          {
+            ...expectLegend(" "),
+            width: 3,
+            x: 2.3,
+            y: 0.7,
+            rotation: 10,
+          },
+          {
+            ...expectLegend(" "),
+            width: 3,
+            x: 1,
+            y: 0.7,
+            rotation: -10,
+            isLayoutIndicator: true,
+          },
+        ]);
+      });
+
+      it("converts qwertz alice all keys", () => {
+        const [row1, row2, row3, row4] = convertLayoutToKeymap(
+          qwertzLayout as LayoutObject,
+          {
+            keymapStyle: "alice",
+            showAllKeys: true,
+          },
+        );
+
+        expect(row2?.[row2.length - 1], "row2 last").toEqual({
+          ...expectLegend("Enter"),
+          height: 2,
+          width: 1.5,
+          align: "top",
+        });
+
+        // Row4: Shift added at start and end
+        expect(row4?.[0], "row4 first").toEqual({
+          ...expectLegend(Shift),
+          width: 1.25,
+          x: 1,
+        });
+
+        expect(row4?.[row4.length - 2], "row4 second last").toEqual({
+          ...expectLegend(Shift),
+          width: 1.75,
+        });
+
+        //fn key
+        expect(row4?.[row4.length - 1], "row4 second last").toEqual({
+          ...expectLegend("fn"),
+        });
+
+        // Also verify total counts are as expected with extra keys
+        expect(row1?.length, "row1 length").toBe(15);
+        expect(row2?.length, "row2 length").toBe(15);
+        expect(row3?.length, "row3 length").toBe(14);
+        expect(row4?.length, "row4 length").toBe(15);
+      });
+    });
+  });
+});
diff --git a/frontend/__tests__/root/config-metadata.spec.ts b/frontend/__tests__/root/config-metadata.spec.ts
index ac227685de5d..eac0365d5c43 100644
--- a/frontend/__tests__/root/config-metadata.spec.ts
+++ b/frontend/__tests__/root/config-metadata.spec.ts
@@ -347,14 +347,14 @@ describe("ConfigMeta", () => {
           expected: { keymapMode: "static" },
         },
       ],
-      keymapShowTopRow: [
+      keymapLayoutStyle: [
         {
-          value: "always",
+          value: "minimal_numrow",
           given: { keymapMode: "react" },
           expected: { keymapMode: "react" },
         },
         {
-          value: "always",
+          value: "minimal_numrow",
           given: { keymapMode: "off" },
           expected: { keymapMode: "static" },
         },
diff --git a/frontend/__tests__/tsconfig.json b/frontend/__tests__/tsconfig.json
index abc9b7a299ae..506c2728d4f8 100644
--- a/frontend/__tests__/tsconfig.json
+++ b/frontend/__tests__/tsconfig.json
@@ -5,10 +5,12 @@
     "module": "ESNext",
     "noEmit": true,
     "jsx": "preserve",
-    "jsxImportSource": "solid-js"
+    "jsxImportSource": "solid-js",
+    "types": ["node"]
   },
   "files": ["vitest.d.ts"],
   "include": [
+    "./__harness__/**/*.ts",
     "./**/*.spec.ts",
     "./**/*.spec.tsx",
     "./**/*.jsdom-spec.ts",
diff --git a/frontend/src/html/pages/test.html b/frontend/src/html/pages/test.html
index 55cdb2531f42..55ea01f92bc1 100644
--- a/frontend/src/html/pages/test.html
+++ b/frontend/src/html/pages/test.html
@@ -64,8 +64,7 @@
     </div>
 
     <div id="compositionDisplay"></div>
-
-    <div id="keymap" class="hidden"></div>
+    <mount data-component="keymap"></mount>
 
     <button
       id="restartTestButton"
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index 5b53a661e173..bc08a6267fa6 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -17,8 +17,8 @@
 
 @layer custom-styles {
   @import "buttons", "ads", "test-activity", "animations", "caret",
-    "commandline", "core", "fonts", "inputs", "keymap", "monkey", "popups",
-    "scroll", "test", "loading", "media-queries";
+    "commandline", "core", "fonts", "inputs", "monkey", "popups", "scroll",
+    "test", "loading", "media-queries";
 
   .chartCanvas {
     width: 100% !important;
diff --git a/frontend/src/styles/keymap.scss b/frontend/src/styles/keymap.scss
deleted file mode 100644
index 30ce0988f5b4..000000000000
--- a/frontend/src/styles/keymap.scss
+++ /dev/null
@@ -1,546 +0,0 @@
-#keymap {
-  font-size: 1rem;
-  display: grid;
-  grid-template-rows: 1fr 1fr 1fr;
-  justify-content: center;
-  white-space: nowrap;
-  // height: 140px;
-  gap: 0.25rem;
-  margin-top: 1rem;
-  user-select: none;
-
-  .row {
-    height: 2rem;
-    gap: 0.25rem;
-  }
-
-  .keymapKey {
-    display: flex;
-    background-color: var(--sub-alt-color);
-    color: var(--sub-color);
-    border-radius: var(--roundness);
-    // border: 0.05rem solid;
-    // border-color: var(--sub-color);
-    text-align: center;
-    justify-content: center;
-    align-items: center;
-    width: 2rem;
-    height: 2rem;
-    position: relative;
-
-    .bump {
-      width: 0.5em;
-      height: 0.1em;
-      background: var(--bg-color);
-      position: absolute;
-      border-radius: 0.1em;
-      // margin-top: 1.5rem;
-      bottom: 0.2em;
-    }
-
-    &.activeKey {
-      color: var(--bg-color);
-      background-color: var(--main-color);
-      border-color: var(--main-color);
-
-      .bump {
-        background: var(--bg-color);
-      }
-    }
-
-    &.layoutIndicator {
-      width: 100%;
-      &:hover {
-        cursor: pointer;
-        color: var(--main-color);
-      }
-    }
-
-    &.keySpace.right {
-      width: 100%;
-      opacity: 0;
-    }
-
-    &.flash {
-      animation: flashKey 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-    }
-  }
-
-  .hiddenKey,
-  .hideKey {
-    opacity: 0;
-  }
-
-  .keymapSplitSpacer,
-  .keymapStaggerSplitSpacer,
-  .keymapMatrixSplitSpacer {
-    display: none;
-  }
-
-  .r1 {
-    display: grid;
-    grid-template-columns: 0fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-  }
-
-  .r2 {
-    display: grid;
-    grid-template-columns: 0.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1rem;
-  }
-
-  .r3 {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-  }
-
-  .r4 {
-    display: grid;
-    grid-template-columns: 0.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2.75fr;
-  }
-
-  .r5 {
-    display: grid;
-    grid-template-columns: 3.5fr 6fr 3.5fr;
-    font-size: 1rem;
-    // &.matrixSpace {
-    //   // grid-template-columns: 6.75fr 1.9fr 6.75fr;
-    //   grid-template-columns: 6.9fr 4.6fr 6.9fr; // wider spacebar
-    // }
-    // &.splitSpace {
-    //   // grid-template-columns: 6.75fr 1.9fr 6.75fr;
-    //   grid-template-columns: 4fr 7.5fr 4fr;
-    // }
-    .keySpace {
-      // since we can potentially have alphas in r5,
-      // we keep font-size: 1rem; for alphas to look the same as other rows,
-      // but reduce it again to 0.5rem for space, so layout name fits.
-      font-size: 0.5rem;
-    }
-
-    &[data-row5-has-alpha="true"] {
-      // space-alpha
-      &[data-row5-grid="3-1"] {
-        grid-template-columns: 4fr 4fr 1fr 4fr;
-      }
-
-      // alpha-space
-      &[data-row5-grid="1-3"] {
-        grid-template-columns: 4fr 1fr 4fr 4fr;
-      }
-    }
-  }
-  &.matrix {
-    .r1,
-    .r2,
-    .r3,
-    .r4 {
-      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-    }
-
-    .r5 {
-      grid-template-columns: 1fr 3fr 4fr 3fr 1fr;
-
-      &[data-row5-has-alpha="true"] {
-        // space-alpha
-        &[data-row5-grid="3-1"] {
-          grid-template-columns: 1fr 2fr 3fr 1fr 5fr;
-        }
-
-        // alpha-space
-        &[data-row5-grid="1-3"] {
-          grid-template-columns: 2fr 3fr 1fr 3fr 3fr;
-        }
-      }
-    }
-  }
-  &.split {
-    .keymapSplitSpacer {
-      display: block;
-    }
-    .keymapStaggerSplitSpacer {
-      display: block;
-    }
-
-    .r1 {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1.5fr;
-    }
-
-    .r2 {
-      display: grid;
-      grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-    }
-
-    .r3 {
-      display: grid;
-      grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1.5fr;
-    }
-
-    .r4 {
-      display: grid;
-      grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
-    }
-    .r5 {
-      grid-template-columns: 5fr 3fr 1fr 3fr 4.5fr;
-
-      &[data-row5-has-alpha="true"] {
-        // space-alpha
-        &[data-row5-grid="3-1"] {
-          grid-template-columns: 5fr 3fr 1fr 1fr 6.5fr;
-        }
-
-        // alpha-space
-        &[data-row5-grid="1-3"] {
-          grid-template-columns: 7fr 1fr 1fr 3fr 4.5fr;
-        }
-      }
-    }
-    .keySpace.right {
-      opacity: 1;
-    }
-  }
-  &.split_matrix {
-    .keymapSplitSpacer {
-      display: block;
-      width: 2rem;
-      height: 2rem;
-    }
-    .keymapStaggerSplitSpacer {
-      display: none;
-    }
-    .keymapMatrixSplitSpacer {
-      display: block;
-      width: 2rem;
-      height: 2rem;
-    }
-    .r1,
-    .r2,
-    .r3,
-    .r4 {
-      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-    }
-
-    .r5 {
-      grid-template-columns: 1fr 2fr 3fr 1fr 3fr 2fr 1fr;
-
-      &[data-row5-has-alpha="true"] {
-        // space-alpha
-        &[data-row5-grid="3-1"] {
-          grid-template-columns: 2fr 1fr 3fr 1fr 1fr 2fr 3fr;
-        }
-
-        // alpha-space
-        &[data-row5-grid="1-3"] {
-          grid-template-columns: 4fr 1fr 1fr 1fr 3fr 1fr 2fr;
-        }
-      }
-    }
-    .keySpace.right {
-      opacity: 1;
-    }
-  }
-  &.steno,
-  &.steno_matrix {
-    .r2,
-    .r3 {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-    }
-    .r4 {
-      display: grid;
-      grid-template-columns: 3.25fr 1fr 1fr 1fr 1fr 1fr 3.25fr;
-    }
-    &.steno {
-      .r2,
-      .r3 {
-        display: grid;
-        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-      }
-      .r4 {
-        display: grid;
-        grid-template-columns: 2.6fr 1fr 1fr 0.1fr 1fr 1fr 3.65fr;
-        .keymapSplitSpacer {
-          display: block;
-        }
-      }
-      .r2 .keymapKey:nth-child(1),
-      .r2 .keymapKey:nth-child(5) {
-        height: 4.25rem;
-      }
-      .r3 .keymapKey:nth-child(1),
-      .r3 .keymapKey:nth-child(5) {
-        visibility: hidden;
-      }
-    }
-    &.steno_matrix {
-      .keymapSplitSpacer {
-        display: block;
-      }
-    }
-  }
-  &.alice {
-    .keymapSplitSpacer {
-      display: block;
-    }
-    .r4 .keymapSplitSpacer {
-      display: none;
-    }
-    .keymapStaggerSplitSpacer {
-      display: block;
-    }
-
-    .r1 {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1.5fr;
-      .keymapKey:nth-child(2) {
-        //1
-        margin-left: 45%;
-      }
-      .keymapKey:nth-child(3) {
-        //2
-        margin-top: -2px;
-        margin-left: 45%;
-      }
-      .keymapKey:nth-child(4),
-      .keymapKey:nth-child(5),
-      .keymapKey:nth-child(6),
-      .keymapKey:nth-child(7) {
-        //3456
-        transform: rotate(10deg);
-        margin-left: 45%;
-      }
-      .keymapKey:nth-child(4) {
-        //3
-        margin-top: 3px;
-      }
-      .keymapKey:nth-child(5) {
-        //4
-        margin-top: 10px;
-      }
-      .keymapKey:nth-child(6) {
-        //5
-        margin-top: 17px;
-      }
-      .keymapKey:nth-child(7) {
-        //6
-        margin-top: 24px;
-      }
-      .keymapKey:nth-child(9),
-      .keymapKey:nth-child(10),
-      .keymapKey:nth-child(11),
-      .keymapKey:nth-child(12) {
-        //7890
-        transform: rotate(-10deg);
-        margin-left: -48%;
-      }
-      .keymapKey:nth-child(12) {
-        //7
-        margin-top: -1px;
-      }
-      .keymapKey:nth-child(11) {
-        //8
-        margin-top: 6px;
-      }
-      .keymapKey:nth-child(10) {
-        //9
-        margin-top: 13px;
-      }
-      .keymapKey:nth-child(9) {
-        //10
-        margin-top: 20px;
-      }
-      .keymapKey:nth-child(13),
-      .keymapKey:nth-child(14) {
-        //-=
-        margin-left: -40%;
-      }
-    }
-
-    .r2 {
-      display: grid;
-      grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-      .keymapKey:nth-child(2) {
-        //Q
-        margin-left: 20%;
-      }
-      .keymapKey:nth-child(3),
-      .keymapKey:nth-child(4),
-      .keymapKey:nth-child(5),
-      .keymapKey:nth-child(6) {
-        //WERT
-        transform: rotate(10deg);
-        margin-left: 45%;
-      }
-      .keymapKey:nth-child(4),
-      .keymapKey:nth-child(10) {
-        //EI
-        margin-top: 8px;
-      }
-      .keymapKey:nth-child(5),
-      .keymapKey:nth-child(9) {
-        //RU
-        margin-top: 15px;
-      }
-      .keymapKey:nth-child(6),
-      .keymapKey:nth-child(8) {
-        //TY
-        margin-top: 22px;
-      }
-
-      .keymapKey:nth-child(8),
-      .keymapKey:nth-child(9),
-      .keymapKey:nth-child(10),
-      .keymapKey:nth-child(11) {
-        //YUIO
-        transform: rotate(-10deg);
-        margin-left: -12%;
-      }
-    }
-
-    .r3 {
-      display: grid;
-      grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1.5fr;
-      .keymapKey:nth-child(2) {
-        //A
-        margin-left: -5px;
-      }
-      .keymapKey:nth-child(3),
-      .keymapKey:nth-child(4),
-      .keymapKey:nth-child(5),
-      .keymapKey:nth-child(6) {
-        //SDFG
-        margin-left: -1px;
-        transform: rotate(10deg);
-      }
-      .keymapKey:nth-child(4),
-      .keymapKey:nth-child(10) {
-        //DK
-        margin-top: 8px;
-      }
-      .keymapKey:nth-child(5),
-      .keymapKey:nth-child(9) {
-        //FJ
-        margin-top: 15px;
-      }
-      .keymapKey:nth-child(6),
-      .keymapKey:nth-child(8) {
-        //GH
-        margin-top: 22px;
-      }
-
-      .keymapKey:nth-child(8),
-      .keymapKey:nth-child(9),
-      .keymapKey:nth-child(10),
-      .keymapKey:nth-child(11) {
-        //HJKL
-        transform: rotate(-10deg);
-        margin-left: -25%;
-      }
-    }
-
-    .r4 {
-      display: grid;
-      grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
-      .keymapKey:nth-child(2) {
-        margin-left: -18px;
-      }
-      .keymapKey:nth-child(3) {
-        //Z
-        margin-left: -15px;
-      }
-      .keymapKey:nth-child(4),
-      .keymapKey:nth-child(5),
-      .keymapKey:nth-child(6),
-      .keymapKey:nth-child(7) {
-        //XCVB
-        margin-left: -11px;
-        transform: rotate(10deg);
-        margin-top: 2px;
-      }
-      .keymapKey:nth-child(12) {
-        //,
-        margin-top: 4px;
-        margin-left: -5px;
-      }
-      .keymapKey:nth-child(5),
-      .keymapKey:nth-child(11) {
-        //CM
-        margin-top: 10px;
-      }
-      .keymapKey:nth-child(6),
-      .keymapKey:nth-child(10) {
-        //VN
-        margin-top: 18px;
-      }
-      .keymapKey:nth-child(7) {
-        //B
-        margin-top: 24px;
-      }
-
-      .keymapKey:nth-child(10),
-      .keymapKey:nth-child(11),
-      .keymapKey:nth-child(12) {
-        //NM,
-        transform: rotate(-10deg);
-        margin-left: -25%;
-      }
-    }
-    .r5 {
-      grid-template-columns: 5fr 3fr 1fr 3fr 4.5fr;
-
-      // rotation/position of r5 keys moved under .r5 styles
-      // and made generic to left/right to account for alphas
-      div.keymapKey.left {
-        transform: rotate(10deg);
-        margin-left: -5%;
-        margin-top: 21%;
-      }
-      div.keymapKey.right {
-        opacity: 1;
-        transform: rotate(-10deg);
-        margin-left: -33%;
-        margin-top: 20%;
-      }
-
-      &[data-row5-has-alpha="true"] {
-        // space-alpha
-        &[data-row5-grid="3-1"] {
-          grid-template-columns: 5fr 3fr 1fr 3fr 4.5fr;
-
-          div.keymapKey.right {
-            margin-left: -30%;
-            margin-top: 25%;
-          }
-        }
-
-        // alpha-space
-        &[data-row5-grid="1-3"] {
-          grid-template-columns: 5fr 3fr 1fr 3fr 4.5fr;
-
-          div.keymapKey.left {
-            margin-left: 50%;
-            margin-top: 25%;
-          }
-        }
-      }
-    }
-    div#KeyBackslash.keymapKey {
-      visibility: hidden;
-    }
-
-    div.extraKey {
-      margin-top: 25px;
-      transform: rotate(-10deg) !important;
-      margin-left: -7px !important;
-      display: flex;
-      background-color: var(--sub-alt-color);
-      color: var(--sub-color);
-      border-radius: var(--roundness);
-      text-align: center;
-      justify-content: center;
-      align-items: center;
-      width: 2rem;
-      height: 2rem;
-      position: relative;
-    }
-  }
-}
diff --git a/frontend/src/styles/media-queries-brown.scss b/frontend/src/styles/media-queries-brown.scss
index f4bfb5a4839f..12b81d2a5a25 100644
--- a/frontend/src/styles/media-queries-brown.scss
+++ b/frontend/src/styles/media-queries-brown.scss
@@ -17,17 +17,6 @@
       }
     }
   }
-  #keymap .row {
-    height: 1rem;
-    gap: 0.1rem;
-  }
-  #keymap .keymapKey,
-  #keymap.split_matrix .keymapSplitSpacer {
-    width: 1rem;
-    height: 1rem;
-    border-radius: 0.3rem;
-    font-size: 0.5rem;
-  }
   .testActivity {
     display: none;
   }
diff --git a/frontend/src/styles/media-queries-purple.scss b/frontend/src/styles/media-queries-purple.scss
index 66b689896cee..c6dc189eb372 100644
--- a/frontend/src/styles/media-queries-purple.scss
+++ b/frontend/src/styles/media-queries-purple.scss
@@ -56,16 +56,6 @@
       }
     }
   }
-  #keymap .row {
-    height: 1.25rem;
-  }
-  #keymap .keymapKey,
-  #keymap.split_matrix .keymapSplitSpacer {
-    width: 1.25rem;
-    height: 1.25rem;
-    border-radius: 0.3rem;
-    font-size: 0.6rem;
-  }
 
   .popupWrapper .modal,
   .modalWrapper .modal {
diff --git a/frontend/src/ts/commandline/commandline-metadata.ts b/frontend/src/ts/commandline/commandline-metadata.ts
index 71b01937d653..123ac3a323cb 100644
--- a/frontend/src/ts/commandline/commandline-metadata.ts
+++ b/frontend/src/ts/commandline/commandline-metadata.ts
@@ -669,9 +669,10 @@ export const commandlineConfigMetadata: CommandlineConfigMetadataObject = {
       afterExec: () => TestLogic.restart(),
     },
   },
-  keymapShowTopRow: {
+  keymapLayoutStyle: {
     subgroup: {
       options: "fromSchema",
+      display: replaceUnderscoresWithSpaces,
     },
     alias: "keyboard",
   },
diff --git a/frontend/src/ts/commandline/lists.ts b/frontend/src/ts/commandline/lists.ts
index 6780991f828f..ed5e927d8344 100644
--- a/frontend/src/ts/commandline/lists.ts
+++ b/frontend/src/ts/commandline/lists.ts
@@ -184,7 +184,7 @@ export const commands: CommandsSubgroup = {
       "keymapLegendStyle",
       "keymapSize",
       "keymapLayout",
-      "keymapShowTopRow",
+      "keymapLayoutStyle",
     ),
 
     //theme
diff --git a/frontend/src/ts/components/common/Button.tsx b/frontend/src/ts/components/common/Button.tsx
index b7611ff3b20d..dafd7f7f7e5a 100644
--- a/frontend/src/ts/components/common/Button.tsx
+++ b/frontend/src/ts/components/common/Button.tsx
@@ -18,6 +18,7 @@ type BaseProps = {
   onMouseLeave?: (e: MouseEvent) => void;
   dataset?: Record<string, string>;
   active?: boolean;
+  tabIndex?: number;
 };
 
 export type ButtonProps = BaseProps & {
@@ -98,6 +99,7 @@ export function Button(props: ButtonProps | AnchorProps): JSXElement {
           disabled={props.disabled ?? false}
           data-ui-variant={variant()}
           data-ui-element="button"
+          tabIndex={props.tabIndex ?? 0}
           {...props.dataset}
         >
           {content}
diff --git a/frontend/src/ts/components/mount.tsx b/frontend/src/ts/components/mount.tsx
index 1c83bf273b5d..d6ca2b10e06d 100644
--- a/frontend/src/ts/components/mount.tsx
+++ b/frontend/src/ts/components/mount.tsx
@@ -22,6 +22,7 @@ import { LoginPage } from "./pages/login/LoginPage";
 import { ProfilePage } from "./pages/profile/ProfilePage";
 import { ProfileSearchPage } from "./pages/profile/ProfileSearchPage";
 import { SettingsPage } from "./pages/settings/SettingsPage";
+import { Keymap } from "./pages/test/Keymap";
 import { TestModesNotice } from "./pages/test/modes-notice/TestModesNotice";
 import { TestConfig } from "./pages/test/TestConfig";
 import { Popups } from "./popups/Popups";
@@ -48,6 +49,7 @@ const components: Record<string, () => JSXElement> = {
   friendspage: () => <FriendsPage />,
   notfoundpage: () => <NotFoundPage />,
   accountsettingspage: () => <AccountSettingsPage />,
+  keymap: () => <Keymap />,
 };
 
 function mountToMountpoint(name: string, component: () => JSXElement): void {
diff --git a/frontend/src/ts/components/pages/settings/SettingsPage.tsx b/frontend/src/ts/components/pages/settings/SettingsPage.tsx
index df344727ae74..04f43281a20a 100644
--- a/frontend/src/ts/components/pages/settings/SettingsPage.tsx
+++ b/frontend/src/ts/components/pages/settings/SettingsPage.tsx
@@ -165,7 +165,7 @@ export function SettingsPage(): JSXElement {
               <KeymapLayout />
               <AutoSetting key="keymapStyle" wide />
               <AutoSetting key="keymapLegendStyle" wide />
-              <AutoSetting key="keymapShowTopRow" wide />
+              <AutoSetting key="keymapLayoutStyle" wide />
               <KeymapSize />
             </Show>
           </Section>
diff --git a/frontend/src/ts/components/pages/test/Keymap.tsx b/frontend/src/ts/components/pages/test/Keymap.tsx
new file mode 100644
index 000000000000..14bce204bfba
--- /dev/null
+++ b/frontend/src/ts/components/pages/test/Keymap.tsx
@@ -0,0 +1,287 @@
+import { LayoutObject } from "@monkeytype/schemas/layouts";
+import { createEffect, createMemo, createSignal, For, Show } from "solid-js";
+
+import { getConfig } from "../../../config/store";
+import { showCommandLineForConfig } from "../../../states/core";
+import { getModifierState, isCapsLockOn } from "../../../states/modifiers";
+import {
+  FlashEntry,
+  getKeymapFlashState,
+  getKeymapHighlightKey,
+  getKeymapLayout,
+  keymapLayoutObject,
+  setKeymapFlashState,
+  wordsHaveNumbers,
+} from "../../../states/test";
+import { getTheme } from "../../../states/theme";
+import { cn } from "../../../utils/cn";
+import { applyReducedMotion, isMacLike } from "../../../utils/misc";
+import { Anime } from "../../common/anime";
+import { Button } from "../../common/Button";
+import { convertLayoutToKeymap } from "./keymapConverter";
+import { KeyboardDefinition, KeyDefinition } from "./keymapLayouts";
+
+export function Keymap() {
+  return (
+    <Show when={getConfig.keymapMode !== "off" && keymapLayoutObject()}>
+      <Keyboard
+        displayName={getKeymapLayout().layoutNameDisplayString}
+        layoutData={keymapLayoutObject() as LayoutObject}
+      />
+    </Show>
+  );
+}
+
+function Keyboard(props: { displayName: string; layoutData: LayoutObject }) {
+  const layer = createMemo(() => {
+    const { alt, shift } = getModifierState();
+    switch (getConfig.keymapLegendStyle) {
+      case "blank":
+        return -1;
+      case "lowercase":
+        return 0;
+      case "uppercase":
+        return 1;
+      case "dynamic": {
+        if (shift && alt) {
+          return 3;
+        } else if (alt) {
+          return 2;
+        } else if (shift || isCapsLockOn()) {
+          return 1;
+        }
+        return 0;
+      }
+      default:
+        return 0;
+    }
+  });
+
+  const showFirstRow = createMemo(
+    () =>
+      (wordsHaveNumbers() && getConfig.keymapMode === "next") ||
+      getConfig.keymapLayoutStyle === "full" ||
+      getConfig.keymapLayoutStyle === "minimal_numrow" ||
+      (getConfig.keymapLayoutStyle === "minimal_layout" &&
+        props.layoutData.keymapShowTopRow),
+  );
+
+  const keyboardDef = createMemo(() =>
+    convertLayoutToKeymap(props.layoutData, {
+      keymapStyle: getConfig.keymapStyle,
+      showAllKeys:
+        getConfig.keymapLayoutStyle === "full" ||
+        props.layoutData.matrixShowRightColumn === true,
+    }),
+  );
+
+  return (
+    <div
+      data-ui-element="keymap"
+      class="flex w-full flex-col items-center py-8 text-sm text-sub"
+      style={{
+        zoom: getConfig.keymapSize,
+      }}
+    >
+      <Show when={keyboardDef()} fallback={<div>Loading...</div>}>
+        <KeyboardDefinitionRenderer
+          keyboardDef={keyboardDef()}
+          layer={layer()}
+          showFirstRow={showFirstRow()}
+          flashState={getKeymapFlashState}
+        />
+      </Show>
+    </div>
+  );
+}
+
+function KeyboardDefinitionRenderer(props: {
+  keyboardDef: KeyboardDefinition;
+  layer: number;
+  showFirstRow: boolean;
+  flashState: Record<string, FlashEntry | undefined>;
+}) {
+  return (
+    <div class="w-fit">
+      <For each={props.keyboardDef}>
+        {(keys, rowNum) => (
+          <Show when={rowNum() !== 0 || props.showFirstRow}>
+            <div class="flex h-8 flex-row">
+              <For each={keys}>
+                {(key) => {
+                  const label = () => {
+                    const layer =
+                      rowNum() === 0 && isMacLike() && isCapsLockOn()
+                        ? props.layer - 1
+                        : props.layer;
+                    return key.legends[layer] ?? "";
+                  };
+                  const flashEntry = () =>
+                    key.legends
+                      .map((legend) => props.flashState[legend])
+                      .find((it) => it !== undefined);
+                  return (
+                    <Key {...key} label={label()} flashEntry={flashEntry} />
+                  );
+                }}
+              </For>
+            </div>
+          </Show>
+        )}
+      </For>
+    </div>
+  );
+}
+
+function Key(
+  props: {
+    label: string;
+    flashEntry: () => FlashEntry | undefined;
+  } & KeyDefinition,
+) {
+  const isSteno = () =>
+    getConfig.keymapStyle === "steno" ||
+    getConfig.keymapStyle === "steno_matrix";
+
+  // Steno keys never flash.
+  const flashInfo = createMemo(() => {
+    if (isSteno() || getConfig.keymapMode !== "react") {
+      return { tick: 0, correct: true };
+    }
+
+    const entry = props.flashEntry();
+    return { tick: entry?.tick ?? 0, correct: entry?.correct ?? true };
+  });
+
+  const isNext = createMemo(
+    () =>
+      getConfig.keymapMode === "next" &&
+      !isSteno() &&
+      props.legends?.some((legend) => legend === getKeymapHighlightKey()),
+  );
+
+  const fadeDuration = applyReducedMotion(250);
+
+  const keyMatchesHighlight = createMemo(() =>
+    props.legends?.some((legend) => legend === getKeymapHighlightKey()),
+  );
+
+  // Fade when leaving "next" mode
+  const [isFading, setIsFading] = createSignal(false);
+  let prevKeymapMode = getConfig.keymapMode;
+  let prevKeyWasHighlighted = false;
+  createEffect(() => {
+    const mode = getConfig.keymapMode;
+    const isStenoMode = isSteno();
+    const keyWasHighlighted = keyMatchesHighlight() && !isStenoMode;
+
+    if (prevKeymapMode === "next" && mode !== "next" && prevKeyWasHighlighted) {
+      setIsFading(true);
+    }
+    prevKeymapMode = mode;
+    prevKeyWasHighlighted = keyWasHighlighted;
+  });
+
+  const baseKeyBgColor = () => {
+    if (isFading()) {
+      return getTheme().main;
+    }
+    return isNext() ? getTheme().main : getTheme().subAlt;
+  };
+
+  const baseKeyColor = () => {
+    if (isFading()) {
+      return getTheme().bg;
+    }
+    return isNext() ? getTheme().bg : getTheme().sub;
+  };
+
+  const animKeyBgColor = createMemo(() => {
+    if (isFading()) {
+      return [getTheme().main, getTheme().subAlt];
+    }
+    if (flashInfo().tick === 0) {
+      return [isNext() ? getTheme().main : getTheme().subAlt];
+    }
+    return [
+      flashInfo().correct ? getTheme().main : getTheme().error,
+      isNext() ? getTheme().main : getTheme().subAlt,
+    ];
+  });
+
+  const animKeyColor = createMemo(() => {
+    if (isFading()) {
+      return [getTheme().bg, getTheme().sub];
+    }
+    if (flashInfo().tick === 0) {
+      return [isNext() ? getTheme().bg : getTheme().sub];
+    }
+    return [getTheme().bg, isNext() ? getTheme().bg : getTheme().sub];
+  });
+
+  const animDuration = createMemo(() => {
+    if (isFading()) return fadeDuration;
+    if (flashInfo().tick === 0) return 0;
+    return fadeDuration;
+  });
+
+  return (
+    <Anime
+      class={cn(
+        "relative flex justify-center rounded border-2 border-bg bg-sub-alt",
+        (props.label ?? "").length >= 2 && "text-em-xs",
+        {
+          "items-center": props.align !== "top",
+          "items-start pt-1.5": props.align === "top",
+        },
+      )}
+      style={{
+        "--keybgcolor": baseKeyBgColor(),
+        "--keycolor": baseKeyColor(),
+        height: `${(props.height ?? 1) * 2}rem`,
+        width: `${(props.width ?? 1) * 2}rem`,
+        "margin-left": `${(props.x ?? 0) * 2}rem`,
+        "margin-top": `${(props.y ?? 0) * 2}rem`,
+        transform:
+          props.rotation !== undefined ? `rotate(${props.rotation}deg)` : "",
+        "background-color": "var(--keybgcolor)",
+        color: "var(--keycolor)",
+      }}
+      animation={{
+        "--keybgcolor": animKeyBgColor(),
+        "--keycolor": animKeyColor(),
+        duration: animDuration(),
+        onComplete: () => {
+          props.legends.forEach((l) => setKeymapFlashState(l, undefined));
+          if (isFading()) {
+            setIsFading(false);
+          }
+        },
+      }}
+    >
+      <Show
+        when={props.isLayoutIndicator}
+        fallback={
+          <>
+            {props.label}
+            <Show when={props.isHoming}>
+              <div
+                class={cn(
+                  "bg-em-xs absolute bottom-0.75 left-auto h-0.5 w-2 rounded bg-bg",
+                )}
+              ></div>
+            </Show>
+          </>
+        }
+      >
+        <Button
+          variant="text"
+          class="text-[0.5em] [--themable-button-bg:transparent] [--themable-button-text:var(--keycolor)]"
+          text={getKeymapLayout().layoutNameDisplayString}
+          onClick={() => showCommandLineForConfig("keymapLayout")}
+          tabIndex={-1}
+        />
+      </Show>
+    </Anime>
+  );
+}
diff --git a/frontend/src/ts/components/pages/test/keymapConverter.ts b/frontend/src/ts/components/pages/test/keymapConverter.ts
new file mode 100644
index 000000000000..d55d325655ff
--- /dev/null
+++ b/frontend/src/ts/components/pages/test/keymapConverter.ts
@@ -0,0 +1,100 @@
+import { KeymapStyle } from "@monkeytype/schemas/configs";
+import { KeyLegends, LayoutObject } from "@monkeytype/schemas/layouts";
+
+import {
+  KeyboardDefinition,
+  KeyDefinition,
+  KeymapLayout,
+  keymapLayouts,
+} from "./keymapLayouts";
+
+type ConvertOptions = {
+  keymapStyle: KeymapStyle;
+  showAllKeys: boolean;
+};
+
+export function convertLayoutToKeymap(
+  layout: LayoutObject,
+  options: ConvertOptions,
+): KeyboardDefinition {
+  const keymapLayout = keymapLayouts[options.keymapStyle]?.[layout.type];
+
+  if (keymapLayout === undefined) {
+    throw new Error(
+      `not supported style ${options.keymapStyle} and layout type ${layout.type}`,
+    );
+  }
+
+  return convert({
+    legends: layout.keys,
+    keymap: keymapLayout,
+    convertOptions: options,
+  });
+}
+
+function convert(options: {
+  legends: LayoutObject["keys"];
+  keymap: KeymapLayout;
+  convertOptions: ConvertOptions;
+}): KeyboardDefinition {
+  const isShowAllKeys = options.convertOptions.showAllKeys ?? false;
+
+  return options.keymap.map((keys) =>
+    keys
+      .map((keyDef) => {
+        const layoutLegend =
+          keyDef.layoutPosition?.row &&
+          options.legends[keyDef.layoutPosition.row]?.[
+            keyDef.layoutPosition.col
+          ];
+
+        const legends = keyDef.isLayoutIndicator
+          ? buildLegends(" ")
+          : buildLegends(keyDef.legend ?? layoutLegend);
+
+        if (keyDef.isExtraKey && !isShowAllKeys) {
+          return undefined;
+        }
+
+        const final = {
+          ...keyDef,
+          ...(isShowAllKeys ? keyDef.extraKeysOverride : {}),
+        };
+
+        return {
+          legends,
+          ...(final.height !== undefined ? { height: final.height } : {}),
+          ...(final.width !== undefined ? { width: final.width } : {}),
+          ...(final.x !== undefined ? { x: final.x } : {}),
+          ...(final.y !== undefined ? { y: final.y } : {}),
+          ...(final.rotation !== undefined ? { rotation: final.rotation } : {}),
+          ...(final.isLayoutIndicator === true
+            ? { isLayoutIndicator: true }
+            : {}),
+          ...(final.isHoming === true ? { isHoming: true } : {}),
+          ...(final.align !== undefined ? { align: final.align } : {}),
+        } satisfies KeyDefinition;
+      })
+      //filter skipped keys
+      .filter((it) => it !== undefined),
+  );
+}
+
+const emptyLegends = ["", "", "", ""];
+function buildLegends(legends: string | KeyLegends | undefined): KeyLegends {
+  if (legends === undefined) return emptyLegends;
+  if (typeof legends === "string") {
+    return new Array<string>(4).fill(legends);
+  }
+
+  switch (legends.length) {
+    case 1:
+      return [legends[0] as string, legends[0] as string, "", ""];
+    case 2:
+      return [...legends, "", ""];
+    case 3:
+      return [...legends, ""];
+    default:
+      return legends;
+  }
+}
diff --git a/frontend/src/ts/components/pages/test/keymapLayouts.ts b/frontend/src/ts/components/pages/test/keymapLayouts.ts
new file mode 100644
index 000000000000..9350e38f2327
--- /dev/null
+++ b/frontend/src/ts/components/pages/test/keymapLayouts.ts
@@ -0,0 +1,520 @@
+import { KeymapStyle } from "@monkeytype/schemas/configs";
+import { LayoutObject } from "@monkeytype/schemas/layouts";
+import {
+  FormatDisplayOptions,
+  formatForDisplay,
+} from "@tanstack/solid-hotkeys";
+import { OneOf } from "../../../utils/types";
+
+const options: FormatDisplayOptions = {};
+export const Ctrl = formatForDisplay("Ctrl", options);
+export const Shift = formatForDisplay("Shift", { platform: "mac" });
+export const Alt = formatForDisplay("Alt", options);
+export const Hyper = "Monke";
+export const HyperShort = "";
+export const Backspace = "Backspace";
+export const BackspaceShort = formatForDisplay("Backspace", options);
+export const Meta = formatForDisplay("Meta", options);
+export const Enter = "Enter";
+export const EnterShort = formatForDisplay("Enter", { platform: "mac" });
+
+export type KeyDefinition = {
+  legends: string[];
+  /** width in u  */
+  width?: number;
+  /** height in u  */
+  height?: number;
+  /** x-offset in u  */
+  x?: number;
+  /** y-offset in u  */
+  y?: number;
+  /** rotation in degrees  */
+  rotation?: number;
+  isLayoutIndicator?: boolean;
+  isHoming?: boolean;
+  align?: "top";
+};
+export type KeyboardDefinition = KeyDefinition[][];
+
+type LayoutPosition = {
+  row?: keyof LayoutObject["keys"];
+  col: number;
+};
+type LayoutKey = Omit<KeyDefinition, "legends"> & {
+  isExtraKey?: boolean;
+  extraKeysOverride?: Omit<KeyDefinition, "legends">;
+  layoutPosition?: LayoutPosition;
+} & OneOf<{
+    isLayoutIndicator: true;
+    legend?: string | string[];
+  }>;
+
+export type KeymapLayout = LayoutKey[][];
+
+const staggeredBottomRow: LayoutKey[] = [
+  { legend: Ctrl, width: 1.25, isExtraKey: true },
+  { legend: Meta, width: 1.25, isExtraKey: true },
+  { legend: Alt, width: 1.25, isExtraKey: true },
+  {
+    isLayoutIndicator: true,
+    width: 6,
+    x: 3.5,
+    extraKeysOverride: { width: 6.25, x: 0 },
+  },
+  { legend: Alt, width: 1.25, isExtraKey: true },
+  { legend: Meta, width: 1.25, isExtraKey: true },
+  { legend: Hyper, width: 1.25, isExtraKey: true },
+  { legend: Ctrl, width: 1.25, isExtraKey: true },
+];
+
+const staggeredAnsi: KeymapLayout = [
+  buildRow("row1", [
+    { layoutPosition: { col: 0 }, isExtraKey: true },
+    ...addLayoutKeys(12, { start: 1 }),
+    { legend: "Backspace", width: 2, isExtraKey: true },
+  ]),
+  buildRow("row2", [
+    { legend: "Tab", width: 1.5, isExtraKey: true },
+    { layoutPosition: { col: 0 }, x: 0.5, extraKeysOverride: { x: 0 } },
+    ...addLayoutKeys(11, { start: 1 }),
+    { layoutPosition: { col: 12 }, width: 1.5, isExtraKey: true },
+  ]),
+  buildRow("row3", [
+    { legend: "Caps", width: 1.75, isExtraKey: true },
+    { layoutPosition: { col: 0 }, x: 1, extraKeysOverride: { x: 0 } },
+    { layoutPosition: { col: 1 } },
+    { layoutPosition: { col: 2 } },
+    { layoutPosition: { col: 3 }, isHoming: true },
+    { layoutPosition: { col: 4 } },
+    { layoutPosition: { col: 5 } },
+    { layoutPosition: { col: 6 }, isHoming: true },
+    { layoutPosition: { col: 7 } },
+    { layoutPosition: { col: 8 } },
+    { layoutPosition: { col: 9 } },
+    { layoutPosition: { col: 10 } },
+    { legend: Enter, width: 2.25, isExtraKey: true },
+  ]),
+  buildRow("row4", [
+    { legend: Shift, width: 2.25, isExtraKey: true },
+    { layoutPosition: { col: 0 }, x: 1.5, extraKeysOverride: { x: 0 } },
+    ...addLayoutKeys(9, { start: 1 }),
+    { legend: Shift, width: 2.75, isExtraKey: true },
+  ]),
+  staggeredBottomRow,
+];
+
+const staggeredIso: KeymapLayout = [
+  buildRow("row1", [
+    { layoutPosition: { col: 0 }, isExtraKey: true },
+    ...addLayoutKeys(12, { start: 1 }),
+    { legend: "Backspace", width: 2, isExtraKey: true },
+  ]),
+  buildRow("row2", [
+    { legend: "Tab", width: 1.5, isExtraKey: true },
+    { layoutPosition: { col: 0 }, x: 0.5, extraKeysOverride: { x: 0 } },
+    ...addLayoutKeys(11, { start: 1 }),
+    { legend: Enter, width: 1.5, height: 2, isExtraKey: true, align: "top" },
+  ]),
+  buildRow("row3", [
+    { legend: "Caps", width: 1.75, isExtraKey: true },
+    { layoutPosition: { col: 0 }, x: 1, extraKeysOverride: { x: 0 } },
+    { layoutPosition: { col: 1 } },
+    { layoutPosition: { col: 2 } },
+    { layoutPosition: { col: 3 }, isHoming: true },
+    { layoutPosition: { col: 4 } },
+    { layoutPosition: { col: 5 } },
+    { layoutPosition: { col: 6 }, isHoming: true },
+    { layoutPosition: { col: 7 } },
+    { layoutPosition: { col: 8 } },
+    { layoutPosition: { col: 9 } },
+    { layoutPosition: { col: 10 } },
+    { layoutPosition: { col: 11 } },
+  ]),
+  buildRow("row4", [
+    { legend: Shift, width: 1.25, isExtraKey: true },
+    { layoutPosition: { col: 0 }, x: 0.25, extraKeysOverride: { x: 0 } },
+    ...addLayoutKeys(10, { start: 1 }),
+    { legend: Shift, width: 2.75, isExtraKey: true },
+  ]),
+  staggeredBottomRow,
+];
+
+const splitBottomRow: LayoutKey[] = [
+  ...staggeredBottomRow.slice(0, 3),
+  {
+    isLayoutIndicator: true,
+    width: 3,
+    x: 3.5,
+    extraKeysOverride: { x: 0 },
+  },
+  { legend: " ", width: 3, x: 1, extraKeysOverride: { x: 1.25 } },
+  ...staggeredBottomRow.slice(4),
+];
+
+const splitAnsi: KeymapLayout = [
+  insertGap(7, staggeredAnsi[0]),
+  insertGap(6, staggeredAnsi[1]),
+  insertGap(6, staggeredAnsi[2]),
+  insertGap(6, staggeredAnsi[3]),
+  splitBottomRow,
+];
+
+const splitIso: KeymapLayout = [
+  insertGap(7, staggeredIso[0]),
+  insertGap(6, staggeredIso[1]),
+  insertGap(6, staggeredIso[2]),
+  insertGap(7, staggeredIso[3]),
+  splitBottomRow,
+];
+
+const steno: KeymapLayout = [
+  [], //empty first row, avoid it to be hidden
+  [
+    { legend: ["s", "S"], height: 2 },
+    { legend: ["t", "T"] },
+    { legend: ["p", "P"] },
+    { legend: ["h", "H"] },
+    { legend: "*", height: 2 },
+    { legend: ["f", "F"] },
+    { legend: ["p", "P"] },
+    { legend: ["l", "L"] },
+    { legend: ["t", "T"] },
+    { legend: ["d", "D"] },
+  ],
+  [
+    { legend: ["k", "K"], x: 1 },
+    { legend: ["w", "W"] },
+    { legend: ["r", "R"] },
+    { legend: ["r", "R"], x: 1 },
+    { legend: ["b", "B"] },
+    { legend: ["g", "G"] },
+    { legend: ["s", "S"] },
+    { legend: ["z", "Z"] },
+  ],
+  [
+    { legend: ["a", "A"], x: 2.25 },
+    { legend: ["o", "O"] },
+    { legend: ["e", "E"], x: 0.5 },
+    { legend: ["u", "U"] },
+  ],
+];
+
+const stenoMatrix: KeymapLayout = [
+  [], //empty first row, avoid it to be hidden
+  [
+    { legend: ["s", "S"] },
+    { legend: ["t", "T"] },
+    { legend: ["p", "P"] },
+    { legend: ["h", "H"] },
+    { legend: "*" },
+    { legend: ["f", "F"], x: 1 },
+    { legend: ["p", "P"] },
+    { legend: ["l", "L"] },
+    { legend: ["t", "T"] },
+    { legend: ["d", "D"] },
+  ],
+  [
+    { legend: ["s", "S"] },
+    { legend: ["k", "K"] },
+    { legend: ["w", "W"] },
+    { legend: ["r", "R"] },
+    { legend: "*" },
+    { legend: ["r", "R"], x: 1 },
+    { legend: ["b", "B"] },
+    { legend: ["g", "G"] },
+    { legend: ["s", "S"] },
+    { legend: ["z", "Z"] },
+  ],
+  [
+    { legend: ["a", "A"], x: 3 },
+    { legend: ["o", "O"] },
+    { legend: ["e", "E"], x: 1 },
+    { legend: ["u", "U"] },
+  ],
+];
+
+const matrixBottomRow: LayoutKey[] = [
+  { legend: Ctrl, isExtraKey: true },
+  { legend: Meta, isExtraKey: true },
+  { legend: Alt, isExtraKey: true },
+  {
+    isLayoutIndicator: true,
+    width: 4,
+    x: 3,
+    extraKeysOverride: { width: 6, x: 0 },
+  },
+  { legend: Alt, isExtraKey: true },
+  { legend: HyperShort, isExtraKey: true },
+  { legend: Ctrl, isExtraKey: true },
+];
+
+const matrix: KeymapLayout = [
+  buildRow("row1", [
+    { layoutPosition: { col: 0 }, isExtraKey: true },
+    ...addLayoutKeys(10, { start: 1 }),
+    { legend: BackspaceShort, isExtraKey: true },
+  ]),
+  buildRow("row2", [
+    { legend: "Tab", isExtraKey: true },
+    ...addLayoutKeys(10),
+    { layoutPosition: { col: 10 }, isExtraKey: true },
+  ]),
+  buildRow("row3", [
+    { legend: "Esc", isExtraKey: true },
+    ...addLayoutKeys(3),
+    { layoutPosition: { col: 3 }, isHoming: true },
+    { layoutPosition: { col: 4 } },
+    { layoutPosition: { col: 5 } },
+    { layoutPosition: { col: 6 }, isHoming: true },
+    ...addLayoutKeys(3, { start: 7 }),
+    { layoutPosition: { col: 10 }, isExtraKey: true },
+  ]),
+  buildRow("row4", [
+    { legend: Shift, isExtraKey: true },
+    ...addLayoutKeys(10),
+    { legend: EnterShort, isExtraKey: true },
+  ]),
+  matrixBottomRow,
+];
+
+const splitMatrixBottomRow: LayoutKey[] = [
+  ...matrixBottomRow.slice(0, 3),
+  {
+    isLayoutIndicator: true,
+    width: 3,
+    x: 2,
+    extraKeysOverride: { x: 0 },
+  },
+  { legend: " ", width: 3, x: 1 },
+  ...matrixBottomRow.slice(4),
+];
+
+const splitMatrix: KeymapLayout = [
+  insertGap(6, matrix[0]),
+  insertGap(6, matrix[1]),
+  insertGap(6, matrix[2]),
+  insertGap(6, matrix[3]),
+  splitMatrixBottomRow,
+];
+
+const aliceBottomRow: LayoutKey[] = [
+  { legend: Ctrl, width: 1.5, isExtraKey: true, x: 1 },
+  { legend: Alt, width: 1.5, isExtraKey: true, rotation: 10, x: 1, y: 0.25 },
+  {
+    legend: " ",
+    width: 3,
+    rotation: 10,
+    y: 0.7,
+    x: 2.3,
+    extraKeysOverride: { x: 0, y: 0.6, width: 2 },
+  },
+  { legend: Meta, width: 1.5, isExtraKey: true, rotation: 10, y: 0.9 },
+  {
+    isLayoutIndicator: true,
+    width: 3,
+    rotation: -10,
+    x: 1,
+    y: 0.7,
+    extraKeysOverride: { x: 0.65, y: 0.7, width: 2.75 },
+  },
+  { legend: Alt, width: 1.5, isExtraKey: true, rotation: -10, y: 0.3 },
+  { legend: Ctrl, width: 1.5, isExtraKey: true, x: 2.25 },
+];
+
+const alice: KeymapLayout = [
+  buildRow("row1", [
+    { legend: "Esc", isExtraKey: true, x: 0.4 },
+    { layoutPosition: { col: 0 }, isExtraKey: true, x: 0.15 },
+    { layoutPosition: { col: 1 } },
+    { layoutPosition: { col: 2 }, y: -0.1 },
+    { layoutPosition: { col: 3 }, rotation: 10, y: 0.1 },
+    { layoutPosition: { col: 4 }, rotation: 10, y: 0.3 },
+    { layoutPosition: { col: 5 }, rotation: 10, y: 0.5 },
+    { layoutPosition: { col: 6 }, rotation: 10, y: 0.7 },
+    { layoutPosition: { col: 7 }, rotation: -10, y: 0.6, x: 0.15 },
+    { layoutPosition: { col: 8 }, rotation: -10, y: 0.4 },
+    { layoutPosition: { col: 9 }, rotation: -10, y: 0.2 },
+    { layoutPosition: { col: 10 }, rotation: -10 },
+    { layoutPosition: { col: 11 }, y: -0.1 },
+    { layoutPosition: { col: 12 } },
+    { legend: "Backspace", width: 2, isExtraKey: true },
+  ]),
+  buildRow("row2", [
+    { legend: "PgUp", isExtraKey: true, x: 0.2 },
+    { legend: "Tab", width: 1.5, isExtraKey: true, x: 0.15 },
+    { layoutPosition: { col: 0 }, x: 0.15, extraKeysOverride: { x: 0 } },
+    { layoutPosition: { col: 1 }, rotation: 10 },
+    { layoutPosition: { col: 2 }, rotation: 10, y: 0.2 },
+    { layoutPosition: { col: 3 }, rotation: 10, y: 0.4 },
+    { layoutPosition: { col: 4 }, rotation: 10, y: 0.6 },
+    { layoutPosition: { col: 5 }, rotation: -10, y: 0.7, x: 0.75 },
+    { layoutPosition: { col: 6 }, rotation: -10, y: 0.5 },
+    { layoutPosition: { col: 7 }, rotation: -10, y: 0.3 },
+    { layoutPosition: { col: 8 }, rotation: -10, y: 0.1 },
+    { layoutPosition: { col: 9 }, y: -0.1 },
+    { layoutPosition: { col: 10 } },
+    { layoutPosition: { col: 11 } },
+    { layoutPosition: { col: 12 }, width: 1.5, isExtraKey: true },
+  ]),
+  buildRow("row3", [
+    { legend: "PgDn", isExtraKey: true },
+    { legend: "Caps", width: 1.75, isExtraKey: true, x: 0.15 },
+    { layoutPosition: { col: 0 }, x: 0.3, extraKeysOverride: { x: 0 } },
+    { layoutPosition: { col: 1 }, rotation: 10, y: 0.1 },
+    { layoutPosition: { col: 2 }, rotation: 10, y: 0.3 },
+    { layoutPosition: { col: 3 }, rotation: 10, y: 0.5, isHoming: true },
+    { layoutPosition: { col: 4 }, rotation: 10, y: 0.7 },
+    { layoutPosition: { col: 5 }, rotation: -10, y: 0.7, x: 1.15 },
+    { layoutPosition: { col: 6 }, rotation: -10, y: 0.5, isHoming: true },
+    { layoutPosition: { col: 7 }, rotation: -10, y: 0.3 },
+    { layoutPosition: { col: 8 }, rotation: -10, y: 0.1 },
+    { layoutPosition: { col: 9 } },
+    { layoutPosition: { col: 10 } },
+    { legend: Enter, width: 2.25, isExtraKey: true },
+  ]),
+  buildRow("row4", [
+    { legend: Shift, width: 2.25, isExtraKey: true, x: 1 },
+    { layoutPosition: { col: 0 }, x: 0.45, extraKeysOverride: { x: 0 } },
+    { layoutPosition: { col: 1 }, rotation: 10, y: 0.25 },
+    { layoutPosition: { col: 2 }, rotation: 10, y: 0.45 },
+    { layoutPosition: { col: 3 }, rotation: 10, y: 0.65 },
+    { layoutPosition: { col: 4 }, rotation: 10, y: 0.85 },
+    { layoutPosition: { col: 4 }, rotation: -10, y: 0.8, x: 0.7 },
+    { layoutPosition: { col: 5 }, rotation: -10, y: 0.6 },
+    { layoutPosition: { col: 6 }, rotation: -10, y: 0.4 },
+    { layoutPosition: { col: 7 }, rotation: -10, y: 0.2 },
+    { layoutPosition: { col: 8 } },
+    { layoutPosition: { col: 9 } },
+    { legend: Shift, width: 1.75, isExtraKey: true },
+    { legend: "fn", isExtraKey: true },
+  ]),
+  aliceBottomRow,
+];
+
+const aliceIso: KeymapLayout = [
+  buildRow("row1", [
+    { legend: "Esc", isExtraKey: true, x: 0.4 },
+    { layoutPosition: { col: 0 }, isExtraKey: true, x: 0.15 },
+    { layoutPosition: { col: 1 } },
+    { layoutPosition: { col: 2 }, y: -0.1 },
+    { layoutPosition: { col: 3 }, rotation: 10, y: 0.1 },
+    { layoutPosition: { col: 4 }, rotation: 10, y: 0.3 },
+    { layoutPosition: { col: 5 }, rotation: 10, y: 0.5 },
+    { layoutPosition: { col: 6 }, rotation: 10, y: 0.7 },
+    { layoutPosition: { col: 7 }, rotation: -10, y: 0.6, x: 0.15 },
+    { layoutPosition: { col: 8 }, rotation: -10, y: 0.4 },
+    { layoutPosition: { col: 9 }, rotation: -10, y: 0.2 },
+    { layoutPosition: { col: 10 }, rotation: -10 },
+    { layoutPosition: { col: 11 }, y: -0.1 },
+    { layoutPosition: { col: 12 } },
+    { legend: "Backspace", width: 2, isExtraKey: true },
+  ]),
+  buildRow("row2", [
+    { legend: "PgUp", isExtraKey: true, x: 0.2 },
+    { legend: "Tab", width: 1.5, isExtraKey: true, x: 0.15 },
+    { layoutPosition: { col: 0 }, x: 0.15, extraKeysOverride: { x: 0 } },
+    { layoutPosition: { col: 1 }, rotation: 10 },
+    { layoutPosition: { col: 2 }, rotation: 10, y: 0.2 },
+    { layoutPosition: { col: 3 }, rotation: 10, y: 0.4 },
+    { layoutPosition: { col: 4 }, rotation: 10, y: 0.6 },
+    { layoutPosition: { col: 5 }, rotation: -10, y: 0.7, x: 0.75 },
+    { layoutPosition: { col: 6 }, rotation: -10, y: 0.5 },
+    { layoutPosition: { col: 7 }, rotation: -10, y: 0.3 },
+    { layoutPosition: { col: 8 }, rotation: -10, y: 0.1 },
+    { layoutPosition: { col: 9 }, y: -0.1 },
+    { layoutPosition: { col: 10 } },
+    { layoutPosition: { col: 11 } },
+    { legend: Enter, width: 1.5, height: 2, isExtraKey: true, align: "top" },
+  ]),
+  buildRow("row3", [
+    { legend: "PgDn", isExtraKey: true },
+    { legend: "Caps", width: 1.75, isExtraKey: true, x: 0.15 },
+    { layoutPosition: { col: 0 }, x: 0.3, extraKeysOverride: { x: 0 } },
+    { layoutPosition: { col: 1 }, rotation: 10, y: 0.1 },
+    { layoutPosition: { col: 2 }, rotation: 10, y: 0.3 },
+    { layoutPosition: { col: 3 }, rotation: 10, y: 0.5, isHoming: true },
+    { layoutPosition: { col: 4 }, rotation: 10, y: 0.7 },
+    { layoutPosition: { col: 5 }, rotation: -10, y: 0.7, x: 1.15 },
+    { layoutPosition: { col: 6 }, rotation: -10, y: 0.5, isHoming: true },
+    { layoutPosition: { col: 7 }, rotation: -10, y: 0.3 },
+    { layoutPosition: { col: 8 }, rotation: -10, y: 0.1 },
+    { layoutPosition: { col: 9 } },
+    { layoutPosition: { col: 10 } },
+    { layoutPosition: { col: 11 } },
+  ]),
+  buildRow("row4", [
+    { legend: Shift, width: 1.25, isExtraKey: true, x: 1 },
+    { layoutPosition: { col: 0 }, isExtraKey: true },
+    { layoutPosition: { col: 1 }, x: 0.45, extraKeysOverride: { x: 0 } },
+    { layoutPosition: { col: 2 }, rotation: 10, y: 0.25 },
+    { layoutPosition: { col: 3 }, rotation: 10, y: 0.45 },
+    { layoutPosition: { col: 4 }, rotation: 10, y: 0.65 },
+    { layoutPosition: { col: 5 }, rotation: 10, y: 0.85 },
+    { layoutPosition: { col: 5 }, rotation: -10, y: 0.8, x: 0.7 },
+    { layoutPosition: { col: 6 }, rotation: -10, y: 0.6 },
+    { layoutPosition: { col: 7 }, rotation: -10, y: 0.4 },
+    { layoutPosition: { col: 8 }, rotation: -10, y: 0.2 },
+    { layoutPosition: { col: 9 } },
+    { layoutPosition: { col: 10 } },
+
+    { legend: Shift, width: 1.75, isExtraKey: true },
+    { legend: "fn", isExtraKey: true },
+  ]),
+  aliceBottomRow,
+];
+export const keymapLayouts: Partial<
+  Record<KeymapStyle, Partial<Record<LayoutObject["type"], KeymapLayout>>>
+> = {
+  staggered: { ansi: staggeredAnsi, iso: staggeredIso },
+  split: { ansi: splitAnsi, iso: splitIso },
+
+  steno: { iso: steno, ansi: steno },
+  steno_matrix: { iso: stenoMatrix, ansi: stenoMatrix },
+
+  matrix: { iso: matrix, ansi: matrix },
+  split_matrix: { iso: splitMatrix, ansi: splitMatrix },
+
+  alice: { iso: aliceIso, ansi: alice },
+};
+
+function buildRow(
+  row: keyof LayoutObject["keys"],
+  keys: (Omit<LayoutKey, "legends"> & { layoutPosition?: { col?: number } })[],
+): LayoutKey[] {
+  return keys.map((key, col) => {
+    const lp = key.layoutPosition;
+    return {
+      ...key,
+      ...(lp
+        ? {
+            layoutPosition: {
+              ...lp,
+              ...(lp.row !== undefined ? {} : { row }),
+              ...(lp.col !== undefined ? {} : { col }),
+            },
+          }
+        : {}),
+    } as LayoutKey;
+  });
+}
+
+function insertGap(gapCol: number, row: LayoutKey[] | undefined): LayoutKey[] {
+  return (row as LayoutKey[]).map((def, col) => ({
+    ...def,
+    x: col === gapCol ? 1 : def.x,
+  }));
+}
+
+function addLayoutKeys(
+  count: number,
+  options?: { start?: number },
+): LayoutKey[] {
+  return new Array<LayoutKey>(count).fill({}).map((it, index) => {
+    return {
+      ...it,
+      layoutPosition: {
+        col: index + (options?.start ?? 0),
+      },
+    };
+  });
+}
diff --git a/frontend/src/ts/config/metadata.tsx b/frontend/src/ts/config/metadata.tsx
index aaf6f16d0c30..005465ea9a7b 100644
--- a/frontend/src/ts/config/metadata.tsx
+++ b/frontend/src/ts/config/metadata.tsx
@@ -994,10 +994,10 @@ export const configMetadata: ConfigMetadataObject = {
     overrideConfig: ({ currentConfig }) =>
       currentConfig.keymapMode === "off" ? { keymapMode: "static" } : {},
   },
-  keymapShowTopRow: {
-    key: "keymapShowTopRow",
+  keymapLayoutStyle: {
+    key: "keymapLayoutStyle",
     fa: { icon: "fa-keyboard" },
-    displayString: "keymap show top row",
+    displayString: "keymap layout style",
     changeRequiresRestart: false,
     group: "appearance",
     overrideConfig: ({ currentConfig }) =>
diff --git a/frontend/src/ts/config/utils.ts b/frontend/src/ts/config/utils.ts
index 9621b2e717a3..647b0e9866bb 100644
--- a/frontend/src/ts/config/utils.ts
+++ b/frontend/src/ts/config/utils.ts
@@ -219,6 +219,21 @@ function replaceLegacyValues(
     }
   }
 
+  if ("keymapShowTopRow" in configObj) {
+    switch (configObj.keymapShowTopRow) {
+      case "never":
+        configObj.keymapLayoutStyle = "minimal";
+        break;
+      case "always":
+        configObj.keymapLayoutStyle = "minimal_numrow";
+        break;
+      case "layout":
+        configObj.keymapLayoutStyle = "minimal_layout";
+        break;
+    }
+    delete configObj.keymapShowTopRow;
+  }
+
   return configObj;
 }
 
diff --git a/frontend/src/ts/constants/default-config.ts b/frontend/src/ts/constants/default-config.ts
index c2fea2f0d058..7795ded910f5 100644
--- a/frontend/src/ts/constants/default-config.ts
+++ b/frontend/src/ts/constants/default-config.ts
@@ -57,7 +57,7 @@ const obj: Config = {
   keymapStyle: "staggered",
   keymapLegendStyle: "lowercase",
   keymapLayout: "overrideSync",
-  keymapShowTopRow: "layout",
+  keymapLayoutStyle: "minimal_layout",
   keymapSize: 1,
   fontFamily: "Roboto_Mono",
   smoothLineScroll: false,
diff --git a/frontend/src/ts/controllers/sound-controller.ts b/frontend/src/ts/controllers/sound-controller.ts
index 48c3d7536ac7..fd4da3a0cb56 100644
--- a/frontend/src/ts/controllers/sound-controller.ts
+++ b/frontend/src/ts/controllers/sound-controller.ts
@@ -1,7 +1,6 @@
 import { Config } from "../config/store";
 import { configEvent } from "../events/config";
 import { randomElementFromArray } from "../utils/arrays";
-import { leftState, rightState } from "../test/shift-tracker";
 import { isCapsLockOn } from "@leonabcd123/modern-caps-lock";
 import { showErrorNotification } from "../states/notifications";
 
@@ -18,6 +17,7 @@ import {
   SupportedOscillatorTypes,
   ValidNotes,
 } from "../constants/sounds";
+import { getModifierState } from "../states/modifiers";
 
 let howlerModulePromise: Promise<typeof import("howler")> | null = null;
 async function getHowlerModule(): Promise<typeof import("howler")> {
@@ -335,8 +335,8 @@ function playNote(options: {
   }
 
   const baseOctave = 3;
-  const octave =
-    baseOctave + (leftState || rightState || isCapsLockOn() ? 1 : 0);
+  const { shift } = getModifierState();
+  const octave = baseOctave + (shift || isCapsLockOn() ? 1 : 0);
   const currentFrequency = codeToNote[currentCode]?.(octave);
 
   const oscillatorNode = audioCtx.createOscillator();
diff --git a/frontend/src/ts/elements/keymap.ts b/frontend/src/ts/elements/keymap.ts
deleted file mode 100644
index ec8d63539017..000000000000
--- a/frontend/src/ts/elements/keymap.ts
+++ /dev/null
@@ -1,711 +0,0 @@
-import { Config } from "../config/store";
-import { configEvent } from "../events/config";
-import { keymapEvent } from "../events/keymap";
-import * as Misc from "../utils/misc";
-import * as JSONData from "../utils/json-data";
-import * as Hangul from "hangul-js";
-import { showErrorNotification } from "../states/notifications";
-import { getActivePage } from "../states/core";
-import { onCapsLockChange, isCapsLockOn } from "@leonabcd123/modern-caps-lock";
-import * as ShiftTracker from "../test/shift-tracker";
-import * as AltTracker from "../test/alt-tracker";
-import * as KeyConverter from "../utils/key-converter";
-import { getActiveFunboxNames } from "../test/funbox/list";
-import { areSortedArraysEqual } from "../utils/arrays";
-import { LayoutObject } from "@monkeytype/schemas/layouts";
-import { animate } from "animejs";
-import { ElementsWithUtils, qsr } from "../utils/dom";
-import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
-import { getTheme } from "../states/theme";
-
-import { createEffectOn } from "../hooks/effects";
-import { wordsHaveNumbers } from "../test/test-state";
-
-export const keyDataDelimiter = "\uE000";
-const keymap = qsr("#keymap");
-
-const stenoKeys: LayoutObject = {
-  keymapShowTopRow: true,
-  type: "matrix",
-  keys: {
-    row1: [],
-    row2: [
-      ["s", "S"],
-      ["t", "T"],
-      ["p", "P"],
-      ["h", "H"],
-      ["*", "*"],
-      ["f", "F"],
-      ["p", "P"],
-      ["l", "L"],
-      ["t", "T"],
-      ["d", "D"],
-    ],
-    row3: [
-      ["s", "S"],
-      ["k", "K"],
-      ["w", "W"],
-      ["r", "R"],
-      ["*", "*"],
-      ["r", "R"],
-      ["b", "B"],
-      ["g", "G"],
-      ["s", "S"],
-      ["z", "Z"],
-    ],
-    row4: [
-      ["a", "A"],
-      ["o", "O"],
-      ["e", "E"],
-      ["u", "U"],
-    ],
-    row5: [],
-  },
-};
-
-createEffectOn(getTheme, () => {
-  //reset calculated style on all keys
-  keymap.qsa(".keymapKey").setStyle({});
-});
-
-function findKeyElements(char: string): ElementsWithUtils | null {
-  if (char === "\n") return null;
-
-  if (char === " ") {
-    return keymap.qsa(".keySpace");
-  }
-
-  if (char === '"') {
-    return keymap.qsa(`.keymapKey[data-key*='${char}']`);
-  }
-
-  return keymap.qsa(`.keymapKey[data-key*="${char}"]`);
-}
-
-function highlightKey(currentKey: string): void {
-  if (Config.mode === "zen") return;
-  requestDebouncedAnimationFrame("keymap.highlightKey", async () => {
-    if (currentKey === "") currentKey = " ";
-    try {
-      document
-        .querySelectorAll(".activeKey")
-        .forEach((el) => el.classList.remove("activeKey"));
-
-      if (Config.language.startsWith("korean")) {
-        currentKey = Hangul.disassemble(currentKey)[0] ?? currentKey;
-      }
-
-      const $target = findKeyElements(currentKey);
-      if ($target === null || $target.length === 0) return;
-
-      $target.addClass("activeKey");
-    } catch (e) {
-      if (e instanceof Error) {
-        console.log(`could not update highlighted keymap key: ${e.message}`);
-      }
-    }
-  });
-}
-
-async function flashKey(key: string, correct?: boolean): Promise<void> {
-  if (key === undefined) return;
-  requestDebouncedAnimationFrame(`keymap.flashKey.${key}`, async () => {
-    const elements = findKeyElements(key);
-    if (elements === null || elements.length === 0) return;
-
-    const themecolors = getTheme();
-
-    try {
-      let startingStyle = {
-        color: themecolors.bg,
-        backgroundColor: themecolors.sub,
-        borderColor: themecolors.sub,
-      };
-
-      if (correct || Config.blindMode) {
-        startingStyle = {
-          color: themecolors.bg,
-          backgroundColor: themecolors.main,
-          borderColor: themecolors.main,
-        };
-      } else {
-        startingStyle = {
-          color: themecolors.bg,
-          backgroundColor: themecolors.error,
-          borderColor: themecolors.error,
-        };
-      }
-
-      animate(elements.native, {
-        color: [startingStyle.color, themecolors.sub],
-        backgroundColor: [startingStyle.backgroundColor, themecolors.subAlt],
-        borderColor: [startingStyle.borderColor, themecolors.sub],
-        duration: 250,
-        easing: "out(5)",
-      });
-    } catch (e) {}
-  });
-}
-
-export function hide(): void {
-  keymap.hide();
-}
-
-export function show(): void {
-  keymap.show();
-}
-
-function buildRow(options: {
-  layoutData: LayoutObject;
-  rowId: string;
-  rowKeys: string[][];
-  layoutNameDisplayString: string;
-  showTopRow: boolean;
-  isMatrix: boolean;
-  isSteno: boolean;
-  isISO: boolean;
-  isAlice: boolean;
-}): string {
-  const {
-    layoutData,
-    rowId,
-    isMatrix,
-    showTopRow,
-    isSteno,
-    isISO,
-    layoutNameDisplayString,
-    isAlice,
-  } = options;
-  let { rowKeys } = options;
-
-  let hasAlphas = false;
-  let r5Grid = "";
-  let rowHtml = "";
-  let keysHtml = "";
-
-  if (rowId === "row1" && (isMatrix || Config.keymapStyle === "staggered")) {
-    rowKeys = rowKeys.slice(1);
-  }
-  if (rowId === "row1" && (!showTopRow || isSteno)) {
-    return "";
-  }
-
-  if (
-    (rowId === "row2" || rowId === "row3" || rowId === "row4") &&
-    !isMatrix &&
-    !isSteno
-  ) {
-    keysHtml += "<div></div>";
-  }
-
-  if (rowId === "row4" && !isISO && !isMatrix && !isSteno) {
-    keysHtml += "<div></div>";
-  }
-
-  if (isMatrix) {
-    if (rowId !== "row5" && layoutData.matrixShowRightColumn) {
-      keysHtml += `<div class="keymapKey"></div>`;
-    } else {
-      keysHtml += `<div></div>`;
-    }
-  }
-
-  if (rowId === "row5") {
-    if (isSteno) return "";
-    let layoutDisplay = layoutNameDisplayString.replace(/_/g, " ");
-    let letterStyle = "";
-    if (Config.keymapLegendStyle === "blank") {
-      letterStyle = `style="display: none;"`;
-    }
-    /* ROW 5 in alternate keymaps allow for alphas in thumb keys.
-     * These keymaps MUST include two keys in row 5,
-     * an alpha and a space, or a space and an alpha.
-     * Alpha key is rendered with the regular alpha size.
-     * Layout name is automatically added in the space key.
-     * Visual keymap will be:
-     * 1-3 for 1 alpha and 1 space
-     * 3-1 for 1 space and 1 alpha
-     * Together with the data-row5-has-alpha="true",
-     * these two will be used to edit the CSS grid layout.
-     * 3-3 for two spaces of size 3. This will not be used to edit CSS,
-     * since it means a traditional layout, can keep current CSS grid.
-     * It is just created for simplicity in the for loop below.
-     * */
-    // If only one space, add another
-    const isRowEmpty = (row: string[] | undefined): boolean =>
-      areSortedArraysEqual(row ?? [], [" "]);
-
-    if (rowKeys.length === 1 && isRowEmpty(rowKeys[0])) {
-      rowKeys[1] = rowKeys[0] ?? [];
-    }
-    // If only one alpha, add one space and place it on the left
-    if (rowKeys.length === 1 && !isRowEmpty(rowKeys[0])) {
-      rowKeys[1] = [" "];
-      rowKeys.reverse();
-    }
-    // If two alphas equal, replace one with a space on the left
-    if (
-      rowKeys.length > 1 &&
-      !isRowEmpty(rowKeys[0]) &&
-      areSortedArraysEqual(rowKeys[0] as string[], rowKeys[1] as string[])
-    ) {
-      rowKeys[0] = [" "];
-    }
-    const alphas = (v: string[]): boolean => v.some((key) => key !== " ");
-    hasAlphas = rowKeys.some(alphas);
-
-    keysHtml += "<div></div>";
-
-    for (let keyId = 0; keyId < rowKeys.length; keyId++) {
-      const key = rowKeys[keyId] as string[];
-      let keyDisplay = key[0] as string;
-      if (Config.keymapLegendStyle === "uppercase") {
-        keyDisplay = keyDisplay.toUpperCase();
-      }
-      const keyVisualValue = key.map((it) => it.replace('"', "&quot;"));
-      // these are used to keep grid layout but magically hide keys using opacity:
-      let side = keyId < 1 ? "left" : "right";
-      // we won't use this trick for alternate layouts, unless Alice (for rotation):
-      if (hasAlphas && !isAlice) side = "";
-      if (keyId === 1) {
-        keysHtml += `<div class="keymapSplitSpacer"></div>`;
-        r5Grid += "-";
-      }
-      if (isRowEmpty(keyVisualValue)) {
-        keysHtml += `<div class="keymapKey keySpace layoutIndicator ${side}">
-              <div class="letter" ${letterStyle}>${layoutDisplay}</div>
-            </div>`;
-        r5Grid += "3";
-        // potential second space in next loop iterations will be empty:
-        layoutDisplay = "";
-      } else {
-        keysHtml += `<div class="keymapKey ${side}">
-              <div class="letter">${keyDisplay}</div>
-            </div>`;
-        r5Grid += "1";
-      }
-    }
-  } else {
-    for (let keyId = 0; keyId < rowKeys.length; keyId++) {
-      if (rowId === "row2" && keyId === 12) continue;
-      if (rowId === "row4" && isMatrix && isISO && keyId === 0) continue;
-
-      let colLimit = 10;
-      if (layoutData.matrixShowRightColumn) {
-        colLimit = 11;
-      }
-      if (rowId === "row4" && isMatrix && isISO) {
-        colLimit += 1;
-      }
-
-      if (
-        (Config.keymapStyle === "matrix" ||
-          Config.keymapStyle === "split_matrix") &&
-        keyId >= colLimit
-      ) {
-        continue;
-      }
-
-      const key = rowKeys[keyId] as string[];
-      const bump = rowId === "row3" && (keyId === 3 || keyId === 6);
-      let keyDisplay = key[0] as string;
-      let letterStyle = "";
-
-      if (Config.keymapLegendStyle === "blank") {
-        letterStyle = `style="display: none;"`;
-      } else if (Config.keymapLegendStyle === "uppercase") {
-        keyDisplay = keyDisplay.toUpperCase();
-      }
-
-      let hide = "";
-      if (
-        rowId === "row1" &&
-        keyId === 0 &&
-        !isMatrix &&
-        Config.keymapStyle !== "staggered"
-      ) {
-        hide = ` invisible`;
-      }
-
-      const keyElement = `<div class="keymapKey${hide}" data-key="${key
-        .map((it) => it.replace('"', "&quot;"))
-        .join(
-          keyDataDelimiter,
-        )}"><span class="letter" ${letterStyle}>${keyDisplay}</span>${
-        bump ? "<div class='bump'></div>" : ""
-      }</div>`;
-
-      let splitSpacer = "";
-      if (
-        Config.keymapStyle === "split" ||
-        Config.keymapStyle === "split_matrix" ||
-        Config.keymapStyle === "alice" ||
-        isSteno
-      ) {
-        if (
-          rowId === "row4" &&
-          isSteno &&
-          (keyId === 0 || keyId === 2 || keyId === 4)
-        ) {
-          splitSpacer += `<div class="keymapSplitSpacer"></div>`;
-        } else if (
-          rowId === "row4" &&
-          (Config.keymapStyle === "split" || Config.keymapStyle === "alice") &&
-          isISO
-        ) {
-          if (keyId === 6) {
-            splitSpacer += `<div class="keymapSplitSpacer"></div>`;
-          }
-        } else if (
-          rowId === "row1" &&
-          (Config.keymapStyle === "split" || Config.keymapStyle === "alice")
-        ) {
-          if (keyId === 7) {
-            splitSpacer += `<div class="keymapSplitSpacer"></div>`;
-          }
-        } else if (rowId === "row4" && isMatrix && isISO) {
-          if (keyId === 6) {
-            splitSpacer += `<div class="keymapSplitSpacer"></div>`;
-          }
-        } else {
-          if (keyId === 5) {
-            splitSpacer += `<div class="keymapSplitSpacer"></div>`;
-          }
-        }
-      }
-
-      if (Config.keymapStyle === "alice" && rowId === "row4") {
-        if ((isISO && keyId === 6) || (!isISO && keyId === 5)) {
-          splitSpacer += `<div class="extraKey"><span class="letter"></span></div>`;
-        }
-      }
-
-      keysHtml += splitSpacer + keyElement;
-    }
-  }
-
-  if (rowId === "row5") {
-    rowHtml += `<div
-          class="row r5"
-          data-row5-grid="${r5Grid}"
-          data-row5-has-alpha="${hasAlphas}"
-        >${keysHtml}</div>`;
-  } else {
-    const rowIndex = parseInt(rowId.replace("row", ""));
-    rowHtml += `<div class="row r${rowIndex}">${keysHtml}</div>`;
-  }
-
-  return rowHtml;
-}
-
-export async function refresh(): Promise<void> {
-  const layoutName =
-    Config.keymapLayout === "overrideSync"
-      ? Config.keymapLayout
-      : Config.layout;
-
-  if (Config.keymapMode === "off") return;
-  if (getActivePage() !== "test") return;
-  if (!layoutName) return;
-  try {
-    let layoutNameDisplayString = layoutName;
-    let layoutData: LayoutObject;
-    try {
-      if (Config.keymapLayout === "overrideSync") {
-        if (Config.layout === "default") {
-          layoutData = await JSONData.getLayout("qwerty");
-          layoutNameDisplayString = "default";
-        } else {
-          layoutData = await JSONData.getLayout(Config.layout);
-          layoutNameDisplayString = Config.layout;
-        }
-      } else {
-        layoutData = await JSONData.getLayout(Config.keymapLayout);
-        layoutNameDisplayString = Config.keymapLayout;
-      }
-    } catch (e) {
-      showErrorNotification(`Failed to load keymap ${layoutName}`, {
-        error: e,
-      });
-      return;
-    }
-
-    const showTopRow =
-      (wordsHaveNumbers && Config.keymapMode === "next") ||
-      Config.keymapShowTopRow === "always" ||
-      (layoutData.keymapShowTopRow && Config.keymapShowTopRow !== "never");
-
-    const isMatrix =
-      Config.keymapStyle === "matrix" || Config.keymapStyle === "split_matrix";
-
-    const isSteno =
-      Config.keymapStyle === "steno" || Config.keymapStyle === "steno_matrix";
-
-    const isAlice = Config.keymapStyle === "alice";
-
-    if (isSteno) {
-      layoutData = stenoKeys;
-    }
-
-    const funbox = getActiveFunboxNames().includes("layout_mirror");
-    if (funbox) {
-      layoutData = KeyConverter.mirrorLayoutKeys(layoutData);
-    }
-
-    const isISO = layoutData.type === "iso";
-
-    let keymapElement = "";
-    for (const [rowId, rowKeys] of Object.entries(layoutData.keys)) {
-      keymapElement += buildRow({
-        layoutData,
-        rowId,
-        rowKeys,
-        isMatrix,
-        showTopRow,
-        isSteno,
-        isISO,
-        layoutNameDisplayString,
-        isAlice,
-      });
-    }
-
-    keymap.setHtml(keymapElement);
-
-    keymap.removeClass([
-      "staggered",
-      "matrix",
-      "split",
-      "split_matrix",
-      "alice",
-      "steno",
-      "steno_matrix",
-    ]);
-    keymap.addClass(Config.keymapStyle);
-  } catch (e) {
-    if (e instanceof Error) {
-      console.log(
-        `something went wrong when changing layout, resettings: ${e.message}`,
-      );
-      // UpdateConfig.setConfig("keymapLayout", "qwerty",true);
-    }
-  }
-}
-
-const isMacLike = Misc.isMacLike();
-const symbolsPattern = /^[^\p{L}\p{N}]{1}$/u;
-type KeymapLegendStates = [letters: 0 | 1 | 2 | 3, symbols: 0 | 1 | 2 | 3];
-let keymapLegendStates: KeymapLegendStates = [0, 0];
-
-function getLegendStates(): KeymapLegendStates | undefined {
-  // MacOS has different CapsLock and Shift logic than other operating systems
-  // Windows and Linux only capitalize letters if either Shift OR CapsLock are
-  // pressed, but not both at once.
-  // MacOS instead capitalizes when either or both are pressed,
-  // so we have to check for that.
-  const shiftState = ShiftTracker.leftState || ShiftTracker.rightState;
-  const altState = AltTracker.leftState || AltTracker.rightState;
-  const capsState = isCapsLockOn();
-
-  const osDependentLettersState = isMacLike
-    ? shiftState || capsState
-    : shiftState !== capsState;
-
-  const lettersState = (osDependentLettersState ? 1 : 0) + (altState ? 2 : 0);
-  const symbolsState = (shiftState ? 1 : 0) + (altState ? 2 : 0);
-
-  const [previousLettersState, previousSymbolsState] = keymapLegendStates;
-
-  if (
-    previousLettersState === lettersState &&
-    previousSymbolsState === symbolsState
-  ) {
-    return;
-  }
-
-  keymapLegendStates = [
-    lettersState as 0 | 1 | 2 | 3,
-    symbolsState as 0 | 1 | 2 | 3,
-  ];
-  return keymapLegendStates;
-}
-
-async function updateLegends(): Promise<void> {
-  const states = getLegendStates();
-  if (states === undefined) return;
-
-  const keymapKeys = [...document.getElementsByClassName("keymapKey")].filter(
-    (el) => {
-      const isKeymapKey = el.classList.contains("keymapKey");
-      const isNotSpace = !el.classList.contains("keySpace");
-
-      return isKeymapKey && isNotSpace;
-    },
-  ) as HTMLElement[];
-
-  const layoutKeys = keymapKeys.map((el) =>
-    el.dataset["key"]?.split(keyDataDelimiter),
-  );
-  if (layoutKeys.includes(undefined)) return;
-
-  const keys = keymapKeys.map((el) => el.childNodes[0]);
-
-  const [lettersState, symbolsState] = states;
-
-  const layoutName =
-    Config.keymapLayout === "overrideSync"
-      ? Config.layout === "default"
-        ? "qwerty"
-        : Config.layout
-      : Config.keymapLayout;
-
-  const layout = await JSONData.getLayout(layoutName).catch(() => undefined);
-  if (layout === undefined) {
-    showErrorNotification("Failed to load keymap layout");
-
-    return;
-  }
-
-  for (let i = 0; i < layoutKeys.length; i++) {
-    const layoutKey = layoutKeys[i] as string[];
-    const key = keys[i];
-    const lowerCaseCharacter = layoutKey[0];
-    const upperCaseCharacter = layoutKey[1];
-
-    if (
-      key === undefined ||
-      layoutKey === undefined ||
-      lowerCaseCharacter === undefined ||
-      upperCaseCharacter === undefined
-    ) {
-      continue;
-    }
-
-    const keyIsSymbol = [lowerCaseCharacter, upperCaseCharacter].some(
-      (character) => symbolsPattern.test(character ?? ""),
-    );
-
-    const keycode = KeyConverter.layoutKeyToKeycode(lowerCaseCharacter, layout);
-    if (keycode === undefined) {
-      return;
-    }
-    const oppositeShift = ShiftTracker.isUsingOppositeShift(keycode);
-
-    const state = keyIsSymbol ? symbolsState : lettersState;
-    const characterIndex = oppositeShift ? state : 0;
-
-    //if the character at the index is undefined, try without alt
-    const character =
-      layoutKey[characterIndex] ?? layoutKey[characterIndex - 2];
-
-    key.textContent = character ?? "";
-  }
-}
-let ignoreConfigEvent = false;
-
-configEvent.subscribe(({ key }) => {
-  const handleMode = (): void => {
-    keymap.qsa(".activeKey").removeClass("activeKey");
-    keymap.qsa(".keymapKey").setAttribute("style", "");
-    Config.keymapMode === "off" ? hide() : show();
-  };
-  const handleSize = (): void => {
-    keymap.setStyle({ zoom: Config.keymapSize.toString() });
-  };
-  const handleLegendStyle = (): void => {
-    let style = Config.keymapLegendStyle;
-
-    // Remove existing styles
-    const keymapLegendStyles = ["lowercase", "uppercase", "blank", "dynamic"];
-    keymapLegendStyles.forEach((name) => {
-      keymap.qsa(".keymapLegendStyle").removeClass(name);
-    });
-
-    style = style || "lowercase";
-
-    // Mutate the keymap in the DOM, if it exists.
-    // 1. Remove everything
-    keymap.qsa(".keymapKey > .letter").setStyle({ display: "" });
-    keymap.qsa(".keymapKey > .letter").setStyle({ textTransform: "" });
-
-    // 2. Append special styles onto the DOM elements
-    if (style === "uppercase") {
-      keymap
-        .qsa(".keymapKey > .letter")
-        .setStyle({ textTransform: "capitalize" });
-    }
-    if (style === "blank") {
-      keymap.qsa(".keymapKey > .letter").setStyle({ display: "none" });
-    }
-
-    // Update and save to cookie for persistence
-    keymap.qsa(".keymapLegendStyle").addClass(style);
-  };
-
-  if (key === "fullConfigChange") {
-    ignoreConfigEvent = true;
-  }
-  if (key === "fullConfigChangeFinished") {
-    ignoreConfigEvent = false;
-    void refresh();
-    handleMode();
-    handleSize();
-    handleLegendStyle();
-  }
-  if (ignoreConfigEvent) return;
-
-  if (
-    (key === "layout" && Config.keymapLayout === "overrideSync") ||
-    key === "keymapLayout" ||
-    key === "keymapStyle" ||
-    key === "keymapShowTopRow" ||
-    key === "keymapMode"
-  ) {
-    void refresh();
-  }
-  if (key === "keymapMode") {
-    handleMode();
-  }
-  if (key === "keymapSize") {
-    handleSize();
-  }
-  if (key === "keymapLegendStyle") {
-    handleLegendStyle();
-  }
-});
-
-keymapEvent.subscribe(({ mode, key, correct }) => {
-  if (mode === "highlight") {
-    highlightKey(key);
-  }
-  if (mode === "flash") {
-    void flashKey(key, correct);
-  }
-});
-
-document.addEventListener("keydown", (e) => {
-  if (
-    Config.keymapLegendStyle === "dynamic" &&
-    (e.code === "ShiftLeft" ||
-      e.code === "ShiftRight" ||
-      e.code === "AltRight" ||
-      e.code === "AltLeft")
-  ) {
-    void updateLegends();
-  }
-});
-
-document.addEventListener("keyup", (e) => {
-  if (
-    Config.keymapLegendStyle === "dynamic" &&
-    (e.code === "ShiftLeft" ||
-      e.code === "ShiftRight" ||
-      e.code === "AltRight" ||
-      e.code === "AltLeft")
-  ) {
-    void updateLegends();
-  }
-});
-
-onCapsLockChange(() => {
-  if (Config.keymapLegendStyle === "dynamic") void updateLegends();
-});
diff --git a/frontend/src/ts/event-handlers/keymap.ts b/frontend/src/ts/event-handlers/keymap.ts
deleted file mode 100644
index da67f60e37e7..000000000000
--- a/frontend/src/ts/event-handlers/keymap.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import * as Commandline from "../commandline/commandline";
-import { qs } from "../utils/dom";
-
-qs("#keymap")?.onChild("click", ".r5 .layoutIndicator", async () => {
-  Commandline.show({
-    subgroupOverride: "keymapLayout",
-  });
-});
diff --git a/frontend/src/ts/index.ts b/frontend/src/ts/index.ts
index e4113a24b959..96b13c2361e9 100644
--- a/frontend/src/ts/index.ts
+++ b/frontend/src/ts/index.ts
@@ -5,7 +5,6 @@ import "./dev/signal-tracker";
 import "solid-devtools";
 
 import "./event-handlers/global";
-import "./event-handlers/keymap";
 import "./event-handlers/test";
 import "./modals/google-sign-up";
 
diff --git a/frontend/src/ts/input/handlers/keydown.ts b/frontend/src/ts/input/handlers/keydown.ts
index 4f0d480e2df6..c63b94a503bf 100644
--- a/frontend/src/ts/input/handlers/keydown.ts
+++ b/frontend/src/ts/input/handlers/keydown.ts
@@ -4,7 +4,6 @@ import { getCharFromEvent } from "../../test/layout-emulator";
 import * as Monkey from "../../test/monkey";
 import { emulateInsertText } from "./insert-text";
 import * as TestState from "../../test/test-state";
-import * as JSONData from "../../utils/json-data";
 import {
   showNoticeNotification,
   showErrorNotification,
@@ -18,12 +17,9 @@ import {
   setCorrectShiftUsed,
   setLastBailoutAttempt,
 } from "../state";
-import {
-  getActiveFunboxesWithFunction,
-  getActiveFunboxNames,
-} from "../../test/funbox/list";
+import { getActiveFunboxesWithFunction } from "../../test/funbox/list";
 import { Keycode } from "../../constants/keys";
-import { wordsHaveTab } from "../../states/test";
+import { __nonReactive, wordsHaveTab } from "../../states/test";
 
 import { getCustomTextIndicator } from "../../states/core";
 import { logTestEvent } from "../../test/events/data";
@@ -82,22 +78,16 @@ export async function handleOppositeShift(event: KeyboardEvent): Promise<void> {
     Config.oppositeShiftMode === "keymap" &&
     Config.keymapLayout !== "overrideSync"
   ) {
-    let keymapLayout = await JSONData.getLayout(Config.keymapLayout).catch(
-      () => undefined,
-    );
+    let keymapLayout = await __nonReactive
+      .getKeymapLayout()
+      .catch(() => undefined);
     if (keymapLayout === undefined) {
       showErrorNotification("Failed to load keymap layout");
 
       return;
     }
 
-    const funbox = getActiveFunboxNames().includes("layout_mirror");
-    if (funbox) {
-      keymapLayout = KeyConverter.mirrorLayoutKeys(keymapLayout);
-    }
-
     const keycode = KeyConverter.layoutKeyToKeycode(event.key, keymapLayout);
-
     setCorrectShiftUsed(
       keycode === undefined ? true : ShiftTracker.isUsingOppositeShift(keycode),
     );
diff --git a/frontend/src/ts/pages/test.ts b/frontend/src/ts/pages/test.ts
index 8482c7511528..bd0f0e67e724 100644
--- a/frontend/src/ts/pages/test.ts
+++ b/frontend/src/ts/pages/test.ts
@@ -2,7 +2,6 @@ import * as TestLogic from "../test/test-logic";
 import * as Funbox from "../test/funbox/funbox";
 import Page from "./page";
 import { updateFooterAndVerticalAds } from "../controllers/ad-controller";
-import * as Keymap from "../elements/keymap";
 import { blurInputElement } from "../input/input-element";
 import { qsr } from "../utils/dom";
 import { resetIncompleteTests } from "../states/test";
@@ -27,6 +26,5 @@ export const page = new Page({
     TestLogic.restart({
       noAnim: true,
     });
-    void Keymap.refresh();
   },
 });
diff --git a/frontend/src/ts/states/modifiers.ts b/frontend/src/ts/states/modifiers.ts
new file mode 100644
index 000000000000..d943c9fcd3df
--- /dev/null
+++ b/frontend/src/ts/states/modifiers.ts
@@ -0,0 +1,86 @@
+import {
+  isCapsLockOn as checkCapsLockOn,
+  onCapsLockChange,
+} from "@leonabcd123/modern-caps-lock";
+import { createSignalWithSetters } from "../hooks/createSignalWithSetters";
+import { createSignal } from "solid-js";
+import { createEffectOn } from "../hooks/effects";
+import { getActivePage } from "./core";
+
+type ModifierState = {
+  shift: boolean;
+  alt: boolean;
+  leftShift: boolean;
+  rightShift: boolean;
+};
+
+export const [getModifierState, { updateModifierState }] =
+  createSignalWithSetters<ModifierState>({
+    shift: false,
+    alt: false,
+    leftShift: false,
+    rightShift: false,
+  })({
+    updateModifierState: (set, val: Partial<ModifierState>) =>
+      set((prev) => {
+        const leftShift = val.leftShift ?? prev.leftShift;
+        const rightShift = val.rightShift ?? prev.rightShift;
+        return {
+          ...prev,
+          ...val,
+          leftShift,
+          rightShift,
+          shift: val.shift ?? (leftShift || rightShift),
+        };
+      }),
+  });
+
+export function resetModifierState(): void {
+  updateModifierState({
+    shift: false,
+    alt: false,
+    leftShift: false,
+    rightShift: false,
+  });
+}
+
+const [isCapsLockOn, setCapsLockOn] = createSignal<boolean>(checkCapsLockOn());
+export { isCapsLockOn };
+
+onCapsLockChange((state) => setCapsLockOn(state));
+
+const listeners: Array<{ remove: () => void }> = [];
+
+createEffectOn(getActivePage, (page) => {
+  // Clean up listeners from previous page.
+  for (const listener of listeners) {
+    listener.remove();
+  }
+  // Ensure modifier state doesn't get stuck if keyup happens off-page.
+  listeners.length = 0;
+
+  resetModifierState();
+
+  if (page === "test") {
+    const onKeyDown = (e: KeyboardEvent): void => handleModifierState(e, true);
+    const onKeyUp = (e: KeyboardEvent): void => handleModifierState(e, false);
+
+    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("keyup", onKeyUp);
+
+    listeners.push(
+      {
+        remove: (): void => document.removeEventListener("keydown", onKeyDown),
+      },
+      { remove: (): void => document.removeEventListener("keyup", onKeyUp) },
+    );
+  }
+});
+
+function handleModifierState(e: KeyboardEvent, updateValue: boolean): void {
+  if (e.code === "ShiftLeft") updateModifierState({ leftShift: updateValue });
+  if (e.code === "ShiftRight") updateModifierState({ rightShift: updateValue });
+  if (e.code === "AltRight" || e.code === "AltLeft") {
+    updateModifierState({ alt: updateValue });
+  }
+}
diff --git a/frontend/src/ts/states/test.ts b/frontend/src/ts/states/test.ts
index 9654775e29f0..1c438c2ad88c 100644
--- a/frontend/src/ts/states/test.ts
+++ b/frontend/src/ts/states/test.ts
@@ -1,16 +1,29 @@
-import { createSignal, createEffect, createMemo } from "solid-js";
 import { Challenge } from "@monkeytype/schemas/challenges";
+import {
+  createEffect,
+  createMemo,
+  createResource,
+  createSignal,
+} from "solid-js";
+import { createStore } from "solid-js/store";
 import { getConfig } from "../config/store";
 
-import { canQuickRestart } from "../utils/quick-restart";
-import { getData as getCustomTextData } from "../test/custom-text";
-import { getActivePage, getCustomTextIndicator } from "./core";
-import { QuoteWithTextSplit } from "../types/quotes";
+import { LayoutObject } from "@monkeytype/schemas/layouts";
 import { CompletedEvent, IncompleteTest } from "@monkeytype/schemas/results";
+import { keymapEvent } from "../events/keymap";
 import { createSignalWithSetters } from "../hooks/createSignalWithSetters";
+import { getData as getCustomTextData } from "../test/custom-text";
+import { QuoteWithTextSplit } from "../types/quotes";
+import { getLayout } from "../utils/json-data";
+import { mirrorLayoutKeys } from "../utils/key-converter";
+import { canQuickRestart } from "../utils/quick-restart";
+import { promiseWithResolvers } from "../utils/misc";
+import { replaceUnderscoresWithSpaces } from "../utils/strings";
+import { getActivePage, getCustomTextIndicator } from "./core";
 
 export const [wordsHaveNewline, setWordsHaveNewline] = createSignal(false);
 export const [wordsHaveTab, setWordsHaveTab] = createSignal(false);
+export const [wordsHaveNumbers, setWordsHaveNumbers] = createSignal(false);
 
 export const [getLoadedChallenge, setLoadedChallenge] =
   createSignal<Challenge | null>(null);
@@ -54,3 +67,89 @@ createEffect(() => {
     ),
   );
 });
+
+export const getKeymapLayout = createMemo<{
+  layout: string;
+  layoutNameDisplayString: string;
+  isMirrored: boolean;
+}>(() => {
+  const isOverride = getConfig.keymapLayout === "overrideSync";
+  const raw = isOverride ? getConfig.layout : getConfig.keymapLayout;
+
+  const layout = raw === "default" ? "qwerty" : raw;
+  const layoutNameDisplayString = replaceUnderscoresWithSpaces(raw);
+  const isMirrored = getConfig.funbox.includes("layout_mirror");
+
+  return { layout: layout, layoutNameDisplayString, isMirrored };
+});
+
+export const [keymapLayoutObject] = createResource(
+  getKeymapLayout,
+  async (layout) => {
+    const result = await getLayout(layout.layout);
+    if (layout.isMirrored) {
+      return mirrorLayoutKeys(result);
+    }
+    return result;
+  },
+);
+
+const [getKeymapHighlightKey, setKeymapHighlightKey] = createSignal<
+  string | undefined
+>(undefined);
+
+export { getKeymapHighlightKey };
+
+export type FlashEntry = { tick: number; correct: boolean };
+
+const [getKeymapFlashState, setKeymapFlashState] = createStore<
+  Record<string, FlashEntry | undefined>
+>({});
+
+export { getKeymapFlashState, setKeymapFlashState };
+
+keymapEvent.useListener(({ mode, key, correct }) => {
+  const mappedKey = key === "" ? " " : key;
+  setKeymapHighlightKey(mode === "highlight" ? mappedKey : undefined);
+
+  if (mode === "flash" && getConfig.keymapMode === "react") {
+    const existing = getKeymapFlashState[mappedKey];
+    setKeymapFlashState(mappedKey, {
+      tick: existing ? existing.tick + 1 : 1,
+      correct: correct ?? true,
+    });
+  }
+});
+
+let layoutPromise = promiseWithResolvers();
+
+async function waitForLayoutReady(): Promise<void> {
+  await layoutPromise.promise;
+  if (keymapLayoutObject.state === "ready") return;
+
+  if (keymapLayoutObject.state === "errored") {
+    throw new Error("Failed to load keymap layout");
+  }
+}
+
+createEffect(() => {
+  const state = keymapLayoutObject.state;
+  if (state === "ready" || state === "errored") {
+    layoutPromise.resolve();
+    layoutPromise.reset();
+  }
+});
+
+/**
+ * Used for non reactive access. Do not use in Solid components.
+ */
+export const __nonReactive = {
+  getKeymapLayout: async (): Promise<LayoutObject> => {
+    await waitForLayoutReady();
+    const result = keymapLayoutObject();
+    if (result === undefined) {
+      throw new Error("Failed to load keymap layout");
+    }
+    return result;
+  },
+};
diff --git a/frontend/src/ts/test/alt-tracker.ts b/frontend/src/ts/test/alt-tracker.ts
deleted file mode 100644
index fa13933921e8..000000000000
--- a/frontend/src/ts/test/alt-tracker.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export let leftState = false;
-export let rightState = false;
-
-document.addEventListener("keydown", (e: KeyboardEvent) => {
-  if (e.code === "AltLeft") {
-    leftState = true;
-  } else if (e.code === "AltRight") {
-    rightState = true;
-  }
-});
-
-document.addEventListener("keyup", (e: KeyboardEvent) => {
-  if (e.code === "AltLeft") {
-    leftState = false;
-  } else if (e.code === "AltRight") {
-    rightState = false;
-  }
-});
-
-export function reset(): void {
-  leftState = false;
-  rightState = false;
-}
diff --git a/frontend/src/ts/test/layout-emulator.ts b/frontend/src/ts/test/layout-emulator.ts
index 088398f261a0..6fadb61d5602 100644
--- a/frontend/src/ts/test/layout-emulator.ts
+++ b/frontend/src/ts/test/layout-emulator.ts
@@ -1,10 +1,7 @@
-import { Config } from "../config/store";
-import * as JSONData from "../utils/json-data";
 import { isCapsLockOn } from "@leonabcd123/modern-caps-lock";
 import { showErrorNotification } from "../states/notifications";
-import * as KeyConverter from "../utils/key-converter";
 
-import { getActiveFunboxNames } from "./funbox/list";
+import { __nonReactive } from "../states/test";
 
 let isAltGrPressed = false;
 const isPunctuationPattern = /\p{P}/u;
@@ -34,17 +31,12 @@ export async function getCharFromEvent(
 
   let layout;
   try {
-    layout = await JSONData.getLayout(Config.layout);
+    layout = await __nonReactive.getKeymapLayout();
   } catch (e) {
     showErrorNotification("Failed to emulate event", { error: e });
     return null;
   }
 
-  const funbox = getActiveFunboxNames().includes("layout_mirror");
-  if (funbox) {
-    layout = KeyConverter.mirrorLayoutKeys(layout);
-  }
-
   let keyEventCodes: string[] = [];
 
   if (layout.type === "ansi") {
diff --git a/frontend/src/ts/test/shift-tracker.ts b/frontend/src/ts/test/shift-tracker.ts
index cb803bf0532a..094fd5ee7c8c 100644
--- a/frontend/src/ts/test/shift-tracker.ts
+++ b/frontend/src/ts/test/shift-tracker.ts
@@ -1,34 +1,11 @@
 import { Config } from "../config/store";
 import { Keycode } from "../constants/keys";
+import { getModifierState } from "../states/modifiers";
 import * as KeyConverter from "../utils/key-converter";
 
-export let leftState = false;
-export let rightState = false;
-
-document.addEventListener("keydown", (e: KeyboardEvent) => {
-  if (e.code === "ShiftLeft") {
-    leftState = true;
-    rightState = false;
-  } else if (e.code === "ShiftRight") {
-    leftState = false;
-    rightState = true;
-  }
-});
-
-document.addEventListener("keyup", (e: KeyboardEvent) => {
-  if (e.code === "ShiftLeft" || e.code === "ShiftRight") {
-    leftState = false;
-    rightState = false;
-  }
-});
-
-export function reset(): void {
-  leftState = false;
-  rightState = false;
-}
-
 export function isUsingOppositeShift(keycode: Keycode): boolean {
-  if (!leftState && !rightState) {
+  const { leftShift, rightShift } = getModifierState();
+  if (!leftShift && !rightShift) {
     return true;
   }
 
@@ -37,11 +14,12 @@ export function isUsingOppositeShift(keycode: Keycode): boolean {
   }
 
   const { leftSide, rightSide } = KeyConverter.keycodeToKeyboardSide(keycode);
+
   if (!leftSide && !rightSide) {
     return true;
   }
 
-  if ((leftState && rightSide) || (rightState && leftSide)) {
+  if ((leftShift && rightSide) || (rightShift && leftSide)) {
     return true;
   }
 
diff --git a/frontend/src/ts/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts
index 4876d02826f2..786078de305e 100644
--- a/frontend/src/ts/test/test-logic.ts
+++ b/frontend/src/ts/test/test-logic.ts
@@ -11,8 +11,6 @@ import {
 } from "../states/notifications";
 import * as CustomText from "./custom-text";
 import * as PractiseWords from "./practise-words";
-import * as ShiftTracker from "./shift-tracker";
-import * as AltTracker from "./alt-tracker";
 import * as Funbox from "./funbox/funbox";
 import * as PaceCaret from "./pace-caret";
 import * as Caret from "./caret";
@@ -44,6 +42,7 @@ import {
   setLastResult,
   setResultVisible,
   setWordsHaveNewline,
+  setWordsHaveNumbers,
   setWordsHaveTab,
 } from "../states/test";
 import { restartTestEvent } from "../events/test";
@@ -119,6 +118,7 @@ import { getLiveCachedAccuracy } from "./events/live-cache";
 import { calculateWpm } from "../utils/numbers";
 import { isDevEnvironment } from "../utils/env";
 import { EventLog } from "./events/types";
+import { resetModifierState } from "../states/modifiers";
 import { nthElementFromArray } from "../utils/arrays";
 
 let failReason = "";
@@ -333,8 +333,7 @@ export function restart(options = {} as RestartOptions): void {
   resetTestEvents();
   TestTimer.clear();
   setIsTestInvalid(false);
-  ShiftTracker.reset();
-  AltTracker.reset();
+  resetModifierState();
   Caret.hide();
   TestState.setActive(false);
   Replay.pauseReplay();
@@ -587,7 +586,7 @@ async function init(): Promise<boolean> {
     }
   }
 
-  TestState.setWordsHaveNumbers(hasNumbers);
+  setWordsHaveNumbers(hasNumbers);
   setWordsHaveTab(wordsHaveTab);
   setWordsHaveNewline(wordsHaveNewline);
 
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index cbfed884ea3f..4ff359869972 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -54,7 +54,6 @@ import * as CompositionDisplay from "../elements/composition-display";
 import * as AdController from "../controllers/ad-controller";
 import * as Joining from "./break-joining";
 import * as LayoutfluidFunboxTimer from "../test/funbox/layoutfluid-funbox-timer";
-import * as Keymap from "../elements/keymap";
 import * as ThemeController from "../controllers/theme-controller";
 import * as MemoryFunboxTimer from "./funbox/memory-funbox-timer";
 import {
@@ -1921,7 +1920,6 @@ export function onTestRestart(source: "testPage" | "resultPage"): void {
   LayoutfluidFunboxTimer.instantHide();
   updatePremid();
   focusWords(true);
-  void Keymap.refresh();
   ResultWordHighlight.destroy();
   MonkeyPower.reset();
   MemoryFunboxTimer.reset();
diff --git a/frontend/src/ts/utils/misc.ts b/frontend/src/ts/utils/misc.ts
index 6480e38ae000..80c0d957d7f9 100644
--- a/frontend/src/ts/utils/misc.ts
+++ b/frontend/src/ts/utils/misc.ts
@@ -472,13 +472,18 @@ export function getBoundingRectOfElements(elements: HTMLElement[]): DOMRect {
     },
   };
 }
-
 export function typedKeys<T extends object>(
   obj: T,
 ): T extends T ? (keyof T)[] : never {
   return Object.keys(obj) as unknown as T extends T ? (keyof T)[] : never;
 }
 
+export function typedValues<T extends object>(
+  obj: T,
+): { [K in keyof T]: T[K] }[keyof T][] {
+  return Object.values(obj) as { [K in keyof T]: T[K] }[keyof T][];
+}
+
 export function typedEntries<T extends object>(
   obj: T,
 ): { [K in keyof T]: [K, T[K]] }[keyof T][] {
diff --git a/frontend/static/funbox/crt.css b/frontend/static/funbox/crt.css
index 855f21cd6654..8a76e16f5976 100644
--- a/frontend/static/funbox/crt.css
+++ b/frontend/static/funbox/crt.css
@@ -131,16 +131,9 @@ body.crtmode .scrollToTopButton:hover {
     0 0 3px;
 }
 
-body.crtmode #keymap .keymapKey {
+body.crtmode [data-ui-element="keymap"] > div > div > div {
   box-shadow:
-    3px 0 1px var(--crt-sub-color-glow),
-    -3px 0 var(--crt-sub-color-glow),
-    0 0 3px;
-}
-
-body.crtmode #keymap .keymapKey.activeKey {
-  box-shadow:
-    3px 0 1px var(--crt-main-color-glow),
-    -3px 0 var(--crt-main-color-glow),
-    0 0 3px;
+    3px 0 1px var(--crt-sub-alt-color-glow),
+    -3px 0 var(--crt-sub-alt-color-glow),
+    0 0 3px var(--crt-sub-alt-color-glow);
 }
diff --git a/frontend/vitest.config.ts b/frontend/vitest.config.ts
index bd7b19d3f543..2ec39aa7c064 100644
--- a/frontend/vitest.config.ts
+++ b/frontend/vitest.config.ts
@@ -29,6 +29,7 @@ export const projects: UserWorkspaceConfig[] = [
         "__tests__/__harness__/mock-dom.ts",
         "__tests__/__harness__/mock-firebase.ts",
         "__tests__/__harness__/mock-env-config.ts",
+        "__tests__/__harness__/mock-static.ts",
       ],
     },
     plugins,
diff --git a/packages/contracts/src/index.ts b/packages/contracts/src/index.ts
index 4f9920fe79dc..a2b7c2fd1852 100644
--- a/packages/contracts/src/index.ts
+++ b/packages/contracts/src/index.ts
@@ -37,5 +37,5 @@ export const contract = c.router({
  * Whenever there is a breaking change with old frontend clients increase this number.
  * This will inform the frontend to refresh.
  */
-export const COMPATIBILITY_CHECK = 4;
+export const COMPATIBILITY_CHECK = 5;
 export const COMPATIBILITY_CHECK_HEADER = "X-Compatibility-Check";
diff --git a/packages/schemas/src/configs.ts b/packages/schemas/src/configs.ts
index a709029877da..1a754a398544 100644
--- a/packages/schemas/src/configs.ts
+++ b/packages/schemas/src/configs.ts
@@ -114,8 +114,13 @@ export const KeymapLegendStyleSchema = z.enum([
 ]);
 export type KeymapLegendStyle = z.infer<typeof KeymapLegendStyleSchema>;
 
-export const KeymapShowTopRowSchema = z.enum(["always", "layout", "never"]);
-export type KeymapShowTopRow = z.infer<typeof KeymapShowTopRowSchema>;
+export const KeymapLayoutStyleSchema = z.enum([
+  "minimal", //showTopRow=never
+  "minimal_layout", //showTopRow=layout
+  "minimal_numrow", //showTopRow=always
+  "full", //include extra keys
+]);
+export type KeymapLayoutStyle = z.infer<typeof KeymapLayoutStyleSchema>;
 
 export const KeymapSizeSchema = z.number().min(0.5).max(3.5).step(0.1);
 export type KeymapSize = z.infer<typeof KeymapSizeSchema>;
@@ -470,7 +475,7 @@ export const ConfigSchema = z
     keymapLayout: KeymapLayoutSchema,
     keymapStyle: KeymapStyleSchema,
     keymapLegendStyle: KeymapLegendStyleSchema,
-    keymapShowTopRow: KeymapShowTopRowSchema,
+    keymapLayoutStyle: KeymapLayoutStyleSchema,
     keymapSize: KeymapSizeSchema,
 
     // theme
diff --git a/packages/schemas/src/layouts.ts b/packages/schemas/src/layouts.ts
index ce3cc2cd32d9..818461084791 100644
--- a/packages/schemas/src/layouts.ts
+++ b/packages/schemas/src/layouts.ts
@@ -249,8 +249,8 @@ export const LayoutNameSchema = z.enum(
 
 export type LayoutName = z.infer<typeof LayoutNameSchema>;
 
-const charDefinitionSchema = z.array(z.string().length(1)).min(1).max(4);
-const row5CharDefinitionSchema = z.array(z.string().length(1)).min(1).max(4);
+const KeyLegendsSchema = z.array(z.string().length(1)).min(1).max(4);
+export type KeyLegends = z.infer<typeof KeyLegendsSchema>;
 
 const commonLayoutSchema = z
   .object({
@@ -264,11 +264,11 @@ const ansiLayoutSchema = commonLayoutSchema
     type: z.literal("ansi"),
     keys: z
       .object({
-        row1: z.array(charDefinitionSchema).length(13),
-        row2: z.array(charDefinitionSchema).length(13),
-        row3: z.array(charDefinitionSchema).length(11),
-        row4: z.array(charDefinitionSchema).length(10),
-        row5: z.array(row5CharDefinitionSchema).min(1).max(2),
+        row1: z.array(KeyLegendsSchema).length(13),
+        row2: z.array(KeyLegendsSchema).length(13),
+        row3: z.array(KeyLegendsSchema).length(11),
+        row4: z.array(KeyLegendsSchema).length(10),
+        row5: z.array(KeyLegendsSchema).min(1).max(2),
       })
       .strict(),
   })
@@ -279,32 +279,16 @@ const isoLayoutSchema = commonLayoutSchema
     type: z.literal("iso"),
     keys: z
       .object({
-        row1: z.array(charDefinitionSchema).length(13),
-        row2: z.array(charDefinitionSchema).length(12),
-        row3: z.array(charDefinitionSchema).length(12),
-        row4: z.array(charDefinitionSchema).length(11),
-        row5: z.array(row5CharDefinitionSchema).min(1).max(2),
+        row1: z.array(KeyLegendsSchema).length(13),
+        row2: z.array(KeyLegendsSchema).length(12),
+        row3: z.array(KeyLegendsSchema).length(12),
+        row4: z.array(KeyLegendsSchema).length(11),
+        row5: z.array(KeyLegendsSchema).min(1).max(2),
       })
       .strict(),
   })
   .strict();
 
-const matrixLayoutSchema = commonLayoutSchema
-  .extend({
-    type: z.literal("matrix"),
-    keys: z
-      .object({
-        row1: z.array(charDefinitionSchema).length(0),
-        row2: z.array(charDefinitionSchema).length(10),
-        row3: z.array(charDefinitionSchema).length(10),
-        row4: z.array(charDefinitionSchema).length(4),
-        row5: z.array(row5CharDefinitionSchema).length(0),
-      })
-      .strict(),
-  })
-  .strict();
+export const LayoutObjectSchema = ansiLayoutSchema.or(isoLayoutSchema);
 
-export const LayoutObjectSchema = ansiLayoutSchema
-  .or(isoLayoutSchema)
-  .or(matrixLayoutSchema);
 export type LayoutObject = z.infer<typeof LayoutObjectSchema>;