diff --git a/web/pgadmin/static/scss/_codemirror.overrides.scss b/web/pgadmin/static/scss/_codemirror.overrides.scss
index 2857455be..d7c0ceda1 100644
--- a/web/pgadmin/static/scss/_codemirror.overrides.scss
+++ b/web/pgadmin/static/scss/_codemirror.overrides.scss
@@ -179,3 +179,29 @@
 .CodeMirror-activeline-background {
   background: $color-danger-lighter !important;
 }
+
+.CodeMirror-simplescroll-horizontal {
+    height: $scrollbar-width;
+}
+
+.CodeMirror-simplescroll-vertical {
+    width: $scrollbar-width;
+}
+
+.CodeMirror-scrollbar-filler, .CodeMirror-simplescroll-horizontal, .CodeMirror-simplescroll-vertical {
+    background: rgba($scrollbar-base-color, 0.2);
+}
+
+.CodeMirror-simplescroll-horizontal, .CodeMirror-simplescroll-vertical {
+
+    & div {
+        border: 0.25rem solid transparent;
+        border-radius: $border-radius*2;
+        background-clip: content-box;
+        background-color: rgba($scrollbar-base-color, 0.7);
+
+        &:hover {
+            background-color: $scrollbar-base-color;
+        }
+    }
+}
diff --git a/web/pgadmin/static/scss/_pgadmin.style.scss b/web/pgadmin/static/scss/_pgadmin.style.scss
index 5d51c107e..2bdb77132 100644
--- a/web/pgadmin/static/scss/_pgadmin.style.scss
+++ b/web/pgadmin/static/scss/_pgadmin.style.scss
@@ -1034,3 +1034,20 @@ textarea {
     color: $input-color;
     background-color: $input-bg;
 }
+
+::-webkit-scrollbar, ::-webkit-scrollbar-corner {
+    width: $scrollbar-width;
+    height: $scrollbar-width;
+    background-color: rgba($scrollbar-base-color, 0.2);
+}
+
+::-webkit-scrollbar-thumb {
+    border: 0.25rem solid transparent;
+    border-radius: $border-radius*2;
+    background-clip: content-box;
+    background-color: rgba($scrollbar-base-color, 0.7);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: $scrollbar-base-color;
+}
diff --git a/web/pgadmin/static/scss/resources/_default.variables.scss b/web/pgadmin/static/scss/resources/_default.variables.scss
index 0782022ec..f769e50b3 100644
--- a/web/pgadmin/static/scss/resources/_default.variables.scss
+++ b/web/pgadmin/static/scss/resources/_default.variables.scss
@@ -246,8 +246,8 @@ $no-border-radius: 0px !important;
 
 $btn-checkbox-padding: $input-btn-padding-y $input-btn-padding-x;
 
-$scrollbar-color: $color-gray !default;
-$scrollbar-hover-color: $color-gray-dark !default;
+$scrollbar-base-color: #bac1cd !default;
+$scrollbar-width: 1rem;
 
 $security-text-color: $white;
 $security-btn-color: #038bba;
diff --git a/web/pgadmin/static/scss/resources/dark/_theme.variables.scss b/web/pgadmin/static/scss/resources/dark/_theme.variables.scss
index be5b77185..5be687ec9 100644
--- a/web/pgadmin/static/scss/resources/dark/_theme.variables.scss
+++ b/web/pgadmin/static/scss/resources/dark/_theme.variables.scss
@@ -70,8 +70,7 @@ $explain-sev-4-color: $color-fg;
 
 $negative-bg: $color-bg;
 
-$scrollbar-color:  $color-gray-lighter!default;
-$scrollbar-hover-color: #666666 !default;
+$scrollbar-base-color: #616161;
 
 $loader-icon : url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 38 38' style='enable-background:new 0 0 38 38;' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bfill:none;stroke:%23ebeef3;stroke-width:2;%7d .st1%7bfill:none;stroke:%2340617d;stroke-width:2;%7d %3c/style%3e%3cg%3e%3cg transform='translate(1 1)'%3e%3ccircle class='st0' cx='18' cy='18' r='18'/%3e%3cpath class='st1' d='M36,18c0-9.9-8.1-18-18-18 '%3e%3canimateTransform accumulate='none' additive='replace' attributeName='transform' calcMode='linear' dur='0.7s' fill='remove' from='0 18 18' repeatCount='indefinite' restart='always' to='360 18 18' type='rotate'%3e%3c/animateTransform%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e ") !default;
 $loader-icon-small: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 38 38' style='enable-background:new 0 0 38 38;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23EBEEF3;stroke-width:5;%7D .st1%7Bfill:none;stroke:%2340617d;stroke-width:5;%7D%0A%3C/style%3E%3Cg%3E%3Cg transform='translate(1 1)'%3E%3Ccircle class='st0' cx='18' cy='18' r='16'/%3E%3Cpath class='st1' d='M34,18c0-8.8-7.2-16-16-16 '%3E%3CanimateTransform accumulate='none' additive='replace' attributeName='transform' calcMode='linear' dur='0.7s' fill='remove' from='0 18 18' repeatCount='indefinite' restart='always' to='360 18 18' type='rotate'%3E%3C/animateTransform%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") !default;