diff --git a/packages/web/src/scss/components/Modal/README.md b/packages/web/src/scss/components/Modal/README.md
index 8c81822afb..60a1b960a5 100644
--- a/packages/web/src/scss/components/Modal/README.md
+++ b/packages/web/src/scss/components/Modal/README.md
@@ -60,6 +60,9 @@ This is useful for Modals with dynamic content, e.g. a list of items that can be
 </dialog>
 ```
 
+👉 Please note the preferred height options are ignored when scrolling inside ModalDialog is
+[turned off](#disable-scrolling-inside-modaldialog).
+
 👉 Please note the custom height values are considered **preferred:** Modal will not expand beyond the viewport height.
 
 ### Custom Max Height
@@ -82,6 +85,8 @@ You can use the custom property `--modal-max-height-tablet` to override the max
 </dialog>
 ```
 
+👉 Please note the max height is ignored when scrolling inside ModalDialog is [turned off](#disable-scrolling-inside-modaldialog).
+
 👉 Please note the max height on mobile screens is currently not customizable. Let us know if you need this feature! 🙏
 
 ## ModalDialog
@@ -246,7 +251,7 @@ Use our JavaScript plugin to open your Modal, e.g.:
 </button>
 ```
 
-## Disable Modal closing on backdrop click
+## Disable Modal Closing on Backdrop Click
 
 Disable modal close when clicking on the backdrop.
 You can still close modal with close buttons or ESC key.
@@ -280,6 +285,27 @@ scrolling, e.g.:
 </div>
 ```
 
+### Disable Scrolling Inside ModalDialog
+
+Scrolling inside ModalDialog can be turned off by adding the `ModalDialog--nonScrollable` modifier class:
+
+```html
+<article class="ModalDialog ModalDialog--nonScrollable">
+  <!-- … -->
+</article>
+```
+
+This way, the ModalBody will expand to fit the height of its content and the whole ModalDialog will scroll in case the
+content is longer than user's viewport.
+
+👉 Please note that this modifier class can produce unexpected results when used in combination with ScrollView.
+
+#### ⚠️ DEPRECATION NOTICE
+
+The `.ModalDialog--nonScrollable` modifier will be removed in the next major release and the ModalDialog will be made
+non-scrollable by default. It will be possible to re-enable the inside scrolling by adding the
+`.ModalDialog--scrollable` modifier class (which will remain the recommended default usage).
+
 ## Stacking Modals
 
 Multiple Modals can be open at the same time. That means, you can open a Modal from another Modal, and they will display
diff --git a/packages/web/src/scss/components/Modal/_Modal.scss b/packages/web/src/scss/components/Modal/_Modal.scss
index 4e0c3d2d48..a2af9d2200 100644
--- a/packages/web/src/scss/components/Modal/_Modal.scss
+++ b/packages/web/src/scss/components/Modal/_Modal.scss
@@ -1,10 +1,11 @@
 // 1. In order to be transitioned, the visibility of the dialog is controlled through `opacity` and `visibility`
 //    properties instead of the default `display`.
-// 2. Use a `::before` pseudo-element instead of `::backdrop` to make fading possible.
-// 3. Allow scrolling through the backdrop.
-// 4. Restore text selection after `all: unset`.
-// 5. For alignments other than `top`, prefer the `bottom` CSS property to enable smooth transitions between the uniform
-//    and docked variants (see `_ModalDialog.scss`).
+// 2. Simply use Modal background color instead of `::backdrop` to make fading possible. (A pseudo-element cannot be
+//    used because it covers the scrollbar of the ModalDialog with the inside scrolling turned off.)
+// 3. Use background gradient to prevent background from flickering in Safari.
+// 4. Clip overflow during transition of the docked variant on mobile screens.
+// 5. Allow scrolling through the modal. Has no effect unless the modal is taller than the viewport.
+// 6. Restore text selection after `all: unset`.
 
 @use 'sass:map';
 @use '../../tools/breakpoint';
@@ -19,6 +20,8 @@
     z-index: 1;
     display: flex; // 1.
     padding-block: theme.$padding-y;
+    overflow: hidden; // 4.
+    background: linear-gradient(#{theme.$backdrop-background-color}, #{theme.$backdrop-background-color}); // 8.
     visibility: hidden; // 1.
     opacity: 0; // 1.
     pointer-events: none; // 1.
@@ -29,29 +32,16 @@
         background-color: transparent;
     }
 
-    // 2.
-    &::before {
-        content: '';
-        position: fixed;
-        inset: 0;
-        z-index: -2;
-        background-color: theme.$backdrop-background-color;
-        visibility: hidden;
-        opacity: 0;
-    }
-
     @media (prefers-reduced-motion: no-preference) {
         transition-property: visibility, opacity;
         transition-duration: theme.$transition-duration;
-
-        // 2.
-        &::before {
-            transition: inherit;
-        }
     }
 }
 
-// 5.
+.Modal:has(.ModalDialog--nonScrollable) {
+    overflow-y: auto; // 5.
+}
+
 .Modal--center,
 .Modal:not(.Modal--top, .Modal--bottom) {
     --modal-top: auto;
@@ -80,13 +70,6 @@
 
     visibility: visible;
     opacity: 1;
-    user-select: text; // 4.
+    user-select: text; // 6.
     pointer-events: auto;
-
-    // 2.
-    &::before {
-        visibility: visible;
-        opacity: 1;
-        pointer-events: none; // 3.
-    }
 }
diff --git a/packages/web/src/scss/components/Modal/_ModalDialog.scss b/packages/web/src/scss/components/Modal/_ModalDialog.scss
index ae011ef526..cbbf30c771 100644
--- a/packages/web/src/scss/components/Modal/_ModalDialog.scss
+++ b/packages/web/src/scss/components/Modal/_ModalDialog.scss
@@ -6,6 +6,7 @@
 // 5. Unfortunately, the open state cannot be part of the parent `-docked-modal-dialog()` mixin because it's not
 //    possible to generate selector for the feature class scenario.
 // 6. Override bottom padding of parent `.Modal` in the docked variant.
+// 7. Override the min-height of the expanded docked variant.
 
 @use 'sass:map';
 @use '../../settings/feature-flags';
@@ -53,13 +54,12 @@
         width: theme.$dialog-uniform-width;
         max-width: calc(100% - #{theme.$padding-x});
         height: theme.$dialog-uniform-height;
-        max-height: theme.$dialog-uniform-max-height;
+        min-height: unset; // 7. @deprecated Can be removed once the uniform modal dialog has been made default.
         border-radius: theme.$dialog-border-radius;
     }
 
     @include breakpoint.up(map.get(theme.$breakpoints, tablet)) {
-        height: theme.$dialog-height-tablet;
-        max-height: theme.$dialog-uniform-max-height-tablet;
+        height: theme.$dialog-uniform-height-tablet;
     }
 
     @include breakpoint.up(map.get(theme.$breakpoints, desktop)) {
@@ -67,6 +67,16 @@
     }
 }
 
+@mixin -scrollable-uniform-modal-dialog($from-breakpoint) {
+    @if $from-breakpoint == 0 {
+        max-height: theme.$dialog-uniform-max-height;
+    }
+
+    @include breakpoint.up(map.get(theme.$breakpoints, tablet)) {
+        max-height: theme.$dialog-uniform-max-height-tablet;
+    }
+}
+
 @mixin -docked-modal-dialog() {
     @include breakpoint.down(map.get(theme.$breakpoints, tablet)) {
         --modal-top: auto;
@@ -76,8 +86,7 @@
 
         width: theme.$dialog-width;
         max-width: none;
-        height: theme.$dialog-height;
-        max-height: theme.$dialog-max-height;
+        height: theme.$dialog-docked-height;
         border-radius: theme.$dialog-border-radius theme.$dialog-border-radius 0 0;
     }
 }
@@ -91,10 +100,23 @@
 
 @mixin -expand-docked-modal-dialog() {
     @include breakpoint.down(map.get(theme.$breakpoints, tablet)) {
-        height: theme.$dialog-max-height;
+        min-height: theme.$dialog-docked-expanded-height;
     }
 }
 
+@mixin -scrollable-docked-modal-dialog() {
+    @include breakpoint.down(map.get(theme.$breakpoints, tablet)) {
+        max-height: theme.$dialog-docked-expanded-height;
+    }
+}
+
+// @deprecated The non-scrollable modal dialog is deprecated and will be removed in the next major release.
+// Migration: In CSS, make the modal dialog non-scrollable by default so scrolling inside is turned on by a modifier class.
+@mixin -non-scrollable-modal-dialog() {
+    height: auto;
+    max-height: none;
+}
+
 .ModalDialog {
     @include -modal-dialog();
 
@@ -102,9 +124,12 @@
     // Migration: Remove the feature flag and make the uniform dialog the default.
     @if feature-flags.$modal-enable-uniform-dialog {
         @include -uniform-modal-dialog($from-breakpoint: map.get(theme.$breakpoints, mobile));
+        @include -scrollable-uniform-modal-dialog($from-breakpoint: map.get(theme.$breakpoints, mobile));
     } @else {
         @include -docked-modal-dialog();
+        @include -scrollable-docked-modal-dialog();
         @include -uniform-modal-dialog($from-breakpoint: map.get(theme.$breakpoints, tablet));
+        @include -scrollable-uniform-modal-dialog($from-breakpoint: map.get(theme.$breakpoints, tablet));
 
         [open] > & {
             @include -open-docked-modal-dialog();
@@ -126,22 +151,36 @@
     .ModalDialog--dockOnMobile.ModalDialog--expandOnMobile {
         @include -expand-docked-modal-dialog();
     }
+
+    .ModalDialog--nonScrollable {
+        @include -non-scrollable-modal-dialog();
+    }
 } @else {
     .spirit-feature-modal-enable-uniform-dialog .ModalDialog {
         @include -uniform-modal-dialog($from-breakpoint: map.get(theme.$breakpoints, mobile));
+        @include -scrollable-uniform-modal-dialog($from-breakpoint: map.get(theme.$breakpoints, mobile));
     }
 
     .spirit-feature-modal-enable-uniform-dialog .ModalDialog--dockOnMobile {
         @include -docked-modal-dialog();
+        @include -scrollable-docked-modal-dialog();
     }
 
     .spirit-feature-modal-enable-uniform-dialog [open] > .ModalDialog--dockOnMobile {
         @include -open-docked-modal-dialog();
     }
 
-    // stylelint-disable-next-line selector-max-class -- Only target the docked variant.
+    // stylelint-disable selector-max-class, no-descending-specificity -- Only target the docked variant.
     .ModalDialog--expandOnMobile,
     .spirit-feature-modal-enable-uniform-dialog .ModalDialog--dockOnMobile.ModalDialog--expandOnMobile {
         @include -expand-docked-modal-dialog();
     }
+    // stylelint-enable selector-max-class
+
+    // @deprecated The non-scrollable modal dialog is deprecated and will be removed in the next major release.
+    // Migration: In CSS, make the modal dialog non-scrollable by default so scrolling inside is turned on by a modifier class.
+    .ModalDialog--nonScrollable,
+    .spirit-feature-modal-enable-uniform-dialog .ModalDialog--nonScrollable {
+        @include -non-scrollable-modal-dialog();
+    }
 }
diff --git a/packages/web/src/scss/components/Modal/_theme.scss b/packages/web/src/scss/components/Modal/_theme.scss
index 3f24094c78..929519ff58 100644
--- a/packages/web/src/scss/components/Modal/_theme.scss
+++ b/packages/web/src/scss/components/Modal/_theme.scss
@@ -19,21 +19,22 @@ $common-padding-x-tablet: tokens.$space-800;
 $dialog-width: 100%;
 $dialog-width-tablet: 640px;
 $dialog-width-desktop: 680px;
-$dialog-height: var(--modal-preferred-height-mobile, min-content);
-$dialog-height-tablet: var(--modal-preferred-height-tablet, min-content);
-$dialog-max-height: calc(100dvh - #{tokens.$space-1100});
-$dialog-max-height-tablet: min(var(--modal-max-height-tablet, 600px), calc(100dvh - #{2 * tokens.$space-600}));
 $dialog-text-color: tokens.$text-primary-default;
 $dialog-border-radius: tokens.$radius-200;
 $dialog-background-color: tokens.$background-basic;
 $dialog-shadow: tokens.$shadow-300;
 
-// @deprecated The "uniform" Header padding is deprecated and will be removed in the next major release.
+// @deprecated The "uniform" dialog dimensions are deprecated and will be removed in the next major release.
 // Migration: Rename the variables containing the `uniform` keyword to remove it.
 $dialog-uniform-width: 640px;
 $dialog-uniform-height: var(--modal-preferred-height-mobile, min-content);
-$dialog-uniform-max-height: min(var(--modal-max-height-mobile, 600px), calc(100dvh - #{2 * tokens.$space-600}));
-$dialog-uniform-max-height-tablet: min(var(--modal-max-height-tablet, 600px), calc(100dvh - #{2 * tokens.$space-600}));
+$dialog-uniform-height-tablet: var(--modal-preferred-height-tablet, min-content);
+$dialog-uniform-max-height: min(var(--modal-max-height-mobile, 600px), calc(100dvh - #{2 * $padding-y}));
+$dialog-uniform-max-height-tablet: min(var(--modal-max-height-tablet, 600px), calc(100dvh - #{2 * $padding-y}));
+
+$dialog-docked-height: var(--modal-preferred-height-mobile, min-content);
+$dialog-docked-margin-top: tokens.$space-1100;
+$dialog-docked-expanded-height: calc(100dvh - #{$dialog-docked-margin-top});
 
 // ModalHeader
 $header-gap: tokens.$space-400;
diff --git a/packages/web/src/scss/components/Modal/index.html b/packages/web/src/scss/components/Modal/index.html
index 74a62e3f03..54617ff63e 100644
--- a/packages/web/src/scss/components/Modal/index.html
+++ b/packages/web/src/scss/components/Modal/index.html
@@ -15,9 +15,22 @@
     footerElement.classList.add(`ModalFooter--${event.target.value}`);
   };
 
+  const toggleDockOnMobile = (selector, dependingInputSelector) => {
+    const dependingInputElement = document.querySelector(dependingInputSelector);
+    const dependingLabelElement = dependingInputElement.closest('label');
+
+    document.querySelector(selector).classList.toggle('ModalDialog--dockOnMobile');
+    dependingInputElement.disabled = !dependingInputElement.disabled;
+    dependingLabelElement.classList.toggle('Checkbox--disabled');
+  }
+
   const toggleExpandOnMobile = (selector) => {
     document.querySelector(selector).classList.toggle('ModalDialog--expandOnMobile');
   }
+
+  const toggleScrolling = (selector) => {
+    document.querySelector(selector).classList.toggle('ModalDialog--nonScrollable');
+  }
 </script>
 
 <section class="docs-Section">
@@ -559,6 +572,100 @@ <h2 id="example-scroll-view-title" class="ModalHeader__title">
     </dialog>
     <!-- Modal: end -->
 
+    <button
+      type="button"
+      class="Button Button--primary Button--medium"
+      data-spirit-toggle="modal"
+      data-spirit-target="#example-non-scrolling-modal"
+      aria-controls="example-non-scrolling-modal"
+      aria-expanded="false"
+    >
+      Open Modal with Disabled Scrolling Inside
+    </button>
+
+    <!-- Modal: start -->
+    <dialog id="example-non-scrolling-modal" class="Modal Modal--center" aria-labelledby="example-non-scrolling-modal-title">
+
+      <!-- ModalDialog: start -->
+      <article class="ModalDialog ModalDialog--nonScrollable">
+
+        <!-- ModalHeader: start -->
+        <header class="ModalHeader">
+          <h2 id="example-non-scrolling-modal-title" class="ModalHeader__title">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia perferendis reprehenderit, voluptate. Cum delectus dicta
+          </h2>
+          <button
+            type="button"
+            class="Button Button--tertiary Button--square Button--medium"
+            data-spirit-dismiss="modal"
+            data-spirit-target="#example-non-scrolling-modal"
+            aria-controls="example-non-scrolling-modal"
+            aria-expanded="false"
+          >
+            <svg width="24" height="24" aria-hidden="true">
+              <use xlink:href="/icons/svg/sprite.svg#close" />
+            </svg>
+            <span class="accessibility-hidden">Close</span>
+          </button>
+        </header>
+        <!-- ModalHeader: end -->
+
+        <!-- ModalBody: start -->
+        <div class="ModalBody">
+          <!-- Content: start -->
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+            perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+            provident unde. Eveniet, iste, molestiae?
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+            perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+            provident unde. Eveniet, iste, molestiae?
+          </p>
+          <p style="margin-bottom: 100vh">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+            perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+            provident unde. Eveniet, iste, molestiae?
+          </p>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+            perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+            provident unde. Eveniet, iste, molestiae?
+          </p>
+          <!-- Content: end -->
+        </div>
+        <!-- ModalBody: end -->
+
+        <!-- ModalFooter: start -->
+        <footer class="ModalFooter ModalFooter--right">
+          <div class="ModalFooter__actions">
+            <button
+              type="button"
+              class="Button Button--primary Button--medium"
+              data-spirit-dismiss="modal"
+              data-spirit-target="#example-non-scrolling-modal"
+            >
+              Primary action
+            </button>
+            <button
+              type="button"
+              class="Button Button--secondary Button--medium"
+              data-spirit-dismiss="modal"
+              data-spirit-target="#example-non-scrolling-modal"
+            >
+              Secondary action
+            </button>
+          </div>
+        </footer>
+        <!-- ModalFooter: end -->
+
+      </article>
+      <!-- ModalDialog: end -->
+
+    </dialog>
+    <!-- Modal: end -->
+
   </div>
 
 </section>
@@ -802,17 +909,6 @@ <h2 class="docs-Heading">Feature Flag: Uniform Modal on Mobile</h2>
       Open Modal
     </button>
 
-    <button
-      type="button"
-      class="Button Button--primary Button--medium"
-      data-spirit-toggle="modal"
-      data-spirit-target="#example-docked"
-      aria-controls="example-docked"
-      aria-expanded="false"
-    >
-      Open Docked Modal (mobile only)
-    </button>
-
     <!-- Modal: start -->
     <dialog id="example-uniform" class="Modal Modal--center" aria-labelledby="example-uniform-title">
 
@@ -847,7 +943,7 @@ <h2 id="example-uniform-title" class="ModalHeader__title">Modal Title</h2>
             provident unde. Eveniet, iste, molestiae?
           </p>
           <!-- Modal alignment demo: start -->
-          <form onchange="setModalAlignment(event, '#example-uniform')" class="mb-tablet-600">
+          <form onchange="setModalAlignment(event, '#example-uniform')" class="mb-600">
             <div>Modal alignment:</div>
             <label for="modal-uniform-alignment-top" class="Radio mr-600">
               <input type="radio" id="modal-uniform-alignment-top" name="modal-alignment" value="top" class="Radio__input" autocomplete="off" />
@@ -864,7 +960,7 @@ <h2 id="example-uniform-title" class="ModalHeader__title">Modal Title</h2>
           </form>
           <!-- Modal alignment demo: end -->
           <!-- Footer alignment demo: start -->
-          <form onchange="setFooterAlignment(event, '#example-uniform .ModalFooter')" class="d-none d-tablet-block">
+          <form onchange="setFooterAlignment(event, '#example-uniform .ModalFooter')" class="d-none d-tablet-block mb-600">
             <div>Footer alignment (from tablet up):</div>
             <label for="footer-uniform-alignment-left" class="Radio mr-600">
               <input type="radio" id="footer-uniform-alignment-left" name="footer-alignment" value="left" class="Radio__input" autocomplete="off" />
@@ -880,6 +976,29 @@ <h2 id="example-uniform-title" class="ModalHeader__title">Modal Title</h2>
             </label>
           </form>
           <!-- Footer alignment demo: end -->
+          <!-- Modal features demo: start -->
+          <form class="Stack Stack--hasSpacing">
+            <label for="modal-uniform-docked" class="Checkbox">
+              <input type="checkbox" id="modal-uniform-docked" class="Checkbox__input" onchange="toggleDockOnMobile('#example-uniform-dialog', '#modal-uniform-expanded')" autocomplete="off" />
+              <span class="Checkbox__text">
+                  <span class="Checkbox__label">Dock on mobile</span>
+                </span>
+            </label>
+            <label for="modal-uniform-expanded" class="Checkbox Checkbox--disabled" id="modal-uniform-expanded-label">
+              <input type="checkbox" id="modal-uniform-expanded" class="Checkbox__input" onchange="toggleExpandOnMobile('#example-uniform-dialog')" autocomplete="off" disabled />
+              <span class="Checkbox__text">
+                  <span class="Checkbox__label">Expand on mobile (docked only)</span>
+                </span>
+            </label>
+            <label for="modal-uniform-non-scrolling" class="Checkbox">
+              <input type="checkbox" id="modal-uniform-non-scrolling" class="Checkbox__input" onchange="toggleScrolling('#example-uniform-dialog')" autocomplete="off" checked />
+              <span class="Checkbox__text">
+                  <span class="Checkbox__label">Scrolling inside</span>
+                </span>
+            </label>
+          </form>
+          <!-- Modal features demo: end -->
+
           <!-- Content: end -->
         </div>
         <!-- ModalBody: end -->
@@ -916,75 +1035,6 @@ <h2 id="example-uniform-title" class="ModalHeader__title">Modal Title</h2>
     </dialog>
     <!-- Modal: end -->
 
-    <!-- Modal: start -->
-    <dialog id="example-docked" class="Modal Modal--center" aria-labelledby="example-docked-title">
-
-      <!-- ModalDialog: start -->
-      <article id="example-docked-dialog" class="ModalDialog ModalDialog--dockOnMobile ModalDialog--expandOnMobile">
-
-        <!-- ModalHeader: start -->
-        <header class="ModalHeader">
-          <h2 id="example-docked-title" class="ModalHeader__title">Modal Title</h2>
-          <button
-            type="button"
-            class="Button Button--tertiary Button--square Button--medium"
-            data-spirit-dismiss="modal"
-            data-spirit-target="#example-docked"
-            aria-controls="example-docked"
-            aria-expanded="false"
-          >
-            <svg width="24" height="24" aria-hidden="true">
-              <use xlink:href="/icons/svg/sprite.svg#close" />
-            </svg>
-            <span class="accessibility-hidden">Close</span>
-          </button>
-        </header>
-        <!-- ModalHeader: end -->
-
-        <!-- ModalBody: start -->
-        <div class="ModalBody">
-          <!-- Content: start -->
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
-            perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
-            provident unde. Eveniet, iste, molestiae?
-          </p>
-          <!-- Content: end -->
-        </div>
-        <!-- ModalBody: end -->
-
-        <!-- ModalFooter: start -->
-        <footer class="ModalFooter ModalFooter--right">
-          <div class="ModalFooter__description">
-            Optional description
-          </div>
-          <div class="ModalFooter__actions">
-            <button
-              type="button"
-              class="Button Button--primary Button--medium"
-              data-spirit-dismiss="modal"
-              data-spirit-target="#example-docked"
-            >
-              Primary action
-            </button>
-            <button
-              type="button"
-              class="Button Button--secondary Button--medium"
-              data-spirit-dismiss="modal"
-              data-spirit-target="#example-docked"
-            >
-              Secondary action
-            </button>
-          </div>
-        </footer>
-        <!-- ModalFooter: end -->
-
-      </article>
-      <!-- ModalDialog: end -->
-
-    </dialog>
-    <!-- Modal: end -->
-
   </div>
 </section>