diff --git a/assets/images/make-admin.svg b/assets/images/make-admin.svg
new file mode 100644
index 000000000000..383708e0523c
--- /dev/null
+++ b/assets/images/make-admin.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<path d="M13.556,5.555c0,1.964-1.592,3.556-3.556,3.556c-1.964,0-3.556-1.592-3.556-3.556c0-1.964,1.592-3.556,3.556-3.556
+	C11.964,1.999,13.556,3.591,13.556,5.555z"/>
+<path d="M11.021,14.494c0.109,1.322,0.637,2.53,1.221,3.508h-8.02c-1.416,0-2.223-0.444-2.223-1.778C1.999,12.667,6,10,9.999,10
+	c1.598,0,3.197,0.426,4.54,1.164l-2.024,0.867C11.63,12.411,10.926,13.344,11.021,14.494z"/>
+<path d="M16.697,12.584l3,1.286c0.184,0.079,0.306,0.26,0.289,0.459c-0.192,2.332-2.349,4.597-3.171,5.382
+	c-0.178,0.17-0.452,0.17-0.631,0c-0.822-0.784-2.979-3.05-3.171-5.382c-0.016-0.199,0.106-0.38,0.289-0.459l3-1.286
+	C16.429,12.531,16.571,12.531,16.697,12.584z"/>
+</svg>
diff --git a/assets/images/remove-members.svg b/assets/images/remove-members.svg
new file mode 100644
index 000000000000..e9d7e08f5e5e
--- /dev/null
+++ b/assets/images/remove-members.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<path d="M14,5c0,2.2-1.8,4-4,4C7.8,9,6,7.2,6,5s1.8-4,4-4C12.2,1,14,2.8,14,5z"/>
+<path d="M10,16.5c0,1,0.5,2,1.3,2.5H3.5C1.9,19,1,18.5,1,17c0-4,4.5-7,9-7c3,0,6.1,1.4,7.7,3.5H13C11.3,13.5,10,14.8,10,16.5z"/>
+<path d="M13,15.5h6c0.6,0,1,0.4,1,1c0,0.6-0.4,1-1,1h-6c-0.6,0-1-0.4-1-1C12,15.9,12.4,15.5,13,15.5z"/>
+</svg>
diff --git a/src/CONST.ts b/src/CONST.ts
index 7fa3d158e12e..6626b798d314 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -1388,6 +1388,11 @@ const CONST = {
         },
         ID_FAKE: '_FAKE_',
         EMPTY: 'EMPTY',
+        MEMBERS_BULK_ACTION_TYPES: {
+            REMOVE: 'remove',
+            MAKE_MEMBER: 'makeMember',
+            MAKE_ADMIN: 'makeAdmin',
+        },
     },
 
     CUSTOM_UNITS: {
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 1777b239e714..a25c7ff7129c 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -315,7 +315,7 @@ function Button(
                     large ? styles.buttonLarge : undefined,
                     success ? styles.buttonSuccess : undefined,
                     danger ? styles.buttonDanger : undefined,
-                    isDisabled && (success || danger) ? styles.buttonOpacityDisabled : undefined,
+                    isDisabled ? styles.buttonOpacityDisabled : undefined,
                     isDisabled && !danger && !success ? styles.buttonDisabled : undefined,
                     shouldRemoveRightBorderRadius ? styles.noRightBorderRadius : undefined,
                     shouldRemoveLeftBorderRadius ? styles.noLeftBorderRadius : undefined,
diff --git a/src/components/ButtonWithDropdownMenu.tsx b/src/components/ButtonWithDropdownMenu/index.tsx
similarity index 66%
rename from src/components/ButtonWithDropdownMenu.tsx
rename to src/components/ButtonWithDropdownMenu/index.tsx
index 9466da601825..61d3409c65ab 100644
--- a/src/components/ButtonWithDropdownMenu.tsx
+++ b/src/components/ButtonWithDropdownMenu/index.tsx
@@ -1,77 +1,26 @@
-import type {RefObject} from 'react';
 import React, {useEffect, useRef, useState} from 'react';
-import type {GestureResponderEvent, StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
-import type {ValueOf} from 'type-fest';
+import Button from '@components/Button';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import PopoverMenu from '@components/PopoverMenu';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import type {AnchorPosition} from '@styles/index';
+import variables from '@styles/variables';
 import CONST from '@src/CONST';
-import type AnchorAlignment from '@src/types/utils/AnchorAlignment';
-import type DeepValueOf from '@src/types/utils/DeepValueOf';
-import type IconAsset from '@src/types/utils/IconAsset';
-import Button from './Button';
-import Icon from './Icon';
-import * as Expensicons from './Icon/Expensicons';
-import PopoverMenu from './PopoverMenu';
+import type {AnchorPosition} from '@src/styles';
+import type {ButtonWithDropdownMenuProps} from './types';
 
-type PaymentType = DeepValueOf<typeof CONST.IOU.PAYMENT_TYPE | typeof CONST.IOU.REPORT_ACTION_TYPE>;
-
-type DropdownOption = {
-    value: PaymentType;
-    text: string;
-    icon: IconAsset;
-    iconWidth?: number;
-    iconHeight?: number;
-    iconDescription?: string;
-};
-
-type ButtonWithDropdownMenuProps = {
-    /** Text to display for the menu header */
-    menuHeaderText?: string;
-
-    /** Callback to execute when the main button is pressed */
-    onPress: (event: GestureResponderEvent | KeyboardEvent | undefined, value: PaymentType) => void;
-
-    /** Callback to execute when a dropdown option is selected */
-    onOptionSelected?: (option: DropdownOption) => void;
-
-    /** Call the onPress function on main button when Enter key is pressed */
-    pressOnEnter?: boolean;
-
-    /** Whether we should show a loading state for the main button */
-    isLoading?: boolean;
-
-    /** The size of button size */
-    buttonSize: ValueOf<typeof CONST.DROPDOWN_BUTTON_SIZE>;
-
-    /** Should the confirmation button be disabled? */
-    isDisabled?: boolean;
-
-    /** Additional styles to add to the component */
-    style?: StyleProp<ViewStyle>;
-
-    /** Menu options to display */
-    /** e.g. [{text: 'Pay with Expensify', icon: Wallet}] */
-    options: DropdownOption[];
-
-    /** The anchor alignment of the popover menu */
-    anchorAlignment?: AnchorAlignment;
-
-    /* ref for the button */
-    buttonRef: RefObject<View>;
-
-    /** The priority to assign the enter key event listener to buttons. 0 is the highest priority. */
-    enterKeyEventListenerPriority?: number;
-};
-
-function ButtonWithDropdownMenu({
+function ButtonWithDropdownMenu<IValueType>({
+    success = false,
     isLoading = false,
     isDisabled = false,
     pressOnEnter = false,
+    shouldAlwaysShowDropdownMenu = false,
     menuHeaderText = '',
+    customText,
     style,
     buttonSize = CONST.DROPDOWN_BUTTON_SIZE.MEDIUM,
     anchorAlignment = {
@@ -83,7 +32,7 @@ function ButtonWithDropdownMenu({
     options,
     onOptionSelected,
     enterKeyEventListenerPriority = 0,
-}: ButtonWithDropdownMenuProps) {
+}: ButtonWithDropdownMenuProps<IValueType>) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -118,27 +67,27 @@ function ButtonWithDropdownMenu({
 
     return (
         <View>
-            {options.length > 1 ? (
+            {shouldAlwaysShowDropdownMenu || options.length > 1 ? (
                 <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, style]}>
                     <Button
-                        success
+                        success={success}
                         pressOnEnter={pressOnEnter}
                         ref={buttonRef}
                         onPress={(event) => onPress(event, selectedItem.value)}
-                        text={selectedItem.text}
+                        text={customText ?? selectedItem.text}
                         isDisabled={isDisabled}
                         isLoading={isLoading}
                         shouldRemoveRightBorderRadius
                         style={[styles.flex1, styles.pr0]}
                         large={isButtonSizeLarge}
                         medium={!isButtonSizeLarge}
-                        innerStyles={[innerStyleDropButton]}
+                        innerStyles={[innerStyleDropButton, customText !== undefined && styles.cursorDefault, customText !== undefined && styles.pointerEventsNone]}
                         enterKeyEventListenerPriority={enterKeyEventListenerPriority}
                     />
 
                     <Button
                         ref={caretButton}
-                        success
+                        success={success}
                         isDisabled={isDisabled}
                         style={[styles.pl0]}
                         onPress={() => setIsMenuVisible(!isMenuVisible)}
@@ -149,11 +98,13 @@ function ButtonWithDropdownMenu({
                         enterKeyEventListenerPriority={enterKeyEventListenerPriority}
                     >
                         <View style={[styles.dropDownButtonCartIconView, innerStyleDropButton]}>
-                            <View style={[styles.buttonDivider]} />
+                            <View style={[success ? styles.buttonSuccessDivider : styles.buttonDivider]} />
                             <View style={[styles.dropDownButtonArrowContain]}>
                                 <Icon
                                     src={Expensicons.DownArrow}
-                                    fill={theme.textLight}
+                                    fill={success ? theme.buttonSuccessText : theme.icon}
+                                    width={variables.iconSizeSmall}
+                                    height={variables.iconSizeSmall}
                                 />
                             </View>
                         </View>
@@ -161,7 +112,7 @@ function ButtonWithDropdownMenu({
                 </View>
             ) : (
                 <Button
-                    success
+                    success={success}
                     ref={buttonRef}
                     pressOnEnter={pressOnEnter}
                     isDisabled={isDisabled}
@@ -175,7 +126,7 @@ function ButtonWithDropdownMenu({
                     enterKeyEventListenerPriority={enterKeyEventListenerPriority}
                 />
             )}
-            {options.length > 1 && popoverAnchorPosition && (
+            {(shouldAlwaysShowDropdownMenu || options.length > 1) && popoverAnchorPosition && (
                 <PopoverMenu
                     isVisible={isMenuVisible}
                     onClose={() => setIsMenuVisible(false)}
@@ -187,10 +138,12 @@ function ButtonWithDropdownMenu({
                     headerText={menuHeaderText}
                     menuItems={options.map((item, index) => ({
                         ...item,
-                        onSelected: () => {
-                            onOptionSelected?.(item);
-                            setSelectedItemIndex(index);
-                        },
+                        onSelected:
+                            item.onSelected ??
+                            (() => {
+                                onOptionSelected?.(item);
+                                setSelectedItemIndex(index);
+                            }),
                     }))}
                 />
             )}
@@ -200,4 +153,4 @@ function ButtonWithDropdownMenu({
 
 ButtonWithDropdownMenu.displayName = 'ButtonWithDropdownMenu';
 
-export default React.memo(ButtonWithDropdownMenu);
+export default ButtonWithDropdownMenu;
diff --git a/src/components/ButtonWithDropdownMenu/types.ts b/src/components/ButtonWithDropdownMenu/types.ts
new file mode 100644
index 000000000000..9975c10c13c3
--- /dev/null
+++ b/src/components/ButtonWithDropdownMenu/types.ts
@@ -0,0 +1,71 @@
+import type {RefObject} from 'react';
+import type {GestureResponderEvent, StyleProp, View, ViewStyle} from 'react-native';
+import type {ValueOf} from 'type-fest';
+import type CONST from '@src/CONST';
+import type AnchorAlignment from '@src/types/utils/AnchorAlignment';
+import type DeepValueOf from '@src/types/utils/DeepValueOf';
+import type IconAsset from '@src/types/utils/IconAsset';
+
+type PaymentType = DeepValueOf<typeof CONST.IOU.PAYMENT_TYPE | typeof CONST.IOU.REPORT_ACTION_TYPE>;
+
+type WorkspaceMemberBulkActionType = DeepValueOf<typeof CONST.POLICY.MEMBERS_BULK_ACTION_TYPES>;
+
+type DropdownOption<TValueType> = {
+    value: TValueType;
+    text: string;
+    icon: IconAsset;
+    iconWidth?: number;
+    iconHeight?: number;
+    iconDescription?: string;
+    onSelected?: () => void;
+};
+
+type ButtonWithDropdownMenuProps<TValueType> = {
+    /** The custom text to display on the main button instead of selected option */
+    customText?: string;
+
+    /** Text to display for the menu header */
+    menuHeaderText?: string;
+
+    /** Callback to execute when the main button is pressed */
+    onPress: (event: GestureResponderEvent | KeyboardEvent | undefined, value: TValueType) => void;
+
+    /** Callback to execute when a dropdown option is selected */
+    onOptionSelected?: (option: DropdownOption<TValueType>) => void;
+
+    /** Call the onPress function on main button when Enter key is pressed */
+    pressOnEnter?: boolean;
+
+    /** Whether we should show a loading state for the main button */
+    isLoading?: boolean;
+
+    /** The size of button size */
+    buttonSize: ValueOf<typeof CONST.DROPDOWN_BUTTON_SIZE>;
+
+    /** Should the confirmation button be disabled? */
+    isDisabled?: boolean;
+
+    /** Additional styles to add to the component */
+    style?: StyleProp<ViewStyle>;
+
+    /** Menu options to display */
+    /** e.g. [{text: 'Pay with Expensify', icon: Wallet}] */
+    options: Array<DropdownOption<TValueType>>;
+
+    /** The anchor alignment of the popover menu */
+    anchorAlignment?: AnchorAlignment;
+
+    /* ref for the button */
+    buttonRef: RefObject<View>;
+
+    /** The priority to assign the enter key event listener to buttons. 0 is the highest priority. */
+    enterKeyEventListenerPriority?: number;
+
+    /** Whether the button should use success style or not */
+    success?: boolean;
+
+    /** Whether the dropdown menu should be shown even if it has only one option */
+    shouldAlwaysShowDropdownMenu?: boolean;
+};
+
+export type {PaymentType, WorkspaceMemberBulkActionType, DropdownOption, ButtonWithDropdownMenuProps};
diff --git a/src/components/Icon/Expensicons.ts b/src/components/Icon/Expensicons.ts
index 4db22dee8256..6c6c1b86eee1 100644
--- a/src/components/Icon/Expensicons.ts
+++ b/src/components/Icon/Expensicons.ts
@@ -92,6 +92,7 @@ import Lock from '@assets/images/lock.svg';
 import Luggage from '@assets/images/luggage.svg';
 import MagnifyingGlass from '@assets/images/magnifying-glass.svg';
 import Mail from '@assets/images/mail.svg';
+import MakeAdmin from '@assets/images/make-admin.svg';
 import Megaphone from '@assets/images/megaphone.svg';
 import Menu from '@assets/images/menu.svg';
 import Meter from '@assets/images/meter.svg';
@@ -118,6 +119,7 @@ import QrCode from '@assets/images/qrcode.svg';
 import QuestionMark from '@assets/images/question-mark-circle.svg';
 import ReceiptSearch from '@assets/images/receipt-search.svg';
 import Receipt from '@assets/images/receipt.svg';
+import RemoveMembers from '@assets/images/remove-members.svg';
 import Rotate from '@assets/images/rotate-image.svg';
 import RotateLeft from '@assets/images/rotate-left.svg';
 import Scan from '@assets/images/scan.svg';
@@ -242,6 +244,7 @@ export {
     Luggage,
     MagnifyingGlass,
     Mail,
+    MakeAdmin,
     Menu,
     Meter,
     Megaphone,
@@ -269,6 +272,7 @@ export {
     QrCode,
     QuestionMark,
     Receipt,
+    RemoveMembers,
     ReceiptSearch,
     Rotate,
     RotateLeft,
diff --git a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
index 92313d03ae2a..03dde8f765a1 100755
--- a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
+++ b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
@@ -598,6 +598,7 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
             />
         ) : (
             <ButtonWithDropdownMenu
+                success
                 pressOnEnter
                 isDisabled={shouldDisableButton}
                 onPress={(_event, value) => confirm(value)}
diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx
index 98b1999625ee..411dd3a09f71 100644
--- a/src/components/SelectionList/BaseListItem.tsx
+++ b/src/components/SelectionList/BaseListItem.tsx
@@ -4,6 +4,7 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
+import useHover from '@hooks/useHover';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -31,6 +32,7 @@ function BaseListItem<TItem extends ListItem>({
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
+    const {hovered, bind} = useHover();
 
     const rightHandSideComponentRender = () => {
         if (canSelectMultiple || !rightHandSideComponent) {
@@ -60,60 +62,59 @@ function BaseListItem<TItem extends ListItem>({
             errorRowStyles={styles.ph5}
         >
             <PressableWithFeedback
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...bind}
                 onPress={() => onSelectRow(item)}
                 disabled={isDisabled}
                 accessibilityLabel={item.text}
                 role={CONST.ROLE.BUTTON}
                 hoverDimmingValue={1}
-                hoverStyle={styles.hoveredComponentBG}
+                hoverStyle={!item.isSelected && styles.hoveredComponentBG}
                 dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
                 onMouseDown={shouldPreventDefaultFocusOnSelectRow ? (e) => e.preventDefault() : undefined}
                 nativeID={keyForList}
                 style={pressableStyle}
             >
-                {({hovered}) => (
-                    <>
-                        <View style={wrapperStyle}>
-                            {canSelectMultiple && (
-                                <PressableWithFeedback
-                                    accessibilityLabel={item.text}
-                                    role={CONST.ROLE.BUTTON}
-                                    onPress={handleCheckboxPress}
-                                    style={StyleUtils.getCheckboxPressableStyle()}
-                                >
-                                    <View style={selectMultipleStyle}>
-                                        {item.isSelected && (
-                                            <Icon
-                                                src={Expensicons.Checkmark}
-                                                fill={theme.textLight}
-                                                height={14}
-                                                width={14}
-                                            />
-                                        )}
-                                    </View>
-                                </PressableWithFeedback>
-                            )}
+                <View style={wrapperStyle}>
+                    {canSelectMultiple && (
+                        <PressableWithFeedback
+                            accessibilityLabel={item.text}
+                            role={CONST.ROLE.BUTTON}
+                            disabled={isDisabled}
+                            onPress={handleCheckboxPress}
+                            style={StyleUtils.getCheckboxPressableStyle()}
+                        >
+                            <View style={selectMultipleStyle}>
+                                {item.isSelected && (
+                                    <Icon
+                                        src={Expensicons.Checkmark}
+                                        fill={theme.textLight}
+                                        height={14}
+                                        width={14}
+                                    />
+                                )}
+                            </View>
+                        </PressableWithFeedback>
+                    )}
 
-                            {typeof children === 'function' ? children(hovered) : children}
+                    {typeof children === 'function' ? children(hovered) : children}
 
-                            {!canSelectMultiple && item.isSelected && !rightHandSideComponent && (
-                                <View
-                                    style={[styles.flexRow, styles.alignItemsCenter, styles.ml3]}
-                                    accessible={false}
-                                >
-                                    <View>
-                                        <Icon
-                                            src={Expensicons.Checkmark}
-                                            fill={theme.success}
-                                        />
-                                    </View>
-                                </View>
-                            )}
-                            {rightHandSideComponentRender()}
+                    {!canSelectMultiple && item.isSelected && !rightHandSideComponent && (
+                        <View
+                            style={[styles.flexRow, styles.alignItemsCenter, styles.ml3]}
+                            accessible={false}
+                        >
+                            <View>
+                                <Icon
+                                    src={Expensicons.Checkmark}
+                                    fill={theme.success}
+                                />
+                            </View>
                         </View>
-                        {FooterComponent}
-                    </>
-                )}
+                    )}
+                    {rightHandSideComponentRender()}
+                </View>
+                {FooterComponent}
             </PressableWithFeedback>
         </OfflineWithFeedback>
     );
diff --git a/src/components/SelectionList/RadioListItem.tsx b/src/components/SelectionList/RadioListItem.tsx
index a053de301fc1..be2302d21b89 100644
--- a/src/components/SelectionList/RadioListItem.tsx
+++ b/src/components/SelectionList/RadioListItem.tsx
@@ -43,7 +43,7 @@ function RadioListItem({
                     <TextWithTooltip
                         shouldShowTooltip={showTooltip}
                         text={item.text}
-                        textStyles={[
+                        style={[
                             styles.optionDisplayName,
                             isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
                             styles.sidebarLinkTextBold,
@@ -57,7 +57,7 @@ function RadioListItem({
                         <TextWithTooltip
                             shouldShowTooltip={showTooltip}
                             text={item.alternateText}
-                            textStyles={[styles.textLabelSupporting, styles.lh16, styles.pre]}
+                            style={[styles.textLabelSupporting, styles.lh16, styles.pre]}
                         />
                     )}
                 </View>
diff --git a/src/components/SelectionList/TableListItem.tsx b/src/components/SelectionList/TableListItem.tsx
index e5f230065455..164c28871d6d 100644
--- a/src/components/SelectionList/TableListItem.tsx
+++ b/src/components/SelectionList/TableListItem.tsx
@@ -30,7 +30,7 @@ function TableListItem({
     return (
         <BaseListItem
             item={item}
-            pressableStyle={[[styles.selectionListPressableItemWrapper, isFocused && styles.sidebarLinkActive]]}
+            pressableStyle={[[styles.selectionListPressableItemWrapper, item.isSelected && styles.activeComponentBG, isFocused && styles.sidebarLinkActive]]}
             wrapperStyle={[styles.flexRow, styles.flex1, styles.justifyContentBetween, styles.userSelectNone, styles.alignItemsCenter]}
             selectMultipleStyle={[StyleUtils.getCheckboxContainerStyle(20), StyleUtils.getMultiselectListStyles(!!item.isSelected, !!item.isDisabled)]}
             isFocused={isFocused}
@@ -63,7 +63,7 @@ function TableListItem({
                         <TextWithTooltip
                             shouldShowTooltip={showTooltip}
                             text={item.text}
-                            textStyles={[
+                            style={[
                                 styles.optionDisplayName,
                                 isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
                                 styles.sidebarLinkTextBold,
@@ -76,7 +76,7 @@ function TableListItem({
                             <TextWithTooltip
                                 shouldShowTooltip={showTooltip}
                                 text={item.alternateText}
-                                textStyles={[styles.textLabelSupporting, styles.lh16, styles.pre]}
+                                style={[styles.textLabelSupporting, styles.lh16, styles.pre]}
                             />
                         )}
                     </View>
diff --git a/src/components/SelectionList/UserListItem.tsx b/src/components/SelectionList/UserListItem.tsx
index fc39bb4b1259..0cfe4c1a509a 100644
--- a/src/components/SelectionList/UserListItem.tsx
+++ b/src/components/SelectionList/UserListItem.tsx
@@ -82,7 +82,7 @@ function UserListItem({
                         <TextWithTooltip
                             shouldShowTooltip={showTooltip}
                             text={item.text}
-                            textStyles={[
+                            style={[
                                 styles.optionDisplayName,
                                 isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
                                 styles.sidebarLinkTextBold,
@@ -94,7 +94,7 @@ function UserListItem({
                             <TextWithTooltip
                                 shouldShowTooltip={showTooltip}
                                 text={item.alternateText}
-                                textStyles={[styles.textLabelSupporting, styles.lh16, styles.pre]}
+                                style={[styles.textLabelSupporting, styles.lh16, styles.pre]}
                             />
                         )}
                     </View>
diff --git a/src/components/SettlementButton.tsx b/src/components/SettlementButton.tsx
index 50bfcd4cc8be..8e5f32f9cd20 100644
--- a/src/components/SettlementButton.tsx
+++ b/src/components/SettlementButton.tsx
@@ -19,6 +19,7 @@ import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage';
 import type AnchorAlignment from '@src/types/utils/AnchorAlignment';
 import type {EmptyObject} from '@src/types/utils/EmptyObject';
 import ButtonWithDropdownMenu from './ButtonWithDropdownMenu';
+import type {PaymentType} from './ButtonWithDropdownMenu/types';
 import * as Expensicons from './Icon/Expensicons';
 import KYCWall from './KYCWall';
 
@@ -224,7 +225,8 @@ function SettlementButton({
             shouldShowPersonalBankAccountOption={shouldShowPersonalBankAccountOption}
         >
             {(triggerKYCFlow, buttonRef) => (
-                <ButtonWithDropdownMenu
+                <ButtonWithDropdownMenu<PaymentType>
+                    success
                     buttonRef={buttonRef}
                     isDisabled={isDisabled}
                     isLoading={isLoading}
diff --git a/src/components/TextWithTooltip/index.native.tsx b/src/components/TextWithTooltip/index.native.tsx
index 3780df6362be..b857ded2588b 100644
--- a/src/components/TextWithTooltip/index.native.tsx
+++ b/src/components/TextWithTooltip/index.native.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 import Text from '@components/Text';
 import type TextWithTooltipProps from './types';
 
-function TextWithTooltip({text, textStyles, numberOfLines = 1}: TextWithTooltipProps) {
+function TextWithTooltip({text, style, numberOfLines = 1}: TextWithTooltipProps) {
     return (
         <Text
-            style={textStyles}
+            style={style}
             numberOfLines={numberOfLines}
         >
             {text}
diff --git a/src/components/TextWithTooltip/index.tsx b/src/components/TextWithTooltip/index.tsx
index 96721488c6db..704ffdb8bb1c 100644
--- a/src/components/TextWithTooltip/index.tsx
+++ b/src/components/TextWithTooltip/index.tsx
@@ -7,7 +7,7 @@ type LayoutChangeEvent = {
     target: HTMLElement;
 };
 
-function TextWithTooltip({text, shouldShowTooltip, textStyles, numberOfLines = 1}: TextWithTooltipProps) {
+function TextWithTooltip({text, shouldShowTooltip, style, numberOfLines = 1}: TextWithTooltipProps) {
     const [showTooltip, setShowTooltip] = useState(false);
 
     return (
@@ -16,7 +16,7 @@ function TextWithTooltip({text, shouldShowTooltip, textStyles, numberOfLines = 1
             text={text}
         >
             <Text
-                style={textStyles}
+                style={style}
                 numberOfLines={numberOfLines}
                 onLayout={(e) => {
                     const target = (e.nativeEvent as unknown as LayoutChangeEvent).target;
diff --git a/src/components/TextWithTooltip/types.ts b/src/components/TextWithTooltip/types.ts
index 19c0b0dca6ed..8169df911945 100644
--- a/src/components/TextWithTooltip/types.ts
+++ b/src/components/TextWithTooltip/types.ts
@@ -7,8 +7,8 @@ type TextWithTooltipProps = {
     /** Whether to show the toolip text */
     shouldShowTooltip: boolean;
 
-    /** Additional text styles */
-    textStyles?: StyleProp<TextStyle>;
+    /** Additional styles */
+    style?: StyleProp<TextStyle>;
 
     /** Custom number of lines for text wrapping */
     numberOfLines?: number;
diff --git a/src/hooks/useHover.ts b/src/hooks/useHover.ts
new file mode 100644
index 000000000000..3e65979f6740
--- /dev/null
+++ b/src/hooks/useHover.ts
@@ -0,0 +1,14 @@
+import {useState} from 'react';
+
+const useHover = () => {
+    const [hovered, setHovered] = useState(false);
+    return {
+        hovered,
+        bind: {
+            onMouseEnter: () => setHovered(true),
+            onMouseLeave: () => setHovered(false),
+        },
+    };
+};
+
+export default useHover;
diff --git a/src/languages/en.ts b/src/languages/en.ts
index f812ff55851a..2a0139c64c07 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -1789,9 +1789,12 @@ export default {
         },
         people: {
             genericFailureMessage: 'An error occurred removing a user from the workspace, please try again.',
-            removeMembersPrompt: 'Are you sure you want to remove the selected members from your workspace?',
+            removeMembersPrompt: 'Are you sure you want to remove these members?',
             removeMembersTitle: 'Remove members',
+            makeMember: 'Make member',
+            makeAdmin: 'Make admin',
             selectAll: 'Select all',
+            selected: ({selectedNumber}) => `${selectedNumber} selected`,
             error: {
                 genericAdd: 'There was a problem adding this workspace member.',
                 cannotRemove: 'You cannot remove yourself or the workspace owner.',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index e8fe2a1e3c71..20f4cf8aeac8 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -1813,9 +1813,12 @@ export default {
         },
         people: {
             genericFailureMessage: 'Se ha producido un error al intentar eliminar a un usuario del espacio de trabajo. Por favor, inténtalo más tarde.',
-            removeMembersPrompt: '¿Estás seguro que quieres eliminar a los miembros seleccionados de tu espacio de trabajo?',
+            removeMembersPrompt: '¿Estás seguro de que deseas eliminar a estos miembros?',
             removeMembersTitle: 'Eliminar miembros',
+            makeMember: 'Hacer miembro',
+            makeAdmin: 'Hacer administrador',
             selectAll: 'Seleccionar todo',
+            selected: ({selectedNumber}) => `${selectedNumber} seleccionados`,
             error: {
                 genericAdd: 'Ha ocurrido un problema al añadir el miembro al espacio de trabajo.',
                 cannotRemove: 'No puedes eliminarte ni a ti mismo ni al dueño del espacio de trabajo.',
diff --git a/src/libs/API/parameters/UpdateWorkspaceMembersRoleParams.ts b/src/libs/API/parameters/UpdateWorkspaceMembersRoleParams.ts
new file mode 100644
index 000000000000..3686aab425d7
--- /dev/null
+++ b/src/libs/API/parameters/UpdateWorkspaceMembersRoleParams.ts
@@ -0,0 +1,6 @@
+type UpdateWorkspaceMembersRoleParams = {
+    policyID: string;
+    employees: string;
+};
+
+export default UpdateWorkspaceMembersRoleParams;
diff --git a/src/libs/API/parameters/index.ts b/src/libs/API/parameters/index.ts
index ccb42ed44e74..4fbc597b8186 100644
--- a/src/libs/API/parameters/index.ts
+++ b/src/libs/API/parameters/index.ts
@@ -145,6 +145,7 @@ export type {default as UnHoldMoneyRequestParams} from './UnHoldMoneyRequestPara
 export type {default as CancelPaymentParams} from './CancelPaymentParams';
 export type {default as AcceptACHContractForBankAccount} from './AcceptACHContractForBankAccount';
 export type {default as UpdateWorkspaceDescriptionParams} from './UpdateWorkspaceDescriptionParams';
+export type {default as UpdateWorkspaceMembersRoleParams} from './UpdateWorkspaceMembersRoleParams';
 export type {default as SetWorkspaceCategoriesEnabledParams} from './SetWorkspaceCategoriesEnabledParams';
 export type {default as SetWorkspaceRequiresCategoryParams} from './SetWorkspaceRequiresCategoryParams';
 export type {default as SetWorkspaceAutoReportingParams} from './SetWorkspaceAutoReportingParams';
diff --git a/src/libs/API/types.ts b/src/libs/API/types.ts
index fd530d648fc2..ba49bc5fa27b 100644
--- a/src/libs/API/types.ts
+++ b/src/libs/API/types.ts
@@ -111,6 +111,7 @@ const WRITE_COMMANDS = {
     UPDATE_WORKSPACE_GENERAL_SETTINGS: 'UpdateWorkspaceGeneralSettings',
     UPDATE_WORKSPACE_CUSTOM_UNIT_AND_RATE: 'UpdateWorkspaceCustomUnitAndRate',
     UPDATE_WORKSPACE_DESCRIPTION: 'UpdateWorkspaceDescription',
+    UPDATE_WORKSPACE_MEMBERS_ROLE: 'UpdateWorkspaceMembersRole',
     CREATE_WORKSPACE: 'CreateWorkspace',
     CREATE_WORKSPACE_FROM_IOU_PAYMENT: 'CreateWorkspaceFromIOUPayment',
     SET_WORKSPACE_CATEGORIES_ENABLED: 'SetWorkspaceCategoriesEnabled',
@@ -258,6 +259,7 @@ type WriteCommandParameters = {
     [WRITE_COMMANDS.DELETE_WORKSPACE_AVATAR]: Parameters.DeleteWorkspaceAvatarParams;
     [WRITE_COMMANDS.UPDATE_WORKSPACE_GENERAL_SETTINGS]: Parameters.UpdateWorkspaceGeneralSettingsParams;
     [WRITE_COMMANDS.UPDATE_WORKSPACE_DESCRIPTION]: Parameters.UpdateWorkspaceDescriptionParams;
+    [WRITE_COMMANDS.UPDATE_WORKSPACE_MEMBERS_ROLE]: Parameters.UpdateWorkspaceMembersRoleParams;
     [WRITE_COMMANDS.UPDATE_WORKSPACE_CUSTOM_UNIT_AND_RATE]: Parameters.UpdateWorkspaceCustomUnitAndRateParams;
     [WRITE_COMMANDS.CREATE_WORKSPACE]: Parameters.CreateWorkspaceParams;
     [WRITE_COMMANDS.CREATE_WORKSPACE_FROM_IOU_PAYMENT]: Parameters.CreateWorkspaceFromIOUPaymentParams;
diff --git a/src/libs/actions/Policy.ts b/src/libs/actions/Policy.ts
index 9c270c270780..313c4deb9934 100644
--- a/src/libs/actions/Policy.ts
+++ b/src/libs/actions/Policy.ts
@@ -28,6 +28,7 @@ import type {
     UpdateWorkspaceCustomUnitAndRateParams,
     UpdateWorkspaceDescriptionParams,
     UpdateWorkspaceGeneralSettingsParams,
+    UpdateWorkspaceMembersRoleParams,
 } from '@libs/API/parameters';
 import {READ_COMMANDS, WRITE_COMMANDS} from '@libs/API/types';
 import DateUtils from '@libs/DateUtils';
@@ -97,6 +98,12 @@ type NewCustomUnit = {
     rates: Rate;
 };
 
+type WorkspaceMembersRoleData = {
+    accountID: number;
+    email: string;
+    role: typeof CONST.POLICY.ROLE.ADMIN | typeof CONST.POLICY.ROLE.USER;
+};
+
 const allPolicies: OnyxCollection<Policy> = {};
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.POLICY,
@@ -718,6 +725,66 @@ function removeMembers(accountIDs: number[], policyID: string) {
     API.write(WRITE_COMMANDS.DELETE_MEMBERS_FROM_WORKSPACE, params, {optimisticData, successData, failureData});
 }
 
+function updateWorkspaceMembersRole(policyID: string, accountIDs: number[], newRole: typeof CONST.POLICY.ROLE.ADMIN | typeof CONST.POLICY.ROLE.USER) {
+    const previousPolicyMembers = {...allPolicyMembers};
+    const memberRoles: WorkspaceMembersRoleData[] = accountIDs.reduce((result: WorkspaceMembersRoleData[], accountID: number) => {
+        if (!allPersonalDetails?.[accountID]?.login) {
+            return result;
+        }
+
+        result.push({
+            accountID,
+            email: allPersonalDetails?.[accountID]?.login ?? '',
+            role: newRole,
+        });
+
+        return result;
+    }, []);
+
+    const optimisticData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.POLICY_MEMBERS}${policyID}`,
+            value: {
+                ...memberRoles.reduce((member: Record<number, {role: string}>, current) => {
+                    // eslint-disable-next-line no-param-reassign
+                    member[current.accountID] = {role: current?.role};
+                    return member;
+                }, {}),
+                errors: null,
+            },
+        },
+    ];
+
+    const successData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.POLICY_MEMBERS}${policyID}`,
+            value: {
+                errors: null,
+            },
+        },
+    ];
+
+    const failureData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.POLICY_MEMBERS}${policyID}`,
+            value: {
+                ...(previousPolicyMembers[`${ONYXKEYS.COLLECTION.POLICY_MEMBERS}${policyID}`] as Record<string, PolicyMember | null>),
+                errors: ErrorUtils.getMicroSecondOnyxError('workspace.editor.genericFailureMessage'),
+            },
+        },
+    ];
+
+    const params: UpdateWorkspaceMembersRoleParams = {
+        policyID,
+        employees: JSON.stringify(memberRoles.map((item) => ({email: item.email, role: item.role}))),
+    };
+
+    API.write(WRITE_COMMANDS.UPDATE_WORKSPACE_MEMBERS_ROLE, params, {optimisticData, successData, failureData});
+}
+
 /**
  * Optimistically create a chat for each member of the workspace, creates both optimistic and success data for onyx.
  *
@@ -2422,6 +2489,7 @@ function clearCategoryErrors(policyID: string, categoryName: string) {
 
 export {
     removeMembers,
+    updateWorkspaceMembersRole,
     addMembersToWorkspace,
     isAdminOfFreePolicy,
     hasActiveFreePolicy,
diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx
index 3bf5a1b130fe..718f2b6d9ad2 100644
--- a/src/pages/workspace/WorkspaceMembersPage.tsx
+++ b/src/pages/workspace/WorkspaceMembersPage.tsx
@@ -8,6 +8,8 @@ import {withOnyx} from 'react-native-onyx';
 import Badge from '@components/Badge';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import Button from '@components/Button';
+import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
+import type {DropdownOption, WorkspaceMemberBulkActionType} from '@components/ButtonWithDropdownMenu/types';
 import ConfirmModal from '@components/ConfirmModal';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -83,6 +85,7 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
     const prevPersonalDetails = usePrevious(personalDetails);
     const {translate, formatPhoneNumber, preferredLocale} = useLocalize();
     const {isSmallScreenWidth} = useWindowDimensions();
+    const dropdownButtonRef = useRef(null);
 
     /**
      * Get filtered personalDetails list with current policyMembers
@@ -301,6 +304,8 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
                 }
             }
 
+            const isSelected = selectedEmployees.includes(accountID);
+
             const isOwner = policy?.owner === details.login;
             const isAdmin = session?.email === details.login || policyMember.role === CONST.POLICY.ROLE.ADMIN;
 
@@ -310,7 +315,7 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
                     <Badge
                         text={isOwner ? translate('common.owner') : translate('common.admin')}
                         textStyles={styles.textStrong}
-                        badgeStyles={[styles.justifyContentCenter, StyleUtils.getMinimumWidth(60), styles.badgeBordered]}
+                        badgeStyles={[styles.justifyContentCenter, StyleUtils.getMinimumWidth(60), styles.badgeBordered, isSelected && styles.activeItemBadge]}
                     />
                 );
             }
@@ -318,7 +323,7 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
             result.push({
                 keyForList: accountIDKey,
                 accountID,
-                isSelected: selectedEmployees.includes(accountID),
+                isSelected,
                 isDisabled:
                     accountID === session?.accountID ||
                     details.login === policy?.owner ||
@@ -358,7 +363,7 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
 
     const getHeaderContent = () => (
         <>
-            <Text style={[styles.pl5, styles.mb5, styles.mt3, styles.textSupporting]}>{translate('workspace.people.membersListTitle')}</Text>
+            <Text style={[styles.pl5, styles.mb4, styles.mt3, styles.textSupporting]}>{translate('workspace.people.membersListTitle')}</Text>
             {!isEmptyObject(invitedPrimaryToSecondaryLogins) && (
                 <MessagesRow
                     type="success"
@@ -372,9 +377,9 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
     );
 
     const getCustomListHeader = () => (
-        <View style={[styles.flex1, styles.flexRow, styles.justifyContentBetween, StyleUtils.getPaddingLeft(64)]}>
+        <View style={[styles.flex1, styles.flexRow, styles.justifyContentBetween]}>
             <View>
-                <Text style={styles.searchInputStyle}>{translate('common.member')}</Text>
+                <Text style={[styles.searchInputStyle, styles.ml3]}>{translate('common.member')}</Text>
             </View>
             <View style={[StyleUtils.getMinimumWidth(60)]}>
                 <Text style={[styles.searchInputStyle, styles.textAlignCenter]}>{translate('common.role')}</Text>
@@ -382,26 +387,73 @@ function WorkspaceMembersPage({policyMembers, personalDetails, route, policy, se
         </View>
     );
 
+    const changeUserRole = (role: typeof CONST.POLICY.ROLE.ADMIN | typeof CONST.POLICY.ROLE.USER) => {
+        if (!isEmptyObject(errors)) {
+            return;
+        }
+
+        const accountIDsToUpdate = selectedEmployees.filter((id) => policyMembers?.[id].role !== role);
+
+        Policy.updateWorkspaceMembersRole(route.params.policyID, accountIDsToUpdate, role);
+        setSelectedEmployees([]);
+    };
+
+    const getBulkActionsButtonOptions = () => {
+        const options: Array<DropdownOption<WorkspaceMemberBulkActionType>> = [
+            {
+                text: translate('workspace.people.removeMembersTitle'),
+                value: CONST.POLICY.MEMBERS_BULK_ACTION_TYPES.REMOVE,
+                icon: Expensicons.RemoveMembers,
+                onSelected: askForConfirmationToRemove,
+            },
+        ];
+
+        if (selectedEmployees.find((employee) => policyMembers?.[employee]?.role === CONST.POLICY.ROLE.ADMIN)) {
+            options.push({
+                text: translate('workspace.people.makeMember'),
+                value: CONST.POLICY.MEMBERS_BULK_ACTION_TYPES.MAKE_MEMBER,
+                icon: Expensicons.User,
+                onSelected: () => changeUserRole(CONST.POLICY.ROLE.USER),
+            });
+        }
+
+        if (selectedEmployees.find((employee) => policyMembers?.[employee]?.role === CONST.POLICY.ROLE.USER)) {
+            options.push({
+                text: translate('workspace.people.makeAdmin'),
+                value: CONST.POLICY.MEMBERS_BULK_ACTION_TYPES.MAKE_ADMIN,
+                icon: Expensicons.MakeAdmin,
+                onSelected: () => changeUserRole(CONST.POLICY.ROLE.ADMIN),
+            });
+        }
+
+        return options;
+    };
+
     const getHeaderButtons = () => (
-        <View style={[styles.w100, styles.flexRow, isSmallScreenWidth && styles.mb3]}>
-            <Button
-                medium
-                success
-                onPress={inviteUser}
-                text={translate('workspace.invite.member')}
-                icon={Expensicons.Plus}
-                iconStyles={{transform: [{scale: 0.6}]}}
-                innerStyles={[isSmallScreenWidth && styles.alignItemsCenter]}
-                style={[isSmallScreenWidth && styles.flexGrow1]}
-            />
-            <Button
-                medium
-                danger
-                style={[styles.ml2, isSmallScreenWidth && styles.w50]}
-                isDisabled={selectedEmployees.length === 0}
-                text={translate('common.remove')}
-                onPress={askForConfirmationToRemove}
-            />
+        <View style={styles.w100}>
+            {selectedEmployees.length > 0 ? (
+                <ButtonWithDropdownMenu<WorkspaceMemberBulkActionType>
+                    shouldAlwaysShowDropdownMenu
+                    pressOnEnter
+                    customText={translate('workspace.people.selected', {selectedNumber: selectedEmployees.length})}
+                    buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
+                    onPress={() => null}
+                    options={getBulkActionsButtonOptions()}
+                    buttonRef={dropdownButtonRef}
+                    style={[isSmallScreenWidth && styles.flexGrow1]}
+                />
+            ) : (
+                <Button
+                    medium
+                    success
+                    onPress={inviteUser}
+                    text={translate('workspace.invite.member')}
+                    icon={Expensicons.Plus}
+                    iconStyles={{transform: [{scale: 0.6}]}}
+                    innerStyles={[isSmallScreenWidth && styles.alignItemsCenter]}
+                    style={[isSmallScreenWidth && styles.flexGrow1]}
+                />
+            )}
         </View>
     );
 
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 7b1e2e78fe81..405a05cfce78 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -649,9 +649,21 @@ const styles = (theme: ThemeColors) =>
         },
 
         buttonDivider: {
-            height: variables.dropDownButtonDividerHeight,
-            borderWidth: 0.7,
-            borderColor: theme.textLight,
+            borderRightWidth: 1,
+            borderRightColor: theme.buttonHoveredBG,
+            ...sizing.h100,
+        },
+
+        buttonSuccessDivider: {
+            borderRightWidth: 1,
+            borderRightColor: theme.successHover,
+            ...sizing.h100,
+        },
+
+        buttonDangerDivider: {
+            borderRightWidth: 1,
+            borderRightColor: theme.dangerHover,
+            ...sizing.h100,
         },
 
         noBorderRadius: {
diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts
index 31716d75dd05..52a9e2dd2cd7 100644
--- a/src/styles/theme/themes/dark.ts
+++ b/src/styles/theme/themes/dark.ts
@@ -28,6 +28,7 @@ const darkTheme = {
     buttonDefaultBG: colors.productDark400,
     buttonHoveredBG: colors.productDark500,
     buttonPressedBG: colors.productDark600,
+    buttonSuccessText: colors.productLight100,
     danger: colors.red,
     dangerHover: colors.redHover,
     dangerPressed: colors.redHover,
diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts
index fecd8749aebb..7fb04a2dad77 100644
--- a/src/styles/theme/themes/light.ts
+++ b/src/styles/theme/themes/light.ts
@@ -28,6 +28,7 @@ const lightTheme = {
     buttonDefaultBG: colors.productLight400,
     buttonHoveredBG: colors.productLight500,
     buttonPressedBG: colors.productLight600,
+    buttonSuccessText: colors.productLight100,
     danger: colors.red,
     dangerHover: colors.redHover,
     dangerPressed: colors.redHover,
diff --git a/src/styles/theme/types.ts b/src/styles/theme/types.ts
index 8340682725d4..35a48e39805d 100644
--- a/src/styles/theme/types.ts
+++ b/src/styles/theme/types.ts
@@ -30,6 +30,7 @@ type ThemeColors = {
     buttonDefaultBG: Color;
     buttonHoveredBG: Color;
     buttonPressedBG: Color;
+    buttonSuccessText: Color;
     danger: Color;
     dangerHover: Color;
     dangerPressed: Color;