diff --git a/assets/styles/base.scss b/assets/styles/base.scss
index aa172d0c3..b26dbd678 100644
--- a/assets/styles/base.scss
+++ b/assets/styles/base.scss
@@ -23,6 +23,23 @@ p, ul, text {
   padding: revert;
 }
 
+.mainTOC {
+  background: var(--lightgray);
+  border-radius: 5px;
+  padding: 0.75em 1em;
+}
+
+.mainTOC details summary {
+  cursor: zoom-in;
+  font-family: Inter;
+  color: var(--dark);
+  font-weight: 700;
+}
+
+.mainTOC details[open] summary {
+    cursor: zoom-out;
+}
+
 #TableOfContents > ol {
   counter-reset: section;
   margin-left: 0em;
diff --git a/data/config.yaml b/data/config.yaml
index c59c0e082..e33c32939 100644
--- a/data/config.yaml
+++ b/data/config.yaml
@@ -1,5 +1,6 @@
 name: Jacky Zhao
 enableToc: true
+openToc: false
 enableLinkPreview: true
 enableLatex: true
 description:
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 3423a0c58..02965f91c 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -24,8 +24,10 @@
       </ul>
       {{ if (and $.Site.Data.config.enableToc (ne .Params.enableToc false)) }}
       <aside class="mainTOC">
-          <h3>Table of Contents</h3>
-          {{ .TableOfContents }}
+          <details {{ if $.Site.Data.config.openToc }}open {{ end }}>
+            <summary>Table of Contents</summary>
+            {{ .TableOfContents }}
+          </details>
       </aside>
       {{end}}
       {{partial "textprocessing.html" . }}
diff --git a/layouts/index.html b/layouts/index.html
index 6fb75f9d9..466a05a39 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -15,8 +15,10 @@
     <article>
         {{ if (and $.Site.Data.config.enableToc (ne .Params.enableToc false)) }}
         <aside class="mainTOC">
-            <h3>Table of Contents</h3>
-            {{ .TableOfContents }}
+            <details {{ if $.Site.Data.config.openToc }}open {{ end }}>
+                <summary>Table of Contents</summary>
+                {{ .TableOfContents }}
+            </details>
         </aside>
         {{end}}
         {{partial "textprocessing.html" . }}