diff --git a/packages/react/src/components/Modal/index.scss b/packages/react/src/components/Modal/index.scss
index 22bfbc7..e1f9bd4 100644
--- a/packages/react/src/components/Modal/index.scss
+++ b/packages/react/src/components/Modal/index.scss
@@ -84,6 +84,16 @@
     &--sided {
       justify-content: space-between;
       gap: 0;
+
+      @include media(sm) {
+        flex-direction: column;
+        gap: 1rem;
+        align-items: center;
+
+        > div {
+          width: 100%;
+        }
+      }
     }
 
     &__left, &__right {
diff --git a/packages/react/src/components/Modal/index.stories.tsx b/packages/react/src/components/Modal/index.stories.tsx
index 8d33fe5..57d0c5a 100644
--- a/packages/react/src/components/Modal/index.stories.tsx
+++ b/packages/react/src/components/Modal/index.stories.tsx
@@ -85,33 +85,57 @@ export const PreventClose: Story = {
 export const PrimaryButton: Story = {
   args: {
     size: ModalSize.MEDIUM,
-    rightActions: <Button color="primary">Primary</Button>,
+    rightActions: (
+      <Button color="primary" fullWidth={true}>
+        Primary
+      </Button>
+    ),
   },
 };
 
 export const SecondaryButton: Story = {
   args: {
     size: ModalSize.MEDIUM,
-    rightActions: <Button color="secondary">Secondary</Button>,
+    rightActions: (
+      <Button color="secondary" fullWidth={true}>
+        Secondary
+      </Button>
+    ),
   },
 };
 
 export const TwoButtons: Story = {
   args: {
     size: ModalSize.MEDIUM,
-    leftActions: <Button color="secondary">Secondary</Button>,
-    rightActions: <Button color="primary">Primary</Button>,
+    leftActions: (
+      <Button color="secondary" fullWidth={true}>
+        Secondary
+      </Button>
+    ),
+    rightActions: (
+      <Button color="primary" fullWidth={true}>
+        Primary
+      </Button>
+    ),
   },
 };
 
 export const ThreeButtons: Story = {
   args: {
     size: ModalSize.MEDIUM,
-    leftActions: <Button color="tertiary">Tertiary</Button>,
+    leftActions: (
+      <Button color="tertiary" fullWidth={true}>
+        Tertiary
+      </Button>
+    ),
     rightActions: (
       <>
-        <Button color="secondary">Secondary</Button>
-        <Button color="primary">Primary</Button>
+        <Button color="secondary" fullWidth={true}>
+          Secondary
+        </Button>
+        <Button color="primary" fullWidth={true}>
+          Primary
+        </Button>
       </>
     ),
   },