diff --git a/packages/web_ui/src/components/PageHeader.tsx b/packages/web_ui/src/components/PageHeader.tsx
index 97377ea9..83b78ed2 100644
--- a/packages/web_ui/src/components/PageHeader.tsx
+++ b/packages/web_ui/src/components/PageHeader.tsx
@@ -1,13 +1,19 @@
 import React from "react";
+import { Typography } from "antd";
+const { Text } = Typography;
 
 type PageHeaderProps = {
-	title: string|React.ReactElement;
+	title: string | React.ReactElement;
+	subTitle?: string | React.ReactElement;
+	footer?: React.JSX.Element;
 	extra?: React.JSX.Element;
 };
 
 export default function PageHeader(props: PageHeaderProps): React.JSX.Element {
 	return <div className="page-header">
 		<h2 className="page-header-title">{props.title}</h2>
+		{props.subTitle && <Text type="secondary">{props.subTitle}</Text>}
+		{props.footer && props.footer}
 		{props.extra && <div className="page-header-extra">{props.extra}</div>}
 	</div>;
 }