diff --git a/web/settings/relationship/friend-list-row.css b/web/settings/relationship/friend-list-row.css
index 4feaef262..0e85babcc 100644
--- a/web/settings/relationship/friend-list-row.css
+++ b/web/settings/relationship/friend-list-row.css
@@ -1,8 +1,32 @@
 .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);
 }
+
+.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-primary);
+  cursor: pointer;
+  background: none;
+  border: none;
+}
+
+.destructive {
+  color: var(--btn-bg-danger);
+}
+
+.edit_button {
+  color: var(--relationship-modal-color);
+}
diff --git a/web/settings/relationship/friend-list-row.react.js b/web/settings/relationship/friend-list-row.react.js
index 60b7e4fbe..841bf2ebb 100644
--- a/web/settings/relationship/friend-list-row.react.js
+++ b/web/settings/relationship/friend-list-row.react.js
@@ -1,14 +1,48 @@
 // @flow
 
+import classnames from 'classnames';
 import * as React from 'react';
 
+import { userRelationshipStatus } from 'lib/types/relationship-types';
+
+import SWMansionIcon from '../../SWMansionIcon.react';
 import css from './friend-list-row.css';
 import type { UserRowProps } from './user-list.react';
 
 function FriendListRow(props: UserRowProps): React.Node {
   const { userInfo } = props;
+  let buttons = null;
+  if (userInfo.relationshipStatus === userRelationshipStatus.REQUEST_SENT) {
+    buttons = (
+      <button className={classnames([css.button, css.destructive])}>
+        Cancel request
+      </button>
+    );
+  } else if (
+    userInfo.relationshipStatus === userRelationshipStatus.REQUEST_RECEIVED
+  ) {
+    buttons = (
+      <>
+        <button className={css.button}>Accept</button>
+        <button className={classnames([css.button, css.destructive])}>
+          Reject
+        </button>
+      </>
+    );
+  } else if (userInfo.relationshipStatus === userRelationshipStatus.FRIEND) {
+    buttons = (
+      <button className={classnames([css.button, css.edit_button])}>
+        <SWMansionIcon icon="edit" size={22} />
+      </button>
+    );
+  }
 
-  return <div className={css.container}>{userInfo.username}</div>;
+  return (
+    <div className={css.container}>
+      {userInfo.username}
+      <div className={css.buttons}>{buttons}</div>
+    </div>
+  );
 }
 
 export default FriendListRow;