From 606a69b92c5d8c04b51af16cd4e002c4144ab91a Mon Sep 17 00:00:00 2001
From: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
Date: Thu, 2 Feb 2023 20:42:15 -0800
Subject: [PATCH] Remove Unused Style code (#2629)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
---
 .../src/screens/Console/Account/Account.tsx   |   2 -
 .../Console/Account/ChangePasswordModal.tsx   |   2 +-
 .../Account/ChangeUserPasswordModal.tsx       |   2 +-
 .../Buckets/BucketDetails/AccessRulePanel.tsx |   2 +-
 .../Buckets/BucketDetails/BrowserHandler.tsx  |   2 +-
 .../Buckets/BucketDetails/BucketDetails.tsx   |   7 +-
 .../ListBuckets/AddBucket/AddBucket.tsx       |   2 +-
 .../Buckets/ListBuckets/ListBuckets.tsx       |   2 +-
 .../Objects/ListObjects/ListObjects.tsx       |   2 +-
 .../Objects/ListObjects/ObjectDetailPanel.tsx |   3 +-
 .../ObjectDetails/VersionsNavigator.tsx       |   6 +-
 .../FormComponents/common/styleLibrary.ts     | 384 +-----------------
 .../src/screens/Console/Common/FormHr.tsx     |  27 ++
 .../src/screens/Console/Common/H3Section.tsx  |  22 +
 .../screens/Console/Common/IconsScreen.tsx    |   2 +-
 .../ConfigurationOptions.tsx                  |   2 +-
 .../ListTiersConfiguration.tsx                |   2 +-
 .../screens/Console/Dashboard/Dashboard.tsx   |   2 +-
 .../Dashboard/Prometheus/PrDashboard.tsx      |   6 +-
 .../Console/DirectPV/DirectPVDrives.tsx       |   2 +-
 .../Console/DirectPV/DirectPVVolumes.tsx      |   2 +-
 .../src/screens/Console/Groups/Groups.tsx     |   2 +-
 .../screens/Console/Groups/GroupsDetails.tsx  |   2 +-
 portal-ui/src/screens/Console/Heal/Heal.tsx   |   2 +-
 .../screens/Console/HealthInfo/HealthInfo.tsx |   2 +-
 .../Console/IDP/IDPConfigurationDetails.tsx   |   7 +-
 .../screens/Console/IDP/IDPConfigurations.tsx |   2 +-
 .../src/screens/Console/KMS/ListKeys.tsx      |   2 +-
 .../Console/Logs/ErrorLogs/ErrorLogs.tsx      |   5 +-
 .../Console/Logs/LogSearch/LogsSearchMain.tsx |   5 +-
 .../Console/Marketplace/SetEmailModal.tsx     |   2 +-
 .../ListNotificationEndpoints.tsx             |   2 +-
 .../ObjectBrowser/BrowserBreadcrumbs.tsx      |  19 +-
 .../Console/ObjectBrowser/OBBucketList.tsx    |   2 +-
 .../ObjectBrowser/RenameLongFilename.tsx      |   2 +-
 .../screens/Console/Policies/ListPolicies.tsx |   2 +-
 .../Console/Policies/PolicyDetails.tsx        |   2 +-
 .../screens/Console/Speedtest/Speedtest.tsx   |   2 +-
 .../screens/Console/Storage/StoragePVCs.tsx   |   2 +-
 .../Console/Support/GetApiKeyModal.tsx        |   2 +-
 .../src/screens/Console/Support/Profile.tsx   |   2 +-
 .../src/screens/Console/Support/Register.tsx  |  21 +-
 .../Console/Support/RegisterOperator.tsx      |   8 +-
 .../src/screens/Console/Support/utils.tsx     |  13 +-
 .../Tenants/AddTenant/Steps/Affinity.tsx      |   3 +-
 .../AddTenant/Steps/ConfigLogSearch.tsx       |   3 +-
 .../AddTenant/Steps/ConfigPrometheus.tsx      |   3 +-
 .../Tenants/AddTenant/Steps/Configure.tsx     |   5 +-
 .../Tenants/AddTenant/Steps/Encryption.tsx    |   3 +-
 .../AddTenant/Steps/IdentityProvider.tsx      |   3 +-
 .../Tenants/AddTenant/Steps/Images.tsx        |   5 +-
 .../Tenants/AddTenant/Steps/Security.tsx      |   3 +-
 .../Steps/TenantResources/NameTenantMain.tsx  |   3 +-
 .../Steps/TenantResources/TenantSize.tsx      |   3 +-
 .../Steps/TenantResources/TenantSizeMK.tsx    |   3 +-
 .../TenantResources/TenantSizeResources.tsx   |   3 +-
 .../Tenants/ListTenants/ListTenants.tsx       |   2 +-
 .../TenantDetails/ConfirmationDialog.tsx      |   2 +-
 .../EditTenantMonitoringScreen.tsx            |   5 +-
 .../Tenants/TenantDetails/KeyPairView.tsx     |   2 +-
 .../TenantDetails/LoggingDBDetails.tsx        |   2 +-
 .../Tenants/TenantDetails/LoggingDetails.tsx  |   2 +-
 .../Tenants/TenantDetails/PodsSummary.tsx     |   2 +-
 .../Pools/AddPool/PoolConfiguration.tsx       |   3 +-
 .../Pools/AddPool/PoolPodPlacement.tsx        |   3 +-
 .../Pools/AddPool/PoolResources.tsx           |   3 +-
 .../Pools/Details/PoolsListing.tsx            |   2 +-
 .../Pools/EditPool/EditPoolConfiguration.tsx  |   3 +-
 .../Pools/EditPool/EditPoolPlacement.tsx      |   3 +-
 .../Pools/EditPool/EditPoolResources.tsx      |   3 +-
 .../Tenants/TenantDetails/PoolsSummary.tsx    |   2 +-
 .../TenantDetails/SubnetLicenseTenant.tsx     |   2 +-
 .../TenantDetails/TenantAuditLogsScreen.tsx   |   5 +-
 .../Tenants/TenantDetails/TenantCSR.tsx       |   2 +-
 .../TenantDetails/TenantConfiguration.tsx     |   5 +-
 .../Tenants/TenantDetails/TenantDetails.tsx   |   2 +-
 .../TenantDetails/TenantEncryption.tsx        |   5 +-
 .../Tenants/TenantDetails/TenantEvents.tsx    |   2 +-
 .../TenantDetails/TenantIdentityProvider.tsx  |   8 +-
 .../Tenants/TenantDetails/TenantLicense.tsx   |   2 +-
 .../Tenants/TenantDetails/TenantMetrics.tsx   |   2 +-
 .../Tenants/TenantDetails/TenantSecurity.tsx  |   7 +-
 .../Tenants/TenantDetails/TenantSummary.tsx   |   2 +-
 .../Tenants/TenantDetails/TenantTrace.tsx     |   2 +-
 .../Tenants/TenantDetails/VolumesSummary.tsx  |   2 +-
 .../Console/Tenants/TenantDetails/hop/Hop.tsx |   2 +-
 .../Tenants/TenantDetails/pods/PodDetails.tsx |   2 +-
 .../Tenants/TenantDetails/pods/PodLogs.tsx    |   5 +-
 .../TenantDetails/pvcs/PVCDescribe.tsx        |   5 +-
 .../TenantDetails/pvcs/TenantVolumes.tsx      |   2 +-
 portal-ui/src/screens/Console/Trace/Trace.tsx |   4 +-
 .../src/screens/Console/Users/ListUsers.tsx   |   2 +-
 .../src/screens/Console/Users/UserDetails.tsx |   2 +-
 portal-ui/src/screens/Console/Watch/Watch.tsx |   2 +-
 94 files changed, 198 insertions(+), 548 deletions(-)
 create mode 100644 portal-ui/src/screens/Console/Common/FormHr.tsx
 create mode 100644 portal-ui/src/screens/Console/Common/H3Section.tsx

diff --git a/portal-ui/src/screens/Console/Account/Account.tsx b/portal-ui/src/screens/Console/Account/Account.tsx
index 6da612cc4..dff3a4ff3 100644
--- a/portal-ui/src/screens/Console/Account/Account.tsx
+++ b/portal-ui/src/screens/Console/Account/Account.tsx
@@ -35,7 +35,6 @@ import TableWrapper from "../Common/TableWrapper/TableWrapper";
 import { stringSort } from "../../../utils/sortFunctions";
 import {
   actionsTray,
-  containerForHeader,
   searchField,
   tableStyles,
 } from "../Common/FormComponents/common/styleLibrary";
@@ -75,7 +74,6 @@ const useStyles = makeStyles((theme: Theme) =>
       maxWidth: 380,
     },
     ...tableStyles,
-    ...containerForHeader(theme.spacing(4)),
   })
 );
 
diff --git a/portal-ui/src/screens/Console/Account/ChangePasswordModal.tsx b/portal-ui/src/screens/Console/Account/ChangePasswordModal.tsx
index 709e6de2b..e6d161507 100644
--- a/portal-ui/src/screens/Console/Account/ChangePasswordModal.tsx
+++ b/portal-ui/src/screens/Console/Account/ChangePasswordModal.tsx
@@ -42,7 +42,7 @@ const styles = (theme: Theme) =>
     ...modalStyleUtils,
     ...formFieldStyles,
     ...spacingUtils,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 interface IChangePasswordProps {
diff --git a/portal-ui/src/screens/Console/Account/ChangeUserPasswordModal.tsx b/portal-ui/src/screens/Console/Account/ChangeUserPasswordModal.tsx
index ce600bc02..5837c4ebf 100644
--- a/portal-ui/src/screens/Console/Account/ChangeUserPasswordModal.tsx
+++ b/portal-ui/src/screens/Console/Account/ChangeUserPasswordModal.tsx
@@ -44,7 +44,7 @@ const styles = (theme: Theme) =>
     ...modalStyleUtils,
     ...formFieldStyles,
     ...spacingUtils,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 interface IChangeUserPasswordProps {
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx
index afaf8517c..ecab73865 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx
@@ -70,7 +70,7 @@ const useStyles = makeStyles((theme: Theme) =>
     ...actionsTray,
     ...searchField,
     ...objectBrowserCommon,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   })
 );
 
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BrowserHandler.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BrowserHandler.tsx
index 45543c840..2d4212cdf 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BrowserHandler.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BrowserHandler.tsx
@@ -60,7 +60,7 @@ import OBHeader from "../../ObjectBrowser/OBHeader";
 
 const styles = (theme: Theme) =>
   createStyles({
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 let objectsWS: WebSocket;
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx
index 0a8175fb4..484fd888a 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx
@@ -40,9 +40,7 @@ import Grid from "@mui/material/Grid";
 import api from "../../../../common/api";
 import { BucketInfo } from "../types";
 import {
-  buttonsStyles,
   containerForHeader,
-  hrClass,
   pageContentStyles,
   searchField,
 } from "../../Common/FormComponents/common/styleLibrary";
@@ -113,9 +111,8 @@ const styles = (theme: Theme) =>
     capitalize: {
       textTransform: "capitalize",
     },
-    ...hrClass,
-    ...buttonsStyles,
-    ...containerForHeader(theme.spacing(4)),
+
+    ...containerForHeader,
   });
 
 interface IBucketDetailsProps {
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 43e1cd696..88bd766df 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/AddBucket.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/AddBucket.tsx
@@ -107,7 +107,7 @@ const styles = (theme: Theme) =>
       color: "#000000",
       fontSize: 20,
     },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 interface IsetProps {
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
index 1c5205adc..c9e13a078 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
@@ -82,7 +82,7 @@ const styles = (theme: Theme) =>
         minWidth: 220,
       },
     },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 interface IListBucketsProps {
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
index cd55a326b..c69ea4f87 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
@@ -196,7 +196,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     ...objectBrowserExtras,
     ...objectBrowserCommon,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   })
 );
 
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ObjectDetailPanel.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ObjectDetailPanel.tsx
index 011c887db..8ed39eee0 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ObjectDetailPanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ObjectDetailPanel.tsx
@@ -38,7 +38,6 @@ import get from "lodash/get";
 import Grid from "@mui/material/Grid";
 import {
   actionsTray,
-  buttonsStyles,
   detailsPanel,
   spacingUtils,
   textStyleUtils,
@@ -117,7 +116,7 @@ const styles = () =>
     capitalizeFirst: {
       textTransform: "capitalize",
     },
-    ...buttonsStyles,
+
     ...actionsTray,
     ...spacingUtils,
     ...textStyleUtils,
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/VersionsNavigator.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/VersionsNavigator.tsx
index 4ef2d4266..5260279cd 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/VersionsNavigator.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/VersionsNavigator.tsx
@@ -25,9 +25,7 @@ import Grid from "@mui/material/Grid";
 import ShareFile from "./ShareFile";
 import {
   actionsTray,
-  buttonsStyles,
   containerForHeader,
-  hrClass,
   objectBrowserCommon,
   objectBrowserExtras,
   spacingUtils,
@@ -129,15 +127,13 @@ const styles = (theme: Theme) =>
         display: "none",
       },
     },
-    ...hrClass,
-    ...buttonsStyles,
     ...actionsTray,
     ...tableStyles,
     ...spacingUtils,
     ...textStyleUtils,
     ...objectBrowserCommon,
     ...objectBrowserExtras,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 interface IVersionsNavigatorProps {
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
index 23a5073cd..3472ad146 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
+++ b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
@@ -71,9 +71,6 @@ export const modalBasic = {
     overflowY: "auto" as const,
     marginBottom: 25,
   },
-  formSlider: {
-    marginLeft: 0,
-  },
   clearButton: {
     fontFamily: "Inter, sans-serif",
     border: "0",
@@ -86,12 +83,6 @@ export const modalBasic = {
     padding: "16px 25px 16px 25px",
     cursor: "pointer",
   },
-  floatingEnabled: {
-    position: "absolute" as const,
-    right: 58,
-    zIndex: 1000,
-    marginTop: -38,
-  },
   configureString: {
     border: "#EAEAEA 1px solid",
     borderRadius: 4,
@@ -100,11 +91,6 @@ export const modalBasic = {
     height: 170,
     backgroundColor: "#FBFAFA",
   },
-  moduleDescription: {
-    color: "#848484",
-    fontSize: 12,
-    fontStyle: "italic" as string,
-  },
 };
 
 export const tooltipHelper = {
@@ -171,7 +157,7 @@ export const radioIcons = {
   },
 };
 
-export const containerForHeader = (bottomSpacing: any) => ({
+export const containerForHeader = {
   container: {
     position: "relative" as const,
     padding: "20px 35px 0",
@@ -190,27 +176,15 @@ export const containerForHeader = (bottomSpacing: any) => ({
     marginBottom: ".8rem",
     fontSize: "1.3rem",
   },
-  topSpacer: {
-    height: "8px",
-  },
   boxy: {
     border: "#E5E5E5 1px solid",
     borderRadius: 2,
     padding: 40,
     backgroundColor: "#fff",
   },
-});
+};
 
 export const actionsTray = {
-  filterTitle: {
-    color: "#848484",
-    fontSize: 13,
-    alignSelf: "center" as const,
-    whiteSpace: "nowrap" as const,
-    "&:not(:first-of-type)": {
-      marginLeft: 10,
-    },
-  },
   label: {
     color: "#07193E",
     fontSize: 13,
@@ -220,19 +194,6 @@ export const actionsTray = {
       marginLeft: 10,
     },
   },
-  timeContainers: {
-    display: "flex" as const,
-    "& button": {
-      flexGrow: 0,
-      marginLeft: 15,
-    },
-    height: 40,
-    marginBottom: 15,
-    justifyContent: "flex-start" as const,
-    "& > *": {
-      marginRight: 15,
-    },
-  },
   actionsTray: {
     display: "flex" as const,
     justifyContent: "space-between" as const,
@@ -243,19 +204,6 @@ export const actionsTray = {
       marginLeft: 8,
     },
   },
-  filterContainer: {
-    backgroundColor: "#fff",
-    border: "#EEF1F4 2px solid",
-    borderRadius: 2,
-    display: "flex",
-    alignItems: "center",
-    padding: "0 12px",
-  },
-  divisorLine: {
-    borderRight: "#EEF1F4 1px solid",
-    height: 20,
-    margin: "0 15px",
-  },
 };
 
 export const searchField = {
@@ -356,19 +304,6 @@ export const predefinedList = {
 };
 
 export const objectBrowserCommon = {
-  obTitleSection: {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "flex-start",
-    marginBottom: 20,
-  },
-  sectionTitle: {
-    fontSize: 22,
-    color: "#000",
-    fontWeight: 600,
-    height: 40,
-    lineHeight: "40px",
-  },
   breadcrumbsMain: {
     display: "flex",
   },
@@ -402,10 +337,6 @@ export const objectBrowserCommon = {
       display: "none",
     },
   },
-  smallLabel: {
-    color: "#9C9C9C",
-    fontSize: 15,
-  },
   bucketDetails: {
     marginLeft: 10,
     fontSize: 14,
@@ -468,15 +399,6 @@ export const selectorsCommon = {
 };
 
 export const settingsCommon: any = {
-  customTitle: {
-    fontSize: 18,
-    color: "#000",
-    fontWeight: 600,
-    padding: "12px 0",
-    borderBottom: "#eaedee 1px solid",
-    marginBottom: 10,
-    margin: "15px 38px 27px",
-  },
   settingsFormContainer: {
     padding: 38,
     overflowY: "auto" as const,
@@ -490,10 +412,6 @@ export const settingsCommon: any = {
     display: "flex",
     justifyContent: "flex-end",
   },
-  innerSettingsButtonContainer: {
-    maxWidth: 840,
-    textAlign: "right" as const,
-  },
   settingsOptionsContainer: {
     height: "calc(100vh - 244px)",
     backgroundColor: "#fff",
@@ -501,38 +419,6 @@ export const settingsCommon: any = {
     borderRadius: 3,
     marginTop: 15,
   },
-  backButton: {
-    cursor: "pointer",
-    fontSize: 10,
-    fontWeight: 600,
-    color: "#000",
-    backgroundColor: "transparent",
-    border: 0,
-    padding: 0,
-    display: "flex",
-    alignItems: "center",
-    "&:active, &:focus": {
-      outline: 0,
-    },
-    "& svg": {
-      width: 10,
-      marginRight: 4,
-    },
-  },
-  backContainer: {
-    margin: "20px 38px 0",
-  },
-  mainCont: {
-    paddingLeft: 50,
-    paddingRight: 50,
-  },
-  mainTitle: {
-    fontSize: 18,
-    color: "#000",
-    fontWeight: 600,
-    marginBottom: 10,
-    marginTop: 10,
-  },
 };
 
 export const typesSelection = {
@@ -544,26 +430,6 @@ export const typesSelection = {
     flexWrap: "wrap" as const,
     width: "100%",
   },
-  nonIconContainer: {
-    marginBottom: 16,
-    width: 455,
-    marginTop: 15,
-    "& button": {
-      marginRight: 16,
-    },
-  },
-  pickTitle: {
-    fontWeight: 600,
-    color: "#393939",
-    fontSize: 14,
-    marginBottom: 16,
-  },
-  centerElements: {
-    display: "flex" as const,
-    flexDirection: "column" as const,
-    alignItems: "center" as const,
-    justifyContent: "center" as const,
-  },
   logoButton: {
     height: "80px",
   },
@@ -607,13 +473,6 @@ export const typesSelection = {
   },
 };
 
-export const logsCommon = {
-  logsSubContainer: {
-    height: "calc(100vh - 230px)",
-    padding: "15px 0",
-  },
-};
-
 export const widgetCommon = {
   singleValueContainer: {
     height: 200,
@@ -638,18 +497,6 @@ export const widgetCommon = {
     width: "100%",
     height: 140,
   },
-  contentContainerWithLabel: {
-    height: "calc(100% - 25px)",
-  },
-  legendBlock: {
-    position: "absolute" as const,
-    bottom: 5,
-    display: "flex" as const,
-    width: "100%",
-    height: 15,
-    flexWrap: "wrap" as const,
-    overflowY: "auto" as const,
-  },
   singleLegendContainer: {
     display: "flex",
     alignItems: "center",
@@ -674,33 +521,6 @@ export const widgetCommon = {
     height: 340,
     width: "100%",
   },
-  zoomChartIcon: {
-    backgroundColor: "transparent",
-    border: 0,
-    padding: 0,
-    cursor: "pointer",
-    "& svg": {
-      color: "#D0D0D0",
-      height: 16,
-    },
-    "&:hover": {
-      "& svg": {
-        color: "#404143",
-      },
-    },
-  },
-};
-
-export const widgetContainerCommon = {
-  widgetPanelDelimiter: {
-    padding: 10,
-  },
-  dashboardRow: {
-    display: "flex" as const,
-    flexDirection: "row" as const,
-    justifyContent: "flex-start" as const,
-    flexWrap: "wrap" as const,
-  },
 };
 
 export const tooltipCommon = {
@@ -806,10 +626,6 @@ export const wizardCommon = {
       flexDirection: "column",
     },
   },
-  sizeFactorContainer: {
-    marginLeft: 8,
-    alignSelf: "flex-start" as const,
-  },
   headerElement: {
     position: "sticky" as const,
     top: 0,
@@ -818,23 +634,10 @@ export const wizardCommon = {
     zIndex: 500,
     backgroundColor: "#fff",
   },
-  tableTitle: {
-    fontWeight: 700,
-    width: "30%",
-  },
-  poolError: {
-    color: "#dc1f2e",
-    fontSize: "0.75rem",
-    paddingLeft: 120,
-  },
   error: {
     color: "#dc1f2e",
     fontSize: "0.75rem",
   },
-  h3Section: {
-    marginTop: 0,
-    margin: 0,
-  },
   descriptionText: {
     fontSize: 14,
   },
@@ -856,31 +659,6 @@ export const wizardCommon = {
   },
 };
 
-export const buttonsStyles = {
-  anchorButton: {
-    textDecoration: "underline" as const,
-    textTransform: "unset" as const,
-    fontWeight: "normal" as const,
-    padding: 0,
-    lineHeight: "unset" as const,
-    height: "unset" as const,
-    width: "unset" as const,
-    textAlign: "left" as const,
-    border: 0,
-    minWidth: "unset" as const,
-  },
-};
-
-export const hrClass = {
-  hrClass: {
-    borderTop: 0,
-    borderLeft: 0,
-    borderRight: 0,
-    borderColor: "#999999",
-    backgroundColor: "transparent" as const,
-  },
-};
-
 export const tenantDetailsStyles = {
   buttonContainer: {
     display: "flex",
@@ -891,70 +669,17 @@ export const tenantDetailsStyles = {
     alignItems: "center" as const,
     justifyContent: "flex-start" as const,
   },
-  sizeFactorContainer: {
-    marginLeft: 8,
-  },
-  containerHeader: {
-    display: "flex" as const,
-    justifyContent: "space-between" as const,
-  },
   paperContainer: {
     padding: "15px 15px 15px 50px",
   },
-  infoGrid: {
-    display: "grid" as const,
-    gridTemplateColumns: "auto auto auto auto",
-    gridGap: 8,
-    "& div": {
-      display: "flex" as const,
-      alignItems: "center" as const,
-    },
-    "& div:nth-child(odd)": {
-      justifyContent: "flex-end" as const,
-      fontWeight: 700,
-    },
-    "& div:nth-child(2n)": {
-      paddingRight: 35,
-    },
-  },
-  masterActions: {
-    width: "25%",
-    minWidth: "120px",
-    "& div": {
-      margin: "5px 0px",
-    },
-  },
-  updateButton: {
-    backgroundColor: "transparent" as const,
-    border: 0,
-    padding: "0 6px",
-    cursor: "pointer" as const,
-    "&:focus, &:active": {
-      outline: "none",
-    },
-    "& svg": {
-      height: 12,
-    },
-  },
-  poolLabel: {
-    color: "#666666",
-  },
-  titleCol: {
-    fontWeight: 700,
-  },
   breadcrumLink: {
     textDecoration: "none",
     color: "black",
   },
-  healthCol: {
-    fontWeight: 700,
-    paddingRight: "10px",
-  },
   ...modalBasic,
   ...actionsTray,
-  ...buttonsStyles,
+
   ...searchField,
-  ...hrClass,
   actionsTray: {
     ...actionsTray.actionsTray,
     padding: "15px 0 0",
@@ -1020,31 +745,6 @@ const commonStateIcon = {
 };
 
 export const commonDashboardInfocard: any = {
-  cardIconContainer: {
-    display: "flex" as const,
-    position: "relative" as const,
-    alignItems: "center" as const,
-  },
-  stateContainer: {
-    display: "flex" as const,
-    flexWrap: "wrap" as const,
-    justifyContent: "flex-start" as const,
-  },
-  infoValue: {
-    fontWeight: 500,
-    color: "#07193E",
-    fontSize: 16,
-    margin: "8px 40px 5px 0",
-    display: "inline-flex" as const,
-    "& strong": {
-      marginRight: 4,
-    },
-    "& .min-icon": {
-      width: 20,
-      height: 20,
-    },
-    alignItems: "center" as const,
-  },
   redState: {
     color: "#F55B5B",
     ...commonStateIcon,
@@ -1073,44 +773,6 @@ export const commonDashboardInfocard: any = {
       height: 5,
     },
   },
-  innerState: {
-    fontSize: 8,
-    display: "flex" as const,
-    alignItems: "center" as const,
-    marginTop: -3,
-    "& .min-icon": {
-      marginTop: 5,
-      width: 10,
-      height: 10,
-    },
-  },
-  cardContainer: {
-    borderRadius: 10,
-    boxShadow: "0 0 15px #00000029",
-    marginBottom: 30,
-  },
-  cardHeader: {
-    "& .MuiCardHeader-title": {
-      fontWeight: "bolder" as const,
-    },
-  },
-  cardNumber: {
-    color: "#848484",
-    fontSize: 16,
-    fontWeight: 400,
-    marginBottom: 10,
-  },
-  referenceTitle: {
-    display: "flex",
-    alignItems: "center" as const,
-    lineHeight: 1,
-    fontWeight: "bold" as const,
-    "& .min-icon": {
-      width: 10,
-      height: 10,
-      marginTop: -5,
-    },
-  },
 };
 
 export const pageContentStyles = {
@@ -1119,35 +781,11 @@ export const pageContentStyles = {
   },
 };
 
-export const linkStyles = (color: string) => ({
-  link: {
-    textDecoration: "underline",
-    color,
-    backgroundColor: "transparent",
-    border: 0,
-    cursor: "pointer",
-  },
-});
-
 export const serviceAccountStyles: any = {
-  jsonPolicyEditor: {
-    minHeight: 400,
-    width: "100%",
-  },
   buttonContainer: {
     display: "flex",
     justifyContent: "flex-end",
   },
-  infoDetails: {
-    color: "#393939",
-    fontSize: 12,
-    fontStyle: "italic",
-    marginBottom: "8px",
-  },
-  containerScrollable: {
-    maxHeight: "calc(100vh - 200px)" as const,
-    overflowY: "auto" as const,
-  },
   codeMirrorContainer: {
     marginBottom: 20,
     paddingLeft: 15,
@@ -1376,22 +1014,6 @@ export const detailsPanel: any = {
     maxHeight: 180,
     overflowY: "auto",
   },
-  hrClass: {
-    borderTop: 0,
-    borderLeft: 0,
-    borderRight: 0,
-    borderColor: "#E2E2E2",
-    backgroundColor: "transparent",
-  },
-  sectionTitle: {
-    fontSize: 18,
-    color: "#000",
-    fontWeight: "bold",
-    borderBottom: "#E2E2E2 1px solid",
-    margin: "10px 22px",
-    paddingBottom: 18,
-    width: "100%",
-  },
   detailContainer: {
     padding: "0 22px",
     marginBottom: 20,
diff --git a/portal-ui/src/screens/Console/Common/FormHr.tsx b/portal-ui/src/screens/Console/Common/FormHr.tsx
new file mode 100644
index 000000000..56afbf50b
--- /dev/null
+++ b/portal-ui/src/screens/Console/Common/FormHr.tsx
@@ -0,0 +1,27 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2023 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 styled from "@emotion/styled";
+
+const FormHr = styled("hr")`
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
+  border-color: #999999;
+  background-color: transparent;
+`;
+
+export default FormHr;
diff --git a/portal-ui/src/screens/Console/Common/H3Section.tsx b/portal-ui/src/screens/Console/Common/H3Section.tsx
new file mode 100644
index 000000000..f1757eee2
--- /dev/null
+++ b/portal-ui/src/screens/Console/Common/H3Section.tsx
@@ -0,0 +1,22 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2023 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 styled from "@emotion/styled";
+
+const H3Section = styled("h3")`
+  margin: 0px;
+`;
+export default H3Section;
diff --git a/portal-ui/src/screens/Console/Common/IconsScreen.tsx b/portal-ui/src/screens/Console/Common/IconsScreen.tsx
index cfae4a232..bdd0f8977 100644
--- a/portal-ui/src/screens/Console/Common/IconsScreen.tsx
+++ b/portal-ui/src/screens/Console/Common/IconsScreen.tsx
@@ -39,7 +39,7 @@ interface IIconsScreenSimple {
 
 const styles = (theme: Theme) =>
   createStyles({
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
     root: {
       fontSize: 12,
       wordWrap: "break-word",
diff --git a/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationOptions.tsx b/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationOptions.tsx
index 5ed151c24..131d96f7d 100644
--- a/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationOptions.tsx
+++ b/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationOptions.tsx
@@ -51,7 +51,7 @@ const styles = (theme: Theme) =>
     },
     ...searchField,
     ...actionsTray,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 const getRoutePath = (path: string) => {
diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx
index d869b5f1a..504de37de 100644
--- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx
+++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx
@@ -82,7 +82,7 @@ const styles = (theme: Theme) =>
     ...searchField,
     ...settingsCommon,
     ...typesSelection,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
     customConfigurationPage: {
       minHeight: 400,
     },
diff --git a/portal-ui/src/screens/Console/Dashboard/Dashboard.tsx b/portal-ui/src/screens/Console/Dashboard/Dashboard.tsx
index d837c3baa..b41280060 100644
--- a/portal-ui/src/screens/Console/Dashboard/Dashboard.tsx
+++ b/portal-ui/src/screens/Console/Dashboard/Dashboard.tsx
@@ -33,7 +33,7 @@ interface IDashboardSimple {
 
 const styles = (theme: Theme) =>
   createStyles({
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 const Dashboard = ({ classes }: IDashboardSimple) => {
diff --git a/portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx b/portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx
index 2fbda5a3f..14fcc2f50 100644
--- a/portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx
+++ b/portal-ui/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx
@@ -21,10 +21,7 @@ import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { Box, LinearProgress } from "@mui/material";
-import {
-  actionsTray,
-  widgetContainerCommon,
-} from "../../Common/FormComponents/common/styleLibrary";
+import { actionsTray } from "../../Common/FormComponents/common/styleLibrary";
 import { IDashboardPanel } from "./types";
 import { panelsConfiguration } from "./utils";
 import { TabPanel } from "../../../shared/tabs";
@@ -61,7 +58,6 @@ interface IPrDashboard {
 const styles = (theme: Theme) =>
   createStyles({
     ...actionsTray,
-    ...widgetContainerCommon,
   });
 
 const PrDashboard = ({ apiPrefix = "admin", usage }: IPrDashboard) => {
diff --git a/portal-ui/src/screens/Console/DirectPV/DirectPVDrives.tsx b/portal-ui/src/screens/Console/DirectPV/DirectPVDrives.tsx
index 3ef8ed919..22325044d 100644
--- a/portal-ui/src/screens/Console/DirectPV/DirectPVDrives.tsx
+++ b/portal-ui/src/screens/Console/DirectPV/DirectPVDrives.tsx
@@ -73,7 +73,7 @@ const styles = (theme: Theme) =>
     },
     ...actionsTray,
     ...searchField,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 const DirectPVMain = ({ classes }: IDirectPVMain) => {
diff --git a/portal-ui/src/screens/Console/DirectPV/DirectPVVolumes.tsx b/portal-ui/src/screens/Console/DirectPV/DirectPVVolumes.tsx
index b460ae737..2b38a9d5a 100644
--- a/portal-ui/src/screens/Console/DirectPV/DirectPVVolumes.tsx
+++ b/portal-ui/src/screens/Console/DirectPV/DirectPVVolumes.tsx
@@ -47,7 +47,7 @@ const styles = (theme: Theme) =>
     },
     ...actionsTray,
     ...searchField,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 const DirectPVVolumes = ({ classes }: IDirectPVVolumesProps) => {
diff --git a/portal-ui/src/screens/Console/Groups/Groups.tsx b/portal-ui/src/screens/Console/Groups/Groups.tsx
index 3f353ee9e..e79d480ea 100644
--- a/portal-ui/src/screens/Console/Groups/Groups.tsx
+++ b/portal-ui/src/screens/Console/Groups/Groups.tsx
@@ -90,7 +90,7 @@ const styles = (theme: Theme) =>
       ...searchField.searchField,
       maxWidth: 380,
     },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 const Groups = ({ classes }: IGroupsProps) => {
diff --git a/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx b/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx
index 27d5ea901..06662d119 100644
--- a/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx
+++ b/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx
@@ -93,7 +93,7 @@ const styles = (theme: Theme) =>
         },
       },
     },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 interface IGroupDetailsProps {
diff --git a/portal-ui/src/screens/Console/Heal/Heal.tsx b/portal-ui/src/screens/Console/Heal/Heal.tsx
index acdb56c6f..f4b54e8b4 100644
--- a/portal-ui/src/screens/Console/Heal/Heal.tsx
+++ b/portal-ui/src/screens/Console/Heal/Heal.tsx
@@ -94,7 +94,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     ...inlineCheckboxes,
     ...searchField,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   })
 );
 
diff --git a/portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx b/portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx
index a3de32e6b..af713c92b 100644
--- a/portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx
+++ b/portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx
@@ -88,7 +88,7 @@ const styles = (theme: Theme) =>
       marginTop: 0,
     },
     ...actionsTray,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 interface IHealthInfo {
diff --git a/portal-ui/src/screens/Console/IDP/IDPConfigurationDetails.tsx b/portal-ui/src/screens/Console/IDP/IDPConfigurationDetails.tsx
index 1b89de81e..9c5c8be31 100644
--- a/portal-ui/src/screens/Console/IDP/IDPConfigurationDetails.tsx
+++ b/portal-ui/src/screens/Console/IDP/IDPConfigurationDetails.tsx
@@ -21,10 +21,8 @@ import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { Box, Grid } from "@mui/material";
 import {
-  buttonsStyles,
   containerForHeader,
   formFieldStyles,
-  hrClass,
   modalBasic,
   pageContentStyles,
   searchField,
@@ -76,9 +74,8 @@ const styles = (theme: Theme) =>
     },
     ...pageContentStyles,
     ...searchField,
-    ...hrClass,
-    ...buttonsStyles,
-    ...containerForHeader(theme.spacing(4)),
+
+    ...containerForHeader,
   });
 
 const IDPConfigurationDetails = ({
diff --git a/portal-ui/src/screens/Console/IDP/IDPConfigurations.tsx b/portal-ui/src/screens/Console/IDP/IDPConfigurations.tsx
index 868188b3b..1b4308980 100644
--- a/portal-ui/src/screens/Console/IDP/IDPConfigurations.tsx
+++ b/portal-ui/src/screens/Console/IDP/IDPConfigurations.tsx
@@ -47,7 +47,7 @@ type IDPConfigurationsProps = {
 
 const styles = (theme: Theme) =>
   createStyles({
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 const IDPConfigurations = ({ classes, idpType }: IDPConfigurationsProps) => {
diff --git a/portal-ui/src/screens/Console/KMS/ListKeys.tsx b/portal-ui/src/screens/Console/KMS/ListKeys.tsx
index a3163916b..647dc7d74 100644
--- a/portal-ui/src/screens/Console/KMS/ListKeys.tsx
+++ b/portal-ui/src/screens/Console/KMS/ListKeys.tsx
@@ -49,7 +49,7 @@ const DeleteKMSModal = withSuspense(
 const styles = (theme: Theme) =>
   createStyles({
     ...searchField,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 interface IKeysProps {
diff --git a/portal-ui/src/screens/Console/Logs/ErrorLogs/ErrorLogs.tsx b/portal-ui/src/screens/Console/Logs/ErrorLogs/ErrorLogs.tsx
index 9ce56b42a..35c87bcf6 100644
--- a/portal-ui/src/screens/Console/Logs/ErrorLogs/ErrorLogs.tsx
+++ b/portal-ui/src/screens/Console/Logs/ErrorLogs/ErrorLogs.tsx
@@ -32,7 +32,6 @@ import {
   actionsTray,
   containerForHeader,
   inlineCheckboxes,
-  logsCommon,
   searchField,
 } from "../../Common/FormComponents/common/styleLibrary";
 import PageLayout from "../../Common/Layout/PageLayout";
@@ -72,9 +71,9 @@ const useStyles = makeStyles((theme: Theme) =>
       marginBottom: 0,
     },
     ...searchField,
-    ...logsCommon,
+
     ...inlineCheckboxes,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   })
 );
 
diff --git a/portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx b/portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx
index 71072e35a..821274424 100644
--- a/portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx
+++ b/portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx
@@ -25,7 +25,6 @@ import withStyles from "@mui/styles/withStyles";
 import {
   advancedFilterToggleStyles,
   containerForHeader,
-  logsCommon,
   tableStyles,
 } from "../../Common/FormComponents/common/styleLibrary";
 import { IReqInfoSearchResults, ISearchResponse } from "./types";
@@ -115,8 +114,8 @@ const styles = (theme: Theme) =>
       alignItems: "center",
       justifyContent: "flex-start",
     },
-    ...logsCommon,
-    ...containerForHeader(theme.spacing(4)),
+
+    ...containerForHeader,
   });
 
 const LogsSearchMain = ({ classes }: ILogSearchProps) => {
diff --git a/portal-ui/src/screens/Console/Marketplace/SetEmailModal.tsx b/portal-ui/src/screens/Console/Marketplace/SetEmailModal.tsx
index efc7368c0..2a00415be 100644
--- a/portal-ui/src/screens/Console/Marketplace/SetEmailModal.tsx
+++ b/portal-ui/src/screens/Console/Marketplace/SetEmailModal.tsx
@@ -31,7 +31,7 @@ import { euTimezones } from "./euTimezones";
 
 const styles = (theme: Theme) =>
   createStyles({
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 const reEmail =
diff --git a/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx b/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx
index f3ba5ea03..83d25707a 100644
--- a/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx
+++ b/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx
@@ -62,7 +62,7 @@ const styles = (theme: Theme) =>
   createStyles({
     ...actionsTray,
     ...settingsCommon,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
     twHeight: {
       minHeight: 400,
     },
diff --git a/portal-ui/src/screens/Console/ObjectBrowser/BrowserBreadcrumbs.tsx b/portal-ui/src/screens/Console/ObjectBrowser/BrowserBreadcrumbs.tsx
index a1fa56087..414df587e 100644
--- a/portal-ui/src/screens/Console/ObjectBrowser/BrowserBreadcrumbs.tsx
+++ b/portal-ui/src/screens/Console/ObjectBrowser/BrowserBreadcrumbs.tsx
@@ -18,14 +18,13 @@ import React, { Fragment, useState } from "react";
 import { useSelector } from "react-redux";
 import CopyToClipboard from "react-copy-to-clipboard";
 import Grid from "@mui/material/Grid";
-import withStyles from "@mui/styles/withStyles";
 import createStyles from "@mui/styles/createStyles";
 import { Theme } from "@mui/material/styles";
 import { Link, useNavigate } from "react-router-dom";
 import { IconButton } from "@mui/material";
 import { objectBrowserCommon } from "../Common/FormComponents/common/styleLibrary";
 import { encodeURLString } from "../../../common/utils";
-import { BackCaretIcon, Button, CopyIcon, NewPathIcon } from "mds";
+import { BackCaretIcon, Button, CopyIcon, NewPathIcon, Tooltip } from "mds";
 import { hasPermission } from "../../../common/SecureComponent";
 import {
   IAM_SCOPES,
@@ -35,7 +34,7 @@ import withSuspense from "../Common/Components/withSuspense";
 import { setSnackBarMessage } from "../../../systemSlice";
 import { AppState, useAppDispatch } from "../../../store";
 import { setVersionsModeEnabled } from "./objectBrowserSlice";
-import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
+import makeStyles from "@mui/styles/makeStyles";
 
 const CreatePathModal = withSuspense(
   React.lazy(
@@ -43,16 +42,16 @@ const CreatePathModal = withSuspense(
   )
 );
 
-const styles = (theme: Theme) =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     ...objectBrowserCommon,
     slashSpacingStyle: {
       margin: "0 5px",
     },
-  });
+  })
+);
 
 interface IObjectBrowser {
-  classes: any;
   bucketName: string;
   internalPaths: string;
   hidePathButton?: boolean;
@@ -60,7 +59,6 @@ interface IObjectBrowser {
 }
 
 const BrowserBreadcrumbs = ({
-  classes,
   bucketName,
   internalPaths,
   hidePathButton,
@@ -68,6 +66,7 @@ const BrowserBreadcrumbs = ({
 }: IObjectBrowser) => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
+  const classes = useStyles();
 
   const rewindEnabled = useSelector(
     (state: AppState) => state.objectBrowser.rewind.rewindEnabled
@@ -228,7 +227,7 @@ const BrowserBreadcrumbs = ({
           <div className={classes.additionalOptions}>{additionalOptions}</div>
         </Grid>
         {!hidePathButton && (
-          <TooltipWrapper
+          <Tooltip
             tooltip={
               canCreatePath
                 ? "Choose or create a new path"
@@ -251,7 +250,7 @@ const BrowserBreadcrumbs = ({
               variant={"regular"}
               label={"Create new path"}
             />
-          </TooltipWrapper>
+          </Tooltip>
         )}
       </div>
       <div className={classes.breadcrumbsSecond}>{additionalOptions}</div>
@@ -259,4 +258,4 @@ const BrowserBreadcrumbs = ({
   );
 };
 
-export default withStyles(styles)(BrowserBreadcrumbs);
+export default BrowserBreadcrumbs;
diff --git a/portal-ui/src/screens/Console/ObjectBrowser/OBBucketList.tsx b/portal-ui/src/screens/Console/ObjectBrowser/OBBucketList.tsx
index 80fffc771..1e464438d 100644
--- a/portal-ui/src/screens/Console/ObjectBrowser/OBBucketList.tsx
+++ b/portal-ui/src/screens/Console/ObjectBrowser/OBBucketList.tsx
@@ -70,7 +70,7 @@ const useStyles = makeStyles((theme: Theme) =>
       },
     },
     ...actionsTray,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   })
 );
 
diff --git a/portal-ui/src/screens/Console/ObjectBrowser/RenameLongFilename.tsx b/portal-ui/src/screens/Console/ObjectBrowser/RenameLongFilename.tsx
index a0a29ce97..268ebeceb 100644
--- a/portal-ui/src/screens/Console/ObjectBrowser/RenameLongFilename.tsx
+++ b/portal-ui/src/screens/Console/ObjectBrowser/RenameLongFilename.tsx
@@ -56,7 +56,7 @@ const useStyles = makeStyles((theme: Theme) =>
     ...modalStyleUtils,
     ...formFieldStyles,
     ...spacingUtils,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   })
 );
 
diff --git a/portal-ui/src/screens/Console/Policies/ListPolicies.tsx b/portal-ui/src/screens/Console/Policies/ListPolicies.tsx
index 5de9bbd7c..995e9bcc1 100644
--- a/portal-ui/src/screens/Console/Policies/ListPolicies.tsx
+++ b/portal-ui/src/screens/Console/Policies/ListPolicies.tsx
@@ -67,7 +67,7 @@ const styles = (theme: Theme) =>
       ...searchField.searchField,
       maxWidth: 380,
     },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 interface IPoliciesProps {
diff --git a/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx b/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
index 3261e15b5..eb96a1c67 100644
--- a/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
+++ b/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
@@ -99,7 +99,7 @@ const styles = (theme: Theme) =>
     ...actionsTray,
     ...searchField,
     ...modalBasic,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 interface IPolicyDetailsProps {
diff --git a/portal-ui/src/screens/Console/Speedtest/Speedtest.tsx b/portal-ui/src/screens/Console/Speedtest/Speedtest.tsx
index 13274b0c7..7ac8111dd 100644
--- a/portal-ui/src/screens/Console/Speedtest/Speedtest.tsx
+++ b/portal-ui/src/screens/Console/Speedtest/Speedtest.tsx
@@ -79,7 +79,7 @@ const useStyles = makeStyles((theme: Theme) =>
     ...actionsTray,
     ...searchField,
     ...formFieldStyles,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   })
 );
 
diff --git a/portal-ui/src/screens/Console/Storage/StoragePVCs.tsx b/portal-ui/src/screens/Console/Storage/StoragePVCs.tsx
index 4e89c42aa..85023ddd0 100644
--- a/portal-ui/src/screens/Console/Storage/StoragePVCs.tsx
+++ b/portal-ui/src/screens/Console/Storage/StoragePVCs.tsx
@@ -47,7 +47,7 @@ const styles = (theme: Theme) =>
     },
     ...actionsTray,
     ...searchField,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 const StorageVolumes = ({ classes }: IStorageVolumesProps) => {
diff --git a/portal-ui/src/screens/Console/Support/GetApiKeyModal.tsx b/portal-ui/src/screens/Console/Support/GetApiKeyModal.tsx
index 05f2f7790..eb80f52eb 100644
--- a/portal-ui/src/screens/Console/Support/GetApiKeyModal.tsx
+++ b/portal-ui/src/screens/Console/Support/GetApiKeyModal.tsx
@@ -39,7 +39,7 @@ const styles = (theme: Theme) =>
     sizedLabel: {
       minWidth: "75px",
     },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
     ...spacingUtils,
   });
 
diff --git a/portal-ui/src/screens/Console/Support/Profile.tsx b/portal-ui/src/screens/Console/Support/Profile.tsx
index 80fec6d1b..fdde0b6fb 100644
--- a/portal-ui/src/screens/Console/Support/Profile.tsx
+++ b/portal-ui/src/screens/Console/Support/Profile.tsx
@@ -49,7 +49,7 @@ const styles = (theme: Theme) =>
       },
     },
     ...actionsTray,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 interface IProfileProps {
diff --git a/portal-ui/src/screens/Console/Support/Register.tsx b/portal-ui/src/screens/Console/Support/Register.tsx
index ed525a36e..eb306d79b 100644
--- a/portal-ui/src/screens/Console/Support/Register.tsx
+++ b/portal-ui/src/screens/Console/Support/Register.tsx
@@ -76,17 +76,13 @@ interface IRegister {
 
 const styles = (theme: Theme) =>
   createStyles({
-    link: {
-      color: "#2781B0",
-      cursor: "pointer",
-    },
     sizedLabel: {
       minWidth: "75px",
     },
     ...actionsTray,
     ...searchField,
     ...spacingUtils,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 const Register = ({ classes }: IRegister) => {
@@ -560,10 +556,7 @@ const Register = ({ classes }: IRegister) => {
         }}
       >
         {clusterRegistered && licenseInfo ? (
-          <ClusterRegistered
-            email={licenseInfo.email}
-            linkClass={classes.link}
-          />
+          <ClusterRegistered email={licenseInfo.email} />
         ) : (
           <ApiKeyRegister
             afterRegister={fetchLicenseInfo}
@@ -588,10 +581,7 @@ const Register = ({ classes }: IRegister) => {
         }}
       >
         {clusterRegistered && licenseInfo ? (
-          <ClusterRegistered
-            email={licenseInfo.email}
-            linkClass={classes.link}
-          />
+          <ClusterRegistered email={licenseInfo.email} />
         ) : null}
         <Box
           sx={{
@@ -706,10 +696,7 @@ const Register = ({ classes }: IRegister) => {
         }}
       >
         {clusterRegistered && licenseInfo ? (
-          <ClusterRegistered
-            email={licenseInfo.email}
-            linkClass={classes.link}
-          />
+          <ClusterRegistered email={licenseInfo.email} />
         ) : (
           clusterRegistrationForm
         )}
diff --git a/portal-ui/src/screens/Console/Support/RegisterOperator.tsx b/portal-ui/src/screens/Console/Support/RegisterOperator.tsx
index cefee1b4d..6047a8722 100644
--- a/portal-ui/src/screens/Console/Support/RegisterOperator.tsx
+++ b/portal-ui/src/screens/Console/Support/RegisterOperator.tsx
@@ -43,14 +43,10 @@ interface IRegister {
 
 const styles = (theme: Theme) =>
   createStyles({
-    link: {
-      color: "#2781B0",
-      cursor: "pointer",
-    },
     ...actionsTray,
     ...searchField,
     ...spacingUtils,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 const RegisterOperator = ({ classes }: IRegister) => {
@@ -84,7 +80,7 @@ const RegisterOperator = ({ classes }: IRegister) => {
         }}
       >
         {apiKeyRegistered ? (
-          <ClusterRegistered email={"Operator"} linkClass={classes.link} />
+          <ClusterRegistered email={"Operator"} />
         ) : (
           <ApiKeyRegister
             registerEndpoint={"/api/v1/subnet/apikey/register"}
diff --git a/portal-ui/src/screens/Console/Support/utils.tsx b/portal-ui/src/screens/Console/Support/utils.tsx
index 3ce0ce7ae..202a97b18 100644
--- a/portal-ui/src/screens/Console/Support/utils.tsx
+++ b/portal-ui/src/screens/Console/Support/utils.tsx
@@ -26,13 +26,7 @@ export const FormTitle = ({
   );
 };
 
-export const ClusterRegistered = ({
-  email,
-  linkClass,
-}: {
-  email: string;
-  linkClass: string;
-}) => {
+export const ClusterRegistered = ({ email }: { email: string }) => {
   return (
     <Fragment>
       <RegistrationStatusBanner email={email} />
@@ -50,7 +44,10 @@ export const ClusterRegistered = ({
           <Link
             href="https://subnet.min.io"
             target="_blank"
-            className={linkClass}
+            style={{
+              color: "#2781B0",
+              cursor: "pointer",
+            }}
           >
             SUBNET
           </Link>{" "}
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Affinity.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Affinity.tsx
index 9219c1be6..328a1abf7 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Affinity.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Affinity.tsx
@@ -48,6 +48,7 @@ import {
   setTolerationInfo,
   updateAddField,
 } from "../createTenantSlice";
+import H3Section from "../../../Common/H3Section";
 
 interface IAffinityProps {
   classes: any;
@@ -255,7 +256,7 @@ const Affinity = ({ classes }: IAffinityProps) => {
   return (
     <Paper className={classes.paperWrapper}>
       <div className={classes.headerElement}>
-        <h3 className={classes.h3Section}>Pod Placement</h3>
+        <H3Section>Pod Placement</H3Section>
         <span className={classes.descriptionText}>
           Configure how pods will be assigned to nodes
         </span>
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/ConfigLogSearch.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/ConfigLogSearch.tsx
index 111fbbbb4..718580643 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/ConfigLogSearch.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/ConfigLogSearch.tsx
@@ -37,6 +37,7 @@ import SelectWrapper from "../../../Common/FormComponents/SelectWrapper/SelectWr
 import InputUnitMenu from "../../../Common/FormComponents/InputUnitMenu/InputUnitMenu";
 import SectionH1 from "../../../Common/SectionH1";
 import { isPageValid, updateAddField } from "../createTenantSlice";
+import FormHr from "../../../Common/FormHr";
 
 interface IConfigureProps {
   classes: any;
@@ -289,7 +290,7 @@ const ConfigLogSearch = ({ classes }: IConfigureProps) => {
           </span>
         </Grid>
         <Grid xs={12}>
-          <hr className={classes.hrClass} />
+          <FormHr />
         </Grid>
         {logSearchEnabled && (
           <Fragment>
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/ConfigPrometheus.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/ConfigPrometheus.tsx
index 44cceb979..696a57c5a 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/ConfigPrometheus.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/ConfigPrometheus.tsx
@@ -38,6 +38,7 @@ import SelectWrapper from "../../../Common/FormComponents/SelectWrapper/SelectWr
 import InputUnitMenu from "../../../Common/FormComponents/InputUnitMenu/InputUnitMenu";
 import SectionH1 from "../../../Common/SectionH1";
 import { isPageValid, updateAddField } from "../createTenantSlice";
+import FormHr from "../../../Common/FormHr";
 
 interface IConfigureProps {
   classes: any;
@@ -256,7 +257,7 @@ const ConfigPrometheus = ({ classes }: IConfigureProps) => {
         </span>
       </Grid>
       <Grid xs={12}>
-        <hr className={classes.hrClass} />
+        <FormHr />
       </Grid>
       <Grid container spacing={1}>
         {prometheusEnabled && (
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Configure.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Configure.tsx
index 8e03172f2..d5da6b00d 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Configure.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Configure.tsx
@@ -51,6 +51,7 @@ import {
   updateAddField,
 } from "../createTenantSlice";
 import SelectWrapper from "../../../Common/FormComponents/SelectWrapper/SelectWrapper";
+import H3Section from "../../../Common/H3Section";
 
 interface IConfigureProps {
   classes: any;
@@ -285,7 +286,7 @@ const Configure = ({ classes }: IConfigureProps) => {
   return (
     <Paper className={classes.paperWrapper}>
       <div className={classes.headerElement}>
-        <h3 className={classes.h3Section}>Configure</h3>
+        <H3Section>Configure</H3Section>
         <span className={classes.descriptionText}>
           Basic configurations for tenant management
         </span>
@@ -611,7 +612,7 @@ const Configure = ({ classes }: IConfigureProps) => {
       <Divider />
 
       <div className={classes.headerElement}>
-        <h3 className={classes.h3Section}>Additional Environment Variables</h3>
+        <H3Section>Additional Environment Variables</H3Section>
         <span className={classes.descriptionText}>
           Define additional environment variables to be used by your MinIO pods
         </span>
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Encryption.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Encryption.tsx
index 8a1dd82d2..123befb03 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Encryption.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Encryption.tsx
@@ -56,6 +56,7 @@ import SelectWrapper from "../../../Common/FormComponents/SelectWrapper/SelectWr
 import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
 import CodeMirrorWrapper from "../../../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
+import FormHr from "../../../Common/FormHr";
 
 interface IEncryptionProps {
   classes: any;
@@ -326,7 +327,7 @@ const Encryption = ({ classes }: IEncryptionProps) => {
           </span>
         </Grid>
         <Grid xs={12}>
-          <hr className={classes.hrClass} />
+          <FormHr />
         </Grid>
 
         {enableEncryption && (
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/IdentityProvider.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/IdentityProvider.tsx
index 1e2146ef8..1804dd983 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/IdentityProvider.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/IdentityProvider.tsx
@@ -36,6 +36,7 @@ import {
   LDAPLogoElement,
   OIDCLogoElement,
 } from "../../LogoComponents";
+import H3Section from "../../../Common/H3Section";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -71,7 +72,7 @@ const IdentityProvider = () => {
   return (
     <Paper className={classes.paperWrapper}>
       <div className={classes.headerElement}>
-        <h3 className={classes.h3Section}>Identity Provider</h3>
+        <H3Section>Identity Provider</H3Section>
         <span className={classes.descriptionText}>
           Access to the tenant can be controlled via an external Identity
           Manager.
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Images.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Images.tsx
index 1d4e37d47..ca3ef541b 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Images.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Images.tsx
@@ -22,7 +22,6 @@ import withStyles from "@mui/styles/withStyles";
 import { Grid, Paper } from "@mui/material";
 import {
   formFieldStyles,
-  modalBasic,
   wizardCommon,
 } from "../../../Common/FormComponents/common/styleLibrary";
 import { AppState, useAppDispatch } from "../../../../../store";
@@ -34,6 +33,7 @@ import {
 import FormSwitchWrapper from "../../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import InputBoxWrapper from "../../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import { isPageValid, updateAddField } from "../createTenantSlice";
+import H3Section from "../../../Common/H3Section";
 
 interface IImagesProps {
   classes: any;
@@ -42,7 +42,6 @@ interface IImagesProps {
 const styles = (theme: Theme) =>
   createStyles({
     ...formFieldStyles,
-    ...modalBasic,
     ...wizardCommon,
   });
 
@@ -307,7 +306,7 @@ const Images = ({ classes }: IImagesProps) => {
   return (
     <Paper className={classes.paperWrapper}>
       <div className={classes.headerElement}>
-        <h3 className={classes.h3Section}>Container Images</h3>
+        <H3Section>Container Images</H3Section>
         <span className={classes.descriptionText}>
           Specify the container images used by the Tenant and it's features.
         </span>
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Security.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Security.tsx
index c110be07e..543c77a13 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Security.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/Security.tsx
@@ -46,6 +46,7 @@ import {
   updateAddField,
 } from "../createTenantSlice";
 import TLSHelpBox from "../../HelpBox/TLSHelpBox";
+import H3Section from "../../../Common/H3Section";
 
 interface ISecurityProps {
   classes: any;
@@ -172,7 +173,7 @@ const Security = ({ classes }: ISecurityProps) => {
   return (
     <Paper className={classes.paperWrapper}>
       <div className={classes.headerElement}>
-        <h3 className={classes.h3Section}>Security</h3>
+        <H3Section>Security</H3Section>
       </div>
       <Grid container spacing={1}>
         <Grid item xs={12}>
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantResources/NameTenantMain.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantResources/NameTenantMain.tsx
index 4526cff4d..85df8effd 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantResources/NameTenantMain.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantResources/NameTenantMain.tsx
@@ -41,6 +41,7 @@ import {
 } from "../../createTenantSlice";
 import { selFeatures } from "../../../../consoleSlice";
 import NamespaceSelector from "./NamespaceSelector";
+import H3Section from "../../../../Common/H3Section";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -129,7 +130,7 @@ const NameTenantMain = ({ classes, formToRender }: INameTenantMainScreen) => {
             <Grid container>
               <Grid item xs={12}>
                 <div className={classes.headerElement}>
-                  <h3 className={classes.h3Section}>Name</h3>
+                  <H3Section>Name</H3Section>
                   <span className={classes.descriptionText}>
                     How would you like to name this new tenant?
                   </span>
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantResources/TenantSize.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantResources/TenantSize.tsx
index 36398c9a2..e28254cd5 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantResources/TenantSize.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantResources/TenantSize.tsx
@@ -45,6 +45,7 @@ import TenantSizeResources from "./TenantSizeResources";
 import InputUnitMenu from "../../../../Common/FormComponents/InputUnitMenu/InputUnitMenu";
 import { IMkEnvs } from "./utils";
 import { isPageValid, updateAddField } from "../../createTenantSlice";
+import H3Section from "../../../../Common/H3Section";
 
 interface ITenantSizeProps {
   classes: any;
@@ -311,7 +312,7 @@ const TenantSize = ({ classes, formToRender }: ITenantSizeProps) => {
     <Fragment>
       <Grid item xs={12}>
         <div className={classes.headerElement}>
-          <h3 className={classes.h3Section}>Capacity</h3>
+          <H3Section>Capacity</H3Section>
           <span className={classes.descriptionText}>
             Please select the desired capacity
           </span>
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantResources/TenantSizeMK.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantResources/TenantSizeMK.tsx
index 18c882e7d..2f18ff26f 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantResources/TenantSizeMK.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantResources/TenantSizeMK.tsx
@@ -42,6 +42,7 @@ import {
   mkPanelConfigurations,
 } from "./utils";
 import { isPageValid, updateAddField } from "../../createTenantSlice";
+import H3Section from "../../../../Common/H3Section";
 
 interface ITenantSizeAWSProps {
   classes: any;
@@ -300,7 +301,7 @@ const TenantSizeMK = ({
     <Fragment>
       <Grid item xs={12}>
         <div className={classes.headerElement}>
-          <h3 className={classes.h3Section}>Tenant Size</h3>
+          <H3Section>Tenant Size</H3Section>
           <span className={classes.descriptionText}>
             Please select the desired capacity
           </span>
diff --git a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantResources/TenantSizeResources.tsx b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantResources/TenantSizeResources.tsx
index 4e5933e4d..508fcc236 100644
--- a/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantResources/TenantSizeResources.tsx
+++ b/portal-ui/src/screens/Console/Tenants/AddTenant/Steps/TenantResources/TenantSizeResources.tsx
@@ -34,6 +34,7 @@ import FormSwitchWrapper from "../../../../Common/FormComponents/FormSwitchWrapp
 import { floor } from "lodash";
 import InputUnitMenu from "../../../../Common/FormComponents/InputUnitMenu/InputUnitMenu";
 import { isPageValid, updateAddField } from "../../createTenantSlice";
+import H3Section from "../../../../Common/H3Section";
 
 interface ITenantSizeResourcesProps {
   classes: any;
@@ -220,7 +221,7 @@ ITenantSizeResourcesProps) => {
     <Fragment>
       <Grid item xs={12}>
         <div className={classes.headerElement}>
-          <h3 className={classes.h3Section}>Resources</h3>
+          <H3Section>Resources</H3Section>
           <span className={classes.descriptionText}>
             You may specify the amount of CPU and Memory that MinIO servers
             should reserve on each node.
diff --git a/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx b/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
index 64de202eb..810ff590a 100644
--- a/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
+++ b/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
@@ -63,7 +63,7 @@ const styles = (theme: Theme) =>
   createStyles({
     ...actionsTray,
     ...searchField,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
     tenantsList: {
       height: "calc(100vh - 195px)",
     },
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/ConfirmationDialog.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/ConfirmationDialog.tsx
index 41d732efa..6a6894843 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/ConfirmationDialog.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/ConfirmationDialog.tsx
@@ -31,7 +31,7 @@ interface IConfirmationDialog {
 const styles = (theme: Theme) =>
   createStyles({
     ...tenantDetailsStyles,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 const ConfirmationDialog = ({
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/EditTenantMonitoringScreen.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/EditTenantMonitoringScreen.tsx
index 791e00cae..b2f63a2c5 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/EditTenantMonitoringScreen.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/EditTenantMonitoringScreen.tsx
@@ -64,6 +64,7 @@ import { clearValidationError, imagePattern, numericPattern } from "../utils";
 import SecurityContextSelector from "../securityContextSelector";
 import { setFSGroupChangePolicy } from "../tenantSecurityContextSlice";
 import { fsGroupChangePolicyType } from "../types";
+import FormHr from "../../Common/FormHr";
 
 interface ITenantMonitoring {
   classes: any;
@@ -73,7 +74,7 @@ const styles = (theme: Theme) =>
   createStyles({
     ...tenantDetailsStyles,
     ...spacingUtils,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
     ...createTenantCommon,
     ...formFieldStyles,
     ...modalBasic,
@@ -332,7 +333,7 @@ const TenantMonitoring = ({ classes }: ITenantMonitoring) => {
           />
         </Grid>
         <Grid item xs={12}>
-          <hr className={classes.hrClass} />
+          <FormHr />
         </Grid>
       </Grid>
 
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/KeyPairView.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/KeyPairView.tsx
index a81b18bf9..f3a2c0626 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/KeyPairView.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/KeyPairView.tsx
@@ -40,7 +40,7 @@ const styles = (theme: Theme) =>
     listHeight: {
       height: "50",
     },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 const KeyPairView = ({ classes, records, recordName }: IKeyPairView) => {
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/LoggingDBDetails.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/LoggingDBDetails.tsx
index efdfbc5d3..eef983a59 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/LoggingDBDetails.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/LoggingDBDetails.tsx
@@ -65,7 +65,7 @@ const styles = (theme: Theme) =>
   createStyles({
     ...tenantDetailsStyles,
     ...spacingUtils,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
     ...createTenantCommon,
     ...formFieldStyles,
     ...modalBasic,
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/LoggingDetails.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/LoggingDetails.tsx
index 773462655..c7dc11faf 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/LoggingDetails.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/LoggingDetails.tsx
@@ -64,7 +64,7 @@ const styles = (theme: Theme) =>
   createStyles({
     ...tenantDetailsStyles,
     ...spacingUtils,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
     ...createTenantCommon,
     ...formFieldStyles,
     ...modalBasic,
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/PodsSummary.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/PodsSummary.tsx
index 985d4ac2f..6010baf58 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/PodsSummary.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/PodsSummary.tsx
@@ -45,7 +45,7 @@ const styles = (theme: Theme) =>
   createStyles({
     ...tenantDetailsStyles,
     ...tableStyles,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 const PodsSummary = ({ classes }: IPodsSummary) => {
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/AddPool/PoolConfiguration.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/AddPool/PoolConfiguration.tsx
index e5f16b449..e5680d632 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/AddPool/PoolConfiguration.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/AddPool/PoolConfiguration.tsx
@@ -34,6 +34,7 @@ import {
 import FormSwitchWrapper from "../../../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import InputBoxWrapper from "../../../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import { isPoolPageValid, setPoolField } from "./addPoolSlice";
+import H3Section from "../../../../Common/H3Section";
 
 interface IConfigureProps {
   classes: any;
@@ -164,7 +165,7 @@ const PoolConfiguration = ({ classes }: IConfigureProps) => {
   return (
     <Paper className={classes.paperWrapper}>
       <div className={classes.headerElement}>
-        <h3 className={classes.h3Section}>Configure</h3>
+        <H3Section>Configure</H3Section>
         <span className={classes.descriptionText}>
           Aditional Configurations for the new Pool
         </span>
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/AddPool/PoolPodPlacement.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/AddPool/PoolPodPlacement.tsx
index 5b455ae57..a99994f4b 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/AddPool/PoolPodPlacement.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/AddPool/PoolPodPlacement.tsx
@@ -48,6 +48,7 @@ import {
   setPoolKeyValuePairs,
   setPoolTolerationInfo,
 } from "./addPoolSlice";
+import H3Section from "../../../../Common/H3Section";
 
 interface IAffinityProps {
   classes: any;
@@ -255,7 +256,7 @@ const Affinity = ({ classes }: IAffinityProps) => {
   return (
     <Paper className={classes.paperWrapper}>
       <div className={classes.headerElement}>
-        <h3 className={classes.h3Section}>Pod Placement</h3>
+        <H3Section>Pod Placement</H3Section>
         <span className={classes.descriptionText}>
           Configure how pods will be assigned to nodes
         </span>
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/AddPool/PoolResources.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/AddPool/PoolResources.tsx
index 56a5cd124..763324fa9 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/AddPool/PoolResources.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/AddPool/PoolResources.tsx
@@ -44,6 +44,7 @@ import {
   setPoolField,
   setPoolStorageClasses,
 } from "./addPoolSlice";
+import H3Section from "../../../../Common/H3Section";
 
 interface IPoolResourcesProps {
   classes: any;
@@ -197,7 +198,7 @@ const PoolResources = ({ classes }: IPoolResourcesProps) => {
   return (
     <Paper className={classes.paperWrapper}>
       <div className={classes.headerElement}>
-        <h3 className={classes.h3Section}>New Pool Configuration</h3>
+        <H3Section>New Pool Configuration</H3Section>
         <span className={classes.descriptionText}>
           Configure a new Pool to expand MinIO storage
         </span>
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/Details/PoolsListing.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/Details/PoolsListing.tsx
index 0e6298e4d..17253ae45 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/Details/PoolsListing.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/Details/PoolsListing.tsx
@@ -46,7 +46,7 @@ const styles = (theme: Theme) =>
     ...tenantDetailsStyles,
     ...actionsTray,
     ...tableStyles,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 const PoolsListing = ({ classes, setPoolDetailsView }: IPoolsSummary) => {
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/EditPool/EditPoolConfiguration.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/EditPool/EditPoolConfiguration.tsx
index fa90e03d3..e1921b49d 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/EditPool/EditPoolConfiguration.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/EditPool/EditPoolConfiguration.tsx
@@ -35,6 +35,7 @@ import {
 import FormSwitchWrapper from "../../../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import InputBoxWrapper from "../../../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import { isEditPoolPageValid, setEditPoolField } from "./editPoolSlice";
+import H3Section from "../../../../Common/H3Section";
 
 interface IConfigureProps {
   classes: any;
@@ -166,7 +167,7 @@ const PoolConfiguration = ({ classes }: IConfigureProps) => {
   return (
     <Paper className={classes.paperWrapper}>
       <div className={classes.headerElement}>
-        <h3 className={classes.h3Section}>Configure</h3>
+        <H3Section>Configure</H3Section>
       </div>
       <Grid item xs={12} className={classes.configSectionItem}>
         <FormSwitchWrapper
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/EditPool/EditPoolPlacement.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/EditPool/EditPoolPlacement.tsx
index dfef02a0c..9d0d79ff9 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/EditPool/EditPoolPlacement.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/EditPool/EditPoolPlacement.tsx
@@ -48,6 +48,7 @@ import {
   setEditPoolKeyValuePairs,
   setEditPoolTolerationInfo,
 } from "./editPoolSlice";
+import H3Section from "../../../../Common/H3Section";
 
 interface IAffinityProps {
   classes: any;
@@ -255,7 +256,7 @@ const Affinity = ({ classes }: IAffinityProps) => {
   return (
     <Paper className={classes.paperWrapper}>
       <div className={classes.headerElement}>
-        <h3 className={classes.h3Section}>Pod Placement</h3>
+        <H3Section>Pod Placement</H3Section>
       </div>
       <Grid item xs={12} className={classes.affinityConfigField}>
         <Grid item className={classes.affinityFieldLabel}>
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/EditPool/EditPoolResources.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/EditPool/EditPoolResources.tsx
index 85e082e6a..3a18b94da 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/EditPool/EditPoolResources.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/Pools/EditPool/EditPoolResources.tsx
@@ -44,6 +44,7 @@ import {
   setEditPoolField,
   setEditPoolStorageClasses,
 } from "./editPoolSlice";
+import H3Section from "../../../../Common/H3Section";
 
 interface IPoolResourcesProps {
   classes: any;
@@ -197,7 +198,7 @@ const PoolResources = ({ classes }: IPoolResourcesProps) => {
   return (
     <Paper className={classes.paperWrapper}>
       <div className={classes.headerElement}>
-        <h3 className={classes.h3Section}>Pool Resources</h3>
+        <H3Section>Pool Resources</H3Section>
       </div>
 
       <Grid item xs={12} className={classes.formFieldRow}>
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/PoolsSummary.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/PoolsSummary.tsx
index 722815b55..c399d1422 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/PoolsSummary.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/PoolsSummary.tsx
@@ -45,7 +45,7 @@ const styles = (theme: Theme) =>
     ...tenantDetailsStyles,
     ...actionsTray,
     ...tableStyles,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 const PoolsSummary = ({ classes }: IPoolsSummary) => {
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/SubnetLicenseTenant.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/SubnetLicenseTenant.tsx
index fae6f36b6..b1a404331 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/SubnetLicenseTenant.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/SubnetLicenseTenant.tsx
@@ -88,7 +88,7 @@ const styles = (theme: Theme) =>
     noUnderLine: {
       textDecoration: "none",
     },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 const SubnetLicenseTenant = ({
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantAuditLogsScreen.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantAuditLogsScreen.tsx
index e1e0bbcb8..8c20d549f 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantAuditLogsScreen.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantAuditLogsScreen.tsx
@@ -59,6 +59,7 @@ import {
 } from "../TenantDetails/tenantAuditLogSlice";
 
 import { HelpBox, WarnIcon } from "mds";
+import FormHr from "../../Common/FormHr";
 
 interface ILoggingScreenProps {
   classes: any;
@@ -66,7 +67,7 @@ interface ILoggingScreenProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 const LoggingScreen = ({ classes }: ILoggingScreenProps) => {
@@ -336,7 +337,7 @@ const LoggingScreen = ({ classes }: ILoggingScreenProps) => {
               </Tabs>
             </Grid>
             <Grid item xs={12}>
-              <hr className={classes.hrClass} />
+              <FormHr />
             </Grid>
             {curTab === 0 && (
               <LoggingDetails
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantCSR.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantCSR.tsx
index 26e544832..632a3b7e6 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantCSR.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantCSR.tsx
@@ -47,7 +47,7 @@ const styles = (theme: Theme) =>
     ...actionsTray,
     ...searchField,
     ...tableStyles,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 const TenantCSR = ({ classes }: ITenantCSRProps) => {
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantConfiguration.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantConfiguration.tsx
index 884453985..bac29979b 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantConfiguration.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantConfiguration.tsx
@@ -44,6 +44,7 @@ import { setErrorSnackMessage } from "../../../../systemSlice";
 import api from "../../../../common/api";
 import ConfirmDialog from "../../Common/ModalWrapper/ConfirmDialog";
 import { MinIOEnvVarsSettings } from "../../../../common/utils";
+import FormHr from "../../Common/FormHr";
 
 interface ITenantConfiguration {
   classes: any;
@@ -101,7 +102,7 @@ const styles = (theme: Theme) =>
         flexFlow: "column",
       },
     },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
     ...createTenantCommon,
     ...formFieldStyles,
     ...modalBasic,
@@ -191,7 +192,7 @@ const TenantConfiguration = ({ classes }: ITenantConfiguration) => {
         <Grid container spacing={1}>
           <Grid item xs={12}>
             <h1 className={classes.sectionTitle}>Configuration</h1>
-            <hr className={classes.hrClass} />
+            <FormHr />
           </Grid>
           <Grid container spacing={1}>
             {envVars.map((envVar, index) => (
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
index bb6b5a95a..1c6a316fc 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
@@ -149,7 +149,7 @@ const styles = (theme: Theme) =>
       height: 10,
       top: 4,
     },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 const TenantDetails = ({ classes }: ITenantDetailsProps) => {
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantEncryption.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantEncryption.tsx
index e3e56bed8..1615c777e 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantEncryption.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantEncryption.tsx
@@ -59,6 +59,7 @@ import { setErrorSnackMessage } from "../../../../systemSlice";
 import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
 import CodeMirrorWrapper from "../../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
+import FormHr from "../../Common/FormHr";
 
 interface ITenantEncryption {
   classes: any;
@@ -68,7 +69,7 @@ const styles = (theme: Theme) =>
   createStyles({
     ...tenantDetailsStyles,
     ...spacingUtils,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
     ...createTenantCommon,
     ...formFieldStyles,
     ...modalBasic,
@@ -677,7 +678,7 @@ const TenantEncryption = ({ classes }: ITenantEncryption) => {
           />
         </Grid>
         <Grid xs={12}>
-          <hr className={classes.hrClass} />
+          <FormHr />
         </Grid>
         {encryptionEnabled && (
           <Fragment>
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantEvents.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantEvents.tsx
index 36bd42af6..95fad20c3 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantEvents.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantEvents.tsx
@@ -44,7 +44,7 @@ const styles = (theme: Theme) =>
     ...actionsTray,
     ...searchField,
     ...tableStyles,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 const TenantEvents = ({ classes }: ITenantEventsProps) => {
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantIdentityProvider.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantIdentityProvider.tsx
index 18a43e7e1..07ab08b67 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantIdentityProvider.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantIdentityProvider.tsx
@@ -90,13 +90,17 @@ const styles = (theme: Theme) =>
     loaderAlign: {
       textAlign: "center",
     },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
     ...createTenantCommon,
     ...formFieldStyles,
     ...modalBasic,
     ...wizardCommon,
   });
 
+function FormHr() {
+  return null;
+}
+
 const TenantIdentityProvider = ({ classes }: ITenantIdentityProvider) => {
   const dispatch = useAppDispatch();
 
@@ -349,7 +353,7 @@ const TenantIdentityProvider = ({ classes }: ITenantIdentityProvider) => {
         <Fragment>
           <Grid item xs={12}>
             <h1 className={classes.sectionTitle}>Identity Provider</h1>
-            <hr className={classes.hrClass} />
+            <FormHr />
           </Grid>
           <Grid
             item
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantLicense.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantLicense.tsx
index fd3f962e4..b2bc36c25 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantLicense.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantLicense.tsx
@@ -43,7 +43,7 @@ const styles = (theme: Theme) =>
     loaderAlign: {
       textAlign: "center",
     },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 const TenantLicense = ({ classes }: ITenantLicense) => {
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantMetrics.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantMetrics.tsx
index 1c6212dff..41eb38598 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantMetrics.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantMetrics.tsx
@@ -39,7 +39,7 @@ const styles = (theme: Theme) =>
       minHeight: "800px",
       width: "100%",
     },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 const TenantMetrics = ({ classes }: ITenantMetrics) => {
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSecurity.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSecurity.tsx
index 3ccfdd475..72bdf4478 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSecurity.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSecurity.tsx
@@ -55,6 +55,7 @@ import {
   setRunAsUser,
 } from "../tenantSecurityContextSlice";
 import TLSHelpBox from "../HelpBox/TLSHelpBox";
+import FormHr from "../../Common/FormHr";
 
 interface ITenantSecurity {
   classes: any;
@@ -124,7 +125,7 @@ const styles = (theme: Theme) =>
         flexFlow: "column",
       },
     },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
     ...createTenantCommon,
     ...formFieldStyles,
     ...modalBasic,
@@ -492,7 +493,7 @@ const TenantSecurity = ({ classes }: ITenantSecurity) => {
         <Grid container spacing={1}>
           <Grid item xs={12}>
             <h1 className={classes.sectionTitle}>Security</h1>
-            <hr className={classes.hrClass} />
+            <FormHr />
           </Grid>
           <Grid container spacing={1}>
             <Grid item xs={12}>
@@ -794,7 +795,7 @@ const TenantSecurity = ({ classes }: ITenantSecurity) => {
             )}
             <Grid item xs={12} className={classes.formFieldRow}>
               <h1 className={classes.sectionTitle}>Security Context</h1>
-              <hr className={classes.hrClass} />
+              <FormHr />
             </Grid>
             <Grid item xs={12} className={classes.formFieldRow}>
               <SecurityContextSelector
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx
index b19abd333..8eea3d166 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx
@@ -84,7 +84,7 @@ const styles = (theme: Theme) =>
     autoGeneratedLink: {
       fontStyle: "italic",
     },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 const healthStatusToClass = (health_status: string = "red", classes: any) => {
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantTrace.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantTrace.tsx
index 3a09f7f5b..7bb24e321 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantTrace.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantTrace.tsx
@@ -39,7 +39,7 @@ const styles = (theme: Theme) =>
       minHeight: "800px",
       width: "100%",
     },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 const TenantTrace = ({ classes }: ITenantTrace) => {
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/VolumesSummary.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/VolumesSummary.tsx
index db51cf102..46c9bfa34 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/VolumesSummary.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/VolumesSummary.tsx
@@ -47,7 +47,7 @@ const styles = (theme: Theme) =>
   createStyles({
     ...tenantDetailsStyles,
     ...tableStyles,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 const TenantVolumes = ({ classes }: ITenantVolumesProps) => {
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 9ea6a1d90..b81676aad 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/hop/Hop.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/hop/Hop.tsx
@@ -57,7 +57,7 @@ const styles = (theme: Theme) =>
       borderBottom: "1px solid #dedede",
     },
 
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 const Hop = ({ classes }: IHopSimple) => {
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/pods/PodDetails.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/pods/PodDetails.tsx
index fa09c73b7..afdb5a189 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/pods/PodDetails.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/pods/PodDetails.tsx
@@ -38,7 +38,7 @@ const styles = (theme: Theme) =>
       textDecoration: "none",
       color: "black",
     },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 const PodDetails = ({ classes }: IPodDetailsProps) => {
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/pods/PodLogs.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/pods/PodLogs.tsx
index cc5298df6..8ec81b8ae 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/pods/PodLogs.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/pods/PodLogs.tsx
@@ -33,7 +33,6 @@ import api from "../../../../../common/api";
 import { SearchIcon } from "mds";
 import {
   actionsTray,
-  buttonsStyles,
   containerForHeader,
   searchField,
 } from "../../../Common/FormComponents/common/styleLibrary";
@@ -61,7 +60,7 @@ const styles = (theme: Theme) =>
       border: "1px solid #EAEDEE",
       borderRadius: 4,
     },
-    ...buttonsStyles,
+
     ...searchField,
     actionsTray: {
       ...actionsTray.actionsTray,
@@ -80,7 +79,7 @@ const styles = (theme: Theme) =>
         backgroundColor: "#082F5238",
       },
     },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 const PodLogs = ({
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/pvcs/PVCDescribe.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/pvcs/PVCDescribe.tsx
index 84528af75..81444ebfa 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/pvcs/PVCDescribe.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/pvcs/PVCDescribe.tsx
@@ -21,8 +21,6 @@ import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import {
   actionsTray,
-  buttonsStyles,
-  hrClass,
   searchField,
 } from "../../../Common/FormComponents/common/styleLibrary";
 import { Box } from "@mui/material";
@@ -47,9 +45,8 @@ import {
 const styles = (theme: Theme) =>
   createStyles({
     ...actionsTray,
-    ...buttonsStyles,
+
     ...searchField,
-    ...hrClass,
   });
 
 const twoColCssGridLayoutConfig = {
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/pvcs/TenantVolumes.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/pvcs/TenantVolumes.tsx
index 18049be7a..c9cd97977 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/pvcs/TenantVolumes.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/pvcs/TenantVolumes.tsx
@@ -44,7 +44,7 @@ const styles = (theme: Theme) =>
       textDecoration: "none",
       color: "black",
     },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 const TenantVolumes = ({ classes }: IPVCDetailsProps) => {
diff --git a/portal-ui/src/screens/Console/Trace/Trace.tsx b/portal-ui/src/screens/Console/Trace/Trace.tsx
index 54771c55a..cf0cc0385 100644
--- a/portal-ui/src/screens/Console/Trace/Trace.tsx
+++ b/portal-ui/src/screens/Console/Trace/Trace.tsx
@@ -30,7 +30,6 @@ import { wsProtocol } from "../../../utils/wsUtils";
 import {
   actionsTray,
   containerForHeader,
-  hrClass,
   tableStyles,
 } from "../Common/FormComponents/common/styleLibrary";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
@@ -54,7 +53,6 @@ const styles = (theme: Theme) =>
       width: 100,
     },
     ...actionsTray,
-    ...hrClass,
 
     ...tableStyles,
     tableWrapper: {
@@ -74,7 +72,7 @@ const styles = (theme: Theme) =>
       width: "14px",
       height: "14px",
     },
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 interface ITrace {
diff --git a/portal-ui/src/screens/Console/Users/ListUsers.tsx b/portal-ui/src/screens/Console/Users/ListUsers.tsx
index a772d5304..8cba06c15 100644
--- a/portal-ui/src/screens/Console/Users/ListUsers.tsx
+++ b/portal-ui/src/screens/Console/Users/ListUsers.tsx
@@ -80,7 +80,7 @@ const styles = (theme: Theme) =>
       maxWidth: 380,
     },
     ...tableStyles,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 interface IUsersProps {
diff --git a/portal-ui/src/screens/Console/Users/UserDetails.tsx b/portal-ui/src/screens/Console/Users/UserDetails.tsx
index c6df025e1..31d422d60 100644
--- a/portal-ui/src/screens/Console/Users/UserDetails.tsx
+++ b/portal-ui/src/screens/Console/Users/UserDetails.tsx
@@ -89,7 +89,7 @@ const styles = (theme: Theme) =>
     ...actionsTray,
     ...searchField,
     ...tableStyles,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   });
 
 interface IUserDetailsProps {
diff --git a/portal-ui/src/screens/Console/Watch/Watch.tsx b/portal-ui/src/screens/Console/Watch/Watch.tsx
index 2c62b5f2b..5151fcf0c 100644
--- a/portal-ui/src/screens/Console/Watch/Watch.tsx
+++ b/portal-ui/src/screens/Console/Watch/Watch.tsx
@@ -61,7 +61,7 @@ const useStyles = makeStyles((theme: Theme) =>
     ...tableStyles,
     ...actionsTray,
     ...searchField,
-    ...containerForHeader(theme.spacing(4)),
+    ...containerForHeader,
   })
 );