diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx
index 71845931ba52..0290d7bfda98 100644
--- a/src/components/SelectionList/BaseListItem.tsx
+++ b/src/components/SelectionList/BaseListItem.tsx
@@ -63,77 +63,83 @@ function BaseListItem<TItem extends User | RadioItem>({
                 onMouseDown={shouldPreventDefaultFocusOnSelectRow ? (e) => e.preventDefault() : undefined}
                 nativeID={keyForList}
             >
-                <View
-                    style={[
-                        styles.flex1,
-                        styles.justifyContentBetween,
-                        styles.sidebarLinkInner,
-                        styles.userSelectNone,
-                        isUserItem ? styles.peopleRow : styles.optionRow,
-                        isFocused && styles.sidebarLinkActive,
-                    ]}
-                >
-                    {canSelectMultiple && (
+                {({hovered}) => (
+                    <>
                         <View
-                            role={CONST.ACCESSIBILITY_ROLE.BUTTON}
-                            style={StyleUtils.getCheckboxPressableStyle()}
+                            style={[
+                                styles.flex1,
+                                styles.justifyContentBetween,
+                                styles.sidebarLinkInner,
+                                styles.userSelectNone,
+                                isUserItem ? styles.peopleRow : styles.optionRow,
+                                isFocused && styles.sidebarLinkActive,
+                            ]}
                         >
-                            <View
-                                style={[
-                                    StyleUtils.getCheckboxContainerStyle(20),
-                                    styles.mr3,
-                                    item.isSelected && styles.checkedContainer,
-                                    item.isSelected && styles.borderColorFocus,
-                                    item.isDisabled && styles.cursorDisabled,
-                                    item.isDisabled && styles.buttonOpacityDisabled,
-                                ]}
-                            >
-                                {item.isSelected && (
-                                    <Icon
-                                        src={Expensicons.Checkmark}
-                                        fill={theme.textLight}
-                                        height={14}
-                                        width={14}
-                                    />
-                                )}
-                            </View>
-                        </View>
-                    )}
+                            {canSelectMultiple && (
+                                <View
+                                    role={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                                    style={StyleUtils.getCheckboxPressableStyle()}
+                                >
+                                    <View
+                                        style={[
+                                            StyleUtils.getCheckboxContainerStyle(20),
+                                            styles.mr3,
+                                            item.isSelected && styles.checkedContainer,
+                                            item.isSelected && styles.borderColorFocus,
+                                            item.isDisabled && styles.cursorDisabled,
+                                            item.isDisabled && styles.buttonOpacityDisabled,
+                                        ]}
+                                    >
+                                        {item.isSelected && (
+                                            <Icon
+                                                src={Expensicons.Checkmark}
+                                                fill={theme.textLight}
+                                                height={14}
+                                                width={14}
+                                            />
+                                        )}
+                                    </View>
+                                </View>
+                            )}
 
-                    <ListItem
-                        item={item}
-                        textStyles={[
-                            styles.optionDisplayName,
-                            isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
-                            styles.sidebarLinkTextBold,
-                            styles.pre,
-                            item.alternateText ? styles.mb1 : null,
-                        ]}
-                        alternateTextStyles={[styles.textLabelSupporting, styles.lh16, styles.pre]}
-                        isDisabled={isDisabled}
-                        onSelectRow={() => onSelectRow(item)}
-                        showTooltip={showTooltip}
-                    />
+                            <ListItem
+                                item={item}
+                                textStyles={[
+                                    styles.optionDisplayName,
+                                    isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
+                                    styles.sidebarLinkTextBold,
+                                    styles.pre,
+                                    item.alternateText ? styles.mb1 : null,
+                                ]}
+                                alternateTextStyles={[styles.textLabelSupporting, styles.lh16, styles.pre]}
+                                isDisabled={isDisabled}
+                                onSelectRow={() => onSelectRow(item)}
+                                showTooltip={showTooltip}
+                                isFocused={isFocused}
+                                isHovered={hovered}
+                            />
 
-                    {!canSelectMultiple && item.isSelected && !rightHandSideComponent && (
-                        <View
-                            style={[styles.flexRow, styles.alignItemsCenter, styles.ml3]}
-                            accessible={false}
-                        >
-                            <View>
-                                <Icon
-                                    src={Expensicons.Checkmark}
-                                    fill={theme.success}
-                                />
-                            </View>
+                            {!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()}
                         </View>
-                    )}
-                    {rightHandSideComponentRender()}
-                </View>
-                {isUserItem && item.invitedSecondaryLogin && (
-                    <Text style={[styles.ml9, styles.ph5, styles.pb3, styles.textLabelSupporting]}>
-                        {translate('workspace.people.invitedBySecondaryLogin', {secondaryLogin: item.invitedSecondaryLogin})}
-                    </Text>
+                        {isUserItem && item.invitedSecondaryLogin && (
+                            <Text style={[styles.ml9, styles.ph5, styles.pb3, styles.textLabelSupporting]}>
+                                {translate('workspace.people.invitedBySecondaryLogin', {secondaryLogin: item.invitedSecondaryLogin})}
+                            </Text>
+                        )}
+                    </>
                 )}
             </PressableWithFeedback>
         </OfflineWithFeedback>
diff --git a/src/components/SelectionList/UserListItem.tsx b/src/components/SelectionList/UserListItem.tsx
index fede09c1b435..f48f9e04077a 100644
--- a/src/components/SelectionList/UserListItem.tsx
+++ b/src/components/SelectionList/UserListItem.tsx
@@ -1,20 +1,45 @@
 import React from 'react';
 import {View} from 'react-native';
+import MultipleAvatars from '@components/MultipleAvatars';
 import SubscriptAvatar from '@components/SubscriptAvatar';
 import TextWithTooltip from '@components/TextWithTooltip';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {UserListItemProps} from './types';
 
-function UserListItem({item, textStyles, alternateTextStyles, showTooltip, style}: UserListItemProps) {
+function UserListItem({item, textStyles, alternateTextStyles, showTooltip, style, isFocused, isHovered}: UserListItemProps) {
     const styles = useThemeStyles();
+    const theme = useTheme();
+    const StyleUtils = useStyleUtils();
+
+    const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
+    const subscriptAvatarBorderColor = isFocused ? focusedBackgroundColor : theme.sidebar;
+    const hoveredBackgroundColor = !!styles.sidebarLinkHover && 'backgroundColor' in styles.sidebarLinkHover ? styles.sidebarLinkHover.backgroundColor : theme.sidebar;
+
     return (
         <>
             {!!item.icons && (
-                <SubscriptAvatar
-                    mainAvatar={item.icons[0]}
-                    secondaryAvatar={item.icons[1]}
-                    showTooltip={showTooltip}
-                />
+                <>
+                    {item.shouldShowSubscript ? (
+                        <SubscriptAvatar
+                            mainAvatar={item.icons[0]}
+                            secondaryAvatar={item.icons[1]}
+                            showTooltip={showTooltip}
+                            backgroundColor={isHovered && !isFocused ? hoveredBackgroundColor : subscriptAvatarBorderColor}
+                        />
+                    ) : (
+                        <MultipleAvatars
+                            icons={item.icons ?? []}
+                            shouldShowTooltip={showTooltip}
+                            secondAvatarStyle={[
+                                StyleUtils.getBackgroundAndBorderStyle(theme.sidebar),
+                                isFocused ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor) : undefined,
+                                isHovered && !isFocused ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor) : undefined,
+                            ]}
+                        />
+                    )}
+                </>
             )}
             <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch, styles.optionRow]}>
                 <TextWithTooltip
diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
index be871971ee92..c2aabc7b5057 100644
--- a/src/components/SelectionList/types.ts
+++ b/src/components/SelectionList/types.ts
@@ -73,6 +73,9 @@ type User = {
 
     /** Represents the index of the option within the section it came from */
     index?: number;
+
+    /** Whether this option should show subscript */
+    shouldShowSubscript?: boolean;
 };
 
 type UserListItemProps = CommonListItemProps<User> & {
@@ -81,6 +84,9 @@ type UserListItemProps = CommonListItemProps<User> & {
 
     /** Additional styles to apply to text */
     style?: StyleProp<TextStyle>;
+
+    /** Is item hovered */
+    isHovered?: boolean;
 };
 
 type RadioItem = {