diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx
index befd415d1b17..1ea284b55280 100644
--- a/src/components/Modal/BaseModal.tsx
+++ b/src/components/Modal/BaseModal.tsx
@@ -8,7 +8,6 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
 import ComposerFocusManager from '@libs/ComposerFocusManager';
 import useNativeDriver from '@libs/useNativeDriver';
 import useTheme from '@styles/themes/useTheme';
-import getModalStyles from '@styles/ThemeStyleUtils/ModalStyleUtils';
 import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
@@ -134,9 +133,7 @@ function BaseModal(
         hideBackdrop,
     } = useMemo(
         () =>
-            getModalStyles(
-                theme,
-                styles,
+            StyleUtils.getModalStyles(
                 type,
                 {
                     windowWidth,
@@ -147,7 +144,7 @@ function BaseModal(
                 innerContainerStyle,
                 outerStyle,
             ),
-        [innerContainerStyle, isSmallScreenWidth, outerStyle, popoverAnchorPosition, theme, type, windowHeight, windowWidth, styles],
+        [StyleUtils, type, windowWidth, windowHeight, isSmallScreenWidth, popoverAnchorPosition, innerContainerStyle, outerStyle],
     );
 
     const {
diff --git a/src/components/PopoverWithoutOverlay/index.js b/src/components/PopoverWithoutOverlay/index.js
index 1aaf1fe01528..c13d9e1a0931 100644
--- a/src/components/PopoverWithoutOverlay/index.js
+++ b/src/components/PopoverWithoutOverlay/index.js
@@ -5,31 +5,27 @@ import {defaultProps, propTypes} from '@components/Popover/popoverPropTypes';
 import {PopoverContext} from '@components/PopoverProvider';
 import withWindowDimensions from '@components/withWindowDimensions';
 import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
-import useTheme from '@styles/themes/useTheme';
-import getModalStyles from '@styles/ThemeStyleUtils/ModalStyleUtils';
 import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import * as Modal from '@userActions/Modal';
 
 function Popover(props) {
-    const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {onOpen, close} = React.useContext(PopoverContext);
     const insets = useSafeAreaInsets();
-    const {modalStyle, modalContainerStyle, shouldAddTopSafeAreaMargin, shouldAddBottomSafeAreaMargin, shouldAddTopSafeAreaPadding, shouldAddBottomSafeAreaPadding} = getModalStyles(
-        theme,
-        styles,
-        'popover',
-        {
-            windowWidth: props.windowWidth,
-            windowHeight: props.windowHeight,
-            isSmallScreenWidth: false,
-        },
-        props.anchorPosition,
-        props.innerContainerStyle,
-        props.outerStyle,
-    );
+    const {modalStyle, modalContainerStyle, shouldAddTopSafeAreaMargin, shouldAddBottomSafeAreaMargin, shouldAddTopSafeAreaPadding, shouldAddBottomSafeAreaPadding} =
+        StyleUtils.getModalStyles(
+            'popover',
+            {
+                windowWidth: props.windowWidth,
+                windowHeight: props.windowHeight,
+                isSmallScreenWidth: false,
+            },
+            props.anchorPosition,
+            props.innerContainerStyle,
+            props.outerStyle,
+        );
 
     const {
         paddingTop: safeAreaPaddingTop,
diff --git a/src/components/Tooltip/TooltipRenderedOnPageBody.js b/src/components/Tooltip/TooltipRenderedOnPageBody.js
index d48ab620dead..10e82cc94c30 100644
--- a/src/components/Tooltip/TooltipRenderedOnPageBody.js
+++ b/src/components/Tooltip/TooltipRenderedOnPageBody.js
@@ -4,9 +4,7 @@ import ReactDOM from 'react-dom';
 import {Animated, View} from 'react-native';
 import Text from '@components/Text';
 import Log from '@libs/Log';
-import useTheme from '@styles/themes/useTheme';
-import getTooltipStyles from '@styles/ThemeStyleUtils/TooltipStyleUtils';
-import useThemeStyles from '@styles/useThemeStyles';
+import useStyleUtils from '@styles/useStyleUtils';
 
 const propTypes = {
     /** Window width */
@@ -84,8 +82,7 @@ function TooltipRenderedOnPageBody({
     const contentRef = useRef();
     const rootWrapper = useRef();
 
-    const theme = useTheme();
-    const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
 
     useEffect(() => {
         if (!renderTooltipContent || !text) {
@@ -103,7 +100,7 @@ function TooltipRenderedOnPageBody({
 
     const {animationStyle, rootWrapperStyle, textStyle, pointerWrapperStyle, pointerStyle} = useMemo(
         () =>
-            getTooltipStyles({
+            StyleUtils.getTooltipStyles({
                 tooltip: rootWrapper.current,
                 currentSize: animation,
                 windowWidth,
@@ -114,12 +111,10 @@ function TooltipRenderedOnPageBody({
                 maxWidth,
                 tooltipContentWidth: contentMeasuredWidth,
                 tooltipWrapperHeight: wrapperMeasuredHeight,
-                theme,
-                styles,
                 shiftHorizontal,
                 shiftVertical,
             }),
-        [animation, windowWidth, xOffset, yOffset, targetWidth, targetHeight, maxWidth, contentMeasuredWidth, wrapperMeasuredHeight, shiftHorizontal, shiftVertical, theme, styles],
+        [StyleUtils, animation, windowWidth, xOffset, yOffset, targetWidth, targetHeight, maxWidth, contentMeasuredWidth, wrapperMeasuredHeight, shiftHorizontal, shiftVertical],
     );
 
     let content;