diff --git a/Energy_Pie/module.html b/Energy_Pie/module.html
index d5cd6c7..50516e0 100644
--- a/Energy_Pie/module.html
+++ b/Energy_Pie/module.html
@@ -1,12 +1,117 @@
+<div style="padding:12px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;">
+  <div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center;">
+    <label style="display:flex;gap:6px;align-items:center;">
+      <span>Zeitraum</span>
+      <select id="range">
+        <option value="day">Tag</option>
+        <option value="week">Woche (Mo–So)</option>
+        <option value="month">Monat</option>
+        <option value="total">Gesamt</option>
+      </select>
+    </label>
+
+    <label style="display:flex;gap:6px;align-items:center;">
+      <span>Datum</span>
+      <input id="date" type="date" />
+    </label>
+
+    <button id="prev" type="button">◀</button>
+    <button id="today" type="button">Heute</button>
+    <button id="next" type="button">▶</button>
+  </div>
+
+  <div id="period" style="margin-top:10px;font-size:12px;opacity:0.75;"></div>
+
+  <div style="margin-top:10px;display:flex;flex-direction:column;gap:8px;max-width:520px;">
+    <div style="font-weight:600;">Werte</div>
+    <div id="values" style="display:flex;flex-direction:column;gap:6px;"></div>
+  </div>
+</div>
+
 <script>
-  // WICHTIG: global definieren
+  const elRange  = document.getElementById('range');
+  const elDate   = document.getElementById('date');
+  const elPrev   = document.getElementById('prev');
+  const elToday  = document.getElementById('today');
+  const elNext   = document.getElementById('next');
+  const elValues = document.getElementById('values');
+  const elPeriod = document.getElementById('period');
+
+  // Range ändern -> sofort rechnen
+  elRange.addEventListener('change', () => requestAction('SetRange', elRange.value));
+
+  // Datum ändern -> sofort rechnen (input + change, mit kleinem debounce)
+  let dateTimer = null;
+  function pushDateNow() {
+    if (dateTimer) clearTimeout(dateTimer);
+    dateTimer = setTimeout(() => requestAction('SetDate', elDate.value), 80);
+  }
+  elDate.addEventListener('input',  pushDateNow);
+  elDate.addEventListener('change', pushDateNow);
+
+  // Navigation
+  elPrev.addEventListener('click',  () => requestAction('Prev', 1));
+  elToday.addEventListener('click', () => requestAction('Today', 1));
+  elNext.addEventListener('click',  () => requestAction('Next', 1));
+
+  // WICHTIG: global, damit Symcon es sicher findet
   window.handleMessage = function (data) {
-    document.body.insertAdjacentHTML(
-      'beforeend',
-      `<pre style="margin-top:10px;">HANDLEMESSAGE:\n${JSON.stringify(data, null, 2)}</pre>`
-    );
+    if (!data) return;
+
+    if (data.range) elRange.value = data.range;
+    if (data.date)  elDate.value  = data.date;
+
+    const isTotal = (data.range === 'total');
+    elDate.disabled = isTotal;
+
+    // Zeitraum-Text
+    if (data.tStart && data.tEnd) {
+      const s = new Date(data.tStart * 1000);
+      const e = new Date(data.tEnd   * 1000);
+      elPeriod.textContent = isTotal
+        ? 'Zeitraum: Gesamt'
+        : `Zeitraum: ${fmtDateTime(s)} – ${fmtDateTime(e)}`;
+    } else {
+      elPeriod.textContent = '';
+    }
+
+    // Nur die 4 gewünschten Werte anzeigen (fixe Reihenfolge)
+    renderValues(data.values || {});
   };
 
-  // Beim Laden sofort Test anfordern
-  setTimeout(() => requestAction('Refresh', 1), 300);
+  function renderValues(values) {
+    const order = ['Produktion', 'Einspeisung', 'Netz', 'Hausverbrauch'];
+
+    elValues.innerHTML = order.map((k) => {
+      const v = values?.[k];
+      const val = (+v || 0);
+      return `
+        <div style="display:flex;justify-content:space-between;gap:12px;padding:8px 10px;border:1px solid rgba(255,255,255,0.15);border-radius:10px;">
+          <div>${escapeHtml(k)}</div>
+          <div style="white-space:nowrap;font-variant-numeric:tabular-nums;">${val.toFixed(2)} kWh</div>
+        </div>
+      `;
+    }).join('');
+  }
+
+  function fmtDateTime(d) {
+    const yyyy = d.getFullYear();
+    const mm = String(d.getMonth() + 1).padStart(2,'0');
+    const dd = String(d.getDate()).padStart(2,'0');
+    const hh = String(d.getHours()).padStart(2,'0');
+    const mi = String(d.getMinutes()).padStart(2,'0');
+    return `${dd}.${mm}.${yyyy} ${hh}:${mi}`;
+  }
+
+  function escapeHtml(s) {
+    return String(s)
+      .replaceAll('&','&amp;')
+      .replaceAll('<','&lt;')
+      .replaceAll('>','&gt;')
+      .replaceAll('"','&quot;')
+      .replaceAll("'",'&#039;');
+  }
+
+  // Beim Laden direkt einmal Werte anfordern
+  setTimeout(() => requestAction('Refresh', 1), 200);
 </script>
diff --git a/Energy_Pie/module.php b/Energy_Pie/module.php
index 63b916f..36cb3b7 100644
--- a/Energy_Pie/module.php
+++ b/Energy_Pie/module.php
@@ -95,11 +95,7 @@ class Energy_Pie extends IPSModule
      */
 private function RecalculateAndPush(): void
 {
-    $this->UpdateVisualizationValue(json_encode([
-    'test' => 'kommt an',
-    'time' => date('H:i:s')
-    ]));
-    return;
+
 
 
     $range = $this->ReadAttributeString(self::ATTR_RANGE);