diff --git a/apps/app-frontend/src/pages/Browse.vue b/apps/app-frontend/src/pages/Browse.vue
index 78abfdc5cf..feb1e3969e 100644
--- a/apps/app-frontend/src/pages/Browse.vue
+++ b/apps/app-frontend/src/pages/Browse.vue
@@ -10,7 +10,9 @@ import {
 } from '@modrinth/assets'
 import type { BrowseInstallContentType, CardAction, ProjectType, Tags } from '@modrinth/ui'
 import {
+	BrowseInstallHeader,
 	BrowsePageLayout,
+	BrowseSidebar,
 	commonMessages,
 	CreationFlowModal,
 	defineMessages,
@@ -21,8 +23,10 @@ import {
 	preferencesDiffer,
 	provideBrowseManager,
 	requestInstall,
+	SelectedProjectsFloatingBar,
 	useBrowseSearch,
 	useDebugLogger,
+	useStickyObserver,
 	useVIntl,
 } from '@modrinth/ui'
 import { useQueryClient } from '@tanstack/vue-query'
@@ -79,6 +83,7 @@ const {
 	isSetupServerContext,
 	effectiveServerWorldId,
 	serverContextServerData,
+	serverContextWorldName,
 	serverContentProjectIds,
 	queuedServerInstallProjectIds,
 	queuedServerInstallCount,
@@ -412,6 +417,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:
@@ -565,8 +574,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,
@@ -606,6 +616,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())
 
@@ -1092,6 +1107,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">
@@ -1118,5 +1144,9 @@ provideBrowseManager({
 			@browse-modpacks="() => {}"
 			@create="handleServerModpackFlowCreate"
 		/>
+
+		<Teleport to="#sidebar-teleport-target">
+			<BrowseSidebar />
+		</Teleport>
 	</div>
 </template>
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 000bafb025..0f07e3febf 100644
--- a/apps/app-frontend/src/providers/setup/server-install-content.ts
+++ b/apps/app-frontend/src/providers/setup/server-install-content.ts
@@ -53,6 +53,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>
@@ -226,6 +227,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>>>(
@@ -243,6 +245,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'
@@ -266,9 +280,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) {
@@ -304,6 +328,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) {
@@ -323,6 +352,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())
@@ -330,6 +360,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)
@@ -338,6 +370,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) {
@@ -586,6 +627,7 @@ export function createServerInstallContent(opts: {
 		isSetupServerContext,
 		effectiveServerWorldId,
 		serverContextServerData,
+		serverContextWorldName,
 		serverContentProjectIds,
 		queuedServerInstallProjectIds,
 		queuedServerInstallCount,
diff --git a/apps/frontend/src/composables/use-server-install-content.ts b/apps/frontend/src/composables/use-server-install-content.ts
index 19d8bd2a1a..6f16480e98 100644
--- a/apps/frontend/src/composables/use-server-install-content.ts
+++ b/apps/frontend/src/composables/use-server-install-content.ts
@@ -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),
@@ -699,13 +708,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/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 ea7b18d45b..61551666c7 100644
--- a/apps/frontend/src/pages/discover/[type]/index.vue
+++ b/apps/frontend/src/pages/discover/[type]/index.vue
@@ -13,7 +13,9 @@ import {
 } from '@modrinth/assets'
 import type { CardAction } from '@modrinth/ui'
 import {
+	BrowseInstallHeader,
 	BrowsePageLayout,
+	BrowseSidebar,
 	commonMessages,
 	CreationFlowModal,
 	defineMessages,
@@ -21,8 +23,10 @@ import {
 	injectModrinthClient,
 	PROJECT_DEP_MARKER_QUERY,
 	provideBrowseManager,
+	SelectedProjectsFloatingBar,
 	useBrowseSearch,
 	useDebugLogger,
+	useStickyObserver,
 	useVIntl,
 } from '@modrinth/ui'
 import { cycleValue } from '@modrinth/utils'
@@ -169,6 +173,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
@@ -192,49 +201,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,
@@ -404,7 +430,7 @@ watch(
 )
 
 debug('calling initial refreshSearch')
-searchState.refreshSearch()
+await searchState.refreshSearch()
 
 const ogTitle = computed(() =>
 	searchState.query.value
@@ -484,29 +510,63 @@ provideBrowseManager({
 	<Teleport v-if="flags.searchBackground" to="#absolute-background-teleport">
 		<div class="search-background"></div>
 	</Teleport>
-	<BrowsePageLayout>
-		<template #sidebar-prepend>
-			<AdPlaceholder v-if="!auth.user && !serverData" />
-		</template>
-		<template #display-mode-icon>
-			<GridIcon v-if="resultsDisplayMode === 'grid'" />
-			<ImageIcon v-else-if="resultsDisplayMode === 'gallery'" />
-			<ListIcon v-else />
-		</template>
-		<template #content-after>
-			<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>
-	</BrowsePageLayout>
+
+	<div
+		v-if="installContext"
+		ref="stickyInstallHeaderRef"
+		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 divider bottom-padding />
+	</div>
+
+	<SelectedProjectsFloatingBar v-if="installContext" :install-context="installContext" />
+
+	<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'" />
+					<ImageIcon v-else-if="resultsDisplayMode === 'gallery'" />
+					<ListIcon v-else />
+				</template>
+			</BrowsePageLayout>
+		</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>
 .search-background {
diff --git a/packages/ui/src/components/base/JoinedButtons.vue b/packages/ui/src/components/base/JoinedButtons.vue
index 8aab2dc96d..44ffb3a424 100644
--- a/packages/ui/src/components/base/JoinedButtons.vue
+++ b/packages/ui/src/components/base/JoinedButtons.vue
@@ -33,7 +33,8 @@ import { DropdownIcon } from '@modrinth/assets'
 import type { Component } from 'vue'
 import { computed } from 'vue'
 
-import { ButtonStyled, OverflowMenu } from '../index'
+import ButtonStyled from './ButtonStyled.vue'
+import OverflowMenu from './OverflowMenu.vue'
 
 // TODO: This should be moved to a shared types file.
 type Colors = 'standard' | 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple'
diff --git a/packages/ui/src/components/base/NavTabs.vue b/packages/ui/src/components/base/NavTabs.vue
index 005af9d86f..9b8eb03bb9 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 border border-solid border-surface-4': 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 30fd9212c9..cd75145b08 100644
--- a/packages/ui/src/components/base/PageHeader.vue
+++ b/packages/ui/src/components/base/PageHeader.vue
@@ -154,45 +154,58 @@
 			</div>
 
 			<div v-if="props.actions.length" class="flex flex-wrap gap-2 items-center">
-				<ButtonStyled
-					v-for="action in props.actions"
-					:key="action.id"
-					:color="action.color ?? 'standard'"
-					:size="action.size ?? 'large'"
-					:type="action.type ?? 'standard'"
-					:circular="action.circular ?? action.labelHidden ?? false"
-				>
-					<AutoLink
-						v-if="action.to"
-						v-tooltip="action.tooltip"
-						:to="action.to"
-						:aria-label="actionLabel(action)"
-					>
-						<component
-							:is="action.icon"
-							v-if="action.icon"
-							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"
+				<template v-for="action in props.actions" :key="action.id">
+					<JoinedButtons
+						v-if="action.joinedActions?.length"
+						:actions="action.joinedActions"
+						:color="joinedActionColor(action.color)"
+						:size="action.size ?? 'large'"
 						:disabled="action.disabled"
-						:aria-label="actionLabel(action)"
-						@click="action.onClick"
+						: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"
 					>
-						<component
-							:is="action.icon"
-							v-if="action.icon"
-							aria-hidden="true"
-							v-bind="action.iconProps"
-						/>
-						<span v-if="!action.labelHidden && !action.circular">{{ action.label }}</span>
-					</button>
-				</ButtonStyled>
+						<AutoLink
+							v-if="action.to"
+							v-tooltip="action.tooltip"
+							:to="action.to"
+							:aria-label="actionLabel(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>
+						</AutoLink>
+						<button
+							v-else
+							v-tooltip="action.tooltip"
+							type="button"
+							:disabled="action.disabled"
+							:aria-label="actionLabel(action)"
+							@click="action.onClick"
+						>
+							<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>
 			</div>
 		</div>
 
@@ -265,6 +278,7 @@ 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'
 
 type PageHeaderTarget = string | RouteLocationRaw
 type ButtonColor =
@@ -328,6 +342,7 @@ type PageHeaderAction = {
 	label: string
 	icon?: Component
 	iconProps?: Record<string, unknown>
+	iconClass?: string
 	tooltip?: string
 	ariaLabel?: string
 	to?: PageHeaderTarget
@@ -338,6 +353,10 @@ type PageHeaderAction = {
 	color?: ButtonColor
 	size?: ButtonSize
 	type?: ButtonType
+	joinedActions?: JoinedButtonAction[]
+	primaryDisabled?: boolean
+	dropdownDisabled?: boolean
+	primaryMuted?: boolean
 }
 
 const props = withDefaults(
@@ -396,4 +415,8 @@ function metadataClass(item: PageHeaderMetadataItem, interactive = false) {
 function actionLabel(action: PageHeaderAction) {
 	return action.ariaLabel ?? action.tooltip ?? action.label
 }
+
+function joinedActionColor(color?: ButtonColor) {
+	return color === 'medal-promo' ? 'standard' : color
+}
 </script>
diff --git a/packages/ui/src/components/servers/server-header/WorldManageHeader.vue b/packages/ui/src/components/servers/server-header/WorldManageHeader.vue
index e575870a70..7d2e3342bf 100644
--- a/packages/ui/src/components/servers/server-header/WorldManageHeader.vue
+++ b/packages/ui/src/components/servers/server-header/WorldManageHeader.vue
@@ -1,42 +1,12 @@
 <template>
 	<div class="w-full flex flex-col gap-4" :class="{ 'mt-4': isNuxt }">
-		<ContentPageHeader :class="props.headerClass">
-			<template #icon>
-				<div class="flex size-16 shrink-0 items-center justify-center">
-					<ButtonStyled circular size="large">
-						<button
-							type="button"
-							:aria-label="props.backLabel"
-							@click="router.push(props.backHref)"
-						>
-							<LeftArrowIcon aria-hidden="true" />
-						</button>
-					</ButtonStyled>
-				</div>
-			</template>
-			<template #title>
-				{{ props.name || props.fallbackName }}
-			</template>
-			<template #stats>
-				<div v-if="headerMetadata.length" class="flex min-w-0 flex-wrap items-center gap-2">
-					<template v-for="(item, index) in headerMetadata" :key="item.id">
-						<BulletDivider v-if="index > 0" />
-						<div class="flex min-w-0 items-center gap-2 font-medium text-secondary text-nowrap">
-							<component
-								:is="item.icon"
-								class="flex size-5 shrink-0"
-								aria-hidden="true"
-								v-bind="item.iconProps"
-							/>
-							<span class="truncate">{{ item.label }}</span>
-						</div>
-					</template>
-				</div>
-			</template>
-			<template #actions>
-				<slot name="actions" />
-			</template>
-		</ContentPageHeader>
+		<PageHeader
+			:header="props.name || props.fallbackName"
+			:leading="leadingItems"
+			:metadata="headerMetadata"
+			:actions="props.actions"
+			:header-class="props.headerClass"
+		/>
 	</div>
 </template>
 
@@ -46,9 +16,7 @@ import { LeftArrowIcon, TagCategoryGamepad2Icon as Gamepad2Icon, TimerIcon } fro
 import { type Component, computed } from 'vue'
 import { useRouter } from 'vue-router'
 
-import BulletDivider from '#ui/components/base/BulletDivider.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import ContentPageHeader from '#ui/components/base/ContentPageHeader.vue'
+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'
@@ -59,6 +27,33 @@ type MetadataItem = {
 	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<{
@@ -72,6 +67,7 @@ const props = withDefaults(
 		backLabel: string
 		fallbackName?: string
 		headerClass?: string
+		actions?: HeaderAction[]
 	}>(),
 	{
 		name: null,
@@ -82,12 +78,23 @@ const props = withDefaults(
 		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())
diff --git a/packages/ui/src/layouts/shared/browse-tab/header.vue b/packages/ui/src/layouts/shared/browse-tab/header.vue
index 048dcd1197..4fa1ef79bd 100644
--- a/packages/ui/src/layouts/shared/browse-tab/header.vue
+++ b/packages/ui/src/layouts/shared/browse-tab/header.vue
@@ -19,6 +19,8 @@ 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 = {
@@ -57,7 +59,6 @@ const leadingItems = computed(() => {
 			ariaLabel: context.backLabel,
 			tooltip: context.backLabel,
 			onClick: handleBack,
-			wrapperClass: 'flex size-12 shrink-0 items-center justify-center',
 		},
 		...(iconSrc.value
 			? [
@@ -95,12 +96,13 @@ const metadataItems = computed(() => {
 		})
 	}
 	if (context.loader) {
-		const loaderLabel = formatLoaderLabel(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: loaderLabel },
+			iconProps: { loader: loaderName },
 			class: '!text-primary',
 		})
 	}
@@ -163,8 +165,8 @@ async function handleSelectedProjectsLeaveResult(
 			:header="installContext.name"
 			:leading="leadingItems"
 			:metadata="metadataItems"
-			:divider="false"
-			:bottom-padding="false"
+			:divider="props.divider ?? false"
+			:bottom-padding="props.bottomPadding ?? false"
 			main-class="items-center"
 			title-class="leading-8"
 			truncate-title
diff --git a/packages/ui/src/layouts/shared/browse-tab/layout.vue b/packages/ui/src/layouts/shared/browse-tab/layout.vue
index cedaac915f..445d389ffa 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,23 +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, formatProjectTypeSentence } 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'
-import BrowseSidebar from './sidebar.vue'
 
 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) => ({
@@ -45,21 +36,6 @@ const maxResultsOptions = computed<ComboboxOption<number>[]>(() =>
 	})),
 )
 
-const installHeaderClass = computed(() => [
-	'sticky top-0 z-20 border-0 bg-surface-1',
-	ctx.variant === 'web'
-		? 'normal-page__header browse-install-header-bleed mb-4 flex flex-col gap-2 py-3'
-		: '-mx-6 -mt-6 rounded-tl-[--radius-xl] border-b border-solid p-3 border-surface-5',
-	ctx.variant !== 'web' && isInstallHeaderStuck.value ? 'border-t' : '',
-])
-const contentFrameTag = computed(() => (ctx.variant === 'web' ? 'section' : 'div'))
-const contentFrameClass = computed(() =>
-	ctx.variant === 'web' ? 'normal-page__content browse-page-layout__content' : 'contents',
-)
-const contentInnerClass = computed(() =>
-	ctx.variant === 'web' ? 'flex flex-col gap-3' : 'contents',
-)
-
 const messages = defineMessages({
 	searchPlaceholder: {
 		id: 'browse.search.placeholder',
@@ -85,308 +61,242 @@ const messages = defineMessages({
 </script>
 
 <template>
-	<div v-if="ctx.installContext?.value" ref="stickyInstallHeaderRef" :class="installHeaderClass">
-		<BrowseInstallHeader />
-	</div>
-	<SelectedProjectsFloatingBar v-if="ctx.installContext?.value" />
+	<NavTabs v-if="ctx.showProjectTypeTabs.value" :links="ctx.selectableProjectTypes.value" />
 
-	<template v-if="ctx.variant === 'web'">
-		<aside
-			class="normal-page__sidebar browse-page-layout__sidebar"
-			:aria-label="formatMessage(commonMessages.filtersLabel)"
+	<StyledInput
+		v-model="ctx.query.value"
+		:icon="SearchIcon"
+		type="text"
+		autocomplete="off"
+		:placeholder="
+			formatMessage(messages.searchPlaceholder, {
+				projectType: formatProjectTypeSentence(formatMessage, ctx.projectType.value, 2),
+			})
+		"
+		clearable
+		wrapper-class="w-full"
+		:input-class="ctx.variant === 'web' ? '!h-12' : 'h-12'"
+		@clear="ctx.clearSearch()"
+	/>
+
+	<div class="flex flex-wrap items-center gap-2">
+		<Combobox
+			:model-value="ctx.effectiveCurrentSortType.value"
+			:options="sortOptions"
+			:class="
+				ctx.variant === 'web'
+					? '!w-[16rem] min-w-max max-w-full flex-grow md:flex-grow-0'
+					: '!w-[16rem] min-w-max max-w-full'
+			"
+			@update:model-value="(val: SortType) => (ctx.effectiveCurrentSortType.value = val)"
 		>
-			<slot name="sidebar-prepend" />
-			<BrowseSidebar />
-		</aside>
-	</template>
-	<template v-else>
-		<Teleport to="#sidebar-teleport-target">
-			<BrowseSidebar>
-				<template #prepend>
-					<slot name="sidebar-prepend" />
-				</template>
-			</BrowseSidebar>
-		</Teleport>
-	</template>
+			<template #prefix>
+				<span class="font-semibold text-primary">{{
+					formatMessage(commonMessages.sortByLabel)
+				}}</span>
+			</template>
+		</Combobox>
 
-	<component :is="contentFrameTag" :class="contentFrameClass">
-		<div :class="contentInnerClass">
-			<NavTabs v-if="ctx.showProjectTypeTabs.value" :links="ctx.selectableProjectTypes.value" />
+		<Combobox
+			:model-value="ctx.maxResults.value"
+			:options="maxResultsOptions"
+			:class="
+				ctx.variant === 'web'
+					? '!w-[9rem] min-w-max max-w-full flex-grow md:flex-grow-0'
+					: '!w-[9rem] min-w-max max-w-full'
+			"
+			:placeholder="formatMessage(commonMessages.viewLabel)"
+			@update:model-value="(val: number) => (ctx.maxResults.value = val)"
+		>
+			<template #prefix>
+				<span class="font-semibold text-primary">{{ formatMessage(messages.viewPrefix) }}</span>
+			</template>
+		</Combobox>
 
-			<StyledInput
-				v-model="ctx.query.value"
-				:icon="SearchIcon"
-				type="text"
-				autocomplete="off"
-				:placeholder="
-					formatMessage(messages.searchPlaceholder, {
-						projectType: formatProjectTypeSentence(formatMessage, ctx.projectType.value, 2),
-					})
-				"
-				clearable
-				wrapper-class="w-full"
-				:input-class="ctx.variant === 'web' ? '!h-12' : 'h-12'"
-				@clear="ctx.clearSearch()"
-			/>
-
-			<div class="flex flex-wrap items-center gap-2">
-				<Combobox
-					:model-value="ctx.effectiveCurrentSortType.value"
-					:options="sortOptions"
-					:class="
-						ctx.variant === 'web'
-							? '!w-[16rem] min-w-max max-w-full flex-grow md:flex-grow-0'
-							: '!w-[16rem] min-w-max max-w-full'
-					"
-					@update:model-value="(val: SortType) => (ctx.effectiveCurrentSortType.value = val)"
-				>
-					<template #prefix>
-						<span class="font-semibold text-primary">{{
-							formatMessage(commonMessages.sortByLabel)
-						}}</span>
-					</template>
-				</Combobox>
-
-				<Combobox
-					:model-value="ctx.maxResults.value"
-					:options="maxResultsOptions"
-					:class="
-						ctx.variant === 'web'
-							? '!w-[9rem] min-w-max max-w-full flex-grow md:flex-grow-0'
-							: '!w-[9rem] min-w-max max-w-full'
-					"
-					:placeholder="formatMessage(commonMessages.viewLabel)"
-					@update:model-value="(val: number) => (ctx.maxResults.value = val)"
-				>
-					<template #prefix>
-						<span class="font-semibold text-primary">{{ formatMessage(messages.viewPrefix) }}</span>
-					</template>
-				</Combobox>
-
-				<div v-if="ctx.filtersMenuOpen && !ctx.filtersMenuOpen.value" class="lg:hidden">
-					<ButtonStyled>
-						<button @click="ctx.filtersMenuOpen.value = true">
-							{{ formatMessage(messages.filterResults) }}
-						</button>
-					</ButtonStyled>
-				</div>
-
-				<ButtonStyled v-if="ctx.cycleDisplayMode" circular>
-					<button @click="ctx.cycleDisplayMode!()">
-						<slot name="display-mode-icon" />
-					</button>
-				</ButtonStyled>
-
-				<Pagination
-					:page="ctx.currentPage.value"
-					:count="ctx.pageCount.value"
-					:class="ctx.variant === 'web' ? 'mx-auto sm:ml-auto sm:mr-0' : 'ml-auto'"
-					@switch-page="ctx.setPage"
-				/>
-			</div>
-
-			<SearchFilterControl
-				v-if="ctx.isServerType.value"
-				v-model:selected-filters="ctx.serverCurrentFilters.value"
-				:filters="ctx.serverFilterTypes.value"
-				:provided-filters="[]"
-				:overridden-provided-filter-types="[]"
-			/>
-			<SearchFilterControl
-				v-else
-				v-model:selected-filters="ctx.currentFilters.value"
-				:filters="ctx.filters.value.filter((f) => f.display !== 'none')"
-				:provided-filters="ctx.providedFilters?.value ?? []"
-				:overridden-provided-filter-types="ctx.overriddenProvidedFilterTypes.value"
-				:provided-message="lockedMessages?.providedBy"
-			/>
-
-			<div class="search">
-				<section v-if="ctx.loading.value" class="offline">
-					<component :is="ctx.loadingComponent ?? LoadingIndicator" />
-				</section>
-				<section v-else-if="ctx.offline?.value && ctx.totalHits.value === 0" class="offline">
-					{{ formatMessage(messages.offline) }}
-				</section>
-				<section
-					v-else-if="
-						ctx.isServerType.value
-							? ctx.serverHits.value.length === 0
-							: ctx.projectHits.value.length === 0
-					"
-					class="offline"
-				>
-					<p>{{ formatMessage(messages.noResults) }}</p>
-				</section>
-
-				<ProjectCardList v-else :layout="ctx.effectiveLayout.value">
-					<template v-if="ctx.isServerType.value">
-						<ProjectCard
-							v-for="result in ctx.serverHits.value"
-							:key="`server-card-${result.project_id}`"
-							:title="result.name"
-							:icon-url="result.icon_url || undefined"
-							:summary="result.summary"
-							:tags="result.categories"
-							:link="ctx.getServerProjectLink(result)"
-							:server-online-players="result.minecraft_java_server?.ping?.data?.players_online ?? 0"
-							:server-region="result.minecraft_server?.region"
-							:server-recent-plays="result.minecraft_java_server?.verified_plays_2w ?? 0"
-							:server-modpack-content="ctx.getServerModpackContent?.(result)"
-							:server-ping="ctx.serverPings?.value?.[result.project_id]"
-							:server-status-online="!!result.minecraft_java_server?.ping?.data"
-							:hide-online-players-label="ctx.variant === 'app'"
-							:hide-recent-plays-label="ctx.variant === 'app'"
-							:layout="ctx.effectiveLayout.value"
-							:max-tags="2"
-							is-server-project
-							exclude-loaders
-							:color="result.color ?? undefined"
-							:banner="result.featured_gallery ?? undefined"
-							@contextmenu.prevent.stop="(event: MouseEvent) => ctx.onContextMenu?.(event, result)"
-							@mouseenter="ctx.onServerProjectHover?.(result)"
-							@mouseleave="ctx.onProjectHoverEnd?.()"
-						>
-							<template v-if="ctx.getCardActions?.(result, ctx.projectType.value)?.length" #actions>
-								<div class="flex gap-2">
-									<ButtonStyled
-										v-for="action in ctx.getCardActions(result, ctx.projectType.value)"
-										:key="action.key"
-										:color="action.color"
-										:type="action.type"
-										:circular="action.circular"
-									>
-										<button
-											v-tooltip="action.tooltip"
-											:disabled="action.disabled"
-											@click.stop="action.onClick"
-										>
-											<component :is="action.icon" :class="action.iconClass" />
-											<template v-if="!action.circular">{{ action.label }}</template>
-										</button>
-									</ButtonStyled>
-								</div>
-							</template>
-						</ProjectCard>
-					</template>
-					<template v-else>
-						<ProjectCard
-							v-for="result in ctx.projectHits.value"
-							:key="result.project_id"
-							:link="ctx.getProjectLink(result)"
-							:title="result.title"
-							:icon-url="result.icon_url"
-							:author="{
-								name: result.organization == null ? result.author : result.organization,
-								link:
-									result.organization_id == null
-										? ctx.variant === 'web'
-											? `/user/${result.author_id ?? result.author}`
-											: `https://modrinth.com/user/${result.author_id ?? result.author}`
-										: ctx.variant === 'web'
-											? `/organization/${result.organization_id}`
-											: `https://modrinth.com/organization/${result.organization_id}`,
-							}"
-							:date-updated="result.date_modified"
-							:date-published="result.date_created"
-							:displayed-date="
-								ctx.effectiveCurrentSortType.value.name === 'newest' ? 'published' : 'updated'
-							"
-							:downloads="result.downloads"
-							:summary="result.description"
-							:tags="result.display_categories"
-							:all-tags="result.categories"
-							:deprioritized-tags="ctx.deprioritizedTags.value"
-							:exclude-loaders="ctx.excludeLoaders.value"
-							:followers="result.follows"
-							:banner="result.featured_gallery ?? undefined"
-							:color="result.color ?? undefined"
-							:environment="
-								['mod', 'modpack'].includes(ctx.projectType.value)
-									? {
-											clientSide: result.client_side as Labrinth.Projects.v2.Environment,
-											serverSide: result.server_side as Labrinth.Projects.v2.Environment,
-										}
-									: undefined
-							"
-							:layout="ctx.effectiveLayout.value"
-							@contextmenu.prevent.stop="(event: MouseEvent) => ctx.onContextMenu?.(event, result)"
-							@mouseenter="ctx.onProjectHover?.(result)"
-							@mouseleave="ctx.onProjectHoverEnd?.()"
-						>
-							<template v-if="ctx.getCardActions?.(result, ctx.projectType.value)?.length" #actions>
-								<div class="flex gap-2">
-									<ButtonStyled
-										v-for="action in ctx.getCardActions(result, ctx.projectType.value)"
-										:key="action.key"
-										:color="action.color"
-										:type="action.type"
-										:circular="action.circular"
-									>
-										<button
-											v-tooltip="action.tooltip"
-											:disabled="action.disabled"
-											@click.stop="action.onClick"
-										>
-											<component :is="action.icon" :class="action.iconClass" />
-											<template v-if="!action.circular">{{ action.label }}</template>
-										</button>
-									</ButtonStyled>
-								</div>
-							</template>
-						</ProjectCard>
-					</template>
-				</ProjectCardList>
-
-				<div :class="ctx.variant === 'web' ? 'pagination-after mt-3' : 'flex justify-end mt-3'">
-					<Pagination
-						:page="ctx.currentPage.value"
-						:count="ctx.pageCount.value"
-						:class="ctx.variant === 'web' ? 'justify-end' : 'pagination-after'"
-						@switch-page="ctx.setPage"
-					/>
-				</div>
-			</div>
-
-			<slot name="content-after" />
+		<div v-if="ctx.filtersMenuOpen && !ctx.filtersMenuOpen.value" class="lg:hidden">
+			<ButtonStyled>
+				<button @click="ctx.filtersMenuOpen.value = true">
+					{{ formatMessage(messages.filterResults) }}
+				</button>
+			</ButtonStyled>
 		</div>
-	</component>
+
+		<ButtonStyled v-if="ctx.cycleDisplayMode" circular>
+			<button @click="ctx.cycleDisplayMode!()">
+				<slot name="display-mode-icon" />
+			</button>
+		</ButtonStyled>
+
+		<Pagination
+			:page="ctx.currentPage.value"
+			:count="ctx.pageCount.value"
+			:class="ctx.variant === 'web' ? 'mx-auto sm:ml-auto sm:mr-0' : 'ml-auto'"
+			@switch-page="ctx.setPage"
+		/>
+	</div>
+
+	<SearchFilterControl
+		v-if="ctx.isServerType.value"
+		v-model:selected-filters="ctx.serverCurrentFilters.value"
+		:filters="ctx.serverFilterTypes.value"
+		:provided-filters="[]"
+		:overridden-provided-filter-types="[]"
+	/>
+	<SearchFilterControl
+		v-else
+		v-model:selected-filters="ctx.currentFilters.value"
+		:filters="ctx.filters.value.filter((f) => f.display !== 'none')"
+		:provided-filters="ctx.providedFilters?.value ?? []"
+		:overridden-provided-filter-types="ctx.overriddenProvidedFilterTypes.value"
+		:provided-message="lockedMessages?.providedBy"
+	/>
+
+	<div class="search">
+		<section v-if="ctx.loading.value" class="offline">
+			<component :is="ctx.loadingComponent ?? LoadingIndicator" />
+		</section>
+		<section v-else-if="ctx.offline?.value && ctx.totalHits.value === 0" class="offline">
+			{{ formatMessage(messages.offline) }}
+		</section>
+		<section
+			v-else-if="
+				ctx.isServerType.value
+					? ctx.serverHits.value.length === 0
+					: ctx.projectHits.value.length === 0
+			"
+			class="offline"
+		>
+			<p>{{ formatMessage(messages.noResults) }}</p>
+		</section>
+
+		<ProjectCardList v-else :layout="ctx.effectiveLayout.value">
+			<template v-if="ctx.isServerType.value">
+				<ProjectCard
+					v-for="result in ctx.serverHits.value"
+					:key="`server-card-${result.project_id}`"
+					:title="result.name"
+					:icon-url="result.icon_url || undefined"
+					:summary="result.summary"
+					:tags="result.categories"
+					:link="ctx.getServerProjectLink(result)"
+					:server-online-players="result.minecraft_java_server?.ping?.data?.players_online ?? 0"
+					:server-region="result.minecraft_server?.region"
+					:server-recent-plays="result.minecraft_java_server?.verified_plays_2w ?? 0"
+					:server-modpack-content="ctx.getServerModpackContent?.(result)"
+					:server-ping="ctx.serverPings?.value?.[result.project_id]"
+					:server-status-online="!!result.minecraft_java_server?.ping?.data"
+					:hide-online-players-label="ctx.variant === 'app'"
+					:hide-recent-plays-label="ctx.variant === 'app'"
+					:layout="ctx.effectiveLayout.value"
+					:max-tags="2"
+					is-server-project
+					exclude-loaders
+					:color="result.color ?? undefined"
+					:banner="result.featured_gallery ?? undefined"
+					@contextmenu.prevent.stop="(event: MouseEvent) => ctx.onContextMenu?.(event, result)"
+					@mouseenter="ctx.onServerProjectHover?.(result)"
+					@mouseleave="ctx.onProjectHoverEnd?.()"
+				>
+					<template v-if="ctx.getCardActions?.(result, ctx.projectType.value)?.length" #actions>
+						<div class="flex gap-2">
+							<ButtonStyled
+								v-for="action in ctx.getCardActions(result, ctx.projectType.value)"
+								:key="action.key"
+								:color="action.color"
+								:type="action.type"
+								:circular="action.circular"
+							>
+								<button
+									v-tooltip="action.tooltip"
+									:disabled="action.disabled"
+									@click.stop="action.onClick"
+								>
+									<component :is="action.icon" :class="action.iconClass" />
+									<template v-if="!action.circular">{{ action.label }}</template>
+								</button>
+							</ButtonStyled>
+						</div>
+					</template>
+				</ProjectCard>
+			</template>
+			<template v-else>
+				<ProjectCard
+					v-for="result in ctx.projectHits.value"
+					:key="result.project_id"
+					:link="ctx.getProjectLink(result)"
+					:title="result.title"
+					:icon-url="result.icon_url"
+					:author="{
+						name: result.organization == null ? result.author : result.organization,
+						link:
+							result.organization_id == null
+								? ctx.variant === 'web'
+									? `/user/${result.author_id ?? result.author}`
+									: `https://modrinth.com/user/${result.author_id ?? result.author}`
+								: ctx.variant === 'web'
+									? `/organization/${result.organization_id}`
+									: `https://modrinth.com/organization/${result.organization_id}`,
+					}"
+					:date-updated="result.date_modified"
+					:date-published="result.date_created"
+					:displayed-date="
+						ctx.effectiveCurrentSortType.value.name === 'newest' ? 'published' : 'updated'
+					"
+					:downloads="result.downloads"
+					:summary="result.description"
+					:tags="result.display_categories"
+					:all-tags="result.categories"
+					:deprioritized-tags="ctx.deprioritizedTags.value"
+					:exclude-loaders="ctx.excludeLoaders.value"
+					:followers="result.follows"
+					:banner="result.featured_gallery ?? undefined"
+					:color="result.color ?? undefined"
+					:environment="
+						['mod', 'modpack'].includes(ctx.projectType.value)
+							? {
+									clientSide: result.client_side as Labrinth.Projects.v2.Environment,
+									serverSide: result.server_side as Labrinth.Projects.v2.Environment,
+								}
+							: undefined
+					"
+					:layout="ctx.effectiveLayout.value"
+					@contextmenu.prevent.stop="(event: MouseEvent) => ctx.onContextMenu?.(event, result)"
+					@mouseenter="ctx.onProjectHover?.(result)"
+					@mouseleave="ctx.onProjectHoverEnd?.()"
+				>
+					<template v-if="ctx.getCardActions?.(result, ctx.projectType.value)?.length" #actions>
+						<div class="flex gap-2">
+							<ButtonStyled
+								v-for="action in ctx.getCardActions(result, ctx.projectType.value)"
+								:key="action.key"
+								:color="action.color"
+								:type="action.type"
+								:circular="action.circular"
+							>
+								<button
+									v-tooltip="action.tooltip"
+									:disabled="action.disabled"
+									@click.stop="action.onClick"
+								>
+									<component :is="action.icon" :class="action.iconClass" />
+									<template v-if="!action.circular">{{ action.label }}</template>
+								</button>
+							</ButtonStyled>
+						</div>
+					</template>
+				</ProjectCard>
+			</template>
+		</ProjectCardList>
+
+		<div :class="ctx.variant === 'web' ? 'pagination-after mt-3' : 'flex justify-end mt-3'">
+			<Pagination
+				:page="ctx.currentPage.value"
+				:count="ctx.pageCount.value"
+				:class="ctx.variant === 'web' ? 'justify-end' : 'pagination-after'"
+				@switch-page="ctx.setPage"
+			/>
+		</div>
+	</div>
 
 	<slot name="after" />
 </template>
-
-<style scoped>
-.browse-install-header-bleed {
-	grid-column: 1 / -1;
-	margin-inline: -1.5rem;
-	padding-inline: 0.75rem !important;
-}
-
-.browse-install-header-bleed::after {
-	content: '';
-	position: absolute;
-	right: 50%;
-	bottom: 0;
-	width: 100vw;
-	border-bottom: 1px solid var(--surface-5);
-	transform: translateX(50%);
-}
-
-.browse-page-layout__content {
-	display: contents;
-}
-
-.browse-page-layout__sidebar {
-	grid-row: 3;
-}
-
-@media screen and (min-width: 1024px) {
-	.browse-page-layout__content {
-		display: block;
-	}
-
-	.browse-page-layout__sidebar {
-		display: block;
-	}
-}
-</style>
diff --git a/packages/ui/src/layouts/shared/browse-tab/types.ts b/packages/ui/src/layouts/shared/browse-tab/types.ts
index 3caeb04502..b40411f048 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/wrapped/hosting/manage/[id]/index.vue b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/index.vue
index fedf0f356e..952ec9a580 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/index.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/index.vue
@@ -406,6 +406,14 @@ interface Tab {
 	href: string
 	icon?: object
 	subpages?: string[]
+	prompt?: {
+		title: string
+		description: string
+		dismissLabel?: string
+		shown?: boolean
+		placement?: string
+		onDismiss?: () => void
+	}
 }
 
 const props = withDefaults(
@@ -478,6 +486,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',
@@ -723,6 +746,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>>()
 
@@ -1043,6 +1074,14 @@ const navLinks = computed<Tab[]>(() => [
 		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,
+		},
 	},
 	{
 		label: 'Access',
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
index 42a25dbd1e..c4fdc437fb 100644
--- 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
@@ -9,19 +9,8 @@
 			:back-href="instancesPath"
 			:back-label="formatMessage(messages.allInstances)"
 			:fallback-name="formatMessage(messages.worldFallbackName)"
-		>
-			<template #actions>
-				<PanelServerActionButton size="large" start-label="Start instance" />
-				<ButtonStyled size="large" circular>
-					<button
-						v-tooltip="formatMessage(messages.instanceSettings)"
-						@click="openServerSettings({ tabId: 'installation' })"
-					>
-						<SettingsIcon aria-hidden="true" />
-					</button>
-				</ButtonStyled>
-			</template>
-		</WorldManageHeader>
+			:actions="headerActions"
+		/>
 
 		<NavTabs :links="worldTabLinks" replace />
 
@@ -31,14 +20,24 @@
 
 <script setup lang="ts">
 import type { Archon } from '@modrinth/api-client'
-import { BoxesIcon, DatabaseBackupIcon, FolderOpenIcon, SettingsIcon } from '@modrinth/assets'
+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 ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import NavTabs from '#ui/components/base/NavTabs.vue'
-import { PanelServerActionButton, WorldManageHeader } from '#ui/components/servers/server-header'
+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 {
@@ -91,6 +90,17 @@ 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]),
@@ -112,7 +122,7 @@ const currentWorld = computed(() => {
 })
 
 const worldName = computed(
-	() => currentWorld.value?.name ?? server.value?.name ?? formatMessage(messages.worldFallbackName),
+	() => currentWorld.value?.name ?? formatMessage(messages.worldFallbackName),
 )
 
 const gameVersion = computed(() => {
@@ -140,6 +150,93 @@ const lastActiveLabel = computed(() => {
 		? 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[]>(() => [
 	{
diff --git a/packages/ui/src/stories/base/PageHeader.stories.ts b/packages/ui/src/stories/base/PageHeader.stories.ts
index f652207bac..2fd1376900 100644
--- a/packages/ui/src/stories/base/PageHeader.stories.ts
+++ b/packages/ui/src/stories/base/PageHeader.stories.ts
@@ -5,6 +5,8 @@ import {
 	MoreVerticalIcon,
 	PlayIcon,
 	SettingsIcon,
+	SlashIcon,
+	StopCircleIcon,
 	TagCategoryGamepad2Icon as Gamepad2Icon,
 	TimerIcon,
 } from '@modrinth/assets'
@@ -227,6 +229,25 @@ export const ServerPanelInstanceHeader: Story = {
 				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',
diff --git a/packages/ui/src/stories/servers/WorldManageHeader.stories.ts b/packages/ui/src/stories/servers/WorldManageHeader.stories.ts
index 68661cf3e4..ad0c75b8a7 100644
--- a/packages/ui/src/stories/servers/WorldManageHeader.stories.ts
+++ b/packages/ui/src/stories/servers/WorldManageHeader.stories.ts
@@ -1,7 +1,6 @@
-import { SettingsIcon } from '@modrinth/assets'
+import { PlayIcon, SettingsIcon } from '@modrinth/assets'
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import ButtonStyled from '../../components/base/ButtonStyled.vue'
 import WorldManageHeader from '../../components/servers/server-header/WorldManageHeader.vue'
 
 const meta = {
@@ -30,22 +29,22 @@ export const Default: Story = {
 		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,
+			},
+		],
 	},
-	render: (args) => ({
-		components: { ButtonStyled, SettingsIcon, WorldManageHeader },
-		setup() {
-			return { args }
-		},
-		template: `
-			<WorldManageHeader v-bind="args">
-				<template #actions>
-					<ButtonStyled size="large" circular>
-						<button type="button" aria-label="Instance settings">
-							<SettingsIcon aria-hidden="true" />
-						</button>
-					</ButtonStyled>
-				</template>
-			</WorldManageHeader>
-		`,
-	}),
 }