diff --git a/web/settings/relationship/add-users-list.css b/web/settings/relationship/add-users-list.css
index 97fb4a828..c1a12a7e5 100644
--- a/web/settings/relationship/add-users-list.css
+++ b/web/settings/relationship/add-users-list.css
@@ -1,17 +1,24 @@
+.container {
+  overflow: auto;
+  height: 580px;
+  display: flex;
+  flex-direction: column;
+}
+
 .addUserButton {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   padding: 16px;
   color: var(--relationship-modal-color);
   font-size: var(--l-font-18);
   line-height: var(--line-height-display);
   background: transparent;
   border: none;
 }
 
 .addUserButtonUsername {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
diff --git a/web/settings/relationship/add-users-list.react.js b/web/settings/relationship/add-users-list.react.js
index e8f625f55..eeb24429d 100644
--- a/web/settings/relationship/add-users-list.react.js
+++ b/web/settings/relationship/add-users-list.react.js
@@ -1,86 +1,98 @@
 // @flow
 
 import * as React from 'react';
 
 import { searchUsers } from 'lib/actions/user-actions.js';
 import { userStoreSearchIndex as userStoreSearchIndexSelector } from 'lib/selectors/user-selectors.js';
 import type { UserRelationshipStatus } from 'lib/types/relationship-types.js';
 import type { GlobalAccountUserInfo } from 'lib/types/user-types.js';
 import { useServerCall } from 'lib/utils/action-utils.js';
 
 import { useSelector } from '../../redux/redux-utils.js';
+import AddUsersListItem from './add-users-list-item.react.js';
+import css from './add-users-list.css';
 
 type Props = {
   +searchText: string,
   +excludedStatuses?: $ReadOnlySet<UserRelationshipStatus>,
 };
 
 function AddUsersList(props: Props): React.Node {
   const { searchText, excludedStatuses = new Set() } = props;
 
   const userStoreSearchIndex = useSelector(userStoreSearchIndexSelector);
   const [userStoreSearchResults, setUserStoreSearchResults] = React.useState<
     $ReadOnlySet<string>,
   >(new Set(userStoreSearchIndex.getSearchResults(searchText)));
   React.useEffect(() => {
     setUserStoreSearchResults(
       new Set(userStoreSearchIndex.getSearchResults(searchText)),
     );
   }, [searchText, userStoreSearchIndex]);
 
   const [serverSearchResults, setServerSearchResults] = React.useState<
     $ReadOnlyArray<GlobalAccountUserInfo>,
   >([]);
   const callSearchUsers = useServerCall(searchUsers);
   React.useEffect(() => {
     (async () => {
       if (searchText.length === 0) {
         setServerSearchResults([]);
       } else {
         const { userInfos } = await callSearchUsers(searchText);
         setServerSearchResults(userInfos);
       }
     })();
   }, [callSearchUsers, searchText]);
 
   const searchTextPresent = searchText.length > 0;
   const userInfos = useSelector(state => state.userStore.userInfos);
   const mergedUserInfos = React.useMemo(() => {
     const mergedInfos = {};
 
     for (const userInfo of serverSearchResults) {
       mergedInfos[userInfo.id] = userInfo;
     }
 
     const userStoreUserIDs = searchTextPresent
       ? userStoreSearchResults
       : Object.keys(userInfos);
     for (const id of userStoreUserIDs) {
       const { username, relationshipStatus } = userInfos[id];
       if (username) {
         mergedInfos[id] = { id, username, relationshipStatus };
       }
     }
 
     return mergedInfos;
   }, [
     searchTextPresent,
     serverSearchResults,
     userInfos,
     userStoreSearchResults,
   ]);
 
-  // eslint-disable-next-line no-unused-vars
   const sortedUsers = React.useMemo(
     () =>
       Object.keys(mergedUserInfos)
         .map(userID => mergedUserInfos[userID])
         .filter(user => !excludedStatuses.has(user.relationshipStatus))
         .sort((user1, user2) => user1.username.localeCompare(user2.username)),
     [excludedStatuses, mergedUserInfos],
   );
 
-  return null;
+  const userRows = React.useMemo(
+    () =>
+      sortedUsers.map(userInfo => (
+        <AddUsersListItem
+          userInfo={userInfo}
+          key={userInfo.id}
+          selectUser={() => {}}
+        />
+      )),
+    [sortedUsers],
+  );
+  return <div className={css.container}>{userRows}</div>;
 }
 
 export default AddUsersList;