diff --git a/packages/ui/src/components/Organisms/PageContent/BlockImageTeasers.tsx b/packages/ui/src/components/Organisms/PageContent/BlockImageTeasers.tsx
index 596a50f38..a7ac6f8f9 100644
--- a/packages/ui/src/components/Organisms/PageContent/BlockImageTeasers.tsx
+++ b/packages/ui/src/components/Organisms/PageContent/BlockImageTeasers.tsx
@@ -29,7 +29,7 @@ export function BlockImageTeaser(
   props: BlockImageTeasersFragment['teasers'][0],
 ) {
   return (
-    <div className="p-8 col-span-2 lg:col-span-1 text-left h-72 lg:h-96 relative bg-gray-900">
+    <div className="p-8 pl-5 md:pl-14 lg:pl-20 col-span-2 lg:col-span-1 text-left h-72 lg:h-96 relative bg-gray-900">
       {props.image ? (
         <Image
           className="object-cover w-full h-72 lg:h-96 absolute top-0 left-0"
diff --git a/packages/ui/src/components/Organisms/PageHero.tsx b/packages/ui/src/components/Organisms/PageHero.tsx
index 237765e00..471b75609 100644
--- a/packages/ui/src/components/Organisms/PageHero.tsx
+++ b/packages/ui/src/components/Organisms/PageHero.tsx
@@ -17,7 +17,7 @@ export function PageHero(props: NonNullable<PageFragment['hero']>) {
 function DefaultHero(props: NonNullable<PageFragment['hero']>) {
   return (
     <>
-      <section className="default-hero relative isolate overflow-hidden bg-gray-900 pt-12 pb-24 min-h-[20rem] lg:min-h-[33rem]">
+      <section className="default-hero relative isolate overflow-hidden bg-gray-900 pt-12 pb-24 min-h-[20rem] lg:min-h-[33rem] container-page">
         {props.image ? (
           <Image
             alt={props.image.alt}
@@ -27,7 +27,7 @@ function DefaultHero(props: NonNullable<PageFragment['hero']>) {
             data-test-id={'hero-image'}
           />
         ) : null}
-        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="container-content">
           <div className="mx-auto max-w-2xl lg:mx-0">
             <h1 className="text-5xl font-extrabold tracking-tight leading-tight text-white drop-shadow-md">
               {props.headline}
@@ -82,33 +82,37 @@ function FormHero(props: NonNullable<PageFragment['hero']>) {
           </>
         ) : null}
 
-        <div className="px-4 pb-[22rem] lg:pb-96 mx-auto max-w-screen-sm text-center lg:px-6 relative">
-          <h1 className="text-4xl tracking-tight font-extrabold text-white drop-shadow-md">
-            {props.headline}
-          </h1>
-          {props.lead ? (
-            <p className="mt-6 text-lg leading-4 text-gray-300">{props.lead}</p>
-          ) : null}
-          {props.ctaText && props.ctaUrl ? (
-            <Link
-              href={props.ctaUrl}
-              className="mt-7 px-5 py-2.5 text-sm font-medium text-white inline-flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-            >
-              <svg
-                className="mr-2 -ml-1 w-4 h-4"
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
+        <div className="px-4 pb-[22rem] lg:pb-96 container-page text-center lg:px-6 relative">
+          <div className="max-w-screen-xl mx-auto">
+            <h1 className="text-4xl tracking-tight font-extrabold text-white drop-shadow-md">
+              {props.headline}
+            </h1>
+            {props.lead ? (
+              <p className="mt-6 text-lg leading-4 text-gray-300">
+                {props.lead}
+              </p>
+            ) : null}
+            {props.ctaText && props.ctaUrl ? (
+              <Link
+                href={props.ctaUrl}
+                className="mt-7 px-5 py-2.5 text-sm font-medium text-white inline-flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
               >
-                <path
-                  fillRule="evenodd"
-                  d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
-                  clipRule="evenodd"
-                ></path>
-              </svg>
-              {props.ctaText}
-            </Link>
-          ) : null}
+                <svg
+                  className="mr-2 -ml-1 w-4 h-4"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+                    clipRule="evenodd"
+                  ></path>
+                </svg>
+                {props.ctaText}
+              </Link>
+            ) : null}
+          </div>
         </div>
       </div>
       {props.formUrl ? (
@@ -126,34 +130,38 @@ function NoImageHero(props: NonNullable<PageFragment['hero']>) {
   return (
     <>
       <BreadCrumbs />
-      <section className="relative isolate overflow-hidden pt-12 sm:pt-20 px-6 lg:px-8">
-        <div className="mx-auto max-w-3xl">
-          <h1 className="text-4xl font-extrabold tracking-tight leading-tight">
-            {props.headline}
-          </h1>
-          {props.lead ? (
-            <p className="mt-4 text-lg leading-8 text-gray-500">{props.lead}</p>
-          ) : null}
-          {props.ctaText && props.ctaUrl ? (
-            <Link
-              href={props.ctaUrl}
-              className="mt-5 px-5 py-2.5 text-sm font-medium text-white inline-flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-            >
-              <svg
-                className="mr-2 -ml-1 w-4 h-4"
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
+      <section className="relative isolate overflow-hidden pt-12 sm:pt-20 container-page">
+        <div className="container-content">
+          <div className="container-text">
+            <h1 className="text-4xl font-extrabold tracking-tight leading-tight">
+              {props.headline}
+            </h1>
+            {props.lead ? (
+              <p className="mt-4 text-lg leading-8 text-gray-500">
+                {props.lead}
+              </p>
+            ) : null}
+            {props.ctaText && props.ctaUrl ? (
+              <Link
+                href={props.ctaUrl}
+                className="mt-5 px-5 py-2.5 text-sm font-medium text-white inline-flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
               >
-                <path
-                  fillRule="evenodd"
-                  d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
-                  clipRule="evenodd"
-                ></path>
-              </svg>
-              {props.ctaText}
-            </Link>
-          ) : null}
+                <svg
+                  className="mr-2 -ml-1 w-4 h-4"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+                    clipRule="evenodd"
+                  ></path>
+                </svg>
+                {props.ctaText}
+              </Link>
+            ) : null}
+          </div>
         </div>
       </section>
     </>