diff --git a/exampleSite/content/about.md b/exampleSite/content/about.md
index dd83942..28ca6e6 100644
--- a/exampleSite/content/about.md
+++ b/exampleSite/content/about.md
@@ -1,6 +1,7 @@
 ---
 title: About Hugo XMin
 author: Yihui Xie
+toc: true
 ---
 
 **XMin** is the first Hugo theme I have designed. The original reason that I wrote it was I needed a minimal example of Hugo themes when I was writing the  [**blogdown**](https://github.com/rstudio/blogdown) book. Basically I wanted a simple theme that supports a navigation menu, a home page, other single pages, lists of pages, blog posts, categories, tags, and RSS. That is all. Nothing fancy. In terms of CSS and JavaScript, I really want to keep them minimal. In fact, this theme does not contain any JavaScript code at all, although on this example website I did introduce some JavaScript code (still relatively simple anyway). The theme does not contain any images, either, and is pretty much a plain-text theme.
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 0fb2f8b..26886b1 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -5,6 +5,10 @@
 {{ if (gt .Params.date 0) }}<h2 class="date">{{ .Date.Format "2006/01/02" }}</h2>{{ end }}
 </div>
 
+{{ if .Params.toc }}
+{{ .TableOfContents }}
+{{ end }}
+
 <main>
 {{ .Content }}
 </main>
diff --git a/static/css/style.css b/static/css/style.css
index 0edd168..debcb49 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -21,6 +21,10 @@ hr {
   border-style: dashed;
   color: #ddd;
 }
+#TableOfContents, #TOC {
+  border: 1px solid #eee;
+  border-radius: 5px;
+}
 
 /* code */
 pre {