diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index 041209b551..54d9320c26 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -5,6 +5,7 @@ import {
 	nodeAuthState,
 	PanelVersionFeature,
 	TauriModrinthClient,
+	VerboseLoggingFeature,
 } from '@modrinth/api-client'
 import {
 	ArrowBigUpDashIcon,
@@ -146,6 +147,7 @@ const tauriApiClient = new TauriModrinthClient({
 			token: async () => (await getCreds())?.session,
 		}),
 		new PanelVersionFeature(),
+		new VerboseLoggingFeature(),
 	],
 })
 provideModrinthClient(tauriApiClient)
@@ -420,6 +422,7 @@ const route = useRoute()
 
 const loading = useLoading()
 loading.setEnabled(false)
+loading.startLoading()
 
 const error = useError()
 const errorModal = ref()
@@ -1023,6 +1026,8 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 				v-if="themeStore.featureFlags.servers_in_app"
 				v-tooltip.right="'Servers'"
 				to="/hosting/manage"
+				:is-primary="(r) => r.path === '/hosting/manage' || r.path === '/hosting/manage/'"
+				:is-subpage="(r) => r.path.startsWith('/hosting/manage/') && r.path !== '/hosting/manage/'"
 			>
 				<ServerIcon />
 			</NavButton>
@@ -1195,7 +1200,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 				</div>
 			</transition>
 			<div
-				class="loading-indicator-container h-8 fixed z-50"
+				class="loading-indicator-container h-8 fixed z-50 pointer-events-none"
 				:style="{
 					top: 'calc(var(--top-bar-height))',
 					left: 'calc(var(--left-bar-width))',
diff --git a/apps/app-frontend/src/components/ui/NavButton.vue b/apps/app-frontend/src/components/ui/NavButton.vue
index e65f5b3ecd..7790d14bcf 100644
--- a/apps/app-frontend/src/components/ui/NavButton.vue
+++ b/apps/app-frontend/src/components/ui/NavButton.vue
@@ -3,6 +3,7 @@
 		v-if="typeof to === 'string'"
 		:to="to"
 		v-bind="$attrs"
+		:active-class="isSubpage ? '' : undefined"
 		:class="{
 			'router-link-active': isPrimary && isPrimary(route),
 			'subpage-active': isSubpage && isSubpage(route),
diff --git a/apps/app-frontend/src/components/ui/SearchCard.vue b/apps/app-frontend/src/components/ui/SearchCard.vue
deleted file mode 100644
index 51d44f9069..0000000000
--- a/apps/app-frontend/src/components/ui/SearchCard.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<template>
-	<ProjectCard
-		:title="project.name"
-		:link="
-			() => {
-				emit('open')
-				$router.push({
-					path: `/project/${project.project_id ?? project.id}`,
-					query: { i: props.instance ? props.instance.path : undefined },
-				})
-			}
-		"
-		:author="{ name: project.author, link: `https://modrinth.com/user/${project.author}` }"
-		:icon-url="project.icon_url"
-		:summary="project.summary"
-		:tags="project.display_categories"
-		:all-tags="project.categories"
-		:downloads="project.downloads"
-		:followers="project.follows"
-		:date-updated="project.date_modified"
-		:banner="project.featured_gallery ?? undefined"
-		:color="project.color ?? undefined"
-		:environment="
-			['mod', 'modpack'].includes(projectType)
-				? {
-						clientSide: project.client_side?.[0],
-						serverSide: project.server_side?.[0],
-					}
-				: undefined
-		"
-		layout="list"
-	>
-		<template #actions>
-			<ButtonStyled color="brand" type="outlined">
-				<button
-					:disabled="installed || installing"
-					class="shrink-0 no-wrap"
-					@click.stop="install()"
-				>
-					<SpinnerIcon v-if="installing" class="animate-spin" />
-					<template v-else-if="!installed">
-						<DownloadIcon v-if="modpack || instance" />
-						<PlusIcon v-else />
-					</template>
-					<CheckIcon v-else />
-					{{
-						installing
-							? 'Installing'
-							: installed
-								? 'Installed'
-								: modpack || instance
-									? 'Install'
-									: 'Add to an instance'
-					}}
-				</button>
-			</ButtonStyled>
-		</template>
-	</ProjectCard>
-</template>
-
-<script setup>
-import { CheckIcon, DownloadIcon, PlusIcon, SpinnerIcon } from '@modrinth/assets'
-import { ButtonStyled, injectNotificationManager, ProjectCard } from '@modrinth/ui'
-import dayjs from 'dayjs'
-import relativeTime from 'dayjs/plugin/relativeTime'
-import { computed, ref } from 'vue'
-import { useRouter } from 'vue-router'
-
-import { injectContentInstall } from '@/providers/content-install'
-
-const { install: installVersion } = injectContentInstall()
-
-dayjs.extend(relativeTime)
-
-const { handleError } = injectNotificationManager()
-
-const router = useRouter()
-
-const props = defineProps({
-	backgroundImage: {
-		type: String,
-		default: null,
-	},
-	project: {
-		type: Object,
-		required: true,
-	},
-	instance: {
-		type: Object,
-		default: null,
-	},
-	featured: {
-		type: Boolean,
-		default: false,
-	},
-	installed: {
-		type: Boolean,
-		default: false,
-	},
-	projectType: {
-		type: String,
-		default: undefined,
-	},
-	activeLoader: {
-		type: String,
-		default: null,
-	},
-	activeGameVersion: {
-		type: String,
-		default: null,
-	},
-})
-
-const emit = defineEmits(['open', 'install'])
-
-const installing = ref(false)
-
-async function install() {
-	installing.value = true
-	await installVersion(
-		props.project.project_id ?? props.project.id,
-		null,
-		props.instance ? props.instance.path : null,
-		'SearchCard',
-		(versionId) => {
-			installing.value = false
-			if (versionId) {
-				emit('install', props.project.project_id ?? props.project.id)
-			}
-		},
-		(profile) => {
-			router.push(`/instance/${profile}`)
-		},
-		{
-			preferredLoader: props.activeLoader ?? undefined,
-			preferredGameVersion: props.activeGameVersion ?? undefined,
-		},
-	).catch(handleError)
-}
-
-const modpack = computed(() => props.project.project_types?.includes('modpack'))
-</script>
diff --git a/apps/app-frontend/src/components/ui/URLConfirmModal.vue b/apps/app-frontend/src/components/ui/URLConfirmModal.vue
index aa7917a5df..0ec7cd0bce 100644
--- a/apps/app-frontend/src/components/ui/URLConfirmModal.vue
+++ b/apps/app-frontend/src/components/ui/URLConfirmModal.vue
@@ -1,11 +1,9 @@
 <script setup>
-import { Button, injectNotificationManager } from '@modrinth/ui'
+import { Button, injectNotificationManager, ProjectCard } from '@modrinth/ui'
 import { ref } from 'vue'
 
 import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
-import SearchCard from '@/components/ui/SearchCard.vue'
-import { get_project, get_version } from '@/helpers/cache.js'
-import { get_categories } from '@/helpers/tags.js'
+import { get_project_v3, get_version } from '@/helpers/cache.js'
 import { injectContentInstall } from '@/providers/content-install'
 
 const { handleError } = injectNotificationManager()
@@ -14,26 +12,22 @@ const { install: installVersion } = injectContentInstall()
 const confirmModal = ref(null)
 const project = ref(null)
 const version = ref(null)
-const categories = ref(null)
 const installing = ref(false)
 
 defineExpose({
 	async show(event) {
 		if (event.event === 'InstallVersion') {
 			version.value = await get_version(event.id, 'must_revalidate').catch(handleError)
-			project.value = await get_project(version.value.project_id, 'must_revalidate').catch(
+			project.value = await get_project_v3(version.value.project_id, 'must_revalidate').catch(
 				handleError,
 			)
 		} else {
-			project.value = await get_project(event.id, 'must_revalidate').catch(handleError)
+			project.value = await get_project_v3(event.id, 'must_revalidate').catch(handleError)
 			version.value = await get_version(
 				project.value.versions[project.value.versions.length - 1],
 				'must_revalidate',
 			).catch(handleError)
 		}
-		categories.value = (await get_categories().catch(handleError)).filter(
-			(cat) => project.value.categories.includes(cat.name) && cat.project_type === 'mod',
-		)
 		confirmModal.value.show()
 	},
 })
@@ -52,13 +46,22 @@ async function install() {
 </script>
 
 <template>
-	<ModalWrapper ref="confirmModal" :header="`Install ${project?.title}`">
+	<ModalWrapper ref="confirmModal" :header="`Install ${project?.name}`">
 		<div class="modal-body">
-			<SearchCard
-				:project="project"
+			<ProjectCard
+				:title="project.name"
+				:link="() => confirmModal.hide()"
+				:icon-url="project.icon_url"
+				:summary="project.summary"
+				:tags="project.display_categories"
+				:all-tags="project.categories"
+				:downloads="project.downloads"
+				:followers="project.follows"
+				:date-updated="project.date_modified"
+				:banner="project.featured_gallery ?? undefined"
+				:color="project.color ?? undefined"
+				layout="list"
 				class="project-card"
-				:categories="categories"
-				@open="confirmModal.hide()"
 			/>
 			<div class="button-row">
 				<div class="markdown-body">
diff --git a/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue b/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue
index bcac05a6a7..e06f8019f0 100644
--- a/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue
+++ b/apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue
@@ -198,43 +198,46 @@ const messages = defineMessages({
 <template>
 	<ConfirmDeleteInstanceModal ref="deleteConfirmModal" @delete="removeProfile" />
 	<div class="block">
-		<div class="float-end ml-4 relative group">
-			<OverflowMenu
-				v-tooltip="formatMessage(messages.editIcon)"
-				class="bg-transparent border-none appearance-none p-0 m-0 cursor-pointer group-active:scale-95 transition-transform"
-				:options="[
-					{
-						id: 'select',
-						action: () => setIcon(),
-					},
-					{
-						id: 'remove',
-						color: 'danger',
-						action: () => resetIcon(),
-						shown: !!icon,
-					},
-				]"
-			>
-				<Avatar
-					:src="icon ? convertFileSrc(icon) : icon"
-					size="108px"
-					class="!border-4 group-hover:brightness-75"
-					:tint-by="instance.path"
-					no-shadow
-				/>
-				<div class="absolute top-0 right-0 m-2">
-					<div
-						class="p-2 m-0 text-primary flex items-center justify-center aspect-square bg-button-bg rounded-full border-button-border border-solid border-[1px] hovering-icon-shadow"
+		<div class="float-end ml-10 relative group w-fit">
+			<div class="flex flex-col gap-1">
+				<span class="text-lg font-semibold text-contrast">Icon</span>
+				<div class="group relative w-fit">
+					<OverflowMenu
+						v-tooltip="formatMessage(messages.editIcon)"
+						class="bg-transparent border-none appearance-none p-0 m-0 cursor-pointer group-active:scale-95 transition-transform"
+						:options="[
+							{
+								id: 'select',
+								action: () => setIcon(),
+							},
+							{
+								id: 'remove',
+								color: 'danger',
+								action: () => resetIcon(),
+								shown: !!icon,
+							},
+						]"
 					>
-						<EditIcon aria-hidden="true" class="h-4 w-4 text-primary" />
-					</div>
+						<Avatar
+							:src="icon ? convertFileSrc(icon) : icon"
+							size="108px"
+							class="transition-[filter] group-hover:brightness-75"
+							:tint-by="instance.path"
+							no-shadow
+						/>
+						<div
+							class="absolute top-0 h-full w-full flex items-center justify-center opacity-0 transition-all group-hover:opacity-100"
+						>
+							<EditIcon aria-hidden="true" class="h-10 w-10 text-primary" />
+						</div>
+						<template #select>
+							<UploadIcon />
+							{{ icon ? formatMessage(messages.replaceIcon) : formatMessage(messages.selectIcon) }}
+						</template>
+						<template #remove> <TrashIcon /> {{ formatMessage(messages.removeIcon) }} </template>
+					</OverflowMenu>
 				</div>
-				<template #select>
-					<UploadIcon />
-					{{ icon ? formatMessage(messages.replaceIcon) : formatMessage(messages.selectIcon) }}
-				</template>
-				<template #remove> <TrashIcon /> {{ formatMessage(messages.removeIcon) }} </template>
-			</OverflowMenu>
+			</div>
 		</div>
 		<label for="instance-name" class="m-0 mb-1 text-lg font-extrabold text-contrast block">
 			{{ formatMessage(messages.name) }}
diff --git a/apps/app-frontend/src/components/ui/modal/ServerSettingsModal.vue b/apps/app-frontend/src/components/ui/modal/ServerSettingsModal.vue
deleted file mode 100644
index b20277476f..0000000000
--- a/apps/app-frontend/src/components/ui/modal/ServerSettingsModal.vue
+++ /dev/null
@@ -1,265 +0,0 @@
-<script setup lang="ts">
-import {
-	type Archon,
-	clearNodeAuthState,
-	type Labrinth,
-	setNodeAuthState,
-} from '@modrinth/api-client'
-import { ChevronRightIcon } from '@modrinth/assets'
-import {
-	type BusyReason,
-	commonMessages,
-	defineMessage,
-	defineMessages,
-	injectModrinthClient,
-	injectNotificationManager,
-	provideModrinthServerContext,
-	provideServerSettings,
-	ServerSettingsAdvancedPage,
-	ServerSettingsGeneralPage,
-	ServerSettingsInstallationPage,
-	ServerSettingsNetworkPage,
-	ServerSettingsPropertiesPage,
-	serverSettingsTabDefinitions,
-	TabbedModal,
-	type TabbedModalTab,
-	useVIntl,
-} from '@modrinth/ui'
-import { useQueryClient } from '@tanstack/vue-query'
-import { computed, nextTick, onUnmounted, reactive, ref } from 'vue'
-
-import { get_user } from '@/helpers/cache'
-import { get as getCreds } from '@/helpers/mr_auth'
-
-type ShowOptions = {
-	serverId: string
-	tabIndex?: number
-}
-
-const { formatMessage } = useVIntl()
-const queryClient = useQueryClient()
-const client = injectModrinthClient()
-const { addNotification } = injectNotificationManager()
-
-const messages = defineMessages({
-	failedToLoadServer: {
-		id: 'app.server-settings.failed-to-load-server',
-		defaultMessage: 'Failed to load server settings',
-	},
-})
-
-const modal = ref<InstanceType<typeof TabbedModal> | null>(null)
-
-const currentServerId = ref('')
-const worldId = ref<string | null>(null)
-const server = ref<Archon.Servers.v0.Server>({} as Archon.Servers.v0.Server)
-
-const currentUserId = ref<string | null>(null)
-const currentUserRole = ref<string | null>(null)
-
-const isApp = ref(true)
-
-function browseModpacks() {
-	// Stub for app browse-modpacks flow. Intentionally no-op for now.
-}
-
-const isConnected = ref(true)
-const powerState = ref<Archon.Websocket.v0.PowerState>('stopped')
-const isServerRunning = computed(() => powerState.value === 'running')
-const backupsState = reactive(new Map())
-const isSyncingContent = ref(false)
-
-const busyReasons = computed<BusyReason[]>(() => {
-	const reasons: BusyReason[] = []
-	if (server.value?.status === 'installing') {
-		reasons.push({
-			reason: defineMessage({
-				id: 'servers.busy.installing',
-				defaultMessage: 'Server is installing',
-			}),
-		})
-	}
-	if (isSyncingContent.value) {
-		reasons.push({
-			reason: defineMessage({
-				id: 'servers.busy.syncing-content',
-				defaultMessage: 'Content sync in progress',
-			}),
-		})
-	}
-	return reasons
-})
-
-const fsAuth = ref<{ url: string; token: string } | null>(null)
-const fsOps = ref<Archon.Websocket.v0.FilesystemOperation[]>([])
-const fsQueuedOps = ref<Archon.Websocket.v0.QueuedFilesystemOp[]>([])
-
-async function refreshFsAuth() {
-	if (!currentServerId.value) {
-		fsAuth.value = null
-		return
-	}
-	fsAuth.value = await queryClient.fetchQuery({
-		queryKey: ['servers', 'filesystem-auth', currentServerId.value],
-		queryFn: () => client.archon.servers_v0.getFilesystemAuth(currentServerId.value),
-	})
-}
-
-function markBackupCancelled(_backupId: string) {}
-
-const serverSettingsTabComponentMap = {
-	general: ServerSettingsGeneralPage,
-	installation: ServerSettingsInstallationPage,
-	network: ServerSettingsNetworkPage,
-	properties: ServerSettingsPropertiesPage,
-	advanced: ServerSettingsAdvancedPage,
-} as const
-
-provideServerSettings({
-	isApp,
-	currentUserId,
-	currentUserRole,
-	browseModpacks,
-})
-
-provideModrinthServerContext({
-	get serverId() {
-		return currentServerId.value
-	},
-	worldId,
-	server,
-	isConnected,
-	powerState,
-	isServerRunning,
-	backupsState,
-	markBackupCancelled,
-	isSyncingContent,
-	busyReasons,
-	fsAuth,
-	fsOps,
-	fsQueuedOps,
-	refreshFsAuth,
-})
-
-const ownerId = computed(() => server.value?.owner_id ?? 'Ghost')
-const isOwner = computed(() => currentUserId.value != null && currentUserId.value === ownerId.value)
-const isAdmin = computed(() => currentUserRole.value === 'admin')
-
-const tabs = computed<TabbedModalTab[]>(() =>
-	serverSettingsTabDefinitions.map((tab) => {
-		const ctx = {
-			serverId: currentServerId.value,
-			ownerId: ownerId.value,
-			serverStatus: server.value?.status,
-			isOwner: isOwner.value,
-			isAdmin: isAdmin.value,
-		}
-		const name = defineMessage({
-			id: `server.settings.tabs.${tab.id}`,
-			defaultMessage: tab.label,
-		})
-		const shown = tab.shown ? tab.shown(ctx) : true
-
-		if (tab.external) {
-			return {
-				name,
-				icon: tab.icon,
-				href: `https://modrinth.com${tab.href(ctx)}`,
-				shown,
-			}
-		}
-
-		return {
-			name,
-			icon: tab.icon,
-			content: serverSettingsTabComponentMap[tab.id as keyof typeof serverSettingsTabComponentMap],
-			shown,
-		}
-	}),
-)
-
-async function resolveViewer() {
-	currentUserId.value = null
-	currentUserRole.value = null
-
-	const credentials = await getCreds().catch(() => null)
-	if (!credentials?.user_id) {
-		return
-	}
-
-	currentUserId.value = credentials.user_id
-
-	const user = await get_user(credentials.user_id, 'bypass').catch(() => null)
-	const typedUser = user as Labrinth.Users.v2.User | null
-	currentUserRole.value = typedUser?.role ?? null
-}
-
-async function show({ serverId, tabIndex }: ShowOptions) {
-	try {
-		const [serverData, serverFull] = await Promise.all([
-			queryClient.fetchQuery({
-				queryKey: ['servers', 'detail', serverId],
-				queryFn: () => client.archon.servers_v0.get(serverId),
-			}),
-			queryClient.fetchQuery({
-				queryKey: ['servers', 'v1', 'detail', serverId],
-				queryFn: () => client.archon.servers_v1.get(serverId),
-			}),
-			resolveViewer(),
-		])
-
-		currentServerId.value = serverId
-		server.value = serverData
-		const activeWorld = serverFull.worlds.find((world) => world.is_active)
-		worldId.value = activeWorld?.id ?? serverFull.worlds[0]?.id ?? null
-
-		setNodeAuthState(() => fsAuth.value, refreshFsAuth)
-		await refreshFsAuth().catch(() => {})
-
-		modal.value?.show()
-		const visibleTabsCount = tabs.value.filter((tab) => tab.shown !== false).length
-		const requestedTab = tabIndex ?? 0
-		const clampedTab = Math.min(Math.max(requestedTab, 0), Math.max(visibleTabsCount - 1, 0))
-		nextTick(() => modal.value?.setTab(clampedTab))
-	} catch (error) {
-		console.error(error)
-		addNotification({
-			type: 'error',
-			title: formatMessage(messages.failedToLoadServer),
-		})
-	}
-}
-
-function hide() {
-	modal.value?.hide()
-}
-
-function onHide() {
-	clearNodeAuthState()
-}
-
-onUnmounted(() => {
-	clearNodeAuthState()
-})
-
-defineExpose({ show, hide })
-</script>
-
-<template>
-	<TabbedModal
-		ref="modal"
-		:tabs="tabs"
-		:on-hide="onHide"
-		:max-width="'min(980px, calc(95vw - 10rem))'"
-		:width="'min(980px, calc(95vw - 10rem))'"
-	>
-		<template #title>
-			<span class="flex items-center gap-2 text-lg font-semibold text-primary">
-				{{ server.name || 'Server' }} <ChevronRightIcon />
-				<span class="font-extrabold text-contrast">{{
-					formatMessage(commonMessages.settingsLabel)
-				}}</span>
-			</span>
-		</template>
-	</TabbedModal>
-</template>
diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index d93726e438..f7f558ae65 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -185,9 +185,6 @@
   "app.modal.update-to-play.update-required-description": {
     "message": "An update is required to play {name}. Please update to the latest version to launch the game."
   },
-  "app.server-settings.failed-to-load-server": {
-    "message": "Failed to load server settings"
-  },
   "app.settings.developer-mode-enabled": {
     "message": "Developer mode enabled."
   },
@@ -601,11 +598,5 @@
   },
   "search.filter.locked.server-loader.title": {
     "message": "Loader is provided by the server"
-  },
-  "servers.busy.installing": {
-    "message": "Server is installing"
-  },
-  "servers.busy.syncing-content": {
-    "message": "Content sync in progress"
   }
 }
diff --git a/apps/app-frontend/src/pages/Browse.vue b/apps/app-frontend/src/pages/Browse.vue
index f7ec4dcef4..dcbe484463 100644
--- a/apps/app-frontend/src/pages/Browse.vue
+++ b/apps/app-frontend/src/pages/Browse.vue
@@ -7,41 +7,31 @@ import {
 	GlobeIcon,
 	PlayIcon,
 	PlusIcon,
-	SearchIcon,
+	SpinnerIcon,
 	StopCircleIcon,
 } from '@modrinth/assets'
-import type { ProjectType, SortType, Tags } from '@modrinth/ui'
+import type { CardAction, ProjectType, Tags } from '@modrinth/ui'
 import {
-	Admonition,
-	ButtonStyled,
-	Checkbox,
+	BrowsePageLayout,
+	BrowseSidebar,
 	commonMessages,
+	CreationFlowModal,
 	defineMessages,
-	DropdownSelect,
 	injectNotificationManager,
-	LoadingIndicator,
-	NavTabs,
-	Pagination,
-	ProjectCard,
-	ProjectCardList,
-	SearchFilterControl,
-	SearchSidebarFilter,
-	StyledInput,
+	provideBrowseManager,
+	useBrowseSearch,
 	useDebugLogger,
-	useSearch,
-	useServerSearch,
 	useVIntl,
 } from '@modrinth/ui'
+import { useQueryClient } from '@tanstack/vue-query'
+import { convertFileSrc } from '@tauri-apps/api/core'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import type { Ref } from 'vue'
-import { computed, nextTick, onUnmounted, ref, shallowRef, toRaw, watch } from 'vue'
+import { computed, onUnmounted, ref, shallowRef, watch } from 'vue'
 import type { LocationQuery } from 'vue-router'
 import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
 
 import ContextMenu from '@/components/ui/ContextMenu.vue'
-import type Instance from '@/components/ui/Instance.vue'
-import InstanceIndicator from '@/components/ui/InstanceIndicator.vue'
-import SearchCard from '@/components/ui/SearchCard.vue'
 import { get_project_v3, get_search_results_v3 } from '@/helpers/cache.js'
 import { process_listener } from '@/helpers/events'
 import { get_by_profile_path } from '@/helpers/process'
@@ -54,7 +44,12 @@ import {
 import { get_categories, get_game_versions, get_loaders } from '@/helpers/tags'
 import type { GameInstance } from '@/helpers/types'
 import { add_server_to_profile, get_profile_worlds, getServerLatency } from '@/helpers/worlds'
+import { injectContentInstall } from '@/providers/content-install'
 import { injectServerInstall } from '@/providers/server-install'
+import {
+	createServerInstallContent,
+	provideServerInstallContent,
+} from '@/providers/setup/server-install-content'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
 import { getServerAddress } from '@/store/install.js'
 
@@ -62,15 +57,37 @@ const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 const { installingServerProjects, playServerProject, showAddServerToInstanceModal } =
 	injectServerInstall()
+const { install: installVersion } = injectContentInstall()
+const queryClient = useQueryClient()
 const debugLog = useDebugLogger('Browse')
 
 const router = useRouter()
 const route = useRoute()
-
-const projectTypes = computed(() => {
-	debugLog('projectTypes computed', route.params.projectType)
-	return [route.params.projectType as ProjectType]
-})
+const serverSetupModalRef = ref<InstanceType<typeof CreationFlowModal> | null>(null)
+const serverInstallContent = createServerInstallContent({ serverSetupModalRef })
+provideServerInstallContent(serverInstallContent)
+const {
+	serverIdQuery,
+	serverFlowFrom,
+	isFromWorlds,
+	isServerContext,
+	isSetupServerContext,
+	effectiveServerWorldId,
+	serverContextServerData,
+	serverContentProjectIds,
+	serverBackUrl,
+	serverBackLabel,
+	serverBrowseHeading,
+	initServerContext,
+	watchServerContextChanges,
+	searchServerModpacks,
+	getServerProjectVersions,
+	enforceSetupModpackRoute,
+	installProjectToServer,
+	onServerFlowBack,
+	handleServerModpackFlowCreate,
+	markServerProjectInstalled,
+} = serverInstallContent
 
 debugLog('fetching tags (categories, loaders, gameVersions)')
 const [categories, loaders, availableGameVersions] = await Promise.all([
@@ -110,7 +127,6 @@ const installedProjectIds: Ref<string[] | null> = ref(null)
 const instanceHideInstalled = ref(false)
 const newlyInstalled = ref<string[]>([])
 const isServerInstance = ref(false)
-const isFromWorlds = computed(() => route.query.from === 'worlds')
 
 if (isFromWorlds.value && route.params.projectType !== 'server') {
 	router.replace({
@@ -119,16 +135,26 @@ if (isFromWorlds.value && route.params.projectType !== 'server') {
 	})
 }
 
+enforceSetupModpackRoute(route.params.projectType as string | undefined)
+
 const allInstalledIds = computed(
 	() => new Set([...newlyInstalled.value, ...(installedProjectIds.value ?? [])]),
 )
 
-const PERSISTENT_QUERY_PARAMS = ['i', 'ai', 'from']
+watchServerContextChanges()
 
 await initInstanceContext()
 
 async function initInstanceContext() {
-	debugLog('initInstanceContext', { queryI: route.query.i, queryAi: route.query.ai })
+	debugLog('initInstanceContext', {
+		queryI: route.query.i,
+		queryAi: route.query.ai,
+		querySid: route.query.sid,
+		queryWid: route.query.wid,
+		queryFrom: route.query.from,
+	})
+	await initServerContext()
+
 	if (route.query.i) {
 		instance.value = (await getInstance(route.query.i as string).catch(handleError)) ?? null
 		debugLog('instance loaded', {
@@ -137,9 +163,6 @@ async function initInstanceContext() {
 			gameVersion: instance.value?.game_version,
 		})
 
-		// Load installed project IDs in background — the page and initial search render immediately.
-		// When this resolves, instanceFilters recomputes and triggers a search refresh
-		// that applies the "hide installed" negative filters and marks installed badges.
 		if (route.query.from === 'worlds') {
 			get_profile_worlds(route.query.i as string)
 				.then((worlds) => {
@@ -172,7 +195,7 @@ async function initInstanceContext() {
 		}
 	}
 
-	if (route.query.ai && !(projectTypes.value.length === 1 && projectTypes.value[0] === 'modpack')) {
+	if (route.query.ai && !(route.params.projectType === 'modpack')) {
 		debugLog('setting instanceHideInstalled from query', route.query.ai)
 		instanceHideInstalled.value = route.query.ai === 'true'
 	}
@@ -180,37 +203,22 @@ async function initInstanceContext() {
 
 const instanceFilters = computed(() => {
 	const filters = []
-	debugLog('instanceFilters recomputing', {
-		hasInstance: !!instance.value,
-		isServer: isServerInstance.value,
-		hideInstalled: instanceHideInstalled.value,
-	})
 
 	if (instance.value) {
 		const gameVersion = instance.value.game_version
 		if (gameVersion) {
-			filters.push({
-				type: 'game_version',
-				option: gameVersion,
-			})
+			filters.push({ type: 'game_version', option: gameVersion })
 		}
 
 		const platform = instance.value.loader
-
 		const supportedModLoaders = ['fabric', 'forge', 'quilt', 'neoforge']
 
-		if (platform && projectTypes.value.includes('mod') && supportedModLoaders.includes(platform)) {
-			filters.push({
-				type: 'mod_loader',
-				option: platform,
-			})
+		if (platform && projectType.value === 'mod' && supportedModLoaders.includes(platform)) {
+			filters.push({ type: 'mod_loader', option: platform })
 		}
 
 		if (isServerInstance.value) {
-			filters.push({
-				type: 'environment',
-				option: 'client',
-			})
+			filters.push({ type: 'environment', option: 'client' })
 		}
 
 		if (
@@ -218,60 +226,58 @@ const instanceFilters = computed(() => {
 			(installedProjectIds.value || newlyInstalled.value.length > 0)
 		) {
 			const allInstalled = [...(installedProjectIds.value ?? []), ...newlyInstalled.value]
-
 			allInstalled
-				.map((x) => ({
-					type: 'project_id',
-					option: `project_id:${x}`,
-					negative: true,
-				}))
+				.map((x) => ({ type: 'project_id', option: `project_id:${x}`, negative: true }))
 				.forEach((x) => filters.push(x))
 		}
 	}
 
-	debugLog('instanceFilters result', filters)
 	return filters
 })
 
-const {
-	// Selections
-	query,
-	currentSortType,
-	currentFilters,
-	toggledGroups,
-	maxResults,
-	currentPage,
-	overriddenProvidedFilterTypes,
-
-	// Lists
-	filters,
-	sortTypes,
-
-	// Computed
-	requestParams,
-
-	// Functions
-	createPageParams,
-} = useSearch(projectTypes, tags, instanceFilters)
-
-const activeLoader = computed(() => {
-	const filter = currentFilters.value.find((f) => f.type === 'mod_loader')
-	if (filter) return filter.option
-	if (projectType.value === 'datapack' || projectType.value === 'resourcepack') return 'vanilla'
-	return instance.value?.loader ?? null
-})
+const serverHideInstalled = ref(false)
+if (route.query.shi) {
+	serverHideInstalled.value = route.query.shi === 'true'
+}
 
-const activeGameVersion = computed(() => {
-	const filter = currentFilters.value.find((f) => f.type === 'game_version')
-	if (filter) return filter.option
-	return instance.value?.game_version ?? null
-})
+const serverContextFilters = computed(() => {
+	const filters: { type: string; option: string; negative?: boolean }[] = []
+	if (!serverContextServerData.value) return filters
+	const pt = projectType.value
+
+	if (pt !== 'modpack') {
+		const gameVersion = serverContextServerData.value.mc_version
+		if (gameVersion) filters.push({ type: 'game_version', option: gameVersion })
+
+		const platform = serverContextServerData.value.loader?.toLowerCase()
+		if (platform && ['fabric', 'forge', 'quilt', 'neoforge'].includes(platform))
+			filters.push({ type: 'mod_loader', option: platform })
+		if (platform && ['paper', 'purpur'].includes(platform))
+			filters.push({ type: 'plugin_loader', option: platform })
+
+		if (pt === 'mod') filters.push({ type: 'environment', option: 'server' })
+	}
 
-const serverHits = shallowRef<Labrinth.Search.v3.ResultSearchProject[]>([])
-const filteredServerHits = computed(() => {
-	if (!instanceHideInstalled.value || allInstalledIds.value.size === 0) return serverHits.value
-	return serverHits.value.filter((hit) => !allInstalledIds.value.has(hit.project_id))
+	if (pt === 'modpack') {
+		filters.push(
+			{ type: 'environment', option: 'client' },
+			{ type: 'environment', option: 'server' },
+		)
+	}
+
+	if (serverHideInstalled.value && serverContentProjectIds.value.size > 0) {
+		for (const id of serverContentProjectIds.value) {
+			filters.push({ type: 'project_id', option: `project_id:${id}`, negative: true })
+		}
+	}
+
+	return filters
 })
+
+const combinedProvidedFilters = computed(() =>
+	isServerContext.value ? serverContextFilters.value : instanceFilters.value,
+)
+
 const serverPings = shallowRef<Record<string, number | undefined>>({})
 const runningServerProjects = ref<Record<string, string>>({})
 
@@ -304,9 +310,11 @@ async function handleStopServerProject(projectId: string) {
 async function handlePlayServerProject(projectId: string) {
 	debugLog('handlePlayServerProject', projectId)
 	await playServerProject(projectId)
-	checkServerRunningStates(serverHits.value)
+	checkServerRunningStates(lastServerHits.value)
 }
 
+const lastServerHits = shallowRef<Labrinth.Search.v3.ResultSearchProject[]>([])
+
 async function handleAddServerToInstance(project: Labrinth.Search.v3.ResultSearchProject) {
 	debugLog('handleAddServerToInstance', { projectId: project.project_id, name: project.name })
 	const address = getServerAddress(project.minecraft_java_server)
@@ -331,6 +339,22 @@ async function handleAddServerToInstance(project: Labrinth.Search.v3.ResultSearc
 	}
 }
 
+async function pingServerHits(hits: Labrinth.Search.v3.ResultSearchProject[]) {
+	debugLog('pingServerHits', { hitCount: hits.length })
+	const pingsToFetch = hits.filter((hit) => hit.minecraft_java_server?.address)
+	await Promise.all(
+		pingsToFetch.map(async (hit) => {
+			const address = hit.minecraft_java_server!.address!
+			try {
+				const latency = await getServerLatency(address)
+				serverPings.value = { ...serverPings.value, [hit.project_id]: latency }
+			} catch (err) {
+				console.error(`Failed to ping server ${address}:`, err)
+			}
+		}),
+	)
+}
+
 const unlistenProcesses = await process_listener(
 	(e: { event: string; profile_path_id: string }) => {
 		debugLog('process event', e)
@@ -350,45 +374,6 @@ onUnmounted(() => {
 	unlistenProcesses()
 })
 
-const {
-	serverCurrentSortType,
-	serverCurrentFilters,
-	serverToggledGroups,
-	serverSortTypes,
-	serverFilterTypes,
-	serverRequestParams,
-	createServerPageParams,
-} = useServerSearch({ tags, query, maxResults, currentPage })
-
-if (instance.value?.game_version) {
-	const gv = instance.value.game_version
-	const alreadyHasGv = serverCurrentFilters.value.some(
-		(f) => f.type === 'server_game_version' && f.option === gv,
-	)
-	if (!alreadyHasGv) {
-		serverCurrentFilters.value.push({ type: 'server_game_version', option: gv })
-	}
-}
-
-async function pingServerHits(hits: Labrinth.Search.v3.ResultSearchProject[]) {
-	debugLog('pingServerHits', { hitCount: hits.length })
-	const pingsToFetch = hits.filter((hit) => hit.minecraft_java_server?.address)
-	await Promise.all(
-		pingsToFetch.map(async (hit) => {
-			const address = hit.minecraft_java_server!.address!
-			try {
-				const latency = await getServerLatency(address)
-				serverPings.value = { ...serverPings.value, [hit.project_id]: latency }
-			} catch (err) {
-				console.error(`Failed to ping server ${address}:`, err)
-			}
-		}),
-	)
-}
-
-const previousFilterState = ref('')
-let searchVersion = 0
-
 const offline = ref(!navigator.onLine)
 window.addEventListener('offline', () => {
 	debugLog('went offline')
@@ -501,185 +486,21 @@ onBeforeRouteLeave(() => {
 	})
 })
 
-const loading = ref(true)
-
 const projectType = ref<ProjectType>(route.params.projectType as ProjectType)
 
-watch(projectType, () => {
-	loading.value = true
-})
-
-interface SearchResults extends Labrinth.Search.v3.SearchResults {
-	hits: (Labrinth.Search.v3.ResultSearchProject & { installed?: boolean })[]
-}
-
-const results: Ref<SearchResults | null> = shallowRef(null)
-const pageCount = computed(() =>
-	results.value ? Math.ceil(results.value.total_hits / results.value.hits_per_page) : 1,
-)
-
-const effectiveRequestParams = computed(() => {
-	const isServer = projectType.value === 'server'
-	debugLog('effectiveRequestParams computed', { isServer })
-	return isServer ? serverRequestParams.value : requestParams.value
-})
-
-let searchDebounceTimer: ReturnType<typeof setTimeout> | null = null
-
-watch(effectiveRequestParams, () => {
-	if (!route.params.projectType) return
-	debugLog('effectiveRequestParams changed, debouncing search')
-	if (searchDebounceTimer) clearTimeout(searchDebounceTimer)
-	searchDebounceTimer = setTimeout(() => {
-		refreshSearch()
-	}, 200)
-})
-
-async function refreshSearch() {
-	const version = ++searchVersion
-	debugLog('refreshSearch start', { version, projectType: projectType.value })
-
-	try {
-		const isServer = projectType.value === 'server'
-		const searchParams = isServer ? serverRequestParams.value : requestParams.value
-
-		debugLog('searching v3', searchParams)
-		let rawResults = (await get_search_results_v3(searchParams)) as {
-			result: SearchResults
-		} | null
-
-		if (version !== searchVersion) {
-			debugLog('search version stale, discarding', { version, current: searchVersion })
-			return
-		}
-
-		if (!rawResults) {
-			rawResults = {
-				result: {
-					hits: [],
-					total_hits: 0,
-					hits_per_page: maxResults.value,
-					page: 1,
-				},
-			}
-		}
-
-		if (isServer) {
-			const hits = rawResults.result.hits ?? []
-			debugLog('server search results', {
-				hitCount: hits.length,
-				totalHits: rawResults.result.total_hits,
-			})
-			serverHits.value = hits
-			serverPings.value = {}
-			pingServerHits(hits)
-			checkServerRunningStates(hits)
-			results.value = {
-				hits: [],
-				total_hits: rawResults.result.total_hits ?? 0,
-				hits_per_page: maxResults.value,
-				page: 1,
-			}
-		} else {
-			if (instance.value) {
-				const allInstalledIds = new Set([
-					...newlyInstalled.value,
-					...(installedProjectIds.value ?? []),
-				])
-
-				rawResults.result.hits = rawResults.result.hits.map((val) => ({
-					...val,
-					installed: allInstalledIds.has(val.project_id),
-				}))
-			}
-			debugLog('v3 search results', {
-				hitCount: rawResults.result.hits.length,
-				totalHits: rawResults.result.total_hits,
-			})
-			results.value = {
-				...rawResults.result,
-				hits_per_page: maxResults.value,
-			}
-		}
-
-		const currentFilterState = JSON.stringify({
-			query: query.value,
-			filters: toRaw(currentFilters.value),
-			sort: toRaw(currentSortType.value),
-			maxResults: maxResults.value,
-			projectTypes: toRaw(projectTypes.value),
-		})
-
-		if (previousFilterState.value && previousFilterState.value !== currentFilterState) {
-			debugLog('filters changed, resetting to page 1')
-			currentPage.value = 1
-		}
-
-		previousFilterState.value = currentFilterState
-
-		const persistentParams: LocationQuery = {}
-
-		for (const [key, value] of Object.entries(route.query)) {
-			if (PERSISTENT_QUERY_PARAMS.includes(key)) {
-				persistentParams[key] = value
-			}
-		}
-
-		if (instanceHideInstalled.value) {
-			persistentParams.ai = 'true'
-		} else {
-			delete persistentParams.ai
-		}
-
-		const params = {
-			...persistentParams,
-			...(isServer ? createServerPageParams() : createPageParams()),
-		}
-
-		debugLog('updating URL', params)
-		router.replace({ path: route.path, query: params })
-
-		loading.value = false
-		debugLog('refreshSearch complete', { version })
-	} catch (err) {
-		debugLog('refreshSearch error', err)
-		if (version === searchVersion) {
-			loading.value = false
-		}
-	}
-}
-
-async function setPage(newPageNumber: number) {
-	debugLog('setPage', newPageNumber)
-	currentPage.value = newPageNumber
-
-	await onSearchChangeToTop()
-}
-
-const searchWrapper: Ref<HTMLElement | null> = ref(null)
-
-async function onSearchChangeToTop() {
-	await nextTick()
-
-	window.scrollTo({ top: 0, behavior: 'smooth' })
-}
-
-function clearSearch() {
-	debugLog('clearSearch')
-	query.value = ''
-	currentPage.value = 1
-}
-
 watch(
 	() => route.params.projectType as ProjectType,
 	async (newType) => {
-		// Check if the newType is not the same as the current value
+		if (isSetupServerContext.value) {
+			enforceSetupModpackRoute(newType)
+			if (newType !== 'modpack') return
+		}
+
 		if (!newType || newType === projectType.value) return
 
 		debugLog('projectType route param changed', { from: projectType.value, to: newType })
 		projectType.value = newType
 
-		// If instance context was removed (e.g. sidebar browse navigation), reset state
 		if (!route.query.i && instance.value) {
 			debugLog('instance context removed, resetting')
 			instance.value = null
@@ -690,9 +511,6 @@ watch(
 			breadcrumbs.setName('BrowseTitle', formatMessage(messages.discoverContent))
 			breadcrumbs.setContext(null)
 		}
-
-		currentSortType.value = { display: 'Relevance', name: 'relevance' }
-		query.value = ''
 	},
 )
 
@@ -722,19 +540,19 @@ const selectableProjectTypes = computed(() => {
 
 	const params: LocationQuery = {}
 
-	if (route.query.i) {
-		params.i = route.query.i
-	}
-	if (route.query.ai) {
-		params.ai = route.query.ai
-	}
-	if (route.query.from) {
-		params.from = route.query.from
-	}
+	if (route.query.i) params.i = route.query.i
+	if (route.query.ai) params.ai = route.query.ai
+	if (route.query.from) params.from = route.query.from
+	if (route.query.sid) params.sid = route.query.sid
+	if (effectiveServerWorldId.value) params.wid = effectiveServerWorldId.value
 
 	const queryString = new URLSearchParams(params as Record<string, string>).toString()
 	const suffix = queryString ? `?${queryString}` : ''
 
+	if (isSetupServerContext.value) {
+		return [{ label: 'Modpacks', href: `/browse/modpack${suffix}` }]
+	}
+
 	if (isFromWorlds.value) {
 		return [{ label: 'Servers', href: `/browse/server${suffix}` }]
 	}
@@ -756,7 +574,7 @@ const getServerModpackContent = (project: Labrinth.Search.v3.ResultSearchProject
 		if (!project_name) return undefined
 		return {
 			name: project_name,
-			icon: project_icon,
+			icon: project_icon ?? undefined,
 			onclick:
 				project_id !== project.project_id
 					? () => {
@@ -769,18 +587,11 @@ const getServerModpackContent = (project: Labrinth.Search.v3.ResultSearchProject
 	return undefined
 }
 
-const options = ref(null)
+const contextMenuRef = ref(null)
 // @ts-expect-error - no event types
 const handleRightClick = (event, result) => {
 	// @ts-ignore
-	options.value?.showMenu(event, result, [
-		{
-			name: 'open_link',
-		},
-		{
-			name: 'copy_link',
-		},
-	])
+	contextMenuRef.value?.showMenu(event, result, [{ name: 'open_link' }, { name: 'copy_link' }])
 }
 // @ts-expect-error - no event types
 const handleOptionsClick = (args) => {
@@ -796,337 +607,377 @@ const handleOptionsClick = (args) => {
 	}
 }
 
-debugLog('performing initial search')
-await refreshSearch()
+const installContext = computed(() => {
+	if (isServerContext.value && serverContextServerData.value) {
+		return {
+			name: serverContextServerData.value.name,
+			loader: serverContextServerData.value.loader ?? '',
+			gameVersion: serverContextServerData.value.mc_version ?? '',
+			serverId: serverIdQuery.value,
+			upstream: serverContextServerData.value.upstream,
+			iconSrc: null as string | null,
+			isMedal: serverContextServerData.value.is_medal,
+			backUrl: serverBackUrl.value,
+			backLabel: serverBackLabel.value,
+			heading: serverBrowseHeading.value,
+		}
+	}
+	if (instance.value) {
+		return {
+			name: instance.value.name,
+			loader: instance.value.loader,
+			gameVersion: instance.value.game_version,
+			iconSrc: instance.value.icon_path ? convertFileSrc(instance.value.icon_path) : null,
+			backUrl: `/instance/${encodeURIComponent(instance.value.path)}${isFromWorlds.value ? '/worlds' : ''}`,
+			backLabel: 'Back to instance',
+			heading: formatMessage(
+				isFromWorlds.value ? messages.addServersToInstance : messages.installContentToInstance,
+			),
+			warning:
+				isServerInstance.value && !isFromWorlds.value
+					? 'Adding content can break compatibility when joining the server. Any added content will also be lost when you update the server instance content.'
+					: undefined,
+		}
+	}
+	return null
+})
+
+const installingProjectIds = ref<Set<string>>(new Set())
+
+function getCardActions(
+	result: Labrinth.Search.v2.ResultSearchProject | Labrinth.Search.v3.ResultSearchProject,
+	currentProjectType: string,
+): CardAction[] {
+	if (currentProjectType === 'server') {
+		const serverResult = result as Labrinth.Search.v3.ResultSearchProject
+		const isInstalled = allInstalledIds.value.has(serverResult.project_id)
+
+		if (isFromWorlds.value && instance.value) {
+			return [
+				{
+					key: 'add-to-instance',
+					label: formatMessage(isInstalled ? messages.added : messages.addToInstance),
+					icon: isInstalled ? CheckIcon : PlusIcon,
+					disabled: isInstalled,
+					color: 'brand',
+					type: 'outlined',
+					onClick: () => handleAddServerToInstance(serverResult),
+				},
+			]
+		}
+
+		const actions: CardAction[] = []
+
+		actions.push({
+			key: 'add',
+			label: '',
+			icon: isInstalled ? CheckIcon : PlusIcon,
+			disabled: isInstalled,
+			circular: true,
+			tooltip: isInstalled
+				? formatMessage(messages.alreadyAdded)
+				: instance.value
+					? formatMessage(messages.addToInstanceName, { instanceName: instance.value.name })
+					: formatMessage(messages.addServerToInstance),
+			onClick: () => handleAddServerToInstance(serverResult),
+		})
+
+		if (runningServerProjects.value[serverResult.project_id]) {
+			actions.push({
+				key: 'stop',
+				label: formatMessage(commonMessages.stopButton),
+				icon: StopCircleIcon,
+				color: 'red',
+				type: 'outlined',
+				onClick: () => handleStopServerProject(serverResult.project_id),
+			})
+		} else {
+			const isInstalling = (installingServerProjects.value as string[]).includes(
+				serverResult.project_id,
+			)
+			actions.push({
+				key: 'play',
+				label: formatMessage(
+					isInstalling ? commonMessages.installingLabel : commonMessages.playButton,
+				),
+				icon: PlayIcon,
+				disabled: isInstalling,
+				color: 'brand',
+				type: 'outlined',
+				onClick: () => handlePlayServerProject(serverResult.project_id),
+			})
+		}
+
+		return actions
+	}
 
-// Initialize previousFilterState after first search
-previousFilterState.value = JSON.stringify({
-	query: query.value,
-	filters: currentFilters.value,
-	sort: currentSortType.value,
-	maxResults: maxResults.value,
-	projectTypes: projectTypes.value,
+	// Non-server project actions
+	const projectResult = result as (Labrinth.Search.v2.ResultSearchProject &
+		Labrinth.Search.v3.ResultSearchProject) & {
+		installed?: boolean
+		installing?: boolean
+	}
+	const isInstalled =
+		projectResult.installed ||
+		allInstalledIds.value.has(projectResult.project_id || '') ||
+		serverContentProjectIds.value.has(projectResult.project_id || '')
+	const isInstalling = installingProjectIds.value.has(projectResult.project_id)
+
+	if (
+		isServerContext.value &&
+		['modpack', 'mod', 'plugin', 'datapack'].includes(currentProjectType)
+	) {
+		return [
+			{
+				key: 'install',
+				label: isInstalling ? 'Installing' : isInstalled ? 'Installed' : 'Install',
+				icon: isInstalled ? CheckIcon : PlusIcon,
+				disabled: isInstalled || isInstalling,
+				color: 'brand',
+				type: 'outlined',
+				onClick: async () => {
+					installingProjectIds.value.add(projectResult.project_id)
+					try {
+						const didInstall = await installProjectToServer(projectResult)
+						if (didInstall !== false) {
+							onSearchResultInstalled(projectResult.project_id)
+						}
+					} catch (err) {
+						handleError(err as Error)
+					} finally {
+						installingProjectIds.value.delete(projectResult.project_id)
+					}
+				},
+			},
+		]
+	}
+
+	const isModpack = projectResult.project_types?.includes('modpack')
+	const shouldUseInstallIcon = !!instance.value || isModpack
+
+	return [
+		{
+			key: 'install',
+			label: isInstalling
+				? 'Installing'
+				: isInstalled
+					? 'Installed'
+					: shouldUseInstallIcon
+						? 'Install'
+						: 'Add to an instance',
+			icon: isInstalling ? SpinnerIcon : isInstalled ? CheckIcon : PlusIcon,
+			disabled: isInstalled || isInstalling,
+			color: 'brand',
+			type: 'outlined',
+			onClick: async () => {
+				installingProjectIds.value.add(projectResult.project_id)
+				await installVersion(
+					projectResult.project_id,
+					null,
+					instance.value ? instance.value.path : null,
+					'SearchCard',
+					(versionId) => {
+						installingProjectIds.value.delete(projectResult.project_id)
+						if (versionId) {
+							onSearchResultInstalled(projectResult.project_id)
+						}
+					},
+					(profile) => {
+						router.push(`/instance/${profile}`)
+					},
+					{
+						preferredLoader: instance.value?.loader ?? undefined,
+						preferredGameVersion: instance.value?.game_version ?? undefined,
+					},
+				).catch((err) => {
+					installingProjectIds.value.delete(projectResult.project_id)
+					handleError(err)
+				})
+			},
+		},
+	]
+}
+
+function onSearchResultInstalled(id: string) {
+	if (isServerContext.value) {
+		markServerProjectInstalled(id)
+		return
+	}
+	newlyInstalled.value.push(id)
+}
+
+async function search(requestParams: string) {
+	debugLog('searching v3', requestParams)
+	const isServer = projectType.value === 'server'
+
+	const rawResults = await queryClient.fetchQuery({
+		queryKey: ['search', 'v3', requestParams],
+		queryFn: () =>
+			get_search_results_v3(requestParams) as Promise<{
+				result: Labrinth.Search.v3.SearchResults & {
+					hits: (Labrinth.Search.v3.ResultSearchProject & { installed?: boolean })[]
+				}
+			} | null>,
+		staleTime: 30_000,
+	})
+
+	if (!rawResults) {
+		return {
+			projectHits: [],
+			serverHits: [],
+			total_hits: 0,
+			per_page: 20,
+		}
+	}
+
+	if (isServer) {
+		const hits = rawResults.result.hits ?? []
+		lastServerHits.value = hits
+		serverPings.value = {}
+		pingServerHits(hits)
+		checkServerRunningStates(hits)
+		return {
+			projectHits: [],
+			serverHits: hits,
+			total_hits: rawResults.result.total_hits ?? 0,
+			per_page: rawResults.result.hits_per_page,
+		}
+	}
+
+	const hits = rawResults.result.hits.map((hit) => {
+		const mapped = {
+			...hit,
+			title: hit.name,
+			description: hit.summary,
+		} as unknown as Labrinth.Search.v2.ResultSearchProject & { installed?: boolean }
+
+		if (instance.value || isServerContext.value) {
+			const installedIds = instance.value
+				? new Set([...newlyInstalled.value, ...(installedProjectIds.value ?? [])])
+				: serverContentProjectIds.value
+			mapped.installed = installedIds.has(hit.project_id)
+		}
+
+		return mapped
+	})
+
+	return {
+		projectHits: hits,
+		serverHits: [],
+		total_hits: rawResults.result.total_hits,
+		per_page: rawResults.result.hits_per_page,
+	}
+}
+
+const isServerFilterContext = computed(() => isServerContext.value || isServerInstance.value)
+
+const lockedFilterMessages = computed(() => ({
+	gameVersion: formatMessage(
+		isServerFilterContext.value
+			? messages.gameVersionProvidedByServer
+			: messages.gameVersionProvidedByInstance,
+	),
+	modLoader: formatMessage(
+		isServerFilterContext.value
+			? messages.modLoaderProvidedByServer
+			: messages.modLoaderProvidedByInstance,
+	),
+	environment: formatMessage(messages.environmentProvidedByServer),
+	syncButton: formatMessage(messages.syncFilterButton),
+	providedBy: formatMessage(
+		isServerFilterContext.value ? messages.providedByServer : messages.providedByInstance,
+	),
+}))
+
+const searchState = useBrowseSearch({
+	projectType,
+	tags,
+	providedFilters: combinedProvidedFilters,
+	search,
+	persistentQueryParams: ['i', 'ai', 'shi', 'sid', 'wid', 'from'],
+	getExtraQueryParams: () => ({
+		sid: serverIdQuery.value || undefined,
+		wid: effectiveServerWorldId.value || undefined,
+		ai: instanceHideInstalled.value ? 'true' : undefined,
+		shi: serverHideInstalled.value ? 'true' : undefined,
+	}),
+})
+
+if (instance.value?.game_version) {
+	const gv = instance.value.game_version
+	const alreadyHasGv = searchState.serverCurrentFilters.value.some(
+		(f) => f.type === 'server_game_version' && f.option === gv,
+	)
+	if (!alreadyHasGv) {
+		searchState.serverCurrentFilters.value.push({ type: 'server_game_version', option: gv })
+	}
+}
+
+await searchState.refreshSearch()
+
+provideBrowseManager({
+	tags,
+	projectType,
+	...searchState,
+	getProjectLink: (result: Labrinth.Search.v2.ResultSearchProject) => ({
+		path: `/project/${result.project_id ?? result.slug}`,
+		query: instance.value ? { i: instance.value.path } : undefined,
+	}),
+	getServerProjectLink: (result: Labrinth.Search.v3.ResultSearchProject) =>
+		`/project/${result.slug ?? result.project_id}`,
+	selectableProjectTypes,
+	showProjectTypeTabs: computed(() => !isServerContext.value),
+	variant: 'app',
+	getCardActions,
+	installContext,
+	providedFilters: combinedProvidedFilters,
+	hideInstalled: computed({
+		get: () => (isServerContext.value ? serverHideInstalled.value : instanceHideInstalled.value),
+		set: (val: boolean) => {
+			if (isServerContext.value) serverHideInstalled.value = val
+			else instanceHideInstalled.value = val
+		},
+	}),
+	showHideInstalled: computed(
+		() => (isServerContext.value && projectType.value !== 'modpack') || !!instance.value,
+	),
+	hideInstalledLabel: computed(() =>
+		formatMessage(isFromWorlds.value ? messages.hideAddedServers : messages.hideInstalledContent),
+	),
+	onInstalled: onSearchResultInstalled,
+	serverPings,
+	getServerModpackContent,
+	onContextMenu: handleRightClick,
+	offline,
+	lockedFilterMessages,
 })
 </script>
 
 <template>
-	<Teleport v-if="filters" to="#sidebar-teleport-target">
-		<div
-			v-if="instance"
-			class="border-0 border-b-[1px] p-4 last:border-b-0 border-[--brand-gradient-border] border-solid"
-		>
-			<Checkbox
-				v-model="instanceHideInstalled"
-				:label="
-					formatMessage(isFromWorlds ? messages.hideAddedServers : messages.hideInstalledContent)
-				"
-				class="filter-checkbox"
-				@update:model-value="onSearchChangeToTop()"
-				@click.prevent.stop
-			/>
-		</div>
-		<template v-if="projectType === 'server'">
-			<SearchSidebarFilter
-				v-for="filterType in serverFilterTypes.filter((f) => f.options.length > 0)"
-				:key="`server-filter-${filterType.id}`"
-				v-model:selected-filters="serverCurrentFilters"
-				v-model:toggled-groups="serverToggledGroups"
-				:provided-filters="[]"
-				:filter-type="filterType"
-				class="border-0 border-b-[1px] [&:first-child>button]:pt-4 last:border-b-0 border-[--brand-gradient-border] border-solid"
-				button-class="button-animation flex flex-col gap-1 px-4 py-3 w-full bg-transparent cursor-pointer border-none hover:bg-button-bg"
-				content-class="mb-3"
-				inner-panel-class="ml-2 mr-3"
-				:open-by-default="
-					![
-						'server_category_minecraft_server_meta',
-						'server_category_minecraft_server_community',
-						'server_game_version',
-						'server_status',
-					].includes(filterType.id)
-				"
-			>
-				<template #header>
-					<h3 class="text-base m-0">{{ filterType.formatted_name }}</h3>
-				</template>
-			</SearchSidebarFilter>
-		</template>
-		<template v-else>
-			<SearchSidebarFilter
-				v-for="filter in filters.filter((f) => f.display !== 'none')"
-				:key="`filter-${filter.id}`"
-				v-model:selected-filters="currentFilters"
-				v-model:toggled-groups="toggledGroups"
-				v-model:overridden-provided-filter-types="overriddenProvidedFilterTypes"
-				:provided-filters="instanceFilters"
-				:filter-type="filter"
-				class="border-0 border-b-[1px] [&:first-child>button]:pt-4 last:border-b-0 border-[--brand-gradient-border] border-solid"
-				button-class="button-animation flex flex-col gap-1 px-4 py-3 w-full bg-transparent cursor-pointer border-none hover:bg-button-bg"
-				content-class="mb-3"
-				inner-panel-class="ml-2 mr-3"
-				:open-by-default="
-					filter.id.startsWith('category') || filter.id === 'environment' || filter.id === 'license'
-				"
-			>
-				<template #header>
-					<h3 class="text-base m-0">{{ filter.formatted_name }}</h3>
-				</template>
-				<template #locked-game_version>
-					{{
-						formatMessage(
-							isServerInstance
-								? messages.gameVersionProvidedByServer
-								: messages.gameVersionProvidedByInstance,
-						)
-					}}
-				</template>
-				<template #locked-mod_loader>
-					{{
-						formatMessage(
-							isServerInstance
-								? messages.modLoaderProvidedByServer
-								: messages.modLoaderProvidedByInstance,
-						)
-					}}
-				</template>
-				<template #locked-environment>
-					{{ formatMessage(messages.environmentProvidedByServer) }}
-				</template>
-				<template #sync-button> {{ formatMessage(messages.syncFilterButton) }} </template>
-			</SearchSidebarFilter>
-		</template>
-	</Teleport>
-	<div ref="searchWrapper" class="flex flex-col gap-3 p-6">
-		<template v-if="instance">
-			<InstanceIndicator :instance="instance" :back-tab="isFromWorlds ? 'worlds' : undefined" />
-			<h1 class="m-0 mb-1 text-xl">
-				{{
-					formatMessage(
-						isFromWorlds ? messages.addServersToInstance : messages.installContentToInstance,
-					)
-				}}
-			</h1>
-			<Admonition v-if="isServerInstance && !isFromWorlds" type="warning" class="mb-1">
-				Adding content can break compatibility when joining the server. Any added content will also
-				be lost when you update the server instance content.
-			</Admonition>
-		</template>
-		<NavTabs :links="selectableProjectTypes" />
-		<StyledInput
-			v-model="query"
-			:icon="SearchIcon"
-			type="text"
-			autocomplete="off"
-			:placeholder="`Search ${projectType}s...`"
-			clearable
-			wrapper-class="w-full"
-			input-class="h-12"
-			@clear="clearSearch()"
-		/>
-		<div class="flex gap-2">
-			<DropdownSelect
-				v-slot="{ selected }"
-				:model-value="projectType === 'server' ? serverCurrentSortType : currentSortType"
-				class="max-w-[16rem]"
-				name="Sort by"
-				:options="(projectType === 'server' ? serverSortTypes : sortTypes) as any"
-				:display-name="(option: SortType | undefined) => option?.display"
-				@update:model-value="
-					(v: SortType) => {
-						if (projectType === 'server') serverCurrentSortType = v
-						else currentSortType = v
-					}
-				"
-			>
-				<span class="font-semibold text-primary">Sort by: </span>
-				<span class="font-semibold text-secondary">{{ selected }}</span>
-			</DropdownSelect>
-			<DropdownSelect
-				v-slot="{ selected }"
-				v-model="maxResults"
-				name="Max results"
-				:options="[5, 10, 15, 20, 50, 100]"
-				class="max-w-[9rem]"
-			>
-				<span class="font-semibold text-primary">View: </span>
-				<span class="font-semibold text-secondary">{{ selected }}</span>
-			</DropdownSelect>
-			<Pagination :page="currentPage" :count="pageCount" class="ml-auto" @switch-page="setPage" />
-		</div>
-		<SearchFilterControl
-			v-if="projectType === 'server'"
-			v-model:selected-filters="serverCurrentFilters"
-			:filters="serverFilterTypes"
-			:provided-filters="[]"
-			:overridden-provided-filter-types="[]"
-		/>
-		<SearchFilterControl
-			v-else
-			v-model:selected-filters="currentFilters"
-			:filters="filters.filter((f) => f.display !== 'none')"
-			:provided-filters="instanceFilters"
-			:overridden-provided-filter-types="overriddenProvidedFilterTypes"
-			:provided-message="isServerInstance ? messages.providedByServer : messages.providedByInstance"
-		/>
-		<div class="search">
-			<section v-if="loading" class="offline">
-				<LoadingIndicator />
-			</section>
-			<section v-else-if="offline && results?.total_hits === 0" class="offline">
-				You are currently offline. Connect to the internet to browse Modrinth!
-			</section>
-			<section
-				v-else-if="
-					projectType === 'server'
-						? filteredServerHits.length === 0
-						: results && results.hits && results.hits.length === 0
-				"
-				class="offline"
-			>
-				No results found for your query!
-			</section>
-
-			<ProjectCardList v-else :layout="'list'">
-				<template v-if="projectType === 'server'">
-					<ProjectCard
-						v-for="project in filteredServerHits"
-						:key="`server-card-${project.project_id}`"
-						:title="project.name"
-						:icon-url="project.icon_url || undefined"
-						:summary="project.summary"
-						:tags="project.categories"
-						:link="`/project/${project.slug ?? project.project_id}`"
-						:server-online-players="project.minecraft_java_server?.ping?.data?.players_online ?? 0"
-						:server-region="project.minecraft_server?.region"
-						:server-recent-plays="project.minecraft_java_server?.verified_plays_2w ?? 0"
-						:server-modpack-content="getServerModpackContent(project)"
-						:server-ping="serverPings[project.project_id]"
-						:server-status-online="!!project.minecraft_java_server?.ping?.data"
-						:hide-online-players-label="true"
-						:hide-recent-plays-label="true"
-						layout="list"
-						:max-tags="2"
-						is-server-project
-						exclude-loaders
-						@contextmenu.prevent.stop="
-							(event: any) =>
-								handleRightClick(event, { project_types: ['server'], slug: project.slug })
-						"
-					>
-						<template #actions>
-							<div class="flex gap-2">
-								<template v-if="isFromWorlds && instance">
-									<ButtonStyled color="brand" type="outlined">
-										<button
-											:disabled="allInstalledIds.has(project.project_id)"
-											@click.stop="() => handleAddServerToInstance(project)"
-										>
-											<CheckIcon v-if="allInstalledIds.has(project.project_id)" />
-											<PlusIcon v-else />
-											{{
-												formatMessage(
-													allInstalledIds.has(project.project_id)
-														? messages.added
-														: messages.addToInstance,
-												)
-											}}
-										</button>
-									</ButtonStyled>
-								</template>
-								<template v-else>
-									<ButtonStyled circular>
-										<button
-											v-tooltip="
-												allInstalledIds.has(project.project_id)
-													? formatMessage(messages.alreadyAdded)
-													: instance
-														? formatMessage(messages.addToInstanceName, {
-																instanceName: instance.name,
-															})
-														: formatMessage(messages.addServerToInstance)
-											"
-											:disabled="allInstalledIds.has(project.project_id)"
-											@click.stop="() => handleAddServerToInstance(project)"
-										>
-											<CheckIcon v-if="allInstalledIds.has(project.project_id)" />
-											<PlusIcon v-else />
-										</button>
-									</ButtonStyled>
-									<ButtonStyled
-										v-if="runningServerProjects[project.project_id]"
-										color="red"
-										type="outlined"
-									>
-										<button @click="() => handleStopServerProject(project.project_id)">
-											<StopCircleIcon />
-											{{ formatMessage(commonMessages.stopButton) }}
-										</button>
-									</ButtonStyled>
-									<ButtonStyled v-else color="brand" type="outlined">
-										<button
-											:disabled="
-												(installingServerProjects as string[]).includes(project.project_id)
-											"
-											@click="() => handlePlayServerProject(project.project_id)"
-										>
-											<PlayIcon />
-											{{
-												formatMessage(
-													(installingServerProjects as string[]).includes(project.project_id)
-														? commonMessages.installingLabel
-														: commonMessages.playButton,
-												)
-											}}
-										</button>
-									</ButtonStyled>
-								</template>
-							</div>
-						</template>
-					</ProjectCard>
-				</template>
-				<template v-else>
-					<SearchCard
-						v-for="result in results?.hits ?? []"
-						:key="result?.project_id"
-						:project-type="projectType"
-						:project="result"
-						:instance="instance ?? undefined"
-						:active-loader="activeLoader ?? undefined"
-						:active-game-version="activeGameVersion ?? undefined"
-						:categories="[
-							...(categories ?? []).filter(
-								(cat) =>
-									result?.display_categories.includes(cat.name) && cat.project_type === projectType,
-							),
-							...(loaders ?? []).filter(
-								(loader) =>
-									result?.display_categories.includes(loader.name) &&
-									loader.supported_project_types?.includes(projectType),
-							),
-						]"
-						:installed="result.installed || allInstalledIds.has(result.project_id || '')"
-						@install="
-							(id) => {
-								newlyInstalled.push(id)
-							}
-						"
-						@contextmenu.prevent.stop="(event: any) => handleRightClick(event, result)"
-					/>
-				</template>
-
-				<ContextMenu ref="options" @option-clicked="handleOptionsClick">
+	<div class="flex flex-col gap-3 p-6">
+		<BrowsePageLayout>
+			<template #after>
+				<ContextMenu ref="contextMenuRef" @option-clicked="handleOptionsClick">
 					<template #open_link> <GlobeIcon /> Open in Modrinth <ExternalIcon /> </template>
 					<template #copy_link> <ClipboardCopyIcon /> Copy link </template>
 				</ContextMenu>
-			</ProjectCardList>
-			<div class="flex justify-end">
-				<pagination
-					:page="currentPage"
-					:count="pageCount"
-					class="pagination-after"
-					@switch-page="setPage"
-				/>
-			</div>
-		</div>
+			</template>
+		</BrowsePageLayout>
+		<CreationFlowModal
+			v-if="isServerContext && projectType === 'modpack'"
+			ref="serverSetupModalRef"
+			:type="serverFlowFrom === 'reset-server' ? 'reset-server' : 'server-onboarding'"
+			:available-loaders="['vanilla', 'fabric', 'neoforge', 'forge', 'quilt', 'paper', 'purpur']"
+			:show-snapshot-toggle="true"
+			:on-back="onServerFlowBack"
+			:search-modpacks="searchServerModpacks"
+			:get-project-versions="getServerProjectVersions"
+			@hide="() => {}"
+			@browse-modpacks="() => {}"
+			@create="handleServerModpackFlowCreate"
+		/>
+		<Teleport to="#sidebar-teleport-target">
+			<BrowseSidebar />
+		</Teleport>
 	</div>
 </template>
diff --git a/apps/app-frontend/src/pages/hosting/manage/Index.vue b/apps/app-frontend/src/pages/hosting/manage/Index.vue
index fc1015e7a0..1b9eb37ab7 100644
--- a/apps/app-frontend/src/pages/hosting/manage/Index.vue
+++ b/apps/app-frontend/src/pages/hosting/manage/Index.vue
@@ -1,346 +1,80 @@
 <template>
-	<div class="mx-auto w-full max-w-[1280px] px-6 pb-6">
-		<div v-if="isLoading" class="py-8">
-			<LoadingIndicator />
-		</div>
-		<div v-else-if="hasError" class="py-8 text-secondary">Failed to load server.</div>
-		<template v-else>
-			<!-- TODO-SERVERS: make a shared server header component for website and app to share -->
-			<RouterLink
-				to="/hosting/manage"
-				class="breadcrumb goto-link mt-6 mb-4 flex w-fit items-center"
-			>
-				<LeftArrowIcon />
-				All servers
-			</RouterLink>
-			<ContentPageHeader class="mb-4">
-				<template #icon>
-					<ServerIcon
-						:image="
-							server.is_medal
-								? 'https://cdn-raw.modrinth.com/medal_icon.webp'
-								: (serverImage ?? undefined)
-						"
-					/>
-				</template>
-				<template #title>
-					{{ server.name || 'Server' }}
-				</template>
-				<template #stats>
-					<div
-						v-if="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="server.loader" class="flex items-center gap-2 font-medium capitalize">
-							<LoaderIcon :loader="server.loader" class="flex shrink-0 [&&]:size-5" />
-							{{ server.loader }} {{ server.mc_version }}
-						</div>
-
-						<div
-							v-if="server.loader && server.net?.domain"
-							class="h-1.5 w-1.5 rounded-full bg-surface-5"
-						/>
-
-						<div
-							v-if="server.net?.domain"
-							v-tooltip="'Copy server address'"
-							class="flex cursor-pointer items-center gap-2 font-medium hover:underline"
-							@click="copyServerAddress"
-						>
-							<LinkIcon class="flex size-5 shrink-0" />
-							{{ server.net.domain }}.modrinth.gg
-						</div>
-
-						<div
-							v-if="serverProject && (server.loader || server.net?.domain)"
-							class="h-1.5 w-1.5 rounded-full bg-surface-5"
-						/>
-
-						<div v-if="serverProject" class="flex items-center gap-1.5 font-medium text-primary">
-							Linked to
-							<Avatar :src="serverProject.icon_url" :alt="serverProject.title" size="24px" />
-							<RouterLink :to="serverProjectLink" class="truncate text-primary hover:underline">
-								{{ serverProject.title }}
-							</RouterLink>
-						</div>
-					</div>
-				</template>
-				<template #actions>
-					<ButtonStyled circular size="large">
-						<button v-tooltip="'Server settings'" @click="openServerSettingsModal">
-							<SettingsIcon />
-						</button>
-					</ButtonStyled>
-				</template>
-			</ContentPageHeader>
-
-			<div class="mb-4">
-				<NavTabs :links="tabs" />
-			</div>
-
-			<div class="pt-2">
-				<Suspense>
-					<ServerSettingsModal ref="serverSettingsModal" />
-				</Suspense>
+	<div class="h-full w-full py-6">
+		<ServersManageRootLayout
+			:server-id="serverId"
+			:reload-page="() => router.go(0)"
+			:resolve-viewer="resolveViewer"
+			:show-uptime="false"
+			:show-copy-id-action="themeStore.devMode"
+			:navigate-to-billing="() => router.push('/settings/billing')"
+			:navigate-to-servers="() => router.push('/hosting/manage')"
+			:browse-modpacks="
+				({ serverId: sid, worldId: wid, from }) => {
+					router.push({
+						path: '/browse/modpack',
+						query: { sid, wid: wid ?? undefined, from },
+					})
+				}
+			"
+			:browse-content="
+				({ serverId: sid, worldId: wid, type }) => {
+					router.push({
+						path: `/browse/${type}`,
+						query: { sid, wid: wid ?? undefined },
+					})
+				}
+			"
+		>
+			<template #default="{ onReinstall, onReinstallFailed }">
 				<RouterView v-slot="{ Component }">
 					<template v-if="Component">
 						<Suspense>
-							<component :is="Component" />
+							<component
+								:is="Component"
+								@reinstall="onReinstall"
+								@reinstall-failed="onReinstallFailed"
+							/>
 							<template #fallback>
 								<LoadingIndicator />
 							</template>
 						</Suspense>
 					</template>
 				</RouterView>
-			</div>
-		</template>
+			</template>
+		</ServersManageRootLayout>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { type Archon, clearNodeAuthState, setNodeAuthState } from '@modrinth/api-client'
-import {
-	BoxesIcon,
-	DatabaseBackupIcon,
-	FolderOpenIcon,
-	LeftArrowIcon,
-	LinkIcon,
-	SettingsIcon,
-} from '@modrinth/assets'
-import {
-	Avatar,
-	type BusyReason,
-	ButtonStyled,
-	ContentPageHeader,
-	defineMessage,
-	injectModrinthClient,
-	injectNotificationManager,
-	LoaderIcon,
-	LoadingIndicator,
-	NavTabs,
-	provideModrinthServerContext,
-	ServerIcon,
-} from '@modrinth/ui'
-import { useQuery, useQueryClient } from '@tanstack/vue-query'
-import { computed, onUnmounted, reactive, ref, watch } from 'vue'
-import { RouterLink, useRoute } from 'vue-router'
+import type { Labrinth } from '@modrinth/api-client'
+import { LoadingIndicator, ServersManageRootLayout } from '@modrinth/ui'
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 
-import ServerSettingsModal from '@/components/ui/modal/ServerSettingsModal.vue'
+import { get_user } from '@/helpers/cache'
+import { get as getCreds } from '@/helpers/mr_auth'
+import { useTheming } from '@/store/theme'
 
 const route = useRoute()
-const client = injectModrinthClient()
-const queryClient = useQueryClient()
-const { addNotification } = injectNotificationManager()
+const router = useRouter()
+const themeStore = useTheming()
 
 const serverId = computed(() => {
 	const rawId = route.params.id
 	return Array.isArray(rawId) ? rawId[0] : (rawId ?? '')
 })
 
-const basePath = computed(() => `/hosting/manage/${encodeURIComponent(serverId.value)}`)
-
-const server = ref<Archon.Servers.v0.Server>({} as Archon.Servers.v0.Server)
-const worldId = ref<string | null>(null)
-const serverSettingsModal = ref<InstanceType<typeof ServerSettingsModal> | null>(null)
-
-const serverQuery = useQuery({
-	queryKey: computed(() => ['servers', 'detail', serverId.value]),
-	queryFn: () => client.archon.servers_v0.get(serverId.value),
-	enabled: computed(() => !!serverId.value),
-})
-
-const serverV1Query = useQuery({
-	queryKey: computed(() => ['servers', 'v1', 'detail', serverId.value]),
-	queryFn: () => client.archon.servers_v1.get(serverId.value),
-	enabled: computed(() => !!serverId.value),
-})
-
-watch(
-	() => serverQuery.data.value,
-	(serverData) => {
-		if (serverData) {
-			server.value = serverData
-		}
-	},
-	{ immediate: true },
-)
-
-watch(
-	() => serverV1Query.data.value,
-	(serverData) => {
-		if (!serverData) return
-		const activeWorld = serverData.worlds.find((world) => world.is_active)
-		worldId.value = activeWorld?.id ?? serverData.worlds[0]?.id ?? null
-	},
-	{ immediate: true },
-)
-
-const isLoading = computed(() => serverQuery.isPending.value || serverV1Query.isPending.value)
-const hasError = computed(() => !!serverQuery.error.value || !!serverV1Query.error.value)
-
-const { data: serverProject } = useQuery({
-	queryKey: computed(() => ['server-project', server.value.upstream?.project_id]),
-	queryFn: async () => {
-		if (!server.value.upstream?.project_id) return null
-		return await client.labrinth.projects_v2.get(server.value.upstream.project_id)
-	},
-	enabled: computed(() => !!server.value.upstream?.project_id),
-})
-
-const serverProjectLink = computed(() => {
-	if (!serverProject.value) return ''
-	return `/project/${serverProject.value.slug ?? serverProject.value.id}`
-})
-
-const isConnected = ref(true)
-const powerState = ref<Archon.Websocket.v0.PowerState>('stopped')
-const isServerRunning = computed(() => powerState.value === 'running')
-const backupsState = reactive(new Map())
-const isSyncingContent = ref(false)
-
-const busyReasons = computed<BusyReason[]>(() => {
-	const reasons: BusyReason[] = []
-	if (server.value?.status === 'installing') {
-		reasons.push({
-			reason: defineMessage({
-				id: 'servers.busy.installing',
-				defaultMessage: 'Server is installing',
-			}),
-		})
-	}
-	if (isSyncingContent.value) {
-		reasons.push({
-			reason: defineMessage({
-				id: 'servers.busy.syncing-content',
-				defaultMessage: 'Content sync in progress',
-			}),
-		})
+async function resolveViewer(): Promise<{ userId: string | null; userRole: string | null }> {
+	const credentials = await getCreds().catch(() => null)
+	if (!credentials?.user_id) {
+		return { userId: null, userRole: null }
 	}
-	return reasons
-})
-
-const fsAuth = ref<{ url: string; token: string } | null>(null)
-const fsOps = ref<Archon.Websocket.v0.FilesystemOperation[]>([])
-const fsQueuedOps = ref<Archon.Websocket.v0.QueuedFilesystemOp[]>([])
-
-async function processImageBlob(blob: Blob, size: number): Promise<string> {
-	return new Promise((resolve) => {
-		const canvas = document.createElement('canvas')
-		const ctx = canvas.getContext('2d')!
-		const img = new Image()
-		img.onload = () => {
-			canvas.width = size
-			canvas.height = size
-			ctx.drawImage(img, 0, 0, size, size)
-			const dataURL = canvas.toDataURL('image/png')
-			URL.revokeObjectURL(img.src)
-			resolve(dataURL)
-		}
-		img.src = URL.createObjectURL(blob)
-	})
-}
-
-const { data: serverImage } = useQuery({
-	queryKey: computed(() => ['server-icon', serverId.value, serverProject.value?.icon_url ?? null]),
-	queryFn: async (): Promise<string | null> => {
-		if (!serverId.value || server.value.status !== 'available') return null
 
-		try {
-			const blob = await client.kyros.files_v0.downloadFile('/server-icon-original.png')
-			return await processImageBlob(blob, 512)
-		} catch {
-			if (serverProject.value?.icon_url) {
-				return serverProject.value.icon_url
-			}
-			return null
-		}
-	},
-	enabled: computed(() => !!serverId.value && server.value.status === 'available'),
-})
-
-async function refreshFsAuth() {
-	if (!serverId.value) {
-		fsAuth.value = null
-		return
+	const user = await get_user(credentials.user_id, 'bypass').catch(() => null)
+	const typedUser = user as Labrinth.Users.v2.User | null
+	return {
+		userId: credentials.user_id,
+		userRole: typedUser?.role ?? null,
 	}
-	fsAuth.value = await queryClient.fetchQuery({
-		queryKey: ['servers', 'filesystem-auth', serverId.value],
-		queryFn: () => client.archon.servers_v0.getFilesystemAuth(serverId.value),
-	})
-}
-
-function markBackupCancelled(backupId: string) {
-	backupsState.delete(backupId)
-}
-
-function copyServerAddress() {
-	if (!server.value?.net?.domain) return
-	navigator.clipboard.writeText(server.value.net.domain + '.modrinth.gg')
-	addNotification({
-		title: 'Server address copied',
-		text: "Your server's address has been copied to your clipboard.",
-		type: 'success',
-	})
-}
-
-function openServerSettingsModal() {
-	if (!serverId.value) return
-	serverSettingsModal.value?.show({ serverId: serverId.value })
 }
-
-watch(
-	() => serverId.value,
-	() => {
-		fsAuth.value = null
-		void refreshFsAuth().catch(() => {})
-	},
-	{ immediate: true },
-)
-
-provideModrinthServerContext({
-	get serverId() {
-		return serverId.value
-	},
-	worldId,
-	server,
-	isConnected,
-	powerState,
-	isServerRunning,
-	backupsState,
-	markBackupCancelled,
-	isSyncingContent,
-	busyReasons,
-	fsAuth,
-	fsOps,
-	fsQueuedOps,
-	refreshFsAuth,
-})
-
-setNodeAuthState(() => fsAuth.value, refreshFsAuth)
-
-onUnmounted(() => {
-	clearNodeAuthState()
-})
-
-const tabs = computed(() => [
-	{
-		label: 'Content',
-		href: `${basePath.value}/content`,
-		icon: BoxesIcon,
-	},
-	{
-		label: 'Files',
-		href: `${basePath.value}/files`,
-		icon: FolderOpenIcon,
-	},
-	{
-		label: 'Backups',
-		href: `${basePath.value}/backups`,
-		icon: DatabaseBackupIcon,
-	},
-])
 </script>
diff --git a/apps/app-frontend/src/pages/hosting/manage/Overview.vue b/apps/app-frontend/src/pages/hosting/manage/Overview.vue
new file mode 100644
index 0000000000..7b29977bb4
--- /dev/null
+++ b/apps/app-frontend/src/pages/hosting/manage/Overview.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { ServersManageOverviewPage } from '@modrinth/ui'
+</script>
+
+<template>
+	<ServersManageOverviewPage />
+</template>
diff --git a/apps/app-frontend/src/pages/hosting/manage/index.js b/apps/app-frontend/src/pages/hosting/manage/index.js
index 127c22afce..50052e3f9e 100644
--- a/apps/app-frontend/src/pages/hosting/manage/index.js
+++ b/apps/app-frontend/src/pages/hosting/manage/index.js
@@ -2,5 +2,6 @@ import Backups from './Backups.vue'
 import Content from './Content.vue'
 import Files from './Files.vue'
 import Index from './Index.vue'
+import Overview from './Overview.vue'
 
-export { Backups, Content, Files, Index }
+export { Backups, Content, Files, Index, Overview }
diff --git a/apps/app-frontend/src/pages/instance/Logs.vue b/apps/app-frontend/src/pages/instance/Logs.vue
index 38fba56b0a..682f3596f2 100644
--- a/apps/app-frontend/src/pages/instance/Logs.vue
+++ b/apps/app-frontend/src/pages/instance/Logs.vue
@@ -1,122 +1,19 @@
 <template>
-	<Card class="log-card">
-		<div class="button-row">
-			<DropdownSelect
-				v-model="selectedLogIndex"
-				:default-value="0"
-				name="Log date"
-				:options="logs.map((_, index) => index)"
-				:display-name="(option) => logs[option]?.name"
-				:disabled="logs.length === 0"
-			/>
-			<div class="button-group">
-				<Button :disabled="!logs[selectedLogIndex]" @click="copyLog()">
-					<ClipboardCopyIcon v-if="!copied" />
-					<CheckIcon v-else />
-					{{ copied ? 'Copied' : 'Copy' }}
-				</Button>
-				<Button color="primary" :disabled="offline || !logs[selectedLogIndex]" @click="share">
-					<ShareIcon aria-hidden="true" />
-					Share
-				</Button>
-				<Button
-					v-if="logs[selectedLogIndex] && logs[selectedLogIndex].live === true"
-					@click="clearLiveLog()"
-				>
-					<TrashIcon aria-hidden="true" />
-					Clear
-				</Button>
-
-				<Button
-					v-else
-					:disabled="!logs[selectedLogIndex] || logs[selectedLogIndex].live === true"
-					color="danger"
-					@click="deleteLog()"
-				>
-					<TrashIcon aria-hidden="true" />
-					Delete
-				</Button>
-			</div>
-		</div>
-		<div class="button-row">
-			<StyledInput
-				id="text-filter"
-				v-model="searchFilter"
-				autocomplete="off"
-				:icon="SearchIcon"
-				type="search"
-				input-class="text-filter"
-				placeholder="Type to filter logs..."
-			/>
-			<div class="filter-group">
-				<Checkbox
-					v-for="level in levels"
-					:key="level.toLowerCase()"
-					v-model="levelFilters[level.toLowerCase()]"
-					class="filter-checkbox"
-				>
-					{{ level }}
-				</Checkbox>
-			</div>
-		</div>
-		<div class="log-text">
-			<RecycleScroller
-				v-slot="{ item }"
-				ref="logContainer"
-				class="scroller"
-				:items="displayProcessedLogs"
-				direction="vertical"
-				:item-size="20"
-				key-field="id"
-				buffer="200"
-			>
-				<div class="user no-wrap">
-					<span :style="{ color: item.prefixColor, 'font-weight': item.weight }">{{
-						item.prefix
-					}}</span>
-					<span :style="{ color: item.textColor }">{{ item.text }}</span>
-				</div>
-			</RecycleScroller>
-		</div>
-		<ShareModalWrapper
-			ref="shareModal"
-			header="Share Log"
-			share-title="Instance Log"
-			share-text="Check out this log from an instance on the Modrinth App"
-			:open-in-new-tab="false"
-			link
-		/>
-	</Card>
+	<div class="flex flex-col gap-4 h-full">
+		<ConsolePageLayout />
+	</div>
 </template>
 
 <script setup>
-import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
-
-import { CheckIcon, ClipboardCopyIcon, SearchIcon, ShareIcon, TrashIcon } from '@modrinth/assets'
-import {
-	Button,
-	Card,
-	Checkbox,
-	DropdownSelect,
-	injectNotificationManager,
-	StyledInput,
-} from '@modrinth/ui'
+import { ConsolePageLayout, injectNotificationManager, provideConsoleManager } from '@modrinth/ui'
 import dayjs from 'dayjs'
 import isToday from 'dayjs/plugin/isToday'
 import isYesterday from 'dayjs/plugin/isYesterday'
-import { ofetch } from 'ofetch'
-import { computed, nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, onUnmounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
-import { RecycleScroller } from 'vue-virtual-scroller'
 
-import ShareModalWrapper from '@/components/ui/modal/ShareModalWrapper.vue'
 import { process_listener } from '@/helpers/events.js'
-import {
-	delete_logs_by_filename,
-	get_latest_log_cursor,
-	get_logs,
-	get_output_by_filename,
-} from '@/helpers/logs.js'
+import { get_latest_log_cursor, get_logs, get_output_by_filename } from '@/helpers/logs.js'
 import { get_by_profile_path } from '@/helpers/process.js'
 
 dayjs.extend(isToday)
@@ -165,77 +62,8 @@ const emptyText = ['No live game detected.', 'Start your game to proceed.']
 const logs = ref([])
 await setLogs()
 
-const logsColored = true
-
 const selectedLogIndex = ref(0)
-const copied = ref(false)
-const logContainer = ref(null)
 const interval = ref(null)
-const userScrolled = ref(false)
-const isAutoScrolling = ref(false)
-const shareModal = ref(null)
-
-const levels = ['Comment', 'Error', 'Warn', 'Info', 'Debug', 'Trace']
-const levelFilters = ref({})
-levels.forEach((level) => {
-	levelFilters.value[level.toLowerCase()] = true
-})
-const searchFilter = ref('')
-
-function shouldDisplay(processedLine) {
-	if (!processedLine.level) {
-		return true
-	}
-
-	if (!levelFilters.value[processedLine.level.toLowerCase()]) {
-		return false
-	}
-	if (searchFilter.value !== '') {
-		if (!processedLine.text.toLowerCase().includes(searchFilter.value.toLowerCase())) {
-			return false
-		}
-	}
-	return true
-}
-
-// Selects from the processed logs which ones should be displayed (shouldDisplay)
-// In addition, splits each line by \n. Each split line is given the same properties as the original line
-const displayProcessedLogs = computed(() => {
-	return processedLogs.value.filter((l) => shouldDisplay(l))
-})
-
-const processedLogs = computed(() => {
-	// split based on newline and timestamp lookahead
-	// (not just newline because of multiline messages)
-	const splitPattern = /\n(?=(?:#|\[\d\d:\d\d:\d\d\]))/
-
-	const lines = logs.value[selectedLogIndex.value]?.stdout.split(splitPattern) || []
-	const processed = []
-	let id = 0
-	for (let i = 0; i < lines.length; i++) {
-		// Then split off of \n.
-		// Lines that are not the first have prefix = null
-		const text = getLineText(lines[i])
-		const prefix = getLinePrefix(lines[i])
-		const prefixColor = getLineColor(lines[i], true)
-		const textColor = getLineColor(lines[i], false)
-		const weight = getLineWeight(lines[i])
-		const level = getLineLevel(lines[i])
-		text.split('\n').forEach((line, index) => {
-			processed.push({
-				id: id,
-				text: line,
-				prefix: index === 0 ? prefix : null,
-				prefixColor: prefixColor,
-				textColor: textColor,
-				weight: weight,
-				level: level,
-			})
-			id += 1
-		})
-	}
-	return processed
-})
 
 async function getLiveStdLog() {
 	if (route.params.id) {
@@ -263,7 +91,6 @@ async function getLiveStdLog() {
 async function getLogs() {
 	return (await get_logs(props.instance.path, true).catch(handleError))
 		.filter(
-			// filter out latest_stdout.log or anything without .log in it
 			(log) =>
 				log.filename !== 'latest_stdout.log' &&
 				log.filename !== 'latest_stdout' &&
@@ -282,31 +109,32 @@ async function setLogs() {
 	logs.value = [liveStd, ...allLogs]
 }
 
-const copyLog = () => {
-	if (logs.value.length > 0 && logs.value[selectedLogIndex.value]) {
-		navigator.clipboard.writeText(logs.value[selectedLogIndex.value].stdout)
-		copied.value = true
-	}
-}
-
-const share = async () => {
-	if (logs.value.length > 0 && logs.value[selectedLogIndex.value]) {
-		const url = await ofetch('https://api.mclo.gs/1/log', {
-			method: 'POST',
-			headers: {
-				'Content-Type': 'application/x-www-form-urlencoded',
-			},
-			body: `content=${encodeURIComponent(logs.value[selectedLogIndex.value].stdout)}`,
-		}).catch(handleError)
+const logLines = computed(() => {
+	const log = logs.value[selectedLogIndex.value]
+	return log?.stdout?.split('\n').filter(Boolean) ?? []
+})
 
-		shareModal.value.show(url.url)
-	}
-}
+const logSources = computed(() =>
+	logs.value.map((l, i) => ({
+		id: String(i),
+		name: l?.name ?? `Log ${i}`,
+		live: l?.live ?? false,
+	})),
+)
+
+provideConsoleManager({
+	logLines,
+	logSources,
+	activeLogSourceIndex: selectedLogIndex,
+	showCommandInput: false,
+	loading: ref(false),
+	onClear: () => {
+		currentLiveLog.value = ''
+	},
+	shareDisabled: computed(() => props.offline),
+})
 
 watch(selectedLogIndex, async (newIndex) => {
-	copied.value = false
-	userScrolled.value = false
-
 	if (logs.value.length > 1 && newIndex !== 0) {
 		logs.value[newIndex].stdout = 'Loading...'
 		logs.value[newIndex].stdout = await get_output_by_filename(
@@ -323,137 +151,9 @@ if (logs.value.length > 1 && !props.playing) {
 	selectedLogIndex.value = 0
 }
 
-const deleteLog = async () => {
-	if (logs.value[selectedLogIndex.value] && selectedLogIndex.value !== 0) {
-		const deleteIndex = selectedLogIndex.value
-		selectedLogIndex.value = deleteIndex - 1
-		await delete_logs_by_filename(
-			props.instance.path,
-			logs.value[deleteIndex].log_type,
-			logs.value[deleteIndex].filename,
-		).catch(handleError)
-		await setLogs()
-	}
-}
-
-const clearLiveLog = async () => {
-	currentLiveLog.value = ''
-	// does not reset cursor
-}
-
-const isLineLevel = (text, level) => {
-	if ((text.includes('/INFO') || text.includes('[System] [CHAT]')) && level === 'info') {
-		return true
-	}
-
-	if (text.includes('/WARN') && level === 'warn') {
-		return true
-	}
-
-	if (text.includes('/DEBUG') && level === 'debug') {
-		return true
-	}
-
-	if (text.includes('/TRACE') && level === 'trace') {
-		return true
-	}
-
-	const errorTriggers = ['/ERROR', 'Exception:', ':?]', 'Error', '[thread', '	at']
-	if (level === 'error') {
-		for (const trigger of errorTriggers) {
-			if (text.includes(trigger)) return true
-		}
-	}
-
-	if (text.trim()[0] === '#' && level === 'comment') {
-		return true
-	}
-	return false
-}
-
-const getLineWeight = (text) => {
-	if (
-		!logsColored ||
-		isLineLevel(text, 'info') ||
-		isLineLevel(text, 'debug') ||
-		isLineLevel(text, 'trace')
-	) {
-		return 'normal'
-	}
-
-	if (isLineLevel(text, 'error') || isLineLevel(text, 'warn')) {
-		return 'bold'
-	}
-}
-
-const getLineLevel = (text) => {
-	for (const level of levels) {
-		if (isLineLevel(text, level.toLowerCase())) {
-			return level
-		}
-	}
-}
-
-const getLineColor = (text, prefix) => {
-	if (isLineLevel(text, 'comment')) {
-		return 'var(--color-green)'
-	}
-
-	if (!logsColored || text.includes('[System] [CHAT]')) {
-		return 'var(--color-white)'
-	}
-	if (
-		(isLineLevel(text, 'info') || isLineLevel(text, 'debug') || isLineLevel(text, 'trace')) &&
-		prefix
-	) {
-		return 'var(--color-blue)'
-	}
-	if (isLineLevel(text, 'warn')) {
-		return 'var(--color-orange)'
-	}
-	if (isLineLevel(text, 'error')) {
-		return 'var(--color-red)'
-	}
-}
-
-const getLinePrefix = (text) => {
-	if (text.includes(']:')) {
-		return text.split(']:')[0] + ']:'
-	}
-}
-
-const getLineText = (text) => {
-	if (text.includes(']:')) {
-		if (text.split(']:').length > 2) {
-			return text.split(']:').slice(1).join(']:')
-		}
-		return text.split(']:')[1]
-	} else {
-		return text
-	}
-}
-
-function handleUserScroll() {
-	if (!isAutoScrolling.value) {
-		userScrolled.value = true
-	}
-}
-
 interval.value = setInterval(async () => {
-	if (logs.value.length > 0) {
+	if (logs.value.length > 0 && selectedLogIndex.value === 0) {
 		logs.value[0] = await getLiveStdLog()
-		const scroll = logContainer.value.getScroll()
-
-		// Allow resetting of userScrolled if the user scrolls to the bottom
-		if (selectedLogIndex.value === 0) {
-			if (scroll.end >= logContainer.value.$el.scrollHeight - 10) userScrolled.value = false
-			if (!userScrolled.value) {
-				await nextTick()
-				isAutoScrolling.value = true
-				logContainer.value.scrollToItem(displayProcessedLogs.value.length - 1)
-				setTimeout(() => (isAutoScrolling.value = false), 50)
-			}
-		}
 	}
 }, 250)
 
@@ -466,106 +166,13 @@ const unlistenProcesses = await process_listener(async (e) => {
 	if (e.event === 'finished') {
 		currentLiveLog.value = ''
 		currentLiveLogCursor.value = 0
-		userScrolled.value = false
 		await setLogs()
 		selectedLogIndex.value = 1
 	}
 })
 
-onMounted(() => {
-	logContainer.value.$el.addEventListener('scroll', handleUserScroll)
-})
-
-onBeforeUnmount(() => {
-	logContainer.value.$el.removeEventListener('scroll', handleUserScroll)
-})
 onUnmounted(() => {
 	clearInterval(interval.value)
 	unlistenProcesses()
 })
 </script>
-
-<style scoped lang="scss">
-.log-card {
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-	height: 100vh;
-}
-
-.button-row {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	gap: 0.5rem;
-}
-
-.button-group {
-	display: flex;
-	flex-direction: row;
-	gap: 0.5rem;
-}
-
-.log-text {
-	width: 100%;
-	height: 100%;
-	font-family: var(--mono-font);
-	background-color: var(--color-accent-contrast);
-	color: var(--color-contrast);
-	border-radius: var(--radius-lg);
-	padding-top: 1.5rem;
-	overflow-x: auto; /* Enables horizontal scrolling */
-	overflow-y: hidden; /* Disables vertical scrolling on this wrapper */
-	white-space: nowrap; /* Keeps content on a single line */
-	white-space: normal;
-	color-scheme: dark;
-}
-
-.filter-checkbox {
-	margin-bottom: 0.3rem;
-	font-size: 1rem;
-
-	svg {
-		display: flex;
-		align-self: center;
-		justify-self: center;
-	}
-}
-
-.filter-group {
-	display: flex;
-	padding: 0.6rem;
-	flex-direction: row;
-	overflow: auto;
-	gap: 0.5rem;
-
-	&::-webkit-scrollbar-track,
-	&::-webkit-scrollbar-thumb {
-		border-radius: 10px;
-	}
-}
-
-:deep(.vue-recycle-scroller__item-wrapper) {
-	overflow: visible; /* Enables horizontal scrolling */
-}
-
-:deep(.vue-recycle-scroller) {
-	&::-webkit-scrollbar-corner {
-		background-color: var(--color-bg);
-		border-radius: 0 0 10px 0;
-	}
-}
-
-.scroller {
-	height: 100%;
-}
-
-.user {
-	height: 32%;
-	padding: 0 1.5rem;
-	display: flex;
-
-	align-items: center;
-	user-select: text;
-}
-</style>
diff --git a/apps/app-frontend/src/pages/instance/Worlds.vue b/apps/app-frontend/src/pages/instance/Worlds.vue
index e8b79f4380..861eba0188 100644
--- a/apps/app-frontend/src/pages/instance/Worlds.vue
+++ b/apps/app-frontend/src/pages/instance/Worlds.vue
@@ -357,9 +357,7 @@ const MAX_LINUX_REFRESHES = 3
 const isLinux = platform() === 'linux'
 const linuxRefreshCount = ref(0)
 
-const protocolVersion = ref<ProtocolVersion | null>(
-	await get_profile_protocol_version(instance.value.path),
-)
+const protocolVersion = ref<ProtocolVersion | null>(null)
 const managedServerName = ref<string | null>(null)
 const managedServerAddress = ref<string | null>(null)
 
@@ -424,22 +422,27 @@ watch(
 	{ immediate: true },
 )
 
-const unlistenProfile = await profile_listener(async (e: ProfileEvent) => {
-	if (e.profile_path_id !== instance.value.path) return
+const [unlistenProfile, , resolvedProtocolVersion, resolvedGameVersions] = await Promise.all([
+	profile_listener(async (e: ProfileEvent) => {
+		if (e.profile_path_id !== instance.value.path) return
 
-	console.info(`Handling profile event '${e.event}' for profile: ${e.profile_path_id}`)
+		console.info(`Handling profile event '${e.event}' for profile: ${e.profile_path_id}`)
 
-	if (e.event === 'servers_updated') {
-		if (isLinux && linuxRefreshCount.value >= MAX_LINUX_REFRESHES) return
-		if (isLinux) linuxRefreshCount.value++
+		if (e.event === 'servers_updated') {
+			if (isLinux && linuxRefreshCount.value >= MAX_LINUX_REFRESHES) return
+			if (isLinux) linuxRefreshCount.value++
 
-		await refreshAllWorlds()
-	}
+			await refreshAllWorlds()
+		}
 
-	await handleDefaultProfileUpdateEvent(worlds.value, instance.value.path, e)
-})
+		await handleDefaultProfileUpdateEvent(worlds.value, instance.value.path, e)
+	}),
+	refreshAllWorlds(),
+	get_profile_protocol_version(instance.value.path).catch(() => null),
+	get_game_versions().catch(() => [] as GameVersion[]),
+])
 
-await refreshAllWorlds()
+protocolVersion.value = resolvedProtocolVersion
 
 async function refreshServer(address: string) {
 	if (!serverData.value[address]) {
@@ -589,7 +592,7 @@ function worldsMatch(world: World, other: World | undefined) {
 	return false
 }
 
-const gameVersions = ref<GameVersion[]>(await get_game_versions().catch(() => []))
+const gameVersions = ref<GameVersion[]>(resolvedGameVersions)
 const supportsServerQuickPlay = computed(() =>
 	hasServerQuickPlaySupport(gameVersions.value, instance.value.game_version),
 )
diff --git a/apps/app-frontend/src/providers/setup/auth.ts b/apps/app-frontend/src/providers/setup/auth.ts
index bf522c59a3..2de8c0acfa 100644
--- a/apps/app-frontend/src/providers/setup/auth.ts
+++ b/apps/app-frontend/src/providers/setup/auth.ts
@@ -1,6 +1,6 @@
 import type { Labrinth } from '@modrinth/api-client'
 import { type AuthProvider, provideAuth } from '@modrinth/ui'
-import { type Ref, ref, watchEffect } from 'vue'
+import { computed, type Ref, ref, watchEffect } from 'vue'
 
 type AppCredentials = {
 	session?: string | null
@@ -13,10 +13,12 @@ export function setupAuthProvider(
 ) {
 	const sessionToken = ref<string | null>(null)
 	const user = ref<Labrinth.Users.v2.User | null>(null)
+	const isReady = computed(() => credentials.value !== undefined)
 
 	const authProvider: AuthProvider = {
 		session_token: sessionToken,
 		user,
+		isReady,
 		requestSignIn,
 	}
 
diff --git a/apps/app-frontend/src/providers/setup/server-install-content.ts b/apps/app-frontend/src/providers/setup/server-install-content.ts
new file mode 100644
index 0000000000..35919d9d73
--- /dev/null
+++ b/apps/app-frontend/src/providers/setup/server-install-content.ts
@@ -0,0 +1,393 @@
+import type { Archon, Labrinth } from '@modrinth/api-client'
+import {
+	createContext,
+	type CreationFlowContextValue,
+	injectModrinthClient,
+	injectNotificationManager,
+} from '@modrinth/ui'
+import { computed, type ComputedRef, nextTick, type Ref, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+type ServerFlowFrom = 'onboarding' | 'reset-server'
+type ServerInstallableType = 'modpack' | 'mod' | 'plugin' | 'datapack'
+
+type InstallableSearchResult = Labrinth.Search.v3.ResultSearchProject & {
+	installing?: boolean
+	installed?: boolean
+}
+
+interface ServerModpackSelectionRequest {
+	projectId: string
+	versionId: string
+	name: string
+	iconUrl?: string
+}
+
+interface ServerSetupModalHandle {
+	show: () => void | Promise<void>
+	hide: () => void
+	ctx?: CreationFlowContextValue | null
+}
+
+export interface ServerInstallContentContext {
+	serverIdQuery: ComputedRef<string | null>
+	worldIdQuery: ComputedRef<string | null>
+	browseFrom: ComputedRef<string | null>
+	serverFlowFrom: ComputedRef<ServerFlowFrom | null>
+	isFromWorlds: ComputedRef<boolean>
+	isServerContext: ComputedRef<boolean>
+	isSetupServerContext: ComputedRef<boolean>
+	effectiveServerWorldId: ComputedRef<string | null>
+	serverContextServerData: Ref<Archon.Servers.v0.Server | null>
+	serverContentProjectIds: Ref<Set<string>>
+	serverBackUrl: ComputedRef<string>
+	serverBackLabel: ComputedRef<string>
+	serverBrowseHeading: ComputedRef<string>
+	initServerContext: () => Promise<void>
+	watchServerContextChanges: () => void
+	searchServerModpacks: (
+		query: string,
+		limit?: number,
+	) => Promise<Labrinth.Projects.v2.SearchResult>
+	getServerProjectVersions: (projectId: string) => Promise<{ id: string }[]>
+	enforceSetupModpackRoute: (currentProjectType: string | undefined) => void
+	installProjectToServer: (project: InstallableSearchResult) => Promise<boolean>
+	onServerFlowBack: () => void
+	handleServerModpackFlowCreate: (config: CreationFlowContextValue) => Promise<void>
+	markServerProjectInstalled: (id: string) => void
+}
+
+export const [injectServerInstallContent, provideServerInstallContent] =
+	createContext<ServerInstallContentContext>('Browse', 'serverInstallContent')
+
+function readQueryString(value: unknown): string | null {
+	if (Array.isArray(value)) return value[0] ?? null
+	return typeof value === 'string' && value.length > 0 ? value : null
+}
+
+export function createServerInstallContent(opts: {
+	serverSetupModalRef: Ref<ServerSetupModalHandle | null>
+}) {
+	const { serverSetupModalRef } = opts
+	const route = useRoute()
+	const router = useRouter()
+	const client = injectModrinthClient()
+	const { handleError } = injectNotificationManager()
+
+	const serverIdQuery = computed(() => readQueryString(route.query.sid))
+	const worldIdQuery = computed(() => readQueryString(route.query.wid))
+	const browseFrom = computed(() => readQueryString(route.query.from))
+	const serverFlowFrom = computed<ServerFlowFrom | null>(() =>
+		browseFrom.value === 'onboarding' || browseFrom.value === 'reset-server'
+			? browseFrom.value
+			: null,
+	)
+
+	const isFromWorlds = computed(() => browseFrom.value === 'worlds')
+	const isServerContext = computed(() => !!serverIdQuery.value)
+	const isSetupServerContext = computed(() => !!serverIdQuery.value && !!serverFlowFrom.value)
+
+	const serverContextWorldId = ref<string | null>(worldIdQuery.value)
+	const serverContextServerData = ref<Archon.Servers.v0.Server | null>(null)
+	const serverContentProjectIds = ref<Set<string>>(new Set())
+	const effectiveServerWorldId = computed(() => worldIdQuery.value ?? serverContextWorldId.value)
+
+	const serverBackUrl = computed(() => {
+		const sid = serverIdQuery.value
+		if (!sid) return '/hosting/manage'
+		if (serverFlowFrom.value === 'onboarding') {
+			return `/hosting/manage/${sid}?resumeModal=setup-type`
+		}
+		if (serverFlowFrom.value === 'reset-server') {
+			return `/hosting/manage/${sid}?openSettings=installation`
+		}
+		return `/hosting/manage/${sid}/content`
+	})
+	const serverBackLabel = computed(() => {
+		if (serverFlowFrom.value === 'onboarding') return 'Back to setup'
+		if (serverFlowFrom.value === 'reset-server') return 'Cancel reset'
+		return 'Back to server'
+	})
+	const serverBrowseHeading = computed(() => {
+		if (serverFlowFrom.value === 'reset-server') {
+			return 'Select modpack to install after reset'
+		}
+		return 'Install content to server'
+	})
+
+	async function resolveServerContextWorldId(serverId: string) {
+		try {
+			const server = await client.archon.servers_v1.get(serverId)
+			const activeWorld = server.worlds.find((world) => world.is_active)
+			return activeWorld?.id ?? server.worlds[0]?.id ?? null
+		} catch (err) {
+			handleError(err as Error)
+			return null
+		}
+	}
+
+	async function refreshServerInstalledContent(serverId: string, worldId: string) {
+		try {
+			const content = await client.archon.content_v1.getAddons(serverId, worldId)
+			const ids = new Set(
+				(content.addons ?? [])
+					.map((addon) => addon.project_id)
+					.filter((projectId): projectId is string => !!projectId),
+			)
+			serverContentProjectIds.value = ids
+		} catch (err) {
+			handleError(err as Error)
+		}
+	}
+
+	async function initServerContext() {
+		const sid = serverIdQuery.value
+		if (!sid) return
+
+		try {
+			serverContextServerData.value = await client.archon.servers_v0.get(sid)
+		} catch (err) {
+			handleError(err as Error)
+		}
+
+		let resolvedWorldId = effectiveServerWorldId.value
+		if (!resolvedWorldId) {
+			resolvedWorldId = await resolveServerContextWorldId(sid)
+			if (resolvedWorldId) {
+				serverContextWorldId.value = resolvedWorldId
+			}
+		}
+
+		if (resolvedWorldId) {
+			await refreshServerInstalledContent(sid, resolvedWorldId)
+		}
+	}
+
+	function watchServerContextChanges() {
+		watch([serverIdQuery, effectiveServerWorldId], async ([sid, wid], [prevSid, prevWid]) => {
+			if (!sid) {
+				serverContextServerData.value = null
+				serverContentProjectIds.value = new Set()
+				return
+			}
+
+			if (sid !== prevSid) {
+				serverContentProjectIds.value = new Set()
+				try {
+					serverContextServerData.value = await client.archon.servers_v0.get(sid)
+				} catch (err) {
+					handleError(err as Error)
+				}
+			}
+
+			if (wid && (sid !== prevSid || wid !== prevWid)) {
+				await refreshServerInstalledContent(sid, wid)
+			}
+		})
+	}
+
+	function normalizeLoader(loader: string) {
+		return loader.toLowerCase().replaceAll('_', '').replaceAll('-', '').replaceAll(' ', '')
+	}
+
+	function getCompatibleLoaders(loader: string) {
+		const normalized = normalizeLoader(loader)
+		if (!normalized) return new Set<string>()
+		if (normalized === 'paper' || normalized === 'purpur' || normalized === 'spigot') {
+			return new Set(['paper', 'purpur', 'spigot', 'bukkit'])
+		}
+		if (normalized === 'neoforge' || normalized === 'neo') {
+			return new Set(['neoforge', 'neo'])
+		}
+		return new Set([normalized])
+	}
+
+	function enforceSetupModpackRoute(currentProjectType: string | undefined) {
+		if (!isSetupServerContext.value || currentProjectType === 'modpack') return
+		router.replace({
+			path: '/browse/modpack',
+			query: route.query,
+		})
+	}
+
+	async function searchServerModpacks(query: string, limit: number = 10) {
+		return client.labrinth.projects_v2.search({
+			query: query || undefined,
+			new_filters:
+				'project_types = "modpack" AND (client_side = "optional" OR client_side = "required") AND server_side = "required"',
+			limit,
+		})
+	}
+
+	async function getServerProjectVersions(projectId: string) {
+		const versions = await client.labrinth.versions_v3.getProjectVersions(projectId)
+		return versions.map((version) => ({ id: version.id }))
+	}
+
+	async function openServerModpackInstallFlow(request: ServerModpackSelectionRequest) {
+		if (!serverIdQuery.value || !effectiveServerWorldId.value) {
+			throw new Error('Missing server context')
+		}
+
+		const modalInstance = serverSetupModalRef.value
+		if (!modalInstance) return
+
+		modalInstance.show()
+		await nextTick()
+
+		const ctx = modalInstance.ctx
+		if (!ctx) return
+
+		ctx.setupType.value = 'modpack'
+		ctx.modpackSelection.value = {
+			projectId: request.projectId,
+			versionId: request.versionId,
+			name: request.name,
+			iconUrl: request.iconUrl,
+		}
+		ctx.modal.value?.setStage('final-config')
+	}
+
+	function getCurrentServerInstallType(): ServerInstallableType {
+		const raw = Array.isArray(route.params.projectType)
+			? route.params.projectType[0]
+			: route.params.projectType
+		if (raw === 'modpack' || raw === 'mod' || raw === 'plugin' || raw === 'datapack') {
+			return raw
+		}
+		throw new Error('This content type cannot be installed to a server from browse.')
+	}
+
+	async function installProjectToServer(project: InstallableSearchResult) {
+		const contentType = getCurrentServerInstallType()
+		const sid = serverIdQuery.value
+		const wid = effectiveServerWorldId.value
+		if (!sid || !wid) {
+			throw new Error('No server world is available for install.')
+		}
+
+		if (contentType === 'modpack') {
+			const versions = await client.labrinth.versions_v2.getProjectVersions(project.project_id, {
+				include_changelog: false,
+			})
+			const versionId = versions[0]?.id ?? project.version_id
+			if (!versionId) {
+				throw new Error('No version found for this modpack')
+			}
+
+			await openServerModpackInstallFlow({
+				projectId: project.project_id,
+				versionId,
+				name: project.name,
+				iconUrl: project.icon_url ?? undefined,
+			})
+			return false
+		}
+
+		const versions = await client.labrinth.versions_v2.getProjectVersions(project.project_id, {
+			include_changelog: false,
+		})
+		const serverLoader = (serverContextServerData.value?.loader ?? '').toLowerCase()
+		const serverGameVersion = (serverContextServerData.value?.mc_version ?? '').trim()
+		const compatibleLoaders = getCompatibleLoaders(serverLoader)
+
+		const hasGameVersionMatch = (version: Labrinth.Versions.v2.Version) =>
+			!serverGameVersion || version.game_versions.includes(serverGameVersion)
+		const hasLoaderMatch = (version: Labrinth.Versions.v2.Version) => {
+			if (contentType === 'datapack') return true
+			if (compatibleLoaders.size === 0) return true
+			return version.loaders.some((loader) => compatibleLoaders.has(normalizeLoader(loader)))
+		}
+
+		let matchingVersion = versions.find(
+			(version) => hasGameVersionMatch(version) && hasLoaderMatch(version),
+		)
+		if (!matchingVersion) {
+			matchingVersion = versions.find((version) => hasLoaderMatch(version))
+		}
+		if (!matchingVersion) {
+			matchingVersion = versions.find((version) => hasGameVersionMatch(version))
+		}
+		if (!matchingVersion) {
+			matchingVersion = versions[0]
+		}
+		if (!matchingVersion) {
+			throw new Error('No installable version was found for this project.')
+		}
+
+		await client.archon.content_v1.addAddon(sid, wid, {
+			project_id: matchingVersion.project_id,
+			version_id: matchingVersion.id,
+		})
+
+		serverContentProjectIds.value = new Set([...serverContentProjectIds.value, project.project_id])
+		return true
+	}
+
+	function onServerFlowBack() {
+		serverSetupModalRef.value?.hide()
+	}
+
+	async function handleServerModpackFlowCreate(config: CreationFlowContextValue) {
+		const sid = serverIdQuery.value
+		const wid = effectiveServerWorldId.value
+		if (!sid || !wid || !config.modpackSelection.value) {
+			config.loading.value = false
+			return
+		}
+
+		try {
+			await client.archon.content_v1.installContent(sid, wid, {
+				content_variant: 'modpack',
+				spec: {
+					platform: 'modrinth',
+					project_id: config.modpackSelection.value.projectId,
+					version_id: config.modpackSelection.value.versionId,
+				},
+				soft_override: false,
+				properties: config.buildProperties(),
+			} satisfies Archon.Content.v1.InstallWorldContent)
+			serverSetupModalRef.value?.hide()
+
+			if (serverFlowFrom.value === 'onboarding') {
+				await client.archon.servers_v1.endIntro(sid)
+				await router.push(`/hosting/manage/${sid}/content`)
+				return
+			}
+
+			await router.push(`/hosting/manage/${sid}?openSettings=installation`)
+		} catch (err) {
+			handleError(err as Error)
+			config.loading.value = false
+		}
+	}
+
+	function markServerProjectInstalled(id: string) {
+		serverContentProjectIds.value = new Set([...serverContentProjectIds.value, id])
+	}
+
+	return {
+		serverIdQuery,
+		worldIdQuery,
+		browseFrom,
+		serverFlowFrom,
+		isFromWorlds,
+		isServerContext,
+		isSetupServerContext,
+		effectiveServerWorldId,
+		serverContextServerData,
+		serverContentProjectIds,
+		serverBackUrl,
+		serverBackLabel,
+		serverBrowseHeading,
+		initServerContext,
+		watchServerContextChanges,
+		searchServerModpacks,
+		getServerProjectVersions,
+		enforceSetupModpackRoute,
+		installProjectToServer,
+		onServerFlowBack,
+		handleServerModpackFlowCreate,
+		markServerProjectInstalled,
+	}
+}
diff --git a/apps/app-frontend/src/routes.js b/apps/app-frontend/src/routes.js
index 2748853d58..841d4a97fc 100644
--- a/apps/app-frontend/src/routes.js
+++ b/apps/app-frontend/src/routes.js
@@ -43,11 +43,8 @@ export default new createRouter({
 			children: [
 				{
 					path: '',
-					redirect: (to) => {
-						const rawId = Array.isArray(to.params.id) ? to.params.id[0] : to.params.id
-						if (!rawId) return '/hosting/manage'
-						return `/hosting/manage/${encodeURIComponent(rawId)}/content`
-					},
+					name: 'ServerManageOverview',
+					component: Hosting.Overview,
 				},
 				{
 					path: 'content',
diff --git a/apps/app-frontend/tsconfig.app.json b/apps/app-frontend/tsconfig.app.json
index f723e2026f..504558d95f 100644
--- a/apps/app-frontend/tsconfig.app.json
+++ b/apps/app-frontend/tsconfig.app.json
@@ -3,7 +3,7 @@
 		"target": "ES2020",
 		"useDefineForClassFields": true,
 		"module": "ESNext",
-		"lib": ["ES2020", "DOM", "DOM.Iterable"],
+		"lib": ["ES2021", "DOM", "DOM.Iterable"],
 		"skipLibCheck": true,
 
 		"moduleResolution": "bundler",
diff --git a/apps/app/capabilities/plugins.json b/apps/app/capabilities/plugins.json
index f1a45bf27d..4813b88730 100644
--- a/apps/app/capabilities/plugins.json
+++ b/apps/app/capabilities/plugins.json
@@ -22,7 +22,11 @@
 
 		{
 			"identifier": "http:default",
-			"allow": [{ "url": "https://modrinth.com/*" }, { "url": "https://*.modrinth.com/*" }]
+			"allow": [
+				{ "url": "https://modrinth.com/*" },
+				{ "url": "https://*.modrinth.com/*" },
+				{ "url": "https://*.nodes.modrinth.com/*" }
+			]
 		},
 
 		"dialog:allow-save",
diff --git a/apps/app/tauri.conf.json b/apps/app/tauri.conf.json
index bc06fa6405..e5c46f4f3b 100644
--- a/apps/app/tauri.conf.json
+++ b/apps/app/tauri.conf.json
@@ -87,7 +87,7 @@
 			"capabilities": ["ads", "core", "plugins"],
 			"csp": {
 				"default-src": "'self' customprotocol: asset:",
-				"connect-src": "ipc: http://ipc.localhost https://modrinth.com https://*.modrinth.com https://*.posthog.com https://posthog.modrinth.com https://*.sentry.io https://api.mclo.gs http://textures.minecraft.net https://textures.minecraft.net https://js.stripe.com https://*.stripe.com wss://*.stripe.com wss://*.nodes.modrinth.com 'self' data: blob:",
+				"connect-src": "ipc: http://ipc.localhost https://modrinth.com https://*.modrinth.com https://*.nodes.modrinth.com https://*.posthog.com https://posthog.modrinth.com https://*.sentry.io https://api.mclo.gs http://textures.minecraft.net https://textures.minecraft.net https://js.stripe.com https://*.stripe.com wss://*.stripe.com wss://*.nodes.modrinth.com 'self' data: blob:",
 				"font-src": ["https://cdn-raw.modrinth.com/fonts/"],
 				"img-src": "https: 'unsafe-inline' 'self' asset: http://asset.localhost http://textures.minecraft.net blob: data:",
 				"style-src": "'unsafe-inline' 'self'",
diff --git a/apps/frontend/src/components/ui/servers/ModrinthServersIcon.vue b/apps/frontend/src/components/brand/ModrinthServersIcon.vue
similarity index 100%
rename from apps/frontend/src/components/ui/servers/ModrinthServersIcon.vue
rename to apps/frontend/src/components/brand/ModrinthServersIcon.vue
diff --git a/apps/frontend/src/components/ui/servers/notice/AssignNoticeModal.vue b/apps/frontend/src/components/ui/admin/AssignNoticeModal.vue
similarity index 100%
rename from apps/frontend/src/components/ui/servers/notice/AssignNoticeModal.vue
rename to apps/frontend/src/components/ui/admin/AssignNoticeModal.vue
diff --git a/apps/frontend/src/components/ui/servers/LoaderSelector.vue b/apps/frontend/src/components/ui/servers/LoaderSelector.vue
deleted file mode 100644
index 0998a9ced1..0000000000
--- a/apps/frontend/src/components/ui/servers/LoaderSelector.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-	<div class="flex w-full flex-col gap-1 rounded-2xl bg-table-alternateRow p-2">
-		<div
-			v-for="loader in vanillaLoaders"
-			:key="loader.name"
-			class="group relative flex items-center justify-between rounded-2xl p-2 pr-2.5 hover:bg-bg"
-		>
-			<LoaderSelectorCard
-				:loader="loader"
-				:is-current="isCurrentLoader(loader.name)"
-				:loader-version="data.loader_version"
-				:current-loader="data.loader"
-				:is-installing="isInstalling"
-				@select="selectLoader"
-			/>
-		</div>
-	</div>
-
-	<div class="mt-4">
-		<h2 class="mb-2 px-2 text-lg font-bold text-contrast">Mod loaders</h2>
-		<div class="flex w-full flex-col gap-1 rounded-2xl bg-table-alternateRow p-2">
-			<div
-				v-for="loader in modLoaders"
-				:key="loader.name"
-				class="group relative flex items-center justify-between rounded-2xl p-2 pr-2.5 hover:bg-bg"
-			>
-				<LoaderSelectorCard
-					:loader="loader"
-					:is-current="isCurrentLoader(loader.name)"
-					:loader-version="data.loader_version"
-					:current-loader="data.loader"
-					:is-installing="isInstalling"
-					@select="selectLoader"
-				/>
-			</div>
-		</div>
-	</div>
-
-	<div class="mt-4">
-		<h2 class="mb-2 px-2 text-lg font-bold text-contrast">Plugin loaders</h2>
-		<div class="flex w-full flex-col gap-1 rounded-2xl bg-table-alternateRow p-2">
-			<div
-				v-for="loader in pluginLoaders"
-				:key="loader.name"
-				class="group relative flex items-center justify-between rounded-2xl p-2 pr-2.5 hover:bg-bg"
-			>
-				<LoaderSelectorCard
-					:loader="loader"
-					:is-current="isCurrentLoader(loader.name)"
-					:loader-version="data.loader_version"
-					:current-loader="data.loader"
-					:is-installing="isInstalling"
-					@select="selectLoader"
-				/>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import LoaderSelectorCard from './LoaderSelectorCard.vue'
-const props = defineProps<{
-	data: {
-		loader: string | null
-		loader_version: string | null
-	}
-	ignoreCurrentInstallation?: boolean
-	isInstalling?: boolean
-}>()
-
-const emit = defineEmits<{
-	(e: 'selectLoader', loader: string): void
-}>()
-
-const vanillaLoaders = [{ name: 'Vanilla' as const, displayName: 'Vanilla' }]
-
-const modLoaders = [
-	{ name: 'Fabric' as const, displayName: 'Fabric' },
-	{ name: 'Quilt' as const, displayName: 'Quilt' },
-	{ name: 'Forge' as const, displayName: 'Forge' },
-	{ name: 'NeoForge' as const, displayName: 'NeoForge' },
-]
-
-const pluginLoaders = [
-	{ name: 'Paper' as const, displayName: 'Paper' },
-	{ name: 'Purpur' as const, displayName: 'Purpur' },
-]
-
-const isCurrentLoader = (loaderName: string) => {
-	return props.data.loader?.toLowerCase() === loaderName.toLowerCase()
-}
-
-const selectLoader = (loader: string) => {
-	emit('selectLoader', loader)
-}
-</script>
diff --git a/apps/frontend/src/components/ui/servers/LoaderSelectorCard.vue b/apps/frontend/src/components/ui/servers/LoaderSelectorCard.vue
deleted file mode 100644
index 0017f1076e..0000000000
--- a/apps/frontend/src/components/ui/servers/LoaderSelectorCard.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-	<div class="flex w-full items-center justify-between">
-		<div class="flex items-center gap-4">
-			<div
-				class="grid size-10 place-content-center rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
-				:class="isCurrentLoader ? '[&&]:bg-bg-green' : ''"
-			>
-				<LoaderIcon
-					:loader="loader.name"
-					class="size-6"
-					:class="isCurrentLoader ? 'text-brand' : ''"
-				/>
-			</div>
-
-			<div class="flex flex-col gap-0.5">
-				<div class="flex flex-row items-center gap-2">
-					<h1 class="m-0 text-xl font-bold leading-none text-contrast">
-						{{ loader.displayName }}
-					</h1>
-					<span
-						v-if="isCurrentLoader"
-						class="hidden items-center gap-1 rounded-full bg-bg-green p-1 px-1.5 text-xs font-semibold text-brand sm:flex"
-					>
-						<CheckIcon class="h-4 w-4" /> Current
-					</span>
-				</div>
-
-				<p v-if="isCurrentLoader" class="m-0 text-xs text-secondary">{{ loaderVersion }}</p>
-			</div>
-		</div>
-		<ButtonStyled>
-			<button :disabled="isInstalling" @click="onSelect">
-				<DownloadIcon class="h-5 w-5" /> {{ isCurrentLoader ? 'Reinstall' : 'Install' }}
-			</button>
-		</ButtonStyled>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { CheckIcon, DownloadIcon } from '@modrinth/assets'
-import { ButtonStyled, LoaderIcon } from '@modrinth/ui'
-
-interface LoaderInfo {
-	name: 'Vanilla' | 'Fabric' | 'Forge' | 'Quilt' | 'Paper' | 'NeoForge' | 'Purpur'
-	displayName: string
-}
-
-interface Props {
-	loader: LoaderInfo
-	currentLoader: string | null
-	loaderVersion: string | null
-	isInstalling?: boolean
-}
-
-const props = defineProps<Props>()
-
-const emit = defineEmits<{
-	(e: 'select', loader: string): void
-}>()
-
-const isCurrentLoader = computed(() => {
-	return props.currentLoader?.toLowerCase() === props.loader.name.toLowerCase()
-})
-
-const onSelect = () => {
-	emit('select', props.loader.name)
-}
-</script>
diff --git a/apps/frontend/src/components/ui/servers/LogLine.vue b/apps/frontend/src/components/ui/servers/LogLine.vue
deleted file mode 100644
index 07df871a33..0000000000
--- a/apps/frontend/src/components/ui/servers/LogLine.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-	<div
-		class="parsed-log relative flex h-8 w-full items-center overflow-hidden rounded-lg px-6"
-		@mouseenter="checkOverflow"
-		@touchstart="checkOverflow"
-	>
-		<div ref="logContent" class="log-content flex-1 truncate whitespace-pre">
-			<span v-html="sanitizedLog"></span>
-		</div>
-		<button
-			v-if="isOverflowing"
-			class="ml-2 flex h-6 items-center rounded-md bg-bg px-2 text-xs text-contrast opacity-50 transition-opacity hover:opacity-100"
-			type="button"
-			@click.stop="$emit('show-full-log', props.log)"
-		>
-			...
-		</button>
-	</div>
-</template>
-
-<script setup lang="ts">
-import Convert from 'ansi-to-html'
-import DOMPurify from 'dompurify'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
-
-const props = defineProps<{
-	log: string
-}>()
-
-defineEmits<{
-	'show-full-log': [log: string]
-}>()
-
-const logContent = ref<HTMLElement | null>(null)
-const isOverflowing = ref(false)
-
-const checkOverflow = () => {
-	if (logContent.value && !isOverflowing.value) {
-		isOverflowing.value = logContent.value.scrollWidth > logContent.value.clientWidth
-	}
-}
-
-const convert = new Convert({
-	fg: '#FFF',
-	bg: '#000',
-	newline: false,
-	escapeXML: true,
-	stream: false,
-})
-
-const sanitizedLog = computed(() =>
-	DOMPurify.sanitize(convert.toHtml(props.log), {
-		ALLOWED_TAGS: ['span'],
-		ALLOWED_ATTR: ['style'],
-		USE_PROFILES: { html: true },
-	}),
-)
-
-const preventSelection = (e: MouseEvent) => {
-	e.preventDefault()
-}
-
-onMounted(() => {
-	logContent.value?.addEventListener('mousedown', preventSelection)
-})
-
-onUnmounted(() => {
-	logContent.value?.removeEventListener('mousedown', preventSelection)
-})
-</script>
-
-<style scoped>
-.parsed-log {
-	background: transparent;
-	transition: background-color 0.1s;
-}
-
-.parsed-log:hover {
-	background: rgba(128, 128, 128, 0.25);
-	transition: 0s;
-}
-
-.log-content > span {
-	user-select: none;
-	white-space: pre;
-}
-
-.log-content {
-	white-space: pre;
-}
-</style>
diff --git a/apps/frontend/src/components/ui/servers/PanelServerActionButton.vue b/apps/frontend/src/components/ui/servers/PanelServerActionButton.vue
deleted file mode 100644
index 3022a7b06a..0000000000
--- a/apps/frontend/src/components/ui/servers/PanelServerActionButton.vue
+++ /dev/null
@@ -1,276 +0,0 @@
-<template>
-	<div class="contents">
-		<NewModal ref="confirmActionModal" header="Confirming power action" @close="resetPowerAction">
-			<div class="flex flex-col gap-4 md:w-[400px]">
-				<p class="m-0">
-					Are you sure you want to
-					<span class="lowercase">{{ pendingAction }}</span> the server?
-				</p>
-				<Checkbox
-					v-model="dontAskAgain"
-					label="Don't ask me again"
-					class="text-sm"
-					:disabled="!pendingAction"
-				/>
-				<div class="flex flex-row gap-4">
-					<ButtonStyled type="standard" color="brand" @click="executePowerAction">
-						<button>
-							<CheckIcon class="h-5 w-5" />
-							{{ pendingAction }} server
-						</button>
-					</ButtonStyled>
-					<ButtonStyled @click="resetPowerAction">
-						<button>
-							<XIcon class="h-5 w-5" />
-							Cancel
-						</button>
-					</ButtonStyled>
-				</div>
-			</div>
-		</NewModal>
-
-		<NewModal
-			ref="detailsModal"
-			:header="`All of ${server.name || 'Server'} info`"
-			@close="detailsModal?.hide()"
-		>
-			<ServerInfoLabels
-				:server-data="server"
-				:show-game-label="true"
-				:show-loader-label="true"
-				:uptime-seconds="uptimeSeconds"
-				:column="true"
-				class="mb-6 flex flex-col gap-2"
-			/>
-			<div v-if="flags.advancedDebugInfo" class="markdown-body">
-				<pre>{{ server }}</pre>
-			</div>
-			<ButtonStyled type="standard" color="brand" @click="detailsModal?.hide()">
-				<button class="w-full">Close</button>
-			</ButtonStyled>
-		</NewModal>
-
-		<div class="flex flex-row items-center gap-2 rounded-lg">
-			<ButtonStyled v-if="isInstalling" type="standard" color="brand" size="large">
-				<button disabled class="flex-shrink-0">
-					<PanelSpinner class="size-5" /> Installing...
-				</button>
-			</ButtonStyled>
-
-			<template v-else>
-				<ButtonStyled v-if="showStopButton" type="transparent" size="large">
-					<button :disabled="!canTakeAction" @click="initiateAction('Stop')">
-						<div class="flex gap-1">
-							<StopCircleIcon class="h-5 w-5" />
-							<span>{{ isStopping ? 'Stopping...' : 'Stop' }}</span>
-						</div>
-					</button>
-				</ButtonStyled>
-
-				<ButtonStyled type="standard" color="brand" size="large">
-					<button v-tooltip="busyTooltip" :disabled="!canTakeAction" @click="handlePrimaryAction">
-						<div v-if="isTransitioning" class="grid place-content-center">
-							<LoadingIcon />
-						</div>
-						<component :is="isRunning ? UpdatedIcon : PlayIcon" v-else />
-						<span>{{ primaryActionText }}</span>
-					</button>
-				</ButtonStyled>
-
-				<ButtonStyled circular type="transparent" size="large">
-					<TeleportOverflowMenu :options="[...menuOptions]">
-						<MoreVerticalIcon aria-hidden="true" />
-						<template #kill>
-							<SlashIcon class="h-5 w-5" />
-							<span>Kill server</span>
-						</template>
-						<template #allServers>
-							<ServerIcon class="h-5 w-5" />
-							<span>All servers</span>
-						</template>
-						<template #details>
-							<InfoIcon class="h-5 w-5" />
-							<span>Details</span>
-						</template>
-						<template #copy-id>
-							<ClipboardCopyIcon class="h-5 w-5" aria-hidden="true" />
-							<span>Copy ID</span>
-						</template>
-					</TeleportOverflowMenu>
-				</ButtonStyled>
-			</template>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import {
-	CheckIcon,
-	ClipboardCopyIcon,
-	InfoIcon,
-	MoreVerticalIcon,
-	PlayIcon,
-	ServerIcon,
-	SlashIcon,
-	StopCircleIcon,
-	UpdatedIcon,
-	XIcon,
-} from '@modrinth/assets'
-import {
-	ButtonStyled,
-	Checkbox,
-	injectModrinthClient,
-	injectModrinthServerContext,
-	injectNotificationManager,
-	NewModal,
-	ServerInfoLabels,
-	useVIntl,
-} from '@modrinth/ui'
-import { useStorage } from '@vueuse/core'
-import { computed, ref } from 'vue'
-import { useRouter } from 'vue-router'
-
-import LoadingIcon from './icons/LoadingIcon.vue'
-import PanelSpinner from './PanelSpinner.vue'
-import TeleportOverflowMenu from './TeleportOverflowMenu.vue'
-
-type PowerAction = 'Start' | 'Stop' | 'Restart' | 'Kill'
-
-const props = defineProps<{
-	disabled?: boolean
-	uptimeSeconds: number
-}>()
-
-const { formatMessage } = useVIntl()
-const flags = useFeatureFlags()
-const router = useRouter()
-const client = injectModrinthClient()
-const { serverId, server, powerState, busyReasons } = injectModrinthServerContext()
-const { addNotification } = injectNotificationManager()
-
-const confirmActionModal = ref<InstanceType<typeof NewModal> | null>(null)
-const detailsModal = ref<InstanceType<typeof NewModal> | null>(null)
-const pendingAction = ref<PowerAction | null>(null)
-const dontAskAgain = ref(false)
-
-const userPreferences = useStorage(`pyro-server-${serverId}-preferences`, {
-	powerDontAskAgain: false,
-})
-
-const isInstalling = computed(() => server.value.status === 'installing')
-const isRunning = computed(() => powerState.value === 'running')
-const isStopping = computed(() => powerState.value === 'stopping')
-const isTransitioning = computed(
-	() => powerState.value === 'starting' || powerState.value === 'stopping',
-)
-const showStopButton = computed(() => isRunning.value || isStopping.value)
-
-const busyTooltip = computed(() =>
-	busyReasons.value.length > 0 ? formatMessage(busyReasons.value[0].reason) : undefined,
-)
-
-const canTakeAction = computed(
-	() => !isTransitioning.value && !props.disabled && busyReasons.value.length === 0,
-)
-
-const primaryActionText = computed(() => {
-	switch (powerState.value) {
-		case 'starting':
-			return 'Starting...'
-		case 'stopping':
-			return 'Stopping...'
-		case 'running':
-			return 'Restart'
-		default:
-			return 'Start'
-	}
-})
-
-const menuOptions = computed(() => [
-	...(isInstalling.value
-		? []
-		: [
-				{
-					id: 'kill',
-					label: 'Kill server',
-					icon: SlashIcon,
-					action: () => initiateAction('Kill'),
-				},
-			]),
-	{
-		id: 'allServers',
-		label: 'All servers',
-		icon: ServerIcon,
-		action: () => router.push('/hosting/manage'),
-	},
-	{
-		id: 'details',
-		label: 'Details',
-		icon: InfoIcon,
-		action: () => detailsModal.value?.show(),
-	},
-	{
-		id: 'copy-id',
-		label: 'Copy ID',
-		icon: ClipboardCopyIcon,
-		action: () => copyId(),
-		shown: flags.value.developerMode,
-	},
-])
-
-async function copyId() {
-	await navigator.clipboard.writeText(serverId)
-}
-
-async function sendPowerAction(action: PowerAction) {
-	try {
-		await client.archon.servers_v0.power(serverId, action)
-	} catch (error) {
-		console.error(`Error performing ${action} on server:`, error)
-		addNotification({
-			type: 'error',
-			title: `Failed to ${action.toLowerCase()} server`,
-			text: 'An error occurred while performing this action.',
-		})
-	}
-}
-
-function initiateAction(action: PowerAction) {
-	if (!canTakeAction.value) return
-
-	if (action === 'Start') {
-		sendPowerAction(action)
-		return
-	}
-
-	pendingAction.value = action
-
-	if (userPreferences.value.powerDontAskAgain) {
-		executePowerAction()
-	} else {
-		confirmActionModal.value?.show()
-	}
-}
-
-function handlePrimaryAction() {
-	initiateAction(isRunning.value ? 'Restart' : 'Start')
-}
-
-function executePowerAction() {
-	if (!pendingAction.value) return
-
-	sendPowerAction(pendingAction.value)
-
-	if (dontAskAgain.value) {
-		userPreferences.value.powerDontAskAgain = true
-	}
-
-	resetPowerAction()
-}
-
-function resetPowerAction() {
-	confirmActionModal.value?.hide()
-	pendingAction.value = null
-	dontAskAgain.value = false
-}
-</script>
diff --git a/apps/frontend/src/components/ui/servers/PanelServerStatus.vue b/apps/frontend/src/components/ui/servers/PanelServerStatus.vue
deleted file mode 100644
index f5b42fa0e1..0000000000
--- a/apps/frontend/src/components/ui/servers/PanelServerStatus.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-	<div
-		:aria-label="`Server is ${getStatusText(state)}`"
-		class="relative inline-flex select-none items-center"
-		@mouseenter="isExpanded = true"
-		@mouseleave="isExpanded = false"
-	>
-		<div
-			:class="[
-				'h-4 w-4 rounded-full transition-all duration-300 ease-in-out',
-				getStatusClass(state).main,
-			]"
-		>
-			<div
-				:class="[
-					'absolute inline-flex h-4 w-4 animate-ping rounded-full',
-					getStatusClass(state).bg,
-				]"
-			></div>
-		</div>
-		<div
-			:class="[
-				'absolute -left-4 flex w-auto items-center gap-2 rounded-full px-2 py-1 transition-all duration-150 ease-in-out',
-				getStatusClass(state).bg,
-				isExpanded ? 'translate-x-2 scale-100 opacity-100' : 'translate-x-0 scale-90 opacity-0',
-			]"
-		>
-			<div class="h-3 w-3 rounded-full"></div>
-			<span
-				:class="[
-					'origin-left whitespace-nowrap text-sm font-semibold text-contrast transition-all duration-[200ms] ease-in-out',
-					isExpanded ? 'translate-x-0 scale-100' : '-translate-x-1 scale-x-75',
-				]"
-			>
-				{{ getStatusText(state) }}
-			</span>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import type { ServerState } from '@modrinth/utils'
-import { ref } from 'vue'
-
-const STATUS_CLASSES = {
-	running: { main: 'bg-brand', bg: 'bg-bg-green' },
-	stopped: { main: '', bg: '' },
-	crashed: { main: 'bg-brand-red', bg: 'bg-bg-red' },
-	unknown: { main: '', bg: '' },
-} as const
-
-const STATUS_TEXTS: Partial<Record<ServerState, string>> = {
-	running: 'Running',
-	stopped: '',
-	crashed: 'Crashed',
-	unknown: 'Unknown',
-} as const
-
-defineProps<{
-	state: ServerState
-}>()
-
-const isExpanded = ref(false)
-
-function getStatusClass(state: ServerState) {
-	if (state in STATUS_CLASSES) {
-		return STATUS_CLASSES[state as keyof typeof STATUS_CLASSES]
-	}
-	return STATUS_CLASSES.unknown
-}
-
-function getStatusText(state: ServerState) {
-	return STATUS_TEXTS[state] ?? STATUS_TEXTS.unknown
-}
-</script>
diff --git a/apps/frontend/src/components/ui/servers/PanelSpinner.vue b/apps/frontend/src/components/ui/servers/PanelSpinner.vue
deleted file mode 100644
index c2c7f55eab..0000000000
--- a/apps/frontend/src/components/ui/servers/PanelSpinner.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-	<svg
-		class="h-5 w-5 animate-spin"
-		xmlns="http://www.w3.org/2000/svg"
-		fill="none"
-		viewBox="0 0 24 24"
-	>
-		<circle
-			class="opacity-25"
-			cx="12"
-			cy="12"
-			r="10"
-			stroke="currentColor"
-			stroke-width="4"
-		></circle>
-		<path
-			class="opacity-75"
-			fill="currentColor"
-			d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-		></path>
-	</svg>
-</template>
diff --git a/apps/frontend/src/components/ui/servers/PanelTerminal.vue b/apps/frontend/src/components/ui/servers/PanelTerminal.vue
deleted file mode 100644
index 950a2dc9ea..0000000000
--- a/apps/frontend/src/components/ui/servers/PanelTerminal.vue
+++ /dev/null
@@ -1,1414 +0,0 @@
-<template>
-	<div class="contents">
-		<div class="flex items-center gap-4">
-			<div class="relative w-full">
-				<StyledInput
-					v-model="searchInput"
-					type="search"
-					:icon="SearchIcon"
-					placeholder="Search logs"
-					wrapper-class="h-12 !w-full"
-					input-class="!pr-48"
-					:disabled="loading"
-					@keydown.escape="clearSearch"
-				/>
-				<ButtonStyled v-if="searchInput && !loading" @click="clearSearch">
-					<button class="absolute right-2 top-1/2 -translate-y-1/2">
-						<XIcon class="h-5 w-5" />
-					</button>
-				</ButtonStyled>
-				<span
-					v-if="pyroConsole.filteredOutput.value.length && searchInput && !loading"
-					class="pointer-events-none absolute right-12 top-1/2 -translate-y-1/2 select-none whitespace-pre text-sm"
-				>
-					{{ pyroConsole.filteredOutput.value.length }}
-					{{ pyroConsole.filteredOutput.value.length === 1 ? 'result' : 'results' }}
-				</span>
-			</div>
-		</div>
-		<div
-			data-pyro-terminal
-			:class="[
-				'terminal-font console relative z-[1] flex h-full w-full flex-col items-center justify-between overflow-hidden rounded-t-xl px-1 text-sm transition-transform duration-300',
-				{ 'scale-fullscreen screen-fixed inset-0 z-50 !rounded-none': isFullScreen },
-				{ 'pointer-events-none': loading },
-			]"
-			:aria-hidden="loading"
-			tabindex="-1"
-		>
-			<div
-				v-if="cosmetics.advancedRendering && !loading"
-				class="progressive-gradient pointer-events-none absolute -bottom-6 left-0 z-[2] h-[10rem] w-full overflow-hidden rounded-xl"
-				:style="`--transparency: ${Math.max(0, lerp(100, 0, bottomThreshold * 8))}%`"
-				aria-hidden="true"
-			>
-				<div
-					v-for="i in progressiveBlurIterations"
-					:key="i"
-					aria-hidden="true"
-					class="absolute left-0 top-0 h-full w-full"
-					:style="getBlurStyle(i)"
-				/>
-			</div>
-			<div
-				v-else-if="!loading"
-				class="pointer-events-none absolute bottom-0 left-0 right-0 z-[2] h-[196px] w-full"
-				:style="
-					bottomThreshold > 0
-						? { background: 'linear-gradient(transparent 30%, var(--console-bg) 70%)' }
-						: {}
-				"
-			></div>
-			<div
-				aria-hidden="true"
-				class="pointer-events-none absolute left-0 top-0 z-[60] h-full w-full"
-				:style="{
-					visibility: isFullScreen ? 'hidden' : 'visible',
-				}"
-			>
-				<div
-					aria-hidden="true"
-					class="absolute -bottom-2 -right-2 h-7 w-7"
-					:style="{
-						background: `radial-gradient(circle at 0% 0%, transparent 50%, var(--color-raised-bg) 52%)`,
-					}"
-				></div>
-				<div
-					aria-hidden="true"
-					class="absolute -bottom-2 -left-2 h-7 w-7"
-					:style="{
-						background: `radial-gradient(circle at 100% 0%, transparent 50%, var(--color-raised-bg) 52%)`,
-					}"
-				></div>
-			</div>
-			<div data-pyro-terminal-scroll-root class="relative h-full w-full">
-				<div
-					v-if="!loading"
-					ref="scrollbarTrack"
-					data-pyro-terminal-scrollbar-track
-					class="absolute -right-1 bottom-16 top-4 z-[4] w-4 overflow-hidden"
-					@mousedown="handleTrackClick"
-				>
-					<div
-						v-if="hasSelection"
-						class="absolute h-full w-full opacity-20"
-						:style="{
-							background: `linear-gradient(to bottom,
-                transparent ${getSelectionPosition().start}%,
-                var(--color-blue) ${getSelectionPosition().start}%,
-                var(--color-blue) ${getSelectionPosition().end}%,
-                transparent ${getSelectionPosition().end}%)`,
-						}"
-					/>
-					<div
-						data-pyro-terminal-scrollbar
-						class="relative flex h-full justify-center rounded-full transition-all"
-						:style="{ opacity: bottomThreshold > 0 ? '0.7' : '0.3' }"
-					>
-						<div
-							ref="scrollbarThumb"
-							data-pyro-terminal-scrollbar-thumb
-							class="absolute w-1.5 cursor-default rounded-full bg-button-bg"
-							:style="{
-								height: `${getThumbHeight()}px`,
-								transform: `translateY(${getThumbPosition()}px)`,
-							}"
-							@mousedown="startDragging"
-						></div>
-					</div>
-				</div>
-				<div
-					ref="scrollContainer"
-					data-pyro-terminal-root
-					class="scrollbar-none absolute left-0 top-0 h-full w-full select-text overflow-x-auto overflow-y-auto py-6 pb-[72px]"
-					@scroll.passive="() => handleListScroll()"
-				>
-					<div v-if="loading" class="h-full w-full" />
-					<div
-						v-else
-						data-pyro-terminal-virtual-height-watcher
-						:style="{ height: `${totalHeight}px` }"
-					>
-						<ul
-							class="m-0 list-none p-0"
-							data-pyro-terminal-virtual-list
-							:class="{ 'scrolling-active': isScrolling && !isSelecting }"
-							:style="virtualListStyle"
-							aria-live="polite"
-							role="listbox"
-							@mousedown.prevent="handleMouseDown"
-							@mousemove="updateLineSelection"
-							@mouseup="endLineSelection"
-						>
-							<template
-								v-for="(item, index) in visibleItems"
-								:key="`${visibleStartIndex + index}-${item}`"
-							>
-								<li
-									data-pyro-terminal-line
-									:class="{
-										'selected-line': isLineSelected(visibleStartIndex + index),
-									}"
-									class="group"
-								>
-									<div class="flex items-center gap-2">
-										<LogLine :log="item" @show-full-log="showFullLogMessage" />
-										<div @mousedown.stop @click.stop>
-											<button
-												v-if="searchInput"
-												class="jump-button mr-4 flex items-center gap-1 rounded-md bg-bg-blue px-2 py-1 text-xs text-blue transition-all hover:scale-105 active:scale-95"
-												@mousedown.stop
-												@click.stop="() => jumpToLine(item)"
-											>
-												<RightArrowIcon class="h-3 w-3" />
-												Jump
-											</button>
-										</div>
-									</div>
-								</li>
-								<li
-									v-if="
-										searchInput &&
-										shouldShowSeparator(visibleStartIndex + index, visibleStartIndex + index + 1)
-									"
-									data-pyro-terminal-separator
-									class="flex h-8 select-none items-center justify-center opacity-50"
-									aria-hidden="true"
-								>
-									<div class="h-[1px] w-full bg-contrast opacity-50"></div>
-									<div class="mx-4 flex flex-row items-center gap-4">
-										<div class="flex flex-row items-center gap-1">
-											<div class="size-1 rounded-full bg-contrast opacity-70"></div>
-											<div class="size-1 rounded-full bg-contrast opacity-70"></div>
-											<div class="size-1 rounded-full bg-contrast opacity-70"></div>
-										</div>
-										<span class="select-none whitespace-pre text-xs text-contrast">
-											{{
-												shouldShowSeparator(
-													visibleStartIndex + index,
-													visibleStartIndex + index + 1,
-												)
-											}}
-											line{{
-												shouldShowSeparator(
-													visibleStartIndex + index,
-													visibleStartIndex + index + 1,
-												) === 1
-													? ''
-													: 's'
-											}}
-											between
-										</span>
-									</div>
-									<div class="h-[1px] w-full bg-contrast opacity-50"></div>
-								</li>
-							</template>
-						</ul>
-					</div>
-				</div>
-			</div>
-
-			<div
-				class="absolute bottom-4 z-[3] w-full"
-				:style="{
-					filter: `drop-shadow(0 8px 12px rgba(0, 0, 0, ${lerp(0.1, 0.5, bottomThreshold)}))`,
-				}"
-			>
-				<slot />
-			</div>
-			<button
-				v-if="!loading"
-				data-pyro-fullscreen
-				:label="isFullScreen ? 'Exit full screen' : 'Enter full screen'"
-				class="experimental-styles-within absolute right-4 top-4 z-[3] grid h-12 w-12 place-content-center rounded-full border-[1px] border-solid border-button-border bg-bg-raised text-contrast transition-all duration-200 hover:scale-110 active:scale-95"
-				:class="{ hidden: searchInput || hasSelection || isSingleLineSelected }"
-				@click="toggleFullscreen"
-			>
-				<MinimizeIconVue v-if="isFullScreen" />
-				<FullscreenIcon v-else />
-			</button>
-
-			<Transition name="fade">
-				<div
-					v-if="(hasSelection || isSingleLineSelected) && !loading"
-					class="absolute right-20 top-4 z-[3] flex flex-row items-center"
-					:class="{ '!right-4': searchInput || hasSelection || isSingleLineSelected }"
-				>
-					<button
-						data-pyro-copy
-						label="Copy selected lines"
-						class="experimental-styles-within flex h-12 flex-row items-center justify-center gap-2 rounded-full border-[1px] border-solid border-button-border bg-bg-raised px-4 text-contrast transition-all duration-200 hover:scale-110 active:scale-95"
-						@click="copySelectedLines"
-					>
-						<CopyIcon class="h-5 w-5" />
-						<span class="">Copy</span>
-					</button>
-					<Transition name="view-button">
-						<button
-							v-if="hasSelection"
-							data-pyro-view
-							label="View selected lines"
-							class="experimental-styles-within ml-2 flex h-12 w-[100px] flex-row items-center justify-center gap-2 rounded-full border-[1px] border-solid border-button-border bg-bg-raised px-4 text-contrast transition-all duration-200 hover:scale-110 active:scale-95"
-							@click="showSelectedLines"
-						>
-							<EyeIcon class="h-5 w-5" />
-							<span class="">View</span>
-						</button>
-					</Transition>
-				</div>
-			</Transition>
-
-			<Transition name="scroll-to-bottom">
-				<button
-					v-if="bottomThreshold > 0 && !isScrolledToBottom && !loading"
-					data-pyro-scrolltobottom
-					label="Scroll to bottom"
-					class="scroll-to-bottom-btn experimental-styles-within absolute bottom-[4.5rem] right-4 z-[3] grid h-12 w-12 place-content-center rounded-full border-[1px] border-solid border-button-border bg-bg-raised text-contrast transition-all duration-200 hover:scale-110 active:scale-95"
-					@click="scrollToBottom"
-				>
-					<RightArrowIcon class="rotate-90" />
-					<span class="sr-only">Scroll to bottom</span>
-				</button>
-			</Transition>
-		</div>
-		<NewModal ref="viewLogModal" class="z-[9999]" header="Viewing selected logs">
-			<div class="text-contrast">
-				<pre
-					class="select-text overflow-x-auto whitespace-pre rounded-lg bg-bg font-mono"
-					v-html="processedLogWithLinks"
-				></pre>
-				<div v-if="detectedLinks.length" class="border-contrast/20 mt-4 border-t pt-4">
-					<h2>Detected Links</h2>
-					<ul class="flex flex-col gap-2">
-						<li v-for="(link, index) in detectedLinks" :key="index">
-							<a
-								:href="link"
-								target="_blank"
-								rel="noopener noreferrer"
-								class="text-sm text-blue hover:underline"
-							>
-								{{ link }}
-							</a>
-						</li>
-					</ul>
-				</div>
-			</div>
-		</NewModal>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { CopyIcon, EyeIcon, RightArrowIcon, SearchIcon, XIcon } from '@modrinth/assets'
-import { NewModal, StyledInput } from '@modrinth/ui'
-import ButtonStyled from '@modrinth/ui/src/components/base/ButtonStyled.vue'
-import { useDebounceFn } from '@vueuse/core'
-import DOMPurify from 'dompurify'
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-
-import { useModrinthServersConsole } from '~/store/console.ts'
-
-import FullscreenIcon from './icons/FullscreenIcon.vue'
-import MinimizeIconVue from './icons/MinimizeIcon.vue.vue'
-import LogLine from './LogLine.vue'
-
-const { $cosmetics } = useNuxtApp()
-const cosmetics = $cosmetics
-
-const props = defineProps<{
-	fullScreen: boolean
-	loading?: boolean
-}>()
-
-const BUFFER_SIZE = 5
-const BATCH_SIZE = 50
-const LINE_HEIGHT = 32
-const SEPARATOR_HEIGHT = 32
-const SCROLL_END_DELAY = 150
-const progressiveBlurIterations = ref(8)
-
-const pyroConsole = useModrinthServersConsole()
-const consoleOutput = computed(() => (props.loading ? [] : pyroConsole.output.value))
-
-const scrollContainer = ref<HTMLElement | null>(null)
-
-const isFullScreen = ref(props.fullScreen)
-
-const initialBatch = ref(false)
-const isInitialLoad = ref(true)
-
-const startY = ref(0)
-const scrollTop = ref(0)
-const clientHeight = ref(0)
-const startScrollTop = ref(0)
-const bottomThreshold = ref(0)
-const isAutoScrolling = ref(false)
-const userHasScrolled = ref(false)
-const isScrolledToBottom = ref(true)
-const scrollEndTimeout = ref<NodeJS.Timeout | null>(null)
-const isScrolling = ref(false)
-
-const scrollbarTrack = ref<HTMLElement | null>(null)
-const scrollbarThumb = ref<HTMLElement | null>(null)
-const isDragging = ref(false)
-
-const searchInput = ref('')
-
-const viewLogModal = ref<InstanceType<typeof NewModal>>()
-const selectedLog = ref('')
-const selectionStart = ref<number | null>(null)
-const selectionEnd = ref<number | null>(null)
-const isSelecting = ref(false)
-const autoScrollSpeed = ref(0)
-const autoScrollInterval = ref<NodeJS.Timeout | null>(null)
-const lastClickIndex = ref<number | null>(null)
-const lastMouseEvent = ref<MouseEvent | null>(null)
-
-const lerp = (start: number, end: number, t: number) => start * (1 - t) + end * t
-
-const getBlurStyle = (i: number) => {
-	const properBlurIteration = i + 1
-	const blur = lerp(0, 2 ** (properBlurIteration - 3), bottomThreshold.value)
-	const singular = 100 / progressiveBlurIterations.value
-	let mask = 'linear-gradient('
-
-	switch (i) {
-		case 0:
-			mask += `rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) ${singular}%`
-			break
-		case 1:
-			mask += `rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) ${singular}%, rgb(0, 0, 0) ${singular * 2}%`
-			break
-		case 2:
-			mask += `rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) ${singular}%, rgba(0, 0, 0, 0) ${singular * 2}%, rgb(0, 0, 0) ${singular * 3}%`
-			break
-		default:
-			mask += `rgba(0, 0, 0, 0) ${singular * (i - 3)}%, rgb(0, 0, 0) ${singular * (i + 1 - 3)}%, rgb(0, 0, 0) ${singular * (i + 2 - 3)}%, rgba(0, 0, 0, 0) ${singular * (i + 3 - 3)}%`
-			break
-	}
-
-	mask += `)`
-
-	return {
-		backdropFilter: `blur(${blur}px)`,
-		mask,
-		position: 'absolute' as any,
-		zIndex: progressiveBlurIterations.value - i,
-	}
-}
-
-const updateSearch = useDebounceFn((value: string) => {
-	pyroConsole.setSearchQuery(value)
-
-	selectionStart.value = null
-	selectionEnd.value = null
-	lastClickIndex.value = null
-
-	nextTick(() => {
-		if (!scrollContainer.value) return
-
-		if (!value) {
-			handleListScroll()
-			return
-		}
-
-		if (pyroConsole.filteredOutput.value.length > 0) {
-			scrollContainer.value.scrollTop = 0
-			handleListScroll()
-		}
-	})
-}, 300)
-
-const clearSearch = () => {
-	searchInput.value = ''
-	pyroConsole.setSearchQuery('')
-}
-
-const activeOutput = computed(() => {
-	return searchInput.value ? pyroConsole.filteredOutput.value : consoleOutput.value
-})
-
-const shouldShowSeparator = (currentIndex: number, nextIndex: number) => {
-	if (!searchInput.value || nextIndex >= activeOutput.value.length) return 0
-
-	const currentLine = activeOutput.value[currentIndex]
-	const nextLine = activeOutput.value[nextIndex]
-
-	const currentOriginalIndex = consoleOutput.value.indexOf(currentLine)
-	const nextOriginalIndex = consoleOutput.value.indexOf(nextLine)
-
-	const linesBetween = nextOriginalIndex - currentOriginalIndex - 1
-	return linesBetween > 0 ? linesBetween : 0
-}
-
-const totalHeight = computed(() => {
-	const baseHeight = activeOutput.value.length * LINE_HEIGHT
-	if (!searchInput.value) return baseHeight
-
-	let separatorCount = 0
-	for (let i = 0; i < activeOutput.value.length - 1; i++) {
-		if (shouldShowSeparator(i, i + 1)) {
-			separatorCount++
-		}
-	}
-
-	return baseHeight + separatorCount * SEPARATOR_HEIGHT
-})
-
-const getLineIndexForPosition = (position: number) => {
-	if (!searchInput.value) {
-		return Math.floor(position / LINE_HEIGHT)
-	}
-
-	let accHeight = 0
-	let index = 0
-
-	while (index < activeOutput.value.length) {
-		if (accHeight >= position) {
-			break
-		}
-		accHeight += LINE_HEIGHT
-		if (shouldShowSeparator(index, index + 1)) {
-			accHeight += SEPARATOR_HEIGHT
-		}
-		index++
-	}
-
-	return index
-}
-
-const getPositionForLineIndex = (index: number) => {
-	if (!searchInput.value) {
-		return index * LINE_HEIGHT
-	}
-
-	let position = 0
-	for (let i = 0; i < index; i++) {
-		position += LINE_HEIGHT
-		if (shouldShowSeparator(i, i + 1)) {
-			position += SEPARATOR_HEIGHT
-		}
-	}
-
-	return position
-}
-
-const visibleStartIndex = computed(() => {
-	const rawPosition = Math.max(0, scrollTop.value - LINE_HEIGHT * BUFFER_SIZE)
-	return getLineIndexForPosition(rawPosition)
-})
-
-const visibleEndIndex = computed(() => {
-	const rawPosition = scrollTop.value + clientHeight.value + LINE_HEIGHT * BUFFER_SIZE
-	return Math.min(activeOutput.value.length - 1, getLineIndexForPosition(rawPosition))
-})
-
-const offsetY = computed(() => {
-	return getPositionForLineIndex(visibleStartIndex.value)
-})
-
-const visibleItems = computed(() => {
-	const start = visibleStartIndex.value
-	const end = visibleEndIndex.value
-	const items = []
-
-	for (let i = start; i <= end; i += BATCH_SIZE) {
-		const chunk = activeOutput.value.slice(i, Math.min(i + BATCH_SIZE, end + 1))
-		items.push(...chunk)
-	}
-
-	return items
-})
-
-const handleListScroll = () => {
-	if (!scrollContainer.value) return
-
-	const container = scrollContainer.value
-	scrollTop.value = container.scrollTop
-	clientHeight.value = container.clientHeight
-
-	const scrollHeight = container.scrollHeight
-	const threshold = 32
-
-	isScrolling.value = true
-
-	if (scrollEndTimeout.value) {
-		clearTimeout(scrollEndTimeout.value)
-	}
-
-	scrollEndTimeout.value = setTimeout(() => {
-		if (!isSelecting.value) {
-			isScrolling.value = false
-		}
-		const finalPosition = scrollHeight - container.scrollTop - clientHeight.value
-		isScrolledToBottom.value = finalPosition <= threshold
-		bottomThreshold.value = Math.min(1, finalPosition / 256)
-	}, SCROLL_END_DELAY)
-
-	isScrolledToBottom.value = scrollHeight - scrollTop.value - clientHeight.value <= threshold
-
-	if (!isScrolledToBottom.value && !isAutoScrolling.value) {
-		userHasScrolled.value = true
-	}
-
-	bottomThreshold.value = Math.min(1, (scrollHeight - scrollTop.value - clientHeight.value) / 256)
-
-	if (searchInput.value) {
-		nextTick(() => {
-			container.style.transform = 'translateZ(0)'
-			requestAnimationFrame(() => {
-				container.style.transform = ''
-			})
-		})
-	}
-}
-
-const updateClientHeight = () => {
-	if (scrollContainer.value) {
-		clientHeight.value = scrollContainer.value.clientHeight
-	}
-}
-
-const scrollToBottom = () => {
-	if (!scrollContainer.value) return
-
-	isAutoScrolling.value = true
-	const container = scrollContainer.value
-
-	nextTick(() => {
-		const maxScroll = container.scrollHeight - container.clientHeight
-		container.scrollTop = maxScroll
-
-		setTimeout(() => {
-			if (container.scrollTop < maxScroll) {
-				container.scrollTop = maxScroll
-			}
-			isAutoScrolling.value = false
-			userHasScrolled.value = false
-			isScrolledToBottom.value = true
-			handleListScroll()
-		}, 50)
-	})
-}
-
-const getThumbHeight = () => {
-	if (!scrollContainer.value || !scrollbarTrack.value) return 30
-
-	const contentHeight = scrollContainer.value.scrollHeight
-	const viewportHeight = scrollContainer.value.clientHeight
-	const trackHeight = scrollbarTrack.value.clientHeight
-
-	const heightRatio = viewportHeight / contentHeight
-
-	const minThumbHeight = Math.min(40, trackHeight / 2)
-
-	const proposedHeight = Math.max(heightRatio * trackHeight, minThumbHeight)
-
-	return Math.min(proposedHeight, trackHeight)
-}
-
-const getThumbPosition = () => {
-	if (!scrollContainer.value || !scrollbarTrack.value) return 0
-
-	const contentHeight = scrollContainer.value.scrollHeight
-	const viewportHeight = scrollContainer.value.clientHeight
-	const trackHeight = scrollbarTrack.value.clientHeight
-	const scrollProgress = scrollTop.value / (contentHeight - viewportHeight)
-
-	const thumbHeight = getThumbHeight()
-	const availableTrackSpace = trackHeight - thumbHeight
-
-	return Math.max(0, Math.min(scrollProgress * availableTrackSpace, availableTrackSpace))
-}
-
-const startDragging = (event: MouseEvent) => {
-	event.preventDefault()
-	event.stopPropagation()
-
-	if (!scrollContainer.value || !scrollbarTrack.value) return
-
-	isDragging.value = true
-	startY.value = event.clientY
-	startScrollTop.value = scrollContainer.value.scrollTop
-
-	window.addEventListener('mousemove', handleDragging)
-	window.addEventListener('mouseup', stopDragging)
-
-	document.body.style.userSelect = 'none'
-	document.body.style.pointerEvents = 'none'
-}
-
-const handleDragging = (event: MouseEvent) => {
-	if (!isDragging.value || !scrollContainer.value || !scrollbarTrack.value) return
-
-	const trackRect = scrollbarTrack.value.getBoundingClientRect()
-	const deltaY = event.clientY - startY.value
-
-	const trackHeight = trackRect.height
-	const contentHeight = scrollContainer.value.scrollHeight
-	const viewportHeight = scrollContainer.value.clientHeight
-	const maxScroll = contentHeight - viewportHeight
-
-	const moveRatio = deltaY / trackHeight
-	const scrollDelta = moveRatio * maxScroll
-
-	const newScrollTop = Math.max(0, Math.min(startScrollTop.value + scrollDelta, maxScroll))
-	scrollContainer.value.scrollTop = newScrollTop
-}
-
-const stopDragging = () => {
-	isDragging.value = false
-
-	window.removeEventListener('mousemove', handleDragging)
-	window.removeEventListener('mouseup', stopDragging)
-
-	document.body.style.userSelect = ''
-	document.body.style.pointerEvents = ''
-}
-
-const handleTrackClick = (event: MouseEvent) => {
-	if (!scrollContainer.value || !scrollbarTrack.value || event.target === scrollbarThumb.value)
-		return
-
-	const trackRect = scrollbarTrack.value.getBoundingClientRect()
-	const trackHeight = trackRect.height
-	const clickRatio = (event.clientY - trackRect.top) / trackHeight
-
-	const maxScroll = scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight
-	const newScrollTop = clickRatio * maxScroll
-
-	scrollContainer.value.scrollTop = Math.max(0, Math.min(newScrollTop, maxScroll))
-}
-
-const setBodyScroll = (enabled: boolean) => {
-	if (enabled) {
-		document.body.style.overflow = ''
-		document.body.style.position = ''
-		document.body.style.width = ''
-	} else {
-		document.body.style.overflow = 'hidden'
-		document.body.style.position = 'fixed'
-		document.body.style.width = '100%'
-	}
-}
-
-const enterFullScreen = () => {
-	isFullScreen.value = true
-	setBodyScroll(false)
-	nextTick(() => {
-		updateClientHeight()
-	})
-}
-
-const exitFullScreen = () => {
-	isFullScreen.value = false
-	setBodyScroll(true)
-	nextTick(() => {
-		updateClientHeight()
-	})
-}
-
-const toggleFullscreen = () => {
-	if (isFullScreen.value) {
-		exitFullScreen()
-	} else {
-		enterFullScreen()
-	}
-}
-
-const handleKeydown = (event: KeyboardEvent) => {
-	if (event.key === 'Escape') {
-		if (selectionStart.value !== null || selectionEnd.value !== null) {
-			selectionStart.value = null
-			selectionEnd.value = null
-			lastClickIndex.value = null
-			return
-		}
-
-		if (searchInput.value) {
-			clearSearch()
-			return
-		}
-
-		if (isFullScreen.value) {
-			exitFullScreen()
-		}
-	}
-}
-
-const handleGlobalMouseUp = () => {
-	if (isSelecting.value) {
-		endLineSelection()
-	}
-}
-
-const handleClickOutside = (event: MouseEvent) => {
-	if (!event.target || !(event.target instanceof Node)) return
-	const terminalElement = document.querySelector('[data-pyro-terminal]')
-	if (!terminalElement || !terminalElement.contains(event.target)) {
-		selectionStart.value = null
-		selectionEnd.value = null
-		lastClickIndex.value = null
-	}
-}
-
-const initializeTerminal = () => {
-	if (!scrollContainer.value) return
-
-	updateClientHeight()
-
-	nextTick(() => {
-		nextTick(() => {
-			const container = scrollContainer.value
-			if (container) {
-				container.scrollTop = container.scrollHeight
-				handleListScroll()
-				initialBatch.value = true
-			}
-		})
-	})
-}
-
-const showFullLogMessage = (log: string) => {
-	selectedLog.value = log
-	viewLogModal.value?.show()
-}
-
-const showSelectedLines = () => {
-	if (!hasSelection.value) return
-
-	const start = Math.min(selectionStart.value!, selectionEnd.value!)
-	const end = Math.max(selectionStart.value!, selectionEnd.value!)
-	const selectedLines = activeOutput.value.slice(start, end + 1)
-
-	selectedLog.value = selectedLines.join('\n')
-	viewLogModal.value?.show()
-}
-
-const virtualListStyle = computed(() => ({
-	transform: `translateY(${offsetY.value}px)`,
-}))
-
-const isLineSelected = (index: number) => {
-	if (selectionStart.value === null || selectionEnd.value === null) return false
-	const start = Math.min(selectionStart.value, selectionEnd.value)
-	const end = Math.max(selectionStart.value, selectionEnd.value)
-	return index >= start && index <= end
-}
-
-const handleContextMenu = () => {
-	if (isSelecting.value) {
-		endLineSelection()
-	}
-}
-
-const handleMouseDown = (event: MouseEvent) => {
-	if (event.button === 2) {
-		if (isSelecting.value) {
-			endLineSelection()
-		}
-		return
-	}
-
-	const lineIndex = getLineIndexFromEvent(event)
-	if (lineIndex === null) return
-
-	if (event.shiftKey && lastClickIndex.value !== null) {
-		selectionStart.value = lastClickIndex.value
-		selectionEnd.value = lineIndex
-		isSelecting.value = false
-	} else {
-		isSelecting.value = true
-		selectionStart.value = lineIndex
-		selectionEnd.value = lineIndex
-		lastClickIndex.value = lineIndex
-		startAutoScroll()
-	}
-}
-
-const updateLineSelection = (event: MouseEvent) => {
-	if (!isSelecting.value) return
-
-	const lineIndex = getLineIndexFromEvent(event)
-	if (lineIndex === null) return
-
-	selectionEnd.value = lineIndex
-	lastMouseEvent.value = event
-
-	const rect = scrollContainer.value?.getBoundingClientRect()
-	if (!rect) return
-
-	const threshold = 80
-	const y = event.clientY
-
-	const distanceFromTop = Math.max(0, threshold - (y - rect.top))
-	const distanceFromBottom = Math.max(0, threshold - (rect.bottom - y))
-
-	if (distanceFromTop > 0) {
-		autoScrollSpeed.value = -Math.min(20, distanceFromTop / 2)
-	} else if (distanceFromBottom > 0) {
-		autoScrollSpeed.value = Math.min(20, distanceFromBottom / 2)
-	} else {
-		autoScrollSpeed.value = 0
-	}
-}
-
-const endLineSelection = () => {
-	if (!isSelecting.value) return
-	isSelecting.value = false
-	stopAutoScroll()
-}
-
-const getLineIndexFromEvent = (event: MouseEvent): number | null => {
-	if (!scrollContainer.value) return null
-
-	const rect = scrollContainer.value.getBoundingClientRect()
-	const rawY = event.clientY - rect.top + scrollContainer.value.scrollTop
-
-	if (searchInput.value) {
-		const adjustedY = Math.max(0, rawY - 48)
-		return Math.max(0, Math.min(getLineIndexForPosition(adjustedY), activeOutput.value.length - 1))
-	}
-
-	const adjustedY = Math.max(0, rawY - 24)
-	return Math.floor(adjustedY / LINE_HEIGHT)
-}
-
-const startAutoScroll = () => {
-	if (autoScrollInterval.value) return
-	autoScrollInterval.value = setInterval(() => {
-		if (!scrollContainer.value || autoScrollSpeed.value === 0) return
-		scrollContainer.value.scrollTop += autoScrollSpeed.value
-		if (lastMouseEvent.value) {
-			updateLineSelection(lastMouseEvent.value)
-		}
-	}, 16)
-}
-
-const stopAutoScroll = () => {
-	if (autoScrollInterval.value) {
-		clearInterval(autoScrollInterval.value)
-		autoScrollInterval.value = null
-	}
-	autoScrollSpeed.value = 0
-}
-
-const handleCopy = (event: KeyboardEvent) => {
-	if (!event.metaKey && !event.ctrlKey) return
-	if (event.key !== 'c') return
-	if (selectionStart.value === null || selectionEnd.value === null) return
-
-	event.preventDefault()
-
-	const start = Math.min(selectionStart.value, selectionEnd.value)
-	const end = Math.max(selectionStart.value, selectionEnd.value)
-	const selectedLines = activeOutput.value.slice(start, end + 1)
-
-	navigator.clipboard.writeText(selectedLines.join('\n'))
-
-	selectionStart.value = null
-	selectionEnd.value = null
-	lastClickIndex.value = null
-}
-
-const hasSelection = computed(
-	() =>
-		selectionStart.value !== null &&
-		selectionEnd.value !== null &&
-		selectionStart.value !== selectionEnd.value,
-)
-
-const isSingleLineSelected = computed(
-	() =>
-		selectionStart.value !== null &&
-		selectionEnd.value !== null &&
-		selectionStart.value === selectionEnd.value,
-)
-
-const copySelectedLines = () => {
-	if (!hasSelection.value && !isSingleLineSelected.value) return
-
-	let selectedLines
-	if (isSingleLineSelected.value) {
-		const index = selectionStart.value!
-		selectedLines = [activeOutput.value[index]]
-	} else {
-		const start = Math.min(selectionStart.value!, selectionEnd.value!)
-		const end = Math.max(selectionStart.value!, selectionEnd.value!)
-		selectedLines = activeOutput.value.slice(start, end + 1)
-	}
-
-	navigator.clipboard.writeText(selectedLines.join('\n'))
-
-	selectionStart.value = null
-	selectionEnd.value = null
-	lastClickIndex.value = null
-}
-
-const getSelectionPosition = () => {
-	if (!hasSelection.value || !scrollContainer.value) return { start: 0, end: 0 }
-
-	const start = Math.min(selectionStart.value!, selectionEnd.value!)
-	const end = Math.max(selectionStart.value!, selectionEnd.value!)
-
-	const totalLines = activeOutput.value.length
-
-	return {
-		start: (start / totalLines) * 100,
-		end: ((end + 1) / totalLines) * 100,
-	}
-}
-
-const jumpToLine = (line: string, event?: MouseEvent) => {
-	event?.preventDefault()
-	event?.stopPropagation()
-
-	const index = pyroConsole.findLineIndex(line)
-	if (index === -1) return
-
-	const filteredLineIndex = pyroConsole.filteredOutput.value.indexOf(line)
-	if (filteredLineIndex === -1) return
-
-	let filteredTargetPosition = 0
-	for (let i = 0; i < filteredLineIndex; i++) {
-		filteredTargetPosition += LINE_HEIGHT
-		if (shouldShowSeparator(i, i + 1)) {
-			filteredTargetPosition += SEPARATOR_HEIGHT
-		}
-	}
-
-	const viewportHeight = scrollContainer.value?.clientHeight ?? 0
-	const currentScrollPosition = scrollContainer.value?.scrollTop ?? 0
-	const relativePosition = (filteredTargetPosition - currentScrollPosition) / viewportHeight
-
-	const targetLineRelativeOffset = relativePosition
-	const targetLine = line
-
-	clearSearch()
-
-	nextTick(() => {
-		if (!scrollContainer.value) return
-
-		const targetPosition = index * LINE_HEIGHT
-		const containerHeight = scrollContainer.value.clientHeight
-		const targetScrollTop = Math.max(0, targetPosition - containerHeight * targetLineRelativeOffset)
-
-		scrollContainer.value.scrollTop = targetScrollTop
-
-		requestAnimationFrame(() => {
-			handleListScroll()
-
-			const elements = scrollContainer.value?.getElementsByTagName('li')
-			if (!elements) return
-
-			const targetElement = Array.from(elements).find(
-				(el) =>
-					el.textContent?.includes(targetLine) && !el.hasAttribute('data-pyro-terminal-separator'),
-			)
-
-			if (targetElement) {
-				targetElement.classList.add('jumped-line')
-				requestAnimationFrame(() => {
-					targetElement.classList.add('jumped-line-active')
-					setTimeout(() => {
-						targetElement.classList.remove('jumped-line-active')
-						targetElement.classList.remove('jumped-line')
-					}, 4000)
-				})
-			}
-		})
-	})
-}
-
-const sanitizeUrl = (url: string): string => {
-	try {
-		const parsed = new URL(url)
-		if (!['http:', 'https:'].includes(parsed.protocol)) {
-			return '#'
-		}
-		return parsed.toString()
-	} catch {
-		return '#'
-	}
-}
-
-const detectedLinks = computed(() => {
-	const urlRegex = /(https?:\/\/[^\s,<]+(?=[,\s<]|$))/g
-	const matches = [...selectedLog.value.matchAll(urlRegex)].map((match) => match[0])
-	return matches.filter((url) => sanitizeUrl(url) !== '#')
-})
-
-const processedLogWithLinks = computed(() => {
-	const urlRegex = /(https?:\/\/[^\s,<]+(?=[,\s<]|$))/g
-	const sanitizedLog = DOMPurify.sanitize(selectedLog.value, {
-		ALLOWED_TAGS: [],
-		ALLOWED_ATTR: [],
-	})
-
-	return sanitizedLog.replace(urlRegex, (url) => {
-		const safeUrl = sanitizeUrl(url)
-		if (safeUrl === '#') return url
-		return `<a href="${safeUrl}" target="_blank" rel="noopener noreferrer nofollow" class="text-blue hover:underline">${url}</a>`
-	})
-})
-
-watch(
-	() => pyroConsole.filteredOutput.value,
-	() => {
-		nextTick(() => {
-			handleListScroll()
-		})
-	},
-)
-
-watch(searchInput, (value) => {
-	updateSearch(value)
-})
-
-watch(
-	() => consoleOutput.value,
-	(newOutput, oldOutput) => {
-		if (!oldOutput || newOutput.length <= oldOutput.length) return
-
-		const shouldScroll = isScrolledToBottom.value || !userHasScrolled.value || isInitialLoad.value
-
-		if (shouldScroll) {
-			if (isInitialLoad.value) {
-				setTimeout(() => {
-					scrollToBottom()
-					isInitialLoad.value = false
-				}, 100)
-			} else {
-				nextTick(scrollToBottom)
-			}
-		}
-	},
-	{ flush: 'post' },
-)
-
-watch(
-	() => pyroConsole.filteredOutput.value,
-	() => {
-		if (searchInput.value && scrollContainer.value) {
-			nextTick(() => {
-				handleListScroll()
-			})
-		}
-	},
-)
-
-watch(
-	() => props.fullScreen,
-	(newValue) => {
-		isFullScreen.value = newValue
-		nextTick(() => {
-			updateClientHeight()
-		})
-	},
-)
-
-watch(isFullScreen, () => {
-	nextTick(() => {
-		updateClientHeight()
-	})
-})
-
-onMounted(() => {
-	initializeTerminal()
-
-	window.addEventListener('resize', updateClientHeight)
-	window.addEventListener('keydown', handleKeydown)
-	window.addEventListener('mouseup', handleGlobalMouseUp)
-	window.addEventListener('contextmenu', handleContextMenu)
-	window.addEventListener('click', handleClickOutside)
-})
-
-onUnmounted(() => {
-	window.removeEventListener('resize', updateClientHeight)
-	window.removeEventListener('keydown', handleKeydown)
-	window.removeEventListener('mouseup', handleGlobalMouseUp)
-	window.removeEventListener('contextmenu', handleContextMenu)
-	window.removeEventListener('click', handleClickOutside)
-	stopDragging()
-	setBodyScroll(true)
-	if (scrollEndTimeout.value) {
-		clearTimeout(scrollEndTimeout.value)
-	}
-})
-
-onMounted(() => {
-	window.addEventListener('keydown', handleCopy)
-})
-
-onUnmounted(() => {
-	window.removeEventListener('keydown', handleCopy)
-	stopAutoScroll()
-})
-</script>
-
-<style scoped>
-:root {
-	--console-bg: var(--color-bg);
-}
-
-.terminal-font {
-	font-family: var(--mono-font);
-	font-size: 1rem;
-	line-height: 1.5em;
-}
-
-html.light-mode .console {
-	--console-bg: var(--color-bg);
-}
-
-html.dark-mode .console {
-	--console-bg: black;
-}
-
-html.oled-mode .console {
-	--console-bg: black;
-}
-
-.console {
-	background: var(--console-bg);
-}
-
-.scrollbar-none {
-	-ms-overflow-style: none;
-	scrollbar-width: none;
-}
-
-.scrollbar-none::-webkit-scrollbar {
-	display: none;
-}
-
-[data-pyro-terminal-root]::-webkit-scrollbar,
-[data-pyro-terminal-root]::-webkit-scrollbar-thumb,
-[data-pyro-terminal-root]::-webkit-scrollbar-track-piece,
-[data-pyro-terminal-root]::-webkit-scrollbar-corner {
-	display: none;
-}
-
-.screen-fixed {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100vw;
-	height: 100vh;
-	z-index: 50;
-	background: var(--color-bg);
-}
-
-@keyframes scaleUp {
-	from {
-		opacity: 0;
-		transform: scale(0.98);
-	}
-	to {
-		opacity: 1;
-		transform: scale(1);
-	}
-}
-
-.scale-fullscreen {
-	animation: scaleUp 190ms forwards;
-}
-
-.progressive-gradient {
-	background: linear-gradient(
-		to top,
-		color-mix(in srgb, var(--color-bg), transparent var(--transparency)) 0%,
-		rgba(0, 0, 0, 0) 100%
-	);
-}
-
-html.dark-mode .progressive-gradient {
-	background: linear-gradient(
-		to top,
-		color-mix(in srgb, black, transparent var(--transparency)) 0%,
-		rgba(0, 0, 0, 0) 100%
-	);
-}
-
-.scroll-to-bottom-enter-active,
-.scroll-to-bottom-leave-active {
-	transition:
-		opacity 300ms ease,
-		transform 300ms ease;
-}
-
-.scroll-to-bottom-enter-from,
-.scroll-to-bottom-leave-to {
-	opacity: 0;
-	transform: scale(0.4) translateY(2rem);
-}
-
-[data-pyro-terminal-selected='true'] {
-	border-radius: 0;
-}
-
-[data-pyro-terminal-selected='true'].first-selected {
-	border-top-left-radius: 0.5rem;
-	border-top-right-radius: 0.5rem;
-	overflow: hidden !important;
-}
-
-[data-pyro-terminal-selected='true'].last-selected {
-	border-bottom-left-radius: 0.5rem;
-	border-bottom-right-radius: 0.5rem;
-	overflow: hidden !important;
-}
-
-[data-pyro-terminal-root] {
-	will-change: transform;
-	backface-visibility: hidden;
-	transform: translateZ(0);
-	-webkit-font-smoothing: subpixel-antialiased;
-}
-
-[data-pyro-terminal-root] {
-	user-select: none;
-}
-
-[data-pyro-terminal-root] * {
-	user-select: text;
-}
-
-.selection-in-progress {
-	pointer-events: none;
-}
-
-[data-pyro-terminal-virtual-list] {
-	will-change: transform;
-	transform: translateZ(0);
-}
-
-[data-pyro-terminal-scrollbar-thumb] {
-	will-change: transform;
-	transform: translateZ(0);
-}
-
-[data-pyro-terminal-virtual-list] li {
-	height: 32px;
-	transition: background-color 0.1s ease;
-}
-
-.selected-line {
-	background: color-mix(in srgb, var(--color-blue) 20%, transparent) !important;
-	position: relative;
-}
-
-.selected-line::before {
-	content: '';
-	position: absolute;
-	left: 0;
-	top: -2px;
-	bottom: -2px;
-	width: 3px;
-	border-radius: 0.5rem;
-	background: var(--color-blue);
-}
-
-.selected-line:hover {
-	background: color-mix(in srgb, var(--color-blue) 24%, transparent) !important;
-}
-
-[data-pyro-terminal-virtual-list] li {
-	height: 32px;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-	transition: opacity 200ms ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-	opacity: 0;
-}
-
-.scrolling-active {
-	pointer-events: none;
-}
-
-.scrolling-active li {
-	pointer-events: none;
-}
-
-[data-pyro-terminal-scrollbar-track] {
-	border-radius: 24px;
-}
-
-[data-pyro-terminal-scrollbar-thumb] {
-	background: color-mix(in srgb, var(--color-contrast) 40%, transparent);
-}
-
-.view-button-enter-active {
-	transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
-	width: 100px;
-	margin-left: 0.5rem;
-	overflow: hidden;
-}
-
-.view-button-leave-active {
-	transition: all 200ms cubic-bezier(0.4, 0, 1, 1);
-	overflow: hidden;
-}
-
-.view-button-enter-from,
-.view-button-leave-to {
-	opacity: 0;
-	width: 0;
-	margin-left: 0;
-	padding-left: 0;
-	padding-right: 0;
-}
-
-.view-button-enter-active,
-.view-button-leave-active {
-	transition: all 200ms ease;
-	width: 100px;
-	margin-left: 0.5rem;
-}
-
-.view-button-enter-from,
-.view-button-leave-to {
-	opacity: 0;
-	width: 0;
-	margin-left: 0;
-}
-
-.jumped-line {
-	position: relative;
-	z-index: 1;
-}
-
-.jumped-line-active {
-	animation: highlight-jump 2s ease;
-}
-
-@keyframes highlight-jump {
-	0% {
-		background: transparent;
-	}
-	15%,
-	85% {
-		background: color-mix(in srgb, var(--color-blue) 15%, transparent);
-	}
-	100% {
-		background: transparent;
-	}
-}
-
-.jump-button {
-	opacity: 0.4;
-	transition: all 0.2s ease;
-}
-
-.group:hover .jump-button {
-	opacity: 0.8;
-}
-
-.group:hover .jump-button:hover {
-	opacity: 1;
-}
-</style>
diff --git a/apps/frontend/src/components/ui/servers/PlatformChangeModpackVersionModal.vue b/apps/frontend/src/components/ui/servers/PlatformChangeModpackVersionModal.vue
deleted file mode 100644
index e7b0c74ed7..0000000000
--- a/apps/frontend/src/components/ui/servers/PlatformChangeModpackVersionModal.vue
+++ /dev/null
@@ -1,163 +0,0 @@
-<template>
-	<NewModal
-		ref="modal"
-		:header="'Changing ' + props.project?.title + ' version'"
-		@hide="onHide"
-		@show="onShow"
-	>
-		<div class="flex flex-col gap-4 md:w-[600px]">
-			<div class="flex flex-col gap-2">
-				<p class="m-0">
-					Select the version of {{ props.project?.title || 'the modpack' }} you want to install on
-					your server.
-				</p>
-				<p v-if="props.currentVersion" class="m-0 text-sm text-secondary">
-					Currently installed: {{ props.currentVersion.version_number }}
-				</p>
-			</div>
-
-			<div class="flex w-full flex-col gap-4">
-				<Combobox
-					v-if="props.versions?.length"
-					v-model="selectedVersion"
-					:options="versionOptions.map((v) => ({ value: v, label: v }))"
-					:display-value="selectedVersion || 'Select version...'"
-					placeholder="Select version..."
-					name="version"
-					class="w-full max-w-full"
-				/>
-
-				<div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
-					<div class="flex w-full flex-row items-center justify-between">
-						<label class="w-full text-lg font-bold text-contrast" for="modpack-hard-reset">
-							Erase all data
-						</label>
-						<Toggle id="modpack-hard-reset" v-model="hardReset" class="shrink-0" />
-					</div>
-					<div>
-						If enabled, existing mods, worlds, and configurations, will be deleted before installing
-						the new modpack version.
-					</div>
-				</div>
-
-				<div class="mt-4 flex justify-start gap-4">
-					<ButtonStyled :color="hardReset ? 'red' : 'brand'">
-						<button
-							:disabled="isLoading || !selectedVersion || props.serverStatus === 'installing'"
-							@click="handleReinstall"
-						>
-							<DownloadIcon class="size-4" />
-							{{ isLoading ? 'Installing...' : hardReset ? 'Erase and install' : 'Install' }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled>
-						<button :disabled="isLoading" @click="hide">
-							<XIcon />
-							Cancel
-						</button>
-					</ButtonStyled>
-				</div>
-			</div>
-		</div>
-	</NewModal>
-</template>
-
-<script setup lang="ts">
-import { DownloadIcon, XIcon } from '@modrinth/assets'
-import {
-	ButtonStyled,
-	Combobox,
-	injectModrinthClient,
-	injectModrinthServerContext,
-	injectNotificationManager,
-	NewModal,
-	Toggle,
-} from '@modrinth/ui'
-import { ModrinthServersFetchError } from '@modrinth/utils'
-
-const { serverId } = injectModrinthServerContext()
-const client = injectModrinthClient()
-const { addNotification } = injectNotificationManager()
-
-const props = defineProps<{
-	project: any
-	versions: any[]
-	currentVersion?: any
-	currentVersionId?: string
-	serverStatus?: string
-}>()
-
-const emit = defineEmits<{
-	reinstall: [any?]
-}>()
-
-const modal = ref()
-const hardReset = ref(false)
-const isLoading = ref(false)
-const selectedVersion = ref(props.currentVersion?.version_number || '')
-
-const versionOptions = computed(() => props.versions?.map((v) => v.version_number) || [])
-
-const handleReinstall = async () => {
-	if (!selectedVersion.value || !props.project?.id) return
-
-	isLoading.value = true
-	try {
-		const versionId = props.versions.find((v) => v.version_number === selectedVersion.value)?.id
-
-		await client.archon.servers_v0.reinstall(
-			serverId,
-			{
-				project_id: props.project.id,
-				version_id: versionId,
-			},
-			hardReset.value,
-		)
-
-		emit('reinstall')
-		hide()
-	} catch (error) {
-		if (error instanceof ModrinthServersFetchError && error.statusCode === 429) {
-			addNotification({
-				title: 'Cannot reinstall server',
-				text: 'You are being rate limited. Please try again later.',
-				type: 'error',
-			})
-		} else {
-			addNotification({
-				title: 'Reinstall Failed',
-				text: 'An unexpected error occurred while reinstalling. Please try again later.',
-				type: 'error',
-			})
-		}
-	} finally {
-		isLoading.value = false
-	}
-}
-
-watch(
-	() => props.serverStatus,
-	(newStatus) => {
-		if (newStatus === 'installing') {
-			hide()
-		}
-	},
-)
-
-const onShow = () => {
-	hardReset.value = false
-	selectedVersion.value =
-		props.currentVersion?.version_number ?? props.versions?.[0]?.version_number ?? ''
-}
-
-const onHide = () => {
-	hardReset.value = false
-	selectedVersion.value = ''
-	isLoading.value = false
-}
-
-const show = () => modal.value?.show()
-const hide = () => modal.value?.hide()
-
-defineExpose({ show, hide })
-</script>
diff --git a/apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue b/apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue
deleted file mode 100644
index f4ca68f7c0..0000000000
--- a/apps/frontend/src/components/ui/servers/PlatformVersionSelectModal.vue
+++ /dev/null
@@ -1,538 +0,0 @@
-<template>
-	<NewModal
-		ref="versionSelectModal"
-		:header="
-			isSecondPhase
-				? 'Confirming reinstallation'
-				: `${props.currentLoader === selectedLoader ? 'Reinstalling' : 'Installing'}
-      ${selectedLoader.toLowerCase() === 'vanilla' ? 'Vanilla Minecraft' : selectedLoader}`
-		"
-		@hide="onHide"
-		@show="onShow"
-	>
-		<div class="flex flex-col gap-4 md:w-[600px]">
-			<p
-				v-if="isSecondPhase"
-				:style="{
-					lineHeight: isSecondPhase ? '1.5' : undefined,
-					marginBottom: isSecondPhase ? '-12px' : '0',
-					marginTop: isSecondPhase ? '-4px' : '-2px',
-				}"
-			>
-				{{
-					'This will reinstall your server and erase all data. Are you sure you want to continue?'
-				}}
-			</p>
-			<div v-if="!isSecondPhase" class="flex flex-col gap-4">
-				<div class="mx-auto flex flex-row items-center gap-4">
-					<div
-						class="grid size-16 place-content-center rounded-2xl border-[2px] border-solid border-button-border bg-button-bg shadow-sm"
-					>
-						<LoaderIcon class="size-10" :loader="selectedLoader" />
-					</div>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						width="24"
-						height="24"
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="currentColor"
-						stroke-width="2"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						class="size-10"
-					>
-						<path d="M5 9v6" />
-						<path d="M9 9h3V5l7 7-7 7v-4H9V9z" />
-					</svg>
-					<div
-						class="grid size-16 place-content-center rounded-2xl border-[2px] border-solid border-button-border bg-table-alternateRow shadow-sm"
-					>
-						<ServerIcon class="size-10" />
-					</div>
-				</div>
-
-				<div class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4">
-					<div class="text-lg font-bold text-contrast">Minecraft version</div>
-					<Combobox
-						v-model="selectedMCVersion"
-						name="mcVersion"
-						:options="mcVersions.map((v) => ({ value: v, label: v }))"
-						:display-value="selectedMCVersion || 'Select Minecraft version...'"
-						class="!w-full"
-						placeholder="Select Minecraft version..."
-					/>
-					<div class="mt-2 flex items-center justify-between gap-2">
-						<label for="toggle-snapshots" class="font-semibold"> Show snapshot versions </label>
-						<div
-							v-tooltip="
-								isSnapshotSelected ? 'A snapshot version is currently selected.' : undefined
-							"
-						>
-							<Toggle
-								id="toggle-snapshots"
-								v-model="showSnapshots"
-								:disabled="isSnapshotSelected"
-							/>
-						</div>
-					</div>
-				</div>
-
-				<div
-					v-if="selectedLoader.toLowerCase() !== 'vanilla'"
-					class="flex w-full flex-col gap-2 rounded-2xl p-4"
-					:class="{
-						'bg-table-alternateRow':
-							!selectedMCVersion || isLoading || selectedLoaderVersions.length > 0,
-						'bg-highlight-red':
-							selectedMCVersion && !isLoading && selectedLoaderVersions.length === 0,
-					}"
-				>
-					<div class="flex flex-col gap-2">
-						<div class="text-lg font-bold text-contrast">{{ selectedLoader }} version</div>
-
-						<template v-if="!selectedMCVersion">
-							<div
-								class="relative flex h-9 w-full select-none items-center rounded-xl bg-button-bg px-4 opacity-50"
-							>
-								Select a Minecraft version to see available versions
-								<DropdownIcon class="absolute right-4" />
-							</div>
-						</template>
-						<template v-else-if="isLoading">
-							<div
-								class="relative flex h-9 w-full items-center rounded-xl bg-button-bg px-4 opacity-50"
-							>
-								<LoadingIcon class="mr-2 animate-spin" />
-								Loading versions...
-								<DropdownIcon class="absolute right-4" />
-							</div>
-						</template>
-						<template v-else-if="selectedLoaderVersions.length > 0">
-							<Combobox
-								v-model="selectedLoaderVersion"
-								name="loaderVersion"
-								:options="selectedLoaderVersions.map((v) => ({ value: v, label: v }))"
-								:display-value="
-									selectedLoaderVersion ||
-									(selectedLoader.toLowerCase() === 'paper' ||
-									selectedLoader.toLowerCase() === 'purpur'
-										? 'Select build number...'
-										: 'Select loader version...')
-								"
-								class="w-full max-w-[100%]"
-								:placeholder="
-									selectedLoader.toLowerCase() === 'paper' ||
-									selectedLoader.toLowerCase() === 'purpur'
-										? `Select build number...`
-										: `Select loader version...`
-								"
-							/>
-						</template>
-						<template v-else>
-							<div>No versions available for Minecraft {{ selectedMCVersion }}.</div>
-						</template>
-					</div>
-				</div>
-
-				<div
-					v-if="!initialSetup"
-					class="flex w-full flex-col gap-2 rounded-2xl bg-table-alternateRow p-4"
-				>
-					<div class="flex w-full flex-row items-center justify-between">
-						<label class="w-full text-lg font-bold text-contrast" for="hard-reset">
-							Erase all data
-						</label>
-						<Toggle id="hard-reset" v-model="hardReset" class="shrink-0" />
-					</div>
-					<div>
-						Removes all data on your server, including your worlds, mods, and configuration files,
-						then reinstalls it with the selected version.
-					</div>
-					<div class="font-bold">This does not affect your backups, which are stored off-site.</div>
-				</div>
-
-				<BackupWarning v-if="!initialSetup" :backup-link="`/hosting/manage/${serverId}/backups`" />
-			</div>
-
-			<div class="mt-4 flex justify-start gap-4">
-				<ButtonStyled :color="isDangerous ? 'red' : 'brand'">
-					<button
-						v-tooltip="busyReasons.length > 0 ? formatMessage(busyReasons[0].reason) : undefined"
-						:disabled="canInstall || busyReasons.length > 0"
-						@click="handleReinstall"
-					>
-						<RightArrowIcon />
-						{{
-							isLoading
-								? 'Installing...'
-								: isSecondPhase
-									? 'Erase and install'
-									: hardReset
-										? 'Continue'
-										: 'Install'
-						}}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled>
-					<button
-						:disabled="isLoading"
-						@click="
-							() => {
-								if (isSecondPhase) {
-									isSecondPhase = false
-								} else {
-									hide()
-								}
-							}
-						"
-					>
-						<XIcon />
-						{{ isSecondPhase ? 'Go back' : 'Cancel' }}
-					</button>
-				</ButtonStyled>
-			</div>
-		</div>
-	</NewModal>
-</template>
-
-<script setup lang="ts">
-import { DropdownIcon, RightArrowIcon, ServerIcon, XIcon } from '@modrinth/assets'
-import {
-	BackupWarning,
-	ButtonStyled,
-	Combobox,
-	injectModrinthClient,
-	injectModrinthServerContext,
-	injectNotificationManager,
-	NewModal,
-	Toggle,
-	useVIntl,
-} from '@modrinth/ui'
-import { type Loaders, ModrinthServersFetchError } from '@modrinth/utils'
-import { $fetch } from 'ofetch'
-
-import LoaderIcon from './icons/LoaderIcon.vue'
-import LoadingIcon from './icons/LoadingIcon.vue'
-
-const { server, serverId, busyReasons } = injectModrinthServerContext()
-const client = injectModrinthClient()
-const { addNotification } = injectNotificationManager()
-const { formatMessage } = useVIntl()
-
-interface LoaderVersion {
-	id: string
-	stable: boolean
-	loaders: {
-		id: string
-		url: string
-		stable: boolean
-	}[]
-}
-
-type VersionMap = Record<string, LoaderVersion[]>
-type VersionCache = Record<string, any>
-
-const props = defineProps<{
-	currentLoader: Loaders | undefined
-	initialSetup?: boolean
-}>()
-
-const emit = defineEmits<{
-	reinstall: [any?]
-}>()
-
-const versionSelectModal = ref()
-const isSecondPhase = ref(false)
-const hardReset = ref(false)
-const isLoading = ref(false)
-const loadingServerCheck = ref(false)
-const serverCheckError = ref('')
-const showSnapshots = ref(false)
-
-const selectedLoader = ref<Loaders>('Vanilla')
-const selectedMCVersion = ref('')
-const selectedLoaderVersion = ref('')
-
-const paperVersions = ref<Record<string, number[]>>({})
-const purpurVersions = ref<Record<string, string[]>>({})
-const loaderVersions = ref<VersionMap>({})
-const cachedVersions = ref<VersionCache>({})
-
-const versionStrings = ['forge', 'fabric', 'quilt', 'neo'] as const
-
-const isSnapshotSelected = computed(() => {
-	if (selectedMCVersion.value) {
-		const selected = tags.value.gameVersions.find((x) => x.version === selectedMCVersion.value)
-		if (selected?.version_type !== 'release') {
-			return true
-		}
-	}
-	return false
-})
-
-const getLoaderVersions = async (loader: string) => {
-	return await $fetch(
-		`https://launcher-meta.modrinth.com/${loader?.toLowerCase()}/v0/manifest.json`,
-	)
-}
-
-const fetchLoaderVersions = async () => {
-	const versions = await Promise.all(
-		versionStrings.map(async (loader) => {
-			const runFetch = async (iterations: number) => {
-				if (iterations > 5) {
-					throw new Error('Failed to fetch loader versions')
-				}
-				try {
-					const res = await getLoaderVersions(loader)
-					return { [loader]: (res as any).gameVersions }
-					// eslint-disable-next-line @typescript-eslint/no-unused-vars
-				} catch (_) {
-					return await runFetch(iterations + 1)
-				}
-			}
-			try {
-				return await runFetch(0)
-			} catch (e) {
-				console.error(e)
-				return { [loader]: [] }
-			}
-		}),
-	)
-
-	loaderVersions.value = versions.reduce((acc, val) => ({ ...acc, ...val }), {})
-}
-
-const fetchPaperVersions = async (mcVersion: string) => {
-	try {
-		const res = await $fetch(`https://fill.papermc.io/v3/projects/paper/versions/${mcVersion}`)
-		paperVersions.value[mcVersion] = (res as any).builds.sort((a: number, b: number) => b - a)
-		return res
-	} catch (e) {
-		console.error(e)
-		return null
-	}
-}
-
-const fetchPurpurVersions = async (mcVersion: string) => {
-	try {
-		const res = await $fetch(`https://api.purpurmc.org/v2/purpur/${mcVersion}`)
-		purpurVersions.value[mcVersion] = (res as any).builds.all.sort(
-			(a: string, b: string) => parseInt(b) - parseInt(a),
-		)
-		return res
-	} catch (e) {
-		console.error(e)
-		return null
-	}
-}
-
-const selectedLoaderVersions = computed<string[]>(() => {
-	const loader = selectedLoader.value.toLowerCase()
-
-	if (loader === 'paper') {
-		return paperVersions.value[selectedMCVersion.value]?.map((x) => `${x}`) || []
-	}
-
-	if (loader === 'purpur') {
-		return purpurVersions.value[selectedMCVersion.value] || []
-	}
-
-	if (loader === 'vanilla') {
-		return []
-	}
-
-	let apiLoader = loader
-	if (loader === 'neoforge') {
-		apiLoader = 'neo'
-	}
-
-	const backwardsCompatibleVersion = loaderVersions.value[apiLoader]?.find(
-		(x) => x.id === '${modrinth.gameVersion}',
-	)
-
-	if (backwardsCompatibleVersion) {
-		return backwardsCompatibleVersion.loaders.map((x) => x.id)
-	}
-
-	return (
-		loaderVersions.value[apiLoader]
-			?.find((x) => x.id === selectedMCVersion.value)
-			?.loaders.map((x) => x.id) || []
-	)
-})
-
-watch(selectedLoader, async () => {
-	if (selectedMCVersion.value) {
-		selectedLoaderVersion.value = ''
-		serverCheckError.value = ''
-
-		await checkVersionAvailability(selectedMCVersion.value)
-	}
-})
-
-watch(
-	selectedLoaderVersions,
-	(newVersions) => {
-		if (
-			newVersions.length > 0 &&
-			(!selectedLoaderVersion.value || !newVersions.includes(selectedLoaderVersion.value))
-		) {
-			selectedLoaderVersion.value = String(newVersions[0])
-		}
-	},
-	{ immediate: true },
-)
-
-const getLoaderVersion = async (loader: string, version: string) => {
-	return await $fetch(
-		`https://launcher-meta.modrinth.com/${loader?.toLowerCase()}/v0/versions/${version}.json`,
-	)
-}
-
-const checkVersionAvailability = async (version: string) => {
-	if (!version || version.trim().length < 3) return
-
-	isLoading.value = true
-	loadingServerCheck.value = true
-
-	try {
-		const mcRes = cachedVersions.value[version] || (await getLoaderVersion('minecraft', version))
-
-		cachedVersions.value[version] = mcRes
-
-		if (!mcRes.downloads?.server) {
-			serverCheckError.value = "We couldn't find a server.jar for this version."
-			return
-		}
-
-		const loader = selectedLoader.value.toLowerCase()
-		if (loader === 'paper' || loader === 'purpur') {
-			const fetchFn = loader === 'paper' ? fetchPaperVersions : fetchPurpurVersions
-			const result = await fetchFn(version)
-			if (!result) {
-				serverCheckError.value = `This Minecraft version is not supported by ${loader}.`
-				return
-			}
-		}
-
-		serverCheckError.value = ''
-	} catch (error) {
-		console.error(error)
-		serverCheckError.value = 'Failed to fetch versions.'
-	} finally {
-		loadingServerCheck.value = false
-		isLoading.value = false
-	}
-}
-
-watch(selectedMCVersion, checkVersionAvailability)
-
-onMounted(() => {
-	fetchLoaderVersions()
-})
-
-const tags = useGeneratedState()
-const mcVersions = computed(() =>
-	tags.value.gameVersions
-		.filter((x) =>
-			showSnapshots.value
-				? x.version_type === 'snapshot' || x.version_type === 'release'
-				: x.version_type === 'release',
-		)
-		.map((x) => x.version),
-)
-
-const isDangerous = computed(() => hardReset.value)
-const canInstall = computed(() => {
-	const conds =
-		!selectedMCVersion.value ||
-		isLoading.value ||
-		loadingServerCheck.value ||
-		serverCheckError.value.trim().length > 0
-
-	if (selectedLoader.value.toLowerCase() === 'vanilla') {
-		return conds
-	}
-
-	return conds || !selectedLoaderVersion.value
-})
-
-const handleReinstall = async () => {
-	if (hardReset.value && !isSecondPhase.value) {
-		isSecondPhase.value = true
-		return
-	}
-
-	isLoading.value = true
-
-	try {
-		await client.archon.servers_v0.reinstall(
-			serverId,
-			{
-				loader: selectedLoader.value,
-				loader_version:
-					selectedLoader.value === 'Vanilla' ? undefined : selectedLoaderVersion.value || undefined,
-				game_version: selectedMCVersion.value,
-			},
-			props.initialSetup ? true : hardReset.value,
-		)
-
-		emit('reinstall', {
-			loader: selectedLoader.value,
-			lVersion: selectedLoaderVersion.value,
-			mVersion: selectedMCVersion.value,
-		})
-
-		hide()
-	} catch (error) {
-		if (error instanceof ModrinthServersFetchError && (error as any)?.statusCode === 429) {
-			addNotification({
-				title: 'Cannot reinstall server',
-				text: 'You are being rate limited. Please try again later.',
-				type: 'error',
-			})
-		} else {
-			addNotification({
-				title: 'Reinstall Failed',
-				text: 'An unexpected error occurred while reinstalling. Please try again later.',
-				type: 'error',
-			})
-		}
-	} finally {
-		isLoading.value = false
-	}
-}
-
-const onShow = () => {
-	selectedMCVersion.value = server.value?.mc_version || ''
-	if (isSnapshotSelected.value) {
-		showSnapshots.value = true
-	}
-}
-
-const onHide = () => {
-	hardReset.value = false
-	isSecondPhase.value = false
-	serverCheckError.value = ''
-	loadingServerCheck.value = false
-	isLoading.value = false
-	selectedMCVersion.value = ''
-	serverCheckError.value = ''
-	paperVersions.value = {}
-	purpurVersions.value = {}
-}
-
-const show = (loader: Loaders) => {
-	if (selectedLoader.value !== loader) {
-		selectedLoaderVersion.value = ''
-	}
-	selectedLoader.value = loader
-	selectedMCVersion.value = server.value?.mc_version || ''
-	versionSelectModal.value?.show()
-}
-const hide = () => versionSelectModal.value?.hide()
-
-defineExpose({ show, hide })
-</script>
diff --git a/apps/frontend/src/components/ui/servers/SaveBanner.vue b/apps/frontend/src/components/ui/servers/SaveBanner.vue
deleted file mode 100644
index a43e4dd1f1..0000000000
--- a/apps/frontend/src/components/ui/servers/SaveBanner.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import { SaveBanner as SharedSaveBanner } from '@modrinth/ui'
-
-const props = defineProps<{
-	isUpdating: boolean
-	restart?: boolean
-	save: () => void
-	reset: () => void
-	isVisible: boolean
-	serverId: string
-}>()
-</script>
-
-<template>
-	<!-- TODO, delete this wrapper and update imports in /frontend accordingly to use from /ui-->
-	<SharedSaveBanner v-bind="props" />
-</template>
diff --git a/apps/frontend/src/components/ui/servers/ServerSidebar.vue b/apps/frontend/src/components/ui/servers/ServerSidebar.vue
deleted file mode 100644
index 1b455df0c1..0000000000
--- a/apps/frontend/src/components/ui/servers/ServerSidebar.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-	<div class="static w-full grid-cols-1 md:relative md:flex">
-		<div class="static h-full flex-col pb-4 md:flex md:pb-0 md:pr-4">
-			<div class="z-10 flex select-none flex-col gap-2 rounded-2xl bg-bg-raised p-4 md:w-[16rem]">
-				<div
-					v-for="link in navLinks.filter((x) => x.shown === undefined || x.shown)"
-					:key="link.label"
-				>
-					<NuxtLink
-						:to="link.href"
-						class="flex items-center gap-2 rounded-xl p-2 hover:bg-button-bg"
-						:class="{ 'bg-button-bg text-contrast': route.path === link.href }"
-					>
-						<div class="flex items-center gap-2 font-bold">
-							<component :is="link.icon" class="size-6" />
-							{{ link.label }}
-						</div>
-
-						<div class="flex-grow" />
-						<RightArrowIcon v-if="link.external" class="size-4" />
-					</NuxtLink>
-				</div>
-			</div>
-		</div>
-
-		<div class="h-full w-full">
-			<NuxtPage :route="route" @reinstall="onReinstall" />
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { RightArrowIcon } from '@modrinth/assets'
-import type { RouteLocationNormalized } from 'vue-router'
-
-const emit = defineEmits(['reinstall'])
-
-defineProps<{
-	navLinks: {
-		label: string
-		href: string
-		icon: Component
-		external?: boolean
-		shown?: boolean
-	}[]
-	route: RouteLocationNormalized
-}>()
-
-const onReinstall = (...args: any[]) => {
-	emit('reinstall', ...args)
-}
-</script>
diff --git a/apps/frontend/src/components/ui/servers/ServerStats.vue b/apps/frontend/src/components/ui/servers/ServerStats.vue
deleted file mode 100644
index a16aa63226..0000000000
--- a/apps/frontend/src/components/ui/servers/ServerStats.vue
+++ /dev/null
@@ -1,256 +0,0 @@
-<template>
-	<div
-		data-pyro-server-stats
-		style="font-variant-numeric: tabular-nums"
-		class="flex select-none flex-col items-center gap-6 md:flex-row"
-		:class="{ 'pointer-events-none': loading }"
-		:aria-hidden="loading"
-	>
-		<div
-			v-for="(metric, index) in metrics"
-			:key="index"
-			class="relative isolate min-h-[156px] w-full overflow-hidden rounded-2xl bg-bg-raised p-8"
-		>
-			<div class="relative z-10 -ml-3 w-fit rounded-xl px-3 py-1">
-				<div class="relative z-10">
-					<div class="-mb-0.5 mt-0.5 flex flex-row items-center gap-2">
-						<h2 class="m-0 -ml-0.5 text-3xl font-extrabold text-contrast">
-							{{ metric.value }}
-						</h2>
-						<h3 class="text-sm font-normal text-secondary">/ {{ metric.max }}</h3>
-					</div>
-					<h3 class="flex items-center gap-2 text-base font-normal text-secondary">
-						{{ metric.title }}
-						<IssuesIcon
-							v-if="metric.warning && !loading"
-							v-tooltip="metric.warning"
-							class="size-5"
-							:style="{ color: 'var(--color-orange)' }"
-						/>
-					</h3>
-				</div>
-				<div class="absolute -left-8 -top-4 h-28 w-56 rounded-full bg-bg-raised blur-lg" />
-			</div>
-
-			<component
-				:is="metric.icon"
-				class="absolute right-10 top-10 z-10 size-8"
-				style="width: 2rem; height: 2rem"
-			/>
-
-			<div class="chart-space absolute bottom-0 left-0 right-0">
-				<ClientOnly>
-					<VueApexCharts
-						v-if="metric.showGraph && !loading"
-						type="area"
-						height="142"
-						:options="getChartOptions(metric.warning, index)"
-						:series="[{ name: metric.title, data: metric.data }]"
-						class="chart"
-						:class="chartsReady.has(index) ? 'opacity-100' : 'opacity-0'"
-					/>
-				</ClientOnly>
-			</div>
-		</div>
-		<nuxt-link
-			:to="loading ? undefined : `/hosting/manage/${serverId}/files`"
-			class="relative isolate min-h-[156px] w-full overflow-hidden rounded-2xl bg-bg-raised p-8"
-			:class="loading ? '' : 'transition-transform duration-100 hover:scale-105 active:scale-100'"
-		>
-			<div class="flex flex-row items-center gap-2">
-				<h2 class="m-0 -ml-0.5 mt-1 text-3xl font-extrabold text-contrast">
-					{{ loading ? '0 B' : formatBytes(stats.storage_usage_bytes) }}
-				</h2>
-			</div>
-			<h3 class="text-base font-normal text-secondary">Storage usage</h3>
-			<FolderOpenIcon class="absolute right-10 top-10 size-8" />
-		</nuxt-link>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { CpuIcon, DatabaseIcon, FolderOpenIcon, IssuesIcon } from '@modrinth/assets'
-import type { Stats } from '@modrinth/utils'
-import { useStorage } from '@vueuse/core'
-import { computed, ref, shallowRef } from 'vue'
-
-const flags = useFeatureFlags()
-const route = useNativeRoute()
-const serverId = route.params.id
-const VueApexCharts = defineAsyncComponent(() => import('vue3-apexcharts'))
-
-const chartsReady = ref(new Set<number>())
-
-const userPreferences = useStorage(`pyro-server-${serverId}-preferences`, {
-	ramAsNumber: false,
-})
-
-const props = withDefaults(defineProps<{ data?: Stats; loading?: boolean }>(), {
-	loading: false,
-})
-
-const stats = shallowRef(
-	props.data?.current || {
-		cpu_percent: 0,
-		ram_usage_bytes: 0,
-		ram_total_bytes: 1, // Avoid division by zero
-		storage_usage_bytes: 0,
-	},
-)
-
-const onChartReady = (index: number) => {
-	chartsReady.value.add(index)
-}
-
-const formatBytes = (bytes: number) => {
-	const units = ['B', 'KB', 'MB', 'GB']
-	let value = bytes
-	let unit = 0
-	while (value >= 1024 && unit < units.length - 1) {
-		value /= 1024
-		unit++
-	}
-	return `${Math.round(value * 10) / 10} ${units[unit]}`
-}
-
-const cpuData = ref<number[]>(Array(20).fill(0))
-const ramData = ref<number[]>(Array(20).fill(0))
-
-const updateGraphData = (arr: number[], newValue: number) => {
-	arr.push(newValue)
-	arr.shift()
-}
-
-const metrics = computed(() => {
-	if (props.loading) {
-		return [
-			{
-				title: 'CPU usage',
-				value: '0.00%',
-				max: '100%',
-				icon: CpuIcon,
-				data: cpuData.value,
-				showGraph: false,
-				warning: null,
-			},
-			{
-				title: 'Memory usage',
-				value: '0.00%',
-				max: '100%',
-				icon: DatabaseIcon,
-				data: ramData.value,
-				showGraph: false,
-				warning: null,
-			},
-		]
-	}
-
-	const ramPercent = Math.min(
-		(stats.value.ram_usage_bytes / stats.value.ram_total_bytes) * 100,
-		100,
-	)
-	const cpuPercent = Math.min(stats.value.cpu_percent, 100)
-
-	updateGraphData(cpuData.value, cpuPercent)
-	updateGraphData(ramData.value, ramPercent)
-
-	return [
-		{
-			title: 'CPU usage',
-			value: `${cpuPercent.toFixed(2)}%`,
-			max: '100%',
-			icon: CpuIcon,
-			data: cpuData.value,
-			showGraph: true,
-			warning: cpuPercent >= 90 ? 'CPU usage is very high' : null,
-		},
-		{
-			title: 'Memory usage',
-			value:
-				userPreferences.value.ramAsNumber || flags.developerMode
-					? formatBytes(stats.value.ram_usage_bytes)
-					: `${ramPercent.toFixed(2)}%`,
-			max:
-				userPreferences.value.ramAsNumber || flags.developerMode
-					? formatBytes(stats.value.ram_total_bytes)
-					: '100%',
-			icon: DatabaseIcon,
-			data: ramData.value,
-			showGraph: true,
-			warning: ramPercent >= 90 ? 'Memory usage is very high' : null,
-		},
-	]
-})
-
-const getChartOptions = (hasWarning: string | null, index: number) => ({
-	chart: {
-		type: 'area',
-		animations: { enabled: false },
-		sparkline: { enabled: true },
-		toolbar: { show: false },
-		padding: {
-			left: -10,
-			right: -10,
-			top: 0,
-			bottom: 0,
-		},
-		events: {
-			mounted: () => onChartReady(index),
-			updated: () => onChartReady(index),
-		},
-	},
-	stroke: { curve: 'smooth', width: 3 },
-	fill: {
-		type: 'gradient',
-		gradient: {
-			shadeIntensity: 1,
-			opacityFrom: 0.25,
-			opacityTo: 0.05,
-			stops: [0, 100],
-		},
-	},
-	tooltip: { enabled: false },
-	grid: { show: false },
-	xaxis: {
-		labels: { show: false },
-		axisBorder: { show: false },
-		type: 'numeric',
-		tickAmount: 20,
-		range: 20,
-	},
-	yaxis: {
-		show: false,
-		min: 0,
-		max: 100,
-		forceNiceScale: false,
-	},
-	colors: [hasWarning ? 'var(--color-orange)' : 'var(--color-brand)'],
-	dataLabels: {
-		enabled: false,
-	},
-})
-
-watch(
-	() => props.data?.current,
-	(newStats) => {
-		if (newStats) {
-			stats.value = newStats
-		}
-	},
-)
-</script>
-
-<style scoped>
-.chart-space {
-	height: 142px;
-	width: calc(100% + 48px);
-	margin-left: -24px;
-	margin-right: -24px;
-}
-
-.chart {
-	width: 100% !important;
-	height: 142px !important;
-	transition: opacity 0.3s ease-out;
-}
-</style>
diff --git a/apps/frontend/src/components/ui/servers/TeleportOverflowMenu.vue b/apps/frontend/src/components/ui/servers/TeleportOverflowMenu.vue
deleted file mode 100644
index 4a8f774134..0000000000
--- a/apps/frontend/src/components/ui/servers/TeleportOverflowMenu.vue
+++ /dev/null
@@ -1,438 +0,0 @@
-<template>
-	<div data-pyro-telepopover-wrapper class="relative">
-		<button
-			ref="triggerRef"
-			class="teleport-overflow-menu-trigger"
-			:aria-expanded="isOpen"
-			:aria-haspopup="true"
-			@mousedown="handleMouseDown"
-			@mouseenter="handleMouseEnter"
-			@mouseleave="handleMouseLeave"
-			@click="toggleMenu"
-		>
-			<slot></slot>
-		</button>
-		<Teleport to="#teleports">
-			<Transition
-				enter-active-class="transition duration-125 ease-out"
-				enter-from-class="transform scale-75 opacity-0"
-				enter-to-class="transform scale-100 opacity-100"
-				leave-active-class="transition duration-125 ease-in"
-				leave-from-class="transform scale-100 opacity-100"
-				leave-to-class="transform scale-75 opacity-0"
-			>
-				<div
-					v-if="isOpen"
-					ref="menuRef"
-					data-pyro-telepopover-root
-					class="experimental-styles-within fixed isolate z-[9999] flex w-fit flex-col gap-2 overflow-hidden rounded-2xl border-[1px] border-solid border-surface-5 bg-bg-raised p-2 shadow-lg"
-					:style="menuStyle"
-					role="menu"
-					tabindex="-1"
-					@mousedown.stop
-					@mouseleave="handleMouseLeave"
-				>
-					<template
-						v-for="(option, index) in filteredOptions"
-						: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">
-							<button
-								v-if="typeof option.action === 'function'"
-								:ref="
-									(el) => {
-										if (el) menuItemsRef[index] = el as HTMLElement
-									}
-								"
-								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)"
-								@focus="selectedIndex = index"
-								@mouseover="handleMouseOver(index)"
-							>
-								<slot :name="option.id">{{ option.id }}</slot>
-							</button>
-							<nuxt-link
-								v-else-if="typeof option.action === 'string' && option.action.startsWith('/')"
-								:ref="
-									(el) => {
-										if (el) menuItemsRef[index] = el as HTMLElement
-									}
-								"
-								:to="option.action"
-								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)"
-								@focus="selectedIndex = index"
-								@mouseover="handleMouseOver(index)"
-							>
-								<slot :name="option.id">{{ option.id }}</slot>
-							</nuxt-link>
-							<a
-								v-else-if="typeof option.action === 'string' && !option.action.startsWith('http')"
-								:ref="
-									(el) => {
-										if (el) menuItemsRef[index] = el as HTMLElement
-									}
-								"
-								:href="option.action"
-								target="_blank"
-								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)"
-								@focus="selectedIndex = index"
-								@mouseover="handleMouseOver(index)"
-							>
-								<slot :name="option.id">{{ option.id }}</slot>
-							</a>
-							<span v-else>
-								<slot :name="option.id">{{ option.id }}</slot>
-							</span>
-						</ButtonStyled>
-					</template>
-				</div>
-			</Transition>
-		</Teleport>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { ButtonStyled } from '@modrinth/ui'
-import { onClickOutside, useElementHover } from '@vueuse/core'
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
-
-interface Option {
-	id: string
-	action?: (() => void) | string
-	shown?: boolean
-	color?: 'standard' | 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple'
-}
-
-type Divider = {
-	divider: true
-	shown?: boolean
-}
-
-type Item = Option | Divider
-
-function isDivider(item: Item): item is Divider {
-	return (item as Divider).divider
-}
-
-const props = withDefaults(
-	defineProps<{
-		options: Item[]
-		hoverable?: boolean
-	}>(),
-	{
-		hoverable: false,
-	},
-)
-
-const emit = defineEmits<{
-	(e: 'select', option: Option): void
-}>()
-
-const isOpen = ref(false)
-const selectedIndex = ref(-1)
-const menuRef = ref<HTMLElement | null>(null)
-const triggerRef = ref<HTMLElement | null>(null)
-const isMouseDown = ref(false)
-const typeAheadBuffer = ref('')
-const typeAheadTimeout = ref<number | null>(null)
-const menuItemsRef = ref<HTMLElement[]>([])
-
-const hoveringTrigger = useElementHover(triggerRef)
-const hoveringMenu = useElementHover(menuRef)
-
-const hovering = computed(() => hoveringTrigger.value || hoveringMenu.value)
-
-const menuStyle = ref({
-	top: '0px',
-	left: '0px',
-})
-
-const filteredOptions = computed(() => props.options.filter((option) => option.shown !== false))
-
-const calculateMenuPosition = () => {
-	if (!triggerRef.value || !menuRef.value) return { top: '0px', left: '0px' }
-
-	const triggerRect = triggerRef.value.getBoundingClientRect()
-	const menuRect = menuRef.value.getBoundingClientRect()
-	const menuWidth = menuRect.width
-	const menuHeight = menuRect.height
-	const margin = 8
-
-	let top: number
-	let left: number
-
-	// okay gang lets calculate this shit
-	// from the top now yall
-	// y
-	if (triggerRect.bottom + menuHeight + margin <= window.innerHeight) {
-		top = triggerRect.bottom + margin
-	} else if (triggerRect.top - menuHeight - margin >= 0) {
-		top = triggerRect.top - menuHeight - margin
-	} else {
-		top = Math.max(margin, window.innerHeight - menuHeight - margin)
-	}
-
-	// x
-	if (triggerRect.left + menuWidth + margin <= window.innerWidth) {
-		left = triggerRect.left
-	} else if (triggerRect.right - menuWidth - margin >= 0) {
-		left = triggerRect.right - menuWidth
-	} else {
-		left = Math.max(margin, window.innerWidth - menuWidth - margin)
-	}
-
-	return {
-		top: `${top}px`,
-		left: `${left}px`,
-	}
-}
-
-const toggleMenu = (event: MouseEvent) => {
-	event.stopPropagation()
-	if (!props.hoverable) {
-		if (isOpen.value) {
-			closeMenu()
-		} else {
-			openMenu()
-		}
-	}
-}
-
-const openMenu = () => {
-	isOpen.value = true
-	disableBodyScroll()
-	nextTick(() => {
-		menuStyle.value = calculateMenuPosition()
-		document.addEventListener('mousemove', handleMouseMove)
-		focusFirstMenuItem()
-	})
-}
-
-const closeMenu = () => {
-	isOpen.value = false
-	selectedIndex.value = -1
-	enableBodyScroll()
-	document.removeEventListener('mousemove', handleMouseMove)
-}
-
-const selectOption = (option: Option) => {
-	emit('select', option)
-	if (typeof option.action === 'function') {
-		option.action()
-	}
-	closeMenu()
-}
-
-const handleMouseDown = (event: MouseEvent) => {
-	event.preventDefault()
-	isMouseDown.value = true
-}
-
-const handleMouseEnter = () => {
-	if (props.hoverable) {
-		openMenu()
-	}
-}
-
-const handleMouseLeave = () => {
-	if (props.hoverable) {
-		setTimeout(() => {
-			if (!hovering.value) {
-				closeMenu()
-			}
-		}, 250)
-	}
-}
-
-const handleMouseMove = (event: MouseEvent) => {
-	if (!isOpen.value || !isMouseDown.value) return
-
-	const menuRect = menuRef.value?.getBoundingClientRect()
-	if (!menuRect) return
-
-	const menuItems = menuRef.value?.querySelectorAll('[role="menuitem"]')
-	if (!menuItems) return
-
-	for (let i = 0; i < menuItems.length; i++) {
-		const itemRect = (menuItems[i] as HTMLElement).getBoundingClientRect()
-		if (
-			event.clientX >= itemRect.left &&
-			event.clientX <= itemRect.right &&
-			event.clientY >= itemRect.top &&
-			event.clientY <= itemRect.bottom
-		) {
-			selectedIndex.value = i
-			break
-		}
-	}
-}
-
-const handleItemClick = (option: Option, index: number) => {
-	selectedIndex.value = index
-	selectOption(option)
-}
-
-const handleMouseOver = (index: number) => {
-	selectedIndex.value = index
-	menuItemsRef.value[selectedIndex.value].focus?.()
-}
-
-// Scrolling is disabled for keyboard navigation
-const disableBodyScroll = () => {
-	document.body.style.overflow = 'hidden'
-}
-
-const enableBodyScroll = () => {
-	document.body.style.overflow = ''
-}
-
-const focusFirstMenuItem = () => {
-	if (menuItemsRef.value.length > 0) {
-		menuItemsRef.value[0].focus?.()
-	}
-}
-
-const handleKeydown = (event: KeyboardEvent) => {
-	if (!isOpen.value) {
-		if (event.key === 'Enter' || event.key === ' ') {
-			event.preventDefault()
-			openMenu()
-		}
-		return
-	}
-
-	switch (event.key) {
-		case 'ArrowDown':
-			event.preventDefault()
-			selectedIndex.value = (selectedIndex.value + 1) % filteredOptions.value.length
-			menuItemsRef.value[selectedIndex.value].focus?.()
-			break
-		case 'ArrowUp':
-			event.preventDefault()
-			selectedIndex.value =
-				(selectedIndex.value - 1 + filteredOptions.value.length) % filteredOptions.value.length
-			menuItemsRef.value[selectedIndex.value].focus?.()
-			break
-		case 'Home':
-			event.preventDefault()
-			if (menuItemsRef.value.length > 0) {
-				selectedIndex.value = 0
-				menuItemsRef.value[selectedIndex.value].focus?.()
-			}
-			break
-		case 'End':
-			event.preventDefault()
-			if (menuItemsRef.value.length > 0) {
-				selectedIndex.value = filteredOptions.value.length - 1
-				menuItemsRef.value[selectedIndex.value].focus?.()
-			}
-			break
-		case 'Enter':
-		case ' ':
-			event.preventDefault()
-			if (selectedIndex.value >= 0) {
-				const option = filteredOptions.value[selectedIndex.value]
-				if (isDivider(option)) break
-				selectOption(option)
-			}
-			break
-		case 'Escape':
-			event.preventDefault()
-			closeMenu()
-			triggerRef.value?.focus?.()
-			break
-		case 'Tab':
-			event.preventDefault()
-			if (menuItemsRef.value.length > 0) {
-				if (event.shiftKey) {
-					selectedIndex.value =
-						(selectedIndex.value - 1 + filteredOptions.value.length) % filteredOptions.value.length
-				} else {
-					selectedIndex.value = (selectedIndex.value + 1) % filteredOptions.value.length
-				}
-				menuItemsRef.value[selectedIndex.value].focus?.()
-			}
-			break
-		default:
-			if (event.key.length === 1) {
-				typeAheadBuffer.value += event.key.toLowerCase()
-				const matchIndex = filteredOptions.value.findIndex(
-					(option) =>
-						!isDivider(option) && option.id.toLowerCase().startsWith(typeAheadBuffer.value),
-				)
-				if (matchIndex !== -1) {
-					selectedIndex.value = matchIndex
-					menuItemsRef.value[selectedIndex.value].focus?.()
-				}
-				if (typeAheadTimeout.value) {
-					clearTimeout(typeAheadTimeout.value)
-				}
-				typeAheadTimeout.value = setTimeout(() => {
-					typeAheadBuffer.value = ''
-				}, 1000) as unknown as number
-			}
-			break
-	}
-}
-
-const handleResizeOrScroll = () => {
-	if (isOpen.value) {
-		menuStyle.value = calculateMenuPosition()
-	}
-}
-
-const throttle = (func: (...args: any[]) => void, limit: number): ((...args: any[]) => void) => {
-	let inThrottle: boolean
-	return function (...args: any[]) {
-		if (!inThrottle) {
-			func(...args)
-			inThrottle = true
-			setTimeout(() => (inThrottle = false), limit)
-		}
-	}
-}
-
-const throttledHandleResizeOrScroll = throttle(handleResizeOrScroll, 100)
-
-onMounted(() => {
-	triggerRef.value?.addEventListener('keydown', handleKeydown)
-	window.addEventListener('resize', throttledHandleResizeOrScroll)
-	window.addEventListener('scroll', throttledHandleResizeOrScroll)
-})
-
-onUnmounted(() => {
-	triggerRef.value?.removeEventListener('keydown', handleKeydown)
-	window.removeEventListener('resize', throttledHandleResizeOrScroll)
-	window.removeEventListener('scroll', throttledHandleResizeOrScroll)
-	document.removeEventListener('mousemove', handleMouseMove)
-	if (typeAheadTimeout.value) {
-		clearTimeout(typeAheadTimeout.value)
-	}
-	enableBodyScroll()
-})
-
-watch(isOpen, (newValue) => {
-	if (newValue) {
-		nextTick(() => {
-			menuRef.value?.addEventListener('keydown', handleKeydown)
-		})
-	} else {
-		menuRef.value?.removeEventListener('keydown', handleKeydown)
-	}
-})
-
-onClickOutside(menuRef, (event) => {
-	if (!triggerRef.value?.contains(event.target as Node)) {
-		closeMenu()
-	}
-})
-</script>
diff --git a/apps/frontend/src/components/ui/servers/icons/ChevronDownIcon.vue b/apps/frontend/src/components/ui/servers/icons/ChevronDownIcon.vue
deleted file mode 100644
index 783d18a402..0000000000
--- a/apps/frontend/src/components/ui/servers/icons/ChevronDownIcon.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		class="lucide lucide-chevron-down"
-	>
-		<path d="m6 9 6 6 6-6" />
-	</svg>
-</template>
diff --git a/apps/frontend/src/components/ui/servers/icons/ChevronUpIcon.vue b/apps/frontend/src/components/ui/servers/icons/ChevronUpIcon.vue
deleted file mode 100644
index da6cf408ab..0000000000
--- a/apps/frontend/src/components/ui/servers/icons/ChevronUpIcon.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		class="lucide lucide-chevron-up"
-	>
-		<path d="m18 15-6-6-6 6" />
-	</svg>
-</template>
diff --git a/apps/frontend/src/components/ui/servers/icons/CodeFileIcon.vue b/apps/frontend/src/components/ui/servers/icons/CodeFileIcon.vue
deleted file mode 100644
index 42022a33ce..0000000000
--- a/apps/frontend/src/components/ui/servers/icons/CodeFileIcon.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-	>
-		<path d="M10 12.5 8 15l2 2.5" />
-		<path d="m14 12.5 2 2.5-2 2.5" />
-		<path d="M14 2v4a2 2 0 0 0 2 2h4" />
-		<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z" />
-	</svg>
-</template>
diff --git a/apps/frontend/src/components/ui/servers/icons/CogFolderIcon.vue b/apps/frontend/src/components/ui/servers/icons/CogFolderIcon.vue
deleted file mode 100644
index cc8fc1bc66..0000000000
--- a/apps/frontend/src/components/ui/servers/icons/CogFolderIcon.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-	>
-		<circle cx="18" cy="18" r="3" />
-		<path
-			d="M10.3 20H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v3.3"
-		/>
-		<path d="m21.7 19.4-.9-.3" />
-		<path d="m15.2 16.9-.9-.3" />
-		<path d="m16.6 21.7.3-.9" />
-		<path d="m19.1 15.2.3-.9" />
-		<path d="m19.6 21.7-.4-1" />
-		<path d="m16.8 15.3-.4-1" />
-		<path d="m14.3 19.6 1-.4" />
-		<path d="m20.7 16.8 1-.4" />
-	</svg>
-</template>
diff --git a/apps/frontend/src/components/ui/servers/icons/EarthIcon.vue b/apps/frontend/src/components/ui/servers/icons/EarthIcon.vue
deleted file mode 100644
index e96f944bcc..0000000000
--- a/apps/frontend/src/components/ui/servers/icons/EarthIcon.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-	>
-		<path d="M21.54 15H17a2 2 0 0 0-2 2v4.54" />
-		<path
-			d="M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17"
-		/>
-		<path d="M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05" />
-		<circle cx="12" cy="12" r="10" />
-	</svg>
-</template>
diff --git a/apps/frontend/src/components/ui/servers/icons/FullscreenIcon.vue b/apps/frontend/src/components/ui/servers/icons/FullscreenIcon.vue
deleted file mode 100644
index 383912d2b8..0000000000
--- a/apps/frontend/src/components/ui/servers/icons/FullscreenIcon.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		class="size-5"
-	>
-		<path d="m21 21-6-6m6 6v-4.8m0 4.8h-4.8" />
-		<path d="M3 16.2V21m0 0h4.8M3 21l6-6" />
-		<path d="M21 7.8V3m0 0h-4.8M21 3l-6 6" />
-		<path d="M3 7.8V3m0 0h4.8M3 3l6 6" />
-	</svg>
-</template>
diff --git a/apps/frontend/src/components/ui/servers/icons/ImageFileIcon.vue b/apps/frontend/src/components/ui/servers/icons/ImageFileIcon.vue
deleted file mode 100644
index 6aa81c2779..0000000000
--- a/apps/frontend/src/components/ui/servers/icons/ImageFileIcon.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-	>
-		<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
-		<path d="M14 2v4a2 2 0 0 0 2 2h4" />
-		<circle cx="10" cy="12" r="2" />
-		<path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22" />
-	</svg>
-</template>
diff --git a/apps/frontend/src/components/ui/servers/icons/LoaderIcon.vue b/apps/frontend/src/components/ui/servers/icons/LoaderIcon.vue
deleted file mode 100644
index 090bb945bd..0000000000
--- a/apps/frontend/src/components/ui/servers/icons/LoaderIcon.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-	<component :is="icon" v-if="icon" />
-	<LoaderIcon v-else />
-</template>
-
-<script setup lang="ts">
-import { getLoaderIcon, LoaderIcon } from '@modrinth/assets'
-import { computed } from 'vue'
-
-const props = defineProps<{
-	loader: string
-}>()
-
-const icon = computed(() => getLoaderIcon(props.loader))
-</script>
diff --git a/apps/frontend/src/components/ui/servers/icons/LoadingIcon.vue b/apps/frontend/src/components/ui/servers/icons/LoadingIcon.vue
deleted file mode 100644
index 9e9a8ad3fa..0000000000
--- a/apps/frontend/src/components/ui/servers/icons/LoadingIcon.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-		<path
-			fill-rule="evenodd"
-			d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z"
-			clip-rule="evenodd"
-		/>
-	</svg>
-</template>
diff --git a/apps/frontend/src/components/ui/servers/icons/MinimizeIcon.vue.vue b/apps/frontend/src/components/ui/servers/icons/MinimizeIcon.vue.vue
deleted file mode 100644
index 27b0fcad21..0000000000
--- a/apps/frontend/src/components/ui/servers/icons/MinimizeIcon.vue.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		class="size-5"
-	>
-		<path d="m15 15 6 6m-6-6v4.8m0-4.8h4.8" />
-		<path d="M9 19.8V15m0 0H4.2M9 15l-6 6" />
-		<path d="M15 4.2V9m0 0h4.8M15 9l6-6" />
-		<path d="M9 4.2V9m0 0H4.2M9 9 3 3" />
-	</svg>
-</template>
diff --git a/apps/frontend/src/components/ui/servers/icons/PanelErrorIcon.vue b/apps/frontend/src/components/ui/servers/icons/PanelErrorIcon.vue
deleted file mode 100644
index 2ecad74dce..0000000000
--- a/apps/frontend/src/components/ui/servers/icons/PanelErrorIcon.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		fill="none"
-		viewBox="0 0 24 24"
-		stroke-width="1.5"
-		stroke="currentColor"
-		class="size-8 text-[#FF496E]"
-	>
-		<path
-			stroke-linecap="round"
-			stroke-linejoin="round"
-			d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
-		/>
-	</svg>
-</template>
diff --git a/apps/frontend/src/components/ui/servers/icons/SlashIcon.vue b/apps/frontend/src/components/ui/servers/icons/SlashIcon.vue
deleted file mode 100644
index 7f6e62fca2..0000000000
--- a/apps/frontend/src/components/ui/servers/icons/SlashIcon.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-	<svg height="32" viewBox="0 0 32 32" width="32">
-		<path
-			d="M22 5L9 28"
-			stroke="currentColor"
-			stroke-linecap="round"
-			stroke-linejoin="round"
-		></path>
-	</svg>
-</template>
diff --git a/apps/frontend/src/components/ui/servers/icons/TextFileIcon.vue b/apps/frontend/src/components/ui/servers/icons/TextFileIcon.vue
deleted file mode 100644
index 99bcee1ac1..0000000000
--- a/apps/frontend/src/components/ui/servers/icons/TextFileIcon.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-		class="lucide lucide-file-text"
-	>
-		<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
-		<path d="M14 2v4a2 2 0 0 0 2 2h4" />
-		<path d="M10 9H8" />
-		<path d="M16 13H8" />
-		<path d="M16 17H8" />
-	</svg>
-</template>
diff --git a/apps/frontend/src/components/ui/servers/icons/Timer.vue b/apps/frontend/src/components/ui/servers/icons/Timer.vue
deleted file mode 100644
index e1ead004b1..0000000000
--- a/apps/frontend/src/components/ui/servers/icons/Timer.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-	>
-		<line x1="10" x2="14" y1="2" y2="2" />
-		<line x1="12" x2="15" y1="14" y2="11" />
-		<circle cx="12" cy="14" r="8" />
-	</svg>
-</template>
diff --git a/apps/frontend/src/components/ui/servers/notice/NoticeDashboardItem.vue b/apps/frontend/src/components/ui/servers/notice/NoticeDashboardItem.vue
deleted file mode 100644
index 2208808456..0000000000
--- a/apps/frontend/src/components/ui/servers/notice/NoticeDashboardItem.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<script setup lang="ts">
-import { SettingsIcon } from '@modrinth/assets'
-import {
-	CopyCode,
-	getDismissableMetadata,
-	NOTICE_LEVELS,
-	ServerNotice,
-	TagItem,
-	useFormatDateTime,
-	useRelativeTime,
-	useVIntl,
-} from '@modrinth/ui'
-import type { ServerNotice as ServerNoticeType } from '@modrinth/utils'
-
-const { formatMessage } = useVIntl()
-const formatRelativeTime = useRelativeTime()
-const formatDateTime = useFormatDateTime({
-	timeStyle: 'short',
-	dateStyle: 'long',
-})
-const formatDateTimeShortMonth = useFormatDateTime({
-	timeStyle: 'short',
-	dateStyle: 'medium',
-})
-
-defineProps<{
-	notice: ServerNoticeType
-}>()
-</script>
-<template>
-	<div class="col-span-full grid grid-cols-subgrid gap-4 rounded-2xl bg-bg-raised p-4">
-		<div class="col-span-full grid grid-cols-subgrid items-center gap-4">
-			<div>
-				<CopyCode :text="`${notice.id}`" />
-			</div>
-			<div class="text-sm">
-				<span v-if="notice.announce_at">
-					{{ formatDateTimeShortMonth(notice.announce_at) }} ({{
-						formatRelativeTime(notice.announce_at)
-					}})
-				</span>
-				<template v-else> Never begins </template>
-			</div>
-			<div class="text-sm">
-				<span v-if="notice.expires" v-tooltip="formatDateTime(notice.expires)">
-					{{ formatRelativeTime(notice.expires) }}
-				</span>
-				<template v-else> Never expires </template>
-			</div>
-			<div
-				:style="
-					NOTICE_LEVELS[notice.level]
-						? {
-								'--_color': NOTICE_LEVELS[notice.level].colors.text,
-								'--_bg-color': NOTICE_LEVELS[notice.level].colors.bg,
-							}
-						: undefined
-				"
-			>
-				<TagItem>
-					{{
-						NOTICE_LEVELS[notice.level]
-							? formatMessage(NOTICE_LEVELS[notice.level].name)
-							: notice.level
-					}}
-				</TagItem>
-			</div>
-			<div
-				:style="{
-					'--_color': getDismissableMetadata(notice.dismissable).colors.text,
-					'--_bg-color': getDismissableMetadata(notice.dismissable).colors.bg,
-				}"
-			>
-				<TagItem>
-					{{ formatMessage(getDismissableMetadata(notice.dismissable).name) }}
-				</TagItem>
-			</div>
-			<div class="col-span-2 flex gap-2 md:col-span-1">
-				<!-- <ButtonStyled>
-					<button @click="() => startEditing(notice)">
-						<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="red">
-					<button @click="() => deleteNotice(notice)">
-						<TrashIcon /> {{ formatMessage(commonMessages.deleteLabel) }}
-					</button>
-				</ButtonStyled> -->
-			</div>
-		</div>
-		<div class="col-span-full grid">
-			<ServerNotice
-				:level="notice.level"
-				:message="notice.message"
-				:dismissable="notice.dismissable"
-				:title="notice.title"
-				preview
-			/>
-			<div class="mt-4 flex items-center gap-2">
-				<span v-if="!notice.assigned || notice.assigned.length === 0"
-					>Not assigned to any servers</span
-				>
-				<span v-else-if="!notice.assigned.some((n) => n.kind === 'server')">
-					Assigned to
-					{{ notice.assigned.filter((n) => n.kind === 'node').length }} nodes
-				</span>
-				<span v-else-if="!notice.assigned.some((n) => n.kind === 'node')">
-					Assigned to
-					{{ notice.assigned.filter((n) => n.kind === 'server').length }} servers
-				</span>
-				<span v-else>
-					Assigned to
-					{{ notice.assigned.filter((n) => n.kind === 'server').length }} servers and
-					{{ notice.assigned.filter((n) => n.kind === 'node').length }} nodes
-				</span>
-				•
-				<button
-					class="m-0 flex items-center gap-1 border-none bg-transparent p-0 text-blue hover:underline hover:brightness-125 active:scale-95 active:brightness-150"
-					@click="() => startEditing(notice, true)"
-				>
-					<SettingsIcon />
-					Edit assignments
-				</button>
-			</div>
-		</div>
-	</div>
-</template>
diff --git a/apps/frontend/src/components/ui/thread/ThreadView.vue b/apps/frontend/src/components/ui/thread/ThreadView.vue
index 608f0f1f10..dc9bcaa6c4 100644
--- a/apps/frontend/src/components/ui/thread/ThreadView.vue
+++ b/apps/frontend/src/components/ui/thread/ThreadView.vue
@@ -74,7 +74,7 @@
 </template>
 
 <script setup lang="ts" generic="T">
-import { MessageIcon, ReplyIcon, SendIcon } from '@modrinth/assets'
+import { ChevronDownIcon, MessageIcon, ReplyIcon, SendIcon } from '@modrinth/assets'
 import type { QuickReply } from '@modrinth/moderation'
 import {
 	ButtonStyled,
@@ -90,7 +90,6 @@ import dayjs from 'dayjs'
 import { useImageUpload } from '~/composables/image-upload.ts'
 import { isStaff } from '~/helpers/users.js'
 
-import ChevronDownIcon from '../servers/icons/ChevronDownIcon.vue'
 import ThreadMessage from './ThreadMessage.vue'
 
 const { addNotification } = injectNotificationManager()
diff --git a/apps/frontend/src/composables/servers/use-server-image.ts b/apps/frontend/src/composables/servers/use-server-image.ts
deleted file mode 100644
index c613a79ae5..0000000000
--- a/apps/frontend/src/composables/servers/use-server-image.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-import type { Archon } from '@modrinth/api-client'
-import { injectModrinthClient } from '@modrinth/ui'
-import { type ComputedRef, ref, watch } from 'vue'
-
-// TODO: Remove and use V1 when available
-export function useServerImage(
-	serverId: string,
-	upstream: ComputedRef<Archon.Servers.v0.Server['upstream'] | null>,
-) {
-	const client = injectModrinthClient()
-	const image = ref<string | undefined>()
-
-	const sharedImage = useState<string | undefined>(`server-icon-${serverId}`)
-	if (sharedImage.value) {
-		image.value = sharedImage.value
-	}
-
-	async function loadImage() {
-		if (sharedImage.value) {
-			image.value = sharedImage.value
-			return
-		}
-
-		if (import.meta.server) return
-
-		const cached = localStorage.getItem(`server-icon-${serverId}`)
-		if (cached) {
-			sharedImage.value = cached
-			image.value = cached
-			return
-		}
-
-		let projectIconUrl: string | undefined
-		const upstreamVal = upstream.value
-		if (upstreamVal?.project_id) {
-			try {
-				const project = await $fetch<{ icon_url?: string }>(
-					`https://api.modrinth.com/v2/project/${upstreamVal.project_id}`,
-				)
-				projectIconUrl = project.icon_url
-			} catch {
-				// project fetch failed, continue without icon url
-			}
-		}
-
-		try {
-			const fileData = await client.kyros.files_v0.downloadFile('/server-icon-original.png')
-
-			if (fileData instanceof Blob) {
-				const dataURL = await resizeImage(fileData, 512)
-				sharedImage.value = dataURL
-				localStorage.setItem(`server-icon-${serverId}`, dataURL)
-				image.value = dataURL
-				return
-			}
-		} catch (error: any) {
-			if (error?.statusCode >= 500) {
-				image.value = undefined
-				return
-			}
-
-			if (error?.statusCode === 404 && projectIconUrl) {
-				try {
-					const response = await fetch(projectIconUrl)
-					if (!response.ok) throw new Error('Failed to fetch icon')
-					const file = await response.blob()
-					const originalFile = new File([file], 'server-icon-original.png', {
-						type: 'image/png',
-					})
-
-					const dataURL = await new Promise<string>((resolve) => {
-						const canvas = document.createElement('canvas')
-						const ctx = canvas.getContext('2d')
-						const img = new Image()
-						img.onload = () => {
-							canvas.width = 64
-							canvas.height = 64
-							ctx?.drawImage(img, 0, 0, 64, 64)
-							canvas.toBlob(async (blob) => {
-								if (blob) {
-									const scaledFile = new File([blob], 'server-icon.png', {
-										type: 'image/png',
-									})
-									client.kyros.files_v0
-										.uploadFile('/server-icon.png', scaledFile)
-										.promise.catch(() => {})
-									client.kyros.files_v0
-										.uploadFile('/server-icon-original.png', originalFile)
-										.promise.catch(() => {})
-								}
-							}, 'image/png')
-							const result = canvas.toDataURL('image/png')
-							sharedImage.value = result
-							localStorage.setItem(`server-icon-${serverId}`, result)
-							resolve(result)
-							URL.revokeObjectURL(img.src)
-						}
-						img.src = URL.createObjectURL(file)
-					})
-					image.value = dataURL
-					return
-				} catch (externalError: any) {
-					console.debug('Could not process external icon:', externalError.message)
-				}
-			}
-		}
-
-		image.value = undefined
-	}
-
-	watch(upstream, () => loadImage(), { immediate: true })
-
-	return image
-}
-
-function resizeImage(blob: Blob, size: number): Promise<string> {
-	return new Promise<string>((resolve) => {
-		const canvas = document.createElement('canvas')
-		const ctx = canvas.getContext('2d')
-		const img = new Image()
-		img.onload = () => {
-			canvas.width = size
-			canvas.height = size
-			ctx?.drawImage(img, 0, 0, size, size)
-			const dataURL = canvas.toDataURL('image/png')
-			resolve(dataURL)
-			URL.revokeObjectURL(img.src)
-		}
-		img.src = URL.createObjectURL(blob)
-	})
-}
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 4f3fd5bb6d..f97f8e3bf1 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -742,6 +742,7 @@ import {
 	OverflowMenu,
 	useVIntl,
 } from '@modrinth/ui'
+import TeleportOverflowMenu from '@modrinth/ui/src/components/base/TeleportOverflowMenu.vue'
 import { isAdmin, isStaff, UserBadge } from '@modrinth/utils'
 import { useQuery } from '@tanstack/vue-query'
 
@@ -760,7 +761,6 @@ import CollectionCreateModal from '~/components/ui/create/CollectionCreateModal.
 import OrganizationCreateModal from '~/components/ui/create/OrganizationCreateModal.vue'
 import ProjectCreateModal from '~/components/ui/create/ProjectCreateModal.vue'
 import ModrinthFooter from '~/components/ui/ModrinthFooter.vue'
-import TeleportOverflowMenu from '~/components/ui/servers/TeleportOverflowMenu.vue'
 import { getSignInRouteObj } from '~/composables/auth.js'
 import { errors as generatedStateErrors } from '~/generated/state.json'
 import { getProjectTypeMessage } from '~/utils/i18n-project-type.ts'
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 3e1ca2bb57..e9053abac1 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -2777,18 +2777,6 @@
   "search.filter.locked.server.sync": {
     "message": "Sync with server"
   },
-  "servers.busy.backup-creating": {
-    "message": "Backup creation in progress"
-  },
-  "servers.busy.backup-restoring": {
-    "message": "Backup restore in progress"
-  },
-  "servers.busy.installing": {
-    "message": "Server is installing"
-  },
-  "servers.busy.syncing-content": {
-    "message": "Content sync in progress"
-  },
   "servers.notice.actions": {
     "message": "Actions"
   },
@@ -3167,6 +3155,12 @@
   "settings.billing.interval.monthly": {
     "message": "monthly"
   },
+  "settings.billing.interval.quarter": {
+    "message": "quarter"
+  },
+  "settings.billing.interval.quarterly.adjective": {
+    "message": "quarterly"
+  },
   "settings.billing.interval.year": {
     "message": "year"
   },
diff --git a/apps/frontend/src/pages/admin/billing/[id].vue b/apps/frontend/src/pages/admin/billing/[id].vue
index 7549d7a004..8b00a8feae 100644
--- a/apps/frontend/src/pages/admin/billing/[id].vue
+++ b/apps/frontend/src/pages/admin/billing/[id].vue
@@ -343,7 +343,7 @@ import { DEFAULT_CREDIT_EMAIL_MESSAGE } from '@modrinth/utils/utils.ts'
 import { useQuery } from '@tanstack/vue-query'
 import dayjs from 'dayjs'
 
-import ModrinthServersIcon from '~/components/ui/servers/ModrinthServersIcon.vue'
+import ModrinthServersIcon from '~/components/brand/ModrinthServersIcon.vue'
 
 const { addNotification } = injectNotificationManager()
 const { labrinth } = injectModrinthClient()
diff --git a/apps/frontend/src/pages/admin/servers/notices.vue b/apps/frontend/src/pages/admin/servers/notices.vue
index 1ad5b0712a..9e5536a256 100644
--- a/apps/frontend/src/pages/admin/servers/notices.vue
+++ b/apps/frontend/src/pages/admin/servers/notices.vue
@@ -282,7 +282,7 @@ import type { ServerNotice as ServerNoticeType } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import { computed } from 'vue'
 
-import AssignNoticeModal from '~/components/ui/servers/notice/AssignNoticeModal.vue'
+import AssignNoticeModal from '~/components/ui/admin/AssignNoticeModal.vue'
 import { useServersFetch } from '~/composables/servers/servers-fetch.ts'
 
 const { addNotification } = injectNotificationManager()
diff --git a/apps/frontend/src/pages/discover.vue b/apps/frontend/src/pages/discover.vue
index bd046074fb..52c17c4638 100644
--- a/apps/frontend/src/pages/discover.vue
+++ b/apps/frontend/src/pages/discover.vue
@@ -50,7 +50,6 @@ const selectableProjectTypes = [
 <template>
 	<div class="new-page sidebar" :class="{ 'alt-layout': !cosmetics.rightSearchLayout }">
 		<section class="normal-page__header mb-4 flex flex-col gap-4">
-			<div id="discover-header-prefix" class="empty:hidden"></div>
 			<NavTabs
 				v-if="!flags.projectTypesPrimaryNav && allowTabChanging"
 				:links="selectableProjectTypes"
diff --git a/apps/frontend/src/pages/discover/[type]/index.vue b/apps/frontend/src/pages/discover/[type]/index.vue
index 25fee7a0a3..3fdd1a72a0 100644
--- a/apps/frontend/src/pages/discover/[type]/index.vue
+++ b/apps/frontend/src/pages/discover/[type]/index.vue
@@ -4,44 +4,29 @@ import {
 	BookmarkIcon,
 	CheckIcon,
 	DownloadIcon,
-	FilterIcon,
-	GameIcon,
 	GridIcon,
 	HeartIcon,
 	ImageIcon,
-	InfoIcon,
-	LeftArrowIcon,
 	ListIcon,
-	MinecraftServerIcon,
 	MoreVerticalIcon,
-	SearchIcon,
-	XIcon,
 } from '@modrinth/assets'
+import type { CardAction, CreationFlowContextValue } from '@modrinth/ui'
 import {
-	Avatar,
-	ButtonStyled,
-	Checkbox,
-	type CreationFlowContextValue,
+	BrowseInstallHeader,
+	BrowsePageLayout,
+	BrowseSidebar,
 	CreationFlowModal,
 	defineMessages,
-	DropdownSelect,
 	injectModrinthClient,
 	injectNotificationManager,
-	Pagination,
-	ProjectCard,
-	ProjectCardList,
-	SearchFilterControl,
-	SearchSidebarFilter,
-	type SortType,
-	StyledInput,
+	provideBrowseManager,
+	useBrowseSearch,
 	useDebugLogger,
-	useSearch,
-	useServerSearch,
 	useVIntl,
 } from '@modrinth/ui'
-import { capitalizeString, cycleValue } from '@modrinth/utils'
+import { cycleValue } from '@modrinth/utils'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
-import { useThrottleFn, useTimeoutFn } from '@vueuse/core'
+import { useTimeoutFn } from '@vueuse/core'
 import { computed, nextTick, ref, watch } from 'vue'
 
 import LogoAnimated from '~/components/brand/LogoAnimated.vue'
@@ -60,7 +45,6 @@ const queryClient = useQueryClient()
 const filtersMenuOpen = ref(false)
 
 const route = useRoute()
-const router = useRouter()
 
 const cosmetics = useCosmetics()
 const tags = useGeneratedState()
@@ -115,10 +99,16 @@ const currentType = computed(() =>
 	queryAsStringOrEmpty(route.params.type).replaceAll(/^\/|s\/?$/g, ''),
 )
 
+debug('initial route.params.type:', route.params.type, '→ currentType:', currentType.value)
+
 const isServerType = computed(() => currentType.value === 'server')
 
 const projectType = computed(() => tags.value.projectTypes.find((x) => x.id === currentType.value))
-const projectTypes = computed(() => (projectType.value ? [projectType.value.id] : []))
+
+watch(
+	() => projectType.value?.id,
+	(val) => debug('projectType.id changed:', val),
+)
 
 const resultsDisplayLocation = computed<DisplayLocation | undefined>(
 	() => projectType.value?.id as DisplayLocation,
@@ -129,10 +119,27 @@ const resultsDisplayMode = computed<DisplayMode>(() =>
 		: 'list',
 )
 
+const maxResultsForView = ref<Record<DisplayMode, number[]>>({
+	list: [5, 10, 15, 20, 50, 100],
+	grid: [6, 12, 18, 24, 48, 96],
+	gallery: [6, 10, 16, 20, 50, 100],
+})
+
+const currentMaxResultsOptions = computed(
+	() => maxResultsForView.value[resultsDisplayMode.value] ?? [20],
+)
+
+function cycleSearchDisplayMode() {
+	if (!resultsDisplayLocation.value) return
+	cosmetics.value.searchDisplayMode[resultsDisplayLocation.value] = cycleValue(
+		cosmetics.value.searchDisplayMode[resultsDisplayLocation.value],
+		tags.value.projectViewModes.filter((x) => x !== 'grid'),
+	)
+}
+
 const currentServerId = computed(() => queryAsString(route.query.sid) || null)
 const fromContext = computed(() => queryAsString(route.query.from) || null)
 const currentWorldId = computed(() => queryAsString(route.query.wid) || undefined)
-debug('currentServerId:', currentServerId.value)
 
 const {
 	data: serverData,
@@ -166,7 +173,6 @@ const serverIcon = computed(() => {
 
 const serverHideInstalled = ref(false)
 
-// TanStack Query for server content list
 const contentQueryKey = computed(() => ['content', 'list', currentServerId.value ?? ''] as const)
 const { data: serverContentData, error: serverContentError } = useQuery({
 	queryKey: contentQueryKey,
@@ -174,7 +180,6 @@ const { data: serverContentData, error: serverContentError } = useQuery({
 	enabled: computed(() => !!currentServerId.value && !!currentWorldId.value),
 })
 
-// Watch for errors and notify user
 watch(serverContentError, (error) => {
 	if (error) {
 		console.error('Failed to load server content:', error)
@@ -182,14 +187,6 @@ watch(serverContentError, (error) => {
 	}
 })
 
-// Re-run search when server content loads so "Hide installed" filter applies
-watch(serverContentData, () => {
-	if (serverHideInstalled.value) {
-		updateSearchResults(1, false)
-	}
-})
-
-// Install content mutation
 const installContentMutation = useMutation({
 	mutationFn: ({
 		serverId,
@@ -211,8 +208,6 @@ const installContentMutation = useMutation({
 	},
 })
 
-const PERSISTENT_QUERY_PARAMS = ['sid', 'wid', 'shi', 'from']
-
 if (route.query.shi && projectType.value?.id !== 'modpack') {
 	serverHideInstalled.value = route.query.shi === 'true'
 }
@@ -228,37 +223,23 @@ const serverFilters = computed(() => {
 	if (serverData.value && projectType.value?.id !== 'modpack') {
 		const gameVersion = serverData.value.mc_version
 		if (gameVersion) {
-			filters.push({
-				type: 'game_version',
-				option: gameVersion,
-			})
+			filters.push({ type: 'game_version', option: gameVersion })
 		}
 
 		const platform = serverData.value.loader?.toLowerCase()
 
 		const modLoaders = ['fabric', 'forge', 'quilt', 'neoforge']
-
 		if (platform && modLoaders.includes(platform)) {
-			filters.push({
-				type: 'mod_loader',
-				option: platform,
-			})
+			filters.push({ type: 'mod_loader', option: platform })
 		}
 
 		const pluginLoaders = ['paper', 'purpur']
-
 		if (platform && pluginLoaders.includes(platform)) {
-			filters.push({
-				type: 'plugin_loader',
-				option: platform,
-			})
+			filters.push({ type: 'plugin_loader', option: platform })
 		}
 
 		if (projectType.value?.id === 'mod') {
-			filters.push({
-				type: 'environment',
-				option: 'server',
-			})
+			filters.push({ type: 'environment', option: 'server' })
 		}
 
 		if (serverHideInstalled.value && serverContentData.value) {
@@ -279,142 +260,14 @@ const serverFilters = computed(() => {
 
 	if (currentServerId.value && projectType.value?.id === 'modpack') {
 		filters.push(
-			{
-				type: 'environment',
-				option: 'client',
-			},
-			{
-				type: 'environment',
-				option: 'server',
-			},
+			{ type: 'environment', option: 'client' },
+			{ type: 'environment', option: 'server' },
 		)
 	}
 	debug('serverFilters result:', filters)
 	return filters
 })
 
-const maxResultsForView = ref<Record<DisplayMode, number[]>>({
-	list: [5, 10, 15, 20, 50, 100],
-	grid: [6, 12, 18, 24, 48, 96],
-	gallery: [6, 10, 16, 20, 50, 100],
-})
-
-const currentMaxResultsOptions = computed(
-	() => maxResultsForView.value[resultsDisplayMode.value] ?? [20],
-)
-
-const LOADER_FILTER_TYPES = [
-	'mod_loader',
-	'plugin_loader',
-	'modpack_loader',
-	'shader_loader',
-	'plugin_platform',
-] as const
-
-const {
-	// Selections
-	query,
-	currentSortType,
-	currentFilters,
-	toggledGroups,
-	maxResults,
-	currentPage,
-	overriddenProvidedFilterTypes,
-
-	// Lists
-	filters,
-	sortTypes,
-
-	// Computed
-	requestParams,
-
-	// Functions
-	createPageParams,
-} = useSearch(projectTypes, tags, serverFilters)
-debug('useSearch initialized, requestParams:', requestParams.value)
-
-const {
-	serverCurrentSortType,
-	serverCurrentFilters,
-	serverToggledGroups,
-	serverSortTypes,
-	serverFilterTypes,
-	serverRequestParams,
-	createServerPageParams,
-} = useServerSearch({ tags, query, maxResults, currentPage })
-
-const effectiveRequestParams = computed(() =>
-	isServerType.value ? serverRequestParams.value : requestParams.value,
-)
-const effectiveSortTypes = computed(() =>
-	isServerType.value ? (serverSortTypes as readonly SortType[]) : sortTypes,
-)
-const effectiveCurrentSortType = computed({
-	get: () => (isServerType.value ? serverCurrentSortType.value : currentSortType.value),
-	set: (v: SortType) => {
-		if (isServerType.value) serverCurrentSortType.value = v
-		else currentSortType.value = v
-	},
-})
-const effectiveCurrentFilters = computed({
-	get: () => (isServerType.value ? serverCurrentFilters.value : currentFilters.value),
-	set: (v) => {
-		if (isServerType.value) serverCurrentFilters.value = v
-		else currentFilters.value = v
-	},
-})
-const selectedFilterTags = computed(() =>
-	currentFilters.value
-		.filter(
-			(f) =>
-				f.type.startsWith('category_') ||
-				LOADER_FILTER_TYPES.includes(f.type as (typeof LOADER_FILTER_TYPES)[number]),
-		)
-		.map((f) => f.option),
-)
-const excludeLoaders = computed(
-	() =>
-		currentFilters.value.some((f) =>
-			LOADER_FILTER_TYPES.includes(f.type as (typeof LOADER_FILTER_TYPES)[number]),
-		) || ['resourcepack', 'datapack'].includes(currentType.value),
-)
-
-const loadersNotForThisType = computed(() => {
-	return (
-		tags.value?.loaders
-			?.filter((loader) => !loader.supported_project_types.includes(currentType.value))
-			?.map((loader) => loader.name) ?? []
-	)
-})
-
-const deprioritizedTags = computed(() => {
-	return [...selectedFilterTags.value, ...loadersNotForThisType.value]
-})
-
-const messages = defineMessages({
-	gameVersionProvidedByServer: {
-		id: 'search.filter.locked.server-game-version.title',
-		defaultMessage: 'Game version is provided by the server',
-	},
-	modLoaderProvidedByServer: {
-		id: 'search.filter.locked.server-loader.title',
-		defaultMessage: 'Loader is provided by the server',
-	},
-	providedByServer: {
-		id: 'search.filter.locked.server',
-		defaultMessage: 'Provided by the server',
-	},
-	syncFilterButton: {
-		id: 'search.filter.locked.server.sync',
-		defaultMessage: 'Sync with server',
-	},
-	gameVersionShaderMessage: {
-		id: 'search.filter.game-version-shader-message',
-		defaultMessage:
-			'Shader packs for older versions most likely work on newer versions with only minor issues.',
-	},
-})
-
 interface InstallableSearchResult extends Labrinth.Search.v2.ResultSearchProject {
 	installing?: boolean
 	installed?: boolean
@@ -428,7 +281,6 @@ async function serverInstall(project: InstallableSearchResult) {
 	project.installing = true
 	try {
 		if (projectType.value?.id === 'modpack') {
-			// TODO: restore limit=1 once the backend fix for version ordering is deployed (limit is applied before sorting)
 			const versions = await client.labrinth.versions_v2.getProjectVersions(project.project_id, {
 				include_changelog: false,
 			})
@@ -498,7 +350,7 @@ function getServerModpackContent(project: Labrinth.Search.v3.ResultSearchProject
 		if (!project_name) return undefined
 		return {
 			name: project_name,
-			icon: project_icon,
+			icon: project_icon ?? undefined,
 			onclick:
 				project_id !== project.project_id ? () => navigateTo(`/project/${project_id}`) : undefined,
 			showCustomModpackTooltip: project_id === project.project_id,
@@ -507,157 +359,114 @@ function getServerModpackContent(project: Labrinth.Search.v3.ResultSearchProject
 	return undefined
 }
 
-const noLoad = ref(false)
-const {
-	data: rawResults,
-	refresh: refreshSearch,
-	pending: searchLoading,
-} = useLazyFetch(
-	() => {
-		const config = useRuntimeConfig()
-		let base = import.meta.server ? config.apiBaseUrl : config.public.apiBaseUrl
-
-		if (currentType.value === 'server') {
-			base = base.replace(/\/v\d\//, '/v3/').replace(/\/v\d$/, '/v3')
-		}
+async function search(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
 
-		return `${base}search${effectiveRequestParams.value}`
-	},
-	{
-		headers: computed(() => withLabrinthCanaryHeader()),
-
-		watch: false,
-		transform: (
-			hits: Labrinth.Search.v2.SearchResults | Labrinth.Search.v3.SearchResults,
-		): Labrinth.Search.v2.SearchResults => {
-			noLoad.value = false
-			if ('hits_per_page' in hits) {
-				return {
-					hits: hits.hits as unknown as Labrinth.Search.v2.ResultSearchProject[],
-					total_hits: hits.total_hits,
-					limit: hits.hits_per_page,
-					offset: (hits.page - 1) * hits.hits_per_page,
-				}
-			}
-			return hits
-		},
-	},
-)
-
-watch(searchLoading, (val) => debug('searchLoading:', val))
-watch(rawResults, (val) => debug('rawResults changed, total_hits:', val?.total_hits))
-
-const results = computed(() => rawResults.value)
-const serverResults = computed(() =>
-	isServerType.value ? (results.value as Labrinth.Search.v3.SearchResults | null) : null,
-)
-const projectResults = computed(() =>
-	isServerType.value ? null : (results.value as Labrinth.Search.v2.SearchResults | null),
-)
-const pageCount = computed(() => {
-	if (!results.value) return 1
-	// @ts-expect-error
-	const perPage = 'limit' in results.value ? results.value.limit : results.value.hits_per_page
-	return Math.ceil(results.value.total_hits / perPage)
-})
-
-function scrollToTop(behavior: ScrollBehavior = 'smooth') {
-	window.scrollTo({ top: 0, behavior })
-}
-
-function updateSearchResults(pageNumber: number = 1, resetScroll = true) {
-	debug(
-		'updateSearchResults called, page:',
-		pageNumber,
-		'query:',
-		query.value,
-		'requestParams:',
-		requestParams.value,
-	)
-	currentPage.value = pageNumber
-	if (resetScroll) {
-		scrollToTop()
+	if (isServerType.value) {
+		base = base.replace(/\/v\d\//, '/v3/').replace(/\/v\d$/, '/v3')
 	}
-	noLoad.value = true
-
-	if (query.value === null) {
-		debug('updateSearchResults: query is null, returning early')
-		return
-	}
-
-	debug('updateSearchResults: calling refreshSearch')
-	refreshSearch()
 
-	if (import.meta.client) {
-		const persistentParams: Record<string, any> = {}
+	const url = `${base}search${requestParams}`
+	debug('search() fetching:', url.substring(0, 120))
 
-		for (const [key, value] of Object.entries(route.query)) {
-			if (PERSISTENT_QUERY_PARAMS.includes(key)) {
-				persistentParams[key] = value
-			}
-		}
+	const raw = await $fetch<Labrinth.Search.v2.SearchResults | Labrinth.Search.v3.SearchResults>(
+		url,
+		{
+			headers: withLabrinthCanaryHeader(),
+		},
+	)
 
-		if (serverHideInstalled.value) {
-			persistentParams.shi = 'true'
-		} else {
-			delete persistentParams.shi
-		}
+	debug('search() response', { total_hits: raw.total_hits, hitCount: raw.hits?.length })
 
-		const params = {
-			...persistentParams,
-			...(isServerType.value ? createServerPageParams() : createPageParams()),
+	if ('hits_per_page' in raw) {
+		// v3 response (servers)
+		return {
+			projectHits: [],
+			serverHits: raw.hits as Labrinth.Search.v3.ResultSearchProject[],
+			total_hits: raw.total_hits,
+			per_page: raw.hits_per_page,
 		}
+	}
 
-		router.replace({ path: route.path, query: params })
+	return {
+		projectHits: raw.hits as Labrinth.Search.v2.ResultSearchProject[],
+		serverHits: [],
+		total_hits: raw.total_hits,
+		per_page: raw.limit,
 	}
 }
 
-watch([effectiveCurrentFilters], () => {
-	updateSearchResults(1, false)
-})
+function getCardActions(
+	result: Labrinth.Search.v2.ResultSearchProject | Labrinth.Search.v3.ResultSearchProject,
+	currentProjectType: string,
+): CardAction[] {
+	if (currentProjectType === 'server') return []
 
-const throttledSearch = useThrottleFn(() => updateSearchResults(), 500, true)
+	const projectResult = result as InstallableSearchResult
 
-function cycleSearchDisplayMode() {
-	if (!resultsDisplayLocation.value) {
-		// if no display location, abort
-		return
+	if (flags.value.showDiscoverProjectButtons) {
+		return [
+			{
+				key: 'download',
+				label: 'Download',
+				icon: DownloadIcon,
+				color: 'brand',
+				onClick: () => {},
+			},
+			{
+				key: 'heart',
+				label: '',
+				icon: HeartIcon,
+				circular: true,
+				onClick: () => {},
+			},
+			{
+				key: 'bookmark',
+				label: '',
+				icon: BookmarkIcon,
+				circular: true,
+				onClick: () => {},
+			},
+			{
+				key: 'more',
+				label: '',
+				icon: MoreVerticalIcon,
+				circular: true,
+				type: 'transparent',
+				onClick: () => {},
+			},
+		]
 	}
-	cosmetics.value.searchDisplayMode[resultsDisplayLocation.value] = cycleValue(
-		cosmetics.value.searchDisplayMode[resultsDisplayLocation.value],
-		tags.value.projectViewModes.filter((x) => x !== 'grid'),
-	)
-	setClosestMaxResults()
-}
 
-function setClosestMaxResults() {
-	const maxResultsOptions = maxResultsForView.value[resultsDisplayMode.value] ?? [20]
-	const currentMax = maxResults.value
-	if (!maxResultsOptions.includes(currentMax)) {
-		maxResults.value = maxResultsOptions.reduce((prev: number, curr: number) => {
-			return Math.abs(curr - currentMax) <= Math.abs(prev - currentMax) ? curr : prev
-		})
-	}
-}
+	if (serverData.value) {
+		const isInstalled =
+			projectResult.installed ||
+			(serverContentData.value &&
+				(serverContentData.value.addons ?? []).find((x) => x.project_id === result.project_id)) ||
+			serverData.value.upstream?.project_id === result.project_id
 
-const ogTitle = computed(
-	() =>
-		`Search ${projectType.value?.display ?? 'project'}s${query.value ? ' | ' + query.value : ''}`,
-)
-const description = computed(
-	() =>
-		`Search and browse thousands of Minecraft ${projectType.value?.display ?? 'project'}s on Modrinth with instant, accurate search results. Our filters help you quickly find the best Minecraft ${projectType.value?.display ?? 'project'}s.`,
-)
+		return [
+			{
+				key: 'install',
+				label: projectResult.installing ? 'Installing...' : isInstalled ? 'Installed' : 'Install',
+				icon: isInstalled ? CheckIcon : DownloadIcon,
+				disabled: !!isInstalled || !!projectResult.installing,
+				color: 'brand',
+				type: 'outlined',
+				onClick: () => serverInstall(projectResult),
+			},
+		]
+	}
 
-const serverBackUrl = computed(() => {
-	if (!serverData.value) return ''
-	const id = serverData.value.server_id
-	if (fromContext.value === 'onboarding') return `/hosting/manage/${id}?resumeModal=setup-type`
-	if (fromContext.value === 'reset-server') return `/hosting/manage/${id}/options/loader`
-	return `/hosting/manage/${id}/content`
-})
+	return []
+}
 
-// Onboarding modpack flow: show creation flow modal overlay on discovery page
 const onboardingModalRef = ref<InstanceType<typeof CreationFlowModal> | null>(null)
 const onboardingInstallingProject = ref<InstallableSearchResult | null>(null)
 
@@ -692,7 +501,7 @@ async function onModpackFlowCreate(config: CreationFlowContextValue) {
 			queryClient.invalidateQueries({ queryKey: ['servers', 'detail', currentServerId.value] })
 			navigateTo(`/hosting/manage/${currentServerId.value}/content`)
 		} else {
-			navigateTo(`/hosting/manage/${currentServerId.value}/options/loader`)
+			navigateTo(`/hosting/manage/${currentServerId.value}?openSettings=installation`)
 		}
 	} catch (e) {
 		handleError(new Error(`Error installing modpack: ${e}`))
@@ -700,410 +509,174 @@ async function onModpackFlowCreate(config: CreationFlowContextValue) {
 	}
 }
 
+const serverBackUrl = computed(() => {
+	if (!serverData.value) return ''
+	const id = serverData.value.server_id
+	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`
+})
+
+const serverBackLabel = computed(() => {
+	if (fromContext.value === 'onboarding') return 'Back to setup'
+	if (fromContext.value === 'reset-server') return 'Cancel reset'
+	return 'Back to server'
+})
+
+const serverBrowseHeading = computed(() =>
+	fromContext.value === 'reset-server'
+		? 'Select modpack to install after reset'
+		: 'Install content to server',
+)
+
+const installContext = computed(() => {
+	if (!serverData.value) return null
+	return {
+		name: serverData.value.name,
+		loader: serverData.value.loader ?? '',
+		gameVersion: serverData.value.mc_version ?? '',
+		serverId: currentServerId.value,
+		upstream: serverData.value.upstream,
+		iconSrc: serverIcon.value,
+		isMedal: serverData.value.is_medal,
+		backUrl: serverBackUrl.value,
+		backLabel: serverBackLabel.value,
+		heading: serverBrowseHeading.value,
+	}
+})
+
+const messages = defineMessages({
+	gameVersionProvidedByServer: {
+		id: 'search.filter.locked.server-game-version.title',
+		defaultMessage: 'Game version is provided by the server',
+	},
+	modLoaderProvidedByServer: {
+		id: 'search.filter.locked.server-loader.title',
+		defaultMessage: 'Loader is provided by the server',
+	},
+	providedByServer: {
+		id: 'search.filter.locked.server',
+		defaultMessage: 'Provided by the server',
+	},
+	syncFilterButton: {
+		id: 'search.filter.locked.server.sync',
+		defaultMessage: 'Sync with server',
+	},
+	gameVersionShaderMessage: {
+		id: 'search.filter.game-version-shader-message',
+		defaultMessage:
+			'Shader packs for older versions most likely work on newer versions with only minor issues.',
+	},
+})
+
+const projectTypeId = computed(() => projectType.value?.id ?? 'mod')
+
+debug('projectTypeId:', projectTypeId.value)
+watch(projectTypeId, (val) => debug('projectTypeId changed:', val))
+
+const searchState = useBrowseSearch({
+	projectType: projectTypeId,
+	tags,
+	providedFilters: serverFilters,
+	search,
+	persistentQueryParams: ['sid', 'wid', 'shi', 'from'],
+	getExtraQueryParams: () => ({
+		shi: serverHideInstalled.value ? 'true' : undefined,
+	}),
+	maxResultsOptions: currentMaxResultsOptions,
+	displayMode: resultsDisplayMode,
+})
+
+debug('calling initial refreshSearch')
+searchState.refreshSearch()
+
+const ogTitle = computed(
+	() =>
+		`Search ${projectType.value?.display ?? 'project'}s${searchState.query.value ? ' | ' + searchState.query.value : ''}`,
+)
+const description = computed(
+	() =>
+		`Search and browse thousands of Minecraft ${projectType.value?.display ?? 'project'}s on Modrinth with instant, accurate search results. Our filters help you quickly find the best Minecraft ${projectType.value?.display ?? 'project'}s.`,
+)
+
 useSeoMeta({
 	description,
 	ogTitle,
 	ogDescription: description,
 })
+
+debug('calling provideBrowseManager')
+provideBrowseManager({
+	tags,
+	projectType: projectTypeId,
+	...searchState,
+	getProjectLink: (result: Labrinth.Search.v2.ResultSearchProject) =>
+		`/${projectType.value?.id ?? 'project'}/${result.slug ? result.slug : result.project_id}`,
+	getServerProjectLink: (result: Labrinth.Search.v3.ResultSearchProject) =>
+		`/server/${result.slug ?? result.project_id}`,
+	selectableProjectTypes: computed(() => []),
+	showProjectTypeTabs: computed(() => false),
+	variant: 'web',
+	getCardActions,
+	installContext,
+	providedFilters: serverFilters,
+	hideInstalled: serverHideInstalled,
+	showHideInstalled: computed(() => !!serverData.value && projectType.value?.id !== 'modpack'),
+	hideInstalledLabel: computed(() => 'Hide installed content'),
+	displayMode: resultsDisplayMode,
+	cycleDisplayMode: cycleSearchDisplayMode,
+	maxResultsOptions: currentMaxResultsOptions,
+	getServerModpackContent,
+	onProjectHover: handleProjectMouseEnter,
+	onServerProjectHover: handleServerProjectMouseEnter,
+	onProjectHoverEnd: handleProjectHoverEnd,
+	filtersMenuOpen,
+	lockedFilterMessages: {
+		gameVersion: formatMessage(messages.gameVersionProvidedByServer),
+		modLoader: formatMessage(messages.modLoaderProvidedByServer),
+		syncButton: formatMessage(messages.syncFilterButton),
+		providedBy: formatMessage(messages.providedByServer),
+		gameVersionShaderMessage: formatMessage(messages.gameVersionShaderMessage),
+	},
+	loadingComponent: LogoAnimated,
+})
 </script>
 <template>
 	<Teleport v-if="flags.searchBackground" to="#absolute-background-teleport">
 		<div class="search-background"></div>
 	</Teleport>
-	<Teleport v-if="serverData" to="#discover-header-prefix" defer>
-		<div
-			class="mb-4 flex flex-wrap items-center justify-between gap-3 border-0 border-b border-solid border-divider pb-4"
-		>
-			<button
-				tabindex="-1"
-				class="flex cursor-pointer flex-col gap-4 bg-transparent text-primary"
-				@click="navigateTo(serverBackUrl)"
-			>
-				<span class="flex items-center gap-2">
-					<Avatar
-						:src="
-							serverData.is_medal
-								? 'https://cdn-raw.modrinth.com/medal_icon.webp'
-								: (serverIcon ?? MinecraftServerIcon)
-						"
-						size="48px"
-					/>
-					<span class="flex flex-col gap-2">
-						<span class="bold font-extrabold text-contrast">
-							{{ serverData.name }}
-						</span>
-						<span class="flex items-center gap-2 font-semibold text-secondary">
-							<GameIcon class="h-5 w-5 text-secondary" />
-							{{ serverData.loader }} {{ serverData.mc_version }}
-						</span>
-					</span>
-				</span>
-			</button>
-			<ButtonStyled>
-				<button @click="navigateTo(serverBackUrl)">
-					<LeftArrowIcon />
-					{{
-						fromContext === 'onboarding'
-							? 'Back to setup'
-							: fromContext === 'reset-server'
-								? 'Cancel reset'
-								: 'Back to server'
-					}}
-				</button>
-			</ButtonStyled>
-		</div>
-		<h1 class="m-0 text-xl font-extrabold leading-none text-contrast">
-			{{
-				fromContext === 'reset-server'
-					? 'Select modpack to install after reset'
-					: 'Install content to server'
-			}}
-		</h1>
-	</Teleport>
-
-	<aside
-		:class="{
-			'normal-page__sidebar': true,
-		}"
-		aria-label="Filters"
-	>
+	<div v-if="installContext" class="normal-page__header mb-4 flex flex-col gap-2">
+		<BrowseInstallHeader />
+	</div>
+	<aside class="normal-page__sidebar" aria-label="Filters">
 		<AdPlaceholder v-if="!auth.user && !serverData" />
-		<div v-if="filtersMenuOpen" class="fixed inset-0 z-40 bg-bg"></div>
-		<div
-			class="flex flex-col gap-3"
-			:class="{
-				'fixed inset-0 z-50 m-4 mb-0 overflow-auto rounded-t-3xl bg-bg-raised': filtersMenuOpen,
-			}"
-		>
-			<div
-				v-if="filtersMenuOpen"
-				class="sticky top-0 z-10 mx-1 flex items-center justify-between gap-3 border-0 border-b-[1px] border-solid border-divider bg-bg-raised px-6 py-4"
-			>
-				<h3 class="m-0 text-lg text-contrast">Filters</h3>
-				<ButtonStyled circular>
-					<button
-						@click="
-							() => {
-								filtersMenuOpen = false
-								scrollToTop('instant')
-							}
-						"
-					>
-						<XIcon />
-					</button>
-				</ButtonStyled>
-			</div>
-			<div
-				v-if="serverData && projectType?.id !== 'modpack'"
-				class="card-shadow rounded-2xl bg-bg-raised p-4"
-			>
-				<Checkbox
-					v-model="serverHideInstalled"
-					label="Hide installed content"
-					class="filter-checkbox"
-					@update:model-value="updateSearchResults()"
-				/>
-			</div>
-			<template v-if="isServerType">
-				<SearchSidebarFilter
-					v-for="filterType in serverFilterTypes.filter((f) => f.options.length > 0)"
-					:key="`server-filter-${filterType.id}`"
-					v-model:selected-filters="serverCurrentFilters"
-					v-model:toggled-groups="serverToggledGroups"
-					:provided-filters="[]"
-					:filter-type="filterType"
-					:class="
-						filtersMenuOpen
-							? 'border-0 border-b-[1px] border-solid border-divider last:border-b-0'
-							: 'card-shadow rounded-2xl bg-bg-raised'
-					"
-					button-class="button-animation flex flex-col gap-1 px-6 py-4 w-full bg-transparent cursor-pointer border-none"
-					content-class="mb-4 mx-3"
-					inner-panel-class="p-1"
-					:open-by-default="
-						![
-							'server_category_minecraft_server_meta',
-							'server_category_minecraft_server_community',
-							'server_game_version',
-							'server_status',
-						].includes(filterType.id)
-					"
-				>
-					<template #header>
-						<h3 class="m-0 text-lg">{{ filterType.formatted_name }}</h3>
-					</template>
-				</SearchSidebarFilter>
-			</template>
-			<template v-else>
-				<SearchSidebarFilter
-					v-for="filter in filters.filter((f) => f.display !== 'none')"
-					:key="`filter-${filter.id}`"
-					v-model:selected-filters="currentFilters"
-					v-model:toggled-groups="toggledGroups"
-					v-model:overridden-provided-filter-types="overriddenProvidedFilterTypes"
-					:provided-filters="serverFilters"
-					:filter-type="filter"
-					:class="
-						filtersMenuOpen
-							? 'border-0 border-b-[1px] border-solid border-divider last:border-b-0'
-							: 'card-shadow rounded-2xl bg-bg-raised'
-					"
-					button-class="button-animation flex flex-col gap-1 px-6 py-4 w-full bg-transparent cursor-pointer border-none"
-					content-class="mb-4 mx-3"
-					inner-panel-class="p-1"
-					:open-by-default="!(currentType === 'shader' && filter.id === 'game_version')"
-				>
-					<template #header>
-						<h3 class="m-0 text-lg">{{ filter.formatted_name }}</h3>
-					</template>
-					<template v-if="currentType === 'shader' && filter.id === 'game_version'" #prefix>
-						<div class="mb-4 grid grid-cols-[auto_1fr] gap-2 px-3 text-sm font-medium text-blue">
-							<InfoIcon class="mt-1 size-4" />
-							<span> {{ formatMessage(messages.gameVersionShaderMessage) }}</span>
-						</div>
-					</template>
-					<template #locked-game_version>
-						{{ formatMessage(messages.gameVersionProvidedByServer) }}
-					</template>
-					<template #locked-mod_loader>
-						{{ formatMessage(messages.modLoaderProvidedByServer) }}
-					</template>
-					<template #sync-button> {{ formatMessage(messages.syncFilterButton) }}</template>
-				</SearchSidebarFilter>
-			</template>
-		</div>
+		<BrowseSidebar />
 	</aside>
 	<section class="normal-page__content">
 		<div class="flex flex-col gap-3">
-			<StyledInput
-				v-model="query"
-				:icon="SearchIcon"
-				type="text"
-				autocomplete="off"
-				:placeholder="`Search ${projectType?.display ?? 'project'}s...`"
-				clearable
-				wrapper-class="w-full"
-				input-class="!h-12"
-				@input="throttledSearch()"
-				@clear="updateSearchResults()"
-			/>
-			<div class="flex flex-wrap items-center gap-2">
-				<DropdownSelect
-					v-slot="{ selected }"
-					v-model="effectiveCurrentSortType"
-					class="!w-auto flex-grow md:flex-grow-0"
-					name="Sort by"
-					:options="[...effectiveSortTypes]"
-					:display-name="(option?: SortType) => option?.display"
-					@change="updateSearchResults()"
-				>
-					<span class="font-semibold text-primary">Sort by: </span>
-					<span class="font-semibold text-secondary">{{ selected }}</span>
-				</DropdownSelect>
-				<DropdownSelect
-					v-slot="{ selected }"
-					v-model="maxResults"
-					name="Max results"
-					:options="currentMaxResultsOptions"
-					:default-value="maxResults"
-					class="!w-auto flex-grow md:flex-grow-0"
-					@change="updateSearchResults()"
-				>
-					<span class="font-semibold text-primary">View: </span>
-					<span class="font-semibold text-secondary">{{ selected }}</span>
-				</DropdownSelect>
-				<div class="lg:hidden">
-					<ButtonStyled>
-						<button @click="filtersMenuOpen = true">
-							<FilterIcon />
-							Filter results...
-						</button>
-					</ButtonStyled>
-				</div>
-				<ButtonStyled circular>
-					<button
-						:v-tooltip="capitalizeString(resultsDisplayMode + ' view')"
-						:aria-label="capitalizeString(resultsDisplayMode + ' view')"
-						@click="cycleSearchDisplayMode()"
-					>
-						<GridIcon v-if="resultsDisplayMode === 'grid'" />
-						<ImageIcon v-else-if="resultsDisplayMode === 'gallery'" />
-						<ListIcon v-else />
-					</button>
-				</ButtonStyled>
-				<Pagination
-					:page="currentPage"
-					:count="pageCount"
-					class="mx-auto sm:ml-auto sm:mr-0"
-					@switch-page="updateSearchResults"
-				/>
-			</div>
-			<SearchFilterControl
-				v-if="isServerType"
-				v-model:selected-filters="serverCurrentFilters"
-				:filters="serverFilterTypes"
-				:provided-filters="[]"
-				:overridden-provided-filter-types="[]"
-			/>
-			<SearchFilterControl
-				v-else
-				v-model:selected-filters="currentFilters"
-				:filters="filters.filter((f) => f.display !== 'none')"
-				:provided-filters="serverFilters"
-				:overridden-provided-filter-types="overriddenProvidedFilterTypes"
-				:provided-message="messages.providedByServer"
+			<BrowsePageLayout>
+				<template #display-mode-icon>
+					<GridIcon v-if="resultsDisplayMode === 'grid'" />
+					<ImageIcon v-else-if="resultsDisplayMode === 'gallery'" />
+					<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"
 			/>
-			<LogoAnimated v-if="searchLoading && !noLoad" />
-			<div v-else-if="results && results.hits && results.hits.length === 0" class="no-results">
-				<p>No results found for your query!</p>
-			</div>
-			<div v-else class="search-results-container">
-				<ProjectCardList
-					aria-label="Search results"
-					:layout="
-						resultsDisplayMode === 'grid' || resultsDisplayMode === 'gallery' ? 'grid' : 'list'
-					"
-				>
-					<template v-if="isServerType">
-						<ProjectCard
-							v-for="result in serverResults?.hits"
-							:key="`server-${result.project_id}`"
-							:link="`/server/${result.slug ?? result.project_id}`"
-							:title="result.name"
-							:icon-url="result.icon_url || undefined"
-							:summary="result.summary"
-							:tags="result.categories"
-							: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-status-online="!!result.minecraft_java_server?.ping?.data"
-							:server-modpack-content="getServerModpackContent(result)"
-							is-server-project
-							exclude-loaders
-							:color="result.color ?? undefined"
-							:banner="result.featured_gallery ?? undefined"
-							:layout="
-								resultsDisplayMode === 'grid' || resultsDisplayMode === 'gallery' ? 'grid' : 'list'
-							"
-							:max-tags="2"
-							@mouseenter="handleServerProjectMouseEnter(result)"
-							@mouseleave="handleProjectHoverEnd"
-						/>
-					</template>
-					<template v-else>
-						<ProjectCard
-							v-for="result in projectResults?.hits"
-							:key="result.project_id"
-							:link="`/${projectType?.id ?? 'project'}/${result.slug ? result.slug : result.project_id}`"
-							:title="result.title"
-							:icon-url="result.icon_url"
-							:author="{ name: result.author, link: `/user/${result.author}` }"
-							:date-updated="result.date_modified"
-							:date-published="result.date_created"
-							:displayed-date="effectiveCurrentSortType.name === 'newest' ? 'published' : 'updated'"
-							:downloads="result.downloads"
-							:summary="result.description"
-							:tags="result.display_categories"
-							:all-tags="result.categories"
-							:deprioritized-tags="deprioritizedTags"
-							:exclude-loaders="excludeLoaders"
-							:followers="result.follows"
-							:banner="result.featured_gallery ?? undefined"
-							:color="result.color ?? undefined"
-							:environment="
-								['mod', 'modpack'].includes(currentType)
-									? {
-											clientSide: result.client_side as Labrinth.Projects.v2.Environment,
-											serverSide: result.server_side as Labrinth.Projects.v2.Environment,
-										}
-									: undefined
-							"
-							:layout="
-								resultsDisplayMode === 'grid' || resultsDisplayMode === 'gallery' ? 'grid' : 'list'
-							"
-							@mouseenter="handleProjectMouseEnter(result)"
-							@mouseleave="handleProjectHoverEnd"
-						>
-							<template v-if="flags.showDiscoverProjectButtons || serverData" #actions>
-								<template v-if="flags.showDiscoverProjectButtons">
-									<ButtonStyled color="brand">
-										<button>
-											<DownloadIcon />
-											Download
-										</button>
-									</ButtonStyled>
-									<ButtonStyled circular>
-										<button>
-											<HeartIcon />
-										</button>
-									</ButtonStyled>
-									<ButtonStyled circular>
-										<button>
-											<BookmarkIcon />
-										</button>
-									</ButtonStyled>
-									<ButtonStyled circular type="transparent">
-										<button>
-											<MoreVerticalIcon />
-										</button>
-									</ButtonStyled>
-								</template>
-								<template v-else-if="serverData">
-									<ButtonStyled color="brand" type="outlined">
-										<button
-											v-if="
-												(result as InstallableSearchResult).installed ||
-												(serverContentData &&
-													(serverContentData.addons ?? []).find(
-														(x) => x.project_id === result.project_id,
-													)) ||
-												serverData.upstream?.project_id === result.project_id
-											"
-											disabled
-										>
-											<CheckIcon />
-											Installed
-										</button>
-										<button v-else-if="(result as InstallableSearchResult).installing" disabled>
-											Installing...
-										</button>
-										<button v-else @click="serverInstall(result as InstallableSearchResult)">
-											<DownloadIcon />
-											Install
-										</button>
-									</ButtonStyled>
-								</template>
-							</template>
-						</ProjectCard>
-					</template>
-				</ProjectCardList>
-			</div>
-			<div class="pagination-after">
-				<pagination
-					:page="currentPage"
-					:count="pageCount"
-					class="justify-end"
-					@switch-page="updateSearchResults"
-				/>
-			</div>
 		</div>
 	</section>
-
-	<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>
 .normal-page__content {
-	// Passthrough children as grid items on mobile
 	display: contents;
 
 	@media screen and (min-width: 1024px) {
@@ -1111,11 +684,9 @@ useSeoMeta({
 	}
 }
 
-// Move the filters "sidebar" on mobile underneath the search card
 .normal-page__sidebar {
 	grid-row: 3;
 
-	// Always show on desktop
 	@media screen and (min-width: 1024px) {
 		display: block;
 	}
@@ -1129,109 +700,10 @@ useSeoMeta({
 	}
 }
 
-.sidebar-menu {
-	display: none;
-}
-
-.sidebar-menu_open {
-	display: block;
-}
-
-.sidebar-menu-heading {
-	margin: 1.5rem 0 0.5rem 0;
-}
-
-// EthicalAds
 .content-wrapper {
 	grid-row: 1;
 }
 
-.search-controls {
-	display: flex;
-	flex-direction: row;
-	gap: var(--spacing-card-md);
-	flex-wrap: wrap;
-	padding: var(--spacing-card-md);
-	grid-row: 2;
-
-	.search-filter-container {
-		display: flex;
-		width: 100%;
-		align-items: center;
-
-		.sidebar-menu-close-button {
-			max-height: none;
-			// match height of the search field
-			height: 40px;
-			transition: box-shadow 0.1s ease-in-out;
-			margin-right: var(--spacing-card-md);
-
-			&.open {
-				color: var(--color-button-text-active);
-				background-color: var(--color-brand-highlight);
-				box-shadow:
-					inset 0 0 0 transparent,
-					0 0 0 2px var(--color-brand);
-			}
-		}
-
-		.iconified-input {
-			flex: 1;
-
-			input {
-				width: 100%;
-				margin: 0;
-			}
-		}
-	}
-
-	.sort-controls {
-		width: 100%;
-		display: flex;
-		flex-direction: row;
-		gap: var(--spacing-card-md);
-		flex-wrap: wrap;
-		align-items: center;
-
-		.labeled-control {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			flex-wrap: wrap;
-			gap: 0.5rem;
-
-			.labeled-control__label {
-				white-space: nowrap;
-			}
-		}
-
-		.square-button {
-			margin-top: auto;
-			// match height of search dropdowns
-			height: 40px;
-			width: 40px; // make it square!
-		}
-	}
-}
-
-.search-controls__sorting {
-	min-width: 14rem;
-}
-
-.labeled-control__label,
-.labeled-control__control {
-	display: block;
-}
-
-.pagination-before {
-	grid-row: 4;
-}
-
-.search-results-container {
-	grid-row: 5;
-}
-
 .pagination-after {
 	grid-row: 6;
 }
@@ -1245,69 +717,12 @@ useSeoMeta({
 	margin: 2rem;
 }
 
-@media screen and (min-width: 750px) {
-	.search-controls {
-		flex-wrap: nowrap;
-		flex-direction: row;
-	}
-
-	.sort-controls {
-		min-width: fit-content;
-		max-width: fit-content;
-		flex-wrap: nowrap;
-	}
-
-	.labeled-control {
-		align-items: center;
-		display: flex;
-		flex-direction: column !important;
-		flex-wrap: wrap;
-		gap: 0.5rem;
-		max-width: fit-content;
-	}
-
-	.labeled-control__label {
-		flex-shrink: 0;
-		margin-bottom: 0 !important;
-	}
-}
-
-@media screen and (min-width: 860px) {
-	.labeled-control {
-		flex-wrap: nowrap !important;
-		flex-direction: row !important;
-	}
-}
-
-@media screen and (min-width: 1024px) {
-	.sidebar-menu {
-		display: block;
-		margin-top: 0;
-	}
-
-	.sidebar-menu-close-button {
-		display: none;
-	}
-
-	.labeled-control {
-		flex-wrap: wrap !important;
-		flex-direction: column !important;
-	}
-}
-
-@media screen and (min-width: 1100px) {
-	.labeled-control {
-		flex-wrap: nowrap !important;
-		flex-direction: row !important;
-	}
-}
-
 .search-background {
 	width: 100%;
 	height: 20rem;
-	background-image: url('https://minecraft.wiki/images/The_Garden_Awakens_Key_Art_No_Creaking.jpg?9968c');
+	background-image: url('https://minecraft.wiki/images/Tiny_Takeover_Key_Art.png?025dc');
 	background-size: cover;
-	background-position: center;
+	background-position: 50% 25%;
 	pointer-events: none;
 	mask-image: linear-gradient(to bottom, black, transparent);
 	opacity: 0.25;
diff --git a/apps/frontend/src/pages/hosting/index.vue b/apps/frontend/src/pages/hosting/index.vue
index 2f055d3dbe..84734ba18a 100644
--- a/apps/frontend/src/pages/hosting/index.vue
+++ b/apps/frontend/src/pages/hosting/index.vue
@@ -643,6 +643,7 @@ import {
 	injectModrinthClient,
 	injectNotificationManager,
 	IntlFormatted,
+	LoaderIcon,
 	ModrinthServersPurchaseModal,
 	useFormatPrice,
 	useVIntl,
@@ -652,7 +653,6 @@ import { useQuery } from '@tanstack/vue-query'
 import { computed } from 'vue'
 
 import OptionGroup from '~/components/ui/OptionGroup.vue'
-import LoaderIcon from '~/components/ui/servers/icons/LoaderIcon.vue'
 import MedalPlanPromotion from '~/components/ui/servers/marketing/MedalPlanPromotion.vue'
 import ServerPlanSelector from '~/components/ui/servers/marketing/ServerPlanSelector.vue'
 import { products } from '~/generated/state.json'
diff --git a/apps/frontend/src/pages/hosting/manage/[id].vue b/apps/frontend/src/pages/hosting/manage/[id].vue
index 47cc82d06f..20d5bc9dfe 100644
--- a/apps/frontend/src/pages/hosting/manage/[id].vue
+++ b/apps/frontend/src/pages/hosting/manage/[id].vue
@@ -1,1535 +1,78 @@
 <template>
-	<div
-		v-if="filteredNotices.length > 0"
-		class="experimental-styles-within relative mx-auto mb-4 flex w-full min-w-0 max-w-[1280px] flex-col gap-3 px-6"
-	>
-		<ServerNotice
-			v-for="notice in filteredNotices"
-			:key="`notice-${notice.id}`"
-			:level="notice.level"
-			:message="notice.message"
-			:dismissable="notice.dismissable"
-			:title="notice.title"
-			class="w-full"
-			@dismiss="() => dismissNotice(notice.id)"
-		/>
-	</div>
-	<div
-		v-if="serverData && serverData.node === null && serverData.status !== 'suspended'"
-		class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
-	>
-		<ErrorInformationCard
-			title="We're getting your server ready"
-			description="Your server's hardware is being prepared and will be available shortly!"
-			:icon="TransferIcon"
-			icon-color="blue"
-			:action="generalErrorAction"
-		/>
-	</div>
-	<div
-		v-else-if="serverData?.status === 'suspended' && serverData.suspension_reason === 'upgrading'"
-		class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
-	>
-		<ErrorInformationCard
-			title="Server upgrading"
-			description="Your server's hardware is currently being upgraded and will be back online shortly!"
-			:icon="TransferIcon"
-			icon-color="blue"
-			:action="generalErrorAction"
-		/>
-	</div>
-	<div
-		v-else-if="serverData?.status === 'suspended'"
-		class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
-	>
-		<ErrorInformationCard
-			title="Server suspended"
-			:description="suspendedDescription"
-			:icon="LockIcon"
-			icon-color="orange"
-			:action="suspendedAction"
-		/>
-	</div>
-	<div
-		v-else-if="serverError?.statusCode === 403 || serverError?.statusCode === 404"
-		class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
-	>
-		<ErrorInformationCard
-			title="An error occured."
-			description="Please contact Modrinth Support."
-			:icon="TransferIcon"
-			icon-color="orange"
-			:error-details="generalErrorDetails"
-			:action="generalErrorAction"
-		/>
-	</div>
-	<div
-		v-else-if="serverError || !nodeAccessible"
-		class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
-	>
-		<ErrorInformationCard
-			title="Server Node Unavailable"
-			:icon="PanelErrorIcon"
-			icon-color="red"
-			:action="nodeUnavailableAction"
-			:error-details="nodeUnavailableDetails"
-		>
-			<template #description>
-				<div class="text-md space-y-4">
-					<p class="leading-[170%] text-secondary">
-						Your server's node, where your Modrinth Server is physically hosted, is not accessible
-						at the moment. We are working to resolve the issue as quickly as possible.
-					</p>
-					<p class="leading-[170%] text-secondary">
-						Your data is safe and will not be lost, and your server will be back online as soon as
-						the issue is resolved.
-					</p>
-					<p class="leading-[170%] text-secondary">
-						If reloading does not work initially, please contact Modrinth Support via the chat
-						bubble in the bottom right corner and we'll be happy to help.
-					</p>
-				</div>
-			</template>
-		</ErrorInformationCard>
-	</div>
-	<!-- SERVER START -->
-	<div
-		v-else-if="serverData"
-		data-pyro-server-manager-root
-		class="experimental-styles-within mobile-blurred-servericon relative mx-auto mb-12 box-border flex min-h-screen w-full min-w-0 max-w-[1280px] flex-col gap-6 px-6 transition-all duration-300"
-		:style="{
-			'--server-bg-image': serverImage
-				? `url(${serverImage})`
-				: `linear-gradient(180deg, rgba(153,153,153,1) 0%, rgba(87,87,87,1) 100%)`,
-		}"
+	<ServersManageRootLayout
+		:server-id="serverId"
+		:reload-page="() => reloadNuxtApp({ path: route.path })"
+		:resolve-viewer="resolveViewer"
+		:show-copy-id-action="flags.developerMode"
+		:show-advanced-debug-info="flags.advancedDebugInfo"
+		:show-uptime="true"
+		:stripe-publishable-key="config.public.stripePublishableKey as string"
+		:site-url="config.public.siteUrl as string"
+		:products="products"
+		:auth-user="authUser"
+		:fetch-intercom-token="fetchIntercomToken"
+		:intercom-app-id="config.public.intercomAppId as string"
+		:navigate-to-billing="() => router.push('/settings/billing')"
+		:navigate-to-servers="() => router.push('/hosting/manage')"
+		:browse-modpacks="
+			({ serverId: sid, worldId: wid, from }) => {
+				navigateTo({
+					path: '/discover/modpacks',
+					query: { sid, from, wid: wid ?? undefined },
+				})
+			}
+		"
+		:browse-content="
+			({ serverId: sid, worldId: wid, type }) => {
+				navigateTo({
+					path: `/discover/${type}s`,
+					query: { sid, wid: wid ?? undefined },
+				})
+			}
+		"
 	>
-		<NuxtLink to="/hosting/manage" class="breadcrumb goto-link flex w-fit items-center">
-			<LeftArrowIcon />
-			All servers
-		</NuxtLink>
-		<ContentPageHeader>
-			<template #icon>
-				<ServerIcon
-					:image="
-						serverData.is_medal ? 'https://cdn-raw.modrinth.com/medal_icon.webp' : serverImage
-					"
-				/>
-			</template>
-			<template #title>
-				{{ serverData.name }}
-			</template>
-			<template #stats>
-				<div
-					v-if="serverData.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="serverData.loader" class="flex items-center gap-2 font-medium capitalize">
-						<LoaderIcon :loader="serverData.loader" class="flex shrink-0 [&&]:size-5" />
-						{{ serverData.loader }} {{ serverData.mc_version }}
-					</div>
-
-					<div
-						v-if="serverData.loader && serverData.net?.domain"
-						class="h-1.5 w-1.5 rounded-full bg-surface-5"
-					></div>
-
-					<div
-						v-if="serverData.net?.domain"
-						v-tooltip="'Copy server address'"
-						class="flex cursor-pointer items-center gap-2 font-medium hover:underline"
-						@click="copyServerAddress"
-					>
-						<LinkIcon class="flex size-5 shrink-0" />
-						{{ serverData.net.domain }}.modrinth.gg
-					</div>
-
-					<div v-if="uptimeSeconds" class="h-1.5 w-1.5 rounded-full bg-surface-5"></div>
-
-					<div v-if="uptimeSeconds" class="flex items-center gap-2 font-medium">
-						<TimerIcon class="flex size-5 shrink-0" />
-						{{ formattedUptime }}
-					</div>
-
-					<div
-						v-if="serverProject && (serverData.loader || serverData.net?.domain || uptimeSeconds)"
-						class="h-1.5 w-1.5 rounded-full bg-surface-5"
-					></div>
-
-					<div v-if="serverProject" class="flex items-center gap-1.5 font-medium text-primary">
-						Linked to
-						<Avatar :src="serverProject.icon_url" :alt="serverProject.title" size="24px" />
-						<NuxtLink
-							:to="`/project/${serverProject.slug ?? serverProject.id}`"
-							class="truncate text-primary hover:underline"
-						>
-							{{ serverProject.title }}
-						</NuxtLink>
-					</div>
-				</div>
-			</template>
-			<template #actions>
-				<div v-if="isConnected && !serverData.flows?.intro" class="flex gap-2">
-					<PanelServerActionButton :disabled="!!error" :uptime-seconds="uptimeSeconds" />
-				</div>
-			</template>
-		</ContentPageHeader>
-
-		<ServerOnboardingPanelPage v-if="serverData.flows?.intro" />
-
-		<template v-else>
-			<div
-				data-pyro-navigation
-				class="isolate flex w-full select-none flex-col justify-between gap-4 overflow-auto md:flex-row md:items-center"
-			>
-				<NavTabs :links="navLinks" replace />
-			</div>
-
-			<div data-pyro-mount class="h-full w-full flex-1">
-				<div
-					v-if="error"
-					class="mx-auto mb-4 flex justify-between gap-2 rounded-2xl border-2 border-solid border-red bg-bg-red p-4 font-semibold text-contrast"
-				>
-					<div class="flex flex-row gap-4">
-						<IssuesIcon class="hidden h-8 w-8 shrink-0 text-red sm:block" />
-						<div class="flex flex-col gap-2 leading-[150%]">
-							<div class="flex items-center gap-3">
-								<IssuesIcon class="flex h-8 w-8 shrink-0 text-red sm:hidden" />
-								<div class="flex gap-2 text-2xl font-bold">{{ errorTitle }}</div>
-							</div>
-
-							<div
-								v-if="errorTitle.toLocaleLowerCase() === 'installation error'"
-								class="font-normal"
-							>
-								<div
-									v-if="
-										errorMessage.toLocaleLowerCase() === 'the specified version may be incorrect'
-									"
-								>
-									An invalid loader or Minecraft version was specified and could not be installed.
-									<ul class="m-0 mt-4 p-0 pl-4">
-										<li>
-											If this version of Minecraft was released recently, please check if Modrinth
-											Hosting supports it.
-										</li>
-										<li>
-											If you've installed a modpack, it may have been packaged incorrectly or may
-											not be compatible with the loader.
-										</li>
-										<li>
-											Your server may need to be reinstalled with a valid mod loader and version.
-											You can change the loader by clicking the "Change Loader" button.
-										</li>
-										<li>
-											If you're stuck, please contact Modrinth Support with the information below:
-										</li>
-									</ul>
-									<ButtonStyled>
-										<button class="mt-2" @click="copyServerDebugInfo">
-											<CopyIcon v-if="!copied" />
-											<CheckIcon v-else />
-											Copy Debug Info
-										</button>
-									</ButtonStyled>
-								</div>
-								<div v-if="errorMessage.toLocaleLowerCase() === 'internal error'">
-									An internal error occurred while installing your server. Don't fret — try
-									reinstalling your server, and if the problem persists, please contact Modrinth
-									support with your server's debug information.
-								</div>
-								<div
-									v-if="errorMessage.toLocaleLowerCase() === 'this version is not yet supported'"
-								>
-									An error occurred while installing your server because Modrinth Hosting does not
-									support the version of Minecraft or the loader you specified. Try reinstalling
-									your server with a different version or loader, and if the problem persists,
-									please contact Modrinth Support with your server's debug information.
-								</div>
-
-								<div
-									v-if="errorTitle === 'Installation error'"
-									class="mt-2 flex flex-col gap-4 sm:flex-row"
-								>
-									<ButtonStyled v-if="errorLog">
-										<button @click="openInstallLog"><FileIcon />Open Installation Log</button>
-									</ButtonStyled>
-									<ButtonStyled>
-										<button @click="copyServerDebugInfo">
-											<CopyIcon v-if="!copied" />
-											<CheckIcon v-else />
-											Copy Debug Info
-										</button>
-									</ButtonStyled>
-									<ButtonStyled color="red" type="standard">
-										<NuxtLink
-											class="whitespace-pre"
-											:to="`/hosting/manage/${serverId}/options/loader`"
-										>
-											<RightArrowIcon />
-											Change Loader
-										</NuxtLink>
-									</ButtonStyled>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-
-				<div v-if="serverData.is_medal" class="mb-4">
-					<MedalServerCountdown :server-id="serverId" />
-				</div>
-
-				<div
-					v-if="!isConnected && !isReconnecting && !isLoading"
-					data-pyro-server-ws-error
-					class="mb-4 flex w-full flex-row items-center gap-4 rounded-2xl bg-bg-red p-4 text-contrast"
-				>
-					<IssuesIcon class="size-5 text-red" />
-					Something went wrong...
-				</div>
-
-				<div
-					v-if="isReconnecting"
-					data-pyro-server-ws-reconnecting
-					class="mb-4 flex w-full flex-row items-center gap-4 rounded-2xl bg-bg-orange p-4 text-sm text-contrast"
-				>
-					<PanelSpinner />
-					Hang on, we're reconnecting to your server.
-				</div>
-
-				<Transition
-					enter-active-class="transition-all duration-300 ease-out overflow-hidden"
-					enter-from-class="opacity-0 max-h-0"
-					enter-to-class="opacity-100 max-h-40"
-					leave-active-class="transition-all duration-200 ease-in overflow-hidden"
-					leave-from-class="opacity-100 max-h-40"
-					leave-to-class="opacity-0 max-h-0"
-				>
-					<InstallingBanner
-						v-if="
-							(serverData.status === 'installing' || isSyncingContent || contentError) &&
-							syncProgress?.phase !== 'Analyzing'
-						"
-						data-pyro-server-installing
-						class="mb-4"
-						:progress="syncProgress"
-						:content-error="contentError"
-						@retry="handleContentRetry"
-					>
-						<template #icon>
-							<ServerIcon :image="serverImage" class="!h-6 !w-6" />
-						</template>
-					</InstallingBanner>
-				</Transition>
-				<BackupProgressAdmonitions class="mb-4" />
-				<NuxtPage
-					:route="route"
-					:is-connected="isConnected"
-					:is-ws-auth-incorrect="isWSAuthIncorrect"
-					:is-server-running="isServerRunning"
-					:stats="stats"
-					:server-power-state="serverPowerState"
-					:power-state-details="powerStateDetails"
-					@reinstall="onReinstall"
-					@reinstall-failed="onReinstallFailed"
-				/>
-			</div>
+		<template #default="{ onReinstall, onReinstallFailed }">
+			<NuxtPage :route="route" @reinstall="onReinstall" @reinstall-failed="onReinstallFailed" />
 		</template>
-	</div>
-	<div
-		v-if="flags.advancedDebugInfo"
-		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">Server data</h2>
-		<pre class="markdown-body w-full overflow-auto rounded-2xl bg-bg-raised p-4 text-sm">{{
-			safeStringify(serverData)
-		}}</pre>
-	</div>
+	</ServersManageRootLayout>
 </template>
 
 <script setup lang="ts">
-import { Intercom, shutdown } from '@intercom/messenger-js-sdk'
-import type { Archon } from '@modrinth/api-client'
-import { clearNodeAuthState, ModrinthApiError, setNodeAuthState } from '@modrinth/api-client'
-import {
-	BoxesIcon,
-	CheckIcon,
-	CopyIcon,
-	DatabaseBackupIcon,
-	FileIcon,
-	FolderOpenIcon,
-	IssuesIcon,
-	LayoutTemplateIcon,
-	LeftArrowIcon,
-	LinkIcon,
-	LockIcon,
-	RightArrowIcon,
-	SettingsIcon,
-	TimerIcon,
-	TransferIcon,
-} from '@modrinth/assets'
-import type { BusyReason } from '@modrinth/ui'
-import {
-	Avatar,
-	BackupProgressAdmonitions,
-	ButtonStyled,
-	ContentPageHeader,
-	defineMessage,
-	ErrorInformationCard,
-	formatLoaderLabel,
-	injectModrinthClient,
-	injectNotificationManager,
-	InstallingBanner,
-	LoaderIcon,
-	NavTabs,
-	provideModrinthServerContext,
-	ServerIcon,
-	ServerNotice,
-	ServerOnboardingPanelPage,
-	useDebugLogger,
-} from '@modrinth/ui'
-import type { Stats } from '@modrinth/utils'
-import { useQuery, useQueryClient } from '@tanstack/vue-query'
-import { useTimeoutFn } from '@vueuse/core'
-import DOMPurify from 'dompurify'
-import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
+import { ServersManageRootLayout } from '@modrinth/ui'
 
 import { reloadNuxtApp } from '#app'
-import PanelErrorIcon from '~/components/ui/servers/icons/PanelErrorIcon.vue'
-import MedalServerCountdown from '~/components/ui/servers/marketing/MedalServerCountdown.vue'
-import PanelServerActionButton from '~/components/ui/servers/PanelServerActionButton.vue'
-import PanelSpinner from '~/components/ui/servers/PanelSpinner.vue'
-import { useServerImage } from '~/composables/servers/use-server-image.ts'
-import { useServerProject } from '~/composables/servers/use-server-project.ts'
-import { useModrinthServersConsole } from '~/store/console.ts'
-
-const { addNotification } = injectNotificationManager()
-const client = injectModrinthClient()
+import { products } from '~/generated/state.json'
 
-const isReconnecting = ref(false)
-const isLoading = ref(true)
-const isMounted = ref(true)
-const unsubscribers = ref<(() => void)[]>([])
 const flags = useFeatureFlags()
-const config = useRuntimeConfig()
-
-type AuthUser = {
-	id: string
-	username: string
-	email?: string
-	created: string
-}
-
-const auth = (await useAuth()) as unknown as { value: { user: AuthUser | null } }
-
-const debug = useDebugLogger('ServerManage')
 const route = useNativeRoute()
 const router = useRouter()
+const config = useRuntimeConfig()
 const serverId = route.params.id as string
 
-const { data: serverData, error: serverQueryError } = useQuery({
-	queryKey: ['servers', 'detail', serverId],
-	queryFn: () => client.archon.servers_v0.get(serverId)!,
-})
-
-function updateServerData(patch: Partial<Archon.Servers.v0.Server>) {
-	if (!serverData.value) return
-	queryClient.setQueryData(['servers', 'detail', serverId], {
-		...serverData.value,
-		...patch,
-	})
-}
-
-const serverError = computed(() => {
-	const err = serverQueryError.value
-	if (err instanceof ModrinthApiError) return err
-	return err ? ModrinthApiError.fromUnknown(err) : null
-})
-
-const { data: serverFull } = useQuery({
-	queryKey: ['servers', 'v1', 'detail', serverId],
-	queryFn: () => client.archon.servers_v1.get(serverId),
-})
-
-const worldId = computed(() => {
-	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 serverImage = useServerImage(
-	serverId,
-	computed(() => serverData.value?.upstream ?? null),
-)
-const { data: serverProject } = useServerProject(computed(() => serverData.value?.upstream ?? null))
-
-const errorTitle = ref('Error')
-const errorMessage = ref('An unexpected error occurred.')
-const errorLog = ref('')
-const errorLogFile = ref('')
-
-function safeStringify(obj: unknown, indent = ' '): string {
-	const seen = new WeakSet()
-	return JSON.stringify(
-		obj,
-		(_key, value) => {
-			if (typeof value === 'object' && value !== null) {
-				if (seen.has(value)) {
-					return '[Circular]'
-				}
-				seen.add(value)
-			}
-			return value
-		},
-		indent,
-	)
-}
-
-const isConnected = ref(false)
-const isWSAuthIncorrect = ref(false)
-const modrinthServersConsole = useModrinthServersConsole()
-const queryClient = useQueryClient()
-const cpuData = ref<number[]>([])
-const ramData = ref<number[]>([])
-const isServerRunning = computed(() => serverPowerState.value === 'running')
-const serverPowerState = ref<Archon.Websocket.v0.PowerState>('stopped')
-const powerStateDetails = ref<{ oom_killed?: boolean; exit_code?: number }>()
-const backupsState = reactive(new Map())
-const cancelledBackups = new Set<string>()
-
-const markBackupCancelled = (backupId: string) => {
-	cancelledBackups.add(backupId)
-}
-
-// Parthenon state event
-const syncProgress = ref<Archon.Websocket.v0.SyncContentProgress | null>(null)
-const contentError = ref<Archon.Websocket.v0.SyncContentError | null>(null)
-const syncProgressActive = ref(false)
-const isAwaitingPostInstallRefresh = ref(false)
-const { start: startSyncHide, stop: cancelSyncHide } = useTimeoutFn(
-	() => (syncProgressActive.value = false),
-	1000,
-	{ immediate: false },
-)
-
-watch(syncProgress, (progress) => {
-	if (progress != null) {
-		cancelSyncHide()
-		syncProgressActive.value = true
-	} else if (syncProgressActive.value) {
-		startSyncHide()
-	}
-})
-
-const isSyncingContent = computed(
-	() => syncProgressActive.value || isAwaitingPostInstallRefresh.value,
-)
-
-const busyReasons = computed(() => {
-	const reasons: BusyReason[] = []
-	if (serverData.value?.status === 'installing') {
-		reasons.push({
-			reason: defineMessage({
-				id: 'servers.busy.installing',
-				defaultMessage: 'Server is installing',
-			}),
-		})
-	}
-	if (isSyncingContent.value) {
-		reasons.push({
-			reason: defineMessage({
-				id: 'servers.busy.syncing-content',
-				defaultMessage: 'Content sync in progress',
-			}),
-		})
-	}
-	for (const entry of backupsState.values()) {
-		if (entry.create?.state === 'ongoing') {
-			reasons.push({
-				reason: defineMessage({
-					id: 'servers.busy.backup-creating',
-					defaultMessage: 'Backup creation in progress',
-				}),
-			})
-			break
-		}
-		if (entry.restore?.state === 'ongoing') {
-			reasons.push({
-				reason: defineMessage({
-					id: 'servers.busy.backup-restoring',
-					defaultMessage: 'Backup restore in progress',
-				}),
-			})
-			break
-		}
-	}
-	return reasons
-})
-
-const fsAuth = ref<{ url: string; token: string } | null>(null)
-const fsOps = ref<Archon.Websocket.v0.FilesystemOperation[]>([])
-const fsQueuedOps = ref<Archon.Websocket.v0.QueuedFilesystemOp[]>([])
-
-const refreshFsAuth = async () => {
-	try {
-		const auth = await client.archon.servers_v0.getFilesystemAuth(serverId)
-		fsAuth.value = auth
-	} catch (error) {
-		console.error('Failed to refresh filesystem auth:', error)
-		throw error
-	}
-}
-
-setNodeAuthState(() => fsAuth.value, refreshFsAuth)
-
-provideModrinthServerContext({
-	serverId,
-	worldId,
-	server: serverData as Ref<Archon.Servers.v0.Server>,
-	isConnected,
-	powerState: serverPowerState,
-	isServerRunning,
-	backupsState,
-	markBackupCancelled,
-	isSyncingContent,
-	busyReasons,
-	fsAuth,
-	fsOps,
-	fsQueuedOps,
-	refreshFsAuth,
-})
-
-const uptimeSeconds = ref(0)
-
-const formattedUptime = computed(() => {
-	const days = Math.floor(uptimeSeconds.value / (24 * 3600))
-	const hours = Math.floor((uptimeSeconds.value % (24 * 3600)) / 3600)
-	const minutes = Math.floor((uptimeSeconds.value % 3600) / 60)
-	const seconds = uptimeSeconds.value % 60
-
-	let formatted = ''
-	if (days > 0) formatted += `${days}d `
-	if (hours > 0 || days > 0) formatted += `${hours}h `
-	formatted += `${minutes}m ${seconds}s`
-	return formatted.trim()
-})
-
-function copyServerAddress() {
-	if (!serverData.value?.net?.domain) return
-	navigator.clipboard.writeText(serverData.value.net.domain + '.modrinth.gg')
-	addNotification({
-		title: 'Server address copied',
-		text: "Your server's address has been copied to your clipboard.",
-		type: 'success',
-	})
-}
-
-const copied = ref(false)
-const error = ref<Error | null>(null)
-
-const initialConsoleMessage = [
-	'   __________________________________________________',
-	' /  Welcome to your \x1B[32mModrinth Server\x1B[37m!                  \\',
-	'|   Press the green start button to start your server! |',
-	' \\____________________________________________________/',
-	'\x1B[32m     _    _ \x1B[37m',
-	'\x1B[32m    (o)--(o)      \x1B[37m',
-	'\x1B[32m   /.______.\\\x1B[37m',
-	'\x1B[32m   \\________/     \x1B[37m',
-	'\x1B[32m  ./        \\.    \x1B[37m',
-	'\x1B[32m ( .        , )\x1B[37m',
-	'\x1B[32m  \\ \\_\\\\ //_/ /\x1B[37m',
-	'\x1B[32m   ~~  ~~  ~~\x1B[37m',
-]
-
-const stats = ref<Stats>({
-	current: {
-		cpu_percent: 0,
-		ram_usage_bytes: 0,
-		ram_total_bytes: 1,
-		storage_usage_bytes: 0,
-		storage_total_bytes: 0,
-	},
-	past: {
-		cpu_percent: 0,
-		ram_usage_bytes: 0,
-		ram_total_bytes: 1,
-		storage_usage_bytes: 0,
-		storage_total_bytes: 0,
-	},
-	graph: {
-		cpu: [],
-		ram: [],
-	},
-})
-
-const navLinks = [
-	{
-		label: 'Overview',
-		href: `/hosting/manage/${serverId}`,
-		icon: LayoutTemplateIcon,
-		subpages: [],
-	},
-	{
-		label: 'Content',
-		href: `/hosting/manage/${serverId}/content`,
-		icon: BoxesIcon,
-		subpages: ['mods', 'datapacks'],
-	},
-	{ label: 'Files', href: `/hosting/manage/${serverId}/files`, icon: FolderOpenIcon, subpages: [] },
-	{
-		label: 'Backups',
-		href: `/hosting/manage/${serverId}/backups`,
-		icon: DatabaseBackupIcon,
-		subpages: [],
-	},
-	{
-		label: 'Options',
-		href: `/hosting/manage/${serverId}/options`,
-		icon: SettingsIcon,
-		subpages: ['startup', 'network', 'properties', 'info'],
-	},
-]
-
-const filteredNotices = computed(
-	() => serverData.value?.notices?.filter((n) => n.level !== 'survey') ?? [],
-)
-const surveyNotice = computed(() => serverData.value?.notices?.find((n) => n.level === 'survey'))
-
-async function dismissSurvey() {
-	const noticeId = surveyNotice.value?.id
-	if (noticeId === undefined) {
-		console.warn('No survey notice to dismiss')
-		return
-	}
-	await dismissNotice(noticeId)
-	console.log(`Dismissed survey notice ${noticeId}`)
-}
-
-type TallyPopupOptions = {
-	key?: string
-	layout?: 'default' | 'modal'
-	width?: number
-	alignLeft?: boolean
-	hideTitle?: boolean
-	overlay?: boolean
-	emoji?: {
-		text: string
-		animation:
-			| 'none'
-			| 'wave'
-			| 'tada'
-			| 'heart-beat'
-			| 'spin'
-			| 'flash'
-			| 'bounce'
-			| 'rubber-band'
-			| 'head-shake'
-	}
-	autoClose?: number
-	showOnce?: boolean
-	doNotShowAfterSubmit?: boolean
-	customFormUrl?: string
-	hiddenFields?: {
-		[key: string]: unknown
-	}
-	onOpen?: () => void
-	onClose?: () => void
-	onPageView?: (page: number) => void
-	onSubmit?: (payload: unknown) => void
-}
-
-const popupOptions = computed(
-	() =>
-		({
-			layout: 'default',
-			width: 400,
-			autoClose: 2000,
-			hideTitle: true,
-			hiddenFields: {
-				username: auth.value?.user?.username,
-				user_id: auth.value?.user?.id,
-				user_email: auth.value?.user?.email,
-				server_id: serverData.value?.server_id,
-				loader: serverData.value?.loader,
-				game_version: serverData.value?.mc_version,
-				modpack_id: serverProject.value?.id,
-				modpack_name: serverProject.value?.title,
-			},
-			onOpen: () => console.log(`Opened survey notice: ${surveyNotice.value?.id}`),
-			onClose: async () => await dismissSurvey(),
-			onSubmit: (payload: any) => {
-				console.log('Form submitted:', payload)
-			},
-		}) satisfies TallyPopupOptions,
-)
-
-function showSurvey() {
-	if (!surveyNotice.value) {
-		console.warn('No survey notice to open')
-		return
-	}
-
-	try {
-		if ((window as any).Tally?.openPopup) {
-			console.log(
-				`Opening Tally popup for survey notice ${surveyNotice.value?.id} (form ID: ${surveyNotice.value?.message})`,
-			)
-			;(window as any).Tally.openPopup(surveyNotice.value?.message, popupOptions.value)
-		} else {
-			console.warn('Tally script not yet loaded')
-		}
-	} catch (e) {
-		console.error('Error opening Tally popup:', e)
-	}
-}
-
-let uptimeIntervalId: ReturnType<typeof setInterval> | null = null
-
-const startUptimeUpdates = () => {
-	uptimeIntervalId = setInterval(() => {
-		uptimeSeconds.value += 1
-	}, 1000)
-}
-
-const stopUptimeUpdates = () => {
-	if (uptimeIntervalId) {
-		clearInterval(uptimeIntervalId)
-	}
-}
-
-const handleLog = (data: Archon.Websocket.v0.WSLogEvent) => {
-	const log = data.message.split('\n').filter((l) => l.trim())
-	modrinthServersConsole.addLines(log)
-}
-
-const handleStats = (data: Archon.Websocket.v0.WSStatsEvent) => {
-	updateStats({
-		cpu_percent: data.cpu_percent,
-		ram_usage_bytes: data.ram_usage_bytes,
-		ram_total_bytes: data.ram_total_bytes,
-		storage_usage_bytes: data.storage_usage_bytes,
-		storage_total_bytes: data.storage_total_bytes,
-	})
-}
-
-const handlePowerState = (data: Archon.Websocket.v0.WSPowerStateEvent) => {
-	if (data.state === 'crashed') {
-		updatePowerState(data.state, {
-			oom_killed: data.oom_killed,
-			exit_code: data.exit_code,
-		})
-	} else {
-		updatePowerState(data.state)
-	}
-}
-
-const handleState = (data: Archon.Websocket.v0.WSStateEvent) => {
-	debug('[id.vue] handleState received:', {
-		power_variant: data.power_variant,
-		progress: data.progress,
-		serverStatus: serverData.value?.status,
-	})
-	syncProgress.value = data.progress
-	contentError.value = data.content_error
-
-	// Sync power state from the state event
-	const powerMap: Record<Archon.Websocket.v0.FlattenedPowerState, Archon.Websocket.v0.PowerState> =
-		{
-			not_ready: 'stopped',
-			starting: 'starting',
-			running: 'running',
-			stopping: 'stopping',
-			idle:
-				data.was_oom || (data.exit_code != null && data.exit_code !== 0) ? 'crashed' : 'stopped',
-		}
-	updatePowerState(powerMap[data.power_variant], {
-		exit_code: data.exit_code ?? undefined,
-		oom_killed: data.was_oom,
-	})
-
-	// Sync uptime
-	if (data.uptime > 0) {
-		stopUptimeUpdates()
-		uptimeSeconds.value = data.uptime
-		startUptimeUpdates()
-	}
-
-	// Update installing status from progress presence
-	if (serverData.value) {
-		if (data.progress != null && serverData.value.status !== 'installing') {
-			debug('[id.vue] handleState: progress != null, setting status to installing')
-			hasSeenInstallProgress = true
-			updateServerData({ status: 'installing' })
-		} else if (data.progress != null) {
-			hasSeenInstallProgress = true
-		} else if (
-			data.progress == null &&
-			data.content_error == null &&
-			serverData.value.status === 'installing' &&
-			hasSeenInstallProgress
-		) {
-			debug('[id.vue] handleState: progress null + was installing, applying optimistic update')
-			hasSeenInstallProgress = false
-			applyOptimisticCompletion()
-			invalidateAfterInstall()
-		}
-	}
-}
-
-async function handleContentRetry() {
-	if (!worldId.value) return
-	try {
-		await client.archon.content_v1.repair(serverId, worldId.value)
-	} catch (err) {
-		addNotification({
-			type: 'error',
-			text: err instanceof Error ? err.message : 'Failed to retry installation',
-		})
-	}
-}
-
-const handleUptime = (data: Archon.Websocket.v0.WSUptimeEvent) => {
-	stopUptimeUpdates()
-	uptimeSeconds.value = data.uptime
-	startUptimeUpdates()
-}
-
-const handleAuthIncorrect = () => {
-	isWSAuthIncorrect.value = true
-}
-
-const handleBackupProgress = (data: Archon.Websocket.v0.WSBackupProgressEvent) => {
-	if (data.task === 'file') return
-
-	const backupId = data.id
-
-	if (cancelledBackups.has(backupId)) return
-
-	const current = backupsState.get(backupId) ?? {}
-	const currentTaskState = current[data.task]?.state
-	const isIncomingTerminal =
-		data.state === 'done' || data.state === 'failed' || data.state === 'cancelled'
-
-	// Skip duplicate terminal events, but allow retries (terminal → ongoing)
-	if (currentTaskState === data.state && isIncomingTerminal) return
-
-	const previousProgress = current[data.task]?.progress
-	if (currentTaskState !== data.state || previousProgress !== data.progress) {
-		backupsState.set(backupId, {
-			...current,
-			[data.task]: {
-				progress: data.progress,
-				state: data.state,
-			},
-		})
-	}
-
-	if (isIncomingTerminal) {
-		const attemptCleanup = (attempt: number = 1) => {
-			queryClient.invalidateQueries({ queryKey: ['backups', 'list', serverId] }).then(() => {
-				const backupData = queryClient.getQueryData<Archon.Backups.v1.Backup[]>([
-					'backups',
-					'list',
-					serverId,
-				])
-				const backup = backupData?.find((b) => b.id === backupId)
-				const isStillActive =
-					backup && (backup.status === 'in_progress' || backup.status === 'pending')
-
-				if (isStillActive && attempt < 6) {
-					setTimeout(() => attemptCleanup(attempt + 1), 1000 * Math.pow(2, attempt - 1))
-					return
-				}
-
-				if (isStillActive) {
-					queryClient.setQueryData<Archon.Backups.v1.Backup[]>(
-						['backups', 'list', serverId],
-						(old) =>
-							old?.map((b) => {
-								if (b.id !== backupId) return b
-								return {
-									...b,
-									status: data.state === 'done' ? ('done' as const) : ('error' as const),
-									ongoing: false,
-									interrupted: data.state === 'failed',
-								}
-							}),
-					)
-				}
-
-				backupsState.delete(backupId)
-			})
-		}
-
-		attemptCleanup()
-	}
+const auth = (await useAuth()) as unknown as {
+	value: { user: { id: string; username: string; email: string; created: string } }
 }
 
-const opsQueuedForModification = ref<string[]>([])
-
-const handleFilesystemOps = (data: Archon.Websocket.v0.WSFilesystemOpsEvent) => {
-	const allOps = data.all
-
-	if (JSON.stringify(fsOps.value) !== JSON.stringify(allOps)) {
-		fsOps.value = allOps
-	}
-
-	fsQueuedOps.value = fsQueuedOps.value.filter(
-		(queuedOp) => !allOps.some((x) => x.src === queuedOp.src),
-	)
-
-	const dismissOp = async (opId: string) => {
-		try {
-			await client.kyros.files_v0.modifyOperation(opId, 'dismiss')
-		} catch (error) {
-			console.error('Failed to dismiss operation:', error)
+const authUser = auth.value?.user
+	? {
+			id: auth.value.user.id,
+			username: auth.value.user.username,
+			email: auth.value.user.email,
+			created: auth.value.user.created,
 		}
-	}
-
-	const cancelled = allOps.filter((x) => x.state === 'cancelled')
-	Promise.all(cancelled.map((x) => dismissOp(x.id)))
-
-	const completed = allOps.filter((x) => x.state === 'done')
-	if (completed.length > 0) {
-		setTimeout(
-			async () =>
-				await Promise.all(
-					completed.map((x) => {
-						if (!opsQueuedForModification.value.includes(x.id)) {
-							opsQueuedForModification.value.push(x.id)
-							return dismissOp(x.id)
-						}
-						return Promise.resolve()
-					}),
-				),
-			3000,
-		)
-	}
-}
+	: undefined
 
-const handleNewMod = () => {
-	queryClient.invalidateQueries({ queryKey: ['content', 'list'] })
+async function fetchIntercomToken(): Promise<{ token: string }> {
+	return $fetch('/api/intercom/messenger-jwt')
 }
 
-const newLoader = ref<string | null>(null)
-const newLoaderVersion = ref<string | null>(null)
-const newMCVersion = ref<string | null>(null)
-let hasSeenInstallProgress = false
-
-const onReinstall = async (potentialArgs: any) => {
-	debug('[id.vue] onReinstall called with:', potentialArgs)
-
-	if (serverData.value?.flows?.intro) {
-		await client.archon.servers_v1.endIntro(serverId)
-		queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] })
-	}
-
-	if (!serverData.value) return
-
-	debug('[id.vue] onReinstall: setting serverData.status to installing')
-	hasSeenInstallProgress = false
-	updateServerData({ status: 'installing' })
-
-	if (potentialArgs?.loader) {
-		newLoader.value = potentialArgs.loader
-	}
-	if (potentialArgs?.lVersion) {
-		newLoaderVersion.value = potentialArgs.lVersion
+async function resolveViewer(): Promise<{ userId: string | null; userRole: string | null }> {
+	return {
+		userId: auth.value?.user?.id ?? null,
+		userRole: (auth.value?.user as any)?.role ?? null,
 	}
-	if (potentialArgs?.mVersion) {
-		newMCVersion.value = potentialArgs.mVersion
-	}
-
-	debug('[id.vue] onReinstall: stored refs:', {
-		newLoader: newLoader.value,
-		newLoaderVersion: newLoaderVersion.value,
-		newMCVersion: newMCVersion.value,
-	})
-
-	error.value = null
-	errorTitle.value = 'Error'
-	errorMessage.value = 'An unexpected error occurred.'
-
-	// Immediately refetch so loader.vue has fresh data (buttons stay locked via isSyncingContent)
-	debug('[id.vue] onReinstall: triggering immediate invalidation for loader.vue')
-	queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] })
-	queryClient.invalidateQueries({ queryKey: ['content', 'list'] })
-}
-
-const onReinstallFailed = () => {
-	debug('[id.vue] onReinstallFailed: reverting status to available')
-	updateServerData({ status: 'available' })
-	newLoader.value = null
-	newLoaderVersion.value = null
-	newMCVersion.value = null
-}
-
-function applyOptimisticCompletion() {
-	const patch: Partial<Archon.Servers.v0.Server> = { status: 'available' }
-	if (newLoader.value) patch.loader = formatLoaderLabel(newLoader.value) as Archon.Servers.v0.Loader
-	if (newLoaderVersion.value) patch.loader_version = newLoaderVersion.value
-	if (newMCVersion.value) patch.mc_version = newMCVersion.value
-
-	debug('[id.vue] applyOptimisticCompletion: patch:', patch)
-	updateServerData(patch)
-
-	const addonsQueries = queryClient.getQueriesData<Archon.Content.v1.Addons>({
-		queryKey: ['content', 'list', 'v1', serverId],
-	})
-	debug(
-		'[id.vue] applyOptimisticCompletion: found',
-		addonsQueries.length,
-		'addons queries to patch',
-	)
-	for (const [key, data] of addonsQueries) {
-		if (!data) continue
-		const addonsPatch: Record<string, string> = {}
-		if (newLoader.value) addonsPatch.modloader = newLoader.value
-		if (newLoaderVersion.value) addonsPatch.modloader_version = newLoaderVersion.value
-		if (newMCVersion.value) addonsPatch.game_version = newMCVersion.value
-		if (Object.keys(addonsPatch).length > 0) {
-			debug('[id.vue] applyOptimisticCompletion: patching addons cache:', addonsPatch)
-			queryClient.setQueryData(key, { ...data, ...addonsPatch })
-		}
-	}
-
-	newLoader.value = null
-	newLoaderVersion.value = null
-	newMCVersion.value = null
-}
-
-async function invalidateAfterInstall() {
-	debug(
-		'[id.vue] invalidateAfterInstall: setting isAwaitingPostInstallRefresh=true, scheduling 2s delayed invalidation',
-	)
-	isAwaitingPostInstallRefresh.value = true
-	setTimeout(async () => {
-		debug('[id.vue] invalidateAfterInstall: delayed invalidation firing now')
-		try {
-			await Promise.all([
-				queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] }),
-				queryClient.invalidateQueries({ queryKey: ['servers', 'startup', 'v1', serverId] }),
-				queryClient.invalidateQueries({ queryKey: ['content', 'list'] }),
-			])
-			debug('[id.vue] invalidateAfterInstall: delayed invalidation complete')
-		} catch (err: unknown) {
-			console.error('Error refreshing data after installation:', err)
-		} finally {
-			debug('[id.vue] invalidateAfterInstall: setting isAwaitingPostInstallRefresh=false')
-			isAwaitingPostInstallRefresh.value = false
-		}
-	}, 2000)
-}
-
-const handleInstallationResult = async (data: Archon.Websocket.v0.WSInstallationResultEvent) => {
-	debug('[id.vue] handleInstallationResult received:', data)
-	switch (data.result) {
-		case 'ok': {
-			debug('[id.vue] handleInstallationResult: ok received')
-			if (!serverData.value) break
-
-			debug('[id.vue] handleInstallationResult: stored refs:', {
-				newLoader: newLoader.value,
-				newLoaderVersion: newLoaderVersion.value,
-				newMCVersion: newMCVersion.value,
-			})
-			debug('[id.vue] handleInstallationResult: current serverData:', {
-				status: serverData.value.status,
-				loader: serverData.value.loader,
-				loader_version: serverData.value.loader_version,
-				mc_version: serverData.value.mc_version,
-			})
-
-			applyOptimisticCompletion()
-			error.value = null
-			invalidateAfterInstall()
-
-			break
-		}
-		case 'err': {
-			console.log('failed to install')
-			console.log(data)
-			errorTitle.value = 'Installation error'
-			errorMessage.value = data.reason ?? 'Unknown error'
-			error.value = new Error(data.reason ?? 'Unknown error')
-
-			// Fetch installation log if available
-			try {
-				let files = await client.kyros.files_v0.listDirectory('/', 1, 100)
-				if (files && files.total > 1) {
-					for (let i = 2; i <= files.total; i++) {
-						const nextFiles = await client.kyros.files_v0.listDirectory('/', i, 100)
-						if (nextFiles?.items?.length === 0) break
-						if (nextFiles) files = nextFiles
-					}
-				}
-				const fileName = files?.items?.find((file) =>
-					file.name.startsWith('modrinth-installation'),
-				)?.name
-				errorLogFile.value = fileName ?? ''
-				if (fileName) {
-					const content = await client.kyros.files_v0.downloadFile(fileName)
-					errorLog.value = await content.text()
-				}
-			} catch (err) {
-				console.error('Failed to fetch installation log:', err)
-			}
-			break
-		}
-	}
-}
-
-const updateStats = (currentStats: Stats['current']) => {
-	if (!isMounted.value) return
-	if (!isConnected.value) isConnected.value = true
-	stats.value = {
-		current: currentStats,
-		past: { ...stats.value.current },
-		graph: {
-			cpu: updateGraphData(cpuData.value, currentStats.cpu_percent),
-			ram: updateGraphData(
-				ramData.value,
-				Math.floor((currentStats.ram_usage_bytes / currentStats.ram_total_bytes) * 100),
-			),
-		},
-	}
-}
-
-const updatePowerState = (
-	state: Archon.Websocket.v0.PowerState,
-	details?: { oom_killed?: boolean; exit_code?: number },
-) => {
-	serverPowerState.value = state
-
-	if (state === 'crashed') {
-		powerStateDetails.value = details
-	} else {
-		powerStateDetails.value = undefined
-	}
-
-	if (state === 'stopped' || state === 'crashed') {
-		stopUptimeUpdates()
-		uptimeSeconds.value = 0
-	}
-}
-
-const updateGraphData = (dataArray: number[], newValue: number): number[] => {
-	const updated = [...dataArray, newValue]
-	if (updated.length > 10) updated.shift()
-	return updated
-}
-
-const nodeUnavailableDetails = computed(() => [
-	{
-		label: 'Server ID',
-		value: serverId,
-		type: 'inline' as const,
-	},
-	{
-		label: 'Node',
-		value:
-			(serverError.value?.responseData as any)?.hostname ??
-			serverData.value?.datacenter ??
-			'Unknown',
-		type: 'inline' as const,
-	},
-	{
-		label: 'Error message',
-		value: nodeAccessible.value
-			? (serverError.value?.message ?? 'Unknown')
-			: 'Unable to reach node. Ping test failed.',
-		type: 'block' as const,
-	},
-])
-
-const suspendedDescription = computed(() => {
-	if (serverData.value?.suspension_reason === 'cancelled') {
-		return 'Your subscription has been cancelled.\nContact Modrinth Support if you believe this is an error.'
-	}
-	if (serverData.value?.suspension_reason) {
-		return `Your server has been suspended: ${serverData.value.suspension_reason}\nContact Modrinth Support if you believe this is an error.`
-	}
-	return 'Your server has been suspended.\nContact Modrinth Support if you believe this is an error.'
-})
-
-const generalErrorDetails = computed(() => [
-	{
-		label: 'Server ID',
-		value: serverId,
-		type: 'inline' as const,
-	},
-	{
-		label: 'Timestamp',
-		value: String(new Date().toISOString()),
-		type: 'inline' as const,
-	},
-	{
-		label: 'Error Name',
-		value: serverError.value?.name,
-		type: 'inline' as const,
-	},
-	{
-		label: 'Error Message',
-		value: serverError.value?.message,
-		type: 'block' as const,
-	},
-	...(serverError.value?.originalError
-		? [
-				{
-					label: 'Original Error',
-					value: String(serverError.value.originalError),
-					type: 'hidden' as const,
-				},
-			]
-		: []),
-	...(serverError.value?.stack
-		? [
-				{
-					label: 'Stack Trace',
-					value: serverError.value.stack,
-					type: 'hidden' as const,
-				},
-			]
-		: []),
-])
-
-const suspendedAction = computed(() => ({
-	label: 'Go to billing settings',
-	onClick: () => router.push('/settings/billing'),
-	color: 'brand' as const,
-}))
-
-const generalErrorAction = computed(() => ({
-	label: 'Go back to all servers',
-	onClick: () => router.push('/hosting/manage'),
-	color: 'brand' as const,
-}))
-
-const nodeUnavailableAction = computed(() => ({
-	label: 'Reload',
-	onClick: () => reloadNuxtApp(),
-	color: 'brand' as const,
-	disabled: false,
-}))
-
-const copyServerDebugInfo = () => {
-	const debugInfo = `Server ID: ${serverData.value?.server_id}\nError: ${errorMessage.value}\nKind: ${serverData.value?.upstream?.kind}\nProject ID: ${serverData.value?.upstream?.project_id}\nVersion ID: ${serverData.value?.upstream?.version_id}\nLog: ${errorLog.value}`
-	navigator.clipboard.writeText(debugInfo)
-	copied.value = true
-	setTimeout(() => {
-		copied.value = false
-	}, 5000)
-}
-
-const openInstallLog = () => {
-	router.replace({
-		path: `/hosting/manage/${serverId}/files`,
-		query: { ...route.query, editing: errorLogFile.value },
-	})
 }
 
-async function initializeIntercom() {
-	if (!auth.value?.user) return
-
-	try {
-		const intercomData = await $fetch<{ token: string }>('/api/intercom/messenger-jwt')
-
-		Intercom({
-			app_id: config.public.intercomAppId,
-			intercom_user_jwt: intercomData.token,
-			session_duration: 1000 * 60 * 60 * 24,
-		})
-	} catch (error) {
-		console.warn('[PYROSERVERS][INTERCOM] failed to initialize secure support chat', error)
-	}
-}
-
-const cleanup = () => {
-	isMounted.value = false
-
-	shutdown()
-
-	stopUptimeUpdates()
-
-	unsubscribers.value.forEach((unsub) => unsub())
-	unsubscribers.value = []
-
-	client.archon.sockets.disconnect(serverId)
-
-	isConnected.value = false
-	isReconnecting.value = false
-	isLoading.value = true
-
-	cancelledBackups.clear()
-
-	clearNodeAuthState()
-
-	DOMPurify.removeHook('afterSanitizeAttributes')
-}
-
-async function dismissNotice(noticeId: number) {
-	await client.archon.servers_v0.dismissNotice(serverId, noticeId).catch((err) => {
-		addNotification({
-			title: 'Error dismissing notice',
-			text: err,
-			type: 'error',
-		})
-	})
-	await queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] })
-}
-
-const nodeAccessible = ref(true)
-
-async function testNodeReachability(): Promise<boolean> {
-	const nodeInstance = serverData.value?.node?.instance
-	if (!nodeInstance) {
-		console.warn('No node instance available for ping test')
-		return false
-	}
-
-	const wsUrl = `wss://${nodeInstance}/pingtest`
-
-	try {
-		return await new Promise((resolve) => {
-			const socket = new WebSocket(wsUrl)
-			const timeout = setTimeout(() => {
-				socket.close()
-				resolve(false)
-			}, 5000)
-
-			socket.onopen = () => {
-				clearTimeout(timeout)
-				socket.send(performance.now().toString())
-			}
-
-			socket.onmessage = () => {
-				clearTimeout(timeout)
-				socket.close()
-				resolve(true)
-			}
-
-			socket.onerror = () => {
-				clearTimeout(timeout)
-				resolve(false)
-			}
-		})
-	} catch (error) {
-		console.error(`Failed to ping node ${wsUrl}:`, error)
-		return false
-	}
-}
-
-function initializeServer() {
-	if (serverData.value?.status === 'suspended') {
-		isLoading.value = false
-		return
-	}
-
-	// Skip node test if node is null (upgrading/provisioning)
-	if (serverData.value?.node === null) {
-		isLoading.value = false
-		return
-	}
-
-	testNodeReachability()
-		.then((result) => {
-			nodeAccessible.value = result
-			if (!nodeAccessible.value) {
-				isLoading.value = false
-			}
-		})
-		.catch((err) => {
-			console.error('Error testing node reachability:', err)
-			nodeAccessible.value = false
-			isLoading.value = false
-		})
-
-	if (serverError.value) {
-		isLoading.value = false
-	} else {
-		client.archon.sockets
-			.safeConnect(serverId)
-			.then(() => {
-				modrinthServersConsole.clear()
-				isConnected.value = true
-				isLoading.value = false
-
-				for (const line of initialConsoleMessage) {
-					modrinthServersConsole.addLine(line)
-				}
-
-				unsubscribers.value = [
-					client.archon.sockets.on(serverId, 'log', handleLog),
-					client.archon.sockets.on(serverId, 'stats', handleStats),
-					client.archon.sockets.on(serverId, 'state', handleState),
-					client.archon.sockets.on(serverId, 'power-state', handlePowerState),
-					client.archon.sockets.on(serverId, 'uptime', handleUptime),
-					client.archon.sockets.on(serverId, 'auth-incorrect', handleAuthIncorrect),
-					client.archon.sockets.on(serverId, 'auth-ok', () => {}),
-					client.archon.sockets.on(serverId, 'installation-result', handleInstallationResult),
-					client.archon.sockets.on(serverId, 'backup-progress', handleBackupProgress),
-					client.archon.sockets.on(serverId, 'filesystem-ops', handleFilesystemOps),
-					client.archon.sockets.on(serverId, 'new-mod', handleNewMod),
-				]
-			})
-			.catch((error) => {
-				debug('[id.vue] Failed to connect WebSocket:', error)
-				isConnected.value = false
-				isLoading.value = false
-			})
-	}
-
-	if (serverData.value?.flows?.intro && serverProject.value) {
-		client.archon.servers_v1.endIntro(serverId).then(() => {
-			queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] })
-		})
-	}
-}
-
-onMounted(() => {
-	isMounted.value = true
-
-	// serverData comes from useQuery and may not be available yet at mount time.
-	// Wait for it before initializing WebSocket, node reachability, etc.
-	if (serverData.value) {
-		initializeServer()
-	} else {
-		const stopWatch = watch(serverData, (data) => {
-			if (data) {
-				stopWatch()
-				initializeServer()
-			}
-		})
-	}
-
-	void initializeIntercom()
-
-	DOMPurify.addHook(
-		'afterSanitizeAttributes',
-		(node: {
-			tagName: string
-			getAttribute: (arg0: string) => any
-			setAttribute: (arg0: string, arg1: string) => void
-		}) => {
-			if (node.tagName === 'A' && node.getAttribute('target')) {
-				node.setAttribute('rel', 'noopener noreferrer')
-			}
-		},
-	)
-
-	if (surveyNotice.value) {
-		showSurvey()
-	}
-})
-
-onUnmounted(() => {
-	cleanup()
-})
-
 definePageMeta({
 	middleware: 'auth',
 })
@@ -1543,48 +86,3 @@ useHead({
 	],
 })
 </script>
-
-<style>
-@keyframes server-action-buttons-anim {
-	0% {
-		opacity: 0;
-		transform: translateX(1rem);
-	}
-
-	100% {
-		opacity: 1;
-		transform: none;
-	}
-}
-
-.server-action-buttons-anim {
-	animation: server-action-buttons-anim 0.2s ease-out;
-}
-
-.mobile-blurred-servericon::before {
-	position: absolute;
-	left: 0;
-	top: 0;
-	display: block;
-	height: 9rem;
-	width: 100%;
-	background-size: cover;
-	background-position: center;
-	background-repeat: no-repeat;
-	filter: blur(1rem);
-	content: '';
-	background-image:
-		linear-gradient(
-			to bottom,
-			rgba(from var(--color-raised-bg) r g b / 0.2),
-			rgb(from var(--color-raised-bg) r g b / 0.8)
-		),
-		var(--server-bg-image);
-}
-
-@media screen and (min-width: 640px) {
-	.mobile-blurred-servericon::before {
-		display: none;
-	}
-}
-</style>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/index.vue b/apps/frontend/src/pages/hosting/manage/[id]/index.vue
index 46e19ea119..9b4ae555cc 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/index.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/index.vue
@@ -1,728 +1,13 @@
-<template>
-	<div class="relative flex select-none flex-col gap-6" data-pyro-server-manager-root>
-		<Admonition v-if="backupBusyReason" type="warning" :header="backupBusyReason">
-			Your server is still accessible during this time.
-		</Admonition>
-		<Admonition
-			v-if="inspectingError && isConnected && !isWsAuthIncorrect"
-			data-pyro-servers-inspecting-error
-			type="critical"
-			:header="`${serverData?.name} shut down unexpectedly.`"
-			dismissible
-			@dismiss="clearError"
-		>
-			<template v-if="inspectingError.analysis.problems.length">
-				<p class="m-0 text-sm opacity-80">
-					We automatically analyzed the logs and found the following:
-				</p>
-				<div class="mt-2 flex flex-col gap-2">
-					<div
-						v-for="problem in inspectingError.analysis.problems"
-						:key="problem.message"
-						class="bg-raised-bg/30 rounded-xl px-3 py-2"
-					>
-						<p class="m-0 text-sm font-semibold">{{ problem.message }}</p>
-						<ul v-if="problem.solutions.length" class="m-0 ml-4 mt-1.5 flex flex-col gap-1">
-							<li
-								v-for="solution in problem.solutions"
-								:key="solution.message"
-								class="text-sm opacity-80"
-							>
-								{{ solution.message }}
-							</li>
-						</ul>
-					</div>
-				</div>
-			</template>
-			<template v-else-if="props.serverPowerState === 'crashed'">
-				<template v-if="props.powerStateDetails?.oom_killed">
-					The server stopped because it ran out of memory. There may be a memory leak caused by a
-					mod or plugin, or you may need to upgrade your Modrinth Server.
-				</template>
-				<template v-else-if="props.powerStateDetails?.exit_code !== undefined">
-					Your server exited with code {{ props.powerStateDetails.exit_code }}.
-					<template v-if="props.powerStateDetails.exit_code === 1">
-						There may be a mod or plugin causing the issue, or an issue with your server
-						configuration.
-					</template>
-				</template>
-				<template v-else> We could not determine the specific cause of the crash. </template>
-				<p class="m-0 mt-2">You can try restarting the server.</p>
-			</template>
-			<template v-else>
-				We could not find any specific problems, but you can try restarting the server.
-			</template>
-		</Admonition>
-
-		<div class="flex flex-col-reverse gap-6 md:flex-col">
-			<ServerStats
-				:data="isConnected && !isWsAuthIncorrect ? stats : undefined"
-				:loading="!isConnected || isWsAuthIncorrect"
-			/>
-
-			<div
-				class="relative flex h-[700px] w-full flex-col gap-3 overflow-hidden rounded-2xl border border-divider bg-bg-raised p-4 transition-all duration-300 ease-in-out md:p-8"
-				:class="{ 'border-0': !isConnected || isWsAuthIncorrect }"
-			>
-				<div class="flex items-center justify-between">
-					<div class="flex items-center gap-4">
-						<h2 class="m-0 text-3xl font-extrabold text-contrast">Console</h2>
-						<PanelServerStatus v-if="isConnected && !isWsAuthIncorrect" :state="serverPowerState" />
-					</div>
-				</div>
-
-				<PanelTerminal :full-screen="fullScreen" :loading="!isConnected || isWsAuthIncorrect">
-					<div class="relative w-full px-4 pt-4">
-						<ul
-							v-if="suggestions.length && isConnected && !isWsAuthIncorrect"
-							id="command-suggestions"
-							ref="suggestionsList"
-							class="mt-1 max-h-60 w-full list-none overflow-auto rounded-md border border-divider bg-bg-raised p-0 shadow-lg"
-							role="listbox"
-						>
-							<li
-								v-for="(suggestion, index) in suggestions"
-								:id="'suggestion-' + index"
-								:key="index"
-								role="option"
-								:aria-selected="index === selectedSuggestionIndex"
-								:class="[
-									'cursor-pointer px-4 py-2',
-									index === selectedSuggestionIndex ? 'bg-bg-raised' : 'bg-bg',
-								]"
-								@click="selectSuggestion(index)"
-								@mousemove="() => (selectedSuggestionIndex = index)"
-							>
-								{{ suggestion }}
-							</li>
-						</ul>
-						<div class="relative flex items-center">
-							<span
-								v-if="bestSuggestion && isConnected && !isWsAuthIncorrect"
-								class="pointer-events-none absolute left-[26px] transform select-none text-gray-400"
-							>
-								<span class="ml-[23.5px] whitespace-pre">{{
-									' '.repeat(commandInput.length - 1)
-								}}</span>
-								<span> {{ bestSuggestion }} </span>
-								<button
-									class="text pointer-events-auto ml-2 cursor-pointer rounded-md border-none bg-white text-sm focus:outline-none dark:bg-highlight"
-									aria-label="Accept suggestion"
-									style="transform: translateY(-1px)"
-									@click="acceptSuggestion"
-								>
-									TAB
-								</button>
-							</span>
-							<div
-								class="pointer-events-none absolute left-0 top-0 flex h-full w-full items-center"
-							>
-								<TerminalSquareIcon class="ml-3 h-5 w-5" />
-							</div>
-							<input
-								v-if="isServerRunning && isConnected && !isWsAuthIncorrect"
-								v-model="commandInput"
-								type="text"
-								placeholder="Send a command"
-								class="w-full rounded-md !pl-10 pt-4 focus:border-none [&&]:border-[1px] [&&]:border-solid [&&]:border-bg-raised [&&]:bg-bg"
-								aria-autocomplete="list"
-								aria-controls="command-suggestions"
-								spellcheck="false"
-								:aria-activedescendant="'suggestion-' + selectedSuggestionIndex"
-								@keydown.tab.prevent="acceptSuggestion"
-								@keydown.down.prevent="selectNextSuggestion"
-								@keydown.up.prevent="selectPrevSuggestion"
-								@keydown.enter.prevent="sendCommand"
-							/>
-							<input
-								v-else
-								disabled
-								type="text"
-								placeholder="Send a command"
-								class="w-full rounded-md !pl-10 focus:border-none [&&]:border-[1px] [&&]:border-solid [&&]:border-bg-raised [&&]:bg-bg"
-							/>
-						</div>
-					</div>
-				</PanelTerminal>
-			</div>
-		</div>
-
-		<div
-			v-if="isWsAuthIncorrect"
-			class="absolute inset-0 flex flex-col items-center justify-center bg-bg"
-		>
-			<h2>Could not connect to the server.</h2>
-			<p>
-				An error occurred while attempting to connect to your server. Please try refreshing the
-				page. (WebSocket Authentication Failed)
-			</p>
-		</div>
-	</div>
-</template>
-
 <script setup lang="ts">
-import { TerminalSquareIcon } from '@modrinth/assets'
-import {
-	Admonition,
-	injectModrinthClient,
-	injectModrinthServerContext,
-	useVIntl,
-} from '@modrinth/ui'
-import type { ServerState, Stats } from '@modrinth/utils'
-
-import PanelServerStatus from '~/components/ui/servers/PanelServerStatus.vue'
-import PanelTerminal from '~/components/ui/servers/PanelTerminal.vue'
-import ServerStats from '~/components/ui/servers/ServerStats.vue'
-
-type ServerProps = {
-	isConnected: boolean
-	isWsAuthIncorrect: boolean
-	stats: Stats
-	serverPowerState: ServerState
-	powerStateDetails?: {
-		oom_killed?: boolean
-		exit_code?: number
-	}
-	isServerRunning: boolean
-}
-
-const props = defineProps<ServerProps>()
-
-const { formatMessage } = useVIntl()
-const client = injectModrinthClient()
-const { server: serverData, serverId, busyReasons } = injectModrinthServerContext()
-
-const backupBusyReason = computed(() => {
-	const reason = busyReasons.value.find(
-		(r) =>
-			r.reason.id === 'servers.busy.backup-creating' ||
-			r.reason.id === 'servers.busy.backup-restoring',
-	)
-	return reason ? formatMessage(reason.reason) : null
-})
-
-interface ErrorData {
-	id: string
-	name: string
-	type: string
-	version: string
-	title: string
-	analysis: {
-		problems: Array<{
-			message: string
-			counter: number
-			entry: {
-				level: number
-				time: string | null
-				prefix: string
-				lines: Array<{ number: number; content: string }>
-			}
-			solutions: Array<{ message: string }>
-		}>
-		information: Array<{
-			message: string
-			counter: number
-			label: string
-			value: string
-			entry: {
-				level: number
-				time: string | null
-				prefix: string
-				lines: Array<{ number: number; content: string }>
-			}
-		}>
-	}
-}
-
-const inspectingError = ref<ErrorData | null>(null)
-
-const inspectError = async () => {
-	try {
-		const blob = await client.kyros.files_v0.downloadFile('/logs/latest.log')
-		const log = await blob.text()
-		if (!log) return
-
-		// @ts-ignore
-		const response = await $fetch(`https://api.mclo.gs/1/analyse`, {
-			method: 'POST',
-			headers: {
-				'Content-Type': 'application/x-www-form-urlencoded',
-			},
-			body: new URLSearchParams({
-				content: log,
-			}),
-		})
-
-		// @ts-ignore
-		if (response && response.analysis && Array.isArray(response.analysis.problems)) {
-			inspectingError.value = response as ErrorData
-		} else {
-			inspectingError.value = null
-		}
-	} catch (error) {
-		console.error('Failed to analyze logs:', error)
-		inspectingError.value = null
-	}
-}
-
-const clearError = () => {
-	inspectingError.value = null
-}
-
-watch(
-	() => props.serverPowerState,
-	(newVal) => {
-		if (newVal === 'crashed' && !props.powerStateDetails?.oom_killed) {
-			inspectError()
-		} else {
-			clearError()
-		}
-	},
-)
-
-if (props.serverPowerState === 'crashed' && !props.powerStateDetails?.oom_killed) {
-	inspectError()
-}
-
-const DYNAMIC_ARG = Symbol('DYNAMIC_ARG')
+import { injectModrinthServerContext, ServersManageOverviewPage } from '@modrinth/ui'
 
-const commandTree: any = {
-	advancement: {
-		grant: {
-			[DYNAMIC_ARG]: {
-				everything: null,
-				only: {
-					[DYNAMIC_ARG]: null,
-				},
-				from: {
-					[DYNAMIC_ARG]: null,
-				},
-				through: {
-					[DYNAMIC_ARG]: null,
-				},
-				until: {
-					[DYNAMIC_ARG]: null,
-				},
-			},
-		},
-		revoke: {
-			[DYNAMIC_ARG]: {
-				everything: null,
-				only: {
-					[DYNAMIC_ARG]: null,
-				},
-				from: {
-					[DYNAMIC_ARG]: null,
-				},
-				through: {
-					[DYNAMIC_ARG]: null,
-				},
-				until: {
-					[DYNAMIC_ARG]: null,
-				},
-			},
-		},
-	},
-	ban: {
-		[DYNAMIC_ARG]: {
-			[DYNAMIC_ARG]: null,
-			duration: {
-				[DYNAMIC_ARG]: null,
-			},
-		},
-	},
-	'ban-ip': null,
-	banlist: {
-		ips: null,
-		players: null,
-		all: null,
-	},
-	bossbar: {
-		add: null,
-		get: null,
-		list: null,
-		remove: null,
-		set: null,
-	},
-	clear: {
-		[DYNAMIC_ARG]: {
-			[DYNAMIC_ARG]: {
-				[DYNAMIC_ARG]: null,
-				reason: null,
-			},
-		},
-	},
-	clone: null,
-	data: {
-		get: null,
-		merge: null,
-		modify: null,
-		remove: null,
-	},
-	datapack: {
-		disable: null,
-		enable: null,
-		list: null,
-		reload: null,
-	},
-	debug: {
-		start: null,
-		stop: null,
-		function: null,
-		memory: null,
-	},
-	defaultgamemode: {
-		survival: null,
-		creative: null,
-		adventure: null,
-		spectator: null,
-	},
-	deop: null,
-	difficulty: {
-		peaceful: null,
-		easy: null,
-		normal: null,
-		hard: null,
-	},
-	effect: {
-		give: {
-			[DYNAMIC_ARG]: {
-				[DYNAMIC_ARG]: {
-					[DYNAMIC_ARG]: {
-						[DYNAMIC_ARG]: {
-							true: null,
-							false: null,
-						},
-					},
-				},
-			},
-		},
-		clear: {
-			[DYNAMIC_ARG]: {
-				[DYNAMIC_ARG]: null,
-			},
-		},
-	},
-	enchant: null,
-	execute: null,
-	experience: {
-		add: null,
-		set: null,
-		query: null,
-	},
-	fill: null,
-	forceload: {
-		add: null,
-		remove: null,
-		query: null,
-	},
-	function: null,
-	gamemode: {
-		survival: {
-			[DYNAMIC_ARG]: null,
-		},
-		creative: {
-			[DYNAMIC_ARG]: null,
-		},
-		adventure: {
-			[DYNAMIC_ARG]: null,
-		},
-		spectator: {
-			[DYNAMIC_ARG]: null,
-		},
-	},
-	gamerule: null,
-	give: {
-		[DYNAMIC_ARG]: {
-			[DYNAMIC_ARG]: {
-				[DYNAMIC_ARG]: null,
-			},
-		},
-	},
-	help: null,
-	kick: null,
-	kill: {
-		[DYNAMIC_ARG]: null,
-	},
-	list: null,
-	locate: {
-		biome: null,
-		poi: null,
-		structure: null,
-	},
-	loot: {
-		give: null,
-		insert: null,
-		replace: null,
-		spawn: null,
-	},
-	me: null,
-	msg: null,
-	op: null,
-	pardon: null,
-	'pardon-ip': null,
-	particle: null,
-	playsound: null,
-	recipe: {
-		give: null,
-		take: null,
-	},
-	reload: null,
-	say: null,
-	schedule: {
-		function: null,
-		clear: null,
-	},
-	scoreboard: {
-		objectives: {
-			add: null,
-			remove: null,
-			setdisplay: null,
-			list: null,
-			modify: null,
-		},
-		players: {
-			add: null,
-			remove: null,
-			set: null,
-			get: null,
-			list: null,
-			enable: null,
-			operation: null,
-			reset: null,
-		},
-	},
-	seed: null,
-	setblock: null,
-	setidletimeout: null,
-	setworldspawn: null,
-	spawnpoint: null,
-	spectate: null,
-	spreadplayers: null,
-	stop: null,
-	stopsound: null,
-	summon: null,
-	tag: {
-		add: null,
-		list: null,
-		remove: null,
-	},
-	team: {
-		add: null,
-		empty: null,
-		join: null,
-		leave: null,
-		list: null,
-		modify: null,
-		remove: null,
-	},
-	teleport: {
-		[DYNAMIC_ARG]: {
-			[DYNAMIC_ARG]: {
-				[DYNAMIC_ARG]: {
-					[DYNAMIC_ARG]: null,
-				},
-			},
-		},
-	},
-	tp: {
-		[DYNAMIC_ARG]: {
-			[DYNAMIC_ARG]: {
-				[DYNAMIC_ARG]: null,
-			},
-		},
-	},
-	trigger: null,
-	weather: {
-		clear: {
-			[DYNAMIC_ARG]: null,
-		},
-		rain: {
-			[DYNAMIC_ARG]: null,
-		},
-		thunder: {
-			[DYNAMIC_ARG]: null,
-		},
-	},
-	whitelist: {
-		add: null,
-		list: null,
-		off: null,
-		on: null,
-		reload: null,
-		remove: null,
-	},
-	worldborder: {
-		add: null,
-		center: null,
-		damage: {
-			amount: null,
-			buffer: null,
-		},
-		get: null,
-		set: null,
-		warning: {
-			distance: null,
-			time: null,
-		},
-	},
-	xp: null,
-}
-
-const fullScreen = ref(false)
-const commandInput = ref('')
-const suggestions = ref<string[]>([])
-const selectedSuggestionIndex = ref(0)
-
-// const serverIP = computed(() => serverData.value?.net.ip ?? "");
-// const serverPort = computed(() => serverData.value?.net.port ?? 0);
-// const serverDomain = computed(() => serverData.value?.net.domain ?? "");
-
-const suggestionsList = ref<HTMLUListElement | null>(null)
+const { server } = injectModrinthServerContext()
 
 useHead({
-	title: `Overview - ${serverData.value?.name ?? 'Server'} - Modrinth`,
+	title: computed(() => `Overview - ${server.value?.name ?? 'Server'} - Modrinth`),
 })
-
-const bestSuggestion = computed(() => {
-	if (!suggestions.value.length) return ''
-	const inputTokens = commandInput.value.trim().split(/\s+/)
-	let lastInputToken = inputTokens[inputTokens.length - 1] || ''
-	if (inputTokens.length - 1 === 0 && lastInputToken.startsWith('/')) {
-		lastInputToken = lastInputToken.slice(1)
-	}
-	const selectedSuggestion = suggestions.value[selectedSuggestionIndex.value]
-	const suggestionTokens = selectedSuggestion.split(/\s+/)
-	const lastSuggestionToken = suggestionTokens[suggestionTokens.length - 1] || ''
-	if (lastSuggestionToken.toLowerCase().startsWith(lastInputToken.toLowerCase())) {
-		return lastSuggestionToken.slice(lastInputToken.length)
-	}
-	return ''
-})
-
-const getSuggestions = (input: string): string[] => {
-	const trimmedInput = input.trim()
-	const inputWithoutSlash = trimmedInput.startsWith('/') ? trimmedInput.slice(1) : trimmedInput
-	const tokens = inputWithoutSlash.split(/\s+/)
-	let currentLevel: any = commandTree
-
-	for (let i = 0; i < tokens.length; i++) {
-		const token = tokens[i].toLowerCase()
-		if (currentLevel?.[token]) {
-			currentLevel = currentLevel[token] as any
-		} else if (currentLevel?.[DYNAMIC_ARG]) {
-			currentLevel = currentLevel[DYNAMIC_ARG] as any
-		} else {
-			if (i === tokens.length - 1) {
-				break
-			}
-			currentLevel = null
-			break
-		}
-	}
-
-	if (currentLevel) {
-		const lastToken = tokens[tokens.length - 1]?.toLowerCase() || ''
-		const possibleKeys = Object.keys(currentLevel)
-		if (currentLevel[DYNAMIC_ARG]) {
-			possibleKeys.push('<arg>')
-		}
-		return possibleKeys
-			.filter((key) => key === '<arg>' || key.toLowerCase().startsWith(lastToken))
-			.filter((k) => k !== lastToken.trim())
-			.map((key) => {
-				if (key === '<arg>') {
-					return [...tokens.slice(0, -1), '<arg>'].join(' ')
-				}
-				const newTokens = [...tokens.slice(0, -1), key]
-				return newTokens.join(' ')
-			})
-	}
-
-	return []
-}
-
-const sendCommand = () => {
-	const cmd = commandInput.value.trim()
-	if (!props.isConnected || !cmd) return
-	try {
-		sendConsoleCommand(cmd)
-		commandInput.value = ''
-		suggestions.value = []
-		selectedSuggestionIndex.value = 0
-	} catch (error) {
-		console.error('Error sending command:', error)
-	}
-}
-
-const sendConsoleCommand = (cmd: string) => {
-	try {
-		client.archon.sockets.send(serverId, { event: 'command', cmd })
-	} catch (error) {
-		console.error('Error sending command:', error)
-	}
-}
-
-watch(
-	() => selectedSuggestionIndex.value,
-	(newVal) => {
-		if (suggestionsList.value) {
-			const selectedSuggestion = suggestionsList.value.querySelector(`#suggestion-${newVal}`)
-			if (selectedSuggestion) {
-				selectedSuggestion.scrollIntoView({ block: 'nearest' })
-			}
-		}
-	},
-)
-
-watch(
-	() => commandInput.value,
-	(newVal) => {
-		const trimmed = newVal.trim()
-		if (!trimmed) {
-			suggestions.value = []
-			return
-		}
-		suggestions.value = getSuggestions(newVal)
-		selectedSuggestionIndex.value = 0
-	},
-)
-
-const selectNextSuggestion = () => {
-	if (suggestions.value.length === 0) return
-	selectedSuggestionIndex.value = (selectedSuggestionIndex.value + 1) % suggestions.value.length
-}
-
-const selectPrevSuggestion = () => {
-	if (suggestions.value.length === 0) return
-	selectedSuggestionIndex.value =
-		(selectedSuggestionIndex.value - 1 + suggestions.value.length) % suggestions.value.length
-}
-
-const acceptSuggestion = () => {
-	if (suggestions.value.filter((s) => s !== '<arg>').length === 0) return
-	const selected = suggestions.value[selectedSuggestionIndex.value]
-	const currentTokens = commandInput.value.trim().split(' ')
-	const suggestionTokens = selected.split(/\s+/).filter(Boolean)
-
-	// check if last current token is in command tree if so just add to the end
-	if (currentTokens[currentTokens.length - 1].toLowerCase() === suggestionTokens[0].toLowerCase()) {
-		/* empty */
-	} else {
-		const offset = currentTokens.length - 1 === 0 && currentTokens[0].trim().startsWith('/') ? 1 : 0
-		commandInput.value =
-			commandInput.value +
-			suggestionTokens[suggestionTokens.length - 1].substring(
-				currentTokens[currentTokens.length - 1].length - offset,
-			) +
-			' '
-		suggestions.value = getSuggestions(commandInput.value)
-		selectedSuggestionIndex.value = 0
-	}
-}
-
-const selectSuggestion = (index: number) => {
-	selectedSuggestionIndex.value = index
-	acceptSuggestion()
-}
 </script>
+
+<template>
+	<ServersManageOverviewPage />
+</template>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/options.vue b/apps/frontend/src/pages/hosting/manage/[id]/options.vue
deleted file mode 100644
index 6fa28b857f..0000000000
--- a/apps/frontend/src/pages/hosting/manage/[id]/options.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-	<div class="flex flex-col gap-4">
-		<ServerSidebar :route="route" :nav-links="navLinks" />
-	</div>
-</template>
-<script setup lang="ts">
-import {
-	getServerSettingsNavLinks,
-	injectModrinthServerContext,
-	provideServerSettings,
-	type ServerSettingsBrowseModpacksArgs,
-} from '@modrinth/ui'
-import { isAdmin as isUserAdmin, type User } from '@modrinth/utils'
-import { computed, ref } from 'vue'
-
-import ServerSidebar from '~/components/ui/servers/ServerSidebar.vue'
-
-const route = useRoute()
-const serverId = route.params.id as string
-const auth = await useAuth()
-
-const { server } = injectModrinthServerContext()
-
-useHead({
-	title: `Options - ${server.value?.name ?? 'Server'} - Modrinth`,
-})
-
-const ownerId = computed(() => server.value?.owner_id ?? 'Ghost')
-const isOwner = computed(() => (auth.value?.user as User | null)?.id === ownerId.value)
-const isAdmin = computed(() => isUserAdmin(auth.value?.user))
-
-const currentUserId = computed(() => (auth.value?.user as User | null)?.id ?? null)
-const currentUserRole = computed(() => auth.value?.user?.role ?? null)
-
-provideServerSettings({
-	isApp: ref(false),
-	currentUserId,
-	currentUserRole,
-	browseModpacks: ({ serverId, worldId, from }: ServerSettingsBrowseModpacksArgs) => {
-		navigateTo({
-			path: '/discover/modpacks',
-			query: { sid: serverId, from, wid: worldId ?? undefined },
-		})
-	},
-})
-
-const navLinks = computed(() =>
-	getServerSettingsNavLinks({
-		serverId,
-		ownerId: ownerId.value,
-		serverStatus: server.value?.status,
-		isOwner: isOwner.value,
-		isAdmin: isAdmin.value,
-	}),
-)
-</script>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/options/advanced.vue b/apps/frontend/src/pages/hosting/manage/[id]/options/advanced.vue
deleted file mode 100644
index b730006fff..0000000000
--- a/apps/frontend/src/pages/hosting/manage/[id]/options/advanced.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-import { ServerSettingsAdvancedPage } from '@modrinth/ui'
-</script>
-
-<template>
-	<ServerSettingsAdvancedPage class="card" />
-</template>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/options/billing.vue b/apps/frontend/src/pages/hosting/manage/[id]/options/billing.vue
deleted file mode 100644
index 6e470aaafc..0000000000
--- a/apps/frontend/src/pages/hosting/manage/[id]/options/billing.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-import { ServerSettingsBillingPage } from '@modrinth/ui'
-</script>
-
-<template>
-	<ServerSettingsBillingPage class="card" />
-</template>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/options/index.vue b/apps/frontend/src/pages/hosting/manage/[id]/options/index.vue
deleted file mode 100644
index 311bee0a9c..0000000000
--- a/apps/frontend/src/pages/hosting/manage/[id]/options/index.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-import { ServerSettingsGeneralPage } from '@modrinth/ui'
-</script>
-
-<template>
-	<ServerSettingsGeneralPage class="card" />
-</template>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/options/loader.vue b/apps/frontend/src/pages/hosting/manage/[id]/options/loader.vue
deleted file mode 100644
index e3a54224ea..0000000000
--- a/apps/frontend/src/pages/hosting/manage/[id]/options/loader.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import { ServerSettingsInstallationPage } from '@modrinth/ui'
-
-const emit = defineEmits<{
-	reinstall: [unknown?]
-	'reinstall-failed': []
-}>()
-</script>
-
-<template>
-	<ServerSettingsInstallationPage
-		@reinstall="(event: unknown) => emit('reinstall', event)"
-		@reinstall-failed="emit('reinstall-failed')"
-		class="card"
-	/>
-</template>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/options/network.vue b/apps/frontend/src/pages/hosting/manage/[id]/options/network.vue
deleted file mode 100644
index a63867e288..0000000000
--- a/apps/frontend/src/pages/hosting/manage/[id]/options/network.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-import { ServerSettingsNetworkPage } from '@modrinth/ui'
-</script>
-
-<template>
-	<ServerSettingsNetworkPage class="card" />
-</template>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue b/apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue
deleted file mode 100644
index 48c1fb8a6d..0000000000
--- a/apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-import { ServerSettingsPropertiesPage } from '@modrinth/ui'
-</script>
-
-<template>
-	<ServerSettingsPropertiesPage class="card" />
-</template>
diff --git a/apps/frontend/src/pages/settings/billing/index.vue b/apps/frontend/src/pages/settings/billing/index.vue
index 0c6df65c7c..5a9cdd8dbc 100644
--- a/apps/frontend/src/pages/settings/billing/index.vue
+++ b/apps/frontend/src/pages/settings/billing/index.vue
@@ -718,7 +718,7 @@ import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { useIntervalFn } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 
-import ModrinthServersIcon from '~/components/ui/servers/ModrinthServersIcon.vue'
+import ModrinthServersIcon from '~/components/brand/ModrinthServersIcon.vue'
 import ServersUpgradeModalWrapper from '~/components/ui/servers/ServersUpgradeModalWrapper.vue'
 import { products } from '~/generated/state.json'
 
@@ -836,6 +836,14 @@ const messages = defineMessages({
 		id: 'settings.billing.interval.year',
 		defaultMessage: 'year',
 	},
+	intervalQuarter: {
+		id: 'settings.billing.interval.quarter',
+		defaultMessage: 'quarter',
+	},
+	intervalQuarterly: {
+		id: 'settings.billing.interval.quarterly.adjective',
+		defaultMessage: 'quarterly',
+	},
 	intervalMonthly: {
 		id: 'settings.billing.interval.monthly',
 		defaultMessage: 'monthly',
@@ -1016,15 +1024,20 @@ const messages = defineMessages({
 })
 
 function getIntervalNounLabel(interval) {
+	console.log(interval)
 	return interval === 'yearly'
 		? formatMessage(messages.intervalYear)
-		: formatMessage(messages.intervalMonth)
+		: interval === 'quarterly'
+			? formatMessage(messages.intervalQuarter)
+			: formatMessage(messages.intervalMonth)
 }
 
 function getIntervalAdjectiveLabel(interval) {
 	return interval === 'yearly'
 		? formatMessage(messages.intervalYearly)
-		: formatMessage(messages.intervalMonthly)
+		: interval === 'quarterly'
+			? formatMessage(messages.intervalQuarterly)
+			: formatMessage(messages.intervalMonthly)
 }
 
 const queryClient = useQueryClient()
diff --git a/apps/frontend/src/providers/setup/auth.ts b/apps/frontend/src/providers/setup/auth.ts
index e19d1a3c88..cb15021c44 100644
--- a/apps/frontend/src/providers/setup/auth.ts
+++ b/apps/frontend/src/providers/setup/auth.ts
@@ -13,6 +13,7 @@ export function setupAuthProvider(auth: Awaited<ReturnType<typeof useAuth>>) {
 	const authProvider: AuthProvider = {
 		session_token: sessionToken,
 		user,
+		isReady: ref(true),
 		requestSignIn: async (redirectPath: string) => {
 			await router.push({
 				path: '/auth/sign-in',
diff --git a/apps/frontend/src/store/console.ts b/apps/frontend/src/store/console.ts
index 5e9d0169ad..fb72b37c86 100644
--- a/apps/frontend/src/store/console.ts
+++ b/apps/frontend/src/store/console.ts
@@ -1,164 +1 @@
-import { createGlobalState } from '@vueuse/core'
-import { type Ref, shallowRef } from 'vue'
-
-/**
- * Maximum number of console output lines to store
- * @type {number}
- */
-const maxLines = 10000
-const batchTimeout = 300 // ms
-const initialBatchSize = 256
-
-/**
- * Provides a global console output state management system
- * Allows adding, storing, and clearing console output with a maximum line limit
- *
- * @returns {Object} Console state management methods and reactive state
- * @property {Ref<string[]>} consoleOutput - Reactive array of console output lines
- * @property {function(string): void} addConsoleOutput - Method to add a new console output line
- * @property {function(): void} clear - Method to clear all console output
- */
-export const useModrinthServersConsole = createGlobalState(() => {
-	/**
-	 * Reactive array storing console output lines
-	 * @type {Ref<string[]>}
-	 */
-	const output: Ref<string[]> = shallowRef<string[]>([])
-	const searchQuery: Ref<string> = shallowRef('')
-	const filteredOutput: Ref<string[]> = shallowRef([])
-	let searchRegex: RegExp | null = null
-
-	let lineBuffer: string[] = []
-	let batchTimer: NodeJS.Timeout | null = null
-	let isProcessingInitialBatch = false
-
-	let refilterTimer: NodeJS.Timeout | null = null
-	const refilterTimeout = 100 // ms
-
-	const updateFilter = () => {
-		if (!searchQuery.value) {
-			filteredOutput.value = []
-			return
-		}
-
-		if (!searchRegex) {
-			searchRegex = new RegExp(searchQuery.value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'i')
-		}
-
-		filteredOutput.value = output.value.filter((line) => searchRegex?.test(line) ?? false)
-	}
-
-	const scheduleRefilter = () => {
-		if (refilterTimer) clearTimeout(refilterTimer)
-		refilterTimer = setTimeout(updateFilter, refilterTimeout)
-	}
-
-	const flushBuffer = () => {
-		if (lineBuffer.length === 0) return
-
-		const processedLines = lineBuffer.flatMap((line) => line.split('\n').filter(Boolean))
-
-		if (isProcessingInitialBatch && processedLines.length >= initialBatchSize) {
-			isProcessingInitialBatch = false
-			output.value = processedLines.slice(-maxLines)
-		} else {
-			const newOutput = [...output.value, ...processedLines]
-			output.value = newOutput.slice(-maxLines)
-		}
-
-		lineBuffer = []
-		batchTimer = null
-
-		if (searchQuery.value) {
-			scheduleRefilter()
-		}
-	}
-
-	/**
-	 * Adds a new output line to the console output
-	 * Automatically removes the oldest line if max output is exceeded
-	 *
-	 * @param {string} line - The console output line to add
-	 */
-	const addLine = (line: string): void => {
-		lineBuffer.push(line)
-
-		if (!batchTimer) {
-			batchTimer = setTimeout(flushBuffer, batchTimeout)
-		}
-	}
-
-	/**
-	 * Adds multiple output lines to the console output
-	 * Automatically removes the oldest lines if max output is exceeded
-	 *
-	 * @param {string[]} lines - The console output lines to add
-	 * @returns {void}
-	 */
-	const addLines = (lines: string[]): void => {
-		if (output.value.length === 0 && lines.length >= initialBatchSize) {
-			isProcessingInitialBatch = true
-			lineBuffer = lines
-			flushBuffer()
-			return
-		}
-
-		lineBuffer.push(...lines)
-
-		if (!batchTimer) {
-			batchTimer = setTimeout(flushBuffer, batchTimeout)
-		}
-	}
-
-	/**
-	 * Sets the search query and filters the output based on the query
-	 *
-	 * @param {string} query - The search query
-	 */
-	const setSearchQuery = (query: string): void => {
-		searchQuery.value = query
-		searchRegex = null
-		updateFilter()
-	}
-
-	/**
-	 * Clears all console output lines
-	 */
-	const clear = (): void => {
-		output.value = []
-		filteredOutput.value = []
-		searchQuery.value = ''
-		lineBuffer = []
-		isProcessingInitialBatch = false
-		if (batchTimer) {
-			clearTimeout(batchTimer)
-			batchTimer = null
-		}
-		if (refilterTimer) {
-			clearTimeout(refilterTimer)
-			refilterTimer = null
-		}
-		searchRegex = null
-	}
-
-	/**
-	 * Finds the index of a line in the main output
-	 *
-	 * @param {string} line - The line to find
-	 * @returns {number} The index of the line, or -1 if not found
-	 */
-	const findLineIndex = (line: string): number => {
-		return output.value.findIndex((l) => l === line)
-	}
-
-	return {
-		output,
-		searchQuery,
-		filteredOutput,
-		addLine,
-		addLines,
-		setSearchQuery,
-		clear,
-		findLineIndex,
-	}
-})
+export { useModrinthServersConsole } from '@modrinth/ui'
diff --git a/packages/api-client/src/modules/kyros/files/v0.ts b/packages/api-client/src/modules/kyros/files/v0.ts
index 4712c08379..fb8f4d19b7 100644
--- a/packages/api-client/src/modules/kyros/files/v0.ts
+++ b/packages/api-client/src/modules/kyros/files/v0.ts
@@ -1,12 +1,19 @@
 import { AbstractModule } from '../../../core/abstract-module'
 import type { UploadHandle, UploadProgress } from '../../../types/upload'
+import type { Archon } from '../../archon/types'
 import type { Kyros } from '../types'
 
+type NodeFsAuth = Pick<Archon.Servers.v0.JWTAuth, 'url' | 'token'>
+
 export class KyrosFilesV0Module extends AbstractModule {
 	public getModuleID(): string {
 		return 'kyros_files_v0'
 	}
 
+	private getNodeBaseUrl(auth: NodeFsAuth): string {
+		return `https://${auth.url.replace(/\/modrinth\/v\d+\/fs\/?$/, '')}`
+	}
+
 	/**
 	 * List directory contents with pagination
 	 *
@@ -62,6 +69,24 @@ export class KyrosFilesV0Module extends AbstractModule {
 		})
 	}
 
+	/**
+	 * Download a file using explicit filesystem auth credentials.
+	 *
+	 * @param auth - Filesystem auth (url + token) from Archon
+	 * @param path - File path (e.g., "/server-icon.png")
+	 * @returns Promise resolving to file Blob
+	 */
+	public async downloadFileWithAuth(auth: NodeFsAuth, path: string): Promise<Blob> {
+		return this.client.request<Blob>('/fs/download', {
+			api: this.getNodeBaseUrl(auth),
+			version: 'modrinth/v0',
+			method: 'GET',
+			params: { path },
+			headers: { Authorization: `Bearer ${auth.token}` },
+			skipAuth: true,
+		})
+	}
+
 	/**
 	 * Upload a file to a server's filesystem with progress tracking
 	 *
@@ -89,6 +114,36 @@ export class KyrosFilesV0Module extends AbstractModule {
 		})
 	}
 
+	/**
+	 * Upload a file using explicit filesystem auth credentials.
+	 *
+	 * @param auth - Filesystem auth (url + token) from Archon
+	 * @param path - Destination path (e.g., "/server-icon.png")
+	 * @param file - File to upload
+	 * @param options - Optional progress callback and feature overrides
+	 * @returns UploadHandle with promise, onProgress, and cancel
+	 */
+	public uploadFileWithAuth(
+		auth: NodeFsAuth,
+		path: string,
+		file: File | Blob,
+		options?: {
+			onProgress?: (progress: UploadProgress) => void
+			retry?: boolean | number
+		},
+	): UploadHandle<void> {
+		return this.client.upload<void>('/fs/create', {
+			api: this.getNodeBaseUrl(auth),
+			version: 'modrinth/v0',
+			file,
+			params: { path, type: 'file' },
+			headers: { Authorization: `Bearer ${auth.token}` },
+			onProgress: options?.onProgress,
+			retry: options?.retry,
+			skipAuth: true,
+		})
+	}
+
 	/**
 	 * Update file contents
 	 *
@@ -152,6 +207,28 @@ export class KyrosFilesV0Module extends AbstractModule {
 		})
 	}
 
+	/**
+	 * Delete a file or folder using explicit filesystem auth credentials.
+	 *
+	 * @param auth - Filesystem auth (url + token) from Archon
+	 * @param path - Path to delete
+	 * @param recursive - If true, delete directory contents recursively
+	 */
+	public async deleteFileOrFolderWithAuth(
+		auth: NodeFsAuth,
+		path: string,
+		recursive: boolean,
+	): Promise<void> {
+		return this.client.request<void>('/fs/delete', {
+			api: this.getNodeBaseUrl(auth),
+			version: 'modrinth/v0',
+			method: 'DELETE',
+			params: { path, recursive },
+			headers: { Authorization: `Bearer ${auth.token}` },
+			skipAuth: true,
+		})
+	}
+
 	/**
 	 * Extract an archive file (zip, tar, etc.)
 	 *
diff --git a/packages/api-client/src/platform/tauri.ts b/packages/api-client/src/platform/tauri.ts
index 7e57fc2a53..6b3c2ed616 100644
--- a/packages/api-client/src/platform/tauri.ts
+++ b/packages/api-client/src/platform/tauri.ts
@@ -103,11 +103,38 @@ export class TauriModrinthClient extends XHRUploadClient {
 				throw error
 			}
 
+			// Handle binary downloads (e.g. kyros fs files) before JSON parsing.
+			const contentType = response.headers.get('content-type')?.toLowerCase() ?? ''
+			if (fullUrl.includes('/fs/download')) {
+				return (await response.blob()) as T
+			}
+			if (
+				contentType.startsWith('image/') ||
+				contentType.startsWith('audio/') ||
+				contentType.startsWith('video/') ||
+				contentType.includes('application/octet-stream')
+			) {
+				return (await response.blob()) as T
+			}
+
+			if (response.status === 204 || response.status === 205) {
+				return undefined as T
+			}
+
+			if (contentType.includes('application/json') || contentType.includes('+json')) {
+				return (await response.json()) as T
+			}
+
 			const text = await response.text()
 			if (!text) {
 				return undefined as T
 			}
-			return JSON.parse(text) as T
+
+			try {
+				return JSON.parse(text) as T
+			} catch {
+				return text as T
+			}
 		} catch (error) {
 			throw this.normalizeError(error)
 		}
diff --git a/packages/assets/generated-icons.ts b/packages/assets/generated-icons.ts
index ff66853f3d..c63ce31a8f 100644
--- a/packages/assets/generated-icons.ts
+++ b/packages/assets/generated-icons.ts
@@ -3,8 +3,6 @@
 
 import type { FunctionalComponent, SVGAttributes } from 'vue'
 
-export type IconComponent = FunctionalComponent<SVGAttributes>
-
 import _AffiliateIcon from './icons/affiliate.svg?component'
 import _AlignLeftIcon from './icons/align-left.svg?component'
 import _ArchiveIcon from './icons/archive.svg?component'
@@ -386,12 +384,15 @@ import _VersionIcon from './icons/version.svg?component'
 import _WikiIcon from './icons/wiki.svg?component'
 import _WindowIcon from './icons/window.svg?component'
 import _WorldIcon from './icons/world.svg?component'
+import _WrapTextIcon from './icons/wrap-text.svg?component'
 import _WrenchIcon from './icons/wrench.svg?component'
 import _XIcon from './icons/x.svg?component'
 import _XCircleIcon from './icons/x-circle.svg?component'
 import _ZoomInIcon from './icons/zoom-in.svg?component'
 import _ZoomOutIcon from './icons/zoom-out.svg?component'
 
+export type IconComponent = FunctionalComponent<SVGAttributes>
+
 export const AffiliateIcon = _AffiliateIcon
 export const AlignLeftIcon = _AlignLeftIcon
 export const ArchiveIcon = _ArchiveIcon
@@ -773,6 +774,7 @@ export const VersionIcon = _VersionIcon
 export const WikiIcon = _WikiIcon
 export const WindowIcon = _WindowIcon
 export const WorldIcon = _WorldIcon
+export const WrapTextIcon = _WrapTextIcon
 export const WrenchIcon = _WrenchIcon
 export const XIcon = _XIcon
 export const XCircleIcon = _XCircleIcon
diff --git a/packages/assets/icons/wrap-text.svg b/packages/assets/icons/wrap-text.svg
new file mode 100644
index 0000000000..ed9eb6b325
--- /dev/null
+++ b/packages/assets/icons/wrap-text.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+	stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-text-wrap-icon lucide-text-wrap">
+	<path d="m16 16-3 3 3 3" />
+	<path d="M3 12h14.5a1 1 0 0 1 0 7H13" />
+	<path d="M3 19h6" />
+	<path d="M3 5h18" />
+</svg>
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 2132684af4..974aaafc2c 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -54,6 +54,7 @@
 		"@codemirror/language": "^6.9.3",
 		"@codemirror/state": "^6.3.2",
 		"@codemirror/view": "^6.22.1",
+		"@intercom/messenger-js-sdk": "^0.0.14",
 		"@modrinth/api-client": "workspace:*",
 		"@modrinth/assets": "workspace:*",
 		"@modrinth/blog": "workspace:*",
@@ -62,6 +63,7 @@
 		"@tresjs/cientos": "^4.3.0",
 		"@tresjs/core": "^4.3.4",
 		"@tresjs/post-processing": "^2.4.0",
+		"@types/dompurify": "^3.0.5",
 		"@types/markdown-it": "^14.1.1",
 		"@types/three": "^0.172.0",
 		"@vintl/how-ago": "^3.0.1",
@@ -72,6 +74,7 @@
 		"ace-builds": "^1.43.5",
 		"apexcharts": "^4.0.0",
 		"dayjs": "^1.11.10",
+		"dompurify": "^3.1.7",
 		"es-toolkit": "^1.44.0",
 		"floating-vue": "^5.2.2",
 		"fuse.js": "^6.6.2",
diff --git a/packages/ui/src/components/base/BaseTerminal.vue b/packages/ui/src/components/base/BaseTerminal.vue
index 2f30e0c8ef..88ac95d520 100644
--- a/packages/ui/src/components/base/BaseTerminal.vue
+++ b/packages/ui/src/components/base/BaseTerminal.vue
@@ -1,12 +1,31 @@
 <template>
 	<div
-		class="flex size-full flex-col bg-surface-2 overflow-hidden rounded-[20px] border border-solid border-surface-4"
+		class="flex w-full flex-col bg-surface-2 overflow-hidden rounded-[20px] border border-solid border-surface-4"
+		:style="
+			fullscreen && snappedHeight
+				? { maxHeight: snappedHeight + 'px' }
+				: !fullscreen && componentHeight
+					? { height: componentHeight + 'px' }
+					: {}
+		"
+		:class="{ 'h-full': fullscreen }"
 	>
-		<div class="relative min-h-0 pb-1 flex-1 overflow-hidden">
-			<div ref="containerRef" class="size-full pl-2" />
-			<div v-if="!isAtBottom" class="absolute bottom-4 right-4">
+		<div class="relative min-h-0 flex-1 overflow-hidden">
+			<div ref="containerRef" class="size-full pl-2 mt-0.5" />
+			<div v-if="fullscreen" class="absolute top-4 right-4 z-10">
 				<ButtonStyled circular type="highlight">
-					<button class="!shadow-none" aria-label="Scroll to bottom" @click="scrollToBottom">
+					<button
+						class="!shadow-none"
+						aria-label="Exit fullscreen"
+						@click="emit('exit-fullscreen')"
+					>
+						<XIcon />
+					</button>
+				</ButtonStyled>
+			</div>
+			<div v-if="!isAtBottom" class="absolute bottom-4 right-4">
+				<ButtonStyled circular type="highlight" size="large">
+					<button class="!shadow-2xl" aria-label="Scroll to bottom" @click="scrollToBottom">
 						<ChevronDownIcon />
 					</button>
 				</ButtonStyled>
@@ -14,6 +33,7 @@
 		</div>
 		<div
 			v-if="showInput"
+			ref="inputRef"
 			class="border-t border-solid border-b-0 border-x-0 border-surface-5 bg-surface-3 p-4"
 		>
 			<StyledInput
@@ -29,9 +49,9 @@
 </template>
 
 <script setup lang="ts">
-import { ChevronDownIcon, TerminalSquareIcon } from '@modrinth/assets'
+import { ChevronDownIcon, TerminalSquareIcon, XIcon } from '@modrinth/assets'
 import type { Terminal } from '@xterm/xterm'
-import { ref } from 'vue'
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import StyledInput from '#ui/components/base/StyledInput.vue'
@@ -41,27 +61,116 @@ const props = withDefaults(
 	defineProps<{
 		scrollback?: number
 		showInput?: boolean
+		fullscreen?: boolean
 	}>(),
 	{
 		scrollback: 10000,
 		showInput: false,
+		fullscreen: false,
 	},
 )
 
 const emit = defineEmits<{
 	command: [command: string]
 	ready: [terminal: Terminal]
+	'exit-fullscreen': []
 }>()
 
 const containerRef = ref<HTMLElement | null>(null)
+const inputRef = ref<HTMLElement | null>(null)
 const commandInput = ref('')
+const componentHeight = ref(0)
+
+const snappedHeight = ref<number | null>(null)
+
+const {
+	terminal,
+	searchAddon,
+	isAtBottom,
+	write,
+	writeln,
+	clear,
+	reset,
+	fit: rawFit,
+	scrollToBottom,
+} = useTerminal({
+	container: containerRef,
+	scrollback: props.scrollback,
+	onReady: (term) => {
+		nextTick(() => {
+			updateComponentHeight()
+			snapToRows()
+		})
+		emit('ready', term)
+	},
+	onResize: () => {
+		updateComponentHeight()
+	},
+})
+
+function snapToRows() {
+	if (!props.fullscreen) {
+		snappedHeight.value = null
+		return
+	}
+	const screen = containerRef.value?.querySelector('.xterm-screen') as HTMLElement | null
+	if (!screen) {
+		snappedHeight.value = null
+		return
+	}
+	const inputH = inputRef.value?.offsetHeight ?? 0
+	const borderW = 2
+	snappedHeight.value = screen.offsetHeight + inputH + borderW
+}
 
-const { terminal, searchAddon, isAtBottom, write, writeln, clear, reset, fit, scrollToBottom } =
-	useTerminal({
-		container: containerRef,
-		scrollback: props.scrollback,
-		onReady: (term) => emit('ready', term),
-	})
+let resizeDebounce: ReturnType<typeof setTimeout> | null = null
+
+function handleWindowResize() {
+	if (!props.fullscreen) return
+	if (resizeDebounce) clearTimeout(resizeDebounce)
+	snappedHeight.value = null
+	resizeDebounce = setTimeout(() => {
+		rawFit()
+		nextTick(() => snapToRows())
+	}, 50)
+}
+
+onMounted(() => {
+	window.addEventListener('resize', handleWindowResize)
+})
+
+onBeforeUnmount(() => {
+	window.removeEventListener('resize', handleWindowResize)
+	if (resizeDebounce) clearTimeout(resizeDebounce)
+})
+
+function fit() {
+	rawFit()
+	snapToRows()
+}
+
+watch(
+	() => props.fullscreen,
+	() => {
+		if (props.fullscreen) {
+			nextTick(() => {
+				rawFit()
+				nextTick(() => snapToRows())
+			})
+		} else {
+			snappedHeight.value = null
+		}
+	},
+)
+
+function updateComponentHeight() {
+	const screen = containerRef.value?.querySelector('.xterm-screen') as HTMLElement | null
+	if (!screen) return
+	const screenH = screen.offsetHeight
+	const inputH = inputRef.value?.offsetHeight ?? 0
+	const borderW = 2
+	componentHeight.value = screenH + inputH + borderW
+}
 
 const submitCommand = () => {
 	const cmd = commandInput.value.trim()
@@ -89,13 +198,18 @@ defineExpose({
 	height: 100% !important;
 }
 
-.xterm .xterm-scrollable-element {
-	height: 100% !important;
-}
-
 .xterm .xterm-screen {
-	min-height: 100% !important;
 	margin-left: auto !important;
 	margin-right: auto !important;
 }
+
+.xterm-scrollable-element > .scrollbar.vertical {
+	width: 8px !important;
+}
+
+.xterm-scrollable-element > .scrollbar.vertical > div {
+	width: 6px !important;
+	border-radius: 8px !important;
+	contain: layout style !important;
+}
 </style>
diff --git a/packages/ui/src/components/base/ButtonStyled.vue b/packages/ui/src/components/base/ButtonStyled.vue
index 8efe520a4d..1547e61208 100644
--- a/packages/ui/src/components/base/ButtonStyled.vue
+++ b/packages/ui/src/components/base/ButtonStyled.vue
@@ -204,6 +204,9 @@ const colorVariables = computed(() => {
 
 	if (props.type === 'outlined' || props.type === 'transparent') {
 		colors.bg = 'transparent'
+		if (props.hoverColorFill === 'none') {
+			hoverColors.bg = 'transparent'
+		}
 		colors = setColorFill(colors, props.colorFill === 'auto' ? 'text' : props.colorFill)
 		hoverColors = setColorFill(
 			hoverColors,
@@ -265,6 +268,8 @@ const fontSize = computed(() => {
 	> :is(button, a, .button-like):first-child {
 	@apply flex cursor-pointer flex-row items-center justify-center border-solid border border-transparent bg-[--_bg] text-[--_text] h-[--_height] min-w-[--_width] rounded-[--_radius] px-[--_padding-x] py-[--_padding-y] gap-[--_gap] font-[--_font-weight] whitespace-nowrap;
 	box-shadow: var(--_box-shadow, inset 0 0 0 transparent);
+	-webkit-font-smoothing: antialiased;
+	will-change: filter;
 	transition:
 		scale 0.125s ease-in-out,
 		background-color 0.25s ease-in-out,
diff --git a/packages/ui/src/components/base/FilterPills.vue b/packages/ui/src/components/base/FilterPills.vue
new file mode 100644
index 0000000000..fc0b0da539
--- /dev/null
+++ b/packages/ui/src/components/base/FilterPills.vue
@@ -0,0 +1,53 @@
+<template>
+	<div class="flex flex-wrap items-center gap-1.5">
+		<FilterIcon class="size-5 text-secondary" />
+		<button
+			:class="pillClass(modelValue.length === 0)"
+			:aria-pressed="modelValue.length === 0"
+			@click="modelValue = []"
+		>
+			<slot name="all"> All </slot>
+		</button>
+		<button
+			v-for="option in options"
+			:key="option.id"
+			:class="pillClass(modelValue.includes(option.id))"
+			:aria-pressed="modelValue.includes(option.id)"
+			@click="toggle(option.id)"
+		>
+			{{ option.label }}
+		</button>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { FilterIcon } from '@modrinth/assets'
+
+export interface FilterPillOption {
+	id: string
+	label: string
+}
+
+const modelValue = defineModel<string[]>({ required: true })
+
+defineProps<{
+	options: FilterPillOption[]
+}>()
+
+function pillClass(active: boolean) {
+	return [
+		'cursor-pointer rounded-full border border-solid px-3 py-1.5 text-base font-semibold leading-5 transition-all duration-100 active:scale-[0.97]',
+		active
+			? 'border-green bg-brand-highlight text-brand'
+			: 'border-surface-5 bg-surface-4 text-primary hover:bg-surface-5',
+	]
+}
+
+function toggle(id: string) {
+	if (modelValue.value.includes(id)) {
+		modelValue.value = modelValue.value.filter((f) => f !== id)
+	} else {
+		modelValue.value = [...modelValue.value, id]
+	}
+}
+</script>
diff --git a/packages/ui/src/components/base/FloatingActionBar.vue b/packages/ui/src/components/base/FloatingActionBar.vue
index 0fb04c271b..201f0f8d55 100644
--- a/packages/ui/src/components/base/FloatingActionBar.vue
+++ b/packages/ui/src/components/base/FloatingActionBar.vue
@@ -61,7 +61,7 @@ onUnmounted(() => {
 	<Transition name="floating-action-bar" appear>
 		<div
 			v-if="shown"
-			class="floating-action-bar drop-shadow-2xl fixed z-10 p-4 bottom-0"
+			class="floating-action-bar drop-shadow-2xl fixed z-[21] p-4 bottom-0"
 			aria-live="polite"
 		>
 			<div
diff --git a/packages/ui/src/components/base/NavTabs.vue b/packages/ui/src/components/base/NavTabs.vue
index 119a26af09..611cdaa3f9 100644
--- a/packages/ui/src/components/base/NavTabs.vue
+++ b/packages/ui/src/components/base/NavTabs.vue
@@ -2,7 +2,7 @@
 	<nav
 		v-if="filteredLinks.length > 1"
 		ref="scrollContainer"
-		class="relative flex w-fit overflow-x-auto rounded-full bg-bg-raised p-1 text-sm font-bold"
+		class="relative flex w-fit overflow-x-auto rounded-full bg-bg-raised p-1 text-sm font-bold drop-shadow-xl"
 		:class="{ 'shadow-sm': mode === 'navigation' }"
 	>
 		<template v-if="mode === 'navigation'">
diff --git a/packages/ui/src/components/base/index.ts b/packages/ui/src/components/base/index.ts
index 4b72a2f5e7..0f9b4820a9 100644
--- a/packages/ui/src/components/base/index.ts
+++ b/packages/ui/src/components/base/index.ts
@@ -29,6 +29,8 @@ export { default as ErrorInformationCard } from './ErrorInformationCard.vue'
 export { default as FileInput } from './FileInput.vue'
 export type { FilterBarOption } from './FilterBar.vue'
 export { default as FilterBar } from './FilterBar.vue'
+export type { FilterPillOption } from './FilterPills.vue'
+export { default as FilterPills } from './FilterPills.vue'
 export { default as FloatingActionBar } from './FloatingActionBar.vue'
 export { default as FloatingPanel } from './FloatingPanel.vue'
 export { default as FormattedTag } from './FormattedTag.vue'
diff --git a/packages/ui/src/components/billing/ServersPurchase1Region.vue b/packages/ui/src/components/billing/ServersPurchase1Region.vue
index 3e72a22d40..009a39b8b2 100644
--- a/packages/ui/src/components/billing/ServersPurchase1Region.vue
+++ b/packages/ui/src/components/billing/ServersPurchase1Region.vue
@@ -214,7 +214,7 @@ async function updateStock() {
 onMounted(() => {
 	// auto select region with lowest ping
 	loading.value = true
-	bestPing.value = props.pings.sort((a, b) => {
+	bestPing.value = [...props.pings].sort((a, b) => {
 		if (a.ping <= 0) return 1
 		if (b.ping <= 0) return -1
 		return a.ping - b.ping
diff --git a/packages/ui/src/components/billing/ServersUpgradeModalWrapper.vue b/packages/ui/src/components/billing/ServersUpgradeModalWrapper.vue
index c83ec152b3..1e9522c53e 100644
--- a/packages/ui/src/components/billing/ServersUpgradeModalWrapper.vue
+++ b/packages/ui/src/components/billing/ServersUpgradeModalWrapper.vue
@@ -185,11 +185,6 @@ function runPingTest(region: Archon.Servers.v1.Region, index = 1) {
 }
 
 const subscription = ref<Labrinth.Billing.Internal.UserSubscription | null>(null)
-// Dry run state
-const dryRunResponse = ref<{
-	requires_payment: boolean
-	required_payment_is_proration: boolean
-} | null>(null)
 const pendingDowngradeBody = ref<Labrinth.Billing.Internal.EditSubscriptionRequest | null>(null)
 const currentPlanFromSubscription = computed<Labrinth.Billing.Internal.Product | undefined>(() => {
 	return subscription.value
@@ -246,20 +241,16 @@ async function initiatePayment(
 				dry: true,
 			})
 
-			if (dry && typeof dry === 'object' && 'payment_intent_id' in dry) {
-				dryRunResponse.value = {
-					requires_payment: !!dry.payment_intent_id,
-					required_payment_is_proration: true,
-				}
-				pendingDowngradeBody.value = transformedBody
-				if (dry.payment_intent_id) {
-					return await finalizeImmediate(transformedBody)
-				} else {
-					return null
-				}
-			} else {
-				// Fallback if dry run not supported
+			const requiresPayment =
+				dry && typeof dry === 'object' && 'requires_payment' in dry && dry.requires_payment
+
+			if (requiresPayment) {
+				// Upgrade: requires payment — finalize to create the payment intent
 				return await finalizeImmediate(transformedBody)
+			} else {
+				// Downgrade or no payment change — defer until user confirms
+				pendingDowngradeBody.value = transformedBody
+				return null
 			}
 		} catch (e) {
 			debug('Dry run failed, attempting immediate patch', e)
@@ -291,8 +282,10 @@ async function finalizeImmediate(body: Labrinth.Billing.Internal.EditSubscriptio
 }
 
 async function finalizeDowngrade() {
-	if (!subscription.value || !pendingDowngradeBody.value) return
 	try {
+		if (!subscription.value || !pendingDowngradeBody.value)
+			throw new Error('Missing subscription or pending downgrade body')
+
 		await finalizeImmediate(pendingDowngradeBody.value)
 		addNotification({
 			title: 'Subscription updated',
@@ -307,7 +300,6 @@ async function finalizeDowngrade() {
 		})
 		throw e
 	} finally {
-		dryRunResponse.value = null
 		pendingDowngradeBody.value = null
 	}
 }
diff --git a/packages/ui/src/components/modal/ConfirmModal.vue b/packages/ui/src/components/modal/ConfirmModal.vue
index 2bbcc913a0..87a091324e 100644
--- a/packages/ui/src/components/modal/ConfirmModal.vue
+++ b/packages/ui/src/components/modal/ConfirmModal.vue
@@ -1,5 +1,5 @@
 <template>
-	<NewModal ref="modal" :noblur="noblur" :danger="danger" :on-hide="onHide">
+	<NewModal ref="modal" :noblur="noblur" :danger="danger" :on-hide="onHide" max-width="550px">
 		<template #title>
 			<slot name="title">
 				<span class="font-extrabold text-contrast text-lg">{{ title }}</span>
@@ -30,19 +30,19 @@
 				placeholder="Type here..."
 				wrapper-class="max-w-[20rem]"
 			/>
-			<div class="flex gap-2">
+			<div class="flex gap-2 justify-end">
+				<ButtonStyled>
+					<button class="!shadow-none" @click="hide()">
+						<XIcon />
+						Cancel
+					</button>
+				</ButtonStyled>
 				<ButtonStyled :color="danger ? 'red' : 'brand'">
 					<button :disabled="action_disabled" @click="proceed">
 						<component :is="proceedIcon" />
 						{{ proceedLabel }}
 					</button>
 				</ButtonStyled>
-				<ButtonStyled>
-					<button @click="hide()">
-						<XIcon />
-						Cancel
-					</button>
-				</ButtonStyled>
 			</div>
 		</div>
 	</NewModal>
diff --git a/packages/ui/src/components/modal/TabbedModal.vue b/packages/ui/src/components/modal/TabbedModal.vue
index eb2b63f038..fc727ce7ba 100644
--- a/packages/ui/src/components/modal/TabbedModal.vue
+++ b/packages/ui/src/components/modal/TabbedModal.vue
@@ -121,7 +121,7 @@ defineExpose({ show, hide, selectedTab, setTab })
 
 				<div
 					ref="scrollContainer"
-					class="min-w-[400px] h-[500px] overflow-y-auto px-6"
+					class="min-w-[500px] overflow-y-auto px-6 h-screen max-h-[min(70vh,750px)]"
 					@scroll="checkScrollState"
 				>
 					<Suspense>
diff --git a/packages/ui/src/components/nav/NotificationPanel.vue b/packages/ui/src/components/nav/NotificationPanel.vue
index f5a8e318c5..5c5de11a8a 100644
--- a/packages/ui/src/components/nav/NotificationPanel.vue
+++ b/packages/ui/src/components/nav/NotificationPanel.vue
@@ -5,7 +5,7 @@
 			'intercom-present': isIntercomPresent,
 			'location-left': notificationLocation === 'left',
 			'location-right': notificationLocation === 'right',
-			'has-sidebar': hasSidebar,
+			'has-sidebar': hasSidebar && !hasModalActive,
 		}"
 	>
 		<transition-group name="notifs">
@@ -92,6 +92,8 @@ import {
 } from '@modrinth/assets'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 
+import { useModalStack } from '#ui/composables/modal-stack.ts'
+
 import { injectNotificationManager, type WebNotification } from '../../providers'
 import ButtonStyled from '../base/ButtonStyled.vue'
 
@@ -151,6 +153,8 @@ onMounted(() => {
 	})
 })
 
+const { hasModal: hasModalActive } = useModalStack()
+
 withDefaults(
 	defineProps<{
 		hasSidebar?: boolean
@@ -167,9 +171,11 @@ withDefaults(
 	bottom: 1.5rem;
 	z-index: 200;
 	width: 450px;
+	transition: bottom 0.25s ease-in-out;
 
 	&.location-right {
 		right: 1.5rem;
+		transition: right 0.25s ease-in-out;
 
 		&.has-sidebar {
 			right: 325px;
@@ -242,4 +248,8 @@ withDefaults(
 		transform: translateX(-100%) scale(0.8);
 	}
 }
+
+body.floating-action-bar-shown .vue-notification-group {
+	bottom: calc(90px);
+}
 </style>
diff --git a/packages/ui/src/components/project/card/ProjectCard.vue b/packages/ui/src/components/project/card/ProjectCard.vue
index 28c141d7c5..35663c407b 100644
--- a/packages/ui/src/components/project/card/ProjectCard.vue
+++ b/packages/ui/src/components/project/card/ProjectCard.vue
@@ -192,6 +192,7 @@
 import type { ProjectStatus } from '@modrinth/utils'
 import dayjs from 'dayjs'
 import { computed } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
 
 import { AutoLink, Avatar } from '../../base'
 import { SmartClickable } from '../../base/index.ts'
@@ -217,7 +218,7 @@ defineEmits<{
 
 const props = defineProps<{
 	layout: 'list' | 'grid'
-	link?: string | (() => void)
+	link?: string | RouteLocationRaw | (() => void)
 	iconUrl?: string
 	title: string
 	author?: {
diff --git a/packages/ui/src/components/search/SearchFilterControl.vue b/packages/ui/src/components/search/SearchFilterControl.vue
index 188be2fecd..c87e6c15b4 100644
--- a/packages/ui/src/components/search/SearchFilterControl.vue
+++ b/packages/ui/src/components/search/SearchFilterControl.vue
@@ -22,7 +22,11 @@
 				(x) => x.provided && !overriddenProvidedFilterTypes.includes(x.type),
 			)"
 			:key="`provided-filter-${providedItem.type}-${providedItem.option}`"
-			v-tooltip="formatMessage(providedMessage ?? defaultProvidedMessage)"
+			v-tooltip="
+				typeof providedMessage === 'string'
+					? providedMessage
+					: formatMessage(providedMessage ?? defaultProvidedMessage)
+			"
 			:style="{ '--_bg-color': `var(--color-raised-bg)` }"
 		>
 			<LockIcon />
@@ -47,7 +51,7 @@ const props = defineProps<{
 	filters: FilterType[]
 	providedFilters: FilterValue[]
 	overriddenProvidedFilterTypes: string[]
-	providedMessage?: MessageDescriptor
+	providedMessage?: MessageDescriptor | string
 }>()
 
 const defaultProvidedMessage = defineMessage({
diff --git a/packages/ui/src/components/servers/SaveBanner.vue b/packages/ui/src/components/servers/SaveBanner.vue
index 9145ac56d5..afc753fe51 100644
--- a/packages/ui/src/components/servers/SaveBanner.vue
+++ b/packages/ui/src/components/servers/SaveBanner.vue
@@ -1,46 +1,41 @@
 <template>
 	<Teleport to="body">
-		<Transition name="save-banner">
-			<div
-				v-if="props.isVisible"
-				data-pyro-save-banner
-				class="fixed bottom-16 left-0 right-0 z-[22] mx-auto h-fit w-full max-w-4xl transition-all duration-300 sm:bottom-8"
-			>
-				<div class="mx-2 rounded-2xl border-2 border-solid border-button-border bg-bg-raised p-4">
-					<div class="flex flex-col items-center justify-between gap-2 md:flex-row">
-						<span class="font-bold text-contrast">Careful, you have unsaved changes!</span>
-						<div class="flex gap-2">
-							<ButtonStyled type="transparent" color="standard">
-								<button :disabled="props.isUpdating" @click="props.reset">Reset</button>
-							</ButtonStyled>
-							<ButtonStyled type="standard" :color="props.restart ? 'standard' : 'brand'">
-								<button :disabled="props.isUpdating" @click="props.save">
-									{{ props.isUpdating ? 'Saving...' : 'Save' }}
-								</button>
-							</ButtonStyled>
-							<ButtonStyled v-if="props.restart" type="standard" color="brand">
-								<button :disabled="props.isUpdating || isTransitioning" @click="saveAndPower">
-									{{ powerButtonLabel }}
-								</button>
-							</ButtonStyled>
-						</div>
-					</div>
-				</div>
+		<FloatingActionBar :shown="props.isVisible">
+			<p class="m-0 font-semibold text-sm md:text-base">You have unsaved changes.</p>
+			<div class="ml-auto flex gap-2">
+				<ButtonStyled type="transparent">
+					<button :disabled="props.isUpdating" @click="props.reset"><HistoryIcon /> Reset</button>
+				</ButtonStyled>
+				<ButtonStyled :color="props.restart ? 'standard' : 'brand'">
+					<button :disabled="props.isUpdating" @click="props.save">
+						<SpinnerIcon v-if="props.isUpdating" class="animate-spin" />
+						<SaveIcon v-else />
+						{{ props.isUpdating ? 'Saving...' : 'Save' }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled v-if="props.restart" color="brand">
+					<button :disabled="props.isUpdating || isTransitioning" @click="saveAndPower">
+						<SpinnerIcon v-if="props.isUpdating || isTransitioning" class="animate-spin" />
+						{{ powerButtonLabel }}
+					</button>
+				</ButtonStyled>
 			</div>
-		</Transition>
+		</FloatingActionBar>
 	</Teleport>
 </template>
 
 <script setup lang="ts">
+import { HistoryIcon, SaveIcon, SpinnerIcon } from '@modrinth/assets'
 import { computed } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import FloatingActionBar from '#ui/components/base/FloatingActionBar.vue'
 import { injectModrinthClient, injectModrinthServerContext } from '#ui/providers'
 
 const props = defineProps<{
 	isUpdating: boolean
 	restart?: boolean
-	save: () => void
+	save: () => void | Promise<void>
 	reset: () => void
 	isVisible: boolean
 	serverId: string
@@ -58,38 +53,16 @@ const isTransitioning = computed(
 
 const powerButtonLabel = computed(() => {
 	if (props.isUpdating) return 'Saving...'
-	if (isTransitioning.value) return isStopped.value ? 'Save & start' : 'Save & restart'
+	if (isTransitioning.value) return isStopped.value ? 'Starting...' : 'Restarting...'
 	return isStopped.value ? 'Save & start' : 'Save & restart'
 })
 
 const saveAndPower = async () => {
-	props.save()
+	try {
+		await props.save()
+	} catch {
+		return
+	}
 	await client.archon.servers_v0.power(props.serverId, isStopped.value ? 'Start' : 'Restart')
 }
 </script>
-
-<style scoped>
-.save-banner-enter-active {
-	transition:
-		opacity 300ms,
-		transform 300ms;
-}
-
-.save-banner-leave-active {
-	transition:
-		opacity 200ms,
-		transform 200ms;
-}
-
-.save-banner-enter-from,
-.save-banner-leave-to {
-	opacity: 0;
-	transform: translateY(100%) scale(0.98);
-}
-
-.save-banner-enter-to,
-.save-banner-leave-from {
-	opacity: 1;
-	transform: none;
-}
-</style>
diff --git a/packages/ui/src/components/servers/ServerListing.vue b/packages/ui/src/components/servers/ServerListing.vue
index c52e8af693..fd49e4ba17 100644
--- a/packages/ui/src/components/servers/ServerListing.vue
+++ b/packages/ui/src/components/servers/ServerListing.vue
@@ -1,13 +1,17 @@
 <template>
 	<div>
-		<RouterLink :to="isDisabled ? '' : `/hosting/manage/${server_id}`">
+		<component
+			:is="isDisabled ? 'div' : 'RouterLink'"
+			v-bind="!isDisabled ? { to: `/hosting/manage/${server_id}` } : {}"
+			:class="{ 'cursor-default': isDisabled }"
+		>
 			<div
-				class="flex flex-row items-center overflow-x-hidden rounded-2xl border-[1px] border-solid border-surface-5 bg-bg-raised p-4 transition-all duration-150"
+				class="flex flex-row items-center overflow-x-hidden rounded-2xl border-[1px] border-solid border-surface-4 bg-bg-raised p-4 transition-all duration-150"
 				:class="{
 					'!rounded-b-none border-b-0': hasNotice,
 					'bg-surface-2': isDisabled,
 					'active:scale-95': !isDisabled && !hasNotice,
-					'hover:brightness-125': !isDisabled,
+					hoverable: !isDisabled,
 				}"
 				data-pyro-server-listing
 				:data-pyro-server-listing-id="server_id"
@@ -25,13 +29,13 @@
 					<LockIcon v-else class="size-8 absolute" :class="{ 'opacity-50': isDisabled }" />
 				</div>
 				<ServerIcon v-else :image="image ?? undefined" :disabled="isDisabled" />
-				<div class="ml-4 flex flex-col gap-2.5">
+				<div class="ml-4 flex flex-col gap-1.5">
 					<div class="flex flex-row items-center gap-2">
 						<h2 class="m-0 text-xl font-bold text-contrast" :class="{ 'opacity-50': isDisabled }">
 							{{ name }}
 						</h2>
 						<div
-							v-if="isConfiguring"
+							v-if="isConfiguring && noticeType !== 'cancelled' && noticeType !== 'setToCancel'"
 							class="flex min-w-0 items-center gap-2 truncate text-sm font-medium text-brand rounded-full bg-brand-highlight border border-solid border-brand px-2.5 h-[28px]"
 						>
 							<SparklesIcon class="size-5 shrink-0 font-semibold" />
@@ -74,11 +78,11 @@
 						:show-player-count="showPlayerCount"
 						:class="{ 'opacity-50': isDisabled }"
 						:linked="false"
-						class="pointer-events-none flex w-full flex-row flex-wrap items-center gap-2 text-primary *:hidden sm:flex-row sm:*:flex"
+						class="flex w-full flex-row flex-wrap items-center gap-2 text-primary *:hidden sm:flex-row sm:*:flex"
 					/>
 				</div>
 			</div>
-		</RouterLink>
+		</component>
 
 		<div v-if="noticeType" class="server-listing-notice">
 			<div v-if="noticeType === 'provisioning'" class="flex gap-2">
@@ -159,13 +163,13 @@
 
 			<div v-if="noticeButtons" class="flex gap-2">
 				<ButtonStyled
-					v-if="noticeButtons.downloadBackup && onDownloadBackup"
+					v-if="noticeButtons.downloadBackup && onDownloadBackup && isBackupDownloadEnabled"
 					type="outlined"
 					circular
 				>
 					<button
 						v-tooltip="formatMessage(messages.downloadLatestBackupTooltip)"
-						class="!border-surface-5"
+						class="!border-surface-4"
 						@click="onDownloadBackup"
 					>
 						<DownloadIcon />
@@ -174,7 +178,7 @@
 				<ButtonStyled v-if="noticeButtons.copyId" type="outlined">
 					<button
 						v-tooltip="formatMessage(messages.copyCodeToClipboardTooltip)"
-						class="!border-surface-5"
+						class="!border-surface-4"
 						@click="copyToClipboard(server_id)"
 					>
 						<template v-if="copied">
@@ -396,8 +400,9 @@ type ServerListingProps = {
 
 const props = defineProps<ServerListingProps>()
 
-const { kyros, labrinth } = injectModrinthClient()
+const { archon, kyros, labrinth } = injectModrinthClient()
 
+const isBackupDownloadEnabled = false
 const isConfiguring = computed(() => props.flows?.intro)
 const isUpgrading = computed(
 	() => props.status === 'suspended' && props.suspension_reason === 'upgrading',
@@ -514,11 +519,30 @@ const { data: image } = useQuery({
 		if (!props.server_id || props.status !== 'available') return null
 
 		try {
+			const fsAuth = await archon.servers_v0.getFilesystemAuth(props.server_id)
+
 			try {
-				const blob = await kyros.files_v0.downloadFile('/server-icon-original.png')
+				const blob = await kyros.files_v0.downloadFileWithAuth(fsAuth, '/server-icon.png')
+				return await processImageBlob(blob, 64)
+			} catch (error) {
+				const statusCode = (error as { statusCode?: number })?.statusCode
+				if (statusCode != null && statusCode !== 404) {
+					throw error
+				}
+
+				try {
+					const originalBlob = await kyros.files_v0.downloadFileWithAuth(
+						fsAuth,
+						'/server-icon-original.png',
+					)
+					return await processImageBlob(originalBlob, 64)
+				} catch (originalError) {
+					const originalStatusCode = (originalError as { statusCode?: number })?.statusCode
+					if (originalStatusCode != null && originalStatusCode !== 404) {
+						throw originalError
+					}
+				}
 
-				return await processImageBlob(blob, 512)
-			} catch {
 				const projectIcon = iconUrl.value
 				if (projectIcon) {
 					const response = await fetch(projectIcon)
@@ -528,22 +552,23 @@ const { data: image } = useQuery({
 					const scaledBlob = await dataURLToBlob(scaledDataUrl)
 					const scaledFile = new File([scaledBlob], 'server-icon.png', { type: 'image/png' })
 
-					kyros.files_v0.uploadFile('/server-icon.png', scaledFile)
+					await kyros.files_v0.uploadFileWithAuth(fsAuth, '/server-icon.png', scaledFile).promise
 
 					const originalFile = new File([blob], 'server-icon-original.png', {
 						type: 'image/png',
 					})
-					kyros.files_v0.uploadFile('/server-icon-original.png', originalFile)
+					await kyros.files_v0.uploadFileWithAuth(fsAuth, '/server-icon-original.png', originalFile)
+						.promise
 
 					return scaledDataUrl
 				}
 			}
+
+			return null
 		} catch (error) {
 			console.debug('Icon processing failed:', error)
 			return null
 		}
-
-		return null
 	},
 	enabled: computed(() => !!props.server_id && props.status === 'available'),
 })
@@ -561,6 +586,10 @@ async function copyToClipboard(text: string) {
 
 <style scoped>
 .server-listing-notice {
-	@apply relative flex w-full rounded-b-2xl border-[1px] border-solid p-4 flex-col gap-4 border-surface-5 bg-bg-raised text-primary;
+	@apply relative flex w-full rounded-b-2xl border-[1px] border-solid p-4 flex-col gap-4 border-surface-4 bg-bg-raised text-primary;
+}
+
+.hoverable:hover:not(:has([data-subdomain-label]:hover)) {
+	filter: brightness(1.25);
 }
 </style>
diff --git a/packages/ui/src/components/servers/ServerSettingsModal.vue b/packages/ui/src/components/servers/ServerSettingsModal.vue
new file mode 100644
index 0000000000..cda9222a09
--- /dev/null
+++ b/packages/ui/src/components/servers/ServerSettingsModal.vue
@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import type { Archon } from '@modrinth/api-client'
+import { ChevronRightIcon } from '@modrinth/assets'
+import { useQueryClient } from '@tanstack/vue-query'
+import { computed, nextTick, ref } from 'vue'
+
+import type { TabbedModalTab } from '#ui/components'
+import { TabbedModal } from '#ui/components'
+import { defineMessage, defineMessages, useVIntl } from '#ui/composables/i18n'
+import {
+	ServerSettingsAdvancedPage,
+	ServerSettingsGeneralPage,
+	ServerSettingsInstallationPage,
+	ServerSettingsNetworkPage,
+	ServerSettingsPropertiesPage,
+	serverSettingsTabDefinitions,
+	type ServerSettingsTabId,
+} from '#ui/layouts/shared/server-settings'
+import { provideServerSettings } from '#ui/layouts/shared/server-settings/providers/server-settings'
+import {
+	injectModrinthClient,
+	injectModrinthServerContext,
+	injectNotificationManager,
+} from '#ui/providers'
+import { commonMessages } from '#ui/utils/common-messages'
+
+type ShowOptions = {
+	serverId: string
+	tabIndex?: number
+	tabId?: ServerSettingsTabId
+}
+
+const props = defineProps<{
+	resolveViewer: () => Promise<{ userId: string | null; userRole: string | null }>
+	browseModpacks?: (args: {
+		serverId: string
+		worldId: string | null
+		from: 'reset-server'
+	}) => void | Promise<void>
+}>()
+
+const { formatMessage } = useVIntl()
+const queryClient = useQueryClient()
+const client = injectModrinthClient()
+const { addNotification } = injectNotificationManager()
+
+const messages = defineMessages({
+	failedToLoadServer: {
+		id: 'app.server-settings.failed-to-load-server',
+		defaultMessage: 'Failed to load server settings',
+	},
+})
+
+const modal = ref<InstanceType<typeof TabbedModal> | null>(null)
+
+const { serverId: currentServerId, worldId, server } = injectModrinthServerContext()
+
+const currentUserId = ref<string | null>(null)
+const currentUserRole = ref<string | null>(null)
+
+const isApp = ref(true)
+
+const serverSettingsTabComponentMap = {
+	general: ServerSettingsGeneralPage,
+	installation: ServerSettingsInstallationPage,
+	network: ServerSettingsNetworkPage,
+	properties: ServerSettingsPropertiesPage,
+	advanced: ServerSettingsAdvancedPage,
+} as const
+
+provideServerSettings({
+	isApp,
+	currentUserId,
+	currentUserRole,
+	browseModpacks: props.browseModpacks ?? (() => {}),
+	closeModal: () => hide(),
+})
+
+const ownerId = computed(() => server.value?.owner_id ?? 'Ghost')
+const isOwner = computed(() => currentUserId.value != null && currentUserId.value === ownerId.value)
+const isAdmin = computed(() => currentUserRole.value === 'admin')
+
+const tabs = computed<TabbedModalTab[]>(() =>
+	serverSettingsTabDefinitions.map((tab) => {
+		const ctx = {
+			serverId: currentServerId,
+			ownerId: ownerId.value,
+			serverStatus: server.value?.status,
+			isOwner: isOwner.value,
+			isAdmin: isAdmin.value,
+		}
+		const name = defineMessage({
+			id: `server.settings.tabs.${tab.id}`,
+			defaultMessage: tab.label,
+		})
+		const shown = tab.shown ? tab.shown(ctx) : true
+
+		if (tab.external) {
+			return {
+				name,
+				icon: tab.icon,
+				href: tab.href ? `https://modrinth.com${tab.href(ctx)}` : undefined,
+				shown,
+			}
+		}
+
+		return {
+			name,
+			icon: tab.icon,
+			content: serverSettingsTabComponentMap[tab.id as keyof typeof serverSettingsTabComponentMap],
+			shown,
+		}
+	}),
+)
+
+async function fetchViewer() {
+	currentUserId.value = null
+	currentUserRole.value = null
+
+	const result = await props.resolveViewer()
+	currentUserId.value = result.userId
+	currentUserRole.value = result.userRole
+}
+
+async function show({ serverId, tabIndex, tabId }: ShowOptions) {
+	try {
+		const targetServerId = currentServerId
+		if (serverId !== targetServerId) {
+			console.warn(
+				`[ServerSettingsModal] Ignoring mismatched serverId "${serverId}" in favor of context "${targetServerId}"`,
+			)
+		}
+
+		const cachedServer = queryClient.getQueryData<Archon.Servers.v0.Server>([
+			'servers',
+			'detail',
+			targetServerId,
+		])
+		const cachedFull = queryClient.getQueryData<Archon.Servers.v1.ServerFull>([
+			'servers',
+			'v1',
+			'detail',
+			targetServerId,
+		])
+
+		modal.value?.show()
+		const visibleTabs = tabs.value.filter((tab) => tab.shown !== false)
+		let requestedTab = tabIndex ?? 0
+		if (tabId) {
+			const defIndex = serverSettingsTabDefinitions.findIndex((d) => d.id === tabId)
+			if (defIndex >= 0) {
+				const visibleIndex = visibleTabs.findIndex(
+					(_, i) => tabs.value.indexOf(visibleTabs[i]) === defIndex,
+				)
+				if (visibleIndex >= 0) requestedTab = visibleIndex
+			}
+		}
+		const clampedTab = Math.min(Math.max(requestedTab, 0), Math.max(visibleTabs.length - 1, 0))
+		nextTick(() => modal.value?.setTab(clampedTab))
+
+		const fetchPromises: Promise<unknown>[] = [fetchViewer()]
+
+		if (!cachedServer) {
+			fetchPromises.push(
+				queryClient.fetchQuery({
+					queryKey: ['servers', 'detail', targetServerId],
+					queryFn: () => client.archon.servers_v0.get(targetServerId),
+				}),
+			)
+		}
+
+		if (!cachedFull) {
+			fetchPromises.push(
+				queryClient.fetchQuery({
+					queryKey: ['servers', 'v1', 'detail', targetServerId],
+					queryFn: () => client.archon.servers_v1.get(targetServerId),
+				}),
+			)
+		}
+
+		await Promise.all(fetchPromises)
+
+		if (worldId.value) {
+			queryClient.prefetchQuery({
+				queryKey: ['servers', 'properties', 'v1', targetServerId, worldId.value],
+				queryFn: () => client.archon.properties_v1.getProperties(targetServerId, worldId.value!),
+			})
+			queryClient.prefetchQuery({
+				queryKey: ['content', 'list', 'v1', targetServerId],
+				queryFn: () =>
+					client.archon.content_v1.getAddons(targetServerId, worldId.value!, {
+						from_modpack: false,
+					}),
+			})
+			queryClient.prefetchQuery({
+				queryKey: ['servers', 'startup', 'v1', targetServerId, worldId.value],
+				queryFn: () => client.archon.options_v1.getStartup(targetServerId, worldId.value!),
+			})
+		}
+	} catch (error) {
+		console.error(error)
+		addNotification({
+			type: 'error',
+			title: formatMessage(messages.failedToLoadServer),
+		})
+	}
+}
+
+function hide() {
+	modal.value?.hide()
+}
+
+defineExpose({ show, hide })
+</script>
+
+<template>
+	<TabbedModal
+		ref="modal"
+		:tabs="tabs"
+		:max-width="'min(980px, calc(95vw - 10rem))'"
+		:width="'min(980px, calc(95vw - 10rem))'"
+	>
+		<template #title>
+			<span class="flex items-center gap-2 text-lg font-semibold text-primary">
+				{{ server.name || 'Server' }} <ChevronRightIcon />
+				<span class="font-extrabold text-contrast">{{
+					formatMessage(commonMessages.settingsLabel)
+				}}</span>
+			</span>
+		</template>
+	</TabbedModal>
+</template>
diff --git a/packages/ui/src/components/servers/edit-server-icon/EditServerIcon.vue b/packages/ui/src/components/servers/edit-server-icon/EditServerIcon.vue
new file mode 100644
index 0000000000..a973739cbe
--- /dev/null
+++ b/packages/ui/src/components/servers/edit-server-icon/EditServerIcon.vue
@@ -0,0 +1,240 @@
+<template>
+	<div class="flex flex-col gap-2.5">
+		<span class="text-lg font-semibold text-contrast">Icon</span>
+		<div class="group relative w-fit">
+			<OverflowMenu
+				v-tooltip="'Edit icon'"
+				class="m-0 cursor-pointer appearance-none border-none bg-transparent p-0 transition-transform group-active:scale-95"
+				:options="[
+					{
+						id: 'upload',
+						action: () => triggerFileInput(),
+					},
+					{
+						id: 'sync',
+						action: () => resetIcon(),
+					},
+				]"
+			>
+				<ServerIcon
+					class="size-28 transition-[filter] group-hover:brightness-75"
+					:image="displayIcon"
+				/>
+				<div
+					class="absolute top-0 w-full h-full flex justify-center items-center opacity-0 transition-all group-hover:opacity-100"
+				>
+					<EditIcon aria-hidden="true" class="h-10 w-10 text-primary" />
+				</div>
+				<template #upload> <UploadIcon /> Upload icon </template>
+				<template #sync> <TransferIcon /> Sync icon </template>
+			</OverflowMenu>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { EditIcon, TransferIcon, UploadIcon } from '@modrinth/assets'
+import { useQueryClient } from '@tanstack/vue-query'
+import { computed } from 'vue'
+
+import { OverflowMenu, ServerIcon } from '#ui/components'
+import { useServerImage } from '#ui/composables'
+import {
+	injectModrinthClient,
+	injectModrinthServerContext,
+	injectNotificationManager,
+} from '#ui/providers'
+
+const { addNotification } = injectNotificationManager()
+const client = injectModrinthClient()
+const { serverId, server } = injectModrinthServerContext()
+const queryClient = useQueryClient()
+
+const {
+	image: displayIcon,
+	refetch: refetchRemoteIcon,
+	setImage,
+	clearImage,
+} = useServerImage(
+	serverId,
+	computed(() => server.value?.upstream ?? null),
+	{
+		includeProjectFallback: false,
+	},
+)
+
+function getStatusCode(error: unknown): number | undefined {
+	const err = error as { statusCode?: number; response?: { status?: number } }
+	return err.statusCode ?? err.response?.status
+}
+
+function isNotFound(error: unknown): boolean {
+	return getStatusCode(error) === 404
+}
+
+const uploadFile = async (e: Event) => {
+	const file = (e.target as HTMLInputElement).files?.[0]
+	if (!file) {
+		addNotification({
+			type: 'error',
+			title: 'No file selected',
+			text: 'Please select a file to upload.',
+		})
+		return
+	}
+
+	const scaledFile = await new Promise<File>((resolve, reject) => {
+		const canvas = document.createElement('canvas')
+		const ctx = canvas.getContext('2d')
+		const img = new Image()
+		img.onload = () => {
+			canvas.width = 64
+			canvas.height = 64
+			ctx?.drawImage(img, 0, 0, 64, 64)
+			canvas.toBlob((blob) => {
+				if (blob) {
+					resolve(new File([blob], 'server-icon.png', { type: 'image/png' }))
+				} else {
+					reject(new Error('Canvas toBlob failed'))
+				}
+			}, 'image/png')
+			URL.revokeObjectURL(img.src)
+		}
+		img.onerror = reject
+		img.src = URL.createObjectURL(file)
+	})
+
+	try {
+		const fsAuth = await client.archon.servers_v0.getFilesystemAuth(serverId)
+
+		try {
+			await client.kyros.files_v0.uploadFileWithAuth(fsAuth, '/server-icon.png', scaledFile).promise
+		} catch (scaledUploadError) {
+			// Node FS may reject create when file already exists. Delete and retry once.
+			try {
+				await client.kyros.files_v0.deleteFileOrFolderWithAuth(fsAuth, '/server-icon.png', false)
+			} catch (deleteError) {
+				if (!isNotFound(deleteError)) {
+					throw scaledUploadError
+				}
+			}
+
+			await client.kyros.files_v0.uploadFileWithAuth(fsAuth, '/server-icon.png', scaledFile).promise
+		}
+
+		// Keep original file in sync when possible, but don't block icon updates on failures here.
+		try {
+			await client.kyros.files_v0.deleteFileOrFolderWithAuth(
+				fsAuth,
+				'/server-icon-original.png',
+				false,
+			)
+		} catch (deleteOriginalError) {
+			if (!isNotFound(deleteOriginalError)) {
+				// best effort
+			}
+		}
+
+		try {
+			await client.kyros.files_v0.uploadFileWithAuth(fsAuth, '/server-icon-original.png', file)
+				.promise
+		} catch (originalUploadError) {
+			if (!isNotFound(originalUploadError)) {
+				// best effort
+			}
+		}
+
+		const canvas = document.createElement('canvas')
+		const ctx = canvas.getContext('2d')
+		const img = new Image()
+		await new Promise<void>((resolve) => {
+			img.onload = () => {
+				canvas.width = 512
+				canvas.height = 512
+				ctx?.drawImage(img, 0, 0, 512, 512)
+				const dataURL = canvas.toDataURL('image/png')
+				setImage(dataURL)
+				queryClient.setQueriesData({ queryKey: ['servers', 'detail', serverId, 'icon'] }, dataURL)
+				resolve()
+				URL.revokeObjectURL(img.src)
+			}
+			img.src = URL.createObjectURL(file)
+		})
+		await refetchRemoteIcon()
+
+		addNotification({
+			type: 'success',
+			title: 'Server icon updated',
+			text: 'Your server icon was successfully changed.',
+		})
+	} catch {
+		addNotification({
+			type: 'error',
+			title: 'Upload failed',
+			text: 'Failed to upload server icon.',
+		})
+	}
+}
+
+const resetIcon = async () => {
+	try {
+		const fsAuth = await client.archon.servers_v0.getFilesystemAuth(serverId)
+		const deleteResults = await Promise.allSettled([
+			client.kyros.files_v0.deleteFileOrFolderWithAuth(fsAuth, '/server-icon.png', false),
+			client.kyros.files_v0.deleteFileOrFolderWithAuth(fsAuth, '/server-icon-original.png', false),
+		])
+
+		for (const result of deleteResults) {
+			if (result.status === 'rejected' && !isNotFound(result.reason)) {
+				throw result.reason
+			}
+		}
+
+		// Force default icon state across all useServerImage instances via the shared query cache.
+		// Use `null` (not `undefined`) because TanStack Query v5 treats setQueriesData(undefined)
+		// as a no-op. The `null` sentinel is handled by useServerImage's image computed.
+		clearImage()
+		await queryClient.cancelQueries({ queryKey: ['servers', 'detail', serverId, 'icon'] })
+		queryClient.setQueriesData({ queryKey: ['servers', 'detail', serverId, 'icon'] }, null)
+
+		addNotification({
+			type: 'success',
+			title: 'Server icon reset',
+			text: 'Your server icon was successfully reset.',
+		})
+	} catch {
+		addNotification({
+			type: 'error',
+			title: 'Reset failed',
+			text: 'Failed to reset server icon.',
+		})
+	}
+}
+
+const triggerFileInput = () => {
+	const input = document.createElement('input')
+	input.type = 'file'
+	input.id = 'server-icon-field'
+	input.accept = 'image/png,image/jpeg,image/gif,image/webp'
+	const cleanup = () => {
+		input.remove()
+		window.removeEventListener('focus', handleWindowFocus)
+	}
+	const handleWindowFocus = () => {
+		// If picker was cancelled there is no change event; clean up on focus return.
+		setTimeout(() => {
+			if (!input.value) cleanup()
+		}, 0)
+	}
+	input.onchange = async (event) => {
+		try {
+			await uploadFile(event)
+		} finally {
+			cleanup()
+		}
+	}
+	document.body.appendChild(input)
+	window.addEventListener('focus', handleWindowFocus, { once: true })
+	input.click()
+}
+</script>
diff --git a/packages/ui/src/components/servers/icons/ServerIcon.vue b/packages/ui/src/components/servers/icons/ServerIcon.vue
index ec0fe3cf1f..1cbaae5ead 100644
--- a/packages/ui/src/components/servers/icons/ServerIcon.vue
+++ b/packages/ui/src/components/servers/icons/ServerIcon.vue
@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="experimental-styles-within relative flex size-16 shrink-0 overflow-hidden rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
+		class="experimental-styles-within relative flex size-16 shrink-0 overflow-hidden rounded-2xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
 	>
 		<template v-if="hasMounted">
 			<img
diff --git a/packages/ui/src/components/servers/index.ts b/packages/ui/src/components/servers/index.ts
index 14f0c74d1e..0a3228aade 100644
--- a/packages/ui/src/components/servers/index.ts
+++ b/packages/ui/src/components/servers/index.ts
@@ -5,7 +5,9 @@ export { default as InstallingBanner } from './InstallingBanner.vue'
 export * from './labels'
 export * from './marketing'
 export { default as SaveBanner } from './SaveBanner.vue'
+export * from './server-header'
 export { default as ServerListEmpty } from './server-list-empty/ServerListEmpty.vue'
-export { type PendingChange,default as ServerListing } from './ServerListing.vue'
+export { type PendingChange, default as ServerListing } from './ServerListing.vue'
+export { default as ServerSettingsModal } from './ServerSettingsModal.vue'
 export { default as ServerSetupModal } from './ServerSetupModal.vue'
 export { default as ServersPromo } from './ServersPromo.vue'
diff --git a/packages/ui/src/components/servers/labels/ServerGameLabel.vue b/packages/ui/src/components/servers/labels/ServerGameLabel.vue
index 5f64f66381..84134a1e57 100644
--- a/packages/ui/src/components/servers/labels/ServerGameLabel.vue
+++ b/packages/ui/src/components/servers/labels/ServerGameLabel.vue
@@ -1,17 +1,13 @@
 <template>
-	<div
-		v-if="game"
-		v-tooltip="'Change server version'"
-		class="min-w-0 flex-none flex-row items-center gap-1.5 first:!flex"
-	>
+	<div v-if="game" class="min-w-0 flex-none flex-row items-center gap-1.5 first:!flex">
 		<Separator v-if="!noSeparator" />
 
 		<GameIcon aria-hidden="true" />
 		<AutoLink
 			v-if="isLink"
-			:to="serverId ? `/hosting/manage/${serverId}/options/loader` : ''"
-			class="flex min-w-0 items-center truncate text-sm font-semibold"
-			:class="serverId ? 'hover:underline' : ''"
+			:to="settingsLinkTarget"
+			class="flex min-w-0 items-center truncate text-sm font-medium"
+			:class="settingsLinkTarget ? 'hover:underline' : ''"
 		>
 			<div class="flex flex-row items-center gap-1">
 				{{ game[0].toUpperCase() + game.slice(1) }}
@@ -19,7 +15,11 @@
 				<span v-else class="inline-block h-3 w-12 animate-pulse rounded bg-button-border"></span>
 			</div>
 		</AutoLink>
-		<div v-else class="flex min-w-0 flex-row items-center gap-1 truncate text-sm font-semibold">
+		<div
+			v-else
+			v-tooltip="'Change server version'"
+			class="pointer-events-none flex min-w-0 flex-row items-center gap-1 truncate text-sm font-medium"
+		>
 			{{ game[0].toUpperCase() + game.slice(1) }}
 			<span v-if="mcVersion">{{ mcVersion }}</span>
 			<span v-else class="inline-block h-3 w-16 animate-pulse rounded bg-button-border"></span>
@@ -29,7 +29,9 @@
 
 <script setup lang="ts">
 import { GameIcon } from '@modrinth/assets'
-import { useRoute } from 'vue-router'
+import { computed } from 'vue'
+
+import { injectServerSettingsModal } from '#ui/providers/server-settings-modal'
 
 import AutoLink from '../../base/AutoLink.vue'
 import Separator from './Separator.vue'
@@ -41,6 +43,11 @@ defineProps<{
 	noSeparator?: boolean
 }>()
 
-const route = useRoute()
-const serverId = route.params.id as string
+const settingsModal = injectServerSettingsModal(null)
+const settingsLinkTarget = computed(() => {
+	if (settingsModal) {
+		return () => settingsModal.openServerSettings({ tabId: 'installation' })
+	}
+	return ''
+})
 </script>
diff --git a/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue b/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue
index e4d45d633f..d3e5ee06e6 100644
--- a/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue
+++ b/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue
@@ -1,14 +1,15 @@
 <template>
-	<div v-tooltip="'Change server loader'" class="flex min-w-0 flex-row items-center gap-2 truncate">
+	<div class="flex min-w-0 flex-row items-center gap-2 truncate">
 		<Separator v-if="!noSeparator" />
 		<div class="flex flex-row items-center gap-1.5">
 			<LoaderIcon v-if="loader" :loader="loader" />
 			<div v-else class="size-5 shrink-0 animate-pulse rounded-full bg-button-border"></div>
 			<AutoLink
 				v-if="isLink"
-				:to="serverId ? `/hosting/manage/${serverId}/options/loader` : ''"
-				class="flex min-w-0 items-center text-sm font-semibold"
-				:class="serverId ? 'hover:underline' : ''"
+				v-tooltip="'Change server loader'"
+				:to="settingsLinkTarget"
+				class="flex min-w-0 items-center font-medium text-sm"
+				:class="settingsLinkTarget ? 'hover:underline' : ''"
 			>
 				<span v-if="loader">
 					{{ loader }}
@@ -19,7 +20,7 @@
 					<span class="inline-block h-4 w-12 animate-pulse rounded bg-button-border"></span>
 				</span>
 			</AutoLink>
-			<div v-else class="min-w-0 text-sm font-semibold">
+			<div v-else class="pointer-events-none min-w-0 font-medium text-sm">
 				<span v-if="loader">
 					{{ loader }}
 					<span v-if="loaderVersion">{{ loaderVersion }}</span>
@@ -34,7 +35,9 @@
 </template>
 
 <script setup lang="ts">
-import { useRoute } from 'vue-router'
+import { computed } from 'vue'
+
+import { injectServerSettingsModal } from '#ui/providers/server-settings-modal'
 
 import AutoLink from '../../base/AutoLink.vue'
 import LoaderIcon from '../icons/LoaderIcon.vue'
@@ -47,6 +50,11 @@ defineProps<{
 	isLink?: boolean
 }>()
 
-const route = useRoute()
-const serverId = route.params.id as string
+const settingsModal = injectServerSettingsModal(null)
+const settingsLinkTarget = computed(() => {
+	if (settingsModal) {
+		return () => settingsModal.openServerSettings({ tabId: 'installation' })
+	}
+	return ''
+})
 </script>
diff --git a/packages/ui/src/components/servers/labels/ServerPlayerCount.vue b/packages/ui/src/components/servers/labels/ServerPlayerCount.vue
index 6511429091..2ca184e3a0 100644
--- a/packages/ui/src/components/servers/labels/ServerPlayerCount.vue
+++ b/packages/ui/src/components/servers/labels/ServerPlayerCount.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex gap-1">
+	<div class="flex gap-1 text-sm font-medium">
 		<!-- indicator icon -->
 
 		{{ currentPlayers }} / {{ maxPlayers }} Players
diff --git a/packages/ui/src/components/servers/labels/ServerSubdomainLabel.vue b/packages/ui/src/components/servers/labels/ServerSubdomainLabel.vue
index 5105cf855a..726c9681e1 100644
--- a/packages/ui/src/components/servers/labels/ServerSubdomainLabel.vue
+++ b/packages/ui/src/components/servers/labels/ServerSubdomainLabel.vue
@@ -2,14 +2,16 @@
 	<div
 		v-if="subdomain && !isHidden"
 		v-tooltip="'Copy custom URL'"
-		class="flex min-w-0 flex-row items-center gap-2 truncate hover:cursor-pointer"
+		class="flex min-w-0 flex-row items-center gap-2 truncate hover:cursor-pointer hover:underline"
+		data-subdomain-label
+		@click.stop.prevent
 	>
 		<Separator v-if="!noSeparator" />
 
 		<div class="flex flex-row items-center gap-1.5">
 			<LinkIcon />
 			<div
-				class="flex min-w-0 text-sm font-semibold"
+				class="flex min-w-0 font-medium text-sm text-nowrap"
 				:class="serverId ? 'hover:underline' : ''"
 				@click="copySubdomain"
 			>
diff --git a/packages/ui/src/components/servers/labels/ServerUptimeLabel.vue b/packages/ui/src/components/servers/labels/ServerUptimeLabel.vue
index 6c49678588..199addfb80 100644
--- a/packages/ui/src/components/servers/labels/ServerUptimeLabel.vue
+++ b/packages/ui/src/components/servers/labels/ServerUptimeLabel.vue
@@ -8,8 +8,7 @@
 		<Separator v-if="!noSeparator" />
 
 		<div class="flex gap-1.5">
-			<TimerIcon />
-			<time class="truncate text-sm font-semibold" :aria-label="verboseUptime">
+			<time class="truncate text-sm font-medium" :aria-label="verboseUptime">
 				{{ formattedUptime }}
 			</time>
 		</div>
@@ -17,7 +16,6 @@
 </template>
 
 <script setup lang="ts">
-import { TimerIcon } from '@modrinth/assets'
 import { computed } from 'vue'
 
 import Separator from './Separator.vue'
diff --git a/apps/frontend/src/components/ui/servers/marketing/MedalServerCountdown.vue b/packages/ui/src/components/servers/marketing/MedalServerCountdown.vue
similarity index 80%
rename from apps/frontend/src/components/ui/servers/marketing/MedalServerCountdown.vue
rename to packages/ui/src/components/servers/marketing/MedalServerCountdown.vue
index 906a7a3d94..e219c20ea2 100644
--- a/apps/frontend/src/components/ui/servers/marketing/MedalServerCountdown.vue
+++ b/packages/ui/src/components/servers/marketing/MedalServerCountdown.vue
@@ -34,18 +34,27 @@
 			<button class="z-10 my-auto" @click="openUpgradeModal"><RocketIcon /> Upgrade</button>
 		</ButtonStyled>
 	</div>
-	<ServersUpgradeModalWrapper ref="upgradeModal" />
+	<ServersUpgradeModalWrapper
+		ref="upgradeModal"
+		:stripe-publishable-key="props.stripePublishableKey ?? ''"
+		:site-url="props.siteUrl ?? ''"
+		:products="props.products ?? []"
+	/>
 </template>
 
 <script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
 import { ClockIcon, RocketIcon } from '@modrinth/assets'
-import { ButtonStyled, MedalBackgroundImage } from '@modrinth/ui'
-import type { UserSubscription } from '@modrinth/utils'
+import { useQuery } from '@tanstack/vue-query'
 import dayjs from 'dayjs'
 import dayjsDuration from 'dayjs/plugin/duration'
-import type { ComponentPublicInstance } from 'vue'
+import { type ComponentPublicInstance, computed, onMounted, onUnmounted, ref } from 'vue'
 
-import ServersUpgradeModalWrapper from '../ServersUpgradeModalWrapper.vue'
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import ServersUpgradeModalWrapper from '#ui/components/billing/ServersUpgradeModalWrapper.vue'
+import { injectModrinthClient } from '#ui/providers'
+
+import MedalBackgroundImage from './MedalBackgroundImage.vue'
 
 dayjs.extend(dayjsDuration)
 
@@ -54,15 +63,16 @@ const upgradeModal = ref<UpgradeWrapperRef | null>(null)
 
 const props = defineProps<{
 	serverId?: string
+	stripePublishableKey?: string
+	siteUrl?: string
+	products?: Labrinth.Billing.Internal.Product[]
 }>()
 
-const { data: subscriptions } = await useLazyAsyncData(
-	'countdown-subscriptions',
-	() =>
-		useBaseFetch(`billing/subscriptions`, {
-			internal: true,
-		}) as Promise<UserSubscription[]>,
-)
+const client = injectModrinthClient()
+const { data: subscriptions } = useQuery({
+	queryKey: ['billing', 'subscriptions'],
+	queryFn: () => client.labrinth.billing_internal.getSubscriptions(),
+})
 
 const expiryDate = computed(() => {
 	for (const subscription of subscriptions.value || []) {
diff --git a/packages/ui/src/components/servers/marketing/index.ts b/packages/ui/src/components/servers/marketing/index.ts
index 58f353604f..dd2c8ca3bc 100644
--- a/packages/ui/src/components/servers/marketing/index.ts
+++ b/packages/ui/src/components/servers/marketing/index.ts
@@ -1,2 +1,3 @@
 export { default as MedalBackgroundImage } from './MedalBackgroundImage.vue'
+export { default as MedalServerCountdown } from './MedalServerCountdown.vue'
 export { default as MedalServerListing } from './MedalServerListing.vue'
diff --git a/packages/ui/src/components/servers/server-header/PanelServerActionButton.vue b/packages/ui/src/components/servers/server-header/PanelServerActionButton.vue
new file mode 100644
index 0000000000..4edba7ea9f
--- /dev/null
+++ b/packages/ui/src/components/servers/server-header/PanelServerActionButton.vue
@@ -0,0 +1,65 @@
+<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">
+				<button disabled class="flex-shrink-0">
+					<LoaderCircleIcon class="size-5 animate-spin" /> Installing...
+				</button>
+			</ButtonStyled>
+
+			<template v-else>
+				<ButtonStyled v-if="showStopButton" type="transparent" size="large">
+					<button :disabled="!canTakeAction" @click="initiateAction('Stop')">
+						<div class="flex gap-1">
+							<StopCircleIcon class="h-5 w-5" />
+							<span>{{ isStopping ? 'Stopping...' : 'Stop' }}</span>
+						</div>
+					</button>
+				</ButtonStyled>
+
+				<ButtonStyled type="standard" color="brand" size="large">
+					<button v-tooltip="busyTooltip" :disabled="!canTakeAction" @click="handlePrimaryAction">
+						<div v-if="isTransitioning" class="grid place-content-center">
+							<LoaderCircleIcon class="size-5 animate-spin" />
+						</div>
+						<component :is="isRunning ? UpdatedIcon : PlayIcon" v-else />
+						<span>{{ primaryActionText }}</span>
+					</button>
+				</ButtonStyled>
+			</template>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { LoaderCircleIcon, PlayIcon, StopCircleIcon, UpdatedIcon } from '@modrinth/assets'
+import { computed } from 'vue'
+
+import { ButtonStyled } from '#ui/components'
+
+import { useServerPowerAction } from './use-server-power-action'
+
+const props = withDefaults(
+	defineProps<{
+		disabled?: boolean
+	}>(),
+	{
+		disabled: false,
+	},
+)
+
+const {
+	isInstalling,
+	isRunning,
+	isStopping,
+	isTransitioning,
+	showStopButton,
+	busyTooltip,
+	canTakeAction,
+	primaryActionText,
+	initiateAction,
+	handlePrimaryAction,
+} = useServerPowerAction({
+	disabled: computed(() => props.disabled),
+})
+</script>
diff --git a/packages/ui/src/components/servers/server-header/PanelServerOverflowMenu.vue b/packages/ui/src/components/servers/server-header/PanelServerOverflowMenu.vue
new file mode 100644
index 0000000000..e1139916fd
--- /dev/null
+++ b/packages/ui/src/components/servers/server-header/PanelServerOverflowMenu.vue
@@ -0,0 +1,124 @@
+<template>
+	<div class="contents">
+		<NewModal
+			ref="detailsModal"
+			:header="`All of ${server.name || 'Server'} info`"
+			@close="detailsModal?.hide()"
+		>
+			<ServerInfoLabels
+				:server-data="server"
+				:show-game-label="true"
+				:show-loader-label="true"
+				:uptime-seconds="props.uptimeSeconds"
+				:column="true"
+				class="mb-6 flex flex-col gap-2"
+			/>
+			<div v-if="props.showDebugInfo" class="markdown-body">
+				<pre>{{ server }}</pre>
+			</div>
+			<ButtonStyled type="standard" color="brand" @click="detailsModal?.hide()">
+				<button class="w-full">Close</button>
+			</ButtonStyled>
+		</NewModal>
+
+		<ButtonStyled circular type="transparent" size="large">
+			<TeleportOverflowMenu :options="menuOptions">
+				<MoreVerticalIcon aria-hidden="true" />
+				<template #kill>
+					<SlashIcon class="h-5 w-5" />
+					<span>Kill server</span>
+				</template>
+				<template #allServers>
+					<ServerIcon class="h-5 w-5" />
+					<span>All servers</span>
+				</template>
+				<template #details>
+					<InfoIcon class="h-5 w-5" />
+					<span>Details</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,
+	InfoIcon,
+	MoreVerticalIcon,
+	ServerIcon,
+	SlashIcon,
+} from '@modrinth/assets'
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+import { ButtonStyled, NewModal, ServerInfoLabels } from '#ui/components'
+import TeleportOverflowMenu from '#ui/components/base/TeleportOverflowMenu.vue'
+import { injectModrinthServerContext } from '#ui/providers'
+
+import { useServerPowerAction } from './use-server-power-action'
+
+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, server } = injectModrinthServerContext()
+
+const detailsModal = ref<InstanceType<typeof NewModal> | null>(null)
+
+const { isInstalling, initiateAction } = useServerPowerAction({
+	disabled: computed(() => props.disabled),
+})
+
+const menuOptions = computed(() => [
+	...(isInstalling.value
+		? []
+		: [
+				{
+					id: 'kill',
+					label: 'Kill server',
+					icon: SlashIcon,
+					action: () => initiateAction('Kill'),
+				},
+			]),
+	{
+		id: 'allServers',
+		label: 'All servers',
+		icon: ServerIcon,
+		action: () => router.push('/hosting/manage'),
+	},
+	{
+		id: 'details',
+		label: 'Details',
+		icon: InfoIcon,
+		action: () => detailsModal.value?.show(),
+	},
+	{
+		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
new file mode 100644
index 0000000000..b543d973e6
--- /dev/null
+++ b/packages/ui/src/components/servers/server-header/ServerManageHeader.vue
@@ -0,0 +1,159 @@
+<template>
+	<div class="w-full flex flex-col gap-4">
+		<ContentPageHeader :class="props.headerClass">
+			<template #icon>
+				<ServerIcon :image="headerImage" class="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"
+						class="h-1.5 w-1.5 rounded-full bg-surface-5"
+					/>
+
+					<div
+						v-if="props.server?.net?.domain"
+						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>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { Archon } from '@modrinth/api-client'
+import { LinkIcon, LoaderIcon, SettingsIcon, TimerIcon } from '@modrinth/assets'
+import { computed } from 'vue'
+
+import { AutoLink, Avatar, ContentPageHeader, ServerIcon } from '#ui/components'
+import { injectNotificationManager } from '#ui/providers'
+
+type ServerProjectSummary = {
+	id: string
+	slug?: string | null
+	title: string
+	icon_url?: string | null
+}
+
+const props = withDefaults(
+	defineProps<{
+		server: Archon.Servers.v0.Server | null | undefined
+		serverImage?: string | null
+		serverProject?: ServerProjectSummary | null
+		serverProjectLink?: string
+		uptimeSeconds?: number
+		showUptime?: boolean
+		backHref?: string
+		breadcrumbClass?: string
+		headerClass?: string
+	}>(),
+	{
+		serverImage: null,
+		serverProject: null,
+		serverProjectLink: '',
+		uptimeSeconds: 0,
+		showUptime: true,
+		backHref: '/hosting/manage',
+		breadcrumbClass: 'breadcrumb goto-link flex w-fit items-center',
+		headerClass: '',
+	},
+)
+
+const { addNotification } = injectNotificationManager()
+
+const headerImage = computed(() => {
+	if (props.server?.is_medal) {
+		return 'https://cdn-raw.modrinth.com/medal_icon.webp'
+	}
+	return props.serverImage ?? undefined
+})
+
+const showUptime = computed(() => props.showUptime && (props.uptimeSeconds ?? 0) > 0)
+
+const formattedUptime = computed(() => {
+	const uptime = props.uptimeSeconds ?? 0
+	const days = Math.floor(uptime / (24 * 3600))
+	const hours = Math.floor((uptime % (24 * 3600)) / 3600)
+	const minutes = Math.floor((uptime % 3600) / 60)
+	const seconds = uptime % 60
+
+	let formatted = ''
+	if (days > 0) formatted += `${days}d `
+	if (hours > 0 || days > 0) formatted += `${hours}h `
+	formatted += `${minutes}m ${seconds}s`
+	return formatted.trim()
+})
+
+const showProject = computed(() => !!props.serverProject)
+
+const serverProjectLink = computed(() => {
+	if (props.serverProjectLink) {
+		return props.serverProjectLink
+	}
+	if (!props.serverProject) {
+		return ''
+	}
+	return `/project/${props.serverProject.slug ?? props.serverProject.id}`
+})
+
+function copyServerAddress() {
+	if (!props.server?.net?.domain) return
+	navigator.clipboard.writeText(`${props.server.net.domain}.modrinth.gg`)
+	addNotification({
+		title: 'Server address copied',
+		text: "Your server's address has been copied to your clipboard.",
+		type: 'success',
+	})
+}
+</script>
diff --git a/packages/ui/src/components/servers/server-header/index.ts b/packages/ui/src/components/servers/server-header/index.ts
new file mode 100644
index 0000000000..97bcdcc7f2
--- /dev/null
+++ b/packages/ui/src/components/servers/server-header/index.ts
@@ -0,0 +1,3 @@
+export { default as PanelServerActionButton } from './PanelServerActionButton.vue'
+export { default as PanelServerOverflowMenu } from './PanelServerOverflowMenu.vue'
+export { default as ServerManageHeader } from './ServerManageHeader.vue'
diff --git a/packages/ui/src/components/servers/server-header/use-server-power-action.ts b/packages/ui/src/components/servers/server-header/use-server-power-action.ts
new file mode 100644
index 0000000000..f5a5e3f2ab
--- /dev/null
+++ b/packages/ui/src/components/servers/server-header/use-server-power-action.ts
@@ -0,0 +1,82 @@
+import { computed, type Ref } from 'vue'
+
+import { useVIntl } from '#ui/composables/i18n'
+import {
+	injectModrinthClient,
+	injectModrinthServerContext,
+	injectNotificationManager,
+} from '#ui/providers'
+
+export type PowerAction = 'Start' | 'Stop' | 'Restart' | 'Kill'
+
+export function useServerPowerAction(options?: { disabled?: Ref<boolean> }) {
+	const { formatMessage } = useVIntl()
+	const client = injectModrinthClient()
+	const { serverId, server, powerState, busyReasons } = injectModrinthServerContext()
+	const { addNotification } = injectNotificationManager()
+
+	const isInstalling = computed(() => server.value.status === 'installing')
+	const isRunning = computed(() => powerState.value === 'running')
+	const isStopping = computed(() => powerState.value === 'stopping')
+	const isTransitioning = computed(
+		() => powerState.value === 'starting' || powerState.value === 'stopping',
+	)
+	const showStopButton = computed(() => isRunning.value || isStopping.value)
+
+	const busyTooltip = computed(() =>
+		busyReasons.value.length > 0 ? formatMessage(busyReasons.value[0].reason) : undefined,
+	)
+
+	const canTakeAction = computed(
+		() => !isTransitioning.value && !options?.disabled?.value && busyReasons.value.length === 0,
+	)
+
+	const primaryActionText = computed(() => {
+		switch (powerState.value) {
+			case 'starting':
+				return 'Starting...'
+			case 'stopping':
+				return 'Stopping...'
+			case 'running':
+				return 'Restart'
+			default:
+				return 'Start'
+		}
+	})
+
+	async function sendPowerAction(action: PowerAction) {
+		try {
+			await client.archon.servers_v0.power(serverId, action)
+		} catch (error) {
+			console.error(`Error performing ${action} on server:`, error)
+			addNotification({
+				type: 'error',
+				title: `Failed to ${action.toLowerCase()} server`,
+				text: 'An error occurred while performing this action.',
+			})
+		}
+	}
+
+	function initiateAction(action: PowerAction) {
+		if (!canTakeAction.value) return
+		void sendPowerAction(action)
+	}
+
+	function handlePrimaryAction() {
+		initiateAction(isRunning.value ? 'Restart' : 'Start')
+	}
+
+	return {
+		isInstalling,
+		isRunning,
+		isStopping,
+		isTransitioning,
+		showStopButton,
+		busyTooltip,
+		canTakeAction,
+		primaryActionText,
+		sendPowerAction,
+		initiateAction,
+		handlePrimaryAction,
+	}
+}
diff --git a/packages/ui/src/components/servers/server-list-empty/ServerListEmpty.vue b/packages/ui/src/components/servers/server-list-empty/ServerListEmpty.vue
index 51dd4825c6..bf4114d432 100644
--- a/packages/ui/src/components/servers/server-list-empty/ServerListEmpty.vue
+++ b/packages/ui/src/components/servers/server-list-empty/ServerListEmpty.vue
@@ -1,7 +1,7 @@
 <template>
-	<div class="flex gap-8 items-center justify-center py-10">
+	<div class="grid grid-cols-2 gap-8 items-center justify-center py-10 max-w-[760px]">
 		<!-- Left column -->
-		<div class="flex flex-col gap-8 items-start pr-8 shrink-0 w-[380px]">
+		<div class="flex flex-col gap-8 items-start pr-8 shrink-0">
 			<!-- Heading -->
 			<div class="flex flex-col gap-2 items-start w-[300px]">
 				<p class="text-sm text-secondary">{{ formatMessage(messages.modrinthHostingLabel) }}</p>
@@ -65,7 +65,7 @@
 			</div>
 
 			<!-- CTA section -->
-			<div class="flex flex-col gap-6 items-start w-[300px]">
+			<div class="flex flex-col gap-6 items-start">
 				<div class="flex flex-col gap-3 items-start">
 					<ButtonStyled color="brand">
 						<button @click="onClickNewServer?.()">
@@ -104,7 +104,7 @@
 
 		<!-- Right column - mod icon grid -->
 		<div
-			class="relative flex h-[617px] w-[380px] shrink-0 items-center justify-center overflow-hidden rounded-[40px] pointer-events-none select-none [mask-image:linear-gradient(to_bottom,black_0%,black_35%,transparent_100%)] [-webkit-mask-image:linear-gradient(to_bottom,black_0%,black_35%,transparent_100%)]"
+			class="relative flex h-[617px] shrink-0 items-center justify-center overflow-hidden rounded-[40px] pointer-events-none select-none [mask-image:linear-gradient(to_bottom,black_0%,black_35%,transparent_100%)] [-webkit-mask-image:linear-gradient(to_bottom,black_0%,black_35%,transparent_100%)]"
 		>
 			<div class="rotate-[15deg]">
 				<div class="flex flex-col gap-4">
diff --git a/packages/ui/src/composables/index.ts b/packages/ui/src/composables/index.ts
index eda671a137..c5afc1d095 100644
--- a/packages/ui/src/composables/index.ts
+++ b/packages/ui/src/composables/index.ts
@@ -9,6 +9,10 @@ export * from './i18n-debug'
 export * from './page-leave-safety'
 export * from './scroll-indicator'
 export * from './server-backup'
+export * from './server-console'
+export * from './server-manage-core-runtime'
 export * from './sticky-observer'
 export * from './terminal'
+export * from './use-server-image'
+export * from './use-server-project'
 export * from './virtual-scroll'
diff --git a/packages/ui/src/composables/modal-stack.ts b/packages/ui/src/composables/modal-stack.ts
index 0db4c377eb..7664b490ed 100644
--- a/packages/ui/src/composables/modal-stack.ts
+++ b/packages/ui/src/composables/modal-stack.ts
@@ -1,17 +1,26 @@
+import { computed, ref } from 'vue'
+
 const isClient = typeof window !== 'undefined'
 const stack: symbol[] = []
+const stackSizeRef = ref(0)
 
 export function useModalStack() {
 	const id = Symbol()
 
 	function push() {
-		if (isClient && !stack.includes(id)) stack.push(id)
+		if (isClient && !stack.includes(id)) {
+			stack.push(id)
+			stackSizeRef.value = stack.length
+		}
 	}
 
 	function pop() {
 		if (!isClient) return
 		const idx = stack.indexOf(id)
-		if (idx !== -1) stack.splice(idx, 1)
+		if (idx !== -1) {
+			stack.splice(idx, 1)
+			stackSizeRef.value = stack.length
+		}
 	}
 
 	function isTopmost() {
@@ -23,5 +32,7 @@ export function useModalStack() {
 		return isClient ? stack.length : 0
 	}
 
-	return { push, pop, isTopmost, stackSize }
+	const hasModal = computed(() => stackSizeRef.value > 0)
+
+	return { push, pop, isTopmost, stackSize, hasModal }
 }
diff --git a/packages/ui/src/composables/server-console.ts b/packages/ui/src/composables/server-console.ts
new file mode 100644
index 0000000000..a58d926823
--- /dev/null
+++ b/packages/ui/src/composables/server-console.ts
@@ -0,0 +1,120 @@
+import { createGlobalState } from '@vueuse/core'
+import { type Ref, shallowRef } from 'vue'
+
+const maxLines = 10000
+const batchTimeout = 300
+const initialBatchSize = 256
+
+export const useModrinthServersConsole = createGlobalState(() => {
+	const output: Ref<string[]> = shallowRef<string[]>([])
+	const searchQuery: Ref<string> = shallowRef('')
+	const filteredOutput: Ref<string[]> = shallowRef([])
+	let searchRegex: RegExp | null = null
+
+	let lineBuffer: string[] = []
+	let batchTimer: NodeJS.Timeout | null = null
+	let isProcessingInitialBatch = false
+
+	let refilterTimer: NodeJS.Timeout | null = null
+	const refilterTimeout = 100
+
+	const updateFilter = () => {
+		if (!searchQuery.value) {
+			filteredOutput.value = []
+			return
+		}
+
+		if (!searchRegex) {
+			searchRegex = new RegExp(searchQuery.value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'i')
+		}
+
+		filteredOutput.value = output.value.filter((line) => searchRegex?.test(line) ?? false)
+	}
+
+	const scheduleRefilter = () => {
+		if (refilterTimer) clearTimeout(refilterTimer)
+		refilterTimer = setTimeout(updateFilter, refilterTimeout)
+	}
+
+	const flushBuffer = () => {
+		if (lineBuffer.length === 0) return
+
+		const processedLines = lineBuffer.flatMap((line) => line.split('\n').filter(Boolean))
+
+		if (isProcessingInitialBatch && processedLines.length >= initialBatchSize) {
+			isProcessingInitialBatch = false
+			output.value = processedLines.slice(-maxLines)
+		} else {
+			const newOutput = [...output.value, ...processedLines]
+			output.value = newOutput.slice(-maxLines)
+		}
+
+		lineBuffer = []
+		batchTimer = null
+
+		if (searchQuery.value) {
+			scheduleRefilter()
+		}
+	}
+
+	const addLine = (line: string): void => {
+		lineBuffer.push(line)
+
+		if (!batchTimer) {
+			batchTimer = setTimeout(flushBuffer, batchTimeout)
+		}
+	}
+
+	const addLines = (lines: string[]): void => {
+		if (output.value.length === 0 && lines.length >= initialBatchSize) {
+			isProcessingInitialBatch = true
+			lineBuffer = lines
+			flushBuffer()
+			return
+		}
+
+		lineBuffer.push(...lines)
+
+		if (!batchTimer) {
+			batchTimer = setTimeout(flushBuffer, batchTimeout)
+		}
+	}
+
+	const setSearchQuery = (query: string): void => {
+		searchQuery.value = query
+		searchRegex = null
+		updateFilter()
+	}
+
+	const clear = (): void => {
+		output.value = []
+		filteredOutput.value = []
+		searchQuery.value = ''
+		lineBuffer = []
+		isProcessingInitialBatch = false
+		if (batchTimer) {
+			clearTimeout(batchTimer)
+			batchTimer = null
+		}
+		if (refilterTimer) {
+			clearTimeout(refilterTimer)
+			refilterTimer = null
+		}
+		searchRegex = null
+	}
+
+	const findLineIndex = (line: string): number => {
+		return output.value.findIndex((l) => l === line)
+	}
+
+	return {
+		output,
+		searchQuery,
+		filteredOutput,
+		addLine,
+		addLines,
+		setSearchQuery,
+		clear,
+		findLineIndex,
+	}
+})
diff --git a/packages/ui/src/composables/server-manage-core-runtime.ts b/packages/ui/src/composables/server-manage-core-runtime.ts
new file mode 100644
index 0000000000..c6b5a04257
--- /dev/null
+++ b/packages/ui/src/composables/server-manage-core-runtime.ts
@@ -0,0 +1,456 @@
+import {
+	type Archon,
+	clearNodeAuthState,
+	setNodeAuthState,
+	type UploadState,
+} from '@modrinth/api-client'
+import type { Stats } from '@modrinth/utils'
+import type { ComputedRef, Ref } from 'vue'
+import { computed, reactive, ref, watch } 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 { useModrinthServersConsole } from './server-console'
+
+type ReadableRef<T> = Ref<T> | ComputedRef<T>
+type SocketUnsubscriber = () => void
+
+type ConnectSocketOptions = {
+	force?: boolean
+	extraSubscriptions?: (targetServerId: string) => SocketUnsubscriber[]
+}
+
+type UseServerManageCoreRuntimeOptions = {
+	serverId: ReadableRef<string>
+	worldId: ReadableRef<string | null>
+	server: ReadableRef<Archon.Servers.v0.Server | null | undefined>
+	isSyncingContent: ReadableRef<boolean>
+	markBackupCancelled?: (backupId: string) => void
+	includeBackupBusyReasons?: boolean
+	setDisconnectedOnAuthIncorrect?: boolean
+	syncUptimeFromState?: boolean
+	incrementUptimeLocally?: boolean
+	eventGuard?: () => boolean
+	onStateEvent?: (data: Archon.Websocket.v0.WSStateEvent) => void
+}
+
+const initialConsoleMessage = [
+	'   __________________________________________________',
+	' /  Welcome to your \x1B[32mModrinth Server\x1B[37m!                  \\',
+	'|   Press the green start button to start your server! |',
+	' \\____________________________________________________/',
+	'\x1B[32m     _    _ \x1B[37m',
+	'\x1B[32m    (o)--(o)      \x1B[37m',
+	'\x1B[32m   /.______.\\\x1B[37m',
+	'\x1B[32m   \\________/     \x1B[37m',
+	'\x1B[32m  ./        \\.    \x1B[37m',
+	'\x1B[32m ( .        , )\x1B[37m',
+	'\x1B[32m  \\ \\_\\\\ //_/ /\x1B[37m',
+	'\x1B[32m   ~~  ~~  ~~\x1B[37m',
+]
+
+const createInitialStats = (): Stats => ({
+	current: {
+		cpu_percent: 0,
+		ram_usage_bytes: 0,
+		ram_total_bytes: 1,
+		storage_usage_bytes: 0,
+		storage_total_bytes: 0,
+	},
+	past: {
+		cpu_percent: 0,
+		ram_usage_bytes: 0,
+		ram_total_bytes: 1,
+		storage_usage_bytes: 0,
+		storage_total_bytes: 0,
+	},
+	graph: {
+		cpu: [],
+		ram: [],
+	},
+})
+
+const appendGraphData = (dataArray: number[], newValue: number): number[] => {
+	const updated = [...dataArray, newValue]
+	if (updated.length > 10) updated.shift()
+	return updated
+}
+
+const mapPowerStateFromStateEvent = (
+	data: Archon.Websocket.v0.WSStateEvent,
+): Archon.Websocket.v0.PowerState => {
+	const powerMap: Record<Archon.Websocket.v0.FlattenedPowerState, Archon.Websocket.v0.PowerState> =
+		{
+			not_ready: 'stopped',
+			starting: 'starting',
+			running: 'running',
+			stopping: 'stopping',
+			idle:
+				data.was_oom || (data.exit_code != null && data.exit_code !== 0) ? 'crashed' : 'stopped',
+		}
+	return powerMap[data.power_variant]
+}
+
+export function useServerManageCoreRuntime(options: UseServerManageCoreRuntimeOptions) {
+	const client = injectModrinthClient()
+	const modrinthServersConsole = useModrinthServersConsole()
+
+	const shouldProcessEvent = () => (options.eventGuard ? options.eventGuard() : true)
+
+	const isConnected = ref(false)
+	const isWsAuthIncorrect = ref(false)
+	const serverPowerState = ref<Archon.Websocket.v0.PowerState>('stopped')
+	const powerStateDetails = ref<{ oom_killed?: boolean; exit_code?: number }>()
+	const isServerRunning = computed(() => serverPowerState.value === 'running')
+	const stats = ref<Stats>(createInitialStats())
+	const uptimeSeconds = ref(0)
+	const backupsState = reactive(new Map())
+	const fsAuth = ref<{ url: string; token: string } | null>(null)
+	const fsOps = ref<Archon.Websocket.v0.FilesystemOperation[]>([])
+	const fsQueuedOps = ref<Archon.Websocket.v0.QueuedFilesystemOp[]>([])
+	const connectedSocketServerId = ref<string | null>(null)
+	const socketUnsubscribers = ref<SocketUnsubscriber[]>([])
+	const cpuData = ref<number[]>([])
+	const ramData = ref<number[]>([])
+
+	let uptimeIntervalId: ReturnType<typeof setInterval> | null = null
+
+	const markBackupCancelled =
+		options.markBackupCancelled ??
+		((backupId: string) => {
+			backupsState.delete(backupId)
+		})
+
+	const busyReasons = computed<BusyReason[]>(() => {
+		const reasons: BusyReason[] = []
+		if (options.server.value?.status === 'installing') {
+			reasons.push({
+				reason: defineMessage({
+					id: 'servers.busy.installing',
+					defaultMessage: 'Server is installing',
+				}),
+			})
+		}
+		if (options.isSyncingContent.value) {
+			reasons.push({
+				reason: defineMessage({
+					id: 'servers.busy.syncing-content',
+					defaultMessage: 'Content sync in progress',
+				}),
+			})
+		}
+		if (options.includeBackupBusyReasons) {
+			for (const entry of backupsState.values()) {
+				if (entry.create?.state === 'ongoing') {
+					reasons.push({
+						reason: defineMessage({
+							id: 'servers.busy.backup-creating',
+							defaultMessage: 'Backup creation in progress',
+						}),
+					})
+					break
+				}
+				if (entry.restore?.state === 'ongoing') {
+					reasons.push({
+						reason: defineMessage({
+							id: 'servers.busy.backup-restoring',
+							defaultMessage: 'Backup restore in progress',
+						}),
+					})
+					break
+				}
+			}
+		}
+		return reasons
+	})
+
+	const stopUptimeTicker = () => {
+		if (uptimeIntervalId) {
+			clearInterval(uptimeIntervalId)
+			uptimeIntervalId = null
+		}
+	}
+
+	const startUptimeTicker = () => {
+		if (!options.incrementUptimeLocally || uptimeIntervalId) return
+		uptimeIntervalId = setInterval(() => {
+			uptimeSeconds.value += 1
+		}, 1000)
+	}
+
+	const updateStats = (currentStats: Stats['current']) => {
+		if (!shouldProcessEvent()) return
+		if (!isConnected.value) isConnected.value = true
+		cpuData.value = appendGraphData(cpuData.value, currentStats.cpu_percent)
+		ramData.value = appendGraphData(
+			ramData.value,
+			Math.floor((currentStats.ram_usage_bytes / currentStats.ram_total_bytes) * 100),
+		)
+		stats.value = {
+			current: currentStats,
+			past: { ...stats.value.current },
+			graph: {
+				cpu: cpuData.value,
+				ram: ramData.value,
+			},
+		}
+	}
+
+	const updatePowerState = (
+		state: Archon.Websocket.v0.PowerState,
+		details?: { oom_killed?: boolean; exit_code?: number },
+	) => {
+		if (!shouldProcessEvent()) return
+		serverPowerState.value = state
+		powerStateDetails.value = state === 'crashed' ? details : undefined
+		if (state === 'stopped' || state === 'crashed') {
+			stopUptimeTicker()
+			uptimeSeconds.value = 0
+		}
+	}
+
+	const handleLog = (data: Archon.Websocket.v0.WSLogEvent) => {
+		if (!shouldProcessEvent()) return
+		const log = data.message.split('\n').filter((line) => line.trim())
+		modrinthServersConsole.addLines(log)
+	}
+
+	const handleStats = (data: Archon.Websocket.v0.WSStatsEvent) => {
+		updateStats({
+			cpu_percent: data.cpu_percent,
+			ram_usage_bytes: data.ram_usage_bytes,
+			ram_total_bytes: data.ram_total_bytes,
+			storage_usage_bytes: data.storage_usage_bytes,
+			storage_total_bytes: data.storage_total_bytes,
+		})
+	}
+
+	const handlePowerState = (data: Archon.Websocket.v0.WSPowerStateEvent) => {
+		if (data.state === 'crashed') {
+			updatePowerState(data.state, {
+				oom_killed: data.oom_killed,
+				exit_code: data.exit_code,
+			})
+		} else {
+			updatePowerState(data.state)
+		}
+	}
+
+	const handleState = (data: Archon.Websocket.v0.WSStateEvent) => {
+		if (!shouldProcessEvent()) return
+		options.onStateEvent?.(data)
+		updatePowerState(mapPowerStateFromStateEvent(data), {
+			exit_code: data.exit_code ?? undefined,
+			oom_killed: data.was_oom,
+		})
+
+		if (options.syncUptimeFromState && data.uptime > 0) {
+			stopUptimeTicker()
+			uptimeSeconds.value = data.uptime
+			startUptimeTicker()
+		}
+	}
+
+	const handleUptime = (data: Archon.Websocket.v0.WSUptimeEvent) => {
+		if (!shouldProcessEvent()) return
+		stopUptimeTicker()
+		uptimeSeconds.value = data.uptime
+		startUptimeTicker()
+	}
+
+	const handleAuthIncorrect = () => {
+		if (!shouldProcessEvent()) return
+		isWsAuthIncorrect.value = true
+		if (options.setDisconnectedOnAuthIncorrect) {
+			isConnected.value = false
+		}
+	}
+
+	const handleAuthOk = () => {
+		if (!shouldProcessEvent()) return
+		isWsAuthIncorrect.value = false
+		isConnected.value = true
+	}
+
+	const clearSocketListeners = () => {
+		for (const unsub of socketUnsubscribers.value) unsub()
+		socketUnsubscribers.value = []
+	}
+
+	const disconnectSocket = (targetServerId?: string) => {
+		if (!targetServerId && !connectedSocketServerId.value) return
+
+		clearSocketListeners()
+
+		if (targetServerId) {
+			client.archon.sockets.disconnect(targetServerId)
+		}
+
+		stopUptimeTicker()
+		connectedSocketServerId.value = null
+		isConnected.value = false
+		isWsAuthIncorrect.value = false
+		serverPowerState.value = 'stopped'
+		powerStateDetails.value = undefined
+		uptimeSeconds.value = 0
+	}
+
+	const connectSocket = async (
+		targetServerId: string,
+		connectOptions: ConnectSocketOptions = {},
+	): Promise<boolean> => {
+		if (
+			connectedSocketServerId.value === targetServerId &&
+			(isConnected.value || isWsAuthIncorrect.value)
+		) {
+			return true
+		}
+
+		disconnectSocket(connectedSocketServerId.value ?? undefined)
+
+		try {
+			const safeConnectOptions = connectOptions.force ? { force: true } : undefined
+			await client.archon.sockets.safeConnect(targetServerId, safeConnectOptions)
+			connectedSocketServerId.value = targetServerId
+			isConnected.value = true
+			isWsAuthIncorrect.value = false
+
+			modrinthServersConsole.clear()
+			for (const line of initialConsoleMessage) {
+				modrinthServersConsole.addLine(line)
+			}
+
+			const baseSubscriptions: SocketUnsubscriber[] = [
+				client.archon.sockets.on(targetServerId, 'log', handleLog),
+				client.archon.sockets.on(targetServerId, 'stats', handleStats),
+				client.archon.sockets.on(targetServerId, 'state', handleState),
+				client.archon.sockets.on(targetServerId, 'power-state', handlePowerState),
+				client.archon.sockets.on(targetServerId, 'uptime', handleUptime),
+				client.archon.sockets.on(targetServerId, 'auth-incorrect', handleAuthIncorrect),
+				client.archon.sockets.on(targetServerId, 'auth-ok', handleAuthOk),
+			]
+			const extraSubscriptions = connectOptions.extraSubscriptions?.(targetServerId) ?? []
+			socketUnsubscribers.value = [...baseSubscriptions, ...extraSubscriptions]
+			return true
+		} catch (error) {
+			console.error('[hosting/manage] Failed to connect server socket:', error)
+			isConnected.value = false
+			return false
+		}
+	}
+
+	const uploadState = ref<UploadState>({
+		isUploading: false,
+		currentFileName: null,
+		currentFileProgress: 0,
+		uploadedBytes: 0,
+		totalBytes: 0,
+		completedFiles: 0,
+		totalFiles: 0,
+	})
+	const cancelUpload = ref<(() => void) | null>(null)
+
+	type QueuedOpWithState = Archon.Websocket.v0.QueuedFilesystemOp & { state: 'queued' }
+	const dismissedOpIds = ref<Set<string>>(new Set())
+
+	const activeOperations = computed<FileOperation[]>(() => [
+		...fsQueuedOps.value.map((x) => ({ ...x, state: 'queued' }) satisfies QueuedOpWithState),
+		...(fsOps.value.filter((op) => !op.id || !dismissedOpIds.value.has(op.id)) as FileOperation[]),
+	])
+
+	async function dismissOperation(opId: string, action: 'dismiss' | 'cancel') {
+		if (action === 'dismiss') {
+			dismissedOpIds.value = new Set([...dismissedOpIds.value, opId])
+		}
+		try {
+			await client.kyros.files_v0.modifyOperation(opId, action)
+		} catch (error) {
+			if (action === 'dismiss') return
+			console.error(`Failed to ${action} operation:`, error)
+		}
+	}
+
+	watch(
+		() => fsOps.value,
+		(newOps) => {
+			for (const op of newOps) {
+				if (op.state === 'done' && op.id && !dismissedOpIds.value.has(op.id)) {
+					setTimeout(() => {
+						dismissOperation(op.id!, 'dismiss')
+					}, 3000)
+				}
+			}
+		},
+		{ deep: true },
+	)
+
+	const refreshFsAuth = async () => {
+		if (!options.serverId.value) {
+			fsAuth.value = null
+			return
+		}
+		fsAuth.value = await client.archon.servers_v0.getFilesystemAuth(options.serverId.value)
+	}
+
+	provideModrinthServerContext({
+		get serverId() {
+			return options.serverId.value
+		},
+		worldId: options.worldId as Ref<string | null>,
+		server: options.server as Ref<Archon.Servers.v0.Server>,
+		isConnected,
+		isWsAuthIncorrect,
+		powerState: serverPowerState,
+		powerStateDetails,
+		isServerRunning,
+		stats,
+		uptimeSeconds,
+		backupsState,
+		markBackupCancelled,
+		isSyncingContent: options.isSyncingContent as Ref<boolean>,
+		busyReasons,
+		fsAuth,
+		fsOps,
+		fsQueuedOps,
+		refreshFsAuth,
+		uploadState,
+		cancelUpload,
+		activeOperations,
+		dismissOperation,
+	})
+
+	setNodeAuthState(() => fsAuth.value, refreshFsAuth)
+
+	const cleanupCoreRuntime = (targetServerId?: string) => {
+		disconnectSocket(targetServerId ?? connectedSocketServerId.value ?? undefined)
+		clearNodeAuthState()
+	}
+
+	return {
+		activeOperations,
+		backupsState,
+		busyReasons,
+		cancelUpload,
+		cleanupCoreRuntime,
+		connectSocket,
+		connectedSocketServerId,
+		cpuData,
+		disconnectSocket,
+		dismissOperation,
+		fsAuth,
+		fsOps,
+		fsQueuedOps,
+		isConnected,
+		isServerRunning,
+		isWsAuthIncorrect,
+		powerStateDetails,
+		ramData,
+		refreshFsAuth,
+		serverPowerState,
+		stats,
+		uptimeSeconds,
+		uploadState,
+	}
+}
diff --git a/packages/ui/src/composables/terminal.ts b/packages/ui/src/composables/terminal.ts
index ddfd50240e..ffed411957 100644
--- a/packages/ui/src/composables/terminal.ts
+++ b/packages/ui/src/composables/terminal.ts
@@ -54,6 +54,7 @@ function buildTerminalTheme() {
 		scrollbarSliderBackground: surface5,
 		scrollbarSliderHoverBackground: surface5,
 		scrollbarSliderActiveBackground: surface5,
+		overviewRulerBorder: 'transparent',
 	}
 }
 
@@ -62,6 +63,7 @@ export interface UseTerminalOptions {
 	options?: ITerminalOptions
 	scrollback?: number
 	onReady?: (terminal: Terminal) => void
+	onResize?: () => void
 }
 
 export interface UseTerminalReturn {
@@ -85,6 +87,7 @@ export function useTerminal(options: UseTerminalOptions): UseTerminalReturn {
 
 	let resizeObserver: ResizeObserver | null = null
 	let themeObserver: MutationObserver | null = null
+	let wheelHandler: ((e: WheelEvent) => void) | null = null
 	let hasWritten = false
 	const pendingWrites: Array<{ data: string; newline: boolean }> = []
 
@@ -126,7 +129,7 @@ export function useTerminal(options: UseTerminalOptions): UseTerminalReturn {
 		if (!fa || !term) return
 		const dims = fa.proposeDimensions()
 		if (dims) {
-			term.resize(dims.cols, dims.rows + 1)
+			term.resize(dims.cols, dims.rows)
 		}
 	}
 
@@ -183,12 +186,17 @@ export function useTerminal(options: UseTerminalOptions): UseTerminalReturn {
 		await nextTick()
 		const dims = fit.proposeDimensions()
 		if (dims) {
-			term.resize(dims.cols, dims.rows + 1)
+			term.resize(dims.cols, dims.rows)
 		}
 
 		term.options.disableStdin = true
 		term.write('\x1b[?25l')
 
+		wheelHandler = (e: WheelEvent) => {
+			e.preventDefault()
+		}
+		container.addEventListener('wheel', wheelHandler, { passive: false })
+
 		term.onScroll(() => checkIfAtBottom())
 		term.onWriteParsed(() => {
 			if (isAtBottom.value) {
@@ -212,8 +220,9 @@ export function useTerminal(options: UseTerminalOptions): UseTerminalReturn {
 		resizeObserver = new ResizeObserver(() => {
 			const d = fit.proposeDimensions()
 			if (d) {
-				term.resize(d.cols, d.rows + 1)
+				term.resize(d.cols, d.rows)
 			}
+			options.onResize?.()
 		})
 		resizeObserver.observe(container)
 
@@ -229,6 +238,10 @@ export function useTerminal(options: UseTerminalOptions): UseTerminalReturn {
 	})
 
 	onBeforeUnmount(() => {
+		if (wheelHandler && options.container.value) {
+			options.container.value.removeEventListener('wheel', wheelHandler)
+			wheelHandler = null
+		}
 		resizeObserver?.disconnect()
 		resizeObserver = null
 		themeObserver?.disconnect()
diff --git a/packages/ui/src/composables/use-server-image.ts b/packages/ui/src/composables/use-server-image.ts
new file mode 100644
index 0000000000..fc4fccc67e
--- /dev/null
+++ b/packages/ui/src/composables/use-server-image.ts
@@ -0,0 +1,134 @@
+import type { Archon } from '@modrinth/api-client'
+import { useQuery } from '@tanstack/vue-query'
+import { computed, type ComputedRef, ref } from 'vue'
+
+import { injectModrinthClient } from '#ui/providers'
+
+type UpstreamRef = ComputedRef<Archon.Servers.v0.Server['upstream'] | null | undefined>
+
+type UseServerImageOptions = {
+	enabled?: ComputedRef<boolean> | boolean
+	size?: number
+	includeProjectFallback?: boolean
+}
+
+export async function processImageBlob(blob: Blob, size: number): Promise<string> {
+	return new Promise((resolve) => {
+		const canvas = document.createElement('canvas')
+		const ctx = canvas.getContext('2d')!
+		const img = new Image()
+		img.onload = () => {
+			canvas.width = size
+			canvas.height = size
+			ctx.drawImage(img, 0, 0, size, size)
+			const dataURL = canvas.toDataURL('image/png')
+			URL.revokeObjectURL(img.src)
+			resolve(dataURL)
+		}
+		img.src = URL.createObjectURL(blob)
+	})
+}
+
+function getStatusCode(error: unknown): number | undefined {
+	const err = error as { statusCode?: number; response?: { status?: number } }
+	return err.statusCode ?? err.response?.status
+}
+
+function isNotFound(error: unknown): boolean {
+	return getStatusCode(error) === 404
+}
+
+export function useServerImage(
+	serverId: string,
+	upstream: UpstreamRef,
+	options: UseServerImageOptions = {},
+) {
+	const client = injectModrinthClient()
+	const localImage = ref<string | null | undefined>(undefined)
+	const iconSize = options.size ?? 512
+	const includeProjectFallback = options.includeProjectFallback ?? false
+
+	const queryKey = computed(
+		() => ['servers', 'detail', serverId, '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)
+	})
+
+	const { data: remoteImage, refetch } = useQuery({
+		queryKey,
+		queryFn: async (): Promise<string | null | undefined> => {
+			if (!serverId) return undefined
+
+			try {
+				const fsAuth = await client.archon.servers_v0.getFilesystemAuth(serverId)
+
+				try {
+					const blob = await client.kyros.files_v0.downloadFileWithAuth(fsAuth, '/server-icon.png')
+					return await processImageBlob(blob, iconSize)
+				} catch (error) {
+					if (!isNotFound(error)) throw error
+				}
+
+				try {
+					const blob = await client.kyros.files_v0.downloadFileWithAuth(
+						fsAuth,
+						'/server-icon-original.png',
+					)
+					return await processImageBlob(blob, iconSize)
+				} catch (error) {
+					if (!isNotFound(error)) throw error
+				}
+			} catch (error) {
+				console.debug('Server image fetch failed:', error)
+				return undefined
+			}
+
+			if (!includeProjectFallback || !upstream.value?.project_id) return undefined
+
+			try {
+				const project = await client.labrinth.projects_v2.get(upstream.value.project_id)
+				if (!project.icon_url) return undefined
+				const response = await fetch(project.icon_url)
+				if (!response.ok) return undefined
+				const blob = await response.blob()
+				return await processImageBlob(blob, iconSize)
+			} catch (error) {
+				console.debug('Project icon fallback failed:', error)
+				return undefined
+			}
+		},
+		enabled: isEnabled,
+	})
+
+	const image = computed(() => {
+		if (localImage.value === null) return undefined
+		const remote = remoteImage.value
+		if (remote === null) return undefined
+		return localImage.value ?? remote
+	})
+
+	function setImage(nextImage: string | null | undefined) {
+		localImage.value = nextImage
+	}
+
+	function clearImage() {
+		localImage.value = null
+	}
+
+	function resetLocalOverride() {
+		localImage.value = undefined
+	}
+
+	return {
+		image,
+		queryKey,
+		refetch,
+		setImage,
+		clearImage,
+		resetLocalOverride,
+	}
+}
diff --git a/apps/frontend/src/composables/servers/use-server-project.ts b/packages/ui/src/composables/use-server-project.ts
similarity index 70%
rename from apps/frontend/src/composables/servers/use-server-project.ts
rename to packages/ui/src/composables/use-server-project.ts
index eeb22a8b52..524bf45265 100644
--- a/apps/frontend/src/composables/servers/use-server-project.ts
+++ b/packages/ui/src/composables/use-server-project.ts
@@ -1,17 +1,18 @@
 import type { Archon } from '@modrinth/api-client'
-import type { Project } from '@modrinth/utils'
 import { useQuery } from '@tanstack/vue-query'
-import { $fetch } from 'ofetch'
 import { computed, type ComputedRef } from 'vue'
 
+import { injectModrinthClient } from '#ui/providers'
+
 // TODO: Remove and use v1
 export function useServerProject(
 	upstream: ComputedRef<Archon.Servers.v0.Server['upstream'] | null>,
 ) {
+	const client = injectModrinthClient()
+
 	return useQuery({
 		queryKey: computed(() => ['servers', 'project', upstream.value?.project_id ?? null]),
-		queryFn: () =>
-			$fetch<Project>(`https://api.modrinth.com/v2/project/${upstream.value!.project_id}`),
+		queryFn: () => client.labrinth.projects_v2.get(upstream.value!.project_id!),
 		enabled: computed(() => !!upstream.value?.project_id),
 	})
 }
diff --git a/packages/ui/src/layouts/index.ts b/packages/ui/src/layouts/index.ts
index 084ab4a7c2..7731b14940 100644
--- a/packages/ui/src/layouts/index.ts
+++ b/packages/ui/src/layouts/index.ts
@@ -1,3 +1,5 @@
+export * from './shared/browse-tab'
+export * from './shared/console'
 export * from './shared/content-tab'
 export * from './shared/files-tab'
 export * from './shared/installation-settings'
diff --git a/packages/ui/src/layouts/shared/browse-tab/composables/index.ts b/packages/ui/src/layouts/shared/browse-tab/composables/index.ts
new file mode 100644
index 0000000000..debbed72b3
--- /dev/null
+++ b/packages/ui/src/layouts/shared/browse-tab/composables/index.ts
@@ -0,0 +1 @@
+export * from './use-browse-search'
diff --git a/packages/ui/src/layouts/shared/browse-tab/composables/use-browse-search.ts b/packages/ui/src/layouts/shared/browse-tab/composables/use-browse-search.ts
new file mode 100644
index 0000000000..70ea3e5ff8
--- /dev/null
+++ b/packages/ui/src/layouts/shared/browse-tab/composables/use-browse-search.ts
@@ -0,0 +1,311 @@
+import type { Labrinth } from '@modrinth/api-client'
+import type { ComputedRef, Ref, ShallowRef } from 'vue'
+import { computed, nextTick, ref, shallowRef, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import { useDebugLogger } from '#ui/composables/debug-logger'
+import type { FilterType, FilterValue, ProjectType, SortType } from '#ui/utils/search'
+import { useSearch } from '#ui/utils/search'
+import { useServerSearch } from '#ui/utils/server-search'
+
+import type { BrowseSearchResponse } from '../types'
+
+export interface UseBrowseSearchOptions {
+	projectType: Ref<string>
+	tags: Ref<{
+		gameVersions: Labrinth.Tags.v2.GameVersion[]
+		loaders: Labrinth.Tags.v2.Loader[]
+		categories: Labrinth.Tags.v2.Category[]
+	}>
+	providedFilters?: ComputedRef<FilterValue[]>
+	search: (params: string) => Promise<BrowseSearchResponse>
+	persistentQueryParams: string[]
+	getExtraQueryParams?: () => Record<string, string | undefined>
+	maxResultsOptions?: ComputedRef<number[]>
+	displayMode?: Ref<'list' | 'grid' | 'gallery'> | ComputedRef<'list' | 'grid' | 'gallery'>
+}
+
+export interface BrowseSearchState {
+	query: Ref<string>
+
+	filters: ComputedRef<FilterType[]>
+	currentFilters: Ref<FilterValue[]>
+	toggledGroups: Ref<string[]>
+	overriddenProvidedFilterTypes: Ref<string[]>
+
+	serverFilterTypes: ComputedRef<FilterType[]>
+	serverCurrentFilters: Ref<FilterValue[]>
+	serverToggledGroups: Ref<string[]>
+
+	effectiveSortTypes: ComputedRef<readonly SortType[]>
+	effectiveCurrentSortType: Ref<SortType>
+
+	loading: Ref<boolean>
+	projectHits: ShallowRef<BrowseSearchResponse['projectHits']>
+	serverHits: ShallowRef<BrowseSearchResponse['serverHits']>
+	totalHits: Ref<number>
+	pageCount: ComputedRef<number>
+
+	maxResults: Ref<number>
+	currentPage: Ref<number>
+
+	isServerType: ComputedRef<boolean>
+	effectiveLayout: ComputedRef<'list' | 'grid'>
+	deprioritizedTags: ComputedRef<string[]>
+	excludeLoaders: ComputedRef<boolean>
+
+	refreshSearch: () => Promise<void>
+	setPage: (page: number) => Promise<void>
+	clearSearch: () => void
+	onFilterChange: () => void
+}
+
+const LOADER_FILTER_TYPES = [
+	'mod_loader',
+	'plugin_loader',
+	'modpack_loader',
+	'shader_loader',
+	'plugin_platform',
+] as const
+
+export function useBrowseSearch(options: UseBrowseSearchOptions): BrowseSearchState {
+	const debug = useDebugLogger('BrowseSearch')
+	const route = useRoute()
+	const router = useRouter()
+
+	debug('init, projectType:', options.projectType.value)
+
+	const projectTypes = computed(() => [options.projectType.value] as ProjectType[])
+	const isServerType = computed(() => options.projectType.value === 'server')
+
+	const {
+		query,
+		currentSortType,
+		currentFilters,
+		toggledGroups,
+		maxResults,
+		currentPage,
+		overriddenProvidedFilterTypes,
+		filters,
+		sortTypes,
+		requestParams,
+		createPageParams,
+	} = useSearch(projectTypes, options.tags, options.providedFilters ?? computed(() => []))
+
+	const {
+		serverCurrentSortType,
+		serverCurrentFilters,
+		serverToggledGroups,
+		serverSortTypes,
+		serverFilterTypes,
+		serverRequestParams,
+		createServerPageParams,
+	} = useServerSearch({ tags: options.tags, query, maxResults, currentPage })
+
+	const effectiveRequestParams = computed(() =>
+		isServerType.value ? serverRequestParams.value : requestParams.value,
+	)
+	const effectiveSortTypes = computed(() =>
+		isServerType.value ? (serverSortTypes as readonly SortType[]) : sortTypes,
+	)
+	const effectiveCurrentSortType = computed({
+		get: () => (isServerType.value ? serverCurrentSortType.value : currentSortType.value),
+		set: (v: SortType) => {
+			if (isServerType.value) serverCurrentSortType.value = v
+			else currentSortType.value = v
+		},
+	})
+
+	const effectiveMaxResultsOptions = computed(
+		() => options.maxResultsOptions?.value ?? [5, 10, 15, 20, 50, 100],
+	)
+
+	watch(effectiveMaxResultsOptions, (opts) => {
+		if (!opts.includes(maxResults.value)) {
+			maxResults.value = opts.reduce((prev, curr) =>
+				Math.abs(curr - maxResults.value) <= Math.abs(prev - maxResults.value) ? curr : prev,
+			)
+		}
+	})
+
+	const effectiveDisplayMode = computed(() => options.displayMode?.value ?? 'list')
+	const effectiveLayout = computed<'list' | 'grid'>(() =>
+		effectiveDisplayMode.value === 'grid' || effectiveDisplayMode.value === 'gallery'
+			? 'grid'
+			: 'list',
+	)
+
+	const selectedFilterTags = computed(() =>
+		currentFilters.value
+			.filter(
+				(f) =>
+					f.type.startsWith('category_') ||
+					LOADER_FILTER_TYPES.includes(f.type as (typeof LOADER_FILTER_TYPES)[number]),
+			)
+			.map((f) => f.option),
+	)
+	const excludeLoaders = computed(
+		() =>
+			currentFilters.value.some((f) =>
+				LOADER_FILTER_TYPES.includes(f.type as (typeof LOADER_FILTER_TYPES)[number]),
+			) || ['resourcepack', 'datapack'].includes(options.projectType.value),
+	)
+	const loadersNotForThisType = computed(
+		() =>
+			options.tags.value?.loaders
+				?.filter((loader) => !loader.supported_project_types.includes(options.projectType.value))
+				?.map((loader) => loader.name) ?? [],
+	)
+	const deprioritizedTags = computed(() => [
+		...selectedFilterTags.value,
+		...loadersNotForThisType.value,
+	])
+
+	const loading = ref(true)
+	const projectHits = shallowRef<BrowseSearchResponse['projectHits']>([])
+	const serverHits = shallowRef<BrowseSearchResponse['serverHits']>([])
+	const totalHits = ref(0)
+
+	const pageCount = computed(() => {
+		if (totalHits.value === 0) return 1
+		return Math.ceil(totalHits.value / maxResults.value)
+	})
+
+	let searchVersion = 0
+	let searchDebounceTimer: ReturnType<typeof setTimeout> | null = null
+
+	watch(effectiveRequestParams, (newVal, oldVal) => {
+		debug('effectiveRequestParams changed', {
+			from: oldVal?.substring(0, 80),
+			to: newVal?.substring(0, 80),
+		})
+		if (searchDebounceTimer) clearTimeout(searchDebounceTimer)
+		searchDebounceTimer = setTimeout(() => {
+			refreshSearch()
+		}, 200)
+	})
+
+	async function refreshSearch() {
+		const version = ++searchVersion
+		debug('refreshSearch start', {
+			version,
+			projectType: options.projectType.value,
+			params: effectiveRequestParams.value.substring(0, 100),
+		})
+
+		const currentHitsEmpty = isServerType.value
+			? serverHits.value.length === 0
+			: projectHits.value.length === 0
+		if (currentHitsEmpty) {
+			loading.value = true
+		}
+
+		try {
+			const response = await options.search(effectiveRequestParams.value)
+
+			if (version !== searchVersion) {
+				debug('refreshSearch stale, discarding', { version, current: searchVersion })
+				return
+			}
+
+			if (isServerType.value) {
+				serverHits.value = response.serverHits
+			} else {
+				projectHits.value = response.projectHits
+			}
+			totalHits.value = response.total_hits
+			debug('refreshSearch complete', {
+				version,
+				hits: response.total_hits,
+				projectHits: response.projectHits.length,
+				serverHits: response.serverHits.length,
+			})
+
+			updateUrlParams()
+			loading.value = false
+		} catch (err) {
+			debug('refreshSearch error', err)
+			console.error('Browse search error:', err)
+			if (version === searchVersion) {
+				loading.value = false
+			}
+		}
+	}
+
+	function updateUrlParams() {
+		debug('updateUrlParams', { path: route.path })
+		const persistentParams: Record<string, string | (string | null)[] | null | undefined> = {}
+
+		for (const [key, value] of Object.entries(route.query)) {
+			if (options.persistentQueryParams.includes(key)) {
+				persistentParams[key] = value
+			}
+		}
+
+		const extraParams = options.getExtraQueryParams?.() ?? {}
+		for (const [key, value] of Object.entries(extraParams)) {
+			if (value !== undefined) {
+				persistentParams[key] = value
+			}
+		}
+
+		const params = {
+			...persistentParams,
+			...(isServerType.value ? createServerPageParams() : createPageParams()),
+		}
+
+		router.replace({ path: route.path, query: params })
+	}
+
+	async function setPage(newPageNumber: number) {
+		currentPage.value = newPageNumber
+		await nextTick()
+		window.scrollTo({ top: 0, behavior: 'smooth' })
+	}
+
+	function clearSearch() {
+		query.value = ''
+		currentPage.value = 1
+	}
+
+	function onFilterChange() {
+		nextTick(() => window.scrollTo({ top: 0, behavior: 'smooth' }))
+	}
+
+	watch(
+		() => options.projectType.value,
+		(newType, oldType) => {
+			debug('projectType changed', { from: oldType, to: newType })
+			currentSortType.value = { display: 'Relevance', name: 'relevance' }
+			query.value = ''
+		},
+	)
+
+	return {
+		query,
+		filters,
+		currentFilters,
+		toggledGroups,
+		overriddenProvidedFilterTypes,
+		serverFilterTypes,
+		serverCurrentFilters,
+		serverToggledGroups,
+		effectiveSortTypes,
+		effectiveCurrentSortType,
+		loading,
+		projectHits,
+		serverHits,
+		totalHits,
+		pageCount,
+		maxResults,
+		currentPage,
+		isServerType,
+		effectiveLayout,
+		deprioritizedTags,
+		excludeLoaders,
+		refreshSearch,
+		setPage,
+		clearSearch,
+		onFilterChange,
+	}
+}
diff --git a/packages/ui/src/layouts/shared/browse-tab/header.vue b/packages/ui/src/layouts/shared/browse-tab/header.vue
new file mode 100644
index 0000000000..0ac04ea3c0
--- /dev/null
+++ b/packages/ui/src/layouts/shared/browse-tab/header.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { GameIcon, LeftArrowIcon, MinecraftServerIcon } from '@modrinth/assets'
+import { computed } 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 ContentPageHeader from '#ui/components/base/ContentPageHeader.vue'
+import { useServerImage } from '#ui/composables/use-server-image'
+import { formatLoaderLabel } from '#ui/utils/loaders'
+
+import { injectBrowseManager } from './providers/browse-manager'
+
+const MEDAL_ICON_URL = 'https://cdn-raw.modrinth.com/medal_icon.webp'
+
+const ctx = injectBrowseManager()
+const router = useRouter()
+const installContext = computed(() => ctx.installContext?.value ?? null)
+
+const serverId = computed(() => installContext.value?.serverId ?? '')
+const upstream = computed(() => installContext.value?.upstream ?? null)
+
+const { image: fetchedIcon } = useServerImage(serverId, upstream, {
+	enabled: computed(() => !!installContext.value?.serverId),
+})
+
+const iconSrc = computed(() => {
+	if (installContext.value?.isMedal) return MEDAL_ICON_URL
+	return fetchedIcon.value ?? installContext.value?.iconSrc ?? MinecraftServerIcon
+})
+</script>
+
+<template>
+	<template v-if="installContext">
+		<ContentPageHeader class="mb-2">
+			<template #icon>
+				<Avatar :src="iconSrc" size="64px" />
+			</template>
+			<template #title>
+				{{ installContext.name }}
+			</template>
+			<template #summary>
+				<span class="flex items-center gap-2 text-sm font-semibold text-secondary">
+					<GameIcon class="h-5 w-5 text-secondary" />
+					{{ formatLoaderLabel(installContext.loader) }} {{ installContext.gameVersion }}
+				</span>
+			</template>
+			<template #actions>
+				<ButtonStyled>
+					<button @click="router.push(installContext.backUrl)">
+						<LeftArrowIcon />
+						{{ installContext.backLabel }}
+					</button>
+				</ButtonStyled>
+			</template>
+		</ContentPageHeader>
+		<h1 class="m-0 mb-1 text-xl font-extrabold">{{ installContext.heading }}</h1>
+		<Admonition v-if="installContext.warning" type="warning" class="mb-1">
+			{{ installContext.warning }}
+		</Admonition>
+	</template>
+</template>
diff --git a/packages/ui/src/layouts/shared/browse-tab/index.ts b/packages/ui/src/layouts/shared/browse-tab/index.ts
new file mode 100644
index 0000000000..5789a3af66
--- /dev/null
+++ b/packages/ui/src/layouts/shared/browse-tab/index.ts
@@ -0,0 +1,6 @@
+export * from './composables'
+export { default as BrowseInstallHeader } from './header.vue'
+export { default as BrowsePageLayout } from './layout.vue'
+export * from './providers'
+export { default as BrowseSidebar } from './sidebar.vue'
+export * from './types'
diff --git a/packages/ui/src/layouts/shared/browse-tab/layout.vue b/packages/ui/src/layouts/shared/browse-tab/layout.vue
new file mode 100644
index 0000000000..1f28ed6353
--- /dev/null
+++ b/packages/ui/src/layouts/shared/browse-tab/layout.vue
@@ -0,0 +1,262 @@
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { SearchIcon } from '@modrinth/assets'
+import { computed, toValue } from 'vue'
+
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import Combobox, { type ComboboxOption } from '#ui/components/base/Combobox.vue'
+import LoadingIndicator from '#ui/components/base/LoadingIndicator.vue'
+import NavTabs from '#ui/components/base/NavTabs.vue'
+import Pagination from '#ui/components/base/Pagination.vue'
+import StyledInput from '#ui/components/base/StyledInput.vue'
+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 type { SortType } from '#ui/utils/search'
+
+import BrowseInstallHeader from './header.vue'
+import { injectBrowseManager } from './providers/browse-manager'
+
+const ctx = injectBrowseManager()
+const lockedMessages = computed(() => toValue(ctx.lockedFilterMessages))
+
+const sortOptions = computed<ComboboxOption<SortType>[]>(() =>
+	ctx.effectiveSortTypes.value.map((st) => ({
+		value: st,
+		label: st.display,
+	})),
+)
+
+const maxResultsOptions = computed<ComboboxOption<number>[]>(() =>
+	(ctx.maxResultsOptions?.value ?? [5, 10, 15, 20, 50, 100]).map((n) => ({
+		value: n,
+		label: String(n),
+	})),
+)
+</script>
+
+<template>
+	<template v-if="ctx.installContext?.value && ctx.variant !== 'web'">
+		<BrowseInstallHeader />
+	</template>
+
+	<NavTabs v-if="ctx.showProjectTypeTabs.value" :links="ctx.selectableProjectTypes.value" />
+
+	<StyledInput
+		v-model="ctx.query.value"
+		:icon="SearchIcon"
+		type="text"
+		autocomplete="off"
+		:placeholder="`Search ${ctx.projectType.value}s...`"
+		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-auto flex-grow md:flex-grow-0' : 'max-w-[16rem]'"
+			placeholder="Sort by"
+			@update:model-value="(val: SortType) => (ctx.effectiveCurrentSortType.value = val)"
+		>
+			<template #prefix>
+				<span class="font-semibold text-primary">Sort by:</span>
+			</template>
+		</Combobox>
+
+		<Combobox
+			:model-value="ctx.maxResults.value"
+			:options="maxResultsOptions"
+			:class="ctx.variant === 'web' ? '!w-auto flex-grow md:flex-grow-0' : 'max-w-[9rem]'"
+			placeholder="View"
+			@update:model-value="(val: number) => (ctx.maxResults.value = val)"
+		>
+			<template #prefix>
+				<span class="font-semibold text-primary">View:</span>
+			</template>
+		</Combobox>
+
+		<div v-if="ctx.filtersMenuOpen && !ctx.filtersMenuOpen.value" class="lg:hidden">
+			<ButtonStyled>
+				<button @click="ctx.filtersMenuOpen.value = true">Filter results...</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">
+			You are currently offline. Connect to the internet to browse Modrinth!
+		</section>
+		<section
+			v-else-if="
+				ctx.isServerType.value
+					? ctx.serverHits.value.length === 0
+					: ctx.projectHits.value.length === 0
+			"
+			class="offline"
+		>
+			<p>No results found for your query!</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" #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" />
+									<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.author,
+						link:
+							ctx.variant === 'web'
+								? `/user/${result.author}`
+								: `https://modrinth.com/user/${result.author}`,
+					}"
+					: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" #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" />
+									<template v-if="!action.circular">{{ action.label }}</template>
+								</button>
+							</ButtonStyled>
+						</div>
+					</template>
+				</ProjectCard>
+			</template>
+		</ProjectCardList>
+
+		<div :class="ctx.variant === 'web' ? 'pagination-after' : 'flex justify-end'">
+			<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>
diff --git a/packages/ui/src/layouts/shared/browse-tab/providers/browse-manager.ts b/packages/ui/src/layouts/shared/browse-tab/providers/browse-manager.ts
new file mode 100644
index 0000000000..75ff3712f9
--- /dev/null
+++ b/packages/ui/src/layouts/shared/browse-tab/providers/browse-manager.ts
@@ -0,0 +1,106 @@
+import type { Labrinth } from '@modrinth/api-client'
+import type { Component, ComputedRef, MaybeRef, Ref, ShallowRef } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+
+import { createContext } from '#ui/providers/create-context'
+import type { FilterType, FilterValue, SortType } from '#ui/utils/search'
+
+import type {
+	BrowseInstallContext,
+	BrowseSearchResponse,
+	CardAction,
+	ServerModpackContent,
+} from '../types'
+
+export interface BrowseManagerContext {
+	tags: Ref<{
+		gameVersions: Labrinth.Tags.v2.GameVersion[]
+		loaders: Labrinth.Tags.v2.Loader[]
+		categories: Labrinth.Tags.v2.Category[]
+	}>
+	projectType: Ref<string>
+
+	query: Ref<string>
+	filters: ComputedRef<FilterType[]>
+	currentFilters: Ref<FilterValue[]>
+	toggledGroups: Ref<string[]>
+	overriddenProvidedFilterTypes: Ref<string[]>
+	serverFilterTypes: ComputedRef<FilterType[]>
+	serverCurrentFilters: Ref<FilterValue[]>
+	serverToggledGroups: Ref<string[]>
+	effectiveSortTypes: ComputedRef<readonly SortType[]>
+	effectiveCurrentSortType: Ref<SortType>
+	loading: Ref<boolean>
+	projectHits: ShallowRef<BrowseSearchResponse['projectHits']>
+	serverHits: ShallowRef<BrowseSearchResponse['serverHits']>
+	totalHits: Ref<number>
+	pageCount: ComputedRef<number>
+	maxResults: Ref<number>
+	currentPage: Ref<number>
+	isServerType: ComputedRef<boolean>
+	effectiveLayout: ComputedRef<'list' | 'grid'>
+	deprioritizedTags: ComputedRef<string[]>
+	excludeLoaders: ComputedRef<boolean>
+	refreshSearch: () => Promise<void>
+	setPage: (page: number) => Promise<void>
+	clearSearch: () => void
+	onFilterChange: () => void
+
+	getProjectLink: (result: Labrinth.Search.v2.ResultSearchProject) => string | RouteLocationRaw
+	getServerProjectLink: (
+		result: Labrinth.Search.v3.ResultSearchProject,
+	) => string | RouteLocationRaw
+
+	selectableProjectTypes: ComputedRef<{ label: string; href: string; shown?: boolean }[]>
+	showProjectTypeTabs: ComputedRef<boolean>
+
+	variant: 'app' | 'web'
+
+	getCardActions?: (
+		result: Labrinth.Search.v2.ResultSearchProject | Labrinth.Search.v3.ResultSearchProject,
+		projectType: string,
+	) => CardAction[]
+
+	installContext?: ComputedRef<BrowseInstallContext | null>
+	providedFilters?: ComputedRef<FilterValue[]>
+	hideInstalled?: Ref<boolean>
+	showHideInstalled?: ComputedRef<boolean>
+	hideInstalledLabel?: ComputedRef<string>
+	onInstalled?: (projectId: string) => void
+
+	displayMode?: Ref<'list' | 'grid' | 'gallery'> | ComputedRef<'list' | 'grid' | 'gallery'>
+	cycleDisplayMode?: () => void
+	maxResultsOptions?: ComputedRef<number[]>
+
+	serverPings?: Ref<Record<string, number | undefined>>
+	getServerModpackContent?: (
+		result: Labrinth.Search.v3.ResultSearchProject,
+	) => ServerModpackContent | undefined
+
+	onProjectHover?: (result: Labrinth.Search.v2.ResultSearchProject) => void
+	onServerProjectHover?: (result: Labrinth.Search.v3.ResultSearchProject) => void
+	onProjectHoverEnd?: () => void
+	onContextMenu?: (
+		event: MouseEvent,
+		result: Labrinth.Search.v2.ResultSearchProject | Labrinth.Search.v3.ResultSearchProject,
+	) => void
+	offline?: Ref<boolean>
+
+	filtersMenuOpen?: Ref<boolean>
+
+	lockedFilterMessages?: MaybeRef<{
+		gameVersion?: string
+		modLoader?: string
+		environment?: string
+		syncButton?: string
+		providedBy?: string
+		gameVersionShaderMessage?: string
+	}>
+
+	loadingComponent?: Component
+}
+
+export const [injectBrowseManager, provideBrowseManager] = createContext<BrowseManagerContext>(
+	'BrowsePageLayout',
+	'browseManagerContext',
+)
diff --git a/packages/ui/src/layouts/shared/browse-tab/providers/index.ts b/packages/ui/src/layouts/shared/browse-tab/providers/index.ts
new file mode 100644
index 0000000000..4aa2aea602
--- /dev/null
+++ b/packages/ui/src/layouts/shared/browse-tab/providers/index.ts
@@ -0,0 +1 @@
+export * from './browse-manager'
diff --git a/packages/ui/src/layouts/shared/browse-tab/sidebar.vue b/packages/ui/src/layouts/shared/browse-tab/sidebar.vue
new file mode 100644
index 0000000000..68c59be1da
--- /dev/null
+++ b/packages/ui/src/layouts/shared/browse-tab/sidebar.vue
@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import { InfoIcon, XIcon } from '@modrinth/assets'
+import { computed, toValue } from 'vue'
+
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import Checkbox from '#ui/components/base/Checkbox.vue'
+import SearchSidebarFilter from '#ui/components/search/SearchSidebarFilter.vue'
+
+import { injectBrowseManager } from './providers/browse-manager'
+
+const ctx = injectBrowseManager()
+
+const isApp = computed(() => ctx.variant === 'app')
+const lockedMessages = computed(() => toValue(ctx.lockedFilterMessages))
+
+function closeFiltersMenu() {
+	if (ctx.filtersMenuOpen) {
+		ctx.filtersMenuOpen.value = false
+	}
+	window.scrollTo({ top: 0, behavior: 'instant' as ScrollBehavior })
+}
+
+const filterClass = computed(() => {
+	if (isApp.value) {
+		return 'border-0 border-b-[1px] [&:first-child>button]:pt-4 last:border-b-0 border-[--brand-gradient-border] border-solid'
+	}
+	if (ctx.filtersMenuOpen?.value) {
+		return 'border-0 border-b-[1px] border-solid border-divider last:border-b-0'
+	}
+	return 'card-shadow rounded-2xl bg-bg-raised'
+})
+
+const buttonClass = computed(() => {
+	if (isApp.value) {
+		return 'button-animation flex flex-col gap-1 px-4 py-3 w-full bg-transparent cursor-pointer border-none hover:bg-button-bg'
+	}
+	return 'button-animation flex flex-col gap-1 px-6 py-4 w-full bg-transparent cursor-pointer border-none'
+})
+
+const contentClass = computed(() => (isApp.value ? 'mt-2 mb-3' : 'mb-4 mx-3'))
+const innerPanelClass = computed(() => (isApp.value ? 'ml-2 mr-3' : 'p-1'))
+
+function getFilterOpenByDefault(filterId: string): boolean {
+	if (ctx.isServerType.value) {
+		return ![
+			'server_category_minecraft_server_meta',
+			'server_category_minecraft_server_community',
+			'server_game_version',
+			'server_status',
+		].includes(filterId)
+	}
+	if (isApp.value) {
+		return filterId.startsWith('category') || filterId === 'environment' || filterId === 'license'
+	}
+	if (
+		lockedMessages.value?.gameVersionShaderMessage &&
+		ctx.projectType.value === 'shader' &&
+		filterId === 'game_version'
+	) {
+		return false
+	}
+	return true
+}
+</script>
+
+<template>
+	<slot name="prepend" />
+
+	<div v-if="ctx.filtersMenuOpen?.value" class="fixed inset-0 z-40 bg-bg" />
+
+	<div
+		class="flex flex-col"
+		:class="{
+			'gap-3': !isApp,
+			'fixed inset-0 z-50 m-4 mb-0 overflow-auto rounded-t-3xl bg-bg-raised':
+				ctx.filtersMenuOpen?.value,
+		}"
+	>
+		<div
+			v-if="ctx.filtersMenuOpen?.value"
+			class="sticky top-0 z-10 mx-1 flex items-center justify-between gap-3 border-0 border-b-[1px] border-solid border-divider bg-bg-raised px-6 py-4"
+		>
+			<h3 class="m-0 text-lg text-contrast">Filters</h3>
+			<ButtonStyled circular>
+				<button @click="closeFiltersMenu">
+					<XIcon />
+				</button>
+			</ButtonStyled>
+		</div>
+
+		<div
+			v-if="ctx.showHideInstalled?.value"
+			:class="
+				isApp
+					? 'border-0 border-b-[1px] p-4 last:border-b-0 border-[--brand-gradient-border] border-solid'
+					: 'card-shadow rounded-2xl bg-bg-raised p-4'
+			"
+		>
+			<Checkbox
+				v-model="ctx.hideInstalled!.value"
+				:label="ctx.hideInstalledLabel?.value ?? 'Hide installed content'"
+				class="filter-checkbox"
+				@update:model-value="ctx.onFilterChange()"
+				@click.prevent.stop
+			/>
+		</div>
+
+		<template v-if="ctx.isServerType.value">
+			<SearchSidebarFilter
+				v-for="filterType in ctx.serverFilterTypes.value.filter((f) => f.options.length > 0)"
+				:key="`server-filter-${filterType.id}`"
+				v-model:selected-filters="ctx.serverCurrentFilters.value"
+				v-model:toggled-groups="ctx.serverToggledGroups.value"
+				:provided-filters="[]"
+				:filter-type="filterType"
+				:class="filterClass"
+				:button-class="buttonClass"
+				:content-class="contentClass"
+				:inner-panel-class="innerPanelClass"
+				:open-by-default="getFilterOpenByDefault(filterType.id)"
+			>
+				<template #header>
+					<h3 :class="isApp ? 'text-base m-0' : 'm-0 text-lg'">
+						{{ filterType.formatted_name }}
+					</h3>
+				</template>
+			</SearchSidebarFilter>
+		</template>
+		<template v-else>
+			<SearchSidebarFilter
+				v-for="filter in ctx.filters.value.filter((f) => f.display !== 'none')"
+				:key="`filter-${filter.id}`"
+				v-model:selected-filters="ctx.currentFilters.value"
+				v-model:toggled-groups="ctx.toggledGroups.value"
+				v-model:overridden-provided-filter-types="ctx.overriddenProvidedFilterTypes.value"
+				:provided-filters="ctx.providedFilters?.value ?? []"
+				:filter-type="filter"
+				:class="filterClass"
+				:button-class="buttonClass"
+				:content-class="contentClass"
+				:inner-panel-class="innerPanelClass"
+				:open-by-default="getFilterOpenByDefault(filter.id)"
+			>
+				<template #header>
+					<h3 :class="isApp ? 'text-base m-0' : 'm-0 text-lg'">
+						{{ filter.formatted_name }}
+					</h3>
+				</template>
+				<template
+					v-if="
+						lockedMessages?.gameVersionShaderMessage &&
+						ctx.projectType.value === 'shader' &&
+						filter.id === 'game_version'
+					"
+					#prefix
+				>
+					<div class="mb-4 grid grid-cols-[auto_1fr] gap-2 px-3 text-sm font-medium text-blue">
+						<InfoIcon class="mt-1 size-4" />
+						<span>{{ lockedMessages.gameVersionShaderMessage }}</span>
+					</div>
+				</template>
+				<template v-if="lockedMessages?.gameVersion" #locked-game_version>
+					{{ lockedMessages.gameVersion }}
+				</template>
+				<template v-if="lockedMessages?.modLoader" #locked-mod_loader>
+					{{ lockedMessages.modLoader }}
+				</template>
+				<template v-if="lockedMessages?.environment" #locked-environment>
+					{{ lockedMessages.environment }}
+				</template>
+				<template v-if="lockedMessages?.syncButton" #sync-button>
+					{{ lockedMessages.syncButton }}
+				</template>
+			</SearchSidebarFilter>
+		</template>
+	</div>
+</template>
diff --git a/packages/ui/src/layouts/shared/browse-tab/types.ts b/packages/ui/src/layouts/shared/browse-tab/types.ts
new file mode 100644
index 0000000000..2ab81f8206
--- /dev/null
+++ b/packages/ui/src/layouts/shared/browse-tab/types.ts
@@ -0,0 +1,46 @@
+import type { Labrinth } from '@modrinth/api-client'
+import type { Component } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+
+export interface BrowseSearchResponse {
+	projectHits: (Labrinth.Search.v2.ResultSearchProject & {
+		installed?: boolean
+		installing?: boolean
+	})[]
+	serverHits: Labrinth.Search.v3.ResultSearchProject[]
+	total_hits: number
+	per_page: number
+}
+
+export interface BrowseInstallContext {
+	name: string
+	loader: string
+	gameVersion: string
+	serverId?: string | null
+	upstream?: { project_id?: string | null } | null
+	iconSrc?: string | null
+	isMedal?: boolean
+	backUrl: string | RouteLocationRaw
+	backLabel: string
+	heading: string
+	warning?: string
+}
+
+export interface CardAction {
+	key: string
+	label: string
+	icon: Component
+	disabled?: boolean
+	color?: 'brand' | 'red'
+	type?: 'standard' | 'outlined' | 'transparent'
+	circular?: boolean
+	tooltip?: string
+	onClick: () => void | Promise<void>
+}
+
+export interface ServerModpackContent {
+	name: string
+	icon?: string
+	onclick?: () => void
+	showCustomModpackTooltip: boolean
+}
diff --git a/packages/ui/src/layouts/shared/console/components/ConsoleActionButtons.vue b/packages/ui/src/layouts/shared/console/components/ConsoleActionButtons.vue
new file mode 100644
index 0000000000..de055664a7
--- /dev/null
+++ b/packages/ui/src/layouts/shared/console/components/ConsoleActionButtons.vue
@@ -0,0 +1,38 @@
+<template>
+	<div class="flex items-center gap-0.5">
+		<ButtonStyled type="transparent" circular hover-color-fill="none">
+			<button @click="emit('clear')">
+				<XIcon />
+				Clear
+			</button>
+		</ButtonStyled>
+		<ButtonStyled type="transparent" circular hover-color-fill="none">
+			<button :disabled="shareDisabled" @click="emit('share')">
+				<ShareIcon />
+				Share
+			</button>
+		</ButtonStyled>
+		<ButtonStyled type="transparent" circular hover-color-fill="none">
+			<button @click="emit('expand')">
+				<ExpandIcon />
+				Expand
+			</button>
+		</ButtonStyled>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ExpandIcon, ShareIcon, XIcon } from '@modrinth/assets'
+
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+
+defineProps<{
+	shareDisabled?: boolean
+}>()
+
+const emit = defineEmits<{
+	clear: []
+	share: []
+	expand: []
+}>()
+</script>
diff --git a/packages/ui/src/layouts/shared/console/components/ConsoleFilterPills.vue b/packages/ui/src/layouts/shared/console/components/ConsoleFilterPills.vue
new file mode 100644
index 0000000000..9af350b094
--- /dev/null
+++ b/packages/ui/src/layouts/shared/console/components/ConsoleFilterPills.vue
@@ -0,0 +1,49 @@
+<template>
+	<FilterPills v-model="selectedFilters" :options="pillOptions">
+		<template #all> All </template>
+	</FilterPills>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import FilterPills from '#ui/components/base/FilterPills.vue'
+
+import type { LogLevel } from '../types'
+
+type FilterValue = LogLevel | 'all'
+
+const LOG_LEVEL_OPTIONS: Array<{ id: LogLevel; label: string }> = [
+	{ id: 'error', label: 'Error' },
+	{ id: 'warn', label: 'Warn' },
+	{ id: 'info', label: 'Info' },
+	{ id: 'debug', label: 'Debug' },
+	{ id: 'trace', label: 'Trace' },
+]
+
+const modelValue = defineModel<Set<FilterValue>>({ required: true })
+
+const emit = defineEmits<{
+	toggle: [value: FilterValue]
+}>()
+
+const pillOptions = LOG_LEVEL_OPTIONS
+
+const selectedFilters = computed({
+	get() {
+		if (modelValue.value.has('all')) return []
+		return [...modelValue.value] as string[]
+	},
+	set(ids: string[]) {
+		if (ids.length === 0) {
+			emit('toggle', 'all')
+		} else {
+			const current = selectedFilters.value
+			const added = ids.find((id) => !current.includes(id))
+			const removed = current.find((id) => !ids.includes(id))
+			if (added) emit('toggle', added as FilterValue)
+			if (removed) emit('toggle', removed as FilterValue)
+		}
+	},
+})
+</script>
diff --git a/packages/ui/src/layouts/shared/console/composables/console-filtering.ts b/packages/ui/src/layouts/shared/console/composables/console-filtering.ts
new file mode 100644
index 0000000000..b0b1e7064b
--- /dev/null
+++ b/packages/ui/src/layouts/shared/console/composables/console-filtering.ts
@@ -0,0 +1,58 @@
+import type { Terminal } from '@xterm/xterm'
+import { ref } from 'vue'
+
+import type { LogLevel } from '../types'
+import { detectLogLevel } from './log-level'
+
+export type FilterPredicate = (lineText: string) => boolean
+
+export function useConsoleFilters() {
+	const activeFilters = ref<Set<LogLevel | 'all'>>(new Set(['all']))
+
+	function toggleFilter(level: LogLevel | 'all') {
+		const next = new Set(activeFilters.value)
+		if (level === 'all') {
+			next.clear()
+			next.add('all')
+		} else {
+			next.delete('all')
+			if (next.has(level)) {
+				next.delete(level)
+			} else {
+				next.add(level)
+			}
+			if (next.size === 0) {
+				next.add('all')
+			}
+		}
+		activeFilters.value = next
+	}
+
+	function buildFilterPredicate(): FilterPredicate | null {
+		if (activeFilters.value.has('all')) return null
+		const allowed = activeFilters.value
+		return (line: string) => {
+			const level = detectLogLevel(line)
+			if (level === null) return true
+			return allowed.has(level)
+		}
+	}
+
+	return { activeFilters, toggleFilter, buildFilterPredicate }
+}
+
+export function rewriteTerminal(
+	terminal: Terminal,
+	allLines: string[],
+	predicate: FilterPredicate | null,
+) {
+	terminal.reset()
+	terminal.write('\x1b[?25l')
+
+	const filtered = predicate ? allLines.filter(predicate) : allLines
+	if (filtered.length === 0) return
+
+	terminal.write('\x1b[?2026h')
+	terminal.write(filtered.join('\r\n'))
+	terminal.write('\x1b[?2026l')
+}
diff --git a/packages/ui/src/layouts/shared/console/composables/index.ts b/packages/ui/src/layouts/shared/console/composables/index.ts
new file mode 100644
index 0000000000..af242b3171
--- /dev/null
+++ b/packages/ui/src/layouts/shared/console/composables/index.ts
@@ -0,0 +1,2 @@
+export { type FilterPredicate, rewriteTerminal, useConsoleFilters } from './console-filtering'
+export { detectLogLevel } from './log-level'
diff --git a/packages/ui/src/layouts/shared/console/composables/log-level.ts b/packages/ui/src/layouts/shared/console/composables/log-level.ts
new file mode 100644
index 0000000000..ef93a5ee64
--- /dev/null
+++ b/packages/ui/src/layouts/shared/console/composables/log-level.ts
@@ -0,0 +1,14 @@
+import type { LogLevel } from '../types'
+
+const ERROR_TRIGGERS = ['/ERROR', 'Exception:', ':?]', 'Error', '[thread', '\tat']
+
+export function detectLogLevel(lineText: string): LogLevel | null {
+	if (lineText.includes('/INFO') || lineText.includes('[System] [CHAT]')) return 'info'
+	if (lineText.includes('/WARN')) return 'warn'
+	if (lineText.includes('/DEBUG')) return 'debug'
+	if (lineText.includes('/TRACE')) return 'trace'
+	for (const trigger of ERROR_TRIGGERS) {
+		if (lineText.includes(trigger)) return 'error'
+	}
+	return null
+}
diff --git a/packages/ui/src/layouts/shared/console/index.ts b/packages/ui/src/layouts/shared/console/index.ts
new file mode 100644
index 0000000000..8739d8089b
--- /dev/null
+++ b/packages/ui/src/layouts/shared/console/index.ts
@@ -0,0 +1,3 @@
+export { default as ConsolePageLayout } from './layout.vue'
+export * from './providers'
+export * from './types'
diff --git a/packages/ui/src/layouts/shared/console/layout.vue b/packages/ui/src/layouts/shared/console/layout.vue
new file mode 100644
index 0000000000..5222c9463e
--- /dev/null
+++ b/packages/ui/src/layouts/shared/console/layout.vue
@@ -0,0 +1,214 @@
+<template>
+	<div
+		class="flex min-h-0 flex-col"
+		:class="isFullscreen ? 'fixed inset-0 z-50 bg-surface-1 p-6 pt-12' : 'gap-4'"
+	>
+		<template v-if="!isFullscreen">
+			<div class="flex items-center gap-2">
+				<StyledInput
+					v-model="searchQuery"
+					:icon="SearchIcon"
+					placeholder="Search logs"
+					wrapper-class="flex-1"
+					input-class="!h-10"
+					clearable
+				/>
+				<DropdownSelect
+					v-if="ctx.logSources?.value && ctx.activeLogSourceIndex"
+					:model-value="ctx.logSources.value[ctx.activeLogSourceIndex.value]?.name"
+					:options="ctx.logSources.value.map((s) => s.name)"
+					name="log-source"
+					class="w-[220px]"
+					@update:model-value="handleLogSourceChange"
+				/>
+			</div>
+
+			<div class="flex items-center justify-between">
+				<ConsoleFilterPills v-model="activeFilters" @toggle="handleFilterToggle" />
+				<ConsoleActionButtons
+					:share-disabled="resolvedShareDisabled"
+					@clear="handleClear"
+					@share="handleShare"
+					@expand="enterFullscreen"
+				/>
+			</div>
+		</template>
+
+		<BaseTerminal
+			ref="terminalRef"
+			class="min-h-0"
+			:class="{ 'flex-1 my-auto': isFullscreen }"
+			:show-input="resolvedShowInput"
+			:fullscreen="isFullscreen"
+			@command="handleCommand"
+			@ready="handleTerminalReady"
+			@exit-fullscreen="exitFullscreen"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { SearchIcon } from '@modrinth/assets'
+import type { Terminal } from '@xterm/xterm'
+import { computed, isRef, nextTick, onBeforeUnmount, ref, watch } from 'vue'
+
+import BaseTerminal from '#ui/components/base/BaseTerminal.vue'
+import DropdownSelect from '#ui/components/base/DropdownSelect.vue'
+import StyledInput from '#ui/components/base/StyledInput.vue'
+import { injectModalBehavior } from '#ui/providers/modal-behavior'
+
+import ConsoleActionButtons from './components/ConsoleActionButtons.vue'
+import ConsoleFilterPills from './components/ConsoleFilterPills.vue'
+import { rewriteTerminal, useConsoleFilters } from './composables'
+import { injectConsoleManager } from './providers'
+import type { LogLevel } from './types'
+
+const ctx = injectConsoleManager()
+const modalBehavior = injectModalBehavior()
+
+const terminalRef = ref<InstanceType<typeof BaseTerminal> | null>(null)
+const searchQuery = ref('')
+const isFullscreen = ref(false)
+const { activeFilters, toggleFilter, buildFilterPredicate } = useConsoleFilters()
+
+onBeforeUnmount(() => {
+	if (isFullscreen.value) {
+		document.body.style.overflow = ''
+		modalBehavior?.onHide?.()
+	}
+})
+
+let lastWrittenIndex = 0
+let searchDebounce: ReturnType<typeof setTimeout> | null = null
+
+const resolvedShowInput = computed(() => {
+	const v = ctx.showCommandInput
+	if (v === undefined) return false
+	if (typeof v === 'boolean') return v
+	return isRef(v) ? v.value : v
+})
+
+const resolvedShareDisabled = computed(() => {
+	const v = ctx.shareDisabled
+	if (!v) return false
+	return isRef(v) ? v.value : v
+})
+
+function handleTerminalReady(_terminal: Terminal) {
+	writeAllLines()
+}
+
+function handleFilterToggle(value: LogLevel | 'all') {
+	toggleFilter(value)
+	rewriteFiltered()
+}
+
+function rewriteFiltered() {
+	const term = terminalRef.value?.terminal
+	if (!term) return
+	const predicate = buildFilterPredicate()
+	rewriteTerminal(term, ctx.logLines.value, predicate)
+	lastWrittenIndex = ctx.logLines.value.length
+}
+
+function enterFullscreen() {
+	isFullscreen.value = true
+	document.body.style.overflow = 'hidden'
+	modalBehavior?.onShow?.()
+	nextTick(() => {
+		terminalRef.value?.fit()
+	})
+}
+
+function exitFullscreen() {
+	isFullscreen.value = false
+	document.body.style.overflow = ''
+	modalBehavior?.onHide?.()
+	nextTick(() => {
+		terminalRef.value?.fit()
+	})
+}
+
+function writeAllLines() {
+	const term = terminalRef.value?.terminal
+	if (!term) return
+	const predicate = buildFilterPredicate()
+	rewriteTerminal(term, ctx.logLines.value, predicate)
+	lastWrittenIndex = ctx.logLines.value.length
+}
+
+watch(
+	() => ctx.logLines.value,
+	(lines, oldLines) => {
+		const term = terminalRef.value?.terminal
+		if (!term) return
+
+		if (lines !== oldLines || lines.length < lastWrittenIndex) {
+			rewriteFiltered()
+			return
+		}
+
+		const predicate = buildFilterPredicate()
+		for (let i = lastWrittenIndex; i < lines.length; i++) {
+			if (!predicate || predicate(lines[i])) {
+				terminalRef.value?.writeln(lines[i])
+			}
+		}
+		lastWrittenIndex = lines.length
+	},
+	{ deep: true },
+)
+
+watch(searchQuery, (query) => {
+	if (searchDebounce) clearTimeout(searchDebounce)
+	searchDebounce = setTimeout(() => {
+		const addon = terminalRef.value?.searchAddon
+		if (!addon) return
+		if (query) {
+			addon.findNext(query, {
+				decorations: { activeMatchColorOverviewRuler: '#ffffff', matchOverviewRuler: '#888888' },
+			})
+		} else {
+			addon.clearDecorations()
+		}
+	}, 200)
+})
+
+function handleCommand(cmd: string) {
+	ctx.sendCommand?.(cmd)
+}
+
+function handleClear() {
+	terminalRef.value?.reset()
+	lastWrittenIndex = 0
+	ctx.onClear?.()
+}
+
+async function handleShare() {
+	const predicate = buildFilterPredicate()
+	const lines = predicate ? ctx.logLines.value.filter(predicate) : ctx.logLines.value
+	const content = lines.join('\n')
+
+	try {
+		const res = await fetch('https://api.mclo.gs/1/log', {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+			body: new URLSearchParams({ content }),
+		})
+		const data = await res.json()
+		if (data.url) {
+			window.open(data.url, '_blank')
+		}
+	} catch (err) {
+		console.error('Failed to share logs:', err)
+	}
+}
+
+function handleLogSourceChange(name: string) {
+	if (!ctx.logSources?.value || !ctx.activeLogSourceIndex) return
+	const idx = ctx.logSources.value.findIndex((s) => s.name === name)
+	if (idx >= 0) {
+		ctx.activeLogSourceIndex.value = idx
+	}
+}
+</script>
diff --git a/packages/ui/src/layouts/shared/console/providers/console-manager.ts b/packages/ui/src/layouts/shared/console/providers/console-manager.ts
new file mode 100644
index 0000000000..804cce1dfc
--- /dev/null
+++ b/packages/ui/src/layouts/shared/console/providers/console-manager.ts
@@ -0,0 +1,27 @@
+import type { ComputedRef, Ref } from 'vue'
+
+import { createContext } from '#ui/providers/create-context'
+
+import type { LogSource } from '../types'
+
+export interface ConsoleManagerContext {
+	logLines: Ref<string[]>
+
+	logSources?: ComputedRef<LogSource[]>
+	activeLogSourceIndex?: Ref<number>
+
+	sendCommand?: (cmd: string) => void
+	showCommandInput?: boolean | Ref<boolean> | ComputedRef<boolean>
+
+	loading?: Ref<boolean> | ComputedRef<boolean>
+
+	onClear?: () => void
+	onDelete?: () => Promise<void>
+
+	shareDisabled?: Ref<boolean> | ComputedRef<boolean>
+}
+
+export const [injectConsoleManager, provideConsoleManager] = createContext<ConsoleManagerContext>(
+	'ConsolePageLayout',
+	'consoleManagerContext',
+)
diff --git a/packages/ui/src/layouts/shared/console/providers/index.ts b/packages/ui/src/layouts/shared/console/providers/index.ts
new file mode 100644
index 0000000000..b9e41b2fbe
--- /dev/null
+++ b/packages/ui/src/layouts/shared/console/providers/index.ts
@@ -0,0 +1 @@
+export * from './console-manager'
diff --git a/packages/ui/src/layouts/shared/console/types.ts b/packages/ui/src/layouts/shared/console/types.ts
new file mode 100644
index 0000000000..665e730972
--- /dev/null
+++ b/packages/ui/src/layouts/shared/console/types.ts
@@ -0,0 +1,7 @@
+export type LogLevel = 'error' | 'warn' | 'info' | 'debug' | 'trace'
+
+export interface LogSource {
+	id: string
+	name: string
+	live: boolean
+}
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileOperationAdmonitions.vue b/packages/ui/src/layouts/shared/files-tab/components/FileOperationAdmonitions.vue
index 8a9c666ef0..c34a7465c4 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileOperationAdmonitions.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileOperationAdmonitions.vue
@@ -1,53 +1,4 @@
 <template>
-	<Transition
-		enter-active-class="transition-all duration-300 ease-out overflow-hidden"
-		enter-from-class="opacity-0 max-h-0"
-		enter-to-class="opacity-100 max-h-40"
-		leave-active-class="transition-all duration-200 ease-in overflow-hidden"
-		leave-from-class="opacity-100 max-h-40"
-		leave-to-class="opacity-0 max-h-0"
-	>
-		<Admonition v-if="ctx.uploadState?.value?.isUploading" type="info" class="mb-4">
-			<template #icon>
-				<UploadIcon class="h-6 w-6 flex-none text-brand-blue" />
-			</template>
-			<template #header>
-				{{
-					ctx.uploadingLabel
-						? ctx.uploadingLabel(
-								ctx.uploadState.value.completedFiles,
-								ctx.uploadState.value.totalFiles,
-							)
-						: formatMessage(messages.uploadingFiles, {
-								completed: ctx.uploadState.value.completedFiles,
-								total: ctx.uploadState.value.totalFiles,
-							})
-				}}
-				<span v-if="ctx.uploadState.value.currentFileName" class="font-normal text-secondary">
-					— {{ ctx.uploadState.value.currentFileName }}
-				</span>
-			</template>
-			<span class="text-secondary">
-				{{
-					formatMessage(messages.uploadProgress, {
-						uploaded: formatBytes(ctx.uploadState.value.uploadedBytes),
-						total: formatBytes(ctx.uploadState.value.totalBytes),
-						percent: Math.round(uploadOverallProgress * 100),
-					})
-				}}
-			</span>
-			<template v-if="ctx.cancelUpload" #top-right-actions>
-				<ButtonStyled type="outlined" color="blue">
-					<button class="!border" @click="ctx.cancelUpload?.()">
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-			</template>
-			<template #progress>
-				<ProgressBar :progress="uploadOverallProgress" :max="1" color="blue" full-width />
-			</template>
-		</Admonition>
-	</Transition>
 	<TransitionGroup
 		name="fs-op"
 		enter-active-class="transition-all duration-300 ease-out overflow-hidden"
@@ -89,13 +40,13 @@
 					— {{ op.current_file?.split('/')?.pop() }}
 				</template>
 			</span>
-			<template v-if="op.id && ctx.dismissOperation" #top-right-actions>
+			<template v-if="op.id" #top-right-actions>
 				<ButtonStyled
 					v-if="op.state !== 'done' && !op.state?.startsWith('fail')"
 					type="outlined"
 					color="blue"
 				>
-					<button class="!border" @click="ctx.dismissOperation?.(op.id!, 'cancel')">
+					<button class="!border" @click="ctx.dismissOperation(op.id!, 'cancel')">
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
 				</ButtonStyled>
@@ -106,7 +57,7 @@
 					hover-color-fill="background"
 					:color="op.state === 'done' ? 'green' : 'red'"
 				>
-					<button @click="ctx.dismissOperation?.(op.id!, 'dismiss')">
+					<button @click="ctx.dismissOperation(op.id!, 'dismiss')">
 						<XIcon />
 					</button>
 				</ButtonStyled>
@@ -125,29 +76,19 @@
 </template>
 
 <script setup lang="ts">
-import { PackageOpenIcon, UploadIcon, XIcon } from '@modrinth/assets'
+import { PackageOpenIcon, XIcon } from '@modrinth/assets'
 import { formatBytes } from '@modrinth/utils'
-import { computed } from 'vue'
 
 import Admonition from '#ui/components/base/Admonition.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import ProgressBar from '#ui/components/base/ProgressBar.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { injectModrinthServerContext } from '#ui/providers'
 import { commonMessages } from '#ui/utils/common-messages'
 
-import { injectFileManager } from '../providers/file-manager'
-
 const { formatMessage } = useVIntl()
 
 const messages = defineMessages({
-	uploadingFiles: {
-		id: 'files.operations.uploading-files',
-		defaultMessage: 'Uploading files ({completed}/{total})',
-	},
-	uploadProgress: {
-		id: 'files.operations.upload-progress',
-		defaultMessage: '{uploaded} / {total} ({percent}%)',
-	},
 	extracting: {
 		id: 'files.operations.extracting',
 		defaultMessage: 'Extracting {source}',
@@ -166,13 +107,7 @@ const messages = defineMessages({
 	},
 })
 
-const ctx = injectFileManager()
-
-const activeOperations = computed(() => ctx.activeOperations?.value ?? [])
+const ctx = injectModrinthServerContext()
 
-const uploadOverallProgress = computed(() => {
-	const state = ctx.uploadState?.value
-	if (!state || !state.isUploading || state.totalFiles === 0) return 0
-	return Math.min((state.completedFiles + state.currentFileProgress) / state.totalFiles, 1)
-})
+const activeOperations = ctx.activeOperations
 </script>
diff --git a/packages/ui/src/layouts/shared/files-tab/layout.vue b/packages/ui/src/layouts/shared/files-tab/layout.vue
index 99f418204f..7a5f97feed 100644
--- a/packages/ui/src/layouts/shared/files-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/files-tab/layout.vue
@@ -46,7 +46,6 @@
 				<template #header>{{ ctx.busyWarning.value }}</template>
 				{{ formatMessage(messages.busyWarning) }}
 			</Admonition>
-			<FileOperationAdmonitions />
 			<div class="relative flex w-full flex-col">
 				<div class="relative isolate flex w-full flex-col gap-4">
 					<FileNavbar
@@ -235,7 +234,6 @@ import FileEditor from './components/editor/FileEditor.vue'
 import FileContextMenu from './components/FileContextMenu.vue'
 import FileManagerError from './components/FileManagerError.vue'
 import FileNavbar from './components/FileNavbar.vue'
-import FileOperationAdmonitions from './components/FileOperationAdmonitions.vue'
 import FileTableHeader from './components/FileTableHeader.vue'
 import FileTableRow from './components/FileTableRow.vue'
 import FileCreateItemModal from './components/modals/FileCreateItemModal.vue'
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/advanced.vue b/packages/ui/src/layouts/shared/server-settings/pages/advanced.vue
index 2f44f8f30b..d28cd9650a 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/advanced.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/advanced.vue
@@ -186,7 +186,7 @@
 			</div>
 		</div>
 		<SaveBanner
-			:is-visible="!!hasUnsavedChanges"
+			:is-visible="!!hasUnsavedChanges || isPending"
 			:server-id="serverId"
 			:is-updating="isPending"
 			:save="() => saveStartup()"
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/general.vue b/packages/ui/src/layouts/shared/server-settings/pages/general.vue
index c3a86842a4..d79f65f627 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/general.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/general.vue
@@ -68,38 +68,7 @@
 						</div>
 					</div>
 
-					<!-- Server icon -->
-					<div v-if="!data.is_medal" class="flex flex-col gap-2.5">
-						<span class="text-lg font-semibold text-contrast">Icon</span>
-						<div class="group relative w-fit">
-							<OverflowMenu
-								v-tooltip="'Edit icon'"
-								class="m-0 cursor-pointer appearance-none border-none bg-transparent p-0 transition-transform group-active:scale-95"
-								:options="[
-									{
-										id: 'upload',
-										action: () => triggerFileInput(),
-									},
-									{
-										id: 'sync',
-										action: () => resetIcon(),
-									},
-								]"
-							>
-								<ServerIcon
-									class="size-24 transition-[filter] group-hover:brightness-75"
-									:image="icon"
-								/>
-								<div class="absolute right-0 top-0 m-1">
-									<div class="flex items-center justify-center rounded-full bg-button-bg p-1.5">
-										<EditIcon aria-hidden="true" class="h-4 w-4 text-contrast" />
-									</div>
-								</div>
-								<template #upload> <UploadIcon /> Upload icon </template>
-								<template #sync> <TransferIcon /> Sync icon </template>
-							</OverflowMenu>
-						</div>
-					</div>
+					<EditServerIcon v-if="!data.is_medal" />
 				</div>
 
 				<!-- preferences -->
@@ -130,7 +99,7 @@
 
 				<!-- Info -->
 				<div class="flex flex-col gap-2.5">
-					<div class="text-md m-0 font-semibold text-contrast">Info</div>
+					<div class="text-lg m-0 font-semibold text-contrast">Info</div>
 					<div class="flex flex-col gap-2.5 rounded-xl bg-surface-2 p-4">
 						<div
 							v-for="property in infoProperties"
@@ -148,7 +117,7 @@
 		</div>
 		<div v-else />
 		<SaveBanner
-			:is-visible="!!hasUnsavedChanges && !!isValidServerName"
+			:is-visible="(!!hasUnsavedChanges && !!isValidServerName) || isUpdating"
 			:server-id="serverId"
 			:is-updating="isUpdating || busyReasons.length > 0"
 			:save="saveGeneral"
@@ -158,12 +127,12 @@
 </template>
 
 <script setup lang="ts">
-import { EditIcon, TransferIcon, UploadIcon } from '@modrinth/assets'
 import { useQueryClient } from '@tanstack/vue-query'
 import { useStorage } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 
-import { CopyCode, OverflowMenu, ServerIcon, StyledInput, Toggle } from '#ui/components'
+import { CopyCode, StyledInput, Toggle } from '#ui/components'
+import EditServerIcon from '#ui/components/servers/edit-server-icon/EditServerIcon.vue'
 import SaveBanner from '#ui/components/servers/SaveBanner.vue'
 import {
 	injectModrinthClient,
@@ -173,24 +142,29 @@ import {
 
 const { addNotification } = injectNotificationManager()
 const client = injectModrinthClient()
-const { server, serverId, busyReasons } = injectModrinthServerContext()
+const { server: data, serverId, busyReasons } = injectModrinthServerContext()
 const queryClient = useQueryClient()
 
-const data = server
 const serverName = ref(data.value?.name)
 const serverSubdomain = ref(data.value?.net?.domain ?? '')
+
+watch(data, (newData) => {
+	if (newData) {
+		serverName.value = newData.name
+		serverSubdomain.value = newData.net?.domain ?? ''
+	}
+})
 const isValidLengthSubdomain = computed(() => serverSubdomain.value.length >= 5)
 const isValidCharsSubdomain = computed(
 	() => !serverSubdomain.value || /^[a-zA-Z0-9-]+$/.test(serverSubdomain.value),
 )
 const isValidSubdomain = computed(() => isValidLengthSubdomain.value && isValidCharsSubdomain.value)
-const icon = ref<string | undefined>(undefined)
 
 const isUpdating = ref(false)
 const isValidServerName = computed(() => (serverName.value?.length ?? 0) > 0)
 
-watch(serverName, (oldValue) => {
-	if (!isValidServerName.value) {
+watch(serverName, (newValue, oldValue) => {
+	if (!(newValue?.length ?? 0)) {
 		serverName.value = oldValue
 	}
 })
@@ -292,8 +266,9 @@ const saveGeneral = async () => {
 		// Save preferences to localStorage
 		userPreferences.value = { ...newUserPreferences.value }
 
-		await new Promise((resolve) => setTimeout(resolve, 500))
-		await queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] })
+		await queryClient.invalidateQueries({
+			queryKey: ['servers', 'detail', serverId],
+		})
 		addNotification({
 			type: 'success',
 			title: 'Server settings updated',
@@ -316,111 +291,4 @@ const resetGeneral = () => {
 	serverSubdomain.value = data.value?.net?.domain ?? ''
 	newUserPreferences.value = { ...userPreferences.value }
 }
-
-const uploadFile = async (e: Event) => {
-	const file = (e.target as HTMLInputElement).files?.[0]
-	if (!file) {
-		addNotification({
-			type: 'error',
-			title: 'No file selected',
-			text: 'Please select a file to upload.',
-		})
-		return
-	}
-
-	const scaledFile = await new Promise<File>((resolve, reject) => {
-		const canvas = document.createElement('canvas')
-		const ctx = canvas.getContext('2d')
-		const img = new Image()
-		img.onload = () => {
-			canvas.width = 64
-			canvas.height = 64
-			ctx?.drawImage(img, 0, 0, 64, 64)
-			canvas.toBlob((blob) => {
-				if (blob) {
-					resolve(new File([blob], 'server-icon.png', { type: 'image/png' }))
-				} else {
-					reject(new Error('Canvas toBlob failed'))
-				}
-			}, 'image/png')
-			URL.revokeObjectURL(img.src)
-		}
-		img.onerror = reject
-		img.src = URL.createObjectURL(file)
-	})
-
-	try {
-		if (icon.value) {
-			await client.kyros.files_v0.deleteFileOrFolder('/server-icon.png', false)
-			await client.kyros.files_v0.deleteFileOrFolder('/server-icon-original.png', false)
-		}
-
-		await client.kyros.files_v0.uploadFile('/server-icon.png', scaledFile).promise
-		await client.kyros.files_v0.uploadFile('/server-icon-original.png', file).promise
-
-		const canvas = document.createElement('canvas')
-		const ctx = canvas.getContext('2d')
-		const img = new Image()
-		await new Promise<void>((resolve) => {
-			img.onload = () => {
-				canvas.width = 512
-				canvas.height = 512
-				ctx?.drawImage(img, 0, 0, 512, 512)
-				const dataURL = canvas.toDataURL('image/png')
-				icon.value = dataURL
-				resolve()
-				URL.revokeObjectURL(img.src)
-			}
-			img.src = URL.createObjectURL(file)
-		})
-
-		addNotification({
-			type: 'success',
-			title: 'Server icon updated',
-			text: 'Your server icon was successfully changed.',
-		})
-	} catch (error) {
-		console.error('Error uploading icon:', error)
-		addNotification({
-			type: 'error',
-			title: 'Upload failed',
-			text: 'Failed to upload server icon.',
-		})
-	}
-}
-
-const resetIcon = async () => {
-	if (icon.value) {
-		try {
-			await client.kyros.files_v0.deleteFileOrFolder('/server-icon.png', false)
-			await client.kyros.files_v0.deleteFileOrFolder('/server-icon-original.png', false)
-
-			icon.value = undefined
-
-			await queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] })
-
-			addNotification({
-				type: 'success',
-				title: 'Server icon reset',
-				text: 'Your server icon was successfully reset.',
-			})
-		} catch (error) {
-			console.error('Error resetting icon:', error)
-			addNotification({
-				type: 'error',
-				title: 'Reset failed',
-				text: 'Failed to reset server icon.',
-			})
-		}
-	}
-}
-
-const triggerFileInput = () => {
-	const input = document.createElement('input')
-	input.type = 'file'
-	input.id = 'server-icon-field'
-	input.accept = 'image/png,image/jpeg,image/gif,image/webp'
-	input.onchange = uploadFile
-	input.click()
-}
 </script>
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 ea8ac8b096..ef45e09fe4 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/installation.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/installation.vue
@@ -29,11 +29,15 @@
 			</template>
 
 			<template #extra-modals>
-				<ServerSetupModal
-					ref="setupModal"
-					@reinstall="onReinstall"
-					@browse-modpacks="onBrowseModpacks"
-				/>
+				<Teleport to="body">
+					<div class="relative z-[100]">
+						<ServerSetupModal
+							ref="setupModal"
+							@reinstall="onReinstall"
+							@browse-modpacks="onBrowseModpacks"
+						/>
+					</div>
+				</Teleport>
 			</template>
 		</InstallationSettingsLayout>
 
@@ -167,7 +171,7 @@ const messages = defineMessages({
 })
 
 const emit = defineEmits<{
-	reinstall: [any?]
+	reinstall: [unknown?]
 	'reinstall-failed': []
 }>()
 
@@ -766,9 +770,10 @@ watch(
 	},
 )
 
-function onReinstall(event?: any) {
+function onReinstall(event?: unknown) {
 	installationSettingsLayout.value?.cancelEditing()
 	emit('reinstall', event)
+	serverSettings.closeModal?.()
 }
 
 function onBrowseModpacks() {
@@ -796,6 +801,7 @@ async function confirmResetToOnboarding() {
 			title: formatMessage(messages.resetToOnboardingSuccessTitle),
 			text: formatMessage(messages.resetToOnboardingSuccessDescription),
 		})
+		serverSettings.closeModal?.()
 	} catch (err) {
 		addNotification({
 			type: 'error',
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/network.vue b/packages/ui/src/layouts/shared/server-settings/pages/network.vue
index 27a49f2ed6..664c46af71 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/network.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/network.vue
@@ -1,36 +1,12 @@
 <template>
 	<div>
-		<NewModal ref="newAllocationModal" header="New allocation" width="550px">
-			<form class="flex w-full flex-col gap-2" @submit.prevent="addNewAllocation">
-				<label for="new-allocation-name" class="font-semibold text-contrast"> Name </label>
-				<StyledInput
-					id="new-allocation-name"
-					ref="newAllocationInput"
-					v-model="newAllocationName"
-					wrapper-class="w-full"
-					:maxlength="32"
-					placeholder="e.g. Secondary allocation"
-				/>
-				<div class="mb-1 mt-4 flex justify-end gap-2.5">
-					<ButtonStyled>
-						<button @click="newAllocationModal?.hide()">Cancel</button>
-					</ButtonStyled>
-					<ButtonStyled color="brand">
-						<button :disabled="!newAllocationName" type="submit">
-							<PlusIcon /> Create allocation
-						</button>
-					</ButtonStyled>
-				</div>
-			</form>
-		</NewModal>
-
 		<NewModal ref="editAllocationModal" header="Edit allocation" width="550px">
 			<form class="flex w-full flex-col gap-2" @submit.prevent="editAllocation">
 				<label for="edit-allocation-name" class="font-semibold text-contrast"> Name </label>
 				<StyledInput
 					id="edit-allocation-name"
 					ref="editAllocationInput"
-					v-model="newAllocationName"
+					v-model="editAllocationName"
 					wrapper-class="w-full"
 					:maxlength="32"
 					placeholder="e.g. Secondary allocation"
@@ -40,7 +16,7 @@
 						<button @click="editAllocationModal?.hide()">Cancel</button>
 					</ButtonStyled>
 					<ButtonStyled color="brand">
-						<button :disabled="!newAllocationName" type="submit">
+						<button :disabled="!editAllocationName || creatingAllocation" type="submit">
 							<SaveIcon /> Update allocation
 						</button>
 					</ButtonStyled>
@@ -89,16 +65,20 @@
 
 						<div class="flex w-full flex-col items-center justify-start gap-2 sm:flex-row">
 							<StyledInput
-								v-model="allocationSearch"
+								v-model="createAllocationName"
 								wrapper-class="grow max-w-[400px]"
-								:maxlength="64"
-								placeholder="Port name (e.g., Dynmap)"
+								:maxlength="32"
+								placeholder="e.g. Secondary allocation"
 							/>
 
-							<ButtonStyled color="brand" @click="showNewAllocationModal">
-								<button class="!w-full max-w-20">
+							<ButtonStyled color="brand">
+								<button
+									v-tooltip="!createAllocationName ? 'Enter a name to create an allocation' : ''"
+									:disabled="!createAllocationName || creatingAllocation"
+									@click="addNewAllocation"
+								>
 									<PlusIcon />
-									<span>Add</span>
+									<span>Create allocation</span>
 								</button>
 							</ButtonStyled>
 						</div>
@@ -259,8 +239,6 @@ const allocationColumns: TableColumn[] = [
 	{ key: 'actions', label: 'Actions', width: '33%', align: 'right' },
 ]
 
-const allocationSearch = ref('')
-
 const allocationRows = computed(() => {
 	const primary = {
 		name: 'Primary allocation',
@@ -272,12 +250,7 @@ const allocationRows = computed(() => {
 		port: a.port,
 		primary: false,
 	}))
-	const all = [primary, ...extra]
-	const query = allocationSearch.value.toLowerCase().trim()
-	if (!query) return all
-	return all.filter(
-		(row) => row.name.toLowerCase().includes(query) || String(row.port).includes(query),
-	)
+	return [primary, ...extra]
 })
 
 const dnsColumns: TableColumn[] = [
@@ -286,24 +259,24 @@ const dnsColumns: TableColumn[] = [
 	{ key: 'content', label: 'Content' },
 ]
 
-const newAllocationModal = ref<typeof NewModal>()
 const editAllocationModal = ref<typeof NewModal>()
 const confirmDeleteModal = ref<typeof ConfirmModal>()
-const newAllocationInput = ref<HTMLInputElement | null>(null)
 const editAllocationInput = ref<HTMLInputElement | null>(null)
-const newAllocationName = ref('')
+const createAllocationName = ref('')
+const editAllocationName = ref('')
 const newAllocationPort = ref(0)
 const allocationToDelete = ref<number | null>(null)
+const creatingAllocation = ref(false)
 
 const addNewAllocation = async () => {
-	if (!newAllocationName.value) return
+	if (!createAllocationName.value) return
+	creatingAllocation.value = true
 
 	try {
-		await client.archon.servers_v0.reserveAllocation(serverId, newAllocationName.value)
+		await client.archon.servers_v0.reserveAllocation(serverId, createAllocationName.value)
 		await queryClient.invalidateQueries({ queryKey: ['servers', 'allocations', serverId] })
 
-		newAllocationModal.value?.hide()
-		newAllocationName.value = ''
+		createAllocationName.value = ''
 
 		addNotification({
 			type: 'success',
@@ -312,21 +285,14 @@ const addNewAllocation = async () => {
 		})
 	} catch (error) {
 		console.error('Failed to reserve new allocation:', error)
+	} finally {
+		creatingAllocation.value = false
 	}
 }
 
-const showNewAllocationModal = () => {
-	newAllocationName.value = ''
-	newAllocationModal.value?.show()
-	nextTick(() => {
-		setTimeout(() => {
-			newAllocationInput.value?.focus()
-		}, 100)
-	})
-}
-
 const showEditAllocationModal = (port: number) => {
 	newAllocationPort.value = port
+	editAllocationName.value = allocations.value?.find((a) => a.port === port)?.name ?? ''
 	editAllocationModal.value?.show()
 	nextTick(() => {
 		setTimeout(() => {
@@ -356,18 +322,19 @@ const confirmDeleteAllocation = async () => {
 }
 
 const editAllocation = async () => {
-	if (!newAllocationName.value) return
+	if (!editAllocationName.value) return
+	creatingAllocation.value = true
 
 	try {
 		await client.archon.servers_v0.updateAllocation(
 			serverId,
 			newAllocationPort.value,
-			newAllocationName.value,
+			editAllocationName.value,
 		)
 		await queryClient.invalidateQueries({ queryKey: ['servers', 'allocations', serverId] })
 
 		editAllocationModal.value?.hide()
-		newAllocationName.value = ''
+		editAllocationName.value = ''
 
 		addNotification({
 			type: 'success',
@@ -376,6 +343,8 @@ const editAllocation = async () => {
 		})
 	} catch (error) {
 		console.error('Failed to reserve new allocation:', error)
+	} finally {
+		creatingAllocation.value = false
 	}
 }
 
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 1e77179214..631515c74d 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="relative h-full w-full select-none">
+	<div class="relative h-screen w-full select-none max-h-[min(70vh,750px)]">
 		<div v-if="propsData" class="flex h-full w-full flex-col justify-between gap-4">
 			<Admonition
 				v-if="hasNoProperties"
@@ -10,8 +10,15 @@
 			<div class="flex flex-col gap-4">
 				<div class="flex flex-col gap-2">
 					<div class="m-0">
-						Edit the Minecraft server properties file here, or use the Files tab to edit the full
-						file. If you're unsure about a setting, the
+						Edit the Minecraft server properties file here, or use the
+						<AutoLink
+							class="goto-link !inline-block"
+							:to="filesTabLink"
+							@click="onFilesTabLinkClick"
+						>
+							Files tab
+						</AutoLink>
+						to edit the full file. If you're unsure about a setting, the
 						<AutoLink
 							class="goto-link !inline-block"
 							to="https://minecraft.wiki/w/Server.properties"
@@ -43,8 +50,8 @@
 					<div
 						class="rounded-2xl border border-solid border-surface-5 p-4 [&:not(:has(*:not(:empty)))]:hidden"
 					>
-						<div class="flex w-full flex-col gap-4 min-[1100px]:max-w-[600px]">
-							<div v-if="isPropertyVisible('gamemode')" class="flex flex-col gap-2">
+						<div class="flex w-full flex-col gap-1.5">
+							<div v-if="isPropertyVisible('gamemode')" class="flex flex-col gap-2 my-1">
 								<span class="font-semibold text-contrast">Gamemode</span>
 								<Chips
 									v-model="combinedGamemode"
@@ -55,7 +62,7 @@
 
 							<div
 								v-if="combinedGamemode !== 'hardcore' && isPropertyVisible('difficulty')"
-								class="flex flex-col gap-2"
+								class="flex flex-col gap-2 my-1"
 							>
 								<span class="font-semibold text-contrast">Difficulty</span>
 								<Chips
@@ -65,31 +72,31 @@
 								/>
 							</div>
 
-							<div v-if="isPropertyVisible('max_players')" class="flex flex-col gap-2">
+							<div v-if="isPropertyVisible('max_players')" class="flex flex-col gap-2 my-1">
 								<span class="font-semibold text-contrast">Max players</span>
 								<StyledInput
 									id="server-property-max-players"
 									:model-value="liveProperties.max_players"
 									type="number"
 									placeholder="20"
-									wrapper-class="w-full"
+									wrapper-class="w-full max-w-[450px]"
 									@update:model-value="liveProperties.max_players = String($event)"
 								/>
 							</div>
 
-							<div v-if="isPropertyVisible('motd')" class="flex flex-col gap-2">
+							<div v-if="isPropertyVisible('motd')" class="flex flex-col gap-2 my-1">
 								<span class="font-semibold text-contrast">MOTD</span>
 								<StyledInput
 									id="server-property-motd"
 									v-model="liveProperties.motd"
 									placeholder="A Minecraft Server"
-									wrapper-class="w-full"
+									wrapper-class="w-full max-w-[450px]"
 								/>
 							</div>
 
 							<div
 								v-if="isPropertyVisible('allow_flight')"
-								class="flex flex-row items-center justify-between gap-4"
+								class="flex flex-row items-center justify-between gap-4 h-10"
 							>
 								<span class="font-semibold text-contrast">Allow flight</span>
 								<Toggle
@@ -101,7 +108,7 @@
 
 							<div
 								v-if="isPropertyVisible('allow_cheats')"
-								class="flex flex-row items-center justify-between gap-4"
+								class="flex flex-row items-center justify-between gap-4 h-10"
 							>
 								<span class="font-semibold text-contrast">Allow cheats</span>
 								<Toggle
@@ -113,7 +120,7 @@
 
 							<div
 								v-if="isPropertyVisible('white_list')"
-								class="flex flex-row items-center justify-between gap-4"
+								class="flex flex-row items-center justify-between gap-4 h-10"
 							>
 								<span class="font-semibold text-contrast">Enable whitelist</span>
 								<Toggle id="server-property-whitelist" v-model="whitelistEnabled" />
@@ -121,7 +128,7 @@
 
 							<div
 								v-if="isPropertyVisible('spawn_protection')"
-								class="flex flex-row items-center justify-between gap-4"
+								class="flex flex-row items-center justify-between gap-4 h-10"
 							>
 								<span class="font-semibold text-contrast">Enable spawn protection</span>
 								<Toggle
@@ -132,7 +139,7 @@
 
 							<div
 								v-if="spawnProtectionEnabled && isPropertyVisible('spawn_protection')"
-								class="flex items-center justify-between"
+								class="flex items-center justify-between h-10"
 							>
 								<span class="font-semibold text-contrast">Protection radius</span>
 								<StyledInput
@@ -151,6 +158,7 @@
 						v-if="hasVisibleAdvancedProperties"
 						overflow-visible
 						:force-open="isSearchActive"
+						button-class="flex w-full flex-col gap-2 bg-transparent m-0 p-0 border-none"
 					>
 						<template #title>
 							<span class="text-lg font-semibold text-contrast">Advanced properties</span>
@@ -163,18 +171,21 @@
 										{{ group.label }}
 									</h3>
 									<div
-										class="flex flex-col gap-4 rounded-2xl border border-solid border-surface-5 p-4"
+										class="flex flex-col gap-2 rounded-2xl border border-solid border-surface-5 p-4"
 									>
 										<template v-for="key in group.properties" :key="key">
 											<div
 												v-if="isPropertyVisible(key)"
 												class="flex flex-row flex-wrap items-center justify-between h-10"
 											>
-												<span :id="`property-label-${key}`" class="font-semibold">
+												<span :id="`property-label-${key}`" class="font-semibold text-contrast">
 													{{ formatPropertyName(key) }}
 												</span>
 
-												<div v-if="getPropertyDef(key).type === 'toggle'" class="flex justify-end">
+												<div
+													v-if="getPropertyDef(key).type === 'toggle'"
+													class="flex w-full justify-end sm:w-[320px]"
+												>
 													<Toggle
 														:id="`server-property-${key}`"
 														:model-value="liveProperties[key] === 'true'"
@@ -196,7 +207,7 @@
 														@update:model-value="liveProperties[key] = String($event)"
 													/>
 												</div>
-												<div v-else class="mt-2 flex w-full justify-end sm:w-[320px]">
+												<div v-else class="flex w-full justify-end sm:w-[320px]">
 													<StyledInput
 														:id="`server-property-${key}`"
 														v-model="liveProperties[key]"
@@ -210,6 +221,16 @@
 									</div>
 								</div>
 							</template>
+							<div>
+								All other properties can be edited in server.properties via the
+								<AutoLink
+									class="goto-link !inline-block"
+									:to="filesTabLink"
+									@click="onFilesTabLinkClick"
+								>
+									Files tab </AutoLink
+								>.
+							</div>
 						</div>
 					</Accordion>
 
@@ -229,11 +250,15 @@
 		</div>
 
 		<SaveBanner
-			:is-visible="hasUnsavedChanges"
+			:is-visible="hasUnsavedChanges || isUpdating"
 			:server-id="serverId"
 			:is-updating="isUpdating || busyReasons.length > 0"
 			restart
-			:save="() => saveProperties()"
+			:save="
+				async () => {
+					await saveProperties()
+				}
+			"
 			:reset="resetProperties"
 		/>
 	</div>
@@ -248,6 +273,7 @@ import { computed, ref, watch } from 'vue'
 
 import { Accordion, Admonition, AutoLink, Chips, StyledInput, Toggle } from '#ui/components'
 import SaveBanner from '#ui/components/servers/SaveBanner.vue'
+import { injectServerSettings } from '#ui/layouts/shared/server-settings'
 import {
 	injectModrinthClient,
 	injectModrinthServerContext,
@@ -258,9 +284,17 @@ 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 serverSettings = injectServerSettings(null)
 
 const searchInput = ref('')
 
+function onFilesTabLinkClick() {
+	serverSettings?.closeModal?.()
+}
+
 type PropertyDef = { type: 'toggle' } | { type: 'number' } | { type: 'text' }
 
 const KNOWN_PROPERTIES: Record<string, PropertyDef> = {
@@ -346,6 +380,7 @@ function flattenProperties(data: Archon.Content.v1.PropertiesFields): Record<str
 
 const liveProperties = ref<Record<string, string>>({})
 const originalProperties = ref<Record<string, string>>({})
+let previousSpawnProtection = '16'
 
 function syncFormFromData() {
 	if (!propsData.value) return
@@ -380,8 +415,6 @@ watch(powerState, () => {
 	queryClient.invalidateQueries({ queryKey: queryKey.value })
 })
 
-let previousSpawnProtection = '16'
-
 const combinedGamemode = computed<CombinedGamemode>({
 	get() {
 		if (liveProperties.value.hardcore === 'true') return 'hardcore'
@@ -453,7 +486,7 @@ function buildPatch(): Archon.Content.v1.PatchPropertiesFields {
 	return patch
 }
 
-const { mutate: saveProperties, isPending: isUpdating } = useMutation({
+const { mutateAsync: saveProperties, isPending: isUpdating } = useMutation({
 	mutationFn: () =>
 		client.archon.properties_v1.patchProperties(serverId, worldId.value!, buildPatch()),
 	onSuccess: async () => {
diff --git a/packages/ui/src/layouts/shared/server-settings/providers/server-settings.ts b/packages/ui/src/layouts/shared/server-settings/providers/server-settings.ts
index e5bb553ada..8aa29fb8bc 100644
--- a/packages/ui/src/layouts/shared/server-settings/providers/server-settings.ts
+++ b/packages/ui/src/layouts/shared/server-settings/providers/server-settings.ts
@@ -13,6 +13,7 @@ export interface ServerSettingsContext {
 	currentUserId: Ref<string | null>
 	currentUserRole: Ref<string | null>
 	browseModpacks: (args: ServerSettingsBrowseModpacksArgs) => void | Promise<void>
+	closeModal?: () => void
 }
 
 export const [injectServerSettings, provideServerSettings] = createContext<ServerSettingsContext>(
diff --git a/packages/ui/src/layouts/shared/server-settings/tabs.ts b/packages/ui/src/layouts/shared/server-settings/tabs.ts
index 82427d4288..7dcb580245 100644
--- a/packages/ui/src/layouts/shared/server-settings/tabs.ts
+++ b/packages/ui/src/layouts/shared/server-settings/tabs.ts
@@ -31,7 +31,7 @@ export interface ServerSettingsTabDefinition {
 	id: ServerSettingsTabId
 	label: string
 	icon: Component
-	href: (ctx: ServerSettingsTabContext) => string
+	href?: (ctx: ServerSettingsTabContext) => string
 	external?: boolean
 	shown?: (ctx: ServerSettingsTabContext) => boolean
 }
@@ -41,32 +41,27 @@ export const serverSettingsTabDefinitions: ServerSettingsTabDefinition[] = [
 		id: 'general',
 		label: 'General',
 		icon: SettingsIcon,
-		href: ({ serverId }) => `/hosting/manage/${serverId}/options`,
 	},
 	{
 		id: 'installation',
 		label: 'Installation',
 		icon: WrenchIcon,
-		href: ({ serverId }) => `/hosting/manage/${serverId}/options/loader`,
 	},
 	{
 		id: 'network',
 		label: 'Network',
 		icon: VersionIcon,
-		href: ({ serverId }) => `/hosting/manage/${serverId}/options/network`,
 	},
 	{
 		id: 'properties',
 		label: 'Properties',
 		icon: ListIcon,
-		href: ({ serverId }) => `/hosting/manage/${serverId}/options/properties`,
 		shown: ({ serverStatus }) => serverStatus !== 'installing',
 	},
 	{
 		id: 'advanced',
 		label: 'Advanced',
 		icon: TextQuoteIcon,
-		href: ({ serverId }) => `/hosting/manage/${serverId}/options/advanced`,
 	},
 	{
 		id: 'billing',
@@ -85,14 +80,3 @@ export const serverSettingsTabDefinitions: ServerSettingsTabDefinition[] = [
 		shown: ({ isAdmin }) => isAdmin,
 	},
 ]
-
-export function getServerSettingsNavLinks(ctx: ServerSettingsTabContext) {
-	return serverSettingsTabDefinitions.map((tab) => ({
-		id: tab.id,
-		icon: tab.icon,
-		label: tab.label,
-		href: tab.href(ctx),
-		external: tab.external,
-		shown: tab.shown ? tab.shown(ctx) : true,
-	}))
-}
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 1845d070b6..d797fbd119 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/onboarding.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/onboarding.vue
@@ -95,6 +95,19 @@ const route = useRoute()
 const router = useRouter()
 const queryClient = useQueryClient()
 
+const props = withDefaults(
+	defineProps<{
+		browseModpacks?: (args: {
+			serverId: string
+			worldId: string | null
+			from: 'onboarding'
+		}) => void | Promise<void>
+	}>(),
+	{
+		browseModpacks: undefined,
+	},
+)
+
 const modalRef = ref<InstanceType<typeof CreationFlowModal> | null>(null)
 
 const uploading = ref(false)
@@ -109,6 +122,15 @@ const openModal = () => modalRef.value?.show()
 onBeforeUnmount(() => modalRef.value?.hide())
 
 function onBrowseModpacks() {
+	if (props.browseModpacks) {
+		props.browseModpacks({
+			serverId,
+			worldId: worldId.value,
+			from: 'onboarding',
+		})
+		return
+	}
+
 	router.push({
 		path: '/discover/modpacks',
 		query: { sid: serverId, from: 'onboarding', wid: worldId.value },
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/components/ServerManageStats.vue b/packages/ui/src/layouts/wrapped/hosting/manage/components/ServerManageStats.vue
new file mode 100644
index 0000000000..e5f544f02d
--- /dev/null
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/components/ServerManageStats.vue
@@ -0,0 +1,287 @@
+<template>
+	<div
+		data-pyro-server-stats
+		style="font-variant-numeric: tabular-nums"
+		class="flex select-none flex-col items-center gap-4 md:flex-row"
+		:class="{ 'pointer-events-none': loading }"
+		:aria-hidden="loading"
+	>
+		<component
+			:is="metric.link ? RouterLink : 'div'"
+			v-for="(metric, index) in metrics"
+			:key="index"
+			:to="metric.link && !loading ? metric.link : undefined"
+			class="relative isolate min-h-[145px] w-full overflow-hidden rounded-[20px] bg-surface-3 p-5"
+			:class="
+				metric.link && !loading
+					? 'cursor-pointer transition-transform duration-100 hover:brightness-125 active:scale-95'
+					: ''
+			"
+		>
+			<div class="relative z-10 flex flex-col gap-2">
+				<div class="flex items-center justify-between">
+					<span class="stat-drop-shadow flex items-center gap-2 font-medium text-lg text-primary">
+						{{ metric.title }}
+						<IssuesIcon
+							v-if="metric.warning && !loading"
+							v-tooltip="metric.warning"
+							class="size-5"
+							:style="{ color: 'var(--color-orange)' }"
+						/>
+					</span>
+					<span class="relative">
+						<component :is="metric.icon" class="stat-drop-shadow relative z-10 size-8" />
+						<!-- <div
+							class="absolute -right-4 -top-4 -z-10 size-14 rounded-full bg-surface-3 opacity-50 blur-lg"
+						/> -->
+					</span>
+				</div>
+				<span class="stat-drop-shadow text-4xl font-semibold text-contrast">
+					{{ metric.value }}
+				</span>
+				<!-- <div
+					class="absolute -left-8 -top-4 -z-10 h-28 w-56 rounded-full bg-surface-3 opacity-50 blur-lg"
+				/> -->
+			</div>
+
+			<div v-if="metric.showGraph" class="chart-space absolute bottom-0 left-0 right-0">
+				<component
+					:is="apexChartComponent"
+					v-if="!loading && apexChartComponent"
+					type="area"
+					height="142"
+					:options="getChartOptions(metric.warning, index)"
+					:series="[{ name: metric.title, data: metric.data }]"
+					class="chart"
+					:class="chartsReady.has(index) ? 'opacity-100' : 'opacity-0'"
+				/>
+			</div>
+		</component>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { CpuIcon, DatabaseIcon, FolderOpenIcon, IssuesIcon } from '@modrinth/assets'
+import type { Stats } from '@modrinth/utils'
+import { useStorage } from '@vueuse/core'
+import { type Component, computed, onMounted, ref, shallowRef, watch } from 'vue'
+import { RouterLink } from 'vue-router'
+
+import { injectModrinthServerContext } from '#ui/providers'
+
+const { serverId } = injectModrinthServerContext()
+
+const props = withDefaults(
+	defineProps<{
+		data?: Stats
+		loading?: boolean
+		showMemoryAsBytes?: boolean
+	}>(),
+	{
+		data: undefined,
+		loading: false,
+		showMemoryAsBytes: false,
+	},
+)
+
+const apexChartComponent = shallowRef<Component | null>(null)
+const chartsReady = ref(new Set<number>())
+const storageKey = computed(() => `pyro-server-${serverId || 'unknown'}-preferences`)
+const userPreferences = useStorage(storageKey, {
+	ramAsNumber: false,
+})
+
+const stats = shallowRef(
+	props.data?.current || {
+		cpu_percent: 0,
+		ram_usage_bytes: 0,
+		ram_total_bytes: 1,
+		storage_usage_bytes: 0,
+	},
+)
+
+const GRAPH_SIZE = 20
+
+const padGraph = (data: number[]) => {
+	if (data.length >= GRAPH_SIZE) return data.slice(-GRAPH_SIZE)
+	return [...Array(GRAPH_SIZE - data.length).fill(0), ...data]
+}
+
+const cpuData = computed(() => padGraph(props.data?.graph.cpu ?? []))
+const ramData = computed(() => padGraph(props.data?.graph.ram ?? []))
+
+onMounted(async () => {
+	apexChartComponent.value = (await import('vue3-apexcharts')).default
+})
+
+const onChartReady = (index: number) => {
+	chartsReady.value.add(index)
+}
+
+const formatBytes = (bytes: number) => {
+	const units = ['B', 'KB', 'MB', 'GB']
+	let value = bytes
+	let unit = 0
+	while (value >= 1024 && unit < units.length - 1) {
+		value /= 1024
+		unit++
+	}
+	return `${Math.round(value * 10) / 10} ${units[unit]}`
+}
+
+const metrics = computed(() => {
+	const storageMetric = {
+		title: 'Storage',
+		value: props.loading ? '0 B' : formatBytes(stats.value.storage_usage_bytes),
+		icon: FolderOpenIcon,
+		data: [] as number[],
+		showGraph: false,
+		warning: null,
+		link: `/hosting/manage/${encodeURIComponent(serverId)}/files`,
+	}
+
+	if (props.loading) {
+		return [
+			{
+				title: 'CPU',
+				value: '0.00%',
+				icon: CpuIcon,
+				data: cpuData.value,
+				showGraph: true,
+				warning: null,
+				link: null,
+			},
+			{
+				title: 'Memory',
+				value: '0.00%',
+				icon: DatabaseIcon,
+				data: ramData.value,
+				showGraph: true,
+				warning: null,
+				link: null,
+			},
+			storageMetric,
+		]
+	}
+
+	const ramPercent = Math.min(
+		(stats.value.ram_usage_bytes / stats.value.ram_total_bytes) * 100,
+		100,
+	)
+	const cpuPercent = Math.min(stats.value.cpu_percent, 100)
+
+	return [
+		{
+			title: 'CPU',
+			value: `${cpuPercent.toFixed(2)}%`,
+			icon: CpuIcon,
+			data: cpuData.value,
+			showGraph: true,
+			warning: cpuPercent >= 90 ? 'CPU usage is very high' : null,
+			link: null,
+		},
+		{
+			title: 'Memory',
+			value:
+				props.showMemoryAsBytes || userPreferences.value.ramAsNumber
+					? formatBytes(stats.value.ram_usage_bytes)
+					: `${ramPercent.toFixed(2)}%`,
+			icon: DatabaseIcon,
+			data: ramData.value,
+			showGraph: true,
+			warning: ramPercent >= 90 ? 'Memory usage is very high' : null,
+			link: null,
+		},
+		storageMetric,
+	]
+})
+
+const chartOptionsCache = new Map<string, object>()
+
+const getChartOptions = (hasWarning: string | null, index: number) => {
+	const cacheKey = `${index}-${hasWarning ? '1' : '0'}`
+	const cached = chartOptionsCache.get(cacheKey)
+	if (cached) return cached
+
+	const options = {
+		chart: {
+			type: 'area' as const,
+			animations: { enabled: false },
+			sparkline: { enabled: true },
+			toolbar: { show: false },
+			padding: {
+				left: -10,
+				right: -10,
+				top: 0,
+				bottom: 0,
+			},
+			events: {
+				mounted: () => onChartReady(index),
+				updated: () => onChartReady(index),
+			},
+		},
+		stroke: { curve: 'smooth' as const, width: 3 },
+		fill: {
+			type: 'gradient' as const,
+			gradient: {
+				shadeIntensity: 1,
+				opacityFrom: 0.25,
+				opacityTo: 0.05,
+				stops: [0, 100],
+			},
+		},
+		tooltip: { enabled: false },
+		grid: { show: false },
+		xaxis: {
+			labels: { show: false },
+			axisBorder: { show: false },
+			type: 'numeric' as const,
+			tickAmount: 20,
+			range: 20,
+		},
+		yaxis: {
+			show: false,
+			min: 0,
+			max: 100,
+			forceNiceScale: false,
+		},
+		colors: [hasWarning ? 'var(--color-orange)' : 'var(--color-brand)'],
+		dataLabels: {
+			enabled: false,
+		},
+	}
+	chartOptionsCache.set(cacheKey, options)
+	return options
+}
+
+watch(
+	() => props.data?.current,
+	(newStats) => {
+		if (newStats) {
+			stats.value = newStats
+		}
+	},
+)
+</script>
+
+<style scoped>
+.stat-drop-shadow {
+	filter: drop-shadow(0 4px 6px var(--surface-3));
+}
+
+.chart-space {
+	height: 142px;
+	width: calc(100% + 40px);
+	margin-left: -20px;
+	margin-right: -20px;
+}
+
+.chart {
+	width: 100% !important;
+	height: 142px !important;
+	transition: opacity 0.3s ease-out;
+	box-shadow:
+		0 1px 2px 0 rgba(0, 0, 0, 0.3),
+		0 1px 3px 0 rgba(0, 0, 0, 0.15);
+}
+</style>
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/content.vue b/packages/ui/src/layouts/wrapped/hosting/manage/content.vue
index 30776a944a..47e9fd9198 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/content.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/content.vue
@@ -11,6 +11,7 @@ import {
 	injectModrinthClient,
 	injectModrinthServerContext,
 	injectNotificationManager,
+	injectServerSettingsModal,
 } from '#ui/providers'
 import { commonMessages } from '#ui/utils/common-messages'
 
@@ -95,6 +96,7 @@ const leaveMessages = defineMessages({
 const client = injectModrinthClient()
 const { server, worldId, busyReasons, isSyncingContent } = injectModrinthServerContext()
 const { addNotification } = injectNotificationManager()
+const { openServerSettings, browseServerContent } = injectServerSettingsModal()
 const route = useRoute()
 const router = useRouter()
 const queryClient = useQueryClient()
@@ -409,6 +411,16 @@ const currentGameVersion = computed(() => contentQuery.data.value?.game_version
 const currentLoader = computed(() => contentQuery.data.value?.modloader ?? '')
 
 function handleBrowseContent() {
+	const contentType = type.value
+	if (browseServerContent && ['mod', 'plugin', 'datapack'].includes(contentType)) {
+		browseServerContent({
+			serverId,
+			worldId: worldId.value,
+			type: contentType as 'mod' | 'plugin' | 'datapack',
+		})
+		return
+	}
+
 	router.push({
 		path: `/discover/${type.value}s`,
 		query: { sid: serverId, wid: worldId.value },
@@ -894,7 +906,7 @@ provideContentManager({
 	updateModpack: handleModpackUpdate,
 	viewModpackContent: handleViewModpackContent,
 	unlinkModpack: handleModpackUnlink,
-	openSettings: () => router.push(`/hosting/manage/${serverId}/options/loader`),
+	openSettings: () => openServerSettings({ tabId: 'installation' }),
 	switchVersion: handleSwitchVersion,
 	getOverflowOptions,
 	mapToTableItem: (item) => {
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/files.vue b/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
index eb76a8bba6..7079bad10a 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/files.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Archon, Kyros } from '@modrinth/api-client'
+import type { Kyros } from '@modrinth/api-client'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -14,12 +14,7 @@ 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,
-	FileOperation,
-	UploadState,
-} from '../../../shared/files-tab/types'
+import type { EditingFile, FileItem } from '../../../shared/files-tab/types'
 
 const props = defineProps<{
 	showDebugInfo?: boolean
@@ -28,7 +23,7 @@ const props = defineProps<{
 
 const client = injectModrinthClient()
 const serverContext = injectModrinthServerContext()
-const { serverId, fsOps, fsQueuedOps, busyReasons } = serverContext
+const { serverId, fsOps, busyReasons, uploadState, cancelUpload: cancelUploadRef } = serverContext
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
@@ -350,43 +345,6 @@ async function downloadFile(path: string, fileName: string): Promise<void> {
 	}
 }
 
-// Operations tracking
-type QueuedOpWithState = Archon.Websocket.v0.QueuedFilesystemOp & { state: 'queued' }
-const localQueuedOps = ref<Archon.Websocket.v0.QueuedFilesystemOp[]>([])
-const dismissedOpIds = ref<Set<string>>(new Set())
-
-const activeOps = computed<FileOperation[]>(() => [
-	...localQueuedOps.value.map((x) => ({ ...x, state: 'queued' }) satisfies QueuedOpWithState),
-	...fsQueuedOps.value.map((x) => ({ ...x, state: 'queued' }) satisfies QueuedOpWithState),
-	...(fsOps.value.filter((op) => !op.id || !dismissedOpIds.value.has(op.id)) as FileOperation[]),
-])
-
-async function dismissOperation(opId: string, action: 'dismiss' | 'cancel') {
-	if (action === 'dismiss') {
-		dismissedOpIds.value = new Set([...dismissedOpIds.value, opId])
-	}
-	try {
-		await client.kyros.files_v0.modifyOperation(opId, action)
-	} catch (error) {
-		if (action === 'dismiss') return
-		console.error(`Failed to ${action} operation:`, error)
-	}
-}
-
-watch(
-	() => fsOps.value,
-	(newOps) => {
-		for (const op of newOps) {
-			if (op.state === 'done' && op.id && !dismissedOpIds.value.has(op.id)) {
-				setTimeout(() => {
-					dismissOperation(op.id, 'dismiss')
-				}, 3000)
-			}
-		}
-	},
-	{ deep: true },
-)
-
 watch(
 	() => fsOps.value,
 	() => {
@@ -396,7 +354,6 @@ watch(
 
 onMounted(async () => {
 	initializeFileEdit()
-	localQueuedOps.value = []
 })
 
 // Restart
@@ -404,17 +361,6 @@ async function restartServer() {
 	await client.archon.servers_v0.power(serverId, 'Restart')
 }
 
-// Upload state
-const uploadState = ref<UploadState>({
-	isUploading: false,
-	currentFileName: null,
-	currentFileProgress: 0,
-	uploadedBytes: 0,
-	totalBytes: 0,
-	completedFiles: 0,
-	totalFiles: 0,
-})
-
 let activeUploadCancel: (() => void) | null = null
 
 async function uploadFiles(files: File[]) {
@@ -430,6 +376,7 @@ async function uploadFiles(files: File[]) {
 		completedFiles: 0,
 		totalFiles: files.length,
 	}
+	cancelUploadRef.value = () => activeUploadCancel?.()
 
 	let completedBytes = 0
 
@@ -464,6 +411,7 @@ async function uploadFiles(files: File[]) {
 	}
 
 	activeUploadCancel = null
+	cancelUploadRef.value = null
 	refreshList()
 	uploadState.value = {
 		isUploading: false,
@@ -515,8 +463,6 @@ provideFileManager({
 	busyTooltip,
 	busyWarning,
 	extractFile,
-	activeOperations: activeOps,
-	dismissOperation,
 	prefetchDirectory,
 	prefetchFile,
 	showInstallFromUrl: true,
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/index.vue b/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
index 0752d7df29..eb23d58842 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
@@ -51,9 +51,7 @@
 						<li>
 							<IntlFormatted :message-id="messages.errorQueueNotice">
 								<template #warning="{ children }">
-									<span class="font-medium text-contrast"
-										><component :is="() => children"
-									/></span>
+									<span class="font-medium text-contrast"><component :is="() => children" /></span>
 								</template>
 							</IntlFormatted>
 						</li>
@@ -71,9 +69,9 @@
 					</ul>
 				</div>
 				<ButtonStyled size="large" type="standard" color="brand">
-					<AutoLink class="mt-6 !w-full" to="https://support.modrinth.com"
-						>{{ formatMessage(messages.contactSupportButton) }}</AutoLink
-					>
+					<AutoLink class="mt-6 !w-full" to="https://support.modrinth.com">{{
+						formatMessage(messages.contactSupportButton)
+					}}</AutoLink>
 				</ButtonStyled>
 				<ButtonStyled size="large" @click="() => router.go(0)">
 					<button class="mt-3 !w-full">{{ formatMessage(messages.reloadButton) }}</button>
@@ -82,7 +80,11 @@
 		</div>
 
 		<Transition v-else name="fade" mode="out-in">
-			<div v-if="isLoading && !serverResponse" key="loading" class="flex flex-col gap-4 py-8">
+			<div
+				v-if="(isLoading || !authReady) && !serverResponse"
+				key="loading"
+				class="flex flex-col gap-4 py-8"
+			>
 				<div class="mb-4 text-center">
 					<LoaderCircleIcon class="mx-auto size-8 animate-spin text-contrast" />
 					<p class="m-0 mt-2 text-secondary">{{ formatMessage(messages.loadingServers) }}</p>
@@ -116,7 +118,9 @@
 				<div
 					class="relative flex h-fit w-full flex-col mb-4 items-center justify-between md:flex-row"
 				>
-					<h1 class="w-full text-2xl m-0 font-extrabold text-contrast">{{ formatMessage(messages.serversTitle) }}</h1>
+					<h1 class="w-full text-2xl m-0 font-extrabold text-contrast">
+						{{ formatMessage(messages.serversTitle) }}
+					</h1>
 					<div class="flex w-full flex-row items-center justify-end gap-2 md:mb-0">
 						<StyledInput
 							id="search"
@@ -125,15 +129,13 @@
 							type="search"
 							name="search"
 							autocomplete="off"
-							:placeholder="formatMessage(messages.searchPlaceholder, { count: filteredData.length })"
+							:placeholder="
+								formatMessage(messages.searchPlaceholder, { count: filteredData.length })
+							"
 							wrapper-class="w-full md:w-72"
 						/>
 						<ButtonStyled type="standard" color="brand">
-							<AutoLink v-if="isNuxt" :to="{ path: '/servers', hash: '#plan' }">
-								<PlusIcon />
-								{{ formatMessage(messages.newServerButton) }}
-							</AutoLink>
-							<button v-else @click="openPurchaseModal">
+							<button @click="openPurchaseModal">
 								<PlusIcon />
 								{{ formatMessage(messages.newServerButton) }}
 							</button>
@@ -190,7 +192,7 @@
 </template>
 
 <script setup lang="ts">
-import { type Archon, type Labrinth, NuxtModrinthClient } from '@modrinth/api-client'
+import type { Archon, Labrinth } from '@modrinth/api-client'
 import { HammerIcon, LoaderCircleIcon, PlusIcon, SearchIcon } from '@modrinth/assets'
 import {
 	AutoLink,
@@ -233,6 +235,7 @@ const route = useRoute()
 const auth = injectAuth()
 const client = injectModrinthClient()
 const loggedIn = computed(() => !!auth.user.value)
+const authReady = computed(() => auth.isReady?.value ?? true)
 const { formatMessage } = useVIntl()
 
 const messages = defineMessages({
@@ -317,8 +320,6 @@ const messages = defineMessages({
 	},
 })
 
-const isNuxt = computed(() => client instanceof NuxtModrinthClient)
-
 const isPollingForNewServers = ref(false)
 const pollingState = ref({
 	enabled: false,
@@ -542,9 +543,16 @@ const fuse = computed(() => {
 	})
 })
 
-function introToTop(array: Archon.Servers.v0.Server[]): Archon.Servers.v0.Server[] {
+function sortServers(array: Archon.Servers.v0.Server[]): Archon.Servers.v0.Server[] {
 	return array.slice().sort((a, b) => {
-		return Number(b.flows?.intro) - Number(a.flows?.intro)
+		const aSuspended = a.status === 'suspended' ? 1 : 0
+		const bSuspended = b.status === 'suspended' ? 1 : 0
+		if (aSuspended !== bSuspended) return aSuspended - bSuspended
+
+		const introDiff = Number(b.flows?.intro) - Number(a.flows?.intro)
+		if (introDiff !== 0) return introDiff
+
+		return (a.name || '').localeCompare(b.name || '')
 	})
 }
 
@@ -560,9 +568,9 @@ function filesExpired(server: Archon.Servers.v0.Server): boolean {
 
 const filteredData = computed<Archon.Servers.v0.Server[]>(() => {
 	const base = !searchInput.value.trim()
-		? introToTop(serverList.value)
+		? sortServers(serverList.value)
 		: fuse.value
-			? introToTop(fuse.value.search(searchInput.value).map((result) => result.item))
+			? sortServers(fuse.value.search(searchInput.value).map((result) => result.item))
 			: []
 	return base.filter((server) => !filesExpired(server))
 })
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/overview.vue b/packages/ui/src/layouts/wrapped/hosting/manage/overview.vue
new file mode 100644
index 0000000000..03cef00de0
--- /dev/null
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/overview.vue
@@ -0,0 +1,219 @@
+<template>
+	<div class="relative flex select-none flex-col gap-6" data-pyro-server-manager-root>
+		<Admonition v-if="backupBusyReason" type="warning" :header="backupBusyReason">
+			Your server is still accessible during this time.
+		</Admonition>
+		<Admonition
+			v-if="inspectingError && isConnected && !isWsAuthIncorrect"
+			data-pyro-servers-inspecting-error
+			type="critical"
+			:header="`${serverData?.name} shut down unexpectedly.`"
+			dismissible
+			@dismiss="clearError"
+		>
+			<template v-if="inspectingError.analysis.problems.length">
+				<p class="m-0 text-sm opacity-80">
+					We automatically analyzed the logs and found the following:
+				</p>
+				<div class="mt-2 flex flex-col gap-2">
+					<div
+						v-for="problem in inspectingError.analysis.problems"
+						:key="problem.message"
+						class="bg-raised-bg/30 rounded-xl px-3 py-2"
+					>
+						<p class="m-0 text-sm font-semibold">{{ problem.message }}</p>
+						<ul v-if="problem.solutions.length" class="m-0 ml-4 mt-1.5 flex flex-col gap-1">
+							<li
+								v-for="solution in problem.solutions"
+								:key="solution.message"
+								class="text-sm opacity-80"
+							>
+								{{ solution.message }}
+							</li>
+						</ul>
+					</div>
+				</div>
+			</template>
+			<template v-else-if="serverPowerState === 'crashed'">
+				<template v-if="powerStateDetails?.oom_killed">
+					The server stopped because it ran out of memory. There may be a memory leak caused by a
+					mod or plugin, or you may need to upgrade your Modrinth Server.
+				</template>
+				<template v-else-if="powerStateDetails?.exit_code !== undefined">
+					Your server exited with code {{ powerStateDetails.exit_code }}.
+					<template v-if="powerStateDetails.exit_code === 1">
+						There may be a mod or plugin causing the issue, or an issue with your server
+						configuration.
+					</template>
+				</template>
+				<template v-else> We could not determine the specific cause of the crash. </template>
+				<p class="m-0 mt-2">You can try restarting the server.</p>
+			</template>
+			<template v-else>
+				We could not find any specific problems, but you can try restarting the server.
+			</template>
+		</Admonition>
+
+		<div class="flex flex-col-reverse gap-6 md:flex-col">
+			<ServerManageStats
+				:data="!isWsAuthIncorrect ? stats : undefined"
+				:loading="isWsAuthIncorrect"
+			/>
+
+			<div class="flex h-[700px] flex-col gap-4">
+				<span class="text-2xl font-semibold text-contrast">Console</span>
+
+				<ConsolePageLayout />
+			</div>
+		</div>
+
+		<div
+			v-if="isWsAuthIncorrect"
+			class="absolute inset-0 flex flex-col items-center justify-center bg-bg"
+		>
+			<h2>Could not connect to the server.</h2>
+			<p>
+				An error occurred while attempting to connect to your server. Please try refreshing the
+				page. (WebSocket Authentication Failed)
+			</p>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+import Admonition from '#ui/components/base/Admonition.vue'
+import { useModrinthServersConsole, useVIntl } from '#ui/composables'
+import { ConsolePageLayout, provideConsoleManager } from '#ui/layouts/shared/console'
+import { injectModrinthClient, injectModrinthServerContext } from '#ui/providers'
+
+import ServerManageStats from './components/ServerManageStats.vue'
+
+const { formatMessage } = useVIntl()
+const client = injectModrinthClient()
+const {
+	server: serverData,
+	serverId,
+	busyReasons,
+	isConnected,
+	isWsAuthIncorrect,
+	stats,
+	powerState: serverPowerState,
+	powerStateDetails,
+} = injectModrinthServerContext()
+const modrinthServersConsole = useModrinthServersConsole()
+
+provideConsoleManager({
+	logLines: modrinthServersConsole.output,
+	sendCommand: (cmd: string) => {
+		try {
+			client.archon.sockets.send(serverId, { event: 'command', cmd })
+		} catch (error) {
+			console.error('Error sending command:', error)
+		}
+	},
+	showCommandInput: true,
+	loading: computed(() => !isConnected.value || isWsAuthIncorrect.value),
+	onClear: () => {
+		modrinthServersConsole.clear()
+	},
+	shareDisabled: computed(() => !isConnected.value),
+})
+
+const backupBusyReason = computed(() => {
+	const reason = busyReasons.value.find(
+		(r) =>
+			r.reason.id === 'servers.busy.backup-creating' ||
+			r.reason.id === 'servers.busy.backup-restoring',
+	)
+	return reason ? formatMessage(reason.reason) : null
+})
+
+interface ErrorData {
+	id: string
+	name: string
+	type: string
+	version: string
+	title: string
+	analysis: {
+		problems: Array<{
+			message: string
+			counter: number
+			entry: {
+				level: number
+				time: string | null
+				prefix: string
+				lines: Array<{ number: number; content: string }>
+			}
+			solutions: Array<{ message: string }>
+		}>
+		information: Array<{
+			message: string
+			counter: number
+			label: string
+			value: string
+			entry: {
+				level: number
+				time: string | null
+				prefix: string
+				lines: Array<{ number: number; content: string }>
+			}
+		}>
+	}
+}
+
+const inspectingError = ref<ErrorData | null>(null)
+
+const inspectError = async () => {
+	try {
+		const blob = await client.kyros.files_v0.downloadFile('/logs/latest.log')
+		const log = await blob.text()
+		if (!log) return
+
+		const response = await fetch('https://api.mclo.gs/1/analyse', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/x-www-form-urlencoded',
+			},
+			body: new URLSearchParams({
+				content: log,
+			}),
+		})
+
+		if (!response.ok) {
+			inspectingError.value = null
+			return
+		}
+
+		const data = (await response.json()) as Partial<ErrorData>
+		if (data.analysis && Array.isArray(data.analysis.problems)) {
+			inspectingError.value = data as ErrorData
+		} else {
+			inspectingError.value = null
+		}
+	} catch (error) {
+		console.error('Failed to analyze logs:', error)
+		inspectingError.value = null
+	}
+}
+
+const clearError = () => {
+	inspectingError.value = null
+}
+
+watch(
+	() => serverPowerState.value,
+	(newVal) => {
+		if (newVal === 'crashed' && !powerStateDetails.value?.oom_killed) {
+			void inspectError()
+		} else {
+			clearError()
+		}
+	},
+)
+
+if (serverPowerState.value === 'crashed' && !powerStateDetails.value?.oom_killed) {
+	void inspectError()
+}
+</script>
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
new file mode 100644
index 0000000000..1a79dd95ff
--- /dev/null
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
@@ -0,0 +1,1500 @@
+<template>
+	<div
+		v-if="filteredNotices.length > 0"
+		class="experimental-styles-within relative mx-auto mb-4 flex w-full min-w-0 max-w-[1280px] flex-col gap-3 px-6"
+	>
+		<ServerNotice
+			v-for="notice in filteredNotices"
+			:key="`notice-${notice.id}`"
+			:level="notice.level"
+			:message="notice.message"
+			:dismissable="notice.dismissable"
+			:title="notice.title"
+			class="w-full"
+			@dismiss="() => dismissNotice(notice.id)"
+		/>
+	</div>
+	<div
+		v-if="serverData && serverData.node === null && serverData.status !== 'suspended'"
+		class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
+	>
+		<ErrorInformationCard
+			title="We're getting your server ready"
+			description="Your server's hardware is being prepared and will be available shortly!"
+			:icon="TransferIcon"
+			icon-color="blue"
+			:action="generalErrorAction"
+		/>
+	</div>
+	<div
+		v-else-if="serverData?.status === 'suspended' && serverData.suspension_reason === 'upgrading'"
+		class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
+	>
+		<ErrorInformationCard
+			title="Server upgrading"
+			description="Your server's hardware is currently being upgraded and will be back online shortly!"
+			:icon="TransferIcon"
+			icon-color="blue"
+			:action="generalErrorAction"
+		/>
+	</div>
+	<div
+		v-else-if="serverData?.status === 'suspended'"
+		class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
+	>
+		<ErrorInformationCard
+			title="Server suspended"
+			:description="suspendedDescription"
+			:icon="LockIcon"
+			icon-color="orange"
+			:action="suspendedAction"
+		/>
+	</div>
+	<div
+		v-else-if="serverError?.statusCode === 403 || serverError?.statusCode === 404"
+		class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
+	>
+		<ErrorInformationCard
+			title="An error occured."
+			description="Please contact Modrinth Support."
+			:icon="TransferIcon"
+			icon-color="orange"
+			:error-details="generalErrorDetails"
+			:action="generalErrorAction"
+		/>
+	</div>
+	<div
+		v-else-if="serverError || !nodeAccessible"
+		class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
+	>
+		<ErrorInformationCard
+			title="Server Node Unavailable"
+			:icon="TriangleAlertIcon"
+			icon-color="red"
+			:action="nodeUnavailableAction"
+			:error-details="nodeUnavailableDetails"
+		>
+			<template #description>
+				<div class="text-md space-y-4">
+					<p class="leading-[170%] text-secondary">
+						Your server's node, where your Modrinth Server is physically hosted, is not accessible
+						at the moment. We are working to resolve the issue as quickly as possible.
+					</p>
+					<p class="leading-[170%] text-secondary">
+						Your data is safe and will not be lost, and your server will be back online as soon as
+						the issue is resolved.
+					</p>
+					<p class="leading-[170%] text-secondary">
+						If reloading does not work initially, please contact Modrinth Support via the chat
+						bubble in the bottom right corner and we'll be happy to help.
+					</p>
+				</div>
+			</template>
+		</ErrorInformationCard>
+	</div>
+	<!-- Loading state (before serverData arrives) -->
+	<div
+		v-else-if="!serverData && !serverError"
+		class="flex min-h-[calc(100vh-4rem)] flex-col items-center justify-center gap-4"
+	>
+		<LoaderCircleIcon class="size-16 animate-spin" />
+		<span class="text-secondary">{{ formatMessage(loadingMessages.loadingServerPanel) }}</span>
+	</div>
+	<!-- SERVER START -->
+	<div
+		v-else-if="serverData"
+		data-pyro-server-manager-root
+		class="experimental-styles-within mobile-blurred-servericon relative mx-auto mb-12 box-border flex min-h-screen w-full min-w-0 max-w-[1280px] flex-col gap-6 px-6 transition-all duration-300"
+		:class="'server-panel-' + revealState"
+		:style="{
+			'--server-bg-image': serverImage
+				? `url(${serverImage})`
+				: `linear-gradient(180deg, rgba(153,153,153,1) 0%, rgba(87,87,87,1) 100%)`,
+		}"
+	>
+		<div
+			v-if="revealState === 'pending'"
+			class="flex min-h-[calc(100vh-4rem)] flex-col items-center justify-center gap-4"
+		>
+			<LoaderCircleIcon class="size-16 animate-spin" />
+			<span class="text-secondary">{{ formatMessage(loadingMessages.loadingServerPanel) }}</span>
+		</div>
+
+		<ServerManageHeader
+			class="server-stagger-item"
+			:style="{ '--si': 0 }"
+			:server="serverData"
+			:server-image="serverImage"
+			:server-project="serverProject"
+			:uptime-seconds="showUptime ? uptimeSeconds : undefined"
+		>
+			<template #actions>
+				<div v-if="!serverData.flows?.intro" class="flex gap-2">
+					<PanelServerActionButton :disabled="!!installError" />
+					<ButtonStyled circular size="large">
+						<button v-tooltip="'Server settings'" @click="() => openServerSettingsModal()">
+							<SettingsIcon />
+						</button>
+					</ButtonStyled>
+					<PanelServerOverflowMenu
+						:disabled="!!installError"
+						:uptime-seconds="uptimeSeconds"
+						:show-copy-id-action="showCopyIdAction"
+						:show-debug-info="showAdvancedDebugInfo"
+					/>
+				</div>
+			</template>
+		</ServerManageHeader>
+
+		<ServerOnboardingPanelPage
+			v-if="serverData.flows?.intro"
+			:browse-modpacks="handleBrowseModpacks"
+		/>
+
+		<template v-else>
+			<div
+				data-pyro-navigation
+				class="server-stagger-item isolate flex w-full select-none flex-col justify-between gap-4 overflow-auto md:flex-row md:items-center"
+				:style="{ '--si': 1 }"
+			>
+				<NavTabs :links="navLinks" replace />
+			</div>
+
+			<div data-pyro-mount class="server-stagger-item h-full w-full flex-1" :style="{ '--si': 2 }">
+				<div
+					v-if="installError"
+					class="mx-auto mb-4 flex justify-between gap-2 rounded-2xl border-2 border-solid border-red bg-bg-red p-4 font-semibold text-contrast"
+				>
+					<div class="flex flex-row gap-4">
+						<IssuesIcon class="hidden h-8 w-8 shrink-0 text-red sm:block" />
+						<div class="flex flex-col gap-2 leading-[150%]">
+							<div class="flex items-center gap-3">
+								<IssuesIcon class="flex h-8 w-8 shrink-0 text-red sm:hidden" />
+								<div class="flex gap-2 text-2xl font-bold">{{ errorTitle }}</div>
+							</div>
+
+							<div
+								v-if="errorTitle.toLocaleLowerCase() === 'installation error'"
+								class="font-normal"
+							>
+								<div
+									v-if="
+										errorMessage.toLocaleLowerCase() === 'the specified version may be incorrect'
+									"
+								>
+									An invalid loader or Minecraft version was specified and could not be installed.
+									<ul class="m-0 mt-4 p-0 pl-4">
+										<li>
+											If this version of Minecraft was released recently, please check if Modrinth
+											Hosting supports it.
+										</li>
+										<li>
+											If you've installed a modpack, it may have been packaged incorrectly or may
+											not be compatible with the loader.
+										</li>
+										<li>
+											Your server may need to be reinstalled with a valid mod loader and version.
+											You can change the loader by clicking the "Change Loader" button.
+										</li>
+										<li>
+											If you're stuck, please contact Modrinth Support with the information below:
+										</li>
+									</ul>
+									<ButtonStyled>
+										<button class="mt-2" @click="copyServerDebugInfo">
+											<CopyIcon v-if="!copied" />
+											<CheckIcon v-else />
+											Copy Debug Info
+										</button>
+									</ButtonStyled>
+								</div>
+								<div v-if="errorMessage.toLocaleLowerCase() === 'internal error'">
+									An internal error occurred while installing your server. Don't fret — try
+									reinstalling your server, and if the problem persists, please contact Modrinth
+									support with your server's debug information.
+								</div>
+								<div
+									v-if="errorMessage.toLocaleLowerCase() === 'this version is not yet supported'"
+								>
+									An error occurred while installing your server because Modrinth Hosting does not
+									support the version of Minecraft or the loader you specified. Try reinstalling
+									your server with a different version or loader, and if the problem persists,
+									please contact Modrinth Support with your server's debug information.
+								</div>
+
+								<div
+									v-if="errorTitle === 'Installation error'"
+									class="mt-2 flex flex-col gap-4 sm:flex-row"
+								>
+									<ButtonStyled v-if="errorLog">
+										<button @click="openInstallLog"><FileIcon />Open Installation Log</button>
+									</ButtonStyled>
+									<ButtonStyled>
+										<button @click="copyServerDebugInfo">
+											<CopyIcon v-if="!copied" />
+											<CheckIcon v-else />
+											Copy Debug Info
+										</button>
+									</ButtonStyled>
+									<ButtonStyled color="red" type="standard">
+										<button class="whitespace-pre" @click="openServerSettingsModal('installation')">
+											<RightArrowIcon />
+											Change Loader
+										</button>
+									</ButtonStyled>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<div v-if="serverData.is_medal" class="mb-4">
+					<MedalServerCountdown
+						:server-id="serverId"
+						:stripe-publishable-key="stripePublishableKey"
+						:site-url="siteUrl"
+						:products="products"
+					/>
+				</div>
+
+				<div
+					v-if="!isConnected && !isReconnecting && !isLoading"
+					data-pyro-server-ws-error
+					class="mb-4 flex w-full flex-row items-center gap-4 rounded-2xl bg-bg-red p-4 text-contrast"
+				>
+					<IssuesIcon class="size-5 text-red" />
+					Something went wrong...
+				</div>
+
+				<div
+					v-if="isReconnecting"
+					data-pyro-server-ws-reconnecting
+					class="mb-4 flex w-full flex-row items-center gap-4 rounded-2xl bg-bg-orange p-4 text-sm text-contrast"
+				>
+					<LoaderCircleIcon class="h-5 w-5 animate-spin" />
+					Hang on, we're reconnecting to your server.
+				</div>
+
+				<Transition
+					enter-active-class="transition-all duration-300 ease-out overflow-hidden"
+					enter-from-class="opacity-0 max-h-0"
+					enter-to-class="opacity-100 max-h-40"
+					leave-active-class="transition-all duration-200 ease-in overflow-hidden"
+					leave-from-class="opacity-100 max-h-40"
+					leave-to-class="opacity-0 max-h-0"
+				>
+					<InstallingBanner
+						v-if="
+							(serverData.status === 'installing' || isSyncingContent || contentError) &&
+							syncProgress?.phase !== 'Analyzing'
+						"
+						data-pyro-server-installing
+						class="mb-4"
+						:progress="syncProgress"
+						:content-error="contentError"
+						@retry="handleContentRetry"
+					>
+						<template #icon>
+							<ServerIcon :image="serverImage" class="!h-6 !w-6" />
+						</template>
+					</InstallingBanner>
+				</Transition>
+				<Transition
+					enter-active-class="transition-all duration-300 ease-out overflow-hidden"
+					enter-from-class="opacity-0 max-h-0"
+					enter-to-class="opacity-100 max-h-40"
+					leave-active-class="transition-all duration-200 ease-in overflow-hidden"
+					leave-from-class="opacity-100 max-h-40"
+					leave-to-class="opacity-0 max-h-0"
+				>
+					<Admonition v-if="uploadState.isUploading" type="info" class="mb-4">
+						<template #icon>
+							<UploadIcon class="h-6 w-6 flex-none text-brand-blue" />
+						</template>
+						<template #header>
+							Uploading files ({{ uploadState.completedFiles }}/{{ uploadState.totalFiles }})
+							<span v-if="uploadState.currentFileName" class="font-normal text-secondary">
+								— {{ uploadState.currentFileName }}
+							</span>
+						</template>
+						<span class="text-secondary">
+							{{ formatBytes(uploadState.uploadedBytes) }} /
+							{{ formatBytes(uploadState.totalBytes) }} ({{
+								Math.round(uploadOverallProgress * 100)
+							}}%)
+						</span>
+						<template v-if="cancelUpload" #top-right-actions>
+							<ButtonStyled type="outlined" color="blue">
+								<button class="!border" @click="cancelUpload?.()">Cancel</button>
+							</ButtonStyled>
+						</template>
+						<template #progress>
+							<ProgressBar :progress="uploadOverallProgress" :max="1" color="blue" full-width />
+						</template>
+					</Admonition>
+				</Transition>
+				<FileOperationAdmonitions class="mb-4" />
+				<BackupProgressAdmonitions class="mb-4" />
+				<slot :on-reinstall="onReinstall" :on-reinstall-failed="onReinstallFailed" />
+			</div>
+		</template>
+	</div>
+	<div
+		v-if="showAdvancedDebugInfo"
+		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">Server data</h2>
+		<pre class="markdown-body w-full overflow-auto rounded-2xl bg-bg-raised p-4 text-sm">{{
+			safeStringify(serverData)
+		}}</pre>
+	</div>
+	<Suspense>
+		<ServerSettingsModal
+			ref="serverSettingsModal"
+			:resolve-viewer="resolveViewer"
+			:browse-modpacks="handleBrowseModpacks"
+		/>
+	</Suspense>
+	<ConfirmLeaveModal
+		ref="confirmLeaveModal"
+		:header="formatMessage(leaveMessages.uploadInProgress)"
+		:body="formatMessage(leaveMessages.leavePageBody)"
+		admonition-type="critical"
+	/>
+</template>
+
+<script setup lang="ts">
+import { Intercom, shutdown } from '@intercom/messenger-js-sdk'
+import type { Archon, Labrinth } from '@modrinth/api-client'
+import { ModrinthApiError } from '@modrinth/api-client'
+import {
+	BoxesIcon,
+	CheckIcon,
+	CopyIcon,
+	DatabaseBackupIcon,
+	FileIcon,
+	FolderOpenIcon,
+	IssuesIcon,
+	LayoutTemplateIcon,
+	LoaderCircleIcon,
+	LockIcon,
+	RightArrowIcon,
+	SettingsIcon,
+	TransferIcon,
+	TriangleAlertIcon,
+	UploadIcon,
+} from '@modrinth/assets'
+import type { Stats } from '@modrinth/utils'
+import { formatBytes } from '@modrinth/utils'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
+import { useTimeoutFn } from '@vueuse/core'
+import DOMPurify from 'dompurify'
+import { computed, nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue'
+import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'
+
+import Admonition from '#ui/components/base/Admonition.vue'
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import ErrorInformationCard from '#ui/components/base/ErrorInformationCard.vue'
+import NavTabs from '#ui/components/base/NavTabs.vue'
+import ProgressBar from '#ui/components/base/ProgressBar.vue'
+import ServerNotice from '#ui/components/base/ServerNotice.vue'
+import ConfirmLeaveModal from '#ui/components/modal/ConfirmLeaveModal.vue'
+import BackupProgressAdmonitions from '#ui/components/servers/backups/BackupProgressAdmonitions.vue'
+import { ServerIcon } from '#ui/components/servers/icons'
+import InstallingBanner from '#ui/components/servers/InstallingBanner.vue'
+import MedalServerCountdown from '#ui/components/servers/marketing/MedalServerCountdown.vue'
+import {
+	PanelServerActionButton,
+	PanelServerOverflowMenu,
+	ServerManageHeader,
+} from '#ui/components/servers/server-header'
+import ServerSettingsModal from '#ui/components/servers/ServerSettingsModal.vue'
+import {
+	useDebugLogger,
+	useModrinthServersConsole,
+	useServerImage,
+	useServerProject,
+} from '#ui/composables'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { useServerManageCoreRuntime } from '#ui/composables/server-manage-core-runtime'
+import type { ServerSettingsTabId } from '#ui/layouts/shared/server-settings'
+import {
+	injectModrinthClient,
+	injectNotificationManager,
+	provideServerSettingsModal,
+} from '#ui/providers'
+import { formatLoaderLabel } from '#ui/utils/loaders'
+
+import FileOperationAdmonitions from '../../../shared/files-tab/components/FileOperationAdmonitions.vue'
+import ServerOnboardingPanelPage from './[id]/onboarding.vue'
+
+interface Tab {
+	label: string
+	href: string
+	icon?: object
+	subpages?: string[]
+}
+
+const props = withDefaults(
+	defineProps<{
+		serverId: string
+		reloadPage: () => void
+		resolveViewer: () => Promise<{ userId: string | null; userRole: string | null }>
+		showCopyIdAction?: boolean
+		showAdvancedDebugInfo?: boolean
+		showUptime?: boolean
+		additionalTabs?: Tab[]
+		stripePublishableKey?: string
+		siteUrl?: string
+		products?: Labrinth.Billing.Internal.Product[]
+		authUser?: { id: string; username: string; email: string; created: string }
+		fetchIntercomToken?: () => Promise<{ token: string }>
+		intercomAppId?: string
+		navigateToBilling?: () => void
+		navigateToServers?: () => void
+		browseModpacks?: (args: {
+			serverId: string
+			worldId: string | null
+			from: 'reset-server' | 'onboarding'
+		}) => void | Promise<void>
+		browseContent?: (args: {
+			serverId: string
+			worldId: string | null
+			type: 'mod' | 'plugin' | 'datapack'
+		}) => void | Promise<void>
+	}>(),
+	{
+		showCopyIdAction: false,
+		showAdvancedDebugInfo: false,
+		showUptime: true,
+		additionalTabs: () => [],
+		stripePublishableKey: undefined,
+		siteUrl: undefined,
+		products: () => [],
+		authUser: undefined,
+		fetchIntercomToken: undefined,
+		intercomAppId: 'ykeritl9',
+		navigateToBilling: undefined,
+		navigateToServers: undefined,
+		browseModpacks: undefined,
+		browseContent: undefined,
+	},
+)
+
+const { formatMessage } = useVIntl()
+
+const loadingMessages = defineMessages({
+	loadingServerPanel: {
+		id: 'servers.manage.loading.serverPanel',
+		defaultMessage: 'Loading your server panel...',
+	},
+})
+
+const leaveMessages = defineMessages({
+	uploadInProgress: {
+		id: 'servers.manage.confirm-leave.upload-in-progress',
+		defaultMessage: 'Upload in progress',
+	},
+	leavePageBody: {
+		id: 'servers.manage.confirm-leave.body',
+		defaultMessage: 'A file upload is in progress. Leaving this page will cancel the upload.',
+	},
+})
+
+const { addNotification } = injectNotificationManager()
+const client = injectModrinthClient()
+const queryClient = useQueryClient()
+const route = useRoute()
+const router = useRouter()
+const debug = useDebugLogger('ServerManage')
+
+const isReconnecting = ref(false)
+const isLoading = ref(true)
+const isMounted = ref(true)
+const copied = ref(false)
+const installError = ref<Error | null>(null)
+const errorTitle = ref('Error')
+const errorMessage = ref('An unexpected error occurred.')
+const errorLog = ref('')
+const errorLogFile = ref('')
+
+const serverSettingsModal = ref<InstanceType<typeof ServerSettingsModal> | null>(null)
+const confirmLeaveModal = ref<InstanceType<typeof ConfirmLeaveModal>>()
+
+const { data: serverData, error: serverQueryError } = useQuery({
+	queryKey: ['servers', 'detail', props.serverId],
+	queryFn: () => client.archon.servers_v0.get(props.serverId)!,
+})
+
+function updateServerData(patch: Partial<Archon.Servers.v0.Server>) {
+	if (!serverData.value) return
+	queryClient.setQueryData(['servers', 'detail', props.serverId], {
+		...serverData.value,
+		...patch,
+	})
+}
+
+const serverError = computed(() => {
+	const err = serverQueryError.value
+	if (err instanceof ModrinthApiError) return err
+	return err ? ModrinthApiError.fromUnknown(err) : null
+})
+
+const { data: serverFull } = useQuery({
+	queryKey: ['servers', 'v1', 'detail', props.serverId],
+	queryFn: () => client.archon.servers_v1.get(props.serverId),
+})
+
+const worldId = computed(() => {
+	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 { image: serverImage } = useServerImage(
+	props.serverId,
+	computed(() => serverData.value?.upstream ?? null),
+)
+const { data: serverProject } = useServerProject(computed(() => serverData.value?.upstream ?? null))
+
+const cancelledBackups = new Set<string>()
+const markBackupCancelled = (backupId: string) => {
+	cancelledBackups.add(backupId)
+}
+
+const syncProgress = ref<Archon.Websocket.v0.SyncContentProgress | null>(null)
+const contentError = ref<Archon.Websocket.v0.SyncContentError | null>(null)
+const syncProgressActive = ref(false)
+const isAwaitingPostInstallRefresh = ref(false)
+const { start: startSyncHide, stop: cancelSyncHide } = useTimeoutFn(
+	() => (syncProgressActive.value = false),
+	1000,
+	{ immediate: false },
+)
+
+watch(syncProgress, (progress) => {
+	if (progress != null) {
+		cancelSyncHide()
+		syncProgressActive.value = true
+	} else if (syncProgressActive.value) {
+		startSyncHide()
+	}
+})
+
+const isSyncingContent = computed(
+	() => syncProgressActive.value || isAwaitingPostInstallRefresh.value,
+)
+
+let hasSeenInstallProgress = false
+
+const onStateEvent = (data: Archon.Websocket.v0.WSStateEvent) => {
+	debug('[root.vue] handleState received:', {
+		power_variant: data.power_variant,
+		progress: data.progress,
+		serverStatus: serverData.value?.status,
+	})
+	syncProgress.value = data.progress
+	contentError.value = data.content_error
+
+	if (serverData.value) {
+		if (data.progress != null && serverData.value.status !== 'installing') {
+			debug('[root.vue] handleState: progress != null, setting status to installing')
+			hasSeenInstallProgress = true
+			updateServerData({ status: 'installing' })
+		} else if (data.progress != null) {
+			hasSeenInstallProgress = true
+		} else if (
+			data.progress == null &&
+			data.content_error == null &&
+			serverData.value.status === 'installing' &&
+			hasSeenInstallProgress
+		) {
+			debug('[root.vue] handleState: progress null + was installing, applying optimistic update')
+			hasSeenInstallProgress = false
+			applyOptimisticCompletion()
+			invalidateAfterInstall()
+		}
+	}
+}
+
+const {
+	backupsState,
+	cancelUpload,
+	cleanupCoreRuntime,
+	connectSocket,
+	cpuData,
+	fsOps,
+	fsQueuedOps,
+	isConnected,
+	ramData,
+	serverPowerState,
+	stats,
+	uptimeSeconds,
+	uploadState,
+} = useServerManageCoreRuntime({
+	serverId: computed(() => props.serverId),
+	worldId,
+	server: serverData,
+	isSyncingContent,
+	markBackupCancelled,
+	includeBackupBusyReasons: true,
+	setDisconnectedOnAuthIncorrect: false,
+	syncUptimeFromState: true,
+	incrementUptimeLocally: true,
+	eventGuard: () => isMounted.value,
+	onStateEvent,
+})
+
+const uploadOverallProgress = computed(() => {
+	const state = uploadState.value
+	if (!state.isUploading || state.totalFiles === 0) return 0
+	return Math.min((state.completedFiles + state.currentFileProgress) / state.totalFiles, 1)
+})
+
+const isUploading = computed(() => uploadState.value.isUploading)
+
+function handleBeforeUnload(e: BeforeUnloadEvent) {
+	if (isUploading.value) {
+		e.preventDefault()
+		return ''
+	}
+}
+
+if (typeof window !== 'undefined') {
+	watch(isUploading, (uploading) => {
+		if (uploading) {
+			window.addEventListener('beforeunload', handleBeforeUnload)
+		} else {
+			window.removeEventListener('beforeunload', handleBeforeUnload)
+		}
+	})
+
+	onBeforeUnmount(() => {
+		window.removeEventListener('beforeunload', handleBeforeUnload)
+	})
+
+	onBeforeRouteLeave(async () => {
+		if (isUploading.value) {
+			const shouldLeave = (await confirmLeaveModal.value?.prompt()) ?? false
+			if (shouldLeave) cancelUpload.value?.()
+			return shouldLeave
+		}
+		return true
+	})
+}
+
+type CachedWsState = {
+	stats: Stats
+	cpuData: number[]
+	ramData: number[]
+	powerState: Archon.Websocket.v0.PowerState
+	uptimeSeconds: number
+	consoleLines: string[]
+}
+
+const modrinthServersConsole = useModrinthServersConsole()
+const wsStateCacheKey = ['servers', 'ws-state', props.serverId] as const
+const cachedWsState = queryClient.getQueryData<CachedWsState>(wsStateCacheKey)
+if (cachedWsState) {
+	stats.value = cachedWsState.stats
+	cpuData.value = cachedWsState.cpuData
+	ramData.value = cachedWsState.ramData
+	serverPowerState.value = cachedWsState.powerState
+	uptimeSeconds.value = cachedWsState.uptimeSeconds
+}
+
+let hasReceivedWsData = false
+
+const saveWsStateToCache = () => {
+	if (!hasReceivedWsData) return
+	queryClient.setQueryData(wsStateCacheKey, {
+		stats: stats.value,
+		cpuData: cpuData.value,
+		ramData: ramData.value,
+		powerState: serverPowerState.value,
+		uptimeSeconds: uptimeSeconds.value,
+		consoleLines: modrinthServersConsole.output.value,
+	} satisfies CachedWsState)
+}
+
+watch([stats, serverPowerState], () => {
+	if (!isConnected.value) return
+	hasReceivedWsData = true
+})
+
+const revealState = ref<'pending' | 'revealing' | 'visible'>(
+	isConnected.value || serverData.value ? 'visible' : 'pending',
+)
+
+const REVEAL_TOTAL_MS = 2 * 80 + 400
+
+watch([isConnected, serverData], ([connected, data]) => {
+	if ((connected || data) && revealState.value === 'pending') {
+		revealState.value = 'revealing'
+		setTimeout(() => {
+			revealState.value = 'visible'
+		}, REVEAL_TOTAL_MS)
+	}
+})
+
+const navLinks = computed<Tab[]>(() => [
+	{
+		label: 'Overview',
+		href: `/hosting/manage/${props.serverId}`,
+		icon: LayoutTemplateIcon,
+		subpages: [],
+	},
+	{
+		label: 'Content',
+		href: `/hosting/manage/${props.serverId}/content`,
+		icon: BoxesIcon,
+		subpages: ['mods', 'datapacks'],
+	},
+	{
+		label: 'Files',
+		href: `/hosting/manage/${props.serverId}/files`,
+		icon: FolderOpenIcon,
+		subpages: [],
+	},
+	{
+		label: 'Backups',
+		href: `/hosting/manage/${props.serverId}/backups`,
+		icon: DatabaseBackupIcon,
+		subpages: [],
+	},
+	...props.additionalTabs,
+])
+
+const filteredNotices = computed(
+	() => serverData.value?.notices?.filter((n) => n.level !== 'survey') ?? [],
+)
+const surveyNotice = computed(() => serverData.value?.notices?.find((n) => n.level === 'survey'))
+
+async function dismissNotice(noticeId: number) {
+	await client.archon.servers_v0.dismissNotice(props.serverId, noticeId).catch((err) => {
+		addNotification({
+			title: 'Error dismissing notice',
+			text: err,
+			type: 'error',
+		})
+	})
+	await queryClient.invalidateQueries({ queryKey: ['servers', 'detail', props.serverId] })
+}
+
+async function dismissSurvey() {
+	const noticeId = surveyNotice.value?.id
+	if (noticeId === undefined) return
+	await dismissNotice(noticeId)
+}
+
+type TallyPopupOptions = {
+	key?: string
+	layout?: 'default' | 'modal'
+	width?: number
+	alignLeft?: boolean
+	hideTitle?: boolean
+	overlay?: boolean
+	emoji?: {
+		text: string
+		animation:
+			| 'none'
+			| 'wave'
+			| 'tada'
+			| 'heart-beat'
+			| 'spin'
+			| 'flash'
+			| 'bounce'
+			| 'rubber-band'
+			| 'head-shake'
+	}
+	autoClose?: number
+	showOnce?: boolean
+	doNotShowAfterSubmit?: boolean
+	customFormUrl?: string
+	hiddenFields?: { [key: string]: unknown }
+	onOpen?: () => void
+	onClose?: () => void
+	onPageView?: (page: number) => void
+	onSubmit?: (payload: unknown) => void
+}
+
+const popupOptions = computed(
+	() =>
+		({
+			layout: 'default',
+			width: 400,
+			autoClose: 2000,
+			hideTitle: true,
+			hiddenFields: {
+				username: props.authUser?.username,
+				user_id: props.authUser?.id,
+				user_email: props.authUser?.email,
+				server_id: serverData.value?.server_id,
+				loader: serverData.value?.loader,
+				game_version: serverData.value?.mc_version,
+				modpack_id: serverProject.value?.id,
+				modpack_name: serverProject.value?.title,
+			},
+			onOpen: () => console.log(`Opened survey notice: ${surveyNotice.value?.id}`),
+			onClose: async () => await dismissSurvey(),
+			onSubmit: (payload: unknown) => {
+				console.log('Form submitted:', payload)
+			},
+		}) satisfies TallyPopupOptions,
+)
+
+function getTally(): { openPopup?: (id: string, opts: TallyPopupOptions) => void } | undefined {
+	return (
+		window as Window & { Tally?: { openPopup?: (id: string, opts: TallyPopupOptions) => void } }
+	).Tally
+}
+
+function showSurvey() {
+	if (!surveyNotice.value) return
+
+	try {
+		const tally = getTally()
+		if (tally?.openPopup) {
+			tally.openPopup(surveyNotice.value.message, popupOptions.value)
+		}
+	} catch (e) {
+		console.error('Error opening Tally popup:', e)
+	}
+}
+
+function loadTallyScript() {
+	if (document.querySelector('script[src*="tally.so"]')) return
+	const script = document.createElement('script')
+	script.src = 'https://tally.so/widgets/embed.js'
+	script.defer = true
+	document.head.appendChild(script)
+}
+
+async function handleContentRetry() {
+	if (!worldId.value) return
+	try {
+		await client.archon.content_v1.repair(props.serverId, worldId.value)
+	} catch (err) {
+		addNotification({
+			type: 'error',
+			text: err instanceof Error ? err.message : 'Failed to retry installation',
+		})
+	}
+}
+
+const handleBackupProgress = (data: Archon.Websocket.v0.WSBackupProgressEvent) => {
+	if (data.task === 'file') return
+
+	const backupId = data.id
+
+	if (cancelledBackups.has(backupId)) return
+
+	const current = backupsState.get(backupId) ?? {}
+	const currentTaskState = current[data.task]?.state
+	const isIncomingTerminal =
+		data.state === 'done' || data.state === 'failed' || data.state === 'cancelled'
+
+	if (currentTaskState === data.state && isIncomingTerminal) return
+
+	const previousProgress = current[data.task]?.progress
+	if (currentTaskState !== data.state || previousProgress !== data.progress) {
+		backupsState.set(backupId, {
+			...current,
+			[data.task]: {
+				progress: data.progress,
+				state: data.state,
+			},
+		})
+	}
+
+	if (isIncomingTerminal) {
+		const attemptCleanup = (attempt: number = 1) => {
+			queryClient.invalidateQueries({ queryKey: ['backups', 'list', props.serverId] }).then(() => {
+				const backupData = queryClient.getQueryData<Archon.Backups.v1.Backup[]>([
+					'backups',
+					'list',
+					props.serverId,
+				])
+				const backup = backupData?.find((b) => b.id === backupId)
+				const isStillActive =
+					backup && (backup.status === 'in_progress' || backup.status === 'pending')
+
+				if (isStillActive && attempt < 6) {
+					setTimeout(() => attemptCleanup(attempt + 1), 1000 * Math.pow(2, attempt - 1))
+					return
+				}
+
+				if (isStillActive) {
+					queryClient.setQueryData<Archon.Backups.v1.Backup[]>(
+						['backups', 'list', props.serverId],
+						(old) =>
+							old?.map((b) => {
+								if (b.id !== backupId) return b
+								return {
+									...b,
+									status: data.state === 'done' ? ('done' as const) : ('error' as const),
+									ongoing: false,
+									interrupted: data.state === 'failed',
+								}
+							}),
+					)
+				}
+
+				backupsState.delete(backupId)
+			})
+		}
+
+		attemptCleanup()
+	}
+}
+
+const handleFilesystemOps = (data: Archon.Websocket.v0.WSFilesystemOpsEvent) => {
+	const allOps = data.all
+
+	if (JSON.stringify(fsOps.value) !== JSON.stringify(allOps)) {
+		fsOps.value = allOps
+	}
+
+	fsQueuedOps.value = fsQueuedOps.value.filter(
+		(queuedOp) => !allOps.some((x) => x.src === queuedOp.src),
+	)
+
+	const cancelled = allOps.filter((x) => x.state === 'cancelled')
+	Promise.all(
+		cancelled.map((x) =>
+			client.kyros.files_v0.modifyOperation(x.id, 'dismiss').catch((error) => {
+				console.error('Failed to dismiss cancelled operation:', error)
+			}),
+		),
+	)
+}
+
+const handleNewMod = () => {
+	queryClient.invalidateQueries({ queryKey: ['content', 'list'] })
+}
+
+const handleInstallationResult = async (data: Archon.Websocket.v0.WSInstallationResultEvent) => {
+	debug('[root.vue] handleInstallationResult received:', data)
+	switch (data.result) {
+		case 'ok': {
+			debug('[root.vue] handleInstallationResult: ok received')
+			if (!serverData.value) break
+
+			applyOptimisticCompletion()
+			installError.value = null
+			invalidateAfterInstall()
+
+			break
+		}
+		case 'err': {
+			console.log('failed to install')
+			console.log(data)
+			errorTitle.value = 'Installation error'
+			errorMessage.value = data.reason ?? 'Unknown error'
+			installError.value = new Error(data.reason ?? 'Unknown error')
+
+			try {
+				let files = await client.kyros.files_v0.listDirectory('/', 1, 100)
+				if (files && files.total > 1) {
+					for (let i = 2; i <= files.total; i++) {
+						const nextFiles = await client.kyros.files_v0.listDirectory('/', i, 100)
+						if (nextFiles?.items?.length === 0) break
+						if (nextFiles) files = nextFiles
+					}
+				}
+				const fileName = files?.items?.find((file) =>
+					file.name.startsWith('modrinth-installation'),
+				)?.name
+				errorLogFile.value = fileName ?? ''
+				if (fileName) {
+					const content = await client.kyros.files_v0.downloadFile(fileName)
+					errorLog.value = await content.text()
+				}
+			} catch (err) {
+				console.error('Failed to fetch installation log:', err)
+			}
+			break
+		}
+	}
+}
+
+const newLoader = ref<string | null>(null)
+const newLoaderVersion = ref<string | null>(null)
+const newMCVersion = ref<string | null>(null)
+
+const onReinstall = async (
+	potentialArgs: { loader?: string; lVersion?: string; mVersion?: string } | undefined,
+) => {
+	debug('[root.vue] onReinstall called with:', potentialArgs)
+
+	if (serverData.value?.flows?.intro) {
+		await client.archon.servers_v1.endIntro(props.serverId)
+		queryClient.invalidateQueries({ queryKey: ['servers', 'detail', props.serverId] })
+	}
+
+	if (!serverData.value) return
+
+	debug('[root.vue] onReinstall: setting serverData.status to installing')
+	hasSeenInstallProgress = false
+	updateServerData({ status: 'installing' })
+
+	if (potentialArgs?.loader) {
+		newLoader.value = potentialArgs.loader
+	}
+	if (potentialArgs?.lVersion) {
+		newLoaderVersion.value = potentialArgs.lVersion
+	}
+	if (potentialArgs?.mVersion) {
+		newMCVersion.value = potentialArgs.mVersion
+	}
+
+	installError.value = null
+	errorTitle.value = 'Error'
+	errorMessage.value = 'An unexpected error occurred.'
+
+	debug('[root.vue] onReinstall: triggering immediate invalidation')
+	queryClient.invalidateQueries({ queryKey: ['servers', 'detail', props.serverId] })
+	queryClient.invalidateQueries({ queryKey: ['content', 'list'] })
+}
+
+const onReinstallFailed = () => {
+	debug('[root.vue] onReinstallFailed: reverting status to available')
+	updateServerData({ status: 'available' })
+	newLoader.value = null
+	newLoaderVersion.value = null
+	newMCVersion.value = null
+}
+
+function applyOptimisticCompletion() {
+	const patch: Partial<Archon.Servers.v0.Server> = { status: 'available' }
+	if (newLoader.value) patch.loader = formatLoaderLabel(newLoader.value) as Archon.Servers.v0.Loader
+	if (newLoaderVersion.value) patch.loader_version = newLoaderVersion.value
+	if (newMCVersion.value) patch.mc_version = newMCVersion.value
+
+	debug('[root.vue] applyOptimisticCompletion: patch:', patch)
+	updateServerData(patch)
+
+	const addonsQueries = queryClient.getQueriesData<Archon.Content.v1.Addons>({
+		queryKey: ['content', 'list', 'v1', props.serverId],
+	})
+	for (const [key, data] of addonsQueries) {
+		if (!data) continue
+		const addonsPatch: Record<string, string> = {}
+		if (newLoader.value) addonsPatch.modloader = newLoader.value
+		if (newLoaderVersion.value) addonsPatch.modloader_version = newLoaderVersion.value
+		if (newMCVersion.value) addonsPatch.game_version = newMCVersion.value
+		if (Object.keys(addonsPatch).length > 0) {
+			queryClient.setQueryData(key, { ...data, ...addonsPatch })
+		}
+	}
+
+	newLoader.value = null
+	newLoaderVersion.value = null
+	newMCVersion.value = null
+}
+
+async function invalidateAfterInstall() {
+	debug('[root.vue] invalidateAfterInstall: scheduling 2s delayed invalidation')
+	isAwaitingPostInstallRefresh.value = true
+	setTimeout(async () => {
+		try {
+			await Promise.all([
+				queryClient.invalidateQueries({ queryKey: ['servers', 'detail', props.serverId] }),
+				queryClient.invalidateQueries({
+					queryKey: ['servers', 'startup', 'v1', props.serverId],
+				}),
+				queryClient.invalidateQueries({ queryKey: ['content', 'list'] }),
+			])
+		} catch (err: unknown) {
+			console.error('Error refreshing data after installation:', err)
+		} finally {
+			isAwaitingPostInstallRefresh.value = false
+		}
+	}, 2000)
+}
+
+const nodeAccessible = ref(true)
+
+const nodeUnavailableDetails = computed(() => [
+	{
+		label: 'Server ID',
+		value: props.serverId,
+		type: 'inline' as const,
+	},
+	{
+		label: 'Node',
+		value:
+			(serverError.value?.responseData as { hostname?: string } | undefined)?.hostname ??
+			serverData.value?.datacenter ??
+			'Unknown',
+		type: 'inline' as const,
+	},
+	{
+		label: 'Error message',
+		value: nodeAccessible.value
+			? (serverError.value?.message ?? 'Unknown')
+			: 'Unable to reach node. Ping test failed.',
+		type: 'block' as const,
+	},
+])
+
+const suspendedDescription = computed(() => {
+	if (serverData.value?.suspension_reason === 'cancelled') {
+		return 'Your subscription has been cancelled.\nContact Modrinth Support if you believe this is an error.'
+	}
+	if (serverData.value?.suspension_reason) {
+		return `Your server has been suspended: ${serverData.value.suspension_reason}\nContact Modrinth Support if you believe this is an error.`
+	}
+	return 'Your server has been suspended.\nContact Modrinth Support if you believe this is an error.'
+})
+
+const generalErrorDetails = computed(() => [
+	{
+		label: 'Server ID',
+		value: props.serverId,
+		type: 'inline' as const,
+	},
+	{
+		label: 'Timestamp',
+		value: String(new Date().toISOString()),
+		type: 'inline' as const,
+	},
+	{
+		label: 'Error Name',
+		value: serverError.value?.name,
+		type: 'inline' as const,
+	},
+	{
+		label: 'Error Message',
+		value: serverError.value?.message,
+		type: 'block' as const,
+	},
+	...(serverError.value?.originalError
+		? [
+				{
+					label: 'Original Error',
+					value: String(serverError.value.originalError),
+					type: 'hidden' as const,
+				},
+			]
+		: []),
+	...(serverError.value?.stack
+		? [
+				{
+					label: 'Stack Trace',
+					value: serverError.value.stack,
+					type: 'hidden' as const,
+				},
+			]
+		: []),
+])
+
+const suspendedAction = computed(() => ({
+	label: 'Go to billing settings',
+	onClick: () => props.navigateToBilling?.(),
+	color: 'brand' as const,
+}))
+
+const generalErrorAction = computed(() => ({
+	label: 'Go back to all servers',
+	onClick: () => props.navigateToServers?.(),
+	color: 'brand' as const,
+}))
+
+const nodeUnavailableAction = computed(() => ({
+	label: 'Reload',
+	onClick: () => props.reloadPage(),
+	color: 'brand' as const,
+	disabled: false,
+}))
+
+const copyServerDebugInfo = () => {
+	const debugInfo = `Server ID: ${serverData.value?.server_id}\nError: ${errorMessage.value}\nKind: ${serverData.value?.upstream?.kind}\nProject ID: ${serverData.value?.upstream?.project_id}\nVersion ID: ${serverData.value?.upstream?.version_id}\nLog: ${errorLog.value}`
+	navigator.clipboard.writeText(debugInfo)
+	copied.value = true
+	setTimeout(() => {
+		copied.value = false
+	}, 5000)
+}
+
+const openInstallLog = () => {
+	const url = `/hosting/manage/${props.serverId}/files?editing=${encodeURIComponent(errorLogFile.value)}`
+	window.history.pushState({}, '', url)
+	window.dispatchEvent(new PopStateEvent('popstate'))
+}
+
+function openServerSettingsModal(tabId?: ServerSettingsTabId) {
+	if (!props.serverId) return
+	serverSettingsModal.value?.show({ serverId: props.serverId, tabId })
+}
+
+function handleBrowseModpacks(args: {
+	serverId: string
+	worldId: string | null
+	from: 'reset-server' | 'onboarding'
+}) {
+	props.browseModpacks?.(args)
+}
+
+function handleBrowseContent(args: {
+	serverId: string
+	worldId: string | null
+	type: 'mod' | 'plugin' | 'datapack'
+}) {
+	props.browseContent?.(args)
+}
+
+provideServerSettingsModal({
+	openServerSettings: (options) => openServerSettingsModal(options?.tabId),
+	browseServerContent: (args) => handleBrowseContent(args),
+})
+
+function safeStringify(obj: unknown, indent = ' '): string {
+	const seen = new WeakSet()
+	return JSON.stringify(
+		obj,
+		(_key, value) => {
+			if (typeof value === 'object' && value !== null) {
+				if (seen.has(value)) {
+					return '[Circular]'
+				}
+				seen.add(value)
+			}
+			return value
+		},
+		indent,
+	)
+}
+
+async function testNodeReachability(): Promise<boolean> {
+	const nodeInstance = serverData.value?.node?.instance
+	if (!nodeInstance) return false
+
+	const wsUrl = `wss://${nodeInstance}/pingtest`
+
+	try {
+		return await new Promise((resolve) => {
+			const socket = new WebSocket(wsUrl)
+			const timeout = setTimeout(() => {
+				socket.close()
+				resolve(false)
+			}, 5000)
+
+			socket.onopen = () => {
+				clearTimeout(timeout)
+				socket.send(performance.now().toString())
+			}
+
+			socket.onmessage = () => {
+				clearTimeout(timeout)
+				socket.close()
+				resolve(true)
+			}
+
+			socket.onerror = () => {
+				clearTimeout(timeout)
+				resolve(false)
+			}
+		})
+	} catch (error) {
+		console.error(`Failed to ping node ${wsUrl}:`, error)
+		return false
+	}
+}
+
+function initializeServer() {
+	if (serverData.value?.status === 'suspended') {
+		isLoading.value = false
+		return
+	}
+
+	if (serverData.value?.node === null) {
+		isLoading.value = false
+		return
+	}
+
+	testNodeReachability()
+		.then((result) => {
+			nodeAccessible.value = result
+			if (!nodeAccessible.value) {
+				isLoading.value = false
+			}
+		})
+		.catch((err) => {
+			console.error('Error testing node reachability:', err)
+			nodeAccessible.value = false
+			isLoading.value = false
+		})
+
+	if (serverError.value) {
+		isLoading.value = false
+	} else {
+		void connectSocket(props.serverId, {
+			extraSubscriptions: (targetServerId) => [
+				client.archon.sockets.on(targetServerId, 'installation-result', handleInstallationResult),
+				client.archon.sockets.on(targetServerId, 'backup-progress', handleBackupProgress),
+				client.archon.sockets.on(targetServerId, 'filesystem-ops', handleFilesystemOps),
+				client.archon.sockets.on(targetServerId, 'new-mod', handleNewMod),
+			],
+		})
+			.then((connected) => {
+				if (connected && cachedWsState?.consoleLines?.length) {
+					modrinthServersConsole.clear()
+					modrinthServersConsole.addLines(cachedWsState.consoleLines)
+				}
+			})
+			.finally(() => {
+				isLoading.value = false
+			})
+	}
+
+	if (serverData.value?.flows?.intro && serverProject.value) {
+		client.archon.servers_v1.endIntro(props.serverId).then(() => {
+			queryClient.invalidateQueries({ queryKey: ['servers', 'detail', props.serverId] })
+		})
+	}
+}
+
+const cleanup = () => {
+	isMounted.value = false
+
+	saveWsStateToCache()
+
+	shutdown()
+
+	cleanupCoreRuntime(props.serverId)
+
+	isReconnecting.value = false
+	isLoading.value = true
+
+	cancelledBackups.clear()
+
+	DOMPurify.removeHook('afterSanitizeAttributes')
+}
+
+onMounted(() => {
+	isMounted.value = true
+
+	if (serverData.value) {
+		initializeServer()
+	} else {
+		const stopWatch = watch(serverData, (data) => {
+			if (data) {
+				stopWatch()
+				initializeServer()
+			}
+		})
+	}
+
+	if (props.authUser && props.fetchIntercomToken) {
+		props
+			.fetchIntercomToken()
+			.then(({ token }) => {
+				Intercom({
+					app_id: props.intercomAppId!,
+					intercom_user_jwt: token,
+					session_duration: 1000 * 60 * 60 * 24,
+				})
+			})
+			.catch((error) => {
+				console.warn('[PYROSERVERS][INTERCOM] failed to initialize secure support chat', error)
+			})
+	}
+
+	DOMPurify.addHook(
+		'afterSanitizeAttributes',
+		(node: {
+			tagName: string
+			getAttribute: (arg0: string) => string | null
+			setAttribute: (arg0: string, arg1: string) => void
+		}) => {
+			if (node.tagName === 'A' && node.getAttribute('target')) {
+				node.setAttribute('rel', 'noopener noreferrer')
+			}
+		},
+	)
+
+	loadTallyScript()
+	if (surveyNotice.value) {
+		showSurvey()
+	}
+
+	if (route.query.openSettings) {
+		const tabId = route.query.openSettings as ServerSettingsTabId
+		router.replace({ query: { ...route.query, openSettings: undefined } })
+		queryClient.invalidateQueries({ queryKey: ['servers', 'detail', props.serverId] })
+		queryClient.invalidateQueries({ queryKey: ['content', 'list', 'v1', props.serverId] })
+		queryClient.invalidateQueries({ queryKey: ['servers', 'startup', 'v1', props.serverId] })
+		nextTick(() => openServerSettingsModal(tabId))
+	}
+})
+
+onUnmounted(() => {
+	cleanup()
+})
+</script>
+
+<style>
+@keyframes server-action-buttons-anim {
+	0% {
+		opacity: 0;
+		transform: translateX(1rem);
+	}
+
+	100% {
+		opacity: 1;
+		transform: none;
+	}
+}
+
+.server-action-buttons-anim {
+	animation: server-action-buttons-anim 0.2s ease-out;
+}
+
+.mobile-blurred-servericon::before {
+	position: absolute;
+	left: 0;
+	top: 0;
+	display: block;
+	height: 9rem;
+	width: 100%;
+	background-size: cover;
+	background-position: center;
+	background-repeat: no-repeat;
+	filter: blur(1rem);
+	content: '';
+	background-image:
+		linear-gradient(
+			to bottom,
+			rgba(from var(--color-raised-bg) r g b / 0.2),
+			rgb(from var(--color-raised-bg) r g b / 0.8)
+		),
+		var(--server-bg-image);
+}
+
+@media screen and (min-width: 640px) {
+	.mobile-blurred-servericon::before {
+		display: none;
+	}
+}
+
+.server-panel-pending .server-stagger-item {
+	opacity: 0;
+}
+
+.server-panel-revealing .server-stagger-item {
+	animation: serverReveal 0.4s ease-out both;
+	animation-delay: calc(var(--si) * 80ms);
+}
+
+@keyframes serverReveal {
+	from {
+		opacity: 0;
+		transform: translateY(12px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+</style>
diff --git a/packages/ui/src/layouts/wrapped/index.ts b/packages/ui/src/layouts/wrapped/index.ts
index 96eb189947..d91f53ee78 100644
--- a/packages/ui/src/layouts/wrapped/index.ts
+++ b/packages/ui/src/layouts/wrapped/index.ts
@@ -3,3 +3,5 @@ export { default as ServersManageBackupsPage } from './hosting/manage/backups.vu
 export { default as ServersManageContentPage } from './hosting/manage/content.vue'
 export { default as ServersManageFilesPage } from './hosting/manage/files.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'
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index 7294c933e8..8e4d1b967e 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -32,6 +32,9 @@
   "affiliate.viewAnalytics": {
     "defaultMessage": "View analytics"
   },
+  "app.server-settings.failed-to-load-server": {
+    "defaultMessage": "Failed to load server settings"
+  },
   "badge.beta": {
     "defaultMessage": "Beta"
   },
@@ -683,12 +686,6 @@
   "files.operations.modpack-from-url": {
     "defaultMessage": "modpack from URL"
   },
-  "files.operations.upload-progress": {
-    "defaultMessage": "{uploaded} / {total} ({percent}%)"
-  },
-  "files.operations.uploading-files": {
-    "defaultMessage": "Uploading files ({completed}/{total})"
-  },
   "files.rename-modal.header": {
     "defaultMessage": "Rename {name}"
   },
@@ -1329,7 +1326,7 @@
     "defaultMessage": "This mod depends on a client-side mod and may cause issues when starting your server"
   },
   "label.client-only-warning": {
-    "defaultMessage": "This is a client-side mod and may cause issues. We've kept it enabled because some authors mislabel environments, and the loader should resolve the conflict."
+    "defaultMessage": "This is a client-side mod and may cause issues when starting your server"
   },
   "label.client-retained-warning": {
     "defaultMessage": "This is a client-side mod that was installed as a dependency and may cause issues when starting your server"
@@ -2693,6 +2690,18 @@
   "servers.backups.item.restore": {
     "defaultMessage": "Restore"
   },
+  "servers.busy.backup-creating": {
+    "defaultMessage": "Backup creation in progress"
+  },
+  "servers.busy.backup-restoring": {
+    "defaultMessage": "Backup restore in progress"
+  },
+  "servers.busy.installing": {
+    "defaultMessage": "Server is installing"
+  },
+  "servers.busy.syncing-content": {
+    "defaultMessage": "Content sync in progress"
+  },
   "servers.list-empty.already-have-server-label": {
     "defaultMessage": "Already have a server?"
   },
@@ -2804,6 +2813,12 @@
   "servers.manage.checking-for-new-servers": {
     "defaultMessage": "Checking for new servers..."
   },
+  "servers.manage.confirm-leave.body": {
+    "defaultMessage": "A file upload is in progress. Leaving this page will cancel the upload."
+  },
+  "servers.manage.confirm-leave.upload-in-progress": {
+    "defaultMessage": "Upload in progress"
+  },
   "servers.manage.contact-support-button": {
     "defaultMessage": "Contact Modrinth Support"
   },
@@ -2831,6 +2846,9 @@
   "servers.manage.loading-servers": {
     "defaultMessage": "Loading your servers..."
   },
+  "servers.manage.loading.serverPanel": {
+    "defaultMessage": "Loading your server panel..."
+  },
   "servers.manage.new-server-button": {
     "defaultMessage": "New server"
   },
diff --git a/packages/ui/src/providers/auth.ts b/packages/ui/src/providers/auth.ts
index b5f68437ab..4baac3c7fd 100644
--- a/packages/ui/src/providers/auth.ts
+++ b/packages/ui/src/providers/auth.ts
@@ -6,6 +6,8 @@ import { createContext } from './create-context'
 export interface AuthProvider {
 	session_token: Ref<string | null>
 	user: Ref<Labrinth.Users.v2.User | null>
+	/** True once the initial auth check has completed (regardless of result). */
+	isReady?: Ref<boolean>
 	requestSignIn: (redirectPath: string) => void | Promise<void>
 }
 
diff --git a/packages/ui/src/providers/index.ts b/packages/ui/src/providers/index.ts
index e6d7c9726e..9c5fcf8740 100644
--- a/packages/ui/src/providers/index.ts
+++ b/packages/ui/src/providers/index.ts
@@ -13,5 +13,6 @@ export * from './popup-notifications'
 export * from './project-page'
 export * from './project-page-new'
 export * from './server-context'
+export * from './server-settings-modal'
 export * from './tags'
 export * from './web-notifications'
diff --git a/packages/ui/src/providers/server-context.ts b/packages/ui/src/providers/server-context.ts
index a98b0075b0..2c6cd84e5e 100644
--- a/packages/ui/src/providers/server-context.ts
+++ b/packages/ui/src/providers/server-context.ts
@@ -1,7 +1,9 @@
-import type { Archon } from '@modrinth/api-client'
+import type { Archon, UploadState } from '@modrinth/api-client'
+import type { Stats } from '@modrinth/utils'
 import type { ComputedRef, Reactive, Ref } from 'vue'
 
 import type { MessageDescriptor } from '#ui/composables/i18n'
+import type { FileOperation } from '#ui/layouts/shared/files-tab/types'
 
 import { createContext } from '.'
 
@@ -34,8 +36,12 @@ export interface ModrinthServerContext {
 
 	// Websocket state
 	readonly isConnected: Ref<boolean>
+	readonly isWsAuthIncorrect: Ref<boolean>
 	readonly powerState: Ref<Archon.Websocket.v0.PowerState>
+	readonly powerStateDetails: Ref<{ oom_killed?: boolean; exit_code?: number } | undefined>
 	readonly isServerRunning: ComputedRef<boolean>
+	readonly stats: Ref<Stats>
+	readonly uptimeSeconds: Ref<number>
 	readonly backupsState: Reactive<BackupsState>
 	markBackupCancelled: (backupId: string) => void
 
@@ -50,6 +56,14 @@ export interface ModrinthServerContext {
 	readonly fsOps: Ref<Archon.Websocket.v0.FilesystemOperation[]>
 	readonly fsQueuedOps: Ref<Archon.Websocket.v0.QueuedFilesystemOp[]>
 	refreshFsAuth: () => Promise<void>
+
+	// File upload state
+	readonly uploadState: Ref<UploadState>
+	readonly cancelUpload: Ref<(() => void) | null>
+
+	// File operations (extract, move, etc.)
+	readonly activeOperations: ComputedRef<FileOperation[]>
+	dismissOperation: (opId: string, action: 'dismiss' | 'cancel') => Promise<void>
 }
 
 export const [injectModrinthServerContext, provideModrinthServerContext] =
diff --git a/packages/ui/src/providers/server-settings-modal.ts b/packages/ui/src/providers/server-settings-modal.ts
new file mode 100644
index 0000000000..71eeac14f5
--- /dev/null
+++ b/packages/ui/src/providers/server-settings-modal.ts
@@ -0,0 +1,17 @@
+import type { ServerSettingsTabId } from '#ui/layouts/shared/server-settings'
+
+import { createContext } from './create-context'
+
+export interface BrowseServerContentArgs {
+	serverId: string
+	worldId: string | null
+	type: 'mod' | 'plugin' | 'datapack'
+}
+
+export interface ServerSettingsModalContext {
+	openServerSettings: (options?: { tabId?: ServerSettingsTabId }) => void
+	browseServerContent?: (args: BrowseServerContentArgs) => void | Promise<void>
+}
+
+export const [injectServerSettingsModal, provideServerSettingsModal] =
+	createContext<ServerSettingsModalContext>('root.vue', 'serverSettingsModalContext')
diff --git a/packages/ui/src/stories/servers/ServerListing.stories.ts b/packages/ui/src/stories/servers/ServerListing.stories.ts
index 45a1c5ba5e..d1fff61904 100644
--- a/packages/ui/src/stories/servers/ServerListing.stories.ts
+++ b/packages/ui/src/stories/servers/ServerListing.stories.ts
@@ -89,7 +89,7 @@ export const Provisioning: Story = {
 	args: {
 		...baseServer,
 		name: 'My New Server',
-		status: 'installing',
+		isProvisioning: true,
 	},
 }
 
diff --git a/packages/ui/src/utils/common-messages.ts b/packages/ui/src/utils/common-messages.ts
index fe61d1e783..ee476c3a48 100644
--- a/packages/ui/src/utils/common-messages.ts
+++ b/packages/ui/src/utils/common-messages.ts
@@ -403,8 +403,7 @@ export const commonMessages = defineMessages({
 	},
 	clientOnlyWarning: {
 		id: 'label.client-only-warning',
-		defaultMessage:
-			"This is a client-side mod and may cause issues. We've kept it enabled because some authors mislabel environments, and the loader should resolve the conflict.",
+		defaultMessage: 'This is a client-side mod and may cause issues when starting your server',
 	},
 	clientRetainedWarning: {
 		id: 'label.client-retained-warning',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d81867dc9b..834fae1bb6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -164,7 +164,7 @@ importers:
     devDependencies:
       '@eslint/compat':
         specifier: ^1.1.1
-        version: 1.4.1(eslint@9.39.2(jiti@2.6.1))
+        version: 1.4.1(eslint@9.39.2(jiti@1.21.7))
       '@formatjs/cli':
         specifier: ^6.2.12
         version: 6.12.2(@vue/compiler-core@3.5.27)(vue@3.5.27(typescript@5.9.3))
@@ -173,22 +173,22 @@ importers:
         version: link:../../packages/tooling-config
       '@nuxt/eslint-config':
         specifier: ^0.5.6
-        version: 0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+        version: 0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
       '@taijased/vue-render-tracker':
         specifier: ^1.0.7
         version: 1.0.7(vue@3.5.27(typescript@5.9.3))
       '@vitejs/plugin-vue':
         specifier: ^6.0.3
-        version: 6.0.4(vite@8.0.3(@types/node@20.19.31)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))
+        version: 6.0.4(vite@8.0.3(@types/node@20.19.31)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))
       autoprefixer:
         specifier: ^10.4.19
         version: 10.4.24(postcss@8.5.6)
       eslint:
         specifier: ^9.9.1
-        version: 9.39.2(jiti@2.6.1)
+        version: 9.39.2(jiti@1.21.7)
       eslint-plugin-turbo:
         specifier: ^2.5.4
-        version: 2.8.2(eslint@9.39.2(jiti@2.6.1))(turbo@2.8.2)
+        version: 2.8.2(eslint@9.39.2(jiti@1.21.7))(turbo@2.8.2)
       postcss:
         specifier: ^8.4.39
         version: 8.5.6
@@ -206,7 +206,7 @@ importers:
         version: 5.9.3
       vite:
         specifier: ^8.0.0
-        version: 8.0.3(@types/node@20.19.31)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+        version: 8.0.3(@types/node@20.19.31)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
       vue-component-type-helpers:
         specifier: ^3.1.8
         version: 3.2.4
@@ -613,6 +613,9 @@ importers:
       '@codemirror/view':
         specifier: ^6.22.1
         version: 6.39.12
+      '@intercom/messenger-js-sdk':
+        specifier: ^0.0.14
+        version: 0.0.14
       '@modrinth/api-client':
         specifier: workspace:*
         version: link:../api-client
@@ -637,6 +640,9 @@ importers:
       '@tresjs/post-processing':
         specifier: ^2.4.0
         version: 2.4.0(@tresjs/core@4.3.6(three@0.172.0)(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3)))(three@0.172.0)(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3))
+      '@types/dompurify':
+        specifier: ^3.0.5
+        version: 3.2.0
       '@types/markdown-it':
         specifier: ^14.1.1
         version: 14.1.2
@@ -667,6 +673,9 @@ importers:
       dayjs:
         specifier: ^1.11.10
         version: 1.11.19
+      dompurify:
+        specifier: ^3.1.7
+        version: 3.3.1
       es-toolkit:
         specifier: ^1.44.0
         version: 1.44.0
@@ -748,7 +757,7 @@ importers:
         version: 5.2.4(vite@5.4.21(@types/node@20.19.31)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0))(vue@3.5.27(typescript@5.9.3))
       eslint-plugin-storybook:
         specifier: ^10.1.10
-        version: 10.2.4(eslint@9.39.2(jiti@1.21.7))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)
+        version: 10.2.4(eslint@9.39.2(jiti@2.6.1))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)
       storybook:
         specifier: ^10.1.10
         version: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -10980,11 +10989,11 @@ snapshots:
 
   '@eslint-community/regexpp@4.12.2': {}
 
-  '@eslint/compat@1.4.1(eslint@9.39.2(jiti@2.6.1))':
+  '@eslint/compat@1.4.1(eslint@9.39.2(jiti@1.21.7))':
     dependencies:
       '@eslint/core': 0.17.0
     optionalDependencies:
-      eslint: 9.39.2(jiti@2.6.1)
+      eslint: 9.39.2(jiti@1.21.7)
 
   '@eslint/config-array@0.21.1':
     dependencies:
@@ -11605,36 +11614,36 @@ snapshots:
       - utf-8-validate
       - vue
 
-  '@nuxt/eslint-config@0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
+  '@nuxt/eslint-config@0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
     dependencies:
       '@eslint/js': 9.39.2
-      '@nuxt/eslint-plugin': 0.5.7(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      '@stylistic/eslint-plugin': 2.13.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/eslint-plugin': 8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/parser': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      eslint: 9.39.2(jiti@2.6.1)
-      eslint-config-flat-gitignore: 0.3.0(eslint@9.39.2(jiti@2.6.1))
+      '@nuxt/eslint-plugin': 0.5.7(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@stylistic/eslint-plugin': 2.13.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/eslint-plugin': 8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@1.21.7)
+      eslint-config-flat-gitignore: 0.3.0(eslint@9.39.2(jiti@1.21.7))
       eslint-flat-config-utils: 0.4.0
-      eslint-plugin-import-x: 4.16.1(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))
-      eslint-plugin-jsdoc: 50.8.0(eslint@9.39.2(jiti@2.6.1))
-      eslint-plugin-regexp: 2.10.0(eslint@9.39.2(jiti@2.6.1))
-      eslint-plugin-unicorn: 55.0.0(eslint@9.39.2(jiti@2.6.1))
-      eslint-plugin-vue: 9.33.0(eslint@9.39.2(jiti@2.6.1))
+      eslint-plugin-import-x: 4.16.1(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))
+      eslint-plugin-jsdoc: 50.8.0(eslint@9.39.2(jiti@1.21.7))
+      eslint-plugin-regexp: 2.10.0(eslint@9.39.2(jiti@1.21.7))
+      eslint-plugin-unicorn: 55.0.0(eslint@9.39.2(jiti@1.21.7))
+      eslint-plugin-vue: 9.33.0(eslint@9.39.2(jiti@1.21.7))
       globals: 15.15.0
       local-pkg: 0.5.1
       pathe: 1.1.2
-      vue-eslint-parser: 9.4.3(eslint@9.39.2(jiti@2.6.1))
+      vue-eslint-parser: 9.4.3(eslint@9.39.2(jiti@1.21.7))
     transitivePeerDependencies:
       - '@typescript-eslint/utils'
       - eslint-import-resolver-node
       - supports-color
       - typescript
 
-  '@nuxt/eslint-plugin@0.5.7(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
+  '@nuxt/eslint-plugin@0.5.7(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 8.54.0
-      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
-      eslint: 9.39.2(jiti@2.6.1)
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@1.21.7)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -13111,6 +13120,18 @@ snapshots:
 
   '@stripe/stripe-js@7.9.0': {}
 
+  '@stylistic/eslint-plugin@2.13.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@1.21.7)
+      eslint-visitor-keys: 4.2.1
+      espree: 10.4.0
+      estraverse: 5.3.0
+      picomatch: 4.0.3
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
   '@stylistic/eslint-plugin@2.13.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
@@ -13122,6 +13143,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
       - typescript
+    optional: true
 
   '@svgdotjs/svg.draggable.js@3.0.6(@svgdotjs/svg.js@3.2.5)':
     dependencies:
@@ -13523,6 +13545,22 @@ snapshots:
     dependencies:
       '@types/node': 20.19.31
 
+  '@typescript-eslint/eslint-plugin@8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/regexpp': 4.12.2
+      '@typescript-eslint/parser': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.54.0
+      '@typescript-eslint/type-utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.54.0
+      eslint: 9.39.2(jiti@1.21.7)
+      ignore: 7.0.5
+      natural-compare: 1.4.0
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/eslint-plugin@8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
@@ -13539,6 +13577,18 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.54.0
+      '@typescript-eslint/types': 8.54.0
+      '@typescript-eslint/typescript-estree': 8.54.0(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.54.0
+      debug: 4.4.3
+      eslint: 9.39.2(jiti@1.21.7)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.54.0
@@ -13569,6 +13619,18 @@ snapshots:
     dependencies:
       typescript: 5.9.3
 
+  '@typescript-eslint/type-utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/types': 8.54.0
+      '@typescript-eslint/typescript-estree': 8.54.0(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      debug: 4.4.3
+      eslint: 9.39.2(jiti@1.21.7)
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/type-utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 8.54.0
@@ -13739,10 +13801,10 @@ snapshots:
       vite: 7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
       vue: 3.5.27(typescript@5.9.3)
 
-  '@vitejs/plugin-vue@6.0.4(vite@8.0.3(@types/node@20.19.31)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))':
+  '@vitejs/plugin-vue@6.0.4(vite@8.0.3(@types/node@20.19.31)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-rc.2
-      vite: 8.0.3(@types/node@20.19.31)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+      vite: 8.0.3(@types/node@20.19.31)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
       vue: 3.5.27(typescript@5.9.3)
 
   '@vitest/expect@3.2.4':
@@ -15268,10 +15330,10 @@ snapshots:
 
   escape-string-regexp@5.0.0: {}
 
-  eslint-config-flat-gitignore@0.3.0(eslint@9.39.2(jiti@2.6.1)):
+  eslint-config-flat-gitignore@0.3.0(eslint@9.39.2(jiti@1.21.7)):
     dependencies:
-      '@eslint/compat': 1.4.1(eslint@9.39.2(jiti@2.6.1))
-      eslint: 9.39.2(jiti@2.6.1)
+      '@eslint/compat': 1.4.1(eslint@9.39.2(jiti@1.21.7))
+      eslint: 9.39.2(jiti@1.21.7)
       find-up-simple: 1.0.1
 
   eslint-config-prettier@10.1.8(eslint@9.39.2(jiti@2.6.1)):
@@ -15289,12 +15351,12 @@ snapshots:
     optionalDependencies:
       unrs-resolver: 1.11.1
 
-  eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)):
+  eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)):
     dependencies:
       '@typescript-eslint/types': 8.54.0
       comment-parser: 1.4.5
       debug: 4.4.3
-      eslint: 9.39.2(jiti@2.6.1)
+      eslint: 9.39.2(jiti@1.21.7)
       eslint-import-context: 0.1.9(unrs-resolver@1.11.1)
       is-glob: 4.0.3
       minimatch: 10.1.2
@@ -15302,18 +15364,18 @@ snapshots:
       stable-hash-x: 0.2.0
       unrs-resolver: 1.11.1
     optionalDependencies:
-      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-jsdoc@50.8.0(eslint@9.39.2(jiti@2.6.1)):
+  eslint-plugin-jsdoc@50.8.0(eslint@9.39.2(jiti@1.21.7)):
     dependencies:
       '@es-joy/jsdoccomment': 0.50.2
       are-docs-informative: 0.0.2
       comment-parser: 1.4.1
       debug: 4.4.3
       escape-string-regexp: 4.0.0
-      eslint: 9.39.2(jiti@2.6.1)
+      eslint: 9.39.2(jiti@1.21.7)
       espree: 10.4.0
       esquery: 1.7.0
       parse-imports-exports: 0.2.4
@@ -15331,12 +15393,12 @@ snapshots:
     optionalDependencies:
       eslint-config-prettier: 10.1.8(eslint@9.39.2(jiti@2.6.1))
 
-  eslint-plugin-regexp@2.10.0(eslint@9.39.2(jiti@2.6.1)):
+  eslint-plugin-regexp@2.10.0(eslint@9.39.2(jiti@1.21.7)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
       '@eslint-community/regexpp': 4.12.2
       comment-parser: 1.4.5
-      eslint: 9.39.2(jiti@2.6.1)
+      eslint: 9.39.2(jiti@1.21.7)
       jsdoc-type-pratt-parser: 4.8.0
       refa: 0.12.1
       regexp-ast-analysis: 0.7.1
@@ -15346,29 +15408,29 @@ snapshots:
     dependencies:
       eslint: 9.39.2(jiti@2.6.1)
 
-  eslint-plugin-storybook@10.2.4(eslint@9.39.2(jiti@1.21.7))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3):
+  eslint-plugin-storybook@10.2.4(eslint@9.39.2(jiti@2.6.1))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3):
     dependencies:
-      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      eslint: 9.39.2(jiti@1.21.7)
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@2.6.1)
       storybook: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  eslint-plugin-turbo@2.8.2(eslint@9.39.2(jiti@2.6.1))(turbo@2.8.2):
+  eslint-plugin-turbo@2.8.2(eslint@9.39.2(jiti@1.21.7))(turbo@2.8.2):
     dependencies:
       dotenv: 16.0.3
-      eslint: 9.39.2(jiti@2.6.1)
+      eslint: 9.39.2(jiti@1.21.7)
       turbo: 2.8.2
 
-  eslint-plugin-unicorn@55.0.0(eslint@9.39.2(jiti@2.6.1)):
+  eslint-plugin-unicorn@55.0.0(eslint@9.39.2(jiti@1.21.7)):
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
       ci-info: 4.4.0
       clean-regexp: 1.0.0
       core-js-compat: 3.48.0
-      eslint: 9.39.2(jiti@2.6.1)
+      eslint: 9.39.2(jiti@1.21.7)
       esquery: 1.7.0
       globals: 15.15.0
       indent-string: 4.0.0
@@ -15395,16 +15457,16 @@ snapshots:
       '@stylistic/eslint-plugin': 2.13.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
       '@typescript-eslint/parser': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
 
-  eslint-plugin-vue@9.33.0(eslint@9.39.2(jiti@2.6.1)):
+  eslint-plugin-vue@9.33.0(eslint@9.39.2(jiti@1.21.7)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
-      eslint: 9.39.2(jiti@2.6.1)
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
+      eslint: 9.39.2(jiti@1.21.7)
       globals: 13.24.0
       natural-compare: 1.4.0
       nth-check: 2.1.1
       postcss-selector-parser: 6.1.2
       semver: 7.7.3
-      vue-eslint-parser: 9.4.3(eslint@9.39.2(jiti@2.6.1))
+      vue-eslint-parser: 9.4.3(eslint@9.39.2(jiti@1.21.7))
       xml-name-validator: 4.0.0
     transitivePeerDependencies:
       - supports-color
@@ -19790,7 +19852,7 @@ snapshots:
       terser: 5.46.0
       yaml: 2.8.2
 
-  vite@8.0.3(@types/node@20.19.31)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2):
+  vite@8.0.3(@types/node@20.19.31)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2):
     dependencies:
       lightningcss: 1.32.0
       picomatch: 4.0.4
@@ -19801,7 +19863,7 @@ snapshots:
       '@types/node': 20.19.31
       esbuild: 0.27.3
       fsevents: 2.3.3
-      jiti: 2.6.1
+      jiti: 1.21.7
       sass: 1.97.3
       terser: 5.46.0
       yaml: 2.8.2
@@ -19966,10 +20028,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-eslint-parser@9.4.3(eslint@9.39.2(jiti@2.6.1)):
+  vue-eslint-parser@9.4.3(eslint@9.39.2(jiti@1.21.7)):
     dependencies:
       debug: 4.4.3
-      eslint: 9.39.2(jiti@2.6.1)
+      eslint: 9.39.2(jiti@1.21.7)
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1