diff --git a/public/containers/IndexDetail/__snapshots__/IndexDetail.test.tsx.snap b/public/containers/IndexDetail/__snapshots__/IndexDetail.test.tsx.snap
index 1a6374a6a..144867e1c 100644
--- a/public/containers/IndexDetail/__snapshots__/IndexDetail.test.tsx.snap
+++ b/public/containers/IndexDetail/__snapshots__/IndexDetail.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`<IndexDetail /> spec render the component 1`] = `
       class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
     />
     <div
-      class="euiSpacer euiSpacer--l"
+      class="euiSpacer euiSpacer--s"
     />
     <div
       class="euiSpacer euiSpacer--l"
diff --git a/public/containers/IndexDetail/index.tsx b/public/containers/IndexDetail/index.tsx
index 44b21cf36..dd68aecb9 100644
--- a/public/containers/IndexDetail/index.tsx
+++ b/public/containers/IndexDetail/index.tsx
@@ -47,25 +47,41 @@ export default function IndexDetail(props: IIndexDetailProps) {
         <h2>Source index details</h2>
       </EuiText>
       <EuiHorizontalRule margin="xs" />
-      <EuiSpacer />
+      <EuiSpacer size="s" />
       {items && items.length ? (
         <DescriptionListHoz
           compressed
           listItems={[
             {
-              title: "Index name",
+              title: (
+                <EuiText size="s">
+                  <h4>Index name</h4>
+                </EuiText>
+              ),
               description: items[0].index,
             },
             {
-              title: "Primary shards",
+              title: (
+                <EuiText size="s">
+                  <h4>Primary shards</h4>
+                </EuiText>
+              ),
               description: items[0].pri,
             },
             {
-              title: "Replica shards",
+              title: (
+                <EuiText size="s">
+                  <h4>Replica shards</h4>
+                </EuiText>
+              ),
               description: items[0].rep,
             },
             {
-              title: "Total index size",
+              title: (
+                <EuiText size="s">
+                  <h4>Total index size</h4>
+                </EuiText>
+              ),
               description: items[0]["store.size"],
             },
           ]}
diff --git a/public/pages/CreateIndex/containers/IndexForm/index.tsx b/public/pages/CreateIndex/containers/IndexForm/index.tsx
index 9448a61f2..ebd911e56 100644
--- a/public/pages/CreateIndex/containers/IndexForm/index.tsx
+++ b/public/pages/CreateIndex/containers/IndexForm/index.tsx
@@ -472,7 +472,13 @@ export class IndexForm extends Component<IndexFormProps & { services: BrowserSer
                 </EuiSmallButtonEmpty>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiSmallButton fill onClick={this.onSubmit} isLoading={isSubmitting} data-test-subj="createIndexCreateButton">
+                <EuiSmallButton
+                  fill
+                  onClick={this.onSubmit}
+                  isLoading={isSubmitting}
+                  data-test-subj="createIndexCreateButton"
+                  iconType={isEdit ? undefined : "plus"}
+                >
                   {isEdit ? "Update" : "Create"}
                 </EuiSmallButton>
               </EuiFlexItem>
diff --git a/public/pages/CreateTransform/components/ConfigureTransform/ConfigureTransform.tsx b/public/pages/CreateTransform/components/ConfigureTransform/ConfigureTransform.tsx
index c35cd6d75..d621cce5b 100644
--- a/public/pages/CreateTransform/components/ConfigureTransform/ConfigureTransform.tsx
+++ b/public/pages/CreateTransform/components/ConfigureTransform/ConfigureTransform.tsx
@@ -4,8 +4,17 @@
  */
 
 import React, { ChangeEvent } from "react";
-import { EuiSpacer, EuiCompressedFormRow, EuiCompressedFieldText, EuiTextArea, EuiText, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
-import { ContentPanel } from "../../../../components/ContentPanel";
+import {
+  EuiSpacer,
+  EuiCompressedFormRow,
+  EuiCompressedFieldText,
+  EuiTextArea,
+  EuiText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPanel,
+  EuiHorizontalRule,
+} from "@elastic/eui";
 
 interface ConfigureTransformProps {
   isEdit: boolean;
@@ -24,10 +33,18 @@ const ConfigureTransform = ({
   onChangeDescription,
   description,
 }: ConfigureTransformProps) => (
-  <ContentPanel panelStyles={{ padding: "20px 20px" }} bodyStyles={{ padding: "10px" }} title="Job name and description" titleSize="m">
+  <EuiPanel>
+    <EuiText size="s">
+      <h2>Job name and description</h2>
+    </EuiText>
+    <EuiHorizontalRule margin="xs" />
     <div>
       <EuiCompressedFormRow
-        label="Name"
+        label={
+          <EuiText size="s">
+            <h3>Name</h3>
+          </EuiText>
+        }
         helpText="Specify a unique, descriptive name."
         isInvalid={!!transformIdError}
         error={transformIdError}
@@ -43,13 +60,15 @@ const ConfigureTransform = ({
       <EuiSpacer />
       <EuiFlexGroup gutterSize="xs">
         <EuiFlexItem grow={false}>
-          <EuiText size="xs">
-            <h4>Description</h4>
+          <EuiText size="s">
+            <h3>Description</h3>
           </EuiText>
         </EuiFlexItem>
         <EuiFlexItem>
-          <EuiText size="xs" color="subdued">
-            <i> – optional</i>
+          <EuiText size="s" color="subdued">
+            <h3>
+              <i> – optional</i>
+            </h3>
           </EuiText>
         </EuiFlexItem>
       </EuiFlexGroup>
@@ -58,6 +77,6 @@ const ConfigureTransform = ({
         <EuiTextArea compressed={true} value={description} onChange={onChangeDescription} data-test-subj="description" />
       </EuiCompressedFormRow>
     </div>
-  </ContentPanel>
+  </EuiPanel>
 );
 export default ConfigureTransform;
diff --git a/public/pages/CreateTransform/components/CreateTransformSteps/CreateTransformSteps.tsx b/public/pages/CreateTransform/components/CreateTransformSteps/CreateTransformSteps.tsx
index 8f5404825..3f1b18711 100644
--- a/public/pages/CreateTransform/components/CreateTransformSteps/CreateTransformSteps.tsx
+++ b/public/pages/CreateTransform/components/CreateTransformSteps/CreateTransformSteps.tsx
@@ -36,7 +36,7 @@ const setOfSteps = (step: number) => {
 
 const CreateTransformSteps = ({ step }: CreateTransformStepsProps) => (
   <div style={{ paddingLeft: "10px" }}>
-    <EuiSteps steps={setOfSteps(step)} headingElement="h6" />
+    <EuiSteps steps={setOfSteps(step)} headingElement="h6" titleSize="xs" />
   </div>
 );
 
diff --git a/public/pages/CreateTransform/components/DefineTransforms/DefineTransforms.tsx b/public/pages/CreateTransform/components/DefineTransforms/DefineTransforms.tsx
index d13b84c0b..05e7d00d8 100644
--- a/public/pages/CreateTransform/components/DefineTransforms/DefineTransforms.tsx
+++ b/public/pages/CreateTransform/components/DefineTransforms/DefineTransforms.tsx
@@ -168,8 +168,8 @@ export default function DefineTransforms({
   if (isReadOnly)
     return (
       <div>
-        <EuiText>
-          <h5>Original fields with sample data</h5>
+        <EuiText size="s">
+          <h3>Original fields with sample data</h3>
         </EuiText>
         <EuiSpacer size="s" />
         <EuiDataGrid
@@ -195,8 +195,8 @@ export default function DefineTransforms({
           gridStyle={{ rowHover: "none" }}
         />
         <EuiSpacer size="l" />
-        <EuiText>
-          <h5>Transformed fields preview based on sample data</h5>
+        <EuiText size="s">
+          <h3>Transformed fields preview based on sample data</h3>
         </EuiText>
         <EuiSpacer size="s" />
         <PreviewTransform
@@ -210,9 +210,18 @@ export default function DefineTransforms({
     );
 
   return (
-    <ContentPanel panelStyles={{ padding: "20px 20px" }} bodyStyles={{ padding: "10px" }} title="Select fields to transform" titleSize="m">
-      <EuiText>
-        <h5>Original fields with sample data</h5>
+    <ContentPanel
+      panelStyles={{ padding: "16px 16px" }}
+      bodyStyles={{ padding: "10px" }}
+      title={
+        <EuiText size="s">
+          <h2>Select fields to transform</h2>
+        </EuiText>
+      }
+      titleSize="m"
+    >
+      <EuiText size="s">
+        <h3>Original fields with sample data</h3>
       </EuiText>
       <EuiSpacer size="s" />
       {/*TODO: Substitute "source index", and "filtered by" fields with actual values*/}
@@ -242,8 +251,8 @@ export default function DefineTransforms({
         }}
       />
       <EuiSpacer size="l" />
-      <EuiText>
-        <h5>Transformed fields preview based on sample data</h5>
+      <EuiText size="s">
+        <h3>Transformed fields preview based on sample data</h3>
       </EuiText>
       <EuiSpacer size="s" />
       <EuiText color="subdued" size="xs">
diff --git a/public/pages/CreateTransform/components/JobNameAndIndices/JobNameAndIndices.tsx b/public/pages/CreateTransform/components/JobNameAndIndices/JobNameAndIndices.tsx
index c1293f49e..1c281d7b0 100644
--- a/public/pages/CreateTransform/components/JobNameAndIndices/JobNameAndIndices.tsx
+++ b/public/pages/CreateTransform/components/JobNameAndIndices/JobNameAndIndices.tsx
@@ -4,8 +4,8 @@
  */
 
 import React, { Component } from "react";
-import { EuiFlexGrid, EuiSpacer, EuiFlexItem, EuiText } from "@elastic/eui";
-import { ContentPanel, ContentPanelActions } from "../../../../components/ContentPanel";
+import { EuiFlexGrid, EuiSpacer, EuiFlexItem, EuiText, EuiPanel, EuiFlexGroup, EuiHorizontalRule } from "@elastic/eui";
+import { ContentPanelActions } from "../../../../components/ContentPanel";
 import { ModalConsumer } from "../../../../components/Modal";
 import { IndexItem } from "../../../../../models/interfaces";
 
@@ -27,28 +27,31 @@ export default class JobNameAndIndices extends Component<JobNameAndIndicesProps>
     const { transformId, description, onChangeStep, sourceIndex, targetIndex, sourceIndexFilter } = this.props;
 
     return (
-      <ContentPanel
-        actions={
-          <ModalConsumer>
-            {() => (
-              <ContentPanelActions
-                actions={[
-                  {
-                    text: "Edit",
-                    buttonProps: {
-                      onClick: () => onChangeStep(1),
+      <EuiPanel>
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiText size="s">
+              <h2>Set up indices</h2>
+            </EuiText>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <ModalConsumer>
+              {() => (
+                <ContentPanelActions
+                  actions={[
+                    {
+                      text: "Edit",
+                      buttonProps: {
+                        onClick: () => onChangeStep(1),
+                      },
                     },
-                  },
-                ]}
-              />
-            )}
-          </ModalConsumer>
-        }
-        panelStyles={{ padding: "20px 20px" }}
-        bodyStyles={{ padding: "10px" }}
-        title="Set up indices"
-        titleSize="m"
-      >
+                  ]}
+                />
+              )}
+            </ModalConsumer>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiHorizontalRule margin="xs" />
         <div>
           <EuiFlexGrid columns={3}>
             <EuiFlexItem>
@@ -84,7 +87,7 @@ export default class JobNameAndIndices extends Component<JobNameAndIndicesProps>
           </EuiFlexGrid>
           <EuiSpacer size="s" />
         </div>
-      </ContentPanel>
+      </EuiPanel>
     );
   }
 }
diff --git a/public/pages/CreateTransform/components/PreviewEmptyPrompt/PreviewEmptyPrompt.tsx b/public/pages/CreateTransform/components/PreviewEmptyPrompt/PreviewEmptyPrompt.tsx
index d7866f9d7..c2dc62c60 100644
--- a/public/pages/CreateTransform/components/PreviewEmptyPrompt/PreviewEmptyPrompt.tsx
+++ b/public/pages/CreateTransform/components/PreviewEmptyPrompt/PreviewEmptyPrompt.tsx
@@ -24,16 +24,18 @@ export default function PreviewEmptyPrompt({ isReadOnly }: PreviewEmptyPromptPro
       ) : (
         <EuiEmptyPrompt
           title={
-            <EuiText size="m">
+            <EuiText size="s">
               <h4> No fields selected </h4>
             </EuiText>
           }
           body={
-            <p>
-              {" "}
-              From the table above, select a field you want to transform by clicking <EuiIcon type="plusInCircleFilled" /> next to the field
-              name.
-            </p>
+            <EuiText size="s">
+              <p>
+                {" "}
+                From the table above, select a field you want to transform by clicking <EuiIcon type="plusInCircleFilled" /> next to the
+                field name.
+              </p>
+            </EuiText>
           }
         />
       )}
diff --git a/public/pages/CreateTransform/components/ReviewDefinition/ReviewDefinition.tsx b/public/pages/CreateTransform/components/ReviewDefinition/ReviewDefinition.tsx
index d2e7ca99d..906843bf9 100644
--- a/public/pages/CreateTransform/components/ReviewDefinition/ReviewDefinition.tsx
+++ b/public/pages/CreateTransform/components/ReviewDefinition/ReviewDefinition.tsx
@@ -4,8 +4,8 @@
  */
 
 import React, { Component } from "react";
-import { EuiFlexGrid, EuiSpacer, EuiFlexItem, EuiText, EuiAccordion } from "@elastic/eui";
-import { ContentPanel, ContentPanelActions } from "../../../../components/ContentPanel";
+import { EuiFlexGrid, EuiSpacer, EuiFlexItem, EuiText, EuiAccordion, EuiFlexGroup, EuiPanel, EuiHorizontalRule } from "@elastic/eui";
+import { ContentPanelActions } from "../../../../components/ContentPanel";
 import { ModalConsumer } from "../../../../components/Modal";
 import { TransformGroupItem, FieldItem, TransformAggItem, TRANSFORM_AGG_TYPE } from "../../../../../models/interfaces";
 import DefineTransforms from "../DefineTransforms";
@@ -82,32 +82,42 @@ export default class ReviewDefinition extends Component<ReviewDefinitionProps> {
     };
 
     return (
-      <ContentPanel
-        actions={
-          <ModalConsumer>
-            {() => (
-              <ContentPanelActions
-                actions={[
-                  {
-                    text: "Edit",
-                    buttonProps: {
-                      onClick: () => onChangeStep(2),
+      <EuiPanel>
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiText size="s">
+              <h2>Define transforms</h2>
+            </EuiText>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <ModalConsumer>
+              {() => (
+                <ContentPanelActions
+                  actions={[
+                    {
+                      text: "Edit",
+                      buttonProps: {
+                        onClick: () => onChangeStep(2),
+                      },
                     },
-                  },
-                ]}
-              />
-            )}
-          </ModalConsumer>
-        }
-        panelStyles={{ padding: "20px 20px" }}
-        bodyStyles={{ padding: "10px" }}
-        title="Define transforms"
-        titleSize="m"
-      >
+                  ]}
+                />
+              )}
+            </ModalConsumer>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiHorizontalRule margin="xs" />
         <div>
           <EuiFlexGrid columns={4}>{aggListItems()}</EuiFlexGrid>
           <EuiSpacer />
-          <EuiAccordion id="" buttonContent="Sample source index and transform result">
+          <EuiAccordion
+            id=""
+            buttonContent={
+              <EuiText size="s">
+                <h3>Sample source index and transform result</h3>
+              </EuiText>
+            }
+          >
             <div style={{ padding: "10px" }}>
               <EuiSpacer size="m" />
               <DefineTransforms
@@ -125,7 +135,7 @@ export default class ReviewDefinition extends Component<ReviewDefinitionProps> {
             </div>
           </EuiAccordion>
         </div>
-      </ContentPanel>
+      </EuiPanel>
     );
   }
 }
diff --git a/public/pages/CreateTransform/components/ReviewSchedule/ReviewSchedule.tsx b/public/pages/CreateTransform/components/ReviewSchedule/ReviewSchedule.tsx
index a0e6f7e2c..496e3550d 100644
--- a/public/pages/CreateTransform/components/ReviewSchedule/ReviewSchedule.tsx
+++ b/public/pages/CreateTransform/components/ReviewSchedule/ReviewSchedule.tsx
@@ -4,8 +4,8 @@
  */
 
 import React, { Component } from "react";
-import { EuiFlexGrid, EuiFlexItem, EuiText } from "@elastic/eui";
-import { ContentPanel, ContentPanelActions } from "../../../../components/ContentPanel";
+import { EuiFlexGrid, EuiFlexItem, EuiText, EuiPanel, EuiFlexGroup, EuiHorizontalRule } from "@elastic/eui";
+import { ContentPanelActions } from "../../../../components/ContentPanel";
 import { ModalConsumer } from "../../../../components/Modal";
 import { buildIntervalScheduleText } from "../../../CreateRollup/utils/helpers";
 
@@ -31,28 +31,31 @@ export default class ReviewSchedule extends Component<ReviewScheduleProps> {
     const schedule = buildIntervalScheduleText(continuousJob === "yes", interval, intervalTimeunit);
 
     return (
-      <ContentPanel
-        actions={
-          <ModalConsumer>
-            {() => (
-              <ContentPanelActions
-                actions={[
-                  {
-                    text: "Edit",
-                    buttonProps: {
-                      onClick: () => onChangeStep(3),
+      <EuiPanel>
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiText size="s">
+              <h2>Specify schedule</h2>
+            </EuiText>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <ModalConsumer>
+              {() => (
+                <ContentPanelActions
+                  actions={[
+                    {
+                      text: "Edit",
+                      buttonProps: {
+                        onClick: () => onChangeStep(3),
+                      },
                     },
-                  },
-                ]}
-              />
-            )}
-          </ModalConsumer>
-        }
-        panelStyles={{ padding: "20px 20px" }}
-        bodyStyles={{ padding: "10px" }}
-        title="Specify schedule"
-        titleSize="m"
-      >
+                  ]}
+                />
+              )}
+            </ModalConsumer>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiHorizontalRule margin="xs" />
         <div>
           <EuiFlexGrid columns={4}>
             <EuiFlexItem>
@@ -75,7 +78,7 @@ export default class ReviewSchedule extends Component<ReviewScheduleProps> {
             </EuiFlexItem>
           </EuiFlexGrid>
         </div>
-      </ContentPanel>
+      </EuiPanel>
     );
   }
 }
diff --git a/public/pages/CreateTransform/components/Schedule/Schedule.tsx b/public/pages/CreateTransform/components/Schedule/Schedule.tsx
index 69c26ad5e..3dc7d98fd 100644
--- a/public/pages/CreateTransform/components/Schedule/Schedule.tsx
+++ b/public/pages/CreateTransform/components/Schedule/Schedule.tsx
@@ -12,6 +12,9 @@ import {
   EuiCompressedFieldNumber,
   EuiAccordion,
   EuiHorizontalRule,
+  EuiText,
+  EuiTitle,
+  EuiPanel,
 } from "@elastic/eui";
 import { ContentPanel } from "../../../../components/ContentPanel";
 import { selectInterval } from "../../../Transforms/utils/metadataHelper";
@@ -46,7 +49,13 @@ const radios = [
 
 const isContinuous = (continuousJob: string, onChangeContinuousJob: (optionId: string) => void) => (
   <React.Fragment>
-    <EuiCompressedFormRow label="Continuous">
+    <EuiCompressedFormRow
+      label={
+        <EuiText size="s">
+          <h4>Continuous</h4>
+        </EuiText>
+      }
+    >
       <EuiCompressedRadioGroup
         options={radios}
         idSelected={continuousJob}
@@ -79,7 +88,11 @@ export default class Schedule extends Component<ScheduleProps> {
       onChangePage,
     } = this.props;
     return (
-      <ContentPanel panelStyles={{ padding: "20px 20px" }} bodyStyles={{ padding: "10px" }} title="Schedule" titleSize="m">
+      <EuiPanel>
+        <EuiText size="s">
+          <h2>Schedule</h2>
+        </EuiText>
+        <EuiHorizontalRule margin="xs" />
         <div>
           {!isEdit && (
             <EuiCompressedCheckbox
@@ -115,7 +128,7 @@ export default class Schedule extends Component<ScheduleProps> {
             </EuiCompressedFormRow>
           </EuiAccordion>
         </div>
-      </ContentPanel>
+      </EuiPanel>
     );
   }
 }
diff --git a/public/pages/CreateTransform/components/TransformIndices/TransformIndices.tsx b/public/pages/CreateTransform/components/TransformIndices/TransformIndices.tsx
index 92ff5537e..ce20e5cdd 100644
--- a/public/pages/CreateTransform/components/TransformIndices/TransformIndices.tsx
+++ b/public/pages/CreateTransform/components/TransformIndices/TransformIndices.tsx
@@ -17,10 +17,10 @@ import {
   EuiComboBoxOptionOption,
   EuiBadge,
   EuiLink,
+  EuiPanel,
 } from "@elastic/eui";
 import _ from "lodash";
 import EuiCompressedComboBox from "../../../../components/ComboBoxWithoutWarning";
-import { ContentPanel } from "../../../../components/ContentPanel";
 import IndexFilterPopover from "../IndexFilterPopover";
 import { FieldItem, IndexItem } from "../../../../../models/interfaces";
 import IndexService from "../../../../services/IndexService";
@@ -163,7 +163,11 @@ export default class TransformIndices extends Component<TransformIndicesProps, T
 
     return (
       <div>
-        <ContentPanel panelStyles={{ padding: "20px 20px" }} bodyStyles={{ padding: "10px" }} title="Indices" titleSize="m">
+        <EuiPanel>
+          <EuiText size="s">
+            <h2>Indices</h2>
+          </EuiText>
+          <EuiHorizontalRule margin="xs" />
           <div>
             {hasAggregation && (
               <Fragment>
@@ -173,7 +177,11 @@ export default class TransformIndices extends Component<TransformIndicesProps, T
               </Fragment>
             )}
             <EuiCompressedFormRow
-              label="Source index"
+              label={
+                <EuiText size="s">
+                  <h3>Source index</h3>
+                </EuiText>
+              }
               error={sourceIndexError}
               isInvalid={sourceIndexError != ""}
               helpText="The index where this transform job is performed on. Type in * as wildcard for index pattern. Indices cannot be changed once the job is created. Please ensure that you select the right source index."
@@ -193,13 +201,15 @@ export default class TransformIndices extends Component<TransformIndicesProps, T
             <EuiSpacer size="s" />
             <EuiFlexGroup gutterSize="xs">
               <EuiFlexItem grow={false}>
-                <EuiText size="xs">
-                  <h4>Source index filter</h4>
+                <EuiText size="s">
+                  <h3>Source index filter</h3>
                 </EuiText>
               </EuiFlexItem>
               <EuiFlexItem>
-                <EuiText size="xs" color="subdued">
-                  <i> – optional</i>
+                <EuiText size="s" color="subdued">
+                  <h3>
+                    <i> – optional</i>
+                  </h3>
                 </EuiText>
               </EuiFlexItem>
             </EuiFlexGroup>
@@ -253,7 +263,11 @@ export default class TransformIndices extends Component<TransformIndicesProps, T
             <EuiSpacer size="s" />
             <EuiHorizontalRule margin="xs" />
             <EuiCompressedFormRow
-              label="Target index"
+              label={
+                <EuiText size="s">
+                  <h3>Target index</h3>
+                </EuiText>
+              }
               error={targetIndexError}
               isInvalid={targetIndexError != ""}
               helpText="The index stores transform results. You can look up an existing index to reuse or type to create a new index."
@@ -272,11 +286,13 @@ export default class TransformIndices extends Component<TransformIndicesProps, T
               />
             </EuiCompressedFormRow>
           </div>
-        </ContentPanel>
+        </EuiPanel>
         <Fragment>
           <EuiSpacer />
           <EuiCallOut color="warning">
-            <p>You can't change indices after creating a job. Double-check the source and target index names before proceeding.</p>
+            <EuiText size="s">
+              <p>You can't change indices after creating a job. Double-check the source and target index names before proceeding.</p>
+            </EuiText>
           </EuiCallOut>
         </Fragment>
       </div>
diff --git a/public/pages/CreateTransform/components/TransformOptions/TransformOptions.tsx b/public/pages/CreateTransform/components/TransformOptions/TransformOptions.tsx
index 207de01ef..4efdbbaf2 100644
--- a/public/pages/CreateTransform/components/TransformOptions/TransformOptions.tsx
+++ b/public/pages/CreateTransform/components/TransformOptions/TransformOptions.tsx
@@ -395,6 +395,7 @@ export default function TransformOptions({
             anchorPosition="rightCenter"
           >
             <EuiContextMenu
+              size="s"
               initialPanelId={0}
               panels={isNumeric ? numberPanels : isText ? textPanels : isDate ? datePanels : defaultPanels}
             />
diff --git a/public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.tsx b/public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.tsx
index 4fef6fc72..300516a85 100644
--- a/public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.tsx
+++ b/public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.tsx
@@ -677,7 +677,12 @@ export class CreateTransformForm extends Component<CreateTransformFormProps, Cre
           submitError={submitError}
           useUpdatedUX={useUpdatedUX}
         />
-        <EuiFlexGroup alignItems="center" justifyContent="flexEnd" style={{ padding: "5px 50px" }}>
+        <EuiFlexGroup
+          alignItems="center"
+          justifyContent="flexEnd"
+          style={useUpdatedUX ? { padding: "0px" } : { padding: "5px 50px" }}
+          gutterSize="s"
+        >
           <EuiFlexItem grow={false}>
             <EuiSmallButtonEmpty onClick={this.onCancel} data-test-subj="createTransformCancelButton">
               Cancel
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 5e01b54e6..ecfe6e846 100644
--- a/public/pages/CreateTransform/containers/CreateTransformForm/__snapshots__/CreateTransformForm.test.tsx.snap
+++ b/public/pages/CreateTransform/containers/CreateTransformForm/__snapshots__/CreateTransformForm.test.tsx.snap
@@ -24,13 +24,13 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
               class="euiSteps"
             >
               <div
-                class="euiStep"
+                class="euiStep euiStep--small"
               >
                 <div
                   class="euiStep__titleWrapper"
                 >
                   <span
-                    class="euiStepNumber euiStep__circle"
+                    class="euiStepNumber euiStep__circle euiStepNumber--small"
                   >
                     <span
                       class="euiScreenReaderOnly"
@@ -45,7 +45,7 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
                     </span>
                   </span>
                   <h6
-                    class="euiTitle euiTitle--small euiStep__title"
+                    class="euiTitle euiTitle--xsmall euiStep__title"
                   >
                     Set up indices
                   </h6>
@@ -55,13 +55,13 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
                 />
               </div>
               <div
-                class="euiStep euiStep-isDisabled"
+                class="euiStep euiStep--small euiStep-isDisabled"
               >
                 <div
                   class="euiStep__titleWrapper"
                 >
                   <span
-                    class="euiStepNumber euiStepNumber--disabled euiStep__circle"
+                    class="euiStepNumber euiStepNumber--disabled euiStep__circle euiStepNumber--small"
                   >
                     <span
                       class="euiScreenReaderOnly"
@@ -76,7 +76,7 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
                     </span>
                   </span>
                   <h6
-                    class="euiTitle euiTitle--small euiStep__title"
+                    class="euiTitle euiTitle--xsmall euiStep__title"
                   >
                     Define transforms
                   </h6>
@@ -86,13 +86,13 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
                 />
               </div>
               <div
-                class="euiStep euiStep-isDisabled"
+                class="euiStep euiStep--small euiStep-isDisabled"
               >
                 <div
                   class="euiStep__titleWrapper"
                 >
                   <span
-                    class="euiStepNumber euiStepNumber--disabled euiStep__circle"
+                    class="euiStepNumber euiStepNumber--disabled euiStep__circle euiStepNumber--small"
                   >
                     <span
                       class="euiScreenReaderOnly"
@@ -107,7 +107,7 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
                     </span>
                   </span>
                   <h6
-                    class="euiTitle euiTitle--small euiStep__title"
+                    class="euiTitle euiTitle--xsmall euiStep__title"
                   >
                     Specify schedule
                   </h6>
@@ -117,13 +117,13 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
                 />
               </div>
               <div
-                class="euiStep euiStep-isDisabled"
+                class="euiStep euiStep--small euiStep-isDisabled"
               >
                 <div
                   class="euiStep__titleWrapper"
                 >
                   <span
-                    class="euiStepNumber euiStepNumber--disabled euiStep__circle"
+                    class="euiStepNumber euiStepNumber--disabled euiStep__circle euiStepNumber--small"
                   >
                     <span
                       class="euiScreenReaderOnly"
@@ -138,7 +138,7 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
                     </span>
                   </span>
                   <h6
-                    class="euiTitle euiTitle--small euiStep__title"
+                    class="euiTitle euiTitle--xsmall euiStep__title"
                   >
                     Review and create
                   </h6>
@@ -153,139 +153,129 @@ 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"
           />
           <div
             class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-            style="padding: 20px 20px;"
           >
             <div
-              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-              style="padding: 0px 10px;"
+              class="euiText euiText--small"
             >
+              <h2>
+                Job name and description
+              </h2>
+            </div>
+            <hr
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
+            />
+            <div>
               <div
-                class="euiFlexItem"
+                class="euiFormRow euiFormRow--compressed"
+                id="some_html_id-row"
               >
                 <div
-                  class="euiText euiText--small"
+                  class="euiFormRow__labelWrapper"
                 >
-                  <h1>
-                    Job name and description
-                    <span
-                      class="panel-header-count"
+                  <label
+                    aria-invalid="false"
+                    class="euiFormLabel euiFormRow__label"
+                    for="some_html_id"
+                  >
+                    <div
+                      class="euiText euiText--small"
                     >
-                       
-                       
-                    </span>
-                  </h1>
+                      <h3>
+                        Name
+                      </h3>
+                    </div>
+                  </label>
                 </div>
-              </div>
-            </div>
-            <hr
-              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
-            />
-            <div
-              style="padding: 10px;"
-            >
-              <div>
                 <div
-                  class="euiFormRow euiFormRow--compressed"
-                  id="some_html_id-row"
+                  class="euiFormRow__fieldWrapper"
                 >
                   <div
-                    class="euiFormRow__labelWrapper"
+                    class="euiFormControlLayout euiFormControlLayout--compressed"
                   >
-                    <label
-                      aria-invalid="false"
-                      class="euiFormLabel euiFormRow__label"
-                      for="some_html_id"
+                    <div
+                      class="euiFormControlLayout__childrenWrapper"
                     >
-                      Name
-                    </label>
+                      <input
+                        aria-describedby="some_html_id-help-0"
+                        class="euiFieldText euiFieldText--compressed"
+                        id="some_html_id"
+                        placeholder="my-transformjob1"
+                        type="text"
+                        value=""
+                      />
+                    </div>
                   </div>
                   <div
-                    class="euiFormRow__fieldWrapper"
+                    class="euiFormHelpText euiFormRow__text"
+                    id="some_html_id-help-0"
                   >
-                    <div
-                      class="euiFormControlLayout euiFormControlLayout--compressed"
-                    >
-                      <div
-                        class="euiFormControlLayout__childrenWrapper"
-                      >
-                        <input
-                          aria-describedby="some_html_id-help-0"
-                          class="euiFieldText euiFieldText--compressed"
-                          id="some_html_id"
-                          placeholder="my-transformjob1"
-                          type="text"
-                          value=""
-                        />
-                      </div>
-                    </div>
-                    <div
-                      class="euiFormHelpText euiFormRow__text"
-                      id="some_html_id-help-0"
-                    >
-                      Specify a unique, descriptive name.
-                    </div>
+                    Specify a unique, descriptive name.
                   </div>
                 </div>
+              </div>
+              <div
+                class="euiSpacer euiSpacer--l"
+              />
+              <div
+                class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+              >
                 <div
-                  class="euiSpacer euiSpacer--l"
-                />
-                <div
-                  class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+                  class="euiFlexItem euiFlexItem--flexGrowZero"
                 >
                   <div
-                    class="euiFlexItem euiFlexItem--flexGrowZero"
+                    class="euiText euiText--small"
                   >
-                    <div
-                      class="euiText euiText--extraSmall"
-                    >
-                      <h4>
-                        Description
-                      </h4>
-                    </div>
+                    <h3>
+                      Description
+                    </h3>
                   </div>
+                </div>
+                <div
+                  class="euiFlexItem"
+                >
                   <div
-                    class="euiFlexItem"
+                    class="euiText euiText--small"
                   >
                     <div
-                      class="euiText euiText--extraSmall"
+                      class="euiTextColor euiTextColor--subdued"
                     >
-                      <div
-                        class="euiTextColor euiTextColor--subdued"
-                      >
+                      <h3>
                         <i>
                            – optional
                         </i>
-                      </div>
+                      </h3>
                     </div>
                   </div>
                 </div>
+              </div>
+              <div
+                class="euiSpacer euiSpacer--xs"
+              />
+              <div
+                class="euiFormRow euiFormRow--compressed"
+                id="some_html_id-row"
+              >
                 <div
-                  class="euiSpacer euiSpacer--xs"
-                />
-                <div
-                  class="euiFormRow euiFormRow--compressed"
-                  id="some_html_id-row"
+                  class="euiFormRow__fieldWrapper"
                 >
-                  <div
-                    class="euiFormRow__fieldWrapper"
-                  >
-                    <textarea
-                      class="euiTextArea euiTextArea--resizeVertical euiTextArea--compressed"
-                      data-test-subj="description"
-                      id="some_html_id"
-                      rows="3"
-                    />
-                  </div>
+                  <textarea
+                    class="euiTextArea euiTextArea--resizeVertical euiTextArea--compressed"
+                    data-test-subj="description"
+                    id="some_html_id"
+                    rows="3"
+                  />
                 </div>
               </div>
             </div>
@@ -296,327 +286,321 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
           <div>
             <div
               class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-              style="padding: 20px 20px;"
             >
               <div
-                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-                style="padding: 0px 10px;"
+                class="euiText euiText--small"
               >
-                <div
-                  class="euiFlexItem"
-                >
-                  <div
-                    class="euiText euiText--small"
-                  >
-                    <h1>
-                      Indices
-                      <span
-                        class="panel-header-count"
-                      >
-                         
-                         
-                      </span>
-                    </h1>
-                  </div>
-                </div>
+                <h2>
+                  Indices
+                </h2>
               </div>
               <hr
                 class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
               />
-              <div
-                style="padding: 10px;"
-              >
-                <div>
+              <div>
+                <div
+                  class="euiFormRow euiFormRow--compressed"
+                  id="some_html_id-row"
+                >
                   <div
-                    class="euiFormRow euiFormRow--compressed"
-                    id="some_html_id-row"
+                    class="euiFormRow__labelWrapper"
                   >
-                    <div
-                      class="euiFormRow__labelWrapper"
+                    <label
+                      aria-invalid="false"
+                      class="euiFormLabel euiFormRow__label"
+                      for="some_html_id"
                     >
-                      <label
-                        aria-invalid="false"
-                        class="euiFormLabel euiFormRow__label"
-                        for="some_html_id"
+                      <div
+                        class="euiText euiText--small"
                       >
-                        Source index
-                      </label>
-                    </div>
+                        <h3>
+                          Source index
+                        </h3>
+                      </div>
+                    </label>
+                  </div>
+                  <div
+                    class="euiFormRow__fieldWrapper"
+                  >
                     <div
-                      class="euiFormRow__fieldWrapper"
+                      aria-describedby="some_html_id-help-0"
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      class="euiComboBox euiComboBox--compressed"
+                      data-test-subj="sourceIndexCombobox"
+                      role="combobox"
                     >
                       <div
-                        aria-describedby="some_html_id-help-0"
-                        aria-expanded="false"
-                        aria-haspopup="listbox"
-                        class="euiComboBox euiComboBox--compressed"
-                        data-test-subj="sourceIndexCombobox"
-                        role="combobox"
+                        class="euiFormControlLayout euiFormControlLayout--compressed"
                       >
                         <div
-                          class="euiFormControlLayout euiFormControlLayout--compressed"
+                          class="euiFormControlLayout__childrenWrapper"
                         >
                           <div
-                            class="euiFormControlLayout__childrenWrapper"
+                            class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isLoading euiComboBox__inputWrap-isClearable"
+                            data-test-subj="comboBoxInput"
+                            tabindex="-1"
                           >
-                            <div
-                              class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isLoading euiComboBox__inputWrap-isClearable"
-                              data-test-subj="comboBoxInput"
-                              tabindex="-1"
+                            <p
+                              class="euiComboBoxPlaceholder"
                             >
-                              <p
-                                class="euiComboBoxPlaceholder"
-                              >
-                                Select source index
-                              </p>
-                              <div
-                                class="euiComboBox__input"
-                                style="font-size: 14px; display: inline-block;"
-                              >
-                                <input
-                                  aria-controls=""
-                                  data-test-subj="comboBoxSearchInput"
-                                  id="some_html_id"
-                                  role="textbox"
-                                  style="box-sizing: content-box; width: 2px;"
-                                  value=""
-                                />
-                                <div
-                                  style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                                />
-                              </div>
-                            </div>
+                              Select source index
+                            </p>
                             <div
-                              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                              class="euiComboBox__input"
+                              style="font-size: 14px; display: inline-block;"
                             >
-                              <span
-                                class="euiLoadingSpinner euiLoadingSpinner--medium"
+                              <input
+                                aria-controls=""
+                                data-test-subj="comboBoxSearchInput"
+                                id="some_html_id"
+                                role="textbox"
+                                style="box-sizing: content-box; width: 2px;"
+                                value=""
+                              />
+                              <div
+                                style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
                               />
-                              <button
-                                aria-label="Open list of options"
-                                class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
-                                data-test-subj="comboBoxToggleListButton"
-                                type="button"
-                              >
-                                EuiIconMock
-                              </button>
                             </div>
                           </div>
+                          <div
+                            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                          >
+                            <span
+                              class="euiLoadingSpinner euiLoadingSpinner--medium"
+                            />
+                            <button
+                              aria-label="Open list of options"
+                              class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                              data-test-subj="comboBoxToggleListButton"
+                              type="button"
+                            >
+                              EuiIconMock
+                            </button>
+                          </div>
                         </div>
                       </div>
-                      <div
-                        class="euiFormHelpText euiFormRow__text"
-                        id="some_html_id-help-0"
-                      >
-                        The index where this transform job is performed on. Type in * as wildcard for index pattern. Indices cannot be changed once the job is created. Please ensure that you select the right source index.
-                      </div>
+                    </div>
+                    <div
+                      class="euiFormHelpText euiFormRow__text"
+                      id="some_html_id-help-0"
+                    >
+                      The index where this transform job is performed on. Type in * as wildcard for index pattern. Indices cannot be changed once the job is created. Please ensure that you select the right source index.
                     </div>
                   </div>
+                </div>
+                <div
+                  class="euiSpacer euiSpacer--s"
+                />
+                <div
+                  class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+                >
                   <div
-                    class="euiSpacer euiSpacer--s"
-                  />
-                  <div
-                    class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+                    class="euiFlexItem euiFlexItem--flexGrowZero"
                   >
                     <div
-                      class="euiFlexItem euiFlexItem--flexGrowZero"
+                      class="euiText euiText--small"
                     >
-                      <div
-                        class="euiText euiText--extraSmall"
-                      >
-                        <h4>
-                          Source index filter
-                        </h4>
-                      </div>
+                      <h3>
+                        Source index filter
+                      </h3>
                     </div>
+                  </div>
+                  <div
+                    class="euiFlexItem"
+                  >
                     <div
-                      class="euiFlexItem"
+                      class="euiText euiText--small"
                     >
                       <div
-                        class="euiText euiText--extraSmall"
+                        class="euiTextColor euiTextColor--subdued"
                       >
-                        <div
-                          class="euiTextColor euiTextColor--subdued"
-                        >
+                        <h3>
                           <i>
                              – optional
                           </i>
-                        </div>
+                        </h3>
                       </div>
                     </div>
                   </div>
+                </div>
+                <div
+                  class="euiText euiText--extraSmall"
+                  style="width: 400px;"
+                >
                   <div
-                    class="euiText euiText--extraSmall"
-                    style="width: 400px;"
+                    class="euiTextColor euiTextColor--subdued"
                   >
-                    <div
-                      class="euiTextColor euiTextColor--subdued"
-                    >
-                      You can use the custom DSL to filter a subset of the source index to use in the transform job, which optimizes the job for performance and computing resources. You cannot change these filters once the job is created.
-                    </div>
+                    You can use the custom DSL to filter a subset of the source index to use in the transform job, which optimizes the job for performance and computing resources. You cannot change these filters once the job is created.
                   </div>
-                  <div
-                    class="euiText euiText--extraSmall"
+                </div>
+                <div
+                  class="euiText euiText--extraSmall"
+                >
+                  <a
+                    class="euiLink euiLink--primary"
+                    href="https://opensearch.org/docs/opensearch/query-dsl/index/"
+                    rel="noopener noreferrer"
+                    target="_blank"
                   >
-                    <a
-                      class="euiLink euiLink--primary"
-                      href="https://opensearch.org/docs/opensearch/query-dsl/index/"
-                      rel="noopener noreferrer"
-                      target="_blank"
+                     
+                    Learn more
+                    EuiIconMock
+                    <span
+                      class="euiScreenReaderOnly"
                     >
-                       
-                      Learn more
-                      EuiIconMock
-                      <span
-                        class="euiScreenReaderOnly"
-                      >
-                        (opens in a new tab or window)
-                      </span>
-                    </a>
-                  </div>
-                  <div
-                    class="euiSpacer euiSpacer--s"
-                  />
+                      (opens in a new tab or window)
+                    </span>
+                  </a>
+                </div>
+                <div
+                  class="euiSpacer euiSpacer--s"
+                />
+                <span
+                  class="euiBadge euiBadge--iconRight"
+                  style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                >
                   <span
-                    class="euiBadge euiBadge--iconRight"
-                    style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                    class="euiBadge__content"
                   >
-                    <span
-                      class="euiBadge__content"
+                    <button
+                      aria-label="Edit Source Index Filter"
+                      class="euiBadge__childButton"
+                    />
+                    <button
+                      aria-label="Clear Source Index Filter"
+                      class="euiBadge__iconButton"
+                      title="Clear Source Index Filter"
+                      type="button"
                     >
-                      <button
-                        aria-label="Edit Source Index Filter"
-                        class="euiBadge__childButton"
-                      />
-                      <button
-                        aria-label="Clear Source Index Filter"
-                        class="euiBadge__iconButton"
-                        title="Clear Source Index Filter"
-                        type="button"
-                      >
-                        EuiIconMock
-                      </button>
-                    </span>
+                      EuiIconMock
+                    </button>
                   </span>
+                </span>
+                <div
+                  class="euiPopover euiPopover--anchorDownCenter"
+                >
                   <div
-                    class="euiPopover euiPopover--anchorDownCenter"
+                    class="euiPopover__anchor"
                   >
-                    <div
-                      class="euiPopover__anchor"
+                    <button
+                      class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall globalFilterBar__addButton"
+                      data-test-subj="addFilter"
+                      type="button"
                     >
-                      <button
-                        class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall globalFilterBar__addButton"
-                        data-test-subj="addFilter"
-                        type="button"
+                      <span
+                        class="euiButtonContent euiButtonEmpty__content"
                       >
                         <span
-                          class="euiButtonContent euiButtonEmpty__content"
+                          class="euiButtonEmpty__text"
                         >
-                          <span
-                            class="euiButtonEmpty__text"
-                          >
-                            Edit data filter
-                          </span>
+                          Edit data filter
                         </span>
-                      </button>
-                    </div>
-                  </div>
-                  <div
-                    class="euiText euiText--extraSmall"
-                  >
-                    <div
-                      class="euiTextColor euiTextColor--danger"
-                    />
+                      </span>
+                    </button>
                   </div>
+                </div>
+                <div
+                  class="euiText euiText--extraSmall"
+                >
                   <div
-                    class="euiSpacer euiSpacer--s"
-                  />
-                  <hr
-                    class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
+                    class="euiTextColor euiTextColor--danger"
                   />
+                </div>
+                <div
+                  class="euiSpacer euiSpacer--s"
+                />
+                <hr
+                  class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
+                />
+                <div
+                  class="euiFormRow euiFormRow--compressed"
+                  id="some_html_id-row"
+                >
                   <div
-                    class="euiFormRow euiFormRow--compressed"
-                    id="some_html_id-row"
+                    class="euiFormRow__labelWrapper"
                   >
-                    <div
-                      class="euiFormRow__labelWrapper"
+                    <label
+                      aria-invalid="false"
+                      class="euiFormLabel euiFormRow__label"
+                      for="some_html_id"
                     >
-                      <label
-                        aria-invalid="false"
-                        class="euiFormLabel euiFormRow__label"
-                        for="some_html_id"
+                      <div
+                        class="euiText euiText--small"
                       >
-                        Target index
-                      </label>
-                    </div>
+                        <h3>
+                          Target index
+                        </h3>
+                      </div>
+                    </label>
+                  </div>
+                  <div
+                    class="euiFormRow__fieldWrapper"
+                  >
                     <div
-                      class="euiFormRow__fieldWrapper"
+                      aria-describedby="some_html_id-help-0"
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      class="euiComboBox euiComboBox--compressed"
+                      data-test-subj="targetIndexCombobox"
+                      role="combobox"
                     >
                       <div
-                        aria-describedby="some_html_id-help-0"
-                        aria-expanded="false"
-                        aria-haspopup="listbox"
-                        class="euiComboBox euiComboBox--compressed"
-                        data-test-subj="targetIndexCombobox"
-                        role="combobox"
+                        class="euiFormControlLayout euiFormControlLayout--compressed"
                       >
                         <div
-                          class="euiFormControlLayout euiFormControlLayout--compressed"
+                          class="euiFormControlLayout__childrenWrapper"
                         >
                           <div
-                            class="euiFormControlLayout__childrenWrapper"
+                            class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isLoading euiComboBox__inputWrap-isClearable"
+                            data-test-subj="comboBoxInput"
+                            tabindex="-1"
                           >
-                            <div
-                              class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isLoading euiComboBox__inputWrap-isClearable"
-                              data-test-subj="comboBoxInput"
-                              tabindex="-1"
+                            <p
+                              class="euiComboBoxPlaceholder"
                             >
-                              <p
-                                class="euiComboBoxPlaceholder"
-                              >
-                                Select or create target index
-                              </p>
-                              <div
-                                class="euiComboBox__input"
-                                style="font-size: 14px; display: inline-block;"
-                              >
-                                <input
-                                  aria-controls=""
-                                  data-test-subj="comboBoxSearchInput"
-                                  id="some_html_id"
-                                  role="textbox"
-                                  style="box-sizing: content-box; width: 2px;"
-                                  value=""
-                                />
-                                <div
-                                  style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                                />
-                              </div>
-                            </div>
+                              Select or create target index
+                            </p>
                             <div
-                              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                              class="euiComboBox__input"
+                              style="font-size: 14px; display: inline-block;"
                             >
-                              <span
-                                class="euiLoadingSpinner euiLoadingSpinner--medium"
+                              <input
+                                aria-controls=""
+                                data-test-subj="comboBoxSearchInput"
+                                id="some_html_id"
+                                role="textbox"
+                                style="box-sizing: content-box; width: 2px;"
+                                value=""
+                              />
+                              <div
+                                style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
                               />
-                              <button
-                                aria-label="Open list of options"
-                                class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
-                                data-test-subj="comboBoxToggleListButton"
-                                type="button"
-                              >
-                                EuiIconMock
-                              </button>
                             </div>
                           </div>
+                          <div
+                            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                          >
+                            <span
+                              class="euiLoadingSpinner euiLoadingSpinner--medium"
+                            />
+                            <button
+                              aria-label="Open list of options"
+                              class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                              data-test-subj="comboBoxToggleListButton"
+                              type="button"
+                            >
+                              EuiIconMock
+                            </button>
+                          </div>
                         </div>
                       </div>
-                      <div
-                        class="euiFormHelpText euiFormRow__text"
-                        id="some_html_id-help-0"
-                      >
-                        The index stores transform results. You can look up an existing index to reuse or type to create a new index.
-                      </div>
+                    </div>
+                    <div
+                      class="euiFormHelpText euiFormRow__text"
+                      id="some_html_id-help-0"
+                    >
+                      The index stores transform results. You can look up an existing index to reuse or type to create a new index.
                     </div>
                   </div>
                 </div>
@@ -634,9 +618,13 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
                 <div
                   class="euiTextColor euiTextColor--default"
                 >
-                  <p>
-                    You can't change indices after creating a job. Double-check the source and target index names before proceeding.
-                  </p>
+                  <div
+                    class="euiText euiText--small"
+                  >
+                    <p>
+                      You can't change indices after creating a job. Double-check the source and target index names before proceeding.
+                    </p>
+                  </div>
                 </div>
               </div>
             </div>
@@ -648,7 +636,7 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
       />
     </div>
     <div
-      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+      class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
       style="padding: 5px 50px;"
     >
       <div
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 8f4d603a4..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 />
             </>
           );
@@ -87,7 +87,7 @@ export default class ReviewAndCreateStep extends Component<ReviewAndCreateStepPr
             <EuiSpacer />
             <ReviewSchedule {...this.props} />
             <EuiSpacer />
-            <EuiCallOut color="warning">
+            <EuiCallOut color="warning" size="s">
               <p>You can only change the description and schedule after creating a job. Double-check your choices before proceeding.</p>
             </EuiCallOut>
           </EuiFlexItem>
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 3fb2fe53b..ed90332b8 100644
--- a/public/pages/IndexDetail/containers/IndexDetail/IndexDetail.tsx
+++ b/public/pages/IndexDetail/containers/IndexDetail/IndexDetail.tsx
@@ -14,8 +14,11 @@ import {
   EuiCompressedFormRow,
   EuiLink,
   EuiTabbedContentTab,
+  EuiText,
+  EuiHorizontalRule,
+  EuiPanel,
 } from "@elastic/eui";
-import { get } from "lodash";
+import { get, size } from "lodash";
 import { RouteComponentProps } from "react-router-dom";
 import { IndexItem } from "../../../../../models/interfaces";
 import IndicesActions from "../../../Indices/containers/IndicesActions";
@@ -148,10 +151,14 @@ export default function IndexDetail(props: IndexDetailModalProps) {
         content: (
           <>
             <EuiSpacer />
-            <ContentPanel title="Index settings" titleSize="s">
+            <EuiPanel>
+              <EuiText size="s">
+                <h2>Index settings</h2>
+              </EuiText>
+              <EuiHorizontalRule margin="xs" />
               <EuiSpacer size="s" />
               <IndexFormWrapper {...indexFormReadonlyCommonProps} key={IndicesUpdateMode.settings} mode={IndicesUpdateMode.settings} />
-            </ContentPanel>
+            </EuiPanel>
           </>
         ),
       },
@@ -162,38 +169,34 @@ export default function IndexDetail(props: IndexDetailModalProps) {
         content: (
           <>
             <EuiSpacer />
-            <ContentPanel
-              title={
-                <>
-                  <EuiTitle size="s">
-                    <span>Index mappings</span>
-                  </EuiTitle>
-                  <EuiCompressedFormRow
-                    fullWidth
-                    helpText={
-                      <>
-                        <div>
-                          Define how documents and their fields are stored and indexed.{" "}
-                          <EuiLink
-                            target="_blank"
-                            external
-                            href={`https://opensearch.org/docs/${coreService?.docLinks.DOC_LINK_VERSION}/opensearch/mappings/`}
-                          >
-                            Learn more
-                          </EuiLink>
-                        </div>
-                        <div>Mappings and field types cannot be changed once they have been added.</div>
-                      </>
-                    }
-                  >
-                    <></>
-                  </EuiCompressedFormRow>
-                </>
-              }
-            >
+            <EuiPanel>
+              <EuiText size="s">
+                <h2>Index mappings</h2>
+              </EuiText>
+              <EuiCompressedFormRow
+                fullWidth
+                helpText={
+                  <>
+                    <div>
+                      Define how documents and their fields are stored and indexed.{" "}
+                      <EuiLink
+                        target="_blank"
+                        external
+                        href={`https://opensearch.org/docs/${coreService?.docLinks.DOC_LINK_VERSION}/opensearch/mappings/`}
+                      >
+                        Learn more
+                      </EuiLink>
+                    </div>
+                    <div>Mappings and field types cannot be changed once they have been added.</div>
+                  </>
+                }
+              >
+                <></>
+              </EuiCompressedFormRow>
+              <EuiHorizontalRule margin="xs" />
               <EuiSpacer size="s" />
               <IndexFormWrapper {...indexFormReadonlyCommonProps} key={IndicesUpdateMode.mappings} mode={IndicesUpdateMode.mappings} />
-            </ContentPanel>
+            </EuiPanel>
           </>
         ),
       },
@@ -204,10 +207,13 @@ export default function IndexDetail(props: IndexDetailModalProps) {
         content: (
           <>
             <EuiSpacer />
-            <ContentPanel title="Index alias" titleSize="s">
-              <EuiSpacer size="s" />
+            <EuiPanel>
+              <EuiText size="s">
+                <h2>Index alias</h2>
+              </EuiText>
+              <EuiHorizontalRule margin="xs" />
               <IndexFormWrapper {...indexFormReadonlyCommonProps} key={IndicesUpdateMode.alias} mode={IndicesUpdateMode.alias} />
-            </ContentPanel>
+            </EuiPanel>
           </>
         ),
       },
@@ -257,9 +263,13 @@ export default function IndexDetail(props: IndexDetailModalProps) {
   const Common = () => {
     return (
       <>
-        <ContentPanel title="Overview" titleSize="s">
-          <EuiDescriptionList>
-            <EuiSpacer />
+        <EuiPanel>
+          <EuiText size="s">
+            <h2>Overview</h2>
+          </EuiText>
+          <EuiHorizontalRule margin="xs" />
+          <EuiDescriptionList compressed>
+            <EuiSpacer size="s" />
             <div>
               {OVERVIEW_DISPLAY_INFO.map((item) => {
                 let valueContent = null;
@@ -271,11 +281,16 @@ export default function IndexDetail(props: IndexDetailModalProps) {
                 }
                 return (
                   <div
-                    style={{ display: "inline-block", width: "33%", verticalAlign: "top", marginBottom: "20px", padding: "0 1%" }}
+                    style={{ display: "inline-block", width: "33%", verticalAlign: "top", marginBottom: "20px" }}
                     key={item.label}
                     data-test-subj={`indexDetailOverviewItem-${item.label}`}
                   >
-                    <EuiDescriptionListTitle>{item.label}</EuiDescriptionListTitle>
+                    <EuiDescriptionListTitle>
+                      <EuiText size="s">
+                        {" "}
+                        <h4>{item.label}</h4>{" "}
+                      </EuiText>
+                    </EuiDescriptionListTitle>
                     <EuiDescriptionListDescription style={{ wordBreak: item.label === "Index name" ? "break-word" : undefined }}>
                       {valueContent}
                     </EuiDescriptionListDescription>
@@ -284,9 +299,10 @@ export default function IndexDetail(props: IndexDetailModalProps) {
               })}
             </div>
           </EuiDescriptionList>
-        </ContentPanel>
+        </EuiPanel>
         <EuiSpacer />
         <EuiTabbedContent
+          size="s"
           selectedTab={selectedTab}
           onTabClick={(tab) => {
             if (ref.current?.hasUnsavedChanges?.(selectedTab.mode)) {
@@ -337,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/Indices/components/ApplyPolicyModal/ApplyPolicyModal.tsx b/public/pages/Indices/components/ApplyPolicyModal/ApplyPolicyModal.tsx
index 63127e04d..0879df3fa 100644
--- a/public/pages/Indices/components/ApplyPolicyModal/ApplyPolicyModal.tsx
+++ b/public/pages/Indices/components/ApplyPolicyModal/ApplyPolicyModal.tsx
@@ -259,13 +259,12 @@ export default class ApplyPolicyModal extends Component<ApplyPolicyModalProps, A
 
     return (
       <Fragment>
-        <EuiText size="xs" grow={false}>
-          <p>
-            <strong>Preview</strong>
-          </p>
+        <EuiSpacer />
+        <EuiText size="s" grow={false}>
+          <h4>Preview</h4>
         </EuiText>
         <EuiSpacer size="s" />
-        <EuiCodeBlock language="json" fontSize="m" style={{ height: "200px" }}>
+        <EuiCodeBlock language="json" fontSize="s" style={{ height: "200px" }}>
           {policyString}
         </EuiCodeBlock>
         <EuiSpacer size="m" />
@@ -283,17 +282,32 @@ export default class ApplyPolicyModal extends Component<ApplyPolicyModalProps, A
             // @ts-ignore */}
         <EuiModal onCancel={onClose} onClose={onClose}>
           <EuiModalHeader>
-            <EuiModalHeaderTitle>Apply policy</EuiModalHeaderTitle>
+            <EuiModalHeaderTitle>
+              {" "}
+              <EuiText size="s">
+                {" "}
+                <h2>Apply policy</h2>{" "}
+              </EuiText>{" "}
+            </EuiModalHeaderTitle>
           </EuiModalHeader>
 
           <EuiModalBody>
-            <EuiText size="xs" grow={false}>
+            <EuiText size="s" grow={false}>
               <p>
                 Choose the policy you want to use for the selected indices. A copy of the policy will be created and applied to the indices.
               </p>
             </EuiText>
             <EuiSpacer size="m" />
-            <EuiCompressedFormRow label="Policy ID" isInvalid={hasSubmitted && !!selectedPolicyError} error={selectedPolicyError} fullWidth>
+            <EuiCompressedFormRow
+              label={
+                <EuiText size="s">
+                  <h4>Policy ID</h4>
+                </EuiText>
+              }
+              isInvalid={hasSubmitted && !!selectedPolicyError}
+              error={selectedPolicyError}
+              fullWidth
+            >
               <EuiCompressedComboBox
                 placeholder="Search policies"
                 async
diff --git a/public/pages/Indices/components/ApplyPolicyModal/__snapshots__/ApplyPolicyModal.test.tsx.snap b/public/pages/Indices/components/ApplyPolicyModal/__snapshots__/ApplyPolicyModal.test.tsx.snap
index a84d2e80f..0c7b69401 100644
--- a/public/pages/Indices/components/ApplyPolicyModal/__snapshots__/ApplyPolicyModal.test.tsx.snap
+++ b/public/pages/Indices/components/ApplyPolicyModal/__snapshots__/ApplyPolicyModal.test.tsx.snap
@@ -34,7 +34,17 @@ exports[`<ApplyPolicyModal /> spec renders the component 1`] = `
           <div
             class="euiModalHeader__title"
           >
-            Apply policy
+             
+            <div
+              class="euiText euiText--small"
+            >
+               
+              <h2>
+                Apply policy
+              </h2>
+               
+            </div>
+             
           </div>
         </div>
         <div
@@ -44,7 +54,7 @@ exports[`<ApplyPolicyModal /> spec renders the component 1`] = `
             class="euiModalBody__overflow"
           >
             <div
-              class="euiText euiText--extraSmall euiText--constrainedWidth"
+              class="euiText euiText--small euiText--constrainedWidth"
             >
               <p>
                 Choose the policy you want to use for the selected indices. A copy of the policy will be created and applied to the indices.
@@ -65,7 +75,13 @@ exports[`<ApplyPolicyModal /> spec renders the component 1`] = `
                   class="euiFormLabel euiFormRow__label"
                   for="some_html_id"
                 >
-                  Policy ID
+                  <div
+                    class="euiText euiText--small"
+                  >
+                    <h4>
+                      Policy ID
+                    </h4>
+                  </div>
                 </label>
               </div>
               <div
diff --git a/public/pages/Indices/components/CloseIndexModal/CloseIndexModal.tsx b/public/pages/Indices/components/CloseIndexModal/CloseIndexModal.tsx
index b7ae88670..e87457b19 100644
--- a/public/pages/Indices/components/CloseIndexModal/CloseIndexModal.tsx
+++ b/public/pages/Indices/components/CloseIndexModal/CloseIndexModal.tsx
@@ -44,25 +44,33 @@ export default function CloseIndexModal(props: CloseIndexModalProps) {
   return (
     <EuiModal onClose={onClose}>
       <EuiModalHeader>
-        <EuiModalHeaderTitle>Close indexes</EuiModalHeaderTitle>
+        <EuiModalHeaderTitle>
+          <EuiText size="s">
+            <h2>Close indexes</h2>
+          </EuiText>
+        </EuiModalHeaderTitle>
       </EuiModalHeader>
 
       <EuiModalBody>
         <>
-          <EuiCallOut color="warning" hidden={!showWarning}>
+          <EuiCallOut color="warning" size="s" hidden={!showWarning}>
             This index may contain critical system data. Closing system indexes may break OpenSearch.
+            <EuiSpacer />
           </EuiCallOut>
-          <EuiSpacer />
         </>
         <div style={{ lineHeight: 1.5 }}>
-          <p>The following index will be closed. It is not possible to index documents or to search for documents in a closed index.</p>
-          <ul style={{ listStyleType: "disc", listStylePosition: "inside" }}>
-            {selectedItems.map((item) => (
-              <li key={item}>{item}</li>
-            ))}
-          </ul>
+          <EuiText size="s">
+            <p>The following index will be closed. It is not possible to index documents or to search for documents in a closed index.</p>
+          </EuiText>
+          <EuiText size="s">
+            <ul style={{ listStyleType: "disc", listStylePosition: "inside" }}>
+              {selectedItems.map((item) => (
+                <li key={item}>{item}</li>
+              ))}
+            </ul>
+          </EuiText>
           <EuiSpacer />
-          <EuiText color="subdued">
+          <EuiText color="subdued" size="s">
             To confirm your action, type <b style={{ color: "#000" }}>close</b>.
           </EuiText>
           <EuiCompressedFieldText placeholder="close" fullWidth value={value} onChange={(e) => setValue(e.target.value)} />
diff --git a/public/pages/Indices/components/CloseIndexModal/__snapshots__/CloseIndexModal.test.tsx.snap b/public/pages/Indices/components/CloseIndexModal/__snapshots__/CloseIndexModal.test.tsx.snap
index bde05c2af..b489ac83d 100644
--- a/public/pages/Indices/components/CloseIndexModal/__snapshots__/CloseIndexModal.test.tsx.snap
+++ b/public/pages/Indices/components/CloseIndexModal/__snapshots__/CloseIndexModal.test.tsx.snap
@@ -39,7 +39,13 @@ HTMLCollection [
             <div
               class="euiModalHeader__title"
             >
-              Close indexes
+              <div
+                class="euiText euiText--small"
+              >
+                <h2>
+                  Close indexes
+                </h2>
+              </div>
             </div>
           </div>
           <div
@@ -49,36 +55,44 @@ HTMLCollection [
               class="euiModalBody__overflow"
             >
               <div
-                class="euiCallOut euiCallOut--warning"
+                class="euiCallOut euiCallOut--warning euiCallOut--small"
                 hidden=""
               >
                 <div
-                  class="euiText euiText--small"
+                  class="euiText euiText--extraSmall"
                 >
                   <div
                     class="euiTextColor euiTextColor--default"
                   >
                     This index may contain critical system data. Closing system indexes may break OpenSearch.
+                    <div
+                      class="euiSpacer euiSpacer--l"
+                    />
                   </div>
                 </div>
               </div>
-              <div
-                class="euiSpacer euiSpacer--l"
-              />
               <div
                 style="line-height: 1.5;"
               >
-                <p>
-                  The following index will be closed. It is not possible to index documents or to search for documents in a closed index.
-                </p>
-                <ul
-                  style="list-style-type: disc; list-style-position: inside;"
-                />
+                <div
+                  class="euiText euiText--small"
+                >
+                  <p>
+                    The following index will be closed. It is not possible to index documents or to search for documents in a closed index.
+                  </p>
+                </div>
+                <div
+                  class="euiText euiText--small"
+                >
+                  <ul
+                    style="list-style-type: disc; list-style-position: inside;"
+                  />
+                </div>
                 <div
                   class="euiSpacer euiSpacer--l"
                 />
                 <div
-                  class="euiText euiText--medium"
+                  class="euiText euiText--small"
                 >
                   <div
                     class="euiTextColor euiTextColor--subdued"
diff --git a/public/pages/Indices/components/DeleteIndexModal/DeleteIndexModal.tsx b/public/pages/Indices/components/DeleteIndexModal/DeleteIndexModal.tsx
index 087b38257..ddefa8ed4 100644
--- a/public/pages/Indices/components/DeleteIndexModal/DeleteIndexModal.tsx
+++ b/public/pages/Indices/components/DeleteIndexModal/DeleteIndexModal.tsx
@@ -44,27 +44,37 @@ export default function DeleteIndexModal(props: DeleteIndexModalProps) {
   return (
     <EuiModal onClose={onClose}>
       <EuiModalHeader>
-        <EuiModalHeaderTitle>Delete indexes</EuiModalHeaderTitle>
+        <EuiModalHeaderTitle>
+          {" "}
+          <EuiText size="s">
+            {" "}
+            <h2>Delete indexes</h2>{" "}
+          </EuiText>{" "}
+        </EuiModalHeaderTitle>
       </EuiModalHeader>
 
       <EuiModalBody>
         {hasSystemIndex ? (
           <>
-            <EuiCallOut color="warning">
+            <EuiCallOut color="warning" size="s">
               These indexes may contain critical system data. Deleting system indexes may break OpenSearch.
             </EuiCallOut>
             <EuiSpacer />
           </>
         ) : null}
         <div style={{ lineHeight: 1.5 }}>
-          <p>The following index will be permanently deleted. This action cannot be undone.</p>
-          <ul style={{ listStyleType: "disc", listStylePosition: "inside" }}>
-            {selectedItems.map((item) => (
-              <li key={item}>{item}</li>
-            ))}
-          </ul>
+          <EuiText size="s">
+            <p>The following index will be permanently deleted. This action cannot be undone.</p>
+          </EuiText>
+          <EuiText size="s">
+            <ul style={{ listStyleType: "disc", listStylePosition: "inside" }}>
+              {selectedItems.map((item) => (
+                <li key={item}>{item}</li>
+              ))}
+            </ul>
+          </EuiText>
           <EuiSpacer />
-          <EuiText color="subdued">
+          <EuiText color="subdued" size="s">
             To confirm your action, type <b style={{ color: "#000" }}>delete</b>.
           </EuiText>
           <EuiCompressedFieldText placeholder="delete" fullWidth value={value} onChange={(e) => setValue(e.target.value)} />
diff --git a/public/pages/Indices/components/DeleteIndexModal/__snapshots__/DeleteIndexModal.test.tsx.snap b/public/pages/Indices/components/DeleteIndexModal/__snapshots__/DeleteIndexModal.test.tsx.snap
index 07a482145..89f5fcbea 100644
--- a/public/pages/Indices/components/DeleteIndexModal/__snapshots__/DeleteIndexModal.test.tsx.snap
+++ b/public/pages/Indices/components/DeleteIndexModal/__snapshots__/DeleteIndexModal.test.tsx.snap
@@ -39,7 +39,17 @@ HTMLCollection [
             <div
               class="euiModalHeader__title"
             >
-              Delete indexes
+               
+              <div
+                class="euiText euiText--small"
+              >
+                 
+                <h2>
+                  Delete indexes
+                </h2>
+                 
+              </div>
+               
             </div>
           </div>
           <div
@@ -49,10 +59,10 @@ HTMLCollection [
               class="euiModalBody__overflow"
             >
               <div
-                class="euiCallOut euiCallOut--warning"
+                class="euiCallOut euiCallOut--warning euiCallOut--small"
               >
                 <div
-                  class="euiText euiText--small"
+                  class="euiText euiText--extraSmall"
                 >
                   <div
                     class="euiTextColor euiTextColor--default"
@@ -67,24 +77,32 @@ HTMLCollection [
               <div
                 style="line-height: 1.5;"
               >
-                <p>
-                  The following index will be permanently deleted. This action cannot be undone.
-                </p>
-                <ul
-                  style="list-style-type: disc; list-style-position: inside;"
+                <div
+                  class="euiText euiText--small"
                 >
-                  <li>
-                    .kibana
-                  </li>
-                  <li>
-                    test
-                  </li>
-                </ul>
+                  <p>
+                    The following index will be permanently deleted. This action cannot be undone.
+                  </p>
+                </div>
+                <div
+                  class="euiText euiText--small"
+                >
+                  <ul
+                    style="list-style-type: disc; list-style-position: inside;"
+                  >
+                    <li>
+                      .kibana
+                    </li>
+                    <li>
+                      test
+                    </li>
+                  </ul>
+                </div>
                 <div
                   class="euiSpacer euiSpacer--l"
                 />
                 <div
-                  class="euiText euiText--medium"
+                  class="euiText euiText--small"
                 >
                   <div
                     class="euiTextColor euiTextColor--subdued"
diff --git a/public/pages/Indices/components/IndexControls/IndexControls.tsx b/public/pages/Indices/components/IndexControls/IndexControls.tsx
index 97e4a904a..d4b177221 100644
--- a/public/pages/Indices/components/IndexControls/IndexControls.tsx
+++ b/public/pages/Indices/components/IndexControls/IndexControls.tsx
@@ -123,6 +123,7 @@ export default class IndexControls extends Component<IndexControlsProps, IndexCo
       <EuiFlexGroup style={{ padding: "0px 5px" }} alignItems="center">
         <EuiFlexItem>
           <EuiSearchBar
+            compressed
             query={search}
             box={{ placeholder: "Search", schema, incremental: true }}
             onChange={onSearchChange}
diff --git a/public/pages/Indices/components/IndexControls/__snapshots__/IndexControls.test.tsx.snap b/public/pages/Indices/components/IndexControls/__snapshots__/IndexControls.test.tsx.snap
index a2d92b546..ab8874448 100644
--- a/public/pages/Indices/components/IndexControls/__snapshots__/IndexControls.test.tsx.snap
+++ b/public/pages/Indices/components/IndexControls/__snapshots__/IndexControls.test.tsx.snap
@@ -15,14 +15,14 @@ exports[`<IndexControls /> spec renders data streams selection field 1`] = `
         class="euiFlexItem euiSearchBar__searchHolder"
       >
         <div
-          class="euiFormControlLayout euiFormControlLayout--fullWidth"
+          class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
         >
           <div
             class="euiFormControlLayout__childrenWrapper"
           >
             <input
               aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
-              class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch-isClearable"
+              class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed euiFieldSearch-isClearable"
               placeholder="Search"
               type="search"
               value="testing"
@@ -41,7 +41,7 @@ exports[`<IndexControls /> spec renders data streams selection field 1`] = `
             >
               <button
                 aria-label="Clear input"
-                class="euiFormControlLayoutClearButton"
+                class="euiFormControlLayoutClearButton euiFormControlLayoutClearButton--small"
                 type="button"
               >
                 EuiIconMock
@@ -64,7 +64,7 @@ exports[`<IndexControls /> spec renders data streams selection field 1`] = `
               class="euiPopover__anchor"
             >
               <button
-                class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton--hasIcon"
+                class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton--hasIcon"
                 type="button"
               >
                 <span
@@ -142,14 +142,14 @@ exports[`<IndexControls /> spec renders the component 1`] = `
         class="euiFlexItem euiSearchBar__searchHolder"
       >
         <div
-          class="euiFormControlLayout euiFormControlLayout--fullWidth"
+          class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
         >
           <div
             class="euiFormControlLayout__childrenWrapper"
           >
             <input
               aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
-              class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch-isClearable"
+              class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed euiFieldSearch-isClearable"
               placeholder="Search"
               type="search"
               value="testing"
@@ -168,7 +168,7 @@ exports[`<IndexControls /> spec renders the component 1`] = `
             >
               <button
                 aria-label="Clear input"
-                class="euiFormControlLayoutClearButton"
+                class="euiFormControlLayoutClearButton euiFormControlLayoutClearButton--small"
                 type="button"
               >
                 EuiIconMock
diff --git a/public/pages/Indices/components/IndexEmptyPrompt/IndexEmptyPrompt.tsx b/public/pages/Indices/components/IndexEmptyPrompt/IndexEmptyPrompt.tsx
index c1e9d64b7..60290ce92 100644
--- a/public/pages/Indices/components/IndexEmptyPrompt/IndexEmptyPrompt.tsx
+++ b/public/pages/Indices/components/IndexEmptyPrompt/IndexEmptyPrompt.tsx
@@ -44,7 +44,7 @@ const IndexEmptyPrompt: React.SFC<IndexEmptyPromptProps> = (props) => (
   <EuiEmptyPrompt
     style={{ maxWidth: "45em" }}
     body={
-      <EuiText>
+      <EuiText size="s">
         <p>{getMessagePrompt(props)}</p>
       </EuiText>
     }
diff --git a/public/pages/Indices/components/IndexEmptyPrompt/__snapshots__/IndexEmptyPrompt.test.tsx.snap b/public/pages/Indices/components/IndexEmptyPrompt/__snapshots__/IndexEmptyPrompt.test.tsx.snap
index 2dcb8b9b5..47ae172a9 100644
--- a/public/pages/Indices/components/IndexEmptyPrompt/__snapshots__/IndexEmptyPrompt.test.tsx.snap
+++ b/public/pages/Indices/components/IndexEmptyPrompt/__snapshots__/IndexEmptyPrompt.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`<IndexEmptyPrompt /> spec renders the component 1`] = `
       class="euiText euiText--medium"
     >
       <div
-        class="euiText euiText--medium"
+        class="euiText euiText--small"
       >
         <p>
           There are no existing indices. Create an index to view it here.
diff --git a/public/pages/Indices/components/NotificationModal/NotificationModal.tsx b/public/pages/Indices/components/NotificationModal/NotificationModal.tsx
index 7bab02f0a..48512ec72 100644
--- a/public/pages/Indices/components/NotificationModal/NotificationModal.tsx
+++ b/public/pages/Indices/components/NotificationModal/NotificationModal.tsx
@@ -13,6 +13,7 @@ import {
   EuiPanel,
   EuiEmptyPrompt,
   EuiSmallButton,
+  EuiText,
 } from "@elastic/eui";
 import { ServicesContext } from "../../../../services";
 import { BrowserServices } from "../../../../models/interfaces";
@@ -182,7 +183,12 @@ const Notifications = ({ onClose, visible }: NotificationsProps) => {
   return (
     <EuiModal onClose={onClose} maxWidth={false}>
       <EuiModalHeader>
-        <EuiModalHeaderTitle>Notification settings</EuiModalHeaderTitle>
+        <EuiModalHeaderTitle>
+          <EuiText size="s">
+            {" "}
+            <h2>Notification settings</h2>{" "}
+          </EuiText>
+        </EuiModalHeaderTitle>
         <EuiFlexItem grow={false}>
           <EuiSmallButton iconType="popout" href="notifications-dashboards#/channels" target="_blank">
             Manage channels
@@ -196,8 +202,18 @@ const Notifications = ({ onClose, visible }: NotificationsProps) => {
               <EuiEmptyPrompt
                 iconType="alert"
                 iconColor="danger"
-                title={<h2>Error loading Notification settings</h2>}
-                body={<p>You do not have permissions to view Notification settings. Contact your administrator to request permissions.</p>}
+                title={
+                  <EuiText size="s">
+                    {" "}
+                    <h2>Error loading Notification settings</h2>{" "}
+                  </EuiText>
+                }
+                body={
+                  <EuiText size="s">
+                    {" "}
+                    <p>You do not have permissions to view Notification settings. Contact your administrator to request permissions.</p>
+                  </EuiText>
+                }
               />
             </EuiPanel>
           ) : (
@@ -253,7 +269,14 @@ const Notifications = ({ onClose, visible }: NotificationsProps) => {
                 });
                 return (
                   <CustomFormRow
-                    label={<div className="ISM-notifications-first-letter-uppercase">{record.title}</div>}
+                    label={
+                      <div className="ISM-notifications-first-letter-uppercase">
+                        <EuiText size="s">
+                          {" "}
+                          <h3>{record.title}</h3>{" "}
+                        </EuiText>
+                      </div>
+                    }
                     helpText={ActionTypeMapDescription[getKeyByValue(ActionTypeMapTitle, record.title) as ActionType]}
                     direction="hoz"
                     key={record.action_name}
diff --git a/public/pages/Indices/components/OpenIndexModal/OpenIndexModal.tsx b/public/pages/Indices/components/OpenIndexModal/OpenIndexModal.tsx
index cc91861d3..3257b7ab8 100644
--- a/public/pages/Indices/components/OpenIndexModal/OpenIndexModal.tsx
+++ b/public/pages/Indices/components/OpenIndexModal/OpenIndexModal.tsx
@@ -13,6 +13,7 @@ import {
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiSpacer,
+  EuiText,
 } from "@elastic/eui";
 
 interface OpenIndexModalProps {
@@ -31,17 +32,27 @@ export default function OpenIndexModal(props: OpenIndexModalProps) {
   return (
     <EuiModal onClose={onClose}>
       <EuiModalHeader>
-        <EuiModalHeaderTitle>Open indexes</EuiModalHeaderTitle>
+        <EuiModalHeaderTitle>
+          {" "}
+          <EuiText size="s">
+            {" "}
+            <h2>Open indexes</h2>{" "}
+          </EuiText>{" "}
+        </EuiModalHeaderTitle>
       </EuiModalHeader>
 
       <EuiModalBody>
         <div style={{ lineHeight: 1.5 }}>
-          <p>The following index will be opened.</p>
-          <ul style={{ listStyleType: "disc", listStylePosition: "inside" }}>
-            {selectedItems.map((item) => (
-              <li key={item}>{item}</li>
-            ))}
-          </ul>
+          <EuiText size="s">
+            <p>The following index will be opened.</p>
+          </EuiText>
+          <EuiText size="s">
+            <ul style={{ listStyleType: "disc", listStylePosition: "inside" }}>
+              {selectedItems.map((item) => (
+                <li key={item}>{item}</li>
+              ))}
+            </ul>
+          </EuiText>
           <EuiSpacer />
         </div>
       </EuiModalBody>
diff --git a/public/pages/Indices/components/OpenIndexModal/__snapshots__/OpenIndexModal.test.tsx.snap b/public/pages/Indices/components/OpenIndexModal/__snapshots__/OpenIndexModal.test.tsx.snap
index 5941ce115..5561f0681 100644
--- a/public/pages/Indices/components/OpenIndexModal/__snapshots__/OpenIndexModal.test.tsx.snap
+++ b/public/pages/Indices/components/OpenIndexModal/__snapshots__/OpenIndexModal.test.tsx.snap
@@ -39,7 +39,17 @@ HTMLCollection [
             <div
               class="euiModalHeader__title"
             >
-              Open indexes
+               
+              <div
+                class="euiText euiText--small"
+              >
+                 
+                <h2>
+                  Open indexes
+                </h2>
+                 
+              </div>
+               
             </div>
           </div>
           <div
@@ -51,12 +61,20 @@ HTMLCollection [
               <div
                 style="line-height: 1.5;"
               >
-                <p>
-                  The following index will be opened.
-                </p>
-                <ul
-                  style="list-style-type: disc; list-style-position: inside;"
-                />
+                <div
+                  class="euiText euiText--small"
+                >
+                  <p>
+                    The following index will be opened.
+                  </p>
+                </div>
+                <div
+                  class="euiText euiText--small"
+                >
+                  <ul
+                    style="list-style-type: disc; list-style-position: inside;"
+                  />
+                </div>
                 <div
                   class="euiSpacer euiSpacer--l"
                 />
diff --git a/public/pages/Indices/containers/Indices/Indices.tsx b/public/pages/Indices/containers/Indices/Indices.tsx
index 436886880..e5c302aad 100644
--- a/public/pages/Indices/containers/Indices/Indices.tsx
+++ b/public/pages/Indices/containers/Indices/Indices.tsx
@@ -20,7 +20,7 @@ import {
   ArgsWithError,
   ArgsWithQuery,
   Query,
-  EuiTitle,
+  EuiPanel,
 } from "@elastic/eui";
 import { ContentPanel, ContentPanelActions } from "../../../../components/ContentPanel";
 import IndexControls from "../../components/IndexControls";
@@ -41,8 +41,7 @@ import "./index.scss";
 import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
 import MDSEnabledComponent from "../../../../components/MDSEnabledComponent";
 import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
-import { TopNavControlButtonData, TopNavControlIconData, TopNavControlTextData } from "src/plugins/navigation/public";
-import { EuiSpacer } from "@opensearch-project/oui";
+import { TopNavControlButtonData } from "src/plugins/navigation/public";
 import NotificationModal from "../../components/NotificationModal";
 
 interface IndicesProps extends RouteComponentProps, DataSourceMenuProperties {
@@ -316,7 +315,7 @@ export class Indices extends MDSEnabledComponent<IndicesProps, IndicesState> {
           ]}
         />
         <div id="test" style={{ padding: "0px" }}>
-          <ContentPanel>
+          <EuiPanel>
             <IndexControls
               search={search}
               onSearchChange={this.onSearchChange}
@@ -344,7 +343,7 @@ export class Indices extends MDSEnabledComponent<IndicesProps, IndicesState> {
               selection={selection}
               sorting={sorting}
             />
-          </ContentPanel>
+          </EuiPanel>
         </div>
         {this.state.isNotificationModalVisible && (
           <NotificationModal onClose={this.onCloseNotification} visible={this.state.isNotificationModalVisible} />
@@ -380,6 +379,7 @@ export class Indices extends MDSEnabledComponent<IndicesProps, IndicesState> {
                 buttonProps: {
                   fill: true,
                   onClick: onClickCreate,
+                  iconType: "plus",
                 },
               },
             ]}
diff --git a/public/pages/Indices/containers/Indices/__snapshots__/Indices.test.tsx.snap b/public/pages/Indices/containers/Indices/__snapshots__/Indices.test.tsx.snap
index 025a6e559..58fbaab2e 100644
--- a/public/pages/Indices/containers/Indices/__snapshots__/Indices.test.tsx.snap
+++ b/public/pages/Indices/containers/Indices/__snapshots__/Indices.test.tsx.snap
@@ -97,6 +97,7 @@ exports[`<Indices /> spec renders the component 1`] = `
                 <span
                   class="euiButtonContent euiButton__content"
                 >
+                  EuiIconMock
                   <span
                     class="euiButton__text"
                   >
@@ -130,14 +131,14 @@ exports[`<Indices /> spec renders the component 1`] = `
             class="euiFlexItem euiSearchBar__searchHolder"
           >
             <div
-              class="euiFormControlLayout euiFormControlLayout--fullWidth"
+              class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <input
                   aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
-                  class="euiFieldSearch euiFieldSearch--fullWidth"
+                  class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
                   placeholder="Search"
                   type="search"
                   value=""
@@ -574,7 +575,7 @@ exports[`<Indices /> spec renders the component 1`] = `
                           class="euiText euiText--medium"
                         >
                           <div
-                            class="euiText euiText--medium"
+                            class="euiText euiText--small"
                           >
                             <p>
                               Loading indices...
diff --git a/public/pages/Indices/containers/IndicesActions/index.tsx b/public/pages/Indices/containers/IndicesActions/index.tsx
index 35be9cd08..3b88e607a 100644
--- a/public/pages/Indices/containers/IndicesActions/index.tsx
+++ b/public/pages/Indices/containers/IndicesActions/index.tsx
@@ -148,6 +148,7 @@ export default function IndicesActions(props: IndicesActionsProps) {
               initialPanelId={0}
               // The EuiContextMenu has bug when testing in jest
               // the props change won't make it rerender
+              size="s"
               key={renderKey}
               panels={[
                 {
diff --git a/public/pages/Reindex/components/ReindexAdvancedOptions/ReindexAdvancedOptions.tsx b/public/pages/Reindex/components/ReindexAdvancedOptions/ReindexAdvancedOptions.tsx
index 42c98b178..ebac30912 100644
--- a/public/pages/Reindex/components/ReindexAdvancedOptions/ReindexAdvancedOptions.tsx
+++ b/public/pages/Reindex/components/ReindexAdvancedOptions/ReindexAdvancedOptions.tsx
@@ -13,6 +13,7 @@ import {
   EuiLink,
   EuiCompressedRadioGroup,
   EuiSpacer,
+  EuiText,
 } from "@elastic/eui";
 import { CoreServicesContext } from "../../../../components/core_services";
 import { CoreStart } from "opensearch-dashboards/public";
@@ -65,7 +66,11 @@ const ReindexAdvancedOptions = (props: ReindexOptionsProps) => {
   return (
     <div>
       <CustomFormRow
-        label="Reindex only unique documents"
+        label={
+          <EuiText size="s">
+            <h3>Reindex only unique documents</h3>
+          </EuiText>
+        }
         helpText={
           <>
             You can choose to copy only the documents that do not exist in the destination index. By default, OpenSearch will copy all
@@ -86,7 +91,11 @@ const ReindexAdvancedOptions = (props: ReindexOptionsProps) => {
       <EuiSpacer />
 
       <CustomFormRow
-        label="Version conflicts"
+        label={
+          <EuiText size="s">
+            <h3>Version conflicts</h3>
+          </EuiText>
+        }
         helpText={
           <>
             Instead of failing the reindexing operation, ignore any version conflicts during reindexing.{" "}
@@ -106,7 +115,11 @@ const ReindexAdvancedOptions = (props: ReindexOptionsProps) => {
       <EuiSpacer />
 
       <CustomFormRow
-        label="Slice reindexing operation"
+        label={
+          <EuiText size="s">
+            <h3>Slice reindexing operation</h3>
+          </EuiText>
+        }
         helpText="Divide this reindexing operation into smaller subtasks to run in parallel."
       >
         <>
@@ -152,7 +165,11 @@ const ReindexAdvancedOptions = (props: ReindexOptionsProps) => {
           <CustomFormRow
             isInvalid={!!sliceErr}
             error={sliceErr}
-            label="Number of subtasks"
+            label={
+              <EuiText size="s">
+                <h3>Number of subtasks</h3>
+              </EuiText>
+            }
             helpText="Specify the number of subtasks to divide this operation into."
           >
             <EuiCompressedFieldNumber
@@ -171,8 +188,11 @@ const ReindexAdvancedOptions = (props: ReindexOptionsProps) => {
       <CustomFormRow
         label={
           <>
-            Transform with ingest pipeline
-            <OptionalLabel />
+            <EuiText size="s">
+              <h3>
+                Transform with ingest pipeline <OptionalLabel />
+              </h3>
+            </EuiText>
           </>
         }
         helpText={
diff --git a/public/pages/Reindex/components/ReindexAdvancedOptions/__snapshots__/ReindexAdvancedOptions.test.tsx.snap b/public/pages/Reindex/components/ReindexAdvancedOptions/__snapshots__/ReindexAdvancedOptions.test.tsx.snap
index aa23ebd2a..e0dcccc80 100644
--- a/public/pages/Reindex/components/ReindexAdvancedOptions/__snapshots__/ReindexAdvancedOptions.test.tsx.snap
+++ b/public/pages/Reindex/components/ReindexAdvancedOptions/__snapshots__/ReindexAdvancedOptions.test.tsx.snap
@@ -17,7 +17,13 @@ Object {
               class="euiFormLabel euiFormRow__label"
               for="some_html_id"
             >
-              Reindex only unique documents
+              <div
+                class="euiText euiText--small"
+              >
+                <h3>
+                  Reindex only unique documents
+                </h3>
+              </div>
             </label>
           </div>
           <div
@@ -71,7 +77,13 @@ Object {
               class="euiFormLabel euiFormRow__label"
               for="some_html_id"
             >
-              Version conflicts
+              <div
+                class="euiText euiText--small"
+              >
+                <h3>
+                  Version conflicts
+                </h3>
+              </div>
             </label>
           </div>
           <div
@@ -125,7 +137,13 @@ Object {
               class="euiFormLabel euiFormRow__label"
               for="some_html_id"
             >
-              Slice reindexing operation
+              <div
+                class="euiText euiText--small"
+              >
+                <h3>
+                  Slice reindexing operation
+                </h3>
+              </div>
             </label>
           </div>
           <div
@@ -222,7 +240,13 @@ Object {
               class="euiFormLabel euiFormRow__label"
               for="some_html_id"
             >
-              Number of subtasks
+              <div
+                class="euiText euiText--small"
+              >
+                <h3>
+                  Number of subtasks
+                </h3>
+              </div>
             </label>
           </div>
           <div
@@ -266,10 +290,16 @@ Object {
               class="euiFormLabel euiFormRow__label"
               for="some_html_id"
             >
-              Transform with ingest pipeline
-              <i>
-                 – optional
-              </i>
+              <div
+                class="euiText euiText--small"
+              >
+                <h3>
+                  Transform with ingest pipeline 
+                  <i>
+                     – optional
+                  </i>
+                </h3>
+              </div>
             </label>
           </div>
           <div
@@ -369,7 +399,13 @@ Object {
             class="euiFormLabel euiFormRow__label"
             for="some_html_id"
           >
-            Reindex only unique documents
+            <div
+              class="euiText euiText--small"
+            >
+              <h3>
+                Reindex only unique documents
+              </h3>
+            </div>
           </label>
         </div>
         <div
@@ -423,7 +459,13 @@ Object {
             class="euiFormLabel euiFormRow__label"
             for="some_html_id"
           >
-            Version conflicts
+            <div
+              class="euiText euiText--small"
+            >
+              <h3>
+                Version conflicts
+              </h3>
+            </div>
           </label>
         </div>
         <div
@@ -477,7 +519,13 @@ Object {
             class="euiFormLabel euiFormRow__label"
             for="some_html_id"
           >
-            Slice reindexing operation
+            <div
+              class="euiText euiText--small"
+            >
+              <h3>
+                Slice reindexing operation
+              </h3>
+            </div>
           </label>
         </div>
         <div
@@ -574,7 +622,13 @@ Object {
             class="euiFormLabel euiFormRow__label"
             for="some_html_id"
           >
-            Number of subtasks
+            <div
+              class="euiText euiText--small"
+            >
+              <h3>
+                Number of subtasks
+              </h3>
+            </div>
           </label>
         </div>
         <div
@@ -618,10 +672,16 @@ Object {
             class="euiFormLabel euiFormRow__label"
             for="some_html_id"
           >
-            Transform with ingest pipeline
-            <i>
-               – optional
-            </i>
+            <div
+              class="euiText euiText--small"
+            >
+              <h3>
+                Transform with ingest pipeline 
+                <i>
+                   – optional
+                </i>
+              </h3>
+            </div>
           </label>
         </div>
         <div
diff --git a/public/pages/Reindex/container/Reindex/Reindex.tsx b/public/pages/Reindex/container/Reindex/Reindex.tsx
index 1cd9ad83d..1fe900b30 100644
--- a/public/pages/Reindex/container/Reindex/Reindex.tsx
+++ b/public/pages/Reindex/container/Reindex/Reindex.tsx
@@ -16,6 +16,8 @@ import {
   EuiSwitchEvent,
   EuiText,
   EuiTitle,
+  EuiPanel,
+  EuiHorizontalRule,
 } from "@elastic/eui";
 import _ from "lodash";
 import React, { ChangeEvent, Component } from "react";
@@ -24,7 +26,6 @@ import { CoreServicesContext } from "../../../../components/core_services";
 import { getClusterInfo, getErrorMessage } from "../../../../utils/helpers";
 import { IndexSelectItem, ReindexRequest, ReindexResponse } from "../../models/interfaces";
 import CustomFormRow from "../../../../components/CustomFormRow";
-import { ContentPanel } from "../../../../components/ContentPanel";
 import ReindexAdvancedOptions from "../../components/ReindexAdvancedOptions";
 import { BREADCRUMBS, ROUTES } from "../../../../utils/constants";
 import { CommonService, IndexService } from "../../../../services";
@@ -532,9 +533,9 @@ class Reindex extends Component<ReindexProps, ReindexState> {
           />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiTitle size="s">
-            <h3>Advanced settings</h3>
-          </EuiTitle>
+          <EuiText size="s">
+            <h2>Advanced settings</h2>
+          </EuiText>
         </EuiFlexItem>
       </EuiFlexGroup>
     );
@@ -575,10 +576,18 @@ class Reindex extends Component<ReindexProps, ReindexState> {
     const Common = () => {
       return (
         <>
-          <ContentPanel title="Configure source index" titleSize="s">
-            <EuiSpacer />
+          <EuiPanel>
+            <EuiText size="s">
+              <h2>Configure source index</h2>
+            </EuiText>
+            <EuiHorizontalRule margin="xs" />
+            <EuiSpacer size="s" />
             <CustomFormRow
-              label="Specify source indexes or data streams"
+              label={
+                <EuiText size="s">
+                  <h3>Specify source indexes or data streams</h3>
+                </EuiText>
+              }
               isInvalid={sourceErr.length > 0}
               error={sourceErr}
               fullWidth
@@ -615,11 +624,15 @@ class Reindex extends Component<ReindexProps, ReindexState> {
                 name="subsetOption"
                 data-test-subj="subsetOption"
                 legend={{
-                  children: <span>Specify a reindex option</span>,
+                  children: (
+                    <EuiText size="s">
+                      <h3>Specify a reindex option</h3>
+                    </EuiText>
+                  ),
                 }}
               />
             </CustomFormRow>
-            <EuiSpacer />
+            <EuiSpacer size="s" />
             {subset ? (
               <CustomFormRow
                 fullWidth={true}
@@ -645,15 +658,27 @@ class Reindex extends Component<ReindexProps, ReindexState> {
                 />
               </CustomFormRow>
             ) : null}
-          </ContentPanel>
+          </EuiPanel>
 
           <EuiSpacer />
 
-          <ContentPanel title="Configure destination index" titleSize="s">
-            <EuiSpacer />
+          <EuiPanel>
+            <EuiText size="s">
+              <h2>Configure destination index</h2>
+            </EuiText>
+            <EuiHorizontalRule margin="xs" />
+            <EuiSpacer size="s" />
             <EuiFlexGroup alignItems="flexEnd">
               <EuiFlexItem style={{ maxWidth: "400px" }}>
-                <CustomFormRow label="Specify a destination index or data stream" isInvalid={!!destError} error={destError}>
+                <CustomFormRow
+                  label={
+                    <EuiText size="s">
+                      <h3>Specify a destination index or data stream</h3>
+                    </EuiText>
+                  }
+                  isInvalid={!!destError}
+                  error={destError}
+                >
                   <IndexSelect
                     data-test-subj="destinationSelector"
                     placeholder="Select an index or data stream"
@@ -673,13 +698,15 @@ class Reindex extends Component<ReindexProps, ReindexState> {
                 </EuiSmallButton>
               </EuiFlexItem>
             </EuiFlexGroup>
-          </ContentPanel>
+          </EuiPanel>
 
           <EuiSpacer />
 
-          <ContentPanel title={advanceTitle} noExtraPadding>
+          <EuiPanel>
+            {advanceTitle}
             {advancedSettingsOpen && (
               <>
+                <EuiHorizontalRule margin="xs" />
                 <EuiSpacer size="s" />
                 <ReindexAdvancedOptions
                   slices={slices}
@@ -697,7 +724,7 @@ class Reindex extends Component<ReindexProps, ReindexState> {
                 <EuiSpacer size="s" />
               </>
             )}
-          </ContentPanel>
+          </EuiPanel>
 
           <EuiSpacer />
 
@@ -735,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 29d0b2b86..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"
@@ -46,305 +48,281 @@ exports[`<Reindex /> spec renders the component 1`] = `
   />
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-    style="padding-left: 0px; padding-right: 0px;"
   >
     <div
-      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-      style="padding: 0px 10px;"
+      class="euiText euiText--small"
     >
-      <div
-        class="euiFlexItem"
-      >
-        <div
-          class="euiText euiText--small"
-        >
-          <h1>
-            Configure source index
-            <span
-              class="panel-header-count"
-            >
-               
-               
-            </span>
-          </h1>
-        </div>
-      </div>
+      <h2>
+        Configure source index
+      </h2>
     </div>
     <hr
       class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
     />
     <div
-      style="padding: 0px 10px;"
+      class="euiSpacer euiSpacer--s"
+    />
+    <div
+      class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
+      id="some_html_id-row"
     >
       <div
-        class="euiSpacer euiSpacer--l"
-      />
-      <div
-        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
-        id="some_html_id-row"
+        class="euiFormRow__labelWrapper"
       >
-        <div
-          class="euiFormRow__labelWrapper"
+        <label
+          aria-invalid="false"
+          class="euiFormLabel euiFormRow__label"
+          for="some_html_id"
         >
-          <label
-            aria-invalid="false"
-            class="euiFormLabel euiFormRow__label"
-            for="some_html_id"
+          <div
+            class="euiText euiText--small"
           >
-            Specify source indexes or data streams
-          </label>
-        </div>
+            <h3>
+              Specify source indexes or data streams
+            </h3>
+          </div>
+        </label>
+      </div>
+      <div
+        class="euiFormRow__fieldWrapper"
+      >
         <div
-          class="euiFormRow__fieldWrapper"
+          class="euiFormHelpText euiFormRow__text"
+          style="padding-top: 0px; padding-bottom: 4px;"
         >
+          Specify one or more indexes or data streams you want to reindex from.
+        </div>
+        <div>
           <div
-            class="euiFormHelpText euiFormRow__text"
-            style="padding-top: 0px; padding-bottom: 4px;"
+            aria-expanded="false"
+            aria-haspopup="listbox"
+            class="euiComboBox euiComboBox--compressed"
+            data-test-subj="sourceSelector"
+            role="combobox"
           >
-            Specify one or more indexes or data streams you want to reindex from.
-          </div>
-          <div>
             <div
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              class="euiComboBox euiComboBox--compressed"
-              data-test-subj="sourceSelector"
-              role="combobox"
+              class="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
-                class="euiFormControlLayout euiFormControlLayout--compressed"
+                class="euiFormControlLayout__childrenWrapper"
               >
                 <div
-                  class="euiFormControlLayout__childrenWrapper"
+                  class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap-isClearable"
+                  data-test-subj="comboBoxInput"
+                  tabindex="-1"
                 >
+                  <p
+                    class="euiComboBoxPlaceholder"
+                  >
+                    Select indexes or data streams
+                  </p>
                   <div
-                    class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap-isClearable"
-                    data-test-subj="comboBoxInput"
-                    tabindex="-1"
+                    class="euiComboBox__input"
+                    style="font-size: 14px; display: inline-block;"
                   >
-                    <p
-                      class="euiComboBoxPlaceholder"
-                    >
-                      Select indexes or data streams
-                    </p>
+                    <input
+                      aria-controls=""
+                      data-test-subj="comboBoxSearchInput"
+                      role="textbox"
+                      style="box-sizing: content-box; width: 2px;"
+                      value=""
+                    />
                     <div
-                      class="euiComboBox__input"
-                      style="font-size: 14px; display: inline-block;"
-                    >
-                      <input
-                        aria-controls=""
-                        data-test-subj="comboBoxSearchInput"
-                        role="textbox"
-                        style="box-sizing: content-box; width: 2px;"
-                        value=""
-                      />
-                      <div
-                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                      />
-                    </div>
+                      style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                    />
                   </div>
-                  <div
-                    class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                </div>
+                <div
+                  class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                >
+                  <button
+                    aria-label="Open list of options"
+                    class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                    data-test-subj="comboBoxToggleListButton"
+                    type="button"
                   >
-                    <button
-                      aria-label="Open list of options"
-                      class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
-                      data-test-subj="comboBoxToggleListButton"
-                      type="button"
-                    >
-                      EuiIconMock
-                    </button>
-                  </div>
+                    EuiIconMock
+                  </button>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
+    </div>
+    <div
+      class="euiSpacer euiSpacer--l"
+    />
+    <div
+      class="euiFormRow euiFormRow--compressed"
+      id="some_html_id-row"
+    >
       <div
-        class="euiSpacer euiSpacer--l"
-      />
-      <div
-        class="euiFormRow euiFormRow--compressed"
-        id="some_html_id-row"
+        class="euiFormRow__fieldWrapper"
       >
-        <div
-          class="euiFormRow__fieldWrapper"
+        <fieldset
+          data-test-subj="subsetOption"
         >
-          <fieldset
-            data-test-subj="subsetOption"
+          <legend
+            class="euiFormLegend euiFormLegend--compressed"
           >
-            <legend
-              class="euiFormLegend euiFormLegend--compressed"
+            <div
+              class="euiText euiText--small"
             >
-              <span>
+              <h3>
                 Specify a reindex option
-              </span>
-            </legend>
+              </h3>
+            </div>
+          </legend>
+          <div
+            class="euiRadio euiRadio--compressed euiRadioGroup__item"
+          >
+            <input
+              checked=""
+              class="euiRadio__input"
+              id="all"
+              name="subsetOption"
+              type="radio"
+              value=""
+            />
             <div
-              class="euiRadio euiRadio--compressed euiRadioGroup__item"
+              class="euiRadio__circle"
+            />
+            <label
+              class="euiRadio__label"
+              for="all"
             >
-              <input
-                checked=""
-                class="euiRadio__input"
-                id="all"
-                name="subsetOption"
-                type="radio"
-                value=""
-              />
-              <div
-                class="euiRadio__circle"
-              />
-              <label
-                class="euiRadio__label"
-                for="all"
-              >
-                Reindex all documents
-              </label>
-            </div>
+              Reindex all documents
+            </label>
+          </div>
+          <div
+            class="euiRadio euiRadio--compressed euiRadioGroup__item"
+          >
+            <input
+              class="euiRadio__input"
+              id="subset"
+              name="subsetOption"
+              type="radio"
+              value=""
+            />
             <div
-              class="euiRadio euiRadio--compressed euiRadioGroup__item"
+              class="euiRadio__circle"
+            />
+            <label
+              class="euiRadio__label"
+              for="subset"
             >
-              <input
-                class="euiRadio__input"
-                id="subset"
-                name="subsetOption"
-                type="radio"
-                value=""
-              />
-              <div
-                class="euiRadio__circle"
-              />
-              <label
-                class="euiRadio__label"
-                for="subset"
-              >
-                Reindex a subset of documents (Advanced)
-              </label>
-            </div>
-          </fieldset>
-        </div>
+              Reindex a subset of documents (Advanced)
+            </label>
+          </div>
+        </fieldset>
       </div>
-      <div
-        class="euiSpacer euiSpacer--l"
-      />
     </div>
+    <div
+      class="euiSpacer euiSpacer--s"
+    />
   </div>
   <div
     class="euiSpacer euiSpacer--l"
   />
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-    style="padding-left: 0px; padding-right: 0px;"
   >
     <div
-      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-      style="padding: 0px 10px;"
+      class="euiText euiText--small"
     >
-      <div
-        class="euiFlexItem"
-      >
-        <div
-          class="euiText euiText--small"
-        >
-          <h1>
-            Configure destination index
-            <span
-              class="panel-header-count"
-            >
-               
-               
-            </span>
-          </h1>
-        </div>
-      </div>
+      <h2>
+        Configure destination index
+      </h2>
     </div>
     <hr
       class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
     />
     <div
-      style="padding: 0px 10px;"
+      class="euiSpacer euiSpacer--s"
+    />
+    <div
+      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
       <div
-        class="euiSpacer euiSpacer--l"
-      />
-      <div
-        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+        class="euiFlexItem"
+        style="max-width: 400px;"
       >
         <div
-          class="euiFlexItem"
-          style="max-width: 400px;"
+          class="euiFormRow euiFormRow--compressed"
+          id="some_html_id-row"
         >
           <div
-            class="euiFormRow euiFormRow--compressed"
-            id="some_html_id-row"
+            class="euiFormRow__labelWrapper"
           >
-            <div
-              class="euiFormRow__labelWrapper"
+            <label
+              aria-invalid="false"
+              class="euiFormLabel euiFormRow__label"
+              for="some_html_id"
             >
-              <label
-                aria-invalid="false"
-                class="euiFormLabel euiFormRow__label"
-                for="some_html_id"
+              <div
+                class="euiText euiText--small"
+              >
+                <h3>
+                  Specify a destination index or data stream
+                </h3>
+              </div>
+            </label>
+          </div>
+          <div
+            class="euiFormRow__fieldWrapper"
+          >
+            <div>
+              <div
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                class="euiComboBox euiComboBox--compressed"
+                data-test-subj="destinationSelector"
+                role="combobox"
               >
-                Specify a destination index or data stream
-              </label>
-            </div>
-            <div
-              class="euiFormRow__fieldWrapper"
-            >
-              <div>
                 <div
-                  aria-expanded="false"
-                  aria-haspopup="listbox"
-                  class="euiComboBox euiComboBox--compressed"
-                  data-test-subj="destinationSelector"
-                  role="combobox"
+                  class="euiFormControlLayout euiFormControlLayout--compressed"
                 >
                   <div
-                    class="euiFormControlLayout euiFormControlLayout--compressed"
+                    class="euiFormControlLayout__childrenWrapper"
                   >
                     <div
-                      class="euiFormControlLayout__childrenWrapper"
+                      class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+                      data-test-subj="comboBoxInput"
+                      tabindex="-1"
                     >
+                      <p
+                        class="euiComboBoxPlaceholder"
+                      >
+                        Select an index or data stream
+                      </p>
                       <div
-                        class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
-                        data-test-subj="comboBoxInput"
-                        tabindex="-1"
+                        class="euiComboBox__input"
+                        style="font-size: 14px; display: inline-block;"
                       >
-                        <p
-                          class="euiComboBoxPlaceholder"
-                        >
-                          Select an index or data stream
-                        </p>
+                        <input
+                          aria-controls=""
+                          data-test-subj="comboBoxSearchInput"
+                          role="textbox"
+                          style="box-sizing: content-box; width: 2px;"
+                          value=""
+                        />
                         <div
-                          class="euiComboBox__input"
-                          style="font-size: 14px; display: inline-block;"
-                        >
-                          <input
-                            aria-controls=""
-                            data-test-subj="comboBoxSearchInput"
-                            role="textbox"
-                            style="box-sizing: content-box; width: 2px;"
-                            value=""
-                          />
-                          <div
-                            style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                          />
-                        </div>
+                          style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                        />
                       </div>
-                      <div
-                        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                    </div>
+                    <div
+                      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                    >
+                      <button
+                        aria-label="Open list of options"
+                        class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                        data-test-subj="comboBoxToggleListButton"
+                        type="button"
                       >
-                        <button
-                          aria-label="Open list of options"
-                          class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
-                          data-test-subj="comboBoxToggleListButton"
-                          type="button"
-                        >
-                          EuiIconMock
-                        </button>
-                      </div>
+                        EuiIconMock
+                      </button>
                     </div>
                   </div>
                 </div>
@@ -352,25 +330,25 @@ exports[`<Reindex /> spec renders the component 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="euiFlexItem euiFlexItem--flexGrowZero"
+      </div>
+      <div
+        class="euiFlexItem euiFlexItem--flexGrowZero"
+      >
+        <button
+          class="euiButton euiButton--primary euiButton--small"
+          data-test-subj="createIndexButton"
+          type="button"
         >
-          <button
-            class="euiButton euiButton--primary euiButton--small"
-            data-test-subj="createIndexButton"
-            type="button"
+          <span
+            class="euiButtonContent euiButton__content"
           >
             <span
-              class="euiButtonContent euiButton__content"
+              class="euiButton__text"
             >
-              <span
-                class="euiButton__text"
-              >
-                Create index
-              </span>
+              Create index
             </span>
-          </button>
-        </div>
+          </span>
+        </button>
       </div>
     </div>
   </div>
@@ -379,45 +357,34 @@ exports[`<Reindex /> spec renders the component 1`] = `
   />
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-    style="padding: 0px 0px 0px 0px;"
   >
     <div
-      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-      style="margin-top: 0px; margin-bottom: 0px; padding: 0px 10px;"
+      class="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
       <div
-        class="euiFlexItem"
+        class="euiFlexItem euiFlexItem--flexGrowZero"
+      >
+        <button
+          aria-label="drop down icon"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small"
+          data-test-subj="advanceOptionToggle"
+          type="button"
+        >
+          EuiIconMock
+        </button>
+      </div>
+      <div
+        class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <div
-          class="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+          class="euiText euiText--small"
         >
-          <div
-            class="euiFlexItem euiFlexItem--flexGrowZero"
-          >
-            <button
-              aria-label="drop down icon"
-              class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small"
-              data-test-subj="advanceOptionToggle"
-              type="button"
-            >
-              EuiIconMock
-            </button>
-          </div>
-          <div
-            class="euiFlexItem euiFlexItem--flexGrowZero"
-          >
-            <h3
-              class="euiTitle euiTitle--small"
-            >
-              Advanced settings
-            </h3>
-          </div>
+          <h2>
+            Advanced settings
+          </h2>
         </div>
       </div>
     </div>
-    <hr
-      class="euiHorizontalRule euiHorizontalRule--full"
-    />
   </div>
   <div
     class="euiSpacer euiSpacer--l"
diff --git a/public/pages/ShrinkIndex/container/ShrinkIndex/ShrinkIndex.tsx b/public/pages/ShrinkIndex/container/ShrinkIndex/ShrinkIndex.tsx
index 045a92dfb..6a1e68dbd 100644
--- a/public/pages/ShrinkIndex/container/ShrinkIndex/ShrinkIndex.tsx
+++ b/public/pages/ShrinkIndex/container/ShrinkIndex/ShrinkIndex.tsx
@@ -14,12 +14,14 @@ import {
   EuiTitle,
   EuiCompressedFormRow,
   EuiLoadingSpinner,
+  EuiText,
+  EuiPanel,
+  EuiHorizontalRule,
 } from "@elastic/eui";
 import React, { Component } from "react";
 
 import { CatIndex } from "../../../../../server/models/interfaces";
 import FormGenerator, { IField, IFormGeneratorRef } from "../../../../components/FormGenerator";
-import { ContentPanel } from "../../../../components/ContentPanel";
 import IndexDetail from "../../../../containers/IndexDetail";
 import { IndexItem } from "../../../../../models/interfaces";
 import { IFieldComponentProps } from "../../../../components/FormGenerator/built_in_components";
@@ -53,6 +55,7 @@ import { EVENT_MAP, destroyListener, listenEvent } from "../../../../JobHandler"
 import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
 import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
 import { TopNavControlDescriptionData, TopNavControlLinkData } from "src/plugins/navigation/public";
+import { OptionalLabel } from "../../../../components/CustomFormRow";
 
 const WrappedAliasSelect = EuiToolTipWrapper(AliasSelect as any, {
   disabledKey: "isDisabled",
@@ -382,7 +385,6 @@ class ShrinkIndex extends Component<ShrinkIndexProps, ShrinkIndexState> {
           <>
             <EuiCallOut title="The source index must block write operations before shrinking." color="danger" iconType="alert">
               <p>In order to shrink an existing index, you must first set the index to block write operations.</p>
-              <EuiSpacer />
               <EuiSmallButton
                 onClick={() => {
                   const indexWriteBlockSettings = {
@@ -481,7 +483,11 @@ class ShrinkIndex extends Component<ShrinkIndexProps, ShrinkIndexState> {
     const formFields: IField[] = [
       {
         rowProps: {
-          label: "Target index name",
+          label: (
+            <EuiText size="s">
+              <h3>Target index name</h3>
+            </EuiText>
+          ),
           helpText: <div>{INDEX_NAMING_MESSAGE}</div>,
           position: "bottom",
         },
@@ -510,7 +516,11 @@ class ShrinkIndex extends Component<ShrinkIndexProps, ShrinkIndexState> {
       },
       {
         rowProps: {
-          label: "Number of primary shards",
+          label: (
+            <EuiText size="s">
+              <h3>Number of primary shards</h3>
+            </EuiText>
+          ),
           helpText: (
             <>
               <p>Specify the number of shards for the new shrunken index.</p>
@@ -543,7 +553,11 @@ class ShrinkIndex extends Component<ShrinkIndexProps, ShrinkIndexState> {
       },
       {
         rowProps: {
-          label: "Number of replicas",
+          label: (
+            <EuiText size="s">
+              <h3>Number of replicas</h3>
+            </EuiText>
+          ),
           helpText: <div>{REPLICA_NUMBER_MESSAGE}</div>,
         },
         name: "index.number_of_replicas",
@@ -568,8 +582,13 @@ class ShrinkIndex extends Component<ShrinkIndexProps, ShrinkIndexState> {
       {
         name: "aliases",
         rowProps: {
-          label: "Index alias",
-          isOptional: true,
+          label: (
+            <EuiText size="s">
+              <h3>
+                Index alias <OptionalLabel />
+              </h3>
+            </EuiText>
+          ),
           helpText: "Allow this index to be referenced by existing aliases or specify a new alias.",
         },
         options: {
@@ -595,7 +614,11 @@ class ShrinkIndex extends Component<ShrinkIndexProps, ShrinkIndexState> {
     const configurationChildren: React.ReactChild = (
       <>
         <EuiSpacer size="m" />
-        <ContentPanel title="Configure target index" titleSize="s">
+        <EuiPanel>
+          <EuiText size="s">
+            <h2>Configure target index</h2>
+          </EuiText>
+          <EuiHorizontalRule margin="xs" />
           <EuiSpacer size="m" />
           <FormGenerator
             ref={(ref) => (this.formRef = ref)}
@@ -613,7 +636,7 @@ class ShrinkIndex extends Component<ShrinkIndexProps, ShrinkIndexState> {
               accordionProps: {
                 initialIsOpen: false,
                 id: "accordion_for_create_index_settings",
-                buttonContent: <h4>Advanced settings</h4>,
+                buttonContent: <h2>Advanced settings</h2>,
               },
               blockedNameList: blockNameList,
               rowProps: {
@@ -629,7 +652,7 @@ class ShrinkIndex extends Component<ShrinkIndexProps, ShrinkIndexState> {
               },
             }}
           />
-        </ContentPanel>
+        </EuiPanel>
       </>
     );
 
@@ -670,7 +693,11 @@ class ShrinkIndex extends Component<ShrinkIndexProps, ShrinkIndexState> {
           <NotificationConfig
             withPanel
             panelProps={{
-              title: "Advanced settings",
+              title: (
+                <EuiText size="s">
+                  <h2>Advanced settings</h2>
+                </EuiText>
+              ),
               titleSize: "s",
             }}
             ref={(ref) => (this.notificationRef = ref)}
@@ -713,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 b507aae8f..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"
@@ -58,7 +60,7 @@ exports[`<Shrink index /> spec renders the component 1`] = `
         class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
       />
       <div
-        class="euiSpacer euiSpacer--l"
+        class="euiSpacer euiSpacer--s"
       />
       <div
         class="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--fourths euiFlexGrid--responsive"
@@ -72,7 +74,13 @@ exports[`<Shrink index /> spec renders the component 1`] = `
             <dt
               class="euiDescriptionList__title"
             >
-              Index name
+              <div
+                class="euiText euiText--small"
+              >
+                <h4>
+                  Index name
+                </h4>
+              </div>
             </dt>
             <dd
               class="euiDescriptionList__description"
@@ -90,7 +98,13 @@ exports[`<Shrink index /> spec renders the component 1`] = `
             <dt
               class="euiDescriptionList__title"
             >
-              Primary shards
+              <div
+                class="euiText euiText--small"
+              >
+                <h4>
+                  Primary shards
+                </h4>
+              </div>
             </dt>
             <dd
               class="euiDescriptionList__description"
@@ -108,7 +122,13 @@ exports[`<Shrink index /> spec renders the component 1`] = `
             <dt
               class="euiDescriptionList__title"
             >
-              Replica shards
+              <div
+                class="euiText euiText--small"
+              >
+                <h4>
+                  Replica shards
+                </h4>
+              </div>
             </dt>
             <dd
               class="euiDescriptionList__description"
@@ -126,7 +146,13 @@ exports[`<Shrink index /> spec renders the component 1`] = `
             <dt
               class="euiDescriptionList__title"
             >
-              Total index size
+              <div
+                class="euiText euiText--small"
+              >
+                <h4>
+                  Total index size
+                </h4>
+              </div>
             </dt>
             <dd
               class="euiDescriptionList__description"
@@ -146,497 +172,501 @@ exports[`<Shrink index /> spec renders the component 1`] = `
     />
     <div
       class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-      style="padding-left: 0px; padding-right: 0px;"
     >
       <div
-        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-        style="padding: 0px 10px;"
+        class="euiText euiText--small"
       >
-        <div
-          class="euiFlexItem"
-        >
-          <div
-            class="euiText euiText--small"
-          >
-            <h1>
-              Configure target index
-              <span
-                class="panel-header-count"
-              >
-                 
-                 
-              </span>
-            </h1>
-          </div>
-        </div>
+        <h2>
+          Configure target index
+        </h2>
       </div>
       <hr
         class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
       />
       <div
-        style="padding: 0px 10px;"
+        class="euiSpacer euiSpacer--m"
+      />
+      <div
+        class="euiForm"
       >
         <div
-          class="euiSpacer euiSpacer--m"
-        />
-        <div
-          class="euiForm"
+          class="euiFormRow euiFormRow--compressed"
+          data-test-subj="form-name-targetIndex"
+          id="some_html_id-row"
         >
           <div
-            class="euiFormRow euiFormRow--compressed"
-            data-test-subj="form-name-targetIndex"
-            id="some_html_id-row"
+            class="euiFormRow__labelWrapper"
           >
-            <div
-              class="euiFormRow__labelWrapper"
+            <label
+              aria-invalid="false"
+              class="euiFormLabel euiFormRow__label"
+              for="some_html_id"
             >
-              <label
-                aria-invalid="false"
-                class="euiFormLabel euiFormRow__label"
-                for="some_html_id"
+              <div
+                class="euiText euiText--small"
               >
-                Target index name
-              </label>
-            </div>
-            <div
-              class="euiFormRow__fieldWrapper"
+                <h3>
+                  Target index name
+                </h3>
+              </div>
+            </label>
+          </div>
+          <div
+            class="euiFormRow__fieldWrapper"
+          >
+            <span
+              class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
             >
-              <span
-                class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
+              <div
+                class="euiFormControlLayout euiFormControlLayout--compressed"
               >
                 <div
-                  class="euiFormControlLayout euiFormControlLayout--compressed"
+                  class="euiFormControlLayout__childrenWrapper"
                 >
-                  <div
-                    class="euiFormControlLayout__childrenWrapper"
-                  >
-                    <input
-                      class="euiFieldText euiFieldText--compressed"
-                      data-test-subj="targetIndexNameInput"
-                      placeholder="Specify a name for the new shrunken index."
-                      type="text"
-                      value=""
-                    />
-                  </div>
+                  <input
+                    class="euiFieldText euiFieldText--compressed"
+                    data-test-subj="targetIndexNameInput"
+                    placeholder="Specify a name for the new shrunken index."
+                    type="text"
+                    value=""
+                  />
                 </div>
-              </span>
+              </div>
+            </span>
+            <div
+              class="euiFormHelpText euiFormRow__text"
+              id="some_html_id-help-0"
+            >
+              <div>
+                Must be in lowercase letters. Cannot begin with underscores or hyphens. Spaces, commas, and characters :, ", *, +, /, , |, ?, #, &gt; are not allowed.
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="euiFormRow euiFormRow--compressed"
+          data-test-subj="form-name-index.number_of_shards"
+          id="some_html_id-row"
+        >
+          <div
+            class="euiFormRow__labelWrapper"
+          >
+            <label
+              aria-invalid="false"
+              class="euiFormLabel euiFormRow__label"
+              for="some_html_id"
+            >
               <div
-                class="euiFormHelpText euiFormRow__text"
-                id="some_html_id-help-0"
+                class="euiText euiText--small"
               >
-                <div>
-                  Must be in lowercase letters. Cannot begin with underscores or hyphens. Spaces, commas, and characters :, ", *, +, /, , |, ?, #, &gt; are not allowed.
-                </div>
+                <h3>
+                  Number of primary shards
+                </h3>
               </div>
-            </div>
+            </label>
           </div>
           <div
-            class="euiFormRow euiFormRow--compressed"
-            data-test-subj="form-name-index.number_of_shards"
-            id="some_html_id-row"
+            class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFormRow__labelWrapper"
+              class="euiFormHelpText euiFormRow__text"
+              style="padding-top: 0px; padding-bottom: 4px;"
             >
-              <label
-                aria-invalid="false"
-                class="euiFormLabel euiFormRow__label"
-                for="some_html_id"
-              >
-                Number of primary shards
-              </label>
+              <p>
+                Specify the number of shards for the new shrunken index.
+              </p>
+              <p>
+                The number must be a factor of the primary shard count of the source index.
+              </p>
             </div>
-            <div
-              class="euiFormRow__fieldWrapper"
+            <span
+              class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
             >
               <div
-                class="euiFormHelpText euiFormRow__text"
-                style="padding-top: 0px; padding-bottom: 4px;"
-              >
-                <p>
-                  Specify the number of shards for the new shrunken index.
-                </p>
-                <p>
-                  The number must be a factor of the primary shard count of the source index.
-                </p>
-              </div>
-              <span
-                class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
+                class="euiFormControlLayout euiFormControlLayout--compressed"
               >
                 <div
-                  class="euiFormControlLayout euiFormControlLayout--compressed"
+                  class="euiFormControlLayout__childrenWrapper"
                 >
-                  <div
-                    class="euiFormControlLayout__childrenWrapper"
+                  <select
+                    class="euiSelect euiSelect--compressed"
+                    data-test-subj="numberOfShardsInput"
+                    placeholder="Select primary shard count"
                   >
-                    <select
-                      class="euiSelect euiSelect--compressed"
-                      data-test-subj="numberOfShardsInput"
-                      placeholder="Select primary shard count"
+                    <option
+                      value="1"
                     >
-                      <option
-                        value="1"
-                      >
-                        1
-                      </option>
-                      <option
-                        value="5"
-                      >
-                        5
-                      </option>
-                    </select>
-                    <div
-                      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                      1
+                    </option>
+                    <option
+                      value="5"
                     >
-                      <span
-                        class="euiFormControlLayoutCustomIcon"
-                      >
-                        EuiIconMock
-                      </span>
-                    </div>
+                      5
+                    </option>
+                  </select>
+                  <div
+                    class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                  >
+                    <span
+                      class="euiFormControlLayoutCustomIcon"
+                    >
+                      EuiIconMock
+                    </span>
                   </div>
                 </div>
-              </span>
-            </div>
+              </div>
+            </span>
           </div>
+        </div>
+        <div
+          class="euiFormRow euiFormRow--compressed"
+          data-test-subj="form-name-index.number_of_replicas"
+          id="some_html_id-row"
+        >
           <div
-            class="euiFormRow euiFormRow--compressed"
-            data-test-subj="form-name-index.number_of_replicas"
-            id="some_html_id-row"
+            class="euiFormRow__labelWrapper"
           >
-            <div
-              class="euiFormRow__labelWrapper"
+            <label
+              aria-invalid="false"
+              class="euiFormLabel euiFormRow__label"
+              for="some_html_id"
             >
-              <label
-                aria-invalid="false"
-                class="euiFormLabel euiFormRow__label"
-                for="some_html_id"
+              <div
+                class="euiText euiText--small"
               >
-                Number of replicas
-              </label>
-            </div>
+                <h3>
+                  Number of replicas
+                </h3>
+              </div>
+            </label>
+          </div>
+          <div
+            class="euiFormRow__fieldWrapper"
+          >
             <div
-              class="euiFormRow__fieldWrapper"
+              class="euiFormHelpText euiFormRow__text"
+              style="padding-top: 0px; padding-bottom: 4px;"
             >
-              <div
-                class="euiFormHelpText euiFormRow__text"
-                style="padding-top: 0px; padding-bottom: 4px;"
-              >
-                <div>
-                  Specify the number of replicas each primary shard should have. Default is 1.
-                </div>
+              <div>
+                Specify the number of replicas each primary shard should have. Default is 1.
               </div>
-              <span
-                class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
+            </div>
+            <span
+              class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
+            >
+              <div
+                class="euiFormControlLayout euiFormControlLayout--compressed"
               >
                 <div
-                  class="euiFormControlLayout euiFormControlLayout--compressed"
+                  class="euiFormControlLayout__childrenWrapper"
                 >
-                  <div
-                    class="euiFormControlLayout__childrenWrapper"
-                  >
-                    <input
-                      class="euiFieldNumber euiFieldNumber--compressed"
-                      data-test-subj="numberOfReplicasInput"
-                      min="0"
-                      type="number"
-                      value="1"
-                    />
-                  </div>
+                  <input
+                    class="euiFieldNumber euiFieldNumber--compressed"
+                    data-test-subj="numberOfReplicasInput"
+                    min="0"
+                    type="number"
+                    value="1"
+                  />
                 </div>
-              </span>
-            </div>
+              </div>
+            </span>
           </div>
+        </div>
+        <div
+          class="euiFormRow euiFormRow--compressed"
+          data-test-subj="form-name-aliases"
+          id="some_html_id-row"
+        >
           <div
-            class="euiFormRow euiFormRow--compressed"
-            data-test-subj="form-name-aliases"
-            id="some_html_id-row"
+            class="euiFormRow__labelWrapper"
           >
-            <div
-              class="euiFormRow__labelWrapper"
+            <label
+              aria-invalid="false"
+              class="euiFormLabel euiFormRow__label"
+              for="some_html_id"
             >
-              <label
-                aria-invalid="false"
-                class="euiFormLabel euiFormRow__label"
-                for="some_html_id"
+              <div
+                class="euiText euiText--small"
               >
-                Index alias
-                <i>
-                   – optional
-                </i>
-              </label>
-            </div>
+                <h3>
+                  Index alias 
+                  <i>
+                     – optional
+                  </i>
+                </h3>
+              </div>
+            </label>
+          </div>
+          <div
+            class="euiFormRow__fieldWrapper"
+          >
             <div
-              class="euiFormRow__fieldWrapper"
+              class="euiFormHelpText euiFormRow__text"
+              style="padding-top: 0px; padding-bottom: 4px;"
+            >
+              Allow this index to be referenced by existing aliases or specify a new alias.
+            </div>
+            <span
+              class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
             >
               <div
-                class="euiFormHelpText euiFormRow__text"
-                style="padding-top: 0px; padding-bottom: 4px;"
-              >
-                Allow this index to be referenced by existing aliases or specify a new alias.
-              </div>
-              <span
-                class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                class="euiComboBox euiComboBox--compressed"
+                data-test-subj="aliasesInput"
+                role="combobox"
               >
                 <div
-                  aria-expanded="false"
-                  aria-haspopup="listbox"
-                  class="euiComboBox euiComboBox--compressed"
-                  data-test-subj="aliasesInput"
-                  role="combobox"
+                  class="euiFormControlLayout euiFormControlLayout--compressed"
                 >
                   <div
-                    class="euiFormControlLayout euiFormControlLayout--compressed"
+                    class="euiFormControlLayout__childrenWrapper"
                   >
                     <div
-                      class="euiFormControlLayout__childrenWrapper"
+                      class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap-isClearable"
+                      data-test-subj="comboBoxInput"
+                      tabindex="-1"
                     >
+                      <p
+                        class="euiComboBoxPlaceholder"
+                      >
+                        Select aliases or specify new aliases.
+                      </p>
                       <div
-                        class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap-isClearable"
-                        data-test-subj="comboBoxInput"
-                        tabindex="-1"
+                        class="euiComboBox__input"
+                        style="font-size: 14px; display: inline-block;"
                       >
-                        <p
-                          class="euiComboBoxPlaceholder"
-                        >
-                          Select aliases or specify new aliases.
-                        </p>
+                        <input
+                          aria-controls=""
+                          data-test-subj="comboBoxSearchInput"
+                          role="textbox"
+                          style="box-sizing: content-box; width: 2px;"
+                          value=""
+                        />
                         <div
-                          class="euiComboBox__input"
-                          style="font-size: 14px; display: inline-block;"
-                        >
-                          <input
-                            aria-controls=""
-                            data-test-subj="comboBoxSearchInput"
-                            role="textbox"
-                            style="box-sizing: content-box; width: 2px;"
-                            value=""
-                          />
-                          <div
-                            style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-                          />
-                        </div>
+                          style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                        />
                       </div>
-                      <div
-                        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                    </div>
+                    <div
+                      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                    >
+                      <button
+                        aria-label="Open list of options"
+                        class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                        data-test-subj="comboBoxToggleListButton"
+                        type="button"
                       >
-                        <button
-                          aria-label="Open list of options"
-                          class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
-                          data-test-subj="comboBoxToggleListButton"
-                          type="button"
-                        >
-                          EuiIconMock
-                        </button>
-                      </div>
+                        EuiIconMock
+                      </button>
                     </div>
                   </div>
                 </div>
-              </span>
-            </div>
+              </div>
+            </span>
           </div>
+        </div>
+        <div
+          class="euiSpacer euiSpacer--m"
+        />
+        <div
+          class="euiAccordion accordion-in-advanced-settings"
+        >
           <div
-            class="euiSpacer euiSpacer--m"
-          />
-          <div
-            class="euiAccordion accordion-in-advanced-settings"
+            class="euiAccordion__triggerWrapper"
           >
-            <div
-              class="euiAccordion__triggerWrapper"
+            <button
+              aria-controls="accordion_for_create_index_settings"
+              aria-expanded="false"
+              class="euiAccordion__button"
+              id="some_html_id"
+              type="button"
             >
-              <button
-                aria-controls="accordion_for_create_index_settings"
-                aria-expanded="false"
-                class="euiAccordion__button"
-                id="some_html_id"
-                type="button"
+              <span
+                class="euiAccordion__iconWrapper"
               >
-                <span
-                  class="euiAccordion__iconWrapper"
-                >
-                  EuiIconMock
-                </span>
-                <span
-                  class="euiIEFlexWrapFix"
-                >
-                  <h4>
-                    Advanced settings
-                  </h4>
-                </span>
-              </button>
-            </div>
-            <div
-              aria-labelledby="some_html_id"
-              class="euiAccordion__childWrapper"
-              id="accordion_for_create_index_settings"
-              role="region"
-              style="height: 0px"
-              tabindex="-1"
-            >
-              <div>
+                EuiIconMock
+              </span>
+              <span
+                class="euiIEFlexWrapFix"
+              >
+                <h2>
+                  Advanced settings
+                </h2>
+              </span>
+            </button>
+          </div>
+          <div
+            aria-labelledby="some_html_id"
+            class="euiAccordion__childWrapper"
+            id="accordion_for_create_index_settings"
+            role="region"
+            style="height: 0px"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                class=""
+              >
+                <div
+                  class="euiSpacer euiSpacer--s"
+                />
                 <div
-                  class=""
+                  class="euiFormRow euiFormRow--compressed"
+                  data-test-subj="formNameAdvancedSettings"
+                  id="some_html_id-row"
                 >
                   <div
-                    class="euiSpacer euiSpacer--s"
-                  />
+                    class="euiFormRow__labelWrapper"
+                  >
+                    <label
+                      class="euiFormLabel euiFormRow__label"
+                      for="some_html_id"
+                    >
+                      Specify advanced index settings
+                    </label>
+                  </div>
                   <div
-                    class="euiFormRow euiFormRow--compressed"
-                    data-test-subj="formNameAdvancedSettings"
-                    id="some_html_id-row"
+                    class="euiFormRow__fieldWrapper"
                   >
                     <div
-                      class="euiFormRow__labelWrapper"
+                      class="euiFormHelpText euiFormRow__text"
+                      style="padding-top: 0px; padding-bottom: 4px;"
                     >
-                      <label
-                        class="euiFormLabel euiFormRow__label"
-                        for="some_html_id"
+                      Specify a comma-delimited list of settings. 
+                      <a
+                        class="euiLink euiLink--primary"
+                        href="https://opensearch.org/docs/latest/api-reference/index-apis/create-index#index-settings"
+                        rel="noopener noreferrer"
+                        target="_blank"
                       >
-                        Specify advanced index settings
-                      </label>
+                        View index settings.
+                        EuiIconMock
+                        <span
+                          class="euiScreenReaderOnly"
+                        >
+                          (opens in a new tab or window)
+                        </span>
+                      </a>
                     </div>
-                    <div
-                      class="euiFormRow__fieldWrapper"
+                    <textarea
+                      data-test-subj="jsonEditor-valueDisplay"
+                      readonly=""
+                      style="display: none;"
                     >
-                      <div
-                        class="euiFormHelpText euiFormRow__text"
-                        style="padding-top: 0px; padding-bottom: 4px;"
-                      >
-                        Specify a comma-delimited list of settings. 
-                        <a
-                          class="euiLink euiLink--primary"
-                          href="https://opensearch.org/docs/latest/api-reference/index-apis/create-index#index-settings"
-                          rel="noopener noreferrer"
-                          target="_blank"
-                        >
-                          View index settings.
-                          EuiIconMock
-                          <span
-                            class="euiScreenReaderOnly"
-                          >
-                            (opens in a new tab or window)
-                          </span>
-                        </a>
-                      </div>
-                      <textarea
-                        data-test-subj="jsonEditor-valueDisplay"
-                        readonly=""
-                        style="display: none;"
-                      >
-                        {
+                      {
   "index.number_of_shards": 1,
   "index.number_of_replicas": 1
 }
-                      </textarea>
-                      <div
-                        class="euiCodeEditorWrapper"
-                        data-test-subj="codeEditorContainer"
+                    </textarea>
+                    <div
+                      class="euiCodeEditorWrapper"
+                      data-test-subj="codeEditorContainer"
+                    >
+                      <button
+                        class="euiCodeEditorKeyboardHint"
+                        data-test-subj="codeEditorHint"
+                        id="some_html_id"
                       >
-                        <button
-                          class="euiCodeEditorKeyboardHint"
-                          data-test-subj="codeEditorHint"
-                          id="some_html_id"
+                        <p
+                          class="euiText"
                         >
-                          <p
-                            class="euiText"
-                          >
-                            Press Enter to start editing.
-                          </p>
-                          <p
-                            class="euiText"
-                          >
-                            When you're done, press Escape to stop editing.
-                          </p>
-                        </button>
+                          Press Enter to start editing.
+                        </p>
+                        <p
+                          class="euiText"
+                        >
+                          When you're done, press Escape to stop editing.
+                        </p>
+                      </button>
+                      <div
+                        class=" ace_editor ace-tm"
+                        id="some_html_id"
+                        style="width: 500px; height: 500px;"
+                      >
+                        <textarea
+                          autocapitalize="off"
+                          autocorrect="off"
+                          class="ace_text-input"
+                          spellcheck="false"
+                          style="opacity: 0;"
+                          tabindex="-1"
+                          wrap="off"
+                        />
                         <div
-                          class=" ace_editor ace-tm"
-                          id="some_html_id"
-                          style="width: 500px; height: 500px;"
+                          aria-hidden="true"
+                          class="ace_gutter"
                         >
-                          <textarea
-                            autocapitalize="off"
-                            autocorrect="off"
-                            class="ace_text-input"
-                            spellcheck="false"
-                            style="opacity: 0;"
-                            tabindex="-1"
-                            wrap="off"
+                          <div
+                            class="ace_layer ace_gutter-layer ace_folding-enabled"
                           />
                           <div
-                            aria-hidden="true"
-                            class="ace_gutter"
-                          >
-                            <div
-                              class="ace_layer ace_gutter-layer ace_folding-enabled"
-                            />
-                            <div
-                              class="ace_gutter-active-line"
-                            />
-                          </div>
+                            class="ace_gutter-active-line"
+                          />
+                        </div>
+                        <div
+                          class="ace_scroller"
+                        >
                           <div
-                            class="ace_scroller"
+                            class="ace_content"
                           >
                             <div
-                              class="ace_content"
+                              class="ace_layer ace_print-margin-layer"
                             >
                               <div
-                                class="ace_layer ace_print-margin-layer"
-                              >
-                                <div
-                                  class="ace_print-margin"
-                                  style="left: 4px; visibility: visible;"
-                                />
-                              </div>
-                              <div
-                                class="ace_layer ace_marker-layer"
-                              />
-                              <div
-                                class="ace_layer ace_text-layer"
-                                style="padding: 0px 4px;"
-                              />
-                              <div
-                                class="ace_layer ace_marker-layer"
+                                class="ace_print-margin"
+                                style="left: 4px; visibility: visible;"
                               />
-                              <div
-                                class="ace_layer ace_cursor-layer ace_hidden-cursors"
-                              >
-                                <div
-                                  class="ace_cursor"
-                                />
-                              </div>
                             </div>
-                          </div>
-                          <div
-                            class="ace_scrollbar ace_scrollbar-v"
-                            style="display: none; width: 20px;"
-                          >
                             <div
-                              class="ace_scrollbar-inner"
-                              style="width: 20px;"
+                              class="ace_layer ace_marker-layer"
                             />
-                          </div>
-                          <div
-                            class="ace_scrollbar ace_scrollbar-h"
-                            style="display: none; height: 20px;"
-                          >
                             <div
-                              class="ace_scrollbar-inner"
-                              style="height: 20px;"
+                              class="ace_layer ace_text-layer"
+                              style="padding: 0px 4px;"
                             />
-                          </div>
-                          <div
-                            style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
-                          >
                             <div
-                              style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+                              class="ace_layer ace_marker-layer"
                             />
                             <div
-                              style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+                              class="ace_layer ace_cursor-layer ace_hidden-cursors"
                             >
-                              XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+                              <div
+                                class="ace_cursor"
+                              />
                             </div>
                           </div>
                         </div>
+                        <div
+                          class="ace_scrollbar ace_scrollbar-v"
+                          style="display: none; width: 20px;"
+                        >
+                          <div
+                            class="ace_scrollbar-inner"
+                            style="width: 20px;"
+                          />
+                        </div>
+                        <div
+                          class="ace_scrollbar ace_scrollbar-h"
+                          style="display: none; height: 20px;"
+                        >
+                          <div
+                            class="ace_scrollbar-inner"
+                            style="height: 20px;"
+                          />
+                        </div>
+                        <div
+                          style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
+                        >
+                          <div
+                            style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+                          />
+                          <div
+                            style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+                          >
+                            XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -685,15 +715,9 @@ exports[`<Shrink index /> spec renders the component 1`] = `
                   <div
                     class="euiText euiText--small"
                   >
-                    <h1>
+                    <h2>
                       Advanced settings
-                      <span
-                        class="panel-header-count"
-                      >
-                         
-                         
-                      </span>
-                    </h1>
+                    </h2>
                   </div>
                 </div>
               </div>
diff --git a/public/pages/SplitIndex/components/SplitIndexForm/SplitIndexForm.tsx b/public/pages/SplitIndex/components/SplitIndexForm/SplitIndexForm.tsx
index 8fda2b6b3..6682f2a2f 100644
--- a/public/pages/SplitIndex/components/SplitIndexForm/SplitIndexForm.tsx
+++ b/public/pages/SplitIndex/components/SplitIndexForm/SplitIndexForm.tsx
@@ -3,11 +3,20 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import React, { Component } from "react";
-import { EuiSpacer, EuiLink, EuiFlexItem, EuiFlexGroup, EuiSmallButton, EuiSmallButtonEmpty } from "@elastic/eui";
+import {
+  EuiSpacer,
+  EuiLink,
+  EuiFlexItem,
+  EuiFlexGroup,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
+  EuiText,
+  EuiPanel,
+  EuiHorizontalRule,
+} from "@elastic/eui";
 import FormGenerator, { IField, IFormGeneratorRef, IFieldComponentProps } from "../../../../components/FormGenerator";
 import { IndexItem } from "../../../../../models/interfaces";
 import IndexDetail from "../../../../containers/IndexDetail";
-import ContentPanel from "../../../../components/ContentPanel/ContentPanel";
 import AliasSelect, { AliasSelectProps } from "../../../../components/AliasSelect";
 import EuiToolTipWrapper from "../../../../components/EuiToolTipWrapper";
 import {
@@ -20,6 +29,7 @@ import {
 import NotificationConfig, { NotificationConfigRef } from "../../../../containers/NotificationConfig";
 import { ServerResponse } from "../../../../../server/models/types";
 import { ActionType, OperationType } from "../../../Notifications/constant";
+import { OptionalLabel } from "../../../../components/CustomFormRow";
 
 const WrappedAliasSelect = EuiToolTipWrapper(AliasSelect, {
   disabledKey: "isDisabled",
@@ -81,7 +91,11 @@ export default class SplitIndexForm extends Component<SplitIndexComponentProps>
     const formFields: IField[] = [
       {
         rowProps: {
-          label: "Target Index Name",
+          label: (
+            <EuiText size="s">
+              <h3>Target Index Name</h3>
+            </EuiText>
+          ),
           helpText: INDEX_NAMING_MESSAGE,
           position: "bottom",
         },
@@ -112,7 +126,11 @@ export default class SplitIndexForm extends Component<SplitIndexComponentProps>
       },
       {
         rowProps: {
-          label: "Number of primary shards",
+          label: (
+            <EuiText size="s">
+              <h3>Number of primary shards</h3>
+            </EuiText>
+          ),
           helpText: (
             <>
               <p>Specify the number of primary shards for the new split index.</p>
@@ -149,7 +167,11 @@ export default class SplitIndexForm extends Component<SplitIndexComponentProps>
       },
       {
         rowProps: {
-          label: "Number of replicas",
+          label: (
+            <EuiText size="s">
+              <h3>Number of replicas</h3>
+            </EuiText>
+          ),
           helpText: REPLICA_NUMBER_MESSAGE,
         },
         name: "index.number_of_replicas",
@@ -165,8 +187,13 @@ export default class SplitIndexForm extends Component<SplitIndexComponentProps>
       {
         name: "aliases",
         rowProps: {
-          label: "Index alias",
-          isOptional: true,
+          label: (
+            <EuiText size="s">
+              <h3>
+                Index alias <OptionalLabel />
+              </h3>
+            </EuiText>
+          ),
           helpText: "Allow this index to be referenced by existing aliases or specify a new alias.",
         },
         options: {
@@ -192,7 +219,11 @@ export default class SplitIndexForm extends Component<SplitIndexComponentProps>
         {readyForSplit && (
           <>
             <EuiSpacer />
-            <ContentPanel title="Configure target index" titleSize="s">
+            <EuiPanel>
+              <EuiText size="s">
+                <h2>Configure target index</h2>
+              </EuiText>
+              <EuiHorizontalRule margin="xs" />
               <FormGenerator
                 value={{ "index.number_of_replicas": "1", ...this.state.settings }}
                 onChange={(totalValue) =>
@@ -223,13 +254,17 @@ export default class SplitIndexForm extends Component<SplitIndexComponentProps>
                   },
                 }}
               />
-            </ContentPanel>
+            </EuiPanel>
           </>
         )}
         <NotificationConfig
           withPanel
           panelProps={{
-            title: "Advanced settings",
+            title: (
+              <EuiText size="s">
+                <h2>Advanced settings</h2>
+              </EuiText>
+            ),
             titleSize: "s",
           }}
           ref={(ref) => (this.notificationRef = ref)}
diff --git a/public/pages/SplitIndex/container/SplitIndex/SplitIndex.tsx b/public/pages/SplitIndex/container/SplitIndex/SplitIndex.tsx
index ee76c2a6f..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";
@@ -231,7 +231,7 @@ export class SplitIndex extends Component<SplitIndexProps> {
 
     const descriptionData = [
       {
-        description: "Shrink an existing index into a new index with fewer primary shards.",
+        description: "Split an existing read-only index into a new index with more primary shards.",
         links: {
           label: "Learn more",
           href: "https://opensearch.org/docs/latest/api-reference/index-apis/split/",
@@ -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/components/ConfigureTransform/Configure.tsx b/public/pages/Transforms/components/ConfigureTransform/Configure.tsx
index b52818e0d..07e53e3f0 100644
--- a/public/pages/Transforms/components/ConfigureTransform/Configure.tsx
+++ b/public/pages/Transforms/components/ConfigureTransform/Configure.tsx
@@ -4,8 +4,17 @@
  */
 
 import React, { ChangeEvent } from "react";
-import { EuiSpacer, EuiCompressedFormRow, EuiCompressedFieldText, EuiTextArea, EuiText, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
-import { ContentPanel } from "../../../../components/ContentPanel";
+import {
+  EuiSpacer,
+  EuiCompressedFormRow,
+  EuiCompressedFieldText,
+  EuiTextArea,
+  EuiText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPanel,
+  EuiHorizontalRule,
+} from "@elastic/eui";
 
 interface ConfigureTransformProps {
   inEdit: boolean;
@@ -26,10 +35,24 @@ const ConfigureTransform = ({
   description,
   size,
 }: ConfigureTransformProps) => (
-  <ContentPanel bodyStyles={{ padding: "initial" }} title="Job name and description" titleSize={size}>
-    <div style={{ paddingLeft: "10px" }}>
+  <EuiPanel>
+    <EuiText size="s">
+      {" "}
+      <h2>Job name and description</h2>{" "}
+    </EuiText>
+    <EuiHorizontalRule margin="xs" />
+    <div>
       <EuiSpacer size="s" />
-      <EuiCompressedFormRow label="Name" helpText="Specify a unique, descriptive name." isInvalid={!!error} error={error}>
+      <EuiCompressedFormRow
+        label={
+          <EuiText size="s">
+            <h3>Name</h3>
+          </EuiText>
+        }
+        helpText="Specify a unique, descriptive name."
+        isInvalid={!!error}
+        error={error}
+      >
         <EuiCompressedFieldText
           isInvalid={!!error}
           placeholder="transform-id"
@@ -41,13 +64,15 @@ const ConfigureTransform = ({
       <EuiSpacer />
       <EuiFlexGroup gutterSize="xs">
         <EuiFlexItem grow={false}>
-          <EuiText size="xs">
-            <h4>Description</h4>
+          <EuiText size="s">
+            <h3>Description</h3>
           </EuiText>
         </EuiFlexItem>
         <EuiFlexItem>
-          <EuiText size="xs" color="subdued">
-            <i> – optional</i>
+          <EuiText size="s" color="subdued">
+            <h3>
+              <i> – optional</i>
+            </h3>
           </EuiText>
         </EuiFlexItem>
       </EuiFlexGroup>
@@ -56,7 +81,7 @@ const ConfigureTransform = ({
         <EuiTextArea compressed={true} value={description} onChange={onChangeDescription} data-test-subj="description" />
       </EuiCompressedFormRow>
     </div>
-  </ContentPanel>
+  </EuiPanel>
 );
 
 export default ConfigureTransform;
diff --git a/public/pages/Transforms/components/DeleteModal/DeleteModal.tsx b/public/pages/Transforms/components/DeleteModal/DeleteModal.tsx
index 2e27aef2b..bfb2bf147 100644
--- a/public/pages/Transforms/components/DeleteModal/DeleteModal.tsx
+++ b/public/pages/Transforms/components/DeleteModal/DeleteModal.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { ChangeEvent, Component, Fragment } from "react";
-import { EuiConfirmModal, EuiForm, EuiCompressedFormRow, EuiCompressedFieldText, EuiOverlayMask, EuiSpacer } from "@elastic/eui";
+import { EuiConfirmModal, EuiForm, EuiCompressedFormRow, EuiCompressedFieldText, EuiOverlayMask, EuiSpacer, EuiText } from "@elastic/eui";
 
 // TODO: Merge with Rollup to create generic component
 interface DeleteModalProps {
@@ -31,7 +31,11 @@ export default class DeleteModal extends Component<DeleteModalProps, DeleteModal
     return (
       <EuiOverlayMask>
         <EuiConfirmModal
-          title="Delete job(s)"
+          title={
+            <EuiText size="s">
+              <h2>Delete job(s)</h2>
+            </EuiText>
+          }
           onCancel={closeDeleteModal}
           onConfirm={onClickDelete}
           cancelButtonText="Cancel"
@@ -42,8 +46,12 @@ export default class DeleteModal extends Component<DeleteModalProps, DeleteModal
         >
           <EuiForm>
             <Fragment>
-              By deleting <strong>{item}</strong>, all future scheduled executions will be canceled. However, your target index and data in
-              it will remain intact.
+              <EuiText size="s">
+                <p>
+                  By deleting <strong>{item}</strong>, all future scheduled executions will be canceled. However, your target index and data
+                  in it will remain intact.
+                </p>
+              </EuiText>
             </Fragment>
             <EuiSpacer size="s" />
             <EuiCompressedFormRow helpText="To confirm deletion, enter delete in the text field">
diff --git a/public/pages/Transforms/components/GeneralInformation/GeneralInformation.tsx b/public/pages/Transforms/components/GeneralInformation/GeneralInformation.tsx
index 4521a2c8b..9f60c8a61 100644
--- a/public/pages/Transforms/components/GeneralInformation/GeneralInformation.tsx
+++ b/public/pages/Transforms/components/GeneralInformation/GeneralInformation.tsx
@@ -4,8 +4,8 @@
  */
 
 import React, { Component } from "react";
-import { EuiFlexGrid, EuiSpacer, EuiFlexItem, EuiText } from "@elastic/eui";
-import { ContentPanel, ContentPanelActions } from "../../../../components/ContentPanel";
+import { EuiFlexGrid, EuiSpacer, EuiFlexItem, EuiText, EuiFlexGroup, EuiPanel, EuiHorizontalRule } from "@elastic/eui";
+import { ContentPanelActions } from "../../../../components/ContentPanel";
 import { ModalConsumer } from "../../../../components/Modal";
 import { getUISettings } from "../../../../services/Services";
 
@@ -50,45 +50,51 @@ export default class GeneralInformation extends Component<GeneralInformationProp
     const size = useUpdatedUX ? "s" : undefined;
 
     return (
-      <ContentPanel
-        actions={
-          !useUpdatedUX ? (
-            <ModalConsumer>
-              {() => (
-                <ContentPanelActions
-                  size={size}
-                  actions={[
-                    {
-                      text: "Edit",
-                      buttonProps: {
-                        onClick: () => onEdit(),
-                      },
-                    },
-                  ]}
-                />
-              )}
-            </ModalConsumer>
-          ) : null
-        }
-        bodyStyles={{ padding: "initial" }}
-        title="General information"
-        titleSize={size}
-      >
-        <div style={{ paddingLeft: "10px" }}>
-          <EuiSpacer size="s" />
-          <EuiFlexGrid columns={4}>
-            {infoItems.map((item, index) => (
-              <EuiFlexItem key={index}>
-                <EuiText size="xs">
-                  <dt>{item.term}</dt>
-                  <dd>{item.value}</dd>
-                </EuiText>
-              </EuiFlexItem>
-            ))}
-          </EuiFlexGrid>
-          <EuiSpacer size="s" />
-        </div>
-      </ContentPanel>
+      <>
+        <EuiPanel>
+          <EuiFlexGroup>
+            <EuiFlexItem>
+              <EuiText size="s">
+                <h2>General information</h2>
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              {!useUpdatedUX ? (
+                <ModalConsumer>
+                  {() => (
+                    <ContentPanelActions
+                      size={size}
+                      actions={[
+                        {
+                          text: "Edit",
+                          buttonProps: {
+                            onClick: () => onEdit(),
+                          },
+                        },
+                      ]}
+                    />
+                  )}
+                </ModalConsumer>
+              ) : null}
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiHorizontalRule margin="xs" />
+          <div>
+            <EuiSpacer size="s" />
+            <EuiFlexGrid columns={4}>
+              {infoItems.map((item, index) => (
+                <EuiFlexItem key={index}>
+                  <EuiText size="xs">
+                    <dt>{item.term}</dt>
+                    <dd>{item.value}</dd>
+                  </EuiText>
+                </EuiFlexItem>
+              ))}
+            </EuiFlexGrid>
+            <EuiSpacer size="s" />
+          </div>
+        </EuiPanel>
+      </>
     );
   }
 }
diff --git a/public/pages/Transforms/components/Indices/Indices.tsx b/public/pages/Transforms/components/Indices/Indices.tsx
index f5d5fca09..79895643a 100644
--- a/public/pages/Transforms/components/Indices/Indices.tsx
+++ b/public/pages/Transforms/components/Indices/Indices.tsx
@@ -4,8 +4,7 @@
  */
 
 import React, { Component } from "react";
-import { EuiCodeEditor, EuiSpacer, EuiText } from "@elastic/eui";
-import { ContentPanel } from "../../../../components/ContentPanel";
+import { EuiCodeEditor, EuiSpacer, EuiText, EuiPanel, EuiHorizontalRule } from "@elastic/eui";
 
 interface IndicesProps {
   sourceIndex: string;
@@ -20,27 +19,32 @@ export default class Indices extends Component<IndicesProps> {
   }
 
   render() {
-    const { sourceIndex, targetIndex, sourceIndexFilter, size } = this.props;
+    const { sourceIndex, targetIndex, sourceIndexFilter } = this.props;
 
     return (
-      <ContentPanel bodyStyles={{ padding: "initial" }} title="Indices" titleSize={size}>
-        <div style={{ paddingLeft: "10px" }}>
-          <EuiText size="xs">
-            <dt>Source index</dt>
-            <dd>{sourceIndex}</dd>
+      <EuiPanel>
+        <EuiText size="s">
+          {" "}
+          <h2>Indices</h2>{" "}
+        </EuiText>
+        <EuiHorizontalRule margin="xs" />
+        <div>
+          <EuiText size="s">
+            <h3>Source index</h3>
+            <p>{sourceIndex}</p>
           </EuiText>
           <EuiSpacer size="m" />
-          <EuiText size="xs">
-            <dt>Source index filter</dt>
+          <EuiText size="s">
+            <h3>Source index filter</h3>
             <EuiCodeEditor mode="json" theme="github" width="400px" height="100px" value={sourceIndexFilter} readOnly />
           </EuiText>
           <EuiSpacer size="m" />
-          <EuiText size="xs">
-            <dt>Target index</dt>
-            <dd>{targetIndex}</dd>
+          <EuiText size="s">
+            <h3>Target index</h3>
+            <p>{targetIndex}</p>
           </EuiText>
         </div>
-      </ContentPanel>
+      </EuiPanel>
     );
   }
 }
diff --git a/public/pages/Transforms/components/Schedule/Schedule.tsx b/public/pages/Transforms/components/Schedule/Schedule.tsx
index 94d73cd86..ae3d2f824 100644
--- a/public/pages/Transforms/components/Schedule/Schedule.tsx
+++ b/public/pages/Transforms/components/Schedule/Schedule.tsx
@@ -4,10 +4,18 @@
  */
 
 import React, { ChangeEvent, Component } from "react";
-import { EuiSpacer, EuiCompressedCheckbox, EuiAccordion, EuiCompressedFormRow, EuiCompressedFieldNumber } from "@elastic/eui";
+import {
+  EuiSpacer,
+  EuiCompressedCheckbox,
+  EuiAccordion,
+  EuiCompressedFormRow,
+  EuiCompressedFieldNumber,
+  EuiText,
+  EuiPanel,
+  EuiHorizontalRule,
+} from "@elastic/eui";
 // @ts-ignore
 import { htmlIdGenerator } from "@elastic/eui/lib/services";
-import { ContentPanel } from "../../../../components/ContentPanel";
 import { selectInterval } from "../../utils/metadataHelper";
 
 interface ScheduleProps {
@@ -47,14 +55,22 @@ export default class Schedule extends Component<ScheduleProps> {
       intervalTimeUnit,
       onIntervalChange,
       onIntervalTimeUnitChange,
-      size,
     } = this.props;
     return (
-      <ContentPanel bodyStyles={{ padding: "initial" }} title="Schedule" titleSize={size}>
-        <div style={{ paddingLeft: "10px" }}>
+      <EuiPanel>
+        <EuiText size="s">
+          {" "}
+          <h2>Schedule</h2>{" "}
+        </EuiText>
+        <EuiHorizontalRule margin="xs" />
+        <div>
           <EuiCompressedCheckbox
             id="jobEnabled"
-            label="Job enabled by default"
+            label={
+              <EuiText size="s">
+                <p>Job enabled by default</p>
+              </EuiText>
+            }
             checked={enabled}
             onChange={onEnabledChange}
             data-test-subj="jobEnabled"
@@ -69,7 +85,14 @@ export default class Schedule extends Component<ScheduleProps> {
 
           <EuiSpacer size="m" />
 
-          <EuiAccordion id={htmlIdGenerator()()} buttonContent="Advanced">
+          <EuiAccordion
+            id={htmlIdGenerator()()}
+            buttonContent={
+              <EuiText size="s">
+                <h3>Advanced</h3>
+              </EuiText>
+            }
+          >
             <EuiSpacer size="m" />
             <EuiCompressedFormRow
               label={"Pages per execution"}
@@ -81,7 +104,7 @@ export default class Schedule extends Component<ScheduleProps> {
             </EuiCompressedFormRow>
           </EuiAccordion>
         </div>
-      </ContentPanel>
+      </EuiPanel>
     );
   }
 }
diff --git a/public/pages/Transforms/components/TransformEmptyPrompt/TransformEmptyPrompt.tsx b/public/pages/Transforms/components/TransformEmptyPrompt/TransformEmptyPrompt.tsx
index 98b5cbbf1..4f751535b 100644
--- a/public/pages/Transforms/components/TransformEmptyPrompt/TransformEmptyPrompt.tsx
+++ b/public/pages/Transforms/components/TransformEmptyPrompt/TransformEmptyPrompt.tsx
@@ -43,7 +43,7 @@ const getActions: React.SFC<TransformEmptyPromptProps> = ({ filterIsApplied, loa
   }
 
   return (
-    <EuiSmallButton href={`${PLUGIN_NAME}#${ROUTES.CREATE_TRANSFORM}`} data-test-subj="emptyPromptCreateTransformButton">
+    <EuiSmallButton href={`${PLUGIN_NAME}#${ROUTES.CREATE_TRANSFORM}`} data-test-subj="emptyPromptCreateTransformButton" iconType="plus">
       Create transform
     </EuiSmallButton>
   );
@@ -53,7 +53,7 @@ const TransformEmptyPrompt: React.SFC<TransformEmptyPromptProps> = (props) => (
   <EuiEmptyPrompt
     style={{ maxWidth: "45em" }}
     body={
-      <EuiText>
+      <EuiText size="s">
         <p>{getMessagePrompt(props)}</p>
       </EuiText>
     }
diff --git a/public/pages/Transforms/components/TransformStatus/TransformStatus.tsx b/public/pages/Transforms/components/TransformStatus/TransformStatus.tsx
index ea12f8270..e80e221d6 100644
--- a/public/pages/Transforms/components/TransformStatus/TransformStatus.tsx
+++ b/public/pages/Transforms/components/TransformStatus/TransformStatus.tsx
@@ -4,11 +4,9 @@
  */
 
 import React, { Component } from "react";
-import { EuiFlexGrid, EuiSpacer, EuiFlexItem, EuiText } from "@elastic/eui";
+import { EuiFlexGrid, EuiSpacer, EuiFlexItem, EuiText, EuiPanel, EuiHorizontalRule } from "@elastic/eui";
 import { TransformMetadata } from "../../../../../models/interfaces";
-import { ContentPanel } from "../../../../components/ContentPanel";
 import { renderStatus } from "../../utils/metadataHelper";
-import { getUISettings } from "../../../../services/Services";
 
 interface TransformStatusProps {
   metadata: TransformMetadata | undefined;
@@ -21,11 +19,13 @@ export default class TransformStatus extends Component<TransformStatusProps> {
 
   render() {
     const { metadata } = this.props;
-    const uiSettings = getUISettings();
-    const useUpdatedUX = uiSettings.get("home:useNewHomePage");
     return (
-      <ContentPanel bodyStyles={{ padding: "initial" }} title="Transform status" titleSize={useUpdatedUX ? "s" : undefined}>
-        <div style={{ paddingLeft: "10px" }}>
+      <EuiPanel>
+        <EuiText size="s">
+          <h2>Transform Status</h2>
+        </EuiText>
+        <EuiHorizontalRule margin="xs" />
+        <div>
           <EuiSpacer size="s" />
           <EuiFlexGrid columns={4}>
             <EuiFlexItem>
@@ -77,7 +77,7 @@ export default class TransformStatus extends Component<TransformStatusProps> {
           </EuiFlexGrid>
           <EuiSpacer size="s" />
         </div>
-      </ContentPanel>
+      </EuiPanel>
     );
   }
 }
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 8c8b44efa..0a9974a61 100644
--- a/public/pages/Transforms/containers/Transforms/TransformDetails.tsx
+++ b/public/pages/Transforms/containers/Transforms/TransformDetails.tsx
@@ -363,7 +363,6 @@ export class TransformDetails extends Component<TransformDetailsProps, Transform
                       buttonProps: {
                         onClick: () => this.onEdit(),
                         fill: true,
-                        style: { marginRight: 20 },
                       },
                     },
                   ]}
@@ -390,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}>
@@ -407,7 +406,7 @@ export class TransformDetails extends Component<TransformDetailsProps, Transform
                   anchorPosition="downLeft"
                   data-test-subj="actionPopover"
                 >
-                  <EuiContextMenuPanel items={actionItems} />
+                  <EuiContextMenuPanel items={actionItems} size="s" />
                 </EuiPopover>
               </EuiFlexItem>
             </EuiFlexGroup>
@@ -430,7 +429,6 @@ export class TransformDetails extends Component<TransformDetailsProps, Transform
         <EuiSpacer />
         <TransformStatus metadata={metadata} />
         <EuiSpacer />
-        <EuiSpacer />
         <TransformSettings
           {...this.props}
           transformService={this.props.transformService}
@@ -443,13 +441,17 @@ export class TransformDetails extends Component<TransformDetailsProps, Transform
 
         {isModalOpen && (
           <EuiOverlayMask>
-            <EuiModal onClose={this.closeModal} style={{ padding: "5px 30px" }}>
+            <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>
@@ -482,7 +484,6 @@ export class TransformDetails extends Component<TransformDetailsProps, Transform
         <EuiSpacer />
         <TransformStatus metadata={metadata} />
         <EuiSpacer />
-        <EuiSpacer />
         <TransformSettings
           {...this.props}
           transformService={this.props.transformService}
@@ -495,13 +496,17 @@ export class TransformDetails extends Component<TransformDetailsProps, Transform
 
         {isModalOpen && (
           <EuiOverlayMask>
-            <EuiModal onClose={this.closeModal} style={{ padding: "5px 30px" }}>
+            <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>
diff --git a/public/pages/Transforms/containers/Transforms/TransformSettings.tsx b/public/pages/Transforms/containers/Transforms/TransformSettings.tsx
index 43d6524b8..46f134076 100644
--- a/public/pages/Transforms/containers/Transforms/TransformSettings.tsx
+++ b/public/pages/Transforms/containers/Transforms/TransformSettings.tsx
@@ -4,15 +4,13 @@
  */
 
 import React, { Component } from "react";
-import { EuiSpacer, EuiText, EuiAccordion, EuiFlexGrid, EuiFlexItem } from "@elastic/eui";
+import { EuiSpacer, EuiText, EuiAccordion, EuiFlexGrid, EuiFlexItem, EuiPanel, EuiHorizontalRule } from "@elastic/eui";
 // @ts-ignore
 import { htmlIdGenerator } from "@elastic/eui/lib/services";
-import { ContentPanel } from "../../../../components/ContentPanel";
 import { TransformService } from "../../../../services";
 import { DimensionItem, TRANSFORM_AGG_TYPE } from "../../../../../models/interfaces";
 import { getErrorMessage } from "../../../../utils/helpers";
 import PreviewTransforms from "../../../CreateTransform/components/PreviewTransform";
-import { getUISettings } from "../../../../services/Services";
 
 interface TransformSettingsProps {
   transformService: TransformService;
@@ -88,12 +86,14 @@ export default class TransformSettings extends Component<TransformSettingsProps,
         );
       });
     };
-    const uiSettings = getUISettings();
-    const useUpdatedUX = uiSettings.get("home:useNewHomePage");
 
     return (
-      <ContentPanel bodyStyles={{ padding: "initial" }} title="Transform settings" titleSize={useUpdatedUX ? "s" : undefined}>
-        <div style={{ paddingLeft: "10px" }}>
+      <EuiPanel>
+        <EuiText size="s">
+          <h2>Transform Settings</h2>
+        </EuiText>
+        <EuiHorizontalRule margin="xs" />
+        <div>
           <EuiSpacer size="m" />
           <EuiFlexGrid columns={4}>
             {groupItems()}
@@ -101,8 +101,17 @@ export default class TransformSettings extends Component<TransformSettingsProps,
           </EuiFlexGrid>
           <EuiSpacer size="m" />
         </div>
-        <div style={{ padding: "10px" }}>
-          <EuiAccordion id={htmlIdGenerator()()} buttonContent="Sample source index and transform result" onClick={this.onClick}>
+        <div>
+          <EuiAccordion
+            id={htmlIdGenerator()()}
+            buttonContent={
+              <EuiText size="s">
+                {" "}
+                <h3>Sample source index and transform result</h3>{" "}
+              </EuiText>
+            }
+            onClick={this.onClick}
+          >
             <div style={{ padding: "10px" }}>
               <EuiSpacer size={"m"} />
 
@@ -110,7 +119,6 @@ export default class TransformSettings extends Component<TransformSettingsProps,
               <EuiText>
                 <h5>Preview result based on sample data</h5>
               </EuiText>
-              <EuiSpacer size={"s"} />
               <PreviewTransforms
                 onRemoveTransformation={() => {}}
                 previewTransform={this.state.previewTransform}
@@ -120,7 +128,7 @@ export default class TransformSettings extends Component<TransformSettingsProps,
             </div>
           </EuiAccordion>
         </div>
-      </ContentPanel>
+      </EuiPanel>
     );
   }
 
diff --git a/public/pages/Transforms/containers/Transforms/Transforms.tsx b/public/pages/Transforms/containers/Transforms/Transforms.tsx
index cd2a1e00b..3eca49a72 100644
--- a/public/pages/Transforms/containers/Transforms/Transforms.tsx
+++ b/public/pages/Transforms/containers/Transforms/Transforms.tsx
@@ -271,8 +271,8 @@ export class Transforms extends MDSEnabledComponent<TransformProps, TransformSta
             } as TopNavControlButtonData,
           ]}
         />
-        <EuiPanel style={{ paddingLeft: "10px", paddingRight: "10px" }}>
-          <div style={{ padding: "initial" }}>
+        <EuiPanel>
+          <div>
             <EuiFlexGroup gutterSize="s">
               <EuiFlexItem>
                 <EuiCompressedFieldSearch fullWidth={true} value={search} placeholder="Search" onChange={this.onSearchChange} />
@@ -297,7 +297,7 @@ export class Transforms extends MDSEnabledComponent<TransformProps, TransformSta
                   anchorPosition="downLeft"
                   data-test-subj="actionPopover"
                 >
-                  <EuiContextMenuPanel items={actionItems} />
+                  <EuiContextMenuPanel items={actionItems} size="s" />
                 </EuiPopover>
               </EuiFlexItem>
             </EuiFlexGroup>
@@ -368,18 +368,18 @@ export class Transforms extends MDSEnabledComponent<TransformProps, TransformSta
                   anchorPosition="downLeft"
                   data-test-subj="actionPopover"
                 >
-                  <EuiContextMenuPanel items={actionItems} />
+                  <EuiContextMenuPanel items={actionItems} size="s" />
                 </EuiPopover>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiSmallButton onClick={this.onClickCreate} fill={true} data-test-subj="createTransformButton">
+                <EuiSmallButton onClick={this.onClickCreate} fill={true} data-test-subj="createTransformButton" iconType="plus">
                   Create transform job
                 </EuiSmallButton>
               </EuiFlexItem>
             </EuiFlexGroup>
           </EuiFlexItem>
         </EuiFlexGroup>
-
+        <EuiHorizontalRule margin="s" />
         <div style={{ padding: "initial" }}>
           <EuiFlexGroup style={{ padding: "0px 5px" }}>
             <EuiFlexItem>
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 6f3a79038..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,145 +4,135 @@ 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"
   />
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-    style="padding-left: 0px; padding-right: 0px;"
   >
     <div
-      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-      style="padding: 0px 10px;"
+      class="euiText euiText--small"
     >
-      <div
-        class="euiFlexItem"
-      >
-        <div
-          class="euiText euiText--small"
-        >
-          <h1>
-            Job name and description
-            <span
-              class="panel-header-count"
-            >
-               
-               
-            </span>
-          </h1>
-        </div>
-      </div>
+       
+      <h2>
+        Job name and description
+      </h2>
+       
     </div>
     <hr
       class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
     />
-    <div
-      style="padding: initial;"
-    >
+    <div>
+      <div
+        class="euiSpacer euiSpacer--s"
+      />
       <div
-        style="padding-left: 10px;"
+        class="euiFormRow euiFormRow--compressed"
+        id="some_html_id-row"
       >
         <div
-          class="euiSpacer euiSpacer--s"
-        />
-        <div
-          class="euiFormRow euiFormRow--compressed"
-          id="some_html_id-row"
+          class="euiFormRow__labelWrapper"
         >
-          <div
-            class="euiFormRow__labelWrapper"
-          >
-            <label
-              aria-invalid="false"
-              class="euiFormLabel euiFormRow__label"
-              for="some_html_id"
-            >
-              Name
-            </label>
-          </div>
-          <div
-            class="euiFormRow__fieldWrapper"
+          <label
+            aria-invalid="false"
+            class="euiFormLabel euiFormRow__label"
+            for="some_html_id"
           >
             <div
-              class="euiFormControlLayout euiFormControlLayout--compressed"
+              class="euiText euiText--small"
             >
-              <div
-                class="euiFormControlLayout__childrenWrapper"
-              >
-                <input
-                  aria-describedby="some_html_id-help-0"
-                  class="euiFieldText euiFieldText--compressed"
-                  disabled=""
-                  id="some_html_id"
-                  placeholder="transform-id"
-                  type="text"
-                  value=""
-                />
-              </div>
+              <h3>
+                Name
+              </h3>
             </div>
+          </label>
+        </div>
+        <div
+          class="euiFormRow__fieldWrapper"
+        >
+          <div
+            class="euiFormControlLayout euiFormControlLayout--compressed"
+          >
             <div
-              class="euiFormHelpText euiFormRow__text"
-              id="some_html_id-help-0"
+              class="euiFormControlLayout__childrenWrapper"
             >
-              Specify a unique, descriptive name.
+              <input
+                aria-describedby="some_html_id-help-0"
+                class="euiFieldText euiFieldText--compressed"
+                disabled=""
+                id="some_html_id"
+                placeholder="transform-id"
+                type="text"
+                value=""
+              />
             </div>
           </div>
+          <div
+            class="euiFormHelpText euiFormRow__text"
+            id="some_html_id-help-0"
+          >
+            Specify a unique, descriptive name.
+          </div>
         </div>
+      </div>
+      <div
+        class="euiSpacer euiSpacer--l"
+      />
+      <div
+        class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+      >
         <div
-          class="euiSpacer euiSpacer--l"
-        />
-        <div
-          class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+          class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <div
-            class="euiFlexItem euiFlexItem--flexGrowZero"
+            class="euiText euiText--small"
           >
-            <div
-              class="euiText euiText--extraSmall"
-            >
-              <h4>
-                Description
-              </h4>
-            </div>
+            <h3>
+              Description
+            </h3>
           </div>
+        </div>
+        <div
+          class="euiFlexItem"
+        >
           <div
-            class="euiFlexItem"
+            class="euiText euiText--small"
           >
             <div
-              class="euiText euiText--extraSmall"
+              class="euiTextColor euiTextColor--subdued"
             >
-              <div
-                class="euiTextColor euiTextColor--subdued"
-              >
+              <h3>
                 <i>
                    – optional
                 </i>
-              </div>
+              </h3>
             </div>
           </div>
         </div>
+      </div>
+      <div
+        class="euiSpacer euiSpacer--xs"
+      />
+      <div
+        class="euiFormRow euiFormRow--compressed"
+        id="some_html_id-row"
+      >
         <div
-          class="euiSpacer euiSpacer--xs"
-        />
-        <div
-          class="euiFormRow euiFormRow--compressed"
-          id="some_html_id-row"
+          class="euiFormRow__fieldWrapper"
         >
-          <div
-            class="euiFormRow__fieldWrapper"
-          >
-            <textarea
-              class="euiTextArea euiTextArea--resizeVertical euiTextArea--compressed"
-              data-test-subj="description"
-              id="some_html_id"
-              rows="3"
-            />
-          </div>
+          <textarea
+            class="euiTextArea euiTextArea--resizeVertical euiTextArea--compressed"
+            data-test-subj="description"
+            id="some_html_id"
+            rows="3"
+          />
         </div>
       </div>
     </div>
@@ -152,179 +142,159 @@ exports[`<EditTransform /> spec renders the component 1`] = `
   />
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-    style="padding-left: 0px; padding-right: 0px;"
   >
     <div
-      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-      style="padding: 0px 10px;"
+      class="euiText euiText--small"
     >
-      <div
-        class="euiFlexItem"
-      >
-        <div
-          class="euiText euiText--small"
-        >
-          <h1>
-            Indices
-            <span
-              class="panel-header-count"
-            >
-               
-               
-            </span>
-          </h1>
-        </div>
-      </div>
+       
+      <h2>
+        Indices
+      </h2>
+       
     </div>
     <hr
       class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
     />
-    <div
-      style="padding: initial;"
-    >
+    <div>
       <div
-        style="padding-left: 10px;"
+        class="euiText euiText--small"
       >
+        <h3>
+          Source index
+        </h3>
+        <p />
+      </div>
+      <div
+        class="euiSpacer euiSpacer--m"
+      />
+      <div
+        class="euiText euiText--small"
+      >
+        <h3>
+          Source index filter
+        </h3>
         <div
-          class="euiText euiText--extraSmall"
-        >
-          <dt>
-            Source index
-          </dt>
-          <dd />
-        </div>
-        <div
-          class="euiSpacer euiSpacer--m"
-        />
-        <div
-          class="euiText euiText--extraSmall"
+          class="euiCodeEditorWrapper"
+          data-test-subj="codeEditorContainer"
+          style="width: 400px; height: 100px;"
         >
-          <dt>
-            Source index filter
-          </dt>
+          <button
+            class="euiCodeEditorKeyboardHint"
+            data-test-subj="codeEditorHint"
+            id="some_html_id"
+          >
+            <p
+              class="euiText"
+            >
+              Press Enter to start editing.
+            </p>
+            <p
+              class="euiText"
+            >
+              When you're done, press Escape to stop editing.
+            </p>
+          </button>
           <div
-            class="euiCodeEditorWrapper"
-            data-test-subj="codeEditorContainer"
+            class=" ace_editor ace-tm"
+            id="some_html_id"
             style="width: 400px; height: 100px;"
           >
-            <button
-              class="euiCodeEditorKeyboardHint"
-              data-test-subj="codeEditorHint"
-              id="some_html_id"
-            >
-              <p
-                class="euiText"
-              >
-                Press Enter to start editing.
-              </p>
-              <p
-                class="euiText"
-              >
-                When you're done, press Escape to stop editing.
-              </p>
-            </button>
+            <textarea
+              autocapitalize="off"
+              autocorrect="off"
+              class="ace_text-input"
+              spellcheck="false"
+              style="opacity: 0;"
+              tabindex="-1"
+              wrap="off"
+            />
             <div
-              class=" ace_editor ace-tm"
-              id="some_html_id"
-              style="width: 400px; height: 100px;"
+              aria-hidden="true"
+              class="ace_gutter"
             >
-              <textarea
-                autocapitalize="off"
-                autocorrect="off"
-                class="ace_text-input"
-                spellcheck="false"
-                style="opacity: 0;"
-                tabindex="-1"
-                wrap="off"
+              <div
+                class="ace_layer ace_gutter-layer ace_folding-enabled"
               />
               <div
-                aria-hidden="true"
-                class="ace_gutter"
-              >
-                <div
-                  class="ace_layer ace_gutter-layer ace_folding-enabled"
-                />
-                <div
-                  class="ace_gutter-active-line"
-                />
-              </div>
+                class="ace_gutter-active-line"
+              />
+            </div>
+            <div
+              class="ace_scroller"
+            >
               <div
-                class="ace_scroller"
+                class="ace_content"
               >
                 <div
-                  class="ace_content"
+                  class="ace_layer ace_print-margin-layer"
                 >
                   <div
-                    class="ace_layer ace_print-margin-layer"
-                  >
-                    <div
-                      class="ace_print-margin"
-                      style="left: 4px; visibility: visible;"
-                    />
-                  </div>
-                  <div
-                    class="ace_layer ace_marker-layer"
-                  />
-                  <div
-                    class="ace_layer ace_text-layer"
-                    style="padding: 0px 4px;"
-                  />
-                  <div
-                    class="ace_layer ace_marker-layer"
+                    class="ace_print-margin"
+                    style="left: 4px; visibility: visible;"
                   />
-                  <div
-                    class="ace_layer ace_cursor-layer ace_hidden-cursors"
-                  >
-                    <div
-                      class="ace_cursor"
-                    />
-                  </div>
                 </div>
-              </div>
-              <div
-                class="ace_scrollbar ace_scrollbar-v"
-                style="display: none; width: 20px;"
-              >
                 <div
-                  class="ace_scrollbar-inner"
-                  style="width: 20px;"
+                  class="ace_layer ace_marker-layer"
                 />
-              </div>
-              <div
-                class="ace_scrollbar ace_scrollbar-h"
-                style="display: none; height: 20px;"
-              >
                 <div
-                  class="ace_scrollbar-inner"
-                  style="height: 20px;"
+                  class="ace_layer ace_text-layer"
+                  style="padding: 0px 4px;"
                 />
-              </div>
-              <div
-                style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
-              >
                 <div
-                  style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+                  class="ace_layer ace_marker-layer"
                 />
                 <div
-                  style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+                  class="ace_layer ace_cursor-layer ace_hidden-cursors"
                 >
-                  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+                  <div
+                    class="ace_cursor"
+                  />
                 </div>
               </div>
             </div>
+            <div
+              class="ace_scrollbar ace_scrollbar-v"
+              style="display: none; width: 20px;"
+            >
+              <div
+                class="ace_scrollbar-inner"
+                style="width: 20px;"
+              />
+            </div>
+            <div
+              class="ace_scrollbar ace_scrollbar-h"
+              style="display: none; height: 20px;"
+            >
+              <div
+                class="ace_scrollbar-inner"
+                style="height: 20px;"
+              />
+            </div>
+            <div
+              style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
+            >
+              <div
+                style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+              />
+              <div
+                style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+              >
+                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+              </div>
+            </div>
           </div>
         </div>
-        <div
-          class="euiSpacer euiSpacer--m"
-        />
-        <div
-          class="euiText euiText--extraSmall"
-        >
-          <dt>
-            Target index
-          </dt>
-          <dd />
-        </div>
+      </div>
+      <div
+        class="euiSpacer euiSpacer--m"
+      />
+      <div
+        class="euiText euiText--small"
+      >
+        <h3>
+          Target index
+        </h3>
+        <p />
       </div>
     </div>
   </div>
@@ -333,238 +303,230 @@ exports[`<EditTransform /> spec renders the component 1`] = `
   />
   <div
     class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-    style="padding-left: 0px; padding-right: 0px;"
   >
     <div
-      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
-      style="padding: 0px 10px;"
+      class="euiText euiText--small"
     >
-      <div
-        class="euiFlexItem"
-      >
-        <div
-          class="euiText euiText--small"
-        >
-          <h1>
-            Schedule
-            <span
-              class="panel-header-count"
-            >
-               
-               
-            </span>
-          </h1>
-        </div>
-      </div>
+       
+      <h2>
+        Schedule
+      </h2>
+       
     </div>
     <hr
       class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
     />
-    <div
-      style="padding: initial;"
-    >
+    <div>
       <div
-        style="padding-left: 10px;"
+        class="euiCheckbox euiCheckbox--compressed"
       >
+        <input
+          checked=""
+          class="euiCheckbox__input"
+          data-test-subj="jobEnabled"
+          id="jobEnabled"
+          type="checkbox"
+        />
         <div
-          class="euiCheckbox euiCheckbox--compressed"
+          class="euiCheckbox__square"
+        />
+        <label
+          class="euiCheckbox__label"
+          for="jobEnabled"
         >
-          <input
-            checked=""
-            class="euiCheckbox__input"
-            data-test-subj="jobEnabled"
-            id="jobEnabled"
-            type="checkbox"
-          />
           <div
-            class="euiCheckbox__square"
-          />
-          <label
-            class="euiCheckbox__label"
-            for="jobEnabled"
+            class="euiText euiText--small"
           >
-            Job enabled by default
-          </label>
-        </div>
-        <div
-          class="euiSpacer euiSpacer--m"
-        />
+            <p>
+              Job enabled by default
+            </p>
+          </div>
+        </label>
+      </div>
+      <div
+        class="euiSpacer euiSpacer--m"
+      />
+      <div
+        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+        style="max-width: 400px;"
+      >
         <div
-          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-          style="max-width: 400px;"
+          class="euiFlexItem euiFlexItem--flexGrowZero"
+          style="width: 200px;"
         >
           <div
-            class="euiFlexItem euiFlexItem--flexGrowZero"
-            style="width: 200px;"
+            class="euiFormRow euiFormRow--compressed"
+            id="some_html_id-row"
           >
             <div
-              class="euiFormRow euiFormRow--compressed"
-              id="some_html_id-row"
+              class="euiFormRow__labelWrapper"
             >
-              <div
-                class="euiFormRow__labelWrapper"
+              <label
+                aria-invalid="false"
+                class="euiFormLabel euiFormRow__label"
+                for="some_html_id"
               >
-                <label
-                  aria-invalid="false"
-                  class="euiFormLabel euiFormRow__label"
-                  for="some_html_id"
-                >
-                  Transform execution interval
-                </label>
-              </div>
+                Transform execution interval
+              </label>
+            </div>
+            <div
+              class="euiFormRow__fieldWrapper"
+            >
               <div
-                class="euiFormRow__fieldWrapper"
+                class="euiFormControlLayout euiFormControlLayout--compressed"
               >
                 <div
-                  class="euiFormControlLayout euiFormControlLayout--compressed"
+                  class="euiFormControlLayout__childrenWrapper"
                 >
-                  <div
-                    class="euiFormControlLayout__childrenWrapper"
-                  >
-                    <input
-                      class="euiFieldNumber euiFieldNumber--compressed"
-                      id="some_html_id"
-                      type="number"
-                      value="2"
-                    />
-                  </div>
+                  <input
+                    class="euiFieldNumber euiFieldNumber--compressed"
+                    id="some_html_id"
+                    type="number"
+                    value="2"
+                  />
                 </div>
               </div>
             </div>
           </div>
+        </div>
+        <div
+          class="euiFlexItem"
+        >
           <div
-            class="euiFlexItem"
+            class="euiFormRow euiFormRow--hasEmptyLabelSpace euiFormRow--compressed"
+            id="some_html_id-row"
           >
             <div
-              class="euiFormRow euiFormRow--hasEmptyLabelSpace euiFormRow--compressed"
-              id="some_html_id-row"
+              class="euiFormRow__fieldWrapper"
             >
               <div
-                class="euiFormRow__fieldWrapper"
+                class="euiFormControlLayout euiFormControlLayout--compressed"
               >
                 <div
-                  class="euiFormControlLayout euiFormControlLayout--compressed"
+                  class="euiFormControlLayout__childrenWrapper"
                 >
-                  <div
-                    class="euiFormControlLayout__childrenWrapper"
+                  <select
+                    class="euiSelect euiSelect--compressed"
+                    id="some_html_id"
                   >
-                    <select
-                      class="euiSelect euiSelect--compressed"
-                      id="some_html_id"
+                    <option
+                      value="Minutes"
                     >
-                      <option
-                        value="Minutes"
-                      >
-                        Minute(s)
-                      </option>
-                      <option
-                        value="Hours"
-                      >
-                        Hour(s)
-                      </option>
-                      <option
-                        value="Days"
-                      >
-                        Day(s)
-                      </option>
-                    </select>
-                    <div
-                      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                      Minute(s)
+                    </option>
+                    <option
+                      value="Hours"
                     >
-                      <span
-                        class="euiFormControlLayoutCustomIcon"
-                      >
-                        EuiIconMock
-                      </span>
-                    </div>
+                      Hour(s)
+                    </option>
+                    <option
+                      value="Days"
+                    >
+                      Day(s)
+                    </option>
+                  </select>
+                  <div
+                    class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                  >
+                    <span
+                      class="euiFormControlLayoutCustomIcon"
+                    >
+                      EuiIconMock
+                    </span>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
+      </div>
+      <div
+        class="euiSpacer euiSpacer--m"
+      />
+      <div
+        class="euiAccordion"
+      >
         <div
-          class="euiSpacer euiSpacer--m"
-        />
-        <div
-          class="euiAccordion"
+          class="euiAccordion__triggerWrapper"
         >
-          <div
-            class="euiAccordion__triggerWrapper"
+          <button
+            aria-controls="some_html_id"
+            aria-expanded="false"
+            class="euiAccordion__button"
+            id="some_html_id"
+            type="button"
           >
-            <button
-              aria-controls="some_html_id"
-              aria-expanded="false"
-              class="euiAccordion__button"
-              id="some_html_id"
-              type="button"
+            <span
+              class="euiAccordion__iconWrapper"
             >
-              <span
-                class="euiAccordion__iconWrapper"
-              >
-                EuiIconMock
-              </span>
-              <span
-                class="euiIEFlexWrapFix"
+              EuiIconMock
+            </span>
+            <span
+              class="euiIEFlexWrapFix"
+            >
+              <div
+                class="euiText euiText--small"
               >
-                Advanced
-              </span>
-            </button>
-          </div>
-          <div
-            aria-labelledby="some_html_id"
-            class="euiAccordion__childWrapper"
-            id="some_html_id"
-            role="region"
-            tabindex="-1"
-          >
-            <div>
+                <h3>
+                  Advanced
+                </h3>
+              </div>
+            </span>
+          </button>
+        </div>
+        <div
+          aria-labelledby="some_html_id"
+          class="euiAccordion__childWrapper"
+          id="some_html_id"
+          role="region"
+          tabindex="-1"
+        >
+          <div>
+            <div
+              class=""
+            >
               <div
-                class=""
+                class="euiSpacer euiSpacer--m"
+              />
+              <div
+                class="euiFormRow euiFormRow--compressed"
+                id="some_html_id-row"
               >
                 <div
-                  class="euiSpacer euiSpacer--m"
-                />
+                  class="euiFormRow__labelWrapper"
+                >
+                  <label
+                    class="euiFormLabel euiFormRow__label"
+                    for="some_html_id"
+                  >
+                    Pages per execution
+                  </label>
+                </div>
                 <div
-                  class="euiFormRow euiFormRow--compressed"
-                  id="some_html_id-row"
+                  class="euiFormRow__fieldWrapper"
                 >
                   <div
-                    class="euiFormRow__labelWrapper"
+                    class="euiFormControlLayout euiFormControlLayout--compressed"
                   >
-                    <label
-                      class="euiFormLabel euiFormRow__label"
-                      for="some_html_id"
+                    <div
+                      class="euiFormControlLayout__childrenWrapper"
                     >
-                      Pages per execution
-                    </label>
+                      <input
+                        aria-describedby="some_html_id-help-0"
+                        class="euiFieldNumber euiFieldNumber--compressed"
+                        id="some_html_id"
+                        min="1"
+                        placeholder="1000"
+                        type="number"
+                        value="1000"
+                      />
+                    </div>
                   </div>
                   <div
-                    class="euiFormRow__fieldWrapper"
+                    class="euiFormHelpText euiFormRow__text"
+                    id="some_html_id-help-0"
                   >
-                    <div
-                      class="euiFormControlLayout euiFormControlLayout--compressed"
-                    >
-                      <div
-                        class="euiFormControlLayout__childrenWrapper"
-                      >
-                        <input
-                          aria-describedby="some_html_id-help-0"
-                          class="euiFieldNumber euiFieldNumber--compressed"
-                          id="some_html_id"
-                          min="1"
-                          placeholder="1000"
-                          type="number"
-                          value="1000"
-                        />
-                      </div>
-                    </div>
-                    <div
-                      class="euiFormHelpText euiFormRow__text"
-                      id="some_html_id-help-0"
-                    >
-                      Determines the number of transformed buckets that are computed and indexed at a time. A larger number means faster execution, but costs more memory. An exception occurs when memory limits are exceeded. We recommend you to start with default value and adjust based on your use case.
-                    </div>
+                    Determines the number of transformed buckets that are computed and indexed at a time. A larger number means faster execution, but costs more memory. An exception occurs when memory limits are exceeded. We recommend you to start with default value and adjust based on your use case.
                   </div>
                 </div>
               </div>
diff --git a/public/pages/Transforms/containers/Transforms/__snapshots__/Transforms.test.tsx.snap b/public/pages/Transforms/containers/Transforms/__snapshots__/Transforms.test.tsx.snap
index c33fb832c..acf2ead0e 100644
--- a/public/pages/Transforms/containers/Transforms/__snapshots__/Transforms.test.tsx.snap
+++ b/public/pages/Transforms/containers/Transforms/__snapshots__/Transforms.test.tsx.snap
@@ -129,6 +129,7 @@ exports[`<Transforms /> spec renders the component 1`] = `
               <span
                 class="euiButtonContent euiButton__content"
               >
+                EuiIconMock
                 <span
                   class="euiButton__text"
                 >
@@ -140,6 +141,9 @@ exports[`<Transforms /> spec renders the component 1`] = `
         </div>
       </div>
     </div>
+    <hr
+      class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
+    />
     <div
       style="padding: initial;"
     >
@@ -474,7 +478,7 @@ exports[`<Transforms /> spec renders the component 1`] = `
                             class="euiText euiText--medium"
                           >
                             <div
-                              class="euiText euiText--medium"
+                              class="euiText euiText--small"
                             >
                               <p>
                                 Loading transform jobs...