diff --git a/docs/source/javascripts/documentation.js b/docs/source/javascripts/documentation.js
index 9e1558ffd..8dd7e7cb1 100644
--- a/docs/source/javascripts/documentation.js
+++ b/docs/source/javascripts/documentation.js
@@ -5,6 +5,7 @@ import './responsive-navigation.js';
 demo();
 anchorableTitles();
 sidebarFollowScroll();
+//activeLinks();
 
 function demo() {
   places({
@@ -51,3 +52,23 @@ function sidebarFollowScroll() {
     }
   });
 }
+
+// The Following code is used to set active items
+// On the documentation sidebar depending on the
+// clicked item
+
+  let linksContainer = document.querySelector('#sidebar ul');
+  let removeActive = (item) => {
+    item.classList.remove('active');
+  };
+
+  linksContainer.addEventListener('click', function(e) {
+
+    // UGLY AS F**K
+    if (e.target.tagName === 'A') {
+        [].forEach.call(this.children, removeActive);
+      e.target.parentNode.classList.add('active');
+    }
+  });
+
+
diff --git a/docs/source/partials/documentation/sidebar.md b/docs/source/partials/documentation/sidebar.md
index 169677efc..7191b8786 100644
--- a/docs/source/partials/documentation/sidebar.md
+++ b/docs/source/partials/documentation/sidebar.md
@@ -1,3 +1,3 @@
 - [Getting started](#getting-started)
 - [API](#api)
-- [Rate limit](#rate-limitf)
+- [Rate limit](#rate-limit)
diff --git a/docs/source/stylesheets/components/_containers.scss b/docs/source/stylesheets/components/_containers.scss
index 476cdf9bf..7b13045d2 100644
--- a/docs/source/stylesheets/components/_containers.scss
+++ b/docs/source/stylesheets/components/_containers.scss
@@ -107,7 +107,7 @@ section {
       min-height: 314px
     }
 
-    svg {
+    .fl-right svg {
       path,
       ellipse {
         transform: translateY(12px);
diff --git a/docs/source/stylesheets/components/_documentation.scss b/docs/source/stylesheets/components/_documentation.scss
index 2fe408193..7121f9571 100644
--- a/docs/source/stylesheets/components/_documentation.scss
+++ b/docs/source/stylesheets/components/_documentation.scss
@@ -43,6 +43,12 @@
     }
 
     h2, h3 {
+      padding-bottom: 8px;
+
+      .anchor {
+        color: $red-pink;
+        text-decoration: none;
+      }
       &:hover {
         .anchor {
           display: inline;
@@ -50,7 +56,9 @@
       }
 
       &:target {
-        text-decoration: underline;
+        .anchor {
+          display: inline;
+        }
       }
     }
   }
diff --git a/docs/source/stylesheets/components/_sidebar.scss b/docs/source/stylesheets/components/_sidebar.scss
index 9cffbb6a5..557e309c8 100644
--- a/docs/source/stylesheets/components/_sidebar.scss
+++ b/docs/source/stylesheets/components/_sidebar.scss
@@ -38,10 +38,13 @@ nav.sidebar {
 
         &:focus,
         &:target {
-          color: $red-pink;
-          box-shadow: inset -2px 0 0 0 $red-pink
+          @extend %active-links;
         }
       }
+
+      &.active a{
+        @extend %active-links;
+      }
     }
   }
 
diff --git a/docs/source/stylesheets/vendors/_mixins.scss b/docs/source/stylesheets/vendors/_mixins.scss
index 3f4449739..4de03cd29 100644
--- a/docs/source/stylesheets/vendors/_mixins.scss
+++ b/docs/source/stylesheets/vendors/_mixins.scss
@@ -18,6 +18,11 @@
   float: none;
 }
 
+%active-links {
+  color: $red-pink;
+  box-shadow: inset -2px 0 0 0 $red-pink
+}
+
 @mixin big-min-mq {
   @media (min-width: $bp-big){
     @content