diff --git a/src/gitops/utils/components/DetailsPageTitle/DetailsPageTitle.tsx b/src/gitops/utils/components/DetailsPageTitle/DetailsPageTitle.tsx
new file mode 100644
index 00000000..7e086644
--- /dev/null
+++ b/src/gitops/utils/components/DetailsPageTitle/DetailsPageTitle.tsx
@@ -0,0 +1,31 @@
+import { FC, ReactNode } from 'react';
+
+import { Flex, PageBreadcrumb, PageGroup, PageSection } from '@patternfly/react-core';
+
+import './details-page-title.scss';
+
+type DetailsPageTitleProps = {
+  breadcrumb: ReactNode;
+};
+
+export const PaneHeading: React.FC = ({ children }) => (
+  <Flex
+    alignItems={{ default: 'alignItemsCenter' }}
+    justifyContent={{ default: 'justifyContentSpaceBetween' }}
+  >
+    {children}
+  </Flex>
+);
+
+const DetailsPageTitle: FC<DetailsPageTitleProps> = ({ breadcrumb, children }) => (
+  <div>
+    <PageGroup>
+      <PageBreadcrumb>{breadcrumb}</PageBreadcrumb>
+      <PageSection className="details-page-title" hasBodyWrapper={false}>
+        {children}
+      </PageSection>
+    </PageGroup>
+  </div>
+);
+
+export default DetailsPageTitle;
diff --git a/src/gitops/utils/components/DetailsPageTitle/details-page-title.scss b/src/gitops/utils/components/DetailsPageTitle/details-page-title.scss
new file mode 100644
index 00000000..1109a5da
--- /dev/null
+++ b/src/gitops/utils/components/DetailsPageTitle/details-page-title.scss
@@ -0,0 +1,3 @@
+.details-page-title {
+  padding-block-start: var(--pf-t--global--spacer--sm);
+}