diff --git a/PV_Visu/module.html b/PV_Visu/module.html
index 3b5090a..043d0d5 100644
--- a/PV_Visu/module.html
+++ b/PV_Visu/module.html
@@ -14,38 +14,203 @@
     </style>
 </head>
 <body>
-    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 class="main_container">
+        <div id="div1" class="div1">
+            <img id="image">
         </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 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>
     </div>
-    <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 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.');
             }
         }
-        // Bind to HTML-SDK
-        if (typeof registerMessageHandler === 'function') {
-            registerMessageHandler(handleMessage);
-        }
-    </script>
+    </script>
\ No newline at end of file
