diff --git a/.vscode/settings.json b/.vscode/settings.json
index d4d338f6dc..7522198819 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -29,5 +29,7 @@
 	},
 	"[rust]": {
 		"editor.defaultFormatter": "rust-lang.rust-analyzer"
-	}
+	},
+	"css.lint.unknownAtRules": "ignore",
+	"scss.lint.unknownAtRules": "ignore"
 }
diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index 6b1b964a1a..041209b551 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -1,5 +1,11 @@
 <script setup>
-import { AuthFeature, PanelVersionFeature, TauriModrinthClient } from '@modrinth/api-client'
+import {
+	AuthFeature,
+	NodeAuthFeature,
+	nodeAuthState,
+	PanelVersionFeature,
+	TauriModrinthClient,
+} from '@modrinth/api-client'
 import {
 	ArrowBigUpDashIcon,
 	ChangeSkinIcon,
@@ -128,8 +134,16 @@ const { addPopupNotification } = popupNotificationManager
 const tauriApiClient = new TauriModrinthClient({
 	userAgent: `modrinth/theseus/${getVersion()} (support@modrinth.com)`,
 	features: [
+		new NodeAuthFeature({
+			getAuth: () => nodeAuthState.getAuth?.() ?? null,
+			refreshAuth: async () => {
+				if (nodeAuthState.refreshAuth) {
+					await nodeAuthState.refreshAuth()
+				}
+			},
+		}),
 		new AuthFeature({
-			token: async () => (await getCreds()).session,
+			token: async () => (await getCreds())?.session,
 		}),
 		new PanelVersionFeature(),
 	],
@@ -982,13 +996,6 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			<NavButton v-if="themeStore.featureFlags.worlds_tab" v-tooltip.right="'Worlds'" to="/worlds">
 				<WorldIcon />
 			</NavButton>
-			<NavButton
-				v-if="themeStore.featureFlags.servers_in_app"
-				v-tooltip.right="'Servers'"
-				to="/hosting/manage"
-			>
-				<ServerIcon />
-			</NavButton>
 			<NavButton
 				v-tooltip.right="'Discover content'"
 				to="/browse/modpack"
@@ -1012,6 +1019,13 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 			>
 				<LibraryIcon />
 			</NavButton>
+			<NavButton
+				v-if="themeStore.featureFlags.servers_in_app"
+				v-tooltip.right="'Servers'"
+				to="/hosting/manage"
+			>
+				<ServerIcon />
+			</NavButton>
 			<div class="h-px w-6 mx-auto my-2 bg-surface-5"></div>
 			<suspense>
 				<QuickInstanceSwitcher />
@@ -1250,11 +1264,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 					</div>
 					<div class="py-4 border-0 border-b-[1px] border-[--brand-gradient-border] border-solid">
 						<suspense>
-							<FriendsList
-								:credentials="credentials"
-								:sign-in="() => signIn()"
-								:refresh-credentials="fetchCredentials"
-							/>
+							<FriendsList :credentials="credentials" :sign-in="() => signIn()" />
 						</suspense>
 					</div>
 					<div v-if="news && news.length > 0" class="p-4 pr-1 flex flex-col items-center">
diff --git a/apps/app-frontend/src/assets/stylesheets/global.scss b/apps/app-frontend/src/assets/stylesheets/global.scss
index 346cb2abb8..f192074d01 100644
--- a/apps/app-frontend/src/assets/stylesheets/global.scss
+++ b/apps/app-frontend/src/assets/stylesheets/global.scss
@@ -77,12 +77,8 @@ body {
 }
 
 a {
-	color: var(--color-link);
+	color: inherit;
 	text-decoration: none;
-
-	&:hover {
-		text-decoration: none;
-	}
 }
 
 .badge {
@@ -174,4 +170,63 @@ img {
 	}
 }
 
+button,
+input[type='button'] {
+	cursor: pointer;
+	border: none;
+	outline: 2px solid transparent;
+}
+
 @import '@modrinth/assets/omorphia.scss';
+
+input {
+	border-radius: var(--size-rounded-sm);
+	box-sizing: border-box;
+	border: 2px solid transparent;
+	// safari iOS rounds inputs by default
+	// set the appearance to none to prevent this
+	appearance: none !important;
+}
+
+pre {
+	font-weight: var(--font-weight-regular);
+}
+
+input,
+textarea {
+	background: var(--color-button-bg);
+	color: var(--color-text);
+	padding: 0.5rem 1rem;
+	font-weight: var(--font-weight-medium);
+	border: none;
+	outline: 2px solid transparent;
+	box-shadow:
+		var(--shadow-inset-sm),
+		0 0 0 0 transparent;
+	transition: box-shadow 0.1s ease-in-out;
+	min-height: 36px;
+
+	&:focus,
+	&:focus-visible {
+		box-shadow:
+			inset 0 0 0 transparent,
+			0 0 0 0.25rem var(--color-brand-shadow);
+		color: var(--color-button-text-active);
+	}
+
+	&:disabled,
+	&[disabled='true'] {
+		opacity: 0.6;
+		pointer-events: none;
+		cursor: not-allowed;
+	}
+
+	&:focus::placeholder {
+		opacity: 0.8;
+	}
+
+	&::placeholder {
+		color: var(--color-button-text);
+		opacity: 0.6;
+	}
+}
diff --git a/apps/app-frontend/src/components/ui/modal/ServerSettingsModal.vue b/apps/app-frontend/src/components/ui/modal/ServerSettingsModal.vue
new file mode 100644
index 0000000000..b20277476f
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/modal/ServerSettingsModal.vue
@@ -0,0 +1,265 @@
+<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/config.ts b/apps/app-frontend/src/config.ts
new file mode 100644
index 0000000000..bc98d33109
--- /dev/null
+++ b/apps/app-frontend/src/config.ts
@@ -0,0 +1,7 @@
+// src/config.ts
+export const config = {
+	siteUrl: import.meta.env.VITE_SITE_URL,
+	stripePublishableKey:
+		import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY ||
+		'pk_test_51JbFxJJygY5LJFfKV50mnXzz3YLvBVe2Gd1jn7ljWAkaBlRz3VQdxN9mXcPSrFbSqxwAb0svte9yhnsmm7qHfcWn00R611Ce7b',
+}
diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index f7f558ae65..d93726e438 100644
--- a/apps/app-frontend/src/locales/en-US/index.json
+++ b/apps/app-frontend/src/locales/en-US/index.json
@@ -185,6 +185,9 @@
   "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."
   },
@@ -598,5 +601,11 @@
   },
   "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/Servers.vue b/apps/app-frontend/src/pages/Servers.vue
new file mode 100644
index 0000000000..5e6e1b427a
--- /dev/null
+++ b/apps/app-frontend/src/pages/Servers.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { injectModrinthClient, ServersManagePageIndex } from '@modrinth/ui'
+import { useQuery } from '@tanstack/vue-query'
+import { computed } from 'vue'
+
+import { config } from '../config'
+
+const stripePublishableKey = (config.stripePublishableKey as string) || ''
+
+const client = injectModrinthClient()
+
+const { data: products } = useQuery({
+	queryKey: ['billing', 'products'],
+	queryFn: () => client.labrinth.billing_internal.getProducts(),
+})
+
+const resolvedProducts = computed<Labrinth.Billing.Internal.Product[]>(() => products.value ?? [])
+</script>
+
+<template>
+	<ServersManagePageIndex
+		:stripe-publishable-key="stripePublishableKey"
+		:site-url="'https://modrinth.com'"
+		:products="resolvedProducts"
+	/>
+</template>
diff --git a/apps/app-frontend/src/pages/hosting/manage/Backups.vue b/apps/app-frontend/src/pages/hosting/manage/Backups.vue
new file mode 100644
index 0000000000..59f00d03ea
--- /dev/null
+++ b/apps/app-frontend/src/pages/hosting/manage/Backups.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { injectModrinthServerContext, ServersManageBackupsPage } from '@modrinth/ui'
+
+const { isServerRunning } = injectModrinthServerContext()
+</script>
+
+<template>
+	<ServersManageBackupsPage :is-server-running="isServerRunning" />
+</template>
diff --git a/apps/app-frontend/src/pages/hosting/manage/Content.vue b/apps/app-frontend/src/pages/hosting/manage/Content.vue
new file mode 100644
index 0000000000..02742246de
--- /dev/null
+++ b/apps/app-frontend/src/pages/hosting/manage/Content.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { ServersManageContentPage } from '@modrinth/ui'
+</script>
+
+<template>
+	<ServersManageContentPage />
+</template>
diff --git a/apps/app-frontend/src/pages/hosting/manage/Files.vue b/apps/app-frontend/src/pages/hosting/manage/Files.vue
new file mode 100644
index 0000000000..532c9b1392
--- /dev/null
+++ b/apps/app-frontend/src/pages/hosting/manage/Files.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { ServersManageFilesPage } from '@modrinth/ui'
+</script>
+
+<template>
+	<ServersManageFilesPage />
+</template>
diff --git a/apps/app-frontend/src/pages/hosting/manage/Index.vue b/apps/app-frontend/src/pages/hosting/manage/Index.vue
new file mode 100644
index 0000000000..fc1015e7a0
--- /dev/null
+++ b/apps/app-frontend/src/pages/hosting/manage/Index.vue
@@ -0,0 +1,346 @@
+<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>
+				<RouterView v-slot="{ Component }">
+					<template v-if="Component">
+						<Suspense>
+							<component :is="Component" />
+							<template #fallback>
+								<LoadingIndicator />
+							</template>
+						</Suspense>
+					</template>
+				</RouterView>
+			</div>
+		</template>
+	</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 ServerSettingsModal from '@/components/ui/modal/ServerSettingsModal.vue'
+
+const route = useRoute()
+const client = injectModrinthClient()
+const queryClient = useQueryClient()
+const { addNotification } = injectNotificationManager()
+
+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',
+			}),
+		})
+	}
+	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
+	}
+	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/index.js b/apps/app-frontend/src/pages/hosting/manage/index.js
new file mode 100644
index 0000000000..127c22afce
--- /dev/null
+++ b/apps/app-frontend/src/pages/hosting/manage/index.js
@@ -0,0 +1,6 @@
+import Backups from './Backups.vue'
+import Content from './Content.vue'
+import Files from './Files.vue'
+import Index from './Index.vue'
+
+export { Backups, Content, Files, Index }
diff --git a/apps/app-frontend/src/pages/index.js b/apps/app-frontend/src/pages/index.js
index d08a3fbeb6..5a4294937a 100644
--- a/apps/app-frontend/src/pages/index.js
+++ b/apps/app-frontend/src/pages/index.js
@@ -1,6 +1,7 @@
 import Browse from './Browse.vue'
 import Index from './Index.vue'
+import Servers from './Servers.vue'
 import Skins from './Skins.vue'
 import Worlds from './Worlds.vue'
 
-export { Browse, Index, Skins, Worlds }
+export { Browse, Index, Servers, Skins, Worlds }
diff --git a/apps/app-frontend/src/routes.js b/apps/app-frontend/src/routes.js
index 18c6df173c..2748853d58 100644
--- a/apps/app-frontend/src/routes.js
+++ b/apps/app-frontend/src/routes.js
@@ -1,7 +1,7 @@
-import { ServersManagePageIndex } from '@modrinth/ui'
 import { createRouter, createWebHistory } from 'vue-router'
 
 import * as Pages from '@/pages'
+import * as Hosting from '@/pages/hosting/manage'
 import * as Instance from '@/pages/instance'
 import * as Library from '@/pages/library'
 import * as Project from '@/pages/project'
@@ -31,11 +31,41 @@ export default new createRouter({
 		{
 			path: '/hosting/manage/',
 			name: 'Servers',
-			component: ServersManagePageIndex,
+			component: Pages.Servers,
 			meta: {
 				breadcrumb: [{ name: 'Servers' }],
 			},
 		},
+		{
+			path: '/hosting/manage/:id',
+			name: 'ServerManage',
+			component: Hosting.Index,
+			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`
+					},
+				},
+				{
+					path: 'content',
+					name: 'ServerManageContent',
+					component: Hosting.Content,
+				},
+				{
+					path: 'files',
+					name: 'ServerManageFiles',
+					component: Hosting.Files,
+				},
+				{
+					path: 'backups',
+					name: 'ServerManageBackups',
+					component: Hosting.Backups,
+				},
+			],
+		},
 		{
 			path: '/browse/:projectType',
 			name: 'Discover content',
diff --git a/apps/app-frontend/tsconfig.app.json b/apps/app-frontend/tsconfig.app.json
index 8d5b455fe5..f723e2026f 100644
--- a/apps/app-frontend/tsconfig.app.json
+++ b/apps/app-frontend/tsconfig.app.json
@@ -16,6 +16,8 @@
 
 		"strict": true,
 
+		"types": ["vite/client"],
+
 		"paths": {
 			"@/*": ["./src/*"]
 		}
diff --git a/apps/app/tauri.conf.json b/apps/app/tauri.conf.json
index 986347dc30..bc06fa6405 100644
--- a/apps/app/tauri.conf.json
+++ b/apps/app/tauri.conf.json
@@ -87,12 +87,12 @@
 			"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://*.sentry.io https://api.mclo.gs http://textures.minecraft.net https://textures.minecraft.net 'self' data: blob:",
+				"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:",
 				"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'",
-				"script-src": "https://*.posthog.com https://tally.so/widgets/embed.js 'self'",
-				"frame-src": "https://www.youtube.com https://www.youtube-nocookie.com https://discord.com https://tally.so/popup/ 'self'",
+				"script-src": "https://*.posthog.com https://posthog.modrinth.com https://js.stripe.com https://tally.so/widgets/embed.js 'self'",
+				"frame-src": "https://www.youtube.com https://www.youtube-nocookie.com https://discord.com https://tally.so/popup/ https://js.stripe.com https://hooks.stripe.com 'self'",
 				"media-src": "https://*.githubusercontent.com"
 			}
 		}
diff --git a/apps/frontend/src/assets/styles/components.scss b/apps/frontend/src/assets/styles/components.scss
index 9ac5ec5b91..b04291d4c7 100644
--- a/apps/frontend/src/assets/styles/components.scss
+++ b/apps/frontend/src/assets/styles/components.scss
@@ -841,6 +841,23 @@ button {
 		opacity: 0.5;
 		box-shadow: none;
 		flex-shrink: 0;
+		user-select: none;
+	}
+
+	.text-input-wrapper__after {
+		display: flex;
+		color: var(--color-text);
+		padding: 0.5rem 1rem 0.5rem 0;
+		font-weight: var(--font-weight-medium);
+		min-height: 36px;
+		box-sizing: border-box;
+		width: fit-content;
+		align-items: center;
+		filter: grayscale(50%);
+		opacity: 0.5;
+		box-shadow: none;
+		flex-shrink: 0;
+		user-select: none;
 	}
 
 	input,
diff --git a/apps/frontend/src/assets/styles/global.scss b/apps/frontend/src/assets/styles/global.scss
index 305b14442b..917240e78d 100644
--- a/apps/frontend/src/assets/styles/global.scss
+++ b/apps/frontend/src/assets/styles/global.scss
@@ -456,9 +456,9 @@ kbd {
 	font-size: 0.85em !important;
 }
 
-@import '~/assets/styles/layout.scss';
-@import '~/assets/styles/utils.scss';
-@import '~/assets/styles/components.scss';
+@import './layout.scss';
+@import './utils.scss';
+@import './components.scss';
 
 // OMORPHIA FIXES
 .card {
diff --git a/apps/frontend/src/components/ui/servers/SaveBanner.vue b/apps/frontend/src/components/ui/servers/SaveBanner.vue
index 092ca3b603..a43e4dd1f1 100644
--- a/apps/frontend/src/components/ui/servers/SaveBanner.vue
+++ b/apps/frontend/src/components/ui/servers/SaveBanner.vue
@@ -1,37 +1,5 @@
-<template>
-	<Transition name="save-banner">
-		<div
-			v-if="props.isVisible"
-			data-pyro-save-banner
-			class="fixed bottom-16 left-0 right-0 z-[10] 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>
-		</div>
-	</Transition>
-</template>
-
 <script setup lang="ts">
-import { ButtonStyled, injectModrinthClient, injectModrinthServerContext } from '@modrinth/ui'
-import { computed } from 'vue'
+import { SaveBanner as SharedSaveBanner } from '@modrinth/ui'
 
 const props = defineProps<{
 	isUpdating: boolean
@@ -41,50 +9,9 @@ const props = defineProps<{
 	isVisible: boolean
 	serverId: string
 }>()
-
-const client = injectModrinthClient()
-const { powerState } = injectModrinthServerContext()
-
-const isStopped = computed(() => powerState.value === 'stopped' || powerState.value === 'crashed')
-
-const isTransitioning = computed(
-	() => powerState.value === 'starting' || powerState.value === 'stopping',
-)
-
-const powerButtonLabel = computed(() => {
-	if (props.isUpdating) return 'Saving...'
-	if (isTransitioning.value) return isStopped.value ? 'Save & start' : 'Save & restart'
-	return isStopped.value ? 'Save & start' : 'Save & restart'
-})
-
-const saveAndPower = async () => {
-	props.save()
-	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>
+<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/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 6fbe35c465..3e1ca2bb57 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -1301,60 +1301,6 @@
   "hosting-marketing.why.your-favorite-mods.description": {
     "message": "Choose between Vanilla, Fabric, Forge, Quilt and NeoForge. If it's on Modrinth, it can run on your server."
   },
-  "hosting.loader.failed-to-change-version": {
-    "message": "Failed to change modpack version"
-  },
-  "hosting.loader.failed-to-load-versions": {
-    "message": "Failed to load versions"
-  },
-  "hosting.loader.failed-to-reinstall": {
-    "message": "Failed to reinstall modpack"
-  },
-  "hosting.loader.failed-to-repair": {
-    "message": "Failed to repair server"
-  },
-  "hosting.loader.failed-to-reset-to-onboarding": {
-    "message": "Failed to reset server to onboarding"
-  },
-  "hosting.loader.failed-to-save-settings": {
-    "message": "Failed to save installation settings"
-  },
-  "hosting.loader.failed-to-unlink": {
-    "message": "Failed to unlink modpack"
-  },
-  "hosting.loader.loader-version": {
-    "message": "{loader, select, null {Loader} other {{loader}}} version"
-  },
-  "hosting.loader.repair-started-text": {
-    "message": "Your server installation has been repaired."
-  },
-  "hosting.loader.repair-started-title": {
-    "message": "Repair completed"
-  },
-  "hosting.loader.reset-server": {
-    "message": "Reset server"
-  },
-  "hosting.loader.reset-server-description": {
-    "message": "Removes all data on your server, including your worlds, mods, and configuration files. Backups will remain and can be restored."
-  },
-  "hosting.loader.reset-to-onboarding-button": {
-    "message": "Reset to onboarding"
-  },
-  "hosting.loader.reset-to-onboarding-modal-description": {
-    "message": "This will send the server back into onboarding so setup can be completed again. Are you sure you want to continue?"
-  },
-  "hosting.loader.reset-to-onboarding-modal-title": {
-    "message": "Reset to onboarding"
-  },
-  "hosting.loader.reset-to-onboarding-success-description": {
-    "message": "The server has been returned to the onboarding flow."
-  },
-  "hosting.loader.reset-to-onboarding-success-title": {
-    "message": "Server reset to onboarding"
-  },
-  "hosting.loader.support-options-title": {
-    "message": "Support options"
-  },
   "hosting.plan.out-of-stock": {
     "message": "Out of stock"
   },
@@ -3336,7 +3282,7 @@
     "message": "Error resubscribing"
   },
   "settings.billing.pyro.resubscribe.request-submitted.text": {
-    "message": "If the server is currently suspended, it may take up to 10 minutes for another charge attempt to be made."
+    "message": "If the server is currently cancelled, it may take 10-15 minutes to set up the server."
   },
   "settings.billing.pyro.resubscribe.request-submitted.title": {
     "message": "Resubscription request submitted"
diff --git a/apps/frontend/src/pages/admin/billing/[id].vue b/apps/frontend/src/pages/admin/billing/[id].vue
index 98fafd5514..7549d7a004 100644
--- a/apps/frontend/src/pages/admin/billing/[id].vue
+++ b/apps/frontend/src/pages/admin/billing/[id].vue
@@ -519,7 +519,7 @@ async function modifyCharge() {
 		})
 		addNotification({
 			title: 'Modifications made',
-			text: 'If the server is currently suspended, it may take up to 10 minutes for another charge attempt to be made.',
+			text: 'If the server is currently cancelled, it may take up to 10 minutes for another charge attempt to be made.',
 			type: 'success',
 		})
 		await refreshCharges()
diff --git a/apps/frontend/src/pages/hosting/manage/[id].vue b/apps/frontend/src/pages/hosting/manage/[id].vue
index be76662c72..abc00180c8 100644
--- a/apps/frontend/src/pages/hosting/manage/[id].vue
+++ b/apps/frontend/src/pages/hosting/manage/[id].vue
@@ -1185,7 +1185,8 @@ const handleInstallationResult = async (data: Archon.Websocket.v0.WSInstallation
 }
 
 const updateStats = (currentStats: Stats['current']) => {
-	isConnected.value = true
+	if (!isMounted.value) return
+	if (!isConnected.value) isConnected.value = true
 	stats.value = {
 		current: currentStats,
 		past: { ...stats.value.current },
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/options.vue b/apps/frontend/src/pages/hosting/manage/[id]/options.vue
index 9d4697de05..6fa28b857f 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/options.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/options.vue
@@ -5,18 +5,13 @@
 </template>
 <script setup lang="ts">
 import {
-	CardIcon,
-	InfoIcon,
-	ListIcon,
-	ModrinthIcon,
-	SettingsIcon,
-	TextQuoteIcon,
-	UserIcon,
-	VersionIcon,
-	WrenchIcon,
-} from '@modrinth/assets'
-import { injectModrinthServerContext } from '@modrinth/ui'
+	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'
 
@@ -34,36 +29,28 @@ 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 navLinks = computed(() => [
-	{ icon: SettingsIcon, label: 'General', href: `/hosting/manage/${serverId}/options` },
-	{ icon: WrenchIcon, label: 'Platform', href: `/hosting/manage/${serverId}/options/loader` },
-	{ icon: TextQuoteIcon, label: 'Startup', href: `/hosting/manage/${serverId}/options/startup` },
-	{ icon: VersionIcon, label: 'Network', href: `/hosting/manage/${serverId}/options/network` },
-	{
-		icon: ListIcon,
-		label: 'Properties',
-		href: `/hosting/manage/${serverId}/options/properties`,
-		shown: server.value?.status !== 'installing',
-	},
-	{
-		icon: UserIcon,
-		label: 'Preferences',
-		href: `/hosting/manage/${serverId}/options/preferences`,
-	},
-	{
-		icon: CardIcon,
-		label: 'Billing',
-		href: `/settings/billing#server-${serverId}`,
-		external: true,
-		shown: isOwner.value,
-	},
-	{
-		icon: ModrinthIcon,
-		label: 'Admin Billing',
-		href: `/admin/billing/${ownerId.value}`,
-		external: true,
-		shown: isAdmin.value,
+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 },
+		})
 	},
-	{ icon: InfoIcon, label: 'Info', href: `/hosting/manage/${serverId}/options/info` },
-])
+})
+
+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
new file mode 100644
index 0000000000..b730006fff
--- /dev/null
+++ b/apps/frontend/src/pages/hosting/manage/[id]/options/advanced.vue
@@ -0,0 +1,7 @@
+<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
index db707f8a1e..6e470aaafc 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/options/billing.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/options/billing.vue
@@ -1,12 +1,7 @@
-<template>
-	<div class="universal-card">
-		<p>You can manage your server's billing from Settings > Billing and subscriptions.</p>
-		<ButtonStyled>
-			<NuxtLink to="/settings/billing">Go to Billing</NuxtLink>
-		</ButtonStyled>
-	</div>
-</template>
-
 <script setup lang="ts">
-import { ButtonStyled } from '@modrinth/ui'
+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
index 09d45c96bc..311bee0a9c 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/options/index.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/options/index.vue
@@ -1,335 +1,7 @@
-<template>
-	<div class="relative h-full w-full overflow-y-auto">
-		<div v-if="data" class="flex h-full w-full flex-col">
-			<div class="gap-2">
-				<div class="card flex flex-col gap-4">
-					<label for="server-name-field" class="flex flex-col gap-2">
-						<span class="text-lg font-bold text-contrast">Server name</span>
-						<span> This name is only visible on Modrinth.</span>
-					</label>
-					<div class="flex flex-col gap-2">
-						<StyledInput
-							id="server-name-field"
-							v-model="serverName"
-							wrapper-class="w-full md:w-[50%]"
-							:maxlength="48"
-							@keyup.enter="!serverName && saveGeneral"
-						/>
-						<span v-if="!serverName" class="text-sm text-rose-400">
-							Server name must be at least 1 character long.
-						</span>
-						<span v-if="!isValidServerName" class="text-sm text-rose-400">
-							Server name can contain any character.
-						</span>
-					</div>
-				</div>
-				<!-- WIP - disable for now
-        <div class="card flex flex-col gap-4">
-          <label for="server-motd-field" class="flex flex-col gap-2">
-            <span class="text-lg font-bold text-contrast">Server MOTD</span>
-            <span>
-              The message of the day is the message that players see when they log in to the server.
-            </span>
-          </label>
-          <UiServersMOTDEditor :server="props.server" />
-        </div>
-        -->
-
-				<div class="card flex flex-col gap-4">
-					<label for="server-subdomain" class="flex flex-col gap-2">
-						<span class="text-lg font-bold text-contrast">Custom URL</span>
-						<span> Your friends can connect to your server using this URL. </span>
-					</label>
-					<div class="flex w-full items-center gap-2 md:w-[60%]">
-						<StyledInput
-							id="server-subdomain"
-							v-model="serverSubdomain"
-							wrapper-class="h-[50%] w-[63%]"
-							:maxlength="32"
-							@keyup.enter="saveGeneral"
-						/>
-						.modrinth.gg
-					</div>
-					<div v-if="!isValidSubdomain" class="flex flex-col text-sm text-rose-400">
-						<span v-if="!isValidLengthSubdomain">
-							Subdomain must be at least 5 characters long.
-						</span>
-						<span v-if="!isValidCharsSubdomain">
-							Subdomain can only contain alphanumeric characters and dashes.
-						</span>
-					</div>
-				</div>
-
-				<div v-if="!data.is_medal" class="card flex flex-col gap-4">
-					<label for="server-icon-field" class="flex flex-col gap-2">
-						<span class="text-lg font-bold text-contrast">Server icon</span>
-						<span> This icon will be visible on the Minecraft server list and on Modrinth. </span>
-					</label>
-					<div class="flex gap-4">
-						<div
-							v-tooltip="'Upload a custom Icon'"
-							class="group relative flex w-fit cursor-pointer items-center gap-2 rounded-xl bg-table-alternateRow"
-							@dragover.prevent="onDragOver"
-							@dragleave.prevent="onDragLeave"
-							@drop.prevent="onDrop"
-							@click="triggerFileInput"
-						>
-							<input
-								v-if="icon"
-								id="server-icon-field"
-								type="file"
-								accept="image/png,image/jpeg,image/gif,image/webp"
-								hidden
-								@change="uploadFile"
-							/>
-							<div
-								class="absolute top-0 hidden size-24 flex-col items-center justify-center rounded-xl bg-button-bg p-2 opacity-80 group-hover:flex"
-							>
-								<EditIcon class="h-8 w-8 text-contrast" />
-							</div>
-							<ServerIcon class="size-24" :image="icon" />
-						</div>
-						<ButtonStyled>
-							<button
-								v-tooltip="'Synchronize icon with installed modpack'"
-								class="my-auto"
-								@click="resetIcon"
-							>
-								<TransferIcon /> Sync icon
-							</button>
-						</ButtonStyled>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div v-else />
-		<SaveBanner
-			:is-visible="!!hasUnsavedChanges && !!isValidServerName"
-			:server-id="serverId"
-			:is-updating="isUpdating || busyReasons.length > 0"
-			:save="saveGeneral"
-			:reset="resetGeneral"
-		/>
-	</div>
-</template>
-
 <script setup lang="ts">
-import { EditIcon, TransferIcon } from '@modrinth/assets'
-import {
-	injectModrinthClient,
-	injectModrinthServerContext,
-	injectNotificationManager,
-	ServerIcon,
-	StyledInput,
-} from '@modrinth/ui'
-import ButtonStyled from '@modrinth/ui/src/components/base/ButtonStyled.vue'
-import { useQueryClient } from '@tanstack/vue-query'
-
-import SaveBanner from '~/components/ui/servers/SaveBanner.vue'
-
-const { addNotification } = injectNotificationManager()
-const client = injectModrinthClient()
-const { server, serverId, busyReasons } = injectModrinthServerContext()
-const queryClient = useQueryClient()
-
-const data = server
-const serverName = ref(data.value?.name)
-const serverSubdomain = ref(data.value?.net?.domain ?? '')
-const isValidLengthSubdomain = computed(() => serverSubdomain.value.length >= 5)
-const isValidCharsSubdomain = computed(() => /^[a-zA-Z0-9-]+$/.test(serverSubdomain.value))
-const isValidSubdomain = computed(() => isValidLengthSubdomain.value && isValidCharsSubdomain.value)
-const icon = useState<string | undefined>(`server-icon-${serverId}`)
-
-const isUpdating = ref(false)
-const hasUnsavedChanges = computed(
-	() =>
-		(serverName.value && serverName.value !== data.value?.name) ||
-		serverSubdomain.value !== data.value?.net?.domain,
-)
-const isValidServerName = computed(() => (serverName.value?.length ?? 0) > 0)
-
-watch(serverName, (oldValue) => {
-	if (!isValidServerName.value) {
-		serverName.value = oldValue
-	}
-})
-
-const saveGeneral = async () => {
-	if (!isValidServerName.value || !isValidSubdomain.value) return
-
-	try {
-		isUpdating.value = true
-		if (serverName.value !== data.value?.name) {
-			await client.archon.servers_v0.updateName(serverId, serverName.value ?? '')
-		}
-		if (serverSubdomain.value !== data.value?.net?.domain) {
-			try {
-				const result = await client.archon.servers_v0.checkSubdomainAvailability(
-					serverSubdomain.value,
-				)
-				const available = result.available
-
-				if (!available) {
-					addNotification({
-						type: 'error',
-						title: 'Subdomain not available',
-						text: 'The subdomain you entered is already in use.',
-					})
-					return
-				}
-
-				await client.archon.servers_v0.changeSubdomain(serverId, serverSubdomain.value)
-			} catch (error) {
-				console.error('Error checking subdomain availability:', error)
-				addNotification({
-					type: 'error',
-					title: 'Error checking availability',
-					text: 'Failed to verify if the subdomain is available.',
-				})
-				return
-			}
-		}
-		await new Promise((resolve) => setTimeout(resolve, 500))
-		await queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] })
-		addNotification({
-			type: 'success',
-			title: 'Server settings updated',
-			text: 'Your server settings were successfully changed.',
-		})
-	} catch (error) {
-		console.error(error)
-		addNotification({
-			type: 'error',
-			title: 'Failed to update server settings',
-			text: 'An error occurred while attempting to update your server settings.',
-		})
-	} finally {
-		isUpdating.value = false
-	}
-}
-
-const resetGeneral = () => {
-	serverName.value = data.value?.name || ''
-	serverSubdomain.value = data.value?.net?.domain ?? ''
-}
-
-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')
-				useState(`server-icon-${serverId}`).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)
-
-			useState(`server-icon-${serverId}`).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 onDragOver = (e: DragEvent) => {
-	e.preventDefault()
-}
-
-const onDragLeave = (e: DragEvent) => {
-	e.preventDefault()
-}
-
-const onDrop = (e: DragEvent) => {
-	e.preventDefault()
-	uploadFile(e)
-}
-
-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()
-}
+import { ServerSettingsGeneralPage } from '@modrinth/ui'
 </script>
+
+<template>
+	<ServerSettingsGeneralPage class="card" />
+</template>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/options/info.vue b/apps/frontend/src/pages/hosting/manage/[id]/options/info.vue
deleted file mode 100644
index 35f89ad0ba..0000000000
--- a/apps/frontend/src/pages/hosting/manage/[id]/options/info.vue
+++ /dev/null
@@ -1,154 +0,0 @@
-<template>
-	<div class="h-full w-full gap-2 overflow-y-auto">
-		<div class="card">
-			<div class="flex flex-col gap-4">
-				<div class="flex flex-col justify-between gap-4 sm:flex-row">
-					<label class="flex flex-col gap-2">
-						<span class="text-lg font-bold text-contrast">SFTP</span>
-						<span> SFTP allows you to access your server's files from outside of Modrinth. </span>
-					</label>
-					<ButtonStyled>
-						<a
-							v-tooltip="'This button only works with compatible SFTP clients (e.g. WinSCP)'"
-							class="!w-full sm:!w-auto"
-							:href="sftpUrl"
-							target="_blank"
-						>
-							<ExternalIcon class="h-5 w-5" />
-							Launch SFTP
-						</a>
-					</ButtonStyled>
-				</div>
-
-				<div
-					class="flex w-full flex-row justify-between gap-2 rounded-xl bg-table-alternateRow p-4"
-				>
-					<div class="flex flex-col gap-2">
-						<span class="cursor-pointer font-bold text-contrast">
-							{{ data?.sftp_host }}
-						</span>
-
-						<span class="text-xs text-secondary">Server Address</span>
-					</div>
-
-					<ButtonStyled type="transparent">
-						<button
-							v-tooltip="'Copy SFTP server address'"
-							@click="copyToClipboard('Server address', data?.sftp_host)"
-						>
-							<CopyIcon class="h-5 w-5 hover:cursor-pointer" />
-						</button>
-					</ButtonStyled>
-				</div>
-				<div class="-mt-2 flex flex-col gap-2 sm:mt-0 sm:flex-row">
-					<div
-						class="flex w-full flex-col justify-center gap-2 rounded-xl bg-table-alternateRow px-4 py-2"
-					>
-						<div class="flex h-8 items-center justify-between">
-							<span class="font-bold text-contrast">
-								{{ data?.sftp_username }}
-							</span>
-
-							<ButtonStyled type="transparent">
-								<button
-									v-tooltip="'Copy SFTP username'"
-									@click="copyToClipboard('Username', data?.sftp_username)"
-								>
-									<CopyIcon class="h-5 w-5 hover:cursor-pointer" />
-								</button>
-							</ButtonStyled>
-						</div>
-						<span class="text-xs text-secondary">Username</span>
-					</div>
-					<div
-						class="flex w-full flex-col justify-center gap-2 rounded-xl bg-table-alternateRow p-4"
-					>
-						<div class="flex h-8 items-center justify-between">
-							<span class="font-bold text-contrast">
-								{{
-									showPassword ? data?.sftp_password : '*'.repeat(data?.sftp_password?.length ?? 0)
-								}}
-							</span>
-
-							<div class="flex flex-row items-center gap-1">
-								<ButtonStyled type="transparent">
-									<button
-										v-tooltip="'Copy SFTP password'"
-										@click="copyToClipboard('Password', data?.sftp_password)"
-									>
-										<CopyIcon class="h-5 w-5 hover:cursor-pointer" />
-									</button>
-								</ButtonStyled>
-								<ButtonStyled type="transparent">
-									<button
-										v-tooltip="showPassword ? 'Hide password' : 'Show password'"
-										@click="togglePassword"
-									>
-										<EyeIcon v-if="showPassword" class="h-5 w-5 hover:cursor-pointer" />
-										<EyeOffIcon v-else class="h-5 w-5 hover:cursor-pointer" />
-									</button>
-								</ButtonStyled>
-							</div>
-						</div>
-						<span class="text-xs text-secondary">Password</span>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="card">
-			<h2 class="text-xl font-bold">Info</h2>
-			<div class="rounded-xl bg-table-alternateRow p-4">
-				<table
-					class="min-w-full border-collapse overflow-hidden rounded-lg border-2 border-gray-300"
-				>
-					<tbody>
-						<tr v-for="property in properties" :key="property.name">
-							<td v-if="property.value !== 'Unknown'" class="py-3">
-								{{ property.name }}
-							</td>
-							<td v-if="property.value !== 'Unknown'" class="px-4">
-								<CopyCode :text="property.value" />
-							</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { CopyIcon, ExternalIcon, EyeIcon, EyeOffIcon } from '@modrinth/assets'
-import {
-	ButtonStyled,
-	CopyCode,
-	injectModrinthServerContext,
-	injectNotificationManager,
-} from '@modrinth/ui'
-
-const { addNotification } = injectNotificationManager()
-const { server: data, serverId } = injectModrinthServerContext()
-const showPassword = ref(false)
-
-const sftpUrl = computed(() => `sftp://${data.value?.sftp_username}@${data.value?.sftp_host}`)
-
-const togglePassword = () => {
-	showPassword.value = !showPassword.value
-}
-
-const copyToClipboard = (name: string, textToCopy?: string) => {
-	navigator.clipboard.writeText(textToCopy || '')
-	addNotification({
-		type: 'success',
-		title: `${name} copied to clipboard!`,
-	})
-}
-
-const properties = [
-	{ name: 'Server ID', value: serverId ?? 'Unknown' },
-	{ name: 'Node', value: data.value?.node?.instance ?? 'Unknown' },
-	{ name: 'Kind', value: data.value?.upstream?.kind ?? data.value?.loader ?? 'Unknown' },
-	{ name: 'Project ID', value: data.value?.upstream?.project_id ?? 'Unknown' },
-	{ name: 'Version ID', value: data.value?.upstream?.version_id ?? 'Unknown' },
-]
-</script>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/options/loader.vue b/apps/frontend/src/pages/hosting/manage/[id]/options/loader.vue
index d68397c2f6..e3a54224ea 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/options/loader.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/options/loader.vue
@@ -1,806 +1,16 @@
-<template>
-	<div class="flex flex-col gap-6 rounded-2xl bg-surface-3 p-6">
-		<ConfirmModal
-			ref="resetToOnboardingModal"
-			:title="formatMessage(messages.resetToOnboardingModalTitle)"
-			:description="formatMessage(messages.resetToOnboardingModalDescription)"
-			:proceed-label="formatMessage(messages.resetToOnboardingButton)"
-			@proceed="confirmResetToOnboarding"
-		/>
-
-		<InstallationSettingsLayout ref="installationSettingsLayout" @reset-server="setupModal?.show()">
-			<template #extra>
-				<div class="flex flex-col gap-2.5">
-					<span class="text-lg font-semibold text-contrast">{{
-						formatMessage(messages.resetServerTitle)
-					}}</span>
-					<span class="text-primary">
-						{{ formatMessage(messages.resetServerDescription) }}
-					</span>
-					<div>
-						<ButtonStyled color="red">
-							<button class="!shadow-none" :disabled="isInstalling" @click="setupModal?.show()">
-								<RotateCounterClockwiseIcon class="size-5" />
-								{{ formatMessage(commonMessages.resetServerButton) }}
-							</button>
-						</ButtonStyled>
-					</div>
-				</div>
-			</template>
-
-			<template #extra-modals>
-				<ServerSetupModal
-					ref="setupModal"
-					@reinstall="onReinstall"
-					@browse-modpacks="onBrowseModpacks"
-				/>
-			</template>
-		</InstallationSettingsLayout>
-
-		<div v-if="isSiteAdmin" class="flex flex-col gap-2.5">
-			<span class="text-lg font-semibold text-contrast">
-				{{ formatMessage(messages.supportOptionsTitle) }}
-			</span>
-			<div>
-				<ButtonStyled color="red">
-					<button
-						class="!shadow-none"
-						:disabled="!worldId || isResettingToOnboarding"
-						@click="resetToOnboardingModal?.show()"
-					>
-						<RotateCounterClockwiseIcon class="size-5" />
-						{{ formatMessage(messages.resetToOnboardingButton) }}
-					</button>
-				</ButtonStyled>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script setup lang="ts">
-import type { Archon, LauncherMeta } from '@modrinth/api-client'
-import { RotateCounterClockwiseIcon } from '@modrinth/assets'
-import {
-	ButtonStyled,
-	commonMessages,
-	ConfirmModal,
-	defineMessages,
-	formatLoaderLabel,
-	injectModrinthClient,
-	injectModrinthServerContext,
-	injectNotificationManager,
-	injectTags,
-	InstallationSettingsLayout,
-	provideInstallationSettings,
-	ServerSetupModal,
-	useDebugLogger,
-	useVIntl,
-} from '@modrinth/ui'
-import { useQuery, useQueryClient } from '@tanstack/vue-query'
-import { computed, ref, watch } from 'vue'
-
-const debug = useDebugLogger('LoaderPage')
-const client = injectModrinthClient()
-const { server, serverId, worldId, isSyncingContent, busyReasons } = injectModrinthServerContext()
-const { addNotification } = injectNotificationManager()
-const queryClient = useQueryClient()
-const tags = injectTags()
-const { formatMessage } = useVIntl()
-
-const messages = defineMessages({
-	resetServerTitle: {
-		id: 'hosting.loader.reset-server',
-		defaultMessage: 'Reset server',
-	},
-	resetServerDescription: {
-		id: 'hosting.loader.reset-server-description',
-		defaultMessage:
-			'Removes all data on your server, including your worlds, mods, and configuration files. Backups will remain and can be restored.',
-	},
-	loaderVersionLabel: {
-		id: 'hosting.loader.loader-version',
-		defaultMessage: '{loader, select, null {Loader} other {{loader}}} version',
-	},
-	failedToLoadVersions: {
-		id: 'hosting.loader.failed-to-load-versions',
-		defaultMessage: 'Failed to load versions',
-	},
-	failedToChangeVersion: {
-		id: 'hosting.loader.failed-to-change-version',
-		defaultMessage: 'Failed to change modpack version',
-	},
-	failedToSaveSettings: {
-		id: 'hosting.loader.failed-to-save-settings',
-		defaultMessage: 'Failed to save installation settings',
-	},
-	repairStartedTitle: {
-		id: 'hosting.loader.repair-started-title',
-		defaultMessage: 'Repair completed',
-	},
-	repairStartedText: {
-		id: 'hosting.loader.repair-started-text',
-		defaultMessage: 'Your server installation has been repaired.',
-	},
-	failedToRepair: {
-		id: 'hosting.loader.failed-to-repair',
-		defaultMessage: 'Failed to repair server',
-	},
-	failedToReinstall: {
-		id: 'hosting.loader.failed-to-reinstall',
-		defaultMessage: 'Failed to reinstall modpack',
-	},
-	failedToUnlink: {
-		id: 'hosting.loader.failed-to-unlink',
-		defaultMessage: 'Failed to unlink modpack',
-	},
-	supportOptionsTitle: {
-		id: 'hosting.loader.support-options-title',
-		defaultMessage: 'Support options',
-	},
-	resetToOnboardingButton: {
-		id: 'hosting.loader.reset-to-onboarding-button',
-		defaultMessage: 'Reset to onboarding',
-	},
-	resetToOnboardingModalTitle: {
-		id: 'hosting.loader.reset-to-onboarding-modal-title',
-		defaultMessage: 'Reset to onboarding',
-	},
-	resetToOnboardingModalDescription: {
-		id: 'hosting.loader.reset-to-onboarding-modal-description',
-		defaultMessage:
-			'This will send the server back into onboarding so setup can be completed again. Are you sure you want to continue?',
-	},
-	resetToOnboardingSuccessTitle: {
-		id: 'hosting.loader.reset-to-onboarding-success-title',
-		defaultMessage: 'Server reset to onboarding',
-	},
-	resetToOnboardingSuccessDescription: {
-		id: 'hosting.loader.reset-to-onboarding-success-description',
-		defaultMessage: 'The server has been returned to the onboarding flow.',
-	},
-	failedToResetToOnboarding: {
-		id: 'hosting.loader.failed-to-reset-to-onboarding',
-		defaultMessage: 'Failed to reset server to onboarding',
-	},
-})
+import { ServerSettingsInstallationPage } from '@modrinth/ui'
 
 const emit = defineEmits<{
-	reinstall: [any?]
+	reinstall: [unknown?]
 	'reinstall-failed': []
 }>()
-
-const isInstalling = computed(() => {
-	const val =
-		server.value?.status === 'installing' || isSyncingContent.value || busyReasons.value.length > 0
-	debug(
-		'isInstalling:',
-		val,
-		'server.status:',
-		server.value?.status,
-		'isSyncingContent:',
-		isSyncingContent.value,
-	)
-	return val
-})
-const installationSettingsLayout = ref<InstanceType<typeof InstallationSettingsLayout>>()
-const setupModal = ref<InstanceType<typeof ServerSetupModal>>()
-
-async function invalidateServerState() {
-	debug('invalidateServerState: starting')
-	await Promise.all([
-		queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] }),
-		queryClient.invalidateQueries({ queryKey: ['content', 'list', 'v1', serverId] }),
-	])
-	debug('invalidateServerState: complete')
-}
-
-const addonsQuery = useQuery({
-	queryKey: computed(() => ['content', 'list', 'v1', serverId]),
-	queryFn: () =>
-		client.archon.content_v1.getAddons(serverId, worldId.value!, { from_modpack: false }),
-	enabled: computed(() => worldId.value !== null),
-})
-
-const modpack = computed(() => addonsQuery.data.value?.modpack ?? null)
-
-const modpackProjectId = computed(() => {
-	const spec = modpack.value?.spec
-	return spec?.platform === 'modrinth' ? spec.project_id : null
-})
-
-const modpackVersionsQuery = useQuery({
-	queryKey: computed(() => ['labrinth', 'versions', 'v2', modpackProjectId.value]),
-	queryFn: () =>
-		client.labrinth.versions_v2.getProjectVersions(modpackProjectId.value!, {
-			include_changelog: false,
-		}),
-	enabled: computed(() => !!modpackProjectId.value),
-})
-
-const auth = await useAuth()
-const isSiteAdmin = computed(() => auth.value?.user?.role === 'admin')
-
-const editingPlatform = ref(server.value?.loader?.toLowerCase() ?? 'vanilla')
-const editingGameVersion = ref(server.value?.mc_version ?? '')
-const resetToOnboardingModal = ref<InstanceType<typeof ConfirmModal>>()
-const isResettingToOnboarding = ref(false)
-
-const modLoaders = ['fabric', 'forge', 'quilt', 'neoforge']
-
-function toApiLoaderName(loader: string): string {
-	return loader === 'neoforge' ? 'neo' : loader
-}
-
-const apiLoaderName = computed(() =>
-	modLoaders.includes(editingPlatform.value) ? toApiLoaderName(editingPlatform.value) : null,
-)
-
-const manifestQuery = useQuery({
-	queryKey: computed(() => ['loader-manifest', apiLoaderName.value] as const),
-	queryFn: () => client.launchermeta.manifest_v0.getManifest(apiLoaderName.value!),
-	enabled: computed(() => !!apiLoaderName.value),
-	staleTime: 5 * 60 * 1000,
-})
-
-const paperBuildsQuery = useQuery({
-	queryKey: computed(() => ['paper-builds', editingGameVersion.value] as const),
-	queryFn: () => client.paper.versions_v3.getBuilds(editingGameVersion.value),
-	enabled: computed(() => editingPlatform.value === 'paper' && !!editingGameVersion.value),
-	staleTime: 5 * 60 * 1000,
-})
-
-const purpurBuildsQuery = useQuery({
-	queryKey: computed(() => ['purpur-builds', editingGameVersion.value] as const),
-	queryFn: () => client.purpur.versions_v2.getBuilds(editingGameVersion.value),
-	enabled: computed(() => editingPlatform.value === 'purpur' && !!editingGameVersion.value),
-	staleTime: 5 * 60 * 1000,
-})
-
-const paperSupportedVersionsQuery = useQuery({
-	queryKey: ['paper-supported-versions'] as const,
-	queryFn: async () => {
-		const project = await client.paper.versions_v3.getProject()
-		return new Set(Object.values(project.versions).flat())
-	},
-	enabled: computed(() => editingPlatform.value === 'paper'),
-	staleTime: 5 * 60 * 1000,
-})
-
-const purpurSupportedVersionsQuery = useQuery({
-	queryKey: ['purpur-supported-versions'] as const,
-	queryFn: async () => {
-		const project = await client.purpur.versions_v2.getProject()
-		return new Set(project.versions)
-	},
-	enabled: computed(() => editingPlatform.value === 'purpur'),
-	staleTime: 5 * 60 * 1000,
-})
-
-type LoaderVersionEntry = LauncherMeta.Manifest.v0.LoaderVersion
-
-function getLoaderVersionsForGameVersion(
-	loader: string,
-	gameVersion: string,
-): LoaderVersionEntry[] {
-	if (loader === 'paper') {
-		return (paperBuildsQuery.data.value?.builds ?? [])
-			.toSorted((a, b) => b - a)
-			.map((b) => ({ id: String(b), stable: true }))
-	}
-	if (loader === 'purpur') {
-		return (purpurBuildsQuery.data.value?.builds.all ?? [])
-			.toSorted((a, b) => parseInt(b) - parseInt(a))
-			.map((b) => ({ id: b, stable: true }))
-	}
-
-	const manifest = manifestQuery.data.value?.gameVersions
-	if (!manifest) return []
-
-	const placeholder = manifest.find((x) => x.id === '${modrinth.gameVersion}')
-	if (placeholder) return placeholder.loaders
-
-	const entry = manifest.find((x) => x.id === gameVersion)
-	return entry?.loaders ?? []
-}
-
-function toApiLoader(loader: string): Archon.Content.v1.Modloader {
-	if (loader === 'neoforge') return 'neo_forge'
-	return loader as Archon.Content.v1.Modloader
-}
-
-provideInstallationSettings({
-	loading: computed(() => !server.value || addonsQuery.isLoading.value),
-	installationInfo: computed(() => {
-		const addons = addonsQuery.data.value
-		const rawLoader = addons?.modloader ?? server.value?.loader ?? null
-		const loader = rawLoader ? formatLoaderLabel(rawLoader) : null
-		const gameVersion = addons?.game_version ?? server.value?.mc_version ?? null
-		const loaderVersion = addons?.modloader_version ?? server.value?.loader_version ?? null
-
-		debug('installationInfo computed:', {
-			'addons?.modloader': addons?.modloader,
-			'server.loader': server.value?.loader,
-			rawLoader,
-			loader,
-			'addons?.game_version': addons?.game_version,
-			'server.mc_version': server.value?.mc_version,
-			gameVersion,
-			'addons?.modloader_version': addons?.modloader_version,
-			'server.loader_version': server.value?.loader_version,
-			loaderVersion,
-			'addonsQuery.isLoading': addonsQuery.isLoading.value,
-			'addonsQuery.isFetching': addonsQuery.isFetching.value,
-		})
-
-		const rows = [
-			{ label: formatMessage(commonMessages.platformLabel), value: loader },
-			{ label: formatMessage(commonMessages.gameVersionLabel), value: gameVersion },
-		]
-		if (loader !== 'Vanilla') {
-			rows.push({
-				label: formatMessage(messages.loaderVersionLabel, { loader: loader ?? 'null' }),
-				value: loaderVersion,
-			})
-		}
-		return rows
-	}),
-	isLinked: computed(() => {
-		const val = !!modpack.value
-		debug('isLinked:', val, 'modpack:', modpackProjectId.value)
-		return val
-	}),
-	isBusy: isInstalling,
-	modpack: computed(() => {
-		if (!modpack.value) return null
-		const isLocal = modpack.value.spec.platform === 'local_file'
-		return {
-			iconUrl: modpack.value.icon_url,
-			title:
-				modpack.value.title ?? (isLocal ? modpack.value.spec.name : modpack.value.spec.project_id),
-			link: modpackProjectId.value ? `/project/${modpackProjectId.value}` : undefined,
-			versionNumber: modpack.value.version_number,
-			filename: isLocal ? modpack.value.spec.filename : undefined,
-			owner: modpack.value.owner
-				? {
-						id: modpack.value.owner.id,
-						name: modpack.value.owner.name,
-						iconUrl: modpack.value.owner.icon_url,
-						type: modpack.value.owner.type as 'user' | 'organization',
-					}
-				: undefined,
-		}
-	}),
-	currentPlatform: computed(() => server.value?.loader?.toLowerCase() ?? 'vanilla'),
-	currentGameVersion: computed(() => server.value?.mc_version ?? ''),
-	currentLoaderVersion: computed(() => server.value?.loader_version ?? ''),
-	availablePlatforms: ['vanilla', 'fabric', 'neoforge', 'forge', 'quilt', 'paper', 'purpur'],
-
-	editingPlatformRef: editingPlatform,
-	editingGameVersionRef: editingGameVersion,
-
-	resolveGameVersions(loader, showSnapshots) {
-		const versions = showSnapshots
-			? tags.gameVersions.value
-			: tags.gameVersions.value.filter((v) => v.version_type === 'release')
-
-		if (loader && loader !== 'vanilla') {
-			if (loader === 'paper') {
-				const supported = paperSupportedVersionsQuery.data.value
-				if (supported) {
-					return versions
-						.filter((v) => supported.has(v.version))
-						.map((v) => ({ value: v.version, label: v.version }))
-				}
-			} else if (loader === 'purpur') {
-				const supported = purpurSupportedVersionsQuery.data.value
-				if (supported) {
-					return versions
-						.filter((v) => supported.has(v.version))
-						.map((v) => ({ value: v.version, label: v.version }))
-				}
-			} else {
-				const manifest = manifestQuery.data.value?.gameVersions
-				if (manifest) {
-					const hasPlaceholder = manifest.some((x) => x.id === '${modrinth.gameVersion}')
-					if (!hasPlaceholder) {
-						const supportedVersions = new Set(
-							manifest.filter((x) => x.loaders.length > 0).map((x) => x.id),
-						)
-						return versions
-							.filter((v) => supportedVersions.has(v.version))
-							.map((v) => ({ value: v.version, label: v.version }))
-					}
-				}
-			}
-		}
-
-		return versions.map((v) => ({ value: v.version, label: v.version }))
-	},
-
-	resolveLoaderVersions(loader, gameVersion) {
-		if (loader === 'vanilla' || !gameVersion) return []
-		return getLoaderVersionsForGameVersion(loader, gameVersion)
-	},
-
-	resolveHasSnapshots(loader) {
-		if (loader === 'vanilla') {
-			return tags.gameVersions.value.some((v) => v.version_type !== 'release')
-		}
-		if (loader === 'paper') {
-			const supported = paperSupportedVersionsQuery.data.value
-			if (!supported) return false
-			return tags.gameVersions.value.some(
-				(v) => v.version_type !== 'release' && supported.has(v.version),
-			)
-		}
-		if (loader === 'purpur') {
-			const supported = purpurSupportedVersionsQuery.data.value
-			if (!supported) return false
-			return tags.gameVersions.value.some(
-				(v) => v.version_type !== 'release' && supported.has(v.version),
-			)
-		}
-		const manifest = manifestQuery.data.value?.gameVersions
-		if (!manifest) return false
-		const hasPlaceholder = manifest.some((x) => x.id === '${modrinth.gameVersion}')
-		if (hasPlaceholder) {
-			return tags.gameVersions.value.some((v) => v.version_type !== 'release')
-		}
-		const supportedVersions = new Set(manifest.filter((x) => x.loaders.length > 0).map((x) => x.id))
-		const supported = tags.gameVersions.value.filter((v) => supportedVersions.has(v.version))
-		return supported.some((v) => v.version_type !== 'release')
-	},
-
-	async save(platform, gameVersion, loaderVersionId) {
-		debug('save: called with', { platform, gameVersion, loaderVersionId })
-		const currentPlatform = server.value?.loader?.toLowerCase() ?? 'vanilla'
-		const platformChanged = platform !== currentPlatform
-		const gameVersionChanged = gameVersion !== (server.value?.mc_version ?? '')
-		const loaderVersionChanged =
-			loaderVersionId !== null && loaderVersionId !== (server.value?.loader_version ?? '')
-
-		let resolvedLoaderVersion = loaderVersionId
-		if (!resolvedLoaderVersion && platform !== 'vanilla') {
-			const versions = getLoaderVersionsForGameVersion(platform, gameVersion)
-			resolvedLoaderVersion = versions[0]?.id ?? null
-		}
-
-		debug('save: emitting reinstall before API call')
-		emit(
-			'reinstall',
-			platformChanged || loaderVersionChanged
-				? { loader: platform, lVersion: resolvedLoaderVersion, mVersion: gameVersion }
-				: { mVersion: gameVersion },
-		)
-		try {
-			if (platformChanged || loaderVersionChanged) {
-				const request: Archon.Content.v1.InstallWorldContent = {
-					content_variant: 'bare',
-					loader: toApiLoader(platform),
-					version: resolvedLoaderVersion ?? '',
-					game_version: gameVersion || undefined,
-					soft_override: true,
-				}
-				debug('save: platform/loader version changed, calling installContent', request)
-				await client.archon.content_v1.installContent(serverId, worldId.value!, request)
-			} else if (gameVersionChanged) {
-				debug('save: game version only, calling applyGameVersionUpdate', gameVersion)
-				await client.archon.content_v1.applyGameVersionUpdate(serverId, worldId.value!, gameVersion)
-			}
-			debug('save: succeeded, invalidating')
-			invalidateServerState()
-		} catch (err) {
-			debug('save: failed, emitting reinstall-failed', err)
-			emit('reinstall-failed')
-			addNotification({
-				type: 'error',
-				text: err instanceof Error ? err.message : formatMessage(messages.failedToSaveSettings),
-			})
-			throw err
-		}
-	},
-
-	async repair() {
-		debug('repair: called')
-		try {
-			await client.archon.content_v1.repair(serverId, worldId.value!)
-			debug('repair: API succeeded, invalidating')
-			await invalidateServerState()
-			addNotification({
-				type: 'success',
-				title: formatMessage(messages.repairStartedTitle),
-				text: formatMessage(messages.repairStartedText),
-			})
-		} catch (err) {
-			debug('repair: failed', err)
-			addNotification({
-				type: 'error',
-				text: err instanceof Error ? err.message : formatMessage(messages.failedToRepair),
-			})
-		}
-	},
-
-	async reinstallModpack() {
-		if (!modpack.value || modpack.value.spec.platform !== 'modrinth') return
-		debug(
-			'reinstallModpack: called, project:',
-			modpack.value.spec.project_id,
-			'version:',
-			modpack.value.spec.version_id,
-		)
-		debug('reinstallModpack: emitting reinstall before API call')
-		emit('reinstall')
-		try {
-			await client.archon.content_v1.installContent(serverId, worldId.value!, {
-				content_variant: 'modpack',
-				spec: {
-					platform: 'modrinth',
-					project_id: modpack.value.spec.project_id,
-					version_id: modpack.value.spec.version_id,
-				},
-				soft_override: true,
-			})
-			debug('reinstallModpack: installContent succeeded, invalidating')
-			invalidateServerState()
-		} catch (err) {
-			debug('reinstallModpack: failed, emitting reinstall-failed', err)
-			emit('reinstall-failed')
-			addNotification({
-				type: 'error',
-				text: err instanceof Error ? err.message : formatMessage(messages.failedToReinstall),
-			})
-		}
-	},
-
-	async unlinkModpack() {
-		debug('unlinkModpack: called')
-		const previousData = addonsQuery.data.value
-		if (previousData) {
-			debug('unlinkModpack: optimistically removing modpack from cache')
-			queryClient.setQueryData(['content', 'list', 'v1', serverId], {
-				...previousData,
-				modpack: null,
-			})
-		}
-
-		try {
-			await client.archon.content_v1.unlinkModpack(serverId, worldId.value!)
-			debug('unlinkModpack: API succeeded')
-		} catch (err) {
-			debug('unlinkModpack: failed, reverting cache', err)
-			if (previousData) {
-				queryClient.setQueryData(['content', 'list', 'v1', serverId], previousData)
-			}
-			addNotification({
-				type: 'error',
-				text: err instanceof Error ? err.message : formatMessage(messages.failedToUnlink),
-			})
-		} finally {
-			debug('unlinkModpack: invalidating queries')
-			await Promise.all([
-				queryClient.invalidateQueries({
-					queryKey: ['servers', 'detail', serverId],
-				}),
-				queryClient.invalidateQueries({
-					queryKey: ['content', 'list', 'v1', serverId],
-				}),
-			])
-			debug('unlinkModpack: invalidation complete')
-		}
-	},
-
-	getCachedModpackVersions: () => modpackVersionsQuery.data.value ?? null,
-
-	async fetchModpackVersions() {
-		debug('fetchModpackVersions: called, project:', modpackProjectId.value)
-		if (!modpackProjectId.value) throw new Error('No modpack project ID')
-		try {
-			const versions = await client.labrinth.versions_v2.getProjectVersions(
-				modpackProjectId.value,
-				{
-					include_changelog: false,
-				},
-			)
-			debug('fetchModpackVersions: got', versions.length, 'versions')
-			return versions
-		} catch (err) {
-			debug('fetchModpackVersions: failed', err)
-			addNotification({
-				type: 'error',
-				text: err instanceof Error ? err.message : formatMessage(messages.failedToLoadVersions),
-			})
-			throw err
-		}
-	},
-
-	async getVersionChangelog(versionId) {
-		debug('getVersionChangelog: called, versionId:', versionId)
-		try {
-			return await client.labrinth.versions_v2.getVersion(versionId)
-		} catch {
-			debug('getVersionChangelog: failed for', versionId)
-			return null
-		}
-	},
-
-	async onModpackVersionConfirm(version) {
-		if (!modpackProjectId.value) return
-		debug('onModpackVersionConfirm: called, version:', version.id)
-		debug('onModpackVersionConfirm: emitting reinstall before API call')
-		emit('reinstall')
-		try {
-			await client.archon.content_v1.installContent(serverId, worldId.value!, {
-				content_variant: 'modpack',
-				spec: {
-					platform: 'modrinth',
-					project_id: modpackProjectId.value,
-					version_id: version.id,
-				},
-				soft_override: true,
-			})
-			debug('onModpackVersionConfirm: installContent succeeded, invalidating')
-			invalidateServerState()
-		} catch (err) {
-			debug('onModpackVersionConfirm: failed, emitting reinstall-failed', err)
-			emit('reinstall-failed')
-			addNotification({
-				type: 'error',
-				text: err instanceof Error ? err.message : formatMessage(messages.failedToChangeVersion),
-			})
-		}
-	},
-
-	updaterModalProps: computed(() => ({
-		isApp: false,
-		currentVersionId:
-			modpack.value?.spec.platform === 'modrinth' ? modpack.value.spec.version_id : '',
-		projectIconUrl: modpack.value?.icon_url ?? undefined,
-		projectName:
-			modpack.value?.title ?? modpackProjectId.value ?? formatMessage(commonMessages.modpackLabel),
-		currentGameVersion: addonsQuery.data.value?.game_version ?? server.value?.mc_version ?? '',
-		currentLoader: addonsQuery.data.value?.modloader ?? server.value?.loader ?? '',
-	})),
-
-	isServer: true,
-	isApp: false,
-	showModpackVersionActions: computed(() => modpack.value?.spec.platform === 'modrinth'),
-
-	lockPlatform: false,
-	hideLoaderVersion: false,
-
-	async disableAllContent() {
-		debug('disableAllContent: fetching all addons')
-		const addons = await client.archon.content_v1.getAddons(serverId, worldId.value!)
-		const items = (addons.addons ?? [])
-			.filter((a) => !a.disabled)
-			.map((a) => ({ kind: a.kind, filename: a.filename }))
-		if (items.length > 0) {
-			debug('disableAllContent: disabling', items.length, 'addons')
-			await client.archon.content_v1.disableAddons(serverId, worldId.value!, items)
-		}
-		debug('disableAllContent: done')
-	},
-
-	async disableIncompatibleContent(diffs) {
-		debug('disableIncompatibleContent: processing', diffs.length, 'diffs')
-		const addons = await client.archon.content_v1.getAddons(serverId, worldId.value!)
-		const removedFiles = new Set(diffs.filter((d) => d.type === 'removed').map((d) => d.fileName))
-		const items = (addons.addons ?? [])
-			.filter((a) => !a.disabled && removedFiles.has(a.filename))
-			.map((a) => ({ kind: a.kind, filename: a.filename }))
-		if (items.length > 0) {
-			debug('disableIncompatibleContent: disabling', items.length, 'addons')
-			await client.archon.content_v1.disableAddons(serverId, worldId.value!, items)
-		}
-		debug('disableIncompatibleContent: done')
-	},
-
-	async saveWithoutAutoFix(platform, gameVersion, loaderVersionId) {
-		debug('saveWithoutAutoFix: called with', { platform, gameVersion, loaderVersionId })
-		let resolvedLoaderVersion = loaderVersionId
-		if (!resolvedLoaderVersion && platform !== 'vanilla') {
-			const versions = getLoaderVersionsForGameVersion(platform, gameVersion)
-			resolvedLoaderVersion = versions[0]?.id ?? null
-		}
-		emit('reinstall', { loader: platform, lVersion: resolvedLoaderVersion, mVersion: gameVersion })
-		try {
-			const request: Archon.Content.v1.InstallWorldContent = {
-				content_variant: 'bare',
-				loader: toApiLoader(platform),
-				version: resolvedLoaderVersion ?? '',
-				game_version: gameVersion || undefined,
-				soft_override: true,
-			}
-			debug('saveWithoutAutoFix: calling installContent', request)
-			await client.archon.content_v1.installContent(serverId, worldId.value!, request)
-			debug('saveWithoutAutoFix: succeeded, invalidating')
-			invalidateServerState()
-		} catch (err) {
-			debug('saveWithoutAutoFix: failed', err)
-			emit('reinstall-failed')
-			addNotification({
-				type: 'error',
-				text: err instanceof Error ? err.message : formatMessage(messages.failedToSaveSettings),
-			})
-			throw err
-		}
-	},
-
-	async previewSave(_platform, gameVersion, _loaderVersionId, signal) {
-		const result = await client.archon.content_v1.getUpdateGameVersionPreview(
-			serverId,
-			worldId.value!,
-			gameVersion,
-			signal,
-		)
-		if (result.addon_changes.length === 0 && !result.has_unknown_content) return null
-		return {
-			diffs: result.addon_changes.map((diff) => ({
-				type: diff.type,
-				projectName: diff.project?.title ?? undefined,
-				fileName: diff.file_name ?? undefined,
-				currentVersionName: diff.current_version?.version_number ?? undefined,
-				newVersionName: diff.new_version?.version_number ?? undefined,
-			})),
-			newGameVersion: result.new_game_version,
-			newLoaderVersion: result.new_loader_version,
-			hasUnknownContent: result.has_unknown_content,
-		}
-	},
-})
-
-watch(
-	() => server.value?.status,
-	(newStatus, oldStatus) => {
-		debug('status watcher:', oldStatus, '->', newStatus, {
-			'server.loader': server.value?.loader,
-			'server.mc_version': server.value?.mc_version,
-			'server.loader_version': server.value?.loader_version,
-		})
-		if (oldStatus === 'installing' && newStatus === 'available') {
-			debug('status installing->available, resetting editing refs')
-			editingPlatform.value = server.value?.loader?.toLowerCase() ?? 'vanilla'
-			editingGameVersion.value = server.value?.mc_version ?? ''
-		}
-	},
-)
-
-function onReinstall(event?: any) {
-	installationSettingsLayout.value?.cancelEditing()
-	emit('reinstall', event)
-}
-
-function onBrowseModpacks() {
-	debug('onBrowseModpacks: navigating to modpack discovery')
-	navigateTo({
-		path: '/discover/modpacks',
-		query: { sid: serverId, from: 'reset-server', wid: worldId.value },
-	})
-}
-
-async function confirmResetToOnboarding() {
-	if (!worldId.value) return
-
-	try {
-		isResettingToOnboarding.value = true
-		await client.archon.servers_v1.resetToOnboarding(serverId, worldId.value)
-		server.value.flows = { intro: true }
-		await Promise.all([
-			queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] }),
-			queryClient.invalidateQueries({ queryKey: ['servers', 'v1', 'detail', serverId] }),
-		])
-		addNotification({
-			type: 'success',
-			title: formatMessage(messages.resetToOnboardingSuccessTitle),
-			text: formatMessage(messages.resetToOnboardingSuccessDescription),
-		})
-	} catch (err) {
-		addNotification({
-			type: 'error',
-			text: err instanceof Error ? err.message : formatMessage(messages.failedToResetToOnboarding),
-		})
-	} finally {
-		isResettingToOnboarding.value = false
-	}
-}
 </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
index f9fd5f60eb..a63867e288 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/options/network.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/options/network.vue
@@ -1,507 +1,7 @@
-<template>
-	<div class="contents">
-		<NewModal ref="newAllocationModal" header="New allocation">
-			<form class="flex flex-col gap-2 md:w-[600px]" @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-start gap-4">
-					<ButtonStyled color="brand">
-						<button :disabled="!newAllocationName" type="submit">
-							<PlusIcon /> Create allocation
-						</button>
-					</ButtonStyled>
-					<ButtonStyled>
-						<button @click="newAllocationModal?.hide()">Cancel</button>
-					</ButtonStyled>
-				</div>
-			</form>
-		</NewModal>
-
-		<NewModal ref="editAllocationModal" header="Edit allocation">
-			<form class="flex flex-col gap-2 md:w-[600px]" @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"
-					wrapper-class="w-full"
-					:maxlength="32"
-					placeholder="e.g. Secondary allocation"
-				/>
-				<div class="mb-1 mt-4 flex justify-start gap-4">
-					<ButtonStyled color="brand">
-						<button :disabled="!newAllocationName" type="submit">
-							<SaveIcon /> Update allocation
-						</button>
-					</ButtonStyled>
-					<ButtonStyled>
-						<button @click="editAllocationModal?.hide()">Cancel</button>
-					</ButtonStyled>
-				</div>
-			</form>
-		</NewModal>
-
-		<ConfirmModal
-			ref="confirmDeleteModal"
-			title="Deleting allocation"
-			:description="`You are deleting the allocation ${allocationToDelete}. This cannot be reserved again. Are you sure you want to proceed?`"
-			proceed-label="Delete"
-			@proceed="confirmDeleteAllocation"
-		/>
-
-		<div class="relative h-full w-full overflow-y-auto">
-			<div
-				v-if="allocationsError"
-				class="flex w-full flex-col items-center justify-center gap-4 p-4"
-			>
-				<div class="flex max-w-lg flex-col items-center rounded-3xl bg-bg-raised p-6 shadow-xl">
-					<div class="flex flex-col items-center text-center">
-						<div class="flex flex-col items-center gap-4">
-							<div class="grid place-content-center rounded-full bg-bg-orange p-4">
-								<IssuesIcon class="size-12 text-orange" />
-							</div>
-							<h1 class="m-0 mb-2 w-fit text-4xl font-bold">Failed to load network settings</h1>
-						</div>
-						<p class="text-lg text-secondary">
-							We couldn't load your server's network settings. Here's what we know:
-							<span class="break-all font-mono">{{
-								allocationsError?.message ?? 'Unknown error'
-							}}</span>
-						</p>
-						<ButtonStyled size="large" color="brand" @click="() => refetchAllocations()">
-							<button class="mt-6 !w-full">Retry</button>
-						</ButtonStyled>
-					</div>
-				</div>
-			</div>
-			<div v-else-if="data" class="flex h-full w-full flex-col justify-between gap-4">
-				<div class="flex h-full flex-col">
-					<!-- Subdomain section -->
-					<div class="card flex flex-col gap-4">
-						<div class="flex w-full flex-col items-center justify-between gap-4 sm:flex-row">
-							<label for="user-domain" class="flex flex-col gap-2">
-								<span class="text-lg font-bold text-contrast">Generated DNS records</span>
-								<span>
-									Set up your personal domain to connect to your server via custom DNS records.
-								</span>
-							</label>
-
-							<ButtonStyled>
-								<button
-									class="!w-full sm:!w-auto"
-									:disabled="userDomain == ''"
-									@click="exportDnsRecords"
-								>
-									<UploadIcon />
-									<span>Export DNS records</span>
-								</button>
-							</ButtonStyled>
-						</div>
-
-						<StyledInput
-							id="user-domain"
-							v-model="userDomain"
-							wrapper-class="w-full md:w-[50%]"
-							:maxlength="64"
-							:placeholder="exampleDomain"
-						/>
-
-						<div
-							class="flex max-w-full flex-none overflow-auto rounded-xl bg-table-alternateRow px-4 py-2"
-						>
-							<table
-								class="w-full flex-none border-collapse truncate rounded-lg border-2 border-gray-300"
-							>
-								<tbody class="w-full">
-									<tr v-for="record in dnsRecords" :key="record.content" class="w-full">
-										<td class="w-1/6 py-3 pr-4 md:w-1/5 md:pr-8 lg:w-1/4 lg:pr-12">
-											<div class="flex flex-col gap-1" @click="copyText(record.type)">
-												<span
-													class="text-md font-bold tracking-wide text-contrast hover:cursor-pointer"
-												>
-													{{ record.type }}
-												</span>
-												<span class="text-xs text-secondary">Type</span>
-											</div>
-										</td>
-										<td class="w-2/6 py-3 md:w-1/3">
-											<div class="flex flex-col gap-1" @click="copyText(record.name)">
-												<span
-													class="text-md truncate font-bold tracking-wide text-contrast hover:cursor-pointer"
-												>
-													{{ record.name }}
-												</span>
-												<span class="text-xs text-secondary">Name</span>
-											</div>
-										</td>
-										<td class="w-3/6 py-3 pl-4 md:w-5/12 lg:w-5/12">
-											<div class="flex flex-col gap-1" @click="copyText(record.content)">
-												<span
-													class="text-md w-fit truncate font-bold tracking-wide text-contrast hover:cursor-pointer"
-												>
-													{{ record.content }}
-												</span>
-												<span class="text-xs text-secondary">Content</span>
-											</div>
-										</td>
-									</tr>
-								</tbody>
-							</table>
-						</div>
-
-						<div class="flex items-center gap-2">
-							<InfoIcon class="hidden sm:block" />
-							<span class="text-sm text-secondary">
-								You must own your own domain to use this feature.
-							</span>
-						</div>
-					</div>
-
-					<!-- Allocations section -->
-					<div class="card flex flex-col gap-4">
-						<div class="flex w-full flex-col items-center justify-between gap-4 sm:flex-row">
-							<div class="flex flex-col gap-2">
-								<span class="text-lg font-bold text-contrast">Allocations</span>
-								<span>
-									Configure additional ports for internet-facing features like map viewers or voice
-									chat mods.
-								</span>
-							</div>
-
-							<ButtonStyled type="standard" @click="showNewAllocationModal">
-								<button class="!w-full sm:!w-auto">
-									<PlusIcon />
-									<span>New allocation</span>
-								</button>
-							</ButtonStyled>
-						</div>
-
-						<div class="flex w-full flex-col overflow-hidden rounded-xl bg-table-alternateRow p-4">
-							<!-- Primary allocation -->
-							<div class="flex flex-col justify-between gap-2 sm:flex-row sm:items-center">
-								<span class="text-md font-bold tracking-wide text-contrast">
-									Primary allocation
-								</span>
-
-								<CopyCode :text="`${serverIP}:${serverPrimaryPort}`" />
-							</div>
-						</div>
-
-						<div
-							v-if="allocations?.[0]"
-							class="flex w-full flex-col gap-4 overflow-hidden rounded-xl bg-table-alternateRow p-4"
-						>
-							<div
-								v-for="allocation in allocations"
-								:key="allocation.port"
-								class="border-border flex flex-col justify-between gap-4 sm:flex-row sm:items-center"
-							>
-								<div class="flex flex-row items-center gap-4">
-									<VersionIcon class="h-7 w-7 flex-none rotate-90" />
-									<div class="flex w-[20rem] flex-col justify-between sm:flex-row sm:items-center">
-										<div class="flex flex-col gap-1">
-											<span class="text-md font-bold tracking-wide text-contrast">
-												{{ allocation.name }}
-											</span>
-											<span class="hidden text-xs text-secondary sm:block">Name</span>
-										</div>
-										<div class="flex flex-col gap-1">
-											<span
-												class="text-md w-10 tracking-wide text-secondary sm:font-bold sm:text-contrast"
-											>
-												{{ allocation.port }}
-											</span>
-											<span class="hidden text-xs text-secondary sm:block">Port</span>
-										</div>
-									</div>
-								</div>
-
-								<div class="flex w-full flex-row items-center gap-2 sm:w-auto">
-									<CopyCode :text="`${serverIP}:${allocation.port}`" />
-									<ButtonStyled icon-only>
-										<button
-											class="!w-full sm:!w-auto"
-											@click="showEditAllocationModal(allocation.port)"
-										>
-											<EditIcon />
-										</button>
-									</ButtonStyled>
-									<ButtonStyled icon-only color="red">
-										<button
-											class="!w-full sm:!w-auto"
-											@click="showConfirmDeleteModal(allocation.port)"
-										>
-											<TrashIcon />
-										</button>
-									</ButtonStyled>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<SaveBanner
-				:is-visible="!!hasUnsavedChanges && !!isValidSubdomain"
-				:server-id="serverId"
-				:is-updating="isUpdating"
-				:save="saveNetwork"
-				:reset="resetNetwork"
-			/>
-		</div>
-	</div>
-</template>
-
 <script setup lang="ts">
-import {
-	EditIcon,
-	InfoIcon,
-	IssuesIcon,
-	PlusIcon,
-	SaveIcon,
-	TrashIcon,
-	UploadIcon,
-	VersionIcon,
-} from '@modrinth/assets'
-import {
-	ButtonStyled,
-	ConfirmModal,
-	CopyCode,
-	injectModrinthClient,
-	injectModrinthServerContext,
-	injectNotificationManager,
-	NewModal,
-	StyledInput,
-} from '@modrinth/ui'
-import { useQuery, useQueryClient } from '@tanstack/vue-query'
-import { computed, nextTick, ref } from 'vue'
-
-import SaveBanner from '~/components/ui/servers/SaveBanner.vue'
-
-const { addNotification } = injectNotificationManager()
-const { server, serverId } = injectModrinthServerContext()
-const client = injectModrinthClient()
-const queryClient = useQueryClient()
-
-const isUpdating = ref(false)
-const data = server
-
-const serverIP = ref(data?.value?.net?.ip ?? '')
-const serverSubdomain = ref(data?.value?.net?.domain ?? '')
-const serverPrimaryPort = ref(data?.value?.net?.port ?? 0)
-const userDomain = ref('')
-const exampleDomain = 'play.example.com'
-
-const {
-	data: allocationsData,
-	error: allocationsError,
-	refetch: refetchAllocations,
-} = useQuery({
-	queryKey: ['servers', 'allocations', serverId] as const,
-	queryFn: () => client.archon.servers_v0.getAllocations(serverId),
-})
-const allocations = allocationsData
-
-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 newAllocationPort = ref(0)
-const allocationToDelete = ref<number | null>(null)
-
-const hasUnsavedChanges = computed(() => serverSubdomain.value !== data?.value?.net?.domain)
-
-const isValidSubdomain = computed(() => /^[a-zA-Z0-9-]{5,}$/.test(serverSubdomain.value))
-
-const addNewAllocation = async () => {
-	if (!newAllocationName.value) return
-
-	try {
-		await client.archon.servers_v0.reserveAllocation(serverId, newAllocationName.value)
-		await queryClient.invalidateQueries({ queryKey: ['servers', 'allocations', serverId] })
-
-		newAllocationModal.value?.hide()
-		newAllocationName.value = ''
-
-		addNotification({
-			type: 'success',
-			title: 'Allocation reserved',
-			text: 'Your allocation has been reserved.',
-		})
-	} catch (error) {
-		console.error('Failed to reserve new allocation:', error)
-	}
-}
-
-const showNewAllocationModal = () => {
-	newAllocationName.value = ''
-	newAllocationModal.value?.show()
-	nextTick(() => {
-		setTimeout(() => {
-			newAllocationInput.value?.focus()
-		}, 100)
-	})
-}
-
-const showEditAllocationModal = (port: number) => {
-	newAllocationPort.value = port
-	editAllocationModal.value?.show()
-	nextTick(() => {
-		setTimeout(() => {
-			editAllocationInput.value?.focus()
-		}, 100)
-	})
-}
-
-const showConfirmDeleteModal = (port: number) => {
-	allocationToDelete.value = port
-	confirmDeleteModal.value?.show()
-}
-
-const confirmDeleteAllocation = async () => {
-	if (allocationToDelete.value === null) return
-
-	await client.archon.servers_v0.deleteAllocation(serverId, allocationToDelete.value)
-	await queryClient.invalidateQueries({ queryKey: ['servers', 'allocations', serverId] })
-
-	addNotification({
-		type: 'success',
-		title: 'Allocation removed',
-		text: 'Your allocation has been removed.',
-	})
-
-	allocationToDelete.value = null
-}
-
-const editAllocation = async () => {
-	if (!newAllocationName.value) return
-
-	try {
-		await client.archon.servers_v0.updateAllocation(
-			serverId,
-			newAllocationPort.value,
-			newAllocationName.value,
-		)
-		await queryClient.invalidateQueries({ queryKey: ['servers', 'allocations', serverId] })
-
-		editAllocationModal.value?.hide()
-		newAllocationName.value = ''
-
-		addNotification({
-			type: 'success',
-			title: 'Allocation updated',
-			text: 'Your allocation has been updated.',
-		})
-	} catch (error) {
-		console.error('Failed to reserve new allocation:', error)
-	}
-}
-
-const saveNetwork = async () => {
-	if (!isValidSubdomain.value) return
-
-	try {
-		isUpdating.value = true
-		const result = await client.archon.servers_v0.checkSubdomainAvailability(serverSubdomain.value)
-		const available = result.available
-		if (!available) {
-			addNotification({
-				type: 'error',
-				title: 'Subdomain not available',
-				text: 'The subdomain you entered is already in use.',
-			})
-			return
-		}
-		if (serverSubdomain.value !== data?.value?.net?.domain) {
-			await client.archon.servers_v0.changeSubdomain(serverId, serverSubdomain.value)
-		}
-		if (serverPrimaryPort.value !== data?.value?.net?.port) {
-			await client.archon.servers_v0.updateAllocation(
-				serverId,
-				serverPrimaryPort.value,
-				newAllocationName.value,
-			)
-		}
-		await new Promise((resolve) => setTimeout(resolve, 500))
-		await queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] })
-		await queryClient.invalidateQueries({ queryKey: ['servers', 'allocations', serverId] })
-		addNotification({
-			type: 'success',
-			title: 'Server settings updated',
-			text: 'Your server settings were successfully changed.',
-		})
-	} catch (error) {
-		console.error(error)
-		addNotification({
-			type: 'error',
-			title: 'Failed to update server settings',
-			text: 'An error occurred while attempting to update your server settings.',
-		})
-	} finally {
-		isUpdating.value = false
-	}
-}
-
-const resetNetwork = () => {
-	serverSubdomain.value = data?.value?.net?.domain ?? ''
-}
-
-const dnsRecords = computed(() => {
-	const domain = userDomain.value === '' ? exampleDomain : userDomain.value
-	return [
-		{
-			type: 'A',
-			name: `${domain}`,
-			content: data.value?.net?.ip ?? '',
-		},
-		{
-			type: 'SRV',
-			name: `_minecraft._tcp.${domain}`,
-			content: `0 10 ${data.value?.net?.port} ${domain}`,
-		},
-	]
-})
-
-const exportDnsRecords = () => {
-	const records = dnsRecords.value.reduce(
-		(acc, record) => {
-			const type = record.type
-			if (!acc[type]) {
-				acc[type] = []
-			}
-			acc[type].push(record)
-			return acc
-		},
-		{} as Record<string, any[]>,
-	)
-
-	const text = Object.entries(records)
-		.map(([type, records]) => {
-			return `; ${type} Records\n${records.map((record) => `${record.name}.	1	IN	${record.type} ${record.content}${record.type === 'SRV' ? '.' : ''}`).join('\n')}\n`
-		})
-		.join('\n')
-	const blob = new Blob([text], { type: 'text/plain' })
-	const a = document.createElement('a')
-	a.href = window.URL.createObjectURL(blob)
-	a.download = `${userDomain.value}.txt`
-	a.click()
-	a.remove()
-}
-
-const copyText = (text: string) => {
-	navigator.clipboard.writeText(text)
-	addNotification({
-		type: 'success',
-		title: 'Text copied',
-		text: `${text} has been copied to your clipboard`,
-	})
-}
+import { ServerSettingsNetworkPage } from '@modrinth/ui'
 </script>
+
+<template>
+	<ServerSettingsNetworkPage class="card" />
+</template>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/options/preferences.vue b/apps/frontend/src/pages/hosting/manage/[id]/options/preferences.vue
deleted file mode 100644
index d3c84bf5b0..0000000000
--- a/apps/frontend/src/pages/hosting/manage/[id]/options/preferences.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
-	<div class="h-full w-full">
-		<div class="h-full w-full gap-2 overflow-y-auto">
-			<div class="card flex flex-col gap-4">
-				<h1 class="m-0 text-lg font-bold text-contrast">Server preferences</h1>
-				<p class="m-0">Preferences apply per server and changes are only saved in your browser.</p>
-				<div
-					v-for="(prefConfig, key) in preferences"
-					:key="key"
-					class="flex items-center justify-between gap-2"
-				>
-					<label :for="`pref-${key}`" class="flex flex-col gap-2">
-						<div class="flex flex-row gap-2">
-							<span class="text-lg font-bold text-contrast">{{ prefConfig.displayName }}</span>
-							<div
-								v-if="prefConfig.implemented === false"
-								class="hidden items-center gap-1 rounded-full bg-table-alternateRow p-1 px-1.5 text-xs font-semibold sm:flex"
-							>
-								Coming Soon
-							</div>
-						</div>
-						<span>{{ prefConfig.description }}</span>
-					</label>
-					<Toggle
-						:id="`pref-${key}`"
-						v-model="newUserPreferences[key]"
-						class="flex-none"
-						:disabled="prefConfig.implemented === false"
-					/>
-				</div>
-			</div>
-		</div>
-		<SaveBanner
-			:is-visible="hasUnsavedChanges"
-			:server-id="serverId"
-			:is-updating="false"
-			:save="savePreferences"
-			:reset="resetPreferences"
-		/>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { injectNotificationManager, Toggle } from '@modrinth/ui'
-import { useStorage } from '@vueuse/core'
-
-import SaveBanner from '~/components/ui/servers/SaveBanner.vue'
-
-const { addNotification } = injectNotificationManager()
-const route = useNativeRoute()
-const serverId = route.params.id as string
-
-const preferences = {
-	ramAsNumber: {
-		displayName: 'RAM as bytes',
-		description:
-			"When enabled, RAM will be displayed as bytes instead of a percentage in your server's Overview.",
-		implemented: true,
-	},
-	hideSubdomainLabel: {
-		displayName: 'Hide subdomain label',
-		description: 'When enabled, the subdomain label will be hidden from the server header.',
-		implemented: true,
-	},
-	autoRestart: {
-		displayName: 'Auto restart',
-		description: 'When enabled, your server will automatically restart if it crashes.',
-		implemented: false,
-	},
-	powerDontAskAgain: {
-		displayName: 'Power actions confirmation',
-		description: 'When enabled, you will be prompted before stopping and restarting your server.',
-		implemented: true,
-	},
-} as const
-
-type PreferenceKeys = keyof typeof preferences
-
-type UserPreferences = {
-	[K in PreferenceKeys]: boolean
-}
-
-const defaultPreferences: UserPreferences = {
-	ramAsNumber: false,
-	hideSubdomainLabel: false,
-	autoRestart: false,
-	powerDontAskAgain: false,
-}
-
-const userPreferences = useStorage<UserPreferences>(
-	`pyro-server-${serverId}-preferences`,
-	defaultPreferences,
-)
-
-const newUserPreferences = ref<UserPreferences>(JSON.parse(JSON.stringify(userPreferences.value)))
-
-const hasUnsavedChanges = computed(() => {
-	return JSON.stringify(newUserPreferences.value) !== JSON.stringify(userPreferences.value)
-})
-
-const savePreferences = () => {
-	userPreferences.value = { ...newUserPreferences.value }
-	addNotification({
-		type: 'success',
-		title: 'Preferences saved',
-		text: 'Your preferences have been saved.',
-	})
-}
-
-const resetPreferences = () => {
-	newUserPreferences.value = { ...userPreferences.value }
-}
-</script>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue b/apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue
index ae73daf967..48c1fb8a6d 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue
@@ -1,292 +1,7 @@
-<template>
-	<div class="relative h-full w-full select-none overflow-y-auto">
-		<div v-if="propsData" class="flex h-full w-full flex-col justify-between gap-4 overflow-y-auto">
-			<Admonition
-				v-if="hasNoProperties"
-				type="warning"
-				body="Some expected properties are missing from your server.properties - this usually means the server hasn't completed its first startup yet."
-			/>
-			<div class="card flex flex-col gap-4">
-				<div class="flex flex-col gap-2">
-					<h2 class="m-0 text-lg font-bold text-contrast">Server properties</h2>
-					<div class="m-0">
-						Edit the Minecraft server properties file. If you're unsure about a specific property,
-						the
-						<NuxtLink
-							class="goto-link !inline-block"
-							to="https://minecraft.wiki/w/Server.properties"
-							external
-						>
-							Minecraft Wiki
-						</NuxtLink>
-						has more detailed information.
-					</div>
-				</div>
-				<div class="flex flex-col gap-4 rounded-2xl bg-table-alternateRow p-4">
-					<div class="w-full text-sm">
-						<label for="search-server-properties" class="sr-only"> Search server properties </label>
-						<StyledInput
-							id="search-server-properties"
-							v-model="searchInput"
-							wrapper-class="w-full"
-							type="search"
-							:icon="SearchIcon"
-							name="search"
-							autocomplete="off"
-							placeholder="Search server properties..."
-						/>
-					</div>
-					<div
-						v-for="(_value, key) in filteredProperties"
-						:key="key"
-						class="flex flex-row flex-wrap items-center justify-between py-2"
-					>
-						<span :id="`property-label-${key}`">{{ formatPropertyName(key) }}</span>
-
-						<div
-							v-if="getPropertyDef(key).type === 'dropdown'"
-							class="mt-2 flex w-full sm:w-[320px] sm:justify-end"
-						>
-							<Combobox
-								:id="`server-property-${key}`"
-								v-model="liveProperties[key]"
-								:name="formatPropertyName(key)"
-								:options="
-									(getPropertyDef(key) as DropdownPropertyDef).options.map((v) => ({
-										value: v,
-										label: formatPropertyName(v),
-									}))
-								"
-								:aria-labelledby="`property-label-${key}`"
-								:display-value="formatPropertyName(String(liveProperties[key] ?? 'Select...'))"
-							/>
-						</div>
-						<div v-else-if="getPropertyDef(key).type === 'toggle'" class="flex justify-end">
-							<Toggle
-								:id="`server-property-${key}`"
-								:model-value="liveProperties[key] === 'true'"
-								:aria-labelledby="`property-label-${key}`"
-								@update:model-value="liveProperties[key] = $event ? 'true' : 'false'"
-							/>
-						</div>
-						<div v-else-if="getPropertyDef(key).type === 'number'" class="mt-2 w-full sm:w-[320px]">
-							<StyledInput
-								:id="`server-property-${key}`"
-								:model-value="liveProperties[key]"
-								type="number"
-								wrapper-class="w-full"
-								:aria-labelledby="`property-label-${key}`"
-								@update:model-value="liveProperties[key] = String($event)"
-							/>
-						</div>
-						<div v-else class="mt-2 flex w-full justify-end sm:w-[320px]">
-							<StyledInput
-								:id="`server-property-${key}`"
-								v-model="liveProperties[key]"
-								wrapper-class="w-full"
-								:aria-labelledby="`property-label-${key}`"
-							/>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div v-else class="flex h-full w-full items-center justify-center">
-			<SpinnerIcon class="animate-spin" />
-		</div>
-
-		<SaveBanner
-			:is-visible="hasUnsavedChanges"
-			:server-id="serverId"
-			:is-updating="isUpdating || busyReasons.length > 0"
-			restart
-			:save="() => saveProperties()"
-			:reset="resetProperties"
-		/>
-	</div>
-</template>
-
 <script setup lang="ts">
-import type { Archon } from '@modrinth/api-client'
-import { SearchIcon, SpinnerIcon } from '@modrinth/assets'
-import {
-	Admonition,
-	Combobox,
-	injectModrinthClient,
-	injectModrinthServerContext,
-	injectNotificationManager,
-	StyledInput,
-	Toggle,
-} from '@modrinth/ui'
-import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
-import Fuse from 'fuse.js'
-import { computed, ref, watch } from 'vue'
-
-import SaveBanner from '~/components/ui/servers/SaveBanner.vue'
-
-const { addNotification } = injectNotificationManager()
-const client = injectModrinthClient()
-const { serverId, worldId, powerState, busyReasons } = injectModrinthServerContext()
-const queryClient = useQueryClient()
-
-const searchInput = ref('')
-
-type DropdownPropertyDef = { type: 'dropdown'; options: string[] }
-type PropertyDef = { type: 'toggle' } | { type: 'number' } | { type: 'text' } | DropdownPropertyDef
-
-const KNOWN_PROPERTIES: Record<string, PropertyDef> = {
-	allow_cheats: { type: 'toggle' },
-	allow_flight: { type: 'toggle' },
-	difficulty: { type: 'dropdown', options: ['peaceful', 'easy', 'normal', 'hard'] },
-	enforce_whitelist: { type: 'toggle' },
-	force_gamemode: { type: 'toggle' },
-	gamemode: { type: 'dropdown', options: ['survival', 'creative', 'adventure', 'spectator'] },
-	generate_structures: { type: 'toggle' },
-	generator_settings: { type: 'text' },
-	hardcore: { type: 'toggle' },
-	level_seed: { type: 'text' },
-	level_type: { type: 'text' },
-	max_players: { type: 'number' },
-	max_tick_time: { type: 'number' },
-	motd: { type: 'text' },
-	pause_when_empty_seconds: { type: 'number' },
-	player_idle_timeout: { type: 'number' },
-	require_resource_pack: { type: 'toggle' },
-	resource_pack: { type: 'text' },
-	resource_pack_id: { type: 'text' },
-	resource_pack_sha1: { type: 'text' },
-	simulation_distance: { type: 'number' },
-	spawn_protection: { type: 'number' },
-	sync_chunk_writes: { type: 'toggle' },
-	view_distance: { type: 'number' },
-	white_list: { type: 'toggle' },
-}
-
-function getPropertyDef(key: string): PropertyDef {
-	return KNOWN_PROPERTIES[key] ?? { type: 'text' }
-}
-
-const queryKey = computed(() => ['servers', 'properties', 'v1', serverId, worldId.value])
-
-const { data: propsData } = useQuery({
-	queryKey,
-	queryFn: () => client.archon.properties_v1.getProperties(serverId, worldId.value!),
-	enabled: computed(() => worldId.value !== null),
-})
-
-function flattenProperties(data: Archon.Content.v1.PropertiesFields): Record<string, string> {
-	const result: Record<string, string> = {}
-	if (data.known) {
-		for (const [key, value] of Object.entries(data.known)) {
-			if (value != null) result[key] = value
-		}
-	}
-	if (data.custom) {
-		for (const [key, value] of Object.entries(data.custom)) {
-			if (value != null) result[key] = value
-		}
-	}
-	return result
-}
-
-const liveProperties = ref<Record<string, string>>({})
-const originalProperties = ref<Record<string, string>>({})
-
-function syncFormFromData() {
-	if (!propsData.value) return
-	const flat = flattenProperties(propsData.value)
-	liveProperties.value = { ...flat }
-	originalProperties.value = { ...flat }
-}
-
-const hasNoProperties = computed(() => Object.keys(liveProperties.value).length === 0)
-
-const hasUnsavedChanges = computed(() =>
-	Object.keys(liveProperties.value).some(
-		(key) => liveProperties.value[key] !== originalProperties.value[key],
-	),
-)
-
-watch(
-	propsData,
-	(newData) => {
-		if (newData && !hasUnsavedChanges.value) {
-			syncFormFromData()
-		}
-	},
-	{ immediate: true },
-)
-
-watch(powerState, () => {
-	queryClient.invalidateQueries({ queryKey: queryKey.value })
-})
-
-function buildPatch(): Archon.Content.v1.PatchPropertiesFields {
-	const known: Record<string, string> = {}
-	const custom: Record<string, string> = {}
-
-	for (const key of Object.keys(liveProperties.value)) {
-		if (liveProperties.value[key] === originalProperties.value[key]) continue
-		if (key in KNOWN_PROPERTIES) {
-			known[key] = liveProperties.value[key]
-		} else {
-			custom[key] = liveProperties.value[key]
-		}
-	}
-
-	const patch: Archon.Content.v1.PatchPropertiesFields = {}
-	if (Object.keys(known).length > 0) {
-		patch.known = known as Archon.Content.v1.KnownPropertiesFields
-	}
-	if (Object.keys(custom).length > 0) {
-		patch.custom = custom
-	}
-	return patch
-}
-
-const { mutate: saveProperties, isPending: isUpdating } = useMutation({
-	mutationFn: () =>
-		client.archon.properties_v1.patchProperties(serverId, worldId.value!, buildPatch()),
-	onSuccess: async () => {
-		await queryClient.invalidateQueries({ queryKey: queryKey.value })
-		syncFormFromData()
-		addNotification({
-			type: 'success',
-			title: 'Server properties updated',
-			text: 'Your server properties were successfully changed.',
-		})
-	},
-	onError: (error) => {
-		addNotification({
-			type: 'error',
-			title: 'Failed to update server properties',
-			text: error instanceof Error ? error.message : 'An error occurred.',
-		})
-	},
-})
-
-function resetProperties() {
-	syncFormFromData()
-}
-
-const fuse = computed(() => {
-	const entries = Object.entries(liveProperties.value).map(([key, value]) => ({
-		key,
-		value: String(value),
-	}))
-	return new Fuse(entries, { keys: ['key', 'value'], threshold: 0.2 })
-})
-
-const filteredProperties = computed(() => {
-	if (!searchInput.value?.trim()) return liveProperties.value
-	const results = fuse.value.search(searchInput.value)
-	return Object.fromEntries(results.map(({ item }) => [item.key, liveProperties.value[item.key]]))
-})
-
-function formatPropertyName(name: string): string {
-	return name
-		.split('_')
-		.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-		.join(' ')
-}
+import { ServerSettingsPropertiesPage } from '@modrinth/ui'
 </script>
+
+<template>
+	<ServerSettingsPropertiesPage class="card" />
+</template>
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/options/startup.vue b/apps/frontend/src/pages/hosting/manage/[id]/options/startup.vue
deleted file mode 100644
index d8fd8c9859..0000000000
--- a/apps/frontend/src/pages/hosting/manage/[id]/options/startup.vue
+++ /dev/null
@@ -1,287 +0,0 @@
-<template>
-	<div class="relative h-full w-full">
-		<div class="flex h-full w-full flex-col gap-4">
-			<div
-				class="rounded-2xl border-[1px] border-solid border-orange bg-bg-orange p-4 text-contrast"
-			>
-				These settings are for advanced users. Changing them can break your server.
-			</div>
-
-			<div class="gap-2">
-				<div class="card flex flex-col gap-4">
-					<div class="flex flex-col justify-between gap-4 sm:flex-row">
-						<label for="startup-command-field" class="flex flex-col gap-2">
-							<span class="text-lg font-bold text-contrast">Startup command</span>
-							<span> The command that runs when your server is started. </span>
-						</label>
-						<ButtonStyled>
-							<button
-								:disabled="isStartupLoading || startupCommand === defaultStartupCommand"
-								class="!w-full sm:!w-auto"
-								@click="resetToDefault"
-							>
-								<UpdatedIcon class="h-5 w-5" />
-								Restore default command
-							</button>
-						</ButtonStyled>
-					</div>
-					<div class="relative">
-						<StyledInput
-							id="startup-command-field"
-							v-model="startupCommand"
-							multiline
-							resize="vertical"
-							input-class="min-h-[270px] font-[family-name:var(--mono-font)]"
-							:disabled="isStartupLoading"
-						/>
-						<div
-							v-if="isStartupLoading"
-							class="bg-bg/50 absolute inset-0 flex items-center justify-center rounded-xl"
-						>
-							<SpinnerIcon class="h-6 w-6 animate-spin text-secondary" />
-						</div>
-					</div>
-				</div>
-
-				<div class="card flex flex-col gap-8">
-					<div class="flex flex-col gap-4">
-						<div class="flex flex-col gap-2">
-							<span class="text-lg font-bold text-contrast">Java version</span>
-							<span>
-								The version of Java that your server will run on. By default, only the Java versions
-								compatible with this version of Minecraft are shown. Some mods may require a
-								different Java version to work properly.
-							</span>
-						</div>
-						<div class="relative max-w-xs">
-							<Combobox
-								:id="'java-version-field'"
-								v-model="javaVersion"
-								name="java-version"
-								:options="displayedJavaVersions"
-								:display-value="javaVersionLabel ?? 'Java Version'"
-								:disabled="isStartupLoading"
-							>
-								<template #dropdown-footer>
-									<button
-										class="flex w-full cursor-pointer items-center justify-center gap-1.5 border-0 border-t border-solid border-surface-5 bg-transparent py-3 text-center text-sm font-semibold text-secondary transition-colors hover:text-contrast"
-										@mousedown.prevent
-										@click="showAllVersions = !showAllVersions"
-									>
-										<EyeOffIcon v-if="showAllVersions" class="size-4" />
-										<EyeIcon v-else class="size-4" />
-										{{ showAllVersions ? 'Hide extra versions' : 'Show all versions' }}
-									</button>
-								</template>
-							</Combobox>
-							<div
-								v-if="isStartupLoading"
-								class="bg-bg/50 absolute inset-0 flex items-center justify-center rounded-xl"
-							>
-								<SpinnerIcon class="h-5 w-5 animate-spin text-secondary" />
-							</div>
-						</div>
-					</div>
-					<div class="flex flex-col gap-4">
-						<div class="flex flex-col gap-2">
-							<span class="text-lg font-bold text-contrast">Runtime</span>
-							<span> The Java runtime your server will use. </span>
-						</div>
-						<div class="relative max-w-xs">
-							<Combobox
-								:id="'runtime-field'"
-								v-model="jreVendor"
-								name="runtime"
-								:options="JRE_VENDORS"
-								:display-value="jreVendorLabel ?? 'Runtime'"
-								:disabled="isStartupLoading"
-							/>
-							<div
-								v-if="isStartupLoading"
-								class="bg-bg/50 absolute inset-0 flex items-center justify-center rounded-xl"
-							>
-								<SpinnerIcon class="h-5 w-5 animate-spin text-secondary" />
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<SaveBanner
-			:is-visible="!!hasUnsavedChanges"
-			:server-id="serverId"
-			:is-updating="isPending"
-			:save="() => saveStartup()"
-			:reset="resetStartup"
-		/>
-	</div>
-</template>
-
-<script setup lang="ts">
-import type { Archon } from '@modrinth/api-client'
-import { EyeIcon, EyeOffIcon, SpinnerIcon, UpdatedIcon } from '@modrinth/assets'
-import {
-	ButtonStyled,
-	Combobox,
-	injectModrinthClient,
-	injectModrinthServerContext,
-	injectNotificationManager,
-	StyledInput,
-} from '@modrinth/ui'
-import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
-
-import SaveBanner from '~/components/ui/servers/SaveBanner.vue'
-
-const { addNotification } = injectNotificationManager()
-const { server, serverId, worldId } = injectModrinthServerContext()
-const client = injectModrinthClient()
-const queryClient = useQueryClient()
-
-const startupQueryKey = computed(() => ['servers', 'startup', 'v1', serverId, worldId.value])
-
-const { data: startupData, isLoading: isStartupLoading } = useQuery({
-	queryKey: startupQueryKey,
-	queryFn: () => client.archon.options_v1.getStartup(serverId, worldId.value!),
-	enabled: computed(() => worldId.value !== null),
-})
-
-const JAVA_VERSIONS = [
-	{ value: 8, label: 'Java 8' },
-	{ value: 11, label: 'Java 11' },
-	{ value: 17, label: 'Java 17' },
-	{ value: 21, label: 'Java 21' },
-	{ value: 25, label: 'Java 25' },
-]
-
-const JRE_VENDORS: { value: Archon.Content.v1.JreVendor; label: string }[] = [
-	{ value: 'corretto', label: 'Corretto' },
-	{ value: 'temurin', label: 'Temurin' },
-	{ value: 'graal', label: 'GraalVM' },
-]
-
-// Saved state derived directly from query
-const savedStartupCommand = computed(() => startupData.value?.startup_command ?? '')
-const savedJavaVersion = computed(() => startupData.value?.java_version ?? undefined)
-const savedJreVendor = computed(() => startupData.value?.jre_vendor ?? undefined)
-const defaultStartupCommand = computed(
-	() => startupData.value?.original_invocation ?? savedStartupCommand.value,
-)
-
-// Local form state
-const startupCommand = ref('')
-const javaVersion = ref<number>()
-const jreVendor = ref<Archon.Content.v1.JreVendor>()
-
-// Display labels for comboboxes
-const javaVersionLabel = computed(
-	() => JAVA_VERSIONS.find((v) => v.value === javaVersion.value)?.label,
-)
-const jreVendorLabel = computed(() => JRE_VENDORS.find((v) => v.value === jreVendor.value)?.label)
-
-function syncFormFromData() {
-	startupCommand.value = savedStartupCommand.value
-	javaVersion.value = savedJavaVersion.value
-	jreVendor.value = savedJreVendor.value
-}
-
-watch(
-	startupData,
-	(newData, oldData) => {
-		if (newData && !oldData) {
-			syncFormFromData()
-		}
-	},
-	{ immediate: true },
-)
-
-const hasUnsavedChanges = computed(
-	() =>
-		startupCommand.value !== savedStartupCommand.value ||
-		javaVersion.value !== savedJavaVersion.value ||
-		jreVendor.value !== savedJreVendor.value,
-)
-
-// Java version filtering
-const showAllVersions = ref(false)
-
-type MinecraftReleaseVersion = {
-	major: number
-	minor: number
-}
-
-function parseMinecraftReleaseVersion(version: string): MinecraftReleaseVersion | null {
-	const [majorPart, minorPart] = version.split('.')
-
-	if (!majorPart || !minorPart) return null
-
-	const major = Number(majorPart)
-	const minor = Number(minorPart)
-
-	if (!Number.isInteger(major) || !Number.isInteger(minor)) return null
-
-	return { major, minor }
-}
-
-function filterJavaVersions(compatibleVersions: number[]) {
-	return JAVA_VERSIONS.filter((version) => compatibleVersions.includes(version.value))
-}
-
-const displayedJavaVersions = computed(() => {
-	if (showAllVersions.value) return JAVA_VERSIONS
-
-	const mcVersion = server.value?.mc_version ?? ''
-	if (!mcVersion) return JAVA_VERSIONS
-
-	const releaseVersion = parseMinecraftReleaseVersion(mcVersion)
-	if (!releaseVersion) return JAVA_VERSIONS
-
-	if (releaseVersion.major > 1) {
-		if (releaseVersion.major >= 26) {
-			return filterJavaVersions([25])
-		}
-
-		return JAVA_VERSIONS
-	}
-
-	if (releaseVersion.minor >= 20) return filterJavaVersions([21])
-	if (releaseVersion.minor >= 17) return filterJavaVersions([17, 21])
-	if (releaseVersion.minor >= 12) return filterJavaVersions([8, 11, 17, 21])
-	if (releaseVersion.minor >= 6) return filterJavaVersions([8, 11])
-	return filterJavaVersions([8])
-})
-
-// Save mutation
-const { mutate: saveStartup, isPending } = useMutation({
-	mutationFn: () =>
-		client.archon.options_v1.patchStartup(serverId, worldId.value!, {
-			startup_command: startupCommand.value || null,
-			java_version: javaVersion.value ?? null,
-			jre_vendor: jreVendor.value ?? null,
-		}),
-	onSuccess: async () => {
-		await queryClient.invalidateQueries({ queryKey: startupQueryKey.value })
-		syncFormFromData()
-		addNotification({
-			type: 'success',
-			title: 'Server settings updated',
-			text: 'Your server settings were successfully changed.',
-		})
-	},
-	onError: (error) => {
-		console.error(error)
-		addNotification({
-			type: 'error',
-			title: 'Failed to update server arguments',
-			text: 'Please try again later.',
-		})
-	},
-})
-
-function resetStartup() {
-	syncFormFromData()
-}
-
-function resetToDefault() {
-	startupCommand.value = defaultStartupCommand.value
-}
-</script>
diff --git a/apps/frontend/src/pages/hosting/manage/index.vue b/apps/frontend/src/pages/hosting/manage/index.vue
index 0767051ab9..0cd0a74a32 100644
--- a/apps/frontend/src/pages/hosting/manage/index.vue
+++ b/apps/frontend/src/pages/hosting/manage/index.vue
@@ -20,5 +20,6 @@ const generatedState = useGeneratedState()
 		:stripe-publishable-key="config.public.stripePublishableKey"
 		:site-url="config.public.siteUrl"
 		:products="generatedState.products || []"
+		class="max-w-[1280px] py-0"
 	/>
 </template>
diff --git a/apps/frontend/src/pages/settings/billing/index.vue b/apps/frontend/src/pages/settings/billing/index.vue
index 3c5578042f..0c6df65c7c 100644
--- a/apps/frontend/src/pages/settings/billing/index.vue
+++ b/apps/frontend/src/pages/settings/billing/index.vue
@@ -1,5 +1,6 @@
 <template>
 	<ServersUpgradeModalWrapper ref="upgradeModal" />
+	<ResubscribeModal ref="pyroResubscribeModal" @resubscribe="handlePyroResubscribeConfirm" />
 	<section class="universal-card experimental-styles-within">
 		<h2>{{ formatMessage(messages.subscriptionTitle) }}</h2>
 		<p>{{ formatMessage(messages.subscriptionDescription) }}</p>
@@ -284,6 +285,8 @@
 								v-if="subscription.serverInfo"
 								v-bind="subscription.serverInfo"
 								:pending-change="getPendingChange(subscription)"
+								:cancellation-date="getCancellationDate(subscription)"
+								:on-download-backup="getBackupDownloadForServer(subscription.serverInfo)"
 							/>
 							<div v-else class="w-fit">
 								<p>
@@ -514,15 +517,9 @@
 											"
 											color="green"
 										>
-											<button
-												@click="
-													resubscribePyro(
-														subscription.id,
-														$dayjs(getPyroCharge(subscription).due).isBefore($dayjs()),
-													)
-												"
-											>
-												{{ formatMessage(messages.resubscribe) }} <RightArrowIcon />
+											<button @click="openPyroResubscribeModal(subscription)">
+												{{ formatMessage(messages.resubscribe) }}
+												<RightArrowIcon />
 											</button>
 										</ButtonStyled>
 									</div>
@@ -709,14 +706,17 @@ import {
 	OverflowMenu,
 	paymentMethodMessages,
 	PurchaseModal,
+	ResubscribeModal,
 	ServerListing,
 	useFormatDateTime,
 	useFormatPrice,
+	useServerBackupDownload,
 	useVIntl,
 } from '@modrinth/ui'
 import { calculateSavings, getCurrency } from '@modrinth/utils'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
-import { computed, ref } from 'vue'
+import { useIntervalFn } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
 
 import ModrinthServersIcon from '~/components/ui/servers/ModrinthServersIcon.vue'
 import ServersUpgradeModalWrapper from '~/components/ui/servers/ServersUpgradeModalWrapper.vue'
@@ -724,6 +724,7 @@ import { products } from '~/generated/state.json'
 
 const { addNotification, handleError } = injectNotificationManager()
 const client = injectModrinthClient()
+const { getLatestBackupDownload } = useServerBackupDownload()
 definePageMeta({
 	middleware: 'auth',
 })
@@ -998,7 +999,7 @@ const messages = defineMessages({
 	pyroResubscribeRequestSubmittedText: {
 		id: 'settings.billing.pyro.resubscribe.request-submitted.text',
 		defaultMessage:
-			'If the server is currently suspended, it may take up to 10 minutes for another charge attempt to be made.',
+			'If the server is currently cancelled, it may take 10-15 minutes to set up the server.',
 	},
 	pyroResubscribeSuccessText: {
 		id: 'settings.billing.pyro.resubscribe.success.text',
@@ -1053,6 +1054,11 @@ const { data: serversData } = useQuery({
 	queryFn: () => client.archon.servers_v0.list(),
 })
 
+const { data: serverFullList } = useQuery({
+	queryKey: ['servers', 'v1'],
+	queryFn: () => client.archon.servers_v1.list(),
+})
+
 const midasProduct = ref(products.find((x) => x.metadata?.type === 'midas'))
 const midasSubscription = computed(() =>
 	subscriptions.value?.find(
@@ -1082,16 +1088,38 @@ const pyroSubscriptions = computed(() => {
 	const pyroSubs = subscriptions.value?.filter((s) => s?.metadata?.type === 'pyro') || []
 	const servers = serversData.value?.servers || []
 
-	return pyroSubs.map((subscription) => {
-		const server = servers.find((s) => s.server_id === subscription.metadata.id)
-		return {
-			...subscription,
-			serverInfo: server,
-		}
-	})
+	return pyroSubs
+		.map((subscription) => {
+			const server = servers.find((s) => s.server_id === subscription.metadata.id)
+			const charge = getPyroCharge(subscription)
+
+			return {
+				...subscription,
+				serverInfo: {
+					...server,
+					isProvisioning:
+						subscription.status === 'unprovisioned' &&
+						(charge?.status === 'processing' || charge?.status === 'open'),
+				},
+			}
+		})
+		.filter((subscription) => {
+			// files expire 30 days after cancellation
+			const cancellationDate = getCancellationDate(subscription)
+			if (
+				!cancellationDate ||
+				subscription.serverInfo?.status !== 'suspended' ||
+				subscription.serverInfo?.suspension_reason !== 'cancelled'
+			)
+				return true
+			const cancellation = new Date(cancellationDate)
+			const thirtyDaysLater = new Date(cancellation.getTime() + 30 * 24 * 60 * 60 * 1000)
+			return new Date() <= thirtyDaysLater
+		})
 })
 
 const midasPurchaseModal = ref()
+const pyroResubscribeModal = ref()
 const country = useUserCountry()
 const price = computed(() =>
 	midasProduct.value?.prices?.find((x) => x.currency_code === getCurrency(country.value)),
@@ -1201,13 +1229,20 @@ const getProductFromPriceId = (priceId) => {
 	return productsData.value.find((p) => p.prices?.some((x) => x.id === priceId))
 }
 
-const getPyroCharge = (subscription) => {
+function getPyroCharge(subscription) {
 	if (!subscription || !charges.value) return null
 	return charges.value.find(
 		(charge) => charge.subscription_id === subscription.id && charge.status !== 'succeeded',
 	)
 }
 
+function getCancellationDate(subscription) {
+	const charge = getPyroCharge(subscription)
+	if (!charge) return null
+	if (charge.status === 'cancelled') return charge.due
+	return null
+}
+
 const getProductSize = (product) => {
 	if (!product || !product.metadata) return formatMessage(commonMessages.planUnknownLabel)
 	const ramSize = product.metadata.ram
@@ -1243,12 +1278,38 @@ const showPyroUpgradeModal = (subscription) => {
 	upgradeModal.value?.open(subscription?.metadata?.id)
 }
 
+const CHARGE_POLL_INTERVAL_MS = 20_000
+
+const hasProvisioningSubscription = computed(() =>
+	pyroSubscriptions.value?.some((s) => s.serverInfo?.isProvisioning),
+)
+
+const { pause: pauseChargePoll, resume: resumeChargePoll } = useIntervalFn(
+	() => {
+		queryClient.invalidateQueries({ queryKey: ['billing', 'payments'] })
+		queryClient.invalidateQueries({ queryKey: ['billing', 'subscriptions'] })
+	},
+	CHARGE_POLL_INTERVAL_MS,
+	{ immediate: false },
+)
+
+watch(
+	hasProvisioningSubscription,
+	(isProvisioning) => {
+		if (isProvisioning) {
+			resumeChargePoll()
+		} else {
+			pauseChargePoll()
+		}
+	},
+	{ immediate: true },
+)
+
 const resubscribePyro = async (subscriptionId, wasSuspended) => {
 	try {
 		await client.labrinth.billing_internal.editSubscription(subscriptionId, {
 			cancelled: false,
 		})
-		await refresh()
 		if (wasSuspended) {
 			addNotification({
 				title: formatMessage(messages.pyroResubscribeRequestSubmittedTitle),
@@ -1271,6 +1332,35 @@ const resubscribePyro = async (subscriptionId, wasSuspended) => {
 	}
 }
 
+function openPyroResubscribeModal(subscription) {
+	const charge = getPyroCharge(subscription)
+	const product = getPyroProduct(subscription)
+	const interval = charge?.subscription_interval || subscription?.interval
+	const productPrice = getProductPrice(product, interval)
+
+	pyroResubscribeModal.value?.show({
+		subscriptionId: subscription?.id ?? '',
+		wasSuspended: charge?.due ? new Date(charge.due).getTime() < Date.now() : false,
+		serverName: subscription?.serverInfo?.name ?? 'this server',
+		planName: `${getProductSize(product)} plan`,
+		ramGb: product?.metadata?.ram ? product.metadata.ram / 1024 : undefined,
+		storageGb: product?.metadata?.storage ? product.metadata.storage / 1024 : undefined,
+		sharedCpus: product?.metadata?.cpu ? product.metadata.cpu / 2 : undefined,
+		priceCents: charge?.amount ?? productPrice?.prices?.intervals?.[interval],
+		currencyCode: charge?.currency_code ?? productPrice?.currency_code,
+		interval,
+		nextChargeDate: charge?.due,
+	})
+}
+
+function handlePyroResubscribeConfirm({ subscriptionId, wasSuspended }) {
+	return resubscribePyro(subscriptionId, wasSuspended)
+}
+
+function getBackupDownloadForServer(serverInfo) {
+	return getLatestBackupDownload(serverInfo.server_id, serverFullList.value)
+}
+
 const refresh = async () => {
 	await Promise.all([
 		queryClient.invalidateQueries({ queryKey: ['billing'] }),
diff --git a/packages/api-client/src/platform/tauri.ts b/packages/api-client/src/platform/tauri.ts
index 357a73ab7e..7e57fc2a53 100644
--- a/packages/api-client/src/platform/tauri.ts
+++ b/packages/api-client/src/platform/tauri.ts
@@ -103,8 +103,11 @@ export class TauriModrinthClient extends XHRUploadClient {
 				throw error
 			}
 
-			const data = await response.json()
-			return data as T
+			const text = await response.text()
+			if (!text) {
+				return undefined as T
+			}
+			return JSON.parse(text) as T
 		} catch (error) {
 			throw this.normalizeError(error)
 		}
diff --git a/packages/assets/styles/classes.scss b/packages/assets/styles/classes.scss
index c04546b7b2..5b50ab8a1e 100644
--- a/packages/assets/styles/classes.scss
+++ b/packages/assets/styles/classes.scss
@@ -527,8 +527,6 @@ a:not(.no-click-animation),
 	margin-bottom: var(--gap-md);
 	outline: 2px solid transparent;
 
-	box-shadow: var(--shadow-card);
-
 	.card__overlay {
 		position: absolute;
 		top: 1rem;
diff --git a/packages/ui/.storybook/preview.ts b/packages/ui/.storybook/preview.ts
index d775c85df0..9b340008eb 100644
--- a/packages/ui/.storybook/preview.ts
+++ b/packages/ui/.storybook/preview.ts
@@ -1,15 +1,22 @@
-import '@modrinth/assets/omorphia.scss'
 import 'floating-vue/dist/style.css'
-import '../src/styles/tailwind.css'
+import '../../assets/styles/defaults.scss'
+// frontend css imports
+// import '../../../apps/frontend/src/assets/styles/global.scss'
+// import '../../../apps/frontend/src/assets/styles/tailwind.css'
+// ---
+// app-frontend css imports
+import '../../../apps/app-frontend/src/assets/stylesheets/global.scss'
 
 import type { Labrinth } from '@modrinth/api-client'
 import { GenericModrinthClient } from '@modrinth/api-client'
 import { withThemeByClassName } from '@storybook/addon-themes'
 import type { Preview } from '@storybook/vue3-vite'
 import { setup } from '@storybook/vue3-vite'
+import { QueryClient, VueQueryPlugin } from '@tanstack/vue-query'
 import FloatingVue from 'floating-vue'
-import { defineComponent, ref } from 'vue'
+import { computed, defineComponent, h, ref } from 'vue'
 import { createI18n } from 'vue-i18n'
+import { createMemoryHistory, createRouter } from 'vue-router'
 
 import NotificationPanel from '../src/components/nav/NotificationPanel.vue'
 import PopupNotificationPanel from '../src/components/nav/PopupNotificationPanel.vue'
@@ -109,9 +116,68 @@ class StorybookPopupNotificationManager extends AbstractPopupNotificationManager
 	}
 }
 
+const StorybookLink = defineComponent({
+	name: 'StorybookLink',
+	inheritAttrs: false,
+	props: {
+		to: {
+			type: [String, Object],
+			default: '',
+		},
+	},
+	setup(props, { attrs, slots }) {
+		const href = computed(() => {
+			if (typeof props.to === 'string') return props.to || '#'
+			if (props.to && typeof props.to === 'object' && 'path' in props.to) {
+				const path = props.to.path
+				return typeof path === 'string' ? path : '#'
+			}
+			return '#'
+		})
+
+		return () =>
+			h(
+				'a',
+				{
+					...attrs,
+					href: href.value,
+				},
+				slots.default?.(),
+			)
+	},
+})
+
+const StorybookClientOnly = defineComponent({
+	name: 'StorybookClientOnly',
+	setup(_, { slots }) {
+		return () => slots.default?.()
+	},
+})
+
 setup((app) => {
+	const queryClient = new QueryClient({
+		defaultOptions: {
+			queries: {
+				retry: false,
+			},
+			mutations: {
+				retry: false,
+			},
+		},
+	})
+	app.use(VueQueryPlugin, { queryClient })
 	app.use(i18n)
 
+	const router = createRouter({
+		history: createMemoryHistory(),
+		routes: [{ path: '/:pathMatch(.*)*', component: { render: () => null } }],
+	})
+	app.use(router)
+
+	app.component('NuxtLink', StorybookLink)
+	app.component('RouterLink', StorybookLink)
+	app.component('ClientOnly', StorybookClientOnly)
+
 	// Provide the custom I18nContext for components using injectI18n()
 	const i18nContext: I18nContext = {
 		locale: i18n.global.locale,
diff --git a/packages/ui/src/components/base/ButtonStyled.vue b/packages/ui/src/components/base/ButtonStyled.vue
index 30b7eb9aca..8efe520a4d 100644
--- a/packages/ui/src/components/base/ButtonStyled.vue
+++ b/packages/ui/src/components/base/ButtonStyled.vue
@@ -263,7 +263,7 @@ const fontSize = computed(() => {
 	> *:first-child
 	> *:first-child
 	> :is(button, a, .button-like):first-child {
-	@apply flex cursor-pointer flex-row items-center justify-center border-solid border-2 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;
+	@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);
 	transition:
 		scale 0.125s ease-in-out,
diff --git a/packages/ui/src/components/base/CopyCode.vue b/packages/ui/src/components/base/CopyCode.vue
index f046b5f12c..9c2f9b47ed 100644
--- a/packages/ui/src/components/base/CopyCode.vue
+++ b/packages/ui/src/components/base/CopyCode.vue
@@ -1,5 +1,9 @@
 <template>
-	<button class="code" :class="{ copied }" :title="formatMessage(copiedMessage)" @click="copyText">
+	<button
+		class="!m-0 inline-flex w-fit select-text items-center gap-2 rounded-[10px] bg-[var(--color-button-bg)] px-2 py-1 font-mono text-sm text-primary transition-[opacity,filter,transform,outline] duration-200 ease-in-out hover:brightness-[1.25] active:scale-95 active:brightness-[0.8] motion-reduce:transition-none [&>svg]:h-[1em] [&>svg]:w-[1em]"
+		:title="formatMessage(copiedMessage)"
+		@click="copyText"
+	>
 		<span>{{ text }}</span>
 		<CheckIcon v-if="copied" />
 		<ClipboardCopyIcon v-else />
@@ -27,42 +31,3 @@ async function copyText() {
 	copied.value = true
 }
 </script>
-
-<style lang="scss" scoped>
-.code {
-	color: var(--color-text);
-	display: inline-flex;
-	grid-gap: 0.5rem;
-	font-family: var(--mono-font);
-	font-size: var(--font-size-sm);
-	margin: 0;
-	padding: 0.25rem 0.5rem;
-	background-color: var(--color-button-bg);
-	width: fit-content;
-	border-radius: 10px;
-	user-select: text;
-	transition:
-		opacity 0.5s ease-in-out,
-		filter 0.2s ease-in-out,
-		transform 0.05s ease-in-out,
-		outline 0.2s ease-in-out;
-
-	@media (prefers-reduced-motion) {
-		transition: none !important;
-	}
-
-	svg {
-		width: 1em;
-		height: 1em;
-	}
-
-	&:hover {
-		filter: brightness(0.85);
-	}
-
-	&:active {
-		transform: scale(0.95);
-		filter: brightness(0.8);
-	}
-}
-</style>
diff --git a/packages/ui/src/components/base/Table.vue b/packages/ui/src/components/base/Table.vue
index b84f5a54c2..d952a5337b 100644
--- a/packages/ui/src/components/base/Table.vue
+++ b/packages/ui/src/components/base/Table.vue
@@ -1,7 +1,7 @@
 <template>
-	<div class="overflow-hidden rounded-2xl border border-solid border-surface-3">
-		<table class="w-full border-separate border-spacing-0">
-			<thead>
+	<div class="overflow-hidden rounded-2xl border border-solid border-surface-5">
+		<table class="w-full table-fixed border-separate border-spacing-0 border-surface-5">
+			<thead class="">
 				<tr class="bg-surface-3">
 					<th v-if="showSelection" class="w-10 pl-4">
 						<Checkbox
@@ -50,7 +50,7 @@
 					:key="rowIndex"
 					:class="rowIndex % 2 === 0 ? 'bg-surface-2' : 'bg-surface-1.5'"
 				>
-					<td v-if="showSelection" class="w-10">
+					<td v-if="showSelection" class="w-10 border-solid border-0 border-t border-surface-5">
 						<Checkbox
 							:model-value="isSelected(row)"
 							class="shrink-0 p-4"
@@ -60,7 +60,7 @@
 					<td
 						v-for="column in columns"
 						:key="column.key"
-						class="text-secondary h-14 first:pl-4 last:pr-4"
+						class="text-secondary h-14 overflow-hidden first:pl-4 last:pr-4 border-solid border-0 border-t border-surface-5"
 						:class="`text-${column.align ?? 'left'}`"
 						:style="column.width ? { width: column.width } : undefined"
 					>
diff --git a/packages/ui/src/components/billing/ModalBasedServerPlan.vue b/packages/ui/src/components/billing/ModalBasedServerPlan.vue
deleted file mode 100644
index ce363cccca..0000000000
--- a/packages/ui/src/components/billing/ModalBasedServerPlan.vue
+++ /dev/null
@@ -1,149 +0,0 @@
-<script setup lang="ts">
-import type { Labrinth } from '@modrinth/api-client'
-import { InfoIcon } from '@modrinth/assets'
-import { Menu } from 'floating-vue'
-import { computed, inject, type Ref } from 'vue'
-
-import { useFormatPrice } from '../../composables'
-import { type MessageDescriptor, useVIntl } from '../../composables/i18n'
-import { getPriceForInterval, monthsInInterval } from '../../utils/product-utils'
-import type { ServerBillingInterval } from './ModrinthServersPurchaseModal.vue'
-import ServersSpecs from './ServersSpecs.vue'
-
-const props = withDefaults(
-	defineProps<{
-		plan: Labrinth.Billing.Internal.Product
-		title: MessageDescriptor
-		description: MessageDescriptor
-		buttonColor?: 'standard' | 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple'
-		mostPopular?: boolean
-		selected?: boolean
-	}>(),
-	{
-		buttonColor: 'standard',
-		mostPopular: false,
-		selected: false,
-	},
-)
-
-const emit = defineEmits<{
-	(e: 'select', plan: Labrinth.Billing.Internal.Product): void
-}>()
-
-const { formatMessage } = useVIntl()
-const formatPrice = useFormatPrice()
-
-// TODO: Use DI framework when merged.
-const selectedInterval = inject<Ref<ServerBillingInterval>>('selectedInterval')
-const currency = inject<string>('currency')
-
-const perMonth = computed(() => {
-	if (!props.plan || !currency || !selectedInterval?.value) return undefined
-	const total = getPriceForInterval(props.plan, currency, selectedInterval.value)
-	if (!total) return undefined
-	return total / monthsInInterval[selectedInterval.value]
-})
-
-const planSpecs = computed(() => {
-	const metadata = props.plan.metadata
-	if (metadata.type === 'pyro' || metadata.type === 'medal') {
-		return {
-			ram: metadata.ram,
-			storage: metadata.storage,
-			cpu: metadata.cpu,
-		}
-	}
-	return null
-})
-
-const mostPopularStyle = computed(() => {
-	if (!props.mostPopular) return undefined
-	const style: Record<string, string> = {
-		backgroundImage:
-			'radial-gradient(86.12% 101.64% at 95.97% 94.07%, rgba(27, 217, 106, 0.23) 0%, rgba(14, 115, 56, 0.2) 100%)',
-		boxShadow: '0px 12px 38.1px rgba(27, 217, 106, 0.13)',
-	}
-
-	if (!props.selected) {
-		style.borderColor = 'rgba(12, 107, 52, 0.55)'
-	}
-
-	return style
-})
-</script>
-
-<template>
-	<div
-		class="rounded-2xl p-4 font-semibold transition-all duration-300 experimental-styles-within h-full border-2 border-solid cursor-pointer select-none"
-		:class="{
-			'bg-brand-highlight border-brand': selected,
-			'bg-button-bg border-transparent': !selected,
-			'!bg-bg': mostPopular,
-		}"
-		:style="mostPopularStyle"
-		role="button"
-		tabindex="0"
-		:aria-pressed="selected"
-		@click="emit('select', plan)"
-		@keydown.enter.prevent="emit('select', plan)"
-		@keydown.space.prevent="emit('select', plan)"
-	>
-		<div class="flex h-full flex-col justify-between gap-2">
-			<div class="flex flex-col">
-				<div class="flex items-center justify-between">
-					<span class="text-2xl font-semibold text-contrast">
-						{{ formatMessage(title) }}
-					</span>
-					<div
-						v-if="mostPopular"
-						class="relative w-fit rounded-full bg-highlight-green px-3 py-1 text-sm font-bold text-brand backdrop-blur-lg"
-					>
-						Most Popular
-					</div>
-				</div>
-				<span class="m-0 text-lg font-bold text-contrast">
-					{{ formatPrice(perMonth, currency, true) }}
-					<span class="text-sm font-semibold text-secondary">
-						/ month{{ selectedInterval !== 'monthly' ? `, billed ${selectedInterval}` : '' }}
-					</span>
-				</span>
-			</div>
-
-			<span class="text-sm">{{ formatMessage(description) }}</span>
-
-			<div class="w-fit">
-				<Menu
-					placement="bottom-start"
-					:triggers="['hover', 'focus']"
-					:auto-hide="true"
-					:delay="{ show: 100, hide: 120 }"
-					:distance="6"
-				>
-					<template #default="{ shown }">
-						<div
-							class="flex w-fit items-center gap-2 cursor-help text-sm font-medium cursor-default select-none outline-none"
-							:class="shown ? 'text-primary' : 'text-secondary'"
-							role="button"
-							tabindex="0"
-							aria-haspopup="true"
-							:aria-expanded="shown"
-						>
-							<InfoIcon />
-							View plan details
-						</div>
-					</template>
-
-					<template #popper>
-						<div v-if="planSpecs" class="w-fit rounded-md border border-contrast/10 p-3 shadow-lg">
-							<ServersSpecs
-								:ram="planSpecs.ram"
-								:storage="planSpecs.storage"
-								:cpus="planSpecs.cpu"
-							/>
-						</div>
-					</template>
-				</Menu>
-			</div>
-		</div>
-	</div>
-</template>
diff --git a/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue b/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
index edfd64ab1d..0aeff5be34 100644
--- a/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
+++ b/packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
@@ -264,7 +264,8 @@ function begin(
 	selectedInterval.value = interval
 	customServer.value = !selectedPlan.value
 	selectedPaymentMethod.value = undefined
-	currentStep.value = steps[0]
+	const skipPlanStep = props.planStage && plan !== undefined
+	currentStep.value = skipPlanStep ? (steps[1] ?? steps[0]) : steps[0]
 	skipPaymentMethods.value = true
 	projectId.value = project
 	modal.value?.show()
@@ -283,6 +284,10 @@ function handleChooseCustom() {
 	selectedPlan.value = undefined
 }
 
+function handleProceed() {
+	setStep(nextStep.value)
+}
+
 // When the user explicitly wants to change or add a payment method from Review
 // we must disable the auto-skip behavior, clear any selected method, and
 // navigate to the Payment step so Stripe Elements can mount.
@@ -328,7 +333,7 @@ function goToBreadcrumbStep(id: string) {
 				</template>
 			</div>
 		</template>
-		<div class="w-[40rem] max-w-full">
+		<div :class="currentStep === 'plan' ? 'w-[56rem] max-w-full' : 'w-[40rem] max-w-full'">
 			<PlanSelector
 				v-if="currentStep === 'plan'"
 				v-model:plan="selectedPlan"
@@ -337,6 +342,7 @@ function goToBreadcrumbStep(id: string) {
 				:available-products="availableProducts"
 				:currency="currency"
 				@choose-custom="handleChooseCustom"
+				@proceed="handleProceed"
 			/>
 			<RegionSelector
 				v-else-if="currentStep === 'region'"
@@ -374,7 +380,7 @@ function goToBreadcrumbStep(id: string) {
 				:ping="currentPing"
 				:loading="paymentMethodLoading"
 				:selected-payment-method="selectedPaymentMethod || inputtedPaymentMethod"
-				:has-payment-method="hasPaymentMethod"
+				:has-payment-method="!!hasPaymentMethod"
 				:tax="tax"
 				:total="total"
 				:no-payment-required="noPaymentRequired"
@@ -410,12 +416,12 @@ function goToBreadcrumbStep(id: string) {
 				<button v-if="previousStep" @click="previousStep && setStep(previousStep, true)">
 					<LeftArrowIcon /> {{ formatMessage(commonMessages.backButton) }}
 				</button>
-				<button v-else @click="modal?.hide()">
+				<button v-else-if="currentStep !== 'plan'" @click="modal?.hide()">
 					<XIcon />
 					{{ formatMessage(commonMessages.cancelButton) }}
 				</button>
 			</ButtonStyled>
-			<ButtonStyled color="brand">
+			<ButtonStyled v-if="currentStep !== 'plan'" color="brand">
 				<button
 					v-tooltip="
 						currentStep === 'review' && !acceptedEula && !noPaymentRequired
diff --git a/packages/ui/src/components/billing/ResubscribeModal.vue b/packages/ui/src/components/billing/ResubscribeModal.vue
new file mode 100644
index 0000000000..2bf3f4222e
--- /dev/null
+++ b/packages/ui/src/components/billing/ResubscribeModal.vue
@@ -0,0 +1,287 @@
+<template>
+	<NewModal ref="modal" max-width="550px">
+		<template #title>
+			<div class="text-2xl font-semibold text-contrast">{{ formatMessage(messages.title) }}</div>
+		</template>
+
+		<div class="flex w-[44rem] max-w-full flex-col gap-6">
+			<template v-if="modalData">
+				<p class="m-0 text-secondary leading-relaxed">
+					<IntlFormatted
+						:message-id="messages.description"
+						:values="{ serverName: modalData.serverName }"
+					>
+						<template #server-name="{ children }">
+							<span class="font-semibold text-contrast"><component :is="() => children" /></span>
+						</template>
+					</IntlFormatted>
+				</p>
+
+				<div v-if="formattedPrice" class="flex flex-col gap-2.5">
+					<span class="text-contrast font-semibold">{{ formatMessage(messages.planLabel) }}</span>
+					<div
+						class="flex items-center justify-between gap-4 rounded-2xl border border-solid border-surface-5 bg-surface-2 p-5"
+					>
+						<div class="flex flex-col gap-1">
+							<div class="truncate font-semibold text-contrast">{{ modalData.planName }}</div>
+							<div
+								v-if="
+									modalData.ramGb != null ||
+									modalData.storageGb != null ||
+									modalData.sharedCpus != null
+								"
+								class="text-secondary flex gap-1.5 font-medium text-sm items-center"
+							>
+								<template v-if="modalData.ramGb != null">
+									{{ formatMessage(messages.ramLabel, { ramGb: modalData.ramGb }) }}
+								</template>
+								<template v-if="modalData.storageGb != null">
+									<div
+										v-if="modalData.ramGb != null"
+										class="h-1.5 w-1.5 bg-button-border rounded-full"
+									></div>
+									{{ formatMessage(messages.storageLabel, { storageGb: modalData.storageGb }) }}
+								</template>
+								<template v-if="modalData.sharedCpus != null">
+									<div
+										v-if="modalData.ramGb != null || modalData.storageGb != null"
+										class="h-1.5 w-1.5 bg-button-border rounded-full"
+									></div>
+									{{ formatMessage(messages.cpusLabel, { sharedCpus: modalData.sharedCpus }) }}
+								</template>
+							</div>
+						</div>
+						<div class="flex flex-col gap-1 items-end">
+							<div class="font-semibold text-contrast">
+								{{ formattedPrice }}
+							</div>
+							<div v-if="intervalLabel" class="text-secondary">{{ intervalLabel }}</div>
+						</div>
+					</div>
+				</div>
+
+				<p v-if="formattedNextChargeDate" class="m-0 text-primary">
+					<IntlFormatted
+						:message-id="messages.nextCharge"
+						:values="{ date: formattedNextChargeDate }"
+					>
+						<template #charge-date="{ children }">
+							<span class="font-semibold text-contrast"><component :is="() => children" /></span>
+						</template>
+					</IntlFormatted>
+				</p>
+			</template>
+			<template v-else>
+				<p class="m-0 text-secondary">{{ formatMessage(messages.failedLoad) }}</p>
+			</template>
+		</div>
+
+		<template #actions>
+			<div class="flex justify-end gap-2">
+				<ButtonStyled type="outlined">
+					<button class="!border !border-surface-5" @click="handleCancel">
+						<XIcon />
+						{{ formatMessage(messages.cancelButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button :disabled="!canResubscribe" @click="handleResubscribe">
+						<RotateCounterClockwiseIcon />
+						{{ formatMessage(messages.resubscribeButton) }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</template>
+	</NewModal>
+</template>
+
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { RotateCounterClockwiseIcon, XIcon } from '@modrinth/assets'
+import { computed, ref, useTemplateRef } from 'vue'
+
+import { injectNotificationManager } from '#ui/providers/web-notifications.ts'
+
+import { useFormatDateTime, useFormatPrice } from '../../composables'
+import { defineMessages, useVIntl } from '../../composables/i18n'
+import IntlFormatted from '../base/IntlFormatted.vue'
+import { ButtonStyled, NewModal } from '../index'
+
+const { addNotification } = injectNotificationManager()
+const { formatMessage } = useVIntl()
+
+type BillingInterval = Labrinth.Billing.Internal.PriceDuration
+
+export type ResubscribeModalPayload = {
+	subscriptionId: string
+	wasSuspended: boolean
+	serverName: string
+	planName: string
+	ramGb?: number
+	storageGb?: number
+	sharedCpus?: number
+	priceCents?: number
+	currencyCode?: string
+	interval: BillingInterval
+	nextChargeDate?: string | number | Date
+}
+
+type ResubscribeModalState = {
+	subscriptionId: string
+	wasSuspended: boolean
+	serverName: string
+	planName: string
+	ramGb?: number
+	storageGb?: number
+	sharedCpus?: number
+	priceCents?: number
+	currencyCode?: string
+	interval: BillingInterval
+	nextChargeDate?: string | number | Date
+}
+
+const emit = defineEmits<{
+	(e: 'cancel'): void
+	(e: 'resubscribe', payload: { subscriptionId: string; wasSuspended: boolean }): void
+}>()
+
+const formatDate = useFormatDateTime({ dateStyle: 'long' })
+const formatPrice = useFormatPrice()
+
+const modal = useTemplateRef<InstanceType<typeof NewModal>>('modal')
+
+const modalData = ref<ResubscribeModalState | null>(null)
+
+const messages = defineMessages({
+	title: { id: 'billing.resubscribe-modal.title', defaultMessage: 'Resubscribe to Server' },
+	description: {
+		id: 'billing.resubscribe-modal.description',
+		defaultMessage:
+			'You are about to resubscribe to <server-name>{serverName}</server-name>. Your subscription will be reactivated and your server will continue running without interruption.',
+	},
+	planLabel: { id: 'billing.resubscribe-modal.plan-label', defaultMessage: 'Plan' },
+	ramLabel: { id: 'billing.resubscribe-modal.ram', defaultMessage: '{ramGb} GB RAM' },
+	storageLabel: {
+		id: 'billing.resubscribe-modal.storage',
+		defaultMessage: '{storageGb} GB Storage',
+	},
+	cpusLabel: {
+		id: 'billing.resubscribe-modal.cpus',
+		defaultMessage: '{sharedCpus} Shared CPUs',
+	},
+	nextCharge: {
+		id: 'billing.resubscribe-modal.next-charge',
+		defaultMessage: 'Your next charge will be on <charge-date>{date}</charge-date>.',
+	},
+	failedLoad: {
+		id: 'billing.resubscribe-modal.failed-load',
+		defaultMessage: 'Failed to load subscription details.',
+	},
+	cancelButton: { id: 'billing.resubscribe-modal.cancel', defaultMessage: 'Cancel' },
+	resubscribeButton: {
+		id: 'billing.resubscribe-modal.resubscribe',
+		defaultMessage: 'Resubscribe',
+	},
+	intervalMonthly: { id: 'billing.resubscribe-modal.interval.monthly', defaultMessage: '/month' },
+	intervalQuarterly: {
+		id: 'billing.resubscribe-modal.interval.quarterly',
+		defaultMessage: '/quarter',
+	},
+	intervalYearly: { id: 'billing.resubscribe-modal.interval.yearly', defaultMessage: '/year' },
+	intervalFiveDays: {
+		id: 'billing.resubscribe-modal.interval.five-days',
+		defaultMessage: '/5 days',
+	},
+	errorTitle: { id: 'billing.resubscribe-modal.error.title', defaultMessage: 'Error' },
+	errorText: {
+		id: 'billing.resubscribe-modal.error.text',
+		defaultMessage: 'Cannot resubscribe, failed to load subscription details.',
+	},
+})
+
+const canResubscribe = computed(() => !!modalData.value?.subscriptionId)
+
+const intervalLabel = computed(() => {
+	switch (modalData.value?.interval) {
+		case 'monthly':
+			return formatMessage(messages.intervalMonthly)
+		case 'quarterly':
+			return formatMessage(messages.intervalQuarterly)
+		case 'yearly':
+			return formatMessage(messages.intervalYearly)
+		case 'five-days':
+			return formatMessage(messages.intervalFiveDays)
+		default:
+			return null
+	}
+})
+
+const formattedPrice = computed(() => {
+	const { priceCents, currencyCode } = modalData.value ?? {}
+	if (priceCents == null || currencyCode == null) return ''
+	return formatPrice(priceCents, currencyCode)
+})
+
+const normalizedNextChargeDate = computed(() => {
+	if (!modalData.value?.nextChargeDate) return null
+	const date = new Date(modalData.value.nextChargeDate)
+	if (Number.isNaN(date.getTime())) {
+		return null
+	}
+	return date
+})
+
+const formattedNextChargeDate = computed(() =>
+	normalizedNextChargeDate.value ? formatDate(normalizedNextChargeDate.value) : '',
+)
+
+function show(payload: ResubscribeModalPayload) {
+	if (!payload) {
+		addNotification({
+			type: 'error',
+			title: formatMessage(messages.errorTitle),
+			text: formatMessage(messages.errorText),
+		})
+		return
+	}
+
+	modalData.value = {
+		subscriptionId: payload.subscriptionId,
+		wasSuspended: payload.wasSuspended,
+		serverName: payload.serverName.trim(),
+		planName: payload.planName,
+		ramGb: payload.ramGb,
+		storageGb: payload.storageGb,
+		sharedCpus: payload.sharedCpus,
+		priceCents: payload.priceCents,
+		currencyCode: payload.currencyCode,
+		interval: payload.interval,
+		nextChargeDate: payload.nextChargeDate,
+	}
+	modal.value?.show()
+}
+
+function hide() {
+	modal.value?.hide()
+}
+
+function handleCancel() {
+	hide()
+	emit('cancel')
+}
+
+function handleResubscribe() {
+	if (!canResubscribe.value || !modalData.value?.subscriptionId) return
+	hide()
+
+	emit('resubscribe', {
+		subscriptionId: modalData.value.subscriptionId,
+		wasSuspended: modalData.value.wasSuspended,
+	})
+}
+
+defineExpose({
+	show,
+	hide,
+})
+</script>
diff --git a/packages/ui/src/components/billing/ServersGuestPlanModal.vue b/packages/ui/src/components/billing/ServersGuestPlanModal.vue
new file mode 100644
index 0000000000..820a8b9ed1
--- /dev/null
+++ b/packages/ui/src/components/billing/ServersGuestPlanModal.vue
@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { ChevronRightIcon, ExternalIcon, XIcon } from '@modrinth/assets'
+import { computed, ref, useTemplateRef } from 'vue'
+
+import ButtonStyled from '../base/ButtonStyled.vue'
+import NewModal from '../modal/NewModal.vue'
+import type { ServerBillingInterval } from './ModrinthServersPurchaseModal.vue'
+import PlanSelector from './ServersPurchase0Plan.vue'
+
+const props = withDefaults(
+	defineProps<{
+		availableProducts: Labrinth.Billing.Internal.Product[]
+		currency: string
+		loggedIn?: boolean
+	}>(),
+	{
+		loggedIn: false,
+	},
+)
+
+const emit = defineEmits<{
+	(e: 'continue', payload: { interval: ServerBillingInterval; planId: string | null }): void
+}>()
+
+const modal = useTemplateRef<InstanceType<typeof NewModal>>('modal')
+
+const selectedPlan = ref<Labrinth.Billing.Internal.Product>()
+const selectedInterval = ref<ServerBillingInterval>('quarterly')
+const showSignInPrompt = ref(false)
+
+const defaultPlan = computed<Labrinth.Billing.Internal.Product | undefined>(() => {
+	return (
+		props.availableProducts.find((p) => p?.metadata?.type === 'pyro' && p.metadata.ram === 6144) ??
+		props.availableProducts.find((p) => p?.metadata?.type === 'pyro') ??
+		props.availableProducts[0]
+	)
+})
+
+function emitSelection() {
+	emit('continue', {
+		interval: selectedInterval.value,
+		planId: selectedPlan.value?.id ?? null,
+	})
+}
+
+function continueWithSelection() {
+	if (!props.loggedIn) {
+		showSignInPrompt.value = true
+		return
+	}
+
+	emitSelection()
+	modal.value?.hide()
+}
+
+function chooseCustom() {
+	selectedPlan.value = undefined
+}
+
+function closeSignInPrompt() {
+	showSignInPrompt.value = false
+}
+
+function continueToAuth() {
+	emitSelection()
+	closeSignInPrompt()
+	modal.value?.hide()
+}
+
+function handleModalHide() {
+	closeSignInPrompt()
+}
+
+function show(initialInterval?: ServerBillingInterval, initialPlanId?: string | null) {
+	closeSignInPrompt()
+	selectedInterval.value = initialInterval ?? 'quarterly'
+	if (initialPlanId === null) {
+		selectedPlan.value = undefined
+	} else if (initialPlanId) {
+		selectedPlan.value = props.availableProducts.find((product) => product.id === initialPlanId)
+	} else {
+		selectedPlan.value = defaultPlan.value
+	}
+	modal.value?.show()
+}
+
+defineExpose({
+	show,
+})
+</script>
+
+<template>
+	<NewModal ref="modal" :on-hide="handleModalHide" no-padding>
+		<template #title>
+			<div class="flex items-center gap-1 font-bold text-secondary">
+				<span class="text-contrast">Plan</span>
+				<ChevronRightIcon class="h-5 w-5 text-secondary" stroke-width="3" />
+				<span class=""> Region </span>
+				<ChevronRightIcon class="h-5 w-5 text-secondary" stroke-width="3" />
+				<span class=""> Payment method </span>
+				<ChevronRightIcon class="h-5 w-5 text-secondary" stroke-width="3" />
+				<span class=""> Review </span>
+			</div>
+		</template>
+		<div class="relative w-[56rem] max-w-full">
+			<div class="w-full h-full p-6">
+				<PlanSelector
+					v-model:plan="selectedPlan"
+					v-model:interval="selectedInterval"
+					:available-products="availableProducts"
+					:currency="currency"
+					@choose-custom="chooseCustom"
+					@proceed="continueWithSelection"
+				/>
+			</div>
+
+			<Transition
+				enter-active-class="transition-opacity duration-150 ease-out"
+				enter-from-class="opacity-0"
+				enter-to-class="opacity-100"
+				leave-active-class="transition-opacity duration-150 ease-in"
+				leave-from-class="opacity-100"
+				leave-to-class="opacity-0"
+			>
+				<div
+					v-if="showSignInPrompt"
+					class="pointer-events-auto absolute inset-0 z-20 rounded-lg bg-black/60"
+					@click="closeSignInPrompt"
+				/>
+			</Transition>
+
+			<Transition
+				enter-active-class="transition-all duration-200 ease-out"
+				enter-from-class="translate-y-4 opacity-0"
+				enter-to-class="translate-y-0 opacity-100"
+				leave-active-class="transition-all duration-150 ease-in"
+				leave-from-class="translate-y-0 opacity-100"
+				leave-to-class="translate-y-4 opacity-0"
+			>
+				<div
+					v-if="showSignInPrompt"
+					class="absolute inset-x-0 bottom-0 -m-px z-30 rounded-2xl border border-solid border-surface-5 bg-bg-raised p-6 shadow-2xl"
+				>
+					<div class="absolute right-4 top-4">
+						<ButtonStyled circular type="transparent">
+							<button aria-label="Close sign in prompt" @click="closeSignInPrompt">
+								<XIcon />
+							</button>
+						</ButtonStyled>
+					</div>
+
+					<div class="mx-auto flex max-w-xl flex-col items-center gap-4 text-center">
+						<div class="flex flex-col gap-2">
+							<div class="font-semibold text-contrast">Sign in to continue your purchase</div>
+							<div class="">You need a Modrinth account to add your billing details.</div>
+						</div>
+						<ButtonStyled color="brand" class="mt-2">
+							<button @click="continueToAuth">
+								Sign in or create an account
+								<ExternalIcon class="size-4" />
+							</button>
+						</ButtonStyled>
+					</div>
+				</div>
+			</Transition>
+		</div>
+	</NewModal>
+</template>
diff --git a/packages/ui/src/components/billing/ServersPurchase0Plan.vue b/packages/ui/src/components/billing/ServersPurchase0Plan.vue
index 88fa441d4d..cec037c849 100644
--- a/packages/ui/src/components/billing/ServersPurchase0Plan.vue
+++ b/packages/ui/src/components/billing/ServersPurchase0Plan.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
-import { computed, provide } from 'vue'
+import { RightArrowIcon } from '@modrinth/assets'
+import { computed } from 'vue'
 
 import { useFormatPrice } from '../../composables'
 import { defineMessages, useVIntl } from '../../composables/i18n'
 import { getPriceForInterval, monthsInInterval } from '../../utils/product-utils'
+import ButtonStyled from '../base/ButtonStyled.vue'
 import OptionGroup from '../base/OptionGroup.vue'
-import ModalBasedServerPlan from './ModalBasedServerPlan.vue'
 import type { ServerBillingInterval } from './ModrinthServersPurchaseModal.vue'
+import ServersSpecs from './ServersSpecs.vue'
 
 const { formatMessage } = useVIntl()
 const formatPrice = useFormatPrice()
@@ -23,18 +25,10 @@ const availableBillingIntervals = ['monthly', 'quarterly']
 const selectedPlan = defineModel<Labrinth.Billing.Internal.Product>('plan')
 const selectedInterval = defineModel<ServerBillingInterval>('interval')
 const emit = defineEmits<{
-	(e: 'choose-custom'): void
+	(e: 'choose-custom' | 'proceed'): void
 }>()
 
 const messages = defineMessages({
-	title: {
-		id: 'servers.purchase.step.plan.prompt',
-		defaultMessage: 'Choose a plan',
-	},
-	subtitle: {
-		id: 'servers.purchase.step.plan.subtitle',
-		defaultMessage: 'Pick the amount of RAM and specs that fit your needs.',
-	},
 	selectPlan: {
 		id: 'servers.purchase.step.plan.select',
 		defaultMessage: 'Select Plan',
@@ -43,9 +37,17 @@ const messages = defineMessages({
 		id: 'servers.purchase.step.plan.get-started',
 		defaultMessage: 'Get started',
 	},
-	billed: {
-		id: 'servers.purchase.step.plan.billed',
-		defaultMessage: 'billed {interval}',
+	smallTitle: {
+		id: 'servers.purchase.step.plan.small',
+		defaultMessage: 'Small',
+	},
+	mediumTitle: {
+		id: 'servers.purchase.step.plan.medium',
+		defaultMessage: 'Medium',
+	},
+	largeTitle: {
+		id: 'servers.purchase.step.plan.large',
+		defaultMessage: 'Large',
 	},
 	smallDesc: {
 		id: 'servers.purchase.step.plan.small.desc',
@@ -67,6 +69,18 @@ const messages = defineMessages({
 		id: 'servers.purchase.step.plan.most-popular',
 		defaultMessage: 'Most Popular',
 	},
+	billingSubtitle: {
+		id: 'servers.purchase.step.plan.billing-subtitle',
+		defaultMessage: 'Available in North America, Europe, and Southeast Asia.',
+	},
+	customHeading: {
+		id: 'servers.purchase.step.plan.custom.heading',
+		defaultMessage: 'Know exactly what you need?',
+	},
+	yourCurrentPlan: {
+		id: 'servers.purchase.step.plan.your-current-plan',
+		defaultMessage: 'Your current plan',
+	},
 })
 
 const isSameAsExistingPlan = computed(() => {
@@ -95,8 +109,12 @@ const plansByRam = computed(() => {
 	return byName
 })
 
-function handleCustomPlan() {
-	emit('choose-custom')
+function planSpecs(plan: Labrinth.Billing.Internal.Product) {
+	const m = plan.metadata
+	if (m.type === 'pyro' || m.type === 'medal') {
+		return { ram: m.ram, storage: m.storage, cpus: m.cpu }
+	}
+	return null
 }
 
 function pricePerMonth(plan?: Labrinth.Billing.Internal.Product) {
@@ -106,22 +124,6 @@ function pricePerMonth(plan?: Labrinth.Billing.Internal.Product) {
 	return total / monthsInInterval[selectedInterval.value]
 }
 
-const customPricePerGb = computed(() => {
-	// Calculate lowest price per GB among products for current interval
-	let min: number | undefined
-	for (const p of props.availableProducts) {
-		const perMonth = pricePerMonth(p)
-		const metadata = p?.metadata
-		if (!metadata || (metadata.type !== 'pyro' && metadata.type !== 'medal')) continue
-		const ramGb = metadata.ram / 1024
-		if (perMonth && ramGb > 0) {
-			const perGb = perMonth / ramGb
-			if (min === undefined || perGb < min) min = perGb
-		}
-	}
-	return min
-})
-
 const customStartingPrice = computed(() => {
 	let min: number | undefined
 	for (const p of props.availableProducts) {
@@ -131,26 +133,47 @@ const customStartingPrice = computed(() => {
 	return min
 })
 
-provide('currency', props.currency)
-provide('selectedInterval', selectedInterval)
+const smallPrice = computed(() => pricePerMonth(plansByRam.value.small))
+const mediumPrice = computed(() => pricePerMonth(plansByRam.value.medium))
+const largePrice = computed(() => pricePerMonth(plansByRam.value.large))
+
+const smallSpecs = computed(() =>
+	plansByRam.value.small ? planSpecs(plansByRam.value.small) : null,
+)
+const mediumSpecs = computed(() =>
+	plansByRam.value.medium ? planSpecs(plansByRam.value.medium) : null,
+)
+const largeSpecs = computed(() =>
+	plansByRam.value.large ? planSpecs(plansByRam.value.large) : null,
+)
+
+function selectPlan(plan: Labrinth.Billing.Internal.Product) {
+	selectedPlan.value = plan
+	emit('proceed')
+}
+
+function selectCustom() {
+	emit('choose-custom')
+	emit('proceed')
+}
 </script>
 
 <template>
-	<div class="grid grid-cols-[1fr_auto_1fr] items-center gap-3 mb-5 !mt-0">
-		<span></span>
+	<div class="flex flex-col items-center gap-2 mb-5 !mt-0">
 		<OptionGroup
 			v-slot="{ option }"
 			v-model="selectedInterval"
 			class="!bg-button-bg !shadow-none"
 			:options="availableBillingIntervals"
 		>
-			<template v-if="option === 'monthly'"> Pay monthly </template>
-			<span v-else-if="option === 'quarterly'"> Pay quarterly </span>
-			<span v-else-if="option === 'yearly'"> Pay yearly </span>
+			<template v-if="option === 'monthly'">Monthly</template>
+			<span v-else-if="option === 'quarterly'">
+				Quarterly <span class="text-brand">(Save 16%)</span>
+			</span>
 		</OptionGroup>
-		<span class="bg-transparent p-0 text-sm text-xs font-bold text-brand">
-			{{ selectedInterval !== 'quarterly' ? 'Save' : 'Saving' }} 16% with quarterly billing!
-		</span>
+		<div class="text-sm text-secondary text-center">
+			{{ formatMessage(messages.billingSubtitle) }}
+		</div>
 	</div>
 	<Transition
 		enter-active-class="transition-all duration-300 ease-out"
@@ -164,69 +187,183 @@ provide('selectedInterval', selectedInterval)
 			Your server is already on this plan, choose a different plan.
 		</div>
 	</Transition>
-	<div class="grid grid-cols-1 sm:grid-cols-2 !gap-4">
-		<ModalBasedServerPlan
-			v-if="plansByRam.small"
-			:plan="plansByRam.small"
-			:title="{ id: 'servers.purchase.step.plan.small', defaultMessage: 'Small' }"
-			:description="messages.smallDesc"
-			:button-color="'blue'"
-			:selected="selectedPlan?.id === plansByRam.small.id"
-			@select="selectedPlan = $event"
-		/>
-		<ModalBasedServerPlan
-			v-if="plansByRam.medium"
-			:plan="plansByRam.medium"
-			:title="{ id: 'servers.purchase.step.plan.medium', defaultMessage: 'Medium' }"
-			:description="messages.mediumDesc"
-			most-popular
-			:button-color="'brand'"
-			:selected="selectedPlan?.id === plansByRam.medium.id"
-			@select="selectedPlan = $event"
-		/>
-		<ModalBasedServerPlan
-			v-if="plansByRam.large"
-			:plan="plansByRam.large"
-			:title="{ id: 'servers.purchase.step.plan.large', defaultMessage: 'Large' }"
-			:description="messages.largeDesc"
-			:button-color="'purple'"
-			:selected="selectedPlan?.id === plansByRam.large.id"
-			@select="selectedPlan = $event"
-		/>
+	<div class="grid grid-cols-3 gap-4 items-start">
+		<!-- Small -->
 		<div
-			v-if="customStartingPrice"
-			class="rounded-2xl p-4 font-semibold transition-all duration-300 experimental-styles-within h-full border-2 border-solid cursor-pointer select-none"
-			:class="!selectedPlan ? 'bg-brand-highlight border-brand' : 'bg-button-bg border-transparent'"
-			role="button"
-			tabindex="0"
-			:aria-pressed="!selectedPlan"
-			@click="handleCustomPlan"
-			@keydown.enter.prevent="handleCustomPlan"
-			@keydown.space.prevent="handleCustomPlan"
+			v-if="plansByRam.small && smallPrice"
+			class="flex flex-col gap-4 rounded-2xl bg-surface-2 border-2 border-solid border-transparent p-5 h-full"
 		>
-			<div class="flex h-full flex-col justify-between">
-				<div class="flex flex-col gap-2">
-					<div class="flex items-center justify-between">
-						<span class="text-2xl font-semibold text-contrast">Custom</span>
+			<div>
+				<div class="text-3xl font-semibold text-contrast leading-none">
+					{{ formatMessage(messages.smallTitle) }}
+				</div>
+				<div class="mt-1">
+					<span class="text-2xl font-bold text-contrast">
+						{{ formatPrice(smallPrice, currency, true) }}
+					</span>
+					<span class="text-sm">
+						/ month<template v-if="selectedInterval !== 'monthly'"
+							>, billed {{ selectedInterval }}</template
+						>
+					</span>
+				</div>
+				<div class="mt-2 text-sm text-primary">
+					{{ formatMessage(messages.smallDesc) }}
+				</div>
+			</div>
+			<div class="w-full">
+				<ButtonStyled color="blue" class="w-full">
+					<button
+						class="w-full"
+						:disabled="existingPlan?.id === plansByRam.small.id"
+						@click="selectPlan(plansByRam.small!)"
+					>
+						{{
+							existingPlan?.id === plansByRam.small.id
+								? formatMessage(messages.yourCurrentPlan)
+								: formatMessage(messages.selectPlan)
+						}}
+					</button>
+				</ButtonStyled>
+			</div>
+			<ServersSpecs
+				v-if="smallSpecs"
+				:ram="smallSpecs.ram"
+				:storage="smallSpecs.storage"
+				:cpus="smallSpecs.cpus"
+			/>
+		</div>
+
+		<!-- Medium (Most Popular) -->
+		<div v-if="plansByRam.medium && mediumPrice" class="flex flex-col items-center relative h-full">
+			<div
+				class="z-10 -mb-3.5 rounded-full text-sm font-medium text-brand whitespace-nowrap absolute -top-3 right-4 bg-surface-3"
+			>
+				<div
+					class="bg-brand-highlight border border-solid border-highlight-green px-2.5 py-0.5 rounded-full"
+				>
+					{{ formatMessage(messages.mostPopular) }}
+				</div>
+			</div>
+
+			<div
+				class="w-full flex flex-col gap-4 rounded-2xl bg-brand-inverted border-brand-highlight border border-solid p-5 h-full"
+				:style="{
+					backgroundImage:
+						'radial-gradient(86.12% 101.64% at 95.97% 94.07%, rgba(27, 217, 106, 0.23) 0%, rgba(14, 115, 56, 0.2) 100%)',
+				}"
+			>
+				<div>
+					<div class="text-3xl font-semibold text-contrast leading-none">
+						{{ formatMessage(messages.mediumTitle) }}
 					</div>
-					<span class="m-0 text-lg font-bold text-contrast">
-						{{ formatPrice(customStartingPrice, currency, true) }}
-						<span class="text-sm font-semibold text-secondary">
+					<div class="mt-1">
+						<span class="text-2xl font-bold text-contrast">
+							{{ formatPrice(mediumPrice, currency, true) }}
+						</span>
+						<span class="text-sm">
 							/ month<template v-if="selectedInterval !== 'monthly'"
 								>, billed {{ selectedInterval }}</template
 							>
 						</span>
+					</div>
+					<div class="mt-2 text-sm text-primary">
+						{{ formatMessage(messages.mediumDesc) }}
+					</div>
+				</div>
+				<div class="w-full">
+					<ButtonStyled color="brand" class="w-full">
+						<button
+							class="w-full"
+							:disabled="existingPlan?.id === plansByRam.medium.id"
+							@click="selectPlan(plansByRam.medium!)"
+						>
+							{{
+								existingPlan?.id === plansByRam.medium.id
+									? formatMessage(messages.yourCurrentPlan)
+									: formatMessage(messages.selectPlan)
+							}}
+						</button>
+					</ButtonStyled>
+				</div>
+				<ServersSpecs
+					v-if="mediumSpecs"
+					:ram="mediumSpecs.ram"
+					:storage="mediumSpecs.storage"
+					:cpus="mediumSpecs.cpus"
+				/>
+			</div>
+		</div>
+
+		<!-- Large -->
+		<div
+			v-if="plansByRam.large && largePrice"
+			class="flex flex-col gap-4 rounded-2xl bg-surface-2 border-2 border-solid border-transparent p-5 h-full"
+		>
+			<div>
+				<div class="text-3xl font-semibold text-contrast leading-none">
+					{{ formatMessage(messages.largeTitle) }}
+				</div>
+				<div class="mt-1">
+					<span class="text-2xl font-bold text-contrast">
+						{{ formatPrice(largePrice, currency, true) }}
+					</span>
+					<span class="text-sm">
+						/ month<template v-if="selectedInterval !== 'monthly'"
+							>, billed {{ selectedInterval }}</template
+						>
 					</span>
-					<span class="text-sm">{{ formatMessage(messages.customDesc) }}</span>
 				</div>
-				<div class="flex flex-col gap-2">
-					<div class="flex items-center gap-3">
-						<span v-if="customPricePerGb" class="text-sm text-secondary">
-							From {{ formatPrice(customPricePerGb, currency, true) }} / GB
-						</span>
-					</div>
+				<div class="mt-2 text-sm text-primary">
+					{{ formatMessage(messages.largeDesc) }}
 				</div>
 			</div>
+			<div class="w-full">
+				<ButtonStyled color="purple" class="w-full">
+					<button
+						class="w-full"
+						:disabled="existingPlan?.id === plansByRam.large.id"
+						@click="selectPlan(plansByRam.large!)"
+					>
+						{{
+							existingPlan?.id === plansByRam.large.id
+								? formatMessage(messages.yourCurrentPlan)
+								: formatMessage(messages.selectPlan)
+						}}
+					</button>
+				</ButtonStyled>
+			</div>
+			<ServersSpecs
+				v-if="largeSpecs"
+				:ram="largeSpecs.ram"
+				:storage="largeSpecs.storage"
+				:cpus="largeSpecs.cpus"
+			/>
+		</div>
+	</div>
+
+	<!-- Custom plan banner -->
+	<div
+		v-if="customStartingPrice"
+		class="mt-4 flex items-center justify-between gap-4 rounded-2xl bg-surface-2 border-2 border-solid border-transparent p-5"
+	>
+		<div class="flex flex-col gap-1">
+			<div class="text-2xl font-semibold text-contrast">
+				{{ formatMessage(messages.customHeading) }}
+			</div>
+			<div class="text-sm text-secondary">
+				{{ formatMessage(messages.customDesc) }}
+			</div>
+		</div>
+		<div class="flex flex-col items-end gap-2 shrink-0">
+			<ButtonStyled>
+				<button class="flex items-center gap-2" @click="selectCustom">
+					{{ formatMessage(messages.getStarted) }} <RightArrowIcon class="h-4 w-4" />
+				</button>
+			</ButtonStyled>
+			<div class="text-sm text-secondary whitespace-nowrap">
+				Starting at {{ formatPrice(customStartingPrice, currency, true) }}/mo
+			</div>
 		</div>
 	</div>
 </template>
diff --git a/packages/ui/src/components/billing/ServersPurchase1Region.vue b/packages/ui/src/components/billing/ServersPurchase1Region.vue
index f81b3602d1..3e72a22d40 100644
--- a/packages/ui/src/components/billing/ServersPurchase1Region.vue
+++ b/packages/ui/src/components/billing/ServersPurchase1Region.vue
@@ -30,7 +30,7 @@ const props = defineProps<{
 	availableProducts: Labrinth.Billing.Internal.Product[]
 }>()
 
-const loading = ref(true)
+const loading = ref(false)
 const checkingCustomStock = ref(false)
 const selectedPlan = defineModel<Labrinth.Billing.Internal.Product>('plan')
 const selectedRegion = defineModel<string>('region')
@@ -214,12 +214,11 @@ async function updateStock() {
 onMounted(() => {
 	// auto select region with lowest ping
 	loading.value = true
-	bestPing.value =
-		props.pings.length > 0
-			? props.pings.reduce((acc, cur) => {
-					return acc.ping < cur.ping ? acc : cur
-				})?.region
-			: undefined
+	bestPing.value = props.pings.sort((a, b) => {
+		if (a.ping <= 0) return 1
+		if (b.ping <= 0) return -1
+		return a.ping - b.ping
+	})[0]?.region
 	selectedRegion.value = undefined
 	selectedRam.value = minRam.value
 	checkingCustomStock.value = true
diff --git a/packages/ui/src/components/billing/ServersPurchase3Review.vue b/packages/ui/src/components/billing/ServersPurchase3Review.vue
index bcd83a5269..bfe6096c8d 100644
--- a/packages/ui/src/components/billing/ServersPurchase3Review.vue
+++ b/packages/ui/src/components/billing/ServersPurchase3Review.vue
@@ -179,7 +179,7 @@ function setInterval(newInterval: ServerBillingInterval) {
 
 <template>
 	<div class="grid sm:grid-cols-[3fr_2fr] gap-4">
-		<div class="bg-table-alternateRow p-4 rounded-2xl">
+		<div class="bg-surface-2 p-4 rounded-2xl">
 			<div class="flex items-center gap-2 mb-3">
 				<ModrinthServersIcon class="flex h-5 w-fit" />
 				<TagItem>{{ planName }}</TagItem>
@@ -194,9 +194,7 @@ function setInterval(newInterval: ServerBillingInterval) {
 				/>
 			</div>
 		</div>
-		<div
-			class="bg-table-alternateRow p-4 rounded-2xl flex flex-col gap-2 items-center justify-center"
-		>
+		<div class="bg-surface-2 p-4 rounded-2xl flex flex-col gap-2 items-center justify-center">
 			<img
 				v-if="flag"
 				class="aspect-[16/10] max-w-12 w-full object-cover rounded-md border-1 border-button-border border-solid"
@@ -304,10 +302,7 @@ function setInterval(newInterval: ServerBillingInterval) {
 				"
 			/>
 		</template>
-		<div
-			v-else
-			class="p-4 rounded-2xl bg-table-alternateRow text-sm text-secondary leading-relaxed"
-		>
+		<div v-else class="p-4 rounded-2xl bg-surface-2 text-sm text-secondary leading-relaxed">
 			No payment required. Your downgrade will apply at the end of the current billing period.
 		</div>
 	</div>
diff --git a/packages/ui/src/components/billing/index.ts b/packages/ui/src/components/billing/index.ts
index f2ef22353b..4475573997 100644
--- a/packages/ui/src/components/billing/index.ts
+++ b/packages/ui/src/components/billing/index.ts
@@ -1,5 +1,7 @@
 export { default as AddPaymentMethodModal } from './AddPaymentMethodModal.vue'
 export { default as ModrinthServersPurchaseModal } from './ModrinthServersPurchaseModal.vue'
 export { default as PurchaseModal } from './PurchaseModal.vue'
+export { default as ResubscribeModal } from './ResubscribeModal.vue'
+export { default as ServersGuestPlanModal } from './ServersGuestPlanModal.vue'
 export { default as ServersSpecs } from './ServersSpecs.vue'
 export { default as ServersUpgradeModalWrapper } from './ServersUpgradeModalWrapper.vue'
diff --git a/packages/ui/src/components/modal/TabbedModal.vue b/packages/ui/src/components/modal/TabbedModal.vue
index 2955e24792..eb2b63f038 100644
--- a/packages/ui/src/components/modal/TabbedModal.vue
+++ b/packages/ui/src/components/modal/TabbedModal.vue
@@ -1,6 +1,7 @@
 <script lang="ts"></script>
 
 <script setup lang="ts">
+import { RightArrowIcon } from '@modrinth/assets'
 import { type Component, computed, nextTick, ref } from 'vue'
 
 import { type MessageDescriptor, useVIntl } from '../../composables/i18n'
@@ -9,7 +10,8 @@ import NewModal from './NewModal.vue'
 export interface Tab {
 	name: MessageDescriptor
 	icon: Component
-	content: Component
+	content?: Component
+	href?: string
 	badge?: MessageDescriptor
 	shown?: boolean
 }
@@ -75,15 +77,19 @@ defineExpose({ show, hide, selectedTab, setTab })
 		<template v-if="$slots.title" #title>
 			<slot name="title" />
 		</template>
-		<div class="grid grid-cols-[auto_1fr] p-4">
+		<div class="grid grid-cols-[auto_1fr] p-6 pr-0">
 			<div
 				class="flex flex-col gap-1 border-solid pr-4 border-0 border-r-[1px] border-divider min-w-[200px]"
 			>
-				<button
+				<component
+					:is="tab.href ? 'a' : 'button'"
 					v-for="(tab, index) in visibleTabs"
 					:key="index"
-					:class="`flex gap-2 items-center text-left rounded-xl px-4 py-2 border-none text-nowrap font-semibold cursor-pointer active:scale-[0.97] transition-all ${selectedTab === index ? 'bg-button-bgSelected text-button-textSelected' : 'bg-transparent text-button-text hover:bg-button-bg hover:text-contrast'}`"
-					@click="() => setTab(index)"
+					:href="tab.href ?? undefined"
+					:target="tab.href ? '_blank' : undefined"
+					:rel="tab.href ? 'noopener noreferrer' : undefined"
+					:class="`flex gap-2 items-center text-left rounded-xl px-4 py-2 border-none text-nowrap font-semibold cursor-pointer active:scale-[0.97] transition-all no-underline ${!tab.href && selectedTab === index ? 'bg-button-bgSelected text-button-textSelected' : 'bg-transparent text-button-text hover:bg-button-bg hover:text-contrast'}`"
+					@click="!tab.href && setTab(index)"
 				>
 					<component :is="tab.icon" class="w-4 h-4 flex-shrink-0" />
 					<span>{{ formatMessage(tab.name) }}</span>
@@ -93,7 +99,8 @@ defineExpose({ show, hide, selectedTab, setTab })
 					>
 						{{ formatMessage(tab.badge) }}
 					</span>
-				</button>
+					<RightArrowIcon v-if="tab.href" class="size-4 ml-auto" />
+				</component>
 
 				<slot name="footer" />
 			</div>
@@ -101,38 +108,41 @@ defineExpose({ show, hide, selectedTab, setTab })
 				<Transition
 					enter-active-class="transition-all duration-200 ease-out"
 					enter-from-class="opacity-0 max-h-0"
-					enter-to-class="opacity-100 max-h-10"
+					enter-to-class="opacity-100 max-h-4"
 					leave-active-class="transition-all duration-200 ease-in"
-					leave-from-class="opacity-100 max-h-10"
+					leave-from-class="opacity-100 max-h-4"
 					leave-to-class="opacity-0 max-h-0"
 				>
 					<div
 						v-if="showTopFade"
-						class="pointer-events-none absolute left-0 right-0 top-0 z-10 h-10 bg-gradient-to-b from-bg-raised to-transparent"
+						class="pointer-events-none absolute left-0 right-0 top-0 z-10 h-4 bg-gradient-to-b from-bg-raised to-transparent"
 					/>
 				</Transition>
 
 				<div
 					ref="scrollContainer"
-					class="min-w-[400px] h-[500px] overflow-y-auto px-4"
+					class="min-w-[400px] h-[500px] overflow-y-auto px-6"
 					@scroll="checkScrollState"
 				>
 					<Suspense>
-						<component :is="visibleTabs[selectedTab].content" />
+						<component
+							:is="visibleTabs[selectedTab]?.content"
+							v-if="visibleTabs[selectedTab]?.content"
+						/>
 					</Suspense>
 				</div>
 
 				<Transition
 					enter-active-class="transition-all duration-200 ease-out"
 					enter-from-class="opacity-0 max-h-0"
-					enter-to-class="opacity-100 max-h-10"
+					enter-to-class="opacity-100 max-h-4"
 					leave-active-class="transition-all duration-200 ease-in"
-					leave-from-class="opacity-100 max-h-10"
+					leave-from-class="opacity-100 max-h-4"
 					leave-to-class="opacity-0 max-h-0"
 				>
 					<div
 						v-if="showBottomFade"
-						class="pointer-events-none absolute bottom-0 left-0 right-0 z-10 h-10 bg-gradient-to-t from-bg-raised to-transparent"
+						class="pointer-events-none absolute bottom-0 left-0 right-0 z-10 h-4 bg-gradient-to-t from-bg-raised to-transparent"
 					/>
 				</Transition>
 			</div>
diff --git a/packages/ui/src/components/servers/SaveBanner.vue b/packages/ui/src/components/servers/SaveBanner.vue
new file mode 100644
index 0000000000..9145ac56d5
--- /dev/null
+++ b/packages/ui/src/components/servers/SaveBanner.vue
@@ -0,0 +1,95 @@
+<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>
+			</div>
+		</Transition>
+	</Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { injectModrinthClient, injectModrinthServerContext } from '#ui/providers'
+
+const props = defineProps<{
+	isUpdating: boolean
+	restart?: boolean
+	save: () => void
+	reset: () => void
+	isVisible: boolean
+	serverId: string
+}>()
+
+const client = injectModrinthClient()
+
+const { powerState } = injectModrinthServerContext()
+
+const isStopped = computed(() => powerState.value === 'stopped' || powerState.value === 'crashed')
+
+const isTransitioning = computed(
+	() => powerState.value === 'starting' || powerState.value === 'stopping',
+)
+
+const powerButtonLabel = computed(() => {
+	if (props.isUpdating) return 'Saving...'
+	if (isTransitioning.value) return isStopped.value ? 'Save & start' : 'Save & restart'
+	return isStopped.value ? 'Save & start' : 'Save & restart'
+})
+
+const saveAndPower = async () => {
+	props.save()
+	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 fe8dd4f4be..c52e8af693 100644
--- a/packages/ui/src/components/servers/ServerListing.vue
+++ b/packages/ui/src/components/servers/ServerListing.vue
@@ -1,108 +1,223 @@
 <template>
 	<div>
-		<NuxtLink :to="status === 'suspended' ? '' : `/hosting/manage/${props.server_id}`">
+		<RouterLink :to="isDisabled ? '' : `/hosting/manage/${server_id}`">
 			<div
-				class="flex flex-row items-center overflow-x-hidden rounded-2xl border-[1px] border-solid border-button-bg bg-bg-raised p-4 transition-transform duration-100"
+				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="{
-					'!rounded-b-none border-b-0': status === 'suspended' || !!pendingChange,
-					'opacity-75': status === 'suspended',
-					'active:scale-95': status !== 'suspended' && !pendingChange,
+					'!rounded-b-none border-b-0': hasNotice,
+					'bg-surface-2': isDisabled,
+					'active:scale-95': !isDisabled && !hasNotice,
+					'hover:brightness-125': !isDisabled,
 				}"
 				data-pyro-server-listing
 				:data-pyro-server-listing-id="server_id"
 			>
-				<ServerIcon v-if="status !== 'suspended'" :image="image" />
 				<div
-					v-else
-					class="bg-bg-secondary flex size-16 items-center justify-center rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
+					v-if="hasIconOverlay"
+					class="flex size-16 items-center justify-center rounded-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
 				>
-					<LockIcon class="size-12 text-secondary" />
+					<ServerIcon :image="image ?? undefined" :disabled="isDisabled" />
+					<SpinnerIcon
+						v-if="isProvisioning || isUpgrading"
+						class="size-8 animate-spin absolute text-contrast"
+						:class="{ 'opacity-50': isDisabled }"
+					/>
+					<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="flex flex-row items-center gap-2">
-						<h2 class="m-0 text-xl font-bold text-contrast">{{ name }}</h2>
-						<ChevronRightIcon />
+						<h2 class="m-0 text-xl font-bold text-contrast" :class="{ 'opacity-50': isDisabled }">
+							{{ name }}
+						</h2>
+						<div
+							v-if="isConfiguring"
+							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" />
+							{{ formatMessage(messages.newLabel) }}
+						</div>
 					</div>
 
 					<div
 						v-if="projectData?.title"
-						class="m-0 flex flex-row items-center gap-2 text-sm font-medium text-secondary"
+						class="m-0 flex flex-row items-center gap-2 text-sm font-medium"
+						:class="{ 'opacity-50': isDisabled }"
 					>
 						<Avatar
 							:src="iconUrl"
 							no-shadow
 							style="min-height: 20px; min-width: 20px; height: 20px; width: 20px"
-							alt="Server Icon"
+							:alt="formatMessage(messages.serverIconAlt)"
 						/>
-						Using {{ projectData?.title || 'Unknown' }}
+						{{ formatMessage(messages.usingProjectLabel, { projectTitle: projectData?.title }) }}
 					</div>
 
-					<div
-						v-if="isConfiguring"
-						class="flex min-w-0 items-center gap-2 truncate text-sm font-semibold text-brand"
-					>
-						<SparklesIcon class="size-5 shrink-0" /> New server
-					</div>
 					<ServerInfoLabels
-						v-else
-						:server-data="{ game, mc_version, loader, loader_version, net }"
+						:server-data="
+							isConfiguring
+								? { net }
+								: {
+										game,
+										mc_version,
+										loader,
+										loader_version,
+										net,
+										online,
+										players: playerCount
+											? { current: playerCount.current, max: playerCount.max }
+											: undefined,
+									}
+						"
 						:show-game-label="showGameLabel"
 						:show-loader-label="showLoaderLabel"
+						: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-secondary *:hidden sm:flex-row sm:*:flex"
+						class="pointer-events-none flex w-full flex-row flex-wrap items-center gap-2 text-primary *:hidden sm:flex-row sm:*:flex"
 					/>
 				</div>
 			</div>
-		</NuxtLink>
-		<div
-			v-if="status === 'suspended' && suspension_reason === 'upgrading'"
-			class="relative flex w-full flex-row items-center gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-bg-blue bg-bg-blue p-4 text-sm font-bold text-contrast"
-		>
-			<LoaderCircleIcon class="size-5 animate-spin" />
-			Your server's hardware is currently being upgraded and will be back online shortly.
-		</div>
-		<div
-			v-else-if="status === 'suspended' && suspension_reason === 'cancelled'"
-			class="relative flex w-full flex-col gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-bg-red bg-bg-red p-4 text-sm font-bold text-contrast"
-		>
-			<div class="flex flex-row gap-2">
-				<TriangleAlertIcon class="!size-5" /> Your server has been cancelled. Please update your
-				billing information or contact Modrinth Support for more information.
+		</RouterLink>
+
+		<div v-if="noticeType" class="server-listing-notice">
+			<div v-if="noticeType === 'provisioning'" class="flex gap-2">
+				{{ formatMessage(messages.provisioningNotice) }}
 			</div>
-			<CopyCode :text="`${props.server_id}`" class="ml-auto" />
-		</div>
-		<div
-			v-else-if="status === 'suspended' && suspension_reason"
-			class="relative flex w-full flex-col gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-bg-red bg-bg-red p-4 text-sm font-bold text-contrast"
-		>
-			<div class="flex flex-row gap-2">
-				<TriangleAlertIcon class="!size-5" /> Your server has been suspended:
-				{{ suspension_reason }}. Please update your billing information or contact Modrinth Support
-				for more information.
+			<div v-else-if="noticeType === 'upgrading'" class="flex gap-2">
+				{{ formatMessage(messages.upgradingNotice) }}
 			</div>
-			<CopyCode :text="`${props.server_id}`" class="ml-auto" />
-		</div>
-		<div
-			v-else-if="status === 'suspended'"
-			class="relative flex w-full flex-col gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-bg-red bg-bg-red p-4 text-sm font-bold text-contrast"
-		>
-			<div class="flex flex-row gap-2">
-				<TriangleAlertIcon class="!size-5" /> Your server has been suspended. Please update your
-				billing information or contact Modrinth Support for more information.
+			<div v-else-if="noticeType === 'cancelled' || noticeType === 'paymentfailed'">
+				<IntlFormatted
+					v-if="noticeType === 'paymentfailed' && cancellationDate"
+					:message-id="messages.subscriptionCancelledPaymentFailedOnDate"
+					:values="{ formattedDate: formatDate(cancellationDate) }"
+				>
+					<template #date="{ children }">
+						<span class="font-medium text-contrast"><component :is="() => children" /></span>
+					</template>
+				</IntlFormatted>
+
+				<span v-else-if="noticeType === 'paymentfailed'">
+					{{ formatMessage(messages.subscriptionCancelledPaymentFailed) }}
+				</span>
+
+				<IntlFormatted
+					v-else-if="cancellationDate"
+					:message-id="messages.subscriptionCancelledOnDate"
+					:values="{ formattedDate: formatDate(cancellationDate) }"
+				>
+					<template #date="{ children }">
+						<span class="font-medium text-contrast"><component :is="() => children" /></span>
+					</template>
+				</IntlFormatted>
+
+				<span v-else>
+					{{ formatMessage(messages.subscriptionCancelled) }}
+				</span>
+
+				{{ ' ' }}
+				<IntlFormatted
+					v-if="!isFilesExpired"
+					:message-id="messages.filesKeptForDownload"
+					:values="{ daysRemaining: filesRemainingDays }"
+				>
+					<template #days-remaining="{ children }">
+						<span class="font-medium text-red">
+							<component :is="() => children" />
+						</span>
+					</template>
+				</IntlFormatted>
+			</div>
+
+			<div v-else-if="noticeType === 'setToCancel'">
+				<IntlFormatted
+					v-if="cancellationDate"
+					:message-id="messages.subscriptionSetToCancelOnDate"
+					:values="{ formattedDate: formatDate(cancellationDate) }"
+				>
+					<template #date="{ children }">
+						<span class="font-medium text-contrast">
+							<component :is="() => children" />
+						</span>
+					</template>
+				</IntlFormatted>
+
+				<span v-else>{{ formatMessage(messages.subscriptionSetToCancel) }}</span>
+
+				<template v-if="!isFilesExpired">
+					{{ ' ' }}
+					{{ formatMessage(messages.filesPreservedAfterCancellation) }}
+				</template>
+			</div>
+			<div v-else-if="noticeType === 'moderated'">
+				{{ formatMessage(messages.moderatedNotice) }}
+			</div>
+			<div v-else>
+				{{ formatMessage(messages.suspendedNotice) }}
+			</div>
+
+			<div v-if="noticeButtons" class="flex gap-2">
+				<ButtonStyled
+					v-if="noticeButtons.downloadBackup && onDownloadBackup"
+					type="outlined"
+					circular
+				>
+					<button
+						v-tooltip="formatMessage(messages.downloadLatestBackupTooltip)"
+						class="!border-surface-5"
+						@click="onDownloadBackup"
+					>
+						<DownloadIcon />
+					</button>
+				</ButtonStyled>
+				<ButtonStyled v-if="noticeButtons.copyId" type="outlined">
+					<button
+						v-tooltip="formatMessage(messages.copyCodeToClipboardTooltip)"
+						class="!border-surface-5"
+						@click="copyToClipboard(server_id)"
+					>
+						<template v-if="copied">
+							{{ formatMessage(messages.copiedLabel) }} <CheckIcon class="text-green" />
+						</template>
+						<template v-else> {{ formatMessage(messages.copyIdLabel) }} <CopyIcon /> </template>
+					</button>
+				</ButtonStyled>
+				<ButtonStyled v-if="noticeButtons.support">
+					<a href="https://support.modrinth.com/en/" target="_blank"
+						><MessagesSquareIcon /> {{ formatMessage(messages.supportLabel) }}
+					</a>
+				</ButtonStyled>
+				<ButtonStyled v-if="noticeButtons.manageBilling" color="brand">
+					<AutoLink :to="`/settings/billing#server-${server_id}`">
+						<CardIcon /> {{ formatMessage(messages.manageBillingLabel) }}
+					</AutoLink>
+				</ButtonStyled>
+				<ButtonStyled v-if="noticeButtons.resubscribe && onResubscribe" color="brand">
+					<button @click="onResubscribe">
+						<RotateCounterClockwiseIcon /> {{ formatMessage(messages.resubscribeLabel) }}
+					</button>
+				</ButtonStyled>
 			</div>
-			<CopyCode :text="`${props.server_id}`" class="ml-auto" />
 		</div>
-		<div
-			v-if="pendingChange && status !== 'suspended'"
-			class="relative flex w-full flex-col gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-orange bg-bg-orange p-4 text-sm font-bold text-contrast"
-		>
+
+		<div v-if="pendingChange && status !== 'suspended'" class="server-listing-notice">
 			<div>
-				Your server will {{ pendingChange.verb.toLowerCase() }} to the "{{
-					pendingChange.planSize
-				}}" plan on {{ formatDate(pendingChange.date) }}.
+				<IntlFormatted
+					:message-id="messages.pendingChangeNotice"
+					:values="{
+						verb: pendingChange.verb.toLowerCase(),
+						planSize: pendingChange.planSize,
+						formattedDate: formatDate(pendingChange.date),
+					}"
+				>
+					<template #date="{ children }">
+						<span class="font-medium text-contrast"><component :is="() => children" /></span>
+					</template>
+				</IntlFormatted>
 			</div>
 			<ServersSpecs
-				class="!font-normal !text-contrast"
+				class="!font-normal !text-primary"
 				:ram="Math.round((pendingChange.ramGb ?? 0) * 1024)"
 				:storage="Math.round((pendingChange.storageGb ?? 0) * 1024)"
 				:cpus="pendingChange.cpuBurst"
@@ -115,24 +230,133 @@
 <script setup lang="ts">
 import type { Archon } from '@modrinth/api-client'
 import {
-	ChevronRightIcon,
-	LoaderCircleIcon,
+	DownloadIcon,
 	LockIcon,
+	MessagesSquareIcon,
 	SparklesIcon,
-	TriangleAlertIcon,
+	SpinnerIcon,
 } from '@modrinth/assets'
+import { AutoLink, ButtonStyled } from '@modrinth/ui'
 import { useQuery } from '@tanstack/vue-query'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 
+import {
+	CardIcon,
+	CheckIcon,
+	CopyIcon,
+	RotateCounterClockwiseIcon,
+} from '../../../../assets/generated-icons'
 import { useFormatDateTime } from '../../composables'
+import { defineMessages, useVIntl } from '../../composables/i18n'
 import { injectModrinthClient } from '../../providers/api-client'
 import Avatar from '../base/Avatar.vue'
-import CopyCode from '../base/CopyCode.vue'
+import IntlFormatted from '../base/IntlFormatted.vue'
 import ServersSpecs from '../billing/ServersSpecs.vue'
 import ServerIcon from './icons/ServerIcon.vue'
 import ServerInfoLabels from './labels/ServerInfoLabels.vue'
 
 const formatDate = useFormatDateTime({ dateStyle: 'long' })
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	newLabel: {
+		id: 'servers.listing.new-label',
+		defaultMessage: 'New',
+	},
+	serverIconAlt: {
+		id: 'servers.listing.server-icon-alt',
+		defaultMessage: 'Server icon',
+	},
+	usingProjectLabel: {
+		id: 'servers.listing.using-project-label',
+		defaultMessage: 'Using {projectTitle}',
+	},
+	provisioningNotice: {
+		id: 'servers.listing.notice.provisioning',
+		defaultMessage: 'Please wait while we set up your server. This can take up to 10 minutes.',
+	},
+	upgradingNotice: {
+		id: 'servers.listing.notice.upgrading',
+		defaultMessage:
+			"Your server's hardware is currently being upgraded and will be back online shortly.",
+	},
+	subscriptionCancelled: {
+		id: 'servers.listing.notice.subscription-cancelled',
+		defaultMessage: 'Your subscription was cancelled.',
+	},
+	subscriptionCancelledOnDate: {
+		id: 'servers.listing.notice.subscription-cancelled-on-date',
+		defaultMessage: 'Your subscription was cancelled on <date>{formattedDate}</date>. ',
+	},
+	subscriptionCancelledPaymentFailed: {
+		id: 'servers.listing.notice.subscription-cancelled-payment-failed',
+		defaultMessage: 'Your subscription was cancelled due to payment failure.',
+	},
+	subscriptionCancelledPaymentFailedOnDate: {
+		id: 'servers.listing.notice.subscription-cancelled-payment-failed-on-date',
+		defaultMessage:
+			'Your subscription was cancelled on <date>{formattedDate}</date> due to payment failure. ',
+	},
+	filesKeptForDownload: {
+		id: 'servers.listing.notice.files-kept-for-download',
+		defaultMessage:
+			'Your files will be kept for <days-remaining>{daysRemaining} more {daysRemaining, plural, one {day} other {days} }</days-remaining> and can be downloaded below before they are deleted. ',
+	},
+	subscriptionSetToCancel: {
+		id: 'servers.listing.notice.subscription-set-to-cancel',
+		defaultMessage: 'Your subscription is set to cancel.',
+	},
+	subscriptionSetToCancelOnDate: {
+		id: 'servers.listing.notice.subscription-set-to-cancel-on-date',
+		defaultMessage: 'Your subscription is set to cancel on <date>{formattedDate}</date>. ',
+	},
+	filesPreservedAfterCancellation: {
+		id: 'servers.listing.notice.files-preserved-after-cancellation',
+		defaultMessage: 'Your files will be preserved for 30 days after cancellation.',
+	},
+	moderatedNotice: {
+		id: 'servers.listing.notice.moderated',
+		defaultMessage: 'Your server has been suspended by moderation action. ',
+	},
+	suspendedNotice: {
+		id: 'servers.listing.notice.suspended',
+		defaultMessage:
+			'Your server has been suspended. Please contact Modrinth Support for more information.',
+	},
+	downloadLatestBackupTooltip: {
+		id: 'servers.listing.download-latest-backup-tooltip',
+		defaultMessage: 'Download latest backup',
+	},
+	copyCodeToClipboardTooltip: {
+		id: 'servers.listing.copy-code-tooltip',
+		defaultMessage: 'Copy code to clipboard',
+	},
+	copiedLabel: {
+		id: 'servers.listing.copied-label',
+		defaultMessage: 'Copied',
+	},
+	copyIdLabel: {
+		id: 'servers.listing.copy-id-label',
+		defaultMessage: 'Copy ID',
+	},
+	supportLabel: {
+		id: 'servers.listing.support-label',
+		defaultMessage: 'Support',
+	},
+	manageBillingLabel: {
+		id: 'servers.listing.manage-billing-label',
+		defaultMessage: 'Manage billing',
+	},
+	resubscribeLabel: {
+		id: 'servers.listing.resubscribe-label',
+		defaultMessage: 'Resubscribe',
+	},
+	pendingChangeNotice: {
+		id: 'servers.listing.notice.pending-change',
+		defaultMessage:
+			'Your server will {verb} to the {planSize} Plan on <date>{formattedDate}</date>. ',
+	},
+})
 
 export type PendingChange = {
 	planSize: string
@@ -159,14 +383,97 @@ type ServerListingProps = {
 	upstream?: Archon.Servers.v0.Upstream | null
 	flows?: Archon.Servers.v0.Flows
 	pendingChange?: PendingChange
+	online?: boolean
+	playerCount?: {
+		current?: number
+		max?: number
+	}
+	isProvisioning?: boolean
+	cancellationDate?: string | Date | null
+	onResubscribe?: (() => void) | null
+	onDownloadBackup?: (() => void) | null
 }
 
 const props = defineProps<ServerListingProps>()
 
-const { archon, kyros, labrinth } = injectModrinthClient()
+const { kyros, labrinth } = injectModrinthClient()
 
-const showGameLabel = computed(() => !!props.game)
-const showLoaderLabel = computed(() => !!props.loader)
+const isConfiguring = computed(() => props.flows?.intro)
+const isUpgrading = computed(
+	() => props.status === 'suspended' && props.suspension_reason === 'upgrading',
+)
+const isDisabled = computed(() => props.status === 'suspended' || props.isProvisioning)
+const isSetToCancel = computed(() => !!props.cancellationDate && props.status !== 'suspended')
+const filesRemainingDays = computed(() => {
+	if (!props.cancellationDate) return 0
+	const cancellation = new Date(props.cancellationDate)
+	const expiresAt = new Date(cancellation.getTime() + 30 * 24 * 60 * 60 * 1000) // expires 30 days after cancellation
+	const remaining = Math.ceil((expiresAt.getTime() - Date.now()) / (24 * 60 * 60 * 1000))
+	return Math.max(0, remaining)
+})
+const isFilesExpired = computed(() => filesRemainingDays.value <= 0)
+
+const hasIconOverlay = computed(
+	() => props.isProvisioning || isUpgrading.value || props.status === 'suspended',
+)
+
+type NoticeType =
+	| 'provisioning'
+	| 'upgrading'
+	| 'cancelled'
+	| 'paymentfailed'
+	| 'moderated'
+	| 'suspended'
+	| 'setToCancel'
+
+const noticeType = computed<NoticeType | null>(() => {
+	if (props.isProvisioning) return 'provisioning'
+	if (props.status === 'suspended') {
+		switch (props.suspension_reason) {
+			case 'upgrading':
+				return 'upgrading'
+			case 'cancelled':
+				return 'cancelled'
+			case 'paymentfailed':
+				return 'paymentfailed'
+			case 'moderated':
+				return 'moderated'
+			default:
+				return 'suspended'
+		}
+	}
+	if (isSetToCancel.value) return 'setToCancel'
+	return null
+})
+
+type NoticeButtons = {
+	downloadBackup?: boolean
+	copyId?: boolean
+	support?: boolean
+	manageBilling?: boolean
+	resubscribe?: boolean
+}
+
+const noticeButtons = computed<NoticeButtons | null>(() => {
+	switch (noticeType.value) {
+		case 'cancelled':
+		case 'setToCancel':
+			return { downloadBackup: true, copyId: true, support: true, resubscribe: true }
+		case 'paymentfailed':
+			return { downloadBackup: true, copyId: true, support: true, manageBilling: true }
+		case 'moderated':
+		case 'suspended':
+			return { downloadBackup: true, copyId: true, support: true }
+		default:
+			return null
+	}
+})
+
+const hasNotice = computed(() => !!noticeType.value || !!props.pendingChange)
+
+const showGameLabel = computed(() => !!props.game && !isConfiguring.value)
+const showLoaderLabel = computed(() => !!props.loader && !isConfiguring.value)
+const showPlayerCount = computed(() => !!props.playerCount && !isConfiguring.value)
 
 const { data: projectData } = useQuery({
 	queryKey: ['project', props.upstream?.project_id] as const,
@@ -207,14 +514,8 @@ const { data: image } = useQuery({
 		if (!props.server_id || props.status !== 'available') return null
 
 		try {
-			const auth = await archon.servers_v0.getFilesystemAuth(props.server_id)
-
 			try {
-				const blob = await kyros.files_v0.downloadFile(
-					auth.url,
-					auth.token,
-					'/server-icon-original.png',
-				)
+				const blob = await kyros.files_v0.downloadFile('/server-icon-original.png')
 
 				return await processImageBlob(blob, 512)
 			} catch {
@@ -227,17 +528,12 @@ const { data: image } = useQuery({
 					const scaledBlob = await dataURLToBlob(scaledDataUrl)
 					const scaledFile = new File([scaledBlob], 'server-icon.png', { type: 'image/png' })
 
-					await kyros.files_v0.uploadFile(auth.url, auth.token, '/server-icon.png', scaledFile)
+					kyros.files_v0.uploadFile('/server-icon.png', scaledFile)
 
 					const originalFile = new File([blob], 'server-icon-original.png', {
 						type: 'image/png',
 					})
-					await kyros.files_v0.uploadFile(
-						auth.url,
-						auth.token,
-						'/server-icon-original.png',
-						originalFile,
-					)
+					kyros.files_v0.uploadFile('/server-icon-original.png', originalFile)
 
 					return scaledDataUrl
 				}
@@ -252,5 +548,19 @@ const { data: image } = useQuery({
 	enabled: computed(() => !!props.server_id && props.status === 'available'),
 })
 
-const isConfiguring = computed(() => props.flows?.intro)
+const copied = ref(false)
+
+async function copyToClipboard(text: string) {
+	await navigator.clipboard.writeText(text)
+	copied.value = true
+	setTimeout(() => {
+		copied.value = false
+	}, 3000)
+}
 </script>
+
+<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;
+}
+</style>
diff --git a/packages/ui/src/components/servers/icons/ServerIcon.vue b/packages/ui/src/components/servers/icons/ServerIcon.vue
index 58d7cb3a03..ec0fe3cf1f 100644
--- a/packages/ui/src/components/servers/icons/ServerIcon.vue
+++ b/packages/ui/src/components/servers/icons/ServerIcon.vue
@@ -1,8 +1,8 @@
 <template>
 	<div
-		class="experimental-styles-within 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-xl border-[1px] border-solid border-button-border bg-button-bg shadow-sm"
 	>
-		<client-only>
+		<template v-if="hasMounted">
 			<img
 				v-if="image"
 				class="h-full w-full select-none object-fill"
@@ -15,14 +15,29 @@
 				alt="Server Icon"
 				:src="MinecraftServerIcon"
 			/>
-		</client-only>
+		</template>
+		<img
+			v-else
+			class="h-full w-full select-none object-fill"
+			alt="Server Icon"
+			:src="MinecraftServerIcon"
+		/>
+		<div v-if="disabled" class="absolute inset-0 bg-surface-1 opacity-50" />
 	</div>
 </template>
 
 <script setup lang="ts">
 import { MinecraftServerIcon } from '@modrinth/assets'
+import { onMounted, ref } from 'vue'
+
+const hasMounted = ref(false)
+
+onMounted(() => {
+	hasMounted.value = true
+})
 
 defineProps<{
 	image: string | undefined
+	disabled?: boolean
 }>()
 </script>
diff --git a/packages/ui/src/components/servers/index.ts b/packages/ui/src/components/servers/index.ts
index 1c434c9e6d..14f0c74d1e 100644
--- a/packages/ui/src/components/servers/index.ts
+++ b/packages/ui/src/components/servers/index.ts
@@ -4,7 +4,8 @@ export * from './icons'
 export { default as InstallingBanner } from './InstallingBanner.vue'
 export * from './labels'
 export * from './marketing'
-export type { PendingChange } from './ServerListing.vue'
-export { default as ServerListing } from './ServerListing.vue'
+export { default as SaveBanner } from './SaveBanner.vue'
+export { default as ServerListEmpty } from './server-list-empty/ServerListEmpty.vue'
+export { type PendingChange,default as ServerListing } from './ServerListing.vue'
 export { default as ServerSetupModal } from './ServerSetupModal.vue'
 export { default as ServersPromo } from './ServersPromo.vue'
diff --git a/packages/ui/src/components/servers/labels/Separator.vue b/packages/ui/src/components/servers/labels/Separator.vue
new file mode 100644
index 0000000000..f434629a32
--- /dev/null
+++ b/packages/ui/src/components/servers/labels/Separator.vue
@@ -0,0 +1,3 @@
+<template>
+	<div class="experimental-styles-within h-1.5 w-1.5 bg-button-border rounded-full"></div>
+</template>
diff --git a/packages/ui/src/components/servers/labels/ServerGameLabel.vue b/packages/ui/src/components/servers/labels/ServerGameLabel.vue
index 6bbbbdec5f..5f64f66381 100644
--- a/packages/ui/src/components/servers/labels/ServerGameLabel.vue
+++ b/packages/ui/src/components/servers/labels/ServerGameLabel.vue
@@ -2,9 +2,11 @@
 	<div
 		v-if="game"
 		v-tooltip="'Change server version'"
-		class="min-w-0 flex-none flex-row items-center gap-2 first:!flex"
+		class="min-w-0 flex-none flex-row items-center gap-1.5 first:!flex"
 	>
-		<GameIcon aria-hidden="true" class="size-5 shrink-0" />
+		<Separator v-if="!noSeparator" />
+
+		<GameIcon aria-hidden="true" />
 		<AutoLink
 			v-if="isLink"
 			:to="serverId ? `/hosting/manage/${serverId}/options/loader` : ''"
@@ -30,11 +32,13 @@ import { GameIcon } from '@modrinth/assets'
 import { useRoute } from 'vue-router'
 
 import AutoLink from '../../base/AutoLink.vue'
+import Separator from './Separator.vue'
 
 defineProps<{
 	game: string
 	mcVersion: string
 	isLink?: boolean
+	noSeparator?: boolean
 }>()
 
 const route = useRoute()
diff --git a/packages/ui/src/components/servers/labels/ServerInfoLabels.vue b/packages/ui/src/components/servers/labels/ServerInfoLabels.vue
index aaf5e00132..9b1e6638e2 100644
--- a/packages/ui/src/components/servers/labels/ServerInfoLabels.vue
+++ b/packages/ui/src/components/servers/labels/ServerInfoLabels.vue
@@ -1,21 +1,29 @@
 <template>
 	<div>
+		<ServerPlayerCount
+			v-if="showPlayerCount"
+			:current-players="serverData.players.current"
+			:max-players="serverData.players.max"
+			:online="serverData.online"
+		/>
 		<ServerGameLabel
 			v-if="showGameLabel"
 			:game="serverData.game"
 			:mc-version="serverData.mc_version ?? ''"
+			:no-separator="column || !showPlayerCount"
 			:is-link="linked"
 		/>
 		<ServerLoaderLabel
+			v-if="showLoaderLabel"
 			:loader="serverData.loader"
 			:loader-version="serverData.loader_version ?? ''"
-			:no-separator="column"
+			:no-separator="column || !showGameLabel"
 			:is-link="linked"
 		/>
 		<ServerSubdomainLabel
 			v-if="serverData.net?.domain"
 			:subdomain="serverData.net.domain"
-			:no-separator="column"
+			:no-separator="column || (!showLoaderLabel && !showGameLabel)"
 			:is-link="linked"
 		/>
 		<ServerUptimeLabel
@@ -29,6 +37,7 @@
 <script setup lang="ts">
 import ServerGameLabel from './ServerGameLabel.vue'
 import ServerLoaderLabel from './ServerLoaderLabel.vue'
+import ServerPlayerCount from './ServerPlayerCount.vue'
 import ServerSubdomainLabel from './ServerSubdomainLabel.vue'
 import ServerUptimeLabel from './ServerUptimeLabel.vue'
 
@@ -37,6 +46,7 @@ interface ServerInfoLabelsProps {
 	serverData: Record<string, any>
 	showGameLabel: boolean
 	showLoaderLabel: boolean
+	showPlayerCount?: boolean
 	uptimeSeconds?: number
 	column?: boolean
 	linked?: boolean
diff --git a/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue b/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue
index c5136acd8e..e4d45d633f 100644
--- a/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue
+++ b/packages/ui/src/components/servers/labels/ServerLoaderLabel.vue
@@ -1,8 +1,8 @@
 <template>
 	<div v-tooltip="'Change server loader'" class="flex min-w-0 flex-row items-center gap-2 truncate">
-		<div v-if="!noSeparator" class="w-1.5 h-1.5 rounded-full bg-surface-5"></div>
-		<div class="flex flex-row items-center gap-2">
-			<LoaderIcon v-if="loader" :loader="loader" class="flex shrink-0 [&&]:size-5" />
+		<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"
@@ -38,6 +38,7 @@ import { useRoute } from 'vue-router'
 
 import AutoLink from '../../base/AutoLink.vue'
 import LoaderIcon from '../icons/LoaderIcon.vue'
+import Separator from './Separator.vue'
 
 defineProps<{
 	noSeparator?: boolean
diff --git a/packages/ui/src/components/servers/labels/ServerPlayerCount.vue b/packages/ui/src/components/servers/labels/ServerPlayerCount.vue
new file mode 100644
index 0000000000..6511429091
--- /dev/null
+++ b/packages/ui/src/components/servers/labels/ServerPlayerCount.vue
@@ -0,0 +1,17 @@
+<template>
+	<div class="flex gap-1">
+		<!-- indicator icon -->
+
+		{{ currentPlayers }} / {{ maxPlayers }} Players
+	</div>
+</template>
+
+<script setup lang="ts">
+interface ServerPlayerCountProps {
+	currentPlayers: number
+	maxPlayers: number
+	online: boolean
+}
+
+defineProps<ServerPlayerCountProps>()
+</script>
diff --git a/packages/ui/src/components/servers/labels/ServerSubdomainLabel.vue b/packages/ui/src/components/servers/labels/ServerSubdomainLabel.vue
index 61afa973ba..5105cf855a 100644
--- a/packages/ui/src/components/servers/labels/ServerSubdomainLabel.vue
+++ b/packages/ui/src/components/servers/labels/ServerSubdomainLabel.vue
@@ -4,9 +4,10 @@
 		v-tooltip="'Copy custom URL'"
 		class="flex min-w-0 flex-row items-center gap-2 truncate hover:cursor-pointer"
 	>
-		<div v-if="!noSeparator" class="w-1.5 h-1.5 rounded-full bg-surface-5"></div>
-		<div class="flex flex-row items-center gap-2">
-			<LinkIcon class="flex size-5 shrink-0" />
+		<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="serverId ? 'hover:underline' : ''"
@@ -25,6 +26,8 @@ import { useStorage } from '@vueuse/core'
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 
+import Separator from './Separator.vue'
+
 const { addNotification } = injectNotificationManager()
 
 const props = defineProps<{
diff --git a/packages/ui/src/components/servers/labels/ServerUptimeLabel.vue b/packages/ui/src/components/servers/labels/ServerUptimeLabel.vue
index d3a660b02e..6c49678588 100644
--- a/packages/ui/src/components/servers/labels/ServerUptimeLabel.vue
+++ b/packages/ui/src/components/servers/labels/ServerUptimeLabel.vue
@@ -5,10 +5,10 @@
 		class="server-action-buttons-anim flex min-w-0 flex-row items-center gap-2"
 		data-pyro-uptime
 	>
-		<div v-if="!noSeparator" class="w-1.5 h-1.5 rounded-full bg-surface-5"></div>
+		<Separator v-if="!noSeparator" />
 
-		<div class="flex gap-2">
-			<TimerIcon class="flex size-5 shrink-0" />
+		<div class="flex gap-1.5">
+			<TimerIcon />
 			<time class="truncate text-sm font-semibold" :aria-label="verboseUptime">
 				{{ formattedUptime }}
 			</time>
@@ -20,6 +20,8 @@
 import { TimerIcon } from '@modrinth/assets'
 import { computed } from 'vue'
 
+import Separator from './Separator.vue'
+
 const props = defineProps<{
 	uptimeSeconds: number
 	noSeparator?: boolean
diff --git a/packages/ui/src/components/servers/marketing/MedalServerListing.vue b/packages/ui/src/components/servers/marketing/MedalServerListing.vue
index dbcbea4f23..b30c8195ba 100644
--- a/packages/ui/src/components/servers/marketing/MedalServerListing.vue
+++ b/packages/ui/src/components/servers/marketing/MedalServerListing.vue
@@ -31,22 +31,28 @@
 						<ChevronRightIcon />
 
 						<span class="truncate">
-							<span class="text-medal-orange">
-								{{ timeLeftCountdown.days }}
-							</span>
-							days
-							<span class="text-medal-orange">
-								{{ timeLeftCountdown.hours }}
-							</span>
-							hours
-							<span class="text-medal-orange">
-								{{ timeLeftCountdown.minutes }}
-							</span>
-							minutes
-							<span class="text-medal-orange">
-								{{ timeLeftCountdown.seconds }}
-							</span>
-							seconds remaining...
+							<IntlFormatted
+								:message-id="messages.countdownRemaining"
+								:values="{
+									days: timeLeftCountdown.days,
+									hours: timeLeftCountdown.hours,
+									minutes: timeLeftCountdown.minutes,
+									seconds: timeLeftCountdown.seconds,
+								}"
+							>
+								<template #days-count="{ children }">
+									<span class="text-medal-orange"><component :is="() => children" /></span>
+								</template>
+								<template #hours-count="{ children }">
+									<span class="text-medal-orange"><component :is="() => children" /></span>
+								</template>
+								<template #minutes-count="{ children }">
+									<span class="text-medal-orange"><component :is="() => children" /></span>
+								</template>
+								<template #seconds-count="{ children }">
+									<span class="text-medal-orange"><component :is="() => children" /></span>
+								</template>
+							</IntlFormatted>
 						</span>
 					</div>
 
@@ -58,16 +64,16 @@
 							:src="iconUrl"
 							no-shadow
 							style="min-height: 20px; min-width: 20px; height: 20px; width: 20px"
-							alt="Server Icon"
+							:alt="formatMessage(messages.serverIconAlt)"
 						/>
-						Using {{ projectData?.title || 'Unknown' }}
+						{{ formatMessage(messages.usingProjectLabel, { projectTitle: projectData?.title }) }}
 					</div>
 
 					<div
 						v-if="isConfiguring"
 						class="text-medal-orange flex min-w-0 items-center gap-2 truncate text-sm font-semibold"
 					>
-						<SparklesIcon class="size-5 shrink-0" /> New server
+						<SparklesIcon class="size-5 shrink-0" /> {{ formatMessage(messages.newServerLabel) }}
 					</div>
 					<ServerInfoLabels
 						v-else
@@ -75,14 +81,16 @@
 						:show-game-label="showGameLabel"
 						:show-loader-label="showLoaderLabel"
 						:linked="false"
-						class="pointer-events-none flex w-full flex-row flex-wrap items-center gap-2 text-secondary *:hidden sm:flex-row sm:*:flex"
+						class="pointer-events-none flex w-full flex-row flex-wrap items-center gap-4 text-primary *:hidden sm:flex-row sm:*:flex"
 					/>
 				</div>
 			</AutoLink>
 
 			<div v-if="isNuxt" class="z-10 ml-auto">
 				<ButtonStyled color="medal-promo" type="outlined" size="large">
-					<button class="my-auto" @click="handleUpgrade"><RocketIcon /> Upgrade</button>
+					<button class="my-auto" @click="handleUpgrade">
+						<RocketIcon /> {{ formatMessage(messages.upgradeButton) }}
+					</button>
 				</ButtonStyled>
 			</div>
 		</div>
@@ -92,15 +100,15 @@
 			class="relative flex w-full flex-row items-center gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-bg-blue bg-bg-blue p-4 text-sm font-bold text-contrast"
 		>
 			<LoaderCircleIcon class="size-5 animate-spin" />
-			Your server's hardware is currently being upgraded and will be back online shortly.
+			{{ formatMessage(messages.upgradingNotice) }}
 		</div>
 		<div
 			v-else-if="status === 'suspended' && suspension_reason === 'cancelled'"
 			class="relative flex w-full flex-col gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-bg-red bg-bg-red p-4 text-sm font-bold text-contrast"
 		>
 			<div class="flex flex-row gap-2">
-				<TriangleAlertIcon class="!size-5" /> Your Medal server trial has ended and your server has
-				been suspended. Please upgrade to continue to use your server.
+				<TriangleAlertIcon class="!size-5" />
+				{{ formatMessage(messages.medalTrialEndedNotice) }}
 			</div>
 		</div>
 		<div
@@ -108,9 +116,12 @@
 			class="relative flex w-full flex-col gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-bg-red bg-bg-red p-4 text-sm font-bold text-contrast"
 		>
 			<div class="flex flex-row gap-2">
-				<TriangleAlertIcon class="!size-5" /> Your server has been suspended:
-				{{ suspension_reason }}. Please update your billing information or contact Modrinth Support
-				for more information.
+				<TriangleAlertIcon class="!size-5" />
+				{{
+					formatMessage(messages.suspendedWithReasonNotice, {
+						reason: suspension_reason,
+					})
+				}}
 			</div>
 			<CopyCode :text="`${props.server_id}`" class="ml-auto" />
 		</div>
@@ -119,8 +130,8 @@
 			class="relative flex w-full flex-col gap-2 rounded-b-2xl border-[1px] border-t-0 border-solid border-bg-red bg-bg-red p-4 text-sm font-bold text-contrast"
 		>
 			<div class="flex flex-row gap-2">
-				<TriangleAlertIcon class="!size-5" /> Your server has been suspended. Please update your
-				billing information or contact Modrinth Support for more information.
+				<TriangleAlertIcon class="!size-5" />
+				{{ formatMessage(messages.suspendedNotice) }}
 			</div>
 			<CopyCode :text="`${props.server_id}`" class="ml-auto" />
 		</div>
@@ -143,11 +154,13 @@ import dayjs from 'dayjs'
 import dayjsDuration from 'dayjs/plugin/duration'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
+import { defineMessages, useVIntl } from '../../../composables/i18n'
 import { injectModrinthClient } from '../../../providers/api-client'
 import AutoLink from '../../base/AutoLink.vue'
 import Avatar from '../../base/Avatar.vue'
 import ButtonStyled from '../../base/ButtonStyled.vue'
 import CopyCode from '../../base/CopyCode.vue'
+import IntlFormatted from '../../base/IntlFormatted.vue'
 import ServerInfoLabels from '../labels/ServerInfoLabels.vue'
 import MedalBackgroundImage from './MedalBackgroundImage.vue'
 
@@ -171,6 +184,7 @@ type MedalServerListingProps = {
 const props = defineProps<MedalServerListingProps>()
 
 const emit = defineEmits<{ (e: 'upgrade'): void }>()
+const { formatMessage } = useVIntl()
 
 const client = injectModrinthClient()
 
@@ -191,6 +205,50 @@ const { data: projectData } = useQuery({
 const iconUrl = computed(() => projectData.value?.icon_url || undefined)
 const isConfiguring = computed(() => props.flows?.intro)
 
+const messages = defineMessages({
+	countdownRemaining: {
+		id: 'servers.medal-listing.countdown.remaining',
+		defaultMessage:
+			'<days-count>{days}</days-count> {days, plural, one {day} other {days}} <hours-count>{hours}</hours-count> {hours, plural, one {hour} other {hours}} <minutes-count>{minutes}</minutes-count> {minutes, plural, one {minute} other {minutes}} <seconds-count>{seconds}</seconds-count> {seconds, plural, one {second} other {seconds}} remaining...',
+	},
+	serverIconAlt: {
+		id: 'servers.medal-listing.server-icon-alt',
+		defaultMessage: 'Server icon',
+	},
+	usingProjectLabel: {
+		id: 'servers.medal-listing.using-project-label',
+		defaultMessage: 'Using {projectTitle}',
+	},
+	newServerLabel: {
+		id: 'servers.medal-listing.new-server-label',
+		defaultMessage: 'New server',
+	},
+	upgradeButton: {
+		id: 'servers.medal-listing.upgrade-button',
+		defaultMessage: 'Upgrade',
+	},
+	upgradingNotice: {
+		id: 'servers.medal-listing.notice.upgrading',
+		defaultMessage:
+			"Your server's hardware is currently being upgraded and will be back online shortly.",
+	},
+	medalTrialEndedNotice: {
+		id: 'servers.medal-listing.notice.medal-trial-ended',
+		defaultMessage:
+			'Your Medal server trial has ended and your server has been suspended. Please upgrade to continue using your server.',
+	},
+	suspendedWithReasonNotice: {
+		id: 'servers.medal-listing.notice.suspended-with-reason',
+		defaultMessage:
+			'Your server has been suspended: {reason}. Please update your billing information or contact Modrinth Support for more information.',
+	},
+	suspendedNotice: {
+		id: 'servers.medal-listing.notice.suspended',
+		defaultMessage:
+			'Your server has been suspended. Please update your billing information or contact Modrinth Support for more information.',
+	},
+})
+
 const timeLeftCountdown = ref({ days: 0, hours: 0, minutes: 0, seconds: 0 })
 const expiryDate = computed(() => (props.medal_expires ? dayjs(props.medal_expires) : null))
 
diff --git a/packages/ui/src/components/servers/server-list-empty/ServerListEmpty.vue b/packages/ui/src/components/servers/server-list-empty/ServerListEmpty.vue
new file mode 100644
index 0000000000..51dd4825c6
--- /dev/null
+++ b/packages/ui/src/components/servers/server-list-empty/ServerListEmpty.vue
@@ -0,0 +1,314 @@
+<template>
+	<div class="flex gap-8 items-center justify-center py-10">
+		<!-- Left column -->
+		<div class="flex flex-col gap-8 items-start pr-8 shrink-0 w-[380px]">
+			<!-- Heading -->
+			<div class="flex flex-col gap-2 items-start w-[300px]">
+				<p class="text-sm text-secondary">{{ formatMessage(messages.modrinthHostingLabel) }}</p>
+				<p class="text-[30px] leading-9 font-semibold text-contrast">
+					{{ formatMessage(messages.noServersTitle) }}
+				</p>
+				<p class="text-base font-normal text-primary">
+					{{ formatMessage(messages.noServersDescription) }}
+				</p>
+			</div>
+
+			<!-- Feature list -->
+			<div class="flex flex-col gap-4 items-start w-full">
+				<div class="flex gap-3 items-start">
+					<div
+						class="bg-surface-4 border border-solid border-surface-5 rounded-full shrink-0 size-8 flex items-center justify-center"
+					>
+						<PackageOpenIcon class="size-5 text-secondary" aria-hidden="true" />
+					</div>
+					<div class="flex flex-col gap-0.5">
+						<p class="text-base font-semibold text-contrast">
+							{{ formatMessage(messages.oneClickModInstallsTitle) }}
+						</p>
+						<p class="text-base font-normal text-primary">
+							{{ formatMessage(messages.oneClickModInstallsDescription) }}
+						</p>
+					</div>
+				</div>
+
+				<div class="flex gap-3 items-start">
+					<div
+						class="bg-surface-4 border border-solid border-surface-5 rounded-full shrink-0 size-8 flex items-center justify-center overflow-hidden"
+					>
+						<GlobeIcon class="size-5 text-secondary" aria-hidden="true" />
+					</div>
+					<div class="flex flex-col gap-0.5">
+						<p class="text-base font-semibold text-contrast">
+							{{ formatMessage(messages.simpleSetupTitle) }}
+						</p>
+						<p class="text-base font-normal text-primary">
+							{{ formatMessage(messages.simpleSetupDescription) }}
+						</p>
+					</div>
+				</div>
+
+				<div class="flex gap-3 items-start">
+					<div
+						class="bg-surface-4 border border-solid border-surface-5 rounded-full shrink-0 size-8 flex items-center justify-center overflow-hidden"
+					>
+						<UsersIcon class="size-5 text-secondary" aria-hidden="true" />
+					</div>
+					<div class="flex flex-col gap-0.5">
+						<p class="text-base font-semibold text-contrast">
+							{{ formatMessage(messages.playWithFriendsTitle) }}
+						</p>
+						<p class="text-base font-normal text-primary">
+							{{ formatMessage(messages.playWithFriendsDescription) }}
+						</p>
+					</div>
+				</div>
+			</div>
+
+			<!-- CTA section -->
+			<div class="flex flex-col gap-6 items-start w-[300px]">
+				<div class="flex flex-col gap-3 items-start">
+					<ButtonStyled color="brand">
+						<button @click="onClickNewServer?.()">
+							<PlusIcon aria-hidden="true" />
+							{{ formatMessage(messages.newServerButton) }}
+						</button>
+					</ButtonStyled>
+
+					<AutoLink
+						to="https://modrinth.com/hosting"
+						target="_blank"
+						class="flex items-center gap-1 hover:brightness-125"
+					>
+						{{ formatMessage(messages.learnMoreLink) }}
+						<RightArrowIcon class="size-5 shrink-0" aria-hidden="true" />
+					</AutoLink>
+				</div>
+
+				<template v-if="!loggedIn">
+					<div class="h-px w-full bg-surface-5" />
+
+					<div class="flex gap-3 items-center flex-wrap">
+						<p class="text-base font-normal text-primary">
+							{{ formatMessage(messages.alreadyHaveServerLabel) }}
+						</p>
+						<ButtonStyled>
+							<button @click="onClickSignIn?.()">
+								<LogInIcon aria-hidden="true" />
+								{{ formatMessage(messages.signInButton) }}
+							</button>
+						</ButtonStyled>
+					</div>
+				</template>
+			</div>
+		</div>
+
+		<!-- 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%)]"
+		>
+			<div class="rotate-[15deg]">
+				<div class="flex flex-col gap-4">
+					<div
+						v-for="row in GRID_ROWS"
+						:key="row"
+						class="flex gap-4 items-center shrink-0"
+						:class="animated ? (row % 2 === 1 ? 'drift-left' : 'drift-right relative left-14') : ''"
+					>
+						<div class="hidden drift-right drift-left"></div>
+						<div
+							v-for="col in GRID_COLS"
+							:key="col"
+							class="border border-surface-5 rounded-[20px] shrink-0 size-[112px] bg-surface-4 overflow-hidden"
+						>
+							<img :src="getGridImage(row - 1, col - 1)" alt="" class="size-full object-cover" />
+						</div>
+						<div
+							v-for="col in GRID_COLS"
+							:key="col"
+							class="border border-surface-5 rounded-[20px] shrink-0 size-[112px] bg-surface-4 overflow-hidden"
+						>
+							<img :src="getGridImage(row - 1, col - 1)" alt="" class="size-full object-cover" />
+						</div>
+						<div
+							v-for="col in GRID_COLS"
+							:key="col"
+							class="border border-surface-5 rounded-[20px] shrink-0 size-[112px] bg-surface-4 overflow-hidden"
+						>
+							<img :src="getGridImage(row - 1, col - 1)" alt="" class="size-full object-cover" />
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import {
+	GlobeIcon,
+	LogInIcon,
+	PackageOpenIcon,
+	PlusIcon,
+	RightArrowIcon,
+	UsersIcon,
+} from '@modrinth/assets'
+import { AutoLink } from '@modrinth/ui'
+
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+
+import { defineMessages, useVIntl } from '../../../composables/i18n'
+import imgAircraft from './grid-images/aircraft.png'
+import imgAlexs from "./grid-images/alex's.png"
+import imgArtifacts from './grid-images/artifacts.png'
+import imgBiomes from './grid-images/biomes.png'
+import imgCatac from './grid-images/catac.png'
+import imgCobble from './grid-images/cobble.png'
+import imgComforts from './grid-images/comforts.png'
+import imgCreate from './grid-images/create.png'
+import imgCreate1 from './grid-images/create1.png'
+import imgCreate2 from './grid-images/create2.png'
+import imgCreate3 from './grid-images/create3.png'
+import imgCreeper from './grid-images/creeper.png'
+import imgFriends from './grid-images/friends.png'
+import imgGeo from './grid-images/geo.png'
+import imgNaturalist from './grid-images/naturalist.png'
+import imgSeasons from './grid-images/seasons.png'
+import imgTravellers from './grid-images/travellers.png'
+import imgTree from './grid-images/tree.png'
+import imgYum1 from './grid-images/yum1.png'
+import imgYum2 from './grid-images/yum2.png'
+import imgYum3 from './grid-images/yum3.png'
+import imgYung from './grid-images/yung.png'
+
+withDefaults(
+	defineProps<{
+		animated?: boolean
+		onClickNewServer?: () => void
+		onClickSignIn?: () => void
+		loggedIn?: boolean
+	}>(),
+	{ animated: false },
+)
+
+const GRID_ROWS = 6
+const GRID_COLS = 5
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	modrinthHostingLabel: {
+		id: 'servers.list-empty.modrinth-hosting-label',
+		defaultMessage: 'Modrinth Hosting',
+	},
+	noServersTitle: {
+		id: 'servers.list-empty.no-servers-title',
+		defaultMessage: 'No servers yet',
+	},
+	noServersDescription: {
+		id: 'servers.list-empty.no-servers-description',
+		defaultMessage: 'Install mods, invite friends, and play together all from the Modrinth App.',
+	},
+	oneClickModInstallsTitle: {
+		id: 'servers.list-empty.one-click-mod-installs-title',
+		defaultMessage: 'One-click mod installs',
+	},
+	oneClickModInstallsDescription: {
+		id: 'servers.list-empty.one-click-mod-installs-description',
+		defaultMessage: 'Pick your favourite mods and we handle the rest.',
+	},
+	simpleSetupTitle: {
+		id: 'servers.list-empty.simple-setup-title',
+		defaultMessage: 'Simple setup',
+	},
+	simpleSetupDescription: {
+		id: 'servers.list-empty.simple-setup-description',
+		defaultMessage: 'Set up your server just like a single player world.',
+	},
+	playWithFriendsTitle: {
+		id: 'servers.list-empty.play-with-friends-title',
+		defaultMessage: 'Play with friends',
+	},
+	playWithFriendsDescription: {
+		id: 'servers.list-empty.play-with-friends-description',
+		defaultMessage: 'Invite friends and get them set up right in the Modrinth App.',
+	},
+	newServerButton: {
+		id: 'servers.list-empty.new-server-button',
+		defaultMessage: 'New server',
+	},
+	learnMoreLink: {
+		id: 'servers.list-empty.learn-more-link',
+		defaultMessage: 'Learn more about Modrinth Hosting',
+	},
+	alreadyHaveServerLabel: {
+		id: 'servers.list-empty.already-have-server-label',
+		defaultMessage: 'Already have a server?',
+	},
+	signInButton: {
+		id: 'servers.list-empty.sign-in-button',
+		defaultMessage: 'Sign in',
+	},
+})
+
+const GRID_IMAGES = [
+	imgYum1,
+	imgYum2,
+	imgYum3,
+	imgYung,
+	imgCreeper,
+	imgFriends,
+	imgNaturalist,
+	imgBiomes,
+	imgCatac,
+	imgCobble,
+	imgGeo,
+	imgCreate,
+	imgCreate1,
+	imgCreate2,
+	imgCreate3,
+	imgAircraft,
+	imgArtifacts,
+	imgComforts,
+	imgTravellers,
+	imgAlexs,
+	imgSeasons,
+	imgTree,
+]
+
+function getGridImage(row: number, col: number): string {
+	return GRID_IMAGES[(row * GRID_COLS + col) % GRID_IMAGES.length]
+}
+</script>
+
+<style scoped>
+p {
+	margin: 0;
+}
+
+@keyframes drift-right {
+	from {
+		transform: translateX(-33%);
+	}
+	to {
+		transform: translateX(33%);
+	}
+}
+
+@keyframes drift-left {
+	from {
+		transform: translateX(33%);
+	}
+	to {
+		transform: translateX(-33%);
+	}
+}
+
+.drift-left {
+	animation: drift-left linear infinite alternate;
+	animation-duration: 400s;
+}
+
+.drift-right {
+	animation: drift-right linear infinite alternate;
+	animation-duration: 400s;
+}
+</style>
diff --git a/packages/ui/src/components/servers/server-list-empty/grid-images/aircraft.png b/packages/ui/src/components/servers/server-list-empty/grid-images/aircraft.png
new file mode 100644
index 0000000000..ca2038768b
Binary files /dev/null and b/packages/ui/src/components/servers/server-list-empty/grid-images/aircraft.png differ
diff --git a/packages/ui/src/components/servers/server-list-empty/grid-images/alex's.png b/packages/ui/src/components/servers/server-list-empty/grid-images/alex's.png
new file mode 100644
index 0000000000..127cab4c74
Binary files /dev/null and b/packages/ui/src/components/servers/server-list-empty/grid-images/alex's.png differ
diff --git a/packages/ui/src/components/servers/server-list-empty/grid-images/artifacts.png b/packages/ui/src/components/servers/server-list-empty/grid-images/artifacts.png
new file mode 100644
index 0000000000..16a01a8201
Binary files /dev/null and b/packages/ui/src/components/servers/server-list-empty/grid-images/artifacts.png differ
diff --git a/packages/ui/src/components/servers/server-list-empty/grid-images/biomes.png b/packages/ui/src/components/servers/server-list-empty/grid-images/biomes.png
new file mode 100644
index 0000000000..9eb4cae053
Binary files /dev/null and b/packages/ui/src/components/servers/server-list-empty/grid-images/biomes.png differ
diff --git a/packages/ui/src/components/servers/server-list-empty/grid-images/catac.png b/packages/ui/src/components/servers/server-list-empty/grid-images/catac.png
new file mode 100644
index 0000000000..3aba1b35cc
Binary files /dev/null and b/packages/ui/src/components/servers/server-list-empty/grid-images/catac.png differ
diff --git a/packages/ui/src/components/servers/server-list-empty/grid-images/cobble.png b/packages/ui/src/components/servers/server-list-empty/grid-images/cobble.png
new file mode 100644
index 0000000000..5cf89640a2
Binary files /dev/null and b/packages/ui/src/components/servers/server-list-empty/grid-images/cobble.png differ
diff --git a/packages/ui/src/components/servers/server-list-empty/grid-images/comforts.png b/packages/ui/src/components/servers/server-list-empty/grid-images/comforts.png
new file mode 100644
index 0000000000..b100ea6f56
Binary files /dev/null and b/packages/ui/src/components/servers/server-list-empty/grid-images/comforts.png differ
diff --git a/packages/ui/src/components/servers/server-list-empty/grid-images/create.png b/packages/ui/src/components/servers/server-list-empty/grid-images/create.png
new file mode 100644
index 0000000000..4184d9201e
Binary files /dev/null and b/packages/ui/src/components/servers/server-list-empty/grid-images/create.png differ
diff --git a/packages/ui/src/components/servers/server-list-empty/grid-images/create1.png b/packages/ui/src/components/servers/server-list-empty/grid-images/create1.png
new file mode 100644
index 0000000000..f56858824a
Binary files /dev/null and b/packages/ui/src/components/servers/server-list-empty/grid-images/create1.png differ
diff --git a/packages/ui/src/components/servers/server-list-empty/grid-images/create2.png b/packages/ui/src/components/servers/server-list-empty/grid-images/create2.png
new file mode 100644
index 0000000000..ddc458540d
Binary files /dev/null and b/packages/ui/src/components/servers/server-list-empty/grid-images/create2.png differ
diff --git a/packages/ui/src/components/servers/server-list-empty/grid-images/create3.png b/packages/ui/src/components/servers/server-list-empty/grid-images/create3.png
new file mode 100644
index 0000000000..876fcf343b
Binary files /dev/null and b/packages/ui/src/components/servers/server-list-empty/grid-images/create3.png differ
diff --git a/packages/ui/src/components/servers/server-list-empty/grid-images/creeper.png b/packages/ui/src/components/servers/server-list-empty/grid-images/creeper.png
new file mode 100644
index 0000000000..65bb7b0b4f
Binary files /dev/null and b/packages/ui/src/components/servers/server-list-empty/grid-images/creeper.png differ
diff --git a/packages/ui/src/components/servers/server-list-empty/grid-images/friends.png b/packages/ui/src/components/servers/server-list-empty/grid-images/friends.png
new file mode 100644
index 0000000000..af9c8bb5ec
Binary files /dev/null and b/packages/ui/src/components/servers/server-list-empty/grid-images/friends.png differ
diff --git a/packages/ui/src/components/servers/server-list-empty/grid-images/geo.png b/packages/ui/src/components/servers/server-list-empty/grid-images/geo.png
new file mode 100644
index 0000000000..9034898cae
Binary files /dev/null and b/packages/ui/src/components/servers/server-list-empty/grid-images/geo.png differ
diff --git a/packages/ui/src/components/servers/server-list-empty/grid-images/naturalist.png b/packages/ui/src/components/servers/server-list-empty/grid-images/naturalist.png
new file mode 100644
index 0000000000..a0133b97d1
Binary files /dev/null and b/packages/ui/src/components/servers/server-list-empty/grid-images/naturalist.png differ
diff --git a/packages/ui/src/components/servers/server-list-empty/grid-images/seasons.png b/packages/ui/src/components/servers/server-list-empty/grid-images/seasons.png
new file mode 100644
index 0000000000..e2abd9b3cf
Binary files /dev/null and b/packages/ui/src/components/servers/server-list-empty/grid-images/seasons.png differ
diff --git a/packages/ui/src/components/servers/server-list-empty/grid-images/travellers.png b/packages/ui/src/components/servers/server-list-empty/grid-images/travellers.png
new file mode 100644
index 0000000000..d5fa64f6c8
Binary files /dev/null and b/packages/ui/src/components/servers/server-list-empty/grid-images/travellers.png differ
diff --git a/packages/ui/src/components/servers/server-list-empty/grid-images/tree.png b/packages/ui/src/components/servers/server-list-empty/grid-images/tree.png
new file mode 100644
index 0000000000..a82b00a9fe
Binary files /dev/null and b/packages/ui/src/components/servers/server-list-empty/grid-images/tree.png differ
diff --git a/packages/ui/src/components/servers/server-list-empty/grid-images/yum1.png b/packages/ui/src/components/servers/server-list-empty/grid-images/yum1.png
new file mode 100644
index 0000000000..ce7b7650bf
Binary files /dev/null and b/packages/ui/src/components/servers/server-list-empty/grid-images/yum1.png differ
diff --git a/packages/ui/src/components/servers/server-list-empty/grid-images/yum2.png b/packages/ui/src/components/servers/server-list-empty/grid-images/yum2.png
new file mode 100644
index 0000000000..e2796474c1
Binary files /dev/null and b/packages/ui/src/components/servers/server-list-empty/grid-images/yum2.png differ
diff --git a/packages/ui/src/components/servers/server-list-empty/grid-images/yum3.png b/packages/ui/src/components/servers/server-list-empty/grid-images/yum3.png
new file mode 100644
index 0000000000..f99af02229
Binary files /dev/null and b/packages/ui/src/components/servers/server-list-empty/grid-images/yum3.png differ
diff --git a/packages/ui/src/components/servers/server-list-empty/grid-images/yung.png b/packages/ui/src/components/servers/server-list-empty/grid-images/yung.png
new file mode 100644
index 0000000000..af1df4a19b
Binary files /dev/null and b/packages/ui/src/components/servers/server-list-empty/grid-images/yung.png differ
diff --git a/packages/ui/src/composables/index.ts b/packages/ui/src/composables/index.ts
index 5d1278a455..eda671a137 100644
--- a/packages/ui/src/composables/index.ts
+++ b/packages/ui/src/composables/index.ts
@@ -8,6 +8,7 @@ export * from './i18n'
 export * from './i18n-debug'
 export * from './page-leave-safety'
 export * from './scroll-indicator'
+export * from './server-backup'
 export * from './sticky-observer'
 export * from './terminal'
 export * from './virtual-scroll'
diff --git a/packages/ui/src/composables/server-backup.ts b/packages/ui/src/composables/server-backup.ts
new file mode 100644
index 0000000000..4dd75a5467
--- /dev/null
+++ b/packages/ui/src/composables/server-backup.ts
@@ -0,0 +1,54 @@
+import type { Archon } from '@modrinth/api-client'
+
+import { injectModrinthClient } from '../providers/api-client'
+import { injectNotificationManager } from '../providers/web-notifications'
+
+export function useServerBackupDownload() {
+	const client = injectModrinthClient()
+	const { addNotification } = injectNotificationManager()
+
+	function getLatestBackupDownload(
+		serverId: string,
+		serverFullList: Archon.Servers.v1.ServerFull[] | null | undefined,
+	): (() => Promise<void>) | null {
+		const serverFull = serverFullList?.find((s) => s.id === serverId)
+		if (!serverFull) return null
+
+		const activeWorld = serverFull.worlds.find((w) => w.is_active) ?? serverFull.worlds[0]
+		if (!activeWorld?.backups?.length) return null
+
+		const latestBackup = activeWorld.backups
+			.filter((b) => b.status === 'done')
+			.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())[0]
+		if (!latestBackup) return null
+
+		return async () => {
+			try {
+				const server = await client.archon.servers_v0.get(serverId)
+				const kyrosUrl = server.node?.instance
+				const jwt = server.node?.token
+				if (!kyrosUrl || !jwt) {
+					addNotification({
+						title: 'Download unavailable',
+						text: 'Server connection info is not available. Please contact support.',
+						type: 'error',
+					})
+					return
+				}
+
+				window.open(
+					`https://${kyrosUrl}/modrinth/v0/backups/${latestBackup.id}/download?auth=${jwt}`,
+					'_blank',
+				)
+			} catch {
+				addNotification({
+					title: 'Download failed',
+					text: 'An error occurred while trying to download the backup.',
+					type: 'error',
+				})
+			}
+		}
+	}
+
+	return { getLatestBackupDownload }
+}
diff --git a/packages/ui/src/layouts/index.ts b/packages/ui/src/layouts/index.ts
index 8532fe5be8..084ab4a7c2 100644
--- a/packages/ui/src/layouts/index.ts
+++ b/packages/ui/src/layouts/index.ts
@@ -1,4 +1,5 @@
 export * from './shared/content-tab'
 export * from './shared/files-tab'
 export * from './shared/installation-settings'
+export * from './shared/server-settings'
 export * from './wrapped'
diff --git a/packages/ui/src/layouts/shared/installation-settings/layout.vue b/packages/ui/src/layouts/shared/installation-settings/layout.vue
index b54731a18b..626c8ce156 100644
--- a/packages/ui/src/layouts/shared/installation-settings/layout.vue
+++ b/packages/ui/src/layouts/shared/installation-settings/layout.vue
@@ -381,14 +381,6 @@ const messages = defineMessages({
 							})
 						}}
 					</span>
-					<span class="text-primary">
-						{{
-							formatMessage(messages.unlinkDescription, {
-								type: ctx.isServer ? 'server' : 'instance',
-								projectType: showModpackVersionActions ? 'modpack' : 'server',
-							})
-						}}
-					</span>
 					<div>
 						<ButtonStyled color="orange">
 							<button
@@ -407,6 +399,14 @@ const messages = defineMessages({
 							</button>
 						</ButtonStyled>
 					</div>
+					<span class="text-primary">
+						{{
+							formatMessage(messages.unlinkDescription, {
+								type: ctx.isServer ? 'server' : 'instance',
+								projectType: showModpackVersionActions ? 'modpack' : 'server',
+							})
+						}}
+					</span>
 				</div>
 
 				<!-- Reinstall -->
@@ -414,13 +414,6 @@ const messages = defineMessages({
 					<span class="text-lg font-semibold text-contrast">
 						{{ formatMessage(messages.reinstallModpackTitle) }}
 					</span>
-					<span class="text-primary">
-						{{
-							formatMessage(messages.reinstallModpackDescription, {
-								type: ctx.isServer ? 'server' : 'instance',
-							})
-						}}
-					</span>
 					<div>
 						<ButtonStyled color="red">
 							<button
@@ -440,6 +433,13 @@ const messages = defineMessages({
 							</button>
 						</ButtonStyled>
 					</div>
+					<span class="text-primary">
+						{{
+							formatMessage(messages.reinstallModpackDescription, {
+								type: ctx.isServer ? 'server' : 'instance',
+							})
+						}}
+					</span>
 				</div>
 
 				<!-- Repair -->
@@ -451,15 +451,6 @@ const messages = defineMessages({
 							)
 						}}
 					</span>
-					<span class="text-primary">
-						{{
-							formatMessage(
-								ctx.isServer
-									? messages.repairServerDescription
-									: messages.repairInstanceDescription,
-							)
-						}}
-					</span>
 					<div>
 						<ButtonStyled>
 							<button
@@ -477,6 +468,15 @@ const messages = defineMessages({
 							</button>
 						</ButtonStyled>
 					</div>
+					<span class="text-primary">
+						{{
+							formatMessage(
+								ctx.isServer
+									? messages.repairServerDescription
+									: messages.repairInstanceDescription,
+							)
+						}}
+					</span>
 				</div>
 			</template>
 
@@ -617,16 +617,6 @@ const messages = defineMessages({
 							<span class="font-semibold text-contrast">{{ row.value }}</span>
 						</div>
 					</div>
-					<div class="flex items-start gap-2">
-						<CircleAlertIcon class="mt-0.5 size-5 shrink-0 text-orange" />
-						<span class="text-primary">
-							{{
-								formatMessage(
-									ctx.isServer ? messages.editWarningServer : messages.editWarningInstance,
-								)
-							}}
-						</span>
-					</div>
 					<div class="flex flex-wrap gap-2">
 						<ButtonStyled color="orange">
 							<button
@@ -640,6 +630,16 @@ const messages = defineMessages({
 						</ButtonStyled>
 						<slot name="unlinked-extra-buttons" />
 					</div>
+					<div class="flex items-start gap-2">
+						<CircleAlertIcon class="mt-0.5 size-5 shrink-0 text-orange" />
+						<span class="text-primary">
+							{{
+								formatMessage(
+									ctx.isServer ? messages.editWarningServer : messages.editWarningInstance,
+								)
+							}}
+						</span>
+					</div>
 				</div>
 
 				<!-- Repair section -->
@@ -651,15 +651,6 @@ const messages = defineMessages({
 							)
 						}}
 					</span>
-					<span class="text-primary">
-						{{
-							formatMessage(
-								ctx.isServer
-									? messages.repairServerDescription
-									: messages.repairInstanceDescription,
-							)
-						}}
-					</span>
 					<div>
 						<ButtonStyled>
 							<button
@@ -677,6 +668,15 @@ const messages = defineMessages({
 							</button>
 						</ButtonStyled>
 					</div>
+					<span class="text-primary">
+						{{
+							formatMessage(
+								ctx.isServer
+									? messages.repairServerDescription
+									: messages.repairInstanceDescription,
+							)
+						}}
+					</span>
 				</div>
 			</template>
 
diff --git a/packages/ui/src/layouts/shared/server-settings/index.ts b/packages/ui/src/layouts/shared/server-settings/index.ts
new file mode 100644
index 0000000000..5f1ecde43b
--- /dev/null
+++ b/packages/ui/src/layouts/shared/server-settings/index.ts
@@ -0,0 +1,3 @@
+export * from './pages'
+export * from './providers'
+export * from './tabs'
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/advanced.vue b/packages/ui/src/layouts/shared/server-settings/pages/advanced.vue
new file mode 100644
index 0000000000..2f44f8f30b
--- /dev/null
+++ b/packages/ui/src/layouts/shared/server-settings/pages/advanced.vue
@@ -0,0 +1,391 @@
+<template>
+	<div class="relative h-full w-full">
+		<div class="flex h-full w-full flex-col gap-4">
+			<div class="flex flex-col gap-6">
+				<!-- SFTP section -->
+				<div class="flex flex-col gap-2">
+					<div class="flex flex-col items-center justify-between gap-0.5 sm:flex-row">
+						<span class="text-lg font-semibold text-contrast">SFTP</span>
+						<ButtonStyled>
+							<a
+								v-tooltip="'This button only works with compatible SFTP clients (e.g. WinSCP)'"
+								class="!w-full sm:!w-auto"
+								:href="sftpUrl"
+								target="_blank"
+							>
+								<ExternalIcon class="h-5 w-5" />
+								Launch SFTP
+							</a>
+						</ButtonStyled>
+					</div>
+
+					<div class="flex flex-col gap-2.5 rounded-2xl bg-surface-2 p-4">
+						<span class="text-lg font-semibold text-contrast">Server Address</span>
+						<div
+							v-tooltip="'Copy SFTP server address'"
+							class="copy-field hover:bg-button-bg-hover"
+							@click="copyToClipboard('Server address', server?.sftp_host)"
+						>
+							<span class="cursor-pointer font-semibold text-primary">
+								{{ server?.sftp_host }}
+							</span>
+							<div class="grid h-10 w-10 place-content-center">
+								<CopyIcon class="h-5 w-5" />
+							</div>
+						</div>
+						<div class="flex flex-col gap-2 sm:mt-0 sm:flex-row">
+							<div class="flex w-full flex-col justify-center gap-2">
+								<span class="text-lg font-semibold text-contrast">Username</span>
+								<div
+									v-tooltip="'Copy SFTP username'"
+									class="copy-field hover:bg-button-bg-hover"
+									@click="copyToClipboard('Username', server?.sftp_username)"
+								>
+									<div class="truncate font-semibold">
+										{{ server?.sftp_username }}
+									</div>
+									<div class="grid h-10 w-9 place-content-center">
+										<CopyIcon class="h-5 w-5" />
+									</div>
+								</div>
+							</div>
+							<div class="flex w-full flex-col justify-center gap-2">
+								<span class="text-lg font-semibold text-contrast">Password</span>
+								<div
+									class="copy-field-has-button [&:hover:not(:has(button:hover))]:bg-button-bg-hover"
+									@click="copyToClipboard('Password', server?.sftp_password)"
+								>
+									<div class="flex items-center gap-1.5 h-full w-full">
+										<div
+											v-tooltip="'Copy SFTP Password'"
+											class="h-full flex justify-between grow items-center"
+										>
+											<div class="truncate font-semibold">
+												{{
+													showPassword
+														? server?.sftp_password
+														: '*'.repeat(server?.sftp_password?.length ?? 0)
+												}}
+											</div>
+											<CopyIcon class="h-5 w-5" />
+										</div>
+
+										<ButtonStyled type="transparent" circular>
+											<button
+												v-tooltip="showPassword ? 'Hide password' : 'Show password'"
+												class="hover:bg-button-bg-hover grid h-10 w-10 place-content-center rounded-lg"
+												@click.stop="showPassword = !showPassword"
+											>
+												<!-- look into doing stop propagation here -->
+												<EyeIcon v-if="showPassword" class="h-5 w-5" />
+												<EyeOffIcon v-else class="h-5 w-5" />
+											</button>
+										</ButtonStyled>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<!-- Startup command section -->
+				<div class="flex flex-col gap-2.5">
+					<div class="flex h-10 flex-col items-end justify-between gap-4 sm:flex-row">
+						<label for="startup-command-field" class="mb-0.5 flex flex-col gap-2">
+							<span class="text-lg font-semibold text-contrast">Startup command</span>
+						</label>
+						<ButtonStyled v-if="startupCommand !== defaultStartupCommand" type="transparent">
+							<button
+								:disabled="isStartupLoading || startupCommand === defaultStartupCommand"
+								class="relative !w-full sm:!w-auto"
+								@click="resetToDefault"
+							>
+								<UpdatedIcon class="h-5 w-5" />
+								Default
+							</button>
+						</ButtonStyled>
+					</div>
+					<div class="relative">
+						<StyledInput
+							id="startup-command-field"
+							v-model="startupCommand"
+							multiline
+							resize="vertical"
+							input-class="font-mono field-sizing-content"
+							:disabled="isStartupLoading"
+						/>
+						<div
+							v-if="isStartupLoading"
+							class="bg-bg/50 absolute inset-0 flex items-center justify-center rounded-xl"
+						>
+							<SpinnerIcon class="h-6 w-6 animate-spin text-secondary" />
+						</div>
+					</div>
+					<span> The command that runs when your server is started. </span>
+				</div>
+
+				<!-- Java version section -->
+				<div class="flex flex-col gap-2.5">
+					<div class="flex flex-col gap-2">
+						<span class="text-lg font-semibold text-contrast">Java version</span>
+					</div>
+					<div class="relative max-w-xs">
+						<Combobox
+							:id="'java-version-field'"
+							v-model="javaVersion"
+							name="java-version"
+							:options="displayedJavaVersions"
+							:display-value="javaVersionLabel ?? 'Java Version'"
+							:disabled="isStartupLoading"
+						>
+							<template #dropdown-footer>
+								<button
+									class="flex w-full cursor-pointer items-center justify-center gap-1.5 border-0 border-t border-solid border-surface-5 bg-transparent py-3 text-center text-sm font-semibold text-secondary transition-colors hover:text-contrast"
+									@mousedown.prevent
+									@click="showAllVersions = !showAllVersions"
+								>
+									<EyeOffIcon v-if="showAllVersions" class="size-4" />
+									<EyeIcon v-else class="size-4" />
+									{{ showAllVersions ? 'Hide extra versions' : 'Show all versions' }}
+								</button>
+							</template>
+						</Combobox>
+						<div
+							v-if="isStartupLoading"
+							class="bg-bg/50 absolute inset-0 flex items-center justify-center rounded-xl"
+						>
+							<SpinnerIcon class="h-5 w-5 animate-spin text-secondary" />
+						</div>
+					</div>
+					<span> The Java version your server runs on. </span>
+				</div>
+
+				<!-- Java runtime section -->
+				<div class="flex flex-col gap-2.5">
+					<div class="flex flex-col gap-2">
+						<span class="text-lg font-semibold text-contrast">Java runtime</span>
+					</div>
+					<div class="relative max-w-xs">
+						<Combobox
+							:id="'runtime-field'"
+							v-model="jreVendor"
+							name="runtime"
+							:options="JRE_VENDORS"
+							:display-value="jreVendorLabel ?? 'Runtime'"
+							:disabled="isStartupLoading"
+						/>
+						<div
+							v-if="isStartupLoading"
+							class="bg-bg/50 absolute inset-0 flex items-center justify-center rounded-xl"
+						>
+							<SpinnerIcon class="h-5 w-5 animate-spin text-secondary" />
+						</div>
+					</div>
+					<span> The Java runtime your server will use. </span>
+				</div>
+			</div>
+		</div>
+		<SaveBanner
+			:is-visible="!!hasUnsavedChanges"
+			:server-id="serverId"
+			:is-updating="isPending"
+			:save="() => saveStartup()"
+			:reset="resetStartup"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { Archon } from '@modrinth/api-client'
+import {
+	CopyIcon,
+	ExternalIcon,
+	EyeIcon,
+	EyeOffIcon,
+	SpinnerIcon,
+	UpdatedIcon,
+} from '@modrinth/assets'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import { computed, ref, watch } from 'vue'
+
+import { ButtonStyled, Combobox, StyledInput } from '#ui/components'
+import SaveBanner from '#ui/components/servers/SaveBanner.vue'
+import {
+	injectModrinthClient,
+	injectModrinthServerContext,
+	injectNotificationManager,
+} from '#ui/providers'
+
+const { addNotification } = injectNotificationManager()
+const { server, serverId, worldId } = injectModrinthServerContext()
+const client = injectModrinthClient()
+const queryClient = useQueryClient()
+
+// SFTP state
+const showPassword = ref(false)
+const sftpUrl = computed(() => `sftp://${server.value?.sftp_username}@${server.value?.sftp_host}`)
+
+const copyToClipboard = (name: string, textToCopy?: string) => {
+	navigator.clipboard.writeText(textToCopy || '')
+	addNotification({
+		type: 'success',
+		title: `${name} copied to clipboard!`,
+	})
+}
+
+// Startup state
+const startupQueryKey = computed(() => ['servers', 'startup', 'v1', serverId, worldId.value])
+
+const { data: startupData, isLoading: isStartupLoading } = useQuery({
+	queryKey: startupQueryKey,
+	queryFn: () => client.archon.options_v1.getStartup(serverId, worldId.value!),
+	enabled: computed(() => worldId.value !== null),
+})
+
+const JAVA_VERSIONS = [
+	{ value: 8, label: 'Java 8' },
+	{ value: 11, label: 'Java 11' },
+	{ value: 17, label: 'Java 17' },
+	{ value: 21, label: 'Java 21' },
+	{ value: 25, label: 'Java 25' },
+]
+
+const showAllVersions = ref(false)
+
+type MinecraftReleaseVersion = {
+	major: number
+	minor: number
+}
+
+function parseMinecraftReleaseVersion(version: string): MinecraftReleaseVersion | null {
+	const [majorPart, minorPart] = version.split('.')
+
+	if (!majorPart || !minorPart) return null
+
+	const major = Number(majorPart)
+	const minor = Number(minorPart)
+
+	if (!Number.isInteger(major) || !Number.isInteger(minor)) return null
+
+	return { major, minor }
+}
+
+function filterJavaVersions(compatibleVersions: number[]) {
+	return JAVA_VERSIONS.filter((version) => compatibleVersions.includes(version.value))
+}
+
+const displayedJavaVersions = computed(() => {
+	if (showAllVersions.value) return JAVA_VERSIONS
+
+	const mcVersion = server.value?.mc_version ?? ''
+	if (!mcVersion) return JAVA_VERSIONS
+
+	const releaseVersion = parseMinecraftReleaseVersion(mcVersion)
+	if (!releaseVersion) return JAVA_VERSIONS
+
+	if (releaseVersion.major > 1) {
+		if (releaseVersion.major >= 26) {
+			return filterJavaVersions([25])
+		}
+
+		return JAVA_VERSIONS
+	}
+
+	if (releaseVersion.minor >= 20) return filterJavaVersions([21])
+	if (releaseVersion.minor >= 17) return filterJavaVersions([17, 21])
+	if (releaseVersion.minor >= 12) return filterJavaVersions([8, 11, 17, 21])
+	if (releaseVersion.minor >= 6) return filterJavaVersions([8, 11])
+	return filterJavaVersions([8])
+})
+
+const JRE_VENDORS: { value: Archon.Content.v1.JreVendor; label: string }[] = [
+	{ value: 'corretto', label: 'Corretto' },
+	{ value: 'temurin', label: 'Temurin' },
+	{ value: 'graal', label: 'GraalVM' },
+]
+
+const savedStartupCommand = computed(() => startupData.value?.startup_command ?? '')
+const savedJavaVersion = computed(() => startupData.value?.java_version ?? undefined)
+const savedJreVendor = computed(() => startupData.value?.jre_vendor ?? undefined)
+const defaultStartupCommand = computed(
+	() => startupData.value?.original_invocation ?? savedStartupCommand.value,
+)
+
+const startupCommand = ref('')
+const javaVersion = ref<number>()
+const jreVendor = ref<Archon.Content.v1.JreVendor>()
+
+const javaVersionLabel = computed(
+	() => JAVA_VERSIONS.find((v) => v.value === javaVersion.value)?.label,
+)
+const jreVendorLabel = computed(() => JRE_VENDORS.find((v) => v.value === jreVendor.value)?.label)
+
+function syncFormFromData() {
+	startupCommand.value = savedStartupCommand.value
+	javaVersion.value = savedJavaVersion.value
+	jreVendor.value = savedJreVendor.value
+}
+
+watch(
+	startupData,
+	(newData, oldData) => {
+		if (newData && !oldData) {
+			syncFormFromData()
+		}
+	},
+	{ immediate: true },
+)
+
+const hasUnsavedChanges = computed(
+	() =>
+		startupCommand.value !== savedStartupCommand.value ||
+		javaVersion.value !== savedJavaVersion.value ||
+		jreVendor.value !== savedJreVendor.value,
+)
+
+const { mutate: saveStartup, isPending } = useMutation({
+	mutationFn: () =>
+		client.archon.options_v1.patchStartup(serverId, worldId.value!, {
+			startup_command: startupCommand.value || null,
+			java_version: javaVersion.value ?? null,
+			jre_vendor: jreVendor.value ?? null,
+		}),
+	onSuccess: async () => {
+		await queryClient.invalidateQueries({ queryKey: startupQueryKey.value })
+		syncFormFromData()
+		addNotification({
+			type: 'success',
+			title: 'Server settings updated',
+			text: 'Your server settings were successfully changed.',
+		})
+	},
+	onError: (error) => {
+		console.error(error)
+		addNotification({
+			type: 'error',
+			title: 'Failed to update server arguments',
+			text: 'Please try again later.',
+		})
+	},
+})
+
+function resetStartup() {
+	syncFormFromData()
+}
+
+function resetToDefault() {
+	startupCommand.value = defaultStartupCommand.value
+}
+</script>
+
+<style scoped>
+.copy-field {
+	@apply flex h-10 cursor-pointer items-center justify-between gap-2 rounded-lg bg-button-bg px-3 pr-1.5 transition-all;
+	@apply hover:brightness-125 active:scale-95;
+}
+
+.copy-field-has-button {
+	@apply flex h-10 cursor-pointer items-center justify-between gap-2 rounded-lg bg-button-bg px-3 pr-1.5 transition-all;
+	@apply [&:hover:not(:has(button:hover))]:brightness-125 [&:active:not(:has(button:active))]:scale-95;
+}
+</style>
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/general.vue b/packages/ui/src/layouts/shared/server-settings/pages/general.vue
new file mode 100644
index 0000000000..c3a86842a4
--- /dev/null
+++ b/packages/ui/src/layouts/shared/server-settings/pages/general.vue
@@ -0,0 +1,426 @@
+<template>
+	<div class="relative h-full w-full">
+		<div v-if="data" class="flex h-full w-full flex-col">
+			<div class="flex flex-col gap-6">
+				<div class="flex justify-start gap-16">
+					<div class="flex max-w-[500px] grow flex-col gap-6">
+						<!-- Server name -->
+						<div class="flex flex-col gap-2.5">
+							<label for="server-name-field" class="flex flex-col gap-2">
+								<span class="text-lg font-semibold text-contrast">Server name</span>
+							</label>
+							<div class="flex flex-col gap-2.5">
+								<StyledInput
+									id="server-name-field"
+									v-model="serverName"
+									wrapper-class="w-full"
+									:maxlength="48"
+									@keyup.enter="!serverName && saveGeneral"
+								/>
+								<span>This name is only visible on Modrinth.</span>
+								<div class="text-red font-medium">
+									<span v-if="!isValidServerName"> Server name cannot be empty. </span>
+								</div>
+							</div>
+						</div>
+
+						<!-- Hostname -->
+						<div class="flex flex-col gap-2.5">
+							<label for="server-subdomain" class="flex flex-col gap-2.5">
+								<span class="text-lg font-semibold text-contrast">Hostname</span>
+								<div
+									class="flex w-full overflow-hidden rounded-xl bg-button-bg px-3 [box-shadow:var(--shadow-inset-sm)] transition-[box-shadow] duration-100 ease-in-out focus-within:[box-shadow:0_0_0_0.25rem_var(--color-brand-shadow)]"
+								>
+									<div class="relative inline-flex min-h-9 items-center">
+										<span
+											class="pointer-events-none invisible whitespace-pre px-px text-base font-medium"
+											aria-hidden="true"
+											>{{ serverSubdomain || 'Enter subdomain...' }}</span
+										>
+										<input
+											id="server-subdomain"
+											:value="serverSubdomain"
+											placeholder="Enter subdomain..."
+											:maxlength="32"
+											class="absolute left-px inset-0 bg-transparent !p-0 text-base font-medium text-primary !shadow-none transition-colors placeholder:text-secondary focus:text-contrast"
+											autocomplete="off"
+											@input="serverSubdomain = ($event.target as HTMLInputElement).value"
+											@keyup.enter="saveGeneral"
+										/>
+									</div>
+									<div
+										class="flex min-h-9 shrink-0 select-none items-center py-2 pr-4 font-medium opacity-50 [filter:grayscale(50%)]"
+										:class="!serverSubdomain ? '!ml-auto' : ''"
+									>
+										.modrinth.gg
+									</div>
+								</div>
+							</label>
+							<span>Your friends can connect to your server using this address.</span>
+							<div v-if="!isValidSubdomain" class="text-red font-medium">
+								<span v-if="!isValidLengthSubdomain">
+									Subdomain must be at least 5 characters long.
+								</span>
+								<span v-if="!isValidCharsSubdomain">
+									Subdomain can only contain alphanumeric characters and dashes.
+								</span>
+							</div>
+						</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>
+				</div>
+
+				<!-- preferences -->
+				<div
+					v-for="(prefConfig, key) in preferences"
+					:key="key"
+					class="flex items-center justify-between gap-2"
+				>
+					<label :for="`pref-${key}`" class="flex flex-col gap-1">
+						<div class="flex flex-row items-center gap-2">
+							<span class="text-lg font-semibold text-contrast">{{ prefConfig.displayName }}</span>
+							<div
+								v-if="!prefConfig.implemented"
+								class="hidden items-center gap-1 rounded-full bg-surface-2 p-1 px-1.5 text-xs font-semibold sm:flex"
+							>
+								Coming Soon
+							</div>
+						</div>
+						<span>{{ prefConfig.description }}</span>
+					</label>
+					<Toggle
+						:id="`pref-${key}`"
+						v-model="newUserPreferences[key]"
+						class="flex-none"
+						:disabled="!prefConfig.implemented"
+					/>
+				</div>
+
+				<!-- Info -->
+				<div class="flex flex-col gap-2.5">
+					<div class="text-md 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"
+							:key="property.name"
+							class="flex items-center justify-between gap-4"
+						>
+							<template v-if="property.value !== 'Unknown'">
+								<span>{{ property.name }}</span>
+								<CopyCode :text="property.value" />
+							</template>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div v-else />
+		<SaveBanner
+			:is-visible="!!hasUnsavedChanges && !!isValidServerName"
+			:server-id="serverId"
+			:is-updating="isUpdating || busyReasons.length > 0"
+			:save="saveGeneral"
+			:reset="resetGeneral"
+		/>
+	</div>
+</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 SaveBanner from '#ui/components/servers/SaveBanner.vue'
+import {
+	injectModrinthClient,
+	injectModrinthServerContext,
+	injectNotificationManager,
+} from '#ui/providers'
+
+const { addNotification } = injectNotificationManager()
+const client = injectModrinthClient()
+const { server, serverId, busyReasons } = injectModrinthServerContext()
+const queryClient = useQueryClient()
+
+const data = server
+const serverName = ref(data.value?.name)
+const serverSubdomain = ref(data.value?.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) {
+		serverName.value = oldValue
+	}
+})
+
+// Preferences
+const preferences = {
+	hideSubdomainLabel: {
+		displayName: 'Hide subdomain label',
+		description: 'When enabled, the subdomain label will be hidden from the server header.',
+		implemented: true,
+	},
+	// autoRestart: {
+	// 	displayName: 'Auto restarts',
+	// 	description: 'Automatically restart the server if it crashes.',
+	// 	implemented: false,
+	// },
+	ramAsNumber: {
+		displayName: 'RAM as bytes',
+		description: 'Show RAM usage in bytes instead of a percentage.',
+		implemented: true,
+	},
+	powerDontAskAgain: {
+		displayName: 'Power action confirmation',
+		description: 'Ask for confirmation before stopping or restarting the server.',
+		implemented: true,
+	},
+} as const
+
+type PreferenceKeys = keyof typeof preferences
+
+type UserPreferences = {
+	[K in PreferenceKeys]: boolean
+}
+
+const defaultPreferences: UserPreferences = {
+	hideSubdomainLabel: false,
+	// autoRestart: false,
+	ramAsNumber: false,
+	powerDontAskAgain: false,
+}
+
+const userPreferences = useStorage<UserPreferences>(
+	`pyro-server-${serverId}-preferences`,
+	defaultPreferences,
+)
+
+const newUserPreferences = ref<UserPreferences>(JSON.parse(JSON.stringify(userPreferences.value)))
+
+// Info properties
+const infoProperties = [
+	{ name: 'Server ID', value: serverId ?? 'Unknown' },
+	{ name: 'Node', value: data.value?.node?.instance ?? 'Unknown' },
+]
+
+// Unsaved changes tracking (API fields + preferences)
+const hasUnsavedChanges = computed(
+	() =>
+		(serverName.value && serverName.value !== data.value?.name) ||
+		serverSubdomain.value !== data.value?.net?.domain ||
+		JSON.stringify(newUserPreferences.value) !== JSON.stringify(userPreferences.value),
+)
+
+const saveGeneral = async () => {
+	if (!isValidServerName.value || !isValidSubdomain.value) return
+
+	try {
+		isUpdating.value = true
+		if (serverName.value !== data.value?.name) {
+			await client.archon.servers_v0.updateName(serverId, serverName.value ?? '')
+		}
+		if (serverSubdomain.value !== data.value?.net?.domain) {
+			try {
+				const result = await client.archon.servers_v0.checkSubdomainAvailability(
+					serverSubdomain.value,
+				)
+				const available = result.available
+
+				if (!available) {
+					addNotification({
+						type: 'error',
+						title: 'Subdomain not available',
+						text: 'The subdomain you entered is already in use.',
+					})
+					return
+				}
+
+				await client.archon.servers_v0.changeSubdomain(serverId, serverSubdomain.value)
+			} catch (error) {
+				console.error('Error checking subdomain availability:', error)
+				addNotification({
+					type: 'error',
+					title: 'Error checking availability',
+					text: 'Failed to verify if the subdomain is available.',
+				})
+				return
+			}
+		}
+
+		// Save preferences to localStorage
+		userPreferences.value = { ...newUserPreferences.value }
+
+		await new Promise((resolve) => setTimeout(resolve, 500))
+		await queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] })
+		addNotification({
+			type: 'success',
+			title: 'Server settings updated',
+			text: 'Your server settings were successfully changed.',
+		})
+	} catch (error) {
+		console.error(error)
+		addNotification({
+			type: 'error',
+			title: 'Failed to update server settings',
+			text: 'An error occurred while attempting to update your server settings.',
+		})
+	} finally {
+		isUpdating.value = false
+	}
+}
+
+const resetGeneral = () => {
+	serverName.value = data.value?.name || ''
+	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/index.ts b/packages/ui/src/layouts/shared/server-settings/pages/index.ts
new file mode 100644
index 0000000000..58ee8b39d3
--- /dev/null
+++ b/packages/ui/src/layouts/shared/server-settings/pages/index.ts
@@ -0,0 +1,5 @@
+export { default as ServerSettingsAdvancedPage } from './advanced.vue'
+export { default as ServerSettingsGeneralPage } from './general.vue'
+export { default as ServerSettingsInstallationPage } from './installation.vue'
+export { default as ServerSettingsNetworkPage } from './network.vue'
+export { default as ServerSettingsPropertiesPage } from './properties.vue'
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/installation.vue b/packages/ui/src/layouts/shared/server-settings/pages/installation.vue
new file mode 100644
index 0000000000..ea8ac8b096
--- /dev/null
+++ b/packages/ui/src/layouts/shared/server-settings/pages/installation.vue
@@ -0,0 +1,808 @@
+<template>
+	<div class="flex flex-col gap-6">
+		<ConfirmModal
+			ref="resetToOnboardingModal"
+			:title="formatMessage(messages.resetToOnboardingModalTitle)"
+			:description="formatMessage(messages.resetToOnboardingModalDescription)"
+			:proceed-label="formatMessage(messages.resetToOnboardingButton)"
+			@proceed="confirmResetToOnboarding"
+		/>
+
+		<InstallationSettingsLayout ref="installationSettingsLayout" @reset-server="setupModal?.show()">
+			<template #extra>
+				<div class="flex flex-col gap-2.5">
+					<span class="text-lg font-semibold text-contrast">{{
+						formatMessage(messages.resetServerTitle)
+					}}</span>
+					<div>
+						<ButtonStyled color="red">
+							<button class="!shadow-none" :disabled="isInstalling" @click="setupModal?.show()">
+								<RotateCounterClockwiseIcon class="size-5" />
+								{{ formatMessage(commonMessages.resetServerButton) }}
+							</button>
+						</ButtonStyled>
+					</div>
+					<span class="text-primary">
+						{{ formatMessage(messages.resetServerDescription) }}
+					</span>
+				</div>
+			</template>
+
+			<template #extra-modals>
+				<ServerSetupModal
+					ref="setupModal"
+					@reinstall="onReinstall"
+					@browse-modpacks="onBrowseModpacks"
+				/>
+			</template>
+		</InstallationSettingsLayout>
+
+		<div v-if="isSiteAdmin" class="flex flex-col gap-2.5">
+			<span class="text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.supportOptionsTitle) }}
+			</span>
+			<div>
+				<ButtonStyled color="red">
+					<button
+						class="!shadow-none"
+						:disabled="!worldId || isResettingToOnboarding"
+						@click="resetToOnboardingModal?.show()"
+					>
+						<RotateCounterClockwiseIcon class="size-5" />
+						{{ formatMessage(messages.resetToOnboardingButton) }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { Archon, LauncherMeta } from '@modrinth/api-client'
+import { RotateCounterClockwiseIcon } from '@modrinth/assets'
+import {
+	ButtonStyled,
+	commonMessages,
+	ConfirmModal,
+	defineMessages,
+	formatLoaderLabel,
+	injectModrinthClient,
+	injectModrinthServerContext,
+	injectNotificationManager,
+	injectServerSettings,
+	injectTags,
+	InstallationSettingsLayout,
+	provideInstallationSettings,
+	ServerSetupModal,
+	useDebugLogger,
+	useVIntl,
+} from '@modrinth/ui'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
+import { computed, ref, watch } from 'vue'
+
+const debug = useDebugLogger('LoaderPage')
+const client = injectModrinthClient()
+const { server, serverId, worldId, isSyncingContent, busyReasons } = injectModrinthServerContext()
+const { addNotification } = injectNotificationManager()
+const queryClient = useQueryClient()
+const tags = injectTags()
+const { formatMessage } = useVIntl()
+const serverSettings = injectServerSettings()
+
+const messages = defineMessages({
+	resetServerTitle: {
+		id: 'hosting.loader.reset-server',
+		defaultMessage: 'Reset server',
+	},
+	resetServerDescription: {
+		id: 'hosting.loader.reset-server-description',
+		defaultMessage:
+			'Removes all data on your server, including your worlds, mods, and configuration files. Backups will remain and can be restored.',
+	},
+	loaderVersionLabel: {
+		id: 'hosting.loader.loader-version',
+		defaultMessage: '{loader, select, null {Loader} other {{loader}}} version',
+	},
+	failedToLoadVersions: {
+		id: 'hosting.loader.failed-to-load-versions',
+		defaultMessage: 'Failed to load versions',
+	},
+	failedToChangeVersion: {
+		id: 'hosting.loader.failed-to-change-version',
+		defaultMessage: 'Failed to change modpack version',
+	},
+	failedToSaveSettings: {
+		id: 'hosting.loader.failed-to-save-settings',
+		defaultMessage: 'Failed to save installation settings',
+	},
+	repairStartedTitle: {
+		id: 'hosting.loader.repair-started-title',
+		defaultMessage: 'Repair completed',
+	},
+	repairStartedText: {
+		id: 'hosting.loader.repair-started-text',
+		defaultMessage: 'Your server installation has been repaired.',
+	},
+	failedToRepair: {
+		id: 'hosting.loader.failed-to-repair',
+		defaultMessage: 'Failed to repair server',
+	},
+	failedToReinstall: {
+		id: 'hosting.loader.failed-to-reinstall',
+		defaultMessage: 'Failed to reinstall modpack',
+	},
+	failedToUnlink: {
+		id: 'hosting.loader.failed-to-unlink',
+		defaultMessage: 'Failed to unlink modpack',
+	},
+	supportOptionsTitle: {
+		id: 'hosting.loader.support-options-title',
+		defaultMessage: 'Support options',
+	},
+	resetToOnboardingButton: {
+		id: 'hosting.loader.reset-to-onboarding-button',
+		defaultMessage: 'Reset to onboarding',
+	},
+	resetToOnboardingModalTitle: {
+		id: 'hosting.loader.reset-to-onboarding-modal-title',
+		defaultMessage: 'Reset to onboarding',
+	},
+	resetToOnboardingModalDescription: {
+		id: 'hosting.loader.reset-to-onboarding-modal-description',
+		defaultMessage:
+			'This will send the server back into onboarding so setup can be completed again. Are you sure you want to continue?',
+	},
+	resetToOnboardingSuccessTitle: {
+		id: 'hosting.loader.reset-to-onboarding-success-title',
+		defaultMessage: 'Server reset to onboarding',
+	},
+	resetToOnboardingSuccessDescription: {
+		id: 'hosting.loader.reset-to-onboarding-success-description',
+		defaultMessage: 'The server has been returned to the onboarding flow.',
+	},
+	failedToResetToOnboarding: {
+		id: 'hosting.loader.failed-to-reset-to-onboarding',
+		defaultMessage: 'Failed to reset server to onboarding',
+	},
+})
+
+const emit = defineEmits<{
+	reinstall: [any?]
+	'reinstall-failed': []
+}>()
+
+const isInstalling = computed(() => {
+	const val =
+		server.value?.status === 'installing' || isSyncingContent.value || busyReasons.value.length > 0
+	debug(
+		'isInstalling:',
+		val,
+		'server.status:',
+		server.value?.status,
+		'isSyncingContent:',
+		isSyncingContent.value,
+	)
+	return val
+})
+const installationSettingsLayout = ref<InstanceType<typeof InstallationSettingsLayout>>()
+const setupModal = ref<InstanceType<typeof ServerSetupModal>>()
+
+async function invalidateServerState() {
+	debug('invalidateServerState: starting')
+	await Promise.all([
+		queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] }),
+		queryClient.invalidateQueries({ queryKey: ['content', 'list', 'v1', serverId] }),
+	])
+	debug('invalidateServerState: complete')
+}
+
+const addonsQuery = useQuery({
+	queryKey: computed(() => ['content', 'list', 'v1', serverId]),
+	queryFn: () =>
+		client.archon.content_v1.getAddons(serverId, worldId.value!, { from_modpack: false }),
+	enabled: computed(() => worldId.value !== null),
+})
+
+const modpack = computed(() => addonsQuery.data.value?.modpack ?? null)
+
+const modpackProjectId = computed(() => {
+	const spec = modpack.value?.spec
+	return spec?.platform === 'modrinth' ? spec.project_id : null
+})
+
+const modpackVersionsQuery = useQuery({
+	queryKey: computed(() => ['labrinth', 'versions', 'v2', modpackProjectId.value]),
+	queryFn: () =>
+		client.labrinth.versions_v2.getProjectVersions(modpackProjectId.value!, {
+			include_changelog: false,
+		}),
+	enabled: computed(() => !!modpackProjectId.value),
+})
+
+const isSiteAdmin = computed(() => serverSettings.currentUserRole.value === 'admin')
+
+const editingPlatform = ref(server.value?.loader?.toLowerCase() ?? 'vanilla')
+const editingGameVersion = ref(server.value?.mc_version ?? '')
+const resetToOnboardingModal = ref<InstanceType<typeof ConfirmModal>>()
+const isResettingToOnboarding = ref(false)
+
+const modLoaders = ['fabric', 'forge', 'quilt', 'neoforge']
+
+function toApiLoaderName(loader: string): string {
+	return loader === 'neoforge' ? 'neo' : loader
+}
+
+const apiLoaderName = computed(() =>
+	modLoaders.includes(editingPlatform.value) ? toApiLoaderName(editingPlatform.value) : null,
+)
+
+const manifestQuery = useQuery({
+	queryKey: computed(() => ['loader-manifest', apiLoaderName.value] as const),
+	queryFn: () => client.launchermeta.manifest_v0.getManifest(apiLoaderName.value!),
+	enabled: computed(() => !!apiLoaderName.value),
+	staleTime: 5 * 60 * 1000,
+})
+
+const paperBuildsQuery = useQuery({
+	queryKey: computed(() => ['paper-builds', editingGameVersion.value] as const),
+	queryFn: () => client.paper.versions_v3.getBuilds(editingGameVersion.value),
+	enabled: computed(() => editingPlatform.value === 'paper' && !!editingGameVersion.value),
+	staleTime: 5 * 60 * 1000,
+})
+
+const purpurBuildsQuery = useQuery({
+	queryKey: computed(() => ['purpur-builds', editingGameVersion.value] as const),
+	queryFn: () => client.purpur.versions_v2.getBuilds(editingGameVersion.value),
+	enabled: computed(() => editingPlatform.value === 'purpur' && !!editingGameVersion.value),
+	staleTime: 5 * 60 * 1000,
+})
+
+const paperSupportedVersionsQuery = useQuery({
+	queryKey: ['paper-supported-versions'] as const,
+	queryFn: async () => {
+		const project = await client.paper.versions_v3.getProject()
+		return new Set(Object.values(project.versions).flat())
+	},
+	enabled: computed(() => editingPlatform.value === 'paper'),
+	staleTime: 5 * 60 * 1000,
+})
+
+const purpurSupportedVersionsQuery = useQuery({
+	queryKey: ['purpur-supported-versions'] as const,
+	queryFn: async () => {
+		const project = await client.purpur.versions_v2.getProject()
+		return new Set(project.versions)
+	},
+	enabled: computed(() => editingPlatform.value === 'purpur'),
+	staleTime: 5 * 60 * 1000,
+})
+
+type LoaderVersionEntry = LauncherMeta.Manifest.v0.LoaderVersion
+
+function getLoaderVersionsForGameVersion(
+	loader: string,
+	gameVersion: string,
+): LoaderVersionEntry[] {
+	if (loader === 'paper') {
+		return (paperBuildsQuery.data.value?.builds ?? [])
+			.toSorted((a, b) => b - a)
+			.map((b) => ({ id: String(b), stable: true }))
+	}
+	if (loader === 'purpur') {
+		return (purpurBuildsQuery.data.value?.builds.all ?? [])
+			.toSorted((a, b) => parseInt(b) - parseInt(a))
+			.map((b) => ({ id: b, stable: true }))
+	}
+
+	const manifest = manifestQuery.data.value?.gameVersions
+	if (!manifest) return []
+
+	const placeholder = manifest.find((x) => x.id === '${modrinth.gameVersion}')
+	if (placeholder) return placeholder.loaders
+
+	const entry = manifest.find((x) => x.id === gameVersion)
+	return entry?.loaders ?? []
+}
+
+function toApiLoader(loader: string): Archon.Content.v1.Modloader {
+	if (loader === 'neoforge') return 'neo_forge'
+	return loader as Archon.Content.v1.Modloader
+}
+
+provideInstallationSettings({
+	loading: computed(() => !server.value || addonsQuery.isLoading.value),
+	installationInfo: computed(() => {
+		const addons = addonsQuery.data.value
+		const rawLoader = addons?.modloader ?? server.value?.loader ?? null
+		const loader = rawLoader ? formatLoaderLabel(rawLoader) : null
+		const gameVersion = addons?.game_version ?? server.value?.mc_version ?? null
+		const loaderVersion = addons?.modloader_version ?? server.value?.loader_version ?? null
+
+		debug('installationInfo computed:', {
+			'addons?.modloader': addons?.modloader,
+			'server.loader': server.value?.loader,
+			rawLoader,
+			loader,
+			'addons?.game_version': addons?.game_version,
+			'server.mc_version': server.value?.mc_version,
+			gameVersion,
+			'addons?.modloader_version': addons?.modloader_version,
+			'server.loader_version': server.value?.loader_version,
+			loaderVersion,
+			'addonsQuery.isLoading': addonsQuery.isLoading.value,
+			'addonsQuery.isFetching': addonsQuery.isFetching.value,
+		})
+
+		const rows = [
+			{ label: formatMessage(commonMessages.platformLabel), value: loader },
+			{ label: formatMessage(commonMessages.gameVersionLabel), value: gameVersion },
+		]
+		if (loader !== 'Vanilla') {
+			rows.push({
+				label: formatMessage(messages.loaderVersionLabel, { loader: loader ?? 'null' }),
+				value: loaderVersion,
+			})
+		}
+		return rows
+	}),
+	isLinked: computed(() => {
+		const val = !!modpack.value
+		debug('isLinked:', val, 'modpack:', modpackProjectId.value)
+		return val
+	}),
+	isBusy: isInstalling,
+	modpack: computed(() => {
+		if (!modpack.value) return null
+		const isLocal = modpack.value.spec.platform === 'local_file'
+		return {
+			iconUrl: modpack.value.icon_url,
+			title:
+				modpack.value.title ?? (isLocal ? modpack.value.spec.name : modpack.value.spec.project_id),
+			link: modpackProjectId.value ? `/project/${modpackProjectId.value}` : undefined,
+			versionNumber: modpack.value.version_number,
+			filename: isLocal ? modpack.value.spec.filename : undefined,
+			owner: modpack.value.owner
+				? {
+						id: modpack.value.owner.id,
+						name: modpack.value.owner.name,
+						iconUrl: modpack.value.owner.icon_url,
+						type: modpack.value.owner.type as 'user' | 'organization',
+					}
+				: undefined,
+		}
+	}),
+	currentPlatform: computed(() => server.value?.loader?.toLowerCase() ?? 'vanilla'),
+	currentGameVersion: computed(() => server.value?.mc_version ?? ''),
+	currentLoaderVersion: computed(() => server.value?.loader_version ?? ''),
+	availablePlatforms: ['vanilla', 'fabric', 'neoforge', 'forge', 'quilt', 'paper', 'purpur'],
+
+	editingPlatformRef: editingPlatform,
+	editingGameVersionRef: editingGameVersion,
+
+	resolveGameVersions(loader, showSnapshots) {
+		const versions = showSnapshots
+			? tags.gameVersions.value
+			: tags.gameVersions.value.filter((v) => v.version_type === 'release')
+
+		if (loader && loader !== 'vanilla') {
+			if (loader === 'paper') {
+				const supported = paperSupportedVersionsQuery.data.value
+				if (supported) {
+					return versions
+						.filter((v) => supported.has(v.version))
+						.map((v) => ({ value: v.version, label: v.version }))
+				}
+			} else if (loader === 'purpur') {
+				const supported = purpurSupportedVersionsQuery.data.value
+				if (supported) {
+					return versions
+						.filter((v) => supported.has(v.version))
+						.map((v) => ({ value: v.version, label: v.version }))
+				}
+			} else {
+				const manifest = manifestQuery.data.value?.gameVersions
+				if (manifest) {
+					const hasPlaceholder = manifest.some((x) => x.id === '${modrinth.gameVersion}')
+					if (!hasPlaceholder) {
+						const supportedVersions = new Set(
+							manifest.filter((x) => x.loaders.length > 0).map((x) => x.id),
+						)
+						return versions
+							.filter((v) => supportedVersions.has(v.version))
+							.map((v) => ({ value: v.version, label: v.version }))
+					}
+				}
+			}
+		}
+
+		return versions.map((v) => ({ value: v.version, label: v.version }))
+	},
+
+	resolveLoaderVersions(loader, gameVersion) {
+		if (loader === 'vanilla' || !gameVersion) return []
+		return getLoaderVersionsForGameVersion(loader, gameVersion)
+	},
+
+	resolveHasSnapshots(loader) {
+		if (loader === 'vanilla') {
+			return tags.gameVersions.value.some((v) => v.version_type !== 'release')
+		}
+		if (loader === 'paper') {
+			const supported = paperSupportedVersionsQuery.data.value
+			if (!supported) return false
+			return tags.gameVersions.value.some(
+				(v) => v.version_type !== 'release' && supported.has(v.version),
+			)
+		}
+		if (loader === 'purpur') {
+			const supported = purpurSupportedVersionsQuery.data.value
+			if (!supported) return false
+			return tags.gameVersions.value.some(
+				(v) => v.version_type !== 'release' && supported.has(v.version),
+			)
+		}
+		const manifest = manifestQuery.data.value?.gameVersions
+		if (!manifest) return false
+		const hasPlaceholder = manifest.some((x) => x.id === '${modrinth.gameVersion}')
+		if (hasPlaceholder) {
+			return tags.gameVersions.value.some((v) => v.version_type !== 'release')
+		}
+		const supportedVersions = new Set(manifest.filter((x) => x.loaders.length > 0).map((x) => x.id))
+		const supported = tags.gameVersions.value.filter((v) => supportedVersions.has(v.version))
+		return supported.some((v) => v.version_type !== 'release')
+	},
+
+	async save(platform, gameVersion, loaderVersionId) {
+		debug('save: called with', { platform, gameVersion, loaderVersionId })
+		const currentPlatform = server.value?.loader?.toLowerCase() ?? 'vanilla'
+		const platformChanged = platform !== currentPlatform
+		const gameVersionChanged = gameVersion !== (server.value?.mc_version ?? '')
+		const loaderVersionChanged =
+			loaderVersionId !== null && loaderVersionId !== (server.value?.loader_version ?? '')
+
+		let resolvedLoaderVersion = loaderVersionId
+		if (!resolvedLoaderVersion && platform !== 'vanilla') {
+			const versions = getLoaderVersionsForGameVersion(platform, gameVersion)
+			resolvedLoaderVersion = versions[0]?.id ?? null
+		}
+
+		debug('save: emitting reinstall before API call')
+		emit(
+			'reinstall',
+			platformChanged || loaderVersionChanged
+				? { loader: platform, lVersion: resolvedLoaderVersion, mVersion: gameVersion }
+				: { mVersion: gameVersion },
+		)
+		try {
+			if (platformChanged || loaderVersionChanged) {
+				const request: Archon.Content.v1.InstallWorldContent = {
+					content_variant: 'bare',
+					loader: toApiLoader(platform),
+					version: resolvedLoaderVersion ?? '',
+					game_version: gameVersion || undefined,
+					soft_override: true,
+				}
+				debug('save: platform/loader version changed, calling installContent', request)
+				await client.archon.content_v1.installContent(serverId, worldId.value!, request)
+			} else if (gameVersionChanged) {
+				debug('save: game version only, calling applyGameVersionUpdate', gameVersion)
+				await client.archon.content_v1.applyGameVersionUpdate(serverId, worldId.value!, gameVersion)
+			}
+			debug('save: succeeded, invalidating')
+			invalidateServerState()
+		} catch (err) {
+			debug('save: failed, emitting reinstall-failed', err)
+			emit('reinstall-failed')
+			addNotification({
+				type: 'error',
+				text: err instanceof Error ? err.message : formatMessage(messages.failedToSaveSettings),
+			})
+			throw err
+		}
+	},
+
+	async repair() {
+		debug('repair: called')
+		try {
+			await client.archon.content_v1.repair(serverId, worldId.value!)
+			debug('repair: API succeeded, invalidating')
+			await invalidateServerState()
+			addNotification({
+				type: 'success',
+				title: formatMessage(messages.repairStartedTitle),
+				text: formatMessage(messages.repairStartedText),
+			})
+		} catch (err) {
+			debug('repair: failed', err)
+			addNotification({
+				type: 'error',
+				text: err instanceof Error ? err.message : formatMessage(messages.failedToRepair),
+			})
+		}
+	},
+
+	async reinstallModpack() {
+		if (!modpack.value || modpack.value.spec.platform !== 'modrinth') return
+		debug(
+			'reinstallModpack: called, project:',
+			modpack.value.spec.project_id,
+			'version:',
+			modpack.value.spec.version_id,
+		)
+		debug('reinstallModpack: emitting reinstall before API call')
+		emit('reinstall')
+		try {
+			await client.archon.content_v1.installContent(serverId, worldId.value!, {
+				content_variant: 'modpack',
+				spec: {
+					platform: 'modrinth',
+					project_id: modpack.value.spec.project_id,
+					version_id: modpack.value.spec.version_id,
+				},
+				soft_override: true,
+			})
+			debug('reinstallModpack: installContent succeeded, invalidating')
+			invalidateServerState()
+		} catch (err) {
+			debug('reinstallModpack: failed, emitting reinstall-failed', err)
+			emit('reinstall-failed')
+			addNotification({
+				type: 'error',
+				text: err instanceof Error ? err.message : formatMessage(messages.failedToReinstall),
+			})
+		}
+	},
+
+	async unlinkModpack() {
+		debug('unlinkModpack: called')
+		const previousData = addonsQuery.data.value
+		if (previousData) {
+			debug('unlinkModpack: optimistically removing modpack from cache')
+			queryClient.setQueryData(['content', 'list', 'v1', serverId], {
+				...previousData,
+				modpack: null,
+			})
+		}
+
+		try {
+			await client.archon.content_v1.unlinkModpack(serverId, worldId.value!)
+			debug('unlinkModpack: API succeeded')
+		} catch (err) {
+			debug('unlinkModpack: failed, reverting cache', err)
+			if (previousData) {
+				queryClient.setQueryData(['content', 'list', 'v1', serverId], previousData)
+			}
+			addNotification({
+				type: 'error',
+				text: err instanceof Error ? err.message : formatMessage(messages.failedToUnlink),
+			})
+		} finally {
+			debug('unlinkModpack: invalidating queries')
+			await Promise.all([
+				queryClient.invalidateQueries({
+					queryKey: ['servers', 'detail', serverId],
+				}),
+				queryClient.invalidateQueries({
+					queryKey: ['content', 'list', 'v1', serverId],
+				}),
+			])
+			debug('unlinkModpack: invalidation complete')
+		}
+	},
+
+	getCachedModpackVersions: () => modpackVersionsQuery.data.value ?? null,
+
+	async fetchModpackVersions() {
+		debug('fetchModpackVersions: called, project:', modpackProjectId.value)
+		if (!modpackProjectId.value) throw new Error('No modpack project ID')
+		try {
+			const versions = await client.labrinth.versions_v2.getProjectVersions(
+				modpackProjectId.value,
+				{
+					include_changelog: false,
+				},
+			)
+			debug('fetchModpackVersions: got', versions.length, 'versions')
+			return versions
+		} catch (err) {
+			debug('fetchModpackVersions: failed', err)
+			addNotification({
+				type: 'error',
+				text: err instanceof Error ? err.message : formatMessage(messages.failedToLoadVersions),
+			})
+			throw err
+		}
+	},
+
+	async getVersionChangelog(versionId) {
+		debug('getVersionChangelog: called, versionId:', versionId)
+		try {
+			return await client.labrinth.versions_v2.getVersion(versionId)
+		} catch {
+			debug('getVersionChangelog: failed for', versionId)
+			return null
+		}
+	},
+
+	async onModpackVersionConfirm(version) {
+		if (!modpackProjectId.value) return
+		debug('onModpackVersionConfirm: called, version:', version.id)
+		debug('onModpackVersionConfirm: emitting reinstall before API call')
+		emit('reinstall')
+		try {
+			await client.archon.content_v1.installContent(serverId, worldId.value!, {
+				content_variant: 'modpack',
+				spec: {
+					platform: 'modrinth',
+					project_id: modpackProjectId.value,
+					version_id: version.id,
+				},
+				soft_override: true,
+			})
+			debug('onModpackVersionConfirm: installContent succeeded, invalidating')
+			invalidateServerState()
+		} catch (err) {
+			debug('onModpackVersionConfirm: failed, emitting reinstall-failed', err)
+			emit('reinstall-failed')
+			addNotification({
+				type: 'error',
+				text: err instanceof Error ? err.message : formatMessage(messages.failedToChangeVersion),
+			})
+		}
+	},
+
+	updaterModalProps: computed(() => ({
+		isApp: serverSettings.isApp.value,
+		currentVersionId:
+			modpack.value?.spec.platform === 'modrinth' ? modpack.value.spec.version_id : '',
+		projectIconUrl: modpack.value?.icon_url ?? undefined,
+		projectName:
+			modpack.value?.title ?? modpackProjectId.value ?? formatMessage(commonMessages.modpackLabel),
+		currentGameVersion: addonsQuery.data.value?.game_version ?? server.value?.mc_version ?? '',
+		currentLoader: addonsQuery.data.value?.modloader ?? server.value?.loader ?? '',
+	})),
+
+	isServer: true,
+	isApp: serverSettings.isApp.value,
+	showModpackVersionActions: computed(() => modpack.value?.spec.platform === 'modrinth'),
+
+	lockPlatform: false,
+	hideLoaderVersion: false,
+
+	async disableAllContent() {
+		debug('disableAllContent: fetching all addons')
+		const addons = await client.archon.content_v1.getAddons(serverId, worldId.value!)
+		const items = (addons.addons ?? [])
+			.filter((a) => !a.disabled)
+			.map((a) => ({ kind: a.kind, filename: a.filename }))
+		if (items.length > 0) {
+			debug('disableAllContent: disabling', items.length, 'addons')
+			await client.archon.content_v1.disableAddons(serverId, worldId.value!, items)
+		}
+		debug('disableAllContent: done')
+	},
+
+	async disableIncompatibleContent(diffs) {
+		debug('disableIncompatibleContent: processing', diffs.length, 'diffs')
+		const addons = await client.archon.content_v1.getAddons(serverId, worldId.value!)
+		const removedFiles = new Set(diffs.filter((d) => d.type === 'removed').map((d) => d.fileName))
+		const items = (addons.addons ?? [])
+			.filter((a) => !a.disabled && removedFiles.has(a.filename))
+			.map((a) => ({ kind: a.kind, filename: a.filename }))
+		if (items.length > 0) {
+			debug('disableIncompatibleContent: disabling', items.length, 'addons')
+			await client.archon.content_v1.disableAddons(serverId, worldId.value!, items)
+		}
+		debug('disableIncompatibleContent: done')
+	},
+
+	async saveWithoutAutoFix(platform, gameVersion, loaderVersionId) {
+		debug('saveWithoutAutoFix: called with', { platform, gameVersion, loaderVersionId })
+		let resolvedLoaderVersion = loaderVersionId
+		if (!resolvedLoaderVersion && platform !== 'vanilla') {
+			const versions = getLoaderVersionsForGameVersion(platform, gameVersion)
+			resolvedLoaderVersion = versions[0]?.id ?? null
+		}
+		emit('reinstall', { loader: platform, lVersion: resolvedLoaderVersion, mVersion: gameVersion })
+		try {
+			const request: Archon.Content.v1.InstallWorldContent = {
+				content_variant: 'bare',
+				loader: toApiLoader(platform),
+				version: resolvedLoaderVersion ?? '',
+				game_version: gameVersion || undefined,
+				soft_override: true,
+			}
+			debug('saveWithoutAutoFix: calling installContent', request)
+			await client.archon.content_v1.installContent(serverId, worldId.value!, request)
+			debug('saveWithoutAutoFix: succeeded, invalidating')
+			invalidateServerState()
+		} catch (err) {
+			debug('saveWithoutAutoFix: failed', err)
+			emit('reinstall-failed')
+			addNotification({
+				type: 'error',
+				text: err instanceof Error ? err.message : formatMessage(messages.failedToSaveSettings),
+			})
+			throw err
+		}
+	},
+
+	async previewSave(_platform, gameVersion, _loaderVersionId, signal) {
+		const result = await client.archon.content_v1.getUpdateGameVersionPreview(
+			serverId,
+			worldId.value!,
+			gameVersion,
+			signal,
+		)
+		if (result.addon_changes.length === 0 && !result.has_unknown_content) return null
+		return {
+			diffs: result.addon_changes.map((diff) => ({
+				type: diff.type,
+				projectName: diff.project?.title ?? undefined,
+				fileName: diff.file_name ?? undefined,
+				currentVersionName: diff.current_version?.version_number ?? undefined,
+				newVersionName: diff.new_version?.version_number ?? undefined,
+			})),
+			newGameVersion: result.new_game_version,
+			newLoaderVersion: result.new_loader_version,
+			hasUnknownContent: result.has_unknown_content,
+		}
+	},
+})
+
+watch(
+	() => server.value?.status,
+	(newStatus, oldStatus) => {
+		debug('status watcher:', oldStatus, '->', newStatus, {
+			'server.loader': server.value?.loader,
+			'server.mc_version': server.value?.mc_version,
+			'server.loader_version': server.value?.loader_version,
+		})
+		if (oldStatus === 'installing' && newStatus === 'available') {
+			debug('status installing->available, resetting editing refs')
+			editingPlatform.value = server.value?.loader?.toLowerCase() ?? 'vanilla'
+			editingGameVersion.value = server.value?.mc_version ?? ''
+		}
+	},
+)
+
+function onReinstall(event?: any) {
+	installationSettingsLayout.value?.cancelEditing()
+	emit('reinstall', event)
+}
+
+function onBrowseModpacks() {
+	debug('onBrowseModpacks: navigating to modpack discovery')
+	serverSettings.browseModpacks({
+		serverId,
+		worldId: worldId.value,
+		from: 'reset-server',
+	})
+}
+
+async function confirmResetToOnboarding() {
+	if (!worldId.value) return
+
+	try {
+		isResettingToOnboarding.value = true
+		await client.archon.servers_v1.resetToOnboarding(serverId, worldId.value)
+		server.value.flows = { intro: true }
+		await Promise.all([
+			queryClient.invalidateQueries({ queryKey: ['servers', 'detail', serverId] }),
+			queryClient.invalidateQueries({ queryKey: ['servers', 'v1', 'detail', serverId] }),
+		])
+		addNotification({
+			type: 'success',
+			title: formatMessage(messages.resetToOnboardingSuccessTitle),
+			text: formatMessage(messages.resetToOnboardingSuccessDescription),
+		})
+	} catch (err) {
+		addNotification({
+			type: 'error',
+			text: err instanceof Error ? err.message : formatMessage(messages.failedToResetToOnboarding),
+		})
+	} finally {
+		isResettingToOnboarding.value = false
+	}
+}
+</script>
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/network.vue b/packages/ui/src/layouts/shared/server-settings/pages/network.vue
new file mode 100644
index 0000000000..27a49f2ed6
--- /dev/null
+++ b/packages/ui/src/layouts/shared/server-settings/pages/network.vue
@@ -0,0 +1,438 @@
+<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"
+					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="editAllocationModal?.hide()">Cancel</button>
+					</ButtonStyled>
+					<ButtonStyled color="brand">
+						<button :disabled="!newAllocationName" type="submit">
+							<SaveIcon /> Update allocation
+						</button>
+					</ButtonStyled>
+				</div>
+			</form>
+		</NewModal>
+
+		<ConfirmModal
+			ref="confirmDeleteModal"
+			title="Deleting allocation"
+			:description="`You are deleting the allocation ${allocationToDelete}. This cannot be reserved again. Are you sure you want to proceed?`"
+			proceed-label="Delete"
+			@proceed="confirmDeleteAllocation"
+		/>
+
+		<div class="relative w-full">
+			<div
+				v-if="allocationsError"
+				class="flex w-full flex-col items-center justify-center gap-4 p-4"
+			>
+				<div class="flex max-w-lg flex-col items-center rounded-3xl bg-bg-raised p-6 shadow-xl">
+					<div class="flex flex-col items-center text-center">
+						<div class="flex flex-col items-center gap-4">
+							<div class="grid place-content-center rounded-full bg-bg-orange p-4">
+								<IssuesIcon class="size-12 text-orange" />
+							</div>
+							<h1 class="m-0 mb-2 w-fit text-4xl font-semibold">Failed to load network settings</h1>
+						</div>
+						<p class="text-md text-secondary">
+							We couldn't load your server's network settings. Here's what we know:
+							<span class="break-all font-mono">{{
+								allocationsError?.message ?? 'Unknown error'
+							}}</span>
+						</p>
+						<ButtonStyled size="large" color="brand" @click="() => refetchAllocations()">
+							<button class="mt-6 !w-full">Retry</button>
+						</ButtonStyled>
+					</div>
+				</div>
+			</div>
+			<div v-else-if="data" class="flex h-full w-full flex-col justify-between gap-4">
+				<div class="flex h-full flex-col gap-6">
+					<!-- Allocations section -->
+					<div class="flex flex-col gap-2.5">
+						<span class="text-lg font-semibold text-contrast">Allocations</span>
+
+						<div class="flex w-full flex-col items-center justify-start gap-2 sm:flex-row">
+							<StyledInput
+								v-model="allocationSearch"
+								wrapper-class="grow max-w-[400px]"
+								:maxlength="64"
+								placeholder="Port name (e.g., Dynmap)"
+							/>
+
+							<ButtonStyled color="brand" @click="showNewAllocationModal">
+								<button class="!w-full max-w-20">
+									<PlusIcon />
+									<span>Add</span>
+								</button>
+							</ButtonStyled>
+						</div>
+
+						<Table :columns="allocationColumns" :data="allocationRows" row-key="port">
+							<template #cell-name="{ row }">
+								<TagItem v-if="row.primary" class="!font-medium">Primary</TagItem>
+								<span v-else class="font-semibold">{{ row.name }}</span>
+							</template>
+							<template #cell-port="{ row }">
+								<span class="font-medium">{{ row.port }}</span>
+							</template>
+							<template #cell-actions="{ row }">
+								<div class="flex items-center justify-end gap-2">
+									<ButtonStyled icon-only type="transparent" circular>
+										<button @click="copyText(`${serverIP}:${row.port}`)">
+											<CopyIcon />
+										</button>
+									</ButtonStyled>
+									<template v-if="!row.primary">
+										<ButtonStyled icon-only type="transparent" circular>
+											<button @click="showEditAllocationModal(row.port)">
+												<PencilIcon />
+											</button>
+										</ButtonStyled>
+										<ButtonStyled icon-only type="outlined" circular color="red">
+											<button @click="showConfirmDeleteModal(row.port)">
+												<TrashIcon />
+											</button>
+										</ButtonStyled>
+									</template>
+								</div>
+							</template>
+						</Table>
+						<span>
+							Create additional ports for internet-facing features like map viewers or voice chat
+							mods.
+						</span>
+					</div>
+
+					<!-- DNS records section -->
+					<div class="flex flex-col gap-2.5">
+						<label for="user-domain" class="flex flex-col gap-2">
+							<span class="text-lg font-semibold text-contrast">DNS records</span>
+						</label>
+						<div class="flex w-full flex-col items-center justify-start gap-2 sm:flex-row">
+							<StyledInput
+								id="user-domain"
+								v-model="userDomain"
+								wrapper-class="grow max-w-[400px]"
+								:maxlength="64"
+								:placeholder="exampleDomain"
+							/>
+
+							<ButtonStyled>
+								<button
+									class="!w-full sm:!w-auto"
+									:disabled="userDomain == ''"
+									@click="exportDnsRecords"
+								>
+									<UploadIcon />
+									<span>Export</span>
+								</button>
+							</ButtonStyled>
+						</div>
+
+						<Table :columns="dnsColumns" :data="dnsRecords">
+							<template #cell-type="{ row }">
+								<TagItem
+									v-if="row.type === 'SRV'"
+									class="border !border-solid border-purple bg-highlight-purple !font-medium"
+									:style="`--_color: var(--color-purple)`"
+								>
+									{{ row.type }}
+								</TagItem>
+								<TagItem
+									v-else
+									class="border !border-solid border-blue bg-highlight-blue !font-medium"
+									:style="`--_color: var(--color-blue)`"
+								>
+									{{ row.type }}
+								</TagItem>
+							</template>
+							<template #cell-name="{ row }">
+								<span
+									class="block cursor-pointer truncate pr-8 font-semibold"
+									@click="copyText(row.name)"
+								>
+									{{ row.name }}
+								</span>
+							</template>
+							<template #cell-content="{ row }">
+								<span
+									class="block cursor-pointer truncate pr-8 font-semibold"
+									@click="copyText(row.content)"
+								>
+									{{ row.content }}
+								</span>
+							</template>
+						</Table>
+
+						<span>
+							Set up your personal domain to connect to your server via custom DNS records.
+						</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import {
+	CopyIcon,
+	IssuesIcon,
+	PencilIcon,
+	PlusIcon,
+	SaveIcon,
+	TrashIcon,
+	UploadIcon,
+} from '@modrinth/assets'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
+import { computed, nextTick, ref } from 'vue'
+
+import { ButtonStyled, ConfirmModal, NewModal, StyledInput, Table, TagItem } from '#ui/components'
+import type { TableColumn } from '#ui/components/base'
+import {
+	injectModrinthClient,
+	injectModrinthServerContext,
+	injectNotificationManager,
+} from '#ui/providers'
+
+const { addNotification } = injectNotificationManager()
+const { server, serverId } = injectModrinthServerContext()
+const client = injectModrinthClient()
+const queryClient = useQueryClient()
+
+const data = server
+
+const serverIP = ref(data?.value?.net?.ip ?? '')
+const serverPrimaryPort = ref(data?.value?.net?.port ?? 0)
+const userDomain = ref('')
+const exampleDomain = 'play.example.com'
+
+const {
+	data: allocationsData,
+	error: allocationsError,
+	refetch: refetchAllocations,
+} = useQuery({
+	queryKey: ['servers', 'allocations', serverId] as const,
+	queryFn: () => client.archon.servers_v0.getAllocations(serverId),
+})
+const allocations = allocationsData
+
+const allocationColumns: TableColumn[] = [
+	{ key: 'name', label: 'Name', width: '40%' },
+	{ key: 'port', label: 'Port' },
+	{ key: 'actions', label: 'Actions', width: '33%', align: 'right' },
+]
+
+const allocationSearch = ref('')
+
+const allocationRows = computed(() => {
+	const primary = {
+		name: 'Primary allocation',
+		port: serverPrimaryPort.value,
+		primary: true,
+	}
+	const extra = (allocations.value ?? []).map((a) => ({
+		name: a.name,
+		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),
+	)
+})
+
+const dnsColumns: TableColumn[] = [
+	{ key: 'type', label: 'Type', width: '20%' },
+	{ key: 'name', label: 'Name', width: '35%' },
+	{ 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 newAllocationPort = ref(0)
+const allocationToDelete = ref<number | null>(null)
+
+const addNewAllocation = async () => {
+	if (!newAllocationName.value) return
+
+	try {
+		await client.archon.servers_v0.reserveAllocation(serverId, newAllocationName.value)
+		await queryClient.invalidateQueries({ queryKey: ['servers', 'allocations', serverId] })
+
+		newAllocationModal.value?.hide()
+		newAllocationName.value = ''
+
+		addNotification({
+			type: 'success',
+			title: 'Allocation reserved',
+			text: 'Your allocation has been reserved.',
+		})
+	} catch (error) {
+		console.error('Failed to reserve new allocation:', error)
+	}
+}
+
+const showNewAllocationModal = () => {
+	newAllocationName.value = ''
+	newAllocationModal.value?.show()
+	nextTick(() => {
+		setTimeout(() => {
+			newAllocationInput.value?.focus()
+		}, 100)
+	})
+}
+
+const showEditAllocationModal = (port: number) => {
+	newAllocationPort.value = port
+	editAllocationModal.value?.show()
+	nextTick(() => {
+		setTimeout(() => {
+			editAllocationInput.value?.focus()
+		}, 100)
+	})
+}
+
+const showConfirmDeleteModal = (port: number) => {
+	allocationToDelete.value = port
+	confirmDeleteModal.value?.show()
+}
+
+const confirmDeleteAllocation = async () => {
+	if (allocationToDelete.value === null) return
+
+	await client.archon.servers_v0.deleteAllocation(serverId, allocationToDelete.value)
+	await queryClient.invalidateQueries({ queryKey: ['servers', 'allocations', serverId] })
+
+	addNotification({
+		type: 'success',
+		title: 'Allocation removed',
+		text: 'Your allocation has been removed.',
+	})
+
+	allocationToDelete.value = null
+}
+
+const editAllocation = async () => {
+	if (!newAllocationName.value) return
+
+	try {
+		await client.archon.servers_v0.updateAllocation(
+			serverId,
+			newAllocationPort.value,
+			newAllocationName.value,
+		)
+		await queryClient.invalidateQueries({ queryKey: ['servers', 'allocations', serverId] })
+
+		editAllocationModal.value?.hide()
+		newAllocationName.value = ''
+
+		addNotification({
+			type: 'success',
+			title: 'Allocation updated',
+			text: 'Your allocation has been updated.',
+		})
+	} catch (error) {
+		console.error('Failed to reserve new allocation:', error)
+	}
+}
+
+const dnsRecords = computed(() => {
+	const domain = userDomain.value === '' ? exampleDomain : userDomain.value
+	return [
+		{
+			type: 'A',
+			name: `${domain}`,
+			content: data.value?.net?.ip ?? '',
+		},
+		{
+			type: 'SRV',
+			name: `_minecraft._tcp.${domain}`,
+			content: `0 10 ${data.value?.net?.port} ${domain}`,
+		},
+	]
+})
+
+type DnsRecord = {
+	type: string
+	name: string
+	content: string
+}
+
+const exportDnsRecords = () => {
+	const records = dnsRecords.value.reduce(
+		(acc, record) => {
+			const type = record.type
+			if (!acc[type]) {
+				acc[type] = []
+			}
+			acc[type].push(record)
+			return acc
+		},
+		{} as Record<string, DnsRecord[]>,
+	)
+
+	const text = Object.entries(records)
+		.map(([type, records]) => {
+			return `; ${type} Records\n${records.map((record) => `${record.name}.\t1\tIN\t${record.type} ${record.content}${record.type === 'SRV' ? '.' : ''}`).join('\n')}\n`
+		})
+		.join('\n')
+	const blob = new Blob([text], { type: 'text/plain' })
+	const a = document.createElement('a')
+	a.href = window.URL.createObjectURL(blob)
+	a.download = `${userDomain.value}.txt`
+	a.click()
+	a.remove()
+}
+
+const copyText = (text: string) => {
+	navigator.clipboard.writeText(text)
+	addNotification({
+		type: 'success',
+		title: 'Text copied',
+		text: `${text} has been copied to your clipboard`,
+	})
+}
+</script>
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/properties.vue b/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
new file mode 100644
index 0000000000..1e77179214
--- /dev/null
+++ b/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
@@ -0,0 +1,526 @@
+<template>
+	<div class="relative h-full w-full select-none">
+		<div v-if="propsData" class="flex h-full w-full flex-col justify-between gap-4">
+			<Admonition
+				v-if="hasNoProperties"
+				type="warning"
+				body="Some expected properties are missing from your server.properties - this usually means the server hasn't completed its first startup yet."
+			/>
+
+			<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
+						<AutoLink
+							class="goto-link !inline-block"
+							to="https://minecraft.wiki/w/Server.properties"
+							target="_blank"
+						>
+							Minecraft Wiki
+						</AutoLink>
+						has more details.
+					</div>
+				</div>
+
+				<div class="w-full text-sm">
+					<label for="search-server-properties" class="sr-only"> Search server properties </label>
+					<StyledInput
+						id="search-server-properties"
+						v-model="searchInput"
+						wrapper-class="w-full"
+						type="search"
+						:icon="SearchIcon"
+						name="search"
+						autocomplete="off"
+						placeholder="Search server properties..."
+					/>
+				</div>
+
+				<div class="flex flex-col gap-6 pb-2">
+					<!-- Basic Properties -->
+					<!-- [&:not(:has(*:not(:empty)))]:hidden is to hide parent if all children are empty -->
+					<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">
+								<span class="font-semibold text-contrast">Gamemode</span>
+								<Chips
+									v-model="combinedGamemode"
+									:items="gamemodeItems"
+									:format-label="capitalize"
+								/>
+							</div>
+
+							<div
+								v-if="combinedGamemode !== 'hardcore' && isPropertyVisible('difficulty')"
+								class="flex flex-col gap-2"
+							>
+								<span class="font-semibold text-contrast">Difficulty</span>
+								<Chips
+									v-model="selectedDifficulty"
+									:items="difficultyItems"
+									:format-label="capitalize"
+								/>
+							</div>
+
+							<div v-if="isPropertyVisible('max_players')" class="flex flex-col gap-2">
+								<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"
+									@update:model-value="liveProperties.max_players = String($event)"
+								/>
+							</div>
+
+							<div v-if="isPropertyVisible('motd')" class="flex flex-col gap-2">
+								<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"
+								/>
+							</div>
+
+							<div
+								v-if="isPropertyVisible('allow_flight')"
+								class="flex flex-row items-center justify-between gap-4"
+							>
+								<span class="font-semibold text-contrast">Allow flight</span>
+								<Toggle
+									id="server-property-allow-flight"
+									:model-value="liveProperties.allow_flight === 'true'"
+									@update:model-value="liveProperties.allow_flight = $event ? 'true' : 'false'"
+								/>
+							</div>
+
+							<div
+								v-if="isPropertyVisible('allow_cheats')"
+								class="flex flex-row items-center justify-between gap-4"
+							>
+								<span class="font-semibold text-contrast">Allow cheats</span>
+								<Toggle
+									id="server-property-allow-cheats"
+									:model-value="liveProperties.allow_cheats === 'true'"
+									@update:model-value="liveProperties.allow_cheats = $event ? 'true' : 'false'"
+								/>
+							</div>
+
+							<div
+								v-if="isPropertyVisible('white_list')"
+								class="flex flex-row items-center justify-between gap-4"
+							>
+								<span class="font-semibold text-contrast">Enable whitelist</span>
+								<Toggle id="server-property-whitelist" v-model="whitelistEnabled" />
+							</div>
+
+							<div
+								v-if="isPropertyVisible('spawn_protection')"
+								class="flex flex-row items-center justify-between gap-4"
+							>
+								<span class="font-semibold text-contrast">Enable spawn protection</span>
+								<Toggle
+									id="server-property-spawn-protection-toggle"
+									v-model="spawnProtectionEnabled"
+								/>
+							</div>
+
+							<div
+								v-if="spawnProtectionEnabled && isPropertyVisible('spawn_protection')"
+								class="flex items-center justify-between"
+							>
+								<span class="font-semibold text-contrast">Protection radius</span>
+								<StyledInput
+									id="server-property-spawn-protection-radius"
+									:model-value="liveProperties.spawn_protection"
+									type="number"
+									wrapper-class="w-full sm:w-[100px]"
+									input-class="text-right"
+									@update:model-value="liveProperties.spawn_protection = String($event)"
+								/>
+							</div>
+						</div>
+					</div>
+					<!-- Advanced Properties -->
+					<Accordion
+						v-if="hasVisibleAdvancedProperties"
+						overflow-visible
+						:force-open="isSearchActive"
+					>
+						<template #title>
+							<span class="text-lg font-semibold text-contrast">Advanced properties</span>
+						</template>
+
+						<div class="flex flex-col gap-6 pt-4">
+							<template v-for="group in advancedGroupedProperties" :key="group.label">
+								<div v-if="hasVisibleProperties(group)" class="flex flex-col gap-2.5">
+									<h3 class="m-0 text-base font-semibold text-contrast">
+										{{ group.label }}
+									</h3>
+									<div
+										class="flex flex-col gap-4 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">
+													{{ formatPropertyName(key) }}
+												</span>
+
+												<div v-if="getPropertyDef(key).type === 'toggle'" class="flex justify-end">
+													<Toggle
+														:id="`server-property-${key}`"
+														:model-value="liveProperties[key] === 'true'"
+														:aria-labelledby="`property-label-${key}`"
+														@update:model-value="liveProperties[key] = $event ? 'true' : 'false'"
+													/>
+												</div>
+												<div
+													v-else-if="getPropertyDef(key).type === 'number'"
+													class="w-full sm:w-[320px]"
+												>
+													<StyledInput
+														:id="`server-property-${key}`"
+														:model-value="liveProperties[key]"
+														type="number"
+														placeholder="Type here..."
+														wrapper-class="w-full"
+														:aria-labelledby="`property-label-${key}`"
+														@update:model-value="liveProperties[key] = String($event)"
+													/>
+												</div>
+												<div v-else class="mt-2 flex w-full justify-end sm:w-[320px]">
+													<StyledInput
+														:id="`server-property-${key}`"
+														v-model="liveProperties[key]"
+														placeholder="Type here..."
+														wrapper-class="w-full"
+														:aria-labelledby="`property-label-${key}`"
+													/>
+												</div>
+											</div>
+										</template>
+									</div>
+								</div>
+							</template>
+						</div>
+					</Accordion>
+
+					<div
+						v-if="hasNoResults"
+						class="flex flex-col items-center gap-2 py-8 text-center text-secondary"
+					>
+						<SearchIcon class="size-10" />
+						<span class="text-lg font-semibold text-contrast">No properties found</span>
+						<span>No properties match "{{ searchInput }}".</span>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div v-else class="flex h-full w-full items-center justify-center">
+			<SpinnerIcon class="animate-spin" />
+		</div>
+
+		<SaveBanner
+			:is-visible="hasUnsavedChanges"
+			:server-id="serverId"
+			:is-updating="isUpdating || busyReasons.length > 0"
+			restart
+			:save="() => saveProperties()"
+			:reset="resetProperties"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { Archon } from '@modrinth/api-client'
+import { SearchIcon, SpinnerIcon } from '@modrinth/assets'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import Fuse from 'fuse.js'
+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 {
+	injectModrinthClient,
+	injectModrinthServerContext,
+	injectNotificationManager,
+} from '#ui/providers'
+
+const { addNotification } = injectNotificationManager()
+const client = injectModrinthClient()
+const { serverId, worldId, powerState, busyReasons } = injectModrinthServerContext()
+const queryClient = useQueryClient()
+
+const searchInput = ref('')
+
+type PropertyDef = { type: 'toggle' } | { type: 'number' } | { type: 'text' }
+
+const KNOWN_PROPERTIES: Record<string, PropertyDef> = {
+	allow_cheats: { type: 'toggle' },
+	allow_flight: { type: 'toggle' },
+	difficulty: { type: 'text' },
+	enforce_whitelist: { type: 'toggle' },
+	force_gamemode: { type: 'toggle' },
+	gamemode: { type: 'text' },
+	generate_structures: { type: 'toggle' },
+	generator_settings: { type: 'text' },
+	hardcore: { type: 'toggle' },
+	level_seed: { type: 'text' },
+	level_type: { type: 'text' },
+	max_players: { type: 'number' },
+	max_tick_time: { type: 'number' },
+	motd: { type: 'text' },
+	pause_when_empty_seconds: { type: 'number' },
+	player_idle_timeout: { type: 'number' },
+	require_resource_pack: { type: 'toggle' },
+	resource_pack: { type: 'text' },
+	resource_pack_id: { type: 'text' },
+	resource_pack_sha1: { type: 'text' },
+	simulation_distance: { type: 'number' },
+	spawn_protection: { type: 'number' },
+	sync_chunk_writes: { type: 'toggle' },
+	view_distance: { type: 'number' },
+	white_list: { type: 'toggle' },
+}
+
+function getPropertyDef(key: string): PropertyDef {
+	return KNOWN_PROPERTIES[key] ?? { type: 'text' }
+}
+
+const ADVANCED_GROUPS = [
+	{
+		label: 'Performance',
+		keys: [
+			'view_distance',
+			'simulation_distance',
+			'sync_chunk_writes',
+			'max_tick_time',
+			'player_idle_timeout',
+			'pause_when_empty_seconds',
+		],
+	},
+	{
+		label: 'Resource Pack',
+		keys: ['resource_pack', 'resource_pack_id', 'resource_pack_sha1', 'require_resource_pack'],
+	},
+]
+
+type CombinedGamemode = 'survival' | 'creative' | 'hardcore'
+const gamemodeItems: CombinedGamemode[] = ['survival', 'creative', 'hardcore']
+const difficultyItems = ['peaceful', 'easy', 'normal', 'hard']
+
+function capitalize(str: string): string {
+	return str.charAt(0).toUpperCase() + str.slice(1)
+}
+
+const queryKey = computed(() => ['servers', 'properties', 'v1', serverId, worldId.value])
+
+const { data: propsData } = useQuery({
+	queryKey,
+	queryFn: () => client.archon.properties_v1.getProperties(serverId, worldId.value!),
+	enabled: computed(() => worldId.value !== null),
+})
+
+function flattenProperties(data: Archon.Content.v1.PropertiesFields): Record<string, string> {
+	const result: Record<string, string> = {}
+	if (data.known) {
+		for (const [key, value] of Object.entries(data.known)) {
+			if (value != null) result[key] = value
+		}
+	}
+	if (data.custom) {
+		for (const [key, value] of Object.entries(data.custom)) {
+			if (value != null) result[key] = value
+		}
+	}
+	return result
+}
+
+const liveProperties = ref<Record<string, string>>({})
+const originalProperties = ref<Record<string, string>>({})
+
+function syncFormFromData() {
+	if (!propsData.value) return
+	const flat = flattenProperties(propsData.value)
+	liveProperties.value = { ...flat }
+	originalProperties.value = { ...flat }
+	const sp = flat.spawn_protection
+	if (sp && sp !== '0') {
+		previousSpawnProtection = sp
+	}
+}
+
+const hasNoProperties = computed(() => Object.keys(liveProperties.value).length === 0)
+
+const hasUnsavedChanges = computed(() =>
+	Object.keys(liveProperties.value).some(
+		(key) => liveProperties.value[key] !== originalProperties.value[key],
+	),
+)
+
+watch(
+	propsData,
+	(newData) => {
+		if (newData && !hasUnsavedChanges.value) {
+			syncFormFromData()
+		}
+	},
+	{ immediate: true },
+)
+
+watch(powerState, () => {
+	queryClient.invalidateQueries({ queryKey: queryKey.value })
+})
+
+let previousSpawnProtection = '16'
+
+const combinedGamemode = computed<CombinedGamemode>({
+	get() {
+		if (liveProperties.value.hardcore === 'true') return 'hardcore'
+		if (liveProperties.value.gamemode === 'creative') return 'creative'
+		return 'survival'
+	},
+	set(value) {
+		if (value === 'hardcore') {
+			liveProperties.value.gamemode = 'survival'
+			liveProperties.value.hardcore = 'true'
+			liveProperties.value.difficulty = 'hard'
+		} else {
+			liveProperties.value.gamemode = value
+			liveProperties.value.hardcore = 'false'
+		}
+	},
+})
+
+const selectedDifficulty = computed({
+	get: () => liveProperties.value.difficulty ?? 'normal',
+	set: (v: string) => {
+		liveProperties.value.difficulty = v
+	},
+})
+
+const whitelistEnabled = computed({
+	get: () => liveProperties.value.white_list === 'true',
+	set: (v: boolean) => {
+		liveProperties.value.white_list = v ? 'true' : 'false'
+		liveProperties.value.enforce_whitelist = v ? 'true' : 'false'
+	},
+})
+
+const spawnProtectionEnabled = computed({
+	get: () => {
+		const val = liveProperties.value.spawn_protection
+		return val !== undefined && val !== '0'
+	},
+	set: (enabled: boolean) => {
+		if (enabled) {
+			liveProperties.value.spawn_protection = previousSpawnProtection || '16'
+		} else {
+			previousSpawnProtection = liveProperties.value.spawn_protection || '16'
+			liveProperties.value.spawn_protection = '0'
+		}
+	},
+})
+
+function buildPatch(): Archon.Content.v1.PatchPropertiesFields {
+	const known: Record<string, string> = {}
+	const custom: Record<string, string> = {}
+
+	for (const key of Object.keys(liveProperties.value)) {
+		if (liveProperties.value[key] === originalProperties.value[key]) continue
+		if (key in KNOWN_PROPERTIES) {
+			known[key] = liveProperties.value[key]
+		} else {
+			custom[key] = liveProperties.value[key]
+		}
+	}
+
+	const patch: Archon.Content.v1.PatchPropertiesFields = {}
+	if (Object.keys(known).length > 0) {
+		patch.known = known as Archon.Content.v1.KnownPropertiesFields
+	}
+	if (Object.keys(custom).length > 0) {
+		patch.custom = custom
+	}
+	return patch
+}
+
+const { mutate: saveProperties, isPending: isUpdating } = useMutation({
+	mutationFn: () =>
+		client.archon.properties_v1.patchProperties(serverId, worldId.value!, buildPatch()),
+	onSuccess: async () => {
+		await queryClient.invalidateQueries({ queryKey: queryKey.value })
+		syncFormFromData()
+		addNotification({
+			type: 'success',
+			title: 'Server properties updated',
+			text: 'Your server properties were successfully changed.',
+		})
+	},
+	onError: (error) => {
+		addNotification({
+			type: 'error',
+			title: 'Failed to update server properties',
+			text: error instanceof Error ? error.message : 'An error occurred.',
+		})
+	},
+})
+
+function resetProperties() {
+	syncFormFromData()
+}
+
+const advancedGroupedProperties = computed(() =>
+	ADVANCED_GROUPS.map((group) => ({
+		label: group.label,
+		properties: group.keys.filter((key) => key in liveProperties.value),
+	})).filter((g) => g.properties.length > 0),
+)
+
+const fuse = computed(() => {
+	const entries = Object.entries(liveProperties.value).map(([key, value]) => ({
+		key,
+		value: String(value),
+	}))
+	return new Fuse(entries, { keys: ['key', 'value'], threshold: 0.2 })
+})
+
+const filteredProperties = computed(() => {
+	if (!searchInput.value?.trim()) return liveProperties.value
+	const results = fuse.value.search(searchInput.value)
+	return Object.fromEntries(results.map(({ item }) => [item.key, liveProperties.value[item.key]]))
+})
+
+const isSearchActive = computed(() => !!searchInput.value?.trim())
+const hasNoResults = computed(
+	() => isSearchActive.value && Object.keys(filteredProperties.value).length === 0,
+)
+
+function isPropertyVisible(key: string): boolean {
+	if (!isSearchActive.value) return true
+	return key in filteredProperties.value
+}
+
+function hasVisibleProperties(group: { properties: string[] }): boolean {
+	return group.properties.some((key) => isPropertyVisible(key))
+}
+
+const hasVisibleAdvancedProperties = computed(() =>
+	advancedGroupedProperties.value.some((group) => hasVisibleProperties(group)),
+)
+
+function formatPropertyName(name: string): string {
+	return name
+		.split('_')
+		.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+		.join(' ')
+}
+</script>
diff --git a/packages/ui/src/layouts/shared/server-settings/providers/index.ts b/packages/ui/src/layouts/shared/server-settings/providers/index.ts
new file mode 100644
index 0000000000..5b5bed990a
--- /dev/null
+++ b/packages/ui/src/layouts/shared/server-settings/providers/index.ts
@@ -0,0 +1 @@
+export * from './server-settings'
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
new file mode 100644
index 0000000000..e5bb553ada
--- /dev/null
+++ b/packages/ui/src/layouts/shared/server-settings/providers/server-settings.ts
@@ -0,0 +1,21 @@
+import type { Ref } from 'vue'
+
+import { createContext } from '#ui/providers/create-context'
+
+export interface ServerSettingsBrowseModpacksArgs {
+	serverId: string
+	worldId: string | null
+	from: 'reset-server'
+}
+
+export interface ServerSettingsContext {
+	isApp: Ref<boolean>
+	currentUserId: Ref<string | null>
+	currentUserRole: Ref<string | null>
+	browseModpacks: (args: ServerSettingsBrowseModpacksArgs) => void | Promise<void>
+}
+
+export const [injectServerSettings, provideServerSettings] = createContext<ServerSettingsContext>(
+	'ServerSettings',
+	'serverSettingsContext',
+)
diff --git a/packages/ui/src/layouts/shared/server-settings/tabs.ts b/packages/ui/src/layouts/shared/server-settings/tabs.ts
new file mode 100644
index 0000000000..82427d4288
--- /dev/null
+++ b/packages/ui/src/layouts/shared/server-settings/tabs.ts
@@ -0,0 +1,98 @@
+import type { Archon } from '@modrinth/api-client'
+import {
+	CardIcon,
+	ListIcon,
+	ModrinthIcon,
+	SettingsIcon,
+	TextQuoteIcon,
+	VersionIcon,
+	WrenchIcon,
+} from '@modrinth/assets'
+import type { Component } from 'vue'
+
+export type ServerSettingsTabId =
+	| 'general'
+	| 'installation'
+	| 'network'
+	| 'properties'
+	| 'advanced'
+	| 'billing'
+	| 'admin-billing'
+
+export interface ServerSettingsTabContext {
+	serverId: string
+	ownerId: string
+	serverStatus?: Archon.Servers.v0.Status | null
+	isOwner: boolean
+	isAdmin: boolean
+}
+
+export interface ServerSettingsTabDefinition {
+	id: ServerSettingsTabId
+	label: string
+	icon: Component
+	href: (ctx: ServerSettingsTabContext) => string
+	external?: boolean
+	shown?: (ctx: ServerSettingsTabContext) => boolean
+}
+
+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',
+		label: 'Billing',
+		icon: CardIcon,
+		href: ({ serverId }) => `/settings/billing#server-${serverId}`,
+		external: true,
+		shown: ({ isOwner }) => isOwner,
+	},
+	{
+		id: 'admin-billing',
+		label: 'Admin Billing',
+		icon: ModrinthIcon,
+		href: ({ ownerId }) => `/admin/billing/${ownerId}`,
+		external: true,
+		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/index.vue b/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
index 45221b3d2d..0752d7df29 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
@@ -1,18 +1,40 @@
 <template>
 	<div
 		data-pyro-server-list-root
-		class="experimental-styles-within relative mx-auto mb-6 flex min-h-screen w-full max-w-[1280px] flex-col px-6"
+		class="experimental-styles-within relative mx-auto mb-6 flex w-full flex-col p-6"
+		:class="serverList.length ? 'min-h-screen' : 'min-h-[calc(100vh-4.5rem)]'"
 	>
-		<ServersUpgradeModalWrapper
-			v-if="isNuxt"
-			ref="upgradeModal"
-			:stripe-publishable-key
-			:site-url
-			:products
+		<ServersGuestPlanModal
+			ref="guestPlanModal"
+			:available-products="pyroProducts"
+			:currency="selectedCurrency"
+			:logged-in="loggedIn"
+			@continue="handleGuestPlanContinue"
 		/>
+		<ModrinthServersPurchaseModal
+			v-if="customer && paymentMethods && regions"
+			ref="purchaseModal"
+			:publishable-key="props.stripePublishableKey"
+			:initiate-payment="
+				async (body) => await client.labrinth.billing_internal.initiatePayment(body)
+			"
+			:available-products="pyroProducts"
+			:on-error="handleError"
+			:customer="customer"
+			:payment-methods="paymentMethods"
+			:currency="selectedCurrency"
+			:return-url="`${props.siteUrl}/hosting/manage`"
+			:pings="regionPings"
+			:regions="regions"
+			:refresh-payment-methods="fetchPaymentData"
+			:fetch-stock="fetchStock"
+			:affiliate-code="affiliateCode"
+			plan-stage
+		/>
+		<ResubscribeModal ref="resubscribeModal" @resubscribe="handleResubscribeConfirm" />
 
 		<div
-			v-if="hasError || fetchError"
+			v-if="hasError"
 			class="mx-auto flex h-full min-h-[calc(100vh-4rem)] flex-col items-center justify-center gap-4 text-left"
 		>
 			<div class="flex max-w-lg flex-col items-center rounded-3xl bg-bg-raised p-6 shadow-xl">
@@ -21,28 +43,24 @@
 						<div class="grid place-content-center rounded-full bg-bg-blue p-4">
 							<HammerIcon class="size-12 text-blue" />
 						</div>
-						<h1 class="m-0 w-fit text-3xl font-bold">Servers could not be loaded</h1>
+						<h1 class="m-0 w-fit text-3xl font-bold">{{ formatMessage(messages.errorTitle) }}</h1>
 					</div>
-					<p class="text-lg text-secondary">We may have temporary issues with our servers.</p>
+					<p class="text-lg text-secondary">{{ formatMessage(messages.errorDescription) }}</p>
 					<ul class="m-0 list-disc space-y-4 p-0 pl-4 text-left text-sm leading-[170%]">
+						<li>{{ formatMessage(messages.errorAlertNotice) }}</li>
 						<li>
-							Our systems automatically alert our team when there's an issue. We are already working
-							on getting them back online.
-						</li>
-						<li>
-							If you recently purchased your Modrinth Hosting server, it is currently in a queue and
-							will appear here as soon as it's ready. <br />
-							<span class="font-medium text-contrast"
-								>Do not attempt to purchase a new server.</span
-							>
-						</li>
-						<li>
-							If you require personalized support regarding the status of your server, please
-							contact Modrinth Support.
+							<IntlFormatted :message-id="messages.errorQueueNotice">
+								<template #warning="{ children }">
+									<span class="font-medium text-contrast"
+										><component :is="() => children"
+									/></span>
+								</template>
+							</IntlFormatted>
 						</li>
+						<li>{{ formatMessage(messages.errorSupportNotice) }}</li>
 
 						<li v-if="fetchError" class="text-red">
-							<p>Error details:</p>
+							<p>{{ formatMessage(messages.errorDetails) }}</p>
 							<CopyCode
 								:text="(fetchError as ModrinthServersFetchError).message || 'Unknown error'"
 								:copyable="false"
@@ -54,11 +72,11 @@
 				</div>
 				<ButtonStyled size="large" type="standard" color="brand">
 					<AutoLink class="mt-6 !w-full" to="https://support.modrinth.com"
-						>Contact Modrinth Support</AutoLink
+						>{{ formatMessage(messages.contactSupportButton) }}</AutoLink
 					>
 				</ButtonStyled>
 				<ButtonStyled size="large" @click="() => router.go(0)">
-					<button class="mt-3 !w-full">Reload</button>
+					<button class="mt-3 !w-full">{{ formatMessage(messages.reloadButton) }}</button>
 				</ButtonStyled>
 			</div>
 		</div>
@@ -67,7 +85,7 @@
 			<div v-if="isLoading && !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">Loading your servers...</p>
+					<p class="m-0 mt-2 text-secondary">{{ formatMessage(messages.loadingServers) }}</p>
 				</div>
 				<div
 					v-for="i in 3"
@@ -85,27 +103,21 @@
 			<div
 				v-else-if="serverList.length === 0 && !isPollingForNewServers"
 				key="empty"
-				class="flex h-full flex-col items-center justify-center gap-8"
+				class="flex h-full flex-col items-center justify-center gap-8 grow max-h-[1100px]"
 			>
-				<img
-					src="https://cdn.modrinth.com/servers/excitement.webp"
-					alt=""
-					class="max-w-[360px]"
-					style="
-						mask-image: radial-gradient(97% 77% at 50% 25%, #d9d9d9 0, hsla(0, 0%, 45%, 0) 100%);
-					"
+				<ServerListEmpty
+					:logged-in="loggedIn"
+					@click-new-server="openPurchaseModal"
+					@click-sign-in="handleSignIn"
 				/>
-				<h1 class="m-0 text-contrast">You don't have any servers yet!</h1>
-				<p class="m-0">Modrinth Hosting is a new way to play modded Minecraft with your friends.</p>
-				<ButtonStyled size="large" type="standard" color="brand">
-					<AutoLink to="/servers#plan">Create a server</AutoLink>
-				</ButtonStyled>
 			</div>
 
 			<div v-else key="list">
-				<div class="relative flex h-fit w-full flex-col items-center justify-between md:flex-row">
-					<h1 class="w-full text-4xl font-bold text-contrast">Servers</h1>
-					<div class="mb-4 flex w-full flex-row items-center justify-end gap-2 md:mb-0 md:gap-4">
+				<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>
+					<div class="flex w-full flex-row items-center justify-end gap-2 md:mb-0">
 						<StyledInput
 							id="search"
 							v-model="searchInput"
@@ -113,14 +125,18 @@
 							type="search"
 							name="search"
 							autocomplete="off"
-							placeholder="Search servers..."
+							:placeholder="formatMessage(messages.searchPlaceholder, { count: filteredData.length })"
 							wrapper-class="w-full md:w-72"
 						/>
-						<ButtonStyled v-if="isNuxt" type="standard">
-							<AutoLink :to="{ path: '/servers', hash: '#plan' }">
+						<ButtonStyled type="standard" color="brand">
+							<AutoLink v-if="isNuxt" :to="{ path: '/servers', hash: '#plan' }">
 								<PlusIcon />
-								New server
+								{{ formatMessage(messages.newServerButton) }}
 							</AutoLink>
+							<button v-else @click="openPurchaseModal">
+								<PlusIcon />
+								{{ formatMessage(messages.newServerButton) }}
+							</button>
 						</ButtonStyled>
 					</div>
 				</div>
@@ -138,7 +154,7 @@
 						class="bg-brand/10 my-4 flex items-center justify-center gap-2 rounded-full px-4 py-2 text-sm text-brand"
 					>
 						<LoaderCircleIcon class="size-4 animate-spin" />
-						<span>Checking for new servers...</span>
+						<span>{{ formatMessage(messages.checkingForNewServers) }}</span>
 					</div>
 				</Transition>
 
@@ -152,17 +168,22 @@
 						v-for="server in filteredData.filter((s) => s.is_medal)"
 						:key="server.server_id"
 						v-bind="server"
-						@upgrade="openUpgradeModal(server.server_id)"
+						@upgrade="openPurchaseModal"
 					/>
 					<ServerListing
 						v-for="server in filteredData.filter((s) => !s.is_medal)"
 						:key="server.server_id"
 						v-bind="server"
+						:cancellation-date="serverBillingMap.get(server.server_id)?.cancellationDate"
+						:is-provisioning="serverBillingMap.get(server.server_id)?.isProvisioning"
+						:on-resubscribe="serverBillingMap.get(server.server_id)?.onResubscribe"
+						:on-download-backup="serverBillingMap.get(server.server_id)?.onDownloadBackup"
 					/>
 				</TransitionGroup>
-				<div v-else class="flex h-full items-center justify-center">
+				<div v-else-if="isLoading" class="flex h-full items-center justify-center">
 					<p class="text-contrast"><LoaderCircleIcon class="size-5 animate-spin" /></p>
 				</div>
+				<div v-else>{{ formatMessage(messages.noServersFound) }}</div>
 			</div>
 		</Transition>
 	</div>
@@ -171,32 +192,133 @@
 <script setup lang="ts">
 import { type Archon, type Labrinth, NuxtModrinthClient } from '@modrinth/api-client'
 import { HammerIcon, LoaderCircleIcon, PlusIcon, SearchIcon } from '@modrinth/assets'
-import { AutoLink, ButtonStyled, CopyCode, injectModrinthClient, StyledInput } from '@modrinth/ui'
+import {
+	AutoLink,
+	ButtonStyled,
+	CopyCode,
+	defineMessages,
+	injectAuth,
+	injectModrinthClient,
+	injectNotificationManager,
+	IntlFormatted,
+	ModrinthServersPurchaseModal,
+	ResubscribeModal,
+	ServerListEmpty,
+	ServersGuestPlanModal,
+	StyledInput,
+	useServerBackupDownload,
+	useVIntl,
+} from '@modrinth/ui'
 import type { ModrinthServersFetchError } from '@modrinth/utils'
-import { useQuery } from '@tanstack/vue-query'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
+import { useIntervalFn } from '@vueuse/core'
 import dayjs from 'dayjs'
 import Fuse from 'fuse.js'
-import type { ComponentPublicInstance } from 'vue'
+import type Stripe from 'stripe'
 import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
-import ServersUpgradeModalWrapper from '#ui/components/billing/ServersUpgradeModalWrapper.vue'
 import MedalServerListing from '#ui/components/servers/marketing/MedalServerListing.vue'
 import ServerListing from '#ui/components/servers/ServerListing.vue'
+import { createHostingPurchaseIntentContext, provideHostingPurchaseIntent } from '#ui/providers'
 
-defineProps<{
-	stripePublishableKey?: string
-	siteUrl?: string
-	products?: Labrinth.Billing.Internal.Product[]
+const props = defineProps<{
+	stripePublishableKey: string
+	siteUrl: string
+	products: Labrinth.Billing.Internal.Product[]
 }>()
 
 const router = useRouter()
 const route = useRoute()
+const auth = injectAuth()
 const client = injectModrinthClient()
+const loggedIn = computed(() => !!auth.user.value)
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	errorTitle: { id: 'servers.manage.error.title', defaultMessage: 'Servers could not be loaded' },
+	errorDescription: {
+		id: 'servers.manage.error.description',
+		defaultMessage: 'We may have temporary issues with our servers.',
+	},
+	errorAlertNotice: {
+		id: 'servers.manage.error.alert-notice',
+		defaultMessage:
+			"Our systems automatically alert our team when there's an issue. We are already working on getting them back online.",
+	},
+	errorQueueNotice: {
+		id: 'servers.manage.error.queue-notice',
+		defaultMessage:
+			"If you recently purchased your Modrinth Hosting server, it is currently in a queue and will appear here as soon as it's ready. <warning>Do not attempt to purchase a new server.</warning>",
+	},
+	errorSupportNotice: {
+		id: 'servers.manage.error.support-notice',
+		defaultMessage:
+			'If you require personalized support regarding the status of your server, please contact Modrinth Support.',
+	},
+	errorDetails: { id: 'servers.manage.error.details', defaultMessage: 'Error details:' },
+	contactSupportButton: {
+		id: 'servers.manage.contact-support-button',
+		defaultMessage: 'Contact Modrinth Support',
+	},
+	reloadButton: { id: 'servers.manage.reload-button', defaultMessage: 'Reload' },
+	loadingServers: {
+		id: 'servers.manage.loading-servers',
+		defaultMessage: 'Loading your servers...',
+	},
+	serversTitle: { id: 'servers.manage.servers-title', defaultMessage: 'Servers' },
+	searchPlaceholder: {
+		id: 'servers.manage.search-placeholder',
+		defaultMessage: 'Search {count} {count, plural, one {server} other {servers}}...',
+	},
+	newServerButton: { id: 'servers.manage.new-server-button', defaultMessage: 'New server' },
+	checkingForNewServers: {
+		id: 'servers.manage.checking-for-new-servers',
+		defaultMessage: 'Checking for new servers...',
+	},
+	noServersFound: { id: 'servers.manage.no-servers-found', defaultMessage: 'No servers found.' },
+	handleErrorTitle: {
+		id: 'servers.manage.handle-error.title',
+		defaultMessage: 'An error occurred',
+	},
+	purchaseUnavailableTitle: {
+		id: 'servers.manage.purchase-unavailable.title',
+		defaultMessage: 'Purchase unavailable',
+	},
+	purchaseUnavailableText: {
+		id: 'servers.manage.purchase-unavailable.text',
+		defaultMessage:
+			'Payment information is still loading. Opening checkout as soon as it is ready.',
+	},
+	resubscribeSubmittedTitle: {
+		id: 'servers.manage.resubscribe-submitted.title',
+		defaultMessage: 'Resubscription request submitted',
+	},
+	resubscribeSubmittedText: {
+		id: 'servers.manage.resubscribe-submitted.text',
+		defaultMessage:
+			'If the server is currently cancelled, it may take up to 10 minutes for another charge attempt to be made.',
+	},
+	resubscribeSuccessTitle: {
+		id: 'servers.manage.resubscribe-success.title',
+		defaultMessage: 'Success',
+	},
+	resubscribeSuccessText: {
+		id: 'servers.manage.resubscribe-success.text',
+		defaultMessage: 'Server subscription resubscribed successfully',
+	},
+	resubscribeErrorTitle: {
+		id: 'servers.manage.resubscribe-error.title',
+		defaultMessage: 'Error resubscribing',
+	},
+	resubscribeErrorText: {
+		id: 'servers.manage.resubscribe-error.text',
+		defaultMessage: 'An error occurred while resubscribing to your Modrinth server.',
+	},
+})
 
 const isNuxt = computed(() => client instanceof NuxtModrinthClient)
 
-const hasError = ref(false)
 const isPollingForNewServers = ref(false)
 const pollingState = ref({
 	enabled: false,
@@ -204,6 +326,160 @@ const pollingState = ref({
 	initialServers: [] as Archon.Servers.v0.Server[],
 })
 
+const guestPlanModal = ref<InstanceType<typeof ServersGuestPlanModal> | null>(null)
+const purchaseModal = ref<InstanceType<typeof ModrinthServersPurchaseModal> | null>(null)
+const resubscribeModal = ref<InstanceType<typeof ResubscribeModal> | null>(null)
+const affiliateCode = ref<string | null>(null)
+const selectedCurrency = ref<string>('USD')
+const regionPings = ref<
+	{
+		region: string
+		ping: number
+	}[]
+>([])
+
+const pyroProducts = computed(() => {
+	return [...props.products]
+		.filter((p) => p?.metadata?.type === 'pyro' || p?.metadata?.type === 'medal')
+		.sort((a, b) => {
+			const aRam =
+				a?.metadata?.type === 'pyro' || a?.metadata?.type === 'medal' ? a.metadata.ram : 0
+			const bRam =
+				b?.metadata?.type === 'pyro' || b?.metadata?.type === 'medal' ? b.metadata.ram : 0
+			return aRam - bRam
+		})
+})
+
+const {
+	data: customer,
+	refetch: refetchCustomer,
+	isLoading: customerLoading,
+} = useQuery({
+	queryKey: ['billing', 'customer'],
+	queryFn: () => client.labrinth.billing_internal.getCustomer() as Promise<Stripe.Customer>,
+	enabled: loggedIn,
+})
+
+const {
+	data: paymentMethods,
+	refetch: refetchPaymentMethods,
+	isLoading: paymentMethodsLoading,
+} = useQuery({
+	queryKey: ['billing', 'payment-methods'],
+	queryFn: () =>
+		client.labrinth.billing_internal.getPaymentMethods() as Promise<Stripe.PaymentMethod[]>,
+	enabled: loggedIn,
+})
+
+const { data: regions, isLoading: regionsLoading } = useQuery({
+	queryKey: ['servers', 'regions'],
+	queryFn: () => client.archon.servers_v1.getRegions(),
+	enabled: loggedIn,
+})
+
+watch(
+	regions,
+	(newRegions) => {
+		regionPings.value = []
+		if (newRegions) {
+			newRegions.forEach((region) => {
+				runPingTest(region)
+			})
+		}
+	},
+	{ immediate: true },
+)
+
+async function fetchPaymentData() {
+	await Promise.all([refetchCustomer(), refetchPaymentMethods()])
+}
+
+async function fetchStock(
+	region: Archon.Servers.v1.Region,
+	request: Archon.Servers.v0.StockRequest,
+): Promise<number> {
+	const result = await client.archon.servers_v0.checkStock(region.shortcode, request)
+	return result.available
+}
+
+const PING_COUNT = 20
+const PING_INTERVAL = 200
+const MAX_PING_TIME = 1000
+
+function runPingTest(region: Archon.Servers.v1.Region, index = 1) {
+	if (index > 10) {
+		regionPings.value = regionPings.value.filter((entry) => entry.region !== region.shortcode)
+		regionPings.value.push({
+			region: region.shortcode,
+			ping: -1,
+		})
+		return
+	}
+
+	const wsUrl = `wss://${region.shortcode}${index}.${region.zone}/pingtest`
+	try {
+		const socket = new WebSocket(wsUrl)
+		const pings: number[] = []
+		let finalized = false
+
+		const finalize = (ping: number) => {
+			if (finalized) return
+			finalized = true
+			clearTimeout(connectTimeout)
+			regionPings.value = regionPings.value.filter((entry) => entry.region !== region.shortcode)
+			regionPings.value.push({
+				region: region.shortcode,
+				ping,
+			})
+			socket.close()
+		}
+
+		const retryNext = () => {
+			if (finalized) return
+			finalized = true
+			clearTimeout(connectTimeout)
+			socket.close()
+			runPingTest(region, index + 1)
+		}
+
+		// Prevent hangs where the socket never opens or errors.
+		const connectTimeout = setTimeout(() => {
+			retryNext()
+		}, 3000)
+
+		socket.onopen = () => {
+			clearTimeout(connectTimeout)
+
+			for (let i = 0; i < PING_COUNT; i++) {
+				setTimeout(() => {
+					socket.send(String(performance.now()))
+				}, i * PING_INTERVAL)
+			}
+			setTimeout(
+				() => {
+					const median =
+						pings.length > 0
+							? Math.round([...pings].sort((a, b) => a - b)[Math.floor(pings.length / 2)])
+							: -1
+					finalize(median)
+				},
+				PING_COUNT * PING_INTERVAL + MAX_PING_TIME,
+			)
+		}
+
+		socket.onmessage = (event) => {
+			const start = Number(event.data)
+			pings.push(performance.now() - start)
+		}
+
+		socket.onerror = () => {
+			retryNext()
+		}
+	} catch {
+		runPingTest(region, index + 1)
+	}
+}
+
 const {
 	data: serverResponse,
 	error: fetchError,
@@ -245,14 +521,13 @@ const {
 		return response
 	},
 	refetchInterval: computed(() => (pollingState.value.enabled ? 5000 : false)),
+	enabled: loggedIn,
 })
 
-watch([fetchError, serverResponse], ([error, response]) => {
-	hasError.value = !!error || !response
-})
+const hasError = computed(() => loggedIn.value && !!fetchError.value)
 
 const serverList = computed<Archon.Servers.v0.Server[]>(() => {
-	if (!serverResponse.value) return []
+	if (!loggedIn.value || !serverResponse.value) return []
 	return serverResponse.value.servers
 })
 
@@ -273,13 +548,23 @@ function introToTop(array: Archon.Servers.v0.Server[]): Archon.Servers.v0.Server
 	})
 }
 
+// files expire 30 days after cancellation
+function filesExpired(server: Archon.Servers.v0.Server): boolean {
+	if (server.status !== 'suspended' || server.suspension_reason !== 'cancelled') return false
+	const cancellationDate = serverBillingMap.value.get(server.server_id)?.cancellationDate
+	if (!cancellationDate) return false
+	const cancellation = new Date(cancellationDate)
+	const thirtyDaysLater = new Date(cancellation.getTime() + 30 * 24 * 60 * 60 * 1000)
+	return new Date() > thirtyDaysLater
+}
+
 const filteredData = computed<Archon.Servers.v0.Server[]>(() => {
-	if (!searchInput.value.trim()) {
-		return introToTop(serverList.value)
-	}
-	return fuse.value
-		? introToTop(fuse.value.search(searchInput.value).map((result) => result.item))
-		: []
+	const base = !searchInput.value.trim()
+		? introToTop(serverList.value)
+		: fuse.value
+			? introToTop(fuse.value.search(searchInput.value).map((result) => result.item))
+			: []
+	return base.filter((server) => !filesExpired(server))
 })
 
 // Start polling only after initial data is available so the baseline is correct
@@ -299,14 +584,295 @@ watch(serverResponse, (response) => {
 	}
 })
 
-type ServersUpgradeModalWrapperRef = ComponentPublicInstance<{
-	open: (id: string) => void | Promise<void>
-}>
+const { addNotification } = injectNotificationManager()
+const queryClient = useQueryClient()
+const { getLatestBackupDownload } = useServerBackupDownload()
 
-const upgradeModal = ref<ServersUpgradeModalWrapperRef | null>(null)
-function openUpgradeModal(serverId: string) {
-	upgradeModal.value?.open(serverId)
+watch(
+	() => auth.user.value,
+	(user, previousUser) => {
+		if (user || !previousUser) return
+		isPollingForNewServers.value = false
+		pollingState.value = {
+			enabled: false,
+			count: 0,
+			initialServers: [],
+		}
+		void Promise.all([
+			queryClient.resetQueries({ queryKey: ['billing'] }),
+			queryClient.resetQueries({ queryKey: ['servers'] }),
+		])
+	},
+)
+
+const canOpenPurchaseModal = computed(() => {
+	return (
+		Boolean(props.stripePublishableKey) &&
+		Boolean(customer.value) &&
+		paymentMethods.value !== undefined &&
+		Boolean(regions.value) &&
+		!customerLoading.value &&
+		!paymentMethodsLoading.value &&
+		!regionsLoading.value
+	)
+})
+
+function handleError(err: unknown) {
+	const error = err as Error & { data?: { description?: string } }
+	addNotification({
+		title: formatMessage(messages.handleErrorTitle),
+		type: 'error',
+		text: error?.message ?? error?.data?.description ?? String(err),
+	})
+}
+
+function handleSignIn() {
+	void auth.requestSignIn('/hosting/manage')
+}
+
+const hostingPurchaseIntent = createHostingPurchaseIntentContext({
+	authRequestSignIn: auth.requestSignIn,
+	signInRedirectPath: '/hosting/manage',
+	intentSource: 'hosting-manage',
+	loggedIn,
+	availableProducts: pyroProducts,
+	canOpenCheckout: canOpenPurchaseModal,
+	guestPlanModal,
+	checkoutModal: purchaseModal,
+	onCheckoutPending: () => {
+		addNotification({
+			title: formatMessage(messages.purchaseUnavailableTitle),
+			text: formatMessage(messages.purchaseUnavailableText),
+			type: 'info',
+		})
+	},
+})
+provideHostingPurchaseIntent(hostingPurchaseIntent)
+
+const { openPurchaseModal, handleGuestPlanContinue } = hostingPurchaseIntent
+
+const { data: subscriptions } = useQuery({
+	queryKey: ['billing', 'subscriptions'],
+	queryFn: () => client.labrinth.billing_internal.getSubscriptions(),
+	enabled: loggedIn,
+})
+
+const { data: charges } = useQuery({
+	queryKey: ['billing', 'payments'],
+	queryFn: () => client.labrinth.billing_internal.getPayments(),
+	enabled: loggedIn,
+})
+
+const CHARGE_POLL_INTERVAL_MS = 20_000
+
+const hasProvisioningSubscription = computed(() => {
+	if (!subscriptions.value || !charges.value) return false
+	return subscriptions.value
+		.filter((s) => s?.metadata?.type === 'pyro')
+		.some((sub) => {
+			if (sub.status !== 'unprovisioned') return false
+			const charge = charges.value?.find((c) => c.subscription_id === sub.id)
+			return charge?.status === 'processing' || charge?.status === 'open'
+		})
+})
+
+const { pause: pauseChargePoll, resume: resumeChargePoll } = useIntervalFn(
+	() => {
+		queryClient.invalidateQueries({ queryKey: ['billing', 'payments'] })
+		queryClient.invalidateQueries({ queryKey: ['billing', 'subscriptions'] })
+		queryClient.invalidateQueries({ queryKey: ['servers'] })
+	},
+	CHARGE_POLL_INTERVAL_MS,
+	{ immediate: false },
+)
+
+watch(
+	hasProvisioningSubscription,
+	(isProvisioning) => {
+		if (isProvisioning) {
+			resumeChargePoll()
+		} else {
+			pauseChargePoll()
+		}
+	},
+	{ immediate: true },
+)
+
+const { data: serverFullList } = useQuery({
+	queryKey: ['servers', 'v1'],
+	queryFn: () => client.archon.servers_v1.list(),
+	enabled: loggedIn,
+})
+
+type ServerBillingInfo = {
+	cancellationDate?: string | null
+	isProvisioning?: boolean
+	onResubscribe?: () => void
+	onDownloadBackup?: (() => void) | null
+}
+
+type ResubscribeRequest = {
+	subscriptionId: string
+	wasSuspended: boolean
+}
+
+function getProductFromPriceId(priceId: string | null | undefined) {
+	if (!priceId) return null
+
+	return (
+		pyroProducts.value.find((product) => product.prices.some((price) => price.id === priceId)) ??
+		null
+	)
 }
+
+function getPlanName(product: Labrinth.Billing.Internal.Product | null): string {
+	if (!product) return 'Medium plan'
+	if (product.metadata.type !== 'pyro' && product.metadata.type !== 'medal') return 'Medium plan'
+
+	switch (product.metadata.ram) {
+		case 4096:
+			return 'Small plan'
+		case 6144:
+			return 'Medium plan'
+		case 8192:
+			return 'Large plan'
+		default:
+			return 'Custom plan'
+	}
+}
+
+function getRamGb(product: Labrinth.Billing.Internal.Product | null): number | undefined {
+	if (!product) return undefined
+	if (product.metadata.type !== 'pyro' && product.metadata.type !== 'medal') return undefined
+
+	return product.metadata.ram / 1024
+}
+
+function getStorageGb(product: Labrinth.Billing.Internal.Product | null): number | undefined {
+	if (!product) return undefined
+	if (product.metadata.type !== 'pyro' && product.metadata.type !== 'medal') return undefined
+
+	return product.metadata.storage / 1024
+}
+
+function getSharedCpus(product: Labrinth.Billing.Internal.Product | null): number | undefined {
+	if (!product) return undefined
+	if (product.metadata.type !== 'pyro' && product.metadata.type !== 'medal') return undefined
+
+	return product.metadata.cpu / 2
+}
+
+function getRecurringPrice(
+	product: Labrinth.Billing.Internal.Product | null,
+	interval: Labrinth.Billing.Internal.PriceDuration,
+	preferredCurrency?: string,
+): { amount: number; currencyCode: string } | null {
+	if (!product) return null
+
+	const recurringPrices = product.prices.filter((price) => price.prices.type === 'recurring')
+	const preferredPrice = preferredCurrency
+		? recurringPrices.find((price) => price.currency_code === preferredCurrency)
+		: undefined
+	const usdPrice = recurringPrices.find((price) => price.currency_code === 'USD')
+	const selectedPrice = preferredPrice ?? usdPrice ?? recurringPrices[0]
+
+	if (!selectedPrice || selectedPrice.prices.type !== 'recurring') return null
+
+	return {
+		amount: selectedPrice.prices.intervals[interval],
+		currencyCode: selectedPrice.currency_code,
+	}
+}
+
+function openResubscribeModal(
+	serverId: string,
+	subscription: Labrinth.Billing.Internal.UserSubscription,
+	charge?: Labrinth.Billing.Internal.Charge | null,
+) {
+	const displayInterval = charge?.subscription_interval ?? subscription.interval
+	const displayPriceId = charge?.price_id ?? subscription.price_id
+	const product = getProductFromPriceId(displayPriceId)
+	const fallbackPrice = getRecurringPrice(product, displayInterval, charge?.currency_code)
+
+	resubscribeModal.value?.show({
+		subscriptionId: subscription.id,
+		wasSuspended: !!charge?.due && dayjs(charge.due).isBefore(dayjs()),
+		serverName:
+			serverList.value.find((server) => server.server_id === serverId)?.name ?? 'this server',
+		planName: getPlanName(product),
+		ramGb: getRamGb(product),
+		storageGb: getStorageGb(product),
+		sharedCpus: getSharedCpus(product),
+		priceCents: charge?.amount ?? fallbackPrice?.amount,
+		currencyCode: charge?.currency_code ?? fallbackPrice?.currencyCode,
+		interval: displayInterval,
+		nextChargeDate: charge?.due,
+	})
+}
+
+async function handleResubscribeConfirm({ subscriptionId, wasSuspended }: ResubscribeRequest) {
+	try {
+		await client.labrinth.billing_internal.editSubscription(subscriptionId, {
+			cancelled: false,
+		})
+		await Promise.all([
+			queryClient.invalidateQueries({ queryKey: ['billing'] }),
+			queryClient.invalidateQueries({ queryKey: ['servers'] }),
+		])
+		if (wasSuspended) {
+			addNotification({
+				title: formatMessage(messages.resubscribeSubmittedTitle),
+				text: formatMessage(messages.resubscribeSubmittedText),
+				type: 'success',
+			})
+		} else {
+			addNotification({
+				title: formatMessage(messages.resubscribeSuccessTitle),
+				text: formatMessage(messages.resubscribeSuccessText),
+				type: 'success',
+			})
+		}
+	} catch {
+		addNotification({
+			title: formatMessage(messages.resubscribeErrorTitle),
+			text: formatMessage(messages.resubscribeErrorText),
+			type: 'error',
+		})
+	}
+}
+
+const serverBillingMap = computed(() => {
+	const map = new Map<string, ServerBillingInfo>()
+	if (!subscriptions.value || !charges.value) return map
+
+	const pyroSubs = subscriptions.value.filter((s) => s?.metadata?.type === 'pyro')
+	for (const sub of pyroSubs) {
+		const serverId = (sub.metadata as { id?: string })?.id
+		if (!serverId) continue
+
+		const charge = charges.value.find(
+			(c) => c.subscription_id === sub.id && c.status !== 'succeeded',
+		)
+
+		const info: ServerBillingInfo = {
+			isProvisioning:
+				sub.status === 'unprovisioned' &&
+				(charge?.status === 'processing' || charge?.status === 'open'),
+		}
+
+		info.onDownloadBackup = getLatestBackupDownload(serverId, serverFullList.value)
+
+		if (charge?.status === 'cancelled') {
+			info.cancellationDate = charge.due
+
+			info.onResubscribe = () => openResubscribeModal(serverId, sub, charge)
+		}
+
+		map.set(serverId, info)
+	}
+
+	return map
+})
 </script>
 
 <style scoped>
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index 447fc9a42e..7294c933e8 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -41,6 +41,54 @@
   "badge.new": {
     "defaultMessage": "New"
   },
+  "billing.resubscribe-modal.cancel": {
+    "defaultMessage": "Cancel"
+  },
+  "billing.resubscribe-modal.cpus": {
+    "defaultMessage": "{sharedCpus} Shared CPUs"
+  },
+  "billing.resubscribe-modal.description": {
+    "defaultMessage": "You are about to resubscribe to <server-name>{serverName}</server-name>. Your subscription will be reactivated and your server will continue running without interruption."
+  },
+  "billing.resubscribe-modal.error.text": {
+    "defaultMessage": "Cannot resubscribe, failed to load subscription details."
+  },
+  "billing.resubscribe-modal.error.title": {
+    "defaultMessage": "Error"
+  },
+  "billing.resubscribe-modal.failed-load": {
+    "defaultMessage": "Failed to load subscription details."
+  },
+  "billing.resubscribe-modal.interval.five-days": {
+    "defaultMessage": "/5 days"
+  },
+  "billing.resubscribe-modal.interval.monthly": {
+    "defaultMessage": "/month"
+  },
+  "billing.resubscribe-modal.interval.quarterly": {
+    "defaultMessage": "/quarter"
+  },
+  "billing.resubscribe-modal.interval.yearly": {
+    "defaultMessage": "/year"
+  },
+  "billing.resubscribe-modal.next-charge": {
+    "defaultMessage": "Your next charge will be on <charge-date>{date}</charge-date>."
+  },
+  "billing.resubscribe-modal.plan-label": {
+    "defaultMessage": "Plan"
+  },
+  "billing.resubscribe-modal.ram": {
+    "defaultMessage": "{ramGb} GB RAM"
+  },
+  "billing.resubscribe-modal.resubscribe": {
+    "defaultMessage": "Resubscribe"
+  },
+  "billing.resubscribe-modal.storage": {
+    "defaultMessage": "{storageGb} GB Storage"
+  },
+  "billing.resubscribe-modal.title": {
+    "defaultMessage": "Resubscribe to Server"
+  },
   "button.accept": {
     "defaultMessage": "Accept"
   },
@@ -908,6 +956,60 @@
   "hosting.content.failed-to-upload": {
     "defaultMessage": "Failed to upload file"
   },
+  "hosting.loader.failed-to-change-version": {
+    "defaultMessage": "Failed to change modpack version"
+  },
+  "hosting.loader.failed-to-load-versions": {
+    "defaultMessage": "Failed to load versions"
+  },
+  "hosting.loader.failed-to-reinstall": {
+    "defaultMessage": "Failed to reinstall modpack"
+  },
+  "hosting.loader.failed-to-repair": {
+    "defaultMessage": "Failed to repair server"
+  },
+  "hosting.loader.failed-to-reset-to-onboarding": {
+    "defaultMessage": "Failed to reset server to onboarding"
+  },
+  "hosting.loader.failed-to-save-settings": {
+    "defaultMessage": "Failed to save installation settings"
+  },
+  "hosting.loader.failed-to-unlink": {
+    "defaultMessage": "Failed to unlink modpack"
+  },
+  "hosting.loader.loader-version": {
+    "defaultMessage": "{loader, select, null {Loader} other {{loader}}} version"
+  },
+  "hosting.loader.repair-started-text": {
+    "defaultMessage": "Your server installation has been repaired."
+  },
+  "hosting.loader.repair-started-title": {
+    "defaultMessage": "Repair completed"
+  },
+  "hosting.loader.reset-server": {
+    "defaultMessage": "Reset server"
+  },
+  "hosting.loader.reset-server-description": {
+    "defaultMessage": "Removes all data on your server, including your worlds, mods, and configuration files. Backups will remain and can be restored."
+  },
+  "hosting.loader.reset-to-onboarding-button": {
+    "defaultMessage": "Reset to onboarding"
+  },
+  "hosting.loader.reset-to-onboarding-modal-description": {
+    "defaultMessage": "This will send the server back into onboarding so setup can be completed again. Are you sure you want to continue?"
+  },
+  "hosting.loader.reset-to-onboarding-modal-title": {
+    "defaultMessage": "Reset to onboarding"
+  },
+  "hosting.loader.reset-to-onboarding-success-description": {
+    "defaultMessage": "The server has been returned to the onboarding flow."
+  },
+  "hosting.loader.reset-to-onboarding-success-title": {
+    "defaultMessage": "Server reset to onboarding"
+  },
+  "hosting.loader.support-options-title": {
+    "defaultMessage": "Support options"
+  },
   "hosting.specs.burst": {
     "defaultMessage": "Bursts up to {cpus} CPUs"
   },
@@ -2591,6 +2693,210 @@
   "servers.backups.item.restore": {
     "defaultMessage": "Restore"
   },
+  "servers.list-empty.already-have-server-label": {
+    "defaultMessage": "Already have a server?"
+  },
+  "servers.list-empty.learn-more-link": {
+    "defaultMessage": "Learn more about Modrinth Hosting"
+  },
+  "servers.list-empty.modrinth-hosting-label": {
+    "defaultMessage": "Modrinth Hosting"
+  },
+  "servers.list-empty.new-server-button": {
+    "defaultMessage": "New server"
+  },
+  "servers.list-empty.no-servers-description": {
+    "defaultMessage": "Install mods, invite friends, and play together all from the Modrinth App."
+  },
+  "servers.list-empty.no-servers-title": {
+    "defaultMessage": "No servers yet"
+  },
+  "servers.list-empty.one-click-mod-installs-description": {
+    "defaultMessage": "Pick your favourite mods and we handle the rest."
+  },
+  "servers.list-empty.one-click-mod-installs-title": {
+    "defaultMessage": "One-click mod installs"
+  },
+  "servers.list-empty.play-with-friends-description": {
+    "defaultMessage": "Invite friends and get them set up right in the Modrinth App."
+  },
+  "servers.list-empty.play-with-friends-title": {
+    "defaultMessage": "Play with friends"
+  },
+  "servers.list-empty.sign-in-button": {
+    "defaultMessage": "Sign in"
+  },
+  "servers.list-empty.simple-setup-description": {
+    "defaultMessage": "Set up your server just like a single player world."
+  },
+  "servers.list-empty.simple-setup-title": {
+    "defaultMessage": "Simple setup"
+  },
+  "servers.listing.copied-label": {
+    "defaultMessage": "Copied"
+  },
+  "servers.listing.copy-code-tooltip": {
+    "defaultMessage": "Copy code to clipboard"
+  },
+  "servers.listing.copy-id-label": {
+    "defaultMessage": "Copy ID"
+  },
+  "servers.listing.download-latest-backup-tooltip": {
+    "defaultMessage": "Download latest backup"
+  },
+  "servers.listing.manage-billing-label": {
+    "defaultMessage": "Manage billing"
+  },
+  "servers.listing.new-label": {
+    "defaultMessage": "New"
+  },
+  "servers.listing.notice.files-kept-for-download": {
+    "defaultMessage": "Your files will be kept for <days-remaining>{daysRemaining} more {daysRemaining, plural, one {day} other {days} }</days-remaining> and can be downloaded below before they are deleted. "
+  },
+  "servers.listing.notice.files-preserved-after-cancellation": {
+    "defaultMessage": "Your files will be preserved for 30 days after cancellation."
+  },
+  "servers.listing.notice.moderated": {
+    "defaultMessage": "Your server has been suspended by moderation action. "
+  },
+  "servers.listing.notice.pending-change": {
+    "defaultMessage": "Your server will {verb} to the {planSize} Plan on <date>{formattedDate}</date>. "
+  },
+  "servers.listing.notice.provisioning": {
+    "defaultMessage": "Please wait while we set up your server. This can take up to 10 minutes."
+  },
+  "servers.listing.notice.subscription-cancelled": {
+    "defaultMessage": "Your subscription was cancelled."
+  },
+  "servers.listing.notice.subscription-cancelled-on-date": {
+    "defaultMessage": "Your subscription was cancelled on <date>{formattedDate}</date>. "
+  },
+  "servers.listing.notice.subscription-cancelled-payment-failed": {
+    "defaultMessage": "Your subscription was cancelled due to payment failure."
+  },
+  "servers.listing.notice.subscription-cancelled-payment-failed-on-date": {
+    "defaultMessage": "Your subscription was cancelled on <date>{formattedDate}</date> due to payment failure. "
+  },
+  "servers.listing.notice.subscription-set-to-cancel": {
+    "defaultMessage": "Your subscription is set to cancel."
+  },
+  "servers.listing.notice.subscription-set-to-cancel-on-date": {
+    "defaultMessage": "Your subscription is set to cancel on <date>{formattedDate}</date>. "
+  },
+  "servers.listing.notice.suspended": {
+    "defaultMessage": "Your server has been suspended. Please contact Modrinth Support for more information."
+  },
+  "servers.listing.notice.upgrading": {
+    "defaultMessage": "Your server's hardware is currently being upgraded and will be back online shortly."
+  },
+  "servers.listing.resubscribe-label": {
+    "defaultMessage": "Resubscribe"
+  },
+  "servers.listing.server-icon-alt": {
+    "defaultMessage": "Server icon"
+  },
+  "servers.listing.support-label": {
+    "defaultMessage": "Support"
+  },
+  "servers.listing.using-project-label": {
+    "defaultMessage": "Using {projectTitle}"
+  },
+  "servers.manage.checking-for-new-servers": {
+    "defaultMessage": "Checking for new servers..."
+  },
+  "servers.manage.contact-support-button": {
+    "defaultMessage": "Contact Modrinth Support"
+  },
+  "servers.manage.error.alert-notice": {
+    "defaultMessage": "Our systems automatically alert our team when there's an issue. We are already working on getting them back online."
+  },
+  "servers.manage.error.description": {
+    "defaultMessage": "We may have temporary issues with our servers."
+  },
+  "servers.manage.error.details": {
+    "defaultMessage": "Error details:"
+  },
+  "servers.manage.error.queue-notice": {
+    "defaultMessage": "If you recently purchased your Modrinth Hosting server, it is currently in a queue and will appear here as soon as it's ready. <warning>Do not attempt to purchase a new server.</warning>"
+  },
+  "servers.manage.error.support-notice": {
+    "defaultMessage": "If you require personalized support regarding the status of your server, please contact Modrinth Support."
+  },
+  "servers.manage.error.title": {
+    "defaultMessage": "Servers could not be loaded"
+  },
+  "servers.manage.handle-error.title": {
+    "defaultMessage": "An error occurred"
+  },
+  "servers.manage.loading-servers": {
+    "defaultMessage": "Loading your servers..."
+  },
+  "servers.manage.new-server-button": {
+    "defaultMessage": "New server"
+  },
+  "servers.manage.no-servers-found": {
+    "defaultMessage": "No servers found."
+  },
+  "servers.manage.purchase-unavailable.text": {
+    "defaultMessage": "Payment information is still loading. Opening checkout as soon as it is ready."
+  },
+  "servers.manage.purchase-unavailable.title": {
+    "defaultMessage": "Purchase unavailable"
+  },
+  "servers.manage.reload-button": {
+    "defaultMessage": "Reload"
+  },
+  "servers.manage.resubscribe-error.text": {
+    "defaultMessage": "An error occurred while resubscribing to your Modrinth server."
+  },
+  "servers.manage.resubscribe-error.title": {
+    "defaultMessage": "Error resubscribing"
+  },
+  "servers.manage.resubscribe-submitted.text": {
+    "defaultMessage": "If the server is currently cancelled, it may take up to 10 minutes for another charge attempt to be made."
+  },
+  "servers.manage.resubscribe-submitted.title": {
+    "defaultMessage": "Resubscription request submitted"
+  },
+  "servers.manage.resubscribe-success.text": {
+    "defaultMessage": "Server subscription resubscribed successfully"
+  },
+  "servers.manage.resubscribe-success.title": {
+    "defaultMessage": "Success"
+  },
+  "servers.manage.search-placeholder": {
+    "defaultMessage": "Search {count} {count, plural, one {server} other {servers}}..."
+  },
+  "servers.manage.servers-title": {
+    "defaultMessage": "Servers"
+  },
+  "servers.medal-listing.countdown.remaining": {
+    "defaultMessage": "<days-count>{days}</days-count> {days, plural, one {day} other {days}} <hours-count>{hours}</hours-count> {hours, plural, one {hour} other {hours}} <minutes-count>{minutes}</minutes-count> {minutes, plural, one {minute} other {minutes}} <seconds-count>{seconds}</seconds-count> {seconds, plural, one {second} other {seconds}} remaining..."
+  },
+  "servers.medal-listing.new-server-label": {
+    "defaultMessage": "New server"
+  },
+  "servers.medal-listing.notice.medal-trial-ended": {
+    "defaultMessage": "Your Medal server trial has ended and your server has been suspended. Please upgrade to continue using your server."
+  },
+  "servers.medal-listing.notice.suspended": {
+    "defaultMessage": "Your server has been suspended. Please update your billing information or contact Modrinth Support for more information."
+  },
+  "servers.medal-listing.notice.suspended-with-reason": {
+    "defaultMessage": "Your server has been suspended: {reason}. Please update your billing information or contact Modrinth Support for more information."
+  },
+  "servers.medal-listing.notice.upgrading": {
+    "defaultMessage": "Your server's hardware is currently being upgraded and will be back online shortly."
+  },
+  "servers.medal-listing.server-icon-alt": {
+    "defaultMessage": "Server icon"
+  },
+  "servers.medal-listing.upgrade-button": {
+    "defaultMessage": "Upgrade"
+  },
+  "servers.medal-listing.using-project-label": {
+    "defaultMessage": "Using {projectTitle}"
+  },
   "servers.notice.dismiss": {
     "defaultMessage": "Dismiss"
   },
@@ -2627,39 +2933,48 @@
   "servers.purchase.step.payment.title": {
     "defaultMessage": "Payment method"
   },
-  "servers.purchase.step.plan.billed": {
-    "defaultMessage": "billed {interval}"
+  "servers.purchase.step.plan.billing-subtitle": {
+    "defaultMessage": "Available in North America, Europe, and Southeast Asia."
   },
   "servers.purchase.step.plan.custom.desc": {
     "defaultMessage": "Pick a customized plan with just the specs you need."
   },
+  "servers.purchase.step.plan.custom.heading": {
+    "defaultMessage": "Know exactly what you need?"
+  },
   "servers.purchase.step.plan.get-started": {
     "defaultMessage": "Get started"
   },
+  "servers.purchase.step.plan.large": {
+    "defaultMessage": "Large"
+  },
   "servers.purchase.step.plan.large.desc": {
     "defaultMessage": "Ideal for 15–25 players, modpacks, or heavy modding."
   },
+  "servers.purchase.step.plan.medium": {
+    "defaultMessage": "Medium"
+  },
   "servers.purchase.step.plan.medium.desc": {
     "defaultMessage": "Great for 6–15 players and multiple mods."
   },
   "servers.purchase.step.plan.most-popular": {
     "defaultMessage": "Most Popular"
   },
-  "servers.purchase.step.plan.prompt": {
-    "defaultMessage": "Choose a plan"
-  },
   "servers.purchase.step.plan.select": {
     "defaultMessage": "Select Plan"
   },
+  "servers.purchase.step.plan.small": {
+    "defaultMessage": "Small"
+  },
   "servers.purchase.step.plan.small.desc": {
     "defaultMessage": "Perfect for 1–5 friends with a few light mods."
   },
-  "servers.purchase.step.plan.subtitle": {
-    "defaultMessage": "Pick the amount of RAM and specs that fit your needs."
-  },
   "servers.purchase.step.plan.title": {
     "defaultMessage": "Plan"
   },
+  "servers.purchase.step.plan.your-current-plan": {
+    "defaultMessage": "Your current plan"
+  },
   "servers.purchase.step.region.title": {
     "defaultMessage": "Region"
   },
diff --git a/packages/ui/src/providers/hosting-purchase-intent.ts b/packages/ui/src/providers/hosting-purchase-intent.ts
new file mode 100644
index 0000000000..23dad99d1b
--- /dev/null
+++ b/packages/ui/src/providers/hosting-purchase-intent.ts
@@ -0,0 +1,180 @@
+import type { Labrinth } from '@modrinth/api-client'
+import { type Ref, ref, watch } from 'vue'
+
+import { createContext } from '.'
+
+const PURCHASE_INTENT_STORAGE_KEY = 'modrinth:servers-purchase-intent'
+
+export type ServerBillingInterval = 'monthly' | 'quarterly' | 'yearly'
+
+export type PendingPurchaseIntent = {
+	interval: ServerBillingInterval
+	planId: string | null
+	source: string
+	ts: number
+}
+
+export type GuestPlanContinuePayload = {
+	interval: ServerBillingInterval
+	planId: string | null
+}
+
+export type CheckoutModalHandle = {
+	show: (interval: ServerBillingInterval, plan?: Labrinth.Billing.Internal.Product | null) => void
+}
+
+export type GuestPlanModalHandle = {
+	show: (initialInterval?: ServerBillingInterval, initialPlanId?: string | null) => void
+}
+
+export interface HostingPurchaseIntentContext {
+	openPurchaseModal: () => void
+	handleGuestPlanContinue: (payload: GuestPlanContinuePayload) => void
+}
+
+export interface CreateHostingPurchaseIntentContextOptions {
+	authRequestSignIn: (redirectPath: string) => void | Promise<void>
+	signInRedirectPath: string
+	intentSource: string
+	loggedIn: Readonly<Ref<boolean>>
+	availableProducts: Readonly<Ref<Labrinth.Billing.Internal.Product[]>>
+	canOpenCheckout: Readonly<Ref<boolean>>
+	guestPlanModal: Ref<GuestPlanModalHandle | null>
+	checkoutModal: Ref<CheckoutModalHandle | null>
+	onCheckoutPending: () => void
+}
+
+function readPendingPurchaseIntent(): PendingPurchaseIntent | null {
+	if (typeof window === 'undefined') return null
+	const rawIntent = window.sessionStorage.getItem(PURCHASE_INTENT_STORAGE_KEY)
+	if (!rawIntent) return null
+
+	try {
+		const parsedIntent = JSON.parse(rawIntent) as Partial<PendingPurchaseIntent>
+		if (
+			(parsedIntent.interval === 'monthly' ||
+				parsedIntent.interval === 'quarterly' ||
+				parsedIntent.interval === 'yearly') &&
+			(parsedIntent.planId === null || typeof parsedIntent.planId === 'string') &&
+			typeof parsedIntent.source === 'string' &&
+			typeof parsedIntent.ts === 'number'
+		) {
+			return parsedIntent as PendingPurchaseIntent
+		}
+	} catch {
+		return null
+	}
+
+	return null
+}
+
+function writePendingPurchaseIntent(intent: PendingPurchaseIntent) {
+	if (typeof window === 'undefined') return
+	window.sessionStorage.setItem(PURCHASE_INTENT_STORAGE_KEY, JSON.stringify(intent))
+}
+
+function clearPendingPurchaseIntent() {
+	if (typeof window === 'undefined') return
+	window.sessionStorage.removeItem(PURCHASE_INTENT_STORAGE_KEY)
+}
+
+export function createHostingPurchaseIntentContext(
+	options: CreateHostingPurchaseIntentContextOptions,
+): HostingPurchaseIntentContext {
+	const lastSelectedInterval = ref<ServerBillingInterval>('quarterly')
+	const lastSelectedPlanId = ref<string | null | undefined>(undefined)
+	const pendingResumeIntent = ref<PendingPurchaseIntent | null>(null)
+
+	function openCheckoutFromIntent(intent: PendingPurchaseIntent): boolean {
+		if (!options.checkoutModal.value || !options.canOpenCheckout.value) return false
+
+		lastSelectedInterval.value = intent.interval
+		lastSelectedPlanId.value = intent.planId
+
+		const defaultPlan =
+			options.availableProducts.value.find(
+				(product) => product?.metadata?.type === 'pyro' && product.metadata.ram === 6144,
+			) ??
+			options.availableProducts.value.find((product) => product?.metadata?.type === 'pyro') ??
+			options.availableProducts.value[0]
+
+		const selectedPlan =
+			intent.planId === null
+				? null
+				: (options.availableProducts.value.find((product) => product.id === intent.planId) ??
+					defaultPlan)
+
+		options.checkoutModal.value.show(intent.interval, selectedPlan)
+		return true
+	}
+
+	function openPurchaseModal() {
+		options.guestPlanModal.value?.show(lastSelectedInterval.value, lastSelectedPlanId.value)
+	}
+
+	function handleGuestPlanContinue(payload: GuestPlanContinuePayload) {
+		const intent: PendingPurchaseIntent = {
+			interval: payload.interval,
+			planId: payload.planId,
+			source: options.intentSource,
+			ts: Date.now(),
+		}
+
+		lastSelectedInterval.value = payload.interval
+		lastSelectedPlanId.value = payload.planId
+
+		if (!options.loggedIn.value) {
+			writePendingPurchaseIntent(intent)
+			void options.authRequestSignIn(options.signInRedirectPath)
+			return
+		}
+
+		pendingResumeIntent.value = intent
+		if (openCheckoutFromIntent(intent)) {
+			pendingResumeIntent.value = null
+		} else {
+			options.onCheckoutPending()
+		}
+	}
+
+	watch(
+		options.loggedIn,
+		(isLoggedIn) => {
+			if (!isLoggedIn) return
+
+			const pendingIntent = readPendingPurchaseIntent()
+			if (!pendingIntent || pendingIntent.source !== options.intentSource) return
+
+			clearPendingPurchaseIntent()
+			pendingResumeIntent.value = pendingIntent
+			lastSelectedInterval.value = pendingIntent.interval
+			lastSelectedPlanId.value = pendingIntent.planId
+		},
+		{ immediate: true },
+	)
+
+	watch(
+		() =>
+			[
+				options.loggedIn.value,
+				options.canOpenCheckout.value,
+				pendingResumeIntent.value,
+				options.checkoutModal.value,
+			] as const,
+		([isLoggedIn, canOpen, pendingIntent]) => {
+			if (!isLoggedIn || !canOpen || !pendingIntent) return
+			if (openCheckoutFromIntent(pendingIntent)) {
+				pendingResumeIntent.value = null
+			}
+		},
+		{ immediate: true },
+	)
+
+	return {
+		openPurchaseModal,
+		handleGuestPlanContinue,
+	}
+}
+
+export const [injectHostingPurchaseIntent, provideHostingPurchaseIntent] =
+	createContext<HostingPurchaseIntentContext>('HostingManagePage', 'hostingPurchaseIntent')
diff --git a/packages/ui/src/providers/index.ts b/packages/ui/src/providers/index.ts
index 2c45450ba3..e6d7c9726e 100644
--- a/packages/ui/src/providers/index.ts
+++ b/packages/ui/src/providers/index.ts
@@ -4,6 +4,7 @@ export * from './auth'
 export * from './content-manager'
 export { createContext } from './create-context'
 export * from './file-picker'
+export * from './hosting-purchase-intent'
 export * from './i18n'
 export * from './instance-import'
 export * from './modal-behavior'
diff --git a/packages/ui/src/stories/servers/SaveBanner.stories.ts b/packages/ui/src/stories/servers/SaveBanner.stories.ts
new file mode 100644
index 0000000000..4985ef73ac
--- /dev/null
+++ b/packages/ui/src/stories/servers/SaveBanner.stories.ts
@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import SaveBanner from '../../components/servers/SaveBanner.vue'
+
+const meta = {
+	title: 'Servers/SaveBanner',
+	component: SaveBanner,
+	parameters: {
+		layout: 'fullscreen',
+	},
+	args: {
+		isVisible: true,
+		isUpdating: false,
+		restart: false,
+		serverId: 'server_123',
+		save: () => {},
+		reset: () => {},
+	},
+} satisfies Meta<typeof SaveBanner>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const Saving: Story = {
+	args: {
+		isUpdating: true,
+	},
+}
+
+export const WithRestart: Story = {
+	args: {
+		restart: true,
+	},
+}
diff --git a/packages/ui/src/stories/servers/ServerListEmpty.stories.ts b/packages/ui/src/stories/servers/ServerListEmpty.stories.ts
new file mode 100644
index 0000000000..70ce13203c
--- /dev/null
+++ b/packages/ui/src/stories/servers/ServerListEmpty.stories.ts
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import ServerListEmpty from '../../components/servers/server-list-empty/ServerListEmpty.vue'
+
+const meta = {
+	title: 'Servers/ServerListEmpty',
+	component: ServerListEmpty,
+	parameters: {
+		layout: 'centered',
+	},
+} satisfies Meta<typeof ServerListEmpty>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
diff --git a/packages/ui/src/stories/servers/ServerListing.stories.ts b/packages/ui/src/stories/servers/ServerListing.stories.ts
new file mode 100644
index 0000000000..45a1c5ba5e
--- /dev/null
+++ b/packages/ui/src/stories/servers/ServerListing.stories.ts
@@ -0,0 +1,158 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import ServerListing from '../../components/servers/ServerListing.vue'
+
+const baseServer = {
+	server_id: '8759b459-6f9e-49e0-aa70-dfab5b2abb2f',
+	name: 'Survival SMP',
+	status: 'available',
+	game: 'Minecraft',
+	mc_version: '1.21.5',
+	loader: 'Fabric',
+	loader_version: '0.16.14',
+	net: {
+		ip: '203.0.113.42',
+		port: 25565,
+		domain: 'play',
+	},
+} as const
+
+const pendingChange = {
+	planSize: 'Performance 8 GB',
+	cpu: 4,
+	cpuBurst: 6,
+	ramGb: 8,
+	storageGb: 80,
+	date: new Date(Date.now() + 5 * 24 * 60 * 60 * 1000).toISOString(),
+	verb: 'Upgrade',
+} as const
+
+const meta = {
+	title: 'Servers/ServerListing',
+	component: ServerListing,
+	parameters: {
+		layout: 'padded',
+	},
+	decorators: [
+		(story) => ({
+			components: { story },
+			template: '<div style="max-width: 920px;"><story /></div>',
+		}),
+	],
+} satisfies Meta<typeof ServerListing>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		...baseServer,
+	},
+}
+
+export const ConfiguringNewServer: Story = {
+	args: {
+		...baseServer,
+		name: 'Fresh Vanilla World',
+		status: 'installing',
+		flows: { intro: true },
+		loader: 'Vanilla',
+		loader_version: null,
+	},
+}
+
+export const WithPendingDowngrade: Story = {
+	args: {
+		...baseServer,
+		name: 'Competitive UHC',
+		pendingChange: {
+			...pendingChange,
+			planSize: 'Small',
+			ramGb: 4,
+			storageGb: 40,
+			cpuBurst: 4,
+			verb: 'Downgrade',
+		},
+	},
+}
+
+export const SuspendedUpgrading: Story = {
+	args: {
+		...baseServer,
+		name: 'Creative Build Team',
+		status: 'suspended',
+		suspension_reason: 'upgrading',
+	},
+}
+
+export const Provisioning: Story = {
+	args: {
+		...baseServer,
+		name: 'My New Server',
+		status: 'installing',
+	},
+}
+
+export const SetToCancel: Story = {
+	args: {
+		...baseServer,
+		name: 'Survival SMP',
+		cancellationDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString(),
+		onResubscribe: () => alert('Resubscribe clicked'),
+		onDownloadBackup: () => alert('Download backup clicked'),
+	},
+}
+
+export const SuspendedCancelled: Story = {
+	args: {
+		...baseServer,
+		name: 'Old Event Server',
+		status: 'suspended',
+		suspension_reason: 'cancelled',
+		cancellationDate: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
+		onResubscribe: () => alert('Resubscribe clicked'),
+		onDownloadBackup: () => alert('Download backup clicked'),
+	},
+}
+
+export const SuspendedCancelledFilesExpired: Story = {
+	args: {
+		...baseServer,
+		onDownloadBackup: null,
+		name: 'Old Event Server',
+		status: 'suspended',
+		suspension_reason: 'cancelled',
+		cancellationDate: new Date(2025, 1, 17).toISOString(),
+		onResubscribe: () => alert('Resubscribe clicked'),
+	},
+}
+
+export const SuspendedPaymentFailed: Story = {
+	args: {
+		...baseServer,
+		name: 'Minigames Network',
+		status: 'suspended',
+		suspension_reason: 'paymentfailed',
+		cancellationDate: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
+		onDownloadBackup: () => alert('Download backup clicked'),
+	},
+}
+
+export const SuspendedModerated: Story = {
+	args: {
+		...baseServer,
+		name: 'Banned Server',
+		status: 'suspended',
+		suspension_reason: 'moderated',
+		onDownloadBackup: () => alert('Download backup clicked'),
+	},
+}
+
+export const SuspendedGeneric: Story = {
+	args: {
+		...baseServer,
+		name: 'Server with other suspension reason',
+		status: 'suspended',
+		onDownloadBackup: () => alert('Download backup clicked'),
+	},
+}