diff --git a/src/common/component/Avatar.tsx b/src/common/component/Avatar.tsx
index b8f21759..cc409220 100644
--- a/src/common/component/Avatar.tsx
+++ b/src/common/component/Avatar.tsx
@@ -16,6 +16,7 @@ function getFontSize(width: number): number {
   if (width <= 24) return 12;
   if (width <= 32) return 16;
   if (width <= 40) return 18;
+  if (width <= 56) return 22;
   if (width <= 80) return 48;
   return 64;
 }
diff --git a/src/common/component/AvatarUploader.tsx b/src/common/component/AvatarUploader.tsx
index c20e152e..28a70b38 100644
--- a/src/common/component/AvatarUploader.tsx
+++ b/src/common/component/AvatarUploader.tsx
@@ -4,9 +4,9 @@ import Avatar from "./Avatar";
 import uploadIcon from "../../assets/icons/upload.image.svg?url";
 import { useTranslation } from "react-i18next";
 
-const StyledWrapper = styled.div`
-  width: 96px;
-  height: 96px;
+const StyledWrapper = styled.div<{ size: number }>`
+  width: ${({ size }) => `${size}px`};
+  height: ${({ size }) => `${size}px`};
   position: relative;
   cursor: pointer;
   .avatar {
@@ -67,6 +67,7 @@ const StyledWrapper = styled.div`
 
 type UID = number;
 interface Props {
+  size?: number;
   uid?: UID;
   className?: string;
   url?: string;
@@ -77,6 +78,7 @@ interface Props {
 }
 
 const AvatarUploader: FC<Props> = ({
+  size = 96,
   uid,
   className = "",
   url = "",
@@ -101,9 +103,9 @@ const AvatarUploader: FC<Props> = ({
   };
 
   return (
-    <StyledWrapper className={className}>
+    <StyledWrapper size={size} className={className}>
       <div className="avatar">
-        <Avatar width={96} height={96} type={type} src={url} name={name} className={className} />
+        <Avatar width={size} height={size} type={type} src={url} name={name} className={className} />
         {!disabled && (
           <>
             <div className="tip">
diff --git a/src/routes/setting/BotConfig/index.tsx b/src/routes/setting/BotConfig/index.tsx
index 8064f7fe..531324a4 100644
--- a/src/routes/setting/BotConfig/index.tsx
+++ b/src/routes/setting/BotConfig/index.tsx
@@ -78,7 +78,7 @@ export default function BotConfig() {
                 const { uid, name, avatar } = bot;
                 return <tr key={uid} className="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
                   <td className="px-4 py-2">
-                    <AvatarUploader uid={uid} url={avatar} uploadImage={updateAvatar} name={name} className="!w-14 !h-14" />
+                    <AvatarUploader uid={uid} url={avatar} uploadImage={updateAvatar} name={name} size={56} />
 
                   </td>
                   <td className={`${tdClass}`}>