diff --git a/docs/src/layouts/App/base.scss b/docs/src/layouts/App/base.scss
index f47ac757..0cecf87f 100644
--- a/docs/src/layouts/App/base.scss
+++ b/docs/src/layouts/App/base.scss
@@ -24,7 +24,11 @@
   border: 4px solid rgba(0, 0, 0, 0);
   background-clip: padding-box;
   border-radius: 8px;
-  background-color: $colorBlack;
+  background-color: rgba($colorBlack, 0);
+}
+
+:hover::-webkit-scrollbar-thumb {
+  background-color: rgba($colorBlack, 0.1);
 }
 
 ::-webkit-scrollbar-button {
@@ -48,7 +52,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
   line-height: 1.7;
   font-feature-settings: 'cv05' 1;
-  background-color: rgba($colorBlack, 0.02);
+  background-color: $colorBackground;
   height: 100%;
 }
 
diff --git a/docs/src/layouts/App/index.vue b/docs/src/layouts/App/index.vue
index a1a2b658..a4154f3b 100644
--- a/docs/src/layouts/App/index.vue
+++ b/docs/src/layouts/App/index.vue
@@ -11,20 +11,22 @@
       />
     </header>
     <div class="app__content">
-      <nav class="app__sidebar">
-        <div class="app__link-group" v-for="(linkGroup, i) in linkGroups" :key="i">
-          <div class="app__link-group-title">
-            {{ linkGroup.title }}
+      <div class="app__sidebar-wrapper">
+        <nav class="app__sidebar">
+          <div class="app__link-group" v-for="(linkGroup, i) in linkGroups" :key="i">
+            <div class="app__link-group-title">
+              {{ linkGroup.title }}
+            </div>
+            <ul>
+              <li v-for="(item, j) in linkGroup.items" :key="j">
+                <g-link class="app__link" :to="item.link">
+                  {{ item.title }}
+                </g-link>
+              </li>
+            </ul>
           </div>
-          <ul>
-            <li v-for="(item, j) in linkGroup.items" :key="j">
-              <g-link class="app__link" :to="item.link">
-                {{ item.title }}
-              </g-link>
-            </li>
-          </ul>
-        </div>
-      </nav>
+        </nav>
+      </div>
       <main class="app__main">
         <slot/>
         <page-navigation />
diff --git a/docs/src/layouts/App/style.scss b/docs/src/layouts/App/style.scss
index 86705888..6939d412 100644
--- a/docs/src/layouts/App/style.scss
+++ b/docs/src/layouts/App/style.scss
@@ -51,26 +51,44 @@
   }
 
   &__header {
+    align-self: center;
+    position: fixed;
+    z-index: 2;
+    width: 100%;
+    top: 0;
     flex: 0 0 auto;
     align-items: center;
     justify-content: space-between;
     padding-top: 2rem;
     padding-bottom: 2rem;
+    background-color: rgba($colorBackground, 0.8);
+    backdrop-filter: blur(10px);
   }
 
   &__content {
     flex: 1 1 auto;
   }
 
-  &__sidebar {
+  &__sidebar-wrapper {
     flex: 0 0 auto;
+    align-self: flex-start;
+    position: sticky;
+    top: 0;
     width: 18rem;
+    height: 100vh;
     padding-right: 3rem;
+    padding-top: 100px;
+  }
+
+  &__sidebar {
+    overflow: auto;
+    height: 100%;
   }
 
   &__main {
     flex: 1 1 auto;
     min-width: 0;
+    padding-top: 100px;
   }
 
   &__inner {
diff --git a/docs/src/variables.scss b/docs/src/variables.scss
index bbb10d0b..8badbfb9 100644
--- a/docs/src/variables.scss
+++ b/docs/src/variables.scss
@@ -1,5 +1,6 @@
 $colorWhite: #FFF;
 $colorBlack: #000;
+$colorBackground: mix($colorBlack, $colorWhite, 2%);
 
 /* Default Equations */
 $linear: cubic-bezier(0.250, 0.250, 0.750, 0.750);