diff --git a/firmware/data/config_template.html b/firmware/data/config_template.html
index bf94325..ad5e681 100644
--- a/firmware/data/config_template.html
+++ b/firmware/data/config_template.html
@@ -1,3 +1,4 @@
+<div id="tab-config" class="">
 <form class="pure-form pure-form-aligned" action="/" method="post">
 <h3>Config</h3>
 <div class="pure-control-group">
@@ -59,4 +60,4 @@
 <button type="submit" class="pure-button pure-button-primary">Save</button>
 </div>
 </form>
-
+</div><!-- end of config div -->
diff --git a/firmware/data/index_template_bottom.html b/firmware/data/index_template_bottom.html
index af0a134..128182b 100644
--- a/firmware/data/index_template_bottom.html
+++ b/firmware/data/index_template_bottom.html
@@ -1,5 +1,25 @@
 <!-- bottom -->
 <script>
+var tabMain = document.getElementById("tab-main");
+var tabConfig = document.getElementById("tab-config");
+var amain = document.getElementById("tab1-a");
+var acfg = document.getElementById("tab2-a");
+
+document.getElementById("tab1-a").addEventListener("click", function() {
+tabMain.classList.add("visible");
+tabConfig.classList.remove("visible");
+amain.classList.add("pure-button-primary");
+acfg.classList.remove("pure-button-primary");
+});
+
+document.getElementById("tab2-a").addEventListener("click", function() {
+tabMain.classList.remove("visible");
+tabConfig.classList.add("visible");
+acfg.classList.add("pure-button-primary");
+amain.classList.remove("pure-button-primary");
+});
+</script>
+<script>
 function loadGraphData() {
 console.log('----> generate graph <----');
 $.getJSON('/tc_data_blocks', function(data) {
diff --git a/firmware/data/index_template_middle.html b/firmware/data/index_template_middle.html
index 088c0a5..a777c85 100644
--- a/firmware/data/index_template_middle.html
+++ b/firmware/data/index_template_middle.html
@@ -5,3 +5,4 @@
 </td>
 </tr>
 </table>
+</div><!-- end of main-tab div -->
diff --git a/firmware/data/index_template_top.html b/firmware/data/index_template_top.html
index 2e8110d..a7eead0 100644
--- a/firmware/data/index_template_top.html
+++ b/firmware/data/index_template_top.html
@@ -9,6 +9,18 @@
 <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
 <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
+#tab-main, #tab-config {
+display: none;
+}
+#tab-main.visible {
+display: block;
+}
+#tab-config.visible {
+display: block;
+}
+</style>
 </head>
 <body>
 <fieldset>
@@ -27,6 +39,13 @@
 <label for="cb" class="pure-checkbox"></label>
 </div>
 <br>
+
+<div>
+<a href="#" id="tab1-a" class="pure-button pure-button-primary">Main</a>
+<a href="#" id="tab2-a" class="pure-button">Config</a>
+</div>
+<br>
+
 <div class="pure-control-group">
 <label for="tc_on">
 <strong>Timing control</strong>
@@ -66,6 +85,7 @@ document.getElementById('tc_on').classList.remove('pure-button-primary');
 <input id="transition" name="transition" type="text" placeholder="10" value="{{TRANSITION_TIME}}">
 </div>
 <br>
+
 <script>
 let timeoutId;
 function sendSliderValue(x) {
@@ -86,6 +106,8 @@ console.error(`Error sending slider value to ${url}: ${error}`);
 }
 </script>
 <br>
+<div id="tab-main" class="visible">
 <table border=0>
 <tr>
 <td>
+
diff --git a/firmware/data/org/config_template.html b/firmware/data/org/config_template.html
index 802760a..1cee8e5 100644
--- a/firmware/data/org/config_template.html
+++ b/firmware/data/org/config_template.html
@@ -1,4 +1,4 @@
-<div id="tab-config">
+<div id="tab-config" class="">
 <form class="pure-form pure-form-aligned" action="/" method="post">
             <h3>Config</h3>
             <div class="pure-control-group">
diff --git a/firmware/data/org/index_template_bottom.html b/firmware/data/org/index_template_bottom.html
index 78a6769..e905837 100644
--- a/firmware/data/org/index_template_bottom.html
+++ b/firmware/data/org/index_template_bottom.html
@@ -2,15 +2,21 @@
   <script>
     var tabMain = document.getElementById("tab-main");
     var tabConfig = document.getElementById("tab-config");
+    var amain = document.getElementById("tab1-a");
+    var acfg = document.getElementById("tab2-a");
 
     document.getElementById("tab1-a").addEventListener("click", function() {
       tabMain.classList.add("visible");
       tabConfig.classList.remove("visible");
+      amain.classList.add("pure-button-primary");
+      acfg.classList.remove("pure-button-primary");
     });
 
     document.getElementById("tab2-a").addEventListener("click", function() {
       tabMain.classList.remove("visible");
       tabConfig.classList.add("visible");
+      acfg.classList.add("pure-button-primary");
+      amain.classList.remove("pure-button-primary");
     });
   </script>
             <script>
diff --git a/firmware/data/org/index_template_middle.html b/firmware/data/org/index_template_middle.html
index 92c93a5..baa51d8 100644
--- a/firmware/data/org/index_template_middle.html
+++ b/firmware/data/org/index_template_middle.html
@@ -5,3 +5,4 @@
                     </td>
                 </tr>
             </table>
+        </div><!-- end of main-tab div -->
diff --git a/firmware/data/org/index_template_top.html b/firmware/data/org/index_template_top.html
index 8306caf..af82fa8 100644
--- a/firmware/data/org/index_template_top.html
+++ b/firmware/data/org/index_template_top.html
@@ -41,11 +41,11 @@
             <br>
 
             <div>
-                <a href="#" id="tab1-a" class="pure-button">Main</a>
+                <a href="#" id="tab1-a" class="pure-button pure-button-primary">Main</a>
                 <a href="#" id="tab2-a" class="pure-button">Config</a>
             </div>
+            <br>
 
-        <div id="tab-main">
             <div class="pure-control-group">
                 <label for="tc_on">
                     <strong>Timing control</strong>
@@ -85,6 +85,7 @@
                 <input id="transition" name="transition" type="text" placeholder="10" value="{{TRANSITION_TIME}}">
             </div>
             <br>
+
             <script>
             let timeoutId;
             function sendSliderValue(x) {
@@ -104,8 +105,9 @@
                 }, 500);
             }
             </script>
-        </div><!-- end of main-tab div -->
             <br>
+        <div id="tab-main" class="visible">
             <table border=0>
                 <tr>
                     <td>
+
diff --git a/tools/html_gen_files.sh b/tools/html_gen_files.sh
new file mode 100644
index 0000000..87de9ac
--- /dev/null
+++ b/tools/html_gen_files.sh
@@ -0,0 +1,7 @@
+#!/bin/bash
+
+bash ../../tools/html2string.sh org/index_template_top.html > index_template_top.html
+bash ../../tools/html2string.sh org/index_template_middle.html > index_template_middle.html
+bash ../../tools/html2string.sh org/index_template_bottom.html > index_template_bottom.html
+bash ../../tools/html2string.sh org/config_template.html > config_template.html
+bash ../../tools/html2string.sh org/light_control_template.html > light_control_template.html
