diff --git a/control/config/reaper.ts b/control/config/reaper.ts
index df050988157ffe6defbc2be83c0eef1dbd9dc87f..2ef1c5046976ffb0d56bffe173f6dcaedd707e12 100644
--- a/control/config/reaper.ts
+++ b/control/config/reaper.ts
@@ -30,12 +30,13 @@ export default config.forApp(
     const recording = keypad.overlay((overlay) => {
       overlay.key("down-left", lucide("Save").fg("green"), () => {
         reaper.runAction("transport-stop-save-all-recorded-media");
+        reaper.runAction("transport-record");
       });
-      overlay.key("down", lucide("Redo").fg("green"), () => {
-        reaper.runAction("transport-stop-save-all-recorded-media");
+      overlay.key("down", lucide("Undo").fg("red"), () => {
+        reaper.runAction("transport-stop-delete-all-recorded-media");
         reaper.runAction("transport-record");
       });
-      overlay.key("down-right", lucide("Trash").fg("#ff6b6b"), () => {
+      overlay.key("down-right", lucide("Trash").fg("red"), () => {
         reaper.runAction("transport-stop-delete-all-recorded-media");
       });
     });
@@ -67,7 +68,7 @@ export default config.forApp(
     });
 
     dialpad.on("rotate", (delta) => {
-      console.log({delta})
+      console.log({ delta });
       reaper.runAction(
         delta > 0
           ? "tempo-increase-current-project-tempo-0-1-bpm"
diff --git a/control/src/icons.ts b/control/src/icons.ts
index 51f59f0756c558169d1402dad3e03ca5682d6690..6381c005ad506c8b60e6e54f6f672ea82050c975 100644
--- a/control/src/icons.ts
+++ b/control/src/icons.ts
@@ -9,8 +9,8 @@
 //
 // The result's `.svg` is what KeypadUI rasterizes to JPEG. Everything here is
 // pure string building — no build step, no runtime SVG parsing beyond a trim.
-import type { MdiIcon } from "mdi-ts";
 import * as lucideIcons from "lucide-static";
+import type { MdiIcon } from "mdi-ts";
 import { readFileSync } from "node:fs";
 import { createRequire } from "node:module";
 import { dirname, join } from "node:path";
@@ -33,7 +33,7 @@ const colorMap = {
   white: "#ffffff",
   grey: "#8a8a8a",
   gray: "#8a8a8a",
-  red: "#ff5a36",
+  red: "#ff6b6b",
   orange: "#ff9f43",
   amber: "#ffbf47",
   yellow: "#ffd23f",
@@ -137,8 +137,7 @@ export class Icon implements Svg {
         return glyph(lucideInner(this.#source.name), this.#glyphSize(), {
           fill: "none",
           stroke: fg,
-          extra:
-            `stroke-width="2" stroke-linecap="round" stroke-linejoin="round"`,
+          extra: `stroke-width="2" stroke-linecap="round" stroke-linejoin="round"`,
         });
       case "mdi":
         return glyph(mdiInner(this.#source.name), this.#glyphSize(), {
@@ -156,8 +155,8 @@ export class Icon implements Svg {
           fg,
         );
       case "blank":
-        return `<circle cx="${KEY_SIZE / 2}" cy="${KEY_SIZE / 2}" r="7" ` +
-          `fill="${BLANK_DOT}"/>`;
+        return `<circle cx="${KEY_SIZE / 2}" cy="${KEY_SIZE / 2}" r="7" `
+          + `fill="${BLANK_DOT}"/>`;
     }
   }
 
@@ -232,8 +231,8 @@ export const blank: Icon = new Icon({ kind: "blank" }, BLANK_BG);
 
 /** Wrap inner markup in a full key-sized document with a solid background. */
 function wrapSvg(inner: string, bg: string): string {
-  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${KEY_SIZE} ${KEY_SIZE}">` +
-    `<rect width="${KEY_SIZE}" height="${KEY_SIZE}" fill="${bg}"/>${inner}</svg>`;
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${KEY_SIZE} ${KEY_SIZE}">`
+    + `<rect width="${KEY_SIZE}" height="${KEY_SIZE}" fill="${bg}"/>${inner}</svg>`;
 }
 
 interface GlyphStyle {
@@ -247,8 +246,8 @@ function glyph(inner: string, size: number, style: GlyphStyle): string {
   const offset = (KEY_SIZE - size) / 2;
   const scale = size / 24;
   const extra = style.extra ? ` ${style.extra}` : "";
-  return `<g transform="translate(${offset} ${offset}) scale(${scale})" ` +
-    `fill="${style.fill}" stroke="${style.stroke}"${extra}>${inner}</g>`;
+  return `<g transform="translate(${offset} ${offset}) scale(${scale})" `
+    + `fill="${style.fill}" stroke="${style.stroke}"${extra}>${inner}</g>`;
 }
 
 const SANS_FONT = "Helvetica, Arial, sans-serif";
@@ -276,9 +275,9 @@ function textAt(
 ): string {
   const family = style.family ?? SANS_FONT;
   const weight = style.weight ?? 600;
-  return `<text x="${x}" y="${y}" fill="${fg}" font-family="${family}" ` +
-    `font-size="${size}" font-weight="${weight}" text-anchor="middle" ` +
-    `dominant-baseline="central">${escapeXml(label)}</text>`;
+  return `<text x="${x}" y="${y}" fill="${fg}" font-family="${family}" `
+    + `font-size="${size}" font-weight="${weight}" text-anchor="middle" `
+    + `dominant-baseline="central">${escapeXml(label)}</text>`;
 }
 
 function text(label: string, fg: string, size: number): string {
@@ -291,11 +290,9 @@ const STACK_GAP = 6;
 
 /** Lay text lines out vertically, centered as a group. */
 function stackInner(lines: readonly StackSpec[], fg: string): string {
-  const sizes = lines.map((line, index) =>
-    line.size ?? (index === 0 ? STACK_PRIMARY : STACK_SECONDARY)
-  );
-  const height = sizes.reduce((sum, size) => sum + size, 0) +
-    STACK_GAP * Math.max(0, lines.length - 1);
+  const sizes = lines.map((line, index) => line.size ?? (index === 0 ? STACK_PRIMARY : STACK_SECONDARY));
+  const height = sizes.reduce((sum, size) => sum + size, 0)
+    + STACK_GAP * Math.max(0, lines.length - 1);
   let top = (KEY_SIZE - height) / 2;
 
   return lines
@@ -330,15 +327,14 @@ function timeSignatureInner(
   let staff = "";
   for (let i = 0; i < STAFF_LINES; i += 1) {
     const y = top + i * STAFF_GAP;
-    staff += `<line x1="${STAFF_INSET}" y1="${y}" x2="${KEY_SIZE - STAFF_INSET}" ` +
-      `y2="${y}" stroke="${fg}" stroke-width="1.5" opacity="0.4"/>`;
+    staff += `<line x1="${STAFF_INSET}" y1="${y}" x2="${KEY_SIZE - STAFF_INSET}" `
+      + `y2="${y}" stroke="${fg}" stroke-width="1.5" opacity="0.4"/>`;
   }
   const style: TextStyle = { family: SERIF_FONT, weight: 700 };
   const numeral = TIMESIG_GLYPH;
   const middle = KEY_SIZE / 2;
-  const glyphs =
-    textAt(KEY_SIZE / 2, middle - TIMESIG_STACK_OFFSET, numerator, fg, numeral, style) +
-    textAt(KEY_SIZE / 2, middle + TIMESIG_STACK_OFFSET, denominator, fg, numeral, style);
+  const glyphs = textAt(KEY_SIZE / 2, middle - TIMESIG_STACK_OFFSET, numerator, fg, numeral, style)
+    + textAt(KEY_SIZE / 2, middle + TIMESIG_STACK_OFFSET, denominator, fg, numeral, style);
   return staff + glyphs;
 }
 
@@ -350,7 +346,7 @@ function escapeXml(value: string): string {
       ? "&gt;"
       : char === "&"
       ? "&amp;"
-      : char === '"'
+      : char === "\""
       ? "&quot;"
       : "&apos;");
 }