diff --git a/public/pages/Aliases/components/IndexControls/IndexControls.tsx b/public/pages/Aliases/components/IndexControls/IndexControls.tsx
index a4fdf908a..47b0f0d1f 100644
--- a/public/pages/Aliases/components/IndexControls/IndexControls.tsx
+++ b/public/pages/Aliases/components/IndexControls/IndexControls.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { useEffect, useState } from "react";
-import { EuiCompressedComboBox, EuiCompressedFieldSearch, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
+import { EuiCompressedComboBox, EuiCompressedFieldSearch, EuiFlexGroup, EuiFlexItem, EuiSpacer } from "@elastic/eui";
 import { ALIAS_STATUS_OPTIONS, IndicesUpdateMode } from "../../../../utils/constants";
 import { getUISettings } from "../../../../services/Services";
 import AliasesActions from "../../containers/AliasActions";
@@ -42,35 +42,38 @@ export default function SearchControls(props: SearchControlsProps) {
   const useUpdatedUX = uiSettings.get("home:useNewHomePage");
 
   return useUpdatedUX ? (
-    <EuiFlexGroup style={{ padding: "0px 5px" }} alignItems="center">
-      <EuiFlexItem>
-        <EuiCompressedFieldSearch
-          fullWidth
-          placeholder="Search"
-          value={state.search}
-          onChange={(e) => onChange("search", e.target.value)}
-        />
-      </EuiFlexItem>
-      <EuiFlexItem style={{ flexBasis: "100px" }} grow={false}>
-        <FilterGroup
-          filterButtonProps={{
-            children: "Status",
-          }}
-          onChange={(val) => onChange("status", (val || []).map((item) => item).join(","))}
-          value={state.status ? state.status.split(",").map((label) => label) : []}
-          options={ALIAS_STATUS_OPTIONS}
-          useNewUX={useUpdatedUX}
-        />
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <AliasesActions
-          onUpdateAlias={props.onUpdateAlias}
-          selectedItems={props.value.selectedItems}
-          onDelete={props.onDelete}
-          history={props.history}
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
+    <>
+      <EuiFlexGroup alignItems="center" gutterSize="s">
+        <EuiFlexItem>
+          <EuiCompressedFieldSearch
+            fullWidth
+            placeholder="Search"
+            value={state.search}
+            onChange={(e) => onChange("search", e.target.value)}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem style={{ flexBasis: "100px" }} grow={false}>
+          <FilterGroup
+            filterButtonProps={{
+              children: "Status",
+            }}
+            onChange={(val) => onChange("status", (val || []).map((item) => item).join(","))}
+            value={state.status ? state.status.split(",").map((label) => label) : []}
+            options={ALIAS_STATUS_OPTIONS}
+            useNewUX={useUpdatedUX}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <AliasesActions
+            onUpdateAlias={props.onUpdateAlias}
+            selectedItems={props.value.selectedItems}
+            onDelete={props.onDelete}
+            history={props.history}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer size="m" />
+    </>
   ) : (
     <EuiFlexGroup style={{ padding: "0px 5px" }} alignItems="center">
       <EuiFlexItem>
diff --git a/public/pages/ChangePolicy/components/ChangeManagedIndices/ChangeManagedIndices.tsx b/public/pages/ChangePolicy/components/ChangeManagedIndices/ChangeManagedIndices.tsx
index 738c761d4..412691818 100644
--- a/public/pages/ChangePolicy/components/ChangeManagedIndices/ChangeManagedIndices.tsx
+++ b/public/pages/ChangePolicy/components/ChangeManagedIndices/ChangeManagedIndices.tsx
@@ -17,7 +17,6 @@ interface ChangeManagedIndicesProps {
   onChangeManagedIndices: (selectedManagedIndices: { label: string; value?: ManagedIndexItem }[]) => void;
   onChangeStateFilters: (stateFilter: { label: string }[]) => void;
   managedIndicesError: string;
-  useUpdatedUX?: boolean;
 }
 
 interface ChangeManagedIndicesState {
@@ -72,7 +71,7 @@ export default class ChangeManagedIndices extends Component<ChangeManagedIndices
 
   render() {
     const { managedIndices, managedIndicesIsLoading, stateFilterSearchValue } = this.state;
-    const { selectedManagedIndices, selectedStateFilters, managedIndicesError, useUpdatedUX } = this.props;
+    const { selectedManagedIndices, selectedStateFilters, managedIndicesError } = this.props;
     const uniqueStates = selectedManagedIndices.reduce(
       (accu: Set<any>, selectedManagedIndex: { label: string; value?: ManagedIndexItem }) => {
         if (!selectedManagedIndex.value) return accu;
@@ -109,7 +108,6 @@ export default class ChangeManagedIndices extends Component<ChangeManagedIndices
               // @ts-ignore
               onChange={this.props.onChangeManagedIndices}
               onSearchChange={this.onManagedIndexSearchChange}
-              compressed={useUpdatedUX ? true : false}
             />
           </EuiCompressedFormRow>
 
@@ -122,7 +120,6 @@ export default class ChangeManagedIndices extends Component<ChangeManagedIndices
               // @ts-ignore
               onChange={this.props.onChangeStateFilters}
               onSearchChange={this.onStateFilterSearchChange}
-              compressed={useUpdatedUX ? true : false}
             />
           </EuiCompressedFormRow>
         </div>
diff --git a/public/pages/ChangePolicy/components/ChangeManagedIndices/__snapshots__/ChangeManagedIndices.test.tsx.snap b/public/pages/ChangePolicy/components/ChangeManagedIndices/__snapshots__/ChangeManagedIndices.test.tsx.snap
index d14c359ac..306682fb1 100644
--- a/public/pages/ChangePolicy/components/ChangeManagedIndices/__snapshots__/ChangeManagedIndices.test.tsx.snap
+++ b/public/pages/ChangePolicy/components/ChangeManagedIndices/__snapshots__/ChangeManagedIndices.test.tsx.snap
@@ -59,17 +59,17 @@ exports[`<ChangeManagedIndices /> spec renders the component 1`] = `
             aria-describedby="some_html_id-help-0"
             aria-expanded="false"
             aria-haspopup="listbox"
-            class="euiComboBox"
+            class="euiComboBox euiComboBox--compressed"
             role="combobox"
           >
             <div
-              class="euiFormControlLayout"
+              class="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <div
-                  class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
+                  class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap-isClearable"
                   data-test-subj="comboBoxInput"
                   tabindex="-1"
                 >
@@ -134,17 +134,17 @@ exports[`<ChangeManagedIndices /> spec renders the component 1`] = `
             aria-describedby="some_html_id-help-0"
             aria-expanded="false"
             aria-haspopup="listbox"
-            class="euiComboBox euiComboBox-isDisabled"
+            class="euiComboBox euiComboBox--compressed euiComboBox-isDisabled"
             role="combobox"
           >
             <div
-              class="euiFormControlLayout"
+              class="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <div
-                  class="euiComboBox__inputWrap"
+                  class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed"
                   data-test-subj="comboBoxInput"
                   tabindex="-1"
                 >
diff --git a/public/pages/ChangePolicy/components/NewPolicy/NewPolicy.tsx b/public/pages/ChangePolicy/components/NewPolicy/NewPolicy.tsx
index 74153cf35..14a1c883d 100644
--- a/public/pages/ChangePolicy/components/NewPolicy/NewPolicy.tsx
+++ b/public/pages/ChangePolicy/components/NewPolicy/NewPolicy.tsx
@@ -33,7 +33,6 @@ interface NewPolicyProps {
   onChangePolicy: (selectedPolicies: PolicyOption[]) => void;
   onChangeStateRadio: (optionId: string) => void;
   onStateSelectChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
-  useUpdatedUX?: boolean;
 }
 
 interface NewPolicyState {
@@ -123,7 +122,6 @@ export default class NewPolicy extends React.Component<NewPolicyProps, NewPolicy
               // @ts-ignore
               onChange={this.props.onChangePolicy}
               onSearchChange={this.onPolicySearchChange}
-              compressed={useUpdatedUX ? true : false}
             />
           </EuiCompressedFormRow>
 
@@ -140,7 +138,6 @@ export default class NewPolicy extends React.Component<NewPolicyProps, NewPolicy
               value={stateSelected}
               onChange={this.props.onStateSelectChange}
               aria-label="Start state for new policy"
-              compressed={useUpdatedUX ? true : false}
             />
           </EuiCompressedFormRow>
         </div>
diff --git a/public/pages/ChangePolicy/components/NewPolicy/__snapshots__/NewPolicy.test.tsx.snap b/public/pages/ChangePolicy/components/NewPolicy/__snapshots__/NewPolicy.test.tsx.snap
index 4c6f47674..e1b2edcbc 100644
--- a/public/pages/ChangePolicy/components/NewPolicy/__snapshots__/NewPolicy.test.tsx.snap
+++ b/public/pages/ChangePolicy/components/NewPolicy/__snapshots__/NewPolicy.test.tsx.snap
@@ -80,17 +80,17 @@ exports[`<NewPolicy /> spec renders the component 1`] = `
           <div
             aria-expanded="false"
             aria-haspopup="listbox"
-            class="euiComboBox"
+            class="euiComboBox euiComboBox--compressed"
             role="combobox"
           >
             <div
-              class="euiFormControlLayout"
+              class="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <div
-                  class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+                  class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
                   data-test-subj="comboBoxInput"
                   tabindex="-1"
                 >
diff --git a/public/pages/ChangePolicy/containers/ChangePolicy/ChangePolicy.tsx b/public/pages/ChangePolicy/containers/ChangePolicy/ChangePolicy.tsx
index 277ef1d0d..c8dc77427 100644
--- a/public/pages/ChangePolicy/containers/ChangePolicy/ChangePolicy.tsx
+++ b/public/pages/ChangePolicy/containers/ChangePolicy/ChangePolicy.tsx
@@ -171,7 +171,6 @@ export class ChangePolicy extends Component<ChangePolicyProps, ChangePolicyState
             onChangeManagedIndices={this.onChangeManagedIndices}
             onChangeStateFilters={this.onChangeStateFilters}
             managedIndicesError={hasSubmitted ? managedIndicesError : ""}
-            useUpdatedUX={useUpdatedUX}
           />
 
           <EuiSpacer />
@@ -187,7 +186,6 @@ export class ChangePolicy extends Component<ChangePolicyProps, ChangePolicyState
             onChangeStateRadio={this.onChangeStateRadio}
             onStateSelectChange={this.onStateSelectChange}
             selectedPoliciesError={hasSubmitted ? selectedPoliciesError : ""}
-            useUpdatedUX={useUpdatedUX}
           />
 
           <EuiSpacer />
diff --git a/public/pages/ChangePolicy/containers/ChangePolicy/__snapshots__/ChangePolicy.test.tsx.snap b/public/pages/ChangePolicy/containers/ChangePolicy/__snapshots__/ChangePolicy.test.tsx.snap
index 2c6445bf8..6a14d3469 100644
--- a/public/pages/ChangePolicy/containers/ChangePolicy/__snapshots__/ChangePolicy.test.tsx.snap
+++ b/public/pages/ChangePolicy/containers/ChangePolicy/__snapshots__/ChangePolicy.test.tsx.snap
@@ -70,17 +70,17 @@ exports[`<ChangePolicy /> spec renders the component 1`] = `
               aria-describedby="some_html_id-help-0"
               aria-expanded="false"
               aria-haspopup="listbox"
-              class="euiComboBox"
+              class="euiComboBox euiComboBox--compressed"
               role="combobox"
             >
               <div
-                class="euiFormControlLayout"
+                class="euiFormControlLayout euiFormControlLayout--compressed"
               >
                 <div
                   class="euiFormControlLayout__childrenWrapper"
                 >
                   <div
-                    class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
+                    class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap-isClearable"
                     data-test-subj="comboBoxInput"
                     tabindex="-1"
                   >
@@ -145,17 +145,17 @@ exports[`<ChangePolicy /> spec renders the component 1`] = `
               aria-describedby="some_html_id-help-0"
               aria-expanded="false"
               aria-haspopup="listbox"
-              class="euiComboBox euiComboBox-isDisabled"
+              class="euiComboBox euiComboBox--compressed euiComboBox-isDisabled"
               role="combobox"
             >
               <div
-                class="euiFormControlLayout"
+                class="euiFormControlLayout euiFormControlLayout--compressed"
               >
                 <div
                   class="euiFormControlLayout__childrenWrapper"
                 >
                   <div
-                    class="euiComboBox__inputWrap"
+                    class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed"
                     data-test-subj="comboBoxInput"
                     tabindex="-1"
                   >
@@ -291,17 +291,17 @@ exports[`<ChangePolicy /> spec renders the component 1`] = `
             <div
               aria-expanded="false"
               aria-haspopup="listbox"
-              class="euiComboBox"
+              class="euiComboBox euiComboBox--compressed"
               role="combobox"
             >
               <div
-                class="euiFormControlLayout"
+                class="euiFormControlLayout euiFormControlLayout--compressed"
               >
                 <div
                   class="euiFormControlLayout__childrenWrapper"
                 >
                   <div
-                    class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+                    class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
                     data-test-subj="comboBoxInput"
                     tabindex="-1"
                   >
diff --git a/public/pages/ComposableTemplates/components/IndexControls/IndexControls.tsx b/public/pages/ComposableTemplates/components/IndexControls/IndexControls.tsx
index 96d0cbb42..1aee780c6 100644
--- a/public/pages/ComposableTemplates/components/IndexControls/IndexControls.tsx
+++ b/public/pages/ComposableTemplates/components/IndexControls/IndexControls.tsx
@@ -13,7 +13,6 @@ export interface SearchControlsProps {
     search: string;
     selectedTypes: string[];
   };
-  useNewUX?: boolean;
   onSearchChange: (args: SearchControlsProps["value"]) => void;
 }
 
@@ -47,7 +46,6 @@ export default function SearchControls(props: SearchControlsProps) {
           }}
           onChange={(val) => onChange("selectedTypes", val || [])}
           value={state.selectedTypes}
-          useNewUx={props.useNewUX}
           options={[
             {
               label: IndicesUpdateMode.alias,
diff --git a/public/pages/ComposableTemplates/containers/ComposableTemplates/ComposableTemplates.tsx b/public/pages/ComposableTemplates/containers/ComposableTemplates/ComposableTemplates.tsx
index bca1f7be6..3a935e0a7 100644
--- a/public/pages/ComposableTemplates/containers/ComposableTemplates/ComposableTemplates.tsx
+++ b/public/pages/ComposableTemplates/containers/ComposableTemplates/ComposableTemplates.tsx
@@ -436,7 +436,6 @@ class ComposableTemplates extends MDSEnabledComponent<ComposableTemplatesProps,
               search: this.state.search,
               selectedTypes: this.state.selectedTypes,
             }}
-            useNewUX={useNewUX}
             onSearchChange={this.onSearchChange}
           />
           <EuiHorizontalRule margin="xs" />
@@ -515,7 +514,6 @@ class ComposableTemplates extends MDSEnabledComponent<ComposableTemplatesProps,
               search: this.state.search,
               selectedTypes: this.state.selectedTypes,
             }}
-            useNewUX={useNewUX}
             onSearchChange={this.onSearchChange}
           />
           <EuiHorizontalRule margin="xs" />
diff --git a/public/pages/CreateTransform/containers/ReviewAndCreateStep/ReviewAndCreateStep.tsx b/public/pages/CreateTransform/containers/ReviewAndCreateStep/ReviewAndCreateStep.tsx
index e75ea6efe..8f4d603a4 100644
--- a/public/pages/CreateTransform/containers/ReviewAndCreateStep/ReviewAndCreateStep.tsx
+++ b/public/pages/CreateTransform/containers/ReviewAndCreateStep/ReviewAndCreateStep.tsx
@@ -14,7 +14,6 @@ import JobNameAndIndices from "../../components/JobNameAndIndices";
 import ReviewDefinition from "../../components/ReviewDefinition";
 import ReviewSchedule from "../../components/ReviewSchedule";
 import { CoreServicesContext } from "../../../../components/core_services";
-import { getUISettings } from "../../../../services/Services";
 
 interface ReviewAndCreateStepProps extends RouteComponentProps {
   transformService: TransformService;
diff --git a/public/pages/Indices/components/IndexControls/IndexControls.tsx b/public/pages/Indices/components/IndexControls/IndexControls.tsx
index ca812d9e6..97e4a904a 100644
--- a/public/pages/Indices/components/IndexControls/IndexControls.tsx
+++ b/public/pages/Indices/components/IndexControls/IndexControls.tsx
@@ -19,6 +19,7 @@ import {
 import { DataStream, ManagedCatIndex } from "../../../../../server/models/interfaces";
 import IndicesActions from "../../containers/IndicesActions";
 import { getUISettings } from "../../../../services/Services";
+import { RouteComponentProps } from "react-router-dom";
 
 interface IndexControlsProps {
   search: string;
@@ -28,6 +29,7 @@ interface IndexControlsProps {
   getDataStreams: () => Promise<DataStream[]>;
   toggleShowDataStreams: () => void;
   selectedItems: ManagedCatIndex[];
+  history?: RouteComponentProps["history"];
 }
 
 interface IndexControlsState {
@@ -50,7 +52,7 @@ export default class IndexControls extends Component<IndexControlsProps, IndexCo
   };
 
   render() {
-    const { search, onSearchChange, showDataStreams, toggleShowDataStreams, onRefresh, selectedItems } = this.props;
+    const { search, onSearchChange, showDataStreams, toggleShowDataStreams, onRefresh, selectedItems, history } = this.props;
 
     const schema = {
       strict: true,
@@ -82,38 +84,41 @@ export default class IndexControls extends Component<IndexControlsProps, IndexCo
     const useUpdatedUX = uiSettings.get("home:useNewHomePage");
 
     return useUpdatedUX ? (
-      <EuiFlexGroup style={{ padding: "0px 5px 16px 5px" }} alignItems="center">
-        <EuiFlexItem>
-          <EuiSearchBar
-            compressed
-            query={search}
-            box={{ placeholder: "Search", schema, incremental: true, compressed: true }}
-            onChange={onSearchChange}
-            filters={filters}
-          />
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiButtonIcon iconType="refresh" data-test-subj="refreshButton" display="base" size="s" />
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <IndicesActions
-            {...this.props}
-            onDelete={onRefresh}
-            onClose={onRefresh}
-            onShrink={onRefresh}
-            selectedItems={selectedItems}
-            getIndices={onRefresh}
-          />
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiCompressedSwitch
-            label="Show data stream indexes"
-            checked={showDataStreams}
-            onChange={toggleShowDataStreams}
-            data-test-subj="toggleShowDataStreams"
-          />
-        </EuiFlexItem>
-      </EuiFlexGroup>
+      <>
+        <EuiFlexGroup alignItems="center" gutterSize="s">
+          <EuiFlexItem>
+            <EuiSearchBar
+              compressed
+              query={search}
+              box={{ placeholder: "Search", schema, incremental: true, compressed: true }}
+              onChange={onSearchChange}
+              filters={filters}
+            />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButtonIcon iconType="refresh" data-test-subj="refreshButton" display="base" size="s" />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <IndicesActions
+              history={this.props.history}
+              onDelete={onRefresh}
+              onClose={onRefresh}
+              onShrink={onRefresh}
+              selectedItems={selectedItems}
+              getIndices={onRefresh}
+            />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiCompressedSwitch
+              label="Show data stream indexes"
+              checked={showDataStreams}
+              onChange={toggleShowDataStreams}
+              data-test-subj="toggleShowDataStreams"
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiSpacer size="m" />
+      </>
     ) : (
       <EuiFlexGroup style={{ padding: "0px 5px" }} alignItems="center">
         <EuiFlexItem>
diff --git a/public/pages/Indices/containers/Indices/Indices.tsx b/public/pages/Indices/containers/Indices/Indices.tsx
index 7978958ca..6397a2a73 100644
--- a/public/pages/Indices/containers/Indices/Indices.tsx
+++ b/public/pages/Indices/containers/Indices/Indices.tsx
@@ -272,6 +272,10 @@ export class Indices extends MDSEnabledComponent<IndicesProps, IndicesState> {
 
     const { history } = this.props;
 
+    const onClickCreate = () => {
+      this.props.history.push(ROUTES.CREATE_INDEX);
+    };
+
     return this.state.useUpdatedUX ? (
       <>
         <HeaderControl
@@ -291,7 +295,7 @@ export class Indices extends MDSEnabledComponent<IndicesProps, IndicesState> {
               label: "Create Index",
               fill: true,
               iconType: "plus",
-              href: `${PLUGIN_NAME}#/create-index`,
+              run: onClickCreate,
               testId: "createIndexButton",
               controlType: "button",
               color: "primary",
@@ -308,6 +312,7 @@ export class Indices extends MDSEnabledComponent<IndicesProps, IndicesState> {
               getDataStreams={this.getDataStreams}
               toggleShowDataStreams={this.toggleShowDataStreams}
               selectedItems={this.state.selectedItems}
+              history={this.props.history}
             />
 
             <EuiBasicTable
@@ -358,9 +363,7 @@ export class Indices extends MDSEnabledComponent<IndicesProps, IndicesState> {
                 text: "Create Index",
                 buttonProps: {
                   fill: true,
-                  onClick: () => {
-                    this.props.history.push(ROUTES.CREATE_INDEX);
-                  },
+                  onClick: onClickCreate,
                 },
               },
             ]}
diff --git a/public/pages/Main/Main.tsx b/public/pages/Main/Main.tsx
index d12ae1bbf..5fa273475 100644
--- a/public/pages/Main/Main.tsx
+++ b/public/pages/Main/Main.tsx
@@ -191,6 +191,7 @@ const dataSourceEnabledPaths: string[] = [
   ROUTES.CREATE_REPOSITORY,
   ROUTES.EDIT_REPOSITORY,
   ROUTES.NOTIFICATIONS,
+  ROUTES.SHRINK_INDEX,
 ];
 
 const LocalCluster: DataSourceOption = {
@@ -526,6 +527,7 @@ export default class Main extends Component<MainProps, MainState> {
                                 ROUTES.CREATE_REPOSITORY,
                                 ROUTES.EDIT_REPOSITORY,
                                 ROUTES.NOTIFICATIONS,
+                                ROUTES.SHRINK_INDEX,
                               ]}
                               render={() => (
                                 <DataSourceMenu
diff --git a/public/pages/ManagedIndices/components/ManagedIndexControls/ManagedIndexControls.tsx b/public/pages/ManagedIndices/components/ManagedIndexControls/ManagedIndexControls.tsx
index fdea115a0..17aef000f 100644
--- a/public/pages/ManagedIndices/components/ManagedIndexControls/ManagedIndexControls.tsx
+++ b/public/pages/ManagedIndices/components/ManagedIndexControls/ManagedIndexControls.tsx
@@ -17,6 +17,7 @@ import {
   EuiContextMenuPanel,
   EuiButtonIcon,
   EuiButtonEmpty,
+  EuiSpacer,
 } from "@elastic/eui";
 import { DataStream } from "../../../../../server/models/interfaces";
 import { ManagedIndices } from "../../containers/ManagedIndices/ManagedIndices";
@@ -88,28 +89,32 @@ export default class ManagedIndexControls extends Component<ManagedIndexControls
     const useUpdatedUX = uiSettings.get("home:useNewHomePage");
 
     return useUpdatedUX ? (
-      <EuiFlexGroup style={{ padding: "0px 5px" }} alignItems="center">
-        <EuiFlexItem>
-          <EuiSearchBar
-            query={search}
-            box={{ placeholder: "Search", schema, incremental: true, compressed: true }}
-            onChange={onSearchChange}
-            filters={filters}
-          />
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiButtonIcon iconType="refresh" data-test-subj="refreshButton" display="base" size="s" />
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>{Actions}</EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiCompressedSwitch
-            label="Show data stream indexes"
-            checked={showDataStreams}
-            onChange={toggleShowDataStreams}
-            data-test-subj="toggleShowDataStreams"
-          />
-        </EuiFlexItem>
-      </EuiFlexGroup>
+      <>
+        <EuiFlexGroup alignItems="center" gutterSize="s">
+          <EuiFlexItem>
+            <EuiSearchBar
+              query={search}
+              box={{ placeholder: "Search", schema, incremental: true, compressed: true }}
+              compressed
+              onChange={onSearchChange}
+              filters={filters}
+            />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButtonIcon iconType="refresh" data-test-subj="refreshButton" display="base" size="s" />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>{Actions}</EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiCompressedSwitch
+              label="Show data stream indexes"
+              checked={showDataStreams}
+              onChange={toggleShowDataStreams}
+              data-test-subj="toggleShowDataStreams"
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiSpacer size="m" />
+      </>
     ) : (
       <EuiFlexGroup style={{ padding: "0px 5px" }} alignItems="center">
         <EuiFlexItem>
diff --git a/public/pages/ManagedIndices/containers/ManagedIndices/ManagedIndices.tsx b/public/pages/ManagedIndices/containers/ManagedIndices/ManagedIndices.tsx
index bc4869762..e47937348 100644
--- a/public/pages/ManagedIndices/containers/ManagedIndices/ManagedIndices.tsx
+++ b/public/pages/ManagedIndices/containers/ManagedIndices/ManagedIndices.tsx
@@ -435,7 +435,6 @@ export class ManagedIndices extends MDSEnabledComponent<ManagedIndicesProps, Man
       showEditModal,
       isPopoverOpen,
     } = this.state;
-
     const filterIsApplied = !!search;
     const page = Math.floor(from / size);
 
@@ -509,26 +508,6 @@ export class ManagedIndices extends MDSEnabledComponent<ManagedIndicesProps, Man
       },
     ];
 
-    const RetryPolicyModal = () => {
-      return (
-        showRetryModal && (
-          <RetryModal
-            services={this.context.managedIndexService}
-            retryItems={_.cloneDeep(selectedItems)}
-            onClose={this.onCloseRetryModal}
-          />
-        )
-      );
-    };
-
-    const EditRolloverAliasModal = () => {
-      return (
-        showEditModal && (
-          <RolloverAliasModal index={selectedItems[0].index} services={this.context.managedIndexService} onClose={this.onCloseEditModal} />
-        )
-      );
-    };
-
     const RemovePolicyModal = () => {
       return (
         showRemoveModal && (
@@ -560,18 +539,24 @@ export class ManagedIndices extends MDSEnabledComponent<ManagedIndicesProps, Man
     );
 
     const popoverActionItems = [
-      <EuiContextMenuItem
-        key="Edit"
-        toolTipPosition="left"
-        disabled={selectedItems.length !== 1 || isDataStreamIndexSelected}
-        data-test-subj="editOption"
-        onClick={() => {
-          this.closePopover();
-          this.onShowEditModal();
-        }}
-      >
-        Edit rollover alias
-      </EuiContextMenuItem>,
+      <ModalConsumer>
+        {({ onShow, onClose }) => (
+          <EuiContextMenuItem
+            key="Edit"
+            toolTipPosition="left"
+            disabled={selectedItems.length !== 1 || isDataStreamIndexSelected}
+            data-test-subj="editOption"
+            onClick={() =>
+              onShow(RolloverAliasModal, {
+                index: selectedItems[0].index,
+                core: this.context,
+              })
+            }
+          >
+            Edit rollover alias
+          </EuiContextMenuItem>
+        )}
+      </ModalConsumer>,
       <EuiContextMenuItem
         key="Remove"
         toolTipPosition="left"
@@ -584,18 +569,23 @@ export class ManagedIndices extends MDSEnabledComponent<ManagedIndicesProps, Man
       >
         Remove Policy
       </EuiContextMenuItem>,
-      <EuiContextMenuItem
-        key="Retry"
-        toolTipPosition="left"
-        disabled={isRetryDisabled}
-        data-test-subj="RetryOption"
-        onClick={() => {
-          this.closePopover();
-          this.onShowRetryModal();
-        }}
-      >
-        Retry Policy
-      </EuiContextMenuItem>,
+      <ModalConsumer>
+        {({ onShow, onClose }) => (
+          <EuiContextMenuItem
+            key="Retry"
+            toolTipPosition="left"
+            disabled={isRetryDisabled}
+            data-test-subj="RetryOption"
+            onClick={() =>
+              onShow(RetryModal, {
+                retryItems: _.cloneDeep(selectedItems),
+              })
+            }
+          >
+            Retry Policy
+          </EuiContextMenuItem>
+        )}
+      </ModalConsumer>,
     ];
 
     const Action = () => {
@@ -641,6 +631,10 @@ export class ManagedIndices extends MDSEnabledComponent<ManagedIndicesProps, Man
       );
     };
 
+    const onClickChange = () => {
+      this.props.history.push(ROUTES.CHANGE_POLICY);
+    };
+
     return this.state.useUpdatedUX ? (
       <>
         <HeaderControl
@@ -650,7 +644,7 @@ export class ManagedIndices extends MDSEnabledComponent<ManagedIndicesProps, Man
               id: "Change policy",
               label: "Change Policy",
               fill: true,
-              href: `${PLUGIN_NAME}#/change-policy`,
+              run: onClickChange,
               testId: "changePolicyButton",
               controlType: "button",
               color: "primary",
@@ -671,9 +665,7 @@ export class ManagedIndices extends MDSEnabledComponent<ManagedIndicesProps, Man
             />
             {CommonTable()}
           </ContentPanel>
-          {RetryPolicyModal()}
           {RemovePolicyModal()}
-          {EditRolloverAliasModal()}
         </div>
       </>
     ) : (
diff --git a/public/pages/Reindex/container/Reindex/Reindex.test.tsx b/public/pages/Reindex/container/Reindex/Reindex.test.tsx
index 876606095..c3afc6646 100644
--- a/public/pages/Reindex/container/Reindex/Reindex.test.tsx
+++ b/public/pages/Reindex/container/Reindex/Reindex.test.tsx
@@ -17,6 +17,11 @@ import { CoreServicesConsumer, CoreServicesContext } from "../../../../component
 import Reindex from "./Reindex";
 import { ModalProvider, ModalRoot } from "../../../../components/Modal";
 import { BrowserServices } from "../../../../models/interfaces";
+import { setupCoreStart } from "../../../../../test/helper";
+
+beforeAll(() => {
+  setupCoreStart();
+});
 
 function renderWithRouter(initialEntries = [ROUTES.REINDEX] as string[]) {
   return {
diff --git a/public/pages/Reindex/container/Reindex/Reindex.tsx b/public/pages/Reindex/container/Reindex/Reindex.tsx
index 9ab096a43..1cd9ad83d 100644
--- a/public/pages/Reindex/container/Reindex/Reindex.tsx
+++ b/public/pages/Reindex/container/Reindex/Reindex.tsx
@@ -42,10 +42,13 @@ import { ListenType } from "../../../../lib/JobScheduler";
 import NotificationConfig, { NotificationConfigRef } from "../../../../containers/NotificationConfig";
 import { ActionType } from "../../../Notifications/constant";
 import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+import { TopNavControlDescriptionData, TopNavControlLinkData } from "src/plugins/navigation/public/top_nav_menu/top_nav_control_data";
 
 interface ReindexProps extends RouteComponentProps {
   commonService: CommonService;
   indexService: IndexService;
+  useUpdatedUX: boolean;
 }
 
 interface ReindexState {
@@ -92,11 +95,14 @@ class Reindex extends Component<ReindexProps, ReindexState> {
   }
 
   async componentDidMount() {
-    this.context.chrome.setBreadcrumbs([
-      BREADCRUMBS.INDEX_MANAGEMENT,
-      BREADCRUMBS.INDICES,
-      { ...BREADCRUMBS.REINDEX, href: `#${this.props.location.pathname}${this.props.location.search}` },
-    ]);
+    const breadCrumbs = this.props.useUpdatedUX
+      ? [BREADCRUMBS.INDICES, { ...BREADCRUMBS.REINDEX, href: `#${this.props.location.pathname}${this.props.location.search}` }]
+      : [
+          BREADCRUMBS.INDEX_MANAGEMENT,
+          BREADCRUMBS.INDICES,
+          { ...BREADCRUMBS.REINDEX, href: `#${this.props.location.pathname}${this.props.location.search}` },
+        ];
+    this.context.chrome.setBreadcrumbs(breadCrumbs);
 
     const { source } = queryString.parse(this.props.location.search);
 
@@ -550,163 +556,192 @@ class Reindex extends Component<ReindexProps, ReindexState> {
       </CustomFormRow>
     );
 
+    const descriptionData = [
+      {
+        description: "Shrink an existing index into a new index with fewer primary shards.",
+        links: {
+          label: "Learn more",
+          href: this.context.docLinks.links.opensearch.reindexData.base,
+          iconType: "popout",
+          iconSide: "right",
+          controlType: "link",
+        } as TopNavControlLinkData,
+      } as TopNavControlDescriptionData,
+    ];
+
     // expand data streams and aliases
     const allSelectedIndices = this.getAllSelectedIndices();
 
-    return (
-      <div style={{ padding: "0px 50px" }}>
-        <EuiTitle size="l">
-          <h1>Reindex</h1>
-        </EuiTitle>
-        {subTitleText}
-        <EuiSpacer />
-
-        <ContentPanel title="Configure source index" titleSize="s">
-          <EuiSpacer />
-          <CustomFormRow
-            label="Specify source indexes or data streams"
-            isInvalid={sourceErr.length > 0}
-            error={sourceErr}
-            fullWidth
-            helpText="Specify one or more indexes or data streams you want to reindex from."
-          >
-            <IndexSelect
-              data-test-subj="sourceSelector"
-              placeholder="Select indexes or data streams"
-              getIndexOptions={this.getIndexOptions}
-              onSelectedOptions={this.onSourceSelection}
-              singleSelect={false}
-              selectedOption={sources}
-              excludeList={destination}
-            />
-          </CustomFormRow>
-
-          <EuiSpacer />
-          <CustomFormRow>
-            <EuiCompressedRadioGroup
-              options={[
-                {
-                  id: "all",
-                  label: "Reindex all documents",
-                },
-                {
-                  id: "subset",
-                  label: "Reindex a subset of documents (Advanced)",
-                },
-              ]}
-              idSelected={subset ? "subset" : "all"}
-              onChange={(id) => {
-                this.setState({ subset: id === "subset" });
-              }}
-              name="subsetOption"
-              data-test-subj="subsetOption"
-              legend={{
-                children: <span>Specify a reindex option</span>,
-              }}
-            />
-          </CustomFormRow>
-          <EuiSpacer />
-          {subset ? (
+    const Common = () => {
+      return (
+        <>
+          <ContentPanel title="Configure source index" titleSize="s">
+            <EuiSpacer />
             <CustomFormRow
-              fullWidth={true}
-              label="Query expression"
-              isInvalid={!!sourceQueryErr}
-              error={sourceQueryErr}
-              labelAppend={
-                <EuiText size="xs">
-                  <EuiLink href={this.context.docLinks.links.opensearch.queryDSL.base} target="_blank" rel="noopener noreferrer">
-                    Learn more about query DSL
-                  </EuiLink>
-                </EuiText>
-              }
+              label="Specify source indexes or data streams"
+              isInvalid={sourceErr.length > 0}
+              error={sourceErr}
+              fullWidth
+              helpText="Specify one or more indexes or data streams you want to reindex from."
             >
-              <JSONEditor
-                mode="json"
-                width="100%"
-                value={sourceQuery}
-                onChange={this.onSourceQueryChange}
-                aria-label="Query DSL Editor"
-                height="200px"
-                data-test-subj="queryJsonEditor"
+              <IndexSelect
+                data-test-subj="sourceSelector"
+                placeholder="Select indexes or data streams"
+                getIndexOptions={this.getIndexOptions}
+                onSelectedOptions={this.onSourceSelection}
+                singleSelect={false}
+                selectedOption={sources}
+                excludeList={destination}
               />
             </CustomFormRow>
-          ) : null}
-        </ContentPanel>
 
-        <EuiSpacer />
+            <EuiSpacer />
+            <CustomFormRow>
+              <EuiCompressedRadioGroup
+                options={[
+                  {
+                    id: "all",
+                    label: "Reindex all documents",
+                  },
+                  {
+                    id: "subset",
+                    label: "Reindex a subset of documents (Advanced)",
+                  },
+                ]}
+                idSelected={subset ? "subset" : "all"}
+                onChange={(id) => {
+                  this.setState({ subset: id === "subset" });
+                }}
+                name="subsetOption"
+                data-test-subj="subsetOption"
+                legend={{
+                  children: <span>Specify a reindex option</span>,
+                }}
+              />
+            </CustomFormRow>
+            <EuiSpacer />
+            {subset ? (
+              <CustomFormRow
+                fullWidth={true}
+                label="Query expression"
+                isInvalid={!!sourceQueryErr}
+                error={sourceQueryErr}
+                labelAppend={
+                  <EuiText size="xs">
+                    <EuiLink href={this.context.docLinks.links.opensearch.queryDSL.base} target="_blank" rel="noopener noreferrer">
+                      Learn more about query DSL
+                    </EuiLink>
+                  </EuiText>
+                }
+              >
+                <JSONEditor
+                  mode="json"
+                  width="100%"
+                  value={sourceQuery}
+                  onChange={this.onSourceQueryChange}
+                  aria-label="Query DSL Editor"
+                  height="200px"
+                  data-test-subj="queryJsonEditor"
+                />
+              </CustomFormRow>
+            ) : null}
+          </ContentPanel>
 
-        <ContentPanel title="Configure destination index" titleSize="s">
           <EuiSpacer />
-          <EuiFlexGroup alignItems="flexEnd">
-            <EuiFlexItem style={{ maxWidth: "400px" }}>
-              <CustomFormRow label="Specify a destination index or data stream" isInvalid={!!destError} error={destError}>
-                <IndexSelect
-                  data-test-subj="destinationSelector"
-                  placeholder="Select an index or data stream"
-                  getIndexOptions={this.getIndexOptions}
-                  onSelectedOptions={this.onDestinationSelection}
-                  singleSelect={true}
-                  selectedOption={destination}
-                  excludeDataStreamIndex={true}
-                  excludeList={sources}
-                  excludeSystemIndex={true}
+
+          <ContentPanel title="Configure destination index" titleSize="s">
+            <EuiSpacer />
+            <EuiFlexGroup alignItems="flexEnd">
+              <EuiFlexItem style={{ maxWidth: "400px" }}>
+                <CustomFormRow label="Specify a destination index or data stream" isInvalid={!!destError} error={destError}>
+                  <IndexSelect
+                    data-test-subj="destinationSelector"
+                    placeholder="Select an index or data stream"
+                    getIndexOptions={this.getIndexOptions}
+                    onSelectedOptions={this.onDestinationSelection}
+                    singleSelect={true}
+                    selectedOption={destination}
+                    excludeDataStreamIndex={true}
+                    excludeList={sources}
+                    excludeSystemIndex={true}
+                  />
+                </CustomFormRow>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiSmallButton data-test-subj="createIndexButton" onClick={() => this.setState({ showCreateIndexFlyout: true })}>
+                  Create index
+                </EuiSmallButton>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </ContentPanel>
+
+          <EuiSpacer />
+
+          <ContentPanel title={advanceTitle} noExtraPadding>
+            {advancedSettingsOpen && (
+              <>
+                <EuiSpacer size="s" />
+                <ReindexAdvancedOptions
+                  slices={slices}
+                  onSlicesChange={this.onSliceChange}
+                  sliceErr={this.state.sliceError}
+                  getAllPipelines={this.getAllPipelines}
+                  selectedPipelines={this.state.selectedPipelines}
+                  onSelectedPipelinesChange={this.onPipelineChange}
+                  ignoreConflicts={ignoreConflicts}
+                  onIgnoreConflictsChange={this.onIgnoreConflictsChange}
+                  reindexUniqueDocuments={reindexUniqueDocuments}
+                  onReindexUniqueDocumentsChange={this.onReindexUniqueDocuments}
                 />
-              </CustomFormRow>
+                <NotificationConfig ref={(ref) => (this.notificationRef = ref)} actionType={ActionType.REINDEX} />
+                <EuiSpacer size="s" />
+              </>
+            )}
+          </ContentPanel>
+
+          <EuiSpacer />
+
+          <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
+            <EuiFlexItem grow={false}>
+              <EuiSmallButtonEmpty onClick={this.onCancel} data-test-subj="reindexCancelButton">
+                Cancel
+              </EuiSmallButtonEmpty>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiSmallButton data-test-subj="createIndexButton" onClick={() => this.setState({ showCreateIndexFlyout: true })}>
-                Create index
+              <EuiSmallButton fill onClick={this.onClickAction} isLoading={executing} data-test-subj="reindexConfirmButton">
+                Reindex
               </EuiSmallButton>
             </EuiFlexItem>
           </EuiFlexGroup>
-        </ContentPanel>
 
-        <EuiSpacer />
+          {showCreateIndexFlyout ? (
+            <CreateIndexFlyout
+              onSubmitSuccess={this.onCreateIndexSuccess}
+              sourceIndices={allSelectedIndices}
+              onCloseFlyout={() => this.setState({ showCreateIndexFlyout: false })}
+            />
+          ) : null}
+        </>
+      );
+    };
 
-        <ContentPanel title={advanceTitle} noExtraPadding>
-          {advancedSettingsOpen && (
-            <>
-              <EuiSpacer size="s" />
-              <ReindexAdvancedOptions
-                slices={slices}
-                onSlicesChange={this.onSliceChange}
-                sliceErr={this.state.sliceError}
-                getAllPipelines={this.getAllPipelines}
-                selectedPipelines={this.state.selectedPipelines}
-                onSelectedPipelinesChange={this.onPipelineChange}
-                ignoreConflicts={ignoreConflicts}
-                onIgnoreConflictsChange={this.onIgnoreConflictsChange}
-                reindexUniqueDocuments={reindexUniqueDocuments}
-                onReindexUniqueDocumentsChange={this.onReindexUniqueDocuments}
-              />
-              <NotificationConfig ref={(ref) => (this.notificationRef = ref)} actionType={ActionType.REINDEX} />
-              <EuiSpacer size="s" />
-            </>
-          )}
-        </ContentPanel>
+    const { HeaderControl } = getNavigationUI();
+    const { setAppDescriptionControls } = getApplication();
 
+    return this.props.useUpdatedUX ? (
+      <div>
+        <HeaderControl controls={descriptionData} setMountPoint={setAppDescriptionControls} />
+        {Common()}
+      </div>
+    ) : (
+      <div style={{ padding: "0px 50px" }}>
+        <EuiTitle size="l">
+          <h1>Reindex</h1>
+        </EuiTitle>
+        {subTitleText}
         <EuiSpacer />
 
-        <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
-          <EuiFlexItem grow={false}>
-            <EuiSmallButtonEmpty onClick={this.onCancel} data-test-subj="reindexCancelButton">
-              Cancel
-            </EuiSmallButtonEmpty>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiSmallButton fill onClick={this.onClickAction} isLoading={executing} data-test-subj="reindexConfirmButton">
-              Reindex
-            </EuiSmallButton>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-
-        {showCreateIndexFlyout ? (
-          <CreateIndexFlyout
-            onSubmitSuccess={this.onCreateIndexSuccess}
-            sourceIndices={allSelectedIndices}
-            onCloseFlyout={() => this.setState({ showCreateIndexFlyout: false })}
-          />
-        ) : null}
+        {Common()}
       </div>
     );
   }
@@ -715,5 +750,7 @@ class Reindex extends Component<ReindexProps, ReindexState> {
 export default function (props: ReindexProps) {
   // in re-index page, user can't change the data source i.e., its in read-only
   useUpdateUrlWithDataSourceProperties();
-  return <Reindex {...props} />;
+  const uiSettings = getUISettings();
+  const useUpdatedUX = uiSettings.get("home:useNewHomePage");
+  return <Reindex {...props} useUpdatedUX={useUpdatedUX} />;
 }
diff --git a/public/pages/ShrinkIndex/container/ShrinkIndex/ShrinkIndex.test.tsx b/public/pages/ShrinkIndex/container/ShrinkIndex/ShrinkIndex.test.tsx
index bdf68b153..c6628209d 100644
--- a/public/pages/ShrinkIndex/container/ShrinkIndex/ShrinkIndex.test.tsx
+++ b/public/pages/ShrinkIndex/container/ShrinkIndex/ShrinkIndex.test.tsx
@@ -17,6 +17,11 @@ import { CoreServicesConsumer, CoreServicesContext } from "../../../../component
 import ShrinkIndex from "./ShrinkIndex";
 import { ModalProvider, ModalRoot } from "../../../../components/Modal";
 import { BrowserServices } from "../../../../models/interfaces";
+import { setupCoreStart } from "../../../../../test/helper";
+
+beforeAll(() => {
+  setupCoreStart();
+});
 
 function renderWithRouter(initialEntries = [ROUTES.SHRINK_INDEX] as string[]) {
   return {
diff --git a/public/pages/ShrinkIndex/container/ShrinkIndex/ShrinkIndex.tsx b/public/pages/ShrinkIndex/container/ShrinkIndex/ShrinkIndex.tsx
index 29c89ec7c..045a92dfb 100644
--- a/public/pages/ShrinkIndex/container/ShrinkIndex/ShrinkIndex.tsx
+++ b/public/pages/ShrinkIndex/container/ShrinkIndex/ShrinkIndex.tsx
@@ -50,6 +50,9 @@ import { NotificationConfigRef } from "../../../../containers/NotificationConfig
 import { ListenType } from "../../../../lib/JobScheduler";
 import { openIndices } from "../../../Indices/utils/helpers";
 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";
 
 const WrappedAliasSelect = EuiToolTipWrapper(AliasSelect as any, {
   disabledKey: "isDisabled",
@@ -57,6 +60,7 @@ const WrappedAliasSelect = EuiToolTipWrapper(AliasSelect as any, {
 
 interface ShrinkIndexProps extends RouteComponentProps {
   commonService: CommonService;
+  useUpdatedUX: boolean;
 }
 
 interface ShrinkIndexState {
@@ -66,7 +70,7 @@ interface ShrinkIndexState {
   loading: boolean;
 }
 
-export default class ShrinkIndex extends Component<ShrinkIndexProps, ShrinkIndexState> {
+class ShrinkIndex extends Component<ShrinkIndexProps, ShrinkIndexState> {
   static contextType = CoreServicesContext;
 
   destroyed: boolean = false;
@@ -83,11 +87,15 @@ export default class ShrinkIndex extends Component<ShrinkIndexProps, ShrinkIndex
   }
 
   async componentDidMount() {
-    this.context.chrome.setBreadcrumbs([
-      BREADCRUMBS.INDEX_MANAGEMENT,
-      BREADCRUMBS.INDICES,
-      { ...BREADCRUMBS.SHRINK_INDEX, href: `#${this.props.location.pathname}${this.props.location.search}` },
-    ]);
+    const breadCrumbs = this.props.useUpdatedUX
+      ? [BREADCRUMBS.INDICES, { ...BREADCRUMBS.SHRINK_INDEX, href: `#${this.props.location.pathname}${this.props.location.search}` }]
+      : [
+          BREADCRUMBS.INDEX_MANAGEMENT,
+          BREADCRUMBS.INDICES,
+          { ...BREADCRUMBS.SHRINK_INDEX, href: `#${this.props.location.pathname}${this.props.location.search}` },
+        ];
+    this.context.chrome.setBreadcrumbs(breadCrumbs);
+
     const { source } = queryString.parse(this.props.location.search);
     if (typeof source === "string" && !!source) {
       await this.getIndex(source);
@@ -641,47 +649,84 @@ export default class ShrinkIndex extends Component<ShrinkIndexProps, ShrinkIndex
       </EuiCompressedFormRow>
     );
 
-    return (
+    const descriptionData = [
+      {
+        description: "Shrink an existing index into a new index with fewer primary shards.",
+        links: {
+          label: "Learn more",
+          href: SHRINK_DOCUMENTATION_URL,
+          iconType: "popout",
+          iconSide: "right",
+          controlType: "link",
+        } as TopNavControlLinkData,
+      } as TopNavControlDescriptionData,
+    ];
+
+    const Common = () => {
+      return (
+        <>
+          <IndexDetail indices={indices} children={indexDetailChildren} />
+          {!!disableShrinkButton ? null : configurationChildren}
+          <NotificationConfig
+            withPanel
+            panelProps={{
+              title: "Advanced settings",
+              titleSize: "s",
+            }}
+            ref={(ref) => (this.notificationRef = ref)}
+            actionType={ActionType.RESIZE}
+            operationType={OperationType.SHRINK}
+          />
+          <EuiSpacer />
+          <EuiSpacer />
+          <EuiFlexGroup justifyContent="flexEnd">
+            <EuiFlexItem grow={false}>
+              <EuiSmallButtonEmpty onClick={this.onCancel} flush="left" data-test-subj="shrinkIndexCancelButton">
+                Cancel
+              </EuiSmallButtonEmpty>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiSmallButton
+                isLoading={this.state.loading}
+                isDisabled={this.state.loading}
+                onClick={this.onClickAction}
+                fill
+                data-test-subj="shrinkIndexConfirmButton"
+                disabled={disableShrinkButton}
+              >
+                Shrink
+              </EuiSmallButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </>
+      );
+    };
+
+    const { HeaderControl } = getNavigationUI();
+    const { setAppDescriptionControls } = getApplication();
+
+    return this.props.useUpdatedUX ? (
+      <div style={{ padding: "0px 0px" }}>
+        <HeaderControl controls={descriptionData} setMountPoint={setAppDescriptionControls} />
+
+        {Common()}
+      </div>
+    ) : (
       <div style={{ padding: "0px 50px" }}>
         <EuiTitle size="l">
           <h1>Shrink index</h1>
         </EuiTitle>
         {subTitleText}
         <EuiSpacer />
-        <IndexDetail indices={indices} children={indexDetailChildren} />
-        {!!disableShrinkButton ? null : configurationChildren}
-        <NotificationConfig
-          withPanel
-          panelProps={{
-            title: "Advanced settings",
-            titleSize: "s",
-          }}
-          ref={(ref) => (this.notificationRef = ref)}
-          actionType={ActionType.RESIZE}
-          operationType={OperationType.SHRINK}
-        />
-        <EuiSpacer />
-        <EuiSpacer />
-        <EuiFlexGroup justifyContent="flexEnd">
-          <EuiFlexItem grow={false}>
-            <EuiSmallButtonEmpty onClick={this.onCancel} flush="left" data-test-subj="shrinkIndexCancelButton">
-              Cancel
-            </EuiSmallButtonEmpty>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiSmallButton
-              isLoading={this.state.loading}
-              isDisabled={this.state.loading}
-              onClick={this.onClickAction}
-              fill
-              data-test-subj="shrinkIndexConfirmButton"
-              disabled={disableShrinkButton}
-            >
-              Shrink
-            </EuiSmallButton>
-          </EuiFlexItem>
-        </EuiFlexGroup>
+        {Common()}
       </div>
     );
   }
 }
+
+export default function (props: ShrinkIndexProps) {
+  useUpdateUrlWithDataSourceProperties();
+  const uiSettings = getUISettings();
+  const useUpdatedUX = uiSettings.get("home:useNewHomePage");
+  return <ShrinkIndex {...props} useUpdatedUX={useUpdatedUX} />;
+}
diff --git a/public/pages/SplitIndex/container/SplitIndex/SplitIndex.test.tsx b/public/pages/SplitIndex/container/SplitIndex/SplitIndex.test.tsx
index d5061b6e3..e48e40cf7 100644
--- a/public/pages/SplitIndex/container/SplitIndex/SplitIndex.test.tsx
+++ b/public/pages/SplitIndex/container/SplitIndex/SplitIndex.test.tsx
@@ -17,6 +17,11 @@ import { IAlias } from "../../../Aliases/interface";
 import { BrowserServices } from "../../../../models/interfaces";
 import { ModalProvider, ModalRoot } from "../../../../components/Modal";
 import { CoreStart } from "opensearch-dashboards/public";
+import { setupCoreStart } from "../../../../../test/helper";
+
+beforeAll(() => {
+  setupCoreStart();
+});
 
 function renderWithRouter(initialEntries = [ROUTES.SPLIT_INDEX] as string[]) {
   return {
diff --git a/public/pages/SplitIndex/container/SplitIndex/SplitIndex.tsx b/public/pages/SplitIndex/container/SplitIndex/SplitIndex.tsx
index dade1590e..ee76c2a6f 100644
--- a/public/pages/SplitIndex/container/SplitIndex/SplitIndex.tsx
+++ b/public/pages/SplitIndex/container/SplitIndex/SplitIndex.tsx
@@ -29,10 +29,13 @@ import { BREADCRUMBS, ROUTES } from "../../../../utils/constants";
 import { EVENT_MAP, destroyListener, listenEvent } from "../../../../JobHandler";
 import { ServerResponse } from "../../../../../server/models/types";
 import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+import { TopNavControlDescriptionData, TopNavControlLinkData } from "src/plugins/navigation/public/top_nav_menu/top_nav_control_data";
 
 interface SplitIndexProps extends RouteComponentProps {
   commonService: CommonService;
   coreService: CoreStart;
+  useUpdatedUX: boolean;
 }
 
 export class SplitIndex extends Component<SplitIndexProps> {
@@ -46,11 +49,14 @@ export class SplitIndex extends Component<SplitIndexProps> {
   };
 
   async componentDidMount() {
-    this.context.chrome.setBreadcrumbs([
-      BREADCRUMBS.INDEX_MANAGEMENT,
-      BREADCRUMBS.INDICES,
-      { ...BREADCRUMBS.SPLIT_INDEX, href: `#${ROUTES.SPLIT_INDEX}${this.props.location.search}` },
-    ]);
+    const breadCrumbs = this.props.useUpdatedUX
+      ? [BREADCRUMBS.INDICES, { ...BREADCRUMBS.SPLIT_INDEX, href: `#${ROUTES.SPLIT_INDEX}${this.props.location.search}` }]
+      : [
+          BREADCRUMBS.INDEX_MANAGEMENT,
+          BREADCRUMBS.INDICES,
+          { ...BREADCRUMBS.SPLIT_INDEX, href: `#${ROUTES.SPLIT_INDEX}${this.props.location.search}` },
+        ];
+    this.context.chrome.setBreadcrumbs(breadCrumbs);
     await this.isSourceIndexReady();
     this.calculateShardsOption();
     this.setState({
@@ -219,7 +225,53 @@ export class SplitIndex extends Component<SplitIndexProps> {
 
   render() {
     const { sourceIndex, splitIndexFlyoutVisible, reasons, shardsSelectOptions } = this.state;
-    return (
+
+    const { HeaderControl } = getNavigationUI();
+    const { setAppDescriptionControls } = getApplication();
+
+    const descriptionData = [
+      {
+        description: "Shrink an existing index into a new index with fewer primary shards.",
+        links: {
+          label: "Learn more",
+          href: "https://opensearch.org/docs/latest/api-reference/index-apis/split/",
+          iconType: "popout",
+          iconSide: "right",
+          controlType: "link",
+        } as TopNavControlLinkData,
+      } as TopNavControlDescriptionData,
+    ];
+
+    const Common = () => {
+      return (
+        <>
+          {splitIndexFlyoutVisible && (
+            <SplitIndexForm
+              sourceIndex={sourceIndex.index}
+              onSplitIndex={this.onSplitIndex}
+              shardsSelectOptions={shardsSelectOptions}
+              reasons={reasons}
+              onCancel={this.onCancel}
+              sourceShards={sourceIndex.pri}
+              loading={this.state.loading}
+              getAlias={(aliasName) =>
+                getAlias({
+                  aliasName,
+                  commonService: this.props.commonService,
+                })
+              }
+            />
+          )}
+        </>
+      );
+    };
+
+    return this.props.useUpdatedUX ? (
+      <div style={{ padding: "0px" }}>
+        <HeaderControl controls={descriptionData} setMountPoint={setAppDescriptionControls} />
+        {Common()}
+      </div>
+    ) : (
       <div style={{ padding: "0px 50px" }}>
         <EuiTitle>
           <h1>Split index</h1>
@@ -245,23 +297,7 @@ export class SplitIndex extends Component<SplitIndexProps> {
 
         <EuiSpacer />
 
-        {splitIndexFlyoutVisible && (
-          <SplitIndexForm
-            sourceIndex={sourceIndex.index}
-            onSplitIndex={this.onSplitIndex}
-            shardsSelectOptions={shardsSelectOptions}
-            reasons={reasons}
-            onCancel={this.onCancel}
-            sourceShards={sourceIndex.pri}
-            loading={this.state.loading}
-            getAlias={(aliasName) =>
-              getAlias({
-                aliasName,
-                commonService: this.props.commonService,
-              })
-            }
-          />
-        )}
+        {Common()}
       </div>
     );
   }
@@ -272,5 +308,7 @@ export default function SplitIndexWrapper(props: Omit<SplitIndexProps, "commonSe
   const coreService = useContext(CoreServicesContext) as CoreStart;
   // in split-index page, user can't change the data source i.e., its in read-only
   useUpdateUrlWithDataSourceProperties();
-  return <SplitIndex {...props} commonService={services.commonService} coreService={coreService} />;
+  const uiSettings = getUISettings();
+  const useUpdatedUX = uiSettings.get("home:useNewHomePage");
+  return <SplitIndex {...props} commonService={services.commonService} coreService={coreService} useUpdatedUX={useUpdatedUX} />;
 }
diff --git a/public/pages/Templates/components/IndexControls/IndexControls.tsx b/public/pages/Templates/components/IndexControls/IndexControls.tsx
index f61ff90d9..88e48c0da 100644
--- a/public/pages/Templates/components/IndexControls/IndexControls.tsx
+++ b/public/pages/Templates/components/IndexControls/IndexControls.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { useEffect, useState } from "react";
-import { EuiCompressedFieldSearch, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
+import { EuiCompressedFieldSearch, EuiFlexGroup, EuiFlexItem, EuiSpacer } from "@elastic/eui";
 import { getUISettings } from "../../../../services/Services";
 import TemplatesActions from "../../containers/TemplatesActions";
 import { ITemplate } from "../../interface";
@@ -38,19 +38,22 @@ export default function SearchControls(props: SearchControlsProps) {
   const useUpdatedUX = uiSettings.get("home:useNewHomePage");
 
   return useUpdatedUX ? (
-    <EuiFlexGroup style={{ padding: "0px 5px 16px 5px" }} alignItems="center">
-      <EuiFlexItem>
-        <EuiCompressedFieldSearch
-          fullWidth
-          placeholder="Search"
-          value={state.search}
-          onChange={(e) => onChange("search", e.target.value)}
-        />
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <TemplatesActions selectedItems={props.selectedItems} onDelete={props.getTemplates} history={props.history} />
-      </EuiFlexItem>
-    </EuiFlexGroup>
+    <>
+      <EuiFlexGroup alignItems="center" gutterSize="s">
+        <EuiFlexItem>
+          <EuiCompressedFieldSearch
+            fullWidth
+            placeholder="Search"
+            value={state.search}
+            onChange={(e) => onChange("search", e.target.value)}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <TemplatesActions selectedItems={props.selectedItems} onDelete={props.getTemplates} history={props.history} />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer size="m" />
+    </>
   ) : (
     <EuiFlexGroup style={{ padding: "0px 5px" }} alignItems="center">
       <EuiFlexItem>
diff --git a/public/pages/Templates/containers/Templates/Templates.tsx b/public/pages/Templates/containers/Templates/Templates.tsx
index dcc4bb6bd..78b64e2df 100644
--- a/public/pages/Templates/containers/Templates/Templates.tsx
+++ b/public/pages/Templates/containers/Templates/Templates.tsx
@@ -399,6 +399,10 @@ class Templates extends MDSEnabledComponent<TemplatesProps, TemplatesState> {
       },
     ];
 
+    const onClickCreate = () => {
+      this.props.history.push(ROUTES.CREATE_TEMPLATE);
+    };
+
     return this.state.useUpdatedUX ? (
       <div style={{ padding: "0px" }}>
         <HeaderControl controls={description} setMountPoint={setAppDescriptionControls} />
@@ -410,7 +414,7 @@ class Templates extends MDSEnabledComponent<TemplatesProps, TemplatesState> {
               label: "Create Index Template",
               fill: true,
               iconType: "plus",
-              href: `${PLUGIN_NAME}#/create-template`,
+              run: onClickCreate,
               testId: "createTemplateButton",
               controlType: "button",
               color: "primary",
@@ -446,9 +450,7 @@ class Templates extends MDSEnabledComponent<TemplatesProps, TemplatesState> {
                 text: "Create template",
                 buttonProps: {
                   fill: true,
-                  onClick: () => {
-                    this.props.history.push(ROUTES.CREATE_TEMPLATE);
-                  },
+                  onClick: onClickCreate,
                 },
               },
             ]}
diff --git a/public/pages/Transforms/containers/Transforms/TransformDetails.tsx b/public/pages/Transforms/containers/Transforms/TransformDetails.tsx
index e1761b9c6..8c8b44efa 100644
--- a/public/pages/Transforms/containers/Transforms/TransformDetails.tsx
+++ b/public/pages/Transforms/containers/Transforms/TransformDetails.tsx
@@ -507,7 +507,7 @@ export class TransformDetails extends Component<TransformDetailsProps, Transform
               </EuiModalBody>
 
               <EuiModalFooter>
-                <EuiButtonEmpty onClick={this.closeModal}>Close</EuiButtonEmpty>
+                <EuiSmallButtonEmpty onClick={this.closeModal}>Close</EuiSmallButtonEmpty>
               </EuiModalFooter>
             </EuiModal>
           </EuiOverlayMask>
diff --git a/public/pages/Transforms/containers/Transforms/Transforms.tsx b/public/pages/Transforms/containers/Transforms/Transforms.tsx
index 9d4dfff13..cd2a1e00b 100644
--- a/public/pages/Transforms/containers/Transforms/Transforms.tsx
+++ b/public/pages/Transforms/containers/Transforms/Transforms.tsx
@@ -26,6 +26,7 @@ import {
   Pagination,
   EuiTableSelectionType,
   EuiTableSortingType,
+  EuiSpacer,
 } from "@elastic/eui";
 import queryString from "query-string";
 import { RouteComponentProps } from "react-router-dom";
@@ -263,7 +264,7 @@ export class Transforms extends MDSEnabledComponent<TransformProps, TransformSta
               label: "Create transform job",
               fill: true,
               iconType: "plus",
-              href: `${PLUGIN_NAME}#/create-transform`,
+              run: this.onClickCreate,
               testId: "createTransformButton",
               controlType: "button",
               color: "primary",
@@ -272,9 +273,9 @@ export class Transforms extends MDSEnabledComponent<TransformProps, TransformSta
         />
         <EuiPanel style={{ paddingLeft: "10px", paddingRight: "10px" }}>
           <div style={{ padding: "initial" }}>
-            <EuiFlexGroup style={{ padding: "0px 0px 16px 0px" }}>
+            <EuiFlexGroup gutterSize="s">
               <EuiFlexItem>
-                <EuiFieldSearch compressed fullWidth={true} value={search} placeholder="Search" onChange={this.onSearchChange} />
+                <EuiCompressedFieldSearch fullWidth={true} value={search} placeholder="Search" onChange={this.onSearchChange} />
               </EuiFlexItem>
               {pageCount > 1 && (
                 <EuiFlexItem grow={false} style={{ justifyContent: "center" }}>
@@ -300,6 +301,7 @@ export class Transforms extends MDSEnabledComponent<TransformProps, TransformSta
                 </EuiPopover>
               </EuiFlexItem>
             </EuiFlexGroup>
+            <EuiSpacer size="m" />
 
             <EuiBasicTable
               columns={columns}
diff --git a/public/pages/Transforms/utils/metadataHelper.tsx b/public/pages/Transforms/utils/metadataHelper.tsx
index 51b855961..1a6228c9f 100644
--- a/public/pages/Transforms/utils/metadataHelper.tsx
+++ b/public/pages/Transforms/utils/metadataHelper.tsx
@@ -90,7 +90,8 @@ export const selectInterval = (
   intervalTimeunit: string,
   intervalError: string,
   onChangeInterval: (e: ChangeEvent<HTMLInputElement>) => void,
-  onChangeTimeunit: (value: ChangeEvent<HTMLSelectElement>) => void
+  onChangeTimeunit: (value: ChangeEvent<HTMLSelectElement>) => void,
+  useUpdatedUX?: boolean
 ) => (
   <React.Fragment>
     <EuiFlexGroup style={{ maxWidth: 400 }}>
diff --git a/test/helper.ts b/test/helper.ts
new file mode 100644
index 000000000..fc7a675f4
--- /dev/null
+++ b/test/helper.ts
@@ -0,0 +1,10 @@
+import { navigationPluginMock } from "../../../src/plugins/navigation/public/mocks";
+import { applicationServiceMock } from "../../../src/core/public/application/application_service.mock";
+import { uiSettingsServiceMock } from "../../../src/core/public/ui_settings/ui_settings_service.mock";
+import { setApplication, setNavigationUI, setUISettings } from "../public/services/Services";
+
+export function setupCoreStart() {
+  setNavigationUI(navigationPluginMock.createStartContract().ui);
+  setApplication(applicationServiceMock.createStartContract());
+  setUISettings(uiSettingsServiceMock.createStartContract());
+}
diff --git a/yarn.lock b/yarn.lock
index 671817ba9..195a34509 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1888,9 +1888,9 @@ ecc-jsbn@~0.1.1:
     safer-buffer "^2.1.0"
 
 elliptic@^6.5.3, elliptic@^6.5.5:
-  version "6.5.6"
-  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.6.tgz#ee5f7c3a00b98a2144ac84d67d01f04d438fa53e"
-  integrity sha512-mpzdtpeCLuS3BmE3pO3Cpp5bbjlOPY2Q0PgoF+Od1XZrHLYI28Xe3ossCmYCQt11FQKEYd9+PF8jymTvtWJSHQ==
+  version "6.5.7"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.7.tgz#8ec4da2cb2939926a1b9a73619d768207e647c8b"
+  integrity sha512-ESVCtTwiA+XhY3wyh24QqRGBoP3rEdDUl3EDUUo9tft074fi19IrdpH7hLCMMP3CIj7jb3W96rn8lt/BqIlt5Q==
   dependencies:
     bn.js "^4.11.9"
     brorand "^1.1.0"
@@ -1901,9 +1901,9 @@ elliptic@^6.5.3, elliptic@^6.5.5:
     minimalistic-crypto-utils "^1.0.1"
 
 elliptic@^6.5.3, elliptic@^6.5.5:
-  version "6.5.6"
-  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.6.tgz#ee5f7c3a00b98a2144ac84d67d01f04d438fa53e"
-  integrity sha512-mpzdtpeCLuS3BmE3pO3Cpp5bbjlOPY2Q0PgoF+Od1XZrHLYI28Xe3ossCmYCQt11FQKEYd9+PF8jymTvtWJSHQ==
+  version "6.5.7"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.7.tgz#8ec4da2cb2939926a1b9a73619d768207e647c8b"
+  integrity sha512-ESVCtTwiA+XhY3wyh24QqRGBoP3rEdDUl3EDUUo9tft074fi19IrdpH7hLCMMP3CIj7jb3W96rn8lt/BqIlt5Q==
   dependencies:
     bn.js "^4.11.9"
     brorand "^1.1.0"
@@ -4513,10 +4513,10 @@ qs@6.10.4:
   dependencies:
     side-channel "^1.0.4"
 
-qs@^6.11.2:
-  version "6.12.3"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.12.3.tgz#e43ce03c8521b9c7fd7f1f13e514e5ca37727754"
-  integrity sha512-AWJm14H1vVaO/iNZ4/hO+HyaTehuy9nRqVdkTqlJt0HWvBiBIEXFmb4C0DGeYo3Xes9rrEW+TxHsaigCbN5ICQ==
+qs@^6.12.3:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.13.0.tgz#6ca3bd58439f7e245655798997787b0d88a51906"
+  integrity sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==
   dependencies:
     side-channel "^1.0.6"