diff --git a/src/components/editor/main/EditorBaseHeader.vue b/src/components/editor/main/EditorBaseHeader.vue
index d9be5fc6f..11e7861db 100644
--- a/src/components/editor/main/EditorBaseHeader.vue
+++ b/src/components/editor/main/EditorBaseHeader.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex justify-end items-center relative bg-gray-300 dark:bg-gray-800"
+    class="flex justify-end items-center relative bg-white-opacity dark:bg-black-opacity"
   >
     <HeroIcon class="wb-icon inline-flex" @click.prevent="onSwitcher">
       <svg
diff --git a/src/preset.css b/src/preset.css
index 9e2a7e75b..ef395027f 100644
--- a/src/preset.css
+++ b/src/preset.css
@@ -60,16 +60,16 @@ input[type='number'] {
 
 :root {
   --scr-track: #f1f1f1;
-  --scr-thumb: #888;
-  --scr-thumb-hover: #555;
+  --scr-thumb: rgba(0, 0, 0, 0.04);
+  --scr-thumb-hover: rgba(0, 0, 0, 0.1);
   --wb-selection: #9ca3af;
   --wb-text-selection: #000;
 }
 
 .dark {
   --scr-track: #222;
-  --scr-thumb: #888;
-  --scr-thumb-hover: #555;
+  --scr-thumb: rgba(255, 255, 255, 0.04);
+  --scr-thumb-hover: rgba(255, 255, 255, 0.1);
   --wb-selection: #111827;
   --wb-text-selection: #e5e7eb;
 }
@@ -97,7 +97,7 @@ input[type='number'] {
 }
 
 *::-webkit-scrollbar {
-  width: 6px;
+  width: 12px;
 }
 
 *::-webkit-scrollbar-track {