diff --git a/src/app/App.tsx b/src/app/App.tsx
index b1a389e..550b6bd 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -6,6 +6,7 @@ import { CaptureDialog } from "./CaptureDialog";
 import { Diagnostics, LogitechDetails } from "./Diagnostics";
 import { InterfaceSettings } from "./InterfaceSettings";
 import { PendingBar } from "./PendingBar";
+import { KeychronNapeLayers } from "./KeychronNapeLayers";
 import { Profiles } from "./Profiles";
 import { Sidebar } from "./Sidebar";
 import { Superstrike } from "./Superstrike";
@@ -155,6 +156,7 @@ function Workspace({
   ].filter((node) => node !== null);
 
   const showProfiles = show(has.profiles, ["profiles"]);
+  const showNapeLayers = show(has.keychronNapeLayers, ["profiles"]);
   const showSuperstrike = show(has.superstrike, ["buttons"]);
   const showLogitechDetails = show(has.logitechDetails, ["advanced"]);
   const showMxMaster = on(tab, ["advanced"])
@@ -163,7 +165,8 @@ function Workspace({
   const showOverview = on(tab, ["overview"]);
 
   const anyPanel = performance.length > 0 || advanced.length > 0 || lighting.length > 0
-    || showProfiles || showSuperstrike || showLogitechDetails || showMxMaster || showDiagnostics || showOverview;
+    || showProfiles || showNapeLayers || showSuperstrike || showLogitechDetails || showMxMaster
+    || showDiagnostics || showOverview;
 
   const slotsAvailable = snapshot.profile.slotsAvailable;
   const stagesAvailable = Boolean(status.ui?.dpiStageEditor)
@@ -188,6 +191,7 @@ function Workspace({
       ) : null}
 
       {showProfiles ? <Profiles snapshot={snapshot} /> : null}
+      {showNapeLayers ? <KeychronNapeLayers snapshot={snapshot} /> : null}
 
       {performance.length > 0 ? (
         <section
diff --git a/src/app/KeychronNapeLayers.tsx b/src/app/KeychronNapeLayers.tsx
new file mode 100644
index 0000000..fef0399
--- /dev/null
+++ b/src/app/KeychronNapeLayers.tsx
@@ -0,0 +1,324 @@
+import { useEffect, useRef, type CSSProperties, type ReactNode } from "react";
+import {
+  KEYCHRON_NAPE_BUTTON_ACTIONS,
+  KEYCHRON_NAPE_ORIENTATION_OPTIONS,
+  keychronLayerLabel,
+  type KeychronNapeButtonAction,
+} from "@openmouse/protocol/keychron";
+import * as control from "../device/controller";
+import type { ControlSnapshot, NapeAssignmentControl, StagedNapeAssignment } from "../device/types";
+import { IconActivate, IconRefresh, IconRunning } from "./icons";
+
+const ROW_STYLE = (open: boolean): CSSProperties => ({
+  display: "flex",
+  gap: ".55rem",
+  alignItems: "center",
+  padding: ".45rem .6rem",
+  border: `1px solid ${open ? "#4a4a52" : "#26262a"}`,
+  borderRadius: "7px",
+  background: open ? "#1b1b1f" : "#141416",
+});
+
+const OPEN_BUTTON_STYLE: CSSProperties = {
+  display: "flex",
+  gap: ".55rem",
+  alignItems: "center",
+  flex: 1,
+  minWidth: 0,
+  textAlign: "left",
+  background: "none",
+  border: 0,
+  padding: 0,
+  cursor: "pointer",
+};
+
+const ICON_BUTTON_STYLE = (disabled: boolean, active = false): CSSProperties => ({
+  display: "flex",
+  padding: ".3rem",
+  border: `1px solid ${active ? "#4a4a52" : "#3a3a3f"}`,
+  borderRadius: "5px",
+  background: "#19191c",
+  cursor: disabled ? "not-allowed" : "pointer",
+  opacity: disabled ? 0.4 : 1,
+});
+
+const KEY_ROWS = [
+  { col: 2, number: "1", name: "01" },
+  { col: 3, number: "2", name: "02" },
+  { col: 0, number: "3", name: "03" },
+  { col: 1, number: "4", name: "04" },
+  { col: 4, number: "5", name: "M1" },
+  { col: 5, number: "6", name: "M2" },
+] as const;
+
+function pendingKey(layer: number, target: NapeAssignmentControl): string {
+  if (target.kind === "orientation") return `nape-${layer}-orientation`;
+  return target.kind === "key"
+    ? `nape-${layer}-col-${target.col}`
+    : `nape-${layer}-wheel-${target.clockwise ? "cw" : "ccw"}`;
+}
+
+function stagedFor(
+  staged: readonly StagedNapeAssignment[],
+  layer: number,
+  target: NapeAssignmentControl,
+): StagedNapeAssignment | undefined {
+  return staged.find((entry) => {
+    if (entry.layer !== layer) return false;
+    if (entry.control.kind === "orientation" && target.kind === "orientation") return true;
+    if (entry.control.kind === "key" && target.kind === "key") return entry.control.col === target.col;
+    if (entry.control.kind === "wheel" && target.kind === "wheel") {
+      return entry.control.clockwise === target.clockwise;
+    }
+    return false;
+  });
+}
+
+function AssignmentSelect({
+  layer,
+  target,
+  action,
+  keycode,
+  staged,
+  disabled,
+}: {
+  layer: number;
+  target: NapeAssignmentControl;
+  action: string;
+  keycode: number;
+  staged: StagedNapeAssignment | undefined;
+  disabled: boolean;
+}): ReactNode {
+  const value = staged?.action ?? action;
+  return (
+    <span className="assignment-select-wrap">
+      <select
+        value={value}
+        disabled={disabled}
+        title={action === "Custom" ? `Unknown mapping: 0x${keycode.toString(16).padStart(4, "0")}` : undefined}
+        onChange={(event) => {
+          const next = event.currentTarget.value;
+          if (next === "Custom") return;
+          control.applyNapeAssignment(layer, target, next as KeychronNapeButtonAction);
+        }}
+      >
+        {value === "Custom" ? <option value="Custom">Custom mapping (preserved)</option> : null}
+        {KEYCHRON_NAPE_BUTTON_ACTIONS.map((option) => (
+          <option key={option} value={option}>{option}</option>
+        ))}
+      </select>
+      <i aria-hidden="true" />
+    </span>
+  );
+}
+
+function NapeAssignments({ snapshot, layer }: { snapshot: ControlSnapshot; layer: number }): ReactNode {
+  const map = snapshot.napeKeymap;
+  const busy = snapshot.settingInProgress;
+  const ready = map != null && map.layer === layer;
+  const orientationTarget: NapeAssignmentControl = { kind: "orientation" };
+  const stagedOrientation = ready && map
+    ? stagedFor(snapshot.stagedNapeAssignments, layer, orientationTarget)
+    : undefined;
+  return (
+    <div className="profile-button-editor">
+      <div className="profile-button-heading">
+        <div>
+          <p>BUTTONS</p>
+          <h2>Onboard assignments</h2>
+          <small>Choose this layer's sensor orientation and what each physical control does.</small>
+        </div>
+      </div>
+      {ready && map ? (
+        <div className="assignment-grid">
+          <label
+            className={`assignment-card is-wide${stagedOrientation ? " is-staged" : ""}`}
+            data-pending-key={pendingKey(layer, orientationTarget)}
+          >
+            <span className="assignment-button-number">0</span>
+            <span className="assignment-button-name">Orientation</span>
+            <span className="assignment-select-wrap">
+              <select
+                value={stagedOrientation?.keycode ?? map.orientationIndex}
+                disabled={busy}
+                onChange={(event) => {
+                  control.applyNapeOrientation(layer, Number(event.currentTarget.value));
+                }}
+              >
+                {KEYCHRON_NAPE_ORIENTATION_OPTIONS.map((option) => (
+                  <option key={option.index} value={option.index}>{option.label}</option>
+                ))}
+              </select>
+              <i aria-hidden="true" />
+            </span>
+          </label>
+          {KEY_ROWS.map((row) => {
+            const key = map.keys.find((entry) => entry.col === row.col);
+            if (!key) return null;
+            const target: NapeAssignmentControl = { kind: "key", col: row.col };
+            const staged = stagedFor(snapshot.stagedNapeAssignments, layer, target);
+            return (
+              <label
+                key={row.col}
+                className={`assignment-card${staged ? " is-staged" : ""}`}
+                data-pending-key={pendingKey(layer, target)}
+              >
+                <span className="assignment-button-number">{row.number}</span>
+                <span className="assignment-button-name">{row.name}</span>
+                <AssignmentSelect
+                  layer={layer}
+                  target={target}
+                  action={key.action}
+                  keycode={key.keycode}
+                  staged={staged}
+                  disabled={busy}
+                />
+              </label>
+            );
+          })}
+          {([
+            { clockwise: false, number: "7", name: "Scroll wheel Counter Clockwise", current: map.wheel.ccw },
+            { clockwise: true, number: "8", name: "Scroll wheel Clockwise", current: map.wheel.cw },
+          ] as const).map((row) => {
+            const target: NapeAssignmentControl = { kind: "wheel", clockwise: row.clockwise };
+            const staged = stagedFor(snapshot.stagedNapeAssignments, layer, target);
+            return (
+              <label
+                key={row.name}
+                className={`assignment-card${staged ? " is-staged" : ""}`}
+                data-pending-key={pendingKey(layer, target)}
+              >
+                <span className="assignment-button-number">{row.number}</span>
+                <span className="assignment-button-name">{row.name}</span>
+                <AssignmentSelect
+                  layer={layer}
+                  target={target}
+                  action={row.current.action}
+                  keycode={row.current.keycode}
+                  staged={staged}
+                  disabled={busy}
+                />
+              </label>
+            );
+          })}
+        </div>
+      ) : (
+        <small className="setting-note">Reading {keychronLayerLabel(layer)}…</small>
+      )}
+      <small className="setting-note">
+        Changes stay on this layer until you apply them. Orientation is stored per layer in 45° steps. Clockwise and counter-clockwise scroll can be set independently.
+      </small>
+    </div>
+  );
+}
+
+export function KeychronNapeLayers({ snapshot }: { snapshot: ControlSnapshot }): ReactNode {
+  const status = snapshot.status;
+  const count = status?.napeLayerCount;
+  const inner = useRef<HTMLDivElement>(null);
+  const body = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!body.current || !inner.current) return;
+    body.current.style.maxHeight = snapshot.profilesExpanded ? `${inner.current.scrollHeight}px` : "0px";
+  });
+
+  if (status == null || count == null || count < 1) return null;
+
+  const activeLayer = status.napeLayer ?? 1;
+  const editedLayer = snapshot.editedNapeLayer ?? activeLayer;
+  const busy = snapshot.settingInProgress;
+  const tags = [
+    editedLayer === activeLayer ? "active" : null,
+    "editing",
+  ].filter(Boolean).join(" · ");
+
+  return (
+    <section
+      id="nape-layers"
+      className={`profile-disclosure device-data${snapshot.profilesExpanded ? " is-open" : ""}`}
+      role="tabpanel"
+      aria-labelledby="workspace-tab-profiles"
+    >
+      <div className="profile-summary">
+        <button
+          id="nape-layer-disclosure-toggle"
+          className="profile-summary-main"
+          type="button"
+          aria-expanded={snapshot.profilesExpanded}
+          aria-controls="nape-layer-disclosure-body"
+          onClick={control.toggleProfilesExpanded}
+        >
+          <span className="profile-summary-text">
+            <span className="profile-summary-label">EDITING</span>
+            <strong>{keychronLayerLabel(editedLayer)}{tags ? ` · ${tags}` : ""}</strong>
+            <small>Onboard layers stored on the Nape Pro</small>
+          </span>
+          <i className="profile-summary-chevron" aria-hidden="true" />
+        </button>
+        <button
+          id="nape-layer-refresh"
+          className="icon-button"
+          type="button"
+          aria-label="Reload layers"
+          title="Reload layers"
+          disabled={busy}
+          onClick={() => void control.reloadNapeLayers()}
+        >
+          <IconRefresh />
+        </button>
+      </div>
+
+      <div id="nape-layer-disclosure-body" className="profile-disclosure-body" ref={body}>
+        <div className="profile-disclosure-inner" ref={inner}>
+          <div id="nape-layer-list">
+            <small style={{ display: "block", margin: "0 0 .2rem", color: "#5c5c62", fontSize: ".58rem" }}>
+              Click a layer to inspect it. Use the circle to switch the mouse to it.
+            </small>
+            {Array.from({ length: count }, (_, index) => {
+              const layer = index + 1;
+              const opened = editedLayer === layer;
+              const running = activeLayer === layer;
+              const rowTags = [running ? "active" : null, opened ? "editing" : null]
+                .filter(Boolean)
+                .join(" · ");
+              return (
+                <div key={layer} style={ROW_STYLE(opened)}>
+                  <button
+                    type="button"
+                    title="Open this layer"
+                    style={OPEN_BUTTON_STYLE}
+                    onClick={() => control.openNapeLayer(layer)}
+                  >
+                    <span className={`device-dot${running ? "" : " is-idle"}`} />
+                    <span className="profile-row-text" style={{ display: "flex", flexDirection: "column", minWidth: 0 }}>
+                      <strong style={{ fontSize: ".72rem", color: "#e6e6ea" }}>
+                        {keychronLayerLabel(layer)}{rowTags ? ` · ${rowTags}` : ""}
+                      </strong>
+                      <small style={{ color: "#77777c", fontSize: ".62rem" }}>
+                        {running ? "Current layer on the mouse" : "Stored on the mouse"}
+                      </small>
+                    </span>
+                  </button>
+                  <button
+                    type="button"
+                    disabled={busy || running}
+                    title={running ? "The mouse is already on this layer" : `Switch the mouse to ${keychronLayerLabel(layer)}`}
+                    aria-label={`Switch to ${keychronLayerLabel(layer)}`}
+                    aria-pressed={running}
+                    style={ICON_BUTTON_STYLE(busy || running, running)}
+                    onClick={() => void control.switchNapeLayer(layer)}
+                  >
+                    {running ? <IconRunning /> : <IconActivate />}
+                  </button>
+                </div>
+              );
+            })}
+          </div>
+          <small id="onboard-status">{snapshot.onboardStatus}</small>
+          <NapeAssignments snapshot={snapshot} layer={editedLayer} />
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/cards/availability.test.ts b/src/app/cards/availability.test.ts
index 19b45ab..137044e 100644
--- a/src/app/cards/availability.test.ts
+++ b/src/app/cards/availability.test.ts
@@ -148,6 +148,25 @@ test("onboard profiles need a Logitech mouse reporting a known mode", () => {
   })).profiles, false);
 });
 
+test("Keychron Nape Pro layers appear on the profiles tab when VIA reports a count", () => {
+  const withoutLayers = cardAvailability(snapshot({
+    status: { brand: "Keychron", ui: { family: "keychron-nape", showAdvancedSection: true } },
+  }));
+  assert.equal(withoutLayers.keychronNapeLayers, false);
+  assert.equal(withoutLayers.profiles, false);
+
+  const withLayers = cardAvailability(snapshot({
+    status: {
+      brand: "Keychron",
+      ui: { family: "keychron-nape", showAdvancedSection: true },
+      napeLayer: 2,
+      napeLayerCount: 8,
+    },
+  }));
+  assert.equal(withLayers.keychronNapeLayers, true);
+  assert.equal(withLayers.profiles, false);
+});
+
 test("HITS tuning needs exactly the two primary buttons", () => {
   const tuning = { maxActuation: 10, maxRapidTrigger: 5, maxHaptics: 5 };
   assert.equal(cardAvailability(snapshot({
diff --git a/src/app/cards/availability.ts b/src/app/cards/availability.ts
index 024c42a..1ad7d98 100644
--- a/src/app/cards/availability.ts
+++ b/src/app/cards/availability.ts
@@ -28,6 +28,7 @@ export interface CardAvailability {
   mxMasterButtons: boolean;
   pulsarPro: boolean;
   profiles: boolean;
+  keychronNapeLayers: boolean;
   logitechDetails: boolean;
   advancedHost: boolean;
 }
@@ -58,6 +59,7 @@ const NOTHING: CardAvailability = {
   mxMasterButtons: false,
   pulsarPro: false,
   profiles: false,
+  keychronNapeLayers: false,
   logitechDetails: false,
   advancedHost: false,
 };
@@ -101,6 +103,7 @@ export function cardAvailability(snapshot: ControlSnapshot): CardAvailability {
     lightingAdvanced: host && Boolean(status.lighting || status.lightingZones?.length),
     profiles: traits.logitech
       && status.deviceMode !== undefined && status.deviceMode !== "Unknown",
+    keychronNapeLayers: status.napeLayerCount != null && status.napeLayerCount >= 1,
     logitechDetails: traits.logitech,
     advancedHost: host,
 
diff --git a/src/control-profiles.css b/src/control-profiles.css
index f6f4a67..e89d02f 100644
--- a/src/control-profiles.css
+++ b/src/control-profiles.css
@@ -104,6 +104,7 @@
 .assignment-layer-tabs button[aria-selected="true"] { background:var(--surface-raised);color:var(--ui-accent);box-shadow:0 1px 5px rgb(0 0 0 / 25%) }
 .assignment-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem }
 .assignment-card { display:grid;grid-template-columns:2rem minmax(5rem,.55fr) minmax(9rem,1fr);align-items:center;gap:.55rem;min-width:0;padding:.55rem .6rem;border:1px solid var(--border);border-radius:8px;background:var(--surface-raised) }
+.assignment-card.is-wide { grid-column:1 / -1 }
 .assignment-button-number { display:grid;width:1.8rem;height:1.8rem;place-items:center;border:1px solid var(--border);border-radius:6px;background:var(--surface-control);color:var(--ui-accent);font-family:var(--font-mono);font-size:.55rem }
 .assignment-button-name { overflow:hidden;color:var(--text-hover);font-size:.65rem;text-overflow:ellipsis;white-space:nowrap }
 .assignment-select-wrap { position:relative;min-width:0 }
@@ -170,8 +171,8 @@
 /* An auto column sizes to the widest row, which let rows run past the panel
    instead of shrinking into it. A capped 1fr track forces them to fit and lets
    the text ellipsis do its job. */
-#onboard-profile-list { display:grid;grid-template-columns:minmax(0,1fr);gap:.3rem;padding-bottom:.5rem }
-#onboard-profile-list > * { min-width:0;box-sizing:border-box }
+#onboard-profile-list, #nape-layer-list { display:grid;grid-template-columns:minmax(0,1fr);gap:.3rem;padding-bottom:.5rem }
+#onboard-profile-list > *, #nape-layer-list > * { min-width:0;box-sizing:border-box }
 #onboard-status { color:var(--ghost);font-size:.58rem;line-height:1.45 }
 .profile-row-text { overflow:hidden }
 .profile-row-text strong, .profile-row-text small { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
diff --git a/src/control.css b/src/control.css
index 29f5720..a13f761 100644
--- a/src/control.css
+++ b/src/control.css
@@ -1168,7 +1168,7 @@ body { height: 100vh; overflow: hidden; }
 
 #performance-settings { order: 3; }
 #lighting-settings { order: 4; }
-#logitech-onboard { order: 5; }
+#logitech-onboard, #nape-layers { order: 5; }
 /* The MX Master feature cards are the primary Advanced-tab content; without an
    order they fall to 0 and render above the sticky tab nav (order 1), pushing
    it into the middle of the page. Place them just before Device details. */
diff --git a/src/device/controller.ts b/src/device/controller.ts
index c6e1a3c..5436a21 100644
--- a/src/device/controller.ts
+++ b/src/device/controller.ts
@@ -108,8 +108,20 @@ import { ZaunkoenigHidClient } from "@openmouse/protocol/drivers/zaunkoenig/hid"
 import { TeevolutionHidClient } from "@openmouse/protocol/drivers/teevolution/hid";
 import { teevolutionProfileForCid } from "@openmouse/protocol/teevolution";
 import { VgnF2HidClient } from "@openmouse/protocol/drivers/vgn/hid";
-import { KeychronHidClient } from "@openmouse/protocol/drivers/keychron/hid";
+import { KeychronNapeHidClient } from "@openmouse/protocol/drivers/keychron/nape-hid";
 import { FantechHidClient } from "@openmouse/protocol/drivers/fantech/hid";
+import {
+  KEYCHRON_NAPE_KEYCODE,
+  KEYCHRON_NAPE_KEY_CONTROLS,
+  keychronActionForKeycode,
+  keychronKeycodeForAction,
+  keychronLayerKeymapFromCodes,
+  keychronLayerLabel,
+  keychronOrientationIndex,
+  keychronOrientationLabel,
+  type KeychronNapeButtonAction,
+  type KeychronNapeLayerKeymap,
+} from "@openmouse/protocol/keychron";
 import { SUPPORTED_HID_FILTERS } from "@openmouse/protocol/drivers/vendors";
 import { WLMouseHidClient } from "@openmouse/protocol/drivers/wlmouse/hid";
 import { parsePreviewMode, previewsEnabled, type PreviewMode } from "../preview-modes";
@@ -122,9 +134,11 @@ import type {
   ProfileView,
   DeviceCapabilities,
   DiagnosticsView,
+  NapeAssignmentControl,
   LiftOffLevel,
   PulsarToggleSetting,
   SidebarDevice,
+  StagedNapeAssignment,
   TeevolutionProfile,
   Toast,
   ToastKind,
@@ -161,7 +175,7 @@ function activeAs<T>(...classes: ClientClass<T>[]): T | null {
 
 const DM_CLASSES = [WLMouseHidClient, LamzuHidClient, AtkHidClient, NinjutsoHidClient] as const;
 const RAZER_CLASSES = [RazerHidClient, RazerViperMiniHidClient, RazerViperHidClient, RazerCobraHidClient] as const;
-const NEEDS_OPEN = [TeevolutionHidClient, VgnF2HidClient, KeychronHidClient, ModdoHidClient, ZaunkoenigHidClient, FantechHidClient] as const;
+const NEEDS_OPEN = [TeevolutionHidClient, VgnF2HidClient, KeychronNapeHidClient, ModdoHidClient, ZaunkoenigHidClient, FantechHidClient] as const;
 const DEDICATED = [
   ...DM_CLASSES, ...RAZER_CLASSES, ...NEEDS_OPEN,
   EggOp1HidClient, LogitechHidppClient, OrbitalHidClient, RazerViperV4ProHidClient, FinalmouseHidClient,
@@ -181,7 +195,7 @@ const teevolutionClient = (): TeevolutionHidClient | null => activeAs(Teevolutio
 const finalmouseClient = (): FinalmouseHidClient | null => activeAs(FinalmouseHidClient);
 const orbitalClient = (): OrbitalHidClient | null => activeAs(OrbitalHidClient);
 const vgnClient = (): VgnF2HidClient | null => activeAs(VgnF2HidClient);
-const keychronClient = (): KeychronHidClient | null => activeAs(KeychronHidClient);
+const keychronNapeClient = (): KeychronNapeHidClient | null => activeAs(KeychronNapeHidClient);
 /** Pulsar is the fallback: any supported client no dedicated driver claims. */
 const pulsarClient = (): PulsarClient | null =>
   active !== null && !isEggWeClient(active) && !DEDICATED.some((cls) => active instanceof cls)
@@ -190,6 +204,10 @@ const pulsarClient = (): PulsarClient | null =>
 
 let onboardProfiles: OnboardProfile[] | null = null;
 let buttons: LogitechReprogrammableControl[] | null = null;
+let napeKeymap: KeychronNapeLayerKeymap | null = null;
+const napeKeymaps = new Map<number, KeychronNapeLayerKeymap>();
+const stagedNapeAssignments = new Map<string, StagedNapeAssignment>();
+let keymapReadToken = 0;
 let onboardProfilesLoading = false;
 let lastDeviceMode: MouseStatus["deviceMode"] = "Unknown";
 let lastProfileFormat: MouseStatus["onboardProfileFormat"] = null;
@@ -373,6 +391,9 @@ function buildSnapshot(): ControlSnapshot {
               ? `consumer:${edit.binding.usage}`
               : "keyboard",
       })),
+    napeKeymap,
+    stagedNapeAssignments: [...stagedNapeAssignments.values()],
+    editedNapeLayer,
     analogTuning,
     eggPollingDivider,
     pending: {
@@ -480,7 +501,7 @@ function requireClientMethod<K extends string>(
 function readCapabilities(): DeviceCapabilities {
   const razer = activeAs<RazerHidClient>(RazerHidClient);
   const dm = dmClient();
-  const keychron = keychronClient();
+  const keychron = keychronNapeClient();
   return {
     canDisableSleep: dm?.canDisableSleep === true,
     sleepOptions: dm
@@ -1249,6 +1270,7 @@ function applyStatusInner(deviceStatus: MouseStatus, statusKey?: string): void {
     if (onboardProfiles === null && !onboardProfilesLoading) void reloadOnboardProfiles();
     else syncProfileDerivedState();
   }
+  syncEditedNapeLayer(deviceStatus);
 
   renderDeviceDiagnostics(deviceStatus);
   emit();
@@ -1336,8 +1358,12 @@ async function activateClientNow(client: SupportedClient): Promise<void> {
   clearPendingChanges();
   latestDeviceStatus = null;
   clearActiveClients();
-  if (activeDevice !== client.device) onboardProfiles = null;
+  if (activeDevice !== client.device) {
+    onboardProfiles = null;
+    editedNapeLayer = null;
+  }
   buttons = null;
+  clearNapeKeymaps();
   activeDevice = client.device;
   recordDiagnosticCommand("Read device status");
   lastRenderedStatusKey = null;
@@ -1352,7 +1378,7 @@ async function activateClientNow(client: SupportedClient): Promise<void> {
     const status = await client.readStatus();
     dpiOptions = await client.getDpiOptions();
     const dm = dmClient();
-    const keychron = keychronClient();
+    const keychron = keychronNapeClient();
     if (dm) lastSleepSeconds = status.sleepTimeout ?? dm.getSleepOptions()[0] ?? 60;
     else if (keychron) {
       lastSleepSeconds = status.sleepTimeout ?? keychron.getSleepOptions()[0] ?? 60;
@@ -1361,6 +1387,7 @@ async function activateClientNow(client: SupportedClient): Promise<void> {
     capabilities = readCapabilities();
     applyStatus(status);
     await readButtons();
+    await loadNapeKeymap(status.napeLayer ?? editedNapeLayer ?? 1);
     if (dm) {
       await dm.startNotifications(() => {
         void refreshStatus();
@@ -1410,10 +1437,13 @@ function showDisconnectedState(): void {
   clearActiveClients();
   activeDevice = null;
   onboardProfiles = null;
+  editedNapeLayer = null;
   lastRenderedStatusKey = null;
   capabilities = null;
   clearPendingChanges();
   latestDeviceStatus = null;
+  buttons = null;
+  clearNapeKeymaps();
   setPageTitle();
   deviceStatusText = "No device connected";
   readStatus = "Add a supported device from the sidebar to read its current status.";
@@ -1885,6 +1915,7 @@ const stagedProfileButtonEdits = new Map<string, StagedProfileButtonEdit>();
 let dpiSlotPlan: DpiStagePlan | null = null;
 let dpiAxisLocks: boolean[] = [];
 let editedProfile: number | "host" | null = null;
+let editedNapeLayer: number | null = null;
 
 async function writeStagedProfileSector(): Promise<void> {
   const client = logitechClient();
@@ -2190,6 +2221,284 @@ export async function selectOnboardProfile(sector: number): Promise<void> {
   }
 }
 
+const NAPE_REMAP_GROUP = "keychron-nape-remap";
+
+function napeAssignmentKey(layer: number, control: NapeAssignmentControl): string {
+  if (control.kind === "orientation") return `nape-${layer}-orientation`;
+  return control.kind === "key"
+    ? `nape-${layer}-col-${control.col}`
+    : `nape-${layer}-wheel-${control.clockwise ? "cw" : "ccw"}`;
+}
+
+function napeControlLabel(control: NapeAssignmentControl): string {
+  if (control.kind === "orientation") return "Orientation";
+  if (control.kind === "wheel") return control.clockwise ? "Scroll wheel CW" : "Scroll wheel CCW";
+  return KEYCHRON_NAPE_KEY_CONTROLS.find((entry) => entry.col === control.col)?.name ?? `0${control.col}`;
+}
+
+function previewNapeKeymap(layer: number): KeychronNapeLayerKeymap {
+  return keychronLayerKeymapFromCodes(
+    layer,
+    [
+      KEYCHRON_NAPE_KEYCODE.leftClick,
+      KEYCHRON_NAPE_KEYCODE.scrollMode,
+      KEYCHRON_NAPE_KEYCODE.rightClick,
+      KEYCHRON_NAPE_KEYCODE.dpiCycle,
+      KEYCHRON_NAPE_KEYCODE.forward,
+      KEYCHRON_NAPE_KEYCODE.backward,
+    ],
+    KEYCHRON_NAPE_KEYCODE.volumeDown,
+    KEYCHRON_NAPE_KEYCODE.volumeUp,
+    2,
+  );
+}
+
+function clearNapeKeymaps(): void {
+  napeKeymaps.clear();
+  napeKeymap = null;
+  stagedNapeAssignments.clear();
+}
+
+function rememberNapeKeymap(map: KeychronNapeLayerKeymap): void {
+  napeKeymaps.set(map.layer, map);
+  if (editedNapeLayer == null || editedNapeLayer === map.layer) {
+    napeKeymap = map;
+  }
+}
+
+function installPreviewNapeKeymap(layer: number, force = false): void {
+  const existing = force ? undefined : napeKeymaps.get(layer);
+  rememberNapeKeymap(existing ?? previewNapeKeymap(layer));
+}
+
+function currentNapeKeycode(layer: number, control: NapeAssignmentControl): number | null {
+  const map = napeKeymaps.get(layer) ?? (napeKeymap?.layer === layer ? napeKeymap : null);
+  if (!map) return null;
+  if (control.kind === "orientation") return map.orientationIndex;
+  if (control.kind === "key") return map.keys.find((entry) => entry.col === control.col)?.keycode ?? null;
+  return control.clockwise ? map.wheel.cw.keycode : map.wheel.ccw.keycode;
+}
+
+function patchNapeKeymap(layer: number, control: NapeAssignmentControl, keycode: number): void {
+  const map = napeKeymaps.get(layer);
+  if (!map) return;
+  if (control.kind === "orientation") {
+    const next = { ...map, orientationIndex: keycode };
+    napeKeymaps.set(layer, next);
+    if (napeKeymap?.layer === layer) napeKeymap = next;
+    return;
+  }
+  const columns = KEYCHRON_NAPE_KEY_CONTROLS.map((entry) => {
+    if (control.kind === "key" && entry.col === control.col) return keycode;
+    return map.keys.find((key) => key.col === entry.col)?.keycode ?? 0;
+  });
+  const next = keychronLayerKeymapFromCodes(
+    layer,
+    columns,
+    control.kind === "wheel" && !control.clockwise ? keycode : map.wheel.ccw.keycode,
+    control.kind === "wheel" && control.clockwise ? keycode : map.wheel.cw.keycode,
+    map.orientationIndex,
+  );
+  napeKeymaps.set(layer, next);
+  if (napeKeymap?.layer === layer) napeKeymap = next;
+}
+
+async function loadNapeKeymap(layer: number, force = false): Promise<void> {
+  if (!Number.isInteger(layer) || layer < 1) return;
+  if (isAnyPreview) {
+    installPreviewNapeKeymap(layer, force);
+    emit();
+    return;
+  }
+  const client = keychronNapeClient();
+  if (!client) return;
+  if (!force) {
+    const cached = napeKeymaps.get(layer);
+    if (cached) {
+      napeKeymap = cached;
+      emit();
+      return;
+    }
+  }
+  const token = ++keymapReadToken;
+  try {
+    const map = await client.readLayerKeymap(layer);
+    if (token !== keymapReadToken) return;
+    rememberNapeKeymap(map);
+  } catch (error) {
+    if (token !== keymapReadToken) return;
+    if (napeKeymap?.layer !== layer) napeKeymap = null;
+    recordDiagnosticError(error, "Unable to read Keychron button assignments.");
+  }
+  emit();
+}
+
+function dropStaleNapeAssignments(): void {
+  for (const [key, staged] of stagedNapeAssignments) {
+    if (!isPendingChange(napeAssignmentKey(staged.layer, staged.control))) {
+      stagedNapeAssignments.delete(key);
+    }
+  }
+}
+
+export function applyNapeAssignment(
+  layer: number,
+  control: NapeAssignmentControl,
+  action: KeychronNapeButtonAction,
+): void {
+  if (!isAnyPreview && !keychronNapeClient()) return;
+  const keycode = keychronKeycodeForAction(action);
+  applyNapeAssignmentValue(layer, control, keychronActionForKeycode(keycode), keycode);
+}
+
+export function applyNapeOrientation(layer: number, index: number): void {
+  if (!isAnyPreview && !keychronNapeClient()) return;
+  const next = keychronOrientationIndex(index);
+  applyNapeAssignmentValue(layer, { kind: "orientation" }, keychronOrientationLabel(next), next);
+}
+
+function applyNapeAssignmentValue(
+  layer: number,
+  control: NapeAssignmentControl,
+  action: string,
+  keycode: number,
+): void {
+  const current = currentNapeKeycode(layer, control);
+  const key = napeAssignmentKey(layer, control);
+  if (current === keycode) {
+    stagedNapeAssignments.delete(key);
+    dropPendingChange(key);
+    emit();
+    return;
+  }
+  stagedNapeAssignments.set(key, { layer, control, action, keycode });
+  const name = napeControlLabel(control);
+  const verb = control.kind === "orientation" ? "Set" : "Remap";
+  const gerund = control.kind === "orientation" ? "Setting" : "Remapping";
+  stageChange({
+    key,
+    group: NAPE_REMAP_GROUP,
+    label: `${keychronLayerLabel(layer)} · ${name} → ${action}`,
+    command: `${verb} ${keychronLayerLabel(layer)} ${name} to ${action}`,
+    progress: `${gerund} ${keychronLayerLabel(layer)} ${name} to ${action}…`,
+    apply: writeStagedNapeAssignments,
+  });
+}
+
+async function writeStagedNapeAssignments(): Promise<void> {
+  const edits = [...stagedNapeAssignments.values()];
+  try {
+    if (isAnyPreview) {
+      for (const edit of edits) patchNapeKeymap(edit.layer, edit.control, edit.keycode);
+      return;
+    }
+    const client = keychronNapeClient();
+    if (!client) return;
+    for (const edit of edits) {
+      if (edit.control.kind === "orientation") {
+        await client.setLayerOrientation(edit.layer, edit.keycode);
+      } else if (edit.control.kind === "key") {
+        await client.setKeycode(edit.layer, edit.control.col, edit.keycode);
+      } else {
+        await client.setEncoder(edit.layer, edit.control.clockwise, edit.keycode);
+      }
+      patchNapeKeymap(edit.layer, edit.control, edit.keycode);
+    }
+    const layer = editedNapeLayer ?? napeKeymap?.layer;
+    if (layer != null) {
+      rememberNapeKeymap(await client.readLayerKeymap(layer));
+    }
+  } finally {
+    stagedNapeAssignments.clear();
+  }
+}
+
+function syncEditedNapeLayer(status: MouseStatus): void {
+  const count = status.napeLayerCount;
+  if (count == null || count < 1) {
+    editedNapeLayer = null;
+    return;
+  }
+  if (editedNapeLayer == null) profilesExpanded = true;
+  if (editedNapeLayer == null || editedNapeLayer < 1 || editedNapeLayer > count) {
+    editedNapeLayer = status.napeLayer ?? 1;
+  }
+  const active = status.napeLayer ?? 1;
+  onboardStatus = `Running from ${keychronLayerLabel(active)}. ${count} onboard layer${count === 1 ? "" : "s"} stored on the Nape Pro.`;
+}
+
+export function openNapeLayer(layer: number): void {
+  const count = latestDeviceStatus?.napeLayerCount;
+  if (count == null || layer < 1 || layer > count) return;
+  editedNapeLayer = layer;
+  const cached = napeKeymaps.get(layer);
+  if (cached) napeKeymap = cached;
+  emit();
+  void loadNapeKeymap(layer);
+}
+
+export async function reloadNapeLayers(): Promise<void> {
+  if (isAnyPreview) {
+    const layer = editedNapeLayer ?? latestDeviceStatus?.napeLayer ?? 1;
+    installPreviewNapeKeymap(layer, true);
+    emit();
+    return;
+  }
+  const client = keychronNapeClient();
+  if (!client || refreshInProgress || settingInProgress) return;
+  settingInProgress = true;
+  onboardStatus = "Reading onboard layers…";
+  emit();
+  recordDiagnosticCommand("Read Keychron layers");
+  try {
+    applyStatus(await statusAfterWrite(client));
+    const count = latestDeviceStatus?.napeLayerCount;
+    onboardStatus = count != null
+      ? `${count} onboard layer${count === 1 ? "" : "s"} stored on the Nape Pro.`
+      : "The mouse did not report onboard layers.";
+    napeKeymaps.clear();
+    const layer = editedNapeLayer ?? latestDeviceStatus?.napeLayer ?? 1;
+    await loadNapeKeymap(layer, true);
+  } catch (error) {
+    recordDiagnosticError(error, "Unable to read onboard layers.");
+    onboardStatus = error instanceof Error ? error.message : "Unable to read onboard layers.";
+  } finally {
+    endDeviceWrite();
+  }
+}
+
+export async function switchNapeLayer(layer: number): Promise<void> {
+  const count = latestDeviceStatus?.napeLayerCount;
+  if (count == null || layer < 1 || layer > count) return;
+  if (isAnyPreview) {
+    const status = latestDeviceStatus;
+    if (!status) return;
+    editedNapeLayer = layer;
+    applyStatus({ ...status, napeLayer: layer });
+    installPreviewNapeKeymap(layer);
+    setReadStatus(`Preview: switched to ${keychronLayerLabel(layer)}. Nothing is written.`);
+    return;
+  }
+  const client = keychronNapeClient();
+  if (!client || refreshInProgress || settingInProgress) return;
+  settingInProgress = true;
+  readStatus = `Switching to ${keychronLayerLabel(layer)}…`;
+  emit();
+  recordDiagnosticCommand(`Select Keychron layer ${layer}`);
+  try {
+    await client.setLayer(layer);
+    editedNapeLayer = layer;
+    applyStatus(await statusAfterWrite(client));
+    onboardStatus = `Running from ${keychronLayerLabel(layer)}.`;
+    await loadNapeKeymap(layer);
+  } catch (error) {
+    recordDiagnosticError(error, "Unable to switch layer.");
+    readStatus = error instanceof Error ? error.message : "Unable to switch layer.";
+  } finally {
+    endDeviceWrite();
+  }
+}
+
 /**
  * Enabling or disabling a slot rewrites the directory sector, so it costs a
  * flash erase/write cycle and uses a write sequence not yet proven on hardware.
@@ -2603,7 +2912,7 @@ export function applyPulsarToggle(setting: PulsarToggleSetting, enabled: boolean
 
 export function applyPulsarValue(setting: "debounce" | "sleep", value: number): void {
   if (!(pulsarClient() ?? dmClient() ?? orbitalClient() ?? razerClient()
-    ?? viperClient() ?? teevolutionClient() ?? vgnClient() ?? keychronClient())) return;
+    ?? viperClient() ?? teevolutionClient() ?? vgnClient() ?? keychronNapeClient())) return;
   const asleep = value !== WLMOUSE_SLEEP_NEVER;
   stageChange({
     key: setting,
@@ -3202,6 +3511,11 @@ async function showFixturePreview(name: PreviewMode): Promise<void> {
   // Populate brand capabilities so preview cards that gate on capabilities still render.
   capabilities = readCapabilities();
   applyStatus(fixture.status);
+  if (name === "keychron-nape") {
+    const layer = fixture.status.napeLayer ?? 1;
+    editedNapeLayer = layer;
+    installPreviewNapeKeymap(layer, true);
+  }
   setConnectionButtons(true, "Preview mode");
   setReadStatus(`Preview: ${fixture.label}. Nothing is written.`);
 }
@@ -3218,6 +3532,7 @@ export function start(): void {
     for (const controlId of stagedButtonMappings.keys()) {
       if (!isPendingChange(`button-${controlId}`)) stagedButtonMappings.delete(controlId);
     }
+    dropStaleNapeAssignments();
     if (!isPendingChange(DPI_SLOTS_KEY)) {
       syncDpiSlotPlan();
     }
diff --git a/src/device/types.ts b/src/device/types.ts
index e73ce6b..7854749 100644
--- a/src/device/types.ts
+++ b/src/device/types.ts
@@ -1,4 +1,5 @@
 import type { MouseStatus } from "@openmouse/protocol/drivers/mouse-types";
+import type { KeychronNapeLayerKeymap } from "@openmouse/protocol/keychron";
 import type { LogitechReprogrammableControl } from "@openmouse/protocol/logitech";
 import type { DpiStageCapabilities, DpiStagePlan, OnboardProfile } from "@openmouse/protocol/drivers/logitech/onboard-profiles";
 import type { InterfacePreferences } from "../interface-preferences";
@@ -89,6 +90,18 @@ export interface StagedProfileButtonAssignment {
   value: string;
 }
 
+export type NapeAssignmentControl =
+  | { kind: "key"; col: number }
+  | { kind: "wheel"; clockwise: boolean }
+  | { kind: "orientation" };
+
+export interface StagedNapeAssignment {
+  layer: number;
+  control: NapeAssignmentControl;
+  action: string;
+  keycode: number;
+}
+
 export interface ProfileView {
   entry: OnboardProfile | null;
   summary: { name: string; detail: string };
@@ -162,6 +175,12 @@ export interface ControlSnapshot {
   /** Control id → staged remap target, for controls with an unflashed remap. */
   stagedButtonMappings: Record<number, number>;
   stagedProfileButtonAssignments: StagedProfileButtonAssignment[];
+  /** Nape Pro VIA keymap for the layer currently open in the Buttons tab. */
+  napeKeymap: KeychronNapeLayerKeymap | null;
+  /** Unflashed Nape Pro button and wheel remaps, including other layers. */
+  stagedNapeAssignments: StagedNapeAssignment[];
+  /** Nape Pro layer currently open in the Profiles tab, or null when unread. */
+  editedNapeLayer: number | null;
   analogTuning: AnalogTuningState;
   eggPollingDivider: number | null;
 
diff --git a/src/preview-fixtures.ts b/src/preview-fixtures.ts
index 369b79d..0d2f574 100644
--- a/src/preview-fixtures.ts
+++ b/src/preview-fixtures.ts
@@ -595,10 +595,12 @@ const KEYCHRON: MouseStatus = {
   supportedPollingRates: [500, 1000, 2000, 4000, 8000],
   activeProfile: null,
   connectionType: "Wired",
-  connectionDetail: "Wired USB · 90° orientation · DPI stage 2/5",
+  connectionDetail: "Wired USB · 90° orientation · DPI stage 2/5 · Layer 0",
   liftOffDistance: null,
   supportedLiftOffDistances: [],
   sleepTimeout: 600,
+  napeLayer: 1,
+  napeLayerCount: 8,
   firmware: ["v1.0.4"],
 };
 
@@ -670,7 +672,7 @@ export const PREVIEW_FIXTURES: Record<FixturePreviewMode, PreviewFixture> = {
   vgn: { label: "VGN F2 Master Plus", status: VGN },
   finalmouse: { label: "Finalmouse UltralightX", status: FINALMOUSE },
   ninjutso: { label: "Ninjutso Sora V3", status: NINJUTSO },
-  keychron: { label: "Keychron Nape Pro", status: KEYCHRON },
+  "keychron-nape": { label: "Keychron Nape Pro", status: KEYCHRON },
   "mx-master-3s": { label: "Logitech MX Master 3S", status: LOGITECH_MX_MASTER_3S },
   "logitech-legacy": { label: "Logitech G402 (legacy DPI)", status: LOGITECH_LEGACY },
 };
diff --git a/src/preview-modes.ts b/src/preview-modes.ts
index e0231bc..a6898a9 100644
--- a/src/preview-modes.ts
+++ b/src/preview-modes.ts
@@ -29,7 +29,7 @@ export const PREVIEW_KEYS = [
   "vgn",
   "finalmouse",
   "ninjutso",
-  "keychron",
+  "keychron-nape",
   "mx-master-3s",
   "logitech-legacy",
 ] as const;
@@ -70,7 +70,8 @@ export function parsePreviewMode(value: string | null): PreviewMode | null {
     case "vgn": return "vgn";
     case "finalmouse": return "finalmouse";
     case "ninjutso": return "ninjutso";
-    case "keychron": return "keychron";
+    case "keychron":
+    case "keychron-nape": return "keychron-nape";
     case "mx-master-3s": return "mx-master-3s";
     case "logitech-legacy": return "logitech-legacy";
     default: return null;
diff --git a/src/supported-live.ts b/src/supported-live.ts
index f2205e1..0fdc8b4 100644
--- a/src/supported-live.ts
+++ b/src/supported-live.ts
@@ -1,6 +1,6 @@
 import { WLMOUSE_PRODUCTS } from "@openmouse/protocol/drivers/vendors";
 import { LAMZU_PRODUCTS } from "@openmouse/protocol/lamzu";
-import { KEYCHRON_PRODUCTS } from "@openmouse/protocol/keychron";
+import { KEYCHRON_NAPE_PRODUCTS } from "@openmouse/protocol/keychron";
 import { ORBITAL_DEVICES } from "@openmouse/protocol/orbital";
 import { FANTECH_PRODUCTS } from "@openmouse/protocol/fantech";
 
@@ -126,7 +126,7 @@ export function registrySupportedModels(): Mouse[] {
       pids: [pid],
     });
   }
-  for (const [pid, info] of KEYCHRON_PRODUCTS) {
+  for (const [pid, info] of KEYCHRON_NAPE_PRODUCTS) {
     if (info.receiver) continue;
     rows.push({ brand: "Keychron", model: info.name, status: "supported", req: 0, note: "", pids: [pid] });
   }
diff --git a/src/supported-mice.test.ts b/src/supported-mice.test.ts
index c293d46..6dd7fdc 100644
--- a/src/supported-mice.test.ts
+++ b/src/supported-mice.test.ts
@@ -4,7 +4,7 @@ import test from "node:test";
 import { DEVICE_DRIVERS } from "@openmouse/protocol/drivers/registry";
 import { WLMOUSE_PRODUCTS, VENDOR_ID } from "@openmouse/protocol/drivers/vendors";
 import { EGG_DEVICE_PROFILES } from "@openmouse/protocol/endgame-gear-op1";
-import { KEYCHRON_PRODUCTS } from "@openmouse/protocol/keychron";
+import { KEYCHRON_NAPE_PRODUCTS } from "@openmouse/protocol/keychron";
 import { LAMZU_PRODUCTS } from "@openmouse/protocol/lamzu";
 import {
   LOGITECH_BOLT_PRODUCT_IDS,
@@ -88,7 +88,7 @@ const PID_UNIVERSE = new Set<number>([
   // RAZER_PRODUCTS registry (drivers/razer/devices.ts): Cobra, Viper Mini,
   // Viper V4 Pro.
   0x00a3, 0x008a, 0x00e5, 0x00e6,
-  ...KEYCHRON_PRODUCTS.keys(),
+  ...KEYCHRON_NAPE_PRODUCTS.keys(),
   ...TEEVOLUTION_PRODUCT_IDS,
   ...ZAUNKOENIG_PRODUCT_IDS,
   ...NINJUTSO_LEGACY_MOUSE_PRODUCT_IDS,
diff --git a/src/supported-mice.ts b/src/supported-mice.ts
index 685ec4c..7dbd85c 100644
--- a/src/supported-mice.ts
+++ b/src/supported-mice.ts
@@ -468,7 +468,7 @@ export const MICE: Mouse[] = [
     pids: [0x0440],
     note: "PID 0x0440 in Keychron driver" },
   { brand: "Keychron", model: "M6",                     status: "quickwin",  req: 1,
-    note: "Keychron vendor covered; M6 PID not yet in KEYCHRON_PRODUCT_IDS" },
+    note: "Nape VIA driver only; M6 uses a different Keychron mouse protocol" },
 
   // ASUS ROG ────────────────────────────────────────────────────────────
   { brand: "ASUS ROG", model: "Harpe Ace Aim Lab",      status: "driver",    req: 5,