From de007985c1c66f44fa100bbc862b5731e7e9dec1 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Mon, 18 May 2026 14:09:32 +0100
Subject: [PATCH] feat: migrate all headers to use PageHeader shared component.

---
 .../app-frontend/src/locales/en-US/index.json |   9 +
 .../src/pages/hosting/manage/Index.vue        |  25 +-
 .../app-frontend/src/pages/instance/Index.vue | 440 +++++++-------
 apps/app-frontend/src/pages/project/Index.vue | 243 ++++----
 .../ui/ProjectCollectionSaveButton.vue        | 127 ++++
 apps/frontend/src/locales/en-US/index.json    |   6 +
 .../src/middleware/server-instance-ready.ts   |   3 +-
 apps/frontend/src/pages/[type]/[project].vue  | 549 ++++++------------
 .../src/pages/organization/[organization].vue | 178 +++---
 apps/frontend/src/pages/user/[user].vue       | 379 ++++++------
 .../src/components/base/ContentPageHeader.vue |  45 --
 .../ui/src/components/base/PageHeader.vue     | 190 +++++-
 .../components/base/TeleportOverflowMenu.vue  | 101 +++-
 packages/ui/src/components/base/index.ts      |   6 +-
 .../src/components/project/ProjectHeader.vue  |  95 ++-
 .../wrapped/hosting/manage/[id]/index.vue     |  23 +-
 .../hosting/manage/[id]/instances/index.vue   |   3 +-
 packages/ui/src/locales/en-US/index.json      |  21 +
 .../stories/base/ContentPageHeader.stories.ts |  63 --
 .../ui/src/stories/base/PageHeader.stories.ts |  94 ++-
 20 files changed, 1455 insertions(+), 1145 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

diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index e5613ca1d3..7371454d4b 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -194,6 +194,15 @@
   "app.content-install.no-compatible-versions": {
     "message": "No available versions match {compatibilityLabel}. Select a version to install anyway. Dependencies will not be installed automatically."
   },
+  "app.browse.server.world-fallback-name": {
+    "message": "Instance"
+  },
+  "app.creation-modal.installing-modpack.description": {
+    "message": "{fileName}"
+  },
+  "app.creation-modal.installing-modpack.title": {
+    "message": "Installing modpack..."
+  },
   "app.export-modal.description-placeholder": {
     "message": "Enter modpack description..."
   },
diff --git a/apps/app-frontend/src/pages/hosting/manage/Index.vue b/apps/app-frontend/src/pages/hosting/manage/Index.vue
index e3633a7659..a4eb3e09ac 100644
--- a/apps/app-frontend/src/pages/hosting/manage/Index.vue
+++ b/apps/app-frontend/src/pages/hosting/manage/Index.vue
@@ -25,7 +25,7 @@
 			"
 		>
 			<template #default="{ onReinstall, onReinstallFailed }">
-				<RouterView v-slot="{ Component }">
+				<RouterView v-slot="{ Component }" :route="managedRoute">
 					<template v-if="Component">
 						<Suspense>
 							<component
@@ -46,7 +46,7 @@ import type { Archon, Labrinth } from '@modrinth/api-client'
 import { injectAuth, injectModrinthClient, ServersManageRootLayout } from '@modrinth/ui'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { openUrl } from '@tauri-apps/plugin-opener'
-import { computed, watch } from 'vue'
+import { computed, ref, shallowRef, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import { get_user } from '@/helpers/cache'
@@ -60,10 +60,23 @@ const client = injectModrinthClient()
 const queryClient = useQueryClient()
 const breadcrumbs = useBreadcrumbs()
 
-const serverId = computed(() => {
-	const rawId = route.params.id
-	return Array.isArray(rawId) ? rawId[0] : (rawId ?? '')
-})
+const managedRoute = shallowRef(router.currentRoute.value)
+const serverId = ref(getRouteParam(managedRoute.value.params.id) ?? '')
+
+watch(
+	router.currentRoute,
+	(nextRoute) => {
+		if (!nextRoute.path.startsWith('/hosting/manage/')) return
+		managedRoute.value = nextRoute
+		serverId.value = getRouteParam(nextRoute.params.id) ?? ''
+	},
+	{ immediate: true },
+)
+
+function getRouteParam(param: string | string[] | undefined): string | null {
+	if (Array.isArray(param)) return param[0] ?? null
+	return param ?? null
+}
 
 if (serverId.value) {
 	try {
diff --git a/apps/app-frontend/src/pages/instance/Index.vue b/apps/app-frontend/src/pages/instance/Index.vue
index b388f89bfe..78c67a28a2 100644
--- a/apps/app-frontend/src/pages/instance/Index.vue
+++ b/apps/app-frontend/src/pages/instance/Index.vue
@@ -13,220 +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 min-w-0 items-center gap-2 font-medium text-secondary text-nowrap">
-								<Gamepad2Icon class="flex size-5 shrink-0" aria-hidden="true" />
-								<span class="truncate">{{ instance.game_version }}</span>
-							</div>
-
-							<BulletDivider />
-
-							<div class="flex min-w-0 items-center gap-2 font-medium text-secondary text-nowrap">
-								<ServerLoaderIcon
-									v-if="loaderDisplayName"
-									:loader="loaderDisplayName"
-									class="flex size-5 shrink-0"
-									aria-hidden="true"
-								/>
-								<span class="truncate">{{ loaderLabel }}</span>
-							</div>
-
-							<template v-if="showInstancePlayTime">
-								<BulletDivider />
-
-								<div class="flex min-w-0 items-center gap-2 font-medium text-secondary text-nowrap">
-									<TimerIcon class="flex size-5 shrink-0" aria-hidden="true" />
-									<span class="truncate">
-										{{ playtimeLabel }}
-									</span>
-								</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>
-						<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(),
-									},
-								]"
+						<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"
 							>
-								<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" />
@@ -286,7 +123,6 @@ import {
 	CheckCircleIcon,
 	ClipboardCopyIcon,
 	DownloadIcon,
-	DropdownIcon,
 	EditIcon,
 	ExternalIcon,
 	EyeIcon,
@@ -297,26 +133,21 @@ import {
 	PackageIcon,
 	PlayIcon,
 	PlusIcon,
-	ServerIcon,
 	SettingsIcon,
 	StopCircleIcon,
 	TagCategoryGamepad2Icon as Gamepad2Icon,
 	TerminalSquareIcon,
 	TimerIcon,
 	UpdatedIcon,
-	UserPlusIcon,
 	XIcon,
 } from '@modrinth/assets'
 import {
 	Avatar,
-	BulletDivider,
-	ButtonStyled,
-	ContentPageHeader,
 	formatLoaderLabel,
 	injectNotificationManager,
 	LoaderIcon as ServerLoaderIcon,
 	NavTabs,
-	OverflowMenu,
+	PageHeader,
 	ServerOnlinePlayers,
 	ServerPing,
 	ServerRecentPlays,
@@ -774,6 +605,191 @@ 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/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 980001bf39..ecd60ae709 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -1964,6 +1964,9 @@
   "discover.install.heading.reset-modpack": {
     "message": "Selecting modpack to install after reset"
   },
+  "discover.install.world-fallback-name": {
+    "message": "Instance"
+  },
   "discover.seo.description": {
     "message": "Search and browse thousands of Minecraft {projectType} on Modrinth with instant, accurate search results. Our filters help you quickly find the best Minecraft {projectType}."
   },
@@ -3941,6 +3944,9 @@
   "servers.manage.instances.meta.title": {
     "message": "Instances - {server} - Modrinth"
   },
+  "servers.manage.instances.slot-name": {
+    "message": "Instance #{index}"
+  },
   "servers.notice.actions": {
     "message": "Actions"
   },
diff --git a/apps/frontend/src/middleware/server-instance-ready.ts b/apps/frontend/src/middleware/server-instance-ready.ts
index 376c9ad8f9..c094d752bd 100644
--- a/apps/frontend/src/middleware/server-instance-ready.ts
+++ b/apps/frontend/src/middleware/server-instance-ready.ts
@@ -50,8 +50,7 @@ export default defineNuxtRouteMiddleware(async (to) => {
 
 		const content = await queryClient.ensureQueryData({
 			queryKey: ['content', 'list', 'v1', serverId, worldId],
-			queryFn: () =>
-				client.archon.content_v1.getAddons(serverId, worldId, { from_modpack: false }),
+			queryFn: () => client.archon.content_v1.getAddons(serverId, worldId, { from_modpack: false }),
 			staleTime: 30_000,
 		})
 
diff --git a/apps/frontend/src/pages/[type]/[project].vue b/apps/frontend/src/pages/[type]/[project].vue
index a026bb9bb5..84215dbcfa 100644
--- a/apps/frontend/src/pages/[type]/[project].vue
+++ b/apps/frontend/src/pages/[type]/[project].vue
@@ -459,358 +459,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"
@@ -1044,7 +694,6 @@
 
 <script setup>
 import {
-	BookmarkIcon,
 	BookTextIcon,
 	CalendarIcon,
 	ChartIcon,
@@ -1060,7 +709,6 @@ import {
 	ModrinthIcon,
 	MoreVerticalIcon,
 	PlayIcon,
-	PlusIcon,
 	ReportIcon,
 	ScaleIcon,
 	ScanEyeIcon,
@@ -1069,7 +717,6 @@ import {
 	SettingsIcon,
 	VersionIcon,
 	WrenchIcon,
-	XIcon,
 } from '@modrinth/assets'
 import {
 	Admonition,
@@ -1081,12 +728,9 @@ import {
 	getTagMessage,
 	injectModrinthClient,
 	injectNotificationManager,
-	IntlFormatted,
 	NavTabs,
 	NewModal,
 	OpenInAppModal,
-	OverflowMenu,
-	PopoutMenu,
 	PROJECT_DEP_MARKER_QUERY,
 	ProjectBackgroundGradient,
 	ProjectEnvironmentModal,
@@ -1101,7 +745,6 @@ import {
 	ScrollablePanel,
 	ServersPromo,
 	StyledInput,
-	TagItem,
 	useDebugLogger,
 	useFormatDateTime,
 	useFormatPrice,
@@ -1113,7 +756,6 @@ import { capitalizeString, formatProjectType, renderString } from '@modrinth/uti
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
 import { useLocalStorage } from '@vueuse/core'
 import dayjs from 'dayjs'
-import { Tooltip } from 'floating-vue'
 import { nextTick, readonly, ref, useTemplateRef, watch } from 'vue'
 
 import { navigateTo } from '#app'
@@ -1124,6 +766,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 ProjectMemberHeader from '~/components/ui/ProjectMemberHeader.vue'
 import { getSignInRouteObj } from '~/composables/auth.ts'
 import { saveFeatureFlags } from '~/composables/featureFlags.ts'
@@ -1202,6 +845,7 @@ const projectV3Loaded = computed(() => !projectV3Pending.value || projectV3.valu
 const isServerProject = computed(() => projectV3.value?.minecraft_server != null)
 
 const projectEnvironmentModal = useTemplateRef('projectEnvironmentModal')
+const modalCollection = useTemplateRef('modal_collection')
 
 const baseId = useId()
 
@@ -1632,13 +1276,8 @@ const filteredAlpha = computed(() => {
 	)
 })
 
-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 (
@@ -2362,6 +2001,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..9465db1898 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),
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/PageHeader.vue b/packages/ui/src/components/base/PageHeader.vue
index 57bdd4fa24..01d7a2a7f2 100644
--- a/packages/ui/src/components/base/PageHeader.vue
+++ b/packages/ui/src/components/base/PageHeader.vue
@@ -85,13 +85,69 @@
 							>
 								{{ 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"
+							v-if="props.summary || $slots.summary"
 							class="m-0 max-w-[44rem] empty:hidden"
 							:class="[props.disableLineClamp ? '' : 'line-clamp-2']"
 						>
-							{{ props.summary }}
+							<slot name="summary">{{ props.summary }}</slot>
 						</p>
 					</div>
 
@@ -99,11 +155,14 @@
 						<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-if="item.to"
+									v-else-if="item.to"
 									v-tooltip="item.tooltip"
 									:to="item.to"
-									:aria-label="item.ariaLabel ?? item.label"
+									:aria-label="item.ariaLabel ?? item.label ?? ''"
 									:class="metadataClass(item, true)"
 								>
 									<component
@@ -119,7 +178,7 @@
 									v-else-if="item.onClick"
 									v-tooltip="item.tooltip"
 									type="button"
-									:aria-label="item.ariaLabel ?? item.label"
+									:aria-label="item.ariaLabel ?? item.label ?? ''"
 									:class="metadataClass(item, true)"
 									@click="item.onClick"
 								>
@@ -155,8 +214,14 @@
 
 			<div v-if="props.actions.length" 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-if="action.prompt"
+						v-else-if="action.prompt"
 						theme="dismissable-prompt"
 						:triggers="[]"
 						:shown="action.prompt.shown"
@@ -180,12 +245,29 @@
 							: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-if="action.to"
+								v-else-if="action.to"
 								v-tooltip="action.tooltip"
 								:to="action.to"
 								:aria-label="actionLabel(action)"
-								@click="dismissActionPrompt(action)"
+								@click="(event) => handleActionClick(action, event)"
 							>
 								<component
 									:is="action.icon"
@@ -202,7 +284,7 @@
 								type="button"
 								:disabled="action.disabled"
 								:aria-label="actionLabel(action)"
-								@click="handleActionClick(action)"
+								@click="(event) => handleActionClick(action, event)"
 							>
 								<component
 									:is="action.icon"
@@ -217,8 +299,16 @@
 						<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">
+									<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
@@ -232,6 +322,9 @@
 								<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>
@@ -253,11 +346,28 @@
 							: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-if="action.to"
+								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"
@@ -274,7 +384,7 @@
 								type="button"
 								:disabled="action.disabled"
 								:aria-label="actionLabel(action)"
-								@click="handleActionClick(action)"
+								@click="(event) => handleActionClick(action, event)"
 							>
 								<component
 									:is="action.icon"
@@ -296,11 +406,14 @@
 				<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-if="item.to"
+							v-else-if="item.to"
 							v-tooltip="item.tooltip"
 							:to="item.to"
-							:aria-label="item.ariaLabel ?? item.label"
+							:aria-label="item.ariaLabel ?? item.label ?? ''"
 							:class="metadataClass(item, true)"
 						>
 							<component
@@ -316,7 +429,7 @@
 							v-else-if="item.onClick"
 							v-tooltip="item.tooltip"
 							type="button"
-							:aria-label="item.ariaLabel ?? item.label"
+							:aria-label="item.ariaLabel ?? item.label ?? ''"
 							:class="metadataClass(item, true)"
 							@click="item.onClick"
 						>
@@ -363,6 +476,9 @@ 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 =
@@ -401,7 +517,7 @@ type PageHeaderLeading = {
 	class?: string
 	wrapperClass?: string
 	to?: PageHeaderTarget
-	onClick?: () => void | Promise<void>
+	onClick?: (event?: MouseEvent) => void | Promise<void>
 	tooltip?: string
 	ariaLabel?: string
 	color?: ButtonColor
@@ -409,9 +525,25 @@ type PageHeaderLeading = {
 	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?: () => void | Promise<void>
+	class?: string
+	style?: Record<string, string>
+}
+
 type PageHeaderMetadataItem = {
 	id: string
-	label: string
+	type?: 'text' | 'custom'
+	label?: string
 	icon?: Component
 	iconProps?: Record<string, unknown>
 	tooltip?: string
@@ -424,6 +556,8 @@ type PageHeaderMetadataItem = {
 type PageHeaderActionPrompt = {
 	title: string
 	description: string
+	badge?: string
+	footer?: string
 	dismissLabel?: string
 	shown?: boolean
 	placement?: string
@@ -433,6 +567,9 @@ type PageHeaderActionPrompt = {
 type PageHeaderAction = {
 	id: string
 	label: string
+	component?: Component
+	componentProps?: Record<string, unknown>
+	class?: string
 	icon?: Component
 	iconProps?: Record<string, unknown>
 	iconClass?: string
@@ -447,6 +584,7 @@ type PageHeaderAction = {
 	size?: ButtonSize
 	type?: ButtonType
 	joinedActions?: JoinedButtonAction[]
+	menuActions?: TeleportOverflowMenuItem[]
 	primaryDisabled?: boolean
 	dropdownDisabled?: boolean
 	primaryMuted?: boolean
@@ -458,6 +596,7 @@ const props = withDefaults(
 		header: string
 		summary?: string | null
 		leading?: PageHeaderLeading | PageHeaderLeading[] | null
+		badges?: PageHeaderBadge[]
 		metadata?: PageHeaderMetadataItem[]
 		actions?: PageHeaderAction[]
 		headerClass?: string
@@ -472,6 +611,7 @@ const props = withDefaults(
 	{
 		summary: null,
 		leading: null,
+		badges: () => [],
 		metadata: () => [],
 		actions: () => [],
 		headerClass: '',
@@ -506,6 +646,18 @@ function metadataClass(item: PageHeaderMetadataItem, interactive = false) {
 	]
 }
 
+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
 }
@@ -516,9 +668,9 @@ function dismissActionPrompt(action: PageHeaderAction) {
 	}
 }
 
-function handleActionClick(action: PageHeaderAction) {
+function handleActionClick(action: PageHeaderAction, event?: MouseEvent) {
 	dismissActionPrompt(action)
-	void action.onClick?.()
+	void action.onClick?.(event)
 }
 
 function joinedActionColor(color?: ButtonColor) {
diff --git a/packages/ui/src/components/base/TeleportOverflowMenu.vue b/packages/ui/src/components/base/TeleportOverflowMenu.vue
index 20d5b354d3..9150f87641 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
@@ -51,39 +59,41 @@
 								class="w-full !justify-start !whitespace-nowrap focus-visible:!outline-none"
 								: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-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 +105,48 @@
 </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
+	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 +154,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 +226,7 @@ const calculateMenuPosition = () => {
 
 const toggleMenu = (event: MouseEvent) => {
 	event.stopPropagation()
+	if (props.disabled) return
 	if (!props.hoverable) {
 		if (isOpen.value) {
 			closeMenu()
@@ -201,6 +237,7 @@ const toggleMenu = (event: MouseEvent) => {
 }
 
 const openMenu = () => {
+	if (props.disabled) return
 	isOpen.value = true
 	emit('open')
 	disableBodyScroll()
@@ -218,15 +255,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 +310,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 +472,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 0a89bc24d8..5eb6bc095d 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'
@@ -96,6 +95,11 @@ export type {
 	TimeFramePreset,
 } from './TimeFramePicker.vue'
 export { default as TimeFramePicker } from './TimeFramePicker.vue'
+export type {
+	Item as TeleportOverflowMenuItem,
+	Option as TeleportOverflowMenuOption,
+} from './TeleportOverflowMenu.vue'
+export { default as TeleportOverflowMenu } from './TeleportOverflowMenu.vue'
 export { default as Timeline } from './Timeline.vue'
 export { default as Toggle } from './Toggle.vue'
 export { default as UnsavedChangesPopup } from './UnsavedChangesPopup.vue'
diff --git a/packages/ui/src/components/project/ProjectHeader.vue b/packages/ui/src/components/project/ProjectHeader.vue
index 0f5235cf2f..d2838425cf 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,77 @@ 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
+}
+
 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/layouts/wrapped/hosting/manage/[id]/index.vue b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/index.vue
index 83a2c7eb4f..3a26412c8f 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/index.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/index.vue
@@ -746,21 +746,38 @@ const { data: serverFull } = useQuery({
 	queryFn: () => client.archon.servers_v1.get(props.serverId),
 })
 
+const routeInstanceId = ref<string | null>(getRouteParam(route.params.instance_id))
+
+watch(
+	() => [route.path, route.params.id, route.params.instance_id, props.serverId] as const,
+	() => {
+		if (!isRouteForManagedServer()) return
+		routeInstanceId.value = getRouteParam(route.params.instance_id)
+	},
+	{ immediate: true },
+)
+
 const worldId = computed(() => {
-	const routeInstanceId = getRouteParam(route.params.instance_id)
-	if (routeInstanceId) return routeInstanceId
+	if (routeInstanceId.value) return routeInstanceId.value
 	if (!serverFull.value) return null
 	const activeWorld = serverFull.value.worlds.find((w) => w.is_active)
 	return activeWorld?.id ?? serverFull.value.worlds[0]?.id ?? null
 })
 
-const isInstanceDetailRoute = computed(() => !!getRouteParam(route.params.instance_id))
+const isInstanceDetailRoute = computed(() => !!routeInstanceId.value)
 const activeWorldName = computed(() => {
 	if (!serverFull.value) return null
 	const activeWorld = serverFull.value.worlds.find((world) => world.is_active)
 	return activeWorld?.name ?? serverFull.value.worlds[0]?.name ?? null
 })
 
+function isRouteForManagedServer() {
+	const routeServerId = getRouteParam(route.params.id)
+	if (!routeServerId || routeServerId !== props.serverId) return false
+	const basePath = `/hosting/manage/${encodeURIComponent(routeServerId)}`
+	return route.path === basePath || route.path.startsWith(`${basePath}/`)
+}
+
 function getRouteParam(param: string | string[] | undefined): string | null {
 	if (Array.isArray(param)) return param[0] ?? null
 	return param ?? null
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/instances/index.vue b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/instances/index.vue
index ec6b87fe58..1aac22cc50 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/instances/index.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/instances/index.vue
@@ -73,7 +73,8 @@ const messages = defineMessages({
 	},
 	instanceInfoFiles: {
 		id: 'servers.manage.instances.info.files',
-		defaultMessage: 'Each instance has its own server files, worlds, installed content, and settings.',
+		defaultMessage:
+			'Each instance has its own server files, worlds, installed content, and settings.',
 	},
 })
 
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index c241213f5f..982ff0df31 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -4670,6 +4670,15 @@
   "servers.manage.instance.settings": {
     "defaultMessage": "Instance settings"
   },
+  "servers.manage.instances-hint.description": {
+    "defaultMessage": "Your server state has been converted into an instance."
+  },
+  "servers.manage.instances-hint.dismiss": {
+    "defaultMessage": "Don't show again"
+  },
+  "servers.manage.instances-hint.title": {
+    "defaultMessage": "New: Server Instances!"
+  },
   "servers.manage.instances.card.active": {
     "defaultMessage": "Active"
   },
@@ -4700,6 +4709,18 @@
   "servers.manage.instances.card.settings": {
     "defaultMessage": "Instance settings"
   },
+  "servers.manage.instances.info.definition": {
+    "defaultMessage": "An instance is a separate server setup."
+  },
+  "servers.manage.instances.info.files": {
+    "defaultMessage": "Each instance has its own server files, worlds, installed content, and settings."
+  },
+  "servers.manage.instances.info.header": {
+    "defaultMessage": "What is an instance?"
+  },
+  "servers.manage.instances.info.switching": {
+    "defaultMessage": "You can switch which instance your server runs."
+  },
   "servers.manage.instances.slot-name": {
     "defaultMessage": "Instance #{index}"
   },
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
index 2fd1376900..2fd13c3ca5 100644
--- a/packages/ui/src/stories/base/PageHeader.stories.ts
+++ b/packages/ui/src/stories/base/PageHeader.stories.ts
@@ -1,5 +1,9 @@
 import {
+	AffiliateIcon,
+	ClipboardCopyIcon,
+	DownloadIcon,
 	GlobeIcon,
+	HeartIcon,
 	LeftArrowIcon,
 	LinkIcon,
 	MoreVerticalIcon,
@@ -19,7 +23,7 @@ import ServerIcon from '../../components/servers/icons/ServerIcon.vue'
 const noop = () => undefined
 
 const meta = {
-	title: 'Base/PageHeader Prototype',
+	title: 'Base/PageHeader',
 	component: PageHeader,
 	parameters: {
 		layout: 'padded',
@@ -88,6 +92,67 @@ export const AppInstanceHeader: Story = {
 				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,
 			},
 		],
@@ -259,3 +324,30 @@ export const ServerPanelInstanceHeader: Story = {
 		],
 	},
 }
+
+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>
+		`,
+	}),
+}