diff --git a/web/package.json b/web/package.json
index e36918e87..8dcf1f3cb 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.14",
+    "@usememos/mui": "0.0.1-alpha.20",
     "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 8304698d5..ccaa518af 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.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)
+        specifier: 0.0.1-alpha.20
+        version: 0.0.1-alpha.20(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.14':
-    resolution: {integrity: sha512-KzLIWkTPVisukxfa6j9LtCmlJpO3QxOe9JFwUDV6AkIqw4QKkVK6Rl+DZu8N9uKSoAiNbg6gbu9vj+Ox3crmug==}
+  '@usememos/mui@0.0.1-alpha.20':
+    resolution: {integrity: sha512-O0wvI5z+ndKHLek+Be5t8e+KOSxPf0gHKJh8wu+M05bSzMldqs1dlm0kaP4bSW5rUifOybrEe0IUsesyg+eJzQ==}
     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.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)':
+  '@usememos/mui@0.0.1-alpha.20(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/ChangeMemberPasswordDialog.tsx b/web/src/components/ChangeMemberPasswordDialog.tsx
index f1aafe41e..c732e1e1e 100644
--- a/web/src/components/ChangeMemberPasswordDialog.tsx
+++ b/web/src/components/ChangeMemberPasswordDialog.tsx
@@ -1,5 +1,4 @@
-import { Input } from "@mui/joy";
-import { Button } from "@usememos/mui";
+import { Button, Input } from "@usememos/mui";
 import { XIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
diff --git a/web/src/components/CreateAccessTokenDialog.tsx b/web/src/components/CreateAccessTokenDialog.tsx
index 0cc22523c..e46cec33e 100644
--- a/web/src/components/CreateAccessTokenDialog.tsx
+++ b/web/src/components/CreateAccessTokenDialog.tsx
@@ -1,5 +1,5 @@
-import { Input, Radio, RadioGroup } from "@mui/joy";
-import { Button } from "@usememos/mui";
+import { Radio, RadioGroup } from "@mui/joy";
+import { Button, Input } from "@usememos/mui";
 import { XIcon } from "lucide-react";
 import React, { useState } from "react";
 import { toast } from "react-hot-toast";
diff --git a/web/src/components/CreateIdentityProviderDialog.tsx b/web/src/components/CreateIdentityProviderDialog.tsx
index 67574e496..b835a20e6 100644
--- a/web/src/components/CreateIdentityProviderDialog.tsx
+++ b/web/src/components/CreateIdentityProviderDialog.tsx
@@ -1,5 +1,5 @@
-import { Divider, Input, Option, Select, Typography } from "@mui/joy";
-import { Button } from "@usememos/mui";
+import { Divider, Option, Select, Typography } from "@mui/joy";
+import { Button, Input } from "@usememos/mui";
 import { XIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
diff --git a/web/src/components/CreateWebhookDialog.tsx b/web/src/components/CreateWebhookDialog.tsx
index 03d5583d9..441e16075 100644
--- a/web/src/components/CreateWebhookDialog.tsx
+++ b/web/src/components/CreateWebhookDialog.tsx
@@ -1,5 +1,4 @@
-import { Input } from "@mui/joy";
-import { Button } from "@usememos/mui";
+import { Button, Input } from "@usememos/mui";
 import { XIcon } from "lucide-react";
 import React, { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
diff --git a/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx b/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
index 2e91a400a..862803f01 100644
--- a/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
+++ b/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
@@ -1,5 +1,4 @@
-import { Input } from "@mui/joy";
-import { Button } from "@usememos/mui";
+import { Button, Input } from "@usememos/mui";
 import { LatLng } from "leaflet";
 import { MapPinIcon, XIcon } from "lucide-react";
 import { useEffect, useState } from "react";
@@ -111,19 +110,19 @@ const LocationSelector = (props: Props) => {
         <div className="min-w-80 sm:w-128 flex flex-col justify-start items-start">
           <LeafletMap key={JSON.stringify(state.initilized)} latlng={state.position} onChange={onPositionChanged} />
           <div className="mt-2 w-full flex flex-row justify-between items-center gap-2">
-            <Input
-              placeholder="Choose a position first."
-              value={state.placeholder}
-              disabled={!state.position}
-              startDecorator={
-                state.position ? (
-                  <span>
-                    [{state.position.lat.toFixed(3)}, {state.position.lng.toFixed(3)}]
-                  </span>
-                ) : null
-              }
-              onChange={(e) => setState((state) => ({ ...state, placeholder: e.target.value }))}
-            />
+            <div className="flex flex-row items-center justify-start gap-2">
+              {state.position && (
+                <span className="text-sm">
+                  [{state.position.lat.toFixed(2)}, {state.position.lng.toFixed(2)}]
+                </span>
+              )}
+              <Input
+                placeholder="Choose a position first."
+                value={state.placeholder}
+                disabled={!state.position}
+                onChange={(e) => setState((state) => ({ ...state, placeholder: e.target.value }))}
+              />
+            </div>
             <Button
               className="shrink-0"
               color="primary"
diff --git a/web/src/components/PasswordSignInForm.tsx b/web/src/components/PasswordSignInForm.tsx
index 5115e4c64..4d8cebfd7 100644
--- a/web/src/components/PasswordSignInForm.tsx
+++ b/web/src/components/PasswordSignInForm.tsx
@@ -1,5 +1,4 @@
-import { Input } from "@mui/joy";
-import { Button, Checkbox } from "@usememos/mui";
+import { Button, Checkbox, Input } from "@usememos/mui";
 import { LoaderIcon } from "lucide-react";
 import { ClientError } from "nice-grpc-web";
 import { useEffect, useState } from "react";
diff --git a/web/src/components/RenameTagDialog.tsx b/web/src/components/RenameTagDialog.tsx
index e388d6053..3e14d95be 100644
--- a/web/src/components/RenameTagDialog.tsx
+++ b/web/src/components/RenameTagDialog.tsx
@@ -1,5 +1,5 @@
-import { Input, List, ListItem } from "@mui/joy";
-import { Button } from "@usememos/mui";
+import { List, ListItem } from "@mui/joy";
+import { Button, Input } from "@usememos/mui";
 import { XIcon } from "lucide-react";
 import React, { useState } from "react";
 import { toast } from "react-hot-toast";
@@ -63,18 +63,11 @@ const RenameTagDialog: React.FC<Props> = (props: Props) => {
         <div className="w-full flex flex-col justify-start items-start mb-3">
           <div className="relative w-full mb-2 flex flex-row justify-start items-center space-x-2">
             <span className="w-20 text-sm whitespace-nowrap shrink-0 text-right">Old Name</span>
-            <Input className="w-full" readOnly disabled type="text" placeholder="A new tag name" size="md" value={tag} />
+            <Input className="w-full" readOnly disabled type="text" placeholder="A new tag name" value={tag} />
           </div>
           <div className="relative w-full mb-2 flex flex-row justify-start items-center space-x-2">
             <span className="w-20 text-sm whitespace-nowrap shrink-0 text-right">New Name</span>
-            <Input
-              className="w-full"
-              type="text"
-              placeholder="A new tag name"
-              size="md"
-              value={newName}
-              onChange={handleTagNameInputChange}
-            />
+            <Input className="w-full" type="text" placeholder="A new tag name" value={newName} onChange={handleTagNameInputChange} />
           </div>
           <List size="sm" marker="disc">
             <ListItem>
diff --git a/web/src/components/Settings/MemberSection.tsx b/web/src/components/Settings/MemberSection.tsx
index 0d7bafae0..50357d8d0 100644
--- a/web/src/components/Settings/MemberSection.tsx
+++ b/web/src/components/Settings/MemberSection.tsx
@@ -1,5 +1,5 @@
-import { Dropdown, Input, Menu, MenuButton, MenuItem, Radio, RadioGroup } from "@mui/joy";
-import { Button } from "@usememos/mui";
+import { Dropdown, Menu, MenuButton, MenuItem, Radio, RadioGroup } from "@mui/joy";
+import { Button, Input } from "@usememos/mui";
 import { sortBy } from "lodash-es";
 import { MoreVerticalIcon } from "lucide-react";
 import React, { useEffect, useState } from "react";
diff --git a/web/src/components/Settings/MemoRelatedSettings.tsx b/web/src/components/Settings/MemoRelatedSettings.tsx
index 2809cdb36..28f5c5178 100644
--- a/web/src/components/Settings/MemoRelatedSettings.tsx
+++ b/web/src/components/Settings/MemoRelatedSettings.tsx
@@ -1,5 +1,5 @@
-import { Input, Switch, Select, Option, Chip, ChipDelete } from "@mui/joy";
-import { Button } from "@usememos/mui";
+import { Switch, Select, Option, Chip, ChipDelete } from "@mui/joy";
+import { Button, Input } from "@usememos/mui";
 import { isEqual, uniq } from "lodash-es";
 import { CheckIcon } from "lucide-react";
 import { useState } from "react";
diff --git a/web/src/components/Settings/StorageSection.tsx b/web/src/components/Settings/StorageSection.tsx
index 65064b4bf..6e70f6473 100644
--- a/web/src/components/Settings/StorageSection.tsx
+++ b/web/src/components/Settings/StorageSection.tsx
@@ -1,5 +1,5 @@
-import { Divider, Input, List, ListItem, Radio, RadioGroup, Tooltip } from "@mui/joy";
-import { Button } from "@usememos/mui";
+import { Divider, List, ListItem, Radio, RadioGroup, Tooltip } from "@mui/joy";
+import { Button, Input } from "@usememos/mui";
 import { isEqual } from "lodash-es";
 import { HelpCircleIcon } from "lucide-react";
 import { useMemo, useState } from "react";
@@ -136,14 +136,7 @@ const StorageSection = () => {
             <HelpCircleIcon className="w-4 h-auto" />
           </Tooltip>
         </div>
-        <Input
-          className="w-16"
-          sx={{
-            fontFamily: "monospace",
-          }}
-          value={workspaceStorageSetting.uploadSizeLimitMb}
-          onChange={handleMaxUploadSizeChanged}
-        />
+        <Input className="w-16 font-mono" value={workspaceStorageSetting.uploadSizeLimitMb} onChange={handleMaxUploadSizeChanged} />
       </div>
       {workspaceStorageSetting.storageType !== WorkspaceStorageSetting_StorageType.DATABASE && (
         <div className="w-full flex flex-row justify-between items-center">
diff --git a/web/src/components/UpdateAccountDialog.tsx b/web/src/components/UpdateAccountDialog.tsx
index 64c6950a1..4eee39fd6 100644
--- a/web/src/components/UpdateAccountDialog.tsx
+++ b/web/src/components/UpdateAccountDialog.tsx
@@ -1,5 +1,5 @@
-import { Input, Textarea } from "@mui/joy";
-import { Button } from "@usememos/mui";
+import { Textarea } from "@mui/joy";
+import { Button, Input } from "@usememos/mui";
 import { isEqual } from "lodash-es";
 import { XIcon } from "lucide-react";
 import { useState } from "react";
@@ -193,7 +193,7 @@ const UpdateAccountDialog: React.FC<Props> = ({ destroy }: Props) => {
           {t("common.email")}
           <span className="text-sm text-gray-400 ml-1">({t("setting.account-section.email-note")})</span>
         </p>
-        <Input className="w-full" type="email" value={state.email} onChange={handleEmailChanged} />
+        <Input fullWidth type="email" value={state.email} onChange={handleEmailChanged} />
         <p className="text-sm">{t("common.description")}</p>
         <Textarea
           className="w-full"
diff --git a/web/src/components/UpdateCustomizedProfileDialog.tsx b/web/src/components/UpdateCustomizedProfileDialog.tsx
index a522530cd..3434af7f6 100644
--- a/web/src/components/UpdateCustomizedProfileDialog.tsx
+++ b/web/src/components/UpdateCustomizedProfileDialog.tsx
@@ -1,6 +1,5 @@
-import { Input } from "@mui/joy";
 import Textarea from "@mui/joy/Textarea/Textarea";
-import { Button } from "@usememos/mui";
+import { Button, Input } from "@usememos/mui";
 import { XIcon } from "lucide-react";
 import { useState } from "react";
 import { toast } from "react-hot-toast";
diff --git a/web/src/pages/Resources.tsx b/web/src/pages/Resources.tsx
index 8f14ee551..90c3a5dc4 100644
--- a/web/src/pages/Resources.tsx
+++ b/web/src/pages/Resources.tsx
@@ -1,5 +1,5 @@
-import { Divider, Input, Tooltip } from "@mui/joy";
-import { Button } from "@usememos/mui";
+import { Divider, Tooltip } from "@mui/joy";
+import { Button, Input } from "@usememos/mui";
 import dayjs from "dayjs";
 import { includes } from "lodash-es";
 import { PaperclipIcon, SearchIcon, TrashIcon } from "lucide-react";
diff --git a/web/src/pages/SignUp.tsx b/web/src/pages/SignUp.tsx
index 7ad6b4a64..d20806f2d 100644
--- a/web/src/pages/SignUp.tsx
+++ b/web/src/pages/SignUp.tsx
@@ -1,5 +1,4 @@
-import { Input } from "@mui/joy";
-import { Button } from "@usememos/mui";
+import { Button, Input } from "@usememos/mui";
 import { LoaderIcon } from "lucide-react";
 import { ClientError } from "nice-grpc-web";
 import { useState } from "react";