diff --git a/apps/router.lua b/apps/router.lua
index 7c37863..3e67cdd 100644
--- a/apps/router.lua
+++ b/apps/router.lua
@@ -5,8 +5,8 @@
 -- some global variables
 DIR_SEP = "/"
 WWW_ROOT = __ROOT__.."/apps"
-if HEADER.host then
-    HTTP_ROOT= "https://"..HEADER.host
+if HEADER.Host then
+    HTTP_ROOT= "https://"..HEADER.Host
 else
     HTTP_ROOT = "https://apps.lxsang.me"
 end
diff --git a/blog/router.lua b/blog/router.lua
index d013efa..6703800 100644
--- a/blog/router.lua
+++ b/blog/router.lua
@@ -5,8 +5,8 @@
 -- some global variables
 DIR_SEP = "/"
 WWW_ROOT = __ROOT__.."/blog"
-if HEADER.host then
-    HTTP_ROOT= "https://"..HEADER.host
+if HEADER.Host then
+    HTTP_ROOT= "https://"..HEADER.Host
 else
     HTTP_ROOT = "https://blog.lxsang.me"
 end
@@ -18,7 +18,7 @@ MODEL_ROOT = BASE_FRW.."blog.models"
 -- file path: path/to/file
 VIEW_ROOT = WWW_ROOT..DIR_SEP.."views"
 LOG_ROOT = WWW_ROOT..DIR_SEP.."logs"
-POST_LIMIT = 2
+POST_LIMIT = 10
 -- require needed library
 require(BASE_FRW.."silk.api")
 
diff --git a/get/router.lua b/get/router.lua
index cfb8e9c..b55d93d 100644
--- a/get/router.lua
+++ b/get/router.lua
@@ -5,8 +5,8 @@
 -- some global variables
 DIR_SEP = "/"
 WWW_ROOT = __ROOT__.."/get"
-if HEADER.host then
-    HTTP_ROOT= "https://"..HEADER.host
+if HEADER.Host then
+    HTTP_ROOT= "https://"..HEADER.Host
 else
     HTTP_ROOT = "https://get.makeand.run"
 end
diff --git a/info/router.lua b/info/router.lua
index 7c648ce..94fd8c9 100644
--- a/info/router.lua
+++ b/info/router.lua
@@ -5,8 +5,8 @@
 -- some global variables
 DIR_SEP = "/"
 WWW_ROOT = __ROOT__.."/info"
-if HEADER.host then
-    HTTP_ROOT= "https://"..HEADER.host
+if HEADER.Host then
+    HTTP_ROOT= "https://"..HEADER.Host
 else
     HTTP_ROOT = "https://info.lxsang.me"
 end
diff --git a/info/style.css b/info/style.css
index 9ca3fa9..3e6226e 100644
--- a/info/style.css
+++ b/info/style.css
@@ -30,6 +30,12 @@
     /*color: #414339;*/
 }
 
+.layout div.container{
+    display: none;
+}
+.layout div.container_active{
+    display: block;
+}
 .layoutprint{
     max-width:960px;
     font-family: "Ubuntu";
@@ -39,7 +45,9 @@
     flex-direction: row-reverse;
     color: #414339;
 }
-
+.layoutprint div.container{
+    display: block;
+}
 h1 {
     font-size: 25px;
     text-align: center;
@@ -93,12 +101,21 @@ h1 .cv{
     color:#878887;
 }
 
-.container h1{
+.container h1, .container_active h1, .container_footer h1{
     font-size:20px;
     text-align: left;
     color:#3170B2;
     border-bottom: 1px solid #3170B2;
 }
+.toc_active {
+    font-weight: bold;
+}
+
+.cv-toc ul li.toc_active a{
+    /*border-bottom: 1px dashed #878887;*/
+    color:#3170B2;
+}
+
 a{
     text-decoration: none;
     color:#3170B2;
diff --git a/info/views/default/index/index.ls b/info/views/default/index/index.ls
index da95a57..7418a7f 100644
--- a/info/views/default/index/index.ls
+++ b/info/views/default/index/index.ls
@@ -1,12 +1,13 @@
 <?lua
     if not data then return end
-
+    local active = "_active"
     for k,v in pairs(data) do
         if v.children then
 ?>
-        <div class="container" id =<?='"toc'..v.id..'"'?>>
+        <div class="container<?=active?>" id =<?='"toc'..v.id..'"'?>>
             <h1><?=v.name:gsub("^%d+%.","")?></h1>
         <?lua
+            active = ''
             for l,child in pairs(v.children) do
         ?>
             <div class="sub-container">
@@ -50,9 +51,10 @@
 <?lua 
         else
 ?>
-            <div class="container" id =<?='"toc'..v.id..'"'?>>
+            <div class="container<?=active?>" id =<?='"toc'..v.id..'"'?>>
                 <h1><?=v.name?></h1>
             <?lua
+            active = ''
             if v.sections then
                 for m, entry in pairs(v.sections) do
             ?>
diff --git a/info/views/default/layout.ls b/info/views/default/layout.ls
index 865dfb4..1640c84 100644
--- a/info/views/default/layout.ls
+++ b/info/views/default/layout.ls
@@ -11,6 +11,22 @@
         <?lua
             end
         ?>
+        <script>
+            var switchTab = function(id, e)
+            {
+                var els = document.getElementsByClassName("container_active");
+                var tab = document.getElementById(id)
+                var tactiv = document.getElementsByClassName("toc_active");
+                if(els.length == 0) return;
+                if(!tab) return;
+                if(tactiv.length == 0) return;
+                els[0].className = "container";
+                tab.className = "container_active";
+                tactiv[0].className = "";
+                e.parentElement.className = "toc_active";
+                console.log('switch to ', id, e);
+            }
+        </script>
         <title>Porfolio</title>
     </head>
     <body>
@@ -31,7 +47,7 @@
                 __main__:render()
             end
             ?>
-            <div class = "container">
+            <div class = "container_footer">
                 <h1 style="margin:0;"></h1>
                 <p style="text-align:right; padding:0; margin:0;color:#878887;">Powered by antd server, (C) 2017-2018 Xuan Sang LE</p>
             </div>
diff --git a/info/views/default/toc/index.ls b/info/views/default/toc/index.ls
index 4adb53e..f2f64d2 100644
--- a/info/views/default/toc/index.ls
+++ b/info/views/default/toc/index.ls
@@ -5,10 +5,12 @@
 <div class = "cv-toc">
 <ul>
 <?lua
+    local active = "toc_active"
     for k, v in pairs(data) do
 ?>
-    <li><a href=<?='"#toc'..v[2]..'"'?>><?=v[1]?></a></li>
+    <li class="<?=active?>"><a href=<?='"#toc'..v[2]..'"'?> onclick='switchTab("toc<?=v[2]?>", this)' ><?=v[1]?></a></li>
 <?lua
+    active = ''
     end
 ?>
 </ul>
diff --git a/os/router.lua b/os/router.lua
index 32a58b6..de5454f 100644
--- a/os/router.lua
+++ b/os/router.lua
@@ -5,8 +5,8 @@
 -- some global variables
 DIR_SEP = "/"
 WWW_ROOT = __ROOT__.."/os"
-if HEADER.host then
-    HTTP_ROOT= "https://"..HEADER.host
+if HEADER.Host then
+    HTTP_ROOT= "https://"..HEADER.Host
 else
     HTTP_ROOT = "https://os.lxsang.me"
 end