diff --git a/public/pages/CreateDataStream/containers/CreateDataStream/CreateDataStream.test.tsx b/public/pages/CreateDataStream/containers/CreateDataStream/CreateDataStream.test.tsx
index 5c7be025b..34695129c 100644
--- a/public/pages/CreateDataStream/containers/CreateDataStream/CreateDataStream.test.tsx
+++ b/public/pages/CreateDataStream/containers/CreateDataStream/CreateDataStream.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 renderCreateDataStreamWithRouter(initialEntries = [ROUTES.DATA_STREAMS] as string[]) {
   return {
diff --git a/public/pages/CreateDataStream/containers/CreateDataStream/CreateDataStream.tsx b/public/pages/CreateDataStream/containers/CreateDataStream/CreateDataStream.tsx
index 9a075d855..efc094020 100644
--- a/public/pages/CreateDataStream/containers/CreateDataStream/CreateDataStream.tsx
+++ b/public/pages/CreateDataStream/containers/CreateDataStream/CreateDataStream.tsx
@@ -11,17 +11,31 @@ import { CoreServicesContext } from "../../../../components/core_services";
 import { isEqual } from "lodash";
 import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
 import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
+import { getUISettings } from "../../../../services/Services";
 
 interface CreateDataStreamProps extends RouteComponentProps<{ dataStream?: string }>, DataSourceMenuProperties {}
 
-class CreateDataStream extends Component<CreateDataStreamProps> {
+type CreateDataStreamState = {
+  useNewUX: boolean;
+};
+
+class CreateDataStream extends Component<CreateDataStreamProps, CreateDataStreamState> {
   static contextType = CoreServicesContext;
 
+  constructor(props: CreateDataStreamProps) {
+    super(props);
+    const uiSettings = getUISettings();
+    const useNewUX = uiSettings.get("home:useNewHomePage");
+    this.state = {
+      useNewUX: useNewUX,
+    };
+  }
+
   get dataStream() {
     return this.props.match.params.dataStream;
   }
 
-  setBreadCrumb() {
+  setBreadCrumb(useNewUX: boolean) {
     const isEdit = this.dataStream;
     let lastBread: typeof BREADCRUMBS.TEMPLATES;
     if (isEdit) {
@@ -32,17 +46,19 @@ class CreateDataStream extends Component<CreateDataStreamProps> {
     } else {
       lastBread = BREADCRUMBS.CREATE_DATA_STREAM;
     }
-    this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.DATA_STREAMS, lastBread]);
+    let breadCrumbs = useNewUX
+      ? [BREADCRUMBS.DATA_STREAMS, lastBread]
+      : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.DATA_STREAMS, lastBread];
+    this.context.chrome.setBreadcrumbs(breadCrumbs);
   }
-
   componentDidUpdate(prevProps: Readonly<CreateDataStreamProps>): void {
     if (!isEqual(prevProps, this.props)) {
-      this.setBreadCrumb();
+      this.setBreadCrumb(this.state.useNewUX);
     }
   }
 
   componentDidMount = async (): Promise<void> => {
-    this.setBreadCrumb();
+    this.setBreadCrumb(this.state.useNewUX);
   };
 
   onCancel = (): void => {
@@ -50,14 +66,16 @@ class CreateDataStream extends Component<CreateDataStreamProps> {
   };
 
   render() {
+    const padding_style = this.state.useNewUX ? { padding: "0px 0px" } : { padding: "0px 50px" };
     return (
-      <div style={{ padding: "0px 50px" }}>
+      <div style={padding_style}>
         <DataStreamDetail
           history={this.props.history}
           dataStream={this.dataStream}
           onCancel={this.onCancel}
           onSubmitSuccess={() => this.props.history.push(ROUTES.DATA_STREAMS)}
           key={this.props.dataSourceId}
+          useNewUX={this.state.useNewUX}
         />
       </div>
     );
diff --git a/public/pages/CreateDataStream/containers/DataStreamDetail/DataStreamDetail.test.tsx b/public/pages/CreateDataStream/containers/DataStreamDetail/DataStreamDetail.test.tsx
index 594295ac1..7f6bb2fa5 100644
--- a/public/pages/CreateDataStream/containers/DataStreamDetail/DataStreamDetail.test.tsx
+++ b/public/pages/CreateDataStream/containers/DataStreamDetail/DataStreamDetail.test.tsx
@@ -12,6 +12,23 @@ import { CoreServicesContext } from "../../../../components/core_services";
 import { HashRouter, Route } from "react-router-dom";
 import { ROUTES } from "../../../../utils/constants";
 import userEvent from "@testing-library/user-event";
+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 renderCreateDataStream(props: Omit<DataStreamDetailProps, "history">) {
   return {
diff --git a/public/pages/CreateDataStream/containers/DataStreamDetail/DataStreamDetail.tsx b/public/pages/CreateDataStream/containers/DataStreamDetail/DataStreamDetail.tsx
index 8d5a6d199..14a0443e4 100644
--- a/public/pages/CreateDataStream/containers/DataStreamDetail/DataStreamDetail.tsx
+++ b/public/pages/CreateDataStream/containers/DataStreamDetail/DataStreamDetail.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { forwardRef, useContext, useEffect, useImperativeHandle, useRef, Ref, useState } from "react";
-import { EuiButton, EuiButtonEmpty, EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer, EuiTitle } from "@elastic/eui";
+import { EuiButton, EuiButtonEmpty, EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer, EuiTitle, EuiText } from "@elastic/eui";
 import { TemplateItemRemote } from "../../../../../models/interfaces";
 import useField, { FieldInstance } from "../../../../lib/field";
 import CustomFormRow from "../../../../components/CustomFormRow";
@@ -25,6 +25,9 @@ import { ContentPanel } from "../../../../components/ContentPanel";
 import { DataStreamInEdit } from "../../interface";
 import BackingIndices from "../BackingIndices";
 import DataStreamsActions from "../../../DataStreams/containers/DataStreamsActions";
+import { ExternalLink } from "../../../utils/display-utils";
+import { getApplication, getNavigationUI } from "../../../../services/Services";
+import { TopNavControlButtonData } from "../../../../../../../src/plugins/navigation/public";
 
 export interface DataStreamDetailProps {
   dataStream?: string;
@@ -32,6 +35,7 @@ export interface DataStreamDetailProps {
   onSubmitSuccess?: (templateName: string) => void;
   readonly?: boolean;
   history: RouteComponentProps["history"];
+  useNewUX: boolean;
 }
 
 const DataStreamDetail = (props: DataStreamDetailProps, ref: Ref<FieldInstance>) => {
@@ -107,52 +111,103 @@ const DataStreamDetail = (props: DataStreamDetailProps, ref: Ref<FieldInstance>)
     field,
   };
 
+  const descriptionData = [
+    {
+      renderComponent: (
+        <EuiText size="s" color="subdued">
+          A data stream is composed of multiple backing indexes. Search requests are routed to all the backing indexes, while indexing
+          requests <br></br>
+          are routed to the latest write index.
+          <ExternalLink href={coreServices.docLinks.links.opensearch.dataStreams} />
+        </EuiText>
+      ),
+    },
+  ];
+
+  const controlsData = [
+    {
+      renderComponent: (
+        <DataStreamsActions
+          selectedItems={values ? ([values] as DataStreamInEdit[]) : []}
+          history={props.history}
+          onDelete={() => props.history.replace(ROUTES.DATA_STREAMS)}
+          useNewUX={props.useNewUX}
+        />
+      ),
+    },
+    {
+      id: "viewJson",
+      label: "View JSON",
+      testId: "dataStreamJSONDetailModal",
+      run: () => {
+        Modal.show({
+          "data-test-subj": "dataStreamJSONDetailModal",
+          title: values.name,
+          content: <JSONEditor value={JSON.stringify(values, null, 2)} disabled />,
+        });
+      },
+      controlType: "button",
+      display: "base",
+      fill: true,
+    } as TopNavControlButtonData,
+  ];
+
+  const { HeaderControl } = getNavigationUI();
+  const { setAppRightControls, setAppDescriptionControls } = getApplication();
+
   return (
     <>
-      <EuiFlexGroup alignItems="center">
-        <EuiFlexItem>
-          <EuiTitle size="l">{isEdit ? <h1 title={values.name}>{values.name}</h1> : <h1>Create data stream</h1>}</EuiTitle>
-          {isEdit ? null : (
-            <CustomFormRow
-              fullWidth
-              label=""
-              helpText={
-                <div>
-                  A data stream is composed of multiple backing indexes. Search requests are routed to all the backing indexes, while
-                  indexing requests are routed to the latest write index.{" "}
-                  <EuiLink target="_blank" external href={coreServices.docLinks.links.opensearch.dataStreams}>
-                    Learn more
-                  </EuiLink>
-                </div>
-              }
-            >
-              <></>
-            </CustomFormRow>
-          )}
-        </EuiFlexItem>
-        {isEdit ? (
-          <EuiFlexItem grow={false} style={{ flexDirection: "row" }}>
-            <EuiButton
-              style={{ marginRight: 20 }}
-              onClick={() => {
-                Modal.show({
-                  "data-test-subj": "dataStreamJSONDetailModal",
-                  title: values.name,
-                  content: <JSONEditor value={JSON.stringify(values, null, 2)} disabled />,
-                });
-              }}
-            >
-              View JSON
-            </EuiButton>
-            <DataStreamsActions
-              selectedItems={values ? ([values] as DataStreamInEdit[]) : []}
-              history={props.history}
-              onDelete={() => props.history.replace(ROUTES.DATA_STREAMS)}
-            />
-          </EuiFlexItem>
-        ) : null}
-      </EuiFlexGroup>
-      <EuiSpacer />
+      {!isEdit && props.useNewUX && <HeaderControl setMountPoint={setAppDescriptionControls} controls={descriptionData} />}
+      {isEdit && props.useNewUX && <HeaderControl setMountPoint={setAppRightControls} controls={controlsData} />}
+      {!props.useNewUX && (
+        <>
+          <EuiFlexGroup alignItems="center">
+            <EuiFlexItem>
+              <EuiTitle size="l">{isEdit ? <h1 title={values.name}>{values.name}</h1> : <h1>Create data stream</h1>}</EuiTitle>
+              {isEdit ? null : (
+                <CustomFormRow
+                  fullWidth
+                  label=""
+                  helpText={
+                    <div>
+                      A data stream is composed of multiple backing indexes. Search requests are routed to all the backing indexes, while
+                      indexing requests are routed to the latest write index.{" "}
+                      <EuiLink target="_blank" external href={coreServices.docLinks.links.opensearch.dataStreams}>
+                        Learn more
+                      </EuiLink>
+                    </div>
+                  }
+                >
+                  <></>
+                </CustomFormRow>
+              )}
+            </EuiFlexItem>
+
+            {isEdit ? (
+              <EuiFlexItem grow={false} style={{ flexDirection: "row" }}>
+                <EuiButton
+                  style={{ marginRight: 20 }}
+                  onClick={() => {
+                    Modal.show({
+                      "data-test-subj": "dataStreamJSONDetailModal",
+                      title: values.name,
+                      content: <JSONEditor value={JSON.stringify(values, null, 2)} disabled />,
+                    });
+                  }}
+                >
+                  View JSON
+                </EuiButton>
+                <DataStreamsActions
+                  selectedItems={values ? ([values] as DataStreamInEdit[]) : []}
+                  history={props.history}
+                  onDelete={() => props.history.replace(ROUTES.DATA_STREAMS)}
+                />
+              </EuiFlexItem>
+            ) : null}
+          </EuiFlexGroup>
+          <EuiSpacer />
+        </>
+      )}
       {!isLoading && !templates.length && !isEdit ? (
         <>
           <EuiCallOut title="No data stream templates created" color="warning">
diff --git a/public/pages/CreateRollup/containers/CreateRollup/CreateRollup.tsx b/public/pages/CreateRollup/containers/CreateRollup/CreateRollup.tsx
index ddef06dc0..e61fc13d1 100644
--- a/public/pages/CreateRollup/containers/CreateRollup/CreateRollup.tsx
+++ b/public/pages/CreateRollup/containers/CreateRollup/CreateRollup.tsx
@@ -33,6 +33,7 @@ interface CreateRollupProps extends RouteComponentProps, DataSourceMenuPropertie
   onChangeTargetIndex: (options: EuiComboBoxOptionOption<IndexItem>[]) => void;
   currentStep: number;
   hasAggregation: boolean;
+  useNewUX: boolean;
 }
 
 export default class CreateRollup extends Component<CreateRollupProps> {
@@ -41,17 +42,28 @@ export default class CreateRollup extends Component<CreateRollupProps> {
       return null;
     }
 
+    const getTitle = !this.props.useNewUX
+      ? () => {
+          return (
+            <>
+              <EuiTitle size="l">
+                <h1>Set up indices</h1>
+              </EuiTitle>
+              <EuiSpacer />
+            </>
+          );
+        }
+      : () => {};
+    const padding_style = this.props.useNewUX ? { padding: "0px 0px" } : { padding: "5px 50px" };
+
     return (
-      <div style={{ padding: "5px 50px" }}>
+      <div style={padding_style}>
         <EuiFlexGroup>
           <EuiFlexItem style={{ maxWidth: 300 }} grow={false}>
             <CreateRollupSteps step={1} />
           </EuiFlexItem>
           <EuiFlexItem>
-            <EuiTitle size="l">
-              <h1>Set up indices</h1>
-            </EuiTitle>
-            <EuiSpacer />
+            {getTitle()}
             <ConfigureRollup isEdit={false} {...this.props} />
             <EuiSpacer />
             <RollupIndices key={this.props.dataSourceId} {...this.props} />
diff --git a/public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.test.tsx b/public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.test.tsx
index e01642d13..3e498fbbc 100644
--- a/public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.test.tsx
+++ b/public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.test.tsx
@@ -16,6 +16,23 @@ import { BREADCRUMBS, ROUTES } from "../../../../utils/constants";
 import CreateRollupForm from "./CreateRollupForm";
 import { CoreServicesContext } from "../../../../components/core_services";
 import { DataStream } 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({});
+});
 
 const sampleMapping = {
   index_1: {
diff --git a/public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.tsx b/public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.tsx
index c7cc2ea8b..88181854b 100644
--- a/public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.tsx
+++ b/public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.tsx
@@ -28,6 +28,7 @@ import {
   DataSourceMenuReadOnlyProperties,
 } from "../../../../services/DataSourceMenuContext";
 import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
+import { getUISettings } from "../../../../services/Services";
 
 interface CreateRollupFormProps extends RouteComponentProps, DataSourceMenuProperties, DataSourceMenuReadOnlyProperties {
   rollupService: RollupService;
@@ -80,6 +81,7 @@ interface CreateRollupFormState {
   delayTime: number | undefined;
   delayTimeunit: string;
   rollupJSON: any;
+  useNewUX: boolean;
 }
 
 export class CreateRollupForm extends Component<CreateRollupFormProps, CreateRollupFormState> {
@@ -138,14 +140,22 @@ export class CreateRollupForm extends Component<CreateRollupFormProps, CreateRol
   constructor(props: CreateRollupFormProps) {
     super(props);
 
-    this.state = CreateRollupForm.baseState;
+    const uiSettings = getUISettings();
+    const useNewUX = uiSettings.get("home:useNewHomePage");
+    this.state = {
+      ...CreateRollupForm.baseState,
+      useNewUX: useNewUX,
+    };
     this._next = this._next.bind(this);
     this._prev = this._prev.bind(this);
     this._isMount = true;
   }
 
   componentDidMount = async (): Promise<void> => {
-    this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.ROLLUPS, BREADCRUMBS.CREATE_ROLLUP]);
+    const breadCrumbs = this.state.useNewUX
+      ? [BREADCRUMBS.ROLLUPS, BREADCRUMBS.CREATE_ROLLUP]
+      : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.ROLLUPS, BREADCRUMBS.CREATE_ROLLUP];
+    this.context.chrome.setBreadcrumbs(breadCrumbs);
   };
 
   componentWillUnmount() {
@@ -588,6 +598,7 @@ export class CreateRollupForm extends Component<CreateRollupFormProps, CreateRol
       pageSize,
       delayTime,
       delayTimeunit,
+      useNewUX,
     } = this.state;
     return (
       <form onSubmit={this.onSubmit}>
@@ -609,6 +620,7 @@ export class CreateRollupForm extends Component<CreateRollupFormProps, CreateRol
           onChangeTargetIndex={this.onChangeTargetIndex}
           currentStep={this.state.currentStep}
           hasAggregation={selectedDimensionField.length != 0 || selectedMetrics.length != 0}
+          useNewUX={useNewUX}
         />
         <CreateRollupStep2
           {...this.props}
@@ -631,6 +643,7 @@ export class CreateRollupForm extends Component<CreateRollupFormProps, CreateRol
           onChangeTimezone={this.onChangeTimezone}
           onDimensionSelectionChange={this.onDimensionSelectionChange}
           onMetricSelectionChange={this.onMetricSelectionChange}
+          useNewUX={useNewUX}
         />
         <CreateRollupStep3
           {...this.props}
@@ -656,6 +669,7 @@ export class CreateRollupForm extends Component<CreateRollupFormProps, CreateRol
           onChangeContinuousJob={this.onChangeContinuousJob}
           onChangeDelayTimeunit={this.onChangeDelayTimeunit}
           onChangeIntervalTimeunit={this.onChangeIntervalTimeunit}
+          useNewUX={useNewUX}
         />
         <CreateRollupStep4
           {...this.props}
@@ -683,6 +697,7 @@ export class CreateRollupForm extends Component<CreateRollupFormProps, CreateRol
           currentStep={this.state.currentStep}
           onChangeStep={this.onChangeStep}
           submitError={submitError}
+          useNewUX={useNewUX}
         />
         <EuiFlexGroup alignItems="center" justifyContent="flexEnd" style={{ padding: "5px 50px" }}>
           <EuiFlexItem grow={false}>
diff --git a/public/pages/CreateRollup/containers/CreateRollupStep2/CreateRollupStep2.tsx b/public/pages/CreateRollup/containers/CreateRollupStep2/CreateRollupStep2.tsx
index 0f581d7c4..3ddf6c6b0 100644
--- a/public/pages/CreateRollup/containers/CreateRollupStep2/CreateRollupStep2.tsx
+++ b/public/pages/CreateRollup/containers/CreateRollupStep2/CreateRollupStep2.tsx
@@ -36,6 +36,7 @@ interface CreateRollupStep2Props extends RouteComponentProps {
   onChangeTimezone: (e: ChangeEvent<HTMLSelectElement>) => void;
   onDimensionSelectionChange: (selectedFields: DimensionItem[]) => void;
   onMetricSelectionChange: (selectedFields: MetricItem[]) => void;
+  useNewUX: boolean;
 }
 
 export default class CreateRollupStep2 extends Component<CreateRollupStep2Props> {
@@ -56,18 +57,29 @@ export default class CreateRollupStep2 extends Component<CreateRollupStep2Props>
     if (this.props.currentStep !== 2) return null;
     const { fields, timestamp } = this.props;
 
+    const getTitle = !this.props.useNewUX
+      ? () => {
+          return (
+            <>
+              <EuiTitle size="l">
+                <h1>Define aggregations and metrics</h1>
+              </EuiTitle>
+              <EuiSpacer />
+            </>
+          );
+        }
+      : () => {};
+    const padding_style = this.props.useNewUX ? { padding: "0px 0px" } : { padding: "5px 50px" };
+
     return (
-      <div style={{ padding: "5px 50px" }}>
+      <div style={padding_style}>
         <EuiFlexGroup>
           <EuiFlexItem style={{ maxWidth: 300 }} grow={false}>
             <CreateRollupSteps step={2} />
           </EuiFlexItem>
 
           <EuiFlexItem>
-            <EuiTitle size="l">
-              <h1>Define aggregations and metrics</h1>
-            </EuiTitle>
-            <EuiSpacer />
+            {getTitle()}
 
             <TimeAggregation {...this.props} selectedTimestamp={timestamp} fieldsOption={fields} />
             <EuiSpacer />
diff --git a/public/pages/CreateRollup/containers/CreateRollupStep3/CreateRollupStep3.tsx b/public/pages/CreateRollup/containers/CreateRollupStep3/CreateRollupStep3.tsx
index f8ce05b6e..1875865f6 100644
--- a/public/pages/CreateRollup/containers/CreateRollupStep3/CreateRollupStep3.tsx
+++ b/public/pages/CreateRollup/containers/CreateRollupStep3/CreateRollupStep3.tsx
@@ -38,6 +38,7 @@ interface CreateRollupProps extends RouteComponentProps {
   onChangeContinuousJob: (optionId: string) => void;
   onChangeDelayTimeunit: (e: ChangeEvent<HTMLSelectElement>) => void;
   onChangeIntervalTimeunit: (e: ChangeEvent<HTMLSelectElement>) => void;
+  useNewUX: boolean;
 }
 
 interface CreateRollupState {
@@ -139,16 +140,29 @@ export default class CreateRollupStep3 extends Component<CreateRollupProps, Crea
       onChangeIntervalTimeunit,
     } = this.props;
     const { rollupId, rollupIdError } = this.state;
+
+    const getTitle = !this.props.useNewUX
+      ? () => {
+          return (
+            <>
+              <EuiTitle size="l">
+                <h1>Specify schedule</h1>
+              </EuiTitle>
+              <EuiSpacer />
+            </>
+          );
+        }
+      : () => {};
+    const padding_style = this.props.useNewUX ? { padding: "0px 0px" } : { padding: "5px 50px" };
+
     return (
-      <div style={{ padding: "5px 50px" }}>
+      <div style={padding_style}>
         <EuiFlexGroup>
           <EuiFlexItem style={{ maxWidth: 300 }} grow={false}>
             <CreateRollupSteps step={3} />
           </EuiFlexItem>
           <EuiFlexItem>
-            <EuiTitle size="l">
-              <h1>Specify schedule</h1>
-            </EuiTitle>
+            {getTitle()}
             <EuiSpacer />
             <Schedule
               {...this.props}
diff --git a/public/pages/CreateRollup/containers/CreateRollupStep4/CreateRollupStep4.tsx b/public/pages/CreateRollup/containers/CreateRollupStep4/CreateRollupStep4.tsx
index a6d377070..2da19f364 100644
--- a/public/pages/CreateRollup/containers/CreateRollupStep4/CreateRollupStep4.tsx
+++ b/public/pages/CreateRollup/containers/CreateRollupStep4/CreateRollupStep4.tsx
@@ -43,6 +43,7 @@ interface CreateRollupProps extends RouteComponentProps {
   pageSize: number;
   delayTime: number | undefined;
   delayTimeunit: string;
+  useNewUX: boolean;
 }
 
 export default class CreateRollupStep4 extends Component<CreateRollupProps> {
@@ -62,17 +63,28 @@ export default class CreateRollupStep4 extends Component<CreateRollupProps> {
   render() {
     if (this.props.currentStep != 4) return null;
 
+    const getTitle = !this.props.useNewUX
+      ? () => {
+          return (
+            <>
+              <EuiTitle size="l">
+                <h1>Review and create</h1>
+              </EuiTitle>
+              <EuiSpacer />
+            </>
+          );
+        }
+      : () => {};
+    const padding_style = this.props.useNewUX ? { padding: "0px 0px" } : { padding: "5px 50px" };
+
     return (
-      <div style={{ padding: "5px 50px" }}>
+      <div style={padding_style}>
         <EuiFlexGroup>
           <EuiFlexItem style={{ maxWidth: 300 }} grow={false}>
             <CreateRollupSteps step={4} />
           </EuiFlexItem>
           <EuiFlexItem>
-            <EuiTitle size="l">
-              <h1>Review and create</h1>
-            </EuiTitle>
-            <EuiSpacer />
+            {getTitle()}
             <JobNameAndIndices {...this.props} />
             <EuiSpacer />
             <HistogramAndMetrics {...this.props} />
diff --git a/public/pages/DataStreams/components/IndexControls/IndexControls.tsx b/public/pages/DataStreams/components/IndexControls/IndexControls.tsx
index 6864a1e3b..b7d88bfae 100644
--- a/public/pages/DataStreams/components/IndexControls/IndexControls.tsx
+++ b/public/pages/DataStreams/components/IndexControls/IndexControls.tsx
@@ -11,6 +11,7 @@ export interface SearchControlsProps {
     search: string;
   };
   onSearchChange: (args: SearchControlsProps["value"]) => void;
+  useNewUX?: boolean;
 }
 
 export default function SearchControls(props: SearchControlsProps) {
@@ -29,7 +30,13 @@ export default function SearchControls(props: SearchControlsProps) {
   return (
     <EuiFlexGroup style={{ padding: "0px 5px" }} alignItems="center">
       <EuiFlexItem>
-        <EuiFieldSearch fullWidth placeholder="Search..." value={state.search} onChange={(e) => onChange("search", e.target.value)} />
+        <EuiFieldSearch
+          fullWidth
+          placeholder="Search..."
+          value={state.search}
+          onChange={(e) => onChange("search", e.target.value)}
+          compressed={props.useNewUX}
+        />
       </EuiFlexItem>
     </EuiFlexGroup>
   );
diff --git a/public/pages/DataStreams/containers/DataStreams/DataStreams.test.tsx b/public/pages/DataStreams/containers/DataStreams/DataStreams.test.tsx
index a3dff2001..978098a9e 100644
--- a/public/pages/DataStreams/containers/DataStreams/DataStreams.test.tsx
+++ b/public/pages/DataStreams/containers/DataStreams/DataStreams.test.tsx
@@ -16,6 +16,23 @@ import { CoreServicesContext } from "../../../../components/core_services";
 import userEvent from "@testing-library/user-event";
 import { DataStreamStats, DataStreamWithStats } from "../../interface";
 import { DataStream } 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({});
+});
 
 function renderWithRouter() {
   return {
diff --git a/public/pages/DataStreams/containers/DataStreams/DataStreams.tsx b/public/pages/DataStreams/containers/DataStreams/DataStreams.tsx
index 3fbb7cbfe..4d4eff388 100644
--- a/public/pages/DataStreams/containers/DataStreams/DataStreams.tsx
+++ b/public/pages/DataStreams/containers/DataStreams/DataStreams.tsx
@@ -23,6 +23,8 @@ import {
   EuiText,
   EuiHealth,
   EuiToolTip,
+  EuiFlexGroup,
+  EuiFlexItem,
 } from "@elastic/eui";
 import { ContentPanel, ContentPanelActions } from "../../../../components/ContentPanel";
 import { DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_QUERY_PARAMS, HEALTH_TO_COLOR } from "../../utils/constants";
@@ -37,6 +39,9 @@ import { CoreStart } from "opensearch-dashboards/public";
 import { DataStream } from "../../../../../server/models/interfaces";
 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";
+import { ExternalLink } from "../../../utils/display-utils";
 
 interface DataStreamsProps extends RouteComponentProps, DataSourceMenuProperties {
   commonService: CommonService;
@@ -51,6 +56,7 @@ type DataStreamsState = {
   selectedItems: DataStreamWithStats[];
   dataStreams: DataStreamWithStats[];
   loading: boolean;
+  useNewUX: boolean;
 } & SearchControlsProps["value"] &
   DataSourceMenuProperties;
 
@@ -68,6 +74,8 @@ class DataStreams extends MDSEnabledComponent<DataStreamsProps, DataStreamsState
   static contextType = CoreServicesContext;
   constructor(props: DataStreamsProps) {
     super(props);
+    const uiSettings = getUISettings();
+    const useNewUx = uiSettings.get("home:useNewHomePage");
     const {
       from = DEFAULT_QUERY_PARAMS.from,
       size = DEFAULT_QUERY_PARAMS.size,
@@ -93,6 +101,7 @@ class DataStreams extends MDSEnabledComponent<DataStreamsProps, DataStreamsState
       selectedItems: [],
       dataStreams: [],
       loading: false,
+      useNewUX: useNewUx,
     };
 
     this.getDataStreams = debounce(this.getDataStreams, 500, { leading: true });
@@ -105,7 +114,8 @@ class DataStreams extends MDSEnabledComponent<DataStreamsProps, DataStreamsState
     }
   }
   componentDidMount() {
-    this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.DATA_STREAMS]);
+    let breadCrumbs = this.state.useNewUX ? [BREADCRUMBS.DATA_STREAMS] : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.DATA_STREAMS];
+    this.context.chrome.setBreadcrumbs(breadCrumbs);
     this.getDataStreams();
   }
 
@@ -230,8 +240,12 @@ class DataStreams extends MDSEnabledComponent<DataStreamsProps, DataStreamsState
     this.setState({ from: "0", ...params }, () => this.getDataStreams());
   };
 
+  onClickDataStreamCreate = () => {
+    this.props.history.push(ROUTES.CREATE_DATA_STREAM);
+  };
+
   render() {
-    const { totalDataStreams, from, size, sortField, sortDirection, dataStreams } = this.state;
+    const { totalDataStreams, from, size, sortField, sortDirection, dataStreams, useNewUX } = this.state;
 
     const pagination: Pagination = {
       pageIndex: Number(from),
@@ -250,180 +264,353 @@ class DataStreams extends MDSEnabledComponent<DataStreamsProps, DataStreamsState
     const selection: EuiTableSelectionType<DataStreamWithStats> = {
       onSelectionChange: this.onSelectionChange,
     };
-    return (
-      <ContentPanel
-        actions={
-          <ContentPanelActions
-            actions={[
+
+    const { HeaderControl } = getNavigationUI();
+    const { setAppRightControls, setAppDescriptionControls } = getApplication();
+
+    const constrolsData = [
+      {
+        id: "Create data stream",
+        label: "Create data stream",
+        testId: "createDataStreamButton",
+        run: this.onClickDataStreamCreate,
+        fill: true,
+        controlType: "button",
+      } as TopNavControlButtonData,
+    ];
+
+    const descriptionData = [
+      {
+        renderComponent: (
+          <EuiText size="s" color="subdued">
+            Data streams simplify the management of time-series data. Data streams are composed of multiple backing indexes. Search{" "}
+            <br></br>
+            requests are routed to all backing indexes, while indexing requests are routed to the latest write index.
+            <ExternalLink href={(this.context as CoreStart).docLinks.links.opensearch.dataStreams} />
+          </EuiText>
+        ),
+      },
+    ];
+
+    return useNewUX ? (
+      <>
+        <HeaderControl setMountPoint={setAppRightControls} controls={constrolsData} />
+        <HeaderControl setMountPoint={setAppDescriptionControls} controls={descriptionData} />
+        <ContentPanel>
+          <EuiFlexGroup gutterSize="s" alignItems="center">
+            <EuiFlexItem grow={true}>
+              <IndexControls
+                value={{
+                  search: this.state.search,
+                }}
+                onSearchChange={this.onSearchChange}
+                useNewUX={useNewUX}
+              />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <DataStreamsActions
+                selectedItems={this.state.selectedItems}
+                onDelete={this.getDataStreams}
+                history={this.props.history}
+                useNewUX={useNewUX}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          {/* <EuiHorizontalRule margin="xs" /> */}
+
+          <EuiBasicTable
+            data-test-subj="dataStreamsTable"
+            loading={this.state.loading}
+            columns={[
+              {
+                field: "name",
+                name: "Data stream name",
+                sortable: true,
+                render: (value: unknown) => {
+                  return (
+                    <Link to={`${ROUTES.CREATE_DATA_STREAM}/${value}/readonly`}>
+                      <EuiLink>{value}</EuiLink>
+                    </Link>
+                  );
+                },
+              },
               {
-                text: "",
-                children: (
-                  <DataStreamsActions
-                    selectedItems={this.state.selectedItems}
-                    onDelete={this.getDataStreams}
-                    history={this.props.history}
-                  />
-                ),
+                field: "status",
+                name: "Status",
+                sortable: true,
+                render: (health: string, item) => {
+                  const healthLowerCase = health?.toLowerCase() as "green" | "yellow" | "red";
+                  const color = health ? HEALTH_TO_COLOR[healthLowerCase] : "subdued";
+                  const text = (health || item.status || "").toLowerCase();
+                  return (
+                    <EuiToolTip content={healthExplanation[healthLowerCase] || ""}>
+                      <EuiHealth color={color} className="indices-health">
+                        {text}
+                      </EuiHealth>
+                    </EuiToolTip>
+                  );
+                },
               },
               {
-                text: "Create data stream",
-                buttonProps: {
-                  fill: true,
-                  onClick: () => {
-                    this.props.history.push(ROUTES.CREATE_DATA_STREAM);
-                  },
+                field: "template",
+                name: "Template",
+                sortable: true,
+                render: (value: unknown) => {
+                  return (
+                    <Link to={`${ROUTES.CREATE_TEMPLATE}/${value}`}>
+                      <EuiLink>{value}</EuiLink>
+                    </Link>
+                  );
+                },
+              },
+              {
+                field: "backing_indices",
+                name: "Backing indexes count",
+                sortable: true,
+                align: "right",
+              },
+              {
+                field: "store_size_bytes",
+                name: "Total size",
+                sortable: true,
+                align: "right",
+                render: (value, record) => {
+                  return <>{record.store_size || ""}</>;
                 },
               },
             ]}
+            isSelectable={true}
+            itemId="name"
+            items={dataStreams}
+            onChange={this.onTableChange}
+            pagination={pagination}
+            selection={selection}
+            sorting={sorting}
+            noItemsMessage={
+              isEqual(
+                {
+                  search: this.state.search,
+                },
+                defaultFilter
+              ) ? (
+                <EuiEmptyPrompt
+                  body={
+                    <EuiText>
+                      <p>You have no data streams.</p>
+                    </EuiText>
+                  }
+                  actions={[
+                    <EuiButton
+                      fill
+                      onClick={() => {
+                        this.props.history.push(ROUTES.CREATE_DATA_STREAM);
+                      }}
+                    >
+                      Create data stream
+                    </EuiButton>,
+                  ]}
+                />
+              ) : (
+                <EuiEmptyPrompt
+                  body={
+                    <EuiText>
+                      <p>There are no data streams matching your applied filters. Reset your filters to view your data streams.</p>
+                    </EuiText>
+                  }
+                  actions={[
+                    <EuiButton
+                      fill
+                      onClick={() => {
+                        this.setState(defaultFilter, () => {
+                          this.getDataStreams();
+                        });
+                      }}
+                    >
+                      Reset filters
+                    </EuiButton>,
+                  ]}
+                />
+              )
+            }
           />
-        }
-        bodyStyles={{ padding: "initial" }}
-        title={
-          <>
-            <EuiTitle>
-              <span>Data streams</span>
-            </EuiTitle>
-            <EuiFormRow
-              fullWidth
-              helpText={
-                <div>
-                  Data streams simplify the management of time-series data. Data streams are composed of multiple backing indexes. Search
-                  requests are routed to all backing indexes, while indexing requests are routed to the latest write index.{" "}
-                  <EuiLink target="_blank" external href={(this.context as CoreStart).docLinks.links.opensearch.dataStreams}>
-                    Learn more
-                  </EuiLink>
-                </div>
-              }
-            >
-              <></>
-            </EuiFormRow>
-          </>
-        }
-      >
-        <IndexControls
-          value={{
-            search: this.state.search,
-          }}
-          onSearchChange={this.onSearchChange}
-        />
-        <EuiHorizontalRule margin="xs" />
-
-        <EuiBasicTable
-          data-test-subj="dataStreamsTable"
-          loading={this.state.loading}
-          columns={[
-            {
-              field: "name",
-              name: "Data stream name",
-              sortable: true,
-              render: (value: unknown) => {
-                return (
-                  <Link to={`${ROUTES.CREATE_DATA_STREAM}/${value}/readonly`}>
-                    <EuiLink>{value}</EuiLink>
-                  </Link>
-                );
+        </ContentPanel>
+      </>
+    ) : (
+      <>
+        <ContentPanel
+          actions={
+            <ContentPanelActions
+              actions={[
+                {
+                  text: "",
+                  children: (
+                    <DataStreamsActions
+                      selectedItems={this.state.selectedItems}
+                      onDelete={this.getDataStreams}
+                      history={this.props.history}
+                    />
+                  ),
+                },
+                {
+                  text: "Create data stream",
+                  buttonProps: {
+                    fill: true,
+                    onClick: () => {
+                      this.props.history.push(ROUTES.CREATE_DATA_STREAM);
+                    },
+                  },
+                },
+              ]}
+            />
+          }
+          bodyStyles={{ padding: "initial" }}
+          title={
+            <>
+              <EuiTitle>
+                <span>Data streams</span>
+              </EuiTitle>
+              <EuiFormRow
+                fullWidth
+                helpText={
+                  <div>
+                    Data streams simplify the management of time-series data. Data streams are composed of multiple backing indexes. Search
+                    requests are routed to all backing indexes, while indexing requests are routed to the latest write index.{" "}
+                    <EuiLink target="_blank" external href={(this.context as CoreStart).docLinks.links.opensearch.dataStreams}>
+                      Learn more
+                    </EuiLink>
+                  </div>
+                }
+              >
+                <></>
+              </EuiFormRow>
+            </>
+          }
+        >
+          <IndexControls
+            value={{
+              search: this.state.search,
+            }}
+            onSearchChange={this.onSearchChange}
+          />
+          <EuiHorizontalRule margin="xs" />
+
+          <EuiBasicTable
+            data-test-subj="dataStreamsTable"
+            loading={this.state.loading}
+            columns={[
+              {
+                field: "name",
+                name: "Data stream name",
+                sortable: true,
+                render: (value: unknown) => {
+                  return (
+                    <Link to={`${ROUTES.CREATE_DATA_STREAM}/${value}/readonly`}>
+                      <EuiLink>{value}</EuiLink>
+                    </Link>
+                  );
+                },
               },
-            },
-            {
-              field: "status",
-              name: "Status",
-              sortable: true,
-              render: (health: string, item) => {
-                const healthLowerCase = health?.toLowerCase() as "green" | "yellow" | "red";
-                const color = health ? HEALTH_TO_COLOR[healthLowerCase] : "subdued";
-                const text = (health || item.status || "").toLowerCase();
-                return (
-                  <EuiToolTip content={healthExplanation[healthLowerCase] || ""}>
-                    <EuiHealth color={color} className="indices-health">
-                      {text}
-                    </EuiHealth>
-                  </EuiToolTip>
-                );
+              {
+                field: "status",
+                name: "Status",
+                sortable: true,
+                render: (health: string, item) => {
+                  const healthLowerCase = health?.toLowerCase() as "green" | "yellow" | "red";
+                  const color = health ? HEALTH_TO_COLOR[healthLowerCase] : "subdued";
+                  const text = (health || item.status || "").toLowerCase();
+                  return (
+                    <EuiToolTip content={healthExplanation[healthLowerCase] || ""}>
+                      <EuiHealth color={color} className="indices-health">
+                        {text}
+                      </EuiHealth>
+                    </EuiToolTip>
+                  );
+                },
               },
-            },
-            {
-              field: "template",
-              name: "Template",
-              sortable: true,
-              render: (value: unknown) => {
-                return (
-                  <Link to={`${ROUTES.CREATE_TEMPLATE}/${value}`}>
-                    <EuiLink>{value}</EuiLink>
-                  </Link>
-                );
+              {
+                field: "template",
+                name: "Template",
+                sortable: true,
+                render: (value: unknown) => {
+                  return (
+                    <Link to={`${ROUTES.CREATE_TEMPLATE}/${value}`}>
+                      <EuiLink>{value}</EuiLink>
+                    </Link>
+                  );
+                },
               },
-            },
-            {
-              field: "backing_indices",
-              name: "Backing indexes count",
-              sortable: true,
-              align: "right",
-            },
-            {
-              field: "store_size_bytes",
-              name: "Total size",
-              sortable: true,
-              align: "right",
-              render: (value, record) => {
-                return <>{record.store_size || ""}</>;
+              {
+                field: "backing_indices",
+                name: "Backing indexes count",
+                sortable: true,
+                align: "right",
               },
-            },
-          ]}
-          isSelectable={true}
-          itemId="name"
-          items={dataStreams}
-          onChange={this.onTableChange}
-          pagination={pagination}
-          selection={selection}
-          sorting={sorting}
-          noItemsMessage={
-            isEqual(
               {
-                search: this.state.search,
+                field: "store_size_bytes",
+                name: "Total size",
+                sortable: true,
+                align: "right",
+                render: (value, record) => {
+                  return <>{record.store_size || ""}</>;
+                },
               },
-              defaultFilter
-            ) ? (
-              <EuiEmptyPrompt
-                body={
-                  <EuiText>
-                    <p>You have no data streams.</p>
-                  </EuiText>
-                }
-                actions={[
-                  <EuiButton
-                    fill
-                    onClick={() => {
-                      this.props.history.push(ROUTES.CREATE_DATA_STREAM);
-                    }}
-                  >
-                    Create data stream
-                  </EuiButton>,
-                ]}
-              />
-            ) : (
-              <EuiEmptyPrompt
-                body={
-                  <EuiText>
-                    <p>There are no data streams matching your applied filters. Reset your filters to view your data streams.</p>
-                  </EuiText>
-                }
-                actions={[
-                  <EuiButton
-                    fill
-                    onClick={() => {
-                      this.setState(defaultFilter, () => {
-                        this.getDataStreams();
-                      });
-                    }}
-                  >
-                    Reset filters
-                  </EuiButton>,
-                ]}
-              />
-            )
-          }
-        />
-      </ContentPanel>
+            ]}
+            isSelectable={true}
+            itemId="name"
+            items={dataStreams}
+            onChange={this.onTableChange}
+            pagination={pagination}
+            selection={selection}
+            sorting={sorting}
+            noItemsMessage={
+              isEqual(
+                {
+                  search: this.state.search,
+                },
+                defaultFilter
+              ) ? (
+                <EuiEmptyPrompt
+                  body={
+                    <EuiText>
+                      <p>You have no data streams.</p>
+                    </EuiText>
+                  }
+                  actions={[
+                    <EuiButton
+                      fill
+                      onClick={() => {
+                        this.props.history.push(ROUTES.CREATE_DATA_STREAM);
+                      }}
+                    >
+                      Create data stream
+                    </EuiButton>,
+                  ]}
+                />
+              ) : (
+                <EuiEmptyPrompt
+                  body={
+                    <EuiText>
+                      <p>There are no data streams matching your applied filters. Reset your filters to view your data streams.</p>
+                    </EuiText>
+                  }
+                  actions={[
+                    <EuiButton
+                      fill
+                      onClick={() => {
+                        this.setState(defaultFilter, () => {
+                          this.getDataStreams();
+                        });
+                      }}
+                    >
+                      Reset filters
+                    </EuiButton>,
+                  ]}
+                />
+              )
+            }
+          />
+        </ContentPanel>
+      </>
     );
   }
 }
diff --git a/public/pages/DataStreams/containers/DataStreamsActions/index.tsx b/public/pages/DataStreams/containers/DataStreamsActions/index.tsx
index b7f993bad..414dafd3c 100644
--- a/public/pages/DataStreams/containers/DataStreamsActions/index.tsx
+++ b/public/pages/DataStreams/containers/DataStreamsActions/index.tsx
@@ -17,10 +17,11 @@ export interface DataStreamsActionsProps {
   selectedItems: DataStream[];
   onDelete: () => void;
   history: RouteComponentProps["history"];
+  useNewUX?: boolean;
 }
 
 export default function DataStreamsActions(props: DataStreamsActionsProps) {
-  const { selectedItems, onDelete, history } = props;
+  const { selectedItems, onDelete, history, useNewUX } = props;
   const [deleteIndexModalVisible, setDeleteIndexModalVisible] = useState(false);
   const [clearCacheModalVisible, setClearCacheModalVisible] = useState(false);
   const [flushDataStreamModalVisible, setFlushDataStreamModalVisible] = useState(false);
@@ -51,7 +52,7 @@ export default function DataStreamsActions(props: DataStreamsActionsProps) {
         data-test-subj="moreAction"
         panelPaddingSize="none"
         button={
-          <EuiButton iconType="arrowDown" iconSide="right">
+          <EuiButton iconType="arrowDown" iconSide="right" size={useNewUX ? "s" : undefined}>
             Actions
           </EuiButton>
         }
diff --git a/public/pages/EditRollup/containers/EditRollup.test.tsx b/public/pages/EditRollup/containers/EditRollup.test.tsx
index ce82f4ac7..f2441d95a 100644
--- a/public/pages/EditRollup/containers/EditRollup.test.tsx
+++ b/public/pages/EditRollup/containers/EditRollup.test.tsx
@@ -16,6 +16,23 @@ import { BrowserServices } from "../../../models/interfaces";
 import { BREADCRUMBS, ROUTES } from "../../../utils/constants";
 import { testRollup } 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 renderEditRollupWithRouter(initialEntries = ["/"]) {
   return {
diff --git a/public/pages/EditRollup/containers/EditRollup.tsx b/public/pages/EditRollup/containers/EditRollup.tsx
index ea46a8adb..7d9c51fd1 100644
--- a/public/pages/EditRollup/containers/EditRollup.tsx
+++ b/public/pages/EditRollup/containers/EditRollup.tsx
@@ -18,6 +18,7 @@ import { EMPTY_ROLLUP } from "../../CreateRollup/utils/constants";
 import { CoreServicesContext } from "../../../components/core_services";
 import { delayTimeUnitToMS, msToDelayTimeUnit } from "../../CreateRollup/utils/helpers";
 import { useUpdateUrlWithDataSourceProperties } from "../../../components/MDSEnabledComponent";
+import { getUISettings } from "../../../services/Services";
 
 interface EditRollupProps extends RouteComponentProps {
   rollupService: RollupService;
@@ -44,12 +45,15 @@ interface EditRollupState {
   delayTime: number | string;
   delayTimeunit: string;
   rollupJSON: any;
+  useNewUX: boolean;
 }
 
 export class EditRollup extends Component<EditRollupProps, EditRollupState> {
   static contextType = CoreServicesContext;
   constructor(props: EditRollupProps) {
     super(props);
+    const uiSettings = getUISettings();
+    const useNewUX = uiSettings.get("home:useNewHomePage");
     this.state = {
       rollupId: "",
       rollupIdError: "",
@@ -71,13 +75,17 @@ export class EditRollup extends Component<EditRollupProps, EditRollupState> {
       delayTime: "",
       delayTimeunit: "MINUTES",
       rollupJSON: EMPTY_ROLLUP,
+      useNewUX: useNewUX,
     };
   }
 
   componentDidMount = async (): Promise<void> => {
     const { id } = queryString.parse(this.props.location.search);
+    const breadCrumbs = this.state.useNewUX
+      ? [BREADCRUMBS.ROLLUPS, BREADCRUMBS.EDIT_ROLLUP]
+      : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.ROLLUPS, BREADCRUMBS.EDIT_ROLLUP, { text: id }];
     if (typeof id === "string" && !!id) {
-      this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.ROLLUPS, BREADCRUMBS.EDIT_ROLLUP, { text: id }]);
+      this.context.chrome.setBreadcrumbs(breadCrumbs);
       await this.getRollupToEdit(id);
     } else {
       this.context.notifications.toasts.addDanger(`Invalid rollup id: ${id}`);
@@ -283,13 +291,26 @@ export class EditRollup extends Component<EditRollupProps, EditRollupState> {
       pageSize,
       delayTime,
       delayTimeunit,
+      useNewUX,
     } = this.state;
+
+    const getTitle = !useNewUX
+      ? () => {
+          return (
+            <>
+              <EuiTitle size="l">
+                <h1>Edit rollup job</h1>
+              </EuiTitle>
+              <EuiSpacer />
+            </>
+          );
+        }
+      : () => {};
+    const padding_style = useNewUX ? { padding: "0px 0px" } : { padding: "25px 50px" };
+
     return (
-      <div style={{ padding: "25px 50px" }}>
-        <EuiTitle size="l">
-          <h1>Edit rollup job</h1>
-        </EuiTitle>
-        <EuiSpacer />
+      <div style={padding_style}>
+        {getTitle()}
         <ConfigureRollup
           isEdit={true}
           rollupId={rollupId}
diff --git a/public/pages/ForceMerge/container/ForceMerge/ForceMerge.test.tsx b/public/pages/ForceMerge/container/ForceMerge/ForceMerge.test.tsx
index 247271ae0..c7ef09697 100644
--- a/public/pages/ForceMerge/container/ForceMerge/ForceMerge.test.tsx
+++ b/public/pages/ForceMerge/container/ForceMerge/ForceMerge.test.tsx
@@ -17,6 +17,23 @@ import { CoreServicesConsumer, CoreServicesContext } from "../../../../component
 import ForceMerge from "./ForceMerge";
 import { ModalProvider, ModalRoot } from "../../../../components/Modal";
 import { BrowserServices } from "../../../../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({});
+});
 
 function renderWithRouter(initialEntries = [ROUTES.FORCE_MERGE] as string[]) {
   return {
diff --git a/public/pages/ForceMerge/container/ForceMerge/ForceMerge.tsx b/public/pages/ForceMerge/container/ForceMerge/ForceMerge.tsx
index 58a4fef0e..5d2a78979 100644
--- a/public/pages/ForceMerge/container/ForceMerge/ForceMerge.tsx
+++ b/public/pages/ForceMerge/container/ForceMerge/ForceMerge.tsx
@@ -3,7 +3,17 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiButton, EuiButtonEmpty, EuiButtonIcon, EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from "@elastic/eui";
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiButtonIcon,
+  EuiCallOut,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiTitle,
+  EuiText,
+} from "@elastic/eui";
 import React, { useContext, useEffect, useRef, useState } from "react";
 import { RouteComponentProps } from "react-router-dom";
 import { CoreStart } from "opensearch-dashboards/public";
@@ -24,6 +34,7 @@ import NotificationConfig, { NotificationConfigRef } from "../../../../container
 import { ActionType } from "../../../Notifications/constant";
 import { getClusterInfo } from "../../../../utils/helpers";
 import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
 
 interface ForceMergeProps extends RouteComponentProps<{ indexes?: string }> {
   services: BrowserServices;
@@ -34,6 +45,9 @@ export default function ForceMergeWrapper(props: Omit<ForceMergeProps, "services
   const context = useContext(CoreServicesContext) as CoreStart;
   const [advancedSettingsOpen, setAdvancedSettingsOpen] = useState(false);
   const [executing, setExecuting] = useState(false);
+  const uiSettings = getUISettings();
+  const useNewUx = uiSettings.get("home:useNewHomePage");
+  const [useNewUX, setUseNewUX] = useState(useNewUx);
   const [notReadOnlyIndexes, setNotReadOnlyIndexes] = useState<
     [
       string,
@@ -145,11 +159,10 @@ export default function ForceMergeWrapper(props: Omit<ForceMergeProps, "services
   );
 
   useEffect(() => {
-    context.chrome.setBreadcrumbs([
-      BREADCRUMBS.INDEX_MANAGEMENT,
-      BREADCRUMBS.INDICES,
-      { ...BREADCRUMBS.FORCE_MERGE, href: `#${props.location.pathname}` },
-    ]);
+    let breadCrumbs = useNewUX
+      ? [BREADCRUMBS.INDICES, { ...BREADCRUMBS.FORCE_MERGE, href: `#${props.location.pathname}` }]
+      : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.INDICES, { ...BREADCRUMBS.FORCE_MERGE, href: `#${props.location.pathname}` }];
+    context.chrome.setBreadcrumbs(breadCrumbs);
     return () => {
       destroyedRef.current = true;
     };
@@ -164,18 +177,39 @@ export default function ForceMergeWrapper(props: Omit<ForceMergeProps, "services
     });
   }, [field.getValue("indexes")]);
 
+  const { HeaderControl } = getNavigationUI();
+  const { setAppDescriptionControls } = getApplication();
+
+  const descriptionData = [
+    {
+      renderComponent: (
+        <EuiText size="s" color="subdued">
+          Manually merge shards of indexes or backing indexes of data streams. You can also use force merge to clear up deleted documents
+          within indexes.
+        </EuiText>
+      ),
+    },
+  ];
+
+  const padding_style = useNewUX ? { padding: "0px 0px" } : { padding: "0px 50px" };
+
   return (
-    <div style={{ padding: "0px 50px" }}>
-      <EuiTitle size="l">
-        <h1>Force merge</h1>
-      </EuiTitle>
-      <CustomFormRow
-        fullWidth
-        helpText="Manually merge shards of indexes or backing indexes of data streams. You can also use force merge to clear up deleted documents within indexes."
-      >
-        <></>
-      </CustomFormRow>
-      <EuiSpacer />
+    <div style={padding_style}>
+      {useNewUX && <HeaderControl setMountPoint={setAppDescriptionControls} controls={descriptionData} />}
+      {!useNewUX && (
+        <>
+          <EuiTitle size="l">
+            <h1>Force merge</h1>
+          </EuiTitle>
+          <CustomFormRow
+            fullWidth
+            helpText="Manually merge shards of indexes or backing indexes of data streams. You can also use force merge to clear up deleted documents within indexes."
+          >
+            <></>
+          </CustomFormRow>
+          <EuiSpacer />
+        </>
+      )}
 
       <ContentPanel title="Configure source index" titleSize="s">
         <EuiSpacer />
diff --git a/public/pages/Rollover/containers/Rollover/Rollover.test.tsx b/public/pages/Rollover/containers/Rollover/Rollover.test.tsx
index 5339a1493..a850fb88d 100644
--- a/public/pages/Rollover/containers/Rollover/Rollover.test.tsx
+++ b/public/pages/Rollover/containers/Rollover/Rollover.test.tsx
@@ -13,6 +13,23 @@ import Rollover, { RolloverProps } from "./Rollover";
 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<RolloverProps, keyof RouteComponentProps>, initialEntries: string[]) {
   return {
diff --git a/public/pages/Rollover/containers/Rollover/Rollover.tsx b/public/pages/Rollover/containers/Rollover/Rollover.tsx
index 768c2acc5..d7e8fc708 100644
--- a/public/pages/Rollover/containers/Rollover/Rollover.tsx
+++ b/public/pages/Rollover/containers/Rollover/Rollover.tsx
@@ -11,7 +11,7 @@ import { ServicesContext } from "../../../../services";
 import { BrowserServices } from "../../../../models/interfaces";
 import { CoreServicesContext } from "../../../../components/core_services";
 import IndexFormWrapper, { IndexForm } from "../../../../containers/IndexForm";
-import { EuiButton, EuiButtonEmpty, EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle, EuiLink } from "@elastic/eui";
+import { EuiButton, EuiButtonEmpty, EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle, EuiLink, EuiText } from "@elastic/eui";
 import CustomFormRow from "../../../../components/CustomFormRow";
 import { ContentPanel } from "../../../../components/ContentPanel";
 import FormGenerator, { AllBuiltInComponents, IFormGeneratorRef } from "../../../../components/FormGenerator";
@@ -22,6 +22,7 @@ import { IRolloverRequestBody } from "../../interface";
 import { filterByMinimatch } from "../../../../../utils/helper";
 import { SYSTEM_ALIAS } from "../../../../../utils/constants";
 import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
 
 export interface RolloverProps extends RouteComponentProps<{ source?: string }> {}
 
@@ -41,6 +42,9 @@ export default function Rollover(props: RolloverProps) {
     source: props.match.params.source,
   });
   const [loading, setIsLoading] = useState(false);
+  const uiSettings = getUISettings();
+  const useNewUx = uiSettings.get("home:useNewHomePage");
+  const [useNewUX, setUseNewUX] = useState(useNewUx);
   const [writeIndexValue, setWriteIndexValue] = useState<string>("");
   const field = useField({
     values: {
@@ -78,13 +82,22 @@ export default function Rollover(props: RolloverProps) {
   };
 
   useEffect(() => {
-    coreService?.chrome.setBreadcrumbs([
-      BREADCRUMBS.INDEX_MANAGEMENT,
-      {
-        ...BREADCRUMBS.ROLLOVER,
-        href: `#${props.location.pathname}`,
-      },
-    ]);
+    let breadCrumbs = useNewUX
+      ? [
+          BREADCRUMBS.INDICES,
+          {
+            ...BREADCRUMBS.ROLLOVER,
+            href: `#${props.location.pathname}`,
+          },
+        ]
+      : [
+          BREADCRUMBS.INDEX_MANAGEMENT,
+          {
+            ...BREADCRUMBS.ROLLOVER,
+            href: `#${props.location.pathname}`,
+          },
+        ];
+    coreService?.chrome.setBreadcrumbs(breadCrumbs);
     refreshOptions();
   }, []);
 
@@ -206,19 +219,40 @@ export default function Rollover(props: RolloverProps) {
     return result;
   }, [sourceType, options, writeIndexValue]);
 
+  const { HeaderControl } = getNavigationUI();
+  const { setAppDescriptionControls } = getApplication();
+
+  const padding_style = useNewUX ? { padding: "0px 0px" } : { padding: "0px 50px" };
+
+  const descriptionData = [
+    {
+      renderComponent: (
+        <EuiText size="s" color="subdued">
+          Manually merge shards of indexes or backing indexes of data streams. You can also use force merge to clear up deleted documents
+          within indexes.
+        </EuiText>
+      ),
+    },
+  ];
+
   return (
-    <div style={{ padding: "0 50px" }}>
-      <EuiTitle>
-        <h1>Roll over</h1>
-      </EuiTitle>
-      <CustomFormRow
-        helpText="Rollover creates a new writing index for a data stream or index alias."
-        style={{
-          marginBottom: 20,
-        }}
-      >
-        <></>
-      </CustomFormRow>
+    <div style={padding_style}>
+      {useNewUX && <HeaderControl setMountPoint={setAppDescriptionControls} controls={descriptionData} />}
+      {!useNewUX && (
+        <>
+          <EuiTitle>
+            <h1>Roll over</h1>
+          </EuiTitle>
+          <CustomFormRow
+            helpText="Rollover creates a new writing index for a data stream or index alias."
+            style={{
+              marginBottom: 20,
+            }}
+          >
+            <></>
+          </CustomFormRow>
+        </>
+      )}
       <ContentPanel title="Configure source" titleSize="s">
         {sourceType === "alias" && filterByMinimatch(tempValue.source || "", SYSTEM_ALIAS) ? (
           <>
diff --git a/public/pages/RollupDetails/components/GeneralInformation/GeneralInformation.tsx b/public/pages/RollupDetails/components/GeneralInformation/GeneralInformation.tsx
index af4082b56..91fe6567f 100644
--- a/public/pages/RollupDetails/components/GeneralInformation/GeneralInformation.tsx
+++ b/public/pages/RollupDetails/components/GeneralInformation/GeneralInformation.tsx
@@ -17,6 +17,7 @@ interface GeneralInformationProps {
   pageSize: number;
   lastUpdated: string;
   onEdit: () => void;
+  useNewUX: boolean;
 }
 
 export default class GeneralInformation extends Component<GeneralInformationProps> {
@@ -25,7 +26,7 @@ export default class GeneralInformation extends Component<GeneralInformationProp
   }
 
   render() {
-    const { rollupId, description, onEdit, sourceIndex, targetIndex, scheduleText, pageSize, lastUpdated } = this.props;
+    const { rollupId, description, onEdit, sourceIndex, targetIndex, scheduleText, pageSize, lastUpdated, useNewUX } = this.props;
     const infoItems = [
       { term: "Name", value: rollupId },
       { term: "Source index", value: sourceIndex },
@@ -35,24 +36,19 @@ export default class GeneralInformation extends Component<GeneralInformationProp
       { term: "Last updated", value: lastUpdated },
       { term: "Pages per execution", value: pageSize },
     ];
+    const useActions = useNewUX
+      ? []
+      : [
+          {
+            text: "Edit",
+            buttonProps: {
+              onClick: () => onEdit(),
+            },
+          },
+        ];
     return (
       <ContentPanel
-        actions={
-          <ModalConsumer>
-            {() => (
-              <ContentPanelActions
-                actions={[
-                  {
-                    text: "Edit",
-                    buttonProps: {
-                      onClick: () => onEdit(),
-                    },
-                  },
-                ]}
-              />
-            )}
-          </ModalConsumer>
-        }
+        actions={<ModalConsumer>{() => <ContentPanelActions actions={useActions} />}</ModalConsumer>}
         bodyStyles={{ padding: "initial" }}
         title="General information"
         titleSize="m"
diff --git a/public/pages/RollupDetails/containers/RollupDetails/RollupDetails.test.tsx b/public/pages/RollupDetails/containers/RollupDetails/RollupDetails.test.tsx
index 30da5bc65..13334cc83 100644
--- a/public/pages/RollupDetails/containers/RollupDetails/RollupDetails.test.tsx
+++ b/public/pages/RollupDetails/containers/RollupDetails/RollupDetails.test.tsx
@@ -16,6 +16,23 @@ import RollupDetails from "./RollupDetails";
 import { ServicesConsumer, ServicesContext } from "../../../../services";
 import { testRollup, testRollup2 } 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 renderRollupDetailsWithRouter(initialEntries = ["/"]) {
   return {
diff --git a/public/pages/RollupDetails/containers/RollupDetails/RollupDetails.tsx b/public/pages/RollupDetails/containers/RollupDetails/RollupDetails.tsx
index 1b4109e25..a998a500a 100644
--- a/public/pages/RollupDetails/containers/RollupDetails/RollupDetails.tsx
+++ b/public/pages/RollupDetails/containers/RollupDetails/RollupDetails.tsx
@@ -19,6 +19,7 @@ import {
   EuiModalBody,
   EuiCodeBlock,
   EuiHealth,
+  EuiText,
 } from "@elastic/eui";
 import { RouteComponentProps } from "react-router-dom";
 import queryString from "query-string";
@@ -34,6 +35,9 @@ import { renderTime } from "../../../Rollups/utils/helpers";
 import DeleteModal from "../../../Rollups/components/DeleteModal";
 import { CoreServicesContext } from "../../../../components/core_services";
 import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+import { TopNavControlButtonData, TopNavControlTextData, TopNavControlIconData } from "../../../../../../../src/plugins/navigation/public";
+import _ from "lodash";
 
 interface RollupDetailsProps extends RouteComponentProps {
   rollupService: RollupService;
@@ -68,6 +72,7 @@ interface RollupDetailsState {
   isModalOpen: boolean;
   enabled: boolean;
   isDeleteModalVisible: boolean;
+  useNewUX: boolean;
 }
 
 export class RollupDetails extends Component<RollupDetailsProps, RollupDetailsState> {
@@ -75,6 +80,9 @@ export class RollupDetails extends Component<RollupDetailsProps, RollupDetailsSt
   constructor(props: RollupDetailsProps) {
     super(props);
 
+    const uiSettings = getUISettings();
+    const useNewUx = uiSettings.get("home:useNewHomePage");
+
     this.state = {
       rollupId: "",
       description: "",
@@ -103,14 +111,20 @@ export class RollupDetails extends Component<RollupDetailsProps, RollupDetailsSt
       isModalOpen: false,
       enabled: false,
       isDeleteModalVisible: false,
+      useNewUX: useNewUx,
     };
   }
 
   componentDidMount = async (): Promise<void> => {
-    this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.ROLLUPS]);
+    let breadCrumbs = this.state.useNewUX ? [BREADCRUMBS.ROLLUPS] : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.ROLLUPS];
+
+    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.ROLLUPS, { text: id }]);
+      let newBreadCrumbs = this.state.useNewUX
+        ? [BREADCRUMBS.ROLLUPS, { text: id }]
+        : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.ROLLUPS, { text: id }];
+      this.context.chrome.setBreadcrumbs(newBreadCrumbs);
       this.props.history.push(`${ROUTES.ROLLUP_DETAILS}?id=${id}`);
       await this.getRollup(id);
       this.forceUpdate();
@@ -216,6 +230,14 @@ export class RollupDetails extends Component<RollupDetailsProps, RollupDetailsSt
     }
   };
 
+  onClickRollupStatusChange = async (): Promise<void> => {
+    if (this.state.enabled) {
+      return this.onDisable();
+    } else {
+      return this.onEnable();
+    }
+  };
+
   onEnable = async (): Promise<void> => {
     const { rollupService } = this.props;
     const { rollupId } = this.state;
@@ -283,6 +305,13 @@ export class RollupDetails extends Component<RollupDetailsProps, RollupDetailsSt
     this.setState({ metricsShown: selectedMetrics.slice(from, from + size) });
   };
 
+  renderEnabledField = (enabled: boolean) => {
+    if (enabled) {
+      return "Enabled";
+    }
+    return "Disabled";
+  };
+
   render() {
     const {
       rollupId,
@@ -309,6 +338,7 @@ export class RollupDetails extends Component<RollupDetailsProps, RollupDetailsSt
       rollupJSON,
       enabled,
       isDeleteModalVisible,
+      useNewUX,
     } = this.state;
 
     let scheduleText = "";
@@ -319,47 +349,108 @@ export class RollupDetails extends Component<RollupDetailsProps, RollupDetailsSt
           : buildCronScheduleText(rollupJSON.rollup.continuous, rollupJSON.rollup.schedule.cron.expression);
     }
 
+    const { HeaderControl } = getNavigationUI();
+    const { setAppRightControls, setAppBadgeControls } = getApplication();
+
+    const padding_style = this.state.useNewUX ? { padding: "0px 0px" } : { padding: "5px 50px" };
+
+    const controlsData = [
+      {
+        iconType: "trash",
+        testId: "deleteButton",
+        color: "danger",
+        ariaLabel: "delete",
+        run: this.showDeleteModal,
+        controlType: "icon",
+        display: "base",
+      } as TopNavControlIconData,
+      {
+        id: "Edit",
+        label: "Edit",
+        testId: "editButton",
+        run: this.onEdit,
+        controlType: "button",
+      } as TopNavControlButtonData,
+      {
+        id: "viewJson",
+        label: "View JSON",
+        testId: "viewJsonButton",
+        run: this.showModal,
+        controlType: "button",
+        display: "base",
+      } as TopNavControlButtonData,
+      {
+        id: "Status",
+        label: enabled ? "Disable" : "Enable",
+        testId: "enableButton",
+        run: this.onClickRollupStatusChange,
+        controlType: "button",
+        display: "base",
+        fill: true,
+      } as TopNavControlButtonData,
+    ];
+
+    const badgeControlData = [
+      {
+        renderComponent: (
+          <>
+            <EuiHealth color={enabled ? "success" : "danger"} />
+            <EuiText size="s">{_.truncate(this.renderEnabledField(enabled))}</EuiText>
+          </>
+        ),
+      },
+    ];
+
     return (
-      <div style={{ padding: "5px 50px" }}>
-        <EuiFlexGroup style={{ padding: "0px 10px" }} justifyContent="spaceBetween" alignItems="center">
-          <EuiFlexItem grow={false}>
-            <EuiTitle size="m">
-              <h2>{rollupId}</h2>
-            </EuiTitle>
-          </EuiFlexItem>
-          <EuiFlexItem>
-            {enabled ? (
-              <EuiHealth color="success">{"Enabled on " + lastUpdated}</EuiHealth>
-            ) : (
-              <EuiHealth color="danger">Disabled</EuiHealth>
-            )}
-          </EuiFlexItem>
-
-          <EuiFlexItem grow={false}>
-            <EuiFlexGroup alignItems="center" gutterSize="s">
-              <EuiFlexItem grow={false}>
-                <EuiButton disabled={!enabled} onClick={this.onDisable} data-test-subj="disableButton">
-                  Disable
-                </EuiButton>
-              </EuiFlexItem>
+      <div style={padding_style}>
+        {useNewUX ? (
+          <>
+            <HeaderControl setMountPoint={setAppRightControls} controls={controlsData} />
+            <HeaderControl setMountPoint={setAppBadgeControls} controls={badgeControlData} />
+          </>
+        ) : (
+          <>
+            <EuiFlexGroup style={{ padding: "0px 10px" }} justifyContent="spaceBetween" alignItems="center">
               <EuiFlexItem grow={false}>
-                <EuiButton disabled={enabled} onClick={this.onEnable} data-test-subj="enableButton">
-                  Enable
-                </EuiButton>
+                <EuiTitle size="m">
+                  <h2>{rollupId}</h2>
+                </EuiTitle>
               </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiButton onClick={this.showModal}>View JSON</EuiButton>
+              <EuiFlexItem>
+                {enabled ? (
+                  <EuiHealth color="success">{"Enabled on " + lastUpdated}</EuiHealth>
+                ) : (
+                  <EuiHealth color="danger">Disabled</EuiHealth>
+                )}
               </EuiFlexItem>
+
               <EuiFlexItem grow={false}>
-                <EuiButton onClick={this.showDeleteModal} color="danger" data-test-subj="deleteButton">
-                  Delete
-                </EuiButton>
+                <EuiFlexGroup alignItems="center" gutterSize="s">
+                  <EuiFlexItem grow={false}>
+                    <EuiButton disabled={!enabled} onClick={this.onDisable} data-test-subj="disableButton">
+                      Disable
+                    </EuiButton>
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    <EuiButton disabled={enabled} onClick={this.onEnable} data-test-subj="enableButton">
+                      Enable
+                    </EuiButton>
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    <EuiButton onClick={this.showModal}>View JSON</EuiButton>
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    <EuiButton onClick={this.showDeleteModal} color="danger" data-test-subj="deleteButton">
+                      Delete
+                    </EuiButton>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
               </EuiFlexItem>
             </EuiFlexGroup>
-          </EuiFlexItem>
-        </EuiFlexGroup>
+            <EuiSpacer />
+          </>
+        )}
 
-        <EuiSpacer />
         <GeneralInformation
           rollupId={rollupId}
           description={description}
@@ -369,6 +460,7 @@ export class RollupDetails extends Component<RollupDetailsProps, RollupDetailsSt
           pageSize={pageSize}
           lastUpdated={lastUpdated}
           onEdit={this.onEdit}
+          useNewUX={useNewUX}
         />
         <EuiSpacer />
         <RollupStatus metadata={metadata} />
diff --git a/public/pages/Rollups/containers/Rollups/Rollups.test.tsx b/public/pages/Rollups/containers/Rollups/Rollups.test.tsx
index 21a9c560d..24f3eced6 100644
--- a/public/pages/Rollups/containers/Rollups/Rollups.test.tsx
+++ b/public/pages/Rollups/containers/Rollups/Rollups.test.tsx
@@ -17,6 +17,23 @@ import Rollups from "./Rollups";
 import { TEXT } from "../../components/RollupEmptyPrompt/RollupEmptyPrompt";
 import { testRollup } 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 renderRollupsWithRouter() {
   return {
diff --git a/public/pages/Rollups/containers/Rollups/Rollups.tsx b/public/pages/Rollups/containers/Rollups/Rollups.tsx
index b3a4c39a8..a1d411d59 100644
--- a/public/pages/Rollups/containers/Rollups/Rollups.tsx
+++ b/public/pages/Rollups/containers/Rollups/Rollups.tsx
@@ -34,6 +34,9 @@ import {
   EuiTextColor,
   EuiLink,
   EuiTableFieldDataColumnType,
+  EuiInMemoryTable,
+  EuiButtonIcon,
+  EuiCompressedFieldSearch,
 } from "@elastic/eui";
 import { RollupService } from "../../../../services";
 import RollupEmptyPrompt from "../../components/RollupEmptyPrompt";
@@ -46,6 +49,8 @@ import { CoreServicesContext } from "../../../../components/core_services";
 import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../services/DataSourceMenuContext";
 import MDSEnabledComponent from "../../../../components/MDSEnabledComponent";
 import { HttpFetchQuery } from "opensearch-dashboards/public";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+import { ContentPanel } from "../../../../components/ContentPanel";
 
 interface RollupsProps extends RouteComponentProps, DataSourceMenuProperties {
   rollupService: RollupService;
@@ -64,6 +69,7 @@ interface RollupsState extends DataSourceMenuProperties {
   loadingRollups: boolean;
   isPopoverOpen: boolean;
   isDeleteModalVisible: boolean;
+  useNewUX: boolean;
 }
 
 export class Rollups extends MDSEnabledComponent<RollupsProps, RollupsState> {
@@ -71,6 +77,8 @@ export class Rollups extends MDSEnabledComponent<RollupsProps, RollupsState> {
   constructor(props: RollupsProps) {
     super(props);
 
+    const uiSettings = getUISettings();
+    const useNewUX = uiSettings.get("home:useNewHomePage");
     const { from, size, search, sortField, sortDirection } = getURLQueryParams(this.props.location);
 
     this.state = {
@@ -87,13 +95,15 @@ export class Rollups extends MDSEnabledComponent<RollupsProps, RollupsState> {
       isPopoverOpen: false,
       isDeleteModalVisible: false,
       rollupExplain: {},
+      useNewUX: useNewUX,
     };
 
     this.getRollups = _.debounce(this.getRollups, 500, { leading: true });
   }
 
   async componentDidMount() {
-    this.context.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.ROLLUPS]);
+    const breadCrumbs = this.state.useNewUX ? [BREADCRUMBS.ROLLUPS] : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.ROLLUPS];
+    this.context.chrome.setBreadcrumbs(breadCrumbs);
     await this.getRollups();
   }
 
@@ -271,6 +281,7 @@ export class Rollups extends MDSEnabledComponent<RollupsProps, RollupsState> {
       loadingRollups,
       isPopoverOpen,
       isDeleteModalVisible,
+      useNewUX,
     } = this.state;
 
     const filterIsApplied = !!search;
@@ -298,6 +309,7 @@ export class Rollups extends MDSEnabledComponent<RollupsProps, RollupsState> {
         disabled={!selectedItems.length}
         onClick={this.onActionButtonClick}
         data-test-subj="actionButton"
+        size={useNewUX ? "s" : undefined}
       >
         Actions
       </EuiButton>
@@ -334,6 +346,43 @@ export class Rollups extends MDSEnabledComponent<RollupsProps, RollupsState> {
       </EuiContextMenuItem>,
     ];
 
+    const newActionItems = [
+      <EuiContextMenuItem
+        disabled={!selectedItems.length}
+        onClick={() => {
+          this.onEnable();
+        }}
+        data-test-subj="enableButton"
+      >
+        Enable
+      </EuiContextMenuItem>,
+      <EuiContextMenuItem disabled={!selectedItems.length} onClick={this.onDisable} data-test-subj="disableButton">
+        Disable
+      </EuiContextMenuItem>,
+      <EuiContextMenuItem
+        key="Edit"
+        disabled={selectedItems.length != 1}
+        data-test-subj="editButton"
+        onClick={() => {
+          this.closePopover();
+          this.onClickEdit();
+        }}
+      >
+        Edit
+      </EuiContextMenuItem>,
+      <EuiContextMenuItem
+        key="Delete"
+        disabled={!selectedItems.length}
+        data-test-subj="deleteButton"
+        onClick={() => {
+          this.closePopover();
+          this.showDeleteModal();
+        }}
+      >
+        <EuiTextColor color="danger">Delete</EuiTextColor>
+      </EuiContextMenuItem>,
+    ];
+
     const rollupsColumns: EuiTableFieldDataColumnType<DocumentRollup>[] = [
       {
         field: "_id",
@@ -394,7 +443,89 @@ export class Rollups extends MDSEnabledComponent<RollupsProps, RollupsState> {
       },
     ];
 
-    return (
+    const commonTable = () => {
+      return (
+        <EuiBasicTable
+          columns={rollupsColumns}
+          isSelectable={true}
+          itemId="_id"
+          items={rollups}
+          noItemsMessage={<RollupEmptyPrompt filterIsApplied={filterIsApplied} loading={loadingRollups} resetFilters={this.resetFilters} />}
+          onChange={this.onTableChange}
+          pagination={pagination}
+          selection={selection}
+          sorting={sorting}
+          tableLayout="auto"
+        />
+      );
+    };
+
+    const commonDeleteModal = () => {
+      return (
+        isDeleteModalVisible && (
+          <DeleteModal rollupId={this.getSelectedRollupIds()} closeDeleteModal={this.closeDeleteModal} onClickDelete={this.onClickDelete} />
+        )
+      );
+    };
+
+    const { HeaderControl } = getNavigationUI();
+    const { setAppRightControls } = getApplication();
+    const controlControlsData = [
+      {
+        id: "Create rollup job",
+        label: "Create rollup job",
+        fill: true,
+        run: this.onClickCreate,
+        testId: "createRollupButton",
+        controlType: "button",
+      },
+    ];
+
+    return useNewUX ? (
+      <>
+        <HeaderControl setMountPoint={setAppRightControls} controls={controlControlsData} />
+        <ContentPanel>
+          <EuiFlexGroup gutterSize="s" alignItems="center">
+            <EuiFlexItem grow={true}>
+              <EuiCompressedFieldSearch
+                autoFocus
+                incremental={true}
+                fullWidth={true}
+                value={search}
+                placeholder="Search"
+                aria-label="Search"
+                onChange={this.onSearchChange}
+              />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButtonIcon
+                iconType="refresh"
+                onClick={this.getRollups}
+                aria-label="refresh"
+                size="s"
+                display="base"
+                data-test-subj="refreshButton"
+              />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiPopover
+                id="action"
+                button={actionButton}
+                isOpen={isPopoverOpen}
+                closePopover={this.closePopover}
+                panelPaddingSize="none"
+                anchorPosition="downLeft"
+                data-test-subj="actionPopover"
+              >
+                <EuiContextMenuPanel items={newActionItems} />
+              </EuiPopover>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          {commonTable()}
+          {commonDeleteModal()}
+        </ContentPanel>
+      </>
+    ) : (
       <EuiPanel style={{ paddingLeft: "0px", paddingRight: "0px" }}>
         <EuiFlexGroup style={{ padding: "0px 10px" }} justifyContent="spaceBetween" alignItems="center">
           <EuiFlexItem>
@@ -452,41 +583,12 @@ export class Rollups extends MDSEnabledComponent<RollupsProps, RollupsState> {
             <EuiFlexItem>
               <EuiFieldSearch 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>
-            )}
           </EuiFlexGroup>
 
           <EuiHorizontalRule margin="xs" />
 
-          <EuiBasicTable
-            columns={rollupsColumns}
-            isSelectable={true}
-            itemId="_id"
-            items={rollups}
-            noItemsMessage={
-              <RollupEmptyPrompt filterIsApplied={filterIsApplied} loading={loadingRollups} resetFilters={this.resetFilters} />
-            }
-            onChange={this.onTableChange}
-            pagination={pagination}
-            selection={selection}
-            sorting={sorting}
-            tableLayout="auto"
-          />
-          {isDeleteModalVisible && (
-            <DeleteModal
-              rollupId={this.getSelectedRollupIds()}
-              closeDeleteModal={this.closeDeleteModal}
-              onClickDelete={this.onClickDelete}
-            />
-          )}
+          {commonTable()}
+          {commonDeleteModal()}
         </div>
       </EuiPanel>
     );