diff --git a/assets/scss/content.scss b/assets/scss/content.scss
index 1318dccfc..8f1da5419 100644
--- a/assets/scss/content.scss
+++ b/assets/scss/content.scss
@@ -149,21 +149,25 @@
       }
 
       .tabs {
-        li {
-          margin: 4px 0;
-          font-size: 16px;
+        #TableOfContents > ul > li > a {
           font-weight: 500;
+        }
+        li {
+          margin: 10px 0;
+          font-size: 16px;
           line-height: 2;
           color: #36435c;
 
           a {
             display: block;
             width: 100%;
-            height: 32px;
+            font-weight: 400;
+            line-height: 24px;
             color: #36435c;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
+
+            &:hover {
+              color: #55bc8a;
+            }
           }
         }
         li li {
diff --git a/static/js/aside.js b/static/js/aside.js
index a29cf040e..f66522e35 100644
--- a/static/js/aside.js
+++ b/static/js/aside.js
@@ -24,4 +24,22 @@ var bindAsideScroll = function() {
       }
   });
 }
-bindAsideScroll()
\ No newline at end of file
+
+var bindClickLink = function() {
+  var aside = $('.aside')
+  var headerHeight = $('header').outerHeight()
+  aside.find('a').click(function(event) {
+    event.preventDefault()
+    var id = $(this).attr('href')
+    scrollToElement(id, headerHeight)
+  })
+}
+
+var scrollToElement = function(id, headerHeight) {
+  var element = $(id)
+  var toTop = element.offset().top
+  window.scrollTo(0, toTop - headerHeight)
+}
+
+bindAsideScroll()
+bindClickLink()
\ No newline at end of file