diff --git a/packages/app-elements/src/ui/atoms/PageHeading/PageHeading.test.tsx b/packages/app-elements/src/ui/atoms/PageHeading/PageHeading.test.tsx
index 60b4c05d..b22e679f 100644
--- a/packages/app-elements/src/ui/atoms/PageHeading/PageHeading.test.tsx
+++ b/packages/app-elements/src/ui/atoms/PageHeading/PageHeading.test.tsx
@@ -69,7 +69,7 @@ describe('PageHeading gap', () => {
       id: 'heading',
       title: 'My Page Heading'
     })
-    expect(element).toHaveClass('pt-10 pb-14')
+    expect(element).toHaveClass('pt-5 md:pt-10 pb-6 md:pb-14')
   })
 
   test('Should have gap only on top', () => {
@@ -78,8 +78,8 @@ describe('PageHeading gap', () => {
       title: 'My Page Heading',
       gap: 'only-top'
     })
-    expect(element).toHaveClass('pt-10')
-    expect(element).not.toHaveClass('pb-14')
+    expect(element).toHaveClass('pt-5 md:pt-10')
+    expect(element).not.toHaveClass('pb-6 md:pb-14')
   })
 
   test('Should have no vertical gap', () => {
diff --git a/packages/app-elements/src/ui/atoms/PageHeading/PageHeading.tsx b/packages/app-elements/src/ui/atoms/PageHeading/PageHeading.tsx
index 7e30d474..d62099bb 100644
--- a/packages/app-elements/src/ui/atoms/PageHeading/PageHeading.tsx
+++ b/packages/app-elements/src/ui/atoms/PageHeading/PageHeading.tsx
@@ -67,9 +67,9 @@ const PageHeading = withSkeletonTemplate<PageHeadingProps>(
         className={cn([
           'w-full',
           {
-            'pt-10 pb-14': gap === 'both',
-            'pt-10': gap === 'only-top',
-            'pb-14': gap === 'only-bottom'
+            'pt-5 md:pt-10 pb-6 md:pb-14': gap === 'both',
+            'pt-5 md:pt-10': gap === 'only-top',
+            'pb-6 md:pb-14': gap === 'only-bottom'
           }
         ])}
         {...rest}
diff --git a/packages/app-elements/src/ui/composite/__snapshots__/PageLayout.test.tsx.snap b/packages/app-elements/src/ui/composite/__snapshots__/PageLayout.test.tsx.snap
index 6b526115..a1243221 100644
--- a/packages/app-elements/src/ui/composite/__snapshots__/PageLayout.test.tsx.snap
+++ b/packages/app-elements/src/ui/composite/__snapshots__/PageLayout.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`PageLayout > Should be rendered 1`] = `
     class="mb-14"
   >
     <div
-      class="w-full pt-10 pb-14"
+      class="w-full pt-5 md:pt-10 pb-6 md:pb-14"
     >
       <div
         class="flex items-center justify-between"
diff --git a/packages/app-elements/src/ui/composite/__snapshots__/PageSkeleton.test.tsx.snap b/packages/app-elements/src/ui/composite/__snapshots__/PageSkeleton.test.tsx.snap
index 5e44152f..8e535577 100644
--- a/packages/app-elements/src/ui/composite/__snapshots__/PageSkeleton.test.tsx.snap
+++ b/packages/app-elements/src/ui/composite/__snapshots__/PageSkeleton.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`PageSkeleton > Should be rendered 1`] = `
             class="select-none pointer-events-none inline"
           >
             <div
-              class="w-full pt-10"
+              class="w-full pt-5 md:pt-10"
             >
               <div
                 class="mb-4 flex items-center justify-between"