diff --git a/web/package.json b/web/package.json
index 255af578..d6663117 100644
--- a/web/package.json
+++ b/web/package.json
@@ -19,7 +19,7 @@
     "@mui/joy": "5.0.0-beta.48",
     "@radix-ui/react-popover": "^1.1.2",
     "@reduxjs/toolkit": "^2.3.0",
-    "@usememos/mui": "0.0.1-alpha.23",
+    "@usememos/mui": "0.0.1-alpha.24",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "copy-to-clipboard": "^3.3.3",
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index f4a4c9b0..c17d7ff9 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -39,8 +39,8 @@ importers:
         specifier: ^2.3.0
         version: 2.3.0(react-redux@9.1.2(@types/react@18.3.12)(react@18.3.1)(redux@5.0.1))(react@18.3.1)
       '@usememos/mui':
-        specifier: 0.0.1-alpha.23
-        version: 0.0.1-alpha.23(lucide-react@0.453.0(react@18.3.1))(postcss@8.4.47)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwind-merge@2.5.4)(tailwindcss@3.4.14)
+        specifier: 0.0.1-alpha.24
+        version: 0.0.1-alpha.24(lucide-react@0.453.0(react@18.3.1))(postcss@8.4.47)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwind-merge@2.5.4)(tailwindcss@3.4.14)
       class-variance-authority:
         specifier: ^0.7.0
         version: 0.7.0
@@ -1409,8 +1409,8 @@ packages:
   '@ungap/structured-clone@1.2.0':
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
 
-  '@usememos/mui@0.0.1-alpha.23':
-    resolution: {integrity: sha512-zrGFdl985JLdHBQED+fOFI33XMzOlV5HJghb2L3mEtth95Flatz1xj7XXLOZMS/abLpmm8+KwIXLpuWa1Tw8pw==}
+  '@usememos/mui@0.0.1-alpha.24':
+    resolution: {integrity: sha512-4UAlapAs7UfgG3OkdvolgNBo1BCcaXhs3TeWw1UvEA7pwj6txzbIjqN8c6IHl+gYeMzoXBO2Ou7gnYD9OOtj5Q==}
     peerDependencies:
       lucide-react: ^0.453.0
       postcss: ^8.4.47
@@ -4642,7 +4642,7 @@ snapshots:
 
   '@ungap/structured-clone@1.2.0': {}
 
-  '@usememos/mui@0.0.1-alpha.23(lucide-react@0.453.0(react@18.3.1))(postcss@8.4.47)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwind-merge@2.5.4)(tailwindcss@3.4.14)':
+  '@usememos/mui@0.0.1-alpha.24(lucide-react@0.453.0(react@18.3.1))(postcss@8.4.47)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tailwind-merge@2.5.4)(tailwindcss@3.4.14)':
     dependencies:
       lucide-react: 0.453.0(react@18.3.1)
       postcss: 8.4.47
diff --git a/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx b/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
index c137f92d..153ac12a 100644
--- a/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
+++ b/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
@@ -93,8 +93,8 @@ const LocationSelector = (props: Props) => {
 
   return (
     <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
-      <PopoverTrigger>
-        <Button className="flex items-center justify-center" size="sm" variant="plain" asChild>
+      <PopoverTrigger asChild>
+        <Button className="flex items-center justify-center" size="sm" variant="plain">
           <MapPinIcon className="w-5 h-5 mx-auto shrink-0" />
           {props.location && (
             <>
diff --git a/web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx b/web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx
index 8351d912..8a32109c 100644
--- a/web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx
+++ b/web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx
@@ -59,16 +59,10 @@ const MarkdownMenu = (props: Props) => {
 
   return (
     <Dropdown>
-      <MenuButton
-        slots={{ root: Button }}
-        slotProps={{
-          root: {
-            size: "sm",
-            variant: "plain",
-          },
-        }}
-      >
-        <SquareSlashIcon className="w-5 h-5 mx-auto" />
+      <MenuButton slots={{ root: "div" }}>
+        <Button size="sm" variant="plain">
+          <SquareSlashIcon className="w-5 h-5 mx-auto" />
+        </Button>
       </MenuButton>
       <Menu className="text-sm" size="sm" placement="bottom-start">
         <MenuItem onClick={handleCodeBlockClick}>
diff --git a/web/src/components/MemoEditor/ActionButton/TagSelector.tsx b/web/src/components/MemoEditor/ActionButton/TagSelector.tsx
index 0b17adbb..70a5ba2a 100644
--- a/web/src/components/MemoEditor/ActionButton/TagSelector.tsx
+++ b/web/src/components/MemoEditor/ActionButton/TagSelector.tsx
@@ -41,16 +41,10 @@ const TagSelector = (props: Props) => {
 
   return (
     <Dropdown open={open} onOpenChange={(_, isOpen) => setOpen(isOpen)}>
-      <MenuButton
-        slots={{ root: Button }}
-        slotProps={{
-          root: {
-            size: "sm",
-            variant: "plain",
-          },
-        }}
-      >
-        <HashIcon className="w-5 h-5 mx-auto" />
+      <MenuButton slots={{ root: "div" }}>
+        <Button size="sm" variant="plain">
+          <HashIcon className="w-5 h-5 mx-auto" />
+        </Button>
       </MenuButton>
       <Menu className="relative text-sm" component="div" size="sm" placement="bottom-start">
         <div ref={containerRef}>