diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 6835bcf3f5fc..110256ba166b 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -35,6 +35,7 @@ import MultipleAvatars from './MultipleAvatars';
 import PressableWithSecondaryInteraction from './PressableWithSecondaryInteraction';
 import RenderHTML from './RenderHTML';
 import SelectCircle from './SelectCircle';
+import SubscriptAvatar from './SubscriptAvatar';
 import Text from './Text';
 
 type IconProps = {
@@ -154,6 +155,8 @@ type MenuItemBaseProps = {
     /** Text that appears above the title */
     label?: string;
 
+    isLabelHoverable?: boolean;
+
     /** Label to be displayed on the right */
     rightLabel?: string;
 
@@ -184,12 +187,18 @@ type MenuItemBaseProps = {
     /** Prop to represent the size of the float right avatar images to be shown */
     floatRightAvatarSize?: ValueOf<typeof CONST.AVATAR_SIZE>;
 
+    /** Whether the secondary right avatar should show as a subscript */
+    shouldShowSubscriptRightAvatar?: boolean;
+
     /** Affects avatar size  */
     viewMode?: ValueOf<typeof CONST.OPTION_MODE>;
 
     /** Used to truncate the text with an ellipsis after computing the text layout */
     numberOfLinesTitle?: number;
 
+    /** Used to truncate the description with an ellipsis after computing the text layout */
+    numberOfLinesDescription?: number;
+
     /**  Whether we should use small avatar subscript sizing the for menu item */
     isSmallAvatarSubscriptMenu?: boolean;
 
@@ -255,6 +264,7 @@ function MenuItem(
         badgeStyle,
         viewMode = CONST.OPTION_MODE.DEFAULT,
         numberOfLinesTitle = 1,
+        numberOfLinesDescription = 2,
         icon,
         iconFill,
         secondaryIcon,
@@ -280,6 +290,7 @@ function MenuItem(
         subtitle,
         shouldShowBasicTitle,
         label,
+        isLabelHoverable = true,
         rightLabel,
         shouldShowSelectedState = false,
         isSelected = false,
@@ -289,6 +300,7 @@ function MenuItem(
         rightComponent,
         floatRightAvatars = [],
         floatRightAvatarSize,
+        shouldShowSubscriptRightAvatar = false,
         avatarSize = CONST.AVATAR_SIZE.DEFAULT,
         isSmallAvatarSubscriptMenu = false,
         brickRoadIndicator,
@@ -404,240 +416,261 @@ function MenuItem(
     };
 
     return (
-        <Hoverable>
-            {(isHovered) => (
-                <PressableWithSecondaryInteraction
-                    onPress={shouldCheckActionAllowedOnPress ? Session.checkIfActionIsAllowed(onPressAction, isAnonymousAction) : onPressAction}
-                    onPressIn={() => shouldBlockSelection && isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
-                    onPressOut={ControlSelection.unblock}
-                    onSecondaryInteraction={onSecondaryInteraction}
-                    style={({pressed}) =>
-                        [
-                            containerStyle,
-                            errorText ? styles.pb5 : {},
-                            combinedStyle,
-                            !interactive && styles.cursorDefault,
-                            StyleUtils.getButtonBackgroundColorStyle(getButtonState(focused || isHovered, pressed, success, disabled, interactive), true),
-                            !focused && (isHovered || pressed) && hoverAndPressStyle,
-                            ...(Array.isArray(wrapperStyle) ? wrapperStyle : [wrapperStyle]),
-                            shouldGreyOutWhenDisabled && disabled && styles.buttonOpacityDisabled,
-                        ] as StyleProp<ViewStyle>
-                    }
-                    disabledStyle={shouldUseDefaultCursorWhenDisabled && [styles.cursorDefault]}
-                    disabled={disabled || isExecuting}
-                    ref={ref}
-                    role={CONST.ROLE.MENUITEM}
-                    accessibilityLabel={title ? title.toString() : ''}
-                    accessible
-                >
-                    {({pressed}) => (
-                        <>
-                            <View style={[styles.flexColumn, styles.flex1]}>
-                                {!!label && (
-                                    <View style={icon ? styles.mb2 : null}>
-                                        <Text style={StyleUtils.combineStyles([styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting, styles.pre])}>{label}</Text>
-                                    </View>
-                                )}
-                                <View style={[styles.flexRow, styles.pointerEventsAuto, disabled && !shouldUseDefaultCursorWhenDisabled && styles.cursorDisabled]}>
-                                    {!!icon && Array.isArray(icon) && (
-                                        <MultipleAvatars
-                                            isHovered={isHovered}
-                                            isPressed={pressed}
-                                            icons={icon as IconType[]}
-                                            size={avatarSize}
-                                            secondAvatarStyle={[
-                                                StyleUtils.getBackgroundAndBorderStyle(theme.sidebar),
-                                                pressed && interactive ? StyleUtils.getBackgroundAndBorderStyle(theme.buttonPressedBG) : undefined,
-                                                isHovered && !pressed && interactive ? StyleUtils.getBackgroundAndBorderStyle(theme.border) : undefined,
-                                            ]}
-                                        />
+        <View>
+            {!!label && !isLabelHoverable && (
+                <View style={[styles.ph5]}>
+                    <Text style={StyleUtils.combineStyles([styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting, styles.pre])}>{label}</Text>
+                </View>
+            )}
+            <Hoverable>
+                {(isHovered) => (
+                    <PressableWithSecondaryInteraction
+                        onPress={shouldCheckActionAllowedOnPress ? Session.checkIfActionIsAllowed(onPressAction, isAnonymousAction) : onPressAction}
+                        onPressIn={() => shouldBlockSelection && isSmallScreenWidth && DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
+                        onPressOut={ControlSelection.unblock}
+                        onSecondaryInteraction={onSecondaryInteraction}
+                        style={({pressed}) =>
+                            [
+                                containerStyle,
+                                errorText ? styles.pb5 : {},
+                                combinedStyle,
+                                !interactive && styles.cursorDefault,
+                                StyleUtils.getButtonBackgroundColorStyle(getButtonState(focused || isHovered, pressed, success, disabled, interactive), true),
+                                !focused && (isHovered || pressed) && hoverAndPressStyle,
+                                ...(Array.isArray(wrapperStyle) ? wrapperStyle : [wrapperStyle]),
+                                shouldGreyOutWhenDisabled && disabled && styles.buttonOpacityDisabled,
+                            ] as StyleProp<ViewStyle>
+                        }
+                        disabledStyle={shouldUseDefaultCursorWhenDisabled && [styles.cursorDefault]}
+                        disabled={disabled || isExecuting}
+                        ref={ref}
+                        role={CONST.ROLE.MENUITEM}
+                        accessibilityLabel={title ? title.toString() : ''}
+                        accessible
+                    >
+                        {({pressed}) => (
+                            <>
+                                <View style={[styles.flexColumn, styles.flex1]}>
+                                    {!!label && isLabelHoverable && (
+                                        <View style={icon ? styles.mb2 : null}>
+                                            <Text style={StyleUtils.combineStyles([styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting, styles.pre])}>
+                                                {label}
+                                            </Text>
+                                        </View>
                                     )}
-                                    {!icon && shouldPutLeftPaddingWhenNoIcon && <View style={[styles.popoverMenuIcon, iconStyles, StyleUtils.getAvatarWidthStyle(avatarSize)]} />}
-                                    {icon && !Array.isArray(icon) && (
-                                        <View style={[styles.popoverMenuIcon, iconStyles, StyleUtils.getAvatarWidthStyle(avatarSize)]}>
-                                            {typeof icon !== 'string' && iconType === CONST.ICON_TYPE_ICON && (
+                                    <View style={[styles.flexRow, styles.pointerEventsAuto, disabled && !shouldUseDefaultCursorWhenDisabled && styles.cursorDisabled]}>
+                                        {!!icon && Array.isArray(icon) && (
+                                            <MultipleAvatars
+                                                isHovered={isHovered}
+                                                isPressed={pressed}
+                                                icons={icon as IconType[]}
+                                                size={avatarSize}
+                                                secondAvatarStyle={[
+                                                    StyleUtils.getBackgroundAndBorderStyle(theme.sidebar),
+                                                    pressed && interactive ? StyleUtils.getBackgroundAndBorderStyle(theme.buttonPressedBG) : undefined,
+                                                    isHovered && !pressed && interactive ? StyleUtils.getBackgroundAndBorderStyle(theme.border) : undefined,
+                                                ]}
+                                            />
+                                        )}
+                                        {!icon && shouldPutLeftPaddingWhenNoIcon && <View style={[styles.popoverMenuIcon, iconStyles, StyleUtils.getAvatarWidthStyle(avatarSize)]} />}
+                                        {icon && !Array.isArray(icon) && (
+                                            <View style={[styles.popoverMenuIcon, iconStyles, StyleUtils.getAvatarWidthStyle(avatarSize)]}>
+                                                {typeof icon !== 'string' && iconType === CONST.ICON_TYPE_ICON && (
+                                                    <Icon
+                                                        contentFit={contentFit}
+                                                        hovered={isHovered}
+                                                        pressed={pressed}
+                                                        src={icon}
+                                                        width={iconWidth}
+                                                        height={iconHeight}
+                                                        fill={
+                                                            displayInDefaultIconColor
+                                                                ? undefined
+                                                                : iconFill ??
+                                                                  StyleUtils.getIconFillColor(getButtonState(focused || isHovered, pressed, success, disabled, interactive), true, isPaneMenu)
+                                                        }
+                                                    />
+                                                )}
+                                                {icon && iconType === CONST.ICON_TYPE_WORKSPACE && (
+                                                    <Avatar
+                                                        imageStyles={[styles.alignSelfCenter]}
+                                                        size={CONST.AVATAR_SIZE.DEFAULT}
+                                                        source={icon as AvatarSource}
+                                                        fallbackIcon={fallbackIcon}
+                                                        name={title}
+                                                        type={CONST.ICON_TYPE_WORKSPACE}
+                                                    />
+                                                )}
+                                                {iconType === CONST.ICON_TYPE_AVATAR && (
+                                                    <Avatar
+                                                        imageStyles={[styles.alignSelfCenter]}
+                                                        source={icon as AvatarSource}
+                                                        fallbackIcon={fallbackIcon}
+                                                        size={avatarSize}
+                                                    />
+                                                )}
+                                            </View>
+                                        )}
+                                        {secondaryIcon && (
+                                            <View style={[styles.popoverMenuIcon, iconStyles]}>
                                                 <Icon
                                                     contentFit={contentFit}
-                                                    hovered={isHovered}
-                                                    pressed={pressed}
-                                                    src={icon}
+                                                    src={secondaryIcon}
                                                     width={iconWidth}
                                                     height={iconHeight}
                                                     fill={
-                                                        displayInDefaultIconColor
-                                                            ? undefined
-                                                            : iconFill ??
-                                                              StyleUtils.getIconFillColor(getButtonState(focused || isHovered, pressed, success, disabled, interactive), true, isPaneMenu)
+                                                        secondaryIconFill ?? StyleUtils.getIconFillColor(getButtonState(focused || isHovered, pressed, success, disabled, interactive), true)
                                                     }
                                                 />
+                                            </View>
+                                        )}
+                                        <View style={[styles.justifyContentCenter, styles.flex1, StyleUtils.getMenuItemTextContainerStyle(isSmallAvatarSubscriptMenu)]}>
+                                            {!!description && shouldShowDescriptionOnTop && (
+                                                <Text
+                                                    style={descriptionTextStyles}
+                                                    numberOfLines={numberOfLinesDescription}
+                                                >
+                                                    {description}
+                                                </Text>
                                             )}
-                                            {icon && iconType === CONST.ICON_TYPE_WORKSPACE && (
-                                                <Avatar
-                                                    imageStyles={[styles.alignSelfCenter]}
-                                                    size={CONST.AVATAR_SIZE.DEFAULT}
-                                                    source={icon as AvatarSource}
-                                                    fallbackIcon={fallbackIcon}
-                                                    name={title}
-                                                    type={CONST.ICON_TYPE_WORKSPACE}
-                                                />
+                                            <View style={[styles.flexRow, styles.alignItemsCenter]}>
+                                                {!!title && (shouldRenderAsHTML || (shouldParseTitle && !!html.length)) && (
+                                                    <View style={styles.renderHTMLTitle}>
+                                                        <RenderHTML html={getProcessedTitle} />
+                                                    </View>
+                                                )}
+                                                {!shouldRenderAsHTML && !shouldParseTitle && !!title && (
+                                                    <Text
+                                                        style={combinedTitleTextStyle}
+                                                        numberOfLines={numberOfLinesTitle || undefined}
+                                                        dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: interactive && disabled}}
+                                                    >
+                                                        {renderTitleContent()}
+                                                    </Text>
+                                                )}
+                                                {shouldShowTitleIcon && titleIcon && (
+                                                    <View style={[styles.ml2]}>
+                                                        <Icon
+                                                            src={titleIcon}
+                                                            fill={theme.iconSuccessFill}
+                                                        />
+                                                    </View>
+                                                )}
+                                            </View>
+                                            {!!description && !shouldShowDescriptionOnTop && (
+                                                <Text
+                                                    style={descriptionTextStyles}
+                                                    numberOfLines={numberOfLinesDescription}
+                                                >
+                                                    {description}
+                                                </Text>
                                             )}
-                                            {iconType === CONST.ICON_TYPE_AVATAR && (
-                                                <Avatar
-                                                    imageStyles={[styles.alignSelfCenter]}
-                                                    source={icon as AvatarSource}
-                                                    fallbackIcon={fallbackIcon}
-                                                    size={avatarSize}
+                                            {!!error && (
+                                                <View style={[styles.mt1]}>
+                                                    <Text style={[styles.textLabelError]}>{error}</Text>
+                                                </View>
+                                            )}
+                                            {!!furtherDetails && (
+                                                <View style={[styles.flexRow, styles.mt1, styles.alignItemsCenter]}>
+                                                    {!!furtherDetailsIcon && (
+                                                        <Icon
+                                                            src={furtherDetailsIcon}
+                                                            height={variables.iconSizeNormal}
+                                                            width={variables.iconSizeNormal}
+                                                            inline
+                                                        />
+                                                    )}
+                                                    <Text
+                                                        style={furtherDetailsIcon ? [styles.furtherDetailsText, styles.ph2, styles.pt1] : styles.textLabelSupporting}
+                                                        numberOfLines={2}
+                                                    >
+                                                        {furtherDetails}
+                                                    </Text>
+                                                </View>
+                                            )}
+                                        </View>
+                                    </View>
+                                </View>
+                                <View style={[styles.flexRow, styles.menuItemTextContainer, !hasPressableRightComponent && styles.pointerEventsNone]}>
+                                    {badgeText && (
+                                        <Badge
+                                            text={badgeText}
+                                            textStyles={styles.textStrong}
+                                            badgeStyles={[
+                                                styles.alignSelfCenter,
+                                                styles.badgeBordered,
+                                                brickRoadIndicator ? styles.mr2 : undefined,
+                                                focused || isHovered || pressed ? styles.activeItemBadge : {},
+                                                badgeStyle,
+                                            ]}
+                                        />
+                                    )}
+                                    {/* Since subtitle can be of type number, we should allow 0 to be shown */}
+                                    {(subtitle === 0 || subtitle) && (
+                                        <View style={[styles.justifyContentCenter, styles.mr1]}>
+                                            <Text style={[styles.textLabelSupporting, ...(combinedStyle as TextStyle[])]}>{subtitle}</Text>
+                                        </View>
+                                    )}
+                                    {floatRightAvatars?.length > 0 && (
+                                        <View style={[styles.alignItemsCenter, styles.justifyContentCenter, brickRoadIndicator ? styles.mr2 : styles.mrn2]}>
+                                            {shouldShowSubscriptRightAvatar ? (
+                                                <SubscriptAvatar
+                                                    backgroundColor={isHovered ? theme.activeComponentBG : theme.componentBG}
+                                                    mainAvatar={floatRightAvatars[0]}
+                                                    secondaryAvatar={floatRightAvatars[1]}
+                                                    size={floatRightAvatarSize ?? fallbackAvatarSize}
+                                                />
+                                            ) : (
+                                                <MultipleAvatars
+                                                    isHovered={isHovered}
+                                                    isPressed={pressed}
+                                                    icons={floatRightAvatars}
+                                                    size={floatRightAvatarSize ?? fallbackAvatarSize}
+                                                    fallbackIcon={defaultWorkspaceAvatars.WorkspaceBuilding}
+                                                    shouldStackHorizontally={shouldStackHorizontally}
+                                                    isFocusMode
                                                 />
                                             )}
                                         </View>
                                     )}
-                                    {secondaryIcon && (
-                                        <View style={[styles.popoverMenuIcon, iconStyles]}>
+                                    {!!brickRoadIndicator && (
+                                        <View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.ml1, styles.mr2]}>
                                             <Icon
-                                                contentFit={contentFit}
-                                                src={secondaryIcon}
-                                                width={iconWidth}
-                                                height={iconHeight}
-                                                fill={secondaryIconFill ?? StyleUtils.getIconFillColor(getButtonState(focused || isHovered, pressed, success, disabled, interactive), true)}
+                                                src={Expensicons.DotIndicator}
+                                                fill={brickRoadIndicator === 'error' ? theme.danger : theme.success}
                                             />
                                         </View>
                                     )}
-                                    <View style={[styles.justifyContentCenter, styles.flex1, StyleUtils.getMenuItemTextContainerStyle(isSmallAvatarSubscriptMenu)]}>
-                                        {!!description && shouldShowDescriptionOnTop && (
-                                            <Text
-                                                style={descriptionTextStyles}
-                                                numberOfLines={2}
-                                            >
-                                                {description}
-                                            </Text>
-                                        )}
-                                        <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                                            {!!title && (shouldRenderAsHTML || (shouldParseTitle && !!html.length)) && (
-                                                <View style={styles.renderHTMLTitle}>
-                                                    <RenderHTML html={getProcessedTitle} />
-                                                </View>
-                                            )}
-                                            {!shouldRenderAsHTML && !shouldParseTitle && !!title && (
-                                                <Text
-                                                    style={combinedTitleTextStyle}
-                                                    numberOfLines={numberOfLinesTitle || undefined}
-                                                    dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: interactive && disabled}}
-                                                >
-                                                    {renderTitleContent()}
-                                                </Text>
-                                            )}
-                                            {shouldShowTitleIcon && titleIcon && (
-                                                <View style={[styles.ml2]}>
-                                                    <Icon
-                                                        src={titleIcon}
-                                                        fill={theme.iconSuccessFill}
-                                                    />
-                                                </View>
-                                            )}
+                                    {!title && !!rightLabel && (
+                                        <View style={styles.justifyContentCenter}>
+                                            <Text style={styles.rightLabelMenuItem}>{rightLabel}</Text>
                                         </View>
-                                        {!!description && !shouldShowDescriptionOnTop && (
-                                            <Text
-                                                style={descriptionTextStyles}
-                                                numberOfLines={2}
-                                            >
-                                                {description}
-                                            </Text>
-                                        )}
-                                        {!!error && (
-                                            <View style={[styles.mt1]}>
-                                                <Text style={[styles.textLabelError]}>{error}</Text>
-                                            </View>
-                                        )}
-                                        {!!furtherDetails && (
-                                            <View style={[styles.flexRow, styles.mt1, styles.alignItemsCenter]}>
-                                                {!!furtherDetailsIcon && (
-                                                    <Icon
-                                                        src={furtherDetailsIcon}
-                                                        height={variables.iconSizeNormal}
-                                                        width={variables.iconSizeNormal}
-                                                        inline
-                                                    />
-                                                )}
-                                                <Text
-                                                    style={furtherDetailsIcon ? [styles.furtherDetailsText, styles.ph2, styles.pt1] : styles.textLabelSupporting}
-                                                    numberOfLines={2}
-                                                >
-                                                    {furtherDetails}
-                                                </Text>
-                                            </View>
-                                        )}
-                                    </View>
+                                    )}
+                                    {shouldShowRightIcon && (
+                                        <View style={[styles.popoverMenuIcon, styles.pointerEventsAuto, disabled && !shouldUseDefaultCursorWhenDisabled && styles.cursorDisabled]}>
+                                            <Icon
+                                                src={iconRight}
+                                                fill={StyleUtils.getIconFillColor(getButtonState(focused || isHovered, pressed, success, disabled, interactive))}
+                                            />
+                                        </View>
+                                    )}
+                                    {shouldShowRightComponent && rightComponent}
+                                    {shouldShowSelectedState && <SelectCircle isChecked={isSelected} />}
                                 </View>
-                            </View>
-                            <View style={[styles.flexRow, styles.menuItemTextContainer, !hasPressableRightComponent && styles.pointerEventsNone]}>
-                                {badgeText && (
-                                    <Badge
-                                        text={badgeText}
-                                        textStyles={styles.textStrong}
-                                        badgeStyles={[
-                                            styles.alignSelfCenter,
-                                            styles.badgeBordered,
-                                            brickRoadIndicator ? styles.mr2 : undefined,
-                                            focused || isHovered || pressed ? styles.activeItemBadge : {},
-                                            badgeStyle,
-                                        ]}
+                                {!!errorText && (
+                                    <FormHelpMessage
+                                        isError
+                                        shouldShowRedDotIndicator={false}
+                                        message={errorText}
+                                        style={styles.menuItemError}
                                     />
                                 )}
-                                {/* Since subtitle can be of type number, we should allow 0 to be shown */}
-                                {(subtitle === 0 || subtitle) && (
-                                    <View style={[styles.justifyContentCenter, styles.mr1]}>
-                                        <Text style={[styles.textLabelSupporting, ...(combinedStyle as TextStyle[])]}>{subtitle}</Text>
-                                    </View>
-                                )}
-                                {floatRightAvatars?.length > 0 && (
-                                    <View style={[styles.justifyContentCenter, brickRoadIndicator ? styles.mr2 : undefined]}>
-                                        <MultipleAvatars
-                                            isHovered={isHovered}
-                                            isPressed={pressed}
-                                            icons={floatRightAvatars}
-                                            size={floatRightAvatarSize ?? fallbackAvatarSize}
-                                            fallbackIcon={defaultWorkspaceAvatars.WorkspaceBuilding}
-                                            shouldStackHorizontally={shouldStackHorizontally}
-                                        />
-                                    </View>
-                                )}
-                                {!!brickRoadIndicator && (
-                                    <View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.ml1, styles.mr2]}>
-                                        <Icon
-                                            src={Expensicons.DotIndicator}
-                                            fill={brickRoadIndicator === 'error' ? theme.danger : theme.success}
-                                        />
-                                    </View>
-                                )}
-                                {!title && !!rightLabel && (
-                                    <View style={styles.justifyContentCenter}>
-                                        <Text style={styles.rightLabelMenuItem}>{rightLabel}</Text>
-                                    </View>
-                                )}
-                                {shouldShowRightIcon && (
-                                    <View style={[styles.popoverMenuIcon, styles.pointerEventsAuto, disabled && !shouldUseDefaultCursorWhenDisabled && styles.cursorDisabled]}>
-                                        <Icon
-                                            src={iconRight}
-                                            fill={StyleUtils.getIconFillColor(getButtonState(focused || isHovered, pressed, success, disabled, interactive))}
-                                        />
-                                    </View>
-                                )}
-                                {shouldShowRightComponent && rightComponent}
-                                {shouldShowSelectedState && <SelectCircle isChecked={isSelected} />}
-                            </View>
-                            {!!errorText && (
-                                <FormHelpMessage
-                                    isError
-                                    shouldShowRedDotIndicator={false}
-                                    message={errorText}
-                                    style={styles.menuItemError}
-                                />
-                            )}
-                        </>
-                    )}
-                </PressableWithSecondaryInteraction>
-            )}
-        </Hoverable>
+                            </>
+                        )}
+                    </PressableWithSecondaryInteraction>
+                )}
+            </Hoverable>
+        </View>
     );
 }
 
diff --git a/src/components/MultipleAvatars.tsx b/src/components/MultipleAvatars.tsx
index 98bc47e41bbe..dedaba500a9c 100644
--- a/src/components/MultipleAvatars.tsx
+++ b/src/components/MultipleAvatars.tsx
@@ -101,8 +101,7 @@ function MultipleAvatars({
         }),
         [styles],
     );
-
-    const secondAvatarStyle = secondAvatarStyleProp ?? [StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)];
+    const secondAvatarStyle = secondAvatarStyleProp ?? [StyleUtils.getBackgroundAndBorderStyle(isHovered ? theme.activeComponentBG : theme.componentBG)];
 
     let avatarContainerStyles = StyleUtils.getContainerStyles(size, isInReportAction);
     const {singleAvatarStyle, secondAvatarStyles} = useMemo(() => avatarSizeToStylesMap[size as AvatarSizeToStyles] ?? avatarSizeToStylesMap.default, [size, avatarSizeToStylesMap]);
diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx
index 8f54de5182f8..1fd1c8ef5a3b 100644
--- a/src/components/PopoverMenu.tsx
+++ b/src/components/PopoverMenu.tsx
@@ -203,11 +203,17 @@ function PopoverMenu({
                         title={item.text}
                         shouldCheckActionAllowedOnPress={false}
                         description={item.description}
+                        numberOfLinesDescription={item.numberOfLinesDescription}
                         onPress={() => selectItem(menuIndex)}
                         focused={focusedIndex === menuIndex}
                         displayInDefaultIconColor={item.displayInDefaultIconColor}
                         shouldShowRightIcon={item.shouldShowRightIcon}
                         shouldPutLeftPaddingWhenNoIcon={item.shouldPutLeftPaddingWhenNoIcon}
+                        label={item.label}
+                        isLabelHoverable={item.isLabelHoverable}
+                        floatRightAvatars={item.floatRightAvatars}
+                        floatRightAvatarSize={item.floatRightAvatarSize}
+                        shouldShowSubscriptRightAvatar={item.shouldShowSubscriptRightAvatar}
                         disabled={item.disabled}
                     />
                 ))}
diff --git a/src/languages/en.ts b/src/languages/en.ts
index c3ad6d82d6b2..41e02692e760 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -584,6 +584,17 @@ export default {
         deleteConfirmation: 'Are you sure you want to delete this receipt?',
         addReceipt: 'Add receipt',
     },
+    quickAction: {
+        scanReceipt: 'Scan Receipt',
+        recordDistance: 'Record Distance',
+        requestMoney: 'Request Money',
+        splitBill: 'Split Bill',
+        splitReceipt: 'Split Receipt',
+        splitDistance: 'Split Distance',
+        sendMoney: 'Send Money',
+        assignTask: 'Assign Task',
+        shortcut: 'Shortcut',
+    },
     iou: {
         amount: 'Amount',
         taxAmount: 'Tax amount',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 78b80adb16d4..5e5e958ae075 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -580,6 +580,17 @@ export default {
         deleteConfirmation: '¿Estás seguro de que quieres borrar este recibo?',
         addReceipt: 'Añadir recibo',
     },
+    quickAction: {
+        scanReceipt: 'Escanear Recibo',
+        recordDistance: 'Grabar Distancia',
+        requestMoney: 'Solicitar Dinero',
+        splitBill: 'Dividir Cuenta',
+        splitReceipt: 'Dividir Recibo',
+        splitDistance: 'Dividir Distancia',
+        sendMoney: 'Enviar Dinero',
+        assignTask: 'Assignar Tarea',
+        shortcut: 'Acceso Directo',
+    },
     iou: {
         amount: 'Importe',
         taxAmount: 'Importe del impuesto',
diff --git a/src/libs/actions/IOU.ts b/src/libs/actions/IOU.ts
index 5632268ef6ca..861949124cc0 100644
--- a/src/libs/actions/IOU.ts
+++ b/src/libs/actions/IOU.ts
@@ -323,9 +323,21 @@ function updateMoneyRequestTypeParams(routes: StackNavigationState<ParamListBase
 }
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-function startMoneyRequest(iouType: ValueOf<typeof CONST.IOU.TYPE>, reportID: string) {
+function startMoneyRequest(iouType: ValueOf<typeof CONST.IOU.TYPE>, reportID: string, requestType?: ValueOf<typeof CONST.IOU.REQUEST_TYPE>) {
     clearMoneyRequest(CONST.IOU.OPTIMISTIC_TRANSACTION_ID);
-    Navigation.navigate(ROUTES.MONEY_REQUEST_CREATE.getRoute(CONST.IOU.ACTION.CREATE, iouType, CONST.IOU.OPTIMISTIC_TRANSACTION_ID, reportID));
+    switch (requestType) {
+        case CONST.IOU.REQUEST_TYPE.MANUAL:
+            Navigation.navigate(ROUTES.MONEY_REQUEST_CREATE_TAB_MANUAL.getRoute(CONST.IOU.ACTION.CREATE, iouType, CONST.IOU.OPTIMISTIC_TRANSACTION_ID, reportID));
+            return;
+        case CONST.IOU.REQUEST_TYPE.SCAN:
+            Navigation.navigate(ROUTES.MONEY_REQUEST_CREATE_TAB_SCAN.getRoute(CONST.IOU.ACTION.CREATE, iouType, CONST.IOU.OPTIMISTIC_TRANSACTION_ID, reportID));
+            return;
+        case CONST.IOU.REQUEST_TYPE.DISTANCE:
+            Navigation.navigate(ROUTES.MONEY_REQUEST_CREATE_TAB_DISTANCE.getRoute(CONST.IOU.ACTION.CREATE, iouType, CONST.IOU.OPTIMISTIC_TRANSACTION_ID, reportID));
+            return;
+        default:
+            Navigation.navigate(ROUTES.MONEY_REQUEST_CREATE.getRoute(CONST.IOU.ACTION.CREATE, iouType, CONST.IOU.OPTIMISTIC_TRANSACTION_ID, reportID));
+    }
 }
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -583,7 +595,7 @@ function buildOnyxDataForMoneyRequest(
             key: ONYXKEYS.NVP_QUICK_ACTION_GLOBAL_CREATE,
             value: {
                 action: newQuickAction,
-                reportID: chatReport?.reportID,
+                chatReportID: chatReport?.reportID,
                 isFirstQuickAction: isEmptyObject(quickAction),
             },
         });
@@ -2329,7 +2341,7 @@ function createSplitsAndOnyxData(
             key: ONYXKEYS.NVP_QUICK_ACTION_GLOBAL_CREATE,
             value: {
                 action: iouRequestType === CONST.IOU.REQUEST_TYPE.DISTANCE ? CONST.QUICK_ACTIONS.SPLIT_DISTANCE : CONST.QUICK_ACTIONS.SPLIT_MANUAL,
-                reportID: splitChatReport.reportID,
+                chatReportID: splitChatReport.reportID,
                 isFirstQuickAction: isEmptyObject(quickAction),
             },
         },
@@ -2815,7 +2827,7 @@ function startSplitBill(
             key: ONYXKEYS.NVP_QUICK_ACTION_GLOBAL_CREATE,
             value: {
                 action: CONST.QUICK_ACTIONS.SPLIT_SCAN,
-                reportID: splitChatReport.reportID,
+                chatReportID: splitChatReport.reportID,
                 isFirstQuickAction: isEmptyObject(quickAction),
             },
         },
@@ -4095,7 +4107,7 @@ function getSendMoneyParams(
         key: ONYXKEYS.NVP_QUICK_ACTION_GLOBAL_CREATE,
         value: {
             action: CONST.QUICK_ACTIONS.SEND_MONEY,
-            reportID: chatReport.reportID,
+            chatReportID: chatReport.reportID,
             isFirstQuickAction: isEmptyObject(quickAction),
         },
     };
diff --git a/src/libs/actions/Task.ts b/src/libs/actions/Task.ts
index 681ed0ec383f..3a7e29be09a3 100644
--- a/src/libs/actions/Task.ts
+++ b/src/libs/actions/Task.ts
@@ -241,7 +241,7 @@ function createTaskAndNavigate(
         key: ONYXKEYS.NVP_QUICK_ACTION_GLOBAL_CREATE,
         value: {
             action: CONST.QUICK_ACTIONS.ASSIGN_TASK,
-            reportID: parentReportID,
+            chatReportID: parentReportID,
             isFirstQuickAction: isEmptyObject(quickAction),
             targetAccountID: assigneeAccountID,
         },
@@ -706,11 +706,15 @@ function setParentReportID(parentReportID: string) {
 /**
  * Clears out the task info from the store and navigates to the NewTaskDetails page
  */
-function clearOutTaskInfoAndNavigate(reportID: string) {
+function clearOutTaskInfoAndNavigate(reportID: string, accountID = 0) {
     clearOutTaskInfo();
     if (reportID && reportID !== '0') {
         setParentReportID(reportID);
     }
+    if (accountID > 0) {
+        const accountLogin = allPersonalDetails?.[accountID]?.login ?? '';
+        setAssigneeValue(accountLogin, accountID, reportID);
+    }
     Navigation.navigate(ROUTES.NEW_TASK_DETAILS);
 }
 
diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
index f661cee00b56..117083293b5d 100644
--- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
+++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types';
-import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
+import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
+import _ from 'underscore';
 import FloatingActionButton from '@components/FloatingActionButton';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PopoverMenu from '@components/PopoverMenu';
@@ -16,6 +17,7 @@ import compose from '@libs/compose';
 import interceptAnonymousUser from '@libs/interceptAnonymousUser';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
+import personalDetailsPropType from '@pages/personalDetailsPropType';
 import * as App from '@userActions/App';
 import * as IOU from '@userActions/IOU';
 import * as Policy from '@userActions/Policy';
@@ -36,6 +38,50 @@ const policySelector = (policy) =>
         pendingAction: policy.pendingAction,
     };
 
+const getQuickActionIcon = (action) => {
+    switch (action) {
+        case CONST.QUICK_ACTIONS.REQUEST_MANUAL:
+            return Expensicons.MoneyCircle;
+        case CONST.QUICK_ACTIONS.REQUEST_SCAN:
+            return Expensicons.Receipt;
+        case CONST.QUICK_ACTIONS.REQUEST_DISTANCE:
+            return Expensicons.Car;
+        case CONST.QUICK_ACTIONS.SPLIT_MANUAL:
+        case CONST.QUICK_ACTIONS.SPLIT_SCAN:
+        case CONST.QUICK_ACTIONS.SPLIT_DISTANCE:
+            return Expensicons.Transfer;
+        case CONST.QUICK_ACTIONS.SEND_MONEY:
+            return Expensicons.Send;
+        case CONST.QUICK_ACTIONS.ASSIGN_TASK:
+            return Expensicons.Task;
+        default:
+            return Expensicons.MoneyCircle;
+    }
+};
+
+const getQuickActionTitle = (action) => {
+    switch (action) {
+        case CONST.QUICK_ACTIONS.REQUEST_MANUAL:
+            return 'quickAction.requestMoney';
+        case CONST.QUICK_ACTIONS.REQUEST_SCAN:
+            return 'quickAction.scanReceipt';
+        case CONST.QUICK_ACTIONS.REQUEST_DISTANCE:
+            return 'quickAction.recordDistance';
+        case CONST.QUICK_ACTIONS.SPLIT_MANUAL:
+            return 'quickAction.splitBill';
+        case CONST.QUICK_ACTIONS.SPLIT_SCAN:
+            return 'quickAction.splitReceipt';
+        case CONST.QUICK_ACTIONS.SPLIT_DISTANCE:
+            return 'quickAction.splitScan';
+        case CONST.QUICK_ACTIONS.SEND_MONEY:
+            return 'quickAction.sendMoney';
+        case CONST.QUICK_ACTIONS.ASSIGN_TASK:
+            return 'quickAction.assignTask';
+        default:
+            return '';
+    }
+};
+
 const propTypes = {
     ...windowDimensionsPropTypes,
 
@@ -56,6 +102,22 @@ const propTypes = {
 
     /** Forwarded ref to FloatingActionButtonAndPopover */
     innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
+    /** Information on the last taken action to display as Quick Action */
+    quickAction: PropTypes.shape({
+        action: PropTypes.string,
+        chatReportID: PropTypes.string,
+        targetAccountID: PropTypes.number,
+        isFirstQuickAction: PropTypes.bool,
+    }),
+
+    /** Personal details of all the users */
+    personalDetails: personalDetailsPropType,
+
+    session: PropTypes.shape({
+        /** Currently logged in user accountID */
+        accountID: PropTypes.number,
+    }).isRequired,
 };
 const defaultProps = {
     onHideCreateMenu: () => {},
@@ -63,6 +125,8 @@ const defaultProps = {
     allPolicies: {},
     isLoading: false,
     innerRef: null,
+    quickAction: null,
+    personalDetails: {},
 };
 
 /**
@@ -80,6 +144,47 @@ function FloatingActionButtonAndPopover(props) {
 
     const prevIsFocused = usePrevious(props.isFocused);
 
+    const quickActionReport = useMemo(() => (props.quickAction ? ReportUtils.getReport(props.quickAction.chatReportID) : 0), [props.quickAction]);
+
+    const quickActionAvatars = useMemo(() => {
+        if (quickActionReport) {
+            const avatars = ReportUtils.getIcons(quickActionReport, props.personalDetails);
+            return avatars.length <= 1 || ReportUtils.isPolicyExpenseChat(quickActionReport) ? avatars : _.filter(avatars, (avatar) => avatar.id !== props.session.accountID);
+        }
+        return [];
+    }, [props.personalDetails, props.session.accountID, quickActionReport]);
+
+    const navigateToQuickAction = () => {
+        switch (props.quickAction.action) {
+            case CONST.QUICK_ACTIONS.REQUEST_MANUAL:
+                IOU.startMoneyRequest(CONST.IOU.TYPE.REQUEST, props.quickAction.chatReportID, CONST.IOU.REQUEST_TYPE.MANUAL);
+                return;
+            case CONST.QUICK_ACTIONS.REQUEST_SCAN:
+                IOU.startMoneyRequest(CONST.IOU.TYPE.REQUEST, props.quickAction.chatReportID, CONST.IOU.REQUEST_TYPE.SCAN);
+                return;
+            case CONST.QUICK_ACTIONS.REQUEST_DISTANCE:
+                IOU.startMoneyRequest(CONST.IOU.TYPE.REQUEST, props.quickAction.chatReportID, CONST.IOU.REQUEST_TYPE.DISTANCE);
+                return;
+            case CONST.QUICK_ACTIONS.SPLIT_MANUAL:
+                IOU.startMoneyRequest(CONST.IOU.TYPE.SPLIT, props.quickAction.chatReportID, CONST.IOU.REQUEST_TYPE.MANUAL);
+                return;
+            case CONST.QUICK_ACTIONS.SPLIT_SCAN:
+                IOU.startMoneyRequest(CONST.IOU.TYPE.SPLIT, props.quickAction.chatReportID, CONST.IOU.REQUEST_TYPE.SCAN);
+                return;
+            case CONST.QUICK_ACTIONS.SPLIT_DISTANCE:
+                IOU.startMoneyRequest(CONST.IOU.TYPE.SPLIT, props.quickAction.chatReportID, CONST.IOU.REQUEST_TYPE.DISTANCE);
+                return;
+            case CONST.QUICK_ACTIONS.SEND_MONEY:
+                IOU.startMoneyRequest(CONST.IOU.TYPE.SEND, props.quickAction.chatReportID);
+                return;
+            case CONST.QUICK_ACTIONS.ASSIGN_TASK:
+                Task.clearOutTaskInfoAndNavigate(props.quickAction.chatReportID, _.get(props.quickAction, 'targetAccountID', 0));
+                return;
+            default:
+                return '';
+        }
+    };
+
     /**
      * Check if LHN status changed from active to inactive.
      * Used to close already opened FAB menu when open any other pages (i.e. Press Command + K on web).
@@ -230,6 +335,22 @@ function FloatingActionButtonAndPopover(props) {
                               },
                           ]
                         : []),
+                    ...(props.quickAction
+                        ? [
+                              {
+                                  icon: getQuickActionIcon(props.quickAction.action),
+                                  text: translate(getQuickActionTitle(props.quickAction.action)),
+                                  label: translate('quickAction.shortcut'),
+                                  isLabelHoverable: false,
+                                  floatRightAvatars: quickActionAvatars,
+                                  floatRightAvatarSize: CONST.AVATAR_SIZE.SMALL,
+                                  description: ReportUtils.getReportName(quickActionReport),
+                                  numberOfLinesDescription: 1,
+                                  onSelected: () => interceptAnonymousUser(() => navigateToQuickAction()),
+                                  shouldShowSubscriptRightAvatar: ReportUtils.isPolicyExpenseChat(quickActionReport),
+                              },
+                          ]
+                        : []),
                 ]}
                 withoutOverlay
                 anchorRef={fabRef}
@@ -271,5 +392,14 @@ export default compose(
         isLoading: {
             key: ONYXKEYS.IS_LOADING_APP,
         },
+        quickAction: {
+            key: ONYXKEYS.NVP_QUICK_ACTION_GLOBAL_CREATE,
+        },
+        personalDetails: {
+            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+        },
+        session: {
+            key: ONYXKEYS.SESSION,
+        },
     }),
 )(FloatingActionButtonAndPopoverWithRef);
diff --git a/src/styles/utils/spacing.ts b/src/styles/utils/spacing.ts
index 740bf053c2d0..242d66a383f0 100644
--- a/src/styles/utils/spacing.ts
+++ b/src/styles/utils/spacing.ts
@@ -123,6 +123,10 @@ export default {
         marginRight: 32,
     },
 
+    mrn2: {
+        marginRight: -8,
+    },
+
     mrn5: {
         marginRight: -20,
     },
diff --git a/src/types/onyx/QuickAction.ts b/src/types/onyx/QuickAction.ts
index 6cf1af929a5c..0731d711afaa 100644
--- a/src/types/onyx/QuickAction.ts
+++ b/src/types/onyx/QuickAction.ts
@@ -6,7 +6,7 @@ type QuickAction = {
     action?: ValueOf<typeof CONST.QUICK_ACTIONS>;
 
     /** ID of the report */
-    reportID?: string;
+    chatReportID?: string;
 
     /** ID of the target account for task actions */
     targetAccountID?: number;
