diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalScreenOptions.ts b/src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalScreenOptions.ts
index 3c5ef1833835..460b0c732797 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalScreenOptions.ts
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalScreenOptions.ts
@@ -1,19 +1,32 @@
-import type {StackNavigationOptions} from '@react-navigation/stack';
+import type {StackCardInterpolationProps, StackNavigationOptions} from '@react-navigation/stack';
 import {CardStyleInterpolators} from '@react-navigation/stack';
 import {useMemo} from 'react';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import {isSafari} from '@libs/Browser';
+import createModalCardStyleInterpolator from '@navigation/AppNavigator/createModalCardStyleInterpolator';
 import type {ThemeStyles} from '@src/styles';
 
 function useModalScreenOptions(getScreenOptions?: (styles: ThemeStyles) => StackNavigationOptions) {
     const styles = useThemeStyles();
+    const styleUtils = useStyleUtils();
+    const {isSmallScreenWidth} = useWindowDimensions();
+
+    let cardStyleInterpolator = CardStyleInterpolators.forHorizontalIOS;
+
+    if (isSafari()) {
+        const customInterpolator = createModalCardStyleInterpolator(styleUtils);
+        cardStyleInterpolator = (props: StackCardInterpolationProps) => customInterpolator(isSmallScreenWidth, false, false, props);
+    }
 
     const defaultSubRouteOptions = useMemo(
         (): StackNavigationOptions => ({
             cardStyle: styles.navigationScreenCardStyle,
             headerShown: false,
-            cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
+            cardStyleInterpolator,
         }),
-        [styles],
+        [styles, cardStyleInterpolator],
     );
 
     return getScreenOptions?.(styles) ?? defaultSubRouteOptions;
diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx
index 05c23797fe0e..6b83c1997693 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx
+++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx
@@ -1,12 +1,15 @@
-import type {StackScreenProps} from '@react-navigation/stack';
+import type {StackCardInterpolationProps, StackScreenProps} from '@react-navigation/stack';
 import {createStackNavigator} from '@react-navigation/stack';
 import React, {useMemo, useRef} from 'react';
 import {View} from 'react-native';
 import NoDropZone from '@components/DragAndDrop/NoDropZone';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
+import {isSafari} from '@libs/Browser';
 import ModalNavigatorScreenOptions from '@libs/Navigation/AppNavigator/ModalNavigatorScreenOptions';
 import * as ModalStackNavigators from '@libs/Navigation/AppNavigator/ModalStackNavigators';
+import createModalCardStyleInterpolator from '@navigation/AppNavigator/createModalCardStyleInterpolator';
 import type {AuthScreensParamList, RightModalNavigatorParamList} from '@navigation/types';
 import NAVIGATORS from '@src/NAVIGATORS';
 import SCREENS from '@src/SCREENS';
@@ -18,9 +21,19 @@ const Stack = createStackNavigator<RightModalNavigatorParamList>();
 
 function RightModalNavigator({navigation}: RightModalNavigatorProps) {
     const styles = useThemeStyles();
+    const styleUtils = useStyleUtils();
     const {isSmallScreenWidth} = useWindowDimensions();
-    const screenOptions = useMemo(() => ModalNavigatorScreenOptions(styles), [styles]);
     const isExecutingRef = useRef<boolean>(false);
+    const screenOptions = useMemo(() => {
+        const options = ModalNavigatorScreenOptions(styles);
+        // The .forHorizontalIOS interpolator from `@react-navigation` is misbehaving on Safari, so we override it with Expensify custom interpolator
+        if (isSafari()) {
+            const customInterpolator = createModalCardStyleInterpolator(styleUtils);
+            options.cardStyleInterpolator = (props: StackCardInterpolationProps) => customInterpolator(isSmallScreenWidth, false, false, props);
+        }
+
+        return options;
+    }, [isSmallScreenWidth, styleUtils, styles]);
 
     return (
         <NoDropZone>