diff --git a/packages/controls/src/core.test.ts b/packages/controls/src/core.test.ts
index db17229d..a544887c 100644
--- a/packages/controls/src/core.test.ts
+++ b/packages/controls/src/core.test.ts
@@ -148,3 +148,44 @@ describe('createControls - Multi-trigger support', () => {
     controls.destroyControls()
   })
 })
+
+describe('createControls - getMapping / setMapping', () => {
+  const disabledDevices = { keyboard: false, gamepad: false, touch: false, mouse: false }
+
+  it('getMapping returns a copy that does not mutate internal state', () => {
+    const controls = createControls({
+      mapping: { keyboard: { w: 'move-forward' } },
+      ...disabledDevices
+    })
+
+    const snapshot = controls.getMapping()
+    snapshot.keyboard!.w = 'tampered'
+
+    expect(controls.getMapping().keyboard!.w).toBe('move-forward')
+
+    controls.destroyControls()
+  })
+
+  it('setMapping replaces the mapping while preserving the action callback', () => {
+    const onActionMock = vi.fn()
+    const controls = createControls({
+      mapping: { keyboard: { w: 'move-forward' } },
+      onAction: onActionMock,
+      ...disabledDevices
+    })
+
+    controls.setMapping({ keyboard: { ArrowUp: 'move-forward' } })
+
+    expect(controls.getMapping()).toEqual({ keyboard: { ArrowUp: 'move-forward' } })
+
+    controls.currentActions['move-forward'] = {
+      action: 'move-forward',
+      trigger: 'ArrowUp',
+      device: 'keyboard',
+      triggers: new Set(['keyboard:ArrowUp'])
+    }
+    expect(controls.currentActions['move-forward']).toBeDefined()
+
+    controls.destroyControls()
+  })
+})
diff --git a/packages/controls/src/core.ts b/packages/controls/src/core.ts
index 2c664b4e..dbebb63c 100644
--- a/packages/controls/src/core.ts
+++ b/packages/controls/src/core.ts
@@ -1,5 +1,6 @@
 import type {
   ControlAction,
+  ControlMapping,
   ControlsOptions,
   ControlsExtras,
   ControlsCurrents,
@@ -189,7 +190,26 @@ export function createControls(options: ControlsOptions): ControlsExtras {
     autoBind()
   }
 
+  function getMapping(): ControlMapping {
+    return structuredClone(mappingReference.current)
+  }
+
+  function setMapping(newMapping: ControlMapping) {
+    unbindAll()
+    options.mapping = newMapping
+    mappingReference.current = newMapping
+    autoBind()
+  }
+
   autoBind()
 
-  return { destroyControls, remapControlsOptions, currentActions, logs, buttonMap }
+  return {
+    destroyControls,
+    remapControlsOptions,
+    getMapping,
+    setMapping,
+    currentActions,
+    logs,
+    buttonMap
+  }
 }
diff --git a/packages/controls/src/fauxpad.test.ts b/packages/controls/src/fauxpad.test.ts
index ad5e51b6..04f0c7c0 100644
--- a/packages/controls/src/fauxpad.test.ts
+++ b/packages/controls/src/fauxpad.test.ts
@@ -276,6 +276,65 @@ describe('createFauxPadController', () => {
       expect(onActionMock).not.toHaveBeenCalled()
     })
 
+    describe('mouse interaction', () => {
+      const createMouseEvent = (type: string, clientX: number, clientY: number): MouseEvent =>
+        new MouseEvent(type, { clientX, clientY, bubbles: true, cancelable: true })
+
+      it('should become active on mousedown', () => {
+        const edgeElement = createMockElement(100, 100)
+        const insideElement = createMockElement(50, 50)
+
+        const controller = createFauxPadController(mappingReference, handlers)
+        controller.bind(edgeElement, insideElement)
+
+        insideElement.dispatchEvent(createMouseEvent('mousedown', 50, 50))
+
+        expect(controller.isActive()).toBe(true)
+      })
+
+      it('should trigger RIGHT action when dragging right with the mouse', () => {
+        const edgeElement = createMockElement(100, 100)
+        const insideElement = createMockElement(50, 50)
+
+        const controller = createFauxPadController(mappingReference, handlers, { deadzone: 0.1 })
+        controller.bind(edgeElement, insideElement)
+
+        insideElement.dispatchEvent(createMouseEvent('mousedown', 50, 50))
+        window.dispatchEvent(createMouseEvent('mousemove', 100, 50))
+
+        expect(onActionMock).toHaveBeenCalledWith('move-right', 'right', 'faux-pad')
+      })
+
+      it('should release actions on mouseup', () => {
+        const edgeElement = createMockElement(100, 100)
+        const insideElement = createMockElement(50, 50)
+
+        const controller = createFauxPadController(mappingReference, handlers, { deadzone: 0.1 })
+        controller.bind(edgeElement, insideElement)
+
+        insideElement.dispatchEvent(createMouseEvent('mousedown', 50, 50))
+        window.dispatchEvent(createMouseEvent('mousemove', 100, 50))
+        window.dispatchEvent(createMouseEvent('mouseup', 100, 50))
+
+        expect(onReleaseMock).toHaveBeenCalled()
+        expect(controller.isActive()).toBe(false)
+      })
+
+      it('should stop tracking mouse movement after unbind', () => {
+        const edgeElement = createMockElement(100, 100)
+        const insideElement = createMockElement(50, 50)
+
+        const controller = createFauxPadController(mappingReference, handlers, { deadzone: 0.1 })
+        controller.bind(edgeElement, insideElement)
+        controller.unbind(edgeElement, insideElement)
+
+        insideElement.dispatchEvent(createMouseEvent('mousedown', 50, 50))
+        window.dispatchEvent(createMouseEvent('mousemove', 100, 50))
+
+        expect(onActionMock).not.toHaveBeenCalled()
+      })
+    })
+
     describe('8-way direction detection', () => {
       it.each([
         // [label, moveToX, moveToY, expectedDirections]
diff --git a/packages/controls/src/fauxpad.ts b/packages/controls/src/fauxpad.ts
index b3c545f8..36958c10 100644
--- a/packages/controls/src/fauxpad.ts
+++ b/packages/controls/src/fauxpad.ts
@@ -83,6 +83,52 @@ function activateDirections(state: DirectionState, directions: Set<string>) {
   })
 }
 
+interface DragCallbacks {
+  start: (x: number, y: number) => void
+  move: (x: number, y: number) => void
+  end: () => void
+}
+
+/**
+ * Wire touch and mouse dragging on the inside element to the drag callbacks.
+ * Mouse move/up are bound on window so a drag keeps tracking outside the pad.
+ *
+ * @param {HTMLElement} inside The draggable knob element
+ * @param {DragCallbacks} callbacks Start/move/end handlers
+ * @returns {() => void} A function that removes every listener
+ */
+function attachDragListeners(inside: HTMLElement, callbacks: DragCallbacks): () => void {
+  const onTouchStart = (event: TouchEvent) => {
+    event.preventDefault()
+    callbacks.start(event.touches[0].clientX, event.touches[0].clientY)
+  }
+  const onTouchMove = (event: TouchEvent) => {
+    event.preventDefault()
+    callbacks.move(event.touches[0].clientX, event.touches[0].clientY)
+  }
+  const onMouseDown = (event: MouseEvent) => {
+    event.preventDefault()
+    callbacks.start(event.clientX, event.clientY)
+  }
+  const onMouseMove = (event: MouseEvent) => callbacks.move(event.clientX, event.clientY)
+
+  inside.addEventListener('touchstart', onTouchStart as EventListener)
+  inside.addEventListener('touchmove', onTouchMove as EventListener)
+  inside.addEventListener('touchend', callbacks.end)
+  inside.addEventListener('mousedown', onMouseDown as EventListener)
+  window.addEventListener('mousemove', onMouseMove as EventListener)
+  window.addEventListener('mouseup', callbacks.end)
+
+  return () => {
+    inside.removeEventListener('touchstart', onTouchStart as EventListener)
+    inside.removeEventListener('touchmove', onTouchMove as EventListener)
+    inside.removeEventListener('touchend', callbacks.end)
+    inside.removeEventListener('mousedown', onMouseDown as EventListener)
+    window.removeEventListener('mousemove', onMouseMove as EventListener)
+    window.removeEventListener('mouseup', callbacks.end)
+  }
+}
+
 /**
  * Create a virtual faux-pad controller that interprets touch/mouse input into directional actions
  *
@@ -164,17 +210,15 @@ export function createFauxPadController(
     isActive = false
   }
 
-  const onTouchStart = (event: TouchEvent) => {
-    event.preventDefault()
-    initialPosition = { x: event.touches[0].clientX, y: event.touches[0].clientY }
+  const startDrag = (x: number, y: number) => {
+    initialPosition = { x, y }
     isActive = true
   }
 
-  const onTouchMove = (event: TouchEvent) => {
+  const moveDrag = (x: number, y: number) => {
     if (!isActive) return
-    event.preventDefault()
-    const rawX = event.touches[0].clientX - initialPosition.x
-    const rawY = event.touches[0].clientY - initialPosition.y
+    const rawX = x - initialPosition.x
+    const rawY = y - initialPosition.y
     const distance = Math.hypot(rawX, rawY)
     const scale = distance > threshold.x ? threshold.x / distance : 1
     currentPosition = { x: rawX * scale, y: rawY * scale }
@@ -184,25 +228,28 @@ export function createFauxPadController(
     updateDirections()
   }
 
-  const onTouchEnd = () => {
-    reset()
+  const endDrag = () => {
+    if (isActive) reset()
   }
 
+  let detachDrag: (() => void) | null = null
+
   function bind(edgeElement: HTMLElement, insideElement: HTMLElement) {
     insideElement_ = insideElement
     threshold = {
       x: edgeElement.offsetWidth / 2 - insideElement.offsetWidth / 2,
       y: edgeElement.offsetHeight / 2 - insideElement.offsetHeight / 2
     }
-    insideElement.addEventListener('touchstart', onTouchStart as EventListener)
-    insideElement.addEventListener('touchmove', onTouchMove as EventListener)
-    insideElement.addEventListener('touchend', onTouchEnd)
+    detachDrag = attachDragListeners(insideElement, {
+      start: startDrag,
+      move: moveDrag,
+      end: endDrag
+    })
   }
 
-  function unbind(_edgeElement: HTMLElement, insideElement: HTMLElement) {
-    insideElement.removeEventListener('touchstart', onTouchStart as EventListener)
-    insideElement.removeEventListener('touchmove', onTouchMove as EventListener)
-    insideElement.removeEventListener('touchend', onTouchEnd)
+  function unbind(_edgeElement: HTMLElement, _insideElement: HTMLElement) {
+    detachDrag?.()
+    detachDrag = null
     insideElement_ = null
   }
 
diff --git a/packages/controls/src/index.ts b/packages/controls/src/index.ts
index da51d75e..01099572 100644
--- a/packages/controls/src/index.ts
+++ b/packages/controls/src/index.ts
@@ -1,13 +1,17 @@
 // Public API - Barrel export pattern
 export type {
   ControlAction,
+  ControlDevice,
   ControlMapping,
   ControlsOptions,
   ControlsExtras,
   ControlsCurrents,
   ControlsLogs,
   ControlHandlers,
-  ControlEvent
+  ControlEvent,
+  ControlSkin,
+  ControlSkinId,
+  ControlPreset
 } from './types'
 
 export type { FauxPadController, FauxPadPosition, FauxPadOptions } from './fauxpad'
@@ -16,3 +20,13 @@ export { DEFAULT_BUTTON_MAP } from './constants'
 export { createControls, isMobile } from './core'
 export { createFauxPadController } from './fauxpad'
 export type { FauxPadOptions as FauxPadControllerOptions } from './fauxpad'
+
+export { assignBinding, removeBinding, createDefaultMapping } from './mapping'
+export { CONTROL_SKINS, getDefaultSkinId } from './skins'
+export {
+  serializePreset,
+  parsePreset,
+  savePresets,
+  loadPresets,
+  PRESETS_STORAGE_KEY
+} from './presets'
diff --git a/packages/controls/src/mapping.test.ts b/packages/controls/src/mapping.test.ts
new file mode 100644
index 00000000..e6b2286d
--- /dev/null
+++ b/packages/controls/src/mapping.test.ts
@@ -0,0 +1,68 @@
+import { describe, it, expect } from 'vitest'
+import { assignBinding, removeBinding, createDefaultMapping } from './mapping'
+import type { ControlMapping } from './types'
+
+describe('assignBinding', () => {
+  it('sets a trigger to an action for a device without mutating the input', () => {
+    const mapping: ControlMapping = { keyboard: { w: 'move-forward' } }
+
+    const next = assignBinding(mapping, 'keyboard', 'ArrowUp', 'move-forward')
+
+    expect(next.keyboard).toEqual({ ArrowUp: 'move-forward' })
+    expect(mapping.keyboard).toEqual({ w: 'move-forward' })
+  })
+
+  it('removes any other trigger already bound to the same action on that device', () => {
+    const mapping: ControlMapping = { keyboard: { w: 'move-forward', s: 'move-back' } }
+
+    const next = assignBinding(mapping, 'keyboard', 'ArrowUp', 'move-forward')
+
+    expect(next.keyboard).toEqual({ ArrowUp: 'move-forward', s: 'move-back' })
+  })
+
+  it('leaves other devices untouched', () => {
+    const mapping: ControlMapping = {
+      keyboard: { w: 'move-forward' },
+      gamepad: { 'dpad-up': 'move-forward' }
+    }
+
+    const next = assignBinding(mapping, 'keyboard', 'ArrowUp', 'move-forward')
+
+    expect(next.gamepad).toEqual({ 'dpad-up': 'move-forward' })
+  })
+})
+
+describe('removeBinding', () => {
+  it('removes a trigger without mutating the input', () => {
+    const mapping: ControlMapping = { keyboard: { w: 'move-forward', s: 'move-back' } }
+
+    const next = removeBinding(mapping, 'keyboard', 'w')
+
+    expect(next.keyboard).toEqual({ s: 'move-back' })
+    expect(mapping.keyboard).toEqual({ w: 'move-forward', s: 'move-back' })
+  })
+
+  it('is a no-op when the trigger is absent', () => {
+    const mapping: ControlMapping = { keyboard: { w: 'move-forward' } }
+
+    const next = removeBinding(mapping, 'keyboard', 'missing')
+
+    expect(next.keyboard).toEqual({ w: 'move-forward' })
+  })
+})
+
+describe('createDefaultMapping', () => {
+  it('provides keyboard, gamepad and faux-pad bindings', () => {
+    const mapping = createDefaultMapping()
+
+    expect(Object.values(mapping.keyboard ?? {})).toContain('move-forward')
+    expect(Object.values(mapping.gamepad ?? {})).toContain('move-forward')
+    expect(Object.keys(mapping['faux-pad'] ?? {})).toEqual(
+      expect.arrayContaining(['up', 'down', 'left', 'right'])
+    )
+  })
+
+  it('returns a fresh object each call', () => {
+    expect(createDefaultMapping()).not.toBe(createDefaultMapping())
+  })
+})
diff --git a/packages/controls/src/mapping.ts b/packages/controls/src/mapping.ts
new file mode 100644
index 00000000..b218bac0
--- /dev/null
+++ b/packages/controls/src/mapping.ts
@@ -0,0 +1,81 @@
+import type { ControlAction, ControlDevice, ControlMapping } from './types'
+
+/**
+ * Assign a trigger to an action on a device, returning a new mapping.
+ * Any other trigger already bound to the same action on that device is removed,
+ * so each action keeps a single trigger per device.
+ *
+ * @param {ControlMapping} mapping Current mapping (not mutated)
+ * @param {ControlDevice} device Device to update
+ * @param {string} trigger Trigger key/button/direction to bind
+ * @param {ControlAction} action Action the trigger should fire
+ * @returns {ControlMapping} A new mapping with the binding applied
+ */
+export function assignBinding(
+  mapping: ControlMapping,
+  device: ControlDevice,
+  trigger: string,
+  action: ControlAction
+): ControlMapping {
+  const deviceMap = mapping[device] ?? {}
+  const withoutAction = Object.fromEntries(
+    Object.entries(deviceMap).filter(([, boundAction]) => boundAction !== action)
+  )
+  return { ...mapping, [device]: { ...withoutAction, [trigger]: action } }
+}
+
+/**
+ * Remove a trigger from a device, returning a new mapping.
+ *
+ * @param {ControlMapping} mapping Current mapping (not mutated)
+ * @param {ControlDevice} device Device to update
+ * @param {string} trigger Trigger to remove
+ * @returns {ControlMapping} A new mapping without the trigger
+ */
+export function removeBinding(
+  mapping: ControlMapping,
+  device: ControlDevice,
+  trigger: string
+): ControlMapping {
+  const deviceMap = mapping[device] ?? {}
+  const next = Object.fromEntries(
+    Object.entries(deviceMap).filter(([boundTrigger]) => boundTrigger !== trigger)
+  )
+  return { ...mapping, [device]: next }
+}
+
+/**
+ * Build the default control mapping used as a starting point in the mapper.
+ * Covers keyboard (WASD + arrows), gamepad (face buttons + dpad) and faux-pad
+ * directions for the standard movement actions.
+ *
+ * @returns {ControlMapping} A fresh default mapping
+ */
+export function createDefaultMapping(): ControlMapping {
+  return {
+    keyboard: {
+      w: 'move-forward',
+      s: 'move-back',
+      a: 'move-left',
+      d: 'move-right',
+      ArrowUp: 'move-forward',
+      ArrowDown: 'move-back',
+      ArrowLeft: 'move-left',
+      ArrowRight: 'move-right',
+      ' ': 'jump'
+    },
+    gamepad: {
+      'dpad-up': 'move-forward',
+      'dpad-down': 'move-back',
+      'dpad-left': 'move-left',
+      'dpad-right': 'move-right',
+      cross: 'jump'
+    },
+    'faux-pad': {
+      up: 'move-forward',
+      down: 'move-back',
+      left: 'move-left',
+      right: 'move-right'
+    }
+  }
+}
diff --git a/packages/controls/src/presets.test.ts b/packages/controls/src/presets.test.ts
new file mode 100644
index 00000000..1e130438
--- /dev/null
+++ b/packages/controls/src/presets.test.ts
@@ -0,0 +1,50 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import {
+  serializePreset,
+  parsePreset,
+  savePresets,
+  loadPresets,
+  PRESETS_STORAGE_KEY
+} from './presets'
+import type { ControlPreset } from './types'
+
+const preset: ControlPreset = {
+  name: 'My layout',
+  mapping: { keyboard: { w: 'move-forward' } },
+  skin: 'default'
+}
+
+describe('serializePreset / parsePreset', () => {
+  it('round-trips a preset through JSON', () => {
+    expect(parsePreset(serializePreset(preset))).toEqual(preset)
+  })
+
+  it('throws on malformed JSON', () => {
+    expect(() => parsePreset('{ not json')).toThrow()
+  })
+
+  it('throws when required fields are missing or of the wrong type', () => {
+    expect(() => parsePreset(JSON.stringify({ name: 'x', skin: 'default' }))).toThrow()
+    expect(() => parsePreset(JSON.stringify({ name: 1, mapping: {}, skin: 'default' }))).toThrow()
+  })
+})
+
+describe('savePresets / loadPresets', () => {
+  beforeEach(() => {
+    localStorage.clear()
+  })
+
+  it('returns an empty list when nothing is stored', () => {
+    expect(loadPresets()).toEqual([])
+  })
+
+  it('round-trips presets through localStorage', () => {
+    savePresets([preset])
+    expect(loadPresets()).toEqual([preset])
+  })
+
+  it('returns an empty list when the stored value is corrupt', () => {
+    localStorage.setItem(PRESETS_STORAGE_KEY, '{ not json')
+    expect(loadPresets()).toEqual([])
+  })
+})
diff --git a/packages/controls/src/presets.ts b/packages/controls/src/presets.ts
new file mode 100644
index 00000000..d5c8f090
--- /dev/null
+++ b/packages/controls/src/presets.ts
@@ -0,0 +1,74 @@
+import type { ControlMapping, ControlPreset } from './types'
+
+export const PRESETS_STORAGE_KEY = 'webgamekit:controls-presets'
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  typeof value === 'object' && value !== null && !Array.isArray(value)
+
+const isMapping = (value: unknown): value is ControlMapping =>
+  isRecord(value) &&
+  Object.values(value).every(
+    (device) =>
+      isRecord(device) && Object.values(device).every((action) => typeof action === 'string')
+  )
+
+const toPreset = (value: unknown): ControlPreset => {
+  if (
+    !isRecord(value) ||
+    typeof value.name !== 'string' ||
+    typeof value.skin !== 'string' ||
+    !isMapping(value.mapping)
+  ) {
+    throw new Error('Invalid control preset')
+  }
+  return { name: value.name, mapping: value.mapping, skin: value.skin }
+}
+
+/**
+ * Serialize a preset to a JSON string for export.
+ *
+ * @param {ControlPreset} preset Preset to serialize
+ * @returns {string} JSON representation of the preset
+ */
+export function serializePreset(preset: ControlPreset): string {
+  return JSON.stringify(preset)
+}
+
+/**
+ * Parse and validate a preset from a JSON string. Throws when the JSON is
+ * malformed or does not match the preset shape.
+ *
+ * @param {string} json JSON string to parse
+ * @returns {ControlPreset} The validated preset
+ */
+export function parsePreset(json: string): ControlPreset {
+  return toPreset(JSON.parse(json))
+}
+
+/**
+ * Persist a list of presets to localStorage.
+ *
+ * @param {ControlPreset[]} presets Presets to store
+ * @returns {void}
+ */
+export function savePresets(presets: ControlPreset[]): void {
+  localStorage.setItem(PRESETS_STORAGE_KEY, JSON.stringify(presets))
+}
+
+/**
+ * Load stored presets from localStorage. Returns an empty list when nothing is
+ * stored or the stored value is corrupt.
+ *
+ * @returns {ControlPreset[]} The stored presets, or an empty list
+ */
+export function loadPresets(): ControlPreset[] {
+  const raw = localStorage.getItem(PRESETS_STORAGE_KEY)
+  if (!raw) return []
+  try {
+    const parsed: unknown = JSON.parse(raw)
+    if (!Array.isArray(parsed)) return []
+    return parsed.map(toPreset)
+  } catch {
+    return []
+  }
+}
diff --git a/packages/controls/src/skins.test.ts b/packages/controls/src/skins.test.ts
new file mode 100644
index 00000000..4f8a8aa1
--- /dev/null
+++ b/packages/controls/src/skins.test.ts
@@ -0,0 +1,24 @@
+import { describe, it, expect } from 'vitest'
+import { CONTROL_SKINS, getDefaultSkinId } from './skins'
+
+describe('CONTROL_SKINS', () => {
+  it('provides a default plus at least one alternate skin', () => {
+    expect(CONTROL_SKINS.length).toBeGreaterThanOrEqual(2)
+  })
+
+  it('marks exactly one skin as default', () => {
+    expect(CONTROL_SKINS.filter((skin) => skin.isDefault)).toHaveLength(1)
+  })
+
+  it('has unique skin ids', () => {
+    const ids = CONTROL_SKINS.map((skin) => skin.id)
+    expect(new Set(ids).size).toBe(ids.length)
+  })
+})
+
+describe('getDefaultSkinId', () => {
+  it('returns the id of the skin flagged as default', () => {
+    const defaultSkin = CONTROL_SKINS.find((skin) => skin.isDefault)
+    expect(getDefaultSkinId()).toBe(defaultSkin!.id)
+  })
+})
diff --git a/packages/controls/src/skins.ts b/packages/controls/src/skins.ts
new file mode 100644
index 00000000..0254e8e7
--- /dev/null
+++ b/packages/controls/src/skins.ts
@@ -0,0 +1,20 @@
+import type { ControlSkin, ControlSkinId } from './types'
+
+/**
+ * Registry of provided on-screen control skins. The UI renders the visual style
+ * for each id; this data only declares which skins exist and which is default.
+ */
+export const CONTROL_SKINS: ControlSkin[] = [
+  { id: 'default', label: 'Default', isDefault: true },
+  { id: 'neon', label: 'Neon' },
+  { id: 'minimal', label: 'Minimal' }
+]
+
+/**
+ * Get the id of the skin flagged as default, falling back to the first skin.
+ *
+ * @returns {ControlSkinId} The default skin id
+ */
+export function getDefaultSkinId(): ControlSkinId {
+  return (CONTROL_SKINS.find((skin) => skin.isDefault) ?? CONTROL_SKINS[0]).id
+}
diff --git a/packages/controls/src/types.ts b/packages/controls/src/types.ts
index 5baaceeb..06c15790 100644
--- a/packages/controls/src/types.ts
+++ b/packages/controls/src/types.ts
@@ -1,4 +1,5 @@
 export type ControlAction = string
+export type ControlDevice = 'keyboard' | 'gamepad' | 'touch' | 'faux-pad'
 export type ControlEvent = 'touchstart' | 'touchend' | 'mousedown' | 'mouseup'
 
 export interface ControlMapping {
@@ -44,11 +45,27 @@ export type ControlsLogs = Array<{
 export type ControlsExtras = {
   destroyControls: () => void
   remapControlsOptions: (newOptions: ControlsOptions) => void
+  getMapping: () => ControlMapping
+  setMapping: (mapping: ControlMapping) => void
   currentActions: ControlsCurrents
   logs: ControlsLogs
   buttonMap: string[]
 }
 
+export type ControlSkinId = string
+
+export interface ControlSkin {
+  id: ControlSkinId
+  label: string
+  isDefault?: boolean
+}
+
+export interface ControlPreset {
+  name: string
+  mapping: ControlMapping
+  skin: ControlSkinId
+}
+
 export interface ControlHandlers {
   onAction: (action: ControlAction, trigger: string, device: string) => void
   onRelease: (action: ControlAction, trigger: string, device: string) => void
diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss
index 5d987b1d..c9c6a6d6 100644
--- a/src/assets/styles/_variables.scss
+++ b/src/assets/styles/_variables.scss
@@ -145,6 +145,8 @@
   --font-size-sm: 0.75rem; // 12px
   --font-size-base: 0.875rem; // 14px
   --font-size-md: 1rem; // 16px
+  --font-size-lg: 1.25rem; // 20px
+  --font-size-xl: 1.5rem; // 24px
 
   // Opacity
   --opacity-muted: 0.5;
diff --git a/src/components/ControlsMapper/ControlsMapper.vue b/src/components/ControlsMapper/ControlsMapper.vue
new file mode 100644
index 00000000..17d31c68
--- /dev/null
+++ b/src/components/ControlsMapper/ControlsMapper.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, watch, ref, nextTick } from 'vue'
+import '@/assets/styles/lobby-ui.scss'
+import { createControls } from '@webgamekit/controls'
+import type { ControlsExtras } from '@webgamekit/controls'
+import { LobbyUIOptionToggle, LobbyUIButton, LobbyUIFocusHint } from '@/components/LobbyUI'
+import { useControlsMapperStore } from '@/stores/controlsMapper'
+import { useMenuFocus } from '@/composables/useMenuFocus'
+import ControlsMapperBindings from './ControlsMapperBindings.vue'
+import ControlsMapperStyle from './ControlsMapperStyle.vue'
+import ControlsMapperPresets from './ControlsMapperPresets.vue'
+import ControlsMapperTester from './ControlsMapperTester.vue'
+
+const store = useControlsMapperStore()
+
+const panelReference = ref<HTMLElement | null>(null)
+type MapperTab = 'bindings' | 'test' | 'presets'
+const activeTab = ref<MapperTab>('bindings')
+const tabOptions = [
+  { value: 'bindings', label: 'Bindings' },
+  { value: 'test', label: 'Test' },
+  { value: 'presets', label: 'Presets' }
+]
+const setTab = (value: string) => {
+  activeTab.value = value as MapperTab
+}
+
+const saveCurrent = () => store.savePreset(new Date().toLocaleString())
+
+const { focusedHint, inputSource, focusFirst } = useMenuFocus(panelReference, () => store.capturing)
+
+let controls: ControlsExtras | null = null
+
+watch(
+  () => store.mapping,
+  (mapping) => controls?.setMapping(mapping),
+  { deep: true }
+)
+
+onMounted(async () => {
+  controls = createControls({
+    mapping: store.mapping,
+    onAction: (action, trigger, device) => store.recordAction(action, trigger, device),
+    onRelease: (action) => store.recordRelease(action),
+    touch: false,
+    mouse: false
+  })
+  await nextTick()
+  focusFirst()
+})
+
+onUnmounted(() => {
+  controls?.destroyControls()
+  controls = null
+})
+</script>
+
+<template>
+  <section ref="panelReference" class="controls-mapper">
+    <header class="controls-mapper__header" data-lui-row>
+      <h1 class="controls-mapper__title">Controls Mapper</h1>
+      <div class="controls-mapper__actions">
+        <LobbyUIButton variant="primary" @click="saveCurrent">Save</LobbyUIButton>
+        <LobbyUIButton variant="ghost" @click="store.resetToDefaults()">Reset</LobbyUIButton>
+      </div>
+    </header>
+
+    <div class="controls-mapper__tabs" data-lui-row>
+      <LobbyUIOptionToggle
+        :model-value="activeTab"
+        :options="tabOptions"
+        @update:model-value="setTab"
+      />
+    </div>
+
+    <template v-if="activeTab === 'bindings'">
+      <ControlsMapperBindings />
+    </template>
+    <template v-else-if="activeTab === 'test'">
+      <ControlsMapperStyle />
+      <ControlsMapperTester />
+    </template>
+    <template v-else>
+      <ControlsMapperPresets />
+    </template>
+
+    <LobbyUIFocusHint :hint="focusedHint" :visible="inputSource === 'gamepad'" />
+  </section>
+</template>
+
+<style scoped>
+.controls-mapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-6);
+  width: 100%;
+  max-width: 40rem;
+  font-family: var(--lui-font);
+  color: var(--lui-text-color);
+}
+
+.controls-mapper__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--spacing-3);
+  margin-bottom: var(--spacing-4);
+}
+
+.controls-mapper__title {
+  margin: 0;
+  flex: 1 1 auto;
+  font-weight: 900;
+  font-size: var(--lui-text-important);
+  text-shadow: var(--lui-text-shadow);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  line-height: 1;
+}
+
+.controls-mapper__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.controls-mapper__tabs {
+  display: flex;
+  gap: var(--spacing-2);
+}
+</style>
diff --git a/src/components/ControlsMapper/ControlsMapperBindings.vue b/src/components/ControlsMapper/ControlsMapperBindings.vue
new file mode 100644
index 00000000..dc4165cd
--- /dev/null
+++ b/src/components/ControlsMapper/ControlsMapperBindings.vue
@@ -0,0 +1,246 @@
+<script setup lang="ts">
+import { computed, ref, type Component } from 'vue'
+import { X, Keyboard, Gamepad2, Joystick } from 'lucide-vue-next'
+import {
+  LobbyUIButton,
+  LobbyUIIconButton,
+  LobbyUIOptionToggle,
+  LobbyUIConfigField
+} from '@/components/LobbyUI'
+import { useControlsMapperStore } from '@/stores/controlsMapper'
+import type { ControlDevice } from '@webgamekit/controls'
+import type { LobbyConfigField } from '@/types/lobbyWizard'
+import { MAPPER_ACTIONS, MAPPER_DEVICES, FAUX_PAD_DIRECTIONS } from './config'
+import { useBindingCapture } from './useBindingCapture'
+
+const store = useControlsMapperStore()
+const { listeningDevice, capture, cancel } = useBindingCapture()
+
+const captureDevices: ControlDevice[] = ['keyboard', 'gamepad']
+
+const DEVICE_ICONS: Record<string, Component> = {
+  keyboard: Keyboard,
+  gamepad: Gamepad2,
+  'faux-pad': Joystick
+}
+
+const deviceOptions = MAPPER_DEVICES.map((device) => ({
+  value: device.id,
+  label: device.label,
+  icon: DEVICE_ICONS[device.id]
+}))
+
+const activeDevice = computed(() => store.activeDevice)
+const setDevice = (device: string) => store.setActiveDevice(device as ControlDevice)
+
+const listeningActionId = ref<string | null>(null)
+
+const formatTrigger = (trigger: string): string => (trigger === ' ' ? 'Space' : trigger)
+
+const triggersForAction = (device: ControlDevice, actionId: string): string[] =>
+  Object.entries(store.mapping[device] ?? {})
+    .filter(([, action]) => action === actionId)
+    .map(([trigger]) => trigger)
+
+const displayTrigger = (device: ControlDevice, actionId: string): string =>
+  triggersForAction(device, actionId).map(formatTrigger).join(', ') || '—'
+
+const listen = async (device: ControlDevice, actionId: string) => {
+  listeningActionId.value = actionId
+  store.setCapturing(true)
+  try {
+    const trigger = await capture(device)
+    store.bindTrigger(device, trigger, actionId)
+  } catch {
+    // capture cancelled — nothing to bind
+  } finally {
+    store.setCapturing(false)
+    if (listeningActionId.value === actionId) listeningActionId.value = null
+  }
+}
+
+const resetAction = (device: ControlDevice, actionId: string) => {
+  triggersForAction(device, actionId).forEach((trigger) => store.clearTrigger(device, trigger))
+}
+
+const NONE_OPTION = 'none'
+const BUTTON_OPTION = 'button'
+const DIRECTIONAL_ACTIONS = ['move-forward', 'move-back', 'move-left', 'move-right']
+const isDirectional = (actionId: string): boolean => DIRECTIONAL_ACTIONS.includes(actionId)
+
+const DIRECTION_OPTIONS = [
+  { value: NONE_OPTION, label: 'None' },
+  ...FAUX_PAD_DIRECTIONS.map((direction) => ({ value: direction, label: direction }))
+]
+const BUTTON_OPTIONS = [
+  { value: NONE_OPTION, label: 'None' },
+  { value: BUTTON_OPTION, label: 'Button' }
+]
+
+// The faux-pad key bound to a movement action is its direction; a non-directional
+// action (e.g. jump) is bound to a same-named on-screen button instead.
+const fauxDirectionForAction = (actionId: string): string => {
+  const entry = Object.entries(store.mapping['faux-pad'] ?? {}).find(
+    ([, action]) => action === actionId
+  )
+  return entry ? entry[0] : NONE_OPTION
+}
+
+const fauxPadValue = ({ id }: { id: string }): string => {
+  if (isDirectional(id)) return fauxDirectionForAction(id)
+  return store.mapping['faux-pad']?.[id] ? BUTTON_OPTION : NONE_OPTION
+}
+
+const fauxPadField = (action: { id: string; label: string }): LobbyConfigField => ({
+  type: 'select',
+  key: action.id,
+  label: action.label,
+  value: fauxPadValue(action),
+  options: isDirectional(action.id) ? DIRECTION_OPTIONS : BUTTON_OPTIONS
+})
+
+const setFauxPad = (actionId: string, value: string | number) => {
+  const choice = String(value)
+  if (isDirectional(actionId)) {
+    if (choice === NONE_OPTION) {
+      const current = fauxDirectionForAction(actionId)
+      if (current !== NONE_OPTION) store.clearTrigger('faux-pad', current)
+    } else {
+      store.bindTrigger('faux-pad', choice, actionId)
+    }
+  } else if (choice === NONE_OPTION) {
+    store.clearTrigger('faux-pad', actionId)
+  } else {
+    store.bindTrigger('faux-pad', actionId, actionId)
+  }
+}
+
+const isListening = computed(() => listeningDevice.value !== null)
+</script>
+
+<template>
+  <div class="mapper-bindings">
+    <div class="mapper-bindings__tabs" data-lui-row>
+      <LobbyUIOptionToggle
+        :model-value="activeDevice"
+        :options="deviceOptions"
+        hide-label-on-mobile
+        @update:model-value="setDevice"
+      />
+    </div>
+
+    <div v-if="activeDevice !== 'faux-pad'" class="mapper-bindings__grid">
+      <div
+        v-for="action in MAPPER_ACTIONS"
+        :key="action.id"
+        class="mapper-bindings__row"
+        data-lui-row
+      >
+        <span class="mapper-bindings__label">{{ action.label }}</span>
+        <button
+          class="mapper-bindings__value"
+          :class="{ 'mapper-bindings__value--listening': listeningActionId === action.id }"
+          type="button"
+          :title="`Change ${action.label}, then press an input to set it`"
+          @click="listen(activeDevice, action.id)"
+        >
+          {{ listeningActionId === action.id ? 'Press…' : displayTrigger(activeDevice, action.id) }}
+        </button>
+        <LobbyUIIconButton
+          variant="ghost"
+          :title="`Reset ${action.label}`"
+          @click="resetAction(activeDevice, action.id)"
+        >
+          <X class="mapper-bindings__icon" />
+        </LobbyUIIconButton>
+      </div>
+    </div>
+
+    <div v-else class="mapper-bindings__grid mapper-bindings__grid--faux">
+      <div
+        v-for="action in MAPPER_ACTIONS"
+        :key="action.id"
+        class="mapper-bindings__row"
+        data-lui-row
+      >
+        <span class="mapper-bindings__label">{{ action.label }}</span>
+        <LobbyUIConfigField :field="fauxPadField(action)" @change="setFauxPad" />
+      </div>
+    </div>
+
+    <div v-if="isListening" class="mapper-bindings__cancel" data-lui-row>
+      <LobbyUIButton variant="ghost" @click="cancel">Cancel</LobbyUIButton>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.mapper-bindings {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+}
+
+.mapper-bindings__tabs {
+  margin-bottom: var(--spacing-6);
+}
+
+.mapper-bindings__grid {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: var(--spacing-2) var(--spacing-3);
+}
+
+.mapper-bindings__grid--faux {
+  grid-template-columns: auto 1fr;
+}
+
+.mapper-bindings__row {
+  display: contents;
+}
+
+.mapper-bindings__label {
+  font-family: var(--lui-font);
+  font-weight: 900;
+  font-size: var(--lui-text-small);
+  color: var(--lui-text-color);
+  text-shadow: var(--lui-text-shadow);
+  text-transform: uppercase;
+}
+
+.mapper-bindings__value {
+  justify-self: start;
+  padding: var(--spacing-1) var(--spacing-2);
+  border: 2px solid transparent;
+  border-radius: var(--radius-md);
+  background: transparent;
+  font-family: var(--lui-font);
+  font-weight: 900;
+  font-size: var(--lui-text-medium);
+  color: var(--lui-text-color);
+  text-shadow: var(--lui-text-shadow);
+  text-transform: uppercase;
+  text-align: left;
+  cursor: pointer;
+}
+
+.mapper-bindings__value:hover,
+.mapper-bindings__value:focus,
+.mapper-bindings__value:focus-visible {
+  outline: none;
+  color: var(--lui-focus-color);
+  border-color: var(--lui-focus-color);
+}
+
+.mapper-bindings__value--listening {
+  color: var(--lui-focus-color);
+  border-color: var(--lui-focus-color);
+}
+
+.mapper-bindings__icon {
+  width: 1.3em;
+  height: 1.3em;
+  filter: drop-shadow(2px 2px 0 #000);
+}
+</style>
diff --git a/src/components/ControlsMapper/ControlsMapperPresets.vue b/src/components/ControlsMapper/ControlsMapperPresets.vue
new file mode 100644
index 00000000..4753ce63
--- /dev/null
+++ b/src/components/ControlsMapper/ControlsMapperPresets.vue
@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Upload, Download, X } from 'lucide-vue-next'
+import { LobbyUIRow, LobbyUIButton, LobbyUIIconButton } from '@/components/LobbyUI'
+import { useControlsMapperStore } from '@/stores/controlsMapper'
+
+const store = useControlsMapperStore()
+
+const fileInput = ref<HTMLInputElement | null>(null)
+const error = ref('')
+
+const dateName = (): string => new Date().toLocaleString()
+
+const fileStamp = (): string => new Date().toISOString().replace(/[.:]/g, '-')
+
+const downloadConfig = () => {
+  const json = store.exportCurrent(dateName())
+  const url = URL.createObjectURL(new Blob([json], { type: 'application/json' }))
+  const link = document.createElement('a')
+  link.href = url
+  link.download = `controls-config-${fileStamp()}.json`
+  link.click()
+  URL.revokeObjectURL(url)
+}
+
+const importConfig = async (event: Event) => {
+  error.value = ''
+  const file = (event.target as HTMLInputElement).files?.[0]
+  if (!file) return
+  try {
+    store.importPreset(await file.text())
+  } catch {
+    error.value = 'Invalid config file'
+  } finally {
+    if (fileInput.value) fileInput.value.value = ''
+  }
+}
+</script>
+
+<template>
+  <div class="mapper-presets">
+    <div class="mapper-presets__list" data-lui-row>
+      <LobbyUIButton variant="ghost" title="Import a config file" @click="fileInput?.click()">
+        <Upload class="mapper-presets__icon" />
+        Import
+      </LobbyUIButton>
+      <LobbyUIButton variant="ghost" title="Download the current config" @click="downloadConfig">
+        <Download class="mapper-presets__icon" />
+        Download
+      </LobbyUIButton>
+    </div>
+
+    <div
+      v-for="preset in store.presets"
+      :key="preset.name"
+      class="mapper-presets__saved"
+      data-lui-row
+    >
+      <LobbyUIButton
+        variant="ghost"
+        size="sm"
+        class="mapper-presets__load"
+        :title="`Load ${preset.name}`"
+        @click="store.applyPreset(preset.name)"
+      >
+        {{ preset.name }}
+      </LobbyUIButton>
+      <LobbyUIIconButton
+        variant="ghost"
+        size="sm"
+        :title="`Delete ${preset.name}`"
+        @click="store.deletePreset(preset.name)"
+      >
+        <X class="mapper-presets__icon" />
+      </LobbyUIIconButton>
+    </div>
+
+    <p v-if="error" class="mapper-presets__error">{{ error }}</p>
+
+    <input
+      ref="fileInput"
+      type="file"
+      accept="application/json"
+      class="mapper-presets__file"
+      @change="importConfig"
+    />
+  </div>
+</template>
+
+<style scoped>
+.mapper-presets {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.mapper-presets__list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.mapper-presets__saved {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+}
+
+.mapper-presets__load {
+  min-width: 0;
+  text-align: left;
+}
+
+.mapper-presets__icon {
+  width: 1.2em;
+  height: 1.2em;
+  transform: translateY(0.12em);
+  filter: drop-shadow(2px 2px 0 #000);
+}
+
+.mapper-presets__error {
+  margin: 0;
+  font-family: var(--lui-font);
+  font-size: var(--lui-text-small);
+  color: var(--lui-focus-color);
+  text-shadow: var(--lui-text-shadow);
+}
+
+.mapper-presets__file {
+  display: none;
+}
+</style>
diff --git a/src/components/ControlsMapper/ControlsMapperStyle.vue b/src/components/ControlsMapper/ControlsMapperStyle.vue
new file mode 100644
index 00000000..36178de9
--- /dev/null
+++ b/src/components/ControlsMapper/ControlsMapperStyle.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { CONTROL_SKINS } from '@webgamekit/controls'
+import { LobbyUIRow, LobbyUIOptionToggle } from '@/components/LobbyUI'
+import TouchControl from '@/components/TouchControl.vue'
+import { useControlsMapperStore } from '@/stores/controlsMapper'
+import { useGamepadStick } from './useGamepadStick'
+
+const store = useControlsMapperStore()
+
+const { position: stickPosition } = useGamepadStick()
+
+const skinOptions = CONTROL_SKINS.map((skin) => ({ value: skin.id, label: skin.label }))
+
+const fauxPadMapping = computed(() => store.mapping['faux-pad'] ?? {})
+
+const buttonMapping = computed(() => {
+  const jumpEntry = Object.entries(store.mapping.keyboard ?? {}).find(
+    ([, action]) => action === 'jump'
+  )
+  return { [jumpEntry?.[0] === ' ' ? 'Space' : (jumpEntry?.[0] ?? 'A')]: 'jump' }
+})
+
+const previewAction = (action: string) => store.recordAction(action, 'preview', 'faux-pad')
+</script>
+
+<template>
+  <div class="mapper-style">
+    <LobbyUIRow label="Skin">
+      <LobbyUIOptionToggle
+        size="sm"
+        :model-value="store.selectedSkin"
+        :options="skinOptions"
+        @update:model-value="store.selectSkin"
+      />
+    </LobbyUIRow>
+
+    <div class="mapper-style__preview">
+      <div class="mapper-style__stage">
+        <TouchControl
+          :key="`pad-${store.selectedSkin}`"
+          inline
+          mode="faux-pad"
+          :skin="store.selectedSkin"
+          :mapping="fauxPadMapping"
+          :position="stickPosition"
+          :on-action="previewAction"
+        />
+      </div>
+      <div class="mapper-style__stage">
+        <TouchControl
+          :key="`btn-${store.selectedSkin}`"
+          inline
+          mode="button"
+          :skin="store.selectedSkin"
+          :mapping="buttonMapping"
+          :on-action="previewAction"
+        />
+      </div>
+    </div>
+
+    <p class="mapper-style__hint">
+      Drag the pad, move a gamepad stick, or tap the button to test it.
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.mapper-style {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+}
+
+.mapper-style__preview {
+  display: flex;
+  gap: var(--spacing-6);
+  justify-content: center;
+}
+
+.mapper-style__stage {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 140px;
+  height: 140px;
+}
+
+.mapper-style__hint {
+  margin: 0;
+  text-align: center;
+  font-family: var(--lui-font);
+  font-size: var(--lui-text-small);
+  color: var(--lui-text-color);
+  text-shadow: var(--lui-text-shadow);
+}
+</style>
diff --git a/src/components/ControlsMapper/ControlsMapperTester.vue b/src/components/ControlsMapper/ControlsMapperTester.vue
new file mode 100644
index 00000000..7fd83126
--- /dev/null
+++ b/src/components/ControlsMapper/ControlsMapperTester.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { LobbyUIRow } from '@/components/LobbyUI'
+import { useControlsMapperStore } from '@/stores/controlsMapper'
+
+const store = useControlsMapperStore()
+
+const formatTrigger = (trigger: string): string => (trigger === ' ' ? 'Space' : trigger)
+</script>
+
+<template>
+  <div class="mapper-tester">
+    <LobbyUIRow label="Active">
+      <div class="mapper-tester__chips">
+        <span v-for="action in store.liveActions" :key="action" class="mapper-tester__chip">
+          {{ action }}
+        </span>
+        <span v-if="!store.liveActions.length" class="mapper-tester__idle">
+          Press keys, gamepad buttons, or drag the pad…
+        </span>
+      </div>
+    </LobbyUIRow>
+
+    <ul class="mapper-tester__log">
+      <li
+        v-for="(event, index) in store.recentEvents"
+        :key="`${event.timestamp}-${index}`"
+        class="mapper-tester__event"
+      >
+        <span class="mapper-tester__event-type">{{ event.type }}</span>
+        <span class="mapper-tester__event-action">{{ event.action }}</span>
+        <span class="mapper-tester__event-trigger">
+          {{ event.device ? `${event.device}:${formatTrigger(event.trigger)}` : '' }}
+        </span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.mapper-tester {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  font-family: var(--lui-font);
+  color: var(--lui-text-color);
+  text-shadow: var(--lui-text-shadow);
+}
+
+.mapper-tester__chips {
+  display: flex;
+  gap: var(--spacing-2);
+  flex-wrap: wrap;
+  align-items: center;
+  min-height: 2rem;
+  justify-content: flex-end;
+}
+
+.mapper-tester__chip {
+  padding: var(--spacing-1) var(--spacing-3);
+  border: 2px solid var(--lui-stroke);
+  box-shadow: var(--lui-border-shadow);
+  border-radius: var(--radius-xl, 1.25rem);
+  font-size: var(--lui-text-small);
+  text-transform: uppercase;
+}
+
+.mapper-tester__idle {
+  font-size: var(--lui-text-small);
+  opacity: 0.7;
+}
+
+.mapper-tester__log {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  max-height: 10rem;
+  overflow-y: auto;
+}
+
+.mapper-tester__event {
+  display: grid;
+  grid-template-columns: 5rem 1fr auto;
+  gap: var(--spacing-2);
+  font-size: var(--lui-text-small);
+}
+
+.mapper-tester__event-type {
+  text-transform: uppercase;
+  opacity: 0.7;
+}
+</style>
diff --git a/src/components/ControlsMapper/config.ts b/src/components/ControlsMapper/config.ts
new file mode 100644
index 00000000..85aa3384
--- /dev/null
+++ b/src/components/ControlsMapper/config.ts
@@ -0,0 +1,27 @@
+import type { ControlDevice } from '@webgamekit/controls'
+
+export interface MapperActionConfig {
+  id: string
+  label: string
+}
+
+export interface MapperDeviceConfig {
+  id: ControlDevice
+  label: string
+}
+
+export const MAPPER_ACTIONS: MapperActionConfig[] = [
+  { id: 'move-forward', label: 'Move forward' },
+  { id: 'move-back', label: 'Move back' },
+  { id: 'move-left', label: 'Move left' },
+  { id: 'move-right', label: 'Move right' },
+  { id: 'jump', label: 'Jump' }
+]
+
+export const MAPPER_DEVICES: MapperDeviceConfig[] = [
+  { id: 'keyboard', label: 'Keyboard' },
+  { id: 'gamepad', label: 'Gamepad' },
+  { id: 'faux-pad', label: 'Faux-pad' }
+]
+
+export const FAUX_PAD_DIRECTIONS = ['up', 'down', 'left', 'right'] as const
diff --git a/src/components/ControlsMapper/useBindingCapture.ts b/src/components/ControlsMapper/useBindingCapture.ts
new file mode 100644
index 00000000..02ba74fb
--- /dev/null
+++ b/src/components/ControlsMapper/useBindingCapture.ts
@@ -0,0 +1,162 @@
+import { ref } from 'vue'
+import { DEFAULT_BUTTON_MAP } from '@webgamekit/controls'
+import type { ControlDevice } from '@webgamekit/controls'
+
+const AXIS_THRESHOLD = 0.6
+
+const buttonName = (index: number): string => DEFAULT_BUTTON_MAP[index] ?? `button-${index}`
+
+const axisName = (index: number, value: number): string => {
+  const dir = index % 2 === 0 ? (value < 0 ? 'left' : 'right') : value < 0 ? 'up' : 'down'
+  return `axis${index}-${dir}`
+}
+
+const pressedButtons = (pad: Gamepad | undefined): number[] =>
+  pad ? pad.buttons.flatMap((button, index) => (button.pressed ? [index] : [])) : []
+
+const deflectedAxes = (pad: Gamepad | undefined): number[] =>
+  pad ? pad.axes.flatMap((value, index) => (Math.abs(value) > AXIS_THRESHOLD ? [index] : [])) : []
+
+const findFresh = (values: number[], ignored: number[]): number | undefined =>
+  values.find((value) => !ignored.includes(value))
+
+type RegisterCancel = (cancel: () => void) => void
+
+// Capture a key, but interrupt if a gamepad input (wrong device) is used.
+const captureKeyboard = (registerCancel: RegisterCancel): Promise<string> =>
+  new Promise((resolve, reject) => {
+    let frame = 0
+    let ignoredButtons: number[] | null = null
+    let ignoredAxes: number[] | null = null
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      event.preventDefault()
+      window.removeEventListener('keydown', onKeyDown)
+      cancelAnimationFrame(frame)
+      resolve(event.key)
+    }
+
+    const poll = () => {
+      const pad = navigator.getGamepads?.().find((entry) => entry) ?? undefined
+      const buttons = pressedButtons(pad)
+      const axes = deflectedAxes(pad)
+      if (ignoredButtons === null) ignoredButtons = buttons
+      if (ignoredAxes === null) ignoredAxes = axes
+      if (
+        findFresh(buttons, ignoredButtons) !== undefined ||
+        findFresh(axes, ignoredAxes) !== undefined
+      ) {
+        window.removeEventListener('keydown', onKeyDown)
+        cancelAnimationFrame(frame)
+        reject(new Error('interrupted'))
+        return
+      }
+      ignoredButtons = ignoredButtons.filter((index) => buttons.includes(index))
+      ignoredAxes = ignoredAxes.filter((index) => axes.includes(index))
+      frame = requestAnimationFrame(poll)
+    }
+
+    window.addEventListener('keydown', onKeyDown)
+    frame = requestAnimationFrame(poll)
+    registerCancel(() => {
+      window.removeEventListener('keydown', onKeyDown)
+      cancelAnimationFrame(frame)
+      reject(new Error('cancelled'))
+    })
+  })
+
+// Capture a gamepad button (on release) or stick axis, but interrupt if a key
+// (wrong device) is pressed. Inputs already active when capture starts are
+// ignored until they return to rest.
+const captureGamepad = (registerCancel: RegisterCancel): Promise<string> =>
+  new Promise((resolve, reject) => {
+    let frame = 0
+    let ignoredButtons: number[] | null = null
+    let ignoredAxes: number[] | null = null
+    let pendingButton: number | null = null
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      event.preventDefault()
+      window.removeEventListener('keydown', onKeyDown)
+      cancelAnimationFrame(frame)
+      reject(new Error('interrupted'))
+    }
+
+    const settle = (trigger: string) => {
+      window.removeEventListener('keydown', onKeyDown)
+      cancelAnimationFrame(frame)
+      resolve(trigger)
+    }
+
+    const poll = () => {
+      const pad = navigator.getGamepads?.().find((entry) => entry) ?? undefined
+      const buttons = pressedButtons(pad)
+      const axes = deflectedAxes(pad)
+      if (ignoredButtons === null) ignoredButtons = buttons
+      if (ignoredAxes === null) ignoredAxes = axes
+
+      if (pendingButton !== null) {
+        if (!buttons.includes(pendingButton)) {
+          settle(buttonName(pendingButton))
+          return
+        }
+      } else {
+        const freshButton = findFresh(buttons, ignoredButtons)
+        const freshAxis = findFresh(axes, ignoredAxes)
+        if (freshButton !== undefined) {
+          pendingButton = freshButton
+        } else if (freshAxis !== undefined && pad) {
+          settle(axisName(freshAxis, pad.axes[freshAxis]))
+          return
+        } else {
+          ignoredButtons = ignoredButtons.filter((index) => buttons.includes(index))
+          ignoredAxes = ignoredAxes.filter((index) => axes.includes(index))
+        }
+      }
+      frame = requestAnimationFrame(poll)
+    }
+
+    window.addEventListener('keydown', onKeyDown)
+    frame = requestAnimationFrame(poll)
+    registerCancel(() => {
+      window.removeEventListener('keydown', onKeyDown)
+      cancelAnimationFrame(frame)
+      reject(new Error('cancelled'))
+    })
+  })
+
+/**
+ * Capture the next physical input for a device so it can be assigned to an
+ * action. Keyboard resolves with the pressed key; gamepad resolves with its
+ * mapped button/axis name. Input from the other device interrupts the capture.
+ *
+ * @returns {{ listeningDevice: import('vue').Ref<ControlDevice | null>, capture: (device: ControlDevice) => Promise<string>, cancel: () => void }} Capture helpers
+ */
+export function useBindingCapture() {
+  const listeningDevice = ref<ControlDevice | null>(null)
+  let cancelActive: (() => void) | null = null
+
+  const cancel = () => {
+    cancelActive?.()
+    cancelActive = null
+    listeningDevice.value = null
+  }
+
+  const capture = async (device: ControlDevice): Promise<string> => {
+    cancel()
+    listeningDevice.value = device
+    const registerCancel: RegisterCancel = (fn) => {
+      cancelActive = fn
+    }
+    try {
+      return device === 'gamepad'
+        ? await captureGamepad(registerCancel)
+        : await captureKeyboard(registerCancel)
+    } finally {
+      cancelActive = null
+      listeningDevice.value = null
+    }
+  }
+
+  return { listeningDevice, capture, cancel }
+}
diff --git a/src/components/ControlsMapper/useGamepadStick.ts b/src/components/ControlsMapper/useGamepadStick.ts
new file mode 100644
index 00000000..de753f0c
--- /dev/null
+++ b/src/components/ControlsMapper/useGamepadStick.ts
@@ -0,0 +1,37 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const DEFAULT_DEADZONE = 0.15
+
+/**
+ * Track the first connected gamepad's left stick as a normalized -1..1 vector,
+ * polled each animation frame. Used to drive the faux-pad preview visually.
+ *
+ * @param {number} deadzone Minimum absolute axis value before it registers
+ * @returns {{ position: import('vue').Ref<{ x: number; y: number }> }} Reactive stick position
+ */
+export function useGamepadStick(deadzone: number = DEFAULT_DEADZONE) {
+  const position = ref({ x: 0, y: 0 })
+  let frame = 0
+
+  const applyDeadzone = (value: number): number => (Math.abs(value) > deadzone ? value : 0)
+
+  const poll = () => {
+    const pad = navigator.getGamepads?.().find((entry) => entry)
+    const x = applyDeadzone(pad?.axes[0] ?? 0)
+    const y = applyDeadzone(pad?.axes[1] ?? 0)
+    if (x !== position.value.x || y !== position.value.y) {
+      position.value = { x, y }
+    }
+    frame = requestAnimationFrame(poll)
+  }
+
+  onMounted(() => {
+    frame = requestAnimationFrame(poll)
+  })
+
+  onUnmounted(() => {
+    cancelAnimationFrame(frame)
+  })
+
+  return { position }
+}
diff --git a/src/components/LobbyUI/LobbyUIButton.vue b/src/components/LobbyUI/LobbyUIButton.vue
index f4d8f6a1..d47893f6 100644
--- a/src/components/LobbyUI/LobbyUIButton.vue
+++ b/src/components/LobbyUI/LobbyUIButton.vue
@@ -2,17 +2,18 @@
 withDefaults(
   defineProps<{
     variant?: 'cta' | 'primary' | 'ghost'
+    size?: 'sm' | 'md' | 'lg'
     disabled?: boolean
     autofocus?: boolean
   }>(),
-  { variant: 'primary', disabled: false, autofocus: false }
+  { variant: 'primary', size: 'md', disabled: false, autofocus: false }
 )
 </script>
 
 <template>
   <button
     class="lui-btn"
-    :class="`lui-btn--${variant}`"
+    :class="[`lui-btn--${variant}`, `lui-btn--${size}`]"
     type="button"
     :disabled="disabled"
     :autofocus="autofocus"
@@ -23,7 +24,12 @@ withDefaults(
 
 <style scoped>
 .lui-btn {
-  padding: var(--spacing-2) var(--spacing-4);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-1);
+  padding-block: calc(var(--spacing-2) + 0.06em) calc(var(--spacing-2) - 0.06em);
+  padding-inline: var(--spacing-4);
   border: 3px solid transparent;
   background: transparent;
   color: var(--lui-text-color);
@@ -38,23 +44,29 @@ withDefaults(
 }
 
 .lui-btn--cta {
-  border-color: var(--lui-stroke);
-  box-shadow: var(--lui-border-shadow);
   font-size: var(--lui-text-important);
-  padding: var(--spacing-2) var(--spacing-5, 1.5rem);
+  padding-inline: var(--spacing-5, 1.5rem);
 }
 
 .lui-btn--primary {
-  border-color: var(--lui-stroke);
-  box-shadow: var(--lui-border-shadow);
   font-size: var(--lui-text-medium);
 }
 
 .lui-btn--ghost {
-  border-color: transparent;
   font-size: var(--lui-text-medium);
 }
 
+.lui-btn--sm {
+  font-size: var(--lui-text-small);
+  padding-block: calc(var(--spacing-1) + 0.06em) calc(var(--spacing-1) - 0.06em);
+  padding-inline: var(--spacing-2);
+}
+
+.lui-btn--lg {
+  font-size: var(--lui-text-important);
+  padding-inline: var(--spacing-5, 1.5rem);
+}
+
 .lui-btn:disabled {
   opacity: 0.35;
   cursor: not-allowed;
@@ -62,13 +74,12 @@ withDefaults(
 
 .lui-btn:hover:not(:disabled) {
   color: var(--lui-focus-color);
-  border-color: var(--lui-focus-color);
 }
 
 .lui-btn:focus,
 .lui-btn:focus-visible {
   outline: none;
-  border-color: var(--lui-focus-color);
   color: var(--lui-focus-color);
+  border-color: var(--lui-focus-color);
 }
 </style>
diff --git a/src/components/LobbyUI/LobbyUIConfigField.vue b/src/components/LobbyUI/LobbyUIConfigField.vue
index 37ef7283..9e0bd57b 100644
--- a/src/components/LobbyUI/LobbyUIConfigField.vue
+++ b/src/components/LobbyUI/LobbyUIConfigField.vue
@@ -1,50 +1,71 @@
 <script setup lang="ts">
+import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
 import type { LobbyConfigField } from '@/types/lobbyWizard'
 
-defineProps<{ field: LobbyConfigField }>()
+const props = defineProps<{ field: LobbyConfigField }>()
 
 const emit = defineEmits<{
   change: [key: string, value: string | number]
 }>()
 
-const onChange = (field: LobbyConfigField, event: Event): void => {
+const onChange = (event: Event): void => {
   const raw = (event.target as HTMLInputElement | HTMLSelectElement).value
-  emit('change', field.key, field.type === 'number' ? Number(raw) : raw)
+  emit('change', props.field.key, props.field.type === 'number' ? Number(raw) : raw)
 }
 </script>
 
 <template>
-  <select
-    v-if="field.type === 'select'"
-    class="lui-field__control"
-    :value="field.value"
-    @change="onChange(field, $event)"
-  >
-    <option
-      v-for="opt in field.options"
-      :key="opt.value"
-      :value="opt.value"
-      :selected="opt.value === field.value"
+  <div class="lui-field">
+    <ChevronLeft class="lui-field__arrow" aria-hidden="true" />
+
+    <select
+      v-if="field.type === 'select'"
+      class="lui-field__control"
+      :value="field.value"
+      @change="onChange"
     >
-      {{ opt.label }}
-    </option>
-  </select>
-  <input
-    v-else
-    class="lui-field__control lui-field__control--number"
-    type="number"
-    :value="field.value"
-    :min="field.min"
-    :max="field.max"
-    @input="onChange(field, $event)"
-  />
+      <option
+        v-for="opt in field.options"
+        :key="opt.value"
+        :value="opt.value"
+        :selected="opt.value === field.value"
+      >
+        {{ opt.label }}
+      </option>
+    </select>
+    <input
+      v-else
+      class="lui-field__control lui-field__control--number"
+      type="number"
+      :value="field.value"
+      :min="field.min"
+      :max="field.max"
+      @input="onChange"
+    />
+
+    <ChevronRight class="lui-field__arrow" aria-hidden="true" />
+  </div>
 </template>
 
 <style scoped>
+.lui-field {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+.lui-field__arrow {
+  width: 1.1em;
+  height: 1.1em;
+  pointer-events: none;
+  opacity: 0.7;
+  filter: drop-shadow(2px 2px 0 #000);
+}
+
 .lui-field__control {
-  padding: var(--spacing-1) 0;
-  border: none;
-  border-bottom: 2px solid var(--lui-stroke-faint);
+  padding: var(--spacing-1) var(--spacing-2);
+  border: 2px solid transparent;
+  border-radius: var(--radius-md);
   background: transparent;
   color: var(--lui-text-color);
   font-family: var(--lui-font);
@@ -53,23 +74,19 @@ const onChange = (field: LobbyConfigField, event: Event): void => {
   text-shadow: var(--lui-text-shadow);
   outline: none;
   appearance: none;
-  text-align: right;
-  transition: border-color 0.15s ease;
+  text-align: center;
+  cursor: pointer;
 }
 
 .lui-field__control--number {
   width: 4rem;
 }
 
-.lui-field__control:hover {
-  border-bottom-color: var(--lui-stroke);
-}
-
 .lui-field__control:focus,
 .lui-field__control:focus-visible {
   outline: none;
   color: var(--lui-focus-color);
-  border-bottom-color: var(--lui-focus-color);
+  border-color: var(--lui-focus-color);
 }
 
 .lui-field__control option {
diff --git a/src/components/LobbyUI/LobbyUIFocusHint.vue b/src/components/LobbyUI/LobbyUIFocusHint.vue
new file mode 100644
index 00000000..f96c7374
--- /dev/null
+++ b/src/components/LobbyUI/LobbyUIFocusHint.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { FocusHint } from '@/composables/useMenuFocus'
+
+withDefaults(
+  defineProps<{
+    hint: FocusHint | null
+    visible?: boolean
+    glyph?: string
+    gap?: number
+  }>(),
+  { visible: true, glyph: '✕', gap: 12 }
+)
+</script>
+
+<template>
+  <div
+    v-if="hint && visible"
+    class="lui-hint"
+    aria-hidden="true"
+    :style="{
+      top: `${hint.rect.top + hint.rect.height / 2}px`,
+      left: `${hint.rect.left + hint.rect.width + gap}px`
+    }"
+  >
+    <span class="lui-hint__glyph">{{ glyph }}</span>
+    {{ hint.label }}
+  </div>
+</template>
+
+<style scoped>
+.lui-hint {
+  position: fixed;
+  z-index: var(--z-tooltip, 300);
+  transform: translateY(-50%);
+  pointer-events: none;
+  font-family: var(--lui-font);
+  font-size: var(--lui-text-small);
+  line-height: 1;
+  color: #000;
+  background: var(--lui-focus-color);
+  padding-inline: 0.7em;
+  padding-block: 0.4em;
+  border-radius: 999px;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4em;
+}
+
+.lui-hint__glyph {
+  font-weight: 900;
+}
+</style>
diff --git a/src/components/LobbyUI/LobbyUIIconButton.vue b/src/components/LobbyUI/LobbyUIIconButton.vue
new file mode 100644
index 00000000..f33fdc34
--- /dev/null
+++ b/src/components/LobbyUI/LobbyUIIconButton.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    variant?: 'primary' | 'ghost'
+    size?: 'sm' | 'md'
+    disabled?: boolean
+  }>(),
+  { variant: 'ghost', size: 'md', disabled: false }
+)
+</script>
+
+<template>
+  <button
+    class="lui-icon-btn"
+    :class="[`lui-icon-btn--${variant}`, `lui-icon-btn--${size}`]"
+    type="button"
+    :disabled="disabled"
+  >
+    <slot />
+  </button>
+</template>
+
+<style scoped>
+.lui-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.2em;
+  height: 2.2em;
+  padding: 0;
+  border: 3px solid transparent;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--lui-text-color);
+  cursor: pointer;
+  line-height: 1;
+  transition: color 0.15s ease;
+}
+
+.lui-icon-btn--sm {
+  width: 1.9em;
+  height: 1.9em;
+  border-width: 2px;
+}
+
+.lui-icon-btn--primary {
+  background: rgb(255 255 255 / 0.12);
+}
+
+.lui-icon-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.lui-icon-btn:hover:not(:disabled) {
+  color: var(--lui-focus-color);
+}
+
+.lui-icon-btn:focus,
+.lui-icon-btn:focus-visible {
+  outline: none;
+  color: var(--lui-focus-color);
+  border-color: var(--lui-focus-color);
+}
+</style>
diff --git a/src/components/LobbyUI/LobbyUIOptionToggle.vue b/src/components/LobbyUI/LobbyUIOptionToggle.vue
index f572edf2..cb25a50d 100644
--- a/src/components/LobbyUI/LobbyUIOptionToggle.vue
+++ b/src/components/LobbyUI/LobbyUIOptionToggle.vue
@@ -1,10 +1,17 @@
 <script setup lang="ts">
-type Option = { value: string; label: string }
+import type { Component } from 'vue'
 
-defineProps<{
-  modelValue: string
-  options: Option[]
-}>()
+type Option = { value: string; label: string; icon?: Component }
+
+withDefaults(
+  defineProps<{
+    modelValue: string
+    options: Option[]
+    size?: 'sm' | 'md'
+    hideLabelOnMobile?: boolean
+  }>(),
+  { size: 'md', hideLabelOnMobile: false }
+)
 
 const emit = defineEmits<{
   'update:modelValue': [value: string]
@@ -12,16 +19,21 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <div class="lui-toggle">
+  <div
+    class="lui-toggle"
+    :class="[`lui-toggle--${size}`, { 'lui-toggle--hide-label-mobile': hideLabelOnMobile }]"
+  >
     <button
       v-for="opt in options"
       :key="opt.value"
       class="lui-toggle__btn"
       :class="{ 'lui-toggle__btn--active': modelValue === opt.value }"
       type="button"
+      :title="opt.label"
       @click="emit('update:modelValue', opt.value)"
     >
-      {{ opt.label }}
+      <component :is="opt.icon" v-if="opt.icon" class="lui-toggle__icon" />
+      <span class="lui-toggle__label">{{ opt.label }}</span>
     </button>
   </div>
 </template>
@@ -29,11 +41,16 @@ const emit = defineEmits<{
 <style scoped>
 .lui-toggle {
   display: flex;
+  flex-wrap: wrap;
   gap: var(--spacing-2);
 }
 
 .lui-toggle__btn {
-  padding: var(--spacing-1) var(--spacing-3);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  padding-block: calc(var(--spacing-1) - 0.06em) calc(var(--spacing-1) + 0.06em);
+  padding-inline: var(--spacing-3);
   border: 2px solid transparent;
   border-radius: var(--radius-xl, 1.25rem);
   background: transparent;
@@ -45,18 +62,42 @@ const emit = defineEmits<{
   cursor: pointer;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  transition: border-color 0.15s ease;
+  transition: background-color 0.15s ease;
+  opacity: 0.65;
+}
+
+.lui-toggle--sm .lui-toggle__btn {
+  font-size: var(--lui-text-small);
+  padding-inline: var(--spacing-2);
+}
+
+.lui-toggle__icon {
+  width: 1.2em;
+  height: 1.2em;
+  filter: drop-shadow(2px 2px 0 #000);
 }
 
 .lui-toggle__btn--active {
-  border-color: var(--lui-stroke);
-  box-shadow: var(--lui-border-shadow);
+  background: rgb(255 255 255 / 0.22);
+  opacity: 1;
+}
+
+.lui-toggle__btn:hover {
+  color: var(--lui-focus-color);
+  opacity: 1;
 }
 
 .lui-toggle__btn:focus,
 .lui-toggle__btn:focus-visible {
   outline: none;
-  border-color: var(--lui-focus-color);
   color: var(--lui-focus-color);
+  border-color: var(--lui-focus-color);
+  opacity: 1;
+}
+
+@media (width <= 480px) {
+  .lui-toggle--hide-label-mobile .lui-toggle__label {
+    display: none;
+  }
 }
 </style>
diff --git a/src/components/LobbyUI/index.ts b/src/components/LobbyUI/index.ts
index c0068021..eecffca5 100644
--- a/src/components/LobbyUI/index.ts
+++ b/src/components/LobbyUI/index.ts
@@ -7,5 +7,7 @@ export { default as LobbyUIImageGrid } from './LobbyUIImageGrid.vue'
 export { default as LobbyUIPrivateToggle } from './LobbyUIPrivateToggle.vue'
 export { default as LobbyUIPlayerList } from './LobbyUIPlayerList.vue'
 export { default as LobbyUIButton } from './LobbyUIButton.vue'
+export { default as LobbyUIIconButton } from './LobbyUIIconButton.vue'
+export { default as LobbyUIFocusHint } from './LobbyUIFocusHint.vue'
 export { default as LobbyUIConfigField } from './LobbyUIConfigField.vue'
 export { default as LobbyUIConfirm } from './LobbyUIConfirm.vue'
diff --git a/src/components/TouchControl.vue b/src/components/TouchControl.vue
index 6981c368..abae30a2 100644
--- a/src/components/TouchControl.vue
+++ b/src/components/TouchControl.vue
@@ -1,18 +1,29 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed } from 'vue'
+import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
 import {
   createFauxPadController,
   type FauxPadController,
   type FauxPadOptions
 } from '@webgamekit/controls'
 
-const props = defineProps<{
-  mapping: Record<string, string>
-  options?: FauxPadOptions
-  mode?: 'faux-pad' | 'button' // Default is 'faux-pad'
-  currentActions?: Record<string, any> // Reference to currentActions from createControls
-  onAction: (action: string) => void
-}>()
+const props = withDefaults(
+  defineProps<{
+    mapping: Record<string, string>
+    options?: FauxPadOptions
+    mode?: 'faux-pad' | 'button' // Default is 'faux-pad'
+    skin?: string
+    inline?: boolean // Render in-flow (for previews) instead of fixed to the viewport
+    position?: { x: number; y: number } // Normalized -1..1 drive for the pad (e.g. gamepad stick)
+    currentActions?: Record<string, any> // Reference to currentActions from createControls
+    onAction: (action: string) => void
+  }>(),
+  { skin: 'default', inline: false }
+)
+
+const rootClasses = computed(() => [
+  `touch-control--${props.skin}`,
+  { 'touch-control--inline': props.inline }
+])
 
 const touchControlInside = ref<HTMLElement | null>(null)
 const touchControlEdge = ref<HTMLElement | null>(null)
@@ -24,6 +35,19 @@ const buttonEntries = computed(() => Object.entries(props.mapping))
 const isMultiButton = computed(() => buttonEntries.value.length > 1)
 const singleEntry = computed(() => buttonEntries.value[0])
 
+watch(
+  () => props.position,
+  (pos) => {
+    const inside = touchControlInside.value
+    const edge = touchControlEdge.value
+    if (isButtonMode.value || !inside || !edge || !pos) return
+    const limitX = (edge.offsetWidth - inside.offsetWidth) / 2
+    const limitY = (edge.offsetHeight - inside.offsetHeight) / 2
+    inside.style.transform = `translate(${pos.x * limitX}px, ${pos.y * limitY}px)`
+  },
+  { deep: true }
+)
+
 onMounted(() => {
   if (isButtonMode.value) return
 
@@ -71,6 +95,7 @@ const handleButtonAction = (action: string, event: Event) => {
   <div
     v-if="isButtonMode && !isMultiButton"
     class="touch-control"
+    :class="rootClasses"
     @click="handleButtonAction(singleEntry[1], $event)"
     @touchend="handleButtonAction(singleEntry[1], $event)"
   >
@@ -79,7 +104,7 @@ const handleButtonAction = (action: string, event: Event) => {
   </div>
 
   <!-- Multi-button: horizontal row of smaller buttons -->
-  <div v-else-if="isButtonMode" class="touch-control touch-control--buttons">
+  <div v-else-if="isButtonMode" class="touch-control touch-control--buttons" :class="rootClasses">
     <button
       v-for="(action, label) in mapping"
       :key="label"
@@ -92,7 +117,7 @@ const handleButtonAction = (action: string, event: Event) => {
   </div>
 
   <!-- Faux-pad: directional joystick -->
-  <div v-else class="touch-control">
+  <div v-else class="touch-control" :class="rootClasses">
     <div ref="touchControlEdge" class="touch-control__edge"></div>
     <div ref="touchControlInside" class="touch-control__inside"></div>
   </div>
@@ -119,6 +144,11 @@ const handleButtonAction = (action: string, event: Event) => {
   justify-content: flex-start;
 }
 
+.touch-control--inline {
+  position: relative;
+  z-index: auto;
+}
+
 .touch-control__edge {
   position: absolute;
   inset: 0;
@@ -165,4 +195,32 @@ const handleButtonAction = (action: string, event: Event) => {
   user-select: none;
   touch-action: none;
 }
+
+.touch-control--neon .touch-control__edge {
+  background-color: transparent;
+  box-shadow:
+    inset 0 0 0 2px var(--touch-skin-neon-color),
+    0 0 16px var(--touch-skin-neon-glow);
+  opacity: 0.9;
+}
+
+.touch-control--neon .touch-control__inside,
+.touch-control--neon .touch-control__button {
+  background-color: var(--touch-skin-neon-color);
+  box-shadow: 0 0 12px var(--touch-skin-neon-glow);
+  opacity: 0.9;
+}
+
+.touch-control--minimal .touch-control__edge {
+  background-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--touch-skin-minimal-color);
+  opacity: 0.4;
+}
+
+.touch-control--minimal .touch-control__inside,
+.touch-control--minimal .touch-control__button {
+  background-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--touch-skin-minimal-color);
+  opacity: 0.4;
+}
 </style>
diff --git a/src/composables/useMenuFocus.ts b/src/composables/useMenuFocus.ts
new file mode 100644
index 00000000..7d311e99
--- /dev/null
+++ b/src/composables/useMenuFocus.ts
@@ -0,0 +1,271 @@
+import { onMounted, onUnmounted, ref, type Ref } from 'vue'
+import { useMenuNavigation, type MenuAction, type MenuSource } from './useMenuNavigation'
+
+const TEXT_INPUT_TYPES = new Set(['text', 'number', 'email', 'password', 'search', 'tel', 'url'])
+const FOCUSABLE_SELECTOR =
+  'button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled)'
+
+export interface HintRect {
+  top: number
+  left: number
+  width: number
+  height: number
+}
+
+export interface FocusHint {
+  rect: HintRect
+  label: string
+}
+
+export type MenuFocusSource = MenuSource | 'mouse'
+
+interface FocusState {
+  panel: Ref<HTMLElement | null>
+  row: Ref<number>
+  col: Ref<number>
+  hint: Ref<FocusHint | null>
+  editing: Ref<HTMLElement | null>
+  original: Ref<string | null>
+}
+
+const isTextInput = (element: Element | null): boolean =>
+  element instanceof HTMLInputElement && TEXT_INPUT_TYPES.has(element.type)
+
+const isNumberInput = (element: Element | null): element is HTMLInputElement =>
+  element instanceof HTMLInputElement && element.type === 'number'
+
+const isSelect = (element: Element | null): element is HTMLSelectElement =>
+  element instanceof HTMLSelectElement
+
+// While editing, the value only changes visually; it is applied on confirm so
+// other state is not disturbed until the choice is committed.
+const bumpNumberInput = (input: HTMLInputElement, direction: 1 | -1): void => {
+  if (direction === 1) input.stepUp()
+  else input.stepDown()
+}
+
+const cycleSelect = (select: HTMLSelectElement, direction: 1 | -1): void => {
+  const next = Math.max(0, Math.min(select.options.length - 1, select.selectedIndex + direction))
+  if (next === select.selectedIndex) return
+  select.value = select.options[next].value
+}
+
+const commitEdit = (element: HTMLInputElement | HTMLSelectElement): void => {
+  element.dispatchEvent(new Event('input', { bubbles: true }))
+  element.dispatchEvent(new Event('change', { bubbles: true }))
+}
+
+const revertEdit = (state: FocusState): void => {
+  const element = state.editing.value
+  if (
+    (element instanceof HTMLInputElement || element instanceof HTMLSelectElement) &&
+    state.original.value !== null
+  ) {
+    element.value = state.original.value
+  }
+  state.editing.value = null
+  state.original.value = null
+}
+
+const describeControl = (element: HTMLElement, editing: boolean): string => {
+  if (isNumberInput(element) || isSelect(element)) return editing ? 'Confirm' : 'Change'
+  if (element instanceof HTMLInputElement && element.type === 'checkbox') return 'Toggle'
+  if (isTextInput(element)) return 'Edit'
+  return 'Select'
+}
+
+const queryRows = (panel: HTMLElement | null): HTMLElement[] => {
+  if (!panel) return []
+  return [...panel.querySelectorAll<HTMLElement>('[data-lui-row]')].filter(
+    (row) => row.querySelectorAll(FOCUSABLE_SELECTOR).length > 0
+  )
+}
+
+const queryFocusables = (row: HTMLElement): HTMLElement[] => [
+  ...row.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)
+]
+
+const updateHint = (state: FocusState, element: HTMLElement | null): void => {
+  if (!element) {
+    state.hint.value = null
+    return
+  }
+  const rect = element.getBoundingClientRect()
+  state.hint.value = {
+    rect: { top: rect.top, left: rect.left, width: rect.width, height: rect.height },
+    label: describeControl(element, state.editing.value === element)
+  }
+}
+
+const applyFocus = (state: FocusState): void => {
+  const rows = queryRows(state.panel.value)
+  const row = rows[state.row.value]
+  if (!row) {
+    updateHint(state, null)
+    return
+  }
+  const focusables = queryFocusables(row)
+  const target = focusables[Math.min(state.col.value, focusables.length - 1)]
+  target?.focus()
+  updateHint(state, target ?? null)
+}
+
+const moveRow = (state: FocusState, delta: number, rowCount: number): void => {
+  state.editing.value = null
+  state.row.value = Math.min(Math.max(state.row.value + delta, 0), rowCount - 1)
+  state.col.value = 0
+  applyFocus(state)
+}
+
+const moveCol = (state: FocusState, delta: number, row: HTMLElement | undefined): void => {
+  if (!row) return
+  const focusables = queryFocusables(row)
+  state.col.value = Math.min(Math.max(state.col.value + delta, 0), focusables.length - 1)
+  applyFocus(state)
+}
+
+const editNumber = (input: HTMLInputElement, action: MenuAction): boolean => {
+  if (action === 'up' || action === 'right') {
+    bumpNumberInput(input, 1)
+    return true
+  }
+  if (action === 'down' || action === 'left') {
+    bumpNumberInput(input, -1)
+    return true
+  }
+  return false
+}
+
+const editSelect = (select: HTMLSelectElement, action: MenuAction): boolean => {
+  if (action === 'up' || action === 'left') {
+    cycleSelect(select, -1)
+    return true
+  }
+  if (action === 'down' || action === 'right') {
+    cycleSelect(select, 1)
+    return true
+  }
+  return false
+}
+
+const handleEditable = (
+  state: FocusState,
+  element: HTMLInputElement | HTMLSelectElement,
+  action: MenuAction,
+  rowCount: number
+): boolean => {
+  if (action === 'activate') {
+    if (state.editing.value !== element) {
+      state.editing.value = element
+      state.original.value = element.value
+      updateHint(state, element)
+    } else {
+      commitEdit(element)
+      state.original.value = null
+      moveRow(state, 1, rowCount)
+    }
+    return true
+  }
+  if (state.editing.value !== element) return false
+  return isNumberInput(element) ? editNumber(element, action) : editSelect(element, action)
+}
+
+const handleControlAction = (
+  state: FocusState,
+  active: Element | null,
+  action: MenuAction,
+  rowCount: number
+): boolean => {
+  if (isTextInput(active) && (action === 'left' || action === 'right')) return true
+  if (isNumberInput(active) || isSelect(active))
+    return handleEditable(state, active, action, rowCount)
+  return false
+}
+
+const runMenuAction = (state: FocusState, action: MenuAction, isPaused: () => boolean): void => {
+  if (isPaused()) return
+  const active = document.activeElement
+  const rows = queryRows(state.panel.value)
+  if (!rows.length || handleControlAction(state, active, action, rows.length)) return
+
+  const handlers: Record<MenuAction, () => void> = {
+    up: () => moveRow(state, -1, rows.length),
+    down: () => moveRow(state, 1, rows.length),
+    left: () => moveCol(state, -1, rows[state.row.value]),
+    right: () => moveCol(state, 1, rows[state.row.value]),
+    activate: () => {
+      if (!isTextInput(active) && active instanceof HTMLElement) active.click()
+    },
+    decrease: () => undefined,
+    cancel: () => {
+      if (state.editing.value) revertEdit(state)
+      else (active as HTMLElement | null)?.blur?.()
+    }
+  }
+  handlers[action]()
+}
+
+/**
+ * Roving keyboard/gamepad focus over a panel of `[data-lui-row]` rows. Up/down
+ * move between rows, left/right between focusable controls in a row, activate
+ * clicks buttons and edits number/select inputs, cancel blurs.
+ *
+ * @param {Ref<HTMLElement | null>} panel The panel element containing the rows
+ * @param {() => boolean} [isPaused] When it returns true, navigation is ignored (e.g. while capturing a key binding)
+ * @returns {{ focusedHint: Ref<FocusHint | null>, inputSource: Ref<MenuFocusSource | null>, focusFirst: () => void }} Focus state and control
+ */
+export function useMenuFocus(
+  panel: Ref<HTMLElement | null>,
+  isPaused: () => boolean = () => false
+) {
+  const state: FocusState = {
+    panel,
+    row: ref(0),
+    col: ref(0),
+    hint: ref<FocusHint | null>(null),
+    editing: ref<HTMLElement | null>(null),
+    original: ref<string | null>(null)
+  }
+  const inputSource = ref<MenuFocusSource | null>(null)
+
+  const onMouseActivity = (): void => {
+    inputSource.value = 'mouse'
+  }
+  const clearHint = (): void => {
+    if (state.editing.value) revertEdit(state)
+    state.hint.value = null
+    state.editing.value = null
+  }
+  // Hide the hint whenever focus leaves the panel (e.g. cancelling with the
+  // joypad blurs the option), not only when the whole window loses focus.
+  const onFocusOut = (event: FocusEvent): void => {
+    const next = event.relatedTarget
+    if (!(next instanceof HTMLElement) || !panel.value?.contains(next)) clearHint()
+  }
+
+  onMounted(() => {
+    window.addEventListener('mousedown', onMouseActivity)
+    window.addEventListener('mousemove', onMouseActivity, { passive: true })
+    window.addEventListener('blur', clearHint)
+    window.addEventListener('focusout', onFocusOut)
+  })
+  onUnmounted(() => {
+    window.removeEventListener('mousedown', onMouseActivity)
+    window.removeEventListener('mousemove', onMouseActivity)
+    window.removeEventListener('blur', clearHint)
+    window.removeEventListener('focusout', onFocusOut)
+  })
+
+  useMenuNavigation((action, source) => {
+    inputSource.value = source
+    runMenuAction(state, action, isPaused)
+  })
+
+  const focusFirst = (): void => {
+    state.row.value = 0
+    state.col.value = 0
+    applyFocus(state)
+  }
+
+  return { focusedHint: state.hint, inputSource, focusFirst }
+}
diff --git a/src/stores/controlsMapper.test.ts b/src/stores/controlsMapper.test.ts
new file mode 100644
index 00000000..1abf7000
--- /dev/null
+++ b/src/stores/controlsMapper.test.ts
@@ -0,0 +1,110 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { setActivePinia, createPinia } from 'pinia'
+import { PRESETS_STORAGE_KEY } from '@webgamekit/controls'
+import { useControlsMapperStore } from './controlsMapper'
+
+describe('useControlsMapperStore', () => {
+  beforeEach(() => {
+    localStorage.clear()
+    setActivePinia(createPinia())
+  })
+
+  it('starts from the default mapping and default skin', () => {
+    const store = useControlsMapperStore()
+    expect(Object.values(store.mapping.keyboard ?? {})).toContain('move-forward')
+    expect(store.selectedSkin).toBe('default')
+  })
+
+  it('bindTrigger reassigns an action to a new trigger on a device', () => {
+    const store = useControlsMapperStore()
+    store.bindTrigger('keyboard', 'ArrowUp', 'jump')
+    expect(store.mapping.keyboard?.ArrowUp).toBe('jump')
+  })
+
+  it('clearTrigger removes a trigger', () => {
+    const store = useControlsMapperStore()
+    store.bindTrigger('keyboard', 'ArrowUp', 'jump')
+    store.clearTrigger('keyboard', 'ArrowUp')
+    expect(store.mapping.keyboard?.ArrowUp).toBeUndefined()
+  })
+
+  it('savePreset persists the current mapping and skin', () => {
+    const store = useControlsMapperStore()
+    store.selectSkin('neon')
+    store.bindTrigger('keyboard', 'ArrowUp', 'jump')
+    store.savePreset('My layout')
+
+    const raw = localStorage.getItem(PRESETS_STORAGE_KEY)
+    expect(raw).toContain('My layout')
+
+    setActivePinia(createPinia())
+    const reloaded = useControlsMapperStore()
+    expect(reloaded.presets.map((preset) => preset.name)).toContain('My layout')
+  })
+
+  it('applyPreset restores a stored mapping and skin', () => {
+    const store = useControlsMapperStore()
+    store.selectSkin('neon')
+    store.bindTrigger('keyboard', 'ArrowUp', 'jump')
+    store.savePreset('My layout')
+
+    store.resetToDefaults()
+    store.applyPreset('My layout')
+
+    expect(store.mapping.keyboard?.ArrowUp).toBe('jump')
+    expect(store.selectedSkin).toBe('neon')
+  })
+
+  it('deletePreset removes a stored preset', () => {
+    const store = useControlsMapperStore()
+    store.savePreset('A')
+    store.deletePreset('A')
+    expect(store.presets.map((preset) => preset.name)).not.toContain('A')
+  })
+
+  it('importPreset applies a valid JSON preset', () => {
+    const store = useControlsMapperStore()
+    const json = JSON.stringify({
+      name: 'Imported',
+      mapping: { keyboard: { z: 'jump' } },
+      skin: 'minimal'
+    })
+    store.importPreset(json)
+    expect(store.mapping.keyboard?.z).toBe('jump')
+    expect(store.selectedSkin).toBe('minimal')
+  })
+
+  it('importPreset throws on invalid JSON', () => {
+    const store = useControlsMapperStore()
+    expect(() => store.importPreset('{ bad')).toThrow()
+  })
+
+  it('resetToDefaults restores the default mapping and skin', () => {
+    const store = useControlsMapperStore()
+    store.selectSkin('neon')
+    store.bindTrigger('keyboard', 'z', 'jump')
+
+    store.resetToDefaults()
+
+    expect(store.selectedSkin).toBe('default')
+    expect(store.mapping.keyboard?.z).toBeUndefined()
+    expect(Object.values(store.mapping.keyboard ?? {})).toContain('move-forward')
+  })
+
+  it('records and clears live actions', () => {
+    const store = useControlsMapperStore()
+    store.recordAction('jump', ' ', 'keyboard')
+    expect(store.liveActions).toContain('jump')
+    store.recordRelease('jump')
+    expect(store.liveActions).not.toContain('jump')
+  })
+
+  it('tracks the device of the most recent action', () => {
+    const store = useControlsMapperStore()
+    expect(store.lastDevice).toBe('')
+    store.recordAction('jump', ' ', 'keyboard')
+    expect(store.lastDevice).toBe('keyboard')
+    store.recordAction('move-forward', 'dpad-up', 'gamepad')
+    expect(store.lastDevice).toBe('gamepad')
+  })
+})
diff --git a/src/stores/controlsMapper.ts b/src/stores/controlsMapper.ts
new file mode 100644
index 00000000..9f32d325
--- /dev/null
+++ b/src/stores/controlsMapper.ts
@@ -0,0 +1,139 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import {
+  assignBinding,
+  removeBinding,
+  createDefaultMapping,
+  getDefaultSkinId,
+  serializePreset,
+  parsePreset,
+  savePresets,
+  loadPresets
+} from '@webgamekit/controls'
+import type {
+  ControlDevice,
+  ControlMapping,
+  ControlPreset,
+  ControlSkinId
+} from '@webgamekit/controls'
+
+interface LiveEvent {
+  action: string
+  trigger: string
+  device: string
+  type: 'action' | 'release'
+  timestamp: number
+}
+
+const RECENT_EVENTS_LIMIT = 30
+
+export const useControlsMapperStore = defineStore('controlsMapper', () => {
+  const mapping = ref<ControlMapping>(createDefaultMapping())
+  const selectedSkin = ref<ControlSkinId>(getDefaultSkinId())
+  const presets = ref<ControlPreset[]>(loadPresets())
+  const liveActions = ref<string[]>([])
+  const recentEvents = ref<LiveEvent[]>([])
+  const lastDevice = ref('')
+  const activeDevice = ref<ControlDevice>('keyboard')
+  const capturing = ref(false)
+
+  const setActiveDevice = (device: ControlDevice) => {
+    activeDevice.value = device
+  }
+
+  const setCapturing = (value: boolean) => {
+    capturing.value = value
+  }
+
+  const bindTrigger = (device: ControlDevice, trigger: string, action: string) => {
+    mapping.value = assignBinding(mapping.value, device, trigger, action)
+  }
+
+  const clearTrigger = (device: ControlDevice, trigger: string) => {
+    mapping.value = removeBinding(mapping.value, device, trigger)
+  }
+
+  const resetToDefaults = () => {
+    mapping.value = createDefaultMapping()
+    selectedSkin.value = getDefaultSkinId()
+  }
+
+  const selectSkin = (skin: ControlSkinId) => {
+    selectedSkin.value = skin
+  }
+
+  const persist = () => {
+    savePresets(presets.value)
+  }
+
+  const savePreset = (name: string) => {
+    const preset: ControlPreset = { name, mapping: mapping.value, skin: selectedSkin.value }
+    presets.value = [...presets.value.filter((entry) => entry.name !== name), preset]
+    persist()
+  }
+
+  const applyPreset = (name: string) => {
+    const preset = presets.value.find((entry) => entry.name === name)
+    if (!preset) return
+    mapping.value = preset.mapping
+    selectedSkin.value = preset.skin
+  }
+
+  const deletePreset = (name: string) => {
+    presets.value = presets.value.filter((entry) => entry.name !== name)
+    persist()
+  }
+
+  const exportCurrent = (name: string): string =>
+    serializePreset({ name, mapping: mapping.value, skin: selectedSkin.value })
+
+  const importPreset = (json: string) => {
+    const preset = parsePreset(json)
+    mapping.value = preset.mapping
+    selectedSkin.value = preset.skin
+  }
+
+  const recordAction = (action: string, trigger: string, device: string) => {
+    if (capturing.value) return
+    lastDevice.value = device
+    if (!liveActions.value.includes(action)) {
+      liveActions.value = [...liveActions.value, action]
+    }
+    recentEvents.value = [
+      { action, trigger, device, type: 'action', timestamp: Date.now() },
+      ...recentEvents.value
+    ].slice(0, RECENT_EVENTS_LIMIT)
+  }
+
+  const recordRelease = (action: string) => {
+    liveActions.value = liveActions.value.filter((entry) => entry !== action)
+    recentEvents.value = [
+      { action, trigger: '', device: '', type: 'release', timestamp: Date.now() },
+      ...recentEvents.value
+    ].slice(0, RECENT_EVENTS_LIMIT)
+  }
+
+  return {
+    mapping,
+    selectedSkin,
+    presets,
+    liveActions,
+    recentEvents,
+    lastDevice,
+    activeDevice,
+    setActiveDevice,
+    capturing,
+    setCapturing,
+    bindTrigger,
+    clearTrigger,
+    resetToDefaults,
+    selectSkin,
+    savePreset,
+    applyPreset,
+    deletePreset,
+    exportCurrent,
+    importPreset,
+    recordAction,
+    recordRelease
+  }
+})
diff --git a/src/style.css b/src/style.css
index 6dce98e0..2f88321f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -12,6 +12,9 @@
 
   --touch-color-background-light: rgb(255, 255, 255, 0.3);
   --touch-color-background-dark: rgb(0, 0, 0, 0.3);
+  --touch-skin-neon-color: rgb(0, 229, 255, 0.85);
+  --touch-skin-neon-glow: rgb(0, 229, 255, 0.55);
+  --touch-skin-minimal-color: rgb(0, 0, 0, 0.3);
 }
 
 a {
diff --git a/src/views/Tests/ControlsMapper/ControlsMapper.vue b/src/views/Tests/ControlsMapper/ControlsMapper.vue
new file mode 100644
index 00000000..e1a5d2fd
--- /dev/null
+++ b/src/views/Tests/ControlsMapper/ControlsMapper.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted } from 'vue'
+import ControlsMapper from '@/components/ControlsMapper/ControlsMapper.vue'
+import { loadGoogleFont, removeGoogleFont } from '@/utils/ui'
+
+const FONT_KEY = 'controls-mapper-font'
+
+onMounted(() => {
+  loadGoogleFont('https://fonts.googleapis.com/css2?family=Darumadrop+One&display=swap', FONT_KEY)
+})
+
+onUnmounted(() => {
+  removeGoogleFont(FONT_KEY)
+})
+</script>
+
+<template>
+  <main class="controls-mapper-view">
+    <div class="controls-mapper-view__backdrop" aria-hidden="true" />
+    <div class="controls-mapper-view__stage">
+      <ControlsMapper />
+    </div>
+  </main>
+</template>
+
+<style scoped>
+.controls-mapper-view {
+  position: relative;
+  height: 100dvh;
+  overflow-y: auto;
+  padding: calc(var(--nav-height) + var(--spacing-4)) var(--spacing-4) var(--spacing-6);
+  box-sizing: border-box;
+}
+
+.controls-mapper-view__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background: linear-gradient(160deg, #3a2c6e 0%, #5b3f8f 45%, #7d4fa0 100%);
+}
+
+.controls-mapper-view__stage {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+}
+</style>