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
@@ -1,10 +1,22 @@
 .container {
-  overflow: auto;
   height: 580px;
   display: flex;
   flex-direction: column;
 }
 
+.userTagsContainer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.userRowsContainer {
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
 .addUserButton {
   display: flex;
   flex-direction: row;
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
@@ -8,6 +8,7 @@
 import type { GlobalAccountUserInfo } from 'lib/types/user-types.js';
 import { useServerCall } from 'lib/utils/action-utils.js';
 
+import Label from '../../components/label.react.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import AddUsersListItem from './add-users-list-item.react.js';
 import css from './add-users-list.css';
@@ -110,11 +111,36 @@
     },
     [mergedUserInfos],
   );
+  const deselectUser = React.useCallback(
+    (userID: string) =>
+      setPendingUsersToAdd(pendingUsers => {
+        const filteredPendingUsers = pendingUsers.filter(
+          userInfo => userInfo.id !== userID,
+        );
+        if (filteredPendingUsers.length !== pendingUsers.length) {
+          return filteredPendingUsers;
+        }
+        return pendingUsers;
+      }),
+    [],
+  );
   const pendingUserIDs = React.useMemo(
     () => new Set(pendingUsersToAdd.map(userInfo => userInfo.id)),
     [pendingUsersToAdd],
   );
 
+  const userTags = React.useMemo(() => {
+    if (pendingUsersToAdd.length === 0) {
+      return null;
+    }
+    const tags = pendingUsersToAdd.map(userInfo => (
+      <Label key={userInfo.id} onClose={() => deselectUser(userInfo.id)}>
+        {userInfo.username}
+      </Label>
+    ));
+    return <div className={css.userTagsContainer}>{tags}</div>;
+  }, [deselectUser, pendingUsersToAdd]);
+
   const filteredUsers = React.useMemo(
     () => sortedUsers.filter(userInfo => !pendingUserIDs.has(userInfo.id)),
     [pendingUserIDs, sortedUsers],
@@ -131,7 +157,12 @@
       )),
     [filteredUsers, selectUser],
   );
-  return <div className={css.container}>{userRows}</div>;
+  return (
+    <div className={css.container}>
+      {userTags}
+      <div className={css.userRowsContainer}>{userRows}</div>
+    </div>
+  );
 }
 
 export default AddUsersList;