diff --git a/web/settings/relationship/block-list-row.react.js b/web/settings/relationship/block-list-row.react.js
index 192c5533d..abeecea27 100644
--- a/web/settings/relationship/block-list-row.react.js
+++ b/web/settings/relationship/block-list-row.react.js
@@ -1,36 +1,40 @@
 // @flow
 
 import * as React from 'react';
 
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import { useRelationshipCallbacks } from 'lib/hooks/relationship-prompt.js';
 
 import css from './user-list-row.css';
 import type { UserRowProps } from './user-list.react.js';
 import MenuItem from '../../components/menu-item.react.js';
 import Menu from '../../components/menu.react.js';
+import UserAvatar from '../../components/user-avatar.react.js';
 
 function BlockListRow(props: UserRowProps): React.Node {
   const { userInfo, onMenuVisibilityChange } = props;
   const { unblockUser } = useRelationshipCallbacks(userInfo.id);
   const editIcon = <SWMansionIcon icon="edit-1" size={22} />;
 
   return (
     <div className={css.container}>
-      <div className={css.usernameContainer}>{userInfo.username}</div>
+      <div className={css.userInfoContainer}>
+        <UserAvatar size="small" userID={userInfo.id} />
+        <div className={css.usernameContainer}>{userInfo.username}</div>
+      </div>
       <div className={css.buttons}>
         <div className={css.edit_menu}>
           <Menu
             onChange={onMenuVisibilityChange}
             icon={editIcon}
             variant="member-actions"
           >
             <MenuItem text="Unblock" icon="user-plus" onClick={unblockUser} />
           </Menu>
         </div>
       </div>
     </div>
   );
 }
 
 export default BlockListRow;
diff --git a/web/settings/relationship/friend-list-row.react.js b/web/settings/relationship/friend-list-row.react.js
index bbcab3003..5eb42c6c5 100644
--- a/web/settings/relationship/friend-list-row.react.js
+++ b/web/settings/relationship/friend-list-row.react.js
@@ -1,89 +1,93 @@
 // @flow
 
 import * as React from 'react';
 
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import { useRelationshipCallbacks } from 'lib/hooks/relationship-prompt.js';
 import { userRelationshipStatus } from 'lib/types/relationship-types.js';
 
 import css from './user-list-row.css';
 import type { UserRowProps } from './user-list.react.js';
 import Button from '../../components/button.react.js';
 import MenuItem from '../../components/menu-item.react.js';
 import Menu from '../../components/menu.react.js';
+import UserAvatar from '../../components/user-avatar.react.js';
 
 const dangerButtonColor = {
   color: 'var(--btn-bg-danger)',
 };
 
 function FriendListRow(props: UserRowProps): React.Node {
   const { userInfo, onMenuVisibilityChange } = props;
 
   const { friendUser, unfriendUser } = useRelationshipCallbacks(userInfo.id);
   const buttons = React.useMemo(() => {
     if (userInfo.relationshipStatus === userRelationshipStatus.REQUEST_SENT) {
       return (
         <Button
           variant="text"
           className={css.button}
           buttonColor={dangerButtonColor}
           onClick={unfriendUser}
         >
           Cancel request
         </Button>
       );
     }
     if (
       userInfo.relationshipStatus === userRelationshipStatus.REQUEST_RECEIVED
     ) {
       return (
         <>
           <Button variant="text" className={css.button} onClick={friendUser}>
             Accept
           </Button>
           <Button
             variant="text"
             className={css.button}
             buttonColor={dangerButtonColor}
             onClick={unfriendUser}
           >
             Reject
           </Button>
         </>
       );
     }
     if (userInfo.relationshipStatus === userRelationshipStatus.FRIEND) {
       const editIcon = <SWMansionIcon icon="edit-1" size={22} />;
       return (
         <div className={css.edit_menu}>
           <Menu
             onChange={onMenuVisibilityChange}
             icon={editIcon}
             variant="member-actions"
           >
             <MenuItem
               text="Unfriend"
               icon="user-cross"
               onClick={unfriendUser}
             />
           </Menu>
         </div>
       );
     }
     return undefined;
   }, [
     friendUser,
     unfriendUser,
     userInfo.relationshipStatus,
     onMenuVisibilityChange,
   ]);
 
   return (
     <div className={css.container}>
-      <div className={css.usernameContainer}>{userInfo.username}</div>
+      <div className={css.userInfoContainer}>
+        <UserAvatar size="small" userID={userInfo.id} />
+        <div className={css.usernameContainer}>{userInfo.username}</div>
+      </div>
       <div className={css.buttons}>{buttons}</div>
     </div>
   );
 }
 
 export default FriendListRow;
diff --git a/web/settings/relationship/user-list-row.css b/web/settings/relationship/user-list-row.css
index 4a8bd4e90..2819a4062 100644
--- a/web/settings/relationship/user-list-row.css
+++ b/web/settings/relationship/user-list-row.css
@@ -1,31 +1,38 @@
 .container {
   display: flex;
   justify-content: space-between;
   padding: 16px;
   color: var(--relationship-modal-color);
   font-size: var(--l-font-18);
   line-height: var(--line-height-display);
 }
 
 .usernameContainer {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
+  margin-left: 8px;
 }
 
 .buttons {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
 }
 
 .button {
   font-size: var(--s-font-14);
   line-height: var(--line-height-text);
   color: var(--btn-bg-filled);
 }
 
 .edit_menu {
   position: relative;
 }
+
+div.userInfoContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}