diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..84e35d2
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Pi Zero HID Web Controller</title>
+    <style>
+        body { font-family: sans-serif; background: #111; color: #eee; text-align: center; }
+        button { padding: 10px 20px; margin: 5px; font-size: 18px; }
+        #mousepad {
+            width: 400px; height: 300px;
+            background: #222; margin: 20px auto;
+            border: 2px solid #555; border-radius: 10px;
+        }
+    </style>
+</head>
+<body>
+
+<h1>Pi Zero HID Web Controller</h1>
+
+<h2>Keyboard</h2>
+<input id="keycode" type="number" placeholder="HID keycode">
+<button onclick="sendKey()">Send Key</button>
+
+<h2>Mouse</h2>
+<div id="mousepad"></div>
+<button onclick="mouseClick(1)">Left Click</button>
+<button onclick="mouseClick(2)">Right Click</button>
+
+<script>
+function sendKey() {
+    const code = document.getElementById("keycode").value;
+    fetch("/key", {
+        method: "POST",
+        headers: {"Content-Type": "application/x-www-form-urlencoded"},
+        body: "code=" + code
+    });
+}
+
+function mouseMove(dx, dy) {
+    fetch("/mouse", {
+        method: "POST",
+        headers: {"Content-Type": "application/x-www-form-urlencoded"},
+        body: `dx=${dx}&dy=${dy}&buttons=0`
+    });
+}
+
+function mouseClick(button) {
+    fetch("/mouse", {
+        method: "POST",
+        headers: {"Content-Type": "application/x-www-form-urlencoded"},
+        body: `dx=0&dy=0&buttons=${button}`
+    });
+}
+
+const pad = document.getElementById("mousepad");
+let lastX = 0, lastY = 0;
+
+pad.addEventListener("mousemove", e => {
+    if (e.buttons !== 1) return;
+    const rect = pad.getBoundingClientRect();
+    const dx = e.clientX - lastX;
+    const dy = e.clientY - lastY;
+    lastX = e.clientX;
+    lastY = e.clientY;
+    mouseMove(dx, dy);
+});
+
+pad.addEventListener("mousedown", e => {
+    lastX = e.clientX;
+    lastY = e.clientY;
+});
+</script>
+
+</body>
+</html>
