diff --git a/src/renderer/src/pages/settings/settings-account.css.ts b/src/renderer/src/pages/settings/settings-account.css.ts
index 2aec8cd0..44ec0d14 100644
--- a/src/renderer/src/pages/settings/settings-account.css.ts
+++ b/src/renderer/src/pages/settings/settings-account.css.ts
@@ -8,13 +8,6 @@ export const form = style({
   gap: `${SPACING_UNIT}px`,
 });
 
-export const blockedUserAvatar = style({
-  width: "32px",
-  height: "32px",
-  borderRadius: "4px",
-  filter: "grayscale(100%)",
-});
-
 export const blockedUser = style({
   display: "flex",
   minWidth: "240px",
diff --git a/src/renderer/src/pages/settings/settings-account.tsx b/src/renderer/src/pages/settings/settings-account.tsx
index 89f5bde1..0aedb4b8 100644
--- a/src/renderer/src/pages/settings/settings-account.tsx
+++ b/src/renderer/src/pages/settings/settings-account.tsx
@@ -1,4 +1,4 @@
-import { Button, SelectField } from "@renderer/components";
+import { Avatar, Button, SelectField } from "@renderer/components";
 import { SPACING_UNIT } from "@renderer/theme.css";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -201,10 +201,11 @@ export function SettingsAccount() {
                     alignItems: "center",
                   }}
                 >
-                  <img
-                    src={user.profileImageUrl!}
+                  <Avatar
+                    style={{ filter: "grayscale(100%)" }}
+                    size={32}
+                    src={user.profileImageUrl}
                     alt={user.displayName}
-                    className={styles.blockedUserAvatar}
                   />
                   <span>{user.displayName}</span>
                 </div>