diff --git a/packages/create/templates/plugin-js/web/plugin.jsx b/packages/create/templates/plugin-js/web/plugin.jsx
index 2f94158a..87c59767 100644
--- a/packages/create/templates/plugin-js/web/plugin.jsx
+++ b/packages/create/templates/plugin-js/web/plugin.jsx
@@ -10,7 +10,7 @@ import React, {
 // } from "antd";
 
 import {
-	BaseWebPlugin, PageLayout, Control, ControlContext, notifyErrorHandler,
+	BaseWebPlugin, PageLayout, PageHeader, Control, ControlContext, notifyErrorHandler,
 } from "@clusterio/web_ui";
 //%if multi_context // Subscribing requires multi context
 
@@ -34,7 +34,7 @@ function MyTemplatePage() {
 //%endif
 
 	return <PageLayout nav={[{ name: "__plugin_name__" }]}>
-		<h2>__plugin_name__</h2>
+		<PageHeader title="__plugin_name__" />
 //%if controller // Subscribing requires web content and the controller
 		Synced: {String(synced)} Data: {JSON.stringify([...subscribableData.values()])}
 //%endif
diff --git a/packages/create/templates/plugin-ts/web/plugin.tsx b/packages/create/templates/plugin-ts/web/plugin.tsx
index 06a7542a..e54e0a7c 100644
--- a/packages/create/templates/plugin-ts/web/plugin.tsx
+++ b/packages/create/templates/plugin-ts/web/plugin.tsx
@@ -10,7 +10,7 @@ import React, {
 // } from "antd";
 
 import {
-	BaseWebPlugin, PageLayout, Control, ControlContext, notifyErrorHandler,
+	BaseWebPlugin, PageLayout, PageHeader, Control, ControlContext, notifyErrorHandler,
 } from "@clusterio/web_ui";
 //%if multi_context // Subscribing requires multi context
 
@@ -34,7 +34,7 @@ function MyTemplatePage() {
 //%endif
 
 	return <PageLayout nav={[{ name: "__plugin_name__" }]}>
-		<h2>__plugin_name__</h2>
+		<PageHeader title="__plugin_name__" />
 //%if controller // Subscribing requires web content and the controller
 		Synced: {String(synced)} Data: {JSON.stringify([...subscribableData.values()])}
 //%endif
diff --git a/packages/web_ui/src/components/PluginViewPage.tsx b/packages/web_ui/src/components/PluginViewPage.tsx
index 8b9281fd..58eba31a 100644
--- a/packages/web_ui/src/components/PluginViewPage.tsx
+++ b/packages/web_ui/src/components/PluginViewPage.tsx
@@ -6,6 +6,7 @@ import type { PluginWebApi } from "@clusterio/lib";
 
 import ControlContext from "./ControlContext";
 import PageLayout from "./PageLayout";
+import PageHeader from "./PageHeader";
 import notify from "../util/notify";
 
 export default function PluginViewPage() {
@@ -39,7 +40,7 @@ export default function PluginViewPage() {
 	let pluginMeta = pluginList.find(p => p.name === pluginName);
 	if (!pluginMeta) {
 		return <PageLayout nav={nav}>
-			<h2>Plugin not found</h2>
+			<PageHeader title="Plugin not found" />
 			<p>Plugin with name {pluginName} was not found on the controller.</p>
 		</PageLayout>;
 	}
diff --git a/packages/web_ui/src/components/PluginsPage.tsx b/packages/web_ui/src/components/PluginsPage.tsx
index f12b3d00..9d721852 100644
--- a/packages/web_ui/src/components/PluginsPage.tsx
+++ b/packages/web_ui/src/components/PluginsPage.tsx
@@ -9,6 +9,7 @@ import type { PluginWebApi } from "@clusterio/lib";
 import notify from "../util/notify";
 import ControlContext from "./ControlContext";
 import PageLayout from "./PageLayout";
+import PageHeader from "./PageHeader";
 
 const strcmp = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" }).compare;
 
@@ -47,7 +48,7 @@ export default function PluginsPage() {
 	}
 
 	return <PageLayout nav={[{ name: "Plugins" }]}>
-		<h2>Plugins</h2>
+		<PageHeader title="Plugins" />
 		<Table
 			columns={[
 				{
diff --git a/plugins/inventory_sync/web/index.tsx b/plugins/inventory_sync/web/index.tsx
index bdfad9a7..f17184e3 100644
--- a/plugins/inventory_sync/web/index.tsx
+++ b/plugins/inventory_sync/web/index.tsx
@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useState } from "react";
 
-import { BaseWebPlugin, PageLayout, ControlContext } from "@clusterio/web_ui";
+import { BaseWebPlugin, PageLayout, PageHeader, ControlContext } from "@clusterio/web_ui";
 import { DatabaseStatsRequest, DatabaseStatsResponse } from "../messages";
 
 import "./style.css";
@@ -18,7 +18,7 @@ function InventoryPage() {
 	}, []);
 
 	return <PageLayout nav={[{ name: "Inventory sync" }]}>
-		<h2>Inventory sync</h2>
+		<PageHeader title="Inventory sync" />
 		{statsData && <>
 			<p>Database size: {Math.round(statsData.databaseSize / 1000)}kB</p>
 			<p>Database entries: {statsData.databaseEntries}</p>
diff --git a/plugins/subspace_storage/web/index.tsx b/plugins/subspace_storage/web/index.tsx
index 345795f2..2d1b458a 100644
--- a/plugins/subspace_storage/web/index.tsx
+++ b/plugins/subspace_storage/web/index.tsx
@@ -3,7 +3,7 @@ import { Input, Table, Typography } from "antd";
 
 import * as lib from "@clusterio/lib";
 import {
-	BaseWebPlugin, PageLayout, Control, ControlContext,
+	BaseWebPlugin, PageLayout, PageHeader, Control, ControlContext,
 	notifyErrorHandler, useItemMetadata, useLocale,
 } from "@clusterio/web_ui";
 import { GetStorageRequest, Item, SetStorageSubscriptionRequest, UpdateStorageEvent } from "../messages";
@@ -60,7 +60,7 @@ function StoragePage() {
 	let numberFormat = new Intl.NumberFormat("en-US");
 
 	return <PageLayout nav={[{ name: "Storage" }]}>
-		<h2>Storage</h2>
+		<PageHeader title="Storage" />
 		<Paragraph>
 			<Input
 				placeholder="Search"