diff --git a/dynamic-demo-plugin/src/components/ListPage.tsx b/dynamic-demo-plugin/src/components/ListPage.tsx
index 15374a993bd..2b65d26434f 100644
--- a/dynamic-demo-plugin/src/components/ListPage.tsx
+++ b/dynamic-demo-plugin/src/components/ListPage.tsx
@@ -26,7 +26,7 @@ type PodsTableProps = {
 };
 
 const PodsTable: React.FC<PodsTableProps> = ({ data, unfilteredData, loaded, loadError }) => {
-  const { t } = useTranslation("plugin__console-demo-plugin");
+  const { t } = useTranslation('plugin__console-demo-plugin');
 
   const columns: TableColumn<K8sResourceCommon>[] = [
     {
@@ -96,7 +96,7 @@ const ListPage = () => {
     isList: true,
     namespaced: true,
   });
-  const { t } = useTranslation("plugin__console-demo-plugin");
+  const { t } = useTranslation('plugin__console-demo-plugin');
 
   const [data, filteredData, onFilterChange] = useListPageFilter(pods, filters, {
     name: { selected: ['openshift'] },
@@ -124,7 +124,9 @@ const ListPage = () => {
       </ListPageBody>
       <ListPageBody>
         <p>{t('Sample ResourceIcon')}</p>
-        <ResourceIcon kind="Pod" />
+        <p>
+          <ResourceIcon kind="Pod" />
+        </p>
       </ListPageBody>
     </>
   );
diff --git a/frontend/package.json b/frontend/package.json
index 2cb927b0c60..f8cfcf00394 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -262,7 +262,7 @@
     "comment-json": "4.x",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^5.2.7",
-    "cypress": "^13.10.0",
+    "cypress": "^14.2.1",
     "cypress-axe": "^1.5.0",
     "cypress-cucumber-preprocessor": "latest",
     "cypress-file-upload": "^5.0.8",
diff --git a/frontend/packages/console-app/src/components/cluster-configuration/ClusterConfigurationPage.scss b/frontend/packages/console-app/src/components/cluster-configuration/ClusterConfigurationPage.scss
index d9078ee2fe5..15e438d4282 100644
--- a/frontend/packages/console-app/src/components/cluster-configuration/ClusterConfigurationPage.scss
+++ b/frontend/packages/console-app/src/components/cluster-configuration/ClusterConfigurationPage.scss
@@ -3,16 +3,6 @@
   flex-direction: column;
   min-height: 100%;
 
-  // Fix missing white background color above the header.
-  .ocs-page-layout__title {
-    margin-top: 0;
-    padding-top: var(--pf-t--global--spacer--lg);
-  }
-
-  .ocs-page-layout__content {
-    display: inline;
-  }
-
   .pf-v6-c-empty-state {
     background-color: var(--pf-t--global--background--color--primary--default);
     flex: 1;
diff --git a/frontend/packages/console-app/src/components/console-operator/ConsoleOperatorConfig.tsx b/frontend/packages/console-app/src/components/console-operator/ConsoleOperatorConfig.tsx
index 2d8083358d2..54969459503 100644
--- a/frontend/packages/console-app/src/components/console-operator/ConsoleOperatorConfig.tsx
+++ b/frontend/packages/console-app/src/components/console-operator/ConsoleOperatorConfig.tsx
@@ -54,6 +54,7 @@ import {
   GreenCheckCircleIcon,
   YellowExclamationTriangleIcon,
 } from '@console/shared';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import {
   boolComparator,
   localeComparator,
@@ -226,7 +227,7 @@ const ConsolePluginsTable: React.FC<ConsolePluginsTableProps> = ({ obj, rows, lo
   return !loaded ? (
     <LoadingBox />
   ) : (
-    <div className="co-m-pane__body">
+    <PaneBody>
       {obj.spec?.managementState === 'Unmanaged' && (
         <Alert
           className="co-alert"
@@ -290,7 +291,7 @@ const ConsolePluginsTable: React.FC<ConsolePluginsTableProps> = ({ obj, rows, lo
       ) : (
         <EmptyBox label={t('console-app~Console plugins')} />
       )}
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/packages/console-app/src/components/console-operator/ConsolePluginManifestPage.tsx b/frontend/packages/console-app/src/components/console-operator/ConsolePluginManifestPage.tsx
index 041a186991a..8ea9a27aae1 100644
--- a/frontend/packages/console-app/src/components/console-operator/ConsolePluginManifestPage.tsx
+++ b/frontend/packages/console-app/src/components/console-operator/ConsolePluginManifestPage.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { PageComponentProps, CopyToClipboard, EmptyBox } from '@console/internal/components/utils';
 import { usePluginStore } from '@console/plugin-sdk/src/api/usePluginStore';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 
 export const ConsolePluginManifestPage: React.FC<PageComponentProps> = ({ obj }) => {
   const { t } = useTranslation();
@@ -14,12 +15,12 @@ export const ConsolePluginManifestPage: React.FC<PageComponentProps> = ({ obj })
   ]);
 
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       {pluginManifest ? (
         <CopyToClipboard value={JSON.stringify(pluginManifest, null, 2)} />
       ) : (
         <EmptyBox label={t('console-app~Plugin manifest')} />
       )}
-    </div>
+    </PaneBody>
   );
 };
diff --git a/frontend/packages/console-app/src/components/network-policies/network-policy-form.tsx b/frontend/packages/console-app/src/components/network-policies/network-policy-form.tsx
index 5c89e347b30..c49bd4e6dac 100644
--- a/frontend/packages/console-app/src/components/network-policies/network-policy-form.tsx
+++ b/frontend/packages/console-app/src/components/network-policies/network-policy-form.tsx
@@ -28,6 +28,7 @@ import { MultiNetworkPolicyModel, NetworkPolicyModel } from '@console/internal/m
 import { k8sCreate, NetworkPolicyKind } from '@console/internal/module/k8s';
 import { useClusterNetworkFeatures } from '@console/internal/module/k8s/network';
 import { FLAGS, YellowExclamationTriangleIcon } from '@console/shared';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { useFlag } from '@console/shared/src/hooks/flag';
 import NADsSelector from './NADsSelector';
 import { NetworkPolicyConditionalSelector } from './network-policy-conditional-selector';
@@ -81,7 +82,7 @@ export const NetworkPolicyForm: React.FC<NetworkPolicyFormProps> = ({ formData,
     // Note, this case is not expected to happen. Validity of the network policy for form should have been checked prior to showing this form.
     // When used with the SyncedEditor, an error is thrown when the data is invalid, that should prevent the user from opening the form with invalid data, hence not running into this conditional block.
     return (
-      <div className="co-m-pane__body">
+      <PaneBody>
         <Alert
           variant={AlertVariant.danger}
           title={t(
@@ -90,7 +91,7 @@ export const NetworkPolicyForm: React.FC<NetworkPolicyFormProps> = ({ formData,
         >
           {networkPolicy.error}
         </Alert>
-      </div>
+      </PaneBody>
     );
   }
 
@@ -204,7 +205,7 @@ export const NetworkPolicyForm: React.FC<NetworkPolicyFormProps> = ({ formData,
   };
 
   return (
-    <div className="co-m-pane__body co-m-pane__form">
+    <PaneBody className="co-m-pane__form">
       <Form onSubmit={save} className="co-create-networkpolicy">
         {showSDNAlert &&
           networkFeaturesLoaded &&
@@ -417,6 +418,6 @@ export const NetworkPolicyForm: React.FC<NetworkPolicyFormProps> = ({ formData,
           </ActionGroup>
         </ButtonBar>
       </Form>
-    </div>
+    </PaneBody>
   );
 };
diff --git a/frontend/packages/console-app/src/components/nodes/NodeDetailsConditions.tsx b/frontend/packages/console-app/src/components/nodes/NodeDetailsConditions.tsx
index 4cc83766fe4..535b8cfd38c 100644
--- a/frontend/packages/console-app/src/components/nodes/NodeDetailsConditions.tsx
+++ b/frontend/packages/console-app/src/components/nodes/NodeDetailsConditions.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { CamelCaseWrap } from '@console/dynamic-plugin-sdk';
 import { SectionHeading, Timestamp } from '@console/internal/components/utils';
 import { NodeKind } from '@console/internal/module/k8s';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 
 type NodeDetailsConditionsProps = {
   node: NodeKind;
@@ -12,7 +13,7 @@ type NodeDetailsConditionsProps = {
 const NodeDetailsConditions: React.FC<NodeDetailsConditionsProps> = ({ node }) => {
   const { t } = useTranslation();
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <SectionHeading text={t('console-app~Node conditions')} />
       <div className="co-table-container">
         <table className="pf-v6-c-table pf-m-compact pf-m-border-rows">
@@ -46,7 +47,7 @@ const NodeDetailsConditions: React.FC<NodeDetailsConditionsProps> = ({ node }) =
           </tbody>
         </table>
       </div>
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/packages/console-app/src/components/nodes/NodeDetailsImages.tsx b/frontend/packages/console-app/src/components/nodes/NodeDetailsImages.tsx
index bbeb61db6a0..0eb2f223657 100644
--- a/frontend/packages/console-app/src/components/nodes/NodeDetailsImages.tsx
+++ b/frontend/packages/console-app/src/components/nodes/NodeDetailsImages.tsx
@@ -3,6 +3,7 @@ import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { SectionHeading, units } from '@console/internal/components/utils';
 import { NodeKind } from '@console/internal/module/k8s';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 
 type NodeDetailsImagesProps = {
   node: NodeKind;
@@ -12,7 +13,7 @@ const NodeDetailsImages: React.FC<NodeDetailsImagesProps> = ({ node }) => {
   const images = _.filter(node.status.images, 'names');
   const { t } = useTranslation();
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <SectionHeading text={t('console-app~Images')} />
       <div className="co-table-container">
         <table className="pf-v6-c-table pf-m-compact pf-m-border-rows">
@@ -38,7 +39,7 @@ const NodeDetailsImages: React.FC<NodeDetailsImagesProps> = ({ node }) => {
           </tbody>
         </table>
       </div>
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/packages/console-app/src/components/nodes/NodeDetailsOverview.tsx b/frontend/packages/console-app/src/components/nodes/NodeDetailsOverview.tsx
index 5e89b70d74a..2e5ecc329bb 100644
--- a/frontend/packages/console-app/src/components/nodes/NodeDetailsOverview.tsx
+++ b/frontend/packages/console-app/src/components/nodes/NodeDetailsOverview.tsx
@@ -16,6 +16,7 @@ import {
 import { DetailsItem } from '@console/internal/components/utils/details-item';
 import { NodeModel, MachineModel } from '@console/internal/models';
 import { NodeKind, referenceForModel } from '@console/internal/module/k8s';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { useLabelsModal } from '@console/shared/src/hooks/useLabelsModal';
 import {
   getNodeMachineNameAndNamespace,
@@ -42,7 +43,7 @@ const NodeDetailsOverview: React.FC<NodeDetailsOverviewProps> = ({ node }) => {
   const { t } = useTranslation();
 
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <SectionHeading text={t('console-app~Node details')} />
       <div className="row">
         <div className="col-md-6 col-xs-12">
@@ -165,7 +166,7 @@ const NodeDetailsOverview: React.FC<NodeDetailsOverviewProps> = ({ node }) => {
           </dl>
         </div>
       </div>
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/packages/console-app/src/components/nodes/NodeLogs.tsx b/frontend/packages/console-app/src/components/nodes/NodeLogs.tsx
index cc2885ddc8e..bac65ea1dcd 100644
--- a/frontend/packages/console-app/src/components/nodes/NodeLogs.tsx
+++ b/frontend/packages/console-app/src/components/nodes/NodeLogs.tsx
@@ -29,6 +29,7 @@ import {
 } from '@console/internal/components/utils';
 import { modelFor, NodeKind, resourceURL } from '@console/internal/module/k8s';
 import { useUserSettings } from '@console/shared';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { LOG_WRAP_LINES_USERSETTINGS_KEY } from '@console/shared/src/constants';
 import NodeLogsUnitFilter from './NodeLogsUnitFilter';
 import './node-logs.scss';
@@ -348,7 +349,7 @@ const NodeLogs: React.FC<NodeLogsProps> = ({ obj: node }) => {
   );
 
   return (
-    <div className="co-m-pane__body co-m-pane__body--full-height">
+    <PaneBody fullHeight>
       <div className="log-window-wrapper">
         {(isLoadingLog || errorExists) && logControls}
         {trimmedContent?.length > 0 && !isLoadingLog && (
@@ -403,7 +404,7 @@ const NodeLogs: React.FC<NodeLogsProps> = ({ obj: node }) => {
           />
         )}
       </div>
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/packages/console-app/src/components/nodes/NodeTerminal.tsx b/frontend/packages/console-app/src/components/nodes/NodeTerminal.tsx
index 37bd03b642d..fc54e547bbf 100644
--- a/frontend/packages/console-app/src/components/nodes/NodeTerminal.tsx
+++ b/frontend/packages/console-app/src/components/nodes/NodeTerminal.tsx
@@ -8,6 +8,7 @@ import {
   LoadingBox,
 } from '@console/internal/components/utils';
 import { NodeKind, PodKind } from '@console/internal/module/k8s';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { PodExecLoader } from '../../../../../public/components/pod';
 import { ImageStreamTagModel, NamespaceModel, PodModel } from '../../../../../public/models';
 import { k8sCreate, k8sGet, k8sKillByName } from '../../../../../public/module/k8s';
@@ -120,9 +121,9 @@ const getDebugPod = async (
 
 const NodeTerminalError: React.FC<NodeTerminalErrorProps> = ({ error }) => {
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <Alert variant="danger" isInline title={error} data-test="node-terminal-error" />
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/packages/console-app/src/components/oauth-config/OAuthConfigDetails.tsx b/frontend/packages/console-app/src/components/oauth-config/OAuthConfigDetails.tsx
index 7ad4a8eefaa..8a8c44c9817 100644
--- a/frontend/packages/console-app/src/components/oauth-config/OAuthConfigDetails.tsx
+++ b/frontend/packages/console-app/src/components/oauth-config/OAuthConfigDetails.tsx
@@ -18,6 +18,7 @@ import {
 } from '@console/internal/components/utils';
 import { ClusterOperatorModel } from '@console/internal/models';
 import { OAuthKind } from '@console/internal/module/k8s';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { IDP_TYPES } from '@console/shared/src/constants/auth';
 import { useQueryParams } from '@console/shared/src/hooks/useQueryParams';
 import { IdentityProviders } from './IdentityProviders';
@@ -77,7 +78,7 @@ export const OAuthConfigDetails: React.FC<OAuthDetailsProps> = ({ obj }: { obj:
 
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading text={t('console-app~OAuth details')} />
         <div className="row">
           <div className="col-md-6">
@@ -91,8 +92,8 @@ export const OAuthConfigDetails: React.FC<OAuthDetailsProps> = ({ obj }: { obj:
             </ResourceSummary>
           </div>
         </div>
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={t('console-app~Identity providers')} />
         <p className="co-m-pane__explanation co-m-pane__explanation--alt">
           {t('console-app~Identity providers determine how users log into the cluster.')}
@@ -114,29 +115,32 @@ export const OAuthConfigDetails: React.FC<OAuthDetailsProps> = ({ obj }: { obj:
             </>
           </Alert>
         )}
-        <Dropdown
-          isOpen={isIDPOpen}
-          onSelect={() => setIDPOpen(false)}
-          onOpenChange={(isOpen: boolean) => setIDPOpen(isOpen)}
-          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-            <MenuToggle
-              id="idp-dropdown"
-              data-test-id="dropdown-button"
-              ref={toggleRef}
-              onClick={() => setIDPOpen(!isIDPOpen)}
-              isExpanded={isIDPOpen}
-            >
-              {t('console-app~Add')}
-            </MenuToggle>
-          )}
-          shouldFocusToggleOnSelect
-          id="idp"
-        >
-          <DropdownList>{IDPDropdownItems}</DropdownList>
-        </Dropdown>
+        <div>
+          <Dropdown
+            isOpen={isIDPOpen}
+            onSelect={() => setIDPOpen(false)}
+            onOpenChange={(isOpen: boolean) => setIDPOpen(isOpen)}
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                id="idp-dropdown"
+                data-test-id="dropdown-button"
+                ref={toggleRef}
+                onClick={() => setIDPOpen(!isIDPOpen)}
+                isExpanded={isIDPOpen}
+              >
+                {t('console-app~Add')}
+              </MenuToggle>
+            )}
+            shouldFocusToggleOnSelect
+            id="idp"
+            popperProps={{}}
+          >
+            <DropdownList>{IDPDropdownItems}</DropdownList>
+          </Dropdown>
+        </div>
 
         <IdentityProviders identityProviders={identityProviders} />
-      </div>
+      </PaneBody>
     </>
   );
 };
diff --git a/frontend/packages/console-app/src/components/pdb/PDBDetailsPage.tsx b/frontend/packages/console-app/src/components/pdb/PDBDetailsPage.tsx
index 642cfbda884..f9df7d6a77d 100644
--- a/frontend/packages/console-app/src/components/pdb/PDBDetailsPage.tsx
+++ b/frontend/packages/console-app/src/components/pdb/PDBDetailsPage.tsx
@@ -9,6 +9,7 @@ import {
   navFactory,
   DetailsItem,
 } from '@console/internal/components/utils';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { PodDisruptionBudgetModel } from '../../models';
 import { PodDisruptionBudgetKind } from './types';
 
@@ -18,38 +19,36 @@ const menuActions = [...Kebab.getExtensionsActionsForKind(PodDisruptionBudgetMod
 const PodDisruptionBudgetDetails: React.FC<PodDisruptionBudgetDetailsProps> = ({ obj }) => {
   const { t } = useTranslation();
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <SectionHeading text={t('console-app~PodDisruptionBudget details')} />
-      <div className="co-m-pane__body-group">
-        <div className="row">
-          <div className="col-sm-6">
-            <ResourceSummary resource={obj} showPodSelector />
-          </div>
-          <div className="col-sm-6">
-            <dl className="co-m-pane__details">
-              <DetailsItem
-                label={
-                  !_.isNil(obj.spec.minAvailable)
-                    ? t('console-app~Min available')
-                    : t('console-app~Max unavailable')
-                }
-                obj={obj}
-                path={!_.isNil(obj.spec.minAvailable) ? 'spec.minAvailable' : 'spec.maxUnavailable'}
-              >
-                {!_.isNil(obj.spec.minAvailable) ? obj.spec.minAvailable : obj.spec.maxUnavailable}
-              </DetailsItem>
-              <DetailsItem
-                label={t('console-app~Allowed disruption')}
-                obj={obj}
-                path="status.disruptionsAllowed"
-              >
-                {obj.status.disruptionsAllowed}
-              </DetailsItem>
-            </dl>
-          </div>
+      <div className="row">
+        <div className="col-sm-6">
+          <ResourceSummary resource={obj} showPodSelector />
+        </div>
+        <div className="col-sm-6">
+          <dl className="co-m-pane__details">
+            <DetailsItem
+              label={
+                !_.isNil(obj.spec.minAvailable)
+                  ? t('console-app~Min available')
+                  : t('console-app~Max unavailable')
+              }
+              obj={obj}
+              path={!_.isNil(obj.spec.minAvailable) ? 'spec.minAvailable' : 'spec.maxUnavailable'}
+            >
+              {!_.isNil(obj.spec.minAvailable) ? obj.spec.minAvailable : obj.spec.maxUnavailable}
+            </DetailsItem>
+            <DetailsItem
+              label={t('console-app~Allowed disruption')}
+              obj={obj}
+              path="status.disruptionsAllowed"
+            >
+              {obj.status.disruptionsAllowed}
+            </DetailsItem>
+          </dl>
         </div>
       </div>
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/packages/console-app/src/components/pdb/PDBForm.tsx b/frontend/packages/console-app/src/components/pdb/PDBForm.tsx
index 1effcc8cfe7..ecec806c018 100644
--- a/frontend/packages/console-app/src/components/pdb/PDBForm.tsx
+++ b/frontend/packages/console-app/src/components/pdb/PDBForm.tsx
@@ -35,6 +35,7 @@ import {
 } from '@console/internal/components/utils';
 import { FieldLevelHelp } from '@console/internal/components/utils/field-level-help';
 import { k8sCreate } from '@console/internal/module/k8s';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { PodDisruptionBudgetModel } from '../../models';
 import AvailabilityRequirementPopover from './AvailabilityRequirementPopover';
 import { pdbToK8sResource, initialValuesFromK8sResource, patchPDB, FormValues } from './pdb-models';
@@ -161,7 +162,7 @@ const PDBForm: React.FC<PodDisruptionBudgetFormProps> = ({
   };
 
   return (
-    <div className="co-m-pane__body co-m-pane__form">
+    <PaneBody className="co-m-pane__form">
       <Form onSubmit={handleSubmit}>
         <Stack hasGutter>
           <StackItem>
@@ -309,7 +310,7 @@ const PDBForm: React.FC<PodDisruptionBudgetFormProps> = ({
           </StackItem>
         </Stack>
       </Form>
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/packages/console-app/src/components/user-preferences/UserPreferencePage.scss b/frontend/packages/console-app/src/components/user-preferences/UserPreferencePage.scss
index 72e565dde13..dd92d2f7fb8 100644
--- a/frontend/packages/console-app/src/components/user-preferences/UserPreferencePage.scss
+++ b/frontend/packages/console-app/src/components/user-preferences/UserPreferencePage.scss
@@ -3,12 +3,6 @@
   min-height: 100%;
   overflow-y: auto;
   flex-direction: column;
-
-  // Fix missing white background color above the header.
-  .ocs-page-layout__title {
-    margin-top: 0;
-    padding-top: var(--pf-t--global--spacer--lg);
-  }
 }
 
 .co-user-preference-page-content {
diff --git a/frontend/packages/console-app/src/components/volume-snapshot/create-volume-snapshot/create-volume-snapshot.tsx b/frontend/packages/console-app/src/components/volume-snapshot/create-volume-snapshot/create-volume-snapshot.tsx
index c2ff292f80e..f2151ef7029 100644
--- a/frontend/packages/console-app/src/components/volume-snapshot/create-volume-snapshot/create-volume-snapshot.tsx
+++ b/frontend/packages/console-app/src/components/volume-snapshot/create-volume-snapshot/create-volume-snapshot.tsx
@@ -45,6 +45,7 @@ import {
 } from '@console/internal/module/k8s';
 import { getName, getNamespace, getAnnotations } from '@console/shared';
 import { DocumentTitle } from '@console/shared/src/components/document-title/DocumentTitle';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import './_create-volume-snapshot.scss';
 
 const LoadingComponent: React.FC = () => (
@@ -236,8 +237,8 @@ const CreateSnapshotForm = withHandlePromise<SnapshotResourceProps>((props) => {
             </Link>
           }
         />
-        <div className="co-m-pane__body co-m-pane__body--no-top-margin">
-          <form className="co-m-pane__body-group" onSubmit={create}>
+        <PaneBody>
+          <form onSubmit={create}>
             {pvcName ? (
               <p>
                 <Trans ns="console-app">
@@ -315,7 +316,7 @@ const CreateSnapshotForm = withHandlePromise<SnapshotResourceProps>((props) => {
               </ActionGroup>
             </ButtonBar>
           </form>
-        </div>
+        </PaneBody>
       </div>
       <div className="co-volume-snapshot__info">
         <Grid hasGutter>
diff --git a/frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot-class-details.tsx b/frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot-class-details.tsx
index 1e8720a0cd1..e76a16ab1ad 100644
--- a/frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot-class-details.tsx
+++ b/frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot-class-details.tsx
@@ -5,13 +5,14 @@ import { DetailsPage, DetailsPageProps } from '@console/internal/components/fact
 import { SectionHeading, ResourceSummary, navFactory } from '@console/internal/components/utils';
 import { referenceForModel, VolumeSnapshotClassKind } from '@console/internal/module/k8s';
 import { ActionMenu, ActionMenuVariant, ActionServiceProvider } from '@console/shared';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 
 const { editYaml, events } = navFactory;
 
 const Details: React.FC<DetailsProps> = ({ obj }) => {
   const { t } = useTranslation();
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <SectionHeading text={t('console-app~VolumeSnapshotClass details')} />
       <div className="row">
         <div className="col-md-6 col-xs-12">
@@ -23,7 +24,7 @@ const Details: React.FC<DetailsProps> = ({ obj }) => {
           </ResourceSummary>
         </div>
       </div>
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot-content-details.tsx b/frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot-content-details.tsx
index 891743b2465..d668da623f5 100644
--- a/frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot-content-details.tsx
+++ b/frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot-content-details.tsx
@@ -13,6 +13,7 @@ import {
 import { VolumeSnapshotClassModel, VolumeSnapshotModel } from '@console/internal/models';
 import { referenceForModel, VolumeSnapshotContentKind } from '@console/internal/module/k8s';
 import { Status } from '@console/shared';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { volumeSnapshotStatus } from '../../status';
 
 const { editYaml, events } = navFactory;
@@ -26,7 +27,7 @@ const Details: React.FC<DetailsProps> = ({ obj }) => {
   const sizeMetrics = size ? humanizeBinaryBytes(size).string : '-';
 
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <SectionHeading text={t('console-app~VolumeSnapshotContent details')} />
       <div className="row">
         <div className="col-md-6 col-xs-12">
@@ -79,7 +80,7 @@ const Details: React.FC<DetailsProps> = ({ obj }) => {
           </dl>
         </div>
       </div>
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot-details.tsx b/frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot-details.tsx
index 6269fc99299..4fcf212a1ac 100644
--- a/frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot-details.tsx
+++ b/frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot-details.tsx
@@ -18,6 +18,7 @@ import {
 } from '@console/internal/models';
 import { referenceForModel, VolumeSnapshotKind } from '@console/internal/module/k8s';
 import { Status, snapshotSource, FLAGS } from '@console/shared';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { useFlag } from '@console/shared/src/hooks/flag';
 import { volumeSnapshotStatus } from '../../status';
 
@@ -41,7 +42,7 @@ const Details: React.FC<DetailsProps> = ({ obj }) => {
   const canListVSC = useFlag(FLAGS.CAN_LIST_VSC);
 
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <SectionHeading text={t('console-app~VolumeSnapshot details')} />
       <div className="row">
         <div className="col-md-6 col-xs-12">
@@ -93,7 +94,7 @@ const Details: React.FC<DetailsProps> = ({ obj }) => {
           </dl>
         </div>
       </div>
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/packages/console-dynamic-plugin-sdk/README.md b/frontend/packages/console-dynamic-plugin-sdk/README.md
index 07f3f36a269..7b800073959 100644
--- a/frontend/packages/console-dynamic-plugin-sdk/README.md
+++ b/frontend/packages/console-dynamic-plugin-sdk/README.md
@@ -64,12 +64,12 @@ as a reference point for writing an OLM operator that ships with its own Console
 
 ## Distributable SDK package overview
 
-| Package Name                                           | Description                                                                      |
-| ------------------------------------------------------ | -------------------------------------------------------------------------------- |
-| `@openshift-console/dynamic-plugin-sdk` ★              | Provides core APIs, types and utilities used by dynamic plugins at runtime.      |
-| `@openshift-console/dynamic-plugin-sdk-webpack` ★      | Provides webpack `ConsoleRemotePlugin` used to build all dynamic plugin assets.  |
-| `@openshift-console/dynamic-plugin-sdk-internal`       | Internal package exposing additional Console code.                               |
-| `@openshift-console/plugin-shared`                     | Provides reusable components and utility functions to build OCP dynamic plugins. |
+| Package Name                                      | Description                                                                      |
+| ------------------------------------------------- | -------------------------------------------------------------------------------- |
+| `@openshift-console/dynamic-plugin-sdk` ★         | Provides core APIs, types and utilities used by dynamic plugins at runtime.      |
+| `@openshift-console/dynamic-plugin-sdk-webpack` ★ | Provides webpack `ConsoleRemotePlugin` used to build all dynamic plugin assets.  |
+| `@openshift-console/dynamic-plugin-sdk-internal`  | Internal package exposing additional Console code.                               |
+| `@openshift-console/plugin-shared`                | Provides reusable components and utility functions to build OCP dynamic plugins. |
 
 Packages marked with ★ provide essential plugin APIs with backwards compatibility. Other packages may be
 used with multiple versions of OpenShift Console but don't provide any backwards compatibility guarantees.
@@ -175,6 +175,11 @@ This section documents notable changes in the Console provided shared modules ac
   correct styling.
 - Removed `co-m-horizontal-nav` styling. Use [PatternFly Tabs](https://www.patternfly.org/components/tabs/)
   instead.
+- Removed `co-m-page__body` styling. Use [PatternFly Flex](https://www.patternfly.org/layouts/flex) instead.
+- Removed `co-m-pane__body` spacing styling. Use
+  [PatternFly PageSection](https://www.patternfly.org/components/page#pagesection) instead.
+- Removed `co-m-nav-title` spacing styling. Use
+  [PatternFly PageSection](https://www.patternfly.org/components/page#pagesection) instead.
 
 ### PatternFly 5+ dynamic modules
 
@@ -227,10 +232,10 @@ metadata:
 spec:
   displayName: 'Cron Tab'
   contentSecurityPolicy:
-  - directive: 'ScriptSrc'
-    values:
-    - 'https://example1.com/'
-    - 'https://example2.com/'
+    - directive: 'ScriptSrc'
+      values:
+        - 'https://example1.com/'
+        - 'https://example2.com/'
 ```
 
 When enabled, Console CSP operates in report-only mode; CSP violations will be logged in
diff --git a/frontend/packages/console-dynamic-plugin-sdk/src/app/components/factory/ListPage/ListPageBody.tsx b/frontend/packages/console-dynamic-plugin-sdk/src/app/components/factory/ListPage/ListPageBody.tsx
index f6e565057ec..40c3fdeb23e 100644
--- a/frontend/packages/console-dynamic-plugin-sdk/src/app/components/factory/ListPage/ListPageBody.tsx
+++ b/frontend/packages/console-dynamic-plugin-sdk/src/app/components/factory/ListPage/ListPageBody.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 
 const ListPageBody: React.FC = ({ children }) => {
-  return <div className="co-m-pane__body co-m-pane__body--no-top-margin">{children}</div>;
+  return <PaneBody>{children}</PaneBody>;
 };
 
 export default ListPageBody;
diff --git a/frontend/packages/console-shared/src/components/catalog/CatalogController.tsx b/frontend/packages/console-shared/src/components/catalog/CatalogController.tsx
index 1c513cda50c..4ef63c992d2 100644
--- a/frontend/packages/console-shared/src/components/catalog/CatalogController.tsx
+++ b/frontend/packages/console-shared/src/components/catalog/CatalogController.tsx
@@ -13,6 +13,7 @@ import {
 } from '@console/internal/components/utils';
 import { DocumentTitle } from '@console/shared/src/components/document-title/DocumentTitle';
 import { useQueryParams } from '../../hooks';
+import PageBody from '../layout/PageBody';
 import CatalogView from './catalog-view/CatalogView';
 import CatalogTile from './CatalogTile';
 import CatalogDetailsModal from './details/CatalogDetailsModal';
@@ -182,7 +183,7 @@ const CatalogController: React.FC<CatalogControllerProps> = ({
   return (
     <>
       <DocumentTitle>{title}</DocumentTitle>
-      <div className="co-m-page__body">
+      <PageBody>
         <div className="co-catalog">
           <PageHeading title={title} breadcrumbs={type ? breadcrumbs : null} />
           <p data-test-id="catalog-page-description" className="co-catalog-page__description">
@@ -212,7 +213,7 @@ const CatalogController: React.FC<CatalogControllerProps> = ({
             </StatusBox>
           </div>
         </div>
-      </div>
+      </PageBody>
     </>
   );
 };
diff --git a/frontend/packages/console-shared/src/components/custom-resource-list/CustomResourceList.tsx b/frontend/packages/console-shared/src/components/custom-resource-list/CustomResourceList.tsx
index 771eb4237bc..f6e9445c915 100644
--- a/frontend/packages/console-shared/src/components/custom-resource-list/CustomResourceList.tsx
+++ b/frontend/packages/console-shared/src/components/custom-resource-list/CustomResourceList.tsx
@@ -11,6 +11,7 @@ import {
 } from '@console/internal/components/factory/table';
 import { FilterToolbar, RowFilter } from '@console/internal/components/filter-toolbar';
 import { getQueryArgument } from '@console/internal/components/utils/router';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { LoadingBox } from '@console/shared/src/components/loading/LoadingBox';
 
 interface CustomResourceListProps {
@@ -86,7 +87,7 @@ const CustomResourceList: React.FC<CustomResourceListProps> = ({
   }
 
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       {(rowFilters || textFilter) && (
         <FilterToolbar
           rowFilters={rowFilters}
@@ -108,7 +109,7 @@ const CustomResourceList: React.FC<CustomResourceListProps> = ({
         customData={customData}
         getRowProps={getRowProps}
       />
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/packages/console-shared/src/components/dashboard/Dashboard.tsx b/frontend/packages/console-shared/src/components/dashboard/Dashboard.tsx
index 9db948f7ee6..1c69d67149d 100644
--- a/frontend/packages/console-shared/src/components/dashboard/Dashboard.tsx
+++ b/frontend/packages/console-shared/src/components/dashboard/Dashboard.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
-import classNames from 'classnames';
+import { PageSection } from '@patternfly/react-core';
 import { OverviewProps } from '@console/dynamic-plugin-sdk';
 import './dashboard.scss';
 
 const Dashboard: React.FC<OverviewProps> = ({ className, children }) => (
-  <div data-test-id="dashboard" className={classNames('co-dashboard-body', className)}>
+  <PageSection data-test-id="dashboard" className={className}>
     {children}
-  </div>
+  </PageSection>
 );
 
 export default Dashboard;
diff --git a/frontend/packages/console-shared/src/components/dashboard/dashboard.scss b/frontend/packages/console-shared/src/components/dashboard/dashboard.scss
index 63ca316e35b..df8d41b71d3 100644
--- a/frontend/packages/console-shared/src/components/dashboard/dashboard.scss
+++ b/frontend/packages/console-shared/src/components/dashboard/dashboard.scss
@@ -1,13 +1,3 @@
-@import '../../../../../public/style/vars';
-
-.co-dashboard-body {
-  flex: 1 0 auto;
-  padding: $pf-v6-global-gutter;
-  @media (min-width: $pf-v6-global--breakpoint--xl) {
-    padding: $pf-v6-global-gutter--md;
-  }
-}
-
 .co-dashboard-grid {
   grid-gap: 1rem;
 }
diff --git a/frontend/packages/console-shared/src/components/error/fallbacks/ErrorBoundaryFallbackPage.tsx b/frontend/packages/console-shared/src/components/error/fallbacks/ErrorBoundaryFallbackPage.tsx
index 5919192c913..d18d5162e81 100644
--- a/frontend/packages/console-shared/src/components/error/fallbacks/ErrorBoundaryFallbackPage.tsx
+++ b/frontend/packages/console-shared/src/components/error/fallbacks/ErrorBoundaryFallbackPage.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { ErrorBoundaryFallbackProps } from '@console/dynamic-plugin-sdk';
 import { ExpandCollapse } from '@console/internal/components/utils/expand-collapse';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import PrimaryHeading from '../../heading/PrimaryHeading';
 import ErrorDetailsBlock from './ErrorDetailsBlock';
 
@@ -11,7 +12,7 @@ import ErrorDetailsBlock from './ErrorDetailsBlock';
 const ErrorBoundaryFallbackPage: React.FC<ErrorBoundaryFallbackProps> = (props) => {
   const { t } = useTranslation();
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <PrimaryHeading centerText>{t('console-shared~Oh no! Something went wrong.')}</PrimaryHeading>
       <ExpandCollapse
         textCollapsed={t('console-shared~Show details')}
@@ -19,7 +20,7 @@ const ErrorBoundaryFallbackPage: React.FC<ErrorBoundaryFallbackProps> = (props)
       >
         <ErrorDetailsBlock {...props} />
       </ExpandCollapse>
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/packages/console-shared/src/components/form-utils/FormBody.tsx b/frontend/packages/console-shared/src/components/form-utils/FormBody.tsx
index 69714f9708a..ab88f173124 100644
--- a/frontend/packages/console-shared/src/components/form-utils/FormBody.tsx
+++ b/frontend/packages/console-shared/src/components/form-utils/FormBody.tsx
@@ -19,7 +19,11 @@ const FormBody: React.FC<FormBodyProps & React.HTMLProps<HTMLDivElement>> = ({
 }) => (
   <div
     {...props}
-    className={classNames('pf-v6-c-form', { 'co-m-pane__body': !disablePaneBody }, className)}
+    className={classNames(
+      'pf-v6-c-form',
+      { 'pf-v6-c-page__main-section': !disablePaneBody },
+      className,
+    )}
     style={
       flexLayout
         ? { display: 'flex', flex: 1, flexDirection: 'column', paddingBottom: 0, ...(style ?? {}) }
diff --git a/frontend/packages/console-shared/src/components/form-utils/FormFooter.scss b/frontend/packages/console-shared/src/components/form-utils/FormFooter.scss
index ed2576e97cb..0f22d2207b4 100644
--- a/frontend/packages/console-shared/src/components/form-utils/FormFooter.scss
+++ b/frontend/packages/console-shared/src/components/form-utils/FormFooter.scss
@@ -1,14 +1,11 @@
 @import '../../../../../public/style/vars';
 
 .ocs-form-footer {
-  padding: var(--pf-t--global--spacer--md) $pf-v6-global-gutter;
+  padding: $pf-v6-global-gutter-y $pf-v6-global-gutter-x;
   z-index: calc(
     var(--pf-t--global--z-index--xs) + 1
   ); // bump above --pf-v6-c-menu-toggle--border--ZIndex (100) to prevent menu borders from appearing in the footer
 
-  @media (min-width: $pf-v6-global--breakpoint--xl) {
-    padding: var(--pf-t--global--spacer--md) $pf-v6-global-gutter--md;
-  }
   &__sticky {
     position: sticky;
     background-color: var(--pf-t--global--background--color--primary--default);
diff --git a/frontend/packages/console-shared/src/components/form-utils/PageBody.tsx b/frontend/packages/console-shared/src/components/form-utils/PageBody.tsx
deleted file mode 100644
index c0b6d847bbf..00000000000
--- a/frontend/packages/console-shared/src/components/form-utils/PageBody.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-
-interface PageBodyProps {
-  children?: React.ReactNode;
-  flexLayout?: boolean;
-}
-
-const PageBody: React.FC<PageBodyProps> = ({ children, flexLayout }) => (
-  <div
-    className={classnames('co-m-pane__body', { 'co-m-page__body': flexLayout })}
-    style={{ paddingBottom: 0 }}
-  >
-    {children}
-  </div>
-);
-
-export default PageBody;
diff --git a/frontend/packages/console-shared/src/components/form-utils/__tests__/PageBody.spec.tsx b/frontend/packages/console-shared/src/components/form-utils/__tests__/PageBody.spec.tsx
deleted file mode 100644
index ba1d79e60de..00000000000
--- a/frontend/packages/console-shared/src/components/form-utils/__tests__/PageBody.spec.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { TextInputTypes } from '@patternfly/react-core';
-import { shallow, ShallowWrapper } from 'enzyme';
-import InputField from '../../formik-fields/InputField';
-import PageBody from '../PageBody';
-
-describe('Page Body', () => {
-  let wrapper: ShallowWrapper<any>;
-  beforeEach(() => {
-    wrapper = shallow(
-      <PageBody>
-        <InputField type={TextInputTypes.text} name="test-input" required />
-      </PageBody>,
-    );
-  });
-
-  it('it should add className for flex layout if flexLayout prop is sent', () => {
-    expect(wrapper.hasClass('co-m-page__body')).toBe(false);
-    wrapper.setProps({ flexLayout: true });
-    expect(wrapper.hasClass('co-m-page__body')).toBe(true);
-  });
-
-  it('it should contain inputfield as a children of content wrapper', () => {
-    const content = wrapper.children().at(0);
-    expect(content.is(InputField)).toEqual(true);
-  });
-});
diff --git a/frontend/packages/console-shared/src/components/form-utils/index.ts b/frontend/packages/console-shared/src/components/form-utils/index.ts
index 791bcdcb249..97efeb15d0e 100644
--- a/frontend/packages/console-shared/src/components/form-utils/index.ts
+++ b/frontend/packages/console-shared/src/components/form-utils/index.ts
@@ -1,6 +1,5 @@
 export { default as FormFooter } from './FormFooter';
 export { default as FormHeader } from './FormHeader';
-export { default as PageBody } from './PageBody';
 export { default as FlexForm } from './FlexForm';
 export { default as ActionGroupWithIcons } from './ActionGroupWithIcons';
 export { default as FormBody } from './FormBody';
diff --git a/frontend/packages/console-shared/src/components/formik-fields/CodeEditorField.scss b/frontend/packages/console-shared/src/components/formik-fields/CodeEditorField.scss
index 9a305149228..61516ee4a5c 100644
--- a/frontend/packages/console-shared/src/components/formik-fields/CodeEditorField.scss
+++ b/frontend/packages/console-shared/src/components/formik-fields/CodeEditorField.scss
@@ -2,36 +2,18 @@
 @import '../../../../../public/style/vars';
 
 .osc-yaml-editor {
-  margin-right: -$pf-v6-global-gutter;
-  margin-top: -$pf-v6-global-gutter--md;
-
-  @media (max-width: $pf-v6-global--breakpoint--md) {
-    margin-left: -$pf-v6-global-gutter;
-  }
-  @media (min-width: $pf-v6-global--breakpoint--xl) {
-    margin-right: -$pf-v6-global-gutter--md;
-  }
-
-  .co-p-has-sidebar__body {
-    flex-direction: column;
-    display: flex;
-  }
+  margin-right: calc($pf-v6-global-gutter-x * -1);
 
   &__editor {
-    position: relative;
     display: flex;
-    height: 100%;
-    flex-grow: 1;
     flex-direction: column;
-    padding-top: $pf-v6-global-gutter;
+    flex-grow: 1;
+    height: 100%;
+    padding-right: $pf-v6-global-gutter-x;
+    position: relative;
     width: 100%;
-    max-width: calc(100% - $pf-v6-global-gutter--md);
-
-    @media (max-width: $pf-v6-global--breakpoint--md) {
-      max-width: 100%;
-    }
   }
-  &__sidebar {
-    margin-top: -$pf-v6-global-gutter--md;
+  .co-p-has-sidebar__sidebar {
+    margin-top: calc(var(--pf-v6-c-page__main-section--RowGap) * -1);
   }
 }
diff --git a/frontend/packages/console-shared/src/components/formik-fields/SyncedEditorField.scss b/frontend/packages/console-shared/src/components/formik-fields/SyncedEditorField.scss
index f6e6cccf478..cccd7b01c77 100644
--- a/frontend/packages/console-shared/src/components/formik-fields/SyncedEditorField.scss
+++ b/frontend/packages/console-shared/src/components/formik-fields/SyncedEditorField.scss
@@ -6,24 +6,12 @@
       var(--pf-t--global--border--color--default);
     border-top: var(--pf-t--global--border--width--divider--default) solid
       var(--pf-t--global--border--color--default);
-    margin-left: -$pf-v6-global-gutter;
-    margin-right: -$pf-v6-global-gutter;
-    padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--md);
-    @media (min-width: $pf-v6-global--breakpoint--xl) {
-      margin-left: -$pf-v6-global-gutter--md;
-      margin-right: -$pf-v6-global-gutter--md;
-    }
-    @media (min-width: $pf-v6-global--breakpoint--xl) {
-      padding-left: $pf-v6-global-gutter--md;
-      padding-right: $pf-v6-global-gutter--md;
-    }
+    margin-left: calc($pf-v6-global-gutter-x * -1);
+    margin-right: calc($pf-v6-global-gutter-x * -1);
+    padding: var(--pf-t--global--spacer--sm) $pf-v6-global-gutter-x;
 
     &.margin {
       margin: var(--pf-t--global--spacer--md) 0;
     }
   }
-
-  &__yaml-warning {
-    margin: $pf-v6-global-gutter--md $pf-v6-global-gutter--md 0;
-  }
 }
diff --git a/frontend/packages/console-shared/src/components/formik-fields/SyncedEditorField.tsx b/frontend/packages/console-shared/src/components/formik-fields/SyncedEditorField.tsx
index a2f3869030a..16e5f5cf0e1 100644
--- a/frontend/packages/console-shared/src/components/formik-fields/SyncedEditorField.tsx
+++ b/frontend/packages/console-shared/src/components/formik-fields/SyncedEditorField.tsx
@@ -175,7 +175,9 @@ const SyncedEditorField: React.FC<SyncedEditorFieldProps> = ({
           isInline
           title={t('console-shared~Invalid YAML cannot be persisted')}
         >
-          <p>{t('console-shared~Switching to form view will delete any invalid YAML.')}</p>
+          <p className="pf-v6-u-mb-sm">
+            {t('console-shared~Switching to form view will delete any invalid YAML.')}
+          </p>
           <Button variant="danger" onClick={onClickYAMLWarningConfirm}>
             {t('console-shared~Switch and delete')}
           </Button>
diff --git a/frontend/packages/console-shared/src/components/layout/NavTitle.tsx b/frontend/packages/console-shared/src/components/layout/NavTitle.tsx
new file mode 100644
index 00000000000..e81598188aa
--- /dev/null
+++ b/frontend/packages/console-shared/src/components/layout/NavTitle.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { PageSection } from '@patternfly/react-core';
+import * as classNames from 'classnames';
+
+const NavTitle: React.FC<NavTitleProps> = ({
+  children,
+  className,
+  dataTestID,
+  style,
+  ...props
+}) => {
+  return (
+    <PageSection
+      data-test-id={dataTestID}
+      className={classNames('co-m-nav-title', className)}
+      style={style}
+      hasBodyWrapper={false}
+      {...props}
+    >
+      {children}
+    </PageSection>
+  );
+};
+
+export type NavTitleProps = {
+  children: React.ReactNode;
+  dataTestID?: string;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export default NavTitle;
diff --git a/frontend/packages/console-shared/src/components/layout/PageBody.tsx b/frontend/packages/console-shared/src/components/layout/PageBody.tsx
new file mode 100644
index 00000000000..4eaf0bb8452
--- /dev/null
+++ b/frontend/packages/console-shared/src/components/layout/PageBody.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Flex } from '@patternfly/react-core';
+import * as classNames from 'classnames';
+
+const PageBody: React.FC<PageBodyProps> = ({ children, className, ...props }) => {
+  return (
+    <Flex
+      className={classNames('co-m-page__body', className)}
+      direction={{ default: 'column' }}
+      rowGap={{ default: 'rowGapNone' }}
+      flexWrap={{ default: 'nowrap' }}
+      style={{ flex: '1 0 auto' }}
+      {...props}
+    >
+      {children}
+    </Flex>
+  );
+};
+
+export type PageBodyProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export default PageBody;
diff --git a/frontend/packages/console-shared/src/components/layout/PageLayout.scss b/frontend/packages/console-shared/src/components/layout/PageLayout.scss
deleted file mode 100644
index 79ccabe1bb3..00000000000
--- a/frontend/packages/console-shared/src/components/layout/PageLayout.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@import '../../../../../public/style/vars';
-
-.ocs-page-layout {
-  &__content {
-    padding: 0 $pf-v6-global-gutter $pf-v6-global-gutter--md;
-    @media (min-width: $pf-v6-global--breakpoint--xl) {
-      padding-left: $pf-v6-global-gutter--md;
-      padding-right: $pf-v6-global-gutter--md;
-    }
-
-    flex: 1;
-  }
-
-  &__hint {
-    padding-bottom: var(--pf-t--global--spacer--md);
-    padding: 0 $pf-v6-global-gutter $pf-v6-global-gutter--md;
-
-    @media (min-width: $pf-v6-global--breakpoint--xl) {
-      padding-left: $pf-v6-global-gutter--md;
-      padding-right: $pf-v6-global-gutter--md;
-    }
-  }
-
-  &__title {
-    padding: 0 $pf-v6-global-gutter;
-
-    @media (min-width: $pf-v6-global--breakpoint--xl) {
-      padding-left: $pf-v6-global-gutter--md;
-      padding-right: $pf-v6-global-gutter--md;
-    }
-  }
-}
diff --git a/frontend/packages/console-shared/src/components/layout/PageLayout.tsx b/frontend/packages/console-shared/src/components/layout/PageLayout.tsx
index d054ca81675..242e1b69aae 100644
--- a/frontend/packages/console-shared/src/components/layout/PageLayout.tsx
+++ b/frontend/packages/console-shared/src/components/layout/PageLayout.tsx
@@ -1,7 +1,5 @@
 import * as React from 'react';
-import { Content } from '@patternfly/react-core';
-
-import './PageLayout.scss';
+import { Content, ContentVariants, PageSection } from '@patternfly/react-core';
 
 type PageLayoutProps = {
   children: React.ReactNode;
@@ -11,13 +9,17 @@ type PageLayoutProps = {
 
 const PageLayout: React.FC<PageLayoutProps> = ({ children, title, hint }) => (
   <>
-    <div className="ocs-page-layout__header">
-      <Content component="h1" className="ocs-page-layout__title">
+    <PageSection className="ocs-page-layout__header">
+      <Content component={ContentVariants.h1} className="ocs-page-layout__title">
         {title}
       </Content>
-      {hint && <div className="ocs-page-layout__hint">{hint}</div>}
-    </div>
-    <div className="ocs-page-layout__content">{children}</div>
+      {hint && (
+        <Content component={ContentVariants.p} className="ocs-page-layout__hint co-help-text">
+          {hint}
+        </Content>
+      )}
+    </PageSection>
+    <PageSection className="ocs-page-layout__content">{children}</PageSection>
   </>
 );
 
diff --git a/frontend/packages/console-shared/src/components/layout/PaneBody.tsx b/frontend/packages/console-shared/src/components/layout/PaneBody.tsx
new file mode 100644
index 00000000000..2e6caa22a0d
--- /dev/null
+++ b/frontend/packages/console-shared/src/components/layout/PaneBody.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { PageSection } from '@patternfly/react-core';
+import * as classNames from 'classnames';
+
+const PaneBody: React.FC<PaneBodyProps> = ({
+  children,
+  className,
+  fullHeight,
+  sectionHeading,
+  style,
+  ...props
+}) => {
+  return (
+    <PageSection
+      className={classNames(
+        'co-m-pane__body',
+        { 'co-m-pane__body--section-heading': sectionHeading },
+        className,
+      )}
+      isFilled={fullHeight}
+      hasBodyWrapper={false}
+      style={style}
+      {...props}
+    >
+      {children}
+    </PageSection>
+  );
+};
+
+export type PaneBodyProps = {
+  children: React.ReactNode;
+  className?: string;
+  fullHeight?: boolean;
+  sectionHeading?: boolean;
+  style?: React.CSSProperties;
+};
+
+export default PaneBody;
diff --git a/frontend/packages/console-shared/src/components/status/StatusBox.tsx b/frontend/packages/console-shared/src/components/status/StatusBox.tsx
index f58d261eb98..c7476329959 100644
--- a/frontend/packages/console-shared/src/components/status/StatusBox.tsx
+++ b/frontend/packages/console-shared/src/components/status/StatusBox.tsx
@@ -9,6 +9,7 @@ import {
 } from '@console/dynamic-plugin-sdk/src/utils/error/http-error';
 import PrimaryHeading from '@console/shared/src/components/heading/PrimaryHeading';
 import { AccessDenied, EmptyBox } from '../empty-state';
+import PaneBody from '../layout/PaneBody';
 import { LoadError, LoadingBox } from '../loading';
 
 const Data: React.FC<DataProps> = ({
@@ -46,9 +47,9 @@ export const StatusBox: React.FC<StatusBoxProps> = (props) => {
     const status = _.get(loadError, 'response.status');
     if (status === 404) {
       return (
-        <div className="co-m-pane__body">
+        <PaneBody>
           <PrimaryHeading centerText>{t('404: Not Found')}</PrimaryHeading>
-        </div>
+        </PaneBody>
       );
     }
     if (status === 403) {
diff --git a/frontend/packages/console-shared/src/components/synced-editor/index.tsx b/frontend/packages/console-shared/src/components/synced-editor/index.tsx
index b1ce30579e7..4a0b10f55d5 100644
--- a/frontend/packages/console-shared/src/components/synced-editor/index.tsx
+++ b/frontend/packages/console-shared/src/components/synced-editor/index.tsx
@@ -120,7 +120,9 @@ export const SyncedEditor: React.FC<SyncedEditorProps> = ({
           title={t('console-shared~Invalid YAML cannot be persisted')}
         >
           {displayConversionError && <p>{switchError}</p>}
-          <p>{t('console-shared~Switching to form view will delete any invalid YAML.')}</p>
+          <p className="pf-v6-u-mb-sm">
+            {t('console-shared~Switching to form view will delete any invalid YAML.')}
+          </p>
           <Button variant="danger" onClick={onClickYAMLWarningConfirm}>
             {t('console-shared~Switch and delete')}
           </Button>
diff --git a/frontend/packages/console-shared/src/components/synced-editor/styles.scss b/frontend/packages/console-shared/src/components/synced-editor/styles.scss
index 388021040a1..fcc1570d197 100644
--- a/frontend/packages/console-shared/src/components/synced-editor/styles.scss
+++ b/frontend/packages/console-shared/src/components/synced-editor/styles.scss
@@ -6,10 +6,6 @@
   border-top: var(--pf-t--global--border--width--divider--default) solid
     var(--pf-t--global--border--color--default);
   padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--lg);
-  @media (min-width: $pf-v6-global--breakpoint--xl) {
-    padding-left: $pf-v6-global-gutter--md;
-    padding-right: $pf-v6-global-gutter--md;
-  }
 }
 
 .co-synced-editor__editor-toggle-label {
@@ -18,5 +14,5 @@
 }
 
 .co-synced-editor__yaml-warning {
-  margin: $pf-v6-global-gutter--md $pf-v6-global-gutter--md 0;
+  margin: 0 0 $pf-v6-global-gutter-y;
 }
diff --git a/frontend/packages/console-telemetry-plugin/integration-tests/cypress.config.js b/frontend/packages/console-telemetry-plugin/integration-tests/cypress.config.js
index b64cccc1e83..59be110eadc 100644
--- a/frontend/packages/console-telemetry-plugin/integration-tests/cypress.config.js
+++ b/frontend/packages/console-telemetry-plugin/integration-tests/cypress.config.js
@@ -46,5 +46,6 @@ module.exports = defineConfig({
     testIsolation: false,
     experimentalMemoryManagement: true,
     numTestsKeptInMemory: 5,
+    injectDocumentDomain: true,
   },
 });
diff --git a/frontend/packages/container-security/src/components/image-manifest-vuln.tsx b/frontend/packages/container-security/src/components/image-manifest-vuln.tsx
index 421bae25489..0741d803f64 100644
--- a/frontend/packages/container-security/src/components/image-manifest-vuln.tsx
+++ b/frontend/packages/container-security/src/components/image-manifest-vuln.tsx
@@ -31,6 +31,7 @@ import {
 } from '@console/internal/components/utils';
 import { referenceForModel, PodKind, ContainerStatus } from '@console/internal/module/k8s';
 import { EmptyStateResourceBadge, GreenCheckCircleIcon } from '@console/shared/';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { vulnPriority, totalFor, priorityFor } from '../const';
 import { ImageManifestVulnModel } from '../models';
 import { ImageManifestVuln } from '../types';
@@ -58,11 +59,11 @@ export const ImageManifestVulnDetails: React.FC<ImageManifestVulnDetailsProps> =
   const queryURL = quayURLFor(props.obj);
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading text={t('container-security~Image Manifest Vulnerabilities details')} />
         <ImageVulnerabilityToggleGroup obj={props.obj} />
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <div className="row">
           <div className="col-sm-6">
             <ResourceSummary resource={props.obj} />
@@ -87,7 +88,7 @@ export const ImageManifestVulnDetails: React.FC<ImageManifestVulnDetailsProps> =
             </dl>
           </div>
         </div>
-      </div>
+      </PaneBody>
       <div className="cs-imagevulnerabilitieslist__wrapper">
         <ImageVulnerabilitiesList {...props} />
       </div>
@@ -326,7 +327,7 @@ export const ContainerVulnerabilities: React.FC<ContainerVulnerabilitiesProps> =
   ) => (vuln !== undefined ? exists(vuln) : absent());
 
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <div className="co-m-table-grid co-m-table-grid--bordered">
         <div className="row co-m-table-grid__head">
           <div className="col-md-3">{t('container-security~Container')}</div>
@@ -385,7 +386,7 @@ export const ContainerVulnerabilities: React.FC<ContainerVulnerabilitiesProps> =
           ))}
         </div>
       </div>
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/packages/dev-console/integration-tests/cypress.config.js b/frontend/packages/dev-console/integration-tests/cypress.config.js
index 1bf4a1634ad..e04e08e7793 100644
--- a/frontend/packages/dev-console/integration-tests/cypress.config.js
+++ b/frontend/packages/dev-console/integration-tests/cypress.config.js
@@ -48,5 +48,6 @@ module.exports = defineConfig({
     testIsolation: false,
     experimentalMemoryManagement: true,
     numTestsKeptInMemory: 5,
+    injectDocumentDomain: true,
   },
 });
diff --git a/frontend/packages/dev-console/src/components/ProjectSelectPage.tsx b/frontend/packages/dev-console/src/components/ProjectSelectPage.tsx
index f273c988ee3..5e8f2ef95d8 100644
--- a/frontend/packages/dev-console/src/components/ProjectSelectPage.tsx
+++ b/frontend/packages/dev-console/src/components/ProjectSelectPage.tsx
@@ -13,6 +13,7 @@ import {
 } from '@console/internal/module/k8s';
 import { getBadgeFromType } from '@console/shared/src';
 import { DocumentTitle } from '@console/shared/src/components/document-title/DocumentTitle';
+import CatalogPageHelpText from './catalog/CatalogPageHelpText';
 import CreateProjectListPage, { CreateAProjectButton } from './projects/CreateProjectListPage';
 
 export interface ProjectSelectPageProps {
@@ -52,10 +53,12 @@ const ProjectSelectPage: React.FC<ProjectSelectPageProps> = (props) => {
       <DocumentTitle>{projectLabelPlural}</DocumentTitle>
       <CreateProjectListPage title={kindObj.labelPlural} badge={getBadgeFromType(kindObj.badge)}>
         {(openProjectModal) => (
-          <Trans t={t} ns="devconsole" values={{ projectLabelPlural }}>
-            Select a Project to view the list of {{ projectLabelPlural }}
-            <CreateAProjectButton openProjectModal={openProjectModal} />.
-          </Trans>
+          <CatalogPageHelpText>
+            <Trans t={t} ns="devconsole" values={{ projectLabelPlural }}>
+              Select a Project to view the list of {{ projectLabelPlural }}
+              <CreateAProjectButton openProjectModal={openProjectModal} />.
+            </Trans>
+          </CatalogPageHelpText>
         )}
       </CreateProjectListPage>
     </>
diff --git a/frontend/packages/dev-console/src/components/SearchPage.tsx b/frontend/packages/dev-console/src/components/SearchPage.tsx
index 4c2e1ef30d6..4426f9c1a80 100644
--- a/frontend/packages/dev-console/src/components/SearchPage.tsx
+++ b/frontend/packages/dev-console/src/components/SearchPage.tsx
@@ -4,6 +4,7 @@ import { useParams } from 'react-router-dom-v5-compat';
 import { SearchPage } from '@console/internal/components/search';
 import { withStartGuide } from '@console/internal/components/start-guide';
 import { DocumentTitle } from '@console/shared/src/components/document-title/DocumentTitle';
+import CatalogPageHelpText from './catalog/CatalogPageHelpText';
 import NamespacedPage, { NamespacedPageVariants } from './NamespacedPage';
 import CreateProjectListPage, { CreateAProjectButton } from './projects/CreateProjectListPage';
 
@@ -16,10 +17,12 @@ const ProjectListPage = () => {
   return (
     <CreateProjectListPage title={t('devconsole~Search')}>
       {(openProjectModal) => (
-        <Trans t={t} ns="devconsole">
-          Select a Project to search inside
-          <CreateAProjectButton openProjectModal={openProjectModal} />.
-        </Trans>
+        <CatalogPageHelpText>
+          <Trans t={t} ns="devconsole">
+            Select a Project to search inside
+            <CreateAProjectButton openProjectModal={openProjectModal} />.
+          </Trans>
+        </CatalogPageHelpText>
       )}
     </CreateProjectListPage>
   );
diff --git a/frontend/packages/dev-console/src/components/add/AddPage.tsx b/frontend/packages/dev-console/src/components/add/AddPage.tsx
index c0f141452a5..701d946cd97 100644
--- a/frontend/packages/dev-console/src/components/add/AddPage.tsx
+++ b/frontend/packages/dev-console/src/components/add/AddPage.tsx
@@ -4,6 +4,7 @@ import { useParams } from 'react-router-dom-v5-compat';
 import { FLAGS, useFlag } from '@console/shared';
 import { DocumentTitle } from '@console/shared/src/components/document-title/DocumentTitle';
 import { withStartGuide } from '../../../../../public/components/start-guide';
+import CatalogPageHelpText from '../catalog/CatalogPageHelpText';
 import NamespacedPage, { NamespacedPageVariants } from '../NamespacedPage';
 import CreateProjectListPage, { CreateAProjectButton } from '../projects/CreateProjectListPage';
 import AddPageLayout from './AddPageLayout';
@@ -19,15 +20,19 @@ export const PageContents: React.FC = () => {
       <CreateProjectListPage title={t('devconsole~Add')}>
         {(openProjectModal) =>
           isOpenShift ? (
-            <Trans t={t} ns="devconsole">
-              Select a Project to start adding to it
-              <CreateAProjectButton openProjectModal={openProjectModal} />.
-            </Trans>
+            <CatalogPageHelpText>
+              <Trans t={t} ns="devconsole">
+                Select a Project to start adding to it
+                <CreateAProjectButton openProjectModal={openProjectModal} />.
+              </Trans>
+            </CatalogPageHelpText>
           ) : (
-            <Trans t={t} ns="devconsole">
-              Select a Namespace to start adding to it
-              <CreateAProjectButton openProjectModal={openProjectModal} />.
-            </Trans>
+            <CatalogPageHelpText>
+              <Trans t={t} ns="devconsole">
+                Select a Namespace to start adding to it
+                <CreateAProjectButton openProjectModal={openProjectModal} />.
+              </Trans>
+            </CatalogPageHelpText>
           )
         }
       </CreateProjectListPage>
diff --git a/frontend/packages/dev-console/src/components/add/AddPageLayout.scss b/frontend/packages/dev-console/src/components/add/AddPageLayout.scss
index af749dc2a59..0c30098a102 100644
--- a/frontend/packages/dev-console/src/components/add/AddPageLayout.scss
+++ b/frontend/packages/dev-console/src/components/add/AddPageLayout.scss
@@ -1,18 +1,6 @@
 @import '../../../../../public/style/vars';
 
 .odc-add-page-layout {
-  // Fix missing white background color above the header.
-  .ocs-page-layout__title {
-    margin-top: 0;
-    padding-top: var(--pf-t--global--spacer--lg);
-  }
-
-  // Drop padding below the hint to add this gap between hint and actions below.
-  .ocs-page-layout__hint {
-    padding-bottom: 0; /* override var(--pf-t--global--spacer--md) */
-    padding-right: 0;
-  }
-
   &__hint-block {
     display: flex;
     align-items: center;
diff --git a/frontend/packages/dev-console/src/components/add/__tests__/AddPageLayout.spec.tsx b/frontend/packages/dev-console/src/components/add/__tests__/AddPageLayout.spec.tsx
index 77b7e163f2e..cc334c4b0a9 100644
--- a/frontend/packages/dev-console/src/components/add/__tests__/AddPageLayout.spec.tsx
+++ b/frontend/packages/dev-console/src/components/add/__tests__/AddPageLayout.spec.tsx
@@ -52,7 +52,14 @@ describe('AddPageLayout', () => {
 
       expect(wrapper.find(PageLayout).dive().find(Tooltip).exists()).toBe(true);
 
-      expect(wrapper.find(PageLayout).shallow().text().includes('hintBlock')).toBe(true);
+      expect(
+        wrapper
+          .find(PageLayout)
+          .dive()
+          .find('.odc-add-page-layout__additional-hint-block')
+          .text()
+          .includes('hintBlock'),
+      ).toBe(true);
     });
   });
 
diff --git a/frontend/packages/dev-console/src/components/builds/BuildsTabListPage.tsx b/frontend/packages/dev-console/src/components/builds/BuildsTabListPage.tsx
index b6c87b79724..17b6d6a7d49 100644
--- a/frontend/packages/dev-console/src/components/builds/BuildsTabListPage.tsx
+++ b/frontend/packages/dev-console/src/components/builds/BuildsTabListPage.tsx
@@ -13,6 +13,7 @@ import {
 import { useK8sModel } from '@console/shared/src/hooks/useK8sModel';
 import { useResourceListPages } from '@console/shared/src/hooks/useResourceListPages';
 import { LAST_BUILD_PAGE_TAB_STORAGE_KEY } from '../../const';
+import CatalogPageHelpText from '../catalog/CatalogPageHelpText';
 import NamespacedPage, { NamespacedPageVariants } from '../NamespacedPage';
 import CreateProjectListPage, { CreateAProjectButton } from '../projects/CreateProjectListPage';
 
@@ -128,10 +129,12 @@ const BuildsTabListPage: React.FC = () => {
     return (
       <CreateProjectListPage title={title}>
         {(openProjectModal) => (
-          <Trans t={t} ns="devconsole">
-            Select a Project to view the list of builds
-            <CreateAProjectButton openProjectModal={openProjectModal} />.
-          </Trans>
+          <CatalogPageHelpText>
+            <Trans t={t} ns="devconsole">
+              Select a Project to view the list of builds
+              <CreateAProjectButton openProjectModal={openProjectModal} />.
+            </Trans>
+          </CatalogPageHelpText>
         )}
       </CreateProjectListPage>
     );
diff --git a/frontend/packages/dev-console/src/components/catalog/CatalogPage.tsx b/frontend/packages/dev-console/src/components/catalog/CatalogPage.tsx
index 5d9af0c36f9..4760d2ae85b 100644
--- a/frontend/packages/dev-console/src/components/catalog/CatalogPage.tsx
+++ b/frontend/packages/dev-console/src/components/catalog/CatalogPage.tsx
@@ -13,6 +13,7 @@ import {
 } from '@console/shared';
 import NamespacedPage, { NamespacedPageVariants } from '../NamespacedPage';
 import CreateProjectListPage, { CreateAProjectButton } from '../projects/CreateProjectListPage';
+import CatalogPageHelpText from './CatalogPageHelpText';
 
 const PageContents: React.FC = () => {
   const { t } = useTranslation();
@@ -38,10 +39,12 @@ const PageContents: React.FC = () => {
   ) : (
     <CreateProjectListPage title={t('devconsole~Software Catalog')}>
       {(openProjectModal) => (
-        <Trans t={t} ns="devconsole">
-          Select a Project to view the software catalog
-          <CreateAProjectButton openProjectModal={openProjectModal} />.
-        </Trans>
+        <CatalogPageHelpText>
+          <Trans t={t} ns="devconsole">
+            Select a Project to view the software catalog
+            <CreateAProjectButton openProjectModal={openProjectModal} />.
+          </Trans>
+        </CatalogPageHelpText>
       )}
     </CreateProjectListPage>
   );
diff --git a/frontend/packages/dev-console/src/components/catalog/CatalogPageHelpText.tsx b/frontend/packages/dev-console/src/components/catalog/CatalogPageHelpText.tsx
new file mode 100644
index 00000000000..5c4796755ec
--- /dev/null
+++ b/frontend/packages/dev-console/src/components/catalog/CatalogPageHelpText.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { Content, ContentVariants } from '@patternfly/react-core';
+
+const CatalogPageHelpText: React.FC = ({ children }) => {
+  return (
+    <Content component={ContentVariants.p} className="pf-v6-u-mt-sm co-help-text">
+      {children}
+    </Content>
+  );
+};
+
+export default CatalogPageHelpText;
diff --git a/frontend/packages/dev-console/src/components/import/SamplesCatalog.tsx b/frontend/packages/dev-console/src/components/import/SamplesCatalog.tsx
index ba605c6c4e2..54e0151494a 100644
--- a/frontend/packages/dev-console/src/components/import/SamplesCatalog.tsx
+++ b/frontend/packages/dev-console/src/components/import/SamplesCatalog.tsx
@@ -4,6 +4,7 @@ import { useParams } from 'react-router-dom-v5-compat';
 import { CatalogItem } from '@console/dynamic-plugin-sdk/src/extensions';
 import { CatalogController, CatalogServiceProvider } from '@console/shared';
 import { DocumentTitle } from '@console/shared/src/components/document-title/DocumentTitle';
+import CatalogPageHelpText from '../catalog/CatalogPageHelpText';
 import NamespacedPage, { NamespacedPageVariants } from '../NamespacedPage';
 import CreateProjectListPage, { CreateAProjectButton } from '../projects/CreateProjectListPage';
 
@@ -51,10 +52,12 @@ const SampleCatalog: React.FC = () => {
         ) : (
           <CreateProjectListPage title={t('devconsole~Samples')}>
             {(openProjectModal) => (
-              <Trans t={t} ns="devconsole">
-                Select a Project to view the list of samples
-                <CreateAProjectButton openProjectModal={openProjectModal} />.
-              </Trans>
+              <CatalogPageHelpText>
+                <Trans t={t} ns="devconsole">
+                  Select a Project to view the list of samples
+                  <CreateAProjectButton openProjectModal={openProjectModal} />.
+                </Trans>
+              </CatalogPageHelpText>
             )}
           </CreateProjectListPage>
         )}
diff --git a/frontend/packages/dev-console/src/components/monitoring/MonitoringPage.tsx b/frontend/packages/dev-console/src/components/monitoring/MonitoringPage.tsx
index 67651be3453..90f3106a559 100644
--- a/frontend/packages/dev-console/src/components/monitoring/MonitoringPage.tsx
+++ b/frontend/packages/dev-console/src/components/monitoring/MonitoringPage.tsx
@@ -5,6 +5,7 @@ import { withStartGuide } from '@console/internal/components/start-guide';
 import { HorizontalNav, PageHeading, history } from '@console/internal/components/utils';
 import { ALL_NAMESPACES_KEY } from '@console/shared';
 import { PageTitleContext } from '@console/shared/src/components/pagetitle/PageTitleContext';
+import CatalogPageHelpText from '../catalog/CatalogPageHelpText';
 import NamespacedPage, { NamespacedPageVariants } from '../NamespacedPage';
 import CreateProjectListPage, { CreateAProjectButton } from '../projects/CreateProjectListPage';
 import MonitoringEvents from './events/MonitoringEvents';
@@ -45,10 +46,12 @@ export const PageContents: React.FC = () => {
   ) : (
     <CreateProjectListPage title={t('devconsole~Observe')}>
       {(openProjectModal) => (
-        <Trans t={t} ns="devconsole">
-          Select a Project to view monitoring metrics
-          <CreateAProjectButton openProjectModal={openProjectModal} />.
-        </Trans>
+        <CatalogPageHelpText>
+          <Trans t={t} ns="devconsole">
+            Select a Project to view monitoring metrics
+            <CreateAProjectButton openProjectModal={openProjectModal} />.
+          </Trans>
+        </CatalogPageHelpText>
       )}
     </CreateProjectListPage>
   );
diff --git a/frontend/packages/dev-console/src/components/project-access/ProjectAccess.tsx b/frontend/packages/dev-console/src/components/project-access/ProjectAccess.tsx
index 1e3b7936531..08d621a94a6 100644
--- a/frontend/packages/dev-console/src/components/project-access/ProjectAccess.tsx
+++ b/frontend/packages/dev-console/src/components/project-access/ProjectAccess.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Content, ContentVariants } from '@patternfly/react-core';
 import { Formik } from 'formik';
 import * as _ from 'lodash';
 import { useTranslation, Trans } from 'react-i18next';
@@ -119,19 +120,23 @@ const ProjectAccess: React.FC<ProjectAccessProps> = ({
         title={fullFormView ? t('devconsole~Project access') : null}
         data-test="project-access-page"
       >
-        <Trans t={t} ns="devconsole">
-          {
-            "Project access allows you to add or remove a user's access to the project. More advanced management of role-based access control appear in "
-          }
-          <Link to={`/k8s/ns/${namespace}/${RoleModel.plural}`}>Roles</Link> and{' '}
-          <Link to={`/k8s/ns/${namespace}/${RoleBindingModel.plural}`}>Role Bindings</Link>.
-        </Trans>
-        {!isManaged() && (
+        <Content component={ContentVariants.p}>
           <Trans t={t} ns="devconsole">
-            {' '}
-            For more information, see the{' '}
-            <ExternalLink href={rbacURL}>role-based access control documentation</ExternalLink>.
+            {
+              "Project access allows you to add or remove a user's access to the project. More advanced management of role-based access control appear in "
+            }
+            <Link to={`/k8s/ns/${namespace}/${RoleModel.plural}`}>Roles</Link> and{' '}
+            <Link to={`/k8s/ns/${namespace}/${RoleBindingModel.plural}`}>Role Bindings</Link>.
           </Trans>
+        </Content>
+        {!isManaged() && (
+          <Content component={ContentVariants.p}>
+            <Trans t={t} ns="devconsole">
+              {' '}
+              For more information, see the{' '}
+              <ExternalLink href={rbacURL}>role-based access control documentation</ExternalLink>.
+            </Trans>
+          </Content>
         )}
       </PageHeading>
       {roleBindings.loadError ? (
diff --git a/frontend/packages/dev-console/src/components/project-access/ProjectAccessForm.tsx b/frontend/packages/dev-console/src/components/project-access/ProjectAccessForm.tsx
index 0fbd1e76645..0157edb2e85 100644
--- a/frontend/packages/dev-console/src/components/project-access/ProjectAccessForm.tsx
+++ b/frontend/packages/dev-console/src/components/project-access/ProjectAccessForm.tsx
@@ -10,6 +10,7 @@ import {
   FormFooter,
   NSDropdownField,
 } from '@console/shared';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { Roles, ignoreRoleBindingName } from './project-access-form-utils';
 import { UserRoleBinding } from './project-access-form-utils-types';
 import './ProjectAccessForm.scss';
@@ -80,7 +81,7 @@ const ProjectAccessForm: React.FC<ProjectAccessFormProps> = ({
 
   return (
     <Form onSubmit={handleSubmit}>
-      <div className="co-m-pane__body odc-project-access-form__body">
+      <PaneBody className="odc-project-access-form__body">
         <div className="co-m-pane__form">
           <MultiColumnField
             name="projectAccess"
@@ -103,7 +104,7 @@ const ProjectAccessForm: React.FC<ProjectAccessFormProps> = ({
             />
           </MultiColumnField>
         </div>
-      </div>
+      </PaneBody>
       <FormFooter
         handleReset={onReload}
         isSubmitting={isSubmitting}
diff --git a/frontend/packages/dev-console/src/components/projects/ProjectListPage.tsx b/frontend/packages/dev-console/src/components/projects/ProjectListPage.tsx
index 42d9d2984f5..dffa3f12e67 100644
--- a/frontend/packages/dev-console/src/components/projects/ProjectListPage.tsx
+++ b/frontend/packages/dev-console/src/components/projects/ProjectListPage.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Divider } from '@patternfly/react-core';
 import { ListPage } from '@console/internal/components/factory';
 import { ProjectsTable } from '@console/internal/components/namespace';
 import { PageHeading } from '@console/internal/components/utils';
@@ -22,7 +21,6 @@ const ProjectListPage: React.FC<ProjectListPageProps> = ({
     <PageHeading title={title} badge={badge}>
       {children}
     </PageHeading>
-    <Divider className="co-divider" />
     <ListPage
       {...listPageProps}
       showTitle={false}
diff --git a/frontend/packages/dev-console/src/components/projects/details/ProjectDetailsPage.tsx b/frontend/packages/dev-console/src/components/projects/details/ProjectDetailsPage.tsx
index 733c93c499b..1c570d0a7be 100644
--- a/frontend/packages/dev-console/src/components/projects/details/ProjectDetailsPage.tsx
+++ b/frontend/packages/dev-console/src/components/projects/details/ProjectDetailsPage.tsx
@@ -9,6 +9,7 @@ import { history, useAccessReview, Page } from '@console/internal/components/uti
 import { ProjectModel, RoleBindingModel } from '@console/internal/models';
 import { ALL_NAMESPACES_KEY } from '@console/shared';
 import { DocumentTitle } from '@console/shared/src/components/document-title/DocumentTitle';
+import CatalogPageHelpText from '../../catalog/CatalogPageHelpText';
 import NamespacedPage, { NamespacedPageVariants } from '../../NamespacedPage';
 import ProjectAccessPage from '../../project-access/ProjectAccessPage';
 import CreateProjectListPage, { CreateAProjectButton } from '../CreateProjectListPage';
@@ -84,10 +85,12 @@ export const PageContents: React.FC<MonitoringPageProps> = ({ noProjectsAvailabl
   ) : (
     <CreateProjectListPage title={t('devconsole~Project Details')}>
       {(openProjectModal) => (
-        <Trans t={t} ns="devconsole">
-          Select a Project to view its details
-          <CreateAProjectButton openProjectModal={openProjectModal} />.
-        </Trans>
+        <CatalogPageHelpText>
+          <Trans t={t} ns="devconsole">
+            Select a Project to view its details
+            <CreateAProjectButton openProjectModal={openProjectModal} />.
+          </Trans>
+        </CatalogPageHelpText>
       )}
     </CreateProjectListPage>
   );
diff --git a/frontend/packages/gitops-plugin/integration-tests/cypress.config.js b/frontend/packages/gitops-plugin/integration-tests/cypress.config.js
index 10949a84616..4256b22843c 100644
--- a/frontend/packages/gitops-plugin/integration-tests/cypress.config.js
+++ b/frontend/packages/gitops-plugin/integration-tests/cypress.config.js
@@ -53,5 +53,6 @@ module.exports = defineConfig({
     testIsolation: false,
     experimentalMemoryManagement: true,
     numTestsKeptInMemory: 5,
+    injectDocumentDomain: true,
   },
 });
diff --git a/frontend/packages/gitops-plugin/src/components/details/GitOpsDetailsPageHeading.tsx b/frontend/packages/gitops-plugin/src/components/details/GitOpsDetailsPageHeading.tsx
index 7138446e5b7..ca6e865100e 100644
--- a/frontend/packages/gitops-plugin/src/components/details/GitOpsDetailsPageHeading.tsx
+++ b/frontend/packages/gitops-plugin/src/components/details/GitOpsDetailsPageHeading.tsx
@@ -1,9 +1,11 @@
 import * as React from 'react';
+import { PageBreadcrumb } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
 import { routeDecoratorIcon } from '@console/dev-console/src/components/import/render-utils';
 import { BreadCrumbs, ExternalLink } from '@console/internal/components/utils';
 import './GitOpsDetailsPageHeading.scss';
 import PrimaryHeading from '@console/shared/src/components/heading/PrimaryHeading';
+import NavTitle from '@console/shared/src/components/layout/NavTitle';
 
 interface GitOpsDetailsPageHeadingProps {
   url: string;
@@ -32,10 +34,10 @@ const GitOpsDetailsPageHeading: React.FC<GitOpsDetailsPageHeadingProps> = ({
 
   return (
     <>
-      <div className="pf-v6-c-page__main-breadcrumb">
+      <PageBreadcrumb>
         <BreadCrumbs breadcrumbs={breadcrumbs} />
-      </div>
-      <div className="gop-gitops-details-page-heading co-m-nav-title co-m-nav-title--breadcrumbs">
+      </PageBreadcrumb>
+      <NavTitle className="gop-gitops-details-page-heading co-m-nav-title--breadcrumbs">
         <PrimaryHeading className="pf-v6-u-mr-sm">
           <div className="co-m-pane__name co-resource-item">
             <span className="co-resource-item__resource-name">{appName}</span>
@@ -49,7 +51,7 @@ const GitOpsDetailsPageHeading: React.FC<GitOpsDetailsPageHeadingProps> = ({
           {routeDecoratorIcon(manifestURL, 12, t)}&nbsp;
           {manifestURL}&nbsp;
         </ExternalLink>
-      </div>
+      </NavTitle>
     </>
   );
 };
diff --git a/frontend/packages/helm-plugin/integration-tests/cypress.config.js b/frontend/packages/helm-plugin/integration-tests/cypress.config.js
index 03e5d063df1..a98df0c5073 100644
--- a/frontend/packages/helm-plugin/integration-tests/cypress.config.js
+++ b/frontend/packages/helm-plugin/integration-tests/cypress.config.js
@@ -47,5 +47,6 @@ module.exports = defineConfig({
     testIsolation: false,
     experimentalMemoryManagement: true,
     numTestsKeptInMemory: 5,
+    injectDocumentDomain: true,
   },
 });
diff --git a/frontend/packages/helm-plugin/src/components/details-page/notes/HelmReleaseNotes.tsx b/frontend/packages/helm-plugin/src/components/details-page/notes/HelmReleaseNotes.tsx
index 53b6c01a4bd..946d31e4719 100644
--- a/frontend/packages/helm-plugin/src/components/details-page/notes/HelmReleaseNotes.tsx
+++ b/frontend/packages/helm-plugin/src/components/details-page/notes/HelmReleaseNotes.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { SyncMarkdownView } from '@console/internal/components/markdown-view';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { HelmRelease } from '../../../types/helm-types';
 import HelmReleaseNotesEmptyState from './HelmReleaseNotesEmptyState';
 
@@ -10,9 +11,9 @@ export interface HelmReleaseNotesProps {
 const HelmReleaseNotes: React.FC<HelmReleaseNotesProps> = ({ customData }) => {
   const helmReleaseNotes = customData?.info?.notes ?? '';
   return helmReleaseNotes ? (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <SyncMarkdownView content={helmReleaseNotes} />
-    </div>
+    </PaneBody>
   ) : (
     <HelmReleaseNotesEmptyState />
   );
diff --git a/frontend/packages/helm-plugin/src/components/details-page/overview/HelmReleaseOverview.tsx b/frontend/packages/helm-plugin/src/components/details-page/overview/HelmReleaseOverview.tsx
index 872f7b32af2..f8856acdef5 100644
--- a/frontend/packages/helm-plugin/src/components/details-page/overview/HelmReleaseOverview.tsx
+++ b/frontend/packages/helm-plugin/src/components/details-page/overview/HelmReleaseOverview.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { ResourceSummary } from '@console/internal/components/utils/details-page';
 import { SectionHeading } from '@console/internal/components/utils/headings';
 import { K8sResourceKind } from '@console/internal/module/k8s/types';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { HelmRelease } from '../../../types/helm-types';
 import HelmChartSummary from './HelmChartSummary';
 
@@ -14,7 +15,7 @@ export interface HelmReleaseOverviewProps {
 const HelmReleaseOverview: React.FC<HelmReleaseOverviewProps> = ({ obj, customData }) => {
   const { t } = useTranslation();
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <SectionHeading text={t('helm-plugin~Helm Release details')} />
       <div className="row">
         <div className="col-sm-6">
@@ -24,7 +25,7 @@ const HelmReleaseOverview: React.FC<HelmReleaseOverviewProps> = ({ obj, customDa
           <HelmChartSummary helmRelease={customData} obj={obj} />
         </div>
       </div>
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/packages/helm-plugin/src/components/list-page/HelmTabbedPage.tsx b/frontend/packages/helm-plugin/src/components/list-page/HelmTabbedPage.tsx
index 238d99fac25..36b0b5e1507 100644
--- a/frontend/packages/helm-plugin/src/components/list-page/HelmTabbedPage.tsx
+++ b/frontend/packages/helm-plugin/src/components/list-page/HelmTabbedPage.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom-v5-compat';
+import CatalogPageHelpText from '@console/dev-console/src/components/catalog/CatalogPageHelpText';
 import NamespacedPage, {
   NamespacedPageVariants,
 } from '@console/dev-console/src/components/NamespacedPage';
@@ -113,10 +114,12 @@ export const PageContents: React.FC = () => {
   ) : (
     <CreateProjectListPage title={t('helm-plugin~Helm')}>
       {(openProjectModal) => (
-        <Trans t={t} ns="helm-plugin">
-          Select a Project to view its details
-          <CreateAProjectButton openProjectModal={openProjectModal} />.
-        </Trans>
+        <CatalogPageHelpText>
+          <Trans t={t} ns="helm-plugin">
+            Select a Project to view its details
+            <CreateAProjectButton openProjectModal={openProjectModal} />.
+          </Trans>
+        </CatalogPageHelpText>
       )}
     </CreateProjectListPage>
   );
diff --git a/frontend/packages/integration-tests-cypress/cypress.config.js b/frontend/packages/integration-tests-cypress/cypress.config.js
index 073f349b502..7e13edbb2e3 100644
--- a/frontend/packages/integration-tests-cypress/cypress.config.js
+++ b/frontend/packages/integration-tests-cypress/cypress.config.js
@@ -35,5 +35,6 @@ module.exports = defineConfig({
     testIsolation: false,
     experimentalMemoryManagement: true,
     numTestsKeptInMemory: 5,
+    injectDocumentDomain: true,
   },
 });
diff --git a/frontend/packages/knative-plugin/integration-tests/cypress.config.js b/frontend/packages/knative-plugin/integration-tests/cypress.config.js
index 43afe469cb1..b9b10a847c6 100644
--- a/frontend/packages/knative-plugin/integration-tests/cypress.config.js
+++ b/frontend/packages/knative-plugin/integration-tests/cypress.config.js
@@ -47,5 +47,6 @@ module.exports = defineConfig({
     testIsolation: false,
     experimentalMemoryManagement: true,
     numTestsKeptInMemory: 5,
+    injectDocumentDomain: true,
   },
 });
diff --git a/frontend/packages/knative-plugin/src/components/functions/FunctionsPage.tsx b/frontend/packages/knative-plugin/src/components/functions/FunctionsPage.tsx
index 174face93d0..25c75cae455 100644
--- a/frontend/packages/knative-plugin/src/components/functions/FunctionsPage.tsx
+++ b/frontend/packages/knative-plugin/src/components/functions/FunctionsPage.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom-v5-compat';
+import CatalogPageHelpText from '@console/dev-console/src/components/catalog/CatalogPageHelpText';
 import NamespacedPage, {
   NamespacedPageVariants,
 } from '@console/dev-console/src/components/NamespacedPage';
@@ -13,6 +14,7 @@ import { withStartGuide } from '@console/internal/components/start-guide';
 import { PageHeading } from '@console/internal/components/utils';
 import { referenceForModel } from '@console/internal/module/k8s';
 import { DocumentTitle } from '@console/shared/src/components/document-title/DocumentTitle';
+import NavTitle from '@console/shared/src/components/layout/NavTitle';
 import { ServiceModel } from '../../models';
 import { ServiceTypeValue } from '../../types';
 import { CreateActionDropdown } from './CreateActionDropdown';
@@ -29,9 +31,9 @@ const FunctionList: React.FC<{ namespace: string }> = (props) => {
       <DocumentTitle>{t('knative-plugin~Functions')}</DocumentTitle>
       <div className="odc-functions-list-page__heading">
         <PageHeading title={t('knative-plugin~Functions')} />
-        <div className="co-m-nav-title">
+        <NavTitle>
           <CreateActionDropdown namespace={props.namespace} />
-        </div>
+        </NavTitle>
       </div>
       <GettingStartedSection />
       <ListPage
@@ -55,10 +57,12 @@ const FunctionsListPage: React.FC<React.ComponentProps<typeof ListPage>> = (prop
     ) : (
       <CreateProjectListPage title={t('knative-plugin~Functions')}>
         {(openProjectModal) => (
-          <Trans t={t} ns="knative-plugin">
-            Select a Project to view its details
-            <CreateAProjectButton openProjectModal={openProjectModal} />.
-          </Trans>
+          <CatalogPageHelpText>
+            <Trans t={t} ns="knative-plugin">
+              Select a Project to view its details
+              <CreateAProjectButton openProjectModal={openProjectModal} />.
+            </Trans>
+          </CatalogPageHelpText>
         )}
       </CreateProjectListPage>
     )
diff --git a/frontend/packages/knative-plugin/src/components/pub-sub/details/SubscriptionDetails.tsx b/frontend/packages/knative-plugin/src/components/pub-sub/details/SubscriptionDetails.tsx
index 3fc39207c18..adf6f136b89 100644
--- a/frontend/packages/knative-plugin/src/components/pub-sub/details/SubscriptionDetails.tsx
+++ b/frontend/packages/knative-plugin/src/components/pub-sub/details/SubscriptionDetails.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { Conditions } from '@console/internal/components/conditions';
 import { SectionHeading, ResourceSummary } from '@console/internal/components/utils';
 import { K8sResourceKind, referenceFor } from '@console/internal/module/k8s';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import DynamicResourceLink from './DynamicResourceLink';
 
 interface SubscriptionDetails {
@@ -14,7 +15,7 @@ const SubscriptionDetails: React.FC<SubscriptionDetails> = ({ obj: subscription
   const { t } = useTranslation();
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading text={t('knative-plugin~Subscription details')} />
         <div className="row">
           <div className="col-sm-6">
@@ -39,12 +40,12 @@ const SubscriptionDetails: React.FC<SubscriptionDetails> = ({ obj: subscription
             )}
           </div>
         </div>
-      </div>
+      </PaneBody>
       {_.isArray(subscription?.status?.conditions) && (
-        <div className="co-m-pane__body">
+        <PaneBody>
           <SectionHeading text={t('knative-plugin~Conditions')} />
           <Conditions conditions={subscription.status.conditions} />
-        </div>
+        </PaneBody>
       )}
     </>
   );
diff --git a/frontend/packages/knative-plugin/src/components/pub-sub/details/TriggerDetails.tsx b/frontend/packages/knative-plugin/src/components/pub-sub/details/TriggerDetails.tsx
index 19e77d34cb2..1cc3c9b45ac 100644
--- a/frontend/packages/knative-plugin/src/components/pub-sub/details/TriggerDetails.tsx
+++ b/frontend/packages/knative-plugin/src/components/pub-sub/details/TriggerDetails.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { Conditions } from '@console/internal/components/conditions';
 import { SectionHeading, ResourceSummary } from '@console/internal/components/utils';
 import { K8sResourceKind, referenceFor, referenceForModel } from '@console/internal/module/k8s';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { EventingBrokerModel } from '../../../models';
 import { getTriggerFilters } from '../../../topology/knative-topology-utils';
 import FilterTable from '../../overview/FilterTable';
@@ -20,7 +21,7 @@ const TriggerDetails: React.FC<TriggerDetailsProps> = ({ obj: trigger }) => {
   const { filters: filterData } = getTriggerFilters(trigger);
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading text={t('knative-plugin~Trigger details')} />
         <div className="row">
           <div className="col-sm-6">
@@ -55,12 +56,12 @@ const TriggerDetails: React.FC<TriggerDetailsProps> = ({ obj: trigger }) => {
             )}
           </div>
         </div>
-      </div>
+      </PaneBody>
       {_.isArray(trigger?.status?.conditions) && (
-        <div className="co-m-pane__body">
+        <PaneBody>
           <SectionHeading text={t('knative-plugin~Conditions')} />
           <Conditions conditions={trigger.status.conditions} />
-        </div>
+        </PaneBody>
       )}
     </>
   );
diff --git a/frontend/packages/knative-plugin/src/components/routes/RouteDetailsPage.tsx b/frontend/packages/knative-plugin/src/components/routes/RouteDetailsPage.tsx
index 9531313d05f..1654963da28 100644
--- a/frontend/packages/knative-plugin/src/components/routes/RouteDetailsPage.tsx
+++ b/frontend/packages/knative-plugin/src/components/routes/RouteDetailsPage.tsx
@@ -21,6 +21,7 @@ import {
   ActionServiceProvider,
   useTabbedTableBreadcrumbsFor,
 } from '@console/shared';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { PRIVATE_KNATIVE_SERVING_LABEL } from '../../const';
 import { serverlessTab } from '../../utils/serverless-tab-utils';
 
@@ -30,7 +31,7 @@ const RouteDetails: React.FC<RoutesDetailsProps> = ({ obj: route }) => {
     route?.metadata?.labels?.[PRIVATE_KNATIVE_SERVING_LABEL] === 'cluster-local';
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading text={t('knative-plugin~Route details')} />
         <div className="row">
           <div className="col-sm-6">
@@ -59,11 +60,11 @@ const RouteDetails: React.FC<RoutesDetailsProps> = ({ obj: route }) => {
             </dl>
           </div>
         </div>
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={t('knative-plugin~Conditions')} />
         <Conditions conditions={route?.status?.conditions} />
-      </div>
+      </PaneBody>
     </>
   );
 };
diff --git a/frontend/packages/knative-plugin/src/components/services/ServiceDetailsPage.tsx b/frontend/packages/knative-plugin/src/components/services/ServiceDetailsPage.tsx
index ea533adec6a..ffeb72b729c 100644
--- a/frontend/packages/knative-plugin/src/components/services/ServiceDetailsPage.tsx
+++ b/frontend/packages/knative-plugin/src/components/services/ServiceDetailsPage.tsx
@@ -22,6 +22,7 @@ import {
   ActionServiceProvider,
   useTabbedTableBreadcrumbsFor,
 } from '@console/shared';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { RevisionModel, RouteModel } from '../../models';
 import { isServerlessFunction } from '../../topology/knative-topology-utils';
 import { RevisionKind, ServiceKind, ServiceTypeValue } from '../../types';
@@ -46,7 +47,7 @@ const ServiceDetails: React.FC<{ obj: ServiceKind }> = ({ obj }) => {
 
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading text={t('knative-plugin~Details')} />
         <div className="row">
           <div className="col-md-6">
@@ -80,16 +81,16 @@ const ServiceDetails: React.FC<{ obj: ServiceKind }> = ({ obj }) => {
             </dl>
           </div>
         </div>
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={t('knative-plugin~Containers')} />
         <ContainerTable containers={obj.spec.template.spec.containers} />
-      </div>
+      </PaneBody>
       {_.isArray(obj?.status?.conditions) && (
-        <div className="co-m-pane__body">
+        <PaneBody>
           <SectionHeading text={t('knative-plugin~Conditions')} />
           <Conditions conditions={obj.status.conditions} />
-        </div>
+        </PaneBody>
       )}
     </>
   );
diff --git a/frontend/packages/metal3-plugin/src/components/baremetal-hosts/BareMetalHostDetails.tsx b/frontend/packages/metal3-plugin/src/components/baremetal-hosts/BareMetalHostDetails.tsx
index b2bcd8b6f1e..778ad02c061 100644
--- a/frontend/packages/metal3-plugin/src/components/baremetal-hosts/BareMetalHostDetails.tsx
+++ b/frontend/packages/metal3-plugin/src/components/baremetal-hosts/BareMetalHostDetails.tsx
@@ -27,6 +27,7 @@ import {
   SecondaryStatus,
   DASH,
 } from '@console/shared';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { HOST_REGISTERING_STATES } from '../../constants/bare-metal-host';
 import {
   getHostNICs,
@@ -90,7 +91,7 @@ const BareMetalHostDetails: React.FC<BareMetalHostDetailsProps> = ({
   const status = getHostStatus({ host, machine, node, nodeMaintenance });
 
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <SectionHeading text={t('metal3-plugin~Bare Metal Host Details')} />
       <div className="row">
         <div className="col-xs-12 col-sm-6" id="name-description-column">
@@ -229,7 +230,7 @@ const BareMetalHostDetails: React.FC<BareMetalHostDetailsProps> = ({
           </dl>
         </div>
       </div>
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/packages/metal3-plugin/src/components/baremetal-hosts/BareMetalHostDisks.tsx b/frontend/packages/metal3-plugin/src/components/baremetal-hosts/BareMetalHostDisks.tsx
index 7eab8ca5633..eab19a39862 100644
--- a/frontend/packages/metal3-plugin/src/components/baremetal-hosts/BareMetalHostDisks.tsx
+++ b/frontend/packages/metal3-plugin/src/components/baremetal-hosts/BareMetalHostDisks.tsx
@@ -4,6 +4,7 @@ import { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
 import { Table, TableData, RowFunctionArgs } from '@console/internal/components/factory';
 import { humanizeDecimalBytes } from '@console/internal/components/utils';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { getHostStorage } from '../../selectors';
 import { BareMetalHostDisk, BareMetalHostKind } from '../../types';
 
@@ -52,7 +53,7 @@ const BareMetalHostDisks: React.FC<BareMetalHostDisksProps> = ({
   const disks = getHostStorage(host);
   return (
     <div className="co-m-list">
-      <div className="co-m-pane__body">
+      <PaneBody>
         <Table
           data={disks}
           aria-label="Bare Metal Host Disks"
@@ -67,7 +68,7 @@ const BareMetalHostDisks: React.FC<BareMetalHostDisksProps> = ({
           }
           getRowProps={getRowProps}
         />
-      </div>
+      </PaneBody>
     </div>
   );
 };
diff --git a/frontend/packages/metal3-plugin/src/components/baremetal-hosts/BareMetalHostNICs.tsx b/frontend/packages/metal3-plugin/src/components/baremetal-hosts/BareMetalHostNICs.tsx
index e9b3bb6655c..cd359b9c5dc 100644
--- a/frontend/packages/metal3-plugin/src/components/baremetal-hosts/BareMetalHostNICs.tsx
+++ b/frontend/packages/metal3-plugin/src/components/baremetal-hosts/BareMetalHostNICs.tsx
@@ -5,6 +5,7 @@ import { sortable } from '@patternfly/react-table';
 import { TFunction } from 'i18next';
 import { useTranslation } from 'react-i18next';
 import { Table, TableData, RowFunctionArgs } from '@console/internal/components/factory';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { getHostNICs } from '../../selectors';
 import { BareMetalHostNIC, BareMetalHostKind } from '../../types';
 
@@ -48,7 +49,7 @@ const BareMetalHostNICs: React.FC<BareMetalHostNICsProps> = ({ obj: host, loadEr
   const nics = getHostNICs(host);
   return (
     <div className="co-m-list">
-      <div className="co-m-pane__body">
+      <PaneBody>
         <Table
           data={nics}
           aria-label={t('metal3-plugin~Bare Metal Host NICs')}
@@ -63,7 +64,7 @@ const BareMetalHostNICs: React.FC<BareMetalHostNICsProps> = ({ obj: host, loadEr
           }
           getRowProps={getRowProps}
         />
-      </div>
+      </PaneBody>
     </div>
   );
 };
diff --git a/frontend/packages/metal3-plugin/src/components/baremetal-hosts/add-baremetal-host/AddBareMetalHostPage.tsx b/frontend/packages/metal3-plugin/src/components/baremetal-hosts/add-baremetal-host/AddBareMetalHostPage.tsx
index 35e4880da58..ab7470db538 100644
--- a/frontend/packages/metal3-plugin/src/components/baremetal-hosts/add-baremetal-host/AddBareMetalHostPage.tsx
+++ b/frontend/packages/metal3-plugin/src/components/baremetal-hosts/add-baremetal-host/AddBareMetalHostPage.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { useParams, useLocation } from 'react-router-dom-v5-compat';
 import { DocumentTitle } from '@console/shared/src/components/document-title/DocumentTitle';
 import PrimaryHeading from '@console/shared/src/components/heading/PrimaryHeading';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import AddBareMetalHost from './AddBareMetalHost';
 
 const AddBareMetalHostPage: React.FunctionComponent = () => {
@@ -18,7 +19,7 @@ const AddBareMetalHostPage: React.FunctionComponent = () => {
   return (
     <>
       <DocumentTitle>{title}</DocumentTitle>
-      <div className="co-m-pane__body co-m-pane__form">
+      <PaneBody className="co-m-pane__form">
         {/* TODO(jtomasek): Turn this to PageHeading alternative for create forms (e.g.
         CreateResourceFormPageHeading) */}
         <PrimaryHeading alignItemsBaseline>
@@ -30,7 +31,7 @@ const AddBareMetalHostPage: React.FunctionComponent = () => {
           </p>
         )}
         <AddBareMetalHost namespace={namespace} name={name} enablePowerMgmt={enablePowerMgmt} />
-      </div>
+      </PaneBody>
     </>
   );
 };
diff --git a/frontend/packages/operator-lifecycle-manager/integration-tests-cypress/cypress.config.js b/frontend/packages/operator-lifecycle-manager/integration-tests-cypress/cypress.config.js
index 8f800a7a750..7e2054a3663 100644
--- a/frontend/packages/operator-lifecycle-manager/integration-tests-cypress/cypress.config.js
+++ b/frontend/packages/operator-lifecycle-manager/integration-tests-cypress/cypress.config.js
@@ -35,5 +35,6 @@ module.exports = defineConfig({
     testIsolation: false,
     experimentalMemoryManagement: true,
     numTestsKeptInMemory: 5,
+    injectDocumentDomain: true,
   },
 });
diff --git a/frontend/packages/operator-lifecycle-manager/src/components/catalog-source.tsx b/frontend/packages/operator-lifecycle-manager/src/components/catalog-source.tsx
index 5d134801d1b..ef322192bc8 100644
--- a/frontend/packages/operator-lifecycle-manager/src/components/catalog-source.tsx
+++ b/frontend/packages/operator-lifecycle-manager/src/components/catalog-source.tsx
@@ -35,6 +35,7 @@ import i18n from '@console/internal/i18n';
 import { ConfigMapModel } from '@console/internal/models';
 import { referenceForModel, K8sKind, k8sPatch } from '@console/internal/module/k8s';
 import { withFallback } from '@console/shared/src/components/error';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { DEFAULT_SOURCE_NAMESPACE } from '../const';
 import {
   SubscriptionModel,
@@ -144,7 +145,7 @@ export const CatalogSourceDetails: React.FC<CatalogSourceDetailsProps> = ({
       : catalogSource.metadata.namespace;
 
   return !_.isEmpty(catalogSource) ? (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <SectionHeading
         text={t('olm~CatalogSource details', {
           resource: CatalogSourceModel.label,
@@ -155,7 +156,7 @@ export const CatalogSourceDetails: React.FC<CatalogSourceDetailsProps> = ({
           <ResourceSummary resource={catalogSource} />
         </div>
         <div className="col-sm-6 col-xs-12">
-          <div className="co-m-pane__body">
+          <PaneBody>
             <DetailsItem
               editAsGroup
               label={t('public~Status')}
@@ -200,10 +201,10 @@ export const CatalogSourceDetails: React.FC<CatalogSourceDetailsProps> = ({
             >
               {operatorCount}
             </DetailsItem>
-          </div>
+          </PaneBody>
         </div>
       </div>
-    </div>
+    </PaneBody>
   ) : (
     <div />
   );
diff --git a/frontend/packages/operator-lifecycle-manager/src/components/clusterserviceversion.spec.tsx b/frontend/packages/operator-lifecycle-manager/src/components/clusterserviceversion.spec.tsx
index a7784a22404..ac818c8a92d 100644
--- a/frontend/packages/operator-lifecycle-manager/src/components/clusterserviceversion.spec.tsx
+++ b/frontend/packages/operator-lifecycle-manager/src/components/clusterserviceversion.spec.tsx
@@ -22,6 +22,7 @@ import operatorLogo from '@console/internal/imgs/operator.svg';
 import { referenceForModel } from '@console/internal/module/k8s';
 import store from '@console/internal/redux';
 import { ErrorBoundary } from '@console/shared/src/components/error';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { useActiveNamespace } from '@console/shared/src/hooks/redux-selectors';
 import {
   testClusterServiceVersion,
@@ -292,7 +293,7 @@ describe(ClusterServiceVersionDetails.displayName, () => {
   });
 
   it('renders description section for ClusterServiceVersion', () => {
-    expect(wrapper.find('.co-m-pane__body').at(0).find(SectionHeading).at(1).props().text).toEqual(
+    expect(wrapper.find(PaneBody).at(0).find(SectionHeading).at(1).props().text).toEqual(
       'Description',
     );
   });
@@ -364,15 +365,13 @@ describe(ClusterServiceVersionDetails.displayName, () => {
   });
 
   it('renders info section for ClusterServiceVersion', () => {
-    expect(wrapper.find('.co-m-pane__body').at(1).find(SectionHeading).props().text).toEqual(
+    expect(wrapper.find(PaneBody).at(1).find(SectionHeading).props().text).toEqual(
       'ClusterServiceVersion details',
     );
   });
 
   it('renders conditions section for ClusterServiceVersion', () => {
-    expect(wrapper.find('.co-m-pane__body').at(2).find(SectionHeading).props().text).toEqual(
-      'Conditions',
-    );
+    expect(wrapper.find(PaneBody).at(2).find(SectionHeading).props().text).toEqual('Conditions');
   });
 
   it('does not render service accounts section if empty', () => {
diff --git a/frontend/packages/operator-lifecycle-manager/src/components/clusterserviceversion.tsx b/frontend/packages/operator-lifecycle-manager/src/components/clusterserviceversion.tsx
index fc9da867118..7f67ed501a6 100644
--- a/frontend/packages/operator-lifecycle-manager/src/components/clusterserviceversion.tsx
+++ b/frontend/packages/operator-lifecycle-manager/src/components/clusterserviceversion.tsx
@@ -73,6 +73,7 @@ import {
 import { ALL_NAMESPACES_KEY, Status, getNamespace } from '@console/shared';
 import { DocumentTitle } from '@console/shared/src/components/document-title/DocumentTitle';
 import { withFallback } from '@console/shared/src/components/error';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { consolePluginModal } from '@console/shared/src/components/modals';
 import { RedExclamationCircleIcon } from '@console/shared/src/components/status/icons';
 import { CONSOLE_OPERATOR_CONFIG_NAME } from '@console/shared/src/constants';
@@ -1009,198 +1010,191 @@ export const ClusterServiceVersionDetails: React.FC<ClusterServiceVersionDetails
     <>
       <ScrollToTopOnMount />
 
-      <div className="co-m-pane__body">
-        <div className="co-m-pane__body-group">
-          <div className="row">
-            <div className="col-sm-9">
-              {status && status.phase === ClusterServiceVersionPhase.CSVPhaseFailed && (
-                <Alert
-                  isInline
-                  className="co-alert"
-                  variant="danger"
-                  title={t('olm~Operator failed')}
-                >
-                  {status.reason === CSVConditionReason.CSVReasonCopied ? (
-                    <>
-                      <Trans t={t} ns="olm">
-                        This Operator was copied from another namespace. For the reason it failed,
-                        see{' '}
-                        <ResourceLink
-                          name={metadata.name}
-                          kind={referenceForModel(ClusterServiceVersionModel)}
-                          namespace={operatorNamespaceFor(props.obj)}
-                          hideIcon
-                          inline
-                        />
-                      </Trans>
-                    </>
-                  ) : (
-                    status.message
-                  )}
-                </Alert>
-              )}
-              {initializationResource && (
-                <InitializationResourceAlert
-                  initializationResource={initializationResource}
-                  csv={props.obj}
-                />
-              )}
-              {(deprecatedPackage.deprecation ||
-                deprecatedChannel.deprecation ||
-                deprecatedVersion.deprecation) && (
-                <DeprecatedOperatorWarningAlert
-                  deprecatedPackage={deprecatedPackage}
-                  deprecatedChannel={deprecatedChannel}
-                  deprecatedVersion={deprecatedVersion}
-                  dismissible
-                />
-              )}
-              <SectionHeading text={t('olm~Provided APIs')} />
-              <CRDCardRow csv={props.obj} providedAPIs={providedAPIs} />
-              <SectionHeading text={t('olm~Description')} />
-              <MarkdownView content={spec.description || t('olm~Not available')} />
-            </div>
-            <div className="col-sm-3">
-              <dl className="co-clusterserviceversion-details__field">
-                <dt>{t('olm~Provider')}</dt>
-                <dd>
-                  {spec.provider && spec.provider.name
-                    ? spec.provider.name
-                    : t('olm~Not available')}
-                </dd>
-                {supportWorkflowUrl && (
+      <PaneBody>
+        <div className="row">
+          <div className="col-sm-9">
+            {status && status.phase === ClusterServiceVersionPhase.CSVPhaseFailed && (
+              <Alert
+                isInline
+                className="co-alert"
+                variant="danger"
+                title={t('olm~Operator failed')}
+              >
+                {status.reason === CSVConditionReason.CSVReasonCopied ? (
                   <>
-                    <dt>{t('olm~Support')}</dt>
-                    <dd>
-                      <ExternalLink href={supportWorkflowUrl} text={t('olm~Get support')} />
-                    </dd>
-                  </>
-                )}
-                <dt>{t('olm~Created at')}</dt>
-                <dd>
-                  <Timestamp timestamp={metadata.creationTimestamp} />
-                </dd>
-              </dl>
-              {csvPlugins.length > 0 && subscription && (
-                <ConsolePlugins
-                  csvPlugins={csvPlugins}
-                  trusted={isCatalogSourceTrusted(subscription?.spec?.source)}
-                />
-              )}
-              <dl className="co-clusterserviceversion-details__field">
-                <dt>{t('olm~Links')}</dt>
-                {spec.links && spec.links.length > 0 ? (
-                  spec.links.map((link) => (
-                    <dd key={link.url} style={{ display: 'flex', flexDirection: 'column' }}>
-                      {link.name}{' '}
-                      <ExternalLink
-                        href={link.url}
-                        text={link.url || '-'}
-                        additionalClassName="co-break-all"
+                    <Trans t={t} ns="olm">
+                      This Operator was copied from another namespace. For the reason it failed, see{' '}
+                      <ResourceLink
+                        name={metadata.name}
+                        kind={referenceForModel(ClusterServiceVersionModel)}
+                        namespace={operatorNamespaceFor(props.obj)}
+                        hideIcon
+                        inline
                       />
-                    </dd>
-                  ))
-                ) : (
-                  <dd>{t('olm~Not available')}</dd>
-                )}
-              </dl>
-              <dl className="co-clusterserviceversion-details__field">
-                <dt>{t('olm~Maintainers')}</dt>
-                {spec.maintainers && spec.maintainers.length > 0 ? (
-                  spec.maintainers.map((maintainer) => (
-                    <dd key={maintainer.email} style={{ display: 'flex', flexDirection: 'column' }}>
-                      {maintainer.name}{' '}
-                      <a href={`mailto:${maintainer.email}`} className="co-break-all">
-                        {maintainer.email || '-'}
-                      </a>
-                    </dd>
-                  ))
+                    </Trans>
+                  </>
                 ) : (
-                  <dd>{t('olm~Not available')}</dd>
+                  status.message
                 )}
-              </dl>
-            </div>
+              </Alert>
+            )}
+            {initializationResource && (
+              <InitializationResourceAlert
+                initializationResource={initializationResource}
+                csv={props.obj}
+              />
+            )}
+            {(deprecatedPackage.deprecation ||
+              deprecatedChannel.deprecation ||
+              deprecatedVersion.deprecation) && (
+              <DeprecatedOperatorWarningAlert
+                deprecatedPackage={deprecatedPackage}
+                deprecatedChannel={deprecatedChannel}
+                deprecatedVersion={deprecatedVersion}
+                dismissible
+              />
+            )}
+            <SectionHeading text={t('olm~Provided APIs')} />
+            <CRDCardRow csv={props.obj} providedAPIs={providedAPIs} />
+            <SectionHeading text={t('olm~Description')} />
+            <MarkdownView content={spec.description || t('olm~Not available')} />
           </div>
-        </div>
-      </div>
-      <div className="co-m-pane__body">
-        <SectionHeading text={t('olm~ClusterServiceVersion details')} />
-        <div className="co-m-pane__body-group">
-          <div className="row">
-            <div className="col-sm-6">
-              <ResourceSummary resource={props.obj}>
-                <dt>
-                  <Popover
-                    headerContent={<div>{t('olm~Managed Namespaces')}</div>}
-                    bodyContent={
-                      <div>{t('olm~Operands in this Namespace are managed by the Operator.')}</div>
-                    }
-                    maxWidth="30rem"
-                  >
-                    <Button
-                      icon={t('olm~Managed Namespaces')}
-                      variant="plain"
-                      className="details-item__popover-button"
-                    />
-                  </Popover>
-                </dt>
-                <dd>
-                  <ManagedNamespaces obj={props.obj} />
-                </dd>
-              </ResourceSummary>
-            </div>
-            <div className="col-sm-6">
-              <dt>{t('olm~Status')}</dt>
+          <div className="col-sm-3">
+            <dl className="co-clusterserviceversion-details__field">
+              <dt>{t('olm~Provider')}</dt>
               <dd>
-                <Status status={status ? status.phase : t('olm~Unknown')} />
+                {spec.provider && spec.provider.name ? spec.provider.name : t('olm~Not available')}
               </dd>
-              <dt>{t('olm~Status reason')}</dt>
-              <dd>{status ? status.message : t('olm~Unknown')}</dd>
-              {!_.isEmpty(spec.install.spec?.deployments) && (
-                <>
-                  <dt>{t('olm~Operator Deployments')}</dt>
-                  {spec.install.spec.deployments.map(({ name }) => (
-                    <dd key={name}>
-                      <ResourceLink
-                        name={name}
-                        kind="Deployment"
-                        namespace={operatorNamespaceFor(props.obj)}
-                      />
-                    </dd>
-                  ))}
-                </>
-              )}
-              {!_.isEmpty(permissions) && (
+              {supportWorkflowUrl && (
                 <>
-                  <dt>{t('olm~Operator ServiceAccounts')}</dt>
-                  {permissions.map(({ serviceAccountName }) => (
-                    <dd key={serviceAccountName} data-service-account-name={serviceAccountName}>
-                      <ResourceLink
-                        name={serviceAccountName}
-                        kind="ServiceAccount"
-                        namespace={operatorNamespaceFor(props.obj)}
-                      />
-                    </dd>
-                  ))}
+                  <dt>{t('olm~Support')}</dt>
+                  <dd>
+                    <ExternalLink href={supportWorkflowUrl} text={t('olm~Get support')} />
+                  </dd>
                 </>
               )}
-              <dt>{t('olm~OperatorGroup')}</dt>
+              <dt>{t('olm~Created at')}</dt>
               <dd>
-                {operatorGroupFor(props.obj) ? (
-                  <ResourceLink
-                    name={operatorGroupFor(props.obj)}
-                    namespace={operatorNamespaceFor(props.obj)}
-                    kind={referenceForModel(OperatorGroupModel)}
+                <Timestamp timestamp={metadata.creationTimestamp} />
+              </dd>
+            </dl>
+            {csvPlugins.length > 0 && subscription && (
+              <ConsolePlugins
+                csvPlugins={csvPlugins}
+                trusted={isCatalogSourceTrusted(subscription?.spec?.source)}
+              />
+            )}
+            <dl className="co-clusterserviceversion-details__field">
+              <dt>{t('olm~Links')}</dt>
+              {spec.links && spec.links.length > 0 ? (
+                spec.links.map((link) => (
+                  <dd key={link.url} style={{ display: 'flex', flexDirection: 'column' }}>
+                    {link.name}{' '}
+                    <ExternalLink
+                      href={link.url}
+                      text={link.url || '-'}
+                      additionalClassName="co-break-all"
+                    />
+                  </dd>
+                ))
+              ) : (
+                <dd>{t('olm~Not available')}</dd>
+              )}
+            </dl>
+            <dl className="co-clusterserviceversion-details__field">
+              <dt>{t('olm~Maintainers')}</dt>
+              {spec.maintainers && spec.maintainers.length > 0 ? (
+                spec.maintainers.map((maintainer) => (
+                  <dd key={maintainer.email} style={{ display: 'flex', flexDirection: 'column' }}>
+                    {maintainer.name}{' '}
+                    <a href={`mailto:${maintainer.email}`} className="co-break-all">
+                      {maintainer.email || '-'}
+                    </a>
+                  </dd>
+                ))
+              ) : (
+                <dd>{t('olm~Not available')}</dd>
+              )}
+            </dl>
+          </div>
+        </div>
+      </PaneBody>
+      <PaneBody>
+        <SectionHeading text={t('olm~ClusterServiceVersion details')} />
+        <div className="row">
+          <div className="col-sm-6">
+            <ResourceSummary resource={props.obj}>
+              <dt>
+                <Popover
+                  headerContent={<div>{t('olm~Managed Namespaces')}</div>}
+                  bodyContent={
+                    <div>{t('olm~Operands in this Namespace are managed by the Operator.')}</div>
+                  }
+                  maxWidth="30rem"
+                >
+                  <Button
+                    icon={t('olm~Managed Namespaces')}
+                    variant="plain"
+                    className="details-item__popover-button"
                   />
-                ) : (
-                  '-'
-                )}
+                </Popover>
+              </dt>
+              <dd>
+                <ManagedNamespaces obj={props.obj} />
               </dd>
-            </div>
+            </ResourceSummary>
+          </div>
+          <div className="col-sm-6">
+            <dt>{t('olm~Status')}</dt>
+            <dd>
+              <Status status={status ? status.phase : t('olm~Unknown')} />
+            </dd>
+            <dt>{t('olm~Status reason')}</dt>
+            <dd>{status ? status.message : t('olm~Unknown')}</dd>
+            {!_.isEmpty(spec.install.spec?.deployments) && (
+              <>
+                <dt>{t('olm~Operator Deployments')}</dt>
+                {spec.install.spec.deployments.map(({ name }) => (
+                  <dd key={name}>
+                    <ResourceLink
+                      name={name}
+                      kind="Deployment"
+                      namespace={operatorNamespaceFor(props.obj)}
+                    />
+                  </dd>
+                ))}
+              </>
+            )}
+            {!_.isEmpty(permissions) && (
+              <>
+                <dt>{t('olm~Operator ServiceAccounts')}</dt>
+                {permissions.map(({ serviceAccountName }) => (
+                  <dd key={serviceAccountName} data-service-account-name={serviceAccountName}>
+                    <ResourceLink
+                      name={serviceAccountName}
+                      kind="ServiceAccount"
+                      namespace={operatorNamespaceFor(props.obj)}
+                    />
+                  </dd>
+                ))}
+              </>
+            )}
+            <dt>{t('olm~OperatorGroup')}</dt>
+            <dd>
+              {operatorGroupFor(props.obj) ? (
+                <ResourceLink
+                  name={operatorGroupFor(props.obj)}
+                  namespace={operatorNamespaceFor(props.obj)}
+                  kind={referenceForModel(OperatorGroupModel)}
+                />
+              ) : (
+                '-'
+              )}
+            </dd>
           </div>
         </div>
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={t('olm~Conditions')} />
         <Conditions
           conditions={(status?.conditions ?? []).map((c) => ({
@@ -1210,7 +1204,7 @@ export const ClusterServiceVersionDetails: React.FC<ClusterServiceVersionDetails
           }))}
           type={ConditionTypes.ClusterServiceVersion}
         />
-      </div>
+      </PaneBody>
     </>
   );
 };
diff --git a/frontend/packages/operator-lifecycle-manager/src/components/create-catalog-source.tsx b/frontend/packages/operator-lifecycle-manager/src/components/create-catalog-source.tsx
index 880840d971d..9057c251302 100644
--- a/frontend/packages/operator-lifecycle-manager/src/components/create-catalog-source.tsx
+++ b/frontend/packages/operator-lifecycle-manager/src/components/create-catalog-source.tsx
@@ -20,6 +20,7 @@ import {
 } from '@console/internal/components/utils';
 import { k8sCreate } from '@console/internal/module/k8s';
 import { DocumentTitle } from '@console/shared/src/components/document-title/DocumentTitle';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { CatalogSourceModel } from '../models';
 
 enum AvailabilityValue {
@@ -94,7 +95,7 @@ export const CreateCatalogSource: React.FC = withHandlePromise(
             'olm~Create a CatalogSource in order to make operators available in OperatorHub.',
           )}
         />
-        <div className="co-m-pane__body">
+        <PaneBody>
           <Form onSubmit={onSave}>
             <FormGroup fieldId="catalog-source-name" isRequired label={t('olm~CatalogSource name')}>
               <TextInput
@@ -181,7 +182,7 @@ export const CreateCatalogSource: React.FC = withHandlePromise(
               </ActionGroup>
             </ButtonBar>
           </Form>
-        </div>
+        </PaneBody>
       </div>
     );
   },
diff --git a/frontend/packages/operator-lifecycle-manager/src/components/descriptors/status/conditions.tsx b/frontend/packages/operator-lifecycle-manager/src/components/descriptors/status/conditions.tsx
index 151dabfc89d..d8f71caba9d 100644
--- a/frontend/packages/operator-lifecycle-manager/src/components/descriptors/status/conditions.tsx
+++ b/frontend/packages/operator-lifecycle-manager/src/components/descriptors/status/conditions.tsx
@@ -4,6 +4,7 @@ import * as _ from 'lodash';
 import { Conditions } from '@console/internal/components/conditions';
 import { SectionHeading } from '@console/internal/components/utils';
 import { K8sResourceKind } from '@console/internal/module/k8s';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { DescriptorType, StatusDescriptor } from '../types';
 import { useCalculatedDescriptorProperties } from '../utils';
 
@@ -37,10 +38,10 @@ export const DescriptorConditions: React.FC<ConditionsDescriptorProps> = ({
   }
 
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <SectionHeading text={displayName} />
       <Conditions conditions={value} />
-    </div>
+    </PaneBody>
   );
 };
 DescriptorConditions.displayName = 'DescriptorConditions';
diff --git a/frontend/packages/operator-lifecycle-manager/src/components/install-plan.tsx b/frontend/packages/operator-lifecycle-manager/src/components/install-plan.tsx
index b5c2bb619a9..9251b0138cb 100644
--- a/frontend/packages/operator-lifecycle-manager/src/components/install-plan.tsx
+++ b/frontend/packages/operator-lifecycle-manager/src/components/install-plan.tsx
@@ -41,6 +41,7 @@ import {
 } from '@console/internal/module/k8s';
 import { RootState } from '@console/internal/redux';
 import { FLAGS, GreenCheckCircleIcon, Status, useFlag } from '@console/shared';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import {
   SubscriptionModel,
   ClusterServiceVersionModel,
@@ -310,7 +311,7 @@ export const InstallPlanDetails: React.FC<InstallPlanDetailsProps> = ({ obj }) =
   return (
     <>
       {needsApproval && canPatchInstallPlans && (
-        <div className="co-m-pane__body">
+        <PaneBody>
           <InstallPlanHint
             title={t('olm~Review manual InstallPlan')}
             body={t(
@@ -326,64 +327,62 @@ export const InstallPlanDetails: React.FC<InstallPlanDetailsProps> = ({ obj }) =
               </Link>
             }
           />
-        </div>
+        </PaneBody>
       )}
       {needsApproval && !canPatchInstallPlans && (
-        <div className="co-m-pane__body">
+        <PaneBody>
           <NeedInstallPlanPermissions installPlan={obj} />
-        </div>
+        </PaneBody>
       )}
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading text={t('olm~InstallPlan details')} />
-        <div className="co-m-pane__body-group">
-          <div className="row">
-            <div className="col-sm-6">
-              <ResourceSummary resource={obj} showAnnotations={false} />
-            </div>
-            <div className="col-sm-6">
-              <dl className="co-m-pane__details">
-                <dt>{t('olm~Status')}</dt>
-                <dd>
-                  <Status status={obj.status?.phase ?? t('olm~Unknown')} />
-                </dd>
-                <dt>{t('olm~Components')}</dt>
-                {(obj.spec.clusterServiceVersionNames || []).map((csvName) => (
-                  <dd key={csvName}>
-                    {obj.status.phase === 'Complete' ? (
-                      <ResourceLink
-                        kind={referenceForModel(ClusterServiceVersionModel)}
-                        name={csvName}
-                        namespace={obj.metadata.namespace}
-                        title={csvName}
-                      />
-                    ) : (
-                      <>
-                        <ResourceIcon kind={referenceForModel(ClusterServiceVersionModel)} />
-                        {csvName}
-                      </>
-                    )}
-                  </dd>
-                ))}
-                <dt>{t('olm~CatalogSources')}</dt>
-                {getCatalogSources(obj).map(({ sourceName, sourceNamespace }) => (
-                  <dd key={`${sourceNamespace}-${sourceName}`}>
+        <div className="row">
+          <div className="col-sm-6">
+            <ResourceSummary resource={obj} showAnnotations={false} />
+          </div>
+          <div className="col-sm-6">
+            <dl className="co-m-pane__details">
+              <dt>{t('olm~Status')}</dt>
+              <dd>
+                <Status status={obj.status?.phase ?? t('olm~Unknown')} />
+              </dd>
+              <dt>{t('olm~Components')}</dt>
+              {(obj.spec.clusterServiceVersionNames || []).map((csvName) => (
+                <dd key={csvName}>
+                  {obj.status.phase === 'Complete' ? (
                     <ResourceLink
-                      kind={referenceForModel(CatalogSourceModel)}
-                      name={sourceName}
-                      namespace={sourceNamespace}
-                      title={sourceName}
+                      kind={referenceForModel(ClusterServiceVersionModel)}
+                      name={csvName}
+                      namespace={obj.metadata.namespace}
+                      title={csvName}
                     />
-                  </dd>
-                ))}
-              </dl>
-            </div>
+                  ) : (
+                    <>
+                      <ResourceIcon kind={referenceForModel(ClusterServiceVersionModel)} />
+                      {csvName}
+                    </>
+                  )}
+                </dd>
+              ))}
+              <dt>{t('olm~CatalogSources')}</dt>
+              {getCatalogSources(obj).map(({ sourceName, sourceNamespace }) => (
+                <dd key={`${sourceNamespace}-${sourceName}`}>
+                  <ResourceLink
+                    kind={referenceForModel(CatalogSourceModel)}
+                    name={sourceName}
+                    namespace={sourceNamespace}
+                    title={sourceName}
+                  />
+                </dd>
+              ))}
+            </dl>
           </div>
         </div>
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={t('olm~Conditions')} />
         <Conditions conditions={obj.status?.conditions} />
-      </div>
+      </PaneBody>
     </>
   );
 };
@@ -431,12 +430,12 @@ export const InstallPlanPreview: React.FC<InstallPlanPreviewProps> = ({
   return plan.length > 0 ? (
     <>
       {needsApproval && !hideApprovalBlock && !canPatchInstallPlans && (
-        <div className="co-m-pane__body">
+        <PaneBody>
           <NeedInstallPlanPermissions installPlan={obj} />
-        </div>
+        </PaneBody>
       )}
       {needsApproval && !hideApprovalBlock && canPatchInstallPlans && (
-        <div className="co-m-pane__body">
+        <PaneBody>
           <InstallPlanHint
             title={t('olm~Review manual InstallPlan')}
             body={<InstallPlanReview installPlan={obj} />}
@@ -463,7 +462,7 @@ export const InstallPlanPreview: React.FC<InstallPlanPreviewProps> = ({
               </div>
             }
           />
-        </div>
+        </PaneBody>
       )}
       {stepsByCSV.map((steps) => (
         <div key={steps[0].resolving} className="co-m-pane__body">
@@ -519,11 +518,11 @@ export const InstallPlanPreview: React.FC<InstallPlanPreviewProps> = ({
       ))}
     </>
   ) : (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <ConsoleEmptyState title={t('olm~No components resolved')}>
         {t('olm~This InstallPlan has not been fully resolved yet.')}
       </ConsoleEmptyState>
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/packages/operator-lifecycle-manager/src/components/operand/DEPRECATED_operand-form.tsx b/frontend/packages/operator-lifecycle-manager/src/components/operand/DEPRECATED_operand-form.tsx
index ffa79bb0095..234182700b9 100644
--- a/frontend/packages/operator-lifecycle-manager/src/components/operand/DEPRECATED_operand-form.tsx
+++ b/frontend/packages/operator-lifecycle-manager/src/components/operand/DEPRECATED_operand-form.tsx
@@ -42,6 +42,7 @@ import {
   NodeAffinity as NodeAffinityType,
 } from '@console/internal/module/k8s';
 import { usePostFormSubmitAction } from '@console/shared';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { ProvidedAPI } from '../../types';
 import { ClusterServiceVersionLogo } from '../cluster-service-version-logo';
 import {
@@ -1077,7 +1078,7 @@ export const DEPRECATED_CreateOperandForm: React.FC<OperandFormProps> = ({
   useScrollToTopOnMount();
 
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <div className="row">
         <div className="col-md-4 col-md-push-8 col-lg-5 col-lg-push-7">
           {csv && providedAPI && (
@@ -1168,7 +1169,7 @@ export const DEPRECATED_CreateOperandForm: React.FC<OperandFormProps> = ({
           </form>
         </div>
       </div>
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/packages/operator-lifecycle-manager/src/components/operand/index.spec.tsx b/frontend/packages/operator-lifecycle-manager/src/components/operand/index.spec.tsx
index f6142910292..1ac527a8077 100644
--- a/frontend/packages/operator-lifecycle-manager/src/components/operand/index.spec.tsx
+++ b/frontend/packages/operator-lifecycle-manager/src/components/operand/index.spec.tsx
@@ -604,7 +604,7 @@ describe(ProvidedAPIsPage.displayName, () => {
   });
 
   it('check if ListPageBody component renders the correct children', () => {
-    expect(wrapper.find(ListPageBody).children().children().length).toBe(2);
+    expect(wrapper.find(ListPageBody).children().length).toBe(1);
   });
 });
 
@@ -649,7 +649,7 @@ describe(ProvidedAPIPage.displayName, () => {
   });
 
   it('check if ListPageBody component renders the correct children', () => {
-    expect(wrapper.find(ListPageBody).children().children().length).toBe(2);
+    expect(wrapper.find(ListPageBody).children().length).toBe(1);
   });
 });
 
diff --git a/frontend/packages/operator-lifecycle-manager/src/components/operand/index.tsx b/frontend/packages/operator-lifecycle-manager/src/components/operand/index.tsx
index 7dd8939d906..8a17d0c4980 100644
--- a/frontend/packages/operator-lifecycle-manager/src/components/operand/index.tsx
+++ b/frontend/packages/operator-lifecycle-manager/src/components/operand/index.tsx
@@ -67,6 +67,7 @@ import {
   useActiveNamespace,
 } from '@console/shared';
 import ErrorAlert from '@console/shared/src/components/alerts/error';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { useK8sModel } from '@console/shared/src/hooks/useK8sModel';
 import { useK8sModels } from '@console/shared/src/hooks/useK8sModels';
 import { useResourceDetailsPage } from '@console/shared/src/hooks/useResourceDetailsPage';
@@ -659,7 +660,7 @@ export const OperandDetails = connectToModel(({ crd, csv, kindObj, obj }: Operan
 
   return (
     <div className="co-operand-details co-m-pane">
-      <div className="co-m-pane__body">
+      <PaneBody>
         {errorMessage && <ErrorAlert message={errorMessage} />}
         <SectionHeading text={t('olm~{{kind}} overview', { kind: displayName || kind })} />
         <PodStatuses
@@ -696,9 +697,9 @@ export const OperandDetails = connectToModel(({ crd, csv, kindObj, obj }: Operan
             )}
           </div>
         </div>
-      </div>
+      </PaneBody>
       {!_.isEmpty(specDescriptors) && (
-        <div className="co-m-pane__body">
+        <PaneBody>
           <div className="co-operand-details__section co-operand-details__section--info">
             <div className="row">
               <DescriptorDetailsItemList
@@ -712,14 +713,14 @@ export const OperandDetails = connectToModel(({ crd, csv, kindObj, obj }: Operan
               />
             </div>
           </div>
-        </div>
+        </PaneBody>
       )}
       {Array.isArray(status?.conditions) &&
         (conditionsStatusDescriptors ?? []).every(({ path }) => path !== 'conditions') && (
-          <div className="co-m-pane__body" data-test="status.conditions">
+          <PaneBody data-test="status.conditions">
             <SectionHeading data-test="operand-conditions-heading" text={t('public~Conditions')} />
             <Conditions conditions={status.conditions} />
-          </div>
+          </PaneBody>
         )}
       {conditionsStatusDescriptors?.length > 0 &&
         conditionsStatusDescriptors.map((descriptor) => (
diff --git a/frontend/packages/operator-lifecycle-manager/src/components/operand/operand-form.tsx b/frontend/packages/operator-lifecycle-manager/src/components/operand/operand-form.tsx
index 9f4dde89a6e..79bd6662af3 100644
--- a/frontend/packages/operator-lifecycle-manager/src/components/operand/operand-form.tsx
+++ b/frontend/packages/operator-lifecycle-manager/src/components/operand/operand-form.tsx
@@ -11,6 +11,7 @@ import {
 import { k8sCreate, K8sKind, K8sResourceKind } from '@console/internal/module/k8s';
 import { usePostFormSubmitAction } from '@console/shared';
 import { DynamicForm } from '@console/shared/src/components/dynamic-form';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { ClusterServiceVersionModel } from '../../models';
 import { ClusterServiceVersionKind, CRDDescription, APIServiceDefinition } from '../../types';
 import { ClusterServiceVersionLogo } from '../cluster-service-version-logo';
@@ -66,7 +67,7 @@ export const OperandForm: React.FC<OperandFormProps> = ({
   useScrollToTopOnMount();
 
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <div className="row">
         <div className="col-md-4 col-md-push-8 col-lg-5 col-lg-push-7">
           {csv && providedAPI && (
@@ -95,7 +96,7 @@ export const OperandForm: React.FC<OperandFormProps> = ({
           />
         </div>
       </div>
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/packages/operator-lifecycle-manager/src/components/operator-hub/operator-hub-details.tsx b/frontend/packages/operator-lifecycle-manager/src/components/operator-hub/operator-hub-details.tsx
index 3a03032400b..e870edd49ec 100644
--- a/frontend/packages/operator-lifecycle-manager/src/components/operator-hub/operator-hub-details.tsx
+++ b/frontend/packages/operator-lifecycle-manager/src/components/operator-hub/operator-hub-details.tsx
@@ -9,6 +9,7 @@ import {
   DetailsItem,
   useAccessReview,
 } from '@console/internal/components/utils';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { OperatorHubModel } from '../../models';
 import { CatalogSourceListPage, CatalogSourceListPageProps } from '../catalog-source';
 import { editDefaultSourcesModal } from '../modals/edit-default-sources-modal';
@@ -24,7 +25,7 @@ const OperatorHubDetails: React.FC<OperatorHubDetailsProps> = ({ obj: operatorHu
   });
 
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <SectionHeading text={t('olm~OperatorHub details')} />
       <div className="row">
         <div className="col-sm-6 col-xs-12">
@@ -66,7 +67,7 @@ const OperatorHubDetails: React.FC<OperatorHubDetailsProps> = ({ obj: operatorHu
           </div>
         </div>
       </div>
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/packages/operator-lifecycle-manager/src/components/operator-hub/operator-hub-page.tsx b/frontend/packages/operator-lifecycle-manager/src/components/operator-hub/operator-hub-page.tsx
index 8e6130b1692..e517916a83d 100644
--- a/frontend/packages/operator-lifecycle-manager/src/components/operator-hub/operator-hub-page.tsx
+++ b/frontend/packages/operator-lifecycle-manager/src/components/operator-hub/operator-hub-page.tsx
@@ -22,6 +22,7 @@ import { isCatalogTypeEnabled, useIsDeveloperCatalogEnabled } from '@console/sha
 import { DocumentTitle } from '@console/shared/src/components/document-title/DocumentTitle';
 import { ConsoleEmptyState } from '@console/shared/src/components/empty-state';
 import { ErrorBoundaryFallbackPage, withFallback } from '@console/shared/src/components/error';
+import PageBody from '@console/shared/src/components/layout/PageBody';
 import { iconFor } from '..';
 import {
   CloudCredentialModel,
@@ -256,7 +257,7 @@ export const OperatorHubPage = withFallback((props) => {
   return (
     <>
       <DocumentTitle>OperatorHub</DocumentTitle>
-      <div className="co-m-page__body">
+      <PageBody>
         <div className="co-catalog">
           <PageHeading title="OperatorHub" />
           <p className="co-catalog-page__description">
@@ -340,7 +341,7 @@ export const OperatorHubPage = withFallback((props) => {
             </Firehose>
           </div>
         </div>
-      </div>
+      </PageBody>
     </>
   );
 }, ErrorBoundaryFallbackPage);
diff --git a/frontend/packages/operator-lifecycle-manager/src/components/operator-hub/operator-hub-subscribe.tsx b/frontend/packages/operator-lifecycle-manager/src/components/operator-hub/operator-hub-subscribe.tsx
index 007c2845fc0..0e2924acc69 100644
--- a/frontend/packages/operator-lifecycle-manager/src/components/operator-hub/operator-hub-subscribe.tsx
+++ b/frontend/packages/operator-lifecycle-manager/src/components/operator-hub/operator-hub-subscribe.tsx
@@ -51,6 +51,7 @@ import {
 } from '@console/internal/module/k8s';
 import { fromRequirements } from '@console/internal/module/k8s/selector';
 import { DocumentTitle } from '@console/shared/src/components/document-title/DocumentTitle';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { CONSOLE_OPERATOR_CONFIG_NAME } from '@console/shared/src/constants';
 import { SubscriptionModel, OperatorGroupModel, PackageManifestModel } from '../../models';
 import {
@@ -865,7 +866,7 @@ export const OperatorHubSubscribeForm: React.FC<OperatorHubSubscribeFormProps> =
           'olm~Install your Operator by subscribing to one of the update channels to keep the Operator up to date. The strategy determines either manual or automatic updates.',
         )}
       />
-      <div className="co-m-pane__body">
+      <PaneBody>
         {tokenizedAuth === 'AWS' && showCSTokenWarn && (
           <CloudServiceTokenWarningAlert
             title={t('olm~Cluster in STS Mode')}
@@ -1189,7 +1190,7 @@ export const OperatorHubSubscribeForm: React.FC<OperatorHubSubscribeFormProps> =
             </div>
           </div>
         </div>
-      </div>
+      </PaneBody>
     </>
   );
 };
diff --git a/frontend/packages/operator-lifecycle-manager/src/components/subscription.tsx b/frontend/packages/operator-lifecycle-manager/src/components/subscription.tsx
index 9308e84d50d..64f41c767ce 100644
--- a/frontend/packages/operator-lifecycle-manager/src/components/subscription.tsx
+++ b/frontend/packages/operator-lifecycle-manager/src/components/subscription.tsx
@@ -51,6 +51,7 @@ import {
   WarningStatus,
   YellowExclamationTriangleIcon,
 } from '@console/shared';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import {
   SubscriptionModel,
   ClusterServiceVersionModel,
@@ -444,7 +445,7 @@ export const SubscriptionDetails: React.FC<SubscriptionDetailsProps> = ({
 
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <CatalogSourceHealthAlert
           health={catalogHealth}
           source={source}
@@ -472,67 +473,65 @@ export const SubscriptionDetails: React.FC<SubscriptionDetailsProps> = ({
             subscriptions={subscriptions}
           />
         </div>
-        <div className="co-m-pane__body-group">
-          <div className="row">
-            <div className="col-sm-6">
-              <ResourceSummary resource={obj} showAnnotations={false} />
-            </div>
-            <div className="col-sm-6">
-              <dl className="co-m-pane__details">
-                <dt>{t('olm~Installed version')}</dt>
-                <dd>
-                  {installedCSV ? (
-                    <ResourceLink
-                      kind={referenceForModel(ClusterServiceVersionModel)}
-                      name={getName(installedCSV)}
-                      namespace={getNamespace(installedCSV)}
-                      title={getName(installedCSV)}
-                    />
-                  ) : (
-                    t('olm~None')
-                  )}
-                </dd>
-                <dt>{t('olm~Starting version')}</dt>
-                <dd>{obj.spec.startingCSV || t('olm~None')}</dd>
-                <dt>{t('olm~CatalogSource')}</dt>
-                <dd>
-                  {source && sourceNamespace ? (
-                    <ResourceLink
-                      kind={referenceForModel(CatalogSourceModel)}
-                      name={source}
-                      namespace={sourceNamespace}
-                      title={source}
-                    >
-                      <ResourceStatus badgeAlt>
-                        <CatalogSourceStatusIconAndText healthy={catalogHealth?.healthy} />
-                      </ResourceStatus>
-                    </ResourceLink>
-                  ) : (
-                    t('olm~None')
-                  )}
-                </dd>
-                <dt>{t('olm~InstallPlan')}</dt>
-                <dd>
-                  {installPlan ? (
-                    <ResourceLink
-                      kind={referenceForModel(InstallPlanModel)}
-                      name={getName(installPlan)}
-                      namespace={getNamespace(installPlan)}
-                      title={getName(installPlan)}
-                    />
-                  ) : (
-                    t('olm~None')
-                  )}
-                </dd>
-              </dl>
-            </div>
+        <div className="row">
+          <div className="col-sm-6">
+            <ResourceSummary resource={obj} showAnnotations={false} />
+          </div>
+          <div className="col-sm-6">
+            <dl className="co-m-pane__details">
+              <dt>{t('olm~Installed version')}</dt>
+              <dd>
+                {installedCSV ? (
+                  <ResourceLink
+                    kind={referenceForModel(ClusterServiceVersionModel)}
+                    name={getName(installedCSV)}
+                    namespace={getNamespace(installedCSV)}
+                    title={getName(installedCSV)}
+                  />
+                ) : (
+                  t('olm~None')
+                )}
+              </dd>
+              <dt>{t('olm~Starting version')}</dt>
+              <dd>{obj.spec.startingCSV || t('olm~None')}</dd>
+              <dt>{t('olm~CatalogSource')}</dt>
+              <dd>
+                {source && sourceNamespace ? (
+                  <ResourceLink
+                    kind={referenceForModel(CatalogSourceModel)}
+                    name={source}
+                    namespace={sourceNamespace}
+                    title={source}
+                  >
+                    <ResourceStatus badgeAlt>
+                      <CatalogSourceStatusIconAndText healthy={catalogHealth?.healthy} />
+                    </ResourceStatus>
+                  </ResourceLink>
+                ) : (
+                  t('olm~None')
+                )}
+              </dd>
+              <dt>{t('olm~InstallPlan')}</dt>
+              <dd>
+                {installPlan ? (
+                  <ResourceLink
+                    kind={referenceForModel(InstallPlanModel)}
+                    name={getName(installPlan)}
+                    namespace={getNamespace(installPlan)}
+                    title={getName(installPlan)}
+                  />
+                ) : (
+                  t('olm~None')
+                )}
+              </dd>
+            </dl>
           </div>
         </div>
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={t('olm~Conditions')} />
         <Conditions conditions={obj?.status?.conditions} />
-      </div>
+      </PaneBody>
     </>
   );
 };
diff --git a/frontend/packages/operator-lifecycle-manager/src/style.scss b/frontend/packages/operator-lifecycle-manager/src/style.scss
index e8725e66600..72f07fdad67 100644
--- a/frontend/packages/operator-lifecycle-manager/src/style.scss
+++ b/frontend/packages/operator-lifecycle-manager/src/style.scss
@@ -134,11 +134,7 @@ $co-affinity-row-margin: 15px;
 .co-create-operand__header {
   border-bottom: var(--pf-t--global--border--width--divider--default) solid
     var(--pf-t--global--border--color--default);
-  padding: 0 $pf-v6-global-gutter var(--pf-t--global--spacer--lg);
-  @media (min-width: $pf-v6-global--breakpoint--xl) {
-    padding-left: $pf-v6-global-gutter--md;
-    padding-right: $pf-v6-global-gutter--md;
-  }
+  padding: 0 $pf-v6-global-gutter-x var(--pf-t--global--spacer--lg);
 }
 
 // only used in packages and will be orphaned when packages move out
@@ -247,9 +243,9 @@ $co-affinity-row-margin: 15px;
 }
 
 #operator-install-page {
-  margin: 0 $pf-v6-global-gutter;
+  margin: 0 $pf-v6-global-gutter-x;
   @media (min-width: $screen-sm-min) {
-    margin: $pf-v6-global-gutter--md;
+    margin: $pf-v6-global-gutter-y $pf-v6-global-gutter-x;
     max-width: 600px;
     min-width: 375px;
     width: 100%;
diff --git a/frontend/packages/pipelines-plugin/integration-tests/cypress.config.js b/frontend/packages/pipelines-plugin/integration-tests/cypress.config.js
index d3ba05863e5..d304f3501fb 100644
--- a/frontend/packages/pipelines-plugin/integration-tests/cypress.config.js
+++ b/frontend/packages/pipelines-plugin/integration-tests/cypress.config.js
@@ -46,5 +46,6 @@ module.exports = defineConfig({
     testIsolation: false,
     experimentalMemoryManagement: true,
     numTestsKeptInMemory: 5,
+    injectDocumentDomain: true,
   },
 });
diff --git a/frontend/packages/pipelines-plugin/src/components/ListPage.tsx b/frontend/packages/pipelines-plugin/src/components/ListPage.tsx
index 523afd903de..2b212ef8883 100644
--- a/frontend/packages/pipelines-plugin/src/components/ListPage.tsx
+++ b/frontend/packages/pipelines-plugin/src/components/ListPage.tsx
@@ -32,6 +32,7 @@ import {
 } from '@console/internal/module/k8s';
 import { useDocumentListener, KEYBOARD_SHORTCUTS, useDeepCompareMemoize } from '@console/shared';
 import { withFallback, ErrorBoundaryFallbackPage } from '@console/shared/src/components/error';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import ListPropProvider from './ListPropProvider';
 
 type CreateProps = {
@@ -328,14 +329,14 @@ export const FireMan: React.FC<FireManProps & { filterList?: typeof filterList }
         {!title && badge && <div>{badge}</div>}
       </PageHeading>
       {helpText && <p className="co-m-pane__help-text co-help-text">{helpText}</p>}
-      <div className="co-m-pane__body co-m-pane__body--no-top-margin">
+      <PaneBody>
         {inject(props.children, {
           resources,
           expand,
           reduxIDs,
           applyFilter,
         })}
-      </div>
+      </PaneBody>
     </>
   );
 };
diff --git a/frontend/packages/pipelines-plugin/src/components/cluster-tasks/ClusterTaskDetails.tsx b/frontend/packages/pipelines-plugin/src/components/cluster-tasks/ClusterTaskDetails.tsx
index 7203a44a206..b4274de3650 100644
--- a/frontend/packages/pipelines-plugin/src/components/cluster-tasks/ClusterTaskDetails.tsx
+++ b/frontend/packages/pipelines-plugin/src/components/cluster-tasks/ClusterTaskDetails.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { SectionHeading, ResourceSummary } from '@console/internal/components/utils';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { ClusterTaskModel } from '../../models';
 import { TaskKind } from '../../types';
 import WorkspaceDefinitionList from '../shared/workspaces/WorkspaceDefinitionList';
@@ -14,7 +15,7 @@ export interface ClusterTaskDetailsProps {
 const ClusterTaskDetails: React.FC<ClusterTaskDetailsProps> = ({ obj: task }) => {
   const { t } = useTranslation();
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <SectionHeading
         text={t('pipelines-plugin~{{clusterTaskLabel}} details', {
           clusterTaskLabel: t(ClusterTaskModel.labelKey),
@@ -28,7 +29,7 @@ const ClusterTaskDetails: React.FC<ClusterTaskDetailsProps> = ({ obj: task }) =>
           <WorkspaceDefinitionList workspaces={task.spec.workspaces} />
         </div>
       </div>
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/packages/pipelines-plugin/src/components/pac/PacAppForm.tsx b/frontend/packages/pipelines-plugin/src/components/pac/PacAppForm.tsx
index 4072ac59549..e4cb65a82b4 100644
--- a/frontend/packages/pipelines-plugin/src/components/pac/PacAppForm.tsx
+++ b/frontend/packages/pipelines-plugin/src/components/pac/PacAppForm.tsx
@@ -42,7 +42,7 @@ const PacAppForm: React.FC<FormikProps<FormikValues>> = ({
       method="post"
       data-test="form-setup-github-app"
     >
-      <FormBody flexLayout className="co-m-pane__body--no-top-margin">
+      <FormBody flexLayout className="pf-v6-c-page__main-section">
         <FormSection>
           <FormGroup
             label={t('pipelines-plugin~GitHub application name')}
diff --git a/frontend/packages/pipelines-plugin/src/components/pac/PacOverview.tsx b/frontend/packages/pipelines-plugin/src/components/pac/PacOverview.tsx
index 38c63075d57..073f7122ee1 100644
--- a/frontend/packages/pipelines-plugin/src/components/pac/PacOverview.tsx
+++ b/frontend/packages/pipelines-plugin/src/components/pac/PacOverview.tsx
@@ -13,6 +13,8 @@ import { ExternalLink, ResourceLink, PageHeading } from '@console/internal/compo
 import { SecretModel } from '@console/internal/models';
 import { SecretKind } from '@console/internal/module/k8s';
 import { DocumentTitle } from '@console/shared/src/components/document-title/DocumentTitle';
+import PageBody from '@console/shared/src/components/layout/PageBody';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 
 type PacOverviewProps = {
   namespace: string;
@@ -52,13 +54,13 @@ const PacOverview: React.FC<PacOverviewProps> = ({
       <>
         {pageTitle}
         {pageHeading}
-        <div className="co-m-page__body">
-          <div className="co-m-pane__body no-margin">
+        <PageBody>
+          <PaneBody>
             <Alert variant="danger" title={t('pipelines-plugin~Something unexpected happened!!')}>
               {loadError?.message && <p>{loadError.message}</p>}
             </Alert>
-          </div>
-        </div>
+          </PaneBody>
+        </PageBody>
       </>
     );
   }
@@ -71,8 +73,8 @@ const PacOverview: React.FC<PacOverviewProps> = ({
     <>
       {pageTitle}
       {pageHeading}
-      <div className="co-m-page__body">
-        <div className="co-m-pane__body no-margin">
+      <PageBody>
+        <PaneBody>
           {alertVisible && (
             <Alert
               variant="success"
@@ -126,8 +128,8 @@ const PacOverview: React.FC<PacOverviewProps> = ({
             </FormGroup>
             <br />
           </FormGroup>
-        </div>
-      </div>
+        </PaneBody>
+      </PageBody>
     </>
   );
 };
diff --git a/frontend/packages/pipelines-plugin/src/components/pipelineruns/PipelineRunParametersForm.tsx b/frontend/packages/pipelines-plugin/src/components/pipelineruns/PipelineRunParametersForm.tsx
index b6ec16f0d5a..3f9417ed049 100644
--- a/frontend/packages/pipelines-plugin/src/components/pipelineruns/PipelineRunParametersForm.tsx
+++ b/frontend/packages/pipelines-plugin/src/components/pipelineruns/PipelineRunParametersForm.tsx
@@ -3,6 +3,7 @@ import { Formik } from 'formik';
 import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { K8sResourceKind } from '@console/internal/module/k8s';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import PipelineRunParameters from './PipelineRunParameters';
 
 export interface PipelineRunParametersFormProps {
@@ -18,7 +19,7 @@ const PipelineRunParametersForm: React.FC<PipelineRunParametersFormProps> = ({ o
     <>
       <Formik initialValues={initialValues} onSubmit={null}>
         {() => (
-          <div className="co-m-pane__body">
+          <PaneBody>
             <PipelineRunParameters
               fieldName="parameters"
               isReadOnly
@@ -34,7 +35,7 @@ const PipelineRunParametersForm: React.FC<PipelineRunParametersFormProps> = ({ o
                 value: '',
               }}
             />
-          </div>
+          </PaneBody>
         )}
       </Formik>
     </>
diff --git a/frontend/packages/pipelines-plugin/src/components/pipelineruns/PipelineRunsPage.tsx b/frontend/packages/pipelines-plugin/src/components/pipelineruns/PipelineRunsPage.tsx
index 21e6742ec1a..6bbba36bbbf 100644
--- a/frontend/packages/pipelines-plugin/src/components/pipelineruns/PipelineRunsPage.tsx
+++ b/frontend/packages/pipelines-plugin/src/components/pipelineruns/PipelineRunsPage.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom-v5-compat';
+import CatalogPageHelpText from '@console/dev-console/src/components/catalog/CatalogPageHelpText';
 import CreateProjectListPage, {
   CreateAProjectButton,
 } from '@console/dev-console/src/components/projects/CreateProjectListPage';
@@ -20,10 +21,12 @@ const PipelineRunsPage: React.FC = (props) => {
   ) : (
     <CreateProjectListPage title={pipelineRunLabel} badge={badge}>
       {(openProjectModal) => (
-        <Trans t={t} ns="pipelines-plugin" values={{ pipelineRunLabel }}>
-          Select a Project to view the list of {{ pipelineRunLabel }}
-          <CreateAProjectButton openProjectModal={openProjectModal} />.
-        </Trans>
+        <CatalogPageHelpText>
+          <Trans t={t} ns="pipelines-plugin" values={{ pipelineRunLabel }}>
+            Select a Project to view the list of {{ pipelineRunLabel }}
+            <CreateAProjectButton openProjectModal={openProjectModal} />.
+          </Trans>
+        </CatalogPageHelpText>
       )}
     </CreateProjectListPage>
   );
diff --git a/frontend/packages/pipelines-plugin/src/components/pipelineruns/detail-page-tabs/PipelineRunDetails.tsx b/frontend/packages/pipelines-plugin/src/components/pipelineruns/detail-page-tabs/PipelineRunDetails.tsx
index 7373e59bf47..11d3b4bb143 100644
--- a/frontend/packages/pipelines-plugin/src/components/pipelineruns/detail-page-tabs/PipelineRunDetails.tsx
+++ b/frontend/packages/pipelines-plugin/src/components/pipelineruns/detail-page-tabs/PipelineRunDetails.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { PipelineRunKind } from '../../../types';
 import PipelineRunDetailsSection from './PipelineRunDetailsSection';
 import './TriggeredBySection.scss';
@@ -9,8 +10,8 @@ export interface PipelineRunDetailsProps {
 
 export const PipelineRunDetails: React.FC<PipelineRunDetailsProps> = ({ obj: pipelineRun }) => {
   return (
-    <div className="co-m-pane__body odc-pipeline-run-details">
+    <PaneBody className="odc-pipeline-run-details">
       <PipelineRunDetailsSection pipelineRun={pipelineRun} />
-    </div>
+    </PaneBody>
   );
 };
diff --git a/frontend/packages/pipelines-plugin/src/components/pipelines/PipelineTabbedPage.tsx b/frontend/packages/pipelines-plugin/src/components/pipelines/PipelineTabbedPage.tsx
index cff017a722d..91934bcc4da 100644
--- a/frontend/packages/pipelines-plugin/src/components/pipelines/PipelineTabbedPage.tsx
+++ b/frontend/packages/pipelines-plugin/src/components/pipelines/PipelineTabbedPage.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useParams, useNavigate } from 'react-router-dom-v5-compat';
+import CatalogPageHelpText from '@console/dev-console/src/components/catalog/CatalogPageHelpText';
 import NamespacedPage, {
   NamespacedPageVariants,
 } from '@console/dev-console/src/components/NamespacedPage';
@@ -99,10 +100,12 @@ export const PageContents: React.FC = () => {
   ) : (
     <CreateProjectListPage title={t('pipelines-plugin~Pipelines')}>
       {(openProjectModal) => (
-        <Trans t={t} ns="pipelines-plugin">
-          Select a Project to view its details
-          <CreateAProjectButton openProjectModal={openProjectModal} />.
-        </Trans>
+        <CatalogPageHelpText>
+          <Trans t={t} ns="pipelines-plugin">
+            Select a Project to view its details
+            <CreateAProjectButton openProjectModal={openProjectModal} />.
+          </Trans>
+        </CatalogPageHelpText>
       )}
     </CreateProjectListPage>
   );
diff --git a/frontend/packages/pipelines-plugin/src/components/pipelines/PipelinesPage.tsx b/frontend/packages/pipelines-plugin/src/components/pipelines/PipelinesPage.tsx
index 0e9687a7f10..e34d8b98136 100644
--- a/frontend/packages/pipelines-plugin/src/components/pipelines/PipelinesPage.tsx
+++ b/frontend/packages/pipelines-plugin/src/components/pipelines/PipelinesPage.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom-v5-compat';
+import CatalogPageHelpText from '@console/dev-console/src/components/catalog/CatalogPageHelpText';
 import CreateProjectListPage, {
   CreateAProjectButton,
 } from '@console/dev-console/src/components/projects/CreateProjectListPage';
@@ -29,10 +30,12 @@ export const PipelinesPage: React.FC = (props) => {
       ) : (
         <CreateProjectListPage title={t('pipelines-plugin~Pipelines')} badge={badge}>
           {(openProjectModal) => (
-            <Trans t={t} ns="pipelines-plugin">
-              Select a Project to view the list of Pipelines
-              <CreateAProjectButton openProjectModal={openProjectModal} />.
-            </Trans>
+            <CatalogPageHelpText>
+              <Trans t={t} ns="pipelines-plugin">
+                Select a Project to view the list of Pipelines
+                <CreateAProjectButton openProjectModal={openProjectModal} />.
+              </Trans>
+            </CatalogPageHelpText>
           )}
         </CreateProjectListPage>
       )}
diff --git a/frontend/packages/pipelines-plugin/src/components/pipelines/detail-page-tabs/EventListenerDetails.tsx b/frontend/packages/pipelines-plugin/src/components/pipelines/detail-page-tabs/EventListenerDetails.tsx
index b7dc8e05a4f..730da905667 100644
--- a/frontend/packages/pipelines-plugin/src/components/pipelines/detail-page-tabs/EventListenerDetails.tsx
+++ b/frontend/packages/pipelines-plugin/src/components/pipelines/detail-page-tabs/EventListenerDetails.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { SectionHeading, ResourceSummary } from '@console/internal/components/utils';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { EventListenerKind } from '../resource-types';
 import EventListenerTriggers from './EventListenerTriggers';
 import EventListenerURL from './EventListenerURL';
@@ -16,7 +17,7 @@ const EventListenerDetails: React.FC<EventListenerDetailsProps> = ({ obj: eventL
       (trigger) => trigger.template?.ref || trigger.template?.name,
     ) || [];
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <SectionHeading text={t('pipelines-plugin~EventListener details')} />
       <div className="row">
         <div className="col-sm-6">
@@ -35,7 +36,7 @@ const EventListenerDetails: React.FC<EventListenerDetailsProps> = ({ obj: eventL
           )}
         </div>
       </div>
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/packages/pipelines-plugin/src/components/pipelines/detail-page-tabs/PipelineParametersForm.tsx b/frontend/packages/pipelines-plugin/src/components/pipelines/detail-page-tabs/PipelineParametersForm.tsx
index 3f9267fc957..444b7c9640a 100644
--- a/frontend/packages/pipelines-plugin/src/components/pipelines/detail-page-tabs/PipelineParametersForm.tsx
+++ b/frontend/packages/pipelines-plugin/src/components/pipelines/detail-page-tabs/PipelineParametersForm.tsx
@@ -5,6 +5,7 @@ import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { useAccessReview } from '@console/internal/components/utils';
 import { FormFooter } from '@console/shared';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import PipelineParameters from '../PipelineParameters';
 
 type PipelineParametersFormProps = FormikProps<FormikValues> & {
@@ -30,7 +31,7 @@ const PipelineParametersForm: React.FC<PipelineParametersFormProps> = ({
   const disableSubmit = !dirty || !_.isEmpty(_.compact(getIn(errors, 'parameters')));
   return (
     <Form onSubmit={handleSubmit}>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <PipelineParameters
           fieldName="parameters"
           isReadOnly={!pipelineParameterAccess}
@@ -44,7 +45,7 @@ const PipelineParametersForm: React.FC<PipelineParametersFormProps> = ({
           emptyMessage={t('pipelines-plugin~No parameters are associated with this Pipeline.')}
           emptyValues={{ name: '', description: '', default: '' }}
         />
-      </div>
+      </PaneBody>
       {pipelineParameterAccess && (
         <FormFooter
           handleReset={handleReset}
diff --git a/frontend/packages/pipelines-plugin/src/components/pipelines/detail-page-tabs/PipelineResourcesForm.tsx b/frontend/packages/pipelines-plugin/src/components/pipelines/detail-page-tabs/PipelineResourcesForm.tsx
index 8848a48b587..7f9b0692636 100644
--- a/frontend/packages/pipelines-plugin/src/components/pipelines/detail-page-tabs/PipelineResourcesForm.tsx
+++ b/frontend/packages/pipelines-plugin/src/components/pipelines/detail-page-tabs/PipelineResourcesForm.tsx
@@ -5,6 +5,7 @@ import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { useAccessReview } from '@console/internal/components/utils';
 import { FormFooter } from '@console/shared';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import PipelineResources from './PipelineResources';
 
 type PipelineResourcesFormProps = FormikProps<FormikValues> & {
@@ -30,9 +31,9 @@ const PipelineResourcesForm: React.FC<PipelineResourcesFormProps> = ({
   const disableSubmit = !dirty || !_.isEmpty(_.compact(getIn(errors, 'resources')));
   return (
     <Form onSubmit={handleSubmit}>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <PipelineResources fieldName="resources" isReadOnly={!pipelineResourceAccess} />
-      </div>
+      </PaneBody>
       {pipelineResourceAccess && (
         <FormFooter
           handleReset={handleReset}
diff --git a/frontend/packages/pipelines-plugin/src/components/pipelines/detail-page-tabs/TriggerBindingDetails.tsx b/frontend/packages/pipelines-plugin/src/components/pipelines/detail-page-tabs/TriggerBindingDetails.tsx
index a4d625e2897..1d6576f2187 100644
--- a/frontend/packages/pipelines-plugin/src/components/pipelines/detail-page-tabs/TriggerBindingDetails.tsx
+++ b/frontend/packages/pipelines-plugin/src/components/pipelines/detail-page-tabs/TriggerBindingDetails.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { SectionHeading, ResourceSummary } from '@console/internal/components/utils';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { EventListenerModel } from '../../../models';
 import { getResourceModelFromBindingKind } from '../../../utils/pipeline-augment';
 import ResourceLinkList from '../resource-overview/ResourceLinkList';
@@ -15,7 +16,7 @@ const TriggerBindingDetails: React.FC<TriggerBindingDetailsProps> = ({ obj: trig
   const { t } = useTranslation();
   const eventListeners: string[] = useTriggerBindingEventListenerNames(triggerBinding);
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <SectionHeading
         text={t('pipelines-plugin~{{triggerBindingLabel}} details', {
           triggerBindingLabel: t(getResourceModelFromBindingKind(triggerBinding.kind).labelKey),
@@ -33,7 +34,7 @@ const TriggerBindingDetails: React.FC<TriggerBindingDetailsProps> = ({ obj: trig
           />
         </div>
       </div>
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/packages/pipelines-plugin/src/components/pipelines/detail-page-tabs/TriggerTemplateDetails.tsx b/frontend/packages/pipelines-plugin/src/components/pipelines/detail-page-tabs/TriggerTemplateDetails.tsx
index eff3ee56deb..0ee51250fe2 100644
--- a/frontend/packages/pipelines-plugin/src/components/pipelines/detail-page-tabs/TriggerTemplateDetails.tsx
+++ b/frontend/packages/pipelines-plugin/src/components/pipelines/detail-page-tabs/TriggerTemplateDetails.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { SectionHeading, ResourceSummary } from '@console/internal/components/utils';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { EventListenerModel, PipelineModel } from '../../../models';
 import ResourceLinkList from '../resource-overview/ResourceLinkList';
 import { TriggerTemplateKind } from '../resource-types';
@@ -20,7 +21,7 @@ const TriggerTemplateDetails: React.FC<TriggerTemplateDetailsProps> = ({
   const eventListeners: string[] = useTriggerTemplateEventListenerNames(triggerTemplate);
   const pipelineName: string = getTriggerTemplatePipelineName(triggerTemplate);
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <SectionHeading text={t('pipelines-plugin~TriggerTemplate details')} />
       <div className="row">
         <div className="col-sm-6">
@@ -39,7 +40,7 @@ const TriggerTemplateDetails: React.FC<TriggerTemplateDetailsProps> = ({
           />
         </div>
       </div>
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/packages/pipelines-plugin/src/components/pipelines/detail-page-tabs/pipeline-details/PipelineDetails.tsx b/frontend/packages/pipelines-plugin/src/components/pipelines/detail-page-tabs/pipeline-details/PipelineDetails.tsx
index 7e56fa44ed4..79a932fe70b 100644
--- a/frontend/packages/pipelines-plugin/src/components/pipelines/detail-page-tabs/pipeline-details/PipelineDetails.tsx
+++ b/frontend/packages/pipelines-plugin/src/components/pipelines/detail-page-tabs/pipeline-details/PipelineDetails.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { SectionHeading, ResourceSummary } from '@console/internal/components/utils';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { TriggerTemplateModel } from '../../../../models';
 import WorkspaceDefinitionList from '../../../shared/workspaces/WorkspaceDefinitionList';
 import DynamicResourceLinkList from '../../resource-overview/DynamicResourceLinkList';
@@ -15,7 +16,7 @@ const PipelineDetails: React.FC<PipelineDetailsTabProps> = ({ obj: pipeline, cus
 
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading text={t('pipelines-plugin~Pipeline details')} />
         <PipelineVisualization pipeline={pipeline} />
         <div className="row">
@@ -41,7 +42,7 @@ const PipelineDetails: React.FC<PipelineDetailsTabProps> = ({ obj: pipeline, cus
             <WorkspaceDefinitionList workspaces={pipeline.spec.workspaces} />
           </div>
         </div>
-      </div>
+      </PaneBody>
     </>
   );
 };
diff --git a/frontend/packages/pipelines-plugin/src/components/pipelines/list-page/PipelinesList.tsx b/frontend/packages/pipelines-plugin/src/components/pipelines/list-page/PipelinesList.tsx
index d025dbab865..795366d102f 100644
--- a/frontend/packages/pipelines-plugin/src/components/pipelines/list-page/PipelinesList.tsx
+++ b/frontend/packages/pipelines-plugin/src/components/pipelines/list-page/PipelinesList.tsx
@@ -4,6 +4,7 @@ import { useParams } from 'react-router-dom-v5-compat';
 import { Firehose } from '@console/internal/components/utils';
 import { referenceForModel } from '@console/internal/module/k8s';
 import { DocumentTitle } from '@console/shared/src/components/document-title/DocumentTitle';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { PipelineModel } from '../../../models';
 import { filters } from './PipelineAugmentRuns';
 import PipelineAugmentRunsWrapper from './PipelineAugmentRunsWrapper';
@@ -23,11 +24,11 @@ const PipelinesList: React.FC = () => {
   return (
     <>
       <DocumentTitle>{t('pipelines-plugin~Pipelines')}</DocumentTitle>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <Firehose resources={resources}>
           <PipelineAugmentRunsWrapper namespace={namespace} />
         </Firehose>
-      </div>
+      </PaneBody>
     </>
   );
 };
diff --git a/frontend/packages/pipelines-plugin/src/components/pipelines/pipeline-builder/PipelineBuilderForm.tsx b/frontend/packages/pipelines-plugin/src/components/pipelines/pipeline-builder/PipelineBuilderForm.tsx
index a469ae67d7b..c724ec06b35 100644
--- a/frontend/packages/pipelines-plugin/src/components/pipelines/pipeline-builder/PipelineBuilderForm.tsx
+++ b/frontend/packages/pipelines-plugin/src/components/pipelines/pipeline-builder/PipelineBuilderForm.tsx
@@ -204,11 +204,7 @@ const PipelineBuilderForm: React.FC<PipelineBuilderFormProps> = (props) => {
             <PipelineBuilderHeader namespace={namespace} />
             <FlexForm className="opp-pipeline-builder-form" onSubmit={handleSubmit}>
               <div className="opp-pipeline-builder-form__content">
-                <FormBody
-                  flexLayout
-                  disablePaneBody
-                  className="co-m-pane__body co-m-pane__body--no-top-margin"
-                >
+                <FormBody flexLayout disablePaneBody className="pf-v6-c-page__main-section">
                   <PipelineQuickSearch
                     namespace={namespace}
                     viewContainer={contentRef.current}
diff --git a/frontend/packages/pipelines-plugin/src/components/pipelines/pipeline-builder/PipelineBuilderHeader.tsx b/frontend/packages/pipelines-plugin/src/components/pipelines/pipeline-builder/PipelineBuilderHeader.tsx
index 92e7d410387..f4040bfa1c6 100644
--- a/frontend/packages/pipelines-plugin/src/components/pipelines/pipeline-builder/PipelineBuilderHeader.tsx
+++ b/frontend/packages/pipelines-plugin/src/components/pipelines/pipeline-builder/PipelineBuilderHeader.tsx
@@ -3,6 +3,7 @@ import { Flex, FlexItem } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
 import { TechPreviewBadge } from '@console/shared';
 import PrimaryHeading from '@console/shared/src/components/heading/PrimaryHeading';
+import NavTitle from '@console/shared/src/components/layout/NavTitle';
 import { usePipelineTechPreviewBadge } from '../../../utils/hooks';
 
 import './PipelineBuilderHeader.scss';
@@ -15,11 +16,11 @@ const PipelineBuilderHeader: React.FC<{ namespace: string }> = ({ namespace }) =
     <div className="odc-pipeline-builder-header">
       <Flex className="odc-pipeline-builder-header__content">
         <FlexItem grow={{ default: 'grow' }}>
-          <div className="co-m-nav-title">
+          <NavTitle>
             <PrimaryHeading className="odc-pipeline-builder-header__title">
               {t('pipelines-plugin~Pipeline builder')}
             </PrimaryHeading>
-          </div>
+          </NavTitle>
         </FlexItem>
         {badge && (
           <FlexItem>
diff --git a/frontend/packages/pipelines-plugin/src/components/pipelines/pipeline-metrics/PipelineMetrics.scss b/frontend/packages/pipelines-plugin/src/components/pipelines/pipeline-metrics/PipelineMetrics.scss
index b082715e727..8a2dc4eeacf 100644
--- a/frontend/packages/pipelines-plugin/src/components/pipelines/pipeline-metrics/PipelineMetrics.scss
+++ b/frontend/packages/pipelines-plugin/src/components/pipelines/pipeline-metrics/PipelineMetrics.scss
@@ -7,11 +7,11 @@
     margin-top: 0;
   }
   &__body-content {
-    margin-top: $pf-v6-global-gutter--md;
+    margin-top: $pf-v6-global-gutter-y;
   }
   &__toolbar {
     margin-bottom: 0 !important;
-    padding: var(--pf-t--global--spacer--md) $pf-v6-global-gutter--md 0;
+    padding: $pf-v6-global-gutter-y $pf-v6-global-gutter-x 0;
   }
 }
 .pipeline-metrics-empty-state {
diff --git a/frontend/packages/pipelines-plugin/src/components/pipelines/pipeline-metrics/PipelineMetrics.tsx b/frontend/packages/pipelines-plugin/src/components/pipelines/pipeline-metrics/PipelineMetrics.tsx
index b164cc1f6b1..23f9ffba6ef 100644
--- a/frontend/packages/pipelines-plugin/src/components/pipelines/pipeline-metrics/PipelineMetrics.tsx
+++ b/frontend/packages/pipelines-plugin/src/components/pipelines/pipeline-metrics/PipelineMetrics.tsx
@@ -89,7 +89,7 @@ const PipelineMetrics: React.FC<PipelineDetailsTabProps> = ({ obj }) => {
           </FlexItem>
         </Flex>
       </StackItem>
-      <StackItem isFilled className="co-m-pane__body pipeline-metrics-dashboard__body">
+      <StackItem isFilled className="pf-v6-c-page__main-section pipeline-metrics-dashboard__body">
         <Grid
           sm={1}
           md={1}
diff --git a/frontend/packages/pipelines-plugin/src/components/repository/RepositoryDetails.tsx b/frontend/packages/pipelines-plugin/src/components/repository/RepositoryDetails.tsx
index 1b6cecbab83..522a07cd32b 100644
--- a/frontend/packages/pipelines-plugin/src/components/repository/RepositoryDetails.tsx
+++ b/frontend/packages/pipelines-plugin/src/components/repository/RepositoryDetails.tsx
@@ -9,6 +9,7 @@ import {
   DetailsItem,
 } from '@console/internal/components/utils';
 import { SecretModel } from '@console/internal/models';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { usePacInfo } from './hooks/pac-hook';
 import { getGitProviderIcon } from './repository-utils';
 import { RepositoryKind } from './types';
@@ -23,7 +24,7 @@ const RepositoryDetails: React.FC<RepositoryDetailsProps> = ({ obj: repository }
   const [pac, loaded] = usePacInfo();
 
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <SectionHeading text={t('pipelines-plugin~Repository details')} />
       <div className="row">
         <div className="col-sm-6">
@@ -95,7 +96,7 @@ const RepositoryDetails: React.FC<RepositoryDetailsProps> = ({ obj: repository }
           </dl>
         </div>
       </div>
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/packages/pipelines-plugin/src/components/shared/results/OutputTab.tsx b/frontend/packages/pipelines-plugin/src/components/shared/results/OutputTab.tsx
index 1d1e7942fd5..397bfaa55b2 100644
--- a/frontend/packages/pipelines-plugin/src/components/shared/results/OutputTab.tsx
+++ b/frontend/packages/pipelines-plugin/src/components/shared/results/OutputTab.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { EmptyState, EmptyStateBody, EmptyStateVariant } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { PipelineRunModel } from '../../../models';
 import { PipelineRunKind } from '../../../types';
 import { pipelineRunFilterReducer } from '../../../utils/pipeline-filter-reducer';
@@ -10,13 +11,13 @@ const OutputTab: React.FC<{ obj: PipelineRunKind }> = ({ obj: pipelineRun }) =>
   const { t } = useTranslation();
 
   return pipelineRun.status?.pipelineResults || pipelineRun.status?.results ? (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <ResultsList
         results={pipelineRun.status?.pipelineResults || pipelineRun.status?.results}
         resourceName={t(PipelineRunModel.labelKey)}
         status={pipelineRunFilterReducer(pipelineRun)}
       />
-    </div>
+    </PaneBody>
   ) : (
     <EmptyState variant={EmptyStateVariant.full}>
       <EmptyStateBody>
diff --git a/frontend/packages/pipelines-plugin/src/components/taskruns/TaskRunDetails.tsx b/frontend/packages/pipelines-plugin/src/components/taskruns/TaskRunDetails.tsx
index 729ba73b09d..6be5bbdca95 100644
--- a/frontend/packages/pipelines-plugin/src/components/taskruns/TaskRunDetails.tsx
+++ b/frontend/packages/pipelines-plugin/src/components/taskruns/TaskRunDetails.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { TaskRunModel } from '../../models';
 import { TaskRunKind } from '../../types';
 import { taskRunFilterReducer } from '../../utils/pipeline-filter-reducer';
@@ -16,17 +17,17 @@ const TaskRunDetails: React.FC<TaskRunDetailsProps> = ({ obj: taskRun }) => {
   const { t } = useTranslation();
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <TaskRunDetailsSection taskRun={taskRun} />
-      </div>
+      </PaneBody>
       {taskRun?.status?.taskResults || taskRun?.status?.results ? (
-        <div className="co-m-pane__body">
+        <PaneBody>
           <ResultsList
             results={taskRun.status?.taskResults || taskRun.status?.results}
             resourceName={t(TaskRunModel.labelKey)}
             status={taskRunFilterReducer(taskRun)}
           />
-        </div>
+        </PaneBody>
       ) : null}
     </>
   );
diff --git a/frontend/packages/pipelines-plugin/src/components/tasks/TaskDetails.tsx b/frontend/packages/pipelines-plugin/src/components/tasks/TaskDetails.tsx
index f717101eb48..f25dc6e567a 100644
--- a/frontend/packages/pipelines-plugin/src/components/tasks/TaskDetails.tsx
+++ b/frontend/packages/pipelines-plugin/src/components/tasks/TaskDetails.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { SectionHeading, ResourceSummary } from '@console/internal/components/utils';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { TaskModel } from '../../models';
 import { TaskKind } from '../../types';
 import WorkspaceDefinitionList from '../shared/workspaces/WorkspaceDefinitionList';
@@ -14,7 +15,7 @@ export interface TaskDetailsProps {
 const TaskDetails: React.FC<TaskDetailsProps> = ({ obj: task }) => {
   const { t } = useTranslation();
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <SectionHeading
         text={t('pipelines-plugin~{{taskLabel}} details', {
           taskLabel: t(TaskModel.labelKey),
@@ -28,7 +29,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({ obj: task }) => {
           <WorkspaceDefinitionList workspaces={task.spec.workspaces} />
         </div>
       </div>
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/packages/service-binding-plugin/src/components/service-binding-details/ServiceBindingDetailsTab.tsx b/frontend/packages/service-binding-plugin/src/components/service-binding-details/ServiceBindingDetailsTab.tsx
index 5cd819f8b08..16b79bffdc8 100644
--- a/frontend/packages/service-binding-plugin/src/components/service-binding-details/ServiceBindingDetailsTab.tsx
+++ b/frontend/packages/service-binding-plugin/src/components/service-binding-details/ServiceBindingDetailsTab.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Conditions } from '@console/internal/components/conditions';
 import { SectionHeading, ResourceSummary } from '@console/internal/components/utils';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { ServiceBinding } from '../../types';
 import ServiceBindingSummary from './ServiceBindingSummary';
 
@@ -16,7 +17,7 @@ const ServiceBindingDetailsTab: React.FC<ServiceBindingDetailsTabProps> = ({
 
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading text={t('service-binding-plugin~ServiceBinding details')} />
 
         <div className="row">
@@ -27,13 +28,13 @@ const ServiceBindingDetailsTab: React.FC<ServiceBindingDetailsTabProps> = ({
             <ServiceBindingSummary serviceBinding={serviceBinding} />
           </div>
         </div>
-      </div>
+      </PaneBody>
 
       {serviceBinding.status?.conditions?.length ? (
-        <div className="co-m-pane__body">
+        <PaneBody>
           <SectionHeading text={t('service-binding-plugin~Conditions')} />
           <Conditions conditions={serviceBinding.status.conditions} />
-        </div>
+        </PaneBody>
       ) : null}
     </>
   );
diff --git a/frontend/packages/shipwright-plugin/integration-tests/cypress.config.js b/frontend/packages/shipwright-plugin/integration-tests/cypress.config.js
index b1a3a857562..cca36d6f9b6 100644
--- a/frontend/packages/shipwright-plugin/integration-tests/cypress.config.js
+++ b/frontend/packages/shipwright-plugin/integration-tests/cypress.config.js
@@ -45,5 +45,6 @@ module.exports = defineConfig({
     testIsolation: false,
     experimentalMemoryManagement: true,
     numTestsKeptInMemory: 5,
+    injectDocumentDomain: true,
   },
 });
diff --git a/frontend/packages/shipwright-plugin/src/components/build-details/BuildDetailsTab.tsx b/frontend/packages/shipwright-plugin/src/components/build-details/BuildDetailsTab.tsx
index 46d9b1fa20a..619b8b371c1 100644
--- a/frontend/packages/shipwright-plugin/src/components/build-details/BuildDetailsTab.tsx
+++ b/frontend/packages/shipwright-plugin/src/components/build-details/BuildDetailsTab.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { SectionHeading, ResourceSummary } from '@console/internal/components/utils';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { Build } from '../../types';
 import BuildSpecSection from './BuildSpecSection';
 import BuildStatusSection from './BuildStatusSection';
@@ -14,7 +15,7 @@ const BuildDetailsTab: React.FC<BuildDetailsTabProps> = ({ obj: build }) => {
 
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading text={t('shipwright-plugin~Build details')} />
 
         <div className="row">
@@ -25,13 +26,13 @@ const BuildDetailsTab: React.FC<BuildDetailsTabProps> = ({ obj: build }) => {
             <BuildSpecSection obj={build} buildSpec={build.spec} path="spec" />
           </div>
         </div>
-      </div>
+      </PaneBody>
 
       {build.status ? (
-        <div className="co-m-pane__body">
+        <PaneBody>
           <SectionHeading text={t('shipwright-plugin~Status')} />
           <BuildStatusSection obj={build} buildStatus={build.status} />
-        </div>
+        </PaneBody>
       ) : null}
     </>
   );
diff --git a/frontend/packages/shipwright-plugin/src/components/buildrun-details/BuildRunDetailsTab.tsx b/frontend/packages/shipwright-plugin/src/components/buildrun-details/BuildRunDetailsTab.tsx
index 0391b88c1ea..aeed97e21f5 100644
--- a/frontend/packages/shipwright-plugin/src/components/buildrun-details/BuildRunDetailsTab.tsx
+++ b/frontend/packages/shipwright-plugin/src/components/buildrun-details/BuildRunDetailsTab.tsx
@@ -3,6 +3,7 @@ import { Flex, FlexItem, Content, ContentVariants } from '@patternfly/react-core
 import { useTranslation } from 'react-i18next';
 import { Conditions } from '@console/internal/components/conditions';
 import { SectionHeading, ResourceSummary } from '@console/internal/components/utils';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { BuildRun } from '../../types';
 import { isV1Alpha1Resource } from '../../utils';
 import BuildSpecSection from '../build-details/BuildSpecSection';
@@ -17,7 +18,7 @@ const BuildRunDetailsTab: React.FC<BuildRunDetailsTabProps> = ({ obj: buildRun }
 
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading text={t('shipwright-plugin~BuildRun details')} />
 
         <div className="row">
@@ -53,13 +54,13 @@ const BuildRunDetailsTab: React.FC<BuildRunDetailsTabProps> = ({ obj: buildRun }
             </Flex>
           </div>
         </div>
-      </div>
+      </PaneBody>
 
       {buildRun.status?.conditions?.length ? (
-        <div className="co-m-pane__body">
+        <PaneBody>
           <SectionHeading text={t('shipwright-plugin~Conditions')} />
           <Conditions conditions={buildRun.status.conditions} />
-        </div>
+        </PaneBody>
       ) : null}
     </>
   );
diff --git a/frontend/packages/topology/integration-tests/cypress.config.js b/frontend/packages/topology/integration-tests/cypress.config.js
index 8841006115e..5bdeb7b55fe 100644
--- a/frontend/packages/topology/integration-tests/cypress.config.js
+++ b/frontend/packages/topology/integration-tests/cypress.config.js
@@ -50,5 +50,6 @@ module.exports = defineConfig({
     testIsolation: false,
     experimentalMemoryManagement: true,
     numTestsKeptInMemory: 5,
+    injectDocumentDomain: true,
   },
 });
diff --git a/frontend/packages/topology/src/components/page/TopologyDataRenderer.tsx b/frontend/packages/topology/src/components/page/TopologyDataRenderer.tsx
index 1d0ede5334d..a27b15f85f4 100644
--- a/frontend/packages/topology/src/components/page/TopologyDataRenderer.tsx
+++ b/frontend/packages/topology/src/components/page/TopologyDataRenderer.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { observer } from '@patternfly/react-topology';
 import { useTranslation } from 'react-i18next';
 import { StatusBox } from '@console/internal/components/utils';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { ModelContext, ExtensibleModel } from '../../data-transforms/ModelContext';
 import { TopologyViewType } from '../../topology-types';
 import { DroppableTopologyComponent } from './DroppableTopologyComponent';
@@ -19,12 +20,12 @@ const TopologyDataRenderer: React.FC<TopologyDataRendererProps> = observer(
       <StatusBox
         skeleton={
           viewType === TopologyViewType.list && (
-            <div className="co-m-pane__body skeleton-overview">
+            <PaneBody className="skeleton-overview">
               <div className="skeleton-overview--head" />
               <div className="skeleton-overview--tile" />
               <div className="skeleton-overview--tile" />
               <div className="skeleton-overview--tile" />
-            </div>
+            </PaneBody>
           )
         }
         data={model}
diff --git a/frontend/packages/topology/src/components/page/TopologyPage.tsx b/frontend/packages/topology/src/components/page/TopologyPage.tsx
index 2245a59843a..497ad2c666d 100644
--- a/frontend/packages/topology/src/components/page/TopologyPage.tsx
+++ b/frontend/packages/topology/src/components/page/TopologyPage.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom-v5-compat';
+import CatalogPageHelpText from '@console/dev-console/src/components/catalog/CatalogPageHelpText';
 import NamespacedPage, {
   NamespacedPageVariants,
 } from '@console/dev-console/src/components/NamespacedPage';
@@ -47,10 +48,12 @@ const PageContents: React.FC<PageContentsProps> = ({ viewType }) => {
   ) : (
     <CreateProjectListPage title={t('topology~Topology')}>
       {(openProjectModal) => (
-        <Trans t={t} ns="topology">
-          Select a Project to view the topology
-          <CreateAProjectButton openProjectModal={openProjectModal} />.
-        </Trans>
+        <CatalogPageHelpText>
+          <Trans t={t} ns="topology">
+            Select a Project to view the topology
+            <CreateAProjectButton openProjectModal={openProjectModal} />.
+          </Trans>
+        </CatalogPageHelpText>
       )}
     </CreateProjectListPage>
   );
diff --git a/frontend/packages/webterminal-plugin/integration-tests/cypress.config.js b/frontend/packages/webterminal-plugin/integration-tests/cypress.config.js
index 0d2541b6768..df47bb06fdb 100644
--- a/frontend/packages/webterminal-plugin/integration-tests/cypress.config.js
+++ b/frontend/packages/webterminal-plugin/integration-tests/cypress.config.js
@@ -47,5 +47,6 @@ module.exports = defineConfig({
     testIsolation: false,
     experimentalMemoryManagement: true,
     numTestsKeptInMemory: 5,
+    injectDocumentDomain: true,
   },
 });
diff --git a/frontend/packages/webterminal-plugin/src/components/cloud-shell/setup/CloudShellAdminSetup.tsx b/frontend/packages/webterminal-plugin/src/components/cloud-shell/setup/CloudShellAdminSetup.tsx
index 8c2b53674ac..623fbe9c86c 100644
--- a/frontend/packages/webterminal-plugin/src/components/cloud-shell/setup/CloudShellAdminSetup.tsx
+++ b/frontend/packages/webterminal-plugin/src/components/cloud-shell/setup/CloudShellAdminSetup.tsx
@@ -7,6 +7,7 @@ import { k8sGetResource, k8sCreateResource } from '@console/dynamic-plugin-sdk/s
 import { SectionHeading } from '@console/internal/components/utils';
 import { LoadError } from '@console/internal/components/utils/status-box';
 import { NamespaceModel } from '@console/internal/models';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import {
   newCloudShellWorkSpace,
   createCloudShellResourceName,
@@ -106,12 +107,12 @@ const CloudShellAdminSetup: React.FunctionComponent<Props> = ({
 
   return (
     <>
-      <div className="co-m-pane__body" style={{ paddingBottom: 0 }}>
+      <PaneBody style={{ paddingBottom: 0 }}>
         <SectionHeading
           text={t('webterminal-plugin~Initialize terminal')}
           style={{ marginBottom: 0 }}
         />
-      </div>
+      </PaneBody>
       <Formik
         initialValues={initialValues}
         onSubmit={handleSubmit}
diff --git a/frontend/packages/webterminal-plugin/src/components/cloud-shell/setup/CloudShellDeveloperSetup.tsx b/frontend/packages/webterminal-plugin/src/components/cloud-shell/setup/CloudShellDeveloperSetup.tsx
index 490bc2d7040..7d516821fb8 100644
--- a/frontend/packages/webterminal-plugin/src/components/cloud-shell/setup/CloudShellDeveloperSetup.tsx
+++ b/frontend/packages/webterminal-plugin/src/components/cloud-shell/setup/CloudShellDeveloperSetup.tsx
@@ -8,6 +8,7 @@ import { ProjectRequestModel } from '@console/internal/models';
 import { k8sCreate, K8sKind } from '@console/internal/module/k8s';
 import { RootState } from '@console/internal/redux';
 import { ALL_NAMESPACES_KEY } from '@console/shared';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { newCloudShellWorkSpace, createCloudShellResourceName } from '../cloud-shell-utils';
 import {
   CloudShellSetupFormData,
@@ -81,12 +82,12 @@ const CloudShellDeveloperSetup: React.FunctionComponent<Props> = ({
 
   return (
     <>
-      <div className="co-m-pane__body" style={{ paddingBottom: 0 }}>
+      <PaneBody style={{ paddingBottom: 0 }}>
         <SectionHeading
           text={t('webterminal-plugin~Initialize terminal')}
           style={{ marginBottom: 0 }}
         />
-      </div>
+      </PaneBody>
       <Formik
         initialValues={initialValues}
         onSubmit={handleSubmit}
diff --git a/frontend/public/components/RBAC/bindings.jsx b/frontend/public/components/RBAC/bindings.jsx
index e658a401f3f..e34e8ddb236 100644
--- a/frontend/public/components/RBAC/bindings.jsx
+++ b/frontend/public/components/RBAC/bindings.jsx
@@ -9,6 +9,7 @@ import { sortable } from '@patternfly/react-table';
 import { ListPageBody } from '@console/dynamic-plugin-sdk';
 import { FLAGS } from '@console/shared/src/constants';
 import { useActiveNamespace } from '@console/shared/src/hooks/useActiveNamespace';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { ClusterRoleBindingModel } from '../../models';
 import { getQN, k8sCreate, k8sPatch, referenceFor } from '../../module/k8s';
 import * as UIActions from '../../actions/ui';
@@ -634,137 +635,141 @@ const BaseEditRoleBinding = (props) => {
   ];
 
   return (
-    <div className="co-m-pane__form">
+    <>
       <DocumentTitle>{title}</DocumentTitle>
-      <PageHeading
-        title={<div data-test="title">{title}</div>}
-        helpText={t(
-          'public~Associate a user/group to the selected role to define the type of access and resources that are allowed.',
-        )}
-      />
-      <div className="co-m-pane__body">
-        <form className="co-m-pane__body-group" onSubmit={save}>
-          {!_.get(fixed, 'kind') && (
-            <Section label={t('public~Binding type')}>
-              <RadioGroup currentValue={data?.kind} items={bindingKinds} onChange={setKind} />
-            </Section>
+      <div className="co-m-pane__form">
+        <PageHeading
+          title={<div data-test="title">{title}</div>}
+          helpText={t(
+            'public~Associate a user/group to the selected role to define the type of access and resources that are allowed.',
           )}
+        />
+        <PaneBody>
+          <form onSubmit={save}>
+            {!_.get(fixed, 'kind') && (
+              <Section label={t('public~Binding type')}>
+                <RadioGroup currentValue={data?.kind} items={bindingKinds} onChange={setKind} />
+              </Section>
+            )}
 
-          <div className="co-form-section__separator" />
-
-          <Section label={t('public~RoleBinding')}>
-            <div className="form-group">
-              <label htmlFor="role-binding-name" className="co-required">
-                {t('public~Name')}
-              </label>
-              {_.get(fixed, 'metadata.name') ? (
-                <ResourceName kind={data?.kind} name={data?.metadata?.name} />
-              ) : (
-                <span className="pf-v6-c-form-control">
-                  <input
-                    type="text"
-                    onChange={changeName}
-                    placeholder={t('public~RoleBinding name')}
-                    value={data?.metadata?.name}
-                    required
-                    id="role-binding-name"
-                    data-test="role-binding-name"
+            <div className="co-form-section__separator" />
+
+            <Section label={t('public~RoleBinding')}>
+              <div className="form-group">
+                <label htmlFor="role-binding-name" className="co-required">
+                  {t('public~Name')}
+                </label>
+                {_.get(fixed, 'metadata.name') ? (
+                  <ResourceName kind={data?.kind} name={data?.metadata?.name} />
+                ) : (
+                  <span className="pf-v6-c-form-control">
+                    <input
+                      type="text"
+                      onChange={changeName}
+                      placeholder={t('public~RoleBinding name')}
+                      value={data?.metadata?.name}
+                      required
+                      id="role-binding-name"
+                      data-test="role-binding-name"
+                    />
+                  </span>
+                )}
+              </div>
+              {data?.kind === 'RoleBinding' && (
+                <div className="form-group" data-test="namespace-dropdown">
+                  <label htmlFor="ns-dropdown" className="co-required">
+                    {t('public~Namespace')}
+                  </label>
+                  <NsDropdown
+                    fixed={!!_.get(fixed, 'metadata.namespace')}
+                    selectedKey={data?.metadata?.namespace}
+                    onChange={changeNamespace}
+                    id="ns-dropdown"
                   />
-                </span>
+                </div>
               )}
-            </div>
-            {data?.kind === 'RoleBinding' && (
-              <div className="form-group" data-test="namespace-dropdown">
-                <label htmlFor="ns-dropdown" className="co-required">
-                  {t('public~Namespace')}
+            </Section>
+
+            <div className="co-form-section__separator" />
+
+            <Section label={t('public~Role')}>
+              <div className="form-group" data-test="role-dropdown">
+                <label htmlFor="role-dropdown" className="co-required">
+                  {t('public~Role name')}
                 </label>
-                <NsDropdown
-                  fixed={!!_.get(fixed, 'metadata.namespace')}
-                  selectedKey={data?.metadata?.namespace}
-                  onChange={changeNamespace}
-                  id="ns-dropdown"
+                <RoleDropdown
+                  fixed={!!_.get(fixed, 'roleRef.name')}
+                  namespace={data?.metadata?.namespace}
+                  onChange={changeRoleRef}
+                  selectedKey={_.get(fixed, 'roleRef.name') || data?.roleRef?.name}
+                  selectedKeyKind={_.get(fixed, 'roleRef.kind') || data?.roleRef?.kind}
+                  id="role-dropdown"
                 />
               </div>
-            )}
-          </Section>
-
-          <div className="co-form-section__separator" />
-
-          <Section label={t('public~Role')}>
-            <div className="form-group" data-test="role-dropdown">
-              <label htmlFor="role-dropdown" className="co-required">
-                {t('public~Role name')}
-              </label>
-              <RoleDropdown
-                fixed={!!_.get(fixed, 'roleRef.name')}
-                namespace={data?.metadata?.namespace}
-                onChange={changeRoleRef}
-                selectedKey={_.get(fixed, 'roleRef.name') || data?.roleRef?.name}
-                selectedKeyKind={_.get(fixed, 'roleRef.kind') || data?.roleRef?.kind}
-                id="role-dropdown"
-              />
-            </div>
-          </Section>
-
-          <div className="co-form-section__separator" />
-
-          <Section label={t('public~Subject')}>
-            <div className="form-group">
-              <RadioGroup
-                currentValue={subject?.kind}
-                items={subjectKinds.map((obj) => ({
-                  ...obj,
-                  disabled: isSubjectDisabled,
-                }))}
-                onChange={changeSubjectKind}
-              />
-            </div>
-            {subject?.kind === 'ServiceAccount' && (
+            </Section>
+
+            <div className="co-form-section__separator" />
+
+            <Section label={t('public~Subject')}>
               <div className="form-group">
-                <label htmlFor="subject-namespace" className="co-required">
-                  {t('public~Subject namespace')}
-                </label>
-                <NsDropdown
-                  id="subject-namespace"
-                  selectedKey={subject?.namespace}
-                  onChange={changeSubjectNamespace}
+                <RadioGroup
+                  currentValue={subject?.kind}
+                  items={subjectKinds.map((obj) => ({
+                    ...obj,
+                    disabled: isSubjectDisabled,
+                  }))}
+                  onChange={changeSubjectKind}
                 />
               </div>
-            )}
-            <div className="form-group">
-              <label htmlFor="subject-name" className="co-required">
-                {t('public~Subject name')}
-              </label>
-              <span className={classNames('pf-v6-c-form-control', { disabled: isSubjectDisabled })}>
-                <input
-                  type="text"
-                  onChange={changeSubjectName}
-                  placeholder={t('public~Subject name')}
-                  value={subject?.name}
-                  required
-                  id="subject-name"
-                  disabled={isSubjectDisabled}
-                  data-test="subject-name"
-                />
-              </span>
-            </div>
-          </Section>
-
-          <div className="co-form-section__separator" />
-
-          <ButtonBar errorMessage={error} inProgress={inProgress}>
-            <ActionGroup className="pf-v6-c-form">
-              <Button type="submit" id="save-changes" variant="primary" data-test="save-changes">
-                {saveButtonText || t('public~Create')}
-              </Button>
-              <Button onClick={() => navigate(-1)} id="cancel" variant="secondary">
-                {t('public~Cancel')}
-              </Button>
-            </ActionGroup>
-          </ButtonBar>
-        </form>
+              {subject?.kind === 'ServiceAccount' && (
+                <div className="form-group">
+                  <label htmlFor="subject-namespace" className="co-required">
+                    {t('public~Subject namespace')}
+                  </label>
+                  <NsDropdown
+                    id="subject-namespace"
+                    selectedKey={subject?.namespace}
+                    onChange={changeSubjectNamespace}
+                  />
+                </div>
+              )}
+              <div className="form-group">
+                <label htmlFor="subject-name" className="co-required">
+                  {t('public~Subject name')}
+                </label>
+                <span
+                  className={classNames('pf-v6-c-form-control', { disabled: isSubjectDisabled })}
+                >
+                  <input
+                    type="text"
+                    onChange={changeSubjectName}
+                    placeholder={t('public~Subject name')}
+                    value={subject?.name}
+                    required
+                    id="subject-name"
+                    disabled={isSubjectDisabled}
+                    data-test="subject-name"
+                  />
+                </span>
+              </div>
+            </Section>
+
+            <div className="co-form-section__separator" />
+
+            <ButtonBar errorMessage={error} inProgress={inProgress}>
+              <ActionGroup className="pf-v6-c-form">
+                <Button type="submit" id="save-changes" variant="primary" data-test="save-changes">
+                  {saveButtonText || t('public~Create')}
+                </Button>
+                <Button onClick={() => navigate(-1)} id="cancel" variant="secondary">
+                  {t('public~Cancel')}
+                </Button>
+              </ActionGroup>
+            </ButtonBar>
+          </form>
+        </PaneBody>
       </div>
-    </div>
+    </>
   );
 };
 
diff --git a/frontend/public/components/RBAC/role.jsx b/frontend/public/components/RBAC/role.jsx
index e26bd676177..e908af0cd2b 100644
--- a/frontend/public/components/RBAC/role.jsx
+++ b/frontend/public/components/RBAC/role.jsx
@@ -7,6 +7,7 @@ import * as classNames from 'classnames';
 import { useTranslation, withTranslation } from 'react-i18next';
 import i18next from 'i18next';
 import { sortable } from '@patternfly/react-table';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { BindingName, BindingsList, flatten as bindingsFlatten } from './bindings';
 import { RulesList } from './rules';
 import { DetailsPage, MultiListPage, TextFilter, Table, TableData } from '../factory';
@@ -102,7 +103,7 @@ class Details extends React.Component {
 
     return (
       <div>
-        <div className="co-m-pane__body">
+        <PaneBody>
           <SectionHeading text={t('public~Role details')} />
           <div className="row">
             <div className="col-xs-6">
@@ -128,8 +129,8 @@ class Details extends React.Component {
               </dl>
             </div>
           </div>
-        </div>
-        <div className="co-m-pane__body">
+        </PaneBody>
+        <PaneBody>
           <SectionHeading text={t('public~Rules')} />
           <div className="co-m-pane__filter-row">
             {/* This page is temporarily disabled until we update the safe resources list.
@@ -145,7 +146,7 @@ class Details extends React.Component {
             />
           </div>
           <RulesList rules={rules} name={name} namespace={namespace} />
-        </div>
+        </PaneBody>
       </div>
     );
   }
diff --git a/frontend/public/components/_dropdown.scss b/frontend/public/components/_dropdown.scss
index a3b08a9147b..86032edec34 100644
--- a/frontend/public/components/_dropdown.scss
+++ b/frontend/public/components/_dropdown.scss
@@ -64,14 +64,9 @@
 .co-namespace-bar {
   border-bottom: var(--pf-t--global--border--width--divider--default) solid
     var(--pf-t--global--border--color--default);
-  padding: 0 $pf-v6-global-gutter;
+  padding: 0 $pf-v6-global-gutter-x;
   white-space: nowrap;
 
-  @media (min-width: $pf-v6-global--breakpoint--xl) {
-    padding-left: $pf-v6-global-gutter--md;
-    padding-right: $pf-v6-global-gutter--md;
-  }
-
   &__items {
     align-items: center;
     display: flex;
diff --git a/frontend/public/components/_edit-yaml.scss b/frontend/public/components/_edit-yaml.scss
index a1a5e3d91ac..84aeca368a8 100644
--- a/frontend/public/components/_edit-yaml.scss
+++ b/frontend/public/components/_edit-yaml.scss
@@ -1,23 +1,26 @@
 .yaml-editor {
-  position: relative;
   display: flex;
-  height: 100%;
-  flex: 1;
   flex-direction: column;
-  align-items: center;
+  flex: 1;
+  height: 100%;
+  padding: $pf-v6-global-gutter-y $pf-v6-global-gutter-y;
+  position: relative;
+}
 
-  .ocs-yaml-editor, .yaml-editor__buttons {
-    width: calc(100% - $pf-v6-global-gutter * 2);
-    padding-top: $pf-v6-global-gutter--md;
+.yaml-editor__buttons {
+  padding-top: $pf-v6-global-gutter-y;
+}
 
-    @media (min-width: $pf-v6-global--breakpoint--xl) {
-      width: calc(100% - $pf-v6-global-gutter--md * 2);
-    }
-  }
+// only used in packages and will be orphaned when packages move out
+.yaml-editor__header {
+  border-bottom: var(--pf-t--global--border--width--divider--default) solid
+    var(--pf-t--global--border--color--default);
+  padding: $pf-v6-global-gutter-y $pf-v6-global-gutter-x;
 }
 
-.yaml-editor__buttons {
-  padding-bottom: $pf-v6-global-gutter;
+// only used in packages and will be orphaned when packages move out
+.yaml-editor__header-text {
+  margin: 0;
 }
 
 .yaml-editor__link {
diff --git a/frontend/public/components/_image-stream.scss b/frontend/public/components/_image-stream.scss
index 6cb93cf6391..cb93e168d3b 100644
--- a/frontend/public/components/_image-stream.scss
+++ b/frontend/public/components/_image-stream.scss
@@ -4,12 +4,9 @@
 
 .co-images-stream-tag-timeline {
   font-size: 15px;
-  margin: 20px $pf-v6-global-gutter--md;
+  margin: $pf-v6-global-gutter-y $pf-v6-global-gutter-x;
   padding-left: 0;
   width: auto;
-  @media (max-width: $screen-xs-max) {
-    margin: 20px 10px;
-  }
   li {
     height: auto;
     list-style: none;
@@ -43,7 +40,8 @@
 }
 
 .co-images-stream-tag-timeline__line {
-  border: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--default);
+  border: var(--pf-t--global--border--width--regular) solid
+    var(--pf-t--global--border--color--default);
   left: 14px;
   position: relative;
 }
diff --git a/frontend/public/components/_import-yaml-results.scss b/frontend/public/components/_import-yaml-results.scss
index 33ec85cdb6c..1428a3f07ef 100644
--- a/frontend/public/components/_import-yaml-results.scss
+++ b/frontend/public/components/_import-yaml-results.scss
@@ -8,9 +8,9 @@
 }
 
 .co-import-yaml-results-page__main {
-  margin: 0 $pf-v6-global-gutter;
+  margin: 0 $pf-v6-global-gutter-x;
   @media (min-width: $screen-sm-min) {
-    margin: $pf-v6-global-gutter--md;
+    margin: $pf-v6-global-gutter-y $pf-v6-global-gutter-x;
     max-width: 600px;
     min-width: 375px;
     width: 100%;
diff --git a/frontend/public/components/_nav-title.scss b/frontend/public/components/_nav-title.scss
index c265e0fc2d6..0b5497ef6c9 100644
--- a/frontend/public/components/_nav-title.scss
+++ b/frontend/public/components/_nav-title.scss
@@ -2,42 +2,36 @@
   align-items: flex-end;
   display: flex;
   font-family: var(--pf-t--global--font--family--body);
+  flex-shrink: 0;
   @media (max-width: $screen-xs) {
+    align-self: flex-start;
     flex-direction: column;
   }
 }
 
-@media (max-width: $screen-xs) {
-  .co-action-buttons__btn {
-    margin-bottom: 10px;
-  }
-}
-
 .co-action-buttons__btn {
   margin-left: 10px;
+  @media (max-width: $screen-xs) {
+    margin-bottom: 10px;
+  }
 }
 
 .co-m-nav-title {
-  margin-top: $pf-v6-global-gutter--md;
-  padding: 0 $pf-v6-global-gutter 0;
-  @media (min-width: $pf-v6-global--breakpoint--xl) {
-    padding-left: $pf-v6-global-gutter--md;
-    padding-right: $pf-v6-global-gutter--md;
+  gap: 0;
+  // PageHeading has a use case where it outputs an empty node
+  // but that empty node should not take up space
+  &:empty {
+    padding: 0 !important;
+  }
+  &--breadcrumbs {
+    padding-top: 0;
   }
   &--row {
+    gap: var(--pf-t--global--spacer--md);
     @media (min-width: $screen-sm) {
       display: flex;
       flex-direction: row;
       justify-content: space-between;
     }
   }
-  &--detail {
-    border-bottom: var(--pf-t--global--border--width--divider--default) solid
-      var(--pf-t--global--border--color--default);
-    flex-shrink: 0; // do not allow to shrink
-  }
-  // Positioned after --detail to take precedence, since they will be a siblings
-  &--breadcrumbs {
-    margin-top: 0;
-  }
 }
diff --git a/frontend/public/components/_resource-dropdown.scss b/frontend/public/components/_resource-dropdown.scss
index c3ab075d859..05cef354fa7 100644
--- a/frontend/public/components/_resource-dropdown.scss
+++ b/frontend/public/components/_resource-dropdown.scss
@@ -14,6 +14,7 @@
 .co-search-group {
   display: flex;
   flex-direction: column;
+  margin: var(--pf-t--global--spacer--lg) 0 0;
   @media (min-width: $screen-xs-min) {
     flex-direction: row;
   }
diff --git a/frontend/public/components/_search.scss b/frontend/public/components/_search.scss
index d2820a2ef37..88d3d1aac9f 100644
--- a/frontend/public/components/_search.scss
+++ b/frontend/public/components/_search.scss
@@ -2,6 +2,6 @@
   .co-m-pane__filter-bar {
     // Reduce the margin between the accordion toggle and the create button
     // so that the space is equal above and below the button.
-    margin-top: $pf-v6-global-gutter;
+    margin-top: $pf-v6-global-gutter-y;
   }
 }
diff --git a/frontend/public/components/alert-manager.tsx b/frontend/public/components/alert-manager.tsx
index 2a3405cdbe1..0a0d70f97a9 100644
--- a/frontend/public/components/alert-manager.tsx
+++ b/frontend/public/components/alert-manager.tsx
@@ -5,6 +5,7 @@ import { sortable } from '@patternfly/react-table';
 import { Button } from '@patternfly/react-core';
 import { PencilAltIcon } from '@patternfly/react-icons/dist/esm/icons/pencil-alt-icon';
 
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { referenceForModel, K8sResourceKind } from '../module/k8s';
 import { ListPage, DetailsPage, Table, TableData, RowFunctionArgs } from './factory';
 import { SectionHeading, LabelList, navFactory, ResourceLink, Selector, pluralize } from './utils';
@@ -23,48 +24,46 @@ const Details: React.SFC<DetailsProps> = (props) => {
   const { t } = useTranslation();
 
   return (
-    <div>
-      <div className="co-m-pane__body">
-        <SectionHeading text={t('public~Alertmanager details')} />
-        <div className="row">
-          <div className="col-sm-6 col-xs-12">
-            <dl className="co-m-pane__details">
-              <dt>Name</dt>
-              <dd>{metadata.name}</dd>
-              <dt>Labels</dt>
+    <PaneBody>
+      <SectionHeading text={t('public~Alertmanager details')} />
+      <div className="row">
+        <div className="col-sm-6 col-xs-12">
+          <dl className="co-m-pane__details">
+            <dt>Name</dt>
+            <dd>{metadata.name}</dd>
+            <dt>Labels</dt>
+            <dd>
+              <LabelList kind="Alertmanager" labels={metadata.labels} />
+            </dd>
+            {spec.nodeSelector && <dt>{t('public~Alertmanager node selector')}</dt>}
+            {spec.nodeSelector && (
               <dd>
-                <LabelList kind="Alertmanager" labels={metadata.labels} />
+                <Selector selector={spec.nodeSelector} kind="Node" />
               </dd>
-              {spec.nodeSelector && <dt>{t('public~Alertmanager node selector')}</dt>}
-              {spec.nodeSelector && (
-                <dd>
-                  <Selector selector={spec.nodeSelector} kind="Node" />
-                </dd>
-              )}
-            </dl>
-          </div>
-          <div className="col-sm-6 col-xs-12">
-            <dl className="co-m-pane__details">
-              <dt>Version</dt>
-              <dd>{spec.version}</dd>
-              <dt>Replicas</dt>
-              <dd>
-                <Button
-                  icon={<PencilAltIcon />}
-                  iconPosition="end"
-                  variant="link"
-                  type="button"
-                  isInline
-                  onClick={openReplicaCountModal}
-                >
-                  {pluralize(spec.replicas, 'pod')}
-                </Button>
-              </dd>
-            </dl>
-          </div>
+            )}
+          </dl>
+        </div>
+        <div className="col-sm-6 col-xs-12">
+          <dl className="co-m-pane__details">
+            <dt>Version</dt>
+            <dd>{spec.version}</dd>
+            <dt>Replicas</dt>
+            <dd>
+              <Button
+                icon={<PencilAltIcon />}
+                iconPosition="end"
+                variant="link"
+                type="button"
+                isInline
+                onClick={openReplicaCountModal}
+              >
+                {pluralize(spec.replicas, 'pod')}
+              </Button>
+            </dd>
+          </dl>
         </div>
       </div>
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/public/components/api-explorer.tsx b/frontend/public/components/api-explorer.tsx
index 11e2f36afaf..e133ec9d7ee 100644
--- a/frontend/public/components/api-explorer.tsx
+++ b/frontend/public/components/api-explorer.tsx
@@ -26,6 +26,7 @@ import { ALL_NAMESPACES_KEY, FLAGS, APIError, getTitleForNodeKind } from '@conso
 import { useExactSearch } from '@console/app/src/components/user-preferences/search/useExactSearch';
 import { PageTitleContext } from '@console/shared/src/components/pagetitle/PageTitleContext';
 import { Page, PageHeading, useAccessReview } from '@console/internal/components/utils';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 
 import { LocalResourceAccessReviewsModel, ResourceAccessReviewsModel } from '../models';
 import {
@@ -315,63 +316,61 @@ const APIResourcesList = compose(
   ];
 
   return (
-    <>
-      <div className="co-m-pane__body co-m-pane__body--no-top-margin">
-        <Toolbar className="pf-m-toggle-group-container">
-          <ToolbarContent>
-            <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="md">
-              <ToolbarItem>
-                <Dropdown
-                  autocompleteFilter={autocompleteGroups}
-                  items={groupOptions}
-                  onChange={onGroupSelected}
-                  selectedKey={groupFilter}
-                  spacerBefore={groupSpacer}
-                  title={groupOptions[groupFilter]}
-                  dropDownClassName="dropdown--full-width"
-                />
-              </ToolbarItem>
-              <ToolbarItem>
-                <Dropdown
-                  items={versionOptions}
-                  onChange={onVersionSelected}
-                  selectedKey={versionFilter}
-                  spacerBefore={versionSpacer}
-                  title={versionOptions[versionFilter]}
-                  dropDownClassName="dropdown--full-width"
-                />
-              </ToolbarItem>
-              <ToolbarItem>
-                <Dropdown
-                  items={scopeOptions}
-                  onChange={onScopeSelected}
-                  selectedKey={scopeFilter}
-                  spacerBefore={scopeSpacer}
-                  title={scopeOptions[scopeFilter]}
-                  dropDownClassName="dropdown--full-width"
-                />
-              </ToolbarItem>
-            </ToolbarToggleGroup>
+    <PaneBody>
+      <Toolbar className="pf-m-toggle-group-container">
+        <ToolbarContent>
+          <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="md">
             <ToolbarItem>
-              <TextFilter
-                value={textFilter}
-                label={t('public~by kind')}
-                onChange={(_event, value) => setTextFilter(value)}
+              <Dropdown
+                autocompleteFilter={autocompleteGroups}
+                items={groupOptions}
+                onChange={onGroupSelected}
+                selectedKey={groupFilter}
+                spacerBefore={groupSpacer}
+                title={groupOptions[groupFilter]}
+                dropDownClassName="dropdown--full-width"
               />
             </ToolbarItem>
-          </ToolbarContent>
-        </Toolbar>
-        <Table
-          EmptyMsg={EmptyAPIResourcesMsg}
-          Header={APIResourceHeader}
-          Rows={APIResourceRows}
-          aria-label={t('public~API resources')}
-          data={sortedResources}
-          loaded={!!models.size}
-          virtualize={false}
-        />
-      </div>
-    </>
+            <ToolbarItem>
+              <Dropdown
+                items={versionOptions}
+                onChange={onVersionSelected}
+                selectedKey={versionFilter}
+                spacerBefore={versionSpacer}
+                title={versionOptions[versionFilter]}
+                dropDownClassName="dropdown--full-width"
+              />
+            </ToolbarItem>
+            <ToolbarItem>
+              <Dropdown
+                items={scopeOptions}
+                onChange={onScopeSelected}
+                selectedKey={scopeFilter}
+                spacerBefore={scopeSpacer}
+                title={scopeOptions[scopeFilter]}
+                dropDownClassName="dropdown--full-width"
+              />
+            </ToolbarItem>
+          </ToolbarToggleGroup>
+          <ToolbarItem>
+            <TextFilter
+              value={textFilter}
+              label={t('public~by kind')}
+              onChange={(_event, value) => setTextFilter(value)}
+            />
+          </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+      <Table
+        EmptyMsg={EmptyAPIResourcesMsg}
+        Header={APIResourceHeader}
+        Rows={APIResourceRows}
+        aria-label={t('public~API resources')}
+        data={sortedResources}
+        loaded={!!models.size}
+        virtualize={false}
+      />
+    </PaneBody>
   );
 });
 APIResourcesList.displayName = 'APIResourcesList';
@@ -394,7 +393,7 @@ const APIResourceDetails: React.FC<APIResourceTabProps> = ({ customData: { kindO
   const description = getResourceDescription(kindObj);
   const { t } = useTranslation();
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <dl className="co-m-pane__details">
         <dt>{t('public~Kind')}</dt>
         <dd>{kind}</dd>
@@ -427,16 +426,16 @@ const APIResourceDetails: React.FC<APIResourceTabProps> = ({ customData: { kindO
           </>
         )}
       </dl>
-    </div>
+    </PaneBody>
   );
 };
 
 const scrollTop = () => (document.getElementById('content-scrollable').scrollTop = 0);
 const APIResourceSchema: React.FC<APIResourceTabProps> = ({ customData: { kindObj } }) => {
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <ExploreType kindObj={kindObj} scrollTop={scrollTop} />
-    </div>
+    </PaneBody>
   );
 };
 
@@ -626,7 +625,7 @@ const APIResourceAccessReview: React.FC<APIResourceTabProps> = ({
           />
         </div>
       </div>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <RowFilter
           allSelected={allSelected}
           itemCount={itemCount}
@@ -691,7 +690,7 @@ const APIResourceAccessReview: React.FC<APIResourceTabProps> = ({
           loaded
           virtualize={false}
         />
-      </div>
+      </PaneBody>
     </>
   );
 };
@@ -722,9 +721,9 @@ const APIResourcePage_ = (props) => {
     return kindsInFlight ? (
       <LoadingBox />
     ) : (
-      <div className="co-m-pane__body">
+      <PaneBody>
         <PageHeading title={t('public~404: Not found')} centerText />
-      </div>
+      </PaneBody>
     );
   }
 
@@ -784,7 +783,6 @@ const APIResourcePage_ = (props) => {
         <PageHeading
           title={<div data-test-id="api-explorer-resource-title">{kindObj.label}</div>}
           breadcrumbs={breadcrumbs}
-          detail
         />
         <HorizontalNav pages={pages} customData={{ kindObj, namespace }} noStatusBox />
       </PageTitleContext.Provider>
diff --git a/frontend/public/components/app.jsx b/frontend/public/components/app.jsx
index 5a8ed43aecb..11b04ef4cc4 100644
--- a/frontend/public/components/app.jsx
+++ b/frontend/public/components/app.jsx
@@ -56,7 +56,7 @@ import { useFlag } from '@console/shared/src/hooks/flag';
 import Lightspeed from '@console/app/src/components/lightspeed/Lightspeed';
 import { ThemeProvider } from './ThemeProvider';
 import { init as initI18n } from '../i18n';
-import { Page, SkipToContent, AlertVariant } from '@patternfly/react-core';
+import { AlertVariant, Flex, Page, SkipToContent } from '@patternfly/react-core';
 import { AuthenticationErrorPage } from './error';
 import '../vendor.scss';
 import '../style.scss';
@@ -217,7 +217,11 @@ const App = (props) => {
       <Helmet titleTemplate={`%s · ${productName}`} defaultTitle={productName} />
       <ConsoleNotifier location="BannerTop" />
       <QuickStartDrawer>
-        <div id="app-content" className="co-m-app__content">
+        <Flex
+          id="app-content"
+          direction={{ default: 'column' }}
+          style={{ flex: '1 0 auto', height: '100%' }}
+        >
           <Page
             isContentFilled
             id="content"
@@ -249,6 +253,7 @@ const App = (props) => {
               />
             }
             isNotificationDrawerExpanded={isNotificationDrawerExpanded}
+            style={{ flex: '1', height: '0' }}
           >
             <AppContents />
           </Page>
@@ -257,7 +262,7 @@ const App = (props) => {
           )}
           <CloudShell />
           <GuidedTour />
-        </div>
+        </Flex>
         <div id="modal-container" role="dialog" aria-modal="true" aria-label={t('public~Modal')} />
       </QuickStartDrawer>
       <ConsoleNotifier location="BannerBottom" />
diff --git a/frontend/public/components/build-config.tsx b/frontend/public/components/build-config.tsx
index 197f7c6314b..7f351186d71 100644
--- a/frontend/public/components/build-config.tsx
+++ b/frontend/public/components/build-config.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { useParams, redirect } from 'react-router-dom-v5-compat';
 import * as classNames from 'classnames';
 import { sortable } from '@patternfly/react-table';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import {
   K8sResourceKind,
   K8sResourceKindReference,
@@ -109,7 +110,7 @@ export const BuildConfigsDetails: React.SFC<BuildConfigsDetailsProps> = ({ obj:
   const { t } = useTranslation();
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         {hasPipeline && <PipelineBuildStrategyAlert obj={buildConfig} />}
         <SectionHeading text={t('public~BuildConfig details')} />
         <div className="row">
@@ -120,7 +121,7 @@ export const BuildConfigsDetails: React.SFC<BuildConfigsDetailsProps> = ({ obj:
             <BuildStrategy resource={buildConfig} />
           </div>
         </div>
-      </div>
+      </PaneBody>
       <WebhookTriggers resource={buildConfig} />
       <BuildHooks resource={buildConfig} />
     </>
diff --git a/frontend/public/components/build-logs.jsx b/frontend/public/components/build-logs.jsx
index 911a08187ff..90eaf0d6683 100644
--- a/frontend/public/components/build-logs.jsx
+++ b/frontend/public/components/build-logs.jsx
@@ -8,6 +8,7 @@ import {
   LOG_SOURCE_WAITING,
 } from './utils/resource-log';
 import { ConsoleEmptyState } from '@console/shared/src/components/empty-state';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { getJenkinsLogURL, BuildPipelineLogLink } from './build-pipeline';
 import { BuildStrategyType } from './build';
 import { BuildPhase } from '../module/k8s/builds';
@@ -65,13 +66,13 @@ export class BuildLogs extends React.Component {
     const isPipeline = _.get(build, 'spec.strategy.type') === BuildStrategyType.JenkinsPipeline;
 
     return (
-      <div className="co-m-pane__body co-m-pane__body--full-height">
+      <PaneBody fullHeight>
         {isPipeline ? (
           <PipelineLogMessage build={build} />
         ) : (
           <ResourceLog resource={build} resourceStatus={this.state.status} />
         )}
-      </div>
+      </PaneBody>
     );
   }
 }
diff --git a/frontend/public/components/build.tsx b/frontend/public/components/build.tsx
index a93fa42251a..95eed6414dc 100644
--- a/frontend/public/components/build.tsx
+++ b/frontend/public/components/build.tsx
@@ -17,6 +17,7 @@ import {
 import { ONE_HOUR, ONE_MINUTE, Status, usePrometheusGate } from '@console/shared';
 import { ByteDataTypes } from '@console/shared/src/graph-helper/data-utils';
 import { getGroupVersionKindForModel } from '@console/dynamic-plugin-sdk/src/utils/k8s/k8s-ref';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import {
   K8sResourceKindReference,
   referenceFor,
@@ -271,7 +272,7 @@ export const BuildsDetails: React.SFC<BuildsDetailsProps> = ({ obj: build }) =>
     build.status.config?.name || build.metadata.labels?.[BUILDCONFIG_TO_BUILD_REFERENCE_LABEL];
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         {hasPipeline && <PipelineBuildStrategyAlert obj={build} />}
         <SectionHeading text={t('public~Build details')} />
         {hasPipeline && (
@@ -345,7 +346,7 @@ export const BuildsDetails: React.SFC<BuildsDetailsProps> = ({ obj: build }) =>
             </BuildStrategy>
           </div>
         </div>
-      </div>
+      </PaneBody>
       <BuildHooks resource={build} />
     </>
   );
diff --git a/frontend/public/components/catalog/_catalog.scss b/frontend/public/components/catalog/_catalog.scss
index b14deb1d403..4a6baa4e563 100644
--- a/frontend/public/components/catalog/_catalog.scss
+++ b/frontend/public/components/catalog/_catalog.scss
@@ -118,20 +118,11 @@ $catalog-tile-width: $co-m-catalog-tile-width;
   border-radius: var(--pf-t--global--border--radius--medium);
   display: flex;
   flex: 1;
-  margin: 0 $pf-v6-global-gutter $pf-v6-global-gutter;
-  padding: $pf-v6-global-gutter 0;
-  @media (min-width: $pf-v6-global--breakpoint--xl) {
-    margin-bottom: $pf-v6-global-gutter--md;
-    margin-left: $pf-v6-global-gutter--md;
-    margin-right: $pf-v6-global-gutter--md;
-  }
+  margin: 0 $pf-v6-global-gutter-x $pf-v6-global-gutter-y;
+  padding: $pf-v6-global-gutter-y 0;
 
   &__alert {
-    margin: 0 $pf-v6-global-gutter $pf-v6-global-gutter;
-    @media (min-width: $pf-v6-global--breakpoint--xl) {
-      margin-left: $pf-v6-global-gutter--md;
-      margin-right: $pf-v6-global-gutter--md;
-    }
+    margin: 0 $pf-v6-global-gutter-x $pf-v6-global-gutter-y;
   }
 
   &__content {
@@ -140,12 +131,9 @@ $catalog-tile-width: $co-m-catalog-tile-width;
   }
 
   &__description {
-    margin-top: -10px;
-    padding: 0 $pf-v6-global-gutter $pf-v6-global-gutter;
-    @media (min-width: $pf-v6-global--breakpoint--xl) {
-      padding-left: $pf-v6-global-gutter--md;
-      padding-right: $pf-v6-global-gutter--md;
-    }
+    color: var(--pf-t--global--text--color--subtle);
+    margin-top: calc(#{$pf-v6-global-gutter-y} * -0.5);
+    padding: 0 $pf-v6-global-gutter-x $pf-v6-global-gutter-y;
   }
 
   &__filter {
@@ -166,12 +154,12 @@ $catalog-tile-width: $co-m-catalog-tile-width;
   }
 
   &__header {
-    margin: 0 $pf-v6-global-gutter--md 0;
+    margin: 0 $pf-v6-global-gutter-x;
   }
 
   &__heading {
     font-size: 16px;
-    margin: 0 0 $pf-v6-global-gutter;
+    margin: 0 0 $pf-v6-global-gutter-y;
   }
 
   &__hint {
@@ -287,7 +275,7 @@ $catalog-tile-width: $co-m-catalog-tile-width;
 
   &__tabs {
     flex: 0 0 220px;
-    margin: 0 $pf-v6-global-gutter 0 0;
+    margin: 0 $pf-v6-global-gutter-x 0 0;
   }
 }
 
diff --git a/frontend/public/components/cluster-settings/basicauth-idp-form.tsx b/frontend/public/components/cluster-settings/basicauth-idp-form.tsx
index fa9ed7f7b51..f88b038de58 100644
--- a/frontend/public/components/cluster-settings/basicauth-idp-form.tsx
+++ b/frontend/public/components/cluster-settings/basicauth-idp-form.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom-v5-compat';
 import { ActionGroup, Button } from '@patternfly/react-core';
 
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { SecretModel, ConfigMapModel } from '../../models';
 import { IdentityProvider, k8sCreate, OAuthKind } from '../../module/k8s';
 import { ButtonBar, AsyncComponent, PageHeading } from '../utils';
@@ -174,8 +175,8 @@ export const AddBasicAuthPage: React.FC = () => {
           'public~Basic authentication is a generic backend integration mechanism that allows users to authenticate with credentials validated against a remote identity provider.',
         )}
       />
-      <div className="co-m-pane__body">
-        <form onSubmit={submit} name="form" className="co-m-pane__body-group">
+      <PaneBody>
+        <form onSubmit={submit} name="form">
           <IDPNameInput value={name} onChange={(e) => setName(e.currentTarget.value)} />
           <div className="form-group">
             <label className="control-label co-required" htmlFor="url">
@@ -231,7 +232,7 @@ export const AddBasicAuthPage: React.FC = () => {
             </ActionGroup>
           </ButtonBar>
         </form>
-      </div>
+      </PaneBody>
     </div>
   );
 };
diff --git a/frontend/public/components/cluster-settings/cluster-operator.tsx b/frontend/public/components/cluster-settings/cluster-operator.tsx
index 6d65c778a29..a0598177fd7 100644
--- a/frontend/public/components/cluster-settings/cluster-operator.tsx
+++ b/frontend/public/components/cluster-settings/cluster-operator.tsx
@@ -8,6 +8,7 @@ import { SyncAltIcon } from '@patternfly/react-icons/dist/esm/icons/sync-alt-ico
 import { UnknownIcon } from '@patternfly/react-icons/dist/esm/icons/unknown-icon';
 import { useTranslation } from 'react-i18next';
 
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { ClusterOperatorModel } from '../../models';
 import { DetailsPage, ListPage, Table, TableData, RowFunctionArgs } from '../factory';
 import { Conditions } from '../conditions';
@@ -152,7 +153,7 @@ const UpdateInProgressAlert: React.FC<UpdateInProgressAlertProps> = ({ cv }) =>
   return (
     <>
       {updateCondition && (
-        <div className="co-m-pane__body co-m-pane__body--section-heading">
+        <PaneBody sectionHeading>
           <Alert
             isInline
             className="co-alert"
@@ -161,7 +162,7 @@ const UpdateInProgressAlert: React.FC<UpdateInProgressAlertProps> = ({ cv }) =>
           >
             <ClusterVersionConditionsLink cv={cv} />
           </Alert>
-        </div>
+        </PaneBody>
       )}
     </>
   );
@@ -235,7 +236,7 @@ const ClusterOperatorDetails: React.FC<ClusterOperatorDetailsProps> = ({ obj })
   const { t } = useTranslation();
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading text={t('public~ClusterOperator details')} />
         <div className="row">
           <div className="col-sm-6">
@@ -260,15 +261,15 @@ const ClusterOperatorDetails: React.FC<ClusterOperatorDetailsProps> = ({ obj })
             </dl>
           </div>
         </div>
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={t('public~Conditions')} />
         <Conditions conditions={conditions} />
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={t('public~Operand versions')} />
         <OperandVersions versions={versions} />
-      </div>
+      </PaneBody>
     </>
   );
 };
diff --git a/frontend/public/components/cluster-settings/cluster-settings.tsx b/frontend/public/components/cluster-settings/cluster-settings.tsx
index 6c48e5d2c32..931c60809ea 100644
--- a/frontend/public/components/cluster-settings/cluster-settings.tsx
+++ b/frontend/public/components/cluster-settings/cluster-settings.tsx
@@ -29,6 +29,7 @@ import {
   ClusterServiceVersionModel,
 } from '@console/operator-lifecycle-manager';
 import { WatchK8sResource } from '@console/dynamic-plugin-sdk';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 
 import { ClusterOperatorPage } from './cluster-operator';
 import {
@@ -923,7 +924,7 @@ export const ClusterVersionDetailsTable: React.FC<ClusterVersionDetailsTableProp
 
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <div className="co-m-pane__body-group">
           <ClusterSettingsAlerts cv={cv} machineConfigPools={machineConfigPools} />
           <div className="co-cluster-settings">
@@ -1008,84 +1009,82 @@ export const ClusterVersionDetailsTable: React.FC<ClusterVersionDetailsTableProp
             </div>
           </div>
         </div>
-        <div className="co-m-pane__body-group">
-          <dl className="co-m-pane__details">
-            {window.SERVER_FLAGS.branding !== 'okd' && window.SERVER_FLAGS.branding !== 'azure' && (
-              <>
-                <dt>{t('public~Subscription')}</dt>
-                <dd>
-                  <ExternalLink
-                    text={t('public~OpenShift Cluster Manager')}
-                    href={getOCMLink(clusterID)}
-                  />
-                  .
-                </dd>
-              </>
-            )}
-            <ServiceLevel
-              clusterID={clusterID}
-              loading={
-                <>
-                  <dt>{serviceLevelTitle}</dt>
-                  <dd>
-                    <ServiceLevelLoading />
-                  </dd>
-                </>
-              }
-            >
+        <dl className="co-m-pane__details">
+          {window.SERVER_FLAGS.branding !== 'okd' && window.SERVER_FLAGS.branding !== 'azure' && (
+            <>
+              <dt>{t('public~Subscription')}</dt>
+              <dd>
+                <ExternalLink
+                  text={t('public~OpenShift Cluster Manager')}
+                  href={getOCMLink(clusterID)}
+                />
+                .
+              </dd>
+            </>
+          )}
+          <ServiceLevel
+            clusterID={clusterID}
+            loading={
               <>
                 <dt>{serviceLevelTitle}</dt>
                 <dd>
-                  <ServiceLevelText clusterID={clusterID} />
+                  <ServiceLevelLoading />
                 </dd>
               </>
-            </ServiceLevel>
-            <dt>{t('public~Cluster ID')}</dt>
-            <dd className="co-break-all co-select-to-copy" data-test-id="cv-details-table-cid">
-              {clusterID}
-            </dd>
-            <dt>{t('public~Desired release image')}</dt>
-            <dd className="co-break-all co-select-to-copy" data-test-id="cv-details-table-image">
-              {imageParts.length === 2 ? (
-                <>
-                  <span className="text-muted">{imageParts[0]}@</span>
-                  {imageParts[1]}
-                </>
-              ) : (
-                desiredImage || '-'
-              )}
-            </dd>
-            <dt>{t('public~Cluster version configuration')}</dt>
-            <dd>
-              <ResourceLink kind={referenceForModel(ClusterVersionModel)} name={cv.metadata.name} />
-            </dd>
-            <UpstreamConfigDetailsItem resource={cv} />
-            {autoscalers && canUpgrade && (
+            }
+          >
+            <>
+              <dt>{serviceLevelTitle}</dt>
+              <dd>
+                <ServiceLevelText clusterID={clusterID} />
+              </dd>
+            </>
+          </ServiceLevel>
+          <dt>{t('public~Cluster ID')}</dt>
+          <dd className="co-break-all co-select-to-copy" data-test-id="cv-details-table-cid">
+            {clusterID}
+          </dd>
+          <dt>{t('public~Desired release image')}</dt>
+          <dd className="co-break-all co-select-to-copy" data-test-id="cv-details-table-image">
+            {imageParts.length === 2 ? (
               <>
-                <dt data-test="cv-autoscaler">{t('public~Cluster autoscaler')}</dt>
-                <dd>
-                  {_.isEmpty(autoscalers) ? (
-                    <Link to={`${resourcePathFromModel(ClusterAutoscalerModel)}/~new`}>
-                      <AddCircleOIcon className="co-icon-space-r" />
-                      {t('public~Create autoscaler')}
-                    </Link>
-                  ) : (
-                    autoscalers.map((autoscaler) => (
-                      <div key={autoscaler.metadata.uid}>
-                        <ResourceLink
-                          kind={clusterAutoscalerReference}
-                          name={autoscaler.metadata.name}
-                        />
-                      </div>
-                    ))
-                  )}
-                </dd>
+                <span className="text-muted">{imageParts[0]}@</span>
+                {imageParts[1]}
               </>
+            ) : (
+              desiredImage || '-'
             )}
-          </dl>
-        </div>
-      </div>
-      <div className="co-m-pane__body">
+          </dd>
+          <dt>{t('public~Cluster version configuration')}</dt>
+          <dd>
+            <ResourceLink kind={referenceForModel(ClusterVersionModel)} name={cv.metadata.name} />
+          </dd>
+          <UpstreamConfigDetailsItem resource={cv} />
+          {autoscalers && canUpgrade && (
+            <>
+              <dt data-test="cv-autoscaler">{t('public~Cluster autoscaler')}</dt>
+              <dd>
+                {_.isEmpty(autoscalers) ? (
+                  <Link to={`${resourcePathFromModel(ClusterAutoscalerModel)}/~new`}>
+                    <AddCircleOIcon className="co-icon-space-r" />
+                    {t('public~Create autoscaler')}
+                  </Link>
+                ) : (
+                  autoscalers.map((autoscaler) => (
+                    <div key={autoscaler.metadata.uid}>
+                      <ResourceLink
+                        kind={clusterAutoscalerReference}
+                        name={autoscaler.metadata.name}
+                      />
+                    </div>
+                  ))
+                )}
+              </dd>
+            </>
+          )}
+        </dl>
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={t('public~Update history')} />
         {_.isEmpty(history) ? (
           <EmptyBox label={t('public~History')} />
@@ -1151,7 +1150,7 @@ export const ClusterVersionDetailsTable: React.FC<ClusterVersionDetailsTableProp
             </div>
           </>
         )}
-      </div>
+      </PaneBody>
     </>
   );
 };
diff --git a/frontend/public/components/cluster-settings/cluster-version.tsx b/frontend/public/components/cluster-settings/cluster-version.tsx
index 8ad5321a276..0a1eefaf896 100644
--- a/frontend/public/components/cluster-settings/cluster-version.tsx
+++ b/frontend/public/components/cluster-settings/cluster-version.tsx
@@ -3,6 +3,7 @@ import * as _ from 'lodash-es';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom-v5-compat';
 import { useCanClusterUpgrade } from '@console/shared';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 
 import { ClusterVersionModel } from '../../models';
 import { DetailsPage } from '../factory';
@@ -26,16 +27,16 @@ const ClusterVersionDetails: React.FC<ClusterVersionDetailsProps> = ({ obj }) =>
   const conditions = _.get(obj, 'status.conditions', []);
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading text={t('public~ClusterVersion details')} />
         <ResourceSummary resource={obj} canUpdateResource={canUpgrade}>
           <UpstreamConfigDetailsItem resource={obj} />
         </ResourceSummary>
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={t('public~Conditions')} id="conditions" />
         <Conditions conditions={conditions} />
-      </div>
+      </PaneBody>
     </>
   );
 };
diff --git a/frontend/public/components/cluster-settings/github-idp-form.tsx b/frontend/public/components/cluster-settings/github-idp-form.tsx
index 1095eadcbd4..cf6ff59aa8d 100644
--- a/frontend/public/components/cluster-settings/github-idp-form.tsx
+++ b/frontend/public/components/cluster-settings/github-idp-form.tsx
@@ -4,6 +4,7 @@ import { useTranslation, Trans } from 'react-i18next';
 import { useNavigate } from 'react-router-dom-v5-compat';
 import { ActionGroup, Button, Title } from '@patternfly/react-core';
 
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { SecretModel, ConfigMapModel } from '../../models';
 import { IdentityProvider, k8sCreate, OAuthKind } from '../../module/k8s';
 import { ButtonBar, ListInput, PageHeading } from '../utils';
@@ -158,8 +159,8 @@ export const AddGitHubPage = () => {
           'public~You can use the GitHub integration to connect to either GitHub or GitHub Enterprise. For GitHub Enterprise, you must provide the hostname of your instance and can optionally provide a CA certificate bundle to use in requests to the server.',
         )}
       />
-      <div className="co-m-pane__body">
-        <form onSubmit={submit} name="form" className="co-m-pane__body-group">
+      <PaneBody>
+        <form onSubmit={submit} name="form">
           <IDPNameInput value={name} onChange={(e) => setName(e.currentTarget.value)} />
           <div className="form-group">
             <label className="control-label co-required" htmlFor="client-id">
@@ -260,7 +261,7 @@ export const AddGitHubPage = () => {
             </ActionGroup>
           </ButtonBar>
         </form>
-      </div>
+      </PaneBody>
     </div>
   );
 };
diff --git a/frontend/public/components/cluster-settings/gitlab-idp-form.tsx b/frontend/public/components/cluster-settings/gitlab-idp-form.tsx
index 013f1ae347a..70629669eea 100644
--- a/frontend/public/components/cluster-settings/gitlab-idp-form.tsx
+++ b/frontend/public/components/cluster-settings/gitlab-idp-form.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom-v5-compat';
 import { ActionGroup, Button } from '@patternfly/react-core';
 
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { SecretModel, ConfigMapModel } from '../../models';
 import { IdentityProvider, k8sCreate, OAuthKind } from '../../module/k8s';
 import { ButtonBar, PageHeading } from '../utils';
@@ -150,8 +151,8 @@ export const AddGitLabPage = () => {
           'public~You can use GitLab integration for users authenticating with GitLab credentials.',
         )}
       />
-      <div className="co-m-pane__body">
-        <form onSubmit={submit} name="form" className="co-m-pane__body-group">
+      <PaneBody>
+        <form onSubmit={submit} name="form">
           <IDPNameInput value={name} onChange={(e) => setName(e.currentTarget.value)} />
           <div className="form-group">
             <label className="control-label co-required" htmlFor="url">
@@ -211,7 +212,7 @@ export const AddGitLabPage = () => {
             </ActionGroup>
           </ButtonBar>
         </form>
-      </div>
+      </PaneBody>
     </div>
   );
 };
diff --git a/frontend/public/components/cluster-settings/global-config.tsx b/frontend/public/components/cluster-settings/global-config.tsx
index 1c2b222c591..2c7e598b558 100644
--- a/frontend/public/components/cluster-settings/global-config.tsx
+++ b/frontend/public/components/cluster-settings/global-config.tsx
@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom-v5-compat';
 import { AlertVariant } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
 import { useResolvedExtensions } from '@console/dynamic-plugin-sdk/src/api/useResolvedExtensions';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { RootState } from '../../redux';
 import {
   K8sKind,
@@ -179,7 +180,7 @@ export const GlobalConfigPage: React.FC = () => {
   const showAPIGroup = (item) => groupedItems?.[item]?.length > 1;
 
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       {!loading && (
         <>
           <p className="co-help-text co-cluster-paragraph">
@@ -219,6 +220,6 @@ export const GlobalConfigPage: React.FC = () => {
             </div>
           </div>
         ))}
-    </div>
+    </PaneBody>
   );
 };
diff --git a/frontend/public/components/cluster-settings/google-idp-form.tsx b/frontend/public/components/cluster-settings/google-idp-form.tsx
index 1b57011e28b..10d119cc408 100644
--- a/frontend/public/components/cluster-settings/google-idp-form.tsx
+++ b/frontend/public/components/cluster-settings/google-idp-form.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom-v5-compat';
 import { ActionGroup, Button } from '@patternfly/react-core';
 
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { SecretModel } from '../../models';
 import { IdentityProvider, k8sCreate, K8sResourceKind, OAuthKind } from '../../module/k8s';
 import { ButtonBar, PageHeading } from '../utils';
@@ -111,8 +112,8 @@ export const AddGooglePage = () => {
           'public~You can use Google integration for users authenticating with Google credentials.',
         )}
       />
-      <div className="co-m-pane__body">
-        <form onSubmit={submit} name="form" className="co-m-pane__body-group">
+      <PaneBody>
+        <form onSubmit={submit} name="form">
           <IDPNameInput value={name} onChange={(e) => setName(e.currentTarget.value)} />
           <div className="form-group">
             <label className="control-label co-required" htmlFor="client-id">
@@ -171,7 +172,7 @@ export const AddGooglePage = () => {
             </ActionGroup>
           </ButtonBar>
         </form>
-      </div>
+      </PaneBody>
     </div>
   );
 };
diff --git a/frontend/public/components/cluster-settings/htpasswd-idp-form.tsx b/frontend/public/components/cluster-settings/htpasswd-idp-form.tsx
index f1e4b46e7ce..dd59e39f5b9 100644
--- a/frontend/public/components/cluster-settings/htpasswd-idp-form.tsx
+++ b/frontend/public/components/cluster-settings/htpasswd-idp-form.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom-v5-compat';
 import { ActionGroup, Button } from '@patternfly/react-core';
 
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { SecretModel } from '../../models';
 import { IdentityProvider, k8sCreate, K8sResourceKind, OAuthKind } from '../../module/k8s';
 import { AsyncComponent, ButtonBar, PageHeading } from '../utils';
@@ -118,8 +119,8 @@ export const AddHTPasswdPage = () => {
           'public~HTPasswd validates usernames and passwords against a flat file generated using the htpasswd command.',
         )}
       />
-      <div className="co-m-pane__body">
-        <form onSubmit={submit} name="form" className="co-m-pane__body-group">
+      <PaneBody>
+        <form onSubmit={submit} name="form">
           <IDPNameInput value={name} onChange={(e) => setName(e.currentTarget.value)} />
           <div className="form-group">
             <DroppableFileInput
@@ -145,7 +146,7 @@ export const AddHTPasswdPage = () => {
             </ActionGroup>
           </ButtonBar>
         </form>
-      </div>
+      </PaneBody>
     </div>
   );
 };
diff --git a/frontend/public/components/cluster-settings/keystone-idp-form.tsx b/frontend/public/components/cluster-settings/keystone-idp-form.tsx
index 8f71238f796..93b67cca42d 100644
--- a/frontend/public/components/cluster-settings/keystone-idp-form.tsx
+++ b/frontend/public/components/cluster-settings/keystone-idp-form.tsx
@@ -4,6 +4,7 @@ import * as _ from 'lodash-es';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom-v5-compat';
 import { ActionGroup, Button } from '@patternfly/react-core';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { SecretModel, ConfigMapModel } from '../../models';
 import { IdentityProvider, k8sCreate, OAuthKind } from '../../module/k8s';
 import { ButtonBar, AsyncComponent, PageHeading } from '../utils';
@@ -176,8 +177,8 @@ export const AddKeystonePage = () => {
           'public~Adding Keystone enables shared authentication with an OpenStack server configured to store users in an internal Keystone database.',
         )}
       />
-      <div className="co-m-pane__body">
-        <form onSubmit={submit} name="form" className="co-m-pane__body-group">
+      <PaneBody>
+        <form onSubmit={submit} name="form">
           <IDPNameInput value={name} onChange={(e) => setName(e.currentTarget.value)} />
           <div className="form-group">
             <label className="control-label co-required" htmlFor="domain-name">
@@ -247,7 +248,7 @@ export const AddKeystonePage = () => {
             </ActionGroup>
           </ButtonBar>
         </form>
-      </div>
+      </PaneBody>
     </div>
   );
 };
diff --git a/frontend/public/components/cluster-settings/ldap-idp-form.tsx b/frontend/public/components/cluster-settings/ldap-idp-form.tsx
index 45de505d10f..074c89dd31e 100644
--- a/frontend/public/components/cluster-settings/ldap-idp-form.tsx
+++ b/frontend/public/components/cluster-settings/ldap-idp-form.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom-v5-compat';
 import { ActionGroup, Button, Title } from '@patternfly/react-core';
 
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { ConfigMapModel, SecretModel } from '../../models';
 import { IdentityProvider, k8sCreate, OAuthKind } from '../../module/k8s';
 import { ButtonBar, ListInput, PageHeading } from '../utils';
@@ -168,8 +169,8 @@ export const AddLDAPPage = () => {
     <div className="co-m-pane__form">
       <DocumentTitle>{title}</DocumentTitle>
       <PageHeading title={title} helpText={t('public~Integrate with an LDAP identity provider.')} />
-      <div className="co-m-pane__body">
-        <form onSubmit={submit} name="form" className="co-m-pane__body-group">
+      <PaneBody>
+        <form onSubmit={submit} name="form">
           <IDPNameInput value={name} onChange={(e) => setName(e.currentTarget.value)} />
           <div className="form-group">
             <label className="control-label co-required" htmlFor="url">
@@ -278,7 +279,7 @@ export const AddLDAPPage = () => {
             </ActionGroup>
           </ButtonBar>
         </form>
-      </div>
+      </PaneBody>
     </div>
   );
 };
diff --git a/frontend/public/components/cluster-settings/openid-idp-form.tsx b/frontend/public/components/cluster-settings/openid-idp-form.tsx
index 88b8f669d18..31fcae86693 100644
--- a/frontend/public/components/cluster-settings/openid-idp-form.tsx
+++ b/frontend/public/components/cluster-settings/openid-idp-form.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom-v5-compat';
 import { ActionGroup, Button, Title } from '@patternfly/react-core';
 
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { SecretModel, ConfigMapModel } from '../../models';
 import { IdentityProvider, k8sCreate, OAuthKind } from '../../module/k8s';
 import { ButtonBar, ListInput, PageHeading } from '../utils';
@@ -162,8 +163,8 @@ export const AddOpenIDIDPPage = () => {
           'public~Integrate with an OpenID Connect identity provider using an Authorization Code Flow.',
         )}
       />
-      <div className="co-m-pane__body">
-        <form onSubmit={submit} name="form" className="co-m-pane__body-group">
+      <PaneBody>
+        <form onSubmit={submit} name="form">
           <IDPNameInput value={name} onChange={(e) => setName(e.currentTarget.value)} />
           <div className="form-group">
             <label className="control-label co-required" htmlFor="client-id">
@@ -265,7 +266,7 @@ export const AddOpenIDIDPPage = () => {
             </ActionGroup>
           </ButtonBar>
         </form>
-      </div>
+      </PaneBody>
     </div>
   );
 };
diff --git a/frontend/public/components/cluster-settings/related-objects.tsx b/frontend/public/components/cluster-settings/related-objects.tsx
index fb055834c8f..4f3cf826b00 100644
--- a/frontend/public/components/cluster-settings/related-objects.tsx
+++ b/frontend/public/components/cluster-settings/related-objects.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as classNames from 'classnames';
 import { sortable } from '@patternfly/react-table';
 import { useTranslation } from 'react-i18next';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { Table, TableData, RowFunctionArgs } from '../factory';
 import {
   referenceForModel,
@@ -91,7 +92,7 @@ const RelatedObjects: React.FC<RelatedObjectsProps> = (props) => {
     [findModel],
   );
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <Table
         {...props}
         Header={Header}
@@ -100,7 +101,7 @@ const RelatedObjects: React.FC<RelatedObjectsProps> = (props) => {
         aria-label={t('public~Related objects')}
         NoDataEmptyMsg={EmptyMessage}
       />
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/public/components/cluster-settings/request-header-idp-form.tsx b/frontend/public/components/cluster-settings/request-header-idp-form.tsx
index fe5a7369623..f8e34735c98 100644
--- a/frontend/public/components/cluster-settings/request-header-idp-form.tsx
+++ b/frontend/public/components/cluster-settings/request-header-idp-form.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom-v5-compat';
 import { ActionGroup, Button, Title } from '@patternfly/react-core';
 
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { ConfigMapModel } from '../../models';
 import { IdentityProvider, k8sCreate, OAuthKind, K8sResourceKind } from '../../module/k8s';
 import { ButtonBar, ListInput, PageHeading } from '../utils';
@@ -132,8 +133,8 @@ export const AddRequestHeaderPage = () => {
           'public~Use request header to identify users from request header values. It is typically used in combination with an authenticating proxy, which sets the request header value.',
         )}
       />
-      <div className="co-m-pane__body">
-        <form onSubmit={submit} name="form" className="co-m-pane__body-group">
+      <PaneBody>
+        <form onSubmit={submit} name="form">
           <IDPNameInput value={name} onChange={(e) => setName(e.currentTarget.value)} />
           <div className="co-form-section__separator" />
           <Title headingLevel="h3" className="pf-v6-u-mb-sm co-required">
@@ -224,7 +225,7 @@ export const AddRequestHeaderPage = () => {
             </ActionGroup>
           </ButtonBar>
         </form>
-      </div>
+      </PaneBody>
     </div>
   );
 };
diff --git a/frontend/public/components/command-line-tools.tsx b/frontend/public/components/command-line-tools.tsx
index 0bda235551f..b90f6751b4a 100644
--- a/frontend/public/components/command-line-tools.tsx
+++ b/frontend/public/components/command-line-tools.tsx
@@ -7,6 +7,7 @@ import { Button, Divider } from '@patternfly/react-core';
 import { FLAGS, useCopyLoginCommands } from '@console/shared';
 import PrimaryHeading from '@console/shared/src/components/heading/PrimaryHeading';
 import SecondaryHeading from '@console/shared/src/components/heading/SecondaryHeading';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { ExternalLink, Firehose, FirehoseResult } from './utils';
 import { connectToFlags } from '../reducers/connectToFlags';
 import { ConsoleCLIDownloadModel } from '../models';
@@ -58,7 +59,7 @@ export const CommandLineTools: React.FC<CommandLineToolsProps> = ({ obj }) => {
   return (
     <>
       <DocumentTitle>{t('public~Command Line Tools')}</DocumentTitle>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <PrimaryHeading>
           <div className="co-m-pane__name">{t('public~Command Line Tools')}</div>
         </PrimaryHeading>
@@ -75,7 +76,7 @@ export const CommandLineTools: React.FC<CommandLineToolsProps> = ({ obj }) => {
           </>
         )}
         {additionalCommandLineTools}
-      </div>
+      </PaneBody>
     </>
   );
 };
diff --git a/frontend/public/components/configmap.jsx b/frontend/public/components/configmap.jsx
index aac6fa658e0..a31c860e93a 100644
--- a/frontend/public/components/configmap.jsx
+++ b/frontend/public/components/configmap.jsx
@@ -2,6 +2,7 @@ import * as _ from 'lodash-es';
 import * as classNames from 'classnames';
 import { sortable } from '@patternfly/react-table';
 import { useTranslation } from 'react-i18next';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { DetailsPage, ListPage, Table, TableData } from './factory';
 import { ConfigMapData, ConfigMapBinaryData } from './configmap-and-secret-data';
 import {
@@ -109,22 +110,22 @@ const ConfigMapsDetailsPage = (props) => {
   const ConfigMapDetails = ({ obj: configMap }) => {
     return (
       <>
-        <div className="co-m-pane__body">
+        <PaneBody>
           <SectionHeading text={t('public~ConfigMap details')} />
           <div className="row">
             <div className="col-md-6">
               <ResourceSummary resource={configMap} />
             </div>
           </div>
-        </div>
-        <div className="co-m-pane__body">
+        </PaneBody>
+        <PaneBody>
           <SectionHeading text={t('public~Data')} />
           <ConfigMapData data={configMap.data} label={t('public~Data')} />
-        </div>
-        <div className="co-m-pane__body">
+        </PaneBody>
+        <PaneBody>
           <SectionHeading text={t('public~Binary data')} />
           <ConfigMapBinaryData data={configMap.binaryData} />
-        </div>
+        </PaneBody>
       </>
     );
   };
diff --git a/frontend/public/components/container.tsx b/frontend/public/components/container.tsx
index 1c6073b57b6..33f12525139 100644
--- a/frontend/public/components/container.tsx
+++ b/frontend/public/components/container.tsx
@@ -5,6 +5,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import { useParams, useLocation } from 'react-router-dom-v5-compat';
 import { CodeBlock, CodeBlockCode, Divider } from '@patternfly/react-core';
 import { Status } from '@console/shared';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import {
   ContainerLifecycle,
   ContainerLifecycleStage,
@@ -271,7 +272,7 @@ export const ContainerDetailsList: React.FC<ContainerDetailsListProps> = (props)
   const { imageName, imageTag } = getImageNameAndTag(container.image);
 
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <ScrollToTopOnMount />
 
       <div className="row">
@@ -398,7 +399,7 @@ export const ContainerDetailsList: React.FC<ContainerDetailsListProps> = (props)
           </div>
         </div>
       </div>
-    </div>
+    </PaneBody>
   );
 };
 ContainerDetailsList.displayName = 'ContainerDetailsList';
@@ -451,7 +452,6 @@ export const ContainerDetails: React.FC<ContainerDetailsProps> = (props) => {
   return (
     <>
       <PageHeading
-        detail={true}
         title={params.name}
         kind="Container"
         getResourceStatus={() => containerStateValue}
diff --git a/frontend/public/components/cron-job.tsx b/frontend/public/components/cron-job.tsx
index 73286ede6ca..d0bf2439f05 100644
--- a/frontend/public/components/cron-job.tsx
+++ b/frontend/public/components/cron-job.tsx
@@ -11,6 +11,7 @@ import {
   ActionMenuVariant,
   LazyActionMenu,
 } from '@console/shared';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import {
   DetailsPage,
   ListPage,
@@ -99,7 +100,7 @@ const CronJobDetails: React.FC<CronJobDetailsProps> = ({ obj: cronjob }) => {
   const { t } = useTranslation();
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <div className="row">
           <div className="col-md-6">
             <SectionHeading text={t('public~CronJob details')} />
@@ -157,11 +158,11 @@ const CronJobDetails: React.FC<CronJobDetailsProps> = ({ obj: cronjob }) => {
             </dl>
           </div>
         </div>
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={t('public~Containers')} />
         <ContainerTable containers={job.spec.template.spec.containers} />
-      </div>
+      </PaneBody>
     </>
   );
 };
@@ -197,7 +198,7 @@ export const CronJobPodsComponent: React.FC<CronJobPodsComponentProps> = ({ obj
   const { t } = useTranslation();
   const podFilters = React.useMemo(() => getPodFilters(t), [t]);
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <Firehose resources={getPodsWatcher(obj.metadata.namespace)}>
         <ListPageWrapper
           flatten={(
@@ -225,7 +226,7 @@ export const CronJobPodsComponent: React.FC<CronJobPodsComponentProps> = ({ obj
           rowFilters={podFilters}
         />
       </Firehose>
-    </div>
+    </PaneBody>
   );
 };
 
@@ -234,7 +235,7 @@ export type CronJobJobsComponentProps = {
 };
 
 export const CronJobJobsComponent: React.FC<CronJobJobsComponentProps> = ({ obj }) => (
-  <div className="co-m-pane__body">
+  <PaneBody>
     <Firehose resources={getJobsWatcher(obj.metadata.namespace)}>
       <ListPageWrapper
         flatten={(_resources: FirehoseResourcesResult<{ jobs: K8sResourceCommon[] }>) => {
@@ -249,7 +250,7 @@ export const CronJobJobsComponent: React.FC<CronJobJobsComponentProps> = ({ obj
         ListComponent={JobsList}
       />
     </Firehose>
-  </div>
+  </PaneBody>
 );
 
 export const CronJobsList: React.FC = (props) => {
diff --git a/frontend/public/components/custom-resource-definition.tsx b/frontend/public/components/custom-resource-definition.tsx
index ac010100037..f359e01a426 100644
--- a/frontend/public/components/custom-resource-definition.tsx
+++ b/frontend/public/components/custom-resource-definition.tsx
@@ -47,6 +47,7 @@ import {
   ResourceListPage as DynamicResourceListPage,
   isResourceListPage as isDynamicResourceListPage,
 } from '@console/dynamic-plugin-sdk';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 
 const { common } = Kebab.factory;
 
@@ -165,36 +166,34 @@ const Details: React.FC<{ obj: CustomResourceDefinitionKind }> = ({ obj: crd })
   const { t } = useTranslation();
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading text={t('public~CustomResourceDefinition details')} />
-        <div className="co-m-pane__body-group">
-          <div className="row">
-            <div className="col-sm-6">
-              <ResourceSummary showPodSelector={false} showNodeSelector={false} resource={crd} />
-            </div>
-            <div className="col-sm-6">
-              <dl className="co-m-pane__details">
-                <dt>{t('public~Established')}</dt>
-                <dd>
-                  <Established crd={crd} />
-                </dd>
-                <DetailsItem label={t('public~Group')} obj={crd} path="spec.group" />
-                <dt>{t('public~Latest version')}</dt>
-                <dd>{getLatestVersionForCRD(crd)}</dd>
-                <DetailsItem label={t('public~Scope')} obj={crd} path="spec.scope" />
-              </dl>
-            </div>
+        <div className="row">
+          <div className="col-sm-6">
+            <ResourceSummary showPodSelector={false} showNodeSelector={false} resource={crd} />
+          </div>
+          <div className="col-sm-6">
+            <dl className="co-m-pane__details">
+              <dt>{t('public~Established')}</dt>
+              <dd>
+                <Established crd={crd} />
+              </dd>
+              <DetailsItem label={t('public~Group')} obj={crd} path="spec.group" />
+              <dt>{t('public~Latest version')}</dt>
+              <dd>{getLatestVersionForCRD(crd)}</dd>
+              <DetailsItem label={t('public~Scope')} obj={crd} path="spec.scope" />
+            </dl>
           </div>
         </div>
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={t('public~Conditions')} />
         <Conditions conditions={crd.status.conditions} />
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={t('public~Versions')} />
         <CRDVersionTable versions={crd.spec.versions} />
-      </div>
+      </PaneBody>
     </>
   );
 };
diff --git a/frontend/public/components/daemon-set.tsx b/frontend/public/components/daemon-set.tsx
index eb0159b2040..f05fe850591 100644
--- a/frontend/public/components/daemon-set.tsx
+++ b/frontend/public/components/daemon-set.tsx
@@ -13,6 +13,7 @@ import {
   ActionMenuVariant,
   usePrometheusGate,
 } from '@console/shared';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { K8sResourceKind, referenceFor, referenceForModel, DaemonSetKind } from '../module/k8s';
 import { DetailsPage, ListPage, Table, TableData, RowFunctionArgs } from './factory';
 import {
@@ -79,7 +80,7 @@ const DaemonSetDetails: React.FC<DaemonSetDetailsProps> = ({ obj: daemonset }) =
   const { podData, loaded } = usePodsWatcher(daemonset);
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading text={t('public~DaemonSet details')} />
         {loaded ? (
           <PodRing
@@ -105,14 +106,14 @@ const DaemonSetDetails: React.FC<DaemonSetDetailsProps> = ({ obj: daemonset }) =
             <DaemonSetDetailsList ds={daemonset} />
           </div>
         </div>
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={t('public~Containers')} />
         <ContainerTable containers={daemonset.spec.template.spec.containers} />
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <VolumesTable resource={daemonset} heading={t('public~Volumes')} />
-      </div>
+      </PaneBody>
     </>
   );
 };
diff --git a/frontend/public/components/dashboard/dashboards-page/dashboards.tsx b/frontend/public/components/dashboard/dashboards-page/dashboards.tsx
index 13bf598cc29..41a9039d25a 100644
--- a/frontend/public/components/dashboard/dashboards-page/dashboards.tsx
+++ b/frontend/public/components/dashboard/dashboards-page/dashboards.tsx
@@ -120,7 +120,7 @@ const DashboardsPage_: React.FC<DashboardsPageProps> = ({ kindsInFlight, k8sMode
   ) : (
     <>
       <PageTitleContext.Provider value={titleProviderValues}>
-        <PageHeading title={title} detail={true} badge={badge} />
+        <PageHeading title={title} badge={badge} />
         <HorizontalNav pages={allPages} noStatusBox />
       </PageTitleContext.Provider>
     </>
diff --git a/frontend/public/components/debug-terminal.tsx b/frontend/public/components/debug-terminal.tsx
index 645952181e6..90edc6411a2 100644
--- a/frontend/public/components/debug-terminal.tsx
+++ b/frontend/public/components/debug-terminal.tsx
@@ -9,6 +9,7 @@ import { ObjectMetadata, PodKind, k8sCreate, k8sKillByName } from '@console/inte
 import { PodExecLoader } from '@console/internal/components/pod';
 import { PodModel } from '@console/internal/models';
 import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 
 import { resourcePath } from './utils/resource-link';
 import { getBreadcrumbPath } from '@console/internal/components/utils/breadcrumbs';
@@ -59,11 +60,11 @@ const getDebugPod = (debugPodName: string, podToDebug: PodKind, containerName: s
 
 const DebugTerminalError: React.FC<DebugTerminalErrorProps> = ({ error, description }) => {
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <Alert variant="danger" isInline title={error}>
         <p>{description}</p>
       </Alert>
-    </div>
+    </PaneBody>
   );
 };
 
@@ -194,7 +195,6 @@ export const DebugTerminalPage: React.FC<DebugTerminalPageProps> = () => {
     <div>
       <DocumentTitle>{t('public~Debug {{name}}', { name })}</DocumentTitle>
       <PageHeading
-        detail
         title={t('public~Debug {{name}}', { name })}
         kind="Pod"
         obj={{ data: podData }}
diff --git a/frontend/public/components/default-resource.tsx b/frontend/public/components/default-resource.tsx
index 89dae391d99..32b7a758349 100644
--- a/frontend/public/components/default-resource.tsx
+++ b/frontend/public/components/default-resource.tsx
@@ -8,6 +8,7 @@ import { getGroupVersionKindForResource } from '@console/dynamic-plugin-sdk/src/
 import { useK8sModel } from '@console/dynamic-plugin-sdk/src/utils/k8s/hooks/useK8sModel';
 import { useDetailsItemExtensionsForResource } from '@console/shared/src/hooks/useDetailsItemExtensionsForResource';
 import { ExtensionDetailsItem } from '@console/shared/src/components/details-page/ExtensionDetailsItem';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { Conditions } from './conditions';
 import { DetailsPage, ListPage, Table, TableData, TableProps, RowFunctionArgs } from './factory';
 import { referenceFor, K8sResourceKind, modelFor } from '../module/k8s';
@@ -50,7 +51,7 @@ export const DetailsForKind: React.FC<PageComponentProps<K8sResourceKind>> = ({
 
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading
           text={t('public~{{kind}} details', {
             kind: model?.labelKey ? t(model.labelKey) : model?.label,
@@ -66,12 +67,12 @@ export const DetailsForKind: React.FC<PageComponentProps<K8sResourceKind>> = ({
             <dl className="co-m-pane__details col-md-6">{rightDetailsItems}</dl>
           )}
         </div>
-      </div>
+      </PaneBody>
       {_.isArray(obj?.status?.conditions) && (
-        <div className="co-m-pane__body">
+        <PaneBody>
           <SectionHeading text={t('public~Conditions')} />
           <Conditions conditions={obj.status.conditions} />
-        </div>
+        </PaneBody>
       )}
     </>
   );
diff --git a/frontend/public/components/deployment-config.tsx b/frontend/public/components/deployment-config.tsx
index f265e0d5a35..9435a3970a3 100644
--- a/frontend/public/components/deployment-config.tsx
+++ b/frontend/public/components/deployment-config.tsx
@@ -17,6 +17,7 @@ import {
   EditHorizontalPodAutoScaler,
   hideActionForHPAs,
 } from '@console/app/src/actions/modify-hpa';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import {
   k8sCreate,
   K8sKind,
@@ -248,37 +249,35 @@ export const DeploymentConfigsDetails: React.FC<{ obj: K8sResourceKind }> = ({ o
   const { t } = useTranslation();
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading text={t('public~DeploymentConfig details')} />
         {dc.spec.paused && <WorkloadPausedAlert obj={dc} model={DeploymentConfigModel} />}
         <PodRingSet key={dc.metadata.uid} obj={dc} path="/spec/replicas" />
-        <div className="co-m-pane__body-group">
-          <div className="row">
-            <div className="col-sm-6">
-              <ResourceSummary resource={dc} showPodSelector showNodeSelector showTolerations>
-                <dt>{t('public~Status')}</dt>
-                <dd>
-                  <Status status={getDeploymentConfigStatus(dc)} />
-                </dd>
-              </ResourceSummary>
-            </div>
-            <div className="col-sm-6">
-              <DeploymentConfigDetailsList dc={dc} />
-            </div>
+        <div className="row">
+          <div className="col-sm-6">
+            <ResourceSummary resource={dc} showPodSelector showNodeSelector showTolerations>
+              <dt>{t('public~Status')}</dt>
+              <dd>
+                <Status status={getDeploymentConfigStatus(dc)} />
+              </dd>
+            </ResourceSummary>
+          </div>
+          <div className="col-sm-6">
+            <DeploymentConfigDetailsList dc={dc} />
           </div>
         </div>
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={t('public~Containers')} />
         <ContainerTable containers={dc.spec.template.spec.containers} />
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <VolumesTable resource={dc} heading={t('public~Volumes')} />
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={t('public~Conditions')} />
         <Conditions conditions={dc.status.conditions} />
-      </div>
+      </PaneBody>
     </>
   );
 };
@@ -359,8 +358,9 @@ export const DeploymentConfigsDetailsPage: React.FC = (props) => {
       customActionMenu={customActionMenu}
       pages={pages}
     >
-      <DeploymentConfigDeprecationAlert />
-      <br />
+      <div className="pf-v6-u-mt-md">
+        <DeploymentConfigDeprecationAlert />
+      </div>
     </DetailsPage>
   );
 };
diff --git a/frontend/public/components/deployment.tsx b/frontend/public/components/deployment.tsx
index 5560a9db7a5..9aa4b5721bd 100644
--- a/frontend/public/components/deployment.tsx
+++ b/frontend/public/components/deployment.tsx
@@ -17,6 +17,7 @@ import {
   EditHorizontalPodAutoScaler,
   hideActionForHPAs,
 } from '@console/app/src/actions/modify-hpa';
+
 import { DeploymentModel } from '../models';
 import {
   DeploymentKind,
@@ -47,6 +48,7 @@ import { ReplicaSetsPage } from './replicaset';
 import { WorkloadTableRow, WorkloadTableHeader } from './workload-table';
 import { PodDisruptionBudgetField } from '@console/app/src/components/pdb/PodDisruptionBudgetField';
 import { VerticalPodAutoscalerRecommendations } from '@console/app/src/components/vpa/VerticalPodAutoscalerRecommendations';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 
 const deploymentsReference: K8sResourceKindReference = 'Deployment';
 const { ModifyCount, AddStorage, common } = Kebab.factory;
@@ -153,47 +155,40 @@ const DeploymentDetails: React.FC<DeploymentDetailsProps> = ({ obj: deployment }
 
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading text={t('public~Deployment details')} />
         {deployment.spec.paused && <WorkloadPausedAlert obj={deployment} model={DeploymentModel} />}
         <PodRingSet key={deployment.metadata.uid} obj={deployment} path="/spec/replicas" />
-        <div className="co-m-pane__body-group">
-          <div className="row">
-            <div className="col-sm-6">
-              <ResourceSummary
-                resource={deployment}
-                showPodSelector
-                showNodeSelector
-                showTolerations
-              >
-                <dt>{t('public~Status')}</dt>
-                <dd>
-                  {deployment.status.availableReplicas === deployment.status.updatedReplicas &&
-                  deployment.spec.replicas === deployment.status.availableReplicas ? (
-                    <Status status="Up to date" />
-                  ) : (
-                    <Status status="Updating" />
-                  )}
-                </dd>
-              </ResourceSummary>
-            </div>
-            <div className="col-sm-6">
-              <DeploymentDetailsList deployment={deployment} />
-            </div>
+        <div className="row">
+          <div className="col-sm-6">
+            <ResourceSummary resource={deployment} showPodSelector showNodeSelector showTolerations>
+              <dt>{t('public~Status')}</dt>
+              <dd>
+                {deployment.status.availableReplicas === deployment.status.updatedReplicas &&
+                deployment.spec.replicas === deployment.status.availableReplicas ? (
+                  <Status status="Up to date" />
+                ) : (
+                  <Status status="Updating" />
+                )}
+              </dd>
+            </ResourceSummary>
+          </div>
+          <div className="col-sm-6">
+            <DeploymentDetailsList deployment={deployment} />
           </div>
         </div>
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={t('public~Containers')} />
         <ContainerTable containers={deployment.spec.template.spec.containers} />
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <VolumesTable resource={deployment} heading={t('public~Volumes')} />
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={t('public~Conditions')} />
         <Conditions conditions={deployment.status.conditions} />
-      </div>
+      </PaneBody>
     </>
   );
 };
diff --git a/frontend/public/components/edit-yaml.jsx b/frontend/public/components/edit-yaml.jsx
index fed0dffe830..bee1f0aff60 100644
--- a/frontend/public/components/edit-yaml.jsx
+++ b/frontend/public/components/edit-yaml.jsx
@@ -21,6 +21,7 @@ import {
   useTelemetry,
   useUserSettingsCompatibility,
 } from '@console/shared';
+import PageBody from '@console/shared/src/components/layout/PageBody';
 
 import CodeEditor from '@console/shared/src/components/editor/CodeEditor';
 import CodeEditorSidebar from '@console/shared/src/components/editor/CodeEditorSidebar';
@@ -786,11 +787,10 @@ const EditYAMLInner = (props) => {
               )
             )
           }
-          detail
         />
       )}
 
-      <div className="pf-v6-c-form co-m-page__body">
+      <PageBody className="pf-v6-c-form">
         <div className="co-p-has-sidebar">
           <div
             className={classNames('co-p-has-sidebar__body', {
@@ -908,7 +908,7 @@ const EditYAMLInner = (props) => {
             />
           )}
         </div>
-      </div>
+      </PageBody>
     </div>
   );
 
diff --git a/frontend/public/components/environment.jsx b/frontend/public/components/environment.jsx
index a473505dc14..bcae295894d 100644
--- a/frontend/public/components/environment.jsx
+++ b/frontend/public/components/environment.jsx
@@ -615,7 +615,7 @@ export class UnconnectedEnvironmentPage extends PromiseComponent {
     );
 
     return (
-      <div className={classNames({ 'co-m-pane__body': !currentEnvVars.isCreate })}>
+      <div className={classNames({ 'pf-v6-c-page__main-section': !currentEnvVars.isCreate })}>
         {containerVars}
         {!currentEnvVars.isCreate && (
           <div className="co-m-pane__body-group">
diff --git a/frontend/public/components/error.tsx b/frontend/public/components/error.tsx
index 4ffe30ce4d8..7712e34e4ef 100644
--- a/frontend/public/components/error.tsx
+++ b/frontend/public/components/error.tsx
@@ -15,6 +15,7 @@ import {
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import { t_global_icon_color_status_danger_default as globalDangerColor100 } from '@patternfly/react-tokens';
 
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { PageHeading } from './utils';
 import { useLocation } from 'react-router';
 
@@ -22,11 +23,11 @@ const ErrorComponent: React.FC<ErrorComponentProps> = ({ title, message }) => {
   const { t } = useTranslation();
   return (
     <>
-      <PageHeading title={t('public~Error')} detail hideFavoriteButton />
-      <div className="co-m-pane__body" data-test-id="error-page">
-        <PageHeading title={title} centerText hideFavoriteButton />
+      <PageHeading title={t('public~Error')} hideFavoriteButton />
+      <PaneBody data-test-id="error-page">
+        <PageHeading title={title} centerText />
         {message && <div className="pf-v6-u-text-align-center">{message}</div>}
-      </div>
+      </PaneBody>
     </>
   );
 };
diff --git a/frontend/public/components/events.jsx b/frontend/public/components/events.jsx
index d26223e3e87..4986b60f6f6 100644
--- a/frontend/public/components/events.jsx
+++ b/frontend/public/components/events.jsx
@@ -38,6 +38,7 @@ import {
 import { EventStreamList } from './utils/event-stream';
 import { ActionMenu, ActionMenuVariant, ActionServiceProvider } from '@console/shared';
 import ActionMenuItem from '@console/shared/src/components/actions/menu/ActionMenuItem';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 
 const maxMessages = 500;
 const flushInterval = 500;
@@ -252,7 +253,7 @@ export const EventsList = (props) => {
 
   return (
     <>
-      <PageHeading detail={true} title={props.title}>
+      <PageHeading title={props.title}>
         <div className="co-search-group">
           <ResourceListDropdown
             onChange={toggleSelected}
@@ -273,8 +274,8 @@ export const EventsList = (props) => {
             onChange={(_event, val) => setTextFilter(val || '')}
           />
         </div>
-        <div className="form-group">
-          {selected.size > 0 && (
+        {selected.size > 0 && (
+          <div className="form-group">
             <LabelGroup
               key="resources-category"
               categoryName={t('public~Resource')}
@@ -293,8 +294,8 @@ export const EventsList = (props) => {
                 );
               })}
             </LabelGroup>
-          )}
-        </div>
+          </div>
+        )}
       </PageHeading>
       <EventStream
         {...props}
@@ -499,7 +500,7 @@ const EventStream = ({
       : t('public~Showing most recent {{count}} event', { count });
 
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <div className="co-sysevent-stream">
         <div className="co-sysevent-stream__status">
           <div className="co-sysevent-stream__timeline__btn-text">{statusBtnTxt}</div>
@@ -521,7 +522,7 @@ const EventStream = ({
         {count > 0 && <EventStreamList events={filteredEvents} EventComponent={Inner} />}
         {sysEventStatus}
       </div>
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/public/components/factory/details.tsx b/frontend/public/components/factory/details.tsx
index 08237cdc95c..7e504df0a14 100644
--- a/frontend/public/components/factory/details.tsx
+++ b/frontend/public/components/factory/details.tsx
@@ -157,7 +157,6 @@ export const DetailsPage = withFallback<DetailsPageProps>(({ pages = [], ...prop
       >
         <PageHeading
           obj={props.obj}
-          detail={true}
           title={props.title || props.name}
           titleFunc={props.titleFunc}
           menuActions={props.menuActions}
diff --git a/frontend/public/components/factory/list-page.tsx b/frontend/public/components/factory/list-page.tsx
index f4cfe7f07a4..841a852c359 100644
--- a/frontend/public/components/factory/list-page.tsx
+++ b/frontend/public/components/factory/list-page.tsx
@@ -16,6 +16,7 @@ import {
   K8sResourceCommon,
 } from '@console/dynamic-plugin-sdk/src/extensions/console-types';
 import { filterList } from '@console/dynamic-plugin-sdk/src/app/k8s/actions/k8s';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { storagePrefix } from '../row-filter';
 import { ErrorPage404 } from '../error';
 import { K8sKind } from '../../module/k8s/types';
@@ -330,14 +331,14 @@ export const FireMan: React.FC<FireManProps & { filterList?: typeof filterList }
         {!title && badge && <div>{badge}</div>}
       </PageHeading>
       {helpText && <p className="co-m-pane__help-text co-help-text">{helpText}</p>}
-      <div className="co-m-pane__body co-m-pane__body--no-top-margin">
+      <PaneBody>
         {inject(props.children, {
           resources,
           expand,
           reduxIDs,
           applyFilter,
         })}
-      </div>
+      </PaneBody>
     </>
   );
 };
diff --git a/frontend/public/components/group.tsx b/frontend/public/components/group.tsx
index 1839ef391ea..ef6de7fc1aa 100644
--- a/frontend/public/components/group.tsx
+++ b/frontend/public/components/group.tsx
@@ -4,6 +4,7 @@ import { sortable } from '@patternfly/react-table';
 import { useDispatch } from 'react-redux';
 import { NavigateFunction, useNavigate } from 'react-router-dom-v5-compat';
 
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import * as UIActions from '../actions/ui';
 import { GroupModel, UserModel } from '../models';
 import { referenceForModel, GroupKind, K8sKind } from '../module/k8s';
@@ -193,18 +194,18 @@ const GroupDetails: React.FC<GroupDetailsProps> = ({ obj }) => {
   const users: string[] = obj.users ? [...obj.users].sort() : [];
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading text={t('public~Group details')} />
         <div className="row">
           <div className="col-md-6">
             <ResourceSummary resource={obj} />
           </div>
         </div>
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={t('public~Users')} />
         <UsersTable group={obj} users={users} />
-      </div>
+      </PaneBody>
     </>
   );
 };
diff --git a/frontend/public/components/hpa.tsx b/frontend/public/components/hpa.tsx
index b5a88cce19f..4f06e39ca0d 100644
--- a/frontend/public/components/hpa.tsx
+++ b/frontend/public/components/hpa.tsx
@@ -3,6 +3,7 @@ import * as _ from 'lodash-es';
 import * as classNames from 'classnames';
 import { sortable } from '@patternfly/react-table';
 import { Trans, useTranslation } from 'react-i18next';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import {
   K8sResourceKind,
   K8sResourceKindReference,
@@ -164,7 +165,7 @@ export const HorizontalPodAutoscalersDetails: React.FC<HorizontalPodAutoscalersD
   const { t } = useTranslation();
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading text={t('public~HorizontalPodAutoscaler details')} />
         <div className="row">
           <div className="col-sm-6">
@@ -202,14 +203,14 @@ export const HorizontalPodAutoscalersDetails: React.FC<HorizontalPodAutoscalersD
             </dl>
           </div>
         </div>
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <MetricsTable obj={hpa} />
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={t('public~Conditions')} />
         <Conditions conditions={hpa.status.conditions} />
-      </div>
+      </PaneBody>
     </>
   );
 };
diff --git a/frontend/public/components/image-stream-tag.tsx b/frontend/public/components/image-stream-tag.tsx
index 1ef722004af..712828dae71 100644
--- a/frontend/public/components/image-stream-tag.tsx
+++ b/frontend/public/components/image-stream-tag.tsx
@@ -3,6 +3,7 @@ import * as _ from 'lodash-es';
 import { useTranslation } from 'react-i18next';
 import { useParams, useLocation } from 'react-router-dom-v5-compat';
 
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { K8sResourceKind, K8sResourceKindReference } from '../module/k8s';
 import { ImageStreamTagModel } from '../models';
 import { DetailsPage, Table } from './factory';
@@ -101,19 +102,17 @@ export const SupportedPlatformsTable = (props) => {
 
   return (
     <>
-      <div className="co-m-pane__body-group">
-        {props.heading && <SectionHeading text={props.heading} />}
-        <Table
-          {...tableProps}
-          aria-label={t('public~Supported Platforms')}
-          loaded={true}
-          label={props.heading}
-          data={submanifests}
-          Header={SupportedPlatformsTableHeader}
-          Rows={SupportedPlatformsTableRows}
-          virtualize={false}
-        />
-      </div>
+      {props.heading && <SectionHeading text={props.heading} />}
+      <Table
+        {...tableProps}
+        aria-label={t('public~Supported Platforms')}
+        loaded={true}
+        label={props.heading}
+        data={submanifests}
+        Header={SupportedPlatformsTableHeader}
+        Rows={SupportedPlatformsTableRows}
+        virtualize={false}
+      />
     </>
   );
 };
@@ -147,7 +146,7 @@ export const ImageStreamTagsDetails: React.SFC<ImageStreamTagsDetailsProps> = ({
   const { t } = useTranslation();
 
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <div className="co-m-pane__body-group">
         <div className="row">
           <div className="col-md-6 col-sm-12">
@@ -239,7 +238,7 @@ export const ImageStreamTagsDetails: React.SFC<ImageStreamTagsDetailsProps> = ({
         policy={importPolicyPreserveOriginal}
         heading={t('public~Supported Platforms')}
       />
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/public/components/image-stream.tsx b/frontend/public/components/image-stream.tsx
index e6b5d3df684..89fa5f40ed9 100644
--- a/frontend/public/components/image-stream.tsx
+++ b/frontend/public/components/image-stream.tsx
@@ -7,6 +7,7 @@ import { sortable } from '@patternfly/react-table';
 import { AlertVariant, Button, Popover } from '@patternfly/react-core';
 import { QuestionCircleIcon } from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { K8sResourceKind, K8sResourceKindReference } from '../module/k8s';
 import { ImageStreamModel } from '../models';
 import { DetailsPage, ListPage, Table, TableData, RowFunctionArgs } from './factory';
@@ -227,7 +228,7 @@ export const ImageStreamsDetails: React.SFC<ImageStreamsDetailsProps> = ({ obj:
 
   return (
     <div>
-      <div className="co-m-pane__body">
+      <PaneBody>
         {!_.isEmpty(importErrors) && (
           <ExpandableAlert
             variant={AlertVariant.warning}
@@ -250,8 +251,8 @@ export const ImageStreamsDetails: React.SFC<ImageStreamsDetailsProps> = ({ obj:
             <ExampleDockerCommandPopover imageStream={imageStream} />
           </div>
         </div>
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={t('public~Tags')} />
         {_.isEmpty(imageStream.status.tags) ? (
           <span className="text-muted">{t('public~No tags')}</span>
@@ -277,7 +278,7 @@ export const ImageStreamsDetails: React.SFC<ImageStreamsDetailsProps> = ({ obj:
             </div>
           </div>
         )}
-      </div>
+      </PaneBody>
     </div>
   );
 };
diff --git a/frontend/public/components/ingress.jsx b/frontend/public/components/ingress.jsx
index 8a817773a86..5a655fccce7 100644
--- a/frontend/public/components/ingress.jsx
+++ b/frontend/public/components/ingress.jsx
@@ -2,6 +2,7 @@ import * as _ from 'lodash-es';
 import { useTranslation } from 'react-i18next';
 import * as classNames from 'classnames';
 import { sortable } from '@patternfly/react-table';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { DetailsPage, ListPage, Table, TableData } from './factory';
 import {
   Kebab,
@@ -175,7 +176,7 @@ const Details = ({ obj: ingress }) => {
   const { t } = useTranslation();
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading text={t('public~Ingress details')} />
         <ResourceSummary resource={ingress}>
           <dt>{t('public~TLS certificate')}</dt>
@@ -183,8 +184,8 @@ const Details = ({ obj: ingress }) => {
             <TLSCert ingress={ingress} />
           </dd>
         </ResourceSummary>
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={t('public~Ingress rules')} />
         <p className="co-m-pane__explanation">
           {t(
@@ -195,7 +196,7 @@ const Details = ({ obj: ingress }) => {
           <RulesHeader />
           <RulesRows spec={ingress.spec} namespace={ingress.metadata.namespace} />
         </div>
-      </div>
+      </PaneBody>
     </>
   );
 };
diff --git a/frontend/public/components/instantiate-template.tsx b/frontend/public/components/instantiate-template.tsx
index 73fc100bc60..d8912c3f9fa 100644
--- a/frontend/public/components/instantiate-template.tsx
+++ b/frontend/public/components/instantiate-template.tsx
@@ -22,6 +22,7 @@ import { CompressIcon, ExpandIcon } from '@patternfly/react-icons/dist/js/icons'
 import { useTranslation } from 'react-i18next';
 
 import { ANNOTATIONS, withActivePerspective } from '@console/shared';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 
 import { Perspective, isPerspective } from '@console/dynamic-plugin-sdk';
 import { withExtensions } from '@console/plugin-sdk';
@@ -419,11 +420,11 @@ export const InstantiateTemplatePage: React.FC<{}> = (props) => {
     <>
       <DocumentTitle>{title}</DocumentTitle>
       <PageHeading title={title} />
-      <div className="co-m-pane__body co-m-pane__body--no-top-margin">
+      <PaneBody>
         <Firehose resources={resources}>
           <TemplateForm preselectedNamespace={preselectedNamespace} {...(props as any)} />
         </Firehose>
-      </div>
+      </PaneBody>
     </>
   );
 };
diff --git a/frontend/public/components/job.tsx b/frontend/public/components/job.tsx
index 7f2e0e61301..877277ed93c 100644
--- a/frontend/public/components/job.tsx
+++ b/frontend/public/components/job.tsx
@@ -10,6 +10,7 @@ import {
   LazyActionMenu,
   ActionMenuVariant,
 } from '@console/shared';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import {
   getJobTypeAndCompletions,
   K8sKind,
@@ -114,7 +115,7 @@ export const JobDetails: React.FC<JobsDetailsProps> = ({ obj: job }) => {
   const { t } = useTranslation();
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <div className="row">
           <div className="col-md-6">
             <SectionHeading text={t('public~Job details')} />
@@ -177,15 +178,15 @@ export const JobDetails: React.FC<JobsDetailsProps> = ({ obj: job }) => {
             </dl>
           </div>
         </div>
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={t('public~Containers')} />
         <ContainerTable containers={job.spec.template.spec.containers} />
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={t('public~Conditions')} />
         <Conditions conditions={job.status.conditions} />
-      </div>
+      </PaneBody>
     </>
   );
 };
diff --git a/frontend/public/components/limit-range.tsx b/frontend/public/components/limit-range.tsx
index a277a051668..cb3f1fed2c7 100644
--- a/frontend/public/components/limit-range.tsx
+++ b/frontend/public/components/limit-range.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as _ from 'lodash-es';
 import { sortable } from '@patternfly/react-table';
 import { useTranslation } from 'react-i18next';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { K8sResourceKindReference, K8sResourceKind } from '../module/k8s';
 import { LimitRangeModel } from '../models';
 import { DetailsPage, ListPage, Table, TableData, RowFunctionArgs } from './factory';
@@ -132,7 +133,7 @@ const LimitRangeDetailsRows: React.SFC<LimitRangeDetailsRowsProps> = ({ limit })
 export const LimitRangeDetailsList = (resource) => {
   const { t } = useTranslation();
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <SectionHeading text={t('public~Limits')} />
       <table className="pf-v6-c-table pf-m-compact pf-m-border-rows">
         <thead className="pf-v6-c-table__thead">
@@ -152,7 +153,7 @@ export const LimitRangeDetailsList = (resource) => {
           ))}
         </tbody>
       </table>
-    </div>
+    </PaneBody>
   );
 };
 
@@ -160,14 +161,14 @@ export const LimitRangeDetailsPage = (props) => {
   const { t } = useTranslation();
   const Details = ({ obj: rq }) => (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading text={t('public~LimitRange details')} />
         <div className="row">
           <div className="col-md-6">
             <ResourceSummary resource={rq} />
           </div>
         </div>
-      </div>
+      </PaneBody>
       <LimitRangeDetailsList resource={rq} />
     </>
   );
diff --git a/frontend/public/components/machine-autoscaler.tsx b/frontend/public/components/machine-autoscaler.tsx
index 7974e733521..7625e7488f9 100644
--- a/frontend/public/components/machine-autoscaler.tsx
+++ b/frontend/public/components/machine-autoscaler.tsx
@@ -4,6 +4,7 @@ import { sortable } from '@patternfly/react-table';
 import * as classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { MachineAutoscalerModel } from '../models';
 import {
   groupVersionFor,
@@ -136,7 +137,7 @@ const MachineAutoscalerDetails: React.FC<MachineAutoscalerDetailsProps> = ({ obj
   const { t } = useTranslation();
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading text={t('public~MachineAutoscaler details')} />
         <div className="row">
           <div className="col-md-6">
@@ -152,7 +153,7 @@ const MachineAutoscalerDetails: React.FC<MachineAutoscalerDetailsProps> = ({ obj
             </ResourceSummary>
           </div>
         </div>
-      </div>
+      </PaneBody>
     </>
   );
 };
diff --git a/frontend/public/components/machine-config-pool.tsx b/frontend/public/components/machine-config-pool.tsx
index 9b16df25066..48e9b61072a 100644
--- a/frontend/public/components/machine-config-pool.tsx
+++ b/frontend/public/components/machine-config-pool.tsx
@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { PauseCircleIcon } from '@patternfly/react-icons/dist/esm/icons/pause-circle-icon';
 import { SyncAltIcon } from '@patternfly/react-icons/dist/esm/icons/sync-alt-icon';
 
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { Conditions } from './conditions';
 import { errorModal } from './modals';
 import { MachineConfigPoolModel } from '../models';
@@ -232,7 +233,7 @@ const MachineConfigPoolDetails: React.SFC<MachineConfigPoolDetailsProps> = ({ ob
   const { t } = useTranslation();
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading text={t('public~MachineConfigPool details')} />
         {paused && <WorkloadPausedAlert model={MachineConfigPoolModel} obj={obj} />}
         <MachineConfigPoolCounts obj={obj} />
@@ -244,11 +245,11 @@ const MachineConfigPoolDetails: React.SFC<MachineConfigPoolDetailsProps> = ({ ob
             <MachineConfigPoolCharacteristics obj={obj} />
           </div>
         </div>
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={t('public~Conditions')} />
         <Conditions conditions={_.get(obj, 'status.conditions')} />
-      </div>
+      </PaneBody>
     </>
   );
 };
diff --git a/frontend/public/components/machine-config.tsx b/frontend/public/components/machine-config.tsx
index 6e7d13b1347..659d80021b4 100644
--- a/frontend/public/components/machine-config.tsx
+++ b/frontend/public/components/machine-config.tsx
@@ -16,6 +16,7 @@ import {
   Content,
 } from '@patternfly/react-core';
 import { BlueInfoCircleIcon } from '@console/dynamic-plugin-sdk/src';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 
 import { MachineConfigKind, referenceForModel } from '../module/k8s';
 import { MachineConfigModel } from '../models';
@@ -51,16 +52,16 @@ const MachineConfigDetails: React.SFC<MachineConfigDetailsProps> = ({ obj }) =>
 
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading text={t('public~MachineConfig details')} />
         <div className="row">
           <div className="col-md-6">
             <MachineConfigSummary obj={obj} t={t} />
           </div>
         </div>
-      </div>
+      </PaneBody>
       {files && (
-        <div className="co-m-pane__body">
+        <PaneBody>
           <SectionHeading text={t('public~Configuration files')} />
           {files.map((file, i) => (
             <div className="pf-v6-u-mb-xl" key={file.path}>
@@ -110,7 +111,7 @@ const MachineConfigDetails: React.SFC<MachineConfigDetailsProps> = ({ obj }) =>
               )}
             </div>
           ))}
-        </div>
+        </PaneBody>
       )}
     </>
   );
diff --git a/frontend/public/components/machine-health-check.tsx b/frontend/public/components/machine-health-check.tsx
index a9ca85064b4..c88b27ab2b4 100644
--- a/frontend/public/components/machine-health-check.tsx
+++ b/frontend/public/components/machine-health-check.tsx
@@ -4,6 +4,7 @@ import { sortable } from '@patternfly/react-table';
 import * as classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { MachineHealthCheckModel, MachineModel } from '../models';
 import { K8sResourceKind, MachineHealthCheckKind } from '../module/k8s/types';
 import { referenceForModel } from '../module/k8s/k8s';
@@ -124,43 +125,41 @@ const MachineHealthCheckDetails: React.FC<MachineHealthCheckDetailsProps> = ({ o
   const { t } = useTranslation();
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading text={t('public~MachineHealthCheck details')} />
-        <div className="co-m-pane__body-group">
-          <div className="row">
-            <div className="col-sm-6">
-              <ResourceSummary resource={obj}>
-                <DetailsItem label={t('public~Selector')} obj={obj} path="spec.selector">
-                  <Selector
-                    kind={referenceForModel(MachineModel)}
-                    selector={_.get(obj, 'spec.selector')}
-                    namespace={obj.metadata.namespace}
-                  />
-                </DetailsItem>
-              </ResourceSummary>
-            </div>
-            <div className="col-sm-6">
-              <dl className="co-m-pane__details">
-                <DetailsItem label={t('public~Max unhealthy')} obj={obj} path="spec.maxUnhealthy" />
-                <DetailsItem
-                  label={t('public~Expected machines')}
-                  obj={obj}
-                  path="status.expectedMachines"
+        <div className="row">
+          <div className="col-sm-6">
+            <ResourceSummary resource={obj}>
+              <DetailsItem label={t('public~Selector')} obj={obj} path="spec.selector">
+                <Selector
+                  kind={referenceForModel(MachineModel)}
+                  selector={_.get(obj, 'spec.selector')}
+                  namespace={obj.metadata.namespace}
                 />
-                <DetailsItem
-                  label={t('public~Current healthy')}
-                  obj={obj}
-                  path="status.currentHealthy"
-                />
-              </dl>
-            </div>
+              </DetailsItem>
+            </ResourceSummary>
+          </div>
+          <div className="col-sm-6">
+            <dl className="co-m-pane__details">
+              <DetailsItem label={t('public~Max unhealthy')} obj={obj} path="spec.maxUnhealthy" />
+              <DetailsItem
+                label={t('public~Expected machines')}
+                obj={obj}
+                path="status.expectedMachines"
+              />
+              <DetailsItem
+                label={t('public~Current healthy')}
+                obj={obj}
+                path="status.currentHealthy"
+              />
+            </dl>
           </div>
         </div>
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={t('public~Unhealthy conditions')} />
         <UnhealthyConditionsTable obj={obj} />
-      </div>
+      </PaneBody>
     </>
   );
 };
diff --git a/frontend/public/components/machine-set.tsx b/frontend/public/components/machine-set.tsx
index 16b388333aa..a87961a04f0 100644
--- a/frontend/public/components/machine-set.tsx
+++ b/frontend/public/components/machine-set.tsx
@@ -10,6 +10,7 @@ import { Tooltip, Button } from '@patternfly/react-core';
 import { PencilAltIcon } from '@patternfly/react-icons/dist/esm/icons/pencil-alt-icon';
 import { useTranslation } from 'react-i18next';
 
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { MachineAutoscalerModel, MachineModel, MachineSetModel, NodeModel } from '../models';
 import {
   K8sKind,
@@ -237,46 +238,44 @@ const MachineSetDetails: React.FC<MachineSetDetailsProps> = ({ obj }) => {
   const instanceType = getMachineSetInstanceType(obj);
   const { t } = useTranslation();
   return (
-    <>
-      <div className="co-m-pane__body">
-        <SectionHeading text={t('public~MachineSet details')} />
-        <MachineCounts resourceKind={MachineSetModel} resource={obj} />
-        <div className="row">
-          <div className="col-md-6">
-            <ResourceSummary resource={obj}>
-              <dt>{t('public~Selector')}</dt>
-              <dd>
-                <Selector
-                  kind={machineReference}
-                  selector={obj.spec?.selector}
-                  namespace={obj.metadata.namespace}
-                />
-              </dd>
-              <dt>{t('public~Instance type')}</dt>
-              <dd>{instanceType || '-'}</dd>
-              {machineRole && (
-                <>
-                  <dt>{t('public~Machine role')}</dt>
-                  <dd>{machineRole}</dd>
-                </>
-              )}
-              {region && (
-                <>
-                  <dt>{t('public~Region')}</dt>
-                  <dd>{region}</dd>
-                </>
-              )}
-              {availabilityZone && (
-                <>
-                  <dt>{t('public~Availability zone')}</dt>
-                  <dd>{availabilityZone}</dd>
-                </>
-              )}
-            </ResourceSummary>
-          </div>
+    <PaneBody>
+      <SectionHeading text={t('public~MachineSet details')} />
+      <MachineCounts resourceKind={MachineSetModel} resource={obj} />
+      <div className="row">
+        <div className="col-md-6">
+          <ResourceSummary resource={obj}>
+            <dt>{t('public~Selector')}</dt>
+            <dd>
+              <Selector
+                kind={machineReference}
+                selector={obj.spec?.selector}
+                namespace={obj.metadata.namespace}
+              />
+            </dd>
+            <dt>{t('public~Instance type')}</dt>
+            <dd>{instanceType || '-'}</dd>
+            {machineRole && (
+              <>
+                <dt>{t('public~Machine role')}</dt>
+                <dd>{machineRole}</dd>
+              </>
+            )}
+            {region && (
+              <>
+                <dt>{t('public~Region')}</dt>
+                <dd>{region}</dd>
+              </>
+            )}
+            {availabilityZone && (
+              <>
+                <dt>{t('public~Availability zone')}</dt>
+                <dd>{availabilityZone}</dd>
+              </>
+            )}
+          </ResourceSummary>
         </div>
       </div>
-    </>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/public/components/machine.tsx b/frontend/public/components/machine.tsx
index 5b3837fcdd5..856cd8bc352 100644
--- a/frontend/public/components/machine.tsx
+++ b/frontend/public/components/machine.tsx
@@ -18,6 +18,7 @@ import { MachineKind, referenceForModel, Selector } from '../module/k8s';
 import { Conditions } from './conditions';
 import NodeIPList from '@console/app/src/components/nodes/NodeIPList';
 import { useExactSearch } from '@console/app/src/components/user-preferences/search/useExactSearch';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { DetailsPage } from './factory';
 import ListPageFilter from './factory/ListPage/ListPageFilter';
 import ListPageHeader from './factory/ListPage/ListPageHeader';
@@ -115,70 +116,68 @@ const MachineDetails: React.SFC<MachineDetailsProps> = ({ obj }: { obj: MachineK
   const { t } = useTranslation();
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading text={t('public~Machine details')} />
-        <div className="co-m-pane__body-group">
-          <div className="row">
-            <div className="col-sm-6">
-              <ResourceSummary resource={obj} />
-            </div>
-            <div className="col-sm-6">
-              <dl className="co-m-pane__details">
-                <DetailsItem label={t('public~Phase')} obj={obj} path="status.phase">
-                  <Status status={getMachinePhase(obj)} />
-                </DetailsItem>
-                <DetailsItem
-                  label={t('public~Provider state')}
-                  obj={obj}
-                  path="status.providerStatus.instanceState"
-                >
-                  {providerState}
-                </DetailsItem>
-                {nodeName && (
-                  <>
-                    <dt>{t('public~Node')}</dt>
-                    <dd>
-                      <NodeLink name={nodeName} />
-                    </dd>
-                  </>
-                )}
-                {machineRole && (
-                  <>
-                    <dt>{t('public~Machine role')}</dt>
-                    <dd>{machineRole}</dd>
-                  </>
-                )}
-                {instanceType && (
-                  <>
-                    <dt>{t('public~Instance type')}</dt>
-                    <dd>{instanceType}</dd>
-                  </>
-                )}
-                {region && (
-                  <>
-                    <dt>{t('public~Region')}</dt>
-                    <dd>{region}</dd>
-                  </>
-                )}
-                {zone && (
-                  <>
-                    <dt>{t('public~Availability zone')}</dt>
-                    <dd>{zone}</dd>
-                  </>
-                )}
-                <dt>{t('public~Machine addresses')}</dt>
-                <dd>
-                  <NodeIPList ips={getMachineAddresses(obj)} expand />
-                </dd>
-              </dl>
-            </div>
+        <div className="row">
+          <div className="col-sm-6">
+            <ResourceSummary resource={obj} />
+          </div>
+          <div className="col-sm-6">
+            <dl className="co-m-pane__details">
+              <DetailsItem label={t('public~Phase')} obj={obj} path="status.phase">
+                <Status status={getMachinePhase(obj)} />
+              </DetailsItem>
+              <DetailsItem
+                label={t('public~Provider state')}
+                obj={obj}
+                path="status.providerStatus.instanceState"
+              >
+                {providerState}
+              </DetailsItem>
+              {nodeName && (
+                <>
+                  <dt>{t('public~Node')}</dt>
+                  <dd>
+                    <NodeLink name={nodeName} />
+                  </dd>
+                </>
+              )}
+              {machineRole && (
+                <>
+                  <dt>{t('public~Machine role')}</dt>
+                  <dd>{machineRole}</dd>
+                </>
+              )}
+              {instanceType && (
+                <>
+                  <dt>{t('public~Instance type')}</dt>
+                  <dd>{instanceType}</dd>
+                </>
+              )}
+              {region && (
+                <>
+                  <dt>{t('public~Region')}</dt>
+                  <dd>{region}</dd>
+                </>
+              )}
+              {zone && (
+                <>
+                  <dt>{t('public~Availability zone')}</dt>
+                  <dd>{zone}</dd>
+                </>
+              )}
+              <dt>{t('public~Machine addresses')}</dt>
+              <dd>
+                <NodeIPList ips={getMachineAddresses(obj)} expand />
+              </dd>
+            </dl>
           </div>
         </div>
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={t('public~Conditions')} />
         <Conditions conditions={obj.status?.providerStatus?.conditions} />
-      </div>
+      </PaneBody>
     </>
   );
 };
diff --git a/frontend/public/components/monitoring/alertmanager/alertmanager-config.tsx b/frontend/public/components/monitoring/alertmanager/alertmanager-config.tsx
index d6d063d8c38..03358c1a52e 100644
--- a/frontend/public/components/monitoring/alertmanager/alertmanager-config.tsx
+++ b/frontend/public/components/monitoring/alertmanager/alertmanager-config.tsx
@@ -15,12 +15,15 @@ import {
   LabelGroup as PfLabelGroup,
   Breadcrumb,
   BreadcrumbItem,
+  PageBreadcrumb,
 } from '@patternfly/react-core';
 import { PencilAltIcon } from '@patternfly/react-icons/dist/esm/icons/pencil-alt-icon';
 import { DocumentTitle } from '@console/shared/src/components/document-title/DocumentTitle';
 import { useTranslation } from 'react-i18next';
 
 import PrimaryHeading from '@console/shared/src/components/heading/PrimaryHeading';
+import NavTitle from '@console/shared/src/components/layout/NavTitle';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { breadcrumbsForGlobalConfig } from '../../cluster-settings/global-config';
 
 import { K8sResourceKind } from '../../../module/k8s';
@@ -50,7 +53,7 @@ const AlertRouting = ({ secret, config }: AlertRoutingProps) => {
   const groupBy = _.get(config, ['route', 'group_by'], []);
   const { t } = useTranslation();
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <SectionHeading text={t('public~Alert routing')}>
         <Button
           className="co-alert-manager-config__edit-alert-routing-btn"
@@ -85,7 +88,7 @@ const AlertRouting = ({ secret, config }: AlertRoutingProps) => {
           </dl>
         </div>
       </div>
-    </div>
+    </PaneBody>
   );
 };
 
@@ -433,7 +436,7 @@ const Receivers = ({ secret, config }: ReceiversProps) => {
   const { t } = useTranslation();
   const receiverString = t('public~receiver', { count: numOfIncompleteReceivers });
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <SectionHeading text={t('public~Receivers')} />
       <div className="co-m-pane__filter-row">
         <TextFilter
@@ -475,7 +478,7 @@ const Receivers = ({ secret, config }: ReceiversProps) => {
           data={receivers}
         />
       )}
-    </div>
+    </PaneBody>
   );
 };
 
@@ -528,7 +531,7 @@ export const AlertmanagerConfig: React.FC = () => {
 
   return (
     <>
-      <div className="pf-v6-c-page__main-breadcrumb">
+      <PageBreadcrumb>
         <Breadcrumb className="monitoring-breadcrumbs">
           <BreadcrumbItem>
             <Link className="pf-v6-c-breadcrumb__link" to={breadcrumbs[0].path}>
@@ -537,8 +540,8 @@ export const AlertmanagerConfig: React.FC = () => {
           </BreadcrumbItem>
           <BreadcrumbItem isActive>{breadcrumbs[1].name}</BreadcrumbItem>
         </Breadcrumb>
-      </div>
-      <div className="co-m-nav-title co-m-nav-title--detail co-m-nav-title--breadcrumbs">
+      </PageBreadcrumb>
+      <NavTitle className="co-m-nav-title--detail co-m-nav-title--breadcrumbs">
         <PrimaryHeading>
           <div className="co-m-pane__name co-resource-item">
             <span className="co-resource-item__resource-name" data-test-id="resource-title">
@@ -546,7 +549,7 @@ export const AlertmanagerConfig: React.FC = () => {
             </span>
           </div>
         </PrimaryHeading>
-      </div>
+      </NavTitle>
       <NavBar
         pages={[
           {
diff --git a/frontend/public/components/monitoring/alertmanager/alertmanager-yaml-editor.tsx b/frontend/public/components/monitoring/alertmanager/alertmanager-yaml-editor.tsx
index 4e0f155f6d6..436652ed094 100644
--- a/frontend/public/components/monitoring/alertmanager/alertmanager-yaml-editor.tsx
+++ b/frontend/public/components/monitoring/alertmanager/alertmanager-yaml-editor.tsx
@@ -2,13 +2,14 @@ import * as React from 'react';
 import * as _ from 'lodash-es';
 import { DocumentTitle } from '@console/shared/src/components/document-title/DocumentTitle';
 import { NavBar } from '@console/internal/components/utils';
-import { Alert, Breadcrumb, BreadcrumbItem } from '@patternfly/react-core';
+import { Alert, Breadcrumb, BreadcrumbItem, PageBreadcrumb } from '@patternfly/react-core';
 import { safeLoad } from 'js-yaml';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom-v5-compat';
 import { breadcrumbsForGlobalConfig } from '../../cluster-settings/global-config';
 
 import PrimaryHeading from '@console/shared/src/components/heading/PrimaryHeading';
+import NavTitle from '@console/shared/src/components/layout/NavTitle';
 import { K8sResourceKind } from '../../../module/k8s';
 import { AsyncComponent, Firehose, StatusBox } from '../../utils';
 import { patchAlertmanagerConfig, getAlertmanagerYAML } from './alertmanager-utils';
@@ -71,13 +72,13 @@ const AlertmanagerYAMLEditor: React.FC<AlertmanagerYAMLEditorProps> = ({ obj: se
 
   return (
     <>
-      <div className="co-m-nav-title">
-        <p className="help-block">
+      <NavTitle>
+        <p>
           {t(
             'public~Update this YAML to configure Routes, Receivers, Groupings and other Alertmanager settings.',
           )}
         </p>
-      </div>
+      </NavTitle>
       <EditAlertmanagerYAML onSave={save} obj={alertmanagerYAML}>
         {errorMsg && (
           <Alert
@@ -127,7 +128,7 @@ const AlertmanagerYAML: React.FC<{}> = () => {
 
   return (
     <>
-      <div className="pf-v6-c-page__main-breadcrumb">
+      <PageBreadcrumb>
         <Breadcrumb className="monitoring-breadcrumbs">
           <BreadcrumbItem>
             <Link className="pf-v6-c-breadcrumb__link" to={breadcrumbs[0].path}>
@@ -136,8 +137,8 @@ const AlertmanagerYAML: React.FC<{}> = () => {
           </BreadcrumbItem>
           <BreadcrumbItem isActive>{breadcrumbs[1].name}</BreadcrumbItem>
         </Breadcrumb>
-      </div>
-      <div className="co-m-nav-title co-m-nav-title--detail co-m-nav-title--breadcrumbs">
+      </PageBreadcrumb>
+      <NavTitle className="co-m-nav-title--detail co-m-nav-title--breadcrumbs">
         <PrimaryHeading>
           <div className="co-m-pane__name co-resource-item">
             <span className="co-resource-item__resource-name" data-test-id="resource-title">
@@ -145,7 +146,7 @@ const AlertmanagerYAML: React.FC<{}> = () => {
             </span>
           </div>
         </PrimaryHeading>
-      </div>
+      </NavTitle>
       <NavBar
         pages={[
           {
diff --git a/frontend/public/components/monitoring/receiver-forms/alert-manager-receiver-forms.tsx b/frontend/public/components/monitoring/receiver-forms/alert-manager-receiver-forms.tsx
index e2e27fe41ef..6730b98e84e 100644
--- a/frontend/public/components/monitoring/receiver-forms/alert-manager-receiver-forms.tsx
+++ b/frontend/public/components/monitoring/receiver-forms/alert-manager-receiver-forms.tsx
@@ -10,6 +10,7 @@ import * as classNames from 'classnames';
 
 import { APIError } from '@console/shared';
 import PrimaryHeading from '@console/shared/src/components/heading/PrimaryHeading';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { ButtonBar } from '../../utils/button-bar';
 import { Dropdown } from '../../utils/dropdown';
 import { Firehose } from '../../utils/firehose';
@@ -363,110 +364,112 @@ const ReceiverBaseForm: React.FC<ReceiverBaseFormProps> = ({
   const defaultString = isDefaultReceiver ? t('public~Default') : null;
 
   return (
-    <div className="co-m-pane__body co-m-pane__form">
+    <>
       <DocumentTitle>{t('public~{{titleVerb}} Receiver', { titleVerb })}</DocumentTitle>
-      <form className="co-m-pane__body-group" onSubmit={save}>
-        <PrimaryHeading>
+      <PaneBody className="co-m-pane__form">
+        <PrimaryHeading className="pf-v6-u-mb-md">
           {t('public~{{titleVerb}} {{receiverTypeLabel}} {{defaultString}} Receiver', {
             titleVerb,
             receiverTypeLabel,
             defaultString,
           })}
         </PrimaryHeading>
-        {isDefaultReceiver && <ReceiverInfoTip type={InitialReceivers.Default} />}
-        {formValues.receiverName === 'Critical' && !formValues.receiverType && (
-          <ReceiverInfoTip type={InitialReceivers.Critical} />
-        )}
-        {formValues.receiverName === 'Watchdog' && !formValues.receiverType && (
-          <ReceiverInfoTip type={InitialReceivers.Watchdog} />
-        )}
-        <div
-          className={classNames('form-group', {
-            'has-error': receiverNameAlreadyExist,
-          })}
-        >
-          <label className="control-label co-required">{t('public~Receiver name')}</label>
-          <span className="pf-v6-c-form-control">
-            <input
-              type="text"
-              value={formValues.receiverName}
-              onChange={(e) =>
+        <form onSubmit={save}>
+          {isDefaultReceiver && <ReceiverInfoTip type={InitialReceivers.Default} />}
+          {formValues.receiverName === 'Critical' && !formValues.receiverType && (
+            <ReceiverInfoTip type={InitialReceivers.Critical} />
+          )}
+          {formValues.receiverName === 'Watchdog' && !formValues.receiverType && (
+            <ReceiverInfoTip type={InitialReceivers.Watchdog} />
+          )}
+          <div
+            className={classNames('form-group', {
+              'has-error': receiverNameAlreadyExist,
+            })}
+          >
+            <label className="control-label co-required">{t('public~Receiver name')}</label>
+            <span className="pf-v6-c-form-control">
+              <input
+                type="text"
+                value={formValues.receiverName}
+                onChange={(e) =>
+                  dispatchFormChange({
+                    type: 'setFormValues',
+                    payload: { receiverName: e.target.value },
+                  })
+                }
+                aria-describedby="receiver-name-help"
+                name="receiverName"
+                data-test-id="receiver-name"
+                required
+              />
+            </span>
+            {receiverNameAlreadyExist && (
+              <span className="help-block">
+                <span data-test-id="receiver-name-already-exists-error">
+                  {t('public~A receiver with that name already exists.')}
+                </span>
+              </span>
+            )}
+          </div>
+          <div className="form-group co-m-pane__dropdown">
+            <label className="control-label co-required">{t('public~Receiver type')}</label>
+            <Dropdown
+              title="Select receiver type..."
+              name="receiverType"
+              items={receiverTypes}
+              dropDownClassName="dropdown--full-width"
+              data-test-id="receiver-type"
+              selectedKey={formValues.receiverType}
+              onChange={(receiverType) =>
                 dispatchFormChange({
                   type: 'setFormValues',
-                  payload: { receiverName: e.target.value },
+                  payload: {
+                    receiverType,
+                  },
                 })
               }
-              aria-describedby="receiver-name-help"
-              name="receiverName"
-              data-test-id="receiver-name"
-              required
             />
-          </span>
-          {receiverNameAlreadyExist && (
-            <span className="help-block">
-              <span data-test-id="receiver-name-already-exists-error">
-                {t('public~A receiver with that name already exists.')}
-              </span>
-            </span>
+          </div>
+
+          {formValues.receiverType && (
+            <>
+              <SubForm.Form
+                globals={defaultGlobals}
+                formValues={formValues}
+                dispatchFormChange={dispatchFormChange}
+              />
+              <RoutingLabelEditor
+                formValues={formValues}
+                dispatchFormChange={dispatchFormChange}
+                isDefaultReceiver={isDefaultReceiver}
+              />
+            </>
           )}
-        </div>
-        <div className="form-group co-m-pane__dropdown">
-          <label className="control-label co-required">{t('public~Receiver type')}</label>
-          <Dropdown
-            title="Select receiver type..."
-            name="receiverType"
-            items={receiverTypes}
-            dropDownClassName="dropdown--full-width"
-            data-test-id="receiver-type"
-            selectedKey={formValues.receiverType}
-            onChange={(receiverType) =>
-              dispatchFormChange({
-                type: 'setFormValues',
-                payload: {
-                  receiverType,
-                },
-              })
-            }
-          />
-        </div>
-
-        {formValues.receiverType && (
-          <>
-            <SubForm.Form
-              globals={defaultGlobals}
-              formValues={formValues}
-              dispatchFormChange={dispatchFormChange}
-            />
-            <RoutingLabelEditor
-              formValues={formValues}
-              dispatchFormChange={dispatchFormChange}
-              isDefaultReceiver={isDefaultReceiver}
-            />
-          </>
-        )}
-
-        <ButtonBar errorMessage={saveErrorMsg || loadErrorMsg} inProgress={inProgress}>
-          <ActionGroup className="pf-v6-c-form">
-            <Button
-              type="submit"
-              variant="primary"
-              data-test-id="save-changes"
-              isDisabled={isFormInvalid}
-            >
-              {saveButtonText}
-            </Button>
-            <Button
-              type="button"
-              variant="secondary"
-              data-test-id="cancel"
-              onClick={() => navigate(-1)}
-            >
-              {t('public~Cancel')}
-            </Button>
-          </ActionGroup>
-        </ButtonBar>
-      </form>
-    </div>
+
+          <ButtonBar errorMessage={saveErrorMsg || loadErrorMsg} inProgress={inProgress}>
+            <ActionGroup className="pf-v6-c-form">
+              <Button
+                type="submit"
+                variant="primary"
+                data-test-id="save-changes"
+                isDisabled={isFormInvalid}
+              >
+                {saveButtonText}
+              </Button>
+              <Button
+                type="button"
+                variant="secondary"
+                data-test-id="cancel"
+                onClick={() => navigate(-1)}
+              >
+                {t('public~Cancel')}
+              </Button>
+            </ActionGroup>
+          </ButtonBar>
+        </form>
+      </PaneBody>
+    </>
   );
 };
 
diff --git a/frontend/public/components/namespace.jsx b/frontend/public/components/namespace.jsx
index eed8d816aad..2ea35984c91 100644
--- a/frontend/public/components/namespace.jsx
+++ b/frontend/public/components/namespace.jsx
@@ -34,6 +34,7 @@ import {
 import { ByteDataTypes } from '@console/shared/src/graph-helper/data-utils';
 import * as k8sActions from '@console/dynamic-plugin-sdk/src/app/k8s/actions/k8s';
 import { useActivePerspective } from '@console/dynamic-plugin-sdk';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import {
   ConsoleLinkModel,
   NamespaceModel,
@@ -975,11 +976,11 @@ const ResourceUsage = ({ ns }) => {
   const { t } = useTranslation();
   const isPrometheusAvailable = usePrometheusGate();
   return isPrometheusAvailable ? (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <SectionHeading text={t('public~Resource usage')} />
       <NamespaceLineCharts ns={ns} />
       <TopPodsBarChart ns={ns} />
-    </div>
+    </PaneBody>
   ) : null;
 };
 
@@ -1063,15 +1064,15 @@ export const NamespaceDetails = ({ obj: ns, customData }) => {
   return (
     <div>
       {perspective === 'dev' && <DocumentTitle>{t('public~Project details')}</DocumentTitle>}
-      <div className="co-m-pane__body">
+      <PaneBody>
         {!customData?.hideHeading && (
           <SectionHeading text={t('public~{{kind}} details', { kind: ns.kind })} />
         )}
         <NamespaceSummary ns={ns} />
-      </div>
+      </PaneBody>
       {ns.kind === 'Namespace' && <ResourceUsage ns={ns} />}
       {!_.isEmpty(links) && (
-        <div className="co-m-pane__body">
+        <PaneBody>
           <SectionHeading text={t('public~Launcher')} />
           <ul className="pf-v6-c-list pf-m-plain">
             {_.map(_.sortBy(links, 'spec.text'), (link) => {
@@ -1082,7 +1083,7 @@ export const NamespaceDetails = ({ obj: ns, customData }) => {
               );
             })}
           </ul>
-        </div>
+        </PaneBody>
       )}
     </div>
   );
diff --git a/frontend/public/components/network-policy.tsx b/frontend/public/components/network-policy.tsx
index 00e695c8c96..2d4ab5e5a2d 100644
--- a/frontend/public/components/network-policy.tsx
+++ b/frontend/public/components/network-policy.tsx
@@ -28,7 +28,7 @@ import {
 } from '../module/k8s';
 import { Tooltip } from '@patternfly/react-core';
 import useIsMultiNetworkPolicy from '@console/app/src/components/network-policies/useIsMultiNetworkPolicy';
-
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { getGroupVersionKindForModel } from '@console/dynamic-plugin-sdk/src/lib-core';
 
 const { common } = Kebab.factory;
@@ -318,7 +318,7 @@ const Details_: React.FunctionComponent<DetailsProps> = ({ obj: np, flags }) =>
 
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading
           text={t('public~{{kind}} details', {
             kind: isMulti ? MultiNetworkPolicyModel.kind : NetworkPolicyModel.kind,
@@ -329,9 +329,9 @@ const Details_: React.FunctionComponent<DetailsProps> = ({ obj: np, flags }) =>
             <ResourceSummary resource={np} podSelector={'spec.podSelector'} showPodSelector />
           </div>
         </div>
-      </div>
+      </PaneBody>
       {affectsIngress && (
-        <div className="co-m-pane__body">
+        <PaneBody>
           <SectionHeading text={t('public~Ingress rules')} />
           <p className="co-m-pane__explanation">
             {t(
@@ -371,10 +371,10 @@ const Details_: React.FunctionComponent<DetailsProps> = ({ obj: np, flags }) =>
               </div>
             </div>
           )}
-        </div>
+        </PaneBody>
       )}
       {affectsEgress && (
-        <div className="co-m-pane__body">
+        <PaneBody>
           <SectionHeading text={t('public~Egress rules')} />
           <p className="co-m-pane__explanation">
             {t(
@@ -414,7 +414,7 @@ const Details_: React.FunctionComponent<DetailsProps> = ({ obj: np, flags }) =>
               </div>
             </div>
           )}
-        </div>
+        </PaneBody>
       )}
     </>
   );
diff --git a/frontend/public/components/persistent-volume-claim.jsx b/frontend/public/components/persistent-volume-claim.jsx
index 6412cbfd3b9..728f29d84f0 100644
--- a/frontend/public/components/persistent-volume-claim.jsx
+++ b/frontend/public/components/persistent-volume-claim.jsx
@@ -19,6 +19,7 @@ import {
   getName,
   getRequestedPVCSize,
 } from '@console/shared';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { connectToFlags } from '../reducers/connectToFlags';
 import { Conditions } from './conditions';
 import { DetailsPage, ListPage, Table, TableData } from './factory';
@@ -204,7 +205,7 @@ const Details_ = ({ flags, obj: pvc }) => {
   const { t } = useTranslation();
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         {alertComponents}
         <SectionHeading text={t('public~PersistentVolumeClaim details')} />
         {totalCapacityMetric && !loading && (
@@ -291,11 +292,11 @@ const Details_ = ({ flags, obj: pvc }) => {
             </dl>
           </div>
         </div>
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={t('public~Conditions')} />
         <Conditions conditions={conditions} />
-      </div>
+      </PaneBody>
     </>
   );
 };
diff --git a/frontend/public/components/persistent-volume.jsx b/frontend/public/components/persistent-volume.jsx
index 49eaf594ffa..020205e1a81 100644
--- a/frontend/public/components/persistent-volume.jsx
+++ b/frontend/public/components/persistent-volume.jsx
@@ -3,6 +3,7 @@ import { sortable } from '@patternfly/react-table';
 import { Status } from '@console/shared';
 import { useTranslation } from 'react-i18next';
 
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { DetailsPage, ListPage, Table, TableData } from './factory';
 import {
   Kebab,
@@ -91,7 +92,7 @@ const Details = ({ obj: pv }) => {
   const reclaimPolicy = _.get(pv, 'spec.persistentVolumeReclaimPolicy');
   const nfsExport = _.get(pv, 'spec.csi.volumeAttributes.share');
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <SectionHeading text={t('public~PersistentVolume details')} />
       <div className="row">
         <div className="col-sm-6">
@@ -145,7 +146,7 @@ const Details = ({ obj: pv }) => {
           </dl>
         </div>
       </div>
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/public/components/pod-logs.jsx b/frontend/public/components/pod-logs.jsx
index 3851d4f96a2..907e5bf310d 100644
--- a/frontend/public/components/pod-logs.jsx
+++ b/frontend/public/components/pod-logs.jsx
@@ -1,6 +1,7 @@
 import * as _ from 'lodash-es';
 import * as React from 'react';
 
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import {
   ContainerSelect,
   getQueryArgument,
@@ -100,14 +101,14 @@ export class PodLogs extends React.Component {
     );
 
     return (
-      <div className="co-m-pane__body co-m-pane__body--full-height">
+      <PaneBody fullHeight>
         <ResourceLog
           containerName={currentContainer ? currentContainer.name : ''}
           dropdown={containerDropdown}
           resource={this.props.obj}
           resourceStatus={currentContainerStatus}
         />
-      </div>
+      </PaneBody>
     );
   }
 }
diff --git a/frontend/public/components/pod.tsx b/frontend/public/components/pod.tsx
index 7238b286010..4aa2ecf1edc 100644
--- a/frontend/public/components/pod.tsx
+++ b/frontend/public/components/pod.tsx
@@ -36,6 +36,7 @@ import {
   COLUMN_MANAGEMENT_LOCAL_STORAGE_KEY,
 } from '@console/shared/src/constants/common';
 import { ListPageBody, RowFilter, RowProps, TableColumn } from '@console/dynamic-plugin-sdk';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import * as UIActions from '../actions/ui';
 import { coFetchJSON } from '../co-fetch';
 import {
@@ -908,7 +909,7 @@ const Details: React.FC<PodDetailsProps> = ({ obj: pod }) => {
   return (
     <>
       <ScrollToTopOnMount />
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading text={t('public~Pod details')} />
         <div className="row">
           <div className="col-sm-6">
@@ -918,32 +919,32 @@ const Details: React.FC<PodDetailsProps> = ({ obj: pod }) => {
             <PodDetailsList pod={pod} />
           </div>
         </div>
-      </div>
+      </PaneBody>
       {pod.spec.initContainers && (
-        <div className="co-m-pane__body">
+        <PaneBody>
           <PodContainerTable
             key="initContainerTable"
             heading={t('public~Init containers')}
             containers={pod.spec.initContainers}
             pod={pod}
           />
-        </div>
+        </PaneBody>
       )}
-      <div className="co-m-pane__body">
+      <PaneBody>
         <PodContainerTable
           key="containerTable"
           heading={t('public~Containers')}
           containers={pod.spec.containers}
           pod={pod}
         />
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <VolumesTable resource={pod} heading={t('public~Volumes')} />
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={t('public~Conditions')} />
         <Conditions conditions={pod.status.conditions} />
-      </div>
+      </PaneBody>
     </>
   );
 };
@@ -966,7 +967,7 @@ export const PodExecLoader: React.FC<PodExecLoaderProps> = ({
   initialContainer,
   infoMessage,
 }) => (
-  <div className="co-m-pane__body">
+  <PaneBody>
     <div className="row">
       <div className="col-xs-12">
         <div className="panel-body">
@@ -980,7 +981,7 @@ export const PodExecLoader: React.FC<PodExecLoaderProps> = ({
         </div>
       </div>
     </div>
-  </div>
+  </PaneBody>
 );
 export const PodsDetailsPage: React.FC<PodDetailsPageProps> = (props) => {
   const prometheusIsAvailable = usePrometheusGate();
diff --git a/frontend/public/components/replicaset.jsx b/frontend/public/components/replicaset.jsx
index 27fd5163a3b..f2f6be47739 100644
--- a/frontend/public/components/replicaset.jsx
+++ b/frontend/public/components/replicaset.jsx
@@ -5,6 +5,7 @@ import * as classNames from 'classnames';
 import { Link } from 'react-router-dom-v5-compat';
 import { sortable } from '@patternfly/react-table';
 import { useTranslation } from 'react-i18next';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { DetailsPage, ListPage, Table, TableData } from './factory';
 import {
   Kebab,
@@ -43,7 +44,7 @@ const Details = ({ obj: replicaSet }) => {
   const { t } = useTranslation();
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading text={t('public~ReplicaSet details')} />
         <div className="row">
           <div className="col-md-6">
@@ -64,14 +65,14 @@ const Details = ({ obj: replicaSet }) => {
             </dl>
           </div>
         </div>
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={t('public~Containers')} />
         <ContainerTable containers={replicaSet.spec.template.spec.containers} />
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <VolumesTable resource={replicaSet} heading={t('public~Volumes')} />
-      </div>
+      </PaneBody>
     </>
   );
 };
diff --git a/frontend/public/components/replication-controller.jsx b/frontend/public/components/replication-controller.jsx
index 23aaccea52b..07944221b39 100644
--- a/frontend/public/components/replication-controller.jsx
+++ b/frontend/public/components/replication-controller.jsx
@@ -10,6 +10,7 @@ import {
   ActionMenu,
   ActionMenuVariant,
 } from '@console/shared';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { ResourceEventStream } from './events';
 import { DetailsPage, ListPage, Table, TableData } from './factory';
 import {
@@ -67,7 +68,7 @@ export const ReplicationControllersDetailsPage = (props) => {
     ]);
     return (
       <>
-        <div className="co-m-pane__body">
+        <PaneBody>
           <SectionHeading text={t('public~ReplicationController details')} />
           <div className="row">
             <div className="col-md-6">
@@ -101,14 +102,14 @@ export const ReplicationControllersDetailsPage = (props) => {
               </dl>
             </div>
           </div>
-        </div>
-        <div className="co-m-pane__body">
+        </PaneBody>
+        <PaneBody>
           <SectionHeading text={t('public~Containers')} />
           <ContainerTable containers={replicationController.spec.template.spec.containers} />
-        </div>
-        <div className="co-m-pane__body">
+        </PaneBody>
+        <PaneBody>
           <VolumesTable resource={replicationController} heading={t('public~Volumes')} />
-        </div>
+        </PaneBody>
       </>
     );
   };
diff --git a/frontend/public/components/resource-quota.jsx b/frontend/public/components/resource-quota.jsx
index 54fc1deae05..b16dae6ecaa 100644
--- a/frontend/public/components/resource-quota.jsx
+++ b/frontend/public/components/resource-quota.jsx
@@ -12,6 +12,7 @@ import { useTranslation } from 'react-i18next';
 import AppliedClusterResourceQuotaCharts from '@console/app/src/components/resource-quota/AppliedClusterResourceQuotaCharts';
 import ResourceQuotaCharts from '@console/app/src/components/resource-quota/ResourceQuotaCharts';
 import ClusterResourceQuotaCharts from '@console/app/src/components/resource-quota/ClusterResourceQuotaCharts';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 
 import { FLAGS, YellowExclamationTriangleIcon } from '@console/shared';
 import { DetailsPage, MultiListPage, Table, TableData } from './factory';
@@ -305,7 +306,7 @@ const Details = ({ obj: rq }) => {
 
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading text={text} />
         {charts}
         <div className="row">
@@ -348,8 +349,8 @@ const Details = ({ obj: rq }) => {
             </div>
           )}
         </div>
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={text} style={{ display: 'block', marginBottom: '20px' }}>
           <FieldLevelHelp>
             <p>
@@ -397,7 +398,7 @@ const Details = ({ obj: rq }) => {
             ))}
           </div>
         </div>
-      </div>
+      </PaneBody>
     </>
   );
 };
diff --git a/frontend/public/components/routes.tsx b/frontend/public/components/routes.tsx
index 1af1314c6da..9ad104d25af 100644
--- a/frontend/public/components/routes.tsx
+++ b/frontend/public/components/routes.tsx
@@ -12,6 +12,7 @@ import i18next from 'i18next';
 import { Status } from '@console/shared';
 import { FLAGS } from '@console/shared/src/constants';
 import TertiaryHeading from '@console/shared/src/components/heading/TertiaryHeading';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { DetailsPage, ListPage, RowFunctionArgs, Table, TableData } from './factory';
 import {
   CopyToClipboard,
@@ -409,7 +410,7 @@ const RouteDetails: React.FC<RoutesDetailsProps> = ({ obj: route }) => {
   );
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading text={t('public~Route details')} />
         <div className="row">
           <div className="col-sm-6">
@@ -459,13 +460,13 @@ const RouteDetails: React.FC<RoutesDetailsProps> = ({ obj: route }) => {
             </dl>
           </div>
         </div>
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={t('public~TLS settings')} />
         <TLSSettings route={route} />
-      </div>
+      </PaneBody>
       {!_.isEmpty(route.spec.alternateBackends) && (
-        <div className="co-m-pane__body">
+        <PaneBody>
           <SectionHeading text={t('public~Traffic')} />
           <p className="co-m-pane__explanation">
             {t('public~This route splits traffic across multiple services.')}
@@ -487,14 +488,14 @@ const RouteDetails: React.FC<RoutesDetailsProps> = ({ obj: route }) => {
               </tbody>
             </table>
           </div>
-        </div>
+        </PaneBody>
       )}
       {_.isEmpty(route.status.ingress) ? (
         <ConsoleEmptyState>{t('public~No route status')}</ConsoleEmptyState>
       ) : (
-        <div className="co-m-pane__body">
+        <PaneBody>
           <RouteIngressStatus route={route} />
-        </div>
+        </PaneBody>
       )}
     </>
   );
diff --git a/frontend/public/components/routes/RouteForm.tsx b/frontend/public/components/routes/RouteForm.tsx
index f083bac4511..0bfb0429736 100644
--- a/frontend/public/components/routes/RouteForm.tsx
+++ b/frontend/public/components/routes/RouteForm.tsx
@@ -73,7 +73,7 @@ export const RouteForm: React.FC<FormikProps<FormikValues> & RouteFormProps> = (
         helpText={t('public~Routing is a way to make your application publicly visible.')}
       />
       <FlexForm onSubmit={handleSubmit}>
-        <FormBody flexLayout className="co-m-pane__body--no-top-margin">
+        <FormBody flexLayout className="pf-v6-u-mt-0">
           <SyncedEditorField
             name="editorType"
             formContext={{
diff --git a/frontend/public/components/search.tsx b/frontend/public/components/search.tsx
index a4d86c26771..3716070055c 100644
--- a/frontend/public/components/search.tsx
+++ b/frontend/public/components/search.tsx
@@ -10,7 +10,6 @@ import {
   AccordionToggle,
   Button,
   ButtonVariant,
-  Divider,
   PageSection,
   Content,
   Toolbar,
@@ -284,7 +283,6 @@ const SearchPage_: React.FC<SearchProps> = (props) => {
           </ToolbarContent>
         </Toolbar>
       </PageSection>
-      <Divider component="div" />
       <PageSection hasBodyWrapper={false}>
         <Accordion asDefinitionList={false}>
           {[...selectedItems].map((resource) => {
diff --git a/frontend/public/components/secret.jsx b/frontend/public/components/secret.jsx
index c511c3a2150..52c60c6dcf8 100644
--- a/frontend/public/components/secret.jsx
+++ b/frontend/public/components/secret.jsx
@@ -3,6 +3,7 @@ import * as classNames from 'classnames';
 import { sortable } from '@patternfly/react-table';
 import { useTranslation } from 'react-i18next';
 import i18next from 'i18next';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { DetailsPage, ListPage, Table, TableData } from './factory';
 import { SecretData } from './configmap-and-secret-data';
 import {
@@ -98,7 +99,7 @@ const SecretDetails = ({ obj: secret }) => {
   const { data, type } = secret;
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading text={t('public~Secret details')} />
         <div className="row">
           <div className="col-md-6">
@@ -112,10 +113,10 @@ const SecretDetails = ({ obj: secret }) => {
             </div>
           )}
         </div>
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SecretData data={data} type={type} />
-      </div>
+      </PaneBody>
     </>
   );
 };
diff --git a/frontend/public/components/secrets/create-secret/SecretFormWrapper.tsx b/frontend/public/components/secrets/create-secret/SecretFormWrapper.tsx
index ab8339f148b..7224dd19daf 100644
--- a/frontend/public/components/secrets/create-secret/SecretFormWrapper.tsx
+++ b/frontend/public/components/secrets/create-secret/SecretFormWrapper.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { Base64 } from 'js-base64';
 import { ActionGroup, Button } from '@patternfly/react-core';
 import { useParams, useNavigate } from 'react-router-dom-v5-compat';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { k8sCreate, k8sUpdate, K8sResourceKind, referenceFor } from '../../../module/k8s';
 import { ButtonBar } from '../../utils/button-bar';
 import { PageHeading } from '../../utils/headings';
@@ -170,8 +171,8 @@ export const SecretFormWrapper: React.FC<BaseEditSecretProps_> = (props) => {
     <div className="co-m-pane__form">
       <DocumentTitle>{title}</DocumentTitle>
       <PageHeading title={title} helpText={helptext} />
-      <div className="co-m-pane__body">
-        <form className="co-m-pane__body-group co-create-secret-form" onSubmit={save}>
+      <PaneBody>
+        <form className="co-create-secret-form" onSubmit={save}>
           {renderBody()}
           <ButtonBar errorMessage={error} inProgress={inProgress}>
             <ActionGroup className="pf-v6-c-form">
@@ -190,7 +191,7 @@ export const SecretFormWrapper: React.FC<BaseEditSecretProps_> = (props) => {
             </ActionGroup>
           </ButtonBar>
         </form>
-      </div>
+      </PaneBody>
     </div>
   );
 };
diff --git a/frontend/public/components/service-account.jsx b/frontend/public/components/service-account.jsx
index fcb94285309..b0d7c43cb0b 100644
--- a/frontend/public/components/service-account.jsx
+++ b/frontend/public/components/service-account.jsx
@@ -1,6 +1,7 @@
 import * as classNames from 'classnames';
 import { sortable } from '@patternfly/react-table';
 import { useTranslation } from 'react-i18next';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { DetailsPage, ListPage, Table, TableData } from './factory';
 import {
   Kebab,
@@ -57,14 +58,14 @@ const Details = ({ obj: serviceaccount }) => {
   const { t } = useTranslation();
 
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <SectionHeading text={t('public~ServiceAccount details')} />
       <div className="row">
         <div className="col-md-6">
           <ResourceSummary resource={serviceaccount} />
         </div>
       </div>
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/public/components/service.jsx b/frontend/public/components/service.jsx
index be6822bbfad..9405c03bd9b 100644
--- a/frontend/public/components/service.jsx
+++ b/frontend/public/components/service.jsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import * as classNames from 'classnames';
 import { sortable } from '@patternfly/react-table';
 
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { DetailsPage, ListPage, Table, TableData } from './factory';
 import {
   DetailsItem,
@@ -238,7 +239,7 @@ const ServicePortMapping = ({ ports }) => {
 const Details = ({ obj: s }) => {
   const { t } = useTranslation();
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <div className="row">
         <div className="col-md-6">
           <SectionHeading text={t('public~Service details')} />
@@ -268,7 +269,7 @@ const Details = ({ obj: s }) => {
           </dl>
         </div>
       </div>
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/public/components/sidebars/resource-sidebar.tsx b/frontend/public/components/sidebars/resource-sidebar.tsx
index 8a9ffe512c7..7eb893f5ccc 100644
--- a/frontend/public/components/sidebars/resource-sidebar.tsx
+++ b/frontend/public/components/sidebars/resource-sidebar.tsx
@@ -13,7 +13,8 @@ import {
 import { ExploreType } from './explore-type-sidebar';
 import { SimpleTabNav, Tab } from '../utils';
 import { Sample } from '@console/shared';
-import { Title } from '@patternfly/react-core';
+import { Flex, FlexItem, Title } from '@patternfly/react-core';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 
 const sidebarScrollTop = () => {
   document.getElementsByClassName('co-p-has-sidebar__sidebar')[0].scrollTop = 0;
@@ -31,17 +32,17 @@ const ResourceSidebarWrapper: React.FC<{
       className="co-p-has-sidebar__sidebar co-p-has-sidebar__sidebar--bordered hidden-sm hidden-xs"
       data-test="resource-sidebar"
     >
-      <div className="co-m-pane__body co-p-has-sidebar__sidebar-body">
-        <CloseButton
-          additionalClassName="co-p-has-sidebar__close-button"
-          ariaLabel={t('public~Close')}
-          onClick={toggleSidebar}
-        />
-        <Title headingLevel="h2" className="co-p-has-sidebar__sidebar-heading text-capitalize">
-          {label}
-        </Title>
+      <PaneBody className="co-p-has-sidebar__sidebar-body">
+        <Flex flexWrap={{ default: 'nowrap' }}>
+          <FlexItem grow={{ default: 'grow' }}>
+            <Title headingLevel="h2" className="pf-v6-u-text-break-word text-capitalize">
+              {label}
+            </Title>
+          </FlexItem>
+          <CloseButton ariaLabel={t('public~Close')} onClick={toggleSidebar} />
+        </Flex>
         {children}
-      </div>
+      </PaneBody>
     </div>
   );
 };
diff --git a/frontend/public/components/stateful-set.tsx b/frontend/public/components/stateful-set.tsx
index 8248ee327f7..5b14c3ba3b2 100644
--- a/frontend/public/components/stateful-set.tsx
+++ b/frontend/public/components/stateful-set.tsx
@@ -9,6 +9,7 @@ import {
   LazyActionMenu,
   usePrometheusGate,
 } from '@console/shared';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { DeploymentKind, K8sResourceKind, referenceForModel, referenceFor } from '../module/k8s';
 import { ResourceEventStream } from './events';
 import { DetailsPage, ListPage, Table, RowFunctionArgs } from './factory';
@@ -58,7 +59,7 @@ const StatefulSetDetails: React.FC<StatefulSetDetailsProps> = ({ obj: ss }) => {
   const { t } = useTranslation();
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading text={t('public~StatefulSet details')} />
         <PodRingSet key={ss.metadata.uid} obj={ss} path="/spec/replicas" />
         <div className="row">
@@ -71,14 +72,14 @@ const StatefulSetDetails: React.FC<StatefulSetDetailsProps> = ({ obj: ss }) => {
             <PodDisruptionBudgetField obj={ss} />
           </dl>
         </div>
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={t('public~Containers')} />
         <ContainerTable containers={ss.spec.template.spec.containers} />
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <VolumesTable resource={ss} heading={t('public~Volumes')} />
-      </div>
+      </PaneBody>
     </>
   );
 };
diff --git a/frontend/public/components/storage-class-form.tsx b/frontend/public/components/storage-class-form.tsx
index 6296b9b2b46..053663d788c 100755
--- a/frontend/public/components/storage-class-form.tsx
+++ b/frontend/public/components/storage-class-form.tsx
@@ -17,6 +17,7 @@ import {
   K8sResourceCommon,
 } from '@console/dynamic-plugin-sdk';
 import { ResolvedCodeRefProperties } from '@console/dynamic-plugin-sdk/src/types';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import {
   AsyncComponent,
   ButtonBar,
@@ -583,7 +584,7 @@ const StorageClassFormInner: React.FC<StorageClassFormProps> = (props) => {
           </Link>
         }
       />
-      <div className="co-m-pane__body co-m-pane__body--no-top-margin">
+      <PaneBody>
         <form data-test-id="storage-class-form">
           <div className={classNames('form-group', { 'has-error': fieldErrors.nameValidationMsg })}>
             <label className="control-label co-required" htmlFor="storage-class-name">
@@ -719,7 +720,7 @@ const StorageClassFormInner: React.FC<StorageClassFormProps> = (props) => {
             </ActionGroup>
           </ButtonBar>
         </form>
-      </div>
+      </PaneBody>
     </div>
   );
 };
diff --git a/frontend/public/components/storage-class.tsx b/frontend/public/components/storage-class.tsx
index 01085ea13a8..4a996cff761 100644
--- a/frontend/public/components/storage-class.tsx
+++ b/frontend/public/components/storage-class.tsx
@@ -9,6 +9,7 @@ import {
 } from '@console/shared';
 import { useTranslation } from 'react-i18next';
 import * as classNames from 'classnames';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { DetailsPage, ListPage, Table, TableData, RowFunctionArgs } from './factory';
 import {
   DetailsItem,
@@ -49,30 +50,28 @@ const tableColumnClasses = [
 const StorageClassDetails: React.FC<StorageClassDetailsProps> = ({ obj }) => {
   const { t } = useTranslation();
   return (
-    <>
-      <div className="co-m-pane__body">
-        <SectionHeading text={t('public~StorageClass details')} />
-        <div className="row">
-          <div className="col-sm-6">
-            <ResourceSummary resource={obj}>
-              <DetailsItem label={t('public~Provisioner')} obj={obj} path="provisioner" />
-            </ResourceSummary>
-          </div>
-          <div className="col-sm-6">
-            <dl className="co-m-pane__details">
-              <DetailsItem label={t('public~Reclaim policy')} obj={obj} path="reclaimPolicy" />
-              <dt>{t('public~Default class')}</dt>
-              <dd>{isDefaultClass(obj) ? t('public~True') : t('public~False')}</dd>
-              <DetailsItem
-                label={t('public~Volume binding mode')}
-                obj={obj}
-                path="volumeBindingMode"
-              />
-            </dl>
-          </div>
+    <PaneBody>
+      <SectionHeading text={t('public~StorageClass details')} />
+      <div className="row">
+        <div className="col-sm-6">
+          <ResourceSummary resource={obj}>
+            <DetailsItem label={t('public~Provisioner')} obj={obj} path="provisioner" />
+          </ResourceSummary>
+        </div>
+        <div className="col-sm-6">
+          <dl className="co-m-pane__details">
+            <DetailsItem label={t('public~Reclaim policy')} obj={obj} path="reclaimPolicy" />
+            <dt>{t('public~Default class')}</dt>
+            <dd>{isDefaultClass(obj) ? t('public~True') : t('public~False')}</dd>
+            <DetailsItem
+              label={t('public~Volume binding mode')}
+              obj={obj}
+              path="volumeBindingMode"
+            />
+          </dl>
         </div>
       </div>
-    </>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/public/components/storage/attach-storage.tsx b/frontend/public/components/storage/attach-storage.tsx
index c7ba98dd8cf..a55ebed8e4a 100644
--- a/frontend/public/components/storage/attach-storage.tsx
+++ b/frontend/public/components/storage/attach-storage.tsx
@@ -8,6 +8,7 @@ import { isStorageProvider, StorageProvider } from '@console/dynamic-plugin-sdk'
 import { useDeepCompareMemoize } from '@console/shared';
 import { ErrorBoundaryPage } from '@console/shared/src/components/error';
 import PrimaryHeading from '@console/shared/src/components/heading/PrimaryHeading';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { K8sKind } from '../../module/k8s';
 import { AsyncComponent, ResourceLink, LoadingBox } from '../utils';
 import { connectToPlural } from '../../kinds';
@@ -59,7 +60,7 @@ const AttachStorageInner: React.FC<AttachStorageFormProps> = (props) => {
   return !kindObj && kindsInFlight ? (
     <LoadingBox />
   ) : (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <DocumentTitle>{t('public~Add Storage')}</DocumentTitle>
       <div className="co-storage-heading__wrapper">
         <Trans t={t} ns="public">
@@ -97,7 +98,7 @@ const AttachStorageInner: React.FC<AttachStorageFormProps> = (props) => {
       <ErrorBoundaryPage>
         <AsyncComponent loader={storageProvidersMap[activeProvider].Component} {...props} />
       </ErrorBoundaryPage>
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/public/components/storage/create-pvc.tsx b/frontend/public/components/storage/create-pvc.tsx
index 41d0fa5b3aa..b8efc6c4436 100644
--- a/frontend/public/components/storage/create-pvc.tsx
+++ b/frontend/public/components/storage/create-pvc.tsx
@@ -8,6 +8,7 @@ import { ActionGroup, Button } from '@patternfly/react-core';
 import { isObjectSC } from '@console/shared/src/utils';
 import { AccessModeSelector } from '@console/app/src/components/access-modes/access-mode';
 import { VolumeModeSelector } from '@console/app/src/components/volume-modes/volume-mode';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { k8sCreate, K8sResourceKind, referenceFor } from '../../module/k8s';
 import {
   AsyncComponent,
@@ -263,7 +264,7 @@ export const CreatePVCPage: React.FC<CreatePVCPageProps> = (props) => {
   };
 
   return (
-    <div className="co-m-pane__form">
+    <>
       <DocumentTitle>{title}</DocumentTitle>
       <PageHeading
         title={title}
@@ -278,22 +279,24 @@ export const CreatePVCPage: React.FC<CreatePVCPageProps> = (props) => {
           </Link>
         }
       />
-      <div className="co-m-pane__body co-m-pane__body--no-top-margin">
-        <form className="co-m-pane__body-group" onSubmit={save}>
-          <CreatePVCForm onChange={setPvcObj} namespace={namespace} />
-          <ButtonBar errorMessage={error} inProgress={inProgress}>
-            <ActionGroup className="pf-v6-c-form">
-              <Button id="save-changes" data-test="create-pvc" type="submit" variant="primary">
-                {t('public~Create')}
-              </Button>
-              <Button onClick={() => navigate(-1)} type="button" variant="secondary">
-                {t('public~Cancel')}
-              </Button>
-            </ActionGroup>
-          </ButtonBar>
-        </form>
-      </div>
-    </div>
+      <PaneBody>
+        <div className="co-m-pane__form">
+          <form onSubmit={save}>
+            <CreatePVCForm onChange={setPvcObj} namespace={namespace} />
+            <ButtonBar errorMessage={error} inProgress={inProgress}>
+              <ActionGroup className="pf-v6-c-form">
+                <Button id="save-changes" data-test="create-pvc" type="submit" variant="primary">
+                  {t('public~Create')}
+                </Button>
+                <Button onClick={() => navigate(-1)} type="button" variant="secondary">
+                  {t('public~Cancel')}
+                </Button>
+              </ActionGroup>
+            </ButtonBar>
+          </form>
+        </div>
+      </PaneBody>
+    </>
   );
 };
 
diff --git a/frontend/public/components/template-instance.tsx b/frontend/public/components/template-instance.tsx
index 102b2d8be08..de2d6121268 100644
--- a/frontend/public/components/template-instance.tsx
+++ b/frontend/public/components/template-instance.tsx
@@ -5,6 +5,7 @@ import { sortable } from '@patternfly/react-table';
 import { useTranslation } from 'react-i18next';
 
 import { Status } from '@console/shared';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { DetailsPage, ListPage, RowFunctionArgs, Table, TableData } from './factory';
 import { Conditions } from './conditions';
 import { getTemplateInstanceStatus, referenceFor, TemplateInstanceKind } from '../module/k8s';
@@ -129,39 +130,37 @@ const TemplateInstanceDetails: React.SFC<TemplateInstanceDetailsProps> = ({ obj
   const conditions = _.get(obj, 'status.conditions', []);
   return (
     <>
-      <div className="co-m-pane__body">
+      <PaneBody>
         <SectionHeading text={t('public~TemplateInstance details')} />
-        <div className="co-m-pane__body-group">
-          <div className="row">
-            <div className="col-sm-6">
-              <ResourceSummary resource={obj} />
-            </div>
-            <div className="col-sm-6">
-              <dl className="co-m-pane__details">
-                <dt>{t('public~Status')}</dt>
-                <dd>
-                  <Status status={status} />
-                </dd>
-                {secretName && (
-                  <>
-                    <dt>{t('public~Parameters')}</dt>
-                    <dd>
-                      <ResourceLink
-                        kind="Secret"
-                        name={secretName}
-                        namespace={obj.metadata.namespace}
-                      />
-                    </dd>
-                  </>
-                )}
-                <dt>{t('public~Requester')}</dt>
-                <dd>{requester || '-'}</dd>
-              </dl>
-            </div>
+        <div className="row">
+          <div className="col-sm-6">
+            <ResourceSummary resource={obj} />
+          </div>
+          <div className="col-sm-6">
+            <dl className="co-m-pane__details">
+              <dt>{t('public~Status')}</dt>
+              <dd>
+                <Status status={status} />
+              </dd>
+              {secretName && (
+                <>
+                  <dt>{t('public~Parameters')}</dt>
+                  <dd>
+                    <ResourceLink
+                      kind="Secret"
+                      name={secretName}
+                      namespace={obj.metadata.namespace}
+                    />
+                  </dd>
+                </>
+              )}
+              <dt>{t('public~Requester')}</dt>
+              <dd>{requester || '-'}</dd>
+            </dl>
           </div>
         </div>
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={t('public~Objects')} />
         <div className="co-m-table-grid co-m-table-grid--bordered">
           <div className="row co-m-table-grid__head">
@@ -189,11 +188,11 @@ const TemplateInstanceDetails: React.SFC<TemplateInstanceDetailsProps> = ({ obj
             )}
           </div>
         </div>
-      </div>
-      <div className="co-m-pane__body">
+      </PaneBody>
+      <PaneBody>
         <SectionHeading text={t('public~Conditions')} />
         <Conditions conditions={conditions} />
-      </div>
+      </PaneBody>
     </>
   );
 };
diff --git a/frontend/public/components/user.tsx b/frontend/public/components/user.tsx
index 6243bbfee1c..306530c5732 100644
--- a/frontend/public/components/user.tsx
+++ b/frontend/public/components/user.tsx
@@ -6,6 +6,7 @@ import { Button, Content } from '@patternfly/react-core';
 import { sortable } from '@patternfly/react-table';
 
 import { useCanEditIdentityProviders, useOAuthData } from '@console/shared/src/hooks/oauth';
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import * as UIActions from '../actions/ui';
 import { OAuthModel, UserModel } from '../models';
 import { K8sKind, referenceForModel, UserKind } from '../module/k8s';
@@ -196,7 +197,7 @@ const RoleBindingsTab: React.FC<RoleBindingsTabProps> = ({ obj }) => (
 const UserDetails: React.FC<UserDetailsProps> = ({ obj }) => {
   const { t } = useTranslation();
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <SectionHeading text={t('public~User details')} />
       <ResourceSummary resource={obj}>
         <dt>{t('public~Full name')}</dt>
@@ -208,7 +209,7 @@ const UserDetails: React.FC<UserDetailsProps> = ({ obj }) => {
           ))}
         </dd>
       </ResourceSummary>
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/public/components/utils/_alerts.scss b/frontend/public/components/utils/_alerts.scss
index 40d11015a7c..593a296bbe7 100644
--- a/frontend/public/components/utils/_alerts.scss
+++ b/frontend/public/components/utils/_alerts.scss
@@ -14,7 +14,7 @@
 
 .co-alert--margin-top {
   margin-bottom: 0;
-  margin-top: $pf-v6-global-gutter;
+  margin-top: $pf-v6-global-gutter-y;
 }
 
 .co-alert--scrollable .pf-v6-c-alert__description {
diff --git a/frontend/public/components/utils/_name-value-editor.scss b/frontend/public/components/utils/_name-value-editor.scss
index 70cae293b8d..059b0bc960b 100644
--- a/frontend/public/components/utils/_name-value-editor.scss
+++ b/frontend/public/components/utils/_name-value-editor.scss
@@ -14,7 +14,7 @@ $drag-column-width: 28px;
   background: transparent;
   border: 0;
   display: flex;
-  padding-left: $pf-v6-global-gutter !important;
+  padding-left: $pf-v6-global-gutter-x !important;
 }
 
 .pairs-list__action-icon--reorder {
diff --git a/frontend/public/components/utils/_skeleton-screen.scss b/frontend/public/components/utils/_skeleton-screen.scss
index b0471bf1d40..85c01550f19 100644
--- a/frontend/public/components/utils/_skeleton-screen.scss
+++ b/frontend/public/components/utils/_skeleton-screen.scss
@@ -117,13 +117,8 @@ $skeleton-tile-desc-line-bone: linear-gradient(
   flex: 1;
   height: 100%;
   position: relative;
-  margin: 0 $pf-v6-global-gutter $pf-v6-global-gutter;
-  padding: $pf-v6-global-gutter 0;
-  @media (min-width: $pf-v6-global--breakpoint--xl) {
-    margin-bottom: $pf-v6-global-gutter--md;
-    margin-left: $pf-v6-global-gutter--md;
-    margin-right: $pf-v6-global-gutter--md;
-  }
+  margin: 0 $pf-v6-global-gutter-x $pf-v6-global-gutter-y;
+  padding: $pf-v6-global-gutter-y 0;
 }
 
 .skeleton-catalog--grid {
@@ -194,7 +189,7 @@ $skeleton-tile-desc-line-bone: linear-gradient(
 }
 
 .skeleton-detail-view {
-  padding: $pf-v6-global-gutter--md;
+  padding: $pf-v6-global-gutter-y $pf-v6-global-gutter-x;
   height: 100%;
   width: 100%;
 }
@@ -325,7 +320,10 @@ $skeleton-tile-desc-line-bone: linear-gradient(
   }
   // table rows
   &::after {
-    background-image: linear-gradient(var(--pf-t--global--border--color--default) 1px, transparent 0px),
+    background-image: linear-gradient(
+        var(--pf-t--global--border--color--default) 1px,
+        transparent 0px
+      ),
       linear-gradient($skeleton-color 26px, transparent 26px);
     background-size: 100% 46px, 50% 46px;
     background-position: 50px 0%, 0px 10px;
diff --git a/frontend/public/components/utils/build-hooks.tsx b/frontend/public/components/utils/build-hooks.tsx
index b76b6f5a3df..fba89386116 100644
--- a/frontend/public/components/utils/build-hooks.tsx
+++ b/frontend/public/components/utils/build-hooks.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as _ from 'lodash-es';
 import { useTranslation } from 'react-i18next';
 
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { K8sResourceKind } from '../../module/k8s';
 import { SectionHeading } from './headings';
 
@@ -12,7 +13,7 @@ export const BuildHooks: React.SFC<BuildHooksProps> = ({ resource }) => {
   const { t } = useTranslation();
 
   return !_.isEmpty(postCommitCommand) || !_.isEmpty(postCommitArgs) || postCommitScript ? (
-    <div className="co-m-pane__body">
+    <PaneBody>
       <SectionHeading text={t('public~Post-commit hooks')} />
       <dl className="co-m-pane__details">
         {!_.isEmpty(postCommitCommand) && <dt>{t('public~Command')}</dt>}
@@ -34,7 +35,7 @@ export const BuildHooks: React.SFC<BuildHooksProps> = ({ resource }) => {
           </dd>
         )}
       </dl>
-    </div>
+    </PaneBody>
   ) : null;
 };
 
diff --git a/frontend/public/components/utils/headings.tsx b/frontend/public/components/utils/headings.tsx
index a92769ee60f..f1437d78d89 100644
--- a/frontend/public/components/utils/headings.tsx
+++ b/frontend/public/components/utils/headings.tsx
@@ -13,6 +13,7 @@ import {
   Content,
   ContentVariants,
   Title,
+  PageBreadcrumb,
 } from '@patternfly/react-core';
 import { ResourceStatus, useActivePerspective } from '@console/dynamic-plugin-sdk';
 import { RootState } from '@console/internal/redux';
@@ -27,6 +28,7 @@ import { getActiveNamespace } from '@console/internal/reducers/ui';
 import PrimaryHeading from '@console/shared/src/components/heading/PrimaryHeading';
 import SecondaryHeading from '@console/shared/src/components/heading/SecondaryHeading';
 import { FavoriteButton } from '@console/app/src/components/favorite/FavoriteButton';
+import NavTitle from '@console/shared/src/components/layout/NavTitle';
 
 import {
   ActionsMenu,
@@ -102,7 +104,6 @@ export const PageHeading = connectToModel((props: PageHeadingProps) => {
   const {
     kind,
     kindObj,
-    detail,
     title,
     menuActions,
     buttonActions,
@@ -122,6 +123,7 @@ export const PageHeading = connectToModel((props: PageHeadingProps) => {
     helpText,
     'data-test': dataTestId,
     hideFavoriteButton,
+    children,
   } = props;
   const [perspective] = useActivePerspective();
   const extraResources = _.reduce(
@@ -145,7 +147,7 @@ export const PageHeading = connectToModel((props: PageHeadingProps) => {
   return (
     <>
       {showBreadcrumbs && (
-        <div className="pf-v6-c-page__main-breadcrumb">
+        <PageBreadcrumb>
           <Split style={{ alignItems: 'baseline' }}>
             <SplitItem isFilled>
               <BreadCrumbs breadcrumbs={breadcrumbs || breadcrumbsFor(data)} />
@@ -154,13 +156,11 @@ export const PageHeading = connectToModel((props: PageHeadingProps) => {
               <SplitItem>{<span className="co-m-pane__heading-badge">{badge}</span>}</SplitItem>
             )}
           </Split>
-        </div>
+        </PageBreadcrumb>
       )}
-      <div
+      <NavTitle
         data-test-id={dataTestId}
         className={classNames(
-          'co-m-nav-title',
-          { 'co-m-nav-title--detail': detail },
           { 'co-m-nav-title--logo': props.icon },
           { 'co-m-nav-title--breadcrumbs': showBreadcrumbs },
           className,
@@ -171,7 +171,6 @@ export const PageHeading = connectToModel((props: PageHeadingProps) => {
           <PrimaryHeading
             className={classNames({
               'co-m-pane__heading--logo': props.icon,
-              'co-m-pane__heading--with-help-text': helpText,
               'pf-v6-u-flex-grow-1': !showActions,
             })}
             alignItemsBaseline={!!link}
@@ -227,16 +226,13 @@ export const PageHeading = connectToModel((props: PageHeadingProps) => {
         )}
         {helpText && (
           <Content>
-            <Content
-              component={ContentVariants.p}
-              className="help-block co-m-pane__heading-help-text"
-            >
+            <Content component={ContentVariants.p} className="pf-v6-u-mt-sm co-help-text">
               {helpText}
             </Content>
           </Content>
         )}
-        {props.children}
-      </div>
+        {children}
+      </NavTitle>
     </>
   );
 });
@@ -335,7 +331,6 @@ export type PageHeadingProps = {
   breadcrumbsFor?: (obj: K8sResourceKind) => { name: string; path: string }[];
   buttonActions?: any[];
   children?: React.ReactChildren;
-  detail?: boolean;
   kind?: K8sResourceKindReference;
   kindObj?: K8sKind;
   menuActions?: Function[] | KebabOptionsCreator; // FIXME should be "KebabAction[] |" refactor pipeline-actions.tsx, etc.
diff --git a/frontend/public/components/utils/horizontal-nav.tsx b/frontend/public/components/utils/horizontal-nav.tsx
index ee00a1abf9f..b4eeaf8ded5 100644
--- a/frontend/public/components/utils/horizontal-nav.tsx
+++ b/frontend/public/components/utils/horizontal-nav.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Helmet } from 'react-helmet-async';
-import * as classNames from 'classnames';
 import * as _ from 'lodash-es';
 /* eslint-disable import/named */
 import { useTranslation, withTranslation, WithTranslation } from 'react-i18next';
@@ -23,6 +22,7 @@ import { ExtensionK8sGroupModel } from '@console/dynamic-plugin-sdk/src/api/comm
 import { PageTitleContext } from '@console/shared/src/components/pagetitle/PageTitleContext';
 import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
 import { ErrorBoundaryPage } from '@console/shared/src/components/error';
+import PageBody from '@console/shared/src/components/layout/PageBody';
 import { K8sResourceKind, K8sResourceCommon } from '../../module/k8s';
 import { referenceForModel, referenceFor, referenceForExtensionModel } from '../../module/k8s/k8s';
 import { PodsPage } from '../pod';
@@ -197,8 +197,8 @@ export const NavBar: React.FC<NavBarProps> = ({ pages }) => {
     <div>
       <Tabs
         activeKey={defaultPage ? '' : lastElement}
-        inset={{ default: 'insetNone', xl: 'insetSm' }}
         component="nav"
+        className="co-horizontal-nav"
       >
         {pages.map(({ name, nameKey, href }) => {
           const to = `${baseURL.replace(/\/$/, '')}/${removeLeadingSlash(href)}`;
@@ -379,10 +379,10 @@ export const HorizontalNav = React.memo((props: HorizontalNavProps) => {
   }
 
   return (
-    <div className={classNames('co-m-page__body', props.className)}>
+    <PageBody className={props.className}>
       {!props.hideNav && <NavBar pages={pages} />}
       {renderContent(routes)}
-    </div>
+    </PageBody>
   );
 }, _.isEqual);
 
diff --git a/frontend/public/components/utils/webhooks.tsx b/frontend/public/components/utils/webhooks.tsx
index 21a00e934c0..605948fd322 100644
--- a/frontend/public/components/utils/webhooks.tsx
+++ b/frontend/public/components/utils/webhooks.tsx
@@ -5,6 +5,7 @@ import { PasteIcon } from '@patternfly/react-icons/dist/esm/icons/paste-icon';
 import { Button, AlertVariant } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
 
+import PaneBody from '@console/shared/src/components/layout/PaneBody';
 import { K8sResourceKind, k8sGet } from '../../module/k8s';
 import { ExpandableAlert } from './alerts';
 import { SectionHeading } from './headings';
@@ -186,7 +187,7 @@ export const WebhookTriggers: React.FC<WebhookTriggersProps> = (props) => {
   };
 
   return (
-    <div className="co-m-pane__body">
+    <PaneBody>
       {!_.isEmpty(secretErrors) && (
         <ExpandableAlert
           variant={AlertVariant.warning}
@@ -225,7 +226,7 @@ export const WebhookTriggers: React.FC<WebhookTriggersProps> = (props) => {
           </tbody>
         </table>
       </div>
-    </div>
+    </PaneBody>
   );
 };
 
diff --git a/frontend/public/style/_common.scss b/frontend/public/style/_common.scss
index 2cdae280194..8d5e2b0a477 100644
--- a/frontend/public/style/_common.scss
+++ b/frontend/public/style/_common.scss
@@ -42,40 +42,26 @@ dl.co-inline {
 }
 
 .co-m-pane__body {
-  margin: $pf-v6-global-gutter--md 0 0;
-  padding: 0 $pf-v6-global-gutter $pf-v6-global-gutter--md;
-  @media (min-width: $pf-v6-global--breakpoint--xl) {
-    padding-left: $pf-v6-global-gutter--md;
-    padding-right: $pf-v6-global-gutter--md;
-  }
-  &--full-height {
-    height: 100%;
-  }
-  &--no-top-margin {
-    margin-top: 0;
-  }
+  gap: 0;
   &--section-heading {
     padding-bottom: 0;
   }
   + .co-m-pane__body {
     border-top: 1px solid var(--pf-t--global--border--color--default);
-    margin-top: 0;
-    padding-top: $pf-v6-global-gutter--md;
   }
 }
 
 .co-m-pane__createLink--no-title {
-  margin-bottom: $pf-v6-global-gutter--md;
+  margin-bottom: $pf-v6-global-gutter-y;
+}
+
+.co-m-pane__filter-bar {
+  padding: $pf-v6-global-gutter-y $pf-v6-global-gutter-x 0;
 }
 
-.co-m-pane__filter-bar,
 .co-m-pane__help-text {
-  margin: 20px $pf-v6-global-gutter;
-  @media (min-width: $pf-v6-global--breakpoint--md) {
-    margin-left: $pf-v6-global-gutter--md;
-    margin-right: $pf-v6-global-gutter--md;
-    margin-top: $pf-v6-global-gutter--md;
-  }
+  margin-top: calc(#{$pf-v6-global-gutter-y} * -0.5);
+  padding: 0 $pf-v6-global-gutter-x $pf-v6-global-gutter-y;
 }
 
 .co-button-help-icon {
@@ -111,11 +97,11 @@ dl.co-inline {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-  margin-bottom: $pf-v6-global-gutter--md;
+  margin-bottom: $pf-v6-global-gutter-y;
 }
 
 .co-m-pane__filter-row-action {
-  padding-top: $pf-v6-global-gutter;
+  padding-top: $pf-v6-global-gutter-y;
   @media (min-width: $screen-xs-min) {
     padding-top: 0;
   }
@@ -124,7 +110,6 @@ dl.co-inline {
 .co-m-pane__heading {
   display: flex;
   justify-content: space-between;
-  margin-bottom: $pf-v6-global-gutter--md !important;
   position: relative;
   &--baseline {
     align-items: baseline;
@@ -135,9 +120,6 @@ dl.co-inline {
   &--logo {
     align-items: center;
   }
-  &--with-help-text {
-    margin-bottom: 0 !important;
-  }
 }
 
 .co-m-pane__heading-badge {
@@ -146,10 +128,6 @@ dl.co-inline {
   }
 }
 
-.co-m-pane__heading-help-text {
-  margin-bottom: $pf-v6-global-gutter--md !important;
-}
-
 .co-m-pane__heading-owner {
   display: block;
   font-size: $font-size-base;
@@ -416,10 +394,6 @@ dl.co-inline {
   }
 }
 
-.help-block {
-  margin-bottom: 0;
-}
-
 // Note: include .co-select-to-copy to enable single click selection of full text
 .co-truncate {
   @include co-truncate;
@@ -453,7 +427,7 @@ dl.co-inline {
 }
 
 .co-m-pane__body-group {
-  padding: 0 0 30px 0;
+  padding: 0 0 $pf-v6-global-gutter-y 0;
 }
 
 .co-m-table-grid {
diff --git a/frontend/public/style/_forms.scss b/frontend/public/style/_forms.scss
index cd1b8a47688..1c4080dee8e 100644
--- a/frontend/public/style/_forms.scss
+++ b/frontend/public/style/_forms.scss
@@ -31,7 +31,7 @@
 
 .co-form-section__label {
   font-size: 14px;
-  margin-bottom: $pf-v6-global-gutter;
+  margin-bottom: $pf-v6-global-gutter-y;
 }
 
 .co-form-section__separator {
@@ -103,7 +103,7 @@
 
 .pf-v6-c-form__checkbox-row {
   display: grid;
-  row-gap: $pf-v6-global-gutter;
+  row-gap: $pf-v6-global-gutter-y;
 }
 
 .pf-v6-c-form__group--no-top-margin {
diff --git a/frontend/public/style/_layout.scss b/frontend/public/style/_layout.scss
index 805d4650a2e..52c03bf19e1 100644
--- a/frontend/public/style/_layout.scss
+++ b/frontend/public/style/_layout.scss
@@ -11,29 +11,12 @@ body,
 #content-scrollable {
   overflow: auto;
 }
-.co-m-page__body {
-  display: flex;
-  flex: 1 0 auto;
-  flex-direction: column;
-}
-
-.co-m-app__content {
-  display: flex;
-  flex: 1 0 auto;
-  flex-direction: column;
-  height: 100%; // doesn't work on safari without height
-}
-
-.co-m-app__content > .pf-v6-c-page {
-  height: 0;
-  flex: 1;
-}
 
 .co-p-has-sidebar {
-  position: relative;
   display: flex;
   flex: 1;
   height: 100%;
+  position: relative;
 
   &__body {
     flex: 2;
@@ -46,12 +29,6 @@ body,
     }
   }
 
-  &__close-button {
-    font-size: 21px !important;
-    line-height: 1 !important;
-    padding: 0 !important;
-  }
-
   &__sidebar {
     position: relative;
     @media (min-width: $screen-md-min) {
@@ -79,10 +56,4 @@ body,
       outline: 0;
     }
   }
-
-  &__sidebar-heading {
-    @include co-break-word;
-    margin-bottom: 20px;
-    margin-top: 0;
-  }
 }
diff --git a/frontend/public/style/_overrides.scss b/frontend/public/style/_overrides.scss
index 49ac5c2613f..ae0b6ecfd04 100644
--- a/frontend/public/style/_overrides.scss
+++ b/frontend/public/style/_overrides.scss
@@ -51,6 +51,14 @@ form.pf-v6-c-form {
   }
 }
 
+// Workaround for https://github.com/patternfly/patternfly/issues/7376
+// to align pf-v6-c-tabs--inset with PageSection
+.co-horizontal-nav {
+  --pf-v6-c-tabs--inset: #{$pf-v6-global-gutter-x};
+  --pf-v6-c-tabs--m-vertical--inset: #{$pf-v6-global-gutter-x};
+  --pf-v6-c-tabs--m-vertical--m-box--inset: #{$pf-v6-global-gutter-x};
+}
+
 .odc-catalog-tile {
   // Get rid of weird stretching of catalog grid items
   .pf-v6-c-card__header-main {
@@ -87,7 +95,7 @@ form.pf-v6-c-form {
   // the height+padding of a PatternFly standard button.
   --co-desired-button-size: calc(
     var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body) +
-    var(--pf-t--global--spacer--control--vertical--default) * 2
+      var(--pf-t--global--spacer--control--vertical--default) * 2
   );
 
   padding: calc((var(--co-desired-button-size) - var(--co-button-icon-size)) / 2);
@@ -102,6 +110,10 @@ form.pf-v6-c-form {
   }
 }
 
+.help-block {
+  margin-bottom: 0;
+}
+
 // fix bug where monaco-aria-container is visible in Firefox but shouldn't be
 // bug occurs only if the suggestions overlay has been enabled
 .monaco-aria-container {
@@ -233,14 +245,6 @@ form.pf-v6-c-form {
   }
 }
 
-.pf-v6-c-page__main-breadcrumb {
-  // so breadcrumb padding matches .co-m-nav-title
-  @media (min-width: $pf-v6-global--breakpoint--xl) {
-    padding-inline-start: $pf-v6-global-gutter--md;
-    padding-inline-end: $pf-v6-global-gutter--md;
-  }
-}
-
 .pf-v6-c-page__sidebar {
   @media print {
     display: none !important;
diff --git a/frontend/public/style/_vars.scss b/frontend/public/style/_vars.scss
index 15d35395031..0293fd3a42d 100644
--- a/frontend/public/style/_vars.scss
+++ b/frontend/public/style/_vars.scss
@@ -20,9 +20,11 @@ $pf-v6-global--breakpoint--sm-max: calc(#{$pf-v6-global--breakpoint--sm} - 1);
 $pf-v6-global--breakpoint--md-max: calc(#{$pf-v6-global--breakpoint--md} - 1);
 $pf-v6-global--breakpoint--lg-max: calc(#{$pf-v6-global--breakpoint--lg} - 1);
 
-// Can not use --pf-v6-global--gutter --pf-v6-global--gutter--md because you can't get a negative value of a scss variable that is assigned a css custom property.
-$pf-v6-global-gutter: 1rem; // Matches --pf-t--global--spacer--gutter--default
-$pf-v6-global-gutter--md: 1.5rem;
+$pf-v6-global-gutter-x: calc(
+  var(--pf-v6-c-page__main-section--PaddingInlineStart) -
+    var(--pf-v6-c-page__main-container--BorderWidth)
+); // Matches pf-v6-c-page__main-section
+$pf-v6-global-gutter-y: var(--pf-t--global--spacer--md); // Matches pf-v6-c-page__main-section
 
 // == Custom variables
 $co-m-catalog-tile-height: 100%;
diff --git a/frontend/public/style/ancillary/_bootstrap-residual.scss b/frontend/public/style/ancillary/_bootstrap-residual.scss
index 15201e8183b..344ccf8d5dd 100644
--- a/frontend/public/style/ancillary/_bootstrap-residual.scss
+++ b/frontend/public/style/ancillary/_bootstrap-residual.scss
@@ -11,9 +11,6 @@
   display: block; // account for any element using help-block
   margin-top: 5px;
   margin-bottom: 10px;
-  color: var(
-    --pf-t--global--text--color--regular
-  ); // matches --pf-v6-c-helper-text__item-text--Color and picks up dark theme variable
 }
 
 :where(:not([class*='pf-v6-c-'])) {
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 510515899f8..8692fd5c8d0 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -888,10 +888,10 @@
     through2 "^2.0.0"
     watchify "3.11.1"
 
-"@cypress/request@^3.0.0":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@cypress/request/-/request-3.0.1.tgz#72d7d5425236a2413bd3d8bb66d02d9dc3168960"
-  integrity sha512-TWivJlJi8ZDx2wGOw1dbLuHJKUYX7bWySw377nlnGOW3hP9/MUKIsEdXT/YngWxVdgNCHRBmFlBipE+5/2ZZlQ==
+"@cypress/request@^3.0.8":
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/@cypress/request/-/request-3.0.8.tgz#992f1f42ba03ebb14fa5d97290abe9d015ed0815"
+  integrity sha512-h0NFgh1mJmm1nr4jCwkGHwKneVYKghUyWe6TMNrk0B9zsjAJxpg8C4/+BAcmLgCPa1vj1V8rNUaILl+zYRUWBQ==
   dependencies:
     aws-sign2 "~0.7.0"
     aws4 "^1.8.0"
@@ -899,16 +899,16 @@
     combined-stream "~1.0.6"
     extend "~3.0.2"
     forever-agent "~0.6.1"
-    form-data "~2.3.2"
-    http-signature "~1.3.6"
+    form-data "~4.0.0"
+    http-signature "~1.4.0"
     is-typedarray "~1.0.0"
     isstream "~0.1.2"
     json-stringify-safe "~5.0.1"
     mime-types "~2.1.19"
     performance-now "^2.1.0"
-    qs "6.10.4"
+    qs "6.14.0"
     safe-buffer "^5.1.2"
-    tough-cookie "^4.1.3"
+    tough-cookie "^5.0.0"
     tunnel-agent "^0.6.0"
     uuid "^8.3.2"
 
@@ -4950,6 +4950,14 @@ cachedir@^2.3.0:
   resolved "https://registry.yarnpkg.com/cachedir/-/cachedir-2.3.0.tgz#0c75892a052198f0b21c7c1804d8331edfcae0e8"
   integrity sha512-A+Fezp4zxnit6FanDmv9EqXNAi3vt9DWp51/71UEhXukb7QUuvtv9344h91dyAxuTLoSYJFU299qzR3tzwPAhw==
 
+call-bind-apply-helpers@^1.0.1, call-bind-apply-helpers@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz#4b5428c222be985d79c3d82657479dbe0b59b2d6"
+  integrity sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==
+  dependencies:
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+
 call-bind@^1.0.0, call-bind@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
@@ -4969,6 +4977,14 @@ call-bind@^1.0.5, call-bind@^1.0.7:
     get-intrinsic "^1.2.4"
     set-function-length "^1.2.1"
 
+call-bound@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/call-bound/-/call-bound-1.0.4.tgz#238de935d2a2a692928c538c7ccfa91067fd062a"
+  integrity sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==
+  dependencies:
+    call-bind-apply-helpers "^1.0.2"
+    get-intrinsic "^1.3.0"
+
 callsites@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
@@ -5216,10 +5232,10 @@ ci-info@^2.0.0:
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
   integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
 
-ci-info@^3.2.0:
-  version "3.9.0"
-  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.9.0.tgz#4279a62028a7b1f262f3473fc9605f5e218c59b4"
-  integrity sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==
+ci-info@^4.1.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-4.2.0.tgz#cbd21386152ebfe1d56f280a3b5feccbd96764c7"
+  integrity sha512-cYY9mypksY8NRqgDB1XD1RiJL338v/551niynFTGkZOO2LHuB2OmOYxDIe/ttN9AHwrqdum1360G3ald0W9kCg==
 
 cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
   version "1.0.4"
@@ -5273,10 +5289,10 @@ cli-cursor@^3.1.0:
   dependencies:
     restore-cursor "^3.1.0"
 
-cli-table3@~0.6.1:
-  version "0.6.3"
-  resolved "https://registry.yarnpkg.com/cli-table3/-/cli-table3-0.6.3.tgz#61ab765aac156b52f222954ffc607a6f01dbeeb2"
-  integrity sha512-w5Jac5SykAeZJKntOxJCrm63Eg5/4dhMWIcuTbo9rpE+brgaSZo0RuNJZeOyMgsUdhDeojvgyQLmjI+K50ZGyg==
+cli-table3@~0.6.5:
+  version "0.6.5"
+  resolved "https://registry.yarnpkg.com/cli-table3/-/cli-table3-0.6.5.tgz#013b91351762739c16a9567c21a04632e449bf2f"
+  integrity sha512-+W/5efTR7y5HRD7gACw9yQjqMVvEMLBHmboM/kPWam+H+Hmyrgjh6YncVKK122YZkXrLudzTuAukUw9FnMf7IQ==
   dependencies:
     string-width "^4.2.0"
   optionalDependencies:
@@ -5489,7 +5505,7 @@ combine-source-map@^0.8.0, combine-source-map@~0.8.0:
     lodash.memoize "~3.0.3"
     source-map "~0.5.3"
 
-combined-stream@^1.0.6, combined-stream@~1.0.6:
+combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
   integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
@@ -6170,12 +6186,12 @@ cypress-multi-reporters@^1.4.0:
     debug "^4.1.1"
     lodash "^4.17.15"
 
-cypress@^13.10.0:
-  version "13.10.0"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-13.10.0.tgz#0cfdb54eb046a30c78998e41effb635a50326935"
-  integrity sha512-tOhwRlurVOQbMduX+KonoMeQILs2cwR3yHGGENoFvvSoLUBHmJ8b9/n21gFSDqjlOJ+SRVcwuh+fG/JDsHsT6Q==
+cypress@^14.2.1:
+  version "14.2.1"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-14.2.1.tgz#2628696588d3d3961bf0ea0ad87baeb359790dcd"
+  integrity sha512-5xd0E7fUp0pjjib1D7ljkmCwFDgMkWuW06jWiz8dKrI7MNRrDo0C65i4Sh+oZ9YHjMHZRJBR0XZk1DfekOhOUw==
   dependencies:
-    "@cypress/request" "^3.0.0"
+    "@cypress/request" "^3.0.8"
     "@cypress/xvfb" "^1.2.4"
     "@types/sinonjs__fake-timers" "8.1.1"
     "@types/sizzle" "^2.3.2"
@@ -6186,8 +6202,9 @@ cypress@^13.10.0:
     cachedir "^2.3.0"
     chalk "^4.1.0"
     check-more-types "^2.24.0"
+    ci-info "^4.1.0"
     cli-cursor "^3.1.0"
-    cli-table3 "~0.6.1"
+    cli-table3 "~0.6.5"
     commander "^6.2.1"
     common-tags "^1.8.0"
     dayjs "^1.10.4"
@@ -6200,7 +6217,6 @@ cypress@^13.10.0:
     figures "^3.2.0"
     fs-extra "^9.1.0"
     getos "^3.2.1"
-    is-ci "^3.0.1"
     is-installed-globally "~0.4.0"
     lazy-ass "^1.6.0"
     listr2 "^3.8.3"
@@ -6212,9 +6228,10 @@ cypress@^13.10.0:
     process "^0.11.10"
     proxy-from-env "1.0.0"
     request-progress "^3.0.0"
-    semver "^7.5.3"
+    semver "^7.7.1"
     supports-color "^8.1.1"
-    tmp "~0.2.1"
+    tmp "~0.2.3"
+    tree-kill "1.2.2"
     untildify "^4.0.0"
     yauzl "^2.10.0"
 
@@ -7272,6 +7289,15 @@ dotenv@^4.0.0:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-4.0.0.tgz#864ef1379aced55ce6f95debecdce179f7a0cd1d"
   integrity sha1-hk7xN5rO1Vzm+V3r7NzhefegzR0=
 
+dunder-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/dunder-proto/-/dunder-proto-1.0.1.tgz#d7ae667e1dc83482f8b70fd0f6eefc50da30f58a"
+  integrity sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==
+  dependencies:
+    call-bind-apply-helpers "^1.0.1"
+    es-errors "^1.3.0"
+    gopd "^1.2.0"
+
 duplexer2@^0.1.2, duplexer2@~0.1.0, duplexer2@~0.1.2:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"
@@ -7550,6 +7576,11 @@ es-define-property@^1.0.0:
   dependencies:
     get-intrinsic "^1.2.4"
 
+es-define-property@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.1.tgz#983eb2f9a6724e9303f61addf011c72e09e0b0fa"
+  integrity sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==
+
 es-errors@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
@@ -7560,6 +7591,23 @@ es-module-lexer@^1.2.1:
   resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.5.4.tgz#a8efec3a3da991e60efa6b633a7cad6ab8d26b78"
   integrity sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==
 
+es-object-atoms@^1.0.0, es-object-atoms@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/es-object-atoms/-/es-object-atoms-1.1.1.tgz#1c4f2c4837327597ce69d2ca190a7fdd172338c1"
+  integrity sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==
+  dependencies:
+    es-errors "^1.3.0"
+
+es-set-tostringtag@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz#f31dbbe0c183b00a6d26eb6325c810c0fd18bd4d"
+  integrity sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==
+  dependencies:
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.6"
+    has-tostringtag "^1.0.2"
+    hasown "^2.0.2"
+
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -8679,6 +8727,16 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
+form-data@~4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.2.tgz#35cabbdd30c3ce73deb2c42d3c8d3ed9ca51794c"
+  integrity sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    es-set-tostringtag "^2.1.0"
+    mime-types "^2.1.12"
+
 formik@^2.1.5:
   version "2.4.6"
   resolved "https://registry.yarnpkg.com/formik/-/formik-2.4.6.tgz#4da75ca80f1a827ab35b08fd98d5a76e928c9686"
@@ -8936,6 +8994,22 @@ get-intrinsic@^1.1.3, get-intrinsic@^1.2.4:
     has-symbols "^1.0.3"
     hasown "^2.0.0"
 
+get-intrinsic@^1.2.5, get-intrinsic@^1.2.6, get-intrinsic@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.3.0.tgz#743f0e3b6964a93a5491ed1bffaae054d7f98d01"
+  integrity sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==
+  dependencies:
+    call-bind-apply-helpers "^1.0.2"
+    es-define-property "^1.0.1"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.1.1"
+    function-bind "^1.1.2"
+    get-proto "^1.0.1"
+    gopd "^1.2.0"
+    has-symbols "^1.1.0"
+    hasown "^2.0.2"
+    math-intrinsics "^1.1.0"
+
 get-node-dimensions@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/get-node-dimensions/-/get-node-dimensions-1.2.1.tgz#fb7b4bb57060fb4247dd51c9d690dfbec56b0823"
@@ -8946,6 +9020,14 @@ get-own-enumerable-property-symbols@^3.0.0:
   resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
   integrity sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==
 
+get-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-proto/-/get-proto-1.0.1.tgz#150b3f2743869ef3e851ec0c49d15b1d14d00ee1"
+  integrity sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==
+  dependencies:
+    dunder-proto "^1.0.1"
+    es-object-atoms "^1.0.0"
+
 get-stdin@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-6.0.0.tgz#9e09bf712b360ab9225e812048f71fde9c89657b"
@@ -9234,6 +9316,11 @@ gopd@^1.0.1:
   dependencies:
     get-intrinsic "^1.1.3"
 
+gopd@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.2.0.tgz#89f56b8217bdbc8802bd299df6d7f1081d7e51a1"
+  integrity sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==
+
 graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.6:
   version "4.2.9"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.9.tgz#041b05df45755e587a24942279b9d113146e1c96"
@@ -9390,6 +9477,11 @@ has-symbols@^1.0.3:
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
   integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
 
+has-symbols@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.1.0.tgz#fc9c6a783a084951d0b971fe1018de813707a338"
+  integrity sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==
+
 has-tostringtag@^1.0.0, has-tostringtag@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz#2cdc42d40bef2e5b4eeab7c01a73c54ce7ab5abc"
@@ -9729,14 +9821,14 @@ http-signature@~1.2.0:
     jsprim "^1.2.2"
     sshpk "^1.7.0"
 
-http-signature@~1.3.6:
-  version "1.3.6"
-  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.3.6.tgz#cb6fbfdf86d1c974f343be94e87f7fc128662cf9"
-  integrity sha512-3adrsD6zqo4GsTqtO7FyrejHNv+NgiIfAfv68+jVlFmSr9OGy7zrxONceFRLKvnnZA5jbxQBX1u9PpB6Wi32Gw==
+http-signature@~1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.4.0.tgz#dee5a9ba2bf49416abc544abd6d967f6a94c8c3f"
+  integrity sha512-G5akfn7eKbpDN+8nPS/cb57YeA1jLTVxjpCj7tmm3QKPdyDy7T+qSC40e9ptydSWvkwjSXw1VbkpyEm39ukeAg==
   dependencies:
     assert-plus "^1.0.0"
     jsprim "^2.0.2"
-    sshpk "^1.14.1"
+    sshpk "^1.18.0"
 
 https-browserify@^1.0.0:
   version "1.0.0"
@@ -10170,13 +10262,6 @@ is-ci@^2.0.0:
   dependencies:
     ci-info "^2.0.0"
 
-is-ci@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-3.0.1.tgz#db6ecbed1bd659c43dac0f45661e7674103d1867"
-  integrity sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==
-  dependencies:
-    ci-info "^3.2.0"
-
 is-core-module@^2.1.0, is-core-module@^2.2.0:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.1.tgz#f59fdfca701d5879d0a6b100a40aa1560ce27211"
@@ -12145,6 +12230,11 @@ matcher-collection@^2.0.0:
     "@types/minimatch" "^3.0.3"
     minimatch "^3.0.2"
 
+math-intrinsics@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz#a0dd74be81e2aa5c2f27e65ce283605ee4e2b7f9"
+  integrity sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -12930,6 +13020,11 @@ object-inspect@^1.13.1:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.3.tgz#f14c183de51130243d6d18ae149375ff50ea488a"
   integrity sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA==
 
+object-inspect@^1.13.3:
+  version "1.13.4"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.4.tgz#8375265e21bc20d0fa582c22e1b13485d6e00213"
+  integrity sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==
+
 object-inspect@^1.6.0, object-inspect@^1.9.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.9.0.tgz#c90521d74e1127b67266ded3394ad6116986533a"
@@ -14008,7 +14103,7 @@ pseudomap@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
 
-psl@^1.1.28, psl@^1.1.33:
+psl@^1.1.28:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7"
   integrity sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==
@@ -14082,13 +14177,6 @@ pvutils@latest:
   resolved "https://registry.yarnpkg.com/pvutils/-/pvutils-1.0.17.tgz#ade3c74dfe7178944fe44806626bd2e249d996bf"
   integrity sha512-wLHYUQxWaXVQvKnwIDWFVKDJku9XDCvyhhxoq8dc5MFdIlRenyPI9eSfEtcvgHgD7FlvCyGAlWgOzRnZD99GZQ==
 
-qs@6.10.4:
-  version "6.10.4"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.4.tgz#6a3003755add91c0ec9eacdc5f878b034e73f9e7"
-  integrity sha512-OQiU+C+Ds5qiH91qh/mg0w+8nwQuLjM4F4M/PbmhDOoYehPh+Fb0bDjtR1sOvy7YKxvj28Y/M0PhP5uVX0kB+g==
-  dependencies:
-    side-channel "^1.0.4"
-
 qs@6.13.0, qs@^6.12.3:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.13.0.tgz#6ca3bd58439f7e245655798997787b0d88a51906"
@@ -14096,6 +14184,13 @@ qs@6.13.0, qs@^6.12.3:
   dependencies:
     side-channel "^1.0.6"
 
+qs@6.14.0:
+  version "6.14.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.14.0.tgz#c63fa40680d2c5c941412a0e899c89af60c0a930"
+  integrity sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==
+  dependencies:
+    side-channel "^1.1.0"
+
 qs@~6.5.2:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
@@ -15068,7 +15163,7 @@ rimraf@^2.5.4, rimraf@^2.6.1:
   dependencies:
     glob "^7.1.3"
 
-rimraf@^3.0.0, rimraf@^3.0.2:
+rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
   integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
@@ -15320,14 +15415,14 @@ semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semve
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
 
-semver@^7.3.2, semver@^7.3.5, semver@^7.3.7, semver@^7.5.3:
+semver@^7.3.2, semver@^7.3.5, semver@^7.3.7:
   version "7.5.4"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
   integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
   dependencies:
     lru-cache "^6.0.0"
 
-semver@^7.6.3:
+semver@^7.6.3, semver@^7.7.1:
   version "7.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.7.1.tgz#abd5098d82b18c6c81f6074ff2647fd3e7220c9f"
   integrity sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==
@@ -15515,14 +15610,34 @@ showdown@1.8.6:
   dependencies:
     yargs "^10.0.3"
 
-side-channel@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
-  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
+side-channel-list@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/side-channel-list/-/side-channel-list-1.0.0.tgz#10cb5984263115d3b7a0e336591e290a830af8ad"
+  integrity sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==
   dependencies:
-    call-bind "^1.0.0"
-    get-intrinsic "^1.0.2"
-    object-inspect "^1.9.0"
+    es-errors "^1.3.0"
+    object-inspect "^1.13.3"
+
+side-channel-map@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/side-channel-map/-/side-channel-map-1.0.1.tgz#d6bb6b37902c6fef5174e5f533fab4c732a26f42"
+  integrity sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.5"
+    object-inspect "^1.13.3"
+
+side-channel-weakmap@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz#11dda19d5368e40ce9ec2bdc1fb0ecbc0790ecea"
+  integrity sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.5"
+    object-inspect "^1.13.3"
+    side-channel-map "^1.0.1"
 
 side-channel@^1.0.6:
   version "1.0.6"
@@ -15534,6 +15649,17 @@ side-channel@^1.0.6:
     get-intrinsic "^1.2.4"
     object-inspect "^1.13.1"
 
+side-channel@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.1.0.tgz#c3fcff9c4da932784873335ec9765fa94ff66bc9"
+  integrity sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==
+  dependencies:
+    es-errors "^1.3.0"
+    object-inspect "^1.13.3"
+    side-channel-list "^1.0.0"
+    side-channel-map "^1.0.1"
+    side-channel-weakmap "^1.0.2"
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -15839,7 +15965,22 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
 
-sshpk@^1.14.1, sshpk@^1.7.0:
+sshpk@^1.18.0:
+  version "1.18.0"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.18.0.tgz#1663e55cddf4d688b86a46b77f0d5fe363aba028"
+  integrity sha512-2p2KJZTSqQ/I3+HX42EpYOa2l3f8Erv8MWKsy2I9uf4wA7yFIkXRffYdsx86y6z4vHtV8u7g+pPlr8/4ouAxsQ==
+  dependencies:
+    asn1 "~0.2.3"
+    assert-plus "^1.0.0"
+    bcrypt-pbkdf "^1.0.0"
+    dashdash "^1.12.0"
+    ecc-jsbn "~0.1.1"
+    getpass "^0.1.1"
+    jsbn "~0.1.0"
+    safer-buffer "^2.0.2"
+    tweetnacl "~0.14.0"
+
+sshpk@^1.7.0:
   version "1.17.0"
   resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.17.0.tgz#578082d92d4fe612b13007496e543fa0fbcbe4c5"
   integrity sha512-/9HIEs1ZXGhSPE8X6Ccm7Nam1z8KcoCqPdI7ecm1N33EzAetWahvQWVqLZtaZQ+IDKX4IyA2o0gBzqIMkAagHQ==
@@ -16556,18 +16697,28 @@ tlds@^1.57.0:
   resolved "https://registry.yarnpkg.com/tlds/-/tlds-1.203.1.tgz#4dc9b02f53de3315bc98b80665e13de3edfc1dfc"
   integrity sha512-7MUlYyGJ6rSitEZ3r1Q1QNV8uSIzapS8SmmhSusBuIc7uIxPPwsKllEP0GRp1NS6Ik6F+fRZvnjDWm3ecv2hDw==
 
+tldts-core@^6.1.85:
+  version "6.1.85"
+  resolved "https://registry.yarnpkg.com/tldts-core/-/tldts-core-6.1.85.tgz#6f6b795468c0b5f7660a11c7306ff2766ceaea7e"
+  integrity sha512-DTjUVvxckL1fIoPSb3KE7ISNtkWSawZdpfxGxwiIrZoO6EbHVDXXUIlIuWympPaeS+BLGyggozX/HTMsRAdsoA==
+
+tldts@^6.1.32:
+  version "6.1.85"
+  resolved "https://registry.yarnpkg.com/tldts/-/tldts-6.1.85.tgz#c7636ad5ec2f02591264360da51c6b584ef6f7bb"
+  integrity sha512-gBdZ1RjCSevRPFix/hpaUWeak2/RNUZB4/8frF1r5uYMHjFptkiT0JXIebWvgI/0ZHXvxaUDDJshiA0j6GdL3w==
+  dependencies:
+    tldts-core "^6.1.85"
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
   dependencies:
     os-tmpdir "~1.0.2"
 
-tmp@~0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
-  integrity sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==
-  dependencies:
-    rimraf "^3.0.0"
+tmp@~0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.3.tgz#eb783cc22bc1e8bebd0671476d46ea4eb32a79ae"
+  integrity sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==
 
 tmpl@1.0.x:
   version "1.0.4"
@@ -16649,15 +16800,12 @@ tough-cookie@^2.3.2, tough-cookie@^2.3.3, tough-cookie@^2.5.0, tough-cookie@~2.5
     psl "^1.1.28"
     punycode "^2.1.1"
 
-tough-cookie@^4.1.3:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.3.tgz#97b9adb0728b42280aa3d814b6b999b2ff0318bf"
-  integrity sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==
+tough-cookie@^5.0.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-5.1.2.tgz#66d774b4a1d9e12dc75089725af3ac75ec31bed7"
+  integrity sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==
   dependencies:
-    psl "^1.1.33"
-    punycode "^2.1.1"
-    universalify "^0.2.0"
-    url-parse "^1.5.3"
+    tldts "^6.1.32"
 
 tr46@^1.0.1:
   version "1.0.1"
@@ -16675,6 +16823,11 @@ tree-dump@^1.0.1:
   resolved "https://registry.yarnpkg.com/tree-dump/-/tree-dump-1.0.2.tgz#c460d5921caeb197bde71d0e9a7b479848c5b8ac"
   integrity sha512-dpev9ABuLWdEubk+cIaI9cHwRNNDjkBBLXTwI4UCUFdQ5xXKqNXoK4FEciw/vxf+NQ7Cb7sGUyeUtORvHIdRXQ==
 
+tree-kill@1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
+  integrity sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==
+
 trim-right@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
@@ -17013,11 +17166,6 @@ universalify@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"
 
-universalify@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0"
-  integrity sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==
-
 universalify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-1.0.0.tgz#b61a1da173e8435b2fe3c67d29b9adf8594bd16d"
@@ -17088,7 +17236,7 @@ urix@^0.1.0:
   resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
   integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
 
-url-parse@^1.4.4, url-parse@^1.5.3:
+url-parse@^1.4.4:
   version "1.5.10"
   resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"
   integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==