diff --git a/src/control/grid/grid/grid.scss b/src/control/grid/grid/grid.scss
index 3c054a833b2f8f30ca01163bf5c116af2498ae7f..52a3a4bebc67a4cb2a8fdbb695b44d6b187365a6 100644
--- a/src/control/grid/grid/grid.scss
+++ b/src/control/grid/grid/grid.scss
@@ -12,6 +12,9 @@ $control-grid: (
   row-expand-icon-margin: getCssVar('spacing','none') getCssVar('spacing','none') getCssVar('spacing','none') getCssVar(spacing, tight),
   now-header-height: auto,
   scrollbar-width: 4px,
+  scrollbar-bg-color: rgb(46 50 55 / 13%),
+  scrollbar-bg-hover-opacity: 0.5,
+  scrollbar-bg-hover-color: rgb(46 50 55 / 13%),
 );
 $control-grid-header: (
   text-color: getCssVar(color, text, 2),
@@ -298,6 +301,15 @@ font-weight: getCssVar(font-weight, bold),
     .el-scrollbar__bar.is-vertical{
       width: getCssVar(control-grid, scrollbar-width);
     }
+
+    .el-scrollbar__thumb{
+      background-color: getCssVar(control-grid, scrollbar-bg-color);
+
+      &:hover{
+        background-color: getCssVar(control-grid, scrollbar-bg-hover-color);
+        opacity: getCssVar(control-grid, scrollbar-bg-hover-opacity);
+       }
+    }
   }
 
   @include e(load-more-button) {