diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
index 73388af63c..25480a4633 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -17506,8 +17506,8 @@ of the most recent getModalRoot call as an argument.",
     {
       "defaultValue": "'medium'",
       "description": "Sets the width of the modal. \`max\` uses variable width up to the
-largest size allowed by the design guidelines. Other sizes
-(\`small\`/\`medium\`/\`large\`) have fixed widths.",
+largest size allowed by the design guidelines. Other sizes:
+\`small\` (320px), \`medium\` (600px), \`large\` (820px), \`x-large\` (1024px), \`xx-large\` (1280px).",
       "inlineType": {
         "name": "ModalProps.Size",
         "type": "union",
@@ -17516,6 +17516,8 @@ largest size allowed by the design guidelines. Other sizes
           "max",
           "medium",
           "large",
+          "x-large",
+          "xx-large",
         ],
       },
       "name": "size",
diff --git a/src/modal/__tests__/modal.test.tsx b/src/modal/__tests__/modal.test.tsx
index 94d43364e1..d36bb7ab3d 100644
--- a/src/modal/__tests__/modal.test.tsx
+++ b/src/modal/__tests__/modal.test.tsx
@@ -112,7 +112,7 @@ describe('Modal component', () => {
 
   describe('size property', () => {
     it('displays correct size', () => {
-      (['small', 'medium', 'large', 'max'] as ModalProps.Size[]).forEach(size => {
+      (['small', 'medium', 'large', 'x-large', 'xx-large', 'max'] as ModalProps.Size[]).forEach(size => {
         const wrapper = renderModal({ size });
         expect(wrapper.findDialog().getElement()).toHaveClass(styles[size]);
       });
diff --git a/src/modal/interfaces.ts b/src/modal/interfaces.ts
index f13a4b90c3..de33a935b9 100644
--- a/src/modal/interfaces.ts
+++ b/src/modal/interfaces.ts
@@ -26,8 +26,8 @@ export interface BaseModalProps {
 export interface ModalProps extends BaseComponentProps, BaseModalProps {
   /**
    * Sets the width of the modal. `max` uses variable width up to the
-   * largest size allowed by the design guidelines. Other sizes
-   * (`small`/`medium`/`large`) have fixed widths.
+   * largest size allowed by the design guidelines. Other sizes:
+   * `small` (320px), `medium` (600px), `large` (820px), `x-large` (1024px), `xx-large` (1280px).
    */
   size?: ModalProps.Size;
   /**
@@ -81,7 +81,7 @@ export interface ModalProps extends BaseComponentProps, BaseModalProps {
 }
 
 export namespace ModalProps {
-  export type Size = 'small' | 'medium' | 'large' | 'max';
+  export type Size = 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'max';
 
   export interface DismissDetail {
     reason: string;
diff --git a/src/modal/styles.scss b/src/modal/styles.scss
index dfaf049e6c..b3165c767b 100644
--- a/src/modal/styles.scss
+++ b/src/modal/styles.scss
@@ -54,6 +54,12 @@ $modal-z-index: 5000;
   z-index: $modal-z-index;
   pointer-events: all;
 
+  // viewport - (closed app layout panel widths + 20px on each side)
+  $max-modal-size: calc(100vw - (2 * 4 * #{styles.$base-size} + #{awsui.$space-xxxl}));
+  $size-large: 820px;
+  $size-x-large: 1024px;
+  $size-xx-large: 1280px;
+
   &.small {
     max-inline-size: 320px;
   }
@@ -63,14 +69,35 @@ $modal-z-index: 5000;
   }
 
   &.large {
-    max-inline-size: 820px;
+    max-inline-size: $size-large;
+  }
+
+  &.x-large {
+    max-inline-size: $size-x-large;
+  }
+
+  &.xx-large {
+    max-inline-size: $size-xx-large;
   }
 
-  &.max.breakpoint-xs {
-    // viewport - (closed app layout panel widths + 20px on each side)
-    max-inline-size: calc(100vw - (2 * 4 * #{styles.$base-size} + #{awsui.$space-xxxl}));
-    margin-block: auto;
-    margin-inline: auto;
+  &.breakpoint-xs {
+    &.large {
+      max-inline-size: min($size-large, $max-modal-size);
+    }
+
+    &.x-large {
+      max-inline-size: min($size-x-large, $max-modal-size);
+    }
+
+    &.xx-large {
+      max-inline-size: min($size-xx-large, $max-modal-size);
+    }
+
+    &.max {
+      max-inline-size: $max-modal-size;
+      margin-block: auto;
+      margin-inline: auto;
+    }
   }
 }