diff --git a/package.json b/package.json
index 4c9701f73..2ada1e861 100755
--- a/package.json
+++ b/package.json
@@ -62,6 +62,7 @@
     "@vitejs/plugin-vue": "^1.2.4",
     "@vue/composition-api": "^1.0.0-rc.12",
     "@vueuse/integrations": "^5.0.3",
+    "@windicss/plugin-scrollbar": "^1.2.3",
     "@windicss/plugin-utils": "^1.2.0",
     "clear-module": "^4.1.1",
     "clipboard": "^2.0.8",
diff --git a/src/defaultTheme/components/molecules/AsideNavigation.vue b/src/defaultTheme/components/molecules/AsideNavigation.vue
index ea4d8e708..33f68f9d5 100644
--- a/src/defaultTheme/components/molecules/AsideNavigation.vue
+++ b/src/defaultTheme/components/molecules/AsideNavigation.vue
@@ -48,6 +48,7 @@
           font-medium
           lg:h-[reset]
           h-(full-header)
+          d-scrollbar
         "
       >
         <div class="py-4 pl-4 pr-24 sm:pl-6 lg:pr-0 lg:pt-10">
diff --git a/src/defaultTheme/components/organisms/page/PagePrevNext.vue b/src/defaultTheme/components/organisms/page/PagePrevNext.vue
index 9689d9ea0..d0d0ace84 100644
--- a/src/defaultTheme/components/organisms/page/PagePrevNext.vue
+++ b/src/defaultTheme/components/organisms/page/PagePrevNext.vue
@@ -53,7 +53,7 @@
           rounded-xl
           group
           xs:mb-0 xs:w-auto
-          hover:d-text-primary hover:border-primary-200
+          hover:d-text-primary
         "
       >
         <span class="relative flex flex-col items-start truncate">
diff --git a/src/defaultTheme/components/organisms/page/PageToc.vue b/src/defaultTheme/components/organisms/page/PageToc.vue
index 0228ce6d5..654e5095c 100644
--- a/src/defaultTheme/components/organisms/page/PageToc.vue
+++ b/src/defaultTheme/components/organisms/page/PageToc.vue
@@ -34,6 +34,7 @@
         flex-col
         justify-between
         overflow-y-auto
+        d-scrollbar
         sticky
         max-h-(screen-header)
         -mt-10
diff --git a/src/defaultTheme/index.ts b/src/defaultTheme/index.ts
index 9f230d833..7bfd887b9 100644
--- a/src/defaultTheme/index.ts
+++ b/src/defaultTheme/index.ts
@@ -18,7 +18,7 @@ const themeConfig: NuxtConfig = nuxtConfig({
       { rel: 'preconnect', href: 'https://fonts.gstatic.com' }
     ],
     bodyAttrs: {
-      class: ['d-body-bg d-body-text-color text-root min-w-base antialiased tracking-semitight']
+      class: ['d-body-bg d-body-text-color text-root min-w-base antialiased tracking-semitight d-scrollbar']
     }
   },
   colorMode: {
diff --git a/src/defaultTheme/settings.ts b/src/defaultTheme/settings.ts
index f7ed16a00..ac509ad61 100644
--- a/src/defaultTheme/settings.ts
+++ b/src/defaultTheme/settings.ts
@@ -93,7 +93,8 @@ const defaultThemeSettings = {
     // Heading
     'd-heading-title': '!mb-0 !mt-0 flex-1 !text-4xl font-semibold tracking-tight',
     'd-heading-description': '!mt-2 !mb-0 text-lg font-medium d-secondary-text',
-    'd-heading-hr': '!mt-4 !mb-0 d-border'
+    'd-heading-hr': '!mt-4 !mb-0 d-border',
+    'd-scrollbar': 'scrollbar-thin scrollbar-thumb-gray-200 dark:scrollbar-thumb-gray-800 scrollbar-thumb-rounded'
   }
 }
 
diff --git a/src/defaultTheme/windi.config.ts b/src/defaultTheme/windi.config.ts
index 6ba4b6a5f..fa414fa36 100644
--- a/src/defaultTheme/windi.config.ts
+++ b/src/defaultTheme/windi.config.ts
@@ -7,11 +7,12 @@ import colors from 'windicss/colors'
 import defaultTheme from 'windicss/defaultTheme'
 import aspectRatio from 'windicss/plugin/aspect-ratio'
 import filters from 'windicss/plugin/filters'
+import scrollbar from '@windicss/plugin-scrollbar'
 import { defineConfig } from 'windicss/helpers'
 
 export default defineConfig({
   darkMode: 'class',
-  plugins: [filters, aspectRatio],
+  plugins: [filters, aspectRatio, scrollbar],
   // Include Docus node_module when used this way
   extract: {
     include: ['node_modules/docus/dist/**/*.{html,vue,md,mdx,pug,jsx,tsx,svelte,css,ts,js}']
@@ -99,5 +100,8 @@ export default defineConfig({
         18: '4.5rem'
       }
     }
+  },
+  variants: {
+    scrollbar: ['dark', 'rounded']
   }
 })
diff --git a/yarn.lock b/yarn.lock
index dffbb33ad..7b5f643bd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2856,6 +2856,11 @@
     "@webassemblyjs/wast-parser" "1.9.0"
     "@xtuc/long" "4.2.2"
 
+"@windicss/plugin-scrollbar@^1.2.3":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@windicss/plugin-scrollbar/-/plugin-scrollbar-1.2.3.tgz#4796e999e98a4bca6c269fa1faffd2e9b5452cac"
+  integrity sha512-+cqv1pEmaNPITeBJ/lO6tc8IjBzRhQ+V9G8r249MMXivYoxUO4DtModBrRGHVvBgsYZgPXDsIv2jqtxc4NqYEg==
+
 "@windicss/plugin-utils@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@windicss/plugin-utils/-/plugin-utils-1.1.0.tgz#c0834165f40142bf52f24eced1bbf68cbf8bd506"