diff --git a/widget.html b/widget.html
index e69de29..8e9e78c 100644
--- a/widget.html
+++ b/widget.html
@@ -0,0 +1,260 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Check_MK Widget</title>
+    <style>
+        :root {
+            --ok-color: #2ecc71;
+            --warning-color: #f39c12;
+            --critical-color: #e74c3c;
+            --unknown-color: #95a5a6;
+        }
+        
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f8f8f8;
+            color: #333;
+        }
+        
+        .widget-container {
+            width: 100%;
+            max-width: 320px;
+            margin: 0 auto;
+            padding: 10px;
+        }
+        
+        .widget {
+            background-color: #fff;
+            border-radius: 15px;
+            overflow: hidden;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+        
+        .widget-header {
+            background-color: #1a1a1a;
+            color: white;
+            padding: 12px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .widget-title {
+            font-weight: 600;
+            font-size: 16px;
+            margin: 0;
+        }
+        
+        .widget-refresh {
+            font-size: 12px;
+            opacity: 0.7;
+        }
+        
+        .status-summary {
+            display: flex;
+            padding: 15px;
+            justify-content: space-between;
+            border-bottom: 1px solid #eee;
+        }
+        
+        .status-box {
+            text-align: center;
+            flex: 1;
+        }
+        
+        .status-count {
+            font-size: 24px;
+            font-weight: 700;
+            margin-bottom: 2px;
+        }
+        
+        .status-label {
+            font-size: 12px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            opacity: 0.7;
+        }
+        
+        .ok { color: var(--ok-color); }
+        .warning { color: var(--warning-color); }
+        .critical { color: var(--critical-color); }
+        .unknown { color: var(--unknown-color); }
+        
+        .status-list {
+            padding: 0;
+            margin: 0;
+            list-style: none;
+            max-height: 300px;
+            overflow-y: auto;
+        }
+        
+        .status-item {
+            padding: 12px 15px;
+            border-bottom: 1px solid #eee;
+            display: flex;
+            justify-content: space-between;
+        }
+        
+        .status-item:last-child {
+            border-bottom: none;
+        }
+        
+        .host-info {
+            flex: 3;
+        }
+        
+        .host-name {
+            font-weight: 600;
+            margin-bottom: 4px;
+        }
+        
+        .service-name {
+            font-size: 13px;
+            opacity: 0.8;
+        }
+        
+        .status-indicator {
+            flex: 1;
+            text-align: right;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+        }
+        
+        .status-dot {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            display: inline-block;
+            margin-left: 6px;
+        }
+        
+        .dot-ok { background-color: var(--ok-color); }
+        .dot-warning { background-color: var(--warning-color); }
+        .dot-critical { background-color: var(--critical-color); }
+        .dot-unknown { background-color: var(--unknown-color); }
+    </style>
+</head>
+<body>
+    <div class="widget-container">
+        <div class="widget">
+            <div class="widget-header">
+                <h1 class="widget-title">Check_MK Monitor</h1>
+                <span class="widget-refresh">Aktualisiert: 10:30</span>
+            </div>
+            
+            <div class="status-summary">
+                <div class="status-box">
+                    <div class="status-count ok">12</div>
+                    <div class="status-label">OK</div>
+                </div>
+                <div class="status-box">
+                    <div class="status-count warning">3</div>
+                    <div class="status-label">Warnung</div>
+                </div>
+                <div class="status-box">
+                    <div class="status-count critical">1</div>
+                    <div class="status-label">Kritisch</div>
+                </div>
+                <div class="status-box">
+                    <div class="status-count unknown">0</div>
+                    <div class="status-label">Unbekannt</div>
+                </div>
+            </div>
+            
+            <ul class="status-list">
+                <li class="status-item">
+                    <div class="host-info">
+                        <div class="host-name">web-server-01</div>
+                        <div class="service-name">HTTP Service</div>
+                    </div>
+                    <div class="status-indicator">
+                        OK <span class="status-dot dot-ok"></span>
+                    </div>
+                </li>
+                <li class="status-item">
+                    <div class="host-info">
+                        <div class="host-name">db-server-01</div>
+                        <div class="service-name">MySQL</div>
+                    </div>
+                    <div class="status-indicator">
+                        OK <span class="status-dot dot-ok"></span>
+                    </div>
+                </li>
+                <li class="status-item">
+                    <div class="host-info">
+                        <div class="host-name">app-server-02</div>
+                        <div class="service-name">Disk Space</div>
+                    </div>
+                    <div class="status-indicator warning">
+                        Warnung <span class="status-dot dot-warning"></span>
+                    </div>
+                </li>
+                <li class="status-item">
+                    <div class="host-info">
+                        <div class="host-name">cdn-server-01</div>
+                        <div class="service-name">CPU Load</div>
+                    </div>
+                    <div class="status-indicator critical">
+                        Kritisch <span class="status-dot dot-critical"></span>
+                    </div>
+                </li>
+                <li class="status-item">
+                    <div class="host-info">
+                        <div class="host-name">mail-server-01</div>
+                        <div class="service-name">SMTP Service</div>
+                    </div>
+                    <div class="status-indicator">
+                        OK <span class="status-dot dot-ok"></span>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+    
+    <script>
+        // Hier würde in einer realen Implementierung der Code für die API-Verbindung zu Check_MK stehen
+        // Beispiel für eine Abruffunktion:
+        
+        /*
+        async function fetchCheckMKData() {
+            try {
+                const response = await fetch('https://your-checkmk-server/api/endpoint', {
+                    method: 'GET',
+                    headers: {
+                        'Authorization': 'Bearer your-api-token',
+                        'Content-Type': 'application/json'
+                    }
+                });
+                
+                if (!response.ok) {
+                    throw new Error('Netzwerkantwort war nicht ok');
+                }
+                
+                const data = await response.json();
+                updateWidget(data);
+            } catch (error) {
+                console.error('Fehler beim Abrufen der Check_MK-Daten:', error);
+            }
+        }
+        
+        function updateWidget(data) {
+            // Hier würden die DOM-Elemente mit den neuen Daten aktualisiert werden
+            // ...
+            
+            // Zeitstempel aktualisieren
+            document.querySelector('.widget-refresh').textContent = 'Aktualisiert: ' + new Date().toLocaleTimeString();
+        }
+        
+        // Initial und dann alle 5 Minuten aktualisieren
+        fetchCheckMKData();
+        setInterval(fetchCheckMKData, 5 * 60 * 1000);
+        */
+    </script>
+</body>
+</html>
\ No newline at end of file
