diff --git a/src/components/EditorHeader/ControlPanel.jsx b/src/components/EditorHeader/ControlPanel.jsx
index bc519b2..d286339 100644
--- a/src/components/EditorHeader/ControlPanel.jsx
+++ b/src/components/EditorHeader/ControlPanel.jsx
@@ -1770,7 +1770,7 @@ export default function ControlPanel({
                       direction: isRtl(i18n.language) ? "rtl" : "ltr",
                     }}
                     render={
-                      <Dropdown.Menu>
+                      <Dropdown.Menu className="menu max-h-[calc(100vh-80px)] overflow-auto">
                         {Object.keys(menu[category]).map((item, index) => {
                           if (menu[category][item].children) {
                             return (
diff --git a/src/index.css b/src/index.css
index 931b672..e0b3da5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,4 +1,4 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 
 @config '../tailwind.config.js';
 
@@ -67,7 +67,7 @@
   background-color: rgba(var(--semi-blue-6), 1);
 }
 
-.semi-spin-wrapper{
+.semi-spin-wrapper {
   color: inherit;
 }
 
@@ -77,8 +77,8 @@
 }
 
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: 6px;
+  height: 6px;
 }
 
 ::-webkit-scrollbar-track {
@@ -91,13 +91,17 @@
 
 ::-webkit-scrollbar-thumb {
   background-color: rgba(var(--semi-grey-2), 1);
-  border-radius: 8px;
+  border-radius: 6px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
   background-color: rgba(var(--semi-grey-3), 1);
 }
 
+.menu::-webkit-scrollbar-thumb {
+  background-color: rgba(var(--semi-grey-4), 1);
+}
+
 .theme {
   color: var(--semi-color-text-1);
   background-color: var(--semi-color-bg-0);