diff --git a/web/modals/user-profile/user-profile-action-buttons.react.js b/web/modals/user-profile/user-profile-action-buttons.react.js
index c14549ccb..96097bd9f 100644
--- a/web/modals/user-profile/user-profile-action-buttons.react.js
+++ b/web/modals/user-profile/user-profile-action-buttons.react.js
@@ -1,29 +1,100 @@
 // @flow
 
+import { faUserMinus, faUserPlus } from '@fortawesome/free-solid-svg-icons';
 import * as React from 'react';
 
+import { useRelationshipPrompt } from 'lib/hooks/relationship-prompt.js';
+import { userRelationshipStatus } from 'lib/types/relationship-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types';
 
 import UserProfileMessageButton from './user-profile-message-button.react.js';
 import css from './user-profile.css';
+import RelationshipPromptButton from '../../chat/relationship-prompt/relationship-prompt-button.js';
+import { buttonThemes } from '../../components/button.react.js';
 
 type Props = {
   +threadInfo: ThreadInfo,
 };
 
 function UserProfileActionButtons(props: Props): React.Node {
   const { threadInfo } = props;
 
-  const userProfileActionButtons = React.useMemo(
-    () => (
-      <div className={css.buttonsContainer}>
+  const {
+    otherUserInfo,
+    callbacks: { friendUser, unfriendUser },
+  } = useRelationshipPrompt(threadInfo);
+
+  const userProfileActionButtons = React.useMemo(() => {
+    if (
+      !otherUserInfo ||
+      otherUserInfo.relationshipStatus === userRelationshipStatus.FRIEND
+    ) {
+      return <UserProfileMessageButton threadInfo={threadInfo} />;
+    }
+
+    if (
+      otherUserInfo.relationshipStatus ===
+      userRelationshipStatus.REQUEST_RECEIVED
+    ) {
+      return (
+        <>
+          <UserProfileMessageButton threadInfo={threadInfo} />
+          <div>
+            <p className={css.incomingFriendRequestText}>
+              Incoming friend request
+            </p>
+            <div className={css.multiButtonRowContainer}>
+              <RelationshipPromptButton
+                text="Accept"
+                icon={faUserPlus}
+                buttonColor={buttonThemes.success}
+                onClick={friendUser}
+                className={css.actionButton}
+              />
+              <RelationshipPromptButton
+                text="Reject"
+                icon={faUserMinus}
+                buttonColor={buttonThemes.danger}
+                onClick={unfriendUser}
+                className={css.actionButton}
+              />
+            </div>
+          </div>
+        </>
+      );
+    }
+
+    if (
+      otherUserInfo.relationshipStatus === userRelationshipStatus.REQUEST_SENT
+    ) {
+      return (
+        <div className={css.multiButtonRowContainer}>
+          <RelationshipPromptButton
+            text="Withdraw Friend Request"
+            icon={faUserMinus}
+            buttonColor={buttonThemes.danger}
+            onClick={unfriendUser}
+            className={css.actionButton}
+          />
+          <UserProfileMessageButton threadInfo={threadInfo} />
+        </div>
+      );
+    }
+    return (
+      <div className={css.multiButtonRowContainer}>
+        <RelationshipPromptButton
+          text="Add Friend"
+          icon={faUserPlus}
+          buttonColor={buttonThemes.success}
+          onClick={friendUser}
+          className={css.actionButton}
+        />
         <UserProfileMessageButton threadInfo={threadInfo} />
       </div>
-    ),
-    [threadInfo],
-  );
+    );
+  }, [otherUserInfo, friendUser, threadInfo, unfriendUser]);
 
   return userProfileActionButtons;
 }
 
 export default UserProfileActionButtons;
diff --git a/web/modals/user-profile/user-profile.css b/web/modals/user-profile/user-profile.css
index 6bcb9e051..159662fac 100644
--- a/web/modals/user-profile/user-profile.css
+++ b/web/modals/user-profile/user-profile.css
@@ -1,46 +1,52 @@
 .container {
   padding: 0 32px 32px;
   width: 552px;
   max-width: 80vw;
 }
 
 .userInfoContainer {
   display: flex;
   align-items: center;
+  margin-bottom: 24px;
 }
 
 .usernameContainer {
   padding-left: 16px;
 }
 
 .usernameText {
   font-size: var(--xxl-font-24);
   color: var(--fg);
   font-weight: 500;
 }
 
 .copyUsernameContainer {
   display: flex;
   align-items: center;
   color: var(--purple-link);
   margin-top: 8px;
 }
 
 .copyUsernameContainer:hover {
   cursor: pointer;
 }
 
 .copyUsernameText {
   font-size: var(--xs-font-12);
   margin-left: 4px;
 }
 
-.buttonsContainer {
-  margin-top: 24px;
+.multiButtonRowContainer {
   display: flex;
+  column-gap: 8px;
 }
 
 .actionButton {
   column-gap: 8px;
-  flex-grow: 1;
+  flex: 1;
+}
+
+.incomingFriendRequestText {
+  color: var(--fg);
+  margin: 24px 0 8px 0;
 }