diff --git a/encore/tailwind.config.js b/encore/tailwind.config.js
index 334097c..88d855a 100644
--- a/encore/tailwind.config.js
+++ b/encore/tailwind.config.js
@@ -59,15 +59,10 @@ module.exports = {
             },
             // custom scrollbar
             '.xt-overflow-main': {
-              '&::-webkit-scrollbar': {
-                height: '10px',
-                width: '10px',
-                background: theme('colors.white'),
-              },
-              '&::-webkit-scrollbar-thumb': {
-                background: theme('colors.gray.900'),
-              },
-              scrollbarColor: `${theme('colors.gray.900')} ${theme('colors.white')}`,
+              scrollbarColor: `${theme('colors.black')} ${theme('colors.white')}`,
+            },
+            '.xt-overflow-sub': {
+              scrollbarColor: `${theme('colors.gray.300')} ${theme('colors.white')}`,
             },
           }),
         },
diff --git a/nextjs/tailwind.config.js b/nextjs/tailwind.config.js
index 725cbc4..8c1eeb4 100644
--- a/nextjs/tailwind.config.js
+++ b/nextjs/tailwind.config.js
@@ -59,15 +59,10 @@ module.exports = {
             },
             // custom scrollbar
             '.xt-overflow-main': {
-              '&::-webkit-scrollbar': {
-                height: '10px',
-                width: '10px',
-                background: theme('colors.white'),
-              },
-              '&::-webkit-scrollbar-thumb': {
-                background: theme('colors.gray.900'),
-              },
-              scrollbarColor: `${theme('colors.gray.900')} ${theme('colors.white')}`,
+              scrollbarColor: `${theme('colors.black')} ${theme('colors.white')}`,
+            },
+            '.xt-overflow-sub': {
+              scrollbarColor: `${theme('colors.gray.300')} ${theme('colors.white')}`,
             },
           }),
         },
diff --git a/parcel/tailwind.config.js b/parcel/tailwind.config.js
index 7d2938c..47a74e8 100644
--- a/parcel/tailwind.config.js
+++ b/parcel/tailwind.config.js
@@ -59,15 +59,10 @@ module.exports = {
             },
             // custom scrollbar
             '.xt-overflow-main': {
-              '&::-webkit-scrollbar': {
-                height: '10px',
-                width: '10px',
-                background: theme('colors.white'),
-              },
-              '&::-webkit-scrollbar-thumb': {
-                background: theme('colors.gray.900'),
-              },
-              scrollbarColor: `${theme('colors.gray.900')} ${theme('colors.white')}`,
+              scrollbarColor: `${theme('colors.black')} ${theme('colors.white')}`,
+            },
+            '.xt-overflow-sub': {
+              scrollbarColor: `${theme('colors.gray.300')} ${theme('colors.white')}`,
             },
           }),
         },
diff --git a/vite/tailwind.config.js b/vite/tailwind.config.js
index 7d2938c..47a74e8 100644
--- a/vite/tailwind.config.js
+++ b/vite/tailwind.config.js
@@ -59,15 +59,10 @@ module.exports = {
             },
             // custom scrollbar
             '.xt-overflow-main': {
-              '&::-webkit-scrollbar': {
-                height: '10px',
-                width: '10px',
-                background: theme('colors.white'),
-              },
-              '&::-webkit-scrollbar-thumb': {
-                background: theme('colors.gray.900'),
-              },
-              scrollbarColor: `${theme('colors.gray.900')} ${theme('colors.white')}`,
+              scrollbarColor: `${theme('colors.black')} ${theme('colors.white')}`,
+            },
+            '.xt-overflow-sub': {
+              scrollbarColor: `${theme('colors.gray.300')} ${theme('colors.white')}`,
             },
           }),
         },
diff --git a/webpack/tailwind.config.js b/webpack/tailwind.config.js
index 7d2938c..47a74e8 100644
--- a/webpack/tailwind.config.js
+++ b/webpack/tailwind.config.js
@@ -59,15 +59,10 @@ module.exports = {
             },
             // custom scrollbar
             '.xt-overflow-main': {
-              '&::-webkit-scrollbar': {
-                height: '10px',
-                width: '10px',
-                background: theme('colors.white'),
-              },
-              '&::-webkit-scrollbar-thumb': {
-                background: theme('colors.gray.900'),
-              },
-              scrollbarColor: `${theme('colors.gray.900')} ${theme('colors.white')}`,
+              scrollbarColor: `${theme('colors.black')} ${theme('colors.white')}`,
+            },
+            '.xt-overflow-sub': {
+              scrollbarColor: `${theme('colors.gray.300')} ${theme('colors.white')}`,
             },
           }),
         },