diff --git a/.changeset/tall-trainers-approve.md b/.changeset/tall-trainers-approve.md
new file mode 100644
index 00000000000..0d5b09d00a6
--- /dev/null
+++ b/.changeset/tall-trainers-approve.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Modals in the Dashboard have been aligned, so that all contains close button
diff --git a/src/apps/components/AppDialog/AppDialog.tsx b/src/apps/components/AppDialog/AppDialog.tsx
index c79af3ad4b5..f7991d6da8a 100644
--- a/src/apps/components/AppDialog/AppDialog.tsx
+++ b/src/apps/components/AppDialog/AppDialog.tsx
@@ -12,15 +12,7 @@ export const AppDialog: React.FC<AppDialogProps> = ({ children, title, onClose,
   return (
     <DashboardModal aria-labelledby="extension app dialog" {...props} onChange={onClose}>
       <DashboardModal.Content size="lg">
-        <DashboardModal.Title
-          display="flex"
-          justifyContent="space-between"
-          alignItems="center"
-          as="h2"
-        >
-          {title}
-          <DashboardModal.Close onClose={onClose}></DashboardModal.Close>
-        </DashboardModal.Title>
+        <DashboardModal.Header as="h2">{title}</DashboardModal.Header>
         <Box width="100%" __height={600}>
           {children}
         </Box>
diff --git a/src/apps/components/AppPermissionsDialog/AppPermissionsDialog.tsx b/src/apps/components/AppPermissionsDialog/AppPermissionsDialog.tsx
index ae22228eb7c..b645ef21db9 100644
--- a/src/apps/components/AppPermissionsDialog/AppPermissionsDialog.tsx
+++ b/src/apps/components/AppPermissionsDialog/AppPermissionsDialog.tsx
@@ -111,7 +111,7 @@ export const AppPermissionsDialog = ({
   return (
     <DashboardModal open={true} onChange={onClose}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Title>{formatMessage(messages.heading)}</DashboardModal.Title>
+        <DashboardModal.Header>{formatMessage(messages.heading)}</DashboardModal.Header>
         <Box display={"grid"} gridAutoFlow={"row"}>
           <Text as={"p"}>{formatMessage(messages.info)}</Text>
           <Box
diff --git a/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx b/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx
index d15683b48c9..bd473d98b19 100644
--- a/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx
+++ b/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx
@@ -52,7 +52,7 @@ const AttributeValueEditDialog: React.FC<AttributeValueEditDialogProps> = ({
         <Form initial={initialForm} onSubmit={onSubmit}>
           {({ errors, set, change, clearErrors, setError, data, submit }) => (
             <DashboardModal.Grid>
-              <DashboardModal.Title>
+              <DashboardModal.Header>
                 {attributeValue === null ? (
                   <FormattedMessage
                     id="PqMbma"
@@ -66,7 +66,7 @@ const AttributeValueEditDialog: React.FC<AttributeValueEditDialogProps> = ({
                     description="edit attribute value"
                   />
                 )}
-              </DashboardModal.Title>
+              </DashboardModal.Header>
 
               <TextField
                 data-test-id="value-name"
diff --git a/src/components/ActionDialog/ActionDialog.tsx b/src/components/ActionDialog/ActionDialog.tsx
index 396ff400014..67e1791976b 100644
--- a/src/components/ActionDialog/ActionDialog.tsx
+++ b/src/components/ActionDialog/ActionDialog.tsx
@@ -39,7 +39,7 @@ const ActionDialog = ({
   return (
     <DashboardModal onChange={onClose} open={open}>
       <DashboardModal.Content size={size}>
-        <DashboardModal.Title>{title}</DashboardModal.Title>
+        <DashboardModal.Header>{title}</DashboardModal.Header>
         <Box fontSize={3}>{children}</Box>
         <DashboardModal.Actions>
           <BackButton onClick={onClose}>{backButtonText}</BackButton>
diff --git a/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx b/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx
index 68d52fac640..b6acf1c2910 100644
--- a/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx
+++ b/src/components/AssignAttributeDialog/AssignAttributeDialog.tsx
@@ -82,9 +82,9 @@ const AssignAttributeDialog: React.FC<AssignAttributeDialogProps> = ({
   return (
     <DashboardModal onChange={onClose} open={open}>
       <DashboardModal.Content size="sm" __gridTemplateRows="auto auto 1fr auto auto">
-        <DashboardModal.Title>
+        <DashboardModal.Header>
           <FormattedMessage {...messages.title} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <TextField
           data-test-id="attribute-search-input"
diff --git a/src/components/AssignContainerDialog/AssignContainerDialog.tsx b/src/components/AssignContainerDialog/AssignContainerDialog.tsx
index 5915a0fa8ac..24ebe0dc2a9 100644
--- a/src/components/AssignContainerDialog/AssignContainerDialog.tsx
+++ b/src/components/AssignContainerDialog/AssignContainerDialog.tsx
@@ -75,7 +75,7 @@ const AssignContainerDialog: React.FC<AssignContainerDialogProps> = props => {
   return (
     <DashboardModal onChange={handleClose} open={open}>
       <DashboardModal.Content size="sm" __gridTemplateRows="auto auto 1fr auto">
-        <DashboardModal.Title>{labels.title}</DashboardModal.Title>
+        <DashboardModal.Header>{labels.title}</DashboardModal.Header>
 
         <TextField
           name="query"
diff --git a/src/components/AssignProductDialog/AssignProductDialog.tsx b/src/components/AssignProductDialog/AssignProductDialog.tsx
index 967a55f2bb0..2bf629c5c71 100644
--- a/src/components/AssignProductDialog/AssignProductDialog.tsx
+++ b/src/components/AssignProductDialog/AssignProductDialog.tsx
@@ -107,9 +107,9 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
   return (
     <DashboardModal onChange={handleClose} open={open}>
       <DashboardModal.Content size="sm" __gridTemplateRows="auto auto 1fr auto">
-        <DashboardModal.Title>
+        <DashboardModal.Header>
           <FormattedMessage {...messages.assignVariantDialogHeader} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <TextField
           name="query"
diff --git a/src/components/AssignVariantDialog/AssignVariantDialog.tsx b/src/components/AssignVariantDialog/AssignVariantDialog.tsx
index 16b6583a26d..3481aa04096 100644
--- a/src/components/AssignVariantDialog/AssignVariantDialog.tsx
+++ b/src/components/AssignVariantDialog/AssignVariantDialog.tsx
@@ -84,9 +84,9 @@ const AssignVariantDialog: React.FC<AssignVariantDialogProps> = props => {
   return (
     <DashboardModal onChange={handleClose} open={open}>
       <DashboardModal.Content size="sm" __gridTemplateRows="auto auto 1fr auto">
-        <DashboardModal.Title>
+        <DashboardModal.Header>
           <FormattedMessage {...messages.assignVariantDialogHeader} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <TextField
           name="query"
diff --git a/src/components/DevModePanel/DevModePanel.tsx b/src/components/DevModePanel/DevModePanel.tsx
index 3bf057ddb73..f7ca6627d62 100644
--- a/src/components/DevModePanel/DevModePanel.tsx
+++ b/src/components/DevModePanel/DevModePanel.tsx
@@ -36,10 +36,7 @@ export const DevModePanel: React.FC = () => {
     <DashboardModal open={isDevModeVisible} onChange={() => setDevModeVisibility(false)}>
       <DashboardModal.Content size="xl" __gridTemplateRows="auto 1fr" height="100%">
         <style dangerouslySetInnerHTML={overwriteCodeMirrorCSSVariables}></style>
-        <DashboardModal.Title display="flex" justifyContent="space-between">
-          {intl.formatMessage(messages.title)}
-          <DashboardModal.Close onClose={() => setDevModeVisibility(false)} />
-        </DashboardModal.Title>
+        <DashboardModal.Header>{intl.formatMessage(messages.title)}</DashboardModal.Header>
 
         <PlainGraphiQL query={devModeContent} variables={variables} fetcher={fetcher} />
       </DashboardModal.Content>
diff --git a/src/components/DryRun/DryRun.tsx b/src/components/DryRun/DryRun.tsx
index f3965f02d8c..56346ff84e1 100644
--- a/src/components/DryRun/DryRun.tsx
+++ b/src/components/DryRun/DryRun.tsx
@@ -69,10 +69,7 @@ const DryRun: React.FC<DryRunProps> = ({
     return (
       <DashboardModal onChange={closeDialog} open={showDialog}>
         <DashboardModal.Content size="lg" data-test-id="dry-run">
-          <DashboardModal.Title display="flex" justifyContent="space-between">
-            {intl.formatMessage(messages.header)}
-            <DashboardModal.Close onClose={closeDialog} />
-          </DashboardModal.Title>
+          <DashboardModal.Header>{intl.formatMessage(messages.header)}</DashboardModal.Header>
 
           <Alert variant="error" close={false}>
             <Text>{intl.formatMessage(messages.unavailableSyncEvents)}</Text>
@@ -85,10 +82,7 @@ const DryRun: React.FC<DryRunProps> = ({
   return (
     <DashboardModal onChange={closeDialog} open={showDialog}>
       <DashboardModal.Content size="lg" data-test-id="dry-run">
-        <DashboardModal.Title display="flex" justifyContent="space-between">
-          {intl.formatMessage(messages.header)}
-          <DashboardModal.Close onClose={closeDialog} />
-        </DashboardModal.Title>
+        <DashboardModal.Header>{intl.formatMessage(messages.header)}</DashboardModal.Header>
 
         <Text>{intl.formatMessage(messages.selectObject)}</Text>
 
diff --git a/src/components/Form/ExitFormDialog.tsx b/src/components/Form/ExitFormDialog.tsx
index 1589fc605b5..f31590aad3c 100644
--- a/src/components/Form/ExitFormDialog.tsx
+++ b/src/components/Form/ExitFormDialog.tsx
@@ -18,10 +18,9 @@ const ExitFormDialog: React.FC<ExitFormDialogProps> = ({ onLeave, onClose, isOpe
   return (
     <DashboardModal open={isOpen} onChange={onClose}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Title display="flex" justifyContent="space-between">
+        <DashboardModal.Header>
           {intl.formatMessage(messages.unableToSaveTitle)}
-          <DashboardModal.Close onClose={onClose} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <DashboardModal.Actions>
           <BackButton onClick={onClose}>{intl.formatMessage(messages.keepEditing)}</BackButton>
diff --git a/src/components/Modal/Header.tsx b/src/components/Modal/Header.tsx
new file mode 100644
index 00000000000..f9c54336d48
--- /dev/null
+++ b/src/components/Modal/Header.tsx
@@ -0,0 +1,21 @@
+import { useModalContext } from "@dashboard/components/Modal/context";
+import { Box } from "@saleor/macaw-ui-next";
+import React, { ReactNode } from "react";
+
+import { Close } from "./Close";
+import { Title, TitleProps } from "./Title";
+
+interface HeaderProps extends TitleProps {
+  children: ReactNode;
+}
+
+export const Header = ({ children, ...rest }: HeaderProps) => {
+  const { onChange } = useModalContext();
+
+  return (
+    <Box display="flex" justifyContent="space-between">
+      <Title {...rest}>{children}</Title>
+      <Close onClose={() => onChange?.(false)} />
+    </Box>
+  );
+};
diff --git a/src/components/Modal/Root.tsx b/src/components/Modal/Root.tsx
index 3b423af088b..cd05e5b0cba 100644
--- a/src/components/Modal/Root.tsx
+++ b/src/components/Modal/Root.tsx
@@ -1,6 +1,15 @@
+import { ModalContextProvider } from "@dashboard/components/Modal/context";
 import { Modal, ModalRootProps } from "@saleor/macaw-ui-next";
 import React from "react";
 
-export const Root = ({ children, ...rest }: ModalRootProps) => {
-  return <Modal {...rest}>{children}</Modal>;
+type RootProps = ModalRootProps;
+
+export const Root = ({ children, onChange, open, ...rest }: RootProps) => {
+  return (
+    <ModalContextProvider onChange={onChange} open={open}>
+      <Modal onChange={onChange} open={open} {...rest}>
+        {children}
+      </Modal>
+    </ModalContextProvider>
+  );
 };
diff --git a/src/components/Modal/Title.tsx b/src/components/Modal/Title.tsx
index 6d335727c6c..c3f34418ca0 100644
--- a/src/components/Modal/Title.tsx
+++ b/src/components/Modal/Title.tsx
@@ -1,7 +1,7 @@
 import { Text, TextProps } from "@saleor/macaw-ui-next";
 import React, { ReactNode } from "react";
 
-interface TitleProps extends TextProps {
+export interface TitleProps extends TextProps {
   children: ReactNode;
 }
 
diff --git a/src/components/Modal/context.tsx b/src/components/Modal/context.tsx
new file mode 100644
index 00000000000..60bc8692c7b
--- /dev/null
+++ b/src/components/Modal/context.tsx
@@ -0,0 +1,30 @@
+import React, { createContext } from "react";
+
+interface ModalContextValues {
+  open?: boolean;
+  onChange?: (open: boolean) => void;
+}
+
+const ModalContext = createContext<ModalContextValues | null>(null);
+
+export const ModalContextProvider = ({
+  children,
+  onChange,
+  open,
+}: {
+  children: React.ReactNode;
+  onChange?: (open: boolean) => void;
+  open?: boolean;
+}) => {
+  return <ModalContext.Provider value={{ open, onChange }}>{children}</ModalContext.Provider>;
+};
+
+export const useModalContext = () => {
+  const context = React.useContext(ModalContext);
+
+  if (!context) {
+    throw new Error("useModalContext must be used within a ModalContextProvider");
+  }
+
+  return context;
+};
diff --git a/src/components/Modal/index.ts b/src/components/Modal/index.ts
index fbcb28fd223..0a2cf217007 100644
--- a/src/components/Modal/index.ts
+++ b/src/components/Modal/index.ts
@@ -2,6 +2,7 @@ import { Actions } from "./Actions";
 import { Close } from "./Close";
 import { Content, ContentSize } from "./Content";
 import { Grid } from "./Grid";
+import { Header } from "./Header";
 import { Root } from "./Root";
 import { Title } from "./Title";
 
@@ -13,4 +14,5 @@ export const DashboardModal = Object.assign(Root, {
   Actions,
   Close,
   Grid,
+  Header,
 });
diff --git a/src/components/SaveFilterTabDialog/SaveFilterTabDialog.tsx b/src/components/SaveFilterTabDialog/SaveFilterTabDialog.tsx
index 10ad42860ce..4fa000981f1 100644
--- a/src/components/SaveFilterTabDialog/SaveFilterTabDialog.tsx
+++ b/src/components/SaveFilterTabDialog/SaveFilterTabDialog.tsx
@@ -47,13 +47,13 @@ const SaveFilterTabDialog: React.FC<SaveFilterTabDialogProps> = ({
         <Form initial={initialForm} onSubmit={handleErrors}>
           {({ change, data, submit }) => (
             <DashboardModal.Grid>
-              <DashboardModal.Title>
+              <DashboardModal.Header>
                 <FormattedMessage
                   id="P9YktI"
                   defaultMessage="Save view preset"
                   description="save preset, header"
                 />
-              </DashboardModal.Title>
+              </DashboardModal.Header>
 
               <TextField
                 autoFocus
diff --git a/src/components/TypeDeleteWarningDialog/TypeDeleteWarningDialog.tsx b/src/components/TypeDeleteWarningDialog/TypeDeleteWarningDialog.tsx
index 97f8b536d49..8c0347f77a5 100644
--- a/src/components/TypeDeleteWarningDialog/TypeDeleteWarningDialog.tsx
+++ b/src/components/TypeDeleteWarningDialog/TypeDeleteWarningDialog.tsx
@@ -86,13 +86,11 @@ function TypeDeleteWarningDialog<T extends TypeBaseData>({
   return (
     <DashboardModal open={isOpen} onChange={onClose}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Title display="flex" justifyContent="space-between" alignItems="center">
+        <DashboardModal.Header>
           {intl.formatMessage(baseMessages.title, {
             selectedTypesCount: typesToDelete.length,
           })}
-
-          <DashboardModal.Close onClose={onClose} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         {isLoading ? (
           <Box display="flex" width="100%" justifyContent="center" paddingY={10}>
diff --git a/src/custom-apps/components/TokenCreateDialog/TokenCreateDialog.tsx b/src/custom-apps/components/TokenCreateDialog/TokenCreateDialog.tsx
index 6990828d6e3..80a1838af7a 100644
--- a/src/custom-apps/components/TokenCreateDialog/TokenCreateDialog.tsx
+++ b/src/custom-apps/components/TokenCreateDialog/TokenCreateDialog.tsx
@@ -61,9 +61,9 @@ const TokenCreateDialog: React.FC<TokenCreateDialogProps> = props => {
         <Form initial={{ name: "" }} onSubmit={data => onCreate(data.name)}>
           {({ change, data, submit }) => (
             <DashboardModal.Grid>
-              <DashboardModal.Title>
+              <DashboardModal.Header>
                 <FormattedMessage id="T5nU7u" defaultMessage="Create Token" description="header" />
-              </DashboardModal.Title>
+              </DashboardModal.Header>
 
               {step === "form" ? (
                 <>
diff --git a/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx b/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx
index da5eb20ef81..d7152c5b9fb 100644
--- a/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx
+++ b/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx
@@ -82,7 +82,7 @@ const CustomerAddressDialog: React.FC<CustomerAddressDialogProps> = ({
 
             return (
               <DashboardModal.Grid>
-                <DashboardModal.Title>
+                <DashboardModal.Header>
                   {variant === "create" ? (
                     <FormattedMessage
                       id="W0kQd+"
@@ -96,7 +96,7 @@ const CustomerAddressDialog: React.FC<CustomerAddressDialogProps> = ({
                       description="dialog title"
                     />
                   )}
-                </DashboardModal.Title>
+                </DashboardModal.Header>
 
                 <AddressEdit
                   countries={countryChoices}
diff --git a/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx b/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx
index 4897486b9ce..20276769f34 100644
--- a/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx
+++ b/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx
@@ -62,13 +62,13 @@ const DiscountCountrySelectDialog: React.FC<DiscountCountrySelectDialogProps> =
                 __gridTemplateRows="auto auto auto auto auto 1fr auto"
                 height="100%"
               >
-                <DashboardModal.Title>
+                <DashboardModal.Header>
                   <FormattedMessage
                     id="cvVIV/"
                     defaultMessage="Assign Countries"
                     description="dialog header"
                   />
-                </DashboardModal.Title>
+                </DashboardModal.Header>
 
                 <Text>
                   <FormattedMessage
diff --git a/src/discounts/components/DiscountDeleteModal/DiscountDeleteModal.tsx b/src/discounts/components/DiscountDeleteModal/DiscountDeleteModal.tsx
index 52663812c6a..ef1ced399ce 100644
--- a/src/discounts/components/DiscountDeleteModal/DiscountDeleteModal.tsx
+++ b/src/discounts/components/DiscountDeleteModal/DiscountDeleteModal.tsx
@@ -21,9 +21,9 @@ export const DiscountDeleteModal = ({
   return (
     <DashboardModal open={open} onChange={onChange}>
       <DashboardModal.Content size="xs">
-        <DashboardModal.Title>
+        <DashboardModal.Header>
           <FormattedMessage defaultMessage="Delete discount" id="ZrIt1W" />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <Text>
           <FormattedMessage
diff --git a/src/discounts/components/DiscountRules/componenets/RuleDeleteModal/RuleDeleteModal.tsx b/src/discounts/components/DiscountRules/componenets/RuleDeleteModal/RuleDeleteModal.tsx
index 012abd8fd4f..f2280c8a4a1 100644
--- a/src/discounts/components/DiscountRules/componenets/RuleDeleteModal/RuleDeleteModal.tsx
+++ b/src/discounts/components/DiscountRules/componenets/RuleDeleteModal/RuleDeleteModal.tsx
@@ -25,10 +25,7 @@ export const RuleDeleteModal = ({
   return (
     <DashboardModal open={open} onChange={onClose}>
       <DashboardModal.Content size="xs" data-test-id="delete-rule-dialog">
-        <DashboardModal.Title display="flex" justifyContent="space-between" alignItems="center">
-          {intl.formatMessage(messages.deleteRule)}
-          <DashboardModal.Close onClose={onClose} />
-        </DashboardModal.Title>
+        <DashboardModal.Header>{intl.formatMessage(messages.deleteRule)}</DashboardModal.Header>
 
         <Text>
           <FormattedMessage {...messages.deleteRuleDescription} />
diff --git a/src/discounts/components/DiscountRules/componenets/RuleFormModal/RuleFormModal.tsx b/src/discounts/components/DiscountRules/componenets/RuleFormModal/RuleFormModal.tsx
index 31d3d501e42..e53a0f2cce9 100644
--- a/src/discounts/components/DiscountRules/componenets/RuleFormModal/RuleFormModal.tsx
+++ b/src/discounts/components/DiscountRules/componenets/RuleFormModal/RuleFormModal.tsx
@@ -39,10 +39,9 @@ export const RuleFormModal = ({
   return (
     <DashboardModal open={true} onChange={onClose}>
       <DashboardModal.Content size="sm" data-test-id="add-rule-dialog">
-        <DashboardModal.Title display="flex" justifyContent="space-between" alignItems="center">
+        <DashboardModal.Header>
           <FormattedMessage {...(initialFormValues ? messages.editRule : messages.addRule)} />
-          <DashboardModal.Close onClose={onClose} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
         <FormProvider {...methods}>
           <form onSubmit={methods.handleSubmit(onSubmit)}>{children}</form>
         </FormProvider>
diff --git a/src/discounts/components/VoucherCodesDeleteDialog/VoucherCodesDeleteDialog.tsx b/src/discounts/components/VoucherCodesDeleteDialog/VoucherCodesDeleteDialog.tsx
index 58f42296cb8..477a2f52865 100644
--- a/src/discounts/components/VoucherCodesDeleteDialog/VoucherCodesDeleteDialog.tsx
+++ b/src/discounts/components/VoucherCodesDeleteDialog/VoucherCodesDeleteDialog.tsx
@@ -24,9 +24,9 @@ export const VoucherCodesDeleteDialog = ({
   return (
     <DashboardModal open={open} onChange={onClose}>
       <DashboardModal.Content size="xs">
-        <DashboardModal.Title>
+        <DashboardModal.Header>
           <FormattedMessage id="WMN0q+" defaultMessage="Delete voucher codes" />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <Text as="p">
           <FormattedMessage
diff --git a/src/discounts/components/VoucherCodesGenerateDialog/VoucherCodesGenerateDialog.tsx b/src/discounts/components/VoucherCodesGenerateDialog/VoucherCodesGenerateDialog.tsx
index 785b55b1fe6..6629d51a5bb 100644
--- a/src/discounts/components/VoucherCodesGenerateDialog/VoucherCodesGenerateDialog.tsx
+++ b/src/discounts/components/VoucherCodesGenerateDialog/VoucherCodesGenerateDialog.tsx
@@ -57,7 +57,7 @@ export const VoucherCodesGenerateDialog = ({
   return (
     <DashboardModal open={open} onChange={handleModalClose}>
       <DashboardModal.Content size="xs">
-        <DashboardModal.Title>{intl.formatMessage(messages.title)}</DashboardModal.Title>
+        <DashboardModal.Header>{intl.formatMessage(messages.title)}</DashboardModal.Header>
         <Box display="grid" gap={3} __width={390}>
           <Input
             name="quantity"
diff --git a/src/discounts/components/VoucherCodesManualDialog/VoucherCodesManualDialog.tsx b/src/discounts/components/VoucherCodesManualDialog/VoucherCodesManualDialog.tsx
index 9c845512285..cf54688065c 100644
--- a/src/discounts/components/VoucherCodesManualDialog/VoucherCodesManualDialog.tsx
+++ b/src/discounts/components/VoucherCodesManualDialog/VoucherCodesManualDialog.tsx
@@ -45,9 +45,9 @@ export const VoucherCodesManualDialog = ({
   return (
     <DashboardModal open={open} onChange={handleModalClose}>
       <DashboardModal.Content size="xs">
-        <DashboardModal.Title>
+        <DashboardModal.Header>
           <FormattedMessage defaultMessage="Enter Voucher Code" id="giVGCH" />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
         <Box display="grid" gap={3} __width={390}>
           <Input
             data-test-id="enter-code-input"
diff --git a/src/giftCards/GiftCardBulkCreateDialog/GiftCardBulkCreateDialog.tsx b/src/giftCards/GiftCardBulkCreateDialog/GiftCardBulkCreateDialog.tsx
index c2645dab02f..dd7318214aa 100644
--- a/src/giftCards/GiftCardBulkCreateDialog/GiftCardBulkCreateDialog.tsx
+++ b/src/giftCards/GiftCardBulkCreateDialog/GiftCardBulkCreateDialog.tsx
@@ -109,7 +109,7 @@ const GiftCardBulkCreateDialog: React.FC<DialogProps> = ({ onClose, open }) => {
     <>
       <DashboardModal open={open} onChange={onClose}>
         <DashboardModal.Content size="sm">
-          <DashboardModal.Title>{intl.formatMessage(messages.title)}</DashboardModal.Title>
+          <DashboardModal.Header>{intl.formatMessage(messages.title)}</DashboardModal.Header>
           <ContentWithProgress>
             {!loadingChannelCurrencies && (
               <GiftCardBulkCreateDialogForm
diff --git a/src/giftCards/GiftCardCreateDialog/GiftCardBulkCreateSuccessDialog.tsx b/src/giftCards/GiftCardCreateDialog/GiftCardBulkCreateSuccessDialog.tsx
index 1052e065c0b..c5a8d6de876 100644
--- a/src/giftCards/GiftCardCreateDialog/GiftCardBulkCreateSuccessDialog.tsx
+++ b/src/giftCards/GiftCardCreateDialog/GiftCardBulkCreateSuccessDialog.tsx
@@ -27,9 +27,9 @@ const GiftCardBulkCreateSuccessDialog: React.FC<GiftCardBulkCreateSuccessDialogP
     <>
       <DashboardModal open={open} onChange={onClose}>
         <DashboardModal.Content size="sm">
-          <DashboardModal.Title>
+          <DashboardModal.Header>
             {intl.formatMessage(messages.bulkCreateIssuedTitle)}
-          </DashboardModal.Title>
+          </DashboardModal.Header>
 
           <Text>{intl.formatMessage(messages.bulkCreateIssuedExplanation)}</Text>
 
diff --git a/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogContent.tsx b/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogContent.tsx
index 070ca314457..829089ae410 100644
--- a/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogContent.tsx
+++ b/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogContent.tsx
@@ -78,7 +78,7 @@ const GiftCardCreateDialogContent: React.FC<GiftCardCreateDialogContentProps> =
 
   return (
     <DashboardModal.Content size="sm" data-test-id="gift-card-dialog">
-      <DashboardModal.Title>{intl.formatMessage(messages.title)}</DashboardModal.Title>
+      <DashboardModal.Header>{intl.formatMessage(messages.title)}</DashboardModal.Header>
       {cardCode ? (
         <GiftCardCreateDialogCodeContent cardCode={cardCode} onClose={handleClose} />
       ) : (
diff --git a/src/giftCards/GiftCardExportDialogContent/GiftCardExportDialogContent.tsx b/src/giftCards/GiftCardExportDialogContent/GiftCardExportDialogContent.tsx
index 270e5b2d80c..7a1956b634d 100644
--- a/src/giftCards/GiftCardExportDialogContent/GiftCardExportDialogContent.tsx
+++ b/src/giftCards/GiftCardExportDialogContent/GiftCardExportDialogContent.tsx
@@ -97,9 +97,9 @@ const GiftCardExportDialog: React.FC<
 
   return (
     <DashboardModal.Content size="sm">
-      <DashboardModal.Title>
+      <DashboardModal.Header>
         <FormattedMessage {...messages.title} />
-      </DashboardModal.Title>
+      </DashboardModal.Header>
 
       <ContentWithProgress>
         {!loading && (
diff --git a/src/navigation/components/MenuCreateDialog/MenuCreateDialog.tsx b/src/navigation/components/MenuCreateDialog/MenuCreateDialog.tsx
index 17421a42c50..8788167c53e 100644
--- a/src/navigation/components/MenuCreateDialog/MenuCreateDialog.tsx
+++ b/src/navigation/components/MenuCreateDialog/MenuCreateDialog.tsx
@@ -44,13 +44,13 @@ const MenuCreateDialog: React.FC<MenuCreateDialogProps> = ({
         <Form initial={initialForm} onSubmit={onConfirm}>
           {({ change, data, submit }) => (
             <Box display="grid" gap={6}>
-              <DashboardModal.Title data-test-id="create-menu-dialog-title">
+              <DashboardModal.Header data-test-id="create-menu-dialog-title">
                 <FormattedMessage
                   id="0OtaXa"
                   defaultMessage="Create Menu"
                   description="dialog header"
                 />
-              </DashboardModal.Title>
+              </DashboardModal.Header>
 
               <TextField
                 data-test-id="menu-name-input"
diff --git a/src/navigation/components/MenuItemDialog/MenuItemDialog.tsx b/src/navigation/components/MenuItemDialog/MenuItemDialog.tsx
index 2f2416e405d..941be675893 100644
--- a/src/navigation/components/MenuItemDialog/MenuItemDialog.tsx
+++ b/src/navigation/components/MenuItemDialog/MenuItemDialog.tsx
@@ -98,7 +98,7 @@ const MenuItemDialog: React.FC<MenuItemDialogProps> = ({
       <DashboardModal.Content size="sm">
         <form onSubmit={handleSubmit(onSubmit)}>
           <DashboardModal.Grid>
-            <DashboardModal.Title data-test-id="add-menu-item-dialog-title">
+            <DashboardModal.Header data-test-id="add-menu-item-dialog-title">
               {initial
                 ? intl.formatMessage({
                     id: "KKQUMK",
@@ -110,7 +110,7 @@ const MenuItemDialog: React.FC<MenuItemDialogProps> = ({
                     defaultMessage: "Add Item",
                     description: "create new menu item, header",
                   })}
-            </DashboardModal.Title>
+            </DashboardModal.Header>
 
             <Controller
               control={control}
diff --git a/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx b/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx
index b570201cb71..dd0b46702cd 100644
--- a/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx
+++ b/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx
@@ -34,9 +34,9 @@ export const OrderCancelDialog: React.FC<OrderCancelDialogProps> = props => {
   return (
     <DashboardModal onChange={onClose} open={open}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Title data-test-id="dialog-title">
+        <DashboardModal.Header data-test-id="dialog-title">
           <FormattedMessage {...cancelOrderDialogMessages.dialogTitle} values={{ orderNumber }} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
         <Text>
           <FormattedMessage
             {...cancelOrderDialogMessages.dialogContent}
diff --git a/src/orders/components/OrderCannotCancelOrderDialog/OrderCannotCancelOrderDialog.tsx b/src/orders/components/OrderCannotCancelOrderDialog/OrderCannotCancelOrderDialog.tsx
index 5734cc952f0..3be9d23b714 100644
--- a/src/orders/components/OrderCannotCancelOrderDialog/OrderCannotCancelOrderDialog.tsx
+++ b/src/orders/components/OrderCannotCancelOrderDialog/OrderCannotCancelOrderDialog.tsx
@@ -9,13 +9,13 @@ const OrderCannotCancelOrderDialog: React.FC<DialogProps> = ({ open, onClose })
   return (
     <DashboardModal onChange={onClose} open={open}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Title>
+        <DashboardModal.Header>
           <FormattedMessage
             id="NhQboB"
             defaultMessage="Saleor couldn’t cancel order"
             description="dialog header"
           />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <Text>
           <FormattedMessage
diff --git a/src/orders/components/OrderChangeWarehouseDialog/OrderChangeWarehouseDialog.tsx b/src/orders/components/OrderChangeWarehouseDialog/OrderChangeWarehouseDialog.tsx
index b53aee503a7..0ef1cbf2283 100644
--- a/src/orders/components/OrderChangeWarehouseDialog/OrderChangeWarehouseDialog.tsx
+++ b/src/orders/components/OrderChangeWarehouseDialog/OrderChangeWarehouseDialog.tsx
@@ -84,13 +84,9 @@ export const OrderChangeWarehouseDialog: React.FC<OrderChangeWarehouseDialogProp
   return (
     <DashboardModal open={open} onChange={onClose}>
       <DashboardModal.Content size="sm" __gridTemplateRows="auto auto auto auto 1fr">
-        <DashboardModal.Title>
-          <Box display="flex" justifyContent="space-between">
-            <FormattedMessage {...messages.dialogTitle} />
-            <DashboardModal.Close onClose={onClose} />
-          </Box>
-
-          <Text size={3}>
+        <DashboardModal.Header>
+          <FormattedMessage {...messages.dialogTitle} />
+          <Text size={3} display="block">
             <FormattedMessage
               {...messages.dialogDescription}
               values={{
@@ -98,7 +94,7 @@ export const OrderChangeWarehouseDialog: React.FC<OrderChangeWarehouseDialogProp
               }}
             />
           </Text>
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <Debounce debounceFn={search}>
           {debounceSearchChange => {
diff --git a/src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressesEditDialog.tsx b/src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressesEditDialog.tsx
index 6dc3c0a1d3f..e7a4789bb03 100644
--- a/src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressesEditDialog.tsx
+++ b/src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressesEditDialog.tsx
@@ -253,9 +253,9 @@ const OrderCustomerAddressesEditDialog: React.FC<OrderCustomerAddressesEditDialo
 
             return (
               <DashboardModal.Grid>
-                <DashboardModal.Title>
+                <DashboardModal.Header>
                   <FormattedMessage {...getDialogTitle()} />
-                </DashboardModal.Title>
+                </DashboardModal.Header>
 
                 {addressSearchState.open ? (
                   <OrderCustomerAddressesSearch
diff --git a/src/orders/components/OrderCustomerChangeDialog/OrderCustomerChangeDialog.tsx b/src/orders/components/OrderCustomerChangeDialog/OrderCustomerChangeDialog.tsx
index 5f917d3cef0..9dc4f60e675 100644
--- a/src/orders/components/OrderCustomerChangeDialog/OrderCustomerChangeDialog.tsx
+++ b/src/orders/components/OrderCustomerChangeDialog/OrderCustomerChangeDialog.tsx
@@ -27,9 +27,9 @@ const OrderCustomerChangeDialog: React.FC<OrderCustomerChangeDialogProps> = prop
         <OrderCustomerChangeForm onSubmit={onConfirm}>
           {({ change, data }) => (
             <Box display="grid" gap={6}>
-              <DashboardModal.Title>
+              <DashboardModal.Header>
                 <FormattedMessage {...messages.title} />
-              </DashboardModal.Title>
+              </DashboardModal.Header>
               <Text>
                 <FormattedMessage {...messages.description} />
               </Text>
diff --git a/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx b/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx
index d3c18068202..71328d69e90 100644
--- a/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx
+++ b/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx
@@ -35,9 +35,9 @@ const OrderFulfillmentApproveDialog: React.FC<OrderFulfillmentAcceptDialogProps>
         <Form initial={{ notifyCustomer: true }} onSubmit={onConfirm}>
           {({ change, data, submit }) => (
             <DashboardModal.Grid>
-              <DashboardModal.Title>
+              <DashboardModal.Header>
                 <FormattedMessage {...messages.title} />
-              </DashboardModal.Title>
+              </DashboardModal.Header>
 
               <Text>
                 <FormattedMessage {...messages.description} />
diff --git a/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx b/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx
index 03639f2777f..c03b8fbf9e8 100644
--- a/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx
+++ b/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx
@@ -63,13 +63,13 @@ const OrderFulfillmentCancelDialog: React.FC<OrderFulfillmentCancelDialogProps>
 
           return (
             <DashboardModal.Content size="sm">
-              <DashboardModal.Title>
+              <DashboardModal.Header>
                 <FormattedMessage
                   id="bb4nSp"
                   defaultMessage="Cancel Fulfillment"
                   description="dialog header"
                 />
-              </DashboardModal.Title>
+              </DashboardModal.Header>
 
               <Text>
                 <FormattedMessage
diff --git a/src/orders/components/OrderFulfillmentTrackingDialog/OrderFulfillmentTrackingDialog.tsx b/src/orders/components/OrderFulfillmentTrackingDialog/OrderFulfillmentTrackingDialog.tsx
index 0a1211edaf7..b5af241da44 100644
--- a/src/orders/components/OrderFulfillmentTrackingDialog/OrderFulfillmentTrackingDialog.tsx
+++ b/src/orders/components/OrderFulfillmentTrackingDialog/OrderFulfillmentTrackingDialog.tsx
@@ -48,13 +48,13 @@ const OrderFulfillmentTrackingDialog: React.FC<OrderFulfillmentTrackingDialogPro
         <Form initial={initialData} onSubmit={onConfirm}>
           {({ change, data, submit }) => (
             <DashboardModal.Grid>
-              <DashboardModal.Title>
+              <DashboardModal.Header>
                 <FormattedMessage
                   id="/BJQIq"
                   defaultMessage="Add Tracking Code"
                   description="dialog header"
                 />
-              </DashboardModal.Title>
+              </DashboardModal.Header>
 
               <TextField
                 error={!!formErrors.trackingNumber}
diff --git a/src/orders/components/OrderInvoiceEmailSendDialog/OrderInvoiceEmailSendDialog.tsx b/src/orders/components/OrderInvoiceEmailSendDialog/OrderInvoiceEmailSendDialog.tsx
index 85a7d380e20..ec94d041ad0 100644
--- a/src/orders/components/OrderInvoiceEmailSendDialog/OrderInvoiceEmailSendDialog.tsx
+++ b/src/orders/components/OrderInvoiceEmailSendDialog/OrderInvoiceEmailSendDialog.tsx
@@ -30,13 +30,13 @@ const OrderInvoiceEmailSendDialog: React.FC<OrderInvoiceEmailSendDialogProps> =
   return (
     <DashboardModal onChange={onClose} open={open}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Title>
+        <DashboardModal.Header>
           {intl.formatMessage({
             id: "5JT4v2",
             defaultMessage: "Send Invoice",
             description: "dialog header",
           })}
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <Text>
           <FormattedMessage
diff --git a/src/orders/components/OrderManualTransactionDialog/OrderManualTransactionDialog.tsx b/src/orders/components/OrderManualTransactionDialog/OrderManualTransactionDialog.tsx
index cc135991c2f..524d8904cf4 100644
--- a/src/orders/components/OrderManualTransactionDialog/OrderManualTransactionDialog.tsx
+++ b/src/orders/components/OrderManualTransactionDialog/OrderManualTransactionDialog.tsx
@@ -27,10 +27,9 @@ export const OrderManualTransactionDialog: React.FC<OrderManualTransactionDialog
     <OrderManualTransactionForm {...props}>
       <DashboardModal {...dialogProps}>
         <DashboardModal.Content size="xs">
-          <DashboardModal.Title display="flex" justifyContent="space-between" alignItems="center">
+          <DashboardModal.Header>
             <FormattedMessage {...manualTransactionMessages.dialogTitle} />
-            <DashboardModal.Close onClose={onClose} />
-          </DashboardModal.Title>
+          </DashboardModal.Header>
 
           <OrderManualTransactionForm.Form>
             <Box display="flex" flexDirection="column" gap={4}>
diff --git a/src/orders/components/OrderMetadataDialog/OrderMetadataDialog.tsx b/src/orders/components/OrderMetadataDialog/OrderMetadataDialog.tsx
index 932c73f6250..392eb861ede 100644
--- a/src/orders/components/OrderMetadataDialog/OrderMetadataDialog.tsx
+++ b/src/orders/components/OrderMetadataDialog/OrderMetadataDialog.tsx
@@ -20,9 +20,9 @@ export const OrderMetadataDialog = ({ onClose, open, data, loading }: OrderMetad
   return (
     <DashboardModal open={open} onChange={onClose}>
       <DashboardModal.Content size="md">
-        <DashboardModal.Title paddingX={6}>
+        <DashboardModal.Header paddingX={6}>
           <FormattedMessage {...commonMessages.metadata} />: {data?.productName ?? ""}
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <Metadata
           readonly={true}
diff --git a/src/orders/components/OrderPaymentDialog/OrderPaymentDialog.tsx b/src/orders/components/OrderPaymentDialog/OrderPaymentDialog.tsx
index 5f4ca645f56..47bab54a919 100644
--- a/src/orders/components/OrderPaymentDialog/OrderPaymentDialog.tsx
+++ b/src/orders/components/OrderPaymentDialog/OrderPaymentDialog.tsx
@@ -48,13 +48,13 @@ const OrderPaymentDialog: React.FC<OrderPaymentDialogProps> = ({
       >
         {({ data, change, submit }) => (
           <DashboardModal.Content size="sm">
-            <DashboardModal.Title>
+            <DashboardModal.Header>
               {intl.formatMessage({
                 id: "+PbHKD",
                 defaultMessage: "Capture Payment",
                 description: "dialog header",
               })}
-            </DashboardModal.Title>
+            </DashboardModal.Header>
 
             <TextField
               error={!!formErrors.payment}
diff --git a/src/orders/components/OrderPaymentVoidDialog/OrderPaymentVoidDialog.tsx b/src/orders/components/OrderPaymentVoidDialog/OrderPaymentVoidDialog.tsx
index 6ef0214df8e..cd38e36782a 100644
--- a/src/orders/components/OrderPaymentVoidDialog/OrderPaymentVoidDialog.tsx
+++ b/src/orders/components/OrderPaymentVoidDialog/OrderPaymentVoidDialog.tsx
@@ -30,9 +30,9 @@ const OrderPaymentVoidDialog: React.FC<OrderPaymentVoidDialogProps> = ({
   return (
     <DashboardModal onChange={onClose} open={open}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Title>
+        <DashboardModal.Header>
           <FormattedMessage id="KszPFx" defaultMessage="Void Payment" description="dialog header" />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <Text>
           <FormattedMessage
diff --git a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
index 63e5649d6b7..ba500b973bd 100644
--- a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
+++ b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
@@ -90,14 +90,14 @@ const OrderProductAddDialog: React.FC<OrderProductAddDialogProps> = props => {
   return (
     <DashboardModal onChange={onClose} open={open}>
       <DashboardModal.Content size="sm" __gridTemplateRows="auto auto auto 1fr">
-        <DashboardModal.Title>
+        <DashboardModal.Header>
           <FormattedMessage
             {...messages.title}
             values={{
               channelName,
             }}
           />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <Text size={2} color="default2">
           <FormattedMessage {...messages.subtitle} />
diff --git a/src/orders/components/OrderRefundDialog/OrderRefundDialog.tsx b/src/orders/components/OrderRefundDialog/OrderRefundDialog.tsx
index a9834fe48bd..626524bd182 100644
--- a/src/orders/components/OrderRefundDialog/OrderRefundDialog.tsx
+++ b/src/orders/components/OrderRefundDialog/OrderRefundDialog.tsx
@@ -28,9 +28,9 @@ export const OrderRefundDialog = ({
   return (
     <DashboardModal open={open} onChange={onClose}>
       <DashboardModal.Content size="xs" data-test-id="order-refund-dialog">
-        <DashboardModal.Title>
+        <DashboardModal.Header>
           {intl.formatMessage(orderRefundDialogMesages.title)}
-        </DashboardModal.Title>
+        </DashboardModal.Header>
         <Text>{intl.formatMessage(orderRefundDialogMesages.subtitle)}</Text>
         <RadioTiles asChild value={selectedRefundType} onValueChange={handleChangeRefundType}>
           <Box
diff --git a/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx b/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx
index b80f1eac399..a743be50018 100644
--- a/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx
+++ b/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx
@@ -79,13 +79,13 @@ const OrderShippingMethodEditDialog: React.FC<OrderShippingMethodEditDialogProps
         {({ change, data, submit }) => (
           <>
             <DashboardModal.Content size="sm">
-              <DashboardModal.Title>
+              <DashboardModal.Header>
                 <FormattedMessage
                   id="V/YxJa"
                   defaultMessage="Edit Shipping Method"
                   description="dialog header"
                 />
-              </DashboardModal.Title>
+              </DashboardModal.Header>
 
               <Select
                 options={choices as unknown as Option[]}
diff --git a/src/orders/components/OrderTransactionActionDialog/OrderTransactionActionDialog.tsx b/src/orders/components/OrderTransactionActionDialog/OrderTransactionActionDialog.tsx
index 447d5f29966..dd77eb70258 100644
--- a/src/orders/components/OrderTransactionActionDialog/OrderTransactionActionDialog.tsx
+++ b/src/orders/components/OrderTransactionActionDialog/OrderTransactionActionDialog.tsx
@@ -32,14 +32,14 @@ export const OrderTransactionActionDialog: React.FC<OrderTransactionActionDialog
   return (
     <DashboardModal open={open} onChange={onClose}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Title>
+        <DashboardModal.Header>
           <FormattedMessage
             {...messages.title}
             values={{
               actionType,
             }}
           />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <Text>
           <FormattedMessage {...messages.warningText} values={{ actionType }} />
diff --git a/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionReasonModal/OrderTransactionReasonModal.tsx b/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionReasonModal/OrderTransactionReasonModal.tsx
index 05e970a8d90..4c290109d32 100644
--- a/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionReasonModal/OrderTransactionReasonModal.tsx
+++ b/src/orders/components/OrderTransactionRefundPage/components/OrderTransactionReasonModal/OrderTransactionReasonModal.tsx
@@ -28,12 +28,11 @@ export const OrderTransactionReasonModal = ({
   return (
     <DashboardModal open={open} onChange={onClose}>
       <DashboardModal.Content data-test-id="refund-reason-dialog" size="xs">
-        <DashboardModal.Title display="flex" justifyContent="space-between" alignItems="center">
+        <DashboardModal.Header>
           <FormattedMessage
             {...(reason ? refundTableMessages.editReason : refundTableMessages.addReason)}
           />
-          <DashboardModal.Close onClose={onClose} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <Textarea
           data-test-id="line-refund-reason-input"
diff --git a/src/pages/components/PageTypePickerDialog/PageTypePickerDialog.tsx b/src/pages/components/PageTypePickerDialog/PageTypePickerDialog.tsx
index 8c25b4cff4d..0c10f4c63a3 100644
--- a/src/pages/components/PageTypePickerDialog/PageTypePickerDialog.tsx
+++ b/src/pages/components/PageTypePickerDialog/PageTypePickerDialog.tsx
@@ -43,9 +43,9 @@ const PageTypePickerDialog: React.FC<PageTypePickerDialogProps> = ({
   return (
     <DashboardModal open={open} onChange={onClose}>
       <DashboardModal.Content size="xs">
-        <DashboardModal.Title>
+        <DashboardModal.Header>
           <FormattedMessage {...messages.selectPageType} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <Combobox
           name="pageType"
diff --git a/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx b/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx
index 80c84f39046..112da5c5957 100644
--- a/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx
+++ b/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx
@@ -129,9 +129,9 @@ const AssignMembersDialog: React.FC<AssignMembersDialogProps> = ({
   return (
     <DashboardModal onChange={onClose} open={open}>
       <DashboardModal.Content size="sm" __gridTemplateRows="auto auto 1fr">
-        <DashboardModal.Title>
+        <DashboardModal.Header>
           <FormattedMessage {...messages.title} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <TextField
           data-test-id="search-members-input"
diff --git a/src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.tsx b/src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.tsx
index 285f75222bf..7ece809f2b5 100644
--- a/src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.tsx
+++ b/src/plugins/components/PluginSecretFieldDialog/PluginSecretFieldDialog.tsx
@@ -38,7 +38,7 @@ const PluginSecretFieldDialog: React.FC<PluginSecretFieldDialogProps> = ({
         <Form initial={initialForm} onSubmit={onConfirm}>
           {({ change, data, submit }) => (
             <DashboardModal.Grid>
-              <DashboardModal.Title>
+              <DashboardModal.Header>
                 {field ? (
                   field.value === null ? (
                     intl.formatMessage({
@@ -56,7 +56,7 @@ const PluginSecretFieldDialog: React.FC<PluginSecretFieldDialogProps> = ({
                 ) : (
                   <Skeleton />
                 )}
-              </DashboardModal.Title>
+              </DashboardModal.Header>
 
               <TextField
                 multiline={field?.type === ConfigurationTypeFieldEnum.SECRETMULTILINE}
diff --git a/src/products/components/ProductExportDialog/ProductExportDialog.tsx b/src/products/components/ProductExportDialog/ProductExportDialog.tsx
index f3c0f55cbdc..383126d9c23 100644
--- a/src/products/components/ProductExportDialog/ProductExportDialog.tsx
+++ b/src/products/components/ProductExportDialog/ProductExportDialog.tsx
@@ -213,9 +213,9 @@ const ProductExportDialog: React.FC<ProductExportDialogProps> = ({
   return (
     <DashboardModal onChange={onClose} open={open}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Title>
+        <DashboardModal.Header>
           <FormattedMessage {...messages.title} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <ProductExportSteps currentStep={step} steps={steps} onStepClick={setStep} />
         {step === ProductExportStep.INFO && (
diff --git a/src/products/components/ProductExternalMediaDialog/ProductExternalMediaDialog.tsx b/src/products/components/ProductExternalMediaDialog/ProductExternalMediaDialog.tsx
index e241b920609..c6655ef7ef3 100644
--- a/src/products/components/ProductExternalMediaDialog/ProductExternalMediaDialog.tsx
+++ b/src/products/components/ProductExternalMediaDialog/ProductExternalMediaDialog.tsx
@@ -45,11 +45,11 @@ const ProductExternalMediaDialog: React.FC<ProductExternalMediaDialogProps> = ({
         <Form initial={initialValues} onSubmit={handleOnSubmit}>
           {({ change, data, submit }) => (
             <DashboardModal.Grid>
-              <DashboardModal.Title>
+              <DashboardModal.Header>
                 <Text size={5} fontWeight="bold">
                   {intl.formatMessage(messages.buttonMessage)}
                 </Text>
-              </DashboardModal.Title>
+              </DashboardModal.Header>
 
               <Text size={2}>
                 <FormattedMessage
diff --git a/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx b/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx
index f606c2f4884..e9a63e70f2a 100644
--- a/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx
+++ b/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx
@@ -9,7 +9,7 @@ export interface ProductVariantDeleteDialogProps {
   confirmButtonState: ConfirmButtonTransitionState;
   open: boolean;
   name: string;
-  onClose?: () => any;
+  onClose: () => any;
   onConfirm?: () => any;
 }
 
@@ -19,13 +19,13 @@ const ProductVariantDeleteDialog: React.FC<ProductVariantDeleteDialogProps> = pr
   return (
     <DashboardModal onChange={onClose} open={open}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Title>
+        <DashboardModal.Header>
           <FormattedMessage
             id="GFJabu"
             defaultMessage="Delete Variant"
             description="dialog header"
           />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <Text>
           <FormattedMessage
diff --git a/src/products/components/ProductVariantImageSelectDialog/ProductVariantMediaSelectDialog.tsx b/src/products/components/ProductVariantImageSelectDialog/ProductVariantMediaSelectDialog.tsx
index 751fa2fdc77..a7f0ea11688 100644
--- a/src/products/components/ProductVariantImageSelectDialog/ProductVariantMediaSelectDialog.tsx
+++ b/src/products/components/ProductVariantImageSelectDialog/ProductVariantMediaSelectDialog.tsx
@@ -42,13 +42,13 @@ const ProductVariantMediaSelectDialog: React.FC<ProductVariantImageSelectDialogP
   return (
     <DashboardModal onChange={onClose} open={open}>
       <DashboardModal.Content size="md" __gridTemplateRows="auto 1fr">
-        <DashboardModal.Title>
+        <DashboardModal.Header>
           <FormattedMessage
             id="iPk640"
             defaultMessage="Media Selection"
             description="dialog header"
           />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <Box
           overflowY="auto"
diff --git a/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx b/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx
index a097ed9a636..f6087747f8d 100644
--- a/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx
+++ b/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx
@@ -98,13 +98,13 @@ const ShippingMethodProductsAddDialog: React.FC<ShippingMethodProductsAddDialogP
   return (
     <DashboardModal onChange={handleClose} open={open}>
       <DashboardModal.Content size="sm" __gridTemplateRows="auto auto 1fr">
-        <DashboardModal.Title>
+        <DashboardModal.Header>
           <FormattedMessage
             id="xZhxBJ"
             defaultMessage="Assign Products"
             description="dialog header"
           />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <Box data-test-id="assign-products-dialog-content">
           <TextField
diff --git a/src/shipping/components/ShippingWeightUnitDialog/ShippingWeightUnitDialog.tsx b/src/shipping/components/ShippingWeightUnitDialog/ShippingWeightUnitDialog.tsx
index c26021889f8..d051e69862e 100644
--- a/src/shipping/components/ShippingWeightUnitDialog/ShippingWeightUnitDialog.tsx
+++ b/src/shipping/components/ShippingWeightUnitDialog/ShippingWeightUnitDialog.tsx
@@ -1,7 +1,6 @@
 import { DashboardModal } from "@dashboard/components/Modal";
 import { WeightUnitsEnum } from "@dashboard/graphql";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
-import { Box } from "@saleor/macaw-ui-next";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -25,16 +24,13 @@ export const ShippingWeightUnitDialog: React.FC<ShippingWeightUnitDialogProps> =
   return (
     <DashboardModal open={open} onChange={onClose}>
       <DashboardModal.Content size="sm">
-        <Box alignItems="center" display="flex" gap={3} justifyContent="space-between">
-          <DashboardModal.Title>
-            <FormattedMessage
-              description="weight config modal title"
-              defaultMessage="Default weight unit configuration"
-              id="9WmA6z"
-            />
-          </DashboardModal.Title>
-          <DashboardModal.Close onClose={onClose} />
-        </Box>
+        <DashboardModal.Header>
+          <FormattedMessage
+            description="weight config modal title"
+            defaultMessage="Default weight unit configuration"
+            id="9WmA6z"
+          />
+        </DashboardModal.Header>
         <ShippingWeightUnitForm
           defaultWeightUnit={defaultWeightUnit}
           onSubmit={onSubmit}
diff --git a/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx b/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx
index a86949b1d08..4315f7d9f63 100644
--- a/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx
+++ b/src/shipping/components/ShippingZoneAddWarehouseDialog/ShippingZoneAddWarehouseDialog.tsx
@@ -75,13 +75,13 @@ const ShippingZoneAddWarehouseDialog: React.FC<ShippingZoneAddWarehouseDialogPro
 
           return (
             <DashboardModal.Content size="sm">
-              <DashboardModal.Title>
+              <DashboardModal.Header>
                 <FormattedMessage
                   id="yzYXW/"
                   defaultMessage="Create New Warehouse"
                   description="header, dialog"
                 />
-              </DashboardModal.Title>
+              </DashboardModal.Header>
 
               <TextField
                 fullWidth
diff --git a/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx b/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx
index 5fd1e4c16ea..012584299ce 100644
--- a/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx
+++ b/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx
@@ -66,9 +66,9 @@ const ShippingZoneCountriesAssignDialog: React.FC<
 
             return (
               <DashboardModal.Grid>
-                <DashboardModal.Title>
+                <DashboardModal.Header>
                   <FormattedMessage {...messages.assignCountriesTitle} />
-                </DashboardModal.Title>
+                </DashboardModal.Header>
 
                 <Text>
                   <FormattedMessage {...messages.assignCountriesDescription} />
diff --git a/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.tsx b/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.tsx
index d7809373dee..c00ba55061c 100644
--- a/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.tsx
+++ b/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.tsx
@@ -33,13 +33,13 @@ const ShippingZonePostalCodeRangeDialog: React.FC<ShippingZonePostalCodeRangeDia
         <Form initial={initial} onSubmit={onSubmit}>
           {({ change, data }) => (
             <DashboardModal.Grid>
-              <DashboardModal.Title>
+              <DashboardModal.Header>
                 <FormattedMessage
                   id="2Xt+sw"
                   defaultMessage="Add postal codes"
                   description="dialog header"
                 />
-              </DashboardModal.Title>
+              </DashboardModal.Header>
 
               <Text>
                 <FormattedMessage
diff --git a/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx b/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx
index cae269e0ad3..c4b7aad51d4 100644
--- a/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx
+++ b/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx
@@ -63,13 +63,13 @@ const StaffAddMemberDialog: React.FC<StaffAddMemberDialogProps> = props => {
       >
         {({ change, data: formData, submit }) => (
           <DashboardModal.Content size="sm">
-            <DashboardModal.Title>
+            <DashboardModal.Header>
               <FormattedMessage
                 id="23g7PY"
                 defaultMessage="Invite Staff Member"
                 description="dialog header"
               />
-            </DashboardModal.Title>
+            </DashboardModal.Header>
 
             <Box display="flex" gap={3} justifyContent="space-between">
               <TextField
diff --git a/src/staff/components/StaffPasswordResetDialog/StaffPasswordResetDialog.tsx b/src/staff/components/StaffPasswordResetDialog/StaffPasswordResetDialog.tsx
index e5e802a8696..b0de8e889bd 100644
--- a/src/staff/components/StaffPasswordResetDialog/StaffPasswordResetDialog.tsx
+++ b/src/staff/components/StaffPasswordResetDialog/StaffPasswordResetDialog.tsx
@@ -44,13 +44,13 @@ const StaffPasswordResetDialog: React.FC<StaffPasswordResetDialogProps> = ({
       <Form initial={initialForm} onSubmit={onSubmit}>
         {({ change, data }) => (
           <DashboardModal.Content size="sm">
-            <DashboardModal.Title>
+            <DashboardModal.Header>
               <FormattedMessage
                 id="+kb2lM"
                 defaultMessage="Change Password"
                 description="dialog header"
               />
-            </DashboardModal.Title>
+            </DashboardModal.Header>
 
             <TextField
               error={!!formErrors.oldPassword}
diff --git a/src/taxes/components/TaxCountryDialog/TaxCountryDialog.tsx b/src/taxes/components/TaxCountryDialog/TaxCountryDialog.tsx
index 18c1b1f49ec..ba1f9b86bea 100644
--- a/src/taxes/components/TaxCountryDialog/TaxCountryDialog.tsx
+++ b/src/taxes/components/TaxCountryDialog/TaxCountryDialog.tsx
@@ -46,10 +46,9 @@ export const TaxCountryDialog: React.FC<TaxCountryDialogProps> = ({
   return (
     <DashboardModal open={open} onChange={onClose}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Title display="flex" justifyContent="space-between" alignItems="center">
+        <DashboardModal.Header>
           <FormattedMessage {...taxesMessages.chooseCountryDialogTitle} />
-          <DashboardModal.Close onClose={onClose} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <TextField
           data-test-id="search-country-input"