diff --git a/lightsync/frontend/app.js b/lightsync/frontend/app.js
index 3e726ff..af44126 100644
--- a/lightsync/frontend/app.js
+++ b/lightsync/frontend/app.js
@@ -4,6 +4,21 @@
 
 const WS_URL = `ws://${location.host}/ws`;
 
+async function apiPost(path, data) {
+    const res = await fetch(path, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+    });
+    if (!res.ok) throw new Error(`POST ${path}: HTTP ${res.status}`);
+    return res.json();
+}
+
+async function apiDelete(path) {
+    const res = await fetch(path, { method: "DELETE" });
+    if (!res.ok && res.status !== 204) throw new Error(`DELETE ${path}: HTTP ${res.status}`);
+}
+
 class LightSyncClient {
     constructor() {
         this.ws = null;
@@ -68,8 +83,11 @@ async function loadDevices() {
         }
         list.innerHTML = devices.map(d =>
             `<div class="device-row">
-                <span class="text-accent">${escapeHtml(d.name)}</span>
-                <span class="text-dim">${escapeHtml(d.strip_type)} / ${d.led_count} LEDs / ${escapeHtml(d.ip)}:${d.port}</span>
+                <div class="device-row-info">
+                    <span class="text-accent">${escapeHtml(d.name)}</span>
+                    <span class="text-dim">${escapeHtml(d.strip_type)} / ${d.led_count} LEDs / ${escapeHtml(d.ip)}:${d.port}</span>
+                </div>
+                <button class="device-remove" onclick="removeDevice('${d.id}')" title="Remove device">&times;</button>
             </div>`
         ).join("");
     } catch (err) {
@@ -79,6 +97,16 @@ async function loadDevices() {
     }
 }
 
+async function removeDevice(id) {
+    try {
+        await apiDelete(`/api/devices/${id}`);
+        await loadDevices();
+    } catch (err) {
+        console.error("[devices] remove failed:", err);
+    }
+}
+window.removeDevice = removeDevice;
+
 function escapeHtml(str) {
     const div = document.createElement("div");
     div.appendChild(document.createTextNode(String(str)));
@@ -86,3 +114,23 @@ function escapeHtml(str) {
 }
 
 loadDevices();
+
+document.getElementById("add-device-form").addEventListener("submit", async (e) => {
+    e.preventDefault();
+    const form = e.target;
+    const data = {
+        name: form.name.value.trim(),
+        strip_type: form.strip_type.value,
+        led_count: parseInt(form.led_count.value, 10),
+        ip: form.ip.value.trim(),
+        port: parseInt(form.port.value, 10),
+    };
+    try {
+        await apiPost("/api/devices", data);
+        form.reset();
+        form.port.value = "21324";
+        await loadDevices();
+    } catch (err) {
+        console.error("[devices] add failed:", err);
+    }
+});
diff --git a/lightsync/frontend/index.html b/lightsync/frontend/index.html
index 2720f65..d154fe6 100644
--- a/lightsync/frontend/index.html
+++ b/lightsync/frontend/index.html
@@ -20,23 +20,37 @@
         </header>
 
         <aside class="sidebar">
-            <div class="panel" style="flex: 1; min-height: 0;">
+            <div class="panel" id="devices-panel" style="flex: 1; min-height: 0;">
                 <div class="panel-header">DEVICES</div>
                 <div class="panel-content" id="device-list">
                     <span class="text-dim">loading...</span>
                 </div>
+                <form id="add-device-form" class="device-form">
+                    <input type="text" name="name" placeholder="Device name" required>
+                    <select name="strip_type" required>
+                        <option value="sk6812">SK6812</option>
+                        <option value="ws2801">WS2801</option>
+                        <option value="generic">Generic</option>
+                    </select>
+                    <input type="number" name="led_count" placeholder="LED count" min="1" max="1000" required>
+                    <input type="text" name="ip" placeholder="IP address" required>
+                    <input type="number" name="port" placeholder="Port" min="1" max="65535" value="21324" required>
+                    <button type="submit">+ ADD DEVICE</button>
+                </form>
             </div>
-            <div class="panel" style="flex: 0 0 120px;">
+            <div class="panel" id="animations-panel" style="flex: 0 0 120px;">
                 <div class="panel-header">ANIMATIONS</div>
                 <div class="panel-content text-dim">[ PHASE 3+ ]</div>
             </div>
         </aside>
 
         <main class="main-area">
-            <span>[ TIMELINE &#8212; PHASE 2+ ]</span>
+            <div class="panel" id="timeline-panel" style="flex: 1; display: flex; align-items: center; justify-content: center;">
+                <span>[ TIMELINE &#8212; PHASE 2+ ]</span>
+            </div>
         </main>
 
-        <footer class="transport-bar">
+        <footer class="transport-bar" id="transport-panel">
             <span>[ TRANSPORT &#8212; PHASE 2+ ]</span>
         </footer>