diff --git a/sketches/doorbell/Dockerfile b/sketches/doorbell/Dockerfile
new file mode 100644
index 0000000..c039754
--- /dev/null
+++ b/sketches/doorbell/Dockerfile
@@ -0,0 +1,11 @@
+FROM nginx:alpine
+
+# Copy your cocaine chic doorbell UI
+COPY doorbell.html /usr/share/nginx/html/index.html
+
+# Optional: custom nginx config for SPA behavior
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/sketches/doorbell/doorbell.html b/sketches/doorbell/doorbell.html
new file mode 100644
index 0000000..ac3c205
--- /dev/null
+++ b/sketches/doorbell/doorbell.html
@@ -0,0 +1,277 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>KLUBHAUS ALERT</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            -webkit-tap-highlight-color: transparent;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: #0a0a0a;
+            color: #fff8fa;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            padding: 20px;
+        }
+
+        h1 {
+            font-size: 14px;
+            font-weight: 300;
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            color: #0bd3d3;
+            margin-bottom: 10px;
+            text-align: center;
+        }
+
+        /* Status Indicator */
+        #status {
+            text-align: center;
+            padding: 15px;
+            margin-bottom: 30px;
+            border-radius: 8px;
+            font-size: 12px;
+            letter-spacing: 2px;
+            text-transform: uppercase;
+            transition: all 0.3s ease;
+        }
+
+        #status.silent {
+            background: #1a1a1a;
+            color: #888;
+            border: 1px solid #333;
+        }
+
+        #status.alerting {
+            background: linear-gradient(90deg, #0bd3d3 0%, #f890e7 100%);
+            color: #000;
+            font-weight: 600;
+            animation: pulse 1s ease-in-out infinite;
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.7; }
+        }
+
+        /* Button Grid */
+        .buttons {
+            display: grid;
+            gap: 15px;
+            flex: 1;
+        }
+
+        button {
+            border: none;
+            border-radius: 12px;
+            padding: 30px 20px;
+            font-size: 18px;
+            font-weight: 500;
+            letter-spacing: 2px;
+            text-transform: uppercase;
+            cursor: pointer;
+            transition: transform 0.1s ease, opacity 0.2s ease;
+            color: #fff8fa;
+            position: relative;
+            overflow: hidden;
+        }
+
+        button:active {
+            transform: scale(0.96);
+            opacity: 0.8;
+        }
+
+        #frontDoor {
+            background: linear-gradient(135deg, #0bd3d3 0%, #08a8a8 100%);
+            box-shadow: 0 10px 40px rgba(11, 211, 211, 0.3);
+        }
+
+        #loadingDock {
+            background: linear-gradient(135deg, #f890e7 0%, #d660c4 100%);
+            box-shadow: 0 10px 40px rgba(248, 144, 231, 0.3);
+        }
+
+        #custom {
+            background: #1a1a1a;
+            border: 2px solid #fff8fa;
+            padding: 20px;
+        }
+
+        #customInput {
+            width: 100%;
+            background: transparent;
+            border: none;
+            border-bottom: 1px solid #fff8fa;
+            color: #fff8fa;
+            font-size: 16px;
+            padding: 10px 0;
+            margin-bottom: 15px;
+            outline: none;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+
+        #customInput::placeholder {
+            color: #666;
+            text-transform: uppercase;
+            font-size: 12px;
+        }
+
+        #sendCustom {
+            width: 100%;
+            background: #fff8fa;
+            color: #000;
+            border: none;
+            border-radius: 8px;
+            padding: 15px;
+            font-size: 14px;
+            font-weight: 600;
+            letter-spacing: 2px;
+            text-transform: uppercase;
+            cursor: pointer;
+        }
+
+        #sendCustom:active {
+            background: #0bd3d3;
+        }
+
+        /* Feedback toast */
+        #toast {
+            position: fixed;
+            bottom: 30px;
+            left: 50%;
+            transform: translateX(-50%) translateY(100px);
+            background: #64e8ba;
+            color: #000;
+            padding: 15px 30px;
+            border-radius: 8px;
+            font-size: 12px;
+            font-weight: 600;
+            letter-spacing: 2px;
+            text-transform: uppercase;
+            opacity: 0;
+            transition: all 0.3s ease;
+            pointer-events: none;
+        }
+
+        #toast.show {
+            transform: translateX(-50%) translateY(0);
+            opacity: 1;
+        }
+    </style>
+</head>
+<body>
+    <h1>KLUBHAUS ALERT</h1>
+
+    <div id="status" class="silent">Checking...</div>
+
+    <div class="buttons">
+        <button id="frontDoor" onclick="sendAlert('FRONT DOOR')">
+            Front Door
+        </button>
+
+        <button id="loadingDock" onclick="sendAlert('LOADING DOCK')">
+            Loading Dock
+        </button>
+
+        <div id="custom">
+            <input type="text" id="customInput" maxlength="60" placeholder="Custom message (60 chars)">
+            <button id="sendCustom" onclick="sendCustom()">Send Custom</button>
+        </div>
+    </div>
+
+    <div id="toast">Sent</div>
+
+    <script>
+        const ALERT_TOPIC = 'https://ntfy.sh/ALERT_klubhaus_topic';
+        const STATUS_TOPIC = 'https://ntfy.sh/STATUS_klubhaus_topic/json?poll=1';
+
+        // Poll status every 5 seconds
+        async function checkStatus() {
+            try {
+                const response = await fetch(STATUS_TOPIC);
+                if (!response.ok) throw new Error('No status');
+
+                const text = await response.text();
+                const lines = text.split('\n').filter(l => l.trim());
+                if (lines.length === 0) return;
+
+                const data = JSON.parse(lines[0]);
+                const statusEl = document.getElementById('status');
+
+                if (data.state === 'ALERTING') {
+                    statusEl.className = 'alerting';
+                    statusEl.textContent = 'ALERTING: ' + (data.message || 'UNKNOWN');
+                } else {
+                    statusEl.className = 'silent';
+                    statusEl.textContent = 'SILENT — System Ready';
+                }
+            } catch (e) {
+                document.getElementById('status').className = 'silent';
+                document.getElementById('status').textContent = 'OFFLINE — No Status';
+            }
+        }
+
+        async function sendAlert(message) {
+            try {
+                const response = await fetch(ALERT_TOPIC, {
+                    method: 'POST',
+                    body: message,
+                    headers: { 'Title': 'KLUBHAUS ALERT' }
+                });
+
+                if (response.ok) {
+                    showToast('ALERT SENT: ' + message);
+                } else {
+                    showToast('FAILED — TRY AGAIN');
+                }
+            } catch (e) {
+                showToast('NETWORK ERROR');
+            }
+        }
+
+        function sendCustom() {
+            const input = document.getElementById('customInput');
+            const message = input.value.trim().toUpperCase();
+
+            if (message.length === 0) {
+                showToast('ENTER MESSAGE');
+                return;
+            }
+
+            if (message.length > 60) {
+                showToast('TOO LONG — MAX 60');
+                return;
+            }
+
+            sendAlert(message);
+            input.value = '';
+        }
+
+        function showToast(text) {
+            const toast = document.getElementById('toast');
+            toast.textContent = text;
+            toast.classList.add('show');
+            setTimeout(() => toast.classList.remove('show'), 2000);
+        }
+
+        // Enter key in custom input
+        document.getElementById('customInput').addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') sendCustom();
+        });
+
+        // Start polling
+        checkStatus();
+        setInterval(checkStatus, 5000);
+    </script>
+</body>
+</html>
+
diff --git a/sketches/doorbell/nginx.conf b/sketches/doorbell/nginx.conf
new file mode 100644
index 0000000..d99d8b3
--- /dev/null
+++ b/sketches/doorbell/nginx.conf
@@ -0,0 +1,15 @@
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Security headers
+    add_header X-Frame-Options "SAMEORIGIN";
+    add_header X-Content-Type-Options "nosniff";
+}
+
diff --git a/sketches/mise.toml b/sketches/mise.toml
index ba0ac51..40c1f6c 100644
--- a/sketches/mise.toml
+++ b/sketches/mise.toml
@@ -7,4 +7,4 @@ run = "arduino-cli monitor"
 dir = "{{cwd}}"
 
 [tasks.snap]
-run = "git commit -am snapshot"
+run = "git add .; git commit -am snapshot"
