diff --git a/packages/web/src/Screen.js b/packages/web/src/Screen.js
index 513194bb6..204c3bab4 100644
--- a/packages/web/src/Screen.js
+++ b/packages/web/src/Screen.js
@@ -67,20 +67,6 @@ const TabsPanelContainer = styled.div`
   ::-webkit-scrollbar {
     height: 7px;
   }
-  ::-webkit-scrollbar-track {
-    // -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3); 
-    border-radius: 1px;
-    background-color: #ddd;
-  }
- 
-  ::-webkit-scrollbar-thumb {
-    border-radius: 1px;
-    // -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.5); 
-    background-color: #aaa;
-    &:hover {
-      background-color: #99c;
-    }
-  }  
 }
 `;
 
diff --git a/packages/web/src/theme/dark.js b/packages/web/src/theme/dark.js
index ffe8122e5..5281b49cf 100644
--- a/packages/web/src/theme/dark.js
+++ b/packages/web/src/theme/dark.js
@@ -17,6 +17,7 @@ const theme = {
   tabs_background: '#444',
   gridheader_background: '#222',
   gridbody_background: '#000',
+  scrollbar_background: '#444',
 
   statusBarBackground: '#00c',
 };
diff --git a/packages/web/src/theme/fillTheme.js b/packages/web/src/theme/fillTheme.js
index 2225027d8..fab3f86e7 100644
--- a/packages/web/src/theme/fillTheme.js
+++ b/packages/web/src/theme/fillTheme.js
@@ -16,6 +16,7 @@ function fillOne(theme, name, type, add, background, fontName, invFontName, chan
     add[`${name}_background1`] = background;
     add[`${name}_background2`] = changeLightFunc(add[`${name}_background1`]);
     add[`${name}_background3`] = changeLightFunc(add[`${name}_background2`]);
+    add[`${name}_background4`] = changeLightFunc(add[`${name}_background3`]);
   }
 
   for (const colorName in presetPrimaryColors) {
diff --git a/packages/web/src/theme/light.js b/packages/web/src/theme/light.js
index a2ffaad60..27ff238db 100644
--- a/packages/web/src/theme/light.js
+++ b/packages/web/src/theme/light.js
@@ -18,6 +18,7 @@ const theme = {
   gridheader_background: '#f6f7f9',
   gridheader_type: 'light',
   gridbody_background: '#fff',
+  scrollbar_background: '#ddd',
 
   statusBarBackground: '#00c',
 };
diff --git a/packages/web/src/themes/ThemeHelmet.js b/packages/web/src/themes/ThemeHelmet.js
index b1024e95d..55854cbf1 100644
--- a/packages/web/src/themes/ThemeHelmet.js
+++ b/packages/web/src/themes/ThemeHelmet.js
@@ -20,6 +20,28 @@ export default function ThemeHelmet() {
         body {
           color: ${theme.main_font1};
         }
+
+        body *::-webkit-scrollbar {
+          height: 0.8em;
+          width: 0.8em;
+        }
+        body *::-webkit-scrollbar-track {
+          border-radius: 1px;
+          background-color: ${theme.scrollbar_background};
+        }
+        body *::-webkit-scrollbar-corner {
+          border-radius: 1px;
+          background-color: ${theme.scrollbar_background2};
+        }
+       
+        body *::-webkit-scrollbar-thumb {
+          border-radius: 1px;
+          background-color: ${theme.scrollbar_background3};
+        }  
+
+        body *::-webkit-scrollbar-thumb:hover {
+          background-color: ${theme.scrollbar_background4};
+        }
         `}</style>
     </Helmet>
   );