diff --git a/webui/src/common/components/PageHeader/PageHeader.jsx b/webui/src/common/components/PageHeader/PageHeader.jsx
new file mode 100644
index 0000000..fc1dc63
--- /dev/null
+++ b/webui/src/common/components/PageHeader/PageHeader.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import './styles.sass';
+
+export const PageHeader = ({
+ title,
+ subtitle,
+ actions,
+ className = '',
+ ...rest
+}) => {
+ return (
+
+
+ {title &&
{title}
}
+ {subtitle &&
{subtitle}
}
+
+ {actions &&
{actions}
}
+
+ );
+};
\ No newline at end of file
diff --git a/webui/src/common/components/PageHeader/index.js b/webui/src/common/components/PageHeader/index.js
new file mode 100644
index 0000000..48f7ba0
--- /dev/null
+++ b/webui/src/common/components/PageHeader/index.js
@@ -0,0 +1 @@
+export { PageHeader as default } from './PageHeader.jsx';
\ No newline at end of file
diff --git a/webui/src/common/components/PageHeader/styles.sass b/webui/src/common/components/PageHeader/styles.sass
new file mode 100644
index 0000000..4c7e539
--- /dev/null
+++ b/webui/src/common/components/PageHeader/styles.sass
@@ -0,0 +1,37 @@
+.page-header
+ display: flex
+ align-items: flex-start
+ justify-content: space-between
+ gap: 1rem
+ margin-bottom: 2rem
+
+.page-header-content
+ flex: 1
+ min-width: 0
+
+.page-title
+ font-size: 1.8rem
+ font-weight: 700
+ color: var(--text)
+ margin-bottom: 0.25rem
+
+.page-subtitle
+ font-size: 0.9rem
+ color: var(--text-dim)
+ margin: 0
+
+.page-header-actions
+ flex-shrink: 0
+ display: flex
+ gap: 0.75rem
+ align-items: flex-start
+
+@media (max-width: 768px)
+ .page-header
+ flex-direction: column
+ align-items: stretch
+ text-align: center
+ gap: 1.5rem
+
+ .page-header-actions
+ justify-content: center
\ No newline at end of file