diff --git a/web/components/dropdown.css b/web/components/dropdown.css
--- a/web/components/dropdown.css
+++ b/web/components/dropdown.css
@@ -31,6 +31,7 @@
 .dropdownIcon {
   margin-left: auto;
   font-size: var(--m-font-16);
+  color: var(--dropdown-chevron-color);
 }
 
 .dropdownList {
diff --git a/web/components/dropdown.react.js b/web/components/dropdown.react.js
--- a/web/components/dropdown.react.js
+++ b/web/components/dropdown.react.js
@@ -34,6 +34,11 @@
     [css.dropdownDisabled]: !!disabled,
   });
 
+  const dropdownIconClassNames = classNames({
+    [css.dropdownIcon]: true,
+    [css.dropdownDisabled]: !!disabled,
+  });
+
   const toggleMenu = React.useCallback(() => {
     if (disabled) {
       return;
@@ -89,10 +94,9 @@
       <div className={css.dropdownContainer} onClick={toggleMenu}>
         <div className={dropdownMenuClassNames}>
           <p className={dropdownTextClassNames}>{activeDisplayedOption}</p>
-          <div className={css.dropdownIcon}>
+          <div className={dropdownIconClassNames}>
             <SWMansionIcon
               icon={isOpen ? 'chevron-up' : 'chevron-down'}
-              color={disabled ? 'gray' : 'white'}
               size={18}
             />
           </div>
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -232,6 +232,7 @@
   --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-chevron-color: var(--shades-white-100);
   --dropdown-disabled-color: var(--shades-black-60);
   --change-member-role-modal-description-text: var(--shades-white-60);
   --change-member-role-modal-generic-text: var(--shades-white-100);