diff --git a/.changeset/mean-phones-hide.md b/.changeset/mean-phones-hide.md
new file mode 100644
index 00000000000..a4c459b7e73
--- /dev/null
+++ b/.changeset/mean-phones-hide.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Add clarity to order cancel dialog
diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json
index 047b86419c9..5a768b07d35 100644
--- a/locale/defaultMessages.json
+++ b/locale/defaultMessages.json
@@ -3713,6 +3713,10 @@
     "context": "attribute values list: slug column header",
     "string": "Swatch"
   },
+  "NWA+MK": {
+    "context": "dialog content",
+    "string": "<b>Important:</b> Refunds need to be issued <b>manually</b> after order cancelation."
+  },
   "NWxomz": {
     "string": "Fulfillment status"
   },
@@ -3973,10 +3977,6 @@
     "context": "sum of all manual refunds for transaction",
     "string": "Manual refund"
   },
-  "PRXpBm": {
-    "context": "dialog header",
-    "string": "Cancel Order"
-  },
   "PTW56s": {
     "context": "alert",
     "string": "Channel limit reached"
@@ -4897,9 +4897,6 @@
     "context": "fulfill button label",
     "string": "Fulfill anyway"
   },
-  "VSztEE": {
-    "string": "Cancelling this order will release unfulfilled stocks, so they can be bought by other customers. <b>Order will not be refunded when cancelling order - You need to do it manually.</b> Are you sure you want to cancel this order?"
-  },
   "VTITVe": {
     "context": "section header",
     "string": "Staff Member Information"
@@ -5776,6 +5773,10 @@
     "context": "subsection header",
     "string": "Address"
   },
+  "bKTEnb": {
+    "context": "button to cancel order",
+    "string": "Cancel order"
+  },
   "bL/Wrc": {
     "context": "plugin status",
     "string": "Status"
@@ -7689,6 +7690,10 @@
     "context": "product no longer exists error title",
     "string": "Product no longer exists"
   },
+  "p6ugX0": {
+    "context": "button to keep order",
+    "string": "Keep order"
+  },
   "pA8Mlv": {
     "context": "alert",
     "string": "Staff Member limit reached"
@@ -8792,6 +8797,10 @@
     "context": "button",
     "string": "Create Warehouse"
   },
+  "wmeRVH": {
+    "context": "dialog header",
+    "string": "Cancel order #{orderNumber}"
+  },
   "wn3di2": {
     "string": "This password is too commonly used"
   },
diff --git a/src/orders/components/OrderCancelDialog/OrderCancelDialog.test.tsx b/src/orders/components/OrderCancelDialog/OrderCancelDialog.test.tsx
new file mode 100644
index 00000000000..f3596c89c43
--- /dev/null
+++ b/src/orders/components/OrderCancelDialog/OrderCancelDialog.test.tsx
@@ -0,0 +1,68 @@
+import { OrderErrorCode, OrderErrorFragment } from "@dashboard/graphql";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import { FormattedMessage } from "react-intl";
+
+import { OrderCancelDialog } from "./OrderCancelDialog";
+
+jest.mock("react-intl", () => ({
+  useIntl: jest.fn(() => ({
+    formatMessage: jest.fn(x => x.defaultMessage),
+  })),
+  defineMessages: jest.fn(x => x),
+  FormattedMessage: jest.fn(() => <></>),
+}));
+
+const defaultProps = {
+  confirmButtonState: "default" as const,
+  errors: [],
+  open: true,
+  onClose: jest.fn(),
+  onSubmit: jest.fn(),
+  number: "123",
+};
+
+describe("OrderCancelDialog", () => {
+  it("displays order number in the dialog title", () => {
+    // Arrange
+    const orderNumber = "456";
+
+    // Act
+    render(<OrderCancelDialog {...defaultProps} number={orderNumber} />);
+
+    // Assert
+    expect(FormattedMessage).toHaveBeenCalledWith(
+      {
+        defaultMessage: "Cancel order #{orderNumber}",
+        description: "dialog header",
+        id: "wmeRVH",
+        values: { orderNumber: "456" },
+      },
+      {},
+    );
+  });
+
+  it("displays error messages when provided", () => {
+    // Arrange
+    const errors = [
+      { code: OrderErrorCode.CANNOT_CANCEL_ORDER },
+      { code: OrderErrorCode.GRAPHQL_ERROR },
+    ] as unknown as OrderErrorFragment[];
+
+    // Act
+    render(<OrderCancelDialog {...defaultProps} errors={errors} />);
+
+    // Assert
+    const errorMessages = screen.getAllByTestId("dialog-error");
+    expect(errorMessages).toHaveLength(errors.length);
+  });
+
+  it("does not display error messages when none are provided", () => {
+    // Act
+    render(<OrderCancelDialog {...defaultProps} errors={[]} />);
+
+    // Assert
+    const errorMessages = screen.queryAllByTestId("dialog-error");
+    expect(errorMessages).toHaveLength(0);
+  });
+});
diff --git a/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx b/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx
index 7fb72149281..3cb80ff5bff 100644
--- a/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx
+++ b/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx
@@ -3,21 +3,16 @@ import {
   ConfirmButton,
   ConfirmButtonTransitionState,
 } from "@dashboard/components/ConfirmButton";
-import FormSpacer from "@dashboard/components/FormSpacer";
+import { DashboardModal } from "@dashboard/components/Modal";
 import { OrderErrorFragment } from "@dashboard/graphql";
 import useModalDialogErrors from "@dashboard/hooks/useModalDialogErrors";
-import { buttonMessages } from "@dashboard/intl";
 import getOrderErrorMessage from "@dashboard/utils/errors/order";
-import {
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-  DialogTitle,
-} from "@material-ui/core";
+import { Text } from "@saleor/macaw-ui-next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
+import { cancelOrderDialogMessages } from "./messages";
+
 export interface OrderCancelDialogProps {
   confirmButtonState: ConfirmButtonTransitionState;
   errors: OrderErrorFragment[];
@@ -27,7 +22,7 @@ export interface OrderCancelDialogProps {
   onSubmit: () => void;
 }
 
-const OrderCancelDialog: React.FC<OrderCancelDialogProps> = props => {
+export const OrderCancelDialog: React.FC<OrderCancelDialogProps> = props => {
   const {
     confirmButtonState,
     errors: apiErrors,
@@ -41,47 +36,45 @@ const OrderCancelDialog: React.FC<OrderCancelDialogProps> = props => {
   const errors = useModalDialogErrors(apiErrors, open);
 
   return (
-    <Dialog onClose={onClose} open={open} maxWidth="sm">
-      <DialogTitle disableTypography>
-        <FormattedMessage
-          id="PRXpBm"
-          defaultMessage="Cancel Order"
-          description="dialog header"
-        />
-      </DialogTitle>
-      <DialogContent>
-        <DialogContentText key="cancel">
+    <DashboardModal onChange={onClose} open={open}>
+      <DashboardModal.Content>
+        <DashboardModal.Title data-test-id="dialog-title">
           <FormattedMessage
-            id="VSztEE"
-            defaultMessage="Cancelling this order will release unfulfilled stocks, so they can be bought by other customers. <b>Order will not be refunded when cancelling order - You need to do it manually.</b> Are you sure you want to cancel this order?"
+            {...cancelOrderDialogMessages.dialogTitle}
+            values={{ orderNumber }}
+          />
+        </DashboardModal.Title>
+        <Text>
+          <FormattedMessage
+            {...cancelOrderDialogMessages.dialogContent}
             values={{
               b: (...chunks) => <b>{chunks}</b>,
-              orderNumber,
             }}
           />
-        </DialogContentText>
-        {errors.length > 0 && (
-          <>
-            <FormSpacer />
-            {errors.map((err, index) => (
-              <DialogContentText color="error" key={index}>
-                {getOrderErrorMessage(err, intl)}
-              </DialogContentText>
-            ))}
-          </>
-        )}
-      </DialogContent>
-      <DialogActions>
-        <BackButton onClick={onClose} />
-        <ConfirmButton
-          onClick={onSubmit}
-          transitionState={confirmButtonState}
-          type="submit"
-        >
-          <FormattedMessage {...buttonMessages.accept} />
-        </ConfirmButton>
-      </DialogActions>
-    </Dialog>
+        </Text>
+        {errors.length > 0 &&
+          errors.map((err, index) => (
+            <Text color="critical1" key={index} data-test-id="dialog-error">
+              {getOrderErrorMessage(err, intl)}
+            </Text>
+          ))}
+
+        <DashboardModal.Actions>
+          <BackButton onClick={onClose}>
+            <FormattedMessage {...cancelOrderDialogMessages.buttonKeepOrder} />
+          </BackButton>
+          <ConfirmButton
+            onClick={onSubmit}
+            transitionState={confirmButtonState}
+            type="submit"
+          >
+            <FormattedMessage
+              {...cancelOrderDialogMessages.buttonCancelOrder}
+            />
+          </ConfirmButton>
+        </DashboardModal.Actions>
+      </DashboardModal.Content>
+    </DashboardModal>
   );
 };
 OrderCancelDialog.displayName = "OrderCancelDialog";
diff --git a/src/orders/components/OrderCancelDialog/messages.ts b/src/orders/components/OrderCancelDialog/messages.ts
new file mode 100644
index 00000000000..2ff9306968c
--- /dev/null
+++ b/src/orders/components/OrderCancelDialog/messages.ts
@@ -0,0 +1,25 @@
+import { defineMessages } from "react-intl";
+
+export const cancelOrderDialogMessages = defineMessages({
+  dialogTitle: {
+    id: "wmeRVH",
+    defaultMessage: "Cancel order #{orderNumber}",
+    description: "dialog header",
+  },
+  dialogContent: {
+    id: "NWA+MK",
+    defaultMessage:
+      "<b>Important:</b> Refunds need to be issued <b>manually</b> after order cancelation.",
+    description: "dialog content",
+  },
+  buttonKeepOrder: {
+    id: "p6ugX0",
+    defaultMessage: "Keep order",
+    description: "button to keep order",
+  },
+  buttonCancelOrder: {
+    id: "bKTEnb",
+    defaultMessage: "Cancel order",
+    description: "button to cancel order",
+  },
+});