diff --git a/docs/theme/mkdocs/css/docs.css b/docs/theme/mkdocs/css/docs.css
index 8d7aca2f0c..bd9711cb43 100644
--- a/docs/theme/mkdocs/css/docs.css
+++ b/docs/theme/mkdocs/css/docs.css
@@ -24,6 +24,18 @@
   height: 100%;
 }
 
+#leftnav h3 {
+  font-size: 10px;
+  font-weight: 700;
+  color: #394d54;
+  line-height: 1;
+  margin: 0px 0 10px 0;
+  padding-left: 20px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .content-body {
   padding: 0px 0px 0px 20px;
 }
diff --git a/docs/theme/mkdocs/css/main.css b/docs/theme/mkdocs/css/main.css
index 18e65ebd3f..6b6ec3f731 100644
--- a/docs/theme/mkdocs/css/main.css
+++ b/docs/theme/mkdocs/css/main.css
@@ -902,7 +902,7 @@ div + .form-inline {
   margin-bottom: 22px;
 }
 #leftnav .nav {
-  margin: 0;
+  margin: 0, 0, 20px, 0;
 }
 #leftnav .nav > li > a {
   line-height: 22px;
diff --git a/docs/theme/mkdocs/toc.html b/docs/theme/mkdocs/toc.html
index 96d15c265c..1de2a4209f 100644
--- a/docs/theme/mkdocs/toc.html
+++ b/docs/theme/mkdocs/toc.html
@@ -1,5 +1,8 @@
-  {% for toc_item in toc %}
-    {% for toc_item in toc_item.children %}
-      <li class=""><a href="{{ toc_item.url }}">{{ toc_item.title }}</a></li>
+{% for toc_item in toc %}
+  {% for toc_h2_item in toc_item.children %}
+    <li class=""><a href="{{ toc_h2_item.url }}">{{ toc_h2_item.title }}</a></li>
+    {% for toc_h3_item in toc_h2_item.children %}
+      <h3><a href="{{ toc_h3_item.url }}">{{ toc_h3_item.title }}</a></h3>
+    {% endfor %}
   {% endfor %}
 {% endfor %}