diff --git a/changelogs/fragments/7910.yml b/changelogs/fragments/7910.yml
new file mode 100644
index 000000000000..bae53b3d1e62
--- /dev/null
+++ b/changelogs/fragments/7910.yml
@@ -0,0 +1,2 @@
+refactor:
+- Update page header for edit object page ([#7910](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7910))
\ No newline at end of file
diff --git a/src/plugins/advanced_settings/public/management_app/mount_management_section.tsx b/src/plugins/advanced_settings/public/management_app/mount_management_section.tsx
index 383fc1eb3ccd..608324d0ecb2 100644
--- a/src/plugins/advanced_settings/public/management_app/mount_management_section.tsx
+++ b/src/plugins/advanced_settings/public/management_app/mount_management_section.tsx
@@ -103,10 +103,22 @@ export async function mountManagementSection(
     </Router>
   );
 
+  const pagePaddingSize = useUpdatedUX
+    ? // When useUpdatedUX is enabled, page should align with header vertically.
+      {
+        paddingSize: 'm' as const,
+      }
+    : {};
+
   ReactDOM.render(
     <I18nProvider>
       {params.wrapInPage ? (
-        <EuiPageContent hasShadow={false} hasBorder={false} color="transparent">
+        <EuiPageContent
+          hasShadow={false}
+          hasBorder={false}
+          color="transparent"
+          {...pagePaddingSize}
+        >
           {content}
         </EuiPageContent>
       ) : (
diff --git a/src/plugins/saved_objects_management/public/management_section/mount_section.tsx b/src/plugins/saved_objects_management/public/management_section/mount_section.tsx
index e26956900627..60060a0d1992 100644
--- a/src/plugins/saved_objects_management/public/management_section/mount_section.tsx
+++ b/src/plugins/saved_objects_management/public/management_section/mount_section.tsx
@@ -103,6 +103,8 @@ export const mountManagementSection = async ({
                 serviceRegistry={serviceRegistry}
                 setBreadcrumbs={setBreadcrumbs}
                 history={history}
+                useUpdatedUX={useUpdatedUX}
+                navigation={navigation}
               />
             </Suspense>
           </RedirectToHomeIfUnauthorized>
@@ -131,10 +133,22 @@ export const mountManagementSection = async ({
     </Router>
   );
 
+  const pageContentPaddingSize = useUpdatedUX
+    ? // align with new header
+      {
+        paddingSize: 'm' as const,
+      }
+    : {};
+
   ReactDOM.render(
     <I18nProvider>
       {mountParams.wrapInPage ? (
-        <EuiPageContent hasShadow={false} hasBorder={false} color="transparent">
+        <EuiPageContent
+          hasShadow={false}
+          hasBorder={false}
+          color="transparent"
+          {...pageContentPaddingSize}
+        >
           {content}
         </EuiPageContent>
       ) : (
diff --git a/src/plugins/saved_objects_management/public/management_section/object_view/components/__snapshots__/header.test.tsx.snap b/src/plugins/saved_objects_management/public/management_section/object_view/components/__snapshots__/header.test.tsx.snap
index aa4d039c6ca5..84d7c8a6c078 100644
--- a/src/plugins/saved_objects_management/public/management_section/object_view/components/__snapshots__/header.test.tsx.snap
+++ b/src/plugins/saved_objects_management/public/management_section/object_view/components/__snapshots__/header.test.tsx.snap
@@ -2,11 +2,57 @@
 
 exports[`Intro component renders correctly 1`] = `
 <Header
+  application={
+    Object {
+      "applications$": BehaviorSubject {
+        "_isScalar": false,
+        "_value": Map {},
+        "closed": false,
+        "hasError": false,
+        "isStopped": false,
+        "observers": Array [],
+        "thrownError": null,
+      },
+      "capabilities": Object {
+        "catalogue": Object {},
+        "management": Object {},
+        "navLinks": Object {},
+        "workspaces": Object {},
+      },
+      "currentAppId$": Observable {
+        "_isScalar": false,
+        "source": Subject {
+          "_isScalar": false,
+          "closed": false,
+          "hasError": false,
+          "isStopped": false,
+          "observers": Array [],
+          "thrownError": null,
+        },
+      },
+      "getUrlForApp": [MockFunction],
+      "navigateToApp": [MockFunction],
+      "navigateToUrl": [MockFunction],
+      "registerMountContext": [MockFunction],
+      "setAppBadgeControls": [MockFunction],
+      "setAppBottomControls": [MockFunction],
+      "setAppCenterControls": [MockFunction],
+      "setAppDescriptionControls": [MockFunction],
+      "setAppLeftControls": [MockFunction],
+      "setAppRightControls": [MockFunction],
+    }
+  }
   canDelete={true}
   canEdit={true}
   canViewInApp={true}
+  navigationUI={
+    Object {
+      "HeaderControl": [Function],
+    }
+  }
   onDeleteClick={[Function]}
   type="search"
+  useUpdatedUX={false}
   viewUrl="/some-url"
 >
   <EuiPageContentHeader>
@@ -227,3 +273,258 @@ exports[`Intro component renders correctly 1`] = `
   </EuiPageContentHeader>
 </Header>
 `;
+
+exports[`Intro component renders correctly when use new UX 1`] = `
+<Header
+  application={
+    Object {
+      "applications$": BehaviorSubject {
+        "_isScalar": false,
+        "_value": Map {},
+        "closed": false,
+        "hasError": false,
+        "isStopped": false,
+        "observers": Array [],
+        "thrownError": null,
+      },
+      "capabilities": Object {
+        "catalogue": Object {},
+        "management": Object {},
+        "navLinks": Object {},
+        "workspaces": Object {},
+      },
+      "currentAppId$": Observable {
+        "_isScalar": false,
+        "source": Subject {
+          "_isScalar": false,
+          "closed": false,
+          "hasError": false,
+          "isStopped": false,
+          "observers": Array [],
+          "thrownError": null,
+        },
+      },
+      "getUrlForApp": [MockFunction],
+      "navigateToApp": [MockFunction],
+      "navigateToUrl": [MockFunction],
+      "registerMountContext": [MockFunction],
+      "setAppBadgeControls": [MockFunction],
+      "setAppBottomControls": [MockFunction],
+      "setAppCenterControls": [MockFunction],
+      "setAppDescriptionControls": [MockFunction],
+      "setAppLeftControls": [MockFunction],
+      "setAppRightControls": [MockFunction],
+    }
+  }
+  canDelete={true}
+  canEdit={true}
+  canViewInApp={true}
+  navigationUI={
+    Object {
+      "HeaderControl": [Function],
+    }
+  }
+  onDeleteClick={[Function]}
+  type="search"
+  useUpdatedUX={true}
+  viewUrl="/some-url"
+>
+  <HeaderControl
+    controls={
+      Array [
+        Object {
+          "ariaLabel": "Delete search",
+          "color": "danger",
+          "controlType": "icon",
+          "display": "base",
+          "iconType": "trash",
+          "run": [Function],
+          "testId": "savedObjectEditDelete",
+        },
+        Object {
+          "controlType": "button",
+          "fill": true,
+          "href": "/some-url",
+          "iconSide": "right",
+          "iconType": "popout",
+          "label": "View search",
+          "testId": "savedObjectEditViewInApp",
+        },
+      ]
+    }
+    setMountPoint={[MockFunction]}
+  >
+    Delete search
+  </HeaderControl>
+</Header>
+`;
+
+exports[`Intro component renders correctly when use new UX and canDelete is true 1`] = `
+<Header
+  application={
+    Object {
+      "applications$": BehaviorSubject {
+        "_isScalar": false,
+        "_value": Map {},
+        "closed": false,
+        "hasError": false,
+        "isStopped": false,
+        "observers": Array [],
+        "thrownError": null,
+      },
+      "capabilities": Object {
+        "catalogue": Object {},
+        "management": Object {},
+        "navLinks": Object {},
+        "workspaces": Object {},
+      },
+      "currentAppId$": Observable {
+        "_isScalar": false,
+        "source": Subject {
+          "_isScalar": false,
+          "closed": false,
+          "hasError": false,
+          "isStopped": false,
+          "observers": Array [],
+          "thrownError": null,
+        },
+      },
+      "getUrlForApp": [MockFunction],
+      "navigateToApp": [MockFunction],
+      "navigateToUrl": [MockFunction],
+      "registerMountContext": [MockFunction],
+      "setAppBadgeControls": [MockFunction],
+      "setAppBottomControls": [MockFunction],
+      "setAppCenterControls": [MockFunction],
+      "setAppDescriptionControls": [MockFunction],
+      "setAppLeftControls": [MockFunction],
+      "setAppRightControls": [MockFunction],
+    }
+  }
+  canDelete={true}
+  canEdit={true}
+  canViewInApp={true}
+  navigationUI={
+    Object {
+      "HeaderControl": [Function],
+    }
+  }
+  onDeleteClick={[Function]}
+  type="search"
+  useUpdatedUX={true}
+  viewUrl="/some-url"
+>
+  <HeaderControl
+    controls={
+      Array [
+        Object {
+          "ariaLabel": "Delete search",
+          "color": "danger",
+          "controlType": "icon",
+          "display": "base",
+          "iconType": "trash",
+          "run": [Function],
+          "testId": "savedObjectEditDelete",
+        },
+        Object {
+          "controlType": "button",
+          "fill": true,
+          "href": "/some-url",
+          "iconSide": "right",
+          "iconType": "popout",
+          "label": "View search",
+          "testId": "savedObjectEditViewInApp",
+        },
+      ]
+    }
+    setMountPoint={[MockFunction]}
+  >
+    Delete search
+  </HeaderControl>
+</Header>
+`;
+
+exports[`Intro component renders correctly when use new UX and canViewInApp is true 1`] = `
+<Header
+  application={
+    Object {
+      "applications$": BehaviorSubject {
+        "_isScalar": false,
+        "_value": Map {},
+        "closed": false,
+        "hasError": false,
+        "isStopped": false,
+        "observers": Array [],
+        "thrownError": null,
+      },
+      "capabilities": Object {
+        "catalogue": Object {},
+        "management": Object {},
+        "navLinks": Object {},
+        "workspaces": Object {},
+      },
+      "currentAppId$": Observable {
+        "_isScalar": false,
+        "source": Subject {
+          "_isScalar": false,
+          "closed": false,
+          "hasError": false,
+          "isStopped": false,
+          "observers": Array [],
+          "thrownError": null,
+        },
+      },
+      "getUrlForApp": [MockFunction],
+      "navigateToApp": [MockFunction],
+      "navigateToUrl": [MockFunction],
+      "registerMountContext": [MockFunction],
+      "setAppBadgeControls": [MockFunction],
+      "setAppBottomControls": [MockFunction],
+      "setAppCenterControls": [MockFunction],
+      "setAppDescriptionControls": [MockFunction],
+      "setAppLeftControls": [MockFunction],
+      "setAppRightControls": [MockFunction],
+    }
+  }
+  canDelete={true}
+  canEdit={true}
+  canViewInApp={true}
+  navigationUI={
+    Object {
+      "HeaderControl": [Function],
+    }
+  }
+  onDeleteClick={[Function]}
+  type="search"
+  useUpdatedUX={true}
+  viewUrl="/some-url"
+>
+  <HeaderControl
+    controls={
+      Array [
+        Object {
+          "ariaLabel": "Delete search",
+          "color": "danger",
+          "controlType": "icon",
+          "display": "base",
+          "iconType": "trash",
+          "run": [Function],
+          "testId": "savedObjectEditDelete",
+        },
+        Object {
+          "controlType": "button",
+          "fill": true,
+          "href": "/some-url",
+          "iconSide": "right",
+          "iconType": "popout",
+          "label": "View search",
+          "testId": "savedObjectEditViewInApp",
+        },
+      ]
+    }
+    setMountPoint={[MockFunction]}
+  >
+    Delete search
+  </HeaderControl>
+</Header>
+`;
diff --git a/src/plugins/saved_objects_management/public/management_section/object_view/components/header.test.tsx b/src/plugins/saved_objects_management/public/management_section/object_view/components/header.test.tsx
index 54b5e6a9aaa8..eb38642b631a 100644
--- a/src/plugins/saved_objects_management/public/management_section/object_view/components/header.test.tsx
+++ b/src/plugins/saved_objects_management/public/management_section/object_view/components/header.test.tsx
@@ -32,6 +32,9 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { I18nProvider } from '@osd/i18n/react';
 import { Header } from './header';
+import { coreMock } from '../../../../../../core/public/mocks';
+import { ApplicationStart } from '../../../../../../core/public';
+import { NavigationPublicPluginStart } from '../../../../../navigation/public';
 
 describe('Intro component', () => {
   const mountHeader = (props: {
@@ -41,6 +44,9 @@ describe('Intro component', () => {
     type: string;
     viewUrl: string;
     onDeleteClick: () => void;
+    useUpdatedUX: boolean;
+    application: ApplicationStart;
+    navigationUI: NavigationPublicPluginStart['ui'];
   }) =>
     mount(
       <I18nProvider>
@@ -55,6 +61,13 @@ describe('Intro component', () => {
     canViewInApp: true,
     viewUrl: '/some-url',
     onDeleteClick: () => undefined,
+    useUpdatedUX: false,
+    navigationUI: ({
+      HeaderControl: ({ controls }) => {
+        return controls?.[0].ariaLabel ?? controls?.[0].label ?? null;
+      },
+    } as unknown) as NavigationPublicPluginStart['ui'],
+    application: coreMock.createStart().application,
   };
 
   it('renders correctly', () => {
@@ -133,4 +146,30 @@ describe('Intro component', () => {
     });
     expect(mounted.exists(`a[data-test-subj='savedObjectEditViewInApp']`)).toBe(false);
   });
+
+  it('renders correctly when use new UX', () => {
+    const mounted = mountHeader({
+      ...defaultProps,
+      useUpdatedUX: true,
+    });
+    expect(mounted).toMatchSnapshot();
+  });
+
+  it('renders correctly when use new UX and canViewInApp is true', () => {
+    const mounted = mountHeader({
+      ...defaultProps,
+      useUpdatedUX: true,
+      canViewInApp: true,
+    });
+    expect(mounted).toMatchSnapshot();
+  });
+
+  it('renders correctly when use new UX and canDelete is true', () => {
+    const mounted = mountHeader({
+      ...defaultProps,
+      useUpdatedUX: true,
+      canDelete: true,
+    });
+    expect(mounted).toMatchSnapshot();
+  });
 });
diff --git a/src/plugins/saved_objects_management/public/management_section/object_view/components/header.tsx b/src/plugins/saved_objects_management/public/management_section/object_view/components/header.tsx
index c17e1248c953..5f26c7a5b31c 100644
--- a/src/plugins/saved_objects_management/public/management_section/object_view/components/header.tsx
+++ b/src/plugins/saved_objects_management/public/management_section/object_view/components/header.tsx
@@ -38,6 +38,13 @@ import {
   EuiText,
 } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
+import { i18n } from '@osd/i18n';
+import { ApplicationStart } from '../../../../../../core/public';
+import {
+  NavigationPublicPluginStart,
+  TopNavControlButtonData,
+  TopNavControlIconData,
+} from '../../../../../navigation/public';
 
 interface HeaderProps {
   canEdit: boolean;
@@ -46,6 +53,9 @@ interface HeaderProps {
   type: string;
   viewUrl: string;
   onDeleteClick: () => void;
+  useUpdatedUX: boolean;
+  navigationUI: NavigationPublicPluginStart['ui'];
+  application: ApplicationStart;
 }
 
 export const Header = ({
@@ -55,8 +65,49 @@ export const Header = ({
   type,
   viewUrl,
   onDeleteClick,
+  useUpdatedUX,
+  navigationUI: { HeaderControl },
+  application,
 }: HeaderProps) => {
-  return (
+  return useUpdatedUX ? (
+    <HeaderControl
+      controls={[
+        ...(canDelete
+          ? [
+              {
+                controlType: 'icon',
+                iconType: 'trash',
+                ariaLabel: i18n.translate('savedObjectsManagement.view.deleteItemButtonLabel', {
+                  defaultMessage: 'Delete {title}',
+                  values: { title: type },
+                }),
+                run: onDeleteClick,
+                testId: 'savedObjectEditDelete',
+                display: 'base',
+                color: 'danger',
+              } as TopNavControlIconData,
+            ]
+          : []),
+        ...(canViewInApp
+          ? [
+              {
+                controlType: 'button',
+                iconType: 'popout',
+                label: i18n.translate('savedObjectsManagement.view.viewItemButtonLabel', {
+                  defaultMessage: 'View {title}',
+                  values: { title: type },
+                }),
+                href: viewUrl,
+                testId: 'savedObjectEditViewInApp',
+                fill: true,
+                iconSide: 'right',
+              } as TopNavControlButtonData,
+            ]
+          : []),
+      ]}
+      setMountPoint={application.setAppRightControls}
+    />
+  ) : (
     <EuiPageContentHeader>
       <EuiPageContentHeaderSection>
         <EuiText size="s">
diff --git a/src/plugins/saved_objects_management/public/management_section/object_view/saved_object_view.tsx b/src/plugins/saved_objects_management/public/management_section/object_view/saved_object_view.tsx
index 30627e69084c..badeadfdd3a3 100644
--- a/src/plugins/saved_objects_management/public/management_section/object_view/saved_object_view.tsx
+++ b/src/plugins/saved_objects_management/public/management_section/object_view/saved_object_view.tsx
@@ -30,9 +30,9 @@
 
 import React, { Component } from 'react';
 import { i18n } from '@osd/i18n';
-import { EuiSpacer, EuiPageContent } from '@elastic/eui';
+import { EuiSpacer, EuiPageContent, EuiTitle } from '@elastic/eui';
 import {
-  Capabilities,
+  ApplicationStart,
   SavedObjectsClientContract,
   OverlayStart,
   NotificationsStart,
@@ -45,18 +45,21 @@ import { canViewInApp } from '../../lib';
 import { SubmittedFormData } from '../types';
 import { UiActionsStart } from '../../../../ui_actions/public';
 import { SAVED_OBJECT_DELETE_TRIGGER } from '../../triggers';
+import { NavigationPublicPluginStart } from '../../../../navigation/public';
 
 interface SavedObjectEditionProps {
   id: string;
   serviceName: string;
   serviceRegistry: ISavedObjectsManagementServiceRegistry;
-  capabilities: Capabilities;
   overlays: OverlayStart;
   notifications: NotificationsStart;
   uiActions: UiActionsStart;
   notFoundType?: string;
   savedObjectsClient: SavedObjectsClientContract;
   history: ScopedHistory;
+  useUpdatedUX: boolean;
+  navigationUI: NavigationPublicPluginStart['ui'];
+  application: ApplicationStart;
 }
 
 interface SavedObjectEditionState {
@@ -92,21 +95,23 @@ export class SavedObjectEdition extends Component<
 
   render() {
     const {
-      capabilities,
+      application,
       notFoundType,
       serviceRegistry,
       id,
       serviceName,
       savedObjectsClient,
+      useUpdatedUX,
+      navigationUI,
     } = this.props;
     const { type } = this.state;
     const { object } = this.state;
-    const { edit: canEdit, delete: canDelete } = capabilities.savedObjectsManagement as Record<
-      string,
-      boolean
-    >;
-    const canView = canViewInApp(capabilities, type);
+    const { edit: canEdit, delete: canDelete } = application.capabilities
+      .savedObjectsManagement as Record<string, boolean>;
+    const canView = canViewInApp(application.capabilities, type);
     const service = serviceRegistry.get(serviceName)!.service;
+    const { HeaderControl } = navigationUI;
+    const typeWithFirstLetterToUpperCase = type.charAt(0).toUpperCase() + type.slice(1);
 
     return (
       <EuiPageContent horizontalPosition="center" data-test-subj="savedObjectsEdit">
@@ -117,22 +122,56 @@ export class SavedObjectEdition extends Component<
           type={type}
           onDeleteClick={() => this.delete()}
           viewUrl={service.urlFor(id)}
+          useUpdatedUX={useUpdatedUX}
+          navigationUI={navigationUI}
+          application={application}
         />
-        {notFoundType && (
-          <>
-            <EuiSpacer size="s" />
-            <NotFoundErrors type={notFoundType} />
-          </>
-        )}
-        {canEdit && (
-          <>
-            <EuiSpacer size="s" />
-            <Intro />
-          </>
-        )}
+        {notFoundType &&
+          (useUpdatedUX ? (
+            <HeaderControl
+              controls={[
+                {
+                  renderComponent: <NotFoundErrors type={notFoundType} />,
+                },
+              ]}
+              setMountPoint={application.setAppBottomControls}
+            />
+          ) : (
+            <>
+              <EuiSpacer size="s" />
+              <NotFoundErrors type={notFoundType} />
+            </>
+          ))}
+        {canEdit &&
+          (useUpdatedUX ? (
+            <HeaderControl
+              controls={[
+                {
+                  renderComponent: <Intro />,
+                },
+              ]}
+              setMountPoint={application.setAppBottomControls}
+            />
+          ) : (
+            <>
+              <EuiSpacer size="s" />
+              <Intro />
+            </>
+          ))}
         {object && (
           <>
-            <EuiSpacer size="m" />
+            {useUpdatedUX ? (
+              <EuiTitle size="s">
+                <h2>
+                  {i18n.translate('savedObjectsManagement.view.form.title', {
+                    defaultMessage: '{type} details',
+                    values: { type: typeWithFirstLetterToUpperCase },
+                  })}
+                </h2>
+              </EuiTitle>
+            ) : (
+              <EuiSpacer size="m" />
+            )}
             <Form
               object={object}
               savedObjectsClient={savedObjectsClient}
diff --git a/src/plugins/saved_objects_management/public/management_section/saved_objects_edition_page.tsx b/src/plugins/saved_objects_management/public/management_section/saved_objects_edition_page.tsx
index 49513e484272..c2db704fcd90 100644
--- a/src/plugins/saved_objects_management/public/management_section/saved_objects_edition_page.tsx
+++ b/src/plugins/saved_objects_management/public/management_section/saved_objects_edition_page.tsx
@@ -36,6 +36,7 @@ import { CoreStart, ChromeBreadcrumb, ScopedHistory } from 'src/core/public';
 import { UiActionsStart } from 'src/plugins/ui_actions/public';
 import { ISavedObjectsManagementServiceRegistry } from '../services';
 import { SavedObjectEdition } from './object_view';
+import { NavigationPublicPluginStart } from '../../../navigation/public';
 
 const SavedObjectsEditionPage = ({
   coreStart,
@@ -43,15 +44,18 @@ const SavedObjectsEditionPage = ({
   serviceRegistry,
   setBreadcrumbs,
   history,
+  useUpdatedUX,
+  navigation,
 }: {
   coreStart: CoreStart;
   uiActionsStart: UiActionsStart;
   serviceRegistry: ISavedObjectsManagementServiceRegistry;
   setBreadcrumbs: (crumbs: ChromeBreadcrumb[]) => void;
   history: ScopedHistory;
+  useUpdatedUX: boolean;
+  navigation: NavigationPublicPluginStart;
 }) => {
   const { service: serviceName, id } = useParams<{ service: string; id: string }>();
-  const capabilities = coreStart.application.capabilities;
 
   const { search } = useLocation();
   const query = parse(search);
@@ -60,9 +64,13 @@ const SavedObjectsEditionPage = ({
   useEffect(() => {
     setBreadcrumbs([
       {
-        text: i18n.translate('savedObjectsManagement.breadcrumb.index', {
-          defaultMessage: 'Saved objects',
-        }),
+        text: useUpdatedUX
+          ? i18n.translate('savedObjectsManagement.breadcrumb.updatedUX.index', {
+              defaultMessage: 'Assets',
+            })
+          : i18n.translate('savedObjectsManagement.breadcrumb.index', {
+              defaultMessage: 'Saved objects',
+            }),
         href: '/',
       },
       {
@@ -72,7 +80,7 @@ const SavedObjectsEditionPage = ({
         }),
       },
     ]);
-  }, [setBreadcrumbs, service]);
+  }, [setBreadcrumbs, service, useUpdatedUX]);
 
   return (
     <SavedObjectEdition
@@ -83,9 +91,11 @@ const SavedObjectsEditionPage = ({
       overlays={coreStart.overlays}
       notifications={coreStart.notifications}
       uiActions={uiActionsStart}
-      capabilities={capabilities}
       notFoundType={query.notFound as string}
       history={history}
+      useUpdatedUX={useUpdatedUX}
+      navigationUI={navigation.ui}
+      application={coreStart.application}
     />
   );
 };