diff --git a/web/components/dropdown.css b/web/components/dropdown.css
new file mode 100644
--- /dev/null
+++ b/web/components/dropdown.css
@@ -0,0 +1,81 @@
+.dropdownContainer {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  padding: 20px;
+}
+
+.dropdownMenu {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 45px;
+  max-width: 350px;
+  padding: 0 10px;
+  background-color: var(--modal-bg);
+  border-color: var(--dropdown-select-border);
+  border-radius: 5px;
+  border-style: solid;
+}
+
+.dropdownMenu {
+  cursor: pointer;
+}
+
+.dropdownDisplayText {
+  color: var(--change-member-role-modal-generic-text);
+  font-family: var(--font-stack);
+  padding: 5px;
+}
+
+.dropdownIcon {
+  margin-left: auto;
+  font-size: var(--m-font-16);
+}
+
+.dropdownList {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 370px;
+  max-height: 200px;
+  overflow-y: auto;
+  padding: 0 10px;
+  list-style: none;
+  margin-top: -15px;
+  width: 100%;
+}
+
+.dropdownListItem {
+  color: var(--dropdown-text);
+  background-color: var(--dropdown-option-bg);
+  width: 100%;
+  height: 45px;
+  display: flex;
+  align-items: center;
+}
+
+.dropdownListItem:hover {
+  background-color: var(--dropdown-option-hover-bg);
+  cursor: pointer;
+}
+
+.dropdownListItemButton {
+  background-color: transparent;
+  background-repeat: no-repeat;
+  border: none;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.dropdownListDisplayText {
+  color: var(--change-member-role-modal-generic-text);
+  font-family: var(--font-stack);
+  padding: 15px;
+}
+
+.dropdownListCheckIcon {
+  margin-left: auto;
+  margin-right: 10px;
+  color: var(--dropdown-selected-option-check-color);
+}
diff --git a/web/components/dropdown.react.js b/web/components/dropdown.react.js
new file mode 100644
--- /dev/null
+++ b/web/components/dropdown.react.js
@@ -0,0 +1,86 @@
+// @flow
+
+import * as React from 'react';
+
+import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
+
+import css from './dropdown.css';
+
+type DropdownOption = {
+  +id: ?string,
+  +name: string,
+};
+
+type DropdownProps = {
+  +options: $ReadOnlyArray<DropdownOption>,
+  +activeSelection: ?string,
+  +setActiveSelection: (?string) => mixed,
+};
+
+function Dropdown(props: DropdownProps): React.Node {
+  const { options, activeSelection, setActiveSelection } = props;
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const toggleMenu = React.useCallback(() => setIsOpen(!isOpen), [isOpen]);
+
+  const handleSelection = React.useCallback(
+    selection => {
+      setActiveSelection(selection.id);
+      setIsOpen(false);
+    },
+    [setActiveSelection],
+  );
+
+  const activeDisplayedOption = React.useMemo(() => {
+    const activeOption = options.find(option => option.id === activeSelection);
+    return activeOption ? activeOption.name : null;
+  }, [activeSelection, options]);
+
+  const dropdownList = React.useMemo(() => {
+    if (!isOpen) {
+      return null;
+    }
+
+    const dropdownOptions = options.map(option => {
+      const checkIcon =
+        option.id === activeSelection ? (
+          <SWMansionIcon icon="check" size={18} />
+        ) : null;
+
+      return (
+        <li
+          className={css.dropdownListItem}
+          key={option.id}
+          onClick={() => handleSelection(option)}
+        >
+          <button className={css.dropdownListItemButton}>
+            <p className={css.dropdownListDisplayText}>{option.name}</p>
+          </button>
+          <div className={css.dropdownListCheckIcon}>{checkIcon}</div>
+        </li>
+      );
+    });
+
+    return <ul className={css.dropdownList}>{dropdownOptions}</ul>;
+  }, [activeSelection, handleSelection, isOpen, options]);
+
+  return (
+    <>
+      <div className={css.dropdownContainer} onClick={toggleMenu}>
+        <div className={css.dropdownMenu}>
+          <p className={css.dropdownDisplayText}>{activeDisplayedOption}</p>
+          <div className={css.dropdownIcon}>
+            <SWMansionIcon
+              icon={isOpen ? 'chevron-up' : 'chevron-down'}
+              color="white"
+              size={18}
+            />
+          </div>
+        </div>
+      </div>
+      {dropdownList}
+    </>
+  );
+}
+
+export default Dropdown;
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -223,4 +223,10 @@
   --pinned-count-text-color: var(--shades-white-90);
   --modal-overlay-background-90: rgba(0, 0, 0, 0.9);
   --modal-overlay-background-80: rgba(0, 0, 0, 0.8);
+  --dropdown-text: var(--shades-white-100);
+  --dropdown-select-bg: var(--shades-black-90);
+  --dropdown-select-border: var(--shades-white-60);
+  --dropdown-option-bg: var(--shades-black-80);
+  --dropdown-option-hover-bg: var(--shades-black-70);
+  --dropdown-selected-option-check-color: var(--violet-dark-100);
 }