diff --git a/mailpoet/assets/css/src/components-automation-listing/_sections.scss b/mailpoet/assets/css/src/components-automation-listing/_sections.scss
index 4bab8e104d..18a77c7bba 100644
--- a/mailpoet/assets/css/src/components-automation-listing/_sections.scss
+++ b/mailpoet/assets/css/src/components-automation-listing/_sections.scss
@@ -11,6 +11,19 @@
 }
 
 .mailpoet-automation-section {
+  @include full-width;
+}
+
+.mailpoet-automation-white-background {
+  background: #fff;
+}
+
+.mailpoet-automation-section-content {
+  display: block;
+  margin: auto;
+  max-width: 1072px;
+  padding: 65px 0;
+
   h2 {
     font-size: 23px;
     font-weight: 400;
@@ -29,14 +42,10 @@
 }
 
 .mailpoet-automation-section-hero {
-  background: #fff;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   margin-top: -20px;
-  padding: 65px;
-
-  @include full-width;
 
   h1 {
     font-size: 32px;
@@ -71,7 +80,7 @@
 }
 
 .mailpoet-section-templates {
-  padding: 48px 64px 48px 84px;
+  padding: 48px 0;
 
   .components-button {
     display: block;
@@ -129,13 +138,9 @@
 }
 
 .mailpoet-section-build-your-own {
-  background: #fff;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-  padding: 64px;
-
-  @include full-width;
 
   ol {
     list-style: decimal-leading-zero inside;
diff --git a/mailpoet/assets/js/src/automation/sections/build-your-own-section.tsx b/mailpoet/assets/js/src/automation/sections/build-your-own-section.tsx
index d260f6c79c..17f969c321 100644
--- a/mailpoet/assets/js/src/automation/sections/build-your-own-section.tsx
+++ b/mailpoet/assets/js/src/automation/sections/build-your-own-section.tsx
@@ -46,39 +46,41 @@ export function BuildYourOwnSection(): JSX.Element {
   const selectedItem = list.filter((item) => item.slug === itemOpen)[0];
 
   return (
-    <section className="mailpoet-automation-section mailpoet-section-build-your-own">
-      <div>
-        <h2>{__('Build your own automation workflows', 'mailpoet')}</h2>
-        <p>
-          {__(
-            'Create customized email sequences with our new automation editor.',
-            'mailpoet',
-          )}
-        </p>
-        <ol>
-          {list.map((item, index) => (
-            <li
-              key={item.slug}
-              className={itemOpen === item.slug ? 'open' : ''}
-            >
-              <div className="marker">
-                {index < 10 ? `0${index + 1}` : index + 1}
-              </div>
-              <div>
-                <button
-                  type="button"
-                  onClick={() => setItemOpen(item.slug)}
-                  className="mailpoet-section-build-list-button"
-                >
-                  {item.title}
-                </button>
-                <p>{item.text}</p>
-              </div>
-            </li>
-          ))}
-        </ol>
+    <section className="mailpoet-automation-section mailpoet-automation-white-background">
+      <div className="mailpoet-automation-section-content mailpoet-section-build-your-own">
+        <div>
+          <h2>{__('Build your own automation workflows', 'mailpoet')}</h2>
+          <p>
+            {__(
+              'Create customized email sequences with our new automation editor.',
+              'mailpoet',
+            )}
+          </p>
+          <ol>
+            {list.map((item, index) => (
+              <li
+                key={item.slug}
+                className={itemOpen === item.slug ? 'open' : ''}
+              >
+                <div className="marker">
+                  {index < 10 ? `0${index + 1}` : index + 1}
+                </div>
+                <div>
+                  <button
+                    type="button"
+                    onClick={() => setItemOpen(item.slug)}
+                    className="mailpoet-section-build-list-button"
+                  >
+                    {item.title}
+                  </button>
+                  <p>{item.text}</p>
+                </div>
+              </li>
+            ))}
+          </ol>
+        </div>
+        <img src={selectedItem.image} alt={selectedItem.title} />
       </div>
-      <img src={selectedItem.image} alt={selectedItem.title} />
     </section>
   );
 }
diff --git a/mailpoet/assets/js/src/automation/sections/hero-section.tsx b/mailpoet/assets/js/src/automation/sections/hero-section.tsx
index f5654f912f..c5d00f8ec3 100644
--- a/mailpoet/assets/js/src/automation/sections/hero-section.tsx
+++ b/mailpoet/assets/js/src/automation/sections/hero-section.tsx
@@ -9,33 +9,35 @@ export function HeroSection(): JSX.Element {
     [],
   );
   return (
-    <section className="mailpoet-automation-section mailpoet-automation-section-hero">
-      <div>
-        <span className="mailpoet-automation-preheading">
-          {__('Automations', 'mailpoet')}
-        </span>
-        <h1>{__('Better engagement begins with automation', 'mailpoet')}</h1>
-        <p>
-          {__(
-            'Send emails that inform, reward, and engage your audience through powerful segmenting, scheduling, and design tools.',
-            'mailpoet',
-          )}
-        </p>
+    <section className="mailpoet-automation-section mailpoet-automation-white-background">
+      <div className="mailpoet-automation-section-content mailpoet-automation-section-hero">
+        <div>
+          <span className="mailpoet-automation-preheading">
+            {__('Automations', 'mailpoet')}
+          </span>
+          <h1>{__('Better engagement begins with automation', 'mailpoet')}</h1>
+          <p>
+            {__(
+              'Send emails that inform, reward, and engage your audience through powerful segmenting, scheduling, and design tools.',
+              'mailpoet',
+            )}
+          </p>
 
-        <OptionButton
-          variant="primary"
-          onClick={() => {
-            window.location.href = MailPoet.urls.automationTemplates;
-          }}
-          title={__('Start with a template', 'mailpoet')}
-        >
-          {buttonActions}
-        </OptionButton>
+          <OptionButton
+            variant="primary"
+            onClick={() => {
+              window.location.href = MailPoet.urls.automationTemplates;
+            }}
+            title={__('Start with a template', 'mailpoet')}
+          >
+            {buttonActions}
+          </OptionButton>
+        </div>
+        <img
+          src={`${MailPoet.cdnUrl}automation/sections/hero.png`}
+          alt={__('Welcome', 'mailpoet')}
+        />
       </div>
-      <img
-        src={`${MailPoet.cdnUrl}automation/sections/hero.png`}
-        alt={__('Welcome', 'mailpoet')}
-      />
     </section>
   );
 }
diff --git a/mailpoet/assets/js/src/automation/sections/templates-section.tsx b/mailpoet/assets/js/src/automation/sections/templates-section.tsx
index 99db36a132..cd408e8370 100644
--- a/mailpoet/assets/js/src/automation/sections/templates-section.tsx
+++ b/mailpoet/assets/js/src/automation/sections/templates-section.tsx
@@ -8,26 +8,28 @@ export function TemplatesSection(): JSX.Element {
   const templates = workflowTemplates.slice(0, 3);
 
   return (
-    <section className="mailpoet-automation-section mailpoet-section-templates">
-      <h2>{__('Explore essentials', 'mailpoet')}</h2>
-      <p>
-        {__(
-          'Choose from our list of pre-made templates and make it your own.',
-          'mailpoet',
-        )}
-      </p>
-      <ul className="mailpoet-section-template-list">
-        {templates.map((template) => (
-          <TemplateListItem
-            key={template.slug}
-            template={template}
-            heading="h3"
-          />
-        ))}
-      </ul>
-      <Button variant="link" href={MailPoet.urls.automationTemplates}>
-        {__('Browse all templates →', 'mailpoet')}
-      </Button>
+    <section className="mailpoet-automation-section">
+      <div className="mailpoet-automation-section-content mailpoet-section-templates">
+        <h2>{__('Explore essentials', 'mailpoet')}</h2>
+        <p>
+          {__(
+            'Choose from our list of pre-made templates and make it your own.',
+            'mailpoet',
+          )}
+        </p>
+        <ul className="mailpoet-section-template-list">
+          {templates.map((template) => (
+            <TemplateListItem
+              key={template.slug}
+              template={template}
+              heading="h3"
+            />
+          ))}
+        </ul>
+        <Button variant="link" href={MailPoet.urls.automationTemplates}>
+          {__('Browse all templates →', 'mailpoet')}
+        </Button>
+      </div>
     </section>
   );
 }