diff --git a/README.md b/README.md
index 0e4f3b8..c666720 100644
--- a/README.md
+++ b/README.md
@@ -18,3 +18,10 @@
 
 ### von hier aus ist nun auch eine möglichkeit mit echtem SQL server sqlite oder mongoDB möglich, da dieser server sowohl selbst als sql server fungieren kann sqlite dateien sind hier sowieso kein problem und https:// verbindungen sind für echtes python auch kein problem mehr.
 
+## Mögliche Daten zum Speichern und wiedergeben:
+### welcher nutzer hat wann wasser nachgefüllt
+### welcher nutzer hat wann Bohnen nachgefüllt
+### welcher nutzer hat wann einen kaffee bestellt
+### welcher nutzer hat wann die maschine eingeschlatet
+### 
+
diff --git a/routes/unsecure_routes.py b/routes/unsecure_routes.py
index 8bc67d3..4b2ce5d 100644
--- a/routes/unsecure_routes.py
+++ b/routes/unsecure_routes.py
@@ -25,3 +25,6 @@ def fetch_command():
         pending_command = None
         return jsonify({'befehl': cmd})
     return jsonify({'befehl': None})
+# @unsecure.route('/test')
+# def test():
+#     return render_template('test.html')
diff --git a/server.py b/server.py
index ae50e7b..6f7628f 100644
--- a/server.py
+++ b/server.py
@@ -1,11 +1,33 @@
 
 from flask import Flask
+from flask_socketio import SocketIO, emit
+import threading
+import time
 from routes.unsecure_routes import unsecure
 
 app = Flask(__name__, static_url_path='/unsecure/static')
+# socketio = SocketIO(app, cors_allowed_origins="*")
+
+# data = {
+#     "test": 1,
+#     "status": "online",
+#     "counter": 0
+# }
+
+# def monitor_changes():
+#     while True:
+#         time.sleep(5)  # alle 5 Sekunden neue Daten senden
+#         data["test"] += 1
+#         data["counter"] += 5
+#         data["status"] = "busy" if data["counter"] % 2 == 0 else "idle"
+
+#         print("Neue Daten gesendet:", data)
+#         socketio.emit('update_data', data)
+
 
 # Blueprint registrieren
 app.register_blueprint(unsecure)
 
 if __name__ == '__main__':
+    # threading.Thread(target=monitor_changes).start()
     app.run(host='0.0.0.0', port=3060)
diff --git a/static/style.css b/static/style.css
index 5b8b303..83ba180 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,12 +1,209 @@
-body {
-    font-family: sans-serif;
-    padding: 2rem;
-    background-color: #f4f4f4;
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
 }
 
-form {
-    background: #fff;
-    padding: 1rem;
-    border-radius: 8px;
-    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+body {
+    font-family: Arial, sans-serif;
+    background: #f7f7f7;
+    color: #333;
 }
+
+/* Header oben, volle Breite */
+header {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #444;
+    color: #fff;
+    padding: 15px 30px;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+}
+
+.site-title {
+    font-size: 1.5em;
+    font-weight: bold;
+}
+.site-title:hover {
+    text-decoration: none;
+    color: #fff;
+    cursor: pointer;
+}
+
+.user-actions {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.logout {
+    background: #e74c3c;
+    color: white;
+    padding: 6px 12px;
+    border-radius: 6px;
+    text-decoration: none;
+    font-weight: bold;
+    transition: background 0.3s;
+}
+
+.logout:hover {
+    background: #c0392b;
+    cursor: pointer;
+}
+
+.main-container {
+    display: flex;
+    margin: 30px;
+    gap: 30px;
+}
+
+.left {
+    flex: 3;
+    display: flex;
+    flex-direction: column;
+    gap: 25px;
+    height: 86vh;  
+}
+
+.right {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    height: 86vh;   
+    overflow-y: hidden;
+}
+
+/* Infozeile größer */
+.info {
+    background: #ddd;
+    height: 120px; 
+    display: flex;
+    align-items: center;
+    padding: 0 20px;
+    border-radius: 6px;
+    font-size: 1.2em;
+}
+
+/* Großer Button */
+.action-button {
+    background: #3498db;
+    color: white;
+    padding: 10px;
+    text-align: center;
+    border-radius: 8px;
+    font-weight: bold;
+    font-size: 30px;
+    cursor: pointer;
+    transition: background 0.3s;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.action-button:hover {
+    background: #2980b9;
+    cursor: pointer;
+}
+
+/* Grid für 6 Buttons */
+.button-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 30px;
+    max-height: 62vh;
+    overflow-y: auto;
+}
+
+.grid-button {
+    flex: 1 1 calc(50% - 15px);
+    background: #95a5a6;
+    color: white;
+    height: 23vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background 0.3s;
+    position: relative;
+}
+
+.grid-button:hover {
+    background: #7f8c8d;
+    cursor: pointer;
+}
+/* Rahmen + Titel für den rechten Block */
+.stats-box {
+    border: 2px solid #000;
+    padding: 20px;
+    border-radius: 10px;
+    background: #f0f0f0;
+    overflow-y: auto;
+}
+
+.stats-title {
+    font-size: 1.3em;
+    margin-bottom: 10px;
+    font-weight: bold;
+    color: #111;
+}
+
+/* Rechte Seite mit klickbaren Feldern */
+
+.clickable {
+    position: relative;
+    width: 100%;
+    border-radius: 10px;
+    background: #2ecc71;
+    font-family: Arial, sans-serif;
+    margin-bottom: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: rgb(0, 0, 0);
+    flex: none;
+    height: 25vh;
+    transition: background 0.3s;
+}
+
+
+.clickable:hover {
+    background: #27ae60;
+    cursor: pointer;
+}
+.clickable .top-left-text {
+    position: absolute;
+    top: 10px;
+    left: 12px;
+    font-size: 20px;
+    color: #ff0000;
+}
+
+.clickable .center-number {
+    font-size: 48px;
+    font-weight: bold;
+    color: #222;
+}
+.grid-button .top-left-text {
+    position: absolute;
+    top: 10px;
+    left: 12px;
+    font-size: 20px;
+    color: #ff0000;
+}
+.grid-button .center-number {
+    margin-top: 40px;
+    width: 100%;
+    height: 80%;
+    font-size: 48px;
+    font-weight: bold;
+    color: #222;
+    text-align: center;
+}
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 7921d7e..99cd22d 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,21 +1,84 @@
+
 <!DOCTYPE html>
 <html lang="de">
 <head>
     <meta charset="UTF-8">
-    <title>ESP Steuerung</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>gimmiCoffee</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
 <body>
-    <h1>ESP8266 Fernsteuerung</h1>
+    <header>
+        <div class="site-title">gimmiCoffee</div>
+        <div class="user-actions">
+            <span class="username">Max Mustermann</span>
+            <a href="/logout" class="logout">Logout</a>
+        </div>
+    </header>
 
-    <form id="befehlForm">
-        <label for="befehl">Befehl:</label>
-        <input type="text" id="befehl" name="befehl" required>
-        <button type="submit">Senden</button>
-    </form>
+    <main class="main-container">
 
-    <p id="status"></p>
+        <section class="left">
+            <div class="info">ESP-Conn Infos</div>
+            <div class="action-button"> MAKE ME A COFFEE...</div>
+            <div class="button-grid">
+                <div class="grid-button">
+                    <div class="top-left-text">Maschiene</div>
+                    <div class="center-number">AUS</div>
+                </div>
+                <div class="grid-button">
+                    <div class="top-left-text">Maschiene</div>
+                    <div class="center-number">Nicht Bereit</div>
+                </div>
+                <div class="grid-button">
+                    <div class="top-left-text">irgendwas kommt hier nocht</div>
+                    <div class="center-number">XXX</div>
+                </div>
+                <div class="grid-button">
+                    <div class="top-left-text">Fehler</div>
+                    <div class="center-number">Wasser leer?</div>
+                </div>
+                <div class="grid-button">
+                    <div class="top-left-text">Wasser</div>
+                    <div class="center-number">Aufgefüllt</div>
+                </div>
+                <div class="grid-button">
+                    <div class="top-left-text">Bohnen</div>
+                    <div class="center-number">Nachgefüllt</div>
+                </div>
+            </div>
+        </section>
 
-    <script src="{{ url_for('static', filename='script.js') }}"></script>
+        <section class="right stats-box">
+            <h2 class="stats-title">Statistiken</h2>
+            <div class="clickable">
+                <div class="top-left-text">Coffee made</div>
+                <div class="center-number">XXX</div>
+            </div>
+            <div class="clickable">
+                <div class="top-left-text">Bohnen Füllstand</div>
+                <div class="center-number">XX%</div>
+            </div>
+            <div class="clickable">
+                <div class="top-left-text">Wasser Füllstand</div>
+                <div class="center-number">XX%</div>
+            </div>
+            <div class="clickable">
+                <div class="top-left-text">Bohnen nachgefüllt</div>
+                <div class="center-number">XX</div>
+            </div>
+            <div class="clickable">
+                <div class="top-left-text">Wasser nachgefüllt</div>
+                <div class="center-number">XX</div>
+            </div>
+        </section>
+        
+    </main>
 </body>
-</html>
\ No newline at end of file
+</html>
+
+
+
+
+
+   <!--<script src="{{ url_for('static', filename='script.js') }}"></script>--> 
diff --git a/templates/test.html b/templates/test.html
new file mode 100644
index 0000000..bdf887d
--- /dev/null
+++ b/templates/test.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <title>Live Update</title>
+    <script src="https://cdn.socket.io/4.6.1/socket.io.min.js"></script>
+</head>
+<body>
+    <h2>Daten vom Server</h2>
+    <p><strong>Test:</strong> <span id="test"></span></p>
+    <p><strong>Status:</strong> <span id="status"></span></p>
+    <p><strong>Counter:</strong> <span id="counter"></span></p>
+
+    <script>
+        const socket = io();
+
+        socket.on('update_data', (data) => {
+            document.getElementById('test').textContent = data.test;
+            document.getElementById('status').textContent = data.status;
+            document.getElementById('counter').textContent = data.counter;
+            console.log('Neue Daten:', data);
+        });
+    </script>
+</body>
+</html>