diff --git a/src/components/DialogBeta/Handle.tsx b/src/components/DialogBeta/Handle.tsx
new file mode 100644
index 0000000000..0f24069538
--- /dev/null
+++ b/src/components/DialogBeta/Handle.tsx
@@ -0,0 +1,25 @@
+import { useIntl } from 'react-intl'
+
+import styles from './styles.module.css'
+
+interface HandleProps {
+  closeDialog: () => void
+}
+
+const Handle: React.FC<HandleProps> = ({ closeDialog, ...props }) => {
+  const intl = useIntl()
+
+  return (
+    <button
+      type="button"
+      className={styles.handle}
+      aria-label={intl.formatMessage({ defaultMessage: 'Close' })}
+      onClick={closeDialog}
+      {...props}
+    >
+      <span className={styles.icon} />
+    </button>
+  )
+}
+
+export default Handle
diff --git a/src/components/DialogBeta/index.tsx b/src/components/DialogBeta/index.tsx
index ee3adc4147..d48a183221 100644
--- a/src/components/DialogBeta/index.tsx
+++ b/src/components/DialogBeta/index.tsx
@@ -11,11 +11,11 @@ import { capitalizeFirstLetter, dom } from '~/common/utils'
 import { Media, useOutsideClick } from '~/components'
 
 import { RoundedButton, TextButton } from '../Dialog/Buttons'
-import Handle from '../Dialog/Handle'
 import Header from '../Dialog/Header'
 import Lazy from '../Dialog/Lazy'
 import Content from './Content'
 import Footer from './Footer'
+import Handle from './Handle'
 import styles from './styles.module.css'
 
 export interface DialogBetaOverlayProps {
diff --git a/src/components/DialogBeta/styles.module.css b/src/components/DialogBeta/styles.module.css
index a9f0440fab..c9d6b375f1 100644
--- a/src/components/DialogBeta/styles.module.css
+++ b/src/components/DialogBeta/styles.module.css
@@ -60,7 +60,7 @@
   position: absolute;
   top: 0;
   left: 50%;
-  z-index: var(--z-index-dialog);
+  z-index: calc(var(--z-index-dialog) + 1);
   padding: var(--spacing-x-tight);
   transform: translateX(-50%);