diff --git a/css/kobalt.css b/css/kobalt.css
index 575e3ef..25272b3 100644
--- a/css/kobalt.css
+++ b/css/kobalt.css
@@ -1,3 +1,17 @@
+#table-of-contents {
+    border: solid 1px #cccccc;
+    border-radius: 10px;
+}
+
+.toc-item {
+    padding: 2px;
+}
+
+.toc-item a:hover {
+    background: #48D1CC;
+    display: block;
+}
+
 .bs-callout {
     padding: 20px;
     margin: 20px 0;
diff --git a/js/kobalt.js b/js/kobalt.js
index 1e4919f..636c776 100644
--- a/js/kobalt.js
+++ b/js/kobalt.js
@@ -71,6 +71,14 @@ function generateNavBar(index) {
 // Table of contents
 //
 
+function indent(n) {
+    var result = "";
+    for (var i = 0; i < n; i++) {
+        result += "&nbsp;&nbsp;&nbsp;&nbsp;"
+    }
+    return result;
+}
+
 function generateToc() {
     var sections = document.getElementsByClassName("section");
 
@@ -87,16 +95,17 @@ function generateToc() {
             ind = indentAttribute.textContent;
         }
         if (! ind) ind = 0;
-        if (ind > currentLevel) {
-            if (ind == 0) {
-                toc += '<ul class="nav">\n';
-            } else {
-                toc += '<ul>\n';
-            }
-        } else if (ind < currentLevel) {
-            toc += '</ul>\n';
-        }
-        toc += '<li><a href="#' + section.id + '">' + section.innerHTML + '</a></li>\n';
+        var content = indent(ind) + section.innerHTML;
+        //if (ind > currentLevel) {
+        //    if (ind == 0) {
+        //        toc += '<ul class="nav">\n';
+        //    } else {
+        //        toc += '<ul>\n';
+        //    }
+        //} else if (ind < currentLevel) {
+        //    toc += '</ul>\n';
+        //}
+        toc += '<div class="toc-item"><a href="#' + section.id + '">' + content + '</a></div>\n';
         currentLevel = ind;
     }
     toc += "</ul>\n";