diff --git a/web/settings/relationship/block-list-row.react.js b/web/settings/relationship/block-list-row.react.js
--- a/web/settings/relationship/block-list-row.react.js
+++ b/web/settings/relationship/block-list-row.react.js
@@ -10,14 +10,17 @@
 import UserAvatar from '../../avatars/user-avatar.react.js';
 import MenuItem from '../../components/menu-item.react.js';
 import Menu from '../../components/menu.react.js';
+import { usePushUserProfileModal } from '../../modals/user-profile/user-profile-utils.js';
 
 function BlockListRow(props: UserRowProps): React.Node {
   const { userInfo, onMenuVisibilityChange } = props;
   const { unblockUser } = useRelationshipCallbacks(userInfo.id);
   const editIcon = <SWMansionIcon icon="edit-1" size={22} />;
 
+  const pushUserProfileModal = usePushUserProfileModal(userInfo.id);
+
   return (
-    <div className={css.container}>
+    <div className={css.container} onClick={pushUserProfileModal}>
       <div className={css.userInfoContainer}>
         <UserAvatar size="S" userID={userInfo.id} />
         <div className={css.usernameContainer}>{userInfo.username}</div>
diff --git a/web/settings/relationship/friend-list-row.react.js b/web/settings/relationship/friend-list-row.react.js
--- a/web/settings/relationship/friend-list-row.react.js
+++ b/web/settings/relationship/friend-list-row.react.js
@@ -12,6 +12,7 @@
 import Button from '../../components/button.react.js';
 import MenuItem from '../../components/menu-item.react.js';
 import Menu from '../../components/menu.react.js';
+import { usePushUserProfileModal } from '../../modals/user-profile/user-profile-utils.js';
 
 const dangerButtonColor = {
   color: 'var(--btn-bg-danger)',
@@ -21,6 +22,23 @@
   const { userInfo, onMenuVisibilityChange } = props;
 
   const { friendUser, unfriendUser } = useRelationshipCallbacks(userInfo.id);
+
+  const friendUserCallback = React.useCallback(
+    (event: SyntheticEvent<HTMLElement>) => {
+      event.stopPropagation();
+      friendUser();
+    },
+    [friendUser],
+  );
+
+  const unfriendUserCallback = React.useCallback(
+    (event: SyntheticEvent<HTMLElement>) => {
+      event.stopPropagation();
+      unfriendUser();
+    },
+    [unfriendUser],
+  );
+
   const buttons = React.useMemo(() => {
     if (userInfo.relationshipStatus === userRelationshipStatus.REQUEST_SENT) {
       return (
@@ -28,7 +46,7 @@
           variant="text"
           className={css.button}
           buttonColor={dangerButtonColor}
-          onClick={unfriendUser}
+          onClick={unfriendUserCallback}
         >
           Cancel request
         </Button>
@@ -39,14 +57,18 @@
     ) {
       return (
         <>
-          <Button variant="text" className={css.button} onClick={friendUser}>
+          <Button
+            variant="text"
+            className={css.button}
+            onClick={friendUserCallback}
+          >
             Accept
           </Button>
           <Button
             variant="text"
             className={css.button}
             buttonColor={dangerButtonColor}
-            onClick={unfriendUser}
+            onClick={unfriendUserCallback}
           >
             Reject
           </Button>
@@ -73,14 +95,17 @@
     }
     return undefined;
   }, [
-    friendUser,
-    unfriendUser,
     userInfo.relationshipStatus,
+    unfriendUserCallback,
+    friendUserCallback,
     onMenuVisibilityChange,
+    unfriendUser,
   ]);
 
+  const pushUserProfileModal = usePushUserProfileModal(userInfo.id);
+
   return (
-    <div className={css.container}>
+    <div className={css.container} onClick={pushUserProfileModal}>
       <div className={css.userInfoContainer}>
         <UserAvatar size="S" userID={userInfo.id} />
         <div className={css.usernameContainer}>{userInfo.username}</div>
diff --git a/web/settings/relationship/user-list-row.css b/web/settings/relationship/user-list-row.css
--- a/web/settings/relationship/user-list-row.css
+++ b/web/settings/relationship/user-list-row.css
@@ -7,6 +7,12 @@
   line-height: var(--line-height-display);
 }
 
+.container:hover {
+  cursor: pointer;
+  background-color: var(--inline-engagement-bg-hover);
+  border-radius: 8px;
+}
+
 .usernameContainer {
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -27,6 +33,10 @@
   color: var(--btn-bg-filled);
 }
 
+.button:hover {
+  text-decoration: underline;
+}
+
 .edit_menu {
   position: relative;
 }