diff --git a/web/settings/relationship/user-list-modal.react.js b/web/settings/relationship/user-list-modal.react.js
index d0b6f19b3..d50b027b3 100644
--- a/web/settings/relationship/user-list-modal.react.js
+++ b/web/settings/relationship/user-list-modal.react.js
@@ -1,69 +1,70 @@
 // @flow
 
 import * as React from 'react';
 
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import type { AccountUserInfo, UserInfo } from 'lib/types/user-types.js';
 
 import css from './user-list.css';
 import { UserList, type UserRowProps } from './user-list.react.js';
 import Button from '../../components/button.react.js';
 import SearchModal from '../../modals/search-modal.react.js';
 
 type Props = {
   +name: string,
   +userRowComponent: React.ComponentType<UserRowProps>,
   +filterUser: (userInfo: UserInfo) => boolean,
   +usersComparator: (user1: AccountUserInfo, user2: AccountUserInfo) => number,
   +buttonLabel: string,
   +onAddUsersClick: () => void,
 };
 
 function UserListModal(props: Props): React.Node {
   const {
     name,
     userRowComponent,
     filterUser,
     usersComparator,
     buttonLabel,
     onAddUsersClick,
   } = props;
 
   const { popModal } = useModalContext();
 
   const searchModalChildGenerator = React.useCallback(
     (searchText: string) => (
       <div className={css.searchModalContent}>
         <UserList
           userRowComponent={userRowComponent}
           filterUser={filterUser}
           usersComparator={usersComparator}
           searchText={searchText}
         />
-        <Button variant="filled" onClick={onAddUsersClick}>
-          {buttonLabel}
-        </Button>
       </div>
     ),
-    [
-      buttonLabel,
-      filterUser,
-      onAddUsersClick,
-      userRowComponent,
-      usersComparator,
-    ],
+    [filterUser, userRowComponent, usersComparator],
+  );
+
+  const primaryButton = React.useMemo(
+    () => (
+      <Button variant="filled" onClick={onAddUsersClick}>
+        {buttonLabel}
+      </Button>
+    ),
+    [buttonLabel, onAddUsersClick],
   );
 
   return (
     <SearchModal
       name={name}
       size="large"
       searchPlaceholder="Search by name"
       onClose={popModal}
+      primaryButton={primaryButton}
     >
       {searchModalChildGenerator}
     </SearchModal>
   );
 }
 
 export default UserListModal;
diff --git a/web/settings/relationship/user-list.css b/web/settings/relationship/user-list.css
index 3ebd61e82..479f7e97c 100644
--- a/web/settings/relationship/user-list.css
+++ b/web/settings/relationship/user-list.css
@@ -1,37 +1,37 @@
 .panelContainer {
   flex: 1;
 }
 
 .container {
   display: flex;
   flex-direction: column;
   height: 100%;
   padding: 8px;
 }
 
 .searchContainer {
   padding: 8px;
 }
 
 .userListContainer {
   overflow: auto;
   flex-grow: 1;
   flex-basis: 120px;
 }
 
 .noScroll {
   overflow: hidden;
 }
 
 .searchModalContent {
   display: flex;
   flex-direction: column;
   row-gap: 8px;
-  height: 625px;
+  height: 60vh;
 }
 
 .emptyList {
   text-align: center;
   margin-top: 8px;
   color: var(--text-background-tertiary-default);
 }