diff --git a/src/scss/layout/_navbar.scss b/src/scss/layout/_navbar.scss
index a0b83d265..74e256b29 100644
--- a/src/scss/layout/_navbar.scss
+++ b/src/scss/layout/_navbar.scss
@@ -54,8 +54,9 @@
 @mixin navbar-dark {
   --#{$prefix}navbar-border-color: #{$dark-mode-border-color};
   --#{$prefix}navbar-bg: #{$dark};
+  --#{$prefix}scrollbar-color: var(--#{$prefix}white-rgb);
   @include navbar-color($dark, $navbar-dark-color, $navbar-dark-brand-color, $navbar-dark-active-color, $navbar-dark-disabled-color, $navbar-dark-active-bg);
-  @include scrollbar;
+  //@include scrollbar;
 }
 
 @mixin navbar-vertical-nav {
@@ -386,7 +387,7 @@ Navbar vertical
             z-index: $zindex-fixed;
             align-items: flex-start;
             @include transition(transform $transition-time);
-            overflow-x: auto;
+            overflow-y: scroll;
             padding: 0;
 
             &.navbar-right {
diff --git a/src/scss/mixins/_mixins.scss b/src/scss/mixins/_mixins.scss
index 8fd545094..a5b4226d3 100644
--- a/src/scss/mixins/_mixins.scss
+++ b/src/scss/mixins/_mixins.scss
@@ -15,22 +15,23 @@
 
 @mixin scrollbar($color: var(--#{$prefix}body-color-rgb)) {
   #{if(&, "&", "*")}::-webkit-scrollbar {
-    width: .5rem;
-    height: .5rem;
+    width: 1rem;
+    height: 1rem;
     @include transition(background $transition-time);
   }
 
   #{if(&, "&", "*")}::-webkit-scrollbar-thumb {
-    border-radius: 5px;
-    background: rgba($color, .16);
+    border-radius: 1rem;
+    border: 5px solid transparent;
+    box-shadow: inset 0 0 0 1rem rgba(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color-rgb)), .16);
   }
 
   #{if(&, "&", "*")}::-webkit-scrollbar-track {
-    background: rgba($color, .06);
+    background: transparent;
   }
 
   #{if(&, "&", "*")}:hover::-webkit-scrollbar-thumb {
-    background: rgba($color, .32);
+    box-shadow: inset 0 0 0 1rem rgba(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color-rgb)), .32);
   }
 
   #{if(&, "&", "*")}::-webkit-scrollbar-corner {