diff --git a/public/components/__tests__/__snapshots__/ContentPanel.test.tsx.snap b/public/components/__tests__/__snapshots__/ContentPanel.test.tsx.snap
index 13d35e14..8c25393c 100644
--- a/public/components/__tests__/__snapshots__/ContentPanel.test.tsx.snap
+++ b/public/components/__tests__/__snapshots__/ContentPanel.test.tsx.snap
@@ -11,13 +11,11 @@ exports[`<ContentPanel /> spec renders the component 1`] = `
     <div
       class="euiFlexItem"
     >
-      <div
-        class="euiText euiText--small"
+      <h2
+        class="euiTitle euiTitle--small"
       >
-        <h2>
-          Testing
-        </h2>
-      </div>
+        Testing
+      </h2>
     </div>
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -39,7 +37,7 @@ exports[`<ContentPanel /> spec renders the component 1`] = `
     class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
   />
   <div
-    style="padding: 0px 10px;"
+    style="padding: 0px;"
   >
     <div>
       Testing ContentPanel
@@ -59,20 +57,18 @@ exports[`<ContentPanel /> spec renders with empty actions 1`] = `
     <div
       class="euiFlexItem"
     >
-      <div
-        class="euiText euiText--small"
+      <h2
+        class="euiTitle euiTitle--small"
       >
-        <h2>
-          Testing
-        </h2>
-      </div>
+        Testing
+      </h2>
     </div>
   </div>
   <hr
     class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
   />
   <div
-    style="padding: 0px 10px;"
+    style="padding: 0px;"
   >
     <div>
       Testing ContentPanel
diff --git a/public/pages/Channels/__tests__/__snapshots__/ChannelControls.test.tsx.snap b/public/pages/Channels/__tests__/__snapshots__/ChannelControls.test.tsx.snap
index acf23670..4af9ef5d 100644
--- a/public/pages/Channels/__tests__/__snapshots__/ChannelControls.test.tsx.snap
+++ b/public/pages/Channels/__tests__/__snapshots__/ChannelControls.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<ChannelControls /> spec renders the component 1`] = `
 <div
-  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+  class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive"
 >
   <div
     class="euiFlexItem"
diff --git a/public/pages/Channels/__tests__/__snapshots__/ChannelDetails.test.tsx.snap b/public/pages/Channels/__tests__/__snapshots__/ChannelDetails.test.tsx.snap
index b03d0e62..2c01d3d2 100644
--- a/public/pages/Channels/__tests__/__snapshots__/ChannelDetails.test.tsx.snap
+++ b/public/pages/Channels/__tests__/__snapshots__/ChannelDetails.test.tsx.snap
@@ -4,13 +4,13 @@ exports[`<ChannelDetails/> spec handles a non-existing channel 1`] = `
 <div>
   <div
     class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
-    style="max-width: 1316px;"
+    style="padding: 0px 8px 0px 0px;"
   >
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <div
-        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
         <div
           class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -25,12 +25,12 @@ exports[`<ChannelDetails/> spec handles a non-existing channel 1`] = `
         </div>
         <div
           class="euiFlexItem euiFlexItem--flexGrowZero"
-          style="padding-bottom: 5px;"
+          style="padding-top: 5px;"
         />
       </div>
     </div>
     <div
-      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+      class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
       <div
         class="euiFlexItem"
@@ -48,7 +48,6 @@ exports[`<ChannelDetails/> spec handles a non-existing channel 1`] = `
   />
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-    style="max-width: 1300px;"
   >
     <div
       class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -57,13 +56,11 @@ exports[`<ChannelDetails/> spec handles a non-existing channel 1`] = `
       <div
         class="euiFlexItem"
       >
-        <div
-          class="euiText euiText--small"
+        <h2
+          class="euiTitle euiTitle--small"
         >
-          <h2>
-            Name and description
-          </h2>
-        </div>
+          Name and description
+        </h2>
       </div>
     </div>
     <hr
@@ -148,7 +145,6 @@ exports[`<ChannelDetails/> spec handles a non-existing channel 1`] = `
   />
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-    style="max-width: 1300px;"
   >
     <div
       class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -157,13 +153,11 @@ exports[`<ChannelDetails/> spec handles a non-existing channel 1`] = `
       <div
         class="euiFlexItem"
       >
-        <div
-          class="euiText euiText--small"
+        <h2
+          class="euiTitle euiTitle--small"
         >
-          <h2>
-            Configurations
-          </h2>
-        </div>
+          Configurations
+        </h2>
       </div>
     </div>
     <hr
@@ -180,13 +174,13 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
 <div>
   <div
     class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
-    style="max-width: 1316px;"
+    style="padding: 0px 8px 0px 0px;"
   >
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <div
-        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
         <div
           class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -201,12 +195,12 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
         </div>
         <div
           class="euiFlexItem euiFlexItem--flexGrowZero"
-          style="padding-bottom: 5px;"
+          style="padding-top: 5px;"
         />
       </div>
     </div>
     <div
-      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+      class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
       <div
         class="euiFlexItem"
@@ -224,7 +218,6 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
   />
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-    style="max-width: 1300px;"
   >
     <div
       class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -233,13 +226,11 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
       <div
         class="euiFlexItem"
       >
-        <div
-          class="euiText euiText--small"
+        <h2
+          class="euiTitle euiTitle--small"
         >
-          <h2>
-            Name and description
-          </h2>
-        </div>
+          Name and description
+        </h2>
       </div>
     </div>
     <hr
@@ -324,7 +315,6 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
   />
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-    style="max-width: 1300px;"
   >
     <div
       class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
@@ -333,13 +323,11 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
       <div
         class="euiFlexItem"
       >
-        <div
-          class="euiText euiText--small"
+        <h2
+          class="euiTitle euiTitle--small"
         >
-          <h2>
-            Configurations
-          </h2>
-        </div>
+          Configurations
+        </h2>
       </div>
     </div>
     <hr
@@ -355,13 +343,13 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
 exports[`<ChannelDetails/> spec renders the component 1`] = `
 <div
   class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
-  style="max-width: 1316px;"
+  style="padding: 0px 8px 0px 0px;"
 >
   <div
     class="euiFlexItem euiFlexItem--flexGrowZero"
   >
     <div
-      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
       <div
         class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -376,12 +364,12 @@ exports[`<ChannelDetails/> spec renders the component 1`] = `
       </div>
       <div
         class="euiFlexItem euiFlexItem--flexGrowZero"
-        style="padding-bottom: 5px;"
+        style="padding-top: 5px;"
       />
     </div>
   </div>
   <div
-    class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+    class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
   >
     <div
       class="euiFlexItem"
diff --git a/public/pages/Channels/__tests__/__snapshots__/Channels.test.tsx.snap b/public/pages/Channels/__tests__/__snapshots__/Channels.test.tsx.snap
index 77e8c13b..75b32f3c 100644
--- a/public/pages/Channels/__tests__/__snapshots__/Channels.test.tsx.snap
+++ b/public/pages/Channels/__tests__/__snapshots__/Channels.test.tsx.snap
@@ -11,18 +11,16 @@ exports[`<Channels/> spec renders the empty component 1`] = `
     <div
       class="euiFlexItem"
     >
-      <div
-        class="euiText euiText--small"
+      <h2
+        class="euiTitle euiTitle--small"
       >
-        <h2>
-          Channels
-          <span
-            style="color: rgb(159, 159, 159); font-weight: 300;"
-          >
-             (0)
-          </span>
-        </h2>
-      </div>
+        Channels
+        <span
+          style="color: rgb(159, 159, 159); font-weight: 300;"
+        >
+           (0)
+        </span>
+      </h2>
     </div>
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -108,7 +106,7 @@ exports[`<Channels/> spec renders the empty component 1`] = `
     style="padding: initial;"
   >
     <div
-      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
       <div
         class="euiFlexItem"
diff --git a/public/pages/CreateChannel/__tests__/__snapshots__/ChannelNamePanel.test.tsx.snap b/public/pages/CreateChannel/__tests__/__snapshots__/ChannelNamePanel.test.tsx.snap
index 303884b0..d182ab00 100644
--- a/public/pages/CreateChannel/__tests__/__snapshots__/ChannelNamePanel.test.tsx.snap
+++ b/public/pages/CreateChannel/__tests__/__snapshots__/ChannelNamePanel.test.tsx.snap
@@ -11,13 +11,11 @@ exports[`<ChannelNamePanel/> spec renders errors 1`] = `
     <div
       class="euiFlexItem"
     >
-      <div
-        class="euiText euiText--small"
+      <h2
+        class="euiTitle euiTitle--small"
       >
-        <h2>
-          Name and description
-        </h2>
-      </div>
+        Name and description
+      </h2>
     </div>
   </div>
   <hr
@@ -120,13 +118,11 @@ exports[`<ChannelNamePanel/> spec renders the component 1`] = `
     <div
       class="euiFlexItem"
     >
-      <div
-        class="euiText euiText--small"
+      <h2
+        class="euiTitle euiTitle--small"
       >
-        <h2>
-          Name and description
-        </h2>
-      </div>
+        Name and description
+      </h2>
     </div>
   </div>
   <hr
diff --git a/public/pages/Emails/__tests__/__snapshots__/RecipientGroupsTable.test.tsx.snap b/public/pages/Emails/__tests__/__snapshots__/RecipientGroupsTable.test.tsx.snap
index fb2a223c..fc8edb5b 100644
--- a/public/pages/Emails/__tests__/__snapshots__/RecipientGroupsTable.test.tsx.snap
+++ b/public/pages/Emails/__tests__/__snapshots__/RecipientGroupsTable.test.tsx.snap
@@ -11,18 +11,16 @@ exports[`<RecipientGroupsTable /> spec renders empty state 1`] = `
     <div
       class="euiFlexItem"
     >
-      <div
-        class="euiText euiText--small"
+      <h2
+        class="euiTitle euiTitle--small"
       >
-        <h2>
-          Recipient groups
-          <span
-            style="color: rgb(159, 159, 159); font-weight: 300;"
-          >
-             (0)
-          </span>
-        </h2>
-      </div>
+        Recipient groups
+        <span
+          style="color: rgb(159, 159, 159); font-weight: 300;"
+        >
+           (0)
+        </span>
+      </h2>
     </div>
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
diff --git a/public/pages/Emails/__tests__/__snapshots__/SendersTable.test.tsx.snap b/public/pages/Emails/__tests__/__snapshots__/SendersTable.test.tsx.snap
index 647c1655..e47b772a 100644
--- a/public/pages/Emails/__tests__/__snapshots__/SendersTable.test.tsx.snap
+++ b/public/pages/Emails/__tests__/__snapshots__/SendersTable.test.tsx.snap
@@ -11,18 +11,16 @@ exports[`<SendersTable /> spec renders empty state 1`] = `
     <div
       class="euiFlexItem"
     >
-      <div
-        class="euiText euiText--small"
+      <h2
+        class="euiTitle euiTitle--small"
       >
-        <h2>
-          SMTP senders
-          <span
-            style="color: rgb(159, 159, 159); font-weight: 300;"
-          >
-             (0)
-          </span>
-        </h2>
-      </div>
+        SMTP senders
+        <span
+          style="color: rgb(159, 159, 159); font-weight: 300;"
+        >
+           (0)
+        </span>
+      </h2>
     </div>
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -107,7 +105,7 @@ exports[`<SendersTable /> spec renders empty state 1`] = `
     style="padding: initial;"
   >
     <div
-      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
       <div
         class="euiFlexItem"
diff --git a/public/pages/Emails/__tests__/__snapshots__/SendersTableControls.test.tsx.snap b/public/pages/Emails/__tests__/__snapshots__/SendersTableControls.test.tsx.snap
index 00bfecc5..ce5ff41c 100644
--- a/public/pages/Emails/__tests__/__snapshots__/SendersTableControls.test.tsx.snap
+++ b/public/pages/Emails/__tests__/__snapshots__/SendersTableControls.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<SendersTableControls /> spec renders the component 1`] = `
 <div
-  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+  class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive"
 >
   <div
     class="euiFlexItem"
diff --git a/public/pages/Main/__tests__/__snapshots__/Main.test.tsx.snap b/public/pages/Main/__tests__/__snapshots__/Main.test.tsx.snap
index 49182f1a..65eef144 100644
--- a/public/pages/Main/__tests__/__snapshots__/Main.test.tsx.snap
+++ b/public/pages/Main/__tests__/__snapshots__/Main.test.tsx.snap
@@ -116,18 +116,16 @@ exports[`<Main /> spec renders the component 1`] = `
         <div
           class="euiFlexItem"
         >
-          <div
-            class="euiText euiText--small"
+          <h2
+            class="euiTitle euiTitle--small"
           >
-            <h2>
-              Channels
-              <span
-                style="color: rgb(159, 159, 159); font-weight: 300;"
-              >
-                 (0)
-              </span>
-            </h2>
-          </div>
+            Channels
+            <span
+              style="color: rgb(159, 159, 159); font-weight: 300;"
+            >
+               (0)
+            </span>
+          </h2>
         </div>
         <div
           class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -213,7 +211,7 @@ exports[`<Main /> spec renders the component 1`] = `
         style="padding: initial;"
       >
         <div
-          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+          class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive"
         >
           <div
             class="euiFlexItem"