diff --git a/public/components/ContentPanel/ContentPanel.tsx b/public/components/ContentPanel/ContentPanel.tsx
index 4a4b11fc..a6660e2b 100644
--- a/public/components/ContentPanel/ContentPanel.tsx
+++ b/public/components/ContentPanel/ContentPanel.tsx
@@ -14,7 +14,7 @@ import React from 'react';
 
 interface ContentPanelProps {
   title?: string;
-  titleSize?: 'xs' | 's' | 'm';
+  titleSize?: 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l';
   total?: number;
   bodyStyles?: object;
   panelStyles?: object;
@@ -25,7 +25,7 @@ interface ContentPanelProps {
 
 const ContentPanel: React.SFC<ContentPanelProps> = ({
   title = '',
-  titleSize = 's',
+  titleSize = 'l',
   total = undefined,
   bodyStyles = {},
   panelStyles = {},
@@ -41,14 +41,14 @@ const ContentPanel: React.SFC<ContentPanelProps> = ({
     >
       <EuiFlexItem>
         <EuiTitle size={titleSize}>
-          <h2>
+          <h3>
             {title}
             {total !== undefined ? (
               <span
                 style={{ color: '#9f9f9f', fontWeight: 300 }}
               >{` (${total})`}</span>
             ) : null}
-          </h2>
+          </h3>
         </EuiTitle>
       </EuiFlexItem>
       {actions ? (
@@ -70,7 +70,7 @@ const ContentPanel: React.SFC<ContentPanelProps> = ({
 
     <EuiHorizontalRule margin="s" className={horizontalRuleClassName} />
 
-    <div style={{ padding: '0px', ...bodyStyles }}>{children}</div>
+    <div style={{ padding: '0px 10px', ...bodyStyles }}>{children}</div>
   </EuiPanel>
 );
 
diff --git a/public/components/__tests__/__snapshots__/ContentPanel.test.tsx.snap b/public/components/__tests__/__snapshots__/ContentPanel.test.tsx.snap
index 8c25393c..4a277201 100644
--- a/public/components/__tests__/__snapshots__/ContentPanel.test.tsx.snap
+++ b/public/components/__tests__/__snapshots__/ContentPanel.test.tsx.snap
@@ -11,11 +11,11 @@ exports[`<ContentPanel /> spec renders the component 1`] = `
     <div
       class="euiFlexItem"
     >
-      <h2
-        class="euiTitle euiTitle--small"
+      <h3
+        class="euiTitle euiTitle--large"
       >
         Testing
-      </h2>
+      </h3>
     </div>
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -37,7 +37,7 @@ exports[`<ContentPanel /> spec renders the component 1`] = `
     class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
   />
   <div
-    style="padding: 0px;"
+    style="padding: 0px 10px;"
   >
     <div>
       Testing ContentPanel
@@ -57,18 +57,18 @@ exports[`<ContentPanel /> spec renders with empty actions 1`] = `
     <div
       class="euiFlexItem"
     >
-      <h2
-        class="euiTitle euiTitle--small"
+      <h3
+        class="euiTitle euiTitle--large"
       >
         Testing
-      </h2>
+      </h3>
     </div>
   </div>
   <hr
     class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
   />
   <div
-    style="padding: 0px;"
+    style="padding: 0px 10px;"
   >
     <div>
       Testing ContentPanel
diff --git a/public/pages/Channels/Channels.tsx b/public/pages/Channels/Channels.tsx
index 77441eec..7d3bea3b 100644
--- a/public/pages/Channels/Channels.tsx
+++ b/public/pages/Channels/Channels.tsx
@@ -14,7 +14,6 @@ import {
   EuiTableSortingType,
   EuiTitle,
   SortDirection,
-  EuiText,
 } from '@elastic/eui';
 import { Criteria } from '@elastic/eui/src/components/basic_table/basic_table';
 import { Pagination } from '@elastic/eui/src/components/basic_table/pagination_bar';
@@ -258,8 +257,8 @@ export class Channels extends MDSEnabledComponent<ChannelsProps, ChannelsState>
       isSelectable={true}
       selection={selection}
       noItemsMessage={<EuiEmptyPrompt
-        title={<EuiText size="s"><h2>No channels to display</h2></EuiText>}
-        body={<EuiText size="s">"To send or receive notifications, you will need to create a notification channel."</EuiText>}
+        title={<h2>No channels to display</h2>}
+        body="To send or receive notifications, you will need to create a notification channel."
         actions={<EuiSmallButton href={`#${ROUTES.CREATE_CHANNEL}`}>
           Create channel
         </EuiSmallButton>} />}
@@ -277,11 +276,11 @@ export class Channels extends MDSEnabledComponent<ChannelsProps, ChannelsState>
             appRightControls={headerControls}
             appLeftControls={[{ renderComponent: totalChannels }]}
           />
-          <ContentPanel panelStyles={{ padding: this.state.total < 1? '16px 16px 0px' : '16px' }}>
+          <ContentPanel>
             <div style={{ marginBottom: '10px' }}>
               <div style={{ display: 'flex', alignItems: 'center' }}>
                 {channelControlsComponent}
-                <div style={{ marginLeft: '16px' }}>
+                <div style={{ marginLeft: '10px' }}>
                   {channelActionsComponent}
                 </div>
               </div>
@@ -310,7 +309,7 @@ export class Channels extends MDSEnabledComponent<ChannelsProps, ChannelsState>
           }
           bodyStyles={{ padding: 'initial' }}
           title="Channels"
-          titleSize="s"
+          titleSize="m"
           total={this.state.total}
         >
           {channelControlsComponent}
@@ -319,7 +318,7 @@ export class Channels extends MDSEnabledComponent<ChannelsProps, ChannelsState>
         </ContentPanel>
       )}
     </>
-
+    
     );
   }
 };
diff --git a/public/pages/Channels/__tests__/__snapshots__/ChannelControls.test.tsx.snap b/public/pages/Channels/__tests__/__snapshots__/ChannelControls.test.tsx.snap
index dcd33374..acf23670 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--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive"
+  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
 >
   <div
     class="euiFlexItem"
@@ -91,14 +91,6 @@ exports[`<ChannelControls /> spec renders the component 1`] = `
           </button>
         </div>
       </div>
-    </div>
-  </div>
-  <div
-    class="euiFlexItem euiFlexItem--flexGrowZero"
-  >
-    <div
-      class="euiFilterGroup"
-    >
       <div
         class="euiPopover euiPopover--anchorDownCenter"
       >
diff --git a/public/pages/Channels/__tests__/__snapshots__/ChannelDetails.test.tsx.snap b/public/pages/Channels/__tests__/__snapshots__/ChannelDetails.test.tsx.snap
index 2c01d3d2..f62687c9 100644
--- a/public/pages/Channels/__tests__/__snapshots__/ChannelDetails.test.tsx.snap
+++ b/public/pages/Channels/__tests__/__snapshots__/ChannelDetails.test.tsx.snap
@@ -4,33 +4,31 @@ exports[`<ChannelDetails/> spec handles a non-existing channel 1`] = `
 <div>
   <div
     class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
-    style="padding: 0px 8px 0px 0px;"
+    style="max-width: 1316px;"
   >
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <div
-        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
         <div
           class="euiFlexItem euiFlexItem--flexGrowZero"
         >
-          <div
-            class="euiText euiText--small"
+          <h1
+            class="euiTitle euiTitle--large"
           >
-            <h1>
-              -
-            </h1>
-          </div>
+            -
+          </h1>
         </div>
         <div
           class="euiFlexItem euiFlexItem--flexGrowZero"
-          style="padding-top: 5px;"
+          style="padding-bottom: 5px;"
         />
       </div>
     </div>
     <div
-      class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
       <div
         class="euiFlexItem"
@@ -48,6 +46,7 @@ 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"
@@ -56,11 +55,11 @@ exports[`<ChannelDetails/> spec handles a non-existing channel 1`] = `
       <div
         class="euiFlexItem"
       >
-        <h2
+        <h3
           class="euiTitle euiTitle--small"
         >
           Name and description
-        </h2>
+        </h3>
       </div>
     </div>
     <hr
@@ -145,6 +144,7 @@ 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"
@@ -153,11 +153,11 @@ exports[`<ChannelDetails/> spec handles a non-existing channel 1`] = `
       <div
         class="euiFlexItem"
       >
-        <h2
+        <h3
           class="euiTitle euiTitle--small"
         >
           Configurations
-        </h2>
+        </h3>
       </div>
     </div>
     <hr
@@ -174,33 +174,31 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
 <div>
   <div
     class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
-    style="padding: 0px 8px 0px 0px;"
+    style="max-width: 1316px;"
   >
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <div
-        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
         <div
           class="euiFlexItem euiFlexItem--flexGrowZero"
         >
-          <div
-            class="euiText euiText--small"
+          <h1
+            class="euiTitle euiTitle--large"
           >
-            <h1>
-              -
-            </h1>
-          </div>
+            -
+          </h1>
         </div>
         <div
           class="euiFlexItem euiFlexItem--flexGrowZero"
-          style="padding-top: 5px;"
+          style="padding-bottom: 5px;"
         />
       </div>
     </div>
     <div
-      class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
       <div
         class="euiFlexItem"
@@ -218,6 +216,7 @@ 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"
@@ -226,11 +225,11 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
       <div
         class="euiFlexItem"
       >
-        <h2
+        <h3
           class="euiTitle euiTitle--small"
         >
           Name and description
-        </h2>
+        </h3>
       </div>
     </div>
     <hr
@@ -315,6 +314,7 @@ 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"
@@ -323,11 +323,11 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
       <div
         class="euiFlexItem"
       >
-        <h2
+        <h3
           class="euiTitle euiTitle--small"
         >
           Configurations
-        </h2>
+        </h3>
       </div>
     </div>
     <hr
@@ -343,33 +343,31 @@ 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="padding: 0px 8px 0px 0px;"
+  style="max-width: 1316px;"
 >
   <div
     class="euiFlexItem euiFlexItem--flexGrowZero"
   >
     <div
-      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
       <div
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
-        <div
-          class="euiText euiText--small"
+        <h1
+          class="euiTitle euiTitle--large"
         >
-          <h1>
-            -
-          </h1>
-        </div>
+          -
+        </h1>
       </div>
       <div
         class="euiFlexItem euiFlexItem--flexGrowZero"
-        style="padding-top: 5px;"
+        style="padding-bottom: 5px;"
       />
     </div>
   </div>
   <div
-    class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+    class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexEnd 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 9bebd4d1..70e53c08 100644
--- a/public/pages/Channels/__tests__/__snapshots__/Channels.test.tsx.snap
+++ b/public/pages/Channels/__tests__/__snapshots__/Channels.test.tsx.snap
@@ -11,8 +11,8 @@ exports[`<Channels/> spec renders the empty component 1`] = `
     <div
       class="euiFlexItem"
     >
-      <h2
-        class="euiTitle euiTitle--small"
+      <h3
+        class="euiTitle euiTitle--medium"
       >
         Channels
         <span
@@ -20,7 +20,7 @@ exports[`<Channels/> spec renders the empty component 1`] = `
         >
            (0)
         </span>
-      </h2>
+      </h3>
     </div>
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -106,7 +106,7 @@ exports[`<Channels/> spec renders the empty component 1`] = `
     style="padding: initial;"
   >
     <div
-      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive"
+      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
       <div
         class="euiFlexItem"
@@ -195,14 +195,6 @@ exports[`<Channels/> spec renders the empty component 1`] = `
               </button>
             </div>
           </div>
-        </div>
-      </div>
-      <div
-        class="euiFlexItem euiFlexItem--flexGrowZero"
-      >
-        <div
-          class="euiFilterGroup"
-        >
           <div
             class="euiPopover euiPopover--anchorDownCenter"
           >
@@ -498,13 +490,11 @@ exports[`<Channels/> spec renders the empty component 1`] = `
                     <div
                       class="euiEmptyPrompt"
                     >
-                      <div
-                        class="euiText euiText--small euiTitle euiTitle--medium"
+                      <h2
+                        class="euiTitle euiTitle--medium"
                       >
-                        <h2>
-                          No channels to display
-                        </h2>
-                      </div>
+                        No channels to display
+                      </h2>
                       <span
                         class="euiTextColor euiTextColor--subdued"
                       >
@@ -514,11 +504,7 @@ exports[`<Channels/> spec renders the empty component 1`] = `
                         <div
                           class="euiText euiText--medium"
                         >
-                          <div
-                            class="euiText euiText--small"
-                          >
-                            "To send or receive notifications, you will need to create a notification channel."
-                          </div>
+                          To send or receive notifications, you will need to create a notification channel.
                         </div>
                       </span>
                       <div
diff --git a/public/pages/Channels/__tests__/__snapshots__/DetailsListModal.test.tsx.snap b/public/pages/Channels/__tests__/__snapshots__/DetailsListModal.test.tsx.snap
index eae92f86..2eafcd44 100644
--- a/public/pages/Channels/__tests__/__snapshots__/DetailsListModal.test.tsx.snap
+++ b/public/pages/Channels/__tests__/__snapshots__/DetailsListModal.test.tsx.snap
@@ -82,13 +82,7 @@ exports[`<DetailsListModal /> spec renders the component 1`] = `
                         <div
                           class="euiModalHeader__title"
                         >
-                          <div
-                            class="euiText euiText--small"
-                          >
-                            <h2>
-                              test header
-                            </h2>
-                          </div>
+                          test header
                         </div>
                       </div>
                       <div
@@ -319,13 +313,7 @@ exports[`<DetailsListModal /> spec renders the component 1`] = `
                                 <div
                                   class="euiModalHeader__title"
                                 >
-                                  <div
-                                    class="euiText euiText--small"
-                                  >
-                                    <h2>
-                                      test header
-                                    </h2>
-                                  </div>
+                                  test header
                                 </div>
                               </div>
                               <div
@@ -488,13 +476,7 @@ exports[`<DetailsListModal /> spec renders the component 1`] = `
                                   <div
                                     class="euiModalHeader__title"
                                   >
-                                    <div
-                                      class="euiText euiText--small"
-                                    >
-                                      <h2>
-                                        test header
-                                      </h2>
-                                    </div>
+                                    test header
                                   </div>
                                 </div>
                                 <div
@@ -657,13 +639,7 @@ exports[`<DetailsListModal /> spec renders the component 1`] = `
                                     <div
                                       class="euiModalHeader__title"
                                     >
-                                      <div
-                                        class="euiText euiText--small"
-                                      >
-                                        <h2>
-                                          test header
-                                        </h2>
-                                      </div>
+                                      test header
                                     </div>
                                   </div>
                                   <div
@@ -814,13 +790,7 @@ exports[`<DetailsListModal /> spec renders the component 1`] = `
                                       <div
                                         class="euiModalHeader__title"
                                       >
-                                        <div
-                                          class="euiText euiText--small"
-                                        >
-                                          <h2>
-                                            test header
-                                          </h2>
-                                        </div>
+                                        test header
                                       </div>
                                     </div>
                                     <div
@@ -1025,17 +995,7 @@ exports[`<DetailsListModal /> spec renders the component 1`] = `
                                   <div
                                     className="euiModalHeader__title"
                                   >
-                                    <EuiText
-                                      size="s"
-                                    >
-                                      <div
-                                        className="euiText euiText--small"
-                                      >
-                                        <h2>
-                                          test header
-                                        </h2>
-                                      </div>
-                                    </EuiText>
+                                    test header
                                   </div>
                                 </EuiModalHeaderTitle>
                               </div>
diff --git a/public/pages/Channels/__tests__/__snapshots__/DetailsTableModal.test.tsx.snap b/public/pages/Channels/__tests__/__snapshots__/DetailsTableModal.test.tsx.snap
index 5ff99ef8..1df1f38b 100644
--- a/public/pages/Channels/__tests__/__snapshots__/DetailsTableModal.test.tsx.snap
+++ b/public/pages/Channels/__tests__/__snapshots__/DetailsTableModal.test.tsx.snap
@@ -82,13 +82,7 @@ exports[`<DetailsTableModal /> spec renders headers 1`] = `
                         <div
                           class="euiModalHeader__title"
                         >
-                          <div
-                            class="euiText euiText--small"
-                          >
-                            <h2>
-                              test header
-                            </h2>
-                          </div>
+                          test header
                         </div>
                       </div>
                       <div
@@ -383,13 +377,7 @@ exports[`<DetailsTableModal /> spec renders headers 1`] = `
                                 <div
                                   class="euiModalHeader__title"
                                 >
-                                  <div
-                                    class="euiText euiText--small"
-                                  >
-                                    <h2>
-                                      test header
-                                    </h2>
-                                  </div>
+                                  test header
                                 </div>
                               </div>
                               <div
@@ -616,13 +604,7 @@ exports[`<DetailsTableModal /> spec renders headers 1`] = `
                                   <div
                                     class="euiModalHeader__title"
                                   >
-                                    <div
-                                      class="euiText euiText--small"
-                                    >
-                                      <h2>
-                                        test header
-                                      </h2>
-                                    </div>
+                                    test header
                                   </div>
                                 </div>
                                 <div
@@ -849,13 +831,7 @@ exports[`<DetailsTableModal /> spec renders headers 1`] = `
                                     <div
                                       class="euiModalHeader__title"
                                     >
-                                      <div
-                                        class="euiText euiText--small"
-                                      >
-                                        <h2>
-                                          test header
-                                        </h2>
-                                      </div>
+                                      test header
                                     </div>
                                   </div>
                                   <div
@@ -1070,13 +1046,7 @@ exports[`<DetailsTableModal /> spec renders headers 1`] = `
                                       <div
                                         class="euiModalHeader__title"
                                       >
-                                        <div
-                                          class="euiText euiText--small"
-                                        >
-                                          <h2>
-                                            test header
-                                          </h2>
-                                        </div>
+                                        test header
                                       </div>
                                     </div>
                                     <div
@@ -1345,17 +1315,7 @@ exports[`<DetailsTableModal /> spec renders headers 1`] = `
                                   <div
                                     className="euiModalHeader__title"
                                   >
-                                    <EuiText
-                                      size="s"
-                                    >
-                                      <div
-                                        className="euiText euiText--small"
-                                      >
-                                        <h2>
-                                          test header
-                                        </h2>
-                                      </div>
-                                    </EuiText>
+                                    test header
                                   </div>
                                 </EuiModalHeaderTitle>
                               </div>
@@ -1975,13 +1935,7 @@ exports[`<DetailsTableModal /> spec renders parameters 1`] = `
                         <div
                           class="euiModalHeader__title"
                         >
-                          <div
-                            class="euiText euiText--small"
-                          >
-                            <h2>
-                              test header
-                            </h2>
-                          </div>
+                          test header
                         </div>
                       </div>
                       <div
@@ -2276,13 +2230,7 @@ exports[`<DetailsTableModal /> spec renders parameters 1`] = `
                                 <div
                                   class="euiModalHeader__title"
                                 >
-                                  <div
-                                    class="euiText euiText--small"
-                                  >
-                                    <h2>
-                                      test header
-                                    </h2>
-                                  </div>
+                                  test header
                                 </div>
                               </div>
                               <div
@@ -2509,13 +2457,7 @@ exports[`<DetailsTableModal /> spec renders parameters 1`] = `
                                   <div
                                     class="euiModalHeader__title"
                                   >
-                                    <div
-                                      class="euiText euiText--small"
-                                    >
-                                      <h2>
-                                        test header
-                                      </h2>
-                                    </div>
+                                    test header
                                   </div>
                                 </div>
                                 <div
@@ -2742,13 +2684,7 @@ exports[`<DetailsTableModal /> spec renders parameters 1`] = `
                                     <div
                                       class="euiModalHeader__title"
                                     >
-                                      <div
-                                        class="euiText euiText--small"
-                                      >
-                                        <h2>
-                                          test header
-                                        </h2>
-                                      </div>
+                                      test header
                                     </div>
                                   </div>
                                   <div
@@ -2963,13 +2899,7 @@ exports[`<DetailsTableModal /> spec renders parameters 1`] = `
                                       <div
                                         class="euiModalHeader__title"
                                       >
-                                        <div
-                                          class="euiText euiText--small"
-                                        >
-                                          <h2>
-                                            test header
-                                          </h2>
-                                        </div>
+                                        test header
                                       </div>
                                     </div>
                                     <div
@@ -3238,17 +3168,7 @@ exports[`<DetailsTableModal /> spec renders parameters 1`] = `
                                   <div
                                     className="euiModalHeader__title"
                                   >
-                                    <EuiText
-                                      size="s"
-                                    >
-                                      <div
-                                        className="euiText euiText--small"
-                                      >
-                                        <h2>
-                                          test header
-                                        </h2>
-                                      </div>
-                                    </EuiText>
+                                    test header
                                   </div>
                                 </EuiModalHeaderTitle>
                               </div>
diff --git a/public/pages/Channels/components/ChannelActions.tsx b/public/pages/Channels/components/ChannelActions.tsx
index 62b49eb3..b809e537 100644
--- a/public/pages/Channels/components/ChannelActions.tsx
+++ b/public/pages/Channels/components/ChannelActions.tsx
@@ -99,7 +99,6 @@ export function ChannelActions(props: ChannelActionsProps) {
             <EuiContextMenuItem
               key={params.label}
               disabled={params.disabled}
-              size="s"
               onClick={() => {
                 setIsPopoverOpen(false);
                 if (params.modal) {
diff --git a/public/pages/Channels/components/ChannelControls.tsx b/public/pages/Channels/components/ChannelControls.tsx
index 9c5f37e6..8024a88f 100644
--- a/public/pages/Channels/components/ChannelControls.tsx
+++ b/public/pages/Channels/components/ChannelControls.tsx
@@ -96,7 +96,7 @@ export const ChannelControls = (props: ChannelControlsProps) => {
   }
 
   return (
-    <EuiFlexGroup gutterSize={'m'}>
+    <EuiFlexGroup>
       <EuiFlexItem>
         <EuiCompressedFieldSearch
           fullWidth={true}
@@ -136,10 +136,6 @@ export const ChannelControls = (props: ChannelControlsProps) => {
               );
             })}
           </EuiPopover>
-        </EuiFilterGroup>
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiFilterGroup>
           <EuiPopover
             button={
               <EuiSmallFilterButton
diff --git a/public/pages/Channels/components/details/ChannelDetails.tsx b/public/pages/Channels/components/details/ChannelDetails.tsx
index 90549b89..96b71f4f 100644
--- a/public/pages/Channels/components/details/ChannelDetails.tsx
+++ b/public/pages/Channels/components/details/ChannelDetails.tsx
@@ -11,6 +11,7 @@ import {
   EuiSmallButton,
   EuiSpacer,
   EuiText,
+  EuiTitle,
 } from '@elastic/eui';
 import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
 import React, { useContext, useEffect, useState } from 'react';
@@ -32,8 +33,6 @@ import { ChannelDetailItems } from './ChannelDetailItems';
 import { ChannelDetailsActions } from './ChannelDetailsActions';
 import { ChannelSettingsDetails } from './ChannelSettingsDetails';
 import PageHeader from "../../../../components/PageHeader/PageHeader";
-import { TopNavControlButtonData } from '../../../../../../../src/plugins/navigation/public';
-import { getUseUpdatedUx } from '../../../../services/utils/constants';
 
 interface ChannelDetailsProps extends RouteComponentProps<{
   id: string
@@ -144,7 +143,7 @@ export function ChannelDetails(props: ChannelDetailsProps) {
     },
   ];
 
-  const actionsAndMuteComponent = <EuiFlexGroup gutterSize="s" alignItems="center">
+  const actionsAndMuteComponent = <EuiFlexGroup gutterSize="m" alignItems="flexEnd">
     <EuiFlexItem />
     <EuiFlexItem grow={false}>
       {channel && (
@@ -192,16 +191,22 @@ export function ChannelDetails(props: ChannelDetailsProps) {
       ),
     },
     {
-      controlType: 'button',
-      testId: 'send-test-message-button',
-      isDisabled: !channel?.is_enabled,
-      run: sendTestMessage,
-      label: 'Send test message',
-      fill: true,
-    } as TopNavControlButtonData,
+      renderComponent: (
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <EuiSmallButton
+            data-test-subj="send-test-message-button"
+            onClick={sendTestMessage}
+            style={{ marginLeft: '10px' }}
+            disabled={!channel?.is_enabled}
+          >
+            Send test message
+          </EuiSmallButton>
+        </div>
+      ),
+    },
   ];
 
-  const badgeComponent = <EuiFlexItem grow={false} style={{ paddingTop: '5px' }}>
+  const badgeComponent = <EuiFlexItem grow={false} style={{ paddingBottom: 5 }}>
     {channel?.is_enabled === undefined ? null : channel.is_enabled ? (
       <EuiHealth color="success">Active</EuiHealth>
     ) : (
@@ -227,14 +232,14 @@ export function ChannelDetails(props: ChannelDetailsProps) {
           <EuiFlexGroup
           alignItems="center"
           gutterSize="m"
-          style={{ padding: '0px 8px 0px 0px' }}
+          style={{ maxWidth: 1316 }}
         >
           <EuiFlexItem grow={false}>
-            <EuiFlexGroup gutterSize="m" alignItems="center">
+            <EuiFlexGroup gutterSize="m" alignItems="flexEnd">
               <EuiFlexItem grow={false}>
-                <EuiText size="s">
+                <EuiTitle size="l">
                   <h1>{channel?.name ?? '-'}</h1>
-                </EuiText>
+                </EuiTitle>
               </EuiFlexItem>
               {badgeComponent}
             </EuiFlexGroup>
@@ -244,12 +249,12 @@ export function ChannelDetails(props: ChannelDetailsProps) {
         )}
       </PageHeader>
 
-      {!getUseUpdatedUx() && <EuiSpacer />}
-
+      <EuiSpacer />
       <ContentPanel
         bodyStyles={{ padding: 'initial' }}
         title="Name and description"
         titleSize="s"
+        panelStyles={{ maxWidth: 1300 }}
       >
         <ChannelDetailItems listItems={nameList} />
       </ContentPanel>
@@ -260,6 +265,7 @@ export function ChannelDetails(props: ChannelDetailsProps) {
         bodyStyles={{ padding: 'initial' }}
         title="Configurations"
         titleSize="s"
+        panelStyles={{ maxWidth: 1300 }}
       >
         <ChannelSettingsDetails channel={channel} />
       </ContentPanel>
diff --git a/public/pages/Channels/components/details/ChannelDetailsActions.tsx b/public/pages/Channels/components/details/ChannelDetailsActions.tsx
index e01b1716..7d01d3df 100644
--- a/public/pages/Channels/components/details/ChannelDetailsActions.tsx
+++ b/public/pages/Channels/components/details/ChannelDetailsActions.tsx
@@ -101,7 +101,6 @@ export function ChannelDetailsActions(props: ChannelDetailsActionsProps) {
             <EuiContextMenuItem
               key={params.label}
               disabled={params.disabled}
-              size="s"
               onClick={() => {
                 setIsPopoverOpen(false);
                 if (params.modal) {
diff --git a/public/pages/Channels/components/modals/DeleteChannelModal.tsx b/public/pages/Channels/components/modals/DeleteChannelModal.tsx
index 1002077c..636ed1f4 100644
--- a/public/pages/Channels/components/modals/DeleteChannelModal.tsx
+++ b/public/pages/Channels/components/modals/DeleteChannelModal.tsx
@@ -48,14 +48,10 @@ export const DeleteChannelModal = (props: DeleteChannelModalProps) => {
     <EuiOverlayMask>
       <EuiModal onClose={props.onClose} maxWidth={500}>
         <EuiModalHeader>
-          <EuiModalHeaderTitle>
-            <EuiText size="s">
-              <h2>{`Delete ${name}?`}</h2>
-            </EuiText>
-          </EuiModalHeaderTitle>
+          <EuiModalHeaderTitle>{`Delete ${name}?`}</EuiModalHeaderTitle>
         </EuiModalHeader>
         <EuiModalBody>
-          <EuiText size="s">{message}</EuiText>
+          <EuiText>{message}</EuiText>
           {num >= 2 && (
             <>
               <EuiSpacer />
@@ -63,7 +59,6 @@ export const DeleteChannelModal = (props: DeleteChannelModalProps) => {
                 <EuiText
                   key={`channel-list-item-${i}`}
                   style={{ marginLeft: 20 }}
-                  size="s"
                 >
                   <li>{channel.name}</li>
                 </EuiText>
@@ -71,7 +66,7 @@ export const DeleteChannelModal = (props: DeleteChannelModalProps) => {
             </>
           )}
           <EuiSpacer />
-          <EuiText size="s">
+          <EuiText>
             To confirm delete, type <i>delete</i> in the field.
           </EuiText>
           <EuiCompressedFieldText
diff --git a/public/pages/Channels/components/modals/DetailsListModal.tsx b/public/pages/Channels/components/modals/DetailsListModal.tsx
index cf8da981..9a84ca0f 100644
--- a/public/pages/Channels/components/modals/DetailsListModal.tsx
+++ b/public/pages/Channels/components/modals/DetailsListModal.tsx
@@ -13,7 +13,6 @@ import {
   EuiModalHeaderTitle,
   EuiOverlayMask,
   EuiTitle,
-  EuiText,
 } from '@elastic/eui';
 import React from 'react';
 import { ModalRootProps } from '../../../../components/Modal/ModalRoot';
@@ -31,11 +30,7 @@ export function DetailsListModal(props: DetailsListModalProps) {
       <EuiOverlayMask>
         <EuiModal onClose={props.onClose} maxWidth={800}>
           <EuiModalHeader>
-            <EuiModalHeaderTitle>
-              <EuiText size="s">
-                <h2>{props.header}</h2>
-              </EuiText>
-            </EuiModalHeaderTitle>
+            <EuiModalHeaderTitle>{props.header}</EuiModalHeaderTitle>
           </EuiModalHeader>
           <EuiModalBody>
             <EuiTitle size="xxs">
diff --git a/public/pages/Channels/components/modals/DetailsTableModal.tsx b/public/pages/Channels/components/modals/DetailsTableModal.tsx
index 462b4ebc..773fe1f3 100644
--- a/public/pages/Channels/components/modals/DetailsTableModal.tsx
+++ b/public/pages/Channels/components/modals/DetailsTableModal.tsx
@@ -13,7 +13,6 @@ import {
   EuiModalHeaderTitle,
   EuiOverlayMask,
   EuiTableFieldDataColumnType,
-  EuiText,
 } from '@elastic/eui';
 import React from 'react';
 import { ModalRootProps } from '../../../../components/Modal/ModalRoot';
@@ -50,11 +49,7 @@ export function DetailsTableModal(props: DetailsTableModalProps) {
       <EuiOverlayMask>
         <EuiModal onClose={props.onClose} maxWidth={800}>
           <EuiModalHeader>
-            <EuiModalHeaderTitle>
-              <EuiText size="s">
-                <h2>{props.header}</h2>
-              </EuiText>
-            </EuiModalHeaderTitle>
+            <EuiModalHeaderTitle>{props.header}</EuiModalHeaderTitle>
           </EuiModalHeader>
           <EuiModalBody>
             <EuiInMemoryTable items={props.items} columns={columns} />
diff --git a/public/pages/Channels/components/modals/MuteChannelModal.tsx b/public/pages/Channels/components/modals/MuteChannelModal.tsx
index 1634f632..b1b807f6 100644
--- a/public/pages/Channels/components/modals/MuteChannelModal.tsx
+++ b/public/pages/Channels/components/modals/MuteChannelModal.tsx
@@ -37,14 +37,10 @@ export const MuteChannelModal = (props: MuteChannelModalProps) => {
     <EuiOverlayMask>
       <EuiModal onClose={props.onClose} maxWidth={500}>
         <EuiModalHeader>
-          <EuiModalHeaderTitle>
-            <EuiText size="s">
-              <h2>{`Mute ${props.selected[0].name}?`}</h2>
-            </EuiText>
-          </EuiModalHeaderTitle>
+          <EuiModalHeaderTitle>{`Mute ${props.selected[0].name}?`}</EuiModalHeaderTitle>
         </EuiModalHeader>
         <EuiModalBody>
-          <EuiText size="s">
+          <EuiText>
             This channel will stop sending notifications to its recipients.
             However, the channel will remain available for selection.
           </EuiText>
diff --git a/public/pages/CreateChannel/CreateChannel.tsx b/public/pages/CreateChannel/CreateChannel.tsx
index 6035f13b..d82d91a8 100644
--- a/public/pages/CreateChannel/CreateChannel.tsx
+++ b/public/pages/CreateChannel/CreateChannel.tsx
@@ -14,6 +14,7 @@ import {
   EuiCompressedSuperSelect,
   EuiSuperSelectOption,
   EuiText,
+  EuiTitle,
 } from '@elastic/eui';
 import queryString from 'query-string';
 import React, { createContext, useContext, useEffect, useState } from 'react';
@@ -373,15 +374,13 @@ export function CreateChannel(props: CreateChannelsProps) {
       <CreateChannelContext.Provider
         value={{ edit: props.edit, inputErrors, setInputErrors }}
       >
-        {!getUseUpdatedUx() && (
-          <>
-            <EuiText size="s">
-              <h1>{`${props.edit ? 'Edit' : 'Create'} channel`}</h1>
-            </EuiText>
-            <EuiSpacer />
-          </>
+       {!getUseUpdatedUx() && (
+          <EuiTitle size="l">
+            <h1>{`${props.edit ? 'Edit' : 'Create'} channel`}</h1>
+          </EuiTitle>
         )}
 
+        <EuiSpacer />
         <ChannelNamePanel
           name={name}
           setName={setName}
diff --git a/public/pages/CreateChannel/__tests__/__snapshots__/ChannelNamePanel.test.tsx.snap b/public/pages/CreateChannel/__tests__/__snapshots__/ChannelNamePanel.test.tsx.snap
index d182ab00..0e4b7f41 100644
--- a/public/pages/CreateChannel/__tests__/__snapshots__/ChannelNamePanel.test.tsx.snap
+++ b/public/pages/CreateChannel/__tests__/__snapshots__/ChannelNamePanel.test.tsx.snap
@@ -11,11 +11,11 @@ exports[`<ChannelNamePanel/> spec renders errors 1`] = `
     <div
       class="euiFlexItem"
     >
-      <h2
+      <h3
         class="euiTitle euiTitle--small"
       >
         Name and description
-      </h2>
+      </h3>
     </div>
   </div>
   <hr
@@ -118,11 +118,11 @@ exports[`<ChannelNamePanel/> spec renders the component 1`] = `
     <div
       class="euiFlexItem"
     >
-      <h2
+      <h3
         class="euiTitle euiTitle--small"
       >
         Name and description
-      </h2>
+      </h3>
     </div>
   </div>
   <hr
diff --git a/public/pages/CreateChannel/__tests__/__snapshots__/CreateChannel.test.tsx.snap b/public/pages/CreateChannel/__tests__/__snapshots__/CreateChannel.test.tsx.snap
index af83701e..c93e8141 100644
--- a/public/pages/CreateChannel/__tests__/__snapshots__/CreateChannel.test.tsx.snap
+++ b/public/pages/CreateChannel/__tests__/__snapshots__/CreateChannel.test.tsx.snap
@@ -1,11 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<CreateChannel/> spec renders the component 1`] = `
-<div
-  class="euiText euiText--small"
+<h1
+  class="euiTitle euiTitle--large"
 >
-  <h1>
-    Create channel
-  </h1>
-</div>
+  Create channel
+</h1>
 `;
diff --git a/public/pages/CreateChannel/components/modals/CreateRecipientGroupModal.tsx b/public/pages/CreateChannel/components/modals/CreateRecipientGroupModal.tsx
index e3610256..5d7225ec 100644
--- a/public/pages/CreateChannel/components/modals/CreateRecipientGroupModal.tsx
+++ b/public/pages/CreateChannel/components/modals/CreateRecipientGroupModal.tsx
@@ -13,7 +13,6 @@ import {
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiOverlayMask,
-  EuiText,
 } from '@elastic/eui';
 import React, { useContext, useState } from 'react';
 import { CoreServicesContext } from '../../../../components/coreServices';
@@ -67,11 +66,7 @@ export function CreateRecipientGroupModal(
     <EuiOverlayMask>
       <EuiModal onClose={props.onClose} style={{ width: 650 }}>
         <EuiModalHeader>
-          <EuiModalHeaderTitle>
-            <EuiText size="s">
-              <h2>Create recipient group</h2>
-            </EuiText>
-          </EuiModalHeaderTitle>
+          <EuiModalHeaderTitle>Create recipient group</EuiModalHeaderTitle>
         </EuiModalHeader>
 
         <EuiModalBody>
diff --git a/public/pages/CreateChannel/components/modals/CreateSESSenderModal.tsx b/public/pages/CreateChannel/components/modals/CreateSESSenderModal.tsx
index 0ab58e6d..a674111a 100644
--- a/public/pages/CreateChannel/components/modals/CreateSESSenderModal.tsx
+++ b/public/pages/CreateChannel/components/modals/CreateSESSenderModal.tsx
@@ -13,7 +13,6 @@ import {
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiOverlayMask,
-  EuiText,
 } from '@elastic/eui';
 import React, { useContext, useState } from 'react';
 import { CoreServicesContext } from '../../../../components/coreServices';
@@ -71,11 +70,7 @@ export function CreateSESSenderModal(props: CreateSESSenderModalProps) {
     <EuiOverlayMask>
       <EuiModal onClose={props.onClose} style={{ width: 750 }}>
         <EuiModalHeader>
-          <EuiModalHeaderTitle>
-            <EuiText size="s">
-              <h2>Create SES sender</h2>
-            </EuiText>
-          </EuiModalHeaderTitle>
+          <EuiModalHeaderTitle>Create SES sender</EuiModalHeaderTitle>
         </EuiModalHeader>
 
         <EuiModalBody>
diff --git a/public/pages/CreateChannel/components/modals/CreateSenderModal.tsx b/public/pages/CreateChannel/components/modals/CreateSenderModal.tsx
index 7801aa18..9fe19221 100644
--- a/public/pages/CreateChannel/components/modals/CreateSenderModal.tsx
+++ b/public/pages/CreateChannel/components/modals/CreateSenderModal.tsx
@@ -13,7 +13,6 @@ import {
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiOverlayMask,
-  EuiText,
 } from '@elastic/eui';
 import React, { useContext, useState } from 'react';
 import { CoreServicesContext } from '../../../../components/coreServices';
@@ -69,11 +68,7 @@ export function CreateSenderModal(props: CreateSenderModalProps) {
     <EuiOverlayMask>
       <EuiModal onClose={props.onClose} style={{ width: 750 }}>
         <EuiModalHeader>
-          <EuiModalHeaderTitle>
-            <EuiText size="s">
-              <h2>Create SMTP sender</h2>
-            </EuiText>
-          </EuiModalHeaderTitle>
+          <EuiModalHeaderTitle>Create SMTP sender</EuiModalHeaderTitle>
         </EuiModalHeader>
 
         <EuiModalBody>
diff --git a/public/pages/Emails/CreateRecipientGroup.tsx b/public/pages/Emails/CreateRecipientGroup.tsx
index 05e0b184..f492f389 100644
--- a/public/pages/Emails/CreateRecipientGroup.tsx
+++ b/public/pages/Emails/CreateRecipientGroup.tsx
@@ -10,7 +10,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiSpacer,
-  EuiText,
+  EuiTitle,
 } from '@elastic/eui';
 import React, { useContext, useEffect, useState } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
@@ -111,18 +111,17 @@ export function CreateRecipientGroup(props: CreateRecipientGroupProps) {
   return (
     <>
       {!getUseUpdatedUx() && (
-        <>
-          <EuiText size="s">
-            <h1>{`${props.edit ? 'Edit' : 'Create'} recipient group`}</h1>
-          </EuiText>
-          <EuiSpacer />
-        </>
+        <EuiTitle size="l">
+          <h1>{`${props.edit ? 'Edit' : 'Create'} recipient group`}</h1>
+        </EuiTitle>
       )}
 
+      <EuiSpacer />
       <ContentPanel
         bodyStyles={{ padding: 'initial' }}
         title="Configure recipient group"
         titleSize="s"
+        panelStyles={{ maxWidth: 1000 }}
       >
         <CreateRecipientGroupForm
           name={name}
@@ -138,7 +137,7 @@ export function CreateRecipientGroup(props: CreateRecipientGroupProps) {
         />
       </ContentPanel>
       <EuiSpacer />
-      <EuiFlexGroup justifyContent="flexEnd">
+      <EuiFlexGroup justifyContent="flexEnd" style={{ maxWidth: 1024 }}>
         <EuiFlexItem grow={false}>
           <EuiSmallButtonEmpty href={`#${ROUTES.EMAIL_GROUPS}`}>
             Cancel
diff --git a/public/pages/Emails/CreateSESSender.tsx b/public/pages/Emails/CreateSESSender.tsx
index e517240a..63a6c960 100644
--- a/public/pages/Emails/CreateSESSender.tsx
+++ b/public/pages/Emails/CreateSESSender.tsx
@@ -9,7 +9,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiSpacer,
-  EuiText,
+  EuiTitle,
 } from '@elastic/eui';
 import React, { useContext, useEffect, useState } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
@@ -102,18 +102,17 @@ export function CreateSESSender(props: CreateSESSenderProps) {
   return (
     <>
       {!getUseUpdatedUx() && (
-        <>
-          <EuiText size="s">
-            <h1>{`${props.edit ? 'Edit' : 'Create'} SES sender`}</h1>
-          </EuiText>
-          <EuiSpacer />
-        </>
+        <EuiTitle size="l">
+          <h1>{`${props.edit ? 'Edit' : 'Create'} SES sender`}</h1>
+        </EuiTitle>
       )}
 
+      <EuiSpacer />
       <ContentPanel
         bodyStyles={{ padding: 'initial' }}
         title="Configure sender"
         titleSize="s"
+        panelStyles={{ maxWidth: 1000 }}
       >
         <CreateSESSenderForm
           senderName={senderName}
@@ -130,7 +129,7 @@ export function CreateSESSender(props: CreateSESSenderProps) {
       </ContentPanel>
 
       <EuiSpacer />
-      <EuiFlexGroup justifyContent="flexEnd">
+      <EuiFlexGroup justifyContent="flexEnd" style={{ maxWidth: 1024 }}>
         <EuiFlexItem grow={false}>
           <EuiSmallButtonEmpty href={`#${ROUTES.EMAIL_SENDERS}`}>
             Cancel
diff --git a/public/pages/Emails/CreateSender.tsx b/public/pages/Emails/CreateSender.tsx
index 067eb3fa..15492bbd 100644
--- a/public/pages/Emails/CreateSender.tsx
+++ b/public/pages/Emails/CreateSender.tsx
@@ -9,7 +9,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiSpacer,
-  EuiText,
+  EuiTitle,
 } from '@elastic/eui';
 import React, { useContext, useEffect, useState } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
@@ -99,18 +99,17 @@ export function CreateSender(props: CreateSenderProps) {
   return (
     <>
       {!getUseUpdatedUx() && (
-        <>
-          <EuiText size="s">
-            <h1>{`${props.edit ? 'Edit' : 'Create'} SMTP sender`}</h1>
-          </EuiText>
-          <EuiSpacer />
-        </>
+        <EuiTitle size="l">
+          <h1>{`${props.edit ? 'Edit' : 'Create'} SMTP sender`}</h1>
+        </EuiTitle>
       )}
 
+      <EuiSpacer />
       <ContentPanel
         bodyStyles={{ padding: 'initial' }}
         title="Configure sender"
         titleSize="s"
+        panelStyles={{ maxWidth: 1000 }}
       >
         <CreateSenderForm
           senderName={senderName}
@@ -129,7 +128,7 @@ export function CreateSender(props: CreateSenderProps) {
       </ContentPanel>
 
       <EuiSpacer />
-      <EuiFlexGroup justifyContent="flexEnd">
+      <EuiFlexGroup justifyContent="flexEnd" style={{ maxWidth: 1024 }}>
         <EuiFlexItem grow={false}>
           <EuiSmallButtonEmpty href={`#${ROUTES.EMAIL_SENDERS}`}>
             Cancel
diff --git a/public/pages/Emails/EmailGroups.tsx b/public/pages/Emails/EmailGroups.tsx
index ab0f4e04..90a5cd2c 100644
--- a/public/pages/Emails/EmailGroups.tsx
+++ b/public/pages/Emails/EmailGroups.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiSpacer, EuiTitle } from '@elastic/eui';
 import React, { useContext, useEffect } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { CoreServicesContext } from '../../components/coreServices';
@@ -29,14 +29,12 @@ export function EmailGroups(props: EmailGroupsProps) {
   return (
     <>
       {!getUseUpdatedUx() && (
-        <>
-          <EuiText size="s">
-            <h1>Email recipient groups</h1>
-          </EuiText>
-          <EuiSpacer />
-        </>
+        <EuiTitle size="l">
+          <h1>Email recipient groups</h1>
+        </EuiTitle>
       )}
 
+      <EuiSpacer />
       <RecipientGroupsTable coreContext={coreContext}
         notificationService={props.notificationService}
       />
diff --git a/public/pages/Emails/EmailSenders.tsx b/public/pages/Emails/EmailSenders.tsx
index 18ad03df..1c50387a 100644
--- a/public/pages/Emails/EmailSenders.tsx
+++ b/public/pages/Emails/EmailSenders.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiSpacer, EuiTitle } from '@elastic/eui';
 import React, { useContext, useEffect } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { CoreServicesContext } from '../../components/coreServices';
@@ -25,7 +25,7 @@ export function EmailSenders(props: EmailSendersProps) {
 
   // Call the hook to manage URL updates
   useUpdateUrlWithDataSourceProperties();
-
+  
   useEffect(() => {
     setBreadcrumbs([
       BREADCRUMBS.NOTIFICATIONS,
@@ -37,15 +37,13 @@ export function EmailSenders(props: EmailSendersProps) {
   return (
     <>
       {!getUseUpdatedUx() && (
-        <>
-          <EuiText size="s">
-            <h1>Email senders</h1>
-          </EuiText>
-          <EuiSpacer />
-        </>
+        <EuiTitle size="l">
+          <h1>Email senders</h1>
+        </EuiTitle>
       )}
       {mainStateContext.availableConfigTypes.includes('smtp_account') && (
         <>
+          <EuiSpacer />
           <SendersTable coreContext={coreContext}
             notificationService={props.notificationService}
           />
diff --git a/public/pages/Emails/__tests__/__snapshots__/CreateRecipientGroup.test.tsx.snap b/public/pages/Emails/__tests__/__snapshots__/CreateRecipientGroup.test.tsx.snap
index 4009d0b8..3bd7021d 100644
--- a/public/pages/Emails/__tests__/__snapshots__/CreateRecipientGroup.test.tsx.snap
+++ b/public/pages/Emails/__tests__/__snapshots__/CreateRecipientGroup.test.tsx.snap
@@ -1,11 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<CreateRecipientGroup/> spec renders the component 1`] = `
-<div
-  class="euiText euiText--small"
+<h1
+  class="euiTitle euiTitle--large"
 >
-  <h1>
-    Create recipient group
-  </h1>
-</div>
+  Create recipient group
+</h1>
 `;
diff --git a/public/pages/Emails/__tests__/__snapshots__/CreateSESSender.test.tsx.snap b/public/pages/Emails/__tests__/__snapshots__/CreateSESSender.test.tsx.snap
index 97b70161..30e8145c 100644
--- a/public/pages/Emails/__tests__/__snapshots__/CreateSESSender.test.tsx.snap
+++ b/public/pages/Emails/__tests__/__snapshots__/CreateSESSender.test.tsx.snap
@@ -1,31 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<CreateSESSender/> spec handles failed requests 1`] = `
-<div
-  class="euiText euiText--small"
+<h1
+  class="euiTitle euiTitle--large"
 >
-  <h1>
-    Edit SES sender
-  </h1>
-</div>
+  Edit SES sender
+</h1>
 `;
 
 exports[`<CreateSESSender/> spec renders the component 1`] = `
-<div
-  class="euiText euiText--small"
+<h1
+  class="euiTitle euiTitle--large"
 >
-  <h1>
-    Create SES sender
-  </h1>
-</div>
+  Create SES sender
+</h1>
 `;
 
 exports[`<CreateSESSender/> spec renders the component for editing 1`] = `
-<div
-  class="euiText euiText--small"
+<h1
+  class="euiTitle euiTitle--large"
 >
-  <h1>
-    Edit SES sender
-  </h1>
-</div>
+  Edit SES sender
+</h1>
 `;
diff --git a/public/pages/Emails/__tests__/__snapshots__/CreateSender.test.tsx.snap b/public/pages/Emails/__tests__/__snapshots__/CreateSender.test.tsx.snap
index 68449f39..b6ff392a 100644
--- a/public/pages/Emails/__tests__/__snapshots__/CreateSender.test.tsx.snap
+++ b/public/pages/Emails/__tests__/__snapshots__/CreateSender.test.tsx.snap
@@ -1,31 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<CreateSender/> spec handles failed requests 1`] = `
-<div
-  class="euiText euiText--small"
+<h1
+  class="euiTitle euiTitle--large"
 >
-  <h1>
-    Edit SMTP sender
-  </h1>
-</div>
+  Edit SMTP sender
+</h1>
 `;
 
 exports[`<CreateSender/> spec renders the component 1`] = `
-<div
-  class="euiText euiText--small"
+<h1
+  class="euiTitle euiTitle--large"
 >
-  <h1>
-    Create SMTP sender
-  </h1>
-</div>
+  Create SMTP sender
+</h1>
 `;
 
 exports[`<CreateSender/> spec renders the component for editing 1`] = `
-<div
-  class="euiText euiText--small"
+<h1
+  class="euiTitle euiTitle--large"
 >
-  <h1>
-    Edit SMTP sender
-  </h1>
-</div>
+  Edit SMTP sender
+</h1>
 `;
diff --git a/public/pages/Emails/__tests__/__snapshots__/EmailGroups.test.tsx.snap b/public/pages/Emails/__tests__/__snapshots__/EmailGroups.test.tsx.snap
index a4b40b5b..ed8880f6 100644
--- a/public/pages/Emails/__tests__/__snapshots__/EmailGroups.test.tsx.snap
+++ b/public/pages/Emails/__tests__/__snapshots__/EmailGroups.test.tsx.snap
@@ -1,11 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<EmailGroups/> spec renders the component 1`] = `
-<div
-  class="euiText euiText--small"
+<h1
+  class="euiTitle euiTitle--large"
 >
-  <h1>
-    Email recipient groups
-  </h1>
-</div>
+  Email recipient groups
+</h1>
 `;
diff --git a/public/pages/Emails/__tests__/__snapshots__/EmailSenders.test.tsx.snap b/public/pages/Emails/__tests__/__snapshots__/EmailSenders.test.tsx.snap
index 00e42cc1..1483fdaa 100644
--- a/public/pages/Emails/__tests__/__snapshots__/EmailSenders.test.tsx.snap
+++ b/public/pages/Emails/__tests__/__snapshots__/EmailSenders.test.tsx.snap
@@ -1,21 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<EmailSenders/> spec renders the component with SMTP config type 1`] = `
-<div
-  class="euiText euiText--small"
+<h1
+  class="euiTitle euiTitle--large"
 >
-  <h1>
-    Email senders
-  </h1>
-</div>
+  Email senders
+</h1>
 `;
 
 exports[`<EmailSenders/> spec renders the component without SMTP config type 1`] = `
-<div
-  class="euiText euiText--small"
+<h1
+  class="euiTitle euiTitle--large"
 >
-  <h1>
-    Email senders
-  </h1>
-</div>
+  Email senders
+</h1>
 `;
diff --git a/public/pages/Emails/__tests__/__snapshots__/RecipientGroupsTable.test.tsx.snap b/public/pages/Emails/__tests__/__snapshots__/RecipientGroupsTable.test.tsx.snap
index fc8edb5b..ebb37281 100644
--- a/public/pages/Emails/__tests__/__snapshots__/RecipientGroupsTable.test.tsx.snap
+++ b/public/pages/Emails/__tests__/__snapshots__/RecipientGroupsTable.test.tsx.snap
@@ -11,8 +11,8 @@ exports[`<RecipientGroupsTable /> spec renders empty state 1`] = `
     <div
       class="euiFlexItem"
     >
-      <h2
-        class="euiTitle euiTitle--small"
+      <h3
+        class="euiTitle euiTitle--medium"
       >
         Recipient groups
         <span
@@ -20,7 +20,7 @@ exports[`<RecipientGroupsTable /> spec renders empty state 1`] = `
         >
            (0)
         </span>
-      </h2>
+      </h3>
     </div>
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -368,13 +368,11 @@ exports[`<RecipientGroupsTable /> spec renders empty state 1`] = `
                     <div
                       class="euiEmptyPrompt"
                     >
-                      <div
-                        class="euiText euiText--small euiTitle euiTitle--medium"
+                      <h2
+                        class="euiTitle euiTitle--medium"
                       >
-                        <h2>
-                          No recipient groups to display
-                        </h2>
-                      </div>
+                        No recipient groups to display
+                      </h2>
                       <span
                         class="euiTextColor euiTextColor--subdued"
                       >
@@ -384,11 +382,7 @@ exports[`<RecipientGroupsTable /> spec renders empty state 1`] = `
                         <div
                           class="euiText euiText--medium"
                         >
-                          <div
-                            class="euiText euiText--small"
-                          >
-                            Use an email group to manage a list of email addresses you frequently send at a time. You can select recipient groups when configuring email channels.
-                          </div>
+                          Use an email group to manage a list of email addresses you frequently send at a time. You can select recipient groups when configuring email channels.
                         </div>
                       </span>
                       <div
diff --git a/public/pages/Emails/__tests__/__snapshots__/SendersTable.test.tsx.snap b/public/pages/Emails/__tests__/__snapshots__/SendersTable.test.tsx.snap
index e2d60a69..8a9c87cd 100644
--- a/public/pages/Emails/__tests__/__snapshots__/SendersTable.test.tsx.snap
+++ b/public/pages/Emails/__tests__/__snapshots__/SendersTable.test.tsx.snap
@@ -11,8 +11,8 @@ exports[`<SendersTable /> spec renders empty state 1`] = `
     <div
       class="euiFlexItem"
     >
-      <h2
-        class="euiTitle euiTitle--small"
+      <h3
+        class="euiTitle euiTitle--medium"
       >
         SMTP senders
         <span
@@ -20,7 +20,7 @@ exports[`<SendersTable /> spec renders empty state 1`] = `
         >
            (0)
         </span>
-      </h2>
+      </h3>
     </div>
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -105,7 +105,7 @@ exports[`<SendersTable /> spec renders empty state 1`] = `
     style="padding: initial;"
   >
     <div
-      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive"
+      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
       <div
         class="euiFlexItem"
@@ -160,7 +160,7 @@ exports[`<SendersTable /> spec renders empty state 1`] = `
               class="euiPopover__anchor"
             >
               <button
-                class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton-hasNotification euiFilterButton--hasIcon euiFilterButton--noGrow"
+                class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton--hasIcon euiFilterButton--noGrow"
                 type="button"
               >
                 <span
@@ -181,7 +181,7 @@ exports[`<SendersTable /> spec renders empty state 1`] = `
                     />
                   </svg>
                   <span
-                    class="euiButtonEmpty__text euiFilterButton__text-hasNotification"
+                    class="euiButtonEmpty__text"
                   >
                     <span
                       class="euiFilterButton__textShift"
@@ -190,12 +190,6 @@ exports[`<SendersTable /> spec renders empty state 1`] = `
                     >
                       Encryption method
                     </span>
-                    <span
-                      aria-label="0 available filters"
-                      class="euiNotificationBadge euiNotificationBadge--medium euiNotificationBadge--subdued euiFilterButton__notification"
-                    >
-                      0
-                    </span>
                   </span>
                 </span>
               </button>
@@ -476,13 +470,11 @@ exports[`<SendersTable /> spec renders empty state 1`] = `
                     <div
                       class="euiEmptyPrompt"
                     >
-                      <div
-                        class="euiText euiText--small euiTitle euiTitle--medium"
+                      <h2
+                        class="euiTitle euiTitle--medium"
                       >
-                        <h2>
-                          No SMTP senders to display
-                        </h2>
-                      </div>
+                        No SMTP senders to display
+                      </h2>
                       <span
                         class="euiTextColor euiTextColor--subdued"
                       >
@@ -492,11 +484,7 @@ exports[`<SendersTable /> spec renders empty state 1`] = `
                         <div
                           class="euiText euiText--medium"
                         >
-                          <div
-                            class="euiText euiText--small"
-                          >
-                            Set up an outbound email server by creating a sender. You will select a sender when configuring email channels.
-                          </div>
+                          Set up an outbound email server by creating a sender. You will select a sender when configuring email channels.
                         </div>
                       </span>
                       <div
diff --git a/public/pages/Emails/__tests__/__snapshots__/SendersTableControls.test.tsx.snap b/public/pages/Emails/__tests__/__snapshots__/SendersTableControls.test.tsx.snap
index dfb6f8df..00bfecc5 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--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive"
+  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
 >
   <div
     class="euiFlexItem"
@@ -57,7 +57,7 @@ exports[`<SendersTableControls /> spec renders the component 1`] = `
           class="euiPopover__anchor"
         >
           <button
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton-hasNotification euiFilterButton--hasIcon euiFilterButton--noGrow"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton--hasIcon euiFilterButton--noGrow"
             type="button"
           >
             <span
@@ -78,7 +78,7 @@ exports[`<SendersTableControls /> spec renders the component 1`] = `
                 />
               </svg>
               <span
-                class="euiButtonEmpty__text euiFilterButton__text-hasNotification"
+                class="euiButtonEmpty__text"
               >
                 <span
                   class="euiFilterButton__textShift"
@@ -87,12 +87,6 @@ exports[`<SendersTableControls /> spec renders the component 1`] = `
                 >
                   Encryption method
                 </span>
-                <span
-                  aria-label="0 available filters"
-                  class="euiNotificationBadge euiNotificationBadge--medium euiNotificationBadge--subdued euiFilterButton__notification"
-                >
-                  0
-                </span>
               </span>
             </span>
           </button>
diff --git a/public/pages/Emails/components/forms/CreateRecipientGroupForm.tsx b/public/pages/Emails/components/forms/CreateRecipientGroupForm.tsx
index 1c03cbb1..71eada79 100644
--- a/public/pages/Emails/components/forms/CreateRecipientGroupForm.tsx
+++ b/public/pages/Emails/components/forms/CreateRecipientGroupForm.tsx
@@ -60,7 +60,7 @@ export function CreateRecipientGroupForm(props: CreateRecipientGroupFormProps) {
         />
       </EuiCompressedFormRow>
 
-      <EuiSpacer size="l" />
+      <EuiSpacer size="m" />
       <EuiCompressedFormRow
         label={
           <span>
@@ -84,7 +84,7 @@ export function CreateRecipientGroupForm(props: CreateRecipientGroupFormProps) {
         </>
       </EuiCompressedFormRow>
 
-      <EuiSpacer size="l" />
+      <EuiSpacer size="m" />
       <EuiCompressedFormRow
         label="Emails"
         style={{ maxWidth: '650px' }}
diff --git a/public/pages/Emails/components/forms/CreateSESSenderForm.tsx b/public/pages/Emails/components/forms/CreateSESSenderForm.tsx
index c667b0ab..c9ef703d 100644
--- a/public/pages/Emails/components/forms/CreateSESSenderForm.tsx
+++ b/public/pages/Emails/components/forms/CreateSESSenderForm.tsx
@@ -59,7 +59,7 @@ export function CreateSESSenderForm(props: CreateSESSenderFormProps) {
         />
       </EuiCompressedFormRow>
 
-      <EuiSpacer size="l" />
+      <EuiSpacer size="m" />
       <EuiCompressedFormRow
         label="Email address"
         style={{ maxWidth: '650px' }}
@@ -82,7 +82,7 @@ export function CreateSESSenderForm(props: CreateSESSenderFormProps) {
         />
       </EuiCompressedFormRow>
 
-      <EuiSpacer size="l" />
+      <EuiSpacer size="m" />
       <EuiFlexGroup gutterSize="s" style={{ maxWidth: '658px' }}>
         <EuiFlexItem grow={6}>
           <EuiCompressedFormRow
diff --git a/public/pages/Emails/components/forms/CreateSenderForm.tsx b/public/pages/Emails/components/forms/CreateSenderForm.tsx
index ef60a810..d51d355b 100644
--- a/public/pages/Emails/components/forms/CreateSenderForm.tsx
+++ b/public/pages/Emails/components/forms/CreateSenderForm.tsx
@@ -74,7 +74,7 @@ export function CreateSenderForm(props: CreateSenderFormProps) {
         />
       </EuiCompressedFormRow>
 
-      <EuiSpacer size="l" />
+      <EuiSpacer size="m" />
       <EuiFlexGroup gutterSize="s" style={{ maxWidth: '658px' }}>
         <EuiFlexItem grow={4}>
           <EuiCompressedFormRow
@@ -141,7 +141,7 @@ export function CreateSenderForm(props: CreateSenderFormProps) {
         </EuiFlexItem>
       </EuiFlexGroup>
 
-      <EuiSpacer size="l" />
+      <EuiSpacer size="m" />
       <EuiCompressedFormRow
         label="Encryption method"
         style={{ maxWidth: '650px' }}
diff --git a/public/pages/Emails/components/modals/DeleteRecipientGroupModal.tsx b/public/pages/Emails/components/modals/DeleteRecipientGroupModal.tsx
index ee178b4d..7066348c 100644
--- a/public/pages/Emails/components/modals/DeleteRecipientGroupModal.tsx
+++ b/public/pages/Emails/components/modals/DeleteRecipientGroupModal.tsx
@@ -50,14 +50,10 @@ export const DeleteRecipientGroupModal = (
     <EuiOverlayMask>
       <EuiModal onClose={props.onClose} maxWidth={500}>
         <EuiModalHeader>
-          <EuiModalHeaderTitle>
-            <EuiText size="s">
-              <h2>{`Delete ${name}?`}</h2>
-            </EuiText>
-          </EuiModalHeaderTitle>
+          <EuiModalHeaderTitle>{`Delete ${name}?`}</EuiModalHeaderTitle>
         </EuiModalHeader>
         <EuiModalBody>
-          <EuiText size="s">{message}</EuiText>
+          <EuiText>{message}</EuiText>
           {num >= 2 && (
             <>
               <EuiSpacer />
@@ -72,7 +68,7 @@ export const DeleteRecipientGroupModal = (
             </>
           )}
           <EuiSpacer />
-          <EuiText size="s">
+          <EuiText>
             To confirm delete, type <i>delete</i> in the field.
           </EuiText>
           <EuiCompressedFieldText
diff --git a/public/pages/Emails/components/modals/DeleteSenderModal.tsx b/public/pages/Emails/components/modals/DeleteSenderModal.tsx
index 52667eed..be7f47a8 100644
--- a/public/pages/Emails/components/modals/DeleteSenderModal.tsx
+++ b/public/pages/Emails/components/modals/DeleteSenderModal.tsx
@@ -47,14 +47,10 @@ export const DeleteSenderModal = (props: DeleteSenderModalProps) => {
     <EuiOverlayMask>
       <EuiModal onClose={props.onClose} maxWidth={500}>
         <EuiModalHeader>
-          <EuiModalHeaderTitle>
-            <EuiText size="s">
-              <h2>{`Delete ${name}?`}</h2>
-            </EuiText>
-          </EuiModalHeaderTitle>
+          <EuiModalHeaderTitle>{`Delete ${name}?`}</EuiModalHeaderTitle>
         </EuiModalHeader>
         <EuiModalBody>
-          <EuiText size="s">{message}</EuiText>
+          <EuiText>{message}</EuiText>
           {num >= 2 && (
             <>
               <EuiSpacer />
@@ -62,7 +58,6 @@ export const DeleteSenderModal = (props: DeleteSenderModalProps) => {
                 <EuiText
                   key={`sender-list-item-${i}`}
                   style={{ marginLeft: 20 }}
-                  size="s"
                 >
                   <li>{sender.name}</li>
                 </EuiText>
@@ -70,7 +65,7 @@ export const DeleteSenderModal = (props: DeleteSenderModalProps) => {
             </>
           )}
           <EuiSpacer />
-          <EuiText size="s">
+          <EuiText>
             To confirm delete, type <i>delete</i> in the field.
           </EuiText>
           <EuiCompressedFieldText
diff --git a/public/pages/Emails/components/tables/RecipientGroupsTable.tsx b/public/pages/Emails/components/tables/RecipientGroupsTable.tsx
index eb3f2504..9d2cb2b6 100644
--- a/public/pages/Emails/components/tables/RecipientGroupsTable.tsx
+++ b/public/pages/Emails/components/tables/RecipientGroupsTable.tsx
@@ -18,7 +18,6 @@ import {
   EuiTableSortingType,
   EuiTitle,
   SortDirection,
-  EuiText,
 } from '@elastic/eui';
 import { Criteria } from '@elastic/eui/src/components/basic_table/basic_table';
 import { Pagination } from '@elastic/eui/src/components/basic_table/pagination_bar';
@@ -287,12 +286,8 @@ export class RecipientGroupsTable extends Component<
       isSelectable={true}
       selection={selection}
       noItemsMessage={<EuiEmptyPrompt
-        title={<EuiText size="s"><h2>No recipient groups to display</h2></EuiText>}
-        body={
-          <EuiText size="s">
-            Use an email group to manage a list of email addresses you frequently send at a time. You can select recipient groups when configuring email channels.
-          </EuiText>
-        }
+        title={<h2>No recipient groups to display</h2>}
+        body="Use an email group to manage a list of email addresses you frequently send at a time. You can select recipient groups when configuring email channels."
         actions={<EuiSmallButton href={`#${ROUTES.CREATE_RECIPIENT_GROUP}`}>
           Create recipient group
         </EuiSmallButton>} />}
@@ -308,12 +303,8 @@ export class RecipientGroupsTable extends Component<
               appRightControls={headerControls}
               appLeftControls={[{ renderComponent: totalEmailGroups }]}
             />
-            <ContentPanel
-              panelStyles={{
-                padding: this.state.total < 1 ? '16px 16px 0px' : '16px',
-              }}
-            >
-              <EuiFlexGroup gutterSize={'m'}>
+            <ContentPanel>
+              <EuiFlexGroup>
                 <EuiFlexItem>
                   {searchComponent}
                 </EuiFlexItem>
@@ -325,6 +316,7 @@ export class RecipientGroupsTable extends Component<
                         iconType="arrowDown"
                         iconSide="right"
                         onClick={this.togglePopover}
+                        style={{ marginLeft: '10px' }} // Ensure spacing is correct
                       >
                         Actions
                       </EuiSmallButton>
@@ -338,7 +330,6 @@ export class RecipientGroupsTable extends Component<
                           <EuiContextMenuItem
                             key={action.label}
                             disabled={action.disabled}
-                            size="s"
                             onClick={() => {
                               this.setState({ isPopoverOpen: false });
                               if (action.modal) {
@@ -410,7 +401,7 @@ export class RecipientGroupsTable extends Component<
             }
             bodyStyles={{ padding: 'initial' }}
             title="Recipient groups"
-            titleSize="s"
+            titleSize="m"
             total={this.state.total}
           >
             {searchComponent}
diff --git a/public/pages/Emails/components/tables/SESSendersTable.tsx b/public/pages/Emails/components/tables/SESSendersTable.tsx
index dc55ca9e..aed3287b 100644
--- a/public/pages/Emails/components/tables/SESSendersTable.tsx
+++ b/public/pages/Emails/components/tables/SESSendersTable.tsx
@@ -16,7 +16,6 @@ import {
   EuiTableFieldDataColumnType,
   EuiTableSortingType,
   SortDirection,
-  EuiText,
 } from '@elastic/eui';
 import { Criteria } from '@elastic/eui/src/components/basic_table/basic_table';
 import { Pagination } from '@elastic/eui/src/components/basic_table/pagination_bar';
@@ -224,8 +223,8 @@ export class SESSendersTable extends Component<
       isSelectable={true}
       selection={selection}
       noItemsMessage={<EuiEmptyPrompt
-        title={<EuiText size="s"><h2>No SES senders to display</h2></EuiText>}
-        body={<EuiText size="s">Set up an outbound email server by creating a sender. You will select a sender when configuring email channels.</EuiText>}
+        title={<h2>No SES senders to display</h2>}
+        body="Set up an outbound email server by creating a sender. You will select a sender when configuring email channels."
         actions={<EuiSmallButton href={`#${ROUTES.CREATE_SES_SENDER}`}>
           Create SES sender
         </EuiSmallButton>} />}
@@ -245,9 +244,6 @@ export class SESSendersTable extends Component<
       <>
         {getUseUpdatedUx() ? (
           <ContentPanel
-            panelStyles={{
-              padding: this.state.total < 1 ? '16px 16px 0px' : '16px',
-            }}
             actions={
               <ContentPanelActions
                 actions={[
@@ -263,10 +259,10 @@ export class SESSendersTable extends Component<
             }
             bodyStyles={{ padding: 'initial' }}
             title="SES senders"
-            titleSize="s"
+            titleSize="m"
             total={this.state.total}
           >
-            <EuiFlexGroup gutterSize={'m'}>
+            <EuiFlexGroup>
               <EuiFlexItem>
                 {searchComponent}
               </EuiFlexItem>
@@ -278,6 +274,7 @@ export class SESSendersTable extends Component<
                       iconType="arrowDown"
                       iconSide="right"
                       onClick={this.togglePopover}
+                      style={{ marginLeft: '10px' }} // Ensure spacing is correct
                     >
                       Actions
                     </EuiSmallButton>
@@ -291,7 +288,6 @@ export class SESSendersTable extends Component<
                         <EuiContextMenuItem
                           key={action.label}
                           disabled={action.disabled}
-                          size="s"
                           onClick={() => {
                             this.setState({ isPopoverOpen: false });
                             if (action.modal) {
@@ -364,7 +360,7 @@ export class SESSendersTable extends Component<
             }
             bodyStyles={{ padding: 'initial' }}
             title="SES senders"
-            titleSize="s"
+            titleSize="m"
             total={this.state.total}
           >
             {searchComponent}
diff --git a/public/pages/Emails/components/tables/SendersTable.tsx b/public/pages/Emails/components/tables/SendersTable.tsx
index bd928faa..efee0179 100644
--- a/public/pages/Emails/components/tables/SendersTable.tsx
+++ b/public/pages/Emails/components/tables/SendersTable.tsx
@@ -15,7 +15,6 @@ import {
   EuiTableFieldDataColumnType,
   EuiTableSortingType,
   SortDirection,
-  EuiText,
 } from '@elastic/eui';
 import { Criteria } from '@elastic/eui/src/components/basic_table/basic_table';
 import { Pagination } from '@elastic/eui/src/components/basic_table/pagination_bar';
@@ -251,12 +250,8 @@ export class SendersTable extends Component<
       isSelectable={true}
       selection={selection}
       noItemsMessage={<EuiEmptyPrompt
-        title={<EuiText size="s"><h2>No SMTP senders to display</h2></EuiText>}
-        body={
-          <EuiText size="s">
-            Set up an outbound email server by creating a sender. You will select a sender when configuring email channels.
-          </EuiText>
-        }
+        title={<h2>No SMTP senders to display</h2>}
+        body="Set up an outbound email server by creating a sender. You will select a sender when configuring email channels."
         actions={<EuiSmallButton href={`#${ROUTES.CREATE_SENDER}`}>
           Create SMTP sender
         </EuiSmallButton>} />}
@@ -269,9 +264,6 @@ export class SendersTable extends Component<
       <>
         {getUseUpdatedUx() ? (
           <ContentPanel
-            panelStyles={{
-              padding: this.state.total < 1 ? '16px 16px 0px' : '16px',
-            }}
             actions={
               <ContentPanelActions
                 actions={[
@@ -287,10 +279,10 @@ export class SendersTable extends Component<
             }
             bodyStyles={{ padding: 'initial' }}
             title="SMTP senders"
-            titleSize="s"
+            titleSize="m"
             total={this.state.total}
           >
-            <EuiFlexGroup gutterSize={'m'}>
+            <EuiFlexGroup>
               <EuiFlexItem>
                 {senderControlComponent}
               </EuiFlexItem>
@@ -302,6 +294,7 @@ export class SendersTable extends Component<
                       iconType="arrowDown"
                       iconSide="right"
                       onClick={this.togglePopover}
+                      style={{ marginLeft: '10px' }} // Ensure spacing is correct
                     >
                       Actions
                     </EuiSmallButton>
@@ -315,7 +308,6 @@ export class SendersTable extends Component<
                         <EuiContextMenuItem
                           key={action.label}
                           disabled={action.disabled}
-                          size="s"
                           onClick={() => {
                             this.setState({ isPopoverOpen: false });
                             if (action.modal) {
@@ -388,7 +380,7 @@ export class SendersTable extends Component<
             }
             bodyStyles={{ padding: 'initial' }}
             title="SMTP senders"
-            titleSize="s"
+            titleSize="m"
             total={this.state.total}
           >
             {senderControlComponent}
diff --git a/public/pages/Emails/components/tables/SendersTableControls.tsx b/public/pages/Emails/components/tables/SendersTableControls.tsx
index 8b7c19a5..5bb879d9 100644
--- a/public/pages/Emails/components/tables/SendersTableControls.tsx
+++ b/public/pages/Emails/components/tables/SendersTableControls.tsx
@@ -63,7 +63,7 @@ export const SendersTableControls = (props: SendersTableControlsProps) => {
   }
 
   return (
-    <EuiFlexGroup gutterSize={'m'}>
+    <EuiFlexGroup>
       <EuiFlexItem>
         <EuiCompressedFieldSearch
           data-test-subj="senders-table-search-input"
@@ -78,9 +78,6 @@ export const SendersTableControls = (props: SendersTableControlsProps) => {
           <EuiPopover
             button={
               <EuiSmallFilterButton
-                numFilters={
-                  encryptionItems.filter((item) => item.checked === 'on').length
-                }
                 iconType="arrowDown"
                 grow={false}
                 onClick={() =>
diff --git a/public/pages/Main/__tests__/__snapshots__/Main.test.tsx.snap b/public/pages/Main/__tests__/__snapshots__/Main.test.tsx.snap
index 9efd0ad0..9f5714fe 100644
--- a/public/pages/Main/__tests__/__snapshots__/Main.test.tsx.snap
+++ b/public/pages/Main/__tests__/__snapshots__/Main.test.tsx.snap
@@ -116,8 +116,8 @@ exports[`<Main /> spec renders the component 1`] = `
         <div
           class="euiFlexItem"
         >
-          <h2
-            class="euiTitle euiTitle--small"
+          <h3
+            class="euiTitle euiTitle--medium"
           >
             Channels
             <span
@@ -125,7 +125,7 @@ exports[`<Main /> spec renders the component 1`] = `
             >
                (0)
             </span>
-          </h2>
+          </h3>
         </div>
         <div
           class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -211,7 +211,7 @@ exports[`<Main /> spec renders the component 1`] = `
         style="padding: initial;"
       >
         <div
-          class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive"
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
         >
           <div
             class="euiFlexItem"
@@ -300,14 +300,6 @@ exports[`<Main /> spec renders the component 1`] = `
                   </button>
                 </div>
               </div>
-            </div>
-          </div>
-          <div
-            class="euiFlexItem euiFlexItem--flexGrowZero"
-          >
-            <div
-              class="euiFilterGroup"
-            >
               <div
                 class="euiPopover euiPopover--anchorDownCenter"
               >
@@ -603,13 +595,11 @@ exports[`<Main /> spec renders the component 1`] = `
                         <div
                           class="euiEmptyPrompt"
                         >
-                          <div
-                            class="euiText euiText--small euiTitle euiTitle--medium"
+                          <h2
+                            class="euiTitle euiTitle--medium"
                           >
-                            <h2>
-                              No channels to display
-                            </h2>
-                          </div>
+                            No channels to display
+                          </h2>
                           <span
                             class="euiTextColor euiTextColor--subdued"
                           >
@@ -619,11 +609,7 @@ exports[`<Main /> spec renders the component 1`] = `
                             <div
                               class="euiText euiText--medium"
                             >
-                              <div
-                                class="euiText euiText--small"
-                              >
-                                "To send or receive notifications, you will need to create a notification channel."
-                              </div>
+                              To send or receive notifications, you will need to create a notification channel.
                             </div>
                           </span>
                           <div