diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index 1939fa8787..0afdda326b 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -459,6 +459,11 @@ const sidebarOverlayScrollbarsOptions = Object.freeze({
 	},
 })
 
+router.beforeEach(async (to) => {
+	const redirect = await resolveLegacyServerInstanceTabRedirect(to)
+	if (redirect) return redirect
+})
+
 router.beforeEach(() => {
 	suspensePending = false
 	if (routerToken) loading.end(routerToken)
@@ -490,6 +495,50 @@ function onSuspensePending() {
 	suspenseToken = loading.begin()
 }
 
+async function resolveLegacyServerInstanceTabRedirect(to) {
+	if (!['ServerManageContent', 'ServerManageFiles', 'ServerManageBackups'].includes(to.name)) {
+		return null
+	}
+
+	const serverId = getRouteParam(to.params.id)
+	if (!serverId) return null
+
+	const tabPath =
+		to.name === 'ServerManageFiles' ? '/files' : to.name === 'ServerManageBackups' ? '/backups' : ''
+	const instancesPath = `/hosting/manage/${encodeURIComponent(serverId)}/instances`
+
+	try {
+		const serverFull = await tauriApiClient.archon.servers_v1.get(serverId)
+		const world = serverFull.worlds.find((item) => item.is_active) ?? serverFull.worlds[0]
+		if (world) {
+			return {
+				path: `${instancesPath}/${encodeURIComponent(world.id)}${tabPath}`,
+				query: to.query,
+				hash: to.hash,
+				replace: true,
+			}
+		}
+	} catch {
+		return {
+			path: instancesPath,
+			query: to.query,
+			hash: to.hash,
+			replace: true,
+		}
+	}
+
+	return {
+		path: instancesPath,
+		query: to.query,
+		hash: to.hash,
+		replace: true,
+	}
+}
+
+function getRouteParam(param) {
+	return Array.isArray(param) ? param[0] : param
+}
+
 function onSuspenseResolve() {
 	if (suspenseToken) {
 		loading.end(suspenseToken)
diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index 51757b059d..1bbaae9ccf 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -143,6 +143,9 @@
   "app.browse.server.installing": {
     "message": "Installing"
   },
+  "app.browse.server.world-fallback-name": {
+    "message": "Instance"
+  },
   "app.creation-modal.installing-modpack.description": {
     "message": "{fileName}"
   },
diff --git a/apps/app-frontend/src/pages/Browse.vue b/apps/app-frontend/src/pages/Browse.vue
index e256d5b024..8c5c24617f 100644
--- a/apps/app-frontend/src/pages/Browse.vue
+++ b/apps/app-frontend/src/pages/Browse.vue
@@ -10,6 +10,7 @@ import {
 } from '@modrinth/assets'
 import type { BrowseInstallContentType, CardAction, ProjectType, Tags } from '@modrinth/ui'
 import {
+	BrowseInstallHeader,
 	BrowsePageLayout,
 	BrowseSidebar,
 	commonMessages,
@@ -22,8 +23,10 @@ import {
 	preferencesDiffer,
 	provideBrowseManager,
 	requestInstall,
+	SelectedProjectsFloatingBar,
 	useBrowseSearch,
 	useDebugLogger,
+	useStickyObserver,
 	useVIntl,
 } from '@modrinth/ui'
 import { useQueryClient } from '@tanstack/vue-query'
@@ -77,6 +80,7 @@ const {
 	isSetupServerContext,
 	effectiveServerWorldId,
 	serverContextServerData,
+	serverContextWorldName,
 	serverContentProjectIds,
 	queuedServerInstallProjectIds,
 	queuedServerInstallCount,
@@ -405,6 +409,10 @@ const messages = defineMessages({
 		id: 'app.browse.back-to-instance',
 		defaultMessage: 'Back to instance',
 	},
+	worldFallbackName: {
+		id: 'app.browse.server.world-fallback-name',
+		defaultMessage: 'Instance',
+	},
 	serverInstanceContentWarning: {
 		id: 'app.browse.server-instance-content-warning',
 		defaultMessage:
@@ -545,8 +553,9 @@ const selectableProjectTypes = computed(() => {
 const installContext = computed(() => {
 	if (isServerContext.value && serverContextServerData.value) {
 		return {
-			name: serverContextServerData.value.name,
+			name: serverContextWorldName.value ?? formatMessage(messages.worldFallbackName),
 			loader: serverContextServerData.value.loader ?? '',
+			loaderVersion: serverContextServerData.value.loader_version ?? '',
 			gameVersion: serverContextServerData.value.mc_version ?? '',
 			serverId: serverIdQuery.value,
 			upstream: serverContextServerData.value.upstream,
@@ -585,6 +594,11 @@ const installContext = computed(() => {
 	}
 	return null
 })
+const stickyInstallHeaderRef = ref<HTMLElement | null>(null)
+const { isStuck: isInstallHeaderStuck } = useStickyObserver(
+	stickyInstallHeaderRef,
+	'BrowseInstallHeader',
+)
 
 const installingProjectIds = ref<Set<string>>(new Set())
 
@@ -1031,6 +1045,17 @@ provideBrowseManager({
 
 <template>
 	<div class="flex flex-col gap-3 p-6">
+		<div
+			v-if="installContext"
+			ref="stickyInstallHeaderRef"
+			class="sticky top-0 z-20 -mx-6 -mt-6 rounded-tl-[--radius-xl] border-0 border-b border-solid bg-surface-1 p-3 border-surface-5"
+			:class="[isInstallHeaderStuck ? 'border-t' : '']"
+		>
+			<BrowseInstallHeader />
+		</div>
+
+		<SelectedProjectsFloatingBar v-if="installContext" />
+
 		<BrowsePageLayout>
 			<template #after>
 				<ContextMenu ref="contextMenuRef" @option-clicked="handleOptionsClick">
@@ -1057,6 +1082,7 @@ provideBrowseManager({
 			@browse-modpacks="() => {}"
 			@create="handleServerModpackFlowCreate"
 		/>
+
 		<Teleport to="#sidebar-teleport-target">
 			<BrowseSidebar />
 		</Teleport>
diff --git a/apps/app-frontend/src/pages/hosting/manage/Backups.vue b/apps/app-frontend/src/pages/hosting/manage/Backups.vue
index 0ebb7bd800..b62de2ba6d 100644
--- a/apps/app-frontend/src/pages/hosting/manage/Backups.vue
+++ b/apps/app-frontend/src/pages/hosting/manage/Backups.vue
@@ -13,7 +13,7 @@ const queryClient = useQueryClient()
 if (worldId.value) {
 	try {
 		await queryClient.ensureQueryData({
-			queryKey: ['backups', 'list', serverId],
+			queryKey: ['backups', 'list', serverId, worldId.value],
 			queryFn: () => client.archon.backups_v1.list(serverId, worldId.value!),
 			staleTime: 30_000,
 		})
diff --git a/apps/app-frontend/src/pages/hosting/manage/Content.vue b/apps/app-frontend/src/pages/hosting/manage/Content.vue
index ab7d242452..1306234cc3 100644
--- a/apps/app-frontend/src/pages/hosting/manage/Content.vue
+++ b/apps/app-frontend/src/pages/hosting/manage/Content.vue
@@ -13,7 +13,7 @@ const queryClient = useQueryClient()
 if (worldId.value) {
 	try {
 		await queryClient.ensureQueryData({
-			queryKey: ['content', 'list', 'v1', serverId],
+			queryKey: ['content', 'list', 'v1', serverId, worldId.value],
 			queryFn: () =>
 				client.archon.content_v1.getAddons(serverId, worldId.value!, { from_modpack: false }),
 			staleTime: 30_000,
diff --git a/apps/app-frontend/src/pages/hosting/manage/Index.vue b/apps/app-frontend/src/pages/hosting/manage/Index.vue
index f1e4388755..a4eb3e09ac 100644
--- a/apps/app-frontend/src/pages/hosting/manage/Index.vue
+++ b/apps/app-frontend/src/pages/hosting/manage/Index.vue
@@ -4,7 +4,6 @@
 			:server-id="serverId"
 			:reload-page="() => router.go(0)"
 			:resolve-viewer="resolveViewer"
-			:show-copy-id-action="themeStore.devMode"
 			:auth-user="authUser"
 			:navigate-to-billing="() => openUrl('https://modrinth.com/settings/billing')"
 			:navigate-to-servers="() => router.push('/hosting/manage')"
@@ -26,7 +25,7 @@
 			"
 		>
 			<template #default="{ onReinstall, onReinstallFailed }">
-				<RouterView v-slot="{ Component }">
+				<RouterView v-slot="{ Component }" :route="managedRoute">
 					<template v-if="Component">
 						<Suspense>
 							<component
@@ -47,26 +46,37 @@ 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'
 import { get as getCreds } from '@/helpers/mr_auth'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
-import { useTheming } from '@/store/theme'
 
 const route = useRoute()
 const router = useRouter()
 const auth = injectAuth()
 const client = injectModrinthClient()
 const queryClient = useQueryClient()
-const themeStore = useTheming()
 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 {
@@ -93,7 +103,7 @@ watch(
 			breadcrumbs.setName('Server', server.name)
 			breadcrumbs.setContext({
 				name: server.name,
-				link: `/hosting/manage/${serverId.value}/content`,
+				link: `/hosting/manage/${serverId.value}/instances`,
 			})
 		}
 	},
diff --git a/apps/app-frontend/src/pages/hosting/manage/Instance.vue b/apps/app-frontend/src/pages/hosting/manage/Instance.vue
new file mode 100644
index 0000000000..703c5eb42c
--- /dev/null
+++ b/apps/app-frontend/src/pages/hosting/manage/Instance.vue
@@ -0,0 +1,16 @@
+<template>
+	<ServersManageInstanceRootLayout>
+		<RouterView v-slot="{ Component }">
+			<template v-if="Component">
+				<Suspense>
+					<component :is="Component" />
+				</Suspense>
+			</template>
+		</RouterView>
+	</ServersManageInstanceRootLayout>
+</template>
+
+<script setup lang="ts">
+import { ServersManageInstanceRootLayout } from '@modrinth/ui'
+import { RouterView } from 'vue-router'
+</script>
diff --git a/apps/app-frontend/src/pages/hosting/manage/Instances.vue b/apps/app-frontend/src/pages/hosting/manage/Instances.vue
new file mode 100644
index 0000000000..496583f641
--- /dev/null
+++ b/apps/app-frontend/src/pages/hosting/manage/Instances.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { ServersManageInstancesPage } from '@modrinth/ui'
+</script>
+
+<template>
+	<ServersManageInstancesPage />
+</template>
diff --git a/apps/app-frontend/src/pages/hosting/manage/Worlds.vue b/apps/app-frontend/src/pages/hosting/manage/Worlds.vue
deleted file mode 100644
index 3df6f264ee..0000000000
--- a/apps/app-frontend/src/pages/hosting/manage/Worlds.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-import { ServersManageWorldsPage } from '@modrinth/ui'
-</script>
-
-<template>
-	<ServersManageWorldsPage />
-</template>
diff --git a/apps/app-frontend/src/pages/hosting/manage/index.js b/apps/app-frontend/src/pages/hosting/manage/index.js
index e06f46e2a2..e56483b8aa 100644
--- a/apps/app-frontend/src/pages/hosting/manage/index.js
+++ b/apps/app-frontend/src/pages/hosting/manage/index.js
@@ -2,7 +2,8 @@ import Backups from './Backups.vue'
 import Content from './Content.vue'
 import Files from './Files.vue'
 import Index from './Index.vue'
+import Instance from './Instance.vue'
+import Instances from './Instances.vue'
 import Overview from './Overview.vue'
-import Worlds from './Worlds.vue'
 
-export { Backups, Content, Files, Index, Overview, Worlds }
+export { Backups, Content, Files, Index, Instance, Instances, Overview }
diff --git a/apps/app-frontend/src/pages/instance/Index.vue b/apps/app-frontend/src/pages/instance/Index.vue
index f3c76fa531..70429e713b 100644
--- a/apps/app-frontend/src/pages/instance/Index.vue
+++ b/apps/app-frontend/src/pages/instance/Index.vue
@@ -13,200 +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.path"
-					/>
-				</template>
-				<template #title>
-					{{ instance.name }}
-				</template>
-				<template #stats>
+			<PageHeader
+				:header="instance.name"
+				:leading="instanceHeaderLeading"
+				:metadata="instanceHeaderMetadata"
+				:actions="instanceHeaderActions"
+			>
+				<template #metadata-server-details>
 					<div class="flex items-center flex-wrap gap-2">
-						<template v-if="!isServerInstance">
-							<div class="flex items-center gap-2 capitalize font-medium">
-								{{ instance.loader }} {{ instance.game_version }}
-							</div>
-
-							<div class="w-1.5 h-1.5 rounded-full bg-surface-5"></div>
-
-							<div class="flex items-center gap-2 font-medium">
-								<template v-if="timePlayed > 0">
-									{{ timePlayedHumanized }}
-								</template>
-								<template v-else> Never played </template>
-							</div>
-						</template>
-
-						<template 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.path"
-									size="24px"
-								/>
-								<router-link
-									:to="`/project/${linkedProjectV3.slug ?? linkedProjectV3.id}`"
-									class="hover:underline text-primary truncate"
-								>
-									{{ linkedProjectV3.name }}
-								</router-link>
-							</div>
+							<ServerPing v-if="ping" :ping="ping" />
 						</template>
-					</div>
-				</template>
-				<template #actions>
-					<div class="flex gap-2">
-						<ButtonStyled
-							v-if="
-								[
-									'installing',
-									'pack_installing',
-									'pack_installed',
-									'not_installed',
-									'minecraft_installing',
-								].includes(instance.install_stage)
-							"
-							color="brand"
-							size="large"
-						>
-							<button disabled>Installing...</button>
-						</ButtonStyled>
-						<ButtonStyled
-							v-else-if="instance.install_stage !== 'installed'"
-							color="brand"
-							size="large"
-						>
-							<button @click="repairInstance()">
-								<DownloadIcon />
-								Repair
-							</button>
-						</ButtonStyled>
-						<ButtonStyled v-else-if="playing === true" color="red" size="large">
-							<button :disabled="stopping" @click="stopInstance('InstancePage')">
-								<StopCircleIcon />
-								{{ stopping ? 'Stopping...' : 'Stop' }}
-							</button>
-						</ButtonStyled>
-						<ButtonStyled
-							v-else-if="playing === false && loading === false && !isServerInstance"
-							color="brand"
-							size="large"
-						>
-							<button @click="startInstance('InstancePage')">
-								<PlayIcon />
-								Play
-							</button>
-						</ButtonStyled>
+
+						<ServerRegion v-if="minecraftServer?.region" :region="minecraftServer?.region" />
+
 						<div
-							v-else-if="playing === false && loading === false && isServerInstance"
-							class="joined-buttons"
-						>
-							<ButtonStyled color="brand" size="large">
-								<button @click="handlePlayServer()">
-									<PlayIcon />
-									Play
-								</button>
-							</ButtonStyled>
-							<ButtonStyled color="brand" size="large">
-								<OverflowMenu
-									:options="[
-										{
-											id: 'join_server',
-											action: () => handlePlayServer(),
-										},
-										{
-											id: 'launch_instance',
-											action: () => startInstance('InstancePage'),
-										},
-									]"
-								>
-									<div class="w-0 text-xl relative top-0.5 right-2.5">
-										<DropdownIcon />
-									</div>
-
-									<template #join_server>
-										<PlayIcon />
-										Join server
-									</template>
-									<template #launch_instance>
-										<PlayIcon />
-										Launch instance
-									</template>
-								</OverflowMenu>
-							</ButtonStyled>
-						</div>
-						<ButtonStyled
-							v-else-if="loading === true && playing === false"
-							color="brand"
-							size="large"
-						>
-							<button disabled>Starting...</button>
-						</ButtonStyled>
-						<ButtonStyled circular size="large">
-							<button v-tooltip="'Instance settings'" @click="settingsModal?.show()">
-								<SettingsIcon />
-							</button>
-						</ButtonStyled>
-						<ButtonStyled type="transparent" circular size="large">
-							<OverflowMenu
-								:options="[
-									{
-										id: 'open-folder',
-										action: () => {
-											if (instance) showProfileInFolder(instance.path)
-										},
-									},
-									{
-										id: 'export-mrpack',
-										action: () => exportModal?.show(),
-									},
-								]"
+							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.path"
+								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>
-							</OverflowMenu>
-						</ButtonStyled>
+								{{ linkedProjectV3.name }}
+							</router-link>
+						</div>
 					</div>
 				</template>
-			</ContentPageHeader>
+			</PageHeader>
 		</div>
 		<div :class="['px-6', { 'shrink-0': isFixedRender }]">
 			<NavTabs :links="tabs" />
@@ -265,7 +122,6 @@ import {
 	CheckCircleIcon,
 	ClipboardCopyIcon,
 	DownloadIcon,
-	DropdownIcon,
 	EditIcon,
 	ExternalIcon,
 	EyeIcon,
@@ -276,26 +132,27 @@ import {
 	PackageIcon,
 	PlayIcon,
 	PlusIcon,
-	ServerIcon,
 	SettingsIcon,
 	StopCircleIcon,
+	TagCategoryGamepad2Icon as Gamepad2Icon,
 	TerminalSquareIcon,
+	TimerIcon,
 	UpdatedIcon,
-	UserPlusIcon,
 	XIcon,
 } from '@modrinth/assets'
 import {
 	Avatar,
-	ButtonStyled,
-	ContentPageHeader,
+	formatLoaderLabel,
 	injectNotificationManager,
+	LoaderIcon as ServerLoaderIcon,
 	NavTabs,
-	OverflowMenu,
+	PageHeader,
 	ServerOnlinePlayers,
 	ServerPing,
 	ServerRecentPlays,
 	ServerRegion,
 } from '@modrinth/ui'
+import type { Loaders } from '@modrinth/utils'
 import { useQueryClient } from '@tanstack/vue-query'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import dayjs from 'dayjs'
@@ -645,6 +502,16 @@ const timePlayed = computed(() => {
 		: 0
 })
 
+const loaderDisplayName = computed(() =>
+	instance.value ? (formatLoaderLabel(instance.value.loader) as Loaders) : null,
+)
+
+const loaderLabel = computed(() =>
+	instance.value && loaderDisplayName.value
+		? [loaderDisplayName.value, instance.value.loader_version].filter(Boolean).join(' ')
+		: '',
+)
+
 const timePlayedHumanized = computed(() => {
 	const duration = dayjs.duration(timePlayed.value, 'seconds')
 	const hours = Math.floor(duration.asHours())
@@ -661,6 +528,183 @@ const timePlayedHumanized = computed(() => {
 	return seconds + ' second' + (seconds > 1 ? 's' : '')
 })
 
+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?.path,
+}))
+
+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,
+			},
+		},
+		{
+			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 showProfileInFolder(instance.value.path)
+				},
+			},
+			{
+				id: 'export-mrpack',
+				label: 'Export modpack',
+				icon: PackageIcon,
+				action: () => exportModal.value?.show(),
+			},
+		],
+	},
+])
+
 onUnmounted(() => {
 	unlistenProcesses()
 	unlistenProfiles()
diff --git a/apps/app-frontend/src/pages/project/Index.vue b/apps/app-frontend/src/pages/project/Index.vue
index 035d12899f..59f4686a39 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,
@@ -501,6 +387,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/app-frontend/src/providers/setup/server-install-content.ts b/apps/app-frontend/src/providers/setup/server-install-content.ts
index 600c877866..3dffc788b0 100644
--- a/apps/app-frontend/src/providers/setup/server-install-content.ts
+++ b/apps/app-frontend/src/providers/setup/server-install-content.ts
@@ -52,6 +52,7 @@ export interface ServerInstallContentContext {
 	isSetupServerContext: ComputedRef<boolean>
 	effectiveServerWorldId: ComputedRef<string | null>
 	serverContextServerData: Ref<Archon.Servers.v0.Server | null>
+	serverContextWorldName: ComputedRef<string | null>
 	serverContentProjectIds: Ref<Set<string>>
 	queuedServerInstallProjectIds: ComputedRef<Set<string>>
 	queuedServerInstallCount: ComputedRef<number>
@@ -224,6 +225,7 @@ export function createServerInstallContent(opts: {
 
 	const serverContextWorldId = ref<string | null>(worldIdQuery.value)
 	const serverContextServerData = ref<Archon.Servers.v0.Server | null>(null)
+	const serverContextServerFull = ref<Archon.Servers.v1.ServerFull | null>(null)
 	const serverContentProjectIds = ref<Set<string>>(new Set())
 	const serverContentInstallKeys = ref<Set<string>>(new Set())
 	const queuedServerInstalls = ref<Map<string, BrowseInstallPlan<InstallableSearchResult>>>(
@@ -241,6 +243,18 @@ export function createServerInstallContent(opts: {
 	const isInstallingQueuedServerInstalls = ref(false)
 	const queuedInstallProgress = ref({ completed: 0, total: 0 })
 	const effectiveServerWorldId = computed(() => worldIdQuery.value ?? serverContextWorldId.value)
+	const serverContextWorld = computed(() => {
+		const serverFull = serverContextServerFull.value
+		if (!serverFull) return null
+
+		const worldId = effectiveServerWorldId.value
+		if (worldId) {
+			return serverFull.worlds.find((world) => world.id === worldId) ?? null
+		}
+
+		return serverFull.worlds.find((world) => world.is_active) ?? serverFull.worlds[0] ?? null
+	})
+	const serverContextWorldName = computed(() => serverContextWorld.value?.name ?? null)
 	const serverBackUrl = computed(() => {
 		const sid = serverIdQuery.value
 		if (!sid) return '/hosting/manage'
@@ -250,7 +264,7 @@ export function createServerInstallContent(opts: {
 		if (serverFlowFrom.value === 'reset-server') {
 			return `/hosting/manage/${sid}?openSettings=installation`
 		}
-		return `/hosting/manage/${sid}/content`
+		return getServerInstanceContentPath(sid, effectiveServerWorldId.value)
 	})
 	const serverBackLabel = computed(() => {
 		if (serverFlowFrom.value === 'onboarding') return 'Back to setup'
@@ -264,9 +278,19 @@ export function createServerInstallContent(opts: {
 		return 'Installing content'
 	})
 
+	async function getServerContextServerFull(serverId: string) {
+		if (serverContextServerFull.value?.id === serverId) {
+			return serverContextServerFull.value
+		}
+
+		const server = await client.archon.servers_v1.get(serverId)
+		serverContextServerFull.value = server
+		return server
+	}
+
 	async function resolveServerContextWorldId(serverId: string) {
 		try {
-			const server = await client.archon.servers_v1.get(serverId)
+			const server = await getServerContextServerFull(serverId)
 			const activeWorld = server.worlds.find((world) => world.is_active)
 			return activeWorld?.id ?? server.worlds[0]?.id ?? null
 		} catch (err) {
@@ -302,6 +326,11 @@ export function createServerInstallContent(opts: {
 		} catch (err) {
 			handleError(err as Error)
 		}
+		try {
+			await getServerContextServerFull(sid)
+		} catch (err) {
+			handleError(err as Error)
+		}
 
 		let resolvedWorldId = effectiveServerWorldId.value
 		if (!resolvedWorldId) {
@@ -321,6 +350,7 @@ export function createServerInstallContent(opts: {
 		watch([serverIdQuery, effectiveServerWorldId], async ([sid, wid], [prevSid, prevWid]) => {
 			if (!sid) {
 				serverContextServerData.value = null
+				serverContextServerFull.value = null
 				serverContentProjectIds.value = new Set()
 				serverContentInstallKeys.value = new Set()
 				setQueuedServerInstallPlans(new Map())
@@ -328,6 +358,8 @@ export function createServerInstallContent(opts: {
 			}
 
 			if (sid !== prevSid) {
+				serverContextWorldId.value = worldIdQuery.value
+				serverContextServerFull.value = null
 				serverContentProjectIds.value = new Set()
 				serverContentInstallKeys.value = new Set()
 				queuedServerInstalls.value = readStoredServerInstallQueue(sid, wid)
@@ -336,6 +368,15 @@ export function createServerInstallContent(opts: {
 				} catch (err) {
 					handleError(err as Error)
 				}
+				try {
+					const serverFull = await getServerContextServerFull(sid)
+					if (!worldIdQuery.value) {
+						const activeWorld = serverFull.worlds.find((world) => world.is_active)
+						serverContextWorldId.value = activeWorld?.id ?? serverFull.worlds[0]?.id ?? null
+					}
+				} catch (err) {
+					handleError(err as Error)
+				}
 			}
 
 			if (wid !== prevWid) {
@@ -422,7 +463,7 @@ export function createServerInstallContent(opts: {
 		if (isInstallingQueuedServerInstalls.value) return false
 
 		if (!serverId || !worldId) {
-			handleError(new Error('No server world is available for install.'))
+			handleError(new Error('No server instance is available for install.'))
 			return false
 		}
 
@@ -550,7 +591,7 @@ export function createServerInstallContent(opts: {
 
 			if (serverFlowFrom.value === 'onboarding') {
 				await client.archon.servers_v1.endIntro(sid)
-				await router.push(`/hosting/manage/${sid}/content`)
+				await router.push(getServerInstanceContentPath(sid, wid))
 				return
 			}
 
@@ -565,6 +606,11 @@ export function createServerInstallContent(opts: {
 		serverContentProjectIds.value = new Set([...serverContentProjectIds.value, id])
 	}
 
+	function getServerInstanceContentPath(serverId: string, worldId: string | null) {
+		const base = `/hosting/manage/${encodeURIComponent(serverId)}/instances`
+		return worldId ? `${base}/${encodeURIComponent(worldId)}` : base
+	}
+
 	return {
 		serverIdQuery,
 		worldIdQuery,
@@ -575,6 +621,7 @@ export function createServerInstallContent(opts: {
 		isSetupServerContext,
 		effectiveServerWorldId,
 		serverContextServerData,
+		serverContextWorldName,
 		serverContentProjectIds,
 		queuedServerInstallProjectIds,
 		queuedServerInstallCount,
diff --git a/apps/app-frontend/src/routes.js b/apps/app-frontend/src/routes.js
index 410869c46a..2e4fa24727 100644
--- a/apps/app-frontend/src/routes.js
+++ b/apps/app-frontend/src/routes.js
@@ -58,12 +58,46 @@ export default new createRouter({
 					},
 				},
 				{
-					path: 'worlds',
-					name: 'ServerManageWorlds',
-					component: Hosting.Worlds,
+					path: 'instances',
+					name: 'ServerManageInstances',
+					component: Hosting.Instances,
+					meta: {
+						breadcrumb: [{ name: '?Server' }],
+					},
+				},
+				{
+					path: 'instances/:instance_id',
+					name: 'ServerManageInstance',
+					component: Hosting.Instance,
 					meta: {
 						breadcrumb: [{ name: '?Server' }],
 					},
+					children: [
+						{
+							path: '',
+							name: 'ServerManageInstanceContent',
+							component: Hosting.Content,
+							meta: {
+								breadcrumb: [{ name: '?Server' }],
+							},
+						},
+						{
+							path: 'files',
+							name: 'ServerManageInstanceFiles',
+							component: Hosting.Files,
+							meta: {
+								breadcrumb: [{ name: '?Server' }],
+							},
+						},
+						{
+							path: 'backups',
+							name: 'ServerManageInstanceBackups',
+							component: Hosting.Backups,
+							meta: {
+								breadcrumb: [{ name: '?Server' }],
+							},
+						},
+					],
 				},
 				{
 					path: 'files',
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/composables/use-server-install-content.ts b/apps/frontend/src/composables/use-server-install-content.ts
index 75b3c0d232..fa106fc8f4 100644
--- a/apps/frontend/src/composables/use-server-install-content.ts
+++ b/apps/frontend/src/composables/use-server-install-content.ts
@@ -65,7 +65,7 @@ const messages = defineMessages({
 	},
 	noServerWorld: {
 		id: 'discover.install.error.no-server-world',
-		defaultMessage: 'No server world is available for install.',
+		defaultMessage: 'No server instance is available for install.',
 	},
 	backToSetup: {
 		id: 'discover.install.back-to-setup',
@@ -83,6 +83,10 @@ const messages = defineMessages({
 		id: 'discover.install.heading.reset-modpack',
 		defaultMessage: 'Selecting modpack to install after reset',
 	},
+	worldFallbackName: {
+		id: 'discover.install.world-fallback-name',
+		defaultMessage: 'Instance',
+	},
 })
 
 function getQueuedInstallOwnerFallback(project: ServerInstallSearchResult) {
@@ -145,6 +149,11 @@ export function useServerInstallContent({
 			return enabled
 		}),
 	})
+	const { data: serverFullData } = useQuery({
+		queryKey: computed(() => ['servers', 'v1', 'detail', currentServerId.value ?? ''] as const),
+		queryFn: () => client.archon.servers_v1.get(currentServerId.value!),
+		enabled: computed(() => !!currentServerId.value),
+	})
 
 	watch(serverData, (val) =>
 		debug('serverData changed:', val?.server_id, val?.name, val?.loader, val?.mc_version),
@@ -187,7 +196,10 @@ export function useServerInstallContent({
 		},
 	}
 
-	const contentQueryKey = computed(() => ['content', 'list', currentServerId.value ?? ''] as const)
+	const contentQueryKey = computed(
+		() =>
+			['content', 'list', 'v1', currentServerId.value ?? '', currentWorldId.value ?? null] as const,
+	)
 	const { data: serverContentData, error: serverContentError } = useQuery({
 		queryKey: contentQueryKey,
 		queryFn: () =>
@@ -625,7 +637,9 @@ export function useServerInstallContent({
 			if (fromContext.value === 'onboarding') {
 				await client.archon.servers_v1.endIntro(currentServerId.value)
 				queryClient.invalidateQueries({ queryKey: ['servers', 'detail', currentServerId.value] })
-				navigateTo(`/hosting/manage/${currentServerId.value}/content`)
+				navigateTo(
+					getServerInstanceContentPath(currentServerId.value, currentWorldId.value ?? null),
+				)
 			} else {
 				navigateTo(`/hosting/manage/${currentServerId.value}?openSettings=installation`)
 			}
@@ -641,9 +655,14 @@ export function useServerInstallContent({
 		if (fromContext.value === 'onboarding') return `/hosting/manage/${id}?resumeModal=setup-type`
 		if (fromContext.value === 'reset-server')
 			return `/hosting/manage/${id}?openSettings=installation`
-		return `/hosting/manage/${id}/content`
+		return getServerInstanceContentPath(id, currentWorldId.value)
 	})
 
+	function getServerInstanceContentPath(serverId: string, worldId: string | null) {
+		const base = `/hosting/manage/${encodeURIComponent(serverId)}/instances`
+		return worldId ? `${base}/${encodeURIComponent(worldId)}` : base
+	}
+
 	const serverBackLabel = computed(() => {
 		if (fromContext.value === 'onboarding') return formatMessage(messages.backToSetup)
 		if (fromContext.value === 'reset-server') return formatMessage(messages.cancelReset)
@@ -655,13 +674,26 @@ export function useServerInstallContent({
 			? formatMessage(messages.resetModpackHeading)
 			: formatMessage(commonMessages.installingContentLabel),
 	)
+	const currentWorld = computed(() => {
+		const full = serverFullData.value
+		if (!full) return null
+
+		const worldId = currentWorldId.value
+		if (worldId) {
+			return full.worlds.find((world) => world.id === worldId) ?? null
+		}
+
+		return full.worlds.find((world) => world.is_active) ?? full.worlds[0] ?? null
+	})
 
 	const installContext = computed(() => {
 		if (!serverData.value) return null
 		return {
-			name: serverData.value.name,
-			loader: serverData.value.loader ?? '',
-			gameVersion: serverData.value.mc_version ?? '',
+			name: currentWorld.value?.name ?? formatMessage(messages.worldFallbackName),
+			loader: currentWorld.value?.content?.modloader ?? serverData.value.loader ?? '',
+			loaderVersion:
+				currentWorld.value?.content?.modloader_version ?? serverData.value.loader_version ?? '',
+			gameVersion: currentWorld.value?.content?.game_version ?? serverData.value.mc_version ?? '',
 			serverId: currentServerId.value,
 			upstream: serverData.value.upstream,
 			iconSrc: serverIcon.value,
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 5816a57107..271d531b2c 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -1353,7 +1353,7 @@
     "message": "Cancel reset"
   },
   "discover.install.error.no-server-world": {
-    "message": "No server world is available for install."
+    "message": "No server instance is available for install."
   },
   "discover.install.error.unsupported-content-type": {
     "message": "This content type cannot be installed to a server from browse."
@@ -1361,6 +1361,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, select, mod {mods} modpack {modpacks} resourcepack {resource packs} shader {shaders} plugin {plugins} datapack {datapacks} other {projects}} on Modrinth with instant, accurate search results. Our filters help you quickly find the best Minecraft {projectType, select, mod {mods} modpack {modpacks} resourcepack {resource packs} shader {shaders} plugin {plugins} datapack {datapacks} other {projects}}."
   },
@@ -3290,8 +3293,11 @@
   "servers.manage.content.title": {
     "message": "Content - {serverName} - Modrinth"
   },
-  "servers.manage.worlds.meta.title": {
-    "message": "Worlds - {server} - Modrinth"
+  "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
new file mode 100644
index 0000000000..c094d752bd
--- /dev/null
+++ b/apps/frontend/src/middleware/server-instance-ready.ts
@@ -0,0 +1,84 @@
+import { useAppQueryClient } from '~/composables/query-client'
+import { createModrinthClient } from '~/helpers/api.ts'
+
+export default defineNuxtRouteMiddleware(async (to) => {
+	const serverId = getRouteParam(to.params.id)
+	const worldId = getRouteParam(to.params.instance_id)
+
+	if (!serverId || !worldId) return
+
+	if (import.meta.client) startLoading()
+
+	try {
+		const auth = await useAuth()
+		if (!auth.value.token) return
+
+		const config = useRuntimeConfig()
+		const queryClient = useAppQueryClient()
+		const client = createModrinthClient(auth, {
+			apiBaseUrl: config.public.apiBaseUrl.replace('/v2/', '/'),
+			archonBaseUrl: config.public.pyroBaseUrl.replace('/v2/', '/'),
+			rateLimitKey: config.rateLimitKey,
+		})
+
+		await queryClient.ensureQueryData({
+			queryKey: ['servers', 'v1', 'detail', serverId],
+			queryFn: () => client.archon.servers_v1.get(serverId),
+			staleTime: 30_000,
+		})
+
+		const tab = getInstanceTab(to.path)
+
+		if (tab === 'backups') {
+			await queryClient.ensureQueryData({
+				queryKey: ['backups', 'list', serverId, worldId],
+				queryFn: () => client.archon.backups_v1.list(serverId, worldId),
+				staleTime: 30_000,
+			})
+			return
+		}
+
+		if (tab === 'files') {
+			const path = typeof to.query.path === 'string' ? to.query.path : '/'
+			await queryClient.ensureQueryData({
+				queryKey: ['files', serverId, path],
+				queryFn: () => client.kyros.files_v0.listDirectory(path, 1, 2000),
+				staleTime: 30_000,
+			})
+			return
+		}
+
+		const content = await queryClient.ensureQueryData({
+			queryKey: ['content', 'list', 'v1', serverId, worldId],
+			queryFn: () => client.archon.content_v1.getAddons(serverId, worldId, { from_modpack: false }),
+			staleTime: 30_000,
+		})
+
+		const modpackProjectId =
+			content.modpack?.spec.platform === 'modrinth' ? content.modpack.spec.project_id : null
+
+		if (modpackProjectId) {
+			await queryClient.ensureQueryData({
+				queryKey: ['labrinth', 'project', modpackProjectId],
+				queryFn: () => client.labrinth.projects_v2.get(modpackProjectId),
+				staleTime: 30_000,
+			})
+		}
+	} catch {
+		// Let mounted layouts' useQuery surface errors; do not fail route setup.
+	} finally {
+		if (import.meta.client) stopLoading()
+	}
+})
+
+function getRouteParam(param: string | string[] | undefined): string | null {
+	if (Array.isArray(param)) return param[0] ?? null
+	return param ?? null
+}
+
+function getInstanceTab(path: string): 'content' | 'files' | 'backups' {
+	const segments = path.split('/').filter(Boolean)
+	const lastSegment = segments[segments.length - 1]
+	if (lastSegment === 'files') return 'files'
+	return lastSegment === 'backups' ? 'backups' : 'content'
+}
diff --git a/apps/frontend/src/middleware/server-instance-tabs.global.ts b/apps/frontend/src/middleware/server-instance-tabs.global.ts
new file mode 100644
index 0000000000..761373af1f
--- /dev/null
+++ b/apps/frontend/src/middleware/server-instance-tabs.global.ts
@@ -0,0 +1,40 @@
+import { createModrinthClient } from '~/helpers/api.ts'
+
+export default defineNuxtRouteMiddleware(async (to) => {
+	const match = to.path.match(/^\/hosting\/manage\/([^/]+)\/(content|files|backups)\/?$/)
+	if (!match) return
+
+	const serverId = decodeURIComponent(match[1])
+	const tab = match[2]
+	const instancesPath = `/hosting/manage/${encodeURIComponent(serverId)}/instances`
+	const tabPath = tab === 'content' ? '' : `/${tab}`
+	const auth = await useAuth()
+
+	if (auth.value.token) {
+		try {
+			const config = useRuntimeConfig()
+			const client = createModrinthClient(auth, {
+				apiBaseUrl: config.public.apiBaseUrl.replace('/v2/', '/'),
+				archonBaseUrl: config.public.pyroBaseUrl.replace('/v2/', '/'),
+				rateLimitKey: config.rateLimitKey,
+			})
+			const serverFull = await client.archon.servers_v1.get(serverId)
+			const world = serverFull.worlds.find((item) => item.is_active) ?? serverFull.worlds[0]
+
+			if (world) {
+				return navigateTo(
+					{
+						path: `${instancesPath}/${encodeURIComponent(world.id)}${tabPath}`,
+						query: to.query,
+						hash: to.hash,
+					},
+					{ replace: true },
+				)
+			}
+		} catch {
+			return navigateTo({ path: instancesPath, query: to.query, hash: to.hash }, { replace: true })
+		}
+	}
+
+	return navigateTo({ path: instancesPath, query: to.query, hash: to.hash }, { replace: true })
+})
diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index 0e4ae85771..19fb8f8c76 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].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-id-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-id-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-id-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-id-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"
@@ -1042,7 +692,6 @@
 
 <script setup>
 import {
-	BookmarkIcon,
 	BookTextIcon,
 	CalendarIcon,
 	ChartIcon,
@@ -1058,7 +707,6 @@ import {
 	ModrinthIcon,
 	MoreVerticalIcon,
 	PlayIcon,
-	PlusIcon,
 	ReportIcon,
 	ScaleIcon,
 	ScanEyeIcon,
@@ -1067,7 +715,6 @@ import {
 	SettingsIcon,
 	VersionIcon,
 	WrenchIcon,
-	XIcon,
 } from '@modrinth/assets'
 import {
 	Admonition,
@@ -1079,12 +726,9 @@ import {
 	getTagMessage,
 	injectModrinthClient,
 	injectNotificationManager,
-	IntlFormatted,
 	NavTabs,
 	NewModal,
 	OpenInAppModal,
-	OverflowMenu,
-	PopoutMenu,
 	PROJECT_DEP_MARKER_QUERY,
 	ProjectBackgroundGradient,
 	ProjectEnvironmentModal,
@@ -1099,7 +743,6 @@ import {
 	ScrollablePanel,
 	ServersPromo,
 	StyledInput,
-	TagItem,
 	useDebugLogger,
 	useFormatDateTime,
 	useFormatPrice,
@@ -1111,7 +754,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'
@@ -1122,6 +764,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.js'
 import { saveFeatureFlags } from '~/composables/featureFlags.ts'
@@ -1197,6 +840,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()
 
@@ -1627,13 +1271,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 (
@@ -2360,6 +1999,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-id-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/discover.vue b/apps/frontend/src/pages/discover.vue
index 52c17c4638..7b0f537acb 100644
--- a/apps/frontend/src/pages/discover.vue
+++ b/apps/frontend/src/pages/discover.vue
@@ -4,7 +4,6 @@ import { commonProjectTypeCategoryMessages, NavTabs, useVIntl } from '@modrinth/
 const { formatMessage } = useVIntl()
 
 const flags = useFeatureFlags()
-const cosmetics = useCosmetics()
 const route = useRoute()
 
 const allowTabChanging = computed(() => !route.query.sid)
@@ -48,15 +47,13 @@ const selectableProjectTypes = [
 ]
 </script>
 <template>
-	<div class="new-page sidebar" :class="{ 'alt-layout': !cosmetics.rightSearchLayout }">
-		<section class="normal-page__header mb-4 flex flex-col gap-4">
-			<NavTabs
-				v-if="!flags.projectTypesPrimaryNav && allowTabChanging"
-				:links="selectableProjectTypes"
-				replace
-				class="hidden md:flex"
-			/>
-		</section>
+	<div class="mx-auto box-border flex w-full max-w-[1280px] flex-col gap-4 px-6 pb-6">
+		<NavTabs
+			v-if="!flags.projectTypesPrimaryNav && allowTabChanging"
+			:links="selectableProjectTypes"
+			replace
+			class="hidden md:flex"
+		/>
 		<NuxtPage />
 	</div>
 </template>
diff --git a/apps/frontend/src/pages/discover/[type]/index.vue b/apps/frontend/src/pages/discover/[type]/index.vue
index 976dc17ed0..359f0906a0 100644
--- a/apps/frontend/src/pages/discover/[type]/index.vue
+++ b/apps/frontend/src/pages/discover/[type]/index.vue
@@ -54,9 +54,6 @@ const client = injectModrinthClient()
 const queryClient = useQueryClient()
 
 const filtersMenuOpen = ref(false)
-const stickyInstallHeaderRef = ref<HTMLElement | null>(null)
-
-useStickyObserver(stickyInstallHeaderRef, 'DiscoverInstallHeader')
 
 const route = useRoute()
 
@@ -175,6 +172,11 @@ const {
 	onboardingModalRef,
 	debug,
 })
+const stickyInstallHeaderRef = ref<HTMLElement | null>(null)
+const { isStuck: isInstallHeaderStuck } = useStickyObserver(
+	stickyInstallHeaderRef,
+	'DiscoverInstallHeader',
+)
 
 function getServerModpackContent(project: Labrinth.Search.v3.ResultSearchProject) {
 	const content = project.minecraft_java_server?.content
@@ -198,49 +200,66 @@ function getServerModpackContent(project: Labrinth.Search.v3.ResultSearchProject
 	return undefined
 }
 
-async function search(requestParams: string) {
+type DiscoverProjectSearchHit = Labrinth.Search.v2.ResultSearchProject & {
+	version_id?: string | null
+}
+
+function mapV3ProjectHit(hit: Labrinth.Search.v3.ResultSearchProject): DiscoverProjectSearchHit {
+	return {
+		...hit,
+		project_type: hit.project_types[0] ?? projectTypeId.value,
+		title: hit.name,
+		description: hit.summary,
+		versions: hit.version_id ? [hit.version_id] : [],
+		latest_version: hit.version_id,
+		icon_url: hit.icon_url ?? '',
+		client_side: 'unknown',
+		server_side: 'unknown',
+	}
+}
+
+async function fetchSearch(requestParams: string) {
 	debug('search() called', {
 		requestParams: requestParams.substring(0, 100),
 		isServer: isServerType.value,
 		projectTypeId: projectTypeId.value,
 	})
-	const config = useRuntimeConfig()
-	let base = import.meta.server ? config.apiBaseUrl : config.public.apiBaseUrl
-
-	if (isServerType.value) {
-		base = base.replace(/\/v\d\//, '/v3/').replace(/\/v\d$/, '/v3')
-	}
 
-	const url = `${base}search${requestParams}`
-	debug('search() fetching:', url.substring(0, 120))
-
-	const raw = await $fetch<Labrinth.Search.v2.SearchResults | Labrinth.Search.v3.SearchResults>(
-		url,
-		{
-			headers: withLabrinthCanaryHeader(),
-		},
-	)
+	const raw = await client.request<Labrinth.Search.v3.SearchResults>('/search', {
+		api: 'labrinth',
+		version: 3,
+		method: 'GET',
+		params: Object.fromEntries(new URLSearchParams(requestParams.replace(/^\?/, ''))),
+		headers: withLabrinthCanaryHeader(),
+	})
 
 	debug('search() response', { total_hits: raw.total_hits, hitCount: raw.hits?.length })
 
-	if ('hits_per_page' in raw) {
-		// v3 response (servers)
+	if (isServerType.value) {
 		return {
 			projectHits: [],
-			serverHits: raw.hits as Labrinth.Search.v3.ResultSearchProject[],
+			serverHits: raw.hits,
 			total_hits: raw.total_hits,
 			per_page: raw.hits_per_page,
 		}
 	}
 
 	return {
-		projectHits: raw.hits as Labrinth.Search.v2.ResultSearchProject[],
+		projectHits: raw.hits.map(mapV3ProjectHit),
 		serverHits: [],
 		total_hits: raw.total_hits,
-		per_page: raw.limit,
+		per_page: raw.hits_per_page,
 	}
 }
 
+async function search(requestParams: string) {
+	return await queryClient.ensureQueryData({
+		queryKey: ['discover', 'search', 'v3', requestParams],
+		queryFn: () => fetchSearch(requestParams),
+		staleTime: 30_000,
+	})
+}
+
 function getCardActions(
 	result: Labrinth.Search.v2.ResultSearchProject | Labrinth.Search.v3.ResultSearchProject,
 	currentProjectType: string,
@@ -412,7 +431,7 @@ watch(
 )
 
 debug('calling initial refreshSearch')
-searchState.refreshSearch()
+await searchState.refreshSearch()
 
 const ogTitle = computed(() =>
 	searchState.query.value
@@ -480,20 +499,30 @@ provideBrowseManager({
 	<Teleport v-if="flags.searchBackground" to="#absolute-background-teleport">
 		<div class="search-background"></div>
 	</Teleport>
+
 	<div
 		v-if="installContext"
 		ref="stickyInstallHeaderRef"
-		class="normal-page__header browse-install-header-bleed sticky top-0 z-20 mb-4 flex flex-col gap-2 border-0 bg-surface-1 py-3"
+		class="sticky top-0 z-20 -mx-6 border-0 border-solid border-divider bg-surface-1 px-6 pt-4"
+		:class="[isInstallHeaderStuck ? 'border-t' : '']"
 	>
-		<BrowseInstallHeader />
+		<BrowseInstallHeader divider bottom-padding />
 	</div>
+
 	<SelectedProjectsFloatingBar v-if="installContext" :install-context="installContext" />
-	<aside class="normal-page__sidebar" :aria-label="formatMessage(commonMessages.filtersLabel)">
-		<AdPlaceholder v-if="!auth.user && !serverData" />
-		<BrowseSidebar />
-	</aside>
-	<section class="normal-page__content">
-		<div class="flex flex-col gap-3">
+
+	<div
+		class="grid min-w-0 gap-3"
+		:class="
+			cosmetics.rightSearchLayout
+				? 'lg:grid-cols-[minmax(0,1fr)_18.75rem]'
+				: 'lg:grid-cols-[18.75rem_minmax(0,1fr)]'
+		"
+	>
+		<section
+			class="flex min-w-0 flex-col gap-3"
+			:class="cosmetics.rightSearchLayout ? 'lg:order-1' : 'lg:order-2'"
+		>
 			<BrowsePageLayout>
 				<template #display-mode-icon>
 					<GridIcon v-if="resultsDisplayMode === 'grid'" />
@@ -501,78 +530,34 @@ provideBrowseManager({
 					<ListIcon v-else />
 				</template>
 			</BrowsePageLayout>
-			<CreationFlowModal
-				v-if="currentServerId && projectType?.id === 'modpack'"
-				ref="onboardingModalRef"
-				:type="fromContext === 'reset-server' ? 'reset-server' : 'server-onboarding'"
-				:available-loaders="['vanilla', 'fabric', 'neoforge', 'forge', 'quilt', 'paper', 'purpur']"
-				:show-snapshot-toggle="true"
-				:on-back="onOnboardingBack"
-				@hide="onOnboardingHide"
-				@browse-modpacks="() => {}"
-				@create="onModpackFlowCreate"
-			/>
-		</div>
-	</section>
+		</section>
+
+		<aside
+			class="min-w-0"
+			:class="cosmetics.rightSearchLayout ? 'lg:order-2' : 'lg:order-1'"
+			:aria-label="formatMessage(commonMessages.filtersLabel)"
+		>
+			<BrowseSidebar>
+				<template #prepend>
+					<AdPlaceholder v-if="!auth.user && !serverData" />
+				</template>
+			</BrowseSidebar>
+		</aside>
+	</div>
+
+	<CreationFlowModal
+		v-if="currentServerId && projectType?.id === 'modpack'"
+		ref="onboardingModalRef"
+		:type="fromContext === 'reset-server' ? 'reset-server' : 'server-onboarding'"
+		:available-loaders="['vanilla', 'fabric', 'neoforge', 'forge', 'quilt', 'paper', 'purpur']"
+		:show-snapshot-toggle="true"
+		:on-back="onOnboardingBack"
+		@hide="onOnboardingHide"
+		@browse-modpacks="() => {}"
+		@create="onModpackFlowCreate"
+	/>
 </template>
 <style lang="scss" scoped>
-.browse-install-header-bleed {
-	grid-column: 1 / -1;
-	margin-inline: -1.5rem;
-	padding-inline: 0.75rem !important;
-
-	&::after {
-		content: '';
-		position: absolute;
-		right: 50%;
-		bottom: 0;
-		width: 100vw;
-		border-bottom: 1px solid var(--surface-5);
-		transform: translateX(50%);
-	}
-}
-
-.normal-page__content {
-	display: contents;
-
-	@media screen and (min-width: 1024px) {
-		display: block;
-	}
-}
-
-.normal-page__sidebar {
-	grid-row: 3;
-
-	@media screen and (min-width: 1024px) {
-		display: block;
-	}
-}
-
-.filters-card {
-	padding: var(--spacing-card-md);
-
-	@media screen and (min-width: 1024px) {
-		padding: var(--spacing-card-lg);
-	}
-}
-
-.content-wrapper {
-	grid-row: 1;
-}
-
-.pagination-after {
-	grid-row: 6;
-}
-
-.no-results {
-	text-align: center;
-	display: flow-root;
-}
-
-.loading-logo {
-	margin: 2rem;
-}
-
 .search-background {
 	width: 100%;
 	height: 20rem;
diff --git a/apps/frontend/src/pages/hosting/manage/[id].vue b/apps/frontend/src/pages/hosting/manage/[id].vue
index e7093161d5..b1607f721c 100644
--- a/apps/frontend/src/pages/hosting/manage/[id].vue
+++ b/apps/frontend/src/pages/hosting/manage/[id].vue
@@ -3,7 +3,6 @@
 		:server-id="serverId"
 		:reload-page="() => reloadNuxtApp({ path: route.path })"
 		:resolve-viewer="resolveViewer"
-		:show-copy-id-action="flags.developerMode"
 		:show-advanced-debug-info="flags.advancedDebugInfo"
 		:stripe-publishable-key="config.public.stripePublishableKey as string"
 		:site-url="config.public.siteUrl as string"
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/instances.vue b/apps/frontend/src/pages/hosting/manage/[id]/instances.vue
new file mode 100644
index 0000000000..19a8c51ee8
--- /dev/null
+++ b/apps/frontend/src/pages/hosting/manage/[id]/instances.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { injectModrinthClient } from '@modrinth/ui'
+import { useQueryClient } from '@tanstack/vue-query'
+
+const route = useNativeRoute()
+const serverId = route.params.id as string
+const client = injectModrinthClient()
+const queryClient = useQueryClient()
+
+if (serverId) {
+	try {
+		await queryClient.ensureQueryData({
+			queryKey: ['servers', 'v1', 'detail', serverId],
+			queryFn: () => client.archon.servers_v1.get(serverId),
+			staleTime: 30_000,
+		})
+	} catch {
+		// Let mounted layouts' useQuery surface errors; do not fail route setup.
+	}
+}
+</script>
+
+<template>
+	<NuxtPage :route="route" />
+</template>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/instances/[instance_id].vue b/apps/frontend/src/pages/hosting/manage/[id]/instances/[instance_id].vue
new file mode 100644
index 0000000000..d262b74e87
--- /dev/null
+++ b/apps/frontend/src/pages/hosting/manage/[id]/instances/[instance_id].vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { injectModrinthClient, ServersManageInstanceRootLayout } from '@modrinth/ui'
+import { useQueryClient } from '@tanstack/vue-query'
+
+const route = useNativeRoute()
+const serverId = route.params.id as string
+const client = injectModrinthClient()
+const queryClient = useQueryClient()
+
+definePageMeta({
+	middleware: 'server-instance-ready',
+})
+
+if (serverId) {
+	try {
+		await queryClient.ensureQueryData({
+			queryKey: ['servers', 'v1', 'detail', serverId],
+			queryFn: () => client.archon.servers_v1.get(serverId),
+			staleTime: 30_000,
+		})
+	} catch {
+		// Let mounted layouts' useQuery surface errors; do not fail route setup.
+	}
+}
+</script>
+
+<template>
+	<ServersManageInstanceRootLayout>
+		<NuxtPage :route="route" />
+	</ServersManageInstanceRootLayout>
+</template>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/backups.vue b/apps/frontend/src/pages/hosting/manage/[id]/instances/[instance_id]/backups.vue
similarity index 93%
rename from apps/frontend/src/pages/hosting/manage/[id]/backups.vue
rename to apps/frontend/src/pages/hosting/manage/[id]/instances/[instance_id]/backups.vue
index 467662653f..ab36852f6a 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/backups.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/instances/[instance_id]/backups.vue
@@ -14,7 +14,7 @@ const flags = useFeatureFlags()
 if (worldId.value) {
 	try {
 		await queryClient.ensureQueryData({
-			queryKey: ['backups', 'list', serverId],
+			queryKey: ['backups', 'list', serverId, worldId.value],
 			queryFn: () => client.archon.backups_v1.list(serverId, worldId.value!),
 			staleTime: 30_000,
 		})
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/files.vue b/apps/frontend/src/pages/hosting/manage/[id]/instances/[instance_id]/files.vue
similarity index 76%
rename from apps/frontend/src/pages/hosting/manage/[id]/files.vue
rename to apps/frontend/src/pages/hosting/manage/[id]/instances/[instance_id]/files.vue
index 9bd6cfd3fa..3e0afc4cdd 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/files.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/instances/[instance_id]/files.vue
@@ -10,11 +10,13 @@ const client = injectModrinthClient()
 const { server, serverId } = injectModrinthServerContext()
 const queryClient = useQueryClient()
 const flags = useFeatureFlags()
+const route = useNativeRoute()
+const initialPath = typeof route.query.path === 'string' ? route.query.path : '/'
 
 try {
 	await queryClient.ensureQueryData({
-		queryKey: ['files', serverId, '/'],
-		queryFn: () => client.kyros.files_v0.listDirectory('/', 1, 2000),
+		queryKey: ['files', serverId, initialPath],
+		queryFn: () => client.kyros.files_v0.listDirectory(initialPath, 1, 2000),
 		staleTime: 30_000,
 	})
 } catch {
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/content.vue b/apps/frontend/src/pages/hosting/manage/[id]/instances/[instance_id]/index.vue
similarity index 96%
rename from apps/frontend/src/pages/hosting/manage/[id]/content.vue
rename to apps/frontend/src/pages/hosting/manage/[id]/instances/[instance_id]/index.vue
index 8530076bff..e5e8e9e517 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/content.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/instances/[instance_id]/index.vue
@@ -38,7 +38,7 @@ const contentWorldId = await getContentWorldId()
 if (contentWorldId) {
 	try {
 		const content = await queryClient.ensureQueryData({
-			queryKey: ['content', 'list', 'v1', serverId],
+			queryKey: ['content', 'list', 'v1', serverId, contentWorldId],
 			queryFn: () =>
 				client.archon.content_v1.getAddons(serverId, contentWorldId, { from_modpack: false }),
 			staleTime: 30_000,
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/instances/index.vue b/apps/frontend/src/pages/hosting/manage/[id]/instances/index.vue
new file mode 100644
index 0000000000..ef42befd9a
--- /dev/null
+++ b/apps/frontend/src/pages/hosting/manage/[id]/instances/index.vue
@@ -0,0 +1,216 @@
+<script setup lang="ts">
+import type { Archon } from '@modrinth/api-client'
+import {
+	commonMessages,
+	defineMessages,
+	formatLoaderLabel,
+	injectModrinthClient,
+	injectModrinthServerContext,
+	ServersManageInstancesPage,
+	useVIntl,
+} from '@modrinth/ui'
+import { useQueryClient } from '@tanstack/vue-query'
+
+const client = injectModrinthClient()
+const { server, serverId, isServerRunning } = injectModrinthServerContext()
+const queryClient = useQueryClient()
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	title: {
+		id: 'servers.manage.instances.meta.title',
+		defaultMessage: 'Instances - {server} - Modrinth',
+	},
+	instanceSlotName: {
+		id: 'servers.manage.instances.slot-name',
+		defaultMessage: 'Instance #{index}',
+	},
+})
+
+type LinkedModpack = {
+	name: string
+	iconUrl: string | null
+	link: string | null
+}
+
+type WorldSlot =
+	| {
+			type: 'world'
+			id: string
+			name: string
+			active: boolean
+			gameVersion: string | null
+			loaderLabel: string | null
+			linkedModpack: LinkedModpack | null
+			installedContentCount: number | null
+			lastActiveAt: string | null
+			createdAt: string | null
+	  }
+	| {
+			type: 'empty'
+			id: string
+			name: string
+	  }
+
+type ContentSummary = {
+	gameVersion: string | null
+	loader: string | null
+	loaderVersion: string | null
+	linkedModpack: LinkedModpack | null
+	installedContentCount: number | null
+}
+
+const WORLD_SLOT_COUNT = 3
+
+try {
+	await queryClient.ensureQueryData({
+		queryKey: ['servers', 'worlds', 'summary', 'v1', serverId],
+		queryFn: loadWorldSlots,
+		staleTime: 30_000,
+	})
+} catch {
+	// Let mounted layouts' useQuery surface errors; do not fail route setup.
+}
+
+useHead({
+	title: () =>
+		formatMessage(messages.title, {
+			server: server.value?.name ?? formatMessage(commonMessages.serverLabel),
+		}),
+})
+
+async function loadWorldSlots(): Promise<WorldSlot[]> {
+	const serverFull = await client.archon.servers_v1.get(serverId)
+	const slots = await Promise.all(
+		serverFull.worlds.map(async (world, index) => {
+			const content = await loadContentSummary(world, index)
+			return toWorldSlot(world, content)
+		}),
+	)
+
+	return padWorldSlots(slots)
+}
+
+async function loadContentSummary(
+	world: Archon.Servers.v1.WorldFull,
+	index: number,
+): Promise<ContentSummary> {
+	try {
+		const content = await client.archon.content_v1.getAddons(serverId, world.id, {
+			addons: true,
+			updates: false,
+		})
+
+		return {
+			gameVersion: content.game_version ?? world.content?.game_version ?? null,
+			loader: content.modloader ?? world.content?.modloader ?? null,
+			loaderVersion: content.modloader_version ?? world.content?.modloader_version ?? null,
+			linkedModpack: getLinkedModpack(content.modpack),
+			installedContentCount: content.addons?.length ?? 0,
+		}
+	} catch {
+		return createDummyContentSummary(world, index)
+	}
+}
+
+function toWorldSlot(world: Archon.Servers.v1.WorldFull, content: ContentSummary): WorldSlot {
+	return {
+		type: 'world',
+		id: world.id,
+		name: world.name,
+		active: world.is_active,
+		gameVersion: content.gameVersion,
+		loaderLabel: getLoaderLabel(content.loader, content.loaderVersion),
+		linkedModpack: content.linkedModpack,
+		installedContentCount: content.installedContentCount,
+		lastActiveAt: getLatestKnownActivity(world),
+		createdAt: world.created_at,
+	}
+}
+
+function padWorldSlots(slots: WorldSlot[]): WorldSlot[] {
+	const padded = [...slots]
+	for (let i = padded.length; i < WORLD_SLOT_COUNT; i++) {
+		padded.push({
+			type: 'empty',
+			id: `empty-world-slot-${i + 1}`,
+			name: formatMessage(messages.instanceSlotName, { index: i + 1 }),
+		})
+	}
+	return padded
+}
+
+function getLinkedModpack(modpack: Archon.Content.v1.ModpackFields | null): LinkedModpack | null {
+	if (!modpack) return null
+
+	const name =
+		modpack.title ??
+		(modpack.spec.platform === 'local_file' ? modpack.spec.name : modpack.spec.project_id)
+
+	return {
+		name,
+		iconUrl: modpack.icon_url ?? null,
+		link: modpack.spec.platform === 'modrinth' ? `/project/${modpack.spec.project_id}` : null,
+	}
+}
+
+function getLoaderLabel(loader: string | null, loaderVersion: string | null): string | null {
+	if (!loader) return null
+	const normalizedLoader = loader.toLowerCase()
+	return [formatLoaderLabel(normalizedLoader), loaderVersion].filter(Boolean).join(' ')
+}
+
+function getLatestKnownActivity(world: Archon.Servers.v1.WorldFull): string | null {
+	const latestBackup = latestDate(world.backups.map((backup) => backup.created_at))
+	if (latestBackup) return latestBackup
+	if (world.is_active && isServerRunning.value) return new Date().toISOString()
+	return world.created_at ?? null
+}
+
+function latestDate(dates: string[]): string | null {
+	let latest = 0
+	let latestIso: string | null = null
+	for (const date of dates) {
+		const timestamp = new Date(date).getTime()
+		if (!Number.isFinite(timestamp) || timestamp <= latest) continue
+		latest = timestamp
+		latestIso = date
+	}
+	return latestIso
+}
+
+function createDummyContentSummary(
+	world: Archon.Servers.v1.WorldFull,
+	index: number,
+): ContentSummary {
+	const gameVersion = world.content?.game_version ?? server.value?.mc_version ?? '1.20.4'
+	const loader = world.content?.modloader ?? server.value?.loader?.toLowerCase() ?? 'fabric'
+	const loaderVersion = world.content?.modloader_version ?? server.value?.loader_version ?? '0.16.6'
+
+	if (index === 0) {
+		return {
+			gameVersion,
+			loader,
+			loaderVersion,
+			linkedModpack: {
+				name: 'Cobblemon Official',
+				iconUrl: null,
+				link: null,
+			},
+			installedContentCount: 47,
+		}
+	}
+
+	return {
+		gameVersion,
+		loader,
+		loaderVersion,
+		linkedModpack: null,
+		installedContentCount: 13,
+	}
+}
+</script>
+
+<template>
+	<ServersManageInstancesPage />
+</template>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/worlds.vue b/apps/frontend/src/pages/hosting/manage/[id]/worlds.vue
deleted file mode 100644
index 5305138f0a..0000000000
--- a/apps/frontend/src/pages/hosting/manage/[id]/worlds.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import {
-	commonMessages,
-	defineMessages,
-	injectModrinthServerContext,
-	ServersManageWorldsPage,
-	useVIntl,
-} from '@modrinth/ui'
-
-const { server } = injectModrinthServerContext()
-const { formatMessage } = useVIntl()
-
-const messages = defineMessages({
-	title: {
-		id: 'servers.manage.worlds.meta.title',
-		defaultMessage: 'Worlds - {server} - Modrinth',
-	},
-})
-
-useHead({
-	title: () =>
-		formatMessage(messages.title, {
-			server: server.value?.name ?? formatMessage(commonMessages.serverLabel),
-		}),
-})
-</script>
-
-<template>
-	<ServersManageWorldsPage />
-</template>
diff --git a/apps/frontend/src/pages/organization/[id].vue b/apps/frontend/src/pages/organization/[id].vue
index 4caf4e5652..921401a579 100644
--- a/apps/frontend/src/pages/organization/[id].vue
+++ b/apps/frontend/src/pages/organization/[id].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" />
@@ -303,10 +231,9 @@ import {
 	Avatar,
 	ButtonStyled,
 	commonMessages,
-	ContentPageHeader,
 	injectModrinthClient,
 	NavTabs,
-	OverflowMenu,
+	PageHeader,
 	PROJECT_DEP_MARKER_QUERY,
 	ProjectCard,
 	ProjectCardList,
@@ -535,6 +462,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/[id].vue b/apps/frontend/src/pages/user/[id].vue
index c66dba9672..a1c95d5efc 100644
--- a/apps/frontend/src/pages/user/[id].vue
+++ b/apps/frontend/src/pages/user/[id].vue
@@ -120,164 +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="96px" circle />
-					</template>
-					<template #title>
-						<span class="flex items-center gap-2">
-							{{ user.username }}
-							<TagItem
-								v-if="isAdminViewing && isAffiliate"
-								:style="{
-									'--_color': 'var(--color-brand)',
-									'--_bg-color': 'var(--color-brand-highlight)',
-								}"
-							>
-								<AffiliateIcon /> Affiliate
-							</TagItem>
-						</span>
-					</template>
-					<template #summary>
-						{{
-							user.bio
-								? user.bio
-								: projects.length === 0
-									? formatMessage(messages.bioFallbackUser)
-									: formatMessage(messages.bioFallbackCreator)
-						}}
-					</template>
-					<template #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: '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 #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
+					:header="user.username"
+					:summary="profileHeaderSummary"
+					:leading="profileHeaderLeading"
+					:badges="profileHeaderBadges"
+					:metadata="profileHeaderMetadata"
+					:actions="profileHeaderActions"
+				/>
 			</div>
 			<div class="normal-page__content">
 				<div v-if="navLinks.length > 2" class="mb-4 max-w-full overflow-x-auto">
@@ -489,17 +339,15 @@ import {
 	ButtonStyled,
 	Combobox,
 	commonMessages,
-	ContentPageHeader,
 	defineMessages,
 	injectModrinthClient,
 	injectNotificationManager,
 	IntlFormatted,
 	NavTabs,
 	NewModal,
-	OverflowMenu,
+	PageHeader,
 	ProjectCard,
 	ProjectCardList,
-	TagItem,
 	useCompactNumber,
 	useFormatDateTime,
 	useFormatNumber,
@@ -543,8 +391,6 @@ const formatDateTime = useFormatDateTime({
 
 const { addNotification } = injectNotificationManager()
 
-const baseId = useId()
-
 const messages = defineMessages({
 	profileProjectsLabel: {
 		id: 'profile.label.projects',
@@ -862,12 +708,165 @@ 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', route.params.id] })
 }
 
+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: '96px',
+	circle: true,
+}))
+
+const profileHeaderBadges = computed(() =>
+	isAdminViewing.value && isAffiliate.value
+		? [
+				{
+					id: 'affiliate',
+					label: 'Affiliate',
+					icon: AffiliateIcon,
+					class: 'border-brand-highlight bg-brand-highlight text-brand',
+				},
+			]
+		: [],
+)
+
+const profileHeaderMetadata = computed(() => [
+	{
+		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: '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/JoinedButtons.vue b/packages/ui/src/components/base/JoinedButtons.vue
index 2c56d50414..c97e9782bc 100644
--- a/packages/ui/src/components/base/JoinedButtons.vue
+++ b/packages/ui/src/components/base/JoinedButtons.vue
@@ -31,7 +31,8 @@ import { DropdownIcon } from '@modrinth/assets'
 import type { Component } from 'vue'
 import { computed } from 'vue'
 
-import { ButtonStyled, OverflowMenu } from '../index'
+import ButtonStyled from './ButtonStyled.vue'
+import OverflowMenu from './OverflowMenu.vue'
 
 // TODO: This should be moved to a shared types file.
 type Colors = 'standard' | 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple'
diff --git a/packages/ui/src/components/base/NavTabs.vue b/packages/ui/src/components/base/NavTabs.vue
index 76b095746e..4c3f5eedf3 100644
--- a/packages/ui/src/components/base/NavTabs.vue
+++ b/packages/ui/src/components/base/NavTabs.vue
@@ -6,40 +6,138 @@
 		:class="{ 'drop-shadow-xl': mode === 'navigation' }"
 	>
 		<template v-if="mode === 'navigation'">
-			<RouterLink
-				v-for="(link, index) in filteredLinks"
-				v-show="link.shown ?? true"
-				:key="link.href"
-				ref="tabLinkElements"
-				:replace="replace"
-				:to="query ? (link.href ? `?${query}=${link.href}` : '?') : link.href"
-				class="button-animation z-[1] flex flex-row items-center gap-2 px-4 py-2 focus:rounded-full"
-				:class="getSSRFallbackClasses(index)"
-				@mouseenter="link.onHover?.()"
-				@focus="link.onHover?.()"
-			>
-				<component :is="link.icon" v-if="link.icon" class="size-5" :class="getIconClasses(index)" />
-				<span class="text-nowrap" :class="getLabelClasses(index)">
-					{{ link.label }}
-				</span>
-			</RouterLink>
+			<template v-for="(link, index) in filteredLinks" :key="link.href">
+				<Tooltip
+					v-if="link.prompt"
+					theme="dismissable-prompt"
+					:triggers="[]"
+					:shown="link.prompt.shown"
+					:auto-hide="false"
+					:placement="link.prompt.placement ?? 'bottom'"
+				>
+					<RouterLink
+						ref="tabLinkElements"
+						:replace="replace"
+						:to="query ? (link.href ? `?${query}=${link.href}` : '?') : link.href"
+						class="button-animation z-[1] flex flex-row items-center gap-2 px-4 py-2 focus:rounded-full"
+						:class="getSSRFallbackClasses(index)"
+						@mouseenter="link.onHover?.()"
+						@focus="link.onHover?.()"
+						@click="dismissPrompt(link)"
+					>
+						<component
+							:is="link.icon"
+							v-if="link.icon"
+							class="size-5"
+							:class="getIconClasses(index)"
+						/>
+						<span class="text-nowrap" :class="getLabelClasses(index)">
+							{{ link.label }}
+						</span>
+					</RouterLink>
+					<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">
+									{{ link.prompt.title }}
+								</h3>
+								<ButtonStyled size="small" circular>
+									<button v-tooltip="link.prompt.dismissLabel" @click="link.prompt.onDismiss?.()">
+										<XIcon aria-hidden="true" />
+									</button>
+								</ButtonStyled>
+							</div>
+							<p class="m-0 text-wrap text-sm font-medium leading-tight text-secondary">
+								{{ link.prompt.description }}
+							</p>
+						</div>
+					</template>
+				</Tooltip>
+				<RouterLink
+					v-else
+					ref="tabLinkElements"
+					:replace="replace"
+					:to="query ? (link.href ? `?${query}=${link.href}` : '?') : link.href"
+					class="button-animation z-[1] flex flex-row items-center gap-2 px-4 py-2 focus:rounded-full"
+					:class="getSSRFallbackClasses(index)"
+					@mouseenter="link.onHover?.()"
+					@focus="link.onHover?.()"
+				>
+					<component
+						:is="link.icon"
+						v-if="link.icon"
+						class="size-5"
+						:class="getIconClasses(index)"
+					/>
+					<span class="text-nowrap" :class="getLabelClasses(index)">
+						{{ link.label }}
+					</span>
+				</RouterLink>
+			</template>
 		</template>
 
 		<template v-else>
-			<div
-				v-for="(link, index) in filteredLinks"
-				v-show="link.shown ?? true"
-				:key="link.href"
-				ref="tabLinkElements"
-				class="button-animation z-[1] flex flex-row items-center gap-2 px-4 py-2 hover:cursor-pointer focus:rounded-full"
-				:class="getSSRFallbackClasses(index)"
-				@click="emit('tabClick', index, link)"
-			>
-				<component :is="link.icon" v-if="link.icon" class="size-5" :class="getIconClasses(index)" />
-				<span class="text-nowrap" :class="getLabelClasses(index)">
-					{{ link.label }}
-				</span>
-			</div>
+			<template v-for="(link, index) in filteredLinks" :key="link.href">
+				<Tooltip
+					v-if="link.prompt"
+					theme="dismissable-prompt"
+					:triggers="[]"
+					:shown="link.prompt.shown"
+					:auto-hide="false"
+					:placement="link.prompt.placement ?? 'bottom'"
+				>
+					<div
+						ref="tabLinkElements"
+						class="button-animation z-[1] flex flex-row items-center gap-2 px-4 py-2 hover:cursor-pointer focus:rounded-full"
+						:class="getSSRFallbackClasses(index)"
+						@click="handleLocalTabClick(index, link)"
+					>
+						<component
+							:is="link.icon"
+							v-if="link.icon"
+							class="size-5"
+							:class="getIconClasses(index)"
+						/>
+						<span class="text-nowrap" :class="getLabelClasses(index)">
+							{{ link.label }}
+						</span>
+					</div>
+					<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">
+									{{ link.prompt.title }}
+								</h3>
+								<ButtonStyled size="small" circular>
+									<button v-tooltip="link.prompt.dismissLabel" @click="link.prompt.onDismiss?.()">
+										<XIcon aria-hidden="true" />
+									</button>
+								</ButtonStyled>
+							</div>
+							<p class="m-0 text-wrap text-sm font-medium leading-tight text-secondary">
+								{{ link.prompt.description }}
+							</p>
+						</div>
+					</template>
+				</Tooltip>
+				<div
+					v-else
+					ref="tabLinkElements"
+					class="button-animation z-[1] flex flex-row items-center gap-2 px-4 py-2 hover:cursor-pointer focus:rounded-full"
+					:class="getSSRFallbackClasses(index)"
+					@click="handleLocalTabClick(index, link)"
+				>
+					<component
+						:is="link.icon"
+						v-if="link.icon"
+						class="size-5"
+						:class="getIconClasses(index)"
+					/>
+					<span class="text-nowrap" :class="getLabelClasses(index)">
+						{{ link.label }}
+					</span>
+				</div>
+			</template>
 		</template>
 
 		<!-- Animated slider background -->
@@ -57,12 +155,25 @@
 </template>
 
 <script setup lang="ts">
+import { XIcon } from '@modrinth/assets'
+import { Tooltip } from 'floating-vue'
 import type { Component } from 'vue'
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { RouterLink, useRoute } from 'vue-router'
 
+import ButtonStyled from './ButtonStyled.vue'
+
 const route = useRoute()
 
+interface TabPrompt {
+	title: string
+	description: string
+	dismissLabel?: string
+	shown?: boolean
+	placement?: string
+	onDismiss?: () => void
+}
+
 interface Tab {
 	label: string
 	href: string
@@ -70,6 +181,7 @@ interface Tab {
 	icon?: Component
 	subpages?: string[]
 	onHover?: () => void
+	prompt?: TabPrompt
 }
 
 const props = withDefaults(
@@ -131,6 +243,17 @@ const isActiveAndNotSubpage = computed(
 	() => (index: number) => currentActiveIndex.value === index && !subpageSelected.value,
 )
 
+function dismissPrompt(link: Tab) {
+	if (link.prompt?.shown) {
+		link.prompt.onDismiss?.()
+	}
+}
+
+function handleLocalTabClick(index: number, link: Tab) {
+	dismissPrompt(link)
+	emit('tabClick', index, link)
+}
+
 function getSSRFallbackClasses(index: number) {
 	if (sliderReady.value) return {}
 	if (currentActiveIndex.value !== index) return {}
diff --git a/packages/ui/src/components/base/PageHeader.vue b/packages/ui/src/components/base/PageHeader.vue
index f3bbf04c06..75760dc51e 100644
--- a/packages/ui/src/components/base/PageHeader.vue
+++ b/packages/ui/src/components/base/PageHeader.vue
@@ -1,11 +1,679 @@
 <template>
-	<div class="grid grid-cols-[min-content_1fr_auto] gap-4">
-		<slot name="icon" />
-		<div class="flex flex-col gap-1.5">
-			<slot name="title" />
-			<slot name="summary" />
-			<slot name="stats" />
+	<div
+		class="flex flex-col gap-2"
+		:class="[
+			props.divider ? 'border-0 border-b border-solid border-divider' : '',
+			props.bottomPadding ? 'pb-4' : '',
+			props.headerClass,
+		]"
+	>
+		<div class="flex flex-wrap items-start gap-4 max-md:flex-col" :class="props.rowClass">
+			<div class="flex min-w-0 flex-1 gap-4" :class="props.mainClass">
+				<div v-if="leadingItems.length" class="contents">
+					<template v-for="(leadingItem, index) in leadingItems" :key="leadingItem.id ?? index">
+						<div
+							v-if="leadingItem.type === 'button'"
+							:class="
+								leadingWrapperClass(
+									leadingItem,
+									'flex size-16 shrink-0 items-center justify-center',
+								)
+							"
+						>
+							<ButtonStyled
+								circular
+								:color="leadingItem.color ?? 'standard'"
+								:size="leadingItem.size ?? 'large'"
+								:type="leadingItem.buttonType ?? 'standard'"
+							>
+								<AutoLink
+									v-if="leadingItem.to"
+									v-tooltip="leadingItem.tooltip"
+									:to="leadingItem.to"
+									:aria-label="leadingLabel(leadingItem)"
+								>
+									<component
+										:is="leadingItem.icon"
+										v-if="leadingItem.icon"
+										aria-hidden="true"
+										v-bind="leadingItem.iconProps"
+									/>
+								</AutoLink>
+								<button
+									v-else
+									v-tooltip="leadingItem.tooltip"
+									type="button"
+									:aria-label="leadingLabel(leadingItem)"
+									@click="leadingItem.onClick"
+								>
+									<component
+										:is="leadingItem.icon"
+										v-if="leadingItem.icon"
+										aria-hidden="true"
+										v-bind="leadingItem.iconProps"
+									/>
+								</button>
+							</ButtonStyled>
+						</div>
+						<Avatar
+							v-else-if="leadingItem.type === 'avatar'"
+							:src="leadingItem.src"
+							:alt="leadingItem.alt ?? ''"
+							:size="leadingItem.avatarSize ?? '64px'"
+							:tint-by="leadingItem.tintBy ?? null"
+							:circle="leadingItem.circle ?? false"
+							:no-shadow="leadingItem.noShadow ?? false"
+							:raised="leadingItem.raised ?? false"
+							:loading="leadingItem.loading ?? 'eager'"
+							:class="leadingItem.class"
+						/>
+						<component
+							:is="leadingItem.component"
+							v-else-if="leadingItem.component"
+							:class="leadingItem.class"
+							v-bind="leadingItem.componentProps"
+						/>
+					</template>
+				</div>
+
+				<div class="flex min-w-0 flex-col gap-2 justify-center">
+					<div class="flex flex-col gap-1.5 justify-center">
+						<div class="flex flex-wrap items-center gap-2">
+							<h1
+								class="m-0 min-w-0 max-w-full text-2xl font-semibold leading-none text-contrast"
+								:class="[props.truncateTitle ? 'truncate' : '', props.titleClass]"
+							>
+								{{ props.header }}
+							</h1>
+							<template v-for="badge in props.badges" :key="badge.id">
+								<component
+									:is="badge.component"
+									v-if="badge.component"
+									:class="badge.class"
+									v-bind="badge.componentProps"
+								/>
+								<AutoLink
+									v-else-if="badge.to"
+									v-tooltip="badge.tooltip"
+									:to="badge.to"
+									:aria-label="badge.ariaLabel ?? badge.label"
+									:class="badgeClass(badge, true)"
+									:style="badge.style"
+								>
+									<component
+										:is="badge.icon"
+										v-if="badge.icon"
+										aria-hidden="true"
+										v-bind="badge.iconProps"
+									/>
+									<span>{{ badge.label }}</span>
+								</AutoLink>
+								<button
+									v-else-if="badge.onClick"
+									v-tooltip="badge.tooltip"
+									type="button"
+									:aria-label="badge.ariaLabel ?? badge.label"
+									:class="badgeClass(badge, true)"
+									:style="badge.style"
+									@click="badge.onClick"
+								>
+									<component
+										:is="badge.icon"
+										v-if="badge.icon"
+										aria-hidden="true"
+										v-bind="badge.iconProps"
+									/>
+									<span>{{ badge.label }}</span>
+								</button>
+								<div
+									v-else
+									v-tooltip="badge.tooltip"
+									:aria-label="badge.ariaLabel"
+									:class="badgeClass(badge)"
+									:style="badge.style"
+								>
+									<component
+										:is="badge.icon"
+										v-if="badge.icon"
+										aria-hidden="true"
+										v-bind="badge.iconProps"
+									/>
+									<span>{{ badge.label }}</span>
+								</div>
+							</template>
+						</div>
+						<p
+							v-if="props.summary"
+							class="m-0 max-w-[44rem] empty:hidden"
+							:class="[props.disableLineClamp ? '' : 'line-clamp-2']"
+						>
+							{{ props.summary }}
+						</p>
+					</div>
+
+					<div v-if="props.metadata.length" class="flex flex-wrap gap-3 empty:hidden max-md:hidden">
+						<div class="flex min-w-0 flex-wrap items-center gap-2">
+							<template v-for="(item, index) in props.metadata" :key="item.id">
+								<BulletDivider v-if="index > 0" class="shrink-0" />
+								<div v-if="item.type === 'custom'" :class="item.class">
+									<slot :name="metadataSlotName(item)" :item="item" />
+								</div>
+								<AutoLink
+									v-else-if="item.to"
+									v-tooltip="item.tooltip"
+									:to="item.to"
+									:aria-label="item.ariaLabel ?? item.label ?? ''"
+									:class="metadataClass(item, true)"
+								>
+									<component
+										:is="item.icon"
+										v-if="item.icon"
+										class="flex size-5 shrink-0"
+										aria-hidden="true"
+										v-bind="item.iconProps"
+									/>
+									<span class="truncate">{{ item.label }}</span>
+								</AutoLink>
+								<button
+									v-else-if="item.onClick"
+									v-tooltip="item.tooltip"
+									type="button"
+									:aria-label="item.ariaLabel ?? item.label ?? ''"
+									:class="metadataClass(item, true)"
+									@click="item.onClick"
+								>
+									<component
+										:is="item.icon"
+										v-if="item.icon"
+										class="flex size-5 shrink-0"
+										aria-hidden="true"
+										v-bind="item.iconProps"
+									/>
+									<span class="truncate">{{ item.label }}</span>
+								</button>
+								<div
+									v-else
+									v-tooltip="item.tooltip"
+									:aria-label="item.ariaLabel"
+									:class="metadataClass(item)"
+								>
+									<component
+										:is="item.icon"
+										v-if="item.icon"
+										class="flex size-5 shrink-0"
+										aria-hidden="true"
+										v-bind="item.iconProps"
+									/>
+									<span class="truncate">{{ item.label }}</span>
+								</div>
+							</template>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div v-if="props.actions.length" class="flex flex-wrap gap-2 items-center">
+				<template v-for="action in props.actions" :key="action.id">
+					<component
+						:is="action.component"
+						v-if="action.component"
+						:class="action.class"
+						v-bind="action.componentProps"
+					/>
+					<Tooltip
+						v-else-if="action.prompt"
+						theme="dismissable-prompt"
+						:triggers="[]"
+						:shown="action.prompt.shown"
+						:auto-hide="false"
+						:placement="action.prompt.placement ?? 'bottom'"
+					>
+						<JoinedButtons
+							v-if="action.joinedActions?.length"
+							:actions="action.joinedActions"
+							:color="joinedActionColor(action.color)"
+							:size="action.size ?? 'large'"
+							:disabled="action.disabled"
+							:primary-disabled="action.primaryDisabled"
+							:dropdown-disabled="action.dropdownDisabled"
+							:primary-muted="action.primaryMuted"
+						/>
+						<ButtonStyled
+							v-else
+							:color="action.color ?? 'standard'"
+							:size="action.size ?? 'large'"
+							:type="action.type ?? 'standard'"
+							:circular="action.circular ?? action.labelHidden ?? false"
+						>
+							<TeleportOverflowMenu
+								v-if="action.menuActions?.length"
+								:options="action.menuActions"
+								:tooltip="action.tooltip"
+								:aria-label="actionLabel(action)"
+								:disabled="action.disabled"
+								@open="dismissActionPrompt(action)"
+							>
+								<component
+									:is="action.icon"
+									v-if="action.icon"
+									:class="action.iconClass"
+									aria-hidden="true"
+									v-bind="action.iconProps"
+								/>
+								<span v-if="!action.labelHidden && !action.circular">{{ action.label }}</span>
+							</TeleportOverflowMenu>
+							<AutoLink
+								v-else-if="action.to"
+								v-tooltip="action.tooltip"
+								:to="action.to"
+								:aria-label="actionLabel(action)"
+								@click="(event) => handleActionClick(action, event)"
+							>
+								<component
+									:is="action.icon"
+									v-if="action.icon"
+									:class="action.iconClass"
+									aria-hidden="true"
+									v-bind="action.iconProps"
+								/>
+								<span v-if="!action.labelHidden && !action.circular">{{ action.label }}</span>
+							</AutoLink>
+							<button
+								v-else
+								v-tooltip="action.tooltip"
+								type="button"
+								:disabled="action.disabled"
+								:aria-label="actionLabel(action)"
+								@click="(event) => handleActionClick(action, event)"
+							>
+								<component
+									:is="action.icon"
+									v-if="action.icon"
+									:class="action.iconClass"
+									aria-hidden="true"
+									v-bind="action.iconProps"
+								/>
+								<span v-if="!action.labelHidden && !action.circular">{{ action.label }}</span>
+							</button>
+						</ButtonStyled>
+						<template #popper>
+							<div class="grid grid-cols-[min-content] gap-1">
+								<div class="flex min-w-48 items-center justify-between gap-8">
+									<h3
+										class="m-0 flex items-center gap-2 whitespace-nowrap text-base font-bold text-contrast"
+									>
+										{{ action.prompt.title }}
+										<span
+											v-if="action.prompt.badge"
+											class="inline-flex items-center rounded-full border border-solid border-brand-highlight bg-brand-highlight px-2 py-1 text-sm font-semibold leading-none text-brand"
+										>
+											{{ action.prompt.badge }}
+										</span>
+									</h3>
+									<ButtonStyled size="small" circular>
+										<button
+											v-tooltip="action.prompt.dismissLabel"
+											@click="action.prompt.onDismiss?.()"
+										>
+											<XIcon aria-hidden="true" />
+										</button>
+									</ButtonStyled>
+								</div>
+								<p class="m-0 text-wrap text-sm font-medium leading-tight text-secondary">
+									{{ action.prompt.description }}
+								</p>
+								<p v-if="action.prompt.footer" class="m-0 text-wrap text-sm font-bold text-primary">
+									{{ action.prompt.footer }}
+								</p>
+							</div>
+						</template>
+					</Tooltip>
+					<template v-else>
+						<JoinedButtons
+							v-if="action.joinedActions?.length"
+							:actions="action.joinedActions"
+							:color="joinedActionColor(action.color)"
+							:size="action.size ?? 'large'"
+							:disabled="action.disabled"
+							:primary-disabled="action.primaryDisabled"
+							:dropdown-disabled="action.dropdownDisabled"
+							:primary-muted="action.primaryMuted"
+						/>
+						<ButtonStyled
+							v-else
+							:color="action.color ?? 'standard'"
+							:size="action.size ?? 'large'"
+							:type="action.type ?? 'standard'"
+							:circular="action.circular ?? action.labelHidden ?? false"
+						>
+							<TeleportOverflowMenu
+								v-if="action.menuActions?.length"
+								:options="action.menuActions"
+								:tooltip="action.tooltip"
+								:aria-label="actionLabel(action)"
+								:disabled="action.disabled"
+							>
+								<component
+									:is="action.icon"
+									v-if="action.icon"
+									:class="action.iconClass"
+									aria-hidden="true"
+									v-bind="action.iconProps"
+								/>
+								<span v-if="!action.labelHidden && !action.circular">{{ action.label }}</span>
+							</TeleportOverflowMenu>
+							<AutoLink
+								v-else-if="action.to"
+								v-tooltip="action.tooltip"
+								:to="action.to"
+								:aria-label="actionLabel(action)"
+								@click="(event) => handleActionClick(action, event)"
+							>
+								<component
+									:is="action.icon"
+									v-if="action.icon"
+									:class="action.iconClass"
+									aria-hidden="true"
+									v-bind="action.iconProps"
+								/>
+								<span v-if="!action.labelHidden && !action.circular">{{ action.label }}</span>
+							</AutoLink>
+							<button
+								v-else
+								v-tooltip="action.tooltip"
+								type="button"
+								:disabled="action.disabled"
+								:aria-label="actionLabel(action)"
+								@click="(event) => handleActionClick(action, event)"
+							>
+								<component
+									:is="action.icon"
+									v-if="action.icon"
+									:class="action.iconClass"
+									aria-hidden="true"
+									v-bind="action.iconProps"
+								/>
+								<span v-if="!action.labelHidden && !action.circular">{{ action.label }}</span>
+							</button>
+						</ButtonStyled>
+					</template>
+				</template>
+			</div>
+		</div>
+
+		<div v-if="props.metadata.length" class="flex justify-between md:hidden">
+			<div class="flex flex-wrap gap-3 empty:hidden">
+				<div class="flex min-w-0 flex-wrap items-center gap-2">
+					<template v-for="(item, index) in props.metadata" :key="item.id">
+						<BulletDivider v-if="index > 0" class="shrink-0" />
+						<div v-if="item.type === 'custom'" :class="item.class">
+							<slot :name="metadataSlotName(item)" :item="item" />
+						</div>
+						<AutoLink
+							v-else-if="item.to"
+							v-tooltip="item.tooltip"
+							:to="item.to"
+							:aria-label="item.ariaLabel ?? item.label ?? ''"
+							:class="metadataClass(item, true)"
+						>
+							<component
+								:is="item.icon"
+								v-if="item.icon"
+								class="flex size-5 shrink-0"
+								aria-hidden="true"
+								v-bind="item.iconProps"
+							/>
+							<span class="truncate">{{ item.label }}</span>
+						</AutoLink>
+						<button
+							v-else-if="item.onClick"
+							v-tooltip="item.tooltip"
+							type="button"
+							:aria-label="item.ariaLabel ?? item.label ?? ''"
+							:class="metadataClass(item, true)"
+							@click="item.onClick"
+						>
+							<component
+								:is="item.icon"
+								v-if="item.icon"
+								class="flex size-5 shrink-0"
+								aria-hidden="true"
+								v-bind="item.iconProps"
+							/>
+							<span class="truncate">{{ item.label }}</span>
+						</button>
+						<div
+							v-else
+							v-tooltip="item.tooltip"
+							:aria-label="item.ariaLabel"
+							:class="metadataClass(item)"
+						>
+							<component
+								:is="item.icon"
+								v-if="item.icon"
+								class="flex size-5 shrink-0"
+								aria-hidden="true"
+								v-bind="item.iconProps"
+							/>
+							<span class="truncate">{{ item.label }}</span>
+						</div>
+					</template>
+				</div>
+			</div>
 		</div>
-		<slot name="actions" />
 	</div>
 </template>
+
+<script setup lang="ts">
+import { XIcon } from '@modrinth/assets'
+import { Tooltip } from 'floating-vue'
+import type { Component } from 'vue'
+import { computed } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+
+import AutoLink from './AutoLink.vue'
+import Avatar from './Avatar.vue'
+import BulletDivider from './BulletDivider.vue'
+import ButtonStyled from './ButtonStyled.vue'
+import JoinedButtons, { type JoinedButtonAction } from './JoinedButtons.vue'
+import TeleportOverflowMenu, {
+	type Item as TeleportOverflowMenuItem,
+} from './TeleportOverflowMenu.vue'
+
+type PageHeaderTarget = string | RouteLocationRaw
+type ButtonColor =
+	| 'standard'
+	| 'brand'
+	| 'red'
+	| 'orange'
+	| 'green'
+	| 'blue'
+	| 'purple'
+	| 'medal-promo'
+type ButtonSize = 'standard' | 'large' | 'small'
+type ButtonType =
+	| 'standard'
+	| 'outlined'
+	| 'transparent'
+	| 'highlight'
+	| 'highlight-colored-text'
+	| 'chip'
+
+type PageHeaderLeading = {
+	id?: string
+	type: 'avatar' | 'button' | 'component'
+	icon?: Component
+	iconProps?: Record<string, unknown>
+	component?: Component
+	componentProps?: Record<string, unknown>
+	src?: string | null
+	alt?: string
+	tintBy?: string | null
+	avatarSize?: string
+	circle?: boolean
+	noShadow?: boolean
+	raised?: boolean
+	loading?: 'eager' | 'lazy'
+	class?: string
+	wrapperClass?: string
+	to?: PageHeaderTarget
+	onClick?: (event?: MouseEvent) => void | Promise<void>
+	tooltip?: string
+	ariaLabel?: string
+	color?: ButtonColor
+	size?: ButtonSize
+	buttonType?: ButtonType
+}
+
+type PageHeaderBadge = {
+	id: string
+	label?: string
+	icon?: Component
+	iconProps?: Record<string, unknown>
+	component?: Component
+	componentProps?: Record<string, unknown>
+	tooltip?: string
+	ariaLabel?: string
+	to?: PageHeaderTarget
+	onClick?: () => void | Promise<void>
+	class?: string
+	style?: Record<string, string>
+}
+
+type PageHeaderMetadataItem = {
+	id: string
+	type?: 'text' | 'custom'
+	label?: string
+	icon?: Component
+	iconProps?: Record<string, unknown>
+	tooltip?: string
+	ariaLabel?: string
+	to?: PageHeaderTarget
+	onClick?: () => void | Promise<void>
+	class?: string
+}
+
+type PageHeaderActionPrompt = {
+	title: string
+	description: string
+	badge?: string
+	footer?: string
+	dismissLabel?: string
+	shown?: boolean
+	placement?: string
+	onDismiss?: () => void
+}
+
+type PageHeaderAction = {
+	id: string
+	label: string
+	component?: Component
+	componentProps?: Record<string, unknown>
+	class?: string
+	icon?: Component
+	iconProps?: Record<string, unknown>
+	iconClass?: string
+	tooltip?: string
+	ariaLabel?: string
+	to?: PageHeaderTarget
+	onClick?: () => void | Promise<void>
+	disabled?: boolean
+	labelHidden?: boolean
+	circular?: boolean
+	color?: ButtonColor
+	size?: ButtonSize
+	type?: ButtonType
+	joinedActions?: JoinedButtonAction[]
+	menuActions?: TeleportOverflowMenuItem[]
+	primaryDisabled?: boolean
+	dropdownDisabled?: boolean
+	primaryMuted?: boolean
+	prompt?: PageHeaderActionPrompt
+}
+
+const props = withDefaults(
+	defineProps<{
+		header: string
+		summary?: string | null
+		leading?: PageHeaderLeading | PageHeaderLeading[] | null
+		badges?: PageHeaderBadge[]
+		metadata?: PageHeaderMetadataItem[]
+		actions?: PageHeaderAction[]
+		headerClass?: string
+		rowClass?: string
+		mainClass?: string
+		titleClass?: string
+		truncateTitle?: boolean
+		divider?: boolean
+		bottomPadding?: boolean
+		disableLineClamp?: boolean
+	}>(),
+	{
+		summary: null,
+		leading: null,
+		badges: () => [],
+		metadata: () => [],
+		actions: () => [],
+		headerClass: '',
+		rowClass: '',
+		mainClass: '',
+		titleClass: '',
+		truncateTitle: false,
+		divider: true,
+		bottomPadding: true,
+		disableLineClamp: false,
+	},
+)
+
+const leadingItems = computed(() => {
+	if (!props.leading) return []
+	return Array.isArray(props.leading) ? props.leading : [props.leading]
+})
+
+function leadingLabel(item: PageHeaderLeading) {
+	return item.ariaLabel ?? item.tooltip ?? 'Header action'
+}
+
+function leadingWrapperClass(item: PageHeaderLeading, defaultClass: string) {
+	return [item.wrapperClass ?? defaultClass]
+}
+
+function metadataClass(item: PageHeaderMetadataItem, interactive = false) {
+	return [
+		'flex min-w-0 items-center gap-2 font-medium text-secondary text-nowrap',
+		interactive ? 'm-0 cursor-pointer border-0 bg-transparent p-0 hover:underline' : '',
+		item.class,
+	]
+}
+
+function metadataSlotName(item: PageHeaderMetadataItem) {
+	return `metadata-${item.id}`
+}
+
+function badgeClass(badge: PageHeaderBadge, interactive = false) {
+	return [
+		'inline-flex items-center gap-1 rounded-full border border-solid border-surface-5 bg-button-bg px-2 py-1 text-sm font-semibold leading-none text-secondary text-nowrap [&>svg]:size-4 [&>svg]:shrink-0',
+		interactive ? 'm-0 cursor-pointer hover:underline' : '',
+		badge.class,
+	]
+}
+
+function actionLabel(action: PageHeaderAction) {
+	return action.ariaLabel ?? action.tooltip ?? action.label
+}
+
+function dismissActionPrompt(action: PageHeaderAction) {
+	if (action.prompt?.shown) {
+		action.prompt.onDismiss?.()
+	}
+}
+
+function handleActionClick(action: PageHeaderAction, event?: MouseEvent) {
+	dismissActionPrompt(action)
+	void action.onClick?.(event)
+}
+
+function joinedActionColor(color?: ButtonColor) {
+	return color === 'medal-promo' ? 'standard' : color
+}
+</script>
diff --git a/packages/ui/src/components/base/TeleportOverflowMenu.vue b/packages/ui/src/components/base/TeleportOverflowMenu.vue
index 20d5b354d3..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 14f5382e30..c048c9f091 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'
@@ -59,6 +58,7 @@ export { default as OptionGroup } from './OptionGroup.vue'
 export type { Option as OverflowMenuOption } from './OverflowMenu.vue'
 export { default as OverflowMenu } from './OverflowMenu.vue'
 export { default as Page } from './Page.vue'
+export { default as PageHeader } from './PageHeader.vue'
 export { default as Pagination } from './Pagination.vue'
 export { default as PopoutMenu } from './PopoutMenu.vue'
 export { default as PreviewSelectButton } from './PreviewSelectButton.vue'
@@ -83,6 +83,11 @@ export type { TabsTab, TabsValue } from './Tabs.vue'
 export { default as Tabs } from './Tabs.vue'
 export { default as TagItem } from './TagItem.vue'
 export { default as TagTagItem } from './TagTagItem.vue'
+export type {
+	Item as TeleportOverflowMenuItem,
+	Option as TeleportOverflowMenuOption,
+} from './TeleportOverflowMenu.vue'
+export { default as TeleportOverflowMenu } from './TeleportOverflowMenu.vue'
 export { 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/components/ServerManageStats.vue b/packages/ui/src/components/servers/ServerManageStats.vue
similarity index 96%
rename from packages/ui/src/layouts/wrapped/hosting/manage/components/ServerManageStats.vue
rename to packages/ui/src/components/servers/ServerManageStats.vue
index b817cab303..525108c5ae 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/components/ServerManageStats.vue
+++ b/packages/ui/src/components/servers/ServerManageStats.vue
@@ -77,7 +77,7 @@ onMounted(() => {
 	isClient.value = true
 })
 
-const { serverId } = injectModrinthServerContext()
+const { serverId, worldId } = injectModrinthServerContext()
 const { featureFlags } = injectPageContext()
 
 const props = withDefaults(
@@ -190,7 +190,9 @@ const metrics = computed(() => {
 		showGraph: false,
 		chartOptions: null as ReturnType<typeof buildChartOptions> | null,
 		series: null as { name: string; data: number[] }[] | null,
-		link: `/hosting/manage/${encodeURIComponent(serverId)}/files`,
+		link: worldId.value
+			? `/hosting/manage/${encodeURIComponent(serverId)}/instances/${encodeURIComponent(worldId.value)}/files`
+			: `/hosting/manage/${encodeURIComponent(serverId)}/instances`,
 	}
 
 	if (props.loading) {
diff --git a/packages/ui/src/components/servers/ServerSettingsModal.vue b/packages/ui/src/components/servers/ServerSettingsModal.vue
index a72001c73b..6575ad2afa 100644
--- a/packages/ui/src/components/servers/ServerSettingsModal.vue
+++ b/packages/ui/src/components/servers/ServerSettingsModal.vue
@@ -186,7 +186,7 @@ async function show({ serverId, tabIndex, tabId }: ShowOptions) {
 				queryFn: () => client.archon.properties_v1.getProperties(targetServerId, worldId.value!),
 			})
 			queryClient.prefetchQuery({
-				queryKey: ['content', 'list', 'v1', targetServerId],
+				queryKey: ['content', 'list', 'v1', targetServerId, worldId.value],
 				queryFn: () =>
 					client.archon.content_v1.getAddons(targetServerId, worldId.value!, {
 						from_modpack: false,
diff --git a/packages/ui/src/components/servers/admonitions/ServerPanelAdmonitions.vue b/packages/ui/src/components/servers/admonitions/ServerPanelAdmonitions.vue
index 6d429417cc..2d87f616a6 100644
--- a/packages/ui/src/components/servers/admonitions/ServerPanelAdmonitions.vue
+++ b/packages/ui/src/components/servers/admonitions/ServerPanelAdmonitions.vue
@@ -11,7 +11,7 @@ import InstallingBanner, {
 	type SyncProgress,
 } from '#ui/components/servers/InstallingBanner.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
-import { useServerBackupsQueue } from '#ui/composables/server-backups-queue'
+import { useServerBackupsQueue } from '#ui/composables/servers/server-backups-queue.ts'
 import type { FileOperation } from '#ui/layouts/shared/files-tab/types'
 import { injectModrinthClient, injectModrinthServerContext } from '#ui/providers'
 
@@ -53,8 +53,12 @@ const messages = defineMessages({
 	},
 })
 
-const isOnContentTab = computed(() => route.path.includes('/content'))
 const isOnFilesTab = computed(() => route.path.includes('/files'))
+const isOnContentTab = computed(
+	() =>
+		route.path.includes('/content') ||
+		(!!route.params.instance_id && !isOnFilesTab.value && !route.path.includes('/backups')),
+)
 
 const bannerCoversInstalling = computed(
 	() =>
diff --git a/packages/ui/src/components/servers/backups/BackupCreateModal.vue b/packages/ui/src/components/servers/backups/BackupCreateModal.vue
index bd9e53c4a1..c6aaf0f994 100644
--- a/packages/ui/src/components/servers/backups/BackupCreateModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupCreateModal.vue
@@ -87,12 +87,12 @@ const props = defineProps<{
 	backups?: Archon.BackupsQueue.v1.BackupQueueBackup[]
 }>()
 
-const backupsQueryKey = ['backups', 'queue', ctx.serverId]
+const backupsQueryKey = computed(() => ['backups', 'queue', ctx.serverId, ctx.worldId.value])
 
 const createMutation = useMutation({
 	mutationFn: (name: string) =>
 		client.archon.backups_queue_v1.create(ctx.serverId, ctx.worldId.value!, { name }),
-	onSuccess: () => queryClient.invalidateQueries({ queryKey: backupsQueryKey }),
+	onSuccess: () => queryClient.invalidateQueries({ queryKey: backupsQueryKey.value }),
 })
 
 const modal = ref<InstanceType<typeof NewModal>>()
diff --git a/packages/ui/src/components/servers/backups/BackupRenameModal.vue b/packages/ui/src/components/servers/backups/BackupRenameModal.vue
index eaed166ea1..b9c65c8605 100644
--- a/packages/ui/src/components/servers/backups/BackupRenameModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupRenameModal.vue
@@ -69,12 +69,12 @@ const props = defineProps<{
 	backups?: Archon.BackupsQueue.v1.BackupQueueBackup[]
 }>()
 
-const backupsQueryKey = ['backups', 'queue', ctx.serverId]
+const backupsQueryKey = computed(() => ['backups', 'queue', ctx.serverId, ctx.worldId.value])
 
 const renameMutation = useMutation({
 	mutationFn: ({ backupId, name }: { backupId: string; name: string }) =>
 		client.archon.backups_v1.rename(ctx.serverId, ctx.worldId.value!, backupId, { name }),
-	onSuccess: () => queryClient.invalidateQueries({ queryKey: backupsQueryKey }),
+	onSuccess: () => queryClient.invalidateQueries({ queryKey: backupsQueryKey.value }),
 })
 
 const modal = ref<InstanceType<typeof NewModal>>()
diff --git a/packages/ui/src/components/servers/backups/BackupRestoreModal.vue b/packages/ui/src/components/servers/backups/BackupRestoreModal.vue
index 975c27f654..3743774a06 100644
--- a/packages/ui/src/components/servers/backups/BackupRestoreModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupRestoreModal.vue
@@ -39,7 +39,7 @@
 import type { Archon } from '@modrinth/api-client'
 import { RotateCounterClockwiseIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
 import { useMutation, useQueryClient } from '@tanstack/vue-query'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 
 import {
 	injectModrinthClient,
@@ -56,7 +56,7 @@ const client = injectModrinthClient()
 const queryClient = useQueryClient()
 const ctx = injectModrinthServerContext()
 
-const backupsQueryKey = ['backups', 'queue', ctx.serverId]
+const backupsQueryKey = computed(() => ['backups', 'queue', ctx.serverId, ctx.worldId.value])
 
 function safetyBackupName(backupName: string) {
 	const base = `Before restoring "${backupName}"`
@@ -66,7 +66,7 @@ function safetyBackupName(backupName: string) {
 const restoreMutation = useMutation({
 	mutationFn: ({ backupId, name }: { backupId: string; name: string }) =>
 		client.archon.backups_queue_v1.restore(ctx.serverId, ctx.worldId.value!, backupId, { name }),
-	onSuccess: () => queryClient.invalidateQueries({ queryKey: backupsQueryKey }),
+	onSuccess: () => queryClient.invalidateQueries({ queryKey: backupsQueryKey.value }),
 })
 
 const modal = ref<InstanceType<typeof NewModal>>()
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/components/WorldCard.vue b/packages/ui/src/components/servers/instances/InstanceCard.vue
similarity index 88%
rename from packages/ui/src/layouts/wrapped/hosting/manage/components/WorldCard.vue
rename to packages/ui/src/components/servers/instances/InstanceCard.vue
index fbf4244d45..223bad2729 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/components/WorldCard.vue
+++ b/packages/ui/src/components/servers/instances/InstanceCard.vue
@@ -76,7 +76,7 @@
 				<div class="mt-6 flex flex-col gap-1">
 					<h2 class="m-0 text-2xl font-semibold leading-8 text-contrast">{{ world.name }}</h2>
 					<p class="m-0 text-base leading-6 text-secondary">
-						{{ formatMessage(messages.newWorldInstance) }}
+						{{ formatMessage(messages.newInstance) }}
 					</p>
 				</div>
 			</div>
@@ -85,7 +85,7 @@
 				<ButtonStyled color="brand">
 					<button class="w-full !h-10" @click="emit('create', world.id)">
 						<PlusIcon aria-hidden="true" />
-						{{ formatMessage(messages.createWorld) }}
+						{{ formatMessage(messages.createInstance) }}
 					</button>
 				</ButtonStyled>
 			</div>
@@ -121,9 +121,9 @@
 					<span>{{ formatMessage(commonMessages.modpackLabel) }}</span>
 					<div
 						v-if="world.linkedModpack"
-						class="flex min-w-0 items-center gap-2 text-right font-semibold text-contrast"
+						class="flex min-w-0 items-center gap-2 text-right font-semibold leading-5 text-contrast"
 					>
-						<AutoLink :to="world.linkedModpack.link" class="shrink-0">
+						<AutoLink :to="world.linkedModpack.link" class="flex shrink-0 items-center">
 							<Avatar
 								:src="world.linkedModpack.iconUrl"
 								:alt="world.linkedModpack.name"
@@ -134,13 +134,13 @@
 						</AutoLink>
 						<AutoLink
 							:to="world.linkedModpack.link"
-							class="min-w-0 font-semibold text-contrast"
+							class="flex min-w-0 items-center font-semibold leading-5 text-contrast"
 							:class="world.linkedModpack.link ? 'hover:underline' : ''"
 						>
 							<span
 								ref="modpackNameRef"
 								v-tooltip="truncatedTooltip(modpackNameRef, world.linkedModpack.name)"
-								class="block truncate"
+								class="block truncate leading-5"
 							>
 								{{ world.linkedModpack.name }}
 							</span>
@@ -172,12 +172,12 @@
 				<ButtonStyled>
 					<button class="!shadow-none" @click="emit('edit', world.id)">
 						<PencilIcon aria-hidden="true" />
-						{{ formatMessage(messages.editWorld) }}
+						{{ formatMessage(messages.editInstance) }}
 					</button>
 				</ButtonStyled>
 				<ButtonStyled circular>
 					<button
-						v-tooltip="formatMessage(messages.worldSettings)"
+						v-tooltip="formatMessage(messages.instanceSettings)"
 						class="!shadow-none"
 						@click="emit('settings', world.id)"
 					>
@@ -203,44 +203,44 @@ import { truncatedTooltip } from '#ui/utils'
 import { commonMessages } from '#ui/utils/common-messages'
 
 const messages = defineMessages({
-	newWorldInstance: {
-		id: 'servers.manage.worlds.card.empty-description',
-		defaultMessage: 'New world instance',
+	newInstance: {
+		id: 'servers.manage.instances.card.empty-description',
+		defaultMessage: 'New instance',
 	},
-	createWorld: {
-		id: 'servers.manage.worlds.card.create',
-		defaultMessage: 'Create world',
+	createInstance: {
+		id: 'servers.manage.instances.card.create',
+		defaultMessage: 'Create instance',
 	},
 	active: {
-		id: 'servers.manage.worlds.card.active',
+		id: 'servers.manage.instances.card.active',
 		defaultMessage: 'Active',
 	},
 	none: {
-		id: 'servers.manage.worlds.card.none',
+		id: 'servers.manage.instances.card.none',
 		defaultMessage: 'None',
 	},
 	installedContent: {
-		id: 'servers.manage.worlds.card.installed-content',
+		id: 'servers.manage.instances.card.installed-content',
 		defaultMessage: 'Installed content',
 	},
 	lastActive: {
-		id: 'servers.manage.worlds.card.last-active',
+		id: 'servers.manage.instances.card.last-active',
 		defaultMessage: 'Last active',
 	},
 	created: {
-		id: 'servers.manage.worlds.card.created',
+		id: 'servers.manage.instances.card.created',
 		defaultMessage: 'Created',
 	},
-	editWorld: {
-		id: 'servers.manage.worlds.card.edit',
-		defaultMessage: 'Edit world',
+	editInstance: {
+		id: 'servers.manage.instances.card.edit',
+		defaultMessage: 'Edit instance',
 	},
-	worldSettings: {
-		id: 'servers.manage.worlds.card.settings',
-		defaultMessage: 'World settings',
+	instanceSettings: {
+		id: 'servers.manage.instances.card.settings',
+		defaultMessage: 'Instance settings',
 	},
 	notTrackedYet: {
-		id: 'servers.manage.worlds.card.not-tracked-yet',
+		id: 'servers.manage.instances.card.not-tracked-yet',
 		defaultMessage: 'Not tracked yet',
 	},
 })
diff --git a/packages/ui/src/components/servers/server-header/PanelServerActionButton.vue b/packages/ui/src/components/servers/server-header/PanelServerActionButton.vue
index fd6cd6930d..256f98bf37 100644
--- a/packages/ui/src/components/servers/server-header/PanelServerActionButton.vue
+++ b/packages/ui/src/components/servers/server-header/PanelServerActionButton.vue
@@ -1,14 +1,14 @@
 <template>
 	<div class="contents">
 		<div class="flex flex-row items-center gap-2 rounded-lg">
-			<ButtonStyled v-if="isInstalling" type="standard" color="brand" size="large">
+			<ButtonStyled v-if="isInstalling" type="standard" color="brand" :size="size">
 				<button disabled class="flex-shrink-0">
 					<LoaderCircleIcon class="size-5 animate-spin" /> Installing...
 				</button>
 			</ButtonStyled>
 
 			<template v-else-if="showRestartButton">
-				<ButtonStyled type="standard" color="orange" size="large">
+				<ButtonStyled type="standard" color="orange" :size="size">
 					<button v-tooltip="busyTooltip" :disabled="!canTakeAction" @click="handlePrimaryAction">
 						<UpdatedIcon />
 						<span>{{ primaryActionText }}</span>
@@ -17,7 +17,7 @@
 
 				<JoinedButtons
 					color="red"
-					size="large"
+					:size="size"
 					:actions="stopSplitActions"
 					:primary-disabled="!canTakeAction"
 					:dropdown-disabled="!canKill"
@@ -32,7 +32,7 @@
 			<template v-else-if="isStopping">
 				<JoinedButtons
 					color="red"
-					size="large"
+					:size="size"
 					:actions="stopSplitActions"
 					:primary-disabled="true"
 					:dropdown-disabled="!canKill"
@@ -46,10 +46,10 @@
 			</template>
 
 			<template v-else>
-				<ButtonStyled type="standard" color="brand" size="large">
+				<ButtonStyled type="standard" color="brand" :size="size">
 					<button v-tooltip="busyTooltip" :disabled="!canTakeAction" @click="handlePrimaryAction">
 						<PlayIcon />
-						<span>{{ primaryActionText }}</span>
+						<span>{{ startActionText }}</span>
 					</button>
 				</ButtonStyled>
 			</template>
@@ -74,9 +74,13 @@ import { useServerPowerAction } from './use-server-power-action'
 const props = withDefaults(
 	defineProps<{
 		disabled?: boolean
+		size?: 'standard' | 'large' | 'small'
+		startLabel?: string
 	}>(),
 	{
 		disabled: false,
+		size: 'large',
+		startLabel: 'Start',
 	},
 )
 
@@ -94,6 +98,11 @@ const {
 	disabled: computed(() => props.disabled),
 })
 
+const size = computed(() => props.size)
+const startActionText = computed(() =>
+	primaryActionText.value === 'Start' ? props.startLabel : primaryActionText.value,
+)
+
 const stopSplitActions = computed<JoinedButtonAction[]>(() => [
 	{
 		id: 'stop',
diff --git a/packages/ui/src/components/servers/server-header/PanelServerOverflowMenu.vue b/packages/ui/src/components/servers/server-header/PanelServerOverflowMenu.vue
deleted file mode 100644
index a05c6a8db2..0000000000
--- a/packages/ui/src/components/servers/server-header/PanelServerOverflowMenu.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-	<div class="contents">
-		<ButtonStyled circular type="transparent" size="large">
-			<TeleportOverflowMenu :options="menuOptions">
-				<MoreVerticalIcon aria-hidden="true" />
-				<template #allServers>
-					<ServerIcon class="h-5 w-5" />
-					<span>All servers</span>
-				</template>
-				<template #copy-id>
-					<ClipboardCopyIcon class="h-5 w-5" aria-hidden="true" />
-					<span>Copy ID</span>
-				</template>
-			</TeleportOverflowMenu>
-		</ButtonStyled>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { ClipboardCopyIcon, MoreVerticalIcon, ServerIcon } from '@modrinth/assets'
-import { computed } from 'vue'
-import { useRouter } from 'vue-router'
-
-import { ButtonStyled } from '#ui/components'
-import TeleportOverflowMenu from '#ui/components/base/TeleportOverflowMenu.vue'
-import { injectModrinthServerContext } from '#ui/providers'
-
-const props = withDefaults(
-	defineProps<{
-		disabled?: boolean
-		showCopyIdAction?: boolean
-		showDebugInfo?: boolean
-		uptimeSeconds?: number
-	}>(),
-	{
-		disabled: false,
-		showCopyIdAction: false,
-		showDebugInfo: false,
-		uptimeSeconds: 0,
-	},
-)
-
-const router = useRouter()
-const { serverId } = injectModrinthServerContext()
-
-const menuOptions = computed(() => [
-	{
-		id: 'allServers',
-		label: 'All servers',
-		icon: ServerIcon,
-		action: () => router.push('/hosting/manage'),
-	},
-	{
-		id: 'copy-id',
-		label: 'Copy ID',
-		icon: ClipboardCopyIcon,
-		action: () => copyId(),
-		shown: props.showCopyIdAction,
-	},
-])
-
-async function copyId() {
-	await navigator.clipboard.writeText(serverId)
-}
-</script>
diff --git a/packages/ui/src/components/servers/server-header/ServerManageHeader.vue b/packages/ui/src/components/servers/server-header/ServerManageHeader.vue
index 391546aecf..9d0d8c03cb 100644
--- a/packages/ui/src/components/servers/server-header/ServerManageHeader.vue
+++ b/packages/ui/src/components/servers/server-header/ServerManageHeader.vue
@@ -1,96 +1,38 @@
 <template>
 	<div class="w-full flex flex-col gap-4" :class="{ 'mt-4': isNuxt }">
-		<ContentPageHeader :class="props.headerClass">
-			<template #icon>
-				<ServerIcon
-					:image="headerImage"
-					:class="isNuxt ? 'size-20 !rounded-2xl' : 'size-16 !rounded-xl'"
-				/>
-			</template>
-			<template #title>
-				{{ props.server?.name || 'Server' }}
-			</template>
-			<template #stats>
-				<div
-					v-if="props.server?.flows?.intro"
-					class="flex items-center gap-2 font-semibold text-secondary"
-				>
-					<SettingsIcon />
-					Configuring server...
-				</div>
-				<div v-else class="flex flex-wrap items-center gap-2">
-					<div v-if="props.server?.loader" class="flex items-center gap-2 font-medium capitalize">
-						<LoaderIcon :loader="props.server.loader" class="flex shrink-0 [&&]:size-5" />
-						{{ props.server.loader }} {{ props.server.mc_version }}
-					</div>
-
-					<div
-						v-if="
-							props.server?.loader &&
-							props.server?.net?.domain &&
-							!userPreferences.hideSubdomainLabel
-						"
-						class="h-1.5 w-1.5 rounded-full bg-surface-5"
-					/>
-
-					<div
-						v-if="props.server?.net?.domain && !userPreferences.hideSubdomainLabel"
-						v-tooltip="'Copy server address'"
-						class="flex cursor-pointer items-center gap-2 font-medium hover:underline text-nowrap"
-						@click="copyServerAddress"
-					>
-						<LinkIcon class="flex size-5 shrink-0" />
-						{{ props.server.net.domain }}.modrinth.gg
-					</div>
-
-					<div v-if="showUptime" class="h-1.5 w-1.5 rounded-full bg-surface-5" />
-
-					<div v-if="showUptime" class="flex items-center gap-2 font-medium">
-						<TimerIcon class="flex size-5 shrink-0" />
-						{{ formattedUptime }}
-					</div>
-
-					<div
-						v-if="showProject && (props.server?.loader || props.server?.net?.domain || showUptime)"
-						class="h-1.5 w-1.5 rounded-full bg-surface-5"
-					/>
-
-					<div
-						v-if="showProject"
-						class="flex items-center gap-1.5 font-medium text-primary text-nowrap"
-					>
-						Linked to
-						<Avatar
-							:src="props.serverProject?.icon_url ?? undefined"
-							:alt="props.serverProject?.title ?? ''"
-							size="24px"
-						/>
-						<AutoLink :to="serverProjectLink" class="truncate text-primary hover:underline">
-							{{ props.serverProject?.title }}
-						</AutoLink>
-					</div>
-				</div>
-			</template>
-			<template #actions>
-				<slot name="actions" />
-			</template>
-		</ContentPageHeader>
+		<PageHeader
+			:header="props.server?.name || 'Server'"
+			:leading="leadingItems"
+			:metadata="metadataItems"
+			:actions="headerActions"
+			:header-class="props.headerClass"
+		/>
 	</div>
 </template>
 
 <script setup lang="ts">
 import type { Archon } from '@modrinth/api-client'
 import { NuxtModrinthClient } from '@modrinth/api-client'
-import { LinkIcon, LoaderIcon, SettingsIcon, TimerIcon } from '@modrinth/assets'
-import { useStorage } from '@vueuse/core'
+import {
+	GlobeIcon,
+	LinkIcon,
+	LoaderCircleIcon,
+	PlayIcon,
+	SettingsIcon,
+	SlashIcon,
+	StopCircleIcon,
+	UpdatedIcon,
+} from '@modrinth/assets'
+import type { Component } from 'vue'
 import { computed } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
 
-import { AutoLink, Avatar, ContentPageHeader, ServerIcon } from '#ui/components'
-import {
-	injectModrinthClient,
-	injectModrinthServerContext,
-	injectNotificationManager,
-} from '#ui/providers'
+import type { JoinedButtonAction } from '#ui/components/base/JoinedButtons.vue'
+import PageHeader from '#ui/components/base/PageHeader.vue'
+import ServerIcon from '#ui/components/servers/icons/ServerIcon.vue'
+import { injectModrinthClient, injectNotificationManager } from '#ui/providers'
+
+import { useServerPowerAction } from './use-server-power-action'
 
 type ServerProjectSummary = {
 	id: string
@@ -99,37 +41,115 @@ type ServerProjectSummary = {
 	icon_url?: string | null
 }
 
+type HeaderWorld = {
+	id: string
+	name: string
+}
+
+type HeaderMetadataItem = {
+	id: string
+	label: string
+	icon: Component
+	iconProps?: Record<string, unknown>
+	tooltip?: string
+	ariaLabel?: string
+	to?: string | RouteLocationRaw
+	onClick?: () => void | Promise<void>
+	class?: string
+}
+
+type HeaderAction = {
+	id: string
+	label: string
+	icon?: Component
+	iconProps?: Record<string, unknown>
+	iconClass?: string
+	tooltip?: string
+	ariaLabel?: string
+	to?: string | RouteLocationRaw
+	onClick?: () => void | Promise<void>
+	disabled?: boolean
+	labelHidden?: boolean
+	circular?: boolean
+	color?: 'standard' | 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple'
+	size?: 'standard' | 'large' | 'small'
+	type?: 'standard' | 'outlined' | 'transparent' | 'highlight' | 'highlight-colored-text' | 'chip'
+	joinedActions?: JoinedButtonAction[]
+	primaryDisabled?: boolean
+	dropdownDisabled?: boolean
+	primaryMuted?: boolean
+	prompt?: {
+		title: string
+		description: string
+		dismissLabel?: string
+		shown?: boolean
+		placement?: string
+		onDismiss?: () => void
+	}
+}
+
 const props = withDefaults(
 	defineProps<{
 		server: Archon.Servers.v0.Server | null | undefined
 		serverImage?: string | null
 		serverProject?: ServerProjectSummary | null
 		serverProjectLink?: string
+		activeWorldName?: string | null
 		uptimeSeconds?: number
 		showUptime?: boolean
 		backHref?: string
 		breadcrumbClass?: string
 		headerClass?: string
+		worlds?: HeaderWorld[]
+		powerDisabled?: boolean
+		settingsLabel?: string
+		showSettingsHint?: boolean
+		settingsHintTitle?: string
+		settingsHintDescription?: string
+		settingsHintDismissLabel?: string
+		actions?: HeaderAction[]
 	}>(),
 	{
 		serverImage: null,
 		serverProject: null,
 		serverProjectLink: '',
+		activeWorldName: null,
 		uptimeSeconds: 0,
 		showUptime: true,
 		backHref: '/hosting/manage',
 		breadcrumbClass: 'breadcrumb goto-link flex w-fit items-center',
 		headerClass: '',
+		worlds: () => [],
+		powerDisabled: false,
+		settingsLabel: 'Server settings',
+		showSettingsHint: false,
+		settingsHintTitle: '',
+		settingsHintDescription: '',
+		settingsHintDismissLabel: "Don't show again",
+		actions: () => [],
 	},
 )
 
+const emit = defineEmits<{
+	openSettings: []
+	dismissSettingsHint: []
+}>()
+
 const client = injectModrinthClient()
 const { addNotification } = injectNotificationManager()
-const { serverId } = injectModrinthServerContext()
 const isNuxt = computed(() => client instanceof NuxtModrinthClient)
-
-const userPreferences = useStorage(`pyro-server-${serverId}-preferences`, {
-	hideSubdomainLabel: false,
+const {
+	isInstalling,
+	isStopping,
+	showRestartButton,
+	busyTooltip,
+	canTakeAction,
+	canKill,
+	primaryActionText,
+	initiateAction,
+	handlePrimaryAction,
+} = useServerPowerAction({
+	disabled: computed(() => props.powerDisabled),
 })
 
 const headerImage = computed(() => {
@@ -139,37 +159,191 @@ const headerImage = computed(() => {
 	return props.serverImage ?? undefined
 })
 
-const showUptime = computed(() => props.showUptime && (props.uptimeSeconds ?? 0) > 0)
+const leadingItems = computed(() => [
+	{
+		id: 'server-icon',
+		type: 'component' as const,
+		component: ServerIcon,
+		componentProps: {
+			image: headerImage.value,
+		},
+		class: isNuxt.value ? 'size-15 !rounded-2xl' : 'size-15 !rounded-xl',
+	},
+])
 
-const formattedUptime = computed(() => {
-	const uptime = props.uptimeSeconds ?? 0
-	const days = Math.floor(uptime / (24 * 3600))
-	const hours = Math.floor((uptime % (24 * 3600)) / 3600)
-	const minutes = Math.floor((uptime % 3600) / 60)
-	const seconds = uptime % 60
+const serverAddress = computed(() => {
+	const domain = props.server?.net?.domain
+	if (domain) return `${domain}.modrinth.gg`
 
-	let formatted = ''
-	if (days > 0) formatted += `${days}d `
-	if (hours > 0 || days > 0) formatted += `${hours}h `
-	formatted += `${minutes}m ${seconds}s`
-	return formatted.trim()
+	const ip = props.server?.net?.ip
+	if (!ip) return null
+	const port = props.server?.net?.port
+	return port ? `${ip}:${port}` : ip
 })
 
-const showProject = computed(() => !!props.serverProject)
+const metadataItems = computed<HeaderMetadataItem[]>(() => {
+	if (props.server?.flows?.intro) {
+		return [
+			{
+				id: 'configuring',
+				label: 'Configuring server...',
+				icon: SettingsIcon,
+			},
+		]
+	}
 
-const serverProjectLink = computed(() => {
-	if (props.serverProjectLink) {
-		return props.serverProjectLink
+	const items: HeaderMetadataItem[] = []
+	const worldName = props.activeWorldName
+	if (worldName) {
+		items.push({
+			id: 'world',
+			label: worldName,
+			icon: GlobeIcon,
+		})
 	}
-	if (!props.serverProject) {
-		return ''
+	if (serverAddress.value) {
+		items.push({
+			id: 'address',
+			label: serverAddress.value,
+			icon: LinkIcon,
+			tooltip: 'Copy server address',
+			onClick: copyServerAddress,
+		})
 	}
-	return `/project/${props.serverProject.slug ?? props.serverProject.id}`
+	return items
 })
 
+const startActionText = computed(() =>
+	primaryActionText.value === 'Start' ? 'Start server' : primaryActionText.value,
+)
+
+const startableWorlds = computed(() => {
+	if (props.worlds.length > 0) return props.worlds
+
+	return [
+		{
+			id: 'current-world',
+			name: props.activeWorldName ?? 'current instance',
+		},
+	]
+})
+
+const startSplitActions = computed<JoinedButtonAction[]>(() => [
+	{
+		id: 'start',
+		label: startActionText.value,
+		icon: PlayIcon,
+		action: handlePrimaryAction,
+	},
+	...startableWorlds.value.map((world) => ({
+		id: `start-${world.id}`,
+		label: `Start with ${world.name}`,
+		icon: GlobeIcon,
+		action: handlePrimaryAction,
+	})),
+])
+
+const stopSplitActions = computed<JoinedButtonAction[]>(() => [
+	{
+		id: 'stop',
+		label: isStopping.value ? 'Stopping' : 'Stop',
+		icon: StopCircleIcon,
+		action: () => initiateAction('Stop'),
+	},
+	{
+		id: 'kill_server',
+		label: 'Kill server',
+		icon: SlashIcon,
+		action: () => initiateAction('Kill'),
+	},
+])
+
+const powerActions = computed<HeaderAction[]>(() => {
+	if (isInstalling.value) {
+		return [
+			{
+				id: 'installing',
+				label: 'Installing...',
+				icon: LoaderCircleIcon,
+				iconClass: 'animate-spin',
+				color: 'brand',
+				disabled: true,
+			},
+		]
+	}
+	if (showRestartButton.value) {
+		return [
+			{
+				id: 'restart',
+				label: primaryActionText.value,
+				icon: UpdatedIcon,
+				color: 'orange',
+				tooltip: busyTooltip.value,
+				disabled: !canTakeAction.value,
+				onClick: handlePrimaryAction,
+			},
+			{
+				id: 'stop',
+				label: 'Stop server',
+				color: 'red',
+				joinedActions: stopSplitActions.value,
+				primaryDisabled: !canTakeAction.value,
+				dropdownDisabled: !canKill.value,
+			},
+		]
+	}
+	if (isStopping.value) {
+		return [
+			{
+				id: 'stop',
+				label: 'Stop server',
+				color: 'red',
+				joinedActions: stopSplitActions.value,
+				primaryDisabled: true,
+				dropdownDisabled: !canKill.value,
+				primaryMuted: true,
+			},
+		]
+	}
+	return [
+		{
+			id: 'start',
+			label: startActionText.value,
+			color: 'brand',
+			tooltip: busyTooltip.value,
+			joinedActions: startSplitActions.value,
+			primaryDisabled: !canTakeAction.value,
+			dropdownDisabled: !canTakeAction.value,
+		},
+	]
+})
+
+const settingsAction = computed<HeaderAction>(() => ({
+	id: 'settings',
+	label: props.settingsLabel,
+	icon: SettingsIcon,
+	labelHidden: true,
+	tooltip: props.showSettingsHint ? undefined : props.settingsLabel,
+	onClick: () => emit('openSettings'),
+	prompt: {
+		title: props.settingsHintTitle,
+		description: props.settingsHintDescription,
+		dismissLabel: props.settingsHintDismissLabel,
+		shown: props.showSettingsHint,
+		placement: 'bottom-end',
+		onDismiss: () => emit('dismissSettingsHint'),
+	},
+}))
+
+const headerActions = computed<HeaderAction[]>(() => [
+	...powerActions.value,
+	settingsAction.value,
+	...props.actions,
+])
+
 function copyServerAddress() {
-	if (!props.server?.net?.domain) return
-	navigator.clipboard.writeText(`${props.server.net.domain}.modrinth.gg`)
+	if (!serverAddress.value) return
+	navigator.clipboard.writeText(serverAddress.value)
 	addNotification({
 		title: 'Server address copied',
 		text: "Your server's address has been copied to your clipboard.",
diff --git a/packages/ui/src/components/servers/server-header/WorldManageHeader.vue b/packages/ui/src/components/servers/server-header/WorldManageHeader.vue
new file mode 100644
index 0000000000..7d2e3342bf
--- /dev/null
+++ b/packages/ui/src/components/servers/server-header/WorldManageHeader.vue
@@ -0,0 +1,134 @@
+<template>
+	<div class="w-full flex flex-col gap-4" :class="{ 'mt-4': isNuxt }">
+		<PageHeader
+			:header="props.name || props.fallbackName"
+			:leading="leadingItems"
+			:metadata="headerMetadata"
+			:actions="props.actions"
+			:header-class="props.headerClass"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { NuxtModrinthClient } from '@modrinth/api-client'
+import { LeftArrowIcon, TagCategoryGamepad2Icon as Gamepad2Icon, TimerIcon } from '@modrinth/assets'
+import { type Component, computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+import PageHeader from '#ui/components/base/PageHeader.vue'
+import LoaderIcon from '#ui/components/servers/icons/LoaderIcon.vue'
+import { injectModrinthClient } from '#ui/providers'
+import { formatLoaderLabel } from '#ui/utils/loaders'
+
+type MetadataItem = {
+	id: string
+	label: string
+	icon: Component
+	iconProps?: Record<string, unknown>
+}
+type HeaderAction = {
+	id: string
+	label: string
+	icon?: Component
+	iconProps?: Record<string, unknown>
+	iconClass?: string
+	tooltip?: string
+	ariaLabel?: string
+	onClick?: () => void | Promise<void>
+	disabled?: boolean
+	labelHidden?: boolean
+	circular?: boolean
+	color?: 'standard' | 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple'
+	size?: 'standard' | 'large' | 'small'
+	type?: 'standard' | 'outlined' | 'transparent' | 'highlight' | 'highlight-colored-text' | 'chip'
+	joinedActions?: {
+		id: string
+		label: string
+		icon?: Component
+		action: () => void
+		color?: 'standard' | 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple'
+		hoverFilled?: boolean
+	}[]
+	primaryDisabled?: boolean
+	dropdownDisabled?: boolean
+	primaryMuted?: boolean
+}
+
+const props = withDefaults(
+	defineProps<{
+		name?: string | null
+		metadataItems?: MetadataItem[]
+		gameVersion?: string | null
+		loader?: string | null
+		loaderVersion?: string | null
+		lastActive?: string | null
+		backHref: string
+		backLabel: string
+		fallbackName?: string
+		headerClass?: string
+		actions?: HeaderAction[]
+	}>(),
+	{
+		name: null,
+		metadataItems: () => [],
+		gameVersion: null,
+		loader: null,
+		loaderVersion: null,
+		lastActive: null,
+		fallbackName: 'World',
+		headerClass: '',
+		actions: () => [],
+	},
+)
+
+const client = injectModrinthClient()
+const router = useRouter()
+const isNuxt = computed(() => client instanceof NuxtModrinthClient)
+const leadingItems = computed(() => [
+	{
+		id: 'back',
+		type: 'button' as const,
+		icon: LeftArrowIcon,
+		ariaLabel: props.backLabel,
+		tooltip: props.backLabel,
+		onClick: () => router.push(props.backHref),
+	},
+])
+const loaderLabel = computed(() => {
+	if (!props.loader) return null
+	const label = formatLoaderLabel(props.loader.toLowerCase())
+	return [label, props.loaderVersion].filter(Boolean).join(' ')
+})
+const headerMetadata = computed<MetadataItem[]>(() => {
+	if (props.metadataItems.length) return props.metadataItems
+
+	const items: MetadataItem[] = []
+	if (props.gameVersion) {
+		items.push({
+			id: 'game-version',
+			label: props.gameVersion,
+			icon: Gamepad2Icon,
+		})
+	}
+	if (props.loader && loaderLabel.value) {
+		items.push({
+			id: 'loader',
+			label: loaderLabel.value,
+			icon: LoaderIcon,
+			iconProps: {
+				loader: formatLoaderLabel(props.loader.toLowerCase()),
+			},
+		})
+	}
+	if (props.lastActive) {
+		items.push({
+			id: 'last-active',
+			label: props.lastActive,
+			icon: TimerIcon,
+		})
+	}
+
+	return items
+})
+</script>
diff --git a/packages/ui/src/components/servers/server-header/index.ts b/packages/ui/src/components/servers/server-header/index.ts
index 97bcdcc7f2..dcbaebc210 100644
--- a/packages/ui/src/components/servers/server-header/index.ts
+++ b/packages/ui/src/components/servers/server-header/index.ts
@@ -1,3 +1,3 @@
 export { default as PanelServerActionButton } from './PanelServerActionButton.vue'
-export { default as PanelServerOverflowMenu } from './PanelServerOverflowMenu.vue'
 export { default as ServerManageHeader } from './ServerManageHeader.vue'
+export { default as WorldManageHeader } from './WorldManageHeader.vue'
diff --git a/packages/ui/src/composables/index.ts b/packages/ui/src/composables/index.ts
index 40ed1744dd..4f0a7443d9 100644
--- a/packages/ui/src/composables/index.ts
+++ b/packages/ui/src/composables/index.ts
@@ -9,15 +9,15 @@ export * from './i18n'
 export * from './i18n-debug'
 export * from './page-leave-safety'
 export * from './scroll-indicator'
-export * from './server-backup'
-export * from './server-backups-queue'
-export * from './server-console'
-export * from './server-manage-core-runtime'
+export * from './servers/server-backup'
+export * from './servers/server-backups-queue'
+export * from './servers/server-console'
+export * from './servers/server-manage-core-runtime'
+export * from './servers/use-server-image'
 export * from './sticky-observer'
 export * from './terminal'
 export * from './use-loading-bar-token'
 export * from './use-loading-state-core'
 export * from './use-ready-state'
-export * from './use-server-image'
 export * from './use-server-project'
 export * from './virtual-scroll'
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/backups-selection.ts b/packages/ui/src/composables/servers/backups-selection.ts
similarity index 100%
rename from packages/ui/src/layouts/wrapped/hosting/manage/backups-selection.ts
rename to packages/ui/src/composables/servers/backups-selection.ts
diff --git a/packages/ui/src/composables/server-backup.ts b/packages/ui/src/composables/servers/server-backup.ts
similarity index 91%
rename from packages/ui/src/composables/server-backup.ts
rename to packages/ui/src/composables/servers/server-backup.ts
index 4dd75a5467..fe986568a6 100644
--- a/packages/ui/src/composables/server-backup.ts
+++ b/packages/ui/src/composables/servers/server-backup.ts
@@ -1,7 +1,7 @@
 import type { Archon } from '@modrinth/api-client'
 
-import { injectModrinthClient } from '../providers/api-client'
-import { injectNotificationManager } from '../providers/web-notifications'
+import { injectModrinthClient } from '../../providers/api-client'
+import { injectNotificationManager } from '../../providers/web-notifications'
 
 export function useServerBackupDownload() {
 	const client = injectModrinthClient()
diff --git a/packages/ui/src/composables/server-backups-queue.ts b/packages/ui/src/composables/servers/server-backups-queue.ts
similarity index 98%
rename from packages/ui/src/composables/server-backups-queue.ts
rename to packages/ui/src/composables/servers/server-backups-queue.ts
index e05efdfe34..b28e8b3fbf 100644
--- a/packages/ui/src/composables/server-backups-queue.ts
+++ b/packages/ui/src/composables/servers/server-backups-queue.ts
@@ -4,7 +4,7 @@ import { computed, reactive, type Ref } from 'vue'
 
 import { type BusyReason, injectModrinthClient } from '#ui/providers'
 
-import { defineMessage } from './i18n'
+import { defineMessage } from '../i18n'
 
 type ProgressKey = `${string}:${'create' | 'restore'}`
 
@@ -12,7 +12,7 @@ export function useServerBackupsQueue(serverId: Ref<string>, worldId: Ref<string
 	const client = injectModrinthClient()
 	const queryClient = useQueryClient()
 
-	const queryKey = computed(() => ['backups', 'queue', serverId.value] as const)
+	const queryKey = computed(() => ['backups', 'queue', serverId.value, worldId.value] as const)
 
 	const progressOverlay = reactive(new Map<ProgressKey, number>())
 	const lastSeenState = new Map<ProgressKey, Archon.Websocket.v0.BackupState>()
diff --git a/packages/ui/src/composables/server-console.ts b/packages/ui/src/composables/servers/server-console.ts
similarity index 98%
rename from packages/ui/src/composables/server-console.ts
rename to packages/ui/src/composables/servers/server-console.ts
index f2675d89d2..45014b646f 100644
--- a/packages/ui/src/composables/server-console.ts
+++ b/packages/ui/src/composables/servers/server-console.ts
@@ -1,8 +1,8 @@
 import { createGlobalState } from '@vueuse/core'
 import { type Ref, ref, shallowRef, triggerRef } from 'vue'
 
-import { detectLogLevel } from '../layouts/shared/console/composables/log-level'
-import type { Log4jEvent, LogLevel, LogLine } from '../layouts/shared/console/types'
+import { detectLogLevel } from '../../layouts/shared/console/composables/log-level'
+import type { Log4jEvent, LogLevel, LogLine } from '../../layouts/shared/console/types'
 
 // Flip to true during development to enable console perf logging.
 // Uses a plain constant to avoid turbo env-var declarations.
diff --git a/packages/ui/src/composables/server-manage-core-runtime.ts b/packages/ui/src/composables/servers/server-manage-core-runtime.ts
similarity index 98%
rename from packages/ui/src/composables/server-manage-core-runtime.ts
rename to packages/ui/src/composables/servers/server-manage-core-runtime.ts
index 4d6665ac40..84fbef90bf 100644
--- a/packages/ui/src/composables/server-manage-core-runtime.ts
+++ b/packages/ui/src/composables/servers/server-manage-core-runtime.ts
@@ -8,10 +8,10 @@ import type { Stats } from '@modrinth/utils'
 import type { ComputedRef, Ref } from 'vue'
 import { computed, ref } from 'vue'
 
-import type { FileOperation } from '../layouts/shared/files-tab/types'
-import { injectModrinthClient, provideModrinthServerContext } from '../providers'
-import type { BusyReason } from '../providers/server-context'
-import { defineMessage } from './i18n'
+import type { FileOperation } from '../../layouts/shared/files-tab/types'
+import { injectModrinthClient, provideModrinthServerContext } from '../../providers'
+import type { BusyReason } from '../../providers/server-context'
+import { defineMessage } from '../i18n'
 import { useModrinthServersConsole } from './server-console'
 
 type ReadableRef<T> = Ref<T> | ComputedRef<T>
diff --git a/packages/ui/src/composables/use-server-image.ts b/packages/ui/src/composables/servers/use-server-image.ts
similarity index 86%
rename from packages/ui/src/composables/use-server-image.ts
rename to packages/ui/src/composables/servers/use-server-image.ts
index c33018ff5e..9722f1c306 100644
--- a/packages/ui/src/composables/use-server-image.ts
+++ b/packages/ui/src/composables/servers/use-server-image.ts
@@ -5,6 +5,7 @@ import { computed, type ComputedRef, ref } from 'vue'
 import { injectModrinthClient } from '#ui/providers'
 
 type UpstreamRef = ComputedRef<Archon.Servers.v0.Server['upstream'] | null | undefined>
+type ServerIdSource = string | { readonly value: string }
 
 type UseServerImageOptions = {
 	enabled?: ComputedRef<boolean> | boolean
@@ -39,7 +40,7 @@ function isNotFound(error: unknown): boolean {
 }
 
 export function useServerImage(
-	serverId: string,
+	serverId: ServerIdSource,
 	upstream: UpstreamRef,
 	options: UseServerImageOptions = {},
 ) {
@@ -47,24 +48,33 @@ export function useServerImage(
 	const localImage = ref<string | null | undefined>(undefined)
 	const iconSize = options.size ?? 512
 	const includeProjectFallback = options.includeProjectFallback ?? false
+	const resolvedServerId = computed(() => resolveServerId(serverId))
 
 	const queryKey = computed(
-		() => ['servers', 'detail', serverId, 'icon', upstream.value?.project_id ?? null] as const,
+		() =>
+			[
+				'servers',
+				'detail',
+				resolvedServerId.value,
+				'icon',
+				upstream.value?.project_id ?? null,
+			] as const,
 	)
 
 	const isEnabled = computed(() => {
 		const explicitEnabled =
 			typeof options.enabled === 'boolean' ? options.enabled : options.enabled?.value
-		return !!serverId && (explicitEnabled ?? true)
+		return !!resolvedServerId.value && (explicitEnabled ?? true)
 	})
 
 	const { data: remoteImage, refetch } = useQuery({
 		queryKey,
 		queryFn: async (): Promise<string | null> => {
-			if (!serverId) return null
+			const id = resolvedServerId.value
+			if (!id) return null
 
 			try {
-				const fsAuth = await client.archon.servers_v0.getFilesystemAuth(serverId)
+				const fsAuth = await client.archon.servers_v0.getFilesystemAuth(id)
 
 				try {
 					const blob = await client.kyros.files_v0.downloadFileWithAuth(fsAuth, '/server-icon.png')
@@ -132,3 +142,7 @@ export function useServerImage(
 		resetLocalOverride,
 	}
 }
+
+function resolveServerId(serverId: ServerIdSource): string {
+	return typeof serverId === 'string' ? serverId : serverId.value
+}
diff --git a/packages/ui/src/layouts/shared/browse-tab/header.vue b/packages/ui/src/layouts/shared/browse-tab/header.vue
index 86ddd1643d..e3398354d0 100644
--- a/packages/ui/src/layouts/shared/browse-tab/header.vue
+++ b/packages/ui/src/layouts/shared/browse-tab/header.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { LeftArrowIcon } from '@modrinth/assets'
+import { LeftArrowIcon, TagCategoryGamepad2Icon as Gamepad2Icon } from '@modrinth/assets'
+import type { Component } from 'vue'
 import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 import Admonition from '#ui/components/base/Admonition.vue'
-import Avatar from '#ui/components/base/Avatar.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import { useServerImage } from '#ui/composables/use-server-image'
+import PageHeader from '#ui/components/base/PageHeader.vue'
+import LoaderIcon from '#ui/components/servers/icons/LoaderIcon.vue'
+import { useServerImage } from '#ui/composables/servers/use-server-image.ts'
 import { formatLoaderLabel } from '#ui/utils/loaders'
 
 import SelectedProjectsLeaveModal from './components/SelectedProjectsLeaveModal.vue'
@@ -18,8 +19,17 @@ const MEDAL_ICON_URL = 'https://cdn-raw.modrinth.com/medal_icon.webp'
 const router = useRouter()
 const props = defineProps<{
 	installContext?: BrowseInstallContext | null
+	divider?: boolean
+	bottomPadding?: boolean
 }>()
 type SelectedProjectsLeaveResult = 'cancel' | 'discard' | 'install'
+type BrowseHeaderMetadataItem = {
+	id: string
+	label: string
+	icon?: Component
+	iconProps?: Record<string, unknown>
+	class?: string
+}
 
 const ctx = injectBrowseManager(null)
 const installContext = computed(() => props.installContext ?? ctx?.installContext?.value ?? null)
@@ -37,14 +47,66 @@ const iconSrc = computed(() => {
 	return fetchedIcon.value ?? installContext.value?.iconSrc ?? null
 })
 
-const metadataItems = computed(() => {
+const leadingItems = computed(() => {
 	const context = installContext.value
 	if (!context) return []
+
 	return [
-		context.heading,
-		context.gameVersion ? `MC ${context.gameVersion}` : '',
-		context.loader ? formatLoaderLabel(context.loader) : '',
-	].filter(Boolean)
+		{
+			id: 'back',
+			type: 'button' as const,
+			icon: LeftArrowIcon,
+			ariaLabel: context.backLabel,
+			tooltip: context.backLabel,
+			onClick: handleBack,
+		},
+		...(iconSrc.value
+			? [
+					{
+						id: 'icon',
+						type: 'avatar' as const,
+						src: iconSrc.value,
+						alt: context.name,
+						avatarSize: '48px',
+						class: 'shrink-0',
+					},
+				]
+			: []),
+	]
+})
+
+const metadataItems = computed(() => {
+	const context = installContext.value
+	if (!context) return []
+
+	const items: BrowseHeaderMetadataItem[] = []
+	if (context.heading) {
+		items.push({
+			id: 'heading',
+			label: context.heading,
+			class: '!text-primary',
+		})
+	}
+	if (context.gameVersion) {
+		items.push({
+			id: 'game-version',
+			label: context.gameVersion,
+			icon: Gamepad2Icon,
+			class: '!text-primary',
+		})
+	}
+	if (context.loader) {
+		const loaderName = formatLoaderLabel(context.loader)
+		const loaderLabel = [loaderName, context.loaderVersion].filter(Boolean).join(' ')
+		items.push({
+			id: 'loader',
+			label: loaderLabel,
+			icon: LoaderIcon,
+			iconProps: { loader: loaderName },
+			class: '!text-primary',
+		})
+	}
+	return items
 })
 
 const selectedCount = computed(() => installContext.value?.selectedProjects?.length ?? 0)
@@ -94,37 +156,16 @@ async function handleSelectedProjectsLeaveResult(
 			:count="selectedCount"
 			:installing="isInstallingSelected"
 		/>
-		<div class="flex flex-col gap-2">
-			<div class="flex flex-wrap items-center justify-between gap-4">
-				<div class="flex min-w-0 items-center gap-4">
-					<ButtonStyled circular size="large">
-						<button :aria-label="installContext.backLabel" @click="handleBack">
-							<LeftArrowIcon />
-						</button>
-					</ButtonStyled>
-
-					<Avatar v-if="iconSrc" :src="iconSrc" size="48px" class="shrink-0" />
-
-					<div class="flex min-w-0 flex-col justify-center gap-1">
-						<h1 class="m-0 truncate text-2xl font-semibold leading-8 text-contrast">
-							{{ installContext.name }}
-						</h1>
-						<div
-							v-if="metadataItems.length"
-							class="flex flex-wrap items-center gap-2 text-base font-medium leading-6 text-primary"
-						>
-							<template v-for="(item, index) in metadataItems" :key="item">
-								<span
-									v-if="index > 0"
-									class="h-1.5 w-1.5 shrink-0 rounded-full bg-current opacity-60"
-								/>
-								<span>{{ item }}</span>
-							</template>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
+		<PageHeader
+			:header="installContext.name"
+			:leading="leadingItems"
+			:metadata="metadataItems"
+			:divider="props.divider ?? false"
+			:bottom-padding="props.bottomPadding ?? false"
+			main-class="items-center"
+			title-class="leading-8"
+			truncate-title
+		/>
 		<Admonition v-if="installContext.warning" type="warning" class="mb-1">
 			{{ installContext.warning }}
 		</Admonition>
diff --git a/packages/ui/src/layouts/shared/browse-tab/layout.vue b/packages/ui/src/layouts/shared/browse-tab/layout.vue
index 639edaadd4..850ee0d033 100644
--- a/packages/ui/src/layouts/shared/browse-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/browse-tab/layout.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import { SearchIcon } from '@modrinth/assets'
-import { computed, ref, toValue } from 'vue'
+import { computed, toValue } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import Combobox, { type ComboboxOption } from '#ui/components/base/Combobox.vue'
@@ -13,22 +13,14 @@ import ProjectCard from '#ui/components/project/card/ProjectCard.vue'
 import ProjectCardList from '#ui/components/project/ProjectCardList.vue'
 import SearchFilterControl from '#ui/components/search/SearchFilterControl.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
-import { useStickyObserver } from '#ui/composables/sticky-observer'
 import { commonMessages } from '#ui/utils/common-messages'
 import type { SortType } from '#ui/utils/search'
 
-import SelectedProjectsFloatingBar from './components/SelectedProjectsFloatingBar.vue'
-import BrowseInstallHeader from './header.vue'
 import { injectBrowseManager } from './providers/browse-manager'
 
 const ctx = injectBrowseManager()
 const { formatMessage } = useVIntl()
 const lockedMessages = computed(() => toValue(ctx.lockedFilterMessages))
-const stickyInstallHeaderRef = ref<HTMLElement | null>(null)
-const { isStuck: isInstallHeaderStuck } = useStickyObserver(
-	stickyInstallHeaderRef,
-	'BrowseInstallHeader',
-)
 
 const sortOptions = computed<ComboboxOption<SortType>[]>(() =>
 	ctx.effectiveSortTypes.value.map((st) => ({
@@ -70,17 +62,6 @@ const messages = defineMessages({
 </script>
 
 <template>
-	<template v-if="ctx.installContext?.value && ctx.variant !== 'web'">
-		<div
-			ref="stickyInstallHeaderRef"
-			class="sticky top-0 z-20 -mx-6 -mt-6 rounded-tl-[--radius-xl] border-0 border-b border-solid bg-surface-1 p-3 border-surface-5"
-			:class="[isInstallHeaderStuck ? 'border-t' : '']"
-		>
-			<BrowseInstallHeader />
-		</div>
-	</template>
-	<SelectedProjectsFloatingBar v-if="ctx.installContext?.value && ctx.variant !== 'web'" />
-
 	<NavTabs v-if="ctx.showProjectTypeTabs.value" :links="ctx.selectableProjectTypes.value" />
 
 	<StyledInput
diff --git a/packages/ui/src/layouts/shared/browse-tab/types.ts b/packages/ui/src/layouts/shared/browse-tab/types.ts
index d8c0207a88..6ca35609e7 100644
--- a/packages/ui/src/layouts/shared/browse-tab/types.ts
+++ b/packages/ui/src/layouts/shared/browse-tab/types.ts
@@ -21,6 +21,7 @@ export interface BrowseSelectedProject {
 export interface BrowseInstallContext {
 	name: string
 	loader: string
+	loaderVersion?: string | null
 	gameVersion: string
 	serverId?: string | null
 	upstream?: { project_id?: string | null } | null
diff --git a/packages/ui/src/layouts/shared/content-tab/composables/use-inline-backup.ts b/packages/ui/src/layouts/shared/content-tab/composables/use-inline-backup.ts
index 7123f91d38..700b7962d8 100644
--- a/packages/ui/src/layouts/shared/content-tab/composables/use-inline-backup.ts
+++ b/packages/ui/src/layouts/shared/content-tab/composables/use-inline-backup.ts
@@ -1,7 +1,7 @@
 import { computed, onBeforeUnmount, ref, watch } from 'vue'
 import { onBeforeRouteLeave } from 'vue-router'
 
-import { useServerBackupsQueue } from '#ui/composables/server-backups-queue'
+import { useServerBackupsQueue } from '#ui/composables/servers/server-backups-queue.ts'
 import {
 	injectAppBackup,
 	injectModrinthClient,
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/installation.vue b/packages/ui/src/layouts/shared/server-settings/pages/installation.vue
index 0ac0551aaf..9076de8c6b 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/installation.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/installation.vue
@@ -206,18 +206,19 @@ const isInstalling = computed(() => {
 })
 const installationSettingsLayout = ref<InstanceType<typeof InstallationSettingsLayout>>()
 const setupModal = ref<InstanceType<typeof ServerSetupModal>>()
+const contentListQueryKey = computed(() => ['content', 'list', 'v1', serverId, worldId.value])
 
 async function invalidateServerState() {
 	debug('invalidateServerState: starting')
 	await Promise.all([
 		queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] }),
-		queryClient.invalidateQueries({ queryKey: ['content', 'list', 'v1', serverId] }),
+		queryClient.invalidateQueries({ queryKey: contentListQueryKey.value }),
 	])
 	debug('invalidateServerState: complete')
 }
 
 const addonsQuery = useQuery({
-	queryKey: computed(() => ['content', 'list', 'v1', serverId]),
+	queryKey: contentListQueryKey,
 	queryFn: () =>
 		client.archon.content_v1.getAddons(serverId, worldId.value!, { from_modpack: false }),
 	enabled: computed(() => worldId.value !== null),
@@ -627,7 +628,7 @@ provideInstallationSettings({
 		const previousData = addonsQuery.data.value
 		if (previousData) {
 			debug('unlinkModpack: optimistically removing modpack from cache')
-			queryClient.setQueryData(['content', 'list', 'v1', serverId], {
+			queryClient.setQueryData(contentListQueryKey.value, {
 				...previousData,
 				modpack: null,
 			})
@@ -639,7 +640,7 @@ provideInstallationSettings({
 		} catch (err) {
 			debug('unlinkModpack: failed, reverting cache', err)
 			if (previousData) {
-				queryClient.setQueryData(['content', 'list', 'v1', serverId], previousData)
+				queryClient.setQueryData(contentListQueryKey.value, previousData)
 			}
 			addNotification({
 				type: 'error',
@@ -652,7 +653,7 @@ provideInstallationSettings({
 					queryKey: ['servers', 'detail', serverId],
 				}),
 				queryClient.invalidateQueries({
-					queryKey: ['content', 'list', 'v1', serverId],
+					queryKey: contentListQueryKey.value,
 				}),
 			])
 			debug('unlinkModpack: invalidation complete')
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/properties.vue b/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
index 721d97fa22..f24ab849da 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
@@ -284,8 +284,10 @@ const { addNotification } = injectNotificationManager()
 const client = injectModrinthClient()
 const { serverId, worldId, powerState, busyReasons } = injectModrinthServerContext()
 const queryClient = useQueryClient()
-const filesTabLink = computed(
-	() => `/hosting/manage/${encodeURIComponent(serverId)}/files?path=/&editing=server.properties`,
+const filesTabLink = computed(() =>
+	worldId.value
+		? `/hosting/manage/${encodeURIComponent(serverId)}/instances/${encodeURIComponent(worldId.value)}/files?path=/&editing=server.properties`
+		: `/hosting/manage/${encodeURIComponent(serverId)}/instances`,
 )
 const serverSettings = injectServerSettings(null)
 
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/index.vue
similarity index 91%
rename from packages/ui/src/layouts/wrapped/hosting/manage/root.vue
rename to packages/ui/src/layouts/wrapped/hosting/manage/[id]/index.vue
index 1d51ace0c3..bce867747e 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/index.vue
@@ -92,7 +92,17 @@
 			</template>
 		</ErrorInformationCard>
 	</div>
-	<!-- SERVER START -->
+	<div
+		v-else-if="serverData && isInstanceDetailRoute"
+		data-pyro-instance-manager-root
+		class="experimental-styles-within relative mx-auto box-border flex w-full min-w-0 flex-col px-6 transition-all duration-300"
+		:class="[
+			'server-panel-' + revealState,
+			isNuxt ? 'min-h-[100svh] max-w-[1280px] pb-16' : 'min-h-[calc(100svh-100px)] pb-6',
+		]"
+	>
+		<slot :on-reinstall="onReinstall" :on-reinstall-failed="onReinstallFailed" />
+	</div>
 	<div
 		v-else-if="serverData"
 		data-pyro-server-manager-root
@@ -115,61 +125,18 @@
 				:server="serverData"
 				:server-image="serverImage"
 				:server-project="serverProject"
+				:active-world-name="activeWorldName"
 				:uptime-seconds="showUptime ? uptimeSeconds : undefined"
-			>
-				<template #actions>
-					<div class="flex gap-2">
-						<PanelServerActionButton :disabled="!!installError" />
-						<Tooltip
-							theme="dismissable-prompt"
-							:triggers="[]"
-							:shown="showSettingsHint"
-							:auto-hide="false"
-							placement="bottom-end"
-						>
-							<ButtonStyled circular size="large">
-								<button
-									v-tooltip="showSettingsHint ? undefined : formatMessage(messages.serverSettings)"
-									@click="
-										() => {
-											openServerSettingsModal()
-											dismissSettingsHint()
-										}
-									"
-								>
-									<SettingsIcon />
-								</button>
-							</ButtonStyled>
-							<template #popper>
-								<div class="grid grid-cols-[min-content] gap-1">
-									<div class="flex min-w-48 items-center justify-between gap-8">
-										<h3 class="m-0 whitespace-nowrap text-base font-bold text-contrast">
-											{{ formatMessage(settingsHintMessages.title) }}
-										</h3>
-										<ButtonStyled size="small" circular>
-											<button
-												v-tooltip="formatMessage(settingsHintMessages.dismiss)"
-												@click="dismissSettingsHint"
-											>
-												<XIcon aria-hidden="true" />
-											</button>
-										</ButtonStyled>
-									</div>
-									<p class="m-0 text-wrap text-sm font-medium leading-tight text-secondary">
-										{{ formatMessage(settingsHintMessages.description) }}
-									</p>
-								</div>
-							</template>
-						</Tooltip>
-						<PanelServerOverflowMenu
-							:disabled="!!installError"
-							:uptime-seconds="uptimeSeconds"
-							:show-copy-id-action="showCopyIdAction"
-							:show-debug-info="showAdvancedDebugInfo"
-						/>
-					</div>
-				</template>
-			</ServerManageHeader>
+				:worlds="serverFull?.worlds ?? []"
+				:power-disabled="!!installError"
+				:settings-label="formatMessage(messages.serverSettings)"
+				:show-settings-hint="showSettingsHint"
+				:settings-hint-title="formatMessage(settingsHintMessages.title)"
+				:settings-hint-description="formatMessage(settingsHintMessages.description)"
+				:settings-hint-dismiss-label="formatMessage(settingsHintMessages.dismiss)"
+				@open-settings="openServerSettingsModal()"
+				@dismiss-settings-hint="dismissSettingsHint"
+			/>
 
 			<ServerOnboardingPanelPage v-if="isOnboarding" :browse-modpacks="handleBrowseModpacks" />
 
@@ -305,8 +272,8 @@
 		</template>
 	</div>
 	<div
-		v-if="showAdvancedDebugInfo"
-		class="relative mx-auto mt-6 box-border w-full min-w-0 max-w-[1280px] px-6"
+		v-if="showAdvancedDebugInfo && !isInstanceDetailRoute"
+		class="experimental-styles-within relative mx-auto mt-6 box-border w-full min-w-0 max-w-[1280px] px-6"
 	>
 		<h2 class="m-0 text-lg font-extrabold text-contrast">
 			{{ formatMessage(messages.serverDataTitle) }}
@@ -335,28 +302,22 @@ import { Intercom, shutdown } from '@intercom/messenger-js-sdk'
 import type { Archon, Labrinth } from '@modrinth/api-client'
 import { ModrinthApiError, NuxtModrinthClient } from '@modrinth/api-client'
 import {
-	BoxesIcon,
 	CheckIcon,
 	CopyIcon,
-	DatabaseBackupIcon,
 	FileIcon,
-	FolderOpenIcon,
+	GlobeIcon,
 	IssuesIcon,
 	LayoutTemplateIcon,
 	LoaderCircleIcon,
 	LockIcon,
 	RightArrowIcon,
-	SettingsIcon,
 	TransferIcon,
 	TriangleAlertIcon,
-	WorldIcon,
-	XIcon,
 } from '@modrinth/assets'
 import type { Stats } from '@modrinth/utils'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { useStorage, useTimeoutFn } from '@vueuse/core'
 import DOMPurify from 'dompurify'
-import { Tooltip } from 'floating-vue'
 import { computed, nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue'
 import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
 
@@ -367,11 +328,7 @@ import ServerNotice from '#ui/components/base/ServerNotice.vue'
 import ConfirmLeaveModal from '#ui/components/modal/ConfirmLeaveModal.vue'
 import ServerPanelAdmonitions from '#ui/components/servers/admonitions/ServerPanelAdmonitions.vue'
 import MedalServerCountdown from '#ui/components/servers/marketing/MedalServerCountdown.vue'
-import {
-	PanelServerActionButton,
-	PanelServerOverflowMenu,
-	ServerManageHeader,
-} from '#ui/components/servers/server-header'
+import { ServerManageHeader } from '#ui/components/servers/server-header'
 import ServerSettingsModal from '#ui/components/servers/ServerSettingsModal.vue'
 import {
 	useDebugLogger,
@@ -382,8 +339,8 @@ import {
 	useServerProject,
 } from '#ui/composables'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
-import { useServerBackupsQueue } from '#ui/composables/server-backups-queue'
-import { useServerManageCoreRuntime } from '#ui/composables/server-manage-core-runtime'
+import { useServerBackupsQueue } from '#ui/composables/servers/server-backups-queue.ts'
+import { useServerManageCoreRuntime } from '#ui/composables/servers/server-manage-core-runtime.ts'
 import type { LogLine } from '#ui/layouts/shared/console'
 import type { ServerSettingsTabId } from '#ui/layouts/shared/server-settings'
 import {
@@ -398,13 +355,21 @@ import {
 	writePendingServerContentInstalls,
 } from '#ui/utils/server-content-installing'
 
-import ServerOnboardingPanelPage from './[id]/onboarding.vue'
+import ServerOnboardingPanelPage from './onboarding.vue'
 
 interface Tab {
 	label: string
 	href: string
 	icon?: object
 	subpages?: string[]
+	prompt?: {
+		title: string
+		description: string
+		dismissLabel?: string
+		shown?: boolean
+		placement?: string
+		onDismiss?: () => void
+	}
 }
 
 const props = withDefaults(
@@ -412,7 +377,6 @@ const props = withDefaults(
 		serverId: string
 		reloadPage: () => void
 		resolveViewer: () => Promise<{ userId: string | null; userRole: string | null }>
-		showCopyIdAction?: boolean
 		showAdvancedDebugInfo?: boolean
 		showUptime?: boolean
 		additionalTabs?: Tab[]
@@ -436,7 +400,6 @@ const props = withDefaults(
 		}) => void | Promise<void>
 	}>(),
 	{
-		showCopyIdAction: false,
 		showAdvancedDebugInfo: false,
 		showUptime: true,
 		additionalTabs: () => [],
@@ -481,6 +444,21 @@ const settingsHintMessages = defineMessages({
 	},
 })
 
+const instancesHintMessages = defineMessages({
+	title: {
+		id: 'servers.manage.instances-hint.title',
+		defaultMessage: 'New: Server Instances!',
+	},
+	description: {
+		id: 'servers.manage.instances-hint.description',
+		defaultMessage: 'Your server state has been converted into an instance.',
+	},
+	dismiss: {
+		id: 'servers.manage.instances-hint.dismiss',
+		defaultMessage: "Don't show again",
+	},
+})
+
 const messages = defineMessages({
 	serverPreparingTitle: {
 		id: 'servers.manage.status.preparing.title',
@@ -623,21 +601,9 @@ const messages = defineMessages({
 		id: 'servers.manage.nav.overview',
 		defaultMessage: 'Overview',
 	},
-	contentNav: {
-		id: 'servers.manage.nav.content',
-		defaultMessage: 'Content',
-	},
-	worldsNav: {
-		id: 'servers.manage.nav.worlds',
-		defaultMessage: 'Worlds',
-	},
-	filesNav: {
-		id: 'servers.manage.nav.files',
-		defaultMessage: 'Files',
-	},
-	backupsNav: {
-		id: 'servers.manage.nav.backups',
-		defaultMessage: 'Backups',
+	instancesNav: {
+		id: 'servers.manage.nav.instances',
+		defaultMessage: 'Instances',
 	},
 	errorDismissingNotice: {
 		id: 'servers.manage.notice.dismiss-error',
@@ -738,6 +704,14 @@ function dismissSettingsHint() {
 	settingsHintDismissed.value = true
 }
 
+const INSTANCES_HINT_KEY = 'server-panel-instances-hint-dismissed'
+const instancesHintDismissed = useStorage(INSTANCES_HINT_KEY, false)
+const showInstancesHint = ref(!instancesHintDismissed.value)
+function dismissInstancesHint() {
+	showInstancesHint.value = false
+	instancesHintDismissed.value = true
+}
+
 const serverSettingsModal = ref<InstanceType<typeof ServerSettingsModal> | null>(null)
 const confirmLeaveModal = ref<InstanceType<typeof ConfirmLeaveModal>>()
 
@@ -771,12 +745,47 @@ 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(() => {
+	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(() => !!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
+}
+
+function getWorldPath(targetWorldId: string) {
+	return `/hosting/manage/${encodeURIComponent(props.serverId)}/instances/${encodeURIComponent(targetWorldId)}`
+}
+
 const { handleWsBackupProgress, busyReasons: backupsBusy } = useServerBackupsQueue(
 	computed(() => props.serverId),
 	worldId,
@@ -1021,33 +1030,23 @@ watch(serverData, (data) => {
 const navLinks = computed<Tab[]>(() => [
 	{
 		label: formatMessage(messages.overviewNav),
-		href: `/hosting/manage/${props.serverId}`,
+		href: `/hosting/manage/${encodeURIComponent(props.serverId)}`,
 		icon: LayoutTemplateIcon,
 		subpages: [],
 	},
 	{
-		label: formatMessage(messages.contentNav),
-		href: `/hosting/manage/${props.serverId}/content`,
-		icon: BoxesIcon,
-		subpages: ['mods', 'datapacks'],
-	},
-	{
-		label: formatMessage(messages.worldsNav),
-		href: `/hosting/manage/${props.serverId}/worlds`,
-		icon: WorldIcon,
-		subpages: [],
-	},
-	{
-		label: formatMessage(messages.filesNav),
-		href: `/hosting/manage/${props.serverId}/files`,
-		icon: FolderOpenIcon,
-		subpages: [],
-	},
-	{
-		label: formatMessage(messages.backupsNav),
-		href: `/hosting/manage/${props.serverId}/backups`,
-		icon: DatabaseBackupIcon,
+		label: formatMessage(messages.instancesNav),
+		href: `/hosting/manage/${encodeURIComponent(props.serverId)}/instances`,
+		icon: GlobeIcon,
 		subpages: [],
+		prompt: {
+			title: formatMessage(instancesHintMessages.title),
+			description: formatMessage(instancesHintMessages.description),
+			dismissLabel: formatMessage(instancesHintMessages.dismiss),
+			shown: showInstancesHint.value,
+			placement: 'bottom',
+			onDismiss: dismissInstancesHint,
+		},
 	},
 	...props.additionalTabs,
 ])
@@ -1195,7 +1194,7 @@ const handleFilesystemOps = (data: Archon.Websocket.v0.WSFilesystemOpsEvent) =>
 }
 
 const handleNewMod = () => {
-	queryClient.invalidateQueries({ queryKey: ['content', 'list'] })
+	queryClient.invalidateQueries({ queryKey: ['content', 'list', 'v1', props.serverId] })
 }
 
 const handleInstallationResult = async (data: Archon.Websocket.v0.WSInstallationResultEvent) => {
@@ -1281,7 +1280,7 @@ const onReinstall = async (
 
 	debug('[root.vue] onReinstall: triggering immediate invalidation')
 	queryClient.invalidateQueries({ queryKey: ['servers', 'detail', props.serverId] })
-	queryClient.invalidateQueries({ queryKey: ['content', 'list'] })
+	queryClient.invalidateQueries({ queryKey: ['content', 'list', 'v1', props.serverId] })
 }
 
 const onReinstallFailed = () => {
@@ -1330,7 +1329,7 @@ async function invalidateAfterInstall() {
 				queryClient.invalidateQueries({
 					queryKey: ['servers', 'startup', 'v1', props.serverId],
 				}),
-				queryClient.invalidateQueries({ queryKey: ['content', 'list'] }),
+				queryClient.invalidateQueries({ queryKey: ['content', 'list', 'v1', props.serverId] }),
 			])
 		} catch (err: unknown) {
 			console.error('Error refreshing data after installation:', err)
@@ -1454,7 +1453,10 @@ const copyServerDebugInfo = () => {
 }
 
 const openInstallLog = () => {
-	const url = `/hosting/manage/${props.serverId}/files?editing=${encodeURIComponent(errorLogFile.value)}`
+	const filesPath = worldId.value
+		? `${getWorldPath(worldId.value)}/files`
+		: `/hosting/manage/${encodeURIComponent(props.serverId)}/instances`
+	const url = `${filesPath}?editing=${encodeURIComponent(errorLogFile.value)}`
 	window.history.pushState({}, '', url)
 	window.dispatchEvent(new PopStateEvent('popstate'))
 }
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/instances/[instance-id]/backups.vue
similarity index 97%
rename from packages/ui/src/layouts/wrapped/hosting/manage/backups.vue
rename to packages/ui/src/layouts/wrapped/hosting/manage/[id]/instances/[instance-id]/backups.vue
index a453547956..b56f603eca 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/instances/[instance-id]/backups.vue
@@ -245,7 +245,6 @@ import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import dayjs from 'dayjs'
 import type { Component } from 'vue'
 import { computed, ref } from 'vue'
-import { useRoute } from 'vue-router'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import Checkbox from '#ui/components/base/Checkbox.vue'
@@ -259,7 +258,8 @@ import BackupItem from '#ui/components/servers/backups/BackupItem.vue'
 import BackupRenameModal from '#ui/components/servers/backups/BackupRenameModal.vue'
 import BackupRestoreModal from '#ui/components/servers/backups/BackupRestoreModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
-import { useServerBackupsQueue } from '#ui/composables/server-backups-queue'
+import { useBackupsSelection } from '#ui/composables/servers/backups-selection'
+import { useServerBackupsQueue } from '#ui/composables/servers/server-backups-queue.ts'
 import { useBulkOperation } from '#ui/layouts/shared/content-tab/composables/bulk-operations'
 import {
 	injectModrinthClient,
@@ -268,8 +268,6 @@ import {
 } from '#ui/providers'
 import { commonMessages } from '#ui/utils/common-messages'
 
-import { useBackupsSelection } from './backups-selection'
-
 const messages = defineMessages({
 	selectAll: {
 		id: 'servers.backups.toolbar.select-all',
@@ -335,7 +333,7 @@ const filterPillOptions = computed<FilterPillOption[]>(() => [
 ])
 const client = injectModrinthClient()
 const queryClient = useQueryClient()
-const { server, worldId, busyReasons } = injectModrinthServerContext()
+const { server, serverId, worldId, busyReasons } = injectModrinthServerContext()
 
 const props = defineProps<{
 	isServerRunning: boolean
@@ -343,9 +341,6 @@ const props = defineProps<{
 	showDebugInfo?: boolean
 }>()
 
-const route = useRoute()
-const serverId = route.params.id as string
-
 defineEmits(['onDownload'])
 
 const { backups, invalidate, hasActiveCreate, hasActiveRestore, query } = useServerBackupsQueue(
@@ -359,7 +354,7 @@ const error = computed(() => {
 })
 const refetch = () => query.refetch()
 
-/** Until world exists we cannot fetch; `isLoading` is false while the query is disabled, which would flash empty state. */
+/** Until the instance exists we cannot fetch; `isLoading` is false while the query is disabled, which would flash empty state. */
 const backupsReadyPending = computed(
 	() => !worldId.value || (query.data.value === undefined && !query.error.value),
 )
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/content.vue b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/instances/[instance-id]/content.vue
similarity index 97%
rename from packages/ui/src/layouts/wrapped/hosting/manage/content.vue
rename to packages/ui/src/layouts/wrapped/hosting/manage/[id]/instances/[instance-id]/content.vue
index ab51b3f0e7..14b3de5d1c 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/content.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/instances/[instance-id]/content.vue
@@ -3,10 +3,27 @@ import type { Archon, Labrinth } from '@modrinth/api-client'
 import { ClipboardCopyIcon } from '@modrinth/assets'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 
 import ReadyTransition from '#ui/components/base/ReadyTransition.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import {
+	flushStoredServerAddonInstallQueue,
+	getStoredServerAddonInstallQueue,
+} from '#ui/layouts/shared/browse-tab/composables/install-logic'
+import ConfirmModpackUpdateModal from '#ui/layouts/shared/content-tab/components/modals/ConfirmModpackUpdateModal.vue'
+import ConfirmUnlinkModal from '#ui/layouts/shared/content-tab/components/modals/ConfirmUnlinkModal.vue'
+import ContentUpdaterModal from '#ui/layouts/shared/content-tab/components/modals/ContentUpdaterModal.vue'
+import ModpackContentModal from '#ui/layouts/shared/content-tab/components/modals/ModpackContentModal.vue'
+import ContentPageLayout from '#ui/layouts/shared/content-tab/layout.vue'
+import type { ContentModpackData } from '#ui/layouts/shared/content-tab/providers/content-manager'
+import { provideContentManager } from '#ui/layouts/shared/content-tab/providers/content-manager'
+import type {
+	ContentItem,
+	ContentModpackCardCategory,
+	ContentModpackCardProject,
+	ContentModpackCardVersion,
+} from '#ui/layouts/shared/content-tab/types'
 import {
 	injectModrinthClient,
 	injectModrinthServerContext,
@@ -22,24 +39,6 @@ import {
 	removePendingServerContentInstall,
 } from '#ui/utils/server-content-installing'
 
-import {
-	flushStoredServerAddonInstallQueue,
-	getStoredServerAddonInstallQueue,
-} from '../../../shared/browse-tab/composables/install-logic'
-import ConfirmModpackUpdateModal from '../../../shared/content-tab/components/modals/ConfirmModpackUpdateModal.vue'
-import ConfirmUnlinkModal from '../../../shared/content-tab/components/modals/ConfirmUnlinkModal.vue'
-import ContentUpdaterModal from '../../../shared/content-tab/components/modals/ContentUpdaterModal.vue'
-import ModpackContentModal from '../../../shared/content-tab/components/modals/ModpackContentModal.vue'
-import ContentPageLayout from '../../../shared/content-tab/layout.vue'
-import type { ContentModpackData } from '../../../shared/content-tab/providers/content-manager'
-import { provideContentManager } from '../../../shared/content-tab/providers/content-manager'
-import type {
-	ContentItem,
-	ContentModpackCardCategory,
-	ContentModpackCardProject,
-	ContentModpackCardVersion,
-} from '../../../shared/content-tab/types'
-
 type AddonWithUiState = Archon.Content.v1.Addon & { installing?: boolean }
 type ContentOwnerAvatarSource = {
 	id: string
@@ -109,14 +108,12 @@ const messages = defineMessages({
 })
 
 const client = injectModrinthClient()
-const { server, worldId, busyReasons, isSyncingContent, uploadState, cancelUpload } =
+const { server, serverId, worldId, busyReasons, isSyncingContent, uploadState, cancelUpload } =
 	injectModrinthServerContext()
 const { addNotification } = injectNotificationManager()
 const { openServerSettings, browseServerContent } = injectServerSettingsModal()
-const route = useRoute()
 const router = useRouter()
 const queryClient = useQueryClient()
-const serverId = route.params.id as string
 
 const type = computed(() => {
 	const loader = server.value?.loader?.toLowerCase()
@@ -125,7 +122,7 @@ const type = computed(() => {
 	return 'mod'
 })
 
-const queryKey = computed(() => ['content', 'list', 'v1', serverId])
+const queryKey = computed(() => ['content', 'list', 'v1', serverId, worldId.value])
 
 function getContentOwnerAvatarUrl(owner: ContentOwnerAvatarSource) {
 	const ownerId = owner.type === 'user' ? owner.name || owner.id : owner.id
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/files.vue b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/instances/[instance-id]/files.vue
similarity index 98%
rename from packages/ui/src/layouts/wrapped/hosting/manage/files.vue
rename to packages/ui/src/layouts/wrapped/hosting/manage/[id]/instances/[instance-id]/files.vue
index 3ade290d9a..987d6d1d17 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/instances/[instance-id]/files.vue
@@ -7,6 +7,8 @@ import { useRoute, useRouter } from 'vue-router'
 import ReadyTransition from '#ui/components/base/ReadyTransition.vue'
 import { useReadyState } from '#ui/composables'
 import { useVIntl } from '#ui/composables/i18n'
+import type { EditingFile, FileItem } from '#ui/layouts/shared/files-tab/index.ts'
+import { FilePageLayout, provideFileManager } from '#ui/layouts/shared/files-tab/index.ts'
 import {
 	injectModrinthClient,
 	injectModrinthServerContext,
@@ -14,10 +16,6 @@ import {
 } from '#ui/providers'
 import { commonMessages } from '#ui/utils/common-messages'
 
-import FilePageLayout from '../../../shared/files-tab/layout.vue'
-import { provideFileManager } from '../../../shared/files-tab/providers/file-manager'
-import type { EditingFile, FileItem } from '../../../shared/files-tab/types'
-
 const props = defineProps<{
 	showDebugInfo?: boolean
 	showRefreshButton?: boolean
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/instances/[instance-id]/index.vue b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/instances/[instance-id]/index.vue
new file mode 100644
index 0000000000..c4fdc437fb
--- /dev/null
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/instances/[instance-id]/index.vue
@@ -0,0 +1,283 @@
+<template>
+	<div class="flex min-h-[36rem] flex-col gap-4 text-primary">
+		<WorldManageHeader
+			:name="worldName"
+			:game-version="gameVersion"
+			:loader="loader"
+			:loader-version="loaderVersion"
+			:last-active="lastActiveLabel"
+			:back-href="instancesPath"
+			:back-label="formatMessage(messages.allInstances)"
+			:fallback-name="formatMessage(messages.worldFallbackName)"
+			:actions="headerActions"
+		/>
+
+		<NavTabs :links="worldTabLinks" replace />
+
+		<slot />
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { Archon } from '@modrinth/api-client'
+import {
+	BoxesIcon,
+	DatabaseBackupIcon,
+	FolderOpenIcon,
+	LoaderCircleIcon,
+	PlayIcon,
+	SettingsIcon,
+	SlashIcon,
+	StopCircleIcon,
+	UpdatedIcon,
+} from '@modrinth/assets'
+import { useQuery } from '@tanstack/vue-query'
+import { computed, watch } from 'vue'
+import { useRouter } from 'vue-router'
+
+import NavTabs from '#ui/components/base/NavTabs.vue'
+import { WorldManageHeader } from '#ui/components/servers/server-header'
+import { useServerPowerAction } from '#ui/components/servers/server-header/use-server-power-action'
+import { useRelativeTime } from '#ui/composables'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import {
+	injectModrinthClient,
+	injectModrinthServerContext,
+	injectServerSettingsModal,
+} from '#ui/providers'
+
+interface Tab {
+	label: string
+	href: string
+	icon?: object
+	subpages?: string[]
+}
+
+const messages = defineMessages({
+	allInstances: {
+		id: 'servers.manage.instance.all-instances',
+		defaultMessage: 'All instances',
+	},
+	contentNav: {
+		id: 'servers.manage.nav.content',
+		defaultMessage: 'Content',
+	},
+	filesNav: {
+		id: 'servers.manage.nav.files',
+		defaultMessage: 'Files',
+	},
+	backupsNav: {
+		id: 'servers.manage.nav.backups',
+		defaultMessage: 'Backups',
+	},
+	worldFallbackName: {
+		id: 'servers.manage.instance.fallback-name',
+		defaultMessage: 'Instance',
+	},
+	lastActive: {
+		id: 'servers.manage.instance.last-active',
+		defaultMessage: 'Last active {time}',
+	},
+	instanceSettings: {
+		id: 'servers.manage.instance.settings',
+		defaultMessage: 'Instance settings',
+	},
+})
+
+const client = injectModrinthClient()
+const { serverId, server, worldId, isServerRunning } = injectModrinthServerContext()
+const { openServerSettings } = injectServerSettingsModal()
+const { formatMessage } = useVIntl()
+const formatRelativeTime = useRelativeTime()
+const router = useRouter()
+const {
+	isInstalling,
+	isStopping,
+	showRestartButton,
+	busyTooltip,
+	canTakeAction,
+	canKill,
+	primaryActionText,
+	initiateAction,
+	handlePrimaryAction,
+} = useServerPowerAction()
+
+const { data: serverFull } = useQuery({
+	queryKey: computed(() => ['servers', 'v1', 'detail', serverId]),
+	queryFn: () => client.archon.servers_v1.get(serverId),
+	staleTime: 30_000,
+})
+
+const instancesPath = computed(() => `/hosting/manage/${encodeURIComponent(serverId)}/instances`)
+const worldPath = computed(() =>
+	worldId.value
+		? `${instancesPath.value}/${encodeURIComponent(worldId.value)}`
+		: instancesPath.value,
+)
+
+const currentWorld = computed(() => {
+	const id = worldId.value
+	if (!id) return null
+	return serverFull.value?.worlds.find((world) => world.id === id) ?? null
+})
+
+const worldName = computed(
+	() => currentWorld.value?.name ?? formatMessage(messages.worldFallbackName),
+)
+
+const gameVersion = computed(() => {
+	const version = currentWorld.value?.content?.game_version ?? server.value?.mc_version
+	return version ?? null
+})
+
+const loader = computed(
+	() => currentWorld.value?.content?.modloader ?? server.value?.loader ?? null,
+)
+
+const loaderVersion = computed(
+	() => currentWorld.value?.content?.modloader_version ?? server.value?.loader_version ?? null,
+)
+
+const lastActiveLabel = computed(() => {
+	const latestBackup = currentWorld.value ? latestDate(currentWorld.value.backups) : null
+	const lastActiveAt =
+		latestBackup ??
+		(currentWorld.value?.is_active && isServerRunning.value
+			? new Date().toISOString()
+			: currentWorld.value?.created_at)
+
+	return lastActiveAt
+		? formatMessage(messages.lastActive, { time: formatRelativeTime(lastActiveAt) })
+		: null
+})
+const startActionText = computed(() =>
+	primaryActionText.value === 'Start' ? 'Start instance' : primaryActionText.value,
+)
+const stopSplitActions = computed(() => [
+	{
+		id: 'stop',
+		label: isStopping.value ? 'Stopping' : 'Stop',
+		icon: StopCircleIcon,
+		action: () => initiateAction('Stop'),
+	},
+	{
+		id: 'kill_server',
+		label: 'Kill server',
+		icon: SlashIcon,
+		action: () => initiateAction('Kill'),
+	},
+])
+const powerActions = computed(() => {
+	if (isInstalling.value) {
+		return [
+			{
+				id: 'installing',
+				label: 'Installing...',
+				icon: LoaderCircleIcon,
+				iconClass: 'animate-spin',
+				color: 'brand' as const,
+				disabled: true,
+			},
+		]
+	}
+	if (showRestartButton.value) {
+		return [
+			{
+				id: 'restart',
+				label: primaryActionText.value,
+				icon: UpdatedIcon,
+				color: 'orange' as const,
+				tooltip: busyTooltip.value,
+				disabled: !canTakeAction.value,
+				onClick: handlePrimaryAction,
+			},
+			{
+				id: 'stop',
+				label: 'Stop instance',
+				color: 'red' as const,
+				joinedActions: stopSplitActions.value,
+				primaryDisabled: !canTakeAction.value,
+				dropdownDisabled: !canKill.value,
+			},
+		]
+	}
+	if (isStopping.value) {
+		return [
+			{
+				id: 'stop',
+				label: 'Stop instance',
+				color: 'red' as const,
+				joinedActions: stopSplitActions.value,
+				primaryDisabled: true,
+				dropdownDisabled: !canKill.value,
+				primaryMuted: true,
+			},
+		]
+	}
+	return [
+		{
+			id: 'start',
+			label: startActionText.value,
+			icon: PlayIcon,
+			color: 'brand' as const,
+			tooltip: busyTooltip.value,
+			disabled: !canTakeAction.value,
+			onClick: handlePrimaryAction,
+		},
+	]
+})
+const headerActions = computed(() => [
+	...powerActions.value,
+	{
+		id: 'settings',
+		label: formatMessage(messages.instanceSettings),
+		icon: SettingsIcon,
+		labelHidden: true,
+		tooltip: formatMessage(messages.instanceSettings),
+		onClick: () => openServerSettings({ tabId: 'installation' }),
+	},
+])
+
+const worldTabLinks = computed<Tab[]>(() => [
+	{
+		label: formatMessage(messages.contentNav),
+		href: worldPath.value,
+		icon: BoxesIcon,
+		subpages: [],
+	},
+	{
+		label: formatMessage(messages.filesNav),
+		href: `${worldPath.value}/files`,
+		icon: FolderOpenIcon,
+		subpages: [],
+	},
+	{
+		label: formatMessage(messages.backupsNav),
+		href: `${worldPath.value}/backups`,
+		icon: DatabaseBackupIcon,
+		subpages: [],
+	},
+])
+
+watch(
+	() => [serverFull.value, currentWorld.value, worldId.value] as const,
+	([full, world, id]) => {
+		if (full && id && !world) {
+			router.replace(instancesPath.value)
+		}
+	},
+	{ immediate: true },
+)
+
+function latestDate(backups: Archon.Servers.v1.WorldFull['backups']): string | null {
+	let latest = 0
+	let latestIso: string | null = null
+	for (const backup of backups) {
+		const timestamp = new Date(backup.created_at).getTime()
+		if (!Number.isFinite(timestamp) || timestamp <= latest) continue
+		latest = timestamp
+		latestIso = backup.created_at
+	}
+	return latestIso
+}
+</script>
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/worlds.vue b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/instances/index.vue
similarity index 77%
rename from packages/ui/src/layouts/wrapped/hosting/manage/worlds.vue
rename to packages/ui/src/layouts/wrapped/hosting/manage/[id]/instances/index.vue
index 2e6b9a70d2..1aac22cc50 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/worlds.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/instances/index.vue
@@ -1,23 +1,37 @@
 <template>
 	<div class="flex flex-col gap-4">
+		<Admonition
+			v-if="!instanceInfoAdmonitionDismissed"
+			type="info"
+			:header="formatMessage(messages.instanceInfoHeader)"
+			dismissible
+			@dismiss="dismissInstanceInfoAdmonition"
+		>
+			<ul class="m-0 pl-4">
+				<li>{{ formatMessage(messages.instanceInfoDefinition) }}</li>
+				<li>{{ formatMessage(messages.instanceInfoSwitching) }}</li>
+				<li>{{ formatMessage(messages.instanceInfoFiles) }}</li>
+			</ul>
+		</Admonition>
+
 		<div
 			v-if="worldsPending"
 			class="grid grid-cols-[repeat(auto-fit,minmax(min(100%,20.25rem),1fr))] gap-6"
 		>
 			<div
 				v-for="slot in WORLD_SLOT_COUNT"
-				:key="`world-card-skeleton-${slot}`"
+				:key="`instance-card-skeleton-${slot}`"
 				class="min-h-[19.75rem] animate-pulse rounded-2xl border border-solid border-surface-5 bg-bg-raised shadow-xl"
 			/>
 		</div>
 		<div v-else class="grid grid-cols-[repeat(auto-fit,minmax(min(100%,20.25rem),1fr))] gap-6">
-			<WorldCard
+			<InstanceCard
 				v-for="world in worldSlots"
 				:key="world.id"
 				:world="world"
 				@create="handleCreateWorld"
 				@edit="handleEditWorld"
-				@settings="handleEditWorld"
+				@settings="handleWorldSettings"
 			/>
 		</div>
 	</div>
@@ -26,8 +40,12 @@
 <script setup lang="ts">
 import type { Archon } from '@modrinth/api-client'
 import { useQuery } from '@tanstack/vue-query'
+import { useStorage } from '@vueuse/core'
 import { computed } from 'vue'
+import { useRouter } from 'vue-router'
 
+import Admonition from '#ui/components/base/Admonition.vue'
+import InstanceCard from '#ui/components/servers/instances/InstanceCard.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import {
 	injectModrinthClient,
@@ -36,12 +54,27 @@ import {
 } from '#ui/providers'
 import { formatLoaderLabel } from '#ui/utils/loaders'
 
-import WorldCard from './components/WorldCard.vue'
-
 const messages = defineMessages({
-	worldSlotName: {
-		id: 'servers.manage.worlds.slot-name',
-		defaultMessage: 'World #{index}',
+	instanceSlotName: {
+		id: 'servers.manage.instances.slot-name',
+		defaultMessage: 'Instance #{index}',
+	},
+	instanceInfoHeader: {
+		id: 'servers.manage.instances.info.header',
+		defaultMessage: 'What is an instance?',
+	},
+	instanceInfoDefinition: {
+		id: 'servers.manage.instances.info.definition',
+		defaultMessage: 'An instance is a separate server setup.',
+	},
+	instanceInfoSwitching: {
+		id: 'servers.manage.instances.info.switching',
+		defaultMessage: 'You can switch which instance your server runs.',
+	},
+	instanceInfoFiles: {
+		id: 'servers.manage.instances.info.files',
+		defaultMessage:
+			'Each instance has its own server files, worlds, installed content, and settings.',
 	},
 })
 
@@ -79,11 +112,14 @@ type ContentSummary = {
 }
 
 const WORLD_SLOT_COUNT = 3
+const INSTANCE_INFO_ADMONITION_KEY = 'server-instances-info-admonition-dismissed'
 
 const client = injectModrinthClient()
 const { serverId, server, isServerRunning } = injectModrinthServerContext()
 const { openServerSettings } = injectServerSettingsModal()
 const { formatMessage } = useVIntl()
+const router = useRouter()
+const instanceInfoAdmonitionDismissed = useStorage(INSTANCE_INFO_ADMONITION_KEY, false)
 
 const worldsQuery = useQuery({
 	queryKey: computed(() => ['servers', 'worlds', 'summary', 'v1', serverId]),
@@ -153,7 +189,7 @@ function padWorldSlots(slots: WorldSlot[]): WorldSlot[] {
 		padded.push({
 			type: 'empty',
 			id: `empty-world-slot-${i + 1}`,
-			name: formatMessage(messages.worldSlotName, { index: i + 1 }),
+			name: formatMessage(messages.instanceSlotName, { index: i + 1 }),
 		})
 	}
 	return padded
@@ -267,16 +303,26 @@ function createDummyWorldSlots(): WorldSlot[] {
 		{
 			type: 'empty',
 			id: 'empty-world-slot-3',
-			name: formatMessage(messages.worldSlotName, { index: 3 }),
+			name: formatMessage(messages.instanceSlotName, { index: 3 }),
 		},
 	]
 }
 
-function handleEditWorld() {
+function handleEditWorld(worldId: string) {
+	router.push(
+		`/hosting/manage/${encodeURIComponent(serverId)}/instances/${encodeURIComponent(worldId)}`,
+	)
+}
+
+function handleWorldSettings() {
 	openServerSettings({ tabId: 'installation' })
 }
 
 function handleCreateWorld() {
 	openServerSettings({ tabId: 'installation' })
 }
+
+function dismissInstanceInfoAdmonition() {
+	instanceInfoAdmonitionDismissed.value = true
+}
 </script>
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/onboarding.vue b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/onboarding.vue
index c1ad2947f1..475bf8bae9 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/onboarding.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/onboarding.vue
@@ -137,14 +137,14 @@ const messages = defineMessages({
 		defaultMessage:
 			'Pick your favorite modpack from Modrinth, or choose a loader and add the mods you want.',
 	},
-	configureWorldTitle: {
-		id: 'servers.setup.onboarding.step.configure-world.title',
-		defaultMessage: 'Configure your world',
+	configureInstanceTitle: {
+		id: 'servers.setup.onboarding.step.configure-instance.title',
+		defaultMessage: 'Configure your instance',
 	},
-	configureWorldDescription: {
-		id: 'servers.setup.onboarding.step.configure-world.description',
+	configureInstanceDescription: {
+		id: 'servers.setup.onboarding.step.configure-instance.description',
 		defaultMessage:
-			'Set up your world just like singleplayer. Choose your gamemode and world seed.',
+			'Set up your instance just like singleplayer. Choose your gamemode and world seed.',
 	},
 	inviteFriendsTitle: {
 		id: 'servers.setup.onboarding.step.invite-friends.title',
@@ -253,7 +253,11 @@ async function finalizeSetup() {
 	client.archon.servers_v1.endIntro(serverId).then(() => {
 		queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] })
 	})
-	await router.push(`/hosting/manage/${serverId}/`)
+	await router.push(
+		worldId.value
+			? `/hosting/manage/${encodeURIComponent(serverId)}/instances/${encodeURIComponent(worldId.value)}`
+			: `/hosting/manage/${encodeURIComponent(serverId)}/instances`,
+	)
 }
 
 /** Map UI loader names to API Modloader values */
@@ -347,8 +351,8 @@ const steps = computed(() => [
 	},
 	{
 		icon: GlobeIcon,
-		title: formatMessage(messages.configureWorldTitle),
-		description: formatMessage(messages.configureWorldDescription),
+		title: formatMessage(messages.configureInstanceTitle),
+		description: formatMessage(messages.configureInstanceDescription),
 	},
 	{
 		icon: UsersIcon,
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/overview.vue b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/overview.vue
similarity index 98%
rename from packages/ui/src/layouts/wrapped/hosting/manage/overview.vue
rename to packages/ui/src/layouts/wrapped/hosting/manage/[id]/overview.vue
index 0985b699d3..0d1b955359 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/overview.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/overview.vue
@@ -40,12 +40,11 @@ import type { Mclogs } from '@modrinth/api-client'
 import { useStorage } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 
+import ServerManageStats from '#ui/components/servers/ServerManageStats.vue'
 import { useModrinthServersConsole } from '#ui/composables'
 import { ConsolePageLayout, provideConsoleManager } from '#ui/layouts/shared/console'
 import { injectModrinthClient, injectModrinthServerContext } from '#ui/providers'
 
-import ServerManageStats from './components/ServerManageStats.vue'
-
 const props = withDefaults(
 	defineProps<{
 		showAdvancedDebugInfo?: boolean
diff --git a/packages/ui/src/layouts/wrapped/index.ts b/packages/ui/src/layouts/wrapped/index.ts
index 4916f26783..b6e7993a30 100644
--- a/packages/ui/src/layouts/wrapped/index.ts
+++ b/packages/ui/src/layouts/wrapped/index.ts
@@ -1,8 +1,9 @@
+export { default as ServersManageRootLayout } from './hosting/manage/[id]/index.vue'
+export { default as ServersManageBackupsPage } from './hosting/manage/[id]/instances/[instance-id]/backups.vue'
+export { default as ServersManageContentPage } from './hosting/manage/[id]/instances/[instance-id]/content.vue'
+export { default as ServersManageFilesPage } from './hosting/manage/[id]/instances/[instance-id]/files.vue'
+export { default as ServersManageInstanceRootLayout } from './hosting/manage/[id]/instances/[instance-id]/index.vue'
+export { default as ServersManageInstancesPage } from './hosting/manage/[id]/instances/index.vue'
 export { default as ServerOnboardingPanelPage } from './hosting/manage/[id]/onboarding.vue'
-export { default as ServersManageBackupsPage } from './hosting/manage/backups.vue'
-export { default as ServersManageContentPage } from './hosting/manage/content.vue'
-export { default as ServersManageFilesPage } from './hosting/manage/files.vue'
+export { default as ServersManageOverviewPage } from './hosting/manage/[id]/overview.vue'
 export { default as ServersManagePageIndex } from './hosting/manage/index.vue'
-export { default as ServersManageOverviewPage } from './hosting/manage/overview.vue'
-export { default as ServersManageRootLayout } from './hosting/manage/root.vue'
-export { default as ServersManageWorldsPage } from './hosting/manage/worlds.vue'
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index e976d3cfbd..48914a01ef 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -3629,6 +3629,72 @@
   "servers.manage.install.retry-error": {
     "defaultMessage": "Failed to retry installation"
   },
+  "servers.manage.instance.all-instances": {
+    "defaultMessage": "All instances"
+  },
+  "servers.manage.instance.fallback-name": {
+    "defaultMessage": "Instance"
+  },
+  "servers.manage.instance.last-active": {
+    "defaultMessage": "Last active {time}"
+  },
+  "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"
+  },
+  "servers.manage.instances.card.create": {
+    "defaultMessage": "Create instance"
+  },
+  "servers.manage.instances.card.created": {
+    "defaultMessage": "Created"
+  },
+  "servers.manage.instances.card.edit": {
+    "defaultMessage": "Edit instance"
+  },
+  "servers.manage.instances.card.empty-description": {
+    "defaultMessage": "New instance"
+  },
+  "servers.manage.instances.card.installed-content": {
+    "defaultMessage": "Installed content"
+  },
+  "servers.manage.instances.card.last-active": {
+    "defaultMessage": "Last active"
+  },
+  "servers.manage.instances.card.none": {
+    "defaultMessage": "None"
+  },
+  "servers.manage.instances.card.not-tracked-yet": {
+    "defaultMessage": "Not tracked yet"
+  },
+  "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}"
+  },
   "servers.manage.nav.backups": {
     "defaultMessage": "Backups"
   },
@@ -3638,12 +3704,12 @@
   "servers.manage.nav.files": {
     "defaultMessage": "Files"
   },
+  "servers.manage.nav.instances": {
+    "defaultMessage": "Instances"
+  },
   "servers.manage.nav.overview": {
     "defaultMessage": "Overview"
   },
-  "servers.manage.nav.worlds": {
-    "defaultMessage": "Worlds"
-  },
   "servers.manage.new-server-button": {
     "defaultMessage": "New server"
   },
@@ -3728,39 +3794,6 @@
   "servers.manage.websocket.reconnecting": {
     "defaultMessage": "Hang on, we're reconnecting to your server."
   },
-  "servers.manage.worlds.card.active": {
-    "defaultMessage": "Active"
-  },
-  "servers.manage.worlds.card.create": {
-    "defaultMessage": "Create world"
-  },
-  "servers.manage.worlds.card.created": {
-    "defaultMessage": "Created"
-  },
-  "servers.manage.worlds.card.edit": {
-    "defaultMessage": "Edit world"
-  },
-  "servers.manage.worlds.card.empty-description": {
-    "defaultMessage": "New world instance"
-  },
-  "servers.manage.worlds.card.installed-content": {
-    "defaultMessage": "Installed content"
-  },
-  "servers.manage.worlds.card.last-active": {
-    "defaultMessage": "Last active"
-  },
-  "servers.manage.worlds.card.none": {
-    "defaultMessage": "None"
-  },
-  "servers.manage.worlds.card.not-tracked-yet": {
-    "defaultMessage": "Not tracked yet"
-  },
-  "servers.manage.worlds.card.settings": {
-    "defaultMessage": "World settings"
-  },
-  "servers.manage.worlds.slot-name": {
-    "defaultMessage": "World #{index}"
-  },
   "servers.medal-listing.countdown.remaining": {
     "defaultMessage": "<days-count>{days}</days-count> {days, plural, one {day} other {days}} <hours-count>{hours}</hours-count> {hours, plural, one {hour} other {hours}} <minutes-count>{minutes}</minutes-count> {minutes, plural, one {minute} other {minutes}} <seconds-count>{seconds}</seconds-count> {seconds, plural, one {second} other {seconds}} remaining..."
   },
@@ -3923,11 +3956,11 @@
   "servers.setup.onboarding.step.choose.title": {
     "defaultMessage": "Choose what to play"
   },
-  "servers.setup.onboarding.step.configure-world.description": {
-    "defaultMessage": "Set up your world just like singleplayer. Choose your gamemode and world seed."
+  "servers.setup.onboarding.step.configure-instance.description": {
+    "defaultMessage": "Set up your instance just like singleplayer. Choose your gamemode and world seed."
   },
-  "servers.setup.onboarding.step.configure-world.title": {
-    "defaultMessage": "Configure your world"
+  "servers.setup.onboarding.step.configure-instance.title": {
+    "defaultMessage": "Configure your instance"
   },
   "servers.setup.onboarding.step.invite-friends.description": {
     "defaultMessage": "Share your server with friends by copying the address and letting them know which mods they'll need to join."
diff --git a/packages/ui/src/stories/base/ContentPageHeader.stories.ts b/packages/ui/src/stories/base/ContentPageHeader.stories.ts
deleted file mode 100644
index 0eb2f5c523..0000000000
--- a/packages/ui/src/stories/base/ContentPageHeader.stories.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-
-import Avatar from '../../components/base/Avatar.vue'
-import ButtonStyled from '../../components/base/ButtonStyled.vue'
-import ContentPageHeader from '../../components/base/ContentPageHeader.vue'
-
-const meta = {
-	title: 'Base/ContentPageHeader',
-	component: ContentPageHeader,
-} satisfies Meta<typeof ContentPageHeader>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-	render: () => ({
-		components: { ContentPageHeader, Avatar, ButtonStyled },
-		template: `
-			<ContentPageHeader>
-				<template #icon>
-					<Avatar size="64px" />
-				</template>
-				<template #title>Project Name</template>
-				<template #summary>A brief description of the project goes here.</template>
-				<template #stats>
-					<span>1.2M downloads</span>
-					<span>50K followers</span>
-				</template>
-				<template #actions>
-					<ButtonStyled color="brand">
-						<button>Follow</button>
-					</ButtonStyled>
-				</template>
-			</ContentPageHeader>
-		`,
-	}),
-}
-
-export const WithTitleSuffix: Story = {
-	render: () => ({
-		components: { ContentPageHeader, Avatar, ButtonStyled },
-		template: `
-			<ContentPageHeader>
-				<template #icon>
-					<Avatar size="64px" />
-				</template>
-				<template #title>Featured Project</template>
-				<template #title-suffix>
-					<span class="px-2 py-1 bg-brand-highlight text-brand rounded-full text-sm">Featured</span>
-				</template>
-				<template #summary>This project has been featured by the Modrinth team.</template>
-				<template #actions>
-					<ButtonStyled color="brand">
-						<button>Download</button>
-					</ButtonStyled>
-					<ButtonStyled type="transparent">
-						<button>Share</button>
-					</ButtonStyled>
-				</template>
-			</ContentPageHeader>
-		`,
-	}),
-}
diff --git a/packages/ui/src/stories/base/PageHeader.stories.ts b/packages/ui/src/stories/base/PageHeader.stories.ts
new file mode 100644
index 0000000000..2fd13c3ca5
--- /dev/null
+++ b/packages/ui/src/stories/base/PageHeader.stories.ts
@@ -0,0 +1,353 @@
+import {
+	AffiliateIcon,
+	ClipboardCopyIcon,
+	DownloadIcon,
+	GlobeIcon,
+	HeartIcon,
+	LeftArrowIcon,
+	LinkIcon,
+	MoreVerticalIcon,
+	PlayIcon,
+	SettingsIcon,
+	SlashIcon,
+	StopCircleIcon,
+	TagCategoryGamepad2Icon as Gamepad2Icon,
+	TimerIcon,
+} from '@modrinth/assets'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import PageHeader from '../../components/base/PageHeader.vue'
+import LoaderIcon from '../../components/servers/icons/LoaderIcon.vue'
+import ServerIcon from '../../components/servers/icons/ServerIcon.vue'
+
+const noop = () => undefined
+
+const meta = {
+	title: 'Base/PageHeader',
+	component: PageHeader,
+	parameters: {
+		layout: 'padded',
+	},
+	decorators: [
+		(story) => ({
+			components: { story },
+			template: '<div class="w-full"><story /></div>',
+		}),
+	],
+} satisfies Meta<typeof PageHeader>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const AppInstanceHeader: Story = {
+	args: {
+		header: 'Create: Astral',
+		leading: {
+			type: 'avatar',
+			src: null,
+			alt: 'Create: Astral',
+			tintBy: '/Users/calum/Library/Application Support/com.modrinth.theseus/profiles/astral',
+		},
+		metadata: [
+			{
+				id: 'game-version',
+				label: '1.20.1',
+				icon: Gamepad2Icon,
+				tooltip: 'Minecraft version',
+			},
+			{
+				id: 'loader',
+				label: 'Fabric 0.16.14',
+				icon: LoaderIcon,
+				iconProps: { loader: 'Fabric' },
+				tooltip: 'Mod loader',
+			},
+			{
+				id: 'playtime',
+				label: '12 hours',
+				icon: TimerIcon,
+				tooltip: 'Total playtime',
+			},
+		],
+		actions: [
+			{
+				id: 'play',
+				label: 'Play',
+				icon: PlayIcon,
+				color: 'brand',
+				onClick: noop,
+			},
+			{
+				id: 'settings',
+				label: 'Instance settings',
+				icon: SettingsIcon,
+				labelHidden: true,
+				tooltip: 'Instance settings',
+				onClick: noop,
+			},
+			{
+				id: 'more',
+				label: 'More actions',
+				icon: MoreVerticalIcon,
+				labelHidden: true,
+				type: 'transparent',
+				tooltip: 'More actions',
+				menuActions: [
+					{
+						id: 'open-folder',
+						label: 'Open folder',
+						icon: GlobeIcon,
+						action: noop,
+					},
+					{
+						id: 'copy-id',
+						label: 'Copy ID',
+						icon: ClipboardCopyIcon,
+						action: noop,
+					},
+				],
+			},
+		],
+	},
+}
+
+export const CreatorHeader: Story = {
+	args: {
+		header: 'Prospector',
+		summary: 'A Modrinth creator with a handful of popular projects.',
+		leading: {
+			type: 'avatar',
+			src: null,
+			alt: 'Prospector',
+			avatarSize: '96px',
+			circle: true,
+		},
+		badges: [
+			{
+				id: 'affiliate',
+				label: 'Affiliate',
+				icon: AffiliateIcon,
+				class: 'border-brand-highlight bg-brand-highlight text-brand',
+			},
+		],
+		metadata: [
+			{
+				id: 'projects',
+				label: '12 projects',
+				icon: Gamepad2Icon,
+			},
+			{
+				id: 'downloads',
+				label: '4.2M downloads',
+				icon: DownloadIcon,
+			},
+			{
+				id: 'followers',
+				label: '82K followers',
+				icon: HeartIcon,
+			},
+		],
+		actions: [
+			{
+				id: 'follow',
+				label: 'Follow',
+				icon: HeartIcon,
+				color: 'brand',
+				onClick: noop,
+			},
+		],
+	},
+}
+
+export const BrowseHeader: Story = {
+	args: {
+		header: 'Survival SMP',
+		leading: [
+			{
+				id: 'back',
+				type: 'button',
+				icon: LeftArrowIcon,
+				to: '/instance/my-world',
+				ariaLabel: 'Back to instance',
+				tooltip: 'Back to instance',
+				wrapperClass: 'flex size-12 shrink-0 items-center justify-center',
+			},
+			{
+				id: 'target',
+				type: 'avatar',
+				src: null,
+				alt: 'Survival SMP',
+				avatarSize: '48px',
+				tintBy: 'survival-smp',
+			},
+		],
+		metadata: [
+			{
+				id: 'heading',
+				label: 'Installing content',
+				class: '!text-primary',
+			},
+			{
+				id: 'game-version',
+				label: '1.20.1',
+				icon: Gamepad2Icon,
+				tooltip: 'Minecraft version',
+				class: '!text-primary',
+			},
+			{
+				id: 'loader',
+				label: 'Fabric',
+				icon: LoaderIcon,
+				iconProps: { loader: 'Fabric' },
+				tooltip: 'Mod loader',
+				class: '!text-primary',
+			},
+		],
+		divider: false,
+		bottomPadding: false,
+		mainClass: 'items-center',
+		titleClass: 'leading-8',
+		truncateTitle: true,
+	},
+}
+
+export const ServerPanelRootHeader: Story = {
+	args: {
+		header: 'Survival SMP',
+		leading: {
+			type: 'component',
+			component: ServerIcon,
+			componentProps: { image: undefined },
+			class: 'size-15 !rounded-xl',
+		},
+		metadata: [
+			{
+				id: 'active-world',
+				label: 'My World',
+				icon: GlobeIcon,
+				tooltip: 'Active instance',
+			},
+			{
+				id: 'address',
+				label: 'play.modrinth.gg',
+				icon: LinkIcon,
+				tooltip: 'Copy server address',
+				onClick: noop,
+			},
+		],
+		actions: [
+			{
+				id: 'start',
+				label: 'Start server',
+				icon: PlayIcon,
+				color: 'brand',
+				onClick: noop,
+			},
+			{
+				id: 'settings',
+				label: 'Server settings',
+				icon: SettingsIcon,
+				labelHidden: true,
+				tooltip: 'Server settings',
+				onClick: noop,
+			},
+		],
+	},
+}
+
+export const ServerPanelInstanceHeader: Story = {
+	args: {
+		header: 'My World',
+		leading: {
+			type: 'button',
+			icon: LeftArrowIcon,
+			to: '/hosting/manage/demo-server/instances',
+			ariaLabel: 'All instances',
+			tooltip: 'All instances',
+		},
+		metadata: [
+			{
+				id: 'game-version',
+				label: '1.20.1',
+				icon: Gamepad2Icon,
+				tooltip: 'Minecraft version',
+			},
+			{
+				id: 'loader',
+				label: 'Fabric 0.19.2',
+				icon: LoaderIcon,
+				iconProps: { loader: 'Fabric' },
+				tooltip: 'Mod loader',
+			},
+			{
+				id: 'last-active',
+				label: 'Last active 2 weeks ago',
+				icon: TimerIcon,
+				tooltip: 'Last activity',
+			},
+		],
+		actions: [
+			{
+				id: 'start',
+				label: 'Start instance',
+				icon: PlayIcon,
+				color: 'brand',
+				onClick: noop,
+			},
+			{
+				id: 'stop',
+				label: 'Stop instance',
+				color: 'red',
+				joinedActions: [
+					{
+						id: 'stop',
+						label: 'Stop',
+						icon: StopCircleIcon,
+						action: noop,
+					},
+					{
+						id: 'kill_server',
+						label: 'Kill server',
+						icon: SlashIcon,
+						action: noop,
+					},
+				],
+			},
+			{
+				id: 'settings',
+				label: 'Instance settings',
+				icon: SettingsIcon,
+				labelHidden: true,
+				tooltip: 'Instance settings',
+				onClick: noop,
+			},
+		],
+	},
+}
+
+export const CustomMetadata: Story = {
+	render: () => ({
+		components: { PageHeader, DownloadIcon, HeartIcon },
+		template: `
+			<PageHeader
+				header="Custom Metadata Project"
+				summary="Custom metadata is reserved for rich stat rows that cannot be represented by icon and label data."
+				:leading="{ type: 'avatar', src: null, alt: 'Custom Metadata Project', avatarSize: '96px' }"
+				:metadata="[{ id: 'project-stats', type: 'custom', class: 'contents' }]"
+			>
+				<template #metadata-project-stats>
+					<div class="flex flex-wrap items-center gap-3">
+						<div class="flex items-center gap-2 font-semibold">
+							<DownloadIcon class="h-6 w-6 text-secondary" />
+							1.2M downloads
+						</div>
+						<div class="flex items-center gap-2 font-semibold">
+							<HeartIcon class="h-6 w-6 text-secondary" />
+							50K followers
+						</div>
+					</div>
+				</template>
+			</PageHeader>
+		`,
+	}),
+}
diff --git a/packages/ui/src/stories/servers/InstanceCard.stories.ts b/packages/ui/src/stories/servers/InstanceCard.stories.ts
new file mode 100644
index 0000000000..a6faee84ed
--- /dev/null
+++ b/packages/ui/src/stories/servers/InstanceCard.stories.ts
@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import InstanceCard from '../../components/servers/instances/InstanceCard.vue'
+
+const meta = {
+	title: 'Servers/InstanceCard',
+	component: InstanceCard,
+	parameters: {
+		layout: 'padded',
+	},
+	render: (args) => ({
+		components: { InstanceCard },
+		setup() {
+			return { args }
+		},
+		template: '<div style="max-width: 360px"><InstanceCard v-bind="args" /></div>',
+	}),
+} satisfies Meta<typeof InstanceCard>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Active: Story = {
+	args: {
+		world: {
+			type: 'world',
+			id: 'demo-world',
+			name: 'Cobbletown',
+			active: true,
+			gameVersion: '1.20.4',
+			loaderLabel: 'Fabric 0.16.6',
+			linkedModpack: {
+				name: 'Cobblemon Official',
+				iconUrl: null,
+				link: null,
+			},
+			installedContentCount: 47,
+			lastActiveAt: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),
+			createdAt: new Date(Date.now() - 197 * 24 * 60 * 60 * 1000).toISOString(),
+		},
+	},
+}
+
+export const Empty: Story = {
+	args: {
+		world: {
+			type: 'empty',
+			id: 'empty-instance-slot',
+			name: 'Instance #2',
+		},
+	},
+}
diff --git a/packages/ui/src/stories/servers/ServerPanelAdmonitions.stories.ts b/packages/ui/src/stories/servers/ServerPanelAdmonitions.stories.ts
index 9afdf5b429..f7a35390b5 100644
--- a/packages/ui/src/stories/servers/ServerPanelAdmonitions.stories.ts
+++ b/packages/ui/src/stories/servers/ServerPanelAdmonitions.stories.ts
@@ -22,7 +22,7 @@ const meta = {
 			setup() {
 				const router = useRouter()
 				onMounted(() => {
-					router.replace('/hosting/manage/demo-server/content')
+					router.replace('/hosting/manage/demo-server/instances/demo-world')
 				})
 
 				const server = ref({
diff --git a/packages/ui/src/stories/servers/WorldManageHeader.stories.ts b/packages/ui/src/stories/servers/WorldManageHeader.stories.ts
new file mode 100644
index 0000000000..ad0c75b8a7
--- /dev/null
+++ b/packages/ui/src/stories/servers/WorldManageHeader.stories.ts
@@ -0,0 +1,50 @@
+import { PlayIcon, SettingsIcon } from '@modrinth/assets'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import WorldManageHeader from '../../components/servers/server-header/WorldManageHeader.vue'
+
+const meta = {
+	title: 'Servers/WorldManageHeader',
+	component: WorldManageHeader,
+	parameters: {
+		layout: 'padded',
+	},
+	decorators: [
+		(story) => ({
+			components: { story },
+			template: '<div style="max-width: 920px;"><story /></div>',
+		}),
+	],
+} satisfies Meta<typeof WorldManageHeader>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		name: 'My World',
+		gameVersion: '1.20.1',
+		loader: 'fabric',
+		loaderVersion: '0.19.2',
+		lastActive: 'Last active 2 weeks ago',
+		backHref: '/hosting/manage/demo-server/instances',
+		backLabel: 'All instances',
+		actions: [
+			{
+				id: 'start',
+				label: 'Start instance',
+				icon: PlayIcon,
+				color: 'brand',
+				onClick: () => undefined,
+			},
+			{
+				id: 'settings',
+				label: 'Instance settings',
+				icon: SettingsIcon,
+				labelHidden: true,
+				tooltip: 'Instance settings',
+				onClick: () => undefined,
+			},
+		],
+	},
+}