diff --git a/libs/blog/ad-banner/ui/src/lib/ad-banner/ad-banner.component.html b/libs/blog/ad-banner/ui/src/lib/ad-banner/ad-banner.component.html
index 987191b8..9045d05a 100644
--- a/libs/blog/ad-banner/ui/src/lib/ad-banner/ad-banner.component.html
+++ b/libs/blog/ad-banner/ui/src/lib/ad-banner/ad-banner.component.html
@@ -3,23 +3,23 @@
   aria-labelledby="banner-title"
   class="bg-al-radial-gradient w-full"
 >
-  <div class="mx-auto flex max-w-screen-xl justify-between py-4">
+  <div class="mx-auto flex max-w-screen-xl justify-between px-2 py-4 2xl:px-0">
     <div class="ml-2 md:ml-4 xl:ml-0">
       <div class="flex flex-row">
-        <h3 class="hidden text-2xl font-semibold lg:block">
+        <h3 class="hidden text-2xl font-semibold xl:block">
           {{ data().title }}
         </h3>
-        <h3 class="text-lg font-semibold lg:hidden">
+        <h3 class="text-lg font-semibold xl:hidden">
           {{ data().title_mobile }}
         </h3>
         <span
-          class="text-al-pink ml-2 hidden items-center rounded bg-white px-2 text-lg font-semibold lg:flex xl:ml-3"
+          class="text-al-pink ml-2 hidden items-center rounded bg-white px-2 text-lg font-semibold xl:ml-3 xl:flex"
         >
           {{ data().additional_info }}
         </span>
       </div>
-      <p class="hidden lg:block">{{ data().description }}</p>
-      <p class="lg:hidden">{{ data().description_mobile }}</p>
+      <p class="hidden xl:block">{{ data().description }}</p>
+      <p class="xl:hidden">{{ data().description_mobile }}</p>
     </div>
     <div class="flex flex-row items-center">
       <a
@@ -29,10 +29,10 @@ <h3 class="text-lg font-semibold lg:hidden">
         [href]="data().href"
         target="_blank"
       >
-        <p class="hidden text-sm font-bold lg:block">
+        <p class="hidden text-sm font-bold xl:block">
           {{ t('registerButton') }}
         </p>
-        <p class="text-sm font-bold lg:hidden">
+        <p class="text-sm font-bold xl:hidden">
           {{ t('registerButtonShortened') }}
         </p>
       </a>
diff --git a/libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.html b/libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.html
index 02203540..2d5e2b44 100644
--- a/libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.html
+++ b/libs/blog/layouts/ui-layouts/src/lib/footer/footer.component.html
@@ -1,6 +1,6 @@
 <footer class="bg-al-card w-full">
   <div
-    class="al-container mx-auto grid max-w-screen-xl gap-y-4 px-6 py-4 xl:px-0"
+    class="al-container mx-auto grid max-w-screen-xl gap-y-4 px-6 py-4 xl:px-2 2xl:px-0"
   >
     <al-footer-logo class="self-center" [currentYear]="currentYear" />
     <al-navigation />
diff --git a/libs/blog/layouts/ui-layouts/src/lib/header/header.component.html b/libs/blog/layouts/ui-layouts/src/lib/header/header.component.html
index 98c91ecb..fbd1dd08 100644
--- a/libs/blog/layouts/ui-layouts/src/lib/header/header.component.html
+++ b/libs/blog/layouts/ui-layouts/src/lib/header/header.component.html
@@ -1,6 +1,6 @@
 <header class="bg-al-background/95 z-30 h-20 w-full border-b shadow-xl">
   <div
-    class="mx-auto flex h-full w-full max-w-screen-xl items-center justify-between px-6 py-4 xl:px-0"
+    class="mx-auto flex h-full w-full max-w-screen-xl items-center justify-between px-6 py-4 xl:px-2 2xl:px-0"
   >
     <a
       data-testid="header-home"
diff --git a/libs/blog/layouts/ui-layouts/src/lib/layout/layout.component.html b/libs/blog/layouts/ui-layouts/src/lib/layout/layout.component.html
index 11df8903..44bd71bf 100644
--- a/libs/blog/layouts/ui-layouts/src/lib/layout/layout.component.html
+++ b/libs/blog/layouts/ui-layouts/src/lib/layout/layout.component.html
@@ -1,3 +1,5 @@
-<main class="mx-auto h-full w-full max-w-screen-xl px-2 py-4 md:px-4 xl:px-0">
+<main
+  class="mx-auto h-full w-full max-w-screen-xl px-2 py-4 md:px-4 xl:px-2 2xl:px-0"
+>
   <ng-content />
 </main>