From 7cf4b840a62673f471ddf5ef0db441c1678d0492 Mon Sep 17 00:00:00 2001
From: Kshitij Tandon <tandonks@amazon.com>
Date: Tue, 20 Aug 2024 21:58:40 +0530
Subject: [PATCH] Update new header for Alias, Index Templates, Policy Managed
 Indices, Indexes and Transform Jobs (#1124) (#1137)

* wip: changes for new ui



* New UI changes



* Header Changes



* New UI changes



* UTs handel



* Header UI changes

cr: https://code.amazon.com/reviews/CR-143602949


* Updated Change Policy Page



* Fixed bug in alias for new UI



* Fixing a few bugs and addressing comments



* Fixing a few bugs in old UI



---------

Signed-off-by: Kshitij Tandon <tandonks@amazon.com>
---
 .../ContentPanel/ContentPanelActions.tsx      |   5 +-
 public/components/FilterGroup/index.tsx       |   6 +-
 .../IndexDetail/IndexDetail.test.tsx          |  17 +
 .../IndexControls/IndexControls.test.tsx      |  17 +
 .../IndexControls/IndexControls.tsx           |  48 +-
 .../AliasActions/AliasActions.test.tsx        |  17 +
 .../Aliases/containers/AliasActions/index.tsx |   7 +-
 .../containers/Aliases/Aliases.test.tsx       |  17 +
 .../Aliases/containers/Aliases/Aliases.tsx    | 341 ++++---
 .../ChangeManagedIndices.tsx                  |   6 +-
 .../components/NewPolicy/NewPolicy.tsx        |   5 +-
 .../ChangePolicy/ChangePolicy.test.tsx        |  17 +
 .../containers/ChangePolicy/ChangePolicy.tsx  | 107 +-
 .../CreateIndex/CreateIndex.test.tsx          |  17 +
 .../containers/CreateIndex/CreateIndex.tsx    |  29 +-
 .../containers/IndexForm/index.tsx            |  13 +-
 .../CreateIndexTemplate.test.tsx              |  17 +
 .../CreateIndexTemplate.tsx                   |  29 +-
 .../TemplateDetail/TemplateDetail.test.tsx    |  17 +
 .../TemplateDetail/TemplateDetail.tsx         | 228 +++--
 .../CreateTransformForm.test.tsx              |  17 +
 .../CreateTransformForm.tsx                   |  15 +-
 .../DefineTransformsStep.tsx                  |  22 +-
 .../ReviewAndCreateStep.tsx                   |  22 +-
 .../SetUpIndicesStep/SetUpIndicesStep.tsx     |  21 +-
 .../SpecifyScheduleStep.tsx                   |  23 +-
 .../IndexDetail/IndexDetail.test.tsx          |  17 +
 .../containers/IndexDetail/IndexDetail.tsx    | 167 ++--
 .../IndexControls/IndexControls.test.tsx      |  17 +
 .../IndexControls/IndexControls.tsx           |  59 +-
 .../containers/Indices/Indices.test.tsx       |  17 +
 .../Indices/containers/Indices/Indices.tsx    |  86 +-
 .../IndicesActions/IndicesActions.test.tsx    |  17 +
 .../containers/IndicesActions/index.tsx       |   7 +-
 .../ManagedIndexControls.test.tsx             |  17 +
 .../ManagedIndexControls.tsx                  |  58 +-
 .../ManagedIndices/ManagedIndices.test.tsx    |  17 +
 .../ManagedIndices/ManagedIndices.tsx         | 259 ++++-
 .../IndexControls/IndexControls.test.tsx      |  17 +
 .../IndexControls/IndexControls.tsx           |  28 +-
 .../containers/Templates/Templates.test.tsx   |  17 +
 .../containers/Templates/Templates.tsx        | 184 +++-
 .../TemplatesActions.test.tsx                 |  17 +
 .../containers/TemplatesActions/index.tsx     |   8 +-
 .../ConfigureTransform/Configure.tsx          |  13 +-
 .../GeneralInformation/GeneralInformation.tsx |  35 +-
 .../Transforms/components/Indices/Indices.tsx |   5 +-
 .../components/Schedule/Schedule.tsx          |   4 +-
 .../TransformEmptyPrompt.tsx                  |  14 +-
 .../TransformStatus/TransformStatus.tsx       |   5 +-
 .../Transforms/EditTransform.test.tsx         |  17 +
 .../containers/Transforms/EditTransform.tsx   | 126 ++-
 .../Transforms/TransformDetails.test.tsx      |  17 +
 .../Transforms/TransformDetails.tsx           | 162 ++-
 .../Transforms/TransformSettings.tsx          |   5 +-
 .../containers/Transforms/Transforms.test.tsx |  17 +
 .../containers/Transforms/Transforms.tsx      |  96 +-
 public/utils/constants.ts                     |   4 +-
 yarn.lock                                     | 919 ++++++++++++++++++
 59 files changed, 3012 insertions(+), 516 deletions(-)

diff --git a/public/components/ContentPanel/ContentPanelActions.tsx b/public/components/ContentPanel/ContentPanelActions.tsx
index fc8136093..22f6b8954 100644
--- a/public/components/ContentPanel/ContentPanelActions.tsx
+++ b/public/components/ContentPanel/ContentPanelActions.tsx
@@ -17,15 +17,16 @@ interface ContentPanelActionsProps {
       onClickModal: (onShow: (component: any, props: object) => void) => () => void;
     };
   }[];
+  size?: "s" | "m";
 }
 
-const ContentPanelActions: React.SFC<ContentPanelActionsProps> = ({ actions }) => (
+const ContentPanelActions: React.SFC<ContentPanelActionsProps> = ({ actions, size }) => (
   <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
     {actions.map(({ text, buttonProps = {}, flexItemProps = {}, modal = null, children }, index) => {
       let button = children ? (
         children
       ) : (
-        <EuiButton {...buttonProps} data-test-subj={`${text}Button`}>
+        <EuiButton {...buttonProps} data-test-subj={`${text}Button`} size={size ? size : "m"}>
           {text}
         </EuiButton>
       );
diff --git a/public/components/FilterGroup/index.tsx b/public/components/FilterGroup/index.tsx
index 7dc96e8f9..56431fcf8 100644
--- a/public/components/FilterGroup/index.tsx
+++ b/public/components/FilterGroup/index.tsx
@@ -5,11 +5,11 @@ export interface IFilterGroupProps {
   options: { label: string }[];
   value?: string[];
   filterButtonProps?: EuiFilterButtonProps;
-  useNewUx?: boolean;
+  useNewUX?: boolean;
   onChange?: (val: IFilterGroupProps["value"]) => void;
 }
 
-export default function FilterGroup({ options, value, filterButtonProps, useNewUx, onChange }: IFilterGroupProps) {
+export default function FilterGroup({ options, value, filterButtonProps, onChange, useNewUX }: IFilterGroupProps) {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
   const onButtonClick = () => {
@@ -31,7 +31,7 @@ export default function FilterGroup({ options, value, filterButtonProps, useNewU
             numFilters={options?.length}
             hasActiveFilters={!!value?.length}
             numActiveFilters={value?.length}
-            size={useNewUx ? "s" : undefined}
+            size={useNewUX ? "s" : undefined}
             {...filterButtonProps}
           />
         }
diff --git a/public/containers/IndexDetail/IndexDetail.test.tsx b/public/containers/IndexDetail/IndexDetail.test.tsx
index bc87da9a7..6b43d1d3b 100644
--- a/public/containers/IndexDetail/IndexDetail.test.tsx
+++ b/public/containers/IndexDetail/IndexDetail.test.tsx
@@ -10,6 +10,23 @@ import { browserServicesMock, coreServicesMock } from "../../../test/mocks";
 import { ServicesContext } from "../../services";
 import { CoreServicesContext } from "../../components/core_services";
 import { CatIndex } from "../../../server/models/interfaces";
+import { getApplication, getNavigationUI, getUISettings } from "../../services/Services";
+
+jest.mock("../../services/Services", () => ({
+  ...jest.requireActual("../../services/Services"),
+  getUISettings: jest.fn(),
+  getApplication: jest.fn(),
+  getNavigationUI: jest.fn(),
+}));
+
+beforeEach(() => {
+  (getUISettings as jest.Mock).mockReturnValue({
+    get: jest.fn().mockReturnValue(false), // or false, depending on your test case
+  });
+  (getApplication as jest.Mock).mockReturnValue({});
+
+  (getNavigationUI as jest.Mock).mockReturnValue({});
+});
 
 browserServicesMock.commonService.apiCaller = jest.fn(
   async (payload): Promise<any> => {
diff --git a/public/pages/Aliases/components/IndexControls/IndexControls.test.tsx b/public/pages/Aliases/components/IndexControls/IndexControls.test.tsx
index 9ed775959..005667f80 100644
--- a/public/pages/Aliases/components/IndexControls/IndexControls.test.tsx
+++ b/public/pages/Aliases/components/IndexControls/IndexControls.test.tsx
@@ -9,6 +9,23 @@ import { render, waitFor } from "@testing-library/react";
 // @ts-ignore
 import userEvent from "@testing-library/user-event";
 import IndexControls from "./IndexControls";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+
+jest.mock("../../../../services/Services", () => ({
+  ...jest.requireActual("../../../../services/Services"),
+  getUISettings: jest.fn(),
+  getApplication: jest.fn(),
+  getNavigationUI: jest.fn(),
+}));
+
+beforeEach(() => {
+  (getUISettings as jest.Mock).mockReturnValue({
+    get: jest.fn().mockReturnValue(false), // or false, depending on your test case
+  });
+  (getApplication as jest.Mock).mockReturnValue({});
+
+  (getNavigationUI as jest.Mock).mockReturnValue({});
+});
 
 describe("<IndexControls /> spec", () => {
   it("renders the component", async () => {
diff --git a/public/pages/Aliases/components/IndexControls/IndexControls.tsx b/public/pages/Aliases/components/IndexControls/IndexControls.tsx
index 4487b0700..f5865c74c 100644
--- a/public/pages/Aliases/components/IndexControls/IndexControls.tsx
+++ b/public/pages/Aliases/components/IndexControls/IndexControls.tsx
@@ -5,14 +5,23 @@
 
 import React, { useEffect, useState } from "react";
 import { EuiComboBox, EuiFieldSearch, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
-import { ALIAS_STATUS_OPTIONS } from "../../../../utils/constants";
+import { ALIAS_STATUS_OPTIONS, IndicesUpdateMode } from "../../../../utils/constants";
+import { getUISettings } from "../../../../services/Services";
+import AliasesActions from "../../containers/AliasActions";
+import { IAlias } from "../../interface";
+import { RouteComponentProps } from "react-router-dom";
+import FilterGroup from "../../../../components/FilterGroup";
 
 export interface SearchControlsProps {
   value: {
     search: string;
     status: string;
+    selectedItems: IAlias[];
   };
   onSearchChange: (args: SearchControlsProps["value"]) => void;
+  onDelete: () => Promise<void>;
+  history: RouteComponentProps["history"];
+  onUpdateAlias: () => void;
 }
 
 export default function SearchControls(props: SearchControlsProps) {
@@ -28,7 +37,42 @@ export default function SearchControls(props: SearchControlsProps) {
   useEffect(() => {
     setState(props.value);
   }, [props.value]);
-  return (
+
+  const uiSettings = getUISettings();
+  const useUpdatedUX = uiSettings.get("home:useNewHomePage");
+
+  return useUpdatedUX ? (
+    <EuiFlexGroup style={{ padding: "0px 5px" }} alignItems="center">
+      <EuiFlexItem>
+        <EuiFieldSearch
+          compressed
+          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 style={{ padding: "0px 5px" }} alignItems="center">
       <EuiFlexItem>
         <EuiFieldSearch fullWidth placeholder="Search..." value={state.search} onChange={(e) => onChange("search", e.target.value)} />
diff --git a/public/pages/Aliases/containers/AliasActions/AliasActions.test.tsx b/public/pages/Aliases/containers/AliasActions/AliasActions.test.tsx
index 4ae8cc4ae..597929850 100644
--- a/public/pages/Aliases/containers/AliasActions/AliasActions.test.tsx
+++ b/public/pages/Aliases/containers/AliasActions/AliasActions.test.tsx
@@ -14,6 +14,23 @@ import { ServicesContext } from "../../../../services";
 import { CoreServicesContext } from "../../../../components/core_services";
 import { buildMockApiCallerForFlush, selectedAliases } from "../../../../containers/FlushIndexModal/FlushIndexModalTestHelper";
 import { IAlias } from "../../interface";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+
+jest.mock("../../../../services/Services", () => ({
+  ...jest.requireActual("../../../../services/Services"),
+  getUISettings: jest.fn(),
+  getApplication: jest.fn(),
+  getNavigationUI: jest.fn(),
+}));
+
+beforeEach(() => {
+  (getUISettings as jest.Mock).mockReturnValue({
+    get: jest.fn().mockReturnValue(false), // or false, depending on your test case
+  });
+  (getApplication as jest.Mock).mockReturnValue({});
+
+  (getNavigationUI as jest.Mock).mockReturnValue({});
+});
 
 function renderWithRouter(props: Omit<AliasesActionsProps, "history">) {
   return {
diff --git a/public/pages/Aliases/containers/AliasActions/index.tsx b/public/pages/Aliases/containers/AliasActions/index.tsx
index 8144596c8..8aece3cd4 100644
--- a/public/pages/Aliases/containers/AliasActions/index.tsx
+++ b/public/pages/Aliases/containers/AliasActions/index.tsx
@@ -12,6 +12,7 @@ import FlushIndexModal from "../../../../containers/FlushIndexModal";
 import RefreshActionModal from "../../../../containers/RefreshAction";
 import { IAlias } from "../../interface";
 import { ROUTES, INDEX_OP_TARGET_TYPE } from "../../../../utils/constants";
+import { getUISettings } from "../../../../services/Services";
 
 export interface AliasesActionsProps {
   selectedItems: IAlias[];
@@ -44,6 +45,10 @@ export default function AliasesActions(props: AliasesActionsProps) {
   };
 
   const renderKey = useMemo(() => Date.now(), [selectedItems]);
+  const uiSettings = getUISettings();
+  const useUpdatedUX = uiSettings.get("home:useNewHomePage");
+
+  const size = useUpdatedUX ? "s" : undefined;
 
   return (
     <>
@@ -51,7 +56,7 @@ export default function AliasesActions(props: AliasesActionsProps) {
         data-test-subj="moreAction"
         panelPaddingSize="none"
         button={
-          <EuiButton iconType="arrowDown" iconSide="right">
+          <EuiButton iconType="arrowDown" iconSide="right" size={size}>
             Actions
           </EuiButton>
         }
diff --git a/public/pages/Aliases/containers/Aliases/Aliases.test.tsx b/public/pages/Aliases/containers/Aliases/Aliases.test.tsx
index d733499d1..95f124449 100644
--- a/public/pages/Aliases/containers/Aliases/Aliases.test.tsx
+++ b/public/pages/Aliases/containers/Aliases/Aliases.test.tsx
@@ -15,6 +15,23 @@ import { ROUTES } from "../../../../utils/constants";
 import { CoreServicesContext } from "../../../../components/core_services";
 import userEvent from "@testing-library/user-event";
 import { IAlias } from "../../interface";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+
+jest.mock("../../../../services/Services", () => ({
+  ...jest.requireActual("../../../../services/Services"),
+  getUISettings: jest.fn(),
+  getApplication: jest.fn(),
+  getNavigationUI: jest.fn(),
+}));
+
+beforeEach(() => {
+  (getUISettings as jest.Mock).mockReturnValue({
+    get: jest.fn().mockReturnValue(false), // or false, depending on your test case
+  });
+  (getApplication as jest.Mock).mockReturnValue({});
+
+  (getNavigationUI as jest.Mock).mockReturnValue({});
+});
 
 function renderWithRouter() {
   return {
diff --git a/public/pages/Aliases/containers/Aliases/Aliases.tsx b/public/pages/Aliases/containers/Aliases/Aliases.tsx
index 7e447fa49..6adbbb8e0 100644
--- a/public/pages/Aliases/containers/Aliases/Aliases.tsx
+++ b/public/pages/Aliases/containers/Aliases/Aliases.tsx
@@ -29,7 +29,7 @@ import { ContentPanel, ContentPanelActions } from "../../../../components/Conten
 import { DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_QUERY_PARAMS } from "../../utils/constants";
 import CommonService from "../../../../services/CommonService";
 import { IAlias } from "../../interface";
-import { BREADCRUMBS, ROUTES } from "../../../../utils/constants";
+import { BREADCRUMBS, PLUGIN_NAME, ROUTES } from "../../../../utils/constants";
 import { CoreServicesContext } from "../../../../components/core_services";
 import { ServicesContext } from "../../../../services";
 import IndexControls, { SearchControlsProps } from "../../components/IndexControls";
@@ -38,6 +38,8 @@ import AliasesActions from "../AliasActions";
 import { CoreStart } from "opensearch-dashboards/public";
 import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
 import MDSEnabledComponent from "../../../../components/MDSEnabledComponent";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+import { TopNavControlButtonData, TopNavControlDescriptionData } from "src/plugins/navigation/public";
 
 interface AliasesProps extends RouteComponentProps, DataSourceMenuProperties {
   commonService: CommonService;
@@ -57,6 +59,7 @@ interface AliasesState extends DataSourceMenuProperties {
   loading: boolean;
   aliasCreateFlyoutVisible: boolean;
   aliasEditFlyoutVisible: boolean;
+  useUpdatedUX: boolean;
 }
 
 function IndexNameDisplay(props: { indices: string[]; alias: string }) {
@@ -133,6 +136,8 @@ class Aliases extends MDSEnabledComponent<AliasesProps, AliasesState> {
       sortDirection: Direction;
       status: string;
     };
+    const uiSettings = getUISettings();
+    const useUpdatedUX = uiSettings.get("home:useNewHomePage");
     this.state = {
       ...defaultFilter,
       ...this.state,
@@ -149,13 +154,15 @@ class Aliases extends MDSEnabledComponent<AliasesProps, AliasesState> {
       aliasCreateFlyoutVisible: false,
       aliasEditFlyoutVisible: false,
       editingItem: null,
+      useUpdatedUX: useUpdatedUX,
     };
 
     this.getAliases = _.debounce(this.getAliases, 500, { leading: true });
   }
 
   componentDidMount() {
-    this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.ALIASES]);
+    const breadCrumbs = this.state.useUpdatedUX ? [BREADCRUMBS.NEW_ALIASES] : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.ALIASES];
+    this.context.chrome.setBreadcrumbs(breadCrumbs);
     this.getAliases();
   }
 
@@ -292,7 +299,205 @@ class Aliases extends MDSEnabledComponent<AliasesProps, AliasesState> {
     const selection: EuiTableSelectionType<IAlias> = {
       onSelectionChange: this.onSelectionChange,
     };
-    return (
+
+    const { HeaderControl } = getNavigationUI();
+    const { setAppRightControls } = getApplication();
+    const { setAppDescriptionControls } = getApplication();
+
+    const description = [
+      {
+        renderComponent: (
+          <EuiFormRow
+            fullWidth
+            helpText={
+              <div style={{ width: "51%" }}>
+                An alias is a virtual index name that can point to one or more indexes. If your data is spread across multiple indexes, you
+                can create and query an alias instead of keeping track of which indexes to query.{" "}
+                <EuiLink target="_blank" external href={(this.context as CoreStart).docLinks.links.opensearch.indexAlias.base}>
+                  Learn more
+                </EuiLink>
+              </div>
+            }
+          >
+            <></>
+          </EuiFormRow>
+        ),
+      },
+    ];
+
+    const Buttonsize = this.state.useUpdatedUX ? "s" : undefined;
+
+    const commonRender = () => {
+      return (
+        <>
+          <EuiBasicTable
+            data-test-subj="aliases-table"
+            loading={this.state.loading}
+            columns={[
+              {
+                field: "alias",
+                name: "Alias name",
+                sortable: true,
+                render: (value: string, record) => {
+                  return (
+                    <EuiLink
+                      data-test-subj={`aliasDetail-${value}`}
+                      onClick={() =>
+                        this.setState({
+                          editingItem: record,
+                          aliasEditFlyoutVisible: true,
+                        })
+                      }
+                    >
+                      {value}
+                    </EuiLink>
+                  );
+                },
+              },
+              {
+                field: "writeIndex",
+                name: "Write index",
+                render: (value: string) => {
+                  if (value) {
+                    return <EuiLink href={`#${ROUTES.INDEX_DETAIL}/${value}`}>{value}</EuiLink>;
+                  }
+
+                  return "-";
+                },
+              },
+              {
+                field: "indexArray",
+                name: "Index name",
+                render: (value: string[], record) => {
+                  return <IndexNameDisplay indices={value} alias={record.alias} />;
+                },
+              },
+            ]}
+            isSelectable={true}
+            itemId="alias"
+            items={aliases}
+            onChange={this.onTableChange}
+            pagination={pagination}
+            selection={selection}
+            sorting={sorting}
+            noItemsMessage={
+              isEqual(
+                {
+                  search: this.state.search,
+                  status: this.state.status,
+                },
+                defaultFilter
+              ) ? (
+                <EuiEmptyPrompt
+                  body={
+                    <EuiText>
+                      <p>You have no aliases.</p>
+                    </EuiText>
+                  }
+                  actions={[
+                    <EuiButton
+                      size={Buttonsize}
+                      fill
+                      onClick={() => {
+                        this.setState({
+                          aliasCreateFlyoutVisible: true,
+                        });
+                      }}
+                    >
+                      Create alias
+                    </EuiButton>,
+                  ]}
+                />
+              ) : (
+                <EuiEmptyPrompt
+                  body={
+                    <EuiText>
+                      <p>There are no aliases matching your applied filters. Reset your filters to view your aliases.</p>
+                    </EuiText>
+                  }
+                  actions={[
+                    <EuiButton
+                      size={Buttonsize}
+                      fill
+                      onClick={() => {
+                        this.setState(defaultFilter, () => {
+                          this.getAliases();
+                        });
+                      }}
+                    >
+                      Reset filters
+                    </EuiButton>,
+                  ]}
+                />
+              )
+            }
+          />
+          <CreateAlias
+            visible={this.state.aliasCreateFlyoutVisible}
+            onSuccess={() => {
+              this.getAliases();
+              this.setState({ aliasCreateFlyoutVisible: false });
+            }}
+            onClose={() => this.setState({ aliasCreateFlyoutVisible: false })}
+          />
+          <CreateAlias
+            visible={this.state.aliasEditFlyoutVisible}
+            onSuccess={() => {
+              this.getAliases();
+              this.setState({ editingItem: null, aliasEditFlyoutVisible: false });
+            }}
+            onClose={() =>
+              this.setState({
+                editingItem: null,
+                aliasEditFlyoutVisible: false,
+              })
+            }
+            alias={this.state.editingItem || this.state.selectedItems[0]}
+          />
+        </>
+      );
+    };
+
+    return this.state.useUpdatedUX ? (
+      <div style={{ padding: "0px" }}>
+        <HeaderControl controls={description} setMountPoint={setAppDescriptionControls} />
+        <HeaderControl
+          setMountPoint={setAppRightControls}
+          controls={[
+            {
+              id: "Create alias",
+              label: "Create Alias",
+              fill: true,
+              iconType: "plus",
+              run: () => {
+                this.setState({
+                  aliasCreateFlyoutVisible: true,
+                });
+              },
+              testId: "createAliasButton",
+              controlType: "button",
+              color: "primary",
+            } as TopNavControlButtonData,
+          ]}
+        />
+        <ContentPanel>
+          <IndexControls
+            value={{
+              search: this.state.search,
+              status: this.state.status,
+              selectedItems: this.state.selectedItems,
+            }}
+            onUpdateAlias={() => {
+              this.setState({ aliasEditFlyoutVisible: true });
+            }}
+            onSearchChange={this.onSearchChange}
+            onDelete={this.getAliases}
+            history={this.props.history}
+          />
+          {commonRender()}
+        </ContentPanel>
+      </div>
+    ) : (
       <ContentPanel
         actions={
           <ContentPanelActions
@@ -351,133 +556,17 @@ class Aliases extends MDSEnabledComponent<AliasesProps, AliasesState> {
           value={{
             search: this.state.search,
             status: this.state.status,
+            selectedItems: this.state.selectedItems,
+          }}
+          onUpdateAlias={() => {
+            this.setState({ aliasEditFlyoutVisible: true });
           }}
           onSearchChange={this.onSearchChange}
+          onDelete={this.getAliases}
+          history={this.props.history}
         />
         <EuiHorizontalRule margin="xs" />
-
-        <EuiBasicTable
-          data-test-subj="aliases-table"
-          loading={this.state.loading}
-          columns={[
-            {
-              field: "alias",
-              name: "Alias name",
-              sortable: true,
-              render: (value: string, record) => {
-                return (
-                  <EuiLink
-                    data-test-subj={`aliasDetail-${value}`}
-                    onClick={() =>
-                      this.setState({
-                        editingItem: record,
-                        aliasEditFlyoutVisible: true,
-                      })
-                    }
-                  >
-                    {value}
-                  </EuiLink>
-                );
-              },
-            },
-            {
-              field: "writeIndex",
-              name: "Write index",
-              render: (value: string) => {
-                if (value) {
-                  return <EuiLink href={`#${ROUTES.INDEX_DETAIL}/${value}`}>{value}</EuiLink>;
-                }
-
-                return "-";
-              },
-            },
-            {
-              field: "indexArray",
-              name: "Index name",
-              render: (value: string[], record) => {
-                return <IndexNameDisplay indices={value} alias={record.alias} />;
-              },
-            },
-          ]}
-          isSelectable={true}
-          itemId="alias"
-          items={aliases}
-          onChange={this.onTableChange}
-          pagination={pagination}
-          selection={selection}
-          sorting={sorting}
-          noItemsMessage={
-            isEqual(
-              {
-                search: this.state.search,
-                status: this.state.status,
-              },
-              defaultFilter
-            ) ? (
-              <EuiEmptyPrompt
-                body={
-                  <EuiText>
-                    <p>You have no aliases.</p>
-                  </EuiText>
-                }
-                actions={[
-                  <EuiButton
-                    fill
-                    onClick={() => {
-                      this.setState({
-                        aliasCreateFlyoutVisible: true,
-                      });
-                    }}
-                  >
-                    Create alias
-                  </EuiButton>,
-                ]}
-              />
-            ) : (
-              <EuiEmptyPrompt
-                body={
-                  <EuiText>
-                    <p>There are no aliases matching your applied filters. Reset your filters to view your aliases.</p>
-                  </EuiText>
-                }
-                actions={[
-                  <EuiButton
-                    fill
-                    onClick={() => {
-                      this.setState(defaultFilter, () => {
-                        this.getAliases();
-                      });
-                    }}
-                  >
-                    Reset filters
-                  </EuiButton>,
-                ]}
-              />
-            )
-          }
-        />
-        <CreateAlias
-          visible={this.state.aliasCreateFlyoutVisible}
-          onSuccess={() => {
-            this.getAliases();
-            this.setState({ aliasCreateFlyoutVisible: false });
-          }}
-          onClose={() => this.setState({ aliasCreateFlyoutVisible: false })}
-        />
-        <CreateAlias
-          visible={this.state.aliasEditFlyoutVisible}
-          onSuccess={() => {
-            this.getAliases();
-            this.setState({ editingItem: null, aliasEditFlyoutVisible: false });
-          }}
-          onClose={() =>
-            this.setState({
-              editingItem: null,
-              aliasEditFlyoutVisible: false,
-            })
-          }
-          alias={this.state.editingItem || this.state.selectedItems[0]}
-        />
+        {commonRender()}
       </ContentPanel>
     );
   }
diff --git a/public/pages/ChangePolicy/components/ChangeManagedIndices/ChangeManagedIndices.tsx b/public/pages/ChangePolicy/components/ChangeManagedIndices/ChangeManagedIndices.tsx
index 73d2009ee..c4bc4c259 100644
--- a/public/pages/ChangePolicy/components/ChangeManagedIndices/ChangeManagedIndices.tsx
+++ b/public/pages/ChangePolicy/components/ChangeManagedIndices/ChangeManagedIndices.tsx
@@ -17,6 +17,7 @@ interface ChangeManagedIndicesProps {
   onChangeManagedIndices: (selectedManagedIndices: { label: string; value?: ManagedIndexItem }[]) => void;
   onChangeStateFilters: (stateFilter: { label: string }[]) => void;
   managedIndicesError: string;
+  useUpdatedUX?: boolean;
 }
 
 interface ChangeManagedIndicesState {
@@ -71,8 +72,7 @@ export default class ChangeManagedIndices extends Component<ChangeManagedIndices
 
   render() {
     const { managedIndices, managedIndicesIsLoading, stateFilterSearchValue } = this.state;
-    const { selectedManagedIndices, selectedStateFilters, managedIndicesError } = this.props;
-
+    const { selectedManagedIndices, selectedStateFilters, managedIndicesError, useUpdatedUX } = this.props;
     const uniqueStates = selectedManagedIndices.reduce(
       (accu: Set<any>, selectedManagedIndex: { label: string; value?: ManagedIndexItem }) => {
         if (!selectedManagedIndex.value) return accu;
@@ -109,6 +109,7 @@ export default class ChangeManagedIndices extends Component<ChangeManagedIndices
               // @ts-ignore
               onChange={this.props.onChangeManagedIndices}
               onSearchChange={this.onManagedIndexSearchChange}
+              compressed={useUpdatedUX ? true : false}
             />
           </EuiFormRow>
 
@@ -121,6 +122,7 @@ export default class ChangeManagedIndices extends Component<ChangeManagedIndices
               // @ts-ignore
               onChange={this.props.onChangeStateFilters}
               onSearchChange={this.onStateFilterSearchChange}
+              compressed={useUpdatedUX ? true : false}
             />
           </EuiFormRow>
         </div>
diff --git a/public/pages/ChangePolicy/components/NewPolicy/NewPolicy.tsx b/public/pages/ChangePolicy/components/NewPolicy/NewPolicy.tsx
index f9171056f..9dad0f9f3 100644
--- a/public/pages/ChangePolicy/components/NewPolicy/NewPolicy.tsx
+++ b/public/pages/ChangePolicy/components/NewPolicy/NewPolicy.tsx
@@ -24,6 +24,7 @@ interface NewPolicyProps {
   onChangePolicy: (selectedPolicies: PolicyOption[]) => void;
   onChangeStateRadio: (optionId: string) => void;
   onStateSelectChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+  useUpdatedUX?: boolean;
 }
 
 interface NewPolicyState {
@@ -70,7 +71,7 @@ export default class NewPolicy extends React.Component<NewPolicyProps, NewPolicy
   };
 
   render() {
-    const { selectedPolicies, stateRadioIdSelected, stateSelected, selectedPoliciesError } = this.props;
+    const { selectedPolicies, stateRadioIdSelected, stateSelected, selectedPoliciesError, useUpdatedUX } = this.props;
     const { policies, policiesIsLoading } = this.state;
 
     const hasSelectedPolicy = !!selectedPolicies.length;
@@ -113,6 +114,7 @@ export default class NewPolicy extends React.Component<NewPolicyProps, NewPolicy
               // @ts-ignore
               onChange={this.props.onChangePolicy}
               onSearchChange={this.onPolicySearchChange}
+              compressed={useUpdatedUX ? true : false}
             />
           </EuiFormRow>
 
@@ -129,6 +131,7 @@ 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}
             />
           </EuiFormRow>
         </div>
diff --git a/public/pages/ChangePolicy/containers/ChangePolicy/ChangePolicy.test.tsx b/public/pages/ChangePolicy/containers/ChangePolicy/ChangePolicy.test.tsx
index 921c088ab..446f003cf 100644
--- a/public/pages/ChangePolicy/containers/ChangePolicy/ChangePolicy.test.tsx
+++ b/public/pages/ChangePolicy/containers/ChangePolicy/ChangePolicy.test.tsx
@@ -14,6 +14,23 @@ import { BREADCRUMBS, ROUTES } from "../../../../utils/constants";
 import { ServicesConsumer, ServicesContext } from "../../../../services";
 import { ModalProvider, ModalRoot } from "../../../../components/Modal";
 import { CoreServicesConsumer, CoreServicesContext } from "../../../../components/core_services";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+
+jest.mock("../../../../services/Services", () => ({
+  ...jest.requireActual("../../../../services/Services"),
+  getUISettings: jest.fn(),
+  getApplication: jest.fn(),
+  getNavigationUI: jest.fn(),
+}));
+
+beforeEach(() => {
+  (getUISettings as jest.Mock).mockReturnValue({
+    get: jest.fn().mockReturnValue(false), // or false, depending on your test case
+  });
+  (getApplication as jest.Mock).mockReturnValue({});
+
+  (getNavigationUI as jest.Mock).mockReturnValue({});
+});
 
 function renderWithRouter(Component: React.ComponentType<any>) {
   return {
diff --git a/public/pages/ChangePolicy/containers/ChangePolicy/ChangePolicy.tsx b/public/pages/ChangePolicy/containers/ChangePolicy/ChangePolicy.tsx
index ba52420d0..97ececf11 100644
--- a/public/pages/ChangePolicy/containers/ChangePolicy/ChangePolicy.tsx
+++ b/public/pages/ChangePolicy/containers/ChangePolicy/ChangePolicy.tsx
@@ -16,10 +16,12 @@ import { PolicyOption } from "../../models/interfaces";
 import { CoreServicesContext } from "../../../../components/core_services";
 import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
 import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
+import { getUISettings } from "../../../../services/Services";
 
 interface ChangePolicyProps extends RouteComponentProps, DataSourceMenuProperties {
   managedIndexService: ManagedIndexService;
   indexService: IndexService;
+  useUpdatedUX?: boolean;
 }
 
 interface ChangePolicyState {
@@ -53,7 +55,10 @@ export class ChangePolicy extends Component<ChangePolicyProps, ChangePolicyState
   state: ChangePolicyState = ChangePolicy.emptyState;
 
   async componentDidMount(): Promise<void> {
-    this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.MANAGED_INDICES, BREADCRUMBS.CHANGE_POLICY]);
+    const breadCrumbs = this.props.useUpdatedUX
+      ? [BREADCRUMBS.MANAGED_INDICES, BREADCRUMBS.CHANGE_POLICY]
+      : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.MANAGED_INDICES, BREADCRUMBS.CHANGE_POLICY];
+    this.context.chrome.setBreadcrumbs(breadCrumbs);
   }
 
   componentDidUpdate(prevProps: ChangePolicyProps, prevState: Readonly<ChangePolicyState>) {
@@ -142,7 +147,7 @@ export class ChangePolicy extends Component<ChangePolicyProps, ChangePolicyState
   };
 
   render() {
-    const { indexService, managedIndexService } = this.props;
+    const { indexService, managedIndexService, useUpdatedUX } = this.props;
     const {
       selectedPolicies,
       selectedManagedIndices,
@@ -154,7 +159,56 @@ export class ChangePolicy extends Component<ChangePolicyProps, ChangePolicyState
       hasSubmitted,
     } = this.state;
 
-    return (
+    const Common = () => {
+      return (
+        <>
+          <ChangeManagedIndices
+            key={`changeManagedIndices-${this.props.dataSourceId}`} // force re-mount on dataSourceId change
+            {...this.props}
+            managedIndexService={managedIndexService}
+            selectedManagedIndices={selectedManagedIndices}
+            selectedStateFilters={selectedStateFilters}
+            onChangeManagedIndices={this.onChangeManagedIndices}
+            onChangeStateFilters={this.onChangeStateFilters}
+            managedIndicesError={hasSubmitted ? managedIndicesError : ""}
+            useUpdatedUX={useUpdatedUX}
+          />
+
+          <EuiSpacer />
+
+          <NewPolicy
+            key={`newPolicy-${this.props.dataSourceId}`} // force re-mount on dataSourceId change
+            {...this.props}
+            indexService={indexService}
+            selectedPolicies={selectedPolicies}
+            stateRadioIdSelected={stateRadioIdSelected}
+            stateSelected={stateSelected}
+            onChangePolicy={this.onChangeSelectedPolicy}
+            onChangeStateRadio={this.onChangeStateRadio}
+            onStateSelectChange={this.onStateSelectChange}
+            selectedPoliciesError={hasSubmitted ? selectedPoliciesError : ""}
+            useUpdatedUX={useUpdatedUX}
+          />
+
+          <EuiSpacer />
+
+          <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty size={useUpdatedUX ? "s" : undefined} onClick={this.onCancel} data-test-subj="changePolicyCancelButton">
+                Cancel
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButton size={useUpdatedUX ? "s" : undefined} fill onClick={this.onSubmit} data-test-subj="changePolicyChangeButton">
+                Change
+              </EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </>
+      );
+    };
+
+    return !useUpdatedUX ? (
       <div style={{ padding: "0px 25px" }}>
         <EuiTitle size="l">
           <h1>Change policy</h1>
@@ -162,47 +216,10 @@ export class ChangePolicy extends Component<ChangePolicyProps, ChangePolicyState
 
         <EuiSpacer />
 
-        <ChangeManagedIndices
-          key={`changeManagedIndices-${this.props.dataSourceId}`} // force re-mount on dataSourceId change
-          {...this.props}
-          managedIndexService={managedIndexService}
-          selectedManagedIndices={selectedManagedIndices}
-          selectedStateFilters={selectedStateFilters}
-          onChangeManagedIndices={this.onChangeManagedIndices}
-          onChangeStateFilters={this.onChangeStateFilters}
-          managedIndicesError={hasSubmitted ? managedIndicesError : ""}
-        />
-
-        <EuiSpacer />
-
-        <NewPolicy
-          key={`newPolicy-${this.props.dataSourceId}`} // force re-mount on dataSourceId change
-          {...this.props}
-          indexService={indexService}
-          selectedPolicies={selectedPolicies}
-          stateRadioIdSelected={stateRadioIdSelected}
-          stateSelected={stateSelected}
-          onChangePolicy={this.onChangeSelectedPolicy}
-          onChangeStateRadio={this.onChangeStateRadio}
-          onStateSelectChange={this.onStateSelectChange}
-          selectedPoliciesError={hasSubmitted ? selectedPoliciesError : ""}
-        />
-
-        <EuiSpacer />
-
-        <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
-          <EuiFlexItem grow={false}>
-            <EuiButtonEmpty onClick={this.onCancel} data-test-subj="changePolicyCancelButton">
-              Cancel
-            </EuiButtonEmpty>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButton fill onClick={this.onSubmit} data-test-subj="changePolicyChangeButton">
-              Change
-            </EuiButton>
-          </EuiFlexItem>
-        </EuiFlexGroup>
+        {Common()}
       </div>
+    ) : (
+      <div style={{ padding: "0px 0px" }}>{Common()}</div>
     );
   }
 }
@@ -210,5 +227,7 @@ export class ChangePolicy extends Component<ChangePolicyProps, ChangePolicyState
 export default function (props: Omit<ChangePolicyProps, keyof DataSourceMenuProperties>) {
   const dataSourceMenuProperties = useContext(DataSourceMenuContext);
   useUpdateUrlWithDataSourceProperties();
-  return <ChangePolicy {...props} {...dataSourceMenuProperties} />;
+  const uiSettings = getUISettings();
+  const useUpdatedUX = uiSettings.get("home:useNewHomePage");
+  return <ChangePolicy {...props} {...dataSourceMenuProperties} useUpdatedUX={useUpdatedUX} />;
 }
diff --git a/public/pages/CreateIndex/containers/CreateIndex/CreateIndex.test.tsx b/public/pages/CreateIndex/containers/CreateIndex/CreateIndex.test.tsx
index eb86d4cae..6fbd899a9 100644
--- a/public/pages/CreateIndex/containers/CreateIndex/CreateIndex.test.tsx
+++ b/public/pages/CreateIndex/containers/CreateIndex/CreateIndex.test.tsx
@@ -15,6 +15,23 @@ import { BrowserServices } from "../../../../models/interfaces";
 import { ModalProvider, ModalRoot } from "../../../../components/Modal";
 import { ROUTES } from "../../../../utils/constants";
 import { CoreServicesConsumer, CoreServicesContext } from "../../../../components/core_services";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+
+jest.mock("../../../../services/Services", () => ({
+  ...jest.requireActual("../../../../services/Services"),
+  getUISettings: jest.fn(),
+  getApplication: jest.fn(),
+  getNavigationUI: jest.fn(),
+}));
+
+beforeEach(() => {
+  (getUISettings as jest.Mock).mockReturnValue({
+    get: jest.fn().mockReturnValue(false), // or false, depending on your test case
+  });
+  (getApplication as jest.Mock).mockReturnValue({});
+
+  (getNavigationUI as jest.Mock).mockReturnValue({});
+});
 
 function renderCreateIndexWithRouter(initialEntries = [ROUTES.CREATE_INDEX] as string[]) {
   return {
diff --git a/public/pages/CreateIndex/containers/CreateIndex/CreateIndex.tsx b/public/pages/CreateIndex/containers/CreateIndex/CreateIndex.tsx
index 4f64e7f39..968193746 100644
--- a/public/pages/CreateIndex/containers/CreateIndex/CreateIndex.tsx
+++ b/public/pages/CreateIndex/containers/CreateIndex/CreateIndex.tsx
@@ -11,9 +11,11 @@ import { BREADCRUMBS, IndicesUpdateMode, ROUTES } from "../../../../utils/consta
 import { CoreServicesContext } from "../../../../components/core_services";
 import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
 import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
+import { getUISettings } from "../../../../services/Services";
 
 interface CreateIndexPropsBase extends RouteComponentProps<{ index?: string; mode?: IndicesUpdateMode }> {
   isEdit?: boolean;
+  useUpdatedUX?: boolean;
 }
 
 interface CreateIndexProps extends CreateIndexPropsBase, DataSourceMenuProperties {}
@@ -31,11 +33,10 @@ export class CreateIndex extends Component<CreateIndexProps> {
 
   componentDidMount = async (): Promise<void> => {
     const isEdit = this.isEdit;
-    this.context.chrome.setBreadcrumbs([
-      BREADCRUMBS.INDEX_MANAGEMENT,
-      BREADCRUMBS.INDICES,
-      isEdit ? BREADCRUMBS.EDIT_INDEX : BREADCRUMBS.CREATE_INDEX,
-    ]);
+    const breadCrumbs = this.props.useUpdatedUX
+      ? [BREADCRUMBS.INDICES, isEdit ? BREADCRUMBS.EDIT_INDEX : BREADCRUMBS.CREATE_INDEX]
+      : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.INDICES, isEdit ? BREADCRUMBS.EDIT_INDEX : BREADCRUMBS.CREATE_INDEX];
+    this.context.chrome.setBreadcrumbs(breadCrumbs);
   };
 
   onCancel = (): void => {
@@ -45,7 +46,18 @@ export class CreateIndex extends Component<CreateIndexProps> {
   render() {
     const isEdit = this.isEdit;
 
-    return (
+    return this.props.useUpdatedUX ? (
+      <div style={{ padding: "0px 0px" }}>
+        <IndexForm
+          index={this.index}
+          mode={this.props.match.params.mode}
+          onCancel={this.onCancel}
+          onSubmitSuccess={() => this.props.history.push(ROUTES.INDICES)}
+          dataSourceId={this.props.dataSourceId}
+          useUpdatedUX={this.props.useUpdatedUX}
+        />
+      </div>
+    ) : (
       <div style={{ padding: "0px 50px" }}>
         <EuiTitle size="l">
           <h1>{isEdit ? "Edit" : "Create"} index</h1>
@@ -57,6 +69,7 @@ export class CreateIndex extends Component<CreateIndexProps> {
           onCancel={this.onCancel}
           onSubmitSuccess={() => this.props.history.push(ROUTES.INDICES)}
           dataSourceId={this.props.dataSourceId}
+          useUpdatedUX={this.props.useUpdatedUX}
         />
       </div>
     );
@@ -66,5 +79,7 @@ export class CreateIndex extends Component<CreateIndexProps> {
 export default function (props: CreateIndexPropsBase) {
   const dataSourceMenuProperties = useContext(DataSourceMenuContext);
   useUpdateUrlWithDataSourceProperties();
-  return <CreateIndex {...props} {...dataSourceMenuProperties} />;
+  const uiSettings = getUISettings();
+  const useUpdatedUX = uiSettings.get("home:useNewHomePage");
+  return <CreateIndex {...props} {...dataSourceMenuProperties} useUpdatedUX={useUpdatedUX} />;
 }
diff --git a/public/pages/CreateIndex/containers/IndexForm/index.tsx b/public/pages/CreateIndex/containers/IndexForm/index.tsx
index e4bdd0ede..f50334ca6 100644
--- a/public/pages/CreateIndex/containers/IndexForm/index.tsx
+++ b/public/pages/CreateIndex/containers/IndexForm/index.tsx
@@ -55,6 +55,7 @@ export interface IndexFormProps
   onCancel?: () => void;
   onSubmitSuccess?: (indexName: string) => void;
   hideButtons?: boolean;
+  useUpdatedUX?: boolean;
 }
 
 interface CreateIndexState {
@@ -423,7 +424,7 @@ export class IndexForm extends Component<IndexFormProps & { services: BrowserSer
 
   render() {
     const isEdit = this.isEdit;
-    const { hideButtons, readonly } = this.props;
+    const { hideButtons, readonly, useUpdatedUX } = this.props;
     const { indexDetail, isSubmitting, oldIndexDetail, loading } = this.state;
 
     if (loading) {
@@ -466,12 +467,18 @@ export class IndexForm extends Component<IndexFormProps & { services: BrowserSer
             <EuiSpacer />
             <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
               <EuiFlexItem grow={false}>
-                <EuiButtonEmpty onClick={this.onCancel} data-test-subj="createIndexCancelButton">
+                <EuiButtonEmpty size={useUpdatedUX ? "s" : undefined} onClick={this.onCancel} data-test-subj="createIndexCancelButton">
                   Cancel
                 </EuiButtonEmpty>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiButton fill onClick={this.onSubmit} isLoading={isSubmitting} data-test-subj="createIndexCreateButton">
+                <EuiButton
+                  fill
+                  size={useUpdatedUX ? "s" : undefined}
+                  onClick={this.onSubmit}
+                  isLoading={isSubmitting}
+                  data-test-subj="createIndexCreateButton"
+                >
                   {isEdit ? "Update" : "Create"}
                 </EuiButton>
               </EuiFlexItem>
diff --git a/public/pages/CreateIndexTemplate/containers/CreateIndexTemplate/CreateIndexTemplate.test.tsx b/public/pages/CreateIndexTemplate/containers/CreateIndexTemplate/CreateIndexTemplate.test.tsx
index c56b15170..bb19b1788 100644
--- a/public/pages/CreateIndexTemplate/containers/CreateIndexTemplate/CreateIndexTemplate.test.tsx
+++ b/public/pages/CreateIndexTemplate/containers/CreateIndexTemplate/CreateIndexTemplate.test.tsx
@@ -12,6 +12,23 @@ import { ServicesContext } from "../../../../services";
 import { browserServicesMock, coreServicesMock, apiCallerMock } from "../../../../../test/mocks";
 import { ROUTES } from "../../../../utils/constants";
 import { CoreServicesContext } from "../../../../components/core_services";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+
+jest.mock("../../../../services/Services", () => ({
+  ...jest.requireActual("../../../../services/Services"),
+  getUISettings: jest.fn(),
+  getApplication: jest.fn(),
+  getNavigationUI: jest.fn(),
+}));
+
+beforeEach(() => {
+  (getUISettings as jest.Mock).mockReturnValue({
+    get: jest.fn().mockReturnValue(false), // or false, depending on your test case
+  });
+  (getApplication as jest.Mock).mockReturnValue({});
+
+  (getNavigationUI as jest.Mock).mockReturnValue({});
+});
 
 function renderCreateIndexTemplateWithRouter(initialEntries = [ROUTES.CREATE_TEMPLATE] as string[]) {
   return {
diff --git a/public/pages/CreateIndexTemplate/containers/CreateIndexTemplate/CreateIndexTemplate.tsx b/public/pages/CreateIndexTemplate/containers/CreateIndexTemplate/CreateIndexTemplate.tsx
index 6ad7638a5..729815c00 100644
--- a/public/pages/CreateIndexTemplate/containers/CreateIndexTemplate/CreateIndexTemplate.tsx
+++ b/public/pages/CreateIndexTemplate/containers/CreateIndexTemplate/CreateIndexTemplate.tsx
@@ -11,13 +11,16 @@ import { BREADCRUMBS, ROUTES } from "../../../../utils/constants";
 import { CoreServicesContext } from "../../../../components/core_services";
 import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
 import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
+import { getUISettings } from "../../../../services/Services";
 
 interface CreateIndexTemplateProps
   extends RouteComponentProps<{
       template?: string;
       mode?: string;
     }>,
-    DataSourceMenuProperties {}
+    DataSourceMenuProperties {
+  useUpdatedUX?: boolean;
+}
 
 class CreateIndexTemplate extends Component<CreateIndexTemplateProps> {
   static contextType = CoreServicesContext;
@@ -46,7 +49,10 @@ class CreateIndexTemplate extends Component<CreateIndexTemplateProps> {
     } else {
       lastBread = BREADCRUMBS.CREATE_TEMPLATE;
     }
-    this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.TEMPLATES, lastBread]);
+    const breadCrumbs = this.props.useUpdatedUX
+      ? [BREADCRUMBS.NEW_TEMPLATES, lastBread]
+      : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.TEMPLATES, lastBread];
+    this.context.chrome.setBreadcrumbs(breadCrumbs);
   }
 
   componentDidUpdate(prevProps: Readonly<CreateIndexTemplateProps>): void {
@@ -64,7 +70,7 @@ class CreateIndexTemplate extends Component<CreateIndexTemplateProps> {
   };
 
   render() {
-    return (
+    return !this.props.useUpdatedUX ? (
       <div style={{ padding: "0px 50px" }}>
         <TemplateDetail
           history={this.props.history}
@@ -73,6 +79,19 @@ class CreateIndexTemplate extends Component<CreateIndexTemplateProps> {
           onCancel={this.onCancel}
           onSubmitSuccess={() => this.props.history.push(ROUTES.TEMPLATES)}
           dataSourceId={this.props.dataSourceId}
+          useUpdatedUX={this.props.useUpdatedUX}
+        />
+      </div>
+    ) : (
+      <div style={{ padding: "0px 0px" }}>
+        <TemplateDetail
+          history={this.props.history}
+          location={this.props.location}
+          templateName={this.template}
+          onCancel={this.onCancel}
+          onSubmitSuccess={() => this.props.history.push(ROUTES.TEMPLATES)}
+          dataSourceId={this.props.dataSourceId}
+          useUpdatedUX={this.props.useUpdatedUX}
         />
       </div>
     );
@@ -82,5 +101,7 @@ class CreateIndexTemplate extends Component<CreateIndexTemplateProps> {
 export default function (props: Omit<CreateIndexTemplateProps, keyof DataSourceMenuProperties>) {
   const dataSourceMenuProps = useContext(DataSourceMenuContext);
   useUpdateUrlWithDataSourceProperties();
-  return <CreateIndexTemplate {...props} {...dataSourceMenuProps} />;
+  const uiSettings = getUISettings();
+  const useUpdatedUX = uiSettings.get("home:useNewHomePage");
+  return <CreateIndexTemplate {...props} {...dataSourceMenuProps} useUpdatedUX={useUpdatedUX} />;
 }
diff --git a/public/pages/CreateIndexTemplate/containers/TemplateDetail/TemplateDetail.test.tsx b/public/pages/CreateIndexTemplate/containers/TemplateDetail/TemplateDetail.test.tsx
index 82e00563c..7b9a2dbad 100644
--- a/public/pages/CreateIndexTemplate/containers/TemplateDetail/TemplateDetail.test.tsx
+++ b/public/pages/CreateIndexTemplate/containers/TemplateDetail/TemplateDetail.test.tsx
@@ -14,6 +14,23 @@ import { browserServicesMock, coreServicesMock } from "../../../../../test/mocks
 import { CoreServicesContext } from "../../../../components/core_services";
 import { ROUTES } from "../../../../utils/constants";
 import { FieldInstance } from "../../../../lib/field";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+
+jest.mock("../../../../services/Services", () => ({
+  ...jest.requireActual("../../../../services/Services"),
+  getUISettings: jest.fn(),
+  getApplication: jest.fn(),
+  getNavigationUI: jest.fn(),
+}));
+
+beforeEach(() => {
+  (getUISettings as jest.Mock).mockReturnValue({
+    get: jest.fn().mockReturnValue(false), // or false, depending on your test case
+  });
+  (getApplication as jest.Mock).mockReturnValue({});
+
+  (getNavigationUI as jest.Mock).mockReturnValue({});
+});
 
 function renderCreateIndexTemplate(props: Omit<TemplateDetailProps, "history" | "location">) {
   return renderHook(() => {
diff --git a/public/pages/CreateIndexTemplate/containers/TemplateDetail/TemplateDetail.tsx b/public/pages/CreateIndexTemplate/containers/TemplateDetail/TemplateDetail.tsx
index a1c747e9b..f79077eab 100644
--- a/public/pages/CreateIndexTemplate/containers/TemplateDetail/TemplateDetail.tsx
+++ b/public/pages/CreateIndexTemplate/containers/TemplateDetail/TemplateDetail.tsx
@@ -7,6 +7,7 @@ import React, { forwardRef, useContext, useEffect, useImperativeHandle, useRef,
 import {
   EuiButton,
   EuiButtonEmpty,
+  EuiButtonIcon,
   EuiCodeBlock,
   EuiFlexGroup,
   EuiFlexItem,
@@ -14,6 +15,7 @@ import {
   EuiSpacer,
   EuiTab,
   EuiTabs,
+  EuiText,
   EuiTitle,
 } from "@elastic/eui";
 import queryString from "query-string";
@@ -43,6 +45,7 @@ import { diffJson } from "../../../../utils/helpers";
 import UnsavedChangesBottomBar from "../../../../components/UnsavedChangesBottomBar";
 import { IndexForm } from "../../../../containers/IndexForm";
 import { TABS_ENUM, tabs } from "../../constant";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
 
 export interface TemplateDetailProps {
   templateName?: string;
@@ -51,10 +54,11 @@ export interface TemplateDetailProps {
   history: RouteComponentProps["history"];
   location: RouteComponentProps["location"];
   dataSourceId: string;
+  useUpdatedUX?: boolean;
 }
 
 const TemplateDetail = (props: TemplateDetailProps, ref: Ref<FieldInstance>) => {
-  const { templateName, onCancel, onSubmitSuccess, history } = props;
+  const { templateName, onCancel, onSubmitSuccess, history, useUpdatedUX } = props;
   const isEdit = !!templateName;
   const services = useContext(ServicesContext) as BrowserServices;
   const coreServices = useContext(CoreServicesContext) as CoreStart;
@@ -191,77 +195,163 @@ const TemplateDetail = (props: TemplateDetailProps, ref: Ref<FieldInstance>) =>
       </EuiButton>
     </EuiFlexItem>
   );
+  const { HeaderControl } = getNavigationUI();
+  const { setAppDescriptionControls, setAppRightControls } = getApplication();
+
+  const descriptionData = [
+    {
+      renderComponent: (
+        <EuiText size="s" color="subdued">
+          Define an automated snapshot schedule and retention period with a snapshot policy.{" "}
+          <EuiLink external target="_blank" href={coreServices.docLinks.links.opensearch.indexTemplates.base}>
+            Learn more
+          </EuiLink>
+        </EuiText>
+      ),
+    },
+  ];
+
+  const HeaderRight = [
+    {
+      renderComponent: (
+        <>
+          <EuiButtonIcon display="base" iconType="trash" aria-label="Delete" color="danger" onClick={() => setVisible(true)} size="s" />
+          <DeleteTemplateModal
+            visible={visible}
+            selectedItems={[templateName]}
+            onClose={() => {
+              setVisible(false);
+            }}
+            onDelete={() => {
+              setVisible(false);
+              history.replace(ROUTES.TEMPLATES);
+            }}
+          />
+        </>
+      ),
+    },
+    {
+      renderComponent: (
+        <EuiButton
+          fill
+          size="s"
+          style={{ marginRight: 20 }}
+          onClick={() => {
+            const showValue: TemplateItemRemote = {
+              ...values,
+              template: IndexForm.transformIndexDetailToRemote(values.template),
+            };
+            Modal.show({
+              locale: {
+                ok: "Close",
+              },
+              style: {
+                width: 800,
+              },
+              "data-test-subj": "templateJSONDetailModal",
+              title: values.name,
+              content: (
+                <EuiCodeBlock language="json" isCopyable>
+                  {JSON.stringify(showValue, null, 2)}
+                </EuiCodeBlock>
+              ),
+            });
+          }}
+        >
+          View JSON
+        </EuiButton>
+      ),
+    },
+  ];
+
+  const Title = () => {
+    return !useUpdatedUX ? (
+      <>
+        <EuiFlexGroup alignItems="center">
+          <EuiFlexItem>
+            <EuiTitle size="l">
+              {isEdit ? <h1 title={values.name}>{templateName}</h1> : <h1>{isEdit ? "Edit" : "Create"} template</h1>}
+            </EuiTitle>
+            {isEdit ? null : (
+              <CustomFormRow
+                fullWidth
+                label=""
+                helpText={
+                  <div>
+                    Index templates let you initialize new indexes with predefined mappings and settings.{" "}
+                    <EuiLink external target="_blank" href={coreServices.docLinks.links.opensearch.indexTemplates.base}>
+                      Learn more
+                    </EuiLink>
+                  </div>
+                }
+              >
+                <></>
+              </CustomFormRow>
+            )}
+          </EuiFlexItem>
+          {isEdit ? (
+            <>
+              <EuiFlexItem grow={false} style={{ flexDirection: "row" }}>
+                <EuiButton
+                  style={{ marginRight: 20 }}
+                  onClick={() => {
+                    const showValue: TemplateItemRemote = {
+                      ...values,
+                      template: IndexForm.transformIndexDetailToRemote(values.template),
+                    };
+                    Modal.show({
+                      locale: {
+                        ok: "Close",
+                      },
+                      style: {
+                        width: 800,
+                      },
+                      "data-test-subj": "templateJSONDetailModal",
+                      title: values.name,
+                      content: (
+                        <EuiCodeBlock language="json" isCopyable>
+                          {JSON.stringify(showValue, null, 2)}
+                        </EuiCodeBlock>
+                      ),
+                    });
+                  }}
+                >
+                  View JSON
+                </EuiButton>
+                <EuiButton color="danger" onClick={() => setVisible(true)}>
+                  Delete
+                </EuiButton>
+                <DeleteTemplateModal
+                  visible={visible}
+                  selectedItems={[templateName]}
+                  onClose={() => {
+                    setVisible(false);
+                  }}
+                  onDelete={() => {
+                    setVisible(false);
+                    history.replace(ROUTES.TEMPLATES);
+                  }}
+                />
+              </EuiFlexItem>
+            </>
+          ) : null}
+        </EuiFlexGroup>
+        <EuiSpacer />
+      </>
+    ) : (
+      <>
+        {isEdit ? (
+          <HeaderControl controls={HeaderRight} setMountPoint={setAppRightControls} />
+        ) : (
+          <HeaderControl controls={descriptionData} setMountPoint={setAppDescriptionControls} />
+        )}
+      </>
+    );
+  };
 
   return (
     <>
-      <EuiFlexGroup alignItems="center">
-        <EuiFlexItem>
-          <EuiTitle size="l">
-            {isEdit ? <h1 title={values.name}>{templateName}</h1> : <h1>{isEdit ? "Edit" : "Create"} template</h1>}
-          </EuiTitle>
-          {isEdit ? null : (
-            <CustomFormRow
-              fullWidth
-              label=""
-              helpText={
-                <div>
-                  Index templates let you initialize new indexes with predefined mappings and settings.{" "}
-                  <EuiLink external target="_blank" href={coreServices.docLinks.links.opensearch.indexTemplates.base}>
-                    Learn more
-                  </EuiLink>
-                </div>
-              }
-            >
-              <></>
-            </CustomFormRow>
-          )}
-        </EuiFlexItem>
-        {isEdit ? (
-          <EuiFlexItem grow={false} style={{ flexDirection: "row" }}>
-            <EuiButton
-              style={{ marginRight: 20 }}
-              onClick={() => {
-                const showValue: TemplateItemRemote = {
-                  ...values,
-                  template: IndexForm.transformIndexDetailToRemote(values.template),
-                };
-                Modal.show({
-                  locale: {
-                    ok: "Close",
-                  },
-                  style: {
-                    width: 800,
-                  },
-                  "data-test-subj": "templateJSONDetailModal",
-                  title: values.name,
-                  content: (
-                    <EuiCodeBlock language="json" isCopyable>
-                      {JSON.stringify(showValue, null, 2)}
-                    </EuiCodeBlock>
-                  ),
-                });
-              }}
-            >
-              View JSON
-            </EuiButton>
-            <EuiButton color="danger" onClick={() => setVisible(true)}>
-              Delete
-            </EuiButton>
-            <DeleteTemplateModal
-              visible={visible}
-              selectedItems={[templateName]}
-              onClose={() => {
-                setVisible(false);
-              }}
-              onDelete={() => {
-                setVisible(false);
-                history.replace(ROUTES.TEMPLATES);
-              }}
-            />
-          </EuiFlexItem>
-        ) : null}
-      </EuiFlexGroup>
-      <EuiSpacer />
+      {Title()}
       {isEdit ? (
         <>
           <OverviewTemplate {...subCompontentProps} />
diff --git a/public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.test.tsx b/public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.test.tsx
index 02e176675..a75efb99f 100644
--- a/public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.test.tsx
+++ b/public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.test.tsx
@@ -15,6 +15,23 @@ import { ModalProvider, ModalRoot } from "../../../../components/Modal";
 import { BREADCRUMBS, ROUTES } from "../../../../utils/constants";
 import CreateTransformForm from "./CreateTransformForm";
 import { CoreServicesContext } from "../../../../components/core_services";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+
+jest.mock("../../../../services/Services", () => ({
+  ...jest.requireActual("../../../../services/Services"),
+  getUISettings: jest.fn(),
+  getApplication: jest.fn(),
+  getNavigationUI: jest.fn(),
+}));
+
+beforeEach(() => {
+  (getUISettings as jest.Mock).mockReturnValue({
+    get: jest.fn().mockReturnValue(false), // or false, depending on your test case
+  });
+  (getApplication as jest.Mock).mockReturnValue({});
+
+  (getNavigationUI as jest.Mock).mockReturnValue({});
+});
 
 const indices = [
   {
diff --git a/public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.tsx b/public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.tsx
index 644a01710..c984a880d 100644
--- a/public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.tsx
+++ b/public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.tsx
@@ -34,6 +34,7 @@ import {
   DataSourceMenuReadOnlyProperties,
 } from "../../../../services/DataSourceMenuContext";
 import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
+import { getUISettings } from "../../../../services/Services";
 
 interface CreateTransformFormProps extends RouteComponentProps, DataSourceMenuProperties, DataSourceMenuReadOnlyProperties {
   rollupService: RollupService;
@@ -135,7 +136,6 @@ export class CreateTransformForm extends Component<CreateTransformFormProps, Cre
 
   constructor(props: CreateTransformFormProps) {
     super(props);
-
     this.state = CreateTransformForm.baseState;
     this._next = this._next.bind(this);
     this._prev = this._prev.bind(this);
@@ -143,7 +143,12 @@ export class CreateTransformForm extends Component<CreateTransformFormProps, Cre
   }
 
   componentDidMount = async (): Promise<void> => {
-    this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.TRANSFORMS, BREADCRUMBS.CREATE_TRANSFORM]);
+    const uiSettings = getUISettings();
+    const useUpdatedUX = uiSettings.get("home:useNewHomePage");
+    const breadCrumbs = useUpdatedUX
+      ? [BREADCRUMBS.TRANSFORMS, BREADCRUMBS.CREATE_TRANSFORM]
+      : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.TRANSFORMS, BREADCRUMBS.CREATE_TRANSFORM];
+    this.context.chrome.setBreadcrumbs(breadCrumbs);
   };
 
   componentDidUpdate(prevProps: CreateTransformFormProps, prevState: Readonly<CreateTransformFormState>) {
@@ -585,6 +590,8 @@ export class CreateTransformForm extends Component<CreateTransformFormProps, Cre
       beenWarned,
       isLoading,
     } = this.state;
+    const uiSettings = getUISettings();
+    const useUpdatedUX = uiSettings.get("home:useNewHomePage");
     return (
       <div style={{ width: "100%" }}>
         <SetUpIndices
@@ -611,6 +618,7 @@ export class CreateTransformForm extends Component<CreateTransformFormProps, Cre
           fields={fields}
           fieldSelectedOption={fieldSelectedOption}
           beenWarned={beenWarned}
+          useUpdatedUX={useUpdatedUX}
         />
         <DefineTransformsStep
           {...this.props}
@@ -626,6 +634,7 @@ export class CreateTransformForm extends Component<CreateTransformFormProps, Cre
           onEditTransformation={this.onEditTransformation}
           onRemoveTransformation={this.onRemoveTransformation}
           previewTransform={previewTransform}
+          useUpdatedUX={useUpdatedUX}
         />
         <SpecifyScheduleStep
           {...this.props}
@@ -641,6 +650,7 @@ export class CreateTransformForm extends Component<CreateTransformFormProps, Cre
           onChangeIntervalTime={this.onChangeIntervalTime}
           onChangePage={this.onChangePage}
           onChangeIntervalTimeunit={this.onChangeIntervalTimeunit}
+          useUpdatedUX={useUpdatedUX}
         />
         <ReviewAndCreateStep
           {...this.props}
@@ -665,6 +675,7 @@ export class CreateTransformForm extends Component<CreateTransformFormProps, Cre
           currentStep={this.state.currentStep}
           onChangeStep={this.onChangeStep}
           submitError={submitError}
+          useUpdatedUX={useUpdatedUX}
         />
         <EuiFlexGroup alignItems="center" justifyContent="flexEnd" style={{ padding: "5px 50px" }}>
           <EuiFlexItem grow={false}>
diff --git a/public/pages/CreateTransform/containers/DefineTransformsStep/DefineTransformsStep.tsx b/public/pages/CreateTransform/containers/DefineTransformsStep/DefineTransformsStep.tsx
index 9a0cbb039..fe7419ef4 100644
--- a/public/pages/CreateTransform/containers/DefineTransformsStep/DefineTransformsStep.tsx
+++ b/public/pages/CreateTransform/containers/DefineTransformsStep/DefineTransformsStep.tsx
@@ -27,6 +27,7 @@ interface DefineTransformsStepProps extends RouteComponentProps {
   onEditTransformation: (oldName: string, newName: string) => void;
   onRemoveTransformation: (name: string) => void;
   previewTransform: any[];
+  useUpdatedUX: boolean;
 }
 
 export default class DefineTransformsStep extends Component<DefineTransformsStepProps> {
@@ -54,20 +55,31 @@ export default class DefineTransformsStep extends Component<DefineTransformsStep
       onAggregationSelectionChange,
       onEditTransformation,
       onRemoveTransformation,
+      useUpdatedUX,
     } = this.props;
     if (currentStep !== 2) return null;
 
+    const Title = !useUpdatedUX
+      ? () => {
+          return (
+            <>
+              <EuiTitle size="l">
+                <h1>Define transform</h1>
+              </EuiTitle>
+              <EuiSpacer />
+            </>
+          );
+        }
+      : () => {};
+
     return (
-      <div style={{ padding: "5px 50px" }}>
+      <div style={this.props.useUpdatedUX ? { padding: "0px" } : { padding: "5px 50px" }}>
         <EuiFlexGroup>
           <EuiFlexItem style={{ maxWidth: 300 }} grow={false}>
             <CreateTransformSteps step={2} />
           </EuiFlexItem>
           <EuiFlexItem style={{ overflow: "auto", flex: 1 }} grow={false}>
-            <EuiTitle size="l">
-              <h1>Define transform</h1>
-            </EuiTitle>
-            <EuiSpacer />
+            {Title()}
             <DefineTransforms
               {...this.props}
               transformService={transformService}
diff --git a/public/pages/CreateTransform/containers/ReviewAndCreateStep/ReviewAndCreateStep.tsx b/public/pages/CreateTransform/containers/ReviewAndCreateStep/ReviewAndCreateStep.tsx
index 26fdf6ae7..e75ea6efe 100644
--- a/public/pages/CreateTransform/containers/ReviewAndCreateStep/ReviewAndCreateStep.tsx
+++ b/public/pages/CreateTransform/containers/ReviewAndCreateStep/ReviewAndCreateStep.tsx
@@ -14,6 +14,7 @@ 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;
@@ -40,6 +41,7 @@ interface ReviewAndCreateStepProps extends RouteComponentProps {
 
   interval: number;
   intervalTimeunit: string;
+  useUpdatedUX: boolean;
 }
 
 export default class ReviewAndCreateStep extends Component<ReviewAndCreateStepProps> {
@@ -59,17 +61,27 @@ export default class ReviewAndCreateStep extends Component<ReviewAndCreateStepPr
   render() {
     if (this.props.currentStep != 4) return null;
 
+    const Title = !this.props.useUpdatedUX
+      ? () => {
+          return (
+            <>
+              <EuiTitle size="l">
+                <h1>Review and Create</h1>
+              </EuiTitle>
+              <EuiSpacer />
+            </>
+          );
+        }
+      : () => {};
+
     return (
-      <div style={{ padding: "5px 50px" }}>
+      <div style={this.props.useUpdatedUX ? { padding: "0px" } : { padding: "5px 50px" }}>
         <EuiFlexGroup>
           <EuiFlexItem style={{ maxWidth: 300 }} grow={false}>
             <CreateTransformSteps step={4} />
           </EuiFlexItem>
           <EuiFlexItem style={{ overflow: "auto", flex: 1 }} grow={false}>
-            <EuiTitle size="l">
-              <h1>Review and create</h1>
-            </EuiTitle>
-            <EuiSpacer />
+            {Title()}
             <JobNameAndIndices {...this.props} />
             <EuiSpacer />
             <ReviewDefinition {...this.props} notifications={this.context.notifications} sourceIndex={this.props.sourceIndex[0].label} />
diff --git a/public/pages/CreateTransform/containers/SetUpIndicesStep/SetUpIndicesStep.tsx b/public/pages/CreateTransform/containers/SetUpIndicesStep/SetUpIndicesStep.tsx
index b4689d0b9..f6ca048a1 100644
--- a/public/pages/CreateTransform/containers/SetUpIndicesStep/SetUpIndicesStep.tsx
+++ b/public/pages/CreateTransform/containers/SetUpIndicesStep/SetUpIndicesStep.tsx
@@ -39,6 +39,7 @@ interface SetUpIndicesStepProps extends RouteComponentProps, DataSourceMenuPrope
   fields: FieldItem[];
   fieldSelectedOption: string;
   beenWarned: boolean;
+  useUpdatedUX: boolean;
 }
 
 export default class SetUpIndicesStep extends Component<SetUpIndicesStepProps> {
@@ -47,17 +48,27 @@ export default class SetUpIndicesStep extends Component<SetUpIndicesStepProps> {
       return null;
     }
 
+    const Title = !this.props.useUpdatedUX
+      ? () => {
+          return (
+            <>
+              <EuiTitle size="l">
+                <h1>Set up indices</h1>
+              </EuiTitle>
+              <EuiSpacer />
+            </>
+          );
+        }
+      : () => {};
+
     return (
-      <div style={{ padding: "5px 50px" }}>
+      <div style={this.props.useUpdatedUX ? { padding: "0px" } : { padding: "5px 50px" }}>
         <EuiFlexGroup>
           <EuiFlexItem style={{ maxWidth: 300 }} grow={false}>
             <CreateTransformSteps step={1} />
           </EuiFlexItem>
           <EuiFlexItem>
-            <EuiTitle size="l">
-              <h1>Set up indices</h1>
-            </EuiTitle>
-            <EuiSpacer />
+            {Title()}
             <ConfigureTransform isEdit={false} {...this.props} />
             <EuiSpacer />
             <TransformIndices key={this.props.dataSourceId} {...this.props} />
diff --git a/public/pages/CreateTransform/containers/SpecifyScheduleStep/SpecifyScheduleStep.tsx b/public/pages/CreateTransform/containers/SpecifyScheduleStep/SpecifyScheduleStep.tsx
index ac38c6ea3..307070bb9 100644
--- a/public/pages/CreateTransform/containers/SpecifyScheduleStep/SpecifyScheduleStep.tsx
+++ b/public/pages/CreateTransform/containers/SpecifyScheduleStep/SpecifyScheduleStep.tsx
@@ -29,6 +29,7 @@ interface SpecifyScheduleStepProps extends RouteComponentProps {
   onChangeIntervalTime: (e: ChangeEvent<HTMLInputElement>) => void;
   onChangePage: (e: ChangeEvent<HTMLInputElement>) => void;
   onChangeIntervalTimeunit: (e: ChangeEvent<HTMLSelectElement>) => void;
+  useUpdatedUX: boolean;
 }
 
 interface SpecifyScheduleStepState {
@@ -120,19 +121,31 @@ export default class SpecifyScheduleStep extends Component<SpecifyScheduleStepPr
       onChangeIntervalTime,
       onChangePage,
       onChangeIntervalTimeunit,
+      useUpdatedUX,
     } = this.props;
     const { transformId, transformIdError } = this.state;
+
+    const Title = !useUpdatedUX
+      ? () => {
+          return (
+            <>
+              <EuiTitle size="l">
+                <h1>Specify Schedule</h1>
+              </EuiTitle>
+              <EuiSpacer />
+            </>
+          );
+        }
+      : () => {};
+
     return (
-      <div style={{ padding: "5px 50px" }}>
+      <div style={this.props.useUpdatedUX ? { padding: "0px" } : { padding: "5px 50px" }}>
         <EuiFlexGroup>
           <EuiFlexItem style={{ maxWidth: 300 }} grow={false}>
             <CreateTransformSteps step={3} />
           </EuiFlexItem>
           <EuiFlexItem>
-            <EuiTitle size="l">
-              <h1>Specify Schedule</h1>
-            </EuiTitle>
-            <EuiSpacer />
+            {Title()}
             <Schedule
               {...this.props}
               isEdit={false}
diff --git a/public/pages/IndexDetail/containers/IndexDetail/IndexDetail.test.tsx b/public/pages/IndexDetail/containers/IndexDetail/IndexDetail.test.tsx
index 4d7c98176..1f2087d93 100644
--- a/public/pages/IndexDetail/containers/IndexDetail/IndexDetail.test.tsx
+++ b/public/pages/IndexDetail/containers/IndexDetail/IndexDetail.test.tsx
@@ -14,6 +14,23 @@ import IndexDetail, { IndexDetailModalProps } from "./IndexDetail";
 import { ModalProvider } from "../../../../components/Modal";
 import { ServicesContext } from "../../../../services";
 import { CoreServicesContext } from "../../../../components/core_services";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+
+jest.mock("../../../../services/Services", () => ({
+  ...jest.requireActual("../../../../services/Services"),
+  getUISettings: jest.fn(),
+  getApplication: jest.fn(),
+  getNavigationUI: jest.fn(),
+}));
+
+beforeEach(() => {
+  (getUISettings as jest.Mock).mockReturnValue({
+    get: jest.fn().mockReturnValue(false), // or false, depending on your test case
+  });
+  (getApplication as jest.Mock).mockReturnValue({});
+
+  (getNavigationUI as jest.Mock).mockReturnValue({});
+});
 
 function renderWithRouter(props: Omit<IndexDetailModalProps, keyof RouteComponentProps>, initialEntries: string[]) {
   return {
diff --git a/public/pages/IndexDetail/containers/IndexDetail/IndexDetail.tsx b/public/pages/IndexDetail/containers/IndexDetail/IndexDetail.tsx
index cf798138b..8c7422f56 100644
--- a/public/pages/IndexDetail/containers/IndexDetail/IndexDetail.tsx
+++ b/public/pages/IndexDetail/containers/IndexDetail/IndexDetail.tsx
@@ -31,6 +31,8 @@ import { IFinalDetail } from "./interface";
 import { OVERVIEW_DISPLAY_INFO } from "./constants";
 import { EVENT_MAP, destroyListener, listenEvent } from "../../../../JobHandler";
 import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+import { TopNavControlButtonData, TopNavControlComponentData } from "src/plugins/navigation/public";
 
 export interface IndexDetailModalProps extends RouteComponentProps<{ index: string }> {}
 
@@ -215,16 +217,30 @@ export default function IndexDetail(props: IndexDetailModalProps) {
 
   const [selectedTab, setSelectedTab] = useState<EuiTabbedContentTab & { mode: IndicesUpdateMode }>(tabs[0]);
 
+  const { HeaderControl } = getNavigationUI();
+  const { setAppRightControls } = getApplication();
+  const uiSettings = getUISettings();
+  const useUpdatedUX = uiSettings.get("home:useNewHomePage");
+
   useEffect(() => {
     refreshDetails();
-    coreService?.chrome.setBreadcrumbs([
-      BREADCRUMBS.INDEX_MANAGEMENT,
-      BREADCRUMBS.INDICES,
-      {
-        text: index,
-        href: `#${props.location.pathname}`,
-      },
-    ]);
+    const breadCrumbs = useUpdatedUX
+      ? [
+          BREADCRUMBS.INDICES,
+          {
+            text: index,
+            href: `#${props.location.pathname}`,
+          },
+        ]
+      : [
+          BREADCRUMBS.INDEX_MANAGEMENT,
+          BREADCRUMBS.INDICES,
+          {
+            text: index,
+            href: `#${props.location.pathname}`,
+          },
+        ];
+    coreService?.chrome.setBreadcrumbs(breadCrumbs);
   }, []);
 
   useEffect(() => {
@@ -238,7 +254,87 @@ export default function IndexDetail(props: IndexDetailModalProps) {
     return null;
   }
 
-  return (
+  const Common = () => {
+    return (
+      <>
+        <ContentPanel title="Overview" titleSize="s">
+          <EuiDescriptionList>
+            <EuiSpacer />
+            <div>
+              {OVERVIEW_DISPLAY_INFO.map((item) => {
+                let valueContent = null;
+                if (typeof item.value === "string") {
+                  valueContent = <span>{get(finalDetail, item.value)}</span>;
+                } else {
+                  const ValueComponent = item.value;
+                  valueContent = <ValueComponent detail={finalDetail} />;
+                }
+                return (
+                  <div
+                    style={{ display: "inline-block", width: "33%", verticalAlign: "top", marginBottom: "20px", padding: "0 1%" }}
+                    key={item.label}
+                    data-test-subj={`indexDetailOverviewItem-${item.label}`}
+                  >
+                    <EuiDescriptionListTitle>{item.label}</EuiDescriptionListTitle>
+                    <EuiDescriptionListDescription style={{ wordBreak: item.label === "Index name" ? "break-word" : undefined }}>
+                      {valueContent}
+                    </EuiDescriptionListDescription>
+                  </div>
+                );
+              })}
+            </div>
+          </EuiDescriptionList>
+        </ContentPanel>
+        <EuiSpacer />
+        <EuiTabbedContent
+          selectedTab={selectedTab}
+          onTabClick={(tab) => {
+            if (ref.current?.hasUnsavedChanges?.(selectedTab.mode)) {
+              Modal.show({
+                title: "You have unsaved changes.",
+                content: "Are you sure you want to leave this tab?",
+                type: "confirm",
+                locale: {
+                  confirm: "Stay",
+                  cancel: "Leave without changes",
+                },
+                onCancel: () => {
+                  setSelectedTab(tab as any);
+                },
+                footer: ["cancel", "confirm"],
+              });
+            } else {
+              setSelectedTab(tab as any);
+            }
+          }}
+          tabs={tabs}
+        />
+      </>
+    );
+  };
+
+  return useUpdatedUX ? (
+    <>
+      <HeaderControl
+        setMountPoint={setAppRightControls}
+        controls={[
+          {
+            renderComponent: (
+              <IndicesActions
+                selectedItems={[record]}
+                history={props.history}
+                onDelete={() => props.history.replace(ROUTES.INDICES)}
+                onClose={refreshDetails}
+                onShrink={() => props.history.replace(ROUTES.INDICES)}
+                getIndices={async () => {}}
+              />
+            ),
+          } as TopNavControlComponentData,
+        ]}
+      />
+      {Common()}
+    </>
+  ) : (
     <>
       <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
         <EuiTitle size="m">
@@ -254,58 +350,7 @@ export default function IndexDetail(props: IndexDetailModalProps) {
         />
       </div>
       <EuiSpacer />
-      <ContentPanel title="Overview" titleSize="s">
-        <EuiDescriptionList>
-          <EuiSpacer />
-          <div>
-            {OVERVIEW_DISPLAY_INFO.map((item) => {
-              let valueContent = null;
-              if (typeof item.value === "string") {
-                valueContent = <span>{get(finalDetail, item.value)}</span>;
-              } else {
-                const ValueComponent = item.value;
-                valueContent = <ValueComponent detail={finalDetail} />;
-              }
-              return (
-                <div
-                  style={{ display: "inline-block", width: "33%", verticalAlign: "top", marginBottom: "20px", padding: "0 1%" }}
-                  key={item.label}
-                  data-test-subj={`indexDetailOverviewItem-${item.label}`}
-                >
-                  <EuiDescriptionListTitle>{item.label}</EuiDescriptionListTitle>
-                  <EuiDescriptionListDescription style={{ wordBreak: item.label === "Index name" ? "break-word" : undefined }}>
-                    {valueContent}
-                  </EuiDescriptionListDescription>
-                </div>
-              );
-            })}
-          </div>
-        </EuiDescriptionList>
-      </ContentPanel>
-      <EuiSpacer />
-      <EuiTabbedContent
-        selectedTab={selectedTab}
-        onTabClick={(tab) => {
-          if (ref.current?.hasUnsavedChanges?.(selectedTab.mode)) {
-            Modal.show({
-              title: "You have unsaved changes.",
-              content: "Are you sure you want to leave this tab?",
-              type: "confirm",
-              locale: {
-                confirm: "Stay",
-                cancel: "Leave without changes",
-              },
-              onCancel: () => {
-                setSelectedTab(tab as any);
-              },
-              footer: ["cancel", "confirm"],
-            });
-          } else {
-            setSelectedTab(tab as any);
-          }
-        }}
-        tabs={tabs}
-      />
+      {Common()}
     </>
   );
 }
diff --git a/public/pages/Indices/components/IndexControls/IndexControls.test.tsx b/public/pages/Indices/components/IndexControls/IndexControls.test.tsx
index b177e13e6..7aaeea8e8 100644
--- a/public/pages/Indices/components/IndexControls/IndexControls.test.tsx
+++ b/public/pages/Indices/components/IndexControls/IndexControls.test.tsx
@@ -9,6 +9,23 @@ import { render, fireEvent, waitFor } from "@testing-library/react";
 // @ts-ignore
 import userEvent from "@testing-library/user-event";
 import IndexControls from "./IndexControls";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+
+jest.mock("../../../../services/Services", () => ({
+  ...jest.requireActual("../../../../services/Services"),
+  getUISettings: jest.fn(),
+  getApplication: jest.fn(),
+  getNavigationUI: jest.fn(),
+}));
+
+beforeEach(() => {
+  (getUISettings as jest.Mock).mockReturnValue({
+    get: jest.fn().mockReturnValue(false), // or false, depending on your test case
+  });
+  (getApplication as jest.Mock).mockReturnValue({});
+
+  (getNavigationUI as jest.Mock).mockReturnValue({});
+});
 
 describe("<IndexControls /> spec", () => {
   it("renders the component", async () => {
diff --git a/public/pages/Indices/components/IndexControls/IndexControls.tsx b/public/pages/Indices/components/IndexControls/IndexControls.tsx
index 346c53343..e69a8d08c 100644
--- a/public/pages/Indices/components/IndexControls/IndexControls.tsx
+++ b/public/pages/Indices/components/IndexControls/IndexControls.tsx
@@ -4,8 +4,21 @@
  */
 
 import React, { Component } from "react";
-import { ArgsWithError, ArgsWithQuery, EuiFlexGroup, EuiFlexItem, EuiSearchBar, EuiSwitch } from "@elastic/eui";
-import { DataStream } from "../../../../../server/models/interfaces";
+import {
+  ArgsWithError,
+  ArgsWithQuery,
+  EuiButton,
+  EuiButtonIcon,
+  EuiFlexGroup,
+  EuiSpacer,
+  EuiFlexItem,
+  EuiSearchBar,
+  EuiSwitch,
+  EuiButtonEmpty,
+} from "@elastic/eui";
+import { DataStream, ManagedCatIndex } from "../../../../../server/models/interfaces";
+import IndicesActions from "../../containers/IndicesActions";
+import { getUISettings } from "../../../../services/Services";
 
 interface IndexControlsProps {
   search: string;
@@ -14,6 +27,7 @@ interface IndexControlsProps {
   onRefresh: () => Promise<void>;
   getDataStreams: () => Promise<DataStream[]>;
   toggleShowDataStreams: () => void;
+  selectedItems: ManagedCatIndex[];
 }
 
 interface IndexControlsState {
@@ -36,7 +50,7 @@ export default class IndexControls extends Component<IndexControlsProps, IndexCo
   };
 
   render() {
-    const { search, onSearchChange, showDataStreams, toggleShowDataStreams } = this.props;
+    const { search, onSearchChange, showDataStreams, toggleShowDataStreams, onRefresh, selectedItems } = this.props;
 
     const schema = {
       strict: true,
@@ -64,7 +78,44 @@ export default class IndexControls extends Component<IndexControlsProps, IndexCo
         ]
       : undefined;
 
-    return (
+    const uiSettings = getUISettings();
+    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}>
+          <EuiSwitch
+            compressed
+            label="Show data stream indexes"
+            checked={showDataStreams}
+            onChange={toggleShowDataStreams}
+            data-test-subj="toggleShowDataStreams"
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    ) : (
       <EuiFlexGroup style={{ padding: "0px 5px" }} alignItems="center">
         <EuiFlexItem>
           <EuiSearchBar
diff --git a/public/pages/Indices/containers/Indices/Indices.test.tsx b/public/pages/Indices/containers/Indices/Indices.test.tsx
index 6610525c9..0b3faed96 100644
--- a/public/pages/Indices/containers/Indices/Indices.test.tsx
+++ b/public/pages/Indices/containers/Indices/Indices.test.tsx
@@ -18,6 +18,23 @@ import { ServicesConsumer, ServicesContext } from "../../../../services";
 import { BREADCRUMBS, ROUTES } from "../../../../utils/constants";
 import { CoreServicesConsumer, CoreServicesContext } from "../../../../components/core_services";
 import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+
+jest.mock("../../../../services/Services", () => ({
+  ...jest.requireActual("../../../../services/Services"),
+  getUISettings: jest.fn(),
+  getApplication: jest.fn(),
+  getNavigationUI: jest.fn(),
+}));
+
+beforeEach(() => {
+  (getUISettings as jest.Mock).mockReturnValue({
+    get: jest.fn().mockReturnValue(false), // or false, depending on your test case
+  });
+  (getApplication as jest.Mock).mockReturnValue({});
+
+  (getNavigationUI as jest.Mock).mockReturnValue({});
+});
 
 function renderWithRouter(
   Component: React.ComponentType<any>,
diff --git a/public/pages/Indices/containers/Indices/Indices.tsx b/public/pages/Indices/containers/Indices/Indices.tsx
index 235bbddb2..7978958ca 100644
--- a/public/pages/Indices/containers/Indices/Indices.tsx
+++ b/public/pages/Indices/containers/Indices/Indices.tsx
@@ -20,6 +20,7 @@ import {
   ArgsWithError,
   ArgsWithQuery,
   Query,
+  EuiTitle,
 } from "@elastic/eui";
 import { ContentPanel, ContentPanelActions } from "../../../../components/ContentPanel";
 import IndexControls from "../../components/IndexControls";
@@ -30,7 +31,7 @@ import CommonService from "../../../../services/CommonService";
 import { DataStream, ManagedCatIndex } from "../../../../../server/models/interfaces";
 import { getURLQueryParams } from "../../utils/helpers";
 import { IndicesQueryParams } from "../../models/interfaces";
-import { BREADCRUMBS, ROUTES } from "../../../../utils/constants";
+import { BREADCRUMBS, PLUGIN_NAME, ROUTES } from "../../../../utils/constants";
 import { getErrorMessage } from "../../../../utils/helpers";
 import { CoreServicesContext } from "../../../../components/core_services";
 import { SECURITY_EXCEPTION_PREFIX } from "../../../../../server/utils/constants";
@@ -39,6 +40,9 @@ import { destroyListener, EVENT_MAP, listenEvent } from "../../../../JobHandler"
 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";
 
 interface IndicesProps extends RouteComponentProps, DataSourceMenuProperties {
   indexService: IndexService;
@@ -58,6 +62,7 @@ interface IndicesState extends DataSourceMenuProperties {
   loadingIndices: boolean;
   showDataStreams: boolean;
   isDataStreamColumnVisible: boolean;
+  useUpdatedUX: boolean;
 }
 
 export class Indices extends MDSEnabledComponent<IndicesProps, IndicesState> {
@@ -66,6 +71,8 @@ export class Indices extends MDSEnabledComponent<IndicesProps, IndicesState> {
   constructor(props: IndicesProps) {
     super(props);
     const { from, size, search, sortField, sortDirection, showDataStreams } = getURLQueryParams(this.props.location);
+    const uiSettings = getUISettings();
+    const useUpdatedUX = uiSettings.get("home:useNewHomePage");
     this.state = {
       ...this.state,
       totalIndices: 0,
@@ -80,18 +87,25 @@ export class Indices extends MDSEnabledComponent<IndicesProps, IndicesState> {
       loadingIndices: true,
       showDataStreams,
       isDataStreamColumnVisible: showDataStreams,
+      useUpdatedUX: useUpdatedUX,
     };
 
     this.getIndices = _.debounce(this.getIndices, 500, { leading: true });
   }
 
   async componentDidMount() {
-    this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.INDICES]);
+    const breadCrumbs = this.state.useUpdatedUX ? [BREADCRUMBS.INDICES] : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.INDICES];
+    this.context.chrome.setBreadcrumbs(breadCrumbs);
     listenEvent(EVENT_MAP.REINDEX_COMPLETE, this.getIndices);
     listenEvent(EVENT_MAP.SHRINK_COMPLETE, this.getIndices);
     listenEvent(EVENT_MAP.SPLIT_COMPLETE, this.getIndices);
     listenEvent(EVENT_MAP.OPEN_COMPLETE, this.getIndices);
     await this.getIndices();
+    if (this.state.useUpdatedUX) {
+      this.context.chrome.setBreadcrumbs([
+        { text: BREADCRUMBS.INDICES.text.concat(` (${this.state.totalIndices})`), href: BREADCRUMBS.INDICES.href },
+      ]);
+    }
   }
 
   componentWillUnmount(): void {
@@ -107,6 +121,11 @@ export class Indices extends MDSEnabledComponent<IndicesProps, IndicesState> {
     if (!_.isEqual(prevQuery, currQuery)) {
       await this.getIndices();
     }
+    if (this.state.useUpdatedUX) {
+      this.context.chrome.setBreadcrumbs([
+        { text: BREADCRUMBS.INDICES.text.concat(` (${this.state.totalIndices})`), href: BREADCRUMBS.INDICES.href },
+      ]);
+    }
   }
 
   getQueryObjectFromState({
@@ -248,9 +267,69 @@ export class Indices extends MDSEnabledComponent<IndicesProps, IndicesState> {
       onSelectionChange: this.onSelectionChange,
     };
 
+    const { HeaderControl } = getNavigationUI();
+    const { setAppRightControls } = getApplication();
+
     const { history } = this.props;
 
-    return (
+    return this.state.useUpdatedUX ? (
+      <>
+        <HeaderControl
+          setMountPoint={setAppRightControls}
+          controls={[
+            {
+              id: "Notification settings",
+              label: "Notification Settings",
+              fill: false,
+              // href: `${PLUGIN_NAME}#/create-index`,
+              testId: "notificationSettingsButton",
+              controlType: "button",
+              color: "secondary",
+            } as TopNavControlButtonData,
+            {
+              id: "Create index",
+              label: "Create Index",
+              fill: true,
+              iconType: "plus",
+              href: `${PLUGIN_NAME}#/create-index`,
+              testId: "createIndexButton",
+              controlType: "button",
+              color: "primary",
+            } as TopNavControlButtonData,
+          ]}
+        />
+        <div id="test" style={{ padding: "0px" }}>
+          <ContentPanel>
+            <IndexControls
+              search={search}
+              onSearchChange={this.onSearchChange}
+              onRefresh={this.getIndices}
+              showDataStreams={showDataStreams}
+              getDataStreams={this.getDataStreams}
+              toggleShowDataStreams={this.toggleShowDataStreams}
+              selectedItems={this.state.selectedItems}
+            />
+
+            <EuiBasicTable
+              columns={indicesColumns(isDataStreamColumnVisible, {
+                history,
+              })}
+              loading={this.state.loadingIndices}
+              isSelectable={true}
+              itemId="index"
+              items={indices}
+              noItemsMessage={
+                <IndexEmptyPrompt filterIsApplied={filterIsApplied} loading={loadingIndices} resetFilters={this.resetFilters} />
+              }
+              onChange={this.onTableChange}
+              pagination={pagination}
+              selection={selection}
+              sorting={sorting}
+            />
+          </ContentPanel>
+        </div>
+      </>
+    ) : (
       <ContentPanel
         actions={
           <ContentPanelActions
@@ -298,6 +377,7 @@ export class Indices extends MDSEnabledComponent<IndicesProps, IndicesState> {
           showDataStreams={showDataStreams}
           getDataStreams={this.getDataStreams}
           toggleShowDataStreams={this.toggleShowDataStreams}
+          selectedItems={this.state.selectedItems}
         />
 
         <EuiHorizontalRule margin="xs" />
diff --git a/public/pages/Indices/containers/IndicesActions/IndicesActions.test.tsx b/public/pages/Indices/containers/IndicesActions/IndicesActions.test.tsx
index 5af156c85..e5a505b47 100644
--- a/public/pages/Indices/containers/IndicesActions/IndicesActions.test.tsx
+++ b/public/pages/Indices/containers/IndicesActions/IndicesActions.test.tsx
@@ -17,6 +17,23 @@ import { CoreServicesContext } from "../../../../components/core_services";
 import { createMemoryHistory } from "history";
 import { ROUTES } from "../../../../utils/constants";
 import { buildMockApiCallerForFlush, selectedIndices } from "../../../../containers/FlushIndexModal/FlushIndexModalTestHelper";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+
+jest.mock("../../../../services/Services", () => ({
+  ...jest.requireActual("../../../../services/Services"),
+  getUISettings: jest.fn(),
+  getApplication: jest.fn(),
+  getNavigationUI: jest.fn(),
+}));
+
+beforeEach(() => {
+  (getUISettings as jest.Mock).mockReturnValue({
+    get: jest.fn().mockReturnValue(false), // or false, depending on your test case
+  });
+  (getApplication as jest.Mock).mockReturnValue({});
+
+  (getNavigationUI as jest.Mock).mockReturnValue({});
+});
 
 function renderWithRouter(
   props: Omit<IndicesActionsProps, "history"> & { history?: IndicesActionsProps["history"]; location?: RouteComponentProps["location"] }
diff --git a/public/pages/Indices/containers/IndicesActions/index.tsx b/public/pages/Indices/containers/IndicesActions/index.tsx
index b388fc547..366cb3c94 100644
--- a/public/pages/Indices/containers/IndicesActions/index.tsx
+++ b/public/pages/Indices/containers/IndicesActions/index.tsx
@@ -23,6 +23,7 @@ import { ROUTES, INDEX_OP_TARGET_TYPE } from "../../../../utils/constants";
 import { RouteComponentProps } from "react-router-dom";
 import { openIndices } from "../../utils/helpers";
 import RefreshActionModal from "../../../../containers/RefreshAction";
+import { getUISettings } from "../../../../services/Services";
 
 export interface IndicesActionsProps extends Pick<RouteComponentProps, "history"> {
   selectedItems: ManagedCatIndex[];
@@ -125,6 +126,10 @@ export default function IndicesActions(props: IndicesActionsProps) {
   };
 
   const renderKey = useMemo(() => Date.now(), [selectedItems]);
+  const uiSettings = getUISettings();
+  const useUpdatedUX = uiSettings.get("home:useNewHomePage");
+
+  const size = useUpdatedUX ? "s" : undefined;
 
   return (
     <>
@@ -134,7 +139,7 @@ export default function IndicesActions(props: IndicesActionsProps) {
             data-test-subj="moreAction"
             panelPaddingSize="none"
             button={
-              <EuiButton iconType="arrowDown" iconSide="right">
+              <EuiButton iconType="arrowDown" iconSide="right" size={size}>
                 Actions
               </EuiButton>
             }
diff --git a/public/pages/ManagedIndices/components/ManagedIndexControls/ManagedIndexControls.test.tsx b/public/pages/ManagedIndices/components/ManagedIndexControls/ManagedIndexControls.test.tsx
index 8bc2d1886..c51d0fabc 100644
--- a/public/pages/ManagedIndices/components/ManagedIndexControls/ManagedIndexControls.test.tsx
+++ b/public/pages/ManagedIndices/components/ManagedIndexControls/ManagedIndexControls.test.tsx
@@ -9,6 +9,23 @@ import { render, fireEvent, waitFor } from "@testing-library/react";
 // @ts-ignore
 import userEvent from "@testing-library/user-event";
 import ManagedIndexControls from "./ManagedIndexControls";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+
+jest.mock("../../../../services/Services", () => ({
+  ...jest.requireActual("../../../../services/Services"),
+  getUISettings: jest.fn(),
+  getApplication: jest.fn(),
+  getNavigationUI: jest.fn(),
+}));
+
+beforeEach(() => {
+  (getUISettings as jest.Mock).mockReturnValue({
+    get: jest.fn().mockReturnValue(false), // or false, depending on your test case
+  });
+  (getApplication as jest.Mock).mockReturnValue({});
+
+  (getNavigationUI as jest.Mock).mockReturnValue({});
+});
 
 describe("<ManagedIndexControls /> spec", () => {
   it("renders the component", async () => {
diff --git a/public/pages/ManagedIndices/components/ManagedIndexControls/ManagedIndexControls.tsx b/public/pages/ManagedIndices/components/ManagedIndexControls/ManagedIndexControls.tsx
index 2c444326d..7f648b69c 100644
--- a/public/pages/ManagedIndices/components/ManagedIndexControls/ManagedIndexControls.tsx
+++ b/public/pages/ManagedIndices/components/ManagedIndexControls/ManagedIndexControls.tsx
@@ -4,8 +4,25 @@
  */
 
 import React, { Component } from "react";
-import { ArgsWithQuery, ArgsWithError, EuiFlexGroup, EuiFlexItem, EuiPagination, EuiSearchBar, EuiSwitch } from "@elastic/eui";
+import {
+  ArgsWithQuery,
+  ArgsWithError,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPagination,
+  EuiSearchBar,
+  EuiSwitch,
+  EuiButton,
+  EuiPopover,
+  EuiContextMenuPanel,
+  EuiButtonIcon,
+  EuiButtonEmpty,
+} from "@elastic/eui";
 import { DataStream } from "../../../../../server/models/interfaces";
+import { ManagedIndices } from "../../containers/ManagedIndices/ManagedIndices";
+import { ManagedIndexItem } from "plugins/index-management-dashboards-plugin/models/interfaces";
+import { getUISettings } from "../../../../services/Services";
+import { size } from "lodash";
 
 interface ManagedIndexControlsProps {
   search: string;
@@ -14,6 +31,7 @@ interface ManagedIndexControlsProps {
   onRefresh: () => void;
   getDataStreams: () => Promise<DataStream[]>;
   toggleShowDataStreams: () => void;
+  Actions?: React.JSX.Element;
 }
 
 export default class ManagedIndexControls extends Component<ManagedIndexControlsProps, object> {
@@ -31,7 +49,7 @@ export default class ManagedIndexControls extends Component<ManagedIndexControls
   };
 
   render() {
-    const { search, onSearchChange, showDataStreams, toggleShowDataStreams } = this.props;
+    const { search, onSearchChange, showDataStreams, toggleShowDataStreams, Actions } = this.props;
 
     const schema = {
       strict: true,
@@ -55,11 +73,45 @@ export default class ManagedIndexControls extends Component<ManagedIndexControls
             multiSelect: false,
             cache: 60000,
             options: () => this.getDataStreams(),
+            popoverProps: {
+              button: (
+                <EuiButtonEmpty size="s" iconType="arrowDown" iconSide="right" flush="right">
+                  Data streams2
+                </EuiButtonEmpty>
+              ),
+            },
           },
         ]
       : undefined;
 
-    return (
+    const uiSettings = getUISettings();
+    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}>
+          <EuiSwitch
+            compressed
+            label="Show data stream indexes"
+            checked={showDataStreams}
+            onChange={toggleShowDataStreams}
+            data-test-subj="toggleShowDataStreams"
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    ) : (
       <EuiFlexGroup style={{ padding: "0px 5px" }} alignItems="center">
         <EuiFlexItem>
           <EuiSearchBar
diff --git a/public/pages/ManagedIndices/containers/ManagedIndices/ManagedIndices.test.tsx b/public/pages/ManagedIndices/containers/ManagedIndices/ManagedIndices.test.tsx
index f1319ec49..826685044 100644
--- a/public/pages/ManagedIndices/containers/ManagedIndices/ManagedIndices.test.tsx
+++ b/public/pages/ManagedIndices/containers/ManagedIndices/ManagedIndices.test.tsx
@@ -18,6 +18,23 @@ import { ServicesConsumer, ServicesContext } from "../../../../services";
 import { BREADCRUMBS, ROUTES } from "../../../../utils/constants";
 import { ManagedIndexItem } from "../../../../../models/interfaces";
 import { CoreServicesConsumer, CoreServicesContext } from "../../../../components/core_services";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+
+jest.mock("../../../../services/Services", () => ({
+  ...jest.requireActual("../../../../services/Services"),
+  getUISettings: jest.fn(),
+  getApplication: jest.fn(),
+  getNavigationUI: jest.fn(),
+}));
+
+beforeEach(() => {
+  (getUISettings as jest.Mock).mockReturnValue({
+    get: jest.fn().mockReturnValue(false), // or false, depending on your test case
+  });
+  (getApplication as jest.Mock).mockReturnValue({});
+
+  (getNavigationUI as jest.Mock).mockReturnValue({});
+});
 
 function renderWithRouter(Component: React.ComponentType<any>) {
   return {
diff --git a/public/pages/ManagedIndices/containers/ManagedIndices/ManagedIndices.tsx b/public/pages/ManagedIndices/containers/ManagedIndices/ManagedIndices.tsx
index c56eb059f..c00e99b20 100644
--- a/public/pages/ManagedIndices/containers/ManagedIndices/ManagedIndices.tsx
+++ b/public/pages/ManagedIndices/containers/ManagedIndices/ManagedIndices.tsx
@@ -25,6 +25,9 @@ import {
   ArgsWithQuery,
   ArgsWithError,
   Query,
+  EuiContextMenuItem,
+  EuiPopover,
+  EuiContextMenuPanel,
 } from "@elastic/eui";
 import queryString from "query-string";
 import _ from "lodash";
@@ -48,6 +51,8 @@ import { DataStream } from "../../../../../server/models/interfaces";
 import { SECURITY_EXCEPTION_PREFIX } from "../../../../../server/utils/constants";
 import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
 import MDSEnabledComponent from "../../../../components/MDSEnabledComponent";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+import { TopNavControlButtonData } from "src/plugins/navigation/public";
 
 interface ManagedIndicesProps extends RouteComponentProps, DataSourceMenuProperties {
   managedIndexService: ManagedIndexService;
@@ -66,6 +71,11 @@ interface ManagedIndicesState extends DataSourceMenuProperties {
   loadingManagedIndices: boolean;
   showDataStreams: boolean;
   isDataStreamColumnVisible: boolean;
+  useUpdatedUX: boolean;
+  showRetryModal: boolean;
+  showRemoveModal: boolean;
+  showEditModal: boolean;
+  isPopoverOpen: boolean;
 }
 
 export class ManagedIndices extends MDSEnabledComponent<ManagedIndicesProps, ManagedIndicesState> {
@@ -77,6 +87,9 @@ export class ManagedIndices extends MDSEnabledComponent<ManagedIndicesProps, Man
 
     const { from, size, search, sortField, sortDirection, showDataStreams } = getURLQueryParams(this.props.location);
 
+    const uiSettings = getUISettings();
+    const useUpdatedUX = uiSettings.get("home:useNewHomePage");
+
     this.state = {
       ...this.state,
       totalManagedIndices: 0,
@@ -91,6 +104,11 @@ export class ManagedIndices extends MDSEnabledComponent<ManagedIndicesProps, Man
       loadingManagedIndices: true,
       showDataStreams,
       isDataStreamColumnVisible: showDataStreams,
+      useUpdatedUX: useUpdatedUX,
+      showRetryModal: false,
+      showRemoveModal: false,
+      showEditModal: false,
+      isPopoverOpen: false,
     };
 
     this.getManagedIndices = _.debounce(this.getManagedIndices, 500, { leading: true });
@@ -184,8 +202,16 @@ export class ManagedIndices extends MDSEnabledComponent<ManagedIndicesProps, Man
   };
 
   async componentDidMount() {
-    this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.MANAGED_INDICES]);
+    const breadCrumbs = this.state.useUpdatedUX
+      ? [BREADCRUMBS.MANAGED_INDICES]
+      : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.MANAGED_INDICES];
+    this.context.chrome.setBreadcrumbs(breadCrumbs);
     await this.getManagedIndices();
+    if (this.state.useUpdatedUX) {
+      this.context.chrome.setBreadcrumbs([
+        { text: BREADCRUMBS.MANAGED_INDICES.text.concat(` (${this.state.totalManagedIndices})`), href: BREADCRUMBS.MANAGED_INDICES.href },
+      ]);
+    }
   }
 
   async componentDidUpdate(prevProps: ManagedIndicesProps, prevState: ManagedIndicesState) {
@@ -194,6 +220,11 @@ export class ManagedIndices extends MDSEnabledComponent<ManagedIndicesProps, Man
     if (!_.isEqual(prevQuery, currQuery)) {
       await this.getManagedIndices();
     }
+    if (this.state.useUpdatedUX) {
+      this.context.chrome.setBreadcrumbs([
+        { text: BREADCRUMBS.MANAGED_INDICES.text.concat(` (${this.state.totalManagedIndices})`), href: BREADCRUMBS.MANAGED_INDICES.href },
+      ]);
+    }
   }
 
   static getQueryObjectFromState({
@@ -354,6 +385,38 @@ export class ManagedIndices extends MDSEnabledComponent<ManagedIndicesProps, Man
     this.setState({ search: DEFAULT_QUERY_PARAMS.search, query: Query.parse(DEFAULT_QUERY_PARAMS.search) });
   };
 
+  onShowRetryModal = (): void => {
+    this.setState({ showRetryModal: true });
+  };
+
+  onCloseRetryModal = (): void => {
+    this.setState({ showRetryModal: false });
+  };
+
+  onShowRemoveModal = () => {
+    this.setState({ showRemoveModal: true });
+  };
+
+  onCloseRemoveModal = () => {
+    this.setState({ showRemoveModal: false });
+  };
+
+  onShowEditModal = () => {
+    this.setState({ showEditModal: true });
+  };
+
+  onCloseEditModal = () => {
+    this.setState({ showEditModal: false });
+  };
+
+  closePopover = () => {
+    this.setState({ isPopoverOpen: false });
+  };
+
+  onActionButtonClick = () => {
+    this.setState({ isPopoverOpen: !this.state.isPopoverOpen });
+  };
+
   render() {
     const {
       totalManagedIndices,
@@ -367,6 +430,10 @@ export class ManagedIndices extends MDSEnabledComponent<ManagedIndicesProps, Man
       loadingManagedIndices,
       showDataStreams,
       isDataStreamColumnVisible,
+      showRetryModal,
+      showRemoveModal,
+      showEditModal,
+      isPopoverOpen,
     } = this.state;
 
     const filterIsApplied = !!search;
@@ -442,7 +509,175 @@ export class ManagedIndices extends MDSEnabledComponent<ManagedIndicesProps, Man
       },
     ];
 
-    return (
+    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 && (
+          <ConfirmationModal
+            title={`Remove ${
+              selectedItems.length === 1 ? `policy from ${selectedItems[0].index}` : `policies from ${selectedItems.length} indexes`
+            }`}
+            bodyMessage={`Remove ${
+              selectedItems.length === 1 ? `policy from ${selectedItems[0].index}` : `policies from ${selectedItems.length} indexes`
+            } permanently? This action cannot be undone.`}
+            actionMessage={"Remove"}
+            onAction={() => this.onClickRemovePolicy(selectedItems.map((item) => item.index))}
+            onClose={this.onCloseRemoveModal}
+          />
+        )
+      );
+    };
+
+    const actionsButton = (
+      <EuiButton
+        iconType="arrowDown"
+        iconSide="right"
+        disabled={!selectedItems.length}
+        onClick={this.onActionButtonClick}
+        data-test-subj="actionButton"
+        size="s"
+      >
+        Actions
+      </EuiButton>
+    );
+
+    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>,
+      <EuiContextMenuItem
+        key="Remove"
+        toolTipPosition="left"
+        disabled={!selectedItems.length}
+        data-test-subj="removeOption"
+        onClick={() => {
+          this.closePopover();
+          this.onShowRemoveModal();
+        }}
+      >
+        Remove Policy
+      </EuiContextMenuItem>,
+      <EuiContextMenuItem
+        key="Retry"
+        toolTipPosition="left"
+        disabled={isRetryDisabled}
+        data-test-subj="RetryOption"
+        onClick={() => {
+          this.closePopover();
+          this.onShowRetryModal();
+        }}
+      >
+        Retry Policy
+      </EuiContextMenuItem>,
+    ];
+
+    const Action = () => {
+      return (
+        <EuiFlexItem grow={false}>
+          <EuiPopover
+            id="action"
+            button={actionsButton}
+            isOpen={isPopoverOpen}
+            closePopover={this.closePopover}
+            anchorPosition="downLeft"
+            panelPaddingSize="none"
+          >
+            <EuiContextMenuPanel items={popoverActionItems} />
+          </EuiPopover>
+        </EuiFlexItem>
+      );
+    };
+
+    const { HeaderControl } = getNavigationUI();
+    const { setAppRightControls } = getApplication();
+
+    const CommonTable = () => {
+      return (
+        <EuiBasicTable
+          columns={this.managedIndicesColumns(isDataStreamColumnVisible)}
+          isSelectable={true}
+          itemId="index"
+          items={managedIndices}
+          noItemsMessage={
+            <ManagedIndexEmptyPrompt
+              history={this.props.history}
+              filterIsApplied={filterIsApplied}
+              loading={loadingManagedIndices}
+              resetFilters={this.resetFilters}
+            />
+          }
+          onChange={this.onTableChange}
+          pagination={pagination}
+          selection={selection}
+          sorting={sorting}
+        />
+      );
+    };
+
+    return this.state.useUpdatedUX ? (
+      <>
+        <HeaderControl
+          setMountPoint={setAppRightControls}
+          controls={[
+            {
+              id: "Change policy",
+              label: "Change Policy",
+              fill: true,
+              href: `${PLUGIN_NAME}#/change-policy`,
+              testId: "changePolicyButton",
+              controlType: "button",
+              color: "primary",
+            } as TopNavControlButtonData,
+          ]}
+        />
+
+        <div style={{ padding: "0px" }}>
+          <ContentPanel>
+            <ManagedIndexControls
+              search={search}
+              onSearchChange={this.onSearchChange}
+              onRefresh={this.getManagedIndices}
+              showDataStreams={showDataStreams}
+              getDataStreams={this.getDataStreams}
+              toggleShowDataStreams={this.toggleShowDataStreams}
+              Actions={Action()}
+            />
+            {CommonTable()}
+          </ContentPanel>
+          {RetryPolicyModal()}
+          {RemovePolicyModal()}
+          {EditRolloverAliasModal()}
+        </div>
+      </>
+    ) : (
       <div style={{ padding: "0px 25px" }}>
         <EuiFlexGroup alignItems="center">
           <EuiFlexItem></EuiFlexItem>
@@ -459,7 +694,6 @@ export class ManagedIndices extends MDSEnabledComponent<ManagedIndicesProps, Man
         </EuiFlexGroup>
 
         <EuiSpacer />
-
         <ContentPanel
           actions={<ContentPanelActions actions={actions} />}
           bodyStyles={{ padding: "initial" }}
@@ -477,24 +711,7 @@ export class ManagedIndices extends MDSEnabledComponent<ManagedIndicesProps, Man
 
           <EuiHorizontalRule margin="xs" />
 
-          <EuiBasicTable
-            columns={this.managedIndicesColumns(isDataStreamColumnVisible)}
-            isSelectable={true}
-            itemId="index"
-            items={managedIndices}
-            noItemsMessage={
-              <ManagedIndexEmptyPrompt
-                history={this.props.history}
-                filterIsApplied={filterIsApplied}
-                loading={loadingManagedIndices}
-                resetFilters={this.resetFilters}
-              />
-            }
-            onChange={this.onTableChange}
-            pagination={pagination}
-            selection={selection}
-            sorting={sorting}
-          />
+          {CommonTable()}
         </ContentPanel>
       </div>
     );
diff --git a/public/pages/Templates/components/IndexControls/IndexControls.test.tsx b/public/pages/Templates/components/IndexControls/IndexControls.test.tsx
index 9e343056c..5d03a4be3 100644
--- a/public/pages/Templates/components/IndexControls/IndexControls.test.tsx
+++ b/public/pages/Templates/components/IndexControls/IndexControls.test.tsx
@@ -9,6 +9,23 @@ import { render, waitFor } from "@testing-library/react";
 // @ts-ignore
 import userEvent from "@testing-library/user-event";
 import IndexControls from "./IndexControls";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+
+jest.mock("../../../../services/Services", () => ({
+  ...jest.requireActual("../../../../services/Services"),
+  getUISettings: jest.fn(),
+  getApplication: jest.fn(),
+  getNavigationUI: jest.fn(),
+}));
+
+beforeEach(() => {
+  (getUISettings as jest.Mock).mockReturnValue({
+    get: jest.fn().mockReturnValue(false), // or false, depending on your test case
+  });
+  (getApplication as jest.Mock).mockReturnValue({});
+
+  (getNavigationUI as jest.Mock).mockReturnValue({});
+});
 
 describe("<IndexControls /> spec", () => {
   it("renders the component", async () => {
diff --git a/public/pages/Templates/components/IndexControls/IndexControls.tsx b/public/pages/Templates/components/IndexControls/IndexControls.tsx
index 6864a1e3b..bc8a211dc 100644
--- a/public/pages/Templates/components/IndexControls/IndexControls.tsx
+++ b/public/pages/Templates/components/IndexControls/IndexControls.tsx
@@ -5,12 +5,19 @@
 
 import React, { useEffect, useState } from "react";
 import { EuiFieldSearch, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
+import { getUISettings } from "../../../../services/Services";
+import TemplatesActions from "../../containers/TemplatesActions";
+import { ITemplate } from "../../interface";
+import { RouteComponentProps } from "react-router-dom";
 
 export interface SearchControlsProps {
   value: {
     search: string;
   };
   onSearchChange: (args: SearchControlsProps["value"]) => void;
+  selectedItems: ITemplate[];
+  getTemplates: () => Promise<void>;
+  history: RouteComponentProps["history"];
 }
 
 export default function SearchControls(props: SearchControlsProps) {
@@ -26,7 +33,26 @@ export default function SearchControls(props: SearchControlsProps) {
   useEffect(() => {
     setState(props.value);
   }, [props.value]);
-  return (
+
+  const uiSettings = getUISettings();
+  const useUpdatedUX = uiSettings.get("home:useNewHomePage");
+
+  return useUpdatedUX ? (
+    <EuiFlexGroup style={{ padding: "0px 5px 16px 5px" }} alignItems="center">
+      <EuiFlexItem>
+        <EuiFieldSearch
+          compressed
+          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 style={{ padding: "0px 5px" }} alignItems="center">
       <EuiFlexItem>
         <EuiFieldSearch fullWidth placeholder="Search..." value={state.search} onChange={(e) => onChange("search", e.target.value)} />
diff --git a/public/pages/Templates/containers/Templates/Templates.test.tsx b/public/pages/Templates/containers/Templates/Templates.test.tsx
index d4013bfab..947b0ff29 100644
--- a/public/pages/Templates/containers/Templates/Templates.test.tsx
+++ b/public/pages/Templates/containers/Templates/Templates.test.tsx
@@ -15,6 +15,23 @@ import { ROUTES } from "../../../../utils/constants";
 import { CoreServicesContext } from "../../../../components/core_services";
 import userEvent from "@testing-library/user-event";
 import { ITemplate } from "../../interface";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+
+jest.mock("../../../../services/Services", () => ({
+  ...jest.requireActual("../../../../services/Services"),
+  getUISettings: jest.fn(),
+  getApplication: jest.fn(),
+  getNavigationUI: jest.fn(),
+}));
+
+beforeEach(() => {
+  (getUISettings as jest.Mock).mockReturnValue({
+    get: jest.fn().mockReturnValue(false), // or false, depending on your test case
+  });
+  (getApplication as jest.Mock).mockReturnValue({});
+
+  (getNavigationUI as jest.Mock).mockReturnValue({});
+});
 
 function renderWithRouter() {
   return {
diff --git a/public/pages/Templates/containers/Templates/Templates.tsx b/public/pages/Templates/containers/Templates/Templates.tsx
index 737e8c9ab..0ac946b32 100644
--- a/public/pages/Templates/containers/Templates/Templates.tsx
+++ b/public/pages/Templates/containers/Templates/Templates.tsx
@@ -28,7 +28,7 @@ import { ContentPanel, ContentPanelActions } from "../../../../components/Conten
 import { DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_QUERY_PARAMS } from "../../utils/constants";
 import CommonService from "../../../../services/CommonService";
 import { ITemplate } from "../../interface";
-import { BREADCRUMBS, ROUTES } from "../../../../utils/constants";
+import { BREADCRUMBS, PLUGIN_NAME, ROUTES } from "../../../../utils/constants";
 import { CoreServicesContext } from "../../../../components/core_services";
 import { ServicesContext } from "../../../../services";
 import IndexControls, { SearchControlsProps } from "../../components/IndexControls";
@@ -41,6 +41,9 @@ import DeleteTemplate from "../../components/DeleteTemplate";
 import IndexPatternDisplay from "./IndexPatternDisplay";
 import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
 import MDSEnabledComponent from "../../../../components/MDSEnabledComponent";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+import { TopNavControlButtonData, TopNavControlDescriptionData } from "src/plugins/navigation/public";
+import { description } from "joi";
 
 interface TemplatesProps extends RouteComponentProps, DataSourceMenuProperties {
   commonService: CommonService;
@@ -55,6 +58,7 @@ type TemplatesState = {
   selectedItems: ITemplate[];
   templates: ITemplate[];
   loading: boolean;
+  useUpdatedUX: boolean;
 } & SearchControlsProps["value"] &
   DataSourceMenuProperties;
 
@@ -79,6 +83,10 @@ class Templates extends MDSEnabledComponent<TemplatesProps, TemplatesState> {
       sortField: keyof ITemplate;
       sortDirection: Direction;
     };
+
+    const uiSettings = getUISettings();
+    const useUpdatedUX = uiSettings.get("home:useNewHomePage");
+
     this.state = {
       ...defaultFilter,
       ...this.state,
@@ -91,6 +99,7 @@ class Templates extends MDSEnabledComponent<TemplatesProps, TemplatesState> {
       selectedItems: [],
       templates: [],
       loading: false,
+      useUpdatedUX: useUpdatedUX,
     };
 
     this.getTemplates = debounce(this.getTemplates, 500, { leading: true });
@@ -104,7 +113,8 @@ class Templates extends MDSEnabledComponent<TemplatesProps, TemplatesState> {
     }
   }
   componentDidMount() {
-    this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.TEMPLATES]);
+    const breadCrumbs = this.state.useUpdatedUX ? [BREADCRUMBS.NEW_TEMPLATES] : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.TEMPLATES];
+    this.context.chrome.setBreadcrumbs(breadCrumbs);
     this.getTemplates();
   }
 
@@ -230,59 +240,9 @@ class Templates extends MDSEnabledComponent<TemplatesProps, TemplatesState> {
     const selection: EuiTableSelectionType<ITemplate> = {
       onSelectionChange: this.onSelectionChange,
     };
-    return (
-      <ContentPanel
-        actions={
-          <ContentPanelActions
-            actions={[
-              {
-                text: "",
-                children: (
-                  <TemplatesActions selectedItems={this.state.selectedItems} onDelete={this.getTemplates} history={this.props.history} />
-                ),
-              },
-              {
-                text: "Create template",
-                buttonProps: {
-                  fill: true,
-                  onClick: () => {
-                    this.props.history.push(ROUTES.CREATE_TEMPLATE);
-                  },
-                },
-              },
-            ]}
-          />
-        }
-        bodyStyles={{ padding: "initial" }}
-        title={
-          <>
-            <EuiTitle>
-              <span>Templates</span>
-            </EuiTitle>
-            <EuiFormRow
-              fullWidth
-              helpText={
-                <div>
-                  Index templates let you initialize new indexes or data streams with predefined mappings and settings.{" "}
-                  <EuiLink target="_blank" external href={(this.context as CoreStart).docLinks.links.opensearch.indexTemplates.base}>
-                    Learn more
-                  </EuiLink>
-                </div>
-              }
-            >
-              <></>
-            </EuiFormRow>
-          </>
-        }
-      >
-        <IndexControls
-          value={{
-            search: this.state.search,
-          }}
-          onSearchChange={this.onSearchChange}
-        />
-        <EuiHorizontalRule margin="xs" />
 
+    const commonTable = () => {
+      return (
         <EuiBasicTable
           className="ISM-templates-table"
           data-test-subj="templatesTable"
@@ -412,6 +372,122 @@ class Templates extends MDSEnabledComponent<TemplatesProps, TemplatesState> {
             )
           }
         />
+      );
+    };
+
+    const { HeaderControl } = getNavigationUI();
+    const { setAppRightControls } = getApplication();
+    const { setAppDescriptionControls } = getApplication();
+
+    const description = [
+      {
+        renderComponent: (
+          <EuiFormRow
+            fullWidth
+            helpText={
+              <div>
+                Index templates let you initialize new indexes or data streams with predefined mappings and settings.{" "}
+                <EuiLink target="_blank" external href={(this.context as CoreStart).docLinks.links.opensearch.indexTemplates.base}>
+                  Learn more
+                </EuiLink>
+              </div>
+            }
+          >
+            <></>
+          </EuiFormRow>
+        ),
+      },
+    ];
+
+    return this.state.useUpdatedUX ? (
+      <div style={{ padding: "0px" }}>
+        <HeaderControl controls={description} setMountPoint={setAppDescriptionControls} />
+        <HeaderControl
+          setMountPoint={setAppRightControls}
+          controls={[
+            {
+              id: "Create Index Template",
+              label: "Create Index Template",
+              fill: true,
+              iconType: "plus",
+              href: `${PLUGIN_NAME}#/create-template`,
+              testId: "createTemplateButton",
+              controlType: "button",
+              color: "primary",
+            } as TopNavControlButtonData,
+          ]}
+        />
+        <ContentPanel>
+          <IndexControls
+            value={{
+              search: this.state.search,
+            }}
+            onSearchChange={this.onSearchChange}
+            selectedItems={this.state.selectedItems}
+            getTemplates={this.getTemplates}
+            history={this.props.history}
+          />
+
+          {commonTable()}
+        </ContentPanel>
+      </div>
+    ) : (
+      <ContentPanel
+        actions={
+          <ContentPanelActions
+            actions={[
+              {
+                text: "",
+                children: (
+                  <TemplatesActions selectedItems={this.state.selectedItems} onDelete={this.getTemplates} history={this.props.history} />
+                ),
+              },
+              {
+                text: "Create template",
+                buttonProps: {
+                  fill: true,
+                  onClick: () => {
+                    this.props.history.push(ROUTES.CREATE_TEMPLATE);
+                  },
+                },
+              },
+            ]}
+          />
+        }
+        bodyStyles={{ padding: "initial" }}
+        title={
+          <>
+            <EuiTitle>
+              <span>Templates</span>
+            </EuiTitle>
+            <EuiFormRow
+              fullWidth
+              helpText={
+                <div>
+                  Index templates let you initialize new indexes or data streams with predefined mappings and settings.{" "}
+                  <EuiLink target="_blank" external href={(this.context as CoreStart).docLinks.links.opensearch.indexTemplates.base}>
+                    Learn more
+                  </EuiLink>
+                </div>
+              }
+            >
+              <></>
+            </EuiFormRow>
+          </>
+        }
+      >
+        <IndexControls
+          value={{
+            search: this.state.search,
+          }}
+          onSearchChange={this.onSearchChange}
+          selectedItems={this.state.selectedItems}
+          getTemplates={this.getTemplates}
+          history={this.props.history}
+        />
+        <EuiHorizontalRule margin="xs" />
+
+        {commonTable()}
       </ContentPanel>
     );
   }
diff --git a/public/pages/Templates/containers/TemplatesActions/TemplatesActions.test.tsx b/public/pages/Templates/containers/TemplatesActions/TemplatesActions.test.tsx
index 1bfb86bae..73b7f86d2 100644
--- a/public/pages/Templates/containers/TemplatesActions/TemplatesActions.test.tsx
+++ b/public/pages/Templates/containers/TemplatesActions/TemplatesActions.test.tsx
@@ -14,6 +14,23 @@ import { CoreServicesContext } from "../../../../components/core_services";
 import { Route, HashRouter as Router, Switch, Redirect } from "react-router-dom";
 import { ROUTES } from "../../../../utils/constants";
 const historyPushMock = jest.fn();
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+
+jest.mock("../../../../services/Services", () => ({
+  ...jest.requireActual("../../../../services/Services"),
+  getUISettings: jest.fn(),
+  getApplication: jest.fn(),
+  getNavigationUI: jest.fn(),
+}));
+
+beforeEach(() => {
+  (getUISettings as jest.Mock).mockReturnValue({
+    get: jest.fn().mockReturnValue(false), // or false, depending on your test case
+  });
+  (getApplication as jest.Mock).mockReturnValue({});
+
+  (getNavigationUI as jest.Mock).mockReturnValue({});
+});
 
 function renderWithRouter(props: Omit<TemplatesActionsProps, "history">) {
   return {
diff --git a/public/pages/Templates/containers/TemplatesActions/index.tsx b/public/pages/Templates/containers/TemplatesActions/index.tsx
index a1d257543..8f59e884c 100644
--- a/public/pages/Templates/containers/TemplatesActions/index.tsx
+++ b/public/pages/Templates/containers/TemplatesActions/index.tsx
@@ -9,6 +9,7 @@ import SimplePopover from "../../../../components/SimplePopover";
 import DeleteIndexModal from "../DeleteTemplatesModal";
 import { ITemplate } from "../../interface";
 import { ROUTES } from "../../../../utils/constants";
+import { getUISettings } from "../../../../services/Services";
 
 export interface TemplatesActionsProps {
   selectedItems: ITemplate[];
@@ -26,13 +27,18 @@ export default function TemplatesActions(props: TemplatesActionsProps) {
 
   const renderKey = useMemo(() => Date.now(), [selectedItems]);
 
+  const uiSettings = getUISettings();
+  const useUpdatedUX = uiSettings.get("home:useNewHomePage");
+
+  const size = useUpdatedUX ? "s" : undefined;
+
   return (
     <>
       <SimplePopover
         data-test-subj="moreAction"
         panelPaddingSize="none"
         button={
-          <EuiButton iconType="arrowDown" iconSide="right">
+          <EuiButton iconType="arrowDown" iconSide="right" size={size}>
             Actions
           </EuiButton>
         }
diff --git a/public/pages/Transforms/components/ConfigureTransform/Configure.tsx b/public/pages/Transforms/components/ConfigureTransform/Configure.tsx
index 5af5b84df..2b07a5439 100644
--- a/public/pages/Transforms/components/ConfigureTransform/Configure.tsx
+++ b/public/pages/Transforms/components/ConfigureTransform/Configure.tsx
@@ -14,10 +14,19 @@ interface ConfigureTransformProps {
   onChangeName: (value: ChangeEvent<HTMLInputElement>) => void;
   onChangeDescription: (value: ChangeEvent<HTMLTextAreaElement>) => void;
   description: string;
+  size: "s" | "m";
 }
 
-const ConfigureTransform = ({ inEdit, transformId, error, onChangeName, onChangeDescription, description }: ConfigureTransformProps) => (
-  <ContentPanel bodyStyles={{ padding: "initial" }} title="Job name and description" titleSize="m">
+const ConfigureTransform = ({
+  inEdit,
+  transformId,
+  error,
+  onChangeName,
+  onChangeDescription,
+  description,
+  size,
+}: ConfigureTransformProps) => (
+  <ContentPanel bodyStyles={{ padding: "initial" }} title="Job name and description" titleSize={size}>
     <div style={{ paddingLeft: "10px" }}>
       <EuiSpacer size="s" />
       <EuiFormRow label="Name" helpText="Specify a unique, descriptive name." isInvalid={!!error} error={error}>
diff --git a/public/pages/Transforms/components/GeneralInformation/GeneralInformation.tsx b/public/pages/Transforms/components/GeneralInformation/GeneralInformation.tsx
index 948c4ba37..4521a2c8b 100644
--- a/public/pages/Transforms/components/GeneralInformation/GeneralInformation.tsx
+++ b/public/pages/Transforms/components/GeneralInformation/GeneralInformation.tsx
@@ -7,6 +7,7 @@ import React, { Component } from "react";
 import { EuiFlexGrid, EuiSpacer, EuiFlexItem, EuiText } from "@elastic/eui";
 import { ContentPanel, ContentPanelActions } from "../../../../components/ContentPanel";
 import { ModalConsumer } from "../../../../components/Modal";
+import { getUISettings } from "../../../../services/Services";
 
 interface GeneralInformationProps {
   id: string;
@@ -44,28 +45,34 @@ export default class GeneralInformation extends Component<GeneralInformationProp
       {},
       { term: "Target index", value: targetIndex },
     ];
+    const uiSettings = getUISettings();
+    const useUpdatedUX = uiSettings.get("home:useNewHomePage");
+    const size = useUpdatedUX ? "s" : undefined;
 
     return (
       <ContentPanel
         actions={
-          <ModalConsumer>
-            {() => (
-              <ContentPanelActions
-                actions={[
-                  {
-                    text: "Edit",
-                    buttonProps: {
-                      onClick: () => onEdit(),
+          !useUpdatedUX ? (
+            <ModalConsumer>
+              {() => (
+                <ContentPanelActions
+                  size={size}
+                  actions={[
+                    {
+                      text: "Edit",
+                      buttonProps: {
+                        onClick: () => onEdit(),
+                      },
                     },
-                  },
-                ]}
-              />
-            )}
-          </ModalConsumer>
+                  ]}
+                />
+              )}
+            </ModalConsumer>
+          ) : null
         }
         bodyStyles={{ padding: "initial" }}
         title="General information"
-        titleSize="m"
+        titleSize={size}
       >
         <div style={{ paddingLeft: "10px" }}>
           <EuiSpacer size="s" />
diff --git a/public/pages/Transforms/components/Indices/Indices.tsx b/public/pages/Transforms/components/Indices/Indices.tsx
index 41175eb3b..f5d5fca09 100644
--- a/public/pages/Transforms/components/Indices/Indices.tsx
+++ b/public/pages/Transforms/components/Indices/Indices.tsx
@@ -11,6 +11,7 @@ interface IndicesProps {
   sourceIndex: string;
   targetIndex: string;
   sourceIndexFilter: string;
+  size: "s" | "m";
 }
 
 export default class Indices extends Component<IndicesProps> {
@@ -19,10 +20,10 @@ export default class Indices extends Component<IndicesProps> {
   }
 
   render() {
-    const { sourceIndex, targetIndex, sourceIndexFilter } = this.props;
+    const { sourceIndex, targetIndex, sourceIndexFilter, size } = this.props;
 
     return (
-      <ContentPanel bodyStyles={{ padding: "initial" }} title="Indices" titleSize="m">
+      <ContentPanel bodyStyles={{ padding: "initial" }} title="Indices" titleSize={size}>
         <div style={{ paddingLeft: "10px" }}>
           <EuiText size="xs">
             <dt>Source index</dt>
diff --git a/public/pages/Transforms/components/Schedule/Schedule.tsx b/public/pages/Transforms/components/Schedule/Schedule.tsx
index 20b6c0690..04f6fa5fe 100644
--- a/public/pages/Transforms/components/Schedule/Schedule.tsx
+++ b/public/pages/Transforms/components/Schedule/Schedule.tsx
@@ -28,6 +28,7 @@ interface ScheduleProps {
   onCronTimeZoneChange: (e: ChangeEvent<HTMLSelectElement>) => void;
   onIntervalChange: (e: ChangeEvent<HTMLInputElement>) => void;
   onIntervalTimeUnitChange: (e: ChangeEvent<HTMLSelectElement>) => void;
+  size: "s" | "m";
 }
 
 export default class Schedule extends Component<ScheduleProps> {
@@ -46,9 +47,10 @@ export default class Schedule extends Component<ScheduleProps> {
       intervalTimeUnit,
       onIntervalChange,
       onIntervalTimeUnitChange,
+      size,
     } = this.props;
     return (
-      <ContentPanel bodyStyles={{ padding: "initial" }} title="Schedule" titleSize="m">
+      <ContentPanel bodyStyles={{ padding: "initial" }} title="Schedule" titleSize={size}>
         <div style={{ paddingLeft: "10px" }}>
           <EuiCheckbox
             id="jobEnabled"
diff --git a/public/pages/Transforms/components/TransformEmptyPrompt/TransformEmptyPrompt.tsx b/public/pages/Transforms/components/TransformEmptyPrompt/TransformEmptyPrompt.tsx
index 5d852a047..defa31e12 100644
--- a/public/pages/Transforms/components/TransformEmptyPrompt/TransformEmptyPrompt.tsx
+++ b/public/pages/Transforms/components/TransformEmptyPrompt/TransformEmptyPrompt.tsx
@@ -6,6 +6,7 @@
 import React from "react";
 import { EuiButton, EuiEmptyPrompt, EuiText } from "@elastic/eui";
 import { PLUGIN_NAME, ROUTES } from "../../../../utils/constants";
+import { getUISettings } from "../../../../services/Services";
 
 interface TransformEmptyPromptProps {
   filterIsApplied: boolean;
@@ -25,21 +26,28 @@ const getMessagePrompt = ({ filterIsApplied, loading }: TransformEmptyPromptProp
   return TEXT.NO_TRANSFORMS;
 };
 
-const getActions: React.SFC<TransformEmptyPromptProps> = ({ filterIsApplied, loading, resetFilters }) => {
+const getActions: React.SFC<TransformEmptyPromptProps> = ({ filterIsApplied, loading, resetFilters, size }) => {
   if (loading) {
     return null;
   }
 
+  const uiSettings = getUISettings();
+  const useUpdatedUX = uiSettings.get("home:useNewHomePage");
+
   if (filterIsApplied) {
     return (
-      <EuiButton fill onClick={resetFilters} data-test-subj="transformEmptyPromptRestFilters">
+      <EuiButton size={useUpdatedUX ? "s" : undefined} fill onClick={resetFilters} data-test-subj="transformEmptyPromptRestFilters">
         Reset Filters
       </EuiButton>
     );
   }
 
   return (
-    <EuiButton href={`${PLUGIN_NAME}#${ROUTES.CREATE_TRANSFORM}`} data-test-subj="emptyPromptCreateTransformButton">
+    <EuiButton
+      size={useUpdatedUX ? "s" : undefined}
+      href={`${PLUGIN_NAME}#${ROUTES.CREATE_TRANSFORM}`}
+      data-test-subj="emptyPromptCreateTransformButton"
+    >
       Create transform
     </EuiButton>
   );
diff --git a/public/pages/Transforms/components/TransformStatus/TransformStatus.tsx b/public/pages/Transforms/components/TransformStatus/TransformStatus.tsx
index 58f7a6ca0..ea12f8270 100644
--- a/public/pages/Transforms/components/TransformStatus/TransformStatus.tsx
+++ b/public/pages/Transforms/components/TransformStatus/TransformStatus.tsx
@@ -8,6 +8,7 @@ import { EuiFlexGrid, EuiSpacer, EuiFlexItem, EuiText } 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;
@@ -20,8 +21,10 @@ 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="m">
+      <ContentPanel bodyStyles={{ padding: "initial" }} title="Transform status" titleSize={useUpdatedUX ? "s" : undefined}>
         <div style={{ paddingLeft: "10px" }}>
           <EuiSpacer size="s" />
           <EuiFlexGrid columns={4}>
diff --git a/public/pages/Transforms/containers/Transforms/EditTransform.test.tsx b/public/pages/Transforms/containers/Transforms/EditTransform.test.tsx
index 798080d4e..d5cc71808 100644
--- a/public/pages/Transforms/containers/Transforms/EditTransform.test.tsx
+++ b/public/pages/Transforms/containers/Transforms/EditTransform.test.tsx
@@ -16,6 +16,23 @@ import { BrowserServices } from "../../../../models/interfaces";
 import { BREADCRUMBS, ROUTES } from "../../../../utils/constants";
 import { testTransform2 } from "../../../../../test/constants";
 import { CoreServicesContext } from "../../../../components/core_services";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+
+jest.mock("../../../../services/Services", () => ({
+  ...jest.requireActual("../../../../services/Services"),
+  getUISettings: jest.fn(),
+  getApplication: jest.fn(),
+  getNavigationUI: jest.fn(),
+}));
+
+beforeEach(() => {
+  (getUISettings as jest.Mock).mockReturnValue({
+    get: jest.fn().mockReturnValue(false), // or false, depending on your test case
+  });
+  (getApplication as jest.Mock).mockReturnValue({});
+
+  (getNavigationUI as jest.Mock).mockReturnValue({});
+});
 
 function renderEditTransformWithRouter(initialEntries = ["/"]) {
   return {
diff --git a/public/pages/Transforms/containers/Transforms/EditTransform.tsx b/public/pages/Transforms/containers/Transforms/EditTransform.tsx
index 9fb1c0b5b..ff179f23c 100644
--- a/public/pages/Transforms/containers/Transforms/EditTransform.tsx
+++ b/public/pages/Transforms/containers/Transforms/EditTransform.tsx
@@ -18,6 +18,7 @@ import Indices from "../../components/Indices";
 import moment from "moment";
 import { Transform } from "../../../../../models/interfaces";
 import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
+import { getUISettings } from "../../../../services/Services";
 
 interface EditTransformProps extends RouteComponentProps {
   transformService: TransformService;
@@ -44,6 +45,7 @@ interface EditTransformState {
   cronExpression: string;
   cronTimeZone: string;
   schedule: string;
+  useUpdatedUX: boolean;
 }
 
 export class EditTransform extends Component<EditTransformProps, EditTransformState> {
@@ -51,6 +53,8 @@ export class EditTransform extends Component<EditTransformProps, EditTransformSt
 
   constructor(props: EditTransformProps) {
     super(props);
+    const uiSettings = getUISettings();
+    const useUpdatedUX = uiSettings.get("home:useNewHomePage");
     this.state = {
       id: "",
       error: "",
@@ -72,13 +76,17 @@ export class EditTransform extends Component<EditTransformProps, EditTransformSt
       schedule: "fixed",
       submitError: "",
       hasSubmitted: false,
+      useUpdatedUX: useUpdatedUX,
     };
   }
 
   componentDidMount = async () => {
     const { id } = queryString.parse(this.props.location.search);
+    const breadCrumbs = this.state.useUpdatedUX
+      ? [BREADCRUMBS.TRANSFORMS, { text: id }, BREADCRUMBS.EDIT_TRANSFORM]
+      : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.TRANSFORMS, BREADCRUMBS.EDIT_TRANSFORM, { text: id }];
     if (typeof id === "string" && !!id) {
-      this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.TRANSFORMS, BREADCRUMBS.EDIT_TRANSFORM, { text: id }]);
+      this.context.chrome.setBreadcrumbs(breadCrumbs);
       await this.getTransform(id);
     } else {
       this.context.notifications.toasts.addDanger(`Invalid transform id: ${id}`);
@@ -137,57 +145,81 @@ export class EditTransform extends Component<EditTransformProps, EditTransformSt
       cronTimeZone,
       schedule,
     } = this.state;
-    return (
+
+    const size = this.state.useUpdatedUX ? "s" : "m";
+
+    const Common = () => {
+      return (
+        <>
+          <ConfigureTransform
+            inEdit={true}
+            transformId={id}
+            error={error}
+            onChangeName={this.onNameChange}
+            onChangeDescription={this.onDescriptionChange}
+            description={description}
+            size={size}
+          />
+          <EuiSpacer />
+          <Indices sourceIndex={sourceIndex} targetIndex={targetIndex} sourceIndexFilter={sourceIndexFilter} size={size} />
+          <EuiSpacer />
+          <Schedule
+            transformId={id}
+            pageSize={pageSize}
+            schedule={schedule}
+            error={error}
+            enabled={enabled}
+            interval={interval}
+            intervalError={intervalError}
+            intervalTimeUnit={intervalTimeUnit}
+            cronExpression={cronExpression}
+            cronTimeZone={cronTimeZone}
+            onEnabledChange={this.onEnabledChange}
+            onCronExpressionChange={this.onCronExpressionChange}
+            onIntervalChange={this.onIntervalChange}
+            onPageChange={this.onPageChange}
+            onScheduleChange={this.onScheduleChange}
+            onCronTimeZoneChange={this.onCronTimeZoneChange}
+            onIntervalTimeUnitChange={this.onIntervalTimeUnitChange}
+            size={size}
+          />
+
+          <EuiSpacer />
+
+          <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty
+                size={this.state.useUpdatedUX ? "s" : undefined}
+                onClick={this.onCancel}
+                data-test-subj="editTransformCancelButton"
+              >
+                Cancel
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButton
+                size={this.state.useUpdatedUX ? "s" : undefined}
+                fill
+                onClick={this.onSubmit}
+                isLoading={isSubmitting}
+                data-test-subj="editTransformSaveButton"
+              >
+                Save changes
+              </EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </>
+      );
+    };
+    return this.state.useUpdatedUX ? (
+      <div style={{ padding: "0px 0px" }}>{Common()}</div>
+    ) : (
       <div style={{ padding: "25px 50px" }}>
         <EuiTitle size="l">
           <h1>Edit transform job</h1>
         </EuiTitle>
         <EuiSpacer />
-        <ConfigureTransform
-          inEdit={true}
-          transformId={id}
-          error={error}
-          onChangeName={this.onNameChange}
-          onChangeDescription={this.onDescriptionChange}
-          description={description}
-        />
-        <EuiSpacer />
-        <Indices sourceIndex={sourceIndex} targetIndex={targetIndex} sourceIndexFilter={sourceIndexFilter} />
-        <EuiSpacer />
-        <Schedule
-          transformId={id}
-          pageSize={pageSize}
-          schedule={schedule}
-          error={error}
-          enabled={enabled}
-          interval={interval}
-          intervalError={intervalError}
-          intervalTimeUnit={intervalTimeUnit}
-          cronExpression={cronExpression}
-          cronTimeZone={cronTimeZone}
-          onEnabledChange={this.onEnabledChange}
-          onCronExpressionChange={this.onCronExpressionChange}
-          onIntervalChange={this.onIntervalChange}
-          onPageChange={this.onPageChange}
-          onScheduleChange={this.onScheduleChange}
-          onCronTimeZoneChange={this.onCronTimeZoneChange}
-          onIntervalTimeUnitChange={this.onIntervalTimeUnitChange}
-        />
-
-        <EuiSpacer />
-
-        <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
-          <EuiFlexItem grow={false}>
-            <EuiButtonEmpty onClick={this.onCancel} data-test-subj="editTransformCancelButton">
-              Cancel
-            </EuiButtonEmpty>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButton fill onClick={this.onSubmit} isLoading={isSubmitting} data-test-subj="editTransformSaveButton">
-              Save changes
-            </EuiButton>
-          </EuiFlexItem>
-        </EuiFlexGroup>
+        {Common()}
       </div>
     );
   }
diff --git a/public/pages/Transforms/containers/Transforms/TransformDetails.test.tsx b/public/pages/Transforms/containers/Transforms/TransformDetails.test.tsx
index 7714db93a..a2d3d9dfb 100644
--- a/public/pages/Transforms/containers/Transforms/TransformDetails.test.tsx
+++ b/public/pages/Transforms/containers/Transforms/TransformDetails.test.tsx
@@ -16,6 +16,23 @@ import TransformDetails from "./TransformDetails";
 import { ServicesConsumer, ServicesContext } from "../../../../services";
 import { testTransform2, testTransformDisabled } from "../../../../../test/constants";
 import { CoreServicesContext } from "../../../../components/core_services";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+
+jest.mock("../../../../services/Services", () => ({
+  ...jest.requireActual("../../../../services/Services"),
+  getUISettings: jest.fn(),
+  getApplication: jest.fn(),
+  getNavigationUI: jest.fn(),
+}));
+
+beforeEach(() => {
+  (getUISettings as jest.Mock).mockReturnValue({
+    get: jest.fn().mockReturnValue(false), // or false, depending on your test case
+  });
+  (getApplication as jest.Mock).mockReturnValue({});
+
+  (getNavigationUI as jest.Mock).mockReturnValue({});
+});
 
 function renderTransformDetailsWithRouter(initialEntries = ["/"]) {
   return {
diff --git a/public/pages/Transforms/containers/Transforms/TransformDetails.tsx b/public/pages/Transforms/containers/Transforms/TransformDetails.tsx
index bf2d9fc5f..ef4b1ba3b 100644
--- a/public/pages/Transforms/containers/Transforms/TransformDetails.tsx
+++ b/public/pages/Transforms/containers/Transforms/TransformDetails.tsx
@@ -21,6 +21,9 @@ import {
   EuiContextMenuPanel,
   EuiTextColor,
   EuiPopover,
+  EuiHealth,
+  EuiText,
+  EuiButtonIcon,
 } from "@elastic/eui";
 import { TransformService } from "../../../../services";
 import { RouteComponentProps } from "react-router-dom";
@@ -37,6 +40,9 @@ import TransformSettings from "./TransformSettings";
 import GeneralInformation from "../../components/GeneralInformation";
 import { buildIntervalScheduleText } from "../../../CreateRollup/utils/helpers";
 import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+import { ModalConsumer } from "../../../../components/Modal";
+import { ContentPanelActions } from "../../../../components/ContentPanel";
 
 interface TransformDetailsProps extends RouteComponentProps {
   transformService: TransformService;
@@ -63,13 +69,15 @@ interface TransformDetailsState {
   isModalOpen: boolean;
   isDeleteModalOpen: boolean;
   isPopOverOpen: boolean;
+  useUpdatedUX: boolean;
 }
 
 export class TransformDetails extends Component<TransformDetailsProps, TransformDetailsState> {
   static contextType = CoreServicesContext;
   constructor(props: TransformDetailsProps) {
     super(props);
-
+    const uiSettings = getUISettings();
+    const useUpdatedUX = uiSettings.get("home:useNewHomePage");
     this.state = {
       id: "",
       description: "",
@@ -91,14 +99,21 @@ export class TransformDetails extends Component<TransformDetailsProps, Transform
       isModalOpen: false,
       isDeleteModalOpen: false,
       isPopOverOpen: false,
+      useUpdatedUX: useUpdatedUX,
     };
   }
 
   componentDidMount = async (): Promise<void> => {
-    this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.TRANSFORMS]);
+    const breadCrumbs = this.state.useUpdatedUX
+      ? [BREADCRUMBS.TRANSFORMS, BREADCRUMBS.TRANSFORMS]
+      : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.TRANSFORMS];
+    this.context.chrome.setBreadcrumbs(breadCrumbs);
     const { id } = queryString.parse(this.props.location.search);
     if (typeof id === "string") {
-      this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.TRANSFORMS, { text: id }]);
+      const breadCrumbsUp = this.state.useUpdatedUX
+        ? [BREADCRUMBS.TRANSFORMS, { text: id }]
+        : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.TRANSFORMS, { text: id }];
+      this.context.chrome.setBreadcrumbs(breadCrumbsUp);
       this.props.history.push(`${ROUTES.TRANSFORM_DETAILS}?id=${id}`);
       await this.getTransform(id);
       this.forceUpdate();
@@ -279,7 +294,94 @@ export class TransformDetails extends Component<TransformDetailsProps, Transform
       </EuiContextMenuItem>,
     ];
 
-    return (
+    const { HeaderControl } = getNavigationUI();
+    const { setAppBadgeControls, setAppRightControls } = getApplication();
+
+    const onClickEnable = () => {
+      this.closePopover();
+      this.onEnable();
+    };
+
+    const onClickDisable = () => {
+      this.closePopover();
+      this.onDisable();
+    };
+
+    const HeaderRight = [
+      {
+        renderComponent: (
+          <>
+            <EuiButtonIcon
+              display="base"
+              iconType="trash"
+              aria-label="Delete"
+              color="danger"
+              onClick={() => {
+                this.closePopover();
+                this.showDeleteModal();
+              }}
+              size="s"
+            />
+          </>
+        ),
+      },
+      {
+        renderComponent: (
+          <EuiButton size="s" onClick={() => (!this.state.enabled ? onClickEnable() : onClickDisable())}>
+            {this.state.enabled ? "Disable" : "Enable"}
+          </EuiButton>
+        ),
+      },
+      {
+        renderComponent: (
+          <EuiButton
+            size="s"
+            onClick={() => {
+              this.closePopover();
+              this.showJsonModal();
+            }}
+          >
+            View JSON
+          </EuiButton>
+        ),
+      },
+      {
+        renderComponent: (
+          <EuiFlexItem>
+            <ModalConsumer>
+              {() => (
+                <ContentPanelActions
+                  size="s"
+                  actions={[
+                    {
+                      text: "Edit",
+                      buttonProps: {
+                        onClick: () => this.onEdit(),
+                        fill: true,
+                        style: { marginRight: 20 },
+                      },
+                    },
+                  ]}
+                />
+              )}
+            </ModalConsumer>
+          </EuiFlexItem>
+        ),
+      },
+    ];
+
+    const badgeControlData = [
+      {
+        renderComponent: (
+          <>
+            <EuiHealth color={this.state.enabled ? "success" : "danger"} />
+            <EuiText size="s">{this.state.enabled ? "Enabled" : "Disabled"}</EuiText>
+          </>
+        ),
+      },
+    ];
+
+    return !this.state.useUpdatedUX ? (
       <div style={{ padding: "5px 50px" }}>
         <EuiFlexGroup style={{ padding: "0px 10px" }} justifyContent="spaceBetween" alignItems="center">
           <EuiFlexItem grow={false}>
@@ -354,6 +456,58 @@ export class TransformDetails extends Component<TransformDetailsProps, Transform
           </EuiOverlayMask>
         )}
 
+        {isDeleteModalOpen && <DeleteModal item={id} closeDeleteModal={this.closeDeleteModal} onClickDelete={this.onClickDelete} />}
+      </div>
+    ) : (
+      <div style={{ padding: "0px 0px" }}>
+        <HeaderControl setMountPoint={setAppBadgeControls} controls={badgeControlData} />
+        <HeaderControl controls={HeaderRight} setMountPoint={setAppRightControls} />
+        <GeneralInformation
+          id={id}
+          description={description}
+          sourceIndex={sourceIndex}
+          targetIndex={targetIndex}
+          sourceIndexFilter={sourceIndexFilter}
+          scheduledText={scheduleText}
+          pageSize={pageSize}
+          enabledAt={enabledAt}
+          updatedAt={updatedAt}
+          onEdit={this.onEdit}
+        />
+        <EuiSpacer />
+        <TransformStatus metadata={metadata} />
+        <EuiSpacer />
+        <EuiSpacer />
+        <TransformSettings
+          {...this.props}
+          transformService={this.props.transformService}
+          transformId={id}
+          sourceIndex={sourceIndex}
+          transformJson={transformJson}
+          groupsShown={groupsShown}
+          aggregationsShown={aggregationsShown}
+        />
+
+        {isModalOpen && (
+          <EuiOverlayMask>
+            <EuiModal onClose={this.closeModal} style={{ padding: "5px 30px" }}>
+              <EuiModalHeader>
+                <EuiModalHeaderTitle>{"View JSON of " + id} </EuiModalHeaderTitle>
+              </EuiModalHeader>
+
+              <EuiModalBody>
+                <EuiCodeBlock language="json" fontSize="m" paddingSize="m" overflowHeight={600} inline={false} isCopyable>
+                  {JSON.stringify(transformJson, null, 4)}
+                </EuiCodeBlock>
+              </EuiModalBody>
+
+              <EuiModalFooter>
+                <EuiButtonEmpty onClick={this.closeModal}>Close</EuiButtonEmpty>
+              </EuiModalFooter>
+            </EuiModal>
+          </EuiOverlayMask>
+        )}
+
         {isDeleteModalOpen && <DeleteModal item={id} closeDeleteModal={this.closeDeleteModal} onClickDelete={this.onClickDelete} />}
       </div>
     );
diff --git a/public/pages/Transforms/containers/Transforms/TransformSettings.tsx b/public/pages/Transforms/containers/Transforms/TransformSettings.tsx
index 091b021b6..43d6524b8 100644
--- a/public/pages/Transforms/containers/Transforms/TransformSettings.tsx
+++ b/public/pages/Transforms/containers/Transforms/TransformSettings.tsx
@@ -12,6 +12,7 @@ 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;
@@ -87,9 +88,11 @@ 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="m">
+      <ContentPanel bodyStyles={{ padding: "initial" }} title="Transform settings" titleSize={useUpdatedUX ? "s" : undefined}>
         <div style={{ paddingLeft: "10px" }}>
           <EuiSpacer size="m" />
           <EuiFlexGrid columns={4}>
diff --git a/public/pages/Transforms/containers/Transforms/Transforms.test.tsx b/public/pages/Transforms/containers/Transforms/Transforms.test.tsx
index 041871d36..bb702c246 100644
--- a/public/pages/Transforms/containers/Transforms/Transforms.test.tsx
+++ b/public/pages/Transforms/containers/Transforms/Transforms.test.tsx
@@ -17,6 +17,23 @@ import Transforms from "./Transforms";
 import { TEXT } from "../../components/TransformEmptyPrompt/TransformEmptyPrompt";
 import { testTransform2 } from "../../../../../test/constants";
 import { CoreServicesContext } from "../../../../components/core_services";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+
+jest.mock("../../../../services/Services", () => ({
+  ...jest.requireActual("../../../../services/Services"),
+  getUISettings: jest.fn(),
+  getApplication: jest.fn(),
+  getNavigationUI: jest.fn(),
+}));
+
+beforeEach(() => {
+  (getUISettings as jest.Mock).mockReturnValue({
+    get: jest.fn().mockReturnValue(false), // or false, depending on your test case
+  });
+  (getApplication as jest.Mock).mockReturnValue({});
+
+  (getNavigationUI as jest.Mock).mockReturnValue({});
+});
 
 function renderTransformsWithRouter() {
   return {
diff --git a/public/pages/Transforms/containers/Transforms/Transforms.tsx b/public/pages/Transforms/containers/Transforms/Transforms.tsx
index 4e52c4ae4..c042dafe0 100644
--- a/public/pages/Transforms/containers/Transforms/Transforms.tsx
+++ b/public/pages/Transforms/containers/Transforms/Transforms.tsx
@@ -36,7 +36,7 @@ import { CoreServicesContext } from "../../../../components/core_services";
 import { getURLQueryParams, renderTime } from "../../utils/helpers";
 import { TransformQueryParams } from "../../models/interfaces";
 import { getErrorMessage } from "../../../../utils/helpers";
-import { BREADCRUMBS, ROUTES } from "../../../../utils/constants";
+import { BREADCRUMBS, PLUGIN_NAME, ROUTES } from "../../../../utils/constants";
 import DeleteModal from "../../components/DeleteModal";
 import TransformEmptyPrompt from "../../components/TransformEmptyPrompt";
 import { renderEnabled, renderStatus } from "../../utils/metadataHelper";
@@ -46,6 +46,8 @@ import { ManagedCatIndex } from "../../../../../server/models/interfaces";
 import { renderContinuous } from "../../../Rollups/utils/helpers";
 import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
 import MDSEnabledComponent from "../../../../components/MDSEnabledComponent";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+import { TopNavControlButtonData } from "src/plugins/navigation/public";
 
 interface TransformProps extends RouteComponentProps, DataSourceMenuProperties {
   transformService: TransformService;
@@ -64,6 +66,7 @@ interface TransformState extends DataSourceMenuProperties {
   transformMetadata: {};
   isPopOverOpen: boolean;
   isDeleteModalVisible: boolean;
+  useUpdatedUX: boolean;
 }
 
 export class Transforms extends MDSEnabledComponent<TransformProps, TransformState> {
@@ -73,6 +76,9 @@ export class Transforms extends MDSEnabledComponent<TransformProps, TransformSta
 
     const { from, size, search, sortField, sortDirection } = getURLQueryParams(this.props.location);
 
+    const uiSettings = getUISettings();
+    const useUpdatedUX = uiSettings.get("home:useNewHomePage");
+
     this.state = {
       ...this.state,
       totalTransforms: 0,
@@ -87,13 +93,15 @@ export class Transforms extends MDSEnabledComponent<TransformProps, TransformSta
       transformMetadata: {},
       isPopOverOpen: false,
       isDeleteModalVisible: false,
+      useUpdatedUX: useUpdatedUX,
     };
 
     this.getTransforms = _.debounce(this.getTransforms, 500, { leading: true });
   }
 
   async componentDidMount() {
-    this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.TRANSFORMS]);
+    const breadCrumbs = this.state.useUpdatedUX ? [BREADCRUMBS.TRANSFORMS] : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.TRANSFORMS];
+    this.context.chrome.setBreadcrumbs(breadCrumbs);
     await this.getTransforms();
   }
 
@@ -189,6 +197,8 @@ export class Transforms extends MDSEnabledComponent<TransformProps, TransformSta
       },
     ];
 
+    const Actionsize = this.state.useUpdatedUX ? "s" : "m";
+
     const actionButton = (
       <EuiButton
         iconType="arrowDown"
@@ -196,6 +206,7 @@ export class Transforms extends MDSEnabledComponent<TransformProps, TransformSta
         disabled={!selectedItems.length}
         onClick={this.onActionButtonClick}
         data-test-subj="actionButton"
+        size={Actionsize}
       >
         Actions
       </EuiButton>
@@ -204,9 +215,9 @@ export class Transforms extends MDSEnabledComponent<TransformProps, TransformSta
     const actionItems = [
       <EuiContextMenuItem
         key="Edit"
-        icon="empty"
         disabled={selectedItems.length != 1}
         data-test-subj="editButton"
+        toolTipPosition="left"
         onClick={() => {
           this.closePopover();
           this.onClickEdit();
@@ -216,9 +227,9 @@ export class Transforms extends MDSEnabledComponent<TransformProps, TransformSta
       </EuiContextMenuItem>,
       <EuiContextMenuItem
         key="Delete"
-        icon="empty"
         disabled={!selectedItems.length}
         data-test-subj="deleteButton"
+        toolTipPosition="left"
         onClick={() => {
           this.closePopover();
           this.showDeleteModal();
@@ -239,7 +250,82 @@ export class Transforms extends MDSEnabledComponent<TransformProps, TransformSta
       },
     };
 
-    return (
+    const { HeaderControl } = getNavigationUI();
+    const { setAppRightControls } = getApplication();
+
+    return this.state.useUpdatedUX ? (
+      <div style={{ padding: "0px" }}>
+        <HeaderControl
+          setMountPoint={setAppRightControls}
+          controls={[
+            {
+              id: "Create transform job",
+              label: "Create transform job",
+              fill: true,
+              iconType: "plus",
+              href: `${PLUGIN_NAME}#/create-transform`,
+              testId: "createTransformButton",
+              controlType: "button",
+              color: "primary",
+            } as TopNavControlButtonData,
+          ]}
+        />
+        <EuiPanel style={{ paddingLeft: "10px", paddingRight: "10px" }}>
+          <div style={{ padding: "initial" }}>
+            <EuiFlexGroup style={{ padding: "0px 0px 16px 0px" }}>
+              <EuiFlexItem>
+                <EuiFieldSearch compressed fullWidth={true} value={search} placeholder="Search" onChange={this.onSearchChange} />
+              </EuiFlexItem>
+              {pageCount > 1 && (
+                <EuiFlexItem grow={false} style={{ justifyContent: "center" }}>
+                  <EuiPagination
+                    pageCount={pageCount}
+                    activePage={page}
+                    onPageClick={this.onPageClick}
+                    data-test-subj="indexControlsPagination"
+                  />
+                </EuiFlexItem>
+              )}
+              <EuiFlexItem grow={false}>
+                <EuiPopover
+                  id="action"
+                  button={actionButton}
+                  isOpen={isPopOverOpen}
+                  closePopover={this.closePopover}
+                  panelPaddingSize="none"
+                  anchorPosition="downLeft"
+                  data-test-subj="actionPopover"
+                >
+                  <EuiContextMenuPanel items={actionItems} />
+                </EuiPopover>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+
+            <EuiBasicTable
+              columns={columns}
+              isSelectable={true}
+              itemId="_id"
+              items={transforms}
+              noItemsMessage={
+                <TransformEmptyPrompt filterIsApplied={filterIsApplied} loading={fetchingTransforms} resetFilters={this.resetFilters} />
+              }
+              onChange={this.onTableChange}
+              pagination={pagination}
+              selection={selection}
+              sorting={sorting}
+              tableLayout="auto"
+            />
+            {isDeleteModalVisible && (
+              <DeleteModal
+                item={this.getSelectedTransformIds()}
+                closeDeleteModal={this.closeDeleteModal}
+                onClickDelete={this.onClickDelete}
+              />
+            )}
+          </div>
+        </EuiPanel>
+      </div>
+    ) : (
       <EuiPanel style={{ paddingLeft: "0px", paddingRight: "0px" }}>
         <EuiFlexGroup style={{ padding: "0px 10px" }} justifyContent="spaceBetween" alignItems="center">
           <EuiFlexItem>
diff --git a/public/utils/constants.ts b/public/utils/constants.ts
index ad3fe0df2..b7df09e5f 100644
--- a/public/utils/constants.ts
+++ b/public/utils/constants.ts
@@ -113,8 +113,10 @@ export const BREADCRUMBS = Object.freeze({
   INDEX_DETAIL: { text: "Index Detail", href: "#" },
   REINDEX: { text: "Reindex", href: `#${ROUTES.REINDEX}` },
   ALIASES: { text: "Aliases", href: `#${ROUTES.ALIASES}` },
+  NEW_ALIASES: { text: "Index aliases", href: `#${ROUTES.ALIASES}` },
   TEMPLATES: { text: "Templates", href: `#${ROUTES.TEMPLATES}` },
-  CREATE_TEMPLATE: { text: "Create template", href: `#${ROUTES.CREATE_TEMPLATE}` },
+  NEW_TEMPLATES: { text: "Index templates", href: `#${ROUTES.TEMPLATES}` },
+  CREATE_TEMPLATE: { text: "Create index template", href: `#${ROUTES.CREATE_TEMPLATE}` },
   EDIT_TEMPLATE: { text: "Edit template", href: `#${ROUTES.CREATE_TEMPLATE}` },
   SPLIT_INDEX: { text: "Split Index", href: `#${ROUTES.SPLIT_INDEX}` },
   SHRINK_INDEX: { text: "Shrink index", href: `#${ROUTES.SHRINK_INDEX}` },
diff --git a/yarn.lock b/yarn.lock
index 237e33e3c..671817ba9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1076,6 +1076,11 @@ camelcase@^5.0.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
+camelcase@^5.0.0:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
+  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
+
 caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
@@ -1147,6 +1152,50 @@ chrome-trace-event@^1.0.2:
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz#05bffd7ff928465093314708c93bdfa9bd1f0f5b"
   integrity sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==
 
+chokidar@^2.1.8:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
+  integrity sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==
+  dependencies:
+    anymatch "^2.0.0"
+    async-each "^1.0.1"
+    braces "^2.3.2"
+    glob-parent "^3.1.0"
+    inherits "^2.0.3"
+    is-binary-path "^1.0.0"
+    is-glob "^4.0.0"
+    normalize-path "^3.0.0"
+    path-is-absolute "^1.0.0"
+    readdirp "^2.2.1"
+    upath "^1.1.1"
+  optionalDependencies:
+    fsevents "^1.2.7"
+
+chokidar@^3.4.1:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
+  integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+chownr@^1.1.1:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
+  integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
+
+chrome-trace-event@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz#05bffd7ff928465093314708c93bdfa9bd1f0f5b"
+  integrity sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==
+
 ci-info@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
@@ -1221,6 +1270,23 @@ collection-visit@^1.0.0:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
 
+cliui@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-6.0.0.tgz#511d702c0c4e41ca156d7d0e96021f23e13225b1"
+  integrity sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+    wrap-ansi "^6.2.0"
+
+collection-visit@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
+  integrity sha512-lNkKvzEeMBBjUGHZ+q6z9pSJla0KWAQPvtzhEV9+iGyQYG+pBpl7xKDhxoNSOZH2hhv0v5k0y2yAM4o4SjoSkw==
+  dependencies:
+    map-visit "^1.0.0"
+    object-visit "^1.0.0"
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -1262,6 +1328,11 @@ commander@^2.20.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
+commander@^2.20.0:
+  version "2.20.3"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+
 commander@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
@@ -1287,6 +1358,16 @@ component-emitter@^1.2.1:
   resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.1.tgz#ef1d5796f7d93f135ee6fb684340b26403c97d17"
   integrity sha512-T0+barUSQRTUQASh8bx02dl+DhF54GtIDY13Y3m9oWTklKbb3Wv974meRpeZ3lp1JpLVECWWNHC4vaG2XHXouQ==
 
+commondir@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
+  integrity sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==
+
+component-emitter@^1.2.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.1.tgz#ef1d5796f7d93f135ee6fb684340b26403c97d17"
+  integrity sha512-T0+barUSQRTUQASh8bx02dl+DhF54GtIDY13Y3m9oWTklKbb3Wv974meRpeZ3lp1JpLVECWWNHC4vaG2XHXouQ==
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -1329,6 +1410,43 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==
 
+concat-stream@^1.5.0:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
+  integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==
+  dependencies:
+    buffer-from "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^2.2.2"
+    typedarray "^0.0.6"
+
+console-browserify@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.2.0.tgz#67063cef57ceb6cf4993a2ab3a55840ae8c49336"
+  integrity sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==
+
+constants-browserify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
+  integrity sha512-xFxOwqIzR/e1k1gLiWEophSCMqXcwVHIH7akf7b/vxcUeGunlj3hvZaaqxwHsTgn+IndtkQJgSztIDWeumWJDQ==
+
+copy-concurrently@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0"
+  integrity sha512-f2domd9fsVDFtaFcbaRZuYXwtdmnzqbADSwhSWYxYB/Q8zsdUUFMXVRwXGDMWmbEzAn1kdRrtI1T/KTFOL4X2A==
+  dependencies:
+    aproba "^1.1.1"
+    fs-write-stream-atomic "^1.0.8"
+    iferr "^0.1.5"
+    mkdirp "^0.5.1"
+    rimraf "^2.5.4"
+    run-queue "^1.0.0"
+
+copy-descriptor@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
+  integrity sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==
+
 core-util-is@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -1391,6 +1509,37 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+create-ecdh@^4.0.0:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.4.tgz#d6e7f4bffa66736085a0762fd3a632684dabcc4e"
+  integrity sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==
+  dependencies:
+    bn.js "^4.1.0"
+    elliptic "^6.5.3"
+
+create-hash@^1.1.0, create-hash@^1.1.2, create-hash@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.2.0.tgz#889078af11a63756bcfb59bd221996be3a9ef196"
+  integrity sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==
+  dependencies:
+    cipher-base "^1.0.1"
+    inherits "^2.0.1"
+    md5.js "^1.3.4"
+    ripemd160 "^2.0.1"
+    sha.js "^2.4.0"
+
+create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.7.tgz#69170c78b3ab957147b2b8b04572e47ead2243ff"
+  integrity sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==
+  dependencies:
+    cipher-base "^1.0.3"
+    create-hash "^1.1.0"
+    inherits "^2.0.1"
+    ripemd160 "^2.0.0"
+    safe-buffer "^5.0.1"
+    sha.js "^2.4.8"
+
 cross-spawn@^6.0.0:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
@@ -1428,6 +1577,23 @@ crypto-browserify@^3.11.0:
     randombytes "^2.0.0"
     randomfill "^1.0.3"
 
+crypto-browserify@^3.11.0:
+  version "3.12.0"
+  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
+  integrity sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==
+  dependencies:
+    browserify-cipher "^1.0.0"
+    browserify-sign "^4.0.0"
+    create-ecdh "^4.0.0"
+    create-hash "^1.1.0"
+    create-hmac "^1.1.0"
+    diffie-hellman "^5.0.0"
+    inherits "^2.0.1"
+    pbkdf2 "^3.0.3"
+    public-encrypt "^4.0.0"
+    randombytes "^2.0.0"
+    randomfill "^1.0.3"
+
 csstype@^3.0.2:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
@@ -1520,6 +1686,33 @@ data-view-byte-offset@^1.0.0:
     es-errors "^1.3.0"
     is-data-view "^1.0.1"
 
+data-view-buffer@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/data-view-buffer/-/data-view-buffer-1.0.1.tgz#8ea6326efec17a2e42620696e671d7d5a8bc66b2"
+  integrity sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==
+  dependencies:
+    call-bind "^1.0.6"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
+
+data-view-byte-length@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz#90721ca95ff280677eb793749fce1011347669e2"
+  integrity sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==
+  dependencies:
+    call-bind "^1.0.7"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
+
+data-view-byte-offset@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz#5e0bbfb4828ed2d1b9b400cd8a7d119bca0ff18a"
+  integrity sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==
+  dependencies:
+    call-bind "^1.0.6"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
+
 dayjs@^1.10.4:
   version "1.11.12"
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.12.tgz#5245226cc7f40a15bf52e0b99fd2a04669ccac1d"
@@ -1657,6 +1850,15 @@ diffie-hellman@^5.0.0:
     miller-rabin "^4.0.0"
     randombytes "^2.0.0"
 
+diffie-hellman@^5.0.0:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
+  integrity sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==
+  dependencies:
+    bn.js "^4.1.0"
+    miller-rabin "^4.0.0"
+    randombytes "^2.0.0"
+
 dom-accessibility-api@^0.5.9:
   version "0.5.16"
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453"
@@ -1698,6 +1900,19 @@ elliptic@^6.5.3, elliptic@^6.5.5:
     minimalistic-assert "^1.0.1"
     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==
+  dependencies:
+    bn.js "^4.11.9"
+    brorand "^1.1.0"
+    hash.js "^1.0.0"
+    hmac-drbg "^1.0.1"
+    inherits "^2.0.4"
+    minimalistic-assert "^1.0.1"
+    minimalistic-crypto-utils "^1.0.1"
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
@@ -1708,6 +1923,7 @@ emojis-list@^3.0.0:
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
   integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
 
+end-of-stream@^1.0.0, end-of-stream@^1.1.0:
 end-of-stream@^1.0.0, end-of-stream@^1.1.0:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@@ -1724,6 +1940,16 @@ enhanced-resolve@^0.9.1:
     memory-fs "^0.2.0"
     tapable "^0.1.8"
 
+enhanced-resolve@^4.0.0, enhanced-resolve@^4.5.0:
+enhanced-resolve@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-0.9.1.tgz#4d6e689b3725f86090927ccc86cd9f1635b89e2e"
+  integrity sha512-kxpoMgrdtkXZ5h0SeraBS1iRntpTpQ3R8ussdb38+UAFnMGX5DDyJXePm+OCHOcoXvHDw7mc2erbJBpDnl7TPw==
+  dependencies:
+    graceful-fs "^4.1.2"
+    memory-fs "^0.2.0"
+    tapable "^0.1.8"
+
 enhanced-resolve@^4.0.0, enhanced-resolve@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz#2f3cfd84dbe3b487f18f2db2ef1e064a571ca5ec"
@@ -1741,6 +1967,7 @@ enquirer@^2.3.6:
     ansi-colors "^4.1.1"
     strip-ansi "^6.0.1"
 
+errno@^0.1.3, errno@~0.1.7:
 errno@^0.1.3, errno@~0.1.7:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
@@ -1948,6 +2175,23 @@ estraverse@^5.2.0:
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
   integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
 
+esrecurse@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
+estraverse@^4.1.1:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
+  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
+
+estraverse@^5.2.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
+  integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
+
 eventemitter2@^6.4.3:
   version "6.4.9"
   resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-6.4.9.tgz#41f2750781b4230ed58827bc119d293471ecb125"
@@ -1966,6 +2210,19 @@ evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
     md5.js "^1.3.4"
     safe-buffer "^5.1.1"
 
+events@^3.0.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
+  integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
+
+evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz#7fcbdb198dc71959432efe13842684e0525acb02"
+  integrity sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==
+  dependencies:
+    md5.js "^1.3.4"
+    safe-buffer "^5.1.1"
+
 execa@4.1.0, execa@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/execa/-/execa-4.1.0.tgz#4e5491ad1572f2f17a77d388c6c857135b22847a"
@@ -2029,6 +2286,34 @@ extend-shallow@^3.0.0, extend-shallow@^3.0.2:
     assign-symbols "^1.0.0"
     is-extendable "^1.0.1"
 
+expand-brackets@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622"
+  integrity sha512-w/ozOKR9Obk3qoWeY/WDi6MFta9AoMR+zud60mdnbniMcBxRuFJyDt2LdX/14A1UABeqk+Uk+LDfUpvoGKppZA==
+  dependencies:
+    debug "^2.3.3"
+    define-property "^0.2.5"
+    extend-shallow "^2.0.1"
+    posix-character-classes "^0.1.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+extend-shallow@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
+  integrity sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==
+  dependencies:
+    is-extendable "^0.1.0"
+
+extend-shallow@^3.0.0, extend-shallow@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-3.0.2.tgz#26a71aaf073b39fb2127172746131c2704028db8"
+  integrity sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==
+  dependencies:
+    assign-symbols "^1.0.0"
+    is-extendable "^1.0.1"
+
 extend@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
@@ -2048,6 +2333,20 @@ extglob@^2.0.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
+extglob@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543"
+  integrity sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==
+  dependencies:
+    array-unique "^0.3.2"
+    define-property "^1.0.0"
+    expand-brackets "^2.1.4"
+    extend-shallow "^2.0.1"
+    fragment-cache "^0.2.1"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
 extract-zip@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-2.0.1.tgz#663dca56fe46df890d5f131ef4a06d22bb8ba13a"
@@ -2079,6 +2378,16 @@ fast-json-stable-stringify@^2.0.0:
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
   integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
 
+fast-deep-equal@^3.1.1:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
 fd-slicer@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.1.0.tgz#25c7c89cb1f9077f8891bbe61d8f390eae256f1e"
@@ -2091,6 +2400,11 @@ figgy-pudding@^3.5.1:
   resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"
   integrity sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==
 
+figgy-pudding@^3.5.1:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"
+  integrity sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==
+
 figures@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/figures/-/figures-3.2.0.tgz#625c18bd293c604dc4a8ddb2febf0c88341746af"
@@ -2131,6 +2445,28 @@ find-up@^3.0.0:
   dependencies:
     locate-path "^3.0.0"
 
+find-up@^4.0.0, find-up@^4.1.0:
+find-cache-dir@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-2.1.0.tgz#8d0f94cd13fe43c6c7c261a0d86115ca918c05f7"
+  integrity sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==
+  dependencies:
+    commondir "^1.0.1"
+    make-dir "^2.0.0"
+    pkg-dir "^3.0.0"
+
+find-root@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
+
+find-up@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
+  integrity sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==
+  dependencies:
+    locate-path "^3.0.0"
+
 find-up@^4.0.0, find-up@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
@@ -2159,6 +2495,26 @@ for-in@^1.0.2:
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
   integrity sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ==
 
+flush-write-stream@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"
+  integrity sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==
+  dependencies:
+    inherits "^2.0.3"
+    readable-stream "^2.3.6"
+
+for-each@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
+  integrity sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==
+  dependencies:
+    is-callable "^1.1.3"
+
+for-in@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
+  integrity sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ==
+
 forever-agent@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
@@ -2188,6 +2544,21 @@ from2@^2.1.0:
     inherits "^2.0.1"
     readable-stream "^2.0.0"
 
+fragment-cache@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
+  integrity sha512-GMBAbW9antB8iZRHLoGw0b3HANt57diZYFO/HL1JGIC1MjKrdmhxvrJbupnVvpys0zsz7yBApXdQyfepKly2kA==
+  dependencies:
+    map-cache "^0.2.2"
+
+from2@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/from2/-/from2-2.3.0.tgz#8bfb5502bde4a4d36cfdeea007fcca21d7e382af"
+  integrity sha512-OMcX/4IC/uqEPVgGeyfN22LJk6AZrMkRZHxcHBMBvHScDGgwTm2GT2Wkgtocyd3JfZffjj2kYUDXXII0Fk9W0g==
+  dependencies:
+    inherits "^2.0.1"
+    readable-stream "^2.0.0"
+
 fs-extra@^9.1.0:
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d"
@@ -2208,6 +2579,16 @@ fs-write-stream-atomic@^1.0.8:
     imurmurhash "^0.1.4"
     readable-stream "1 || 2"
 
+fs-write-stream-atomic@^1.0.8:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz#b47df53493ef911df75731e70a9ded0189db40c9"
+  integrity sha512-gehEzmPn2nAwr39eay+x3X34Ra+M2QlVUTLhkXPjWdeO8RF9kszk116avgBJM3ZyNHgHXBNx+VmPaFC36k0PzA==
+  dependencies:
+    graceful-fs "^4.1.2"
+    iferr "^0.1.5"
+    imurmurhash "^0.1.4"
+    readable-stream "1 || 2"
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -2300,6 +2681,20 @@ get-value@^2.0.3, get-value@^2.0.6:
   resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
   integrity sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA==
 
+get-symbol-description@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.0.2.tgz#533744d5aa20aca4e079c8e5daf7fd44202821f5"
+  integrity sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==
+  dependencies:
+    call-bind "^1.0.5"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.4"
+
+get-value@^2.0.3, get-value@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
+  integrity sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA==
+
 getos@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/getos/-/getos-3.2.1.tgz#0134d1f4e00eb46144c5a9c0ac4dc087cbb27dc5"
@@ -2368,6 +2763,14 @@ globalthis@^1.0.3:
     define-properties "^1.2.1"
     gopd "^1.0.1"
 
+globalthis@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.4.tgz#7430ed3a975d97bfb59bcce41f5cabbafa651236"
+  integrity sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==
+  dependencies:
+    define-properties "^1.2.1"
+    gopd "^1.0.1"
+
 gopd@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
@@ -2385,6 +2788,11 @@ has-bigints@^1.0.1, has-bigints@^1.0.2:
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
   integrity sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==
 
+has-bigints@^1.0.1, has-bigints@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
+  integrity sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==
+
 has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
@@ -2510,6 +2918,11 @@ https-browserify@^1.0.0:
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
   integrity sha512-J+FkSdyD+0mA0N+81tMotaRMfSL9SGi+xpD3T6YApKsc3bGSXJlfXri3VyFOeYkfLRQisDk1W+jIFFKBeUBbBg==
 
+https-browserify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
+  integrity sha512-J+FkSdyD+0mA0N+81tMotaRMfSL9SGi+xpD3T6YApKsc3bGSXJlfXri3VyFOeYkfLRQisDk1W+jIFFKBeUBbBg==
+
 human-signals@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
@@ -2532,6 +2945,7 @@ husky@^3.0.0:
     run-node "^1.0.0"
     slash "^3.0.0"
 
+ieee754@^1.1.13, ieee754@^1.1.4:
 ieee754@^1.1.13, ieee754@^1.1.4:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
@@ -2542,6 +2956,11 @@ iferr@^0.1.5:
   resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
   integrity sha512-DUNFN5j7Tln0D+TxzloUjKB+CtVu6myn0JEFak6dG18mNt9YkQ6lzGCdafwofISZ1lLF3xRHJ98VKy9ynkcFaA==
 
+iferr@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
+  integrity sha512-DUNFN5j7Tln0D+TxzloUjKB+CtVu6myn0JEFak6dG18mNt9YkQ6lzGCdafwofISZ1lLF3xRHJ98VKy9ynkcFaA==
+
 import-fresh@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"
@@ -2563,6 +2982,11 @@ imurmurhash@^0.1.4:
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==
 
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+  integrity sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==
+
 indent-string@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
@@ -2573,6 +2997,11 @@ infer-owner@^1.0.3:
   resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
   integrity sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==
 
+infer-owner@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
+  integrity sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==
+
 inflight@^1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
@@ -2581,6 +3010,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
+inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1, inherits@~2.0.3:
 inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
@@ -2591,6 +3021,11 @@ inherits@2.0.3:
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
   integrity sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==
 
+inherits@2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+  integrity sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==
+
 ini@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ini/-/ini-2.0.0.tgz#e5fd556ecdd5726be978fa1001862eacb0a94bc5"
@@ -2819,6 +3254,21 @@ is-regex@^1.1.4:
     call-bind "^1.0.2"
     has-tostringtag "^1.0.0"
 
+is-plain-object@^2.0.3, is-plain-object@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
+  integrity sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==
+  dependencies:
+    isobject "^3.0.1"
+
+is-regex@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
+  integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
+
 is-regexp@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"
@@ -2867,6 +3317,27 @@ is-typed-array@^1.1.13:
   dependencies:
     which-typed-array "^1.1.14"
 
+is-string@^1.0.5, is-string@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.7.tgz#0dd12bf2006f255bb58f695110eff7491eebc0fd"
+  integrity sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-symbol@^1.0.2, is-symbol@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.4.tgz#a6dac93b635b063ca6872236de88910a57af139c"
+  integrity sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==
+  dependencies:
+    has-symbols "^1.0.2"
+
+is-typed-array@^1.1.13:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.13.tgz#d6c5ca56df62334959322d7d7dd1cca50debe229"
+  integrity sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==
+  dependencies:
+    which-typed-array "^1.1.14"
+
 is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
@@ -2972,6 +3443,7 @@ jsbn@~0.1.0:
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
   integrity sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==
 
+json-parse-better-errors@^1.0.1, json-parse-better-errors@^1.0.2:
 json-parse-better-errors@^1.0.1, json-parse-better-errors@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
@@ -3229,6 +3701,25 @@ micromatch@^3.1.10, micromatch@^3.1.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.2"
 
+micromatch@^3.1.10, micromatch@^3.1.4:
+  version "3.1.10"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
+  integrity sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==
+  dependencies:
+    arr-diff "^4.0.0"
+    array-unique "^0.3.2"
+    braces "^2.3.1"
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    extglob "^2.0.4"
+    fragment-cache "^0.2.1"
+    kind-of "^6.0.2"
+    nanomatch "^1.2.9"
+    object.pick "^1.3.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.2"
+
 micromatch@^4.0.0, micromatch@^4.0.2:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.7.tgz#33e8190d9fe474a9895525f5618eee136d46c2e5"
@@ -3245,6 +3736,14 @@ miller-rabin@^4.0.0:
     bn.js "^4.0.0"
     brorand "^1.0.1"
 
+miller-rabin@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
+  integrity sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==
+  dependencies:
+    bn.js "^4.0.0"
+    brorand "^1.0.1"
+
 mime-db@1.52.0:
   version "1.52.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
@@ -3374,6 +3873,33 @@ neo-async@^2.5.0, neo-async@^2.6.1:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
+nan@^2.12.1:
+  version "2.20.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.20.0.tgz#08c5ea813dd54ed16e5bd6505bf42af4f7838ca3"
+  integrity sha512-bk3gXBZDGILuuo/6sKtr0DQmSThYHLtNCdSdXk9YkxD/jK6X2vmCyyXBBxyqZ4XcnzTyYEAThfX3DCEnLf6igw==
+
+nanomatch@^1.2.9:
+  version "1.2.13"
+  resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
+  integrity sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==
+  dependencies:
+    arr-diff "^4.0.0"
+    array-unique "^0.3.2"
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    fragment-cache "^0.2.1"
+    is-windows "^1.0.2"
+    kind-of "^6.0.2"
+    object.pick "^1.3.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
+neo-async@^2.5.0, neo-async@^2.6.1:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
+  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
+
 nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
@@ -3408,6 +3934,35 @@ node-libs-browser@^2.2.1:
     util "^0.11.0"
     vm-browserify "^1.0.1"
 
+node-libs-browser@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.2.1.tgz#b64f513d18338625f90346d27b0d235e631f6425"
+  integrity sha512-h/zcD8H9kaDZ9ALUWwlBUDo6TKF8a7qBSCSEGfjTVIYeqsioSKaAX+BN7NgiMGp6iSIXZ3PxgCu8KS3b71YK5Q==
+  dependencies:
+    assert "^1.1.1"
+    browserify-zlib "^0.2.0"
+    buffer "^4.3.0"
+    console-browserify "^1.1.0"
+    constants-browserify "^1.0.0"
+    crypto-browserify "^3.11.0"
+    domain-browser "^1.1.1"
+    events "^3.0.0"
+    https-browserify "^1.0.0"
+    os-browserify "^0.3.0"
+    path-browserify "0.0.1"
+    process "^0.11.10"
+    punycode "^1.2.4"
+    querystring-es3 "^0.2.0"
+    readable-stream "^2.3.3"
+    stream-browserify "^2.0.1"
+    stream-http "^2.7.2"
+    string_decoder "^1.0.0"
+    timers-browserify "^2.0.4"
+    tty-browserify "0.0.0"
+    url "^0.11.0"
+    util "^0.11.0"
+    vm-browserify "^1.0.1"
+
 normalize-package-data@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -3425,6 +3980,14 @@ normalize-path@^2.1.1:
   dependencies:
     remove-trailing-separator "^1.0.1"
 
+normalize-path@^3.0.0, normalize-path@~3.0.0:
+normalize-path@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
+  integrity sha512-3pKJwH184Xo/lnH6oyP1q2pMd7HcypqqmRs91/6/i2CGtWwIKGCkOOMTm/zXbgTEWHw1uNpNi/igc3ePOYHb6w==
+  dependencies:
+    remove-trailing-separator "^1.0.1"
+
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
@@ -3502,6 +4065,35 @@ object.pick@^1.3.0:
   dependencies:
     isobject "^3.0.1"
 
+object-keys@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
+  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
+
+object-visit@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
+  integrity sha512-GBaMwwAVK9qbQN3Scdo0OyvgPW7l3lnaVMj84uTOZlswkX0KpF6fyDBJhtTthf7pymztoN36/KEr1DyhF96zEA==
+  dependencies:
+    isobject "^3.0.0"
+
+object.assign@^4.1.4, object.assign@^4.1.5:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.5.tgz#3a833f9ab7fdb80fc9e8d2300c803d216d8fdbb0"
+  integrity sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==
+  dependencies:
+    call-bind "^1.0.5"
+    define-properties "^1.2.1"
+    has-symbols "^1.0.3"
+    object-keys "^1.1.1"
+
+object.pick@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
+  integrity sha512-tqa/UMy/CCoYmj+H5qc07qvSL9dqcs/WZENZ1JbtWBlATP+iVOe778gE6MSijnyCnORzDuX6hU+LA4SZ09YjFQ==
+  dependencies:
+    isobject "^3.0.1"
+
 once@^1.3.0, once@^1.3.1, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@@ -3526,6 +4118,11 @@ os-browserify@^0.3.0:
   resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27"
   integrity sha512-gjcpUc3clBf9+210TRaDWbf+rZZZEshZ+DlXMRCeAjp0xhTrnQsKHypIy1J3d5hKdUzj69t708EHtU8P6bUn0A==
 
+os-browserify@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27"
+  integrity sha512-gjcpUc3clBf9+210TRaDWbf+rZZZEshZ+DlXMRCeAjp0xhTrnQsKHypIy1J3d5hKdUzj69t708EHtU8P6bUn0A==
+
 ospath@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/ospath/-/ospath-1.2.2.tgz#1276639774a3f8ef2572f7fe4280e0ea4550c07b"
@@ -3536,6 +4133,7 @@ p-finally@^1.0.0:
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
   integrity sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==
 
+p-limit@^2.0.0, p-limit@^2.2.0:
 p-limit@^2.0.0, p-limit@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
@@ -3550,6 +4148,13 @@ p-locate@^3.0.0:
   dependencies:
     p-limit "^2.0.0"
 
+p-locate@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"
+  integrity sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==
+  dependencies:
+    p-limit "^2.0.0"
+
 p-locate@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
@@ -3583,6 +4188,20 @@ parallel-transform@^1.1.0:
     inherits "^2.0.3"
     readable-stream "^2.1.5"
 
+pako@~1.0.5:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
+  integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
+
+parallel-transform@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/parallel-transform/-/parallel-transform-1.2.0.tgz#9049ca37d6cb2182c3b1d2c720be94d14a5814fc"
+  integrity sha512-P2vSmIu38uIlvdcU7fDkyrxj33gTUy/ABO5ZUbGowxNCopBq/OoD42bP4UmMrJoPyk4Uqf0mu3mtWBhHCZD8yg==
+  dependencies:
+    cyclist "^1.0.1"
+    inherits "^2.0.3"
+    readable-stream "^2.1.5"
+
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -3602,6 +4221,18 @@ parse-asn1@^5.0.0, parse-asn1@^5.1.7:
     pbkdf2 "^3.1.2"
     safe-buffer "^5.2.1"
 
+parse-asn1@^5.0.0, parse-asn1@^5.1.7:
+  version "5.1.7"
+  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.7.tgz#73cdaaa822125f9647165625eb45f8a051d2df06"
+  integrity sha512-CTM5kuWR3sx9IFamcl5ErfPl6ea/N8IYwiJ+vpeB2g+1iknv7zBl5uPwbMbRVznRVbrNY6lGuDoE5b30grmbqg==
+  dependencies:
+    asn1.js "^4.10.1"
+    browserify-aes "^1.2.0"
+    evp_bytestokey "^1.0.3"
+    hash-base "~3.0"
+    pbkdf2 "^3.1.2"
+    safe-buffer "^5.2.1"
+
 parse-json@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
@@ -3676,6 +4307,17 @@ pbkdf2@^3.0.3, pbkdf2@^3.1.2:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+pbkdf2@^3.0.3, pbkdf2@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.1.2.tgz#dd822aa0887580e52f1a039dc3eda108efae3075"
+  integrity sha512-iuh7L6jA7JEGu2WxDwtQP1ddOpaJNC4KlDEFfdQajSGgGPNi4OyDc2R7QnbY2bR9QjBVGwgvTdNJZoE7RaxUMA==
+  dependencies:
+    create-hash "^1.1.2"
+    create-hmac "^1.1.4"
+    ripemd160 "^2.0.1"
+    safe-buffer "^5.0.1"
+    sha.js "^2.4.8"
+
 pend@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
@@ -3691,6 +4333,7 @@ picocolors@^1.0.0:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1"
   integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
 
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
@@ -3737,6 +4380,16 @@ possible-typed-array-names@^1.0.0:
   resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"
   integrity sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==
 
+posix-character-classes@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
+  integrity sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==
+
+possible-typed-array-names@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"
+  integrity sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==
+
 pretty-bytes@^5.6.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
@@ -3776,6 +4429,16 @@ promise-inflight@^1.0.1:
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
   integrity sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==
 
+process@^0.11.10:
+  version "0.11.10"
+  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+  integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
+
+promise-inflight@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
+  integrity sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==
+
 proxy-from-env@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.0.0.tgz#33c50398f70ea7eb96d21f7b817630a55791c7ee"
@@ -3882,6 +4545,21 @@ randomfill@^1.0.3:
     randombytes "^2.0.5"
     safe-buffer "^5.1.0"
 
+randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
+  integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==
+  dependencies:
+    safe-buffer "^5.1.0"
+
+randomfill@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/randomfill/-/randomfill-1.0.4.tgz#c92196fc86ab42be983f1bf31778224931d61458"
+  integrity sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==
+  dependencies:
+    randombytes "^2.0.5"
+    safe-buffer "^5.1.0"
+
 react-error-boundary@^3.1.0:
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-3.1.4.tgz#255db92b23197108757a888b01e5b729919abde0"
@@ -3909,6 +4587,7 @@ read-pkg@^5.2.0:
     parse-json "^5.0.0"
     type-fest "^0.6.0"
 
+"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@^2.3.8, readable-stream@~2.3.6:
 "readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@^2.3.8, readable-stream@~2.3.6:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.8.tgz#91125e8042bba1b9887f49345f6277027ce8be9b"
@@ -3947,6 +4626,31 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
+readable-stream@^3.6.0:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
+  integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
+readdirp@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525"
+  integrity sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==
+  dependencies:
+    graceful-fs "^4.1.11"
+    micromatch "^3.1.10"
+    readable-stream "^2.0.2"
+
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
 regenerator-runtime@^0.14.0:
   version "0.14.1"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
@@ -3992,6 +4696,16 @@ require-main-filename@^2.0.0:
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
   integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
 
+require-directory@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
+  integrity sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==
+
+require-main-filename@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
+  integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
+
 requires-port@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
@@ -4043,6 +4757,11 @@ ret@~0.1.10:
   resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
   integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
 
+ret@~0.1.10:
+  version "0.1.15"
+  resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
+  integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
+
 rfdc@^1.3.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.4.1.tgz#778f76c4fb731d93414e8f925fbecf64cce7f6ca"
@@ -4063,6 +4782,14 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
+ripemd160@^2.0.0, ripemd160@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.2.tgz#a1c1a6f624751577ba5d07914cbc92850585890c"
+  integrity sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==
+  dependencies:
+    hash-base "^3.0.0"
+    inherits "^2.0.1"
+
 run-node@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/run-node/-/run-node-1.0.0.tgz#46b50b946a2aa2d4947ae1d886e9856fd9cabe5e"
@@ -4075,6 +4802,13 @@ run-queue@^1.0.0, run-queue@^1.0.3:
   dependencies:
     aproba "^1.1.1"
 
+run-queue@^1.0.0, run-queue@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47"
+  integrity sha512-ntymy489o0/QQplUDnpYAYUsO50K9SBrIVaKCWDOJzYJts0f9WH9RFJkyagebkw5+y1oi00R7ynNW/d12GBumg==
+  dependencies:
+    aproba "^1.1.1"
+
 rxjs@^7.5.1:
   version "7.8.1"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543"
@@ -4092,6 +4826,17 @@ safe-array-concat@^1.1.2:
     has-symbols "^1.0.3"
     isarray "^2.0.5"
 
+safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@^5.2.0, safe-buffer@^5.2.1, safe-buffer@~5.2.0:
+safe-array-concat@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.1.2.tgz#81d77ee0c4e8b863635227c721278dd524c20edb"
+  integrity sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==
+  dependencies:
+    call-bind "^1.0.7"
+    get-intrinsic "^1.2.4"
+    has-symbols "^1.0.3"
+    isarray "^2.0.5"
+
 safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@^5.2.0, safe-buffer@^5.2.1, safe-buffer@~5.2.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
@@ -4118,6 +4863,22 @@ safe-regex@^1.1.0:
   dependencies:
     ret "~0.1.10"
 
+safe-regex-test@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.3.tgz#a5b4c0f06e0ab50ea2c395c14d8371232924c377"
+  integrity sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==
+  dependencies:
+    call-bind "^1.0.6"
+    es-errors "^1.3.0"
+    is-regex "^1.1.4"
+
+safe-regex@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
+  integrity sha512-aJXcif4xnaNUzvUuC5gcb46oTS7zvg4jpMTnuqtrEPlR3vFr4pxtdTwaF1Qs3Enjn9HK+ZlwQui+a7z0SywIzg==
+  dependencies:
+    ret "~0.1.10"
+
 safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
@@ -4132,6 +4893,15 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
+schema-utils@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
+  integrity sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==
+  dependencies:
+    ajv "^6.1.0"
+    ajv-errors "^1.0.0"
+    ajv-keywords "^3.1.0"
+
 semver-compare@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
@@ -4470,6 +5240,41 @@ string_decoder@^1.0.0, string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.2.0"
 
+string.prototype.trim@^1.2.9:
+  version "1.2.9"
+  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz#b6fa326d72d2c78b6df02f7759c73f8f6274faa4"
+  integrity sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.0"
+    es-object-atoms "^1.0.0"
+
+string.prototype.trimend@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.8.tgz#3651b8513719e8a9f48de7f2f77640b26652b229"
+  integrity sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
+string.prototype.trimstart@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz#7ee834dda8c7c17eff3118472bb35bfedaa34dde"
+  integrity sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
+string_decoder@^1.0.0, string_decoder@^1.1.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
+  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
+  dependencies:
+    safe-buffer "~5.2.0"
+
 string_decoder@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
@@ -4534,6 +5339,12 @@ tapable@^0.1.8:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.1.10.tgz#29c35707c2b70e50d07482b5d202e8ed446dafd4"
   integrity sha512-jX8Et4hHg57mug1/079yitEKWGB3LCwoxByLsNim89LABq8NqgiX+6iYVOsq0vX8uJHkU+DZ5fnq95f800bEsQ==
 
+tapable@^1.0.0, tapable@^1.1.3:
+tapable@^0.1.8:
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.1.10.tgz#29c35707c2b70e50d07482b5d202e8ed446dafd4"
+  integrity sha512-jX8Et4hHg57mug1/079yitEKWGB3LCwoxByLsNim89LABq8NqgiX+6iYVOsq0vX8uJHkU+DZ5fnq95f800bEsQ==
+
 tapable@^1.0.0, tapable@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
@@ -4623,6 +5434,16 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+to-regex@^3.0.1, to-regex@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"
+  integrity sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==
+  dependencies:
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    regex-not "^1.0.2"
+    safe-regex "^1.1.0"
+
 tough-cookie@^4.1.3:
   version "4.1.4"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.4.tgz#945f1461b45b5a8c76821c33ea49c3ac192c1b36"
@@ -4725,6 +5546,55 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==
 
+typed-array-buffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz#1867c5d83b20fcb5ccf32649e5e2fc7424474ff3"
+  integrity sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==
+  dependencies:
+    call-bind "^1.0.7"
+    es-errors "^1.3.0"
+    is-typed-array "^1.1.13"
+
+typed-array-byte-length@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz#d92972d3cff99a3fa2e765a28fcdc0f1d89dec67"
+  integrity sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==
+  dependencies:
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-proto "^1.0.3"
+    is-typed-array "^1.1.13"
+
+typed-array-byte-offset@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz#f9ec1acb9259f395093e4567eb3c28a580d02063"
+  integrity sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==
+  dependencies:
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-proto "^1.0.3"
+    is-typed-array "^1.1.13"
+
+typed-array-length@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.6.tgz#57155207c76e64a3457482dfdc1c9d1d3c4c73a3"
+  integrity sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==
+  dependencies:
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    has-proto "^1.0.3"
+    is-typed-array "^1.1.13"
+    possible-typed-array-names "^1.0.0"
+
+typedarray@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+  integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==
+
 typescript@4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.0.2.tgz#7ea7c88777c723c681e33bf7988be5d008d05ac2"
@@ -4809,6 +5679,23 @@ urix@^0.1.0:
   resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
   integrity sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg==
 
+upath@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
+  integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
+
+uri-js@^4.2.2:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
+  integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
+  dependencies:
+    punycode "^2.1.0"
+
+urix@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
+  integrity sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg==
+
 url-parse@^1.5.3:
   version "1.5.10"
   resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"
@@ -4990,6 +5877,13 @@ worker-farm@^1.7.0:
   dependencies:
     errno "~0.1.7"
 
+worker-farm@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.7.0.tgz#26a94c5391bbca926152002f69b84a4bf772e5a8"
+  integrity sha512-rvw3QTZc8lAxyVrqcSGVm5yP/IJ2UcB3U0graE3LCFoZ0Yn2x4EoVSqJKdB/T5M+FLcRPjz4TDacRf3OCfNUzw==
+  dependencies:
+    errno "~0.1.7"
+
 wrap-ansi@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"
@@ -5063,6 +5957,31 @@ yargs@^15.3.1:
     y18n "^4.0.0"
     yargs-parser "^18.1.2"
 
+yargs-parser@^18.1.2:
+  version "18.1.3"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0"
+  integrity sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
+yargs@^15.3.1:
+  version "15.4.1"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.4.1.tgz#0d87a16de01aee9d8bec2bfbf74f67851730f4f8"
+  integrity sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==
+  dependencies:
+    cliui "^6.0.0"
+    decamelize "^1.2.0"
+    find-up "^4.1.0"
+    get-caller-file "^2.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^2.0.0"
+    set-blocking "^2.0.0"
+    string-width "^4.2.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^18.1.2"
+
 yauzl@^2.10.0:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"