diff --git a/src/common/component/Message/FavoredMessage.tsx b/src/common/component/Message/FavoredMessage.tsx
index 419cb86a..c4e28177 100644
--- a/src/common/component/Message/FavoredMessage.tsx
+++ b/src/common/component/Message/FavoredMessage.tsx
@@ -33,7 +33,7 @@ const FavoredMessage: FC<Props> = ({ id = "" }) => {
               <StyledMsg className="archive" key={idx}>
                 {user && (
                   <div className="avatar">
-                    <Avatar src={user.avatar} name={user.name} />
+                    <Avatar width={40} height={40} src={user.avatar} name={user.name} />
                   </div>
                 )}
                 <div className="details">
diff --git a/src/common/component/Message/ForwardedMessage.tsx b/src/common/component/Message/ForwardedMessage.tsx
index 9a561cec..12e43b0a 100644
--- a/src/common/component/Message/ForwardedMessage.tsx
+++ b/src/common/component/Message/ForwardedMessage.tsx
@@ -63,7 +63,7 @@ const ForwardedMessage: FC<Props> = ({ context, to, from_uid, id }) => {
                 <StyledMsg className="archive" key={idx}>
                   {user && (
                     <div className="avatar">
-                      <Avatar src={user.avatar} name={user.name} />
+                      <Avatar width={40} height={40} src={user.avatar} name={user.name} />
                     </div>
                   )}
                   <div className="details">
diff --git a/src/common/component/Message/PreviewMessage.tsx b/src/common/component/Message/PreviewMessage.tsx
index 6df9ac76..08496b9f 100644
--- a/src/common/component/Message/PreviewMessage.tsx
+++ b/src/common/component/Message/PreviewMessage.tsx
@@ -19,7 +19,7 @@ const PreviewMessage: FC<Props> = ({ mid = 0 }) => {
   return (
     <StyledWrapper className={`preview`}>
       <div className="avatar">
-        <Avatar src={avatar} name={name} />
+        <Avatar width={40} height={40} src={avatar} name={name} />
       </div>
       <div className="details">
         <div className="up">
diff --git a/src/common/component/Message/Reply.tsx b/src/common/component/Message/Reply.tsx
index 84371a9d..19fde9eb 100644
--- a/src/common/component/Message/Reply.tsx
+++ b/src/common/component/Message/Reply.tsx
@@ -177,7 +177,13 @@ const Reply: FC<ReplyProps> = ({ mid, interactive = true }) => {
       onClick={interactive ? handleClick : undefined}
     >
       <div className="user">
-        <Avatar className="avatar" src={currUser.avatar} name={currUser.name} />
+        <Avatar
+          width={16}
+          height={16}
+          className="avatar"
+          src={currUser.avatar}
+          name={currUser.name}
+        />
         <span className="name">{currUser.name}</span>
       </div>
       <div className="content">{renderContent(data)}</div>
diff --git a/src/common/component/Message/index.tsx b/src/common/component/Message/index.tsx
index f5d8079d..628f24bc 100644
--- a/src/common/component/Message/index.tsx
+++ b/src/common/component/Message/index.tsx
@@ -91,8 +91,9 @@ const Message: FC<IProps> = ({
       onContextMenu={readOnly ? undefined : handleContextMenuEvent}
       data-msg-mid={mid}
       ref={inviewRef}
-      className={`message ${readOnly ? "readonly" : ""} ${pinInfo ? "pinned" : ""} ${contextMenuVisible ? "contextVisible" : ""
-        } `}
+      className={`message ${readOnly ? "readonly" : ""} ${pinInfo ? "pinned" : ""} ${
+        contextMenuVisible ? "contextVisible" : ""
+      } `}
     >
       <Tippy
         key={_key}
@@ -104,7 +105,7 @@ const Message: FC<IProps> = ({
         content={<Profile uid={fromUid || 0} type="card" cid={context == "user" ? 0 : contextId} />}
       >
         <div className="avatar" data-uid={fromUid} ref={avatarRef}>
-          <Avatar src={currUser?.avatar} name={currUser?.name} />
+          <Avatar width={40} height={40} src={currUser?.avatar} name={currUser?.name} />
         </div>
       </Tippy>
       <ContextMenu
@@ -117,8 +118,9 @@ const Message: FC<IProps> = ({
       >
         <div
           className="details"
-          data-pin-tip={`pinned by ${pinInfo?.created_by ? usersData[pinInfo.created_by]?.name : ""
-            }`}
+          data-pin-tip={`pinned by ${
+            pinInfo?.created_by ? usersData[pinInfo.created_by]?.name : ""
+          }`}
         >
           <div className="up">
             <span className="name">{currUser?.name || "Deleted User"}</span>
diff --git a/src/common/component/Profile/index.tsx b/src/common/component/Profile/index.tsx
index c5d698cc..b89f2984 100644
--- a/src/common/component/Profile/index.tsx
+++ b/src/common/component/Profile/index.tsx
@@ -47,7 +47,13 @@ const Profile: FC<Props> = ({ uid, type = "embed", cid }) => {
 
   return (
     <StyledWrapper className={type}>
-      <Avatar className="rounded-full w-20 h-20 object-cover" src={avatar} name={name} />
+      <Avatar
+        width={80}
+        height={80}
+        className="rounded-full w-20 h-20 object-cover"
+        src={avatar}
+        name={name}
+      />
       <h2 className="text-lg select-text font-bold text-[#1c1c1e]">{name}</h2>
       <span className="text-sm text-[#98a2b3] select-text">{email}</span>
       {/* <p className="intro">{introduction}</p> */}
diff --git a/src/common/component/User/index.tsx b/src/common/component/User/index.tsx
index a83b860a..a8523e51 100644
--- a/src/common/component/User/index.tsx
+++ b/src/common/component/User/index.tsx
@@ -62,7 +62,11 @@ const User: FC<Props> = ({
             <Avatar src={curr.avatar} name={curr.name} alt="avatar" />
             <div className={`status ${online ? "online" : "offline"}`}></div>
           </div>
-          {!compact && <span className="name" title={curr?.name}>{curr?.name}</span>}
+          {!compact && (
+            <span className="name" title={curr?.name}>
+              {curr?.name}
+            </span>
+          )}
           {owner && <IconOwner />}
           {curr.is_bot && <IconBot className="!w-5 !h-5" />}
         </StyledWrapper>
@@ -90,10 +94,20 @@ const User: FC<Props> = ({
           onContextMenu={enableContextMenu ? handleContextMenuEvent : undefined}
         >
           <div className="avatar">
-            <Avatar src={curr.avatar} name={curr.name} alt="avatar" />
+            <Avatar
+              width={avatarSize}
+              height={avatarSize}
+              src={curr.avatar}
+              name={curr.name}
+              alt="avatar"
+            />
             <div className={`status ${online ? "online" : "offline"}`}></div>
           </div>
-          {!compact && <span className="name" title={curr?.name}>{curr?.name}</span>}
+          {!compact && (
+            <span className="name" title={curr?.name}>
+              {curr?.name}
+            </span>
+          )}
           {owner && <IconOwner />}
           {curr.is_bot && <IconBot className="!w-5 !h-5" />}
         </StyledWrapper>
diff --git a/src/routes/chat/GuestSessionList/Session.tsx b/src/routes/chat/GuestSessionList/Session.tsx
index 99a5907f..7e9c2dd1 100644
--- a/src/routes/chat/GuestSessionList/Session.tsx
+++ b/src/routes/chat/GuestSessionList/Session.tsx
@@ -41,7 +41,7 @@ const Session: FC<IProps> = ({ id, mid }) => {
     <li className="session">
       <NavLink className={`nav`} to={`/chat/channel/${id}`}>
         <div className="icon">
-          <Avatar className="icon" type="channel" name={name} src={icon} />
+          <Avatar width={40} height={40} className="icon" type="channel" name={name} src={icon} />
         </div>
         <div className="details">
           <div className="up">
diff --git a/src/routes/chat/SessionList/Session.tsx b/src/routes/chat/SessionList/Session.tsx
index 22af7815..b766d187 100644
--- a/src/routes/chat/SessionList/Session.tsx
+++ b/src/routes/chat/SessionList/Session.tsx
@@ -117,7 +117,14 @@ const Session: FC<IProps> = ({
             {type == "user" ? (
               <User avatarSize={40} compact interactive={false} uid={id} />
             ) : (
-              <Avatar className="icon" type="channel" name={name} src={icon} />
+              <Avatar
+                width={40}
+                height={40}
+                className="icon"
+                type="channel"
+                name={name}
+                src={icon}
+              />
             )}
           </div>
           <div className="details">
diff --git a/src/routes/home/User.tsx b/src/routes/home/User.tsx
index 02da160f..4586d271 100644
--- a/src/routes/home/User.tsx
+++ b/src/routes/home/User.tsx
@@ -31,7 +31,7 @@ const User: FC<Props> = ({ uid }) => {
     <StyledWrapper>
       <NavLink to={`/setting?nav=my_account&f=${pathname}`}>
         <div className="avatar">
-          <Avatar src={user.avatar} name={user.name} />
+          <Avatar width={32} height={32} src={user.avatar} name={user.name} />
         </div>
       </NavLink>
     </StyledWrapper>
diff --git a/src/routes/resources/Filter/index.tsx b/src/routes/resources/Filter/index.tsx
index 8a43fa9c..0cdd73e6 100644
--- a/src/routes/resources/Filter/index.tsx
+++ b/src/routes/resources/Filter/index.tsx
@@ -93,9 +93,17 @@ export default function Filter({ filter, updateFilter }) {
           onClick={toggleFilterVisible.bind(null, { from: true })}
         >
           {from && (
-            <Avatar className="avatar" name={userMap[from].name} src={userMap[from].avatar} />
+            <Avatar
+              width={16}
+              height={16}
+              className="avatar"
+              name={userMap[from].name}
+              src={userMap[from].avatar}
+            />
           )}
-          <span className="txt">{t("from")} {from && userMap[from].name}</span>
+          <span className="txt">
+            {t("from")} {from && userMap[from].name}
+          </span>
           <ArrowDown className="arrow" />
         </div>
       </Tippy>