diff --git a/typora-docsify.css b/typora-docsify.css
index 711a537..d2a75d0 100644
--- a/typora-docsify.css
+++ b/typora-docsify.css
@@ -5,7 +5,7 @@
   --text-color: #222;
   --meta-content-color: #06B;
   --primary-color: #24D;
-  --active-file-bg-color: rgba(51, 51, 51, 0.1);
+  --active-file-bg-color: rgba(51, 51, 51, 0.05);
   --active-file-border-color: #24D;
   --side-bar-bg-color: #EEE;
   --item-hover-bg-color: rgba(127, 127, 127, 0.1);
@@ -97,9 +97,8 @@ body,
 .markdown-section h6::before,
 #write h6 *::before,
 .markdown-section h6 *::before {
+  font: 400 0.8em 'Poppins', 'Source Han Sans HC', 'PingFang', 'Microsoft YaHei', sans-serif;
   color: inherit;
-  font-size: 0.8em;
-  font-weight: normal;
   margin-right: 0.5rem;
   border: none;
   position: relative;
@@ -259,8 +258,8 @@ body,
 .markdown-section pre[data-lang],
 #write blockquote,
 .markdown-section blockquote,
-#write table,
-.markdown-section table,
+#write table:not(.md-grid-board),
+.markdown-section table:not(.md-grid-board),
 #write ul,
 .markdown-section ul,
 #write ol,
@@ -558,8 +557,7 @@ body,
 }
 #write ol li::marker,
 .markdown-section ol li::marker {
-  font-family: 'JetBrains Mono', Menlo, Consolas, 'Source Han Sans HC', 'PingFang', 'Microsoft YaHei', monospace;
-  font-size: 0.9em;
+  font: 0.9em 'JetBrains Mono', Menlo, Consolas, 'Source Han Sans HC', 'PingFang', 'Microsoft YaHei', monospace;
 }
 #write .md-task-list-item,
 .markdown-section .md-task-list-item,
@@ -578,8 +576,8 @@ body,
   flex: none;
   position: inherit;
 }
-#write table,
-.markdown-section table,
+#write table:not(.md-grid-board),
+.markdown-section table:not(.md-grid-board),
 #write .md-table,
 .markdown-section .md-table {
   display: table;
@@ -590,64 +588,64 @@ body,
   border-collapse: separate;
   border: 1px solid #CCC;
 }
-#write table th,
-.markdown-section table th,
+#write table:not(.md-grid-board) th,
+.markdown-section table:not(.md-grid-board) th,
 #write .md-table th,
 .markdown-section .md-table th,
-#write table td,
-.markdown-section table td,
+#write table:not(.md-grid-board) td,
+.markdown-section table:not(.md-grid-board) td,
 #write .md-table td,
 .markdown-section .md-table td {
   padding: 0.5em calc(1em);
   vertical-align: top;
   border: none;
 }
-#write table th:not(:last-child),
-.markdown-section table th:not(:last-child),
+#write table:not(.md-grid-board) th:not(:last-child),
+.markdown-section table:not(.md-grid-board) th:not(:last-child),
 #write .md-table th:not(:last-child),
 .markdown-section .md-table th:not(:last-child),
-#write table td:not(:last-child),
-.markdown-section table td:not(:last-child),
+#write table:not(.md-grid-board) td:not(:last-child),
+.markdown-section table:not(.md-grid-board) td:not(:last-child),
 #write .md-table td:not(:last-child),
 .markdown-section .md-table td:not(:last-child) {
   border-right: 1px dashed #8888;
 }
-#write table tr:last-child td,
-.markdown-section table tr:last-child td,
+#write table:not(.md-grid-board) tr:last-child td,
+.markdown-section table:not(.md-grid-board) tr:last-child td,
 #write .md-table tr:last-child td,
 .markdown-section .md-table tr:last-child td {
   border-bottom: none;
 }
-#write table th,
-.markdown-section table th,
+#write table:not(.md-grid-board) th,
+.markdown-section table:not(.md-grid-board) th,
 #write .md-table th,
 .markdown-section .md-table th {
   line-height: 1.5em;
 }
-#write table th,
-.markdown-section table th,
+#write table:not(.md-grid-board) th,
+.markdown-section table:not(.md-grid-board) th,
 #write .md-table th,
 .markdown-section .md-table th,
-#write table td,
-.markdown-section table td,
+#write table:not(.md-grid-board) td,
+.markdown-section table:not(.md-grid-board) td,
 #write .md-table td,
 .markdown-section .md-table td {
   border-bottom: 1px solid #CCC;
 }
-#write table th,
-.markdown-section table th,
+#write table:not(.md-grid-board) th,
+.markdown-section table:not(.md-grid-board) th,
 #write .md-table th,
 .markdown-section .md-table th {
   background: #EEE;
 }
-#write table tbody tr:nth-child(even),
-.markdown-section table tbody tr:nth-child(even),
+#write table:not(.md-grid-board) tbody tr:nth-child(even),
+.markdown-section table:not(.md-grid-board) tbody tr:nth-child(even),
 #write .md-table tbody tr:nth-child(even),
 .markdown-section .md-table tbody tr:nth-child(even) {
   background: rgba(238, 238, 238, 0.25);
 }
-#write table tbody tr:nth-child(odd),
-.markdown-section table tbody tr:nth-child(odd),
+#write table:not(.md-grid-board) tbody tr:nth-child(odd),
+.markdown-section table:not(.md-grid-board) tbody tr:nth-child(odd),
 #write .md-table tbody tr:nth-child(odd),
 .markdown-section .md-table tbody tr:nth-child(odd) {
   background: none;
@@ -746,38 +744,117 @@ body,
   color: #C8C8C8 !important;
   color: var(--blur-text-color) !important;
 }
-#outline-content .outline-active {
-  color: #24D;
+#outline-content {
+  padding: 0 0.5em;
+  font: 400 0.8em 'JetBrains Mono', Menlo, Consolas, 'Source Han Sans HC', 'PingFang', 'Microsoft YaHei', monospace;
 }
-#outline-content .outline-h2 > ul,
-#outline-content .outline-h3 > ul,
-#outline-content .outline-h4 > ul,
-#outline-content .outline-h5 > ul,
-#outline-content .outline-h6 > ul {
-  padding-left: 1em;
+#outline-content li ul {
+  padding-left: 2ch;
+}
+#outline-content li .outline-item {
+  padding: 0.5em 0.5em !important;
+  margin: 0;
+  border: none;
+  border-radius: 0.25em;
 }
-#outline-content .outline-h2 > .outline-item,
-#outline-content .outline-h3 > .outline-item,
-#outline-content .outline-h4 > .outline-item,
-#outline-content .outline-h5 > .outline-item,
-#outline-content .outline-h6 > .outline-item {
-  padding-left: 0 !important;
+#outline-content li .outline-item .outline-expander {
+  padding-right: 1ch;
 }
-#outline-content .outline-h1 {
-  counter-reset: h2;
+#outline-content li .outline-item .outline-label {
+  font: 1.25em 'Poppins', 'Source Han Sans HC', 'PingFang', 'Microsoft YaHei', sans-serif;
 }
-#outline-content .outline-h1 > .outline-item > .outline-label::before {
-  content: '';
+#outline-content li .outline-item .outline-label:hover {
+  text-decoration: none;
 }
-#outline-content .outline-h2 > .outline-item > .outline-label::before {
+#outline-content li .outline-item::before {
   display: inline-block;
-  margin-right: 0.25em;
-  min-width: calc(1em - 0.25em);
+  flex: none;
+  padding: 0.3em 0.25em;
+  position: absolute;
   text-align: right;
+  opacity: 0;
+  transition: all 3s;
 }
-#outline-content .outline-h2 > .outline-item > .outline-label::before {
+#outline-content li .outline-item::before:hover {
+  color: #FFF;
+  background: red;
+  border-radius: 0.25em;
+  z-index: 99;
+}
+#outline-content li .outline-item:hover::before,
+#outline-content li .outline-item .outline-active::before {
+  opacity: 0.75;
+  transition: all 0s;
+}
+#outline-content li .outline-item:hover {
+  background-color: inherit;
+}
+#outline-content li .outline-item .outline-active {
+  color: #24D;
+  font-weight: bold !important;
+}
+#outline-content .outline-h1 {
+  counter-reset: h2;
+  overflow: hidden;
+}
+#outline-content .outline-h1 > ul {
+  padding-left: 2.5ch;
+}
+#outline-content .outline-h2 {
+  padding: 2px 0;
+  counter-reset: h3;
   counter-increment: h2;
-  content: counter(h2) ".";
+}
+#outline-content .outline-h2::before {
+  content: '';
+  display: block;
+  height: 1px;
+  width: 200%;
+  position: absolute;
+  top: 0;
+  left: -50%;
+  border-top: 1px solid #0001;
+}
+#outline-content .outline-h2 > .outline-item::before {
+  content: counter(h2);
+  min-width: 2ch;
+  left: -2ch;
+  opacity: 0.75;
+}
+#outline-content .outline-h3 {
+  counter-reset: h4;
+  counter-increment: h3;
+}
+#outline-content .outline-h3 > .outline-item::before {
+  content: counter(h2) "." counter(h3);
+  min-width: 4ch;
+  left: -4ch;
+}
+#outline-content .outline-h4 {
+  counter-reset: h5;
+  counter-increment: h4;
+}
+#outline-content .outline-h4 > .outline-item::before {
+  content: counter(h2) "." counter(h3) "." counter(h4);
+  min-width: 6ch;
+  left: -6ch;
+}
+#outline-content .outline-h5 {
+  counter-reset: h6;
+  counter-increment: h5;
+}
+#outline-content .outline-h5 > .outline-item::before {
+  content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5);
+  min-width: 8ch;
+  left: -8ch;
+}
+#outline-content .outline-h6 {
+  counter-increment: h6;
+}
+#outline-content .outline-h6 > .outline-item::before {
+  content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6);
+  min-width: 10ch;
+  left: -10ch;
 }
 .sidebar > h1 .app-name-link {
   font-size: 0;
diff --git a/typora-docsify.less b/typora-docsify.less
index 057a6f8..af1b795 100644
--- a/typora-docsify.less
+++ b/typora-docsify.less
@@ -37,7 +37,7 @@
     // --window-border: 1px solid red; //边栏等的边框 很少出现
 
     // side bar menu
-    --active-file-bg-color: fadeout(@c_dark, 90%);
+    --active-file-bg-color: fadeout(@c_dark, 95%);
     // --active-file-text-color: #FFF;
     --active-file-border-color: @main_color;
     --side-bar-bg-color: @c_light;
@@ -99,9 +99,8 @@ body,
 
         // header numbering
         &::before {
+            font: 400 .8em @sans;
             color: inherit;
-            font-size: 0.8em;
-            font-weight: normal;
             margin-right: .5rem;
             border: none;
             position: relative;
@@ -197,32 +196,32 @@ body,
     // skip h1, because I usually use H1 as main title
     h2::before {
         counter-increment: h2;
-        content: counter(h2) "."
+        content: counter(h2)"."
     }
 
     h3::before,
         {
         counter-increment: h3;
-        content: counter(h2) "."counter(h3)
+        content: counter(h2)"."counter(h3)
     }
 
     h4::before,
         {
         counter-increment: h4;
-        content: counter(h2) "."counter(h3) "."counter(h4)
+        content: counter(h2)"."counter(h3) "."counter(h4)
     }
 
     h5::before,
         {
         counter-increment: h5;
-        // content: counter(h2) "."counter(h3) "."counter(h4) "."counter(h5)
+        // content: counter(h2)"."counter(h3) "."counter(h4) "."counter(h5)
         content: none;
     }
 
     h6::before,
         {
         counter-increment: h6;
-        // content: counter(h2) "."counter(h3) "."counter(h4) "."counter(h5) "."counter(h6)
+        // content: counter(h2)"."counter(h3) "."counter(h4) "."counter(h5) "."counter(h6)
         content: none;
     }
 
@@ -255,7 +254,7 @@ body,
     pre[data-lang],
     //docsify
     blockquote,
-    table,
+    table:not(.md-grid-board),
     ul,
     ol,
     hr {
@@ -553,8 +552,7 @@ body,
     }
 
     ol li::marker {
-        font-family: @monospace;
-        font-size: .9em;
+        font: .9em @monospace;
     }
 
     // 处理 checkbox
@@ -574,7 +572,7 @@ body,
 
     // ============================== 表格
 
-    table,
+    table:not(.md-grid-board),
     .md-table {
         display: table;
         width: auto;
@@ -715,59 +713,156 @@ body,
 
 // ==================== typora sidebar
 #outline-content {
-    .outline-active {
-        color: @main_color;
-    }
-
-    // .outline-h1,
-    .outline-h2,
-    .outline-h3,
-    .outline-h4,
-    .outline-h5,
-    .outline-h6 {
+    padding: 0 .5em;
+    font: 400 .8em @monospace;
+    @header-indent: 2ch;
+    @item-padding-h: .5em;
 
-        &>ul {
-            padding-left: 1em;
-            // border:1px solid red;
+    // 控制标题层级和标题的关系
+    li {
+        ul {
+            padding-left: @header-indent; // 控制标题缩进
+            // border: 1px solid red;
         }
 
-        &>.outline-item {
-            padding-left: 0 !important;
+        .outline-item {
+            // 标题项
+            padding: .5em @item-padding-h  !important;
+            margin: 0;
+            border: none;
+            border-radius: .25em;
+
+            // 展开箭头
+            .outline-expander {
+                padding-right: 1ch;
+            }
+
+            .outline-label {
+                font: 1.25em @sans;
+
+                &:hover {
+                    text-decoration: none; //注销原本的样式 会有下划线粗细不匀的问题
+                }
+            }
+
+            &::before {
+                display: inline-block;
+                flex: none;
+                // min-width: calc(1em - .25em);
+                // text-align: right;
+                padding: .3em .25em;
+                // margin-right: .25em;
+                position: absolute;
+                text-align: right;
+                opacity: 0;
+                transition: all 3s;
+
+                &:hover {
+                    color: #FFF;
+                    background: red;
+                    border-radius: .25em;
+                    z-index: 99;
+                }
+            }
+
+            // 悬浮显示标题
+            &:hover,
+            .outline-active {
+                &::before {
+                    opacity: .75;
+                    transition: all 0s;
+                }
+            }
+
+            &:hover {
+                background-color: inherit;
+            }
+
+            // 当前滚动位置 - 激活状态
+            .outline-active {
+                color: @main_color;
+                font-weight: bold !important;
+            }
         }
     }
 
     // numbering
     .outline-h1 {
         counter-reset: h2;
+        overflow: hidden;
 
-        &>.outline-item>.outline-label::before {
-            content: ''
+        &>ul {
+            padding-left: @header-indent+@item-padding-h;
         }
     }
 
     .outline-h2 {
-        &>.outline-item>.outline-label::before {
-            display: inline-block;
-            margin-right: .25em;
-            // content: '•';
-            min-width: calc(1em - .25em);
-            text-align: right;
+        padding: 2px 0;
+        counter-reset: h3;
+        counter-increment: h2;
+
+        // top divide line
+        &::before {
+            content: '';
+            display: block;
+            height: 1px;
+            width: 200%;
+            position: absolute;
+            top: 0;
+            left: -50%;
+            border-top: 1px solid #0001;
         }
 
+        &>.outline-item::before {
+            content: counter(h2);
+            min-width: @header-indent*1;
+            left: @header-indent*-1;
+            opacity: .75;
+        }
     }
 
-    .outline-h2>.outline-item>.outline-label::before {
-        counter-increment: h2;
-        content: counter(h2)"."
+    .outline-h3 {
+        counter-reset: h4;
+        counter-increment: h3;
+
+        &>.outline-item::before {
+            content: counter(h2)"."counter(h3);
+            min-width: @header-indent*2;
+            left: @header-indent*-2;
+        }
     }
 
-    // .outline-h2 {
-    //     counter-reset: h3
-    // }
-    // .outline-h3>.outline-item>.outline-label::before {
-    //     counter-increment: h3;
-    //     content: counter(h2) "."counter(h3)". "
-    // }
+    .outline-h4 {
+        counter-reset: h5;
+        counter-increment: h4;
+
+        &>.outline-item::before {
+            content: counter(h2)"."counter(h3)"."counter(h4);
+            min-width: @header-indent*3;
+            left: @header-indent*-3;
+        }
+    }
+
+    .outline-h5 {
+        counter-reset: h6;
+        counter-increment: h5;
+
+        &>.outline-item::before {
+            content: counter(h2)"."counter(h3)"."counter(h4)"."counter(h5);
+            min-width: @header-indent*4;
+            left: @header-indent*-4;
+        }
+    }
+
+    .outline-h6 {
+        counter-increment: h6;
+
+        &>.outline-item::before {
+            content: counter(h2)"."counter(h3)"."counter(h4)"."counter(h5)"."counter(h6);
+            min-width: @header-indent*5;
+            left: @header-indent*-5;
+        }
+    }
 }
 
 // ============================== docsify sidebar