diff --git a/public/css/extra.css b/public/css/extra.css
index 2b23ad24..f46eb3e6 100644
--- a/public/css/extra.css
+++ b/public/css/extra.css
@@ -253,6 +253,32 @@
     padding-right: 40px;
 }
 
+.ui-toc-dropdown .nav .nav>li>ul>li>ul>li>a {
+  padding-top: 1px;
+  padding-bottom: 1px;
+  padding-left: 50px;
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.ui-toc-dropdown[dir='rtl'] .nav .nav>li>ul>li>ul>li>a {
+  padding-right: 50px;
+}
+
+.ui-toc-dropdown .nav .nav>li>ul>li>ul>li>ul>li>a {
+  padding-top: 1px;
+  padding-bottom: 1px;
+  padding-left: 60px;
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.ui-toc-dropdown[dir='rtl'] .nav .nav>li>ul>li>ul>li>ul>li>a {
+  padding-right: 60px;
+}
+
+
+
 .ui-toc-dropdown .nav .nav>li>a:focus,.ui-toc-dropdown .nav .nav>li>a:hover {
     padding-left: 29px;
 }
@@ -269,6 +295,22 @@
     padding-right: 39px;
 }
 
+.ui-toc-dropdown .nav .nav>li>ul>li>ul>li>a:focus,.ui-toc-dropdown .nav .nav>li>ul>li>ul>li>a:hover {
+  padding-left: 49px;
+}
+
+.ui-toc-dropdown[dir='rtl'] .nav .nav>li>ul>li>ul>li>a:focus,.ui-toc-dropdown[dir='rtl'] .nav .nav>li>ul>li>ul>li>a:hover {
+  padding-right: 49px;
+}
+
+.ui-toc-dropdown .nav .nav>li>ul>li>ul>li>ul>li>a:focus,.ui-toc-dropdown .nav .nav>li>ul>li>ul>li>ul>li>a:hover {
+  padding-left: 59px;
+}
+
+.ui-toc-dropdown[dir='rtl'] .nav .nav>li>ul>li>ul>li>ul>li>a:focus,.ui-toc-dropdown[dir='rtl'] .nav .nav>li>ul>li>ul>li>ul>li>a:hover {
+  padding-right: 59px;
+}
+
 .ui-toc-dropdown .nav .nav>.active:focus>a,.ui-toc-dropdown .nav .nav>.active:hover>a,.ui-toc-dropdown .nav .nav>.active>a {
     padding-left: 28px;
     font-weight: 500;
@@ -287,6 +329,24 @@
     padding-right: 38px;
 }
 
+.ui-toc-dropdown .nav .nav>.active>.nav>.active>.nav>.active:focus>a,.ui-toc-dropdown .nav .nav>.active>.nav>.active>.nav>.active:hover>a,.ui-toc-dropdown .nav .nav>.active>.nav>.active>.nav>.active>a {
+  padding-left: 48px;
+  font-weight: 500;
+}
+
+.ui-toc-dropdown[dir='rtl'] .nav .nav>.active>.nav>.active>.nav>.active:focus>a,.ui-toc-dropdown[dir='rtl'] .nav .nav>.active>.nav>.active>.nav>.active:hover>a,.ui-toc-dropdown[dir='rtl'] .nav .nav>.active>.active>.nav>.nav>.active>a {
+  padding-right: 48px;
+}
+
+.ui-toc-dropdown .nav .nav>.active>.nav>.active>.nav>.active>.nav>.active:focus>a,.ui-toc-dropdown .nav .nav>.active>.nav>.active>.nav>.active>.nav>.active:hover>a,.ui-toc-dropdown .nav .nav>.active>.nav>.active>.nav>.active>.nav>.active>a {
+  padding-left: 58px;
+  font-weight: 500;
+}
+
+.ui-toc-dropdown[dir='rtl'] .nav .nav>.active>.nav>.active>.nav>.active>.nav>.active:focus>a,.ui-toc-dropdown[dir='rtl'] .nav .nav>.active>.nav>.active>.nav>.active>.nav>.active:hover>a,.ui-toc-dropdown[dir='rtl'] .nav .nav>.active>.active>.nav>.nav>.active>.nav>.active>a {
+  padding-right: 58px;
+}
+
 /* support japanese font */
 .markdown-body[lang^="ja"] {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, Meiryo, "メイリオ", "MS Gothic", "ＭＳ ゴシック", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
diff --git a/public/docs/yaml-metadata.md b/public/docs/yaml-metadata.md
index 839616a8..48bc06ea 100644
--- a/public/docs/yaml-metadata.md
+++ b/public/docs/yaml-metadata.md
@@ -128,6 +128,22 @@ This option allows you to enable Disqus with your shortname.
 disqus: codimd
 ```
 
+toc
+---
+
+This option allows you to set options regarding the table of contents (toc). Currently, its only option is to set the maxDepth.
+
+**Notice: always use two spaces as indention in YAML metadata!**
+
+
+> **maxDepth:**
+> default: not set (whioch will show everything until level 3 (h1 -- h3))
+> max: 5 (as defined by doctoc)
+
+
+**Example**
+
+
 type
 ---
 This option allows you to switch the document view to the slide preview, to simplify live editing of presentations.
diff --git a/public/js/extra.js b/public/js/extra.js
index dfc206b0..b203280e 100644
--- a/public/js/extra.js
+++ b/public/js/extra.js
@@ -811,8 +811,12 @@ export function generateToc (id) {
   const target = $(`#${id}`)
   target.html('')
   /* eslint-disable no-unused-vars */
+
+  var tocOptions = md.meta.toc || {}
+  var maxLevel = (typeof tocOptions.maxLevel === 'number' && tocOptions.maxLevel > 0) ? tocOptions.maxLevel : 3
+
   var toc = new window.Toc('doc', {
-    level: 3,
+    level: maxLevel,
     top: -1,
     class: 'toc',
     ulClass: 'nav',
@@ -1010,8 +1014,12 @@ export function renderTOC (view) {
     const target = $(`#${id}`)
     target.html('')
     /* eslint-disable no-unused-vars */
+
+    var tocOptions = md.meta.toc || {}
+    var maxLevel = (typeof tocOptions.maxLevel === 'number' && tocOptions.maxLevel > 0) ? tocOptions.maxLevel : 3
+
     const TOC = new window.Toc('doc', {
-      level: 3,
+      level: maxLevel,
       top: -1,
       class: 'toc',
       targetId: id,