diff --git a/assets/scss/index.scss b/assets/scss/index.scss
index b701dad..d3c6d46 100644
--- a/assets/scss/index.scss
+++ b/assets/scss/index.scss
@@ -241,6 +241,75 @@ a {
 
 /* Sections */
 
+.table-of-contents {
+  position: fixed;
+  left: 0px;
+  top: 0px;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+
+  .extend {
+    margin: auto;
+    padding-block: 1rem;
+    padding-inline: 0.4rem;
+    border-radius: 0rem 0.5rem 0.5rem 0rem;
+    background-color: black;
+    cursor: pointer;
+  }
+}
+
+#TableOfContents {
+  display: none;
+  margin: auto;
+  padding-inline: 20px;
+  border-radius: 0rem 0.5rem 0.5rem 0rem;
+  background-color: black;
+  font-size: larger;
+
+  ul {
+    counter-reset:toc1; 
+    list-style-type:none;
+    padding-inline-start: 0rem;
+    padding-block: 0.5rem;
+  }
+
+  li {
+    list-style-type:none;
+
+    ul {
+      counter-reset:toc2;
+
+      li {
+        list-style-type:none;
+
+        ul {
+          counter-reset:toc3;
+
+          li:before {
+            counter-increment:toc3;
+            content:counter(toc1) "." counter(toc2) "." counter(toc3) " ";
+          }
+        }
+      }
+
+      li:before {
+        counter-increment:toc2;
+        content:counter(toc1) "." counter(toc2) " ";
+      }
+    }
+  }
+
+  li:before {
+    counter-increment:toc1;
+    content:counter(toc1) ". ";
+  }
+}
+
+#TableOfContents.show {
+  display: block;
+}
+
 #content {
   flex-grow: 1;
   display: flex;
@@ -248,7 +317,8 @@ a {
 }
 
 .title h1 {
-  font-size: xx-large;
+  font-size: xxx-large;
+  padding-block-end: 3rem;
 }
 
 .content {
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 087d2e4..6a1c401 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -14,6 +14,12 @@
             </div>
         {{ end }}
         <!-- <h6>{{ .Date.Format "Mon, Jan 2, 2006" }}</h6> -->
+        {{ if gt (.TableOfContents | findRE `<li>` | len) 4}}
+            <div class="table-of-contents">
+                {{ .TableOfContents }}
+                <div class="extend" onclick="toggleTableOfContent(event)"><i class="icon-angle-right"></i></div>
+            </div>
+        {{ end }}
         {{ .Content }}
     </div>
 {{ end }}
\ No newline at end of file
diff --git a/layouts/_default/summary.html b/layouts/_default/summary.html
new file mode 100644
index 0000000..e69de29
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index c1985b5..99db806 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -27,6 +27,7 @@
     <link rel="stylesheet" type="text/css" href="{{ $index.RelPermalink }}">
   {{ end }}
   <link rel="stylesheet" type="text/css" href="/icons/fontawesome.css">
+  <script src="/js/index.js"></script>
   <script src="/js/theme.js"></script>
   <script src="/js/scroll.js"></script>
 </head>
\ No newline at end of file
diff --git a/static/js/index.js b/static/js/index.js
new file mode 100644
index 0000000..3927ec2
--- /dev/null
+++ b/static/js/index.js
@@ -0,0 +1,7 @@
+function toggleTableOfContent(e) {
+  const toc = document.getElementById('TableOfContents');
+  toc.classList.toggle("show");
+  const extend = toc.parentElement.getElementsByClassName("extend")[0];
+  extend.children[0].classList.toggle("icon-angle-right");
+  extend.children[0].classList.toggle("icon-angle-left");
+}
\ No newline at end of file