diff --git a/apps/pink/src/pages/components/modal.mdx b/apps/pink/src/pages/components/modal.mdx
index 082ac231b3..b370239af0 100644
--- a/apps/pink/src/pages/components/modal.mdx
+++ b/apps/pink/src/pages/components/modal.mdx
@@ -53,7 +53,11 @@ Modals consist of five components:
                 </button>
             </div>
         </header>
-        <div class="modal-content u-small">Modal label text.</div>
+        <div class="modal-content u-small">
+            <div class="modal-content-spacer">
+                <p>Modal label text.</p>
+            </div>
+        </div>
         <div class="modal-footer">
           <div class="u-flex u-main-end u-gap-16">
             <button type="button" class="button is-text">
@@ -81,7 +85,11 @@ Modals consist of five components:
                 </button>
             </div>
         </header>
-        <div class="modal-content u-small">Modal label text.</div>
+        <div class="modal-content u-small">
+            <div class="modal-content-spacer">
+                <p>Modal label text.</p>
+            </div>
+        </div>
         <div class="modal-footer">
           <div class="u-flex u-main-end u-gap-16">
             <button class="button is-text">
@@ -122,7 +130,11 @@ In the Appwrite console, we use three sizes of modals:
               </button>
           </div>
       </header>
-      <div class="modal-content u-small">Modal label text.</div>
+      <div class="modal-content u-small">
+          <div class="modal-content-spacer">
+              <p>Modal label text.</p>
+          </div>
+      </div>
       <div class="modal-footer">
         <div class="u-flex u-main-end u-gap-16">
           <button class="button is-text">
@@ -146,7 +158,11 @@ In the Appwrite console, we use three sizes of modals:
                     </button>
                 </div>
             </header>
-            <div class="modal-content u-small">Modal label text.</div>
+            <div class="modal-content u-small">
+                <div class="modal-content-spacer">
+                    <p>Modal label text.</p>
+                </div>
+            </div>
             <div class="modal-footer">
                 <div class="u-flex u-main-end u-gap-16">
                     <button class="button is-text">
@@ -181,31 +197,33 @@ State class which allow to seperate the header with border.
                 <p>Provide contextual feedback messages for complex modals.</p>
             </header>
             <div class="modal-content">
-                <ul class="form-list">
-                    <li class="form-item">
-                        <label class="label">Label</label>
-                        <div class="input-text-wrapper" style="--amount-of-buttons: 1;">
-                            <input type="password" class="input-text" placeholder="Placeholder" />
-                            <button class="show-password-button" aria-label="show password" type="button">
-                                <span class="icon-eye" aria-hidden="true"></span>
-                            </button>
-                        </div>
-                    </li>
-                    <li class="form-item">
-                        <label class="label">Label</label>
-                        <div class="input-text-wrapper" style="--amount-of-buttons:2">
-                            <input type="text" placeholder="Placeholder" />
-                            <div class="options-list">
-                                <button class="options-list-button" aria-label="show password / hide password" type="button">
+                <div class="modal-content-spacer">
+                    <ul class="form-list">
+                        <li class="form-item">
+                            <label class="label">Label</label>
+                            <div class="input-text-wrapper" style="--amount-of-buttons: 1;">
+                                <input type="password" class="input-text" placeholder="Placeholder" />
+                                <button class="show-password-button" aria-label="show password" type="button">
                                     <span class="icon-eye" aria-hidden="true"></span>
                                 </button>
-                                <button class="options-list-button" aria-label="copy text" type="button">
-                                    <span class="icon-duplicate" aria-hidden="true"></span>
-                                </button>
                             </div>
-                        </div>
-                    </li>
-                </ul>
+                        </li>
+                        <li class="form-item">
+                            <label class="label">Label</label>
+                            <div class="input-text-wrapper" style="--amount-of-buttons:2">
+                                <input type="text" placeholder="Placeholder" />
+                                <div class="options-list">
+                                    <button class="options-list-button" aria-label="show password / hide password" type="button">
+                                        <span class="icon-eye" aria-hidden="true"></span>
+                                    </button>
+                                    <button class="options-list-button" aria-label="copy text" type="button">
+                                        <span class="icon-duplicate" aria-hidden="true"></span>
+                                    </button>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
             </div>
             <div class="modal-footer">
                 <div class="u-flex u-main-end u-gap-16">
diff --git a/packages/ui/src/7-components/_modal.scss b/packages/ui/src/7-components/_modal.scss
index 0330c2c788..251cc4a807 100644
--- a/packages/ui/src/7-components/_modal.scss
+++ b/packages/ui/src/7-components/_modal.scss
@@ -80,11 +80,12 @@
   }
   &-title { color:hsl(var(--p-modal-title-color)); line-height:1; }
   &-content {
-    @include scroll;
-    display:grid; gap:pxToRem(24); overflow:auto;
+    @include scroll; overflow:auto;
     padding-block:pxToRem(4); margin-block:pxToRem(-4); /* used to show focus outline */
-    margin-inline: calc(var(--p-modal-padding) * -1);
-    padding-inline: calc(var(--p-modal-padding));
+    margin-inline: calc(var(--p-modal-padding) * -1); padding-inline: calc(var(--p-modal-padding));
+    &-spacer {
+      display:grid; gap:pxToRem(24);
+    }
   }
   &-footer  {
     display:grid; gap:pxToRem(16);