diff --git a/src/components/DatePicker/DatePickerModal.tsx b/src/components/DatePicker/DatePickerModal.tsx
index 561e0c6ea03..88f71d53cab 100644
--- a/src/components/DatePicker/DatePickerModal.tsx
+++ b/src/components/DatePicker/DatePickerModal.tsx
@@ -76,6 +76,7 @@ function DatePickerModal({
             shouldMeasureAnchorPositionFromTop={shouldPositionFromTop}
             shouldSkipRemeasurement
             forwardedFSClass={forwardedFSClass}
+            shouldDisplayBelowModals
         >
             <CalendarPicker
                 minDate={minDate}
diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx
index ad8cf581c5d..cf8cb8f6d2a 100644
--- a/src/components/Modal/BaseModal.tsx
+++ b/src/components/Modal/BaseModal.tsx
@@ -68,6 +68,7 @@ function BaseModal({
     shouldIgnoreBackHandlerDuringTransition = false,
     forwardedFSClass = CONST.FULLSTORY.CLASS.UNMASK,
     ref,
+    shouldDisplayBelowModals = false,
 }: BaseModalProps) {
     // When the `enableEdgeToEdgeBottomSafeAreaPadding` prop is explicitly set, we enable edge-to-edge mode.
     const isUsingEdgeToEdgeMode = enableEdgeToEdgeBottomSafeAreaPadding !== undefined;
@@ -241,6 +242,7 @@ function BaseModal({
                     modalOverlapsWithTopSafeArea,
                     shouldDisableBottomSafeAreaPadding: !!shouldDisableBottomSafeAreaPadding,
                 },
+                shouldDisplayBelowModals,
             ),
         [
             StyleUtils,
@@ -255,6 +257,7 @@ function BaseModal({
             shouldUseModalPaddingStyle,
             modalOverlapsWithTopSafeArea,
             shouldDisableBottomSafeAreaPadding,
+            shouldDisplayBelowModals,
         ],
     );
 
diff --git a/src/components/Modal/types.ts b/src/components/Modal/types.ts
index 2a112f6987e..4db73a9bd11 100644
--- a/src/components/Modal/types.ts
+++ b/src/components/Modal/types.ts
@@ -119,6 +119,11 @@ type BaseModalProps = Partial<ReanimatedModalProps> &
          * Reference to the outer element.
          */
         ref?: ForwardedRef<View>;
+
+        /**
+         * Whether the modal should display under the side panel.
+         */
+        shouldDisplayBelowModals?: boolean;
     };
 
 export default BaseModalProps;
diff --git a/src/components/Popover/types.ts b/src/components/Popover/types.ts
index 7f724e0c6d1..f7917bee6d7 100644
--- a/src/components/Popover/types.ts
+++ b/src/components/Popover/types.ts
@@ -35,6 +35,9 @@ type PopoverProps = BaseModalProps &
 
         /** Whether we should close when browser navigation change. This doesn't affect native platform */
         shouldCloseWhenBrowserNavigationChanged?: boolean;
+
+        /** Whether we should display the popover below other modals (e.g. SidePanel, RHP) */
+        shouldDisplayBelowModals?: boolean;
     };
 
 export default PopoverProps;
diff --git a/src/components/PopoverWithMeasuredContent/index.tsx b/src/components/PopoverWithMeasuredContent/index.tsx
index 99337b1b592..7cf5a65d088 100644
--- a/src/components/PopoverWithMeasuredContent/index.tsx
+++ b/src/components/PopoverWithMeasuredContent/index.tsx
@@ -11,7 +11,7 @@ import type PopoverWithMeasuredContentProps from './types';
  * This component is a perf optimization, it return BOTTOM_DOCKED early, for small screens avoiding Popover measurement logic calculations.
  * It defers rendering of PopoverWithMeasuredContentBase to idle time to avoid blocking more priority UI updates with measurements.
  */
-function PopoverWithMeasuredContent({...props}: PopoverWithMeasuredContentProps) {
+function PopoverWithMeasuredContent(props: PopoverWithMeasuredContentProps) {
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth} = useResponsiveLayout();
 
diff --git a/src/components/PopoverWithoutOverlay/index.tsx b/src/components/PopoverWithoutOverlay/index.tsx
index 8f84bfbbefa..9f7ecaa53d3 100644
--- a/src/components/PopoverWithoutOverlay/index.tsx
+++ b/src/components/PopoverWithoutOverlay/index.tsx
@@ -7,7 +7,7 @@ import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import {onModalDidClose, setCloseModal, willAlertModalBecomeVisible} from '@libs/actions/Modal';
-import variables from '@styles/variables';
+import CONST from '@src/CONST';
 import viewRef from '@src/types/utils/viewRef';
 import type PopoverWithoutOverlayProps from './types';
 
@@ -25,6 +25,7 @@ function PopoverWithoutOverlay({
     onModalHide = () => {},
     children,
     ref,
+    shouldDisplayBelowModals = false,
 }: PopoverWithoutOverlayProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -33,7 +34,7 @@ function PopoverWithoutOverlay({
     const insets = useSafeAreaInsets();
     const {modalStyle, modalContainerStyle, shouldAddTopSafeAreaMargin, shouldAddBottomSafeAreaMargin, shouldAddTopSafeAreaPadding, shouldAddBottomSafeAreaPadding} =
         StyleUtils.getModalStyles(
-            'popover',
+            CONST.MODAL.MODAL_TYPE.POPOVER,
             {
                 windowWidth,
                 windowHeight,
@@ -42,6 +43,7 @@ function PopoverWithoutOverlay({
             anchorPosition,
             innerContainerStyle,
             outerStyle,
+            shouldDisplayBelowModals,
         );
 
     useEffect(() => {
@@ -91,7 +93,7 @@ function PopoverWithoutOverlay({
 
     return (
         <View
-            style={[modalStyle, {zIndex: variables.popoverZIndex}]}
+            style={modalStyle}
             ref={viewRef(withoutOverlayRef)}
             // Prevent the parent element to capture a click. This is useful when the modal component is put inside a pressable.
             onClick={(e) => e.stopPropagation()}
diff --git a/src/components/PopoverWithoutOverlay/types.ts b/src/components/PopoverWithoutOverlay/types.ts
index d7009d8783e..afd8bc8a053 100644
--- a/src/components/PopoverWithoutOverlay/types.ts
+++ b/src/components/PopoverWithoutOverlay/types.ts
@@ -28,6 +28,9 @@ type PopoverWithoutOverlayProps = ChildrenProps &
 
         /** Reference to the outer element */
         ref?: ForwardedRef<View>;
+
+        /** Whether we should display the popover below other modals (e.g. SidePanel, RHP) */
+        shouldDisplayBelowModals?: boolean;
     };
 
 export default PopoverWithoutOverlayProps;
diff --git a/src/styles/utils/generators/ModalStyleUtils.ts b/src/styles/utils/generators/ModalStyleUtils.ts
index baa2bbb7fab..5c0082cf851 100644
--- a/src/styles/utils/generators/ModalStyleUtils.ts
+++ b/src/styles/utils/generators/ModalStyleUtils.ts
@@ -48,6 +48,7 @@ type GetModalStylesStyleUtil = {
             shouldDisableBottomSafeAreaPadding?: boolean;
             modalOverlapsWithTopSafeArea?: boolean;
         },
+        shouldDisplayBelowModals?: boolean,
     ) => GetModalStyles;
 };
 
@@ -60,6 +61,7 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
         outerStyle = {},
         shouldUseModalPaddingStyle = true,
         safeAreaOptions = {modalOverlapsWithTopSafeArea: false, shouldDisableBottomSafeAreaPadding: false},
+        shouldDisplayBelowModals = false,
     ): GetModalStyles => {
         const {windowWidth, isSmallScreenWidth} = windowDimensions;
 
@@ -222,6 +224,7 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
                     alignItems: 'center',
                     justifyContent: 'flex-end',
                     height: '100%',
+                    zIndex: shouldDisplayBelowModals ? variables.modalLowestZIndex : variables.modalBaseZIndex,
                 };
                 modalContainerStyle = {
                     width: '100%',
@@ -254,6 +257,7 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
                     position: 'absolute',
                     alignItems: 'center',
                     justifyContent: 'flex-end',
+                    zIndex: shouldDisplayBelowModals ? variables.modalLowestZIndex : variables.popoverZIndex,
                 };
                 modalContainerStyle = {
                     borderRadius: variables.componentBorderRadiusLarge,
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index e694e98f04e..c85cacbbff5 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -223,10 +223,11 @@ export default {
     reportActionImagesDoubleImageHeight: 138,
     reportActionImagesMultipleImageHeight: 110,
     reportActionItemImagesMoreCornerTriangleWidth: 40,
+    popoverZIndex: 10000,
     modalBaseZIndex: 9999,
     sidePanelZIndex: 9998,
     modalRightDockedZIndex: 9997,
-    popoverZIndex: 10000,
+    modalLowestZIndex: 9996,
     workspaceTypeIconWidth: 34,
     sectionMargin: 16,
     workspaceSectionMaxWidth: 680,