diff --git a/web/modals/threads/members/add-members-item.react.js b/web/modals/threads/members/add-members-item.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/threads/members/add-members-item.react.js
@@ -0,0 +1,51 @@
+// @flow
+
+import classNames from 'classnames';
+import * as React from 'react';
+
+import type { UserListItem } from 'lib/types/user-types';
+
+import css from './members-modal.css';
+
+type AddMembersItemProps = {
+  +userInfo: UserListItem,
+  +onClick: (userID: string) => void,
+  +userAdded: boolean,
+};
+
+function AddMemberItem(props: AddMembersItemProps): React.Node {
+  const { userInfo, onClick, userAdded = false } = props;
+
+  const canBeAdded = userInfo.alertTitle === undefined;
+
+  const onClickCallback = React.useCallback(() => {
+    if (!canBeAdded) {
+      return;
+    }
+    onClick(userInfo.id);
+  }, [canBeAdded, onClick, userInfo.id]);
+
+  const memberItemClasses = classNames(css.addMemberItem, {
+    [css.addMemberItemDisabled]: !canBeAdded,
+  });
+
+  const action = React.useMemo(() => {
+    if (!canBeAdded) {
+      return userInfo.alertTitle;
+    }
+    if (userAdded) {
+      return <span className={css.danger}>Remove</span>;
+    } else {
+      return 'Add';
+    }
+  }, [canBeAdded, userAdded, userInfo.alertTitle]);
+
+  return (
+    <div className={memberItemClasses} onClick={onClickCallback}>
+      <div className={css.addMemberName}>{userInfo.username}</div>
+      <div className={css.addMemberAction}>{action}</div>
+    </div>
+  );
+}
+
+export default AddMemberItem;
diff --git a/web/modals/threads/members/members-modal.css b/web/modals/threads/members/members-modal.css
--- a/web/modals/threads/members/members-modal.css
+++ b/web/modals/threads/members/members-modal.css
@@ -49,3 +49,41 @@
   padding-top: 16px;
   text-align: center;
 }
+
+div.addMemberItem {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--add-members-item-color);
+  cursor: pointer;
+  font-size: var(--l-font-18);
+}
+
+div.addMemberItem:hover {
+  color: var(--add-members-item-color-hover);
+}
+
+div.addMemberItemDisabled {
+  color: var(--add-members-item-disabled-color);
+  cursor: not-allowed;
+}
+
+div.addMemberItemDisabled:hover {
+  color: var(--add-members-item-disabled-color-hover);
+}
+
+div.addMemberName {
+  padding: 8px 16px;
+}
+
+div.addMemberAction {
+  padding: 8px 16px;
+}
+
+div.addMemberItem .danger {
+  color: var(--add-members-remove-pending-color);
+}
+div.addMemberItem:hover .danger {
+  color: var(--add-members-remove-pending-color-hover);
+}
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -141,4 +141,10 @@
   --color-selector-active-bg: var(--shades-black-80);
   --modal-close-color: var(--shades-black-60);
   --modal-close-color-hover: var(--shades-white-100);
+  --add-members-item-color: var(--shades-black-60);
+  --add-members-item-color-hover: var(--shades-white-100);
+  --add-members-item-disabled-color: var(--shades-black-80);
+  --add-members-item-disabled-color-hover: var(--shades-black-60);
+  --add-members-remove-pending-color: var(--error-primary);
+  --add-members-remove-pending-color-hover: var(--error-light-50);
 }