diff --git a/web/settings/relationship/add-users-list-modal.react.js b/web/settings/relationship/add-users-list-modal.react.js
--- a/web/settings/relationship/add-users-list-modal.react.js
+++ b/web/settings/relationship/add-users-list-modal.react.js
@@ -2,14 +2,29 @@
 
 import * as React from 'react';
 
+import {
+  updateRelationships,
+  updateRelationshipsActionTypes,
+} from 'lib/actions/relationship-actions.js';
+import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import type {
   UserRelationshipStatus,
   RelationshipAction,
 } from 'lib/types/relationship-types.js';
+import { useLegacyAshoatKeyserverCall } from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
+import css from './add-users-list.css';
 import AddUsersList from './add-users-list.react.js';
 import type { ButtonColor } from '../../components/button.react.js';
+import Button from '../../components/button.react.js';
+import LoadingIndicator from '../../loading-indicator.react.js';
 import SearchModal from '../../modals/search-modal.react.js';
+import { useSelector } from '../../redux/redux-utils.js';
+
+const loadingStatusSelector = createLoadingStatusSelector(
+  updateRelationshipsActionTypes,
+);
 
 type Props = {
   +closeModal: () => void,
@@ -30,32 +45,87 @@
     relationshipAction,
   } = props;
 
+  const [errorMessage, setErrorMessage] = React.useState('');
+
   const addUsersListChildGenerator = React.useCallback(
     (searchText: string) => (
       <AddUsersList
         searchText={searchText}
         excludedStatuses={excludedStatuses}
-        confirmButtonContent={confirmButtonContent}
-        confirmButtonColor={confirmButtonColor}
-        relationshipAction={relationshipAction}
-        closeModal={closeModal}
+        errorMessage={errorMessage}
       />
     ),
-    [
-      excludedStatuses,
-      confirmButtonContent,
-      confirmButtonColor,
-      relationshipAction,
-      closeModal,
-    ],
+    [excludedStatuses, errorMessage],
+  );
+
+  const callUpdateRelationships =
+    useLegacyAshoatKeyserverCall(updateRelationships);
+
+  const dispatchActionPromise = useDispatchActionPromise();
+
+  const updateRelationshipsPromiseCreator = React.useCallback(async () => {
+    try {
+      setErrorMessage('');
+      const result = await callUpdateRelationships({
+        action: relationshipAction,
+        userIDs: [], // TODO: re-add pending users
+      });
+      closeModal();
+      return result;
+    } catch (e) {
+      setErrorMessage('unknown error');
+      throw e;
+    }
+  }, [callUpdateRelationships, closeModal, relationshipAction]);
+
+  const confirmSelection = React.useCallback(
+    () =>
+      dispatchActionPromise(
+        updateRelationshipsActionTypes,
+        updateRelationshipsPromiseCreator(),
+      ),
+    [dispatchActionPromise, updateRelationshipsPromiseCreator],
   );
 
+  const loadingStatus = useSelector(loadingStatusSelector);
+
+  const primaryButton = React.useMemo(() => {
+    let buttonContent = confirmButtonContent;
+
+    if (loadingStatus === 'loading') {
+      buttonContent = (
+        <>
+          <div className={css.hidden}>{confirmButtonContent}</div>
+          <LoadingIndicator status="loading" />
+        </>
+      );
+    }
+
+    return (
+      <Button
+        onClick={confirmSelection}
+        // TODO: re-add 0 users check
+        disabled={true || loadingStatus === 'loading'}
+        variant="filled"
+        buttonColor={confirmButtonColor}
+      >
+        <div className={css.confirmButtonContainer}>{buttonContent}</div>
+      </Button>
+    );
+  }, [
+    confirmButtonColor,
+    confirmButtonContent,
+    confirmSelection,
+    loadingStatus,
+  ]);
+
   return (
     <SearchModal
       name={name}
       onClose={closeModal}
       size="large"
       searchPlaceholder="Search by name"
+      primaryButton={primaryButton}
     >
       {addUsersListChildGenerator}
     </SearchModal>
diff --git a/web/settings/relationship/add-users-list.css b/web/settings/relationship/add-users-list.css
--- a/web/settings/relationship/add-users-list.css
+++ b/web/settings/relationship/add-users-list.css
@@ -33,11 +33,6 @@
   text-overflow: ellipsis;
 }
 
-.buttons {
-  display: flex;
-  justify-content: space-between;
-}
-
 .confirmButtonContainer {
   display: flex;
   flex-direction: column;
diff --git a/web/settings/relationship/add-users-list.react.js b/web/settings/relationship/add-users-list.react.js
--- a/web/settings/relationship/add-users-list.react.js
+++ b/web/settings/relationship/add-users-list.react.js
@@ -2,56 +2,29 @@
 
 import * as React from 'react';
 
-import {
-  updateRelationships,
-  updateRelationshipsActionTypes,
-} from 'lib/actions/relationship-actions.js';
 import { useENSNames } from 'lib/hooks/ens-cache.js';
-import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { useUserSearchIndex } from 'lib/selectors/nav-selectors.js';
 import { useSearchUsers } from 'lib/shared/search-utils.js';
-import type {
-  UserRelationshipStatus,
-  RelationshipAction,
-} from 'lib/types/relationship-types.js';
+import type { UserRelationshipStatus } from 'lib/types/relationship-types.js';
 import type {
   GlobalAccountUserInfo,
   AccountUserInfo,
 } from 'lib/types/user-types.js';
-import { useLegacyAshoatKeyserverCall } from 'lib/utils/action-utils.js';
 import { values } from 'lib/utils/objects.js';
-import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js';
 
 import AddUsersListItem from './add-users-list-item.react.js';
 import css from './add-users-list.css';
-import Button from '../../components/button.react.js';
-import type { ButtonColor } from '../../components/button.react.js';
 import Label from '../../components/label.react.js';
-import LoadingIndicator from '../../loading-indicator.react.js';
 import { useSelector } from '../../redux/redux-utils.js';
 
-const loadingStatusSelector = createLoadingStatusSelector(
-  updateRelationshipsActionTypes,
-);
-
 type Props = {
   +searchText: string,
   +excludedStatuses?: $ReadOnlySet<UserRelationshipStatus>,
-  +closeModal: () => void,
-  +confirmButtonContent: React.Node,
-  +confirmButtonColor?: ButtonColor,
-  +relationshipAction: RelationshipAction,
+  +errorMessage: string,
 };
 
 function AddUsersList(props: Props): React.Node {
-  const {
-    searchText,
-    excludedStatuses = new Set(),
-    closeModal,
-    confirmButtonContent,
-    confirmButtonColor,
-    relationshipAction,
-  } = props;
+  const { searchText, excludedStatuses = new Set(), errorMessage } = props;
 
   const viewerID = useSelector(state => state.currentUserInfo?.id);
   const userInfos = useSelector(state => state.userStore.userInfos);
@@ -186,43 +159,6 @@
     [filteredUsersWithENSNames, selectUser],
   );
 
-  const [errorMessage, setErrorMessage] = React.useState('');
-  const callUpdateRelationships =
-    useLegacyAshoatKeyserverCall(updateRelationships);
-  const dispatchActionPromise = useDispatchActionPromise();
-  const updateRelationshipsPromiseCreator = React.useCallback(async () => {
-    try {
-      setErrorMessage('');
-      const result = await callUpdateRelationships({
-        action: relationshipAction,
-        userIDs: Array.from(pendingUserIDs),
-      });
-      closeModal();
-      return result;
-    } catch (e) {
-      setErrorMessage('unknown error');
-      throw e;
-    }
-  }, [callUpdateRelationships, closeModal, pendingUserIDs, relationshipAction]);
-  const confirmSelection = React.useCallback(
-    () =>
-      dispatchActionPromise(
-        updateRelationshipsActionTypes,
-        updateRelationshipsPromiseCreator(),
-      ),
-    [dispatchActionPromise, updateRelationshipsPromiseCreator],
-  );
-  const loadingStatus = useSelector(loadingStatusSelector);
-  let buttonContent = confirmButtonContent;
-  if (loadingStatus === 'loading') {
-    buttonContent = (
-      <>
-        <div className={css.hidden}>{confirmButtonContent}</div>
-        <LoadingIndicator status="loading" />
-      </>
-    );
-  }
-
   let errors;
   if (errorMessage) {
     errors = <div className={css.error}>{errorMessage}</div>;
@@ -233,19 +169,6 @@
       {userTags}
       <div className={css.userRowsContainer}>{userRows}</div>
       {errors}
-      <div className={css.buttons}>
-        <Button variant="outline" onClick={closeModal}>
-          Cancel
-        </Button>
-        <Button
-          onClick={confirmSelection}
-          disabled={pendingUserIDs.size === 0 || loadingStatus === 'loading'}
-          variant="filled"
-          buttonColor={confirmButtonColor}
-        >
-          <div className={css.confirmButtonContainer}>{buttonContent}</div>
-        </Button>
-      </div>
     </div>
   );
 }