diff --git a/public/apps/configuration/app-router.tsx b/public/apps/configuration/app-router.tsx
index f0dc0cae2..eb987e7a5 100644
--- a/public/apps/configuration/app-router.tsx
+++ b/public/apps/configuration/app-router.tsx
@@ -13,8 +13,8 @@
  *   permissions and limitations under the License.
  */
 
-import { EuiBreadcrumb, EuiPage, EuiPageBody, EuiPageSideBar } from '@elastic/eui';
-import { flow, partial } from 'lodash';
+import { EuiPage, EuiPageBody, EuiPageSideBar } from '@elastic/eui';
+import { flow } from 'lodash';
 import React, { createContext, useState } from 'react';
 import { HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
 import { DataSourceOption } from 'src/plugins/data_source_management/public/components/data_source_menu/types';
@@ -38,31 +38,37 @@ import { TenantList } from './panels/tenant-list/tenant-list';
 import { UserList } from './panels/user-list';
 import { Action, RouteItem, SubAction } from './types';
 import { ResourceType } from '../../../common';
-import { buildHashUrl, buildUrl } from './utils/url-builder';
+import { buildUrl } from './utils/url-builder';
 import { CrossPageToast } from './cross-page-toast';
 import { getDataSourceFromUrl, LocalCluster } from '../../utils/datasource-utils';
+import { getBreadcrumbs } from './utils/resource-utils';
 
 const LANDING_PAGE_URL = '/getstarted';
 
 export const ROUTE_MAP: { [key: string]: RouteItem } = {
   getStarted: {
     name: 'Get Started',
+    breadCrumbDisplayNameWithoutSecurityBase: 'Get started with access control',
     href: LANDING_PAGE_URL,
   },
   [ResourceType.roles]: {
     name: 'Roles',
+    breadCrumbDisplayNameWithoutSecurityBase: 'Roles',
     href: buildUrl(ResourceType.roles),
   },
   [ResourceType.users]: {
     name: 'Internal users',
+    breadCrumbDisplayNameWithoutSecurityBase: 'Internal users',
     href: buildUrl(ResourceType.users),
   },
   [ResourceType.permissions]: {
     name: 'Permissions',
+    breadCrumbDisplayNameWithoutSecurityBase: 'Permissions',
     href: buildUrl(ResourceType.permissions),
   },
   [ResourceType.tenants]: {
     name: 'Tenants',
+    breadCrumbDisplayNameWithoutSecurityBase: 'Dashboard multi-tenancy',
     href: buildUrl(ResourceType.tenants),
   },
   [ResourceType.tenantsConfigureTab]: {
@@ -71,10 +77,12 @@ export const ROUTE_MAP: { [key: string]: RouteItem } = {
   },
   [ResourceType.auth]: {
     name: 'Authentication',
+    breadCrumbDisplayNameWithoutSecurityBase: 'Authentication and authorization',
     href: buildUrl(ResourceType.auth),
   },
   [ResourceType.auditLogging]: {
     name: 'Audit logs',
+    breadCrumbDisplayNameWithoutSecurityBase: 'Audit logs',
     href: buildUrl(ResourceType.auditLogging),
   },
 };
@@ -100,39 +108,6 @@ export const allNavPanelUrls = (multitenancyEnabled: boolean) =>
       ...(multitenancyEnabled ? [buildUrl(ResourceType.tenantsConfigureTab)] : []),
     ]);
 
-export function getBreadcrumbs(
-  resourceType?: ResourceType,
-  pageTitle?: string,
-  subAction?: string
-): EuiBreadcrumb[] {
-  const breadcrumbs: EuiBreadcrumb[] = [
-    {
-      text: 'Security',
-      href: buildHashUrl(),
-    },
-  ];
-
-  if (resourceType) {
-    breadcrumbs.push({
-      text: ROUTE_MAP[resourceType].name,
-      href: buildHashUrl(resourceType),
-    });
-  }
-
-  if (pageTitle) {
-    breadcrumbs.push({
-      text: pageTitle,
-    });
-  }
-
-  if (subAction) {
-    breadcrumbs.push({
-      text: subAction,
-    });
-  }
-  return breadcrumbs;
-}
-
 function decodeParams(params: { [k: string]: string }): any {
   return Object.keys(params).reduce((obj: { [k: string]: string }, key: string) => {
     obj[key] = decodeURIComponent(params[key]);
@@ -154,6 +129,7 @@ export function AppRouter(props: AppDependencies) {
   const dataSourceFromUrl = dataSourceEnabled ? getDataSourceFromUrl() : LocalCluster;
 
   const [dataSource, setDataSource] = useState<DataSourceOption>(dataSourceFromUrl);
+  const includeSecurityBase = !props.coreStart.uiSettings.get('home:useNewHomePage');
 
   return (
     <DataSourceContext.Provider value={{ dataSource, setDataSource }}>
@@ -173,92 +149,72 @@ export function AppRouter(props: AppDependencies) {
               <Route
                 path={buildUrl(ResourceType.roles, Action.edit) + '/:roleName/' + SubAction.mapuser}
                 render={(match) => (
-                  <RoleEditMappedUser
-                    buildBreadcrumbs={partial(setGlobalBreadcrumbs, ResourceType.roles)}
-                    {...{ ...props, ...decodeParams(match.match.params) }}
-                  />
+                  <RoleEditMappedUser {...{ ...props, ...decodeParams(match.match.params) }} />
                 )}
               />
               <Route
                 path={buildUrl(ResourceType.roles, Action.view) + '/:roleName/:prevAction?'}
                 render={(match) => (
-                  <RoleView
-                    buildBreadcrumbs={partial(setGlobalBreadcrumbs, ResourceType.roles)}
-                    {...{ ...props, ...decodeParams(match.match.params) }}
-                  />
+                  <RoleView {...{ ...props, ...decodeParams(match.match.params) }} />
                 )}
               />
               <Route
                 path={buildUrl(ResourceType.roles) + '/:action/:sourceRoleName?'}
                 render={(match) => (
-                  <RoleEdit
-                    buildBreadcrumbs={partial(setGlobalBreadcrumbs, ResourceType.roles)}
-                    {...{ ...props, ...decodeParams(match.match.params) }}
-                  />
+                  <RoleEdit {...{ ...props, ...decodeParams(match.match.params) }} />
                 )}
               />
               <Route
                 path={ROUTE_MAP.roles.href}
                 render={() => {
-                  setGlobalBreadcrumbs(ResourceType.roles);
                   return <RoleList {...props} />;
                 }}
               />
               <Route
                 path={ROUTE_MAP.auth.href}
                 render={() => {
-                  setGlobalBreadcrumbs(ResourceType.auth);
                   return <AuthView {...props} />;
                 }}
               />
               <Route
                 path={buildUrl(ResourceType.users) + '/:action/:sourceUserName?'}
                 render={(match) => (
-                  <InternalUserEdit
-                    buildBreadcrumbs={partial(setGlobalBreadcrumbs, ResourceType.users)}
-                    {...{ ...props, ...decodeParams(match.match.params) }}
-                  />
+                  <InternalUserEdit {...{ ...props, ...decodeParams(match.match.params) }} />
                 )}
               />
               <Route
                 path={ROUTE_MAP.users.href}
                 render={() => {
-                  setGlobalBreadcrumbs(ResourceType.users);
                   return <UserList {...props} />;
                 }}
               />
               <Route
                 path={buildUrl(ResourceType.auditLogging) + SUB_URL_FOR_GENERAL_SETTINGS_EDIT}
                 render={() => {
-                  setGlobalBreadcrumbs(ResourceType.auditLogging, 'General settings');
                   return <AuditLoggingEditSettings setting={'general'} {...props} />;
                 }}
               />
               <Route
                 path={buildUrl(ResourceType.auditLogging) + SUB_URL_FOR_COMPLIANCE_SETTINGS_EDIT}
                 render={() => {
-                  setGlobalBreadcrumbs(ResourceType.auditLogging, 'Compliance settings');
                   return <AuditLoggingEditSettings setting={'compliance'} {...props} />;
                 }}
               />
               <Route
                 path={ROUTE_MAP.auditLogging.href + '/:fromType?'}
                 render={(match) => {
-                  setGlobalBreadcrumbs(ResourceType.auditLogging);
                   return <AuditLogging {...{ ...props, ...match.match.params }} />;
                 }}
               />
               <Route
                 path={ROUTE_MAP.permissions.href}
                 render={() => {
-                  setGlobalBreadcrumbs(ResourceType.permissions);
                   return <PermissionList {...props} />;
                 }}
               />
               <Route
                 path={ROUTE_MAP.getStarted.href}
                 render={() => {
-                  setGlobalBreadcrumbs();
                   return <GetStarted {...props} />;
                 }}
               />
@@ -266,7 +222,6 @@ export function AppRouter(props: AppDependencies) {
                 <Route
                   path={ROUTE_MAP.tenants.href}
                   render={() => {
-                    setGlobalBreadcrumbs(ResourceType.tenants);
                     return <TenantList tabID={'Manage'} {...props} />;
                   }}
                 />
@@ -275,7 +230,6 @@ export function AppRouter(props: AppDependencies) {
                 <Route
                   path={ROUTE_MAP.tenantsConfigureTab.href}
                   render={() => {
-                    setGlobalBreadcrumbs(ResourceType.tenants);
                     return <TenantList tabID={'Configure'} {...props} />;
                   }}
                 />
diff --git a/public/apps/configuration/header/header-components.tsx b/public/apps/configuration/header/header-components.tsx
new file mode 100644
index 000000000..dde2bbbce
--- /dev/null
+++ b/public/apps/configuration/header/header-components.tsx
@@ -0,0 +1,62 @@
+/*
+ *   Copyright OpenSearch Contributors
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License").
+ *   You may not use this file except in compliance with the License.
+ *   A copy of the License is located at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   or in the "license" file accompanying this file. This file is distributed
+ *   on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ *   express or implied. See the License for the specific language governing
+ *   permissions and limitations under the License.
+ */
+
+import React from 'react';
+import { flow } from 'lodash';
+import { ControlProps, DescriptionProps, HeaderProps } from './header-props';
+import { getBreadcrumbs } from '../utils/resource-utils';
+
+export const HeaderButtonOrLink = React.memo((props: HeaderProps & ControlProps) => {
+  const { HeaderControl } = props.navigation.ui;
+
+  return (
+    <HeaderControl
+      setMountPoint={props.coreStart.application.setAppRightControls}
+      controls={props.appRightControls}
+    />
+  );
+});
+
+export const PageHeader = (props: HeaderProps & DescriptionProps & ControlProps) => {
+  const { HeaderControl } = props.navigation.ui; // need to get this from SecurityPluginStartDependencies
+  const useNewUx = props.coreStart.uiSettings.get('home:useNewHomePage');
+  flow(getBreadcrumbs, props.coreStart.chrome.setBreadcrumbs)(
+    !useNewUx,
+    props.resourceType,
+    props.pageTitle,
+    props.subAction,
+    props.count
+  );
+  if (useNewUx) {
+    return (
+      <>
+        {props.descriptionControls ? (
+          <HeaderControl
+            setMountPoint={props.coreStart.application.setAppDescriptionControls}
+            controls={props.descriptionControls}
+          />
+        ) : null}
+        {props.appRightControls ? (
+          <HeaderControl
+            setMountPoint={props.coreStart.application.setAppRightControls}
+            controls={props.appRightControls}
+          />
+        ) : null}
+      </>
+    );
+  } else {
+    return props.fallBackComponent;
+  }
+};
diff --git a/public/apps/configuration/header/header-props.tsx b/public/apps/configuration/header/header-props.tsx
new file mode 100644
index 000000000..f9411e20a
--- /dev/null
+++ b/public/apps/configuration/header/header-props.tsx
@@ -0,0 +1,37 @@
+/*
+ *   Copyright OpenSearch Contributors
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License").
+ *   You may not use this file except in compliance with the License.
+ *   A copy of the License is located at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   or in the "license" file accompanying this file. This file is distributed
+ *   on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ *   express or implied. See the License for the specific language governing
+ *   permissions and limitations under the License.
+ */
+
+import { CoreStart } from 'opensearch-dashboards/public';
+import { NavigationPublicPluginStart } from 'src/plugins/navigation/public';
+import { TopNavControlData } from 'src/plugins/navigation/public/top_nav_menu/top_nav_control_data';
+import { ResourceType } from '../../../../common';
+
+export interface HeaderProps {
+  navigation: NavigationPublicPluginStart;
+  coreStart: CoreStart;
+  fallBackComponent: JSX.Element;
+  resourceType?: ResourceType;
+  pageTitle?: string;
+  subAction?: string;
+  count?: number;
+}
+
+export interface ControlProps {
+  appRightControls?: TopNavControlData[];
+}
+
+export interface DescriptionProps {
+  descriptionControls?: TopNavControlData[];
+}
diff --git a/public/apps/configuration/header/test/header-components.test.tsx b/public/apps/configuration/header/test/header-components.test.tsx
new file mode 100644
index 000000000..e9a677f52
--- /dev/null
+++ b/public/apps/configuration/header/test/header-components.test.tsx
@@ -0,0 +1,93 @@
+/*
+ *   Copyright OpenSearch Contributors
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License").
+ *   You may not use this file except in compliance with the License.
+ *   A copy of the License is located at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   or in the "license" file accompanying this file. This file is distributed
+ *   on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ *   express or implied. See the License for the specific language governing
+ *   permissions and limitations under the License.
+ */
+
+import React from 'react';
+import { mount } from 'enzyme';
+import { PageHeader } from '../header-components'; // Adjust the import path as needed
+import { getBreadcrumbs } from '../../utils/resource-utils';
+
+jest.mock('../../utils/resource-utils', () => ({
+  getBreadcrumbs: jest.fn(),
+}));
+
+describe('PageHeader', () => {
+  let props;
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+    props = {
+      navigation: {
+        ui: {
+          HeaderControl: jest.fn(({ setMountPoint, controls }) => null),
+        },
+      },
+      coreStart: {
+        chrome: {
+          navGroup: {
+            getNavGroupEnabled: jest.fn(),
+          },
+          setBreadcrumbs: jest.fn(),
+        },
+        application: {
+          setAppRightControls: jest.fn(),
+          setAppDescriptionControls: jest.fn(),
+        },
+        uiSettings: {
+          get: jest.fn(),
+        },
+      },
+      resourceType: 'test-resource',
+      pageTitle: 'Test Page Title',
+      subAction: 'test-sub-action',
+      count: 5,
+      descriptionControls: ['control-1'],
+      appRightControls: ['control-2'],
+      fallBackComponent: <div>Fallback Component</div>,
+    };
+  });
+
+  it('renders with the feature flag off', () => {
+    props.coreStart.uiSettings.get.mockReturnValueOnce(false);
+    const wrapper = mount(<PageHeader {...props} />);
+
+    expect(getBreadcrumbs).toHaveBeenCalledWith(
+      true,
+      'test-resource',
+      'Test Page Title',
+      'test-sub-action',
+      5
+    );
+    expect(wrapper.contains(props.fallBackComponent)).toBe(true);
+
+    expect(props.navigation.ui.HeaderControl).not.toBeCalled();
+  });
+
+  it('renders with the feature flag on', () => {
+    props.coreStart.uiSettings.get.mockReturnValueOnce(true);
+    const wrapper = mount(<PageHeader {...props} />);
+
+    expect(getBreadcrumbs).toHaveBeenCalledWith(
+      false,
+      'test-resource',
+      'Test Page Title',
+      'test-sub-action',
+      5
+    );
+    expect(wrapper.contains(props.fallBackComponent)).toBe(false);
+    // Verifies that the HeaderControl is called with both controls passed as props
+    expect(props.navigation.ui.HeaderControl.mock.calls[0][0].controls).toEqual(['control-1']);
+    expect(props.navigation.ui.HeaderControl.mock.calls[1][0].controls).toEqual(['control-2']);
+  });
+});
diff --git a/public/apps/configuration/panels/audit-logging/audit-logging-edit-settings.tsx b/public/apps/configuration/panels/audit-logging/audit-logging-edit-settings.tsx
index 7f2ab07aa..4de73094c 100644
--- a/public/apps/configuration/panels/audit-logging/audit-logging-edit-settings.tsx
+++ b/public/apps/configuration/panels/audit-logging/audit-logging-edit-settings.tsx
@@ -38,6 +38,7 @@ import { setCrossPageToast } from '../../utils/storage-utils';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
 import { DataSourceContext } from '../../app-router';
 import { getClusterInfo } from '../../../../utils/datasource-utils';
+import { PageHeader } from '../../header/header-components';
 
 interface AuditLoggingEditSettingProps extends AppDependencies {
   setting: 'general' | 'compliance';
@@ -155,11 +156,19 @@ export function AuditLoggingEditSettings(props: AuditLoggingEditSettingProps) {
   const renderComplianceSetting = () => {
     return (
       <>
-        <EuiPageHeader>
-          <EuiTitle size="l">
-            <h1>Compliance settings</h1>
-          </EuiTitle>
-        </EuiPageHeader>
+        <PageHeader
+          navigation={props.depsStart.navigation}
+          coreStart={props.coreStart}
+          fallBackComponent={
+            <EuiPageHeader>
+              <EuiTitle size="l">
+                <h1>Compliance settings</h1>
+              </EuiTitle>
+            </EuiPageHeader>
+          }
+          resourceType={ResourceType.auditLogging}
+          pageTitle="Compliance settings"
+        />
 
         <EuiPanel>
           <EditSettingGroup
@@ -207,11 +216,19 @@ export function AuditLoggingEditSettings(props: AuditLoggingEditSettingProps) {
   const renderGeneralSettings = () => {
     return (
       <>
-        <EuiPageHeader>
-          <EuiTitle size="l">
-            <h1>General settings</h1>
-          </EuiTitle>
-        </EuiPageHeader>
+        <PageHeader
+          navigation={props.depsStart.navigation}
+          coreStart={props.coreStart}
+          fallBackComponent={
+            <EuiPageHeader>
+              <EuiTitle size="l">
+                <h1>General settings</h1>
+              </EuiTitle>
+            </EuiPageHeader>
+          }
+          resourceType={ResourceType.auditLogging}
+          pageTitle="General settings"
+        />
 
         <EuiPanel>
           <EditSettingGroup
diff --git a/public/apps/configuration/panels/audit-logging/audit-logging.tsx b/public/apps/configuration/panels/audit-logging/audit-logging.tsx
index 4db106373..efaa13d15 100644
--- a/public/apps/configuration/panels/audit-logging/audit-logging.tsx
+++ b/public/apps/configuration/panels/audit-logging/audit-logging.tsx
@@ -49,6 +49,7 @@ import { DocLinks } from '../../constants';
 import { DataSourceContext } from '../../app-router';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
 import { AccessErrorComponent } from '../../access-error-component';
+import { PageHeader } from '../../header/header-components';
 
 interface AuditLoggingProps extends AppDependencies {
   fromType: string;
@@ -258,11 +259,18 @@ export function AuditLogging(props: AuditLoggingProps) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      <EuiPageHeader>
-        <EuiTitle size="l">
-          <h3>Audit logging</h3>
-        </EuiTitle>
-      </EuiPageHeader>
+      <PageHeader
+        coreStart={props.coreStart}
+        navigation={props.depsStart.navigation}
+        fallBackComponent={
+          <EuiPageHeader>
+            <EuiTitle size="l">
+              <h3>Audit logging</h3>
+            </EuiTitle>
+          </EuiPageHeader>
+        }
+        resourceType={ResourceType.auditLogging}
+      />
       <EuiSpacer />
       {loading ? <EuiLoadingContent /> : content}
     </div>
diff --git a/public/apps/configuration/panels/audit-logging/test/__snapshots__/audit-logging.test.tsx.snap b/public/apps/configuration/panels/audit-logging/test/__snapshots__/audit-logging.test.tsx.snap
index c5b689b96..fa1575630 100644
--- a/public/apps/configuration/panels/audit-logging/test/__snapshots__/audit-logging.test.tsx.snap
+++ b/public/apps/configuration/panels/audit-logging/test/__snapshots__/audit-logging.test.tsx.snap
@@ -245,10 +245,17 @@ exports[`Audit logs render when AuditLoggingSettings.enabled is true 1`] = `
     coreStart={
       Object {
         "http": 1,
+        "uiSettings": Object {
+          "get": [MockFunction],
+        },
       }
     }
     dataSourcePickerReadOnly={false}
-    navigation={Object {}}
+    depsStart={
+      Object {
+        "navigation": Object {},
+      }
+    }
     selectedDataSource={
       Object {
         "id": "test",
@@ -256,15 +263,29 @@ exports[`Audit logs render when AuditLoggingSettings.enabled is true 1`] = `
     }
     setDataSource={[MockFunction]}
   />
-  <EuiPageHeader>
-    <EuiTitle
-      size="l"
-    >
-      <h3>
-        Audit logging
-      </h3>
-    </EuiTitle>
-  </EuiPageHeader>
+  <PageHeader
+    coreStart={
+      Object {
+        "http": 1,
+        "uiSettings": Object {
+          "get": [MockFunction],
+        },
+      }
+    }
+    fallBackComponent={
+      <EuiPageHeader>
+        <EuiTitle
+          size="l"
+        >
+          <h3>
+            Audit logging
+          </h3>
+        </EuiTitle>
+      </EuiPageHeader>
+    }
+    navigation={Object {}}
+    resourceType="auditLogging"
+  />
   <EuiSpacer />
   <EuiPanel>
     <EuiForm>
@@ -655,10 +676,17 @@ exports[`Audit logs should load access error component 1`] = `
     coreStart={
       Object {
         "http": 1,
+        "uiSettings": Object {
+          "get": [MockFunction],
+        },
       }
     }
     dataSourcePickerReadOnly={false}
-    navigation={Object {}}
+    depsStart={
+      Object {
+        "navigation": Object {},
+      }
+    }
     selectedDataSource={
       Object {
         "id": "test",
@@ -666,15 +694,29 @@ exports[`Audit logs should load access error component 1`] = `
     }
     setDataSource={[MockFunction]}
   />
-  <EuiPageHeader>
-    <EuiTitle
-      size="l"
-    >
-      <h3>
-        Audit logging
-      </h3>
-    </EuiTitle>
-  </EuiPageHeader>
+  <PageHeader
+    coreStart={
+      Object {
+        "http": 1,
+        "uiSettings": Object {
+          "get": [MockFunction],
+        },
+      }
+    }
+    fallBackComponent={
+      <EuiPageHeader>
+        <EuiTitle
+          size="l"
+        >
+          <h3>
+            Audit logging
+          </h3>
+        </EuiTitle>
+      </EuiPageHeader>
+    }
+    navigation={Object {}}
+    resourceType="auditLogging"
+  />
   <EuiSpacer />
   <AccessErrorComponent
     loading={false}
diff --git a/public/apps/configuration/panels/audit-logging/test/audit-logging.test.tsx b/public/apps/configuration/panels/audit-logging/test/audit-logging.test.tsx
index b3628e0c5..49fe0f806 100644
--- a/public/apps/configuration/panels/audit-logging/test/audit-logging.test.tsx
+++ b/public/apps/configuration/panels/audit-logging/test/audit-logging.test.tsx
@@ -37,6 +37,9 @@ describe('Audit logs', () => {
   const setState = jest.fn();
   const mockCoreStart = {
     http: 1,
+    uiSettings: {
+      get: jest.fn().mockReturnValue(false),
+    },
   };
 
   beforeEach(() => {
@@ -58,7 +61,7 @@ describe('Audit logs', () => {
     mockAuditLoggingUtils.getAuditLogging = jest.fn().mockReturnValue(mockAuditLoggingData);
 
     const component = shallow(
-      <AuditLogging coreStart={mockCoreStart as any} navigation={{} as any} />
+      <AuditLogging coreStart={mockCoreStart as any} depsStart={{ navigation: {} } as any} />
     );
 
     const switchFound = component.find(EuiCompressedSwitch);
@@ -76,7 +79,9 @@ describe('Audit logs', () => {
 
     mockAuditLoggingUtils.getAuditLogging = jest.fn().mockReturnValue(mockAuditLoggingData);
 
-    shallow(<AuditLogging coreStart={mockCoreStart as any} navigation={{} as any} />);
+    shallow(
+      <AuditLogging coreStart={mockCoreStart as any} depsStart={{ navigation: {} } as any} />
+    );
 
     process.nextTick(() => {
       expect(mockAuditLoggingUtils.getAuditLogging).toHaveBeenCalledTimes(1);
@@ -94,7 +99,9 @@ describe('Audit logs', () => {
       throw Error();
     });
 
-    shallow(<AuditLogging coreStart={mockCoreStart as any} navigation={{} as any} />);
+    shallow(
+      <AuditLogging coreStart={mockCoreStart as any} depsStart={{ navigation: {} } as any} />
+    );
 
     process.nextTick(() => {
       expect(mockAuditLoggingUtils.getAuditLogging).toHaveBeenCalledTimes(1);
@@ -120,7 +127,7 @@ describe('Audit logs', () => {
 
   it('audit logging switch change', () => {
     const component = shallow(
-      <AuditLogging coreStart={mockCoreStart as any} navigation={{} as any} />
+      <AuditLogging coreStart={mockCoreStart as any} depsStart={{ navigation: {} } as any} />
     );
     component.find('[data-test-subj="audit-logging-enabled-switch"]').simulate('change');
     expect(mockAuditLoggingUtils.updateAuditLogging).toHaveBeenCalledTimes(1);
@@ -134,7 +141,7 @@ describe('Audit logs', () => {
       throw Error();
     });
     const component = shallow(
-      <AuditLogging coreStart={mockCoreStart as any} navigation={{} as any} />
+      <AuditLogging coreStart={mockCoreStart as any} depsStart={{ navigation: {} } as any} />
     );
     component.find('[data-test-subj="audit-logging-enabled-switch"]').simulate('change');
 
@@ -150,7 +157,7 @@ describe('Audit logs', () => {
       .mockImplementationOnce(() => [auditLoggingSettings, setState])
       .mockImplementationOnce(() => [false, jest.fn()]);
     const component = shallow(
-      <AuditLogging coreStart={mockCoreStart as any} navigation={{} as any} />
+      <AuditLogging coreStart={mockCoreStart as any} depsStart={{ navigation: {} } as any} />
     );
     expect(component).toMatchSnapshot();
   });
@@ -163,7 +170,7 @@ describe('Audit logs', () => {
       .mockImplementationOnce(() => [auditLoggingSettings, setState])
       .mockImplementationOnce(() => [false, jest.fn()]);
     const component = shallow(
-      <AuditLogging coreStart={mockCoreStart as any} navigation={{} as any} />
+      <AuditLogging coreStart={mockCoreStart as any} depsStart={{ navigation: {} } as any} />
     );
     component.find('[data-test-subj="general-settings-configure"]').simulate('click');
     expect(window.location.hash).toBe(
@@ -179,7 +186,7 @@ describe('Audit logs', () => {
       .mockImplementationOnce(() => [auditLoggingSettings, setState])
       .mockImplementationOnce(() => [false, jest.fn()]);
     const component = shallow(
-      <AuditLogging coreStart={mockCoreStart as any} navigation={{} as any} />
+      <AuditLogging coreStart={mockCoreStart as any} depsStart={{ navigation: {} } as any} />
     );
     component.find('[data-test-subj="compliance-settings-configure"]').simulate('click');
     expect(window.location.hash).toBe(
@@ -198,7 +205,7 @@ describe('Audit logs', () => {
       .mockImplementationOnce(() => [false, jest.fn()])
       .mockImplementationOnce(() => [true, jest.fn()]);
     const component = shallow(
-      <AuditLogging coreStart={mockCoreStart as any} navigation={{} as any} />
+      <AuditLogging coreStart={mockCoreStart as any} depsStart={{ navigation: {} } as any} />
     );
     expect(component).toMatchSnapshot();
   });
diff --git a/public/apps/configuration/panels/auth-view/auth-view.tsx b/public/apps/configuration/panels/auth-view/auth-view.tsx
index 8022ca260..6c19a9814 100644
--- a/public/apps/configuration/panels/auth-view/auth-view.tsx
+++ b/public/apps/configuration/panels/auth-view/auth-view.tsx
@@ -26,6 +26,8 @@ import { InstructionView } from './instruction-view';
 import { DataSourceContext } from '../../app-router';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
 import { AccessErrorComponent } from '../../access-error-component';
+import { PageHeader } from '../../header/header-components';
+import { ResourceType } from '../../../../../common';
 
 export function AuthView(props: AppDependencies) {
   const [authentication, setAuthentication] = React.useState([]);
@@ -60,6 +62,18 @@ export function AuthView(props: AppDependencies) {
     fetchData();
   }, [props.coreStart.http, dataSource]);
 
+  const buttonData = [
+    {
+      label: 'Manage via config.yml',
+      isLoading: false,
+      href: DocLinks.BackendConfigurationDoc,
+      iconType: 'popout',
+      iconSide: 'right',
+      type: 'button',
+      target: '_blank',
+    },
+  ];
+
   if (isEmpty(authentication) && !loading) {
     return (
       <>
@@ -69,11 +83,15 @@ export function AuthView(props: AppDependencies) {
           setDataSource={setDataSource}
           selectedDataSource={dataSource}
         />
-        {accessErrorFlag ? (
-          <EuiTitle size="l">
-            <h1>Authentication and authorization</h1>
-          </EuiTitle>
-        ) : null}
+        <PageHeader
+          navigation={props.depsStart.navigation}
+          coreStart={props.coreStart}
+          fallBackComponent={
+            <EuiTitle size="l">
+              <h1>Authentication and authorization</h1>
+            </EuiTitle>
+          }
+        />
         {accessErrorFlag ? (
           <AccessErrorComponent
             loading={loading}
@@ -94,17 +112,25 @@ export function AuthView(props: AppDependencies) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      <EuiPageHeader>
-        <EuiTitle size="l">
-          <h1>Authentication and authorization</h1>
-        </EuiTitle>
-        {!loading && !errorFlag && props.config.ui.backend_configurable && (
-          <ExternalLinkButton
-            href={DocLinks.BackendConfigurationDoc}
-            text="Manage via config.yml"
-          />
-        )}
-      </EuiPageHeader>
+      <PageHeader
+        navigation={props.depsStart.navigation}
+        coreStart={props.coreStart}
+        appRightControls={buttonData}
+        fallBackComponent={
+          <EuiPageHeader>
+            <EuiTitle size="l">
+              <h1>Authentication and authorization</h1>
+            </EuiTitle>
+            {!loading && !errorFlag && props.config.ui.backend_configurable && (
+              <ExternalLinkButton
+                href={DocLinks.BackendConfigurationDoc}
+                text="Manage via config.yml"
+              />
+            )}
+          </EuiPageHeader>
+        }
+        resourceType={ResourceType.auth}
+      />
       {loading ? (
         <EuiLoadingContent />
       ) : accessErrorFlag ? (
diff --git a/public/apps/configuration/panels/auth-view/instruction-view.tsx b/public/apps/configuration/panels/auth-view/instruction-view.tsx
index c06383e23..0e53938e8 100644
--- a/public/apps/configuration/panels/auth-view/instruction-view.tsx
+++ b/public/apps/configuration/panels/auth-view/instruction-view.tsx
@@ -13,7 +13,7 @@
  *   permissions and limitations under the License.
  */
 
-import { EuiCode, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
+import { EuiCode, EuiSpacer, EuiText } from '@elastic/eui';
 import React from 'react';
 import { ClientConfigType } from '../../../../types';
 import { ExternalLinkButton } from '../../utils/display-utils';
@@ -22,10 +22,6 @@ import { DocLinks } from '../../constants';
 export function InstructionView(props: { config: ClientConfigType }) {
   return (
     <>
-      <EuiTitle size="l">
-        <h1>Authentication and authorization</h1>
-      </EuiTitle>
-
       <EuiSpacer size="xxl" />
 
       <EuiText textAlign="center">
diff --git a/public/apps/configuration/panels/auth-view/test/__snapshots__/auth-view.test.tsx.snap b/public/apps/configuration/panels/auth-view/test/__snapshots__/auth-view.test.tsx.snap
index aff22a5fb..6ede754fb 100644
--- a/public/apps/configuration/panels/auth-view/test/__snapshots__/auth-view.test.tsx.snap
+++ b/public/apps/configuration/panels/auth-view/test/__snapshots__/auth-view.test.tsx.snap
@@ -9,7 +9,11 @@ exports[`Auth view should load access error component 1`] = `
       }
     }
     dataSourcePickerReadOnly={false}
-    navigation={Object {}}
+    depsStart={
+      Object {
+        "navigation": Object {},
+      }
+    }
     selectedDataSource={
       Object {
         "id": "test",
@@ -17,13 +21,23 @@ exports[`Auth view should load access error component 1`] = `
     }
     setDataSource={[MockFunction]}
   />
-  <EuiTitle
-    size="l"
-  >
-    <h1>
-      Authentication and authorization
-    </h1>
-  </EuiTitle>
+  <PageHeader
+    coreStart={
+      Object {
+        "http": 1,
+      }
+    }
+    fallBackComponent={
+      <EuiTitle
+        size="l"
+      >
+        <h1>
+          Authentication and authorization
+        </h1>
+      </EuiTitle>
+    }
+    navigation={Object {}}
+  />
   <AccessErrorComponent
     loading={false}
   />
diff --git a/public/apps/configuration/panels/auth-view/test/auth-view.test.tsx b/public/apps/configuration/panels/auth-view/test/auth-view.test.tsx
index 5643f86fa..91d020da3 100644
--- a/public/apps/configuration/panels/auth-view/test/auth-view.test.tsx
+++ b/public/apps/configuration/panels/auth-view/test/auth-view.test.tsx
@@ -62,7 +62,7 @@ describe('Auth view', () => {
   it('valid data', (done) => {
     mockAuthViewUtils.getSecurityConfig = jest.fn().mockReturnValue(config);
 
-    shallow(<AuthView coreStart={mockCoreStart as any} navigation={{} as any} />);
+    shallow(<AuthView coreStart={mockCoreStart as any} depsStart={{ navigation: {} } as any} />);
 
     process.nextTick(() => {
       expect(mockAuthViewUtils.getSecurityConfig).toHaveBeenCalledTimes(1);
@@ -81,7 +81,7 @@ describe('Auth view', () => {
 
     jest.spyOn(console, 'log').mockImplementationOnce(() => {});
 
-    shallow(<AuthView coreStart={mockCoreStart as any} navigation={{} as any} />);
+    shallow(<AuthView coreStart={mockCoreStart as any} depsStart={{ navigation: {} } as any} />);
 
     process.nextTick(() => {
       expect(mockAuthViewUtils.getSecurityConfig).toHaveBeenCalledTimes(1);
@@ -104,7 +104,9 @@ describe('Auth view', () => {
     mockAuthViewUtils.getSecurityConfig = jest
       .fn()
       .mockRejectedValue({ response: { status: 403 } });
-    const component = shallow(<AuthView coreStart={mockCoreStart as any} navigation={{} as any} />);
+    const component = shallow(
+      <AuthView coreStart={mockCoreStart as any} depsStart={{ navigation: {} } as any} />
+    );
     expect(component).toMatchSnapshot();
   });
 });
diff --git a/public/apps/configuration/panels/auth-view/test/instruction-view.test.tsx b/public/apps/configuration/panels/auth-view/test/instruction-view.test.tsx
index 16a8c664f..9ab4902a0 100644
--- a/public/apps/configuration/panels/auth-view/test/instruction-view.test.tsx
+++ b/public/apps/configuration/panels/auth-view/test/instruction-view.test.tsx
@@ -15,7 +15,6 @@
 
 import { shallow } from 'enzyme';
 import { InstructionView } from '../instruction-view';
-import { EuiTitle } from '@elastic/eui';
 import React from 'react';
 import { ExternalLinkButton } from '../../../utils/display-utils';
 
@@ -27,8 +26,6 @@ describe('Instruction view', () => {
       },
     };
     const component = shallow(<InstructionView config={config as any} />);
-
-    expect(component.find(EuiTitle).find('h1').text()).toBe('Authentication and authorization');
     expect(component.find(ExternalLinkButton).prop('text')).toBe('Create config.yml');
   });
 });
diff --git a/public/apps/configuration/panels/get-started.tsx b/public/apps/configuration/panels/get-started.tsx
index 4918bc165..d1a1fa722 100644
--- a/public/apps/configuration/panels/get-started.tsx
+++ b/public/apps/configuration/panels/get-started.tsx
@@ -39,6 +39,7 @@ import { createSuccessToast, createUnknownErrorToast, useToastState } from '../u
 import { SecurityPluginTopNavMenu } from '../top-nav-menu';
 import { DataSourceContext } from '../app-router';
 import { getClusterInfo } from '../../../utils/datasource-utils';
+import { PageHeader } from '../header/header-components';
 
 const addBackendStep = {
   title: 'Add backends',
@@ -173,6 +174,17 @@ export function GetStarted(props: AppDependencies) {
   }
   const [toasts, addToast, removeToast] = useToastState();
 
+  const buttonData = [
+    {
+      label: 'Open in new window',
+      isLoading: false,
+      href: buildHashUrl(),
+      iconType: 'popout',
+      iconSide: 'right',
+      type: 'button',
+      target: '_blank',
+    },
+  ];
   return (
     <>
       <div className="panel-restrict-width">
@@ -182,13 +194,20 @@ export function GetStarted(props: AppDependencies) {
           setDataSource={setDataSource}
           selectedDataSource={dataSource}
         />
-        <EuiPageHeader>
-          <EuiTitle size="l">
-            <h1>Get started</h1>
-          </EuiTitle>
-          <ExternalLinkButton text="Open in new window" href={buildHashUrl()} />
-        </EuiPageHeader>
-
+        <PageHeader
+          navigation={props.depsStart.navigation}
+          coreStart={props.coreStart}
+          appRightControls={buttonData}
+          fallBackComponent={
+            <EuiPageHeader>
+              <EuiTitle size="l">
+                <h1>Get started</h1>
+              </EuiTitle>
+              <ExternalLinkButton text="Open in new window" href={buildHashUrl()} />
+            </EuiPageHeader>
+          }
+          resourceType={'getStarted'}
+        />
         <EuiPanel paddingSize="l">
           <EuiText size="s" color="subdued">
             <p>
diff --git a/public/apps/configuration/panels/internal-user-edit/internal-user-edit.tsx b/public/apps/configuration/panels/internal-user-edit/internal-user-edit.tsx
index 5b122f384..6546978c3 100644
--- a/public/apps/configuration/panels/internal-user-edit/internal-user-edit.tsx
+++ b/public/apps/configuration/panels/internal-user-edit/internal-user-edit.tsx
@@ -49,6 +49,7 @@ import { constructErrorMessageAndLog } from '../../../error-utils';
 import { BackendRolePanel } from './backend-role-panel';
 import { DataSourceContext } from '../../app-router';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
+import { PageHeader } from '../../header/header-components';
 
 interface InternalUserEditDeps extends BreadcrumbsPageDependencies {
   action: 'create' | 'edit' | 'duplicate';
@@ -147,6 +148,18 @@ export function InternalUserEdit(props: InternalUserEditDeps) {
     }
   };
 
+  const descriptionData = [
+    {
+      renderComponent: (
+        <EuiText size="xs" color="subdued">
+          The security plugin includes an internal user database. Use this database in place of, or
+          in addition to, an external <br /> authentication system such as LDAP or Active Directory.{' '}
+          <ExternalLink href={DocLinks.UsersAndRolesDoc} />
+        </EuiText>
+      ),
+    },
+  ];
+
   return (
     <>
       <SecurityPluginTopNavMenu
@@ -155,24 +168,34 @@ export function InternalUserEdit(props: InternalUserEditDeps) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      {props.buildBreadcrumbs(TITLE_TEXT_DICT[props.action])}
-      <EuiSpacer />
-      <EuiPageHeader>
-        <EuiFlexGroup direction="column" gutterSize="xs">
-          <EuiFlexItem>
-            <EuiTitle size="l">
-              <h1>{TITLE_TEXT_DICT[props.action]}</h1>
-            </EuiTitle>
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiText size="xs" color="subdued">
-              The security plugin includes an internal user database. Use this database in place of,
-              or in addition to, an external authentication system such as LDAP or Active Directory.{' '}
-              <ExternalLink href={DocLinks.UsersAndRolesDoc} />
-            </EuiText>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiPageHeader>
+      <PageHeader
+        navigation={props.depsStart.navigation}
+        coreStart={props.coreStart}
+        descriptionControls={descriptionData}
+        fallBackComponent={
+          <>
+            <EuiSpacer />
+            <EuiPageHeader>
+              <EuiFlexGroup direction="column" gutterSize="xs">
+                <EuiFlexItem>
+                  <EuiTitle size="l">
+                    <h1>{TITLE_TEXT_DICT[props.action]}</h1>
+                  </EuiTitle>
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <EuiText size="xs" color="subdued">
+                    The security plugin includes an internal user database. Use this database in
+                    place of, or in addition to, an external authentication system such as LDAP or
+                    Active Directory. <ExternalLink href={DocLinks.UsersAndRolesDoc} />
+                  </EuiText>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiPageHeader>
+          </>
+        }
+        resourceType={ResourceType.users}
+        subAction={TITLE_TEXT_DICT[props.action]}
+      />
       <PanelWithHeader headerText="Credentials">
         <EuiForm>
           <NameRow
diff --git a/public/apps/configuration/panels/internal-user-edit/test/internal-user-edit.test.tsx b/public/apps/configuration/panels/internal-user-edit/test/internal-user-edit.test.tsx
index 241f4e14f..dc734e456 100644
--- a/public/apps/configuration/panels/internal-user-edit/test/internal-user-edit.test.tsx
+++ b/public/apps/configuration/panels/internal-user-edit/test/internal-user-edit.test.tsx
@@ -54,7 +54,6 @@ describe('Internal user edit', () => {
       <InternalUserEdit
         action={action}
         sourceUserName={sampleUsername}
-        buildBreadcrumbs={buildBreadcrumbs}
         coreStart={mockCoreStart as any}
         depsStart={{} as any}
         params={{} as any}
@@ -62,7 +61,6 @@ describe('Internal user edit', () => {
       />
     );
 
-    expect(buildBreadcrumbs).toBeCalledTimes(1);
     expect(component.find(AttributePanel).length).toBe(1);
   });
 
diff --git a/public/apps/configuration/panels/permission-list/permission-list.tsx b/public/apps/configuration/panels/permission-list/permission-list.tsx
index 17116dd3e..7981abb24 100644
--- a/public/apps/configuration/panels/permission-list/permission-list.tsx
+++ b/public/apps/configuration/panels/permission-list/permission-list.tsx
@@ -65,6 +65,8 @@ import { DocLinks } from '../../constants';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
 import { DataSourceContext } from '../../app-router';
 import { AccessErrorComponent } from '../../access-error-component';
+import { PageHeader } from '../../header/header-components';
+import { ResourceType } from '../../../../../common';
 
 export function renderBooleanToCheckMark(value: boolean): React.ReactNode {
   return value ? <EuiIcon type="check" /> : '';
@@ -353,12 +355,41 @@ export function PermissionList(props: AppDependencies) {
     </EuiSmallButtonEmpty>,
   ];
 
+  const useUpdatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
+
   const [createActionGroupMenu] = useContextMenuState(
     'Create action group',
     { fill: true },
-    createActionGroupMenuItems
+    createActionGroupMenuItems,
+    useUpdatedUX
   );
 
+  const buttonData = [
+    {
+      isLoading: loading,
+      renderComponent: <EuiFlexItem>{createActionGroupMenu}</EuiFlexItem>,
+    },
+  ];
+
+  const descriptionData = [
+    {
+      isLoading: loading,
+      renderComponent: (
+        <EuiText size="xs" color="subdued">
+          Permissions are individual actions, such as cluster:admin/snapshot/restore, which lets you
+          restore snapshots. Action groups <br />
+          are reusable collections of permissions, such as MANAGE_SNAPSHOTS, which lets you view,
+          take, delete, and restore <br />
+          snapshots. You can often meet your security needs using the default action groups, but you
+          might find it convenient to create <br />
+          your own. <ExternalLink href={DocLinks.PermissionsDoc} />
+        </EuiText>
+      ),
+    },
+  ];
+
+  const permissionLen = Query.execute(query || '', permissionList).length;
+
   return (
     <>
       <SecurityPluginTopNavMenu
@@ -367,44 +398,56 @@ export function PermissionList(props: AppDependencies) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      <EuiPageHeader>
-        <EuiTitle size="l">
-          <h1>Permissions</h1>
-        </EuiTitle>
-      </EuiPageHeader>
+      <PageHeader
+        navigation={props.depsStart.navigation}
+        coreStart={props.coreStart}
+        descriptionControls={descriptionData}
+        appRightControls={buttonData}
+        fallBackComponent={
+          <EuiPageHeader>
+            <EuiTitle size="l">
+              <h1>Permissions</h1>
+            </EuiTitle>
+          </EuiPageHeader>
+        }
+        resourceType={ResourceType.permissions}
+        count={permissionList.length}
+      />
       {loading ? (
         <EuiLoadingContent />
       ) : accessErrorFlag ? (
         <AccessErrorComponent loading={loading} dataSourceLabel={dataSource && dataSource.label} />
       ) : (
         <EuiPageContent>
-          <EuiPageContentHeader>
-            <EuiPageContentHeaderSection>
-              <EuiTitle size="s">
-                <h3>
-                  Permissions
-                  <span className="panel-header-count">
-                    {' '}
-                    ({Query.execute(query || '', permissionList).length})
-                  </span>
-                </h3>
-              </EuiTitle>
-              <EuiText size="xs" color="subdued">
-                Permissions are individual actions, such as cluster:admin/snapshot/restore, which
-                lets you restore snapshots. Action groups are reusable collections of permissions,
-                such as MANAGE_SNAPSHOTS, which lets you view, take, delete, and restore snapshots.
-                You can often meet your security needs using the default action groups, but you
-                might find it convenient to create your own.{' '}
-                <ExternalLink href={DocLinks.PermissionsDoc} />
-              </EuiText>
-            </EuiPageContentHeaderSection>
-            <EuiPageContentHeaderSection>
-              <EuiFlexGroup>
-                <EuiFlexItem>{actionsMenu}</EuiFlexItem>
-                <EuiFlexItem>{createActionGroupMenu}</EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiPageContentHeaderSection>
-          </EuiPageContentHeader>
+          {useUpdatedUX ? null : (
+            <EuiPageContentHeader>
+              <EuiPageContentHeaderSection>
+                <EuiTitle size="s">
+                  <h3>
+                    Permissions
+                    <span className="panel-header-count">
+                      {' '}
+                      ({Query.execute(query || '', permissionList).length})
+                    </span>
+                  </h3>
+                </EuiTitle>
+                <EuiText size="xs" color="subdued">
+                  Permissions are individual actions, such as cluster:admin/snapshot/restore, which
+                  lets you restore snapshots. Action groups are reusable collections of permissions,
+                  such as MANAGE_SNAPSHOTS, which lets you view, take, delete, and restore
+                  snapshots. You can often meet your security needs using the default action groups,
+                  but you might find it convenient to create your own.{' '}
+                  <ExternalLink href={DocLinks.PermissionsDoc} />
+                </EuiText>
+              </EuiPageContentHeaderSection>
+              <EuiPageContentHeaderSection>
+                <EuiFlexGroup>
+                  <EuiFlexItem>{actionsMenu}</EuiFlexItem>
+                  <EuiFlexItem>{createActionGroupMenu}</EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiPageContentHeaderSection>
+            </EuiPageContentHeader>
+          )}
           <EuiPageBody>
             <EuiInMemoryTable
               tableLayout={'auto'}
@@ -423,6 +466,7 @@ export function PermissionList(props: AppDependencies) {
                   setQuery(arg.query);
                   return true;
                 },
+                toolsRight: useUpdatedUX ? [<EuiFlexItem>{actionsMenu}</EuiFlexItem>] : undefined,
               }}
               selection={{ onSelectionChange: setSelection }}
               sorting={{ sort: { field: 'type', direction: 'asc' } }}
diff --git a/public/apps/configuration/panels/permission-list/test/__snapshots__/permission-list.test.tsx.snap b/public/apps/configuration/panels/permission-list/test/__snapshots__/permission-list.test.tsx.snap
index 4b86b4973..2dc58bac1 100644
--- a/public/apps/configuration/panels/permission-list/test/__snapshots__/permission-list.test.tsx.snap
+++ b/public/apps/configuration/panels/permission-list/test/__snapshots__/permission-list.test.tsx.snap
@@ -7,6 +7,49 @@ exports[`Permission list page  AccessError component should load access error co
     coreStart={
       Object {
         "http": 1,
+        "uiSettings": Object {
+          "get": [MockFunction] {
+            "calls": Array [
+              Array [
+                "home:useNewHomePage",
+              ],
+              Array [
+                "home:useNewHomePage",
+              ],
+              Array [
+                "home:useNewHomePage",
+              ],
+              Array [
+                "home:useNewHomePage",
+              ],
+              Array [
+                "home:useNewHomePage",
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": false,
+              },
+              Object {
+                "type": "return",
+                "value": false,
+              },
+              Object {
+                "type": "return",
+                "value": false,
+              },
+              Object {
+                "type": "return",
+                "value": false,
+              },
+              Object {
+                "type": "return",
+                "value": false,
+              },
+            ],
+          },
+        },
       }
     }
     dataSourcePickerReadOnly={false}
@@ -19,15 +62,112 @@ exports[`Permission list page  AccessError component should load access error co
     }
     setDataSource={[MockFunction]}
   />
-  <EuiPageHeader>
-    <EuiTitle
-      size="l"
-    >
-      <h1>
-        Permissions
-      </h1>
-    </EuiTitle>
-  </EuiPageHeader>
+  <PageHeader
+    appRightControls={
+      Array [
+        Object {
+          "isLoading": false,
+          "renderComponent": <EuiFlexItem>
+            <EuiSmallButtonEmpty
+              onClick={[Function]}
+            >
+              Create from blank
+            </EuiSmallButtonEmpty>
+            <EuiSmallButtonEmpty
+              disabled={false}
+              id="create-from-selection"
+              onClick={[Function]}
+            >
+              Create from selection
+            </EuiSmallButtonEmpty>
+          </EuiFlexItem>,
+        },
+      ]
+    }
+    coreStart={
+      Object {
+        "http": 1,
+        "uiSettings": Object {
+          "get": [MockFunction] {
+            "calls": Array [
+              Array [
+                "home:useNewHomePage",
+              ],
+              Array [
+                "home:useNewHomePage",
+              ],
+              Array [
+                "home:useNewHomePage",
+              ],
+              Array [
+                "home:useNewHomePage",
+              ],
+              Array [
+                "home:useNewHomePage",
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": false,
+              },
+              Object {
+                "type": "return",
+                "value": false,
+              },
+              Object {
+                "type": "return",
+                "value": false,
+              },
+              Object {
+                "type": "return",
+                "value": false,
+              },
+              Object {
+                "type": "return",
+                "value": false,
+              },
+            ],
+          },
+        },
+      }
+    }
+    count={0}
+    descriptionControls={
+      Array [
+        Object {
+          "isLoading": false,
+          "renderComponent": <EuiText
+            color="subdued"
+            size="xs"
+          >
+            Permissions are individual actions, such as cluster:admin/snapshot/restore, which lets you restore snapshots. Action groups 
+            <br />
+            are reusable collections of permissions, such as MANAGE_SNAPSHOTS, which lets you view, take, delete, and restore 
+            <br />
+            snapshots. You can often meet your security needs using the default action groups, but you might find it convenient to create 
+            <br />
+            your own. 
+            <ExternalLink
+              href="https://opensearch.org/docs/latest/security-plugin/access-control/default-action-groups/"
+            />
+          </EuiText>,
+        },
+      ]
+    }
+    fallBackComponent={
+      <EuiPageHeader>
+        <EuiTitle
+          size="l"
+        >
+          <h1>
+            Permissions
+          </h1>
+        </EuiTitle>
+      </EuiPageHeader>
+    }
+    resourceType="permissions"
+  />
   <AccessErrorComponent
     loading={false}
   />
diff --git a/public/apps/configuration/panels/permission-list/test/permission-list.test.tsx b/public/apps/configuration/panels/permission-list/test/permission-list.test.tsx
index daa6a86fe..cb26109e9 100644
--- a/public/apps/configuration/panels/permission-list/test/permission-list.test.tsx
+++ b/public/apps/configuration/panels/permission-list/test/permission-list.test.tsx
@@ -100,12 +100,15 @@ describe('Permission list page ', () => {
 
   describe('PermissionList', () => {
     const mockCoreStart = {
+      uiSettings: {
+        get: jest.fn().mockReturnValue(false),
+      },
       http: 1,
     };
     it('render empty', () => {
       const component = shallow(
         <PermissionList
-          coreStart={{} as any}
+          coreStart={mockCoreStart as any}
           depsStart={{} as any}
           params={{} as any}
           config={{} as any}
@@ -141,7 +144,7 @@ describe('Permission list page ', () => {
       jest.spyOn(console, 'log').mockImplementationOnce(() => {});
       shallow(
         <PermissionList
-          coreStart={{} as any}
+          coreStart={mockCoreStart as any}
           depsStart={{} as any}
           params={{} as any}
           config={{} as any}
@@ -182,7 +185,7 @@ describe('Permission list page ', () => {
       });
       const component = shallow(
         <PermissionList
-          coreStart={{} as any}
+          coreStart={mockCoreStart as any}
           depsStart={{} as any}
           params={{} as any}
           config={{} as any}
@@ -219,7 +222,7 @@ describe('Permission list page ', () => {
       jest.spyOn(React, 'useState').mockImplementation(() => [[sampleActionGroup], jest.fn()]);
       const component = shallow(
         <PermissionList
-          coreStart={{} as any}
+          coreStart={mockCoreStart as any}
           depsStart={{} as any}
           params={{} as any}
           config={{} as any}
@@ -234,6 +237,9 @@ describe('Permission list page ', () => {
   describe('AccessError component', () => {
     const mockCoreStart = {
       http: 1,
+      uiSettings: {
+        get: jest.fn().mockReturnValue(false),
+      },
     };
     let component;
     beforeEach(() => {
diff --git a/public/apps/configuration/panels/role-edit/role-edit.tsx b/public/apps/configuration/panels/role-edit/role-edit.tsx
index e025cda07..6006600fc 100644
--- a/public/apps/configuration/panels/role-edit/role-edit.tsx
+++ b/public/apps/configuration/panels/role-edit/role-edit.tsx
@@ -59,6 +59,7 @@ import { generateResourceName } from '../../utils/resource-utils';
 import { NameRow } from '../../utils/name-row';
 import { DataSourceContext } from '../../app-router';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
+import { PageHeader } from '../../header/header-components';
 
 interface RoleEditDeps extends BreadcrumbsPageDependencies {
   action: 'create' | 'edit' | 'duplicate';
@@ -233,6 +234,21 @@ export function RoleEdit(props: RoleEditDeps) {
 
   const tenantOptions = tenantNames.map(stringToComboBoxOption);
 
+  const descriptionData = [
+    {
+      renderComponent: (
+        <EuiText size="xs" color="subdued">
+          Roles are the core way of controlling access to your cluster. Roles contain any
+          combination of cluster-wide permission, index-
+          <br />
+          specific permissions, document- and field-level security, and tenants. Then you map users
+          to these roles so that users <br />
+          gain those permissions. <ExternalLink href={DocLinks.UsersAndRolesDoc} />
+        </EuiText>
+      ),
+    },
+  ];
+
   return (
     <>
       <SecurityPluginTopNavMenu
@@ -241,19 +257,30 @@ export function RoleEdit(props: RoleEditDeps) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      {props.buildBreadcrumbs(TITLE_TEXT_DICT[props.action])}
-      <EuiPageHeader>
-        <EuiText size="xs" color="subdued" className="panel-header-subtext">
-          <EuiTitle size="m">
-            <h1>{TITLE_TEXT_DICT[props.action]}</h1>
-          </EuiTitle>
-          Roles are the core way of controlling access to your cluster. Roles contain any
-          combination of cluster-wide permission, index-specific permissions, document- and
-          field-level security, and tenants. Once you&apos;ve created the role, you can map users to
-          the roles so that users gain those permissions.{' '}
-          <ExternalLink href={DocLinks.UsersAndRolesDoc} />
-        </EuiText>
-      </EuiPageHeader>
+      <PageHeader
+        fallBackComponent={
+          <>
+            {' '}
+            <EuiPageHeader>
+              <EuiText size="xs" color="subdued" className="panel-header-subtext">
+                <EuiTitle size="m">
+                  <h1>{TITLE_TEXT_DICT[props.action]}</h1>
+                </EuiTitle>
+                Roles are the core way of controlling access to your cluster. Roles contain any
+                combination of cluster-wide permission, index-specific permissions, document- and
+                field-level security, and tenants. Once you&apos;ve created the role, you can map
+                users to the roles so that users gain those permissions.{' '}
+                <ExternalLink href={DocLinks.UsersAndRolesDoc} />
+              </EuiText>
+            </EuiPageHeader>
+          </>
+        }
+        navigation={props.depsStart.navigation}
+        coreStart={props.coreStart}
+        descriptionControls={descriptionData}
+        resourceType={ResourceType.roles}
+        subAction={TITLE_TEXT_DICT[props.action]}
+      />
       <PanelWithHeader headerText="Name">
         <EuiForm>
           <NameRow
diff --git a/public/apps/configuration/panels/role-edit/test/role-edit-filtering.test.tsx b/public/apps/configuration/panels/role-edit/test/role-edit-filtering.test.tsx
index 36d67fdc9..fcd83ecf7 100644
--- a/public/apps/configuration/panels/role-edit/test/role-edit-filtering.test.tsx
+++ b/public/apps/configuration/panels/role-edit/test/role-edit-filtering.test.tsx
@@ -53,6 +53,15 @@ describe('Role edit filtering', () => {
   const sampleSourceRole = 'role';
   const mockCoreStart = {
     http: 1,
+    uiSettings: {
+      get: jest.fn().mockReturnValue(false),
+    },
+    chrome: {
+      navGroup: {
+        getNavGroupEnabled: jest.fn().mockReturnValue(false),
+      },
+      setBreadcrumbs: jest.fn(),
+    },
   };
 
   (fetchActionGroups as jest.Mock).mockResolvedValue({
@@ -100,7 +109,7 @@ describe('Role edit filtering', () => {
         sourceRoleName={sampleSourceRole}
         buildBreadcrumbs={buildBreadcrumbs}
         coreStart={mockCoreStart as any}
-        depsStart={{} as any}
+        depsStart={{ navigation: { ui: {} } } as any}
         params={{} as any}
         config={{} as any}
       />
@@ -156,7 +165,7 @@ describe('Role edit filtering', () => {
         sourceRoleName={sampleSourceRole}
         buildBreadcrumbs={buildBreadcrumbs}
         coreStart={mockCoreStart as any}
-        depsStart={{} as any}
+        depsStart={{ navigation: { ui: {} } } as any}
         params={{} as any}
         config={{} as any}
       />
diff --git a/public/apps/configuration/panels/role-edit/test/role-edit.test.tsx b/public/apps/configuration/panels/role-edit/test/role-edit.test.tsx
index d5051809e..fca458cb6 100644
--- a/public/apps/configuration/panels/role-edit/test/role-edit.test.tsx
+++ b/public/apps/configuration/panels/role-edit/test/role-edit.test.tsx
@@ -47,6 +47,9 @@ describe('Role edit', () => {
   const sampleSourceRole = 'role';
   const mockCoreStart = {
     http: 1,
+    uiSettings: {
+      get: jest.fn().mockReturnValue(false),
+    },
   };
 
   const useEffect = jest.spyOn(React, 'useEffect');
@@ -55,13 +58,11 @@ describe('Role edit', () => {
 
   it('basic rendering', () => {
     const action = 'create';
-    const buildBreadcrumbs = jest.fn();
 
     const component = shallow(
       <RoleEdit
         action={action}
         sourceRoleName={sampleSourceRole}
-        buildBreadcrumbs={buildBreadcrumbs}
         coreStart={mockCoreStart as any}
         depsStart={{} as any}
         params={{} as any}
@@ -69,7 +70,6 @@ describe('Role edit', () => {
       />
     );
 
-    expect(buildBreadcrumbs).toBeCalledTimes(1);
     expect(component.find(ClusterPermissionPanel).length).toBe(1);
     expect(component.find(IndexPermissionPanel).length).toBe(1);
     expect(component.find(TenantPanel).length).toBe(1);
@@ -81,13 +81,11 @@ describe('Role edit', () => {
     useEffect.mockImplementationOnce((f) => f());
     useState.mockImplementation((initialValue) => [initialValue, jest.fn()]);
     const action = 'edit';
-    const buildBreadcrumbs = jest.fn();
 
     const component = shallow(
       <RoleEdit
         action={action}
         sourceRoleName={sampleSourceRole}
-        buildBreadcrumbs={buildBreadcrumbs}
         coreStart={mockCoreStart as any}
         depsStart={{} as any}
         params={{} as any}
diff --git a/public/apps/configuration/panels/role-list.tsx b/public/apps/configuration/panels/role-list.tsx
index 7ad822daa..d495ea53e 100644
--- a/public/apps/configuration/panels/role-list.tsx
+++ b/public/apps/configuration/panels/role-list.tsx
@@ -58,6 +58,7 @@ import { DocLinks } from '../constants';
 import { DataSourceContext } from '../app-router';
 import { SecurityPluginTopNavMenu } from '../top-nav-menu';
 import { AccessErrorComponent } from '../access-error-component';
+import { PageHeader } from '../header/header-components';
 
 const columns: Array<EuiBasicTableColumn<RoleListing>> = [
   {
@@ -198,6 +199,7 @@ export function RoleList(props: AppDependencies) {
 
   const [searchOptions, setSearchOptions] = useState<EuiSearchBarProps>({});
   const [query, setQuery] = useState<Query | null>(null);
+
   useEffect(() => {
     setSearchOptions({
       onChange: (arg) => {
@@ -260,6 +262,37 @@ export function RoleList(props: AppDependencies) {
     });
   }, [roleData]);
 
+  const useUpdatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
+  const buttonData = [
+    {
+      label: 'Create role',
+      isLoading: false,
+      href: buildHashUrl(ResourceType.roles, Action.create),
+      fill: true,
+      iconType: 'plus',
+      iconSide: 'left',
+      type: 'button',
+      testId: 'create-role',
+    },
+  ];
+  const descriptionData = [
+    {
+      isLoading: loading,
+      renderComponent: (
+        <EuiText size="xs" color="subdued">
+          Roles are the core way of controlling access to your cluster. Roles contain any
+          combination of cluster-wide permission, index-
+          <br />
+          specific permissions, document- and field-level security, and tenants. Then you map users
+          to these roles so that users <br />
+          gain those permissions. <ExternalLink href={DocLinks.UsersAndRolesDoc} />
+        </EuiText>
+      ),
+    },
+  ];
+
+  const roleLen = Query.execute(query || '', roleData).length;
+
   return (
     <>
       <SecurityPluginTopNavMenu
@@ -268,50 +301,59 @@ export function RoleList(props: AppDependencies) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      <EuiPageHeader>
-        <EuiTitle size="l">
-          <h1>Roles</h1>
-        </EuiTitle>
-      </EuiPageHeader>
+      <PageHeader
+        navigation={props.depsStart.navigation}
+        coreStart={props.coreStart}
+        descriptionControls={descriptionData}
+        appRightControls={buttonData}
+        fallBackComponent={
+          <EuiPageHeader>
+            <EuiTitle size="l">
+              <h1>Roles</h1>
+            </EuiTitle>
+          </EuiPageHeader>
+        }
+        resourceType={ResourceType.roles}
+        count={roleData.length}
+      />
       {loading ? (
         <EuiLoadingContent />
       ) : accessErrorFlag ? (
         <AccessErrorComponent loading={loading} dataSourceLabel={dataSource && dataSource.label} />
       ) : (
         <EuiPageContent>
-          <EuiPageContentHeader id="role-table-container">
-            <EuiPageContentHeaderSection>
-              <EuiTitle size="s">
-                <h3>
-                  Roles
-                  <span className="panel-header-count">
-                    {' '}
-                    ({Query.execute(query || '', roleData).length})
-                  </span>
-                </h3>
-              </EuiTitle>
-              <EuiText size="xs" color="subdued">
-                Roles are the core way of controlling access to your cluster. Roles contain any
-                combination of cluster-wide permission, index-specific permissions, document- and
-                field-level security, and tenants. Then you map users to these roles so that users
-                gain those permissions. <ExternalLink href={DocLinks.UsersAndRolesDoc} />
-              </EuiText>
-            </EuiPageContentHeaderSection>
-            <EuiPageContentHeaderSection>
-              <EuiFlexGroup>
-                <EuiFlexItem>{actionsMenu}</EuiFlexItem>
-                <EuiFlexItem>
-                  <EuiSmallButton
-                    fill
-                    href={buildHashUrl(ResourceType.roles, Action.create)}
-                    data-test-subj="create-role"
-                  >
-                    Create role
-                  </EuiSmallButton>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiPageContentHeaderSection>
-          </EuiPageContentHeader>
+          {useUpdatedUX ? null : (
+            <EuiPageContentHeader id="role-table-container">
+              <EuiPageContentHeaderSection>
+                <EuiTitle size="s">
+                  <h3>
+                    Roles
+                    <span className="panel-header-count"> ({roleLen})</span>
+                  </h3>
+                </EuiTitle>
+                <EuiText size="xs" color="subdued">
+                  Roles are the core way of controlling access to your cluster. Roles contain any
+                  combination of cluster-wide permission, index-specific permissions, document- and
+                  field-level security, and tenants. Then you map users to these roles so that users
+                  gain those permissions. <ExternalLink href={DocLinks.UsersAndRolesDoc} />
+                </EuiText>
+              </EuiPageContentHeaderSection>
+              <EuiPageContentHeaderSection>
+                <EuiFlexGroup>
+                  <EuiFlexItem>{actionsMenu}</EuiFlexItem>
+                  <EuiFlexItem>
+                    <EuiSmallButton
+                      fill
+                      href={buildHashUrl(ResourceType.roles, Action.create)}
+                      data-test-subj="create-role"
+                    >
+                      Create role
+                    </EuiSmallButton>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiPageContentHeaderSection>
+            </EuiPageContentHeader>
+          )}
           <EuiPageBody>
             <EuiInMemoryTable
               data-test-subj="role-list"
@@ -323,7 +365,10 @@ export function RoleList(props: AppDependencies) {
               pagination={true}
               selection={{ onSelectionChange: setSelection }}
               sorting={true}
-              search={searchOptions}
+              search={{
+                ...searchOptions,
+                toolsRight: useUpdatedUX ? [<EuiFlexItem>{actionsMenu}</EuiFlexItem>] : undefined,
+              }}
               error={errorFlag ? 'Load data failed, please check console log for more detail.' : ''}
               message={showTableStatusMessage(loading, roleData)}
             />
diff --git a/public/apps/configuration/panels/role-mapping/role-edit-mapped-user.tsx b/public/apps/configuration/panels/role-mapping/role-edit-mapped-user.tsx
index d52ce8953..2e71a5535 100644
--- a/public/apps/configuration/panels/role-mapping/role-edit-mapped-user.tsx
+++ b/public/apps/configuration/panels/role-mapping/role-edit-mapped-user.tsx
@@ -46,6 +46,7 @@ import { ExternalLink } from '../../utils/display-utils';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
 import { DataSourceContext } from '../../app-router';
 import { getClusterInfo } from '../../../../utils/datasource-utils';
+import { PageHeader } from '../../header/header-components';
 
 interface RoleEditMappedUserProps extends BreadcrumbsPageDependencies {
   roleName: string;
@@ -55,6 +56,17 @@ const TITLE_TEXT_DICT = {
   mapuser: 'Map user',
 };
 
+const descriptionData = [
+  {
+    renderComponent: (
+      <EuiText size="xs" color="subdued">
+        Map users to this role to inherit role permissions. Two types of users are supported: user,
+        and backend role. <ExternalLink href={DocLinks.MapUsersToRolesDoc} />
+      </EuiText>
+    ),
+  },
+];
+
 export function RoleEditMappedUser(props: RoleEditMappedUserProps) {
   const [internalUsers, setInternalUsers] = React.useState<ComboBoxOptions>([]);
   const [externalIdentities, setExternalIdentities] = React.useState<ExternalIdentityStateClass[]>(
@@ -152,16 +164,25 @@ export function RoleEditMappedUser(props: RoleEditMappedUserProps) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      {props.buildBreadcrumbs(props.roleName, TITLE_TEXT_DICT[SubAction.mapuser])}
-      <EuiPageHeader>
-        <EuiText size="xs" color="subdued">
-          <EuiTitle size="m">
-            <h1>Map user</h1>
-          </EuiTitle>
-          Map users to this role to inherit role permissions. Two types of users are supported:
-          user, and backend role. <ExternalLink href={DocLinks.MapUsersToRolesDoc} />
-        </EuiText>
-      </EuiPageHeader>
+      <PageHeader
+        navigation={props.depsStart.navigation}
+        coreStart={props.coreStart}
+        fallBackComponent={
+          <EuiPageHeader>
+            <EuiText size="xs" color="subdued">
+              <EuiTitle size="m">
+                <h1>Map user</h1>
+              </EuiTitle>
+              Map users to this role to inherit role permissions. Two types of users are supported:
+              user, and backend role. <ExternalLink href={DocLinks.MapUsersToRolesDoc} />
+            </EuiText>
+          </EuiPageHeader>
+        }
+        resourceType={ResourceType.roles}
+        subAction={TITLE_TEXT_DICT[SubAction.mapuser]}
+        pageTitle={props.roleName}
+        descriptionControls={descriptionData}
+      />
       <EuiSpacer size="m" />
       <InternalUsersPanel
         state={internalUsers}
diff --git a/public/apps/configuration/panels/role-mapping/test/role-edit-mapped-user.test.tsx b/public/apps/configuration/panels/role-mapping/test/role-edit-mapped-user.test.tsx
index 44d4d0a2f..d934dbd05 100644
--- a/public/apps/configuration/panels/role-mapping/test/role-edit-mapped-user.test.tsx
+++ b/public/apps/configuration/panels/role-mapping/test/role-edit-mapped-user.test.tsx
@@ -39,7 +39,6 @@ describe('Role mapping edit', () => {
   const mockCoreStart = {
     http: 1,
   };
-  const buildBreadcrumbs = jest.fn();
 
   const useEffect = jest.spyOn(React, 'useEffect');
   const useState = jest.spyOn(React, 'useState');
@@ -54,7 +53,6 @@ describe('Role mapping edit', () => {
     const component = shallow(
       <RoleEditMappedUser
         roleName={sampleRole}
-        buildBreadcrumbs={buildBreadcrumbs}
         coreStart={mockCoreStart as any}
         depsStart={{} as any}
         params={{} as any}
@@ -62,7 +60,6 @@ describe('Role mapping edit', () => {
       />
     );
 
-    expect(buildBreadcrumbs).toBeCalledTimes(1);
     expect(component.find(InternalUsersPanel).length).toBe(1);
     expect(component.find(ExternalIdentitiesPanel).length).toBe(1);
   });
@@ -79,7 +76,6 @@ describe('Role mapping edit', () => {
     shallow(
       <RoleEditMappedUser
         roleName={sampleRole}
-        buildBreadcrumbs={buildBreadcrumbs}
         coreStart={mockCoreStart as any}
         depsStart={{} as any}
         params={{} as any}
@@ -100,7 +96,6 @@ describe('Role mapping edit', () => {
     const component = shallow(
       <RoleEditMappedUser
         roleName={sampleRole}
-        buildBreadcrumbs={buildBreadcrumbs}
         coreStart={mockCoreStart as any}
         depsStart={{} as any}
         params={{} as any}
@@ -133,7 +128,6 @@ describe('Role mapping edit', () => {
     const component = shallow(
       <RoleEditMappedUser
         roleName={sampleRole}
-        buildBreadcrumbs={buildBreadcrumbs}
         coreStart={mockCoreStart as any}
         depsStart={{} as any}
         params={{} as any}
diff --git a/public/apps/configuration/panels/role-view/role-view.tsx b/public/apps/configuration/panels/role-view/role-view.tsx
index 7e41f27cf..1c04351c2 100644
--- a/public/apps/configuration/panels/role-view/role-view.tsx
+++ b/public/apps/configuration/panels/role-view/role-view.tsx
@@ -72,6 +72,7 @@ import { setCrossPageToast } from '../../utils/storage-utils';
 import { DataSourceContext } from '../../app-router';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
 import { getClusterInfo } from '../../../../utils/datasource-utils';
+import { PageHeader } from '../../header/header-components';
 
 interface RoleViewProps extends BreadcrumbsPageDependencies {
   roleName: string;
@@ -378,6 +379,7 @@ export function RoleView(props: RoleViewProps) {
     </EuiSmallButtonEmpty>,
   ];
   const [actionsMenu] = useContextMenuState('Actions', {}, actionsMenuItems);
+  const useUpdatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
 
   if (isReserved) {
     pageActions = <EuiSmallButton href={duplicateRoleLink}>Duplicate role</EuiSmallButton>;
@@ -394,6 +396,54 @@ export function RoleView(props: RoleViewProps) {
     );
   }
 
+  const reservedRoleButtons = [
+    {
+      label: 'Duplicate role',
+      isLoading: false,
+      href: buildHashUrl(ResourceType.roles, Action.edit, props.roleName),
+      type: 'button',
+      fill: true,
+    },
+  ];
+  const roleButtons = [
+    {
+      isLoading: false,
+      run: async () => {
+        try {
+          await requestDeleteRoles(props.coreStart.http, [props.roleName], dataSource.id);
+          setCrossPageToast(buildUrl(ResourceType.roles), {
+            id: 'deleteRole',
+            color: 'success',
+            title: `${props.roleName} deleted ${getClusterInfo(dataSourceEnabled, dataSource)}`,
+          });
+          window.location.href = buildHashUrl(ResourceType.roles);
+        } catch (e) {
+          addToast(createUnknownErrorToast('deleteRole', 'delete role'));
+        }
+      },
+      iconType: 'trash',
+      color: 'danger',
+      type: 'button', // this should be icon, but icons current do not support a border currently
+      testId: 'delete',
+      ariaLabel: 'delete',
+    },
+    {
+      label: 'Duplicate',
+      isLoading: false,
+      href: duplicateRoleLink,
+      type: 'button',
+    },
+    {
+      label: 'Edit role',
+      isLoading: false,
+      href: buildHashUrl(ResourceType.roles, Action.edit, props.roleName),
+      fill: true,
+      type: 'button',
+    },
+  ];
+
+  const roleView = isReserved ? reservedRoleButtons : roleButtons;
+
   return (
     <>
       <SecurityPluginTopNavMenu
@@ -402,18 +452,26 @@ export function RoleView(props: RoleViewProps) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      {props.buildBreadcrumbs(props.roleName)}
-
-      <EuiPageContentHeader>
-        <EuiPageContentHeaderSection>
-          <EuiTitle size="l">
-            <h1>{props.roleName}</h1>
-          </EuiTitle>
-        </EuiPageContentHeaderSection>
-
-        <EuiPageContentHeaderSection>{pageActions}</EuiPageContentHeaderSection>
-      </EuiPageContentHeader>
+      <PageHeader
+        navigation={props.depsStart.navigation}
+        coreStart={props.coreStart}
+        appRightControls={roleView}
+        fallBackComponent={
+          <>
+            <EuiPageContentHeader>
+              <EuiPageContentHeaderSection>
+                <EuiTitle size="l">
+                  <h1>{props.roleName}</h1>
+                </EuiTitle>
+              </EuiPageContentHeaderSection>
 
+              <EuiPageContentHeaderSection>{pageActions}</EuiPageContentHeaderSection>
+            </EuiPageContentHeader>
+          </>
+        }
+        resourceType={ResourceType.roles}
+        subAction={props.roleName}
+      />
       <EuiTabbedContent
         tabs={tabs}
         initialSelectedTab={
diff --git a/public/apps/configuration/panels/role-view/test/__snapshots__/role-view.test.tsx.snap b/public/apps/configuration/panels/role-view/test/__snapshots__/role-view.test.tsx.snap
index ece522815..2f557ebd8 100644
--- a/public/apps/configuration/panels/role-view/test/__snapshots__/role-view.test.tsx.snap
+++ b/public/apps/configuration/panels/role-view/test/__snapshots__/role-view.test.tsx.snap
@@ -3,25 +3,31 @@
 exports[`Role view basic rendering when permission tab is selected 1`] = `
 <Fragment>
   <Memo()
-    buildBreadcrumbs={
-      [MockFunction] {
-        "calls": Array [
-          Array [
-            "role",
-          ],
-        ],
-        "results": Array [
-          Object {
-            "type": "return",
-            "value": undefined,
-          },
-        ],
-      }
-    }
     config={Object {}}
     coreStart={
       Object {
+        "chrome": Object {
+          "navGroup": Object {
+            "getNavGroupEnabled": [MockFunction],
+          },
+          "setBreadcrumbs": [MockFunction],
+        },
         "http": 1,
+        "uiSettings": Object {
+          "get": [MockFunction] {
+            "calls": Array [
+              Array [
+                "home:useNewHomePage",
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": false,
+              },
+            ],
+          },
+        },
       }
     }
     dataSourcePickerReadOnly={true}
@@ -36,46 +42,104 @@ exports[`Role view basic rendering when permission tab is selected 1`] = `
     }
     setDataSource={[MockFunction]}
   />
-  <EuiPageContentHeader>
-    <EuiPageContentHeaderSection>
-      <EuiTitle
-        size="l"
-      >
-        <h1>
-          role
-        </h1>
-      </EuiTitle>
-    </EuiPageContentHeaderSection>
-    <EuiPageContentHeaderSection>
-      <EuiFlexGroup
-        gutterSize="s"
-      >
-        <EuiFlexItem>
-          <EuiSmallButtonEmpty
-            href="#/roles/duplicate/role"
-            key="duplicate"
-          >
-            duplicate
-          </EuiSmallButtonEmpty>
-          <EuiSmallButtonEmpty
-            color="danger"
-            data-test-subj="delete"
-            key="delete"
-            onClick={[Function]}
-          >
-            delete
-          </EuiSmallButtonEmpty>
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiSmallButton
-            href="#/roles/edit/role"
-          >
-            Edit role
-          </EuiSmallButton>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiPageContentHeaderSection>
-  </EuiPageContentHeader>
+  <PageHeader
+    appRightControls={
+      Array [
+        Object {
+          "ariaLabel": "delete",
+          "color": "danger",
+          "iconType": "trash",
+          "isLoading": false,
+          "run": [Function],
+          "testId": "delete",
+          "type": "button",
+        },
+        Object {
+          "href": "#/roles/duplicate/role",
+          "isLoading": false,
+          "label": "Duplicate",
+          "type": "button",
+        },
+        Object {
+          "fill": true,
+          "href": "#/roles/edit/role",
+          "isLoading": false,
+          "label": "Edit role",
+          "type": "button",
+        },
+      ]
+    }
+    coreStart={
+      Object {
+        "chrome": Object {
+          "navGroup": Object {
+            "getNavGroupEnabled": [MockFunction],
+          },
+          "setBreadcrumbs": [MockFunction],
+        },
+        "http": 1,
+        "uiSettings": Object {
+          "get": [MockFunction] {
+            "calls": Array [
+              Array [
+                "home:useNewHomePage",
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": false,
+              },
+            ],
+          },
+        },
+      }
+    }
+    fallBackComponent={
+      <React.Fragment>
+        <EuiPageContentHeader>
+          <EuiPageContentHeaderSection>
+            <EuiTitle
+              size="l"
+            >
+              <h1>
+                role
+              </h1>
+            </EuiTitle>
+          </EuiPageContentHeaderSection>
+          <EuiPageContentHeaderSection>
+            <EuiFlexGroup
+              gutterSize="s"
+            >
+              <EuiFlexItem>
+                <EuiSmallButtonEmpty
+                  href="#/roles/duplicate/role"
+                >
+                  duplicate
+                </EuiSmallButtonEmpty>
+                <EuiSmallButtonEmpty
+                  color="danger"
+                  data-test-subj="delete"
+                  onClick={[Function]}
+                >
+                  delete
+                </EuiSmallButtonEmpty>
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <EuiSmallButton
+                  href="#/roles/edit/role"
+                >
+                  Edit role
+                </EuiSmallButton>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiPageContentHeaderSection>
+        </EuiPageContentHeader>
+      </React.Fragment>
+    }
+    resourceType="roles"
+    subAction="role"
+  />
   <EuiTabbedContent
     autoFocus="initial"
     initialSelectedTab={
@@ -111,7 +175,28 @@ exports[`Role view basic rendering when permission tab is selected 1`] = `
           <TenantsPanel
             coreStart={
               Object {
+                "chrome": Object {
+                  "navGroup": Object {
+                    "getNavGroupEnabled": [MockFunction],
+                  },
+                  "setBreadcrumbs": [MockFunction],
+                },
                 "http": 1,
+                "uiSettings": Object {
+                  "get": [MockFunction] {
+                    "calls": Array [
+                      Array [
+                        "home:useNewHomePage",
+                      ],
+                    ],
+                    "results": Array [
+                      Object {
+                        "type": "return",
+                        "value": false,
+                      },
+                    ],
+                  },
+                },
               }
             }
             dataSourceId="test"
@@ -161,7 +246,28 @@ exports[`Role view basic rendering when permission tab is selected 1`] = `
             <TenantsPanel
               coreStart={
                 Object {
+                  "chrome": Object {
+                    "navGroup": Object {
+                      "getNavGroupEnabled": [MockFunction],
+                    },
+                    "setBreadcrumbs": [MockFunction],
+                  },
                   "http": 1,
+                  "uiSettings": Object {
+                    "get": [MockFunction] {
+                      "calls": Array [
+                        Array [
+                          "home:useNewHomePage",
+                        ],
+                      ],
+                      "results": Array [
+                        Object {
+                          "type": "return",
+                          "value": false,
+                        },
+                      ],
+                    },
+                  },
                 }
               }
               dataSourceId="test"
@@ -330,25 +436,31 @@ exports[`Role view basic rendering when permission tab is selected 1`] = `
 exports[`Role view renders when mapped user tab is selected 1`] = `
 <Fragment>
   <Memo()
-    buildBreadcrumbs={
-      [MockFunction] {
-        "calls": Array [
-          Array [
-            "role",
-          ],
-        ],
-        "results": Array [
-          Object {
-            "type": "return",
-            "value": undefined,
-          },
-        ],
-      }
-    }
     config={Object {}}
     coreStart={
       Object {
+        "chrome": Object {
+          "navGroup": Object {
+            "getNavGroupEnabled": [MockFunction],
+          },
+          "setBreadcrumbs": [MockFunction],
+        },
         "http": 1,
+        "uiSettings": Object {
+          "get": [MockFunction] {
+            "calls": Array [
+              Array [
+                "home:useNewHomePage",
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": false,
+              },
+            ],
+          },
+        },
       }
     }
     dataSourcePickerReadOnly={true}
@@ -363,46 +475,104 @@ exports[`Role view renders when mapped user tab is selected 1`] = `
     }
     setDataSource={[MockFunction]}
   />
-  <EuiPageContentHeader>
-    <EuiPageContentHeaderSection>
-      <EuiTitle
-        size="l"
-      >
-        <h1>
-          role
-        </h1>
-      </EuiTitle>
-    </EuiPageContentHeaderSection>
-    <EuiPageContentHeaderSection>
-      <EuiFlexGroup
-        gutterSize="s"
-      >
-        <EuiFlexItem>
-          <EuiSmallButtonEmpty
-            href="#/roles/duplicate/role"
-            key="duplicate"
-          >
-            duplicate
-          </EuiSmallButtonEmpty>
-          <EuiSmallButtonEmpty
-            color="danger"
-            data-test-subj="delete"
-            key="delete"
-            onClick={[Function]}
-          >
-            delete
-          </EuiSmallButtonEmpty>
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiSmallButton
-            href="#/roles/edit/role"
-          >
-            Edit role
-          </EuiSmallButton>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiPageContentHeaderSection>
-  </EuiPageContentHeader>
+  <PageHeader
+    appRightControls={
+      Array [
+        Object {
+          "ariaLabel": "delete",
+          "color": "danger",
+          "iconType": "trash",
+          "isLoading": false,
+          "run": [Function],
+          "testId": "delete",
+          "type": "button",
+        },
+        Object {
+          "href": "#/roles/duplicate/role",
+          "isLoading": false,
+          "label": "Duplicate",
+          "type": "button",
+        },
+        Object {
+          "fill": true,
+          "href": "#/roles/edit/role",
+          "isLoading": false,
+          "label": "Edit role",
+          "type": "button",
+        },
+      ]
+    }
+    coreStart={
+      Object {
+        "chrome": Object {
+          "navGroup": Object {
+            "getNavGroupEnabled": [MockFunction],
+          },
+          "setBreadcrumbs": [MockFunction],
+        },
+        "http": 1,
+        "uiSettings": Object {
+          "get": [MockFunction] {
+            "calls": Array [
+              Array [
+                "home:useNewHomePage",
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": false,
+              },
+            ],
+          },
+        },
+      }
+    }
+    fallBackComponent={
+      <React.Fragment>
+        <EuiPageContentHeader>
+          <EuiPageContentHeaderSection>
+            <EuiTitle
+              size="l"
+            >
+              <h1>
+                role
+              </h1>
+            </EuiTitle>
+          </EuiPageContentHeaderSection>
+          <EuiPageContentHeaderSection>
+            <EuiFlexGroup
+              gutterSize="s"
+            >
+              <EuiFlexItem>
+                <EuiSmallButtonEmpty
+                  href="#/roles/duplicate/role"
+                >
+                  duplicate
+                </EuiSmallButtonEmpty>
+                <EuiSmallButtonEmpty
+                  color="danger"
+                  data-test-subj="delete"
+                  onClick={[Function]}
+                >
+                  delete
+                </EuiSmallButtonEmpty>
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <EuiSmallButton
+                  href="#/roles/edit/role"
+                >
+                  Edit role
+                </EuiSmallButton>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiPageContentHeaderSection>
+        </EuiPageContentHeader>
+      </React.Fragment>
+    }
+    resourceType="roles"
+    subAction="role"
+  />
   <EuiTabbedContent
     autoFocus="initial"
     initialSelectedTab={
@@ -579,7 +749,28 @@ exports[`Role view renders when mapped user tab is selected 1`] = `
             <TenantsPanel
               coreStart={
                 Object {
+                  "chrome": Object {
+                    "navGroup": Object {
+                      "getNavGroupEnabled": [MockFunction],
+                    },
+                    "setBreadcrumbs": [MockFunction],
+                  },
                   "http": 1,
+                  "uiSettings": Object {
+                    "get": [MockFunction] {
+                      "calls": Array [
+                        Array [
+                          "home:useNewHomePage",
+                        ],
+                      ],
+                      "results": Array [
+                        Object {
+                          "type": "return",
+                          "value": false,
+                        },
+                      ],
+                    },
+                  },
                 }
               }
               dataSourceId="test"
diff --git a/public/apps/configuration/panels/role-view/test/role-view.test.tsx b/public/apps/configuration/panels/role-view/test/role-view.test.tsx
index 48a76b599..50b0e81d2 100644
--- a/public/apps/configuration/panels/role-view/test/role-view.test.tsx
+++ b/public/apps/configuration/panels/role-view/test/role-view.test.tsx
@@ -14,7 +14,7 @@
  */
 
 import React from 'react';
-import { mount, shallow } from 'enzyme';
+import { mount, render, shallow } from 'enzyme';
 import { RoleView } from '../role-view';
 import { ClusterPermissionPanel } from '../../role-view/cluster-permission-panel';
 import { IndexPermissionPanel } from '../index-permission-panel';
@@ -82,6 +82,13 @@ describe('Role view', () => {
   const sampleRole = 'role';
   const mockCoreStart = {
     http: 1,
+    uiSettings: {
+      get: jest.fn().mockReturnValue(false),
+    },
+    chrome: {
+      navGroup: { getNavGroupEnabled: jest.fn().mockReturnValue(false) },
+      setBreadcrumbs: jest.fn(),
+    },
   };
   const buildBreadcrumbs = jest.fn();
 
@@ -98,7 +105,6 @@ describe('Role view', () => {
       <RoleView
         roleName={sampleRole}
         prevAction=""
-        buildBreadcrumbs={buildBreadcrumbs}
         coreStart={mockCoreStart as any}
         depsStart={{} as any}
         params={{} as any}
@@ -106,7 +112,6 @@ describe('Role view', () => {
       />
     );
 
-    expect(buildBreadcrumbs).toBeCalledTimes(1);
     expect(component.find(EuiTabbedContent).length).toBe(1);
 
     const tabs = component.find(EuiTabbedContent).dive();
@@ -121,7 +126,6 @@ describe('Role view', () => {
       <RoleView
         roleName={sampleRole}
         prevAction={SubAction.mapuser}
-        buildBreadcrumbs={buildBreadcrumbs}
         coreStart={mockCoreStart as any}
         depsStart={{} as any}
         params={{} as any}
@@ -243,13 +247,13 @@ describe('Role view', () => {
       throw new Error();
     });
     const spy = jest.spyOn(console, 'log').mockImplementationOnce(() => {});
-    shallow(
+    render(
       <RoleView
         roleName={sampleRole}
         prevAction=""
         buildBreadcrumbs={buildBreadcrumbs}
         coreStart={mockCoreStart as any}
-        depsStart={{} as any}
+        depsStart={{ navigation: { ui: { HeaderControl: {} } } } as any}
         params={{} as any}
         config={{} as any}
       />
@@ -265,18 +269,18 @@ describe('Role view', () => {
   });
 
   it('delete role', () => {
-    const component = shallow(
+    const component = mount(
       <RoleView
         roleName={sampleRole}
         prevAction=""
         buildBreadcrumbs={buildBreadcrumbs}
         coreStart={mockCoreStart as any}
-        depsStart={{} as any}
+        depsStart={{ navigation: { ui: { HeaderControl: {} } } } as any}
         params={{} as any}
         config={{} as any}
       />
     );
-    component.find('[data-test-subj="delete"]').simulate('click');
+    component.find('[data-test-subj="delete"]').first().simulate('click');
 
     expect(requestDeleteRoles).toBeCalled();
   });
@@ -285,18 +289,18 @@ describe('Role view', () => {
     (requestDeleteRoles as jest.Mock).mockImplementationOnce(() => {
       throw new Error();
     });
-    const component = shallow(
+    const component = mount(
       <RoleView
         roleName={sampleRole}
         prevAction=""
         buildBreadcrumbs={buildBreadcrumbs}
         coreStart={mockCoreStart as any}
-        depsStart={{} as any}
+        depsStart={{ navigation: { ui: { HeaderControl: {} } } } as any}
         params={{} as any}
         config={{} as any}
       />
     );
-    component.find('[data-test-subj="delete"]').simulate('click');
+    component.find('[data-test-subj="delete"]').first().simulate('click');
     expect(createUnknownErrorToast).toBeCalled();
   });
 });
diff --git a/public/apps/configuration/panels/tenant-list/manage_tab.tsx b/public/apps/configuration/panels/tenant-list/manage_tab.tsx
index 1d9a4918f..adce0ec79 100644
--- a/public/apps/configuration/panels/tenant-list/manage_tab.tsx
+++ b/public/apps/configuration/panels/tenant-list/manage_tab.tsx
@@ -66,15 +66,15 @@ import { PageId } from '../../types';
 import { useDeleteConfirmState } from '../../utils/delete-confirm-modal-utils';
 import { showTableStatusMessage } from '../../utils/loading-spinner-utils';
 import { useContextMenuState } from '../../utils/context-menu';
-import { generateResourceName } from '../../utils/resource-utils';
+import { generateResourceName, getBreadcrumbs } from '../../utils/resource-utils';
 import { DocLinks } from '../../constants';
 import { TenantList } from './tenant-list';
-import { getBreadcrumbs } from '../../app-router';
 import { LocalCluster } from '../../../../utils/datasource-utils';
 import { buildUrl } from '../../utils/url-builder';
 import { CrossPageToast } from '../../cross-page-toast';
 import { getDashboardsInfo } from '../../../../utils/dashboards-info-utils';
 import { AccessErrorComponent } from '../../access-error-component';
+import { HeaderButtonOrLink } from '../../header/header-components';
 
 export function ManageTab(props: AppDependencies) {
   const setGlobalBreadcrumbs = flow(getBreadcrumbs, props.coreStart.chrome.setBreadcrumbs);
@@ -503,6 +503,19 @@ export function ManageTab(props: AppDependencies) {
       />
     );
   }
+  const useUpdatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
+  const createTenantButton = [
+    {
+      id: 'createTenant',
+      label: 'Creat tenant',
+      iconType: 'plus',
+      iconSide: 'left',
+      isLoading: false,
+      run: () => showEditModal('', Action.create, ''),
+      type: 'button',
+      fill: true,
+    },
+  ];
   /* eslint-disable */
   return (
     <>
@@ -528,6 +541,15 @@ export function ManageTab(props: AppDependencies) {
           <EuiPageContentHeaderSection>
             <EuiFlexGroup>
               <EuiFlexItem>{actionsMenu}</EuiFlexItem>
+              { useUpdatedUX ? 
+                <HeaderButtonOrLink
+
+                navigation={props.depsStart.navigation}
+          coreStart={props.coreStart}
+                  appRightControls={createTenantButton}
+  
+                />
+              : 
               <EuiFlexItem>
                 <EuiSmallButton
                   id="createTenant"
@@ -536,7 +558,7 @@ export function ManageTab(props: AppDependencies) {
                 >
                   Create tenant
                 </EuiSmallButton>
-              </EuiFlexItem>
+              </EuiFlexItem>}
             </EuiFlexGroup>
           </EuiPageContentHeaderSection>
         </EuiPageContentHeader>
diff --git a/public/apps/configuration/panels/tenant-list/tenant-list.tsx b/public/apps/configuration/panels/tenant-list/tenant-list.tsx
index f804f09d9..aa5ee9e40 100644
--- a/public/apps/configuration/panels/tenant-list/tenant-list.tsx
+++ b/public/apps/configuration/panels/tenant-list/tenant-list.tsx
@@ -32,6 +32,8 @@ import { DocLinks } from '../../constants';
 import { getDashboardsInfo } from '../../../../utils/dashboards-info-utils';
 import { LocalCluster } from '../../../../utils/datasource-utils';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
+import { PageHeader } from '../../header/header-components';
+import { ResourceType } from '../../../../../common';
 
 interface TenantListProps extends AppDependencies {
   tabID: string;
@@ -127,6 +129,21 @@ export function TenantList(props: TenantListProps) {
     ));
   };
 
+  const descriptionData = [
+    {
+      renderComponent: (
+        <EuiText size="s" color="subdued" grow={true} textAlign={'left'}>
+          Tenants in OpenSearch Dashboards are spaces for saving index patterns, visualizations,
+          dashboards, and other OpenSearch
+          <br /> Dashboards objects. Tenants are useful for safely sharing your work with other
+          OpenSearch Dashboards users. You can control <br />
+          which roles have access to a tenant and whether those roles have read or write access.{' '}
+          <ExternalLink href={DocLinks.MultiTenancyDoc} />
+        </EuiText>
+      ),
+    },
+  ];
+
   return (
     <>
       <SecurityPluginTopNavMenu
@@ -135,18 +152,28 @@ export function TenantList(props: TenantListProps) {
         setDataSource={() => {}}
         selectedDataSource={LocalCluster}
       />
-      <EuiPageHeader>
-        <EuiTitle size="l">
-          <h1>Dashboards multi-tenancy</h1>
-        </EuiTitle>
-      </EuiPageHeader>
-      <EuiText size="s" color="subdued" grow={true} textAlign={'left'}>
-        Tenants in OpenSearch Dashboards are spaces for saving index patterns, visualizations,
-        dashboards, and other OpenSearch Dashboards objects. Tenants are useful for safely sharing
-        your work with other OpenSearch Dashboards users. You can control which roles have access to
-        a tenant and whether those roles have read or write access.{' '}
-        <ExternalLink href={DocLinks.MultiTenancyDoc} />
-      </EuiText>
+      <PageHeader
+        navigation={props.depsStart.navigation}
+        coreStart={props.coreStart}
+        descriptionControls={descriptionData}
+        fallBackComponent={
+          <>
+            <EuiPageHeader>
+              <EuiTitle size="l">
+                <h1>Dashboards multi-tenancy</h1>
+              </EuiTitle>
+            </EuiPageHeader>
+            <EuiText size="s" color="subdued" grow={true} textAlign={'left'}>
+              Tenants in OpenSearch Dashboards are spaces for saving index patterns, visualizations,
+              dashboards, and other OpenSearch Dashboards objects. Tenants are useful for safely
+              sharing your work with other OpenSearch Dashboards users. You can control which roles
+              have access to a tenant and whether those roles have read or write access.{' '}
+              <ExternalLink href={DocLinks.MultiTenancyDoc} />
+            </EuiText>
+          </>
+        }
+        resourceType={ResourceType.tenants}
+      />
 
       <EuiTabs>{renderTabs()}</EuiTabs>
       {!isMultiTenancyEnabled && selectedTabId === 'Manage' && tenancyDisabledWarning}
diff --git a/public/apps/configuration/panels/tenant-list/test/tenant-list.test.tsx b/public/apps/configuration/panels/tenant-list/test/tenant-list.test.tsx
index 66117c398..a602f507c 100644
--- a/public/apps/configuration/panels/tenant-list/test/tenant-list.test.tsx
+++ b/public/apps/configuration/panels/tenant-list/test/tenant-list.test.tsx
@@ -60,13 +60,13 @@ describe('Tenant list', () => {
   const setState = jest.fn();
   const mockCoreStart = {
     http: 1,
+    uiSettings: {
+      get: jest.fn().mockReturnValue(false),
+    },
     chrome: {
       setBreadcrumbs() {
         return 1;
       },
-      navGroup: {
-        getNavGroupEnabled: jest.fn().mockReturnValue(false),
-      },
     },
   };
   const config = {
@@ -101,7 +101,7 @@ describe('Tenant list', () => {
     const component = shallow(
       <ManageTab
         coreStart={mockCoreStart as any}
-        depsStart={{} as any}
+        depsStart={{ navigation: {} } as any}
         params={{} as any}
         config={config as any}
       />
@@ -121,7 +121,7 @@ describe('Tenant list', () => {
     shallow(
       <ManageTab
         coreStart={mockCoreStart as any}
-        depsStart={{} as any}
+        depsStart={{ navigation: {} } as any}
         params={{} as any}
         config={config as any}
       />
@@ -151,7 +151,7 @@ describe('Tenant list', () => {
     shallow(
       <ManageTab
         coreStart={mockCoreStart as any}
-        depsStart={{} as any}
+        depsStart={{ navigation: {} } as any}
         params={{} as any}
         config={config as any}
       />
@@ -171,7 +171,7 @@ describe('Tenant list', () => {
     shallow(
       <ManageTab
         coreStart={mockCoreStart as any}
-        depsStart={{} as any}
+        depsStart={{ navigation: {} } as any}
         params={{} as any}
         config={config as any}
       />
@@ -196,7 +196,7 @@ describe('Tenant list', () => {
     shallow(
       <ManageTab
         coreStart={mockCoreStart as any}
-        depsStart={{} as any}
+        depsStart={{ navigation: {} } as any}
         params={{} as any}
         config={config as any}
       />
@@ -215,7 +215,7 @@ describe('Tenant list', () => {
     const component = shallow(
       <ManageTab
         coreStart={mockCoreStart as any}
-        depsStart={{} as any}
+        depsStart={{ navigation: {} } as any}
         params={{} as any}
         config={config as any}
       />
@@ -237,7 +237,7 @@ describe('Tenant list', () => {
     const component = shallow(
       <ManageTab
         coreStart={mockCoreStart as any}
-        depsStart={{} as any}
+        depsStart={{ navigation: {} } as any}
         params={{} as any}
         config={config as any}
       />
@@ -290,7 +290,7 @@ describe('Tenant list', () => {
       const component = shallow(
         <ManageTab
           coreStart={mockCoreStart as any}
-          depsStart={{} as any}
+          depsStart={{ navigation: {} } as any}
           params={{} as any}
           config={config as any}
         />
@@ -319,7 +319,7 @@ describe('Tenant list', () => {
       const component = shallow(
         <ManageTab
           coreStart={mockCoreStart as any}
-          depsStart={{} as any}
+          depsStart={{ navigation: {} } as any}
           params={{} as any}
           config={config as any}
         />
@@ -352,7 +352,7 @@ describe('Tenant list', () => {
       const component = shallow(
         <ManageTab
           coreStart={mockCoreStart as any}
-          depsStart={{} as any}
+          depsStart={{ navigation: {} } as any}
           params={{} as any}
           config={config as any}
         />
@@ -397,7 +397,7 @@ describe('Tenant list', () => {
       component = shallow(
         <ManageTab
           coreStart={mockCoreStart as any}
-          depsStart={{} as any}
+          depsStart={{ navigation: {} } as any}
           params={{} as any}
           config={config as any}
         />
@@ -487,7 +487,7 @@ describe('Tenant list', () => {
       component = shallow(
         <ManageTab
           coreStart={mockCoreStart as any}
-          depsStart={{} as any}
+          depsStart={{ navigation: {} } as any}
           params={{} as any}
           config={config as any}
         />
@@ -499,7 +499,7 @@ describe('Tenant list', () => {
       component = shallow(
         <ConfigureTab1
           coreStart={mockCoreStart as any}
-          depsStart={{} as any}
+          depsStart={{ navigation: {} } as any}
           params={{} as any}
           config={config as any}
         />
diff --git a/public/apps/configuration/panels/test/__snapshots__/get-started.test.tsx.snap b/public/apps/configuration/panels/test/__snapshots__/get-started.test.tsx.snap
index d380f6153..33a5d8009 100644
--- a/public/apps/configuration/panels/test/__snapshots__/get-started.test.tsx.snap
+++ b/public/apps/configuration/panels/test/__snapshots__/get-started.test.tsx.snap
@@ -31,19 +31,42 @@ exports[`Get started (landing page) renders when backend configuration is disabl
       }
       setDataSource={[MockFunction]}
     />
-    <EuiPageHeader>
-      <EuiTitle
-        size="l"
-      >
-        <h1>
-          Get started
-        </h1>
-      </EuiTitle>
-      <ExternalLinkButton
-        href="#/"
-        text="Open in new window"
-      />
-    </EuiPageHeader>
+    <PageHeader
+      appRightControls={
+        Array [
+          Object {
+            "href": "#/",
+            "iconSide": "right",
+            "iconType": "popout",
+            "isLoading": false,
+            "label": "Open in new window",
+            "target": "_blank",
+            "type": "button",
+          },
+        ]
+      }
+      coreStart={
+        Object {
+          "http": 1,
+        }
+      }
+      fallBackComponent={
+        <EuiPageHeader>
+          <EuiTitle
+            size="l"
+          >
+            <h1>
+              Get started
+            </h1>
+          </EuiTitle>
+          <ExternalLinkButton
+            href="#/"
+            text="Open in new window"
+          />
+        </EuiPageHeader>
+      }
+      resourceType="getStarted"
+    />
     <EuiPanel
       paddingSize="l"
     >
@@ -310,19 +333,42 @@ exports[`Get started (landing page) renders when backend configuration is enable
       }
       setDataSource={[MockFunction]}
     />
-    <EuiPageHeader>
-      <EuiTitle
-        size="l"
-      >
-        <h1>
-          Get started
-        </h1>
-      </EuiTitle>
-      <ExternalLinkButton
-        href="#/"
-        text="Open in new window"
-      />
-    </EuiPageHeader>
+    <PageHeader
+      appRightControls={
+        Array [
+          Object {
+            "href": "#/",
+            "iconSide": "right",
+            "iconType": "popout",
+            "isLoading": false,
+            "label": "Open in new window",
+            "target": "_blank",
+            "type": "button",
+          },
+        ]
+      }
+      coreStart={
+        Object {
+          "http": 1,
+        }
+      }
+      fallBackComponent={
+        <EuiPageHeader>
+          <EuiTitle
+            size="l"
+          >
+            <h1>
+              Get started
+            </h1>
+          </EuiTitle>
+          <ExternalLinkButton
+            href="#/"
+            text="Open in new window"
+          />
+        </EuiPageHeader>
+      }
+      resourceType="getStarted"
+    />
     <EuiPanel
       paddingSize="l"
     >
diff --git a/public/apps/configuration/panels/test/__snapshots__/role-list.test.tsx.snap b/public/apps/configuration/panels/test/__snapshots__/role-list.test.tsx.snap
index 4618fb2c6..b7998e48c 100644
--- a/public/apps/configuration/panels/test/__snapshots__/role-list.test.tsx.snap
+++ b/public/apps/configuration/panels/test/__snapshots__/role-list.test.tsx.snap
@@ -7,10 +7,29 @@ exports[`Role list AccessError component should load access error component 1`]
     coreStart={
       Object {
         "http": 1,
+        "uiSettings": Object {
+          "get": [MockFunction] {
+            "calls": Array [
+              Array [
+                "home:useNewHomePage",
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": false,
+              },
+            ],
+          },
+        },
       }
     }
     dataSourcePickerReadOnly={false}
-    navigation={Object {}}
+    depsStart={
+      Object {
+        "navigation": Object {},
+      }
+    }
     params={Object {}}
     selectedDataSource={
       Object {
@@ -19,15 +38,76 @@ exports[`Role list AccessError component should load access error component 1`]
     }
     setDataSource={[MockFunction]}
   />
-  <EuiPageHeader>
-    <EuiTitle
-      size="l"
-    >
-      <h1>
-        Roles
-      </h1>
-    </EuiTitle>
-  </EuiPageHeader>
+  <PageHeader
+    appRightControls={
+      Array [
+        Object {
+          "fill": true,
+          "href": "#/roles/create",
+          "iconSide": "left",
+          "iconType": "plus",
+          "isLoading": false,
+          "label": "Create role",
+          "testId": "create-role",
+          "type": "button",
+        },
+      ]
+    }
+    coreStart={
+      Object {
+        "http": 1,
+        "uiSettings": Object {
+          "get": [MockFunction] {
+            "calls": Array [
+              Array [
+                "home:useNewHomePage",
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": false,
+              },
+            ],
+          },
+        },
+      }
+    }
+    count={0}
+    descriptionControls={
+      Array [
+        Object {
+          "isLoading": false,
+          "renderComponent": <EuiText
+            color="subdued"
+            size="xs"
+          >
+            Roles are the core way of controlling access to your cluster. Roles contain any combination of cluster-wide permission, index-
+            <br />
+            specific permissions, document- and field-level security, and tenants. Then you map users to these roles so that users 
+            <br />
+            gain those permissions. 
+            <mockConstructor
+              href="https://opensearch.org/docs/latest/security-plugin/access-control/users-roles/"
+            />
+          </EuiText>,
+        },
+      ]
+    }
+    fallBackComponent={
+      <EuiPageHeader>
+        <EuiTitle
+          size="l"
+        >
+          <h1>
+            Roles
+          </h1>
+        </EuiTitle>
+      </EuiPageHeader>
+    }
+    navigation={Object {}}
+    resourceType="roles"
+  />
   <EuiPageContent>
     <EuiPageContentHeader
       id="role-table-container"
@@ -41,8 +121,7 @@ exports[`Role list AccessError component should load access error component 1`]
             <span
               className="panel-header-count"
             >
-               
-              (
+               (
               0
               )
             </span>
@@ -150,7 +229,11 @@ exports[`Role list AccessError component should load access error component 1`]
         message="No items found"
         pagination={true}
         responsive={true}
-        search={Object {}}
+        search={
+          Object {
+            "toolsRight": undefined,
+          }
+        }
         selection={
           Object {
             "onSelectionChange": [MockFunction],
diff --git a/public/apps/configuration/panels/test/__snapshots__/user-list.test.tsx.snap b/public/apps/configuration/panels/test/__snapshots__/user-list.test.tsx.snap
index 82f4af425..105e6dd38 100644
--- a/public/apps/configuration/panels/test/__snapshots__/user-list.test.tsx.snap
+++ b/public/apps/configuration/panels/test/__snapshots__/user-list.test.tsx.snap
@@ -11,10 +11,29 @@ exports[`User list AccessError component should load access error component 1`]
             "serverBasePath": "",
           },
         },
+        "uiSettings": Object {
+          "get": [MockFunction] {
+            "calls": Array [
+              Array [
+                "home:useNewHomePage",
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": false,
+              },
+            ],
+          },
+        },
       }
     }
     dataSourcePickerReadOnly={false}
-    navigation={Object {}}
+    depsStart={
+      Object {
+        "navigation": Object {},
+      }
+    }
     params={Object {}}
     selectedDataSource={
       Object {
@@ -23,15 +42,87 @@ exports[`User list AccessError component should load access error component 1`]
     }
     setDataSource={[MockFunction]}
   />
-  <EuiPageHeader>
-    <EuiTitle
-      size="l"
-    >
-      <h1>
-        Internal users
-      </h1>
-    </EuiTitle>
-  </EuiPageHeader>
+  <PageHeader
+    appRightControls={
+      Array [
+        Object {
+          "fill": true,
+          "href": "#/users/create",
+          "iconSide": "left",
+          "iconType": "plus",
+          "isLoading": false,
+          "label": "Create internal user",
+          "testId": "create-user",
+          "type": "button",
+        },
+      ]
+    }
+    coreStart={
+      Object {
+        "http": Object {
+          "basePath": Object {
+            "serverBasePath": "",
+          },
+        },
+        "uiSettings": Object {
+          "get": [MockFunction] {
+            "calls": Array [
+              Array [
+                "home:useNewHomePage",
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": false,
+              },
+            ],
+          },
+        },
+      }
+    }
+    count={0}
+    descriptionControls={
+      Array [
+        Object {
+          "isLoading": false,
+          "renderComponent": <EuiText
+            color="subdued"
+            size="xs"
+          >
+            The Security plugin includes an internal user database. Use this database in place of, or in addition to, an external 
+            <br />
+             authentication system such as LDAP server or Active Directory. You can map an internal user to a role from
+             
+            <EuiLink
+              href="#/roles"
+            >
+              Roles
+            </EuiLink>
+            . First, click 
+            <br />
+             into the detail page of the role. Then, under “Mapped users”, click “Manage mapping” 
+            <ExternalLink
+              href="https://opensearch.org/docs/latest/security-plugin/access-control/users-roles/#map-users-to-roles"
+            />
+          </EuiText>,
+        },
+      ]
+    }
+    fallBackComponent={
+      <EuiPageHeader>
+        <EuiTitle
+          size="l"
+        >
+          <h1>
+            Internal users
+          </h1>
+        </EuiTitle>
+      </EuiPageHeader>
+    }
+    navigation={Object {}}
+    resourceType="users"
+  />
   <AccessErrorComponent
     loading={false}
   />
diff --git a/public/apps/configuration/panels/test/role-list.test.tsx b/public/apps/configuration/panels/test/role-list.test.tsx
index c5f693633..4fd5e7ce6 100644
--- a/public/apps/configuration/panels/test/role-list.test.tsx
+++ b/public/apps/configuration/panels/test/role-list.test.tsx
@@ -48,6 +48,9 @@ describe('Role list', () => {
   const setState = jest.fn();
   const mockCoreStart = {
     http: 1,
+    uiSettings: {
+      get: jest.fn().mockReturnValue(false),
+    },
   };
 
   beforeEach(() => {
@@ -72,7 +75,7 @@ describe('Role list', () => {
     const component = shallow(
       <RoleList
         coreStart={mockCoreStart as any}
-        navigation={{} as any}
+        depsStart={{ navigation: {} }}
         params={{} as any}
         config={{} as any}
       />
@@ -91,8 +94,8 @@ describe('Role list', () => {
 
     shallow(
       <RoleList
-        coreStart={{} as any}
-        navigation={{} as any}
+        coreStart={mockCoreStart as any}
+        depsStart={{ navigation: {} }}
         params={{} as any}
         config={{} as any}
       />
@@ -125,7 +128,7 @@ describe('Role list', () => {
     shallow(
       <RoleList
         coreStart={mockCoreStart as any}
-        navigation={{} as any}
+        depsStart={{ navigation: {} }}
         params={{} as any}
         config={{} as any}
       />
@@ -144,7 +147,7 @@ describe('Role list', () => {
     shallow(
       <RoleList
         coreStart={mockCoreStart as any}
-        navigation={{} as any}
+        depsStart={{ navigation: {} }}
         params={{} as any}
         config={{} as any}
       />
@@ -167,7 +170,7 @@ describe('Role list', () => {
     shallow(
       <RoleList
         coreStart={mockCoreStart as any}
-        navigation={{} as any}
+        depsStart={{ navigation: {} }}
         params={{} as any}
         config={{} as any}
       />
@@ -200,7 +203,7 @@ describe('Role list', () => {
       component = shallow(
         <RoleList
           coreStart={mockCoreStart as any}
-          navigation={{} as any}
+          depsStart={{ navigation: {} }}
           params={{} as any}
           config={{} as any}
         />
@@ -236,7 +239,7 @@ describe('Role list', () => {
       const wrapper = shallow(
         <RoleList
           coreStart={mockCoreStart as any}
-          navigation={{} as any}
+          depsStart={{ navigation: {} }}
           params={{} as any}
           config={{} as any}
         />
@@ -255,7 +258,7 @@ describe('Role list', () => {
       const wrapper = shallow(
         <RoleList
           coreStart={mockCoreStart as any}
-          navigation={{} as any}
+          depsStart={{ navigation: {} }}
           params={{} as any}
           config={{} as any}
         />
@@ -285,7 +288,7 @@ describe('Role list', () => {
       component = shallow(
         <RoleList
           coreStart={mockCoreStart as any}
-          navigation={{} as any}
+          depsStart={{ navigation: {} }}
           params={{} as any}
           config={{} as any}
         />
diff --git a/public/apps/configuration/panels/test/user-list.test.tsx b/public/apps/configuration/panels/test/user-list.test.tsx
index 980e8d21c..3b2e062c2 100644
--- a/public/apps/configuration/panels/test/user-list.test.tsx
+++ b/public/apps/configuration/panels/test/user-list.test.tsx
@@ -90,6 +90,9 @@ describe('User list', () => {
   describe('UserList', () => {
     const mockCoreStart = {
       http: 1,
+      uiSettings: {
+        get: jest.fn().mockReturnValue(false),
+      },
     };
     const setState = jest.fn();
     jest.spyOn(React, 'useState').mockImplementation((initValue) => [initValue, setState]);
@@ -98,7 +101,7 @@ describe('User list', () => {
       const component = shallow(
         <UserList
           coreStart={mockCoreStart as any}
-          navigation={{} as any}
+          depsStart={{ navigation: {} }}
           params={{} as any}
           config={{} as any}
         />
@@ -112,7 +115,7 @@ describe('User list', () => {
       shallow(
         <UserList
           coreStart={mockCoreStart as any}
-          navigation={{} as any}
+          depsStart={{ navigation: {} }}
           params={{} as any}
           config={{} as any}
         />
@@ -132,7 +135,7 @@ describe('User list', () => {
       shallow(
         <UserList
           coreStart={mockCoreStart as any}
-          navigation={{} as any}
+          depsStart={{ navigation: {} }}
           params={{} as any}
           config={{} as any}
         />
@@ -146,7 +149,7 @@ describe('User list', () => {
       shallow(
         <UserList
           coreStart={mockCoreStart as any}
-          navigation={{} as any}
+          depsStart={{ navigation: {} }}
           params={{} as any}
           config={{} as any}
         />
@@ -171,7 +174,7 @@ describe('User list', () => {
       shallow(
         <UserList
           coreStart={mockCoreStart as any}
-          navigation={{} as any}
+          depsStart={{ navigation: {} }}
           params={{} as any}
           config={{} as any}
         />
@@ -194,6 +197,9 @@ describe('User list', () => {
           serverBasePath: '',
         },
       },
+      uiSettings: {
+        get: jest.fn().mockReturnValue(false),
+      },
     };
     let component;
     const mockUserListingData: InternalUsersListing = {
@@ -215,7 +221,7 @@ describe('User list', () => {
       component = shallow(
         <UserList
           coreStart={mockCoreStart as any}
-          navigation={{} as any}
+          depsStart={{ navigation: {} }}
           params={{} as any}
           config={{} as any}
         />
@@ -244,6 +250,9 @@ describe('User list', () => {
           serverBasePath: '',
         },
       },
+      uiSettings: {
+        get: jest.fn().mockReturnValue(false),
+      },
     };
     let component;
     beforeEach(() => {
@@ -260,7 +269,7 @@ describe('User list', () => {
       component = shallow(
         <UserList
           coreStart={mockCoreStart as any}
-          navigation={{} as any}
+          depsStart={{ navigation: {} }}
           params={{} as any}
           config={{} as any}
         />
diff --git a/public/apps/configuration/panels/user-list.tsx b/public/apps/configuration/panels/user-list.tsx
index a8fc5c31e..5531e08be 100644
--- a/public/apps/configuration/panels/user-list.tsx
+++ b/public/apps/configuration/panels/user-list.tsx
@@ -52,6 +52,7 @@ import { buildHashUrl } from '../utils/url-builder';
 import { DataSourceContext } from '../app-router';
 import { SecurityPluginTopNavMenu } from '../top-nav-menu';
 import { AccessErrorComponent } from '../access-error-component';
+import { PageHeader } from '../header/header-components';
 
 export function dictView(items: Dictionary<string>) {
   if (isEmpty(items)) {
@@ -208,6 +209,36 @@ export function UserList(props: AppDependencies) {
 
   const [actionsMenu, closeActionsMenu] = useContextMenuState('Actions', {}, actionsMenuItems);
 
+  const useUpdatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
+  const buttonData = [
+    {
+      label: 'Create internal user',
+      isLoading: false,
+      href: buildHashUrl(ResourceType.users, Action.create),
+      fill: true,
+      iconType: 'plus',
+      iconSide: 'left',
+      type: 'button',
+      testId: 'create-user',
+    },
+  ];
+  const descriptionData = [
+    {
+      isLoading: loading,
+      renderComponent: (
+        <EuiText size="xs" color="subdued">
+          The Security plugin includes an internal user database. Use this database in place of, or
+          in addition to, an external <br /> authentication system such as LDAP server or Active
+          Directory. You can map an internal user to a role from{' '}
+          <EuiLink href={buildHashUrl(ResourceType.roles)}>Roles</EuiLink>
+          . First, click <br /> into the detail page of the role. Then, under “Mapped users”, click
+          “Manage mapping” <ExternalLink href={DocLinks.MapUsersToRolesDoc} />
+        </EuiText>
+      ),
+    },
+  ];
+
+  const userLen = Query.execute(query || '', userData).length;
   return (
     <>
       <SecurityPluginTopNavMenu
@@ -216,52 +247,61 @@ export function UserList(props: AppDependencies) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      <EuiPageHeader>
-        <EuiTitle size="l">
-          <h1>Internal users</h1>
-        </EuiTitle>
-      </EuiPageHeader>
+      <PageHeader
+        navigation={props.depsStart.navigation}
+        coreStart={props.coreStart}
+        descriptionControls={descriptionData}
+        appRightControls={buttonData}
+        fallBackComponent={
+          <EuiPageHeader>
+            <EuiTitle size="l">
+              <h1>Internal users</h1>
+            </EuiTitle>
+          </EuiPageHeader>
+        }
+        resourceType={ResourceType.users}
+        count={userData.length}
+      />
       {loading ? (
         <EuiLoadingContent />
       ) : accessErrorFlag ? (
         <AccessErrorComponent loading={loading} dataSourceLabel={dataSource && dataSource.label} />
       ) : (
         <EuiPageContent>
-          <EuiPageContentHeader>
-            <EuiPageContentHeaderSection>
-              <EuiTitle size="s">
-                <h3>
-                  Internal users
-                  <span className="panel-header-count">
-                    {' '}
-                    ({Query.execute(query || '', userData).length})
-                  </span>
-                </h3>
-              </EuiTitle>
-              <EuiText size="xs" color="subdued">
-                The Security plugin includes an internal user database. Use this database in place
-                of, or in addition to, an external authentication system such as LDAP server or
-                Active Directory. You can map an user account to a role from{' '}
-                <EuiLink href={buildHashUrl(ResourceType.roles)}>Roles</EuiLink>
-                . First, click into the detail page of the role. Then, under “Mapped users”, click
-                “Manage mapping” <ExternalLink href={DocLinks.MapUsersToRolesDoc} />
-              </EuiText>
-            </EuiPageContentHeaderSection>
-            <EuiPageContentHeaderSection>
-              <EuiFlexGroup>
-                <EuiFlexItem>{actionsMenu}</EuiFlexItem>
-                <EuiFlexItem>
-                  <EuiSmallButton
-                    fill
-                    href={buildHashUrl(ResourceType.users, Action.create)}
-                    data-test-subj="create-user"
-                  >
-                    Create internal user
-                  </EuiSmallButton>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiPageContentHeaderSection>
-          </EuiPageContentHeader>
+          {useUpdatedUX ? null : (
+            <EuiPageContentHeader>
+              <EuiPageContentHeaderSection>
+                <EuiTitle size="s">
+                  <h3>
+                    Internal users
+                    <span className="panel-header-count"> ({userLen})</span>
+                  </h3>
+                </EuiTitle>
+                <EuiText size="xs" color="subdued">
+                  The Security plugin includes an internal user database. Use this database in place
+                  of, or in addition to, an external authentication system such as LDAP server or
+                  Active Directory. You can map an internal user to a role from{' '}
+                  <EuiLink href={buildHashUrl(ResourceType.roles)}>Roles</EuiLink>
+                  . First, click into the detail page of the role. Then, under “Mapped users”, click
+                  “Manage mapping” <ExternalLink href={DocLinks.MapUsersToRolesDoc} />
+                </EuiText>
+              </EuiPageContentHeaderSection>
+              <EuiPageContentHeaderSection>
+                <EuiFlexGroup>
+                  <EuiFlexItem>{actionsMenu}</EuiFlexItem>
+                  <EuiFlexItem>
+                    <EuiSmallButton
+                      fill
+                      href={buildHashUrl(ResourceType.users, Action.create)}
+                      data-test-subj="create-user"
+                    >
+                      Create internal user
+                    </EuiSmallButton>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiPageContentHeaderSection>
+            </EuiPageContentHeader>
+          )}
           <EuiPageBody>
             <EuiInMemoryTable
               tableLayout={'auto'}
@@ -277,6 +317,7 @@ export function UserList(props: AppDependencies) {
                   setQuery(arg.query);
                   return true;
                 },
+                toolsRight: useUpdatedUX ? [<EuiFlexItem>{actionsMenu}</EuiFlexItem>] : undefined,
               }}
               // @ts-ignore
               selection={{ onSelectionChange: setSelection }}
diff --git a/public/apps/configuration/test/__snapshots__/app-router.test.tsx.snap b/public/apps/configuration/test/__snapshots__/app-router.test.tsx.snap
index d5ee503be..85c8181a7 100644
--- a/public/apps/configuration/test/__snapshots__/app-router.test.tsx.snap
+++ b/public/apps/configuration/test/__snapshots__/app-router.test.tsx.snap
@@ -24,30 +24,37 @@ exports[`SecurityPluginTopNavMenu renders DataSourceMenu when dataSource is enab
             items={
               Array [
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Get started with access control",
                   "href": "/getstarted",
                   "name": "Get Started",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Authentication and authorization",
                   "href": "/auth",
                   "name": "Authentication",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Roles",
                   "href": "/roles",
                   "name": "Roles",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Internal users",
                   "href": "/users",
                   "name": "Internal users",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Permissions",
                   "href": "/permissions",
                   "name": "Permissions",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Dashboard multi-tenancy",
                   "href": "/tenants",
                   "name": "Tenants",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Audit logs",
                   "href": "/auditLogging",
                   "name": "Audit logs",
                 },
@@ -66,30 +73,37 @@ exports[`SecurityPluginTopNavMenu renders DataSourceMenu when dataSource is enab
             items={
               Array [
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Get started with access control",
                   "href": "/getstarted",
                   "name": "Get Started",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Authentication and authorization",
                   "href": "/auth",
                   "name": "Authentication",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Roles",
                   "href": "/roles",
                   "name": "Roles",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Internal users",
                   "href": "/users",
                   "name": "Internal users",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Permissions",
                   "href": "/permissions",
                   "name": "Permissions",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Dashboard multi-tenancy",
                   "href": "/tenants",
                   "name": "Tenants",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Audit logs",
                   "href": "/auditLogging",
                   "name": "Audit logs",
                 },
@@ -108,30 +122,37 @@ exports[`SecurityPluginTopNavMenu renders DataSourceMenu when dataSource is enab
             items={
               Array [
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Get started with access control",
                   "href": "/getstarted",
                   "name": "Get Started",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Authentication and authorization",
                   "href": "/auth",
                   "name": "Authentication",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Roles",
                   "href": "/roles",
                   "name": "Roles",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Internal users",
                   "href": "/users",
                   "name": "Internal users",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Permissions",
                   "href": "/permissions",
                   "name": "Permissions",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Dashboard multi-tenancy",
                   "href": "/tenants",
                   "name": "Tenants",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Audit logs",
                   "href": "/auditLogging",
                   "name": "Audit logs",
                 },
@@ -150,30 +171,37 @@ exports[`SecurityPluginTopNavMenu renders DataSourceMenu when dataSource is enab
             items={
               Array [
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Get started with access control",
                   "href": "/getstarted",
                   "name": "Get Started",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Authentication and authorization",
                   "href": "/auth",
                   "name": "Authentication",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Roles",
                   "href": "/roles",
                   "name": "Roles",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Internal users",
                   "href": "/users",
                   "name": "Internal users",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Permissions",
                   "href": "/permissions",
                   "name": "Permissions",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Dashboard multi-tenancy",
                   "href": "/tenants",
                   "name": "Tenants",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Audit logs",
                   "href": "/auditLogging",
                   "name": "Audit logs",
                 },
@@ -192,30 +220,37 @@ exports[`SecurityPluginTopNavMenu renders DataSourceMenu when dataSource is enab
             items={
               Array [
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Get started with access control",
                   "href": "/getstarted",
                   "name": "Get Started",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Authentication and authorization",
                   "href": "/auth",
                   "name": "Authentication",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Roles",
                   "href": "/roles",
                   "name": "Roles",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Internal users",
                   "href": "/users",
                   "name": "Internal users",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Permissions",
                   "href": "/permissions",
                   "name": "Permissions",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Dashboard multi-tenancy",
                   "href": "/tenants",
                   "name": "Tenants",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Audit logs",
                   "href": "/auditLogging",
                   "name": "Audit logs",
                 },
@@ -234,30 +269,37 @@ exports[`SecurityPluginTopNavMenu renders DataSourceMenu when dataSource is enab
             items={
               Array [
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Get started with access control",
                   "href": "/getstarted",
                   "name": "Get Started",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Authentication and authorization",
                   "href": "/auth",
                   "name": "Authentication",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Roles",
                   "href": "/roles",
                   "name": "Roles",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Internal users",
                   "href": "/users",
                   "name": "Internal users",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Permissions",
                   "href": "/permissions",
                   "name": "Permissions",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Dashboard multi-tenancy",
                   "href": "/tenants",
                   "name": "Tenants",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Audit logs",
                   "href": "/auditLogging",
                   "name": "Audit logs",
                 },
@@ -276,30 +318,37 @@ exports[`SecurityPluginTopNavMenu renders DataSourceMenu when dataSource is enab
             items={
               Array [
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Get started with access control",
                   "href": "/getstarted",
                   "name": "Get Started",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Authentication and authorization",
                   "href": "/auth",
                   "name": "Authentication",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Roles",
                   "href": "/roles",
                   "name": "Roles",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Internal users",
                   "href": "/users",
                   "name": "Internal users",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Permissions",
                   "href": "/permissions",
                   "name": "Permissions",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Dashboard multi-tenancy",
                   "href": "/tenants",
                   "name": "Tenants",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Audit logs",
                   "href": "/auditLogging",
                   "name": "Audit logs",
                 },
@@ -318,30 +367,37 @@ exports[`SecurityPluginTopNavMenu renders DataSourceMenu when dataSource is enab
             items={
               Array [
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Get started with access control",
                   "href": "/getstarted",
                   "name": "Get Started",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Authentication and authorization",
                   "href": "/auth",
                   "name": "Authentication",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Roles",
                   "href": "/roles",
                   "name": "Roles",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Internal users",
                   "href": "/users",
                   "name": "Internal users",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Permissions",
                   "href": "/permissions",
                   "name": "Permissions",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Dashboard multi-tenancy",
                   "href": "/tenants",
                   "name": "Tenants",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Audit logs",
                   "href": "/auditLogging",
                   "name": "Audit logs",
                 },
@@ -360,30 +416,37 @@ exports[`SecurityPluginTopNavMenu renders DataSourceMenu when dataSource is enab
             items={
               Array [
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Get started with access control",
                   "href": "/getstarted",
                   "name": "Get Started",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Authentication and authorization",
                   "href": "/auth",
                   "name": "Authentication",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Roles",
                   "href": "/roles",
                   "name": "Roles",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Internal users",
                   "href": "/users",
                   "name": "Internal users",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Permissions",
                   "href": "/permissions",
                   "name": "Permissions",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Dashboard multi-tenancy",
                   "href": "/tenants",
                   "name": "Tenants",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Audit logs",
                   "href": "/auditLogging",
                   "name": "Audit logs",
                 },
@@ -402,30 +465,37 @@ exports[`SecurityPluginTopNavMenu renders DataSourceMenu when dataSource is enab
             items={
               Array [
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Get started with access control",
                   "href": "/getstarted",
                   "name": "Get Started",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Authentication and authorization",
                   "href": "/auth",
                   "name": "Authentication",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Roles",
                   "href": "/roles",
                   "name": "Roles",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Internal users",
                   "href": "/users",
                   "name": "Internal users",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Permissions",
                   "href": "/permissions",
                   "name": "Permissions",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Dashboard multi-tenancy",
                   "href": "/tenants",
                   "name": "Tenants",
                 },
                 Object {
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Audit logs",
                   "href": "/auditLogging",
                   "name": "Audit logs",
                 },
diff --git a/public/apps/configuration/test/app-router.test.tsx b/public/apps/configuration/test/app-router.test.tsx
index 4bb61888d..ff3ededf0 100644
--- a/public/apps/configuration/test/app-router.test.tsx
+++ b/public/apps/configuration/test/app-router.test.tsx
@@ -35,6 +35,9 @@ describe('SecurityPluginTopNavMenu', () => {
         getNavGroupEnabled: jest.fn().mockReturnValue(false),
       },
     },
+    uiSettings: {
+      get: jest.fn().mockReturnValue(false),
+    },
   };
 
   const securityPluginConfigMock = {
diff --git a/public/apps/configuration/types.ts b/public/apps/configuration/types.ts
index 967072d18..6736d8e12 100644
--- a/public/apps/configuration/types.ts
+++ b/public/apps/configuration/types.ts
@@ -46,6 +46,7 @@ export enum TenantPermissionType {
 export interface RouteItem {
   name: string;
   href: string;
+  breadCrumbDisplayNameWithoutSecurityBase: string;
 }
 
 export interface DataObject<T> {
diff --git a/public/apps/configuration/utils/context-menu.tsx b/public/apps/configuration/utils/context-menu.tsx
index b0a199a89..aea6ae5a8 100644
--- a/public/apps/configuration/utils/context-menu.tsx
+++ b/public/apps/configuration/utils/context-menu.tsx
@@ -27,17 +27,18 @@ import React from 'react';
 export function useContextMenuState(
   buttonText: string,
   buttonProps: EuiButtonProps,
-  children: React.ReactElement[]
+  children: React.ReactElement[],
+  useUpdatedUX?: boolean
 ): [React.ReactElement, () => void] {
   const [isContextMenuOpen, setContextMenuOpen] = useState<boolean>(false);
   const closeContextMenu = () => setContextMenuOpen(false);
 
   const button = (
     <EuiSmallButton
-      iconType="arrowDown"
-      iconSide="right"
+      iconType={useUpdatedUX ? 'plus' : 'arrowDown'}
+      iconSide={useUpdatedUX ? 'left' : 'right'}
       onClick={() => {
-        setContextMenuOpen(true);
+        setContextMenuOpen(!isContextMenuOpen);
       }}
       {...buttonProps}
     >
diff --git a/public/apps/configuration/utils/resource-utils.tsx b/public/apps/configuration/utils/resource-utils.tsx
index ac30e4251..e5d1156ad 100644
--- a/public/apps/configuration/utils/resource-utils.tsx
+++ b/public/apps/configuration/utils/resource-utils.tsx
@@ -13,6 +13,11 @@
  *   permissions and limitations under the License.
  */
 
+import { EuiBreadcrumb } from '@elastic/eui';
+import { ResourceType } from '../../../../common';
+import { buildHashUrl } from './url-builder';
+import { ROUTE_MAP } from '../app-router';
+
 export function generateResourceName(action: string, sourceResourceName: string): string {
   switch (action) {
     case 'edit':
@@ -27,3 +32,49 @@ export function generateResourceName(action: string, sourceResourceName: string)
 export function getResourceUrl(endpoint: string, resourceName: string) {
   return endpoint + '/' + encodeURIComponent(resourceName);
 }
+
+export function getBreadcrumbs(
+  includeSecurityBase: boolean,
+  resourceType?: ResourceType,
+  pageTitle?: string,
+  subAction?: string,
+  count?: number
+): EuiBreadcrumb[] {
+  const breadcrumbs: EuiBreadcrumb[] = includeSecurityBase
+    ? [
+        {
+          text: 'Security',
+          href: buildHashUrl(),
+        },
+      ]
+    : [];
+
+  if (resourceType) {
+    if (includeSecurityBase) {
+      breadcrumbs.push({
+        text: ROUTE_MAP[resourceType].name,
+        href: buildHashUrl(resourceType),
+      });
+    } else {
+      breadcrumbs.push({
+        text: count
+          ? `${ROUTE_MAP[resourceType].breadCrumbDisplayNameWithoutSecurityBase} (${count})`
+          : ROUTE_MAP[resourceType].breadCrumbDisplayNameWithoutSecurityBase,
+        href: buildHashUrl(resourceType),
+      });
+    }
+  }
+
+  if (pageTitle) {
+    breadcrumbs.push({
+      text: pageTitle,
+    });
+  }
+
+  if (subAction) {
+    breadcrumbs.push({
+      text: subAction,
+    });
+  }
+  return breadcrumbs;
+}
diff --git a/public/apps/configuration/utils/test/resource-utils.test.tsx b/public/apps/configuration/utils/test/resource-utils.test.tsx
index ab0dac6b7..b69b899d0 100644
--- a/public/apps/configuration/utils/test/resource-utils.test.tsx
+++ b/public/apps/configuration/utils/test/resource-utils.test.tsx
@@ -13,24 +13,75 @@
  *   permissions and limitations under the License.
  */
 
-import { generateResourceName } from '../resource-utils';
+import { ResourceType } from '../../../../../common';
+import { generateResourceName, getBreadcrumbs } from '../resource-utils';
 
-describe('generateResourceName', () => {
-  it('edit should return same name', () => {
+describe('ResourceUtilsTests', () => {
+  it('generateResourceName edit should return same name', () => {
     const result = generateResourceName('edit', 'user1');
 
     expect(result).toBe('user1');
   });
 
-  it('duplicate should append _copy suffix', () => {
+  it('generateResourceName duplicate should append _copy suffix', () => {
     const result = generateResourceName('duplicate', 'role1');
 
     expect(result).toBe('role1_copy');
   });
 
-  it('other action should return empty string', () => {
+  it('generateResourceName other action should return empty string', () => {
     const result = generateResourceName('create', 'tenant1');
 
     expect(result).toBe('');
   });
+
+  it('getBreadcrumbs with security base should include security breadcrumb', () => {
+    const breadcrumbs = getBreadcrumbs(true);
+    expect(breadcrumbs).toEqual([
+      {
+        href: '#/',
+        text: 'Security',
+      },
+    ]);
+  });
+
+  it('getBreadcrumbs without security base should not include security breadcrumb', () => {
+    const breadcrumbs = getBreadcrumbs(false);
+    expect(breadcrumbs).toEqual([]);
+  });
+
+  it('getBreadcrumbs without security base should use display name', () => {
+    const breadcrumbs = getBreadcrumbs(false, ResourceType.auth);
+    expect(breadcrumbs).toEqual([{ href: '#/auth', text: 'Authentication and authorization' }]);
+  });
+
+  it('getBreadcrumbs with security base should use regular name and have security base', () => {
+    const breadcrumbs = getBreadcrumbs(true, ResourceType.auth);
+    expect(breadcrumbs).toEqual([
+      { href: '#/', text: 'Security' },
+      { href: '#/auth', text: 'Authentication' },
+    ]);
+  });
+
+  it('getBreadcrumbs with title and subactions should include those breadcrumbs', () => {
+    const breadcrumbs = getBreadcrumbs(false, ResourceType.roles, 'Derek', 'Map user');
+    expect(breadcrumbs).toEqual([
+      { href: '#/roles', text: 'Roles' },
+      { text: 'Derek' },
+      { text: 'Map user' },
+    ]);
+  });
+
+  it('getBreadcrumbs should show breadcrumb with count when security base is not included', () => {
+    const breadcrumbs = getBreadcrumbs(false, ResourceType.roles, undefined, undefined, 30);
+    expect(breadcrumbs).toEqual([{ href: '#/roles', text: 'Roles (30)' }]);
+  });
+
+  it('getBreadcrumbs should not show breadcrumb with count when security base is included', () => {
+    const breadcrumbs = getBreadcrumbs(true, ResourceType.roles, undefined, undefined, 30);
+    expect(breadcrumbs).toEqual([
+      { href: '#/', text: 'Security' },
+      { href: '#/roles', text: 'Roles' },
+    ]);
+  });
 });