diff --git a/sites/svelte.dev/src/lib/server/docs/index.js b/sites/svelte.dev/src/lib/server/docs/index.js
index eef9e4e2a9..29457886ea 100644
--- a/sites/svelte.dev/src/lib/server/docs/index.js
+++ b/sites/svelte.dev/src/lib/server/docs/index.js
@@ -75,6 +75,7 @@ export async function get_docs_data(base = CONTENT_BASE_PATHS.DOCS) {
 				title: page_title,
 				slug: page_slug,
 				content: page_content,
+				category: category_title,
 				sections: get_sections(page_content),
 				path: `${app_base}/docs/${page_slug}`,
 				file: `${category_dir}/${filename}`
diff --git a/sites/svelte.dev/src/lib/server/docs/types.d.ts b/sites/svelte.dev/src/lib/server/docs/types.d.ts
index 425d3a9251..99c7324135 100644
--- a/sites/svelte.dev/src/lib/server/docs/types.d.ts
+++ b/sites/svelte.dev/src/lib/server/docs/types.d.ts
@@ -17,6 +17,7 @@ export type Category = {
 
 export type Page = {
 	title: string;
+	category: string;
 	slug: string;
 	file: string;
 	path: string;
diff --git a/sites/svelte.dev/src/routes/docs/+layout.svelte b/sites/svelte.dev/src/routes/docs/+layout.svelte
index 55ced57717..097fde98ff 100644
--- a/sites/svelte.dev/src/routes/docs/+layout.svelte
+++ b/sites/svelte.dev/src/routes/docs/+layout.svelte
@@ -4,7 +4,10 @@
 
 	export let data;
 
-	$: title = $page.data.page?.title;
+	$: pageData = $page.data.page;
+
+	$: title = pageData?.title;
+	$: category = pageData?.category;
 </script>
 
 <div class="container">
@@ -13,6 +16,9 @@
 	</div>
 
 	<div class="page content">
+		{#if category}
+			<p class="category">{category}</p>
+		{/if}
 		{#if title}
 			<h1>{title}</h1>
 		{/if}
@@ -41,6 +47,14 @@
 		all: unset;
 	}
 
+	.category {
+		font: 700 var(--sk-text-s) var(--sk-font);
+		text-transform: uppercase;
+		letter-spacing: 0.12em;
+		margin: 0 0 0.5em;
+		color: var(--sk-text-3);
+	}
+
 	@media (min-width: 832px) {
 		.content {
 			padding-left: calc(var(--sidebar-width) + var(--sk-page-padding-side));