diff --git a/libs/components/editor-plugins/src/menu/command-menu/Container.tsx b/libs/components/editor-plugins/src/menu/command-menu/Container.tsx
index 6767bfa6d9..2fc965e041 100644
--- a/libs/components/editor-plugins/src/menu/command-menu/Container.tsx
+++ b/libs/components/editor-plugins/src/menu/command-menu/Container.tsx
@@ -19,8 +19,30 @@ import { domToRect } from '@toeverything/utils';
 import { MenuCategories } from './Categories';
 import { menuItemsMap, CommandMenuCategories } from './config';
 import { QueryResult } from '../../search';
-import { MuiClickAwayListener as ClickAwayListener } from '@toeverything/components/ui';
+import {
+    MuiClickAwayListener as ClickAwayListener,
+    styled,
+} from '@toeverything/components/ui';
 
+const RootContainer = styled('div')(({ theme }) => {
+    return {
+        position: 'fixed',
+        zIndex: 1,
+        width: 352,
+        maxHeight: 525,
+        borderRadius: '10px',
+        boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
+        backgroundColor: '#fff',
+        padding: '8px 4px',
+    };
+});
+const ContentContainer = styled('div')(({ theme }) => {
+    return {
+        display: 'flex',
+        overflow: 'hidden',
+        maxHeight: '35vh',
+    };
+});
 export type CommandMenuContainerProps = {
     editor: Virgo;
     hooks: PluginHooks;
@@ -215,13 +237,12 @@ export const CommandMenuContainer = ({
     }, [searchBlocks, types]);
 
     return isShow ? (
-        <div
+        <RootContainer
             ref={menuRef}
-            className={styles('rootContainer')}
             onKeyDownCapture={handleKeyDown}
             style={style}
         >
-            <div className={styles('contentContainer')}>
+            <ContentContainer>
                 <MenuCategories
                     currentCategories={currentCategory}
                     onSetCategories={handleSetCategories}
@@ -233,25 +254,7 @@ export const CommandMenuContainer = ({
                     currentItem={currentItem}
                     setCurrentItem={setCurrentItem}
                 />
-            </div>
-        </div>
+            </ContentContainer>
+        </RootContainer>
     ) : null;
 };
-
-const styles = style9.create({
-    rootContainer: {
-        position: 'fixed',
-        zIndex: 1,
-        width: 352,
-        maxHeight: 525,
-        borderRadius: '10px',
-        boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
-        backgroundColor: '#fff',
-        padding: '8px 4px',
-    },
-    contentContainer: {
-        display: 'flex',
-        overflow: 'hidden',
-        maxHeight: 493,
-    },
-});
diff --git a/libs/components/editor-plugins/src/menu/command-menu/Menu.tsx b/libs/components/editor-plugins/src/menu/command-menu/Menu.tsx
index a61c0a4ee1..b56354521e 100644
--- a/libs/components/editor-plugins/src/menu/command-menu/Menu.tsx
+++ b/libs/components/editor-plugins/src/menu/command-menu/Menu.tsx
@@ -113,7 +113,8 @@ export const CommandMenu = ({ editor, hooks, style }: CommandMenuProps) => {
                             let clientHeight =
                                 document.documentElement.clientHeight;
 
-                            const COMMAND_MENU_HEIGHT = 509;
+                            const COMMAND_MENU_HEIGHT =
+                                window.innerHeight * 0.4;
                             if (clientHeight - top <= COMMAND_MENU_HEIGHT) {
                                 top = clientHeight - top + 10;
                                 setCommandMenuPosition({