diff --git a/web/components/dropdown.css b/web/components/dropdown.css
new file mode 100644
index 000000000..8d26da812
--- /dev/null
+++ b/web/components/dropdown.css
@@ -0,0 +1,90 @@
+.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);
+}
+
+.dropdownDisabled {
+  color: var(--dropdown-disabled-color);
+  border-color: var(--dropdown-disabled-color);
+}
+
+.dropdownDisabled:hover {
+  cursor: not-allowed;
+}
diff --git a/web/components/dropdown.react.js b/web/components/dropdown.react.js
new file mode 100644
index 000000000..4ee7385bb
--- /dev/null
+++ b/web/components/dropdown.react.js
@@ -0,0 +1,106 @@
+// @flow
+
+import classNames from 'classnames';
+import invariant from 'invariant';
+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,
+  +disabled?: boolean,
+};
+
+function Dropdown(props: DropdownProps): React.Node {
+  const { options, activeSelection, setActiveSelection, disabled } = props;
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const dropdownMenuClassNames = classNames({
+    [css.dropdownMenu]: true,
+    [css.dropdownDisabled]: !!disabled,
+  });
+
+  const dropdownTextClassNames = classNames({
+    [css.dropdownDisplayText]: true,
+    [css.dropdownDisabled]: !!disabled,
+  });
+
+  const toggleMenu = React.useCallback(() => {
+    if (disabled) {
+      return;
+    }
+
+    setIsOpen(!isOpen);
+  }, [disabled, isOpen]);
+
+  const handleSelection = React.useCallback(
+    selection => {
+      setActiveSelection(selection.id);
+      setIsOpen(false);
+    },
+    [setActiveSelection],
+  );
+
+  const activeDisplayedOption = React.useMemo(() => {
+    const activeOption = options.find(option => option.id === activeSelection);
+    invariant(activeOption, 'Active option must be in options list');
+    return activeOption.name;
+  }, [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={dropdownMenuClassNames}>
+          <p className={dropdownTextClassNames}>{activeDisplayedOption}</p>
+          <div className={css.dropdownIcon}>
+            <SWMansionIcon
+              icon={isOpen ? 'chevron-up' : 'chevron-down'}
+              color={disabled ? 'gray' : 'white'}
+              size={18}
+            />
+          </div>
+        </div>
+      </div>
+      {dropdownList}
+    </>
+  );
+}
+
+export default Dropdown;
diff --git a/web/theme.css b/web/theme.css
index f70a02a41..88258ad69 100644
--- a/web/theme.css
+++ b/web/theme.css
@@ -1,229 +1,236 @@
 :root {
   /* Never use color values defined here directly in CSS. Add color variables to "Color Theme" below
 
      The reason we never use color values defined here directly in CSS is
 
       1. It makes changing themes from light / dark / user generated impossible.
       2. Gives the programmer context into the color being used.
       3. If our color system changes it's much easier to change color values in one place.
 
      Add a color value to the theme below, and then use it in your CSS.
      naming convention:
      - bg: background.
      - fg: foreground.
      - color: text-color
    */
   --shades-white-100: #ffffff;
   --shades-white-90: #f5f5f5;
   --shades-white-80: #ebebeb;
   --shades-white-70: #e0e0e0;
   --shades-white-60: #cccccc;
 
   --shades-black-100: #0a0a0a;
   --shades-black-90: #1f1f1f;
   --shades-black-80: #404040;
   --shades-black-70: #666666;
   --shades-black-60: #808080;
 
   --violet-dark-100: #7e57c2;
   --violet-dark-80: #6d49ab;
   --violet-dark-60: #563894;
   --violet-dark-40: #44297a;
   --violet-dark-20: #331f5c;
 
   --violet-light-100: #ae94db;
   --violet-light-80: #b9a4df;
   --violet-light-60: #d3c6ec;
   --violet-light-40: #e8e0f5;
   --violet-light-20: #f3f0fa;
 
   --success-light-10: #d5f6e3;
   --success-light-50: #6cdf9c;
   --success-primary: #00c853;
   --success-dark-50: #029841;
   --success-dark-90: #034920;
 
   --error-light-10: #feebe6;
   --error-light-50: #f9947b;
   --error-primary: #f53100;
   --error-dark-50: #b62602;
   --error-dark-90: #4f1203;
 
   --logo-bg: #111827;
   --spoiler-color: #33332c;
   --loading-foreground: #1b0e38;
 
   --bg: var(--shades-black-100);
   --fg: var(--shades-white-100);
   --color-disabled: var(--shades-black-60);
   --text-input-bg: var(--shades-black-80);
   --text-input-color: var(--shades-white-60);
   --text-input-placeholder: var(--shades-white-60);
   --border: var(--shades-black-80);
   --error: var(--error-primary);
   --success: var(--success-dark-50);
 
   /* Color Theme */
 
   --btn-bg-filled: var(--violet-dark-100);
   --btn-bg-outline: var(--shades-black-90);
   --btn-bg-success: var(--success-dark-50);
   --btn-bg-danger: var(--error-primary);
   --btn-bg-disabled: var(--shades-black-80);
   --btn-disabled-color: var(--shades-black-60);
   --chat-bg: var(--violet-dark-80);
   --chat-confirmation-icon: var(--violet-dark-100);
   --keyserver-selection: var(--violet-dark-60);
   --thread-selection: var(--violet-light-80);
   --thread-hover-bg: var(--shades-black-80);
   --thread-active-bg: var(--shades-black-80);
   --chat-timestamp-color: var(--shades-black-60);
   --tool-tip-bg: var(--shades-black-80);
   --tool-tip-color: var(--shades-white-60);
   --border-color: var(--shades-black-80);
   --calendar-chevron: var(--shades-black-60);
   --calendar-day-bg: var(--shades-black-60);
   --calendar-day-selected-color: var(--violet-dark-80);
   --community-bg: var(--shades-black-90);
   --community-settings-selected: var(--violet-dark-60);
   --unread-bg: var(--error-primary);
   --settings-btn-bg: var(--violet-dark-100);
   --community-creation-btn-bg: var(--shades-black-80);
   --community-creation-ancestry-bg: var(--shades-black-80);
   --community-creation-ancestry-text: var(--shades-black-60);
   --community-creation-form-notice: var(--shades-white-60);
   --community-creation-keyserver-container: var(--shades-black-100);
   --modal-bg: var(--shades-black-90);
   --modal-fg: var(--shades-white-60);
   --join-bg: var(--shades-black-90);
   --help-color: var(--shades-black-60);
   --breadcrumb-color: var(--shades-white-60);
   --breadcrumb-color-unread: var(--shades-white-60);
   --btn-outline-border: var(--shades-black-60);
   --thread-color-read: var(--shades-black-60);
   --thread-preview-secondary: var(--shades-black-70);
   --relationship-button-green: var(--success-dark-50);
   --relationship-button-red: var(--error-primary);
   --relationship-button-text: var(--fg);
   --disconnected-bar-alert-bg: var(--error-dark-50);
   --disconnected-bar-alert-color: var(--shades-white-100);
   --disconnected-bar-connecting-bg: var(--shades-white-70);
   --disconnected-bar-connecting-color: var(--shades-black-100);
   --permission-color: var(--shades-white-60);
   --thread-top-bar-color: var(--shades-white-100);
   --thread-top-bar-menu-color: var(--shades-white-70);
   --thread-ancestor-keyserver-border: var(--shades-black-70);
   --thread-ancestor-color: var(--shades-white-100);
   --thread-ancestor-separator-color: var(--shades-white-60);
   --text-message-default-background: var(--shades-black-80);
   --message-action-tooltip-bg: var(--shades-black-90);
   --message-action-tooltip-bg-light: var(--shades-black-80);
   --menu-bg: var(--shades-black-90);
   --menu-bg-light: var(--shades-black-80);
   --menu-separator-color: var(--shades-black-80);
   --menu-color: var(--shades-black-60);
   --menu-color-light: var(--shades-white-60);
   --menu-color-hover: var(--shades-white-100);
   --menu-color-dangerous: var(--error-primary);
   --menu-color-dangerous-hover: var(--error-light-50);
   --app-list-icon-read-only-color: var(--shades-black-60);
   --app-list-icon-enabled-color: var(--success-primary);
   --app-list-icon-disabled-color: var(--shades-white-80);
   --account-settings-label: var(--shades-black-60);
   --account-button-color: var(--violet-dark-100);
   --chat-thread-list-color-active: var(--shades-white-60);
   --chat-thread-list-menu-color: var(--shades-white-60);
   --chat-thread-list-menu-bg: var(--shades-black-80);
   --chat-thread-list-menu-active-color: var(--shades-white-60);
   --chat-thread-list-menu-active-bg: var(--shades-black-90);
   --search-clear-color: var(--shades-white-100);
   --search-clear-bg: var(--shades-black-70);
   --search-input-color: var(--shades-white-100);
   --search-input-placeholder: var(--shades-black-60);
   --search-icon-color: var(--shades-black-60);
   --tabs-header-active-color: var(--shades-white-100);
   --tabs-header-active-border: var(--violet-light-100);
   --tabs-header-active-background: var(--violet-dark-100);
   --tabs-header-background-color: var(--shades-black-60);
   --tabs-header-background-color-pill: var(--shades-white-60);
   --tabs-header-background-border: var(--shades-black-80);
   --tabs-header-background-color-hover: var(--shades-white-80);
   --tabs-header-background-border-hover: var(--shades-black-70);
   --members-modal-member-text: var(--shades-black-60);
   --members-modal-member-text-hover: var(--shades-white-100);
   --label-default-bg: var(--violet-dark-80);
   --label-default-color: var(--shades-white-80);
   --label-grey-bg: var(--shades-black-80);
   --label-grey-color: var(--shades-white-80);
   --subchannels-modal-color: var(--shades-black-60);
   --subchannels-modal-color-hover: var(--shades-white-100);
   --color-selector-active-bg: var(--shades-black-80);
   --relationship-modal-color: var(--shades-black-60);
   --arrow-extension-color: var(--shades-black-60);
   --modal-close-color: var(--shades-black-60);
   --modal-close-color-hover: var(--shades-white-100);
   --add-members-group-header-color: var(--shades-black-60);
   --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);
   --radio-border: var(--shades-black-70);
   --radio-color: var(--shades-white-60);
   --notification-settings-option-selected-bg: var(--shades-black-80);
   --notification-settings-option-title-color: var(--shades-white-90);
   --notification-settings-option-color: var(--shades-white-60);
   --notification-settings-option-invalid-color: var(--shades-black-80);
   --notification-settings-option-invalid-selected-color: var(--shades-black-60);
   --danger-zone-subheading-color: var(--shades-white-60);
   --danger-zone-explanation-color: var(--shades-black-60);
   --thread-creation-search-container-bg: var(--shades-black-90);
   --thread-creation-close-search-color: var(--shades-black-60);
   --thread-creation-search-item-bg-hover: var(--shades-black-80);
   --thread-creation-search-item-info-color: var(--shades-black-60);
   --chat-message-list-active-border: #5989d6;
   --sidebars-modal-color: var(--shades-black-60);
   --sidebars-modal-color-hover: var(--shades-white-100);
   --inline-engagement-bg: var(--shades-black-70);
   --inline-engagement-bg-hover: var(--shades-black-80);
   --inline-engagement-color: var(--fg);
   --compose-subchannel-header-fg: var(--shades-black-60);
   --compose-subchannel-header-bg: var(--shades-black-80);
   --compose-subchannel-label-color: var(--shades-black-60);
   --compose-subchannel-mark-color: var(--violet-light-100);
   --enum-option-icon-color: var(--violet-dark-100);
   --show-password-bg-hover: var(--shades-black-70);
   --typeahead-overlay-light: var(--shades-black-80);
   --typeahead-overlay-dark: var(--shades-black-90);
   --typeahead-overlay-text: var(--shades-white-100);
   --typeahead-overlay-shadow-primary: rgba(0, 0, 0, 0.25);
   --typeahead-overlay-shadow-secondary: rgba(0, 0, 0, 0.4);
   --spoiler-text-color: var(--spoiler-color);
   --spoiler-background-color: var(--spoiler-color);
   --purple-link: var(--violet-light-100);
   --drawer-expand-button: var(--shades-black-60);
   --drawer-expand-button-disabled: var(--shades-black-80);
   --drawer-item-color: var(--shades-white-60);
   --drawer-active-item-color: var(--shades-white-100);
   --drawer-open-community-bg: #191919;
   --active-drawer-item-bg: rgba(0, 0, 0, 0.5);
   --community-drawer-lines: rgba(255, 255, 255, 0.08);
   --topbar-button-bg: var(--shades-black-90);
   --filters-button-bg: var(--shades-black-100);
   --filters-button-border: var(--shades-black-80);
   --filters-button-hover-bg: var(--shades-black-90);
   --filter-panel-fg: var(--shades-black-60);
   --filter-panel-bg: #0d0d0d;
   --topbar-button-bg-hover: var(--shades-black-80);
   --topbar-button-fg: var(--shades-white-60);
   --message-label-color: var(--shades-black-60);
   --topbar-lines: rgba(255, 255, 255, 0.08);
   --pin-message-information-text-color: var(--shades-white-60);
   --pin-message-modal-border-color: var(--shades-black-80);
   --pinned-count-banner-color: var(--shades-black-90);
   --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);
   --edit-avatar-button: var(--violet-dark-60);
+  --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);
+  --dropdown-disabled-color: var(--shades-black-60);
 }