diff --git a/doc/assets/style.css b/doc/assets/style.css
index 871000b..6ed4d56 100644
--- a/doc/assets/style.css
+++ b/doc/assets/style.css
@@ -146,7 +146,7 @@ div.search-icon {
 }
 div.doc-toc {
     max-width: 70%;
-    padding-right: 10px;
+    padding-right: 0;
     background-color: #e3e3e3;
     color: #2c2c2c;
     overflow: auto;
@@ -154,17 +154,25 @@ div.doc-toc {
     top: 30px;
     bottom: 30px;
     border-right: 1px solid #c9c9c9;
+    border-left: 1px solid #c9c9c9;
     padding-top: 0;
     padding-bottom: 10px;
-    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.65);
+    box-shadow: 0px 6px 3px -1px rgba(0,0,0,0.65);
     z-index: 20;
 }
-button#btn_toc {
-    width: 33px;
-    height: 33px;
+
+a.toc-active {
     border: 1px solid #c9c9c9;
+    border-bottom: 0;
     background-color: #e3e3e3;
     outline: none;
+    display: block;
+    padding-left: 5px;
+    padding-right: 5px;
+    color: #2c2c2c !important;
+}
+a.toc-active::before{
+    color: #2c2c2c !important;
 }
 
 div.doc-toc-header{
@@ -187,6 +195,7 @@ div.doc-toc a {
     list-style-type: none;
     padding: 0;
     padding-left: 10px;
+    padding-right: 10px;
 }
 div.doc-toc ul.nested {
     list-style-type: none;
diff --git a/doc/views/default/layout.ls b/doc/views/default/layout.ls
index ccbe191..875e1a0 100644
--- a/doc/views/default/layout.ls
+++ b/doc/views/default/layout.ls
@@ -163,12 +163,24 @@ end
             Powered by antd server, (c) 2019 - <?=os.date("*t").year?> Xuan Sang LE
         </div>
         <script>
+            const toc_class_toggle = () => {
+                if(!$("#doc_toc").is(":hidden"))
+                {
+                    $("#btn_toc").attr("class", "toc-active");
+                }
+                else
+                {
+                    $("#btn_toc").removeClass("toc-active");
+                }
+            };
             window.addEventListener('load', (event) => {
                 $("#btn_toc").click(function(){
                     $("#doc_toc").toggle();
+                    toc_class_toggle();
                 });
                 $("#doc_content").click(function(){
                     $("#doc_toc").hide();
+                    toc_class_toggle();
                 });
                 // tree view events
                 var toggler = document.getElementsByClassName("caret");
@@ -216,7 +228,7 @@ end
             end
         ?>
             });
-        
+        toc_class_toggle();
         </script>
     </body>
 </html>