diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
index 022c740907ea..82a5045b7ad4 100644
--- a/src/components/Icon/index.tsx
+++ b/src/components/Icon/index.tsx
@@ -1,6 +1,6 @@
 import React, {PureComponent} from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
-import styles from '@styles/styles';
+import withThemeStyles, {ThemeStylesProps} from '@components/withThemeStyles';
 import * as StyleUtils from '@styles/StyleUtils';
 import themeColors from '@styles/themes/default';
 import variables from '@styles/variables';
@@ -41,7 +41,7 @@ type IconProps = {
 
     /** Additional styles to add to the Icon */
     additionalStyles?: StyleProp<ViewStyle>;
-};
+} & ThemeStylesProps;
 
 // We must use a class component to create an animatable component with the Animated API
 // eslint-disable-next-line react/prefer-stateless-function
@@ -61,13 +61,13 @@ class Icon extends PureComponent<IconProps> {
     render() {
         const width = this.props.small ? variables.iconSizeSmall : this.props.width;
         const height = this.props.small ? variables.iconSizeSmall : this.props.height;
-        const iconStyles = [StyleUtils.getWidthAndHeightStyle(width ?? 0, height), IconWrapperStyles, styles.pAbsolute, this.props.additionalStyles];
+        const iconStyles = [StyleUtils.getWidthAndHeightStyle(width ?? 0, height), IconWrapperStyles, this.props.themeStyles.pAbsolute, this.props.additionalStyles];
 
         if (this.props.inline) {
             return (
                 <View
                     testID={`${this.props.src.name} Icon`}
-                    style={[StyleUtils.getWidthAndHeightStyle(width ?? 0, height), styles.bgTransparent, styles.overflowVisible]}
+                    style={[StyleUtils.getWidthAndHeightStyle(width ?? 0, height), this.props.themeStyles.bgTransparent, this.props.themeStyles.overflowVisible]}
                 >
                     <View style={iconStyles}>
                         <this.props.src
@@ -99,4 +99,4 @@ class Icon extends PureComponent<IconProps> {
     }
 }
 
-export default Icon;
+export default withThemeStyles(Icon);
diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js
index 4e01ee4d7830..3b2de574ba17 100644
--- a/src/components/LHNOptionsList/OptionRowLHN.js
+++ b/src/components/LHNOptionsList/OptionRowLHN.js
@@ -103,7 +103,7 @@ function OptionRowLHN(props) {
         props.style,
     );
     const contentContainerStyles =
-        props.viewMode === CONST.OPTION_MODE.COMPACT ? [styles.flex1, styles.flexRow, styles.overflowHidden, optionRowStyles.compactContentContainerStyles] : [styles.flex1];
+        props.viewMode === CONST.OPTION_MODE.COMPACT ? [styles.flex1, styles.flexRow, styles.overflowHidden, optionRowStyles.compactContentContainerStyles(styles)] : [styles.flex1];
     const sidebarInnerRowStyle = StyleSheet.flatten(
         props.viewMode === CONST.OPTION_MODE.COMPACT
             ? [styles.chatLinkRowPressable, styles.flexGrow1, styles.optionItemAvatarNameWrapper, styles.optionRowCompact, styles.justifyContentCenter]
diff --git a/src/components/MultipleAvatars.tsx b/src/components/MultipleAvatars.tsx
index febe18f30c7d..6f15612736ef 100644
--- a/src/components/MultipleAvatars.tsx
+++ b/src/components/MultipleAvatars.tsx
@@ -2,9 +2,9 @@ import React, {memo, useMemo} from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
 import {ValueOf} from 'type-fest';
 import {AvatarSource} from '@libs/UserUtils';
-import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
-import themeColors from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import type {Icon} from '@src/types/onyx/OnyxCommon';
@@ -63,26 +63,11 @@ type AvatarSizeToStyles = typeof CONST.AVATAR_SIZE.SMALL | typeof CONST.AVATAR_S
 
 type AvatarSizeToStylesMap = Record<AvatarSizeToStyles, AvatarStyles>;
 
-const avatarSizeToStylesMap: AvatarSizeToStylesMap = {
-    [CONST.AVATAR_SIZE.SMALL]: {
-        singleAvatarStyle: styles.singleAvatarSmall,
-        secondAvatarStyles: styles.secondAvatarSmall,
-    },
-    [CONST.AVATAR_SIZE.LARGE]: {
-        singleAvatarStyle: styles.singleAvatarMedium,
-        secondAvatarStyles: styles.secondAvatarMedium,
-    },
-    [CONST.AVATAR_SIZE.DEFAULT]: {
-        singleAvatarStyle: styles.singleAvatar,
-        secondAvatarStyles: styles.secondAvatar,
-    },
-};
-
 function MultipleAvatars({
     fallbackIcon,
     icons = [],
     size = CONST.AVATAR_SIZE.DEFAULT,
-    secondAvatarStyle = [StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)],
+    secondAvatarStyle: secondAvatarStyleProp,
     shouldStackHorizontally = false,
     shouldDisplayAvatarsInRows = false,
     isHovered = false,
@@ -93,8 +78,31 @@ function MultipleAvatars({
     shouldUseCardBackground = false,
     maxAvatarsInRow = CONST.AVATAR_ROW_SIZE.DEFAULT,
 }: MultipleAvatarsProps) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+
+    const avatarSizeToStylesMap: AvatarSizeToStylesMap = useMemo(
+        () => ({
+            [CONST.AVATAR_SIZE.SMALL]: {
+                singleAvatarStyle: styles.singleAvatarSmall,
+                secondAvatarStyles: styles.secondAvatarSmall,
+            },
+            [CONST.AVATAR_SIZE.LARGE]: {
+                singleAvatarStyle: styles.singleAvatarMedium,
+                secondAvatarStyles: styles.secondAvatarMedium,
+            },
+            [CONST.AVATAR_SIZE.DEFAULT]: {
+                singleAvatarStyle: styles.singleAvatar,
+                secondAvatarStyles: styles.secondAvatar,
+            },
+        }),
+        [styles],
+    );
+
+    const secondAvatarStyle = secondAvatarStyleProp ?? [StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)];
+
     let avatarContainerStyles = StyleUtils.getContainerStyles(size, isInReportAction);
-    const {singleAvatarStyle, secondAvatarStyles} = useMemo(() => avatarSizeToStylesMap[size as AvatarSizeToStyles] ?? avatarSizeToStylesMap.default, [size]);
+    const {singleAvatarStyle, secondAvatarStyles} = useMemo(() => avatarSizeToStylesMap[size as AvatarSizeToStyles] ?? avatarSizeToStylesMap.default, [size, avatarSizeToStylesMap]);
 
     const tooltipTexts = useMemo(() => (shouldShowTooltip ? icons.map((icon) => icon.name) : ['']), [shouldShowTooltip, icons]);
     const avatarSize = useMemo(() => {
@@ -143,7 +151,7 @@ function MultipleAvatars({
                     <Avatar
                         source={icons[0].source}
                         size={size}
-                        fill={themeColors.iconSuccessFill}
+                        fill={theme.iconSuccessFill}
                         name={icons[0].name}
                         type={icons[0].type}
                         fallbackIcon={icons[0].fallbackIcon}
@@ -193,7 +201,7 @@ function MultipleAvatars({
                                             StyleUtils.getAvatarBorderWidth(size),
                                         ]}
                                         source={icon.source ?? fallbackIcon}
-                                        fill={themeColors.iconSuccessFill}
+                                        fill={theme.iconSuccessFill}
                                         size={size}
                                         name={icon.name}
                                         type={icon.type}
@@ -219,7 +227,7 @@ function MultipleAvatars({
                                         }),
 
                                         // Set overlay background color with RGBA value so that the text will not inherit opacity
-                                        StyleUtils.getBackgroundColorWithOpacityStyle(themeColors.overlay, variables.overlayOpacity),
+                                        StyleUtils.getBackgroundColorWithOpacityStyle(theme.overlay, variables.overlayOpacity),
                                         StyleUtils.getHorizontalStackedOverlayAvatarStyle(oneAvatarSize, oneAvatarBorderWidth),
                                         icons[3].type === CONST.ICON_TYPE_WORKSPACE ? StyleUtils.getAvatarBorderRadius(size, icons[3].type) : {},
                                     ]}
@@ -256,7 +264,7 @@ function MultipleAvatars({
                             <View>
                                 <Avatar
                                     source={icons[0].source ?? fallbackIcon}
-                                    fill={themeColors.iconSuccessFill}
+                                    fill={theme.iconSuccessFill}
                                     size={avatarSize}
                                     imageStyles={[singleAvatarStyle]}
                                     name={icons[0].name}
@@ -277,7 +285,7 @@ function MultipleAvatars({
                                     <View>
                                         <Avatar
                                             source={icons[1].source ?? fallbackIcon}
-                                            fill={themeColors.iconSuccessFill}
+                                            fill={theme.iconSuccessFill}
                                             size={avatarSize}
                                             imageStyles={[singleAvatarStyle]}
                                             name={icons[1].name}
diff --git a/src/components/OfflineWithFeedback.js b/src/components/OfflineWithFeedback.js
index ba893aeb2fe4..7a2dfbd2b6da 100644
--- a/src/components/OfflineWithFeedback.js
+++ b/src/components/OfflineWithFeedback.js
@@ -5,8 +5,8 @@ import _ from 'underscore';
 import useNetwork from '@hooks/useNetwork';
 import shouldRenderOffscreen from '@libs/shouldRenderOffscreen';
 import stylePropTypes from '@styles/stylePropTypes';
-import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
+import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import MessagesRow from './MessagesRow';
 
@@ -76,22 +76,24 @@ const defaultProps = {
 /**
  * This method applies the strikethrough to all the children passed recursively
  * @param {Array} children
+ * @param {Object} styles
  * @return {Array}
  */
-function applyStrikeThrough(children) {
+function applyStrikeThrough(children, styles) {
     return React.Children.map(children, (child) => {
         if (!React.isValidElement(child)) {
             return child;
         }
         const props = {style: StyleUtils.combineStyles(child.props.style, styles.offlineFeedback.deleted, styles.userSelectNone)};
         if (child.props.children) {
-            props.children = applyStrikeThrough(child.props.children);
+            props.children = applyStrikeThrough(child.props.children, styles);
         }
         return React.cloneElement(child, props);
     });
 }
 
 function OfflineWithFeedback(props) {
+    const styles = useThemeStyles();
     const {isOffline} = useNetwork();
 
     const hasErrors = !_.isEmpty(props.errors);
@@ -109,7 +111,7 @@ function OfflineWithFeedback(props) {
 
     // Apply strikethrough to children if needed, but skip it if we are not going to render them
     if (needsStrikeThrough && !hideChildren) {
-        children = applyStrikeThrough(children);
+        children = applyStrikeThrough(children, styles);
     }
     return (
         <View style={props.style}>
diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js
index be89132a0731..ba6a3067284f 100755
--- a/src/components/OptionsSelector/BaseOptionsSelector.js
+++ b/src/components/OptionsSelector/BaseOptionsSelector.js
@@ -16,13 +16,13 @@ import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withNavigationFocus from '@components/withNavigationFocus';
+import withTheme, {withThemePropTypes} from '@components/withTheme';
+import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeStyles';
 import compose from '@libs/compose';
 import getPlatform from '@libs/getPlatform';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
 import Navigation from '@libs/Navigation/Navigation';
 import setSelection from '@libs/setSelection';
-import colors from '@styles/colors';
-import styles from '@styles/styles';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import {defaultProps as optionsSelectorDefaultProps, propTypes as optionsSelectorPropTypes} from './optionsSelectorPropTypes';
@@ -51,6 +51,8 @@ const propTypes = {
 
     ...optionsSelectorPropTypes,
     ...withLocalizePropTypes,
+    ...withThemeStylesPropTypes,
+    ...withThemePropTypes,
 };
 
 const defaultProps = {
@@ -59,7 +61,7 @@ const defaultProps = {
     referralContentType: CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND,
     safeAreaPaddingBottomStyle: {},
     contentContainerStyles: [],
-    listContainerStyles: [styles.flex1],
+    listContainerStyles: undefined,
     listStyles: [],
     ...optionsSelectorDefaultProps,
 };
@@ -460,6 +462,8 @@ class BaseOptionsSelector extends Component {
         const defaultConfirmButtonText = _.isUndefined(this.props.confirmButtonText) ? this.props.translate('common.confirm') : this.props.confirmButtonText;
         const shouldShowDefaultConfirmButton = !this.props.footerContent && defaultConfirmButtonText;
         const safeAreaPaddingBottomStyle = shouldShowFooter ? undefined : this.props.safeAreaPaddingBottomStyle;
+        const listContainerStyles = this.props.listContainerStyles || [this.props.themeStyles.flex1];
+
         const textInput = (
             <TextInput
                 ref={(el) => (this.textInput = el)}
@@ -516,7 +520,7 @@ class BaseOptionsSelector extends Component {
                 }}
                 contentContainerStyles={[safeAreaPaddingBottomStyle, ...this.props.contentContainerStyles]}
                 sectionHeaderStyle={this.props.sectionHeaderStyle}
-                listContainerStyles={this.props.listContainerStyles}
+                listContainerStyles={listContainerStyles}
                 listStyles={this.props.listStyles}
                 isLoading={!this.props.shouldShowOptions}
                 showScrollIndicator={this.props.showScrollIndicator}
@@ -528,7 +532,7 @@ class BaseOptionsSelector extends Component {
                 renderFooterContent={() =>
                     shouldShowShowMoreButton && (
                         <ShowMoreButton
-                            containerStyle={{...styles.mt2, ...styles.mb5}}
+                            containerStyle={{...this.props.themeStyles.mt2, ...this.props.themeStyles.mb5}}
                             currentCount={CONST.MAX_OPTIONS_SELECTOR_PAGE_LENGTH * this.state.paginationPage}
                             totalCount={this.state.allOptions.length}
                             onPress={this.incrementPage}
@@ -540,8 +544,24 @@ class BaseOptionsSelector extends Component {
 
         const optionsAndInputsBelowThem = (
             <>
-                <View style={[styles.flexGrow0, styles.flexShrink1, styles.flexBasisAuto, styles.w100, styles.flexRow]}>{optionsList}</View>
-                <View style={this.props.shouldUseStyleForChildren ? [styles.ph5, styles.pv5, styles.flexGrow1, styles.flexShrink0] : []}>
+                <View
+                    style={[
+                        this.props.themeStyles.flexGrow0,
+                        this.props.themeStyles.flexShrink1,
+                        this.props.themeStyles.flexBasisAuto,
+                        this.props.themeStyles.w100,
+                        this.props.themeStyles.flexRow,
+                    ]}
+                >
+                    {optionsList}
+                </View>
+                <View
+                    style={
+                        this.props.shouldUseStyleForChildren
+                            ? [this.props.themeStyles.ph5, this.props.themeStyles.pv5, this.props.themeStyles.flexGrow1, this.props.themeStyles.flexShrink0]
+                            : []
+                    }
+                >
                     {this.props.children}
                     {this.props.shouldShowTextInput && textInput}
                 </View>
@@ -556,18 +576,18 @@ class BaseOptionsSelector extends Component {
                 onFocusedIndexChanged={this.props.disableArrowKeysActions ? () => {} : this.updateFocusedIndex}
                 shouldResetIndexOnEndReached={false}
             >
-                <View style={[styles.flexGrow1, styles.flexShrink1, styles.flexBasisAuto]}>
+                <View style={[this.props.themeStyles.flexGrow1, this.props.themeStyles.flexShrink1, this.props.themeStyles.flexBasisAuto]}>
                     {/*
                      * The OptionsList component uses a SectionList which uses a VirtualizedList internally.
                      * VirtualizedList cannot be directly nested within ScrollViews of the same orientation.
                      * To work around this, we wrap the OptionsList component with a horizontal ScrollView.
                      */}
                     {this.props.shouldTextInputAppearBelowOptions && this.props.shouldAllowScrollingChildren && (
-                        <ScrollView contentContainerStyle={[styles.flexGrow1]}>
+                        <ScrollView contentContainerStyle={[this.props.themeStyles.flexGrow1]}>
                             <ScrollView
                                 horizontal
                                 bounces={false}
-                                contentContainerStyle={[styles.flex1, styles.flexColumn]}
+                                contentContainerStyle={[this.props.themeStyles.flex1, this.props.themeStyles.flexColumn]}
                             >
                                 {optionsAndInputsBelowThem}
                             </ScrollView>
@@ -578,13 +598,13 @@ class BaseOptionsSelector extends Component {
 
                     {!this.props.shouldTextInputAppearBelowOptions && (
                         <>
-                            <View style={this.props.shouldUseStyleForChildren ? [styles.ph5, styles.pb3] : []}>
+                            <View style={this.props.shouldUseStyleForChildren ? [this.props.themeStyles.ph5, this.props.themeStyles.pb3] : []}>
                                 {this.props.children}
                                 {this.props.shouldShowTextInput && textInput}
                                 {Boolean(this.props.textInputAlert) && (
                                     <FormHelpMessage
                                         message={this.props.textInputAlert}
-                                        style={[styles.mb3]}
+                                        style={[this.props.themeStyles.mb3]}
                                         isError={false}
                                     />
                                 )}
@@ -594,20 +614,29 @@ class BaseOptionsSelector extends Component {
                     )}
                 </View>
                 {this.props.shouldShowReferralCTA && (
-                    <View style={[styles.ph5, styles.pb5, styles.flexShrink0]}>
+                    <View style={[this.props.themeStyles.ph5, this.props.themeStyles.pb5, this.props.themeStyles.flexShrink0]}>
                         <PressableWithoutFeedback
                             onPress={() => {
                                 Navigation.navigate(ROUTES.REFERRAL_DETAILS_MODAL.getRoute(this.props.referralContentType));
                             }}
-                            style={[styles.p5, styles.w100, styles.br2, styles.highlightBG, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, {gap: 10}]}
+                            style={[
+                                this.props.themeStyles.p5,
+                                this.props.themeStyles.w100,
+                                this.props.themeStyles.br2,
+                                this.props.themeStyles.highlightBG,
+                                this.props.themeStyles.flexRow,
+                                this.props.themeStyles.justifyContentBetween,
+                                this.props.themeStyles.alignItemsCenter,
+                                {gap: 10},
+                            ]}
                             accessibilityLabel="referral"
                             role={CONST.ACCESSIBILITY_ROLE.BUTTON}
                         >
                             <Text>
                                 {this.props.translate(`referralProgram.${this.props.referralContentType}.buttonText1`)}
                                 <Text
-                                    color={colors.green400}
-                                    style={styles.textStrong}
+                                    color={this.props.theme.success}
+                                    style={this.props.themeStyles.textStrong}
                                 >
                                     {this.props.translate(`referralProgram.${this.props.referralContentType}.buttonText2`)}
                                 </Text>
@@ -626,7 +655,7 @@ class BaseOptionsSelector extends Component {
                         {shouldShowDefaultConfirmButton && (
                             <Button
                                 success
-                                style={[styles.w100]}
+                                style={[this.props.themeStyles.w100]}
                                 text={defaultConfirmButtonText}
                                 onPress={this.props.onConfirmSelection}
                                 pressOnEnter
@@ -644,4 +673,4 @@ class BaseOptionsSelector extends Component {
 BaseOptionsSelector.defaultProps = defaultProps;
 BaseOptionsSelector.propTypes = propTypes;
 
-export default compose(withLocalize, withNavigationFocus)(BaseOptionsSelector);
+export default compose(withLocalize, withNavigationFocus, withThemeStyles, withTheme)(BaseOptionsSelector);
diff --git a/src/components/SelectCircle.tsx b/src/components/SelectCircle.tsx
index cf8ee6af975d..7a7e23388722 100644
--- a/src/components/SelectCircle.tsx
+++ b/src/components/SelectCircle.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {StyleProp, View, ViewStyle} from 'react-native';
-import globalStyles from '@styles/styles';
-import themeColors from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 
@@ -10,16 +10,19 @@ type SelectCircleProps = {
     isChecked: boolean;
 
     /** Additional styles to pass to SelectCircle */
-    styles?: StyleProp<ViewStyle>;
+    selectCircleStyles?: StyleProp<ViewStyle>;
 };
 
-function SelectCircle({isChecked = false, styles}: SelectCircleProps) {
+function SelectCircle({isChecked = false, selectCircleStyles}: SelectCircleProps) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+
     return (
-        <View style={[globalStyles.selectCircle, globalStyles.alignSelfCenter, styles]}>
+        <View style={[styles.selectCircle, styles.alignSelfCenter, selectCircleStyles]}>
             {isChecked && (
                 <Icon
                     src={Expensicons.Checkmark}
-                    fill={themeColors.iconSuccessFill}
+                    fill={theme.iconSuccessFill}
                 />
             )}
         </View>
diff --git a/src/components/SingleOptionSelector.js b/src/components/SingleOptionSelector.js
index 967ae5443a81..9567ad2331ef 100644
--- a/src/components/SingleOptionSelector.js
+++ b/src/components/SingleOptionSelector.js
@@ -51,7 +51,7 @@ function SingleOptionSelector({options, selectedOptionKey, onSelectOption, trans
                     >
                         <SelectCircle
                             isChecked={selectedOptionKey ? selectedOptionKey === option.key : false}
-                            styles={[styles.ml0, styles.singleOptionSelectorCircle]}
+                            selectCircleStyles={[styles.ml0, styles.singleOptionSelectorCircle]}
                         />
                         <Text>{translate(option.label)}</Text>
                     </PressableWithoutFeedback>
diff --git a/src/components/withThemeStyles.tsx b/src/components/withThemeStyles.tsx
index d95122c3e2ba..8ea55c5fbef8 100644
--- a/src/components/withThemeStyles.tsx
+++ b/src/components/withThemeStyles.tsx
@@ -29,4 +29,4 @@ export default function withThemeStyles<TProps extends ThemeStylesProps, TRef>(
     return forwardRef(WithThemeStyles);
 }
 
-export {withThemeStylesPropTypes};
+export {withThemeStylesPropTypes, type ThemeStylesProps};
diff --git a/src/styles/optionRowStyles/index.native.ts b/src/styles/optionRowStyles/index.native.ts
index 6198def8219a..334017ba3374 100644
--- a/src/styles/optionRowStyles/index.native.ts
+++ b/src/styles/optionRowStyles/index.native.ts
@@ -1,4 +1,3 @@
-import styles from '@styles/styles';
 import CompactContentContainerStyles from './types';
 
 /**
@@ -7,7 +6,7 @@ import CompactContentContainerStyles from './types';
  *  keeping compactContentContainerStyles as it is.
  *  https://github.com/Expensify/App/issues/14148
  */
-const compactContentContainerStyles: CompactContentContainerStyles = styles.alignItemsCenter;
+const compactContentContainerStyles: CompactContentContainerStyles = (styles) => styles.alignItemsCenter;
 
 export {
     // eslint-disable-next-line import/prefer-default-export
diff --git a/src/styles/optionRowStyles/index.ts b/src/styles/optionRowStyles/index.ts
index d0351be24553..ce8f542a13ca 100644
--- a/src/styles/optionRowStyles/index.ts
+++ b/src/styles/optionRowStyles/index.ts
@@ -1,7 +1,6 @@
-import styles from '@styles/styles';
 import CompactContentContainerStyles from './types';
 
-const compactContentContainerStyles: CompactContentContainerStyles = styles.alignItemsBaseline;
+const compactContentContainerStyles: CompactContentContainerStyles = (styles) => styles.alignItemsBaseline;
 
 export {
     // eslint-disable-next-line import/prefer-default-export
diff --git a/src/styles/optionRowStyles/types.ts b/src/styles/optionRowStyles/types.ts
index fcce41f6bc28..a9f9358521b8 100644
--- a/src/styles/optionRowStyles/types.ts
+++ b/src/styles/optionRowStyles/types.ts
@@ -1,5 +1,6 @@
 import {ViewStyle} from 'react-native';
+import styles from '@styles/styles';
 
-type CompactContentContainerStyles = ViewStyle;
+type CompactContentContainerStyles = (themeStyles: typeof styles) => ViewStyle;
 
 export default CompactContentContainerStyles;
