diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
index d1d34a171f..292d40f8b1 100644
--- a/src/components/Dialog/Dialog.tsx
+++ b/src/components/Dialog/Dialog.tsx
@@ -2,8 +2,8 @@
 
 import * as React from 'react';
 
-import {Modal} from '../Modal';
 import type {ModalCloseReason, ModalProps} from '../Modal';
+import {Modal} from '../Modal';
 import type {AriaLabelingProps, QAProps} from '../types';
 import {block} from '../utils/cn';
 import {filterDOMProps} from '../utils/filterDOMProps';
@@ -13,8 +13,8 @@ import {DialogBody} from './DialogBody/DialogBody';
 import {DialogDivider} from './DialogDivider/DialogDivider';
 import {DialogFooter} from './DialogFooter/DialogFooter';
 import {DialogHeader} from './DialogHeader/DialogHeader';
-import {DialogPrivateContext} from './DialogPrivateContext';
 import type {DialogPrivateContextProps} from './DialogPrivateContext';
+import {DialogPrivateContext} from './DialogPrivateContext';
 
 import './Dialog.scss';
 
@@ -148,11 +148,11 @@ export function Dialog({
                     className,
                 )}
             >
+                {hasCloseButton && <ButtonClose onClose={handleCloseButtonClick} />}
+
                 <DialogPrivateContext.Provider value={privateContextProps}>
                     {children}
                 </DialogPrivateContext.Provider>
-
-                {hasCloseButton && <ButtonClose onClose={handleCloseButtonClick} />}
             </div>
         </Modal>
     );
diff --git a/src/components/Dialog/DialogHeader/DialogHeader.tsx b/src/components/Dialog/DialogHeader/DialogHeader.tsx
index 5e6438922e..32d435f23b 100644
--- a/src/components/Dialog/DialogHeader/DialogHeader.tsx
+++ b/src/components/Dialog/DialogHeader/DialogHeader.tsx
@@ -1,5 +1,6 @@
 import type * as React from 'react';
 
+import {Text} from '../../Text';
 import {block} from '../../utils/cn';
 
 import './DialogHeader.scss';
@@ -11,18 +12,19 @@ export interface DialogHeaderProps {
     insertBefore?: React.ReactNode;
     insertAfter?: React.ReactNode;
     className?: string;
+    as?: React.ElementType;
     id?: string;
 }
 
 export function DialogHeader(props: DialogHeaderProps) {
-    const {caption = '', insertBefore, insertAfter, className, id} = props;
+    const {caption = '', as = 'div', insertBefore, insertAfter, className, id} = props;
 
     return (
         <div className={b(null, className)}>
             {insertBefore}
-            <div className={b('caption')} id={id}>
+            <Text as={as} variant="subheader-3" className={b('caption')} id={id}>
                 {caption}
-            </div>
+            </Text>
             {insertAfter}
         </div>
     );