diff --git a/web/settings/relationship/block-list-modal.react.js b/web/settings/relationship/block-list-modal.react.js
--- a/web/settings/relationship/block-list-modal.react.js
+++ b/web/settings/relationship/block-list-modal.react.js
@@ -5,7 +5,9 @@
 import { userRelationshipStatus } from 'lib/types/relationship-types';
 import type { AccountUserInfo } from 'lib/types/user-types';
 
+import { useModalContext } from '../../modals/modal-provider.react.js';
 import BlockListRow from './block-list-row.react';
+import BlockUsersModal from './block-users-modal.react';
 import UserListModal from './user-list-modal.react';
 
 function filterUser(userInfo: AccountUserInfo) {
@@ -25,6 +27,13 @@
 
 function BlockListModal(props: Props): React.Node {
   const { onClose } = props;
+
+  const { pushModal } = useModalContext();
+  const openBlockUsersModal = React.useCallback(
+    () => pushModal(<BlockUsersModal onClose={onClose} />),
+    [onClose, pushModal],
+  );
+
   return (
     <UserListModal
       onClose={onClose}
@@ -32,6 +41,8 @@
       userRowComponent={BlockListRow}
       filterUser={filterUser}
       usersComparator={usersComparator}
+      buttonLabel="Block Users"
+      onAddUsersClick={openBlockUsersModal}
     />
   );
 }
diff --git a/web/settings/relationship/friend-list-modal.react.js b/web/settings/relationship/friend-list-modal.react.js
--- a/web/settings/relationship/friend-list-modal.react.js
+++ b/web/settings/relationship/friend-list-modal.react.js
@@ -5,6 +5,8 @@
 import { userRelationshipStatus } from 'lib/types/relationship-types';
 import type { AccountUserInfo } from 'lib/types/user-types';
 
+import { useModalContext } from '../../modals/modal-provider.react.js';
+import AddFriendsModal from './add-friends-modal.react';
 import FriendListRow from './friend-list-row.react';
 import UserListModal from './user-list-modal.react';
 
@@ -34,6 +36,13 @@
 
 function FriendListModal(props: Props): React.Node {
   const { onClose } = props;
+
+  const { pushModal } = useModalContext();
+  const openNewFriendsModal = React.useCallback(
+    () => pushModal(<AddFriendsModal onClose={onClose} />),
+    [onClose, pushModal],
+  );
+
   return (
     <UserListModal
       onClose={onClose}
@@ -41,6 +50,8 @@
       userRowComponent={FriendListRow}
       filterUser={filterUser}
       usersComparator={usersComparator}
+      buttonLabel="Add New Friends"
+      onAddUsersClick={openNewFriendsModal}
     />
   );
 }
diff --git a/web/settings/relationship/user-list-modal.react.js b/web/settings/relationship/user-list-modal.react.js
--- a/web/settings/relationship/user-list-modal.react.js
+++ b/web/settings/relationship/user-list-modal.react.js
@@ -4,7 +4,9 @@
 
 import type { AccountUserInfo } from 'lib/types/user-types';
 
+import Button from '../../components/button.react.js';
 import SearchModal from '../../modals/search-modal.react';
+import css from './user-list.css';
 import { UserList, type UserRowProps } from './user-list.react';
 
 type Props = {
@@ -13,6 +15,8 @@
   +userRowComponent: React.ComponentType<UserRowProps>,
   +filterUser: (userInfo: AccountUserInfo) => boolean,
   +usersComparator: (user1: AccountUserInfo, user2: AccountUserInfo) => number,
+  +buttonLabel: string,
+  +onAddUsersClick: () => void,
 };
 
 function UserListModal(props: Props): React.Node {
@@ -22,17 +26,29 @@
     userRowComponent,
     filterUser,
     usersComparator,
+    buttonLabel,
+    onAddUsersClick,
   } = props;
+
   const searchModalChildGenerator = React.useCallback(
     (searchText: string) => (
-      <UserList
-        userRowComponent={userRowComponent}
-        filterUser={filterUser}
-        usersComparator={usersComparator}
-        searchText={searchText}
-      />
+      <div className={css.searchModalContent}>
+        <UserList
+          userRowComponent={userRowComponent}
+          filterUser={filterUser}
+          usersComparator={usersComparator}
+          searchText={searchText}
+        />
+        <Button onClick={onAddUsersClick}>{buttonLabel}</Button>
+      </div>
     ),
-    [filterUser, userRowComponent, usersComparator],
+    [
+      buttonLabel,
+      filterUser,
+      onAddUsersClick,
+      userRowComponent,
+      usersComparator,
+    ],
   );
 
   return (
diff --git a/web/settings/relationship/user-list.css b/web/settings/relationship/user-list.css
--- a/web/settings/relationship/user-list.css
+++ b/web/settings/relationship/user-list.css
@@ -1,8 +1,15 @@
 .container {
   overflow: auto;
-  height: 625px;
+  flex: 1;
 }
 
 .noScroll {
   overflow: hidden;
 }
+
+.searchModalContent {
+  display: flex;
+  flex-direction: column;
+  row-gap: 8px;
+  height: 625px;
+}