diff --git a/make-example.js b/make-example.js
index cf3916d7..0c0d199f 100644
--- a/make-example.js
+++ b/make-example.js
@@ -28,7 +28,8 @@ var siteConfig = {
             //  we get an error without this, here, though
             "steal-stache": "^4.0.1",
             "steal-conditional": "^0.3.6",
-            "bit-docs-html-codepen-link": "^1.0.0"
+            "bit-docs-html-codepen-link": "^1.0.0",
+            "bit-docs-html-toc": "^1.1.1"
         },
         staticDist: [
             path.join(__dirname, "dist", "static")
diff --git a/static/canjs.js b/static/canjs.js
index 91b356f6..8742ab90 100644
--- a/static/canjs.js
+++ b/static/canjs.js
@@ -156,6 +156,18 @@ function init() {
 		sidebarViewModel.selectedPageName = window.docObject.name;
 	}
 
+	// Set up the client-side TOC
+	var tocContainer = document.querySelector("#toc-sidebar");
+	var oldToc = document.querySelector("bit-toc");
+	if (oldToc) {
+		tocContainer.removeChild(oldToc);
+	}
+	var newToc = document.createElement("bit-toc");
+	newToc.depth = window.docObject.outline;
+	newToc.headingContainerSelector = "#right > article";
+	newToc.scrollSelector = "#toc-sidebar";
+	tocContainer.appendChild(newToc);
+
 	hasShownSearch = true;
 }
 
diff --git a/static/layout.less b/static/layout.less
index d00da3c0..82b826be 100644
--- a/static/layout.less
+++ b/static/layout.less
@@ -5,15 +5,15 @@
   transition: padding-bottom @transition-speed ease;
   display:-ms-grid;
   display: grid;
-  -ms-grid-columns: 300px 1fr;
-  grid-template-columns: max-content 1fr;
-  grid-template-areas: "header header" "left-nav content";
+  -ms-grid-columns: 300px 1fr 300px;
+  grid-template-columns: max-content 1fr max-content;
+  grid-template-areas: "header header header" "nav-sidebar content toc-sidebar";
 }
 #left {
   -ms-grid-row: 2;
   -ms-grid-column: 1;
   -ms-grid-column-span: 1;
-  grid-area: left-nav;
+  grid-area: nav-sidebar;
   height: calc(~"100vh - " @brand-height);// 53px header
   overflow-y: scroll;
   position: fixed;
@@ -40,6 +40,9 @@
   .transition-left;
   flex-grow: 1;
 }
+#toc-sidebar {
+  grid-area: toc-sidebar;
+}
 .column {
   height: 100%;
   overflow-y: auto;
diff --git a/templates/content.mustache b/templates/content.mustache
index b7f1c88e..c623c07d 100644
--- a/templates/content.mustache
+++ b/templates/content.mustache
@@ -22,4 +22,6 @@
       {{/with}}
 
   </div>
+  <div class="column" id="toc-sidebar">
+  </div>
 </div>