diff --git a/packages/web/src/scss/components/Modal/README.md b/packages/web/src/scss/components/Modal/README.md
index ad576a2afe..7337a829ba 100644
--- a/packages/web/src/scss/components/Modal/README.md
+++ b/packages/web/src/scss/components/Modal/README.md
@@ -14,7 +14,7 @@ Modal establishes the top layer with a backdrop. Under the hood it uses the [`<d
 provides several accessibility advantages.
 
 ```html
-<dialog id="example_1" class="Modal" aria-labelledby="example_1_title">
+<dialog id="modal-example" class="Modal" aria-labelledby="modal-example-title">
   <!-- ModalDialog -->
 </dialog>
 ```
@@ -34,9 +34,9 @@ This is useful for Modals with dynamic content, e.g. a list of items that can be
 
 ```html
 <dialog
-  id="example_1"
+  id="modal-example"
   class="Modal"
-  aria-labelledby="example_1_title"
+  aria-labelledby="modal-example-title"
   style="--modal-preferred-height-mobile: 400px; --modal-preferred-height-tablet: 500px;"
 >
   <!-- ModalDialog -->
@@ -55,7 +55,7 @@ The default maximum height of Modal is:
 You can use the custom property `--modal-max-height-tablet` to override the max height on tablet screens and up:
 
 ```html
-<dialog id="example_1" class="Modal" aria-labelledby="example_1_title" style="--modal-max-height-tablet: 700px">
+<dialog id="modal-example" class="Modal" aria-labelledby="modal-example-title" style="--modal-max-height-tablet: 700px">
   <!-- ModalDialog -->
 </dialog>
 ```
@@ -107,13 +107,13 @@ and allows users to easily close it.
 
 ```html
 <div class="ModalHeader">
-  <h2 id="example_1_title" class="ModalHeader__title">Modal Title</h2>
+  <h2 id="modal-example-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_1"
-    aria-controls="example_1"
+    data-spirit-target="#modal-example"
+    aria-controls="modal-example"
     aria-expanded="false"
   >
     <svg width="24" height="24" aria-hidden="true">
@@ -130,7 +130,7 @@ Even in cases you don't need the title to be visible you should provide an acces
 the `aria-label` attribute on the `<dialog>` element:
 
 ```html
-<dialog id="example_1" class="Modal" aria-label="Accessible Modal Title">
+<dialog id="modal-example" class="Modal" aria-label="Accessible Modal Title">
   <!-- … -->
 </dialog>
 ```
@@ -168,7 +168,7 @@ to compensate for the lost spacing by applying utility spacing classes to the Mo
       type="button"
       class="Button Button--primary Button--medium"
       data-spirit-dismiss="modal"
-      data-spirit-target="#example_1"
+      data-spirit-target="#modal-example"
     >
       Primary action
     </button>
@@ -176,7 +176,7 @@ to compensate for the lost spacing by applying utility spacing classes to the Mo
       type="button"
       class="Button Button--secondary Button--medium"
       data-spirit-dismiss="modal"
-      data-spirit-target="#example_1"
+      data-spirit-target="#modal-example"
     >
       Secondary action
     </button>
@@ -215,8 +215,8 @@ Use our JavaScript plugin to open your Modal, e.g.:
   type="button"
   class="Button Button--primary Button--medium"
   data-spirit-toggle="modal"
-  data-spirit-target="#example_1"
-  aria-controls="example_1"
+  data-spirit-target="#modal-example"
+  aria-controls="modal-example"
   aria-expanded="false"
 >
   Open Modal
@@ -229,7 +229,7 @@ Disable modal close when clicking on the backdrop.
 You can still close modal with close buttons or ESC key.
 
 ```html
-<dialog id="example_1" class="Modal" data-spirit-backdrop-close-disabled="true">
+<dialog id="modal-example" class="Modal" data-spirit-backdrop-close-disabled="true">
   <!-- … -->
 </dialog>
 ```
@@ -267,8 +267,8 @@ When you put it all together:
   type="button"
   class="Button Button--primary Button--medium"
   data-spirit-toggle="modal"
-  data-spirit-target="#example_1"
-  aria-controls="example_1"
+  data-spirit-target="#modal-example"
+  aria-controls="modal-example"
   aria-expanded="false"
 >
   Open Modal
@@ -276,18 +276,18 @@ When you put it all together:
 <!-- Modal Trigger: end -->
 
 <!-- Modal: start -->
-<dialog id="example_1" class="Modal" aria-labelledby="example_1_title">
+<dialog id="modal-example" class="Modal" aria-labelledby="modal-example-title">
   <!-- ModalDialog: start -->
   <article class="ModalDialog">
     <!-- ModalHeader: start -->
     <div class="ModalHeader">
-      <h2 id="example_1_title" class="ModalHeader__title">Modal Title</h2>
+      <h2 id="modal-example-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_1"
-        aria-controls="example_1"
+        data-spirit-target="#modal-example"
+        aria-controls="modal-example"
         aria-expanded="false"
       >
         <svg width="24" height="24" aria-hidden="true">
@@ -318,7 +318,7 @@ When you put it all together:
           type="button"
           class="Button Button--primary Button--medium"
           data-spirit-dismiss="modal"
-          data-spirit-target="#example_1"
+          data-spirit-target="#modal-example"
         >
           Primary action
         </button>
@@ -326,7 +326,7 @@ When you put it all together:
           type="button"
           class="Button Button--secondary Button--medium"
           data-spirit-dismiss="modal"
-          data-spirit-target="#example_1"
+          data-spirit-target="#modal-example"
         >
           Secondary action
         </button>
@@ -352,6 +352,21 @@ Both trigger and close buttons use `data` attributes to open and close the Modal
 | `data-spirit-target`                  | `string` | —       | ✔        | Target selector                                       |
 | `data-spirit-toggle`                  | `string` | `modal` | ✕        | Iterable selector                                     |
 
+## Feature Flag: Uniform Appearance on All Breakpoints
+
+The uniform appearance of modal dialog on all breakpoints is disabled by default. To enable it, either set the
+`$modal-enable-uniform-dialog` feature flag to `true` or use the `spirit-modal-enable-uniform-dialog` CSS class on any
+parent of the modal.
+
+For more info, see main [README][readme-feature-flags].
+
+### ⚠️ DEPRECATION NOTICE
+
+The uniform dialog appearance will replace current behavior in the next major release. Current mobile appearance will
+remain accessible via the `.ModalDialog--dockOnMobile` modifier class.
+
+[What are deprecations?][readme-deprecations]
+
 ## JavaScript Plugin
 
 For full functionality you need to provide JavaScript which will handle the toggling of the Modal dialog component.
@@ -369,3 +384,5 @@ Or feel free to write controlling scripts yourself.
 [scroll-view]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/ScrollView/README.md
 [web-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md
 [dictionary-alignment]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#alignment
+[readme-deprecations]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md#deprecations
+[readme-feature-flags]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md#feature-flags
diff --git a/packages/web/src/scss/components/Modal/_Modal.scss b/packages/web/src/scss/components/Modal/_Modal.scss
index 769a891703..a509b25de0 100644
--- a/packages/web/src/scss/components/Modal/_Modal.scss
+++ b/packages/web/src/scss/components/Modal/_Modal.scss
@@ -46,7 +46,6 @@
     @media (prefers-reduced-motion: no-preference) {
         transition-property: visibility, opacity;
         transition-duration: theme.$transition-duration;
-        will-change: visibility, opacity;
 
         // 2.
         &::before {
diff --git a/packages/web/src/scss/components/Modal/_ModalDialog.scss b/packages/web/src/scss/components/Modal/_ModalDialog.scss
index f9fb2787b4..125a4ee2b1 100644
--- a/packages/web/src/scss/components/Modal/_ModalDialog.scss
+++ b/packages/web/src/scss/components/Modal/_ModalDialog.scss
@@ -4,10 +4,52 @@
 // 3. We need to set the box-sizing again because the parent element unsets styles using `all: unset`.
 
 @use 'sass:map';
+@use '../../settings/feature-flags';
 @use '../../tools/breakpoint';
 @use '../../tools/typography';
 @use 'theme';
 
+@mixin -uniform-modal-dialog() {
+    --modal-translate-y: 50%;
+
+    bottom: 50%;
+    width: theme.$dialog-uniform-width;
+    max-width: calc(100% - #{theme.$padding-x});
+    height: theme.$dialog-uniform-height;
+    max-height: theme.$dialog-uniform-max-height;
+    border-radius: theme.$dialog-border-radius;
+    transform-origin: center center;
+
+    @include breakpoint.up(map.get(theme.$breakpoints, tablet)) {
+        height: theme.$dialog-height-tablet;
+        max-height: theme.$dialog-uniform-max-height-tablet;
+    }
+
+    @include breakpoint.up(map.get(theme.$breakpoints, desktop)) {
+        width: theme.$dialog-width-desktop;
+    }
+}
+
+@mixin -docked-modal-dialog() {
+    @include breakpoint.down(map.get(theme.$breakpoints, tablet)) {
+        --modal-translate-y: 0;
+
+        bottom: 0;
+        width: theme.$dialog-width;
+        max-width: none;
+        height: theme.$dialog-height;
+        max-height: theme.$dialog-max-height;
+        border-radius: theme.$dialog-border-radius theme.$dialog-border-radius 0 0;
+        transform-origin: bottom center;
+    }
+}
+
+@mixin -expand-docked-modal-dialog() {
+    @include breakpoint.down(map.get(theme.$breakpoints, tablet)) {
+        height: theme.$dialog-max-height;
+    }
+}
+
 .ModalDialog {
     @include typography.generate(theme.$typography);
 
@@ -46,14 +88,42 @@
         width: theme.$dialog-width-desktop;
     }
 
+    // @deprecated The "uniform" dialog variant is deprecated and will be removed in the next major release.
+    // Migration:
+    // 1. Remove the feature flag and make the uniform dialog the default.
+    // 2. Adjust transitions below.
+    @if feature-flags.$modal-enable-uniform-dialog {
+        @include -uniform-modal-dialog();
+    }
+
     @media (prefers-reduced-motion: no-preference) {
         transition-property: bottom, width, border-radius, transform; // 1.
         transition-duration: inherit;
     }
 }
 
-.ModalDialog--expandOnMobile {
-    @include breakpoint.down(map.get(theme.$breakpoints, tablet)) {
-        height: theme.$dialog-max-height;
+// @deprecated The "uniform" dialog variant is deprecated and will be removed in the next major release.
+// Migration: Remove the feature flag and make the uniform dialog the default.
+@if feature-flags.$modal-enable-uniform-dialog {
+    .ModalDialog--dockOnMobile {
+        @include -docked-modal-dialog();
+    }
+
+    .ModalDialog--dockOnMobile.ModalDialog--expandOnMobile {
+        @include -expand-docked-modal-dialog();
+    }
+} @else {
+    .spirit-feature-modal-enable-uniform-dialog .ModalDialog {
+        @include -uniform-modal-dialog();
+    }
+
+    .spirit-feature-modal-enable-uniform-dialog .ModalDialog--dockOnMobile {
+        @include -docked-modal-dialog();
+    }
+
+    // stylelint-disable-next-line selector-max-class -- Only target the docked variant.
+    .ModalDialog--expandOnMobile,
+    .spirit-feature-modal-enable-uniform-dialog .ModalDialog--dockOnMobile.ModalDialog--expandOnMobile {
+        @include -expand-docked-modal-dialog();
     }
 }
diff --git a/packages/web/src/scss/components/Modal/_ModalHeader.scss b/packages/web/src/scss/components/Modal/_ModalHeader.scss
index dc70d60c89..355fe27001 100644
--- a/packages/web/src/scss/components/Modal/_ModalHeader.scss
+++ b/packages/web/src/scss/components/Modal/_ModalHeader.scss
@@ -32,3 +32,17 @@
         padding-top: 0.25em; // 1.
     }
 }
+
+// stylelint-disable selector-max-class -- We need high specificity for the feature flag.
+.spirit-feature-modal-enable-uniform-dialog .ModalHeader {
+    padding-top: theme.$header-uniform-padding-top;
+
+    @include breakpoint.up(map.get(theme.$breakpoints, tablet)) {
+        padding-top: theme.$header-uniform-padding-top-tablet;
+    }
+}
+
+.spirit-feature-modal-enable-uniform-dialog .ModalDialog--dockOnMobile .ModalHeader {
+    padding-top: theme.$header-docked-padding-top;
+}
+// stylelint-enable selector-max-class
diff --git a/packages/web/src/scss/components/Modal/_theme.scss b/packages/web/src/scss/components/Modal/_theme.scss
index bdb4129cf3..e20fb18e15 100644
--- a/packages/web/src/scss/components/Modal/_theme.scss
+++ b/packages/web/src/scss/components/Modal/_theme.scss
@@ -3,6 +3,7 @@
 
 $breakpoints: tokens.$breakpoints;
 $padding: tokens.$space-600;
+$padding-x: tokens.$space-700;
 $padding-x-tablet: tokens.$space-1100;
 $typography: tokens.$body-medium-text-regular;
 $transition-duration: transitions.$duration-medium;
@@ -27,12 +28,25 @@ $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.
+// 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}));
+
 // ModalHeader
 $header-gap: tokens.$space-400;
 $header-padding-top: tokens.$space-800;
 $header-padding-bottom: tokens.$space-600;
 $header-title-typography: tokens.$heading-small-text;
 
+// @deprecated The "uniform" Header padding is deprecated and will be removed in the next major release.
+// Migration: Rename the variables containing the `uniform` keyword to remove it.
+$header-uniform-padding-top: tokens.$space-700;
+$header-uniform-padding-top-tablet: tokens.$space-800;
+$header-docked-padding-top: tokens.$space-800;
+
 // ModalBody
 $body-padding-y: tokens.$space-600;
 
diff --git a/packages/web/src/scss/components/Modal/index.html b/packages/web/src/scss/components/Modal/index.html
index b27e2ffbb9..d55782cbbf 100644
--- a/packages/web/src/scss/components/Modal/index.html
+++ b/packages/web/src/scss/components/Modal/index.html
@@ -10,28 +10,28 @@ <h2 class="docs-Heading">Modal</h2>
       type="button"
       class="Button Button--primary Button--medium"
       data-spirit-toggle="modal"
-      data-spirit-target="#example_basic"
-      aria-controls="example_basic"
+      data-spirit-target="#example-basic"
+      aria-controls="example-basic"
       aria-expanded="false"
     >
       Open Modal
     </button>
 
     <!-- Modal: start -->
-    <dialog id="example_basic" class="Modal" aria-labelledby="example_basic_title">
+    <dialog id="example-basic" class="Modal" aria-labelledby="example-basic-title">
 
       <!-- ModalDialog: start -->
       <article class="ModalDialog ModalDialog--expandOnMobile">
 
         <!-- ModalHeader: start -->
         <header class="ModalHeader">
-          <h2 id="example_basic_title" class="ModalHeader__title">Modal Title</h2>
+          <h2 id="example-basic-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_basic"
-            aria-controls="example_basic"
+            data-spirit-target="#example-basic"
+            aria-controls="example-basic"
             aria-expanded="false"
           >
             <svg width="24" height="24" aria-hidden="true">
@@ -53,34 +53,34 @@ <h2 id="example_basic_title" class="ModalHeader__title">Modal Title</h2>
           <!-- Footer alignment demo: start -->
           <script>
             const setFooterAlignment = (event) => {
-              const footerElement = document.querySelector('#example_basic .ModalFooter');
+              const footerElement = document.querySelector('#example-basic .ModalFooter');
 
               footerElement.classList.remove('ModalFooter--left', 'ModalFooter--center', 'ModalFooter--right');
               footerElement.classList.add(`ModalFooter--${event.target.value}`);
             };
 
             const toggleExpandOnMobile = () => {
-              document.querySelector('#example_basic .ModalDialog').classList.toggle('ModalDialog--expandOnMobile');
+              document.querySelector('#example-basic .ModalDialog').classList.toggle('ModalDialog--expandOnMobile');
             }
           </script>
           <form onchange="setFooterAlignment(event)" class="d-none d-tablet-block">
             <div>Footer alignment (from tablet up):</div>
-            <label for="footer_alignment_left" class="Radio mr-600">
-              <input type="radio" id="footer_alignment_left" name="footer_alignment" value="left" class="Radio__input" autocomplete="off" />
+            <label for="footer-alignment-left" class="Radio mr-600">
+              <input type="radio" id="footer-alignment-left" name="footer-alignment" value="left" class="Radio__input" autocomplete="off" />
               <span class="Radio__label">Left</span>
             </label>
-            <label for="footer_alignment_center" class="Radio mr-600">
-              <input type="radio" id="footer_alignment_center" name="footer_alignment" value="center" class="Radio__input" autocomplete="off" />
+            <label for="footer-alignment-center" class="Radio mr-600">
+              <input type="radio" id="footer-alignment-center" name="footer-alignment" value="center" class="Radio__input" autocomplete="off" />
               <span class="Radio__label">Center</span>
             </label>
-            <label for="footer_alignment_right" class="Radio mr-600">
-              <input type="radio" id="footer_alignment_right" name="footer_alignment" value="right" class="Radio__input" autocomplete="off" checked />
+            <label for="footer-alignment-right" class="Radio mr-600">
+              <input type="radio" id="footer-alignment-right" name="footer-alignment" value="right" class="Radio__input" autocomplete="off" checked />
               <span class="Radio__label">Right</span>
             </label>
           </form>
           <form class="d-tablet-none">
-            <label for="expand_on_mobile" class="Checkbox">
-              <input type="checkbox" id="expand_on_mobile" class="Checkbox__input" onchange="toggleExpandOnMobile()" autocomplete="off" checked />
+            <label for="expand-on-mobile" class="Checkbox">
+              <input type="checkbox" id="expand-on-mobile" class="Checkbox__input" onchange="toggleExpandOnMobile()" autocomplete="off" checked />
               <span class="Checkbox__text">
                   <span class="Checkbox__label">Expand on mobile</span>
                 </span>
@@ -101,7 +101,7 @@ <h2 id="example_basic_title" class="ModalHeader__title">Modal Title</h2>
               type="button"
               class="Button Button--primary Button--medium"
               data-spirit-dismiss="modal"
-              data-spirit-target="#example_basic"
+              data-spirit-target="#example-basic"
             >
               Primary action
             </button>
@@ -109,7 +109,7 @@ <h2 id="example_basic_title" class="ModalHeader__title">Modal Title</h2>
               type="button"
               class="Button Button--secondary Button--medium"
               data-spirit-dismiss="modal"
-              data-spirit-target="#example_basic"
+              data-spirit-target="#example-basic"
             >
               Secondary action
             </button>
@@ -127,28 +127,28 @@ <h2 id="example_basic_title" class="ModalHeader__title">Modal Title</h2>
       type="button"
       class="Button Button--primary Button--medium"
       data-spirit-toggle="modal"
-      data-spirit-target="#example_form"
-      aria-controls="example_form"
+      data-spirit-target="#example-form"
+      aria-controls="example-form"
       aria-expanded="false"
     >
       Open Modal with a Form
     </button>
 
     <!-- Modal: start -->
-    <dialog id="example_form" class="Modal" aria-labelledby="example_form_title">
+    <dialog id="example-form" class="Modal" aria-labelledby="example-form-title">
 
       <!-- ModalDialog: start -->
       <form class="ModalDialog" method="dialog">
 
         <!-- ModalHeader: start -->
         <header class="ModalHeader">
-          <h2 id="example_form_title" class="ModalHeader__title">Modal with a Form</h2>
+          <h2 id="example-form-title" class="ModalHeader__title">Modal with a Form</h2>
           <button
             type="button"
             class="Button Button--tertiary Button--square Button--medium"
             data-spirit-dismiss="modal"
-            data-spirit-target="#example_form"
-            aria-controls="example_form"
+            data-spirit-target="#example-form"
+            aria-controls="example-form"
             aria-expanded="false"
           >
             <svg width="24" height="24" aria-hidden="true">
@@ -163,8 +163,8 @@ <h2 id="example_form_title" class="ModalHeader__title">Modal with a Form</h2>
         <div class="ModalBody">
           <!-- Content: start -->
           <div class="TextField mb-400">
-            <label for="textfield" class="TextField__label">Label</label>
-            <input type="text" id="textfield" class="TextField__input" placeholder="TextField" />
+            <label for="text-field" class="TextField__label">Label</label>
+            <input type="text" id="text-field" class="TextField__input" placeholder="TextField" />
           </div>
           <p>
             The primary action is a button with <code>type="submit"</code> and closes the dialog on submission.
@@ -183,7 +183,7 @@ <h2 id="example_form_title" class="ModalHeader__title">Modal with a Form</h2>
               type="button"
               class="Button Button--secondary Button--medium"
               data-spirit-dismiss="modal"
-              data-spirit-target="#example_form"
+              data-spirit-target="#example-form"
             >
               Secondary action
             </button>
@@ -201,8 +201,8 @@ <h2 id="example_form_title" class="ModalHeader__title">Modal with a Form</h2>
       type="button"
       class="Button Button--primary Button--medium"
       data-spirit-toggle="modal"
-      data-spirit-target="#example_custom_height"
-      aria-controls="example_custom_height"
+      data-spirit-target="#example-custom-height"
+      aria-controls="example-custom-height"
       aria-expanded="false"
     >
       Open Modal with Custom Height
@@ -210,9 +210,9 @@ <h2 id="example_form_title" class="ModalHeader__title">Modal with a Form</h2>
 
     <!-- Modal: start -->
     <dialog
-      id="example_custom_height"
+      id="example-custom-height"
       class="Modal"
-      aria-labelledby="example_custom_height_title"
+      aria-labelledby="example-custom-height-title"
       style="--modal-preferred-height-mobile: 400px; --modal-preferred-height-tablet: 500px; --modal-max-height-tablet: 700px"
     >
 
@@ -221,13 +221,13 @@ <h2 id="example_form_title" class="ModalHeader__title">Modal with a Form</h2>
 
         <!-- ModalHeader: start -->
         <header class="ModalHeader">
-          <h2 id="example_custom_height_title" class="ModalHeader__title">Modal with Custom Height</h2>
+          <h2 id="example-custom-height-title" class="ModalHeader__title">Modal with Custom Height</h2>
           <button
             type="button"
             class="Button Button--tertiary Button--square Button--medium"
             data-spirit-dismiss="modal"
-            data-spirit-target="#example_custom_height"
-            aria-controls="example_custom_height"
+            data-spirit-target="#example-custom-height"
+            aria-controls="example-custom-height"
             aria-expanded="false"
           >
             <svg width="24" height="24" aria-hidden="true">
@@ -265,7 +265,7 @@ <h2 id="example_custom_height_title" class="ModalHeader__title">Modal with Custo
               type="button"
               class="Button Button--primary Button--medium"
               data-spirit-dismiss="modal"
-              data-spirit-target="#example_custom_height"
+              data-spirit-target="#example-custom-height"
             >
               Primary action
             </button>
@@ -273,7 +273,7 @@ <h2 id="example_custom_height_title" class="ModalHeader__title">Modal with Custo
               type="button"
               class="Button Button--secondary Button--medium"
               data-spirit-dismiss="modal"
-              data-spirit-target="#example_custom_height"
+              data-spirit-target="#example-custom-height"
             >
               Secondary action
             </button>
@@ -299,30 +299,30 @@ <h2 class="docs-Heading">Scrolling Long Content</h2>
       type="button"
       class="Button Button--primary Button--medium"
       data-spirit-toggle="modal"
-      data-spirit-target="#example_long_content"
-      aria-controls="example_long_content"
+      data-spirit-target="#example-long-content"
+      aria-controls="example-long-content"
       aria-expanded="false"
     >
       Open Modal with Long Content
     </button>
 
     <!-- Modal: start -->
-    <dialog id="example_long_content" class="Modal" aria-labelledby="example_long_content_title">
+    <dialog id="example-long-content" class="Modal" aria-labelledby="example-long-content-title">
 
       <!-- ModalDialog: start -->
       <article class="ModalDialog">
 
         <!-- ModalHeader: start -->
         <header class="ModalHeader">
-          <h2 id="example_long_content_title" class="ModalHeader__title">
+          <h2 id="example-long-content-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_long_content"
-            aria-controls="example_long_content"
+            data-spirit-target="#example-long-content"
+            aria-controls="example-long-content"
             aria-expanded="false"
           >
             <svg width="24" height="24" aria-hidden="true">
@@ -387,7 +387,7 @@ <h2 id="example_long_content_title" class="ModalHeader__title">
               type="button"
               class="Button Button--primary Button--medium"
               data-spirit-dismiss="modal"
-              data-spirit-target="#example_long_content"
+              data-spirit-target="#example-long-content"
             >
               Primary action
             </button>
@@ -395,7 +395,7 @@ <h2 id="example_long_content_title" class="ModalHeader__title">
               type="button"
               class="Button Button--secondary Button--medium"
               data-spirit-dismiss="modal"
-              data-spirit-target="#example_long_content"
+              data-spirit-target="#example-long-content"
             >
               Secondary action
             </button>
@@ -413,30 +413,30 @@ <h2 id="example_long_content_title" class="ModalHeader__title">
       type="button"
       class="Button Button--primary Button--medium"
       data-spirit-toggle="modal"
-      data-spirit-target="#example_scroll_view"
-      aria-controls="example_scroll_view"
+      data-spirit-target="#example-scroll-view"
+      aria-controls="example-scroll-view"
       aria-expanded="false"
     >
       Open Modal with ScrollView
     </button>
 
     <!-- Modal: start -->
-    <dialog id="example_scroll_view" class="Modal" aria-labelledby="example_scroll_view_title">
+    <dialog id="example-scroll-view" class="Modal" aria-labelledby="example-scroll-view-title">
 
       <!-- ModalDialog: start -->
       <article class="ModalDialog">
 
         <!-- ModalHeader: start -->
         <header class="ModalHeader">
-          <h2 id="example_scroll_view_title" class="ModalHeader__title">
+          <h2 id="example-scroll-view-title" class="ModalHeader__title">
             Modal with ScrollView
           </h2>
           <button
             type="button"
             class="Button Button--tertiary Button--square Button--medium"
             data-spirit-dismiss="modal"
-            data-spirit-target="#example_scroll_view"
-            aria-controls="example_scroll_view"
+            data-spirit-target="#example-scroll-view"
+            aria-controls="example-scroll-view"
             aria-expanded="false"
           >
             <svg width="24" height="24" aria-hidden="true">
@@ -512,7 +512,7 @@ <h2 id="example_scroll_view_title" class="ModalHeader__title">
               type="button"
               class="Button Button--primary Button--medium"
               data-spirit-dismiss="modal"
-              data-spirit-target="#example_scroll_view"
+              data-spirit-target="#example-scroll-view"
             >
               Primary action
             </button>
@@ -520,7 +520,7 @@ <h2 id="example_scroll_view_title" class="ModalHeader__title">
               type="button"
               class="Button Button--secondary Button--medium"
               data-spirit-dismiss="modal"
-              data-spirit-target="#example_scroll_view"
+              data-spirit-target="#example-scroll-view"
             >
               Secondary action
             </button>
@@ -547,28 +547,28 @@ <h2 class="docs-Heading">Stacking Modals</h2>
       type="button"
       class="Button Button--primary Button--medium"
       data-spirit-toggle="modal"
-      data-spirit-target="#example_stacking_parent"
-      aria-controls="example_stacking_parent"
+      data-spirit-target="#example-stacking-parent"
+      aria-controls="example-stacking-parent"
       aria-expanded="false"
     >
       Open Modal
     </button>
 
     <!-- Modal: start -->
-    <dialog id="example_stacking_parent" class="Modal" aria-labelledby="example_stacking_parent_title">
+    <dialog id="example-stacking-parent" class="Modal" aria-labelledby="example-stacking-parent-title">
 
       <!-- ModalDialog: start -->
       <article class="ModalDialog">
 
         <!-- ModalHeader: start -->
         <header class="ModalHeader">
-          <h2 id="example_stacking_parent_title" class="ModalHeader__title">Modal Title</h2>
+          <h2 id="example-stacking-parent-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_stacking_parent"
-            aria-controls="example_stacking_parent"
+            data-spirit-target="#example-stacking-parent"
+            aria-controls="example-stacking-parent"
             aria-expanded="false"
           >
             <svg width="24" height="24" aria-hidden="true">
@@ -598,8 +598,8 @@ <h2 id="example_stacking_parent_title" class="ModalHeader__title">Modal Title</h
               type="button"
               class="Button Button--primary Button--medium"
               data-spirit-toggle="modal"
-              data-spirit-target="#example_stacking_nested"
-              aria-controls="example_stacking_nested"
+              data-spirit-target="#example-stacking-nested"
+              aria-controls="example-stacking-nested"
               aria-expanded="false"
             >
               Open stacked dialog
@@ -614,20 +614,20 @@ <h2 id="example_stacking_parent_title" class="ModalHeader__title">Modal Title</h
     </dialog>
     <!-- Modal: end -->
     <!-- Modal: start -->
-    <dialog id="example_stacking_nested" class="Modal" aria-labelledby="example_stacking_nested_title">
+    <dialog id="example-stacking-nested" class="Modal" aria-labelledby="example-stacking-nested-title">
 
       <!-- ModalDialog: start -->
       <article class="ModalDialog">
 
         <!-- ModalHeader: start -->
         <header class="ModalHeader">
-          <h2 id="example_stacking_nested_title" class="ModalHeader__title">Stacked Modal Title</h2>
+          <h2 id="example-stacking-nested-title" class="ModalHeader__title">Stacked Modal Title</h2>
           <button
             type="button"
             class="Button Button--tertiary Button--square Button--medium"
             data-spirit-dismiss="modal"
-            data-spirit-target="#example_stacking_nested"
-            aria-controls="example_stacking_nested"
+            data-spirit-target="#example-stacking-nested"
+            aria-controls="example-stacking-nested"
             aria-expanded="false"
           >
             <svg width="24" height="24" aria-hidden="true">
@@ -669,7 +669,7 @@ <h2 id="example_stacking_nested_title" class="ModalHeader__title">Stacked Modal
               type="button"
               class="Button Button--secondary Button--medium"
               data-spirit-dismiss="modal"
-              data-spirit-target="#example_stacking_nested"
+              data-spirit-target="#example-stacking-nested"
             >
               Secondary action
             </button>
@@ -696,25 +696,25 @@ <h2 class="docs-Heading">Disabled Backdrop Click</h2>
       type="button"
       class="Button Button--primary Button--medium"
       data-spirit-toggle="modal"
-      data-spirit-target="#example_disabled_backdrop_click"
-      aria-controls="example_disabled_backdrop_click"
+      data-spirit-target="#example-disabled-backdrop-click"
+      aria-controls="example-disabled-backdrop-click"
       aria-expanded="false"
     >
       Open Modal
     </button>
 
-    <dialog id="example_disabled_backdrop_click" class="Modal" aria-labelledby="example_disabled_backdrop_click_title" data-spirit-close-on-backdrop-click="false">
+    <dialog id="example-disabled-backdrop-click" class="Modal" aria-labelledby="example-disabled-backdrop-click-title" data-spirit-close-on-backdrop-click="false">
 
       <article class="ModalDialog ModalDialog--expandOnMobile">
 
         <header class="ModalHeader">
-          <h2 id="example_disabled_backdrop_click_title" class="ModalHeader__title">Modal Title</h2>
+          <h2 id="example-disabled-backdrop-click-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_disabled_backdrop_click"
-            aria-controls="example_disabled_backdrop_click"
+            data-spirit-target="#example-disabled-backdrop-click"
+            aria-controls="example-disabled-backdrop-click"
             aria-expanded="false"
           >
             <svg width="24" height="24" aria-hidden="true">
@@ -738,7 +738,7 @@ <h2 id="example_disabled_backdrop_click_title" class="ModalHeader__title">Modal
               type="button"
               class="Button Button--primary Button--medium"
               data-spirit-dismiss="modal"
-              data-spirit-target="#example_disabled_backdrop_click"
+              data-spirit-target="#example-disabled-backdrop-click"
             >
               Primary action
             </button>
@@ -746,7 +746,7 @@ <h2 id="example_disabled_backdrop_click_title" class="ModalHeader__title">Modal
               type="button"
               class="Button Button--secondary Button--medium"
               data-spirit-dismiss="modal"
-              data-spirit-target="#example_disabled_backdrop_click"
+              data-spirit-target="#example-disabled-backdrop-click"
             >
               Secondary action
             </button>
@@ -761,4 +761,172 @@ <h2 id="example_disabled_backdrop_click_title" class="ModalHeader__title">Modal
 
 </section>
 
+<section class="docs-Section spirit-feature-modal-enable-uniform-dialog">
+  <h2 class="docs-Heading">Feature Flag: Uniform Modal on Mobile</h2>
+
+  <div class="docs-Stack docs-Stack--start">
+
+    <button
+      type="button"
+      class="Button Button--primary Button--medium"
+      data-spirit-toggle="modal"
+      data-spirit-target="#example-uniform"
+      aria-controls="example-uniform"
+      aria-expanded="false"
+    >
+      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" aria-labelledby="example-uniform-title">
+
+      <!-- ModalDialog: start -->
+      <article id="example-uniform-dialog" class="ModalDialog">
+
+        <!-- ModalHeader: start -->
+        <header class="ModalHeader">
+          <h2 id="example-uniform-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-uniform"
+            aria-controls="example-uniform"
+            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-uniform"
+            >
+              Primary action
+            </button>
+            <button
+              type="button"
+              class="Button Button--secondary Button--medium"
+              data-spirit-dismiss="modal"
+              data-spirit-target="#example-uniform"
+            >
+              Secondary action
+            </button>
+          </div>
+        </footer>
+        <!-- ModalFooter: end -->
+
+      </article>
+      <!-- ModalDialog: end -->
+
+    </dialog>
+    <!-- Modal: end -->
+
+    <!-- Modal: start -->
+    <dialog id="example-docked" class="Modal" 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>
+
 {{/layout/plain }}
diff --git a/packages/web/src/scss/settings/_feature-flags.scss b/packages/web/src/scss/settings/_feature-flags.scss
index 4c7a10a2fe..25c69b50e2 100644
--- a/packages/web/src/scss/settings/_feature-flags.scss
+++ b/packages/web/src/scss/settings/_feature-flags.scss
@@ -1,2 +1,3 @@
 $dropdown-enable-enhanced-shadow: false !default;
+$modal-enable-uniform-dialog: false !default;
 $tooltip-enable-data-placement: false !default;