diff --git a/src/lib/components/LayoutCC1.svelte b/src/lib/components/LayoutCC1.svelte
index dfecdae3..7d395cac 100644
--- a/src/lib/components/LayoutCC1.svelte
+++ b/src/lib/components/LayoutCC1.svelte
@@ -4,53 +4,60 @@
   let activeLayer = 0
 </script>
 
-<fieldset>
-  {#each [["Numeric Layer", "123", 1], ["Primary Layer", "abc", 0], ["Function Layer", "function", 2]] as [title, icon, value]}
-    <button {title} class="icon" on:click={() => (activeLayer = value)} class:active={activeLayer === value}>
-      {icon}
-    </button>
-  {/each}
-</fieldset>
+<div>
+  <fieldset>
+    {#each [["Numeric Layer", "123", 1], ["Primary Layer", "abc", 0], ["Function Layer", "function", 2]] as [title, icon, value]}
+      <button
+        {title}
+        class="icon"
+        on:click={() => (activeLayer = value)}
+        class:active={activeLayer === value}
+      >
+        {icon}
+      </button>
+    {/each}
+  </fieldset>
 
-<div class="col layout" style="gap: 0">
-  <div class="row" style="gap: 156px">
-    <div class="row">
-      <RingInput {activeLayer} keys={{d: 30, e: 31, n: 32, w: 33, s: 34}} type="tertiary" />
-      <div class="col">
-        <RingInput {activeLayer} keys={{d: 25, e: 26, n: 27, w: 28, s: 29}} />
-        <RingInput {activeLayer} keys={{d: 40, e: 41, n: 42, w: 43, s: 44}} type="secondary" />
+  <div class="col layout" style="gap: 0">
+    <div class="row" style="gap: 156px">
+      <div class="row">
+        <RingInput {activeLayer} keys={{d: 30, e: 31, n: 32, w: 33, s: 34}} type="tertiary" />
+        <div class="col">
+          <RingInput {activeLayer} keys={{d: 25, e: 26, n: 27, w: 28, s: 29}} />
+          <RingInput {activeLayer} keys={{d: 40, e: 41, n: 42, w: 43, s: 44}} type="secondary" />
+        </div>
+        <div class="col">
+          <RingInput {activeLayer} keys={{d: 20, e: 21, n: 22, w: 23, s: 24}} />
+          <RingInput {activeLayer} keys={{d: 35, e: 36, n: 37, w: 38, s: 39}} type="secondary" />
+        </div>
+        <RingInput {activeLayer} keys={{d: 15, e: 16, n: 17, w: 18, s: 19}} />
       </div>
-      <div class="col">
-        <RingInput {activeLayer} keys={{d: 20, e: 21, n: 22, w: 23, s: 24}} />
-        <RingInput {activeLayer} keys={{d: 35, e: 36, n: 37, w: 38, s: 39}} type="secondary" />
-      </div>
-      <RingInput {activeLayer} keys={{d: 15, e: 16, n: 17, w: 18, s: 19}} />
-    </div>
 
-    <div class="row">
-      <RingInput {activeLayer} keys={{d: 60, w: 61, n: 62, e: 63, s: 64}} />
-      <div class="col">
-        <RingInput {activeLayer} keys={{d: 65, w: 66, n: 67, e: 68, s: 69}} />
-        <RingInput {activeLayer} keys={{d: 80, w: 81, n: 82, e: 83, s: 84}} />
+      <div class="row">
+        <RingInput {activeLayer} keys={{d: 60, w: 61, n: 62, e: 63, s: 64}} />
+        <div class="col">
+          <RingInput {activeLayer} keys={{d: 65, w: 66, n: 67, e: 68, s: 69}} />
+          <RingInput {activeLayer} keys={{d: 80, w: 81, n: 82, e: 83, s: 84}} />
+        </div>
+        <div class="col">
+          <RingInput {activeLayer} keys={{d: 70, w: 71, n: 72, e: 73, s: 74}} />
+          <RingInput {activeLayer} keys={{d: 85, w: 86, n: 87, e: 88, s: 89}} />
+        </div>
+        <RingInput {activeLayer} keys={{d: 75, w: 76, n: 77, e: 78, s: 79}} />
       </div>
-      <div class="col">
-        <RingInput {activeLayer} keys={{d: 70, w: 71, n: 72, e: 73, s: 74}} />
-        <RingInput {activeLayer} keys={{d: 85, w: 86, n: 87, e: 88, s: 89}} />
-      </div>
-      <RingInput {activeLayer} keys={{d: 75, w: 76, n: 77, e: 78, s: 79}} />
     </div>
-  </div>
-  <div class="row" style="gap: 48px; margin-top: -32px">
-    <RingInput {activeLayer} keys={{d: 10, e: 11, n: 12, w: 13, s: 14}} />
-    <RingInput {activeLayer} keys={{d: 55, w: 56, n: 57, e: 58, s: 59}} />
-  </div>
-  <div class="row" style="gap: 160px">
-    <RingInput {activeLayer} keys={{d: 5, e: 6, n: 7, w: 8, s: 9}} />
-    <RingInput {activeLayer} keys={{d: 50, w: 51, n: 52, e: 53, s: 54}} />
-  </div>
-  <div class="row" style="gap: 320px; margin-top: -12px">
-    <RingInput {activeLayer} keys={{d: 0, e: 1, n: 2, w: 3, s: 4}} type="secondary" />
-    <RingInput {activeLayer} keys={{d: 45, w: 46, n: 47, e: 48, s: 49}} type="secondary" />
+    <div class="row" style="gap: 48px; margin-top: -32px">
+      <RingInput {activeLayer} keys={{d: 10, e: 11, n: 12, w: 13, s: 14}} />
+      <RingInput {activeLayer} keys={{d: 55, w: 56, n: 57, e: 58, s: 59}} />
+    </div>
+    <div class="row" style="gap: 160px">
+      <RingInput {activeLayer} keys={{d: 5, e: 6, n: 7, w: 8, s: 9}} />
+      <RingInput {activeLayer} keys={{d: 50, w: 51, n: 52, e: 53, s: 54}} />
+    </div>
+    <div class="row" style="gap: 320px; margin-top: -12px">
+      <RingInput {activeLayer} keys={{d: 0, e: 1, n: 2, w: 3, s: 4}} type="secondary" />
+      <RingInput {activeLayer} keys={{d: 45, w: 46, n: 47, e: 48, s: 49}} type="secondary" />
+    </div>
   </div>
 </div>
 
diff --git a/src/lib/components/RingInput.svelte b/src/lib/components/RingInput.svelte
index 02b36d41..8fca78aa 100644
--- a/src/lib/components/RingInput.svelte
+++ b/src/lib/components/RingInput.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-  import {layout} from "$lib/serial/connection"
-  import type {CharaLayout} from "$lib/serial/connection"
+  import {highlightActions, layout} from "$lib/serial/connection"
+  import type {CharaLayout} from "$lib/serialization/layout"
   import {KEYMAP_CODES} from "$lib/serial/keymap-codes"
   import type {KeyInfo} from "$lib/serial/keymap-codes"
 
   export let activeLayer = 0
-  export let keys: Record<"d" | "n" | "w" | "e", number>
+  export let keys: Record<"d" | "s" | "n" | "w" | "e", number>
   export let type: "primary" | "secondary" | "tertiary" = "primary"
 
   const layerNames = ["Primary Layer", "Number Layer", "Function Layer"]
@@ -37,7 +37,10 @@
 <div class="radial {type}">
   {#each [keys.n, keys.e, keys.s, keys.w] as id, quadrant}
     {@const actions = getActions(id, $layout)}
-    <button title={getKeyDescriptions(actions)}>
+    <button
+      title={getKeyDescriptions(actions)}
+      class:active={actions.some(it => it && $highlightActions?.includes(it.code))}
+    >
       {#each actions as keyInfo, layer}
         {#if keyInfo}
           <span
@@ -136,6 +139,7 @@
     mask-image: url("$lib/assets/quater-ring.svg");
     mask-size: 100% 100%;
 
+    &.active,
     &:active {
       color: var(--md-sys-color-on-tertiary);
       background: var(--md-sys-color-tertiary);
diff --git a/src/lib/components/TypingInput.svelte b/src/lib/components/TypingInput.svelte
new file mode 100644
index 00000000..90de33cb
--- /dev/null
+++ b/src/lib/components/TypingInput.svelte
@@ -0,0 +1,79 @@
+<script lang="ts">
+  import {tick} from "svelte"
+  import LayoutCC1 from "$lib/components/LayoutCC1.svelte"
+  import {chords, highlightActions} from "$lib/serial/connection"
+  import {KEYMAP_CODES} from "$lib/serial/keymap-codes.js"
+
+  $: content = Array.from({length: 10}).map(() => $chords[Math.floor(Math.random() * $chords.length)])
+
+  let cursor = [0, 0]
+
+  $: {
+    $highlightActions = content[cursor[0]]?.actions ?? []
+  }
+
+  function keypress(event: KeyboardEvent) {
+    cursor[1]++
+    if (cursor[1] >= content[cursor[0]].phrase.length) {
+      cursor[0]++
+      cursor[1] = 0
+    }
+  }
+</script>
+
+<svelte:window on:keypress={keypress} />
+
+<div>
+  <section>
+    {#each content as word, i}
+      {#if word}
+        <span class="word">
+          {#each word.phrase as letter, j}
+            <span class="letter" class:active={i === cursor[0] && j === cursor[1]}
+              >{KEYMAP_CODES[letter].id}</span
+            >
+          {/each}
+        </span>
+      {/if}
+    {/each}
+  </section>
+
+  <LayoutCC1 />
+</div>
+
+<style lang="scss">
+  div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+
+    height: 100%;
+  }
+
+  section {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+
+    font-size: 1.3rem;
+    font-weight: 500;
+  }
+
+  .letter {
+    position: relative;
+  }
+
+  .letter.active::before {
+    content: "";
+
+    position: absolute;
+    top: 50%;
+    translate: -50% -50%;
+
+    width: 2px;
+    height: 1em;
+
+    background: var(--md-sys-color-primary);
+  }
+</style>
diff --git a/src/lib/serial/connection.ts b/src/lib/serial/connection.ts
index b9efd762..8cc17e4c 100644
--- a/src/lib/serial/connection.ts
+++ b/src/lib/serial/connection.ts
@@ -19,6 +19,8 @@ export const layout = writable<CharaLayout>([[], [], []])
 
 export const unsavedChanges = writable(0)
 
+export const highlightActions: Writable<number[]> = writable([])
+
 export const syncStatus: Writable<"done" | "error" | "downloading" | "uploading"> = writable("done")
 
 let device: CharaDevice // @hmr:keep
diff --git a/src/routes/train/[mode]/+page.svelte b/src/routes/train/[mode]/+page.svelte
index e69de29b..808b525a 100644
--- a/src/routes/train/[mode]/+page.svelte
+++ b/src/routes/train/[mode]/+page.svelte
@@ -0,0 +1,5 @@
+<script>
+  import TypingInput from "$lib/components/TypingInput.svelte"
+</script>
+
+<TypingInput />