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,50 @@
+// @flow
+
+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 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 (
+    <button
+      className={css.addMemberItem}
+      onClick={onClickCallback}
+      disabled={!canBeAdded}
+    >
+      <div className={css.addMemberName}>{userInfo.username}</div>
+      <div className={css.addMemberAction}>{action}</div>
+    </button>
+  );
+}
+
+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,39 @@
   padding-top: 16px;
   text-align: center;
 }
+
+button.addMemberItem {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--add-members-item-color);
+  font-size: var(--l-font-18);
+  background-color: transparent;
+  border: none;
+  width: 100%;
+}
+
+button.addMemberItem:hover {
+  color: var(--add-members-item-color-hover);
+}
+
+button.addMemberItem:disabled {
+  color: var(--add-members-item-disabled-color);
+  cursor: not-allowed;
+}
+
+button.addMemberItem:hover:disabled {
+  color: var(--add-members-item-disabled-color-hover);
+}
+
+button.addMemberItem > div {
+  padding: 8px 16px;
+}
+
+button.addMemberItem .danger {
+  color: var(--add-members-remove-pending-color);
+}
+button.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
@@ -152,4 +152,10 @@
   --arrow-extension-color: var(--shades-black-60);
   --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);
 }