diff --git a/packages/grafana-ui/src/components/Modal/Modal.tsx b/packages/grafana-ui/src/components/Modal/Modal.tsx
index 3f9308e4daf..f650278a294 100644
--- a/packages/grafana-ui/src/components/Modal/Modal.tsx
+++ b/packages/grafana-ui/src/components/Modal/Modal.tsx
@@ -1,5 +1,4 @@
 import React, { PropsWithChildren, useCallback, useEffect } from 'react';
-import { Portal } from '../Portal/Portal';
 import { cx } from '@emotion/css';
 import { useTheme2 } from '../../themes';
 import { IconName } from '../../types';
@@ -8,6 +7,7 @@ import { ModalHeader } from './ModalHeader';
 import { IconButton } from '../IconButton/IconButton';
 import { HorizontalGroup } from '../Layout/Layout';
 import { FocusScope } from '@react-aria/focus';
+import { OverlayContainer } from '@react-aria/overlays';
 
 export interface Props {
   /** @deprecated no longer used */
@@ -71,7 +71,7 @@ export function Modal(props: PropsWithChildren<Props>) {
   const headerClass = cx(styles.modalHeader, typeof title !== 'string' && styles.modalHeaderWithTabs);
 
   return (
-    <Portal>
+    <OverlayContainer>
       <div
         className={styles.modalBackdrop}
         onClick={onClickBackdrop || (closeOnBackdropClick ? onDismiss : undefined)}
@@ -88,7 +88,7 @@ export function Modal(props: PropsWithChildren<Props>) {
           <div className={cx(styles.modalContent, contentClassName)}>{children}</div>
         </div>
       </FocusScope>
-    </Portal>
+    </OverlayContainer>
   );
 }
 
diff --git a/packages/grafana-ui/src/components/Modal/getModalStyles.ts b/packages/grafana-ui/src/components/Modal/getModalStyles.ts
index de07b44210d..312c517baa0 100644
--- a/packages/grafana-ui/src/components/Modal/getModalStyles.ts
+++ b/packages/grafana-ui/src/components/Modal/getModalStyles.ts
@@ -28,6 +28,7 @@ export const getModalStyles = stylesFactory((theme: GrafanaTheme2) => {
     `,
     modalBackdrop: css`
       position: fixed;
+      z-index: ${theme.zIndex.modalBackdrop};
       top: 0;
       right: 0;
       bottom: 0;