diff --git a/tools/esp8266/app.cpp b/tools/esp8266/app.cpp
index 05e46268..8f18b1df 100644
--- a/tools/esp8266/app.cpp
+++ b/tools/esp8266/app.cpp
@@ -518,8 +518,8 @@ void app::showLiveData(void) {
 #ifdef LIVEDATA_VISUALIZED
             uint8_t modNum, pos;
             switch(iv->type) {
-                default:           modNum = 1; break;
-                case INV_TYPE_1CH:
+                default:
+                case INV_TYPE_1CH: modNum = 1; break;
                 case INV_TYPE_2CH: modNum = 2; break;
                 case INV_TYPE_4CH: modNum = 4; break;
             }
diff --git a/tools/esp8266/defines.h b/tools/esp8266/defines.h
index fee7211b..42ffc784 100644
--- a/tools/esp8266/defines.h
+++ b/tools/esp8266/defines.h
@@ -16,7 +16,7 @@
 //-------------------------------------
 #define VERSION_MAJOR       0
 #define VERSION_MINOR       4
-#define VERSION_PATCH       2
+#define VERSION_PATCH       3
 
 
 //-------------------------------------
diff --git a/tools/esp8266/hmDefines.h b/tools/esp8266/hmDefines.h
index 15b55ea1..4cba1791 100644
--- a/tools/esp8266/hmDefines.h
+++ b/tools/esp8266/hmDefines.h
@@ -81,14 +81,16 @@ const byteAssign_t hm2chAssignment[] = {
     { FLD_UDC, UNIT_V,   CH2,  8, 2, 10   },
     { FLD_IDC, UNIT_A,   CH2, 10, 2, 100  },
     { FLD_PDC, UNIT_W,   CH2, 12, 2, 10   },
-    { FLD_YD,  UNIT_WH,  CH2, 18, 2, 1    },
-    { FLD_YT,  UNIT_KWH, CH2, 24, 4, 1000 },
+    { FLD_YD,  UNIT_WH,  CH2, 24, 2, 1    },
+    { FLD_YT,  UNIT_KWH, CH2, 18, 4, 1000 },
 
     { FLD_UAC, UNIT_V,   CH0, 26, 2, 10   },
     { FLD_IAC, UNIT_A,   CH0, 34, 2, 10   },
     { FLD_PAC, UNIT_W,   CH0, 30, 2, 10   },
     { FLD_F,   UNIT_HZ,  CH0, 28, 2, 100  },
-    { FLD_T,   UNIT_C,   CH0, 38, 2, 10   }
+    { FLD_T,   UNIT_C,   CH0, 38, 2, 10   },
+    { FLD_YD,  UNIT_WH,  CH0, CALC_YD_CH0,   0, CMD_CALC },
+    { FLD_YT,  UNIT_KWH, CH0, CALC_YT_CH0,   0, CMD_CALC }
 
 };
 #define HM2CH_LIST_LEN     (sizeof(hm2chAssignment) / sizeof(byteAssign_t))
diff --git a/tools/esp8266/html/h/style_css.h b/tools/esp8266/html/h/style_css.h
index b64ceeb6..082d4769 100644
--- a/tools/esp8266/html/h/style_css.h
+++ b/tools/esp8266/html/h/style_css.h
@@ -1,4 +1,4 @@
 #ifndef __STYLE_CSS_H__
 #define __STYLE_CSS_H__
-const char style_css[] PROGMEM = "h1 {margin:0;padding:20pt;font-size:22pt;color:#fff;background-color:#006ec0;display:block;text-transform:uppercase;}html, body {font-family:Arial;margin:0;padding:0;}p {text-align:justify;font-size:13pt;}.des {margin-top:35px;font-size:13pt;color:#006ec0;}.subdes {font-size:12pt;color:#006ec0;margin-left:7px;}a:link, a:visited {text-decoration:none;font-size:13pt;color:#006ec0;}a:hover, a:focus {color:#f00;}a.erase {background-color:#006ec0;color:#fff;padding:7px;display:inline-block;margin-top:30px;float:right;}#content {padding:15px 15px 60px 15px;}#footer {position:fixed;bottom:0px;height:45px;background-color:#006ec0;width:100%;border-top:5px solid #fff;}#footer p, #footer a {color:#fff;padding:0 7px 0 7px;font-size:10pt !important;}div.content {background-color:#fff;padding-bottom:65px;overflow:auto;}input, select {padding:7px;font-size:13pt;}input.text, select {width:70%;box-sizing:border-box;margin-bottom:10px;border:1px solid #ccc;}input.btn {background-color:#006ec0;color:#fff;border:0px;float:right;margin:10px 0 30px;text-transform:uppercase;}input.cb {margin-bottom:20px;}label {width:20%;display:inline-block;font-size:12pt;padding-right:10px;margin-left:10px;}.left {float:left;}.right {float:right;}div.ch-iv {width:100%;background-color:#32b004;display:inline-block;margin-bottom:20px;padding-bottom:20px;overflow:auto;}div.ch {width:250px;min-height:420px;background-color:#006ec0;display:inline-block;margin-right:20px;margin-bottom:20px;overflow:auto;padding-bottom:20px;}div.ch .value, div.ch .info, div.ch .head, div.ch-iv  .value, div.ch-iv .info, div.ch-iv .head {color:#fff;display:block;width:100%;text-align:center;}.subgrp {float:left;width:250px;}div.ch .unit, div.ch-iv .unit {font-size:19px;margin-left:10px;}div.ch .value, div.ch-iv .value {margin-top:20px;font-size:30px;}div.ch .info, div.ch-iv .info {margin-top:3px;font-size:10px;}div.ch .head {background-color:#003c80;padding:10px 0 10px 0;}div.ch-iv .head {background-color:#1c6800;padding:10px 0 10px 0;}div.iv {max-width:1060px;}div.ch:last-child {margin-right:0px !important;}#note {margin:50px 10px 10px 10px;padding-top:10px;width:100%;border-top:1px solid #bbb;}";
+const char style_css[] PROGMEM = "h1 {margin:0;padding:20pt;font-size:22pt;color:#fff;background-color:#006ec0;display:block;text-transform:uppercase;}html, body {font-family:Arial;margin:0;padding:0;}p {text-align:justify;font-size:13pt;}.des {margin-top:35px;font-size:13pt;color:#006ec0;}.subdes {font-size:12pt;color:#006ec0;margin-left:7px;}a:link, a:visited {text-decoration:none;font-size:13pt;color:#006ec0;}a:hover, a:focus {color:#f00;}a.erase {background-color:#006ec0;color:#fff;padding:7px;display:inline-block;margin-top:30px;float:right;}#content {padding:15px 15px 60px 15px;}#footer {position:fixed;bottom:0px;height:45px;background-color:#006ec0;width:100%;border-top:5px solid #fff;}#footer p, #footer a {color:#fff;padding:0 7px 0 7px;font-size:10pt !important;}div.content {background-color:#fff;padding-bottom:65px;overflow:auto;}input, select {padding:7px;font-size:13pt;}input.text, select {width:70%;box-sizing:border-box;margin-bottom:10px;border:1px solid #ccc;}input.btn {background-color:#006ec0;color:#fff;border:0px;float:right;margin:10px 0 30px;text-transform:uppercase;}input.cb {margin-bottom:20px;}label {width:20%;display:inline-block;font-size:12pt;padding-right:10px;margin-left:10px;}.left {float:left;}.right {float:right;}div.ch-iv {width:100%;background-color:#32b004;display:inline-block;margin-bottom:20px;padding-bottom:20px;overflow:auto;}div.ch {width:250px;min-height:420px;background-color:#006ec0;display:inline-block;margin-right:20px;margin-bottom:20px;overflow:auto;padding-bottom:20px;}div.ch .value, div.ch .info, div.ch .head, div.ch-iv  .value, div.ch-iv .info, div.ch-iv .head {color:#fff;display:block;width:100%;text-align:center;}.subgrp {float:left;width:250px;}div.ch .unit, div.ch-iv .unit {font-size:19px;margin-left:10px;}div.ch .value, div.ch-iv .value {margin-top:20px;font-size:30px;}div.ch .info, div.ch-iv .info {margin-top:3px;font-size:10px;}div.ch .head {background-color:#003c80;padding:10px 0 10px 0;}div.ch-iv .head {background-color:#1c6800;padding:10px 0 10px 0;}div.iv {max-width:1060px;}div.ch:last-child {margin-right:0px !important;}#note {margin:50px 10px 10px 10px;padding-top:10px;width:100%;border-top:1px solid #bbb;}@media(max-width:500px) {div.ch .unit, div.ch-iv .unit {font-size:18px;}div.ch {width:170px;min-height:100px;}.subgrp {width:180px;}}";
 #endif /*__STYLE_CSS_H__*/
diff --git a/tools/esp8266/html/style.css b/tools/esp8266/html/style.css
index 89d8db7f..e245c340 100644
--- a/tools/esp8266/html/style.css
+++ b/tools/esp8266/html/style.css
@@ -188,3 +188,18 @@ div.ch:last-child {
     width: 100%;
     border-top: 1px solid #bbb;
 }
+
+@media(max-width: 500px) {
+    div.ch .unit, div.ch-iv .unit {
+        font-size: 18px;
+    }
+
+    div.ch {
+        width: 170px;
+        min-height: 100px;
+    }
+
+    .subgrp {
+        width: 180px;
+    }
+}