From 12e608e7f0d0d4138b3d38bb5f9ce8858ae3f217 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Mon, 6 Jul 2026 09:51:10 +0100
Subject: [PATCH 01/12] refactor: introduce PageHeader component

---
 .../app-frontend/src/pages/instance/Index.vue | 445 +++++++-----
 apps/app-frontend/src/pages/project/Index.vue | 243 ++++---
 .../ui/ProjectCollectionSaveButton.vue        | 127 ++++
 apps/frontend/src/pages/[type]/[project].vue  | 551 +++++---------
 .../src/pages/organization/[organization].vue | 178 ++---
 apps/frontend/src/pages/user/[user].vue       | 381 +++++-----
 .../src/components/base/ContentPageHeader.vue |  45 --
 .../ui/src/components/base/JoinedButtons.vue  |   3 +-
 .../ui/src/components/base/PageHeader.vue     | 683 +++++++++++++++++-
 .../components/base/TeleportOverflowMenu.vue  | 104 ++-
 packages/ui/src/components/base/index.ts      |   9 +-
 .../src/components/project/ProjectHeader.vue  | 105 ++-
 .../server-header/ServerManageHeader.vue      |  42 +-
 .../src/layouts/shared/browse-tab/header.vue  | 123 ++--
 .../stories/base/ContentPageHeader.stories.ts |  63 --
 .../ui/src/stories/base/PageHeader.stories.ts | 353 +++++++++
 16 files changed, 2287 insertions(+), 1168 deletions(-)
 create mode 100644 apps/frontend/src/components/ui/ProjectCollectionSaveButton.vue
 delete mode 100644 packages/ui/src/components/base/ContentPageHeader.vue
 delete mode 100644 packages/ui/src/stories/base/ContentPageHeader.stories.ts
 create mode 100644 packages/ui/src/stories/base/PageHeader.stories.ts

diff --git a/apps/app-frontend/src/pages/instance/Index.vue b/apps/app-frontend/src/pages/instance/Index.vue
index 122edf3a84..b33edf12b5 100644
--- a/apps/app-frontend/src/pages/instance/Index.vue
+++ b/apps/app-frontend/src/pages/instance/Index.vue
@@ -13,207 +13,57 @@
 				@unlinked="fetchInstance"
 			/>
 			<UpdateToPlayModal ref="updateToPlayModal" :instance="instance" />
-			<ContentPageHeader>
-				<template #icon>
-					<Avatar
-						:src="icon ? icon : undefined"
-						:alt="instance.name"
-						size="64px"
-						:tint-by="instance.id"
-					/>
-				</template>
-				<template #title>
-					{{ instance.name }}
-				</template>
-				<template #stats>
+			<PageHeader
+				:header="instance.name"
+				:leading="instanceHeaderLeading"
+				:metadata="instanceHeaderMetadata"
+				:actions="instanceHeaderActions"
+			>
+				<template #metadata-server-details>
 					<div class="flex items-center flex-wrap gap-2">
-						<template v-if="!isServerInstance">
-							<div class="flex items-center gap-2 capitalize font-medium">
-								{{ instance.loader }} {{ instance.game_version }}
-							</div>
-
-							<template v-if="showInstancePlayTime">
-								<div class="w-1.5 h-1.5 rounded-full bg-surface-5"></div>
-
-								<div class="flex items-center gap-2 font-medium">
-									<template v-if="timePlayed > 0">
-										{{ timePlayedHumanized }}
-									</template>
-									<template v-else> Never played </template>
-								</div>
-							</template>
-						</template>
-
-						<template v-else>
-							<template v-if="loadingServerPing">
-								<ServerOnlinePlayers
-									v-if="playersOnline !== undefined"
-									:online="playersOnline"
-									:status-online="statusOnline"
-									hide-label
-								/>
-								<ServerRecentPlays :recent-plays="recentPlays ?? 0" hide-label />
-								<div
-									v-if="
-										(playersOnline !== undefined || recentPlays !== undefined) &&
-										(minecraftServer?.region || ping)
-									"
-									class="w-1.5 h-1.5 rounded-full bg-surface-5"
-								></div>
-								<ServerPing v-if="ping" :ping="ping" />
-							</template>
-
-							<ServerRegion v-if="minecraftServer?.region" :region="minecraftServer?.region" />
-
+						<template v-if="loadingServerPing">
+							<ServerOnlinePlayers
+								v-if="playersOnline !== undefined"
+								:online="playersOnline"
+								:status-online="statusOnline"
+								hide-label
+							/>
+							<ServerRecentPlays :recent-plays="recentPlays ?? 0" hide-label />
 							<div
-								v-if="minecraftServer?.region || ping"
+								v-if="
+									(playersOnline !== undefined || recentPlays !== undefined) &&
+									(minecraftServer?.region || ping)
+								"
 								class="w-1.5 h-1.5 rounded-full bg-surface-5"
 							></div>
-
-							<div
-								v-if="linkedProjectV3"
-								class="flex gap-1.5 items-center font-medium text-primary"
-							>
-								Linked to
-								<Avatar
-									:src="linkedProjectV3.icon_url"
-									:alt="linkedProjectV3.name"
-									:tint-by="instance.id"
-									size="24px"
-								/>
-								<router-link
-									:to="`/project/${linkedProjectV3.slug ?? linkedProjectV3.id}`"
-									class="hover:underline text-primary truncate"
-								>
-									{{ linkedProjectV3.name }}
-								</router-link>
-							</div>
+							<ServerPing v-if="ping" :ping="ping" />
 						</template>
-					</div>
-				</template>
-				<template #actions>
-					<div class="flex gap-2">
-						<ButtonStyled
-							v-if="
-								[
-									'installing',
-									'pack_installing',
-									'pack_installed',
-									'not_installed',
-									'minecraft_installing',
-								].includes(instance.install_stage)
-							"
-							color="brand"
-							size="large"
-						>
-							<button disabled>Installing...</button>
-						</ButtonStyled>
-						<ButtonStyled
-							v-else-if="instance.install_stage !== 'installed'"
-							color="brand"
-							size="large"
-						>
-							<button @click="repairInstance()">
-								<DownloadIcon />
-								Repair
-							</button>
-						</ButtonStyled>
-						<ButtonStyled v-else-if="playing === true" color="red" size="large">
-							<button :disabled="stopping" @click="stopInstance('InstancePage')">
-								<StopCircleIcon />
-								{{ stopping ? 'Stopping...' : 'Stop' }}
-							</button>
-						</ButtonStyled>
-						<ButtonStyled
-							v-else-if="playing === false && loading === false && !isServerInstance"
-							color="brand"
-							size="large"
-						>
-							<button @click="startInstance('InstancePage')">
-								<PlayIcon />
-								Play
-							</button>
-						</ButtonStyled>
+
+						<ServerRegion v-if="minecraftServer?.region" :region="minecraftServer?.region" />
+
 						<div
-							v-else-if="playing === false && loading === false && isServerInstance"
-							class="joined-buttons"
-						>
-							<ButtonStyled color="brand" size="large">
-								<button @click="handlePlayServer()">
-									<PlayIcon />
-									Play
-								</button>
-							</ButtonStyled>
-							<ButtonStyled color="brand" size="large">
-								<OverflowMenu
-									:options="[
-										{
-											id: 'join_server',
-											action: () => handlePlayServer(),
-										},
-										{
-											id: 'launch_instance',
-											action: () => startInstance('InstancePage'),
-										},
-									]"
-								>
-									<div class="w-0 text-xl relative top-0.5 right-2.5">
-										<DropdownIcon />
-									</div>
-
-									<template #join_server>
-										<PlayIcon />
-										Join server
-									</template>
-									<template #launch_instance>
-										<PlayIcon />
-										Launch instance
-									</template>
-								</OverflowMenu>
-							</ButtonStyled>
-						</div>
-						<ButtonStyled
-							v-else-if="loading === true && playing === false"
-							color="brand"
-							size="large"
-						>
-							<button disabled>Starting...</button>
-						</ButtonStyled>
-						<ButtonStyled circular size="large">
-							<button v-tooltip="'Instance settings'" @click="settingsModal?.show()">
-								<SettingsIcon />
-							</button>
-						</ButtonStyled>
-						<ButtonStyled type="transparent" circular size="large">
-							<OverflowMenu
-								:options="[
-									{
-										id: 'open-folder',
-										action: () => {
-											if (instance) showInstanceInFolder(instance.id)
-										},
-									},
-									{
-										id: 'export-mrpack',
-										action: () => exportModal?.show(),
-									},
-									{
-										id: 'create-shortcut',
-										action: () => createShortcut(),
-									},
-								]"
+							v-if="minecraftServer?.region || ping"
+							class="w-1.5 h-1.5 rounded-full bg-surface-5"
+						></div>
+
+						<div v-if="linkedProjectV3" class="flex gap-1.5 items-center font-medium text-primary">
+							Linked to
+							<Avatar
+								:src="linkedProjectV3.icon_url"
+								:alt="linkedProjectV3.name"
+								:tint-by="instance.id"
+								size="24px"
+							/>
+							<router-link
+								:to="`/project/${linkedProjectV3.slug ?? linkedProjectV3.id}`"
+								class="hover:underline text-primary truncate"
 							>
-								<MoreVerticalIcon />
-								<template #share-instance> <UserPlusIcon /> Share instance </template>
-								<template #host-a-server> <ServerIcon /> Create a server </template>
-								<template #open-folder> <FolderOpenIcon /> Open folder </template>
-								<template #export-mrpack> <PackageIcon /> Export modpack </template>
-								<template #create-shortcut> <ExternalIcon /> Create shortcut </template>
-							</OverflowMenu>
-						</ButtonStyled>
+								{{ linkedProjectV3.name }}
+							</router-link>
+						</div>
 					</div>
 				</template>
-			</ContentPageHeader>
+			</PageHeader>
 		</div>
 		<div :class="['px-6', { 'shrink-0': isFixedRender }]">
 			<NavTabs :links="tabs" />
@@ -273,7 +123,6 @@ import {
 	CheckCircleIcon,
 	ClipboardCopyIcon,
 	DownloadIcon,
-	DropdownIcon,
 	EditIcon,
 	ExternalIcon,
 	EyeIcon,
@@ -284,27 +133,28 @@ import {
 	PackageIcon,
 	PlayIcon,
 	PlusIcon,
-	ServerIcon,
 	SettingsIcon,
 	StopCircleIcon,
+	TagCategoryGamepad2Icon as Gamepad2Icon,
 	TerminalSquareIcon,
+	TimerIcon,
 	UpdatedIcon,
-	UserPlusIcon,
 	XIcon,
 } from '@modrinth/assets'
 import {
 	Avatar,
-	ButtonStyled,
-	ContentPageHeader,
+	formatLoaderLabel,
 	injectNotificationManager,
+	LoaderIcon as ServerLoaderIcon,
 	NavTabs,
-	OverflowMenu,
+	PageHeader,
 	ServerOnlinePlayers,
 	ServerPing,
 	ServerRecentPlays,
 	ServerRegion,
 	useLoadingBarToken,
 } from '@modrinth/ui'
+import type { Loaders } from '@modrinth/utils'
 import { useQueryClient } from '@tanstack/vue-query'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import dayjs from 'dayjs'
@@ -741,6 +591,205 @@ const timePlayedHumanized = computed(() => {
 	return seconds + ' second' + (seconds > 1 ? 's' : '')
 })
 
+const loaderDisplayName = computed(() =>
+	instance.value ? (formatLoaderLabel(instance.value.loader) as Loaders) : null,
+)
+
+const loaderLabel = computed(() =>
+	instance.value && loaderDisplayName.value
+		? [loaderDisplayName.value, instance.value.loader_version].filter(Boolean).join(' ')
+		: '',
+)
+
+const playtimeLabel = computed(() =>
+	timePlayed.value > 0 ? timePlayedHumanized.value : 'Never played',
+)
+
+const instanceHeaderLeading = computed(() => ({
+	type: 'avatar' as const,
+	src: icon.value ? icon.value : undefined,
+	alt: instance.value?.name,
+	avatarSize: '64px',
+	tintBy: instance.value?.id,
+}))
+
+const instanceHeaderMetadata = computed(() => {
+	if (!instance.value) return []
+	if (isServerInstance.value) {
+		return [
+			{
+				id: 'server-details',
+				type: 'custom' as const,
+				class: 'contents',
+			},
+		]
+	}
+
+	return [
+		{
+			id: 'game-version',
+			label: instance.value.game_version,
+			icon: Gamepad2Icon,
+		},
+		{
+			id: 'loader',
+			label: loaderLabel.value,
+			icon: ServerLoaderIcon,
+			iconProps: {
+				loader: loaderDisplayName.value,
+			},
+		},
+		...(showInstancePlayTime.value
+			? [
+					{
+						id: 'playtime',
+						label: playtimeLabel.value,
+						icon: TimerIcon,
+					},
+				]
+			: []),
+	]
+})
+
+const installingStages = [
+	'installing',
+	'pack_installing',
+	'pack_installed',
+	'not_installed',
+	'minecraft_installing',
+]
+
+const primaryInstanceAction = computed(() => {
+	if (!instance.value) return null
+
+	if (installingStages.includes(instance.value.install_stage)) {
+		return {
+			id: 'installing',
+			label: 'Installing...',
+			color: 'brand' as const,
+			disabled: true,
+		}
+	}
+
+	if (instance.value.install_stage !== 'installed') {
+		return {
+			id: 'repair',
+			label: 'Repair',
+			icon: DownloadIcon,
+			color: 'brand' as const,
+			onClick: () => {
+				void repairInstance()
+			},
+		}
+	}
+
+	if (playing.value === true) {
+		return {
+			id: 'stop',
+			label: stopping.value ? 'Stopping...' : 'Stop',
+			icon: StopCircleIcon,
+			color: 'red' as const,
+			disabled: stopping.value,
+			onClick: () => {
+				void stopInstance('InstancePage')
+			},
+		}
+	}
+
+	if (playing.value === false && loading.value === false && !isServerInstance.value) {
+		return {
+			id: 'play',
+			label: 'Play',
+			icon: PlayIcon,
+			color: 'brand' as const,
+			onClick: () => {
+				void startInstance('InstancePage')
+			},
+		}
+	}
+
+	if (playing.value === false && loading.value === false && isServerInstance.value) {
+		return {
+			id: 'play',
+			label: 'Play',
+			color: 'brand' as const,
+			joinedActions: [
+				{
+					id: 'join_server',
+					label: 'Play',
+					icon: PlayIcon,
+					action: () => {
+						void handlePlayServer()
+					},
+				},
+				{
+					id: 'launch_instance',
+					label: 'Launch instance',
+					icon: PlayIcon,
+					action: () => {
+						void startInstance('InstancePage')
+					},
+				},
+			],
+		}
+	}
+
+	if (loading.value === true && playing.value === false) {
+		return {
+			id: 'starting',
+			label: 'Starting...',
+			color: 'brand' as const,
+			disabled: true,
+		}
+	}
+
+	return null
+})
+
+const instanceHeaderActions = computed(() => [
+	...(primaryInstanceAction.value ? [primaryInstanceAction.value] : []),
+	{
+		id: 'settings',
+		label: 'Instance settings',
+		icon: SettingsIcon,
+		labelHidden: true,
+		tooltip: 'Instance settings',
+		onClick: () => settingsModal.value?.show(),
+	},
+	{
+		id: 'more',
+		label: 'More actions',
+		icon: MoreVerticalIcon,
+		labelHidden: true,
+		type: 'transparent' as const,
+		tooltip: 'More actions',
+		menuActions: [
+			{
+				id: 'open-folder',
+				label: 'Open folder',
+				icon: FolderOpenIcon,
+				action: () => {
+					if (instance.value) void showInstanceInFolder(instance.value.id)
+				},
+			},
+			{
+				id: 'export-mrpack',
+				label: 'Export modpack',
+				icon: PackageIcon,
+				action: () => exportModal.value?.show(),
+			},
+			{
+				id: 'create-shortcut',
+				label: 'Create shortcut',
+				icon: ExternalIcon,
+				action: () => {
+					void createShortcut()
+				},
+			},
+		],
+	},
+])
+
 onUnmounted(() => {
 	unlistenProcesses()
 	unlistenInstances()
diff --git a/apps/app-frontend/src/pages/project/Index.vue b/apps/app-frontend/src/pages/project/Index.vue
index 80d2daa9c0..deb2e59305 100644
--- a/apps/app-frontend/src/pages/project/Index.vue
+++ b/apps/app-frontend/src/pages/project/Index.vue
@@ -64,121 +64,9 @@
 					:project="data"
 					:project-v3="projectV3"
 					:ping="serverPing"
+					:actions="projectHeaderActions"
 					@contextmenu.prevent.stop="handleRightClick"
-				>
-					<template v-if="isServerProject" #actions>
-						<ButtonStyled v-if="serverPlaying" size="large" color="red">
-							<button @click="handleStopServer">
-								<StopCircleIcon />
-								{{ formatMessage(commonMessages.stopButton) }}
-							</button>
-						</ButtonStyled>
-						<ButtonStyled v-else size="large" color="brand">
-							<button
-								:disabled="data && installingServerProjects.includes(data.id)"
-								@click="handleClickPlay"
-							>
-								<PlayIcon />
-								{{
-									data && installingServerProjects.includes(data.id)
-										? formatMessage(commonMessages.installingLabel)
-										: formatMessage(commonMessages.playButton)
-								}}
-							</button>
-						</ButtonStyled>
-						<ButtonStyled size="large" circular>
-							<button
-								v-tooltip="formatMessage(commonMessages.addServerToInstanceButton)"
-								@click="handleAddServerToInstance"
-							>
-								<PlusIcon />
-							</button>
-						</ButtonStyled>
-						<ButtonStyled size="large" circular type="transparent">
-							<OverflowMenu
-								:tooltip="`More options`"
-								:options="[
-									{
-										id: 'open-in-browser',
-										link: `https://modrinth.com/project/${data.slug}`,
-										external: true,
-									},
-									{
-										divider: true,
-									},
-									{
-										id: 'report',
-										color: 'red',
-										hoverFilled: true,
-										link: `https://modrinth.com/report?item=project&itemID=${data.id}`,
-									},
-								]"
-								aria-label="More options"
-							>
-								<MoreVerticalIcon aria-hidden="true" />
-								<template #open-in-browser> <ExternalIcon /> Open in browser </template>
-								<template #report> <ReportIcon /> Report </template>
-							</OverflowMenu>
-						</ButtonStyled>
-					</template>
-					<template v-else #actions>
-						<ButtonStyled size="large" color="brand">
-							<button
-								v-tooltip="installButtonTooltip"
-								:disabled="installButtonDisabled"
-								@click="install(null)"
-							>
-								<SpinnerIcon
-									v-if="installButtonLoading && !installButtonInstalled"
-									class="animate-spin"
-								/>
-								<DownloadIcon v-else-if="!installButtonInstalled && !serverProjectSelected" />
-								<CheckIcon v-else />
-								{{ installButtonLabel }}
-							</button>
-						</ButtonStyled>
-						<ButtonStyled size="large" circular type="transparent">
-							<OverflowMenu
-								:tooltip="`More options`"
-								:options="[
-									{
-										id: 'follow',
-										disabled: true,
-										tooltip: 'Coming soon',
-										action: () => {},
-									},
-									{
-										id: 'save',
-										disabled: true,
-										tooltip: 'Coming soon',
-										action: () => {},
-									},
-									{
-										id: 'open-in-browser',
-										link: `https://modrinth.com/${data.project_type}/${data.slug}`,
-										external: true,
-									},
-									{
-										divider: true,
-									},
-									{
-										id: 'report',
-										color: 'red',
-										hoverFilled: true,
-										link: `https://modrinth.com/report?item=project&itemID=${data.id}`,
-									},
-								]"
-								aria-label="More options"
-							>
-								<MoreVerticalIcon aria-hidden="true" />
-								<template #open-in-browser> <ExternalIcon /> Open in browser </template>
-								<template #follow> <HeartIcon /> Follow </template>
-								<template #save> <BookmarkIcon /> Save </template>
-								<template #report> <ReportIcon /> Report </template>
-							</OverflowMenu>
-						</ButtonStyled>
-					</template>
-				</ProjectHeader>
+				/>
 				<NavTabs
 					:links="[
 						{
@@ -266,14 +154,12 @@ import {
 } from '@modrinth/assets'
 import {
 	BrowseInstallHeader,
-	ButtonStyled,
 	commonMessages,
 	CreationFlowModal,
 	defineMessages,
 	getTargetInstallPreferences,
 	injectNotificationManager,
 	NavTabs,
-	OverflowMenu,
 	ProjectBackgroundGradient,
 	ProjectHeader,
 	ProjectSidebarCompatibility,
@@ -514,6 +400,131 @@ const installButtonTooltip = computed(() => {
 	return null
 })
 
+const projectHeaderActions = computed(() => {
+	if (!data.value) return []
+
+	if (isServerProject.value) {
+		return [
+			serverPlaying.value
+				? {
+						id: 'stop',
+						label: formatMessage(commonMessages.stopButton),
+						icon: StopCircleIcon,
+						color: 'red',
+						onClick: handleStopServer,
+					}
+				: {
+						id: 'play',
+						label:
+							data.value && installingServerProjects.value.includes(data.value.id)
+								? formatMessage(commonMessages.installingLabel)
+								: formatMessage(commonMessages.playButton),
+						icon: PlayIcon,
+						color: 'brand',
+						disabled: data.value && installingServerProjects.value.includes(data.value.id),
+						onClick: handleClickPlay,
+					},
+			{
+				id: 'add-server-to-instance',
+				label: formatMessage(commonMessages.addServerToInstanceButton),
+				icon: PlusIcon,
+				labelHidden: true,
+				tooltip: formatMessage(commonMessages.addServerToInstanceButton),
+				onClick: handleAddServerToInstance,
+			},
+			{
+				id: 'more',
+				label: 'More options',
+				icon: MoreVerticalIcon,
+				labelHidden: true,
+				type: 'transparent',
+				tooltip: 'More options',
+				menuActions: [
+					{
+						id: 'open-in-browser',
+						label: 'Open in browser',
+						icon: ExternalIcon,
+						action: () => openUrl(`https://modrinth.com/project/${data.value.slug}`),
+					},
+					{
+						divider: true,
+					},
+					{
+						id: 'report',
+						label: 'Report',
+						icon: ReportIcon,
+						color: 'red',
+						action: () =>
+							openUrl(`https://modrinth.com/report?item=project&itemID=${data.value.id}`),
+					},
+				],
+			},
+		]
+	}
+
+	return [
+		{
+			id: 'install',
+			label: installButtonLabel.value,
+			icon:
+				installButtonLoading.value && !installButtonInstalled.value
+					? SpinnerIcon
+					: !installButtonInstalled.value && !serverProjectSelected.value
+						? DownloadIcon
+						: CheckIcon,
+			iconClass:
+				installButtonLoading.value && !installButtonInstalled.value ? 'animate-spin' : undefined,
+			color: 'brand',
+			tooltip: installButtonTooltip.value,
+			disabled: installButtonDisabled.value,
+			onClick: () => install(null),
+		},
+		{
+			id: 'more',
+			label: 'More options',
+			icon: MoreVerticalIcon,
+			labelHidden: true,
+			type: 'transparent',
+			tooltip: 'More options',
+			menuActions: [
+				{
+					id: 'follow',
+					label: 'Follow',
+					icon: HeartIcon,
+					disabled: true,
+					tooltip: 'Coming soon',
+					action: () => {},
+				},
+				{
+					id: 'save',
+					label: 'Save',
+					icon: BookmarkIcon,
+					disabled: true,
+					tooltip: 'Coming soon',
+					action: () => {},
+				},
+				{
+					id: 'open-in-browser',
+					label: 'Open in browser',
+					icon: ExternalIcon,
+					action: () =>
+						openUrl(`https://modrinth.com/${data.value.project_type}/${data.value.slug}`),
+				},
+				{
+					divider: true,
+				},
+				{
+					id: 'report',
+					label: 'Report',
+					icon: ReportIcon,
+					color: 'red',
+					action: () => openUrl(`https://modrinth.com/report?item=project&itemID=${data.value.id}`),
+				},
+			],
+		},
+	]
+})
+
 const [allLoaders, allGameVersions] = await Promise.all([
 	get_loaders().catch(handleError).then(ref),
 	get_game_versions().catch(handleError).then(ref),
diff --git a/apps/frontend/src/components/ui/ProjectCollectionSaveButton.vue b/apps/frontend/src/components/ui/ProjectCollectionSaveButton.vue
new file mode 100644
index 0000000000..34752468c0
--- /dev/null
+++ b/apps/frontend/src/components/ui/ProjectCollectionSaveButton.vue
@@ -0,0 +1,127 @@
+<template>
+	<ButtonStyled size="large" circular>
+		<PopoutMenu
+			v-if="authUser"
+			:tooltip="
+				saved ? formatMessage(commonMessages.savedLabel) : formatMessage(commonMessages.saveButton)
+			"
+			from="top-right"
+			:aria-label="formatMessage(commonMessages.saveButton)"
+			:dropdown-id="`${baseId}-save`"
+		>
+			<BookmarkIcon aria-hidden="true" :fill="saved ? 'currentColor' : 'none'" />
+			<template #menu>
+				<StyledInput
+					v-model="displayCollectionsSearch"
+					:placeholder="formatMessage(commonMessages.searchPlaceholder)"
+					wrapper-class="menu-search"
+				/>
+				<div v-if="filteredCollections.length > 0" class="collections-list text-primary">
+					<Checkbox
+						v-for="option in filteredCollections"
+						:key="option.id"
+						:model-value="option.projects.includes(projectId)"
+						class="popout-checkbox"
+						@update:model-value="() => collectProject(option, projectId)"
+					>
+						{{ option.name }}
+					</Checkbox>
+				</div>
+
+				<div v-else class="menu-text">
+					<p class="popout-text">{{ noCollectionsLabel }}</p>
+				</div>
+				<ButtonStyled>
+					<button class="mx-3 mb-3" @click="createCollection">
+						<PlusIcon aria-hidden="true" />
+						{{ createNewCollectionLabel }}
+					</button>
+				</ButtonStyled>
+			</template>
+		</PopoutMenu>
+		<nuxt-link
+			v-else
+			v-tooltip="formatMessage(commonMessages.saveButton)"
+			:to="signInRoute"
+			:aria-label="formatMessage(commonMessages.saveButton)"
+		>
+			<BookmarkIcon aria-hidden="true" />
+		</nuxt-link>
+	</ButtonStyled>
+</template>
+
+<script setup lang="ts">
+import { BookmarkIcon, PlusIcon } from '@modrinth/assets'
+import {
+	ButtonStyled,
+	Checkbox,
+	commonMessages,
+	PopoutMenu,
+	StyledInput,
+	useVIntl,
+} from '@modrinth/ui'
+import { computed, ref } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+
+type CollectionOption = {
+	id: string
+	name: string
+	projects: string[]
+}
+
+const props = defineProps<{
+	authUser?: unknown
+	signInRoute: RouteLocationRaw
+	projectId: string
+	collections: CollectionOption[]
+	saved: boolean
+	baseId: string
+	noCollectionsLabel: string
+	createNewCollectionLabel: string
+	collectProject: (option: CollectionOption, projectId: string) => void | Promise<void>
+	createCollection: (event: MouseEvent) => void
+}>()
+
+const { formatMessage } = useVIntl()
+const displayCollectionsSearch = ref('')
+
+const filteredCollections = computed(() =>
+	props.collections
+		.filter((collection) =>
+			collection.name.toLowerCase().includes(displayCollectionsSearch.value.toLowerCase()),
+		)
+		.slice()
+		.sort((a, b) => a.name.localeCompare(b.name)),
+)
+</script>
+
+<style scoped lang="scss">
+.popout-checkbox {
+	padding: var(--gap-sm) var(--gap-md);
+	white-space: nowrap;
+
+	&:hover {
+		filter: brightness(0.95);
+	}
+}
+
+.menu-text {
+	padding: 0 var(--gap-md);
+	font-size: var(--font-size-nm);
+	color: var(--color-secondary);
+}
+
+.menu-search {
+	margin: var(--gap-sm) var(--gap-md);
+	width: calc(100% - var(--gap-md) * 2);
+}
+
+.collections-list {
+	max-height: 40rem;
+	overflow-y: auto;
+	background-color: var(--color-bg);
+	border-radius: var(--radius-md);
+	margin: var(--gap-sm) var(--gap-md);
+	padding: var(--gap-sm);
+}
+</style>
diff --git a/apps/frontend/src/pages/[type]/[project].vue b/apps/frontend/src/pages/[type]/[project].vue
index 7cde8e8cdd..d17825f8fc 100644
--- a/apps/frontend/src/pages/[type]/[project].vue
+++ b/apps/frontend/src/pages/[type]/[project].vue
@@ -133,358 +133,8 @@
 						:project="project"
 						:project-v3="projectV3"
 						:member="!!currentMember"
-					>
-						<template #actions>
-							<ButtonStyled v-if="auth.user && currentMember" size="large" color="brand" circular>
-								<nuxt-link
-									v-tooltip="'Edit project'"
-									:to="`/${project.project_type}/${project.slug ? project.slug : project.id}/settings`"
-									class="!font-bold lg:!hidden"
-								>
-									<SettingsIcon aria-hidden="true" />
-								</nuxt-link>
-							</ButtonStyled>
-							<ButtonStyled v-if="auth.user && currentMember" size="large" color="brand">
-								<nuxt-link
-									:to="`/${project.project_type}/${project.slug ? project.slug : project.id}/settings`"
-									class="!font-bold max-lg:!hidden"
-								>
-									<SettingsIcon aria-hidden="true" />
-									Edit project
-								</nuxt-link>
-							</ButtonStyled>
-
-							<div class="hidden sm:contents">
-								<ButtonStyled
-									v-if="!isServerProject"
-									size="large"
-									:color="
-										(auth.user && currentMember) || route.name === 'type-project-version-version'
-											? `standard`
-											: `brand`
-									"
-									:circular="!!auth.user && !!currentMember"
-								>
-									<button
-										v-tooltip="
-											auth.user && currentMember ? formatMessage(commonMessages.downloadButton) : ''
-										"
-										@click="(event) => downloadModal.show(event)"
-									>
-										<DownloadIcon aria-hidden="true" />
-										{{
-											auth.user && currentMember ? '' : formatMessage(commonMessages.downloadButton)
-										}}
-									</button>
-								</ButtonStyled>
-								<ButtonStyled
-									v-else
-									size="large"
-									:color="
-										(auth.user && currentMember) || route.name === 'type-project-version-version'
-											? `standard`
-											: `brand`
-									"
-									:circular="!!auth.user && !!currentMember"
-								>
-									<button
-										v-tooltip="auth.user && currentMember && !openInAppModal?.open ? 'Play' : ''"
-										@click="handlePlayServerProject"
-									>
-										<PlayIcon aria-hidden="true" />
-										{{ auth.user && currentMember ? '' : 'Play' }}
-									</button>
-								</ButtonStyled>
-							</div>
-
-							<div class="contents sm:hidden">
-								<ButtonStyled
-									v-if="!isServerProject"
-									size="large"
-									circular
-									:color="
-										route.name === 'type-project-version-version' || (auth.user && currentMember)
-											? `standard`
-											: `brand`
-									"
-								>
-									<button
-										:aria-label="formatMessage(commonMessages.downloadButton)"
-										class="flex sm:hidden"
-										@click="(event) => downloadModal.show(event)"
-									>
-										<DownloadIcon aria-hidden="true" />
-									</button>
-								</ButtonStyled>
-								<ButtonStyled
-									v-else
-									size="large"
-									circular
-									:color="
-										route.name === 'type-project-version-version' || (auth.user && currentMember)
-											? `standard`
-											: `brand`
-									"
-								>
-									<button aria-label="Play" class="flex sm:hidden" @click="handlePlayServerProject">
-										<PlayIcon aria-hidden="true" />
-									</button>
-								</ButtonStyled>
-							</div>
-							<Tooltip
-								v-if="canCreateServerFrom && flags.showProjectPageQuickServerButton"
-								theme="dismissable-prompt"
-								:triggers="[]"
-								:shown="flags.showProjectPageCreateServersTooltip"
-								:auto-hide="false"
-								placement="bottom-start"
-							>
-								<ButtonStyled size="large" circular>
-									<nuxt-link
-										v-tooltip="formatMessage(messages.createServerTooltip)"
-										:to="`/hosting?project=${project.id}#plan`"
-										@click="
-											() => {
-												flags.showProjectPageCreateServersTooltip = false
-												saveFeatureFlags()
-											}
-										"
-									>
-										<ServerPlusIcon aria-hidden="true" />
-									</nuxt-link>
-								</ButtonStyled>
-								<template #popper>
-									<div class="grid grid-cols-[min-content] gap-1">
-										<div class="flex min-w-60 items-center justify-between gap-4">
-											<h3
-												class="m-0 flex items-center gap-2 whitespace-nowrap text-base font-bold text-contrast"
-											>
-												{{ formatMessage(messages.serversPromoTitle) }}
-												<TagItem
-													:style="{
-														'--_color': 'var(--color-brand)',
-														'--_bg-color': 'var(--color-brand-highlight)',
-													}"
-													>{{ formatMessage(commonMessages.newBadge) }}</TagItem
-												>
-											</h3>
-											<ButtonStyled size="small" circular>
-												<button
-													v-tooltip="formatMessage(messages.dontShowAgain)"
-													@click="
-														() => {
-															flags.showProjectPageCreateServersTooltip = false
-															saveFeatureFlags()
-														}
-													"
-												>
-													<XIcon aria-hidden="true" />
-												</button>
-											</ButtonStyled>
-										</div>
-
-										<p class="m-0 text-wrap text-sm font-medium leading-tight text-secondary">
-											{{ formatMessage(messages.serversPromoDescription) }}
-										</p>
-
-										<p class="m-0 text-wrap text-sm font-bold text-primary">
-											<IntlFormatted
-												:message-id="messages.serversPromoPricing"
-												:values="{
-													price: formatPrice(500, 'USD', true),
-												}"
-											>
-												<template #small="{ children }">
-													<span class="text-xs">
-														<component :is="() => children" />
-													</span>
-												</template>
-											</IntlFormatted>
-										</p>
-									</div>
-								</template>
-							</Tooltip>
-							<ButtonStyled size="large" circular>
-								<ClientOnly>
-									<button
-										v-if="auth.user"
-										v-tooltip="
-											following
-												? formatMessage(commonMessages.unfollowButton)
-												: formatMessage(commonMessages.followButton)
-										"
-										:aria-label="
-											following
-												? formatMessage(commonMessages.unfollowButton)
-												: formatMessage(commonMessages.followButton)
-										"
-										@click="userFollowProject(project)"
-									>
-										<HeartIcon :fill="following ? 'currentColor' : 'none'" aria-hidden="true" />
-									</button>
-									<nuxt-link
-										v-else
-										v-tooltip="formatMessage(commonMessages.followButton)"
-										:to="signInRouteObj"
-										:aria-label="formatMessage(commonMessages.followButton)"
-									>
-										<HeartIcon aria-hidden="true" />
-									</nuxt-link>
-									<template #fallback>
-										<nuxt-link
-											v-tooltip="formatMessage(commonMessages.followButton)"
-											:to="signInRouteObj"
-											:aria-label="formatMessage(commonMessages.followButton)"
-										>
-											<HeartIcon aria-hidden="true" />
-										</nuxt-link>
-									</template>
-								</ClientOnly>
-							</ButtonStyled>
-							<ButtonStyled size="large" circular>
-								<PopoutMenu
-									v-if="auth.user"
-									:tooltip="
-										collections.some((x) => x.projects.includes(project.id))
-											? formatMessage(commonMessages.savedLabel)
-											: formatMessage(commonMessages.saveButton)
-									"
-									from="top-right"
-									:aria-label="formatMessage(commonMessages.saveButton)"
-									:dropdown-id="`${baseId}-save`"
-								>
-									<BookmarkIcon
-										aria-hidden="true"
-										:fill="
-											collections.some((x) => x.projects.includes(project.id))
-												? 'currentColor'
-												: 'none'
-										"
-									/>
-									<template #menu>
-										<StyledInput
-											v-model="displayCollectionsSearch"
-											:placeholder="formatMessage(commonMessages.searchPlaceholder)"
-											wrapper-class="menu-search"
-										/>
-										<div v-if="collections.length > 0" class="collections-list text-primary">
-											<Checkbox
-												v-for="option in collections
-													.slice()
-													.sort((a, b) => a.name.localeCompare(b.name))"
-												:key="option.id"
-												:model-value="option.projects.includes(project.id)"
-												class="popout-checkbox"
-												@update:model-value="() => onUserCollectProject(option, project.id)"
-											>
-												{{ option.name }}
-											</Checkbox>
-										</div>
-
-										<div v-else class="menu-text">
-											<p class="popout-text">{{ formatMessage(messages.noCollectionsFound) }}</p>
-										</div>
-										<ButtonStyled>
-											<button
-												class="mx-3 mb-3"
-												@click="(event) => $refs.modal_collection.show(event)"
-											>
-												<PlusIcon aria-hidden="true" />
-												{{ formatMessage(messages.createNewCollection) }}
-											</button>
-										</ButtonStyled>
-									</template>
-								</PopoutMenu>
-								<nuxt-link v-else v-tooltip="'Save'" :to="signInRouteObj" aria-label="Save">
-									<BookmarkIcon aria-hidden="true" />
-								</nuxt-link>
-							</ButtonStyled>
-
-							<ButtonStyled size="large" circular type="transparent">
-								<OverflowMenu
-									:tooltip="formatMessage(commonMessages.moreOptionsButton)"
-									:options="[
-										{
-											id: 'analytics',
-											link: `/${project.project_type}/${project.slug ? project.slug : project.id}/settings/analytics`,
-											hoverOnly: true,
-											shown: auth.user && !!currentMember,
-										},
-										{
-											divider: true,
-											shown: auth.user && !!currentMember,
-										},
-										{
-											id: 'moderation-checklist',
-											action: openModerationChecklistFromMenu,
-											color: 'orange',
-											hoverOnly: true,
-											shown:
-												auth.user &&
-												tags.staffRoles.includes(auth.user.role) &&
-												!showModerationChecklist,
-										},
-										{
-											divider: true,
-											shown:
-												auth.user &&
-												tags.staffRoles.includes(auth.user.role) &&
-												!showModerationChecklist,
-										},
-										{
-											id: 'tech-review',
-											link: `/moderation/technical-review/${project.id}`,
-											color: 'orange',
-											hoverOnly: true,
-											shown: auth.user && tags.staffRoles.includes(auth.user.role),
-										},
-										{
-											divider: true,
-											shown: auth.user && tags.staffRoles.includes(auth.user.role),
-										},
-										{
-											id: 'report',
-											action: () =>
-												auth.user
-													? reportProject(project.id)
-													: navigateTo(
-															getSignInRouteObj(route, getReportPath('project', project.id)),
-														),
-											color: 'red',
-											hoverOnly: true,
-											shown: !isMember,
-										},
-										{ id: 'copy-id', action: () => copyId() },
-										{ id: 'copy-permalink', action: () => copyPermalink() },
-									]"
-									:aria-label="formatMessage(commonMessages.moreOptionsButton)"
-									:dropdown-id="`${baseId}-more-options`"
-								>
-									<MoreVerticalIcon aria-hidden="true" />
-									<template #analytics>
-										<ChartIcon aria-hidden="true" />
-										{{ formatMessage(commonMessages.analyticsButton) }}
-									</template>
-									<template #moderation-checklist>
-										<ScaleIcon aria-hidden="true" /> {{ formatMessage(messages.reviewProject) }}
-									</template>
-									<template #tech-review> <ScanEyeIcon aria-hidden="true" /> Tech review </template>
-									<template #report>
-										<ReportIcon aria-hidden="true" />
-										{{ formatMessage(commonMessages.reportButton) }}
-									</template>
-									<template #copy-id>
-										<ClipboardCopyIcon aria-hidden="true" />
-										{{ formatMessage(commonMessages.copyIdButton) }}
-									</template>
-									<template #copy-permalink>
-										<ClipboardCopyIcon aria-hidden="true" />
-										{{ formatMessage(commonMessages.copyPermalinkButton) }}
-									</template>
-								</OverflowMenu>
-							</ButtonStyled>
-						</template>
-					</ProjectHeader>
+						:actions="projectHeaderActions"
+					/>
 					<ProjectMemberHeader
 						v-if="currentMember"
 						:project="project"
@@ -718,7 +368,6 @@
 
 <script setup>
 import {
-	BookmarkIcon,
 	BookTextIcon,
 	CalendarIcon,
 	ChartIcon,
@@ -730,30 +379,24 @@ import {
 	ListIcon,
 	MoreVerticalIcon,
 	PlayIcon,
-	PlusIcon,
 	ReportIcon,
 	ScaleIcon,
 	ScanEyeIcon,
 	ServerPlusIcon,
 	SettingsIcon,
 	VersionIcon,
-	XIcon,
 } from '@modrinth/assets'
 import {
 	Admonition,
 	Avatar,
 	ButtonStyled,
-	Checkbox,
 	commonMessages,
 	defineMessages,
 	injectModrinthClient,
 	injectNotificationManager,
-	IntlFormatted,
 	NavTabs,
 	NewModal,
 	OpenInAppModal,
-	OverflowMenu,
-	PopoutMenu,
 	PROJECT_DEP_MARKER_QUERY,
 	ProjectBackgroundGradient,
 	ProjectEnvironmentModal,
@@ -765,8 +408,6 @@ import {
 	ProjectSidebarServerInfo,
 	ProjectSidebarTags,
 	provideProjectPageContext,
-	StyledInput,
-	TagItem,
 	useDebugLogger,
 	useFormatDateTime,
 	useFormatPrice,
@@ -776,7 +417,6 @@ import {
 import { capitalizeString, formatProjectType, renderString } from '@modrinth/utils'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
 import { useLocalStorage } from '@vueuse/core'
-import { Tooltip } from 'floating-vue'
 import { onScopeDispose, readonly, ref, useTemplateRef, watch, watchEffect } from 'vue'
 
 import { navigateTo } from '#app'
@@ -785,6 +425,7 @@ import CollectionCreateModal from '~/components/ui/create/CollectionCreateModal.
 import MessageBanner from '~/components/ui/MessageBanner.vue'
 import ModerationChecklist from '~/components/ui/moderation/checklist/ModerationChecklist.vue'
 import ModerationProjectNags from '~/components/ui/moderation/ModerationProjectNags.vue'
+import ProjectCollectionSaveButton from '~/components/ui/ProjectCollectionSaveButton.vue'
 import ProjectDownloadModal from '~/components/ui/ProjectDownloadModal/index.vue'
 import ProjectMemberHeader from '~/components/ui/ProjectMemberHeader.vue'
 import { getSignInRouteObj } from '~/composables/auth.ts'
@@ -1055,6 +696,7 @@ const messages = defineMessages({
 })
 
 const modalLicense = ref(null)
+const modalCollection = useTemplateRef('modal_collection')
 const licenseText = ref('')
 
 const createdDate = computed(() =>
@@ -1093,13 +735,8 @@ async function getLicenseData(event) {
 	}
 }
 
-const displayCollectionsSearch = ref('')
 const collections = computed(() =>
-	user.value && user.value.collections
-		? user.value.collections.filter((x) =>
-				x.name.toLowerCase().includes(displayCollectionsSearch.value.toLowerCase()),
-			)
-		: [],
+	user.value && user.value.collections ? user.value.collections : [],
 )
 
 if (
@@ -1833,6 +1470,184 @@ const canCreateServerFrom = computed(() => {
 	return project.value.project_type === 'modpack' && project.value.server_side !== 'unsupported'
 })
 
+const projectHeaderActions = computed(() => {
+	if (!project.value) return []
+
+	const projectPath = `/${project.value.project_type}/${project.value.slug ? project.value.slug : project.value.id}`
+	const hasMember = !!currentMember.value
+	const userSignedIn = !!auth.value.user
+	const mutedPrimaryAction = hasMember || route.name === 'type-project-version-version'
+	const primaryLabel = isServerProject.value ? 'Play' : formatMessage(commonMessages.downloadButton)
+
+	return [
+		...(userSignedIn && hasMember
+			? [
+					{
+						id: 'edit-project',
+						label: 'Edit project',
+						icon: SettingsIcon,
+						color: 'brand',
+						to: `${projectPath}/settings`,
+					},
+				]
+			: []),
+		{
+			id: isServerProject.value ? 'play' : 'download',
+			label: primaryLabel,
+			icon: isServerProject.value ? PlayIcon : DownloadIcon,
+			color: mutedPrimaryAction ? 'standard' : 'brand',
+			labelHidden: userSignedIn && hasMember,
+			tooltip: userSignedIn && hasMember ? primaryLabel : undefined,
+			onClick: (event) => {
+				if (isServerProject.value) {
+					handlePlayServerProject()
+				} else {
+					downloadModal.value?.show(event)
+				}
+			},
+		},
+		...(canCreateServerFrom.value && flags.value.showProjectPageQuickServerButton
+			? [
+					{
+						id: 'create-server',
+						label: formatMessage(messages.serversPromoTitle),
+						icon: ServerPlusIcon,
+						labelHidden: true,
+						tooltip: formatMessage(messages.createServerTooltip),
+						to: `/hosting?project=${project.value.id}#plan`,
+						onClick: () => {
+							flags.value.showProjectPageCreateServersTooltip = false
+							saveFeatureFlags()
+						},
+						prompt: {
+							title: formatMessage(messages.serversPromoTitle),
+							description: formatMessage(messages.serversPromoDescription),
+							badge: formatMessage(commonMessages.newBadge),
+							footer: formatMessage(messages.serversPromoPricing, {
+								price: formatPrice(500, 'USD', true),
+								small: (children) => (Array.isArray(children) ? children.join('') : children),
+							}),
+							dismissLabel: formatMessage(messages.dontShowAgain),
+							shown: flags.value.showProjectPageCreateServersTooltip,
+							placement: 'bottom-start',
+							onDismiss: () => {
+								flags.value.showProjectPageCreateServersTooltip = false
+								saveFeatureFlags()
+							},
+						},
+					},
+				]
+			: []),
+		{
+			id: 'follow',
+			label: following.value
+				? formatMessage(commonMessages.unfollowButton)
+				: formatMessage(commonMessages.followButton),
+			icon: HeartIcon,
+			iconProps: {
+				fill: following.value ? 'currentColor' : 'none',
+			},
+			labelHidden: true,
+			tooltip: following.value
+				? formatMessage(commonMessages.unfollowButton)
+				: formatMessage(commonMessages.followButton),
+			to: userSignedIn ? undefined : signInRouteObj.value,
+			onClick: userSignedIn ? () => userFollowProject(project.value) : undefined,
+		},
+		{
+			id: 'save',
+			label: formatMessage(commonMessages.saveButton),
+			component: ProjectCollectionSaveButton,
+			componentProps: {
+				authUser: auth.value.user,
+				signInRoute: signInRouteObj.value,
+				projectId: project.value.id,
+				collections: collections.value,
+				saved: collections.value.some((x) => x.projects.includes(project.value.id)),
+				baseId,
+				noCollectionsLabel: formatMessage(messages.noCollectionsFound),
+				createNewCollectionLabel: formatMessage(messages.createNewCollection),
+				collectProject: onUserCollectProject,
+				createCollection: (event) => modalCollection.value?.show(event),
+			},
+		},
+		{
+			id: 'more',
+			label: formatMessage(commonMessages.moreOptionsButton),
+			icon: MoreVerticalIcon,
+			labelHidden: true,
+			type: 'transparent',
+			tooltip: formatMessage(commonMessages.moreOptionsButton),
+			menuActions: [
+				{
+					id: 'analytics',
+					label: formatMessage(commonMessages.analyticsButton),
+					icon: ChartIcon,
+					link: `${projectPath}/settings/analytics`,
+					shown: userSignedIn && hasMember,
+				},
+				{
+					divider: true,
+					shown: userSignedIn && hasMember,
+				},
+				{
+					id: 'moderation-checklist',
+					label: formatMessage(messages.reviewProject),
+					icon: ScaleIcon,
+					action: openModerationChecklistFromMenu,
+					color: 'orange',
+					shown:
+						userSignedIn &&
+						tags.value.staffRoles.includes(auth.value.user.role) &&
+						!showModerationChecklist.value,
+				},
+				{
+					divider: true,
+					shown:
+						userSignedIn &&
+						tags.value.staffRoles.includes(auth.value.user.role) &&
+						!showModerationChecklist.value,
+				},
+				{
+					id: 'tech-review',
+					label: 'Tech review',
+					icon: ScanEyeIcon,
+					link: `/moderation/technical-review/${project.value.id}`,
+					color: 'orange',
+					shown: userSignedIn && tags.value.staffRoles.includes(auth.value.user.role),
+				},
+				{
+					divider: true,
+					shown: userSignedIn && tags.value.staffRoles.includes(auth.value.user.role),
+				},
+				{
+					id: 'report',
+					label: formatMessage(commonMessages.reportButton),
+					icon: ReportIcon,
+					action: () =>
+						auth.value.user
+							? reportProject(project.value.id)
+							: navigateTo(getSignInRouteObj(route, getReportPath('project', project.value.id))),
+					color: 'red',
+					shown: !isMember.value,
+				},
+				{
+					id: 'copy-id',
+					label: formatMessage(commonMessages.copyIdButton),
+					icon: ClipboardCopyIcon,
+					action: () => copyId(),
+				},
+				{
+					id: 'copy-permalink',
+					label: formatMessage(commonMessages.copyPermalinkButton),
+					icon: ClipboardCopyIcon,
+					action: () => copyPermalink(),
+				},
+			],
+		},
+	]
+})
+
 const createCanonicalUrl = () =>
 	project.value ? `https://modrinth.com/project/${project.value.id}` : undefined
 
diff --git a/apps/frontend/src/pages/organization/[organization].vue b/apps/frontend/src/pages/organization/[organization].vue
index 78bdb70a68..fc75942489 100644
--- a/apps/frontend/src/pages/organization/[organization].vue
+++ b/apps/frontend/src/pages/organization/[organization].vue
@@ -62,86 +62,14 @@
 		</template>
 		<template v-else>
 			<div class="normal-page__header py-4">
-				<ContentPageHeader>
-					<template #icon>
-						<Avatar :src="organization.icon_url" :alt="organization.name" size="96px" />
-					</template>
-					<template #title>
-						{{ organization.name }}
-					</template>
-					<template #title-suffix>
-						<div class="ml-1 flex items-center gap-2 font-semibold">
-							<OrganizationIcon />
-							Organization
-						</div>
-					</template>
-					<template #summary>
-						{{ organization.description }}
-					</template>
-					<template #stats>
-						<div
-							class="flex items-center gap-2 border-0 border-r border-solid border-divider pr-4 font-semibold"
-						>
-							<UsersIcon class="h-6 w-6 text-secondary" />
-							{{ formatCompactNumber(acceptedMembers?.length || 0) }}
-							members
-						</div>
-						<div
-							class="flex items-center gap-2 border-0 border-r border-solid border-divider pr-4 font-semibold"
-						>
-							<BoxIcon class="h-6 w-6 text-secondary" />
-							{{ formatCompactNumber(projects?.length || 0) }}
-							projects
-						</div>
-						<div
-							v-tooltip="formatNumber(sumDownloads)"
-							class="flex items-center gap-2 font-semibold"
-						>
-							<DownloadIcon class="h-6 w-6 text-secondary" />
-							{{ formatCompactNumber(sumDownloads) }}
-							downloads
-						</div>
-					</template>
-					<template #actions>
-						<ButtonStyled v-if="auth.user && currentMember" size="large">
-							<NuxtLink :to="`/organization/${organization.slug}/settings`">
-								<SettingsIcon aria-hidden="true" />
-								Manage
-							</NuxtLink>
-						</ButtonStyled>
-						<ButtonStyled size="large" circular type="transparent">
-							<OverflowMenu
-								:options="[
-									{
-										id: 'manage-projects',
-										action: () =>
-											router.push('/organization/' + organization?.slug + '/settings/projects'),
-										hoverFilledOnly: true,
-										shown: !!(auth.user && currentMember),
-									},
-									{ divider: true, shown: !!(auth?.user && currentMember) },
-									{ id: 'copy-id', action: () => copyId() },
-									{ id: 'copy-permalink', action: () => copyPermalink() },
-								]"
-								aria-label="More options"
-							>
-								<MoreVerticalIcon aria-hidden="true" />
-								<template #manage-projects>
-									<BoxIcon aria-hidden="true" />
-									Manage projects
-								</template>
-								<template #copy-id>
-									<ClipboardCopyIcon aria-hidden="true" />
-									{{ formatMessage(commonMessages.copyIdButton) }}
-								</template>
-								<template #copy-permalink>
-									<ClipboardCopyIcon aria-hidden="true" />
-									{{ formatMessage(commonMessages.copyPermalinkButton) }}
-								</template>
-							</OverflowMenu>
-						</ButtonStyled>
-					</template>
-				</ContentPageHeader>
+				<PageHeader
+					:header="organization.name"
+					:summary="organization.description"
+					:leading="organizationHeaderLeading"
+					:badges="organizationHeaderBadges"
+					:metadata="organizationHeaderMetadata"
+					:actions="organizationHeaderActions"
+				/>
 			</div>
 			<div class="normal-page__sidebar">
 				<AdPlaceholder v-if="!auth.user" />
@@ -307,10 +235,9 @@ import {
 	Avatar,
 	ButtonStyled,
 	commonMessages,
-	ContentPageHeader,
 	injectModrinthClient,
 	NavTabs,
-	OverflowMenu,
+	PageHeader,
 	PROJECT_DEP_MARKER_QUERY,
 	ProjectCard,
 	ProjectCardList,
@@ -541,6 +468,93 @@ provideOrganizationContext(organizationContext)
 
 const canAccessSettings = computed(() => !!currentMember.value?.accepted)
 
+const organizationHeaderLeading = computed(() => ({
+	type: 'avatar' as const,
+	src: organization.value?.icon_url,
+	alt: organization.value?.name,
+	avatarSize: '96px',
+}))
+
+const organizationHeaderBadges = computed(() => [
+	{
+		id: 'organization',
+		label: 'Organization',
+		icon: OrganizationIcon,
+		class: 'px-0 text-primary',
+	},
+])
+
+const organizationHeaderMetadata = computed(() => [
+	{
+		id: 'members',
+		label: `${formatCompactNumber(acceptedMembers.value?.length || 0)} members`,
+		icon: UsersIcon,
+	},
+	{
+		id: 'projects',
+		label: `${formatCompactNumber(projects.value?.length || 0)} projects`,
+		icon: BoxIcon,
+	},
+	{
+		id: 'downloads',
+		label: `${formatCompactNumber(sumDownloads.value)} downloads`,
+		icon: DownloadIcon,
+		tooltip: formatNumber(sumDownloads.value),
+	},
+])
+
+const organizationHeaderActions = computed(() => [
+	...(auth.value.user && currentMember.value
+		? [
+				{
+					id: 'manage',
+					label: 'Manage',
+					icon: SettingsIcon,
+					to: `/organization/${organization.value?.slug}/settings`,
+				},
+			]
+		: []),
+	{
+		id: 'more',
+		label: 'More options',
+		icon: MoreVerticalIcon,
+		labelHidden: true,
+		type: 'transparent' as const,
+		tooltip: 'More options',
+		menuActions: [
+			{
+				id: 'manage-projects',
+				label: 'Manage projects',
+				icon: BoxIcon,
+				action: () => {
+					void router.push(`/organization/${organization.value?.slug}/settings/projects`)
+				},
+				shown: !!(auth.value.user && currentMember.value),
+			},
+			{
+				divider: true,
+				shown: !!(auth.value.user && currentMember.value),
+			},
+			{
+				id: 'copy-id',
+				label: formatMessage(commonMessages.copyIdButton),
+				icon: ClipboardCopyIcon,
+				action: () => {
+					void copyId()
+				},
+			},
+			{
+				id: 'copy-permalink',
+				label: formatMessage(commonMessages.copyPermalinkButton),
+				icon: ClipboardCopyIcon,
+				action: () => {
+					void copyPermalink()
+				},
+			},
+		],
+	},
+])
+
 watch(
 	[routeHasSettings, acceptedMembers, currentMember],
 	() => {
diff --git a/apps/frontend/src/pages/user/[user].vue b/apps/frontend/src/pages/user/[user].vue
index 0f859690e8..783dd20478 100644
--- a/apps/frontend/src/pages/user/[user].vue
+++ b/apps/frontend/src/pages/user/[user].vue
@@ -120,35 +120,14 @@
 		</NewModal>
 		<div class="new-page sidebar" :class="{ 'alt-layout': cosmetics.leftContentLayout }">
 			<div class="normal-page__header py-4">
-				<ContentPageHeader>
-					<template #icon>
-						<Avatar
-							:src="user.avatar_url"
-							:alt="user.username"
-							:size="isModrinthUser ? '64px' : '96px'"
-							circle
-						/>
-					</template>
-					<template #title>
-						<span class="flex items-center gap-2">
-							{{ user.username }}
-							<BadgeCheckIcon
-								v-if="isOfficialAccount"
-								v-tooltip="formatMessage(messages.officialAccount)"
-								class="size-5 text-brand"
-								fill="var(--color-brand-highlight)"
-							/>
-							<TagItem
-								v-if="isAdminViewing && isAffiliate"
-								:style="{
-									'--_color': 'var(--color-brand)',
-									'--_bg-color': 'var(--color-brand-highlight)',
-								}"
-							>
-								<AffiliateIcon /> Affiliate
-							</TagItem>
-						</span>
-					</template>
+				<PageHeader
+					:header="user.username"
+					:summary="isModrinthUser ? null : profileHeaderSummary"
+					:leading="profileHeaderLeading"
+					:badges="profileHeaderBadges"
+					:metadata="profileHeaderMetadata"
+					:actions="profileHeaderActions"
+				>
 					<template v-if="isModrinthUser" #summary>
 						<IntlFormatted :message-id="messages.officialAccountBio">
 							<template #support-link>
@@ -173,159 +152,7 @@
 							</template>
 						</IntlFormatted>
 					</template>
-					<template v-else #summary>
-						{{
-							user.bio
-								? user.bio
-								: projects?.length > 0
-									? formatMessage(messages.bioFallbackCreator)
-									: formatMessage(messages.bioFallbackUser)
-						}}
-					</template>
-					<template v-if="!isModrinthUser" #stats>
-						<div
-							class="flex items-center gap-2 border-0 border-r border-solid border-divider pr-4 font-semibold"
-						>
-							<BoxIcon class="h-6 w-6 text-secondary" />
-							{{
-								formatMessage(messages.profileProjectsLabel, {
-									count: formatCompactNumber(projects?.length || 0),
-									countPlural: formatCompactNumberPlural(projects?.length || 0),
-								})
-							}}
-						</div>
-						<div
-							v-tooltip="formatNumber(sumDownloads)"
-							class="flex items-center gap-2 border-0 border-r border-solid border-divider pr-4 font-semibold"
-						>
-							<DownloadIcon class="h-6 w-6 text-secondary" />
-							{{
-								formatMessage(messages.profileDownloadsLabel, {
-									count: formatCompactNumber(sumDownloads),
-									countPlural: formatCompactNumberPlural(sumDownloads),
-								})
-							}}
-						</div>
-						<div
-							v-tooltip="formatDateTime(user.created)"
-							class="flex items-center gap-2 font-semibold"
-						>
-							<CalendarIcon class="h-6 w-6 text-secondary" />
-							{{ formatMessage(messages.profileJoinedLabel) }}
-							{{ formatRelativeTime(user.created) }}
-						</div>
-					</template>
-					<template #actions>
-						<ButtonStyled size="large">
-							<NuxtLink v-if="auth.user && auth.user.id === user.id" to="/settings/profile">
-								<EditIcon aria-hidden="true" />
-								{{ formatMessage(commonMessages.editButton) }}
-							</NuxtLink>
-						</ButtonStyled>
-						<ButtonStyled size="large" circular type="transparent">
-							<OverflowMenu
-								:options="[
-									{
-										id: 'manage-projects',
-										action: () => navigateTo('/dashboard/projects'),
-										hoverOnly: true,
-										shown: auth.user && auth.user.id === user.id,
-									},
-									{ divider: true, shown: auth.user && auth.user.id === user.id },
-									{
-										id: 'report',
-										action: () =>
-											auth.user ? reportUser(user.id) : navigateTo(getSignInRouteObj(route)),
-										color: 'red',
-										hoverOnly: true,
-										shown: auth.user?.id !== user.id,
-									},
-									{ id: 'copy-id', action: () => copyId() },
-									{ id: 'copy-permalink', action: () => copyPermalink() },
-									{
-										divider: true,
-										shown: auth.user && isAdmin(auth.user),
-									},
-									{
-										id: 'open-billing',
-										action: () => navigateTo(`/admin/billing/${user.id}`),
-										shown: auth.user && isStaff(auth.user),
-									},
-									{
-										id: 'toggle-affiliate',
-										action: () => toggleAffiliate(user.id),
-										shown: isAdminViewing,
-										remainOnClick: true,
-										color: isAffiliate ? 'red' : 'orange',
-									},
-									{
-										id: 'open-info',
-										action: () => $refs.userDetailsModal.show(),
-										shown: auth.user && isStaff(auth.user),
-									},
-									{
-										id: 'open-analytics',
-										action: () =>
-											navigateTo({
-												path: '/dashboard/analytics',
-												query: { user: user.username || user.id },
-											}),
-										shown: auth.user && isAdmin(auth.user),
-									},
-									{
-										id: 'edit-role',
-										action: () => openRoleEditModal(),
-										shown: auth.user && isAdmin(auth.user),
-									},
-								]"
-								aria-label="More options"
-								:dropdown-id="`${baseId}-more-options`"
-							>
-								<MoreVerticalIcon aria-hidden="true" />
-								<template #manage-projects>
-									<BoxIcon aria-hidden="true" />
-									{{ formatMessage(messages.profileManageProjectsButton) }}
-								</template>
-								<template #report>
-									<ReportIcon aria-hidden="true" />
-									{{ formatMessage(commonMessages.reportButton) }}
-								</template>
-								<template #copy-id>
-									<ClipboardCopyIcon aria-hidden="true" />
-									{{ formatMessage(commonMessages.copyIdButton) }}
-								</template>
-								<template #copy-permalink>
-									<ClipboardCopyIcon aria-hidden="true" />
-									{{ formatMessage(commonMessages.copyPermalinkButton) }}
-								</template>
-								<template #open-billing>
-									<CurrencyIcon aria-hidden="true" />
-									{{ formatMessage(messages.billingButton) }}
-								</template>
-								<template #open-info>
-									<InfoIcon aria-hidden="true" />
-									{{ formatMessage(messages.infoButton) }}
-								</template>
-								<template #open-analytics>
-									<ChartIcon aria-hidden="true" />
-									{{ formatMessage(messages.analyticsButton) }}
-								</template>
-								<template #toggle-affiliate>
-									<AffiliateIcon aria-hidden="true" />
-									{{
-										formatMessage(
-											isAffiliate ? messages.removeAffiliateButton : messages.setAffiliateButton,
-										)
-									}}
-								</template>
-								<template #edit-role>
-									<EditIcon aria-hidden="true" />
-									{{ formatMessage(messages.editRoleButton) }}
-								</template>
-							</OverflowMenu>
-						</ButtonStyled>
-					</template>
-				</ContentPageHeader>
+				</PageHeader>
 			</div>
 			<div class="normal-page__content">
 				<div v-if="navLinks.length > 2" class="mb-4 max-w-full overflow-x-auto">
@@ -535,17 +362,15 @@ import {
 	ButtonStyled,
 	Combobox,
 	commonMessages,
-	ContentPageHeader,
 	defineMessages,
 	injectModrinthClient,
 	injectNotificationManager,
 	IntlFormatted,
 	NavTabs,
 	NewModal,
-	OverflowMenu,
+	PageHeader,
 	ProjectCard,
 	ProjectCardList,
-	TagItem,
 	useCompactNumber,
 	useFormatDateTime,
 	useFormatNumber,
@@ -585,8 +410,6 @@ const formatDateTime = useFormatDateTime({
 
 const { addNotification } = injectNotificationManager()
 
-const baseId = useId()
-
 const messages = defineMessages({
 	profileProjectsLabel: {
 		id: 'profile.label.projects',
@@ -893,12 +716,194 @@ async function copyPermalink() {
 
 const isAffiliate = computed(() => user.value?.badges & UserBadge.AFFILIATE)
 const isAdminViewing = computed(() => isAdmin(auth.value.user))
+const userDetailsModal = useTemplateRef('userDetailsModal')
 
 async function toggleAffiliate(id) {
 	await client.labrinth.users_v2.patch(id, { badges: user.value.badges ^ (1 << 7) })
 	queryClient.invalidateQueries({ queryKey: ['user', userId] })
 }
 
+const profileHeaderSummary = computed(() =>
+	user.value?.bio
+		? user.value.bio
+		: (projects.value?.length ?? 0) === 0
+			? formatMessage(messages.bioFallbackUser)
+			: formatMessage(messages.bioFallbackCreator),
+)
+
+const profileHeaderLeading = computed(() => ({
+	type: 'avatar',
+	src: user.value?.avatar_url,
+	alt: user.value?.username,
+	avatarSize: isModrinthUser.value ? '64px' : '96px',
+	circle: true,
+}))
+
+const profileHeaderBadges = computed(() => [
+	...(isOfficialAccount.value
+		? [
+				{
+					id: 'official',
+					label: formatMessage(messages.officialAccount),
+					icon: BadgeCheckIcon,
+					iconProps: {
+						fill: 'var(--color-brand-highlight)',
+					},
+					tooltip: formatMessage(messages.officialAccount),
+					class: 'border-brand-highlight bg-brand-highlight text-brand',
+				},
+			]
+		: []),
+	...(isAdminViewing.value && isAffiliate.value
+		? [
+				{
+					id: 'affiliate',
+					label: 'Affiliate',
+					icon: AffiliateIcon,
+					class: 'border-brand-highlight bg-brand-highlight text-brand',
+				},
+			]
+		: []),
+])
+
+const profileHeaderMetadata = computed(() => {
+	if (isModrinthUser.value) return []
+
+	return [
+		{
+			id: 'projects',
+			label: formatMessage(messages.profileProjectsLabel, {
+				count: formatCompactNumber(projects.value?.length || 0),
+				countPlural: formatCompactNumberPlural(projects.value?.length || 0),
+			}),
+			icon: BoxIcon,
+		},
+		{
+			id: 'downloads',
+			label: formatMessage(messages.profileDownloadsLabel, {
+				count: formatCompactNumber(sumDownloads.value),
+				countPlural: formatCompactNumberPlural(sumDownloads.value),
+			}),
+			icon: DownloadIcon,
+			tooltip: formatNumber(sumDownloads.value),
+		},
+		{
+			id: 'joined',
+			label: `${formatMessage(messages.profileJoinedLabel)} ${formatRelativeTime(user.value.created)}`,
+			icon: CalendarIcon,
+			tooltip: formatDateTime(user.value.created),
+		},
+	]
+})
+
+const profileHeaderActions = computed(() => {
+	if (!user.value) return []
+
+	const viewer = auth.value.user
+	const isSelf = viewer?.id === user.value.id
+
+	return [
+		...(isSelf
+			? [
+					{
+						id: 'edit-profile',
+						label: formatMessage(commonMessages.editButton),
+						icon: EditIcon,
+						to: '/settings/profile',
+					},
+				]
+			: []),
+		{
+			id: 'more',
+			label: 'More options',
+			icon: MoreVerticalIcon,
+			labelHidden: true,
+			type: 'transparent',
+			tooltip: 'More options',
+			menuActions: [
+				{
+					id: 'manage-projects',
+					label: formatMessage(messages.profileManageProjectsButton),
+					icon: BoxIcon,
+					action: () => navigateTo('/dashboard/projects'),
+					shown: isSelf,
+				},
+				{
+					divider: true,
+					shown: isSelf,
+				},
+				{
+					id: 'report',
+					label: formatMessage(commonMessages.reportButton),
+					icon: ReportIcon,
+					action: () => (viewer ? reportUser(user.value.id) : navigateTo(getSignInRouteObj(route))),
+					color: 'red',
+					shown: viewer?.id !== user.value.id,
+				},
+				{
+					id: 'copy-id',
+					label: formatMessage(commonMessages.copyIdButton),
+					icon: ClipboardCopyIcon,
+					action: () => copyId(),
+				},
+				{
+					id: 'copy-permalink',
+					label: formatMessage(commonMessages.copyPermalinkButton),
+					icon: ClipboardCopyIcon,
+					action: () => copyPermalink(),
+				},
+				{
+					divider: true,
+					shown: viewer && isAdmin(viewer),
+				},
+				{
+					id: 'open-billing',
+					label: formatMessage(messages.billingButton),
+					icon: CurrencyIcon,
+					action: () => navigateTo(`/admin/billing/${user.value.id}`),
+					shown: viewer && isStaff(viewer),
+				},
+				{
+					id: 'toggle-affiliate',
+					label: formatMessage(
+						isAffiliate.value ? messages.removeAffiliateButton : messages.setAffiliateButton,
+					),
+					icon: AffiliateIcon,
+					action: () => toggleAffiliate(user.value.id),
+					shown: isAdminViewing.value,
+					remainOnClick: true,
+					color: isAffiliate.value ? 'red' : 'orange',
+				},
+				{
+					id: 'open-info',
+					label: formatMessage(messages.infoButton),
+					icon: InfoIcon,
+					action: () => userDetailsModal.value?.show(),
+					shown: viewer && isStaff(viewer),
+				},
+				{
+					id: 'open-analytics',
+					label: formatMessage(messages.analyticsButton),
+					icon: ChartIcon,
+					action: () =>
+						navigateTo({
+							path: '/dashboard/analytics',
+							query: { user: user.value.username || user.value.id },
+						}),
+					shown: viewer && isAdmin(viewer),
+				},
+				{
+					id: 'edit-role',
+					label: formatMessage(messages.editRoleButton),
+					icon: EditIcon,
+					action: () => openRoleEditModal(),
+					shown: viewer && isAdmin(viewer),
+				},
+			],
+		},
+	]
+})
+
 const navLinks = computed(() => [
 	{
 		label: formatMessage(commonMessages.allProjectType),
@@ -950,7 +955,7 @@ function saveRoleEdit() {
 
 			editRoleModal.value?.hide()
 		})
-		.catch(() => {
+		.catch((error) => {
 			console.error('Failed to update user role:', error)
 
 			addNotification({
diff --git a/packages/ui/src/components/base/ContentPageHeader.vue b/packages/ui/src/components/base/ContentPageHeader.vue
deleted file mode 100644
index dccb49b688..0000000000
--- a/packages/ui/src/components/base/ContentPageHeader.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-	<div class="flex flex-col gap-2 border-0 border-b border-solid border-divider pb-4">
-		<div class="flex flex-wrap items-start gap-4 max-md:flex-col">
-			<div class="flex min-w-0 flex-1 gap-4">
-				<slot name="icon" />
-				<div class="flex min-w-0 flex-col gap-2 justify-center">
-					<div class="flex flex-col gap-1.5 justify-center">
-						<div class="flex flex-wrap items-center gap-2">
-							<h1 class="m-0 text-2xl font-semibold leading-none text-contrast">
-								<slot name="title" />
-							</h1>
-							<slot name="title-suffix" />
-						</div>
-						<p
-							v-if="$slots.summary"
-							class="m-0 max-w-[44rem] empty:hidden"
-							:class="[disableLineClamp ? '' : 'line-clamp-2']"
-						>
-							<slot name="summary" />
-						</p>
-					</div>
-					<div v-if="$slots.stats" class="flex flex-wrap gap-3 empty:hidden max-md:hidden">
-						<slot name="stats" />
-					</div>
-				</div>
-			</div>
-			<div class="flex flex-wrap gap-2 items-center">
-				<slot name="actions" />
-			</div>
-		</div>
-		<div v-if="$slots.stats" class="flex justify-between md:hidden">
-			<div class="flex flex-wrap gap-3 empty:hidden">
-				<slot name="stats" />
-			</div>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-interface Props {
-	disableLineClamp?: boolean
-}
-
-const { disableLineClamp } = defineProps<Props>()
-</script>
diff --git a/packages/ui/src/components/base/JoinedButtons.vue b/packages/ui/src/components/base/JoinedButtons.vue
index 8aab2dc96d..44ffb3a424 100644
--- a/packages/ui/src/components/base/JoinedButtons.vue
+++ b/packages/ui/src/components/base/JoinedButtons.vue
@@ -33,7 +33,8 @@ import { DropdownIcon } from '@modrinth/assets'
 import type { Component } from 'vue'
 import { computed } from 'vue'
 
-import { ButtonStyled, OverflowMenu } from '../index'
+import ButtonStyled from './ButtonStyled.vue'
+import OverflowMenu from './OverflowMenu.vue'
 
 // TODO: This should be moved to a shared types file.
 type Colors = 'standard' | 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple'
diff --git a/packages/ui/src/components/base/PageHeader.vue b/packages/ui/src/components/base/PageHeader.vue
index f3bbf04c06..1f6d154ec8 100644
--- a/packages/ui/src/components/base/PageHeader.vue
+++ b/packages/ui/src/components/base/PageHeader.vue
@@ -1,11 +1,680 @@
 <template>
-	<div class="grid grid-cols-[min-content_1fr_auto] gap-4">
-		<slot name="icon" />
-		<div class="flex flex-col gap-1.5">
-			<slot name="title" />
-			<slot name="summary" />
-			<slot name="stats" />
+	<div
+		class="flex flex-col gap-2"
+		:class="[
+			props.divider ? 'border-0 border-b border-solid border-divider' : '',
+			props.bottomPadding ? 'pb-4' : '',
+			props.headerClass,
+		]"
+	>
+		<div class="flex flex-wrap items-start gap-4 max-md:flex-col" :class="props.rowClass">
+			<div class="flex min-w-0 flex-1 gap-4" :class="props.mainClass">
+				<div v-if="leadingItems.length" class="contents">
+					<template v-for="(leadingItem, index) in leadingItems" :key="leadingItem.id ?? index">
+						<div
+							v-if="leadingItem.type === 'button'"
+							:class="
+								leadingWrapperClass(
+									leadingItem,
+									'flex size-16 shrink-0 items-center justify-center',
+								)
+							"
+						>
+							<ButtonStyled
+								circular
+								:color="leadingItem.color ?? 'standard'"
+								:size="leadingItem.size ?? 'large'"
+								:type="leadingItem.buttonType ?? 'standard'"
+							>
+								<AutoLink
+									v-if="leadingItem.to"
+									v-tooltip="leadingItem.tooltip"
+									:to="leadingItem.to"
+									:aria-label="leadingLabel(leadingItem)"
+								>
+									<component
+										:is="leadingItem.icon"
+										v-if="leadingItem.icon"
+										aria-hidden="true"
+										v-bind="leadingItem.iconProps"
+									/>
+								</AutoLink>
+								<button
+									v-else
+									v-tooltip="leadingItem.tooltip"
+									type="button"
+									:aria-label="leadingLabel(leadingItem)"
+									@click="leadingItem.onClick"
+								>
+									<component
+										:is="leadingItem.icon"
+										v-if="leadingItem.icon"
+										aria-hidden="true"
+										v-bind="leadingItem.iconProps"
+									/>
+								</button>
+							</ButtonStyled>
+						</div>
+						<Avatar
+							v-else-if="leadingItem.type === 'avatar'"
+							:src="leadingItem.src"
+							:alt="leadingItem.alt ?? ''"
+							:size="leadingItem.avatarSize ?? '64px'"
+							:tint-by="leadingItem.tintBy ?? null"
+							:circle="leadingItem.circle ?? false"
+							:no-shadow="leadingItem.noShadow ?? false"
+							:raised="leadingItem.raised ?? false"
+							:loading="leadingItem.loading ?? 'eager'"
+							:class="leadingItem.class"
+						/>
+						<component
+							:is="leadingItem.component"
+							v-else-if="leadingItem.component"
+							:class="leadingItem.class"
+							v-bind="leadingItem.componentProps"
+						/>
+					</template>
+				</div>
+
+				<div class="flex min-w-0 flex-col gap-2 justify-center">
+					<div class="flex flex-col gap-1.5 justify-center">
+						<div class="flex flex-wrap items-center gap-2">
+							<h1
+								class="m-0 min-w-0 max-w-full text-2xl font-semibold leading-none text-contrast"
+								:class="[props.truncateTitle ? 'truncate' : '', props.titleClass]"
+							>
+								{{ props.header }}
+							</h1>
+							<template v-for="badge in props.badges" :key="badge.id">
+								<component
+									:is="badge.component"
+									v-if="badge.component"
+									:class="badge.class"
+									v-bind="badge.componentProps"
+								/>
+								<AutoLink
+									v-else-if="badge.to"
+									v-tooltip="badge.tooltip"
+									:to="badge.to"
+									:aria-label="badge.ariaLabel ?? badge.label"
+									:class="badgeClass(badge, true)"
+									:style="badge.style"
+								>
+									<component
+										:is="badge.icon"
+										v-if="badge.icon"
+										aria-hidden="true"
+										v-bind="badge.iconProps"
+									/>
+									<span>{{ badge.label }}</span>
+								</AutoLink>
+								<button
+									v-else-if="badge.onClick"
+									v-tooltip="badge.tooltip"
+									type="button"
+									:aria-label="badge.ariaLabel ?? badge.label"
+									:class="badgeClass(badge, true)"
+									:style="badge.style"
+									@click="badge.onClick"
+								>
+									<component
+										:is="badge.icon"
+										v-if="badge.icon"
+										aria-hidden="true"
+										v-bind="badge.iconProps"
+									/>
+									<span>{{ badge.label }}</span>
+								</button>
+								<div
+									v-else
+									v-tooltip="badge.tooltip"
+									:aria-label="badge.ariaLabel"
+									:class="badgeClass(badge)"
+									:style="badge.style"
+								>
+									<component
+										:is="badge.icon"
+										v-if="badge.icon"
+										aria-hidden="true"
+										v-bind="badge.iconProps"
+									/>
+									<span>{{ badge.label }}</span>
+								</div>
+							</template>
+						</div>
+						<p
+							v-if="props.summary || $slots.summary"
+							class="m-0 max-w-[44rem] empty:hidden"
+							:class="[props.disableLineClamp ? '' : 'line-clamp-2']"
+						>
+							<slot name="summary">{{ props.summary }}</slot>
+						</p>
+					</div>
+
+					<div v-if="props.metadata.length" class="flex flex-wrap gap-3 empty:hidden max-md:hidden">
+						<div class="flex min-w-0 flex-wrap items-center gap-2">
+							<template v-for="(item, index) in props.metadata" :key="item.id">
+								<BulletDivider v-if="index > 0" class="shrink-0" />
+								<div v-if="item.type === 'custom'" :class="item.class">
+									<slot :name="metadataSlotName(item)" :item="item" />
+								</div>
+								<AutoLink
+									v-else-if="item.to"
+									v-tooltip="item.tooltip"
+									:to="item.to"
+									:aria-label="item.ariaLabel ?? item.label ?? ''"
+									:class="metadataClass(item, true)"
+								>
+									<component
+										:is="item.icon"
+										v-if="item.icon"
+										class="flex size-5 shrink-0 text-current"
+										aria-hidden="true"
+										v-bind="item.iconProps"
+									/>
+									<span class="truncate">{{ item.label }}</span>
+								</AutoLink>
+								<button
+									v-else-if="item.onClick"
+									v-tooltip="item.tooltip"
+									type="button"
+									:aria-label="item.ariaLabel ?? item.label ?? ''"
+									:class="metadataClass(item, true)"
+									@click="item.onClick"
+								>
+									<component
+										:is="item.icon"
+										v-if="item.icon"
+										class="flex size-5 shrink-0 text-current"
+										aria-hidden="true"
+										v-bind="item.iconProps"
+									/>
+									<span class="truncate">{{ item.label }}</span>
+								</button>
+								<div
+									v-else
+									v-tooltip="item.tooltip"
+									:aria-label="item.ariaLabel"
+									:class="metadataClass(item)"
+								>
+									<component
+										:is="item.icon"
+										v-if="item.icon"
+										class="flex size-5 shrink-0 text-current"
+										aria-hidden="true"
+										v-bind="item.iconProps"
+									/>
+									<span class="truncate">{{ item.label }}</span>
+								</div>
+							</template>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div v-if="props.actions.length || $slots.actions" class="flex flex-wrap gap-2 items-center">
+				<template v-for="action in props.actions" :key="action.id">
+					<component
+						:is="action.component"
+						v-if="action.component"
+						:class="action.class"
+						v-bind="action.componentProps"
+					/>
+					<Tooltip
+						v-else-if="action.prompt"
+						theme="dismissable-prompt"
+						:triggers="[]"
+						:shown="action.prompt.shown"
+						:auto-hide="false"
+						:placement="action.prompt.placement ?? 'bottom'"
+					>
+						<JoinedButtons
+							v-if="action.joinedActions?.length"
+							:actions="action.joinedActions"
+							:color="joinedActionColor(action.color)"
+							:size="action.size ?? 'large'"
+							:disabled="action.disabled"
+							:primary-disabled="action.primaryDisabled"
+							:dropdown-disabled="action.dropdownDisabled"
+							:primary-muted="action.primaryMuted"
+						/>
+						<ButtonStyled
+							v-else
+							:color="action.color ?? 'standard'"
+							:size="action.size ?? 'large'"
+							:type="action.type ?? 'standard'"
+							:circular="action.circular ?? action.labelHidden ?? false"
+						>
+							<TeleportOverflowMenu
+								v-if="action.menuActions?.length"
+								:options="action.menuActions"
+								:tooltip="action.tooltip"
+								:aria-label="actionLabel(action)"
+								:disabled="action.disabled"
+								@open="dismissActionPrompt(action)"
+							>
+								<component
+									:is="action.icon"
+									v-if="action.icon"
+									:class="action.iconClass"
+									aria-hidden="true"
+									v-bind="action.iconProps"
+								/>
+								<span v-if="!action.labelHidden && !action.circular">{{ action.label }}</span>
+							</TeleportOverflowMenu>
+							<AutoLink
+								v-else-if="action.to"
+								v-tooltip="action.tooltip"
+								:to="action.to"
+								:aria-label="actionLabel(action)"
+								@click="(event) => handleActionClick(action, event)"
+							>
+								<component
+									:is="action.icon"
+									v-if="action.icon"
+									:class="action.iconClass"
+									aria-hidden="true"
+									v-bind="action.iconProps"
+								/>
+								<span v-if="!action.labelHidden && !action.circular">{{ action.label }}</span>
+							</AutoLink>
+							<button
+								v-else
+								v-tooltip="action.tooltip"
+								type="button"
+								:disabled="action.disabled"
+								:aria-label="actionLabel(action)"
+								@click="(event) => handleActionClick(action, event)"
+							>
+								<component
+									:is="action.icon"
+									v-if="action.icon"
+									:class="action.iconClass"
+									aria-hidden="true"
+									v-bind="action.iconProps"
+								/>
+								<span v-if="!action.labelHidden && !action.circular">{{ action.label }}</span>
+							</button>
+						</ButtonStyled>
+						<template #popper>
+							<div class="grid grid-cols-[min-content] gap-1">
+								<div class="flex min-w-48 items-center justify-between gap-8">
+									<h3
+										class="m-0 flex items-center gap-2 whitespace-nowrap text-base font-bold text-contrast"
+									>
+										{{ action.prompt.title }}
+										<span
+											v-if="action.prompt.badge"
+											class="inline-flex items-center rounded-full border border-solid border-brand-highlight bg-brand-highlight px-2 py-1 text-sm font-semibold leading-none text-brand"
+										>
+											{{ action.prompt.badge }}
+										</span>
+									</h3>
+									<ButtonStyled size="small" circular>
+										<button
+											v-tooltip="action.prompt.dismissLabel"
+											@click="action.prompt.onDismiss?.()"
+										>
+											<XIcon aria-hidden="true" />
+										</button>
+									</ButtonStyled>
+								</div>
+								<p class="m-0 text-wrap text-sm font-medium leading-tight text-secondary">
+									{{ action.prompt.description }}
+								</p>
+								<p v-if="action.prompt.footer" class="m-0 text-wrap text-sm font-bold text-primary">
+									{{ action.prompt.footer }}
+								</p>
+							</div>
+						</template>
+					</Tooltip>
+					<template v-else>
+						<JoinedButtons
+							v-if="action.joinedActions?.length"
+							:actions="action.joinedActions"
+							:color="joinedActionColor(action.color)"
+							:size="action.size ?? 'large'"
+							:disabled="action.disabled"
+							:primary-disabled="action.primaryDisabled"
+							:dropdown-disabled="action.dropdownDisabled"
+							:primary-muted="action.primaryMuted"
+						/>
+						<ButtonStyled
+							v-else
+							:color="action.color ?? 'standard'"
+							:size="action.size ?? 'large'"
+							:type="action.type ?? 'standard'"
+							:circular="action.circular ?? action.labelHidden ?? false"
+						>
+							<TeleportOverflowMenu
+								v-if="action.menuActions?.length"
+								:options="action.menuActions"
+								:tooltip="action.tooltip"
+								:aria-label="actionLabel(action)"
+								:disabled="action.disabled"
+							>
+								<component
+									:is="action.icon"
+									v-if="action.icon"
+									:class="action.iconClass"
+									aria-hidden="true"
+									v-bind="action.iconProps"
+								/>
+								<span v-if="!action.labelHidden && !action.circular">{{ action.label }}</span>
+							</TeleportOverflowMenu>
+							<AutoLink
+								v-else-if="action.to"
+								v-tooltip="action.tooltip"
+								:to="action.to"
+								:aria-label="actionLabel(action)"
+								@click="(event) => handleActionClick(action, event)"
+							>
+								<component
+									:is="action.icon"
+									v-if="action.icon"
+									:class="action.iconClass"
+									aria-hidden="true"
+									v-bind="action.iconProps"
+								/>
+								<span v-if="!action.labelHidden && !action.circular">{{ action.label }}</span>
+							</AutoLink>
+							<button
+								v-else
+								v-tooltip="action.tooltip"
+								type="button"
+								:disabled="action.disabled"
+								:aria-label="actionLabel(action)"
+								@click="(event) => handleActionClick(action, event)"
+							>
+								<component
+									:is="action.icon"
+									v-if="action.icon"
+									:class="action.iconClass"
+									aria-hidden="true"
+									v-bind="action.iconProps"
+								/>
+								<span v-if="!action.labelHidden && !action.circular">{{ action.label }}</span>
+							</button>
+						</ButtonStyled>
+					</template>
+				</template>
+				<slot name="actions" />
+			</div>
+		</div>
+
+		<div v-if="props.metadata.length" class="flex justify-between md:hidden">
+			<div class="flex flex-wrap gap-3 empty:hidden">
+				<div class="flex min-w-0 flex-wrap items-center gap-2">
+					<template v-for="(item, index) in props.metadata" :key="item.id">
+						<BulletDivider v-if="index > 0" class="shrink-0" />
+						<div v-if="item.type === 'custom'" :class="item.class">
+							<slot :name="metadataSlotName(item)" :item="item" />
+						</div>
+						<AutoLink
+							v-else-if="item.to"
+							v-tooltip="item.tooltip"
+							:to="item.to"
+							:aria-label="item.ariaLabel ?? item.label ?? ''"
+							:class="metadataClass(item, true)"
+						>
+							<component
+								:is="item.icon"
+								v-if="item.icon"
+								class="flex size-5 shrink-0 text-current"
+								aria-hidden="true"
+								v-bind="item.iconProps"
+							/>
+							<span class="truncate">{{ item.label }}</span>
+						</AutoLink>
+						<button
+							v-else-if="item.onClick"
+							v-tooltip="item.tooltip"
+							type="button"
+							:aria-label="item.ariaLabel ?? item.label ?? ''"
+							:class="metadataClass(item, true)"
+							@click="item.onClick"
+						>
+							<component
+								:is="item.icon"
+								v-if="item.icon"
+								class="flex size-5 shrink-0 text-current"
+								aria-hidden="true"
+								v-bind="item.iconProps"
+							/>
+							<span class="truncate">{{ item.label }}</span>
+						</button>
+						<div
+							v-else
+							v-tooltip="item.tooltip"
+							:aria-label="item.ariaLabel"
+							:class="metadataClass(item)"
+						>
+							<component
+								:is="item.icon"
+								v-if="item.icon"
+								class="flex size-5 shrink-0 text-current"
+								aria-hidden="true"
+								v-bind="item.iconProps"
+							/>
+							<span class="truncate">{{ item.label }}</span>
+						</div>
+					</template>
+				</div>
+			</div>
 		</div>
-		<slot name="actions" />
 	</div>
 </template>
+
+<script setup lang="ts">
+import { XIcon } from '@modrinth/assets'
+import { Tooltip } from 'floating-vue'
+import type { Component } from 'vue'
+import { computed } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+
+import AutoLink from './AutoLink.vue'
+import Avatar from './Avatar.vue'
+import BulletDivider from './BulletDivider.vue'
+import ButtonStyled from './ButtonStyled.vue'
+import JoinedButtons, { type JoinedButtonAction } from './JoinedButtons.vue'
+import TeleportOverflowMenu, {
+	type Item as TeleportOverflowMenuItem,
+} from './TeleportOverflowMenu.vue'
+
+type PageHeaderTarget = string | RouteLocationRaw
+type ButtonColor =
+	| 'standard'
+	| 'brand'
+	| 'red'
+	| 'orange'
+	| 'green'
+	| 'blue'
+	| 'purple'
+	| 'medal-promo'
+type ButtonSize = 'standard' | 'large' | 'small'
+type ButtonType =
+	| 'standard'
+	| 'outlined'
+	| 'transparent'
+	| 'highlight'
+	| 'highlight-colored-text'
+	| 'chip'
+
+type PageHeaderLeading = {
+	id?: string
+	type: 'avatar' | 'button' | 'component'
+	icon?: Component
+	iconProps?: Record<string, unknown>
+	component?: Component
+	componentProps?: Record<string, unknown>
+	src?: string | null
+	alt?: string
+	tintBy?: string | null
+	avatarSize?: string
+	circle?: boolean
+	noShadow?: boolean
+	raised?: boolean
+	loading?: 'eager' | 'lazy'
+	class?: string
+	wrapperClass?: string
+	to?: PageHeaderTarget
+	onClick?: (event?: MouseEvent) => void | Promise<void>
+	tooltip?: string
+	ariaLabel?: string
+	color?: ButtonColor
+	size?: ButtonSize
+	buttonType?: ButtonType
+}
+
+type PageHeaderBadge = {
+	id: string
+	label?: string
+	icon?: Component
+	iconProps?: Record<string, unknown>
+	component?: Component
+	componentProps?: Record<string, unknown>
+	tooltip?: string
+	ariaLabel?: string
+	to?: PageHeaderTarget
+	onClick?: (event?: MouseEvent) => void | Promise<void>
+	class?: string
+	style?: Record<string, string>
+}
+
+type PageHeaderMetadataItem = {
+	id: string
+	type?: 'text' | 'custom'
+	label?: string
+	icon?: Component
+	iconProps?: Record<string, unknown>
+	tooltip?: string
+	ariaLabel?: string
+	to?: PageHeaderTarget
+	onClick?: (event?: MouseEvent) => void | Promise<void>
+	class?: string
+}
+
+type PageHeaderActionPrompt = {
+	title: string
+	description: string
+	badge?: string
+	footer?: string
+	dismissLabel?: string
+	shown?: boolean
+	placement?: string
+	onDismiss?: () => void
+}
+
+type PageHeaderAction = {
+	id: string
+	label: string
+	component?: Component
+	componentProps?: Record<string, unknown>
+	class?: string
+	icon?: Component
+	iconProps?: Record<string, unknown>
+	iconClass?: string
+	tooltip?: string
+	ariaLabel?: string
+	to?: PageHeaderTarget
+	onClick?: (event?: MouseEvent) => void | Promise<void>
+	disabled?: boolean
+	labelHidden?: boolean
+	circular?: boolean
+	color?: ButtonColor
+	size?: ButtonSize
+	type?: ButtonType
+	joinedActions?: JoinedButtonAction[]
+	menuActions?: TeleportOverflowMenuItem[]
+	primaryDisabled?: boolean
+	dropdownDisabled?: boolean
+	primaryMuted?: boolean
+	prompt?: PageHeaderActionPrompt
+}
+
+const props = withDefaults(
+	defineProps<{
+		header: string
+		summary?: string | null
+		leading?: PageHeaderLeading | PageHeaderLeading[] | null
+		badges?: PageHeaderBadge[]
+		metadata?: PageHeaderMetadataItem[]
+		actions?: PageHeaderAction[]
+		headerClass?: string
+		rowClass?: string
+		mainClass?: string
+		titleClass?: string
+		truncateTitle?: boolean
+		divider?: boolean
+		bottomPadding?: boolean
+		disableLineClamp?: boolean
+	}>(),
+	{
+		summary: null,
+		leading: null,
+		badges: () => [],
+		metadata: () => [],
+		actions: () => [],
+		headerClass: '',
+		rowClass: '',
+		mainClass: '',
+		titleClass: '',
+		truncateTitle: false,
+		divider: true,
+		bottomPadding: true,
+		disableLineClamp: false,
+	},
+)
+
+const leadingItems = computed(() => {
+	if (!props.leading) return []
+	return Array.isArray(props.leading) ? props.leading : [props.leading]
+})
+
+function leadingLabel(item: PageHeaderLeading) {
+	return item.ariaLabel ?? item.tooltip ?? 'Header action'
+}
+
+function leadingWrapperClass(item: PageHeaderLeading, defaultClass: string) {
+	return [item.wrapperClass ?? defaultClass]
+}
+
+function metadataClass(item: PageHeaderMetadataItem, interactive = false) {
+	return [
+		'flex min-w-0 items-center gap-2 font-medium text-secondary text-nowrap',
+		interactive ? 'm-0 cursor-pointer border-0 bg-transparent p-0 hover:underline' : '',
+		item.class,
+	]
+}
+
+function metadataSlotName(item: PageHeaderMetadataItem) {
+	return `metadata-${item.id}`
+}
+
+function badgeClass(badge: PageHeaderBadge, interactive = false) {
+	return [
+		'inline-flex items-center gap-1 rounded-full border border-solid border-surface-5 bg-button-bg px-2 py-1 text-sm font-semibold leading-none text-secondary text-nowrap [&>svg]:size-4 [&>svg]:shrink-0',
+		interactive ? 'm-0 cursor-pointer hover:underline' : '',
+		badge.class,
+	]
+}
+
+function actionLabel(action: PageHeaderAction) {
+	return action.ariaLabel ?? action.tooltip ?? action.label
+}
+
+function dismissActionPrompt(action: PageHeaderAction) {
+	if (action.prompt?.shown) {
+		action.prompt.onDismiss?.()
+	}
+}
+
+function handleActionClick(action: PageHeaderAction, event?: MouseEvent) {
+	dismissActionPrompt(action)
+	void action.onClick?.(event)
+}
+
+function joinedActionColor(color?: ButtonColor) {
+	return color === 'medal-promo' ? 'standard' : color
+}
+</script>
diff --git a/packages/ui/src/components/base/TeleportOverflowMenu.vue b/packages/ui/src/components/base/TeleportOverflowMenu.vue
index 20d5b354d3..407421461e 100644
--- a/packages/ui/src/components/base/TeleportOverflowMenu.vue
+++ b/packages/ui/src/components/base/TeleportOverflowMenu.vue
@@ -2,10 +2,13 @@
 	<div data-pyro-telepopover-wrapper class="relative">
 		<button
 			ref="triggerRef"
+			v-tooltip="tooltip"
 			class="teleport-overflow-menu-trigger"
 			:class="btnClass"
 			:aria-expanded="isOpen"
 			:aria-haspopup="true"
+			:aria-label="ariaLabel"
+			:disabled="disabled"
 			@mousedown="handleMouseDown"
 			@mouseenter="handleMouseEnter"
 			@mouseleave="handleMouseLeave"
@@ -38,9 +41,14 @@
 						:key="isDivider(option) ? `divider-${index}` : option.id"
 					>
 						<div v-if="isDivider(option)" class="h-px w-full bg-surface-5"></div>
-						<ButtonStyled v-else type="transparent" role="menuitem" :color="option.color">
+						<ButtonStyled
+							v-else
+							type="transparent"
+							role="menuitem"
+							:color="optionButtonColor(option)"
+						>
 							<button
-								v-if="typeof option.action === 'function'"
+								v-if="typeof option.action === 'function' || option.disabled"
 								:ref="
 									(el) => {
 										if (el) menuItemsRef[index] = el as HTMLElement
@@ -49,41 +57,45 @@
 								v-tooltip="option.tooltip"
 								:disabled="option.disabled"
 								class="w-full !justify-start !whitespace-nowrap focus-visible:!outline-none"
+								:aria-label="option.ariaLabel ?? option.label ?? option.id"
 								:aria-selected="index === selectedIndex"
 								:style="index === selectedIndex ? { background: 'var(--color-button-bg)' } : {}"
-								@click="handleItemClick(option, index)"
+								@click="(event) => handleItemClick(option, index, event)"
 								@focus="selectedIndex = index"
 								@mouseover="handleMouseOver(index)"
 							>
 								<slot :name="option.id">
 									<component :is="option.icon" v-if="option.icon" class="size-5" />
-									{{ option.id }}
+									{{ option.label ?? option.id }}
 								</slot>
 							</button>
 							<AutoLink
-								v-else-if="typeof option.action === 'string'"
+								v-else-if="optionLink(option)"
 								:ref="
 									(el) => {
 										if (el) menuItemsRef[index] = el as HTMLElement
 									}
 								"
-								:to="option.action"
+								:to="optionLink(option)"
+								:target="option.external ? '_blank' : undefined"
+								:rel="option.external ? 'noopener noreferrer' : undefined"
 								class="w-full !justify-start !whitespace-nowrap focus-visible:!outline-none"
+								:aria-label="option.ariaLabel ?? option.label ?? option.id"
 								:aria-selected="index === selectedIndex"
 								:style="index === selectedIndex ? { background: 'var(--color-button-bg)' } : {}"
-								@click="handleItemClick(option, index)"
+								@click="(event) => handleItemClick(option, index, event)"
 								@focus="selectedIndex = index"
 								@mouseover="handleMouseOver(index)"
 							>
 								<slot :name="option.id">
 									<component :is="option.icon" v-if="option.icon" class="size-5" />
-									{{ option.id }}
+									{{ option.label ?? option.id }}
 								</slot>
 							</AutoLink>
 							<span v-else>
 								<slot :name="option.id">
 									<component :is="option.icon" v-if="option.icon" class="size-5" />
-									{{ option.id }}
+									{{ option.label ?? option.id }}
 								</slot>
 							</span>
 						</ButtonStyled>
@@ -95,29 +107,49 @@
 </template>
 
 <script setup lang="ts">
-import { AutoLink, ButtonStyled } from '@modrinth/ui'
 import { onClickOutside, useElementHover } from '@vueuse/core'
 import { type Component, computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 
-interface Option {
+import AutoLink from './AutoLink.vue'
+import ButtonStyled from './ButtonStyled.vue'
+
+type OptionColor =
+	| 'standard'
+	| 'brand'
+	| 'primary'
+	| 'danger'
+	| 'secondary'
+	| 'highlight'
+	| 'red'
+	| 'orange'
+	| 'green'
+	| 'blue'
+	| 'purple'
+
+export interface Option {
 	id: string
+	label?: string
 	icon?: Component
-	action?: (() => void) | string
+	action?: ((event?: MouseEvent) => void) | string
+	link?: string
+	external?: boolean
 	shown?: boolean
-	color?: 'standard' | 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple'
+	color?: OptionColor
 	disabled?: boolean
 	tooltip?: string
+	ariaLabel?: string
+	remainOnClick?: boolean
 }
 
-type Divider = {
+export type Divider = {
 	divider?: boolean
 	shown?: boolean
 }
 
-type Item = Option | Divider
+export type Item = Option | Divider
 
 function isDivider(item: Item): item is Divider {
-	return (item as Divider).divider
+	return !!(item as Divider).divider
 }
 
 const props = withDefaults(
@@ -125,10 +157,16 @@ const props = withDefaults(
 		options: Item[]
 		hoverable?: boolean
 		btnClass?: string | string[] | Record<string, boolean>
+		disabled?: boolean
+		tooltip?: string
+		ariaLabel?: string
 	}>(),
 	{
 		hoverable: false,
 		btnClass: undefined,
+		disabled: false,
+		tooltip: undefined,
+		ariaLabel: undefined,
 	},
 )
 
@@ -191,6 +229,7 @@ const calculateMenuPosition = () => {
 
 const toggleMenu = (event: MouseEvent) => {
 	event.stopPropagation()
+	if (props.disabled) return
 	if (!props.hoverable) {
 		if (isOpen.value) {
 			closeMenu()
@@ -201,6 +240,7 @@ const toggleMenu = (event: MouseEvent) => {
 }
 
 const openMenu = () => {
+	if (props.disabled) return
 	isOpen.value = true
 	emit('open')
 	disableBodyScroll()
@@ -218,15 +258,18 @@ const closeMenu = () => {
 	document.removeEventListener('mousemove', handleMouseMove)
 }
 
-const selectOption = (option: Option) => {
+const selectOption = (option: Option, event?: MouseEvent) => {
 	emit('select', option)
 	if (typeof option.action === 'function') {
-		option.action()
+		option.action(event)
+	}
+	if (!option.remainOnClick) {
+		closeMenu()
 	}
-	closeMenu()
 }
 
 const handleMouseDown = (event: MouseEvent) => {
+	if (props.disabled) return
 	event.preventDefault()
 	isMouseDown.value = true
 }
@@ -270,10 +313,10 @@ const handleMouseMove = (event: MouseEvent) => {
 	}
 }
 
-const handleItemClick = (option: Option, index: number) => {
+const handleItemClick = (option: Option, index: number, event?: MouseEvent) => {
 	if (option.disabled) return
 	selectedIndex.value = index
-	selectOption(option)
+	selectOption(option, event)
 }
 
 const handleMouseOver = (index: number) => {
@@ -432,4 +475,23 @@ onClickOutside(menuRef, (event) => {
 		closeMenu()
 	}
 })
+
+function optionLink(option: Option) {
+	if (typeof option.action === 'string') return option.action
+	return option.link
+}
+
+function optionButtonColor(option: Option) {
+	switch (option.color) {
+		case 'primary':
+			return 'brand'
+		case 'danger':
+			return 'red'
+		case 'secondary':
+		case 'highlight':
+			return 'standard'
+		default:
+			return option.color ?? 'standard'
+	}
+}
 </script>
diff --git a/packages/ui/src/components/base/index.ts b/packages/ui/src/components/base/index.ts
index 7fa6262111..052c257df9 100644
--- a/packages/ui/src/components/base/index.ts
+++ b/packages/ui/src/components/base/index.ts
@@ -19,7 +19,6 @@ export { default as CollapsibleAdmonition } from './CollapsibleAdmonition.vue'
 export { default as CollapsibleRegion } from './CollapsibleRegion.vue'
 export type { ComboboxOption } from './Combobox.vue'
 export { default as Combobox } from './Combobox.vue'
-export { default as ContentPageHeader } from './ContentPageHeader.vue'
 export { default as CopyCode } from './CopyCode.vue'
 export { default as DatePicker } from './DatePicker.vue'
 export { default as DoubleIcon } from './DoubleIcon.vue'
@@ -32,8 +31,6 @@ export { default as EmptyState } from './EmptyState.vue'
 export { default as EnvironmentIndicator } from './EnvironmentIndicator.vue'
 export { default as ErrorInformationCard } from './ErrorInformationCard.vue'
 export { default as FileInput } from './FileInput.vue'
-export type { FileTreeSelectItem } from './FileTreeSelect.vue'
-export { default as FileTreeSelect } from './FileTreeSelect.vue'
 export type { FilterBarOption } from './FilterBar.vue'
 export { default as FilterBar } from './FilterBar.vue'
 export type { FilterPillOption } from './FilterPills.vue'
@@ -65,6 +62,7 @@ export { default as OptionGroup } from './OptionGroup.vue'
 export type { Option as OverflowMenuOption } from './OverflowMenu.vue'
 export { default as OverflowMenu } from './OverflowMenu.vue'
 export { default as Page } from './Page.vue'
+export { default as PageHeader } from './PageHeader.vue'
 export { default as Pagination } from './Pagination.vue'
 export { default as PopoutMenu } from './PopoutMenu.vue'
 export { default as PreviewSelectButton } from './PreviewSelectButton.vue'
@@ -89,6 +87,11 @@ export type { TabsTab, TabsValue } from './Tabs.vue'
 export { default as Tabs } from './Tabs.vue'
 export { default as TagItem } from './TagItem.vue'
 export { default as TagTagItem } from './TagTagItem.vue'
+export type {
+	Item as TeleportOverflowMenuItem,
+	Option as TeleportOverflowMenuOption,
+} from './TeleportOverflowMenu.vue'
+export { default as TeleportOverflowMenu } from './TeleportOverflowMenu.vue'
 export type {
 	TimeFrameLastUnit,
 	TimeFrameLastUnitOption,
diff --git a/packages/ui/src/components/project/ProjectHeader.vue b/packages/ui/src/components/project/ProjectHeader.vue
index 0f5235cf2f..7a76a26dbc 100644
--- a/packages/ui/src/components/project/ProjectHeader.vue
+++ b/packages/ui/src/components/project/ProjectHeader.vue
@@ -1,18 +1,14 @@
 <template>
-	<ContentPageHeader>
-		<template #icon>
-			<Avatar :src="project.icon_url" :alt="project.title" size="96px" />
-		</template>
-		<template #title>
-			{{ project.title }}
-		</template>
-		<template #title-suffix>
-			<ProjectStatusBadge v-if="member || project.status !== 'approved'" :status="project.status" />
-		</template>
-		<template #summary>
-			{{ project.description }}
-		</template>
-		<template #stats>
+	<PageHeader
+		:header="project.title"
+		:summary="project.description"
+		:leading="leadingItem"
+		:badges="headerBadges"
+		:metadata="headerMetadata"
+		:actions="actions"
+		:disable-line-clamp="disableLineClamp"
+	>
+		<template #metadata-project-stats>
 			<div class="flex items-center gap-3 flex-wrap gap-y-0">
 				<template v-if="isServerProject">
 					<ServerDetails
@@ -66,24 +62,24 @@
 				</div>
 			</div>
 		</template>
-		<template #actions>
-			<slot name="actions" />
-		</template>
-	</ContentPageHeader>
+	</PageHeader>
 </template>
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import { DownloadIcon, HeartIcon } from '@modrinth/assets'
 import { capitalizeString, type Project } from '@modrinth/utils'
+import type { Component } from 'vue'
 import { computed } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
 import { useRouter } from 'vue-router'
 
 import { useCompactNumber, useVIntl } from '../../composables'
 import { commonMessages } from '../../utils'
-import Avatar from '../base/Avatar.vue'
-import ContentPageHeader from '../base/ContentPageHeader.vue'
 import FormattedTag from '../base/FormattedTag.vue'
+import type { JoinedButtonAction } from '../base/JoinedButtons.vue'
+import PageHeader from '../base/PageHeader.vue'
 import TagItem from '../base/TagItem.vue'
+import type { Item as TeleportOverflowMenuItem } from '../base/TeleportOverflowMenu.vue'
 import ProjectStatusBadge from './ProjectStatusBadge.vue'
 import ServerDetails from './server/ServerDetails.vue'
 
@@ -91,18 +87,87 @@ const router = useRouter()
 const { formatMessage } = useVIntl()
 const { formatCompactNumber } = useCompactNumber()
 
+type HeaderAction = {
+	id: string
+	label: string
+	component?: Component
+	componentProps?: Record<string, unknown>
+	class?: string
+	icon?: Component
+	iconProps?: Record<string, unknown>
+	iconClass?: string
+	tooltip?: string
+	ariaLabel?: string
+	to?: string | RouteLocationRaw
+	onClick?: (event?: MouseEvent) => void | Promise<void>
+	disabled?: boolean
+	labelHidden?: boolean
+	circular?: boolean
+	color?: 'standard' | 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple' | 'medal-promo'
+	size?: 'standard' | 'large' | 'small'
+	type?: 'standard' | 'outlined' | 'transparent' | 'highlight' | 'highlight-colored-text' | 'chip'
+	joinedActions?: JoinedButtonAction[]
+	menuActions?: TeleportOverflowMenuItem[]
+	primaryDisabled?: boolean
+	dropdownDisabled?: boolean
+	primaryMuted?: boolean
+	prompt?: {
+		title: string
+		description: string
+		badge?: string
+		footer?: string
+		dismissLabel?: string
+		shown?: boolean
+		placement?: string
+		onDismiss?: () => void
+	}
+}
+
 const props = withDefaults(
 	defineProps<{
 		project: Project
 		member?: boolean
 		projectV3?: Labrinth.Projects.v3.Project | null
 		ping?: number
+		actions?: HeaderAction[]
+		disableLineClamp?: boolean
 	}>(),
 	{
 		member: false,
+		actions: () => [],
+		disableLineClamp: false,
 	},
 )
 
+const leadingItem = computed(() => ({
+	type: 'avatar' as const,
+	src: props.project.icon_url,
+	alt: props.project.title,
+	avatarSize: '96px',
+}))
+
+const headerBadges = computed(() =>
+	props.member || props.project.status !== 'approved'
+		? [
+				{
+					id: 'status',
+					component: ProjectStatusBadge,
+					componentProps: {
+						status: props.project.status,
+					},
+				},
+			]
+		: [],
+)
+
+const headerMetadata = [
+	{
+		id: 'project-stats',
+		type: 'custom' as const,
+		class: 'contents',
+	},
+]
+
 const searchUrl = computed(
 	() => `/discover/${isServerProject.value ? 'servers' : `${props.project.project_type}s`}`,
 )
diff --git a/packages/ui/src/components/servers/server-header/ServerManageHeader.vue b/packages/ui/src/components/servers/server-header/ServerManageHeader.vue
index 88e6adeb07..ec6391932b 100644
--- a/packages/ui/src/components/servers/server-header/ServerManageHeader.vue
+++ b/packages/ui/src/components/servers/server-header/ServerManageHeader.vue
@@ -1,16 +1,12 @@
 <template>
 	<div class="w-full flex flex-col gap-4" :class="{ 'mt-4': isNuxt }">
-		<ContentPageHeader :class="props.headerClass">
-			<template #icon>
-				<ServerIcon
-					:image="headerImage"
-					:class="isNuxt ? 'size-20 !rounded-2xl' : 'size-16 !rounded-xl'"
-				/>
-			</template>
-			<template #title>
-				{{ props.server?.name || 'Server' }}
-			</template>
-			<template #stats>
+		<PageHeader
+			:header="props.server?.name || 'Server'"
+			:leading="leadingItems"
+			:metadata="headerMetadata"
+			:header-class="props.headerClass"
+		>
+			<template #metadata-server-stats>
 				<div
 					v-if="props.server?.flows?.intro"
 					class="flex items-center gap-2 font-semibold text-secondary"
@@ -74,7 +70,7 @@
 			<template #actions>
 				<slot name="actions" />
 			</template>
-		</ContentPageHeader>
+		</PageHeader>
 	</div>
 </template>
 
@@ -85,7 +81,7 @@ import { LinkIcon, SettingsIcon, TimerIcon } from '@modrinth/assets'
 import { useStorage } from '@vueuse/core'
 import { computed } from 'vue'
 
-import { AutoLink, Avatar, ContentPageHeader, ServerIcon } from '#ui/components'
+import { AutoLink, Avatar, PageHeader, ServerIcon } from '#ui/components'
 import {
 	injectModrinthClient,
 	injectModrinthServerContext,
@@ -142,6 +138,26 @@ const headerImage = computed(() => {
 	return props.serverImage ?? undefined
 })
 
+const leadingItems = computed(() => [
+	{
+		id: 'server-icon',
+		type: 'component' as const,
+		component: ServerIcon,
+		componentProps: {
+			image: headerImage.value,
+		},
+		class: isNuxt.value ? 'size-20 !rounded-2xl' : 'size-16 !rounded-xl',
+	},
+])
+
+const headerMetadata = [
+	{
+		id: 'server-stats',
+		type: 'custom' as const,
+		class: 'contents',
+	},
+]
+
 const showUptime = computed(() => props.showUptime && (props.uptimeSeconds ?? 0) > 0)
 
 const formattedUptime = computed(() => {
diff --git a/packages/ui/src/layouts/shared/browse-tab/header.vue b/packages/ui/src/layouts/shared/browse-tab/header.vue
index bb976c861a..839d9a2d0a 100644
--- a/packages/ui/src/layouts/shared/browse-tab/header.vue
+++ b/packages/ui/src/layouts/shared/browse-tab/header.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { LeftArrowIcon } from '@modrinth/assets'
+import { LeftArrowIcon, TagCategoryGamepad2Icon as Gamepad2Icon } from '@modrinth/assets'
+import type { Component } from 'vue'
 import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
-import Admonition from '#ui/components/base/Admonition.vue'
-import Avatar from '#ui/components/base/Avatar.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import PageHeader from '#ui/components/base/PageHeader.vue'
+import LoaderIcon from '#ui/components/servers/icons/LoaderIcon.vue'
 import { useServerImage } from '#ui/composables/use-server-image'
 import { formatLoaderLabel } from '#ui/utils/loaders'
 
@@ -18,8 +18,17 @@ const MEDAL_ICON_URL = 'https://cdn-raw.modrinth.com/medal_icon.webp'
 const router = useRouter()
 const props = defineProps<{
 	installContext?: BrowseInstallContext | null
+	divider?: boolean
+	bottomPadding?: boolean
 }>()
 type SelectedProjectsLeaveResult = 'cancel' | 'discard' | 'install'
+type BrowseHeaderMetadataItem = {
+	id: string
+	label: string
+	icon?: Component
+	iconProps?: Record<string, unknown>
+	class?: string
+}
 
 const ctx = injectBrowseManager(null)
 const installContext = computed(() => props.installContext ?? ctx?.installContext?.value ?? null)
@@ -37,14 +46,66 @@ const iconSrc = computed(() => {
 	return fetchedIcon.value ?? installContext.value?.iconSrc ?? null
 })
 
-const metadataItems = computed(() => {
+const leadingItems = computed(() => {
 	const context = installContext.value
 	if (!context) return []
+
 	return [
-		context.heading,
-		context.gameVersion ? `MC ${context.gameVersion}` : '',
-		context.loader ? formatLoaderLabel(context.loader) : '',
-	].filter(Boolean)
+		{
+			id: 'back',
+			type: 'button' as const,
+			icon: LeftArrowIcon,
+			ariaLabel: context.backLabel,
+			tooltip: context.backLabel,
+			onClick: handleBack,
+		},
+		...(iconSrc.value
+			? [
+					{
+						id: 'icon',
+						type: 'avatar' as const,
+						src: iconSrc.value,
+						alt: context.name,
+						avatarSize: '48px',
+						class: 'shrink-0',
+					},
+				]
+			: []),
+	]
+})
+
+const metadataItems = computed(() => {
+	const context = installContext.value
+	if (!context) return []
+
+	const items: BrowseHeaderMetadataItem[] = []
+	if (context.heading) {
+		items.push({
+			id: 'heading',
+			label: context.heading,
+			class: '!text-primary',
+		})
+	}
+	if (context.gameVersion) {
+		items.push({
+			id: 'game-version',
+			label: context.gameVersion,
+			icon: Gamepad2Icon,
+			class: '!text-primary',
+		})
+	}
+	if (context.loader) {
+		const loaderName = formatLoaderLabel(context.loader)
+		const loaderLabel = [loaderName, context.loaderVersion].filter(Boolean).join(' ')
+		items.push({
+			id: 'loader',
+			label: loaderLabel,
+			icon: LoaderIcon,
+			iconProps: { loader: loaderName },
+			class: '!text-primary',
+		})
+	}
+	return items
 })
 
 const selectedCount = computed(() => installContext.value?.selectedProjects?.length ?? 0)
@@ -99,39 +160,15 @@ async function handleSelectedProjectsLeaveResult(
 			:count="selectedCount"
 			:installing="isInstallingSelected"
 		/>
-		<div class="flex flex-col gap-2">
-			<div class="flex flex-wrap items-center justify-between gap-4">
-				<div class="flex min-w-0 items-center gap-4">
-					<ButtonStyled circular size="large">
-						<button :aria-label="installContext.backLabel" @click="handleBack">
-							<LeftArrowIcon />
-						</button>
-					</ButtonStyled>
-
-					<Avatar v-if="iconSrc" :src="iconSrc" size="48px" class="shrink-0" />
-
-					<div class="flex min-w-0 flex-col justify-center gap-1">
-						<h1 class="m-0 truncate text-2xl font-semibold leading-8 text-contrast">
-							{{ installContext.name }}
-						</h1>
-						<div
-							v-if="metadataItems.length"
-							class="flex flex-wrap items-center gap-2 text-base font-medium leading-6 text-primary"
-						>
-							<template v-for="(item, index) in metadataItems" :key="item">
-								<span
-									v-if="index > 0"
-									class="h-1.5 w-1.5 shrink-0 rounded-full bg-current opacity-60"
-								/>
-								<span>{{ item }}</span>
-							</template>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<Admonition v-if="installContext.warning" type="warning" class="mb-1">
-			{{ installContext.warning }}
-		</Admonition>
+		<PageHeader
+			:header="installContext.name"
+			:leading="leadingItems"
+			:metadata="metadataItems"
+			:divider="props.divider ?? false"
+			:bottom-padding="props.bottomPadding ?? false"
+			main-class="items-center"
+			title-class="leading-8"
+			truncate-title
+		/>
 	</template>
 </template>
diff --git a/packages/ui/src/stories/base/ContentPageHeader.stories.ts b/packages/ui/src/stories/base/ContentPageHeader.stories.ts
deleted file mode 100644
index 0eb2f5c523..0000000000
--- a/packages/ui/src/stories/base/ContentPageHeader.stories.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-
-import Avatar from '../../components/base/Avatar.vue'
-import ButtonStyled from '../../components/base/ButtonStyled.vue'
-import ContentPageHeader from '../../components/base/ContentPageHeader.vue'
-
-const meta = {
-	title: 'Base/ContentPageHeader',
-	component: ContentPageHeader,
-} satisfies Meta<typeof ContentPageHeader>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-	render: () => ({
-		components: { ContentPageHeader, Avatar, ButtonStyled },
-		template: `
-			<ContentPageHeader>
-				<template #icon>
-					<Avatar size="64px" />
-				</template>
-				<template #title>Project Name</template>
-				<template #summary>A brief description of the project goes here.</template>
-				<template #stats>
-					<span>1.2M downloads</span>
-					<span>50K followers</span>
-				</template>
-				<template #actions>
-					<ButtonStyled color="brand">
-						<button>Follow</button>
-					</ButtonStyled>
-				</template>
-			</ContentPageHeader>
-		`,
-	}),
-}
-
-export const WithTitleSuffix: Story = {
-	render: () => ({
-		components: { ContentPageHeader, Avatar, ButtonStyled },
-		template: `
-			<ContentPageHeader>
-				<template #icon>
-					<Avatar size="64px" />
-				</template>
-				<template #title>Featured Project</template>
-				<template #title-suffix>
-					<span class="px-2 py-1 bg-brand-highlight text-brand rounded-full text-sm">Featured</span>
-				</template>
-				<template #summary>This project has been featured by the Modrinth team.</template>
-				<template #actions>
-					<ButtonStyled color="brand">
-						<button>Download</button>
-					</ButtonStyled>
-					<ButtonStyled type="transparent">
-						<button>Share</button>
-					</ButtonStyled>
-				</template>
-			</ContentPageHeader>
-		`,
-	}),
-}
diff --git a/packages/ui/src/stories/base/PageHeader.stories.ts b/packages/ui/src/stories/base/PageHeader.stories.ts
new file mode 100644
index 0000000000..2fd13c3ca5
--- /dev/null
+++ b/packages/ui/src/stories/base/PageHeader.stories.ts
@@ -0,0 +1,353 @@
+import {
+	AffiliateIcon,
+	ClipboardCopyIcon,
+	DownloadIcon,
+	GlobeIcon,
+	HeartIcon,
+	LeftArrowIcon,
+	LinkIcon,
+	MoreVerticalIcon,
+	PlayIcon,
+	SettingsIcon,
+	SlashIcon,
+	StopCircleIcon,
+	TagCategoryGamepad2Icon as Gamepad2Icon,
+	TimerIcon,
+} from '@modrinth/assets'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import PageHeader from '../../components/base/PageHeader.vue'
+import LoaderIcon from '../../components/servers/icons/LoaderIcon.vue'
+import ServerIcon from '../../components/servers/icons/ServerIcon.vue'
+
+const noop = () => undefined
+
+const meta = {
+	title: 'Base/PageHeader',
+	component: PageHeader,
+	parameters: {
+		layout: 'padded',
+	},
+	decorators: [
+		(story) => ({
+			components: { story },
+			template: '<div class="w-full"><story /></div>',
+		}),
+	],
+} satisfies Meta<typeof PageHeader>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const AppInstanceHeader: Story = {
+	args: {
+		header: 'Create: Astral',
+		leading: {
+			type: 'avatar',
+			src: null,
+			alt: 'Create: Astral',
+			tintBy: '/Users/calum/Library/Application Support/com.modrinth.theseus/profiles/astral',
+		},
+		metadata: [
+			{
+				id: 'game-version',
+				label: '1.20.1',
+				icon: Gamepad2Icon,
+				tooltip: 'Minecraft version',
+			},
+			{
+				id: 'loader',
+				label: 'Fabric 0.16.14',
+				icon: LoaderIcon,
+				iconProps: { loader: 'Fabric' },
+				tooltip: 'Mod loader',
+			},
+			{
+				id: 'playtime',
+				label: '12 hours',
+				icon: TimerIcon,
+				tooltip: 'Total playtime',
+			},
+		],
+		actions: [
+			{
+				id: 'play',
+				label: 'Play',
+				icon: PlayIcon,
+				color: 'brand',
+				onClick: noop,
+			},
+			{
+				id: 'settings',
+				label: 'Instance settings',
+				icon: SettingsIcon,
+				labelHidden: true,
+				tooltip: 'Instance settings',
+				onClick: noop,
+			},
+			{
+				id: 'more',
+				label: 'More actions',
+				icon: MoreVerticalIcon,
+				labelHidden: true,
+				type: 'transparent',
+				tooltip: 'More actions',
+				menuActions: [
+					{
+						id: 'open-folder',
+						label: 'Open folder',
+						icon: GlobeIcon,
+						action: noop,
+					},
+					{
+						id: 'copy-id',
+						label: 'Copy ID',
+						icon: ClipboardCopyIcon,
+						action: noop,
+					},
+				],
+			},
+		],
+	},
+}
+
+export const CreatorHeader: Story = {
+	args: {
+		header: 'Prospector',
+		summary: 'A Modrinth creator with a handful of popular projects.',
+		leading: {
+			type: 'avatar',
+			src: null,
+			alt: 'Prospector',
+			avatarSize: '96px',
+			circle: true,
+		},
+		badges: [
+			{
+				id: 'affiliate',
+				label: 'Affiliate',
+				icon: AffiliateIcon,
+				class: 'border-brand-highlight bg-brand-highlight text-brand',
+			},
+		],
+		metadata: [
+			{
+				id: 'projects',
+				label: '12 projects',
+				icon: Gamepad2Icon,
+			},
+			{
+				id: 'downloads',
+				label: '4.2M downloads',
+				icon: DownloadIcon,
+			},
+			{
+				id: 'followers',
+				label: '82K followers',
+				icon: HeartIcon,
+			},
+		],
+		actions: [
+			{
+				id: 'follow',
+				label: 'Follow',
+				icon: HeartIcon,
+				color: 'brand',
+				onClick: noop,
+			},
+		],
+	},
+}
+
+export const BrowseHeader: Story = {
+	args: {
+		header: 'Survival SMP',
+		leading: [
+			{
+				id: 'back',
+				type: 'button',
+				icon: LeftArrowIcon,
+				to: '/instance/my-world',
+				ariaLabel: 'Back to instance',
+				tooltip: 'Back to instance',
+				wrapperClass: 'flex size-12 shrink-0 items-center justify-center',
+			},
+			{
+				id: 'target',
+				type: 'avatar',
+				src: null,
+				alt: 'Survival SMP',
+				avatarSize: '48px',
+				tintBy: 'survival-smp',
+			},
+		],
+		metadata: [
+			{
+				id: 'heading',
+				label: 'Installing content',
+				class: '!text-primary',
+			},
+			{
+				id: 'game-version',
+				label: '1.20.1',
+				icon: Gamepad2Icon,
+				tooltip: 'Minecraft version',
+				class: '!text-primary',
+			},
+			{
+				id: 'loader',
+				label: 'Fabric',
+				icon: LoaderIcon,
+				iconProps: { loader: 'Fabric' },
+				tooltip: 'Mod loader',
+				class: '!text-primary',
+			},
+		],
+		divider: false,
+		bottomPadding: false,
+		mainClass: 'items-center',
+		titleClass: 'leading-8',
+		truncateTitle: true,
+	},
+}
+
+export const ServerPanelRootHeader: Story = {
+	args: {
+		header: 'Survival SMP',
+		leading: {
+			type: 'component',
+			component: ServerIcon,
+			componentProps: { image: undefined },
+			class: 'size-15 !rounded-xl',
+		},
+		metadata: [
+			{
+				id: 'active-world',
+				label: 'My World',
+				icon: GlobeIcon,
+				tooltip: 'Active instance',
+			},
+			{
+				id: 'address',
+				label: 'play.modrinth.gg',
+				icon: LinkIcon,
+				tooltip: 'Copy server address',
+				onClick: noop,
+			},
+		],
+		actions: [
+			{
+				id: 'start',
+				label: 'Start server',
+				icon: PlayIcon,
+				color: 'brand',
+				onClick: noop,
+			},
+			{
+				id: 'settings',
+				label: 'Server settings',
+				icon: SettingsIcon,
+				labelHidden: true,
+				tooltip: 'Server settings',
+				onClick: noop,
+			},
+		],
+	},
+}
+
+export const ServerPanelInstanceHeader: Story = {
+	args: {
+		header: 'My World',
+		leading: {
+			type: 'button',
+			icon: LeftArrowIcon,
+			to: '/hosting/manage/demo-server/instances',
+			ariaLabel: 'All instances',
+			tooltip: 'All instances',
+		},
+		metadata: [
+			{
+				id: 'game-version',
+				label: '1.20.1',
+				icon: Gamepad2Icon,
+				tooltip: 'Minecraft version',
+			},
+			{
+				id: 'loader',
+				label: 'Fabric 0.19.2',
+				icon: LoaderIcon,
+				iconProps: { loader: 'Fabric' },
+				tooltip: 'Mod loader',
+			},
+			{
+				id: 'last-active',
+				label: 'Last active 2 weeks ago',
+				icon: TimerIcon,
+				tooltip: 'Last activity',
+			},
+		],
+		actions: [
+			{
+				id: 'start',
+				label: 'Start instance',
+				icon: PlayIcon,
+				color: 'brand',
+				onClick: noop,
+			},
+			{
+				id: 'stop',
+				label: 'Stop instance',
+				color: 'red',
+				joinedActions: [
+					{
+						id: 'stop',
+						label: 'Stop',
+						icon: StopCircleIcon,
+						action: noop,
+					},
+					{
+						id: 'kill_server',
+						label: 'Kill server',
+						icon: SlashIcon,
+						action: noop,
+					},
+				],
+			},
+			{
+				id: 'settings',
+				label: 'Instance settings',
+				icon: SettingsIcon,
+				labelHidden: true,
+				tooltip: 'Instance settings',
+				onClick: noop,
+			},
+		],
+	},
+}
+
+export const CustomMetadata: Story = {
+	render: () => ({
+		components: { PageHeader, DownloadIcon, HeartIcon },
+		template: `
+			<PageHeader
+				header="Custom Metadata Project"
+				summary="Custom metadata is reserved for rich stat rows that cannot be represented by icon and label data."
+				:leading="{ type: 'avatar', src: null, alt: 'Custom Metadata Project', avatarSize: '96px' }"
+				:metadata="[{ id: 'project-stats', type: 'custom', class: 'contents' }]"
+			>
+				<template #metadata-project-stats>
+					<div class="flex flex-wrap items-center gap-3">
+						<div class="flex items-center gap-2 font-semibold">
+							<DownloadIcon class="h-6 w-6 text-secondary" />
+							1.2M downloads
+						</div>
+						<div class="flex items-center gap-2 font-semibold">
+							<HeartIcon class="h-6 w-6 text-secondary" />
+							50K followers
+						</div>
+					</div>
+				</template>
+			</PageHeader>
+		`,
+	}),
+}

From c1d3b9d09c08acfe05abab4dbbb77e036afa42f6 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Mon, 6 Jul 2026 10:48:55 +0100
Subject: [PATCH 02/12] feat: split up according to component structure guide

---
 .../app-frontend/src/pages/instance/Index.vue |  70 +-
 .../instance-header-server-metadata.vue       |  57 ++
 apps/app-frontend/src/pages/project/Index.vue | 102 ++-
 apps/frontend/src/pages/[type]/[project].vue  | 104 ++-
 .../src/pages/organization/[organization].vue |   2 +-
 apps/frontend/src/pages/user/[user].vue       |   2 +-
 .../ui/src/components/base/PageHeader.vue     | 680 ------------------
 packages/ui/src/components/base/index.ts      |  10 +-
 .../src/components/base/page-header/index.vue |  82 +++
 .../page-header-action-content.vue            |  18 +
 .../page-header-action-prompt-popper.vue      |  37 +
 .../page-header-action-with-prompt.vue        |  32 +
 .../base/page-header/page-header-action.vue   |  90 +++
 .../base/page-header/page-header-actions.vue  |  18 +
 .../page-header/page-header-badge-content.vue |  12 +
 .../base/page-header/page-header-badges.vue   |  46 ++
 .../page-header-interactive-wrapper.vue       |  74 ++
 .../base/page-header/page-header-leading.vue  |  66 ++
 .../page-header-metadata-item-content.vue     |  42 ++
 .../page-header/page-header-metadata-list.vue |  55 ++
 .../src/components/base/page-header/types.ts  | 260 +++++++
 .../src/components/project/ProjectHeader.vue  | 180 -----
 packages/ui/src/components/project/index.ts   |   1 -
 .../server-header/PanelServerOverflowMenu.vue |  65 --
 .../server-header/ServerManageHeader.vue      | 198 -----
 .../components/servers/server-header/index.ts |   2 -
 .../src/layouts/shared/browse-tab/header.vue  |   4 +-
 .../layouts/wrapped/hosting/manage/root.vue   | 251 +++++--
 .../ui/src/stories/base/PageHeader.stories.ts |  59 +-
 standards/frontend/COMPONENT_STRUCTURE.md     | 128 ++++
 30 files changed, 1462 insertions(+), 1285 deletions(-)
 create mode 100644 apps/app-frontend/src/pages/instance/instance-header-server-metadata.vue
 delete mode 100644 packages/ui/src/components/base/PageHeader.vue
 create mode 100644 packages/ui/src/components/base/page-header/index.vue
 create mode 100644 packages/ui/src/components/base/page-header/page-header-action-content.vue
 create mode 100644 packages/ui/src/components/base/page-header/page-header-action-prompt-popper.vue
 create mode 100644 packages/ui/src/components/base/page-header/page-header-action-with-prompt.vue
 create mode 100644 packages/ui/src/components/base/page-header/page-header-action.vue
 create mode 100644 packages/ui/src/components/base/page-header/page-header-actions.vue
 create mode 100644 packages/ui/src/components/base/page-header/page-header-badge-content.vue
 create mode 100644 packages/ui/src/components/base/page-header/page-header-badges.vue
 create mode 100644 packages/ui/src/components/base/page-header/page-header-interactive-wrapper.vue
 create mode 100644 packages/ui/src/components/base/page-header/page-header-leading.vue
 create mode 100644 packages/ui/src/components/base/page-header/page-header-metadata-item-content.vue
 create mode 100644 packages/ui/src/components/base/page-header/page-header-metadata-list.vue
 create mode 100644 packages/ui/src/components/base/page-header/types.ts
 delete mode 100644 packages/ui/src/components/project/ProjectHeader.vue
 delete mode 100644 packages/ui/src/components/servers/server-header/PanelServerOverflowMenu.vue
 delete mode 100644 packages/ui/src/components/servers/server-header/ServerManageHeader.vue
 create mode 100644 standards/frontend/COMPONENT_STRUCTURE.md

diff --git a/apps/app-frontend/src/pages/instance/Index.vue b/apps/app-frontend/src/pages/instance/Index.vue
index b33edf12b5..d4b1a05e3c 100644
--- a/apps/app-frontend/src/pages/instance/Index.vue
+++ b/apps/app-frontend/src/pages/instance/Index.vue
@@ -14,56 +14,11 @@
 			/>
 			<UpdateToPlayModal ref="updateToPlayModal" :instance="instance" />
 			<PageHeader
-				:header="instance.name"
+				:title="instance.name"
 				:leading="instanceHeaderLeading"
 				:metadata="instanceHeaderMetadata"
 				:actions="instanceHeaderActions"
-			>
-				<template #metadata-server-details>
-					<div class="flex items-center flex-wrap gap-2">
-						<template v-if="loadingServerPing">
-							<ServerOnlinePlayers
-								v-if="playersOnline !== undefined"
-								:online="playersOnline"
-								:status-online="statusOnline"
-								hide-label
-							/>
-							<ServerRecentPlays :recent-plays="recentPlays ?? 0" hide-label />
-							<div
-								v-if="
-									(playersOnline !== undefined || recentPlays !== undefined) &&
-									(minecraftServer?.region || ping)
-								"
-								class="w-1.5 h-1.5 rounded-full bg-surface-5"
-							></div>
-							<ServerPing v-if="ping" :ping="ping" />
-						</template>
-
-						<ServerRegion v-if="minecraftServer?.region" :region="minecraftServer?.region" />
-
-						<div
-							v-if="minecraftServer?.region || ping"
-							class="w-1.5 h-1.5 rounded-full bg-surface-5"
-						></div>
-
-						<div v-if="linkedProjectV3" class="flex gap-1.5 items-center font-medium text-primary">
-							Linked to
-							<Avatar
-								:src="linkedProjectV3.icon_url"
-								:alt="linkedProjectV3.name"
-								:tint-by="instance.id"
-								size="24px"
-							/>
-							<router-link
-								:to="`/project/${linkedProjectV3.slug ?? linkedProjectV3.id}`"
-								class="hover:underline text-primary truncate"
-							>
-								{{ linkedProjectV3.name }}
-							</router-link>
-						</div>
-					</div>
-				</template>
-			</PageHeader>
+			/>
 		</div>
 		<div :class="['px-6', { 'shrink-0': isFixedRender }]">
 			<NavTabs :links="tabs" />
@@ -142,16 +97,11 @@ import {
 	XIcon,
 } from '@modrinth/assets'
 import {
-	Avatar,
 	formatLoaderLabel,
 	injectNotificationManager,
 	LoaderIcon as ServerLoaderIcon,
 	NavTabs,
 	PageHeader,
-	ServerOnlinePlayers,
-	ServerPing,
-	ServerRecentPlays,
-	ServerRegion,
 	useLoadingBarToken,
 } from '@modrinth/ui'
 import type { Loaders } from '@modrinth/utils'
@@ -182,6 +132,8 @@ import { injectServerInstall } from '@/providers/server-install'
 import { handleSevereError } from '@/store/error.js'
 import { useBreadcrumbs, useTheming } from '@/store/state'
 
+import InstanceHeaderServerMetadata from './instance-header-server-metadata.vue'
+
 dayjs.extend(duration)
 dayjs.extend(relativeTime)
 
@@ -619,8 +571,18 @@ const instanceHeaderMetadata = computed(() => {
 		return [
 			{
 				id: 'server-details',
-				type: 'custom' as const,
-				class: 'contents',
+				type: 'component' as const,
+				component: InstanceHeaderServerMetadata,
+				componentProps: {
+					loadingServerPing: loadingServerPing.value,
+					playersOnline: playersOnline.value,
+					statusOnline: statusOnline.value,
+					recentPlays: recentPlays.value,
+					ping: ping.value,
+					minecraftServer: minecraftServer.value,
+					linkedProjectV3: linkedProjectV3.value,
+					instanceId: instance.value.id,
+				},
 			},
 		]
 	}
diff --git a/apps/app-frontend/src/pages/instance/instance-header-server-metadata.vue b/apps/app-frontend/src/pages/instance/instance-header-server-metadata.vue
new file mode 100644
index 0000000000..3e20423d98
--- /dev/null
+++ b/apps/app-frontend/src/pages/instance/instance-header-server-metadata.vue
@@ -0,0 +1,57 @@
+<template>
+	<div class="flex items-center flex-wrap gap-2">
+		<template v-if="loadingServerPing">
+			<ServerOnlinePlayers
+				v-if="playersOnline !== undefined"
+				:online="playersOnline"
+				:status-online="statusOnline"
+				hide-label
+			/>
+			<ServerRecentPlays :recent-plays="recentPlays ?? 0" hide-label />
+			<div
+				v-if="
+					(playersOnline !== undefined || recentPlays !== undefined) &&
+					(minecraftServer?.region || ping)
+				"
+				class="w-1.5 h-1.5 rounded-full bg-surface-5"
+			></div>
+			<ServerPing v-if="ping" :ping="ping" />
+		</template>
+
+		<ServerRegion v-if="minecraftServer?.region" :region="minecraftServer?.region" />
+
+		<div v-if="minecraftServer?.region || ping" class="w-1.5 h-1.5 rounded-full bg-surface-5"></div>
+
+		<div v-if="linkedProjectV3" class="flex gap-1.5 items-center font-medium text-primary">
+			Linked to
+			<Avatar
+				:src="linkedProjectV3.icon_url"
+				:alt="linkedProjectV3.name"
+				:tint-by="instanceId"
+				size="24px"
+			/>
+			<router-link
+				:to="`/project/${linkedProjectV3.slug ?? linkedProjectV3.id}`"
+				class="hover:underline text-primary truncate"
+			>
+				{{ linkedProjectV3.name }}
+			</router-link>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { Avatar, ServerOnlinePlayers, ServerPing, ServerRecentPlays, ServerRegion } from '@modrinth/ui'
+
+defineProps<{
+	loadingServerPing?: boolean
+	playersOnline?: number
+	statusOnline?: boolean
+	recentPlays?: number
+	ping?: number
+	minecraftServer?: Labrinth.Projects.v3.Project['minecraft_server']
+	linkedProjectV3?: Labrinth.Projects.v3.Project
+	instanceId?: string
+}>()
+</script>
diff --git a/apps/app-frontend/src/pages/project/Index.vue b/apps/app-frontend/src/pages/project/Index.vue
index deb2e59305..4bd9fad960 100644
--- a/apps/app-frontend/src/pages/project/Index.vue
+++ b/apps/app-frontend/src/pages/project/Index.vue
@@ -59,11 +59,13 @@
 				>
 					<ProjectBackgroundGradient :project="data" />
 				</Teleport>
-				<ProjectHeader
+				<PageHeader
 					v-else
-					:project="data"
-					:project-v3="projectV3"
-					:ping="serverPing"
+					:title="data.title"
+					:summary="data.description"
+					:leading="projectHeaderLeading"
+					:badges="projectHeaderBadges"
+					:metadata="projectHeaderMetadata"
 					:actions="projectHeaderActions"
 					@contextmenu.prevent.stop="handleRightClick"
 				/>
@@ -160,18 +162,22 @@ import {
 	getTargetInstallPreferences,
 	injectNotificationManager,
 	NavTabs,
+	PageHeader,
 	ProjectBackgroundGradient,
-	ProjectHeader,
 	ProjectSidebarCompatibility,
 	ProjectSidebarCreators,
 	ProjectSidebarDetails,
 	ProjectSidebarLinks,
 	ProjectSidebarServerInfo,
 	ProjectSidebarTags,
+	ProjectStatusBadge,
 	requestInstall,
 	SelectedProjectsFloatingBar,
+	ServerDetails,
+	useCompactNumber,
 	useVIntl,
 } from '@modrinth/ui'
+import { capitalizeString } from '@modrinth/utils'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import dayjs from 'dayjs'
@@ -215,6 +221,7 @@ const router = useRouter()
 const breadcrumbs = useBreadcrumbs()
 const themeStore = useTheming()
 const { formatMessage } = useVIntl()
+const { formatCompactNumber } = useCompactNumber()
 
 const messages = defineMessages({
 	backToBrowse: {
@@ -400,6 +407,91 @@ const installButtonTooltip = computed(() => {
 	return null
 })
 
+const projectHeaderLeading = computed(() => ({
+	type: 'avatar',
+	src: data.value?.icon_url,
+	alt: data.value?.title,
+	avatarSize: '96px',
+}))
+
+const projectHeaderBadges = computed(() => {
+	if (!data.value || data.value.status === 'approved') return []
+	return [
+		{
+			id: 'status',
+			type: 'component',
+			component: ProjectStatusBadge,
+			componentProps: {
+				status: data.value.status,
+			},
+		},
+	]
+})
+
+const projectSearchUrl = computed(
+	() => `/browse/${isServerProject.value ? 'server' : data.value?.project_type}`,
+)
+
+const projectHeaderMetadata = computed(() => {
+	if (!data.value) return []
+	const items = []
+
+	if (isServerProject.value) {
+		if (projectV3.value?.status !== 'draft') {
+			items.push({
+				id: 'server-details',
+				type: 'component',
+				component: ServerDetails,
+				componentProps: {
+					onlinePlayers:
+						projectV3.value?.minecraft_java_server?.ping?.data?.players_online ?? 0,
+					statusOnline: !!projectV3.value?.minecraft_java_server?.ping?.data,
+					recentPlays: projectV3.value?.minecraft_java_server?.verified_plays_2w ?? 0,
+				},
+			})
+		}
+	} else {
+		items.push(
+			{
+				id: 'downloads',
+				icon: DownloadIcon,
+				label: formatCompactNumber(data.value.downloads),
+				tooltip: capitalizeString(
+					formatMessage(commonMessages.projectDownloads, {
+						count: data.value.downloads,
+					}),
+				),
+				class: 'font-semibold cursor-help',
+			},
+			{
+				id: 'followers',
+				icon: HeartIcon,
+				label: formatCompactNumber(data.value.followers),
+				tooltip: capitalizeString(
+					formatMessage(commonMessages.projectFollowers, {
+						count: data.value.followers,
+					}),
+				),
+				class: 'font-semibold cursor-help',
+			},
+		)
+	}
+
+	if (data.value.categories.length > 0) {
+		items.push({
+			id: 'categories',
+			tags: data.value.categories.map((category) => ({
+				id: category,
+				tag: category,
+				onClick: () => router.push(`${projectSearchUrl.value}?f=categories:${category}`),
+			})),
+			class: 'hidden md:flex',
+		})
+	}
+
+	return items
+})
+
 const projectHeaderActions = computed(() => {
 	if (!data.value) return []
 
diff --git a/apps/frontend/src/pages/[type]/[project].vue b/apps/frontend/src/pages/[type]/[project].vue
index d17825f8fc..3fca6b7896 100644
--- a/apps/frontend/src/pages/[type]/[project].vue
+++ b/apps/frontend/src/pages/[type]/[project].vue
@@ -128,11 +128,13 @@
 							@set-processing="setProcessing"
 						/>
 					</div>
-					<ProjectHeader
+					<PageHeader
 						v-if="projectV3Loaded"
-						:project="project"
-						:project-v3="projectV3"
-						:member="!!currentMember"
+						:title="project.title"
+						:summary="project.description"
+						:leading="projectHeaderLeading"
+						:badges="projectHeaderBadges"
+						:metadata="projectHeaderMetadata"
 						:actions="projectHeaderActions"
 					/>
 					<ProjectMemberHeader
@@ -397,19 +399,22 @@ import {
 	NavTabs,
 	NewModal,
 	OpenInAppModal,
+	PageHeader,
 	PROJECT_DEP_MARKER_QUERY,
 	ProjectBackgroundGradient,
 	ProjectEnvironmentModal,
-	ProjectHeader,
 	ProjectSidebarCompatibility,
 	ProjectSidebarCreators,
 	ProjectSidebarDetails,
 	ProjectSidebarLinks,
 	ProjectSidebarServerInfo,
 	ProjectSidebarTags,
+	ProjectStatusBadge,
 	provideProjectPageContext,
+	ServerDetails,
 	useDebugLogger,
 	useFormatDateTime,
+	useCompactNumber,
 	useFormatPrice,
 	useRelativeTime,
 	useVIntl,
@@ -482,6 +487,7 @@ const flags = useFeatureFlags()
 const cosmetics = useCosmetics()
 
 const { formatMessage } = useVIntl()
+const { formatCompactNumber } = useCompactNumber()
 const formatPrice = useFormatPrice()
 const formatDateTime = useFormatDateTime({
 	timeStyle: 'short',
@@ -1470,6 +1476,93 @@ const canCreateServerFrom = computed(() => {
 	return project.value.project_type === 'modpack' && project.value.server_side !== 'unsupported'
 })
 
+const projectHeaderLeading = computed(() => ({
+	type: 'avatar',
+	src: project.value?.icon_url,
+	alt: project.value?.title,
+	avatarSize: '96px',
+}))
+
+const projectHeaderBadges = computed(() => {
+	if (!project.value) return []
+	return currentMember.value || project.value.status !== 'approved'
+		? [
+				{
+					id: 'status',
+					type: 'component',
+					component: ProjectStatusBadge,
+					componentProps: {
+						status: project.value.status,
+					},
+				},
+			]
+		: []
+})
+
+const projectSearchUrl = computed(
+	() => `/discover/${isServerProject.value ? 'servers' : `${project.value?.project_type}s`}`,
+)
+
+const projectHeaderMetadata = computed(() => {
+	if (!project.value) return []
+	const items = []
+
+	if (isServerProject.value) {
+		if (projectV3.value?.status !== 'draft') {
+			items.push({
+				id: 'server-details',
+				type: 'component',
+				component: ServerDetails,
+				componentProps: {
+					onlinePlayers:
+						projectV3.value?.minecraft_java_server?.ping?.data?.players_online ?? 0,
+					statusOnline: !!projectV3.value?.minecraft_java_server?.ping?.data,
+					recentPlays: projectV3.value?.minecraft_java_server?.verified_plays_2w ?? 0,
+				},
+			})
+		}
+	} else {
+		items.push(
+			{
+				id: 'downloads',
+				icon: DownloadIcon,
+				label: formatCompactNumber(project.value.downloads),
+				tooltip: capitalizeString(
+					formatMessage(commonMessages.projectDownloads, {
+						count: project.value.downloads,
+					}),
+				),
+				class: 'font-semibold cursor-help',
+			},
+			{
+				id: 'followers',
+				icon: HeartIcon,
+				label: formatCompactNumber(project.value.followers),
+				tooltip: capitalizeString(
+					formatMessage(commonMessages.projectFollowers, {
+						count: project.value.followers,
+					}),
+				),
+				class: 'font-semibold cursor-help',
+			},
+		)
+	}
+
+	if (project.value.categories.length > 0) {
+		items.push({
+			id: 'categories',
+			tags: project.value.categories.map((category) => ({
+				id: category,
+				tag: category,
+				onClick: () => router.push(`${projectSearchUrl.value}?f=categories:${category}`),
+			})),
+			class: 'hidden md:flex',
+		})
+	}
+
+	return items
+})
+
 const projectHeaderActions = computed(() => {
 	if (!project.value) return []
 
@@ -1557,6 +1650,7 @@ const projectHeaderActions = computed(() => {
 		{
 			id: 'save',
 			label: formatMessage(commonMessages.saveButton),
+			kind: 'component',
 			component: ProjectCollectionSaveButton,
 			componentProps: {
 				authUser: auth.value.user,
diff --git a/apps/frontend/src/pages/organization/[organization].vue b/apps/frontend/src/pages/organization/[organization].vue
index fc75942489..e1c2dc89a4 100644
--- a/apps/frontend/src/pages/organization/[organization].vue
+++ b/apps/frontend/src/pages/organization/[organization].vue
@@ -63,7 +63,7 @@
 		<template v-else>
 			<div class="normal-page__header py-4">
 				<PageHeader
-					:header="organization.name"
+					:title="organization.name"
 					:summary="organization.description"
 					:leading="organizationHeaderLeading"
 					:badges="organizationHeaderBadges"
diff --git a/apps/frontend/src/pages/user/[user].vue b/apps/frontend/src/pages/user/[user].vue
index 783dd20478..282c699a99 100644
--- a/apps/frontend/src/pages/user/[user].vue
+++ b/apps/frontend/src/pages/user/[user].vue
@@ -121,7 +121,7 @@
 		<div class="new-page sidebar" :class="{ 'alt-layout': cosmetics.leftContentLayout }">
 			<div class="normal-page__header py-4">
 				<PageHeader
-					:header="user.username"
+					:title="user.username"
 					:summary="isModrinthUser ? null : profileHeaderSummary"
 					:leading="profileHeaderLeading"
 					:badges="profileHeaderBadges"
diff --git a/packages/ui/src/components/base/PageHeader.vue b/packages/ui/src/components/base/PageHeader.vue
deleted file mode 100644
index 1f6d154ec8..0000000000
--- a/packages/ui/src/components/base/PageHeader.vue
+++ /dev/null
@@ -1,680 +0,0 @@
-<template>
-	<div
-		class="flex flex-col gap-2"
-		:class="[
-			props.divider ? 'border-0 border-b border-solid border-divider' : '',
-			props.bottomPadding ? 'pb-4' : '',
-			props.headerClass,
-		]"
-	>
-		<div class="flex flex-wrap items-start gap-4 max-md:flex-col" :class="props.rowClass">
-			<div class="flex min-w-0 flex-1 gap-4" :class="props.mainClass">
-				<div v-if="leadingItems.length" class="contents">
-					<template v-for="(leadingItem, index) in leadingItems" :key="leadingItem.id ?? index">
-						<div
-							v-if="leadingItem.type === 'button'"
-							:class="
-								leadingWrapperClass(
-									leadingItem,
-									'flex size-16 shrink-0 items-center justify-center',
-								)
-							"
-						>
-							<ButtonStyled
-								circular
-								:color="leadingItem.color ?? 'standard'"
-								:size="leadingItem.size ?? 'large'"
-								:type="leadingItem.buttonType ?? 'standard'"
-							>
-								<AutoLink
-									v-if="leadingItem.to"
-									v-tooltip="leadingItem.tooltip"
-									:to="leadingItem.to"
-									:aria-label="leadingLabel(leadingItem)"
-								>
-									<component
-										:is="leadingItem.icon"
-										v-if="leadingItem.icon"
-										aria-hidden="true"
-										v-bind="leadingItem.iconProps"
-									/>
-								</AutoLink>
-								<button
-									v-else
-									v-tooltip="leadingItem.tooltip"
-									type="button"
-									:aria-label="leadingLabel(leadingItem)"
-									@click="leadingItem.onClick"
-								>
-									<component
-										:is="leadingItem.icon"
-										v-if="leadingItem.icon"
-										aria-hidden="true"
-										v-bind="leadingItem.iconProps"
-									/>
-								</button>
-							</ButtonStyled>
-						</div>
-						<Avatar
-							v-else-if="leadingItem.type === 'avatar'"
-							:src="leadingItem.src"
-							:alt="leadingItem.alt ?? ''"
-							:size="leadingItem.avatarSize ?? '64px'"
-							:tint-by="leadingItem.tintBy ?? null"
-							:circle="leadingItem.circle ?? false"
-							:no-shadow="leadingItem.noShadow ?? false"
-							:raised="leadingItem.raised ?? false"
-							:loading="leadingItem.loading ?? 'eager'"
-							:class="leadingItem.class"
-						/>
-						<component
-							:is="leadingItem.component"
-							v-else-if="leadingItem.component"
-							:class="leadingItem.class"
-							v-bind="leadingItem.componentProps"
-						/>
-					</template>
-				</div>
-
-				<div class="flex min-w-0 flex-col gap-2 justify-center">
-					<div class="flex flex-col gap-1.5 justify-center">
-						<div class="flex flex-wrap items-center gap-2">
-							<h1
-								class="m-0 min-w-0 max-w-full text-2xl font-semibold leading-none text-contrast"
-								:class="[props.truncateTitle ? 'truncate' : '', props.titleClass]"
-							>
-								{{ props.header }}
-							</h1>
-							<template v-for="badge in props.badges" :key="badge.id">
-								<component
-									:is="badge.component"
-									v-if="badge.component"
-									:class="badge.class"
-									v-bind="badge.componentProps"
-								/>
-								<AutoLink
-									v-else-if="badge.to"
-									v-tooltip="badge.tooltip"
-									:to="badge.to"
-									:aria-label="badge.ariaLabel ?? badge.label"
-									:class="badgeClass(badge, true)"
-									:style="badge.style"
-								>
-									<component
-										:is="badge.icon"
-										v-if="badge.icon"
-										aria-hidden="true"
-										v-bind="badge.iconProps"
-									/>
-									<span>{{ badge.label }}</span>
-								</AutoLink>
-								<button
-									v-else-if="badge.onClick"
-									v-tooltip="badge.tooltip"
-									type="button"
-									:aria-label="badge.ariaLabel ?? badge.label"
-									:class="badgeClass(badge, true)"
-									:style="badge.style"
-									@click="badge.onClick"
-								>
-									<component
-										:is="badge.icon"
-										v-if="badge.icon"
-										aria-hidden="true"
-										v-bind="badge.iconProps"
-									/>
-									<span>{{ badge.label }}</span>
-								</button>
-								<div
-									v-else
-									v-tooltip="badge.tooltip"
-									:aria-label="badge.ariaLabel"
-									:class="badgeClass(badge)"
-									:style="badge.style"
-								>
-									<component
-										:is="badge.icon"
-										v-if="badge.icon"
-										aria-hidden="true"
-										v-bind="badge.iconProps"
-									/>
-									<span>{{ badge.label }}</span>
-								</div>
-							</template>
-						</div>
-						<p
-							v-if="props.summary || $slots.summary"
-							class="m-0 max-w-[44rem] empty:hidden"
-							:class="[props.disableLineClamp ? '' : 'line-clamp-2']"
-						>
-							<slot name="summary">{{ props.summary }}</slot>
-						</p>
-					</div>
-
-					<div v-if="props.metadata.length" class="flex flex-wrap gap-3 empty:hidden max-md:hidden">
-						<div class="flex min-w-0 flex-wrap items-center gap-2">
-							<template v-for="(item, index) in props.metadata" :key="item.id">
-								<BulletDivider v-if="index > 0" class="shrink-0" />
-								<div v-if="item.type === 'custom'" :class="item.class">
-									<slot :name="metadataSlotName(item)" :item="item" />
-								</div>
-								<AutoLink
-									v-else-if="item.to"
-									v-tooltip="item.tooltip"
-									:to="item.to"
-									:aria-label="item.ariaLabel ?? item.label ?? ''"
-									:class="metadataClass(item, true)"
-								>
-									<component
-										:is="item.icon"
-										v-if="item.icon"
-										class="flex size-5 shrink-0 text-current"
-										aria-hidden="true"
-										v-bind="item.iconProps"
-									/>
-									<span class="truncate">{{ item.label }}</span>
-								</AutoLink>
-								<button
-									v-else-if="item.onClick"
-									v-tooltip="item.tooltip"
-									type="button"
-									:aria-label="item.ariaLabel ?? item.label ?? ''"
-									:class="metadataClass(item, true)"
-									@click="item.onClick"
-								>
-									<component
-										:is="item.icon"
-										v-if="item.icon"
-										class="flex size-5 shrink-0 text-current"
-										aria-hidden="true"
-										v-bind="item.iconProps"
-									/>
-									<span class="truncate">{{ item.label }}</span>
-								</button>
-								<div
-									v-else
-									v-tooltip="item.tooltip"
-									:aria-label="item.ariaLabel"
-									:class="metadataClass(item)"
-								>
-									<component
-										:is="item.icon"
-										v-if="item.icon"
-										class="flex size-5 shrink-0 text-current"
-										aria-hidden="true"
-										v-bind="item.iconProps"
-									/>
-									<span class="truncate">{{ item.label }}</span>
-								</div>
-							</template>
-						</div>
-					</div>
-				</div>
-			</div>
-
-			<div v-if="props.actions.length || $slots.actions" class="flex flex-wrap gap-2 items-center">
-				<template v-for="action in props.actions" :key="action.id">
-					<component
-						:is="action.component"
-						v-if="action.component"
-						:class="action.class"
-						v-bind="action.componentProps"
-					/>
-					<Tooltip
-						v-else-if="action.prompt"
-						theme="dismissable-prompt"
-						:triggers="[]"
-						:shown="action.prompt.shown"
-						:auto-hide="false"
-						:placement="action.prompt.placement ?? 'bottom'"
-					>
-						<JoinedButtons
-							v-if="action.joinedActions?.length"
-							:actions="action.joinedActions"
-							:color="joinedActionColor(action.color)"
-							:size="action.size ?? 'large'"
-							:disabled="action.disabled"
-							:primary-disabled="action.primaryDisabled"
-							:dropdown-disabled="action.dropdownDisabled"
-							:primary-muted="action.primaryMuted"
-						/>
-						<ButtonStyled
-							v-else
-							:color="action.color ?? 'standard'"
-							:size="action.size ?? 'large'"
-							:type="action.type ?? 'standard'"
-							:circular="action.circular ?? action.labelHidden ?? false"
-						>
-							<TeleportOverflowMenu
-								v-if="action.menuActions?.length"
-								:options="action.menuActions"
-								:tooltip="action.tooltip"
-								:aria-label="actionLabel(action)"
-								:disabled="action.disabled"
-								@open="dismissActionPrompt(action)"
-							>
-								<component
-									:is="action.icon"
-									v-if="action.icon"
-									:class="action.iconClass"
-									aria-hidden="true"
-									v-bind="action.iconProps"
-								/>
-								<span v-if="!action.labelHidden && !action.circular">{{ action.label }}</span>
-							</TeleportOverflowMenu>
-							<AutoLink
-								v-else-if="action.to"
-								v-tooltip="action.tooltip"
-								:to="action.to"
-								:aria-label="actionLabel(action)"
-								@click="(event) => handleActionClick(action, event)"
-							>
-								<component
-									:is="action.icon"
-									v-if="action.icon"
-									:class="action.iconClass"
-									aria-hidden="true"
-									v-bind="action.iconProps"
-								/>
-								<span v-if="!action.labelHidden && !action.circular">{{ action.label }}</span>
-							</AutoLink>
-							<button
-								v-else
-								v-tooltip="action.tooltip"
-								type="button"
-								:disabled="action.disabled"
-								:aria-label="actionLabel(action)"
-								@click="(event) => handleActionClick(action, event)"
-							>
-								<component
-									:is="action.icon"
-									v-if="action.icon"
-									:class="action.iconClass"
-									aria-hidden="true"
-									v-bind="action.iconProps"
-								/>
-								<span v-if="!action.labelHidden && !action.circular">{{ action.label }}</span>
-							</button>
-						</ButtonStyled>
-						<template #popper>
-							<div class="grid grid-cols-[min-content] gap-1">
-								<div class="flex min-w-48 items-center justify-between gap-8">
-									<h3
-										class="m-0 flex items-center gap-2 whitespace-nowrap text-base font-bold text-contrast"
-									>
-										{{ action.prompt.title }}
-										<span
-											v-if="action.prompt.badge"
-											class="inline-flex items-center rounded-full border border-solid border-brand-highlight bg-brand-highlight px-2 py-1 text-sm font-semibold leading-none text-brand"
-										>
-											{{ action.prompt.badge }}
-										</span>
-									</h3>
-									<ButtonStyled size="small" circular>
-										<button
-											v-tooltip="action.prompt.dismissLabel"
-											@click="action.prompt.onDismiss?.()"
-										>
-											<XIcon aria-hidden="true" />
-										</button>
-									</ButtonStyled>
-								</div>
-								<p class="m-0 text-wrap text-sm font-medium leading-tight text-secondary">
-									{{ action.prompt.description }}
-								</p>
-								<p v-if="action.prompt.footer" class="m-0 text-wrap text-sm font-bold text-primary">
-									{{ action.prompt.footer }}
-								</p>
-							</div>
-						</template>
-					</Tooltip>
-					<template v-else>
-						<JoinedButtons
-							v-if="action.joinedActions?.length"
-							:actions="action.joinedActions"
-							:color="joinedActionColor(action.color)"
-							:size="action.size ?? 'large'"
-							:disabled="action.disabled"
-							:primary-disabled="action.primaryDisabled"
-							:dropdown-disabled="action.dropdownDisabled"
-							:primary-muted="action.primaryMuted"
-						/>
-						<ButtonStyled
-							v-else
-							:color="action.color ?? 'standard'"
-							:size="action.size ?? 'large'"
-							:type="action.type ?? 'standard'"
-							:circular="action.circular ?? action.labelHidden ?? false"
-						>
-							<TeleportOverflowMenu
-								v-if="action.menuActions?.length"
-								:options="action.menuActions"
-								:tooltip="action.tooltip"
-								:aria-label="actionLabel(action)"
-								:disabled="action.disabled"
-							>
-								<component
-									:is="action.icon"
-									v-if="action.icon"
-									:class="action.iconClass"
-									aria-hidden="true"
-									v-bind="action.iconProps"
-								/>
-								<span v-if="!action.labelHidden && !action.circular">{{ action.label }}</span>
-							</TeleportOverflowMenu>
-							<AutoLink
-								v-else-if="action.to"
-								v-tooltip="action.tooltip"
-								:to="action.to"
-								:aria-label="actionLabel(action)"
-								@click="(event) => handleActionClick(action, event)"
-							>
-								<component
-									:is="action.icon"
-									v-if="action.icon"
-									:class="action.iconClass"
-									aria-hidden="true"
-									v-bind="action.iconProps"
-								/>
-								<span v-if="!action.labelHidden && !action.circular">{{ action.label }}</span>
-							</AutoLink>
-							<button
-								v-else
-								v-tooltip="action.tooltip"
-								type="button"
-								:disabled="action.disabled"
-								:aria-label="actionLabel(action)"
-								@click="(event) => handleActionClick(action, event)"
-							>
-								<component
-									:is="action.icon"
-									v-if="action.icon"
-									:class="action.iconClass"
-									aria-hidden="true"
-									v-bind="action.iconProps"
-								/>
-								<span v-if="!action.labelHidden && !action.circular">{{ action.label }}</span>
-							</button>
-						</ButtonStyled>
-					</template>
-				</template>
-				<slot name="actions" />
-			</div>
-		</div>
-
-		<div v-if="props.metadata.length" class="flex justify-between md:hidden">
-			<div class="flex flex-wrap gap-3 empty:hidden">
-				<div class="flex min-w-0 flex-wrap items-center gap-2">
-					<template v-for="(item, index) in props.metadata" :key="item.id">
-						<BulletDivider v-if="index > 0" class="shrink-0" />
-						<div v-if="item.type === 'custom'" :class="item.class">
-							<slot :name="metadataSlotName(item)" :item="item" />
-						</div>
-						<AutoLink
-							v-else-if="item.to"
-							v-tooltip="item.tooltip"
-							:to="item.to"
-							:aria-label="item.ariaLabel ?? item.label ?? ''"
-							:class="metadataClass(item, true)"
-						>
-							<component
-								:is="item.icon"
-								v-if="item.icon"
-								class="flex size-5 shrink-0 text-current"
-								aria-hidden="true"
-								v-bind="item.iconProps"
-							/>
-							<span class="truncate">{{ item.label }}</span>
-						</AutoLink>
-						<button
-							v-else-if="item.onClick"
-							v-tooltip="item.tooltip"
-							type="button"
-							:aria-label="item.ariaLabel ?? item.label ?? ''"
-							:class="metadataClass(item, true)"
-							@click="item.onClick"
-						>
-							<component
-								:is="item.icon"
-								v-if="item.icon"
-								class="flex size-5 shrink-0 text-current"
-								aria-hidden="true"
-								v-bind="item.iconProps"
-							/>
-							<span class="truncate">{{ item.label }}</span>
-						</button>
-						<div
-							v-else
-							v-tooltip="item.tooltip"
-							:aria-label="item.ariaLabel"
-							:class="metadataClass(item)"
-						>
-							<component
-								:is="item.icon"
-								v-if="item.icon"
-								class="flex size-5 shrink-0 text-current"
-								aria-hidden="true"
-								v-bind="item.iconProps"
-							/>
-							<span class="truncate">{{ item.label }}</span>
-						</div>
-					</template>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { XIcon } from '@modrinth/assets'
-import { Tooltip } from 'floating-vue'
-import type { Component } from 'vue'
-import { computed } from 'vue'
-import type { RouteLocationRaw } from 'vue-router'
-
-import AutoLink from './AutoLink.vue'
-import Avatar from './Avatar.vue'
-import BulletDivider from './BulletDivider.vue'
-import ButtonStyled from './ButtonStyled.vue'
-import JoinedButtons, { type JoinedButtonAction } from './JoinedButtons.vue'
-import TeleportOverflowMenu, {
-	type Item as TeleportOverflowMenuItem,
-} from './TeleportOverflowMenu.vue'
-
-type PageHeaderTarget = string | RouteLocationRaw
-type ButtonColor =
-	| 'standard'
-	| 'brand'
-	| 'red'
-	| 'orange'
-	| 'green'
-	| 'blue'
-	| 'purple'
-	| 'medal-promo'
-type ButtonSize = 'standard' | 'large' | 'small'
-type ButtonType =
-	| 'standard'
-	| 'outlined'
-	| 'transparent'
-	| 'highlight'
-	| 'highlight-colored-text'
-	| 'chip'
-
-type PageHeaderLeading = {
-	id?: string
-	type: 'avatar' | 'button' | 'component'
-	icon?: Component
-	iconProps?: Record<string, unknown>
-	component?: Component
-	componentProps?: Record<string, unknown>
-	src?: string | null
-	alt?: string
-	tintBy?: string | null
-	avatarSize?: string
-	circle?: boolean
-	noShadow?: boolean
-	raised?: boolean
-	loading?: 'eager' | 'lazy'
-	class?: string
-	wrapperClass?: string
-	to?: PageHeaderTarget
-	onClick?: (event?: MouseEvent) => void | Promise<void>
-	tooltip?: string
-	ariaLabel?: string
-	color?: ButtonColor
-	size?: ButtonSize
-	buttonType?: ButtonType
-}
-
-type PageHeaderBadge = {
-	id: string
-	label?: string
-	icon?: Component
-	iconProps?: Record<string, unknown>
-	component?: Component
-	componentProps?: Record<string, unknown>
-	tooltip?: string
-	ariaLabel?: string
-	to?: PageHeaderTarget
-	onClick?: (event?: MouseEvent) => void | Promise<void>
-	class?: string
-	style?: Record<string, string>
-}
-
-type PageHeaderMetadataItem = {
-	id: string
-	type?: 'text' | 'custom'
-	label?: string
-	icon?: Component
-	iconProps?: Record<string, unknown>
-	tooltip?: string
-	ariaLabel?: string
-	to?: PageHeaderTarget
-	onClick?: (event?: MouseEvent) => void | Promise<void>
-	class?: string
-}
-
-type PageHeaderActionPrompt = {
-	title: string
-	description: string
-	badge?: string
-	footer?: string
-	dismissLabel?: string
-	shown?: boolean
-	placement?: string
-	onDismiss?: () => void
-}
-
-type PageHeaderAction = {
-	id: string
-	label: string
-	component?: Component
-	componentProps?: Record<string, unknown>
-	class?: string
-	icon?: Component
-	iconProps?: Record<string, unknown>
-	iconClass?: string
-	tooltip?: string
-	ariaLabel?: string
-	to?: PageHeaderTarget
-	onClick?: (event?: MouseEvent) => void | Promise<void>
-	disabled?: boolean
-	labelHidden?: boolean
-	circular?: boolean
-	color?: ButtonColor
-	size?: ButtonSize
-	type?: ButtonType
-	joinedActions?: JoinedButtonAction[]
-	menuActions?: TeleportOverflowMenuItem[]
-	primaryDisabled?: boolean
-	dropdownDisabled?: boolean
-	primaryMuted?: boolean
-	prompt?: PageHeaderActionPrompt
-}
-
-const props = withDefaults(
-	defineProps<{
-		header: string
-		summary?: string | null
-		leading?: PageHeaderLeading | PageHeaderLeading[] | null
-		badges?: PageHeaderBadge[]
-		metadata?: PageHeaderMetadataItem[]
-		actions?: PageHeaderAction[]
-		headerClass?: string
-		rowClass?: string
-		mainClass?: string
-		titleClass?: string
-		truncateTitle?: boolean
-		divider?: boolean
-		bottomPadding?: boolean
-		disableLineClamp?: boolean
-	}>(),
-	{
-		summary: null,
-		leading: null,
-		badges: () => [],
-		metadata: () => [],
-		actions: () => [],
-		headerClass: '',
-		rowClass: '',
-		mainClass: '',
-		titleClass: '',
-		truncateTitle: false,
-		divider: true,
-		bottomPadding: true,
-		disableLineClamp: false,
-	},
-)
-
-const leadingItems = computed(() => {
-	if (!props.leading) return []
-	return Array.isArray(props.leading) ? props.leading : [props.leading]
-})
-
-function leadingLabel(item: PageHeaderLeading) {
-	return item.ariaLabel ?? item.tooltip ?? 'Header action'
-}
-
-function leadingWrapperClass(item: PageHeaderLeading, defaultClass: string) {
-	return [item.wrapperClass ?? defaultClass]
-}
-
-function metadataClass(item: PageHeaderMetadataItem, interactive = false) {
-	return [
-		'flex min-w-0 items-center gap-2 font-medium text-secondary text-nowrap',
-		interactive ? 'm-0 cursor-pointer border-0 bg-transparent p-0 hover:underline' : '',
-		item.class,
-	]
-}
-
-function metadataSlotName(item: PageHeaderMetadataItem) {
-	return `metadata-${item.id}`
-}
-
-function badgeClass(badge: PageHeaderBadge, interactive = false) {
-	return [
-		'inline-flex items-center gap-1 rounded-full border border-solid border-surface-5 bg-button-bg px-2 py-1 text-sm font-semibold leading-none text-secondary text-nowrap [&>svg]:size-4 [&>svg]:shrink-0',
-		interactive ? 'm-0 cursor-pointer hover:underline' : '',
-		badge.class,
-	]
-}
-
-function actionLabel(action: PageHeaderAction) {
-	return action.ariaLabel ?? action.tooltip ?? action.label
-}
-
-function dismissActionPrompt(action: PageHeaderAction) {
-	if (action.prompt?.shown) {
-		action.prompt.onDismiss?.()
-	}
-}
-
-function handleActionClick(action: PageHeaderAction, event?: MouseEvent) {
-	dismissActionPrompt(action)
-	void action.onClick?.(event)
-}
-
-function joinedActionColor(color?: ButtonColor) {
-	return color === 'medal-promo' ? 'standard' : color
-}
-</script>
diff --git a/packages/ui/src/components/base/index.ts b/packages/ui/src/components/base/index.ts
index 052c257df9..7bdbdbfd31 100644
--- a/packages/ui/src/components/base/index.ts
+++ b/packages/ui/src/components/base/index.ts
@@ -62,7 +62,15 @@ export { default as OptionGroup } from './OptionGroup.vue'
 export type { Option as OverflowMenuOption } from './OverflowMenu.vue'
 export { default as OverflowMenu } from './OverflowMenu.vue'
 export { default as Page } from './Page.vue'
-export { default as PageHeader } from './PageHeader.vue'
+export type {
+	PageHeaderAction,
+	PageHeaderActionPrompt,
+	PageHeaderBadge,
+	PageHeaderLeading,
+	PageHeaderMetadataItem,
+	PageHeaderProps,
+} from './page-header/types'
+export { default as PageHeader } from './page-header/index.vue'
 export { default as Pagination } from './Pagination.vue'
 export { default as PopoutMenu } from './PopoutMenu.vue'
 export { default as PreviewSelectButton } from './PreviewSelectButton.vue'
diff --git a/packages/ui/src/components/base/page-header/index.vue b/packages/ui/src/components/base/page-header/index.vue
new file mode 100644
index 0000000000..f6f6c18498
--- /dev/null
+++ b/packages/ui/src/components/base/page-header/index.vue
@@ -0,0 +1,82 @@
+<template>
+	<div class="flex flex-col gap-2" :class="rootClass">
+		<div class="flex flex-wrap items-start gap-4 max-md:flex-col" :class="rowClass">
+			<div class="flex min-w-0 flex-1 gap-4" :class="mainClass">
+				<PageHeaderLeading :items="leadingItems" />
+
+				<div class="flex min-w-0 flex-col justify-center gap-2">
+					<div class="flex flex-col justify-center gap-1.5">
+						<div class="flex flex-wrap items-center gap-2">
+							<h1
+								class="m-0 min-w-0 max-w-full text-2xl font-semibold leading-none text-contrast"
+								:class="titleClassValue"
+							>
+								{{ title }}
+							</h1>
+							<PageHeaderBadges :badges="badges" />
+						</div>
+						<p v-if="hasSummary" class="m-0 max-w-[44rem]" :class="summaryClass">
+							<slot name="summary">{{ summary }}</slot>
+						</p>
+					</div>
+
+					<PageHeaderMetadataList
+						v-if="metadata.length"
+						:items="metadata"
+						wrapper-class="flex flex-wrap gap-3 max-md:hidden"
+					/>
+				</div>
+			</div>
+
+			<PageHeaderActions :actions="actions" />
+		</div>
+
+		<div v-if="metadata.length" class="flex justify-between md:hidden">
+			<PageHeaderMetadataList :items="metadata" wrapper-class="flex flex-wrap gap-3" />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+
+import PageHeaderActions from './page-header-actions.vue'
+import PageHeaderBadges from './page-header-badges.vue'
+import PageHeaderLeading from './page-header-leading.vue'
+import PageHeaderMetadataList from './page-header-metadata-list.vue'
+import type { PageHeaderLeading as PageHeaderLeadingType, PageHeaderProps } from './types'
+
+const props = withDefaults(defineProps<PageHeaderProps>(), {
+	summary: null,
+	leading: null,
+	badges: () => [],
+	metadata: () => [],
+	actions: () => [],
+	headerClass: '',
+	rowClass: '',
+	mainClass: '',
+	titleClass: '',
+	truncateTitle: false,
+	divider: true,
+	bottomPadding: true,
+	disableLineClamp: false,
+})
+
+const slots = useSlots()
+
+const leadingItems = computed<PageHeaderLeadingType[]>(() => {
+	if (!props.leading) return []
+	return Array.isArray(props.leading) ? props.leading : [props.leading]
+})
+const rootClass = computed(() => [
+	props.divider ? 'border-0 border-b border-solid border-divider' : '',
+	props.bottomPadding ? 'pb-4' : '',
+	props.headerClass,
+])
+const titleClassValue = computed(() => [
+	props.truncateTitle ? 'truncate' : '',
+	props.titleClass,
+])
+const summaryClass = computed(() => (props.disableLineClamp ? '' : 'line-clamp-2'))
+const hasSummary = computed(() => !!props.summary || !!slots.summary)
+</script>
diff --git a/packages/ui/src/components/base/page-header/page-header-action-content.vue b/packages/ui/src/components/base/page-header/page-header-action-content.vue
new file mode 100644
index 0000000000..c8edf02ef2
--- /dev/null
+++ b/packages/ui/src/components/base/page-header/page-header-action-content.vue
@@ -0,0 +1,18 @@
+<template>
+	<component
+		:is="action.icon"
+		v-if="action.icon"
+		:class="action.iconClass"
+		aria-hidden="true"
+		v-bind="action.iconProps"
+	/>
+	<span v-if="!action.labelHidden && !action.circular">{{ action.label }}</span>
+</template>
+
+<script setup lang="ts">
+import type { PageHeaderAction } from './types'
+
+defineProps<{
+	action: PageHeaderAction
+}>()
+</script>
diff --git a/packages/ui/src/components/base/page-header/page-header-action-prompt-popper.vue b/packages/ui/src/components/base/page-header/page-header-action-prompt-popper.vue
new file mode 100644
index 0000000000..b38a185944
--- /dev/null
+++ b/packages/ui/src/components/base/page-header/page-header-action-prompt-popper.vue
@@ -0,0 +1,37 @@
+<template>
+	<div class="grid grid-cols-[min-content] gap-1">
+		<div class="flex min-w-48 items-center justify-between gap-8">
+			<h3 class="m-0 flex items-center gap-2 whitespace-nowrap text-base font-bold text-contrast">
+				{{ prompt.title }}
+				<span
+					v-if="prompt.badge"
+					class="inline-flex items-center rounded-full border border-solid border-brand-highlight bg-brand-highlight px-2 py-1 text-sm font-semibold leading-none text-brand"
+				>
+					{{ prompt.badge }}
+				</span>
+			</h3>
+			<ButtonStyled size="small" circular>
+				<button v-tooltip="prompt.dismissLabel" type="button" @click="prompt.onDismiss?.()">
+					<XIcon aria-hidden="true" />
+				</button>
+			</ButtonStyled>
+		</div>
+		<p class="m-0 text-wrap text-sm font-medium leading-tight text-secondary">
+			{{ prompt.description }}
+		</p>
+		<p v-if="prompt.footer" class="m-0 text-wrap text-sm font-bold text-primary">
+			{{ prompt.footer }}
+		</p>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { XIcon } from '@modrinth/assets'
+
+import ButtonStyled from '../ButtonStyled.vue'
+import type { PageHeaderActionPrompt } from './types'
+
+defineProps<{
+	prompt: PageHeaderActionPrompt
+}>()
+</script>
diff --git a/packages/ui/src/components/base/page-header/page-header-action-with-prompt.vue b/packages/ui/src/components/base/page-header/page-header-action-with-prompt.vue
new file mode 100644
index 0000000000..653131f51a
--- /dev/null
+++ b/packages/ui/src/components/base/page-header/page-header-action-with-prompt.vue
@@ -0,0 +1,32 @@
+<template>
+	<Tooltip
+		theme="dismissable-prompt"
+		:triggers="[]"
+		:shown="action.prompt?.shown"
+		:auto-hide="false"
+		:placement="action.prompt?.placement ?? 'bottom'"
+	>
+		<PageHeaderAction :action="action" @dismiss-prompt="dismissPrompt" />
+		<template v-if="action.prompt" #popper>
+			<PageHeaderActionPromptPopper :prompt="action.prompt" />
+		</template>
+	</Tooltip>
+</template>
+
+<script setup lang="ts">
+import { Tooltip } from 'floating-vue'
+
+import PageHeaderAction from './page-header-action.vue'
+import PageHeaderActionPromptPopper from './page-header-action-prompt-popper.vue'
+import type { PageHeaderAction as PageHeaderActionType } from './types'
+
+const props = defineProps<{
+	action: PageHeaderActionType
+}>()
+
+function dismissPrompt() {
+	if (props.action.prompt?.shown) {
+		props.action.prompt.onDismiss?.()
+	}
+}
+</script>
diff --git a/packages/ui/src/components/base/page-header/page-header-action.vue b/packages/ui/src/components/base/page-header/page-header-action.vue
new file mode 100644
index 0000000000..8d2eb16e0e
--- /dev/null
+++ b/packages/ui/src/components/base/page-header/page-header-action.vue
@@ -0,0 +1,90 @@
+<template>
+	<component
+		:is="action.component"
+		v-if="'kind' in action && action.kind === 'component'"
+		:class="action.class"
+		v-bind="action.componentProps"
+	/>
+	<JoinedButtons
+		v-else-if="'joinedActions' in action && action.joinedActions?.length"
+		:actions="joinedActions"
+		:color="joinedActionColor(action.color)"
+		:size="action.size ?? 'large'"
+		:disabled="action.disabled"
+		:primary-disabled="action.primaryDisabled"
+		:dropdown-disabled="action.dropdownDisabled"
+		:primary-muted="action.primaryMuted"
+	/>
+	<ButtonStyled
+		v-else
+		:color="action.color ?? 'standard'"
+		:size="action.size ?? 'large'"
+		:type="action.type ?? 'standard'"
+		:circular="action.circular ?? action.labelHidden ?? false"
+	>
+		<TeleportOverflowMenu
+			v-if="'menuActions' in action && action.menuActions?.length"
+			:options="action.menuActions"
+			:tooltip="action.tooltip"
+			:aria-label="actionLabel"
+			:disabled="action.disabled"
+			@open="emit('dismiss-prompt')"
+		>
+			<PageHeaderActionContent :action="action" />
+		</TeleportOverflowMenu>
+		<PageHeaderInteractiveWrapper
+			v-else
+			:to="'to' in action ? action.to : undefined"
+			clickable
+			:disabled="action.disabled"
+			:tooltip="action.tooltip"
+			:aria-label="actionLabel"
+			base-class=""
+			@click="handleClick"
+		>
+			<PageHeaderActionContent :action="action" />
+		</PageHeaderInteractiveWrapper>
+	</ButtonStyled>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import ButtonStyled from '../ButtonStyled.vue'
+import JoinedButtons, { type JoinedButtonAction } from '../JoinedButtons.vue'
+import TeleportOverflowMenu from '../TeleportOverflowMenu.vue'
+import PageHeaderActionContent from './page-header-action-content.vue'
+import PageHeaderInteractiveWrapper from './page-header-interactive-wrapper.vue'
+import type { ButtonColor, JoinedButtonColor, PageHeaderAction } from './types'
+
+const props = defineProps<{
+	action: PageHeaderAction
+}>()
+
+const emit = defineEmits<{
+	'dismiss-prompt': []
+}>()
+
+const actionLabel = computed(() => props.action.ariaLabel ?? props.action.tooltip ?? props.action.label)
+
+const joinedActions = computed<JoinedButtonAction[]>(() => {
+	if (!('joinedActions' in props.action)) return []
+
+	return props.action.joinedActions.map((joinedAction) => ({
+		...joinedAction,
+		action: () => {
+			emit('dismiss-prompt')
+			joinedAction.action()
+		},
+	}))
+})
+
+function handleClick(event: MouseEvent) {
+	emit('dismiss-prompt')
+	void props.action.onClick?.(event)
+}
+
+function joinedActionColor(color?: ButtonColor): JoinedButtonColor | undefined {
+	return color === 'medal-promo' ? 'standard' : color
+}
+</script>
diff --git a/packages/ui/src/components/base/page-header/page-header-actions.vue b/packages/ui/src/components/base/page-header/page-header-actions.vue
new file mode 100644
index 0000000000..c2fe7e17ed
--- /dev/null
+++ b/packages/ui/src/components/base/page-header/page-header-actions.vue
@@ -0,0 +1,18 @@
+<template>
+	<div v-if="actions.length" class="flex flex-wrap items-center gap-2">
+		<template v-for="action in actions" :key="action.id">
+			<PageHeaderActionWithPrompt v-if="action.prompt" :action="action" />
+			<PageHeaderAction v-else :action="action" />
+		</template>
+	</div>
+</template>
+
+<script setup lang="ts">
+import PageHeaderAction from './page-header-action.vue'
+import PageHeaderActionWithPrompt from './page-header-action-with-prompt.vue'
+import type { PageHeaderAction as PageHeaderActionType } from './types'
+
+defineProps<{
+	actions: PageHeaderActionType[]
+}>()
+</script>
diff --git a/packages/ui/src/components/base/page-header/page-header-badge-content.vue b/packages/ui/src/components/base/page-header/page-header-badge-content.vue
new file mode 100644
index 0000000000..563f8b96a5
--- /dev/null
+++ b/packages/ui/src/components/base/page-header/page-header-badge-content.vue
@@ -0,0 +1,12 @@
+<template>
+	<component :is="badge.icon" v-if="badge.icon" aria-hidden="true" v-bind="badge.iconProps" />
+	<span v-if="badge.label">{{ badge.label }}</span>
+</template>
+
+<script setup lang="ts">
+import type { PageHeaderBadgeContent } from './types'
+
+defineProps<{
+	badge: PageHeaderBadgeContent
+}>()
+</script>
diff --git a/packages/ui/src/components/base/page-header/page-header-badges.vue b/packages/ui/src/components/base/page-header/page-header-badges.vue
new file mode 100644
index 0000000000..bfd577b088
--- /dev/null
+++ b/packages/ui/src/components/base/page-header/page-header-badges.vue
@@ -0,0 +1,46 @@
+<template>
+	<template v-for="badge in badges" :key="badge.id">
+		<component
+			:is="badge.component"
+			v-if="badge.type === 'component'"
+			:class="badge.class"
+			v-bind="badge.componentProps"
+		/>
+		<PageHeaderInteractiveWrapper
+			v-else
+			:to="badge.to"
+			:clickable="!!badge.onClick"
+			:disabled="badge.disabled"
+			:tooltip="badge.tooltip"
+			:aria-label="badgeLabel(badge)"
+			:base-class="badgeClass(badge)"
+			:interactive-class="interactiveBadgeClass"
+			:style="badge.style"
+			@click="(event) => badge.onClick?.(event)"
+		>
+			<PageHeaderBadgeContent :badge="badge" />
+		</PageHeaderInteractiveWrapper>
+	</template>
+</template>
+
+<script setup lang="ts">
+import PageHeaderInteractiveWrapper from './page-header-interactive-wrapper.vue'
+import PageHeaderBadgeContent from './page-header-badge-content.vue'
+import type { PageHeaderBadgeContent as PageHeaderBadgeContentType, PageHeaderBadge } from './types'
+
+defineProps<{
+	badges: PageHeaderBadge[]
+}>()
+
+const baseBadgeClass =
+	'inline-flex items-center gap-1 rounded-full border border-solid border-surface-5 bg-button-bg px-2 py-1 text-sm font-semibold leading-none text-secondary text-nowrap [&>svg]:size-4 [&>svg]:shrink-0'
+const interactiveBadgeClass = 'm-0 cursor-pointer hover:underline'
+
+function badgeClass(badge: PageHeaderBadgeContentType) {
+	return [baseBadgeClass, badge.class]
+}
+
+function badgeLabel(badge: PageHeaderBadgeContentType) {
+	return badge.ariaLabel ?? badge.label ?? badge.tooltip
+}
+</script>
diff --git a/packages/ui/src/components/base/page-header/page-header-interactive-wrapper.vue b/packages/ui/src/components/base/page-header/page-header-interactive-wrapper.vue
new file mode 100644
index 0000000000..f02fa28310
--- /dev/null
+++ b/packages/ui/src/components/base/page-header/page-header-interactive-wrapper.vue
@@ -0,0 +1,74 @@
+<template>
+	<AutoLink
+		v-if="to && !disabled"
+		v-tooltip="tooltip"
+		:to="to"
+		:aria-label="ariaLabel"
+		:class="resolvedClass"
+		:style="style"
+		@click="emit('click', $event)"
+	>
+		<slot />
+	</AutoLink>
+	<button
+		v-else-if="isInteractive"
+		v-tooltip="tooltip"
+		type="button"
+		:disabled="disabled"
+		:aria-label="ariaLabel"
+		:class="resolvedClass"
+		:style="style"
+		@click="emit('click', $event)"
+	>
+		<slot />
+	</button>
+	<div v-else v-tooltip="tooltip" :class="resolvedClass" :style="style">
+		<slot />
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { StyleValue } from 'vue'
+import { computed } from 'vue'
+
+import AutoLink from '../AutoLink.vue'
+import type { PageHeaderClass, PageHeaderTarget } from './types'
+
+const props = withDefaults(
+	defineProps<{
+		to?: PageHeaderTarget
+		clickable?: boolean
+		disabled?: boolean
+		tooltip?: string
+		ariaLabel?: string
+		baseClass: PageHeaderClass
+		interactiveClass?: PageHeaderClass
+		passiveClass?: PageHeaderClass
+		disabledClass?: PageHeaderClass
+		style?: StyleValue
+	}>(),
+	{
+		to: undefined,
+		clickable: false,
+		disabled: false,
+		tooltip: undefined,
+		ariaLabel: undefined,
+		interactiveClass: undefined,
+		passiveClass: undefined,
+		disabledClass: 'cursor-not-allowed opacity-60',
+		style: undefined,
+	},
+)
+
+const emit = defineEmits<{
+	click: [event: MouseEvent]
+}>()
+
+const isInteractive = computed(() => !!props.to || props.clickable || props.disabled)
+
+const resolvedClass = computed(() => [
+	props.baseClass,
+	isInteractive.value ? props.interactiveClass : props.passiveClass,
+	props.disabled ? props.disabledClass : '',
+])
+</script>
diff --git a/packages/ui/src/components/base/page-header/page-header-leading.vue b/packages/ui/src/components/base/page-header/page-header-leading.vue
new file mode 100644
index 0000000000..23ba6d5c0b
--- /dev/null
+++ b/packages/ui/src/components/base/page-header/page-header-leading.vue
@@ -0,0 +1,66 @@
+<template>
+	<div v-if="items.length" class="flex shrink-0 items-center gap-4">
+		<template v-for="(item, index) in items" :key="item.id ?? index">
+			<div v-if="item.type === 'button'" :class="item.wrapperClass ?? defaultButtonWrapperClass">
+				<ButtonStyled
+					circular
+					:color="item.color ?? 'standard'"
+					:size="item.size ?? 'large'"
+					:type="item.buttonType ?? 'standard'"
+				>
+					<PageHeaderInteractiveWrapper
+						:to="item.to"
+						:clickable="!!item.onClick"
+						:disabled="item.disabled"
+						:tooltip="item.tooltip"
+						:aria-label="leadingLabel(item)"
+						base-class=""
+						@click="(event) => item.onClick?.(event)"
+					>
+						<component
+							:is="item.icon"
+							v-if="item.icon"
+							aria-hidden="true"
+							v-bind="item.iconProps"
+						/>
+					</PageHeaderInteractiveWrapper>
+				</ButtonStyled>
+			</div>
+			<Avatar
+				v-else-if="item.type === 'avatar'"
+				:src="item.src"
+				:alt="item.alt ?? ''"
+				:size="item.avatarSize ?? '64px'"
+				:tint-by="item.tintBy ?? null"
+				:circle="item.circle ?? false"
+				:no-shadow="item.noShadow ?? false"
+				:raised="item.raised ?? false"
+				:loading="item.loading ?? 'eager'"
+				:class="item.class"
+			/>
+			<component
+				:is="item.component"
+				v-else
+				:class="item.class"
+				v-bind="item.componentProps"
+			/>
+		</template>
+	</div>
+</template>
+
+<script setup lang="ts">
+import Avatar from '../Avatar.vue'
+import ButtonStyled from '../ButtonStyled.vue'
+import PageHeaderInteractiveWrapper from './page-header-interactive-wrapper.vue'
+import type { PageHeaderButtonLeading, PageHeaderLeading } from './types'
+
+defineProps<{
+	items: PageHeaderLeading[]
+}>()
+
+const defaultButtonWrapperClass = 'flex size-16 shrink-0 items-center justify-center'
+
+function leadingLabel(item: PageHeaderButtonLeading) {
+	return item.ariaLabel ?? item.tooltip ?? 'Header action'
+}
+</script>
diff --git a/packages/ui/src/components/base/page-header/page-header-metadata-item-content.vue b/packages/ui/src/components/base/page-header/page-header-metadata-item-content.vue
new file mode 100644
index 0000000000..778e8ee5ae
--- /dev/null
+++ b/packages/ui/src/components/base/page-header/page-header-metadata-item-content.vue
@@ -0,0 +1,42 @@
+<template>
+	<component
+		:is="item.icon"
+		v-if="item.icon"
+		class="flex size-5 shrink-0 text-current"
+		aria-hidden="true"
+		v-bind="item.iconProps"
+	/>
+	<Avatar
+		v-if="item.avatarSrc"
+		:src="item.avatarSrc"
+		:alt="item.avatarAlt ?? ''"
+		:size="item.avatarSize ?? '24px'"
+		:tint-by="item.avatarTintBy ?? null"
+		:circle="item.avatarCircle ?? false"
+		:no-shadow="item.avatarNoShadow ?? false"
+		:raised="item.avatarRaised ?? false"
+	/>
+	<span v-if="item.label" :class="['truncate', item.labelClass]">
+		{{ item.label }}
+	</span>
+	<span v-if="item.value !== undefined && item.value !== null" :class="['truncate', item.valueClass]">
+		{{ item.value }}
+	</span>
+	<div v-if="item.tags?.length" class="flex flex-wrap gap-2">
+		<TagItem v-for="tag in item.tags" :key="tag.id" :action="tag.onClick">
+			<FormattedTag v-if="tag.tag" :tag="tag.tag" />
+			<span v-else>{{ tag.label }}</span>
+		</TagItem>
+	</div>
+</template>
+
+<script setup lang="ts">
+import Avatar from '../Avatar.vue'
+import FormattedTag from '../FormattedTag.vue'
+import TagItem from '../TagItem.vue'
+import type { PageHeaderMetadataContentItem } from './types'
+
+defineProps<{
+	item: PageHeaderMetadataContentItem
+}>()
+</script>
diff --git a/packages/ui/src/components/base/page-header/page-header-metadata-list.vue b/packages/ui/src/components/base/page-header/page-header-metadata-list.vue
new file mode 100644
index 0000000000..f9f5b76845
--- /dev/null
+++ b/packages/ui/src/components/base/page-header/page-header-metadata-list.vue
@@ -0,0 +1,55 @@
+<template>
+	<div :class="wrapperClass">
+		<div class="flex min-w-0 flex-wrap items-center gap-2">
+			<template v-for="(item, index) in items" :key="item.id">
+				<BulletDivider v-if="index > 0" class="shrink-0" />
+				<component
+					:is="item.component"
+					v-if="item.type === 'component'"
+					:class="item.class"
+					v-bind="item.componentProps"
+				/>
+				<PageHeaderInteractiveWrapper
+					v-else
+					:to="item.to"
+					:clickable="!!item.onClick"
+					:disabled="item.disabled"
+					:tooltip="item.tooltip"
+					:aria-label="metadataLabel(item)"
+					:base-class="metadataClass(item)"
+					:interactive-class="interactiveMetadataClass"
+					@click="(event) => item.onClick?.(event)"
+				>
+					<PageHeaderMetadataItemContent :item="item" />
+				</PageHeaderInteractiveWrapper>
+			</template>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import BulletDivider from '../BulletDivider.vue'
+import PageHeaderInteractiveWrapper from './page-header-interactive-wrapper.vue'
+import PageHeaderMetadataItemContent from './page-header-metadata-item-content.vue'
+import type {
+	PageHeaderClass,
+	PageHeaderMetadataContentItem,
+	PageHeaderMetadataItem,
+} from './types'
+
+defineProps<{
+	items: PageHeaderMetadataItem[]
+	wrapperClass?: PageHeaderClass
+}>()
+
+const baseMetadataClass = 'flex min-w-0 items-center gap-2 font-medium text-secondary text-nowrap'
+const interactiveMetadataClass = 'm-0 cursor-pointer border-0 bg-transparent p-0 hover:underline'
+
+function metadataClass(item: PageHeaderMetadataContentItem) {
+	return [baseMetadataClass, item.class]
+}
+
+function metadataLabel(item: PageHeaderMetadataContentItem) {
+	return item.ariaLabel ?? item.label ?? undefined
+}
+</script>
diff --git a/packages/ui/src/components/base/page-header/types.ts b/packages/ui/src/components/base/page-header/types.ts
new file mode 100644
index 0000000000..1a105ec814
--- /dev/null
+++ b/packages/ui/src/components/base/page-header/types.ts
@@ -0,0 +1,260 @@
+import type { Component, HTMLAttributes, StyleValue } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+
+import type { JoinedButtonAction } from '../JoinedButtons.vue'
+import type { Item as TeleportOverflowMenuItem } from '../TeleportOverflowMenu.vue'
+
+export type PageHeaderTarget = string | RouteLocationRaw
+export type PageHeaderClass = HTMLAttributes['class']
+
+export type ButtonColor =
+	| 'standard'
+	| 'brand'
+	| 'red'
+	| 'orange'
+	| 'green'
+	| 'blue'
+	| 'purple'
+	| 'medal-promo'
+export type JoinedButtonColor = Exclude<ButtonColor, 'medal-promo'>
+export type ButtonSize = 'standard' | 'large' | 'small'
+export type ButtonType =
+	| 'standard'
+	| 'outlined'
+	| 'transparent'
+	| 'highlight'
+	| 'highlight-colored-text'
+	| 'chip'
+
+export type FloatingPlacement =
+	| 'auto'
+	| 'auto-start'
+	| 'auto-end'
+	| 'top'
+	| 'top-start'
+	| 'top-end'
+	| 'right'
+	| 'right-start'
+	| 'right-end'
+	| 'bottom'
+	| 'bottom-start'
+	| 'bottom-end'
+	| 'left'
+	| 'left-start'
+	| 'left-end'
+
+export type PageHeaderClickHandler = (event: MouseEvent) => void | Promise<void>
+
+type ComponentEscapeHatch = {
+	component: Component
+	componentProps?: Record<string, unknown>
+	class?: PageHeaderClass
+}
+
+export type PageHeaderAvatarLeading = {
+	id?: string
+	type: 'avatar'
+	src?: string | null
+	alt?: string
+	tintBy?: string | null
+	avatarSize?: string
+	circle?: boolean
+	noShadow?: boolean
+	raised?: boolean
+	loading?: 'eager' | 'lazy'
+	class?: PageHeaderClass
+}
+
+type PageHeaderButtonLeadingBase = {
+	id?: string
+	type: 'button'
+	icon?: Component
+	iconProps?: Record<string, unknown>
+	wrapperClass?: PageHeaderClass
+	tooltip?: string
+	ariaLabel?: string
+	color?: ButtonColor
+	size?: ButtonSize
+	buttonType?: ButtonType
+	disabled?: boolean
+}
+
+export type PageHeaderButtonLeading =
+	| (PageHeaderButtonLeadingBase & {
+			to: PageHeaderTarget
+			onClick?: never
+	  })
+	| (PageHeaderButtonLeadingBase & {
+			to?: never
+			onClick: PageHeaderClickHandler
+	  })
+
+export type PageHeaderComponentLeading = {
+	id?: string
+	type: 'component'
+} & ComponentEscapeHatch
+
+export type PageHeaderLeading =
+	| PageHeaderAvatarLeading
+	| PageHeaderButtonLeading
+	| PageHeaderComponentLeading
+
+export type PageHeaderBadgeComponent = {
+	id: string
+	type: 'component'
+} & ComponentEscapeHatch
+
+export type PageHeaderBadgeContent = {
+	id: string
+	type?: 'badge'
+	label?: string
+	icon?: Component
+	iconProps?: Record<string, unknown>
+	tooltip?: string
+	ariaLabel?: string
+	to?: PageHeaderTarget
+	onClick?: PageHeaderClickHandler
+	disabled?: boolean
+	class?: PageHeaderClass
+	style?: StyleValue
+}
+
+export type PageHeaderBadge = PageHeaderBadgeComponent | PageHeaderBadgeContent
+
+export type PageHeaderMetadataTag = {
+	id: string
+	tag?: string
+	label?: string
+	onClick?: PageHeaderClickHandler
+}
+
+export type PageHeaderMetadataComponentItem = {
+	id: string
+	type: 'component'
+} & ComponentEscapeHatch
+
+export type PageHeaderMetadataContentItem = {
+	id: string
+	type?: 'text'
+	label?: string
+	value?: string | number | null
+	icon?: Component
+	iconProps?: Record<string, unknown>
+	avatarSrc?: string | null
+	avatarAlt?: string
+	avatarSize?: string
+	avatarTintBy?: string | null
+	avatarCircle?: boolean
+	avatarNoShadow?: boolean
+	avatarRaised?: boolean
+	tags?: PageHeaderMetadataTag[]
+	tooltip?: string
+	ariaLabel?: string
+	to?: PageHeaderTarget
+	onClick?: PageHeaderClickHandler
+	disabled?: boolean
+	class?: PageHeaderClass
+	labelClass?: PageHeaderClass
+	valueClass?: PageHeaderClass
+}
+
+export type PageHeaderMetadataItem =
+	| PageHeaderMetadataComponentItem
+	| PageHeaderMetadataContentItem
+
+export type PageHeaderActionPrompt = {
+	title: string
+	description: string
+	badge?: string
+	footer?: string
+	dismissLabel?: string
+	shown?: boolean
+	placement?: FloatingPlacement
+	onDismiss?: () => void
+}
+
+type PageHeaderActionBase = {
+	id: string
+	label: string
+	icon?: Component
+	iconProps?: Record<string, unknown>
+	iconClass?: PageHeaderClass
+	tooltip?: string
+	ariaLabel?: string
+	onClick?: PageHeaderClickHandler
+	disabled?: boolean
+	labelHidden?: boolean
+	circular?: boolean
+	color?: ButtonColor
+	size?: ButtonSize
+	type?: ButtonType
+	prompt?: PageHeaderActionPrompt
+}
+
+export type PageHeaderComponentAction = PageHeaderActionBase &
+	ComponentEscapeHatch & {
+		kind: 'component'
+	}
+
+export type PageHeaderJoinedAction = PageHeaderActionBase & {
+	joinedActions: JoinedButtonAction[]
+	primaryDisabled?: boolean
+	dropdownDisabled?: boolean
+	primaryMuted?: boolean
+	kind?: never
+	component?: never
+	componentProps?: never
+	menuActions?: never
+	to?: never
+}
+
+export type PageHeaderMenuAction = PageHeaderActionBase & {
+	menuActions: TeleportOverflowMenuItem[]
+	kind?: never
+	component?: never
+	componentProps?: never
+	joinedActions?: never
+	to?: never
+}
+
+export type PageHeaderLinkAction = PageHeaderActionBase & {
+	to?: PageHeaderTarget
+	kind?: never
+	component?: never
+	componentProps?: never
+	joinedActions?: never
+	menuActions?: never
+}
+
+export type PageHeaderButtonAction = PageHeaderActionBase & {
+	kind?: never
+	component?: never
+	componentProps?: never
+	joinedActions?: never
+	menuActions?: never
+	to?: never
+}
+
+export type PageHeaderAction =
+	| PageHeaderComponentAction
+	| PageHeaderJoinedAction
+	| PageHeaderMenuAction
+	| PageHeaderLinkAction
+	| PageHeaderButtonAction
+
+export type PageHeaderProps = {
+	title: string
+	summary?: string | null
+	leading?: PageHeaderLeading | PageHeaderLeading[] | null
+	badges?: PageHeaderBadge[]
+	metadata?: PageHeaderMetadataItem[]
+	actions?: PageHeaderAction[]
+	headerClass?: PageHeaderClass
+	rowClass?: PageHeaderClass
+	mainClass?: PageHeaderClass
+	titleClass?: PageHeaderClass
+	truncateTitle?: boolean
+	divider?: boolean
+	bottomPadding?: boolean
+	disableLineClamp?: boolean
+}
diff --git a/packages/ui/src/components/project/ProjectHeader.vue b/packages/ui/src/components/project/ProjectHeader.vue
deleted file mode 100644
index 7a76a26dbc..0000000000
--- a/packages/ui/src/components/project/ProjectHeader.vue
+++ /dev/null
@@ -1,180 +0,0 @@
-<template>
-	<PageHeader
-		:header="project.title"
-		:summary="project.description"
-		:leading="leadingItem"
-		:badges="headerBadges"
-		:metadata="headerMetadata"
-		:actions="actions"
-		:disable-line-clamp="disableLineClamp"
-	>
-		<template #metadata-project-stats>
-			<div class="flex items-center gap-3 flex-wrap gap-y-0">
-				<template v-if="isServerProject">
-					<ServerDetails
-						v-if="projectV3?.status !== 'draft'"
-						:online-players="playersOnline"
-						:status-online="statusOnline"
-						:recent-plays="javaServer?.verified_plays_2w ?? 0"
-					/>
-				</template>
-				<template v-else>
-					<div
-						v-tooltip="
-							capitalizeString(
-								formatMessage(commonMessages.projectDownloads, {
-									count: project.downloads,
-								}),
-							)
-						"
-						class="flex items-center gap-2 font-semibold cursor-help"
-					>
-						<DownloadIcon class="h-6 w-6 text-secondary" />
-						{{ formatCompactNumber(project.downloads) }}
-					</div>
-					<div
-						v-tooltip="
-							capitalizeString(
-								formatMessage(commonMessages.projectFollowers, {
-									count: project.followers,
-								}),
-							)
-						"
-						class="flex items-center gap-2 cursor-help"
-						:class="{ 'md:border-r': project.categories.length > 0 }"
-					>
-						<HeartIcon class="h-6 w-6 text-secondary" />
-						<span class="font-semibold">
-							{{ formatCompactNumber(project.followers) }}
-						</span>
-					</div>
-				</template>
-				<div v-if="project.categories.length > 0" class="hidden items-center gap-2 md:flex">
-					<div class="flex flex-wrap gap-2">
-						<TagItem
-							v-for="(category, index) in project.categories"
-							:key="index"
-							:action="() => router.push(`${searchUrl}?f=categories:${category}`)"
-						>
-							<FormattedTag :tag="category" />
-						</TagItem>
-					</div>
-				</div>
-			</div>
-		</template>
-	</PageHeader>
-</template>
-<script setup lang="ts">
-import type { Labrinth } from '@modrinth/api-client'
-import { DownloadIcon, HeartIcon } from '@modrinth/assets'
-import { capitalizeString, type Project } from '@modrinth/utils'
-import type { Component } from 'vue'
-import { computed } from 'vue'
-import type { RouteLocationRaw } from 'vue-router'
-import { useRouter } from 'vue-router'
-
-import { useCompactNumber, useVIntl } from '../../composables'
-import { commonMessages } from '../../utils'
-import FormattedTag from '../base/FormattedTag.vue'
-import type { JoinedButtonAction } from '../base/JoinedButtons.vue'
-import PageHeader from '../base/PageHeader.vue'
-import TagItem from '../base/TagItem.vue'
-import type { Item as TeleportOverflowMenuItem } from '../base/TeleportOverflowMenu.vue'
-import ProjectStatusBadge from './ProjectStatusBadge.vue'
-import ServerDetails from './server/ServerDetails.vue'
-
-const router = useRouter()
-const { formatMessage } = useVIntl()
-const { formatCompactNumber } = useCompactNumber()
-
-type HeaderAction = {
-	id: string
-	label: string
-	component?: Component
-	componentProps?: Record<string, unknown>
-	class?: string
-	icon?: Component
-	iconProps?: Record<string, unknown>
-	iconClass?: string
-	tooltip?: string
-	ariaLabel?: string
-	to?: string | RouteLocationRaw
-	onClick?: (event?: MouseEvent) => void | Promise<void>
-	disabled?: boolean
-	labelHidden?: boolean
-	circular?: boolean
-	color?: 'standard' | 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple' | 'medal-promo'
-	size?: 'standard' | 'large' | 'small'
-	type?: 'standard' | 'outlined' | 'transparent' | 'highlight' | 'highlight-colored-text' | 'chip'
-	joinedActions?: JoinedButtonAction[]
-	menuActions?: TeleportOverflowMenuItem[]
-	primaryDisabled?: boolean
-	dropdownDisabled?: boolean
-	primaryMuted?: boolean
-	prompt?: {
-		title: string
-		description: string
-		badge?: string
-		footer?: string
-		dismissLabel?: string
-		shown?: boolean
-		placement?: string
-		onDismiss?: () => void
-	}
-}
-
-const props = withDefaults(
-	defineProps<{
-		project: Project
-		member?: boolean
-		projectV3?: Labrinth.Projects.v3.Project | null
-		ping?: number
-		actions?: HeaderAction[]
-		disableLineClamp?: boolean
-	}>(),
-	{
-		member: false,
-		actions: () => [],
-		disableLineClamp: false,
-	},
-)
-
-const leadingItem = computed(() => ({
-	type: 'avatar' as const,
-	src: props.project.icon_url,
-	alt: props.project.title,
-	avatarSize: '96px',
-}))
-
-const headerBadges = computed(() =>
-	props.member || props.project.status !== 'approved'
-		? [
-				{
-					id: 'status',
-					component: ProjectStatusBadge,
-					componentProps: {
-						status: props.project.status,
-					},
-				},
-			]
-		: [],
-)
-
-const headerMetadata = [
-	{
-		id: 'project-stats',
-		type: 'custom' as const,
-		class: 'contents',
-	},
-]
-
-const searchUrl = computed(
-	() => `/discover/${isServerProject.value ? 'servers' : `${props.project.project_type}s`}`,
-)
-
-const isServerProject = computed(() => !!props.projectV3?.minecraft_server)
-const javaServer = computed(() => props.projectV3?.minecraft_java_server)
-const javaServerPingData = computed(() => props.projectV3?.minecraft_java_server?.ping?.data)
-const playersOnline = computed(() => javaServerPingData.value?.players_online ?? 0)
-const statusOnline = computed(() => !!javaServerPingData.value)
-</script>
diff --git a/packages/ui/src/components/project/index.ts b/packages/ui/src/components/project/index.ts
index 46cc74f73b..66beaf6c8e 100644
--- a/packages/ui/src/components/project/index.ts
+++ b/packages/ui/src/components/project/index.ts
@@ -6,7 +6,6 @@ export { default as ProjectCard } from './card/ProjectCard.vue'
 export { default as ProjectBackgroundGradient } from './ProjectBackgroundGradient.vue'
 export { default as ProjectCardList } from './ProjectCardList.vue'
 export { default as ProjectCombobox } from './ProjectCombobox.vue'
-export { default as ProjectHeader } from './ProjectHeader.vue'
 export { default as ProjectPageDescription } from './ProjectPageDescription.vue'
 export { default as ProjectPageVersions } from './ProjectPageVersions.vue'
 export { default as ProjectSidebarCompatibility } from './ProjectSidebarCompatibility.vue'
diff --git a/packages/ui/src/components/servers/server-header/PanelServerOverflowMenu.vue b/packages/ui/src/components/servers/server-header/PanelServerOverflowMenu.vue
deleted file mode 100644
index a05c6a8db2..0000000000
--- a/packages/ui/src/components/servers/server-header/PanelServerOverflowMenu.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-	<div class="contents">
-		<ButtonStyled circular type="transparent" size="large">
-			<TeleportOverflowMenu :options="menuOptions">
-				<MoreVerticalIcon aria-hidden="true" />
-				<template #allServers>
-					<ServerIcon class="h-5 w-5" />
-					<span>All servers</span>
-				</template>
-				<template #copy-id>
-					<ClipboardCopyIcon class="h-5 w-5" aria-hidden="true" />
-					<span>Copy ID</span>
-				</template>
-			</TeleportOverflowMenu>
-		</ButtonStyled>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { ClipboardCopyIcon, MoreVerticalIcon, ServerIcon } from '@modrinth/assets'
-import { computed } from 'vue'
-import { useRouter } from 'vue-router'
-
-import { ButtonStyled } from '#ui/components'
-import TeleportOverflowMenu from '#ui/components/base/TeleportOverflowMenu.vue'
-import { injectModrinthServerContext } from '#ui/providers'
-
-const props = withDefaults(
-	defineProps<{
-		disabled?: boolean
-		showCopyIdAction?: boolean
-		showDebugInfo?: boolean
-		uptimeSeconds?: number
-	}>(),
-	{
-		disabled: false,
-		showCopyIdAction: false,
-		showDebugInfo: false,
-		uptimeSeconds: 0,
-	},
-)
-
-const router = useRouter()
-const { serverId } = injectModrinthServerContext()
-
-const menuOptions = computed(() => [
-	{
-		id: 'allServers',
-		label: 'All servers',
-		icon: ServerIcon,
-		action: () => router.push('/hosting/manage'),
-	},
-	{
-		id: 'copy-id',
-		label: 'Copy ID',
-		icon: ClipboardCopyIcon,
-		action: () => copyId(),
-		shown: props.showCopyIdAction,
-	},
-])
-
-async function copyId() {
-	await navigator.clipboard.writeText(serverId)
-}
-</script>
diff --git a/packages/ui/src/components/servers/server-header/ServerManageHeader.vue b/packages/ui/src/components/servers/server-header/ServerManageHeader.vue
deleted file mode 100644
index ec6391932b..0000000000
--- a/packages/ui/src/components/servers/server-header/ServerManageHeader.vue
+++ /dev/null
@@ -1,198 +0,0 @@
-<template>
-	<div class="w-full flex flex-col gap-4" :class="{ 'mt-4': isNuxt }">
-		<PageHeader
-			:header="props.server?.name || 'Server'"
-			:leading="leadingItems"
-			:metadata="headerMetadata"
-			:header-class="props.headerClass"
-		>
-			<template #metadata-server-stats>
-				<div
-					v-if="props.server?.flows?.intro"
-					class="flex items-center gap-2 font-semibold text-secondary"
-				>
-					<SettingsIcon />
-					Configuring server...
-				</div>
-				<div v-else class="flex flex-wrap items-center gap-2">
-					<div v-if="props.server?.loader" class="flex items-center gap-2 font-medium">
-						<LoaderIcon :loader="props.server.loader" class="flex shrink-0 [&&]:size-5" />
-						{{ formatLoaderLabel(props.server.loader) }} {{ props.server.mc_version }}
-					</div>
-
-					<div
-						v-if="
-							props.server?.loader &&
-							props.server?.net?.domain &&
-							!userPreferences.hideSubdomainLabel
-						"
-						class="h-1.5 w-1.5 rounded-full bg-surface-5"
-					/>
-
-					<div
-						v-if="props.server?.net?.domain && !userPreferences.hideSubdomainLabel"
-						v-tooltip="'Copy server address'"
-						class="flex cursor-pointer items-center gap-2 font-medium hover:underline text-nowrap"
-						@click="copyServerAddress"
-					>
-						<LinkIcon class="flex size-5 shrink-0" />
-						{{ props.server.net.domain }}.modrinth.gg
-					</div>
-
-					<div v-if="showUptime" class="h-1.5 w-1.5 rounded-full bg-surface-5" />
-
-					<div v-if="showUptime" class="flex items-center gap-2 font-medium">
-						<TimerIcon class="flex size-5 shrink-0" />
-						{{ formattedUptime }}
-					</div>
-
-					<div
-						v-if="showProject && (props.server?.loader || props.server?.net?.domain || showUptime)"
-						class="h-1.5 w-1.5 rounded-full bg-surface-5"
-					/>
-
-					<div
-						v-if="showProject"
-						class="flex items-center gap-1.5 font-medium text-primary text-nowrap"
-					>
-						Linked to
-						<Avatar
-							:src="props.serverProject?.icon_url ?? undefined"
-							:alt="props.serverProject?.title ?? ''"
-							size="24px"
-						/>
-						<AutoLink :to="serverProjectLink" class="truncate text-primary hover:underline">
-							{{ props.serverProject?.title }}
-						</AutoLink>
-					</div>
-				</div>
-			</template>
-			<template #actions>
-				<slot name="actions" />
-			</template>
-		</PageHeader>
-	</div>
-</template>
-
-<script setup lang="ts">
-import type { Archon } from '@modrinth/api-client'
-import { NuxtModrinthClient } from '@modrinth/api-client'
-import { LinkIcon, SettingsIcon, TimerIcon } from '@modrinth/assets'
-import { useStorage } from '@vueuse/core'
-import { computed } from 'vue'
-
-import { AutoLink, Avatar, PageHeader, ServerIcon } from '#ui/components'
-import {
-	injectModrinthClient,
-	injectModrinthServerContext,
-	injectNotificationManager,
-} from '#ui/providers'
-import { formatLoaderLabel } from '#ui/utils/loaders'
-
-import LoaderIcon from '../icons/LoaderIcon.vue'
-
-type ServerProjectSummary = {
-	id: string
-	slug?: string | null
-	title: string
-	icon_url?: string | null
-}
-
-const props = withDefaults(
-	defineProps<{
-		server: Archon.Servers.v0.Server | null | undefined
-		serverImage?: string | null
-		serverProject?: ServerProjectSummary | null
-		serverProjectLink?: string
-		uptimeSeconds?: number
-		showUptime?: boolean
-		backHref?: string
-		breadcrumbClass?: string
-		headerClass?: string
-	}>(),
-	{
-		serverImage: null,
-		serverProject: null,
-		serverProjectLink: '',
-		uptimeSeconds: 0,
-		showUptime: true,
-		backHref: '/hosting/manage',
-		breadcrumbClass: 'breadcrumb goto-link flex w-fit items-center',
-		headerClass: '',
-	},
-)
-
-const client = injectModrinthClient()
-const { addNotification } = injectNotificationManager()
-const { serverId } = injectModrinthServerContext()
-const isNuxt = computed(() => client instanceof NuxtModrinthClient)
-
-const userPreferences = useStorage(`pyro-server-${serverId}-preferences`, {
-	hideSubdomainLabel: false,
-})
-
-const headerImage = computed(() => {
-	if (props.server?.is_medal) {
-		return 'https://cdn-raw.modrinth.com/medal_icon.webp'
-	}
-	return props.serverImage ?? undefined
-})
-
-const leadingItems = computed(() => [
-	{
-		id: 'server-icon',
-		type: 'component' as const,
-		component: ServerIcon,
-		componentProps: {
-			image: headerImage.value,
-		},
-		class: isNuxt.value ? 'size-20 !rounded-2xl' : 'size-16 !rounded-xl',
-	},
-])
-
-const headerMetadata = [
-	{
-		id: 'server-stats',
-		type: 'custom' as const,
-		class: 'contents',
-	},
-]
-
-const showUptime = computed(() => props.showUptime && (props.uptimeSeconds ?? 0) > 0)
-
-const formattedUptime = computed(() => {
-	const uptime = props.uptimeSeconds ?? 0
-	const days = Math.floor(uptime / (24 * 3600))
-	const hours = Math.floor((uptime % (24 * 3600)) / 3600)
-	const minutes = Math.floor((uptime % 3600) / 60)
-	const seconds = uptime % 60
-
-	let formatted = ''
-	if (days > 0) formatted += `${days}d `
-	if (hours > 0 || days > 0) formatted += `${hours}h `
-	formatted += `${minutes}m ${seconds}s`
-	return formatted.trim()
-})
-
-const showProject = computed(() => !!props.serverProject)
-
-const serverProjectLink = computed(() => {
-	if (props.serverProjectLink) {
-		return props.serverProjectLink
-	}
-	if (!props.serverProject) {
-		return ''
-	}
-	return `/project/${props.serverProject.slug ?? props.serverProject.id}`
-})
-
-function copyServerAddress() {
-	if (!props.server?.net?.domain) return
-	navigator.clipboard.writeText(`${props.server.net.domain}.modrinth.gg`)
-	addNotification({
-		title: 'Server address copied',
-		text: "Your server's address has been copied to your clipboard.",
-		type: 'success',
-	})
-}
-</script>
diff --git a/packages/ui/src/components/servers/server-header/index.ts b/packages/ui/src/components/servers/server-header/index.ts
index 97bcdcc7f2..2ff43b46e4 100644
--- a/packages/ui/src/components/servers/server-header/index.ts
+++ b/packages/ui/src/components/servers/server-header/index.ts
@@ -1,3 +1 @@
 export { default as PanelServerActionButton } from './PanelServerActionButton.vue'
-export { default as PanelServerOverflowMenu } from './PanelServerOverflowMenu.vue'
-export { default as ServerManageHeader } from './ServerManageHeader.vue'
diff --git a/packages/ui/src/layouts/shared/browse-tab/header.vue b/packages/ui/src/layouts/shared/browse-tab/header.vue
index 839d9a2d0a..d7637ea0ef 100644
--- a/packages/ui/src/layouts/shared/browse-tab/header.vue
+++ b/packages/ui/src/layouts/shared/browse-tab/header.vue
@@ -4,7 +4,7 @@ import type { Component } from 'vue'
 import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
-import PageHeader from '#ui/components/base/PageHeader.vue'
+import PageHeader from '#ui/components/base/page-header/index.vue'
 import LoaderIcon from '#ui/components/servers/icons/LoaderIcon.vue'
 import { useServerImage } from '#ui/composables/use-server-image'
 import { formatLoaderLabel } from '#ui/utils/loaders'
@@ -161,7 +161,7 @@ async function handleSelectedProjectsLeaveResult(
 			:installing="isInstallingSelected"
 		/>
 		<PageHeader
-			:header="installContext.name"
+			:title="installContext.name"
 			:leading="leadingItems"
 			:metadata="metadataItems"
 			:divider="props.divider ?? false"
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
index 27344c3d89..0592c6bc7a 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
@@ -115,68 +115,19 @@
 		]"
 	>
 		<template v-if="revealState !== 'pending' || isOnboarding">
-			<ServerManageHeader
+			<div
 				v-if="!isOnboarding"
-				:class="['server-stagger-item', containedLayout ? 'shrink-0' : '']"
+				class="w-full flex flex-col gap-4"
+				:class="['server-stagger-item', containedLayout ? 'shrink-0' : '', { 'mt-4': isNuxt }]"
 				:style="{ '--si': 0 }"
-				:server="serverData"
-				:server-image="serverImage"
-				:server-project="serverProject"
-				:uptime-seconds="showUptime ? uptimeSeconds : undefined"
 			>
-				<template #actions>
-					<div class="flex gap-2">
-						<PanelServerActionButton :disabled="!!installError" />
-						<Tooltip
-							theme="dismissable-prompt"
-							:triggers="[]"
-							:shown="showSettingsHint"
-							:auto-hide="false"
-							placement="bottom-end"
-						>
-							<ButtonStyled circular size="large">
-								<button
-									v-tooltip="showSettingsHint ? undefined : 'Server settings'"
-									@click="
-										() => {
-											openServerSettingsModal()
-											dismissSettingsHint()
-										}
-									"
-								>
-									<SettingsIcon />
-								</button>
-							</ButtonStyled>
-							<template #popper>
-								<div class="grid grid-cols-[min-content] gap-1">
-									<div class="flex min-w-48 items-center justify-between gap-8">
-										<h3 class="m-0 whitespace-nowrap text-base font-bold text-contrast">
-											{{ formatMessage(settingsHintMessages.title) }}
-										</h3>
-										<ButtonStyled size="small" circular>
-											<button
-												v-tooltip="formatMessage(settingsHintMessages.dismiss)"
-												@click="dismissSettingsHint"
-											>
-												<XIcon aria-hidden="true" />
-											</button>
-										</ButtonStyled>
-									</div>
-									<p class="m-0 text-wrap text-sm font-medium leading-tight text-secondary">
-										{{ formatMessage(settingsHintMessages.description) }}
-									</p>
-								</div>
-							</template>
-						</Tooltip>
-						<PanelServerOverflowMenu
-							:disabled="!!installError"
-							:uptime-seconds="uptimeSeconds"
-							:show-copy-id-action="showCopyIdAction"
-							:show-debug-info="showAdvancedDebugInfo"
-						/>
-					</div>
-				</template>
-			</ServerManageHeader>
+				<PageHeader
+					:title="serverData?.name || 'Server'"
+					:leading="serverHeaderLeading"
+					:metadata="serverHeaderMetadata"
+					:actions="serverHeaderActions"
+				/>
+			</div>
 
 			<ServerOnboardingPanelPage v-if="isOnboarding" :browse-modpacks="handleBrowseModpacks" />
 
@@ -350,7 +301,7 @@
 
 <script setup lang="ts">
 import type { Archon, Labrinth } from '@modrinth/api-client'
-import { getNodeWebSocketUrl, ModrinthApiError } from '@modrinth/api-client'
+import { getNodeWebSocketUrl, ModrinthApiError, NuxtModrinthClient } from '@modrinth/api-client'
 import {
 	BoxesIcon,
 	CheckIcon,
@@ -360,34 +311,35 @@ import {
 	FolderOpenIcon,
 	IssuesIcon,
 	LayoutTemplateIcon,
+	LinkIcon,
 	LoaderCircleIcon,
 	LockIcon,
+	MoreVerticalIcon,
 	RightArrowIcon,
+	ServerIcon as ServerAssetIcon,
 	SettingsIcon,
+	TimerIcon,
 	TransferIcon,
 	TriangleAlertIcon,
 	UsersIcon,
-	XIcon,
 } from '@modrinth/assets'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { useStorage, useTimeoutFn } from '@vueuse/core'
 import DOMPurify from 'dompurify'
-import { Tooltip } from 'floating-vue'
 import { computed, nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue'
 import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import ErrorInformationCard from '#ui/components/base/ErrorInformationCard.vue'
 import NavTabs from '#ui/components/base/NavTabs.vue'
+import PageHeader from '#ui/components/base/page-header/index.vue'
 import ServerNotice from '#ui/components/base/ServerNotice.vue'
 import ConfirmLeaveModal from '#ui/components/modal/ConfirmLeaveModal.vue'
 import ServerPanelAdmonitions from '#ui/components/servers/admonitions/ServerPanelAdmonitions.vue'
+import ServerIcon from '#ui/components/servers/icons/ServerIcon.vue'
+import LoaderIcon from '#ui/components/servers/icons/LoaderIcon.vue'
 import MedalServerCountdown from '#ui/components/servers/marketing/MedalServerCountdown.vue'
-import {
-	PanelServerActionButton,
-	PanelServerOverflowMenu,
-	ServerManageHeader,
-} from '#ui/components/servers/server-header'
+import { PanelServerActionButton } from '#ui/components/servers/server-header'
 import ServerSettingsModal from '#ui/components/servers/ServerSettingsModal.vue'
 import {
 	hasServerPermission,
@@ -508,6 +460,7 @@ const { addNotification } = injectNotificationManager()
 const client = injectModrinthClient()
 const constrainWidth = computed(() => props.constrainWidth)
 const containedLayout = computed(() => props.layoutMode === 'contained')
+const isNuxt = computed(() => client instanceof NuxtModrinthClient)
 const queryClient = useQueryClient()
 const route = useRoute()
 const router = useRouter()
@@ -527,6 +480,10 @@ const isOnboarding = computed(() => serverData.value?.flows?.intro)
 const SETTINGS_HINT_KEY = 'server-panel-settings-hint-dismissed'
 const settingsHintDismissed = useStorage(SETTINGS_HINT_KEY, false)
 const showSettingsHint = ref(!settingsHintDismissed.value)
+const serverPreferences = useStorage(`pyro-server-${props.serverId}-preferences`, {
+	hideSubdomainLabel: false,
+})
+
 function dismissSettingsHint() {
 	showSettingsHint.value = false
 	settingsHintDismissed.value = true
@@ -702,6 +659,166 @@ const {
 	onStateEvent,
 })
 
+const serverHeaderLeading = computed(() => [
+	{
+		id: 'server-icon',
+		type: 'component' as const,
+		component: ServerIcon,
+		componentProps: {
+			image: serverImage.value,
+		},
+		class: isNuxt.value ? 'size-20 !rounded-2xl' : 'size-16 !rounded-xl',
+	},
+])
+
+const showServerUptime = computed(() => props.showUptime && uptimeSeconds.value > 0)
+
+const formattedUptime = computed(() => formatUptime(uptimeSeconds.value))
+
+const serverProjectLink = computed(() => {
+	if (!serverProject.value) return ''
+	return `/project/${serverProject.value.slug ?? serverProject.value.id}`
+})
+
+const serverHeaderMetadata = computed(() => {
+	const server = serverData.value
+	const items = []
+
+	if (server?.flows?.intro) {
+		items.push({
+			id: 'intro',
+			icon: SettingsIcon,
+			label: 'Configuring server...',
+			class: 'font-semibold',
+		})
+		return items
+	}
+
+	if (server?.loader) {
+		items.push({
+			id: 'loader',
+			icon: LoaderIcon,
+			iconProps: {
+				loader: server.loader,
+			},
+			label: `${formatLoaderLabel(server.loader)} ${server.mc_version}`,
+		})
+	}
+
+	if (server?.net?.domain && !serverPreferences.value.hideSubdomainLabel) {
+		items.push({
+			id: 'server-address',
+			icon: LinkIcon,
+			label: `${server.net.domain}.modrinth.gg`,
+			tooltip: 'Copy server address',
+			onClick: copyServerAddress,
+		})
+	}
+
+	if (showServerUptime.value) {
+		items.push({
+			id: 'uptime',
+			icon: TimerIcon,
+			label: formattedUptime.value,
+		})
+	}
+
+	if (serverProject.value) {
+		items.push({
+			id: 'linked-project',
+			label: 'Linked to',
+			value: serverProject.value.title,
+			valueClass: 'text-primary',
+			avatarSrc: serverProject.value.icon_url,
+			avatarAlt: serverProject.value.title,
+			to: serverProjectLink.value,
+		})
+	}
+
+	return items
+})
+
+const serverHeaderActions = computed(() => [
+	{
+		id: 'server-power',
+		label: 'Server power',
+		kind: 'component' as const,
+		component: PanelServerActionButton,
+		componentProps: {
+			disabled: !!installError.value,
+		},
+	},
+	{
+		id: 'settings',
+		label: 'Server settings',
+		icon: SettingsIcon,
+		labelHidden: true,
+		circular: true,
+		tooltip: showSettingsHint.value ? undefined : 'Server settings',
+		onClick: () => openServerSettingsModal(),
+		prompt: {
+			title: formatMessage(settingsHintMessages.title),
+			description: formatMessage(settingsHintMessages.description),
+			dismissLabel: formatMessage(settingsHintMessages.dismiss),
+			shown: showSettingsHint.value,
+			placement: 'bottom-end',
+			onDismiss: dismissSettingsHint,
+		},
+	},
+	{
+		id: 'more',
+		label: 'More server options',
+		icon: MoreVerticalIcon,
+		labelHidden: true,
+		circular: true,
+		type: 'transparent' as const,
+		menuActions: [
+			{
+				id: 'all-servers',
+				label: 'All servers',
+				icon: ServerAssetIcon,
+				action: () => router.push('/hosting/manage'),
+			},
+			{
+				id: 'copy-id',
+				label: 'Copy ID',
+				icon: CopyIcon,
+				action: copyServerId,
+				shown: props.showCopyIdAction,
+			},
+		],
+	},
+])
+
+function formatUptime(uptime: number) {
+	const days = Math.floor(uptime / (24 * 3600))
+	const hours = Math.floor((uptime % (24 * 3600)) / 3600)
+	const minutes = Math.floor((uptime % 3600) / 60)
+	const seconds = uptime % 60
+
+	let formatted = ''
+	if (days > 0) formatted += `${days}d `
+	if (hours > 0 || days > 0) formatted += `${hours}h `
+	formatted += `${minutes}m ${seconds}s`
+	return formatted.trim()
+}
+
+function copyServerAddress() {
+	const domain = serverData.value?.net?.domain
+	if (!domain) return
+
+	void navigator.clipboard.writeText(`${domain}.modrinth.gg`)
+	addNotification({
+		title: 'Server address copied',
+		text: "Your server's address has been copied to your clipboard.",
+		type: 'success',
+	})
+}
+
+function copyServerId() {
+	void navigator.clipboard.writeText(props.serverId)
+}
+
 const isUploading = computed(() => uploadState.value.isUploading)
 const canSetup = computed(() =>
 	hasServerPermission(serverData.value?.current_user_permissions ?? 0, 'SETUP'),
diff --git a/packages/ui/src/stories/base/PageHeader.stories.ts b/packages/ui/src/stories/base/PageHeader.stories.ts
index 2fd13c3ca5..de8bde78e3 100644
--- a/packages/ui/src/stories/base/PageHeader.stories.ts
+++ b/packages/ui/src/stories/base/PageHeader.stories.ts
@@ -16,11 +16,26 @@ import {
 } from '@modrinth/assets'
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import PageHeader from '../../components/base/PageHeader.vue'
+import PageHeader from '../../components/base/page-header/index.vue'
 import LoaderIcon from '../../components/servers/icons/LoaderIcon.vue'
 import ServerIcon from '../../components/servers/icons/ServerIcon.vue'
 
 const noop = () => undefined
+const CustomMetadataStats = {
+	components: { DownloadIcon, HeartIcon },
+	template: `
+		<div class="flex flex-wrap items-center gap-3">
+			<div class="flex items-center gap-2 font-semibold">
+				<DownloadIcon class="h-6 w-6 text-secondary" />
+				1.2M downloads
+			</div>
+			<div class="flex items-center gap-2 font-semibold">
+				<HeartIcon class="h-6 w-6 text-secondary" />
+				50K followers
+			</div>
+		</div>
+	`,
+}
 
 const meta = {
 	title: 'Base/PageHeader',
@@ -41,7 +56,7 @@ type Story = StoryObj<typeof meta>
 
 export const AppInstanceHeader: Story = {
 	args: {
-		header: 'Create: Astral',
+		title: 'Create: Astral',
 		leading: {
 			type: 'avatar',
 			src: null,
@@ -113,7 +128,7 @@ export const AppInstanceHeader: Story = {
 
 export const CreatorHeader: Story = {
 	args: {
-		header: 'Prospector',
+		title: 'Prospector',
 		summary: 'A Modrinth creator with a handful of popular projects.',
 		leading: {
 			type: 'avatar',
@@ -161,7 +176,7 @@ export const CreatorHeader: Story = {
 
 export const BrowseHeader: Story = {
 	args: {
-		header: 'Survival SMP',
+		title: 'Survival SMP',
 		leading: [
 			{
 				id: 'back',
@@ -213,7 +228,7 @@ export const BrowseHeader: Story = {
 
 export const ServerPanelRootHeader: Story = {
 	args: {
-		header: 'Survival SMP',
+		title: 'Survival SMP',
 		leading: {
 			type: 'component',
 			component: ServerIcon,
@@ -257,7 +272,7 @@ export const ServerPanelRootHeader: Story = {
 
 export const ServerPanelInstanceHeader: Story = {
 	args: {
-		header: 'My World',
+		title: 'My World',
 		leading: {
 			type: 'button',
 			icon: LeftArrowIcon,
@@ -327,27 +342,25 @@ export const ServerPanelInstanceHeader: Story = {
 
 export const CustomMetadata: Story = {
 	render: () => ({
-		components: { PageHeader, DownloadIcon, HeartIcon },
+		components: { PageHeader },
+		setup() {
+			return {
+				metadata: [
+					{
+						id: 'project-stats',
+						type: 'component',
+						component: CustomMetadataStats,
+					},
+				],
+			}
+		},
 		template: `
 			<PageHeader
-				header="Custom Metadata Project"
+				title="Custom Metadata Project"
 				summary="Custom metadata is reserved for rich stat rows that cannot be represented by icon and label data."
 				:leading="{ type: 'avatar', src: null, alt: 'Custom Metadata Project', avatarSize: '96px' }"
-				:metadata="[{ id: 'project-stats', type: 'custom', class: 'contents' }]"
-			>
-				<template #metadata-project-stats>
-					<div class="flex flex-wrap items-center gap-3">
-						<div class="flex items-center gap-2 font-semibold">
-							<DownloadIcon class="h-6 w-6 text-secondary" />
-							1.2M downloads
-						</div>
-						<div class="flex items-center gap-2 font-semibold">
-							<HeartIcon class="h-6 w-6 text-secondary" />
-							50K followers
-						</div>
-					</div>
-				</template>
-			</PageHeader>
+				:metadata="metadata"
+			/>
 		`,
 	}),
 }
diff --git a/standards/frontend/COMPONENT_STRUCTURE.md b/standards/frontend/COMPONENT_STRUCTURE.md
new file mode 100644
index 0000000000..99cfeb3837
--- /dev/null
+++ b/standards/frontend/COMPONENT_STRUCTURE.md
@@ -0,0 +1,128 @@
+# Component Structure
+
+## Component folders
+
+Prefer giving non-trivial components their own folder:
+
+```
+components/
+└── analytics-chart/
+	├── index.vue
+	├── analytics-chart-header.vue
+	├── analytics-chart-plot.vue
+	├── analytics-chart-data.ts
+	└── use-analytics-chart.ts
+```
+
+The folder name should match the public component name in kebab case. The main component in that folder should be `index.vue`.
+
+This keeps imports short:
+
+```ts
+import AnalyticsChart from '@/components/analytics-chart/index.vue'
+```
+
+If the local resolver supports directory indexes, importing the folder is also fine:
+
+```ts
+import AnalyticsChart from '@/components/analytics-chart/'
+```
+
+Use the explicit `index.vue` import when the TypeScript setup cannot resolve the directory import reliably.
+
+## Local implementation files
+
+Keep files that only exist to support one component inside that component's folder:
+
+```
+analytics-chart/
+├── index.vue
+├── analytics-chart-header.vue
+├── analytics-chart-plot.vue
+├── analytics-chart-tooltip.vue
+├── chart-ranges.ts
+└── use-chart-hover-state.ts
+```
+
+Good candidates for local files:
+
+- Small subcomponents used only by the main component
+- Local composables used only by the main component or its local subcomponents
+- Helpers that split up a large `<script setup>` block
+- Types that describe local component state or props
+
+This is preferred over allowing a single component file to grow into a large, hard-to-review script block.
+
+## Naming local subcomponents
+
+Local subcomponents should still have clear names that explain their relationship to the main component:
+
+```
+analytics-chart/
+├── index.vue
+├── analytics-chart-header.vue
+└── analytics-chart-plot.vue
+```
+
+Avoid vague names that make a local component look like a standalone public component:
+
+```
+analytics-chart/
+├── index.vue
+├── events.vue
+└── header.vue
+```
+
+If a file is local to `analytics-chart`, prefixing it with `analytics-chart-` makes that relationship clear when it appears in search results, editor tabs, and imports.
+
+## Nesting
+
+One level of nesting is usually enough.
+
+Prefer this:
+
+```
+analytics-chart/
+├── index.vue
+├── analytics-chart-header.vue
+├── analytics-chart-plot.vue
+├── use-chart-hover-state.ts
+└── use-chart-selection.ts
+```
+
+Avoid this unless a local area has become large enough to justify its own module boundary:
+
+```
+analytics-chart/
+├── index.vue
+├── header/
+│	└── index.vue
+└── plot/
+	├── index.vue
+	└── use-plot-state.ts
+```
+
+Subfolders are fine when they reduce real complexity, but do not create a folder for every small subcomponent by default. Deep nesting makes the file tree harder to scan and often adds duplicated names without improving ownership.
+
+## When not to use a folder
+
+Small, leaf components can stay as a single `.vue` file:
+
+```
+components/
+├── avatar-stack.vue
+├── empty-state.vue
+└── project-status-pill.vue
+```
+
+Move a component into a folder once it grows local helpers, local composables, or local subcomponents.
+
+## Public versus local components
+
+Only the main `index.vue` should be treated as the public entry point for the folder. Other files in the folder are implementation details unless there is a clear reason to import them from outside.
+
+If a local subcomponent starts being imported elsewhere, either:
+
+- Promote it into its own component folder
+- Move it to the nearest shared component area if it is genuinely reusable
+- Keep it local and pass behavior through the main component if external imports would leak implementation details

From 2dde071806a7de21c031defa201237dfac8f0698 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Mon, 6 Jul 2026 10:49:25 +0100
Subject: [PATCH 03/12] fix: lint

---
 .../pages/instance/instance-header-server-metadata.vue    | 8 +++++++-
 apps/app-frontend/src/pages/project/Index.vue             | 3 +--
 apps/frontend/src/pages/[type]/[project].vue              | 5 ++---
 packages/ui/src/components/base/index.ts                  | 2 +-
 packages/ui/src/components/base/page-header/index.vue     | 5 +----
 .../components/base/page-header/page-header-action.vue    | 4 +++-
 .../components/base/page-header/page-header-badges.vue    | 4 ++--
 .../components/base/page-header/page-header-leading.vue   | 7 +------
 .../page-header/page-header-metadata-item-content.vue     | 5 ++++-
 packages/ui/src/components/base/page-header/types.ts      | 4 +---
 packages/ui/src/layouts/wrapped/hosting/manage/root.vue   | 2 +-
 11 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/apps/app-frontend/src/pages/instance/instance-header-server-metadata.vue b/apps/app-frontend/src/pages/instance/instance-header-server-metadata.vue
index 3e20423d98..b346190310 100644
--- a/apps/app-frontend/src/pages/instance/instance-header-server-metadata.vue
+++ b/apps/app-frontend/src/pages/instance/instance-header-server-metadata.vue
@@ -42,7 +42,13 @@
 
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
-import { Avatar, ServerOnlinePlayers, ServerPing, ServerRecentPlays, ServerRegion } from '@modrinth/ui'
+import {
+	Avatar,
+	ServerOnlinePlayers,
+	ServerPing,
+	ServerRecentPlays,
+	ServerRegion,
+} from '@modrinth/ui'
 
 defineProps<{
 	loadingServerPing?: boolean
diff --git a/apps/app-frontend/src/pages/project/Index.vue b/apps/app-frontend/src/pages/project/Index.vue
index 4bd9fad960..3e846ea78c 100644
--- a/apps/app-frontend/src/pages/project/Index.vue
+++ b/apps/app-frontend/src/pages/project/Index.vue
@@ -443,8 +443,7 @@ const projectHeaderMetadata = computed(() => {
 				type: 'component',
 				component: ServerDetails,
 				componentProps: {
-					onlinePlayers:
-						projectV3.value?.minecraft_java_server?.ping?.data?.players_online ?? 0,
+					onlinePlayers: projectV3.value?.minecraft_java_server?.ping?.data?.players_online ?? 0,
 					statusOnline: !!projectV3.value?.minecraft_java_server?.ping?.data,
 					recentPlays: projectV3.value?.minecraft_java_server?.verified_plays_2w ?? 0,
 				},
diff --git a/apps/frontend/src/pages/[type]/[project].vue b/apps/frontend/src/pages/[type]/[project].vue
index 3fca6b7896..672d1b7cea 100644
--- a/apps/frontend/src/pages/[type]/[project].vue
+++ b/apps/frontend/src/pages/[type]/[project].vue
@@ -412,9 +412,9 @@ import {
 	ProjectStatusBadge,
 	provideProjectPageContext,
 	ServerDetails,
+	useCompactNumber,
 	useDebugLogger,
 	useFormatDateTime,
-	useCompactNumber,
 	useFormatPrice,
 	useRelativeTime,
 	useVIntl,
@@ -1514,8 +1514,7 @@ const projectHeaderMetadata = computed(() => {
 				type: 'component',
 				component: ServerDetails,
 				componentProps: {
-					onlinePlayers:
-						projectV3.value?.minecraft_java_server?.ping?.data?.players_online ?? 0,
+					onlinePlayers: projectV3.value?.minecraft_java_server?.ping?.data?.players_online ?? 0,
 					statusOnline: !!projectV3.value?.minecraft_java_server?.ping?.data,
 					recentPlays: projectV3.value?.minecraft_java_server?.verified_plays_2w ?? 0,
 				},
diff --git a/packages/ui/src/components/base/index.ts b/packages/ui/src/components/base/index.ts
index 7bdbdbfd31..0d669283bf 100644
--- a/packages/ui/src/components/base/index.ts
+++ b/packages/ui/src/components/base/index.ts
@@ -62,6 +62,7 @@ export { default as OptionGroup } from './OptionGroup.vue'
 export type { Option as OverflowMenuOption } from './OverflowMenu.vue'
 export { default as OverflowMenu } from './OverflowMenu.vue'
 export { default as Page } from './Page.vue'
+export { default as PageHeader } from './page-header/index.vue'
 export type {
 	PageHeaderAction,
 	PageHeaderActionPrompt,
@@ -70,7 +71,6 @@ export type {
 	PageHeaderMetadataItem,
 	PageHeaderProps,
 } from './page-header/types'
-export { default as PageHeader } from './page-header/index.vue'
 export { default as Pagination } from './Pagination.vue'
 export { default as PopoutMenu } from './PopoutMenu.vue'
 export { default as PreviewSelectButton } from './PreviewSelectButton.vue'
diff --git a/packages/ui/src/components/base/page-header/index.vue b/packages/ui/src/components/base/page-header/index.vue
index f6f6c18498..07f241d08b 100644
--- a/packages/ui/src/components/base/page-header/index.vue
+++ b/packages/ui/src/components/base/page-header/index.vue
@@ -73,10 +73,7 @@ const rootClass = computed(() => [
 	props.bottomPadding ? 'pb-4' : '',
 	props.headerClass,
 ])
-const titleClassValue = computed(() => [
-	props.truncateTitle ? 'truncate' : '',
-	props.titleClass,
-])
+const titleClassValue = computed(() => [props.truncateTitle ? 'truncate' : '', props.titleClass])
 const summaryClass = computed(() => (props.disableLineClamp ? '' : 'line-clamp-2'))
 const hasSummary = computed(() => !!props.summary || !!slots.summary)
 </script>
diff --git a/packages/ui/src/components/base/page-header/page-header-action.vue b/packages/ui/src/components/base/page-header/page-header-action.vue
index 8d2eb16e0e..5ec609551f 100644
--- a/packages/ui/src/components/base/page-header/page-header-action.vue
+++ b/packages/ui/src/components/base/page-header/page-header-action.vue
@@ -65,7 +65,9 @@ const emit = defineEmits<{
 	'dismiss-prompt': []
 }>()
 
-const actionLabel = computed(() => props.action.ariaLabel ?? props.action.tooltip ?? props.action.label)
+const actionLabel = computed(
+	() => props.action.ariaLabel ?? props.action.tooltip ?? props.action.label,
+)
 
 const joinedActions = computed<JoinedButtonAction[]>(() => {
 	if (!('joinedActions' in props.action)) return []
diff --git a/packages/ui/src/components/base/page-header/page-header-badges.vue b/packages/ui/src/components/base/page-header/page-header-badges.vue
index bfd577b088..608e9b9c71 100644
--- a/packages/ui/src/components/base/page-header/page-header-badges.vue
+++ b/packages/ui/src/components/base/page-header/page-header-badges.vue
@@ -24,9 +24,9 @@
 </template>
 
 <script setup lang="ts">
-import PageHeaderInteractiveWrapper from './page-header-interactive-wrapper.vue'
 import PageHeaderBadgeContent from './page-header-badge-content.vue'
-import type { PageHeaderBadgeContent as PageHeaderBadgeContentType, PageHeaderBadge } from './types'
+import PageHeaderInteractiveWrapper from './page-header-interactive-wrapper.vue'
+import type { PageHeaderBadge, PageHeaderBadgeContent as PageHeaderBadgeContentType } from './types'
 
 defineProps<{
 	badges: PageHeaderBadge[]
diff --git a/packages/ui/src/components/base/page-header/page-header-leading.vue b/packages/ui/src/components/base/page-header/page-header-leading.vue
index 23ba6d5c0b..5b109f1d9f 100644
--- a/packages/ui/src/components/base/page-header/page-header-leading.vue
+++ b/packages/ui/src/components/base/page-header/page-header-leading.vue
@@ -38,12 +38,7 @@
 				:loading="item.loading ?? 'eager'"
 				:class="item.class"
 			/>
-			<component
-				:is="item.component"
-				v-else
-				:class="item.class"
-				v-bind="item.componentProps"
-			/>
+			<component :is="item.component" v-else :class="item.class" v-bind="item.componentProps" />
 		</template>
 	</div>
 </template>
diff --git a/packages/ui/src/components/base/page-header/page-header-metadata-item-content.vue b/packages/ui/src/components/base/page-header/page-header-metadata-item-content.vue
index 778e8ee5ae..1d09b39e1e 100644
--- a/packages/ui/src/components/base/page-header/page-header-metadata-item-content.vue
+++ b/packages/ui/src/components/base/page-header/page-header-metadata-item-content.vue
@@ -19,7 +19,10 @@
 	<span v-if="item.label" :class="['truncate', item.labelClass]">
 		{{ item.label }}
 	</span>
-	<span v-if="item.value !== undefined && item.value !== null" :class="['truncate', item.valueClass]">
+	<span
+		v-if="item.value !== undefined && item.value !== null"
+		:class="['truncate', item.valueClass]"
+	>
 		{{ item.value }}
 	</span>
 	<div v-if="item.tags?.length" class="flex flex-wrap gap-2">
diff --git a/packages/ui/src/components/base/page-header/types.ts b/packages/ui/src/components/base/page-header/types.ts
index 1a105ec814..11088f32a6 100644
--- a/packages/ui/src/components/base/page-header/types.ts
+++ b/packages/ui/src/components/base/page-header/types.ts
@@ -158,9 +158,7 @@ export type PageHeaderMetadataContentItem = {
 	valueClass?: PageHeaderClass
 }
 
-export type PageHeaderMetadataItem =
-	| PageHeaderMetadataComponentItem
-	| PageHeaderMetadataContentItem
+export type PageHeaderMetadataItem = PageHeaderMetadataComponentItem | PageHeaderMetadataContentItem
 
 export type PageHeaderActionPrompt = {
 	title: string
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
index 0592c6bc7a..ba075217d0 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
@@ -336,8 +336,8 @@ import PageHeader from '#ui/components/base/page-header/index.vue'
 import ServerNotice from '#ui/components/base/ServerNotice.vue'
 import ConfirmLeaveModal from '#ui/components/modal/ConfirmLeaveModal.vue'
 import ServerPanelAdmonitions from '#ui/components/servers/admonitions/ServerPanelAdmonitions.vue'
-import ServerIcon from '#ui/components/servers/icons/ServerIcon.vue'
 import LoaderIcon from '#ui/components/servers/icons/LoaderIcon.vue'
+import ServerIcon from '#ui/components/servers/icons/ServerIcon.vue'
 import MedalServerCountdown from '#ui/components/servers/marketing/MedalServerCountdown.vue'
 import { PanelServerActionButton } from '#ui/components/servers/server-header'
 import ServerSettingsModal from '#ui/components/servers/ServerSettingsModal.vue'

From 8829aef4c61d261c1fe4a60c2e9605f7584a2f5d Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Mon, 6 Jul 2026 10:58:55 +0100
Subject: [PATCH 04/12] fix: label inconsistencies

---
 .../app-frontend/src/pages/instance/Index.vue |   2 +-
 packages/ui/src/components/base/index.ts      |   2 +
 .../src/layouts/shared/browse-tab/header.vue  |   2 +-
 pnpm-lock.yaml                                | 271 +++---------------
 4 files changed, 42 insertions(+), 235 deletions(-)

diff --git a/apps/app-frontend/src/pages/instance/Index.vue b/apps/app-frontend/src/pages/instance/Index.vue
index d4b1a05e3c..2e6d201cb5 100644
--- a/apps/app-frontend/src/pages/instance/Index.vue
+++ b/apps/app-frontend/src/pages/instance/Index.vue
@@ -590,7 +590,7 @@ const instanceHeaderMetadata = computed(() => {
 	return [
 		{
 			id: 'game-version',
-			label: instance.value.game_version,
+			label: `Minecraft ${instance.value.game_version}`,
 			icon: Gamepad2Icon,
 		},
 		{
diff --git a/packages/ui/src/components/base/index.ts b/packages/ui/src/components/base/index.ts
index 0d669283bf..8d7529a254 100644
--- a/packages/ui/src/components/base/index.ts
+++ b/packages/ui/src/components/base/index.ts
@@ -31,6 +31,8 @@ export { default as EmptyState } from './EmptyState.vue'
 export { default as EnvironmentIndicator } from './EnvironmentIndicator.vue'
 export { default as ErrorInformationCard } from './ErrorInformationCard.vue'
 export { default as FileInput } from './FileInput.vue'
+export type { FileTreeSelectItem } from './FileTreeSelect.vue'
+export { default as FileTreeSelect } from './FileTreeSelect.vue'
 export type { FilterBarOption } from './FilterBar.vue'
 export { default as FilterBar } from './FilterBar.vue'
 export type { FilterPillOption } from './FilterPills.vue'
diff --git a/packages/ui/src/layouts/shared/browse-tab/header.vue b/packages/ui/src/layouts/shared/browse-tab/header.vue
index d7637ea0ef..1ee98cea5c 100644
--- a/packages/ui/src/layouts/shared/browse-tab/header.vue
+++ b/packages/ui/src/layouts/shared/browse-tab/header.vue
@@ -89,7 +89,7 @@ const metadataItems = computed(() => {
 	if (context.gameVersion) {
 		items.push({
 			id: 'game-version',
-			label: context.gameVersion,
+			label: `Minecraft ${context.gameVersion}`,
 			icon: Gamepad2Icon,
 			class: '!text-primary',
 		})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e5551e7046..e9831dee8e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -176,7 +176,7 @@ importers:
     devDependencies:
       '@eslint/compat':
         specifier: ^1.1.1
-        version: 1.4.1(eslint@9.39.2(jiti@1.21.7))
+        version: 1.4.1(eslint@9.39.2(jiti@2.6.1))
       '@formatjs/cli':
         specifier: ^6.2.12
         version: 6.12.2(@vue/compiler-core@3.5.27)(vue@3.5.27(typescript@5.9.3))
@@ -185,22 +185,22 @@ importers:
         version: link:../../packages/tooling-config
       '@nuxt/eslint-config':
         specifier: ^0.5.6
-        version: 0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+        version: 0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
       '@taijased/vue-render-tracker':
         specifier: ^1.0.7
         version: 1.0.7(vue@3.5.27(typescript@5.9.3))
       '@vitejs/plugin-vue':
         specifier: ^6.0.3
-        version: 6.0.4(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))
+        version: 6.0.4(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))
       autoprefixer:
         specifier: ^10.4.19
         version: 10.4.24(postcss@8.5.6)
       eslint:
         specifier: ^9.9.1
-        version: 9.39.2(jiti@1.21.7)
+        version: 9.39.2(jiti@2.6.1)
       eslint-plugin-turbo:
         specifier: ^2.5.4
-        version: 2.8.2(eslint@9.39.2(jiti@1.21.7))(turbo@2.8.2)
+        version: 2.8.2(eslint@9.39.2(jiti@2.6.1))(turbo@2.8.2)
       postcss:
         specifier: ^8.4.39
         version: 8.5.6
@@ -218,7 +218,7 @@ importers:
         version: 5.9.3
       vite:
         specifier: ^8.0.0
-        version: 8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+        version: 8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
       vue-component-type-helpers:
         specifier: ^3.1.8
         version: 3.2.4
@@ -784,7 +784,7 @@ importers:
         version: 5.2.4(vite@5.4.21(@types/node@24.12.2)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0))(vue@3.5.27(typescript@5.9.3))
       eslint-plugin-storybook:
         specifier: ^10.1.10
-        version: 10.2.4(eslint@9.39.2(jiti@2.6.1))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)
+        version: 10.2.4(eslint@9.39.2(jiti@1.21.7))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)
       storybook:
         specifier: ^10.1.10
         version: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -945,6 +945,10 @@ packages:
     resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/code-frame@7.29.7':
+    resolution: {integrity: sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/compat-data@7.29.0':
     resolution: {integrity: sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==}
     engines: {node: '>=6.9.0'}
@@ -1015,6 +1019,10 @@ packages:
     resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-validator-identifier@7.29.7':
+    resolution: {integrity: sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-validator-option@7.27.1':
     resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
     engines: {node: '>=6.9.0'}
@@ -1050,6 +1058,10 @@ packages:
     resolution: {integrity: sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/runtime@7.29.7':
+    resolution: {integrity: sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/template@7.28.6':
     resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==}
     engines: {node: '>=6.9.0'}
@@ -9804,8 +9816,8 @@ packages:
   vue-component-type-helpers@3.2.4:
     resolution: {integrity: sha512-05lR16HeZDcDpB23ku5b5f1fBOoHqFnMiKRr2CiEvbG5Ux4Yi0McmQBOET0dR0nxDXosxyVqv67q6CzS3AK8rw==}
 
-  vue-component-type-helpers@3.3.3:
-    resolution: {integrity: sha512-x4nsFpy5Pe8fqPzp/5vkTPeTTDBpAx4WVtV47Ejt0+2FQrq4pRRsJs7JmYRqMFzTu/LW+pCWEjQ3YVCkPV7f9g==}
+  vue-component-type-helpers@3.3.5:
+    resolution: {integrity: sha512-Fe1jyPJoUGpJOYKOri44jduR7My4yYINOMJISuMAbmrs+L5LbIDUc8NTWZYY3EJLK0yPLuCmcd5zoCsE4k2/KA==}
 
   vue-confetti-explosion@1.0.2:
     resolution: {integrity: sha512-80OboM3/6BItIoZ6DpNcZFqGpF607kjIVc5af56oKgtFmt5yWehvJeoYhkzYlqxrqdBe0Ko4Ie3bWrmLau+dJw==}
@@ -10319,6 +10331,12 @@ snapshots:
       js-tokens: 4.0.0
       picocolors: 1.1.1
 
+  '@babel/code-frame@7.29.7':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.29.7
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
   '@babel/compat-data@7.29.0': {}
 
   '@babel/core@7.29.0':
@@ -10425,6 +10443,8 @@ snapshots:
 
   '@babel/helper-validator-identifier@7.28.5': {}
 
+  '@babel/helper-validator-identifier@7.29.7': {}
+
   '@babel/helper-validator-option@7.27.1': {}
 
   '@babel/helpers@7.28.6':
@@ -10459,6 +10479,8 @@ snapshots:
 
   '@babel/runtime@7.28.6': {}
 
+  '@babel/runtime@7.29.7': {}
+
   '@babel/template@7.28.6':
     dependencies:
       '@babel/code-frame': 7.29.0
@@ -11100,12 +11122,6 @@ snapshots:
 
   '@eslint-community/regexpp@4.12.2': {}
 
-  '@eslint/compat@1.4.1(eslint@9.39.2(jiti@1.21.7))':
-    dependencies:
-      '@eslint/core': 0.17.0
-    optionalDependencies:
-      eslint: 9.39.2(jiti@1.21.7)
-
   '@eslint/compat@1.4.1(eslint@9.39.2(jiti@2.6.1))':
     dependencies:
       '@eslint/core': 0.17.0
@@ -11733,31 +11749,6 @@ snapshots:
       - utf-8-validate
       - vue
 
-  '@nuxt/eslint-config@0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
-    dependencies:
-      '@eslint/js': 9.39.2
-      '@nuxt/eslint-plugin': 0.5.7(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      '@stylistic/eslint-plugin': 2.13.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/eslint-plugin': 8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/parser': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      eslint: 9.39.2(jiti@1.21.7)
-      eslint-config-flat-gitignore: 0.3.0(eslint@9.39.2(jiti@1.21.7))
-      eslint-flat-config-utils: 0.4.0
-      eslint-plugin-import-x: 4.16.1(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))
-      eslint-plugin-jsdoc: 50.8.0(eslint@9.39.2(jiti@1.21.7))
-      eslint-plugin-regexp: 2.10.0(eslint@9.39.2(jiti@1.21.7))
-      eslint-plugin-unicorn: 55.0.0(eslint@9.39.2(jiti@1.21.7))
-      eslint-plugin-vue: 9.33.0(eslint@9.39.2(jiti@1.21.7))
-      globals: 15.15.0
-      local-pkg: 0.5.1
-      pathe: 1.1.2
-      vue-eslint-parser: 9.4.3(eslint@9.39.2(jiti@1.21.7))
-    transitivePeerDependencies:
-      - '@typescript-eslint/utils'
-      - eslint-import-resolver-node
-      - supports-color
-      - typescript
-
   '@nuxt/eslint-config@0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint/js': 9.39.2
@@ -11783,15 +11774,6 @@ snapshots:
       - supports-color
       - typescript
 
-  '@nuxt/eslint-plugin@0.5.7(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
-    dependencies:
-      '@typescript-eslint/types': 8.54.0
-      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      eslint: 9.39.2(jiti@1.21.7)
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
   '@nuxt/eslint-plugin@0.5.7(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 8.54.0
@@ -13243,22 +13225,10 @@ snapshots:
       storybook: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       type-fest: 2.19.0
       vue: 3.5.27(typescript@5.9.3)
-      vue-component-type-helpers: 3.3.3
+      vue-component-type-helpers: 3.3.5
 
   '@stripe/stripe-js@7.9.0': {}
 
-  '@stylistic/eslint-plugin@2.13.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
-    dependencies:
-      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      eslint: 9.39.2(jiti@1.21.7)
-      eslint-visitor-keys: 4.2.1
-      espree: 10.4.0
-      estraverse: 5.3.0
-      picomatch: 4.0.4
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
   '@stylistic/eslint-plugin@2.13.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
@@ -13465,8 +13435,8 @@ snapshots:
 
   '@testing-library/dom@10.4.1':
     dependencies:
-      '@babel/code-frame': 7.29.0
-      '@babel/runtime': 7.28.6
+      '@babel/code-frame': 7.29.7
+      '@babel/runtime': 7.29.7
       '@types/aria-query': 5.0.4
       aria-query: 5.3.0
       dom-accessibility-api: 0.5.16
@@ -13671,22 +13641,6 @@ snapshots:
     dependencies:
       '@types/node': 24.12.2
 
-  '@typescript-eslint/eslint-plugin@8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
-    dependencies:
-      '@eslint-community/regexpp': 4.12.2
-      '@typescript-eslint/parser': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/scope-manager': 8.54.0
-      '@typescript-eslint/type-utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.54.0
-      eslint: 9.39.2(jiti@1.21.7)
-      ignore: 7.0.5
-      natural-compare: 1.4.0
-      ts-api-utils: 2.4.0(typescript@5.9.3)
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/eslint-plugin@8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
@@ -13703,18 +13657,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
-    dependencies:
-      '@typescript-eslint/scope-manager': 8.54.0
-      '@typescript-eslint/types': 8.54.0
-      '@typescript-eslint/typescript-estree': 8.54.0(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.54.0
-      debug: 4.4.3
-      eslint: 9.39.2(jiti@1.21.7)
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.54.0
@@ -13745,18 +13687,6 @@ snapshots:
     dependencies:
       typescript: 5.9.3
 
-  '@typescript-eslint/type-utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
-    dependencies:
-      '@typescript-eslint/types': 8.54.0
-      '@typescript-eslint/typescript-estree': 8.54.0(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      debug: 4.4.3
-      eslint: 9.39.2(jiti@1.21.7)
-      ts-api-utils: 2.4.0(typescript@5.9.3)
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/type-utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 8.54.0
@@ -13927,12 +13857,6 @@ snapshots:
       vite: 7.3.1(@types/node@24.12.2)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
       vue: 3.5.27(typescript@5.9.3)
 
-  '@vitejs/plugin-vue@6.0.4(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))':
-    dependencies:
-      '@rolldown/pluginutils': 1.0.0-rc.2
-      vite: 8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
-      vue: 3.5.27(typescript@5.9.3)
-
   '@vitejs/plugin-vue@6.0.4(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-rc.2
@@ -15500,12 +15424,6 @@ snapshots:
 
   escape-string-regexp@5.0.0: {}
 
-  eslint-config-flat-gitignore@0.3.0(eslint@9.39.2(jiti@1.21.7)):
-    dependencies:
-      '@eslint/compat': 1.4.1(eslint@9.39.2(jiti@1.21.7))
-      eslint: 9.39.2(jiti@1.21.7)
-      find-up-simple: 1.0.1
-
   eslint-config-flat-gitignore@0.3.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@eslint/compat': 1.4.1(eslint@9.39.2(jiti@2.6.1))
@@ -15527,23 +15445,6 @@ snapshots:
     optionalDependencies:
       unrs-resolver: 1.11.1
 
-  eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)):
-    dependencies:
-      '@typescript-eslint/types': 8.54.0
-      comment-parser: 1.4.5
-      debug: 4.4.3
-      eslint: 9.39.2(jiti@1.21.7)
-      eslint-import-context: 0.1.9(unrs-resolver@1.11.1)
-      is-glob: 4.0.3
-      minimatch: 10.1.2
-      semver: 7.7.4
-      stable-hash-x: 0.2.0
-      unrs-resolver: 1.11.1
-    optionalDependencies:
-      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-    transitivePeerDependencies:
-      - supports-color
-
   eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@typescript-eslint/types': 8.54.0
@@ -15561,22 +15462,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-jsdoc@50.8.0(eslint@9.39.2(jiti@1.21.7)):
-    dependencies:
-      '@es-joy/jsdoccomment': 0.50.2
-      are-docs-informative: 0.0.2
-      comment-parser: 1.4.1
-      debug: 4.4.3
-      escape-string-regexp: 4.0.0
-      eslint: 9.39.2(jiti@1.21.7)
-      espree: 10.4.0
-      esquery: 1.7.0
-      parse-imports-exports: 0.2.4
-      semver: 7.7.4
-      spdx-expression-parse: 4.0.0
-    transitivePeerDependencies:
-      - supports-color
-
   eslint-plugin-jsdoc@50.8.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@es-joy/jsdoccomment': 0.50.2
@@ -15602,17 +15487,6 @@ snapshots:
     optionalDependencies:
       eslint-config-prettier: 10.1.8(eslint@9.39.2(jiti@2.6.1))
 
-  eslint-plugin-regexp@2.10.0(eslint@9.39.2(jiti@1.21.7)):
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
-      '@eslint-community/regexpp': 4.12.2
-      comment-parser: 1.4.5
-      eslint: 9.39.2(jiti@1.21.7)
-      jsdoc-type-pratt-parser: 4.8.0
-      refa: 0.12.1
-      regexp-ast-analysis: 0.7.1
-      scslre: 0.3.0
-
   eslint-plugin-regexp@2.10.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
@@ -15628,47 +15502,21 @@ snapshots:
     dependencies:
       eslint: 9.39.2(jiti@2.6.1)
 
-  eslint-plugin-storybook@10.2.4(eslint@9.39.2(jiti@2.6.1))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3):
+  eslint-plugin-storybook@10.2.4(eslint@9.39.2(jiti@1.21.7))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3):
     dependencies:
-      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      eslint: 9.39.2(jiti@2.6.1)
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@1.21.7)
       storybook: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  eslint-plugin-turbo@2.8.2(eslint@9.39.2(jiti@1.21.7))(turbo@2.8.2):
-    dependencies:
-      dotenv: 16.0.3
-      eslint: 9.39.2(jiti@1.21.7)
-      turbo: 2.8.2
-
   eslint-plugin-turbo@2.8.2(eslint@9.39.2(jiti@2.6.1))(turbo@2.8.2):
     dependencies:
       dotenv: 16.0.3
       eslint: 9.39.2(jiti@2.6.1)
       turbo: 2.8.2
 
-  eslint-plugin-unicorn@55.0.0(eslint@9.39.2(jiti@1.21.7)):
-    dependencies:
-      '@babel/helper-validator-identifier': 7.28.5
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
-      ci-info: 4.4.0
-      clean-regexp: 1.0.0
-      core-js-compat: 3.48.0
-      eslint: 9.39.2(jiti@1.21.7)
-      esquery: 1.7.0
-      globals: 15.15.0
-      indent-string: 4.0.0
-      is-builtin-module: 3.2.1
-      jsesc: 3.1.0
-      pluralize: 8.0.0
-      read-pkg-up: 7.0.1
-      regexp-tree: 0.1.27
-      regjsparser: 0.10.0
-      semver: 7.7.4
-      strip-indent: 3.0.0
-
   eslint-plugin-unicorn@55.0.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
@@ -15703,20 +15551,6 @@ snapshots:
       '@stylistic/eslint-plugin': 2.13.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
       '@typescript-eslint/parser': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
 
-  eslint-plugin-vue@9.33.0(eslint@9.39.2(jiti@1.21.7)):
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
-      eslint: 9.39.2(jiti@1.21.7)
-      globals: 13.24.0
-      natural-compare: 1.4.0
-      nth-check: 2.1.1
-      postcss-selector-parser: 6.1.2
-      semver: 7.7.4
-      vue-eslint-parser: 9.4.3(eslint@9.39.2(jiti@1.21.7))
-      xml-name-validator: 4.0.0
-    transitivePeerDependencies:
-      - supports-color
-
   eslint-plugin-vue@9.33.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
@@ -20140,22 +19974,6 @@ snapshots:
       terser: 5.46.0
       yaml: 2.8.2
 
-  vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2):
-    dependencies:
-      lightningcss: 1.32.0
-      picomatch: 4.0.4
-      postcss: 8.5.8
-      rolldown: 1.0.0-rc.12
-      tinyglobby: 0.2.15
-    optionalDependencies:
-      '@types/node': 24.12.2
-      esbuild: 0.27.3
-      fsevents: 2.3.3
-      jiti: 1.21.7
-      sass: 1.97.3
-      terser: 5.46.0
-      yaml: 2.8.2
-
   vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2):
     dependencies:
       lightningcss: 1.32.0
@@ -20292,7 +20110,7 @@ snapshots:
 
   vue-component-type-helpers@3.2.4: {}
 
-  vue-component-type-helpers@3.3.3: {}
+  vue-component-type-helpers@3.3.5: {}
 
   vue-confetti-explosion@1.0.2(vue@3.5.27(typescript@5.9.3)):
     dependencies:
@@ -20332,19 +20150,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-eslint-parser@9.4.3(eslint@9.39.2(jiti@1.21.7)):
-    dependencies:
-      debug: 4.4.3
-      eslint: 9.39.2(jiti@1.21.7)
-      eslint-scope: 7.2.2
-      eslint-visitor-keys: 3.4.3
-      espree: 9.6.1
-      esquery: 1.7.0
-      lodash: 4.17.23
-      semver: 7.7.4
-    transitivePeerDependencies:
-      - supports-color
-
   vue-eslint-parser@9.4.3(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       debug: 4.4.3

From 7b00a2e92b1b3d6b5fe5c77ae8fdd3ab115c541b Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Mon, 6 Jul 2026 20:15:02 +0100
Subject: [PATCH 05/12] feat: refactor PageHeader (again)

---
 packages/ui/src/components/base/index.ts      |  20 +-
 .../src/components/base/page-header/index.vue |  34 +-
 .../base/page-header/metadata/index.vue       |  12 +
 .../metadata/page-header-metadata-item.vue    |  89 +++
 .../page-header-metadata-number-item.vue      |  59 ++
 .../page-header-metadata-tags-item.vue        |  33 +
 .../page-header-metadata-time-item.vue        |  87 +++
 .../page-header-action-content.vue            |  18 -
 .../page-header-action-prompt-popper.vue      |  37 -
 .../page-header-action-with-prompt.vue        |  32 -
 .../base/page-header/page-header-action.vue   |  92 ---
 .../base/page-header/page-header-actions.vue  |  17 +-
 .../page-header/page-header-badge-content.vue |  12 -
 .../page-header/page-header-badge-item.vue    |  82 +++
 .../base/page-header/page-header-badges.vue   |  46 --
 .../page-header-interactive-wrapper.vue       |  74 --
 .../base/page-header/page-header-leading.vue  |  61 --
 .../page-header-metadata-item-content.vue     |  45 --
 .../page-header/page-header-metadata-list.vue |  55 --
 .../page-header-object-avatar-leading.vue     |  39 +
 .../page-header-user-avatar-leading.vue       |  37 +
 .../src/components/base/page-header/types.ts  | 234 +-----
 .../ui/src/stories/base/PageHeader.stories.ts | 682 ++++++++++--------
 23 files changed, 860 insertions(+), 1037 deletions(-)
 create mode 100644 packages/ui/src/components/base/page-header/metadata/index.vue
 create mode 100644 packages/ui/src/components/base/page-header/metadata/page-header-metadata-item.vue
 create mode 100644 packages/ui/src/components/base/page-header/metadata/page-header-metadata-number-item.vue
 create mode 100644 packages/ui/src/components/base/page-header/metadata/page-header-metadata-tags-item.vue
 create mode 100644 packages/ui/src/components/base/page-header/metadata/page-header-metadata-time-item.vue
 delete mode 100644 packages/ui/src/components/base/page-header/page-header-action-content.vue
 delete mode 100644 packages/ui/src/components/base/page-header/page-header-action-prompt-popper.vue
 delete mode 100644 packages/ui/src/components/base/page-header/page-header-action-with-prompt.vue
 delete mode 100644 packages/ui/src/components/base/page-header/page-header-action.vue
 delete mode 100644 packages/ui/src/components/base/page-header/page-header-badge-content.vue
 create mode 100644 packages/ui/src/components/base/page-header/page-header-badge-item.vue
 delete mode 100644 packages/ui/src/components/base/page-header/page-header-badges.vue
 delete mode 100644 packages/ui/src/components/base/page-header/page-header-interactive-wrapper.vue
 delete mode 100644 packages/ui/src/components/base/page-header/page-header-leading.vue
 delete mode 100644 packages/ui/src/components/base/page-header/page-header-metadata-item-content.vue
 delete mode 100644 packages/ui/src/components/base/page-header/page-header-metadata-list.vue
 create mode 100644 packages/ui/src/components/base/page-header/page-header-object-avatar-leading.vue
 create mode 100644 packages/ui/src/components/base/page-header/page-header-user-avatar-leading.vue

diff --git a/packages/ui/src/components/base/index.ts b/packages/ui/src/components/base/index.ts
index 8d7529a254..981da04993 100644
--- a/packages/ui/src/components/base/index.ts
+++ b/packages/ui/src/components/base/index.ts
@@ -65,13 +65,23 @@ export type { Option as OverflowMenuOption } from './OverflowMenu.vue'
 export { default as OverflowMenu } from './OverflowMenu.vue'
 export { default as Page } from './Page.vue'
 export { default as PageHeader } from './page-header/index.vue'
+export { default as PageHeaderMetadata } from './page-header/metadata/index.vue'
+export { default as PageHeaderMetadataItem } from './page-header/metadata/page-header-metadata-item.vue'
+export { default as PageHeaderMetadataNumberItem } from './page-header/metadata/page-header-metadata-number-item.vue'
+export { default as PageHeaderMetadataTagsItem } from './page-header/metadata/page-header-metadata-tags-item.vue'
+export { default as PageHeaderMetadataTimeItem } from './page-header/metadata/page-header-metadata-time-item.vue'
+export { default as PageHeaderActions } from './page-header/page-header-actions.vue'
+export { default as PageHeaderBadgeItem } from './page-header/page-header-badge-item.vue'
+export { default as PageHeaderObjectAvatarLeading } from './page-header/page-header-object-avatar-leading.vue'
+export { default as PageHeaderUserAvatarLeading } from './page-header/page-header-user-avatar-leading.vue'
 export type {
-	PageHeaderAction,
-	PageHeaderActionPrompt,
-	PageHeaderBadge,
-	PageHeaderLeading,
-	PageHeaderMetadataItem,
+	PageHeaderClass,
+	PageHeaderClickHandler,
+	PageHeaderIconProps,
+	PageHeaderInteractiveProps,
+	PageHeaderMetadataItemProps,
 	PageHeaderProps,
+	PageHeaderTarget,
 } from './page-header/types'
 export { default as Pagination } from './Pagination.vue'
 export { default as PopoutMenu } from './PopoutMenu.vue'
diff --git a/packages/ui/src/components/base/page-header/index.vue b/packages/ui/src/components/base/page-header/index.vue
index 07f241d08b..48a0c9517a 100644
--- a/packages/ui/src/components/base/page-header/index.vue
+++ b/packages/ui/src/components/base/page-header/index.vue
@@ -2,7 +2,9 @@
 	<div class="flex flex-col gap-2" :class="rootClass">
 		<div class="flex flex-wrap items-start gap-4 max-md:flex-col" :class="rowClass">
 			<div class="flex min-w-0 flex-1 gap-4" :class="mainClass">
-				<PageHeaderLeading :items="leadingItems" />
+				<div v-if="$slots.leading" class="flex shrink-0 items-center gap-4">
+					<slot name="leading" />
+				</div>
 
 				<div class="flex min-w-0 flex-col justify-center gap-2">
 					<div class="flex flex-col justify-center gap-1.5">
@@ -13,26 +15,24 @@
 							>
 								{{ title }}
 							</h1>
-							<PageHeaderBadges :badges="badges" />
+							<slot name="badges" />
 						</div>
 						<p v-if="hasSummary" class="m-0 max-w-[44rem]" :class="summaryClass">
 							<slot name="summary">{{ summary }}</slot>
 						</p>
 					</div>
 
-					<PageHeaderMetadataList
-						v-if="metadata.length"
-						:items="metadata"
-						wrapper-class="flex flex-wrap gap-3 max-md:hidden"
-					/>
+					<div v-if="$slots.metadata" class="max-md:hidden">
+						<slot name="metadata" />
+					</div>
 				</div>
 			</div>
 
-			<PageHeaderActions :actions="actions" />
+			<slot name="actions" />
 		</div>
 
-		<div v-if="metadata.length" class="flex justify-between md:hidden">
-			<PageHeaderMetadataList :items="metadata" wrapper-class="flex flex-wrap gap-3" />
+		<div v-if="$slots.metadata" class="flex justify-between md:hidden">
+			<slot name="metadata" />
 		</div>
 	</div>
 </template>
@@ -40,18 +40,10 @@
 <script setup lang="ts">
 import { computed, useSlots } from 'vue'
 
-import PageHeaderActions from './page-header-actions.vue'
-import PageHeaderBadges from './page-header-badges.vue'
-import PageHeaderLeading from './page-header-leading.vue'
-import PageHeaderMetadataList from './page-header-metadata-list.vue'
-import type { PageHeaderLeading as PageHeaderLeadingType, PageHeaderProps } from './types'
+import type { PageHeaderProps } from './types'
 
 const props = withDefaults(defineProps<PageHeaderProps>(), {
 	summary: null,
-	leading: null,
-	badges: () => [],
-	metadata: () => [],
-	actions: () => [],
 	headerClass: '',
 	rowClass: '',
 	mainClass: '',
@@ -64,10 +56,6 @@ const props = withDefaults(defineProps<PageHeaderProps>(), {
 
 const slots = useSlots()
 
-const leadingItems = computed<PageHeaderLeadingType[]>(() => {
-	if (!props.leading) return []
-	return Array.isArray(props.leading) ? props.leading : [props.leading]
-})
 const rootClass = computed(() => [
 	props.divider ? 'border-0 border-b border-solid border-divider' : '',
 	props.bottomPadding ? 'pb-4' : '',
diff --git a/packages/ui/src/components/base/page-header/metadata/index.vue b/packages/ui/src/components/base/page-header/metadata/index.vue
new file mode 100644
index 0000000000..277508684f
--- /dev/null
+++ b/packages/ui/src/components/base/page-header/metadata/index.vue
@@ -0,0 +1,12 @@
+<template>
+	<div class="page-header-metadata flex min-w-0 flex-wrap items-center gap-x-2 gap-y-2">
+		<slot />
+	</div>
+</template>
+
+<style scoped>
+.page-header-metadata
+	:deep([data-page-header-metadata-item]:first-child .page-header-metadata-item-divider) {
+	display: none;
+}
+</style>
diff --git a/packages/ui/src/components/base/page-header/metadata/page-header-metadata-item.vue b/packages/ui/src/components/base/page-header/metadata/page-header-metadata-item.vue
new file mode 100644
index 0000000000..ee8c7e35fd
--- /dev/null
+++ b/packages/ui/src/components/base/page-header/metadata/page-header-metadata-item.vue
@@ -0,0 +1,89 @@
+<template>
+	<div :class="rootClass" data-page-header-metadata-item v-bind="$attrs">
+		<BulletDivider class="page-header-metadata-item-divider shrink-0" />
+		<AutoLink
+			v-if="to && !disabled"
+			v-tooltip="tooltip"
+			:to="to"
+			:aria-label="ariaLabel"
+			:link-class="contentClassString"
+		>
+			<component
+				:is="icon"
+				v-if="icon"
+				:class="iconClass ?? defaultIconClass"
+				aria-hidden="true"
+				v-bind="iconProps"
+			/>
+			<slot />
+		</AutoLink>
+		<button
+			v-else-if="action || disabled"
+			v-tooltip="tooltip"
+			type="button"
+			:disabled="disabled"
+			:aria-label="ariaLabel"
+			:class="contentClass"
+			@click="handleClick"
+		>
+			<component
+				:is="icon"
+				v-if="icon"
+				:class="iconClass ?? defaultIconClass"
+				aria-hidden="true"
+				v-bind="iconProps"
+			/>
+			<slot />
+		</button>
+		<div v-else v-tooltip="tooltip" :aria-label="ariaLabel" :class="contentClass">
+			<component
+				:is="icon"
+				v-if="icon"
+				:class="iconClass ?? defaultIconClass"
+				aria-hidden="true"
+				v-bind="iconProps"
+			/>
+			<slot />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import AutoLink from '../../AutoLink.vue'
+import BulletDivider from '../../BulletDivider.vue'
+import type { PageHeaderMetadataItemProps } from '../types'
+
+defineOptions({
+	inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<PageHeaderMetadataItemProps>(), {
+	icon: undefined,
+	iconProps: undefined,
+	iconClass: undefined,
+	tooltip: undefined,
+	ariaLabel: undefined,
+	to: undefined,
+	action: undefined,
+	disabled: false,
+})
+
+const defaultIconClass = 'block size-5 shrink-0 text-current'
+const baseClass =
+	'flex min-w-0 items-center gap-2 font-medium leading-none text-secondary text-nowrap'
+const contentBaseClass = 'inline-flex min-w-0 items-center gap-2 text-inherit'
+const interactiveClass = 'm-0 cursor-pointer border-0 bg-transparent p-0 hover:underline'
+
+const rootClass = computed(() => [baseClass, props.disabled ? 'cursor-not-allowed opacity-60' : ''])
+const contentClass = computed(() => [
+	contentBaseClass,
+	props.to || props.action ? interactiveClass : '',
+])
+const contentClassString = computed(() => contentClass.value.filter(Boolean).join(' '))
+
+function handleClick(event: MouseEvent) {
+	void props.action?.(event)
+}
+</script>
diff --git a/packages/ui/src/components/base/page-header/metadata/page-header-metadata-number-item.vue b/packages/ui/src/components/base/page-header/metadata/page-header-metadata-number-item.vue
new file mode 100644
index 0000000000..0d42d97153
--- /dev/null
+++ b/packages/ui/src/components/base/page-header/metadata/page-header-metadata-number-item.vue
@@ -0,0 +1,59 @@
+<template>
+	<PageHeaderMetadataItem
+		:icon="icon"
+		:icon-props="iconProps"
+		:icon-class="iconClass"
+		:tooltip="resolvedTooltip"
+		:aria-label="ariaLabel"
+		:to="to"
+		:action="action"
+		:disabled="disabled"
+	>
+		<span>{{ formattedValue }}</span>
+		<span v-if="label">{{ label }}</span>
+	</PageHeaderMetadataItem>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import type { PageHeaderMetadataItemProps } from '../types'
+import PageHeaderMetadataItem from './page-header-metadata-item.vue'
+
+const props = withDefaults(
+	defineProps<
+		PageHeaderMetadataItemProps & {
+			value: number
+			label?: string
+			locale?: string
+			compact?: boolean
+		}
+	>(),
+	{
+		label: '',
+		locale: undefined,
+		compact: true,
+		icon: undefined,
+		iconProps: undefined,
+		iconClass: undefined,
+		tooltip: undefined,
+		ariaLabel: undefined,
+		to: undefined,
+		action: undefined,
+		disabled: false,
+	},
+)
+
+const formattedValue = computed(() =>
+	new Intl.NumberFormat(props.locale, {
+		notation: props.compact ? 'compact' : 'standard',
+		maximumFractionDigits: props.compact ? 1 : 0,
+	}).format(props.value),
+)
+const fullValue = computed(() => new Intl.NumberFormat(props.locale).format(props.value))
+const resolvedTooltip = computed(() => {
+	if (props.tooltip) return props.tooltip
+	if (!props.compact || formattedValue.value === fullValue.value) return undefined
+	return [fullValue.value, props.label].filter(Boolean).join(' ')
+})
+</script>
diff --git a/packages/ui/src/components/base/page-header/metadata/page-header-metadata-tags-item.vue b/packages/ui/src/components/base/page-header/metadata/page-header-metadata-tags-item.vue
new file mode 100644
index 0000000000..9986801a89
--- /dev/null
+++ b/packages/ui/src/components/base/page-header/metadata/page-header-metadata-tags-item.vue
@@ -0,0 +1,33 @@
+<template>
+	<PageHeaderMetadataItem
+		class="!text-wrap"
+		:icon="icon"
+		:icon-props="iconProps"
+		:icon-class="iconClass"
+		:tooltip="tooltip"
+		:aria-label="ariaLabel"
+		:to="to"
+		:action="action"
+		:disabled="disabled"
+	>
+		<div class="flex min-w-0 flex-wrap gap-2">
+			<slot />
+		</div>
+	</PageHeaderMetadataItem>
+</template>
+
+<script setup lang="ts">
+import type { PageHeaderMetadataItemProps } from '../types'
+import PageHeaderMetadataItem from './page-header-metadata-item.vue'
+
+withDefaults(defineProps<PageHeaderMetadataItemProps>(), {
+	icon: undefined,
+	iconProps: undefined,
+	iconClass: undefined,
+	tooltip: undefined,
+	ariaLabel: undefined,
+	to: undefined,
+	action: undefined,
+	disabled: false,
+})
+</script>
diff --git a/packages/ui/src/components/base/page-header/metadata/page-header-metadata-time-item.vue b/packages/ui/src/components/base/page-header/metadata/page-header-metadata-time-item.vue
new file mode 100644
index 0000000000..b223a0ce2d
--- /dev/null
+++ b/packages/ui/src/components/base/page-header/metadata/page-header-metadata-time-item.vue
@@ -0,0 +1,87 @@
+<template>
+	<PageHeaderMetadataItem
+		:icon="icon"
+		:icon-props="iconProps"
+		:icon-class="iconClass"
+		:tooltip="resolvedTooltip"
+		:aria-label="ariaLabel"
+		:to="to"
+		:action="action"
+		:disabled="disabled"
+	>
+		<span>{{ displayLabel }}</span>
+	</PageHeaderMetadataItem>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import type { PageHeaderMetadataItemProps } from '../types'
+import PageHeaderMetadataItem from './page-header-metadata-item.vue'
+
+const props = withDefaults(
+	defineProps<
+		PageHeaderMetadataItemProps & {
+			date: string | number | Date
+			label?: string
+			locale?: string
+			relative?: boolean
+		}
+	>(),
+	{
+		label: '',
+		locale: undefined,
+		relative: true,
+		icon: undefined,
+		iconProps: undefined,
+		iconClass: undefined,
+		tooltip: undefined,
+		ariaLabel: undefined,
+		to: undefined,
+		action: undefined,
+		disabled: false,
+	},
+)
+
+const parsedDate = computed(() => {
+	const date = props.date instanceof Date ? props.date : new Date(props.date)
+	return Number.isNaN(date.getTime()) ? null : date
+})
+const absoluteDate = computed(() => {
+	if (!parsedDate.value) return ''
+	return new Intl.DateTimeFormat(props.locale, {
+		dateStyle: 'medium',
+		timeStyle: 'short',
+	}).format(parsedDate.value)
+})
+const formattedDate = computed(() => {
+	if (!parsedDate.value) return ''
+	if (!props.relative) return absoluteDate.value
+	return formatRelativeDate(parsedDate.value, props.locale)
+})
+const resolvedTooltip = computed(() => props.tooltip ?? (absoluteDate.value || undefined))
+const displayLabel = computed(() => [props.label, formattedDate.value].filter(Boolean).join(' '))
+
+function formatRelativeDate(date: Date, locale?: string) {
+	const diffSeconds = (date.getTime() - Date.now()) / 1000
+	const absoluteSeconds = Math.abs(diffSeconds)
+	const formatter = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' })
+
+	if (absoluteSeconds < 60) {
+		return formatter.format(Math.round(diffSeconds), 'second')
+	}
+	if (absoluteSeconds < 3600) {
+		return formatter.format(Math.round(diffSeconds / 60), 'minute')
+	}
+	if (absoluteSeconds < 86400) {
+		return formatter.format(Math.round(diffSeconds / 3600), 'hour')
+	}
+	if (absoluteSeconds < 2592000) {
+		return formatter.format(Math.round(diffSeconds / 86400), 'day')
+	}
+	if (absoluteSeconds < 31536000) {
+		return formatter.format(Math.round(diffSeconds / 2592000), 'month')
+	}
+	return formatter.format(Math.round(diffSeconds / 31536000), 'year')
+}
+</script>
diff --git a/packages/ui/src/components/base/page-header/page-header-action-content.vue b/packages/ui/src/components/base/page-header/page-header-action-content.vue
deleted file mode 100644
index c8edf02ef2..0000000000
--- a/packages/ui/src/components/base/page-header/page-header-action-content.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-	<component
-		:is="action.icon"
-		v-if="action.icon"
-		:class="action.iconClass"
-		aria-hidden="true"
-		v-bind="action.iconProps"
-	/>
-	<span v-if="!action.labelHidden && !action.circular">{{ action.label }}</span>
-</template>
-
-<script setup lang="ts">
-import type { PageHeaderAction } from './types'
-
-defineProps<{
-	action: PageHeaderAction
-}>()
-</script>
diff --git a/packages/ui/src/components/base/page-header/page-header-action-prompt-popper.vue b/packages/ui/src/components/base/page-header/page-header-action-prompt-popper.vue
deleted file mode 100644
index b38a185944..0000000000
--- a/packages/ui/src/components/base/page-header/page-header-action-prompt-popper.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-	<div class="grid grid-cols-[min-content] gap-1">
-		<div class="flex min-w-48 items-center justify-between gap-8">
-			<h3 class="m-0 flex items-center gap-2 whitespace-nowrap text-base font-bold text-contrast">
-				{{ prompt.title }}
-				<span
-					v-if="prompt.badge"
-					class="inline-flex items-center rounded-full border border-solid border-brand-highlight bg-brand-highlight px-2 py-1 text-sm font-semibold leading-none text-brand"
-				>
-					{{ prompt.badge }}
-				</span>
-			</h3>
-			<ButtonStyled size="small" circular>
-				<button v-tooltip="prompt.dismissLabel" type="button" @click="prompt.onDismiss?.()">
-					<XIcon aria-hidden="true" />
-				</button>
-			</ButtonStyled>
-		</div>
-		<p class="m-0 text-wrap text-sm font-medium leading-tight text-secondary">
-			{{ prompt.description }}
-		</p>
-		<p v-if="prompt.footer" class="m-0 text-wrap text-sm font-bold text-primary">
-			{{ prompt.footer }}
-		</p>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { XIcon } from '@modrinth/assets'
-
-import ButtonStyled from '../ButtonStyled.vue'
-import type { PageHeaderActionPrompt } from './types'
-
-defineProps<{
-	prompt: PageHeaderActionPrompt
-}>()
-</script>
diff --git a/packages/ui/src/components/base/page-header/page-header-action-with-prompt.vue b/packages/ui/src/components/base/page-header/page-header-action-with-prompt.vue
deleted file mode 100644
index 653131f51a..0000000000
--- a/packages/ui/src/components/base/page-header/page-header-action-with-prompt.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-	<Tooltip
-		theme="dismissable-prompt"
-		:triggers="[]"
-		:shown="action.prompt?.shown"
-		:auto-hide="false"
-		:placement="action.prompt?.placement ?? 'bottom'"
-	>
-		<PageHeaderAction :action="action" @dismiss-prompt="dismissPrompt" />
-		<template v-if="action.prompt" #popper>
-			<PageHeaderActionPromptPopper :prompt="action.prompt" />
-		</template>
-	</Tooltip>
-</template>
-
-<script setup lang="ts">
-import { Tooltip } from 'floating-vue'
-
-import PageHeaderAction from './page-header-action.vue'
-import PageHeaderActionPromptPopper from './page-header-action-prompt-popper.vue'
-import type { PageHeaderAction as PageHeaderActionType } from './types'
-
-const props = defineProps<{
-	action: PageHeaderActionType
-}>()
-
-function dismissPrompt() {
-	if (props.action.prompt?.shown) {
-		props.action.prompt.onDismiss?.()
-	}
-}
-</script>
diff --git a/packages/ui/src/components/base/page-header/page-header-action.vue b/packages/ui/src/components/base/page-header/page-header-action.vue
deleted file mode 100644
index 5ec609551f..0000000000
--- a/packages/ui/src/components/base/page-header/page-header-action.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-	<component
-		:is="action.component"
-		v-if="'kind' in action && action.kind === 'component'"
-		:class="action.class"
-		v-bind="action.componentProps"
-	/>
-	<JoinedButtons
-		v-else-if="'joinedActions' in action && action.joinedActions?.length"
-		:actions="joinedActions"
-		:color="joinedActionColor(action.color)"
-		:size="action.size ?? 'large'"
-		:disabled="action.disabled"
-		:primary-disabled="action.primaryDisabled"
-		:dropdown-disabled="action.dropdownDisabled"
-		:primary-muted="action.primaryMuted"
-	/>
-	<ButtonStyled
-		v-else
-		:color="action.color ?? 'standard'"
-		:size="action.size ?? 'large'"
-		:type="action.type ?? 'standard'"
-		:circular="action.circular ?? action.labelHidden ?? false"
-	>
-		<TeleportOverflowMenu
-			v-if="'menuActions' in action && action.menuActions?.length"
-			:options="action.menuActions"
-			:tooltip="action.tooltip"
-			:aria-label="actionLabel"
-			:disabled="action.disabled"
-			@open="emit('dismiss-prompt')"
-		>
-			<PageHeaderActionContent :action="action" />
-		</TeleportOverflowMenu>
-		<PageHeaderInteractiveWrapper
-			v-else
-			:to="'to' in action ? action.to : undefined"
-			clickable
-			:disabled="action.disabled"
-			:tooltip="action.tooltip"
-			:aria-label="actionLabel"
-			base-class=""
-			@click="handleClick"
-		>
-			<PageHeaderActionContent :action="action" />
-		</PageHeaderInteractiveWrapper>
-	</ButtonStyled>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import ButtonStyled from '../ButtonStyled.vue'
-import JoinedButtons, { type JoinedButtonAction } from '../JoinedButtons.vue'
-import TeleportOverflowMenu from '../TeleportOverflowMenu.vue'
-import PageHeaderActionContent from './page-header-action-content.vue'
-import PageHeaderInteractiveWrapper from './page-header-interactive-wrapper.vue'
-import type { ButtonColor, JoinedButtonColor, PageHeaderAction } from './types'
-
-const props = defineProps<{
-	action: PageHeaderAction
-}>()
-
-const emit = defineEmits<{
-	'dismiss-prompt': []
-}>()
-
-const actionLabel = computed(
-	() => props.action.ariaLabel ?? props.action.tooltip ?? props.action.label,
-)
-
-const joinedActions = computed<JoinedButtonAction[]>(() => {
-	if (!('joinedActions' in props.action)) return []
-
-	return props.action.joinedActions.map((joinedAction) => ({
-		...joinedAction,
-		action: () => {
-			emit('dismiss-prompt')
-			joinedAction.action()
-		},
-	}))
-})
-
-function handleClick(event: MouseEvent) {
-	emit('dismiss-prompt')
-	void props.action.onClick?.(event)
-}
-
-function joinedActionColor(color?: ButtonColor): JoinedButtonColor | undefined {
-	return color === 'medal-promo' ? 'standard' : color
-}
-</script>
diff --git a/packages/ui/src/components/base/page-header/page-header-actions.vue b/packages/ui/src/components/base/page-header/page-header-actions.vue
index c2fe7e17ed..a515eecb50 100644
--- a/packages/ui/src/components/base/page-header/page-header-actions.vue
+++ b/packages/ui/src/components/base/page-header/page-header-actions.vue
@@ -1,18 +1,5 @@
 <template>
-	<div v-if="actions.length" class="flex flex-wrap items-center gap-2">
-		<template v-for="action in actions" :key="action.id">
-			<PageHeaderActionWithPrompt v-if="action.prompt" :action="action" />
-			<PageHeaderAction v-else :action="action" />
-		</template>
+	<div class="flex flex-wrap items-center gap-2">
+		<slot />
 	</div>
 </template>
-
-<script setup lang="ts">
-import PageHeaderAction from './page-header-action.vue'
-import PageHeaderActionWithPrompt from './page-header-action-with-prompt.vue'
-import type { PageHeaderAction as PageHeaderActionType } from './types'
-
-defineProps<{
-	actions: PageHeaderActionType[]
-}>()
-</script>
diff --git a/packages/ui/src/components/base/page-header/page-header-badge-content.vue b/packages/ui/src/components/base/page-header/page-header-badge-content.vue
deleted file mode 100644
index 563f8b96a5..0000000000
--- a/packages/ui/src/components/base/page-header/page-header-badge-content.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-	<component :is="badge.icon" v-if="badge.icon" aria-hidden="true" v-bind="badge.iconProps" />
-	<span v-if="badge.label">{{ badge.label }}</span>
-</template>
-
-<script setup lang="ts">
-import type { PageHeaderBadgeContent } from './types'
-
-defineProps<{
-	badge: PageHeaderBadgeContent
-}>()
-</script>
diff --git a/packages/ui/src/components/base/page-header/page-header-badge-item.vue b/packages/ui/src/components/base/page-header/page-header-badge-item.vue
new file mode 100644
index 0000000000..c7f4a42a39
--- /dev/null
+++ b/packages/ui/src/components/base/page-header/page-header-badge-item.vue
@@ -0,0 +1,82 @@
+<template>
+	<AutoLink
+		v-if="to && !disabled"
+		v-tooltip="tooltip"
+		:to="to"
+		:aria-label="ariaLabel"
+		:link-class="badgeClassString"
+		v-bind="$attrs"
+	>
+		<component
+			:is="icon"
+			v-if="icon"
+			:class="iconClass ?? defaultIconClass"
+			aria-hidden="true"
+			v-bind="iconProps"
+		/>
+		<slot />
+	</AutoLink>
+	<button
+		v-else-if="action || disabled"
+		v-tooltip="tooltip"
+		type="button"
+		:disabled="disabled"
+		:aria-label="ariaLabel"
+		:class="badgeClass"
+		v-bind="$attrs"
+		@click="handleClick"
+	>
+		<component
+			:is="icon"
+			v-if="icon"
+			:class="iconClass ?? defaultIconClass"
+			aria-hidden="true"
+			v-bind="iconProps"
+		/>
+		<slot />
+	</button>
+	<div v-else v-tooltip="tooltip" :aria-label="ariaLabel" :class="badgeClass" v-bind="$attrs">
+		<component
+			:is="icon"
+			v-if="icon"
+			:class="iconClass ?? defaultIconClass"
+			aria-hidden="true"
+			v-bind="iconProps"
+		/>
+		<slot />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import AutoLink from '../AutoLink.vue'
+import type { PageHeaderIconProps, PageHeaderInteractiveProps } from './types'
+
+defineOptions({
+	inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<PageHeaderIconProps & PageHeaderInteractiveProps>(), {
+	icon: undefined,
+	iconProps: undefined,
+	iconClass: undefined,
+	tooltip: undefined,
+	ariaLabel: undefined,
+	to: undefined,
+	action: undefined,
+	disabled: false,
+})
+
+const badgeClass = computed(() => [
+	'inline-flex items-center gap-1 rounded-full border border-solid border-surface-5 bg-button-bg px-2 py-1 text-sm font-semibold leading-none text-secondary text-nowrap',
+	props.to || props.action ? 'm-0 cursor-pointer hover:underline' : '',
+	props.disabled ? 'cursor-not-allowed opacity-60' : '',
+])
+const badgeClassString = computed(() => badgeClass.value.filter(Boolean).join(' '))
+const defaultIconClass = 'block size-4 shrink-0 text-current'
+
+function handleClick(event: MouseEvent) {
+	void props.action?.(event)
+}
+</script>
diff --git a/packages/ui/src/components/base/page-header/page-header-badges.vue b/packages/ui/src/components/base/page-header/page-header-badges.vue
deleted file mode 100644
index 608e9b9c71..0000000000
--- a/packages/ui/src/components/base/page-header/page-header-badges.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-	<template v-for="badge in badges" :key="badge.id">
-		<component
-			:is="badge.component"
-			v-if="badge.type === 'component'"
-			:class="badge.class"
-			v-bind="badge.componentProps"
-		/>
-		<PageHeaderInteractiveWrapper
-			v-else
-			:to="badge.to"
-			:clickable="!!badge.onClick"
-			:disabled="badge.disabled"
-			:tooltip="badge.tooltip"
-			:aria-label="badgeLabel(badge)"
-			:base-class="badgeClass(badge)"
-			:interactive-class="interactiveBadgeClass"
-			:style="badge.style"
-			@click="(event) => badge.onClick?.(event)"
-		>
-			<PageHeaderBadgeContent :badge="badge" />
-		</PageHeaderInteractiveWrapper>
-	</template>
-</template>
-
-<script setup lang="ts">
-import PageHeaderBadgeContent from './page-header-badge-content.vue'
-import PageHeaderInteractiveWrapper from './page-header-interactive-wrapper.vue'
-import type { PageHeaderBadge, PageHeaderBadgeContent as PageHeaderBadgeContentType } from './types'
-
-defineProps<{
-	badges: PageHeaderBadge[]
-}>()
-
-const baseBadgeClass =
-	'inline-flex items-center gap-1 rounded-full border border-solid border-surface-5 bg-button-bg px-2 py-1 text-sm font-semibold leading-none text-secondary text-nowrap [&>svg]:size-4 [&>svg]:shrink-0'
-const interactiveBadgeClass = 'm-0 cursor-pointer hover:underline'
-
-function badgeClass(badge: PageHeaderBadgeContentType) {
-	return [baseBadgeClass, badge.class]
-}
-
-function badgeLabel(badge: PageHeaderBadgeContentType) {
-	return badge.ariaLabel ?? badge.label ?? badge.tooltip
-}
-</script>
diff --git a/packages/ui/src/components/base/page-header/page-header-interactive-wrapper.vue b/packages/ui/src/components/base/page-header/page-header-interactive-wrapper.vue
deleted file mode 100644
index f02fa28310..0000000000
--- a/packages/ui/src/components/base/page-header/page-header-interactive-wrapper.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-	<AutoLink
-		v-if="to && !disabled"
-		v-tooltip="tooltip"
-		:to="to"
-		:aria-label="ariaLabel"
-		:class="resolvedClass"
-		:style="style"
-		@click="emit('click', $event)"
-	>
-		<slot />
-	</AutoLink>
-	<button
-		v-else-if="isInteractive"
-		v-tooltip="tooltip"
-		type="button"
-		:disabled="disabled"
-		:aria-label="ariaLabel"
-		:class="resolvedClass"
-		:style="style"
-		@click="emit('click', $event)"
-	>
-		<slot />
-	</button>
-	<div v-else v-tooltip="tooltip" :class="resolvedClass" :style="style">
-		<slot />
-	</div>
-</template>
-
-<script setup lang="ts">
-import type { StyleValue } from 'vue'
-import { computed } from 'vue'
-
-import AutoLink from '../AutoLink.vue'
-import type { PageHeaderClass, PageHeaderTarget } from './types'
-
-const props = withDefaults(
-	defineProps<{
-		to?: PageHeaderTarget
-		clickable?: boolean
-		disabled?: boolean
-		tooltip?: string
-		ariaLabel?: string
-		baseClass: PageHeaderClass
-		interactiveClass?: PageHeaderClass
-		passiveClass?: PageHeaderClass
-		disabledClass?: PageHeaderClass
-		style?: StyleValue
-	}>(),
-	{
-		to: undefined,
-		clickable: false,
-		disabled: false,
-		tooltip: undefined,
-		ariaLabel: undefined,
-		interactiveClass: undefined,
-		passiveClass: undefined,
-		disabledClass: 'cursor-not-allowed opacity-60',
-		style: undefined,
-	},
-)
-
-const emit = defineEmits<{
-	click: [event: MouseEvent]
-}>()
-
-const isInteractive = computed(() => !!props.to || props.clickable || props.disabled)
-
-const resolvedClass = computed(() => [
-	props.baseClass,
-	isInteractive.value ? props.interactiveClass : props.passiveClass,
-	props.disabled ? props.disabledClass : '',
-])
-</script>
diff --git a/packages/ui/src/components/base/page-header/page-header-leading.vue b/packages/ui/src/components/base/page-header/page-header-leading.vue
deleted file mode 100644
index 5b109f1d9f..0000000000
--- a/packages/ui/src/components/base/page-header/page-header-leading.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-	<div v-if="items.length" class="flex shrink-0 items-center gap-4">
-		<template v-for="(item, index) in items" :key="item.id ?? index">
-			<div v-if="item.type === 'button'" :class="item.wrapperClass ?? defaultButtonWrapperClass">
-				<ButtonStyled
-					circular
-					:color="item.color ?? 'standard'"
-					:size="item.size ?? 'large'"
-					:type="item.buttonType ?? 'standard'"
-				>
-					<PageHeaderInteractiveWrapper
-						:to="item.to"
-						:clickable="!!item.onClick"
-						:disabled="item.disabled"
-						:tooltip="item.tooltip"
-						:aria-label="leadingLabel(item)"
-						base-class=""
-						@click="(event) => item.onClick?.(event)"
-					>
-						<component
-							:is="item.icon"
-							v-if="item.icon"
-							aria-hidden="true"
-							v-bind="item.iconProps"
-						/>
-					</PageHeaderInteractiveWrapper>
-				</ButtonStyled>
-			</div>
-			<Avatar
-				v-else-if="item.type === 'avatar'"
-				:src="item.src"
-				:alt="item.alt ?? ''"
-				:size="item.avatarSize ?? '64px'"
-				:tint-by="item.tintBy ?? null"
-				:circle="item.circle ?? false"
-				:no-shadow="item.noShadow ?? false"
-				:raised="item.raised ?? false"
-				:loading="item.loading ?? 'eager'"
-				:class="item.class"
-			/>
-			<component :is="item.component" v-else :class="item.class" v-bind="item.componentProps" />
-		</template>
-	</div>
-</template>
-
-<script setup lang="ts">
-import Avatar from '../Avatar.vue'
-import ButtonStyled from '../ButtonStyled.vue'
-import PageHeaderInteractiveWrapper from './page-header-interactive-wrapper.vue'
-import type { PageHeaderButtonLeading, PageHeaderLeading } from './types'
-
-defineProps<{
-	items: PageHeaderLeading[]
-}>()
-
-const defaultButtonWrapperClass = 'flex size-16 shrink-0 items-center justify-center'
-
-function leadingLabel(item: PageHeaderButtonLeading) {
-	return item.ariaLabel ?? item.tooltip ?? 'Header action'
-}
-</script>
diff --git a/packages/ui/src/components/base/page-header/page-header-metadata-item-content.vue b/packages/ui/src/components/base/page-header/page-header-metadata-item-content.vue
deleted file mode 100644
index 1d09b39e1e..0000000000
--- a/packages/ui/src/components/base/page-header/page-header-metadata-item-content.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-	<component
-		:is="item.icon"
-		v-if="item.icon"
-		class="flex size-5 shrink-0 text-current"
-		aria-hidden="true"
-		v-bind="item.iconProps"
-	/>
-	<Avatar
-		v-if="item.avatarSrc"
-		:src="item.avatarSrc"
-		:alt="item.avatarAlt ?? ''"
-		:size="item.avatarSize ?? '24px'"
-		:tint-by="item.avatarTintBy ?? null"
-		:circle="item.avatarCircle ?? false"
-		:no-shadow="item.avatarNoShadow ?? false"
-		:raised="item.avatarRaised ?? false"
-	/>
-	<span v-if="item.label" :class="['truncate', item.labelClass]">
-		{{ item.label }}
-	</span>
-	<span
-		v-if="item.value !== undefined && item.value !== null"
-		:class="['truncate', item.valueClass]"
-	>
-		{{ item.value }}
-	</span>
-	<div v-if="item.tags?.length" class="flex flex-wrap gap-2">
-		<TagItem v-for="tag in item.tags" :key="tag.id" :action="tag.onClick">
-			<FormattedTag v-if="tag.tag" :tag="tag.tag" />
-			<span v-else>{{ tag.label }}</span>
-		</TagItem>
-	</div>
-</template>
-
-<script setup lang="ts">
-import Avatar from '../Avatar.vue'
-import FormattedTag from '../FormattedTag.vue'
-import TagItem from '../TagItem.vue'
-import type { PageHeaderMetadataContentItem } from './types'
-
-defineProps<{
-	item: PageHeaderMetadataContentItem
-}>()
-</script>
diff --git a/packages/ui/src/components/base/page-header/page-header-metadata-list.vue b/packages/ui/src/components/base/page-header/page-header-metadata-list.vue
deleted file mode 100644
index f9f5b76845..0000000000
--- a/packages/ui/src/components/base/page-header/page-header-metadata-list.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-	<div :class="wrapperClass">
-		<div class="flex min-w-0 flex-wrap items-center gap-2">
-			<template v-for="(item, index) in items" :key="item.id">
-				<BulletDivider v-if="index > 0" class="shrink-0" />
-				<component
-					:is="item.component"
-					v-if="item.type === 'component'"
-					:class="item.class"
-					v-bind="item.componentProps"
-				/>
-				<PageHeaderInteractiveWrapper
-					v-else
-					:to="item.to"
-					:clickable="!!item.onClick"
-					:disabled="item.disabled"
-					:tooltip="item.tooltip"
-					:aria-label="metadataLabel(item)"
-					:base-class="metadataClass(item)"
-					:interactive-class="interactiveMetadataClass"
-					@click="(event) => item.onClick?.(event)"
-				>
-					<PageHeaderMetadataItemContent :item="item" />
-				</PageHeaderInteractiveWrapper>
-			</template>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import BulletDivider from '../BulletDivider.vue'
-import PageHeaderInteractiveWrapper from './page-header-interactive-wrapper.vue'
-import PageHeaderMetadataItemContent from './page-header-metadata-item-content.vue'
-import type {
-	PageHeaderClass,
-	PageHeaderMetadataContentItem,
-	PageHeaderMetadataItem,
-} from './types'
-
-defineProps<{
-	items: PageHeaderMetadataItem[]
-	wrapperClass?: PageHeaderClass
-}>()
-
-const baseMetadataClass = 'flex min-w-0 items-center gap-2 font-medium text-secondary text-nowrap'
-const interactiveMetadataClass = 'm-0 cursor-pointer border-0 bg-transparent p-0 hover:underline'
-
-function metadataClass(item: PageHeaderMetadataContentItem) {
-	return [baseMetadataClass, item.class]
-}
-
-function metadataLabel(item: PageHeaderMetadataContentItem) {
-	return item.ariaLabel ?? item.label ?? undefined
-}
-</script>
diff --git a/packages/ui/src/components/base/page-header/page-header-object-avatar-leading.vue b/packages/ui/src/components/base/page-header/page-header-object-avatar-leading.vue
new file mode 100644
index 0000000000..97af9fc209
--- /dev/null
+++ b/packages/ui/src/components/base/page-header/page-header-object-avatar-leading.vue
@@ -0,0 +1,39 @@
+<template>
+	<Avatar
+		:src="src"
+		:alt="alt"
+		:size="size"
+		:tint-by="tintBy"
+		:circle="circle"
+		:no-shadow="noShadow"
+		:raised="raised"
+		:loading="loading"
+		v-bind="$attrs"
+	/>
+</template>
+
+<script setup lang="ts">
+import Avatar from '../Avatar.vue'
+
+withDefaults(
+	defineProps<{
+		src?: string | null
+		alt: string
+		size?: string
+		tintBy?: string | null
+		circle?: boolean
+		noShadow?: boolean
+		raised?: boolean
+		loading?: 'eager' | 'lazy'
+	}>(),
+	{
+		src: null,
+		size: '64px',
+		tintBy: null,
+		circle: false,
+		noShadow: false,
+		raised: false,
+		loading: 'eager',
+	},
+)
+</script>
diff --git a/packages/ui/src/components/base/page-header/page-header-user-avatar-leading.vue b/packages/ui/src/components/base/page-header/page-header-user-avatar-leading.vue
new file mode 100644
index 0000000000..58bb3f455c
--- /dev/null
+++ b/packages/ui/src/components/base/page-header/page-header-user-avatar-leading.vue
@@ -0,0 +1,37 @@
+<template>
+	<Avatar
+		:src="src"
+		:alt="username"
+		:size="size"
+		:tint-by="tintBy ?? username"
+		circle
+		:no-shadow="noShadow"
+		:raised="raised"
+		:loading="loading"
+		v-bind="$attrs"
+	/>
+</template>
+
+<script setup lang="ts">
+import Avatar from '../Avatar.vue'
+
+withDefaults(
+	defineProps<{
+		src?: string | null
+		username: string
+		size?: string
+		tintBy?: string | null
+		noShadow?: boolean
+		raised?: boolean
+		loading?: 'eager' | 'lazy'
+	}>(),
+	{
+		src: null,
+		size: '96px',
+		tintBy: null,
+		noShadow: false,
+		raised: false,
+		loading: 'eager',
+	},
+)
+</script>
diff --git a/packages/ui/src/components/base/page-header/types.ts b/packages/ui/src/components/base/page-header/types.ts
index 11088f32a6..646d92f679 100644
--- a/packages/ui/src/components/base/page-header/types.ts
+++ b/packages/ui/src/components/base/page-header/types.ts
@@ -1,252 +1,30 @@
-import type { Component, HTMLAttributes, StyleValue } from 'vue'
+import type { Component, HTMLAttributes } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 
-import type { JoinedButtonAction } from '../JoinedButtons.vue'
-import type { Item as TeleportOverflowMenuItem } from '../TeleportOverflowMenu.vue'
-
 export type PageHeaderTarget = string | RouteLocationRaw
 export type PageHeaderClass = HTMLAttributes['class']
 
-export type ButtonColor =
-	| 'standard'
-	| 'brand'
-	| 'red'
-	| 'orange'
-	| 'green'
-	| 'blue'
-	| 'purple'
-	| 'medal-promo'
-export type JoinedButtonColor = Exclude<ButtonColor, 'medal-promo'>
-export type ButtonSize = 'standard' | 'large' | 'small'
-export type ButtonType =
-	| 'standard'
-	| 'outlined'
-	| 'transparent'
-	| 'highlight'
-	| 'highlight-colored-text'
-	| 'chip'
-
-export type FloatingPlacement =
-	| 'auto'
-	| 'auto-start'
-	| 'auto-end'
-	| 'top'
-	| 'top-start'
-	| 'top-end'
-	| 'right'
-	| 'right-start'
-	| 'right-end'
-	| 'bottom'
-	| 'bottom-start'
-	| 'bottom-end'
-	| 'left'
-	| 'left-start'
-	| 'left-end'
-
 export type PageHeaderClickHandler = (event: MouseEvent) => void | Promise<void>
 
-type ComponentEscapeHatch = {
-	component: Component
-	componentProps?: Record<string, unknown>
-	class?: PageHeaderClass
-}
-
-export type PageHeaderAvatarLeading = {
-	id?: string
-	type: 'avatar'
-	src?: string | null
-	alt?: string
-	tintBy?: string | null
-	avatarSize?: string
-	circle?: boolean
-	noShadow?: boolean
-	raised?: boolean
-	loading?: 'eager' | 'lazy'
-	class?: PageHeaderClass
-}
-
-type PageHeaderButtonLeadingBase = {
-	id?: string
-	type: 'button'
+export type PageHeaderIconProps = {
 	icon?: Component
 	iconProps?: Record<string, unknown>
-	wrapperClass?: PageHeaderClass
-	tooltip?: string
-	ariaLabel?: string
-	color?: ButtonColor
-	size?: ButtonSize
-	buttonType?: ButtonType
-	disabled?: boolean
+	iconClass?: PageHeaderClass
 }
 
-export type PageHeaderButtonLeading =
-	| (PageHeaderButtonLeadingBase & {
-			to: PageHeaderTarget
-			onClick?: never
-	  })
-	| (PageHeaderButtonLeadingBase & {
-			to?: never
-			onClick: PageHeaderClickHandler
-	  })
-
-export type PageHeaderComponentLeading = {
-	id?: string
-	type: 'component'
-} & ComponentEscapeHatch
-
-export type PageHeaderLeading =
-	| PageHeaderAvatarLeading
-	| PageHeaderButtonLeading
-	| PageHeaderComponentLeading
-
-export type PageHeaderBadgeComponent = {
-	id: string
-	type: 'component'
-} & ComponentEscapeHatch
-
-export type PageHeaderBadgeContent = {
-	id: string
-	type?: 'badge'
-	label?: string
-	icon?: Component
-	iconProps?: Record<string, unknown>
+export type PageHeaderInteractiveProps = {
 	tooltip?: string
 	ariaLabel?: string
 	to?: PageHeaderTarget
-	onClick?: PageHeaderClickHandler
+	action?: PageHeaderClickHandler
 	disabled?: boolean
-	class?: PageHeaderClass
-	style?: StyleValue
-}
-
-export type PageHeaderBadge = PageHeaderBadgeComponent | PageHeaderBadgeContent
-
-export type PageHeaderMetadataTag = {
-	id: string
-	tag?: string
-	label?: string
-	onClick?: PageHeaderClickHandler
-}
-
-export type PageHeaderMetadataComponentItem = {
-	id: string
-	type: 'component'
-} & ComponentEscapeHatch
-
-export type PageHeaderMetadataContentItem = {
-	id: string
-	type?: 'text'
-	label?: string
-	value?: string | number | null
-	icon?: Component
-	iconProps?: Record<string, unknown>
-	avatarSrc?: string | null
-	avatarAlt?: string
-	avatarSize?: string
-	avatarTintBy?: string | null
-	avatarCircle?: boolean
-	avatarNoShadow?: boolean
-	avatarRaised?: boolean
-	tags?: PageHeaderMetadataTag[]
-	tooltip?: string
-	ariaLabel?: string
-	to?: PageHeaderTarget
-	onClick?: PageHeaderClickHandler
-	disabled?: boolean
-	class?: PageHeaderClass
-	labelClass?: PageHeaderClass
-	valueClass?: PageHeaderClass
-}
-
-export type PageHeaderMetadataItem = PageHeaderMetadataComponentItem | PageHeaderMetadataContentItem
-
-export type PageHeaderActionPrompt = {
-	title: string
-	description: string
-	badge?: string
-	footer?: string
-	dismissLabel?: string
-	shown?: boolean
-	placement?: FloatingPlacement
-	onDismiss?: () => void
-}
-
-type PageHeaderActionBase = {
-	id: string
-	label: string
-	icon?: Component
-	iconProps?: Record<string, unknown>
-	iconClass?: PageHeaderClass
-	tooltip?: string
-	ariaLabel?: string
-	onClick?: PageHeaderClickHandler
-	disabled?: boolean
-	labelHidden?: boolean
-	circular?: boolean
-	color?: ButtonColor
-	size?: ButtonSize
-	type?: ButtonType
-	prompt?: PageHeaderActionPrompt
-}
-
-export type PageHeaderComponentAction = PageHeaderActionBase &
-	ComponentEscapeHatch & {
-		kind: 'component'
-	}
-
-export type PageHeaderJoinedAction = PageHeaderActionBase & {
-	joinedActions: JoinedButtonAction[]
-	primaryDisabled?: boolean
-	dropdownDisabled?: boolean
-	primaryMuted?: boolean
-	kind?: never
-	component?: never
-	componentProps?: never
-	menuActions?: never
-	to?: never
-}
-
-export type PageHeaderMenuAction = PageHeaderActionBase & {
-	menuActions: TeleportOverflowMenuItem[]
-	kind?: never
-	component?: never
-	componentProps?: never
-	joinedActions?: never
-	to?: never
-}
-
-export type PageHeaderLinkAction = PageHeaderActionBase & {
-	to?: PageHeaderTarget
-	kind?: never
-	component?: never
-	componentProps?: never
-	joinedActions?: never
-	menuActions?: never
-}
-
-export type PageHeaderButtonAction = PageHeaderActionBase & {
-	kind?: never
-	component?: never
-	componentProps?: never
-	joinedActions?: never
-	menuActions?: never
-	to?: never
 }
 
-export type PageHeaderAction =
-	| PageHeaderComponentAction
-	| PageHeaderJoinedAction
-	| PageHeaderMenuAction
-	| PageHeaderLinkAction
-	| PageHeaderButtonAction
+export type PageHeaderMetadataItemProps = PageHeaderIconProps & PageHeaderInteractiveProps
 
 export type PageHeaderProps = {
 	title: string
 	summary?: string | null
-	leading?: PageHeaderLeading | PageHeaderLeading[] | null
-	badges?: PageHeaderBadge[]
-	metadata?: PageHeaderMetadataItem[]
-	actions?: PageHeaderAction[]
 	headerClass?: PageHeaderClass
 	rowClass?: PageHeaderClass
 	mainClass?: PageHeaderClass
diff --git a/packages/ui/src/stories/base/PageHeader.stories.ts b/packages/ui/src/stories/base/PageHeader.stories.ts
index de8bde78e3..096bb9125d 100644
--- a/packages/ui/src/stories/base/PageHeader.stories.ts
+++ b/packages/ui/src/stories/base/PageHeader.stories.ts
@@ -1,5 +1,7 @@
 import {
 	AffiliateIcon,
+	BoxIcon,
+	CalendarIcon,
 	ClipboardCopyIcon,
 	DownloadIcon,
 	GlobeIcon,
@@ -16,25 +18,91 @@ import {
 } from '@modrinth/assets'
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
+import AutoLink from '../../components/base/AutoLink.vue'
+import ButtonStyled from '../../components/base/ButtonStyled.vue'
+import FormattedTag from '../../components/base/FormattedTag.vue'
+import JoinedButtons from '../../components/base/JoinedButtons.vue'
 import PageHeader from '../../components/base/page-header/index.vue'
+import PageHeaderMetadata from '../../components/base/page-header/metadata/index.vue'
+import PageHeaderMetadataItem from '../../components/base/page-header/metadata/page-header-metadata-item.vue'
+import PageHeaderMetadataNumberItem from '../../components/base/page-header/metadata/page-header-metadata-number-item.vue'
+import PageHeaderMetadataTagsItem from '../../components/base/page-header/metadata/page-header-metadata-tags-item.vue'
+import PageHeaderMetadataTimeItem from '../../components/base/page-header/metadata/page-header-metadata-time-item.vue'
+import PageHeaderActions from '../../components/base/page-header/page-header-actions.vue'
+import PageHeaderBadgeItem from '../../components/base/page-header/page-header-badge-item.vue'
+import PageHeaderObjectAvatarLeading from '../../components/base/page-header/page-header-object-avatar-leading.vue'
+import PageHeaderUserAvatarLeading from '../../components/base/page-header/page-header-user-avatar-leading.vue'
+import TagItem from '../../components/base/TagItem.vue'
+import TeleportOverflowMenu from '../../components/base/TeleportOverflowMenu.vue'
 import LoaderIcon from '../../components/servers/icons/LoaderIcon.vue'
 import ServerIcon from '../../components/servers/icons/ServerIcon.vue'
 
 const noop = () => undefined
-const CustomMetadataStats = {
-	components: { DownloadIcon, HeartIcon },
-	template: `
-		<div class="flex flex-wrap items-center gap-3">
-			<div class="flex items-center gap-2 font-semibold">
-				<DownloadIcon class="h-6 w-6 text-secondary" />
-				1.2M downloads
-			</div>
-			<div class="flex items-center gap-2 font-semibold">
-				<HeartIcon class="h-6 w-6 text-secondary" />
-				50K followers
-			</div>
-		</div>
-	`,
+const categories = ['adventure', 'magic', 'technology']
+const joinedDate = new Date(Date.now() - 1000 * 60 * 60 * 24 * 365 * 6)
+const menuActions = [
+	{
+		id: 'open-folder',
+		label: 'Open folder',
+		icon: GlobeIcon,
+		action: noop,
+	},
+	{
+		id: 'copy-id',
+		label: 'Copy ID',
+		icon: ClipboardCopyIcon,
+		action: noop,
+	},
+]
+const joinedActions = [
+	{
+		id: 'stop',
+		label: 'Stop',
+		icon: StopCircleIcon,
+		action: noop,
+	},
+	{
+		id: 'kill_server',
+		label: 'Kill server',
+		icon: SlashIcon,
+		action: noop,
+	},
+]
+
+const pageHeaderIcons = {
+	AffiliateIcon,
+	BoxIcon,
+	CalendarIcon,
+	DownloadIcon,
+	Gamepad2Icon,
+	GlobeIcon,
+	HeartIcon,
+	LeftArrowIcon,
+	LinkIcon,
+	MoreVerticalIcon,
+	PlayIcon,
+	SettingsIcon,
+	TimerIcon,
+}
+
+const pageHeaderComponents = {
+	AutoLink,
+	ButtonStyled,
+	FormattedTag,
+	JoinedButtons,
+	PageHeader,
+	PageHeaderActions,
+	PageHeaderBadgeItem,
+	PageHeaderMetadata,
+	PageHeaderMetadataItem,
+	PageHeaderMetadataNumberItem,
+	PageHeaderMetadataTagsItem,
+	PageHeaderMetadataTimeItem,
+	PageHeaderObjectAvatarLeading,
+	PageHeaderUserAvatarLeading,
+	TagItem,
+	TeleportOverflowMenu,
+	...pageHeaderIcons,
 }
 
 const meta = {
@@ -54,313 +122,339 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const AppInstanceHeader: Story = {
-	args: {
-		title: 'Create: Astral',
-		leading: {
-			type: 'avatar',
-			src: null,
-			alt: 'Create: Astral',
-			tintBy: '/Users/calum/Library/Application Support/com.modrinth.theseus/profiles/astral',
+export const ProjectHeader: Story = {
+	render: () => ({
+		components: pageHeaderComponents,
+		setup() {
+			return {
+				...pageHeaderIcons,
+				categories,
+				menuActions,
+				noop,
+			}
 		},
-		metadata: [
-			{
-				id: 'game-version',
-				label: '1.20.1',
-				icon: Gamepad2Icon,
-				tooltip: 'Minecraft version',
-			},
-			{
-				id: 'loader',
-				label: 'Fabric 0.16.14',
-				icon: LoaderIcon,
-				iconProps: { loader: 'Fabric' },
-				tooltip: 'Mod loader',
-			},
-			{
-				id: 'playtime',
-				label: '12 hours',
-				icon: TimerIcon,
-				tooltip: 'Total playtime',
-			},
-		],
-		actions: [
-			{
-				id: 'play',
-				label: 'Play',
-				icon: PlayIcon,
-				color: 'brand',
-				onClick: noop,
-			},
-			{
-				id: 'settings',
-				label: 'Instance settings',
-				icon: SettingsIcon,
-				labelHidden: true,
-				tooltip: 'Instance settings',
-				onClick: noop,
-			},
-			{
-				id: 'more',
-				label: 'More actions',
-				icon: MoreVerticalIcon,
-				labelHidden: true,
-				type: 'transparent',
-				tooltip: 'More actions',
-				menuActions: [
-					{
-						id: 'open-folder',
-						label: 'Open folder',
-						icon: GlobeIcon,
-						action: noop,
-					},
-					{
-						id: 'copy-id',
-						label: 'Copy ID',
-						icon: ClipboardCopyIcon,
-						action: noop,
-					},
-				],
-			},
-		],
-	},
+		template: `
+			<PageHeader title="Fabric API" summary="Lightweight and modular API providing common hooks and intercompatibility measures for Fabric mods.">
+				<template #leading>
+					<PageHeaderObjectAvatarLeading src="" alt="Fabric API" size="96px" tint-by="fabric-api" />
+				</template>
+
+				<template #badges>
+					<PageHeaderBadgeItem :icon="AffiliateIcon">
+						Featured
+					</PageHeaderBadgeItem>
+				</template>
+
+				<template #metadata>
+					<PageHeaderMetadata>
+						<PageHeaderMetadataNumberItem :icon="DownloadIcon" :value="128452395" label="downloads" />
+						<PageHeaderMetadataNumberItem :icon="HeartIcon" :value="412300" label="followers" />
+						<PageHeaderMetadataTagsItem>
+							<TagItem v-for="category in categories" :key="category" :action="noop">
+								<FormattedTag :tag="category" />
+							</TagItem>
+						</PageHeaderMetadataTagsItem>
+					</PageHeaderMetadata>
+				</template>
+
+				<template #actions>
+					<PageHeaderActions>
+						<ButtonStyled color="brand" size="large">
+							<button type="button" @click="noop">
+								<DownloadIcon />
+								Download
+							</button>
+						</ButtonStyled>
+						<ButtonStyled circular size="large" type="transparent">
+							<TeleportOverflowMenu :options="menuActions" aria-label="More actions">
+								<MoreVerticalIcon />
+							</TeleportOverflowMenu>
+						</ButtonStyled>
+					</PageHeaderActions>
+				</template>
+			</PageHeader>
+		`,
+	}),
 }
 
 export const CreatorHeader: Story = {
-	args: {
-		title: 'Prospector',
-		summary: 'A Modrinth creator with a handful of popular projects.',
-		leading: {
-			type: 'avatar',
-			src: null,
-			alt: 'Prospector',
-			avatarSize: '96px',
-			circle: true,
+	render: () => ({
+		components: pageHeaderComponents,
+		setup() {
+			return {
+				...pageHeaderIcons,
+				joinedDate,
+				noop,
+			}
 		},
-		badges: [
-			{
-				id: 'affiliate',
-				label: 'Affiliate',
-				icon: AffiliateIcon,
-				class: 'border-brand-highlight bg-brand-highlight text-brand',
-			},
-		],
-		metadata: [
-			{
-				id: 'projects',
-				label: '12 projects',
-				icon: Gamepad2Icon,
-			},
-			{
-				id: 'downloads',
-				label: '4.2M downloads',
-				icon: DownloadIcon,
-			},
-			{
-				id: 'followers',
-				label: '82K followers',
-				icon: HeartIcon,
-			},
-		],
-		actions: [
-			{
-				id: 'follow',
-				label: 'Follow',
-				icon: HeartIcon,
-				color: 'brand',
-				onClick: noop,
-			},
-		],
-	},
+		template: `
+			<PageHeader title="Prospector" summary="A Modrinth creator with a handful of popular projects.">
+				<template #leading>
+					<PageHeaderUserAvatarLeading src="" username="Prospector" />
+				</template>
+
+				<template #badges>
+					<PageHeaderBadgeItem :icon="AffiliateIcon" class="!border-brand-highlight !bg-brand-highlight !text-brand">
+						Affiliate
+					</PageHeaderBadgeItem>
+				</template>
+
+				<template #metadata>
+					<PageHeaderMetadata>
+						<PageHeaderMetadataNumberItem :icon="BoxIcon" :value="12" label="projects" />
+						<PageHeaderMetadataNumberItem :icon="DownloadIcon" :value="4200000" label="downloads" />
+						<PageHeaderMetadataTimeItem :icon="CalendarIcon" :date="joinedDate" label="Joined" />
+					</PageHeaderMetadata>
+				</template>
+
+				<template #actions>
+					<PageHeaderActions>
+						<ButtonStyled color="brand" size="large">
+							<button type="button" @click="noop">
+								<HeartIcon />
+								Follow
+							</button>
+						</ButtonStyled>
+					</PageHeaderActions>
+				</template>
+			</PageHeader>
+		`,
+	}),
+}
+
+export const AppInstanceHeader: Story = {
+	render: () => ({
+		components: {
+			...pageHeaderComponents,
+			LoaderIcon,
+		},
+		setup() {
+			return {
+				...pageHeaderIcons,
+				LoaderIcon,
+				menuActions,
+				noop,
+			}
+		},
+		template: `
+			<PageHeader title="Create: Astral">
+				<template #leading>
+					<PageHeaderObjectAvatarLeading src="" alt="Create: Astral" size="64px" tint-by="create-astral" />
+				</template>
+
+				<template #metadata>
+					<PageHeaderMetadata>
+						<PageHeaderMetadataItem :icon="Gamepad2Icon" tooltip="Minecraft version">Minecraft 1.20.1</PageHeaderMetadataItem>
+						<PageHeaderMetadataItem :icon="LoaderIcon" :icon-props="{ loader: 'Fabric' }" tooltip="Mod loader">
+							Fabric 0.16.14
+						</PageHeaderMetadataItem>
+						<PageHeaderMetadataItem :icon="TimerIcon" tooltip="Total playtime">12 hours</PageHeaderMetadataItem>
+					</PageHeaderMetadata>
+				</template>
+
+				<template #actions>
+					<PageHeaderActions>
+						<ButtonStyled color="brand" size="large">
+							<button type="button" @click="noop">
+								<PlayIcon />
+								Play
+							</button>
+						</ButtonStyled>
+						<ButtonStyled circular size="large">
+							<button type="button" aria-label="Instance settings" @click="noop">
+								<SettingsIcon />
+							</button>
+						</ButtonStyled>
+						<ButtonStyled circular size="large" type="transparent">
+							<TeleportOverflowMenu :options="menuActions" aria-label="More actions">
+								<MoreVerticalIcon />
+							</TeleportOverflowMenu>
+						</ButtonStyled>
+					</PageHeaderActions>
+				</template>
+			</PageHeader>
+		`,
+	}),
 }
 
 export const BrowseHeader: Story = {
-	args: {
-		title: 'Survival SMP',
-		leading: [
-			{
-				id: 'back',
-				type: 'button',
-				icon: LeftArrowIcon,
-				to: '/instance/my-world',
-				ariaLabel: 'Back to instance',
-				tooltip: 'Back to instance',
-				wrapperClass: 'flex size-12 shrink-0 items-center justify-center',
-			},
-			{
-				id: 'target',
-				type: 'avatar',
-				src: null,
-				alt: 'Survival SMP',
-				avatarSize: '48px',
-				tintBy: 'survival-smp',
-			},
-		],
-		metadata: [
-			{
-				id: 'heading',
-				label: 'Installing content',
-				class: '!text-primary',
-			},
-			{
-				id: 'game-version',
-				label: '1.20.1',
-				icon: Gamepad2Icon,
-				tooltip: 'Minecraft version',
-				class: '!text-primary',
-			},
-			{
-				id: 'loader',
-				label: 'Fabric',
-				icon: LoaderIcon,
-				iconProps: { loader: 'Fabric' },
-				tooltip: 'Mod loader',
-				class: '!text-primary',
-			},
-		],
-		divider: false,
-		bottomPadding: false,
-		mainClass: 'items-center',
-		titleClass: 'leading-8',
-		truncateTitle: true,
-	},
+	render: () => ({
+		components: {
+			...pageHeaderComponents,
+			LoaderIcon,
+		},
+		setup() {
+			return {
+				...pageHeaderIcons,
+				LoaderIcon,
+				noop,
+			}
+		},
+		template: `
+			<PageHeader title="Survival SMP" :divider="false" :bottom-padding="false" main-class="items-center" title-class="leading-8" truncate-title>
+				<template #leading>
+					<ButtonStyled circular size="large">
+						<button type="button" aria-label="Back to instance" @click="noop">
+							<LeftArrowIcon />
+						</button>
+					</ButtonStyled>
+					<PageHeaderObjectAvatarLeading src="" alt="Survival SMP" size="48px" tint-by="survival-smp" />
+				</template>
+
+				<template #metadata>
+					<PageHeaderMetadata>
+						<PageHeaderMetadataItem class="!text-primary">Installing content</PageHeaderMetadataItem>
+						<PageHeaderMetadataItem class="!text-primary" :icon="Gamepad2Icon" tooltip="Minecraft version">
+							Minecraft 1.20.1
+						</PageHeaderMetadataItem>
+						<PageHeaderMetadataItem class="!text-primary" :icon="LoaderIcon" :icon-props="{ loader: 'Fabric' }" tooltip="Mod loader">
+							Fabric
+						</PageHeaderMetadataItem>
+					</PageHeaderMetadata>
+				</template>
+			</PageHeader>
+		`,
+	}),
 }
 
 export const ServerPanelRootHeader: Story = {
-	args: {
-		title: 'Survival SMP',
-		leading: {
-			type: 'component',
-			component: ServerIcon,
-			componentProps: { image: undefined },
-			class: 'size-15 !rounded-xl',
+	render: () => ({
+		components: {
+			...pageHeaderComponents,
+			ServerIcon,
 		},
-		metadata: [
-			{
-				id: 'active-world',
-				label: 'My World',
-				icon: GlobeIcon,
-				tooltip: 'Active instance',
-			},
-			{
-				id: 'address',
-				label: 'play.modrinth.gg',
-				icon: LinkIcon,
-				tooltip: 'Copy server address',
-				onClick: noop,
-			},
-		],
-		actions: [
-			{
-				id: 'start',
-				label: 'Start server',
-				icon: PlayIcon,
-				color: 'brand',
-				onClick: noop,
-			},
-			{
-				id: 'settings',
-				label: 'Server settings',
-				icon: SettingsIcon,
-				labelHidden: true,
-				tooltip: 'Server settings',
-				onClick: noop,
-			},
-		],
-	},
+		setup() {
+			return {
+				...pageHeaderIcons,
+				menuActions,
+				noop,
+				serverImage: undefined,
+			}
+		},
+		template: `
+			<PageHeader title="Survival SMP">
+				<template #leading>
+					<ServerIcon class="size-16 !rounded-xl" :image="serverImage" />
+				</template>
+
+				<template #metadata>
+					<PageHeaderMetadata>
+						<PageHeaderMetadataItem :icon="GlobeIcon" tooltip="Active instance">My World</PageHeaderMetadataItem>
+						<PageHeaderMetadataItem :icon="LinkIcon" tooltip="Copy server address" :action="noop">
+							play.modrinth.gg
+						</PageHeaderMetadataItem>
+					</PageHeaderMetadata>
+				</template>
+
+				<template #actions>
+					<PageHeaderActions>
+						<ButtonStyled color="brand" size="large">
+							<button type="button" @click="noop">
+								<PlayIcon />
+								Start server
+							</button>
+						</ButtonStyled>
+						<ButtonStyled circular size="large">
+							<button type="button" aria-label="Server settings" @click="noop">
+								<SettingsIcon />
+							</button>
+						</ButtonStyled>
+					</PageHeaderActions>
+				</template>
+			</PageHeader>
+		`,
+	}),
 }
 
 export const ServerPanelInstanceHeader: Story = {
-	args: {
-		title: 'My World',
-		leading: {
-			type: 'button',
-			icon: LeftArrowIcon,
-			to: '/hosting/manage/demo-server/instances',
-			ariaLabel: 'All instances',
-			tooltip: 'All instances',
+	render: () => ({
+		components: {
+			...pageHeaderComponents,
+			LoaderIcon,
 		},
-		metadata: [
-			{
-				id: 'game-version',
-				label: '1.20.1',
-				icon: Gamepad2Icon,
-				tooltip: 'Minecraft version',
-			},
-			{
-				id: 'loader',
-				label: 'Fabric 0.19.2',
-				icon: LoaderIcon,
-				iconProps: { loader: 'Fabric' },
-				tooltip: 'Mod loader',
-			},
-			{
-				id: 'last-active',
-				label: 'Last active 2 weeks ago',
-				icon: TimerIcon,
-				tooltip: 'Last activity',
-			},
-		],
-		actions: [
-			{
-				id: 'start',
-				label: 'Start instance',
-				icon: PlayIcon,
-				color: 'brand',
-				onClick: noop,
-			},
-			{
-				id: 'stop',
-				label: 'Stop instance',
-				color: 'red',
-				joinedActions: [
-					{
-						id: 'stop',
-						label: 'Stop',
-						icon: StopCircleIcon,
-						action: noop,
-					},
-					{
-						id: 'kill_server',
-						label: 'Kill server',
-						icon: SlashIcon,
-						action: noop,
-					},
-				],
-			},
-			{
-				id: 'settings',
-				label: 'Instance settings',
-				icon: SettingsIcon,
-				labelHidden: true,
-				tooltip: 'Instance settings',
-				onClick: noop,
-			},
-		],
-	},
+		setup() {
+			return {
+				...pageHeaderIcons,
+				joinedActions,
+				LoaderIcon,
+				noop,
+			}
+		},
+		template: `
+			<PageHeader title="My World">
+				<template #leading>
+					<ButtonStyled circular size="large">
+						<button type="button" aria-label="All instances" @click="noop">
+							<LeftArrowIcon />
+						</button>
+					</ButtonStyled>
+				</template>
+
+				<template #metadata>
+					<PageHeaderMetadata>
+						<PageHeaderMetadataItem :icon="Gamepad2Icon" tooltip="Minecraft version">Minecraft 1.20.1</PageHeaderMetadataItem>
+						<PageHeaderMetadataItem :icon="LoaderIcon" :icon-props="{ loader: 'Fabric' }" tooltip="Mod loader">
+							Fabric 0.19.2
+						</PageHeaderMetadataItem>
+						<PageHeaderMetadataItem :icon="TimerIcon" tooltip="Last activity">Last active 2 weeks ago</PageHeaderMetadataItem>
+					</PageHeaderMetadata>
+				</template>
+
+				<template #actions>
+					<PageHeaderActions>
+						<ButtonStyled color="brand" size="large">
+							<button type="button" @click="noop">
+								<PlayIcon />
+								Start instance
+							</button>
+						</ButtonStyled>
+						<JoinedButtons :actions="joinedActions" color="red" size="large" />
+						<ButtonStyled circular size="large">
+							<button type="button" aria-label="Instance settings" @click="noop">
+								<SettingsIcon />
+							</button>
+						</ButtonStyled>
+					</PageHeaderActions>
+				</template>
+			</PageHeader>
+		`,
+	}),
 }
 
 export const CustomMetadata: Story = {
 	render: () => ({
-		components: { PageHeader },
+		components: pageHeaderComponents,
 		setup() {
 			return {
-				metadata: [
-					{
-						id: 'project-stats',
-						type: 'component',
-						component: CustomMetadataStats,
-					},
-				],
+				...pageHeaderIcons,
 			}
 		},
 		template: `
 			<PageHeader
 				title="Custom Metadata Project"
-				summary="Custom metadata is reserved for rich stat rows that cannot be represented by icon and label data."
-				:leading="{ type: 'avatar', src: null, alt: 'Custom Metadata Project', avatarSize: '96px' }"
-				:metadata="metadata"
-			/>
+				summary="Custom metadata stays in markup so page-specific components can be composed without expanding PageHeader itself."
+			>
+				<template #leading>
+					<PageHeaderObjectAvatarLeading src="" alt="Custom Metadata Project" size="96px" tint-by="custom-metadata-project" />
+				</template>
+
+				<template #metadata>
+					<PageHeaderMetadata>
+						<PageHeaderMetadataItem>
+							<div class="flex flex-wrap items-center gap-3">
+								<div class="flex items-center gap-2 font-semibold">
+									<DownloadIcon class="h-6 w-6 text-secondary" />
+									1.2M
+								</div>
+								<div class="flex items-center gap-2 font-semibold">
+									<HeartIcon class="h-6 w-6 text-secondary" />
+									50K
+								</div>
+							</div>
+						</PageHeaderMetadataItem>
+					</PageHeaderMetadata>
+				</template>
+			</PageHeader>
 		`,
 	}),
 }

From 98c4227a69102f37a1ad11e9313a6c3d77c1903c Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Mon, 6 Jul 2026 20:42:32 +0100
Subject: [PATCH 06/12] refactor: old impls

---
 .../src/components/ui/ProjectPageHeader.vue   | 300 ++++++++++++
 .../ui/instance-page-header/index.vue         | 226 +++++++++
 .../instance-page-header-server-metadata.vue} |   0
 .../app-frontend/src/pages/instance/Index.vue | 241 ++--------
 apps/app-frontend/src/pages/project/Index.vue | 271 ++---------
 .../components/ui/OrganizationPageHeader.vue  | 140 ++++++
 .../src/components/ui/ProjectPageHeader.vue   | 437 ++++++++++++++++++
 .../src/components/ui/UserPageHeader.vue      | 263 +++++++++++
 apps/frontend/src/pages/[type]/[project].vue  | 371 ++++-----------
 .../src/pages/organization/[organization].vue | 119 +----
 apps/frontend/src/pages/user/[user].vue       | 268 +++--------
 .../page-header-metadata-number-item.vue      |   6 +-
 12 files changed, 1618 insertions(+), 1024 deletions(-)
 create mode 100644 apps/app-frontend/src/components/ui/ProjectPageHeader.vue
 create mode 100644 apps/app-frontend/src/components/ui/instance-page-header/index.vue
 rename apps/app-frontend/src/{pages/instance/instance-header-server-metadata.vue => components/ui/instance-page-header/instance-page-header-server-metadata.vue} (100%)
 create mode 100644 apps/frontend/src/components/ui/OrganizationPageHeader.vue
 create mode 100644 apps/frontend/src/components/ui/ProjectPageHeader.vue
 create mode 100644 apps/frontend/src/components/ui/UserPageHeader.vue

diff --git a/apps/app-frontend/src/components/ui/ProjectPageHeader.vue b/apps/app-frontend/src/components/ui/ProjectPageHeader.vue
new file mode 100644
index 0000000000..f733e99330
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/ProjectPageHeader.vue
@@ -0,0 +1,300 @@
+<template>
+	<PageHeader
+		:title="project.title"
+		:summary="project.description"
+		@contextmenu.prevent.stop="emit('contextmenu', $event)"
+	>
+		<template #leading>
+			<PageHeaderObjectAvatarLeading :src="project.icon_url" :alt="project.title" size="96px" />
+		</template>
+
+		<template v-if="project.status !== 'approved'" #badges>
+			<ProjectStatusBadge :status="project.status" />
+		</template>
+
+		<template #metadata>
+			<PageHeaderMetadata>
+				<template v-if="isServerProject">
+					<ServerDetails
+						v-if="projectV3?.status !== 'draft'"
+						:online-players="projectV3?.minecraft_java_server?.ping?.data?.players_online ?? 0"
+						:status-online="!!projectV3?.minecraft_java_server?.ping?.data"
+						:recent-plays="projectV3?.minecraft_java_server?.verified_plays_2w ?? 0"
+					/>
+				</template>
+				<template v-else>
+					<PageHeaderMetadataNumberItem
+						:icon="DownloadIcon"
+						:value="project.downloads"
+						label="downloads"
+						:tooltip="downloadsTooltip"
+						class="cursor-help"
+					/>
+					<PageHeaderMetadataNumberItem
+						:icon="HeartIcon"
+						:value="project.followers"
+						label="followers"
+						:tooltip="followersTooltip"
+						class="cursor-help"
+					/>
+				</template>
+				<PageHeaderMetadataTagsItem v-if="project.categories.length > 0" class="hidden md:flex">
+					<TagItem
+						v-for="category in project.categories"
+						:key="category"
+						:action="() => emit('category', category)"
+					>
+						<FormattedTag :tag="category" />
+					</TagItem>
+				</PageHeaderMetadataTagsItem>
+			</PageHeaderMetadata>
+		</template>
+
+		<template #actions>
+			<PageHeaderActions>
+				<template v-if="isServerProject">
+					<ButtonStyled :color="serverPlaying ? 'red' : 'brand'" size="large">
+						<button
+							type="button"
+							:disabled="serverInstallLoading"
+							@click="serverPlaying ? emit('stopServer') : emit('playServer')"
+						>
+							<StopCircleIcon v-if="serverPlaying" />
+							<PlayIcon v-else />
+							{{ serverPlaying ? stopLabel : serverPlayLabel }}
+						</button>
+					</ButtonStyled>
+					<ButtonStyled circular size="large">
+						<button
+							v-tooltip="addServerToInstanceLabel"
+							type="button"
+							:aria-label="addServerToInstanceLabel"
+							@click="emit('addServerToInstance')"
+						>
+							<PlusIcon />
+						</button>
+					</ButtonStyled>
+					<ButtonStyled circular size="large" type="transparent">
+						<TeleportOverflowMenu
+							:options="serverMoreActions"
+							tooltip="More options"
+							aria-label="More options"
+						>
+							<MoreVerticalIcon />
+						</TeleportOverflowMenu>
+					</ButtonStyled>
+				</template>
+				<template v-else>
+					<ButtonStyled color="brand" size="large">
+						<button
+							v-tooltip="installButtonTooltip"
+							type="button"
+							:disabled="installButtonDisabled"
+							@click="emit('install')"
+						>
+							<component :is="installButtonIcon" :class="installButtonIconClass" />
+							{{ installButtonLabel }}
+						</button>
+					</ButtonStyled>
+					<ButtonStyled circular size="large" type="transparent">
+						<TeleportOverflowMenu
+							:options="projectMoreActions"
+							tooltip="More options"
+							aria-label="More options"
+						>
+							<MoreVerticalIcon />
+						</TeleportOverflowMenu>
+					</ButtonStyled>
+				</template>
+			</PageHeaderActions>
+		</template>
+	</PageHeader>
+</template>
+
+<script setup>
+import {
+	BookmarkIcon,
+	CheckIcon,
+	DownloadIcon,
+	ExternalIcon,
+	HeartIcon,
+	MoreVerticalIcon,
+	PlayIcon,
+	PlusIcon,
+	ReportIcon,
+	SpinnerIcon,
+	StopCircleIcon,
+} from '@modrinth/assets'
+import {
+	ButtonStyled,
+	commonMessages,
+	FormattedTag,
+	PageHeader,
+	PageHeaderActions,
+	PageHeaderMetadata,
+	PageHeaderMetadataNumberItem,
+	PageHeaderMetadataTagsItem,
+	PageHeaderObjectAvatarLeading,
+	ProjectStatusBadge,
+	ServerDetails,
+	TagItem,
+	TeleportOverflowMenu,
+	useVIntl,
+} from '@modrinth/ui'
+import { capitalizeString } from '@modrinth/utils'
+import { computed } from 'vue'
+
+const props = defineProps({
+	project: {
+		type: Object,
+		required: true,
+	},
+	projectV3: {
+		type: Object,
+		default: null,
+	},
+	isServerProject: {
+		type: Boolean,
+		default: false,
+	},
+	installButtonLabel: {
+		type: String,
+		default: '',
+	},
+	installButtonTooltip: {
+		type: String,
+		default: null,
+	},
+	installButtonDisabled: {
+		type: Boolean,
+		default: false,
+	},
+	installButtonLoading: {
+		type: Boolean,
+		default: false,
+	},
+	installButtonInstalled: {
+		type: Boolean,
+		default: false,
+	},
+	serverProjectSelected: {
+		type: Boolean,
+		default: false,
+	},
+	serverPlaying: {
+		type: Boolean,
+		default: false,
+	},
+	serverInstallLoading: {
+		type: Boolean,
+		default: false,
+	},
+	stopLabel: {
+		type: String,
+		required: true,
+	},
+	playLabel: {
+		type: String,
+		required: true,
+	},
+	installingLabel: {
+		type: String,
+		required: true,
+	},
+	addServerToInstanceLabel: {
+		type: String,
+		required: true,
+	},
+})
+
+const emit = defineEmits([
+	'contextmenu',
+	'category',
+	'install',
+	'playServer',
+	'stopServer',
+	'addServerToInstance',
+	'openBrowser',
+	'report',
+])
+
+const { formatMessage } = useVIntl()
+
+const downloadsTooltip = computed(() =>
+	capitalizeString(
+		formatMessage(commonMessages.projectDownloads, {
+			count: props.project.downloads,
+		}),
+	),
+)
+const followersTooltip = computed(() =>
+	capitalizeString(
+		formatMessage(commonMessages.projectFollowers, {
+			count: props.project.followers,
+		}),
+	),
+)
+const serverPlayLabel = computed(() =>
+	props.serverInstallLoading ? props.installingLabel : props.playLabel,
+)
+const installButtonIcon = computed(() => {
+	if (props.installButtonLoading && !props.installButtonInstalled) return SpinnerIcon
+	if (!props.installButtonInstalled && !props.serverProjectSelected) return DownloadIcon
+	return CheckIcon
+})
+const installButtonIconClass = computed(() =>
+	props.installButtonLoading && !props.installButtonInstalled ? 'animate-spin' : undefined,
+)
+const serverMoreActions = computed(() => [
+	{
+		id: 'open-in-browser',
+		label: 'Open in browser',
+		icon: ExternalIcon,
+		action: () => emit('openBrowser'),
+	},
+	{
+		divider: true,
+	},
+	{
+		id: 'report',
+		label: 'Report',
+		icon: ReportIcon,
+		color: 'red',
+		action: () => emit('report'),
+	},
+])
+const projectMoreActions = computed(() => [
+	{
+		id: 'follow',
+		label: 'Follow',
+		icon: HeartIcon,
+		disabled: true,
+		tooltip: 'Coming soon',
+		action: () => {},
+	},
+	{
+		id: 'save',
+		label: 'Save',
+		icon: BookmarkIcon,
+		disabled: true,
+		tooltip: 'Coming soon',
+		action: () => {},
+	},
+	{
+		id: 'open-in-browser',
+		label: 'Open in browser',
+		icon: ExternalIcon,
+		action: () => emit('openBrowser'),
+	},
+	{
+		divider: true,
+	},
+	{
+		id: 'report',
+		label: 'Report',
+		icon: ReportIcon,
+		color: 'red',
+		action: () => emit('report'),
+	},
+])
+</script>
diff --git a/apps/app-frontend/src/components/ui/instance-page-header/index.vue b/apps/app-frontend/src/components/ui/instance-page-header/index.vue
new file mode 100644
index 0000000000..a4e2e5ae99
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/instance-page-header/index.vue
@@ -0,0 +1,226 @@
+<template>
+	<PageHeader :title="instance.name">
+		<template #leading>
+			<PageHeaderObjectAvatarLeading
+				:src="iconSrc"
+				:alt="instance.name"
+				size="64px"
+				:tint-by="instance.id"
+			/>
+		</template>
+
+		<template #metadata>
+			<InstanceHeaderServerMetadata
+				v-if="isServerInstance"
+				:loading-server-ping="loadingServerPing"
+				:players-online="playersOnline"
+				:status-online="statusOnline"
+				:recent-plays="recentPlays"
+				:ping="ping"
+				:minecraft-server="minecraftServer"
+				:linked-project-v3="linkedProjectV3"
+				:instance-id="instance.id"
+			/>
+			<PageHeaderMetadata v-else>
+				<PageHeaderMetadataItem :icon="Gamepad2Icon" tooltip="Minecraft version">
+					Minecraft {{ instance.game_version }}
+				</PageHeaderMetadataItem>
+				<PageHeaderMetadataItem
+					:icon="ServerLoaderIcon"
+					:icon-props="{ loader: loaderDisplayName }"
+					tooltip="Mod loader"
+				>
+					{{ loaderLabel }}
+				</PageHeaderMetadataItem>
+				<PageHeaderMetadataItem v-if="showInstancePlayTime" :icon="TimerIcon" tooltip="Total playtime">
+					{{ playtimeLabel }}
+				</PageHeaderMetadataItem>
+			</PageHeaderMetadata>
+		</template>
+
+		<template #actions>
+			<PageHeaderActions>
+				<ButtonStyled v-if="isInstalling" color="brand" size="large">
+					<button type="button" disabled>Installing...</button>
+				</ButtonStyled>
+				<ButtonStyled v-else-if="instance.install_stage !== 'installed'" color="brand" size="large">
+					<button type="button" @click="emit('repair')">
+						<DownloadIcon />
+						Repair
+					</button>
+				</ButtonStyled>
+				<ButtonStyled v-else-if="playing" color="red" size="large">
+					<button type="button" :disabled="stopping" @click="emit('stop')">
+						<StopCircleIcon />
+						{{ stopping ? 'Stopping...' : 'Stop' }}
+					</button>
+				</ButtonStyled>
+				<JoinedButtons
+					v-else-if="!loading && isServerInstance"
+					:actions="serverPlayActions"
+					color="brand"
+					size="large"
+				/>
+				<ButtonStyled v-else-if="!loading" color="brand" size="large">
+					<button type="button" @click="emit('play')">
+						<PlayIcon />
+						Play
+					</button>
+				</ButtonStyled>
+				<ButtonStyled v-else color="brand" size="large">
+					<button type="button" disabled>Starting...</button>
+				</ButtonStyled>
+
+				<ButtonStyled circular size="large">
+					<button
+						v-tooltip="'Instance settings'"
+						type="button"
+						aria-label="Instance settings"
+						@click="emit('settings')"
+					>
+						<SettingsIcon />
+					</button>
+				</ButtonStyled>
+				<ButtonStyled circular size="large" type="transparent">
+					<TeleportOverflowMenu
+						:options="moreActions"
+						tooltip="More actions"
+						aria-label="More actions"
+					>
+						<MoreVerticalIcon />
+					</TeleportOverflowMenu>
+				</ButtonStyled>
+			</PageHeaderActions>
+		</template>
+	</PageHeader>
+</template>
+
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import {
+	DownloadIcon,
+	ExternalIcon,
+	FolderOpenIcon,
+	MoreVerticalIcon,
+	PackageIcon,
+	PlayIcon,
+	SettingsIcon,
+	StopCircleIcon,
+	TagCategoryGamepad2Icon as Gamepad2Icon,
+	TimerIcon,
+} from '@modrinth/assets'
+import {
+	ButtonStyled,
+	JoinedButtons,
+	LoaderIcon as ServerLoaderIcon,
+	PageHeader,
+	PageHeaderActions,
+	PageHeaderMetadata,
+	PageHeaderMetadataItem,
+	PageHeaderObjectAvatarLeading,
+	TeleportOverflowMenu,
+	type JoinedButtonAction,
+	type ServerLoader,
+	type TeleportOverflowMenuItem,
+} from '@modrinth/ui'
+import { computed } from 'vue'
+
+import type { GameInstance } from '@/helpers/types'
+
+import InstanceHeaderServerMetadata from './instance-page-header-server-metadata.vue'
+
+const props = withDefaults(
+	defineProps<{
+		instance: GameInstance
+		iconSrc?: string | null
+		isServerInstance?: boolean
+		loaderDisplayName?: ServerLoader | null
+		loaderLabel?: string
+		showInstancePlayTime?: boolean
+		playtimeLabel?: string
+		playing?: boolean
+		loading?: boolean
+		stopping?: boolean
+		loadingServerPing?: boolean
+		playersOnline?: number
+		statusOnline?: boolean
+		recentPlays?: number
+		ping?: number
+		minecraftServer?: Labrinth.Projects.v3.Project['minecraft_server']
+		linkedProjectV3?: Labrinth.Projects.v3.Project
+	}>(),
+	{
+		iconSrc: null,
+		isServerInstance: false,
+		loaderDisplayName: null,
+		loaderLabel: '',
+		showInstancePlayTime: false,
+		playtimeLabel: '',
+		playing: false,
+		loading: false,
+		stopping: false,
+		loadingServerPing: false,
+		playersOnline: undefined,
+		statusOnline: false,
+		recentPlays: undefined,
+		ping: undefined,
+		minecraftServer: undefined,
+		linkedProjectV3: undefined,
+	},
+)
+
+const emit = defineEmits<{
+	repair: []
+	stop: []
+	play: []
+	playServer: []
+	settings: []
+	openFolder: []
+	export: []
+	createShortcut: []
+}>()
+
+const installingStages = [
+	'installing',
+	'pack_installing',
+	'pack_installed',
+	'not_installed',
+	'minecraft_installing',
+]
+
+const isInstalling = computed(() => installingStages.includes(props.instance.install_stage))
+const serverPlayActions = computed<JoinedButtonAction[]>(() => [
+	{
+		id: 'join_server',
+		label: 'Play',
+		icon: PlayIcon,
+		action: () => emit('playServer'),
+	},
+	{
+		id: 'launch_instance',
+		label: 'Launch instance',
+		icon: PlayIcon,
+		action: () => emit('play'),
+	},
+])
+const moreActions = computed<TeleportOverflowMenuItem[]>(() => [
+	{
+		id: 'open-folder',
+		label: 'Open folder',
+		icon: FolderOpenIcon,
+		action: () => emit('openFolder'),
+	},
+	{
+		id: 'export-mrpack',
+		label: 'Export modpack',
+		icon: PackageIcon,
+		action: () => emit('export'),
+	},
+	{
+		id: 'create-shortcut',
+		label: 'Create shortcut',
+		icon: ExternalIcon,
+		action: () => emit('createShortcut'),
+	},
+])
+</script>
diff --git a/apps/app-frontend/src/pages/instance/instance-header-server-metadata.vue b/apps/app-frontend/src/components/ui/instance-page-header/instance-page-header-server-metadata.vue
similarity index 100%
rename from apps/app-frontend/src/pages/instance/instance-header-server-metadata.vue
rename to apps/app-frontend/src/components/ui/instance-page-header/instance-page-header-server-metadata.vue
diff --git a/apps/app-frontend/src/pages/instance/Index.vue b/apps/app-frontend/src/pages/instance/Index.vue
index 2e6d201cb5..65afa975c6 100644
--- a/apps/app-frontend/src/pages/instance/Index.vue
+++ b/apps/app-frontend/src/pages/instance/Index.vue
@@ -13,11 +13,32 @@
 				@unlinked="fetchInstance"
 			/>
 			<UpdateToPlayModal ref="updateToPlayModal" :instance="instance" />
-			<PageHeader
-				:title="instance.name"
-				:leading="instanceHeaderLeading"
-				:metadata="instanceHeaderMetadata"
-				:actions="instanceHeaderActions"
+			<InstancePageHeader
+				:instance="instance"
+				:icon-src="icon"
+				:is-server-instance="isServerInstance"
+				:loader-display-name="loaderDisplayName"
+				:loader-label="loaderLabel"
+				:show-instance-play-time="showInstancePlayTime"
+				:playtime-label="playtimeLabel"
+				:playing="playing"
+				:loading="loading"
+				:stopping="stopping"
+				:loading-server-ping="loadingServerPing"
+				:players-online="playersOnline"
+				:status-online="statusOnline"
+				:recent-plays="recentPlays"
+				:ping="ping"
+				:minecraft-server="minecraftServer"
+				:linked-project-v3="linkedProjectV3"
+				@repair="() => repairInstance()"
+				@stop="() => stopInstance('InstancePage')"
+				@play="() => startInstance('InstancePage')"
+				@play-server="() => handlePlayServer()"
+				@settings="() => settingsModal?.show()"
+				@open-folder="() => instance && showInstanceInFolder(instance.id)"
+				@export="() => exportModal?.show()"
+				@create-shortcut="() => createShortcut()"
 			/>
 		</div>
 		<div :class="['px-6', { 'shrink-0': isFixedRender }]">
@@ -77,34 +98,26 @@ import {
 	BoxesIcon,
 	CheckCircleIcon,
 	ClipboardCopyIcon,
-	DownloadIcon,
 	EditIcon,
 	ExternalIcon,
 	EyeIcon,
 	FolderOpenIcon,
 	GlobeIcon,
 	HashIcon,
-	MoreVerticalIcon,
-	PackageIcon,
 	PlayIcon,
 	PlusIcon,
-	SettingsIcon,
 	StopCircleIcon,
-	TagCategoryGamepad2Icon as Gamepad2Icon,
 	TerminalSquareIcon,
-	TimerIcon,
 	UpdatedIcon,
 	XIcon,
 } from '@modrinth/assets'
 import {
 	formatLoaderLabel,
 	injectNotificationManager,
-	LoaderIcon as ServerLoaderIcon,
 	NavTabs,
-	PageHeader,
+	type ServerLoader,
 	useLoadingBarToken,
 } from '@modrinth/ui'
-import type { Loaders } from '@modrinth/utils'
 import { useQueryClient } from '@tanstack/vue-query'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import dayjs from 'dayjs'
@@ -115,6 +128,7 @@ import { useRoute, useRouter } from 'vue-router'
 
 import ContextMenu from '@/components/ui/ContextMenu.vue'
 import ExportModal from '@/components/ui/ExportModal.vue'
+import InstancePageHeader from '@/components/ui/instance-page-header/index.vue'
 import InstanceSettingsModal from '@/components/ui/modal/InstanceSettingsModal.vue'
 import UpdateToPlayModal from '@/components/ui/modal/UpdateToPlayModal.vue'
 import { useInstanceConsole } from '@/composables/useInstanceConsole'
@@ -132,8 +146,6 @@ import { injectServerInstall } from '@/providers/server-install'
 import { handleSevereError } from '@/store/error.js'
 import { useBreadcrumbs, useTheming } from '@/store/state'
 
-import InstanceHeaderServerMetadata from './instance-header-server-metadata.vue'
-
 dayjs.extend(duration)
 dayjs.extend(relativeTime)
 
@@ -544,7 +556,7 @@ const timePlayedHumanized = computed(() => {
 })
 
 const loaderDisplayName = computed(() =>
-	instance.value ? (formatLoaderLabel(instance.value.loader) as Loaders) : null,
+	instance.value ? (formatLoaderLabel(instance.value.loader) as ServerLoader) : null,
 )
 
 const loaderLabel = computed(() =>
@@ -557,201 +569,6 @@ const playtimeLabel = computed(() =>
 	timePlayed.value > 0 ? timePlayedHumanized.value : 'Never played',
 )
 
-const instanceHeaderLeading = computed(() => ({
-	type: 'avatar' as const,
-	src: icon.value ? icon.value : undefined,
-	alt: instance.value?.name,
-	avatarSize: '64px',
-	tintBy: instance.value?.id,
-}))
-
-const instanceHeaderMetadata = computed(() => {
-	if (!instance.value) return []
-	if (isServerInstance.value) {
-		return [
-			{
-				id: 'server-details',
-				type: 'component' as const,
-				component: InstanceHeaderServerMetadata,
-				componentProps: {
-					loadingServerPing: loadingServerPing.value,
-					playersOnline: playersOnline.value,
-					statusOnline: statusOnline.value,
-					recentPlays: recentPlays.value,
-					ping: ping.value,
-					minecraftServer: minecraftServer.value,
-					linkedProjectV3: linkedProjectV3.value,
-					instanceId: instance.value.id,
-				},
-			},
-		]
-	}
-
-	return [
-		{
-			id: 'game-version',
-			label: `Minecraft ${instance.value.game_version}`,
-			icon: Gamepad2Icon,
-		},
-		{
-			id: 'loader',
-			label: loaderLabel.value,
-			icon: ServerLoaderIcon,
-			iconProps: {
-				loader: loaderDisplayName.value,
-			},
-		},
-		...(showInstancePlayTime.value
-			? [
-					{
-						id: 'playtime',
-						label: playtimeLabel.value,
-						icon: TimerIcon,
-					},
-				]
-			: []),
-	]
-})
-
-const installingStages = [
-	'installing',
-	'pack_installing',
-	'pack_installed',
-	'not_installed',
-	'minecraft_installing',
-]
-
-const primaryInstanceAction = computed(() => {
-	if (!instance.value) return null
-
-	if (installingStages.includes(instance.value.install_stage)) {
-		return {
-			id: 'installing',
-			label: 'Installing...',
-			color: 'brand' as const,
-			disabled: true,
-		}
-	}
-
-	if (instance.value.install_stage !== 'installed') {
-		return {
-			id: 'repair',
-			label: 'Repair',
-			icon: DownloadIcon,
-			color: 'brand' as const,
-			onClick: () => {
-				void repairInstance()
-			},
-		}
-	}
-
-	if (playing.value === true) {
-		return {
-			id: 'stop',
-			label: stopping.value ? 'Stopping...' : 'Stop',
-			icon: StopCircleIcon,
-			color: 'red' as const,
-			disabled: stopping.value,
-			onClick: () => {
-				void stopInstance('InstancePage')
-			},
-		}
-	}
-
-	if (playing.value === false && loading.value === false && !isServerInstance.value) {
-		return {
-			id: 'play',
-			label: 'Play',
-			icon: PlayIcon,
-			color: 'brand' as const,
-			onClick: () => {
-				void startInstance('InstancePage')
-			},
-		}
-	}
-
-	if (playing.value === false && loading.value === false && isServerInstance.value) {
-		return {
-			id: 'play',
-			label: 'Play',
-			color: 'brand' as const,
-			joinedActions: [
-				{
-					id: 'join_server',
-					label: 'Play',
-					icon: PlayIcon,
-					action: () => {
-						void handlePlayServer()
-					},
-				},
-				{
-					id: 'launch_instance',
-					label: 'Launch instance',
-					icon: PlayIcon,
-					action: () => {
-						void startInstance('InstancePage')
-					},
-				},
-			],
-		}
-	}
-
-	if (loading.value === true && playing.value === false) {
-		return {
-			id: 'starting',
-			label: 'Starting...',
-			color: 'brand' as const,
-			disabled: true,
-		}
-	}
-
-	return null
-})
-
-const instanceHeaderActions = computed(() => [
-	...(primaryInstanceAction.value ? [primaryInstanceAction.value] : []),
-	{
-		id: 'settings',
-		label: 'Instance settings',
-		icon: SettingsIcon,
-		labelHidden: true,
-		tooltip: 'Instance settings',
-		onClick: () => settingsModal.value?.show(),
-	},
-	{
-		id: 'more',
-		label: 'More actions',
-		icon: MoreVerticalIcon,
-		labelHidden: true,
-		type: 'transparent' as const,
-		tooltip: 'More actions',
-		menuActions: [
-			{
-				id: 'open-folder',
-				label: 'Open folder',
-				icon: FolderOpenIcon,
-				action: () => {
-					if (instance.value) void showInstanceInFolder(instance.value.id)
-				},
-			},
-			{
-				id: 'export-mrpack',
-				label: 'Export modpack',
-				icon: PackageIcon,
-				action: () => exportModal.value?.show(),
-			},
-			{
-				id: 'create-shortcut',
-				label: 'Create shortcut',
-				icon: ExternalIcon,
-				action: () => {
-					void createShortcut()
-				},
-			},
-		],
-	},
-])
-
 onUnmounted(() => {
 	unlistenProcesses()
 	unlistenInstances()
diff --git a/apps/app-frontend/src/pages/project/Index.vue b/apps/app-frontend/src/pages/project/Index.vue
index 3e846ea78c..0ef3cf0bb0 100644
--- a/apps/app-frontend/src/pages/project/Index.vue
+++ b/apps/app-frontend/src/pages/project/Index.vue
@@ -59,15 +59,31 @@
 				>
 					<ProjectBackgroundGradient :project="data" />
 				</Teleport>
-				<PageHeader
+				<ProjectPageHeader
 					v-else
-					:title="data.title"
-					:summary="data.description"
-					:leading="projectHeaderLeading"
-					:badges="projectHeaderBadges"
-					:metadata="projectHeaderMetadata"
-					:actions="projectHeaderActions"
-					@contextmenu.prevent.stop="handleRightClick"
+					:project="data"
+					:project-v3="projectV3"
+					:is-server-project="isServerProject"
+					:install-button-label="installButtonLabel"
+					:install-button-tooltip="installButtonTooltip"
+					:install-button-disabled="installButtonDisabled"
+					:install-button-loading="installButtonLoading"
+					:install-button-installed="installButtonInstalled"
+					:server-project-selected="serverProjectSelected"
+					:server-playing="serverPlaying"
+					:server-install-loading="!!(data && installingServerProjects.includes(data.id))"
+					:stop-label="formatMessage(commonMessages.stopButton)"
+					:play-label="formatMessage(commonMessages.playButton)"
+					:installing-label="formatMessage(commonMessages.installingLabel)"
+					:add-server-to-instance-label="formatMessage(commonMessages.addServerToInstanceButton)"
+					@contextmenu="handleRightClick"
+					@category="(category) => router.push(`${projectSearchUrl}?f=categories:${category}`)"
+					@install="() => install(null)"
+					@play-server="handleClickPlay"
+					@stop-server="handleStopServer"
+					@add-server-to-instance="handleAddServerToInstance"
+					@open-browser="openProjectInBrowser"
+					@report="reportProject"
 				/>
 				<NavTabs
 					:links="[
@@ -139,21 +155,7 @@
 </template>
 
 <script setup>
-import {
-	BookmarkIcon,
-	CheckIcon,
-	ClipboardCopyIcon,
-	DownloadIcon,
-	ExternalIcon,
-	GlobeIcon,
-	HeartIcon,
-	MoreVerticalIcon,
-	PlayIcon,
-	PlusIcon,
-	ReportIcon,
-	SpinnerIcon,
-	StopCircleIcon,
-} from '@modrinth/assets'
+import { ClipboardCopyIcon, DownloadIcon, ExternalIcon, GlobeIcon } from '@modrinth/assets'
 import {
 	BrowseInstallHeader,
 	commonMessages,
@@ -162,7 +164,6 @@ import {
 	getTargetInstallPreferences,
 	injectNotificationManager,
 	NavTabs,
-	PageHeader,
 	ProjectBackgroundGradient,
 	ProjectSidebarCompatibility,
 	ProjectSidebarCreators,
@@ -170,14 +171,10 @@ import {
 	ProjectSidebarLinks,
 	ProjectSidebarServerInfo,
 	ProjectSidebarTags,
-	ProjectStatusBadge,
 	requestInstall,
 	SelectedProjectsFloatingBar,
-	ServerDetails,
-	useCompactNumber,
 	useVIntl,
 } from '@modrinth/ui'
-import { capitalizeString } from '@modrinth/utils'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import dayjs from 'dayjs'
@@ -187,6 +184,7 @@ import { useRoute, useRouter } from 'vue-router'
 
 import ContextMenu from '@/components/ui/ContextMenu.vue'
 import InstanceIndicator from '@/components/ui/InstanceIndicator.vue'
+import ProjectPageHeader from '@/components/ui/ProjectPageHeader.vue'
 import {
 	get_organization,
 	get_project,
@@ -221,7 +219,6 @@ const router = useRouter()
 const breadcrumbs = useBreadcrumbs()
 const themeStore = useTheming()
 const { formatMessage } = useVIntl()
-const { formatCompactNumber } = useCompactNumber()
 
 const messages = defineMessages({
 	backToBrowse: {
@@ -407,215 +404,10 @@ const installButtonTooltip = computed(() => {
 	return null
 })
 
-const projectHeaderLeading = computed(() => ({
-	type: 'avatar',
-	src: data.value?.icon_url,
-	alt: data.value?.title,
-	avatarSize: '96px',
-}))
-
-const projectHeaderBadges = computed(() => {
-	if (!data.value || data.value.status === 'approved') return []
-	return [
-		{
-			id: 'status',
-			type: 'component',
-			component: ProjectStatusBadge,
-			componentProps: {
-				status: data.value.status,
-			},
-		},
-	]
-})
-
 const projectSearchUrl = computed(
 	() => `/browse/${isServerProject.value ? 'server' : data.value?.project_type}`,
 )
 
-const projectHeaderMetadata = computed(() => {
-	if (!data.value) return []
-	const items = []
-
-	if (isServerProject.value) {
-		if (projectV3.value?.status !== 'draft') {
-			items.push({
-				id: 'server-details',
-				type: 'component',
-				component: ServerDetails,
-				componentProps: {
-					onlinePlayers: projectV3.value?.minecraft_java_server?.ping?.data?.players_online ?? 0,
-					statusOnline: !!projectV3.value?.minecraft_java_server?.ping?.data,
-					recentPlays: projectV3.value?.minecraft_java_server?.verified_plays_2w ?? 0,
-				},
-			})
-		}
-	} else {
-		items.push(
-			{
-				id: 'downloads',
-				icon: DownloadIcon,
-				label: formatCompactNumber(data.value.downloads),
-				tooltip: capitalizeString(
-					formatMessage(commonMessages.projectDownloads, {
-						count: data.value.downloads,
-					}),
-				),
-				class: 'font-semibold cursor-help',
-			},
-			{
-				id: 'followers',
-				icon: HeartIcon,
-				label: formatCompactNumber(data.value.followers),
-				tooltip: capitalizeString(
-					formatMessage(commonMessages.projectFollowers, {
-						count: data.value.followers,
-					}),
-				),
-				class: 'font-semibold cursor-help',
-			},
-		)
-	}
-
-	if (data.value.categories.length > 0) {
-		items.push({
-			id: 'categories',
-			tags: data.value.categories.map((category) => ({
-				id: category,
-				tag: category,
-				onClick: () => router.push(`${projectSearchUrl.value}?f=categories:${category}`),
-			})),
-			class: 'hidden md:flex',
-		})
-	}
-
-	return items
-})
-
-const projectHeaderActions = computed(() => {
-	if (!data.value) return []
-
-	if (isServerProject.value) {
-		return [
-			serverPlaying.value
-				? {
-						id: 'stop',
-						label: formatMessage(commonMessages.stopButton),
-						icon: StopCircleIcon,
-						color: 'red',
-						onClick: handleStopServer,
-					}
-				: {
-						id: 'play',
-						label:
-							data.value && installingServerProjects.value.includes(data.value.id)
-								? formatMessage(commonMessages.installingLabel)
-								: formatMessage(commonMessages.playButton),
-						icon: PlayIcon,
-						color: 'brand',
-						disabled: data.value && installingServerProjects.value.includes(data.value.id),
-						onClick: handleClickPlay,
-					},
-			{
-				id: 'add-server-to-instance',
-				label: formatMessage(commonMessages.addServerToInstanceButton),
-				icon: PlusIcon,
-				labelHidden: true,
-				tooltip: formatMessage(commonMessages.addServerToInstanceButton),
-				onClick: handleAddServerToInstance,
-			},
-			{
-				id: 'more',
-				label: 'More options',
-				icon: MoreVerticalIcon,
-				labelHidden: true,
-				type: 'transparent',
-				tooltip: 'More options',
-				menuActions: [
-					{
-						id: 'open-in-browser',
-						label: 'Open in browser',
-						icon: ExternalIcon,
-						action: () => openUrl(`https://modrinth.com/project/${data.value.slug}`),
-					},
-					{
-						divider: true,
-					},
-					{
-						id: 'report',
-						label: 'Report',
-						icon: ReportIcon,
-						color: 'red',
-						action: () =>
-							openUrl(`https://modrinth.com/report?item=project&itemID=${data.value.id}`),
-					},
-				],
-			},
-		]
-	}
-
-	return [
-		{
-			id: 'install',
-			label: installButtonLabel.value,
-			icon:
-				installButtonLoading.value && !installButtonInstalled.value
-					? SpinnerIcon
-					: !installButtonInstalled.value && !serverProjectSelected.value
-						? DownloadIcon
-						: CheckIcon,
-			iconClass:
-				installButtonLoading.value && !installButtonInstalled.value ? 'animate-spin' : undefined,
-			color: 'brand',
-			tooltip: installButtonTooltip.value,
-			disabled: installButtonDisabled.value,
-			onClick: () => install(null),
-		},
-		{
-			id: 'more',
-			label: 'More options',
-			icon: MoreVerticalIcon,
-			labelHidden: true,
-			type: 'transparent',
-			tooltip: 'More options',
-			menuActions: [
-				{
-					id: 'follow',
-					label: 'Follow',
-					icon: HeartIcon,
-					disabled: true,
-					tooltip: 'Coming soon',
-					action: () => {},
-				},
-				{
-					id: 'save',
-					label: 'Save',
-					icon: BookmarkIcon,
-					disabled: true,
-					tooltip: 'Coming soon',
-					action: () => {},
-				},
-				{
-					id: 'open-in-browser',
-					label: 'Open in browser',
-					icon: ExternalIcon,
-					action: () =>
-						openUrl(`https://modrinth.com/${data.value.project_type}/${data.value.slug}`),
-				},
-				{
-					divider: true,
-				},
-				{
-					id: 'report',
-					label: 'Report',
-					icon: ReportIcon,
-					color: 'red',
-					action: () => openUrl(`https://modrinth.com/report?item=project&itemID=${data.value.id}`),
-				},
-			],
-		},
-	]
-})
-
 const [allLoaders, allGameVersions] = await Promise.all([
 	get_loaders().catch(handleError).then(ref),
 	get_game_versions().catch(handleError).then(ref),
@@ -653,6 +445,17 @@ function handleAddServerToInstance() {
 	showAddServerToInstanceModal(data.value.title, address)
 }
 
+function openProjectInBrowser() {
+	if (!data.value) return
+	const type = isServerProject.value ? 'project' : data.value.project_type
+	void openUrl(`https://modrinth.com/${type}/${data.value.slug}`)
+}
+
+function reportProject() {
+	if (!data.value) return
+	void openUrl(`https://modrinth.com/report?item=project&itemID=${data.value.id}`)
+}
+
 async function fetchProjectData() {
 	const [project, projectV3Result] = await Promise.all([
 		get_project(route.params.id, 'must_revalidate').catch(handleError),
diff --git a/apps/frontend/src/components/ui/OrganizationPageHeader.vue b/apps/frontend/src/components/ui/OrganizationPageHeader.vue
new file mode 100644
index 0000000000..34de361816
--- /dev/null
+++ b/apps/frontend/src/components/ui/OrganizationPageHeader.vue
@@ -0,0 +1,140 @@
+<template>
+	<PageHeader :title="organization.name" :summary="organization.description">
+		<template #leading>
+			<PageHeaderObjectAvatarLeading
+				:src="organization.icon_url"
+				:alt="organization.name"
+				size="96px"
+			/>
+		</template>
+
+		<template #badges>
+			<PageHeaderBadgeItem :icon="OrganizationIcon" class="px-0 text-primary">
+				{{ labels.organization }}
+			</PageHeaderBadgeItem>
+		</template>
+
+		<template #metadata>
+			<PageHeaderMetadata>
+				<PageHeaderMetadataNumberItem
+					:icon="UsersIcon"
+					:value="membersCount"
+					:label="labels.members"
+				/>
+				<PageHeaderMetadataNumberItem
+					:icon="BoxIcon"
+					:value="projectsCount"
+					:label="labels.projects"
+				/>
+				<PageHeaderMetadataNumberItem
+					:icon="DownloadIcon"
+					:value="downloads"
+					:label="labels.downloads"
+					:tooltip="downloadsTooltip"
+				/>
+			</PageHeaderMetadata>
+		</template>
+
+		<template #actions>
+			<PageHeaderActions>
+				<ButtonStyled v-if="canManage" size="large">
+					<nuxt-link :to="`/organization/${organization.slug}/settings`">
+						<SettingsIcon />
+						{{ labels.manage }}
+					</nuxt-link>
+				</ButtonStyled>
+				<ButtonStyled circular size="large" type="transparent">
+					<TeleportOverflowMenu
+						:options="moreActions"
+						:tooltip="labels.moreOptions"
+						:aria-label="labels.moreOptions"
+					>
+						<MoreVerticalIcon />
+					</TeleportOverflowMenu>
+				</ButtonStyled>
+			</PageHeaderActions>
+		</template>
+	</PageHeader>
+</template>
+
+<script setup lang="ts">
+import {
+	BoxIcon,
+	ClipboardCopyIcon,
+	DownloadIcon,
+	MoreVerticalIcon,
+	OrganizationIcon,
+	SettingsIcon,
+	UsersIcon,
+} from '@modrinth/assets'
+import {
+	ButtonStyled,
+	PageHeader,
+	PageHeaderActions,
+	PageHeaderBadgeItem,
+	PageHeaderMetadata,
+	PageHeaderMetadataNumberItem,
+	PageHeaderObjectAvatarLeading,
+	TeleportOverflowMenu,
+	type TeleportOverflowMenuItem,
+} from '@modrinth/ui'
+import { computed } from 'vue'
+
+const props = defineProps<{
+	organization: {
+		id: string
+		name: string
+		slug: string
+		description?: string | null
+		icon_url?: string | null
+	}
+	membersCount: number
+	projectsCount: number
+	downloads: number
+	downloadsTooltip?: string
+	canManage?: boolean
+	labels: {
+		organization: string
+		members: string
+		projects: string
+		downloads: string
+		manage: string
+		manageProjects: string
+		moreOptions: string
+		copyId: string
+		copyPermalink: string
+	}
+}>()
+
+const emit = defineEmits<{
+	manageProjects: []
+	copyId: []
+	copyPermalink: []
+}>()
+
+const moreActions = computed<TeleportOverflowMenuItem[]>(() => [
+	{
+		id: 'manage-projects',
+		label: props.labels.manageProjects,
+		icon: BoxIcon,
+		action: () => emit('manageProjects'),
+		shown: props.canManage,
+	},
+	{
+		divider: true,
+		shown: props.canManage,
+	},
+	{
+		id: 'copy-id',
+		label: props.labels.copyId,
+		icon: ClipboardCopyIcon,
+		action: () => emit('copyId'),
+	},
+	{
+		id: 'copy-permalink',
+		label: props.labels.copyPermalink,
+		icon: ClipboardCopyIcon,
+		action: () => emit('copyPermalink'),
+	},
+])
+</script>
diff --git a/apps/frontend/src/components/ui/ProjectPageHeader.vue b/apps/frontend/src/components/ui/ProjectPageHeader.vue
new file mode 100644
index 0000000000..85671b26d0
--- /dev/null
+++ b/apps/frontend/src/components/ui/ProjectPageHeader.vue
@@ -0,0 +1,437 @@
+<template>
+	<PageHeader :title="project.title" :summary="project.description">
+		<template #leading>
+			<PageHeaderObjectAvatarLeading :src="project.icon_url" :alt="project.title" size="96px" />
+		</template>
+
+		<template v-if="showStatusBadge" #badges>
+			<ProjectStatusBadge :status="project.status" />
+		</template>
+
+		<template #metadata>
+			<PageHeaderMetadata>
+				<template v-if="isServerProject">
+					<ServerDetails
+						v-if="projectV3?.status !== 'draft'"
+						:online-players="projectV3?.minecraft_java_server?.ping?.data?.players_online ?? 0"
+						:status-online="!!projectV3?.minecraft_java_server?.ping?.data"
+						:recent-plays="projectV3?.minecraft_java_server?.verified_plays_2w ?? 0"
+					/>
+				</template>
+				<template v-else>
+					<PageHeaderMetadataNumberItem
+						:icon="DownloadIcon"
+						:value="project.downloads"
+						:label="downloadsLabel"
+						:tooltip="downloadsTooltip"
+						class="cursor-help"
+					/>
+					<PageHeaderMetadataNumberItem
+						:icon="HeartIcon"
+						:value="project.followers"
+						:label="followersLabel"
+						:tooltip="followersTooltip"
+						class="cursor-help"
+					/>
+				</template>
+				<PageHeaderMetadataTagsItem v-if="project.categories.length > 0" class="hidden md:flex">
+					<TagItem
+						v-for="category in project.categories"
+						:key="category"
+						:action="() => emit('category', category)"
+					>
+						<FormattedTag :tag="category" />
+					</TagItem>
+				</PageHeaderMetadataTagsItem>
+			</PageHeaderMetadata>
+		</template>
+
+		<template #actions>
+			<PageHeaderActions>
+				<ButtonStyled v-if="showEditProject" color="brand" size="large">
+					<nuxt-link :to="`${projectPath}/settings`">
+						<SettingsIcon />
+						{{ editProjectLabel }}
+					</nuxt-link>
+				</ButtonStyled>
+
+				<ButtonStyled :color="primaryColor" :circular="primaryLabelHidden" size="large">
+					<button
+						v-tooltip="primaryTooltip"
+						type="button"
+						:aria-label="primaryLabel"
+						@click="emit('primary', $event)"
+					>
+						<PlayIcon v-if="isServerProject" />
+						<DownloadIcon v-else />
+						<span v-if="!primaryLabelHidden">{{ primaryLabel }}</span>
+					</button>
+				</ButtonStyled>
+
+				<Tooltip
+					v-if="showCreateServerAction && showCreateServerPrompt"
+					theme="dismissable-prompt"
+					class="inline-flex"
+					:triggers="[]"
+					:shown="showCreateServerPrompt"
+					:auto-hide="false"
+					placement="bottom-start"
+				>
+					<ButtonStyled circular size="large">
+						<nuxt-link
+							v-tooltip="createServerTooltip"
+							:to="createServerTo"
+							:aria-label="createServerLabel"
+							@click="emit('createServer')"
+						>
+							<ServerPlusIcon />
+						</nuxt-link>
+					</ButtonStyled>
+					<template #popper>
+						<div class="grid max-w-[18rem] gap-2">
+							<div class="flex items-center justify-between gap-4">
+								<div class="flex items-center gap-2">
+									<h3 class="m-0 text-base font-bold text-contrast">{{ createServerPromptTitle }}</h3>
+									<span
+										v-if="createServerPromptBadge"
+										class="rounded-full bg-brand-highlight px-2 py-0.5 text-xs font-bold text-brand"
+									>
+										{{ createServerPromptBadge }}
+									</span>
+								</div>
+								<ButtonStyled size="small" circular>
+									<button v-tooltip="createServerDismissLabel" @click="emit('dismissCreateServer')">
+										<XIcon aria-hidden="true" />
+									</button>
+								</ButtonStyled>
+							</div>
+							<p class="m-0 text-sm font-medium leading-tight text-secondary">
+								{{ createServerPromptDescription }}
+							</p>
+							<p
+								v-if="createServerPromptFooter"
+								class="m-0 text-sm font-semibold text-contrast"
+								v-html="createServerPromptFooter"
+							/>
+						</div>
+					</template>
+				</Tooltip>
+				<ButtonStyled v-else-if="showCreateServerAction" circular size="large">
+					<nuxt-link
+						v-tooltip="createServerTooltip"
+						:to="createServerTo"
+						:aria-label="createServerLabel"
+						@click="emit('createServer')"
+					>
+						<ServerPlusIcon />
+					</nuxt-link>
+				</ButtonStyled>
+
+				<ButtonStyled circular size="large">
+					<button
+						v-if="authUser"
+						v-tooltip="followTooltip"
+						type="button"
+						:aria-label="followLabel"
+						@click="emit('follow')"
+					>
+						<HeartIcon :fill="following ? 'currentColor' : 'none'" />
+					</button>
+					<nuxt-link
+						v-else
+						v-tooltip="followTooltip"
+						:to="signInRoute"
+						:aria-label="followLabel"
+					>
+						<HeartIcon :fill="following ? 'currentColor' : 'none'" />
+					</nuxt-link>
+				</ButtonStyled>
+
+				<ProjectCollectionSaveButton
+					:auth-user="authUser"
+					:sign-in-route="signInRoute"
+					:project-id="project.id"
+					:collections="collections"
+					:saved="saved"
+					:base-id="baseId"
+					:no-collections-label="noCollectionsLabel"
+					:create-new-collection-label="createNewCollectionLabel"
+					:collect-project="collectProject"
+					:create-collection="createCollection"
+				/>
+
+				<ButtonStyled circular size="large" type="transparent">
+					<TeleportOverflowMenu
+						:options="moreActions"
+						:tooltip="moreOptionsLabel"
+						:aria-label="moreOptionsLabel"
+					>
+						<MoreVerticalIcon />
+					</TeleportOverflowMenu>
+				</ButtonStyled>
+			</PageHeaderActions>
+		</template>
+	</PageHeader>
+</template>
+
+<script setup>
+import {
+	ChartIcon,
+	ClipboardCopyIcon,
+	DownloadIcon,
+	HeartIcon,
+	MoreVerticalIcon,
+	PlayIcon,
+	ReportIcon,
+	ScaleIcon,
+	ScanEyeIcon,
+	ServerPlusIcon,
+	SettingsIcon,
+	XIcon,
+} from '@modrinth/assets'
+import {
+	ButtonStyled,
+	commonMessages,
+	FormattedTag,
+	PageHeader,
+	PageHeaderActions,
+	PageHeaderMetadata,
+	PageHeaderMetadataNumberItem,
+	PageHeaderMetadataTagsItem,
+	PageHeaderObjectAvatarLeading,
+	ProjectStatusBadge,
+	ServerDetails,
+	TagItem,
+	TeleportOverflowMenu,
+	useVIntl,
+} from '@modrinth/ui'
+import { capitalizeString } from '@modrinth/utils'
+import { Tooltip } from 'floating-vue'
+import { computed } from 'vue'
+
+import ProjectCollectionSaveButton from '~/components/ui/ProjectCollectionSaveButton.vue'
+
+const props = defineProps({
+	project: {
+		type: Object,
+		required: true,
+	},
+	projectV3: {
+		type: Object,
+		default: null,
+	},
+	authUser: {
+		type: Object,
+		default: null,
+	},
+	signInRoute: {
+		type: [Object, String],
+		required: true,
+	},
+	collections: {
+		type: Array,
+		default: () => [],
+	},
+	baseId: {
+		type: String,
+		required: true,
+	},
+	noCollectionsLabel: {
+		type: String,
+		required: true,
+	},
+	createNewCollectionLabel: {
+		type: String,
+		required: true,
+	},
+	collectProject: {
+		type: Function,
+		required: true,
+	},
+	createCollection: {
+		type: Function,
+		required: true,
+	},
+	isServerProject: {
+		type: Boolean,
+		default: false,
+	},
+	showStatusBadge: {
+		type: Boolean,
+		default: false,
+	},
+	showEditProject: {
+		type: Boolean,
+		default: false,
+	},
+	primaryMuted: {
+		type: Boolean,
+		default: false,
+	},
+	primaryLabelHidden: {
+		type: Boolean,
+		default: false,
+	},
+	canCreateServer: {
+		type: Boolean,
+		default: false,
+	},
+	showQuickServerButton: {
+		type: Boolean,
+		default: false,
+	},
+	showCreateServerPrompt: {
+		type: Boolean,
+		default: false,
+	},
+	following: {
+		type: Boolean,
+		default: false,
+	},
+	saved: {
+		type: Boolean,
+		default: false,
+	},
+	isMember: {
+		type: Boolean,
+		default: false,
+	},
+	isStaff: {
+		type: Boolean,
+		default: false,
+	},
+	showModerationChecklist: {
+		type: Boolean,
+		default: false,
+	},
+	createServerPromptFooter: {
+		type: String,
+		default: '',
+	},
+	labels: {
+		type: Object,
+		required: true,
+	},
+})
+
+const emit = defineEmits([
+	'category',
+	'primary',
+	'createServer',
+	'dismissCreateServer',
+	'follow',
+	'analytics',
+	'moderationChecklist',
+	'techReview',
+	'report',
+	'copyId',
+	'copyPermalink',
+])
+
+const { formatMessage } = useVIntl()
+
+const downloadsLabel = computed(() =>
+	formatMessage(props.labels.downloadsStat, {
+		count: props.project.downloads,
+	}),
+)
+const followersLabel = computed(() =>
+	formatMessage(props.labels.followersStat, {
+		count: props.project.followers,
+	}),
+)
+const downloadsTooltip = computed(() =>
+	capitalizeString(
+		formatMessage(commonMessages.projectDownloads, {
+			count: props.project.downloads,
+		}),
+	),
+)
+const followersTooltip = computed(() =>
+	capitalizeString(
+		formatMessage(commonMessages.projectFollowers, {
+			count: props.project.followers,
+		}),
+	),
+)
+const projectPath = computed(
+	() => `/${props.project.project_type}/${props.project.slug ? props.project.slug : props.project.id}`,
+)
+const primaryLabel = computed(() =>
+	props.isServerProject ? props.labels.playButton : props.labels.downloadButton,
+)
+const primaryColor = computed(() => (props.primaryMuted ? 'standard' : 'brand'))
+const primaryTooltip = computed(() => (props.primaryLabelHidden ? primaryLabel.value : undefined))
+const showCreateServerAction = computed(() => props.canCreateServer && props.showQuickServerButton)
+const createServerTo = computed(() => `/hosting?project=${props.project.id}#plan`)
+const createServerLabel = computed(() => props.labels.createServer)
+const createServerTooltip = computed(() => props.labels.createServerTooltip)
+const createServerPromptTitle = computed(() => props.labels.serversPromoTitle)
+const createServerPromptDescription = computed(() => props.labels.serversPromoDescription)
+const createServerPromptBadge = computed(() => props.labels.newBadge)
+const createServerDismissLabel = computed(() => props.labels.dontShowAgain)
+const followLabel = computed(() =>
+	props.following ? props.labels.unfollowButton : props.labels.followButton,
+)
+const followTooltip = computed(() => followLabel.value)
+const editProjectLabel = computed(() => props.labels.editProject)
+const moreOptionsLabel = computed(() => props.labels.moreOptions)
+
+const moreActions = computed(() => [
+	{
+		id: 'analytics',
+		label: props.labels.analyticsButton,
+		icon: ChartIcon,
+		link: `${projectPath.value}/settings/analytics`,
+		shown: !!props.authUser && props.showEditProject,
+	},
+	{
+		divider: true,
+		shown: !!props.authUser && props.showEditProject,
+	},
+	{
+		id: 'moderation-checklist',
+		label: props.labels.reviewProject,
+		icon: ScaleIcon,
+		action: () => emit('moderationChecklist'),
+		color: 'orange',
+		shown: !!props.authUser && props.isStaff && !props.showModerationChecklist,
+	},
+	{
+		divider: true,
+		shown: !!props.authUser && props.isStaff && !props.showModerationChecklist,
+	},
+	{
+		id: 'tech-review',
+		label: props.labels.techReview,
+		icon: ScanEyeIcon,
+		link: `/moderation/technical-review/${props.project.id}`,
+		color: 'orange',
+		shown: !!props.authUser && props.isStaff,
+	},
+	{
+		divider: true,
+		shown: !!props.authUser && props.isStaff,
+	},
+	{
+		id: 'report',
+		label: props.labels.reportButton,
+		icon: ReportIcon,
+		action: () => emit('report'),
+		color: 'red',
+		shown: !props.isMember,
+	},
+	{
+		id: 'copy-id',
+		label: props.labels.copyIdButton,
+		icon: ClipboardCopyIcon,
+		action: () => emit('copyId'),
+	},
+	{
+		id: 'copy-permalink',
+		label: props.labels.copyPermalinkButton,
+		icon: ClipboardCopyIcon,
+		action: () => emit('copyPermalink'),
+	},
+])
+</script>
diff --git a/apps/frontend/src/components/ui/UserPageHeader.vue b/apps/frontend/src/components/ui/UserPageHeader.vue
new file mode 100644
index 0000000000..7d5cd0a86d
--- /dev/null
+++ b/apps/frontend/src/components/ui/UserPageHeader.vue
@@ -0,0 +1,263 @@
+<template>
+	<PageHeader :title="user.username" :summary="summary">
+		<template #leading>
+			<PageHeaderUserAvatarLeading
+				:src="user.avatar_url"
+				:username="user.username"
+				:size="isModrinthUser ? '64px' : '96px'"
+			/>
+		</template>
+
+		<template v-if="isOfficialAccount || showAffiliateBadge" #badges>
+			<PageHeaderBadgeItem
+				v-if="isOfficialAccount"
+				:icon="BadgeCheckIcon"
+				:icon-props="{ fill: 'var(--color-brand-highlight)' }"
+				:tooltip="labels.officialAccount"
+				class="border-brand-highlight bg-brand-highlight text-brand"
+			>
+				{{ labels.officialAccount }}
+			</PageHeaderBadgeItem>
+			<PageHeaderBadgeItem
+				v-if="showAffiliateBadge"
+				:icon="AffiliateIcon"
+				class="border-brand-highlight bg-brand-highlight text-brand"
+			>
+				{{ labels.affiliate }}
+			</PageHeaderBadgeItem>
+		</template>
+
+		<template v-if="$slots.summary" #summary>
+			<slot name="summary" />
+		</template>
+
+		<template v-if="!isModrinthUser" #metadata>
+			<PageHeaderMetadata>
+				<PageHeaderMetadataNumberItem
+					:icon="BoxIcon"
+					:value="projectsCount"
+					:label="projectCountLabel"
+				/>
+				<PageHeaderMetadataNumberItem
+					:icon="DownloadIcon"
+					:value="downloads"
+					:label="downloadsLabel"
+					:tooltip="downloadsTooltip"
+				/>
+				<PageHeaderMetadataTimeItem
+					:icon="CalendarIcon"
+					:date="user.created"
+					:label="labels.joined"
+					:tooltip="joinedTooltip"
+				/>
+			</PageHeaderMetadata>
+		</template>
+
+		<template #actions>
+			<PageHeaderActions>
+				<ButtonStyled v-if="isSelf" size="large">
+					<nuxt-link to="/settings/profile">
+						<EditIcon />
+						{{ labels.edit }}
+					</nuxt-link>
+				</ButtonStyled>
+				<ButtonStyled circular size="large" type="transparent">
+					<TeleportOverflowMenu
+						:options="moreActions"
+						:tooltip="labels.moreOptions"
+						:aria-label="labels.moreOptions"
+					>
+						<MoreVerticalIcon />
+					</TeleportOverflowMenu>
+				</ButtonStyled>
+			</PageHeaderActions>
+		</template>
+	</PageHeader>
+</template>
+
+<script setup>
+import {
+	AffiliateIcon,
+	BadgeCheckIcon,
+	BoxIcon,
+	CalendarIcon,
+	ChartIcon,
+	ClipboardCopyIcon,
+	CurrencyIcon,
+	DownloadIcon,
+	EditIcon,
+	InfoIcon,
+	MoreVerticalIcon,
+	ReportIcon,
+} from '@modrinth/assets'
+import {
+	ButtonStyled,
+	PageHeader,
+	PageHeaderActions,
+	PageHeaderBadgeItem,
+	PageHeaderMetadata,
+	PageHeaderMetadataNumberItem,
+	PageHeaderMetadataTimeItem,
+	PageHeaderUserAvatarLeading,
+	TeleportOverflowMenu,
+} from '@modrinth/ui'
+import { computed } from 'vue'
+
+const props = defineProps({
+	user: {
+		type: Object,
+		required: true,
+	},
+	summary: {
+		type: String,
+		default: null,
+	},
+	authUser: {
+		type: Object,
+		default: null,
+	},
+	isModrinthUser: {
+		type: Boolean,
+		default: false,
+	},
+	isOfficialAccount: {
+		type: Boolean,
+		default: false,
+	},
+	showAffiliateBadge: {
+		type: Boolean,
+		default: false,
+	},
+	isAffiliate: {
+		type: Boolean,
+		default: false,
+	},
+	isSelf: {
+		type: Boolean,
+		default: false,
+	},
+	isAdmin: {
+		type: Boolean,
+		default: false,
+	},
+	isStaff: {
+		type: Boolean,
+		default: false,
+	},
+	projectsCount: {
+		type: Number,
+		default: 0,
+	},
+	downloads: {
+		type: Number,
+		default: 0,
+	},
+	projectCountLabel: {
+		type: String,
+		required: true,
+	},
+	downloadsLabel: {
+		type: String,
+		required: true,
+	},
+	downloadsTooltip: {
+		type: String,
+		default: undefined,
+	},
+	joinedTooltip: {
+		type: String,
+		default: undefined,
+	},
+	labels: {
+		type: Object,
+		required: true,
+	},
+})
+
+const emit = defineEmits([
+	'manageProjects',
+	'report',
+	'copyId',
+	'copyPermalink',
+	'openBilling',
+	'toggleAffiliate',
+	'openInfo',
+	'openAnalytics',
+	'editRole',
+])
+
+const moreActions = computed(() => [
+	{
+		id: 'manage-projects',
+		label: props.labels.manageProjects,
+		icon: BoxIcon,
+		action: () => emit('manageProjects'),
+		shown: props.isSelf,
+	},
+	{
+		divider: true,
+		shown: props.isSelf,
+	},
+	{
+		id: 'report',
+		label: props.labels.report,
+		icon: ReportIcon,
+		action: () => emit('report'),
+		color: 'red',
+		shown: props.authUser?.id !== props.user.id,
+	},
+	{
+		id: 'copy-id',
+		label: props.labels.copyId,
+		icon: ClipboardCopyIcon,
+		action: () => emit('copyId'),
+	},
+	{
+		id: 'copy-permalink',
+		label: props.labels.copyPermalink,
+		icon: ClipboardCopyIcon,
+		action: () => emit('copyPermalink'),
+	},
+	{
+		divider: true,
+		shown: props.isAdmin,
+	},
+	{
+		id: 'open-billing',
+		label: props.labels.billing,
+		icon: CurrencyIcon,
+		action: () => emit('openBilling'),
+		shown: props.isStaff,
+	},
+	{
+		id: 'toggle-affiliate',
+		label: props.isAffiliate ? props.labels.removeAffiliate : props.labels.setAffiliate,
+		icon: AffiliateIcon,
+		action: () => emit('toggleAffiliate'),
+		shown: props.isAdmin,
+		remainOnClick: true,
+		color: props.isAffiliate ? 'red' : 'orange',
+	},
+	{
+		id: 'open-info',
+		label: props.labels.info,
+		icon: InfoIcon,
+		action: () => emit('openInfo'),
+		shown: props.isStaff,
+	},
+	{
+		id: 'open-analytics',
+		label: props.labels.analytics,
+		icon: ChartIcon,
+		action: () => emit('openAnalytics'),
+		shown: props.isAdmin,
+	},
+	{
+		id: 'edit-role',
+		label: props.labels.editRole,
+		icon: EditIcon,
+		action: () => emit('editRole'),
+		shown: props.isAdmin,
+	},
+])
+</script>
diff --git a/apps/frontend/src/pages/[type]/[project].vue b/apps/frontend/src/pages/[type]/[project].vue
index 672d1b7cea..bbefcb572d 100644
--- a/apps/frontend/src/pages/[type]/[project].vue
+++ b/apps/frontend/src/pages/[type]/[project].vue
@@ -128,14 +128,42 @@
 							@set-processing="setProcessing"
 						/>
 					</div>
-					<PageHeader
+					<ProjectPageHeader
 						v-if="projectV3Loaded"
-						:title="project.title"
-						:summary="project.description"
-						:leading="projectHeaderLeading"
-						:badges="projectHeaderBadges"
-						:metadata="projectHeaderMetadata"
-						:actions="projectHeaderActions"
+						:project="project"
+						:project-v3="projectV3"
+						:auth-user="auth.user"
+						:sign-in-route="signInRouteObj"
+						:collections="collections"
+						:base-id="baseId"
+						:no-collections-label="formatMessage(messages.noCollectionsFound)"
+						:create-new-collection-label="formatMessage(messages.createNewCollection)"
+						:collect-project="onUserCollectProject"
+						:create-collection="(event) => modalCollection?.show(event)"
+						:is-server-project="isServerProject"
+						:show-status-badge="!!currentMember || project.status !== 'approved'"
+						:show-edit-project="!!(auth.user && currentMember)"
+						:primary-muted="!!currentMember || route.name === 'type-project-version-version'"
+						:primary-label-hidden="!!(auth.user && currentMember)"
+						:can-create-server="canCreateServerFrom"
+						:show-quick-server-button="flags.showProjectPageQuickServerButton"
+						:show-create-server-prompt="flags.showProjectPageCreateServersTooltip"
+						:create-server-prompt-footer="projectHeaderCreateServerPromptFooter"
+						:following="following"
+						:saved="collections.some((x) => x.projects.includes(project.id))"
+						:is-member="isMember"
+						:is-staff="!!(auth.user && tags.staffRoles.includes(auth.user.role))"
+						:show-moderation-checklist="showModerationChecklist"
+						:labels="projectHeaderLabels"
+						@category="(category) => router.push(`${projectSearchUrl}?f=categories:${category}`)"
+						@primary="handleProjectHeaderPrimary"
+						@create-server="dismissProjectHeaderCreateServerPrompt"
+						@dismiss-create-server="dismissProjectHeaderCreateServerPrompt"
+						@follow="followProjectFromHeader"
+						@moderation-checklist="openModerationChecklistFromMenu"
+						@report="reportProjectFromHeader"
+						@copy-id="copyId"
+						@copy-permalink="copyPermalink"
 					/>
 					<ProjectMemberHeader
 						v-if="currentMember"
@@ -372,19 +400,12 @@
 import {
 	BookTextIcon,
 	CalendarIcon,
-	ChartIcon,
 	ChevronRightIcon,
-	ClipboardCopyIcon,
 	DownloadIcon,
 	ExternalIcon,
 	HeartIcon,
 	ListIcon,
-	MoreVerticalIcon,
-	PlayIcon,
-	ReportIcon,
 	ScaleIcon,
-	ScanEyeIcon,
-	ServerPlusIcon,
 	SettingsIcon,
 	VersionIcon,
 } from '@modrinth/assets'
@@ -399,7 +420,6 @@ import {
 	NavTabs,
 	NewModal,
 	OpenInAppModal,
-	PageHeader,
 	PROJECT_DEP_MARKER_QUERY,
 	ProjectBackgroundGradient,
 	ProjectEnvironmentModal,
@@ -409,10 +429,7 @@ import {
 	ProjectSidebarLinks,
 	ProjectSidebarServerInfo,
 	ProjectSidebarTags,
-	ProjectStatusBadge,
 	provideProjectPageContext,
-	ServerDetails,
-	useCompactNumber,
 	useDebugLogger,
 	useFormatDateTime,
 	useFormatPrice,
@@ -430,8 +447,8 @@ import CollectionCreateModal from '~/components/ui/create/CollectionCreateModal.
 import MessageBanner from '~/components/ui/MessageBanner.vue'
 import ModerationChecklist from '~/components/ui/moderation/checklist/ModerationChecklist.vue'
 import ModerationProjectNags from '~/components/ui/moderation/ModerationProjectNags.vue'
-import ProjectCollectionSaveButton from '~/components/ui/ProjectCollectionSaveButton.vue'
 import ProjectDownloadModal from '~/components/ui/ProjectDownloadModal/index.vue'
+import ProjectPageHeader from '~/components/ui/ProjectPageHeader.vue'
 import ProjectMemberHeader from '~/components/ui/ProjectMemberHeader.vue'
 import { getSignInRouteObj } from '~/composables/auth.ts'
 import { saveFeatureFlags } from '~/composables/featureFlags.ts'
@@ -487,7 +504,6 @@ const flags = useFeatureFlags()
 const cosmetics = useCosmetics()
 
 const { formatMessage } = useVIntl()
-const { formatCompactNumber } = useCompactNumber()
 const formatPrice = useFormatPrice()
 const formatDateTime = useFormatDateTime({
 	timeStyle: 'short',
@@ -1476,270 +1492,40 @@ const canCreateServerFrom = computed(() => {
 	return project.value.project_type === 'modpack' && project.value.server_side !== 'unsupported'
 })
 
-const projectHeaderLeading = computed(() => ({
-	type: 'avatar',
-	src: project.value?.icon_url,
-	alt: project.value?.title,
-	avatarSize: '96px',
-}))
-
-const projectHeaderBadges = computed(() => {
-	if (!project.value) return []
-	return currentMember.value || project.value.status !== 'approved'
-		? [
-				{
-					id: 'status',
-					type: 'component',
-					component: ProjectStatusBadge,
-					componentProps: {
-						status: project.value.status,
-					},
-				},
-			]
-		: []
-})
-
 const projectSearchUrl = computed(
 	() => `/discover/${isServerProject.value ? 'servers' : `${project.value?.project_type}s`}`,
 )
 
-const projectHeaderMetadata = computed(() => {
-	if (!project.value) return []
-	const items = []
-
-	if (isServerProject.value) {
-		if (projectV3.value?.status !== 'draft') {
-			items.push({
-				id: 'server-details',
-				type: 'component',
-				component: ServerDetails,
-				componentProps: {
-					onlinePlayers: projectV3.value?.minecraft_java_server?.ping?.data?.players_online ?? 0,
-					statusOnline: !!projectV3.value?.minecraft_java_server?.ping?.data,
-					recentPlays: projectV3.value?.minecraft_java_server?.verified_plays_2w ?? 0,
-				},
-			})
-		}
-	} else {
-		items.push(
-			{
-				id: 'downloads',
-				icon: DownloadIcon,
-				label: formatCompactNumber(project.value.downloads),
-				tooltip: capitalizeString(
-					formatMessage(commonMessages.projectDownloads, {
-						count: project.value.downloads,
-					}),
-				),
-				class: 'font-semibold cursor-help',
-			},
-			{
-				id: 'followers',
-				icon: HeartIcon,
-				label: formatCompactNumber(project.value.followers),
-				tooltip: capitalizeString(
-					formatMessage(commonMessages.projectFollowers, {
-						count: project.value.followers,
-					}),
-				),
-				class: 'font-semibold cursor-help',
-			},
-		)
-	}
-
-	if (project.value.categories.length > 0) {
-		items.push({
-			id: 'categories',
-			tags: project.value.categories.map((category) => ({
-				id: category,
-				tag: category,
-				onClick: () => router.push(`${projectSearchUrl.value}?f=categories:${category}`),
-			})),
-			class: 'hidden md:flex',
-		})
-	}
-
-	return items
-})
-
-const projectHeaderActions = computed(() => {
-	if (!project.value) return []
-
-	const projectPath = `/${project.value.project_type}/${project.value.slug ? project.value.slug : project.value.id}`
-	const hasMember = !!currentMember.value
-	const userSignedIn = !!auth.value.user
-	const mutedPrimaryAction = hasMember || route.name === 'type-project-version-version'
-	const primaryLabel = isServerProject.value ? 'Play' : formatMessage(commonMessages.downloadButton)
+const projectHeaderCreateServerPromptFooter = computed(() =>
+	formatMessage(messages.serversPromoPricing, {
+		price: formatPrice(500, 'USD', true),
+		small: (children) => (Array.isArray(children) ? children.join('') : children),
+	}),
+)
 
-	return [
-		...(userSignedIn && hasMember
-			? [
-					{
-						id: 'edit-project',
-						label: 'Edit project',
-						icon: SettingsIcon,
-						color: 'brand',
-						to: `${projectPath}/settings`,
-					},
-				]
-			: []),
-		{
-			id: isServerProject.value ? 'play' : 'download',
-			label: primaryLabel,
-			icon: isServerProject.value ? PlayIcon : DownloadIcon,
-			color: mutedPrimaryAction ? 'standard' : 'brand',
-			labelHidden: userSignedIn && hasMember,
-			tooltip: userSignedIn && hasMember ? primaryLabel : undefined,
-			onClick: (event) => {
-				if (isServerProject.value) {
-					handlePlayServerProject()
-				} else {
-					downloadModal.value?.show(event)
-				}
-			},
-		},
-		...(canCreateServerFrom.value && flags.value.showProjectPageQuickServerButton
-			? [
-					{
-						id: 'create-server',
-						label: formatMessage(messages.serversPromoTitle),
-						icon: ServerPlusIcon,
-						labelHidden: true,
-						tooltip: formatMessage(messages.createServerTooltip),
-						to: `/hosting?project=${project.value.id}#plan`,
-						onClick: () => {
-							flags.value.showProjectPageCreateServersTooltip = false
-							saveFeatureFlags()
-						},
-						prompt: {
-							title: formatMessage(messages.serversPromoTitle),
-							description: formatMessage(messages.serversPromoDescription),
-							badge: formatMessage(commonMessages.newBadge),
-							footer: formatMessage(messages.serversPromoPricing, {
-								price: formatPrice(500, 'USD', true),
-								small: (children) => (Array.isArray(children) ? children.join('') : children),
-							}),
-							dismissLabel: formatMessage(messages.dontShowAgain),
-							shown: flags.value.showProjectPageCreateServersTooltip,
-							placement: 'bottom-start',
-							onDismiss: () => {
-								flags.value.showProjectPageCreateServersTooltip = false
-								saveFeatureFlags()
-							},
-						},
-					},
-				]
-			: []),
-		{
-			id: 'follow',
-			label: following.value
-				? formatMessage(commonMessages.unfollowButton)
-				: formatMessage(commonMessages.followButton),
-			icon: HeartIcon,
-			iconProps: {
-				fill: following.value ? 'currentColor' : 'none',
-			},
-			labelHidden: true,
-			tooltip: following.value
-				? formatMessage(commonMessages.unfollowButton)
-				: formatMessage(commonMessages.followButton),
-			to: userSignedIn ? undefined : signInRouteObj.value,
-			onClick: userSignedIn ? () => userFollowProject(project.value) : undefined,
-		},
-		{
-			id: 'save',
-			label: formatMessage(commonMessages.saveButton),
-			kind: 'component',
-			component: ProjectCollectionSaveButton,
-			componentProps: {
-				authUser: auth.value.user,
-				signInRoute: signInRouteObj.value,
-				projectId: project.value.id,
-				collections: collections.value,
-				saved: collections.value.some((x) => x.projects.includes(project.value.id)),
-				baseId,
-				noCollectionsLabel: formatMessage(messages.noCollectionsFound),
-				createNewCollectionLabel: formatMessage(messages.createNewCollection),
-				collectProject: onUserCollectProject,
-				createCollection: (event) => modalCollection.value?.show(event),
-			},
-		},
-		{
-			id: 'more',
-			label: formatMessage(commonMessages.moreOptionsButton),
-			icon: MoreVerticalIcon,
-			labelHidden: true,
-			type: 'transparent',
-			tooltip: formatMessage(commonMessages.moreOptionsButton),
-			menuActions: [
-				{
-					id: 'analytics',
-					label: formatMessage(commonMessages.analyticsButton),
-					icon: ChartIcon,
-					link: `${projectPath}/settings/analytics`,
-					shown: userSignedIn && hasMember,
-				},
-				{
-					divider: true,
-					shown: userSignedIn && hasMember,
-				},
-				{
-					id: 'moderation-checklist',
-					label: formatMessage(messages.reviewProject),
-					icon: ScaleIcon,
-					action: openModerationChecklistFromMenu,
-					color: 'orange',
-					shown:
-						userSignedIn &&
-						tags.value.staffRoles.includes(auth.value.user.role) &&
-						!showModerationChecklist.value,
-				},
-				{
-					divider: true,
-					shown:
-						userSignedIn &&
-						tags.value.staffRoles.includes(auth.value.user.role) &&
-						!showModerationChecklist.value,
-				},
-				{
-					id: 'tech-review',
-					label: 'Tech review',
-					icon: ScanEyeIcon,
-					link: `/moderation/technical-review/${project.value.id}`,
-					color: 'orange',
-					shown: userSignedIn && tags.value.staffRoles.includes(auth.value.user.role),
-				},
-				{
-					divider: true,
-					shown: userSignedIn && tags.value.staffRoles.includes(auth.value.user.role),
-				},
-				{
-					id: 'report',
-					label: formatMessage(commonMessages.reportButton),
-					icon: ReportIcon,
-					action: () =>
-						auth.value.user
-							? reportProject(project.value.id)
-							: navigateTo(getSignInRouteObj(route, getReportPath('project', project.value.id))),
-					color: 'red',
-					shown: !isMember.value,
-				},
-				{
-					id: 'copy-id',
-					label: formatMessage(commonMessages.copyIdButton),
-					icon: ClipboardCopyIcon,
-					action: () => copyId(),
-				},
-				{
-					id: 'copy-permalink',
-					label: formatMessage(commonMessages.copyPermalinkButton),
-					icon: ClipboardCopyIcon,
-					action: () => copyPermalink(),
-				},
-			],
-		},
-	]
-})
+const projectHeaderLabels = computed(() => ({
+	analyticsButton: formatMessage(commonMessages.analyticsButton),
+	copyIdButton: formatMessage(commonMessages.copyIdButton),
+	copyPermalinkButton: formatMessage(commonMessages.copyPermalinkButton),
+	createServer: formatMessage(messages.serversPromoTitle),
+	createServerTooltip: formatMessage(messages.createServerTooltip),
+	dontShowAgain: formatMessage(messages.dontShowAgain),
+	downloadButton: formatMessage(commonMessages.downloadButton),
+	downloadsStat: messages.downloadsStat,
+	editProject: 'Edit project',
+	followButton: formatMessage(commonMessages.followButton),
+	followersStat: messages.followersStat,
+	moreOptions: formatMessage(commonMessages.moreOptionsButton),
+	newBadge: formatMessage(commonMessages.newBadge),
+	playButton: 'Play',
+	reportButton: formatMessage(commonMessages.reportButton),
+	reviewProject: formatMessage(messages.reviewProject),
+	saveButton: formatMessage(commonMessages.saveButton),
+	serversPromoDescription: formatMessage(messages.serversPromoDescription),
+	serversPromoTitle: formatMessage(messages.serversPromoTitle),
+	techReview: 'Tech review',
+	unfollowButton: formatMessage(commonMessages.unfollowButton),
+}))
 
 const createCanonicalUrl = () =>
 	project.value ? `https://modrinth.com/project/${project.value.id}` : undefined
@@ -1775,6 +1561,33 @@ if (!route.name.startsWith('type-project-settings')) {
 
 const onUserCollectProject = useClientTry(userCollectProject)
 
+function handleProjectHeaderPrimary(event) {
+	if (isServerProject.value) {
+		handlePlayServerProject()
+	} else {
+		downloadModal.value?.show(event)
+	}
+}
+
+function dismissProjectHeaderCreateServerPrompt() {
+	flags.value.showProjectPageCreateServersTooltip = false
+	saveFeatureFlags()
+}
+
+function followProjectFromHeader() {
+	if (!project.value) return
+	userFollowProject(project.value)
+}
+
+function reportProjectFromHeader() {
+	if (!project.value) return
+	if (auth.value.user) {
+		reportProject(project.value.id)
+	} else {
+		navigateTo(getSignInRouteObj(route, getReportPath('project', project.value.id)))
+	}
+}
+
 watch(
 	[versionsV3, _versionsV3Error],
 	([data, error]) => {
diff --git a/apps/frontend/src/pages/organization/[organization].vue b/apps/frontend/src/pages/organization/[organization].vue
index e1c2dc89a4..7b6950abd5 100644
--- a/apps/frontend/src/pages/organization/[organization].vue
+++ b/apps/frontend/src/pages/organization/[organization].vue
@@ -62,13 +62,17 @@
 		</template>
 		<template v-else>
 			<div class="normal-page__header py-4">
-				<PageHeader
-					:title="organization.name"
-					:summary="organization.description"
-					:leading="organizationHeaderLeading"
-					:badges="organizationHeaderBadges"
-					:metadata="organizationHeaderMetadata"
-					:actions="organizationHeaderActions"
+				<OrganizationPageHeader
+					:organization="organization"
+					:members-count="acceptedMembers?.length || 0"
+					:projects-count="projects?.length || 0"
+					:downloads="sumDownloads"
+					:downloads-tooltip="formatNumber(sumDownloads)"
+					:can-manage="!!(auth.user && currentMember)"
+					:labels="organizationHeaderLabels"
+					@manage-projects="router.push(`/organization/${organization.slug}/settings/projects`)"
+					@copy-id="copyId"
+					@copy-permalink="copyPermalink"
 				/>
 			</div>
 			<div class="normal-page__sidebar">
@@ -221,11 +225,7 @@ import {
 	BoxIcon,
 	ChartIcon,
 	CheckIcon,
-	ClipboardCopyIcon,
 	CrownIcon,
-	DownloadIcon,
-	MoreVerticalIcon,
-	OrganizationIcon,
 	SettingsIcon,
 	SpinnerIcon,
 	UsersIcon,
@@ -237,7 +237,6 @@ import {
 	commonMessages,
 	injectModrinthClient,
 	NavTabs,
-	PageHeader,
 	PROJECT_DEP_MARKER_QUERY,
 	ProjectCard,
 	ProjectCardList,
@@ -253,6 +252,7 @@ import UpToDate from '~/assets/images/illustrations/up_to_date.svg?component'
 import AdPlaceholder from '~/components/ui/AdPlaceholder.vue'
 import ModalCreation from '~/components/ui/create/ProjectCreateModal.vue'
 import NavStack from '~/components/ui/NavStack.vue'
+import OrganizationPageHeader from '~/components/ui/OrganizationPageHeader.vue'
 import { acceptTeamInvite, removeTeamMember } from '~/helpers/teams.js'
 import {
 	OrganizationContext,
@@ -468,93 +468,18 @@ provideOrganizationContext(organizationContext)
 
 const canAccessSettings = computed(() => !!currentMember.value?.accepted)
 
-const organizationHeaderLeading = computed(() => ({
-	type: 'avatar' as const,
-	src: organization.value?.icon_url,
-	alt: organization.value?.name,
-	avatarSize: '96px',
+const organizationHeaderLabels = computed(() => ({
+	copyId: formatMessage(commonMessages.copyIdButton),
+	copyPermalink: formatMessage(commonMessages.copyPermalinkButton),
+	downloads: 'downloads',
+	manage: 'Manage',
+	manageProjects: 'Manage projects',
+	members: 'members',
+	moreOptions: 'More options',
+	organization: 'Organization',
+	projects: 'projects',
 }))
 
-const organizationHeaderBadges = computed(() => [
-	{
-		id: 'organization',
-		label: 'Organization',
-		icon: OrganizationIcon,
-		class: 'px-0 text-primary',
-	},
-])
-
-const organizationHeaderMetadata = computed(() => [
-	{
-		id: 'members',
-		label: `${formatCompactNumber(acceptedMembers.value?.length || 0)} members`,
-		icon: UsersIcon,
-	},
-	{
-		id: 'projects',
-		label: `${formatCompactNumber(projects.value?.length || 0)} projects`,
-		icon: BoxIcon,
-	},
-	{
-		id: 'downloads',
-		label: `${formatCompactNumber(sumDownloads.value)} downloads`,
-		icon: DownloadIcon,
-		tooltip: formatNumber(sumDownloads.value),
-	},
-])
-
-const organizationHeaderActions = computed(() => [
-	...(auth.value.user && currentMember.value
-		? [
-				{
-					id: 'manage',
-					label: 'Manage',
-					icon: SettingsIcon,
-					to: `/organization/${organization.value?.slug}/settings`,
-				},
-			]
-		: []),
-	{
-		id: 'more',
-		label: 'More options',
-		icon: MoreVerticalIcon,
-		labelHidden: true,
-		type: 'transparent' as const,
-		tooltip: 'More options',
-		menuActions: [
-			{
-				id: 'manage-projects',
-				label: 'Manage projects',
-				icon: BoxIcon,
-				action: () => {
-					void router.push(`/organization/${organization.value?.slug}/settings/projects`)
-				},
-				shown: !!(auth.value.user && currentMember.value),
-			},
-			{
-				divider: true,
-				shown: !!(auth.value.user && currentMember.value),
-			},
-			{
-				id: 'copy-id',
-				label: formatMessage(commonMessages.copyIdButton),
-				icon: ClipboardCopyIcon,
-				action: () => {
-					void copyId()
-				},
-			},
-			{
-				id: 'copy-permalink',
-				label: formatMessage(commonMessages.copyPermalinkButton),
-				icon: ClipboardCopyIcon,
-				action: () => {
-					void copyPermalink()
-				},
-			},
-		],
-	},
-])
-
 watch(
 	[routeHasSettings, acceptedMembers, currentMember],
 	() => {
diff --git a/apps/frontend/src/pages/user/[user].vue b/apps/frontend/src/pages/user/[user].vue
index 282c699a99..60143e3027 100644
--- a/apps/frontend/src/pages/user/[user].vue
+++ b/apps/frontend/src/pages/user/[user].vue
@@ -120,13 +120,42 @@
 		</NewModal>
 		<div class="new-page sidebar" :class="{ 'alt-layout': cosmetics.leftContentLayout }">
 			<div class="normal-page__header py-4">
-				<PageHeader
-					:title="user.username"
+				<UserPageHeader
+					:user="user"
 					:summary="isModrinthUser ? null : profileHeaderSummary"
-					:leading="profileHeaderLeading"
-					:badges="profileHeaderBadges"
-					:metadata="profileHeaderMetadata"
-					:actions="profileHeaderActions"
+					:auth-user="auth.user"
+					:is-modrinth-user="isModrinthUser"
+					:is-official-account="isOfficialAccount"
+					:show-affiliate-badge="isAdminViewing && !!isAffiliate"
+					:is-affiliate="!!isAffiliate"
+					:is-self="auth.user?.id === user.id"
+					:is-admin="isAdminViewing"
+					:is-staff="!!(auth.user && isStaff(auth.user))"
+					:projects-count="projects?.length || 0"
+					:downloads="sumDownloads"
+					:project-count-label="
+						formatMessage(messages.profileProjectCountLabel, { count: projects?.length || 0 })
+					"
+					:downloads-label="
+						formatMessage(messages.profileDownloadCountLabel, { count: sumDownloads })
+					"
+					:downloads-tooltip="formatNumber(sumDownloads)"
+					:joined-tooltip="formatDateTime(user.created)"
+					:labels="profileHeaderLabels"
+					@manage-projects="navigateTo('/dashboard/projects')"
+					@report="reportProfileFromHeader"
+					@copy-id="copyId"
+					@copy-permalink="copyPermalink"
+					@open-billing="navigateTo(`/admin/billing/${user.id}`)"
+					@toggle-affiliate="toggleAffiliate(user.id)"
+					@open-info="userDetailsModal?.show()"
+					@open-analytics="
+						navigateTo({
+							path: '/dashboard/analytics',
+							query: { user: user.username || user.id },
+						})
+					"
+					@edit-role="openRoleEditModal"
 				>
 					<template v-if="isModrinthUser" #summary>
 						<IntlFormatted :message-id="messages.officialAccountBio">
@@ -152,7 +181,7 @@
 							</template>
 						</IntlFormatted>
 					</template>
-				</PageHeader>
+				</UserPageHeader>
 			</div>
 			<div class="normal-page__content">
 				<div v-if="navLinks.length > 2" class="mb-4 max-w-full overflow-x-auto">
@@ -336,23 +365,12 @@
 </template>
 <script setup>
 import {
-	AffiliateIcon,
-	BadgeCheckIcon,
 	BoxIcon,
-	CalendarIcon,
-	ChartIcon,
 	CheckIcon,
-	ClipboardCopyIcon,
-	CurrencyIcon,
-	DownloadIcon,
-	EditIcon,
 	GlobeIcon,
-	InfoIcon,
 	LibraryIcon,
 	LinkIcon,
 	LockIcon,
-	MoreVerticalIcon,
-	ReportIcon,
 	SaveIcon,
 	SpinnerIcon,
 	XIcon,
@@ -368,14 +386,11 @@ import {
 	IntlFormatted,
 	NavTabs,
 	NewModal,
-	PageHeader,
 	ProjectCard,
 	ProjectCardList,
-	useCompactNumber,
 	useFormatDateTime,
 	useFormatNumber,
 	UserBadges,
-	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
 import { isAdmin, isStaff, UserBadge } from '@modrinth/utils'
@@ -386,6 +401,7 @@ import UpToDate from '~/assets/images/illustrations/up_to_date.svg?component'
 import AdPlaceholder from '~/components/ui/AdPlaceholder.vue'
 import CollectionCreateModal from '~/components/ui/create/CollectionCreateModal.vue'
 import ModalCreation from '~/components/ui/create/ProjectCreateModal.vue'
+import UserPageHeader from '~/components/ui/UserPageHeader.vue'
 import { getSignInRouteObj } from '~/composables/auth.ts'
 import { projectUserSorting } from '~/utils/projects.ts'
 import { reportUser } from '~/utils/report-helpers.ts'
@@ -401,8 +417,6 @@ const queryClient = useQueryClient()
 
 const { formatMessage } = useVIntl()
 const formatNumber = useFormatNumber()
-const { formatCompactNumber, formatCompactNumberPlural } = useCompactNumber()
-const formatRelativeTime = useRelativeTime()
 const formatDateTime = useFormatDateTime({
 	timeStyle: 'short',
 	dateStyle: 'long',
@@ -411,13 +425,13 @@ const formatDateTime = useFormatDateTime({
 const { addNotification } = injectNotificationManager()
 
 const messages = defineMessages({
-	profileProjectsLabel: {
-		id: 'profile.label.projects',
-		defaultMessage: '{count} {countPlural, plural, one {project} other {projects}}',
+	profileProjectCountLabel: {
+		id: 'profile.label.project-count',
+		defaultMessage: '{count, plural, one {project} other {projects}}',
 	},
-	profileDownloadsLabel: {
-		id: 'profile.label.downloads',
-		defaultMessage: '{count} {countPlural, plural, one {download} other {downloads}}',
+	profileDownloadCountLabel: {
+		id: 'profile.label.download-count',
+		defaultMessage: '{count, plural, one {download} other {downloads}}',
 	},
 	collectionProjectsCount: {
 		id: 'profile.collection.projects-count',
@@ -714,6 +728,15 @@ async function copyPermalink() {
 	await navigator.clipboard.writeText(`${config.public.siteUrl}/user/${user.value.id}`)
 }
 
+function reportProfileFromHeader() {
+	if (!user.value) return
+	if (auth.value.user) {
+		reportUser(user.value.id)
+	} else {
+		navigateTo(getSignInRouteObj(route))
+	}
+}
+
 const isAffiliate = computed(() => user.value?.badges & UserBadge.AFFILIATE)
 const isAdminViewing = computed(() => isAdmin(auth.value.user))
 const userDetailsModal = useTemplateRef('userDetailsModal')
@@ -731,179 +754,24 @@ const profileHeaderSummary = computed(() =>
 			: formatMessage(messages.bioFallbackCreator),
 )
 
-const profileHeaderLeading = computed(() => ({
-	type: 'avatar',
-	src: user.value?.avatar_url,
-	alt: user.value?.username,
-	avatarSize: isModrinthUser.value ? '64px' : '96px',
-	circle: true,
+const profileHeaderLabels = computed(() => ({
+	affiliate: formatMessage(messages.affiliateLabel),
+	analytics: formatMessage(messages.analyticsButton),
+	billing: formatMessage(messages.billingButton),
+	copyId: formatMessage(commonMessages.copyIdButton),
+	copyPermalink: formatMessage(commonMessages.copyPermalinkButton),
+	edit: formatMessage(commonMessages.editButton),
+	editRole: formatMessage(messages.editRoleButton),
+	info: formatMessage(messages.infoButton),
+	joined: formatMessage(messages.profileJoinedLabel),
+	manageProjects: formatMessage(messages.profileManageProjectsButton),
+	moreOptions: 'More options',
+	officialAccount: formatMessage(messages.officialAccount),
+	removeAffiliate: formatMessage(messages.removeAffiliateButton),
+	report: formatMessage(commonMessages.reportButton),
+	setAffiliate: formatMessage(messages.setAffiliateButton),
 }))
 
-const profileHeaderBadges = computed(() => [
-	...(isOfficialAccount.value
-		? [
-				{
-					id: 'official',
-					label: formatMessage(messages.officialAccount),
-					icon: BadgeCheckIcon,
-					iconProps: {
-						fill: 'var(--color-brand-highlight)',
-					},
-					tooltip: formatMessage(messages.officialAccount),
-					class: 'border-brand-highlight bg-brand-highlight text-brand',
-				},
-			]
-		: []),
-	...(isAdminViewing.value && isAffiliate.value
-		? [
-				{
-					id: 'affiliate',
-					label: 'Affiliate',
-					icon: AffiliateIcon,
-					class: 'border-brand-highlight bg-brand-highlight text-brand',
-				},
-			]
-		: []),
-])
-
-const profileHeaderMetadata = computed(() => {
-	if (isModrinthUser.value) return []
-
-	return [
-		{
-			id: 'projects',
-			label: formatMessage(messages.profileProjectsLabel, {
-				count: formatCompactNumber(projects.value?.length || 0),
-				countPlural: formatCompactNumberPlural(projects.value?.length || 0),
-			}),
-			icon: BoxIcon,
-		},
-		{
-			id: 'downloads',
-			label: formatMessage(messages.profileDownloadsLabel, {
-				count: formatCompactNumber(sumDownloads.value),
-				countPlural: formatCompactNumberPlural(sumDownloads.value),
-			}),
-			icon: DownloadIcon,
-			tooltip: formatNumber(sumDownloads.value),
-		},
-		{
-			id: 'joined',
-			label: `${formatMessage(messages.profileJoinedLabel)} ${formatRelativeTime(user.value.created)}`,
-			icon: CalendarIcon,
-			tooltip: formatDateTime(user.value.created),
-		},
-	]
-})
-
-const profileHeaderActions = computed(() => {
-	if (!user.value) return []
-
-	const viewer = auth.value.user
-	const isSelf = viewer?.id === user.value.id
-
-	return [
-		...(isSelf
-			? [
-					{
-						id: 'edit-profile',
-						label: formatMessage(commonMessages.editButton),
-						icon: EditIcon,
-						to: '/settings/profile',
-					},
-				]
-			: []),
-		{
-			id: 'more',
-			label: 'More options',
-			icon: MoreVerticalIcon,
-			labelHidden: true,
-			type: 'transparent',
-			tooltip: 'More options',
-			menuActions: [
-				{
-					id: 'manage-projects',
-					label: formatMessage(messages.profileManageProjectsButton),
-					icon: BoxIcon,
-					action: () => navigateTo('/dashboard/projects'),
-					shown: isSelf,
-				},
-				{
-					divider: true,
-					shown: isSelf,
-				},
-				{
-					id: 'report',
-					label: formatMessage(commonMessages.reportButton),
-					icon: ReportIcon,
-					action: () => (viewer ? reportUser(user.value.id) : navigateTo(getSignInRouteObj(route))),
-					color: 'red',
-					shown: viewer?.id !== user.value.id,
-				},
-				{
-					id: 'copy-id',
-					label: formatMessage(commonMessages.copyIdButton),
-					icon: ClipboardCopyIcon,
-					action: () => copyId(),
-				},
-				{
-					id: 'copy-permalink',
-					label: formatMessage(commonMessages.copyPermalinkButton),
-					icon: ClipboardCopyIcon,
-					action: () => copyPermalink(),
-				},
-				{
-					divider: true,
-					shown: viewer && isAdmin(viewer),
-				},
-				{
-					id: 'open-billing',
-					label: formatMessage(messages.billingButton),
-					icon: CurrencyIcon,
-					action: () => navigateTo(`/admin/billing/${user.value.id}`),
-					shown: viewer && isStaff(viewer),
-				},
-				{
-					id: 'toggle-affiliate',
-					label: formatMessage(
-						isAffiliate.value ? messages.removeAffiliateButton : messages.setAffiliateButton,
-					),
-					icon: AffiliateIcon,
-					action: () => toggleAffiliate(user.value.id),
-					shown: isAdminViewing.value,
-					remainOnClick: true,
-					color: isAffiliate.value ? 'red' : 'orange',
-				},
-				{
-					id: 'open-info',
-					label: formatMessage(messages.infoButton),
-					icon: InfoIcon,
-					action: () => userDetailsModal.value?.show(),
-					shown: viewer && isStaff(viewer),
-				},
-				{
-					id: 'open-analytics',
-					label: formatMessage(messages.analyticsButton),
-					icon: ChartIcon,
-					action: () =>
-						navigateTo({
-							path: '/dashboard/analytics',
-							query: { user: user.value.username || user.value.id },
-						}),
-					shown: viewer && isAdmin(viewer),
-				},
-				{
-					id: 'edit-role',
-					label: formatMessage(messages.editRoleButton),
-					icon: EditIcon,
-					action: () => openRoleEditModal(),
-					shown: viewer && isAdmin(viewer),
-				},
-			],
-		},
-	]
-})
-
 const navLinks = computed(() => [
 	{
 		label: formatMessage(commonMessages.allProjectType),
diff --git a/packages/ui/src/components/base/page-header/metadata/page-header-metadata-number-item.vue b/packages/ui/src/components/base/page-header/metadata/page-header-metadata-number-item.vue
index 0d42d97153..9187a833cc 100644
--- a/packages/ui/src/components/base/page-header/metadata/page-header-metadata-number-item.vue
+++ b/packages/ui/src/components/base/page-header/metadata/page-header-metadata-number-item.vue
@@ -9,8 +9,10 @@
 		:action="action"
 		:disabled="disabled"
 	>
-		<span>{{ formattedValue }}</span>
-		<span v-if="label">{{ label }}</span>
+		<span class="inline-flex items-baseline gap-1">
+			<span>{{ formattedValue }}</span>
+			<span v-if="label">{{ label }}</span>
+		</span>
 	</PageHeaderMetadataItem>
 </template>
 

From f1f869bb8e6b200a9e435bf2b821d5a842c81abf Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Mon, 6 Jul 2026 21:10:25 +0100
Subject: [PATCH 07/12] fix: changes

---
 .../src/components/ui/ProjectPageHeader.vue   | 198 ++++-----
 .../ui/instance-page-header/index.vue         | 113 ++++-
 .../app-frontend/src/pages/instance/Index.vue |  38 +-
 apps/app-frontend/src/pages/project/Index.vue |  23 +-
 .../components/ui/OrganizationPageHeader.vue  |  73 ++--
 .../src/components/ui/ProjectPageHeader.vue   | 394 +++++++++---------
 .../src/components/ui/UserPageHeader.vue      | 213 ++++++----
 apps/frontend/src/pages/[type]/[project].vue  |  77 ----
 .../src/pages/organization/[organization].vue |  16 -
 apps/frontend/src/pages/user/[user].vue       |  82 ----
 packages/ui/src/components/base/index.ts      |   2 -
 .../page-header-object-avatar-leading.vue     |  39 --
 .../page-header-user-avatar-leading.vue       |  37 --
 .../ui/src/stories/base/PageHeader.stories.ts |  16 +-
 14 files changed, 567 insertions(+), 754 deletions(-)
 delete mode 100644 packages/ui/src/components/base/page-header/page-header-object-avatar-leading.vue
 delete mode 100644 packages/ui/src/components/base/page-header/page-header-user-avatar-leading.vue

diff --git a/apps/app-frontend/src/components/ui/ProjectPageHeader.vue b/apps/app-frontend/src/components/ui/ProjectPageHeader.vue
index f733e99330..166cb54f8f 100644
--- a/apps/app-frontend/src/components/ui/ProjectPageHeader.vue
+++ b/apps/app-frontend/src/components/ui/ProjectPageHeader.vue
@@ -5,7 +5,7 @@
 		@contextmenu.prevent.stop="emit('contextmenu', $event)"
 	>
 		<template #leading>
-			<PageHeaderObjectAvatarLeading :src="project.icon_url" :alt="project.title" size="96px" />
+			<Avatar :src="project.icon_url" :alt="project.title" :tint-by="project.id" size="96px" />
 		</template>
 
 		<template v-if="project.status !== 'approved'" #badges>
@@ -27,14 +27,14 @@
 						:icon="DownloadIcon"
 						:value="project.downloads"
 						label="downloads"
-						:tooltip="downloadsTooltip"
+						:tooltip="formatNumber(project.downloads)"
 						class="cursor-help"
 					/>
 					<PageHeaderMetadataNumberItem
 						:icon="HeartIcon"
 						:value="project.followers"
 						label="followers"
-						:tooltip="followersTooltip"
+						:tooltip="formatNumber(project.followers)"
 						class="cursor-help"
 					/>
 				</template>
@@ -61,14 +61,20 @@
 						>
 							<StopCircleIcon v-if="serverPlaying" />
 							<PlayIcon v-else />
-							{{ serverPlaying ? stopLabel : serverPlayLabel }}
+							{{
+								serverPlaying
+									? formatMessage(commonMessages.stopButton)
+									: serverInstallLoading
+										? formatMessage(commonMessages.installingLabel)
+										: formatMessage(commonMessages.playButton)
+							}}
 						</button>
 					</ButtonStyled>
 					<ButtonStyled circular size="large">
 						<button
-							v-tooltip="addServerToInstanceLabel"
+							v-tooltip="formatMessage(commonMessages.addServerToInstanceButton)"
 							type="button"
-							:aria-label="addServerToInstanceLabel"
+							:aria-label="formatMessage(commonMessages.addServerToInstanceButton)"
 							@click="emit('addServerToInstance')"
 						>
 							<PlusIcon />
@@ -87,13 +93,25 @@
 				<template v-else>
 					<ButtonStyled color="brand" size="large">
 						<button
-							v-tooltip="installButtonTooltip"
+							v-tooltip="
+								installButtonInstalled ? formatMessage(messages.alreadyInstalled) : undefined
+							"
 							type="button"
 							:disabled="installButtonDisabled"
 							@click="emit('install')"
 						>
 							<component :is="installButtonIcon" :class="installButtonIconClass" />
-							{{ installButtonLabel }}
+							{{
+								installButtonInstalled
+									? formatMessage(commonMessages.installedLabel)
+									: installButtonValidating
+										? formatMessage(commonMessages.validatingLabel)
+										: installButtonLoading
+											? formatMessage(commonMessages.installingLabel)
+											: serverProjectSelected
+												? formatMessage(commonMessages.selectedLabel)
+												: formatMessage(commonMessages.installButton)
+							}}
 						</button>
 					</ButtonStyled>
 					<ButtonStyled circular size="large" type="transparent">
@@ -111,7 +129,8 @@
 	</PageHeader>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
 import {
 	BookmarkIcon,
 	CheckIcon,
@@ -126,117 +145,82 @@ import {
 	StopCircleIcon,
 } from '@modrinth/assets'
 import {
+	Avatar,
 	ButtonStyled,
 	commonMessages,
+	defineMessages,
 	FormattedTag,
 	PageHeader,
 	PageHeaderActions,
 	PageHeaderMetadata,
 	PageHeaderMetadataNumberItem,
 	PageHeaderMetadataTagsItem,
-	PageHeaderObjectAvatarLeading,
 	ProjectStatusBadge,
 	ServerDetails,
 	TagItem,
 	TeleportOverflowMenu,
+	type TeleportOverflowMenuItem,
+	useFormatNumber,
 	useVIntl,
 } from '@modrinth/ui'
-import { capitalizeString } from '@modrinth/utils'
 import { computed } from 'vue'
 
-const props = defineProps({
-	project: {
-		type: Object,
-		required: true,
-	},
-	projectV3: {
-		type: Object,
-		default: null,
-	},
-	isServerProject: {
-		type: Boolean,
-		default: false,
-	},
-	installButtonLabel: {
-		type: String,
-		default: '',
-	},
-	installButtonTooltip: {
-		type: String,
-		default: null,
-	},
-	installButtonDisabled: {
-		type: Boolean,
-		default: false,
-	},
-	installButtonLoading: {
-		type: Boolean,
-		default: false,
-	},
-	installButtonInstalled: {
-		type: Boolean,
-		default: false,
-	},
-	serverProjectSelected: {
-		type: Boolean,
-		default: false,
-	},
-	serverPlaying: {
-		type: Boolean,
-		default: false,
-	},
-	serverInstallLoading: {
-		type: Boolean,
-		default: false,
-	},
-	stopLabel: {
-		type: String,
-		required: true,
-	},
-	playLabel: {
-		type: String,
-		required: true,
-	},
-	installingLabel: {
-		type: String,
-		required: true,
-	},
-	addServerToInstanceLabel: {
-		type: String,
-		required: true,
-	},
+type HeaderProject = Pick<
+	Labrinth.Projects.v2.Project,
+	'id' | 'title' | 'description' | 'status' | 'downloads' | 'followers' | 'categories'
+> & {
+	icon_url?: string | null
+}
+
+type HeaderProjectV3 = Pick<
+	Labrinth.Projects.v3.Project,
+	'status' | 'minecraft_java_server'
+>
+
+const props = withDefaults(defineProps<{
+	project: HeaderProject
+	projectV3?: HeaderProjectV3 | null
+	isServerProject?: boolean
+	installButtonDisabled?: boolean
+	installButtonValidating?: boolean
+	installButtonLoading?: boolean
+	installButtonInstalled?: boolean
+	serverProjectSelected?: boolean
+	serverPlaying?: boolean
+	serverInstallLoading?: boolean
+}>(), {
+	projectV3: null,
+	isServerProject: false,
+	installButtonDisabled: false,
+	installButtonValidating: false,
+	installButtonLoading: false,
+	installButtonInstalled: false,
+	serverProjectSelected: false,
+	serverPlaying: false,
+	serverInstallLoading: false,
 })
 
-const emit = defineEmits([
-	'contextmenu',
-	'category',
-	'install',
-	'playServer',
-	'stopServer',
-	'addServerToInstance',
-	'openBrowser',
-	'report',
-])
+const emit = defineEmits<{
+	contextmenu: [event: MouseEvent]
+	category: [category: string]
+	install: []
+	playServer: []
+	stopServer: []
+	addServerToInstance: []
+	openBrowser: []
+	report: []
+}>()
+
+const messages = defineMessages({
+	alreadyInstalled: {
+		id: 'app.project.install-button.already-installed',
+		defaultMessage: 'This project is already installed',
+	},
+})
 
 const { formatMessage } = useVIntl()
+const formatNumber = useFormatNumber()
 
-const downloadsTooltip = computed(() =>
-	capitalizeString(
-		formatMessage(commonMessages.projectDownloads, {
-			count: props.project.downloads,
-		}),
-	),
-)
-const followersTooltip = computed(() =>
-	capitalizeString(
-		formatMessage(commonMessages.projectFollowers, {
-			count: props.project.followers,
-		}),
-	),
-)
-const serverPlayLabel = computed(() =>
-	props.serverInstallLoading ? props.installingLabel : props.playLabel,
-)
 const installButtonIcon = computed(() => {
 	if (props.installButtonLoading && !props.installButtonInstalled) return SpinnerIcon
 	if (!props.installButtonInstalled && !props.serverProjectSelected) return DownloadIcon
@@ -245,10 +229,10 @@ const installButtonIcon = computed(() => {
 const installButtonIconClass = computed(() =>
 	props.installButtonLoading && !props.installButtonInstalled ? 'animate-spin' : undefined,
 )
-const serverMoreActions = computed(() => [
+const serverMoreActions = computed<TeleportOverflowMenuItem[]>(() => [
 	{
 		id: 'open-in-browser',
-		label: 'Open in browser',
+		label: formatMessage(commonMessages.openInModrinthButton),
 		icon: ExternalIcon,
 		action: () => emit('openBrowser'),
 	},
@@ -257,16 +241,16 @@ const serverMoreActions = computed(() => [
 	},
 	{
 		id: 'report',
-		label: 'Report',
+		label: formatMessage(commonMessages.reportButton),
 		icon: ReportIcon,
 		color: 'red',
 		action: () => emit('report'),
 	},
 ])
-const projectMoreActions = computed(() => [
+const projectMoreActions = computed<TeleportOverflowMenuItem[]>(() => [
 	{
 		id: 'follow',
-		label: 'Follow',
+		label: formatMessage(commonMessages.followButton),
 		icon: HeartIcon,
 		disabled: true,
 		tooltip: 'Coming soon',
@@ -274,7 +258,7 @@ const projectMoreActions = computed(() => [
 	},
 	{
 		id: 'save',
-		label: 'Save',
+		label: formatMessage(commonMessages.saveButton),
 		icon: BookmarkIcon,
 		disabled: true,
 		tooltip: 'Coming soon',
@@ -282,7 +266,7 @@ const projectMoreActions = computed(() => [
 	},
 	{
 		id: 'open-in-browser',
-		label: 'Open in browser',
+		label: formatMessage(commonMessages.openInModrinthButton),
 		icon: ExternalIcon,
 		action: () => emit('openBrowser'),
 	},
@@ -291,7 +275,7 @@ const projectMoreActions = computed(() => [
 	},
 	{
 		id: 'report',
-		label: 'Report',
+		label: formatMessage(commonMessages.reportButton),
 		icon: ReportIcon,
 		color: 'red',
 		action: () => emit('report'),
diff --git a/apps/app-frontend/src/components/ui/instance-page-header/index.vue b/apps/app-frontend/src/components/ui/instance-page-header/index.vue
index a4e2e5ae99..9c81a11174 100644
--- a/apps/app-frontend/src/components/ui/instance-page-header/index.vue
+++ b/apps/app-frontend/src/components/ui/instance-page-header/index.vue
@@ -1,7 +1,7 @@
 <template>
 	<PageHeader :title="instance.name">
 		<template #leading>
-			<PageHeaderObjectAvatarLeading
+			<Avatar
 				:src="iconSrc"
 				:alt="instance.name"
 				size="64px"
@@ -41,18 +41,22 @@
 		<template #actions>
 			<PageHeaderActions>
 				<ButtonStyled v-if="isInstalling" color="brand" size="large">
-					<button type="button" disabled>Installing...</button>
+					<button type="button" disabled>{{ formatMessage(commonMessages.installingLabel) }}</button>
 				</ButtonStyled>
 				<ButtonStyled v-else-if="instance.install_stage !== 'installed'" color="brand" size="large">
 					<button type="button" @click="emit('repair')">
 						<DownloadIcon />
-						Repair
+						{{ formatMessage(messages.repair) }}
 					</button>
 				</ButtonStyled>
 				<ButtonStyled v-else-if="playing" color="red" size="large">
 					<button type="button" :disabled="stopping" @click="emit('stop')">
 						<StopCircleIcon />
-						{{ stopping ? 'Stopping...' : 'Stop' }}
+						{{
+							stopping
+								? formatMessage(messages.stopping)
+								: formatMessage(commonMessages.stopButton)
+						}}
 					</button>
 				</ButtonStyled>
 				<JoinedButtons
@@ -64,18 +68,18 @@
 				<ButtonStyled v-else-if="!loading" color="brand" size="large">
 					<button type="button" @click="emit('play')">
 						<PlayIcon />
-						Play
+						{{ formatMessage(commonMessages.playButton) }}
 					</button>
 				</ButtonStyled>
 				<ButtonStyled v-else color="brand" size="large">
-					<button type="button" disabled>Starting...</button>
+					<button type="button" disabled>{{ formatMessage(messages.starting) }}</button>
 				</ButtonStyled>
 
 				<ButtonStyled circular size="large">
 					<button
-						v-tooltip="'Instance settings'"
+						v-tooltip="formatMessage(messages.instanceSettings)"
 						type="button"
-						aria-label="Instance settings"
+						:aria-label="formatMessage(messages.instanceSettings)"
 						@click="emit('settings')"
 					>
 						<SettingsIcon />
@@ -84,8 +88,8 @@
 				<ButtonStyled circular size="large" type="transparent">
 					<TeleportOverflowMenu
 						:options="moreActions"
-						tooltip="More actions"
-						aria-label="More actions"
+						:tooltip="formatMessage(messages.moreActions)"
+						:aria-label="formatMessage(messages.moreActions)"
 					>
 						<MoreVerticalIcon />
 					</TeleportOverflowMenu>
@@ -110,18 +114,22 @@ import {
 	TimerIcon,
 } from '@modrinth/assets'
 import {
+	Avatar,
 	ButtonStyled,
+	commonMessages,
+	defineMessages,
+	formatLoaderLabel,
 	JoinedButtons,
 	LoaderIcon as ServerLoaderIcon,
 	PageHeader,
 	PageHeaderActions,
 	PageHeaderMetadata,
 	PageHeaderMetadataItem,
-	PageHeaderObjectAvatarLeading,
 	TeleportOverflowMenu,
 	type JoinedButtonAction,
 	type ServerLoader,
 	type TeleportOverflowMenuItem,
+	useVIntl,
 } from '@modrinth/ui'
 import { computed } from 'vue'
 
@@ -129,15 +137,56 @@ import type { GameInstance } from '@/helpers/types'
 
 import InstanceHeaderServerMetadata from './instance-page-header-server-metadata.vue'
 
+const messages = defineMessages({
+	createShortcut: {
+		id: 'instance.action.create-shortcut',
+		defaultMessage: 'Create shortcut',
+	},
+	exportModpack: {
+		id: 'instance.action.export-modpack',
+		defaultMessage: 'Export modpack',
+	},
+	instanceSettings: {
+		id: 'instance.action.settings',
+		defaultMessage: 'Instance settings',
+	},
+	launchInstance: {
+		id: 'instance.action.launch-instance',
+		defaultMessage: 'Launch instance',
+	},
+	moreActions: {
+		id: 'instance.action.more-actions',
+		defaultMessage: 'More actions',
+	},
+	neverPlayed: {
+		id: 'instance.playtime.never-played',
+		defaultMessage: 'Never played',
+	},
+	openFolder: {
+		id: 'instance.action.open-folder',
+		defaultMessage: 'Open folder',
+	},
+	repair: {
+		id: 'instance.action.repair',
+		defaultMessage: 'Repair',
+	},
+	starting: {
+		id: 'instance.action.starting',
+		defaultMessage: 'Starting...',
+	},
+	stopping: {
+		id: 'instance.action.stopping',
+		defaultMessage: 'Stopping...',
+	},
+})
+
 const props = withDefaults(
 	defineProps<{
 		instance: GameInstance
 		iconSrc?: string | null
 		isServerInstance?: boolean
-		loaderDisplayName?: ServerLoader | null
-		loaderLabel?: string
 		showInstancePlayTime?: boolean
-		playtimeLabel?: string
+		timePlayed?: number
 		playing?: boolean
 		loading?: boolean
 		stopping?: boolean
@@ -152,10 +201,8 @@ const props = withDefaults(
 	{
 		iconSrc: null,
 		isServerInstance: false,
-		loaderDisplayName: null,
-		loaderLabel: '',
 		showInstancePlayTime: false,
-		playtimeLabel: '',
+		timePlayed: 0,
 		playing: false,
 		loading: false,
 		stopping: false,
@@ -188,17 +235,39 @@ const installingStages = [
 	'minecraft_installing',
 ]
 
+const { formatMessage } = useVIntl()
+
 const isInstalling = computed(() => installingStages.includes(props.instance.install_stage))
+const loaderDisplayName = computed(() => formatLoaderLabel(props.instance.loader) as ServerLoader)
+const loaderLabel = computed(() =>
+	[loaderDisplayName.value, props.instance.loader_version].filter(Boolean).join(' '),
+)
+const playtimeLabel = computed(() => {
+	if (props.timePlayed <= 0) return formatMessage(messages.neverPlayed)
+
+	const hours = Math.floor(props.timePlayed / 3600)
+	if (hours >= 1) {
+		return `${hours} hour${hours > 1 ? 's' : ''}`
+	}
+
+	const minutes = Math.floor(props.timePlayed / 60)
+	if (minutes >= 1) {
+		return `${minutes} minute${minutes > 1 ? 's' : ''}`
+	}
+
+	const seconds = Math.floor(props.timePlayed)
+	return `${seconds} second${seconds > 1 ? 's' : ''}`
+})
 const serverPlayActions = computed<JoinedButtonAction[]>(() => [
 	{
 		id: 'join_server',
-		label: 'Play',
+		label: formatMessage(commonMessages.playButton),
 		icon: PlayIcon,
 		action: () => emit('playServer'),
 	},
 	{
 		id: 'launch_instance',
-		label: 'Launch instance',
+		label: formatMessage(messages.launchInstance),
 		icon: PlayIcon,
 		action: () => emit('play'),
 	},
@@ -206,19 +275,19 @@ const serverPlayActions = computed<JoinedButtonAction[]>(() => [
 const moreActions = computed<TeleportOverflowMenuItem[]>(() => [
 	{
 		id: 'open-folder',
-		label: 'Open folder',
+		label: formatMessage(messages.openFolder),
 		icon: FolderOpenIcon,
 		action: () => emit('openFolder'),
 	},
 	{
 		id: 'export-mrpack',
-		label: 'Export modpack',
+		label: formatMessage(messages.exportModpack),
 		icon: PackageIcon,
 		action: () => emit('export'),
 	},
 	{
 		id: 'create-shortcut',
-		label: 'Create shortcut',
+		label: formatMessage(messages.createShortcut),
 		icon: ExternalIcon,
 		action: () => emit('createShortcut'),
 	},
diff --git a/apps/app-frontend/src/pages/instance/Index.vue b/apps/app-frontend/src/pages/instance/Index.vue
index 65afa975c6..36ac8bcc69 100644
--- a/apps/app-frontend/src/pages/instance/Index.vue
+++ b/apps/app-frontend/src/pages/instance/Index.vue
@@ -17,10 +17,8 @@
 				:instance="instance"
 				:icon-src="icon"
 				:is-server-instance="isServerInstance"
-				:loader-display-name="loaderDisplayName"
-				:loader-label="loaderLabel"
 				:show-instance-play-time="showInstancePlayTime"
-				:playtime-label="playtimeLabel"
+				:time-played="timePlayed"
 				:playing="playing"
 				:loading="loading"
 				:stopping="stopping"
@@ -112,16 +110,13 @@ import {
 	XIcon,
 } from '@modrinth/assets'
 import {
-	formatLoaderLabel,
 	injectNotificationManager,
 	NavTabs,
-	type ServerLoader,
 	useLoadingBarToken,
 } from '@modrinth/ui'
 import { useQueryClient } from '@tanstack/vue-query'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import dayjs from 'dayjs'
-import duration from 'dayjs/plugin/duration'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { computed, onUnmounted, ref, shallowRef, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -146,7 +141,6 @@ import { injectServerInstall } from '@/providers/server-install'
 import { handleSevereError } from '@/store/error.js'
 import { useBreadcrumbs, useTheming } from '@/store/state'
 
-dayjs.extend(duration)
 dayjs.extend(relativeTime)
 
 const { addNotification, handleError } = injectNotificationManager()
@@ -539,36 +533,6 @@ const timePlayed = computed(() => {
 		: 0
 })
 
-const timePlayedHumanized = computed(() => {
-	const duration = dayjs.duration(timePlayed.value, 'seconds')
-	const hours = Math.floor(duration.asHours())
-	if (hours >= 1) {
-		return hours + ' hour' + (hours > 1 ? 's' : '')
-	}
-
-	const minutes = Math.floor(duration.asMinutes())
-	if (minutes >= 1) {
-		return minutes + ' minute' + (minutes > 1 ? 's' : '')
-	}
-
-	const seconds = Math.floor(duration.asSeconds())
-	return seconds + ' second' + (seconds > 1 ? 's' : '')
-})
-
-const loaderDisplayName = computed(() =>
-	instance.value ? (formatLoaderLabel(instance.value.loader) as ServerLoader) : null,
-)
-
-const loaderLabel = computed(() =>
-	instance.value && loaderDisplayName.value
-		? [loaderDisplayName.value, instance.value.loader_version].filter(Boolean).join(' ')
-		: '',
-)
-
-const playtimeLabel = computed(() =>
-	timePlayed.value > 0 ? timePlayedHumanized.value : 'Never played',
-)
-
 onUnmounted(() => {
 	unlistenProcesses()
 	unlistenInstances()
diff --git a/apps/app-frontend/src/pages/project/Index.vue b/apps/app-frontend/src/pages/project/Index.vue
index 0ef3cf0bb0..26ba21da61 100644
--- a/apps/app-frontend/src/pages/project/Index.vue
+++ b/apps/app-frontend/src/pages/project/Index.vue
@@ -64,18 +64,13 @@
 					:project="data"
 					:project-v3="projectV3"
 					:is-server-project="isServerProject"
-					:install-button-label="installButtonLabel"
-					:install-button-tooltip="installButtonTooltip"
 					:install-button-disabled="installButtonDisabled"
+					:install-button-validating="installButtonValidating"
 					:install-button-loading="installButtonLoading"
 					:install-button-installed="installButtonInstalled"
 					:server-project-selected="serverProjectSelected"
 					:server-playing="serverPlaying"
 					:server-install-loading="!!(data && installingServerProjects.includes(data.id))"
-					:stop-label="formatMessage(commonMessages.stopButton)"
-					:play-label="formatMessage(commonMessages.playButton)"
-					:installing-label="formatMessage(commonMessages.installingLabel)"
-					:add-server-to-instance-label="formatMessage(commonMessages.addServerToInstanceButton)"
 					@contextmenu="handleRightClick"
 					@category="(category) => router.push(`${projectSearchUrl}?f=categories:${category}`)"
 					@install="() => install(null)"
@@ -229,10 +224,6 @@ const messages = defineMessages({
 		id: 'app.project.install-context.install-content-to-instance',
 		defaultMessage: 'Install content to instance',
 	},
-	alreadyInstalled: {
-		id: 'app.project.install-button.already-installed',
-		defaultMessage: 'This project is already installed',
-	},
 })
 
 const { installingServerProjects, playServerProject, showAddServerToInstanceModal } =
@@ -392,18 +383,6 @@ const installButtonInstalled = computed(() =>
 const installButtonDisabled = computed(
 	() => installButtonInstalled.value || installButtonLoading.value,
 )
-const installButtonLabel = computed(() => {
-	if (installButtonInstalled.value) return formatMessage(commonMessages.installedLabel)
-	if (installButtonValidating.value) return formatMessage(commonMessages.validatingLabel)
-	if (installButtonLoading.value) return formatMessage(commonMessages.installingLabel)
-	if (serverProjectSelected.value) return formatMessage(commonMessages.selectedLabel)
-	return formatMessage(commonMessages.installButton)
-})
-const installButtonTooltip = computed(() => {
-	if (installButtonInstalled.value) return formatMessage(messages.alreadyInstalled)
-	return null
-})
-
 const projectSearchUrl = computed(
 	() => `/browse/${isServerProject.value ? 'server' : data.value?.project_type}`,
 )
diff --git a/apps/frontend/src/components/ui/OrganizationPageHeader.vue b/apps/frontend/src/components/ui/OrganizationPageHeader.vue
index 34de361816..c5f74542df 100644
--- a/apps/frontend/src/components/ui/OrganizationPageHeader.vue
+++ b/apps/frontend/src/components/ui/OrganizationPageHeader.vue
@@ -1,16 +1,17 @@
 <template>
 	<PageHeader :title="organization.name" :summary="organization.description">
 		<template #leading>
-			<PageHeaderObjectAvatarLeading
+			<Avatar
 				:src="organization.icon_url"
 				:alt="organization.name"
+				:tint-by="organization.id"
 				size="96px"
 			/>
 		</template>
 
 		<template #badges>
 			<PageHeaderBadgeItem :icon="OrganizationIcon" class="px-0 text-primary">
-				{{ labels.organization }}
+				{{ formatMessage(messages.organizationLabel) }}
 			</PageHeaderBadgeItem>
 		</template>
 
@@ -19,18 +20,18 @@
 				<PageHeaderMetadataNumberItem
 					:icon="UsersIcon"
 					:value="membersCount"
-					:label="labels.members"
+					:label="formatMessage(messages.membersLabel)"
 				/>
 				<PageHeaderMetadataNumberItem
 					:icon="BoxIcon"
 					:value="projectsCount"
-					:label="labels.projects"
+					:label="formatMessage(messages.projectsLabel)"
 				/>
 				<PageHeaderMetadataNumberItem
 					:icon="DownloadIcon"
 					:value="downloads"
-					:label="labels.downloads"
-					:tooltip="downloadsTooltip"
+					:label="formatMessage(messages.downloadsLabel)"
+					:tooltip="formatNumber(downloads)"
 				/>
 			</PageHeaderMetadata>
 		</template>
@@ -40,14 +41,14 @@
 				<ButtonStyled v-if="canManage" size="large">
 					<nuxt-link :to="`/organization/${organization.slug}/settings`">
 						<SettingsIcon />
-						{{ labels.manage }}
+						{{ formatMessage(messages.manage) }}
 					</nuxt-link>
 				</ButtonStyled>
 				<ButtonStyled circular size="large" type="transparent">
 					<TeleportOverflowMenu
 						:options="moreActions"
-						:tooltip="labels.moreOptions"
-						:aria-label="labels.moreOptions"
+						:tooltip="formatMessage(commonMessages.moreOptionsButton)"
+						:aria-label="formatMessage(commonMessages.moreOptionsButton)"
 					>
 						<MoreVerticalIcon />
 					</TeleportOverflowMenu>
@@ -68,18 +69,49 @@ import {
 	UsersIcon,
 } from '@modrinth/assets'
 import {
+	Avatar,
 	ButtonStyled,
+	commonMessages,
+	defineMessages,
 	PageHeader,
 	PageHeaderActions,
 	PageHeaderBadgeItem,
 	PageHeaderMetadata,
 	PageHeaderMetadataNumberItem,
-	PageHeaderObjectAvatarLeading,
 	TeleportOverflowMenu,
 	type TeleportOverflowMenuItem,
+	useFormatNumber,
+	useVIntl,
 } from '@modrinth/ui'
 import { computed } from 'vue'
 
+const messages = defineMessages({
+	downloadsLabel: {
+		id: 'organization.label.downloads',
+		defaultMessage: 'downloads',
+	},
+	manage: {
+		id: 'organization.button.manage',
+		defaultMessage: 'Manage',
+	},
+	manageProjects: {
+		id: 'organization.button.manage-projects',
+		defaultMessage: 'Manage projects',
+	},
+	membersLabel: {
+		id: 'organization.label.members',
+		defaultMessage: 'members',
+	},
+	organizationLabel: {
+		id: 'organization.label.organization',
+		defaultMessage: 'Organization',
+	},
+	projectsLabel: {
+		id: 'organization.label.projects',
+		defaultMessage: 'projects',
+	},
+})
+
 const props = defineProps<{
 	organization: {
 		id: string
@@ -91,19 +123,7 @@ const props = defineProps<{
 	membersCount: number
 	projectsCount: number
 	downloads: number
-	downloadsTooltip?: string
 	canManage?: boolean
-	labels: {
-		organization: string
-		members: string
-		projects: string
-		downloads: string
-		manage: string
-		manageProjects: string
-		moreOptions: string
-		copyId: string
-		copyPermalink: string
-	}
 }>()
 
 const emit = defineEmits<{
@@ -112,10 +132,13 @@ const emit = defineEmits<{
 	copyPermalink: []
 }>()
 
+const { formatMessage } = useVIntl()
+const formatNumber = useFormatNumber()
+
 const moreActions = computed<TeleportOverflowMenuItem[]>(() => [
 	{
 		id: 'manage-projects',
-		label: props.labels.manageProjects,
+		label: formatMessage(messages.manageProjects),
 		icon: BoxIcon,
 		action: () => emit('manageProjects'),
 		shown: props.canManage,
@@ -126,13 +149,13 @@ const moreActions = computed<TeleportOverflowMenuItem[]>(() => [
 	},
 	{
 		id: 'copy-id',
-		label: props.labels.copyId,
+		label: formatMessage(commonMessages.copyIdButton),
 		icon: ClipboardCopyIcon,
 		action: () => emit('copyId'),
 	},
 	{
 		id: 'copy-permalink',
-		label: props.labels.copyPermalink,
+		label: formatMessage(commonMessages.copyPermalinkButton),
 		icon: ClipboardCopyIcon,
 		action: () => emit('copyPermalink'),
 	},
diff --git a/apps/frontend/src/components/ui/ProjectPageHeader.vue b/apps/frontend/src/components/ui/ProjectPageHeader.vue
index 85671b26d0..ec7bc74c6d 100644
--- a/apps/frontend/src/components/ui/ProjectPageHeader.vue
+++ b/apps/frontend/src/components/ui/ProjectPageHeader.vue
@@ -1,7 +1,7 @@
 <template>
 	<PageHeader :title="project.title" :summary="project.description">
 		<template #leading>
-			<PageHeaderObjectAvatarLeading :src="project.icon_url" :alt="project.title" size="96px" />
+			<Avatar :src="project.icon_url" :alt="project.title" :tint-by="project.id" size="96px" />
 		</template>
 
 		<template v-if="showStatusBadge" #badges>
@@ -22,15 +22,15 @@
 					<PageHeaderMetadataNumberItem
 						:icon="DownloadIcon"
 						:value="project.downloads"
-						:label="downloadsLabel"
-						:tooltip="downloadsTooltip"
+						:label="formatMessage(messages.downloadsStat, { count: project.downloads })"
+						:tooltip="formatNumber(project.downloads)"
 						class="cursor-help"
 					/>
 					<PageHeaderMetadataNumberItem
 						:icon="HeartIcon"
 						:value="project.followers"
-						:label="followersLabel"
-						:tooltip="followersTooltip"
+						:label="formatMessage(messages.followersStat, { count: project.followers })"
+						:tooltip="formatNumber(project.followers)"
 						class="cursor-help"
 					/>
 				</template>
@@ -51,20 +51,36 @@
 				<ButtonStyled v-if="showEditProject" color="brand" size="large">
 					<nuxt-link :to="`${projectPath}/settings`">
 						<SettingsIcon />
-						{{ editProjectLabel }}
+						{{ formatMessage(messages.editProject) }}
 					</nuxt-link>
 				</ButtonStyled>
 
 				<ButtonStyled :color="primaryColor" :circular="primaryLabelHidden" size="large">
 					<button
-						v-tooltip="primaryTooltip"
+						v-tooltip="
+							primaryLabelHidden
+								? isServerProject
+									? formatMessage(commonMessages.playButton)
+									: formatMessage(commonMessages.downloadButton)
+								: undefined
+						"
 						type="button"
-						:aria-label="primaryLabel"
+						:aria-label="
+							isServerProject
+								? formatMessage(commonMessages.playButton)
+								: formatMessage(commonMessages.downloadButton)
+						"
 						@click="emit('primary', $event)"
 					>
 						<PlayIcon v-if="isServerProject" />
 						<DownloadIcon v-else />
-						<span v-if="!primaryLabelHidden">{{ primaryLabel }}</span>
+						<span v-if="!primaryLabelHidden">
+							{{
+								isServerProject
+									? formatMessage(commonMessages.playButton)
+									: formatMessage(commonMessages.downloadButton)
+							}}
+						</span>
 					</button>
 				</ButtonStyled>
 
@@ -79,9 +95,9 @@
 				>
 					<ButtonStyled circular size="large">
 						<nuxt-link
-							v-tooltip="createServerTooltip"
+							v-tooltip="formatMessage(messages.createServerTooltip)"
 							:to="createServerTo"
-							:aria-label="createServerLabel"
+							:aria-label="formatMessage(messages.serversPromoTitle)"
 							@click="emit('createServer')"
 						>
 							<ServerPlusIcon />
@@ -91,36 +107,43 @@
 						<div class="grid max-w-[18rem] gap-2">
 							<div class="flex items-center justify-between gap-4">
 								<div class="flex items-center gap-2">
-									<h3 class="m-0 text-base font-bold text-contrast">{{ createServerPromptTitle }}</h3>
-									<span
-										v-if="createServerPromptBadge"
-										class="rounded-full bg-brand-highlight px-2 py-0.5 text-xs font-bold text-brand"
-									>
-										{{ createServerPromptBadge }}
+									<h3 class="m-0 text-base font-bold text-contrast">
+										{{ formatMessage(messages.serversPromoTitle) }}
+									</h3>
+									<span class="rounded-full bg-brand-highlight px-2 py-0.5 text-xs font-bold text-brand">
+										{{ formatMessage(commonMessages.newBadge) }}
 									</span>
 								</div>
 								<ButtonStyled size="small" circular>
-									<button v-tooltip="createServerDismissLabel" @click="emit('dismissCreateServer')">
+									<button
+										v-tooltip="formatMessage(messages.dontShowAgain)"
+										@click="emit('dismissCreateServer')"
+									>
 										<XIcon aria-hidden="true" />
 									</button>
 								</ButtonStyled>
 							</div>
 							<p class="m-0 text-sm font-medium leading-tight text-secondary">
-								{{ createServerPromptDescription }}
+								{{ formatMessage(messages.serversPromoDescription) }}
+							</p>
+							<p class="m-0 text-sm font-semibold text-contrast">
+								<IntlFormatted
+									:message-id="messages.serversPromoPricing"
+									:values="{ price: formatPrice(500, 'USD', true) }"
+								>
+									<template #small="{ children }">
+										<small><component :is="() => children" /></small>
+									</template>
+								</IntlFormatted>
 							</p>
-							<p
-								v-if="createServerPromptFooter"
-								class="m-0 text-sm font-semibold text-contrast"
-								v-html="createServerPromptFooter"
-							/>
 						</div>
 					</template>
 				</Tooltip>
 				<ButtonStyled v-else-if="showCreateServerAction" circular size="large">
 					<nuxt-link
-						v-tooltip="createServerTooltip"
+						v-tooltip="formatMessage(messages.createServerTooltip)"
 						:to="createServerTo"
-						:aria-label="createServerLabel"
+						:aria-label="formatMessage(messages.serversPromoTitle)"
 						@click="emit('createServer')"
 					>
 						<ServerPlusIcon />
@@ -130,18 +153,34 @@
 				<ButtonStyled circular size="large">
 					<button
 						v-if="authUser"
-						v-tooltip="followTooltip"
+						v-tooltip="
+							following
+								? formatMessage(commonMessages.unfollowButton)
+								: formatMessage(commonMessages.followButton)
+						"
 						type="button"
-						:aria-label="followLabel"
+						:aria-label="
+							following
+								? formatMessage(commonMessages.unfollowButton)
+								: formatMessage(commonMessages.followButton)
+						"
 						@click="emit('follow')"
 					>
 						<HeartIcon :fill="following ? 'currentColor' : 'none'" />
 					</button>
 					<nuxt-link
 						v-else
-						v-tooltip="followTooltip"
+						v-tooltip="
+							following
+								? formatMessage(commonMessages.unfollowButton)
+								: formatMessage(commonMessages.followButton)
+						"
 						:to="signInRoute"
-						:aria-label="followLabel"
+						:aria-label="
+							following
+								? formatMessage(commonMessages.unfollowButton)
+								: formatMessage(commonMessages.followButton)
+						"
 					>
 						<HeartIcon :fill="following ? 'currentColor' : 'none'" />
 					</nuxt-link>
@@ -154,8 +193,8 @@
 					:collections="collections"
 					:saved="saved"
 					:base-id="baseId"
-					:no-collections-label="noCollectionsLabel"
-					:create-new-collection-label="createNewCollectionLabel"
+					:no-collections-label="formatMessage(messages.noCollectionsFound)"
+					:create-new-collection-label="formatMessage(messages.createNewCollection)"
 					:collect-project="collectProject"
 					:create-collection="createCollection"
 				/>
@@ -163,8 +202,8 @@
 				<ButtonStyled circular size="large" type="transparent">
 					<TeleportOverflowMenu
 						:options="moreActions"
-						:tooltip="moreOptionsLabel"
-						:aria-label="moreOptionsLabel"
+						:tooltip="formatMessage(commonMessages.moreOptionsButton)"
+						:aria-label="formatMessage(commonMessages.moreOptionsButton)"
 					>
 						<MoreVerticalIcon />
 					</TeleportOverflowMenu>
@@ -174,7 +213,8 @@
 	</PageHeader>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
 import {
 	ChartIcon,
 	ClipboardCopyIcon,
@@ -190,197 +230,175 @@ import {
 	XIcon,
 } from '@modrinth/assets'
 import {
+	Avatar,
 	ButtonStyled,
 	commonMessages,
+	defineMessages,
 	FormattedTag,
+	IntlFormatted,
 	PageHeader,
 	PageHeaderActions,
 	PageHeaderMetadata,
 	PageHeaderMetadataNumberItem,
 	PageHeaderMetadataTagsItem,
-	PageHeaderObjectAvatarLeading,
 	ProjectStatusBadge,
 	ServerDetails,
 	TagItem,
 	TeleportOverflowMenu,
+	type TeleportOverflowMenuItem,
+	useFormatNumber,
+	useFormatPrice,
 	useVIntl,
 } from '@modrinth/ui'
-import { capitalizeString } from '@modrinth/utils'
 import { Tooltip } from 'floating-vue'
 import { computed } from 'vue'
 
 import ProjectCollectionSaveButton from '~/components/ui/ProjectCollectionSaveButton.vue'
 
-const props = defineProps({
-	project: {
-		type: Object,
-		required: true,
-	},
-	projectV3: {
-		type: Object,
-		default: null,
-	},
-	authUser: {
-		type: Object,
-		default: null,
-	},
-	signInRoute: {
-		type: [Object, String],
-		required: true,
-	},
-	collections: {
-		type: Array,
-		default: () => [],
-	},
-	baseId: {
-		type: String,
-		required: true,
-	},
-	noCollectionsLabel: {
-		type: String,
-		required: true,
-	},
-	createNewCollectionLabel: {
-		type: String,
-		required: true,
-	},
-	collectProject: {
-		type: Function,
-		required: true,
-	},
-	createCollection: {
-		type: Function,
-		required: true,
-	},
-	isServerProject: {
-		type: Boolean,
-		default: false,
-	},
-	showStatusBadge: {
-		type: Boolean,
-		default: false,
-	},
-	showEditProject: {
-		type: Boolean,
-		default: false,
-	},
-	primaryMuted: {
-		type: Boolean,
-		default: false,
-	},
-	primaryLabelHidden: {
-		type: Boolean,
-		default: false,
+type HeaderProject = Pick<
+	Labrinth.Projects.v2.Project,
+	| 'id'
+	| 'slug'
+	| 'project_type'
+	| 'title'
+	| 'description'
+	| 'status'
+	| 'downloads'
+	| 'followers'
+	| 'categories'
+> & {
+	icon_url?: string | null
+}
+
+type HeaderProjectV3 = Pick<
+	Labrinth.Projects.v3.Project,
+	'status' | 'minecraft_java_server'
+>
+
+type HeaderCollection = {
+	projects: string[]
+	[key: string]: unknown
+}
+
+type SignInRoute = string | Record<string, unknown>
+
+const props = withDefaults(defineProps<{
+	project: HeaderProject
+	projectV3?: HeaderProjectV3 | null
+	authUser?: Labrinth.Users.v3.User | null
+	signInRoute: SignInRoute
+	collections?: HeaderCollection[]
+	baseId: string
+	collectProject: (...args: unknown[]) => unknown
+	createCollection: (...args: unknown[]) => unknown
+	isServerProject?: boolean
+	showStatusBadge?: boolean
+	showEditProject?: boolean
+	primaryMuted?: boolean
+	primaryLabelHidden?: boolean
+	canCreateServer?: boolean
+	showQuickServerButton?: boolean
+	showCreateServerPrompt?: boolean
+	following?: boolean
+	saved?: boolean
+	isMember?: boolean
+	isStaff?: boolean
+	showModerationChecklist?: boolean
+}>(), {
+	projectV3: null,
+	authUser: null,
+	collections: () => [],
+	isServerProject: false,
+	showStatusBadge: false,
+	showEditProject: false,
+	primaryMuted: false,
+	primaryLabelHidden: false,
+	canCreateServer: false,
+	showQuickServerButton: false,
+	showCreateServerPrompt: false,
+	following: false,
+	saved: false,
+	isMember: false,
+	isStaff: false,
+	showModerationChecklist: false,
+})
+
+const emit = defineEmits<{
+	category: [category: string]
+	primary: [event: MouseEvent]
+	createServer: []
+	dismissCreateServer: []
+	follow: []
+	analytics: []
+	moderationChecklist: []
+	techReview: []
+	report: []
+	copyId: []
+	copyPermalink: []
+}>()
+
+const messages = defineMessages({
+	createServerTooltip: {
+		id: 'project.actions.create-server-tooltip',
+		defaultMessage: 'Create a server',
 	},
-	canCreateServer: {
-		type: Boolean,
-		default: false,
+	createNewCollection: {
+		id: 'project.collections.create-new',
+		defaultMessage: 'Create new collection',
 	},
-	showQuickServerButton: {
-		type: Boolean,
-		default: false,
+	dontShowAgain: {
+		id: 'project.actions.dont-show-again',
+		defaultMessage: "Don't show again",
 	},
-	showCreateServerPrompt: {
-		type: Boolean,
-		default: false,
+	downloadsStat: {
+		id: 'project.stats.downloads-label',
+		defaultMessage: '{count, plural, one {download} other {downloads}}',
 	},
-	following: {
-		type: Boolean,
-		default: false,
+	editProject: {
+		id: 'project.actions.edit-project',
+		defaultMessage: 'Edit project',
 	},
-	saved: {
-		type: Boolean,
-		default: false,
+	followersStat: {
+		id: 'project.stats.followers-label',
+		defaultMessage: '{count, plural, one {follower} other {followers}}',
 	},
-	isMember: {
-		type: Boolean,
-		default: false,
+	noCollectionsFound: {
+		id: 'project.collections.none-found',
+		defaultMessage: 'No collections found.',
 	},
-	isStaff: {
-		type: Boolean,
-		default: false,
+	reviewProject: {
+		id: 'project.actions.review-project',
+		defaultMessage: 'Review project',
 	},
-	showModerationChecklist: {
-		type: Boolean,
-		default: false,
+	serversPromoDescription: {
+		id: 'project.actions.servers-promo.description',
+		defaultMessage: 'Modrinth Hosting is the easiest way to play with your friends without hassle!',
 	},
-	createServerPromptFooter: {
-		type: String,
-		default: '',
+	serversPromoPricing: {
+		id: 'project.actions.servers-promo.pricing',
+		defaultMessage: 'Starting at {price}<small> / month</small>',
 	},
-	labels: {
-		type: Object,
-		required: true,
+	serversPromoTitle: {
+		id: 'project.actions.servers-promo.title',
+		defaultMessage: 'Create a server',
 	},
 })
 
-const emit = defineEmits([
-	'category',
-	'primary',
-	'createServer',
-	'dismissCreateServer',
-	'follow',
-	'analytics',
-	'moderationChecklist',
-	'techReview',
-	'report',
-	'copyId',
-	'copyPermalink',
-])
-
 const { formatMessage } = useVIntl()
+const formatNumber = useFormatNumber()
+const formatPrice = useFormatPrice()
 
-const downloadsLabel = computed(() =>
-	formatMessage(props.labels.downloadsStat, {
-		count: props.project.downloads,
-	}),
-)
-const followersLabel = computed(() =>
-	formatMessage(props.labels.followersStat, {
-		count: props.project.followers,
-	}),
-)
-const downloadsTooltip = computed(() =>
-	capitalizeString(
-		formatMessage(commonMessages.projectDownloads, {
-			count: props.project.downloads,
-		}),
-	),
-)
-const followersTooltip = computed(() =>
-	capitalizeString(
-		formatMessage(commonMessages.projectFollowers, {
-			count: props.project.followers,
-		}),
-	),
-)
 const projectPath = computed(
 	() => `/${props.project.project_type}/${props.project.slug ? props.project.slug : props.project.id}`,
 )
-const primaryLabel = computed(() =>
-	props.isServerProject ? props.labels.playButton : props.labels.downloadButton,
-)
 const primaryColor = computed(() => (props.primaryMuted ? 'standard' : 'brand'))
-const primaryTooltip = computed(() => (props.primaryLabelHidden ? primaryLabel.value : undefined))
 const showCreateServerAction = computed(() => props.canCreateServer && props.showQuickServerButton)
 const createServerTo = computed(() => `/hosting?project=${props.project.id}#plan`)
-const createServerLabel = computed(() => props.labels.createServer)
-const createServerTooltip = computed(() => props.labels.createServerTooltip)
-const createServerPromptTitle = computed(() => props.labels.serversPromoTitle)
-const createServerPromptDescription = computed(() => props.labels.serversPromoDescription)
-const createServerPromptBadge = computed(() => props.labels.newBadge)
-const createServerDismissLabel = computed(() => props.labels.dontShowAgain)
-const followLabel = computed(() =>
-	props.following ? props.labels.unfollowButton : props.labels.followButton,
-)
-const followTooltip = computed(() => followLabel.value)
-const editProjectLabel = computed(() => props.labels.editProject)
-const moreOptionsLabel = computed(() => props.labels.moreOptions)
 
-const moreActions = computed(() => [
+const moreActions = computed<TeleportOverflowMenuItem[]>(() => [
 	{
 		id: 'analytics',
-		label: props.labels.analyticsButton,
+		label: formatMessage(commonMessages.analyticsButton),
 		icon: ChartIcon,
 		link: `${projectPath.value}/settings/analytics`,
 		shown: !!props.authUser && props.showEditProject,
@@ -391,7 +409,7 @@ const moreActions = computed(() => [
 	},
 	{
 		id: 'moderation-checklist',
-		label: props.labels.reviewProject,
+		label: formatMessage(messages.reviewProject),
 		icon: ScaleIcon,
 		action: () => emit('moderationChecklist'),
 		color: 'orange',
@@ -403,7 +421,7 @@ const moreActions = computed(() => [
 	},
 	{
 		id: 'tech-review',
-		label: props.labels.techReview,
+		label: 'Tech review',
 		icon: ScanEyeIcon,
 		link: `/moderation/technical-review/${props.project.id}`,
 		color: 'orange',
@@ -415,7 +433,7 @@ const moreActions = computed(() => [
 	},
 	{
 		id: 'report',
-		label: props.labels.reportButton,
+		label: formatMessage(commonMessages.reportButton),
 		icon: ReportIcon,
 		action: () => emit('report'),
 		color: 'red',
@@ -423,13 +441,13 @@ const moreActions = computed(() => [
 	},
 	{
 		id: 'copy-id',
-		label: props.labels.copyIdButton,
+		label: formatMessage(commonMessages.copyIdButton),
 		icon: ClipboardCopyIcon,
 		action: () => emit('copyId'),
 	},
 	{
 		id: 'copy-permalink',
-		label: props.labels.copyPermalinkButton,
+		label: formatMessage(commonMessages.copyPermalinkButton),
 		icon: ClipboardCopyIcon,
 		action: () => emit('copyPermalink'),
 	},
diff --git a/apps/frontend/src/components/ui/UserPageHeader.vue b/apps/frontend/src/components/ui/UserPageHeader.vue
index 7d5cd0a86d..dfa94c475d 100644
--- a/apps/frontend/src/components/ui/UserPageHeader.vue
+++ b/apps/frontend/src/components/ui/UserPageHeader.vue
@@ -1,10 +1,12 @@
 <template>
 	<PageHeader :title="user.username" :summary="summary">
 		<template #leading>
-			<PageHeaderUserAvatarLeading
+			<Avatar
 				:src="user.avatar_url"
-				:username="user.username"
+				:alt="user.username"
 				:size="isModrinthUser ? '64px' : '96px'"
+				:tint-by="user.username"
+				circle
 			/>
 		</template>
 
@@ -13,17 +15,17 @@
 				v-if="isOfficialAccount"
 				:icon="BadgeCheckIcon"
 				:icon-props="{ fill: 'var(--color-brand-highlight)' }"
-				:tooltip="labels.officialAccount"
+				:tooltip="formatMessage(messages.officialAccount)"
 				class="border-brand-highlight bg-brand-highlight text-brand"
 			>
-				{{ labels.officialAccount }}
+				{{ formatMessage(messages.officialAccount) }}
 			</PageHeaderBadgeItem>
 			<PageHeaderBadgeItem
 				v-if="showAffiliateBadge"
 				:icon="AffiliateIcon"
 				class="border-brand-highlight bg-brand-highlight text-brand"
 			>
-				{{ labels.affiliate }}
+				{{ formatMessage(messages.affiliateLabel) }}
 			</PageHeaderBadgeItem>
 		</template>
 
@@ -36,18 +38,18 @@
 				<PageHeaderMetadataNumberItem
 					:icon="BoxIcon"
 					:value="projectsCount"
-					:label="projectCountLabel"
+					:label="formatMessage(messages.profileProjectCountLabel, { count: projectsCount })"
 				/>
 				<PageHeaderMetadataNumberItem
 					:icon="DownloadIcon"
 					:value="downloads"
-					:label="downloadsLabel"
+					:label="formatMessage(messages.profileDownloadCountLabel, { count: downloads })"
 					:tooltip="downloadsTooltip"
 				/>
 				<PageHeaderMetadataTimeItem
 					:icon="CalendarIcon"
 					:date="user.created"
-					:label="labels.joined"
+					:label="formatMessage(messages.profileJoinedLabel)"
 					:tooltip="joinedTooltip"
 				/>
 			</PageHeaderMetadata>
@@ -58,14 +60,14 @@
 				<ButtonStyled v-if="isSelf" size="large">
 					<nuxt-link to="/settings/profile">
 						<EditIcon />
-						{{ labels.edit }}
+						{{ formatMessage(commonMessages.editButton) }}
 					</nuxt-link>
 				</ButtonStyled>
 				<ButtonStyled circular size="large" type="transparent">
 					<TeleportOverflowMenu
 						:options="moreActions"
-						:tooltip="labels.moreOptions"
-						:aria-label="labels.moreOptions"
+						:tooltip="formatMessage(commonMessages.moreOptionsButton)"
+						:aria-label="formatMessage(commonMessages.moreOptionsButton)"
 					>
 						<MoreVerticalIcon />
 					</TeleportOverflowMenu>
@@ -75,7 +77,8 @@
 	</PageHeader>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
 import {
 	AffiliateIcon,
 	BadgeCheckIcon,
@@ -91,105 +94,131 @@ import {
 	ReportIcon,
 } from '@modrinth/assets'
 import {
+	Avatar,
 	ButtonStyled,
+	commonMessages,
+	defineMessages,
 	PageHeader,
 	PageHeaderActions,
 	PageHeaderBadgeItem,
 	PageHeaderMetadata,
 	PageHeaderMetadataNumberItem,
 	PageHeaderMetadataTimeItem,
-	PageHeaderUserAvatarLeading,
 	TeleportOverflowMenu,
+	type TeleportOverflowMenuItem,
+	useFormatDateTime,
+	useFormatNumber,
+	useVIntl,
 } from '@modrinth/ui'
 import { computed } from 'vue'
 
-const props = defineProps({
-	user: {
-		type: Object,
-		required: true,
+const messages = defineMessages({
+	affiliateLabel: {
+		id: 'profile.label.affiliate',
+		defaultMessage: 'Affiliate',
 	},
-	summary: {
-		type: String,
-		default: null,
+	analyticsButton: {
+		id: 'profile.button.analytics',
+		defaultMessage: 'View user analytics',
 	},
-	authUser: {
-		type: Object,
-		default: null,
+	billingButton: {
+		id: 'profile.button.billing',
+		defaultMessage: 'Manage user billing',
 	},
-	isModrinthUser: {
-		type: Boolean,
-		default: false,
+	editRoleButton: {
+		id: 'profile.button.edit-role',
+		defaultMessage: 'Edit role',
 	},
-	isOfficialAccount: {
-		type: Boolean,
-		default: false,
+	infoButton: {
+		id: 'profile.button.info',
+		defaultMessage: 'View user details',
 	},
-	showAffiliateBadge: {
-		type: Boolean,
-		default: false,
+	officialAccount: {
+		id: 'profile.official-account',
+		defaultMessage: 'Official Modrinth account',
 	},
-	isAffiliate: {
-		type: Boolean,
-		default: false,
+	profileJoinedLabel: {
+		id: 'profile.label.joined',
+		defaultMessage: 'Joined',
 	},
-	isSelf: {
-		type: Boolean,
-		default: false,
+	profileProjectCountLabel: {
+		id: 'profile.label.project-count',
+		defaultMessage: '{count, plural, one {project} other {projects}}',
 	},
-	isAdmin: {
-		type: Boolean,
-		default: false,
+	profileDownloadCountLabel: {
+		id: 'profile.label.download-count',
+		defaultMessage: '{count, plural, one {download} other {downloads}}',
 	},
-	isStaff: {
-		type: Boolean,
-		default: false,
+	profileManageProjectsButton: {
+		id: 'profile.button.manage-projects',
+		defaultMessage: 'Manage projects',
 	},
-	projectsCount: {
-		type: Number,
-		default: 0,
+	removeAffiliateButton: {
+		id: 'profile.button.remove-affiliate',
+		defaultMessage: 'Remove as affiliate',
 	},
-	downloads: {
-		type: Number,
-		default: 0,
-	},
-	projectCountLabel: {
-		type: String,
-		required: true,
-	},
-	downloadsLabel: {
-		type: String,
-		required: true,
-	},
-	downloadsTooltip: {
-		type: String,
-		default: undefined,
-	},
-	joinedTooltip: {
-		type: String,
-		default: undefined,
-	},
-	labels: {
-		type: Object,
-		required: true,
+	setAffiliateButton: {
+		id: 'profile.button.set-affiliate',
+		defaultMessage: 'Set as affiliate',
 	},
 })
 
-const emit = defineEmits([
-	'manageProjects',
-	'report',
-	'copyId',
-	'copyPermalink',
-	'openBilling',
-	'toggleAffiliate',
-	'openInfo',
-	'openAnalytics',
-	'editRole',
-])
+const props = withDefaults(
+	defineProps<{
+		user: Labrinth.Users.v3.User
+		summary?: string | null
+		authUser?: Labrinth.Users.v3.User | null
+		isModrinthUser?: boolean
+		isOfficialAccount?: boolean
+		showAffiliateBadge?: boolean
+		isAffiliate?: boolean
+		isSelf?: boolean
+		isAdmin?: boolean
+		isStaff?: boolean
+		projectsCount?: number
+		downloads?: number
+	}>(),
+	{
+		summary: null,
+		authUser: null,
+		isModrinthUser: false,
+		isOfficialAccount: false,
+		showAffiliateBadge: false,
+		isAffiliate: false,
+		isSelf: false,
+		isAdmin: false,
+		isStaff: false,
+		projectsCount: 0,
+		downloads: 0,
+	},
+)
+
+const emit = defineEmits<{
+	manageProjects: []
+	report: []
+	copyId: []
+	copyPermalink: []
+	openBilling: []
+	toggleAffiliate: []
+	openInfo: []
+	openAnalytics: []
+	editRole: []
+}>()
+
+const { formatMessage } = useVIntl()
+
+const formatNumber = useFormatNumber()
+const formatDateTime = useFormatDateTime({
+	timeStyle: 'short',
+	dateStyle: 'long',
+})
+const downloadsTooltip = computed(() => formatNumber(props.downloads))
+const joinedTooltip = computed(() => formatDateTime(props.user.created))
 
-const moreActions = computed(() => [
+const moreActions = computed<TeleportOverflowMenuItem[]>(() => [
 	{
 		id: 'manage-projects',
-		label: props.labels.manageProjects,
+		label: formatMessage(messages.profileManageProjectsButton),
 		icon: BoxIcon,
 		action: () => emit('manageProjects'),
 		shown: props.isSelf,
@@ -200,7 +229,7 @@ const moreActions = computed(() => [
 	},
 	{
 		id: 'report',
-		label: props.labels.report,
+		label: formatMessage(commonMessages.reportButton),
 		icon: ReportIcon,
 		action: () => emit('report'),
 		color: 'red',
@@ -208,13 +237,13 @@ const moreActions = computed(() => [
 	},
 	{
 		id: 'copy-id',
-		label: props.labels.copyId,
+		label: formatMessage(commonMessages.copyIdButton),
 		icon: ClipboardCopyIcon,
 		action: () => emit('copyId'),
 	},
 	{
 		id: 'copy-permalink',
-		label: props.labels.copyPermalink,
+		label: formatMessage(commonMessages.copyPermalinkButton),
 		icon: ClipboardCopyIcon,
 		action: () => emit('copyPermalink'),
 	},
@@ -224,14 +253,16 @@ const moreActions = computed(() => [
 	},
 	{
 		id: 'open-billing',
-		label: props.labels.billing,
+		label: formatMessage(messages.billingButton),
 		icon: CurrencyIcon,
 		action: () => emit('openBilling'),
 		shown: props.isStaff,
 	},
 	{
 		id: 'toggle-affiliate',
-		label: props.isAffiliate ? props.labels.removeAffiliate : props.labels.setAffiliate,
+		label: props.isAffiliate
+			? formatMessage(messages.removeAffiliateButton)
+			: formatMessage(messages.setAffiliateButton),
 		icon: AffiliateIcon,
 		action: () => emit('toggleAffiliate'),
 		shown: props.isAdmin,
@@ -240,21 +271,21 @@ const moreActions = computed(() => [
 	},
 	{
 		id: 'open-info',
-		label: props.labels.info,
+		label: formatMessage(messages.infoButton),
 		icon: InfoIcon,
 		action: () => emit('openInfo'),
 		shown: props.isStaff,
 	},
 	{
 		id: 'open-analytics',
-		label: props.labels.analytics,
+		label: formatMessage(messages.analyticsButton),
 		icon: ChartIcon,
 		action: () => emit('openAnalytics'),
 		shown: props.isAdmin,
 	},
 	{
 		id: 'edit-role',
-		label: props.labels.editRole,
+		label: formatMessage(messages.editRoleButton),
 		icon: EditIcon,
 		action: () => emit('editRole'),
 		shown: props.isAdmin,
diff --git a/apps/frontend/src/pages/[type]/[project].vue b/apps/frontend/src/pages/[type]/[project].vue
index bbefcb572d..53d4d14c65 100644
--- a/apps/frontend/src/pages/[type]/[project].vue
+++ b/apps/frontend/src/pages/[type]/[project].vue
@@ -136,8 +136,6 @@
 						:sign-in-route="signInRouteObj"
 						:collections="collections"
 						:base-id="baseId"
-						:no-collections-label="formatMessage(messages.noCollectionsFound)"
-						:create-new-collection-label="formatMessage(messages.createNewCollection)"
 						:collect-project="onUserCollectProject"
 						:create-collection="(event) => modalCollection?.show(event)"
 						:is-server-project="isServerProject"
@@ -148,13 +146,11 @@
 						:can-create-server="canCreateServerFrom"
 						:show-quick-server-button="flags.showProjectPageQuickServerButton"
 						:show-create-server-prompt="flags.showProjectPageCreateServersTooltip"
-						:create-server-prompt-footer="projectHeaderCreateServerPromptFooter"
 						:following="following"
 						:saved="collections.some((x) => x.projects.includes(project.id))"
 						:is-member="isMember"
 						:is-staff="!!(auth.user && tags.staffRoles.includes(auth.user.role))"
 						:show-moderation-checklist="showModerationChecklist"
-						:labels="projectHeaderLabels"
 						@category="(category) => router.push(`${projectSearchUrl}?f=categories:${category}`)"
 						@primary="handleProjectHeaderPrimary"
 						@create-server="dismissProjectHeaderCreateServerPrompt"
@@ -432,7 +428,6 @@ import {
 	provideProjectPageContext,
 	useDebugLogger,
 	useFormatDateTime,
-	useFormatPrice,
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
@@ -504,7 +499,6 @@ const flags = useFeatureFlags()
 const cosmetics = useCosmetics()
 
 const { formatMessage } = useVIntl()
-const formatPrice = useFormatPrice()
 const formatDateTime = useFormatDateTime({
 	timeStyle: 'short',
 	dateStyle: 'long',
@@ -577,30 +571,14 @@ const messages = defineMessages({
 		id: 'project.navigation.changelog',
 		defaultMessage: 'Changelog',
 	},
-	createNewCollection: {
-		id: 'project.collections.create-new',
-		defaultMessage: 'Create new collection',
-	},
 	createServer: {
 		id: 'project.actions.create-server',
 		defaultMessage: 'Create a server',
 	},
-	createServerTooltip: {
-		id: 'project.actions.create-server-tooltip',
-		defaultMessage: 'Create a server',
-	},
 	descriptionTab: {
 		id: 'project.description.title',
 		defaultMessage: 'Description',
 	},
-	dontShowAgain: {
-		id: 'project.actions.dont-show-again',
-		defaultMessage: "Don't show again",
-	},
-	downloadsStat: {
-		id: 'project.stats.downloads-label',
-		defaultMessage: '{count, plural, one {download} other {downloads}}',
-	},
 	errorLoadingProject: {
 		id: 'project.error.loading',
 		defaultMessage: 'Error loading project data{message}',
@@ -627,10 +605,6 @@ const messages = defineMessages({
 		id: 'project.environment.migration.learn-more',
 		defaultMessage: 'Learn more about this change',
 	},
-	followersStat: {
-		id: 'project.stats.followers-label',
-		defaultMessage: '{count, plural, one {follower} other {followers}}',
-	},
 	galleryTab: {
 		id: 'project.gallery.title',
 		defaultMessage: 'Gallery',
@@ -655,10 +629,6 @@ const messages = defineMessages({
 		id: 'project.moderation.title',
 		defaultMessage: 'Moderation',
 	},
-	noCollectionsFound: {
-		id: 'project.collections.none-found',
-		defaultMessage: 'No collections found.',
-	},
 	pageNotFound: {
 		id: 'project.error.page-not-found',
 		defaultMessage: 'The page could not be found',
@@ -687,22 +657,6 @@ const messages = defineMessages({
 		id: 'project.environment.migration.review-button',
 		defaultMessage: 'Review environment settings',
 	},
-	reviewProject: {
-		id: 'project.actions.review-project',
-		defaultMessage: 'Review project',
-	},
-	serversPromoDescription: {
-		id: 'project.actions.servers-promo.description',
-		defaultMessage: 'Modrinth Hosting is the easiest way to play with your friends without hassle!',
-	},
-	serversPromoPricing: {
-		id: 'project.actions.servers-promo.pricing',
-		defaultMessage: 'Starting at {price}<small> / month</small>',
-	},
-	serversPromoTitle: {
-		id: 'project.actions.servers-promo.title',
-		defaultMessage: 'Create a server',
-	},
 	settingsTitle: {
 		id: 'project.settings.title',
 		defaultMessage: 'Settings',
@@ -1496,37 +1450,6 @@ const projectSearchUrl = computed(
 	() => `/discover/${isServerProject.value ? 'servers' : `${project.value?.project_type}s`}`,
 )
 
-const projectHeaderCreateServerPromptFooter = computed(() =>
-	formatMessage(messages.serversPromoPricing, {
-		price: formatPrice(500, 'USD', true),
-		small: (children) => (Array.isArray(children) ? children.join('') : children),
-	}),
-)
-
-const projectHeaderLabels = computed(() => ({
-	analyticsButton: formatMessage(commonMessages.analyticsButton),
-	copyIdButton: formatMessage(commonMessages.copyIdButton),
-	copyPermalinkButton: formatMessage(commonMessages.copyPermalinkButton),
-	createServer: formatMessage(messages.serversPromoTitle),
-	createServerTooltip: formatMessage(messages.createServerTooltip),
-	dontShowAgain: formatMessage(messages.dontShowAgain),
-	downloadButton: formatMessage(commonMessages.downloadButton),
-	downloadsStat: messages.downloadsStat,
-	editProject: 'Edit project',
-	followButton: formatMessage(commonMessages.followButton),
-	followersStat: messages.followersStat,
-	moreOptions: formatMessage(commonMessages.moreOptionsButton),
-	newBadge: formatMessage(commonMessages.newBadge),
-	playButton: 'Play',
-	reportButton: formatMessage(commonMessages.reportButton),
-	reviewProject: formatMessage(messages.reviewProject),
-	saveButton: formatMessage(commonMessages.saveButton),
-	serversPromoDescription: formatMessage(messages.serversPromoDescription),
-	serversPromoTitle: formatMessage(messages.serversPromoTitle),
-	techReview: 'Tech review',
-	unfollowButton: formatMessage(commonMessages.unfollowButton),
-}))
-
 const createCanonicalUrl = () =>
 	project.value ? `https://modrinth.com/project/${project.value.id}` : undefined
 
diff --git a/apps/frontend/src/pages/organization/[organization].vue b/apps/frontend/src/pages/organization/[organization].vue
index 7b6950abd5..bb9d42e7c6 100644
--- a/apps/frontend/src/pages/organization/[organization].vue
+++ b/apps/frontend/src/pages/organization/[organization].vue
@@ -67,9 +67,7 @@
 					:members-count="acceptedMembers?.length || 0"
 					:projects-count="projects?.length || 0"
 					:downloads="sumDownloads"
-					:downloads-tooltip="formatNumber(sumDownloads)"
 					:can-manage="!!(auth.user && currentMember)"
-					:labels="organizationHeaderLabels"
 					@manage-projects="router.push(`/organization/${organization.slug}/settings/projects`)"
 					@copy-id="copyId"
 					@copy-permalink="copyPermalink"
@@ -242,7 +240,6 @@ import {
 	ProjectCardList,
 	SidebarCard,
 	useCompactNumber,
-	useFormatNumber,
 	useVIntl,
 } from '@modrinth/ui'
 import type { Organization, ProjectStatus, ProjectType } from '@modrinth/utils'
@@ -269,7 +266,6 @@ type ProjectV3 = Labrinth.Projects.v3.Project & {
 const vintl = useVIntl()
 const { formatMessage } = vintl
 
-const formatNumber = useFormatNumber()
 const { formatCompactNumber } = useCompactNumber()
 
 const auth: { user: any } & any = await useAuth()
@@ -468,18 +464,6 @@ provideOrganizationContext(organizationContext)
 
 const canAccessSettings = computed(() => !!currentMember.value?.accepted)
 
-const organizationHeaderLabels = computed(() => ({
-	copyId: formatMessage(commonMessages.copyIdButton),
-	copyPermalink: formatMessage(commonMessages.copyPermalinkButton),
-	downloads: 'downloads',
-	manage: 'Manage',
-	manageProjects: 'Manage projects',
-	members: 'members',
-	moreOptions: 'More options',
-	organization: 'Organization',
-	projects: 'projects',
-}))
-
 watch(
 	[routeHasSettings, acceptedMembers, currentMember],
 	() => {
diff --git a/apps/frontend/src/pages/user/[user].vue b/apps/frontend/src/pages/user/[user].vue
index 60143e3027..4ebf1e763d 100644
--- a/apps/frontend/src/pages/user/[user].vue
+++ b/apps/frontend/src/pages/user/[user].vue
@@ -133,15 +133,6 @@
 					:is-staff="!!(auth.user && isStaff(auth.user))"
 					:projects-count="projects?.length || 0"
 					:downloads="sumDownloads"
-					:project-count-label="
-						formatMessage(messages.profileProjectCountLabel, { count: projects?.length || 0 })
-					"
-					:downloads-label="
-						formatMessage(messages.profileDownloadCountLabel, { count: sumDownloads })
-					"
-					:downloads-tooltip="formatNumber(sumDownloads)"
-					:joined-tooltip="formatDateTime(user.created)"
-					:labels="profileHeaderLabels"
 					@manage-projects="navigateTo('/dashboard/projects')"
 					@report="reportProfileFromHeader"
 					@copy-id="copyId"
@@ -388,8 +379,6 @@ import {
 	NewModal,
 	ProjectCard,
 	ProjectCardList,
-	useFormatDateTime,
-	useFormatNumber,
 	UserBadges,
 	useVIntl,
 } from '@modrinth/ui'
@@ -416,31 +405,14 @@ const config = useRuntimeConfig()
 const queryClient = useQueryClient()
 
 const { formatMessage } = useVIntl()
-const formatNumber = useFormatNumber()
-const formatDateTime = useFormatDateTime({
-	timeStyle: 'short',
-	dateStyle: 'long',
-})
 
 const { addNotification } = injectNotificationManager()
 
 const messages = defineMessages({
-	profileProjectCountLabel: {
-		id: 'profile.label.project-count',
-		defaultMessage: '{count, plural, one {project} other {projects}}',
-	},
-	profileDownloadCountLabel: {
-		id: 'profile.label.download-count',
-		defaultMessage: '{count, plural, one {download} other {downloads}}',
-	},
 	collectionProjectsCount: {
 		id: 'profile.collection.projects-count',
 		defaultMessage: '{count, plural, one {# project} other {# projects}}',
 	},
-	profileJoinedLabel: {
-		id: 'profile.label.joined',
-		defaultMessage: 'Joined',
-	},
 	savingLabel: {
 		id: 'profile.label.saving',
 		defaultMessage: 'Saving...',
@@ -506,10 +478,6 @@ const messages = defineMessages({
 		id: 'profile.label.badges',
 		defaultMessage: 'Badges',
 	},
-	profileManageProjectsButton: {
-		id: 'profile.button.manage-projects',
-		defaultMessage: 'Manage projects',
-	},
 	profileMetaDescription: {
 		id: 'profile.meta.description',
 		defaultMessage: "Download {username}'s projects on Modrinth",
@@ -536,42 +504,10 @@ const messages = defineMessages({
 		defaultMessage:
 			"You don't have any collections.\nWould you like to <create-link>create one</create-link>?",
 	},
-	billingButton: {
-		id: 'profile.button.billing',
-		defaultMessage: 'Manage user billing',
-	},
-	infoButton: {
-		id: 'profile.button.info',
-		defaultMessage: 'View user details',
-	},
-	analyticsButton: {
-		id: 'profile.button.analytics',
-		defaultMessage: 'View user analytics',
-	},
-	setAffiliateButton: {
-		id: 'profile.button.set-affiliate',
-		defaultMessage: 'Set as affiliate',
-	},
-	removeAffiliateButton: {
-		id: 'profile.button.remove-affiliate',
-		defaultMessage: 'Remove as affiliate',
-	},
-	affiliateLabel: {
-		id: 'profile.label.affiliate',
-		defaultMessage: 'Affiliate',
-	},
-	editRoleButton: {
-		id: 'profile.button.edit-role',
-		defaultMessage: 'Edit role',
-	},
 	userNotFoundError: {
 		id: 'profile.error.not-found',
 		defaultMessage: 'User not found',
 	},
-	officialAccount: {
-		id: 'profile.official-account',
-		defaultMessage: 'Official Modrinth account',
-	},
 	officialAccountBio: {
 		id: 'profile.official-account.bio',
 		defaultMessage:
@@ -754,24 +690,6 @@ const profileHeaderSummary = computed(() =>
 			: formatMessage(messages.bioFallbackCreator),
 )
 
-const profileHeaderLabels = computed(() => ({
-	affiliate: formatMessage(messages.affiliateLabel),
-	analytics: formatMessage(messages.analyticsButton),
-	billing: formatMessage(messages.billingButton),
-	copyId: formatMessage(commonMessages.copyIdButton),
-	copyPermalink: formatMessage(commonMessages.copyPermalinkButton),
-	edit: formatMessage(commonMessages.editButton),
-	editRole: formatMessage(messages.editRoleButton),
-	info: formatMessage(messages.infoButton),
-	joined: formatMessage(messages.profileJoinedLabel),
-	manageProjects: formatMessage(messages.profileManageProjectsButton),
-	moreOptions: 'More options',
-	officialAccount: formatMessage(messages.officialAccount),
-	removeAffiliate: formatMessage(messages.removeAffiliateButton),
-	report: formatMessage(commonMessages.reportButton),
-	setAffiliate: formatMessage(messages.setAffiliateButton),
-}))
-
 const navLinks = computed(() => [
 	{
 		label: formatMessage(commonMessages.allProjectType),
diff --git a/packages/ui/src/components/base/index.ts b/packages/ui/src/components/base/index.ts
index 981da04993..60f9c2bfb3 100644
--- a/packages/ui/src/components/base/index.ts
+++ b/packages/ui/src/components/base/index.ts
@@ -72,8 +72,6 @@ export { default as PageHeaderMetadataTagsItem } from './page-header/metadata/pa
 export { default as PageHeaderMetadataTimeItem } from './page-header/metadata/page-header-metadata-time-item.vue'
 export { default as PageHeaderActions } from './page-header/page-header-actions.vue'
 export { default as PageHeaderBadgeItem } from './page-header/page-header-badge-item.vue'
-export { default as PageHeaderObjectAvatarLeading } from './page-header/page-header-object-avatar-leading.vue'
-export { default as PageHeaderUserAvatarLeading } from './page-header/page-header-user-avatar-leading.vue'
 export type {
 	PageHeaderClass,
 	PageHeaderClickHandler,
diff --git a/packages/ui/src/components/base/page-header/page-header-object-avatar-leading.vue b/packages/ui/src/components/base/page-header/page-header-object-avatar-leading.vue
deleted file mode 100644
index 97af9fc209..0000000000
--- a/packages/ui/src/components/base/page-header/page-header-object-avatar-leading.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-	<Avatar
-		:src="src"
-		:alt="alt"
-		:size="size"
-		:tint-by="tintBy"
-		:circle="circle"
-		:no-shadow="noShadow"
-		:raised="raised"
-		:loading="loading"
-		v-bind="$attrs"
-	/>
-</template>
-
-<script setup lang="ts">
-import Avatar from '../Avatar.vue'
-
-withDefaults(
-	defineProps<{
-		src?: string | null
-		alt: string
-		size?: string
-		tintBy?: string | null
-		circle?: boolean
-		noShadow?: boolean
-		raised?: boolean
-		loading?: 'eager' | 'lazy'
-	}>(),
-	{
-		src: null,
-		size: '64px',
-		tintBy: null,
-		circle: false,
-		noShadow: false,
-		raised: false,
-		loading: 'eager',
-	},
-)
-</script>
diff --git a/packages/ui/src/components/base/page-header/page-header-user-avatar-leading.vue b/packages/ui/src/components/base/page-header/page-header-user-avatar-leading.vue
deleted file mode 100644
index 58bb3f455c..0000000000
--- a/packages/ui/src/components/base/page-header/page-header-user-avatar-leading.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-	<Avatar
-		:src="src"
-		:alt="username"
-		:size="size"
-		:tint-by="tintBy ?? username"
-		circle
-		:no-shadow="noShadow"
-		:raised="raised"
-		:loading="loading"
-		v-bind="$attrs"
-	/>
-</template>
-
-<script setup lang="ts">
-import Avatar from '../Avatar.vue'
-
-withDefaults(
-	defineProps<{
-		src?: string | null
-		username: string
-		size?: string
-		tintBy?: string | null
-		noShadow?: boolean
-		raised?: boolean
-		loading?: 'eager' | 'lazy'
-	}>(),
-	{
-		src: null,
-		size: '96px',
-		tintBy: null,
-		noShadow: false,
-		raised: false,
-		loading: 'eager',
-	},
-)
-</script>
diff --git a/packages/ui/src/stories/base/PageHeader.stories.ts b/packages/ui/src/stories/base/PageHeader.stories.ts
index 096bb9125d..73ad628820 100644
--- a/packages/ui/src/stories/base/PageHeader.stories.ts
+++ b/packages/ui/src/stories/base/PageHeader.stories.ts
@@ -19,6 +19,7 @@ import {
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import AutoLink from '../../components/base/AutoLink.vue'
+import Avatar from '../../components/base/Avatar.vue'
 import ButtonStyled from '../../components/base/ButtonStyled.vue'
 import FormattedTag from '../../components/base/FormattedTag.vue'
 import JoinedButtons from '../../components/base/JoinedButtons.vue'
@@ -30,8 +31,6 @@ import PageHeaderMetadataTagsItem from '../../components/base/page-header/metada
 import PageHeaderMetadataTimeItem from '../../components/base/page-header/metadata/page-header-metadata-time-item.vue'
 import PageHeaderActions from '../../components/base/page-header/page-header-actions.vue'
 import PageHeaderBadgeItem from '../../components/base/page-header/page-header-badge-item.vue'
-import PageHeaderObjectAvatarLeading from '../../components/base/page-header/page-header-object-avatar-leading.vue'
-import PageHeaderUserAvatarLeading from '../../components/base/page-header/page-header-user-avatar-leading.vue'
 import TagItem from '../../components/base/TagItem.vue'
 import TeleportOverflowMenu from '../../components/base/TeleportOverflowMenu.vue'
 import LoaderIcon from '../../components/servers/icons/LoaderIcon.vue'
@@ -87,6 +86,7 @@ const pageHeaderIcons = {
 
 const pageHeaderComponents = {
 	AutoLink,
+	Avatar,
 	ButtonStyled,
 	FormattedTag,
 	JoinedButtons,
@@ -98,8 +98,6 @@ const pageHeaderComponents = {
 	PageHeaderMetadataNumberItem,
 	PageHeaderMetadataTagsItem,
 	PageHeaderMetadataTimeItem,
-	PageHeaderObjectAvatarLeading,
-	PageHeaderUserAvatarLeading,
 	TagItem,
 	TeleportOverflowMenu,
 	...pageHeaderIcons,
@@ -136,7 +134,7 @@ export const ProjectHeader: Story = {
 		template: `
 			<PageHeader title="Fabric API" summary="Lightweight and modular API providing common hooks and intercompatibility measures for Fabric mods.">
 				<template #leading>
-					<PageHeaderObjectAvatarLeading src="" alt="Fabric API" size="96px" tint-by="fabric-api" />
+					<Avatar src="" alt="Fabric API" size="96px" tint-by="fabric-api" />
 				</template>
 
 				<template #badges>
@@ -190,7 +188,7 @@ export const CreatorHeader: Story = {
 		template: `
 			<PageHeader title="Prospector" summary="A Modrinth creator with a handful of popular projects.">
 				<template #leading>
-					<PageHeaderUserAvatarLeading src="" username="Prospector" />
+					<Avatar src="" alt="Prospector" size="96px" tint-by="Prospector" circle />
 				</template>
 
 				<template #badges>
@@ -239,7 +237,7 @@ export const AppInstanceHeader: Story = {
 		template: `
 			<PageHeader title="Create: Astral">
 				<template #leading>
-					<PageHeaderObjectAvatarLeading src="" alt="Create: Astral" size="64px" tint-by="create-astral" />
+					<Avatar src="" alt="Create: Astral" size="64px" tint-by="create-astral" />
 				</template>
 
 				<template #metadata>
@@ -298,7 +296,7 @@ export const BrowseHeader: Story = {
 							<LeftArrowIcon />
 						</button>
 					</ButtonStyled>
-					<PageHeaderObjectAvatarLeading src="" alt="Survival SMP" size="48px" tint-by="survival-smp" />
+					<Avatar src="" alt="Survival SMP" size="48px" tint-by="survival-smp" />
 				</template>
 
 				<template #metadata>
@@ -435,7 +433,7 @@ export const CustomMetadata: Story = {
 				summary="Custom metadata stays in markup so page-specific components can be composed without expanding PageHeader itself."
 			>
 				<template #leading>
-					<PageHeaderObjectAvatarLeading src="" alt="Custom Metadata Project" size="96px" tint-by="custom-metadata-project" />
+					<Avatar src="" alt="Custom Metadata Project" size="96px" tint-by="custom-metadata-project" />
 				</template>
 
 				<template #metadata>

From 2b062928077c43cffb72db26144432b74a71e870 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Mon, 6 Jul 2026 21:14:37 +0100
Subject: [PATCH 08/12] fix: rescan

---
 .../src/components/ui/ProjectPageHeader.vue      | 16 ++++++++++++++++
 apps/frontend/src/pages/[type]/[project].vue     |  1 -
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/apps/frontend/src/components/ui/ProjectPageHeader.vue b/apps/frontend/src/components/ui/ProjectPageHeader.vue
index ec7bc74c6d..daf68ff562 100644
--- a/apps/frontend/src/components/ui/ProjectPageHeader.vue
+++ b/apps/frontend/src/components/ui/ProjectPageHeader.vue
@@ -219,6 +219,7 @@ import {
 	ChartIcon,
 	ClipboardCopyIcon,
 	DownloadIcon,
+	FolderSearchIcon,
 	HeartIcon,
 	MoreVerticalIcon,
 	PlayIcon,
@@ -304,6 +305,7 @@ const props = withDefaults(defineProps<{
 	isMember?: boolean
 	isStaff?: boolean
 	showModerationChecklist?: boolean
+	showModerationModpackRescan?: boolean
 }>(), {
 	projectV3: null,
 	authUser: null,
@@ -321,6 +323,7 @@ const props = withDefaults(defineProps<{
 	isMember: false,
 	isStaff: false,
 	showModerationChecklist: false,
+	showModerationModpackRescan: false,
 })
 
 const emit = defineEmits<{
@@ -331,6 +334,7 @@ const emit = defineEmits<{
 	follow: []
 	analytics: []
 	moderationChecklist: []
+	moderationModpackRescan: []
 	techReview: []
 	report: []
 	copyId: []
@@ -370,6 +374,10 @@ const messages = defineMessages({
 		id: 'project.actions.review-project',
 		defaultMessage: 'Review project',
 	},
+	rescanModpack: {
+		id: 'project.actions.rescan-modpack',
+		defaultMessage: 'Rescan modpack',
+	},
 	serversPromoDescription: {
 		id: 'project.actions.servers-promo.description',
 		defaultMessage: 'Modrinth Hosting is the easiest way to play with your friends without hassle!',
@@ -427,6 +435,14 @@ const moreActions = computed<TeleportOverflowMenuItem[]>(() => [
 		color: 'orange',
 		shown: !!props.authUser && props.isStaff,
 	},
+	{
+		id: 'moderation-modpack-rescan',
+		label: formatMessage(messages.rescanModpack),
+		icon: FolderSearchIcon,
+		action: () => emit('moderationModpackRescan'),
+		color: 'orange',
+		shown: !!props.authUser && props.isStaff && props.showModerationModpackRescan,
+	},
 	{
 		divider: true,
 		shown: !!props.authUser && props.isStaff,
diff --git a/apps/frontend/src/pages/[type]/[project].vue b/apps/frontend/src/pages/[type]/[project].vue
index b2b26c1f30..9d856aef12 100644
--- a/apps/frontend/src/pages/[type]/[project].vue
+++ b/apps/frontend/src/pages/[type]/[project].vue
@@ -403,7 +403,6 @@ import {
 	ChevronRightIcon,
 	DownloadIcon,
 	ExternalIcon,
-	FolderSearchIcon,
 	HeartIcon,
 	ListIcon,
 	ScaleIcon,

From 32f44307bb421af159ff9742399adba4614fc14b Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Mon, 6 Jul 2026 21:15:08 +0100
Subject: [PATCH 09/12] fix: prepr

---
 .../src/components/ui/ProjectPageHeader.vue   | 52 +++++-----
 .../ui/instance-page-header/index.vue         | 25 +++--
 .../app-frontend/src/locales/en-US/index.json | 30 ++++++
 .../app-frontend/src/pages/instance/Index.vue |  6 +-
 .../src/components/ui/ProjectPageHeader.vue   | 99 ++++++++++---------
 apps/frontend/src/locales/cs-CZ/index.json    |  6 --
 apps/frontend/src/locales/de-CH/index.json    |  6 --
 apps/frontend/src/locales/de-DE/index.json    |  6 --
 apps/frontend/src/locales/en-US/index.json    | 32 +++++-
 apps/frontend/src/locales/es-419/index.json   |  6 --
 apps/frontend/src/locales/es-ES/index.json    |  6 --
 apps/frontend/src/locales/fil-PH/index.json   |  6 --
 apps/frontend/src/locales/fr-FR/index.json    |  6 --
 apps/frontend/src/locales/he-IL/index.json    |  6 --
 apps/frontend/src/locales/hu-HU/index.json    |  6 --
 apps/frontend/src/locales/id-ID/index.json    |  6 --
 apps/frontend/src/locales/it-IT/index.json    |  6 --
 apps/frontend/src/locales/ja-JP/index.json    |  6 --
 apps/frontend/src/locales/ko-KR/index.json    |  6 --
 apps/frontend/src/locales/ms-MY/index.json    |  6 --
 apps/frontend/src/locales/nl-NL/index.json    |  6 --
 apps/frontend/src/locales/no-NO/index.json    |  6 --
 apps/frontend/src/locales/pl-PL/index.json    |  6 --
 apps/frontend/src/locales/pt-PT/index.json    |  6 --
 apps/frontend/src/locales/ru-RU/index.json    |  6 --
 apps/frontend/src/locales/sv-SE/index.json    |  3 -
 apps/frontend/src/locales/tr-TR/index.json    |  6 --
 apps/frontend/src/locales/uk-UA/index.json    |  6 --
 apps/frontend/src/locales/vi-VN/index.json    |  6 --
 apps/frontend/src/locales/zh-CN/index.json    |  6 --
 apps/frontend/src/locales/zh-TW/index.json    |  6 --
 apps/frontend/src/pages/[type]/[project].vue  |  2 +-
 32 files changed, 149 insertions(+), 244 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/ProjectPageHeader.vue b/apps/app-frontend/src/components/ui/ProjectPageHeader.vue
index 166cb54f8f..d30dfc1c69 100644
--- a/apps/app-frontend/src/components/ui/ProjectPageHeader.vue
+++ b/apps/app-frontend/src/components/ui/ProjectPageHeader.vue
@@ -172,33 +172,33 @@ type HeaderProject = Pick<
 	icon_url?: string | null
 }
 
-type HeaderProjectV3 = Pick<
-	Labrinth.Projects.v3.Project,
-	'status' | 'minecraft_java_server'
->
+type HeaderProjectV3 = Pick<Labrinth.Projects.v3.Project, 'status' | 'minecraft_java_server'>
 
-const props = withDefaults(defineProps<{
-	project: HeaderProject
-	projectV3?: HeaderProjectV3 | null
-	isServerProject?: boolean
-	installButtonDisabled?: boolean
-	installButtonValidating?: boolean
-	installButtonLoading?: boolean
-	installButtonInstalled?: boolean
-	serverProjectSelected?: boolean
-	serverPlaying?: boolean
-	serverInstallLoading?: boolean
-}>(), {
-	projectV3: null,
-	isServerProject: false,
-	installButtonDisabled: false,
-	installButtonValidating: false,
-	installButtonLoading: false,
-	installButtonInstalled: false,
-	serverProjectSelected: false,
-	serverPlaying: false,
-	serverInstallLoading: false,
-})
+const props = withDefaults(
+	defineProps<{
+		project: HeaderProject
+		projectV3?: HeaderProjectV3 | null
+		isServerProject?: boolean
+		installButtonDisabled?: boolean
+		installButtonValidating?: boolean
+		installButtonLoading?: boolean
+		installButtonInstalled?: boolean
+		serverProjectSelected?: boolean
+		serverPlaying?: boolean
+		serverInstallLoading?: boolean
+	}>(),
+	{
+		projectV3: null,
+		isServerProject: false,
+		installButtonDisabled: false,
+		installButtonValidating: false,
+		installButtonLoading: false,
+		installButtonInstalled: false,
+		serverProjectSelected: false,
+		serverPlaying: false,
+		serverInstallLoading: false,
+	},
+)
 
 const emit = defineEmits<{
 	contextmenu: [event: MouseEvent]
diff --git a/apps/app-frontend/src/components/ui/instance-page-header/index.vue b/apps/app-frontend/src/components/ui/instance-page-header/index.vue
index 9c81a11174..68591e0e39 100644
--- a/apps/app-frontend/src/components/ui/instance-page-header/index.vue
+++ b/apps/app-frontend/src/components/ui/instance-page-header/index.vue
@@ -1,12 +1,7 @@
 <template>
 	<PageHeader :title="instance.name">
 		<template #leading>
-			<Avatar
-				:src="iconSrc"
-				:alt="instance.name"
-				size="64px"
-				:tint-by="instance.id"
-			/>
+			<Avatar :src="iconSrc" :alt="instance.name" size="64px" :tint-by="instance.id" />
 		</template>
 
 		<template #metadata>
@@ -32,7 +27,11 @@
 				>
 					{{ loaderLabel }}
 				</PageHeaderMetadataItem>
-				<PageHeaderMetadataItem v-if="showInstancePlayTime" :icon="TimerIcon" tooltip="Total playtime">
+				<PageHeaderMetadataItem
+					v-if="showInstancePlayTime"
+					:icon="TimerIcon"
+					tooltip="Total playtime"
+				>
 					{{ playtimeLabel }}
 				</PageHeaderMetadataItem>
 			</PageHeaderMetadata>
@@ -41,7 +40,9 @@
 		<template #actions>
 			<PageHeaderActions>
 				<ButtonStyled v-if="isInstalling" color="brand" size="large">
-					<button type="button" disabled>{{ formatMessage(commonMessages.installingLabel) }}</button>
+					<button type="button" disabled>
+						{{ formatMessage(commonMessages.installingLabel) }}
+					</button>
 				</ButtonStyled>
 				<ButtonStyled v-else-if="instance.install_stage !== 'installed'" color="brand" size="large">
 					<button type="button" @click="emit('repair')">
@@ -53,9 +54,7 @@
 					<button type="button" :disabled="stopping" @click="emit('stop')">
 						<StopCircleIcon />
 						{{
-							stopping
-								? formatMessage(messages.stopping)
-								: formatMessage(commonMessages.stopButton)
+							stopping ? formatMessage(messages.stopping) : formatMessage(commonMessages.stopButton)
 						}}
 					</button>
 				</ButtonStyled>
@@ -119,15 +118,15 @@ import {
 	commonMessages,
 	defineMessages,
 	formatLoaderLabel,
+	type JoinedButtonAction,
 	JoinedButtons,
 	LoaderIcon as ServerLoaderIcon,
 	PageHeader,
 	PageHeaderActions,
 	PageHeaderMetadata,
 	PageHeaderMetadataItem,
-	TeleportOverflowMenu,
-	type JoinedButtonAction,
 	type ServerLoader,
+	TeleportOverflowMenu,
 	type TeleportOverflowMenuItem,
 	useVIntl,
 } from '@modrinth/ui'
diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index 9b8fdec3b9..a958cd184a 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -701,6 +701,33 @@
   "friends.sign-in-to-add-friends": {
     "message": "<link>Sign in to a Modrinth account</link> to add friends and see what they're playing!"
   },
+  "instance.action.create-shortcut": {
+    "message": "Create shortcut"
+  },
+  "instance.action.export-modpack": {
+    "message": "Export modpack"
+  },
+  "instance.action.launch-instance": {
+    "message": "Launch instance"
+  },
+  "instance.action.more-actions": {
+    "message": "More actions"
+  },
+  "instance.action.open-folder": {
+    "message": "Open folder"
+  },
+  "instance.action.repair": {
+    "message": "Repair"
+  },
+  "instance.action.settings": {
+    "message": "Instance settings"
+  },
+  "instance.action.starting": {
+    "message": "Starting..."
+  },
+  "instance.action.stopping": {
+    "message": "Stopping..."
+  },
   "instance.add-server.add-and-play": {
     "message": "Add and play"
   },
@@ -743,6 +770,9 @@
   "instance.files.save-as": {
     "message": "Save as..."
   },
+  "instance.playtime.never-played": {
+    "message": "Never played"
+  },
   "instance.server-modal.address": {
     "message": "Address"
   },
diff --git a/apps/app-frontend/src/pages/instance/Index.vue b/apps/app-frontend/src/pages/instance/Index.vue
index c237bca9ee..8d7711f15f 100644
--- a/apps/app-frontend/src/pages/instance/Index.vue
+++ b/apps/app-frontend/src/pages/instance/Index.vue
@@ -109,11 +109,7 @@ import {
 	UpdatedIcon,
 	XIcon,
 } from '@modrinth/assets'
-import {
-	injectNotificationManager,
-	NavTabs,
-	useLoadingBarToken,
-} from '@modrinth/ui'
+import { injectNotificationManager, NavTabs, useLoadingBarToken } from '@modrinth/ui'
 import { useQueryClient } from '@tanstack/vue-query'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import dayjs from 'dayjs'
diff --git a/apps/frontend/src/components/ui/ProjectPageHeader.vue b/apps/frontend/src/components/ui/ProjectPageHeader.vue
index daf68ff562..ae7b6f1029 100644
--- a/apps/frontend/src/components/ui/ProjectPageHeader.vue
+++ b/apps/frontend/src/components/ui/ProjectPageHeader.vue
@@ -110,7 +110,9 @@
 									<h3 class="m-0 text-base font-bold text-contrast">
 										{{ formatMessage(messages.serversPromoTitle) }}
 									</h3>
-									<span class="rounded-full bg-brand-highlight px-2 py-0.5 text-xs font-bold text-brand">
+									<span
+										class="rounded-full bg-brand-highlight px-2 py-0.5 text-xs font-bold text-brand"
+									>
 										{{ formatMessage(commonMessages.newBadge) }}
 									</span>
 								</div>
@@ -271,10 +273,7 @@ type HeaderProject = Pick<
 	icon_url?: string | null
 }
 
-type HeaderProjectV3 = Pick<
-	Labrinth.Projects.v3.Project,
-	'status' | 'minecraft_java_server'
->
+type HeaderProjectV3 = Pick<Labrinth.Projects.v3.Project, 'status' | 'minecraft_java_server'>
 
 type HeaderCollection = {
 	projects: string[]
@@ -283,48 +282,51 @@ type HeaderCollection = {
 
 type SignInRoute = string | Record<string, unknown>
 
-const props = withDefaults(defineProps<{
-	project: HeaderProject
-	projectV3?: HeaderProjectV3 | null
-	authUser?: Labrinth.Users.v3.User | null
-	signInRoute: SignInRoute
-	collections?: HeaderCollection[]
-	baseId: string
-	collectProject: (...args: unknown[]) => unknown
-	createCollection: (...args: unknown[]) => unknown
-	isServerProject?: boolean
-	showStatusBadge?: boolean
-	showEditProject?: boolean
-	primaryMuted?: boolean
-	primaryLabelHidden?: boolean
-	canCreateServer?: boolean
-	showQuickServerButton?: boolean
-	showCreateServerPrompt?: boolean
-	following?: boolean
-	saved?: boolean
-	isMember?: boolean
-	isStaff?: boolean
-	showModerationChecklist?: boolean
-	showModerationModpackRescan?: boolean
-}>(), {
-	projectV3: null,
-	authUser: null,
-	collections: () => [],
-	isServerProject: false,
-	showStatusBadge: false,
-	showEditProject: false,
-	primaryMuted: false,
-	primaryLabelHidden: false,
-	canCreateServer: false,
-	showQuickServerButton: false,
-	showCreateServerPrompt: false,
-	following: false,
-	saved: false,
-	isMember: false,
-	isStaff: false,
-	showModerationChecklist: false,
-	showModerationModpackRescan: false,
-})
+const props = withDefaults(
+	defineProps<{
+		project: HeaderProject
+		projectV3?: HeaderProjectV3 | null
+		authUser?: Labrinth.Users.v3.User | null
+		signInRoute: SignInRoute
+		collections?: HeaderCollection[]
+		baseId: string
+		collectProject: (...args: unknown[]) => unknown
+		createCollection: (...args: unknown[]) => unknown
+		isServerProject?: boolean
+		showStatusBadge?: boolean
+		showEditProject?: boolean
+		primaryMuted?: boolean
+		primaryLabelHidden?: boolean
+		canCreateServer?: boolean
+		showQuickServerButton?: boolean
+		showCreateServerPrompt?: boolean
+		following?: boolean
+		saved?: boolean
+		isMember?: boolean
+		isStaff?: boolean
+		showModerationChecklist?: boolean
+		showModerationModpackRescan?: boolean
+	}>(),
+	{
+		projectV3: null,
+		authUser: null,
+		collections: () => [],
+		isServerProject: false,
+		showStatusBadge: false,
+		showEditProject: false,
+		primaryMuted: false,
+		primaryLabelHidden: false,
+		canCreateServer: false,
+		showQuickServerButton: false,
+		showCreateServerPrompt: false,
+		following: false,
+		saved: false,
+		isMember: false,
+		isStaff: false,
+		showModerationChecklist: false,
+		showModerationModpackRescan: false,
+	},
+)
 
 const emit = defineEmits<{
 	category: [category: string]
@@ -397,7 +399,8 @@ const formatNumber = useFormatNumber()
 const formatPrice = useFormatPrice()
 
 const projectPath = computed(
-	() => `/${props.project.project_type}/${props.project.slug ? props.project.slug : props.project.id}`,
+	() =>
+		`/${props.project.project_type}/${props.project.slug ? props.project.slug : props.project.id}`,
 )
 const primaryColor = computed(() => (props.primaryMuted ? 'standard' : 'brand'))
 const showCreateServerAction = computed(() => props.canCreateServer && props.showQuickServerButton)
diff --git a/apps/frontend/src/locales/cs-CZ/index.json b/apps/frontend/src/locales/cs-CZ/index.json
index 359e25ba2c..940dfb3766 100644
--- a/apps/frontend/src/locales/cs-CZ/index.json
+++ b/apps/frontend/src/locales/cs-CZ/index.json
@@ -2159,9 +2159,6 @@
   "profile.label.collection": {
     "message": "Kolekce"
   },
-  "profile.label.downloads": {
-    "message": "{count} {countPlural, plural, one {stažení} few {stažení} other {stažení}}"
-  },
   "profile.label.joined": {
     "message": "Členem od"
   },
@@ -2180,9 +2177,6 @@
   "profile.label.organizations": {
     "message": "Organizace"
   },
-  "profile.label.projects": {
-    "message": "{count} {countPlural, plural, one {projekt} few {projekty} other {projektů}}"
-  },
   "profile.label.saving": {
     "message": "Ukládání..."
   },
diff --git a/apps/frontend/src/locales/de-CH/index.json b/apps/frontend/src/locales/de-CH/index.json
index 9513b0629b..782211f0cb 100644
--- a/apps/frontend/src/locales/de-CH/index.json
+++ b/apps/frontend/src/locales/de-CH/index.json
@@ -3011,9 +3011,6 @@
   "profile.label.collection": {
     "message": "Kollektion"
   },
-  "profile.label.downloads": {
-    "message": "{count} {countPlural, plural, one {Download} other {Downloads}}"
-  },
   "profile.label.joined": {
     "message": "Beigetreten"
   },
@@ -3032,9 +3029,6 @@
   "profile.label.organizations": {
     "message": "Organisationen"
   },
-  "profile.label.projects": {
-    "message": "{count} {countPlural, plural, one {Projekt} other {Projekte}}"
-  },
   "profile.label.saving": {
     "message": "Speichert..."
   },
diff --git a/apps/frontend/src/locales/de-DE/index.json b/apps/frontend/src/locales/de-DE/index.json
index 9dcda3478c..d4e47c1bf0 100644
--- a/apps/frontend/src/locales/de-DE/index.json
+++ b/apps/frontend/src/locales/de-DE/index.json
@@ -3011,9 +3011,6 @@
   "profile.label.collection": {
     "message": "Kollektion"
   },
-  "profile.label.downloads": {
-    "message": "{count} {countPlural, plural, one {Download} other {Downloads}}"
-  },
   "profile.label.joined": {
     "message": "Beigetreten"
   },
@@ -3032,9 +3029,6 @@
   "profile.label.organizations": {
     "message": "Organisationen"
   },
-  "profile.label.projects": {
-    "message": "{count} {countPlural, plural, one {Projekt} other {Projekte}}"
-  },
   "profile.label.saving": {
     "message": "Speichert..."
   },
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 5b76a99673..717ce1815f 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -2996,6 +2996,24 @@
   "muralpay.warning.wallet-address": {
     "message": "Double-check your wallet address. Funds sent to an incorrect address cannot be recovered."
   },
+  "organization.button.manage": {
+    "message": "Manage"
+  },
+  "organization.button.manage-projects": {
+    "message": "Manage projects"
+  },
+  "organization.label.downloads": {
+    "message": "downloads"
+  },
+  "organization.label.members": {
+    "message": "members"
+  },
+  "organization.label.organization": {
+    "message": "Organization"
+  },
+  "organization.label.projects": {
+    "message": "projects"
+  },
   "organization.settings.projects.edit-links.affected-projects": {
     "message": "Changes will be applied to {count, plural, one {# project} other {# projects}}."
   },
@@ -3065,8 +3083,8 @@
   "profile.label.collection": {
     "message": "Collection"
   },
-  "profile.label.downloads": {
-    "message": "{count} {countPlural, plural, one {download} other {downloads}}"
+  "profile.label.download-count": {
+    "message": "{count, plural, one {download} other {downloads}}"
   },
   "profile.label.joined": {
     "message": "Joined"
@@ -3086,8 +3104,8 @@
   "profile.label.organizations": {
     "message": "Organizations"
   },
-  "profile.label.projects": {
-    "message": "{count} {countPlural, plural, one {project} other {projects}}"
+  "profile.label.project-count": {
+    "message": "{count, plural, one {project} other {projects}}"
   },
   "profile.label.saving": {
     "message": "Saving..."
@@ -3251,6 +3269,12 @@
   "project.actions.dont-show-again": {
     "message": "Don't show again"
   },
+  "project.actions.edit-project": {
+    "message": "Edit project"
+  },
+  "project.actions.rescan-modpack": {
+    "message": "Rescan modpack"
+  },
   "project.actions.review-project": {
     "message": "Review project"
   },
diff --git a/apps/frontend/src/locales/es-419/index.json b/apps/frontend/src/locales/es-419/index.json
index 9c8a7dbc38..cb320430fd 100644
--- a/apps/frontend/src/locales/es-419/index.json
+++ b/apps/frontend/src/locales/es-419/index.json
@@ -3011,9 +3011,6 @@
   "profile.label.collection": {
     "message": "Colección"
   },
-  "profile.label.downloads": {
-    "message": "{count} {countPlural, plural, one {descarga} other {descargas}}"
-  },
   "profile.label.joined": {
     "message": "Se unió"
   },
@@ -3032,9 +3029,6 @@
   "profile.label.organizations": {
     "message": "Organizaciones"
   },
-  "profile.label.projects": {
-    "message": "{count} {countPlural, plural, one {proyecto} other {proyectos}}"
-  },
   "profile.label.saving": {
     "message": "Guardando..."
   },
diff --git a/apps/frontend/src/locales/es-ES/index.json b/apps/frontend/src/locales/es-ES/index.json
index 0e8c91024c..52551803c2 100644
--- a/apps/frontend/src/locales/es-ES/index.json
+++ b/apps/frontend/src/locales/es-ES/index.json
@@ -2891,9 +2891,6 @@
   "profile.label.collection": {
     "message": "Colección"
   },
-  "profile.label.downloads": {
-    "message": "{count} {countPlural, plural, one {descarga} other {descargas}}"
-  },
   "profile.label.joined": {
     "message": "Se unió hace"
   },
@@ -2912,9 +2909,6 @@
   "profile.label.organizations": {
     "message": "Organizaciones"
   },
-  "profile.label.projects": {
-    "message": "{count} {countPlural, plural, one {proyecto} other {proyectos}}"
-  },
   "profile.label.saving": {
     "message": "Guardando..."
   },
diff --git a/apps/frontend/src/locales/fil-PH/index.json b/apps/frontend/src/locales/fil-PH/index.json
index f756d471c1..22f7e15cf0 100644
--- a/apps/frontend/src/locales/fil-PH/index.json
+++ b/apps/frontend/src/locales/fil-PH/index.json
@@ -2204,9 +2204,6 @@
   "profile.label.collection": {
     "message": "Koleksiyon"
   },
-  "profile.label.downloads": {
-    "message": "{count} {countPlural, plural, one {download} other {na download}}"
-  },
   "profile.label.joined": {
     "message": "Sumali"
   },
@@ -2225,9 +2222,6 @@
   "profile.label.organizations": {
     "message": "Mga organisasyon"
   },
-  "profile.label.projects": {
-    "message": "{count} {countPlural, plural, one {proyekto} other {na proyekto}}"
-  },
   "profile.label.saving": {
     "message": "Sine-save..."
   },
diff --git a/apps/frontend/src/locales/fr-FR/index.json b/apps/frontend/src/locales/fr-FR/index.json
index ffde04f70d..f79e1c8899 100644
--- a/apps/frontend/src/locales/fr-FR/index.json
+++ b/apps/frontend/src/locales/fr-FR/index.json
@@ -3011,9 +3011,6 @@
   "profile.label.collection": {
     "message": "Collection"
   },
-  "profile.label.downloads": {
-    "message": "{count} {countPlural, plural, one {téléchargement} other {téléchargements}}"
-  },
   "profile.label.joined": {
     "message": "Rejoint"
   },
@@ -3032,9 +3029,6 @@
   "profile.label.organizations": {
     "message": "Organisations"
   },
-  "profile.label.projects": {
-    "message": "{count} {countPlural, plural, one {projet} other {projets}}"
-  },
   "profile.label.saving": {
     "message": "Sauvegarde en cours..."
   },
diff --git a/apps/frontend/src/locales/he-IL/index.json b/apps/frontend/src/locales/he-IL/index.json
index 6756b68e1b..46630b5ed6 100644
--- a/apps/frontend/src/locales/he-IL/index.json
+++ b/apps/frontend/src/locales/he-IL/index.json
@@ -1823,9 +1823,6 @@
   "profile.label.collection": {
     "message": "אוסף"
   },
-  "profile.label.downloads": {
-    "message": "{count} {countPlural, plural, one {download} other {downloads}}"
-  },
   "profile.label.joined": {
     "message": "הצטרף ב-"
   },
@@ -1844,9 +1841,6 @@
   "profile.label.organizations": {
     "message": "ארגונים"
   },
-  "profile.label.projects": {
-    "message": "{count} {countPlural, plural, one {project} other {projects}}"
-  },
   "profile.label.saving": {
     "message": "שומר..."
   },
diff --git a/apps/frontend/src/locales/hu-HU/index.json b/apps/frontend/src/locales/hu-HU/index.json
index 732216fd39..09be0c636b 100644
--- a/apps/frontend/src/locales/hu-HU/index.json
+++ b/apps/frontend/src/locales/hu-HU/index.json
@@ -2714,9 +2714,6 @@
   "profile.label.collection": {
     "message": "Gyűjtemény"
   },
-  "profile.label.downloads": {
-    "message": "{count} letöltés"
-  },
   "profile.label.joined": {
     "message": "Csatlakozott"
   },
@@ -2735,9 +2732,6 @@
   "profile.label.organizations": {
     "message": "Szervezetek"
   },
-  "profile.label.projects": {
-    "message": "{count} projekt"
-  },
   "profile.label.saving": {
     "message": "Mentés..."
   },
diff --git a/apps/frontend/src/locales/id-ID/index.json b/apps/frontend/src/locales/id-ID/index.json
index 40282c8733..5712d79a5a 100644
--- a/apps/frontend/src/locales/id-ID/index.json
+++ b/apps/frontend/src/locales/id-ID/index.json
@@ -2219,9 +2219,6 @@
   "profile.label.collection": {
     "message": "Koleksi"
   },
-  "profile.label.downloads": {
-    "message": "{count} {countPlural, plural, other {pengunduhan}}"
-  },
   "profile.label.joined": {
     "message": "Telah bergabung"
   },
@@ -2240,9 +2237,6 @@
   "profile.label.organizations": {
     "message": "Organisasi"
   },
-  "profile.label.projects": {
-    "message": "{count} {countPlural, plural, other {proyek}}"
-  },
   "profile.label.saving": {
     "message": "Menyimpan..."
   },
diff --git a/apps/frontend/src/locales/it-IT/index.json b/apps/frontend/src/locales/it-IT/index.json
index 34d73900ab..768c0ca916 100644
--- a/apps/frontend/src/locales/it-IT/index.json
+++ b/apps/frontend/src/locales/it-IT/index.json
@@ -3002,9 +3002,6 @@
   "profile.label.collection": {
     "message": "Raccolta"
   },
-  "profile.label.downloads": {
-    "message": "{count} download"
-  },
   "profile.label.joined": {
     "message": "Iscrizione"
   },
@@ -3023,9 +3020,6 @@
   "profile.label.organizations": {
     "message": "Organizzazioni"
   },
-  "profile.label.projects": {
-    "message": "{count} {countPlural, plural, one {progetto} other {progetti}}"
-  },
   "profile.label.saving": {
     "message": "Salvando..."
   },
diff --git a/apps/frontend/src/locales/ja-JP/index.json b/apps/frontend/src/locales/ja-JP/index.json
index 7bcc3f7b10..2a8435bd9e 100644
--- a/apps/frontend/src/locales/ja-JP/index.json
+++ b/apps/frontend/src/locales/ja-JP/index.json
@@ -2528,9 +2528,6 @@
   "profile.label.collection": {
     "message": "コレクション"
   },
-  "profile.label.downloads": {
-    "message": "{count}件のダウンロード"
-  },
   "profile.label.joined": {
     "message": "参加: "
   },
@@ -2549,9 +2546,6 @@
   "profile.label.organizations": {
     "message": "組織"
   },
-  "profile.label.projects": {
-    "message": "{count} {countPlural, plural, one {プロジェクト} other {プロジェクト}}"
-  },
   "profile.label.saving": {
     "message": "保存中…"
   },
diff --git a/apps/frontend/src/locales/ko-KR/index.json b/apps/frontend/src/locales/ko-KR/index.json
index c8ee976fa5..b9debfd3cf 100644
--- a/apps/frontend/src/locales/ko-KR/index.json
+++ b/apps/frontend/src/locales/ko-KR/index.json
@@ -2339,9 +2339,6 @@
   "profile.label.collection": {
     "message": "컬렉션"
   },
-  "profile.label.downloads": {
-    "message": "{count} {countPlural, plural, one {다운로드} other {다운로드}}"
-  },
   "profile.label.joined": {
     "message": "가입"
   },
@@ -2360,9 +2357,6 @@
   "profile.label.organizations": {
     "message": "조직"
   },
-  "profile.label.projects": {
-    "message": "{count} {countPlural, plural, one {프로젝트} other {프로젝트}}"
-  },
   "profile.label.saving": {
     "message": "저장..."
   },
diff --git a/apps/frontend/src/locales/ms-MY/index.json b/apps/frontend/src/locales/ms-MY/index.json
index 251063f253..4ba650c4e5 100644
--- a/apps/frontend/src/locales/ms-MY/index.json
+++ b/apps/frontend/src/locales/ms-MY/index.json
@@ -2711,9 +2711,6 @@
   "profile.label.collection": {
     "message": "Koleksi"
   },
-  "profile.label.downloads": {
-    "message": "{count} {countPlural, plural, other {muat turun}}"
-  },
   "profile.label.joined": {
     "message": "Telah menyertai"
   },
@@ -2732,9 +2729,6 @@
   "profile.label.organizations": {
     "message": "Organisasi"
   },
-  "profile.label.projects": {
-    "message": "{count} {countPlural, plural, other {projek}}"
-  },
   "profile.label.saving": {
     "message": "Sedang menyimpan..."
   },
diff --git a/apps/frontend/src/locales/nl-NL/index.json b/apps/frontend/src/locales/nl-NL/index.json
index a59c7b89c8..35a323435c 100644
--- a/apps/frontend/src/locales/nl-NL/index.json
+++ b/apps/frontend/src/locales/nl-NL/index.json
@@ -2588,9 +2588,6 @@
   "profile.label.collection": {
     "message": "Collectie"
   },
-  "profile.label.downloads": {
-    "message": "{count} {countPlural, plural, one {download} other {downloads}}"
-  },
   "profile.label.joined": {
     "message": "Lid geworden"
   },
@@ -2609,9 +2606,6 @@
   "profile.label.organizations": {
     "message": "Organisaties"
   },
-  "profile.label.projects": {
-    "message": "{count} {countPlural, plural, one {project} other {projecten}}"
-  },
   "profile.label.saving": {
     "message": "Opslaan..."
   },
diff --git a/apps/frontend/src/locales/no-NO/index.json b/apps/frontend/src/locales/no-NO/index.json
index 13a5637f03..5829387426 100644
--- a/apps/frontend/src/locales/no-NO/index.json
+++ b/apps/frontend/src/locales/no-NO/index.json
@@ -2045,9 +2045,6 @@
   "profile.label.collection": {
     "message": "Samling"
   },
-  "profile.label.downloads": {
-    "message": "{count} {countPlural, plural, one {nedlasting} other {nedlastinger}}"
-  },
   "profile.label.joined": {
     "message": "Blei med"
   },
@@ -2066,9 +2063,6 @@
   "profile.label.organizations": {
     "message": "Organisasjoner"
   },
-  "profile.label.projects": {
-    "message": "{count} {countPlural, plural, one {projekt} other {projekt}}"
-  },
   "profile.label.saving": {
     "message": "Lagrer..."
   },
diff --git a/apps/frontend/src/locales/pl-PL/index.json b/apps/frontend/src/locales/pl-PL/index.json
index 0af0770c02..624df1fc2c 100644
--- a/apps/frontend/src/locales/pl-PL/index.json
+++ b/apps/frontend/src/locales/pl-PL/index.json
@@ -3008,9 +3008,6 @@
   "profile.label.collection": {
     "message": "Kolekcja"
   },
-  "profile.label.downloads": {
-    "message": "{count} {countPlural, plural, one {pobranie} few {pobrania} other {pobrań}}"
-  },
   "profile.label.joined": {
     "message": "Dołączył(-a)"
   },
@@ -3029,9 +3026,6 @@
   "profile.label.organizations": {
     "message": "Organizacje"
   },
-  "profile.label.projects": {
-    "message": "{count} {countPlural, plural, one {projekt} few {projekty} other {projektów}}"
-  },
   "profile.label.saving": {
     "message": "Zapisywanie..."
   },
diff --git a/apps/frontend/src/locales/pt-PT/index.json b/apps/frontend/src/locales/pt-PT/index.json
index a0b2b31ff5..35c66b7e8b 100644
--- a/apps/frontend/src/locales/pt-PT/index.json
+++ b/apps/frontend/src/locales/pt-PT/index.json
@@ -2018,9 +2018,6 @@
   "profile.label.collection": {
     "message": "Coleção"
   },
-  "profile.label.downloads": {
-    "message": "{count} {countPlural, plural, one {transferência} other {transferências}}"
-  },
   "profile.label.joined": {
     "message": "Entrou"
   },
@@ -2039,9 +2036,6 @@
   "profile.label.organizations": {
     "message": "Organizações"
   },
-  "profile.label.projects": {
-    "message": "{count} {countPlural, plural,one {projeto} other {projetos}}"
-  },
   "profile.label.saving": {
     "message": "A guardar..."
   },
diff --git a/apps/frontend/src/locales/ru-RU/index.json b/apps/frontend/src/locales/ru-RU/index.json
index f878f76674..9fb138a95b 100644
--- a/apps/frontend/src/locales/ru-RU/index.json
+++ b/apps/frontend/src/locales/ru-RU/index.json
@@ -3005,9 +3005,6 @@
   "profile.label.collection": {
     "message": "Коллекция"
   },
-  "profile.label.downloads": {
-    "message": "{count} {countPlural, plural, one {скачивание} few {скачивания} other {скачиваний}}"
-  },
   "profile.label.joined": {
     "message": "Регистрация:"
   },
@@ -3026,9 +3023,6 @@
   "profile.label.organizations": {
     "message": "Организации"
   },
-  "profile.label.projects": {
-    "message": "{count} {countPlural, plural, one {проект} few {проекта} other {проектов}}"
-  },
   "profile.label.saving": {
     "message": "Сохранение..."
   },
diff --git a/apps/frontend/src/locales/sv-SE/index.json b/apps/frontend/src/locales/sv-SE/index.json
index 8fe38cac45..e9f91e55f9 100644
--- a/apps/frontend/src/locales/sv-SE/index.json
+++ b/apps/frontend/src/locales/sv-SE/index.json
@@ -2603,9 +2603,6 @@
   "profile.label.collection": {
     "message": "Samling"
   },
-  "profile.label.downloads": {
-    "message": "{count} {countPlural, plural, one {nedladdning} other {nedladdningar}}"
-  },
   "profile.label.joined": {
     "message": "Gick med"
   },
diff --git a/apps/frontend/src/locales/tr-TR/index.json b/apps/frontend/src/locales/tr-TR/index.json
index 40168ccde6..47d39f79e9 100644
--- a/apps/frontend/src/locales/tr-TR/index.json
+++ b/apps/frontend/src/locales/tr-TR/index.json
@@ -2951,9 +2951,6 @@
   "profile.label.collection": {
     "message": "Koleksiyon"
   },
-  "profile.label.downloads": {
-    "message": "{count} {countPlural, plural, one {indirme} other {indirmeler}}"
-  },
   "profile.label.joined": {
     "message": "Katılma:"
   },
@@ -2972,9 +2969,6 @@
   "profile.label.organizations": {
     "message": "Organizasyonlar"
   },
-  "profile.label.projects": {
-    "message": "{count} {countPlural, plural, one {proje} other {projeler}}"
-  },
   "profile.label.saving": {
     "message": "Kaydediliyor..."
   },
diff --git a/apps/frontend/src/locales/uk-UA/index.json b/apps/frontend/src/locales/uk-UA/index.json
index c1e88501c9..98bc53a7d3 100644
--- a/apps/frontend/src/locales/uk-UA/index.json
+++ b/apps/frontend/src/locales/uk-UA/index.json
@@ -2645,9 +2645,6 @@
   "profile.label.collection": {
     "message": "Добірка"
   },
-  "profile.label.downloads": {
-    "message": "{count} {countPlural, plural, one {завантаження} few {завантаження} many {завантажень} other {завантажень}}"
-  },
   "profile.label.joined": {
     "message": "Приєднався"
   },
@@ -2666,9 +2663,6 @@
   "profile.label.organizations": {
     "message": "Організації"
   },
-  "profile.label.projects": {
-    "message": "{count} {countPlural, plural, one {проєкт} few {проєкти} many {проєктів} other {проєктів}}"
-  },
   "profile.label.saving": {
     "message": "Збереження…"
   },
diff --git a/apps/frontend/src/locales/vi-VN/index.json b/apps/frontend/src/locales/vi-VN/index.json
index 1f8509c7b1..252f811be0 100644
--- a/apps/frontend/src/locales/vi-VN/index.json
+++ b/apps/frontend/src/locales/vi-VN/index.json
@@ -2855,9 +2855,6 @@
   "profile.label.collection": {
     "message": "Bộ sưu tập"
   },
-  "profile.label.downloads": {
-    "message": "{count} {countPlural, plural, one {lượt tải xuống} other {lượt tải xuống}}"
-  },
   "profile.label.joined": {
     "message": "Đã tham gia"
   },
@@ -2876,9 +2873,6 @@
   "profile.label.organizations": {
     "message": "Tổ chức"
   },
-  "profile.label.projects": {
-    "message": "{count} {countPlural, plural, one {dự án} other {dự án}}"
-  },
   "profile.label.saving": {
     "message": "Đang lưu..."
   },
diff --git a/apps/frontend/src/locales/zh-CN/index.json b/apps/frontend/src/locales/zh-CN/index.json
index 658b82c717..8dbc507c01 100644
--- a/apps/frontend/src/locales/zh-CN/index.json
+++ b/apps/frontend/src/locales/zh-CN/index.json
@@ -3005,9 +3005,6 @@
   "profile.label.collection": {
     "message": "收藏夹"
   },
-  "profile.label.downloads": {
-    "message": "{count} {countPlural, plural, other {次下载}}"
-  },
   "profile.label.joined": {
     "message": "加入于"
   },
@@ -3026,9 +3023,6 @@
   "profile.label.organizations": {
     "message": "组织"
   },
-  "profile.label.projects": {
-    "message": "{count} {countPlural, plural, other {个项目}}"
-  },
   "profile.label.saving": {
     "message": "正在保存…"
   },
diff --git a/apps/frontend/src/locales/zh-TW/index.json b/apps/frontend/src/locales/zh-TW/index.json
index 41986af4f0..1469edcdbf 100644
--- a/apps/frontend/src/locales/zh-TW/index.json
+++ b/apps/frontend/src/locales/zh-TW/index.json
@@ -3011,9 +3011,6 @@
   "profile.label.collection": {
     "message": "收藏"
   },
-  "profile.label.downloads": {
-    "message": "下載次數：{count}"
-  },
   "profile.label.joined": {
     "message": "加入時間："
   },
@@ -3032,9 +3029,6 @@
   "profile.label.organizations": {
     "message": "組織"
   },
-  "profile.label.projects": {
-    "message": "{count} 個{countPlural, plural, other {專案}}"
-  },
   "profile.label.saving": {
     "message": "儲存中..."
   },
diff --git a/apps/frontend/src/pages/[type]/[project].vue b/apps/frontend/src/pages/[type]/[project].vue
index 9d856aef12..845391bb15 100644
--- a/apps/frontend/src/pages/[type]/[project].vue
+++ b/apps/frontend/src/pages/[type]/[project].vue
@@ -448,8 +448,8 @@ import ModerationChecklist from '~/components/ui/moderation/checklist/Moderation
 import ModerationProjectNags from '~/components/ui/moderation/ModerationProjectNags.vue'
 import ModpackScanModal from '~/components/ui/moderation/ModpackScanModal.vue'
 import ProjectDownloadModal from '~/components/ui/ProjectDownloadModal/index.vue'
-import ProjectPageHeader from '~/components/ui/ProjectPageHeader.vue'
 import ProjectMemberHeader from '~/components/ui/ProjectMemberHeader.vue'
+import ProjectPageHeader from '~/components/ui/ProjectPageHeader.vue'
 import { getSignInRouteObj } from '~/composables/auth.ts'
 import { saveFeatureFlags } from '~/composables/featureFlags.ts'
 import { STALE_TIME, STALE_TIME_LONG } from '~/composables/queries/project'

From 505e6109fc22a21b477d84fc979ca8781ed13479 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Mon, 6 Jul 2026 21:48:26 +0100
Subject: [PATCH 10/12] fix: dedupe

---
 .../src/components/ui/ProjectPageHeader.vue   | 284 -----------
 apps/app-frontend/src/pages/project/Index.vue | 179 ++++++-
 .../src/components/ui/ProjectPageHeader.vue   | 474 ------------------
 apps/frontend/src/locales/cs-CZ/index.json    |   6 -
 apps/frontend/src/locales/de-CH/index.json    |   6 -
 apps/frontend/src/locales/de-DE/index.json    |   6 -
 apps/frontend/src/locales/en-US/index.json    |   6 -
 apps/frontend/src/locales/es-419/index.json   |   6 -
 apps/frontend/src/locales/es-ES/index.json    |   6 -
 apps/frontend/src/locales/fr-FR/index.json    |   6 -
 apps/frontend/src/locales/hu-HU/index.json    |   3 -
 apps/frontend/src/locales/it-IT/index.json    |   6 -
 apps/frontend/src/locales/ms-MY/index.json    |   3 -
 apps/frontend/src/locales/pl-PL/index.json    |   6 -
 apps/frontend/src/locales/pt-BR/index.json    |   6 -
 apps/frontend/src/locales/ru-RU/index.json    |   6 -
 apps/frontend/src/locales/tr-TR/index.json    |   6 -
 apps/frontend/src/locales/vi-VN/index.json    |   6 -
 apps/frontend/src/locales/zh-CN/index.json    |   6 -
 apps/frontend/src/locales/zh-TW/index.json    |   6 -
 apps/frontend/src/pages/[type]/[project].vue  | 388 ++++++++++++--
 .../src/components/base/page-header/index.vue |   2 +-
 .../base/page-header/metadata/index.vue       |  83 ++-
 .../components/project/ProjectPageHeader.vue  | 118 +++++
 packages/ui/src/components/project/index.ts   |   1 +
 packages/ui/src/locales/en-US/index.json      |   6 +
 26 files changed, 728 insertions(+), 903 deletions(-)
 delete mode 100644 apps/app-frontend/src/components/ui/ProjectPageHeader.vue
 delete mode 100644 apps/frontend/src/components/ui/ProjectPageHeader.vue
 create mode 100644 packages/ui/src/components/project/ProjectPageHeader.vue

diff --git a/apps/app-frontend/src/components/ui/ProjectPageHeader.vue b/apps/app-frontend/src/components/ui/ProjectPageHeader.vue
deleted file mode 100644
index d30dfc1c69..0000000000
--- a/apps/app-frontend/src/components/ui/ProjectPageHeader.vue
+++ /dev/null
@@ -1,284 +0,0 @@
-<template>
-	<PageHeader
-		:title="project.title"
-		:summary="project.description"
-		@contextmenu.prevent.stop="emit('contextmenu', $event)"
-	>
-		<template #leading>
-			<Avatar :src="project.icon_url" :alt="project.title" :tint-by="project.id" size="96px" />
-		</template>
-
-		<template v-if="project.status !== 'approved'" #badges>
-			<ProjectStatusBadge :status="project.status" />
-		</template>
-
-		<template #metadata>
-			<PageHeaderMetadata>
-				<template v-if="isServerProject">
-					<ServerDetails
-						v-if="projectV3?.status !== 'draft'"
-						:online-players="projectV3?.minecraft_java_server?.ping?.data?.players_online ?? 0"
-						:status-online="!!projectV3?.minecraft_java_server?.ping?.data"
-						:recent-plays="projectV3?.minecraft_java_server?.verified_plays_2w ?? 0"
-					/>
-				</template>
-				<template v-else>
-					<PageHeaderMetadataNumberItem
-						:icon="DownloadIcon"
-						:value="project.downloads"
-						label="downloads"
-						:tooltip="formatNumber(project.downloads)"
-						class="cursor-help"
-					/>
-					<PageHeaderMetadataNumberItem
-						:icon="HeartIcon"
-						:value="project.followers"
-						label="followers"
-						:tooltip="formatNumber(project.followers)"
-						class="cursor-help"
-					/>
-				</template>
-				<PageHeaderMetadataTagsItem v-if="project.categories.length > 0" class="hidden md:flex">
-					<TagItem
-						v-for="category in project.categories"
-						:key="category"
-						:action="() => emit('category', category)"
-					>
-						<FormattedTag :tag="category" />
-					</TagItem>
-				</PageHeaderMetadataTagsItem>
-			</PageHeaderMetadata>
-		</template>
-
-		<template #actions>
-			<PageHeaderActions>
-				<template v-if="isServerProject">
-					<ButtonStyled :color="serverPlaying ? 'red' : 'brand'" size="large">
-						<button
-							type="button"
-							:disabled="serverInstallLoading"
-							@click="serverPlaying ? emit('stopServer') : emit('playServer')"
-						>
-							<StopCircleIcon v-if="serverPlaying" />
-							<PlayIcon v-else />
-							{{
-								serverPlaying
-									? formatMessage(commonMessages.stopButton)
-									: serverInstallLoading
-										? formatMessage(commonMessages.installingLabel)
-										: formatMessage(commonMessages.playButton)
-							}}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled circular size="large">
-						<button
-							v-tooltip="formatMessage(commonMessages.addServerToInstanceButton)"
-							type="button"
-							:aria-label="formatMessage(commonMessages.addServerToInstanceButton)"
-							@click="emit('addServerToInstance')"
-						>
-							<PlusIcon />
-						</button>
-					</ButtonStyled>
-					<ButtonStyled circular size="large" type="transparent">
-						<TeleportOverflowMenu
-							:options="serverMoreActions"
-							tooltip="More options"
-							aria-label="More options"
-						>
-							<MoreVerticalIcon />
-						</TeleportOverflowMenu>
-					</ButtonStyled>
-				</template>
-				<template v-else>
-					<ButtonStyled color="brand" size="large">
-						<button
-							v-tooltip="
-								installButtonInstalled ? formatMessage(messages.alreadyInstalled) : undefined
-							"
-							type="button"
-							:disabled="installButtonDisabled"
-							@click="emit('install')"
-						>
-							<component :is="installButtonIcon" :class="installButtonIconClass" />
-							{{
-								installButtonInstalled
-									? formatMessage(commonMessages.installedLabel)
-									: installButtonValidating
-										? formatMessage(commonMessages.validatingLabel)
-										: installButtonLoading
-											? formatMessage(commonMessages.installingLabel)
-											: serverProjectSelected
-												? formatMessage(commonMessages.selectedLabel)
-												: formatMessage(commonMessages.installButton)
-							}}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled circular size="large" type="transparent">
-						<TeleportOverflowMenu
-							:options="projectMoreActions"
-							tooltip="More options"
-							aria-label="More options"
-						>
-							<MoreVerticalIcon />
-						</TeleportOverflowMenu>
-					</ButtonStyled>
-				</template>
-			</PageHeaderActions>
-		</template>
-	</PageHeader>
-</template>
-
-<script setup lang="ts">
-import type { Labrinth } from '@modrinth/api-client'
-import {
-	BookmarkIcon,
-	CheckIcon,
-	DownloadIcon,
-	ExternalIcon,
-	HeartIcon,
-	MoreVerticalIcon,
-	PlayIcon,
-	PlusIcon,
-	ReportIcon,
-	SpinnerIcon,
-	StopCircleIcon,
-} from '@modrinth/assets'
-import {
-	Avatar,
-	ButtonStyled,
-	commonMessages,
-	defineMessages,
-	FormattedTag,
-	PageHeader,
-	PageHeaderActions,
-	PageHeaderMetadata,
-	PageHeaderMetadataNumberItem,
-	PageHeaderMetadataTagsItem,
-	ProjectStatusBadge,
-	ServerDetails,
-	TagItem,
-	TeleportOverflowMenu,
-	type TeleportOverflowMenuItem,
-	useFormatNumber,
-	useVIntl,
-} from '@modrinth/ui'
-import { computed } from 'vue'
-
-type HeaderProject = Pick<
-	Labrinth.Projects.v2.Project,
-	'id' | 'title' | 'description' | 'status' | 'downloads' | 'followers' | 'categories'
-> & {
-	icon_url?: string | null
-}
-
-type HeaderProjectV3 = Pick<Labrinth.Projects.v3.Project, 'status' | 'minecraft_java_server'>
-
-const props = withDefaults(
-	defineProps<{
-		project: HeaderProject
-		projectV3?: HeaderProjectV3 | null
-		isServerProject?: boolean
-		installButtonDisabled?: boolean
-		installButtonValidating?: boolean
-		installButtonLoading?: boolean
-		installButtonInstalled?: boolean
-		serverProjectSelected?: boolean
-		serverPlaying?: boolean
-		serverInstallLoading?: boolean
-	}>(),
-	{
-		projectV3: null,
-		isServerProject: false,
-		installButtonDisabled: false,
-		installButtonValidating: false,
-		installButtonLoading: false,
-		installButtonInstalled: false,
-		serverProjectSelected: false,
-		serverPlaying: false,
-		serverInstallLoading: false,
-	},
-)
-
-const emit = defineEmits<{
-	contextmenu: [event: MouseEvent]
-	category: [category: string]
-	install: []
-	playServer: []
-	stopServer: []
-	addServerToInstance: []
-	openBrowser: []
-	report: []
-}>()
-
-const messages = defineMessages({
-	alreadyInstalled: {
-		id: 'app.project.install-button.already-installed',
-		defaultMessage: 'This project is already installed',
-	},
-})
-
-const { formatMessage } = useVIntl()
-const formatNumber = useFormatNumber()
-
-const installButtonIcon = computed(() => {
-	if (props.installButtonLoading && !props.installButtonInstalled) return SpinnerIcon
-	if (!props.installButtonInstalled && !props.serverProjectSelected) return DownloadIcon
-	return CheckIcon
-})
-const installButtonIconClass = computed(() =>
-	props.installButtonLoading && !props.installButtonInstalled ? 'animate-spin' : undefined,
-)
-const serverMoreActions = computed<TeleportOverflowMenuItem[]>(() => [
-	{
-		id: 'open-in-browser',
-		label: formatMessage(commonMessages.openInModrinthButton),
-		icon: ExternalIcon,
-		action: () => emit('openBrowser'),
-	},
-	{
-		divider: true,
-	},
-	{
-		id: 'report',
-		label: formatMessage(commonMessages.reportButton),
-		icon: ReportIcon,
-		color: 'red',
-		action: () => emit('report'),
-	},
-])
-const projectMoreActions = computed<TeleportOverflowMenuItem[]>(() => [
-	{
-		id: 'follow',
-		label: formatMessage(commonMessages.followButton),
-		icon: HeartIcon,
-		disabled: true,
-		tooltip: 'Coming soon',
-		action: () => {},
-	},
-	{
-		id: 'save',
-		label: formatMessage(commonMessages.saveButton),
-		icon: BookmarkIcon,
-		disabled: true,
-		tooltip: 'Coming soon',
-		action: () => {},
-	},
-	{
-		id: 'open-in-browser',
-		label: formatMessage(commonMessages.openInModrinthButton),
-		icon: ExternalIcon,
-		action: () => emit('openBrowser'),
-	},
-	{
-		divider: true,
-	},
-	{
-		id: 'report',
-		label: formatMessage(commonMessages.reportButton),
-		icon: ReportIcon,
-		color: 'red',
-		action: () => emit('report'),
-	},
-])
-</script>
diff --git a/apps/app-frontend/src/pages/project/Index.vue b/apps/app-frontend/src/pages/project/Index.vue
index 7f542c897c..ec4a3afd9b 100644
--- a/apps/app-frontend/src/pages/project/Index.vue
+++ b/apps/app-frontend/src/pages/project/Index.vue
@@ -64,22 +64,84 @@
 					:project="data"
 					:project-v3="projectV3"
 					:is-server-project="isServerProject"
-					:install-button-disabled="installButtonDisabled"
-					:install-button-validating="installButtonValidating"
-					:install-button-loading="installButtonLoading"
-					:install-button-installed="installButtonInstalled"
-					:server-project-selected="serverProjectSelected"
-					:server-playing="serverPlaying"
-					:server-install-loading="!!(data && installingServerProjects.includes(data.id))"
-					@contextmenu="handleRightClick"
+					:show-status-badge="data.status !== 'approved'"
+					@contextmenu.prevent.stop="handleRightClick"
 					@category="(category) => router.push(`${projectSearchUrl}?f=categories:${category}`)"
-					@install="() => install(null)"
-					@play-server="handleClickPlay"
-					@stop-server="handleStopServer"
-					@add-server-to-instance="handleAddServerToInstance"
-					@open-browser="openProjectInBrowser"
-					@report="reportProject"
-				/>
+				>
+					<template #actions>
+						<template v-if="isServerProject">
+							<ButtonStyled v-if="serverPlaying" color="red" size="large">
+								<button type="button" @click="handleStopServer">
+									<StopCircleIcon />
+									{{ formatMessage(commonMessages.stopButton) }}
+								</button>
+							</ButtonStyled>
+							<ButtonStyled v-else color="brand" size="large">
+								<button type="button" :disabled="serverInstallLoading" @click="handleClickPlay">
+									<PlayIcon />
+									{{
+										serverInstallLoading
+											? formatMessage(commonMessages.installingLabel)
+											: formatMessage(commonMessages.playButton)
+									}}
+								</button>
+							</ButtonStyled>
+							<ButtonStyled circular size="large">
+								<button
+									v-tooltip="formatMessage(commonMessages.addServerToInstanceButton)"
+									type="button"
+									:aria-label="formatMessage(commonMessages.addServerToInstanceButton)"
+									@click="handleAddServerToInstance"
+								>
+									<PlusIcon />
+								</button>
+							</ButtonStyled>
+							<ButtonStyled circular size="large" type="transparent">
+								<TeleportOverflowMenu
+									:options="serverProjectHeaderMoreActions"
+									tooltip="More options"
+									aria-label="More options"
+								>
+									<MoreVerticalIcon />
+								</TeleportOverflowMenu>
+							</ButtonStyled>
+						</template>
+						<template v-else>
+							<ButtonStyled color="brand" size="large">
+								<button
+									v-tooltip="
+										installButtonInstalled ? formatMessage(messages.alreadyInstalled) : undefined
+									"
+									type="button"
+									:disabled="installButtonDisabled"
+									@click="install(null)"
+								>
+									<component :is="installButtonIcon" :class="installButtonIconClass" />
+									{{
+										installButtonInstalled
+											? formatMessage(commonMessages.installedLabel)
+											: installButtonValidating
+												? formatMessage(commonMessages.validatingLabel)
+												: installButtonLoading
+													? formatMessage(commonMessages.installingLabel)
+													: serverProjectSelected
+														? formatMessage(commonMessages.selectedLabel)
+														: formatMessage(commonMessages.installButton)
+									}}
+								</button>
+							</ButtonStyled>
+							<ButtonStyled circular size="large" type="transparent">
+								<TeleportOverflowMenu
+									:options="projectHeaderMoreActions"
+									tooltip="More options"
+									aria-label="More options"
+								>
+									<MoreVerticalIcon />
+								</TeleportOverflowMenu>
+							</ButtonStyled>
+						</template>
+					</template>
+				</ProjectPageHeader>
 				<NavTabs
 					:links="[
 						{
@@ -150,9 +212,24 @@
 </template>
 
 <script setup>
-import { ClipboardCopyIcon, DownloadIcon, ExternalIcon, GlobeIcon } from '@modrinth/assets'
+import {
+	BookmarkIcon,
+	CheckIcon,
+	ClipboardCopyIcon,
+	DownloadIcon,
+	ExternalIcon,
+	GlobeIcon,
+	HeartIcon,
+	MoreVerticalIcon,
+	PlayIcon,
+	PlusIcon,
+	ReportIcon,
+	SpinnerIcon,
+	StopCircleIcon,
+} from '@modrinth/assets'
 import {
 	BrowseInstallHeader,
+	ButtonStyled,
 	commonMessages,
 	CreationFlowModal,
 	defineMessages,
@@ -160,6 +237,7 @@ import {
 	injectNotificationManager,
 	NavTabs,
 	ProjectBackgroundGradient,
+	ProjectPageHeader,
 	ProjectSidebarCompatibility,
 	ProjectSidebarCreators,
 	ProjectSidebarDetails,
@@ -168,6 +246,7 @@ import {
 	ProjectSidebarTags,
 	requestInstall,
 	SelectedProjectsFloatingBar,
+	TeleportOverflowMenu,
 	useVIntl,
 } from '@modrinth/ui'
 import { useQueryClient } from '@tanstack/vue-query'
@@ -180,7 +259,6 @@ import { useRoute, useRouter } from 'vue-router'
 
 import ContextMenu from '@/components/ui/ContextMenu.vue'
 import InstanceIndicator from '@/components/ui/InstanceIndicator.vue'
-import ProjectPageHeader from '@/components/ui/ProjectPageHeader.vue'
 import {
 	fetchCachedServerStatus,
 	getFreshCachedServerStatus,
@@ -226,6 +304,10 @@ const messages = defineMessages({
 		id: 'app.project.install-context.back-to-browse',
 		defaultMessage: 'Back to discover',
 	},
+	alreadyInstalled: {
+		id: 'app.project.install-button.already-installed',
+		defaultMessage: 'This project is already installed',
+	},
 	installContentToInstance: {
 		id: 'app.project.install-context.install-content-to-instance',
 		defaultMessage: 'Install content to instance',
@@ -389,6 +471,69 @@ const installButtonInstalled = computed(() =>
 const installButtonDisabled = computed(
 	() => installButtonInstalled.value || installButtonLoading.value,
 )
+const serverInstallLoading = computed(
+	() => !!data.value && installingServerProjects.value.includes(data.value.id),
+)
+const installButtonIcon = computed(() => {
+	if (installButtonLoading.value && !installButtonInstalled.value) return SpinnerIcon
+	if (!installButtonInstalled.value && !serverProjectSelected.value) return DownloadIcon
+	return CheckIcon
+})
+const installButtonIconClass = computed(() =>
+	installButtonLoading.value && !installButtonInstalled.value ? 'animate-spin' : undefined,
+)
+const serverProjectHeaderMoreActions = computed(() => [
+	{
+		id: 'open-in-browser',
+		label: formatMessage(commonMessages.openInModrinthButton),
+		icon: ExternalIcon,
+		action: openProjectInBrowser,
+	},
+	{
+		divider: true,
+	},
+	{
+		id: 'report',
+		label: formatMessage(commonMessages.reportButton),
+		icon: ReportIcon,
+		color: 'red',
+		action: reportProject,
+	},
+])
+const projectHeaderMoreActions = computed(() => [
+	{
+		id: 'follow',
+		label: formatMessage(commonMessages.followButton),
+		icon: HeartIcon,
+		disabled: true,
+		tooltip: 'Coming soon',
+		action: () => {},
+	},
+	{
+		id: 'save',
+		label: formatMessage(commonMessages.saveButton),
+		icon: BookmarkIcon,
+		disabled: true,
+		tooltip: 'Coming soon',
+		action: () => {},
+	},
+	{
+		id: 'open-in-browser',
+		label: formatMessage(commonMessages.openInModrinthButton),
+		icon: ExternalIcon,
+		action: openProjectInBrowser,
+	},
+	{
+		divider: true,
+	},
+	{
+		id: 'report',
+		label: formatMessage(commonMessages.reportButton),
+		icon: ReportIcon,
+		color: 'red',
+		action: reportProject,
+	},
+])
 const projectSearchUrl = computed(
 	() => `/browse/${isServerProject.value ? 'server' : data.value?.project_type}`,
 )
diff --git a/apps/frontend/src/components/ui/ProjectPageHeader.vue b/apps/frontend/src/components/ui/ProjectPageHeader.vue
deleted file mode 100644
index ae7b6f1029..0000000000
--- a/apps/frontend/src/components/ui/ProjectPageHeader.vue
+++ /dev/null
@@ -1,474 +0,0 @@
-<template>
-	<PageHeader :title="project.title" :summary="project.description">
-		<template #leading>
-			<Avatar :src="project.icon_url" :alt="project.title" :tint-by="project.id" size="96px" />
-		</template>
-
-		<template v-if="showStatusBadge" #badges>
-			<ProjectStatusBadge :status="project.status" />
-		</template>
-
-		<template #metadata>
-			<PageHeaderMetadata>
-				<template v-if="isServerProject">
-					<ServerDetails
-						v-if="projectV3?.status !== 'draft'"
-						:online-players="projectV3?.minecraft_java_server?.ping?.data?.players_online ?? 0"
-						:status-online="!!projectV3?.minecraft_java_server?.ping?.data"
-						:recent-plays="projectV3?.minecraft_java_server?.verified_plays_2w ?? 0"
-					/>
-				</template>
-				<template v-else>
-					<PageHeaderMetadataNumberItem
-						:icon="DownloadIcon"
-						:value="project.downloads"
-						:label="formatMessage(messages.downloadsStat, { count: project.downloads })"
-						:tooltip="formatNumber(project.downloads)"
-						class="cursor-help"
-					/>
-					<PageHeaderMetadataNumberItem
-						:icon="HeartIcon"
-						:value="project.followers"
-						:label="formatMessage(messages.followersStat, { count: project.followers })"
-						:tooltip="formatNumber(project.followers)"
-						class="cursor-help"
-					/>
-				</template>
-				<PageHeaderMetadataTagsItem v-if="project.categories.length > 0" class="hidden md:flex">
-					<TagItem
-						v-for="category in project.categories"
-						:key="category"
-						:action="() => emit('category', category)"
-					>
-						<FormattedTag :tag="category" />
-					</TagItem>
-				</PageHeaderMetadataTagsItem>
-			</PageHeaderMetadata>
-		</template>
-
-		<template #actions>
-			<PageHeaderActions>
-				<ButtonStyled v-if="showEditProject" color="brand" size="large">
-					<nuxt-link :to="`${projectPath}/settings`">
-						<SettingsIcon />
-						{{ formatMessage(messages.editProject) }}
-					</nuxt-link>
-				</ButtonStyled>
-
-				<ButtonStyled :color="primaryColor" :circular="primaryLabelHidden" size="large">
-					<button
-						v-tooltip="
-							primaryLabelHidden
-								? isServerProject
-									? formatMessage(commonMessages.playButton)
-									: formatMessage(commonMessages.downloadButton)
-								: undefined
-						"
-						type="button"
-						:aria-label="
-							isServerProject
-								? formatMessage(commonMessages.playButton)
-								: formatMessage(commonMessages.downloadButton)
-						"
-						@click="emit('primary', $event)"
-					>
-						<PlayIcon v-if="isServerProject" />
-						<DownloadIcon v-else />
-						<span v-if="!primaryLabelHidden">
-							{{
-								isServerProject
-									? formatMessage(commonMessages.playButton)
-									: formatMessage(commonMessages.downloadButton)
-							}}
-						</span>
-					</button>
-				</ButtonStyled>
-
-				<Tooltip
-					v-if="showCreateServerAction && showCreateServerPrompt"
-					theme="dismissable-prompt"
-					class="inline-flex"
-					:triggers="[]"
-					:shown="showCreateServerPrompt"
-					:auto-hide="false"
-					placement="bottom-start"
-				>
-					<ButtonStyled circular size="large">
-						<nuxt-link
-							v-tooltip="formatMessage(messages.createServerTooltip)"
-							:to="createServerTo"
-							:aria-label="formatMessage(messages.serversPromoTitle)"
-							@click="emit('createServer')"
-						>
-							<ServerPlusIcon />
-						</nuxt-link>
-					</ButtonStyled>
-					<template #popper>
-						<div class="grid max-w-[18rem] gap-2">
-							<div class="flex items-center justify-between gap-4">
-								<div class="flex items-center gap-2">
-									<h3 class="m-0 text-base font-bold text-contrast">
-										{{ formatMessage(messages.serversPromoTitle) }}
-									</h3>
-									<span
-										class="rounded-full bg-brand-highlight px-2 py-0.5 text-xs font-bold text-brand"
-									>
-										{{ formatMessage(commonMessages.newBadge) }}
-									</span>
-								</div>
-								<ButtonStyled size="small" circular>
-									<button
-										v-tooltip="formatMessage(messages.dontShowAgain)"
-										@click="emit('dismissCreateServer')"
-									>
-										<XIcon aria-hidden="true" />
-									</button>
-								</ButtonStyled>
-							</div>
-							<p class="m-0 text-sm font-medium leading-tight text-secondary">
-								{{ formatMessage(messages.serversPromoDescription) }}
-							</p>
-							<p class="m-0 text-sm font-semibold text-contrast">
-								<IntlFormatted
-									:message-id="messages.serversPromoPricing"
-									:values="{ price: formatPrice(500, 'USD', true) }"
-								>
-									<template #small="{ children }">
-										<small><component :is="() => children" /></small>
-									</template>
-								</IntlFormatted>
-							</p>
-						</div>
-					</template>
-				</Tooltip>
-				<ButtonStyled v-else-if="showCreateServerAction" circular size="large">
-					<nuxt-link
-						v-tooltip="formatMessage(messages.createServerTooltip)"
-						:to="createServerTo"
-						:aria-label="formatMessage(messages.serversPromoTitle)"
-						@click="emit('createServer')"
-					>
-						<ServerPlusIcon />
-					</nuxt-link>
-				</ButtonStyled>
-
-				<ButtonStyled circular size="large">
-					<button
-						v-if="authUser"
-						v-tooltip="
-							following
-								? formatMessage(commonMessages.unfollowButton)
-								: formatMessage(commonMessages.followButton)
-						"
-						type="button"
-						:aria-label="
-							following
-								? formatMessage(commonMessages.unfollowButton)
-								: formatMessage(commonMessages.followButton)
-						"
-						@click="emit('follow')"
-					>
-						<HeartIcon :fill="following ? 'currentColor' : 'none'" />
-					</button>
-					<nuxt-link
-						v-else
-						v-tooltip="
-							following
-								? formatMessage(commonMessages.unfollowButton)
-								: formatMessage(commonMessages.followButton)
-						"
-						:to="signInRoute"
-						:aria-label="
-							following
-								? formatMessage(commonMessages.unfollowButton)
-								: formatMessage(commonMessages.followButton)
-						"
-					>
-						<HeartIcon :fill="following ? 'currentColor' : 'none'" />
-					</nuxt-link>
-				</ButtonStyled>
-
-				<ProjectCollectionSaveButton
-					:auth-user="authUser"
-					:sign-in-route="signInRoute"
-					:project-id="project.id"
-					:collections="collections"
-					:saved="saved"
-					:base-id="baseId"
-					:no-collections-label="formatMessage(messages.noCollectionsFound)"
-					:create-new-collection-label="formatMessage(messages.createNewCollection)"
-					:collect-project="collectProject"
-					:create-collection="createCollection"
-				/>
-
-				<ButtonStyled circular size="large" type="transparent">
-					<TeleportOverflowMenu
-						:options="moreActions"
-						:tooltip="formatMessage(commonMessages.moreOptionsButton)"
-						:aria-label="formatMessage(commonMessages.moreOptionsButton)"
-					>
-						<MoreVerticalIcon />
-					</TeleportOverflowMenu>
-				</ButtonStyled>
-			</PageHeaderActions>
-		</template>
-	</PageHeader>
-</template>
-
-<script setup lang="ts">
-import type { Labrinth } from '@modrinth/api-client'
-import {
-	ChartIcon,
-	ClipboardCopyIcon,
-	DownloadIcon,
-	FolderSearchIcon,
-	HeartIcon,
-	MoreVerticalIcon,
-	PlayIcon,
-	ReportIcon,
-	ScaleIcon,
-	ScanEyeIcon,
-	ServerPlusIcon,
-	SettingsIcon,
-	XIcon,
-} from '@modrinth/assets'
-import {
-	Avatar,
-	ButtonStyled,
-	commonMessages,
-	defineMessages,
-	FormattedTag,
-	IntlFormatted,
-	PageHeader,
-	PageHeaderActions,
-	PageHeaderMetadata,
-	PageHeaderMetadataNumberItem,
-	PageHeaderMetadataTagsItem,
-	ProjectStatusBadge,
-	ServerDetails,
-	TagItem,
-	TeleportOverflowMenu,
-	type TeleportOverflowMenuItem,
-	useFormatNumber,
-	useFormatPrice,
-	useVIntl,
-} from '@modrinth/ui'
-import { Tooltip } from 'floating-vue'
-import { computed } from 'vue'
-
-import ProjectCollectionSaveButton from '~/components/ui/ProjectCollectionSaveButton.vue'
-
-type HeaderProject = Pick<
-	Labrinth.Projects.v2.Project,
-	| 'id'
-	| 'slug'
-	| 'project_type'
-	| 'title'
-	| 'description'
-	| 'status'
-	| 'downloads'
-	| 'followers'
-	| 'categories'
-> & {
-	icon_url?: string | null
-}
-
-type HeaderProjectV3 = Pick<Labrinth.Projects.v3.Project, 'status' | 'minecraft_java_server'>
-
-type HeaderCollection = {
-	projects: string[]
-	[key: string]: unknown
-}
-
-type SignInRoute = string | Record<string, unknown>
-
-const props = withDefaults(
-	defineProps<{
-		project: HeaderProject
-		projectV3?: HeaderProjectV3 | null
-		authUser?: Labrinth.Users.v3.User | null
-		signInRoute: SignInRoute
-		collections?: HeaderCollection[]
-		baseId: string
-		collectProject: (...args: unknown[]) => unknown
-		createCollection: (...args: unknown[]) => unknown
-		isServerProject?: boolean
-		showStatusBadge?: boolean
-		showEditProject?: boolean
-		primaryMuted?: boolean
-		primaryLabelHidden?: boolean
-		canCreateServer?: boolean
-		showQuickServerButton?: boolean
-		showCreateServerPrompt?: boolean
-		following?: boolean
-		saved?: boolean
-		isMember?: boolean
-		isStaff?: boolean
-		showModerationChecklist?: boolean
-		showModerationModpackRescan?: boolean
-	}>(),
-	{
-		projectV3: null,
-		authUser: null,
-		collections: () => [],
-		isServerProject: false,
-		showStatusBadge: false,
-		showEditProject: false,
-		primaryMuted: false,
-		primaryLabelHidden: false,
-		canCreateServer: false,
-		showQuickServerButton: false,
-		showCreateServerPrompt: false,
-		following: false,
-		saved: false,
-		isMember: false,
-		isStaff: false,
-		showModerationChecklist: false,
-		showModerationModpackRescan: false,
-	},
-)
-
-const emit = defineEmits<{
-	category: [category: string]
-	primary: [event: MouseEvent]
-	createServer: []
-	dismissCreateServer: []
-	follow: []
-	analytics: []
-	moderationChecklist: []
-	moderationModpackRescan: []
-	techReview: []
-	report: []
-	copyId: []
-	copyPermalink: []
-}>()
-
-const messages = defineMessages({
-	createServerTooltip: {
-		id: 'project.actions.create-server-tooltip',
-		defaultMessage: 'Create a server',
-	},
-	createNewCollection: {
-		id: 'project.collections.create-new',
-		defaultMessage: 'Create new collection',
-	},
-	dontShowAgain: {
-		id: 'project.actions.dont-show-again',
-		defaultMessage: "Don't show again",
-	},
-	downloadsStat: {
-		id: 'project.stats.downloads-label',
-		defaultMessage: '{count, plural, one {download} other {downloads}}',
-	},
-	editProject: {
-		id: 'project.actions.edit-project',
-		defaultMessage: 'Edit project',
-	},
-	followersStat: {
-		id: 'project.stats.followers-label',
-		defaultMessage: '{count, plural, one {follower} other {followers}}',
-	},
-	noCollectionsFound: {
-		id: 'project.collections.none-found',
-		defaultMessage: 'No collections found.',
-	},
-	reviewProject: {
-		id: 'project.actions.review-project',
-		defaultMessage: 'Review project',
-	},
-	rescanModpack: {
-		id: 'project.actions.rescan-modpack',
-		defaultMessage: 'Rescan modpack',
-	},
-	serversPromoDescription: {
-		id: 'project.actions.servers-promo.description',
-		defaultMessage: 'Modrinth Hosting is the easiest way to play with your friends without hassle!',
-	},
-	serversPromoPricing: {
-		id: 'project.actions.servers-promo.pricing',
-		defaultMessage: 'Starting at {price}<small> / month</small>',
-	},
-	serversPromoTitle: {
-		id: 'project.actions.servers-promo.title',
-		defaultMessage: 'Create a server',
-	},
-})
-
-const { formatMessage } = useVIntl()
-const formatNumber = useFormatNumber()
-const formatPrice = useFormatPrice()
-
-const projectPath = computed(
-	() =>
-		`/${props.project.project_type}/${props.project.slug ? props.project.slug : props.project.id}`,
-)
-const primaryColor = computed(() => (props.primaryMuted ? 'standard' : 'brand'))
-const showCreateServerAction = computed(() => props.canCreateServer && props.showQuickServerButton)
-const createServerTo = computed(() => `/hosting?project=${props.project.id}#plan`)
-
-const moreActions = computed<TeleportOverflowMenuItem[]>(() => [
-	{
-		id: 'analytics',
-		label: formatMessage(commonMessages.analyticsButton),
-		icon: ChartIcon,
-		link: `${projectPath.value}/settings/analytics`,
-		shown: !!props.authUser && props.showEditProject,
-	},
-	{
-		divider: true,
-		shown: !!props.authUser && props.showEditProject,
-	},
-	{
-		id: 'moderation-checklist',
-		label: formatMessage(messages.reviewProject),
-		icon: ScaleIcon,
-		action: () => emit('moderationChecklist'),
-		color: 'orange',
-		shown: !!props.authUser && props.isStaff && !props.showModerationChecklist,
-	},
-	{
-		divider: true,
-		shown: !!props.authUser && props.isStaff && !props.showModerationChecklist,
-	},
-	{
-		id: 'tech-review',
-		label: 'Tech review',
-		icon: ScanEyeIcon,
-		link: `/moderation/technical-review/${props.project.id}`,
-		color: 'orange',
-		shown: !!props.authUser && props.isStaff,
-	},
-	{
-		id: 'moderation-modpack-rescan',
-		label: formatMessage(messages.rescanModpack),
-		icon: FolderSearchIcon,
-		action: () => emit('moderationModpackRescan'),
-		color: 'orange',
-		shown: !!props.authUser && props.isStaff && props.showModerationModpackRescan,
-	},
-	{
-		divider: true,
-		shown: !!props.authUser && props.isStaff,
-	},
-	{
-		id: 'report',
-		label: formatMessage(commonMessages.reportButton),
-		icon: ReportIcon,
-		action: () => emit('report'),
-		color: 'red',
-		shown: !props.isMember,
-	},
-	{
-		id: 'copy-id',
-		label: formatMessage(commonMessages.copyIdButton),
-		icon: ClipboardCopyIcon,
-		action: () => emit('copyId'),
-	},
-	{
-		id: 'copy-permalink',
-		label: formatMessage(commonMessages.copyPermalinkButton),
-		icon: ClipboardCopyIcon,
-		action: () => emit('copyPermalink'),
-	},
-])
-</script>
diff --git a/apps/frontend/src/locales/cs-CZ/index.json b/apps/frontend/src/locales/cs-CZ/index.json
index 940dfb3766..24afe064dd 100644
--- a/apps/frontend/src/locales/cs-CZ/index.json
+++ b/apps/frontend/src/locales/cs-CZ/index.json
@@ -2513,12 +2513,6 @@
   "project.settings.visit-dashboard": {
     "message": "Přejít na přehled projektů"
   },
-  "project.stats.downloads-label": {
-    "message": "{count, plural, one {stažení} few {stažení} other {stažení}}"
-  },
-  "project.stats.followers-label": {
-    "message": "{count, plural, one {# sledující} few {# sledující} other {# sledujících}}"
-  },
   "project.versions.title": {
     "message": "Verze"
   },
diff --git a/apps/frontend/src/locales/de-CH/index.json b/apps/frontend/src/locales/de-CH/index.json
index 782211f0cb..0ff2fa4c2e 100644
--- a/apps/frontend/src/locales/de-CH/index.json
+++ b/apps/frontend/src/locales/de-CH/index.json
@@ -3497,12 +3497,6 @@
   "project.settings.visit-dashboard": {
     "message": "Projekt-Dashboard besuchen"
   },
-  "project.stats.downloads-label": {
-    "message": "{count, plural, one {Download} other {Downloads}}"
-  },
-  "project.stats.followers-label": {
-    "message": "{count, plural, one {Follower} other {Follower}}"
-  },
   "project.status.archived.message": {
     "message": "{title} wurde archiviert. {title} wird keine weiteren Updates erhalten, es sei denn, der Autor entscheided sich, das Projekt zu Dearchivieren."
   },
diff --git a/apps/frontend/src/locales/de-DE/index.json b/apps/frontend/src/locales/de-DE/index.json
index d4e47c1bf0..4869e338ba 100644
--- a/apps/frontend/src/locales/de-DE/index.json
+++ b/apps/frontend/src/locales/de-DE/index.json
@@ -3497,12 +3497,6 @@
   "project.settings.visit-dashboard": {
     "message": "Projekt-Dashboard besuchen"
   },
-  "project.stats.downloads-label": {
-    "message": "{count, plural, one {Download} other {Downloads}}"
-  },
-  "project.stats.followers-label": {
-    "message": "{count, plural, one {Follower} other {Follower}}"
-  },
   "project.status.archived.message": {
     "message": "{title} wurde archiviert. {title} wird keine weiteren Updates erhalten, es sei denn, der Autor entscheidet sich das Projekt zu dearchivieren."
   },
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 717ce1815f..005830ac0b 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -3656,12 +3656,6 @@
   "project.settings.visit-dashboard": {
     "message": "Visit projects dashboard"
   },
-  "project.stats.downloads-label": {
-    "message": "{count, plural, one {download} other {downloads}}"
-  },
-  "project.stats.followers-label": {
-    "message": "{count, plural, one {follower} other {followers}}"
-  },
   "project.status.archived.message": {
     "message": "{title} has been archived. {title} will not receive any further updates unless the author decides to unarchive the project."
   },
diff --git a/apps/frontend/src/locales/es-419/index.json b/apps/frontend/src/locales/es-419/index.json
index cb320430fd..37175fc08c 100644
--- a/apps/frontend/src/locales/es-419/index.json
+++ b/apps/frontend/src/locales/es-419/index.json
@@ -3497,12 +3497,6 @@
   "project.settings.visit-dashboard": {
     "message": "Ver el panel de control de proyectos"
   },
-  "project.stats.downloads-label": {
-    "message": "{count, plural, one {descarga} other {descargas}}"
-  },
-  "project.stats.followers-label": {
-    "message": "{count, plural, one {seguidor} other {seguidores}}"
-  },
   "project.status.archived.message": {
     "message": "{title} se ha archivado. {title} no recibirá más actualizaciones hasta que el autor decida desarchivar el proyecto."
   },
diff --git a/apps/frontend/src/locales/es-ES/index.json b/apps/frontend/src/locales/es-ES/index.json
index 52551803c2..bf321f432b 100644
--- a/apps/frontend/src/locales/es-ES/index.json
+++ b/apps/frontend/src/locales/es-ES/index.json
@@ -3377,12 +3377,6 @@
   "project.settings.visit-dashboard": {
     "message": "Visita el panel de proyectos"
   },
-  "project.stats.downloads-label": {
-    "message": "{count, plural, one {descarga} other {descargas}}"
-  },
-  "project.stats.followers-label": {
-    "message": "{count, plural, one {seguidor} other {seguidores}}"
-  },
   "project.status.archived.message": {
     "message": "{title} ha sido archivado. {title} no recibirá ninguna futura actualización excepto que el autor decida desarchivar el proyecto."
   },
diff --git a/apps/frontend/src/locales/fr-FR/index.json b/apps/frontend/src/locales/fr-FR/index.json
index f79e1c8899..e2e65fa94c 100644
--- a/apps/frontend/src/locales/fr-FR/index.json
+++ b/apps/frontend/src/locales/fr-FR/index.json
@@ -3497,12 +3497,6 @@
   "project.settings.visit-dashboard": {
     "message": "Visiter le tableau de contrôle des projets"
   },
-  "project.stats.downloads-label": {
-    "message": "{count, plural, one {# téléchargement} other {# téléchargements}}"
-  },
-  "project.stats.followers-label": {
-    "message": "{count, plural, one {# suivi} other {# suivis}}"
-  },
   "project.status.archived.message": {
     "message": "{title} a été archivé. {title} ne recevra plus de mises à jour jusqu'à ce que l'auteur du projet décide de désarchiver le projet."
   },
diff --git a/apps/frontend/src/locales/hu-HU/index.json b/apps/frontend/src/locales/hu-HU/index.json
index 09be0c636b..aacb2d5d8f 100644
--- a/apps/frontend/src/locales/hu-HU/index.json
+++ b/apps/frontend/src/locales/hu-HU/index.json
@@ -3083,9 +3083,6 @@
   "project.settings.visit-dashboard": {
     "message": "Projektek irányítópult megnyitása"
   },
-  "project.stats.downloads-label": {
-    "message": "{count} letöltés"
-  },
   "project.status.archived.message": {
     "message": "A(z) {title} archiválásra került. A(z) {title} nem kap további frissítéseket, kivéve, ha a fejlesztő úgy dönt, hogy visszavonja a projekt archiválását."
   },
diff --git a/apps/frontend/src/locales/it-IT/index.json b/apps/frontend/src/locales/it-IT/index.json
index 768c0ca916..255396ddfa 100644
--- a/apps/frontend/src/locales/it-IT/index.json
+++ b/apps/frontend/src/locales/it-IT/index.json
@@ -3488,12 +3488,6 @@
   "project.settings.visit-dashboard": {
     "message": "Visita bacheca del progetto"
   },
-  "project.stats.downloads-label": {
-    "message": "{count} download"
-  },
-  "project.stats.followers-label": {
-    "message": "{count} follower"
-  },
   "project.status.archived.message": {
     "message": "{title} è stato archiviato. {title} non riceverà più aggiornamenti a meno che l'autore decida di rimuoverlo dall'archivio."
   },
diff --git a/apps/frontend/src/locales/ms-MY/index.json b/apps/frontend/src/locales/ms-MY/index.json
index 4ba650c4e5..1c40c3eb98 100644
--- a/apps/frontend/src/locales/ms-MY/index.json
+++ b/apps/frontend/src/locales/ms-MY/index.json
@@ -3131,9 +3131,6 @@
   "project.settings.visit-dashboard": {
     "message": "Kunjungi papan pemuka projek"
   },
-  "project.stats.downloads-label": {
-    "message": "{count, plural, other {muat turun}}"
-  },
   "project.status.archived.message": {
     "message": "{title} telah diarkibkan. {title} tidak akan menerima sebarang kemas kini lanjut melainkan pengarang memutuskan untuk menyaharkibkan projek."
   },
diff --git a/apps/frontend/src/locales/pl-PL/index.json b/apps/frontend/src/locales/pl-PL/index.json
index 624df1fc2c..4914e4ee95 100644
--- a/apps/frontend/src/locales/pl-PL/index.json
+++ b/apps/frontend/src/locales/pl-PL/index.json
@@ -3491,12 +3491,6 @@
   "project.settings.visit-dashboard": {
     "message": "Odwiedź pulpit projektów"
   },
-  "project.stats.downloads-label": {
-    "message": "{count, plural, one {pobranie} few {pobrania} other {pobrań}}"
-  },
-  "project.stats.followers-label": {
-    "message": "{count, plural, one {obserwujący} other {obserwujących}}"
-  },
   "project.status.archived.message": {
     "message": "{title} zostało zarchiwizowane. {title} nie będzie otrzymywać żadnych dalszych aktualizacji, chyba że autor zdecyduje się przywrócić projekt."
   },
diff --git a/apps/frontend/src/locales/pt-BR/index.json b/apps/frontend/src/locales/pt-BR/index.json
index a64f36b0b9..99d19a0d6a 100644
--- a/apps/frontend/src/locales/pt-BR/index.json
+++ b/apps/frontend/src/locales/pt-BR/index.json
@@ -3494,12 +3494,6 @@
   "project.settings.visit-dashboard": {
     "message": "Visitar painel de projetos"
   },
-  "project.stats.downloads-label": {
-    "message": "{count, plural, =0 {Nenhum download} one {# download} other {# downloads}}"
-  },
-  "project.stats.followers-label": {
-    "message": "{count, plural, =0 {Nenhum seguidor} one {# seguidor} other {# seguidores}}"
-  },
   "project.status.archived.message": {
     "message": "{title} foi arquivado. {title} não receberá atualizações a menos que o autor decida desarquivar o projeto."
   },
diff --git a/apps/frontend/src/locales/ru-RU/index.json b/apps/frontend/src/locales/ru-RU/index.json
index 9fb138a95b..d5afc31ae3 100644
--- a/apps/frontend/src/locales/ru-RU/index.json
+++ b/apps/frontend/src/locales/ru-RU/index.json
@@ -3485,12 +3485,6 @@
   "project.settings.visit-dashboard": {
     "message": "Управление проектами"
   },
-  "project.stats.downloads-label": {
-    "message": "{count, plural, one {загрузка} few {загрузки} other {загрузок}}"
-  },
-  "project.stats.followers-label": {
-    "message": "{count, plural, one {подписчик} few {подписчика} other {подписчиков}}"
-  },
   "project.status.archived.message": {
     "message": "{title} помещён в архив. {title} больше не будет получать обновления, если только автор не решит разархивировать проект."
   },
diff --git a/apps/frontend/src/locales/tr-TR/index.json b/apps/frontend/src/locales/tr-TR/index.json
index 47d39f79e9..c3af0516f9 100644
--- a/apps/frontend/src/locales/tr-TR/index.json
+++ b/apps/frontend/src/locales/tr-TR/index.json
@@ -3383,12 +3383,6 @@
   "project.settings.visit-dashboard": {
     "message": "Projeler panelini ziyaret et"
   },
-  "project.stats.downloads-label": {
-    "message": "{count, plural, one {download} other {downloads}}"
-  },
-  "project.stats.followers-label": {
-    "message": "{count, plural, one {follower} other {followers}}"
-  },
   "project.status.archived.message": {
     "message": "{title} arşivlenmiş. {title}, yapımcı fikrini değiştirmediği sürece daha fazla güncelleme almayacak."
   },
diff --git a/apps/frontend/src/locales/vi-VN/index.json b/apps/frontend/src/locales/vi-VN/index.json
index 252f811be0..c44e5e8036 100644
--- a/apps/frontend/src/locales/vi-VN/index.json
+++ b/apps/frontend/src/locales/vi-VN/index.json
@@ -3278,12 +3278,6 @@
   "project.settings.visit-dashboard": {
     "message": "Truy cập bảng điều khiển dự án"
   },
-  "project.stats.downloads-label": {
-    "message": "{count, plural, other {lượt tải}}"
-  },
-  "project.stats.followers-label": {
-    "message": "{count, plural, other {lượt theo dõi}}"
-  },
   "project.status.archived.message": {
     "message": "{title} đã được lưu trữ. {title} sẽ không nhận được bất kỳ bản cập nhật nào trong tương lai trừ khi tác giả quyết định hủy lưu trữ dự án."
   },
diff --git a/apps/frontend/src/locales/zh-CN/index.json b/apps/frontend/src/locales/zh-CN/index.json
index 8dbc507c01..f6a4adb3a5 100644
--- a/apps/frontend/src/locales/zh-CN/index.json
+++ b/apps/frontend/src/locales/zh-CN/index.json
@@ -3491,12 +3491,6 @@
   "project.settings.visit-dashboard": {
     "message": "访问项目的控制面板"
   },
-  "project.stats.downloads-label": {
-    "message": "{count, plural, other {下载}}"
-  },
-  "project.stats.followers-label": {
-    "message": "{count, plural, other {关注者}}"
-  },
   "project.status.archived.message": {
     "message": "{title} 已归档。除非作者决定取消归档，否则 {title} 将不再更新。"
   },
diff --git a/apps/frontend/src/locales/zh-TW/index.json b/apps/frontend/src/locales/zh-TW/index.json
index 1469edcdbf..acc66dd47f 100644
--- a/apps/frontend/src/locales/zh-TW/index.json
+++ b/apps/frontend/src/locales/zh-TW/index.json
@@ -3497,12 +3497,6 @@
   "project.settings.visit-dashboard": {
     "message": "前往專案資訊主頁"
   },
-  "project.stats.downloads-label": {
-    "message": "{count, plural, other {下載}}"
-  },
-  "project.stats.followers-label": {
-    "message": "{count, plural, other {追蹤者}}"
-  },
   "project.status.archived.message": {
     "message": "{title} 已封存。{title} 將不會再收到任何後續更新，除非作者決定解除封存該專案。"
   },
diff --git a/apps/frontend/src/pages/[type]/[project].vue b/apps/frontend/src/pages/[type]/[project].vue
index 845391bb15..0288c6924a 100644
--- a/apps/frontend/src/pages/[type]/[project].vue
+++ b/apps/frontend/src/pages/[type]/[project].vue
@@ -134,37 +134,233 @@
 						v-if="projectV3Loaded"
 						:project="project"
 						:project-v3="projectV3"
-						:auth-user="auth.user"
-						:sign-in-route="signInRouteObj"
-						:collections="collections"
-						:base-id="baseId"
-						:collect-project="onUserCollectProject"
-						:create-collection="(event) => modalCollection?.show(event)"
 						:is-server-project="isServerProject"
 						:show-status-badge="!!currentMember || project.status !== 'approved'"
-						:show-edit-project="!!(auth.user && currentMember)"
-						:primary-muted="!!currentMember || route.name === 'type-project-version-version'"
-						:primary-label-hidden="!!(auth.user && currentMember)"
-						:can-create-server="canCreateServerFrom"
-						:show-quick-server-button="flags.showProjectPageQuickServerButton"
-						:show-create-server-prompt="flags.showProjectPageCreateServersTooltip"
-						:following="following"
-						:saved="collections.some((x) => x.projects.includes(project.id))"
-						:is-member="isMember"
-						:is-staff="!!(auth.user && tags.staffRoles.includes(auth.user.role))"
-						:show-moderation-checklist="showModerationChecklist"
-						:show-moderation-modpack-rescan="project.actualProjectType === 'modpack'"
 						@category="(category) => router.push(`${projectSearchUrl}?f=categories:${category}`)"
-						@primary="handleProjectHeaderPrimary"
-						@create-server="dismissProjectHeaderCreateServerPrompt"
-						@dismiss-create-server="dismissProjectHeaderCreateServerPrompt"
-						@follow="followProjectFromHeader"
-						@moderation-checklist="openModerationChecklistFromMenu"
-						@moderation-modpack-rescan="() => scanModal?.show()"
-						@report="reportProjectFromHeader"
-						@copy-id="copyId"
-						@copy-permalink="copyPermalink"
-					/>
+					>
+						<template #actions>
+							<ButtonStyled v-if="auth.user && currentMember" size="large" color="brand" circular>
+								<nuxt-link
+									v-tooltip="formatMessage(messages.editProject)"
+									:to="`${projectPath}/settings`"
+									class="!font-bold lg:!hidden"
+								>
+									<SettingsIcon />
+								</nuxt-link>
+							</ButtonStyled>
+							<ButtonStyled v-if="auth.user && currentMember" size="large" color="brand">
+								<nuxt-link :to="`${projectPath}/settings`" class="!font-bold max-lg:!hidden">
+									<SettingsIcon />
+									{{ formatMessage(messages.editProject) }}
+								</nuxt-link>
+							</ButtonStyled>
+
+							<div class="hidden sm:contents">
+								<ButtonStyled
+									v-if="!isServerProject"
+									size="large"
+									:color="projectHeaderPrimaryColor"
+									:circular="!!auth.user && !!currentMember"
+								>
+									<button
+										v-tooltip="
+											auth.user && currentMember
+												? formatMessage(commonMessages.downloadButton)
+												: undefined
+										"
+										type="button"
+										:aria-label="formatMessage(commonMessages.downloadButton)"
+										@click="handleProjectHeaderPrimary"
+									>
+										<DownloadIcon />
+										{{
+											auth.user && currentMember ? '' : formatMessage(commonMessages.downloadButton)
+										}}
+									</button>
+								</ButtonStyled>
+								<ButtonStyled
+									v-else
+									size="large"
+									:color="projectHeaderPrimaryColor"
+									:circular="!!auth.user && !!currentMember"
+								>
+									<button
+										v-tooltip="
+											auth.user && currentMember
+												? formatMessage(commonMessages.playButton)
+												: undefined
+										"
+										type="button"
+										:aria-label="formatMessage(commonMessages.playButton)"
+										@click="handleProjectHeaderPrimary"
+									>
+										<PlayIcon />
+										{{ auth.user && currentMember ? '' : formatMessage(commonMessages.playButton) }}
+									</button>
+								</ButtonStyled>
+							</div>
+
+							<div class="contents sm:hidden">
+								<ButtonStyled
+									v-if="!isServerProject"
+									size="large"
+									circular
+									:color="projectHeaderPrimaryColor"
+								>
+									<button
+										type="button"
+										:aria-label="formatMessage(commonMessages.downloadButton)"
+										class="flex sm:hidden"
+										@click="handleProjectHeaderPrimary"
+									>
+										<DownloadIcon />
+									</button>
+								</ButtonStyled>
+								<ButtonStyled v-else size="large" circular :color="projectHeaderPrimaryColor">
+									<button
+										type="button"
+										:aria-label="formatMessage(commonMessages.playButton)"
+										class="flex sm:hidden"
+										@click="handleProjectHeaderPrimary"
+									>
+										<PlayIcon />
+									</button>
+								</ButtonStyled>
+							</div>
+
+							<Tooltip
+								v-if="
+									showProjectHeaderCreateServerAction && flags.showProjectPageCreateServersTooltip
+								"
+								theme="dismissable-prompt"
+								class="inline-flex"
+								:triggers="[]"
+								:shown="flags.showProjectPageCreateServersTooltip"
+								:auto-hide="false"
+								placement="bottom-start"
+							>
+								<ButtonStyled circular size="large">
+									<nuxt-link
+										v-tooltip="formatMessage(messages.createServerTooltip)"
+										:to="projectHeaderCreateServerTo"
+										:aria-label="formatMessage(messages.serversPromoTitle)"
+										@click="dismissProjectHeaderCreateServerPrompt"
+									>
+										<ServerPlusIcon />
+									</nuxt-link>
+								</ButtonStyled>
+								<template #popper>
+									<div class="grid max-w-[18rem] gap-2">
+										<div class="flex items-center justify-between gap-4">
+											<div class="flex items-center gap-2">
+												<h3 class="m-0 text-base font-bold text-contrast">
+													{{ formatMessage(messages.serversPromoTitle) }}
+												</h3>
+												<span
+													class="rounded-full bg-brand-highlight px-2 py-0.5 text-xs font-bold text-brand"
+												>
+													{{ formatMessage(commonMessages.newBadge) }}
+												</span>
+											</div>
+											<ButtonStyled size="small" circular>
+												<button
+													v-tooltip="formatMessage(messages.dontShowAgain)"
+													@click="dismissProjectHeaderCreateServerPrompt"
+												>
+													<XIcon aria-hidden="true" />
+												</button>
+											</ButtonStyled>
+										</div>
+										<p class="m-0 text-sm font-medium leading-tight text-secondary">
+											{{ formatMessage(messages.serversPromoDescription) }}
+										</p>
+										<p class="m-0 text-sm font-semibold text-contrast">
+											<IntlFormatted
+												:message-id="messages.serversPromoPricing"
+												:values="{ price: formatPrice(500, 'USD', true) }"
+											>
+												<template #small="{ children }">
+													<small><component :is="() => children" /></small>
+												</template>
+											</IntlFormatted>
+										</p>
+									</div>
+								</template>
+							</Tooltip>
+							<ButtonStyled v-else-if="showProjectHeaderCreateServerAction" circular size="large">
+								<nuxt-link
+									v-tooltip="formatMessage(messages.createServerTooltip)"
+									:to="projectHeaderCreateServerTo"
+									:aria-label="formatMessage(messages.serversPromoTitle)"
+									@click="dismissProjectHeaderCreateServerPrompt"
+								>
+									<ServerPlusIcon />
+								</nuxt-link>
+							</ButtonStyled>
+
+							<ButtonStyled circular size="large">
+								<ClientOnly>
+									<button
+										v-if="auth.user"
+										v-tooltip="
+											following
+												? formatMessage(commonMessages.unfollowButton)
+												: formatMessage(commonMessages.followButton)
+										"
+										type="button"
+										:aria-label="
+											following
+												? formatMessage(commonMessages.unfollowButton)
+												: formatMessage(commonMessages.followButton)
+										"
+										@click="followProjectFromHeader"
+									>
+										<HeartIcon :fill="following ? 'currentColor' : 'none'" />
+									</button>
+									<nuxt-link
+										v-else
+										v-tooltip="formatMessage(commonMessages.followButton)"
+										:to="signInRouteObj"
+										:aria-label="formatMessage(commonMessages.followButton)"
+									>
+										<HeartIcon aria-hidden="true" />
+									</nuxt-link>
+									<template #fallback>
+										<nuxt-link
+											v-tooltip="formatMessage(commonMessages.followButton)"
+											:to="signInRouteObj"
+											:aria-label="formatMessage(commonMessages.followButton)"
+										>
+											<HeartIcon aria-hidden="true" />
+										</nuxt-link>
+									</template>
+								</ClientOnly>
+							</ButtonStyled>
+
+							<ProjectCollectionSaveButton
+								:auth-user="auth.user"
+								:sign-in-route="signInRouteObj"
+								:project-id="project.id"
+								:collections="collections"
+								:saved="collections.some((x) => x.projects.includes(project.id))"
+								:base-id="baseId"
+								:no-collections-label="formatMessage(messages.noCollectionsFound)"
+								:create-new-collection-label="formatMessage(messages.createNewCollection)"
+								:collect-project="onUserCollectProject"
+								:create-collection="(event) => modalCollection?.show(event)"
+							/>
+
+							<ButtonStyled circular size="large" type="transparent">
+								<TeleportOverflowMenu
+									:options="projectHeaderMoreActions"
+									:tooltip="formatMessage(commonMessages.moreOptionsButton)"
+									:aria-label="formatMessage(commonMessages.moreOptionsButton)"
+								>
+									<MoreVerticalIcon />
+								</TeleportOverflowMenu>
+							</ButtonStyled>
+						</template>
+					</ProjectPageHeader>
 					<ProjectMemberHeader
 						v-if="currentMember"
 						:project="project"
@@ -400,14 +596,23 @@
 import {
 	BookTextIcon,
 	CalendarIcon,
+	ChartIcon,
 	ChevronRightIcon,
+	ClipboardCopyIcon,
 	DownloadIcon,
 	ExternalIcon,
+	FolderSearchIcon,
 	HeartIcon,
 	ListIcon,
+	MoreVerticalIcon,
+	PlayIcon,
+	ReportIcon,
 	ScaleIcon,
+	ScanEyeIcon,
+	ServerPlusIcon,
 	SettingsIcon,
 	VersionIcon,
+	XIcon,
 } from '@modrinth/assets'
 import {
 	Admonition,
@@ -417,12 +622,14 @@ import {
 	defineMessages,
 	injectModrinthClient,
 	injectNotificationManager,
+	IntlFormatted,
 	NavTabs,
 	NewModal,
 	OpenInAppModal,
 	PROJECT_DEP_MARKER_QUERY,
 	ProjectBackgroundGradient,
 	ProjectEnvironmentModal,
+	ProjectPageHeader,
 	ProjectSidebarCompatibility,
 	ProjectSidebarCreators,
 	ProjectSidebarDetails,
@@ -430,14 +637,17 @@ import {
 	ProjectSidebarServerInfo,
 	ProjectSidebarTags,
 	provideProjectPageContext,
+	TeleportOverflowMenu,
 	useDebugLogger,
 	useFormatDateTime,
+	useFormatPrice,
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
 import { capitalizeString, formatProjectType, renderString } from '@modrinth/utils'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
 import { useLocalStorage } from '@vueuse/core'
+import { Tooltip } from 'floating-vue'
 import { onScopeDispose, readonly, ref, useTemplateRef, watch, watchEffect } from 'vue'
 
 import { navigateTo } from '#app'
@@ -447,9 +657,9 @@ import MessageBanner from '~/components/ui/MessageBanner.vue'
 import ModerationChecklist from '~/components/ui/moderation/checklist/ModerationChecklist.vue'
 import ModerationProjectNags from '~/components/ui/moderation/ModerationProjectNags.vue'
 import ModpackScanModal from '~/components/ui/moderation/ModpackScanModal.vue'
+import ProjectCollectionSaveButton from '~/components/ui/ProjectCollectionSaveButton.vue'
 import ProjectDownloadModal from '~/components/ui/ProjectDownloadModal/index.vue'
 import ProjectMemberHeader from '~/components/ui/ProjectMemberHeader.vue'
-import ProjectPageHeader from '~/components/ui/ProjectPageHeader.vue'
 import { getSignInRouteObj } from '~/composables/auth.ts'
 import { saveFeatureFlags } from '~/composables/featureFlags.ts'
 import { STALE_TIME, STALE_TIME_LONG } from '~/composables/queries/project'
@@ -508,6 +718,7 @@ const formatDateTime = useFormatDateTime({
 	timeStyle: 'short',
 	dateStyle: 'long',
 })
+const formatPrice = useFormatPrice()
 
 const debug = useDebugLogger('DownloadModal')
 
@@ -581,10 +792,26 @@ const messages = defineMessages({
 		id: 'project.actions.create-server',
 		defaultMessage: 'Create a server',
 	},
+	createServerTooltip: {
+		id: 'project.actions.create-server-tooltip',
+		defaultMessage: 'Create a server',
+	},
+	createNewCollection: {
+		id: 'project.collections.create-new',
+		defaultMessage: 'Create new collection',
+	},
 	descriptionTab: {
 		id: 'project.description.title',
 		defaultMessage: 'Description',
 	},
+	dontShowAgain: {
+		id: 'project.actions.dont-show-again',
+		defaultMessage: "Don't show again",
+	},
+	editProject: {
+		id: 'project.actions.edit-project',
+		defaultMessage: 'Edit project',
+	},
 	errorLoadingProject: {
 		id: 'project.error.loading',
 		defaultMessage: 'Error loading project data{message}',
@@ -635,6 +862,10 @@ const messages = defineMessages({
 		id: 'project.moderation.title',
 		defaultMessage: 'Moderation',
 	},
+	noCollectionsFound: {
+		id: 'project.collections.none-found',
+		defaultMessage: 'No collections found.',
+	},
 	pageNotFound: {
 		id: 'project.error.page-not-found',
 		defaultMessage: 'The page could not be found',
@@ -663,6 +894,26 @@ const messages = defineMessages({
 		id: 'project.environment.migration.review-button',
 		defaultMessage: 'Review environment settings',
 	},
+	reviewProject: {
+		id: 'project.actions.review-project',
+		defaultMessage: 'Review project',
+	},
+	rescanModpack: {
+		id: 'project.actions.rescan-modpack',
+		defaultMessage: 'Rescan modpack',
+	},
+	serversPromoDescription: {
+		id: 'project.actions.servers-promo.description',
+		defaultMessage: 'Modrinth Hosting is the easiest way to play with your friends without hassle!',
+	},
+	serversPromoPricing: {
+		id: 'project.actions.servers-promo.pricing',
+		defaultMessage: 'Starting at {price}<small> / month</small>',
+	},
+	serversPromoTitle: {
+		id: 'project.actions.servers-promo.title',
+		defaultMessage: 'Create a server',
+	},
 	settingsTitle: {
 		id: 'project.settings.title',
 		defaultMessage: 'Settings',
@@ -1455,6 +1706,85 @@ const canCreateServerFrom = computed(() => {
 const projectSearchUrl = computed(
 	() => `/discover/${isServerProject.value ? 'servers' : `${project.value?.project_type}s`}`,
 )
+const projectPath = computed(() =>
+	project.value
+		? `/${project.value.project_type}/${project.value.slug ? project.value.slug : project.value.id}`
+		: '',
+)
+const projectHeaderPrimaryColor = computed(() =>
+	currentMember.value || route.name === 'type-project-version-version' ? 'standard' : 'brand',
+)
+const showProjectHeaderCreateServerAction = computed(
+	() => canCreateServerFrom.value && flags.value.showProjectPageQuickServerButton,
+)
+const projectHeaderCreateServerTo = computed(() =>
+	project.value ? `/hosting?project=${project.value.id}#plan` : '/hosting',
+)
+const projectHeaderMoreActions = computed(() => {
+	const isStaff = !!(auth.value.user && tags.value.staffRoles.includes(auth.value.user.role))
+
+	return [
+		{
+			id: 'analytics',
+			label: formatMessage(commonMessages.analyticsButton),
+			icon: ChartIcon,
+			link: `${projectPath.value}/settings/analytics`,
+			shown: !!auth.value.user && !!currentMember.value,
+		},
+		{
+			divider: true,
+			shown: !!auth.value.user && !!currentMember.value,
+		},
+		{
+			id: 'moderation-checklist',
+			label: formatMessage(messages.reviewProject),
+			icon: ScaleIcon,
+			action: openModerationChecklistFromMenu,
+			color: 'orange',
+			shown: !!auth.value.user && isStaff && !showModerationChecklist.value,
+		},
+		{
+			id: 'tech-review',
+			label: 'Tech review',
+			icon: ScanEyeIcon,
+			link: `/moderation/technical-review/${project.value?.id}`,
+			color: 'orange',
+			shown: !!auth.value.user && isStaff,
+		},
+		{
+			id: 'moderation-modpack-rescan',
+			label: formatMessage(messages.rescanModpack),
+			icon: FolderSearchIcon,
+			action: () => scanModal.value?.show(),
+			color: 'orange',
+			shown: !!auth.value.user && isStaff && project.value?.actualProjectType === 'modpack',
+		},
+		{
+			divider: true,
+			shown: !!auth.value.user && isStaff,
+		},
+		{
+			id: 'report',
+			label: formatMessage(commonMessages.reportButton),
+			icon: ReportIcon,
+			action: reportProjectFromHeader,
+			color: 'red',
+			shown: !isMember.value,
+		},
+		{
+			id: 'copy-id',
+			label: formatMessage(commonMessages.copyIdButton),
+			icon: ClipboardCopyIcon,
+			action: copyId,
+		},
+		{
+			id: 'copy-permalink',
+			label: formatMessage(commonMessages.copyPermalinkButton),
+			icon: ClipboardCopyIcon,
+			action: copyPermalink,
+		},
+	]
+})
 
 const createCanonicalUrl = () =>
 	project.value ? `https://modrinth.com/project/${project.value.id}` : undefined
diff --git a/packages/ui/src/components/base/page-header/index.vue b/packages/ui/src/components/base/page-header/index.vue
index 48a0c9517a..eef3b8db5b 100644
--- a/packages/ui/src/components/base/page-header/index.vue
+++ b/packages/ui/src/components/base/page-header/index.vue
@@ -6,7 +6,7 @@
 					<slot name="leading" />
 				</div>
 
-				<div class="flex min-w-0 flex-col justify-center gap-2">
+				<div class="flex min-w-0 flex-1 flex-col justify-center gap-2">
 					<div class="flex flex-col justify-center gap-1.5">
 						<div class="flex flex-wrap items-center gap-2">
 							<h1
diff --git a/packages/ui/src/components/base/page-header/metadata/index.vue b/packages/ui/src/components/base/page-header/metadata/index.vue
index 277508684f..c9f14be49a 100644
--- a/packages/ui/src/components/base/page-header/metadata/index.vue
+++ b/packages/ui/src/components/base/page-header/metadata/index.vue
@@ -1,12 +1,91 @@
 <template>
-	<div class="page-header-metadata flex min-w-0 flex-wrap items-center gap-x-2 gap-y-2">
+	<div
+		ref="metadata"
+		class="page-header-metadata flex min-w-0 flex-wrap items-center gap-x-2 gap-y-2"
+	>
 		<slot />
 	</div>
 </template>
 
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+
+const metadata = ref<HTMLElement | null>(null)
+let resizeObserver: ResizeObserver | null = null
+let mutationObserver: MutationObserver | null = null
+const observedItems = new Set<Element>()
+
+function getItems() {
+	return Array.from(
+		metadata.value?.querySelectorAll<HTMLElement>('[data-page-header-metadata-item]') ?? [],
+	)
+}
+
+function observeItems() {
+	if (!resizeObserver) return
+
+	for (const item of getItems()) {
+		if (observedItems.has(item)) continue
+
+		resizeObserver.observe(item)
+		observedItems.add(item)
+	}
+}
+
+function updateRowStarts() {
+	const root = metadata.value
+	if (!root) return
+
+	const isRtl = getComputedStyle(root).direction === 'rtl'
+	let previousOffset: number | null = null
+
+	for (const item of getItems()) {
+		const offset = item.offsetLeft
+		const startsRow =
+			previousOffset === null ||
+			(isRtl ? offset >= previousOffset - 1 : offset <= previousOffset + 1)
+
+		item.toggleAttribute('data-page-header-metadata-row-start', startsRow)
+		previousOffset = offset
+	}
+}
+
+function scheduleUpdate() {
+	void nextTick(() => {
+		observeItems()
+		updateRowStarts()
+	})
+}
+
+onMounted(() => {
+	scheduleUpdate()
+
+	if (typeof ResizeObserver !== 'undefined') {
+		resizeObserver = new ResizeObserver(scheduleUpdate)
+		if (metadata.value) {
+			resizeObserver.observe(metadata.value)
+		}
+		observeItems()
+	}
+
+	if (typeof MutationObserver !== 'undefined' && metadata.value) {
+		mutationObserver = new MutationObserver(scheduleUpdate)
+		mutationObserver.observe(metadata.value, { childList: true, subtree: true })
+	}
+})
+
+onBeforeUnmount(() => {
+	resizeObserver?.disconnect()
+	mutationObserver?.disconnect()
+	observedItems.clear()
+})
+</script>
+
 <style scoped>
 .page-header-metadata
-	:deep([data-page-header-metadata-item]:first-child .page-header-metadata-item-divider) {
+	:deep([data-page-header-metadata-item]:first-child .page-header-metadata-item-divider),
+.page-header-metadata
+	:deep([data-page-header-metadata-row-start] .page-header-metadata-item-divider) {
 	display: none;
 }
 </style>
diff --git a/packages/ui/src/components/project/ProjectPageHeader.vue b/packages/ui/src/components/project/ProjectPageHeader.vue
new file mode 100644
index 0000000000..e6f52a6786
--- /dev/null
+++ b/packages/ui/src/components/project/ProjectPageHeader.vue
@@ -0,0 +1,118 @@
+<template>
+	<PageHeader
+		:title="project.title"
+		:summary="project.description"
+		@contextmenu="emit('contextmenu', $event)"
+	>
+		<template #leading>
+			<Avatar :src="project.icon_url" :alt="project.title" :tint-by="project.id" size="96px" />
+		</template>
+
+		<template v-if="showStatusBadge" #badges>
+			<ProjectStatusBadge :status="project.status" />
+		</template>
+
+		<template #metadata>
+			<PageHeaderMetadata>
+				<template v-if="isServerProject">
+					<ServerDetails
+						v-if="projectV3?.status !== 'draft'"
+						:online-players="projectV3?.minecraft_java_server?.ping?.data?.players_online ?? 0"
+						:status-online="!!projectV3?.minecraft_java_server?.ping?.data"
+						:recent-plays="projectV3?.minecraft_java_server?.verified_plays_2w ?? 0"
+					/>
+				</template>
+				<template v-else>
+					<PageHeaderMetadataNumberItem
+						:icon="DownloadIcon"
+						:value="project.downloads"
+						:label="formatMessage(messages.downloadsStat, { count: project.downloads })"
+						:tooltip="formatNumber(project.downloads)"
+						class="cursor-help"
+					/>
+					<PageHeaderMetadataNumberItem
+						:icon="HeartIcon"
+						:value="project.followers"
+						:label="formatMessage(messages.followersStat, { count: project.followers })"
+						:tooltip="formatNumber(project.followers)"
+						class="cursor-help"
+					/>
+				</template>
+				<PageHeaderMetadataTagsItem v-if="project.categories.length > 0" class="hidden md:flex">
+					<TagItem
+						v-for="category in project.categories"
+						:key="category"
+						:action="() => emit('category', category)"
+					>
+						<FormattedTag :tag="category" />
+					</TagItem>
+				</PageHeaderMetadataTagsItem>
+			</PageHeaderMetadata>
+		</template>
+
+		<template #actions>
+			<PageHeaderActions>
+				<slot name="actions" />
+			</PageHeaderActions>
+		</template>
+	</PageHeader>
+</template>
+
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { DownloadIcon, HeartIcon } from '@modrinth/assets'
+
+import { defineMessages, useFormatNumber, useVIntl } from '../../composables'
+import Avatar from '../base/Avatar.vue'
+import FormattedTag from '../base/FormattedTag.vue'
+import PageHeader from '../base/page-header/index.vue'
+import PageHeaderMetadata from '../base/page-header/metadata/index.vue'
+import PageHeaderMetadataNumberItem from '../base/page-header/metadata/page-header-metadata-number-item.vue'
+import PageHeaderMetadataTagsItem from '../base/page-header/metadata/page-header-metadata-tags-item.vue'
+import PageHeaderActions from '../base/page-header/page-header-actions.vue'
+import TagItem from '../base/TagItem.vue'
+import ProjectStatusBadge from './ProjectStatusBadge.vue'
+import ServerDetails from './server/ServerDetails.vue'
+
+type HeaderProject = Pick<
+	Labrinth.Projects.v2.Project,
+	'id' | 'title' | 'description' | 'status' | 'downloads' | 'followers' | 'categories'
+> & {
+	icon_url?: string | null
+}
+
+type HeaderProjectV3 = Pick<Labrinth.Projects.v3.Project, 'status' | 'minecraft_java_server'>
+
+withDefaults(
+	defineProps<{
+		project: HeaderProject
+		projectV3?: HeaderProjectV3 | null
+		isServerProject?: boolean
+		showStatusBadge?: boolean
+	}>(),
+	{
+		projectV3: null,
+		isServerProject: false,
+		showStatusBadge: false,
+	},
+)
+
+const emit = defineEmits<{
+	category: [category: string]
+	contextmenu: [event: MouseEvent]
+}>()
+
+const messages = defineMessages({
+	downloadsStat: {
+		id: 'project.stats.downloads-label',
+		defaultMessage: '{count, plural, one {download} other {downloads}}',
+	},
+	followersStat: {
+		id: 'project.stats.followers-label',
+		defaultMessage: '{count, plural, one {follower} other {followers}}',
+	},
+})
+
+const { formatMessage } = useVIntl()
+const formatNumber = useFormatNumber()
+</script>
diff --git a/packages/ui/src/components/project/index.ts b/packages/ui/src/components/project/index.ts
index 66beaf6c8e..efc797c1d2 100644
--- a/packages/ui/src/components/project/index.ts
+++ b/packages/ui/src/components/project/index.ts
@@ -7,6 +7,7 @@ export { default as ProjectBackgroundGradient } from './ProjectBackgroundGradien
 export { default as ProjectCardList } from './ProjectCardList.vue'
 export { default as ProjectCombobox } from './ProjectCombobox.vue'
 export { default as ProjectPageDescription } from './ProjectPageDescription.vue'
+export { default as ProjectPageHeader } from './ProjectPageHeader.vue'
 export { default as ProjectPageVersions } from './ProjectPageVersions.vue'
 export { default as ProjectSidebarCompatibility } from './ProjectSidebarCompatibility.vue'
 export { default as ProjectSidebarCreators } from './ProjectSidebarCreators.vue'
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index f7a3a0dd92..2c1c4a7b16 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -3467,6 +3467,12 @@
   "project.settings.view.title": {
     "defaultMessage": "View"
   },
+  "project.stats.downloads-label": {
+    "defaultMessage": "{count, plural, one {download} other {downloads}}"
+  },
+  "project.stats.followers-label": {
+    "defaultMessage": "{count, plural, one {follower} other {followers}}"
+  },
   "project.versions.channel.alpha.symbol": {
     "defaultMessage": "A"
   },

From 5e5607ccb69247b882a9b96cb366bad1e368b41e Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Wed, 15 Jul 2026 15:01:58 +0100
Subject: [PATCH 11/12] fix: rev

---
 apps/frontend/src/pages/[type]/[project].vue  |  1 -
 .../page-header-metadata-time-item.vue        | 39 +++++--------------
 .../components/project/ProjectPageHeader.vue  | 11 +++---
 3 files changed, 14 insertions(+), 37 deletions(-)

diff --git a/apps/frontend/src/pages/[type]/[project].vue b/apps/frontend/src/pages/[type]/[project].vue
index 0288c6924a..7f908b9904 100644
--- a/apps/frontend/src/pages/[type]/[project].vue
+++ b/apps/frontend/src/pages/[type]/[project].vue
@@ -134,7 +134,6 @@
 						v-if="projectV3Loaded"
 						:project="project"
 						:project-v3="projectV3"
-						:is-server-project="isServerProject"
 						:show-status-badge="!!currentMember || project.status !== 'approved'"
 						@category="(category) => router.push(`${projectSearchUrl}?f=categories:${category}`)"
 					>
diff --git a/packages/ui/src/components/base/page-header/metadata/page-header-metadata-time-item.vue b/packages/ui/src/components/base/page-header/metadata/page-header-metadata-time-item.vue
index b223a0ce2d..2b8ac27a1b 100644
--- a/packages/ui/src/components/base/page-header/metadata/page-header-metadata-time-item.vue
+++ b/packages/ui/src/components/base/page-header/metadata/page-header-metadata-time-item.vue
@@ -16,6 +16,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
+import { useFormatDateTime, useRelativeTime } from '../../../../composables'
 import type { PageHeaderMetadataItemProps } from '../types'
 import PageHeaderMetadataItem from './page-header-metadata-item.vue'
 
@@ -24,13 +25,11 @@ const props = withDefaults(
 		PageHeaderMetadataItemProps & {
 			date: string | number | Date
 			label?: string
-			locale?: string
 			relative?: boolean
 		}
 	>(),
 	{
 		label: '',
-		locale: undefined,
 		relative: true,
 		icon: undefined,
 		iconProps: undefined,
@@ -43,45 +42,25 @@ const props = withDefaults(
 	},
 )
 
+const formatDateTime = useFormatDateTime({
+	dateStyle: 'medium',
+	timeStyle: 'short',
+})
+const formatRelativeTime = useRelativeTime()
+
 const parsedDate = computed(() => {
 	const date = props.date instanceof Date ? props.date : new Date(props.date)
 	return Number.isNaN(date.getTime()) ? null : date
 })
 const absoluteDate = computed(() => {
 	if (!parsedDate.value) return ''
-	return new Intl.DateTimeFormat(props.locale, {
-		dateStyle: 'medium',
-		timeStyle: 'short',
-	}).format(parsedDate.value)
+	return formatDateTime(parsedDate.value)
 })
 const formattedDate = computed(() => {
 	if (!parsedDate.value) return ''
 	if (!props.relative) return absoluteDate.value
-	return formatRelativeDate(parsedDate.value, props.locale)
+	return formatRelativeTime(parsedDate.value)
 })
 const resolvedTooltip = computed(() => props.tooltip ?? (absoluteDate.value || undefined))
 const displayLabel = computed(() => [props.label, formattedDate.value].filter(Boolean).join(' '))
-
-function formatRelativeDate(date: Date, locale?: string) {
-	const diffSeconds = (date.getTime() - Date.now()) / 1000
-	const absoluteSeconds = Math.abs(diffSeconds)
-	const formatter = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' })
-
-	if (absoluteSeconds < 60) {
-		return formatter.format(Math.round(diffSeconds), 'second')
-	}
-	if (absoluteSeconds < 3600) {
-		return formatter.format(Math.round(diffSeconds / 60), 'minute')
-	}
-	if (absoluteSeconds < 86400) {
-		return formatter.format(Math.round(diffSeconds / 3600), 'hour')
-	}
-	if (absoluteSeconds < 2592000) {
-		return formatter.format(Math.round(diffSeconds / 86400), 'day')
-	}
-	if (absoluteSeconds < 31536000) {
-		return formatter.format(Math.round(diffSeconds / 2592000), 'month')
-	}
-	return formatter.format(Math.round(diffSeconds / 31536000), 'year')
-}
 </script>
diff --git a/packages/ui/src/components/project/ProjectPageHeader.vue b/packages/ui/src/components/project/ProjectPageHeader.vue
index e6f52a6786..86fea39c72 100644
--- a/packages/ui/src/components/project/ProjectPageHeader.vue
+++ b/packages/ui/src/components/project/ProjectPageHeader.vue
@@ -14,7 +14,7 @@
 
 		<template #metadata>
 			<PageHeaderMetadata>
-				<template v-if="isServerProject">
+				<template v-if="projectV3?.minecraft_server != null">
 					<ServerDetails
 						v-if="projectV3?.status !== 'draft'"
 						:online-players="projectV3?.minecraft_java_server?.ping?.data?.players_online ?? 0"
@@ -28,14 +28,12 @@
 						:value="project.downloads"
 						:label="formatMessage(messages.downloadsStat, { count: project.downloads })"
 						:tooltip="formatNumber(project.downloads)"
-						class="cursor-help"
 					/>
 					<PageHeaderMetadataNumberItem
 						:icon="HeartIcon"
 						:value="project.followers"
 						:label="formatMessage(messages.followersStat, { count: project.followers })"
 						:tooltip="formatNumber(project.followers)"
-						class="cursor-help"
 					/>
 				</template>
 				<PageHeaderMetadataTagsItem v-if="project.categories.length > 0" class="hidden md:flex">
@@ -81,18 +79,19 @@ type HeaderProject = Pick<
 	icon_url?: string | null
 }
 
-type HeaderProjectV3 = Pick<Labrinth.Projects.v3.Project, 'status' | 'minecraft_java_server'>
+type HeaderProjectV3 = Pick<
+	Labrinth.Projects.v3.Project,
+	'status' | 'minecraft_server' | 'minecraft_java_server'
+>
 
 withDefaults(
 	defineProps<{
 		project: HeaderProject
 		projectV3?: HeaderProjectV3 | null
-		isServerProject?: boolean
 		showStatusBadge?: boolean
 	}>(),
 	{
 		projectV3: null,
-		isServerProject: false,
 		showStatusBadge: false,
 	},
 )

From c7b2577bee6df95d64aec02be7edc1629d03ab3b Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Wed, 15 Jul 2026 15:08:56 +0100
Subject: [PATCH 12/12] fix: lint

---
 apps/frontend/src/locales/hu-HU/index.json | 12 ------------
 apps/frontend/src/locales/no-NO/index.json |  6 ------
 2 files changed, 18 deletions(-)

diff --git a/apps/frontend/src/locales/hu-HU/index.json b/apps/frontend/src/locales/hu-HU/index.json
index 0eed49da95..4faa0c0824 100644
--- a/apps/frontend/src/locales/hu-HU/index.json
+++ b/apps/frontend/src/locales/hu-HU/index.json
@@ -2963,9 +2963,6 @@
   "profile.label.collection": {
     "message": "Gyűjtemény"
   },
-  "profile.label.downloads": {
-    "message": "{count} {countPlural, plural, one {letöltés} other {letöltések}}"
-  },
   "profile.label.joined": {
     "message": "Csatlakozott"
   },
@@ -2984,9 +2981,6 @@
   "profile.label.organizations": {
     "message": "Szervezetek"
   },
-  "profile.label.projects": {
-    "message": "{count} {countPlural, plural, one {projekt} other {projektek}}"
-  },
   "profile.label.saving": {
     "message": "Mentés..."
   },
@@ -3458,12 +3452,6 @@
   "project.settings.visit-dashboard": {
     "message": "Projektek irányítópult megnyitása"
   },
-  "project.stats.downloads-label": {
-    "message": "{count} letöltés"
-  },
-  "project.stats.followers-label": {
-    "message": "{count} követő"
-  },
   "project.status.archived.message": {
     "message": "A(z) {title} archiválásra került. A(z) {title} nem kap további frissítéseket, kivéve, ha a fejlesztő úgy dönt, hogy visszavonja a projekt archiválását."
   },
diff --git a/apps/frontend/src/locales/no-NO/index.json b/apps/frontend/src/locales/no-NO/index.json
index 503ff00e81..3ed6bb01dd 100644
--- a/apps/frontend/src/locales/no-NO/index.json
+++ b/apps/frontend/src/locales/no-NO/index.json
@@ -3032,12 +3032,6 @@
   "project.settings.visit-dashboard": {
     "message": "Besøk prosjekt-dashbordet"
   },
-  "project.stats.downloads-label": {
-    "message": "{count, plural, one {nedlasting} other {nedlastinger}}"
-  },
-  "project.stats.followers-label": {
-    "message": "{count, plural, one {følger} other {følgere}}"
-  },
   "project.status.archived.message": {
     "message": "{title} har blitt arkivert. {title} kommer ikke til å få noen nye oppdateringer, hvis ikke forfatteren bestemmer seg for å dearkivere prosjektet."
   },