diff --git a/portal-ui/src/screens/Console/Account/Account.tsx b/portal-ui/src/screens/Console/Account/Account.tsx
index dff3a4ff3..1739fd1b0 100644
--- a/portal-ui/src/screens/Console/Account/Account.tsx
+++ b/portal-ui/src/screens/Console/Account/Account.tsx
@@ -21,7 +21,6 @@ import {
   Button,
   DeleteIcon,
   HelpBox,
-  PageHeader,
   PasswordKeyIcon,
 } from "mds";
 import { useSelector } from "react-redux";
@@ -59,6 +58,7 @@ import makeStyles from "@mui/styles/makeStyles";
 import { selFeatures } from "../consoleSlice";
 import { useAppDispatch } from "../../../store";
 import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const DeleteServiceAccount = withSuspense(
   React.lazy(() => import("./DeleteServiceAccount"))
@@ -203,7 +203,7 @@ const Account = () => {
         open={changePasswordModalOpen}
         closeModal={() => setChangePasswordModalOpen(false)}
       />
-      <PageHeader label="Access Keys" />
+      <PageHeaderWrapper label="Access Keys" />
       <PageLayout>
         <Grid item={true} xs={12} className={classes.actionsTray}>
           <SearchBox
diff --git a/portal-ui/src/screens/Console/Account/AddServiceAccountScreen.tsx b/portal-ui/src/screens/Console/Account/AddServiceAccountScreen.tsx
index 08ade8f0d..cc90b0ce1 100644
--- a/portal-ui/src/screens/Console/Account/AddServiceAccountScreen.tsx
+++ b/portal-ui/src/screens/Console/Account/AddServiceAccountScreen.tsx
@@ -21,7 +21,6 @@ import {
   BackLink,
   Button,
   IAMPoliciesIcon,
-  PageHeader,
   PasswordKeyIcon,
   ServiceAccountCredentialsIcon,
 } from "mds";
@@ -53,6 +52,7 @@ import PanelTitle from "../Common/PanelTitle/PanelTitle";
 
 import { setErrorSnackMessage } from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 interface IAddServiceAccountProps {
   classes: any;
@@ -141,7 +141,7 @@ const AddServiceAccount = ({ classes }: IAddServiceAccountProps) => {
         />
       )}
       <Grid item xs={12}>
-        <PageHeader
+        <PageHeaderWrapper
           label={
             <BackLink
               label={"Access Keys"}
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx
index 484fd888a..581198b41 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx
@@ -28,7 +28,6 @@ import {
   BucketsIcon,
   Button,
   FolderIcon,
-  PageHeader,
   RefreshIcon,
   TrashIcon,
 } from "mds";
@@ -78,6 +77,7 @@ import {
 } from "./bucketDetailsSlice";
 import { useAppDispatch } from "../../../../store";
 import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
+import PageHeaderWrapper from "../../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const DeleteBucket = withSuspense(
   React.lazy(() => import("../ListBuckets/DeleteBucket"))
@@ -205,7 +205,7 @@ const BucketDetails = ({ classes }: IBucketDetailsProps) => {
           }}
         />
       )}
-      <PageHeader
+      <PageHeaderWrapper
         label={
           <BackLink label={"Buckets"} onClick={() => navigate("/buckets")} />
         }
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/AddBucket.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/AddBucket.tsx
index 88bd766df..549be6c4a 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/AddBucket.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/AddBucket.tsx
@@ -19,14 +19,7 @@ import Grid from "@mui/material/Grid";
 import { LinearProgress } from "@mui/material";
 import { Theme } from "@mui/material/styles";
 import { useNavigate } from "react-router-dom";
-import {
-  BackLink,
-  BucketsIcon,
-  Button,
-  HelpBox,
-  InfoIcon,
-  PageHeader,
-} from "mds";
+import { BackLink, BucketsIcon, Button, HelpBox, InfoIcon } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { containerForHeader } from "../../../Common/FormComponents/common/styleLibrary";
@@ -71,6 +64,7 @@ import {
 } from "../../../../../common/SecureComponent/permissions";
 import { hasPermission } from "../../../../../common/SecureComponent";
 import BucketNamingRules from "./BucketNamingRules";
+import PageHeaderWrapper from "../../../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -233,7 +227,7 @@ const AddBucket = ({ classes }: IsetProps) => {
 
   return (
     <Fragment>
-      <PageHeader
+      <PageHeaderWrapper
         label={
           <BackLink label={"Buckets"} onClick={() => navigate("/buckets")} />
         }
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
index c9e13a078..8911bccbf 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
@@ -25,7 +25,6 @@ import {
   HelpBox,
   LifecycleConfigIcon,
   MultipleBucketsIcon,
-  PageHeader,
   RefreshIcon,
   SelectAllIcon,
   SelectMultipleIcon,
@@ -65,6 +64,7 @@ import AutoColorIcon from "../../Common/Components/AutoColorIcon";
 import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
 import AButton from "../../Common/AButton/AButton";
 import { setLoadingObjects } from "../../ObjectBrowser/objectBrowserSlice";
+import PageHeaderWrapper from "../../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -232,7 +232,7 @@ const ListBuckets = ({ classes }: IListBucketsProps) => {
           open={lifecycleModalOpen}
         />
       )}
-      {!obOnly && <PageHeader label={"Buckets"} />}
+      {!obOnly && <PageHeaderWrapper label={"Buckets"} />}
       <PageLayout>
         <Grid item xs={12} className={classes.actionsTray} display="flex">
           {obOnly && (
diff --git a/portal-ui/src/screens/Console/Common/Components/FeatureNotAvailablePage.tsx b/portal-ui/src/screens/Console/Common/Components/FeatureNotAvailablePage.tsx
index d715bd964..45a934fec 100644
--- a/portal-ui/src/screens/Console/Common/Components/FeatureNotAvailablePage.tsx
+++ b/portal-ui/src/screens/Console/Common/Components/FeatureNotAvailablePage.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import FeatureNotAvailable from "./FeatureNotAvailable";
 import PageLayout from "../Layout/PageLayout";
-import { PageHeader } from "mds";
+import PageHeaderWrapper from "../PageHeaderWrapper/PageHeaderWrapper";
 
 const FeatureNotAvailablePage = ({
   pageHeaderText = "",
@@ -16,7 +16,7 @@ const FeatureNotAvailablePage = ({
 }) => {
   return (
     <React.Fragment>
-      <PageHeader label={pageHeaderText} />
+      <PageHeaderWrapper label={pageHeaderText} />
       <PageLayout>
         <FeatureNotAvailable
           iconComponent={icon}
diff --git a/portal-ui/src/screens/Console/Common/ComponentsScreen.tsx b/portal-ui/src/screens/Console/Common/ComponentsScreen.tsx
index 325b7cb60..f44949852 100644
--- a/portal-ui/src/screens/Console/Common/ComponentsScreen.tsx
+++ b/portal-ui/src/screens/Console/Common/ComponentsScreen.tsx
@@ -18,14 +18,15 @@ import React, { Fragment, useState } from "react";
 import { DialogContentText, Grid } from "@mui/material";
 import PageLayout from "./Layout/PageLayout";
 import SectionTitle from "./SectionTitle";
-import { Button, ConfirmDeleteIcon, PageHeader } from "mds";
+import { Button, ConfirmDeleteIcon } from "mds";
 import ConfirmDialog from "./ModalWrapper/ConfirmDialog";
+import PageHeaderWrapper from "./PageHeaderWrapper/PageHeaderWrapper";
 
 const ComponentsScreen = () => {
   const [dialogOpen, setDialogOpen] = useState<boolean>(false);
   return (
     <Fragment>
-      <PageHeader label={"Components"} />
+      <PageHeaderWrapper label={"Components"} />
       <PageLayout>
         <Grid container spacing={1}>
           <Grid item xs={12}>
diff --git a/portal-ui/src/screens/Console/Common/PageHeaderWrapper/PageHeaderWrapper.tsx b/portal-ui/src/screens/Console/Common/PageHeaderWrapper/PageHeaderWrapper.tsx
new file mode 100644
index 000000000..516fa5802
--- /dev/null
+++ b/portal-ui/src/screens/Console/Common/PageHeaderWrapper/PageHeaderWrapper.tsx
@@ -0,0 +1,46 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2021 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Fragment } from "react";
+import { PageHeader } from "mds";
+import ObjectManagerButton from "../ObjectManager/ObjectManagerButton";
+
+interface IPageHeaderWrapper {
+  label: React.ReactNode;
+  middleComponent?: React.ReactNode;
+  actions?: React.ReactNode;
+}
+
+const PageHeaderWrapper = ({
+  label,
+  actions,
+  middleComponent,
+}: IPageHeaderWrapper) => {
+  return (
+    <PageHeader
+      label={label}
+      actions={
+        <Fragment>
+          {actions}
+          <ObjectManagerButton />
+        </Fragment>
+      }
+      middleComponent={middleComponent}
+    />
+  );
+};
+
+export default PageHeaderWrapper;
diff --git a/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationOptions.tsx b/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationOptions.tsx
index 131d96f7d..5e7005f8f 100644
--- a/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationOptions.tsx
+++ b/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationOptions.tsx
@@ -26,13 +26,14 @@ import {
   containerForHeader,
   searchField,
 } from "../../Common/FormComponents/common/styleLibrary";
-import { HelpBox, PageHeader, SettingsIcon } from "mds";
+import { HelpBox, SettingsIcon } from "mds";
 import { Link, Navigate, Route, Routes, useLocation } from "react-router-dom";
 import VerticalTabs from "../../Common/VerticalTabs/VerticalTabs";
 import PageLayout from "../../Common/Layout/PageLayout";
 import ScreenTitle from "../../Common/ScreenTitle/ScreenTitle";
 import ConfigurationForm from "./ConfigurationForm";
 import { IAM_PAGES } from "../../../../common/SecureComponent/permissions";
+import PageHeaderWrapper from "../../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 interface IConfigurationOptions {
   classes: any;
@@ -66,7 +67,7 @@ const ConfigurationOptions = ({ classes }: IConfigurationOptions) => {
 
   return (
     <Fragment>
-      <PageHeader label={"Settings"} />
+      <PageHeaderWrapper label={"Settings"} />
 
       <PageLayout>
         <Grid item xs={12}>
diff --git a/portal-ui/src/screens/Console/Configurations/SiteReplication/AddReplicationSites.tsx b/portal-ui/src/screens/Console/Configurations/SiteReplication/AddReplicationSites.tsx
index e7ca1e4cc..4e9d6449c 100644
--- a/portal-ui/src/screens/Console/Configurations/SiteReplication/AddReplicationSites.tsx
+++ b/portal-ui/src/screens/Console/Configurations/SiteReplication/AddReplicationSites.tsx
@@ -18,7 +18,7 @@ import React, { Fragment, useEffect, useState } from "react";
 import Grid from "@mui/material/Grid";
 import { Box, LinearProgress } from "@mui/material";
 import { useNavigate } from "react-router-dom";
-import { BackLink, Button, ClustersIcon, HelpBox, PageHeader } from "mds";
+import { BackLink, Button, ClustersIcon, HelpBox } from "mds";
 import useApi from "../../Common/Hooks/useApi";
 import { IAM_PAGES } from "../../../../common/SecureComponent/permissions";
 import PageLayout from "../../Common/Layout/PageLayout";
@@ -32,6 +32,7 @@ import { useSelector } from "react-redux";
 import { selSession } from "../../consoleSlice";
 import SRSiteInputRow from "./SRSiteInputRow";
 import { SiteInputRow } from "./Types";
+import PageHeaderWrapper from "../../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const isValidEndPoint = (ep: string) => {
   let isValidEndPointUrl = false;
@@ -392,7 +393,7 @@ const AddReplicationSites = () => {
 
   return (
     <Fragment>
-      <PageHeader
+      <PageHeaderWrapper
         label={
           <BackLink
             label={"Add Replication Site"}
diff --git a/portal-ui/src/screens/Console/Configurations/SiteReplication/SiteReplication.tsx b/portal-ui/src/screens/Console/Configurations/SiteReplication/SiteReplication.tsx
index 1027ac798..143326ca0 100644
--- a/portal-ui/src/screens/Console/Configurations/SiteReplication/SiteReplication.tsx
+++ b/portal-ui/src/screens/Console/Configurations/SiteReplication/SiteReplication.tsx
@@ -28,7 +28,6 @@ import {
   ConfirmDeleteIcon,
   HelpBox,
   Loader,
-  PageHeader,
   RecoverIcon,
   TrashIcon,
 } from "mds";
@@ -42,6 +41,7 @@ import {
 import AButton from "../../Common/AButton/AButton";
 import { useAppDispatch } from "../../../../store";
 import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
+import PageHeaderWrapper from "../../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 export type ReplicationSite = {
   deploymentID: string;
@@ -112,7 +112,7 @@ const SiteReplication = () => {
 
   return (
     <Fragment>
-      <PageHeader label={"Site Replication"} />
+      <PageHeaderWrapper label={"Site Replication"} />
       <PageLayout>
         <Box
           sx={{
diff --git a/portal-ui/src/screens/Console/Configurations/SiteReplication/SiteReplicationStatus.tsx b/portal-ui/src/screens/Console/Configurations/SiteReplication/SiteReplicationStatus.tsx
index 7079afce1..3497dd98a 100644
--- a/portal-ui/src/screens/Console/Configurations/SiteReplication/SiteReplicationStatus.tsx
+++ b/portal-ui/src/screens/Console/Configurations/SiteReplication/SiteReplicationStatus.tsx
@@ -23,7 +23,6 @@ import {
   GroupsIcon,
   IAMPoliciesIcon,
   Loader,
-  PageHeader,
   RefreshIcon,
   UsersIcon,
 } from "mds";
@@ -36,6 +35,7 @@ import StatusCountCard from "../../Dashboard/BasicDashboard/StatusCountCard";
 import EntityReplicationLookup from "./EntityReplicationLookup";
 import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
 import { useNavigate } from "react-router-dom";
+import PageHeaderWrapper from "../../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 export type StatsResponseType = {
   maxBuckets?: number;
@@ -120,7 +120,7 @@ const SiteReplicationStatus = () => {
 
   return (
     <Fragment>
-      <PageHeader
+      <PageHeaderWrapper
         label={
           <BackLink
             label={"Site Replication"}
diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx
index 49cb605f8..0f5d4fd10 100644
--- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx
+++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx
@@ -20,7 +20,7 @@ import { useNavigate, useParams } from "react-router-dom";
 import get from "lodash/get";
 import Grid from "@mui/material/Grid";
 import { Theme } from "@mui/material/styles";
-import { BackLink, Button, PageHeader } from "mds";
+import { BackLink, Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { Box } from "@mui/material";
@@ -48,6 +48,7 @@ import { IAM_PAGES } from "../../../../common/SecureComponent/permissions";
 import RegionSelectWrapper from "./RegionSelectWrapper";
 import { setErrorSnackMessage } from "../../../../systemSlice";
 import { useAppDispatch } from "../../../../store";
+import PageHeaderWrapper from "../../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -311,7 +312,7 @@ const AddTierConfiguration = ({ classes }: IAddNotificationEndpointProps) => {
 
   return (
     <Fragment>
-      <PageHeader
+      <PageHeaderWrapper
         label={
           <Fragment>
             <BackLink
diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx
index 504de37de..5f2892a9f 100644
--- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx
+++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx
@@ -25,7 +25,6 @@ import {
   AddIcon,
   Button,
   HelpBox,
-  PageHeader,
   RefreshIcon,
   TierOfflineIcon,
   TierOnlineIcon,
@@ -67,6 +66,7 @@ import { selDistSet, setErrorSnackMessage } from "../../../../systemSlice";
 import { useNavigate } from "react-router-dom";
 import { useAppDispatch } from "../../../../store";
 import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
+import PageHeaderWrapper from "../../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const UpdateTierCredentialsModal = withSuspense(
   React.lazy(() => import("./UpdateTierCredentialsModal"))
@@ -311,7 +311,7 @@ const ListTiersConfiguration = ({ classes }: IListTiersConfig) => {
           closeModalAndRefresh={closeTierCredentials}
         />
       )}
-      <PageHeader label="Tiers" />
+      <PageHeaderWrapper label="Tiers" />
       <PageLayout>
         {!distributedSetup ? (
           <DistributedOnly
diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx
index 5d394788a..66c22b702 100644
--- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx
+++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx
@@ -21,8 +21,9 @@ import { tierTypes } from "./utils";
 import { IAM_PAGES } from "../../../../common/SecureComponent/permissions";
 import PageLayout from "../../Common/Layout/PageLayout";
 import TierTypeCard from "./TierTypeCard";
-import { BackLink, HelpBox, PageHeader, TiersIcon } from "mds";
+import { BackLink, HelpBox, TiersIcon } from "mds";
 import FormLayout from "../../Common/FormLayout";
+import PageHeaderWrapper from "../../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const TierTypeSelector = () => {
   const navigate = useNavigate();
@@ -33,7 +34,7 @@ const TierTypeSelector = () => {
 
   return (
     <Fragment>
-      <PageHeader
+      <PageHeaderWrapper
         label={
           <Fragment>
             <BackLink
diff --git a/portal-ui/src/screens/Console/Dashboard/Dashboard.tsx b/portal-ui/src/screens/Console/Dashboard/Dashboard.tsx
index b41280060..33199c76b 100644
--- a/portal-ui/src/screens/Console/Dashboard/Dashboard.tsx
+++ b/portal-ui/src/screens/Console/Dashboard/Dashboard.tsx
@@ -25,7 +25,7 @@ import { LinearProgress } from "@mui/material";
 import { AppState, useAppDispatch } from "../../../store";
 import { getUsageAsync } from "./dashboardThunks";
 import { useSelector } from "react-redux";
-import { PageHeader } from "mds";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 interface IDashboardSimple {
   classes: any;
@@ -51,7 +51,7 @@ const Dashboard = ({ classes }: IDashboardSimple) => {
 
   return (
     <Fragment>
-      <PageHeader label="Metrics" />
+      <PageHeaderWrapper label="Metrics" />
       {loading ? (
         <Grid container>
           <Grid item xs={12} className={classes.container}>
diff --git a/portal-ui/src/screens/Console/DirectPV/DirectPVDrives.tsx b/portal-ui/src/screens/Console/DirectPV/DirectPVDrives.tsx
index 22325044d..b4f1717e8 100644
--- a/portal-ui/src/screens/Console/DirectPV/DirectPVDrives.tsx
+++ b/portal-ui/src/screens/Console/DirectPV/DirectPVDrives.tsx
@@ -20,7 +20,6 @@ import {
   AddIcon,
   Button,
   HelpBox,
-  PageHeader,
   RefreshIcon,
   SearchIcon,
   StorageIcon,
@@ -47,6 +46,7 @@ import TableWrapper from "../Common/TableWrapper/TableWrapper";
 
 import withSuspense from "../Common/Components/withSuspense";
 import PageLayout from "../Common/Layout/PageLayout";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const FormatDrives = withSuspense(React.lazy(() => import("./FormatDrives")));
 const FormatErrorsResult = withSuspense(
@@ -223,7 +223,7 @@ const DirectPVMain = ({ classes }: IDirectPVMain) => {
           }}
         />
       )}
-      <PageHeader label="Local Drives" />
+      <PageHeaderWrapper label="Local Drives" />
       <PageLayout>
         <Grid item xs={12} className={classes.actionsTray}>
           <TextField
diff --git a/portal-ui/src/screens/Console/DirectPV/DirectPVVolumes.tsx b/portal-ui/src/screens/Console/DirectPV/DirectPVVolumes.tsx
index 2b38a9d5a..b36749115 100644
--- a/portal-ui/src/screens/Console/DirectPV/DirectPVVolumes.tsx
+++ b/portal-ui/src/screens/Console/DirectPV/DirectPVVolumes.tsx
@@ -33,8 +33,9 @@ import { ErrorResponseHandler } from "../../../common/types";
 import { setErrorSnackMessage } from "../../../systemSlice";
 import api from "../../../common/api";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
-import { PageHeader, SearchIcon } from "mds";
+import { SearchIcon } from "mds";
 import PageLayout from "../Common/Layout/PageLayout";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 interface IDirectPVVolumesProps {
   classes: any;
@@ -100,7 +101,7 @@ const DirectPVVolumes = ({ classes }: IDirectPVVolumesProps) => {
 
   return (
     <Fragment>
-      <PageHeader label="Volumes" />
+      <PageHeaderWrapper label="Volumes" />
       <PageLayout>
         <Grid item xs={12} className={classes.actionsTray}>
           <TextField
diff --git a/portal-ui/src/screens/Console/EventDestinations/AddEventDestination.tsx b/portal-ui/src/screens/Console/EventDestinations/AddEventDestination.tsx
index be8a6cfd5..8915aa6d7 100644
--- a/portal-ui/src/screens/Console/EventDestinations/AddEventDestination.tsx
+++ b/portal-ui/src/screens/Console/EventDestinations/AddEventDestination.tsx
@@ -21,7 +21,7 @@ import Grid from "@mui/material/Grid";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { BackLink, Button, PageHeader } from "mds";
+import { BackLink, Button } from "mds";
 
 import api from "../../../common/api";
 import {
@@ -49,6 +49,7 @@ import {
 } from "../../../systemSlice";
 import { useNavigate, useParams } from "react-router-dom";
 import { useAppDispatch } from "../../../store";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const ConfMySql = withSuspense(
   React.lazy(() => import("./CustomForms/ConfMySql"))
@@ -181,7 +182,7 @@ const AddEventDestination = ({
 
   return (
     <Fragment>
-      <PageHeader
+      <PageHeaderWrapper
         label={
           <Fragment>
             <BackLink
diff --git a/portal-ui/src/screens/Console/EventDestinations/EventDestinations.tsx b/portal-ui/src/screens/Console/EventDestinations/EventDestinations.tsx
index 03154f906..af81af6ae 100644
--- a/portal-ui/src/screens/Console/EventDestinations/EventDestinations.tsx
+++ b/portal-ui/src/screens/Console/EventDestinations/EventDestinations.tsx
@@ -14,10 +14,10 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import { PageHeader } from "mds";
 import React, { Fragment } from "react";
 
 import withSuspense from "../Common/Components/withSuspense";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const ListNotificationEndpoints = withSuspense(
   React.lazy(() => import("./ListEventDestinations"))
@@ -26,7 +26,7 @@ const ListNotificationEndpoints = withSuspense(
 const EventDestinations = () => {
   return (
     <Fragment>
-      <PageHeader label="Event Destinations" />
+      <PageHeaderWrapper label="Event Destinations" />
       <ListNotificationEndpoints />
     </Fragment>
   );
diff --git a/portal-ui/src/screens/Console/EventDestinations/EventTypeSelector.tsx b/portal-ui/src/screens/Console/EventDestinations/EventTypeSelector.tsx
index ce6bd5cdd..c6ea279d1 100644
--- a/portal-ui/src/screens/Console/EventDestinations/EventTypeSelector.tsx
+++ b/portal-ui/src/screens/Console/EventDestinations/EventTypeSelector.tsx
@@ -28,7 +28,8 @@ import PageLayout from "../Common/Layout/PageLayout";
 import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
 import { Box } from "@mui/material";
 import NotificationEndpointTypeSelectorHelpBox from "../Account/NotificationEndpointTypeSelectorHelpBox";
-import { BackLink, PageHeader } from "mds";
+import { BackLink } from "mds";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 interface INotificationTypeSelector {
   classes: any;
@@ -55,7 +56,7 @@ const EventTypeSelector = ({ classes }: INotificationTypeSelector) => {
   const navigate = useNavigate();
   return (
     <Fragment>
-      <PageHeader
+      <PageHeaderWrapper
         label={
           <Fragment>
             <BackLink
diff --git a/portal-ui/src/screens/Console/Groups/AddGroupScreen.tsx b/portal-ui/src/screens/Console/Groups/AddGroupScreen.tsx
index 16c7d0f5b..047c3119d 100644
--- a/portal-ui/src/screens/Console/Groups/AddGroupScreen.tsx
+++ b/portal-ui/src/screens/Console/Groups/AddGroupScreen.tsx
@@ -25,7 +25,7 @@ import {
 } from "../Common/FormComponents/common/styleLibrary";
 import Grid from "@mui/material/Grid";
 import { LinearProgress } from "@mui/material";
-import { BackLink, Button, CreateGroupIcon, PageHeader } from "mds";
+import { BackLink, Button, CreateGroupIcon } from "mds";
 import PageLayout from "../Common/Layout/PageLayout";
 import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import AddGroupHelpBox from "./AddGroupHelpBox";
@@ -37,6 +37,7 @@ import api from "../../../../src/common/api";
 import FormLayout from "../Common/FormLayout";
 import { setErrorSnackMessage } from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 interface IAddGroupProps {
   classes: any;
@@ -97,7 +98,7 @@ const AddGroupScreen = ({ classes }: IAddGroupProps) => {
   return (
     <Fragment>
       <Grid item xs={12}>
-        <PageHeader
+        <PageHeaderWrapper
           label={
             <BackLink
               label={"Groups"}
diff --git a/portal-ui/src/screens/Console/Groups/GroupDetailsHeader.tsx b/portal-ui/src/screens/Console/Groups/GroupDetailsHeader.tsx
index 367f7902e..d9e5279a2 100644
--- a/portal-ui/src/screens/Console/Groups/GroupDetailsHeader.tsx
+++ b/portal-ui/src/screens/Console/Groups/GroupDetailsHeader.tsx
@@ -1,12 +1,13 @@
 import React, { Fragment } from "react";
 import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
-import { BackLink, PageHeader } from "mds";
+import { BackLink } from "mds";
 import { useNavigate } from "react-router-dom";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const GroupDetailsHeader = () => {
   const navigate = useNavigate();
   return (
-    <PageHeader
+    <PageHeaderWrapper
       label={
         <Fragment>
           <BackLink
diff --git a/portal-ui/src/screens/Console/Groups/Groups.tsx b/portal-ui/src/screens/Console/Groups/Groups.tsx
index e79d480ea..fd9792783 100644
--- a/portal-ui/src/screens/Console/Groups/Groups.tsx
+++ b/portal-ui/src/screens/Console/Groups/Groups.tsx
@@ -24,7 +24,6 @@ import {
   GroupsIcon,
   HelpBox,
   IAMPoliciesIcon,
-  PageHeader,
   UsersIcon,
 } from "mds";
 import createStyles from "@mui/styles/createStyles";
@@ -68,6 +67,7 @@ import { encodeURLString } from "../../../common/utils";
 import { setErrorSnackMessage } from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
 import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const DeleteGroup = withSuspense(React.lazy(() => import("./DeleteGroup")));
 const SetPolicy = withSuspense(
@@ -222,7 +222,7 @@ const Groups = ({ classes }: IGroupsProps) => {
           }}
         />
       )}
-      <PageHeader label={"Groups"} />
+      <PageHeaderWrapper label={"Groups"} />
 
       <PageLayout>
         <Grid item xs={12} className={classes.actionsTray}>
diff --git a/portal-ui/src/screens/Console/Heal/Heal.tsx b/portal-ui/src/screens/Console/Heal/Heal.tsx
index f4b54e8b4..233de0230 100644
--- a/portal-ui/src/screens/Console/Heal/Heal.tsx
+++ b/portal-ui/src/screens/Console/Heal/Heal.tsx
@@ -27,7 +27,7 @@ import {
 } from "@mui/material";
 import { IMessageEvent, w3cwebsocket as W3CWebSocket } from "websocket";
 import { Theme } from "@mui/material/styles";
-import { Button, HealIcon, PageHeader } from "mds";
+import { Button, HealIcon } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { wsProtocol } from "../../../utils/wsUtils";
@@ -52,6 +52,7 @@ import { SecureComponent } from "../../../common/SecureComponent";
 import DistributedOnly from "../Common/DistributedOnly/DistributedOnly";
 import { selDistSet } from "../../../systemSlice";
 import makeStyles from "@mui/styles/makeStyles";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -252,7 +253,7 @@ const Heal = () => {
 
   return (
     <Fragment>
-      <PageHeader label="Drives" />
+      <PageHeaderWrapper label="Drives" />
       <PageLayout>
         {!distributedSetup ? (
           <DistributedOnly entity={"Heal"} iconComponent={<HealIcon />} />
diff --git a/portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx b/portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx
index af713c92b..060130a50 100644
--- a/portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx
+++ b/portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx
@@ -23,7 +23,7 @@ import {
 import { AppState, useAppDispatch } from "../../../store";
 import { useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
-import { Button, HelpBox, Loader, PageHeader, WarnIcon } from "mds";
+import { Button, HelpBox, Loader, WarnIcon } from "mds";
 import {
   DiagStatError,
   DiagStatInProgress,
@@ -55,6 +55,7 @@ import {
 } from "./healthInfoSlice";
 import RegisterCluster from "../Support/RegisterCluster";
 import { registeredCluster } from "../../../config";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -261,7 +262,7 @@ const HealthInfo = ({ classes }: IHealthInfo) => {
 
   return (
     <Fragment>
-      <PageHeader label="Health" />
+      <PageHeaderWrapper label="Health" />
       <PageLayout>
         {!clusterRegistered && <RegisterCluster compactMode />}
         <Grid item xs={12} className={classes.boxy}>
diff --git a/portal-ui/src/screens/Console/IDP/AddIDPConfiguration.tsx b/portal-ui/src/screens/Console/IDP/AddIDPConfiguration.tsx
index 4c1fc8d1f..da0a6e46d 100644
--- a/portal-ui/src/screens/Console/IDP/AddIDPConfiguration.tsx
+++ b/portal-ui/src/screens/Console/IDP/AddIDPConfiguration.tsx
@@ -25,7 +25,7 @@ import {
   modalBasic,
 } from "../Common/FormComponents/common/styleLibrary";
 import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
-import { BackLink, Button, PageHeader } from "mds";
+import { BackLink, Button } from "mds";
 import { useNavigate } from "react-router-dom";
 import { ErrorResponseHandler } from "../../../common/types";
 import { useAppDispatch } from "../../../store";
@@ -37,6 +37,7 @@ import useApi from "../Common/Hooks/useApi";
 import PageLayout from "../Common/Layout/PageLayout";
 import SectionTitle from "../Common/SectionTitle";
 import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 type AddIDPConfigurationProps = {
   classes?: any;
@@ -166,7 +167,7 @@ const AddIDPConfiguration = ({
 
   return (
     <Grid item xs={12}>
-      <PageHeader
+      <PageHeaderWrapper
         label={<BackLink onClick={() => navigate(backLink)} label={header} />}
       />
       <PageLayout>
diff --git a/portal-ui/src/screens/Console/IDP/IDPConfigurationDetails.tsx b/portal-ui/src/screens/Console/IDP/IDPConfigurationDetails.tsx
index 9c5c8be31..0950c0bd5 100644
--- a/portal-ui/src/screens/Console/IDP/IDPConfigurationDetails.tsx
+++ b/portal-ui/src/screens/Console/IDP/IDPConfigurationDetails.tsx
@@ -27,14 +27,7 @@ import {
   pageContentStyles,
   searchField,
 } from "../Common/FormComponents/common/styleLibrary";
-import {
-  BackLink,
-  Button,
-  EditIcon,
-  PageHeader,
-  RefreshIcon,
-  TrashIcon,
-} from "mds";
+import { BackLink, Button, EditIcon, RefreshIcon, TrashIcon } from "mds";
 import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import { useNavigate, useParams } from "react-router-dom";
 import { ErrorResponseHandler } from "../../../common/types";
@@ -50,6 +43,7 @@ import ScreenTitle from "../Common/ScreenTitle/ScreenTitle";
 import DeleteIDPConfigurationModal from "./DeleteIDPConfigurationModal";
 import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import LabelValuePair from "../Common/UsageBarWrapper/LabelValuePair";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 type IDPConfigurationDetailsProps = {
   classes?: any;
@@ -374,7 +368,7 @@ const IDPConfigurationDetails = ({
           closeDeleteModalAndRefresh={closeDeleteModalAndRefresh}
         />
       )}
-      <PageHeader
+      <PageHeaderWrapper
         label={<BackLink onClick={() => navigate(backLink)} label={header} />}
       />
       <PageLayout className={classes.pageContainer}>
diff --git a/portal-ui/src/screens/Console/IDP/IDPConfigurations.tsx b/portal-ui/src/screens/Console/IDP/IDPConfigurations.tsx
index 1b4308980..9f073eb18 100644
--- a/portal-ui/src/screens/Console/IDP/IDPConfigurations.tsx
+++ b/portal-ui/src/screens/Console/IDP/IDPConfigurations.tsx
@@ -36,9 +36,10 @@ import PageLayout from "../Common/Layout/PageLayout";
 import { containerForHeader } from "../Common/FormComponents/common/styleLibrary";
 import { Grid } from "@mui/material";
 import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
-import { AddIcon, Button, PageHeader, RefreshIcon } from "mds";
+import { AddIcon, Button, RefreshIcon } from "mds";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
 import DeleteIDPConfigurationModal from "./DeleteIDPConfigurationModal";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 type IDPConfigurationsProps = {
   classes?: any;
@@ -147,7 +148,7 @@ const IDPConfigurations = ({ classes, idpType }: IDPConfigurationsProps) => {
           closeDeleteModalAndRefresh={closeDeleteModalAndRefresh}
         />
       )}
-      <PageHeader label={`${idpType.toUpperCase()} Configurations`} />
+      <PageHeaderWrapper label={`${idpType.toUpperCase()} Configurations`} />
       <PageLayout className={classes.pageContainer}>
         <Grid container spacing={1}>
           <Grid
diff --git a/portal-ui/src/screens/Console/KMS/AddKey.tsx b/portal-ui/src/screens/Console/KMS/AddKey.tsx
index 4753ef052..eaad25379 100644
--- a/portal-ui/src/screens/Console/KMS/AddKey.tsx
+++ b/portal-ui/src/screens/Console/KMS/AddKey.tsx
@@ -23,7 +23,8 @@ import { setErrorSnackMessage } from "../../../systemSlice";
 import { useNavigate } from "react-router-dom";
 import { useAppDispatch } from "../../../store";
 import AddKeyForm from "./AddKeyForm";
-import { BackLink, PageHeader } from "mds";
+import { BackLink } from "mds";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const AddKey = () => {
   const dispatch = useAppDispatch();
@@ -37,7 +38,7 @@ const AddKey = () => {
   return (
     <Fragment>
       <Grid item xs={12}>
-        <PageHeader
+        <PageHeaderWrapper
           label={
             <BackLink
               label={"Keys"}
diff --git a/portal-ui/src/screens/Console/KMS/ImportKey.tsx b/portal-ui/src/screens/Console/KMS/ImportKey.tsx
index 77e3e8874..50a3a9ed6 100644
--- a/portal-ui/src/screens/Console/KMS/ImportKey.tsx
+++ b/portal-ui/src/screens/Console/KMS/ImportKey.tsx
@@ -18,7 +18,7 @@ import React, { Fragment, useState } from "react";
 import { Box } from "@mui/material";
 
 import Grid from "@mui/material/Grid";
-import { AddAccessRuleIcon, BackLink, Button, PageHeader } from "mds";
+import { AddAccessRuleIcon, BackLink, Button } from "mds";
 import PageLayout from "../Common/Layout/PageLayout";
 import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
@@ -30,6 +30,7 @@ import { useAppDispatch } from "../../../store";
 import useApi from "../Common/Hooks/useApi";
 import KMSHelpBox from "./KMSHelpbox";
 import CodeMirrorWrapper from "../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 export const emptyContent = '{\n    "bytes": ""\n}';
 
@@ -68,7 +69,7 @@ const ImportKey = () => {
   return (
     <Fragment>
       <Grid item xs={12}>
-        <PageHeader
+        <PageHeaderWrapper
           label={
             <BackLink
               onClick={() => navigate(IAM_PAGES.KMS_KEYS)}
diff --git a/portal-ui/src/screens/Console/KMS/ListKeys.tsx b/portal-ui/src/screens/Console/KMS/ListKeys.tsx
index 647dc7d74..f47e3affc 100644
--- a/portal-ui/src/screens/Console/KMS/ListKeys.tsx
+++ b/portal-ui/src/screens/Console/KMS/ListKeys.tsx
@@ -16,7 +16,7 @@
 
 import { Grid, Theme } from "@mui/material";
 import { createStyles, withStyles } from "@mui/styles";
-import { AddIcon, Button, PageHeader, RefreshIcon, UploadIcon } from "mds";
+import { AddIcon, Button, RefreshIcon, UploadIcon } from "mds";
 import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import api from "../../../common/api";
@@ -41,6 +41,7 @@ import PageLayout from "../Common/Layout/PageLayout";
 import SearchBox from "../Common/SearchBox";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
 import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const DeleteKMSModal = withSuspense(
   React.lazy(() => import("./DeleteKMSModal"))
@@ -139,7 +140,7 @@ const ListKeys = ({ classes }: IKeysProps) => {
           closeDeleteModalAndRefresh={closeDeleteModalAndRefresh}
         />
       )}
-      <PageHeader label="Key Management Service Keys" />
+      <PageHeaderWrapper label="Key Management Service Keys" />
       <PageLayout className={classes.pageContainer}>
         <Grid container spacing={1}>
           <Grid
diff --git a/portal-ui/src/screens/Console/KMS/Status.tsx b/portal-ui/src/screens/Console/KMS/Status.tsx
index bc7521d2f..729757cc1 100644
--- a/portal-ui/src/screens/Console/KMS/Status.tsx
+++ b/portal-ui/src/screens/Console/KMS/Status.tsx
@@ -46,7 +46,8 @@ import {
   XAxis,
   YAxis,
 } from "recharts";
-import { DisabledIcon, EnabledIcon, PageHeader } from "mds";
+import { DisabledIcon, EnabledIcon } from "mds";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const Status = () => {
   const dispatch = useAppDispatch();
@@ -350,7 +351,10 @@ const Status = () => {
 
   return (
     <Fragment>
-      <PageHeader label="Key Management Service" actions={<React.Fragment />} />
+      <PageHeaderWrapper
+        label="Key Management Service"
+        actions={<React.Fragment />}
+      />
 
       <PageLayout>
         <Tabs
diff --git a/portal-ui/src/screens/Console/License/License.tsx b/portal-ui/src/screens/Console/License/License.tsx
index 54ba4f38d..2fe4e3a97 100644
--- a/portal-ui/src/screens/Console/License/License.tsx
+++ b/portal-ui/src/screens/Console/License/License.tsx
@@ -20,7 +20,7 @@ import { LinearProgress } from "@mui/material";
 import Grid from "@mui/material/Grid";
 import { SubnetInfo } from "./types";
 import api from "../../../common/api";
-import { ArrowIcon, Button, PageHeader } from "mds";
+import { ArrowIcon, Button } from "mds";
 import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
 import LicensePlans from "./LicensePlans";
 import { useNavigate } from "react-router-dom";
@@ -29,6 +29,7 @@ import RegistrationStatusBanner from "../Support/RegistrationStatusBanner";
 import { selOpMode } from "../../../systemSlice";
 import withSuspense from "../Common/Components/withSuspense";
 import { getLicenseConsent } from "./utils";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const LicenseConsentModal = withSuspense(
   React.lazy(() => import("./LicenseConsentModal"))
@@ -118,7 +119,7 @@ const License = () => {
 
   return (
     <Fragment>
-      <PageHeader
+      <PageHeaderWrapper
         label="MinIO License and Support plans"
         actions={
           <Fragment>
diff --git a/portal-ui/src/screens/Console/Logs/ErrorLogs/ErrorLogs.tsx b/portal-ui/src/screens/Console/Logs/ErrorLogs/ErrorLogs.tsx
index 35c87bcf6..852261a26 100644
--- a/portal-ui/src/screens/Console/Logs/ErrorLogs/ErrorLogs.tsx
+++ b/portal-ui/src/screens/Console/Logs/ErrorLogs/ErrorLogs.tsx
@@ -16,7 +16,7 @@
 import React, { Fragment, useEffect, useState } from "react";
 import { IMessageEvent, w3cwebsocket as W3CWebSocket } from "websocket";
 import { Theme } from "@mui/material/styles";
-import { Button, PageHeader } from "mds";
+import { Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { useSelector } from "react-redux";
@@ -47,6 +47,7 @@ import {
   setLogsStarted,
 } from "../logsSlice";
 import makeStyles from "@mui/styles/makeStyles";
+import PageHeaderWrapper from "../../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -240,7 +241,7 @@ const ErrorLogs = () => {
 
   return (
     <Fragment>
-      <PageHeader label="Logs" />
+      <PageHeaderWrapper label="Logs" />
       <PageLayout>
         <Grid container spacing={1}>
           <Grid item xs={4}>
diff --git a/portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx b/portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx
index cec6fe221..116172c76 100644
--- a/portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx
+++ b/portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx
@@ -16,9 +16,10 @@
 
 import React, { Fragment, useCallback, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
-import { Button, PageHeader, SearchIcon } from "mds";
+import { Button, SearchIcon } from "mds";
 import { Theme } from "@mui/material/styles";
 import { Grid } from "@mui/material";
+import { DateTime } from "luxon";
 import get from "lodash/get";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
@@ -47,7 +48,7 @@ import MissingIntegration from "../../Common/MissingIntegration/MissingIntegrati
 import { setErrorSnackMessage } from "../../../../systemSlice";
 import { selFeatures } from "../../consoleSlice";
 import { useAppDispatch } from "../../../../store";
-import { DateTime } from "luxon";
+import PageHeaderWrapper from "../../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 interface ILogSearchProps {
   classes: any;
@@ -285,7 +286,7 @@ const LogsSearchMain = ({ classes }: ILogSearchProps) => {
         />
       )}
 
-      <PageHeader label="Audit Logs" />
+      <PageHeaderWrapper label="Audit Logs" />
       <PageLayout>
         {!logSearchEnabled ? (
           <MissingIntegration
diff --git a/portal-ui/src/screens/Console/Marketplace/Marketplace.tsx b/portal-ui/src/screens/Console/Marketplace/Marketplace.tsx
index 2e3b71142..68e6b0988 100644
--- a/portal-ui/src/screens/Console/Marketplace/Marketplace.tsx
+++ b/portal-ui/src/screens/Console/Marketplace/Marketplace.tsx
@@ -23,7 +23,7 @@ import { Navigate, useNavigate } from "react-router-dom";
 import { resourcesConfigurations } from "../Tenants/AddTenant/Steps/TenantResources/utils";
 import { selShowMarketplace, showMarketplace } from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
-import { PageHeader } from "mds";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const Marketplace = () => {
   const dispatch = useAppDispatch();
@@ -69,7 +69,7 @@ const Marketplace = () => {
   if (features) {
     return (
       <Fragment>
-        <PageHeader label="Operator Marketplace" />
+        <PageHeaderWrapper label="Operator Marketplace" />
         <PageLayout>
           <SetEmailModal open={true} closeModal={closeModal} />
         </PageLayout>
diff --git a/portal-ui/src/screens/Console/ObjectBrowser/OBBucketList.tsx b/portal-ui/src/screens/Console/ObjectBrowser/OBBucketList.tsx
index 1e464438d..f2867d31b 100644
--- a/portal-ui/src/screens/Console/ObjectBrowser/OBBucketList.tsx
+++ b/portal-ui/src/screens/Console/ObjectBrowser/OBBucketList.tsx
@@ -18,7 +18,7 @@ import React, { Fragment, useEffect, useState } from "react";
 
 import { useNavigate } from "react-router-dom";
 import { Theme } from "@mui/material/styles";
-import { BucketsIcon, Button, HelpBox, PageHeader, RefreshIcon } from "mds";
+import { BucketsIcon, Button, HelpBox, RefreshIcon } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import { LinearProgress } from "@mui/material";
 import Grid from "@mui/material/Grid";
@@ -52,6 +52,7 @@ import { setLoadingObjects } from "../ObjectBrowser/objectBrowserSlice";
 import makeStyles from "@mui/styles/makeStyles";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
 import { niceBytesInt } from "../../../common/utils";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -132,7 +133,7 @@ const OBListBuckets = () => {
 
   return (
     <Fragment>
-      {!obOnly && <PageHeader label={"Object Browser"} />}
+      {!obOnly && <PageHeaderWrapper label={"Object Browser"} />}
       <PageLayout>
         <Grid item xs={12} className={classes.actionsTray} display="flex">
           {obOnly && (
diff --git a/portal-ui/src/screens/Console/ObjectBrowser/OBHeader.tsx b/portal-ui/src/screens/Console/ObjectBrowser/OBHeader.tsx
index 28395159e..b489bce2d 100644
--- a/portal-ui/src/screens/Console/ObjectBrowser/OBHeader.tsx
+++ b/portal-ui/src/screens/Console/ObjectBrowser/OBHeader.tsx
@@ -23,7 +23,7 @@ import {
 } from "../../../common/SecureComponent/permissions";
 import { SecureComponent } from "../../../common/SecureComponent";
 import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
-import { BackLink, Button, PageHeader, SettingsIcon } from "mds";
+import { BackLink, Button, SettingsIcon } from "mds";
 import { Grid } from "@mui/material";
 import AutoColorIcon from "../Common/Components/AutoColorIcon";
 import { useSelector } from "react-redux";
@@ -34,6 +34,7 @@ import SearchBox from "../Common/SearchBox";
 import { setSearchVersions } from "./objectBrowserSlice";
 import { AppState, useAppDispatch } from "../../../store";
 import FilterObjectsSB from "./FilterObjectsSB";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 interface IOBHeader {
   bucketName: string;
@@ -109,7 +110,7 @@ const OBHeader = ({ bucketName }: IOBHeader) => {
   return (
     <Fragment>
       {!obOnly ? (
-        <PageHeader
+        <PageHeaderWrapper
           label={
             <BackLink
               label={"Object Browser"}
diff --git a/portal-ui/src/screens/Console/Policies/AddPolicyScreen.tsx b/portal-ui/src/screens/Console/Policies/AddPolicyScreen.tsx
index 07bb42be7..40be99a02 100644
--- a/portal-ui/src/screens/Console/Policies/AddPolicyScreen.tsx
+++ b/portal-ui/src/screens/Console/Policies/AddPolicyScreen.tsx
@@ -17,7 +17,7 @@
 import React, { Fragment, useState } from "react";
 import Grid from "@mui/material/Grid";
 import { Box } from "@mui/material";
-import { AddAccessRuleIcon, BackLink, Button, PageHeader } from "mds";
+import { AddAccessRuleIcon, BackLink, Button } from "mds";
 import PageLayout from "../Common/Layout/PageLayout";
 import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import AddPolicyHelpBox from "./AddPolicyHelpBox";
@@ -30,6 +30,7 @@ import { setErrorSnackMessage } from "../../../systemSlice";
 import { useNavigate } from "react-router-dom";
 import { useAppDispatch } from "../../../store";
 import { emptyPolicy } from "./utils";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const AddPolicyScreen = () => {
   const dispatch = useAppDispatch();
@@ -79,7 +80,7 @@ const AddPolicyScreen = () => {
   return (
     <Fragment>
       <Grid item xs={12}>
-        <PageHeader
+        <PageHeaderWrapper
           label={
             <BackLink
               label={"Policies"}
diff --git a/portal-ui/src/screens/Console/Policies/ListPolicies.tsx b/portal-ui/src/screens/Console/Policies/ListPolicies.tsx
index 995e9bcc1..7e30d500a 100644
--- a/portal-ui/src/screens/Console/Policies/ListPolicies.tsx
+++ b/portal-ui/src/screens/Console/Policies/ListPolicies.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-import { AddIcon, Button, HelpBox, IAMPoliciesIcon, PageHeader } from "mds";
+import { AddIcon, Button, HelpBox, IAMPoliciesIcon } from "mds";
 import { useNavigate } from "react-router-dom";
 import get from "lodash/get";
 import { Theme } from "@mui/material/styles";
@@ -56,6 +56,7 @@ import { encodeURLString } from "../../../common/utils";
 import { setErrorSnackMessage } from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
 import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const DeletePolicy = withSuspense(React.lazy(() => import("./DeletePolicy")));
 
@@ -192,7 +193,7 @@ const ListPolicies = ({ classes }: IPoliciesProps) => {
           closeDeleteModalAndRefresh={closeDeleteModalAndRefresh}
         />
       )}
-      <PageHeader label="IAM Policies" />
+      <PageHeaderWrapper label="IAM Policies" />
       <PageLayout className={classes.pageContainer}>
         <Grid container spacing={1}>
           <Grid item xs={12} className={classes.actionsTray}>
diff --git a/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx b/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
index eb96a1c67..149d6815a 100644
--- a/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
+++ b/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
@@ -21,7 +21,6 @@ import {
   BackLink,
   Button,
   IAMPoliciesIcon,
-  PageHeader,
   RefreshIcon,
   SearchIcon,
   TrashIcon,
@@ -75,6 +74,7 @@ import { setErrorSnackMessage, setSnackBarMessage } from "../../../systemSlice";
 import { selFeatures } from "../consoleSlice";
 import { useAppDispatch } from "../../../store";
 import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const DeletePolicy = withSuspense(React.lazy(() => import("./DeletePolicy")));
 
@@ -355,7 +355,7 @@ const PolicyDetails = ({ classes }: IPolicyDetailsProps) => {
           closeDeleteModalAndRefresh={closeDeleteModalAndRefresh}
         />
       )}
-      <PageHeader
+      <PageHeaderWrapper
         label={
           <Fragment>
             <BackLink
diff --git a/portal-ui/src/screens/Console/Speedtest/Speedtest.tsx b/portal-ui/src/screens/Console/Speedtest/Speedtest.tsx
index 7ac8111dd..847908799 100644
--- a/portal-ui/src/screens/Console/Speedtest/Speedtest.tsx
+++ b/portal-ui/src/screens/Console/Speedtest/Speedtest.tsx
@@ -20,14 +20,7 @@ import { IMessageEvent, w3cwebsocket as W3CWebSocket } from "websocket";
 import { Grid } from "@mui/material";
 import { Theme } from "@mui/material/styles";
 import { useNavigate } from "react-router-dom";
-import {
-  Button,
-  HelpBox,
-  Loader,
-  PageHeader,
-  SpeedtestIcon,
-  WarnIcon,
-} from "mds";
+import { Button, HelpBox, Loader, SpeedtestIcon, WarnIcon } from "mds";
 import { DateTime } from "luxon";
 import createStyles from "@mui/styles/createStyles";
 import {
@@ -54,6 +47,7 @@ import { selDistSet } from "../../../systemSlice";
 import makeStyles from "@mui/styles/makeStyles";
 import RegisterCluster from "../Support/RegisterCluster";
 import { registeredCluster } from "../../../config";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -206,7 +200,7 @@ const Speedtest = () => {
 
   return (
     <Fragment>
-      <PageHeader label="Performance" />
+      <PageHeaderWrapper label="Performance" />
       <PageLayout>
         {!clusterRegistered && <RegisterCluster compactMode />}
         {!distributedSetup ? (
diff --git a/portal-ui/src/screens/Console/Storage/StoragePVCs.tsx b/portal-ui/src/screens/Console/Storage/StoragePVCs.tsx
index 85023ddd0..7d58e82ba 100644
--- a/portal-ui/src/screens/Console/Storage/StoragePVCs.tsx
+++ b/portal-ui/src/screens/Console/Storage/StoragePVCs.tsx
@@ -34,7 +34,7 @@ import TableWrapper from "../Common/TableWrapper/TableWrapper";
 import DeletePVC from "../Tenants/TenantDetails/DeletePVC";
 import PageLayout from "../Common/Layout/PageLayout";
 import SearchBox from "../Common/SearchBox";
-import { PageHeader } from "mds";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 interface IStorageVolumesProps {
   classes: any;
@@ -105,7 +105,7 @@ const StorageVolumes = ({ classes }: IStorageVolumesProps) => {
           closeDeleteModalAndRefresh={closeDeleteModalAndRefresh}
         />
       )}
-      <PageHeader
+      <PageHeaderWrapper
         label="Persistent Volumes Claims"
         middleComponent={
           <SearchBox
diff --git a/portal-ui/src/screens/Console/Support/CallHome.tsx b/portal-ui/src/screens/Console/Support/CallHome.tsx
index b4ff4841d..78b526dac 100644
--- a/portal-ui/src/screens/Console/Support/CallHome.tsx
+++ b/portal-ui/src/screens/Console/Support/CallHome.tsx
@@ -16,7 +16,7 @@
 
 import React, { Fragment, useEffect, useState } from "react";
 import { Box } from "@mui/material";
-import { Button, CallHomeMenuIcon, HelpBox, Loader, PageHeader } from "mds";
+import { Button, CallHomeMenuIcon, HelpBox, Loader } from "mds";
 import { Link, useNavigate } from "react-router-dom";
 import PageLayout from "../Common/Layout/PageLayout";
 import api from "../../../common/api";
@@ -28,6 +28,7 @@ import { registeredCluster } from "../../../config";
 import CallHomeConfirmation from "./CallHomeConfirmation";
 import RegisterCluster from "./RegisterCluster";
 import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const PromoLabels = ({ title, text }: { title: string; text: string }) => {
   return (
@@ -115,7 +116,7 @@ const CallHome = () => {
           disable={disableMode}
         />
       )}
-      <PageHeader label="Call Home" />
+      <PageHeaderWrapper label="Call Home" />
       <PageLayout>
         {!clusterRegistered && <RegisterCluster compactMode />}
         <Box
diff --git a/portal-ui/src/screens/Console/Support/Profile.tsx b/portal-ui/src/screens/Console/Support/Profile.tsx
index fdde0b6fb..ba03f46b6 100644
--- a/portal-ui/src/screens/Console/Support/Profile.tsx
+++ b/portal-ui/src/screens/Console/Support/Profile.tsx
@@ -1,7 +1,7 @@
 import React, { Fragment, useState } from "react";
 import { IMessageEvent, w3cwebsocket as W3CWebSocket } from "websocket";
 import { Theme } from "@mui/material/styles";
-import { Button, PageHeader } from "mds";
+import { Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { Grid } from "@mui/material";
@@ -16,6 +16,7 @@ import {
 import { useNavigate } from "react-router-dom";
 import RegisterCluster from "./RegisterCluster";
 import { registeredCluster } from "../../../config";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -140,7 +141,7 @@ const Profile = ({ classes }: IProfileProps) => {
 
   return (
     <Fragment>
-      <PageHeader label="Profile" />
+      <PageHeaderWrapper label="Profile" />
       <PageLayout>
         {!clusterRegistered && <RegisterCluster compactMode />}
         <Grid item xs={12} className={classes.boxy}>
diff --git a/portal-ui/src/screens/Console/Support/Register.tsx b/portal-ui/src/screens/Console/Support/Register.tsx
index 1e4285e62..358dba8b9 100644
--- a/portal-ui/src/screens/Console/Support/Register.tsx
+++ b/portal-ui/src/screens/Console/Support/Register.tsx
@@ -16,7 +16,6 @@
 
 import React, { Fragment, useEffect, useState } from "react";
 import { Theme } from "@mui/material/styles";
-import { PageHeader } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import { spacingUtils } from "../Common/FormComponents/common/styleLibrary";
 import withStyles from "@mui/styles/withStyles";
@@ -45,6 +44,7 @@ import OfflineRegistration from "./OfflineRegistration";
 import SubnetMFAToken from "./SubnetMFAToken";
 import ClusterRegistrationForm from "./ClusterRegistrationForm";
 import OnlineRegistration from "./OnlineRegistration";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 interface IRegister {
   classes: any;
@@ -184,7 +184,7 @@ const Register = ({ classes }: IRegister) => {
 
   return (
     <Fragment>
-      <PageHeader
+      <PageHeaderWrapper
         label="Register to MinIO Subscription Network"
         actions={<React.Fragment />}
       />
diff --git a/portal-ui/src/screens/Console/Support/RegisterOperator.tsx b/portal-ui/src/screens/Console/Support/RegisterOperator.tsx
index 3ab0ecfec..b441df86d 100644
--- a/portal-ui/src/screens/Console/Support/RegisterOperator.tsx
+++ b/portal-ui/src/screens/Console/Support/RegisterOperator.tsx
@@ -35,7 +35,7 @@ import Tab from "@mui/material/Tab";
 import { TabPanel } from "../../shared/tabs";
 import { ClusterRegistered } from "./utils";
 import ApiKeyRegister from "./ApiKeyRegister";
-import { PageHeader } from "mds";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 interface IRegister {
   classes: any;
@@ -90,7 +90,7 @@ const RegisterOperator = ({ classes }: IRegister) => {
 
   return (
     <Fragment>
-      <PageHeader
+      <PageHeaderWrapper
         label="Register to MinIO Subscription Network"
         actions={<React.Fragment />}
       />
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx
index 1bac88589..1603a9189 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/AddTenant.tsx
@@ -48,13 +48,14 @@ import {
   IMkEnvs,
   resourcesConfigurations,
 } from "./Steps/TenantResources/utils";
-import { BackLink, HelpBox, PageHeader, StorageIcon } from "mds";
+import { BackLink, HelpBox, StorageIcon } from "mds";
 import { selFeatures } from "../../consoleSlice";
 import makeStyles from "@mui/styles/makeStyles";
 import { resetAddTenantForm } from "./createTenantSlice";
 import CreateTenantButton from "./CreateTenantButton";
 import NewTenantCredentials from "./NewTenantCredentials";
 import { useNavigate } from "react-router-dom";
+import PageHeaderWrapper from "../../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -175,7 +176,7 @@ const AddTenant = () => {
   return (
     <Fragment>
       <NewTenantCredentials />
-      <PageHeader
+      <PageHeaderWrapper
         label={
           <BackLink
             onClick={() => {
diff --git a/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx b/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
index 810ff590a..df904f941 100644
--- a/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
+++ b/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
@@ -15,14 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-import {
-  AddIcon,
-  Button,
-  HelpBox,
-  PageHeader,
-  RefreshIcon,
-  TenantsIcon,
-} from "mds";
+import { AddIcon, Button, HelpBox, RefreshIcon, TenantsIcon } from "mds";
 import Grid from "@mui/material/Grid";
 import { LinearProgress, SelectChangeEvent } from "@mui/material";
 import { Theme } from "@mui/material/styles";
@@ -50,6 +43,7 @@ import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapp
 import { useNavigate } from "react-router-dom";
 import { useAppDispatch } from "../../../../store";
 import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
+import PageHeaderWrapper from "../../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const CredentialsPrompt = withSuspense(
   React.lazy(() => import("../../Common/CredentialsPrompt/CredentialsPrompt"))
@@ -237,7 +231,7 @@ const ListTenants = ({ classes }: ITenantsList) => {
           entity="Tenant"
         />
       )}
-      <PageHeader
+      <PageHeaderWrapper
         label="Tenants"
         middleComponent={
           <SearchBox
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/AddPool/AddPool.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/AddPool/AddPool.tsx
index aac665d79..ad54af98c 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/AddPool/AddPool.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/AddPool/AddPool.tsx
@@ -30,7 +30,7 @@ import GenericWizard from "../../../../Common/GenericWizard/GenericWizard";
 import { IWizardElement } from "../../../../Common/GenericWizard/types";
 import PoolResources from "./PoolResources";
 import ScreenTitle from "../../../../Common/ScreenTitle/ScreenTitle";
-import { BackLink, PageHeader, TenantsIcon } from "mds";
+import { BackLink, TenantsIcon } from "mds";
 
 import { AppState, useAppDispatch } from "../../../../../../store";
 import { useSelector } from "react-redux";
@@ -40,6 +40,7 @@ import PoolPodPlacement from "./PoolPodPlacement";
 import { resetPoolForm } from "./addPoolSlice";
 import AddPoolCreateButton from "./AddPoolCreateButton";
 import makeStyles from "@mui/styles/makeStyles";
+import PageHeaderWrapper from "../../../../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -127,7 +128,7 @@ const AddPool = () => {
   return (
     <Fragment>
       <Grid item xs={12}>
-        <PageHeader
+        <PageHeaderWrapper
           label={
             <Fragment>
               <BackLink
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/EditPool/EditPool.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/EditPool/EditPool.tsx
index 0b6d9fbbc..a3cc8a4ea 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/EditPool/EditPool.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/EditPool/EditPool.tsx
@@ -23,7 +23,7 @@ import Grid from "@mui/material/Grid";
 import PageLayout from "../../../../Common/Layout/PageLayout";
 import GenericWizard from "../../../../Common/GenericWizard/GenericWizard";
 import ScreenTitle from "../../../../Common/ScreenTitle/ScreenTitle";
-import { BackLink, PageHeader, TenantsIcon } from "mds";
+import { BackLink, TenantsIcon } from "mds";
 import EditPoolResources from "./EditPoolResources";
 import EditPoolConfiguration from "./EditPoolConfiguration";
 import EditPoolPlacement from "./EditPoolPlacement";
@@ -39,6 +39,7 @@ import { AppState, useAppDispatch } from "../../../../../../store";
 import { resetEditPoolForm, setInitialPoolDetails } from "./editPoolSlice";
 import EditPoolButton from "./EditPoolButton";
 import makeStyles from "@mui/styles/makeStyles";
+import PageHeaderWrapper from "../../../../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -149,7 +150,7 @@ const EditPool = () => {
   return (
     <Fragment>
       <Grid item xs={12}>
-        <PageHeader
+        <PageHeaderWrapper
           label={
             <Fragment>
               <BackLink
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
index 1c6a316fc..ab70081f0 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
@@ -22,7 +22,6 @@ import {
   CircleIcon,
   EditIcon,
   MinIOTierIconXs,
-  PageHeader,
   RefreshIcon,
   TenantsIcon,
   TrashIcon,
@@ -59,6 +58,7 @@ import { setTenantName } from "../tenantsSlice";
 import { getTenantAsync } from "../thunks/tenantDetailsAsync";
 import { LinearProgress } from "@mui/material";
 import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
+import PageHeaderWrapper from "../../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const TenantYAML = withSuspense(React.lazy(() => import("./TenantYAML")));
 const TenantSummary = withSuspense(React.lazy(() => import("./TenantSummary")));
@@ -249,7 +249,7 @@ const TenantDetails = ({ classes }: ITenantDetailsProps) => {
         />
       )}
 
-      <PageHeader
+      <PageHeaderWrapper
         label={
           <Fragment>
             <BackLink
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/hop/Hop.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/hop/Hop.tsx
index b81676aad..787ff2746 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/hop/Hop.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/hop/Hop.tsx
@@ -22,7 +22,8 @@ import withStyles from "@mui/styles/withStyles";
 import { Box, IconButton } from "@mui/material";
 import { containerForHeader } from "../../../Common/FormComponents/common/styleLibrary";
 import ExitToAppIcon from "@mui/icons-material/ExitToApp";
-import { Loader, PageHeader, RefreshIcon } from "mds";
+import { Loader, RefreshIcon } from "mds";
+import PageHeaderWrapper from "../../../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 interface IHopSimple {
   classes: any;
@@ -73,7 +74,7 @@ const Hop = ({ classes }: IHopSimple) => {
   return (
     <Fragment>
       <Box className={classes.pageHeader}>
-        <PageHeader
+        <PageHeaderWrapper
           label={
             <Fragment>
               <Link to={"/tenants"} className={classes.breadcrumLink}>
diff --git a/portal-ui/src/screens/Console/Tools/Inspect.tsx b/portal-ui/src/screens/Console/Tools/Inspect.tsx
index cccf1ab56..95e1f9b9b 100644
--- a/portal-ui/src/screens/Console/Tools/Inspect.tsx
+++ b/portal-ui/src/screens/Console/Tools/Inspect.tsx
@@ -16,13 +16,7 @@
 
 import React, { Fragment, useEffect, useState } from "react";
 import { Box, DialogContentText } from "@mui/material";
-import {
-  Button,
-  HelpBox,
-  InspectMenuIcon,
-  PageHeader,
-  PasswordKeyIcon,
-} from "mds";
+import { Button, HelpBox, InspectMenuIcon, PasswordKeyIcon } from "mds";
 import { useNavigate } from "react-router-dom";
 import PageLayout from "../Common/Layout/PageLayout";
 import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
@@ -48,6 +42,7 @@ import { selDistSet, setErrorSnackMessage } from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
 import RegisterCluster from "../Support/RegisterCluster";
 import { registeredCluster } from "../../../config";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -198,7 +193,7 @@ const Inspect = ({ classes }: { classes: any }) => {
 
   return (
     <Fragment>
-      <PageHeader label={"Inspect"} />
+      <PageHeaderWrapper label={"Inspect"} />
       <PageLayout>
         {!clusterRegistered && <RegisterCluster compactMode />}
         {!distributedSetup ? (
diff --git a/portal-ui/src/screens/Console/Trace/Trace.tsx b/portal-ui/src/screens/Console/Trace/Trace.tsx
index cf0cc0385..a932888be 100644
--- a/portal-ui/src/screens/Console/Trace/Trace.tsx
+++ b/portal-ui/src/screens/Console/Trace/Trace.tsx
@@ -18,7 +18,7 @@ import React, { Fragment, useState } from "react";
 import { DateTime } from "luxon";
 import { Box, Grid } from "@mui/material";
 import { IMessageEvent, w3cwebsocket as W3CWebSocket } from "websocket";
-import { Button, FilterIcon, PageHeader } from "mds";
+import { Button, FilterIcon } from "mds";
 import { AppState, useAppDispatch } from "../../../store";
 import { useSelector } from "react-redux";
 import { TraceMessage } from "./types";
@@ -43,6 +43,7 @@ import {
   traceResetMessages,
 } from "./traceSlice";
 import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -167,7 +168,7 @@ const Trace = ({ classes }: ITrace) => {
 
   return (
     <Fragment>
-      <PageHeader label={"Trace"} />
+      <PageHeaderWrapper label={"Trace"} />
       <PageLayout>
         <Grid className={classes.formBox}>
           <Grid
diff --git a/portal-ui/src/screens/Console/Users/AddUserScreen.tsx b/portal-ui/src/screens/Console/Users/AddUserScreen.tsx
index b2d472a39..a7bbe8359 100644
--- a/portal-ui/src/screens/Console/Users/AddUserScreen.tsx
+++ b/portal-ui/src/screens/Console/Users/AddUserScreen.tsx
@@ -16,7 +16,7 @@
 
 import React, { Fragment } from "react";
 import { Theme } from "@mui/material/styles";
-import { BackLink, Button, CreateUserIcon, PageHeader } from "mds";
+import { BackLink, Button, CreateUserIcon } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import UserSelector from "./UserSelector";
@@ -47,6 +47,7 @@ import {
   setSelectedGroups,
   setSendEnabled,
 } from "./AddUsersSlice";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 interface IAddUserProps {
   classes: any;
@@ -102,7 +103,7 @@ const AddUser = ({ classes }: IAddUserProps) => {
   return (
     <Fragment>
       <Grid item xs={12}>
-        <PageHeader
+        <PageHeaderWrapper
           label={
             <BackLink
               label={"Users"}
diff --git a/portal-ui/src/screens/Console/Users/AddUserServiceAccountScreen.tsx b/portal-ui/src/screens/Console/Users/AddUserServiceAccountScreen.tsx
index e61de2042..3eb7f6507 100644
--- a/portal-ui/src/screens/Console/Users/AddUserServiceAccountScreen.tsx
+++ b/portal-ui/src/screens/Console/Users/AddUserServiceAccountScreen.tsx
@@ -21,7 +21,6 @@ import {
   BackLink,
   Button,
   IAMPoliciesIcon,
-  PageHeader,
   PasswordKeyIcon,
   ServiceAccountCredentialsIcon,
 } from "mds";
@@ -52,6 +51,7 @@ import AddUserServiceAccountHelpBox from "./AddUserServiceAccountHelpBox";
 import { decodeURLString, encodeURLString } from "../../../common/utils";
 import { setErrorSnackMessage } from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 interface IAddServiceAccountProps {
   classes: any;
@@ -161,7 +161,7 @@ const AddServiceAccount = ({ classes }: IAddServiceAccountProps) => {
         />
       )}
       <Grid item xs={12}>
-        <PageHeader
+        <PageHeaderWrapper
           label={
             <BackLink
               onClick={() =>
diff --git a/portal-ui/src/screens/Console/Users/ListUsers.tsx b/portal-ui/src/screens/Console/Users/ListUsers.tsx
index 8cba06c15..48e96e39c 100644
--- a/portal-ui/src/screens/Console/Users/ListUsers.tsx
+++ b/portal-ui/src/screens/Console/Users/ListUsers.tsx
@@ -24,7 +24,6 @@ import {
   DeleteIcon,
   GroupsIcon,
   HelpBox,
-  PageHeader,
   UsersIcon,
 } from "mds";
 import createStyles from "@mui/styles/createStyles";
@@ -66,6 +65,7 @@ import {
 import { setErrorSnackMessage } from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
 import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const DeleteUser = withSuspense(React.lazy(() => import("./DeleteUser")));
 const AddToGroup = withSuspense(React.lazy(() => import("./BulkAddToGroup")));
@@ -209,7 +209,7 @@ const ListUsers = ({ classes }: IUsersProps) => {
           }}
         />
       )}
-      <PageHeader label={"Users"} />
+      <PageHeaderWrapper label={"Users"} />
       <PageLayout>
         <Grid item xs={12} className={classes.actionsTray}>
           <SearchBox
diff --git a/portal-ui/src/screens/Console/Users/UserDetails.tsx b/portal-ui/src/screens/Console/Users/UserDetails.tsx
index 31d422d60..0e6d3377f 100644
--- a/portal-ui/src/screens/Console/Users/UserDetails.tsx
+++ b/portal-ui/src/screens/Console/Users/UserDetails.tsx
@@ -22,7 +22,6 @@ import {
   BackLink,
   Button,
   IAMPoliciesIcon,
-  PageHeader,
   PasswordKeyIcon,
   TrashIcon,
   UsersIcon,
@@ -71,6 +70,7 @@ import { hasPermission } from "../../../common/SecureComponent";
 import { useAppDispatch } from "../../../store";
 import { policyDetailsSort } from "../../../utils/sortFunctions";
 import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -233,7 +233,7 @@ const UserDetails = ({ classes }: IUserDetailsProps) => {
 
   return (
     <Fragment>
-      <PageHeader
+      <PageHeaderWrapper
         label={
           <Fragment>
             <BackLink
diff --git a/portal-ui/src/screens/Console/Watch/Watch.tsx b/portal-ui/src/screens/Console/Watch/Watch.tsx
index 5151fcf0c..701bd895c 100644
--- a/portal-ui/src/screens/Console/Watch/Watch.tsx
+++ b/portal-ui/src/screens/Console/Watch/Watch.tsx
@@ -25,7 +25,7 @@ import {
 import { IMessageEvent, w3cwebsocket as W3CWebSocket } from "websocket";
 import { useSelector } from "react-redux";
 import { Theme } from "@mui/material/styles";
-import { Button, PageHeader } from "mds";
+import { Button } from "mds";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { AppState, useAppDispatch } from "../../../store";
@@ -44,6 +44,7 @@ import api from "../../../common/api";
 import PageLayout from "../Common/Layout/PageLayout";
 import makeStyles from "@mui/styles/makeStyles";
 import { watchMessageReceived, watchResetMessages } from "./watchSlice";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -172,7 +173,7 @@ const Watch = () => {
 
   return (
     <React.Fragment>
-      <PageHeader label="Watch" />
+      <PageHeaderWrapper label="Watch" />
       <PageLayout>
         <Grid item xs={12}>
           <Grid item xs={12} className={classes.actionsTray}>