diff --git a/tools/esp8266/defines.h b/tools/esp8266/defines.h
index fa6ee3f4..1cbe3d88 100644
--- a/tools/esp8266/defines.h
+++ b/tools/esp8266/defines.h
@@ -13,7 +13,7 @@
 //-------------------------------------
 #define VERSION_MAJOR       0
 #define VERSION_MINOR       5
-#define VERSION_PATCH       22
+#define VERSION_PATCH       23
 
 
 //-------------------------------------
diff --git a/tools/esp8266/html/api.js b/tools/esp8266/html/api.js
index d628ad17..a959ed74 100644
--- a/tools/esp8266/html/api.js
+++ b/tools/esp8266/html/api.js
@@ -8,6 +8,15 @@ function toggle(id, hide) {
         elm.classList.remove('hide');
 }
 
+
+function toggle(id) {
+    var e = document.getElementById(id);
+    if(!e.classList.contains("hide"))
+        e.classList.add("hide");
+    else
+        e.classList.remove('hide');
+}
+
 function getAjax(url, ptr, method="GET", json=null) {
     var xhr = new XMLHttpRequest();
     if(xhr != null) {
@@ -98,7 +107,8 @@ function link(dst, text, target=null) {
     var a = document.createElement('a');
     var t = document.createTextNode(text);
     a.href = dst;
-    a.target = target;
+    if(null != target)
+        a.target = target;
     a.appendChild(t);
     return a;
 }
diff --git a/tools/esp8266/html/index.html b/tools/esp8266/html/index.html
index 01e21cd8..0576494c 100644
--- a/tools/esp8266/html/index.html
+++ b/tools/esp8266/html/index.html
@@ -7,9 +7,17 @@
         <script type="text/javascript" src="api.js"></script>
     </head>
     <body>
-        <h1>AHOY</h1>
+        <div class="topnav">
+            <a href="/" class="active">AhoyDTU</a>
+            <a href="javascript:void(0);" class="icon" onclick="topnav()">
+                <span></span>
+                <span></span>
+                <span></span>
+            </a>
+            <div id="topnav" class="hide"></div>
+        </div>
         <div id="content" class="content">
-            <SCRIPT>
+            <script>
                 function promptFunction() {
                     var Text = prompt("This project was started from https://www.mikrocontroller.net/topic/525778 this discussion.\n\n" + 
                     "The Hoymiles protocol was decrypted through the voluntary efforts of many participants. ahoy, among others, was developed based on this work.\n" + 
@@ -21,15 +29,7 @@
                         return true;
     
                 }
-            </SCRIPT>
-
-            <p>
-                <a href="/live">Visualization</a><br/>
-                <br/>
-                <a href="/setup">Setup</a><br/>
-                <br/>
-                <a href="/serial">Webserial & Commands</a><br/>
-            </p>
+            </script>
             <p><span class="des">Uptime: </span><span id="uptime"></span></p>
             <p><span class="des">ESP-Time: </span><span id="date"></span></p>
             <div id="sun">
@@ -62,10 +62,7 @@
         </div>
         <div id="footer">
             <p class="left">&copy 2022</p>
-            <p class="left"><a href="/update">Update Firmware</a></p>
             <p class="right" id="version"></p>
-            <p class="right"><a href="/reboot">Reboot</a></p>
-            <p class="right"><a href="/api">REST API</a></p>
         </div>
         <script type="text/javascript">
             var exeOnce = true;
@@ -88,6 +85,20 @@
                 getAjax("/api/setup", apiCb, "POST", JSON.stringify(obj));
             }
 
+            function topnav() {
+                toggle("topnav");
+            }
+
+            function parseMenu(obj) {
+                if(true == exeOnce) {
+                    var e = document.getElementById("topnav");
+                    e.innerHTML = "";
+                    for(var i = 0; i < obj["name"].length; i ++) {
+                        e.appendChild(link(obj["link"][i], obj["name"][i]));
+                    }
+                }
+            }
+
             function parseSys(obj) {
                 // Disclaimer
                 //if(obj["disclaimer"] == false) sessionStorage.setItem("gDisclaimer", promptFunction());
@@ -176,6 +187,7 @@
 
             function parse(obj) {
                 if(null != obj) {
+                    parseMenu(obj["menu"]);
                     parseSys(obj["system"]);
                     parseStat(obj["statistics"]);
                     parseIv(obj["inverter"]);
diff --git a/tools/esp8266/html/serial.html b/tools/esp8266/html/serial.html
index 608802f6..ed5852aa 100644
--- a/tools/esp8266/html/serial.html
+++ b/tools/esp8266/html/serial.html
@@ -7,7 +7,16 @@
         <script type="text/javascript" src="api.js"></script>
     </head>
     <body>
-        <h1>Serial Console</h1>
+        <div class="topnav">
+            <a href="/" class="active">AhoyDTU</a>
+            <a href="javascript:void(0);" class="icon" onclick="topnav()">
+                <span></span>
+                <span></span>
+                <span></span>
+            </a>
+            <div id="topnav" class="hide"></div>
+        </div>
+        <h2>Serial Console</h2>
         <div id="content" class="content">
             <div class="serial">
                 <textarea id="serial" cols="80" rows="20" readonly></textarea><br/>
@@ -54,13 +63,24 @@
         </div>
         <div id="footer">
             <p class="left">&copy 2022</p>
-            <p class="left"><a href="/">Home</a></p>
             <p class="right" id="version"></p>
         </div>
         <script type="text/javascript">
             var mAutoScroll = true;
             var con = document.getElementById("serial");
-            var mIntervalSet = false;
+            var exeOnce = true;
+
+            function topnav() {
+                toggle("topnav");
+            }
+
+            function parseMenu(obj) {
+                var e = document.getElementById("topnav");
+                e.innerHTML = "";
+                for(var i = 0; i < obj["name"].length; i ++) {
+                    e.appendChild(link(obj["link"][i], obj["name"][i]));
+                }
+            }
 
             function parseSys(obj) {
                 var up = obj["ts_uptime"];
@@ -73,16 +93,17 @@
                     + ("0"+min).substr(-2) + ":"
                     + ("0"+sec).substr(-2);
 
-                if(false == mIntervalSet) {
+                if(true == exeOnce) {
                     document.getElementById("version").appendChild(
                         link("https://github.com/lumapu/ahoy/commits/" + obj["build"], "Git SHA: " + obj["build"] + " :: " + obj["version"], "_blank")
                     );
                     window.setInterval("getAjax('/api/system', parseSys)", 10000);
-                    mIntervalSet = true;
+                    exeOnce = false;
                 }
             }
 
             function parse(root) {
+                parseMenu(root["menu"]);
                 select = document.getElementById('InvID');
 
                 if(null == root) return;
diff --git a/tools/esp8266/html/setup.html b/tools/esp8266/html/setup.html
index 20553286..e88af4e1 100644
--- a/tools/esp8266/html/setup.html
+++ b/tools/esp8266/html/setup.html
@@ -18,7 +18,15 @@
         </script>
     </head>
     <body onload="load()">
-        <h1>Setup</h1>
+        <div class="topnav">
+            <a href="/" class="active">AhoyDTU</a>
+            <a href="javascript:void(0);" class="icon" onclick="topnav()">
+                <span></span>
+                <span></span>
+                <span></span>
+            </a>
+            <div id="topnav" class="hide"></div>
+        </div>
         <div id="setup" class="content">
             <div id="content">
                 <a class="erase" href="/erase">ERASE SETTINGS (not WiFi)</a>
@@ -139,11 +147,9 @@
             </div>
         </div>
         <div id="footer">
-            <p class="left"><a href="/">Home</a></p>
-            <p class="left"><a href="/update">Update Firmware</a></p>
+            <p class="left">&copy 2022</p>
             <p class="right" id="version"></p>
             <p class="right"><a href="/factory">Factory Reset</a></p>
-            <p class="right"><a href="/reboot">Reboot</a></p>
         </div>
         <script type="text/javascript">
             var highestId = 0;
@@ -265,6 +271,18 @@
                     document.getElementsByName(i[0])[0].value = obj[i[1]];
             }
 
+            function topnav() {
+                toggle("topnav");
+            }
+
+            function parseMenu(obj) {
+                var e = document.getElementById("topnav");
+                e.innerHTML = "";
+                for(var i = 0; i < obj["name"].length; i ++) {
+                    e.appendChild(link(obj["link"][i], obj["name"][i]));
+                }
+            }
+
             function parseSys(obj) {
                 for(var i of [["device", "device_name"], ["ssid", "ssid"]])
                     document.getElementsByName(i[0])[0].value = obj[i[1]];
@@ -374,6 +392,7 @@
 
             function parse(root) {
                 if(null != root) {
+                    parseMenu(root["menu"]);
                     parseSys(root["system"]);
                     parseIv(root["inverter"]);
                     parseMqtt(root["mqtt"]);
@@ -383,7 +402,6 @@
                     parseRadio(root["radio"]);
                     parseSerial(root["serial"]);
                 }
-                getAjax('/api/setup/networks', listNetworks);
                 window.setInterval("getAjax('/api/setup/networks', listNetworks)", 7000);
             }
 
diff --git a/tools/esp8266/html/style.css b/tools/esp8266/html/style.css
index d6f0070c..4f0c9e29 100644
--- a/tools/esp8266/html/style.css
+++ b/tools/esp8266/html/style.css
@@ -1,19 +1,63 @@
-h1 {
+html, body {
+    font-family: Arial;
     margin: 0;
-    padding: 20pt;
-    font-size: 22pt;
+    padding: 0;
+}
+
+h2 {
+    padding-left: 10px;
+}
+
+.topnav {
+    background-color: #333;
+    position: fixed;
+    top: 0;
+    width: 100%;
+}
+
+.topnav a {
+    color: white;
+    padding: 14px 14px;
+    text-decoration: none;
+    font-size: 17px;
+    display: block;
+    height: 20px;
+}
+
+#topnav a {
     color: #fff;
-    background-color: #006ec0;
+}
+
+.topnav a.icon {
+    background: #333;
     display: block;
-    text-transform: uppercase;
+    position: absolute;
+    right: 0;
+    top: 0;
 }
 
-html, body {
-    font-family: Arial;
-    margin: 0;
-    padding: 0;
+.topnav a:hover {
+    background-color: #006ec0;
+    color: #000;
 }
 
+.active {
+    background-color: #006ec0;
+    color: #fff !important;
+}
+
+.topnav span {
+    display: block;
+    width: 30px;
+    height: 3px;
+    margin-bottom: 5px;
+    position: relative;
+    background: #fff;
+    border-radius: 2px;
+}
+
+/** old CSS below **/
+
 p {
     text-align: justify;
     font-size: 13pt;
@@ -32,6 +76,7 @@ p.lic, p.lic a {
 
 .s_active, .s_collapsible:hover {
     background-color: #006ec0;
+    color: #fff;
 }
 
 .s_content {
@@ -88,7 +133,7 @@ a.erase {
 }
 
 #content {
-    padding: 15px 15px 60px 15px;
+    padding: 60px 15px 60px 15px;
 }
 
 #footer {
diff --git a/tools/esp8266/html/update.html b/tools/esp8266/html/update.html
index 8c9d37de..f89c1091 100644
--- a/tools/esp8266/html/update.html
+++ b/tools/esp8266/html/update.html
@@ -7,7 +7,15 @@
         <script type="text/javascript" src="api.js"></script>
     </head>
     <body>
-        <h1>Update</h1>
+        <div class="topnav">
+            <a href="/" class="active">AhoyDTU</a>
+            <a href="javascript:void(0);" class="icon" onclick="topnav()">
+                <span></span>
+                <span></span>
+                <span></span>
+            </a>
+            <div id="topnav" class="hide"></div>
+        </div>
         <div id="content" class="content">
             <div>
                 Make sure that you have noted all your settings before starting an update. New versions may have changed their memory layout which can break your existing settings.<br/>
@@ -21,17 +29,36 @@
         </div>
         <div id="footer">
             <p class="left">&copy 2022</p>
-            <p class="left"><a href="/">Home</a></p>
             <p class="right" id="version"></p>
         </div>
         <script type="text/javascript">
+
+            function topnav() {
+                toggle("topnav");
+            }
+
+            function parseMenu(obj) {
+                var e = document.getElementById("topnav");
+                e.innerHTML = "";
+                for(var i = 0; i < obj["name"].length; i ++) {
+                    e.appendChild(link(obj["link"][i], obj["name"][i]));
+                }
+            }
+
             function parseSys(obj) {
                 document.getElementById("version").appendChild(
                     link("https://github.com/lumapu/ahoy/commits/" + obj["build"], "Git SHA: " + obj["build"] + " :: " + obj["version"], "_blank")
                 );
             }
 
-            getAjax("/api/system", parseSys);
+            function parse(obj) {
+                if(null != obj) {
+                    parseMenu(obj["menu"]);
+                    parseSys(obj["system"]);
+                }
+            }
+
+            getAjax("/api/index", parse);
         </script>
     </body>
 </html>
diff --git a/tools/esp8266/html/visualization.html b/tools/esp8266/html/visualization.html
index 8779c42e..3d12e006 100644
--- a/tools/esp8266/html/visualization.html
+++ b/tools/esp8266/html/visualization.html
@@ -8,20 +8,42 @@
         <script type="text/javascript" src="api.js"></script>
     </head>
     <body>
-        <h1>AHOY</h1>
+        <div class="topnav">
+            <a href="/" class="active">AhoyDTU</a>
+            <a href="javascript:void(0);" class="icon" onclick="topnav()">
+                <span></span>
+                <span></span>
+                <span></span>
+            </a>
+            <div id="topnav" class="hide"></div>
+        </div>
         <div id="content" class="content">
             <div id="live"></div>
             <p>Every <span id="refresh"></span> seconds the values are updated</p>
         </div>
         <div id="footer">
             <p class="left">&copy 2022</p>
-            <p class="left"><a href="/">Home</a></p>
             <p class="right" id="version"></p>
         </div>
         <script type="text/javascript">
             var exeOnce = true;
+
+            function topnav() {
+                toggle("topnav");
+            }
+
+            function parseMenu(obj) {
+                if(true == exeOnce) {
+                    var e = document.getElementById("topnav");
+                    e.innerHTML = "";
+                    for(var i = 0; i < obj["name"].length; i ++) {
+                        e.appendChild(link(obj["link"][i], obj["name"][i]));
+                    }
+                }
+            }
+
             function parseSys(obj) {
-                if(exeOnce == true) {
+                if(true == exeOnce) {
                     document.getElementById("version").appendChild(
                         link("https://github.com/lumapu/ahoy/commits/" + obj["build"], "Git SHA: " + obj["build"] + " :: " + obj["version"], "_blank")
                     );}
@@ -111,6 +133,7 @@
 
             function parse(obj) {
                 if(null != obj) {
+                    parseMenu(obj["menu"]);
                     parseSys(obj["system"]);
                     parseIv(obj["inverter"], obj);
                     document.getElementById("refresh").innerHTML = obj["refresh_interval"];
diff --git a/tools/esp8266/webApi.cpp b/tools/esp8266/webApi.cpp
index ffa062ed..124a2f2e 100644
--- a/tools/esp8266/webApi.cpp
+++ b/tools/esp8266/webApi.cpp
@@ -48,6 +48,7 @@ void webApi::onApi(AsyncWebServerRequest *request) {
     if(path == "system")              getSystem(root);
     else if(path == "statistics")     getStatistics(root);
     else if(path == "inverter/list")  getInverterList(root);
+    else if(path == "menu")           getMenu(root);
     else if(path == "index")          getIndex(root);
     else if(path == "setup")          getSetup(root);
     else if(path == "setup/networks") getNetworks(root);
@@ -241,8 +242,26 @@ void webApi::getSerial(JsonObject obj) {
 }
 
 
+//-----------------------------------------------------------------------------
+void webApi::getMenu(JsonObject obj) {
+    obj["name"][0] = "Live";
+    obj["link"][0] = "/live";
+    obj["name"][1] = "Serial Console";
+    obj["link"][1] = "/serial";
+    obj["name"][2] = "Setup";
+    obj["link"][2] = "/setup";
+    obj["name"][3] = "Update";
+    obj["link"][3] = "/update";
+    obj["name"][4] = "REST API";
+    obj["link"][4] = "/api";
+    obj["name"][5] = "Reboot";
+    obj["link"][5] = "/reboot";
+}
+
+
 //-----------------------------------------------------------------------------
 void webApi::getIndex(JsonObject obj) {
+    getMenu(obj.createNestedObject(F("menu")));
     getSystem(obj.createNestedObject(F("system")));
     getStatistics(obj.createNestedObject(F("statistics")));
     obj["refresh_interval"] = SEND_INTERVAL;
@@ -281,6 +300,7 @@ void webApi::getIndex(JsonObject obj) {
 
 //-----------------------------------------------------------------------------
 void webApi::getSetup(JsonObject obj) {
+    getMenu(obj.createNestedObject(F("menu")));
     getSystem(obj.createNestedObject(F("system")));
     getInverterList(obj.createNestedObject(F("inverter")));
     getMqtt(obj.createNestedObject(F("mqtt")));
@@ -300,6 +320,7 @@ void webApi::getNetworks(JsonObject obj) {
 
 //-----------------------------------------------------------------------------
 void webApi::getLive(JsonObject obj) {
+    getMenu(obj.createNestedObject(F("menu")));
     getSystem(obj.createNestedObject(F("system")));
     JsonArray invArr = obj.createNestedArray(F("inverter"));
     obj["refresh_interval"] = SEND_INTERVAL;
diff --git a/tools/esp8266/webApi.h b/tools/esp8266/webApi.h
index 9be0cf4c..a45dcf8e 100644
--- a/tools/esp8266/webApi.h
+++ b/tools/esp8266/webApi.h
@@ -42,6 +42,7 @@ class webApi {
         void getRadio(JsonObject obj);
         void getSerial(JsonObject obj);
 
+        void getMenu(JsonObject obj);
         void getIndex(JsonObject obj);
         void getSetup(JsonObject obj);
         void getNetworks(JsonObject obj);
