diff --git a/web/package.json b/web/package.json
index 758c8e70..e36918e8 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.10",
+    "@usememos/mui": "0.0.1-alpha.14",
     "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 79be49d0..8304698d 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.10
-        version: 0.0.1-alpha.10(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.14
+        version: 0.0.1-alpha.14(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.10':
-    resolution: {integrity: sha512-jyEQ4sgmYCxOWEyuUat7MqQN7Gy4PohQxnLvIje0upqu2zT2AaI0GhOPs/t2HkYK09tFXLAVnhp2I+6jBBhfIg==}
+  '@usememos/mui@0.0.1-alpha.14':
+    resolution: {integrity: sha512-KzLIWkTPVisukxfa6j9LtCmlJpO3QxOe9JFwUDV6AkIqw4QKkVK6Rl+DZu8N9uKSoAiNbg6gbu9vj+Ox3crmug==}
     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.10(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.14(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/MemoContent/TaskListItem.tsx b/web/src/components/MemoContent/TaskListItem.tsx
index 6fbc6255..67e18590 100644
--- a/web/src/components/MemoContent/TaskListItem.tsx
+++ b/web/src/components/MemoContent/TaskListItem.tsx
@@ -1,4 +1,4 @@
-import { Checkbox } from "@mui/joy";
+import { Checkbox } from "@usememos/mui";
 import clsx from "clsx";
 import { useContext, useState } from "react";
 import { markdownServiceClient } from "@/grpcweb";
diff --git a/web/src/components/MemoEditor/ActionButton/AddMemoRelationPopover.tsx b/web/src/components/MemoEditor/ActionButton/AddMemoRelationPopover.tsx
index 076fa190..9ce40d5a 100644
--- a/web/src/components/MemoEditor/ActionButton/AddMemoRelationPopover.tsx
+++ b/web/src/components/MemoEditor/ActionButton/AddMemoRelationPopover.tsx
@@ -1,5 +1,5 @@
-import { Autocomplete, AutocompleteOption, Checkbox, Chip } from "@mui/joy";
-import { Button } from "@usememos/mui";
+import { Autocomplete, AutocompleteOption, Chip } from "@mui/joy";
+import { Button, Checkbox } from "@usememos/mui";
 import { uniqBy } from "lodash-es";
 import { LinkIcon } from "lucide-react";
 import React, { useContext, useState } from "react";
@@ -130,7 +130,7 @@ const AddMemoRelationPopover = (props: Props) => {
   return (
     <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
       <PopoverTrigger>
-        <Button className="px-2" variant="plain">
+        <Button size="sm" variant="plain">
           <LinkIcon className="w-5 h-5 mx-auto" />
         </Button>
       </PopoverTrigger>
diff --git a/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx b/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
index 8647aa7a..2e91a400 100644
--- a/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
+++ b/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
@@ -95,7 +95,7 @@ const LocationSelector = (props: Props) => {
   return (
     <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
       <PopoverTrigger>
-        <Button className="group px-2" variant="plain">
+        <Button className="group" 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 a63fccc9..8351d912 100644
--- a/web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx
+++ b/web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx
@@ -65,7 +65,6 @@ const MarkdownMenu = (props: Props) => {
           root: {
             size: "sm",
             variant: "plain",
-            className: "px-2",
           },
         }}
       >
diff --git a/web/src/components/MemoEditor/ActionButton/TagSelector.tsx b/web/src/components/MemoEditor/ActionButton/TagSelector.tsx
index 83fd2003..0b17adbb 100644
--- a/web/src/components/MemoEditor/ActionButton/TagSelector.tsx
+++ b/web/src/components/MemoEditor/ActionButton/TagSelector.tsx
@@ -47,7 +47,6 @@ const TagSelector = (props: Props) => {
           root: {
             size: "sm",
             variant: "plain",
-            className: "px-2",
           },
         }}
       >
diff --git a/web/src/components/MemoEditor/ActionButton/UploadResourceButton.tsx b/web/src/components/MemoEditor/ActionButton/UploadResourceButton.tsx
index e0513643..b5506feb 100644
--- a/web/src/components/MemoEditor/ActionButton/UploadResourceButton.tsx
+++ b/web/src/components/MemoEditor/ActionButton/UploadResourceButton.tsx
@@ -66,7 +66,7 @@ const UploadResourceButton = () => {
   };
 
   return (
-    <Button className="px-2 relative" size="sm" variant="plain" disabled={state.uploadingFlag}>
+    <Button className="relative" size="sm" variant="plain" disabled={state.uploadingFlag}>
       <PaperclipIcon className="w-5 h-5 mx-auto" />
       <input
         className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
diff --git a/web/src/components/MemoEditor/index.tsx b/web/src/components/MemoEditor/index.tsx
index 1d497d7b..6a255286 100644
--- a/web/src/components/MemoEditor/index.tsx
+++ b/web/src/components/MemoEditor/index.tsx
@@ -465,7 +465,9 @@ const MemoEditor = (props: Props) => {
         <div className="w-full flex flex-row justify-between items-center py-3 dark:border-t-zinc-500">
           <div className="relative flex flex-row justify-start items-center" onFocus={(e) => e.stopPropagation()}>
             <Select
+              className="!text-sm"
               variant="plain"
+              size="md"
               value={state.memoVisibility}
               startDecorator={<VisibilityIcon visibility={state.memoVisibility} />}
               onChange={(_, visibility) => {
@@ -475,7 +477,7 @@ const MemoEditor = (props: Props) => {
               }}
             >
               {[Visibility.PRIVATE, Visibility.PROTECTED, Visibility.PUBLIC].map((item) => (
-                <Option key={item} value={item} className="whitespace-nowrap">
+                <Option key={item} value={item} className="whitespace-nowrap !text-sm">
                   {t(`memo.visibility.${convertVisibilityToString(item).toLowerCase()}` as any)}
                 </Option>
               ))}
diff --git a/web/src/components/PasswordSignInForm.tsx b/web/src/components/PasswordSignInForm.tsx
index ce70ea15..5115e4c6 100644
--- a/web/src/components/PasswordSignInForm.tsx
+++ b/web/src/components/PasswordSignInForm.tsx
@@ -1,5 +1,5 @@
-import { Checkbox, Input } from "@mui/joy";
-import { Button } from "@usememos/mui";
+import { Input } from "@mui/joy";
+import { Button, Checkbox } from "@usememos/mui";
 import { LoaderIcon } from "lucide-react";
 import { ClientError } from "nice-grpc-web";
 import { useEffect, useState } from "react";
@@ -101,12 +101,7 @@ const PasswordSignInForm = () => {
         </div>
       </div>
       <div className="flex flex-row justify-start items-center w-full mt-6">
-        <Checkbox
-          className="dark:!text-gray-400"
-          label={t("common.remember-me")}
-          checked={remember}
-          onChange={(e) => setRemember(e.target.checked)}
-        />
+        <Checkbox label={t("common.remember-me")} checked={remember} onChange={(e) => setRemember(e.target.checked)} />
       </div>
       <div className="flex flex-row justify-end items-center w-full mt-6">
         <Button
diff --git a/web/src/pages/SignIn.tsx b/web/src/pages/SignIn.tsx
index 200e84f8..13d8288a 100644
--- a/web/src/pages/SignIn.tsx
+++ b/web/src/pages/SignIn.tsx
@@ -97,7 +97,6 @@ const SignIn = () => {
               {identityProviderList.map((identityProvider) => (
                 <Button
                   key={identityProvider.name}
-                  color="primary"
                   variant="outlined"
                   fullWidth
                   onClick={() => handleSignInWithIdentityProvider(identityProvider)}