diff --git a/src/main.ts b/src/main.ts
index 736f778..de119f6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,7 +1,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import { setupI18n } from './locales'
-import { setupAssets } from './plugins'
+import { setupAssets, setupScrollbarStyle } from './plugins'
 import { setupStore } from './store'
 import { setupRouter } from './router'
 
@@ -9,6 +9,8 @@ async function bootstrap() {
   const app = createApp(App)
   setupAssets()
 
+  setupScrollbarStyle()
+
   setupStore(app)
 
   setupI18n(app)
diff --git a/src/plugins/index.ts b/src/plugins/index.ts
index ae1ac22..18e9c1a 100644
--- a/src/plugins/index.ts
+++ b/src/plugins/index.ts
@@ -1,3 +1,4 @@
 import setupAssets from './assets'
+import setupScrollbarStyle from './scrollbarStyle'
 
-export { setupAssets }
+export { setupAssets, setupScrollbarStyle }
diff --git a/src/plugins/scrollbarStyle.ts b/src/plugins/scrollbarStyle.ts
new file mode 100644
index 0000000..e4fb784
--- /dev/null
+++ b/src/plugins/scrollbarStyle.ts
@@ -0,0 +1,28 @@
+import { darkTheme, lightTheme } from 'naive-ui'
+
+const setupScrollbarStyle = () => {
+  const style = document.createElement('style')
+  const styleContent = `
+    ::-webkit-scrollbar {
+      background-color: transparent;
+      width: ${lightTheme.Scrollbar.common?.scrollbarWidth};
+    }
+    ::-webkit-scrollbar-thumb {
+      background-color: ${lightTheme.Scrollbar.common?.scrollbarColor};
+      border-radius: ${lightTheme.Scrollbar.common?.scrollbarBorderRadius};
+    }
+    html.dark ::-webkit-scrollbar {
+      background-color: transparent;
+      width: ${darkTheme.Scrollbar.common?.scrollbarWidth};
+    }
+    html.dark ::-webkit-scrollbar-thumb {
+      background-color: ${darkTheme.Scrollbar.common?.scrollbarColor};
+      border-radius: ${darkTheme.Scrollbar.common?.scrollbarBorderRadius};
+    }
+  `
+
+  style.innerHTML = styleContent
+  document.head.appendChild(style)
+}
+
+export default setupScrollbarStyle