diff --git a/controller_helper.py b/controller_helper.py
new file mode 100644
index 0000000..99b47de
--- /dev/null
+++ b/controller_helper.py
@@ -0,0 +1,684 @@
+#!/usr/bin/env python3
+
+import argparse
+import glob
+import json
+import os
+import selectors
+import signal
+import sys
+from pathlib import Path
+from typing import Optional
+
+try:
+    import evdev
+    from evdev import ecodes
+except Exception:
+    evdev = None
+    ecodes = None
+
+
+CONTROLLER_KEYWORDS = (
+    "controller",
+    "gamepad",
+    "joystick",
+    "xbox",
+    "dualsense",
+    "dualshock",
+    "wireless controller",
+    "8bitdo",
+    "pro controller",
+    "switch pro",
+    "joycon",
+    "joy-con",
+    "steam controller",
+)
+
+# VID → controller family. Takes priority over name-based detection.
+VENDOR_FAMILY_MAP = {
+    "054c": "playstation",  # Sony Interactive Entertainment
+    "045e": "xbox",         # Microsoft Corporation
+    "057e": "nintendo",     # Nintendo Co., Ltd
+    "28de": "steam",        # Valve Corporation
+    "2dc8": "8bitdo",       # 8BitDo Technology
+    "0f0d": "generic",      # Hori Co., Ltd
+    "0079": "generic",      # DragonRise Inc. (generic USB gamepads)
+    "0810": "generic",      # Personal Communication Systems
+    "046d": "generic",      # Logitech
+}
+
+# Sony PID → specific family (dualsense vs dualshock vs generic playstation)
+SONY_PRODUCT_FAMILIES = {
+    "0ce6": "dualsense",    # DualSense (PS5)
+    "0df2": "dualsense",    # DualSense Edge
+    "0e5f": "dualsense",    # DualSense Access Controller
+    "09cc": "dualshock",    # DualShock 4 (CUH-ZCT2, 2nd gen)
+    "05c4": "dualshock",    # DualShock 4 (CUH-ZCT1, 1st gen)
+    "0ba0": "dualshock",    # DualShock 4 USB Wireless Adaptor
+}
+
+DEFAULT_CAPABILITIES = {
+    "buttons": [
+        "BTN_SOUTH",
+        "BTN_EAST",
+        "BTN_NORTH",
+        "BTN_WEST",
+        "BTN_TL",
+        "BTN_TR",
+        "BTN_SELECT",
+        "BTN_START",
+        "BTN_MODE",
+        "BTN_THUMBL",
+        "BTN_THUMBR",
+        "BTN_DPAD_UP",
+        "BTN_DPAD_DOWN",
+        "BTN_DPAD_LEFT",
+        "BTN_DPAD_RIGHT",
+    ],
+    "axes": [
+        "ABS_X",
+        "ABS_Y",
+        "ABS_RX",
+        "ABS_RY",
+        "ABS_Z",
+        "ABS_RZ",
+        "ABS_HAT0X",
+        "ABS_HAT0Y",
+    ],
+}
+
+RUNNING = True
+
+TARGET_DEVICE_CONFIGS = {
+    "xinput": {
+        "name": "Aegis Virtual Xbox Controller",
+        "vendor": 0x045E,
+        "product": 0x028E,
+        "version": 0x0110,
+        "bustype": 0x03,
+    },
+    "dualsense": {
+        "name": "Sony Interactive Entertainment DualSense Wireless Controller",
+        "vendor": 0x054C,
+        "product": 0x0CE6,
+        "version": 0x8111,
+        "bustype": 0x05,
+    },
+}
+
+
+def classify_family(name: str, vendor_id: str = "0000", product_id: str = "0000") -> str:
+    # VID/PID-based detection takes priority over name matching.
+    vid = (vendor_id or "0000").lower().zfill(4)
+    pid = (product_id or "0000").lower().zfill(4)
+
+    if vid in VENDOR_FAMILY_MAP:
+        base_family = VENDOR_FAMILY_MAP[vid]
+        if base_family == "playstation":
+            return SONY_PRODUCT_FAMILIES.get(pid, "playstation")
+        return base_family
+
+    # Fall back to name-based detection for unrecognised vendors.
+    value = (name or "").lower()
+    if "dualsense" in value or "ps5" in value:
+        return "dualsense"
+    if "dualshock" in value or "wireless controller" in value or "ps4" in value:
+        return "dualshock"
+    if "xbox" in value:
+        return "xbox"
+    if "8bitdo" in value:
+        return "8bitdo"
+    if (
+        "switch" in value
+        or "joycon" in value
+        or "joy-con" in value
+        or "pro controller" in value
+    ):
+        return "nintendo"
+    if "steam controller" in value or ("valve" in value and "controller" in value):
+        return "steam"
+    if any(keyword in value for keyword in CONTROLLER_KEYWORDS):
+        return "generic"
+    return "unknown"
+
+
+def infer_connection_type(sysfs_root: Path) -> str:
+    try:
+        path_str = str(sysfs_root.resolve())
+    except Exception:
+        path_str = str(sysfs_root)
+
+    lowered = path_str.lower()
+    if "bluetooth" in lowered:
+        return "bluetooth"
+    if "usb" in lowered:
+        return "usb"
+    return "unknown"
+
+
+def detect_capabilities(name: str, evdev_caps: Optional[dict] = None) -> list:
+    family = classify_family(name)
+    capabilities = ["buttons", "sticks"]
+
+    if evdev_caps is not None and ecodes is not None:
+        abs_codes = _normalize_abs_codes(evdev_caps.get(ecodes.EV_ABS, []))
+        if ecodes.ABS_Z in abs_codes or ecodes.ABS_RZ in abs_codes:
+            capabilities.append("triggers")
+        ff_effects = evdev_caps.get(ecodes.EV_FF, [])
+        if ff_effects:
+            capabilities.append("rumble")
+    else:
+        # Nintendo Pro Controller has digital shoulder buttons, no analog triggers.
+        if family not in {"nintendo"}:
+            capabilities.append("triggers")
+
+    # Gyro and touchpad are inferred from controller family since evdev exposes
+    # them on a separate input node that isn't the gamepad interface.
+    if family in {"dualsense", "dualshock"}:
+        capabilities.extend(["gyro", "touchpad"])
+    elif family in {"nintendo", "steam"}:
+        capabilities.append("gyro")
+
+    return sorted(set(capabilities))
+
+
+def _normalize_abs_codes(raw_abs_codes):
+    normalized = set()
+    for code in raw_abs_codes:
+        if isinstance(code, tuple):
+            normalized.add(code[0])
+        else:
+            normalized.add(code)
+    return normalized
+
+
+def _looks_like_gamepad(device) -> bool:
+    if evdev is None or ecodes is None:
+        return False
+
+    capabilities = device.capabilities()
+    key_codes = set(capabilities.get(ecodes.EV_KEY, []))
+    abs_codes = _normalize_abs_codes(capabilities.get(ecodes.EV_ABS, []))
+
+    has_gamepad_buttons = any(
+        code in key_codes
+        for code in (
+            ecodes.BTN_SOUTH,
+            ecodes.BTN_EAST,
+            ecodes.BTN_NORTH,
+            ecodes.BTN_WEST,
+            ecodes.BTN_TL,
+            ecodes.BTN_TR,
+            ecodes.BTN_SELECT,
+            ecodes.BTN_START,
+            ecodes.BTN_MODE,
+            ecodes.BTN_THUMBL,
+            ecodes.BTN_THUMBR,
+        )
+    )
+    has_gamepad_axes = any(
+        code in abs_codes
+        for code in (
+            ecodes.ABS_X,
+            ecodes.ABS_Y,
+            ecodes.ABS_RX,
+            ecodes.ABS_RY,
+            ecodes.ABS_HAT0X,
+            ecodes.ABS_HAT0Y,
+        )
+    )
+
+    return has_gamepad_buttons and has_gamepad_axes
+
+
+def _controller_from_evdev(device):
+    event_name = os.path.basename(device.path)
+    event_root = Path("/sys/class/input") / event_name / "device"
+    vendor_id = "0000"
+    product_id = "0000"
+
+    try:
+        vendor_id = (event_root / "id" / "vendor").read_text(encoding="utf8").strip()
+        product_id = (event_root / "id" / "product").read_text(encoding="utf8").strip()
+    except Exception:
+        pass
+
+    evdev_caps = device.capabilities()
+    family = classify_family(device.name, vendor_id, product_id)
+
+    return {
+        "id": event_name,
+        "name": device.name,
+        "vendorId": vendor_id.lower(),
+        "productId": product_id.lower(),
+        "connectionType": infer_connection_type(event_root),
+        "family": family,
+        "capabilities": detect_capabilities(device.name, evdev_caps),
+        "eventPath": device.path,
+    }
+
+
+def enumerate_input_candidates():
+    controllers = []
+
+    if evdev is not None:
+        for device_path in evdev.list_devices():
+            try:
+                device = evdev.InputDevice(device_path)
+            except Exception:
+                continue
+
+            try:
+                if _looks_like_gamepad(device):
+                    controllers.append(_controller_from_evdev(device))
+            finally:
+                device.close()
+
+    if controllers:
+        for index, controller in enumerate(controllers):
+            controller["isPrimary"] = index == 0
+        return controllers
+
+    for event_path in sorted(glob.glob("/sys/class/input/event*")):
+        event_root = Path(event_path)
+        device_name_path = event_root / "device" / "name"
+        if not device_name_path.exists():
+            continue
+
+        try:
+            name = device_name_path.read_text(encoding="utf8").strip()
+        except Exception:
+            continue
+
+        lowered = name.lower()
+        if not any(keyword in lowered for keyword in CONTROLLER_KEYWORDS):
+            continue
+
+        event_name = event_root.name
+        vendor_id = "0000"
+        product_id = "0000"
+
+        try:
+            vendor_id = (event_root / "device" / "id" / "vendor").read_text(encoding="utf8").strip()
+            product_id = (event_root / "device" / "id" / "product").read_text(encoding="utf8").strip()
+        except Exception:
+            pass
+
+        controllers.append(
+            {
+                "id": event_name,
+                "name": name,
+                "vendorId": vendor_id.lower(),
+                "productId": product_id.lower(),
+                "connectionType": infer_connection_type(event_root / "device"),
+                "family": classify_family(name, vendor_id, product_id),
+                "capabilities": detect_capabilities(name),
+                "eventPath": f"/dev/input/{event_name}",
+            }
+        )
+
+    for index, controller in enumerate(controllers):
+        controller["isPrimary"] = index == 0
+
+    return controllers
+
+
+def build_probe():
+    uinput_path = "/dev/uinput"
+    uinput_access = os.access(uinput_path, os.R_OK | os.W_OK)
+    return {
+        "python_ok": True,
+        "evdev_available": evdev is not None,
+        "uinput_present": os.path.exists(uinput_path),
+        "uinput_access": uinput_access,
+        "uinput_path": uinput_path,
+        "running_in_container": os.path.exists("/.dockerenv")
+        or os.path.exists("/run/.containerenv"),
+        "controller_count": len(enumerate_input_candidates()),
+    }
+
+
+def create_virtual_capabilities():
+    if evdev is None:
+        return None
+
+    button_codes = [getattr(ecodes, code) for code in DEFAULT_CAPABILITIES["buttons"]]
+    axis_codes = [
+        (
+            getattr(ecodes, code),
+            evdev.AbsInfo(value=0, min=-32768, max=32767, fuzz=16, flat=128, resolution=0),
+        )
+        for code in DEFAULT_CAPABILITIES["axes"][:4]
+    ]
+    trigger_codes = [
+        (
+            getattr(ecodes, code),
+            evdev.AbsInfo(value=0, min=0, max=255, fuzz=0, flat=0, resolution=0),
+        )
+        for code in DEFAULT_CAPABILITIES["axes"][4:6]
+    ]
+    hat_codes = [
+        (
+            getattr(ecodes, code),
+            evdev.AbsInfo(value=0, min=-1, max=1, fuzz=0, flat=0, resolution=0),
+        )
+        for code in DEFAULT_CAPABILITIES["axes"][6:]
+    ]
+
+    return {
+        ecodes.EV_KEY: button_codes,
+        ecodes.EV_ABS: axis_codes + trigger_codes + hat_codes,
+    }
+
+def _scale_value(value, source_min, source_max, target_min, target_max):
+    if source_max == source_min:
+        return target_min
+
+    ratio = (value - source_min) / (source_max - source_min)
+    scaled = target_min + ratio * (target_max - target_min)
+    return int(round(scaled))
+
+
+def _source_abs_info(device, code):
+    try:
+        return device.absinfo(code)
+    except Exception:
+        return None
+
+
+def _target_abs_range(code):
+    if code in (
+        ecodes.ABS_X,
+        ecodes.ABS_Y,
+        ecodes.ABS_RX,
+        ecodes.ABS_RY,
+    ):
+        return (-32768, 32767)
+    if code in (ecodes.ABS_Z, ecodes.ABS_RZ):
+        return (0, 255)
+    if code in (ecodes.ABS_HAT0X, ecodes.ABS_HAT0Y):
+        return (-1, 1)
+    return None
+
+
+def _clamp(value, lower, upper):
+    return max(lower, min(upper, value))
+
+
+def _remap_abs_event(device, event):
+    target_range = _target_abs_range(event.code)
+    if target_range is None:
+        return event.code, event.value
+
+    source_abs_info = _source_abs_info(device, event.code)
+    if source_abs_info is None:
+        return event.code, event.value
+
+    source_min = source_abs_info.min
+    source_max = source_abs_info.max
+    target_min, target_max = target_range
+
+    if source_min == target_min and source_max == target_max:
+        value = event.value
+    else:
+        value = _scale_value(event.value, source_min, source_max, target_min, target_max)
+
+    return (event.code, _clamp(value, target_min, target_max))
+
+
+def _remap_key_event(event):
+    # Normalize Linux gamepad buttons onto the intended virtual layout.
+    key_map = {
+        ecodes.BTN_A: ecodes.BTN_SOUTH,
+        ecodes.BTN_B: ecodes.BTN_EAST,
+        ecodes.BTN_X: ecodes.BTN_WEST,
+        ecodes.BTN_Y: ecodes.BTN_NORTH,
+        ecodes.BTN_THUMB: ecodes.BTN_THUMBL,
+        ecodes.BTN_THUMB2: ecodes.BTN_THUMBR,
+        ecodes.BTN_TOP: ecodes.BTN_WEST,
+        ecodes.BTN_TOP2: ecodes.BTN_NORTH,
+    }
+    return key_map.get(event.code, event.code), event.value
+
+
+def _remap_trigger_button_event(event):
+    if event.code == ecodes.BTN_TL2:
+        return ecodes.ABS_Z, 255 if event.value else 0
+    if event.code == ecodes.BTN_TR2:
+        return ecodes.ABS_RZ, 255 if event.value else 0
+    return None
+
+
+def _update_dpad_state(dpad_state, event):
+    if event.code == ecodes.BTN_DPAD_LEFT:
+        dpad_state["left"] = bool(event.value)
+    elif event.code == ecodes.BTN_DPAD_RIGHT:
+        dpad_state["right"] = bool(event.value)
+    elif event.code == ecodes.BTN_DPAD_UP:
+        dpad_state["up"] = bool(event.value)
+    elif event.code == ecodes.BTN_DPAD_DOWN:
+        dpad_state["down"] = bool(event.value)
+
+    hat_x = 0
+    hat_y = 0
+
+    if dpad_state["left"] and not dpad_state["right"]:
+        hat_x = -1
+    elif dpad_state["right"] and not dpad_state["left"]:
+        hat_x = 1
+
+    if dpad_state["up"] and not dpad_state["down"]:
+        hat_y = -1
+    elif dpad_state["down"] and not dpad_state["up"]:
+        hat_y = 1
+
+    return hat_x, hat_y
+
+
+def _write_dpad_state(ui, dpad_state):
+    hat_x = 0
+    hat_y = 0
+
+    if dpad_state["left"] and not dpad_state["right"]:
+        hat_x = -1
+    elif dpad_state["right"] and not dpad_state["left"]:
+        hat_x = 1
+
+    if dpad_state["up"] and not dpad_state["down"]:
+        hat_y = -1
+    elif dpad_state["down"] and not dpad_state["up"]:
+        hat_y = 1
+
+    ui.write(ecodes.EV_ABS, ecodes.ABS_HAT0X, hat_x)
+    ui.write(ecodes.EV_ABS, ecodes.ABS_HAT0Y, hat_y)
+    ui.write(ecodes.EV_KEY, ecodes.BTN_DPAD_LEFT, int(dpad_state["left"]))
+    ui.write(ecodes.EV_KEY, ecodes.BTN_DPAD_RIGHT, int(dpad_state["right"]))
+    ui.write(ecodes.EV_KEY, ecodes.BTN_DPAD_UP, int(dpad_state["up"]))
+    ui.write(ecodes.EV_KEY, ecodes.BTN_DPAD_DOWN, int(dpad_state["down"]))
+    ui.syn()
+
+
+def _update_dpad_state_from_hat(dpad_state, code, value):
+    if code == ecodes.ABS_HAT0X:
+        dpad_state["left"] = value < 0
+        dpad_state["right"] = value > 0
+    elif code == ecodes.ABS_HAT0Y:
+        dpad_state["up"] = value < 0
+        dpad_state["down"] = value > 0
+
+
+def _create_virtual_device(mode):
+    config = TARGET_DEVICE_CONFIGS[mode]
+    return evdev.UInput(
+        create_virtual_capabilities(),
+        name=config["name"],
+        vendor=config["vendor"],
+        product=config["product"],
+        version=config["version"],
+        bustype=config["bustype"],
+    )
+
+
+def _get_uinput_event_path(ui) -> Optional[str]:
+    # Different evdev versions expose the device path through different attributes.
+    try:
+        if hasattr(ui, "device") and ui.device is not None:
+            for attr in ("path", "fn"):
+                value = getattr(ui.device, attr, None)
+                if value:
+                    return value
+    except Exception:
+        pass
+
+    for attr in ("devnode", "path", "fn"):
+        value = getattr(ui, attr, None)
+        if value:
+            return value
+
+    return None
+
+
+def serve_virtual_controller(mode: str, controller_id: Optional[str], exclusive_grab: bool):
+    if evdev is None:
+        raise RuntimeError("python-evdev is not installed")
+
+    controllers = enumerate_input_candidates()
+    selected = None
+    for controller in controllers:
+        if controller_id is None or controller["id"] == controller_id:
+            selected = controller
+            break
+
+    if not selected:
+        raise RuntimeError("No compatible controller was found for the helper session")
+
+    input_device = evdev.InputDevice(selected["eventPath"])
+    ui = _create_virtual_device(mode)
+    virtual_cfg = TARGET_DEVICE_CONFIGS[mode]
+    virtual_event_path = _get_uinput_event_path(ui)
+
+    if exclusive_grab:
+        input_device.grab()
+
+    selector = selectors.DefaultSelector()
+    selector.register(input_device.fd, selectors.EVENT_READ)
+    dpad_state = {
+        "left": False,
+        "right": False,
+        "up": False,
+        "down": False,
+    }
+
+    print(
+        json.dumps(
+            {
+                "status": "ready",
+                "mode": mode,
+                "controller": selected["name"],
+                "exclusive": exclusive_grab,
+                "vendorId": selected.get("vendorId", "0000"),
+                "productId": selected.get("productId", "0000"),
+                "virtualDevice": {
+                    "name": virtual_cfg["name"],
+                    "vendorId": f"{virtual_cfg['vendor']:04x}",
+                    "productId": f"{virtual_cfg['product']:04x}",
+                    "version": f"{virtual_cfg['version']:04x}",
+                    "eventPath": virtual_event_path,
+                },
+            }
+        ),
+        flush=True,
+    )
+
+    try:
+        while RUNNING:
+            for _key, _mask in selector.select(timeout=0.25):
+                for event in input_device.read():
+                    if event.type == ecodes.EV_KEY:
+                        trigger_remap = _remap_trigger_button_event(event)
+                        if trigger_remap is not None:
+                            code, value = trigger_remap
+                            ui.write(ecodes.EV_ABS, code, value)
+                            ui.syn()
+                            continue
+
+                        if event.code in (
+                            ecodes.BTN_DPAD_LEFT,
+                            ecodes.BTN_DPAD_RIGHT,
+                            ecodes.BTN_DPAD_UP,
+                            ecodes.BTN_DPAD_DOWN,
+                        ):
+                            _update_dpad_state(dpad_state, event)
+                            _write_dpad_state(ui, dpad_state)
+                            continue
+
+                        code, value = _remap_key_event(event)
+                        ui.write(event.type, code, value)
+                        ui.syn()
+                    elif event.type == ecodes.EV_ABS:
+                        code, value = _remap_abs_event(input_device, event)
+                        if code in (ecodes.ABS_HAT0X, ecodes.ABS_HAT0Y):
+                            _update_dpad_state_from_hat(dpad_state, code, value)
+                            _write_dpad_state(ui, dpad_state)
+                            continue
+                        ui.write(event.type, code, value)
+                        ui.syn()
+    finally:
+        try:
+            if exclusive_grab:
+                input_device.ungrab()
+        except Exception:
+            pass
+        ui.close()
+        input_device.close()
+
+
+def handle_signal(_signum, _frame):
+    global RUNNING
+    RUNNING = False
+
+
+def main():
+    signal.signal(signal.SIGTERM, handle_signal)
+    signal.signal(signal.SIGINT, handle_signal)
+
+    parser = argparse.ArgumentParser()
+    subparsers = parser.add_subparsers(dest="command", required=True)
+
+    subparsers.add_parser("probe")
+    subparsers.add_parser("list")
+
+    serve_parser = subparsers.add_parser("serve")
+    serve_parser.add_argument("--mode", default="xinput")
+    serve_parser.add_argument("--controller-id")
+    serve_parser.add_argument("--exclusive-grab", action="store_true")
+
+    arguments = parser.parse_args()
+
+    if arguments.command == "probe":
+        print(json.dumps(build_probe()))
+        return 0
+
+    if arguments.command == "list":
+        print(json.dumps({"controllers": enumerate_input_candidates()}))
+        return 0
+
+    if arguments.command == "serve":
+        if arguments.mode not in TARGET_DEVICE_CONFIGS:
+            raise RuntimeError(f"Unsupported serve mode: {arguments.mode}")
+        serve_virtual_controller(
+            arguments.mode,
+            arguments.controller_id,
+            arguments.exclusive_grab,
+        )
+        return 0
+
+    return 1
+
+
+if __name__ == "__main__":
+    try:
+        raise SystemExit(main())
+    except Exception as error:
+        print(json.dumps({"status": "error", "error": str(error)}), file=sys.stderr)
+        raise
diff --git a/electron-builder.config.cjs b/electron-builder.config.cjs
index 9337c65..0df4960 100644
--- a/electron-builder.config.cjs
+++ b/electron-builder.config.cjs
@@ -26,12 +26,14 @@ module.exports = {
     "package.json",
     "lutris_wrapper.sh",
     "lutris_wrapper.py",
+    "controller_helper.py",
     "src_backend/**/*",
     "!node_modules/**/{test,tests,example,examples,doc,docs}/**/*",
   ],
   asarUnpack: [
     "lutris_wrapper.sh",
     "lutris_wrapper.py",
+    "controller_helper.py",
     "electron_preload.cjs",
     "src_backend/resources/gamecontrollerdb.txt",
   ],
diff --git a/electron.cjs b/electron.cjs
index 63983d0..29ea50c 100644
--- a/electron.cjs
+++ b/electron.cjs
@@ -1,6 +1,10 @@
 const { app, Menu } = require("electron");
 
 const { getAppConfig } = require("./src_backend/config_manager.cjs");
+const {
+  initControllerModeManager,
+  shutdownControllerModeManager,
+} = require("./src_backend/controller_mode_manager.cjs");
 const {
   closeRunningGameProcess,
   toggleGamePause,
@@ -34,6 +38,7 @@ app.on("second-instance", () => {
 });
 
 app.on("window-all-closed", () => {
+  shutdownControllerModeManager();
   if (getAppConfig().keepGamesRunningOnQuit) {
     toggleGamePause({ forceStatus: "running" });
   } else {
@@ -88,6 +93,7 @@ app
 
     try {
       registerIpcHandlers();
+      initControllerModeManager();
       createWindow(() => {
         logInfo("Main window closed!");
         if (!getAppConfig().keepGamesRunningOnQuit) {
diff --git a/electron_preload.cjs b/electron_preload.cjs
index 4cc4c00..1e7ed84 100644
--- a/electron_preload.cjs
+++ b/electron_preload.cjs
@@ -96,6 +96,7 @@ contextBridge.exposeInMainWorld("electronAPI", {
 
   // Sdl
   pollGamepadsSdl: () => ipcRenderer.invoke("poll-gamepads-sdl"),
+  listControllers: () => ipcRenderer.invoke("list-controllers"),
 
   // File Manager
   listDirectory: (dirPath) => ipcRenderer.invoke("list-directory", dirPath),
diff --git a/src_backend/config_manager.cjs b/src_backend/config_manager.cjs
index 05ea25c..d2d2b30 100644
--- a/src_backend/config_manager.cjs
+++ b/src_backend/config_manager.cjs
@@ -17,6 +17,7 @@ const defaultConfig = {
   keepGamesRunningOnQuit: false,
   enableUiActionSoundFeedbacks: true,
   enableSdlInput: false,
+  controllerInputMode: "native",
 };
 
 const SUBSCRIPTIONS = {};
diff --git a/src_backend/controller_family_db.cjs b/src_backend/controller_family_db.cjs
new file mode 100644
index 0000000..dc4b890
--- /dev/null
+++ b/src_backend/controller_family_db.cjs
@@ -0,0 +1,72 @@
+const { readFileSync } = require("node:fs");
+
+const { localeAppFile, logWarn } = require("./utils.cjs");
+
+let controllerDbCache = null;
+
+const FAMILY_PATTERNS = [
+  { family: "playstation", pattern: /dualsense|dualshock|playstation|\bps4\b|\bps5\b|wireless controller|sony/i },
+  { family: "xbox", pattern: /xbox|xinput|microsoft/i },
+  { family: "nintendo", pattern: /\bswitch\b|joy-?con|pro controller|nintendo/i },
+  { family: "steam", pattern: /steam deck|steam controller|valve/i },
+  { family: "8bitdo", pattern: /8bitdo/i },
+  { family: "generic", pattern: /gamepad|controller|joystick/i },
+];
+
+function normalizeHex(value) {
+  return (value || "0000").toLowerCase().replace(/^0x/, "").padStart(4, "0");
+}
+
+function loadControllerDatabase() {
+  if (controllerDbCache) {
+    return controllerDbCache;
+  }
+
+  const dbPath = localeAppFile("./src_frontend/resources/gamepad_mapping_db.json");
+  if (dbPath instanceof Error) {
+    logWarn("controller_family_db", "controller mapping database not found");
+    controllerDbCache = {};
+    return controllerDbCache;
+  }
+
+  try {
+    const raw = readFileSync(dbPath, "utf8");
+    const parsed = JSON.parse(raw);
+    controllerDbCache = parsed && typeof parsed === "object" ? parsed : {};
+  } catch (error) {
+    logWarn("controller_family_db", "unable to parse controller mapping database", error);
+    controllerDbCache = {};
+  }
+
+  return controllerDbCache;
+}
+
+function inferFamilyFromName(name = "") {
+  const text = name;
+  for (const { family, pattern } of FAMILY_PATTERNS) {
+    if (pattern.test(text)) {
+      return family;
+    }
+  }
+  return "unknown";
+}
+
+function resolveControllerIdentity(vendorId, productId, fallbackName) {
+  const db = loadControllerDatabase();
+  const key = `${normalizeHex(vendorId)}_${normalizeHex(productId)}`;
+  const entry = db[key];
+  const isRecognized = Boolean(entry?.n);
+  const standardizedName = entry?.n || fallbackName;
+  const family = inferFamilyFromName(standardizedName || "");
+
+  return {
+    databaseKey: key,
+    isRecognized,
+    standardizedName,
+    family,
+  };
+}
+
+module.exports = {
+  resolveControllerIdentity,
+};
diff --git a/src_backend/controller_mode_manager.cjs b/src_backend/controller_mode_manager.cjs
new file mode 100644
index 0000000..cde67dd
--- /dev/null
+++ b/src_backend/controller_mode_manager.cjs
@@ -0,0 +1,141 @@
+const { spawn } = require("node:child_process");
+
+const {
+  getAppConfig,
+  subscribeConfigValueChange,
+} = require("./config_manager.cjs");
+const { localeAppFile, logError, logInfo, logWarn } = require("./utils.cjs");
+
+let helperProcess = null;
+let grabbedDevice = null;
+let virtualDevice = null;
+
+function getControllerHelperPath() {
+  return localeAppFile("controller_helper.py");
+}
+
+function startXinputHelper() {
+  if (helperProcess) {
+    logWarn("controller_mode_manager", "xinput helper already running");
+    return;
+  }
+
+  let helperPath;
+  try {
+    helperPath = getControllerHelperPath();
+  } catch {
+    logError(
+      "controller_mode_manager",
+      "controller_helper.py not found, cannot start xinput mode",
+    );
+    return;
+  }
+
+  logInfo("controller_mode_manager", "starting xinput helper");
+
+  const proc = spawn(
+    "python3",
+    [helperPath, "serve", "--mode", "xinput", "--exclusive-grab"],
+    { stdio: ["ignore", "pipe", "pipe"] },
+  );
+
+  const stdoutDecoder = new TextDecoder();
+  const stderrDecoder = new TextDecoder();
+
+  proc.stdout.on("data", (data) => {
+    const text = stdoutDecoder.decode(data).trim();
+    if (text) {
+      logInfo("controller_mode_manager", text);
+      try {
+        const msg = JSON.parse(text);
+        if (msg.status === "ready" && msg.vendorId && msg.productId) {
+          grabbedDevice = {
+            vendorId: msg.vendorId,
+            productId: msg.productId,
+          };
+        }
+        if (msg.status === "ready" && msg.virtualDevice) {
+          virtualDevice = msg.virtualDevice;
+        }
+      } catch {
+        // not JSON, ignore
+      }
+    }
+  });
+
+  proc.stderr.on("data", (data) => {
+    const text = stderrDecoder.decode(data).trim();
+    if (text) {
+      logError("controller_mode_manager", text);
+    }
+  });
+
+  proc.on("close", (code) => {
+    logInfo("controller_mode_manager", `xinput helper exited with code ${code}`);
+    if (helperProcess === proc) {
+      helperProcess = null;
+      grabbedDevice = null;
+      virtualDevice = null;
+    }
+  });
+
+  proc.on("error", (error) => {
+    logError("controller_mode_manager", "failed to start xinput helper", error);
+    if (helperProcess === proc) {
+      helperProcess = null;
+      grabbedDevice = null;
+      virtualDevice = null;
+    }
+  });
+
+  helperProcess = proc;
+}
+
+function stopXinputHelper() {
+  if (!helperProcess) {
+    return;
+  }
+
+  logInfo("controller_mode_manager", "stopping xinput helper");
+  helperProcess.kill("SIGTERM");
+  helperProcess = null;
+  grabbedDevice = null;
+  virtualDevice = null;
+}
+
+function applyInputMode(mode) {
+  if (mode === "xinput") {
+    startXinputHelper();
+  } else {
+    stopXinputHelper();
+  }
+}
+
+function initControllerModeManager() {
+  const config = getAppConfig();
+  applyInputMode(config.controllerInputMode);
+
+  subscribeConfigValueChange("controllerInputMode", (newMode) => {
+    logInfo("controller_mode_manager", `input mode changed to: ${newMode}`);
+    applyInputMode(newMode);
+  });
+}
+
+function shutdownControllerModeManager() {
+  stopXinputHelper();
+}
+
+function getGrabbedDevice() {
+  return grabbedDevice;
+}
+
+function getVirtualDevice() {
+  return virtualDevice;
+}
+
+module.exports = {
+  initControllerModeManager,
+  shutdownControllerModeManager,
+  getGrabbedDevice,
+  getVirtualDevice,
+};
diff --git a/src_backend/game_manager.cjs b/src_backend/game_manager.cjs
index bb947e9..4c14eb1 100644
--- a/src_backend/game_manager.cjs
+++ b/src_backend/game_manager.cjs
@@ -6,6 +6,7 @@ const path = require("node:path");
 const { globalShortcut } = require("electron");
 
 const { getAppConfig } = require("./config_manager.cjs");
+const { getGrabbedDevice } = require("./controller_mode_manager.cjs");
 const {
   getCoverartPath,
   getRuntimeIconPath,
@@ -280,13 +281,27 @@ function launchGame(gameId) {
   }
 
   const gameStartTime = Date.now();
+  const appConfig = getAppConfig();
+
+  const spawnOptions = {
+    detached: appConfig.keepGamesRunningOnQuit,
+  };
+
+  const grabbed = getGrabbedDevice();
+  if (appConfig.controllerInputMode === "xinput" && grabbed) {
+    const vid = `0x${grabbed.vendorId}`;
+    const pid = `0x${grabbed.productId}`;
+    spawnOptions.env = {
+      ...process.env,
+      SDL_GAMECONTROLLER_IGNORE_DEVICES: `${vid}/${pid}`,
+      SDL_JOYSTICK_IGNORE_DEVICES: `${vid}/${pid}`,
+    };
+  }
 
   const newGameProcess = spawn(
     "bash",
     [getLutrisWrapperPath(), `lutris:rungameid/${gameId}`],
-    {
-      detached: getAppConfig().keepGamesRunningOnQuit,
-    },
+    spawnOptions,
   );
 
   const stdoutTextDecoder = new TextDecoder();
diff --git a/src_backend/ipc_handlers.cjs b/src_backend/ipc_handlers.cjs
index a2b735d..776f1aa 100644
--- a/src_backend/ipc_handlers.cjs
+++ b/src_backend/ipc_handlers.cjs
@@ -36,7 +36,7 @@ const {
   getLutrisRunners,
 } = require("./lutris_wrapper.cjs");
 const { serializeGamepads } = require("./sdl_gamepad_serialize.cjs");
-const { mapSdlGamepadsToWebApi, pollGamepads } = require("./sdl_manager.cjs");
+const { mapSdlGamepadsToWebApi, pollGamepads, listControllers } = require("./sdl_manager.cjs");
 const { getMainWindow } = require("./state.cjs");
 const { getUserTheme } = require("./theme_manager.cjs");
 const {
@@ -313,6 +313,10 @@ function registerIpcHandlers() {
     }
     return await listDirectory(dirPath);
   });
+
+  ipcHandleWithError("list-controllers", async () => {
+    return await listControllers();
+  });
 }
 
 module.exports = { registerIpcHandlers };
diff --git a/src_backend/sdl_bindings.cjs b/src_backend/sdl_bindings.cjs
index eb77d3b..a817dee 100644
--- a/src_backend/sdl_bindings.cjs
+++ b/src_backend/sdl_bindings.cjs
@@ -56,8 +56,30 @@ function bindSDL3(lib) {
     SDL_GetGamepadName: lib.func(
       "const char* SDL_GetGamepadName(SDL_Gamepad* gamepad)",
     ),
+    SDL_GetGamepadVendor: lib.func(
+      "Uint16 SDL_GetGamepadVendor(SDL_Gamepad* gamepad)",
+    ),
+    SDL_GetGamepadProduct: lib.func(
+      "Uint16 SDL_GetGamepadProduct(SDL_Gamepad* gamepad)",
+    ),
   };
 
+  try {
+    sdl.SDL_GetGamepadProductVersion = lib.func(
+      "Uint16 SDL_GetGamepadProductVersion(SDL_Gamepad* gamepad)",
+    );
+  } catch {
+    sdl.SDL_GetGamepadProductVersion = null;
+  }
+
+  try {
+    sdl.SDL_GetGamepadPath = lib.func(
+      "const char* SDL_GetGamepadPath(SDL_Gamepad* gamepad)",
+    );
+  } catch {
+    sdl.SDL_GetGamepadPath = null;
+  }
+
   return sdl;
 }
 
diff --git a/src_backend/sdl_manager.cjs b/src_backend/sdl_manager.cjs
index 744d008..401ba44 100644
--- a/src_backend/sdl_manager.cjs
+++ b/src_backend/sdl_manager.cjs
@@ -1,3 +1,6 @@
+const { getAppConfig } = require("./config_manager.cjs");
+const { resolveControllerIdentity } = require("./controller_family_db.cjs");
+const { getVirtualDevice } = require("./controller_mode_manager.cjs");
 const {
   SDL3_LIBRARY_NAME,
   bindSDL3,
@@ -186,4 +189,101 @@ function mapSdlGamepadsToWebApi(gamepads) {
   }));
 }
 
-module.exports = { pollGamepads, mapSdlGamepadsToWebApi };
+function isAppGeneratedXinputController(controller, virtualDevice) {
+  return Boolean(
+    virtualDevice?.eventPath &&
+      controller.path &&
+      virtualDevice.eventPath === controller.path,
+  );
+}
+
+async function listControllers() {
+  const { sdl, activeControllers, koffi } = await getSdlHandle();
+
+  sdl.SDL_PumpEvents();
+  sdl.SDL_UpdateGamepads();
+
+  const countPtr = new Int32Array(1);
+  const gamepadsPtr = sdl.SDL_GetGamepads(countPtr);
+  const numGamepads = countPtr[0];
+  const currentInstanceIds = new Set();
+
+  if (gamepadsPtr) {
+    try {
+      const decoded = koffi.decode(gamepadsPtr, "SDL_JoystickID", numGamepads);
+      for (let i = 0; i < numGamepads; i++) {
+        currentInstanceIds.add(decoded[i]);
+      }
+    } finally {
+      sdl.SDL_free(gamepadsPtr);
+    }
+  }
+
+  for (const [instanceId, ptr] of activeControllers.entries()) {
+    if (!currentInstanceIds.has(instanceId) || !sdl.SDL_GamepadConnected(ptr)) {
+      sdl.SDL_CloseGamepad(ptr);
+      activeControllers.delete(instanceId);
+    }
+  }
+
+  const controllers = [];
+  const appConfig = getAppConfig();
+  const virtualDevice =
+    appConfig?.controllerInputMode === "xinput" ? getVirtualDevice() : null;
+
+  for (const instanceId of currentInstanceIds) {
+    if (!sdl.SDL_IsGamepad(instanceId)) {
+      continue;
+    }
+
+    let ptr = activeControllers.get(instanceId);
+    if (!ptr) {
+      ptr = sdl.SDL_OpenGamepad(instanceId);
+      if (ptr) {
+        activeControllers.set(instanceId, ptr);
+      }
+    }
+
+    if (!ptr || !sdl.SDL_GamepadConnected(ptr)) {
+      continue;
+    }
+
+    const rawName = sdl.SDL_GetGamepadName(ptr) || `Controller ${controllers.length + 1}`;
+    const vendorId = sdl.SDL_GetGamepadVendor(ptr)
+      .toString(16)
+      .padStart(4, "0");
+    const productId = sdl.SDL_GetGamepadProduct(ptr)
+      .toString(16)
+      .padStart(4, "0");
+    const version = sdl.SDL_GetGamepadProductVersion
+      ? sdl.SDL_GetGamepadProductVersion(ptr).toString(16).padStart(4, "0")
+      : null;
+    const path = sdl.SDL_GetGamepadPath
+      ? sdl.SDL_GetGamepadPath(ptr)
+      : null;
+    const identity = resolveControllerIdentity(vendorId, productId, rawName);
+
+    const controller = {
+      index: instanceId,
+      name: identity.standardizedName,
+      rawName,
+      vendorId,
+      productId,
+      version,
+      path,
+      databaseKey: identity.databaseKey,
+      isRecognized: identity.isRecognized,
+      family: identity.family,
+    };
+
+    if (isAppGeneratedXinputController(controller, virtualDevice)) {
+      continue;
+    }
+
+    controllers.push(controller);
+  }
+
+  return controllers;
+}
+
+module.exports = { pollGamepads, mapSdlGamepadsToWebApi, listControllers };
diff --git a/src_frontend/assets/controller-models/index.js b/src_frontend/assets/controller-models/index.js
new file mode 100644
index 0000000..87b80d0
--- /dev/null
+++ b/src_frontend/assets/controller-models/index.js
@@ -0,0 +1,130 @@
+import JoyConModel from "./models/nintendo/JoyConModel.jsx";
+import SwitchProModel from "./models/nintendo/SwitchProModel.jsx";
+import DualSenseModel from "./models/playstation/DualSenseModel.jsx";
+import DualShock3Model from "./models/playstation/DualShock3Model.jsx";
+import DualShock4Model from "./models/playstation/DualShock4Model.jsx";
+import Xbox360Model from "./models/xbox/Xbox360Model.jsx";
+import XboxOneModel from "./models/xbox/XboxOneModel.jsx";
+import XboxSeriesModel from "./models/xbox/XboxSeriesModel.jsx";
+
+function getControllerText(controller) {
+  return [
+    controller?.name,
+    controller?.rawName,
+  ]
+    .filter(Boolean)
+    .join(" ")
+    .toLowerCase();
+}
+
+function nameMatches(controller, pattern) {
+  return pattern.test(getControllerText(controller));
+}
+
+export const MODEL_REGISTRY = [
+  {
+    id: "playstation-dualsense",
+    component: DualSenseModel,
+    matchController: (controller) =>
+      controller?.family === "playstation" && nameMatches(controller, /dualsense|ps5|playstation 5/),
+  },
+  {
+    id: "playstation-dualshock3",
+    component: DualShock3Model,
+    matchController: (controller) =>
+      controller?.family === "playstation" && nameMatches(controller, /dualshock\s*3|\bps3\b|playstation 3/),
+  },
+  {
+    id: "playstation-dualshock4",
+    component: DualShock4Model,
+    matchController: (controller) =>
+      controller?.family === "playstation" && nameMatches(controller, /dualshock\s*4|\bps4\b|playstation 4/),
+  },
+  {
+    id: "playstation-dualshock4",
+    component: DualShock4Model,
+    matchController: (controller) => controller?.family === "playstation",
+  },
+  {
+    id: "xbox-series",
+    component: XboxSeriesModel,
+    matchController: (controller) =>
+      controller?.family === "xbox" && nameMatches(controller, /xbox\s*series|series\s*[xs]/),
+  },
+  {
+    id: "xbox-360",
+    component: Xbox360Model,
+    matchController: (controller) =>
+      controller?.family === "xbox" && nameMatches(controller, /xbox\s*360|x360/),
+  },
+  {
+    id: "xbox-one",
+    component: XboxOneModel,
+    matchController: (controller) =>
+      controller?.family === "xbox" && nameMatches(controller, /xbox\s*one|elite|xbox wireless controller/),
+  },
+  {
+    id: "xbox-one",
+    component: XboxOneModel,
+    matchController: (controller) => controller?.family === "xbox",
+  },
+  {
+    id: "nintendo-joycon",
+    component: JoyConModel,
+    matchController: (controller) =>
+      controller?.family === "nintendo" && nameMatches(controller, /joy-?con|left joy|right joy|combined joy/),
+  },
+  {
+    id: "nintendo-switch-pro",
+    component: SwitchProModel,
+    matchController: (controller) =>
+      controller?.family === "nintendo" && nameMatches(controller, /switch\s*pro|switch 2 pro|pro controller/),
+  },
+  {
+    id: "nintendo-switch-pro",
+    component: SwitchProModel,
+    matchController: (controller) => controller?.family === "nintendo",
+  },
+];
+
+export const MODEL_COMPONENTS = {
+  "playstation-dualsense": DualSenseModel,
+  "playstation-dualshock3": DualShock3Model,
+  "playstation-dualshock4": DualShock4Model,
+  "xbox-series": XboxSeriesModel,
+  "xbox-360": Xbox360Model,
+  "xbox-one": XboxOneModel,
+  "nintendo-joycon": JoyConModel,
+  "nintendo-switch-pro": SwitchProModel,
+};
+
+export function resolveControllerModel(controller) {
+  for (const model of MODEL_REGISTRY) {
+    if (model.matchController(controller)) {
+      return model.id;
+    }
+  }
+
+  if (controller?.family === "playstation") {
+    return "playstation-dualshock4";
+  }
+
+  if (controller?.family === "nintendo") {
+    return "nintendo-switch-pro";
+  }
+
+  if (controller?.family === "xbox") {
+    return "xbox-one";
+  }
+
+  return "xbox-one";
+}
+
+export { default as DualSenseModel } from "./models/playstation/DualSenseModel.jsx";
+export { default as DualShock3Model } from "./models/playstation/DualShock3Model.jsx";
+export { default as DualShock4Model } from "./models/playstation/DualShock4Model.jsx";
+export { default as JoyConModel } from "./models/nintendo/JoyConModel.jsx";
+export { default as SwitchProModel } from "./models/nintendo/SwitchProModel.jsx";
+export { default as Xbox360Model } from "./models/xbox/Xbox360Model.jsx";
+export { default as XboxOneModel } from "./models/xbox/XboxOneModel.jsx";
+export { default as XboxSeriesModel } from "./models/xbox/XboxSeriesModel.jsx";
diff --git a/src_frontend/assets/controller-models/models/nintendo/JoyConModel.jsx b/src_frontend/assets/controller-models/models/nintendo/JoyConModel.jsx
new file mode 100644
index 0000000..1bcded8
--- /dev/null
+++ b/src_frontend/assets/controller-models/models/nintendo/JoyConModel.jsx
@@ -0,0 +1,5 @@
+import SwitchProModel from "./SwitchProModel.jsx";
+
+const JoyConModel = (props) => <SwitchProModel {...props} />;
+
+export default JoyConModel;
diff --git a/src_frontend/assets/controller-models/models/nintendo/SwitchProModel.jsx b/src_frontend/assets/controller-models/models/nintendo/SwitchProModel.jsx
new file mode 100644
index 0000000..a415ffb
--- /dev/null
+++ b/src_frontend/assets/controller-models/models/nintendo/SwitchProModel.jsx
@@ -0,0 +1,60 @@
+import switchProSvg from "./vendor/switch-pro-controller.svg";
+import TriggerMeter from "../../shared/TriggerMeter.jsx";
+import {
+  BTN,
+  getAxis,
+  getButtonValue,
+  isPressed,
+} from "../../shared/utils.js";
+
+// Keep this model asset-based using the Ryujinx ProCon SVG; do not hand-draw the body again.
+const SwitchProModel = ({ s }) => {
+  const accent = "#e60012";
+  const stickTravel = 14;
+  const lx = 213.37 + getAxis(s, 0) * stickTravel;
+  const ly = 206.39 + getAxis(s, 1) * stickTravel;
+  const rx = 623.77 + getAxis(s, 2) * stickTravel;
+  const ry = 345.09 + getAxis(s, 3) * stickTravel;
+  const lt = getButtonValue(s, BTN.LT);
+  const rt = getButtonValue(s, BTN.RT);
+
+  return (
+    <div className="ct-model-wrap">
+      <img className="ct-model-base" src={switchProSvg} alt="Nintendo Switch Pro controller" />
+      <svg className="ct-model-overlay" viewBox="0 0 996.25 690.92" xmlns="http://www.w3.org/2000/svg">
+        <TriggerMeter x={170} y={36} width={170} label="ZL" value={lt} accent={accent} align="center" />
+        <TriggerMeter x={826} y={36} width={170} label="ZR" value={rt} accent={accent} align="center" />
+
+        <path d="m649.47,19.99c10.1-4.3,39.7-22.5,58.7-19.7,59.5.9,166.7,17.7,172.6,81.2" stroke={isPressed(s, BTN.RB) ? accent : "transparent"} strokeWidth="10" fill="none" strokeLinecap="round" />
+        <path d="m115.57,81.49C121.47,18.09,228.57,1.29,288.17.29c19-2.8,48.6,15.4,58.7,19.7" stroke={isPressed(s, BTN.LB) ? accent : "transparent"} strokeWidth="10" fill="none" strokeLinecap="round" />
+
+        <rect x="354" y="281" width="31" height="39" rx="4" fill={isPressed(s, BTN.DPAD_UP) ? accent : "transparent"} />
+        <rect x="354" y="370" width="31" height="40" rx="4" fill={isPressed(s, BTN.DPAD_DOWN) ? accent : "transparent"} />
+        <rect x="309" y="325" width="40" height="31" rx="4" fill={isPressed(s, BTN.DPAD_LEFT) ? accent : "transparent"} />
+        <rect x="399" y="325" width="40" height="31" rx="4" fill={isPressed(s, BTN.DPAD_RIGHT) ? accent : "transparent"} />
+
+        <circle cx="767.07" cy="136.39" r="35" fill={isPressed(s, BTN.Y) ? accent : "transparent"} />
+        <circle cx="767.07" cy="276.39" r="35" fill={isPressed(s, BTN.A) ? accent : "transparent"} />
+        <circle cx="697.07" cy="206.39" r="35" fill={isPressed(s, BTN.X) ? accent : "transparent"} />
+        <circle cx="837.07" cy="206.39" r="35" fill={isPressed(s, BTN.B) ? accent : "transparent"} />
+        <text x="767.07" y="146" textAnchor="middle" fontSize="30" fontWeight="700" fill={isPressed(s, BTN.Y) ? "#fff" : "#9fa09e"}>X</text>
+        <text x="767.07" y="286" textAnchor="middle" fontSize="30" fontWeight="700" fill={isPressed(s, BTN.A) ? "#fff" : "#9fa09e"}>B</text>
+        <text x="697.07" y="216" textAnchor="middle" fontSize="30" fontWeight="700" fill={isPressed(s, BTN.X) ? "#fff" : "#9fa09e"}>Y</text>
+        <text x="837.07" y="216" textAnchor="middle" fontSize="30" fontWeight="700" fill={isPressed(s, BTN.B) ? "#fff" : "#9fa09e"}>A</text>
+
+        <circle cx="374.17" cy="130.89" r="22.5" fill={isPressed(s, BTN.SELECT) ? accent : "transparent"} />
+        <circle cx="623.57" cy="131.19" r="22.5" fill={isPressed(s, BTN.START) ? accent : "transparent"} />
+        <circle cx="578.57" cy="206.39" r="22.5" fill={isPressed(s, BTN.HOME) ? accent : "transparent"} />
+
+        {/* Redraw stick wells to mask static sticks from the base asset. */}
+        <circle cx="213.37" cy="206.39" r="55" fill="#20221f" />
+        <circle cx="623.77" cy="345.09" r="55" fill="#20221f" />
+
+        <circle cx={lx} cy={ly} r="45" fill="#444542" stroke={isPressed(s, BTN.L3) ? accent : "#ffffff"} strokeWidth="2" className="ct-stick-anim" />
+        <circle cx={rx} cy={ry} r="45" fill="#444542" stroke={isPressed(s, BTN.R3) ? accent : "#ffffff"} strokeWidth="2" className="ct-stick-anim" />
+      </svg>
+    </div>
+  );
+};
+
+export default SwitchProModel;
diff --git a/src_frontend/assets/controller-models/models/nintendo/vendor/switch-pro-controller.svg b/src_frontend/assets/controller-models/models/nintendo/vendor/switch-pro-controller.svg
new file mode 100644
index 0000000..53eef82
--- /dev/null
+++ b/src_frontend/assets/controller-models/models/nintendo/vendor/switch-pro-controller.svg
@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 996.25 690.92">
+  <defs>
+    <style>
+      .cls-1 {
+        stroke: #fff;
+        stroke-miterlimit: 10;
+        stroke-width: 2px;
+      }
+
+      .cls-1, .cls-2 {
+        fill: #444542;
+      }
+
+      .cls-3 {
+        fill: #3b3b3b;
+      }
+
+      .cls-3, .cls-4, .cls-2, .cls-5, .cls-6, .cls-7 {
+        stroke-width: 0px;
+      }
+
+      .cls-4 {
+        fill: #3b3c3a;
+      }
+
+      .cls-5 {
+        fill: #454644;
+      }
+
+      .cls-6 {
+        fill: #20221f;
+      }
+
+      .cls-7 {
+        fill: #121212;
+      }
+    </style>
+  </defs>
+  <g id="Front">
+    <path id="Right_Grip" data-name="Right Grip" class="cls-6" d="m739.17,492.09c34,28.2,27.6,35.9,68.5,108.5,36.7,74.7,64.4,104.4,125.1,84.1h0c95.3-57.9,59.3-145.3,43.6-275.2-10-60.6-35.6-190.3-35.6-190.3l-201.6,272.9Z"/>
+    <path id="Left_Grip" data-name="Left Grip" class="cls-6" d="m55.47,219.19s-25.6,129.7-35.6,190.3c-15.7,129.9-51.7,217.2,43.6,275.1h0c60.8,20.3,88.4-9.4,125.1-84.1,40.9-72.7,34.5-80.3,68.5-108.5L55.47,219.19Z"/>
+    <path id="Right_Bumper" data-name="Right Bumper" class="cls-3" d="m649.47,19.99c10.1-4.3,39.7-22.5,58.7-19.7,59.5.9,166.7,17.7,172.6,81.2"/>
+    <path id="Left_Bumper" data-name="Left Bumper" class="cls-3" d="m115.57,81.49C121.47,18.09,228.57,1.29,288.17.29c19-2.8,48.6,15.4,58.7,19.7"/>
+    <path id="Background" class="cls-7" d="m739.17,492.09c35.5-30.8,68.5-74.7,96-113.5,26.9-36.3,94.7-136.7,105.6-159.3,0-2.4-6.3-30.1-12.8-56.2C892.27,3.49,675.37,19.69,498.17,19.69S104.07,3.49,68.27,162.99c-6.5,26-12.8,53.8-12.8,56.2,10.9,22.6,78.8,123,105.6,159.3,27.5,38.8,60.5,82.8,96,113.5"/>
+    <g id="Directional_Pad" data-name="Directional Pad">
+      <path id="Background-2" data-name="Background" class="cls-2" d="m439.37,325.09h-40c-2.8,0-5-2.2-5-5v-40c0-2.8-2.2-5-5-5h-30c-2.8,0-5,2.2-5,5v40c0,2.8-2.2,5-5,5h-40c-2.8,0-5,2.2-5,5v30c0,2.8,2.2,5,5,5h40c2.8,0,5,2.2,5,5v40c0,2.8,2.2,5,5,5h30c2.8,0,5-2.2,5-5v-40c0-2.8,2.2-5,5-5h40c2.8,0,5-2.2,5-5v-30c0-2.7-2.2-5-5-5Z"/>
+    </g>
+    <g id="R_Thumbstick" data-name="R Thumbstick">
+      <circle id="Background-3" data-name="Background" class="cls-6" cx="623.77" cy="345.09" r="55"/>
+      <circle id="Stick" class="cls-1" cx="623.77" cy="345.09" r="45"/>
+    </g>
+    <g id="L_Thumbstick" data-name="L Thumbstick">
+      <circle id="Background-4" data-name="Background" class="cls-6" cx="213.37" cy="206.39" r="55"/>
+      <circle id="Stick-2" data-name="Stick" class="cls-1" cx="213.37" cy="206.39" r="45" transform="translate(-24.53 383.95) rotate(-80.78)"/>
+    </g>
+    <g id="Minus_Button" data-name="Minus Button">
+      <circle id="_Background" data-name=" Background" class="cls-5" cx="374.17" cy="130.89" r="22.5"/>
+    </g>
+    <g id="Plus_Button" data-name="Plus Button">
+      <circle id="_Background-2" data-name=" Background" class="cls-5" cx="623.57" cy="131.19" r="22.5"/>
+    </g>
+    <g id="Home_Button" data-name="Home Button">
+      <circle id="_Background-3" data-name=" Background" class="cls-5" cx="578.57" cy="206.39" r="22.5"/>
+    </g>
+    <g id="Capture_Button" data-name="Capture Button">
+      <path class="cls-5" d="m441.77,228.09h-30c-2.8,0-5-2.2-5-5v-29.5c0-2.8,2.2-5,5-5h30c2.8,0,5,2.2,5,5v29.5c0,2.7-2.2,5-5,5Z"/>
+    </g>
+    <g id="Buttons">
+      <g id="A_Button" data-name="A Button">
+        <circle id="Background-5" data-name="Background" class="cls-4" cx="837.07" cy="206.39" r="35"/>
+      </g>
+      <g id="X_Button" data-name="X Button">
+        <circle id="Background-6" data-name="Background" class="cls-4" cx="767.07" cy="136.39" r="35"/>
+      </g>
+      <g id="Y_Button" data-name="Y Button">
+        <circle id="Background-7" data-name="Background" class="cls-4" cx="697.07" cy="206.39" r="35"/>
+      </g>
+      <g id="B_Button" data-name="B Button">
+        <circle id="Background-8" data-name="Background" class="cls-4" cx="767.07" cy="276.39" r="35"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src_frontend/assets/controller-models/models/playstation/DualSenseModel.jsx b/src_frontend/assets/controller-models/models/playstation/DualSenseModel.jsx
new file mode 100644
index 0000000..d904491
--- /dev/null
+++ b/src_frontend/assets/controller-models/models/playstation/DualSenseModel.jsx
@@ -0,0 +1,285 @@
+import { useLayoutEffect, useRef, useState } from "react";
+import controllerBasePng from "./vendor/ps5-controller-visualizer/controller-base.png";
+import stickSpritePng from "./vendor/ps5-controller-visualizer/stick-sprite.png";
+import abxySpritePng from "./vendor/ps5-controller-visualizer/abxy-sprite.png";
+import arrowsSpritePng from "./vendor/ps5-controller-visualizer/arrows-sprite.png";
+import dpadSpritePng from "./vendor/ps5-controller-visualizer/dpad-sprite.png";
+import bumperSpritePng from "./vendor/ps5-controller-visualizer/bumper-sprite.png";
+import triggerSpritePng from "./vendor/ps5-controller-visualizer/trigger-sprite.png";
+import psColorPng from "./vendor/ps5-controller-visualizer/ps-color.png";
+import {
+	BTN,
+	getAxis,
+	getButtonValue,
+	isPressed,
+} from "../../shared/utils.js";
+
+const SCENE_WIDTH = 807;
+const SCENE_HEIGHT = 651;
+const MAX_STICK_MOVE = 15;
+const TOUCHPAD_BUTTON_INDEX = 17;
+
+const abs = (left, top, width, height) => ({
+	position: "absolute",
+	left,
+	top,
+	width,
+	height,
+});
+
+const spriteStyle = (url) => ({
+	backgroundImage: `url(${url})`,
+	backgroundRepeat: "no-repeat",
+});
+
+const DualSenseModel = ({ s }) => {
+	const hostRef = useRef(null);
+	const [scale, setScale] = useState(1);
+
+	useLayoutEffect(() => {
+		const host = hostRef.current;
+		if (!host) return undefined;
+
+		const updateScale = () => {
+			const next = Math.min(1, host.clientWidth / SCENE_WIDTH);
+			setScale(Number.isFinite(next) && next > 0 ? next : 1);
+		};
+
+		updateScale();
+		const observer = new ResizeObserver(updateScale);
+		observer.observe(host);
+
+		return () => observer.disconnect();
+	}, []);
+
+	const crossPressed = isPressed(s, BTN.A);
+	const circlePressed = isPressed(s, BTN.B);
+	const squarePressed = isPressed(s, BTN.X);
+	const trianglePressed = isPressed(s, BTN.Y);
+	const dpadUpPressed = isPressed(s, BTN.DPAD_UP);
+	const dpadDownPressed = isPressed(s, BTN.DPAD_DOWN);
+	const dpadLeftPressed = isPressed(s, BTN.DPAD_LEFT);
+	const dpadRightPressed = isPressed(s, BTN.DPAD_RIGHT);
+	const sharePressed = isPressed(s, BTN.SELECT);
+	const optionsPressed = isPressed(s, BTN.START);
+	const l1Pressed = isPressed(s, BTN.LB);
+	const r1Pressed = isPressed(s, BTN.RB);
+	const l3Pressed = isPressed(s, BTN.L3);
+	const r3Pressed = isPressed(s, BTN.R3);
+	const psPressed = isPressed(s, BTN.HOME);
+	const touchpadPressed = isPressed(s, TOUCHPAD_BUTTON_INDEX);
+
+	const l2 = getButtonValue(s, BTN.LT);
+	const r2 = getButtonValue(s, BTN.RT);
+
+	const lx = getAxis(s, 0) * MAX_STICK_MOVE;
+	const ly = getAxis(s, 1) * MAX_STICK_MOVE;
+	const rx = getAxis(s, 2) * MAX_STICK_MOVE;
+	const ry = getAxis(s, 3) * MAX_STICK_MOVE;
+
+	return (
+		<div
+			className="ct-model-wrap"
+			ref={hostRef}
+			style={{ height: `${SCENE_HEIGHT * scale}px` }}
+		>
+			<div
+				style={{
+					position: "relative",
+					width: `${SCENE_WIDTH}px`,
+					height: `${SCENE_HEIGHT}px`,
+					transform: `scale(${scale})`,
+					transformOrigin: "top left",
+				}}
+			>
+				<img
+					src={controllerBasePng}
+					alt="DualSense controller"
+					style={{ display: "block", width: "100%", height: "100%" }}
+				/>
+
+				<div style={{ ...abs(220, 333, 367, 100), pointerEvents: "none" }}>
+					<div
+						style={{
+							...abs(0, 0, 100, 100),
+							...spriteStyle(stickSpritePng),
+							backgroundPosition: `${l3Pressed ? -102 : 0}px 0px`,
+							transform: `translate(${lx}px, ${ly}px)`,
+							transition: "transform 0.05s linear",
+						}}
+					/>
+					<div
+						style={{
+							...abs(267, 0, 100, 100),
+							...spriteStyle(stickSpritePng),
+							backgroundPosition: `${r3Pressed ? -102 : 0}px 0px`,
+							transform: `translate(${rx}px, ${ry}px)`,
+							transition: "transform 0.05s linear",
+						}}
+					/>
+				</div>
+
+				<div style={{ ...abs(573, 178, 181, 181), pointerEvents: "none" }}>
+					<div
+						style={{
+							...abs(61, 123, 58, 58),
+							...spriteStyle(abxySpritePng),
+							backgroundPosition: `0px ${crossPressed ? -59 : 0}px`,
+							opacity: crossPressed ? 1 : 0,
+						}}
+					/>
+					<div
+						style={{
+							...abs(123, 62, 58, 58),
+							...spriteStyle(abxySpritePng),
+							backgroundPosition: `${-59}px ${circlePressed ? -59 : 0}px`,
+							opacity: circlePressed ? 1 : 0,
+						}}
+					/>
+					<div
+						style={{
+							...abs(0, 61, 58, 58),
+							...spriteStyle(abxySpritePng),
+							backgroundPosition: `${-118}px ${squarePressed ? -59 : 0}px`,
+							opacity: squarePressed ? 1 : 0,
+						}}
+					/>
+					<div
+						style={{
+							...abs(61, 0, 58, 58),
+							...spriteStyle(abxySpritePng),
+							backgroundPosition: `${-177}px ${trianglePressed ? -59 : 0}px`,
+							opacity: trianglePressed ? 1 : 0,
+						}}
+					/>
+				</div>
+
+				<div style={{ ...abs(71, 196, 144, 144), pointerEvents: "none" }}>
+					<div
+						style={{
+							...abs(46, 0, 52, 63),
+							...spriteStyle(dpadSpritePng),
+							backgroundPosition: "0px -68px",
+							opacity: dpadUpPressed ? 1 : 0,
+						}}
+					/>
+					<div
+						style={{
+							...abs(81, 46, 63, 52),
+							...spriteStyle(dpadSpritePng),
+							backgroundPosition: "-175px -68px",
+							opacity: dpadRightPressed ? 1 : 0,
+						}}
+					/>
+					<div
+						style={{
+							...abs(46, 81, 52, 63),
+							...spriteStyle(dpadSpritePng),
+							backgroundPosition: "-54px -68px",
+							opacity: dpadDownPressed ? 1 : 0,
+						}}
+					/>
+					<div
+						style={{
+							...abs(-1, 47, 64, 52),
+							...spriteStyle(dpadSpritePng),
+							backgroundPosition: "-108px -68px",
+							opacity: dpadLeftPressed ? 1 : 0,
+						}}
+					/>
+				</div>
+
+				<div
+					style={{
+						...abs(195, 140, 416, 57),
+						pointerEvents: "none",
+					}}
+				>
+					<div
+						style={{
+							...abs(0, 0, 27, 57),
+							...spriteStyle(arrowsSpritePng),
+							opacity: sharePressed ? 1 : 0,
+							transform: sharePressed ? "translateY(1px)" : "none",
+						}}
+					/>
+					<div
+						style={{
+							...abs(389, 0, 27, 57),
+							...spriteStyle(arrowsSpritePng),
+							backgroundPosition: "-27px 0px",
+							opacity: optionsPressed ? 1 : 0,
+							transform: optionsPressed ? "translateY(1px)" : "none",
+						}}
+					/>
+				</div>
+
+				<div style={{ ...abs(93, 114, 620, 35), pointerEvents: "none" }}>
+					<div
+						style={{
+							...abs(0, 0, 110, 35),
+							...spriteStyle(bumperSpritePng),
+							backgroundPosition: "0px 0px",
+							opacity: l1Pressed ? 1 : 0,
+							transform: l1Pressed ? "translateY(1px)" : "none",
+						}}
+					/>
+					<div
+						style={{
+							...abs(510, 0, 110, 35),
+							...spriteStyle(bumperSpritePng),
+							backgroundPosition: "0px 0px",
+							opacity: r1Pressed ? 1 : 0,
+							transform: `${r1Pressed ? "translateY(1px) " : ""}scaleX(-1)`,
+							transformOrigin: "center",
+						}}
+					/>
+				</div>
+
+				<div style={{ ...abs(94, 0, 619, 108), pointerEvents: "none" }}>
+					<div
+						style={{
+							...abs(0, 0, 111, 108),
+							...spriteStyle(triggerSpritePng),
+							opacity: l2 > 0.05 ? l2 : 0,
+						}}
+					/>
+					<div
+						style={{
+							...abs(508, 0, 111, 108),
+							...spriteStyle(triggerSpritePng),
+							backgroundPosition: "-113px 0px",
+							opacity: r2 > 0.05 ? r2 : 0,
+						}}
+					/>
+				</div>
+
+				<div
+					style={{
+						...abs(373, 345, 60, 60),
+						...spriteStyle(psColorPng),
+						backgroundSize: "contain",
+						backgroundPosition: "center",
+						opacity: psPressed ? 1 : 0,
+						transform: psPressed ? "translateY(1px)" : "none",
+						pointerEvents: "none",
+					}}
+				/>
+
+				<div
+					style={{
+						...abs(380, 200, 40, 40),
+						borderRadius: "50%",
+						background: "rgba(45, 90, 240, 0.85)",
+						boxShadow: "0 0 10px rgba(45, 90, 240, 0.6)",
+						opacity: touchpadPressed ? 1 : 0,
+						transform: touchpadPressed ? "translateY(1px)" : "none",
+						pointerEvents: "none",
+					}}
+				/>
+			</div>
+		</div>
+	);
+};
+
+export default DualSenseModel;
diff --git a/src_frontend/assets/controller-models/models/playstation/DualShock3Model.jsx b/src_frontend/assets/controller-models/models/playstation/DualShock3Model.jsx
new file mode 100644
index 0000000..e8e0c22
--- /dev/null
+++ b/src_frontend/assets/controller-models/models/playstation/DualShock3Model.jsx
@@ -0,0 +1,53 @@
+import dualShock3Svg from "./vendor/dualshock3-controller.svg";
+import {
+	BTN,
+	getAxis,
+	getButtonValue,
+	isPressed,
+} from "../../shared/utils.js";
+
+const DualShock3Model = ({ s }) => {
+	const stickTravel = 10;
+	const lx = 143.4 + getAxis(s, 0) * stickTravel;
+	const ly = 154 + getAxis(s, 1) * stickTravel;
+	const rx = 258 + getAxis(s, 2) * stickTravel;
+	const ry = 154 + getAxis(s, 3) * stickTravel;
+	const lt = getButtonValue(s, BTN.LT);
+	const rt = getButtonValue(s, BTN.RT);
+
+	return (
+		<div className="ct-model-wrap">
+			<img className="ct-model-base" src={dualShock3Svg} alt="DualShock 3 controller" />
+			<svg className="ct-model-overlay" viewBox="0 0 400 250" xmlns="http://www.w3.org/2000/svg">
+				<path d="M 52 85 H 69 L 75 93.5 L 69 102 H 52 Z M 48 88 V 99 L 43 93.5 Z" fill={isPressed(s, BTN.DPAD_LEFT) ? "#4d88cf" : "transparent"} />
+				<path d="M 115 85 H 98 L 92 93.5 L 98 102 H 115 Z M 119 88 V 99 L 124 93.5 Z" fill={isPressed(s, BTN.DPAD_RIGHT) ? "#4d88cf" : "transparent"} />
+				<path d="M 75 62 V 79 L 83.5 85 L 92 79 V 62 Z M 78 58 H 89 L 83.5 53 Z" fill={isPressed(s, BTN.DPAD_UP) ? "#4d88cf" : "transparent"} />
+				<path d="M 75 125 V 108 L 83.5 102 L 92 108 V 125 Z M 78 129 H 89 L 83.5 134 Z" fill={isPressed(s, BTN.DPAD_DOWN) ? "#4d88cf" : "transparent"} />
+
+				<rect x="282" y="86.5" width="15" height="15" fill={isPressed(s, BTN.X) ? "#cb79b1" : "transparent"} />
+				<circle cx="347.5" cy="93.5" r="9" fill={isPressed(s, BTN.B) ? "#f16667" : "transparent"} />
+				<path d="M 310 70 H 327 L 318.5 56 Z" fill={isPressed(s, BTN.Y) ? "#66c194" : "transparent"} />
+				<path d="M 311.5 115.5 L 325.5 129.5 M 311.5 129.5 L 325.5 115.5" stroke={isPressed(s, BTN.A) ? "#7fb1df" : "transparent"} strokeWidth="3" />
+
+				<text x="318.5" y="68.5" textAnchor="middle" fontSize="8" fontWeight="700" fill="#66c194" opacity={isPressed(s, BTN.Y) ? 1 : 0.95}>Y</text>
+				<text x="347.5" y="96.5" textAnchor="middle" fontSize="8" fontWeight="700" fill="#f16667" opacity={isPressed(s, BTN.B) ? 1 : 0.95}>B</text>
+				<text x="289.5" y="96.5" textAnchor="middle" fontSize="8" fontWeight="700" fill="#cb79b1" opacity={isPressed(s, BTN.X) ? 1 : 0.95}>X</text>
+				<text x="318.5" y="125.5" textAnchor="middle" fontSize="8" fontWeight="700" fill="#7fb1df" opacity={isPressed(s, BTN.A) ? 1 : 0.95}>A</text>
+
+				<rect x="155" y="95" width="20" height="10" fill={isPressed(s, BTN.SELECT) ? "#4d88cf" : "transparent"} />
+				<path d="M 226 95 V 105 L 244 100 Z" fill={isPressed(s, BTN.START) ? "#4d88cf" : "transparent"} />
+				<circle cx="201" cy="129" r="13" fill={isPressed(s, BTN.HOME) ? "#4d88cf" : "transparent"} />
+
+				<path d="M 107 10.6 C 94.4 6.7, 74.8 6.5, 60.5 10.6" stroke="#4d88cf" strokeWidth="3" fill="none" opacity={isPressed(s, BTN.LB) ? 1 : 0} />
+				<path d="M 343.7 11.2 C 329.4 6.7, 309.8 6.5, 295.5 10.6" stroke="#4d88cf" strokeWidth="3" fill="none" opacity={isPressed(s, BTN.RB) ? 1 : 0} />
+				<path d="M 116.5 41.6 C 116.9 40.5, 116 35.6, 115 29.9 C 112.7 14.7, 112.5 14.3, 108.9 12 C 108 11.4, 106.4 10.2, 105.4 9.3 C 100.4 4.6, 89 2.3, 77.4 3.5 C 70.7 4.2, 65.6 6.1, 62.2 9.2 C 61 10.2, 59.5 11.4, 58.7 11.9 C 56.8 13, 55 15.1, 54.6 16.8 C 54.2 18.1, 51.6 34, 50 42.4" fill="none" stroke="#4d88cf" strokeWidth="5" opacity={lt} />
+				<path d="M 351.9 42.3 C 351.8 40.5, 351 35.6, 350 29.9 C 347.7 14.7, 347.5 14.3, 343.9 11.5 C 343 10, 341.4 9.2, 342.6 9.8 C 335.4 4.6, 324 2.3, 312.4 3.5 C 305.7 4.2, 300.6 6.1, 297.1 9.2 C 296 10.2, 294.5 11.4, 293.7 11.9 C 291.8 13,  290.1 15.1, 289.6 16.8 C 289.2 18.1, 286.6 34, 285 42.4" fill="none" stroke="#4d88cf" strokeWidth="5" opacity={rt} />
+
+				<circle cx={lx} cy={ly} r="27" fill={isPressed(s, BTN.L3) ? "#4d88cf" : "rgba(77,136,207,0.18)"} stroke={isPressed(s, BTN.L3) ? "#4d88cf" : "rgba(77,136,207,0.45)"} strokeWidth="2" className="ct-stick-anim" />
+				<circle cx={rx} cy={ry} r="27" fill={isPressed(s, BTN.R3) ? "#4d88cf" : "rgba(77,136,207,0.18)"} stroke={isPressed(s, BTN.R3) ? "#4d88cf" : "rgba(77,136,207,0.45)"} strokeWidth="2" className="ct-stick-anim" />
+			</svg>
+		</div>
+	);
+};
+
+export default DualShock3Model;
diff --git a/src_frontend/assets/controller-models/models/playstation/DualShock4Model.jsx b/src_frontend/assets/controller-models/models/playstation/DualShock4Model.jsx
new file mode 100644
index 0000000..ab38111
--- /dev/null
+++ b/src_frontend/assets/controller-models/models/playstation/DualShock4Model.jsx
@@ -0,0 +1,177 @@
+import TriggerMeter from "../../shared/TriggerMeter.jsx";
+import { BTN, getAxis, getButtonValue, isPressed } from "../../shared/utils.js";
+
+const DualShock4Model = ({ s }) => {
+  const stickTravel = 25;
+  const lx = 274.65 + getAxis(s, 0) * stickTravel;
+  const ly = 355.967 + getAxis(s, 1) * stickTravel;
+  const rx = 531.25 + getAxis(s, 2) * stickTravel;
+  const ry = 355.967 + getAxis(s, 3) * stickTravel;
+  const lt = getButtonValue(s, BTN.LT);
+  const rt = getButtonValue(s, BTN.RT);
+  const accent = "#006fcd";
+
+  return (
+    <svg className="ct-svg" viewBox="0 0 806 630" xmlns="http://www.w3.org/2000/svg">
+      {/* ── Base body (from e7d/gamepad-viewer ds4/base-black.svg, MIT) ── */}
+      <path fill="#0D0E13" d="M801.25 418.567c-2.899-15.5-17.7-102.5-32-144.6-9.399-27.701-13.1-53-17-64.9-12-35.7-33-65.7-33-65.7s-9.5-13.1-10.1-16.3c-.601-3.3-4.7-8.6-4.7-8.6s-17.4-5.7-62.3-5.7-53.7 5-53.7 5-2.4 2.9-5.9 4.8c-3.5 1.8-11.699 1.7-11.699 1.7h-33.4s-.6-.1-.9.3c-.399.4-.6 2-.6 2h-266.1s-.301-1.7-.601-2c-.399-.4-.899-.3-.899-.3h-33.4s-8.2.2-11.7-1.7c-3.5-1.8-5.899-4.8-5.899-4.8s-8.8-5-53.7-5c-44.8 0-62.3 5.7-62.3 5.7s-4.1 5.3-4.7 8.6c-.6 3.3-10.1 16.3-10.1 16.3s-21 30-33 65.7c-4 11.9-7.7 37.199-17 64.9-14.3 42.1-29.1 129.1-32 144.6-4.3 23.2-4.6 90.2-4.6 90.2s4.5 53.399 36.2 74.899c31.7 21.5 56.7 14 56.7 14s33.1-8.2 57.8-41.899c24.7-33.7 56.6-129.2 56.6-129.2s2.2-3 5.7-5.3c3.5-2.301 6.3-2.601 6.3-2.601l183.7.101 183.7-.101s2.8.3 6.3 2.601c3.5 2.3 5.7 5.3 5.7 5.3s31.899 95.399 56.6 129.2c24.7 33.8 57.8 41.899 57.8 41.899s25 7.5 56.7-14 36.2-74.899 36.2-74.899-.302-66.999-4.702-90.2z" />
+
+      {/* ── Grip shading (left) ── */}
+      <path opacity=".1" fill="#E6E6E6" d="M105.15 544.467c-40.5-2.8-75.8-20.3-87.3-30.5-11.5-10.3-17.5-31.6-17.5-31.6-.4 15-.4 26.3-.4 26.3s4.5 53.4 36.2 74.9c31.7 21.5 56.7 14 56.7 14s33.1-8.2 57.8-41.9c4.5-6.2 9.3-14.5 14.1-23.8-.1 0-19.2 15.3-59.6 12.6z" />
+      {/* ── Grip shading (right) ── */}
+      <path opacity=".1" fill="#E6E6E6" d="M700.75 544.467c40.5-2.8 75.8-20.3 87.3-30.5 11.5-10.199 17.5-31.5 17.5-31.5.4 15 .4 26.301.4 26.301s-4.5 53.399-36.2 74.899-56.7 14-56.7 14-33.1-8.2-57.8-41.899c-4.5-6.2-9.3-14.5-14.1-23.801.1-.1 19.201 15.2 59.6 12.5z" />
+
+      {/* ── Left stick well ── */}
+      <path fill="#13161F" d="M351.15 359.967c0-42.199-34.3-76.499-76.5-76.499s-76.5 34.3-76.5 76.499c0 .7 0 1.301.1 2 0 .7-.1 1.301-.1 2 0 42.2 34.3 76.5 76.5 76.5s76.5-34.3 76.5-76.5c0-.699 0-1.3-.101-2 .001-.699.101-1.4.101-2z" />
+      <circle fill="#0F1015" cx="274.65" cy="355.967" r="73" />
+      <circle cx="274.65" cy="355.967" r="51.5" fill="#0D0E13" />
+
+      {/* ── Right stick well ── */}
+      <path fill="#13161F" d="M607.75 359.967c0-42.199-34.3-76.499-76.5-76.499s-76.5 34.3-76.5 76.499c0 .7 0 1.301.101 2 0 .7-.101 1.301-.101 2 0 42.2 34.3 76.5 76.5 76.5s76.5-34.3 76.5-76.5c0-.699 0-1.3-.1-2 .1-.699.1-1.4.1-2z" />
+      <circle fill="#0F1015" cx="531.25" cy="355.967" r="73" />
+      <circle cx="531.25" cy="355.967" r="51.5" fill="#0D0E13" />
+
+      {/* ── Touchpad ── */}
+      <path fill="#121212" d="M534.75 127.967c-.399-3.2-3.3-5.6-6.5-5.6h-250.6c-3.2 0-6.101 2.3-6.5 5.6-.101.7-.101 1.4-.101 2.1v127.4c0 8.899 7.2 16.1 16.101 16.1h231.6c8.9 0 16.101-7.2 16.101-16.1v-127.4c.099-.7 0-1.4-.101-2.1z" />
+      <path fill="#080808" d="M530.351 124.267c0-1-.801-1.9-1.9-1.9h-251.1c-1 0-1.9.8-1.9 1.9v129.201c0 8.6 7 15.6 15.6 15.6h223.8c8.6 0 15.6-7 15.6-15.6V130.367l-.1-6.1z" />
+
+      {/* ── Face button / D-Pad background circles ── */}
+      <circle fill="#080808" cx="652.25" cy="244.767" r="94.3" />
+      <circle fill="#080808" cx="153.65" cy="244.767" r="94.3" />
+
+      {/* ── D-Pad arrow indicators (from base) ── */}
+      <path fill="#1F1F1F" d="M230.351 254.067l9.5-8.9c.5-.5.5-1.199 0-1.699l-9.5-8.9c-.7-.7-1.9-.2-1.9.8v17.799c-.1 1 1.099 1.5 1.9.9zm-85.401-84.3h17.8c1 0 1.5-1.2.8-1.9l-8.9-9.5c-.5-.5-1.2-.5-1.7 0l-8.9 9.5c-.6.7-.1 1.9.9 1.9zm-67.5 64.8l-9.5 8.9c-.5.5-.5 1.199 0 1.699l9.5 8.9c.7.699 1.9.199 1.9-.801v-17.798c0-1.1-1.2-1.6-1.9-.9zm85.3 84.201h-17.8c-1 0-1.5 1.199-.8 1.899l8.9 9.5c.5.5 1.2.5 1.7 0l8.9-9.5c.6-.7.1-1.899-.9-1.899z" />
+
+      {/* ── Create / Options button wells ── */}
+      <path d="M240.45 143.467c6.9 0 12.5 5.6 12.5 12.5v18.3c0 6.9-5.6 12.5-12.5 12.5s-12.5-5.6-12.5-12.5v-18.3c0-6.9 5.6-12.5 12.5-12.5" fill="#10111A" />
+      <path d="M565.45 143.467c6.9 0 12.5 5.6 12.5 12.5v18.3c0 6.9-5.6 12.5-12.5 12.5s-12.5-5.6-12.5-12.5v-18.3c0-6.9 5.6-12.5 12.5-12.5" fill="#10111A" />
+
+      {/* ── Speaker grille dots ── */}
+      <g>
+        <circle cx="402.95" cy="316.367" r="4.1" fill="#0D0E13" />
+        <circle cx="402.95" cy="295.467" r="4.1" fill="#0D0E13" />
+        <circle cx="396.05" cy="305.667" r="4.1" fill="#0D0E13" />
+        <circle cx="381.351" cy="305.667" r="4.1" fill="#0D0E13" />
+        <circle cx="388.65" cy="316.367" r="4.1" fill="#0D0E13" />
+        <circle cx="388.65" cy="295.467" r="4.1" fill="#0D0E13" />
+        <circle cx="374.351" cy="295.467" r="4.1" fill="#0D0E13" />
+        <circle cx="409.851" cy="305.667" r="4.1" fill="#0D0E13" />
+        <circle cx="424.55" cy="305.667" r="4.1" fill="#0D0E13" />
+        <circle cx="417.15" cy="316.367" r="4.1" fill="#0D0E13" />
+        <circle cx="417.15" cy="295.467" r="4.1" fill="#0D0E13" />
+        <circle cx="431.55" cy="295.467" r="4.1" fill="#0D0E13" />
+      </g>
+
+      {/* ── Light bar ── */}
+      <path fill="#0B0B0F" d="M436.55 420.967h-67.9c-2.8 0-4.601.601-4.601-2.199 0-2.801 2.301-5 5-5h67.9c2.8 0 5 2.3 5 5 .101 2.699-2.598 2.199-5.399 2.199z" />
+
+      {/* ── Trigger areas (from base) ── */}
+      <path fill="#0A0A0A" d="M697.15 109.867c0-.8-.4-1.5-1.101-1.9-4.5-2.9-23.399-13.6-51.5-13.6-26.899 0-41.1 5.9-45.1 8-.8.4-1.2 1.2-1.2 2 0 0 9.8-2.9 47.5-2.9s51.401 8.4 51.401 8.4z" />
+      <path fill="#121212" d="M697.05 116.767v-6.9s-13.699-8.4-51.399-8.4c-37.8 0-47.5 2.9-47.5 2.9v11c7.7-1.3 21.2-2.6 44.1-2.6 28.499.1 45.899 2.4 54.799 4z" />
+      <path fill="#0A0A0A" d="M108.75 109.867c0-.8.4-1.5 1.1-1.9 4.5-2.9 23.4-13.6 51.5-13.6 26.9 0 41.1 5.9 45.1 8 .8.4 1.2 1.2 1.2 2 0 0-9.8-2.9-47.5-2.9s-51.4 8.4-51.4 8.4z" />
+      <path fill="#121212" d="M108.85 116.767v-6.9s13.7-8.4 51.4-8.4c37.8 0 47.5 2.9 47.5 2.9v11c-7.7-1.3-21.2-2.6-44.1-2.6-28.5.1-45.9 2.4-54.8 4z" />
+
+      {/* ── Trigger 3D shapes (from base) ── */}
+      <path fill="#121212" d="M108.85 116.767v-6.9s13.7-8.4 51.4-8.4c37.8 0 47.5 2.9 47.5 2.9v11c-7.7-1.3-21.2-2.6-44.1-2.6-28.5.1-45.9 2.4-54.8 4zm588.3-26s-32.7-3.2-50.601-3.2c-17.899 0-48.399 2.4-48.399 2.4s3.1-44.7 4.8-52c1.6-7.3 7.7-21.3 16.9-27.9 9.199-6.6 11.899-10.1 22.699-10.1 10.801 0 25.4 6.4 34.601 21.4 9.3 15 20 69.4 20 69.4z" />
+      <path fill="#121212" d="M108.75 90.767s32.7-3.2 50.6-3.2 48.3 2.4 48.3 2.4-3.1-44.7-4.8-52c-1.6-7.3-7.7-21.3-16.9-27.9-9.1-6.7-11.8-10.1-22.6-10.1s-25.4 6.4-34.6 21.4c-9.2 15-20 69.4-20 69.4z" />
+
+      {/* ── PS button (from base) ── */}
+      <circle fill="#050505" stroke="#000" strokeWidth="2" strokeMiterlimit="10" cx="402.95" cy="361.967" r="20.2" />
+      <g fill={isPressed(s, BTN.HOME) ? "#fff" : "#F2F2F2"} opacity={isPressed(s, BTN.HOME) ? 1 : 0.4}>
+        <path d="M404.05 368.567v-12.8c0-.5.101-.801.301-1 .1-.2.399-.301.699-.2.601.2.9.7.9 1.7v6.899c.8.4 1.5.5 2.1.5.601 0 1.2-.2 1.601-.5 1-.7 1.5-1.899 1.5-3.7 0-1.899-.4-3.399-1.2-4.3-.8-1-2.1-1.899-4.1-2.6-1.301-.4-2.5-.8-3.601-1.101-1.1-.3-2-.5-2.899-.699v20.599l4.699 1.5v-4.298zm-5.1-1l-1.7.6-.899.4-1.601.3-1.5-.2c-.3-.2-.399-.399-.2-.6.101-.101.2-.101.301-.2.1-.1.3-.1.399-.2l1.101-.399 4.1-1.5v-2.7l-1.7.5-5.5 2-1 .399c-1.5.601-2.2 1.2-2.2 1.801.101.8 1 1.5 2.7 1.899.7.2 1.4.3 2.101.4.699.1 1.399.1 2.199.1 1 0 2.101-.1 3.301-.3v-2.3h.098z" />
+        <path d="M414.75 365.268c-.899-.301-1.7-.5-2.5-.601-.8-.1-1.7-.2-2.5-.1-.899 0-1.899.2-2.8.3-.8.2-1.7.4-2.6.8v2.8l3.899-1.399 1.601-.5 1.1-.3h1.4c.3.1.6.199.699.399 0 .2-.199.4-.8.601l-1.399.5-6.5 2.399v2.7l3.5-1.3 6.399-2.3.7-.4c1.5-.5 2.2-1.2 2.2-1.9.001-.6-.798-1.199-2.399-1.699z" />
+      </g>
+      {isPressed(s, BTN.HOME) && <circle cx="402.95" cy="361.967" r="20.2" fill={accent} opacity="0.25" />}
+
+      {/* ═══ Interactive overlays ═══ */}
+
+      {/* ── D-Pad arrows (from e7d ds4/dpad.svg, each path individually positioned via svgpathtools bbox) ── */}
+      {/* Up — path center (17.71,25.50) → target (154,207) */}
+      <path transform="translate(136.29,181.50)"
+        d="M20.605 1.254c-2-1.4-2.9-1.2-2.9-1.2s-.9-.2-2.9 1.2-13.6 15-14 15.7c-.4.7-2.2 28.5 1.3 31.399 3.5 2.9 15.6 2.601 15.6 2.601s12.1.3 15.6-2.601c3.5-2.899 1.7-30.699 1.3-31.399s-12-14.3-14-15.7z"
+        fill={isPressed(s, BTN.DPAD_UP) ? accent : "#1A1A1A"} opacity={isPressed(s, BTN.DPAD_UP) ? 1 : 0.8} />
+      {/* Down — path center (55.10,25.50) → target (154,281) */}
+      <path transform="translate(98.90,255.50)"
+        d="M52.205 49.754c2 1.4 2.9 1.2 2.9 1.2s.9.2 2.9-1.2 13.6-15 14-15.7 2.2-28.5-1.3-31.399c-3.5-2.9-15.6-2.601-15.6-2.601s-12.1-.2-15.6 2.601c-3.5 2.8-1.7 30.699-1.3 31.399.4.7 12 14.3 14 15.7z"
+        fill={isPressed(s, BTN.DPAD_DOWN) ? accent : "#1A1A1A"} opacity={isPressed(s, BTN.DPAD_DOWN) ? 1 : 0.8} />
+      {/* Left — path center (153.05,17.85) → target (118,243) */}
+      <path transform="translate(-35.05,225.15)"
+        d="M175.904 2.254c-2.899-3.5-30.699-1.7-31.399-1.3-.7.399-14.3 12-15.7 14s-1.199 2.899-1.199 2.899-.201.9 1.199 2.9 15 13.6 15.7 14 28.5 2.2 31.399-1.3c2.9-3.5 2.601-15.601 2.601-15.601s.3-12.098-2.601-15.598z"
+        fill={isPressed(s, BTN.DPAD_LEFT) ? accent : "#1A1A1A"} opacity={isPressed(s, BTN.DPAD_LEFT) ? 1 : 0.8} />
+      {/* Right — path center (100.26,17.76) → target (191,243) */}
+      <path transform="translate(90.74,225.24)"
+        d="M124.505 20.654c1.399-2 1.2-2.9 1.2-2.9s.199-.9-1.2-2.9-15-13.6-15.7-14c-.699-.399-28.5-2.199-31.4 1.301s-2.6 15.6-2.6 15.6-.3 12.1 2.6 15.6 30.701 1.7 31.4 1.301c.7-.402 14.3-12.002 15.7-14.002z"
+        fill={isPressed(s, BTN.DPAD_RIGHT) ? accent : "#1A1A1A"} opacity={isPressed(s, BTN.DPAD_RIGHT) ? 1 : 0.8} />
+
+      {/* ── Face buttons (PlayStation symbols — e7d ds4/buttons.svg paths, scaled to 70% of r=26 circle) ── */}
+      {/* Cross (A) - bottom */}
+      <circle cx="652.25" cy="300.767" r="26" fill={isPressed(s, BTN.A) ? "#7FB1DF" : "#0a0a0a"} stroke={isPressed(s, BTN.A) ? "#7FB1DF" : "#1A1615"} strokeWidth="2" />
+      <g transform="translate(652.25,300.767) scale(1.236) translate(-27.95,-27.95)">
+        <path d="M42.667 15.282l-2.052-2.052L28 25.846 15.282 13.23l-2.052 2.052 12.616 12.615L13.23 40.616l2.052 2.052L28 30.05l12.615 12.618 2.052-2.052-12.616-12.719z"
+          fill={isPressed(s, BTN.A) ? "#fff" : "#7FB1DF"} opacity={isPressed(s, BTN.A) ? 1 : 0.7} />
+      </g>
+      {/* Circle (B) - right */}
+      <circle cx="708.25" cy="244.767" r="26" fill={isPressed(s, BTN.B) ? "#F16667" : "#0a0a0a"} stroke={isPressed(s, BTN.B) ? "#F16667" : "#1A1615"} strokeWidth="2" />
+      <g transform="translate(708.25,244.767) scale(0.937) translate(-84.05,-28.00)">
+        <path fillRule="evenodd" d="M84.051 8.615c-10.686 0-19.42 8.718-19.42 19.384 0 10.667 8.734 19.386 19.42 19.386 10.687 0 19.42-8.718 19.42-19.386-.102-10.77-8.733-19.384-19.42-19.384zm0 35.795c-9.145 0-16.44-7.384-16.44-16.411 0-9.128 7.397-16.41 16.44-16.41 9.042 0 16.439 7.386 16.439 16.41.002 9.026-7.396 16.411-16.439 16.411z"
+          fill={isPressed(s, BTN.B) ? "#fff" : "#F16667"} opacity={isPressed(s, BTN.B) ? 1 : 0.7} />
+      </g>
+      {/* Square (X) - left */}
+      <circle cx="596.25" cy="244.767" r="26" fill={isPressed(s, BTN.X) ? "#CB79B1" : "#0a0a0a"} stroke={isPressed(s, BTN.X) ? "#CB79B1" : "#1A1615"} strokeWidth="2" />
+      <g transform="translate(596.25,244.767) scale(1.239) translate(-140.00,-27.85)">
+        <path fillRule="evenodd" d="M151.795 13.153h-26.462v29.385h29.334V13.154l-2.872-.001zm0 26.612h-23.59V16.132h23.59v23.633z"
+          fill={isPressed(s, BTN.X) ? "#fff" : "#CB79B1"} opacity={isPressed(s, BTN.X) ? 1 : 0.7} />
+      </g>
+      {/* Triangle (Y) - top */}
+      <circle cx="652.25" cy="188.767" r="26" fill={isPressed(s, BTN.Y) ? "#66C194" : "#0a0a0a"} stroke={isPressed(s, BTN.Y) ? "#66C194" : "#1A1615"} strokeWidth="2" />
+      <g transform="translate(652.25,188.767) scale(1.006) translate(-196.00,-23.12)">
+        <path fillRule="evenodd" d="M212.44 35.834l-16.439-28.307-16.439 28.307-1.646 2.872h36.168l-1.644-2.872zm-16.336 0h-13.051l13.051-22.462 13.049 22.462h-13.049z"
+          fill={isPressed(s, BTN.Y) ? "#fff" : "#66C194"} opacity={isPressed(s, BTN.Y) ? 1 : 0.7} />
+      </g>
+
+      {/* ── Create button ── */}
+      <path d="M240.45 143.467c6.9 0 12.5 5.6 12.5 12.5v18.3c0 6.9-5.6 12.5-12.5 12.5s-12.5-5.6-12.5-12.5v-18.3c0-6.9 5.6-12.5 12.5-12.5z"
+        fill={isPressed(s, BTN.SELECT) ? accent : "transparent"} opacity={isPressed(s, BTN.SELECT) ? 0.5 : 0} />
+      <text x="240" y="162" textAnchor="middle" fontSize="10" fill={isPressed(s, BTN.SELECT) ? "#fff" : "rgba(255,255,255,0.25)"} fontWeight="600">CRE</text>
+
+      {/* ── Options button ── */}
+      <path d="M565.45 143.467c6.9 0 12.5 5.6 12.5 12.5v18.3c0 6.9-5.6 12.5-12.5 12.5s-12.5-5.6-12.5-12.5v-18.3c0-6.9 5.6-12.5 12.5-12.5z"
+        fill={isPressed(s, BTN.START) ? accent : "transparent"} opacity={isPressed(s, BTN.START) ? 0.5 : 0} />
+      <text x="565" y="162" textAnchor="middle" fontSize="10" fill={isPressed(s, BTN.START) ? "#fff" : "rgba(255,255,255,0.25)"} fontWeight="600">OPT</text>
+
+      {/* ── L1 bumper ── */}
+      <g opacity={isPressed(s, BTN.LB) ? 1 : 0.15}>
+        <path d="M108.85 116.767v-6.9s13.7-8.4 51.4-8.4c37.8 0 47.5 2.9 47.5 2.9" stroke={isPressed(s, BTN.LB) ? accent : "#F5F5F5"} strokeWidth="4" fill="none" />
+      </g>
+      <text x="145" y="130" textAnchor="middle" fontSize="14" fill={isPressed(s, BTN.LB) ? "#fff" : "rgba(255,255,255,0.35)"} fontWeight="600">L1</text>
+
+      <TriggerMeter x={158} y={88} width={108} label="L2" value={lt} accent={accent} align="center" />
+
+      {/* ── R1 bumper ── */}
+      <g opacity={isPressed(s, BTN.RB) ? 1 : 0.15}>
+        <path d="M697.05 116.767v-6.9s-13.699-8.4-51.399-8.4c-37.8 0-47.5 2.9-47.5 2.9" stroke={isPressed(s, BTN.RB) ? accent : "#F5F5F5"} strokeWidth="4" fill="none" />
+      </g>
+      <text x="660" y="130" textAnchor="middle" fontSize="14" fill={isPressed(s, BTN.RB) ? "#fff" : "rgba(255,255,255,0.35)"} fontWeight="600">R1</text>
+
+      <TriggerMeter x={648} y={88} width={108} label="R2" value={rt} accent={accent} align="center" />
+
+      {/* ── Left stick knob ── */}
+      <circle cx={lx} cy={ly} r="36" fill={isPressed(s, BTN.L3) ? accent : "#18181f"} stroke={isPressed(s, BTN.L3) ? accent : "#222230"} strokeWidth="3" className="ct-stick-anim" />
+      <circle cx={lx} cy={ly} r="24" fill="none" stroke={isPressed(s, BTN.L3) ? "rgba(255,255,255,0.25)" : "rgba(255,255,255,0.05)"} strokeWidth="1.5" className="ct-stick-anim" />
+      <circle cx={lx} cy={ly} r="10" fill="none" stroke={isPressed(s, BTN.L3) ? "rgba(255,255,255,0.15)" : "rgba(255,255,255,0.03)"} strokeWidth="1" className="ct-stick-anim" />
+
+      {/* ── Right stick knob ── */}
+      <circle cx={rx} cy={ry} r="36" fill={isPressed(s, BTN.R3) ? accent : "#18181f"} stroke={isPressed(s, BTN.R3) ? accent : "#222230"} strokeWidth="3" className="ct-stick-anim" />
+      <circle cx={rx} cy={ry} r="24" fill="none" stroke={isPressed(s, BTN.R3) ? "rgba(255,255,255,0.25)" : "rgba(255,255,255,0.05)"} strokeWidth="1.5" className="ct-stick-anim" />
+      <circle cx={rx} cy={ry} r="10" fill="none" stroke={isPressed(s, BTN.R3) ? "rgba(255,255,255,0.15)" : "rgba(255,255,255,0.03)"} strokeWidth="1" className="ct-stick-anim" />
+
+    </svg>
+  );
+};
+
+/* ═══════════════════════════════════════════════════════════════
+   Nintendo Pro Controller — hand-crafted (no e7d template)
+   ═══════════════════════════════════════════════════════════════ */
+
+
+export default DualShock4Model;
diff --git a/src_frontend/assets/controller-models/models/playstation/vendor/dualshock3-controller.svg b/src_frontend/assets/controller-models/models/playstation/vendor/dualshock3-controller.svg
new file mode 100644
index 0000000..4e66fe9
--- /dev/null
+++ b/src_frontend/assets/controller-models/models/playstation/vendor/dualshock3-controller.svg
@@ -0,0 +1,36 @@
+<svg id="DualShock_3_SVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="250" viewBox="0,  0, 400, 250"><!-- DualShock 3 SVG by HerrHulaHoop -->
+<path id="MainOutline" d="M 116.5 41.6 C 116.9 40.5, 116 35.6, 115 29.9 C 112.7 14.7, 112.5 14.3, 108.9 12 C 108 11.4, 106.4 10.2, 105.4 9.3 C 100.4 4.6, 89 2.3, 77.4 3.5 C 70.7 4.2, 65.6 6.1, 62.2 9.2 C 61 10.2, 59.5 11.4, 58.7 11.9 C 56.8 13, 55 15.1, 54.6 16.8 C 54.2 18.1, 51.6 34, 50 42.4 M 25.4 74.2 C 22 81.1, 18.5 102.3, 10.4 159.5 C 8.1 175.6, 5.6 192.4, 4.8 196.7 C 3 207.4, 2.9 208.8, 3.4 212.7 C 7.2 241.6, 46.2 259.1, 69.4 242.3 C 77.3 236.6, 80.3 231.6, 103.5 186.3 L 110 174.1 M 292 173.5 C 292.5 174.5, 295 179.2, 297.9 184.9 C 308.1 205.1, 320.6 228.7, 323.2 232.6 C 335.6 250.8, 359.9 254.2, 380.5 240.4 C 394.5 231.1, 400.8 217.3, 398.1 202.1 C 396.5 193.4, 394.9 182.8, 390.4 151.1 C 383.3 101.3, 380 81.4, 376.8 75 M 351.9 42.3 C 351.8 40.5, 351 35.6, 350 29.9 C 347.7 14.7, 347.5 14.3, 343.9 11.5 C 343 10, 341.4 9.2, 342.6 9.8 C 335.4 4.6, 324 2.3, 312.4 3.5 C 305.7 4.2, 300.6 6.1, 297.1 9.2 C 296 10.2, 294.5 11.4, 293.7 11.9 C 291.8 13,  290.1 15.1, 289.6 16.8 C 289.2 18.1, 286.6 34, 285 42.4" stroke="black" fill="none" />
+<path id="LeftShoulder" d="M 107 10.6 C 94.4 6.7, 74.8 6.5, 60.5 10.6" stroke="black" fill="none" />
+<path id="RightShoulder" d="M 343.7 11.2 C 329.4 6.7, 309.8 6.5, 295.5 10.6" stroke="black" fill="none" />
+<path id="UpperLine1" d="M 116.5 41.6 H 186 A 80 80, 0, 0 0, 216.5 41.6 H 286" stroke="black" fill="none" />
+<line id="UpperLine2" x1="129" y1="52" x2="273" y2="52" stroke="black" fill="none" />
+<line id="LowerLine1" x1="181.5" y1="164" x2="220" y2="164" stroke="black" fill="none" />
+<line id="LowerLine2" x1="179" y1="170.5" x2="222.5" y2="170.5" stroke="black" fill="none" />
+<rect id="SelectButton" x="155" y="95" width="20" height="10" stroke="black" fill="none" />
+<text id="SelectText" x="150" y="90.5" font-family="sans-serif" font-size="8" font-weight="bold" fill="black">SELECT</text>
+<path id="StartButton" d="M 226 95 V 105 L 244 100 Z" stroke="black" fill="none" />
+<text id="StartText" x="222" y="90.5" font-family="sans-serif" font-size="8" font-weight="bold" fill="black">START</text>
+<circle id="PSButton" cx="201" cy="129" r="13" stroke="black" fill="none" />
+<circle id="RightJoystickOuter" cx="258" cy="154" r="39" stroke="black" fill="none" />
+<circle id="RightJoystickMiddle" cx="258" cy="154" r="30" stroke="black" fill="none" />
+<circle id="RightJoystickInner" cx="258" cy="154" r="27" stroke="black" fill="none" />
+<circle id="LeftJoystickOuter" cx="143.4" cy="154" r="39" stroke="black" fill="none" />
+<circle id="LeftJoystickMiddle" cx="143.4" cy="154" r="30" stroke="black" fill="none" />
+<circle id="LeftJoystickInner" cx="143.4" cy="154" r="27" stroke="black" fill="none" />
+<path id="RightFacebuttonCircle" d="M 297.3 152.5 A 61.8 61.8, 0, 1 0, 260 115" stroke="black" fill="none" />
+<path id="RightButtonBorder" d="M 301 76 H 278 A 6 6, 0, 0 0, 272 82 V 105 A 6 6, 0, 0 0, 278 111 H 301 V 134 A 6 6, 0, 0 0, 307 140 H 330 A 6 6, 0, 0 0, 336 134 V 111 H 359 A 6 6, 0, 0 0, 365 105 V 82 A 6 6, 0, 0 0, 359 76 H 336 V 53 A 6 6, 0, 0 0, 330 47 H 307 A 6 6, 0, 0 0, 301 53 V 76.5" stroke="black" fill="none" />
+<circle id="ButtonBorder1" cx="289.5" cy="93.5" r="13" stroke="black" fill="none" />
+<rect id="ButtonSquare" x="282" y="86.5" width="15" height="15" stroke="black" fill="none" />
+<circle id="ButtonBorder2" cx="347.5" cy="93.5" r="13" stroke="black" fill="none" />
+<circle id="ButtonCircle" cx="347.5" cy="93.5" r="9" stroke="black" fill="none" />
+<circle id="ButtonBorder3" cx="318.5" cy="64.5" r="13" stroke="black" fill="none" />
+<path id="ButtonTriangle" d="M 310 70 H 327 L 318.5 56 Z" stroke="black" fill="none" />
+<circle id="ButtonBorder4" cx="318.5" cy="122.5" r="13" stroke="black" fill="none" />
+<path id="ButtonCross" d="M 311.5 115.5 L 325.5 129.5 M 311.5 129.5 L 325.5 115.5" stroke="black" fill="none" />
+<path id="LeftDpadCircle" d="M 104.2 152.5 A 61.8 61.8, 0, 1 1, 142 115" stroke="black" fill="none" />
+<path id="LeftDpadBorder" d="M 66 76 H 43 A 6 6, 0, 0 0, 37 82 V 105 A 6 6, 0, 0 0, 43 111 H 66 V 134 A 6 6, 0, 0 0, 72 140 H 95 A 6 6, 0, 0 0, 101 134 V 111 H 124 A 6 6, 0, 0 0, 130 105 V 82 A 6 6, 0, 0 0, 124 76 H 101 V 53 A 6 6, 0, 0 0, 95 47 H 72 A 6 6, 0, 0 0, 66 53 V 76.5" stroke="black" fill="none" />
+<path id="DpadButtonLeft" d="M 52 85 H 69 L 75 93.5 L 69 102 H 52 Z M 48 88 V 99 L 43 93.5 Z" stroke="black" fill="none" />
+<path id="DpadButtonRight" d="M 115 85 H 98 L 92 93.5 L 98 102 H 115 Z M 119 88 V 99 L 124 93.5 Z" stroke="black" fill="none" />
+<path id="DpadButtonTop" d="M 75 62 V 79 L 83.5 85 L 92 79 V 62 Z M 78 58 H 89 L 83.5 53 Z" stroke="black" fill="none" />
+<path id="DpadButtonBottom" d="M 75 125 V 108 L 83.5 102 L 92 108 V 125 Z M 78 129 H 89 L 83.5 134 Z" stroke="black" fill="none" />
+</svg>
diff --git a/src_frontend/assets/controller-models/models/playstation/vendor/ps5-controller-visualizer/abxy-sprite.png b/src_frontend/assets/controller-models/models/playstation/vendor/ps5-controller-visualizer/abxy-sprite.png
new file mode 100644
index 0000000..725e8e1
Binary files /dev/null and b/src_frontend/assets/controller-models/models/playstation/vendor/ps5-controller-visualizer/abxy-sprite.png differ
diff --git a/src_frontend/assets/controller-models/models/playstation/vendor/ps5-controller-visualizer/arrows-sprite.png b/src_frontend/assets/controller-models/models/playstation/vendor/ps5-controller-visualizer/arrows-sprite.png
new file mode 100644
index 0000000..d235e3f
Binary files /dev/null and b/src_frontend/assets/controller-models/models/playstation/vendor/ps5-controller-visualizer/arrows-sprite.png differ
diff --git a/src_frontend/assets/controller-models/models/playstation/vendor/ps5-controller-visualizer/bumper-sprite.png b/src_frontend/assets/controller-models/models/playstation/vendor/ps5-controller-visualizer/bumper-sprite.png
new file mode 100644
index 0000000..79bcbdc
Binary files /dev/null and b/src_frontend/assets/controller-models/models/playstation/vendor/ps5-controller-visualizer/bumper-sprite.png differ
diff --git a/src_frontend/assets/controller-models/models/playstation/vendor/ps5-controller-visualizer/controller-base.png b/src_frontend/assets/controller-models/models/playstation/vendor/ps5-controller-visualizer/controller-base.png
new file mode 100644
index 0000000..57ca3cb
Binary files /dev/null and b/src_frontend/assets/controller-models/models/playstation/vendor/ps5-controller-visualizer/controller-base.png differ
diff --git a/src_frontend/assets/controller-models/models/playstation/vendor/ps5-controller-visualizer/dpad-sprite.png b/src_frontend/assets/controller-models/models/playstation/vendor/ps5-controller-visualizer/dpad-sprite.png
new file mode 100644
index 0000000..b92f75d
Binary files /dev/null and b/src_frontend/assets/controller-models/models/playstation/vendor/ps5-controller-visualizer/dpad-sprite.png differ
diff --git a/src_frontend/assets/controller-models/models/playstation/vendor/ps5-controller-visualizer/ps-color.png b/src_frontend/assets/controller-models/models/playstation/vendor/ps5-controller-visualizer/ps-color.png
new file mode 100644
index 0000000..557cdba
Binary files /dev/null and b/src_frontend/assets/controller-models/models/playstation/vendor/ps5-controller-visualizer/ps-color.png differ
diff --git a/src_frontend/assets/controller-models/models/playstation/vendor/ps5-controller-visualizer/stick-sprite.png b/src_frontend/assets/controller-models/models/playstation/vendor/ps5-controller-visualizer/stick-sprite.png
new file mode 100644
index 0000000..677db9b
Binary files /dev/null and b/src_frontend/assets/controller-models/models/playstation/vendor/ps5-controller-visualizer/stick-sprite.png differ
diff --git a/src_frontend/assets/controller-models/models/playstation/vendor/ps5-controller-visualizer/trigger-sprite.png b/src_frontend/assets/controller-models/models/playstation/vendor/ps5-controller-visualizer/trigger-sprite.png
new file mode 100644
index 0000000..b71a9d7
Binary files /dev/null and b/src_frontend/assets/controller-models/models/playstation/vendor/ps5-controller-visualizer/trigger-sprite.png differ
diff --git a/src_frontend/assets/controller-models/models/xbox/Xbox360Model.jsx b/src_frontend/assets/controller-models/models/xbox/Xbox360Model.jsx
new file mode 100644
index 0000000..a220615
--- /dev/null
+++ b/src_frontend/assets/controller-models/models/xbox/Xbox360Model.jsx
@@ -0,0 +1,5 @@
+import XboxOneModel from "./XboxOneModel.jsx";
+
+const Xbox360Model = (props) => <XboxOneModel {...props} />;
+
+export default Xbox360Model;
diff --git a/src_frontend/assets/controller-models/models/xbox/XboxOneModel.jsx b/src_frontend/assets/controller-models/models/xbox/XboxOneModel.jsx
new file mode 100644
index 0000000..336eb84
--- /dev/null
+++ b/src_frontend/assets/controller-models/models/xbox/XboxOneModel.jsx
@@ -0,0 +1,138 @@
+import TriggerMeter from "../../shared/TriggerMeter.jsx";
+import {
+  BTN,
+  btnFill,
+  btnStroke,
+  getAxis,
+  getButtonValue,
+  isPressed,
+} from "../../shared/utils.js";
+
+const XboxOneModel = ({ s }) => {
+  const stickTravel = 25;
+  const lx = 185.468 + getAxis(s, 0) * stickTravel;
+  const ly = 279.865 + getAxis(s, 1) * stickTravel;
+  const rx = 473.042 + getAxis(s, 2) * stickTravel;
+  const ry = 393.815 + getAxis(s, 3) * stickTravel;
+  const lt = getButtonValue(s, BTN.LT);
+  const rt = getButtonValue(s, BTN.RT);
+  const accent = "#107c10";
+
+  return (
+    <svg className="ct-svg" viewBox="0 0 750 660" xmlns="http://www.w3.org/2000/svg">
+
+      {/* ── Base body (from e7d/gamepad-viewer xbox-one/base-black.svg, MIT) ── */}
+      <path d="M664.368 213.96c-6.72-16.682-20.542-20.877-21.818-22.003-11.701-10.336-2.474-21.214-19.946-30.695-18.278-9.914-71.979-36.997-114.22-31.375-9.225 1.235-27.837 17.608-41.214 17.608H282.84c-13.377 0-31.99-16.374-41.215-17.608-42.248-5.622-95.939 21.461-114.22 31.375-17.472 9.481-8.243 20.359-19.941 30.695-1.281 1.125-15.104 5.321-21.823 22.003C22.889 369.983-1.741 469.114.095 529.129c2.891 94.416 76.578 101.326 76.578 101.326 37.033-8.617 111.55-129.135 168.535-129.135h259.594c56.985 0 131.502 120.518 168.538 129.135 0 0 73.678-6.91 76.563-101.326 1.864-60.015-22.81-159.146-85.535-315.169z" fill="#0a0a0a" />
+      <path d="M664.368 213.96c-3.344-8.304-8.445-13.518-12.894-16.797-3.021-2.237-5.732-3.563-7.392-4.378-.772-.384-1.313-.642-1.527-.819-33.563-18.007-97.459-38.153-117.479-34.305-26.01 5.024-65.536 79.714-88.969 79.714H315.123c-23.435 0-62.966-74.69-88.973-79.714-19.583-3.779-85.589 16.456-118.749 34.331-.214.163-.614.362-1.155.65-1.761.849-5.067 2.418-8.698 5.268-4.194 3.308-8.812 8.352-11.911 16.051C22.889 369.983-1.741 469.114.095 529.129c2.891 94.416 76.578 101.326 76.578 101.326 37.033-8.617 111.55-129.135 168.535-129.135h259.594c56.985 0 131.502 120.518 168.538 129.135 0 0 73.678-6.91 76.563-101.326 1.864-60.015-22.81-159.146-85.535-315.169z" fill="#050505" />
+
+      {/* ── D-Pad well & cross ── */}
+      <path d="M277.671 462.114c-33.437 0-60.64-27.197-60.64-60.627 0-33.428 27.203-60.623 60.64-60.623 33.428 0 60.624 27.195 60.624 60.623 0 33.43-27.196 60.627-60.624 60.627z" fill="#0a0a0a" />
+      <path d="M277.671 341.865c32.876 0 59.624 26.747 59.624 59.623 0 32.878-26.747 59.627-59.624 59.627-32.885 0-59.64-26.749-59.64-59.627.001-32.878 26.755-59.623 59.64-59.623m0-2c-34.036 0-61.64 27.577-61.64 61.623 0 34.05 27.604 61.627 61.64 61.627 34.037 0 61.624-27.577 61.624-61.627 0-34.046-27.587-61.623-61.624-61.623z" fill="#0D0808" />
+      <path d="M277.671 452.698c-7.132 0-12.742-1.323-13.049-3.078a1.058 1.058 0 0 1-.014-.148v-34.424a.5.5 0 0 0-.5-.5h-34.42c-1.82 0-3.246-5.735-3.246-13.057s1.426-13.057 3.246-13.057h34.42a.5.5 0 0 0 .5-.5v-34.429c0-.043.007-.093.014-.144l.06-.227c.029-.041.066-.107.082-.134.495-.81 2.105-1.517 4.535-1.991.295-.064.592-.127.889-.183.351-.063.658-.112.958-.136a1.76 1.76 0 0 0 .162-.025c.255-.029.579-.072.907-.111a42.27 42.27 0 0 1 2.041-.189l2.369-.077c.353-.009.701-.015 1.047-.015 7.325 0 13.063 1.418 13.063 3.229l.001 34.427a.5.5 0 0 0 .5.5h34.419c1.809 0 3.226 5.734 3.226 13.059 0 7.319-1.417 13.057-3.226 13.057h-34.419a.5.5 0 0 0-.5.5v34.424a.943.943 0 0 1-.015.152c-.306 1.754-5.917 3.077-13.05 3.077z" fill="#141414" />
+
+      {/* ── View / Menu buttons ── */}
+      <path d="M430.126 280.366c0 8.902-7.229 16.103-16.102 16.103-8.902 0-16.103-7.201-16.103-16.103 0-8.896 7.198-16.103 16.103-16.103 8.873.001 16.102 7.208 16.102 16.103z" fill="#0A0A0A" stroke="#000" strokeMiterlimit="10" />
+      <path d="M322.121 280.366c0 8.902-7.201 16.103-16.103 16.103-8.872 0-16.104-7.201-16.104-16.103 0-8.896 7.231-16.103 16.104-16.103 8.902.001 16.103 7.208 16.103 16.103z" fill="#0A0A0A" stroke="#000" strokeMiterlimit="10" />
+
+      {/* ── Face plate / Top bar ── */}
+      <path d="M375.615 156.499s-88.917-1.067-100.548-2.973l-16.384 30.538c20.238 23.271 41.583 53.312 56.441 53.312H436.11c14.872 0 36.194-30.041 56.463-53.312l-16.383-30.538c-11.63 1.905-100.575 2.973-100.575 2.973z" fill="#1A1A1A" />
+      <path d="M476.191 153.526l-3.641-6.778c-1.854.48-3.65.748-5.384.748h-184.33c-1.392 0-2.818-.189-4.282-.501l-3.49 6.531c11.631 1.905 100.548 2.973 100.548 2.973s88.948-1.068 100.579-2.973z" fill="#0D0D0D" />
+
+      {/* ── Left stick well ── */}
+      <g strokeWidth="2" strokeMiterlimit="10">
+        <path d="M185.468 351.49c-37.328 0-67.695-30.365-67.695-67.688 0-37.323 30.366-67.686 67.695-67.686 37.336 0 67.707 30.363 67.707 67.686 0 37.323-30.37 67.688-67.707 67.688z" fill="#080808" stroke="#140C0C" />
+        <path d="M241.571 279.865c0 30.977-25.106 56.084-56.103 56.084-30.981 0-56.092-25.107-56.092-56.084 0-31 25.111-56.106 56.092-56.106 30.997 0 56.103 25.106 56.103 56.106z" fill="none" stroke="#120B0B" />
+      </g>
+
+      {/* ── Right stick well ── */}
+      <g strokeWidth="2" strokeMiterlimit="10">
+        <path d="M473.042 465.461c-37.324 0-67.688-30.364-67.688-67.686 0-37.326 30.363-67.706 67.688-67.706 37.322 0 67.707 30.379 67.707 67.706 0 37.323-30.385 67.686-67.707 67.686z" fill="#080808" stroke="#140C0C" />
+        <path d="M529.151 393.815c0 30.999-25.106 56.104-56.109 56.104-30.975 0-56.083-25.104-56.083-56.104 0-30.979 25.108-56.086 56.083-56.086 31.003 0 56.109 25.107 56.109 56.086z" fill="none" stroke="#120B0B" />
+      </g>
+
+      {/* ── Triggers (from e7d xbox-one/trigger.svg) ── */}
+      <g transform="translate(200,0)">
+        <path d="M49.752 5.475c.401-.319.806-.619 1.212-.9l2.324 110.179L0 122C12.075 4.982 42.991 10.78 49.752 5.475z" fill="#1A1A1A" />
+        <path d="M76.799.142C87.64.546 88.876 11.601 89 15.358v1.229s-2.902 40.784 0 93.251c-9.934 2.293-38.567 5.307-38.567 5.307s-.052-20.949-.681-50.682c-.812-37.564 1.212-59.888 1.212-59.888C57.386.091 64.54-.308 76.799.142z" fill="#141414" />
+      </g>
+      <g transform="translate(460,0) scale(-1,1) translate(-89,0)">
+        <path d="M49.752 5.475c.401-.319.806-.619 1.212-.9l2.324 110.179L0 122C12.075 4.982 42.991 10.78 49.752 5.475z" fill="#1A1A1A" />
+        <path d="M76.799.142C87.64.546 88.876 11.601 89 15.358v1.229s-2.902 40.784 0 93.251c-9.934 2.293-38.567 5.307-38.567 5.307s-.052-20.949-.681-50.682c-.812-37.564 1.212-59.888 1.212-59.888C57.386.091 64.54-.308 76.799.142z" fill="#141414" />
+      </g>
+
+      {/* ── Xbox guide button ── */}
+      <circle cx="375" cy="196.412" r="32.5" fill="#282828" stroke="#3a3a3a" strokeWidth="1" />
+      <path d="M384.006 182.009s8.935-9.444 13.771-8.876l-.009-.006a36.07 36.07 0 0 0-2.262-2.018.035.035 0 0 1-.021-.012 19.343 19.343 0 0 0-1.184-.909c-.022-.019-.05-.036-.062-.054-.386-.278-.771-.549-1.173-.835l-.004-.003c-.382-.06-.776-.125-1.188-.166-5.25-.494-16.869 4.511-16.869 4.511s-11.62-5.005-16.869-4.511c-.413.041-.81.105-1.188.166l-.003.002c-.407.29-.795.563-1.182.843a.25.25 0 0 1-.056.046c-.407.291-.803.596-1.188.916l-.019.007a36.239 36.239 0 0 0-2.269 2.023v.001c4.836-.567 13.768 8.877 13.768 8.877s-17.73 20.884-16.965 34.084a34.72 34.72 0 0 0 3.618 4.026c-.44-11.992 22.349-30.134 22.349-30.134s22.789 18.14 22.352 30.134a34.063 34.063 0 0 0 3.574-3.98.587.587 0 0 0 .041-.046c.77-13.202-16.962-34.086-16.962-34.086z" fill={isPressed(s, BTN.HOME) ? "#fff" : "rgba(255,255,255,0.25)"} />
+
+      {/* ── Face buttons (ABXY) — positions from e7d CSS ── */}
+      {/* A - bottom */}
+      <circle cx="566.491" cy="329.498" r="26.5" fill={isPressed(s, BTN.A) ? "#39B54A" : "#0a0a0a"} stroke={isPressed(s, BTN.A) ? "#39B54A" : "#1A1615"} strokeWidth="2" />
+      <text x="566.491" y="337" textAnchor="middle" fontSize="22" fill={isPressed(s, BTN.A) ? "#fff" : "#39B54Aaa"} fontWeight="700">A</text>
+      {/* B - right */}
+      <circle cx="616.493" cy="279.493" r="26.5" fill={isPressed(s, BTN.B) ? "#C1272D" : "#0a0a0a"} stroke={isPressed(s, BTN.B) ? "#C1272D" : "#1A1615"} strokeWidth="2" />
+      <text x="616.493" y="287" textAnchor="middle" fontSize="22" fill={isPressed(s, BTN.B) ? "#fff" : "#C1272Daa"} fontWeight="700">B</text>
+      {/* X - left */}
+      <circle cx="516.486" cy="279.493" r="26.5" fill={isPressed(s, BTN.X) ? "#0071BC" : "#0a0a0a"} stroke={isPressed(s, BTN.X) ? "#0071BC" : "#1A1615"} strokeWidth="2" />
+      <text x="516.486" y="287" textAnchor="middle" fontSize="22" fill={isPressed(s, BTN.X) ? "#fff" : "#0071BCaa"} fontWeight="700">X</text>
+      {/* Y - top */}
+      <circle cx="566.491" cy="228.49" r="26.5" fill={isPressed(s, BTN.Y) ? "#FCEE21" : "#0a0a0a"} stroke={isPressed(s, BTN.Y) ? "#FCEE21" : "#1A1615"} strokeWidth="2" />
+      <text x="566.491" y="236" textAnchor="middle" fontSize="22" fill={isPressed(s, BTN.Y) ? "#fff" : "#FCEE21aa"} fontWeight="700">Y</text>
+
+      {/* ── View button (select) ── */}
+      <circle cx="306" cy="280.366" r="16" fill={isPressed(s, BTN.SELECT) ? accent : "#0A0A0A"} stroke={isPressed(s, BTN.SELECT) ? accent : "#1a1a1a"} strokeWidth="1" />
+      <g fill={isPressed(s, BTN.SELECT) ? "#fff" : "#6D6B6C"} transform="translate(297.5,275.5)">
+        <path d="M2.5 0h5.5v1.5H2.5zm0 3.9h5.5v1.5H2.5zm0 3.8h5.5v1.5H2.5z" />
+        <path d="M0 .3h3v7.4H0z" /><path d="M0 4.4h8v3H0z" />
+      </g>
+      {/* ── Menu button (start) ── */}
+      <circle cx="414" cy="280.366" r="16" fill={isPressed(s, BTN.START) ? accent : "#0A0A0A"} stroke={isPressed(s, BTN.START) ? accent : "#1a1a1a"} strokeWidth="1" />
+      <g fill={isPressed(s, BTN.START) ? "#fff" : "#6D6B6C"} transform="translate(405.5,275)">
+        <path d="M0 0h14v1.5H0zm0 3.9h14v1.5H0zm0 3.8h14v1.5H0z" />
+      </g>
+
+      {/* ── D-Pad interactive overlay ── */}
+      <g transform="translate(277.671,401.487) scale(1.8)">
+        {/* cross background */}
+        <rect x="-9" y="-27" width="18" height="54" rx="4" fill="none" />
+        <rect x="-27" y="-9" width="54" height="18" rx="4" fill="none" />
+        {/* Up */}
+        <rect x="-8" y="-26" width="16" height="20" rx="2.5" fill={btnFill(isPressed(s, BTN.DPAD_UP), accent)} stroke={btnStroke(isPressed(s, BTN.DPAD_UP), accent)} strokeWidth="0.6" opacity="0.85" />
+        {/* Down */}
+        <rect x="-8" y="6" width="16" height="20" rx="2.5" fill={btnFill(isPressed(s, BTN.DPAD_DOWN), accent)} stroke={btnStroke(isPressed(s, BTN.DPAD_DOWN), accent)} strokeWidth="0.6" opacity="0.85" />
+        {/* Left */}
+        <rect x="-26" y="-8" width="20" height="16" rx="2.5" fill={btnFill(isPressed(s, BTN.DPAD_LEFT), accent)} stroke={btnStroke(isPressed(s, BTN.DPAD_LEFT), accent)} strokeWidth="0.6" opacity="0.85" />
+        {/* Right */}
+        <rect x="6" y="-8" width="20" height="16" rx="2.5" fill={btnFill(isPressed(s, BTN.DPAD_RIGHT), accent)} stroke={btnStroke(isPressed(s, BTN.DPAD_RIGHT), accent)} strokeWidth="0.6" opacity="0.85" />
+      </g>
+
+      {/* ── Left bumper (LB) ── */}
+      <g opacity={isPressed(s, BTN.LB) ? 1 : 0.15}>
+        <path d="M134.221.76C91.974-4.862 38.282 22.221 20.001 32.135c-.274.164-.557.313-.828.464-.083.054-.157.11-.25.164-.183.083-.351.192-.533.303a1.621 1.621 0 0 1-.29.168 8.024 8.024 0 0 1-.452.297c-.084.046-.183.113-.288.182a3.428 3.428 0 0 1-.419.268c-.082.068-.17.137-.269.206-.134.087-.259.171-.397.27-.091.068-.163.137-.251.19a3.393 3.393 0 0 0-.377.29c-.088.061-.173.106-.244.172a5.2 5.2 0 0 1-.362.287c-.067.059-.147.125-.226.191-.116.105-.224.184-.348.288a2.907 2.907 0 0 0-.193.19c-.118.081-.24.189-.341.299a1.08 1.08 0 0 1-.186.154c-.12.112-.214.226-.326.325a1.264 1.264 0 0 0-.167.155c-.095.119-.209.221-.323.328a2.439 2.439 0 0 0-.125.156 3.162 3.162 0 0 0-.325.348.626.626 0 0 1-.107.121 4.513 4.513 0 0 0-.315.37.972.972 0 0 0-.095.104c-.118.144-.219.266-.315.403a5.159 5.159 0 0 1-.068.087c-.119.138-.216.285-.321.442a.304.304 0 0 1-.036.042c-.124.152-.227.328-.333.473.025-.01 97.688-41.961 121.984-34.379 15.54 4.869 27.223 15.331 32.802 18.224l3.423-6.342C156.689 13.781 142.069 1.797 134.221.76z" fill={isPressed(s, BTN.LB) ? accent : "#F2F2F2"} transform="translate(107,129)" />
+      </g>
+      <text x="168" y="178" textAnchor="middle" fontSize="14" fill={isPressed(s, BTN.LB) ? "#fff" : "rgba(255,255,255,0.35)"} fontWeight="600">LB</text>
+
+      <TriggerMeter x={168} y={84} width={118} label="LT" value={lt} accent={accent} align="center" />
+
+      {/* ── Right bumper (RB) ── */}
+      <g opacity={isPressed(s, BTN.RB) ? 1 : 0.15} transform="translate(472,129) scale(-1,1) translate(-171,0)">
+        <path d="M134.221.76C91.974-4.862 38.282 22.221 20.001 32.135c-.274.164-.557.313-.828.464-.083.054-.157.11-.25.164-.183.083-.351.192-.533.303a1.621 1.621 0 0 1-.29.168 8.024 8.024 0 0 1-.452.297c-.084.046-.183.113-.288.182a3.428 3.428 0 0 1-.419.268c-.082.068-.17.137-.269.206-.134.087-.259.171-.397.27-.091.068-.163.137-.251.19a3.393 3.393 0 0 0-.377.29c-.088.061-.173.106-.244.172a5.2 5.2 0 0 1-.362.287c-.067.059-.147.125-.226.191-.116.105-.224.184-.348.288a2.907 2.907 0 0 0-.193.19c-.118.081-.24.189-.341.299a1.08 1.08 0 0 1-.186.154c-.12.112-.214.226-.326.325a1.264 1.264 0 0 0-.167.155c-.095.119-.209.221-.323.328a2.439 2.439 0 0 0-.125.156 3.162 3.162 0 0 0-.325.348.626.626 0 0 1-.107.121 4.513 4.513 0 0 0-.315.37.972.972 0 0 0-.095.104c-.118.144-.219.266-.315.403a5.159 5.159 0 0 1-.068.087c-.119.138-.216.285-.321.442a.304.304 0 0 1-.036.042c-.124.152-.227.328-.333.473.025-.01 97.688-41.961 121.984-34.379 15.54 4.869 27.223 15.331 32.802 18.224l3.423-6.342C156.689 13.781 142.069 1.797 134.221.76z" fill={isPressed(s, BTN.RB) ? accent : "#F2F2F2"} />
+      </g>
+      <text x="580" y="178" textAnchor="middle" fontSize="14" fill={isPressed(s, BTN.RB) ? "#fff" : "rgba(255,255,255,0.35)"} fontWeight="600">RB</text>
+
+      <TriggerMeter x={580} y={84} width={118} label="RT" value={rt} accent={accent} align="center" />
+
+      {/* ── Left stick knob ── */}
+      <circle cx={lx} cy={ly} r="39" fill={isPressed(s, BTN.L3) ? accent : "#1a1a1a"} stroke={isPressed(s, BTN.L3) ? accent : "#212121"} strokeWidth="3" className="ct-stick-anim" />
+      <circle cx={lx} cy={ly} r="25" fill="none" stroke={isPressed(s, BTN.L3) ? "rgba(255,255,255,0.3)" : "rgba(255,255,255,0.06)"} strokeWidth="1.5" className="ct-stick-anim" />
+      <circle cx={lx} cy={ly} r="7" fill={isPressed(s, BTN.L3) ? "rgba(255,255,255,0.15)" : "rgba(255,255,255,0.03)"} className="ct-stick-anim" />
+
+      {/* ── Right stick knob ── */}
+      <circle cx={rx} cy={ry} r="39" fill={isPressed(s, BTN.R3) ? accent : "#1a1a1a"} stroke={isPressed(s, BTN.R3) ? accent : "#212121"} strokeWidth="3" className="ct-stick-anim" />
+      <circle cx={rx} cy={ry} r="25" fill="none" stroke={isPressed(s, BTN.R3) ? "rgba(255,255,255,0.3)" : "rgba(255,255,255,0.06)"} strokeWidth="1.5" className="ct-stick-anim" />
+      <circle cx={rx} cy={ry} r="7" fill={isPressed(s, BTN.R3) ? "rgba(255,255,255,0.15)" : "rgba(255,255,255,0.03)"} className="ct-stick-anim" />
+
+    </svg>
+  );
+};
+
+export default XboxOneModel;
diff --git a/src_frontend/assets/controller-models/models/xbox/XboxSeriesModel.jsx b/src_frontend/assets/controller-models/models/xbox/XboxSeriesModel.jsx
new file mode 100644
index 0000000..6a82fa1
--- /dev/null
+++ b/src_frontend/assets/controller-models/models/xbox/XboxSeriesModel.jsx
@@ -0,0 +1,5 @@
+import XboxOneModel from "./XboxOneModel.jsx";
+
+const XboxSeriesModel = (props) => <XboxOneModel {...props} />;
+
+export default XboxSeriesModel;
diff --git a/src_frontend/assets/controller-models/shared/TriggerMeter.jsx b/src_frontend/assets/controller-models/shared/TriggerMeter.jsx
new file mode 100644
index 0000000..4cf023f
--- /dev/null
+++ b/src_frontend/assets/controller-models/shared/TriggerMeter.jsx
@@ -0,0 +1,50 @@
+const TriggerMeter = ({
+  x,
+  y,
+  width,
+  label,
+  value,
+  accent,
+  align = "start",
+}) => {
+  const alignment = {
+    center: { barX: -(width / 2), textAnchor: "middle" },
+    end: { barX: -width, textAnchor: "end" },
+    start: { barX: 0, textAnchor: "start" },
+  };
+  const { barX, textAnchor } = alignment[align] || alignment.start;
+
+  return (
+    <g transform={`translate(${x},${y})`}>
+      <text
+        x="0"
+        y="-5"
+        textAnchor={textAnchor}
+        fontSize="10"
+        fill="rgba(255,255,255,0.34)"
+        fontFamily="monospace"
+      >
+        {label} {Math.round(value * 100)}%
+      </text>
+      <rect
+        x={barX}
+        y="0"
+        width={width}
+        height="7"
+        rx="3.5"
+        fill="rgba(255,255,255,0.05)"
+      />
+      <rect
+        x={barX}
+        y="0"
+        width={width * value}
+        height="7"
+        rx="3.5"
+        fill={accent}
+        opacity={0.4 + value * 0.6}
+      />
+    </g>
+  );
+};
+
+export default TriggerMeter;
diff --git a/src_frontend/assets/controller-models/shared/utils.js b/src_frontend/assets/controller-models/shared/utils.js
new file mode 100644
index 0000000..1537c83
--- /dev/null
+++ b/src_frontend/assets/controller-models/shared/utils.js
@@ -0,0 +1,40 @@
+export const BTN = {
+  A: 0,
+  B: 1,
+  X: 2,
+  Y: 3,
+  LB: 4,
+  RB: 5,
+  LT: 6,
+  RT: 7,
+  SELECT: 8,
+  START: 9,
+  L3: 10,
+  R3: 11,
+  DPAD_UP: 12,
+  DPAD_DOWN: 13,
+  DPAD_LEFT: 14,
+  DPAD_RIGHT: 15,
+  HOME: 16,
+};
+
+export function getButtonValue(state, index) {
+  return state?.buttons?.[index]?.value ?? 0;
+}
+
+export function isPressed(state, index) {
+  return state?.buttons?.[index]?.pressed ?? false;
+}
+
+export function getAxis(state, index) {
+  return state?.axes?.[index] ?? 0;
+}
+
+export const btnFill = (pressed, color) =>
+  pressed ? color : "rgba(255,255,255,0.06)";
+
+export const btnStroke = (pressed, color) =>
+  pressed ? color : "rgba(255,255,255,0.18)";
+
+export const txtFill = (pressed, color) =>
+  pressed ? "#fff" : `${color}aa`;
diff --git a/src_frontend/components/ControllerSettings.jsx b/src_frontend/components/ControllerSettings.jsx
new file mode 100644
index 0000000..d4a0d49
--- /dev/null
+++ b/src_frontend/components/ControllerSettings.jsx
@@ -0,0 +1,291 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import { useTranslation } from "../contexts/TranslationContext";
+import * as api from "../utils/ipc";
+
+import ControllerTester from "./ControllerTester";
+import DialogLayout from "./DialogLayout";
+import FocusableRow from "./FocusableRow";
+import LoadingIndicator from "./LoadingIndicator";
+import RowBasedMenu from "./RowBasedMenu";
+
+import "../styles/ControllerSettings.css";
+
+export const ControllerSettingsFocusId = "ControllerSettings";
+const ControllerDetailFocusId = "ControllerDetail";
+
+const INPUT_MODES = ["native", "xinput"];
+
+/* ── Detail view for a single controller ── */
+
+const ControllerDetail = ({ controller, onBack }) => {
+  const { t } = useTranslation();
+  const [inputMode, setInputMode] = useState("native");
+  const [showTester, setShowTester] = useState(false);
+  const scrollParentReference = useRef(null);
+  const isXboxFamily = controller?.family === "xbox";
+
+  useEffect(() => {
+    api
+      .getAppConfig()
+      .then((cfg) => {
+        const configuredMode = cfg?.controllerInputMode || "native";
+        const resolvedMode = isXboxFamily ? "native" : configuredMode;
+
+        setInputMode(resolvedMode);
+
+        if (isXboxFamily && configuredMode !== "native") {
+          api.setAppConfig("controllerInputMode", "native");
+        }
+      })
+      .catch(() => {});
+  }, [isXboxFamily]);
+
+  const cycleInputMode = useCallback(() => {
+    if (isXboxFamily) {
+      return;
+    }
+
+    setInputMode((prev) => {
+      const next =
+        INPUT_MODES[(INPUT_MODES.indexOf(prev) + 1) % INPUT_MODES.length];
+      api.setAppConfig("controllerInputMode", next);
+      return next;
+    });
+  }, [isXboxFamily]);
+
+  const handleAction = useCallback(
+    (actionName, item) => {
+      if (actionName === "B") {
+        onBack();
+        return;
+      }
+      if (actionName === "A" && item) {
+        if (item.id === "input-mode") {
+          cycleInputMode();
+        } else if (item.id === "test-controller") {
+          setShowTester(true);
+        }
+      }
+    },
+    [onBack, cycleInputMode],
+  );
+
+  const modeLabel = inputMode === "native" ? t("Native") : t("Xinput");
+
+  const menuItems = useMemo(
+    () => [
+      {
+        id: "input-mode",
+        label: t("Input Mode"),
+        value: modeLabel,
+        disabled: isXboxFamily,
+      },
+      {
+        id: "test-controller",
+        label: t("Test Controller"),
+      },
+    ],
+    [isXboxFamily, modeLabel, t],
+  );
+
+  const renderItem = useCallback(
+    (item, isFocused, onMouseEnter) => (
+      <FocusableRow
+        key={item.id}
+        isFocused={isFocused}
+        onMouseEnter={onMouseEnter}
+      >
+        <div className={`cs-row-content ${item.disabled ? "disabled" : ""}`}>
+          <span className="cs-row-label">{item.label}</span>
+          {item.value && (
+            <span className={`cs-row-value ${item.disabled ? "disabled" : ""}`}>
+              {item.value}
+            </span>
+          )}
+        </div>
+      </FocusableRow>
+    ),
+    [],
+  );
+
+  const legendItems = useMemo(
+    () => [
+      { button: "A", label: t("Select") },
+      { button: "B", label: t("Back") },
+    ],
+    [t],
+  );
+
+  if (showTester) {
+    return (
+      <ControllerTester
+        controller={controller}
+        onClose={() => setShowTester(false)}
+      />
+    );
+  }
+
+  return (
+    <DialogLayout
+      title={controller.name}
+      legendItems={legendItems}
+      maxWidth="600px"
+      contentRef={scrollParentReference}
+    >
+      <RowBasedMenu
+        items={menuItems}
+        renderItem={renderItem}
+        onAction={handleAction}
+        focusId={ControllerDetailFocusId}
+        itemKey={(item) => item.id}
+        scrollParentRef={scrollParentReference}
+      />
+    </DialogLayout>
+  );
+};
+
+/* ── Controller list (top-level) ── */
+
+const ControllerSettings = ({ onClose }) => {
+  const { t } = useTranslation();
+  const [controllers, setControllers] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [selectedController, setSelectedController] = useState(null);
+  const [inputMode, setInputMode] = useState("native");
+  const currentMenuItem = useRef(null);
+  const scrollParentReference = useRef(null);
+
+  const fetchControllers = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const [result, config] = await Promise.all([
+        api.listControllers(),
+        api.getAppConfig(),
+      ]);
+      setControllers(result || []);
+      if (config?.controllerInputMode) {
+        setInputMode(config.controllerInputMode);
+      }
+    } catch {
+      setControllers([]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchControllers();
+  }, [fetchControllers]);
+
+  const handleAction = useCallback(
+    (actionName, item) => {
+      switch (actionName) {
+        case "A": {
+          if (item?.controller) {
+            setSelectedController(item.controller);
+          }
+          break;
+        }
+        case "B": {
+          onClose();
+          break;
+        }
+        case "Y": {
+          fetchControllers();
+          break;
+        }
+      }
+    },
+    [onClose, fetchControllers],
+  );
+
+  const menuItems = useMemo(
+    () =>
+      controllers.map((controller) => ({
+        id: `controller-${controller.index}`,
+        label: controller.name,
+        controller,
+      })),
+    [controllers],
+  );
+
+  const renderItem = useCallback(
+    (item, isFocused, onMouseEnter) => (
+      <FocusableRow
+        key={item.id}
+        isFocused={isFocused}
+        onMouseEnter={onMouseEnter}
+      >
+        <div className="controller-settings-device">
+          <div className="controller-settings-device-header">
+            <span className="cs-row-label">{item.controller.name}</span>
+            <span className="controller-settings-mode-badge">
+              {inputMode}
+            </span>
+          </div>
+          <span className="controller-settings-meta">
+            {[
+              item.controller.family,
+              `${item.controller.vendorId}:${item.controller.productId}`,
+            ]
+              .filter(Boolean)
+              .join(" · ")}
+          </span>
+        </div>
+      </FocusableRow>
+    ),
+    [inputMode],
+  );
+
+  const legendItems = useMemo(
+    () => [
+      { button: "A", label: t("Select") },
+      { button: "Y", label: t("Refresh"), onClick: fetchControllers },
+      { button: "B", label: t("Close"), onClick: onClose },
+    ],
+    [onClose, fetchControllers, t],
+  );
+
+  if (selectedController) {
+    return (
+      <ControllerDetail
+        controller={selectedController}
+        onBack={() => {
+          setSelectedController(null);
+          fetchControllers();
+        }}
+      />
+    );
+  }
+
+  return (
+    <DialogLayout
+      title={t("Controller Settings")}
+      legendItems={legendItems}
+      maxWidth="600px"
+      contentRef={scrollParentReference}
+    >
+      {isLoading ? (
+        <div className="cs-loading">
+          <LoadingIndicator />
+        </div>
+      ) : (
+        <RowBasedMenu
+          items={menuItems}
+          renderItem={renderItem}
+          onAction={handleAction}
+          focusId={ControllerSettingsFocusId}
+          itemKey={(item) => item.id}
+          onFocusChange={(item) => {
+            currentMenuItem.current = item;
+          }}
+          scrollParentRef={scrollParentReference}
+          emptyMessage={t("No controllers detected.")}
+        />
+      )}
+    </DialogLayout>
+  );
+};
+
+export default ControllerSettings;
diff --git a/src_frontend/components/ControllerTester.jsx b/src_frontend/components/ControllerTester.jsx
new file mode 100644
index 0000000..30f6c89
--- /dev/null
+++ b/src_frontend/components/ControllerTester.jsx
@@ -0,0 +1,89 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+
+import {
+  MODEL_COMPONENTS,
+  resolveControllerModel,
+} from "../assets/controller-models/index.js";
+import { useTranslation } from "../contexts/TranslationContext";
+import { useScopedInput } from "../hooks/useScopedInput";
+import * as api from "../utils/ipc";
+
+import DialogLayout from "./DialogLayout";
+
+import "../styles/ControllerTester.css";
+
+export const ControllerTesterFocusId = "ControllerTester";
+
+const ControllerTester = ({ onClose, controller }) => {
+  const { t } = useTranslation();
+  const [gamepadState, setGamepadState] = useState(null);
+  const rafRef = useRef(null);
+
+  const modelId = useMemo(
+    () => resolveControllerModel(controller),
+    [controller],
+  );
+  const ModelComponent = MODEL_COMPONENTS[modelId] || MODEL_COMPONENTS.xbox;
+
+  useScopedInput(
+    (event) => {
+      if (event.name === "B") {
+        onClose();
+        event.isConsumed = true;
+      }
+    },
+    ControllerTesterFocusId,
+  );
+
+  useEffect(() => {
+    let active = true;
+
+    const poll = async () => {
+      if (!active) return;
+      try {
+        const gamepads = await api.pollGamepadsSdl();
+        if (!active) return;
+        const gp = gamepads.find((g) => g.index === controller?.index) ?? gamepads[0] ?? null;
+        setGamepadState(gp);
+      } catch {
+        // SDL not available — skip
+      }
+      if (active) {
+        rafRef.current = requestAnimationFrame(poll);
+      }
+    };
+
+    rafRef.current = requestAnimationFrame(poll);
+    return () => {
+      active = false;
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+      }
+    };
+  }, [controller]);
+
+  const legendItems = useMemo(
+    () => [{ button: "B", label: t("Close"), onClick: onClose }],
+    [onClose, t],
+  );
+
+  const s = gamepadState;
+
+  return (
+    <DialogLayout
+      title={t("Controller Test")}
+      legendItems={legendItems}
+      maxWidth="700px"
+    >
+      {s ? (
+        <div className="ct-layout">
+          <ModelComponent s={s} />
+        </div>
+      ) : (
+        <div className="ct-no-data">{t("Waiting for controller input...")}</div>
+      )}
+    </DialogLayout>
+  );
+};
+
+export default ControllerTester;
diff --git a/src_frontend/components/SystemMenu.jsx b/src_frontend/components/SystemMenu.jsx
index ffad843..043f7c6 100644
--- a/src_frontend/components/SystemMenu.jsx
+++ b/src_frontend/components/SystemMenu.jsx
@@ -14,6 +14,7 @@ import * as api from "../utils/ipc";
 import About from "./About";
 import BluetoothMenu from "./BluetoothMenu";
 import ConfirmationDialog from "./ConfirmationDialog";
+import ControllerSettings from "./ControllerSettings";
 import DisplaySettings from "./DisplaySettings";
 import LegendaContainer from "./LegendaContainer";
 import LutrisSettingsFlow from "./LutrisSettingsFlow";
@@ -74,6 +75,13 @@ const SystemMenu = () => {
     setIsOpen(false);
   }, [showModal, setIsOpen]);
 
+  const openControllerSettingsModal = useCallback(() => {
+    showModal((hideThisModal) => (
+      <ControllerSettings onClose={hideThisModal} />
+    ));
+    setIsOpen(false);
+  }, [showModal, setIsOpen]);
+
   const openAboutModal = useCallback(() => {
     showModal((hideThisModal) => <About onClose={hideThisModal} />);
     setIsOpen(false);
@@ -131,6 +139,10 @@ const SystemMenu = () => {
           action: openBluetoothSettingsModal,
           disabled: staticSettings.DISABLE_BLUETOOTH_SETTINGS,
         },
+        {
+          label: t("Controller Settings"),
+          action: openControllerSettingsModal,
+        },
         {
           label: t("Open Lutris"),
           action: () => api.openLutris(),
@@ -177,6 +189,7 @@ const SystemMenu = () => {
       openAudioSettingsModal,
       openDisplaySettingsModal,
       openBluetoothSettingsModal,
+      openControllerSettingsModal,
       settings.doubleConfirmPowerManagement,
       staticSettings.DISABLE_LUTRIS_SETTINGS,
       staticSettings.DISABLE_AUDIO_SETTINGS,
diff --git a/src_frontend/locale/locale.en.json b/src_frontend/locale/locale.en.json
index 52a4da5..86ac7d1 100644
--- a/src_frontend/locale/locale.en.json
+++ b/src_frontend/locale/locale.en.json
@@ -32,6 +32,23 @@
     "Confirm": "Confirm",
     "Select": "Select"
   },
+  "components/ControllerSettings.jsx": {
+    "Back": "Back",
+    "Close": "Close",
+    "Controller Settings": "Controller Settings",
+    "Input Mode": "Input Mode",
+    "Native": "Native",
+    "No controllers detected.": "No controllers detected.",
+    "Refresh": "Refresh",
+    "Select": "Select",
+    "Test Controller": "Test Controller",
+    "Xinput": "Xinput"
+  },
+  "components/ControllerTester.jsx": {
+    "Close": "Close",
+    "Controller Test": "Controller Test",
+    "Waiting for controller input...": "Waiting for controller input..."
+  },
   "components/ControlsOverlay.jsx": {
     "Clear Search": "Clear Search",
     "Force close": "Force close",
@@ -172,6 +189,7 @@
     "Continue with exiting the application?": "Continue with exiting the application?",
     "Continue with system power off?": "Continue with system power off?",
     "Continue with system reboot?": "Continue with system reboot?",
+    "Controller Settings": "Controller Settings",
     "Display Settings": "Display Settings",
     "Exit Application": "Exit Application",
     "Generate Bug Report": "Generate Bug Report",
diff --git a/src_frontend/locale/locale.fa.json b/src_frontend/locale/locale.fa.json
index 8b036a2..93b832b 100644
--- a/src_frontend/locale/locale.fa.json
+++ b/src_frontend/locale/locale.fa.json
@@ -32,6 +32,23 @@
     "Confirm": "پذیرفتن",
     "Select": "انتخاب"
   },
+  "components/ControllerSettings.jsx": {
+    "Back": "Back",
+    "Close": "Close",
+    "Controller Settings": "Controller Settings",
+    "Input Mode": "Input Mode",
+    "Native": "Native",
+    "No controllers detected.": "No controllers detected.",
+    "Refresh": "Refresh",
+    "Select": "Select",
+    "Test Controller": "Test Controller",
+    "Xinput": "Xinput"
+  },
+  "components/ControllerTester.jsx": {
+    "Close": "Close",
+    "Controller Test": "Controller Test",
+    "Waiting for controller input...": "Waiting for controller input..."
+  },
   "components/ControlsOverlay.jsx": {
     "Clear Search": "پاک‌کردن جستجو",
     "Force close": "بستن اجباری",
@@ -172,6 +189,7 @@
     "Continue with exiting the application?": "ادامه دادن به خروج از برنامه؟",
     "Continue with system power off?": "ادامه دادن به خاموش کردن سامانه؟",
     "Continue with system reboot?": "ادامه دادن به باز راه‌اندازی سامانه؟",
+    "Controller Settings": "Controller Settings",
     "Display Settings": "Display Settings",
     "Exit Application": "خروج از برنامه",
     "Generate Bug Report": "Generate Bug Report",
diff --git a/src_frontend/locale/locale.it.json b/src_frontend/locale/locale.it.json
index e23950e..260ae00 100644
--- a/src_frontend/locale/locale.it.json
+++ b/src_frontend/locale/locale.it.json
@@ -32,6 +32,23 @@
     "Confirm": "Conferma",
     "Select": "Seleziona"
   },
+  "components/ControllerSettings.jsx": {
+    "Back": "Back",
+    "Close": "Close",
+    "Controller Settings": "Controller Settings",
+    "Input Mode": "Input Mode",
+    "Native": "Native",
+    "No controllers detected.": "No controllers detected.",
+    "Refresh": "Refresh",
+    "Select": "Select",
+    "Test Controller": "Test Controller",
+    "Xinput": "Xinput"
+  },
+  "components/ControllerTester.jsx": {
+    "Close": "Close",
+    "Controller Test": "Controller Test",
+    "Waiting for controller input...": "Waiting for controller input..."
+  },
   "components/ControlsOverlay.jsx": {
     "Clear Search": "Annulla ricerca",
     "Force close": "Forza chiusura di",
@@ -172,6 +189,7 @@
     "Continue with exiting the application?": "Uscire dall'applicazione?",
     "Continue with system power off?": "Procedere con lo spegnimento del sistema?",
     "Continue with system reboot?": "Procedere con il riavvio del sistema?",
+    "Controller Settings": "Controller Settings",
     "Display Settings": "Display Settings",
     "Exit Application": "Esci",
     "Generate Bug Report": "Genera segnalazione bug",
diff --git a/src_frontend/locale/locale.sv.json b/src_frontend/locale/locale.sv.json
index e04e538..5967aaf 100644
--- a/src_frontend/locale/locale.sv.json
+++ b/src_frontend/locale/locale.sv.json
@@ -32,6 +32,23 @@
     "Confirm": "Bekräfta",
     "Select": "Välj"
   },
+  "components/ControllerSettings.jsx": {
+    "Back": "Back",
+    "Close": "Close",
+    "Controller Settings": "Controller Settings",
+    "Input Mode": "Input Mode",
+    "Native": "Native",
+    "No controllers detected.": "No controllers detected.",
+    "Refresh": "Refresh",
+    "Select": "Select",
+    "Test Controller": "Test Controller",
+    "Xinput": "Xinput"
+  },
+  "components/ControllerTester.jsx": {
+    "Close": "Close",
+    "Controller Test": "Controller Test",
+    "Waiting for controller input...": "Waiting for controller input..."
+  },
   "components/ControlsOverlay.jsx": {
     "Clear Search": "Rensa sökning",
     "Force close": "Tvinga stängning av",
@@ -172,6 +189,7 @@
     "Continue with exiting the application?": "Fortsätt med att avsluta programmet?",
     "Continue with system power off?": "Fortsätt med att stänga av systemet?",
     "Continue with system reboot?": "Fortsätt med att starta om systemet?",
+    "Controller Settings": "Controller Settings",
     "Display Settings": "Display Settings",
     "Exit Application": "Avsluta programmet",
     "Generate Bug Report": "Generate Bug Report",
diff --git a/src_frontend/locale/locale.zh.json b/src_frontend/locale/locale.zh.json
index 7b25657..8740ec8 100644
--- a/src_frontend/locale/locale.zh.json
+++ b/src_frontend/locale/locale.zh.json
@@ -32,6 +32,23 @@
     "Confirm": "确认",
     "Select": "选择"
   },
+  "components/ControllerSettings.jsx": {
+    "Back": "Back",
+    "Close": "Close",
+    "Controller Settings": "Controller Settings",
+    "Input Mode": "Input Mode",
+    "Native": "Native",
+    "No controllers detected.": "No controllers detected.",
+    "Refresh": "Refresh",
+    "Select": "Select",
+    "Test Controller": "Test Controller",
+    "Xinput": "Xinput"
+  },
+  "components/ControllerTester.jsx": {
+    "Close": "Close",
+    "Controller Test": "Controller Test",
+    "Waiting for controller input...": "Waiting for controller input..."
+  },
   "components/ControlsOverlay.jsx": {
     "Clear Search": "清除搜索",
     "Force close": "强制关闭",
@@ -172,6 +189,7 @@
     "Continue with exiting the application?": "继续退出应用吗？",
     "Continue with system power off?": "继续关闭系统吗？",
     "Continue with system reboot?": "继续重启系统吗？",
+    "Controller Settings": "Controller Settings",
     "Display Settings": "显示设置",
     "Exit Application": "退出应用",
     "Generate Bug Report": "生成错误报告",
diff --git a/src_frontend/styles/ControllerSettings.css b/src_frontend/styles/ControllerSettings.css
new file mode 100644
index 0000000..74f31e0
--- /dev/null
+++ b/src_frontend/styles/ControllerSettings.css
@@ -0,0 +1,69 @@
+.cs-loading {
+  padding: 24px 0;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cs-row-content {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-grow: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.cs-row-content.disabled {
+  opacity: 0.45;
+}
+
+.cs-row-value {
+  margin-left: auto;
+  color: var(--accent-color);
+  font-weight: 600;
+  text-transform: capitalize;
+  font-size: 0.9rem;
+}
+
+.cs-row-value.disabled {
+  color: var(--text-secondary-color, rgba(255, 255, 255, 0.72));
+}
+
+.cs-row-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.controller-settings-device {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+}
+
+.controller-settings-device-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.controller-settings-mode-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  background: rgba(255, 80, 80, 0.15);
+  color: #ff5050;
+}
+
+.controller-settings-meta {
+  color: var(--text-secondary-color, rgba(255, 255, 255, 0.72));
+  font-size: 0.9rem;
+  text-transform: capitalize;
+}
diff --git a/src_frontend/styles/ControllerTester.css b/src_frontend/styles/ControllerTester.css
new file mode 100644
index 0000000..8e10001
--- /dev/null
+++ b/src_frontend/styles/ControllerTester.css
@@ -0,0 +1,46 @@
+.ct-no-data {
+  padding: 32px 0;
+  text-align: center;
+  color: var(--text-secondary);
+  font-size: 1rem;
+}
+
+.ct-layout {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 12px 0;
+}
+
+.ct-svg {
+  width: 100%;
+  max-width: 620px;
+  height: auto;
+  filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.5));
+}
+
+.ct-stick-anim {
+  transition: cx 0.04s linear, cy 0.04s linear, fill 0.08s;
+}
+
+.ct-model-wrap {
+  position: relative;
+  width: 100%;
+  max-width: 620px;
+  filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.5));
+}
+
+.ct-model-base {
+  display: block;
+  width: 100%;
+  height: auto;
+  background: transparent;
+  border-radius: 12px;
+}
+
+.ct-model-overlay {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
diff --git a/src_frontend/utils/ipc.js b/src_frontend/utils/ipc.js
index 02288e4..60fc6da 100644
--- a/src_frontend/utils/ipc.js
+++ b/src_frontend/utils/ipc.js
@@ -96,6 +96,7 @@ export const onAppConfigChanged = createSubscriber("app-config-changed");
 export const createBugReportFile = () =>
   globalThis.electronAPI.createBugReportFile();
 
+export const listControllers = () => globalThis.electronAPI.listControllers();
 export const pollGamepadsSdl = async () =>
   deserializeGamepads(await globalThis.electronAPI.pollGamepadsSdl());