diff --git a/apps/ui/templates/dashboard.html b/apps/ui/templates/dashboard.html
index c5d3cbd..d01db1e 100644
--- a/apps/ui/templates/dashboard.html
+++ b/apps/ui/templates/dashboard.html
@@ -3,109 +3,551 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Home Automation Dashboard</title>
-    <link rel="stylesheet" href="/static/style.css">
+    <title>Home Automation</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 2rem;
+        }
+        
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        
+        header {
+            background: white;
+            border-radius: 16px;
+            padding: 2rem;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+            margin-bottom: 2rem;
+        }
+        
+        h1 {
+            color: #333;
+            margin-bottom: 0.5rem;
+        }
+        
+        .status {
+            display: inline-block;
+            padding: 0.25rem 0.75rem;
+            border-radius: 12px;
+            font-size: 0.875rem;
+            font-weight: 500;
+        }
+        
+        .status.connected {
+            background: #d4edda;
+            color: #155724;
+        }
+        
+        .status.disconnected {
+            background: #f8d7da;
+            color: #721c24;
+        }
+        
+        .room {
+            margin-bottom: 2rem;
+        }
+        
+        .room-title {
+            color: white;
+            font-size: 1.5rem;
+            margin-bottom: 1rem;
+            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+        }
+        
+        .devices {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 1.5rem;
+        }
+        
+        .device-card {
+            background: white;
+            border-radius: 16px;
+            padding: 1.5rem;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+        }
+        
+        .device-header {
+            margin-bottom: 1.5rem;
+        }
+        
+        .device-name {
+            font-size: 1.5rem;
+            font-weight: 600;
+            color: #333;
+            margin-bottom: 0.25rem;
+        }
+        
+        .device-type {
+            font-size: 0.875rem;
+            color: #666;
+            text-transform: uppercase;
+        }
+        
+        .device-id {
+            font-size: 0.75rem;
+            color: #999;
+            margin-top: 0.25rem;
+            font-family: 'Courier New', monospace;
+        }
+        
+        .device-state {
+            padding: 0.5rem 1rem;
+            background: #f8f9fa;
+            border-radius: 8px;
+            margin: 1rem 0;
+            font-family: 'Courier New', monospace;
+            font-size: 0.875rem;
+        }
+        
+        .state-label {
+            color: #666;
+            font-weight: 500;
+        }
+        
+        .state-value {
+            color: #333;
+            font-weight: 600;
+        }
+        
+        .state-value.on {
+            color: #28a745;
+        }
+        
+        .state-value.off {
+            color: #dc3545;
+        }
+        
+        .controls {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+        }
+        
+        .toggle-button {
+            padding: 0.75rem 1.5rem;
+            border: none;
+            border-radius: 8px;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+            color: white;
+        }
+        
+        .toggle-button.on {
+            background: #28a745;
+        }
+        
+        .toggle-button.on:hover {
+            background: #218838;
+        }
+        
+        .toggle-button.off {
+            background: #6c757d;
+        }
+        
+        .toggle-button.off:hover {
+            background: #5a6268;
+        }
+        
+        .brightness-control {
+            margin-top: 1rem;
+        }
+        
+        .brightness-label {
+            font-size: 0.875rem;
+            color: #666;
+            display: block;
+            margin-bottom: 0.5rem;
+        }
+        
+        .brightness-slider {
+            width: 100%;
+            height: 8px;
+            border-radius: 4px;
+            background: #ddd;
+            outline: none;
+            -webkit-appearance: none;
+        }
+        
+        .brightness-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: #667eea;
+            cursor: pointer;
+        }
+        
+        .brightness-slider::-moz-range-thumb {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: #667eea;
+            cursor: pointer;
+            border: none;
+        }
+        
+        .events {
+            margin-top: 2rem;
+            background: white;
+            border-radius: 16px;
+            padding: 1.5rem;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+        }
+        
+        .events h2 {
+            color: #333;
+            margin-bottom: 1rem;
+            font-size: 1.25rem;
+        }
+        
+        .event-list {
+            max-height: 300px;
+            overflow-y: auto;
+        }
+        
+        .event-item {
+            padding: 0.75rem;
+            border-left: 3px solid #667eea;
+            background: #f8f9fa;
+            margin-bottom: 0.5rem;
+            border-radius: 4px;
+            font-size: 0.875rem;
+        }
+        
+        .event-time {
+            color: #666;
+            font-size: 0.75rem;
+        }
+        
+        .event-data {
+            color: #333;
+            margin-top: 0.25rem;
+            font-family: 'Courier New', monospace;
+        }
+        
+        .empty-state {
+            background: white;
+            border-radius: 16px;
+            padding: 3rem;
+            text-align: center;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+        }
+        
+        .empty-state p {
+            color: #666;
+            margin-bottom: 0.5rem;
+        }
+        
+        .hint {
+            font-size: 0.875rem;
+            color: #999;
+        }
+    </style>
 </head>
 <body>
     <div class="container">
         <header>
             <h1>🏠 Home Automation</h1>
+            <p>Realtime Status: <span class="status disconnected" id="connection-status">Verbinde...</span></p>
         </header>
-
-        <main>
-            {% if rooms %}
-                {% for room in rooms %}
-                <section class="room">
-                    <h2 class="room-title">{{ room.name }}</h2>
-                    
-                    <div class="devices-grid">
-                        {% for device in room.devices %}
-                        <div class="device-tile" data-device-id="{{ device.device_id }}">
-                            <div class="device-header">
-                                <div class="device-icon">{{ device.icon }}</div>
-                                <div class="device-info">
-                                    <h3 class="device-title">{{ device.title }}</h3>
-                                    <p class="device-id">{{ device.device_id }}</p>
-                                </div>
+        
+        {% if rooms %}
+            {% for room in rooms %}
+            <section class="room">
+                <h2 class="room-title">{{ room.name }}</h2>
+                
+                <div class="devices">
+                    {% for device in room.devices %}
+                    <div class="device-card" data-device-id="{{ device.device_id }}">
+                        <div class="device-header">
+                            <div class="device-name">{{ device.icon }} {{ device.title }}</div>
+                            <div class="device-type">
+                                {% if device.type == "light" %}
+                                    Light
+                                    {% if device.features.brightness %}• Dimmbar{% endif %}
+                                {% else %}
+                                    {{ device.type or "Unknown" }}
+                                {% endif %}
                             </div>
+                            <div class="device-id">{{ device.device_id }}</div>
+                        </div>
+                        
+                        <div class="device-state">
+                            <span class="state-label">Status:</span>
+                            <span class="state-value off" id="state-{{ device.device_id }}">off</span>
+                            {% if device.features.brightness %}
+                            <br>
+                            <span class="state-label">Helligkeit:</span>
+                            <span class="state-value" id="brightness-{{ device.device_id }}">50</span>%
+                            {% endif %}
+                        </div>
+                        
+                        {% if device.type == "light" and device.features.power %}
+                        <div class="controls">
+                            <button 
+                                class="toggle-button off" 
+                                id="toggle-{{ device.device_id }}"
+                                onclick="toggleDevice('{{ device.device_id }}')">
+                                Einschalten
+                            </button>
                             
-                            <div class="device-state">
-                                <span id="state-{{ device.device_id }}" class="state-text">—</span>
-                            </div>
-                            
-                            {% if device.type == "light" and device.features.power %}
-                            <div class="device-controls">
-                                <button class="btn btn-on" onclick="setDeviceState('{{ device.device_id }}', 'on')">
-                                    AN
-                                </button>
-                                <button class="btn btn-off" onclick="setDeviceState('{{ device.device_id }}', 'off')">
-                                    AUS
-                                </button>
+                            {% if device.features.brightness %}
+                            <div class="brightness-control">
+                                <label for="brightness-slider-{{ device.device_id }}" class="brightness-label">
+                                    Helligkeit: <span id="brightness-value-{{ device.device_id }}">50</span>%
+                                </label>
+                                <input 
+                                    type="range" 
+                                    class="brightness-slider"
+                                    id="brightness-slider-{{ device.device_id }}" 
+                                    min="0" 
+                                    max="100" 
+                                    value="50"
+                                    oninput="updateBrightnessValue('{{ device.device_id }}', this.value)"
+                                    onchange="setBrightness('{{ device.device_id }}', this.value)">
                             </div>
                             {% endif %}
                         </div>
-                        {% endfor %}
+                        {% endif %}
                     </div>
-                </section>
-                {% endfor %}
-            {% else %}
-                <div class="empty-state">
-                    <p>Keine Räume oder Geräte konfiguriert.</p>
-                    <p class="hint">Prüfe config/layout.yaml und das API-Gateway.</p>
+                    {% endfor %}
                 </div>
-            {% endif %}
-        </main>
-
-        <footer>
-            <p>Home Automation System v0.1.0</p>
-        </footer>
+            </section>
+            {% endfor %}
+        {% else %}
+            <div class="empty-state">
+                <p>Keine Räume oder Geräte konfiguriert.</p>
+                <p class="hint">Prüfe config/layout.yaml und das API-Gateway.</p>
+            </div>
+        {% endif %}
+        
+        <div class="events">
+            <h2>📡 Realtime Events</h2>
+            <div class="event-list" id="event-list">
+                <p style="color: #666; font-size: 0.875rem;">Warte auf Events...</p>
+            </div>
+        </div>
     </div>
-
+    
     <script>
-        // Set device state via API
-        async function setDeviceState(deviceId, power) {
-            const stateSpan = document.getElementById(`state-${deviceId}`);
+        const API_BASE = 'http://localhost:8001';
+        let eventSource = null;
+        let currentState = {};
+        
+        // Initialize device states
+        {% for room in rooms %}
+        {% for device in room.devices %}
+        currentState['{{ device.device_id }}'] = 'off';
+        {% endfor %}
+        {% endfor %}
+        
+        // Toggle device state
+        async function toggleDevice(deviceId) {
+            const newState = currentState[deviceId] === 'on' ? 'off' : 'on';
             
             try {
-                stateSpan.textContent = `⏳ ${power}...`;
-                
-                const response = await fetch(`http://localhost:8001/devices/${deviceId}/set`, {
+                const response = await fetch(`${API_BASE}/devices/${deviceId}/set`, {
                     method: 'POST',
                     headers: {
-                        'Content-Type': 'application/json',
+                        'Content-Type': 'application/json'
                     },
                     body: JSON.stringify({
                         type: 'light',
                         payload: {
-                            power: power
+                            power: newState
                         }
                     })
                 });
                 
-                if (!response.ok) {
-                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+                if (response.ok) {
+                    console.log(`Sent ${newState} command to ${deviceId}`);
+                    addEvent({
+                        action: 'command_sent',
+                        device_id: deviceId,
+                        state: newState
+                    });
                 }
-                
-                const result = await response.json();
-                console.log('Device state set:', deviceId, power, result);
-                
-                stateSpan.textContent = `✓ ${power}`;
-                
-                // Reset to "—" after 2 seconds
-                setTimeout(() => {
-                    stateSpan.textContent = '—';
-                }, 2000);
-                
             } catch (error) {
-                console.error('Error setting device state:', error);
-                stateSpan.textContent = `✗ Error`;
-                
-                // Reset after 3 seconds
-                setTimeout(() => {
-                    stateSpan.textContent = '—';
-                }, 3000);
+                console.error('Failed to toggle device:', error);
             }
         }
+        
+        // Update brightness value display
+        function updateBrightnessValue(deviceId, value) {
+            const valueSpan = document.getElementById(`brightness-value-${deviceId}`);
+            if (valueSpan) {
+                valueSpan.textContent = value;
+            }
+        }
+        
+        // Set brightness
+        async function setBrightness(deviceId, brightness) {
+            try {
+                const response = await fetch(`${API_BASE}/devices/${deviceId}/set`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        type: 'light',
+                        payload: {
+                            brightness: parseInt(brightness)
+                        }
+                    })
+                });
+                
+                if (response.ok) {
+                    console.log(`Sent brightness ${brightness} to ${deviceId}`);
+                    addEvent({
+                        action: 'brightness_set',
+                        device_id: deviceId,
+                        brightness: parseInt(brightness)
+                    });
+                }
+            } catch (error) {
+                console.error('Failed to set brightness:', error);
+            }
+        }
+        
+        // Update device UI
+        function updateDeviceUI(deviceId, power, brightness) {
+            currentState[deviceId] = power;
+            
+            const stateSpan = document.getElementById(`state-${deviceId}`);
+            const toggleButton = document.getElementById(`toggle-${deviceId}`);
+            
+            if (stateSpan) {
+                stateSpan.textContent = power;
+                stateSpan.className = `state-value ${power}`;
+            }
+            
+            if (toggleButton) {
+                if (power === 'on') {
+                    toggleButton.textContent = 'Ausschalten';
+                    toggleButton.className = 'toggle-button on';
+                } else {
+                    toggleButton.textContent = 'Einschalten';
+                    toggleButton.className = 'toggle-button off';
+                }
+            }
+            
+            // Update brightness display and slider
+            if (brightness !== undefined) {
+                const brightnessSpan = document.getElementById(`brightness-${deviceId}`);
+                const brightnessValue = document.getElementById(`brightness-value-${deviceId}`);
+                const brightnessSlider = document.getElementById(`brightness-slider-${deviceId}`);
+                
+                if (brightnessSpan) {
+                    brightnessSpan.textContent = brightness;
+                }
+                if (brightnessValue) {
+                    brightnessValue.textContent = brightness;
+                }
+                if (brightnessSlider) {
+                    brightnessSlider.value = brightness;
+                }
+            }
+        }
+        
+        // Add event to list
+        function addEvent(event) {
+            const eventList = document.getElementById('event-list');
+            
+            // Clear placeholder
+            if (eventList.children.length === 1 && eventList.children[0].tagName === 'P') {
+                eventList.innerHTML = '';
+            }
+            
+            const eventItem = document.createElement('div');
+            eventItem.className = 'event-item';
+            
+            const now = new Date().toLocaleTimeString('de-DE');
+            eventItem.innerHTML = `
+                <div class="event-time">${now}</div>
+                <div class="event-data">${JSON.stringify(event, null, 2)}</div>
+            `;
+            
+            eventList.insertBefore(eventItem, eventList.firstChild);
+            
+            // Keep only last 10 events
+            while (eventList.children.length > 10) {
+                eventList.removeChild(eventList.lastChild);
+            }
+        }
+        
+        // Connect to SSE
+        function connectSSE() {
+            eventSource = new EventSource(`${API_BASE}/realtime`);
+            
+            eventSource.onopen = () => {
+                console.log('SSE connected');
+                document.getElementById('connection-status').textContent = 'Verbunden';
+                document.getElementById('connection-status').className = 'status connected';
+            };
+            
+            eventSource.addEventListener('message', (e) => {
+                const data = JSON.parse(e.data);
+                console.log('SSE message:', data);
+                
+                addEvent(data);
+                
+                // Update device state
+                if (data.type === 'state' && data.device_id) {
+                    if (data.payload) {
+                        updateDeviceUI(
+                            data.device_id, 
+                            data.payload.power, 
+                            data.payload.brightness
+                        );
+                    }
+                }
+            });
+            
+            eventSource.addEventListener('ping', (e) => {
+                console.log('Heartbeat received');
+            });
+            
+            eventSource.onerror = (error) => {
+                console.error('SSE error:', error);
+                document.getElementById('connection-status').textContent = 'Getrennt';
+                document.getElementById('connection-status').className = 'status disconnected';
+                eventSource.close();
+                
+                // Reconnect after 5 seconds
+                setTimeout(connectSSE, 5000);
+            };
+        }
+        
+        // Initialize
+        connectSSE();
+        
+        // Optional: Load initial state from API
+        async function loadDevices() {
+            try {
+                const response = await fetch(`${API_BASE}/devices`);
+                const devices = await response.json();
+                console.log('Loaded devices:', devices);
+            } catch (error) {
+                console.error('Failed to load devices:', error);
+            }
+        }
+        
+        loadDevices();
     </script>
 </body>
 </html>
diff --git a/config/devices.yaml b/config/devices.yaml
index 9ffb8fb..e6f5fec 100644
--- a/config/devices.yaml
+++ b/config/devices.yaml
@@ -38,6 +38,7 @@ devices:
     technology: zigbee2mqtt
     features:
       power: true
+      brightness: true
     topics:
       set: "vendor/test_lampe_3/set"
       state: "vendor/test_lampe_3/state"
