diff --git a/libs/components/editor-blocks/src/blocks/group/GroupView.tsx b/libs/components/editor-blocks/src/blocks/group/GroupView.tsx
index 1fba5dc199..694fe7820f 100644
--- a/libs/components/editor-blocks/src/blocks/group/GroupView.tsx
+++ b/libs/components/editor-blocks/src/blocks/group/GroupView.tsx
@@ -59,7 +59,7 @@ const GroupActionWrapper = styled('div')(({ theme }) => ({
 const GroupContainer = styled('div')<{ isSelect?: boolean }>(
     ({ isSelect, theme }) => ({
         background: theme.affine.palette.white,
-        border: '2px solid #ECF1FB',
+        border: '2px solid rgba(236,241,251,.5)',
         padding: '15px 12px',
         borderRadius: '10px',
         ...(isSelect
diff --git a/libs/components/editor-plugins/src/menu/inline-menu/menu-item/DropdownItem.tsx b/libs/components/editor-plugins/src/menu/inline-menu/menu-item/DropdownItem.tsx
index 5fbc3f91f6..2e5f3d3eac 100644
--- a/libs/components/editor-plugins/src/menu/inline-menu/menu-item/DropdownItem.tsx
+++ b/libs/components/editor-plugins/src/menu/inline-menu/menu-item/DropdownItem.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useCallback } from 'react';
 import style9 from 'style9';
 import {
-    MuiPopover,
+    Popover,
     styled,
     type SvgIconProps,
     Tooltip,
@@ -32,15 +32,6 @@ export const MenuDropdownItem = ({
         null
     );
 
-    const handle_open_dropdown_menu = useCallback(
-        (event: React.MouseEvent<HTMLButtonElement>) => {
-            event.preventDefault();
-            event.stopPropagation();
-            set_anchor_ele(event.currentTarget);
-        },
-        []
-    );
-
     const handle_close_dropdown_menu = useCallback(() => {
         set_anchor_ele(null);
     }, []);
@@ -50,103 +41,103 @@ export const MenuDropdownItem = ({
 
     return (
         <>
-            <Tooltip
+            <Popover
+                trigger="click"
+                placement="bottom-start"
                 content={
-                    <div style={{ padding: '2px 4px' }}>
-                        <p>{name}</p>
-                        {shortcut && <p>{shortcut}</p>}
+                    <div className={styles('dropdownContainer')}>
+                        {children.map(item => {
+                            const {
+                                name,
+                                icon: ItemIcon,
+                                onClick,
+                                nameKey: itemNameKey,
+                            } = item;
+
+                            const StyledIcon = withStylesForIcon(ItemIcon);
+
+                            return (
+                                <button
+                                    className={styles('dropdownItem')}
+                                    key={name}
+                                    onClick={() => {
+                                        if (
+                                            onClick &&
+                                            selectionInfo?.anchorNode?.id
+                                        ) {
+                                            onClick({
+                                                editor,
+                                                type: itemNameKey,
+                                                anchorNodeId:
+                                                    selectionInfo?.anchorNode
+                                                        ?.id,
+                                            });
+                                        }
+                                        handle_close_dropdown_menu();
+                                    }}
+                                >
+                                    <StyledIcon
+                                        fontColor={
+                                            nameKey ===
+                                            inlineMenuNamesKeys.currentFontColor
+                                                ? fontColorPalette[
+                                                      inlineMenuNamesForFontColor[
+                                                          itemNameKey as keyof typeof inlineMenuNamesForFontColor
+                                                      ]
+                                                  ]
+                                                : nameKey ===
+                                                  inlineMenuNamesKeys.currentFontBackground
+                                                ? fontBgColorPalette[
+                                                      inlineMenuNamesForFontColor[
+                                                          itemNameKey as keyof typeof inlineMenuNamesForFontColor
+                                                      ]
+                                                  ]
+                                                : ''
+                                        }
+                                        // fontBgColor={
+                                        //     nameKey=== inlineMenuNamesKeys.currentFontBackground ?  fontBgColorPalette[
+                                        //         inlineMenuNamesForFontColor[itemNameKey] as keyof typeof fontBgColorPalette
+                                        //     ]:''
+                                        // }
+                                    />
+                                    {/* <ItemIcon sx={{ width: 20, height: 20 }} /> */}
+                                    <span
+                                        className={styles('dropdownItemItext')}
+                                    >
+                                        {name}
+                                    </span>
+                                </button>
+                            );
+                        })}
                     </div>
-                }
-                placement="bottom"
-                trigger="hover"
+                } // id={anchor_ele ? 'inline-menu-pop' : undefined}
+                // open={Boolean(anchor_ele)}
+                // anchorEl={anchor_ele}
+                // onClose={handle_close_dropdown_menu}
+                // anchorOrigin={{
+                //     horizontal: 'left',
+                //     vertical: 40,
+                // }}
             >
-                <button
-                    onClick={handle_open_dropdown_menu}
-                    className={styles('currentDropdownButton')}
-                    aria-label={name}
-                    onMouseDown={e => {
-                        // prevent toolbar from taking focus away from editor
-                        e.preventDefault();
-                        e.stopPropagation();
-                    }}
+                <Tooltip
+                    content={
+                        <div style={{ padding: '2px 4px' }}>
+                            <p>{name}</p>
+                            {shortcut && <p>{shortcut}</p>}
+                        </div>
+                    }
+                    placement="top"
+                    trigger="hover"
                 >
-                    <MenuIcon sx={{ width: 20, height: 20 }} />
-                    <ArrowDropDownIcon sx={{ width: 20, height: 20 }} />
-                </button>
-            </Tooltip>
-            <MuiPopover
-                id={anchor_ele ? 'inline-menu-pop' : undefined}
-                open={Boolean(anchor_ele)}
-                anchorEl={anchor_ele}
-                onClose={handle_close_dropdown_menu}
-                anchorOrigin={{
-                    horizontal: 'left',
-                    vertical: 40,
-                }}
-            >
-                <div className={styles('dropdownContainer')}>
-                    {children.map(item => {
-                        const {
-                            name,
-                            icon: ItemIcon,
-                            onClick,
-                            nameKey: itemNameKey,
-                        } = item;
-
-                        const StyledIcon = withStylesForIcon(ItemIcon);
-
-                        return (
-                            <button
-                                className={styles('dropdownItem')}
-                                key={name}
-                                onClick={() => {
-                                    if (
-                                        onClick &&
-                                        selectionInfo?.anchorNode?.id
-                                    ) {
-                                        onClick({
-                                            editor,
-                                            type: itemNameKey,
-                                            anchorNodeId:
-                                                selectionInfo?.anchorNode?.id,
-                                        });
-                                    }
-                                    handle_close_dropdown_menu();
-                                }}
-                            >
-                                <StyledIcon
-                                    fontColor={
-                                        nameKey ===
-                                        inlineMenuNamesKeys.currentFontColor
-                                            ? fontColorPalette[
-                                                  inlineMenuNamesForFontColor[
-                                                      itemNameKey as keyof typeof inlineMenuNamesForFontColor
-                                                  ]
-                                              ]
-                                            : nameKey ===
-                                              inlineMenuNamesKeys.currentFontBackground
-                                            ? fontBgColorPalette[
-                                                  inlineMenuNamesForFontColor[
-                                                      itemNameKey as keyof typeof inlineMenuNamesForFontColor
-                                                  ]
-                                              ]
-                                            : ''
-                                    }
-                                    // fontBgColor={
-                                    //     nameKey=== inlineMenuNamesKeys.currentFontBackground ?  fontBgColorPalette[
-                                    //         inlineMenuNamesForFontColor[itemNameKey] as keyof typeof fontBgColorPalette
-                                    //     ]:''
-                                    // }
-                                />
-                                {/* <ItemIcon sx={{ width: 20, height: 20 }} /> */}
-                                <span className={styles('dropdownItemItext')}>
-                                    {name}
-                                </span>
-                            </button>
-                        );
-                    })}
-                </div>
-            </MuiPopover>
+                    <button
+                        className={styles('currentDropdownButton')}
+                        aria-label={name}
+                    >
+                        <MenuIcon sx={{ width: 20, height: 20 }} />
+                        <ArrowDropDownIcon sx={{ width: 20, height: 20 }} />
+                    </button>
+                </Tooltip>
+            </Popover>
         </>
     );
 };
diff --git a/libs/components/editor-plugins/src/menu/inline-menu/menu-item/IconItem.tsx b/libs/components/editor-plugins/src/menu/inline-menu/menu-item/IconItem.tsx
index a1627da105..5e97b4f746 100644
--- a/libs/components/editor-plugins/src/menu/inline-menu/menu-item/IconItem.tsx
+++ b/libs/components/editor-plugins/src/menu/inline-menu/menu-item/IconItem.tsx
@@ -45,7 +45,7 @@ export const MenuIconItem = ({
                     {shortcut && <p>{shortcut}</p>}
                 </div>
             }
-            placement="bottom"
+            placement="top"
             trigger="hover"
         >
             <button