diff --git a/public/components/ChannelNotification/ChannelNotification.tsx b/public/components/ChannelNotification/ChannelNotification.tsx
index 5b5d01bd1..ef11d04b5 100644
--- a/public/components/ChannelNotification/ChannelNotification.tsx
+++ b/public/components/ChannelNotification/ChannelNotification.tsx
@@ -57,7 +57,7 @@ const ChannelNotification = ({
             />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiSmallButton iconType="popout" href="notifications-dashboards#/channels" target="_blank">
+            <EuiSmallButton iconType="popout" href="notifications-dashboards#/channels" target="_blank" iconSide="right">
               Manage channels
             </EuiSmallButton>
           </EuiFlexItem>
diff --git a/public/components/ChannelNotification/__snapshots__/ChannelNotification.test.tsx.snap b/public/components/ChannelNotification/__snapshots__/ChannelNotification.test.tsx.snap
index 9b135ffd7..afdd7305a 100644
--- a/public/components/ChannelNotification/__snapshots__/ChannelNotification.test.tsx.snap
+++ b/public/components/ChannelNotification/__snapshots__/ChannelNotification.test.tsx.snap
@@ -91,7 +91,7 @@ exports[`<ChannelNotification /> spec renders the component 1`] = `
           target="_blank"
         >
           <span
-            class="euiButtonContent euiButton__content"
+            class="euiButtonContent euiButtonContent--iconRight euiButton__content"
           >
             EuiIconMock
             <span
diff --git a/public/components/IndexDetail/IndexDetail.tsx b/public/components/IndexDetail/IndexDetail.tsx
index a128742c1..a5bdca184 100644
--- a/public/components/IndexDetail/IndexDetail.tsx
+++ b/public/components/IndexDetail/IndexDetail.tsx
@@ -457,10 +457,9 @@ const IndexDetail = (
             return (
               <>
                 <EuiPanel>
-                  <EuiText size="s">
-                    {" "}
-                    <h2>{title}</h2>{" "}
-                  </EuiText>
+                  <EuiTitle size="s">
+                    <h2>{title}</h2>
+                  </EuiTitle>
                   <EuiHorizontalRule margin="xs" />
                   {content}
                 </EuiPanel>
@@ -581,10 +580,9 @@ const IndexDetail = (
             return (
               <>
                 <EuiPanel>
-                  <EuiText size="s">
-                    {" "}
-                    <h2>Index settings</h2>{" "}
-                  </EuiText>
+                  <EuiTitle size="s">
+                    <h2>Index settings</h2>
+                  </EuiTitle>
                   <EuiHorizontalRule margin="xs" />
                   {content}
                 </EuiPanel>
@@ -628,12 +626,12 @@ const IndexDetail = (
 
             return (
               <EuiPanel>
-                <EuiText size="s">
+                <EuiTitle size="s">
                   <h2>
                     Index mapping
                     <OptionalLabel />
                   </h2>
-                </EuiText>
+                </EuiTitle>
                 <EuiCompressedFormRow
                   fullWidth
                   helpText={
diff --git a/public/components/IndexDetail/__snapshots__/IndexDetail.test.tsx.snap b/public/components/IndexDetail/__snapshots__/IndexDetail.test.tsx.snap
index e1640db67..e9ab72543 100644
--- a/public/components/IndexDetail/__snapshots__/IndexDetail.test.tsx.snap
+++ b/public/components/IndexDetail/__snapshots__/IndexDetail.test.tsx.snap
@@ -4,15 +4,11 @@ exports[`<IndexDetail /> spec renders the component 1`] = `
 <div
   class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
 >
-  <div
-    class="euiText euiText--small"
+  <h2
+    class="euiTitle euiTitle--small"
   >
-     
-    <h2>
-      Define index
-    </h2>
-     
-  </div>
+    Define index
+  </h2>
   <hr
     class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
   />
diff --git a/public/containers/ErrorNotification/__snapshots__/ErrorNotification.test.tsx.snap b/public/containers/ErrorNotification/__snapshots__/ErrorNotification.test.tsx.snap
index f44ef30dc..6bdd7306e 100644
--- a/public/containers/ErrorNotification/__snapshots__/ErrorNotification.test.tsx.snap
+++ b/public/containers/ErrorNotification/__snapshots__/ErrorNotification.test.tsx.snap
@@ -167,7 +167,7 @@ exports[`<ErrorNotification /> spec renders the component 1`] = `
                 target="_blank"
               >
                 <span
-                  class="euiButtonContent euiButton__content"
+                  class="euiButtonContent euiButtonContent--iconRight euiButton__content"
                 >
                   EuiIconMock
                   <span
diff --git a/public/containers/IndexDetail/__snapshots__/IndexDetail.test.tsx.snap b/public/containers/IndexDetail/__snapshots__/IndexDetail.test.tsx.snap
index 144867e1c..2eaa712ce 100644
--- a/public/containers/IndexDetail/__snapshots__/IndexDetail.test.tsx.snap
+++ b/public/containers/IndexDetail/__snapshots__/IndexDetail.test.tsx.snap
@@ -5,13 +5,11 @@ exports[`<IndexDetail /> spec render the component 1`] = `
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
   >
-    <div
-      class="euiText euiText--small"
+    <h2
+      class="euiTitle euiTitle--small"
     >
-      <h2>
-        Source index details
-      </h2>
-    </div>
+      Source index details
+    </h2>
     <hr
       class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
     />
diff --git a/public/containers/IndexDetail/index.tsx b/public/containers/IndexDetail/index.tsx
index dd68aecb9..61df58c26 100644
--- a/public/containers/IndexDetail/index.tsx
+++ b/public/containers/IndexDetail/index.tsx
@@ -43,9 +43,9 @@ export default function IndexDetail(props: IIndexDetailProps) {
   }, [props.indices.join(","), setLoading, setItems, coreServices]);
   return (
     <EuiPanel>
-      <EuiText size="s">
+      <EuiTitle size="s">
         <h2>Source index details</h2>
-      </EuiText>
+      </EuiTitle>
       <EuiHorizontalRule margin="xs" />
       <EuiSpacer size="s" />
       {items && items.length ? (
diff --git a/public/containers/IndexForm/__snapshots__/IndexForm.test.tsx.snap b/public/containers/IndexForm/__snapshots__/IndexForm.test.tsx.snap
index 7b76a6aed..58a3dd9e7 100644
--- a/public/containers/IndexForm/__snapshots__/IndexForm.test.tsx.snap
+++ b/public/containers/IndexForm/__snapshots__/IndexForm.test.tsx.snap
@@ -5,15 +5,11 @@ exports[`<IndexForm /> spec render page 1`] = `
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
   >
-    <div
-      class="euiText euiText--small"
+    <h2
+      class="euiTitle euiTitle--small"
     >
-       
-      <h2>
-        Define index
-      </h2>
-       
-    </div>
+      Define index
+    </h2>
     <hr
       class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
     />
@@ -183,15 +179,11 @@ exports[`<IndexForm /> spec render page 1`] = `
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
   >
-    <div
-      class="euiText euiText--small"
+    <h2
+      class="euiTitle euiTitle--small"
     >
-       
-      <h2>
-        Index settings
-      </h2>
-       
-    </div>
+      Index settings
+    </h2>
     <hr
       class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
     />
@@ -593,16 +585,14 @@ exports[`<IndexForm /> spec render page 1`] = `
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
   >
-    <div
-      class="euiText euiText--small"
+    <h2
+      class="euiTitle euiTitle--small"
     >
-      <h2>
-        Index mapping
-        <i>
-           – optional
-        </i>
-      </h2>
-    </div>
+      Index mapping
+      <i>
+         – optional
+      </i>
+    </h2>
     <div
       class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
       id="some_html_id-row"
diff --git a/public/containers/NotificationConfig/NotificationConfig.tsx b/public/containers/NotificationConfig/NotificationConfig.tsx
index 122ca60ae..1382c9de0 100644
--- a/public/containers/NotificationConfig/NotificationConfig.tsx
+++ b/public/containers/NotificationConfig/NotificationConfig.tsx
@@ -230,7 +230,11 @@ const NotificationConfig = (
                     />
                   </EuiFlexItem>
                   <EuiFlexItem>
-                    <EuiSmallButton onClick={() => window.open("/app/notifications-dashboards#/channels")} iconType="popout">
+                    <EuiSmallButton
+                      onClick={() => window.open("/app/notifications-dashboards#/channels")}
+                      iconType="popout"
+                      iconSide="right"
+                    >
                       Manage channels
                     </EuiSmallButton>
                   </EuiFlexItem>
diff --git a/public/pages/ChangePolicy/components/ChangeManagedIndices/ChangeManagedIndices.tsx b/public/pages/ChangePolicy/components/ChangeManagedIndices/ChangeManagedIndices.tsx
index 3ae9d6f78..2146ec8b9 100644
--- a/public/pages/ChangePolicy/components/ChangeManagedIndices/ChangeManagedIndices.tsx
+++ b/public/pages/ChangePolicy/components/ChangeManagedIndices/ChangeManagedIndices.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { Component } from "react";
-import { EuiSpacer, EuiCompressedComboBox, EuiCompressedFormRow, EuiText, EuiHorizontalRule, EuiPanel } from "@elastic/eui";
+import { EuiSpacer, EuiCompressedComboBox, EuiCompressedFormRow, EuiText, EuiHorizontalRule, EuiPanel, EuiTitle } from "@elastic/eui";
 import { ContentPanel } from "../../../../components/ContentPanel";
 import { ManagedIndexService } from "../../../../services";
 import { ManagedIndexItem, State } from "../../../../../models/interfaces";
@@ -90,9 +90,9 @@ export default class ChangeManagedIndices extends Component<ChangeManagedIndices
 
     return (
       <EuiPanel>
-        <EuiText size="s">
+        <EuiTitle size="s">
           <h2>Choose managed indices</h2>
-        </EuiText>
+        </EuiTitle>
         <EuiHorizontalRule margin="xs" />
         <div>
           <EuiCompressedFormRow
diff --git a/public/pages/ChangePolicy/components/ChangeManagedIndices/__snapshots__/ChangeManagedIndices.test.tsx.snap b/public/pages/ChangePolicy/components/ChangeManagedIndices/__snapshots__/ChangeManagedIndices.test.tsx.snap
index 9872a0492..1fef1a802 100644
--- a/public/pages/ChangePolicy/components/ChangeManagedIndices/__snapshots__/ChangeManagedIndices.test.tsx.snap
+++ b/public/pages/ChangePolicy/components/ChangeManagedIndices/__snapshots__/ChangeManagedIndices.test.tsx.snap
@@ -4,13 +4,11 @@ exports[`<ChangeManagedIndices /> spec renders the component 1`] = `
 <div
   class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
 >
-  <div
-    class="euiText euiText--small"
+  <h2
+    class="euiTitle euiTitle--small"
   >
-    <h2>
-      Choose managed indices
-    </h2>
-  </div>
+    Choose managed indices
+  </h2>
   <hr
     class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
   />
diff --git a/public/pages/ChangePolicy/components/NewPolicy/NewPolicy.tsx b/public/pages/ChangePolicy/components/NewPolicy/NewPolicy.tsx
index 4f259ac05..fe8c41a1d 100644
--- a/public/pages/ChangePolicy/components/NewPolicy/NewPolicy.tsx
+++ b/public/pages/ChangePolicy/components/NewPolicy/NewPolicy.tsx
@@ -16,6 +16,7 @@ import {
   EuiIcon,
   EuiPanel,
   EuiHorizontalRule,
+  EuiTitle,
 } from "@elastic/eui";
 import { ContentPanel } from "../../../../components/ContentPanel";
 import { IndexService } from "../../../../services";
@@ -111,9 +112,9 @@ export default class NewPolicy extends React.Component<NewPolicyProps, NewPolicy
     const radioOptions = [currentRadio, stateRadio];
     return (
       <EuiPanel>
-        <EuiText size="s">
+        <EuiTitle size="s">
           <h2>Choose new policy</h2>
-        </EuiText>
+        </EuiTitle>
         <EuiHorizontalRule margin="xs" />
         <div>
           <EuiText size="xs">
diff --git a/public/pages/ChangePolicy/components/NewPolicy/__snapshots__/NewPolicy.test.tsx.snap b/public/pages/ChangePolicy/components/NewPolicy/__snapshots__/NewPolicy.test.tsx.snap
index 931490a10..c4f4ac81c 100644
--- a/public/pages/ChangePolicy/components/NewPolicy/__snapshots__/NewPolicy.test.tsx.snap
+++ b/public/pages/ChangePolicy/components/NewPolicy/__snapshots__/NewPolicy.test.tsx.snap
@@ -4,13 +4,11 @@ exports[`<NewPolicy /> spec renders the component 1`] = `
 <div
   class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
 >
-  <div
-    class="euiText euiText--small"
+  <h2
+    class="euiTitle euiTitle--small"
   >
-    <h2>
-      Choose new policy
-    </h2>
-  </div>
+    Choose new policy
+  </h2>
   <hr
     class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
   />
diff --git a/public/pages/ChangePolicy/containers/ChangePolicy/__snapshots__/ChangePolicy.test.tsx.snap b/public/pages/ChangePolicy/containers/ChangePolicy/__snapshots__/ChangePolicy.test.tsx.snap
index cc14a9634..6db3dcdad 100644
--- a/public/pages/ChangePolicy/containers/ChangePolicy/__snapshots__/ChangePolicy.test.tsx.snap
+++ b/public/pages/ChangePolicy/containers/ChangePolicy/__snapshots__/ChangePolicy.test.tsx.snap
@@ -17,13 +17,11 @@ exports[`<ChangePolicy /> spec renders the component 1`] = `
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
   >
-    <div
-      class="euiText euiText--small"
+    <h2
+      class="euiTitle euiTitle--small"
     >
-      <h2>
-        Choose managed indices
-      </h2>
-    </div>
+      Choose managed indices
+    </h2>
     <hr
       class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
     />
@@ -206,13 +204,11 @@ exports[`<ChangePolicy /> spec renders the component 1`] = `
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
   >
-    <div
-      class="euiText euiText--small"
+    <h2
+      class="euiTitle euiTitle--small"
     >
-      <h2>
-        Choose new policy
-      </h2>
-    </div>
+      Choose new policy
+    </h2>
     <hr
       class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
     />
diff --git a/public/pages/CreateComposableTemplate/components/IndexSettings/IndexSettings.tsx b/public/pages/CreateComposableTemplate/components/IndexSettings/IndexSettings.tsx
index 4506b6727..985cebdcd 100644
--- a/public/pages/CreateComposableTemplate/components/IndexSettings/IndexSettings.tsx
+++ b/public/pages/CreateComposableTemplate/components/IndexSettings/IndexSettings.tsx
@@ -32,11 +32,9 @@ export default function IndexSettings(props: SubDetailProps) {
     <ContentPanel
       color={noPanel ? "ghost" : undefined}
       title={
-        <EuiText size="s">
-          <EuiTitle>
-            <h2>Index settings</h2>
-          </EuiTitle>
-        </EuiText>
+        <EuiTitle size="s">
+          <h2>Index settings</h2>
+        </EuiTitle>
       }
       noExtraPadding
       actions={
diff --git a/public/pages/CreateComposableTemplate/containers/CreateComposableTemplate/__snapshots__/CreateComposableTemplate.test.tsx.snap b/public/pages/CreateComposableTemplate/containers/CreateComposableTemplate/__snapshots__/CreateComposableTemplate.test.tsx.snap
index 584a12512..091ad6f79 100644
--- a/public/pages/CreateComposableTemplate/containers/CreateComposableTemplate/__snapshots__/CreateComposableTemplate.test.tsx.snap
+++ b/public/pages/CreateComposableTemplate/containers/CreateComposableTemplate/__snapshots__/CreateComposableTemplate.test.tsx.snap
@@ -68,13 +68,11 @@ exports[`<CreateComposableTemplate /> spec it goes to templates page when click
         <div
           class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
         >
-          <div
-            class="euiText euiText--small"
+          <h2
+            class="euiTitle euiTitle--small"
           >
-            <h2>
-              Define component template
-            </h2>
-          </div>
+            Define component template
+          </h2>
         </div>
         <hr
           class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
@@ -174,15 +172,11 @@ exports[`<CreateComposableTemplate /> spec it goes to templates page when click
                   class="euiFormLabel euiFormRow__label"
                   for="some_html_id"
                 >
-                  <div
-                    class="euiText euiText--small"
+                  <h2
+                    class="euiTitle euiTitle--small"
                   >
-                    <h2
-                      class="euiTitle euiTitle--medium"
-                    >
-                      Index alias
-                    </h2>
-                  </div>
+                    Index alias
+                  </h2>
                 </label>
               </div>
               <div
@@ -265,15 +259,11 @@ exports[`<CreateComposableTemplate /> spec it goes to templates page when click
           <div
             class="euiFlexItem"
           >
-            <div
-              class="euiText euiText--small"
+            <h2
+              class="euiTitle euiTitle--small"
             >
-              <h2
-                class="euiTitle euiTitle--medium"
-              >
-                Index settings
-              </h2>
-            </div>
+              Index settings
+            </h2>
           </div>
           <div
             class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -343,15 +333,11 @@ exports[`<CreateComposableTemplate /> spec it goes to templates page when click
           <div
             class="euiFlexItem"
           >
-            <div
-              class="euiText euiText--small"
+            <h2
+              class="euiTitle euiTitle--small"
             >
-              <h2
-                class="euiTitle euiTitle--medium"
-              >
-                Index mapping
-              </h2>
-            </div>
+              Index mapping
+            </h2>
             <div
               class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
               id="some_html_id-row"
diff --git a/public/pages/CreateComposableTemplate/containers/DefineTemplate/DefineTemplate.tsx b/public/pages/CreateComposableTemplate/containers/DefineTemplate/DefineTemplate.tsx
index a8c4939b2..0ff37412a 100644
--- a/public/pages/CreateComposableTemplate/containers/DefineTemplate/DefineTemplate.tsx
+++ b/public/pages/CreateComposableTemplate/containers/DefineTemplate/DefineTemplate.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useContext } from "react";
-import { EuiFlexGroup, EuiHorizontalRule, EuiPanel, EuiSpacer, EuiText } from "@elastic/eui";
+import { EuiFlexGroup, EuiHorizontalRule, EuiPanel, EuiSpacer, EuiText, EuiTitle } from "@elastic/eui";
 import { SubDetailProps } from "../../interface";
 import { ContentPanel } from "../../../../components/ContentPanel";
 import CustomFormRow from "../../../../components/CustomFormRow";
@@ -110,9 +110,9 @@ export default function DefineTemplate(props: SubDetailProps) {
   return (
     <EuiPanel>
       <EuiFlexGroup gutterSize="xs" alignItems="center">
-        <EuiText size="s">
+        <EuiTitle size="s">
           <h2>{`Define component template`}</h2>
-        </EuiText>
+        </EuiTitle>
       </EuiFlexGroup>
       <EuiHorizontalRule margin={"xs"} />
       {content}
diff --git a/public/pages/CreateComposableTemplate/containers/IndexAlias/IndexAlias.tsx b/public/pages/CreateComposableTemplate/containers/IndexAlias/IndexAlias.tsx
index dea46d462..eab8f3556 100644
--- a/public/pages/CreateComposableTemplate/containers/IndexAlias/IndexAlias.tsx
+++ b/public/pages/CreateComposableTemplate/containers/IndexAlias/IndexAlias.tsx
@@ -23,11 +23,9 @@ export default function IndexAlias(props: SubDetailProps) {
           <CustomFormRow
             fullWidth
             label={
-              <EuiText size="s">
-                <EuiTitle>
-                  <h2>Index alias</h2>
-                </EuiTitle>
-              </EuiText>
+              <EuiTitle size="s">
+                <h2>Index alias</h2>
+              </EuiTitle>
             }
             helpText="Allow the new indexes to be referenced by existing aliases or specify a new alias."
           >
diff --git a/public/pages/CreateComposableTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap b/public/pages/CreateComposableTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap
index 5f6b8944f..aaeb1d94c 100644
--- a/public/pages/CreateComposableTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap
+++ b/public/pages/CreateComposableTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap
@@ -53,13 +53,11 @@ exports[`<TemplateDetail /> spec render component 1`] = `
       <div
         class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
-        <div
-          class="euiText euiText--small"
+        <h2
+          class="euiTitle euiTitle--small"
         >
-          <h2>
-            Define component template
-          </h2>
-        </div>
+          Define component template
+        </h2>
       </div>
       <hr
         class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
@@ -215,15 +213,11 @@ exports[`<TemplateDetail /> spec render component 1`] = `
                 class="euiFormLabel euiFormRow__label"
                 for="some_html_id"
               >
-                <div
-                  class="euiText euiText--small"
+                <h2
+                  class="euiTitle euiTitle--small"
                 >
-                  <h2
-                    class="euiTitle euiTitle--medium"
-                  >
-                    Index alias
-                  </h2>
-                </div>
+                  Index alias
+                </h2>
               </label>
             </div>
             <div
@@ -306,15 +300,11 @@ exports[`<TemplateDetail /> spec render component 1`] = `
         <div
           class="euiFlexItem"
         >
-          <div
-            class="euiText euiText--small"
+          <h2
+            class="euiTitle euiTitle--small"
           >
-            <h2
-              class="euiTitle euiTitle--medium"
-            >
-              Index settings
-            </h2>
-          </div>
+            Index settings
+          </h2>
         </div>
         <div
           class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -384,15 +374,11 @@ exports[`<TemplateDetail /> spec render component 1`] = `
         <div
           class="euiFlexItem"
         >
-          <div
-            class="euiText euiText--small"
+          <h2
+            class="euiTitle euiTitle--small"
           >
-            <h2
-              class="euiTitle euiTitle--medium"
-            >
-              Index mapping
-            </h2>
-          </div>
+            Index mapping
+          </h2>
           <div
             class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
             id="some_html_id-row"
diff --git a/public/pages/CreateComposableTemplate/containers/TemplateMappings/TemplateMappings.tsx b/public/pages/CreateComposableTemplate/containers/TemplateMappings/TemplateMappings.tsx
index 6db7064a6..46e6eac37 100644
--- a/public/pages/CreateComposableTemplate/containers/TemplateMappings/TemplateMappings.tsx
+++ b/public/pages/CreateComposableTemplate/containers/TemplateMappings/TemplateMappings.tsx
@@ -19,11 +19,9 @@ export default function TemplateMappings(props: SubDetailProps) {
       color={noPanel ? "ghost" : undefined}
       title={
         <>
-          <EuiText size="s">
-            <EuiTitle>
-              <h2>Index mapping</h2>
-            </EuiTitle>
-          </EuiText>
+          <EuiTitle size="s">
+            <h2>Index mapping</h2>
+          </EuiTitle>
           <EuiCompressedFormRow
             fullWidth
             helpText={
diff --git a/public/pages/CreateDataStream/containers/BackingIndices/BackingIndices.tsx b/public/pages/CreateDataStream/containers/BackingIndices/BackingIndices.tsx
index 016e86c22..252b6a6c8 100644
--- a/public/pages/CreateDataStream/containers/BackingIndices/BackingIndices.tsx
+++ b/public/pages/CreateDataStream/containers/BackingIndices/BackingIndices.tsx
@@ -66,9 +66,9 @@ export default function BackingIndices(props: SubDetailProps) {
   return (
     <EuiPanel>
       <EuiFlexGroup gutterSize="xs" alignItems="center">
-        <EuiText size="s">
+        <EuiTitle size="s">
           <h2>Backing indexes</h2>
-        </EuiText>
+        </EuiTitle>
       </EuiFlexGroup>
       <EuiText color="subdued" size="xs">
         <p>
diff --git a/public/pages/CreateDataStream/containers/CreateDataStream/__snapshots__/CreateDataStream.test.tsx.snap b/public/pages/CreateDataStream/containers/CreateDataStream/__snapshots__/CreateDataStream.test.tsx.snap
index 6797333ca..0298faf7a 100644
--- a/public/pages/CreateDataStream/containers/CreateDataStream/__snapshots__/CreateDataStream.test.tsx.snap
+++ b/public/pages/CreateDataStream/containers/CreateDataStream/__snapshots__/CreateDataStream.test.tsx.snap
@@ -97,13 +97,11 @@ exports[`<CreateDataStream /> spec it goes to data streams page when click cance
       <div
         class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
-        <div
-          class="euiText euiText--small"
+        <h2
+          class="euiTitle euiTitle--small"
         >
-          <h2>
-            Define data stream
-          </h2>
-        </div>
+          Define data stream
+        </h2>
       </div>
       <hr
         class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
diff --git a/public/pages/CreateDataStream/containers/DataStreamDetail/__snapshots__/DataStreamDetail.test.tsx.snap b/public/pages/CreateDataStream/containers/DataStreamDetail/__snapshots__/DataStreamDetail.test.tsx.snap
index fd6bb54a1..683bfca35 100644
--- a/public/pages/CreateDataStream/containers/DataStreamDetail/__snapshots__/DataStreamDetail.test.tsx.snap
+++ b/public/pages/CreateDataStream/containers/DataStreamDetail/__snapshots__/DataStreamDetail.test.tsx.snap
@@ -94,13 +94,11 @@ exports[`<DataStreamDetail /> spec render component 1`] = `
     <div
       class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
-      <div
-        class="euiText euiText--small"
+      <h2
+        class="euiTitle euiTitle--small"
       >
-        <h2>
-          Define data stream
-        </h2>
-      </div>
+        Define data stream
+      </h2>
     </div>
     <hr
       class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
diff --git a/public/pages/CreateDataStream/containers/DefineDataStream/DefineDataStream.tsx b/public/pages/CreateDataStream/containers/DefineDataStream/DefineDataStream.tsx
index d3c20ceca..a7ed24d28 100644
--- a/public/pages/CreateDataStream/containers/DefineDataStream/DefineDataStream.tsx
+++ b/public/pages/CreateDataStream/containers/DefineDataStream/DefineDataStream.tsx
@@ -15,6 +15,7 @@ import {
   EuiPanel,
   EuiHorizontalRule,
   EuiFlexGrid,
+  EuiTitle,
 } from "@elastic/eui";
 import { DataStreamInEdit, SubDetailProps, TemplateItem } from "../../interface";
 import { ContentPanel } from "../../../../components/ContentPanel";
@@ -140,9 +141,9 @@ export default function DefineDataStream(
   return isEdit ? (
     <EuiPanel>
       <EuiFlexGroup gutterSize="xs" alignItems="center">
-        <EuiText size="s">
+        <EuiTitle size="s">
           <h2>Data stream details</h2>
-        </EuiText>
+        </EuiTitle>
       </EuiFlexGroup>
       <EuiHorizontalRule margin={"xs"} />
       <div>
@@ -161,9 +162,9 @@ export default function DefineDataStream(
   ) : (
     <EuiPanel>
       <EuiFlexGroup gutterSize="xs" alignItems="center">
-        <EuiText size="s">
+        <EuiTitle size="s">
           <h2>Define data stream</h2>
-        </EuiText>
+        </EuiTitle>
       </EuiFlexGroup>
       <EuiHorizontalRule margin={"xs"} />
       <div>
diff --git a/public/pages/CreateIndexTemplate/components/DefineTemplate/DefineTemplate.tsx b/public/pages/CreateIndexTemplate/components/DefineTemplate/DefineTemplate.tsx
index 5eb5a3cf4..a02d6e350 100644
--- a/public/pages/CreateIndexTemplate/components/DefineTemplate/DefineTemplate.tsx
+++ b/public/pages/CreateIndexTemplate/components/DefineTemplate/DefineTemplate.tsx
@@ -13,6 +13,7 @@ import {
   EuiText,
   EuiTextColor,
   EuiHorizontalRule,
+  EuiTitle,
 } from "@elastic/eui";
 import { FLOW_ENUM, SubDetailProps } from "../../interface";
 import CustomFormRow from "../../../../components/CustomFormRow";
@@ -34,9 +35,9 @@ export default function DefineTemplate(props: SubDetailProps) {
   });
   return readonly ? null : (
     <EuiPanel>
-      <EuiText size="s">
+      <EuiTitle size="s">
         <h2>Template settings</h2>
-      </EuiText>
+      </EuiTitle>
       <EuiHorizontalRule margin="xs" />
       <EuiSpacer size="s" />
       {isEdit ? null : (
diff --git a/public/pages/CreateIndexTemplate/components/DefineTemplate/OverviewTemplate.tsx b/public/pages/CreateIndexTemplate/components/DefineTemplate/OverviewTemplate.tsx
index f25b1430f..3e320f3c6 100644
--- a/public/pages/CreateIndexTemplate/components/DefineTemplate/OverviewTemplate.tsx
+++ b/public/pages/CreateIndexTemplate/components/DefineTemplate/OverviewTemplate.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import React from "react";
-import { EuiLink, EuiPanel, EuiSpacer, EuiText, EuiHorizontalRule } from "@elastic/eui";
+import { EuiLink, EuiPanel, EuiSpacer, EuiText, EuiHorizontalRule, EuiTitle } from "@elastic/eui";
 import { SubDetailProps } from "../../interface";
 import DescriptionListHoz from "../../../../components/DescriptionListHoz";
 import { ROUTES } from "../../../../utils/constants";
@@ -71,9 +71,9 @@ export default function OverviewTemplate(props: SubDetailProps) {
     content
   ) : (
     <EuiPanel>
-      <EuiText size="s">
+      <EuiTitle size="s">
         <h2>Overview</h2>
-      </EuiText>
+      </EuiTitle>
       <EuiHorizontalRule margin="xs" />
       {content}
     </EuiPanel>
diff --git a/public/pages/CreateIndexTemplate/components/DefineTemplate/__snapshots__/DefineTemplate.test.tsx.snap b/public/pages/CreateIndexTemplate/components/DefineTemplate/__snapshots__/DefineTemplate.test.tsx.snap
index 245989880..1499d972c 100644
--- a/public/pages/CreateIndexTemplate/components/DefineTemplate/__snapshots__/DefineTemplate.test.tsx.snap
+++ b/public/pages/CreateIndexTemplate/components/DefineTemplate/__snapshots__/DefineTemplate.test.tsx.snap
@@ -5,13 +5,11 @@ exports[`<ComposableTemplatesActions /> spec renders the component in edit mode
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
   >
-    <div
-      class="euiText euiText--small"
+    <h2
+      class="euiTitle euiTitle--small"
     >
-      <h2>
-        Template settings
-      </h2>
-    </div>
+      Template settings
+    </h2>
     <hr
       class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
     />
@@ -418,13 +416,11 @@ exports[`<ComposableTemplatesActions /> spec renders the component in non-edit m
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
   >
-    <div
-      class="euiText euiText--small"
+    <h2
+      class="euiTitle euiTitle--small"
     >
-      <h2>
-        Template settings
-      </h2>
-    </div>
+      Template settings
+    </h2>
     <hr
       class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
     />
diff --git a/public/pages/CreateIndexTemplate/containers/CreateIndexTemplate/__snapshots__/CreateIndexTemplate.test.tsx.snap b/public/pages/CreateIndexTemplate/containers/CreateIndexTemplate/__snapshots__/CreateIndexTemplate.test.tsx.snap
index 874d94be4..263310130 100644
--- a/public/pages/CreateIndexTemplate/containers/CreateIndexTemplate/__snapshots__/CreateIndexTemplate.test.tsx.snap
+++ b/public/pages/CreateIndexTemplate/containers/CreateIndexTemplate/__snapshots__/CreateIndexTemplate.test.tsx.snap
@@ -62,13 +62,11 @@ exports[`<CreateIndexTemplate /> spec render template pages 1`] = `
     <div
       class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
     >
-      <div
-        class="euiText euiText--small"
+      <h2
+        class="euiTitle euiTitle--small"
       >
-        <h2>
-          Overview
-        </h2>
-      </div>
+        Overview
+      </h2>
       <hr
         class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
       />
@@ -224,13 +222,11 @@ exports[`<CreateIndexTemplate /> spec render template pages 1`] = `
         <div
           class="euiFlexItem"
         >
-          <div
-            class="euiText euiText--small"
+          <h2
+            class="euiTitle euiTitle--small"
           >
-            <h2>
-              Preview template
-            </h2>
-          </div>
+            Preview template
+          </h2>
         </div>
       </div>
       <hr
diff --git a/public/pages/CreateIndexTemplate/containers/TemplateDetail/TemplateDetail.tsx b/public/pages/CreateIndexTemplate/containers/TemplateDetail/TemplateDetail.tsx
index 517dfc01d..956d89b84 100644
--- a/public/pages/CreateIndexTemplate/containers/TemplateDetail/TemplateDetail.tsx
+++ b/public/pages/CreateIndexTemplate/containers/TemplateDetail/TemplateDetail.tsx
@@ -405,17 +405,17 @@ const TemplateDetail = (props: TemplateDetailProps, ref: Ref<FieldInstance>) =>
       <ContentPanel
         title={
           isEdit && selectedTabId === TABS_ENUM.SUMMARY ? (
-            <EuiText size="s">
+            <EuiTitle size="s">
               <h2>Preview template</h2>
-            </EuiText>
+            </EuiTitle>
           ) : values._meta?.flow === FLOW_ENUM.COMPONENTS ? (
-            <EuiText size="s">
+            <EuiTitle size="s">
               <h2>Override template definition</h2>
-            </EuiText>
+            </EuiTitle>
           ) : (
-            <EuiText size="s">
+            <EuiTitle size="s">
               <h2>Template definition</h2>
-            </EuiText>
+            </EuiTitle>
           )
         }
         subTitleText={
diff --git a/public/pages/CreateIndexTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap b/public/pages/CreateIndexTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap
index c042f03bb..a63053e60 100644
--- a/public/pages/CreateIndexTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap
+++ b/public/pages/CreateIndexTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap
@@ -56,13 +56,11 @@ exports[`<TemplateDetail /> spec render component in non-edit-mode 1`] = `
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
   >
-    <div
-      class="euiText euiText--small"
+    <h2
+      class="euiTitle euiTitle--small"
     >
-      <h2>
-        Template settings
-      </h2>
-    </div>
+      Template settings
+    </h2>
     <hr
       class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
     />
@@ -499,13 +497,11 @@ exports[`<TemplateDetail /> spec render component in non-edit-mode 1`] = `
       <div
         class="euiFlexItem"
       >
-        <div
-          class="euiText euiText--small"
+        <h2
+          class="euiTitle euiTitle--small"
         >
-          <h2>
-            Template definition
-          </h2>
-        </div>
+          Template definition
+        </h2>
       </div>
     </div>
     <hr
diff --git a/public/pages/CreatePolicy/components/ConfigurePolicy/ConfigurePolicy.tsx b/public/pages/CreatePolicy/components/ConfigurePolicy/ConfigurePolicy.tsx
index 18adb7c49..4a7b6bb07 100644
--- a/public/pages/CreatePolicy/components/ConfigurePolicy/ConfigurePolicy.tsx
+++ b/public/pages/CreatePolicy/components/ConfigurePolicy/ConfigurePolicy.tsx
@@ -4,8 +4,16 @@
  */
 
 import React, { ChangeEvent } from "react";
-import { EuiSpacer, EuiCompressedFormRow, EuiCompressedFieldText, EuiText, EuiPanel, EuiHorizontalRule, EuiFlexGroup } from "@elastic/eui";
-import { ContentPanel } from "../../../../components/ContentPanel";
+import {
+  EuiSpacer,
+  EuiCompressedFormRow,
+  EuiCompressedFieldText,
+  EuiText,
+  EuiPanel,
+  EuiHorizontalRule,
+  EuiFlexGroup,
+  EuiTitle,
+} from "@elastic/eui";
 
 interface ConfigurePolicyProps {
   policyId: string;
@@ -18,9 +26,9 @@ interface ConfigurePolicyProps {
 const ConfigurePolicy = ({ isEdit, policyId, policyIdError, onChange, useNewUx }: ConfigurePolicyProps) => (
   <EuiPanel>
     <EuiFlexGroup gutterSize="xs" alignItems="center">
-      <EuiText size="s">
+      <EuiTitle size="s">
         <h2>{`Name policy`}</h2>
-      </EuiText>
+      </EuiTitle>
     </EuiFlexGroup>
     <EuiHorizontalRule margin={"xs"} />
     {useNewUx ? (
diff --git a/public/pages/CreatePolicy/components/ConfigurePolicy/__snapshots__/ConfigurePolicy.test.tsx.snap b/public/pages/CreatePolicy/components/ConfigurePolicy/__snapshots__/ConfigurePolicy.test.tsx.snap
index c791cf2db..16800496e 100644
--- a/public/pages/CreatePolicy/components/ConfigurePolicy/__snapshots__/ConfigurePolicy.test.tsx.snap
+++ b/public/pages/CreatePolicy/components/ConfigurePolicy/__snapshots__/ConfigurePolicy.test.tsx.snap
@@ -7,13 +7,11 @@ exports[`<ConfigurePolicy /> spec renders the component 1`] = `
   <div
     class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
   >
-    <div
-      class="euiText euiText--small"
+    <h2
+      class="euiTitle euiTitle--small"
     >
-      <h2>
-        Name policy
-      </h2>
-    </div>
+      Name policy
+    </h2>
   </div>
   <hr
     class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
diff --git a/public/pages/CreatePolicy/components/DefinePolicy/DefinePolicy.tsx b/public/pages/CreatePolicy/components/DefinePolicy/DefinePolicy.tsx
index f23e6dce4..82e3e4ef1 100644
--- a/public/pages/CreatePolicy/components/DefinePolicy/DefinePolicy.tsx
+++ b/public/pages/CreatePolicy/components/DefinePolicy/DefinePolicy.tsx
@@ -18,6 +18,7 @@ import {
   EuiHorizontalRule,
   EuiFlexItem,
   EuiFlexGroup,
+  EuiTitle,
 } from "@elastic/eui";
 import { ContentPanel } from "../../../../components/ContentPanel";
 import "brace/theme/github";
@@ -36,9 +37,9 @@ interface DefinePolicyProps {
 const DefinePolicy = ({ jsonString, onChange, onAutoIndent, hasJSONError }: DefinePolicyProps) => (
   <EuiPanel>
     <EuiFlexGroup justifyContent="spaceBetween" gutterSize="xs" alignItems="center">
-      <EuiText size="s">
+      <EuiTitle size="s">
         <h2>{`Define policy`}</h2>
-      </EuiText>
+      </EuiTitle>
       <EuiFlexItem grow={false}>
         <EuiFlexGroup justifyContent="spaceBetween" alignItems="center" gutterSize="s">
           <EuiFlexItem>
diff --git a/public/pages/CreatePolicy/components/DefinePolicy/__snapshots__/DefinePolicy.test.tsx.snap b/public/pages/CreatePolicy/components/DefinePolicy/__snapshots__/DefinePolicy.test.tsx.snap
index 1f52eef04..a09805e69 100644
--- a/public/pages/CreatePolicy/components/DefinePolicy/__snapshots__/DefinePolicy.test.tsx.snap
+++ b/public/pages/CreatePolicy/components/DefinePolicy/__snapshots__/DefinePolicy.test.tsx.snap
@@ -7,13 +7,11 @@ exports[`<DefinePolicy /> spec renders the component 1`] = `
   <div
     class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
   >
-    <div
-      class="euiText euiText--small"
+    <h2
+      class="euiTitle euiTitle--small"
     >
-      <h2>
-        Define policy
-      </h2>
-    </div>
+      Define policy
+    </h2>
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
diff --git a/public/pages/CreatePolicy/containers/CreatePolicy/__snapshots__/CreatePolicy.test.tsx.snap b/public/pages/CreatePolicy/containers/CreatePolicy/__snapshots__/CreatePolicy.test.tsx.snap
index 334b5a4ed..5545cd934 100644
--- a/public/pages/CreatePolicy/containers/CreatePolicy/__snapshots__/CreatePolicy.test.tsx.snap
+++ b/public/pages/CreatePolicy/containers/CreatePolicy/__snapshots__/CreatePolicy.test.tsx.snap
@@ -19,13 +19,11 @@ exports[`<CreatePolicy /> spec renders the create component 1`] = `
     <div
       class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
-      <div
-        class="euiText euiText--small"
+      <h2
+        class="euiTitle euiTitle--small"
       >
-        <h2>
-          Name policy
-        </h2>
-      </div>
+        Name policy
+      </h2>
     </div>
     <hr
       class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
@@ -352,13 +350,11 @@ exports[`<CreatePolicy /> spec renders the edit component 1`] = `
     <div
       class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
-      <div
-        class="euiText euiText--small"
+      <h2
+        class="euiTitle euiTitle--small"
       >
-        <h2>
-          Name policy
-        </h2>
-      </div>
+        Name policy
+      </h2>
     </div>
     <hr
       class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
diff --git a/public/pages/CreateRollup/components/AdvancedAggregation/AdvancedAggregation.tsx b/public/pages/CreateRollup/components/AdvancedAggregation/AdvancedAggregation.tsx
index b265472f0..6d14d59e0 100644
--- a/public/pages/CreateRollup/components/AdvancedAggregation/AdvancedAggregation.tsx
+++ b/public/pages/CreateRollup/components/AdvancedAggregation/AdvancedAggregation.tsx
@@ -355,17 +355,17 @@ export default class AdvancedAggregation extends Component<AdvancedAggregationPr
               <EuiFlexItem>
                 <EuiFlexGroup gutterSize="xs">
                   <EuiFlexItem grow={false}>
-                    <EuiText size="s">
+                    <EuiTitle size="s">
                       <h2>Additional aggregation{` (${selectedDimensionField.length})`} </h2>
-                    </EuiText>
+                    </EuiTitle>
                   </EuiFlexItem>
                   <EuiFlexItem grow={false}>
-                    <EuiText size="s" color="subdued">
+                    <EuiTitle size="s" color="subdued">
                       <h2>
                         {" "}
                         <i>– optional</i>{" "}
                       </h2>
-                    </EuiText>
+                    </EuiTitle>
                   </EuiFlexItem>
                 </EuiFlexGroup>
               </EuiFlexItem>
diff --git a/public/pages/CreateRollup/components/ConfigureRollup/ConfigureRollup.tsx b/public/pages/CreateRollup/components/ConfigureRollup/ConfigureRollup.tsx
index 70dd2ff97..1d8283f6e 100644
--- a/public/pages/CreateRollup/components/ConfigureRollup/ConfigureRollup.tsx
+++ b/public/pages/CreateRollup/components/ConfigureRollup/ConfigureRollup.tsx
@@ -14,6 +14,7 @@ import {
   EuiFlexItem,
   EuiHorizontalRule,
   EuiPanel,
+  EuiTitle,
 } from "@elastic/eui";
 
 interface ConfigureRollupProps {
@@ -28,9 +29,9 @@ interface ConfigureRollupProps {
 const ConfigureRollup = ({ isEdit, rollupId, rollupIdError, onChangeName, onChangeDescription, description }: ConfigureRollupProps) => (
   <EuiPanel>
     <EuiFlexGroup gutterSize="xs" alignItems="center">
-      <EuiText size="s">
+      <EuiTitle size="s">
         <h2>Job name and description</h2>
-      </EuiText>
+      </EuiTitle>
     </EuiFlexGroup>
     <EuiHorizontalRule margin={"xs"} />
     <EuiCompressedFormRow
diff --git a/public/pages/CreateRollup/components/HistogramAndMetrics/HistogramAndMetrics.tsx b/public/pages/CreateRollup/components/HistogramAndMetrics/HistogramAndMetrics.tsx
index db92af3d5..c034745f6 100644
--- a/public/pages/CreateRollup/components/HistogramAndMetrics/HistogramAndMetrics.tsx
+++ b/public/pages/CreateRollup/components/HistogramAndMetrics/HistogramAndMetrics.tsx
@@ -20,6 +20,7 @@ import {
   EuiTableSortingType,
   EuiPanel,
   EuiHorizontalRule,
+  EuiTitle,
 } from "@elastic/eui";
 import { ContentPanel, ContentPanelActions } from "../../../../components/ContentPanel";
 import { ModalConsumer } from "../../../../components/Modal";
@@ -187,9 +188,9 @@ export default class HistogramAndMetrics extends Component<HistogramAndMetricsPr
       <EuiPanel>
         <EuiFlexGroup gutterSize="xs">
           <EuiFlexItem>
-            <EuiText size="s">
+            <EuiTitle size="s">
               <h2>{AGGREGATION_AND_METRIC_SETTINGS}</h2>
-            </EuiText>
+            </EuiTitle>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <ModalConsumer>
diff --git a/public/pages/CreateRollup/components/JobNameAndIndices/JobNameAndIndices.tsx b/public/pages/CreateRollup/components/JobNameAndIndices/JobNameAndIndices.tsx
index e5ba8bae8..b00024394 100644
--- a/public/pages/CreateRollup/components/JobNameAndIndices/JobNameAndIndices.tsx
+++ b/public/pages/CreateRollup/components/JobNameAndIndices/JobNameAndIndices.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { Component } from "react";
-import { EuiFlexGrid, EuiSpacer, EuiFlexItem, EuiText, EuiFlexGroup, EuiHorizontalRule, EuiPanel } from "@elastic/eui";
+import { EuiFlexGrid, EuiSpacer, EuiFlexItem, EuiText, EuiFlexGroup, EuiHorizontalRule, EuiPanel, EuiTitle } from "@elastic/eui";
 import { ContentPanel, ContentPanelActions } from "../../../../components/ContentPanel";
 import { ModalConsumer } from "../../../../components/Modal";
 import { IndexItem } from "../../../../../models/interfaces";
@@ -29,9 +29,9 @@ export default class JobNameAndIndices extends Component<JobNameAndIndicesProps>
       <EuiPanel>
         <EuiFlexGroup gutterSize="xs">
           <EuiFlexItem>
-            <EuiText size="s">
+            <EuiTitle size="s">
               <h2>Job name and indexes</h2>
-            </EuiText>
+            </EuiTitle>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <ModalConsumer>
diff --git a/public/pages/CreateRollup/components/MetricsCalculation/MetricsCalculation.tsx b/public/pages/CreateRollup/components/MetricsCalculation/MetricsCalculation.tsx
index ae8fface3..67090e56b 100644
--- a/public/pages/CreateRollup/components/MetricsCalculation/MetricsCalculation.tsx
+++ b/public/pages/CreateRollup/components/MetricsCalculation/MetricsCalculation.tsx
@@ -508,20 +508,20 @@ export default class MetricsCalculation extends Component<MetricsCalculationProp
 
     return (
       <EuiPanel>
-        <EuiFlexGroup style={{ padding: "0px 10px" }} justifyContent="spaceBetween">
+        <EuiFlexGroup style={{ padding: "0px" }} justifyContent="spaceBetween">
           <EuiFlexItem>
             <EuiFlexGroup gutterSize="xs">
               <EuiFlexItem grow={false}>
-                <EuiText size="s">
+                <EuiTitle size="s">
                   <h2>Additional metrics{` (${selectedMetrics.length})`} </h2>
-                </EuiText>
+                </EuiTitle>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiText size="s">
+                <EuiTitle size="s">
                   <h2>
                     <i> – optional </i>
                   </h2>
-                </EuiText>
+                </EuiTitle>
               </EuiFlexItem>
             </EuiFlexGroup>
           </EuiFlexItem>
@@ -567,7 +567,7 @@ export default class MetricsCalculation extends Component<MetricsCalculationProp
           </EuiFlexItem>
         </EuiFlexGroup>
 
-        <EuiFlexGroup style={{ padding: "0px 10px" }}>
+        <EuiFlexGroup style={{ padding: "0pxpx" }}>
           <EuiFlexItem grow={3}>
             <EuiFormHelpText>
               You can aggregate additional fields from the source index into the target index. Rollup supports the terms aggregation (for
diff --git a/public/pages/CreateRollup/components/RollupIndices/RollupIndices.tsx b/public/pages/CreateRollup/components/RollupIndices/RollupIndices.tsx
index fa33e50c8..795480c36 100644
--- a/public/pages/CreateRollup/components/RollupIndices/RollupIndices.tsx
+++ b/public/pages/CreateRollup/components/RollupIndices/RollupIndices.tsx
@@ -4,11 +4,20 @@
  */
 
 import React, { Component, Fragment } from "react";
-import { EuiSpacer, EuiCompressedFormRow, EuiCallOut, EuiText, EuiLink, EuiFlexGroup, EuiHorizontalRule, EuiPanel } from "@elastic/eui";
+import {
+  EuiSpacer,
+  EuiCompressedFormRow,
+  EuiCallOut,
+  EuiText,
+  EuiLink,
+  EuiFlexGroup,
+  EuiHorizontalRule,
+  EuiPanel,
+  EuiTitle,
+} from "@elastic/eui";
 import { EuiComboBoxOptionOption } from "@elastic/eui/src/components/combo_box/types";
 import _ from "lodash";
 import EuiCompressedComboBox from "../../../../components/ComboBoxWithoutWarning";
-import { ContentPanel } from "../../../../components/ContentPanel";
 import { IndexItem } from "../../../../../models/interfaces";
 import IndexService from "../../../../services/IndexService";
 import { CoreServicesContext } from "../../../../components/core_services";
@@ -123,9 +132,9 @@ export default class RollupIndices extends Component<RollupIndicesProps, RollupI
     return (
       <EuiPanel>
         <EuiFlexGroup gutterSize="xs" alignItems="center">
-          <EuiText size="s">
+          <EuiTitle size="s">
             <h2>Indices</h2>
-          </EuiText>
+          </EuiTitle>
         </EuiFlexGroup>
         <EuiHorizontalRule margin={"xs"} />
         <EuiSpacer size="s" />
diff --git a/public/pages/CreateRollup/components/Schedule/Schedule.tsx b/public/pages/CreateRollup/components/Schedule/Schedule.tsx
index c49b3530b..d99a690ea 100644
--- a/public/pages/CreateRollup/components/Schedule/Schedule.tsx
+++ b/public/pages/CreateRollup/components/Schedule/Schedule.tsx
@@ -19,6 +19,7 @@ import {
   EuiText,
   EuiHorizontalRule,
   EuiPanel,
+  EuiTitle,
 } from "@elastic/eui";
 import { DelayTimeunitOptions, ScheduleIntervalTimeunitOptions } from "../../utils/constants";
 import { ContentPanel } from "../../../../components/ContentPanel";
@@ -148,9 +149,9 @@ export default class Schedule extends Component<ScheduleProps> {
     return (
       <EuiPanel>
         <EuiFlexGroup gutterSize="xs" alignItems="center">
-          <EuiText size="s">
+          <EuiTitle size="s">
             <h2>Schedule</h2>
-          </EuiText>
+          </EuiTitle>
         </EuiFlexGroup>
         <EuiHorizontalRule margin={"xs"} />
         {!isEdit && (
diff --git a/public/pages/CreateRollup/components/ScheduleRolesAndNotifications/ScheduleRolesAndNotifications.tsx b/public/pages/CreateRollup/components/ScheduleRolesAndNotifications/ScheduleRolesAndNotifications.tsx
index 3bee71757..a923bf6ae 100644
--- a/public/pages/CreateRollup/components/ScheduleRolesAndNotifications/ScheduleRolesAndNotifications.tsx
+++ b/public/pages/CreateRollup/components/ScheduleRolesAndNotifications/ScheduleRolesAndNotifications.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { Component } from "react";
-import { EuiFlexGrid, EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiPanel, EuiSpacer, EuiText } from "@elastic/eui";
+import { EuiFlexGrid, EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiPanel, EuiSpacer, EuiText, EuiTitle } from "@elastic/eui";
 import { ContentPanel, ContentPanelActions } from "../../../../components/ContentPanel";
 import { ModalConsumer } from "../../../../components/Modal";
 import { parseTimeunit, buildIntervalScheduleText, buildCronScheduleText } from "../../utils/helpers";
@@ -48,9 +48,9 @@ export default class ScheduleRolesAndNotifications extends Component<ScheduleRol
       <EuiPanel>
         <EuiFlexGroup gutterSize="xs">
           <EuiFlexItem>
-            <EuiText size="s">
+            <EuiTitle size="s">
               <h2>Schedule</h2>
-            </EuiText>
+            </EuiTitle>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <ModalConsumer>
diff --git a/public/pages/CreateRollup/components/TimeAggregations/TimeAggregation.tsx b/public/pages/CreateRollup/components/TimeAggregations/TimeAggregation.tsx
index 78f57e5f1..5b6fac260 100644
--- a/public/pages/CreateRollup/components/TimeAggregations/TimeAggregation.tsx
+++ b/public/pages/CreateRollup/components/TimeAggregations/TimeAggregation.tsx
@@ -83,9 +83,9 @@ export default class TimeAggregation extends Component<TimeAggregationProps, Tim
 
     return (
       <EuiPanel>
-        <EuiText size="s">
+        <EuiTitle size="s">
           <h2>Time aggregation </h2>
-        </EuiText>
+        </EuiTitle>
         <EuiFormHelpText>
           Your source indices must include a timestamp field. The rollup job creates a date histogram for the field you specify.
         </EuiFormHelpText>
diff --git a/public/pages/CreateRollup/containers/CreateRollupForm/__snapshots__/CreateRollupForm.test.tsx.snap b/public/pages/CreateRollup/containers/CreateRollupForm/__snapshots__/CreateRollupForm.test.tsx.snap
index e141a7095..512f4e071 100644
--- a/public/pages/CreateRollup/containers/CreateRollupForm/__snapshots__/CreateRollupForm.test.tsx.snap
+++ b/public/pages/CreateRollup/containers/CreateRollupForm/__snapshots__/CreateRollupForm.test.tsx.snap
@@ -167,13 +167,11 @@ exports[`<CreateRollupForm /> spec renders the component 1`] = `
             <div
               class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
             >
-              <div
-                class="euiText euiText--small"
+              <h2
+                class="euiTitle euiTitle--small"
               >
-                <h2>
-                  Job name and description
-                </h2>
-              </div>
+                Job name and description
+              </h2>
             </div>
             <hr
               class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
@@ -287,13 +285,11 @@ exports[`<CreateRollupForm /> spec renders the component 1`] = `
             <div
               class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
             >
-              <div
-                class="euiText euiText--small"
+              <h2
+                class="euiTitle euiTitle--small"
               >
-                <h2>
-                  Indices
-                </h2>
-              </div>
+                Indices
+              </h2>
             </div>
             <hr
               class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
diff --git a/public/pages/CreateSnapshotPolicy/components/Notification/Notification.tsx b/public/pages/CreateSnapshotPolicy/components/Notification/Notification.tsx
index 216ed7914..119981500 100644
--- a/public/pages/CreateSnapshotPolicy/components/Notification/Notification.tsx
+++ b/public/pages/CreateSnapshotPolicy/components/Notification/Notification.tsx
@@ -47,7 +47,7 @@ const Notification = ({ channelId, channels, loadingChannels, onChangeChannelId,
           />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiSmallButton iconType="popout" href="notifications-dashboards#/channels" target="_blank">
+          <EuiSmallButton iconType="popout" href="notifications-dashboards#/channels" target="_blank" iconSide="right">
             Manage channels
           </EuiSmallButton>
         </EuiFlexItem>
diff --git a/public/pages/CreateSnapshotPolicy/containers/CreateSnapshotPolicy/CreateSnapshotPolicy.tsx b/public/pages/CreateSnapshotPolicy/containers/CreateSnapshotPolicy/CreateSnapshotPolicy.tsx
index 6c2bed828..587192a34 100644
--- a/public/pages/CreateSnapshotPolicy/containers/CreateSnapshotPolicy/CreateSnapshotPolicy.tsx
+++ b/public/pages/CreateSnapshotPolicy/containers/CreateSnapshotPolicy/CreateSnapshotPolicy.tsx
@@ -589,9 +589,9 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
 
         <EuiPanel>
           <EuiFlexGroup gutterSize="xs" alignItems="center">
-            <EuiText size="s">
+            <EuiTitle size="s">
               <h2>Policy settings</h2>
-            </EuiText>
+            </EuiTitle>
           </EuiFlexGroup>
           <EuiHorizontalRule margin={"xs"} />
           <CustomLabel title="Policy name" />
@@ -622,9 +622,9 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
 
         <EuiPanel>
           <EuiFlexGroup gutterSize="xs" alignItems="center">
-            <EuiText size="s">
+            <EuiTitle size="s">
               <h2>Source and destination</h2>
-            </EuiText>
+            </EuiTitle>
           </EuiFlexGroup>
           <EuiHorizontalRule margin={"xs"} />
           <SnapshotIndicesRepoInput
@@ -653,9 +653,9 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
 
         <EuiPanel>
           <EuiFlexGroup gutterSize="xs" alignItems="center">
-            <EuiText size="s">
+            <EuiTitle size="s">
               <h2>Snapshot schedule</h2>
-            </EuiText>
+            </EuiTitle>
           </EuiFlexGroup>
           <EuiHorizontalRule margin={"xs"} />
           <CronSchedule
@@ -686,9 +686,9 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
 
         <EuiPanel>
           <EuiFlexGroup gutterSize="xs" alignItems="center">
-            <EuiText size="s">
+            <EuiTitle size="s">
               <h2>Retention period</h2>
-            </EuiText>
+            </EuiTitle>
           </EuiFlexGroup>
           <EuiHorizontalRule margin={"xs"} />
           <EuiCompressedRadioGroup
@@ -794,9 +794,9 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
 
         <EuiPanel>
           <EuiFlexGroup gutterSize="xs" alignItems="center">
-            <EuiText size="s">
+            <EuiTitle size="s">
               <h2>Notifications</h2>
-            </EuiText>
+            </EuiTitle>
           </EuiFlexGroup>
           <EuiHorizontalRule margin={"xs"} />
           <EuiText size="s">
@@ -864,11 +864,11 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
               />
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiText size="s">
+              <EuiTitle size="s">
                 <h2>
                   Advanced settings <i>– optional</i>
                 </h2>
-              </EuiText>
+              </EuiTitle>
             </EuiFlexItem>
           </EuiFlexGroup>
 
diff --git a/public/pages/CreateTransform/components/ConfigureTransform/ConfigureTransform.tsx b/public/pages/CreateTransform/components/ConfigureTransform/ConfigureTransform.tsx
index d621cce5b..ada5f6f97 100644
--- a/public/pages/CreateTransform/components/ConfigureTransform/ConfigureTransform.tsx
+++ b/public/pages/CreateTransform/components/ConfigureTransform/ConfigureTransform.tsx
@@ -14,6 +14,7 @@ import {
   EuiFlexItem,
   EuiPanel,
   EuiHorizontalRule,
+  EuiTitle,
 } from "@elastic/eui";
 
 interface ConfigureTransformProps {
@@ -34,9 +35,9 @@ const ConfigureTransform = ({
   description,
 }: ConfigureTransformProps) => (
   <EuiPanel>
-    <EuiText size="s">
+    <EuiTitle size="s">
       <h2>Job name and description</h2>
-    </EuiText>
+    </EuiTitle>
     <EuiHorizontalRule margin="xs" />
     <div>
       <EuiCompressedFormRow
diff --git a/public/pages/CreateTransform/components/DefineTransforms/DefineTransforms.tsx b/public/pages/CreateTransform/components/DefineTransforms/DefineTransforms.tsx
index 05e7d00d8..c1885c81a 100644
--- a/public/pages/CreateTransform/components/DefineTransforms/DefineTransforms.tsx
+++ b/public/pages/CreateTransform/components/DefineTransforms/DefineTransforms.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiDataGrid, EuiDataGridColumn, EuiSpacer, EuiText, EuiToolTip } from "@elastic/eui";
+import { EuiDataGrid, EuiDataGridColumn, EuiSpacer, EuiText, EuiTitle, EuiToolTip } from "@elastic/eui";
 import { CoreStart } from "opensearch-dashboards/public";
 import React, { useCallback, useState } from "react";
 import { ContentPanel } from "../../../../components/ContentPanel";
@@ -214,9 +214,9 @@ export default function DefineTransforms({
       panelStyles={{ padding: "16px 16px" }}
       bodyStyles={{ padding: "10px" }}
       title={
-        <EuiText size="s">
+        <EuiTitle size="s">
           <h2>Select fields to transform</h2>
-        </EuiText>
+        </EuiTitle>
       }
       titleSize="m"
     >
diff --git a/public/pages/CreateTransform/components/JobNameAndIndices/JobNameAndIndices.tsx b/public/pages/CreateTransform/components/JobNameAndIndices/JobNameAndIndices.tsx
index 1c281d7b0..bc3fcd7ea 100644
--- a/public/pages/CreateTransform/components/JobNameAndIndices/JobNameAndIndices.tsx
+++ b/public/pages/CreateTransform/components/JobNameAndIndices/JobNameAndIndices.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { Component } from "react";
-import { EuiFlexGrid, EuiSpacer, EuiFlexItem, EuiText, EuiPanel, EuiFlexGroup, EuiHorizontalRule } from "@elastic/eui";
+import { EuiFlexGrid, EuiSpacer, EuiFlexItem, EuiText, EuiPanel, EuiFlexGroup, EuiHorizontalRule, EuiTitle } from "@elastic/eui";
 import { ContentPanelActions } from "../../../../components/ContentPanel";
 import { ModalConsumer } from "../../../../components/Modal";
 import { IndexItem } from "../../../../../models/interfaces";
@@ -30,9 +30,9 @@ export default class JobNameAndIndices extends Component<JobNameAndIndicesProps>
       <EuiPanel>
         <EuiFlexGroup>
           <EuiFlexItem>
-            <EuiText size="s">
+            <EuiTitle size="s">
               <h2>Set up indices</h2>
-            </EuiText>
+            </EuiTitle>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <ModalConsumer>
diff --git a/public/pages/CreateTransform/components/ReviewDefinition/ReviewDefinition.tsx b/public/pages/CreateTransform/components/ReviewDefinition/ReviewDefinition.tsx
index 906843bf9..6867d8250 100644
--- a/public/pages/CreateTransform/components/ReviewDefinition/ReviewDefinition.tsx
+++ b/public/pages/CreateTransform/components/ReviewDefinition/ReviewDefinition.tsx
@@ -4,7 +4,17 @@
  */
 
 import React, { Component } from "react";
-import { EuiFlexGrid, EuiSpacer, EuiFlexItem, EuiText, EuiAccordion, EuiFlexGroup, EuiPanel, EuiHorizontalRule } from "@elastic/eui";
+import {
+  EuiFlexGrid,
+  EuiSpacer,
+  EuiFlexItem,
+  EuiText,
+  EuiAccordion,
+  EuiFlexGroup,
+  EuiPanel,
+  EuiHorizontalRule,
+  EuiTitle,
+} from "@elastic/eui";
 import { ContentPanelActions } from "../../../../components/ContentPanel";
 import { ModalConsumer } from "../../../../components/Modal";
 import { TransformGroupItem, FieldItem, TransformAggItem, TRANSFORM_AGG_TYPE } from "../../../../../models/interfaces";
@@ -85,9 +95,9 @@ export default class ReviewDefinition extends Component<ReviewDefinitionProps> {
       <EuiPanel>
         <EuiFlexGroup>
           <EuiFlexItem>
-            <EuiText size="s">
+            <EuiTitle size="s">
               <h2>Define transforms</h2>
-            </EuiText>
+            </EuiTitle>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <ModalConsumer>
@@ -114,7 +124,7 @@ export default class ReviewDefinition extends Component<ReviewDefinitionProps> {
             id=""
             buttonContent={
               <EuiText size="s">
-                <h3>Sample source index and transform result</h3>
+                <h4>Sample source index and transform result</h4>
               </EuiText>
             }
           >
diff --git a/public/pages/CreateTransform/components/ReviewSchedule/ReviewSchedule.tsx b/public/pages/CreateTransform/components/ReviewSchedule/ReviewSchedule.tsx
index 496e3550d..e8b7b69b9 100644
--- a/public/pages/CreateTransform/components/ReviewSchedule/ReviewSchedule.tsx
+++ b/public/pages/CreateTransform/components/ReviewSchedule/ReviewSchedule.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { Component } from "react";
-import { EuiFlexGrid, EuiFlexItem, EuiText, EuiPanel, EuiFlexGroup, EuiHorizontalRule } from "@elastic/eui";
+import { EuiFlexGrid, EuiFlexItem, EuiText, EuiPanel, EuiFlexGroup, EuiHorizontalRule, EuiTitle } from "@elastic/eui";
 import { ContentPanelActions } from "../../../../components/ContentPanel";
 import { ModalConsumer } from "../../../../components/Modal";
 import { buildIntervalScheduleText } from "../../../CreateRollup/utils/helpers";
@@ -34,9 +34,9 @@ export default class ReviewSchedule extends Component<ReviewScheduleProps> {
       <EuiPanel>
         <EuiFlexGroup>
           <EuiFlexItem>
-            <EuiText size="s">
+            <EuiTitle size="s">
               <h2>Specify schedule</h2>
-            </EuiText>
+            </EuiTitle>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <ModalConsumer>
diff --git a/public/pages/CreateTransform/components/Schedule/Schedule.tsx b/public/pages/CreateTransform/components/Schedule/Schedule.tsx
index 3dc7d98fd..aa8fe33a4 100644
--- a/public/pages/CreateTransform/components/Schedule/Schedule.tsx
+++ b/public/pages/CreateTransform/components/Schedule/Schedule.tsx
@@ -16,7 +16,6 @@ import {
   EuiTitle,
   EuiPanel,
 } from "@elastic/eui";
-import { ContentPanel } from "../../../../components/ContentPanel";
 import { selectInterval } from "../../../Transforms/utils/metadataHelper";
 
 interface ScheduleProps {
@@ -89,9 +88,9 @@ export default class Schedule extends Component<ScheduleProps> {
     } = this.props;
     return (
       <EuiPanel>
-        <EuiText size="s">
+        <EuiTitle size="s">
           <h2>Schedule</h2>
-        </EuiText>
+        </EuiTitle>
         <EuiHorizontalRule margin="xs" />
         <div>
           {!isEdit && (
diff --git a/public/pages/CreateTransform/components/TransformIndices/TransformIndices.tsx b/public/pages/CreateTransform/components/TransformIndices/TransformIndices.tsx
index ce20e5cdd..f09b96549 100644
--- a/public/pages/CreateTransform/components/TransformIndices/TransformIndices.tsx
+++ b/public/pages/CreateTransform/components/TransformIndices/TransformIndices.tsx
@@ -18,6 +18,7 @@ import {
   EuiBadge,
   EuiLink,
   EuiPanel,
+  EuiTitle,
 } from "@elastic/eui";
 import _ from "lodash";
 import EuiCompressedComboBox from "../../../../components/ComboBoxWithoutWarning";
@@ -164,9 +165,9 @@ export default class TransformIndices extends Component<TransformIndicesProps, T
     return (
       <div>
         <EuiPanel>
-          <EuiText size="s">
+          <EuiTitle size="s">
             <h2>Indices</h2>
-          </EuiText>
+          </EuiTitle>
           <EuiHorizontalRule margin="xs" />
           <div>
             {hasAggregation && (
diff --git a/public/pages/CreateTransform/containers/CreateTransformForm/__snapshots__/CreateTransformForm.test.tsx.snap b/public/pages/CreateTransform/containers/CreateTransformForm/__snapshots__/CreateTransformForm.test.tsx.snap
index ecfe6e846..4f93af0a7 100644
--- a/public/pages/CreateTransform/containers/CreateTransformForm/__snapshots__/CreateTransformForm.test.tsx.snap
+++ b/public/pages/CreateTransform/containers/CreateTransformForm/__snapshots__/CreateTransformForm.test.tsx.snap
@@ -166,13 +166,11 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
           <div
             class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
           >
-            <div
-              class="euiText euiText--small"
+            <h2
+              class="euiTitle euiTitle--small"
             >
-              <h2>
-                Job name and description
-              </h2>
-            </div>
+              Job name and description
+            </h2>
             <hr
               class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
             />
@@ -287,13 +285,11 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
             <div
               class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
             >
-              <div
-                class="euiText euiText--small"
+              <h2
+                class="euiTitle euiTitle--small"
               >
-                <h2>
-                  Indices
-                </h2>
-              </div>
+                Indices
+              </h2>
               <hr
                 class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
               />
diff --git a/public/pages/EditRollup/containers/__snapshots__/EditRollup.test.tsx.snap b/public/pages/EditRollup/containers/__snapshots__/EditRollup.test.tsx.snap
index 17ce6ef27..1286d1c8a 100644
--- a/public/pages/EditRollup/containers/__snapshots__/EditRollup.test.tsx.snap
+++ b/public/pages/EditRollup/containers/__snapshots__/EditRollup.test.tsx.snap
@@ -20,13 +20,11 @@ exports[`<EditRollup /> spec renders the component 1`] = `
     <div
       class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
-      <div
-        class="euiText euiText--small"
+      <h2
+        class="euiTitle euiTitle--small"
       >
-        <h2>
-          Job name and description
-        </h2>
-      </div>
+        Job name and description
+      </h2>
     </div>
     <hr
       class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
@@ -141,13 +139,11 @@ exports[`<EditRollup /> spec renders the component 1`] = `
     <div
       class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
-      <div
-        class="euiText euiText--small"
+      <h2
+        class="euiTitle euiTitle--small"
       >
-        <h2>
-          Schedule
-        </h2>
-      </div>
+        Schedule
+      </h2>
     </div>
     <hr
       class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
diff --git a/public/pages/ForceMerge/container/ForceMerge/ForceMerge.tsx b/public/pages/ForceMerge/container/ForceMerge/ForceMerge.tsx
index 7490bb707..91cf1c8f9 100644
--- a/public/pages/ForceMerge/container/ForceMerge/ForceMerge.tsx
+++ b/public/pages/ForceMerge/container/ForceMerge/ForceMerge.tsx
@@ -153,9 +153,9 @@ export default function ForceMergeWrapper(props: Omit<ForceMergeProps, "services
         />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <EuiText size="s">
+        <EuiTitle size="s">
           <h2>Advanced settings</h2>
-        </EuiText>
+        </EuiTitle>
       </EuiFlexItem>
     </EuiFlexGroup>
   );
@@ -215,9 +215,9 @@ export default function ForceMergeWrapper(props: Omit<ForceMergeProps, "services
 
       <EuiPanel>
         <EuiFlexGroup gutterSize="xs" alignItems="center">
-          <EuiText size="s">
+          <EuiTitle size="s">
             <h2>Configure source index</h2>
-          </EuiText>
+          </EuiTitle>
         </EuiFlexGroup>
         <EuiHorizontalRule margin={"xs"} />
         <CustomFormRow
diff --git a/public/pages/ForceMerge/container/ForceMerge/__snapshots__/ForceMerge.test.tsx.snap b/public/pages/ForceMerge/container/ForceMerge/__snapshots__/ForceMerge.test.tsx.snap
index 05ffed4b4..6b5ec7a58 100644
--- a/public/pages/ForceMerge/container/ForceMerge/__snapshots__/ForceMerge.test.tsx.snap
+++ b/public/pages/ForceMerge/container/ForceMerge/__snapshots__/ForceMerge.test.tsx.snap
@@ -35,13 +35,11 @@ exports[`<ForceMerge /> spec renders the component 1`] = `
     <div
       class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
-      <div
-        class="euiText euiText--small"
+      <h2
+        class="euiTitle euiTitle--small"
       >
-        <h2>
-          Configure source index
-        </h2>
-      </div>
+        Configure source index
+      </h2>
     </div>
     <hr
       class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
@@ -167,13 +165,11 @@ exports[`<ForceMerge /> spec renders the component 1`] = `
           <div
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
-            <div
-              class="euiText euiText--small"
+            <h2
+              class="euiTitle euiTitle--small"
             >
-              <h2>
-                Advanced settings
-              </h2>
-            </div>
+              Advanced settings
+            </h2>
           </div>
         </div>
       </div>
diff --git a/public/pages/IndexDetail/containers/IndexDetail/IndexDetail.tsx b/public/pages/IndexDetail/containers/IndexDetail/IndexDetail.tsx
index 722d54f9d..bb5e1c479 100644
--- a/public/pages/IndexDetail/containers/IndexDetail/IndexDetail.tsx
+++ b/public/pages/IndexDetail/containers/IndexDetail/IndexDetail.tsx
@@ -152,9 +152,9 @@ export default function IndexDetail(props: IndexDetailModalProps) {
           <>
             <EuiSpacer size="m" />
             <EuiPanel>
-              <EuiText size="s">
+              <EuiTitle size="s">
                 <h2>Index settings</h2>
-              </EuiText>
+              </EuiTitle>
               <EuiHorizontalRule margin="xs" />
               <EuiSpacer size="s" />
               <IndexFormWrapper {...indexFormReadonlyCommonProps} key={IndicesUpdateMode.settings} mode={IndicesUpdateMode.settings} />
@@ -170,9 +170,9 @@ export default function IndexDetail(props: IndexDetailModalProps) {
           <>
             <EuiSpacer size="m" />
             <EuiPanel>
-              <EuiText size="s">
+              <EuiTitle size="s">
                 <h2>Index mappings</h2>
-              </EuiText>
+              </EuiTitle>
               <EuiCompressedFormRow
                 fullWidth
                 helpText={
@@ -208,9 +208,9 @@ export default function IndexDetail(props: IndexDetailModalProps) {
           <>
             <EuiSpacer size="m" />
             <EuiPanel>
-              <EuiText size="s">
+              <EuiTitle size="s">
                 <h2>Index alias</h2>
-              </EuiText>
+              </EuiTitle>
               <EuiHorizontalRule margin="xs" />
               <IndexFormWrapper {...indexFormReadonlyCommonProps} key={IndicesUpdateMode.alias} mode={IndicesUpdateMode.alias} />
             </EuiPanel>
@@ -264,9 +264,9 @@ export default function IndexDetail(props: IndexDetailModalProps) {
     return (
       <>
         <EuiPanel>
-          <EuiText size="s">
+          <EuiTitle size="s">
             <h2>Overview</h2>
-          </EuiText>
+          </EuiTitle>
           <EuiHorizontalRule margin="xs" />
           <EuiDescriptionList compressed>
             <EuiSpacer size="s" />
diff --git a/public/pages/Notifications/containers/Notifications/Notifications.tsx b/public/pages/Notifications/containers/Notifications/Notifications.tsx
index ed914e21b..8df21bee5 100644
--- a/public/pages/Notifications/containers/Notifications/Notifications.tsx
+++ b/public/pages/Notifications/containers/Notifications/Notifications.tsx
@@ -223,7 +223,7 @@ const Notifications = (props: NotificationsProps) => {
               </CustomFormRow>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiSmallButton iconType="popout" href="notifications-dashboards#/channels" target="_blank">
+              <EuiSmallButton iconType="popout" href="notifications-dashboards#/channels" target="_blank" iconSide="right">
                 Manage channels
               </EuiSmallButton>
             </EuiFlexItem>
@@ -242,9 +242,9 @@ const Notifications = (props: NotificationsProps) => {
         </EuiPanel>
       ) : (
         <EuiPanel>
-          <EuiText size="s">
+          <EuiTitle size="s">
             <h2>Defaults for index operations</h2>
-          </EuiText>
+          </EuiTitle>
           {submitClicked && allErrors.length ? (
             <EuiCallOut iconType="iInCircle" color="danger" title="Address the following error(s) in the form">
               <ul>
diff --git a/public/pages/Notifications/containers/Notifications/__snapshots__/Notifications.test.tsx.snap b/public/pages/Notifications/containers/Notifications/__snapshots__/Notifications.test.tsx.snap
index 8fd8635bc..843133ce9 100644
--- a/public/pages/Notifications/containers/Notifications/__snapshots__/Notifications.test.tsx.snap
+++ b/public/pages/Notifications/containers/Notifications/__snapshots__/Notifications.test.tsx.snap
@@ -41,7 +41,7 @@ exports[`<Notifications /> spec View without permission 1`] = `
         target="_blank"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButtonContent euiButtonContent--iconRight euiButton__content"
         >
           EuiIconMock
           <span
@@ -131,7 +131,7 @@ exports[`<Notifications /> spec renders 1`] = `
         target="_blank"
       >
         <span
-          class="euiButtonContent euiButton__content"
+          class="euiButtonContent euiButtonContent--iconRight euiButton__content"
         >
           EuiIconMock
           <span
@@ -149,13 +149,11 @@ exports[`<Notifications /> spec renders 1`] = `
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
   >
-    <div
-      class="euiText euiText--small"
+    <h2
+      class="euiTitle euiTitle--small"
     >
-      <h2>
-        Defaults for index operations
-      </h2>
-    </div>
+      Defaults for index operations
+    </h2>
     <div
       class="euiSpacer euiSpacer--l"
     />
diff --git a/public/pages/PolicyDetails/components/PolicySettings/PolicySettings.tsx b/public/pages/PolicyDetails/components/PolicySettings/PolicySettings.tsx
index 3d96f90cd..9b4bc6a5e 100644
--- a/public/pages/PolicyDetails/components/PolicySettings/PolicySettings.tsx
+++ b/public/pages/PolicyDetails/components/PolicySettings/PolicySettings.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { Component } from "react";
-import { EuiLink, EuiFlexGrid, EuiSpacer, EuiFlexItem, EuiText, EuiPanel, EuiFlexGroup, EuiHorizontalRule } from "@elastic/eui";
+import { EuiLink, EuiFlexGrid, EuiSpacer, EuiFlexItem, EuiText, EuiPanel, EuiFlexGroup, EuiHorizontalRule, EuiTitle } from "@elastic/eui";
 import { ContentPanel } from "../../../../components/ContentPanel";
 import { ModalConsumer } from "../../../../components/Modal";
 import { ErrorNotification, ISMTemplate } from "../../../../../models/interfaces";
@@ -52,9 +52,9 @@ export default class PolicySettings extends Component<PolicySettingsProps, Polic
     return (
       <EuiPanel>
         <EuiFlexGroup gutterSize="xs" alignItems="center">
-          <EuiText size="s">
+          <EuiTitle size="s">
             <h2>{`Policy settings`}</h2>
-          </EuiText>
+          </EuiTitle>
         </EuiFlexGroup>
         <EuiHorizontalRule margin={"xs"} />
         <div>
diff --git a/public/pages/PolicyDetails/components/PolicySettings/__snapshots__/PolicySettings.test.tsx.snap b/public/pages/PolicyDetails/components/PolicySettings/__snapshots__/PolicySettings.test.tsx.snap
index 120041937..297427a79 100644
--- a/public/pages/PolicyDetails/components/PolicySettings/__snapshots__/PolicySettings.test.tsx.snap
+++ b/public/pages/PolicyDetails/components/PolicySettings/__snapshots__/PolicySettings.test.tsx.snap
@@ -7,13 +7,11 @@ exports[`<PolicySettings /> spec renders the component 1`] = `
   <div
     class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
   >
-    <div
-      class="euiText euiText--small"
+    <h2
+      class="euiTitle euiTitle--small"
     >
-      <h2>
-        Policy settings
-      </h2>
-    </div>
+      Policy settings
+    </h2>
   </div>
   <hr
     class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
diff --git a/public/pages/PolicyDetails/containers/PolicyDetails/PolicyDetails.tsx b/public/pages/PolicyDetails/containers/PolicyDetails/PolicyDetails.tsx
index d71ff7de9..a7dfd3bd8 100644
--- a/public/pages/PolicyDetails/containers/PolicyDetails/PolicyDetails.tsx
+++ b/public/pages/PolicyDetails/containers/PolicyDetails/PolicyDetails.tsx
@@ -331,9 +331,9 @@ export class PolicyDetails extends Component<PolicyDetailsProps, PolicyDetailsSt
         <EuiSpacer />
         <EuiPanel>
           <EuiFlexGroup gutterSize="xs" alignItems="center">
-            <EuiText size="s">
+            <EuiTitle size="s">
               <h2>{`ISM Templates (${convertedISMTemplates.length})`}</h2>
-            </EuiText>
+            </EuiTitle>
           </EuiFlexGroup>
           <EuiHorizontalRule margin={"xs"} />
           <EuiBasicTable items={convertedISMTemplates} columns={columns} pagination={pagination} onChange={this.onTableChange} />
diff --git a/public/pages/Reindex/components/CreateIndexFlyout/__snapshots__/CreateIndexFlyout.test.tsx.snap b/public/pages/Reindex/components/CreateIndexFlyout/__snapshots__/CreateIndexFlyout.test.tsx.snap
index 920bf5b24..ce0b7eae4 100644
--- a/public/pages/Reindex/components/CreateIndexFlyout/__snapshots__/CreateIndexFlyout.test.tsx.snap
+++ b/public/pages/Reindex/components/CreateIndexFlyout/__snapshots__/CreateIndexFlyout.test.tsx.snap
@@ -56,15 +56,11 @@ Object {
                 <div
                   class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
                 >
-                  <div
-                    class="euiText euiText--small"
+                  <h2
+                    class="euiTitle euiTitle--small"
                   >
-                     
-                    <h2>
-                      Define index
-                    </h2>
-                     
-                  </div>
+                    Define index
+                  </h2>
                   <hr
                     class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
                   />
@@ -234,15 +230,11 @@ Object {
                 <div
                   class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
                 >
-                  <div
-                    class="euiText euiText--small"
+                  <h2
+                    class="euiTitle euiTitle--small"
                   >
-                     
-                    <h2>
-                      Index settings
-                    </h2>
-                     
-                  </div>
+                    Index settings
+                  </h2>
                   <hr
                     class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
                   />
@@ -648,16 +640,14 @@ Object {
                 <div
                   class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
                 >
-                  <div
-                    class="euiText euiText--small"
+                  <h2
+                    class="euiTitle euiTitle--small"
                   >
-                    <h2>
-                      Index mapping
-                      <i>
-                         – optional
-                      </i>
-                    </h2>
-                  </div>
+                    Index mapping
+                    <i>
+                       – optional
+                    </i>
+                  </h2>
                   <div
                     class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                     id="some_html_id-row"
diff --git a/public/pages/Reindex/container/Reindex/Reindex.tsx b/public/pages/Reindex/container/Reindex/Reindex.tsx
index fc9a8e4b5..9de1c154d 100644
--- a/public/pages/Reindex/container/Reindex/Reindex.tsx
+++ b/public/pages/Reindex/container/Reindex/Reindex.tsx
@@ -533,9 +533,9 @@ class Reindex extends Component<ReindexProps, ReindexState> {
           />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiText size="s">
+          <EuiTitle size="s">
             <h2>Advanced settings</h2>
-          </EuiText>
+          </EuiTitle>
         </EuiFlexItem>
       </EuiFlexGroup>
     );
@@ -577,9 +577,9 @@ class Reindex extends Component<ReindexProps, ReindexState> {
       return (
         <>
           <EuiPanel>
-            <EuiText size="s">
+            <EuiTitle size="s">
               <h2>Configure source index</h2>
-            </EuiText>
+            </EuiTitle>
             <EuiHorizontalRule margin="xs" />
             <EuiSpacer size="s" />
             <CustomFormRow
@@ -663,9 +663,9 @@ class Reindex extends Component<ReindexProps, ReindexState> {
           <EuiSpacer />
 
           <EuiPanel>
-            <EuiText size="s">
+            <EuiTitle size="s">
               <h2>Configure destination index</h2>
-            </EuiText>
+            </EuiTitle>
             <EuiHorizontalRule margin="xs" />
             <EuiSpacer size="s" />
             <EuiFlexGroup alignItems="flexEnd">
diff --git a/public/pages/Reindex/container/Reindex/__snapshots__/Reindex.test.tsx.snap b/public/pages/Reindex/container/Reindex/__snapshots__/Reindex.test.tsx.snap
index 5f6a8f974..a4b3f6ee6 100644
--- a/public/pages/Reindex/container/Reindex/__snapshots__/Reindex.test.tsx.snap
+++ b/public/pages/Reindex/container/Reindex/__snapshots__/Reindex.test.tsx.snap
@@ -49,13 +49,11 @@ exports[`<Reindex /> spec renders the component 1`] = `
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
   >
-    <div
-      class="euiText euiText--small"
+    <h2
+      class="euiTitle euiTitle--small"
     >
-      <h2>
-        Configure source index
-      </h2>
-    </div>
+      Configure source index
+    </h2>
     <hr
       class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
     />
@@ -228,13 +226,11 @@ exports[`<Reindex /> spec renders the component 1`] = `
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
   >
-    <div
-      class="euiText euiText--small"
+    <h2
+      class="euiTitle euiTitle--small"
     >
-      <h2>
-        Configure destination index
-      </h2>
-    </div>
+      Configure destination index
+    </h2>
     <hr
       class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
     />
@@ -376,13 +372,11 @@ exports[`<Reindex /> spec renders the component 1`] = `
       <div
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
-        <div
-          class="euiText euiText--small"
+        <h2
+          class="euiTitle euiTitle--small"
         >
-          <h2>
-            Advanced settings
-          </h2>
-        </div>
+          Advanced settings
+        </h2>
       </div>
     </div>
   </div>
diff --git a/public/pages/Rollover/containers/Rollover/Rollover.tsx b/public/pages/Rollover/containers/Rollover/Rollover.tsx
index 2955a8053..7016ca141 100644
--- a/public/pages/Rollover/containers/Rollover/Rollover.tsx
+++ b/public/pages/Rollover/containers/Rollover/Rollover.tsx
@@ -266,9 +266,9 @@ export default function Rollover(props: RolloverProps) {
       )}
       <EuiPanel>
         <EuiFlexGroup gutterSize="xs" alignItems="center">
-          <EuiText size="s">
+          <EuiTitle size="s">
             <h2>Configure source</h2>
-          </EuiText>
+          </EuiTitle>
         </EuiFlexGroup>
         <EuiHorizontalRule margin={"xs"} />
         {sourceType === "alias" && filterByMinimatch(tempValue.source || "", SYSTEM_ALIAS) ? (
diff --git a/public/pages/Rollover/containers/Rollover/__snapshots__/Rollover.test.tsx.snap b/public/pages/Rollover/containers/Rollover/__snapshots__/Rollover.test.tsx.snap
index ebbe7189a..4304c80e9 100644
--- a/public/pages/Rollover/containers/Rollover/__snapshots__/Rollover.test.tsx.snap
+++ b/public/pages/Rollover/containers/Rollover/__snapshots__/Rollover.test.tsx.snap
@@ -33,13 +33,11 @@ exports[`container <Rollover /> spec render the component 1`] = `
     <div
       class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
-      <div
-        class="euiText euiText--small"
+      <h2
+        class="euiTitle euiTitle--small"
       >
-        <h2>
-          Configure source
-        </h2>
-      </div>
+        Configure source
+      </h2>
     </div>
     <hr
       class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
diff --git a/public/pages/RollupDetails/components/AggregationAndMetricsSettings/AggregationAndMetricsSettings.tsx b/public/pages/RollupDetails/components/AggregationAndMetricsSettings/AggregationAndMetricsSettings.tsx
index 83360c416..6b42c8545 100644
--- a/public/pages/RollupDetails/components/AggregationAndMetricsSettings/AggregationAndMetricsSettings.tsx
+++ b/public/pages/RollupDetails/components/AggregationAndMetricsSettings/AggregationAndMetricsSettings.tsx
@@ -18,6 +18,7 @@ import {
   EuiTableSortingType,
   EuiHorizontalRule,
   EuiPanel,
+  EuiTitle,
 } from "@elastic/eui";
 import { ContentPanel } from "../../../../components/ContentPanel";
 import { DEFAULT_PAGE_SIZE_OPTIONS } from "../../../Rollups/utils/constants";
@@ -136,9 +137,9 @@ export default class AggregationAndMetricsSettings extends Component<
       <EuiPanel>
         <EuiFlexGroup gutterSize="xs">
           <EuiFlexItem>
-            <EuiText size="s">
+            <EuiTitle size="s">
               <h2>{AGGREGATION_AND_METRIC_SETTINGS}</h2>
-            </EuiText>
+            </EuiTitle>
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiHorizontalRule margin={"xs"} />
diff --git a/public/pages/RollupDetails/components/GeneralInformation/GeneralInformation.tsx b/public/pages/RollupDetails/components/GeneralInformation/GeneralInformation.tsx
index 7747d00c3..a3ea869e6 100644
--- a/public/pages/RollupDetails/components/GeneralInformation/GeneralInformation.tsx
+++ b/public/pages/RollupDetails/components/GeneralInformation/GeneralInformation.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { Component } from "react";
-import { EuiFlexGrid, EuiSpacer, EuiFlexItem, EuiText, EuiFlexGroup, EuiHorizontalRule, EuiPanel } from "@elastic/eui";
+import { EuiFlexGrid, EuiSpacer, EuiFlexItem, EuiText, EuiFlexGroup, EuiHorizontalRule, EuiPanel, EuiTitle } from "@elastic/eui";
 import { ContentPanel, ContentPanelActions } from "../../../../components/ContentPanel";
 import { ModalConsumer } from "../../../../components/Modal";
 
@@ -50,9 +50,9 @@ export default class GeneralInformation extends Component<GeneralInformationProp
       <EuiPanel>
         <EuiFlexGroup gutterSize="xs">
           <EuiFlexItem>
-            <EuiText size="s">
+            <EuiTitle size="s">
               <h2>General information</h2>
-            </EuiText>
+            </EuiTitle>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <ModalConsumer>{() => <ContentPanelActions actions={useActions} />}</ModalConsumer>
diff --git a/public/pages/RollupDetails/components/RollupStatus/RollupStatus.tsx b/public/pages/RollupDetails/components/RollupStatus/RollupStatus.tsx
index 90b5e10c9..8d2153d2b 100644
--- a/public/pages/RollupDetails/components/RollupStatus/RollupStatus.tsx
+++ b/public/pages/RollupDetails/components/RollupStatus/RollupStatus.tsx
@@ -4,7 +4,7 @@
  */
 
 import React from "react";
-import { EuiFlexGrid, EuiSpacer, EuiFlexItem, EuiText, EuiFlexGroup, EuiHorizontalRule, EuiPanel } from "@elastic/eui";
+import { EuiFlexGrid, EuiSpacer, EuiFlexItem, EuiText, EuiFlexGroup, EuiHorizontalRule, EuiPanel, EuiTitle } from "@elastic/eui";
 import { ContentPanel } from "../../../../components/ContentPanel";
 import { RollupMetadata } from "../../../../../models/interfaces";
 import { renderTime } from "../../../Rollups/utils/helpers";
@@ -18,9 +18,9 @@ const RollupStatus = ({ metadata }: RollupStatusProps) => (
   <EuiPanel>
     <EuiFlexGroup gutterSize="xs">
       <EuiFlexItem>
-        <EuiText size="s">
+        <EuiTitle size="s">
           <h2>Rollup status</h2>
-        </EuiText>
+        </EuiTitle>
       </EuiFlexItem>
     </EuiFlexGroup>
     <EuiHorizontalRule margin={"xs"} />
diff --git a/public/pages/ShrinkIndex/container/ShrinkIndex/ShrinkIndex.tsx b/public/pages/ShrinkIndex/container/ShrinkIndex/ShrinkIndex.tsx
index 8f2e846bd..e75dc484d 100644
--- a/public/pages/ShrinkIndex/container/ShrinkIndex/ShrinkIndex.tsx
+++ b/public/pages/ShrinkIndex/container/ShrinkIndex/ShrinkIndex.tsx
@@ -694,9 +694,9 @@ class ShrinkIndex extends Component<ShrinkIndexProps, ShrinkIndexState> {
             withPanel
             panelProps={{
               title: (
-                <EuiText size="s">
+                <EuiTitle size="s">
                   <h2>Advanced settings</h2>
-                </EuiText>
+                </EuiTitle>
               ),
               titleSize: "s",
             }}
diff --git a/public/pages/ShrinkIndex/container/ShrinkIndex/__snapshots__/ShrinkIndex.test.tsx.snap b/public/pages/ShrinkIndex/container/ShrinkIndex/__snapshots__/ShrinkIndex.test.tsx.snap
index dfc88fc2e..b5834ac19 100644
--- a/public/pages/ShrinkIndex/container/ShrinkIndex/__snapshots__/ShrinkIndex.test.tsx.snap
+++ b/public/pages/ShrinkIndex/container/ShrinkIndex/__snapshots__/ShrinkIndex.test.tsx.snap
@@ -49,13 +49,11 @@ exports[`<Shrink index /> spec renders the component 1`] = `
     <div
       class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
     >
-      <div
-        class="euiText euiText--small"
+      <h2
+        class="euiTitle euiTitle--small"
       >
-        <h2>
-          Source index details
-        </h2>
-      </div>
+        Source index details
+      </h2>
       <hr
         class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
       />
@@ -712,13 +710,11 @@ exports[`<Shrink index /> spec renders the component 1`] = `
                 <div
                   class="euiFlexItem"
                 >
-                  <div
-                    class="euiText euiText--small"
+                  <h2
+                    class="euiTitle euiTitle--small"
                   >
-                    <h2>
-                      Advanced settings
-                    </h2>
-                  </div>
+                    Advanced settings
+                  </h2>
                 </div>
               </div>
             </span>
diff --git a/public/pages/SnapshotPolicyDetails/containers/SnapshotPolicyDetails/SnapshotPolicyDetails.tsx b/public/pages/SnapshotPolicyDetails/containers/SnapshotPolicyDetails/SnapshotPolicyDetails.tsx
index eedef193d..a9aea2cae 100644
--- a/public/pages/SnapshotPolicyDetails/containers/SnapshotPolicyDetails/SnapshotPolicyDetails.tsx
+++ b/public/pages/SnapshotPolicyDetails/containers/SnapshotPolicyDetails/SnapshotPolicyDetails.tsx
@@ -450,9 +450,9 @@ export class SnapshotPolicyDetails extends MDSEnabledComponent<SnapshotPolicyDet
 
         <EuiPanel>
           <EuiFlexGroup gutterSize="xs" alignItems="center">
-            <EuiText size="s">
+            <EuiTitle size="s">
               <h2>Policy settings</h2>
-            </EuiText>
+            </EuiTitle>
           </EuiFlexGroup>
           <EuiHorizontalRule margin={"xs"} />
           <EuiFlexGrid columns={3}>
@@ -487,9 +487,9 @@ export class SnapshotPolicyDetails extends MDSEnabledComponent<SnapshotPolicyDet
 
         <EuiPanel>
           <EuiFlexGroup gutterSize="xs" alignItems="center">
-            <EuiText size="s">
+            <EuiTitle size="s">
               <h2>Snapshot schedule</h2>
-            </EuiText>
+            </EuiTitle>
           </EuiFlexGroup>
           <EuiHorizontalRule margin={"xs"} />
           <EuiFlexGrid columns={3}>
@@ -508,9 +508,9 @@ export class SnapshotPolicyDetails extends MDSEnabledComponent<SnapshotPolicyDet
 
         <EuiPanel>
           <EuiFlexGroup gutterSize="xs" alignItems="center">
-            <EuiText size="s">
+            <EuiTitle size="s">
               <h2>Snapshot retention period</h2>
-            </EuiText>
+            </EuiTitle>
           </EuiFlexGroup>
           <EuiHorizontalRule margin={"xs"} />
           <EuiFlexGrid columns={3}>
@@ -542,9 +542,9 @@ export class SnapshotPolicyDetails extends MDSEnabledComponent<SnapshotPolicyDet
 
         <EuiPanel>
           <EuiFlexGroup gutterSize="xs" alignItems="center">
-            <EuiText size="s">
+            <EuiTitle size="s">
               <h2>Notifications</h2>
-            </EuiText>
+            </EuiTitle>
           </EuiFlexGroup>
           <EuiHorizontalRule margin={"xs"} />
           <EuiFlexGrid columns={2}>
@@ -564,9 +564,9 @@ export class SnapshotPolicyDetails extends MDSEnabledComponent<SnapshotPolicyDet
         <EuiPanel>
           <EuiFlexGroup gutterSize="xs" alignItems="center">
             <EuiFlexItem>
-              <EuiText size="s">
+              <EuiTitle size="s">
                 <h2>Last creation/deletion</h2>
-              </EuiText>
+              </EuiTitle>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <EuiSmallButton iconType="refresh" onClick={() => this.getPolicy(policyId)} data-test-subj="refreshButton">
diff --git a/public/pages/SplitIndex/components/SplitIndexForm/SplitIndexForm.tsx b/public/pages/SplitIndex/components/SplitIndexForm/SplitIndexForm.tsx
index e3709dc68..ad60ba1cc 100644
--- a/public/pages/SplitIndex/components/SplitIndexForm/SplitIndexForm.tsx
+++ b/public/pages/SplitIndex/components/SplitIndexForm/SplitIndexForm.tsx
@@ -13,6 +13,7 @@ import {
   EuiText,
   EuiPanel,
   EuiHorizontalRule,
+  EuiTitle,
 } from "@elastic/eui";
 import FormGenerator, { IField, IFormGeneratorRef, IFieldComponentProps } from "../../../../components/FormGenerator";
 import { IndexItem } from "../../../../../models/interfaces";
@@ -261,9 +262,9 @@ export default class SplitIndexForm extends Component<SplitIndexComponentProps>
           withPanel
           panelProps={{
             title: (
-              <EuiText size="s">
+              <EuiTitle size="s">
                 <h2>Advanced settings</h2>
-              </EuiText>
+              </EuiTitle>
             ),
             titleSize: "s",
           }}
diff --git a/public/pages/Transforms/components/ConfigureTransform/Configure.tsx b/public/pages/Transforms/components/ConfigureTransform/Configure.tsx
index 07e53e3f0..e0d194aa7 100644
--- a/public/pages/Transforms/components/ConfigureTransform/Configure.tsx
+++ b/public/pages/Transforms/components/ConfigureTransform/Configure.tsx
@@ -14,6 +14,7 @@ import {
   EuiFlexItem,
   EuiPanel,
   EuiHorizontalRule,
+  EuiTitle,
 } from "@elastic/eui";
 
 interface ConfigureTransformProps {
@@ -36,10 +37,9 @@ const ConfigureTransform = ({
   size,
 }: ConfigureTransformProps) => (
   <EuiPanel>
-    <EuiText size="s">
-      {" "}
-      <h2>Job name and description</h2>{" "}
-    </EuiText>
+    <EuiTitle size="s">
+      <h2>Job name and description</h2>
+    </EuiTitle>
     <EuiHorizontalRule margin="xs" />
     <div>
       <EuiSpacer size="s" />
diff --git a/public/pages/Transforms/components/GeneralInformation/GeneralInformation.tsx b/public/pages/Transforms/components/GeneralInformation/GeneralInformation.tsx
index 9f60c8a61..ed588e38c 100644
--- a/public/pages/Transforms/components/GeneralInformation/GeneralInformation.tsx
+++ b/public/pages/Transforms/components/GeneralInformation/GeneralInformation.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { Component } from "react";
-import { EuiFlexGrid, EuiSpacer, EuiFlexItem, EuiText, EuiFlexGroup, EuiPanel, EuiHorizontalRule } from "@elastic/eui";
+import { EuiFlexGrid, EuiSpacer, EuiFlexItem, EuiText, EuiFlexGroup, EuiPanel, EuiHorizontalRule, EuiTitle } from "@elastic/eui";
 import { ContentPanelActions } from "../../../../components/ContentPanel";
 import { ModalConsumer } from "../../../../components/Modal";
 import { getUISettings } from "../../../../services/Services";
@@ -54,9 +54,9 @@ export default class GeneralInformation extends Component<GeneralInformationProp
         <EuiPanel>
           <EuiFlexGroup>
             <EuiFlexItem>
-              <EuiText size="s">
+              <EuiTitle size="s">
                 <h2>General information</h2>
-              </EuiText>
+              </EuiTitle>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               {!useUpdatedUX ? (
diff --git a/public/pages/Transforms/components/Indices/Indices.tsx b/public/pages/Transforms/components/Indices/Indices.tsx
index 79895643a..1f337b758 100644
--- a/public/pages/Transforms/components/Indices/Indices.tsx
+++ b/public/pages/Transforms/components/Indices/Indices.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { Component } from "react";
-import { EuiCodeEditor, EuiSpacer, EuiText, EuiPanel, EuiHorizontalRule } from "@elastic/eui";
+import { EuiCodeEditor, EuiSpacer, EuiText, EuiPanel, EuiHorizontalRule, EuiTitle } from "@elastic/eui";
 
 interface IndicesProps {
   sourceIndex: string;
@@ -23,10 +23,9 @@ export default class Indices extends Component<IndicesProps> {
 
     return (
       <EuiPanel>
-        <EuiText size="s">
-          {" "}
-          <h2>Indices</h2>{" "}
-        </EuiText>
+        <EuiTitle size="s">
+          <h2>Indices</h2>
+        </EuiTitle>
         <EuiHorizontalRule margin="xs" />
         <div>
           <EuiText size="s">
diff --git a/public/pages/Transforms/components/Schedule/Schedule.tsx b/public/pages/Transforms/components/Schedule/Schedule.tsx
index ae3d2f824..2e496d88e 100644
--- a/public/pages/Transforms/components/Schedule/Schedule.tsx
+++ b/public/pages/Transforms/components/Schedule/Schedule.tsx
@@ -13,6 +13,7 @@ import {
   EuiText,
   EuiPanel,
   EuiHorizontalRule,
+  EuiTitle,
 } from "@elastic/eui";
 // @ts-ignore
 import { htmlIdGenerator } from "@elastic/eui/lib/services";
@@ -58,10 +59,9 @@ export default class Schedule extends Component<ScheduleProps> {
     } = this.props;
     return (
       <EuiPanel>
-        <EuiText size="s">
-          {" "}
-          <h2>Schedule</h2>{" "}
-        </EuiText>
+        <EuiTitle size="s">
+          <h2>Schedule</h2>
+        </EuiTitle>
         <EuiHorizontalRule margin="xs" />
         <div>
           <EuiCompressedCheckbox
diff --git a/public/pages/Transforms/components/TransformStatus/TransformStatus.tsx b/public/pages/Transforms/components/TransformStatus/TransformStatus.tsx
index e80e221d6..3f609e586 100644
--- a/public/pages/Transforms/components/TransformStatus/TransformStatus.tsx
+++ b/public/pages/Transforms/components/TransformStatus/TransformStatus.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { Component } from "react";
-import { EuiFlexGrid, EuiSpacer, EuiFlexItem, EuiText, EuiPanel, EuiHorizontalRule } from "@elastic/eui";
+import { EuiFlexGrid, EuiSpacer, EuiFlexItem, EuiText, EuiPanel, EuiHorizontalRule, EuiTitle } from "@elastic/eui";
 import { TransformMetadata } from "../../../../../models/interfaces";
 import { renderStatus } from "../../utils/metadataHelper";
 
@@ -21,9 +21,9 @@ export default class TransformStatus extends Component<TransformStatusProps> {
     const { metadata } = this.props;
     return (
       <EuiPanel>
-        <EuiText size="s">
+        <EuiTitle size="s">
           <h2>Transform Status</h2>
-        </EuiText>
+        </EuiTitle>
         <EuiHorizontalRule margin="xs" />
         <div>
           <EuiSpacer size="s" />
diff --git a/public/pages/Transforms/containers/Transforms/TransformSettings.tsx b/public/pages/Transforms/containers/Transforms/TransformSettings.tsx
index 46f134076..0e7ac4d5d 100644
--- a/public/pages/Transforms/containers/Transforms/TransformSettings.tsx
+++ b/public/pages/Transforms/containers/Transforms/TransformSettings.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { Component } from "react";
-import { EuiSpacer, EuiText, EuiAccordion, EuiFlexGrid, EuiFlexItem, EuiPanel, EuiHorizontalRule } from "@elastic/eui";
+import { EuiSpacer, EuiText, EuiAccordion, EuiFlexGrid, EuiFlexItem, EuiPanel, EuiHorizontalRule, EuiTitle } from "@elastic/eui";
 // @ts-ignore
 import { htmlIdGenerator } from "@elastic/eui/lib/services";
 import { TransformService } from "../../../../services";
@@ -89,9 +89,9 @@ export default class TransformSettings extends Component<TransformSettingsProps,
 
     return (
       <EuiPanel>
-        <EuiText size="s">
+        <EuiTitle size="s">
           <h2>Transform Settings</h2>
-        </EuiText>
+        </EuiTitle>
         <EuiHorizontalRule margin="xs" />
         <div>
           <EuiSpacer size="m" />
@@ -107,7 +107,7 @@ export default class TransformSettings extends Component<TransformSettingsProps,
             buttonContent={
               <EuiText size="s">
                 {" "}
-                <h3>Sample source index and transform result</h3>{" "}
+                <h4>Sample source index and transform result</h4>{" "}
               </EuiText>
             }
             onClick={this.onClick}
diff --git a/public/pages/Transforms/containers/Transforms/__snapshots__/EditTransform.test.tsx.snap b/public/pages/Transforms/containers/Transforms/__snapshots__/EditTransform.test.tsx.snap
index 058d8f909..b5e3f2691 100644
--- a/public/pages/Transforms/containers/Transforms/__snapshots__/EditTransform.test.tsx.snap
+++ b/public/pages/Transforms/containers/Transforms/__snapshots__/EditTransform.test.tsx.snap
@@ -17,15 +17,11 @@ exports[`<EditTransform /> spec renders the component 1`] = `
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
   >
-    <div
-      class="euiText euiText--small"
+    <h2
+      class="euiTitle euiTitle--small"
     >
-       
-      <h2>
-        Job name and description
-      </h2>
-       
-    </div>
+      Job name and description
+    </h2>
     <hr
       class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
     />
@@ -143,15 +139,11 @@ exports[`<EditTransform /> spec renders the component 1`] = `
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
   >
-    <div
-      class="euiText euiText--small"
+    <h2
+      class="euiTitle euiTitle--small"
     >
-       
-      <h2>
-        Indices
-      </h2>
-       
-    </div>
+      Indices
+    </h2>
     <hr
       class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
     />
@@ -304,15 +296,11 @@ exports[`<EditTransform /> spec renders the component 1`] = `
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
   >
-    <div
-      class="euiText euiText--small"
+    <h2
+      class="euiTitle euiTitle--small"
     >
-       
-      <h2>
-        Schedule
-      </h2>
-       
-    </div>
+      Schedule
+    </h2>
     <hr
       class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
     />
diff --git a/public/pages/VisualCreatePolicy/components/ChannelNotification/ChannelNotification.tsx b/public/pages/VisualCreatePolicy/components/ChannelNotification/ChannelNotification.tsx
index b9746c209..dd0011b3c 100644
--- a/public/pages/VisualCreatePolicy/components/ChannelNotification/ChannelNotification.tsx
+++ b/public/pages/VisualCreatePolicy/components/ChannelNotification/ChannelNotification.tsx
@@ -59,7 +59,7 @@ const ChannelNotification = ({
           />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiSmallButton iconType="popout" href="notifications-dashboards#/channels" target="_blank">
+          <EuiSmallButton iconType="popout" href="notifications-dashboards#/channels" target="_blank" iconSide="right">
             Manage channels
           </EuiSmallButton>
         </EuiFlexItem>
diff --git a/public/pages/VisualCreatePolicy/components/ISMTemplates/ISMTemplates.tsx b/public/pages/VisualCreatePolicy/components/ISMTemplates/ISMTemplates.tsx
index 336c12dfb..f8430aa23 100644
--- a/public/pages/VisualCreatePolicy/components/ISMTemplates/ISMTemplates.tsx
+++ b/public/pages/VisualCreatePolicy/components/ISMTemplates/ISMTemplates.tsx
@@ -14,6 +14,7 @@ import {
   EuiLink,
   EuiPanel,
   EuiHorizontalRule,
+  EuiTitle,
 } from "@elastic/eui";
 import { ContentPanel } from "../../../../components/ContentPanel";
 import "brace/theme/github";
@@ -47,9 +48,9 @@ const ISMTemplates = ({ policy, onChangePolicy }: ISMTemplatesProps) => {
     <EuiPanel>
       <EuiFlexGroup gutterSize="xs" alignItems="center">
         <EuiFlexItem grow={false}>
-          <EuiText size="s">
+          <EuiTitle size="s">
             <h2>ISM templates</h2>
-          </EuiText>
+          </EuiTitle>
         </EuiFlexItem>
         <EuiFlexItem>
           <EuiText color="subdued">
diff --git a/public/pages/VisualCreatePolicy/components/ISMTemplates/__snapshots__/ISMTemplates.test.tsx.snap b/public/pages/VisualCreatePolicy/components/ISMTemplates/__snapshots__/ISMTemplates.test.tsx.snap
index 4d56f7acf..090f1dab9 100644
--- a/public/pages/VisualCreatePolicy/components/ISMTemplates/__snapshots__/ISMTemplates.test.tsx.snap
+++ b/public/pages/VisualCreatePolicy/components/ISMTemplates/__snapshots__/ISMTemplates.test.tsx.snap
@@ -10,13 +10,11 @@ exports[`<ISMTemplates /> spec renders the component 1`] = `
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
-      <div
-        class="euiText euiText--small"
+      <h2
+        class="euiTitle euiTitle--small"
       >
-        <h2>
-          ISM templates
-        </h2>
-      </div>
+        ISM templates
+      </h2>
     </div>
     <div
       class="euiFlexItem"
diff --git a/public/pages/VisualCreatePolicy/components/PolicyInfo/PolicyInfo.tsx b/public/pages/VisualCreatePolicy/components/PolicyInfo/PolicyInfo.tsx
index 8626cea33..ba561994a 100644
--- a/public/pages/VisualCreatePolicy/components/PolicyInfo/PolicyInfo.tsx
+++ b/public/pages/VisualCreatePolicy/components/PolicyInfo/PolicyInfo.tsx
@@ -13,8 +13,8 @@ import {
   EuiFlexGroup,
   EuiText,
   EuiHorizontalRule,
+  EuiTitle,
 } from "@elastic/eui";
-import { ContentPanel } from "../../../../components/ContentPanel";
 import "brace/theme/github";
 import "brace/mode/json";
 import EuiFormCustomLabel from "../EuiFormCustomLabel";
@@ -31,9 +31,9 @@ interface PolicyInfoProps {
 const PolicyInfo = ({ isEdit, policyId, policyIdError, description, onChangePolicyId, onChangeDescription }: PolicyInfoProps) => (
   <EuiPanel>
     <EuiFlexGroup gutterSize="xs" alignItems="center">
-      <EuiText size="s">
+      <EuiTitle size="s">
         <h2>{`Policy info`}</h2>
-      </EuiText>
+      </EuiTitle>
     </EuiFlexGroup>
     <EuiHorizontalRule margin={"xs"} />
     <EuiFormCustomLabel title="Policy ID" helpText="Specify a unique and descriptive ID that is easy to recognize and remember." />
diff --git a/public/pages/VisualCreatePolicy/components/PolicyInfo/__snapshots__/PolicyInfo.test.tsx.snap b/public/pages/VisualCreatePolicy/components/PolicyInfo/__snapshots__/PolicyInfo.test.tsx.snap
index 5946ed290..15a45c1db 100644
--- a/public/pages/VisualCreatePolicy/components/PolicyInfo/__snapshots__/PolicyInfo.test.tsx.snap
+++ b/public/pages/VisualCreatePolicy/components/PolicyInfo/__snapshots__/PolicyInfo.test.tsx.snap
@@ -7,13 +7,11 @@ exports[`<PolicyInfo /> spec renders the component 1`] = `
   <div
     class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
   >
-    <div
-      class="euiText euiText--small"
+    <h2
+      class="euiTitle euiTitle--small"
     >
-      <h2>
-        Policy info
-      </h2>
-    </div>
+      Policy info
+    </h2>
   </div>
   <hr
     class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
diff --git a/public/pages/VisualCreatePolicy/components/States/States.tsx b/public/pages/VisualCreatePolicy/components/States/States.tsx
index 68ac1d6cc..65e4b0531 100644
--- a/public/pages/VisualCreatePolicy/components/States/States.tsx
+++ b/public/pages/VisualCreatePolicy/components/States/States.tsx
@@ -17,6 +17,7 @@ import {
   EuiCompressedFormRow,
   EuiSelect,
   EuiPanel,
+  EuiTitle,
 } from "@elastic/eui";
 import { ContentPanel } from "../../../../components/ContentPanel";
 import "brace/theme/github";
@@ -38,9 +39,9 @@ const States = ({ onOpenFlyout, policy, onClickEditState, onClickDeleteState, on
   return (
     <EuiPanel>
       <EuiFlexGroup gutterSize="xs" alignItems="center">
-        <EuiText size="s">
+        <EuiTitle size="s">
           <h2>{`States (${policy.states.length})`}</h2>
-        </EuiText>
+        </EuiTitle>
       </EuiFlexGroup>
 
       <EuiText color="subdued" size="xs">
diff --git a/public/pages/VisualCreatePolicy/components/States/__snapshots__/States.test.tsx.snap b/public/pages/VisualCreatePolicy/components/States/__snapshots__/States.test.tsx.snap
index 39b9c6c13..df96bb307 100644
--- a/public/pages/VisualCreatePolicy/components/States/__snapshots__/States.test.tsx.snap
+++ b/public/pages/VisualCreatePolicy/components/States/__snapshots__/States.test.tsx.snap
@@ -7,13 +7,11 @@ exports[`<States /> spec renders the component 1`] = `
   <div
     class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
   >
-    <div
-      class="euiText euiText--small"
+    <h2
+      class="euiTitle euiTitle--small"
     >
-      <h2>
-        States (2)
-      </h2>
-    </div>
+      States (2)
+    </h2>
   </div>
   <div
     class="euiText euiText--extraSmall"
diff --git a/public/pages/VisualCreatePolicy/containers/ErrorNotification/ErrorNotification.tsx b/public/pages/VisualCreatePolicy/containers/ErrorNotification/ErrorNotification.tsx
index a4f63c315..e3f5b07be 100644
--- a/public/pages/VisualCreatePolicy/containers/ErrorNotification/ErrorNotification.tsx
+++ b/public/pages/VisualCreatePolicy/containers/ErrorNotification/ErrorNotification.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { ChangeEvent, Component } from "react";
-import { EuiLink, EuiIcon, EuiFlexGroup, EuiFlexItem, EuiText, EuiPanel, EuiSpacer, EuiHorizontalRule } from "@elastic/eui";
+import { EuiLink, EuiIcon, EuiFlexGroup, EuiFlexItem, EuiText, EuiPanel, EuiSpacer, EuiHorizontalRule, EuiTitle } from "@elastic/eui";
 import { ContentPanel } from "../../../../components/ContentPanel";
 import "brace/theme/github";
 import "brace/mode/json";
@@ -101,14 +101,17 @@ export default class ErrorNotification extends Component<ErrorNotificationProps,
       <EuiPanel>
         <EuiFlexGroup gutterSize="xs" alignItems="center">
           <EuiFlexItem grow={false}>
-            <EuiText size="s">
+            <EuiTitle size="s">
               <h2>Error notification</h2>
-            </EuiText>
+            </EuiTitle>
           </EuiFlexItem>
           <EuiFlexItem>
-            <EuiText color="subdued">
-              <i> – optional</i>
-            </EuiText>
+            <EuiTitle size="s">
+              <EuiText color="subdued">
+                {" "}
+                <i> – optional</i>{" "}
+              </EuiText>
+            </EuiTitle>
           </EuiFlexItem>
         </EuiFlexGroup>
 
diff --git a/public/pages/VisualCreatePolicy/containers/ErrorNotification/__snapshots__/ErrorNotification.test.tsx.snap b/public/pages/VisualCreatePolicy/containers/ErrorNotification/__snapshots__/ErrorNotification.test.tsx.snap
index 890097e39..5e6a07d1f 100644
--- a/public/pages/VisualCreatePolicy/containers/ErrorNotification/__snapshots__/ErrorNotification.test.tsx.snap
+++ b/public/pages/VisualCreatePolicy/containers/ErrorNotification/__snapshots__/ErrorNotification.test.tsx.snap
@@ -10,26 +10,26 @@ exports[`<ErrorNotification /> spec renders the component 1`] = `
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
-      <div
-        class="euiText euiText--small"
+      <h2
+        class="euiTitle euiTitle--small"
       >
-        <h2>
-          Error notification
-        </h2>
-      </div>
+        Error notification
+      </h2>
     </div>
     <div
       class="euiFlexItem"
     >
       <div
-        class="euiText euiText--medium"
+        class="euiText euiText--medium euiTitle euiTitle--small"
       >
         <div
           class="euiTextColor euiTextColor--subdued"
         >
+           
           <i>
              – optional
           </i>
+           
         </div>
       </div>
     </div>
@@ -168,7 +168,7 @@ exports[`<ErrorNotification /> spec renders the component 1`] = `
           target="_blank"
         >
           <span
-            class="euiButtonContent euiButton__content"
+            class="euiButtonContent euiButtonContent--iconRight euiButton__content"
           >
             EuiIconMock
             <span