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..3e05f033fe
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/modal/ServerSettingsModal.vue
@@ -0,0 +1,256 @@
+<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,
+	ServerSettingsAdminBillingPage,
+	ServerSettingsAdvancedPage,
+	ServerSettingsBillingPage,
+	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,
+	billing: ServerSettingsBillingPage,
+	'admin-billing': ServerSettingsAdminBillingPage,
+} 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) => ({
+		name: defineMessage({
+			id: `server.settings.tabs.${tab.id}`,
+			defaultMessage: tab.label,
+		}),
+		icon: tab.icon,
+		content: serverSettingsTabComponentMap[tab.id],
+		shown: tab.shown
+			? tab.shown({
+					serverId: currentServerId.value,
+					ownerId: ownerId.value,
+					serverStatus: server.value?.status,
+					isOwner: isOwner.value,
+					isAdmin: isAdmin.value,
+				})
+			: true,
+	})),
+)
+
+async function resolveViewer() {
+	currentUserId.value = null
+	currentUserRole.value = null
+
+	const credentials = await getCreds().catch(() => null)
+	if (!credentials?.user_id) {
+		return
+	}
+
+	currentUserId.value = credentials.user_id
+
+	const user = await get_user(credentials.user_id, 'bypass').catch(() => null)
+	const typedUser = user as Labrinth.Users.v2.User | null
+	currentUserRole.value = typedUser?.role ?? null
+}
+
+async function show({ serverId, tabIndex }: ShowOptions) {
+	try {
+		const [serverData, serverFull] = await Promise.all([
+			queryClient.fetchQuery({
+				queryKey: ['servers', 'detail', serverId],
+				queryFn: () => client.archon.servers_v0.get(serverId),
+			}),
+			queryClient.fetchQuery({
+				queryKey: ['servers', 'v1', 'detail', serverId],
+				queryFn: () => client.archon.servers_v1.get(serverId),
+			}),
+			resolveViewer(),
+		])
+
+		currentServerId.value = serverId
+		server.value = serverData
+		const activeWorld = serverFull.worlds.find((world) => world.is_active)
+		worldId.value = activeWorld?.id ?? serverFull.worlds[0]?.id ?? null
+
+		setNodeAuthState(() => fsAuth.value, refreshFsAuth)
+		await refreshFsAuth().catch(() => {})
+
+		modal.value?.show()
+		const visibleTabsCount = tabs.value.filter((tab) => tab.shown !== false).length
+		const requestedTab = tabIndex ?? 0
+		const clampedTab = Math.min(Math.max(requestedTab, 0), Math.max(visibleTabsCount - 1, 0))
+		nextTick(() => modal.value?.setTab(clampedTab))
+	} catch (error) {
+		console.error(error)
+		addNotification({
+			type: 'error',
+			title: formatMessage(messages.failedToLoadServer),
+		})
+	}
+}
+
+function hide() {
+	modal.value?.hide()
+}
+
+function onHide() {
+	clearNodeAuthState()
+}
+
+onUnmounted(() => {
+	clearNodeAuthState()
+})
+
+defineExpose({ show, hide })
+</script>
+
+<template>
+	<TabbedModal
+		ref="modal"
+		:tabs="tabs"
+		:on-hide="onHide"
+		:max-width="'min(980px, calc(95vw - 10rem))'"
+		:width="'min(980px, calc(95vw - 10rem))'"
+	>
+		<template #title>
+			<span class="flex items-center gap-2 text-lg font-semibold text-primary">
+				{{ server.name || 'Server' }} <ChevronRightIcon />
+				<span class="font-extrabold text-contrast">{{
+					formatMessage(commonMessages.settingsLabel)
+				}}</span>
+			</span>
+		</template>
+	</TabbedModal>
+</template>
diff --git a/apps/app-frontend/src/locales/en-US/index.json b/apps/app-frontend/src/locales/en-US/index.json
index 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/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..3fa9a8b674
--- /dev/null
+++ b/apps/app-frontend/src/pages/hosting/manage/Index.vue
@@ -0,0 +1,348 @@
+<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
+
+		const auth = await client.archon.servers_v0.getFilesystemAuth(serverId.value)
+
+		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/routes.js b/apps/app-frontend/src/routes.js
index 18c6df173c..456cc68991 100644
--- a/apps/app-frontend/src/routes.js
+++ b/apps/app-frontend/src/routes.js
@@ -2,6 +2,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'
@@ -36,6 +37,36 @@ export default new createRouter({
 				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/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/components/ui/servers/SaveBanner.vue b/apps/frontend/src/components/ui/servers/SaveBanner.vue
index d06b16f6bf..a43e4dd1f1 100644
--- a/apps/frontend/src/components/ui/servers/SaveBanner.vue
+++ b/apps/frontend/src/components/ui/servers/SaveBanner.vue
@@ -1,36 +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-[6] 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" @click="saveAndRestart">
-								{{ props.isUpdating ? 'Saving...' : 'Save & restart' }}
-							</button>
-						</ButtonStyled>
-					</div>
-				</div>
-			</div>
-		</div>
-	</Transition>
-</template>
-
 <script setup lang="ts">
-import { ButtonStyled, injectModrinthClient } from '@modrinth/ui'
+import { SaveBanner as SharedSaveBanner } from '@modrinth/ui'
 
 const props = defineProps<{
 	isUpdating: boolean
@@ -40,37 +9,9 @@ const props = defineProps<{
 	isVisible: boolean
 	serverId: string
 }>()
-
-const client = injectModrinthClient()
-
-const saveAndRestart = async () => {
-	props.save()
-	await client.archon.servers_v0.power(props.serverId, '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 f91c60de95..47a0d0a3c6 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"
   },
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..2c84c0b81c
--- /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 />
+</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..45455232a0 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 />
+</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..7eae2979d9 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 />
+</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 247ddffd47..35da56c216 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/options/loader.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/options/loader.vue
@@ -1,695 +1,15 @@
-<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">
-			<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,
-})
-
-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' && !['paper', 'purpur'].includes(loader)) {
-			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' || ['paper', 'purpur'].includes(loader)) {
-			return tags.gameVersions.value.some((v) => v.version_type !== 'release')
-		}
-		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
-
-		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
-				? { loader: platform, lVersion: resolvedLoaderVersion, mVersion: gameVersion }
-				: { mVersion: gameVersion },
-		)
-		try {
-			if (platformChanged) {
-				const request: Archon.Content.v1.InstallWorldContent = {
-					content_variant: 'bare',
-					loader: toApiLoader(platform),
-					version: resolvedLoaderVersion ?? '',
-					game_version: gameVersion || undefined,
-					soft_override: true,
-				}
-				debug('save: platform changed, calling installContent', request)
-				await client.archon.content_v1.installContent(serverId, worldId.value!, request)
-			} else {
-				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: true,
-	hideLoaderVersion: true,
-
-	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')"
+	/>
+</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..f7436993c6 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 />
+</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..3776217bbe 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 />
+</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/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..0c30d7e5c0 100644
--- a/packages/ui/src/components/base/CopyCode.vue
+++ b/packages/ui/src/components/base/CopyCode.vue
@@ -57,12 +57,11 @@ async function copyText() {
 	}
 
 	&:hover {
-		filter: brightness(0.85);
+		filter: brightness(1.25);
 	}
 
 	&: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/servers/SaveBanner.vue b/packages/ui/src/components/servers/SaveBanner.vue
new file mode 100644
index 0000000000..fbc629ded1
--- /dev/null
+++ b/packages/ui/src/components/servers/SaveBanner.vue
@@ -0,0 +1,79 @@
+<template>
+	<Transition name="save-banner">
+		<div
+			v-if="props.isVisible"
+			data-pyro-save-banner
+			class="fixed bottom-16 left-0 right-0 z-[6] 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" @click="saveAndRestart">
+								{{ props.isUpdating ? 'Saving...' : 'Save & restart' }}
+							</button>
+						</ButtonStyled>
+					</div>
+				</div>
+			</div>
+		</div>
+	</Transition>
+</template>
+
+<script setup lang="ts">
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { injectModrinthClient } from '#ui/providers'
+
+const props = defineProps<{
+	isUpdating: boolean
+	restart?: boolean
+	save: () => void
+	reset: () => void
+	isVisible: boolean
+	serverId: string
+}>()
+
+const client = injectModrinthClient(null)
+
+const saveAndRestart = async () => {
+	props.save()
+	if (client) {
+		await client.archon.servers_v0.power(props.serverId, '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..30f490abd5 100644
--- a/packages/ui/src/components/servers/ServerListing.vue
+++ b/packages/ui/src/components/servers/ServerListing.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<NuxtLink :to="status === 'suspended' ? '' : `/hosting/manage/${props.server_id}`">
+		<RouterLink :to="status === 'suspended' ? '' : `/hosting/manage/${props.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="{
@@ -19,8 +19,8 @@
 					<LockIcon class="size-12 text-secondary" />
 				</div>
 				<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>
+					<div class="flex flex-row items-center gap-2 text-contrast">
+						<h2 class="m-0 text-xl font-bold">{{ name }}</h2>
 						<ChevronRightIcon />
 					</div>
 
@@ -53,7 +53,7 @@
 					/>
 				</div>
 			</div>
-		</NuxtLink>
+		</RouterLink>
 		<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"
diff --git a/packages/ui/src/components/servers/index.ts b/packages/ui/src/components/servers/index.ts
index 1c434c9e6d..91d54f4cef 100644
--- a/packages/ui/src/components/servers/index.ts
+++ b/packages/ui/src/components/servers/index.ts
@@ -4,6 +4,7 @@ export * from './icons'
 export { default as InstallingBanner } from './InstallingBanner.vue'
 export * from './labels'
 export * from './marketing'
+export { default as SaveBanner } from './SaveBanner.vue'
 export type { PendingChange } from './ServerListing.vue'
 export { default as ServerListing } from './ServerListing.vue'
 export { default as ServerSetupModal } from './ServerSetupModal.vue'
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 20a48f672f..5764ae3438 100644
--- a/packages/ui/src/layouts/shared/installation-settings/layout.vue
+++ b/packages/ui/src/layouts/shared/installation-settings/layout.vue
@@ -363,14 +363,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
@@ -389,6 +381,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 -->
@@ -396,13 +396,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
@@ -422,6 +415,13 @@ const messages = defineMessages({
 							</button>
 						</ButtonStyled>
 					</div>
+					<span class="text-primary">
+						{{
+							formatMessage(messages.reinstallModpackDescription, {
+								type: ctx.isServer ? 'server' : 'instance',
+							})
+						}}
+					</span>
 				</div>
 
 				<!-- Repair -->
@@ -433,15 +433,6 @@ const messages = defineMessages({
 							)
 						}}
 					</span>
-					<span class="text-primary">
-						{{
-							formatMessage(
-								ctx.isServer
-									? messages.repairServerDescription
-									: messages.repairInstanceDescription,
-							)
-						}}
-					</span>
 					<div>
 						<ButtonStyled>
 							<button
@@ -459,6 +450,15 @@ const messages = defineMessages({
 							</button>
 						</ButtonStyled>
 					</div>
+					<span class="text-primary">
+						{{
+							formatMessage(
+								ctx.isServer
+									? messages.repairServerDescription
+									: messages.repairInstanceDescription,
+							)
+						}}
+					</span>
 				</div>
 			</template>
 
@@ -597,16 +597,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
@@ -620,6 +610,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 -->
@@ -631,15 +631,6 @@ const messages = defineMessages({
 							)
 						}}
 					</span>
-					<span class="text-primary">
-						{{
-							formatMessage(
-								ctx.isServer
-									? messages.repairServerDescription
-									: messages.repairInstanceDescription,
-							)
-						}}
-					</span>
 					<div>
 						<ButtonStyled>
 							<button
@@ -657,6 +648,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/admin-billing.vue b/packages/ui/src/layouts/shared/server-settings/pages/admin-billing.vue
new file mode 100644
index 0000000000..7277ec2904
--- /dev/null
+++ b/packages/ui/src/layouts/shared/server-settings/pages/admin-billing.vue
@@ -0,0 +1,27 @@
+<template>
+	<div class="universal-card">
+		<p>You can manage this server owner's billing from the admin billing page.</p>
+		<ButtonStyled>
+			<AutoLink :to="adminBillingHref">Go to Admin Billing</AutoLink>
+		</ButtonStyled>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import AutoLink from '#ui/components/base/AutoLink.vue'
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { injectModrinthServerContext } from '#ui/providers/server-context'
+
+import { injectServerSettings } from '../providers'
+
+const { server } = injectModrinthServerContext()
+const serverSettings = injectServerSettings()
+
+const ownerId = computed(() => server.value?.owner_id ?? 'unknown')
+const adminBillingHref = computed(() => {
+	const path = `/admin/billing/${ownerId.value}`
+	return serverSettings.isApp.value ? `https://modrinth.com${path}` : path
+})
+</script>
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..5d7dfc6273
--- /dev/null
+++ b/packages/ui/src/layouts/shared/server-settings/pages/advanced.vue
@@ -0,0 +1,383 @@
+<template>
+	<div class="relative h-full w-full">
+		<div class="flex h-full w-full flex-col gap-4">
+			<div class="card 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 class="flex h-10 items-center justify-between rounded-xl bg-surface-3 px-3 py-2">
+							<div class="flex flex-col gap-2">
+								<span class="cursor-pointer font-semibold text-primary">
+									{{ server?.sftp_host }}
+								</span>
+							</div>
+							<ButtonStyled type="transparent" circular>
+								<button
+									v-tooltip="'Copy SFTP server address'"
+									@click="copyToClipboard('Server address', server?.sftp_host)"
+								>
+									<CopyIcon class="h-5 w-5 hover:cursor-pointer" />
+								</button>
+							</ButtonStyled>
+						</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
+									class="flex h-10 items-center justify-between rounded-xl bg-surface-3 px-3 py-2"
+								>
+									<span class="font-semibold text-primary">
+										{{ server?.sftp_username }}
+									</span>
+									<ButtonStyled type="transparent" circular>
+										<button
+											v-tooltip="'Copy SFTP username'"
+											@click="copyToClipboard('Username', server?.sftp_username)"
+										>
+											<CopyIcon class="h-5 w-5 hover:cursor-pointer" />
+										</button>
+									</ButtonStyled>
+								</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="flex h-10 items-center justify-between rounded-xl bg-surface-3 px-3 py-2"
+								>
+									<span class="font-semibold text-primary">
+										{{
+											showPassword
+												? server?.sftp_password
+												: '*'.repeat(server?.sftp_password?.length ?? 0)
+										}}
+									</span>
+									<div class="flex flex-row items-center gap-1">
+										<ButtonStyled type="transparent" circular>
+											<button
+												v-tooltip="'Copy SFTP password'"
+												@click="copyToClipboard('Password', server?.sftp_password)"
+											>
+												<CopyIcon class="h-5 w-5 hover:cursor-pointer" />
+											</button>
+										</ButtonStyled>
+										<ButtonStyled type="transparent" circular>
+											<button
+												v-tooltip="showPassword ? 'Hide password' : 'Show password'"
+												@click="showPassword = !showPassword"
+											>
+												<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>
+							</div>
+						</div>
+					</div>
+				</div>
+
+				<!-- Startup command section -->
+				<div class="flex flex-col gap-2.5">
+					<div class="flex h-9 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>
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/billing.vue b/packages/ui/src/layouts/shared/server-settings/pages/billing.vue
new file mode 100644
index 0000000000..3b240cbde6
--- /dev/null
+++ b/packages/ui/src/layouts/shared/server-settings/pages/billing.vue
@@ -0,0 +1,25 @@
+<template>
+	<div class="universal-card">
+		<p>You can manage your server's billing from Settings > Billing and subscriptions.</p>
+		<ButtonStyled>
+			<AutoLink :to="billingHref">Go to Billing</AutoLink>
+		</ButtonStyled>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { AutoLink, ButtonStyled } from '#ui/components'
+import { injectModrinthServerContext } from '#ui/providers/server-context'
+
+import { injectServerSettings } from '../providers'
+
+const { serverId } = injectModrinthServerContext()
+const serverSettings = injectServerSettings()
+
+const billingHref = computed(() => {
+	const path = `/settings/billing#server-${serverId}`
+	return serverSettings.isApp.value ? `https://modrinth.com${path}` : path
+})
+</script>
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..df2741bd43
--- /dev/null
+++ b/packages/ui/src/layouts/shared/server-settings/pages/general.vue
@@ -0,0 +1,425 @@
+<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="card 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 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>
+							<span>This name is only visible on Modrinth.</span>
+						</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="text-input-wrapper !w-full px-3">
+									<div class="relative inline-flex min-h-9 items-center">
+										<span
+											class="pointer-events-none invisible whitespace-pre text-base font-medium"
+											aria-hidden="true"
+											>{{ serverSubdomain || 'Enter subdomain...' }}</span
+										>
+										<input
+											id="server-subdomain"
+											:value="serverSubdomain"
+											placeholder="Enter subdomain..."
+											:maxlength="32"
+											class="absolute inset-0 bg-transparent !p-0 text-base font-medium text-primary outline-none transition-colors placeholder:text-secondary focus:text-contrast"
+											autocomplete="off"
+											@input="serverSubdomain = ($event.target as HTMLInputElement).value"
+											@keyup.enter="saveGeneral"
+										/>
+									</div>
+									<div
+										class="text-input-wrapper__after"
+										: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="flex flex-col text-sm text-red">
+								<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-2">
+						<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(() => /^[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..5e6a1b05f3
--- /dev/null
+++ b/packages/ui/src/layouts/shared/server-settings/pages/index.ts
@@ -0,0 +1,7 @@
+export { default as ServerSettingsAdminBillingPage } from './admin-billing.vue'
+export { default as ServerSettingsAdvancedPage } from './advanced.vue'
+export { default as ServerSettingsBillingPage } from './billing.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..874919beb5
--- /dev/null
+++ b/packages/ui/src/layouts/shared/server-settings/pages/installation.vue
@@ -0,0 +1,697 @@
+<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">
+			<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 { useQuery, useQueryClient } from '@tanstack/vue-query'
+import { computed, ref, watch } from 'vue'
+
+import { ButtonStyled, ConfirmModal, ServerSetupModal } from '#ui/components'
+import { useDebugLogger } from '#ui/composables/debug-logger'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import {
+	InstallationSettingsLayout,
+	provideInstallationSettings,
+} from '#ui/layouts/shared/installation-settings'
+import {
+	injectModrinthClient,
+	injectModrinthServerContext,
+	injectNotificationManager,
+	injectTags,
+} from '#ui/providers'
+import { commonMessages } from '#ui/utils/common-messages'
+import { formatLoaderLabel } from '#ui/utils/loaders'
+
+import { injectServerSettings } from '../providers'
+
+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: [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 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,
+})
+
+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' && !['paper', 'purpur'].includes(loader)) {
+			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' || ['paper', 'purpur'].includes(loader)) {
+			return tags.gameVersions.value.some((v) => v.version_type !== 'release')
+		}
+		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
+
+		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
+				? { loader: platform, lVersion: resolvedLoaderVersion, mVersion: gameVersion }
+				: { mVersion: gameVersion },
+		)
+		try {
+			if (platformChanged) {
+				const request: Archon.Content.v1.InstallWorldContent = {
+					content_variant: 'bare',
+					loader: toApiLoader(platform),
+					version: resolvedLoaderVersion ?? '',
+					game_version: gameVersion || undefined,
+					soft_override: true,
+				}
+				debug('save: platform changed, calling installContent', request)
+				await client.archon.content_v1.installContent(serverId, worldId.value!, request)
+			} else {
+				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: true,
+	hideLoaderVersion: true,
+
+	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?: unknown) {
+	installationSettingsLayout.value?.cancelEditing()
+	emit('reinstall', event)
+}
+
+function onBrowseModpacks() {
+	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..dedecd90ef
--- /dev/null
+++ b/packages/ui/src/layouts/shared/server-settings/pages/network.vue
@@ -0,0 +1,438 @@
+<template>
+	<div class="contents">
+		<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 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-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="card 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..c3eced98dd
--- /dev/null
+++ b/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
@@ -0,0 +1,525 @@
+<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">
+					<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">
+					<!-- 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 max-w-[600px] flex-col gap-6">
+							<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="text-lg 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-[320px]"
+									@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-4">
+									<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 py-2"
+											>
+												<span :id="`property-label-${key}`">
+													{{ 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="mt-2 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/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index 78548f369f..544eef277d 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -905,6 +905,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"
   },
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,
+	},
+}