diff --git a/PV_Visu/module.html b/PV_Visu/module.html
index b4aed1a..3b5090a 100644
--- a/PV_Visu/module.html
+++ b/PV_Visu/module.html
@@ -1,465 +1,51 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <meta charset="UTF-8">
-    <script src="/icons.js" crossorigin="anonymous"></script>
+    <meta charset="utf-8">
     <style>
-        :root {
-            --div-height: 23px;
-        }
-
-        ::-webkit-scrollbar {
-            width: 8px;
-        }
-
-        ::-webkit-scrollbar-track {
-            background: transparent;
-        }
-
-        ::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 20px;
-        }
-
-        ::-webkit-scrollbar-thumb:hover {
-            background: #555;
-        }
-
-        .main_container {
-            width: 100%;
-            height: 100%;
-            display: flex;
-            flex-wrap: nowrap;
-            position: relative;
-            box-sizing: border-box;
-        }
-
-        .div1 {
-            width: 20%;
-            box-sizing: border-box;
-        }
-
-        .div1 img {
-            box-sizing: border-box;
-            max-width: 100%;
-            max-height: 100%;
-        }
-
-        .div2 {
-            width: 80%;
-            padding: 5px 5px 5px 2.5%;
-            margin: 0px 0px 0px 2.5%;
-            box-sizing: border-box;
-            border-radius: 0px;
-            border-left: 1px dotted #28cdab;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-evenly;
-        }
-
-        .balkendiagramm {
-            width: 100%;
-            display: flex;
-            position: relative;
-            margin-bottom: 2%;
-            box-sizing: border-box;
-        }
-
-        .balken_links_leistung,
-        .balken_links_durchfluss,
-        .balken_links_luefterdrehzahl,
-        .balken_links_kompressor,
-        .balken_rechts_leistung,
-        .balken_rechts_durchfluss,
-        .balken_rechts_luefterdrehzahl,
-        .balken_rechts_kompressor {
-            height: calc(var(--div-height) + var(--div-height) /5);
-            border-radius: calc(var(--div-height) / 4) 0px 0px calc(var(--div-height) / 4);
-            font-size: 0.9em;
-            transition: width 2s;
-            transition-timing-function: ease;
-        }
-
-        @keyframes gradient_leistung {
-            0% {
-                background-position: 0 0;
-            }
-
-            100% {
-                background-position: -200% 0;
-            }
-        }
-
-        @keyframes gradient_durchfluss {
-            0% {
-                background-position: 0 0;
-            }
-
-            100% {
-                background-position: -200% 0;
-            }
-        }
-
-        @keyframes gradient_luefterdrehzahl {
-            0% {
-                background-position: 0 0;
-            }
-
-            100% {
-                background-position: -200% 0;
-            }
-        }
-
-        @keyframes gradient_kompressor {
-            0% {
-                background-position: 0 0;
-            }
-
-            100% {
-                background-position: -200% 0;
-            }
-        }
-
-        .balken_links_leistung {
-            background: repeating-linear-gradient(to right, red 0%, orange 50%, red 100%);
-            background-size: 200% auto;
-            background-position: 0 100%;
-            animation: gradient_leistung 10s infinite;
-            animation-fill-mode: forwards;
-            animation-timing-function: linear;
-        }
-
-        .balken_links_durchfluss {
-            background: repeating-linear-gradient(to right, #0054ff 0%, #44a4f5 50%, #0054ff 100%);
-            background-size: 200% auto;
-            background-position: 0 100%;
-            animation: gradient_leistung 10s infinite;
-            animation-fill-mode: forwards;
-            animation-timing-function: linear;
-        }
-
-        .balken_links_luefterdrehzahl {
-            background: repeating-linear-gradient(to right, #13b7f2 0%, #99e4ff 50%, #13b7f2 100%);
-            background-size: 200% auto;
-            background-position: 0 100%;
-            animation: gradient_leistung 10s infinite;
-            animation-fill-mode: forwards;
-            animation-timing-function: linear;
-        }
-
-        .balken_links_kompressor {
-            background: repeating-linear-gradient(to right, #990303 0%, #ff0000 50%, #990303 100%);
-            background-size: 200% auto;
-            background-position: 0 100%;
-            animation: gradient_leistung 10s infinite;
-            animation-fill-mode: forwards;
-            animation-timing-function: linear;
-        }
-
-        .balken_links_text {
-            position: absolute;
-            top: 50%;
-            left: 2%;
-            transform: translate(-0%, -50%);
-            color: #fff;
-            z-index: 2;
-            padding: 3px;
-        }
-
-        .balken_rechts {
-            width: 100%;
-            border-radius: calc(var(--div-height) / 4) calc(var(--div-height) / 4);
-            background: linear-gradient(to right, rgba(135, 135, 135, 0.6) 0%, rgba(135, 135, 135, 0.2) 100%);
-            overflow: hidden;
-        }
-
-        @keyframes blink {
-            0% {
-                opacity: 0
-            }
-
-            50% {
-                opacity: 1
-            }
-
-            100% {
-                opacity: 0
-            }
-        }
-
-        .container_daten {
-            display: flex;
-            flex-wrap: nowrap;
-            width: 100%;
-            font-size: 0.9em;
-        }
-
-        .daten_links {
-            margin-right: 20px;
-            border: 0px solid #000;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .daten_rechts {
-            border: 0px solid #000;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .icon {
-            color: #26d4b9;
-            width: 13px;
-        }
-
-        .right-space {
-            padding-right: 2px;
-        }
-
-        .right-padding {
-            padding-right: 15px;
-        }
-
-        #status,
-        #mode {
-            color: gray;
-        }
-
-        .row {
-            display: flex;
-            flex-direction: row;
-        }
-
-        .title {
-            width: 100px;
-        }
-
-        .clickable {
-            cursor: pointer;
-        }
-
-        .status_0 .status-off {
-            color: #26d4b9;
-        }
-
-        .status_3 .status-heating {
-            color: orangered;
-        }
-
-        .status_4 .status-defrost {
-            color: lightskyblue;
-        }
-
-        .status_5 .status-warm-water {
-            color: blue;
-        }
-
-        .mode_0 .mode-normal,
-        .mode_1 .mode-silent,
-        .mode_2 .mode-eco {
-            color: #26d4b9;
-        }
+        html, body { margin: 0; padding: 4px; background: transparent; }
+        .bar-container { width: 100%; background: #eee; border-radius: 4px; overflow: hidden; height: 20px; margin-bottom: 10px; }
+        .bar { height: 100%; float: left; }
+        .bar-cons { background: #4CAF50; }
+        .bar-feed { background: #8BC34A; }
+        .bar-pv { background: #FF9800; }
+        .bar-grid { background: #FF5722; }
+        .label { font-size: 0.9em; margin-bottom: 4px; color: #333; }
     </style>
 </head>
-
 <body>
-    <div class="main_container">
-        <div id="div1" class="div1">
-            <img id="image">
+    Hallo
+    <div id="pv_visu">
+        <div class="label" id="prodLabel"></div>
+        <div class="bar-container">
+            <div class="bar bar-cons" id="barCons"></div>
+            <div class="bar bar-feed" id="barFeed"></div>
         </div>
-        <div class="div2">
-            <div class="row">
-                <b class="title">Status:</b>
-                <div id="status">
-                    <span class="right-padding" onclick="requestAction('Status', 0);">
-                        <span class="status-off clickable">Off</span>
-                    </span>
-                    <span class="right-padding" onclick="requestAction('Status', 3);">
-                        <span class="status-heating clickable">Heating</span>
-                    </span>
-                    <span class="right-padding" onclick="requestAction('Status', 4);">
-                        <span class="status-defrost clickable">Defrost</span>
-                    </span>
-                    <span class="right-padding" onclick="requestAction('Status', 5);">
-                        <span class="status-warm-water clickable">Warm Water</span>
-                    </span>
-                </div>
-            </div>
-            <div class="row">
-                <b class="title">Mode:</b>
-                <div id="mode">
-                    <span class="right-padding" onclick="requestAction('Mode', 0);">
-                        <span class="mode-normal clickable">Normal</span>
-                    </span>
-                    <span class="right-padding" onclick="requestAction('Mode', 1);">
-                        <span class="mode-silent clickable">Silent</span>
-                    </span>
-                    <span class="right-padding" onclick="requestAction('Mode', 2);">
-                        <span class="mode-eco clickable">Eco</span>
-                    </span>
-                </div>
-                <span id="mode"></span>
-            </div>
-            <div class="balkendiagramm">
-                <div class="balken_rechts">
-                    <div class="balken_links_leistung">
-                        <span class="balken_links_text">
-                            <b class="right-space">Power:</b>
-                            <span id="power" class="right-space"></span>
-                            <span>KW</span>
-                        </span>
-                    </div>
-                </div>
-            </div>
-            <div class="balkendiagramm">
-                <div class="balken_rechts">
-                    <div class="balken_links_kompressor">
-                        <span class="balken_links_text">
-                            <b class="right-space">Compressor:</b>
-                            <span id="compressorpower" class="right-space"></span>
-                            <span>Hz</span>
-                        </span>
-                    </div>
-                </div>
-            </div>
-            <div class="balkendiagramm">
-                <div class="balken_rechts">
-                    <div class="balken_links_durchfluss">
-                        <span class="balken_links_text">
-                            <b class="right-space">Flow:</b>
-                            <span id="flow" class="right-space"></span>
-                            <span>l/h</span>
-                        </span>
-                    </div>
-                </div>
-            </div>
-            <div class="balkendiagramm">
-                <div class="balken_rechts">
-                    <div class="balken_links_luefterdrehzahl">
-                        <span class="balken_links_text">
-                            <b class="right-space">Fan Rotations:</b>
-                            <span id="fanrotations" class="right-space"></span>
-                            <span>rpm</span>
-                        </span>
-                    </div>
-                </div>
-            </div>
-            <div class="container_daten">
-                <div class="daten_links">
-                    <div>SPF:</div>
-                    <div>COP:</div>
-                    <div>Consumption:</div>
-                    <div>Temp.:</div>
-                    <div>Heater Rods:</div>
-                </div>
-                <div class="daten_rechts">
-                    <div>
-                        <i class="fa-light fa-house fa-sm icon right-space"></i>
-                        <span id="spf" class="right-padding"></span>
-                        <i class="fa-light fa-fire-flame-curved fa-sm icon right-space"></i>
-                        <span id="spfheating" class="right-padding"></span>
-                        <i class="fa-light fa-droplet fa-sm icon right-space"></i>
-                        <span id="spfwater"></span>
-                    </div>
-                    <div>
-                        <i class="fa-light fa-fire-flame-curved fa-sm icon right-space"></i>
-                        <span id="cop"></span>
-                    </div>
-                    <div>
-                        <i class="fa-light fa-bolt fa-sm icon right-space"></i>
-                        <span id="consumption" class="right-space"></span>
-                        <span class="right-padding">Watt</span>
-                        <i class="fa-light fa-bolt fa-sm icon right-space"></i>
-                        <span class="right-space">Today:</span>
-                        <span id="consumptiontoday" class="right-space"></span>
-                        <span>kWh</span>
-                    </div>
-                    <div>
-                        <i class="fa-light fa-tree fa-sm icon right-space"></i>
-                        <span id="outdoortemperature" class="right-space"></span>
-                        <span class="right-padding">°C</span>
-                        <i class="fa-light fa-droplet fa-sm icon right-space"></i>
-                        <span id="watertemperature" class="right-space"></span>
-                        <span class="right-padding">°C</span>
-                        <i class="fa-light fa-circle-down fa-sm icon right-space"></i>
-                        <span id="returntemperature" class="right-space"></span>
-                        <span class="right-padding">°C</span>
-                        <i class="fa-light fa-circle-up fa-sm icon right-space"></i>
-                        <span id="flowtemperature" class="right-space"></span>
-                        <span>°C</span>
-                    </div>
-                    <div>
-                        <i class="fa-light fa-fan fa-sm icon right-space"></i>
-                        <span class="right-space">HP:</span>
-                        <i id="heaterrodbackupstatus" class="fa-light fa-circle fa-sm icon right-padding"></i></span>
-                        <i class="fa-light fa-droplet fa-sm icon"></i>
-                        <span class="right-space">WW-Storage:</span>
-                        <i id="heaterrodphase1" class="fa-light fa-circle fa-sm icon"></i>
-                        <i id="heaterrodphase2" class="fa-light fa-circle fa-sm icon"></i>
-                        <i id="heaterrodphase3" class="fa-light fa-circle fa-sm icon"></i>
-                    </div>
-                </div>
-            </div>
+        <div class="label" id="consLabel"></div>
+        <div class="bar-container">
+            <div class="bar bar-pv" id="barPV"></div>
+            <div class="bar bar-grid" id="barGrid"></div>
         </div>
     </div>
-    <script type="text/javascript" charset="UTF-8">
-        function handleMessage(message) {
-            const data = JSON.parse(message);
-            const divID = data.Ident.toLowerCase();
-            const value = data.result;
-            const divElement = document.getElementById(divID);
-            if (divElement) {
-                switch (data.Ident) {
-                    case 'Status': {
-                        const statusMapping = {
-                            0: window.assets.img_wp_aus,
-                            3: window.assets.img_wp_heizen,
-                            4: window.assets.img_wp_heizen,
-                            5: window.assets.img_wp_ww,
-                        };
-
-                        let index = data.Value;
-                        if (!statusMapping[index]) {
-                            index = 0;
-                        }
-
-                        divElement.className = 'status_' + data.Value;
-                        document.getElementById('image').src = statusMapping[index];
-                        break;
-                    }
-
-                    case 'Mode':
-                        divElement.className = 'mode_' + data.Value;
-                        break;
-
-                    case 'HeaterRodBackupStatus':
-                    case 'HeaterRodPhase1':
-                    case 'HeaterRodPhase2':
-                    case 'HeaterRodPhase3':
-                        if (data.Value) {
-                            divElement.classList.remove('fa-regular');
-                            divElement.classList.add('fa-light');
-                        }
-                        else {
-                            divElement.classList.remove('fa-light');
-                            divElement.classList.add('fa-regular');
-                        }
-                        break;
-
-                    case 'Power':
-                    case 'CompressorPower':
-                    case 'Flow':
-                    case 'FanRotations':
-                        divElement.textContent = Number.isInteger(data.Value) ? data.Value.toString() : data.Value.toFixed(2);
-                        divElement.parentElement.parentElement.style.width = `${(data.Value / data.Max) * 100}%`;
-                        break;
-
-                    default:
-                        divElement.textContent = Number.isInteger(data.Value) ? data.Value.toString() : data.Value.toFixed(2);
-                        break;
-                }
-            } else {
-                console.error('Ungültiges JSON-Format oder fehlende Daten.');
+    <script>
+        function Apply(data) {
+            document.getElementById('prodLabel').innerText = 'Produktion: ' + data.value.prod + ' kWh';
+            document.getElementById('barCons').style.width  = data.prodCons + '%';
+            document.getElementById('barFeed').style.width  = data.prodFeed + '%';
+            document.getElementById('consLabel').innerText = 'Verbrauch: ' + data.value.cons + ' kWh';
+            document.getElementById('barPV').style.width    = data.consPV + '%';
+            document.getElementById('barGrid').style.width  = data.consGrid + '%';
+        }
+        function handleMessage(msg) {
+            try {
+                var data = (typeof msg === 'string') ? JSON.parse(msg) : msg;
+                Apply(data);
+            } catch(e) {
+                console.error('PV_Visu handleMessage error:', e, msg);
             }
         }
-    </script>
\ No newline at end of file
+        // Bind to HTML-SDK
+        if (typeof registerMessageHandler === 'function') {
+            registerMessageHandler(handleMessage);
+        }
+    </script>
diff --git a/PV_Visu/module.php b/PV_Visu/module.php
index 56a660f..66df817 100644
--- a/PV_Visu/module.php
+++ b/PV_Visu/module.php
@@ -14,7 +14,7 @@ class PV_Visu extends IPSModule
         $this->RegisterPropertyInteger('VarFeedIn', 0);
         $this->RegisterPropertyInteger('VarGrid', 0);
         // HTML-SDK Tile aktivieren
-        $this->SetVisualizationType(3);
+        $this->SetVisualizationType(1);
     }
 
     public function ApplyChanges(): void
