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 ecba2cdc0..ecfe6e846 100644
--- a/public/pages/CreateTransform/containers/CreateTransformForm/__snapshots__/CreateTransformForm.test.tsx.snap
+++ b/public/pages/CreateTransform/containers/CreateTransformForm/__snapshots__/CreateTransformForm.test.tsx.snap
@@ -153,11 +153,13 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
         <div
           class="euiFlexItem"
         >
-          <h1
-            class="euiTitle euiTitle--large"
+          <div
+            class="euiText euiText--small"
           >
-            Set up indices
-          </h1>
+            <h1>
+              Set up indices
+            </h1>
+          </div>
           <div
             class="euiSpacer euiSpacer--l"
           />
diff --git a/public/pages/CreateTransform/containers/DefineTransformsStep/DefineTransformsStep.tsx b/public/pages/CreateTransform/containers/DefineTransformsStep/DefineTransformsStep.tsx
index fe7419ef4..08678725f 100644
--- a/public/pages/CreateTransform/containers/DefineTransformsStep/DefineTransformsStep.tsx
+++ b/public/pages/CreateTransform/containers/DefineTransformsStep/DefineTransformsStep.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { Component } from "react";
-import { EuiSpacer, EuiTitle, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
+import { EuiSpacer, EuiTitle, EuiFlexGroup, EuiFlexItem, EuiText } from "@elastic/eui";
 import { RouteComponentProps } from "react-router-dom";
 import { TransformService } from "../../../../services";
 import { BREADCRUMBS, ROUTES } from "../../../../utils/constants";
@@ -63,9 +63,9 @@ export default class DefineTransformsStep extends Component<DefineTransformsStep
       ? () => {
           return (
             <>
-              <EuiTitle size="l">
+              <EuiText size="s">
                 <h1>Define transform</h1>
-              </EuiTitle>
+              </EuiText>
               <EuiSpacer />
             </>
           );
diff --git a/public/pages/CreateTransform/containers/ReviewAndCreateStep/ReviewAndCreateStep.tsx b/public/pages/CreateTransform/containers/ReviewAndCreateStep/ReviewAndCreateStep.tsx
index c4e1d5143..0ac2e7a79 100644
--- a/public/pages/CreateTransform/containers/ReviewAndCreateStep/ReviewAndCreateStep.tsx
+++ b/public/pages/CreateTransform/containers/ReviewAndCreateStep/ReviewAndCreateStep.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { Component } from "react";
-import { EuiSpacer, EuiTitle, EuiFlexGroup, EuiFlexItem, EuiCallOut } from "@elastic/eui";
+import { EuiSpacer, EuiFlexGroup, EuiFlexItem, EuiCallOut, EuiText } from "@elastic/eui";
 import { RouteComponentProps } from "react-router-dom";
 import { TransformService } from "../../../../services";
 import { BREADCRUMBS, ROUTES } from "../../../../utils/constants";
@@ -64,9 +64,9 @@ export default class ReviewAndCreateStep extends Component<ReviewAndCreateStepPr
       ? () => {
           return (
             <>
-              <EuiTitle size="l">
+              <EuiText size="s">
                 <h1>Review and Create</h1>
-              </EuiTitle>
+              </EuiText>
               <EuiSpacer />
             </>
           );
diff --git a/public/pages/CreateTransform/containers/SetUpIndicesStep/SetUpIndicesStep.tsx b/public/pages/CreateTransform/containers/SetUpIndicesStep/SetUpIndicesStep.tsx
index f6ca048a1..4ddcfef6b 100644
--- a/public/pages/CreateTransform/containers/SetUpIndicesStep/SetUpIndicesStep.tsx
+++ b/public/pages/CreateTransform/containers/SetUpIndicesStep/SetUpIndicesStep.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { ChangeEvent, Component } from "react";
-import { EuiSpacer, EuiTitle, EuiFlexGroup, EuiFlexItem, EuiComboBoxOptionOption } from "@elastic/eui";
+import { EuiSpacer, EuiTitle, EuiFlexGroup, EuiFlexItem, EuiComboBoxOptionOption, EuiText } from "@elastic/eui";
 import { RouteComponentProps } from "react-router-dom";
 import { TransformService } from "../../../../services";
 import ConfigureTransform from "../../components/ConfigureTransform";
@@ -52,9 +52,9 @@ export default class SetUpIndicesStep extends Component<SetUpIndicesStepProps> {
       ? () => {
           return (
             <>
-              <EuiTitle size="l">
+              <EuiText size="s">
                 <h1>Set up indices</h1>
-              </EuiTitle>
+              </EuiText>
               <EuiSpacer />
             </>
           );
diff --git a/public/pages/CreateTransform/containers/SpecifyScheduleStep/SpecifyScheduleStep.tsx b/public/pages/CreateTransform/containers/SpecifyScheduleStep/SpecifyScheduleStep.tsx
index 307070bb9..1d39e7797 100644
--- a/public/pages/CreateTransform/containers/SpecifyScheduleStep/SpecifyScheduleStep.tsx
+++ b/public/pages/CreateTransform/containers/SpecifyScheduleStep/SpecifyScheduleStep.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { ChangeEvent, Component } from "react";
-import { EuiSpacer, EuiTitle, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
+import { EuiSpacer, EuiTitle, EuiFlexGroup, EuiFlexItem, EuiText } from "@elastic/eui";
 import { RouteComponentProps } from "react-router-dom";
 import { TransformService } from "../../../../services";
 import { BREADCRUMBS, ROUTES } from "../../../../utils/constants";
@@ -129,9 +129,9 @@ export default class SpecifyScheduleStep extends Component<SpecifyScheduleStepPr
       ? () => {
           return (
             <>
-              <EuiTitle size="l">
+              <EuiText size="s">
                 <h1>Specify Schedule</h1>
-              </EuiTitle>
+              </EuiText>
               <EuiSpacer />
             </>
           );
diff --git a/public/pages/IndexDetail/containers/IndexDetail/IndexDetail.tsx b/public/pages/IndexDetail/containers/IndexDetail/IndexDetail.tsx
index bfaeee2bf..ed90332b8 100644
--- a/public/pages/IndexDetail/containers/IndexDetail/IndexDetail.tsx
+++ b/public/pages/IndexDetail/containers/IndexDetail/IndexDetail.tsx
@@ -353,9 +353,9 @@ export default function IndexDetail(props: IndexDetailModalProps) {
   ) : (
     <>
       <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-        <EuiTitle size="m">
-          <span>{index}</span>
-        </EuiTitle>
+        <EuiText size="s">
+          <h1>{index}</h1>
+        </EuiText>
         <IndicesActions
           selectedItems={[record]}
           history={props.history}
diff --git a/public/pages/Reindex/container/Reindex/Reindex.tsx b/public/pages/Reindex/container/Reindex/Reindex.tsx
index f92fff6ef..1fe900b30 100644
--- a/public/pages/Reindex/container/Reindex/Reindex.tsx
+++ b/public/pages/Reindex/container/Reindex/Reindex.tsx
@@ -762,9 +762,9 @@ class Reindex extends Component<ReindexProps, ReindexState> {
       </div>
     ) : (
       <div style={{ padding: "0px 50px" }}>
-        <EuiTitle size="l">
+        <EuiText size="s">
           <h1>Reindex</h1>
-        </EuiTitle>
+        </EuiText>
         {subTitleText}
         <EuiSpacer />
 
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 8f66b1f41..cb4858c19 100644
--- a/public/pages/Reindex/container/Reindex/__snapshots__/Reindex.test.tsx.snap
+++ b/public/pages/Reindex/container/Reindex/__snapshots__/Reindex.test.tsx.snap
@@ -4,11 +4,13 @@ exports[`<Reindex /> spec renders the component 1`] = `
 <div
   style="padding: 0px 50px;"
 >
-  <h1
-    class="euiTitle euiTitle--large"
+  <div
+    class="euiText euiText--small"
   >
-    Reindex
-  </h1>
+    <h1>
+      Reindex
+    </h1>
+  </div>
   <div
     class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
     id="some_html_id-row"
diff --git a/public/pages/ShrinkIndex/container/ShrinkIndex/ShrinkIndex.tsx b/public/pages/ShrinkIndex/container/ShrinkIndex/ShrinkIndex.tsx
index 2ee9630b2..6a1e68dbd 100644
--- a/public/pages/ShrinkIndex/container/ShrinkIndex/ShrinkIndex.tsx
+++ b/public/pages/ShrinkIndex/container/ShrinkIndex/ShrinkIndex.tsx
@@ -740,9 +740,9 @@ class ShrinkIndex extends Component<ShrinkIndexProps, ShrinkIndexState> {
       </div>
     ) : (
       <div style={{ padding: "0px 50px" }}>
-        <EuiTitle size="l">
+        <EuiText size="s">
           <h1>Shrink index</h1>
-        </EuiTitle>
+        </EuiText>
         {subTitleText}
         <EuiSpacer />
         {Common()}
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 7d80cf129..08fb8a8e8 100644
--- a/public/pages/ShrinkIndex/container/ShrinkIndex/__snapshots__/ShrinkIndex.test.tsx.snap
+++ b/public/pages/ShrinkIndex/container/ShrinkIndex/__snapshots__/ShrinkIndex.test.tsx.snap
@@ -5,11 +5,13 @@ exports[`<Shrink index /> spec renders the component 1`] = `
   <div
     style="padding: 0px 50px;"
   >
-    <h1
-      class="euiTitle euiTitle--large"
+    <div
+      class="euiText euiText--small"
     >
-      Shrink index
-    </h1>
+      <h1>
+        Shrink index
+      </h1>
+    </div>
     <div
       class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
       id="some_html_id-row"
diff --git a/public/pages/SplitIndex/container/SplitIndex/SplitIndex.tsx b/public/pages/SplitIndex/container/SplitIndex/SplitIndex.tsx
index e02832f4e..a9c516c3f 100644
--- a/public/pages/SplitIndex/container/SplitIndex/SplitIndex.tsx
+++ b/public/pages/SplitIndex/container/SplitIndex/SplitIndex.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import React, { Component, useContext } from "react";
-import { EuiCallOut, EuiSpacer, EuiTitle, EuiSmallButton, EuiLink, EuiCompressedFormRow } from "@elastic/eui";
+import { EuiCallOut, EuiSpacer, EuiTitle, EuiSmallButton, EuiLink, EuiCompressedFormRow, EuiText } from "@elastic/eui";
 import { get } from "lodash";
 
 import { CatIndex } from "../../../../../server/models/interfaces";
@@ -273,9 +273,9 @@ export class SplitIndex extends Component<SplitIndexProps> {
       </div>
     ) : (
       <div style={{ padding: "0px 50px" }}>
-        <EuiTitle>
+        <EuiText size="s">
           <h1>Split index</h1>
-        </EuiTitle>
+        </EuiText>
 
         <EuiCompressedFormRow
           fullWidth
diff --git a/public/pages/SplitIndex/container/SplitIndex/__snapshots__/SplitIndex.test.tsx.snap b/public/pages/SplitIndex/container/SplitIndex/__snapshots__/SplitIndex.test.tsx.snap
index 3288a3a6e..eee72fb96 100644
--- a/public/pages/SplitIndex/container/SplitIndex/__snapshots__/SplitIndex.test.tsx.snap
+++ b/public/pages/SplitIndex/container/SplitIndex/__snapshots__/SplitIndex.test.tsx.snap
@@ -6,11 +6,13 @@ HTMLCollection [
     <div
       style="padding: 0px 50px;"
     >
-      <h1
-        class="euiTitle euiTitle--medium"
+      <div
+        class="euiText euiText--small"
       >
-        Split index
-      </h1>
+        <h1>
+          Split index
+        </h1>
+      </div>
       <div
         class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         id="some_html_id-row"
diff --git a/public/pages/Transforms/containers/Transforms/EditTransform.tsx b/public/pages/Transforms/containers/Transforms/EditTransform.tsx
index 7d8251caa..69c8eef88 100644
--- a/public/pages/Transforms/containers/Transforms/EditTransform.tsx
+++ b/public/pages/Transforms/containers/Transforms/EditTransform.tsx
@@ -11,7 +11,7 @@ import { EMPTY_TRANSFORM } from "../../utils/constants";
 import queryString from "query-string";
 import { BREADCRUMBS, ROUTES } from "../../../../utils/constants";
 import { getErrorMessage } from "../../../../utils/helpers";
-import { EuiFlexItem, EuiFlexGroup, EuiSmallButton, EuiTitle, EuiSpacer, EuiSmallButtonEmpty } from "@elastic/eui";
+import { EuiFlexItem, EuiFlexGroup, EuiSmallButton, EuiTitle, EuiSpacer, EuiSmallButtonEmpty, EuiText } from "@elastic/eui";
 import ConfigureTransform from "../../components/ConfigureTransform";
 import Schedule from "../../components/Schedule";
 import Indices from "../../components/Indices";
@@ -193,12 +193,7 @@ export class EditTransform extends Component<EditTransformProps, EditTransformSt
               </EuiSmallButtonEmpty>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiSmallButton
-                fill
-                onClick={this.onSubmit}
-                isLoading={isSubmitting}
-                data-test-subj="editTransformSaveButton"
-              >
+              <EuiSmallButton fill onClick={this.onSubmit} isLoading={isSubmitting} data-test-subj="editTransformSaveButton">
                 Save changes
               </EuiSmallButton>
             </EuiFlexItem>
@@ -210,9 +205,9 @@ export class EditTransform extends Component<EditTransformProps, EditTransformSt
       <div style={{ padding: "0px 0px" }}>{Common()}</div>
     ) : (
       <div style={{ padding: "25px 50px" }}>
-        <EuiTitle size="l">
+        <EuiText size="s">
           <h1>Edit transform job</h1>
-        </EuiTitle>
+        </EuiText>
         <EuiSpacer />
         {Common()}
       </div>
diff --git a/public/pages/Transforms/containers/Transforms/TransformDetails.tsx b/public/pages/Transforms/containers/Transforms/TransformDetails.tsx
index 7cdc7a221..0a9974a61 100644
--- a/public/pages/Transforms/containers/Transforms/TransformDetails.tsx
+++ b/public/pages/Transforms/containers/Transforms/TransformDetails.tsx
@@ -389,9 +389,9 @@ export class TransformDetails extends Component<TransformDetailsProps, Transform
       <div style={{ padding: "5px 50px" }}>
         <EuiFlexGroup style={{ padding: "0px 10px" }} justifyContent="spaceBetween" alignItems="center">
           <EuiFlexItem grow={false}>
-            <EuiTitle size="m">
-              <h2>{id}</h2>
-            </EuiTitle>
+            <EuiText size="s">
+              <h1>{id}</h1>
+            </EuiText>
           </EuiFlexItem>
 
           <EuiFlexItem grow={false}>
@@ -429,7 +429,6 @@ export class TransformDetails extends Component<TransformDetailsProps, Transform
         <EuiSpacer />
         <TransformStatus metadata={metadata} />
         <EuiSpacer />
-        <EuiSpacer />
         <TransformSettings
           {...this.props}
           transformService={this.props.transformService}
@@ -444,11 +443,15 @@ export class TransformDetails extends Component<TransformDetailsProps, Transform
           <EuiOverlayMask>
             <EuiModal onClose={this.closeModal}>
               <EuiModalHeader>
-                <EuiModalHeaderTitle>{"View JSON of " + id} </EuiModalHeaderTitle>
+                <EuiModalHeaderTitle>
+                  <EuiText size="s">
+                    <h2>{"View JSON of " + id}</h2>
+                  </EuiText>
+                </EuiModalHeaderTitle>
               </EuiModalHeader>
 
               <EuiModalBody>
-                <EuiCodeBlock language="json" fontSize="m" paddingSize="m" overflowHeight={600} inline={false} isCopyable>
+                <EuiCodeBlock language="json" fontSize="s" paddingSize="m" overflowHeight={600} inline={false} isCopyable>
                   {JSON.stringify(transformJson, null, 4)}
                 </EuiCodeBlock>
               </EuiModalBody>
@@ -481,7 +484,6 @@ export class TransformDetails extends Component<TransformDetailsProps, Transform
         <EuiSpacer />
         <TransformStatus metadata={metadata} />
         <EuiSpacer />
-        <EuiSpacer />
         <TransformSettings
           {...this.props}
           transformService={this.props.transformService}
@@ -494,7 +496,7 @@ export class TransformDetails extends Component<TransformDetailsProps, Transform
 
         {isModalOpen && (
           <EuiOverlayMask>
-            <EuiModal onClose={this.closeModal} style={{ padding: "5px 30px" }}>
+            <EuiModal onClose={this.closeModal}>
               <EuiModalHeader>
                 <EuiModalHeaderTitle>
                   <EuiText size="s">
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 e95e128aa..bcd30143c 100644
--- a/public/pages/Transforms/containers/Transforms/__snapshots__/EditTransform.test.tsx.snap
+++ b/public/pages/Transforms/containers/Transforms/__snapshots__/EditTransform.test.tsx.snap
@@ -4,11 +4,13 @@ exports[`<EditTransform /> spec renders the component 1`] = `
 <div
   style="padding: 25px 50px;"
 >
-  <h1
-    class="euiTitle euiTitle--large"
+  <div
+    class="euiText euiText--small"
   >
-    Edit transform job
-  </h1>
+    <h1>
+      Edit transform job
+    </h1>
+  </div>
   <div
     class="euiSpacer euiSpacer--l"
   />