diff --git a/web/settings/relationship/add-users-list-item.react.js b/web/settings/relationship/add-users-list-item.react.js
new file mode 100644
index 000000000..c495aa2e5
--- /dev/null
+++ b/web/settings/relationship/add-users-list-item.react.js
@@ -0,0 +1,28 @@
+// @flow
+
+import * as React from 'react';
+
+import type { AccountUserInfo } from 'lib/types/user-types.js';
+
+import css from './add-users-list.css';
+
+type Props = {
+  +userInfo: AccountUserInfo,
+  +selectUser: (userID: string) => mixed,
+};
+
+function AddUsersListItem(props: Props): React.Node {
+  const { userInfo, selectUser } = props;
+  const addUser = React.useCallback(() => selectUser(userInfo.id), [
+    selectUser,
+    userInfo.id,
+  ]);
+  return (
+    <button className={css.addUserButton} onClick={addUser}>
+      <div className={css.addUserButtonUsername}>{userInfo.username}</div>
+      Add
+    </button>
+  );
+}
+
+export default AddUsersListItem;
diff --git a/web/settings/relationship/add-users-list.css b/web/settings/relationship/add-users-list.css
new file mode 100644
index 000000000..97fb4a828
--- /dev/null
+++ b/web/settings/relationship/add-users-list.css
@@ -0,0 +1,17 @@
+.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;
+}