diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
index 3be288ac14f..83780720c5c 100644
--- a/assets/scss/_styles_project.scss
+++ b/assets/scss/_styles_project.scss
@@ -18,17 +18,13 @@
 @import "_resizable.scss";
 @import "_resizable-bootstrap-overrides.scss";
 
+
 // Page Layout Sections
 .td-home {
   background-color: $dark;
   overflow-x: hidden;
 }
 
-// .td-cover-block--height-full {
-//   min-height: 90vh;
-
-// }
-
 //main sections
 .td-outer {
   margin-top: 0;
@@ -36,10 +32,6 @@
 
 .td-main main {
   @include media-breakpoint-up(md) {
-    // `body` already reserves 5.5rem to clear the fixed navbar (see below), so
-    // this is just breathing room beneath it - not navbar clearance. The former
-    // 4rem stacked on top of the body padding and pushed content ~64px down on
-    // every docs page, leaving a large blank band above the content.
     padding-top: 1.5rem;
     padding-left: 1rem;
     padding-right: 1rem;
@@ -104,12 +96,12 @@ body {
 
   overflow-x: hidden;
 }
+
 .td-content .card img {
-  width: 100% ;
+  width: 100%;
 }
 
 // Links
-
 a {
   color: $primary;
   text-decoration: none;
@@ -133,10 +125,7 @@ a:not([href]):not([class]):hover {
 }
 
 .taxonomy {
-  // .taxonomy-terms-cloud
-
   .taxonomy-term {
-
     border-width: 0;
     border-radius: 0 3px 3px 0;
     display: inline-block;
@@ -151,13 +140,10 @@ a:not([href]):not([class]):hover {
     transition: color 0.2s;
     clip-path: polygon(100% 0, 100% 100%, 0.8em 100%, 0 50%, 0.8em 0);
 
-
     &:hover {
       background-color: $primary;
       color: $white;
-
     }
-
   }
 
   .article-teaser {
@@ -181,7 +167,6 @@ a:not([href]):not([class]):hover {
 // Footer
 .td-footer {
   background-color: $black;
-  // bottom: 0%;
   z-index: 5;
 }
 
@@ -200,6 +185,26 @@ a:not([href]):not([class]):hover {
   padding-left: 0.5rem;
   margin-top: 0;
   overflow-x: hidden;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: $primary;
+    border-radius: 4px;
+
+    &:hover {
+      background-color: lighten($primary, 10%);
+    }
+  }
+
   &__inner {
     @include media-breakpoint-up(md) {
       @supports (position: sticky) {
@@ -285,8 +290,6 @@ a:not([href]):not([class]):hover {
           $primary 90% 100%) 1;
       padding: 0.25rem;
       padding-left: 0.5rem !important;
-      // background-image: linear-gradient(to left, rgba($dark,.33),rgba($dark,.5),rgba($dark,.75),#1e2117, #31412b, #3b6447, #378b6d, #00b39f);
-      // background-color: rgba($primary, .05);
       color: $secondary;
     }
 
@@ -313,13 +316,31 @@ a:not([href]):not([class]):hover {
       #000000);
   padding-left: $sidebar-padding-horizontal;
   padding-right: $sidebar-padding-horizontal;
+  position: sticky;
+  top: 5.5rem;
+  padding-top: $sidebar-padding-vertical;
+  height: calc(100vh - 5.5rem);
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+  margin-right: 8px;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
 
-  @supports (position: sticky) {
-    position: sticky;
-    top: 5.5rem;
-    padding-top: $sidebar-padding-vertical;
-    height: calc(100vh - 5.5rem);
-    overflow-y: auto;
+  &::-webkit-scrollbar-track {
+    background: transparent;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: $primary;
+    border-radius: 4px;
+
+    &:hover {
+      background-color: lighten($primary, 10%);
+    }
   }
 
   .taxo-categories {
@@ -399,8 +420,9 @@ a:not([href]):not([class]):hover {
   display: flex;
   align-items: center;
   color: $casper;
+
   &:hover {
-    background-color: rgba($primary, 0.3)
+    background-color: rgba($primary, 0.3);
   }
 }
 
@@ -420,9 +442,7 @@ a:not([href]):not([class]):hover {
   color: $casper;
 }
 
-
 // Style alert boxes.
-
 .alert {
   font-weight: $font-weight-medium;
   background: $gray-900;
@@ -437,7 +457,6 @@ a:not([href]):not([class]):hover {
 }
 
 // Dashboard
-
 .l5btn {
   padding: 1.25rem;
   border-radius: 0.75rem;
@@ -496,7 +515,7 @@ a:not([href]):not([class]):hover {
   font-size: 5rem;
   text-align: left;
   background-image:
-    linear-gradient(to right, rgba(255, 255, 255, .9) 0px, rgb(0, 211, 169) 34%, rgb(235, 192, 23) 71%, rgb(255,243,197) 100%);
+    linear-gradient(to right, rgba(255, 255, 255, .9) 0px, rgb(0, 211, 169) 34%, rgb(235, 192, 23) 71%, rgb(255, 243, 197) 100%);
   background-position:
     0% 0%,
     0% 0%;
@@ -525,7 +544,6 @@ a:not([href]):not([class]):hover {
   }
 }
 
-
 .dash-tangle {
   width: 78.14231rem;
   height: 74.72rem;
@@ -598,6 +616,7 @@ a:not([href]):not([class]):hover {
     max-width: 70%;
     text-align: left;
     flex-shrink: 0;
+
     @media (max-width: 768px) {
       max-width: 60%;
     }
@@ -724,8 +743,8 @@ a:not([href]):not([class]):hover {
   display: flex;
   flex-wrap: nowrap;
   overflow-x: auto;
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 }
 
 .nav-tabs::-webkit-scrollbar {