diff --git a/assets/sass/atom.scss b/assets/sass/atom.scss
index 238a3e6..d81c05e 100644
--- a/assets/sass/atom.scss
+++ b/assets/sass/atom.scss
@@ -36,6 +36,14 @@ $screens: (
     margin-left: $size;
     margin-right: $size;
   }
+
+  .#{$prefix}pb-#{$scale} {
+    padding-bottom: $size;
+  }
+  .#{$prefix}py-#{$scale} {
+    padding-top: $size;
+    padding-bottom: $size;
+  }
 }
 
 @each $scale in $scales {
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index 2e13724..ab66605 100644
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -1,6 +1,7 @@
 @import "atom.scss";
 @import "markdown.scss";
 @import "syntax.scss";
+@import "toc.scss";
 
 :root {
   --pm: #0fa0ce;
@@ -99,16 +100,6 @@ header nav {
   color: var(--tag);
 }
 
-details.toc ul {
-  list-style-type: none;
-  padding-inline-start: 1em;
-  margin: 0;
-}
-
-details.toc ul > li {
-  margin: 1em 0;
-}
-
 ::-webkit-scrollbar {
   width: 4px;
   height: 4px;
diff --git a/assets/sass/toc.scss b/assets/sass/toc.scss
new file mode 100644
index 0000000..f4e2237
--- /dev/null
+++ b/assets/sass/toc.scss
@@ -0,0 +1,89 @@
+details.toc {
+  position: sticky;
+  top: 0;
+  background-color: var(--bg);
+  transition: .5s all;
+}
+
+details.toc summary {
+  position: relative;
+  width: fit-content;
+  cursor: pointer;
+  background-color: var(--bg);
+  transition: .5s all;
+}
+
+details.toc div {
+  background-color: var(--bg);
+  transition: .5s all;
+}
+
+details.toc ul {
+  list-style-type: none;
+  padding-inline-start: 1em;
+  margin: 0;
+}
+
+details.toc ul > li {
+  margin: 1em 0;
+}
+
+details.toc-bar,
+details.toc-lines {
+  & summary {
+    padding-right: 0.5em;
+    list-style: none;
+  }
+  & summary::-webkit-details-marker {
+    display: none;
+  }
+  & div {
+    padding-top: 1em;
+  }
+}
+
+details.toc-bar {
+  top: 1rem;
+  background-color: transparent;
+
+  & div {
+    top: -1em;
+    padding-top: 2em;
+    background-color: var(--bg);
+  }
+
+  & summary {
+    --toc-bar-ht: 4px;
+    --toc-bar-wd: 8%;
+    width: var(--toc-bar-wd);
+    height: var(--toc-bar-ht);
+    margin-left: calc(50% - var(--toc-bar-wd) / 2);
+    border-radius: calc(var(--toc-bar-ht) / 2);
+    background-color: var(--ft);
+    box-shadow: var(--bg) 0 0 8px 8px;
+  }
+}
+
+details.toc-default,
+details.toc-lines {
+  & summary {
+    padding-top: 1em;
+  }
+}
+
+details.toc-lines {
+  & summary::before {
+    content: "≡";
+    font-size: 1.5em;
+    position: relative;
+    top: 0;
+  }
+}
+
+details[open] {
+  &.toc-lines summary::before {
+    content: "×";
+    font-size: 1.7em;
+    top: -4px;
+  }
+}
diff --git a/config.toml b/config.toml
new file mode 100644
index 0000000..24fe028
--- /dev/null
+++ b/config.toml
@@ -0,0 +1,3 @@
+[module]
+  [module.hugoVersion]
+    extended = true
\ No newline at end of file
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 9bc2700..8cf840b 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -37,10 +37,12 @@ displayDate = true
 selectable = true
 # Custom global font. notice: `globalFontFamily` won't be working
 # on texts in some special positions like on titles
-globalFontFamily = 'Helvatica sans-serif'
+globalFontFamily = 'LXGW WenKai'
 # If set true, all your posts will use the chosen comment plugin
 # except those with a `comment: false` in their front-matter
 commentOnAllPosts = false
+# toc decides the shape of the toc button. e.g. default, lines, bar
+toc = "lines"
 
 # Disqus configuration
 [params.disqus]
diff --git a/images/screenshot-dark.png b/images/screenshot-dark.png
index a4fc88e..1b457fc 100644
Binary files a/images/screenshot-dark.png and b/images/screenshot-dark.png differ
diff --git a/images/screenshot.png b/images/screenshot.png
index 299c097..214ec4d 100644
Binary files a/images/screenshot.png and b/images/screenshot.png differ
diff --git a/images/tn.png b/images/tn.png
index c4a1982..3af6752 100644
Binary files a/images/tn.png and b/images/tn.png differ
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 7804152..2492e8c 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -2,7 +2,7 @@
 {{ if .Params.toc }}
 {{ partial "toc.html" . }}
 {{ end }}
-<h1 class="mt-8 mb-6">{{ .Title }}</h1>
+<h1 class="mt-6 mb-6">{{ .Title }}</h1>
 <div class="mb-3 text-xs flex justify-between sm:flex-col">
 	<div>
 	{{ if .Site.Params.displayDate }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 25b57c4..9ed2d4c 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,4 +1,4 @@
-<header class="flex justify-between items-center sm:my-3">
+<header class="flex justify-between items-center mb-6 sm:my-3">
   <div class="flex items-center">
     {{ if .Site.Params.brand }}
     <div class="mr-3 text-3xl"><a href="/">{{ .Site.Params.brand }}</a></div>
diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html
index 968e727..c8c5efb 100644
--- a/layouts/partials/toc.html
+++ b/layouts/partials/toc.html
@@ -1,6 +1,26 @@
-<details class="toc mt-8">
-  <summary>Table of Contents</summary>
-  <div>
+{{ if eq .Site.Params.toc "default" }}
+<details class="toc toc-default">
+  <summary></summary>
+  <div class="pb-1">
     {{ .TableOfContents }}
   </div>
-</details>
\ No newline at end of file
+</details>
+{{ end }}
+
+{{ if eq .Site.Params.toc "bar" }}
+<details class="toc toc-bar">
+  <summary></summary>
+  <div class="pb-1">
+    {{ .TableOfContents }}
+  </div>
+</details>
+{{ end }}
+
+{{ if eq .Site.Params.toc "lines" }}
+<details class="toc toc-lines">
+  <summary></summary>
+  <div class="pb-1">
+    {{ .TableOfContents }}
+  </div>
+</details>
+{{ end }}
\ No newline at end of file