From 64b4ebb491b76b4d5105fcbb361ba16621424f74 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Mon, 27 Apr 2026 13:02:46 +0100
Subject: [PATCH 1/3] feat: world switching page implementation

---
 .../src/pages/hosting/manage/Worlds.vue       |   7 +
 .../src/pages/hosting/manage/index.js         |   3 +-
 apps/app-frontend/src/routes.js               |   8 +
 .../src/pages/hosting/manage/[id]/worlds.vue  |  30 ++
 .../hosting/manage/components/WorldCard.vue   | 311 ++++++++++++++++++
 .../layouts/wrapped/hosting/manage/root.vue   | 122 ++++---
 .../layouts/wrapped/hosting/manage/worlds.vue | 288 ++++++++++++++++
 packages/ui/src/layouts/wrapped/index.ts      |   1 +
 8 files changed, 719 insertions(+), 51 deletions(-)
 create mode 100644 apps/app-frontend/src/pages/hosting/manage/Worlds.vue
 create mode 100644 apps/frontend/src/pages/hosting/manage/[id]/worlds.vue
 create mode 100644 packages/ui/src/layouts/wrapped/hosting/manage/components/WorldCard.vue
 create mode 100644 packages/ui/src/layouts/wrapped/hosting/manage/worlds.vue

diff --git a/apps/app-frontend/src/pages/hosting/manage/Worlds.vue b/apps/app-frontend/src/pages/hosting/manage/Worlds.vue
new file mode 100644
index 0000000000..3df6f264ee
--- /dev/null
+++ b/apps/app-frontend/src/pages/hosting/manage/Worlds.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { ServersManageWorldsPage } from '@modrinth/ui'
+</script>
+
+<template>
+	<ServersManageWorldsPage />
+</template>
diff --git a/apps/app-frontend/src/pages/hosting/manage/index.js b/apps/app-frontend/src/pages/hosting/manage/index.js
index 50052e3f9e..e06f46e2a2 100644
--- a/apps/app-frontend/src/pages/hosting/manage/index.js
+++ b/apps/app-frontend/src/pages/hosting/manage/index.js
@@ -3,5 +3,6 @@ import Content from './Content.vue'
 import Files from './Files.vue'
 import Index from './Index.vue'
 import Overview from './Overview.vue'
+import Worlds from './Worlds.vue'
 
-export { Backups, Content, Files, Index, Overview }
+export { Backups, Content, Files, Index, Overview, Worlds }
diff --git a/apps/app-frontend/src/routes.js b/apps/app-frontend/src/routes.js
index c12306b5ad..410869c46a 100644
--- a/apps/app-frontend/src/routes.js
+++ b/apps/app-frontend/src/routes.js
@@ -57,6 +57,14 @@ export default new createRouter({
 						breadcrumb: [{ name: '?Server' }],
 					},
 				},
+				{
+					path: 'worlds',
+					name: 'ServerManageWorlds',
+					component: Hosting.Worlds,
+					meta: {
+						breadcrumb: [{ name: '?Server' }],
+					},
+				},
 				{
 					path: 'files',
 					name: 'ServerManageFiles',
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/worlds.vue b/apps/frontend/src/pages/hosting/manage/[id]/worlds.vue
new file mode 100644
index 0000000000..5305138f0a
--- /dev/null
+++ b/apps/frontend/src/pages/hosting/manage/[id]/worlds.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import {
+	commonMessages,
+	defineMessages,
+	injectModrinthServerContext,
+	ServersManageWorldsPage,
+	useVIntl,
+} from '@modrinth/ui'
+
+const { server } = injectModrinthServerContext()
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	title: {
+		id: 'servers.manage.worlds.meta.title',
+		defaultMessage: 'Worlds - {server} - Modrinth',
+	},
+})
+
+useHead({
+	title: () =>
+		formatMessage(messages.title, {
+			server: server.value?.name ?? formatMessage(commonMessages.serverLabel),
+		}),
+})
+</script>
+
+<template>
+	<ServersManageWorldsPage />
+</template>
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/components/WorldCard.vue b/packages/ui/src/layouts/wrapped/hosting/manage/components/WorldCard.vue
new file mode 100644
index 0000000000..db1aacf0bf
--- /dev/null
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/components/WorldCard.vue
@@ -0,0 +1,311 @@
+<template>
+	<article
+		class="flex min-h-[19.75rem] w-full flex-col overflow-hidden rounded-2xl border border-solid border-surface-5 bg-bg-raised shadow-xl"
+		:class="(world as any)?.active ? '!border-brand' : ''"
+	>
+		<template v-if="world.type === 'empty'">
+			<div class="flex flex-1 flex-col items-center pt-[3.125rem] text-center">
+				<svg
+					class="size-[5.6645rem]"
+					viewBox="0 0 91 91"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+					aria-hidden="true"
+				>
+					<rect
+						x="22.4356"
+						y="0.629395"
+						width="71"
+						height="71"
+						rx="19.5"
+						transform="rotate(17.8856 22.4356 0.629395)"
+						stroke="#42444A"
+					/>
+					<rect
+						x="4.36354"
+						y="16.5661"
+						width="71"
+						height="71"
+						rx="19.5"
+						transform="rotate(-8.79487 4.36354 16.5661)"
+						fill="#34363C"
+					/>
+					<rect
+						x="4.36354"
+						y="16.5661"
+						width="71"
+						height="71"
+						rx="19.5"
+						transform="rotate(-8.79487 4.36354 16.5661)"
+						stroke="#42444A"
+					/>
+					<g :clip-path="`url(#${emptyCardClipId})`">
+						<path
+							d="M47.4227 62.6919C56.5193 61.2846 62.7525 52.7695 61.3452 43.673C59.9378 34.5764 51.4227 28.3432 42.3262 29.7505C33.2297 31.1579 26.9964 39.673 28.4038 48.7695C29.8111 57.866 38.3262 64.0993 47.4227 62.6919Z"
+							stroke="#B0BAC5"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+						<path
+							d="M42.3246 29.7502C38.7824 34.8453 37.3358 41.1078 38.2846 47.2402C39.2334 53.3727 42.5048 58.9052 47.4212 62.6916C50.9634 57.5965 52.41 51.3341 51.4612 45.2016C50.5124 39.0691 47.241 33.5366 42.3246 29.7502Z"
+							stroke="#B0BAC5"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+						<path
+							d="M28.4023 48.7695L61.3437 43.673"
+							stroke="#B0BAC5"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</g>
+					<defs>
+						<clipPath :id="emptyCardClipId">
+							<rect
+								width="40"
+								height="40"
+								fill="white"
+								transform="translate(22.0508 29.5137) rotate(-8.79487)"
+							/>
+						</clipPath>
+					</defs>
+				</svg>
+				<div class="mt-6 flex flex-col gap-1">
+					<h2 class="m-0 text-2xl font-extrabold leading-8 text-contrast">{{ world.name }}</h2>
+					<p class="m-0 text-base font-medium leading-6 text-secondary">
+						{{ formatMessage(messages.newWorldInstance) }}
+					</p>
+				</div>
+			</div>
+
+			<div class="px-5 pb-4">
+				<ButtonStyled color="brand">
+					<button class="w-full" @click="emit('create', world.id)">
+						<PlusIcon aria-hidden="true" />
+						{{ formatMessage(messages.createWorld) }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</template>
+
+		<template v-else>
+			<header class="flex min-h-[5.75rem] flex-col justify-center gap-1 px-5 py-4">
+				<div class="flex min-w-0 items-center justify-between gap-3">
+					<span
+						class="m-0 truncate text-xl font-semibold text-contrast"
+						ref="worldNameRef"
+						v-tooltip="truncatedTooltip(worldNameRef, world.name)"
+						>{{ world.name }}</span
+					>
+					<span
+						v-if="world.active"
+						class="shrink-0 rounded-full bg-brand-highlight border border-brand border-solid px-2.5 py-1 text-green"
+					>
+						{{ formatMessage(messages.active) }}
+					</span>
+				</div>
+				<div class="flex min-w-0 text-md items-center gap-2 text-secondary">
+					{{ world.gameVersion }} <BulletDivider /> {{ world.loaderLabel }}
+				</div>
+			</header>
+
+			<div
+				class="flex flex-1 flex-col gap-3 border-0 border-y bg-surface-2 border-solid border-surface-5 my-auto px-5 py-4"
+			>
+				<div
+					class="grid min-h-6 grid-cols-[minmax(0,1fr)_minmax(0,70%)] items-center gap-4 text-secondary [&>*:last-child]:max-w-full [&>*:last-child]:justify-self-end"
+				>
+					<span>{{ formatMessage(commonMessages.modpackLabel) }}</span>
+					<div
+						v-if="world.linkedModpack"
+						class="flex min-w-0 items-center gap-2 text-right font-semibold text-contrast"
+					>
+						<AutoLink :to="world.linkedModpack.link" class="shrink-0">
+							<Avatar
+								:src="world.linkedModpack.iconUrl"
+								:alt="world.linkedModpack.name"
+								:tint-by="world.linkedModpack.name"
+								size="1.25rem"
+								no-shadow
+							/>
+						</AutoLink>
+						<AutoLink
+							:to="world.linkedModpack.link"
+							class="min-w-0 font-semibold text-contrast"
+							:class="world.linkedModpack.link ? 'hover:underline' : ''"
+						>
+							<span
+								ref="modpackNameRef"
+								v-tooltip="truncatedTooltip(modpackNameRef, world.linkedModpack.name)"
+								class="block truncate"
+							>
+								{{ world.linkedModpack.name }}
+							</span>
+						</AutoLink>
+					</div>
+					<span v-else class="font-semibold text-contrast">{{ formatMessage(messages.none) }}</span>
+				</div>
+				<div
+					class="grid min-h-6 grid-cols-[minmax(0,1fr)_minmax(0,25%)] items-center gap-4 text-secondary [&>*:last-child]:max-w-full [&>*:last-child]:justify-self-end"
+				>
+					<span>{{ formatMessage(messages.installedContent) }}</span>
+					<span class="font-semibold text-contrast">{{ installedContentLabel }}</span>
+				</div>
+				<div
+					class="grid min-h-6 grid-cols-[minmax(0,1fr)_minmax(0,45%)] items-center gap-4 text-base font-medium text-secondary [&>*:last-child]:max-w-full [&>*:last-child]:justify-self-end"
+				>
+					<span>{{ formatMessage(messages.lastActive) }}</span>
+					<span class="font-semibold text-contrast">{{ lastActiveLabel }}</span>
+				</div>
+				<div
+					class="grid min-h-6 grid-cols-[minmax(0,1fr)_minmax(0,45%)] items-center gap-4 text-base font-medium text-secondary [&>*:last-child]:max-w-full [&>*:last-child]:justify-self-end"
+				>
+					<span>{{ formatMessage(messages.created) }}</span>
+					<span class="font-semibold text-contrast">{{ createdLabel }}</span>
+				</div>
+			</div>
+
+			<footer class="flex items-center justify-between gap-3 px-5 py-4">
+				<ButtonStyled>
+					<button @click="emit('edit', world.id)" class="!shadow-none">
+						<PencilIcon aria-hidden="true" />
+						{{ formatMessage(messages.editWorld) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled circular>
+					<button
+						v-tooltip="formatMessage(messages.worldSettings)"
+						@click="emit('settings', world.id)"
+						class="!shadow-none"
+					>
+						<Settings2Icon aria-hidden="true" />
+					</button>
+				</ButtonStyled>
+			</footer>
+		</template>
+	</article>
+</template>
+
+<script setup lang="ts">
+import { PencilIcon, PlusIcon, Settings2Icon } from '@modrinth/assets'
+import { computed, useId, useTemplateRef } from 'vue'
+
+import AutoLink from '#ui/components/base/AutoLink.vue'
+import Avatar from '#ui/components/base/Avatar.vue'
+import BulletDivider from '#ui/components/base/BulletDivider.vue'
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { useFormatDateTime, useRelativeTime } from '#ui/composables'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { truncatedTooltip } from '#ui/utils'
+import { commonMessages } from '#ui/utils/common-messages'
+
+const messages = defineMessages({
+	newWorldInstance: {
+		id: 'servers.manage.worlds.card.empty-description',
+		defaultMessage: 'New world instance',
+	},
+	createWorld: {
+		id: 'servers.manage.worlds.card.create',
+		defaultMessage: 'Create world',
+	},
+	active: {
+		id: 'servers.manage.worlds.card.active',
+		defaultMessage: 'Active',
+	},
+	none: {
+		id: 'servers.manage.worlds.card.none',
+		defaultMessage: 'None',
+	},
+	installedContent: {
+		id: 'servers.manage.worlds.card.installed-content',
+		defaultMessage: 'Installed content',
+	},
+	lastActive: {
+		id: 'servers.manage.worlds.card.last-active',
+		defaultMessage: 'Last active',
+	},
+	created: {
+		id: 'servers.manage.worlds.card.created',
+		defaultMessage: 'Created',
+	},
+	editWorld: {
+		id: 'servers.manage.worlds.card.edit',
+		defaultMessage: 'Edit world',
+	},
+	worldSettings: {
+		id: 'servers.manage.worlds.card.settings',
+		defaultMessage: 'World settings',
+	},
+	notTrackedYet: {
+		id: 'servers.manage.worlds.card.not-tracked-yet',
+		defaultMessage: 'Not tracked yet',
+	},
+})
+
+type LinkedModpack = {
+	name: string
+	iconUrl: string | null
+	link: string | null
+}
+
+type UsedWorld = {
+	type: 'world'
+	id: string
+	name: string
+	active: boolean
+	gameVersion: string | null
+	loaderLabel: string | null
+	linkedModpack: LinkedModpack | null
+	installedContentCount: number | null
+	lastActiveAt: string | null
+	createdAt: string | null
+}
+
+type EmptyWorld = {
+	type: 'empty'
+	id: string
+	name: string
+}
+
+const props = defineProps<{
+	world: UsedWorld | EmptyWorld
+}>()
+
+const emit = defineEmits<{
+	create: [slotId: string]
+	edit: [worldId: string]
+	settings: [worldId: string]
+}>()
+
+const formatRelativeTime = useRelativeTime()
+const formatDate = useFormatDateTime({ dateStyle: 'medium' })
+const { formatMessage } = useVIntl()
+const emptyCardClipId = useId()
+
+const modpackNameRef = useTemplateRef<HTMLElement>('modpackNameRef')
+const worldNameRef = useTemplateRef<HTMLElement>('worldNameRef')
+
+const installedContentLabel = computed(() => {
+	if (props.world.type === 'empty') return ''
+	return props.world.installedContentCount === null
+		? formatMessage(commonMessages.unknownLabel)
+		: String(props.world.installedContentCount)
+})
+
+const lastActiveLabel = computed(() => {
+	if (props.world.type === 'empty') return ''
+	return props.world.lastActiveAt
+		? formatRelativeTime(props.world.lastActiveAt)
+		: formatMessage(messages.notTrackedYet)
+})
+
+const createdLabel = computed(() => {
+	if (props.world.type === 'empty') return ''
+	return props.world.createdAt
+		? formatDate(props.world.createdAt)
+		: formatMessage(commonMessages.unknownLabel)
+})
+</script>
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
index f9159ad088..a92662ab14 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
@@ -22,8 +22,8 @@
 		class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
 	>
 		<ErrorInformationCard
-			title="We're getting your server ready"
-			description="Your server's hardware is being prepared and will be available shortly!"
+			:title="formatMessage(messages.serverPreparingTitle)"
+			:description="formatMessage(messages.serverPreparingDescription)"
 			:icon="TransferIcon"
 			icon-color="blue"
 			:action="generalErrorAction"
@@ -34,8 +34,8 @@
 		class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
 	>
 		<ErrorInformationCard
-			title="Server upgrading"
-			description="Your server's hardware is currently being upgraded and will be back online shortly!"
+			:title="formatMessage(messages.serverUpgradingTitle)"
+			:description="formatMessage(messages.serverUpgradingDescription)"
 			:icon="TransferIcon"
 			icon-color="blue"
 			:action="generalErrorAction"
@@ -46,7 +46,7 @@
 		class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
 	>
 		<ErrorInformationCard
-			title="Server suspended"
+			:title="formatMessage(messages.serverSuspendedTitle)"
 			:description="suspendedDescription"
 			:icon="LockIcon"
 			icon-color="orange"
@@ -58,8 +58,8 @@
 		class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
 	>
 		<ErrorInformationCard
-			title="An error occured."
-			description="Please contact Modrinth Support."
+			:title="formatMessage(messages.generalErrorTitle)"
+			:description="formatMessage(messages.contactSupportDescription)"
 			:icon="TransferIcon"
 			icon-color="orange"
 			:error-details="generalErrorDetails"
@@ -71,7 +71,7 @@
 		class="flex min-h-[calc(100vh-4rem)] items-center justify-center text-contrast"
 	>
 		<ErrorInformationCard
-			title="Server Node Unavailable"
+			:title="formatMessage(messages.nodeUnavailableTitle)"
 			:icon="TriangleAlertIcon"
 			icon-color="red"
 			:action="nodeUnavailableAction"
@@ -80,16 +80,13 @@
 			<template #description>
 				<div class="text-md space-y-4">
 					<p class="leading-[170%] text-secondary">
-						Your server's node, where your Modrinth Server is physically hosted, is not accessible
-						at the moment. We are working to resolve the issue as quickly as possible.
+						{{ formatMessage(messages.nodeUnavailableDescription) }}
 					</p>
 					<p class="leading-[170%] text-secondary">
-						Your data is safe and will not be lost, and your server will be back online as soon as
-						the issue is resolved.
+						{{ formatMessage(messages.nodeUnavailableDataDescription) }}
 					</p>
 					<p class="leading-[170%] text-secondary">
-						If reloading does not work initially, please contact Modrinth Support via the chat
-						bubble in the bottom right corner and we'll be happy to help.
+						{{ formatMessage(messages.nodeUnavailableSupportDescription) }}
 					</p>
 				</div>
 			</template>
@@ -132,7 +129,7 @@
 						>
 							<ButtonStyled circular size="large">
 								<button
-									v-tooltip="showSettingsHint ? undefined : 'Server settings'"
+									v-tooltip="showSettingsHint ? undefined : formatMessage(messages.serverSettings)"
 									@click="
 										() => {
 											openServerSettingsModal()
@@ -199,70 +196,59 @@
 							<div class="flex flex-col gap-2 leading-[150%]">
 								<div class="flex items-center gap-3">
 									<IssuesIcon class="flex h-8 w-8 shrink-0 text-red sm:hidden" />
-									<div class="flex gap-2 text-2xl font-bold">{{ errorTitle }}</div>
+									<div class="flex gap-2 text-2xl font-bold">{{ errorTitleLabel }}</div>
 								</div>
 
-								<div
-									v-if="errorTitle.toLocaleLowerCase() === 'installation error'"
-									class="font-normal"
-								>
+								<div v-if="errorTitle === 'installation'" class="font-normal">
 									<div
 										v-if="
 											errorMessage.toLocaleLowerCase() === 'the specified version may be incorrect'
 										"
 									>
-										An invalid loader or Minecraft version was specified and could not be installed.
+										{{ formatMessage(messages.installInvalidVersionDescription) }}
 										<ul class="m-0 mt-4 p-0 pl-4">
 											<li>
-												If this version of Minecraft was released recently, please check if Modrinth
-												Hosting supports it.
+												{{ formatMessage(messages.installRecentMinecraftVersionNotice) }}
 											</li>
 											<li>
-												If you've installed a modpack, it may have been packaged incorrectly or may
-												not be compatible with the loader.
+												{{ formatMessage(messages.installModpackCompatibilityNotice) }}
 											</li>
 											<li>
-												Your server may need to be reinstalled with a valid mod loader and version.
-												You can change the loader by clicking the "Change Loader" button.
+												{{ formatMessage(messages.installChangeLoaderNotice) }}
 											</li>
 											<li>
-												If you're stuck, please contact Modrinth Support with the information below:
+												{{ formatMessage(messages.installSupportNotice) }}
 											</li>
 										</ul>
 										<ButtonStyled>
 											<button class="mt-2" @click="copyServerDebugInfo">
 												<CopyIcon v-if="!copied" />
 												<CheckIcon v-else />
-												Copy Debug Info
+												{{ formatMessage(messages.copyDebugInfo) }}
 											</button>
 										</ButtonStyled>
 									</div>
 									<div v-if="errorMessage.toLocaleLowerCase() === 'internal error'">
-										An internal error occurred while installing your server. Don't fret — try
-										reinstalling your server, and if the problem persists, please contact Modrinth
-										support with your server's debug information.
+										{{ formatMessage(messages.installInternalErrorDescription) }}
 									</div>
 									<div
 										v-if="errorMessage.toLocaleLowerCase() === 'this version is not yet supported'"
 									>
-										An error occurred while installing your server because Modrinth Hosting does not
-										support the version of Minecraft or the loader you specified. Try reinstalling
-										your server with a different version or loader, and if the problem persists,
-										please contact Modrinth Support with your server's debug information.
+										{{ formatMessage(messages.installUnsupportedVersionDescription) }}
 									</div>
 
-									<div
-										v-if="errorTitle === 'Installation error'"
-										class="mt-2 flex flex-col gap-4 sm:flex-row"
-									>
+									<div class="mt-2 flex flex-col gap-4 sm:flex-row">
 										<ButtonStyled v-if="errorLog">
-											<button @click="openInstallLog"><FileIcon />Open Installation Log</button>
+											<button @click="openInstallLog">
+												<FileIcon />
+												{{ formatMessage(messages.openInstallationLog) }}
+											</button>
 										</ButtonStyled>
 										<ButtonStyled>
 											<button @click="copyServerDebugInfo">
 												<CopyIcon v-if="!copied" />
 												<CheckIcon v-else />
-												Copy Debug Info
+												{{ formatMessage(messages.copyDebugInfo) }}
 											</button>
 										</ButtonStyled>
 										<ButtonStyled color="red" type="standard">
@@ -271,7 +257,7 @@
 												@click="openServerSettingsModal('installation')"
 											>
 												<RightArrowIcon />
-												Change Loader
+												{{ formatMessage(messages.changeLoader) }}
 											</button>
 										</ButtonStyled>
 									</div>
@@ -295,7 +281,7 @@
 						class="mb-4 flex w-full flex-row items-center gap-4 rounded-2xl bg-bg-red p-4 text-contrast"
 					>
 						<IssuesIcon class="size-5 text-red" />
-						Something went wrong...
+						{{ formatMessage(messages.websocketError) }}
 					</div>
 
 					<div
@@ -304,7 +290,7 @@
 						class="mb-4 flex w-full flex-row items-center gap-4 rounded-2xl bg-bg-orange p-4 text-sm text-contrast"
 					>
 						<LoaderCircleIcon class="h-5 w-5 animate-spin" />
-						Hang on, we're reconnecting to your server.
+						{{ formatMessage(messages.websocketReconnecting) }}
 					</div>
 
 					<ServerPanelAdmonitions
@@ -323,7 +309,9 @@
 		v-if="showAdvancedDebugInfo"
 		class="experimental-styles-within relative mx-auto mt-6 box-border w-full min-w-0 max-w-[1280px] px-6"
 	>
-		<h2 class="m-0 text-lg font-extrabold text-contrast">Server data</h2>
+		<h2 class="m-0 text-lg font-extrabold text-contrast">
+			{{ formatMessage(messages.serverDataTitle) }}
+		</h2>
 		<pre class="markdown-body w-full overflow-auto rounded-2xl bg-bg-raised p-4 text-sm">{{
 			safeStringify(serverData)
 		}}</pre>
@@ -362,6 +350,7 @@ import {
 	SettingsIcon,
 	TransferIcon,
 	TriangleAlertIcon,
+	WorldIcon,
 	XIcon,
 } from '@modrinth/assets'
 import type { Stats } from '@modrinth/utils'
@@ -488,6 +477,33 @@ const settingsHintMessages = defineMessages({
 	},
 })
 
+const messages = defineMessages({
+	serverSettings: {
+		id: 'servers.manage.server-settings',
+		defaultMessage: 'Server settings',
+	},
+	overviewNav: {
+		id: 'servers.manage.nav.overview',
+		defaultMessage: 'Overview',
+	},
+	contentNav: {
+		id: 'servers.manage.nav.content',
+		defaultMessage: 'Content',
+	},
+	worldsNav: {
+		id: 'servers.manage.nav.worlds',
+		defaultMessage: 'Worlds',
+	},
+	filesNav: {
+		id: 'servers.manage.nav.files',
+		defaultMessage: 'Files',
+	},
+	backupsNav: {
+		id: 'servers.manage.nav.backups',
+		defaultMessage: 'Backups',
+	},
+})
+
 // disabled, keeping the animation logic cos it's really nice and we might want to re-enable in future
 const DISABLE_LOADING_ANIM = true
 
@@ -768,25 +784,31 @@ watch(serverData, (data) => {
 
 const navLinks = computed<Tab[]>(() => [
 	{
-		label: 'Overview',
+		label: formatMessage(messages.overviewNav),
 		href: `/hosting/manage/${props.serverId}`,
 		icon: LayoutTemplateIcon,
 		subpages: [],
 	},
 	{
-		label: 'Content',
+		label: formatMessage(messages.contentNav),
 		href: `/hosting/manage/${props.serverId}/content`,
 		icon: BoxesIcon,
 		subpages: ['mods', 'datapacks'],
 	},
 	{
-		label: 'Files',
+		label: formatMessage(messages.worldsNav),
+		href: `/hosting/manage/${props.serverId}/worlds`,
+		icon: WorldIcon,
+		subpages: [],
+	},
+	{
+		label: formatMessage(messages.filesNav),
 		href: `/hosting/manage/${props.serverId}/files`,
 		icon: FolderOpenIcon,
 		subpages: [],
 	},
 	{
-		label: 'Backups',
+		label: formatMessage(messages.backupsNav),
 		href: `/hosting/manage/${props.serverId}/backups`,
 		icon: DatabaseBackupIcon,
 		subpages: [],
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/worlds.vue b/packages/ui/src/layouts/wrapped/hosting/manage/worlds.vue
new file mode 100644
index 0000000000..8079184675
--- /dev/null
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/worlds.vue
@@ -0,0 +1,288 @@
+<template>
+	<div class="flex flex-col gap-4">
+		<div
+			v-if="worldsPending"
+			class="grid grid-cols-[repeat(auto-fit,minmax(min(100%,20.25rem),1fr))] gap-6"
+		>
+			<div
+				v-for="slot in WORLD_SLOT_COUNT"
+				:key="`world-card-skeleton-${slot}`"
+				class="min-h-[19.75rem] animate-pulse rounded-2xl border border-solid border-surface-5 bg-bg-raised shadow-xl"
+			/>
+		</div>
+		<div
+			v-else
+			class="grid grid-cols-[repeat(auto-fit,minmax(min(100%,20.25rem),1fr))] gap-6"
+		>
+			<WorldCard
+				v-for="world in worldSlots"
+				:key="world.id"
+				:world="world"
+				@create="handleCreateWorld"
+				@edit="handleEditWorld"
+				@settings="handleEditWorld"
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { Archon } from '@modrinth/api-client'
+import { useQuery } from '@tanstack/vue-query'
+import { computed } from 'vue'
+
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import {
+	injectModrinthClient,
+	injectModrinthServerContext,
+	injectServerSettingsModal,
+} from '#ui/providers'
+import { formatLoaderLabel } from '#ui/utils/loaders'
+
+import WorldCard from './components/WorldCard.vue'
+
+const messages = defineMessages({
+	worldSlotName: {
+		id: 'servers.manage.worlds.slot-name',
+		defaultMessage: 'World #{index}',
+	},
+})
+
+type LinkedModpack = {
+	name: string
+	iconUrl: string | null
+	link: string | null
+}
+
+type WorldSlot =
+	| {
+			type: 'world'
+			id: string
+			name: string
+			active: boolean
+			gameVersion: string | null
+			loaderLabel: string | null
+			linkedModpack: LinkedModpack | null
+			installedContentCount: number | null
+			lastActiveAt: string | null
+			createdAt: string | null
+	  }
+	| {
+			type: 'empty'
+			id: string
+			name: string
+	  }
+
+type ContentSummary = {
+	gameVersion: string | null
+	loader: string | null
+	loaderVersion: string | null
+	linkedModpack: LinkedModpack | null
+	installedContentCount: number | null
+}
+
+const WORLD_SLOT_COUNT = 3
+
+const client = injectModrinthClient()
+const { serverId, server, isServerRunning } = injectModrinthServerContext()
+const { openServerSettings } = injectServerSettingsModal()
+const { formatMessage } = useVIntl()
+
+const worldsQuery = useQuery({
+	queryKey: computed(() => ['servers', 'worlds', 'summary', 'v1', serverId]),
+	queryFn: loadWorldSlots,
+	staleTime: 30_000,
+})
+
+const worldsPending = computed(() => worldsQuery.isLoading.value && !worldsQuery.data.value)
+const worldSlots = computed(() => worldsQuery.data.value ?? [])
+
+async function loadWorldSlots(): Promise<WorldSlot[]> {
+	try {
+		const serverFull = await client.archon.servers_v1.get(serverId)
+		const slots = await Promise.all(
+			serverFull.worlds.map(async (world, index) => {
+				const content = await loadContentSummary(world, index)
+				return toWorldSlot(world, content)
+			}),
+		)
+
+		return padWorldSlots(slots)
+	} catch {
+		return createDummyWorldSlots()
+	}
+}
+
+async function loadContentSummary(
+	world: Archon.Servers.v1.WorldFull,
+	index: number,
+): Promise<ContentSummary> {
+	try {
+		const content = await client.archon.content_v1.getAddons(serverId, world.id, {
+			addons: true,
+			updates: false,
+		})
+
+		return {
+			gameVersion: content.game_version ?? world.content?.game_version ?? null,
+			loader: content.modloader ?? world.content?.modloader ?? null,
+			loaderVersion: content.modloader_version ?? world.content?.modloader_version ?? null,
+			linkedModpack: getLinkedModpack(content.modpack),
+			installedContentCount: content.addons?.length ?? 0,
+		}
+	} catch {
+		return createDummyContentSummary(world, index)
+	}
+}
+
+function toWorldSlot(
+	world: Archon.Servers.v1.WorldFull,
+	content: ContentSummary,
+): WorldSlot {
+	return {
+		type: 'world',
+		id: world.id,
+		name: world.name,
+		active: world.is_active,
+		gameVersion: content.gameVersion,
+		loaderLabel: getLoaderLabel(content.loader, content.loaderVersion),
+		linkedModpack: content.linkedModpack,
+		installedContentCount: content.installedContentCount,
+		lastActiveAt: getLatestKnownActivity(world),
+		createdAt: world.created_at,
+	}
+}
+
+function padWorldSlots(slots: WorldSlot[]): WorldSlot[] {
+	const padded = [...slots]
+	for (let i = padded.length; i < WORLD_SLOT_COUNT; i++) {
+		padded.push({
+			type: 'empty',
+			id: `empty-world-slot-${i + 1}`,
+			name: formatMessage(messages.worldSlotName, { index: i + 1 }),
+		})
+	}
+	return padded
+}
+
+function getLinkedModpack(modpack: Archon.Content.v1.ModpackFields | null): LinkedModpack | null {
+	if (!modpack) return null
+
+	const name =
+		modpack.title ??
+		(modpack.spec.platform === 'local_file' ? modpack.spec.name : modpack.spec.project_id)
+
+	return {
+		name,
+		iconUrl: modpack.icon_url ?? null,
+		link: modpack.spec.platform === 'modrinth' ? `/project/${modpack.spec.project_id}` : null,
+	}
+}
+
+function getLoaderLabel(loader: string | null, loaderVersion: string | null): string | null {
+	if (!loader) return null
+	const normalizedLoader = loader.toLowerCase()
+	return [formatLoaderLabel(normalizedLoader), loaderVersion].filter(Boolean).join(' ')
+}
+
+function getLatestKnownActivity(world: Archon.Servers.v1.WorldFull): string | null {
+	const latestBackup = latestDate(world.backups.map((backup) => backup.created_at))
+	if (latestBackup) return latestBackup
+	if (world.is_active && isServerRunning.value) return new Date().toISOString()
+	return world.created_at ?? null
+}
+
+function latestDate(dates: string[]): string | null {
+	let latest = 0
+	let latestIso: string | null = null
+	for (const date of dates) {
+		const timestamp = new Date(date).getTime()
+		if (!Number.isFinite(timestamp) || timestamp <= latest) continue
+		latest = timestamp
+		latestIso = date
+	}
+	return latestIso
+}
+
+function createDummyContentSummary(
+	world: Archon.Servers.v1.WorldFull,
+	index: number,
+): ContentSummary {
+	const gameVersion = world.content?.game_version ?? server.value?.mc_version ?? '1.20.4'
+	const loader = world.content?.modloader ?? server.value?.loader?.toLowerCase() ?? 'fabric'
+	const loaderVersion = world.content?.modloader_version ?? server.value?.loader_version ?? '0.16.6'
+
+	if (index === 0) {
+		return {
+			gameVersion,
+			loader,
+			loaderVersion,
+			linkedModpack: {
+				name: 'Cobblemon Official',
+				iconUrl: null,
+				link: null,
+			},
+			installedContentCount: 47,
+		}
+	}
+
+	return {
+		gameVersion,
+		loader,
+		loaderVersion,
+		linkedModpack: null,
+		installedContentCount: 13,
+	}
+}
+
+function createDummyWorldSlots(): WorldSlot[] {
+	const now = Date.now()
+	const twoHoursAgo = new Date(now - 2 * 60 * 60 * 1000).toISOString()
+	const sixteenDaysAgo = new Date(now - 16 * 24 * 60 * 60 * 1000).toISOString()
+	const createdAt = new Date(now - 197 * 24 * 60 * 60 * 1000).toISOString()
+
+	return [
+		{
+			type: 'world',
+			id: 'dummy-world-1',
+			name: 'Cobbletown',
+			active: true,
+			gameVersion: '1.20.4',
+			loaderLabel: 'Fabric 0.16.6',
+			linkedModpack: {
+				name: 'Cobblemon Official',
+				iconUrl: null,
+				link: null,
+			},
+			installedContentCount: 47,
+			lastActiveAt: twoHoursAgo,
+			createdAt,
+		},
+		{
+			type: 'world',
+			id: 'dummy-world-2',
+			name: 'SMP Season 4',
+			active: false,
+			gameVersion: '1.20.4',
+			loaderLabel: 'Fabric 0.16.6',
+			linkedModpack: null,
+			installedContentCount: 13,
+			lastActiveAt: sixteenDaysAgo,
+			createdAt,
+		},
+		{
+			type: 'empty',
+			id: 'empty-world-slot-3',
+			name: formatMessage(messages.worldSlotName, { index: 3 }),
+		},
+	]
+}
+
+function handleEditWorld() {
+	openServerSettings({ tabId: 'installation' })
+}
+
+function handleCreateWorld() {
+	openServerSettings({ tabId: 'installation' })
+}
+</script>
diff --git a/packages/ui/src/layouts/wrapped/index.ts b/packages/ui/src/layouts/wrapped/index.ts
index d91f53ee78..4916f26783 100644
--- a/packages/ui/src/layouts/wrapped/index.ts
+++ b/packages/ui/src/layouts/wrapped/index.ts
@@ -5,3 +5,4 @@ export { default as ServersManageFilesPage } from './hosting/manage/files.vue'
 export { default as ServersManagePageIndex } from './hosting/manage/index.vue'
 export { default as ServersManageOverviewPage } from './hosting/manage/overview.vue'
 export { default as ServersManageRootLayout } from './hosting/manage/root.vue'
+export { default as ServersManageWorldsPage } from './hosting/manage/worlds.vue'

From 668f47fe15b8805d5b7c12ae866bae605e606a48 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Mon, 27 Apr 2026 13:06:08 +0100
Subject: [PATCH 2/3] fix: lint + i18n

---
 apps/frontend/src/locales/en-US/index.json    |   3 +
 .../hosting/manage/components/WorldCard.vue   |   6 +-
 .../layouts/wrapped/hosting/manage/root.vue   | 265 ++++++++++++++++--
 .../layouts/wrapped/hosting/manage/worlds.vue |  10 +-
 packages/ui/src/locales/en-US/index.json      | 186 ++++++++++++
 5 files changed, 431 insertions(+), 39 deletions(-)

diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 3ff2360a0f..360a90866a 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -3002,6 +3002,9 @@
   "search.filter.locked.server.sync": {
     "message": "Sync with server"
   },
+  "servers.manage.worlds.meta.title": {
+    "message": "Worlds - {server} - Modrinth"
+  },
   "servers.notice.actions": {
     "message": "Actions"
   },
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/components/WorldCard.vue b/packages/ui/src/layouts/wrapped/hosting/manage/components/WorldCard.vue
index db1aacf0bf..c338121c9f 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/components/WorldCard.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/components/WorldCard.vue
@@ -95,9 +95,9 @@
 			<header class="flex min-h-[5.75rem] flex-col justify-center gap-1 px-5 py-4">
 				<div class="flex min-w-0 items-center justify-between gap-3">
 					<span
-						class="m-0 truncate text-xl font-semibold text-contrast"
 						ref="worldNameRef"
 						v-tooltip="truncatedTooltip(worldNameRef, world.name)"
+						class="m-0 truncate text-xl font-semibold text-contrast"
 						>{{ world.name }}</span
 					>
 					<span
@@ -170,7 +170,7 @@
 
 			<footer class="flex items-center justify-between gap-3 px-5 py-4">
 				<ButtonStyled>
-					<button @click="emit('edit', world.id)" class="!shadow-none">
+					<button class="!shadow-none" @click="emit('edit', world.id)">
 						<PencilIcon aria-hidden="true" />
 						{{ formatMessage(messages.editWorld) }}
 					</button>
@@ -178,8 +178,8 @@
 				<ButtonStyled circular>
 					<button
 						v-tooltip="formatMessage(messages.worldSettings)"
-						@click="emit('settings', world.id)"
 						class="!shadow-none"
+						@click="emit('settings', world.id)"
 					>
 						<Settings2Icon aria-hidden="true" />
 					</button>
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
index a92662ab14..4eff631093 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
@@ -478,6 +478,139 @@ const settingsHintMessages = defineMessages({
 })
 
 const messages = defineMessages({
+	serverPreparingTitle: {
+		id: 'servers.manage.status.preparing.title',
+		defaultMessage: "We're getting your server ready",
+	},
+	serverPreparingDescription: {
+		id: 'servers.manage.status.preparing.description',
+		defaultMessage: "Your server's hardware is being prepared and will be available shortly!",
+	},
+	serverUpgradingTitle: {
+		id: 'servers.manage.status.upgrading.title',
+		defaultMessage: 'Server upgrading',
+	},
+	serverUpgradingDescription: {
+		id: 'servers.manage.status.upgrading.description',
+		defaultMessage:
+			"Your server's hardware is currently being upgraded and will be back online shortly!",
+	},
+	serverSuspendedTitle: {
+		id: 'servers.manage.status.suspended.title',
+		defaultMessage: 'Server suspended',
+	},
+	suspendedCancelledDescription: {
+		id: 'servers.manage.status.suspended.cancelled-description',
+		defaultMessage:
+			'Your subscription has been cancelled.\nContact Modrinth Support if you believe this is an error.',
+	},
+	suspendedReasonDescription: {
+		id: 'servers.manage.status.suspended.reason-description',
+		defaultMessage:
+			'Your server has been suspended: {reason}\nContact Modrinth Support if you believe this is an error.',
+	},
+	suspendedDescription: {
+		id: 'servers.manage.status.suspended.description',
+		defaultMessage:
+			'Your server has been suspended.\nContact Modrinth Support if you believe this is an error.',
+	},
+	generalErrorTitle: {
+		id: 'servers.manage.error.general.title',
+		defaultMessage: 'An error occurred.',
+	},
+	genericErrorMessage: {
+		id: 'servers.manage.error.general.message',
+		defaultMessage: 'An unexpected error occurred.',
+	},
+	contactSupportDescription: {
+		id: 'servers.manage.error.contact-support',
+		defaultMessage: 'Please contact Modrinth Support.',
+	},
+	nodeUnavailableTitle: {
+		id: 'servers.manage.error.node-unavailable.title',
+		defaultMessage: 'Server Node Unavailable',
+	},
+	nodeUnavailableDescription: {
+		id: 'servers.manage.error.node-unavailable.description',
+		defaultMessage:
+			"Your server's node, where your Modrinth Server is physically hosted, is not accessible at the moment. We are working to resolve the issue as quickly as possible.",
+	},
+	nodeUnavailableDataDescription: {
+		id: 'servers.manage.error.node-unavailable.data-description',
+		defaultMessage:
+			'Your data is safe and will not be lost, and your server will be back online as soon as the issue is resolved.',
+	},
+	nodeUnavailableSupportDescription: {
+		id: 'servers.manage.error.node-unavailable.support-description',
+		defaultMessage:
+			"If reloading does not work initially, please contact Modrinth Support via the chat bubble in the bottom right corner and we'll be happy to help.",
+	},
+	installInvalidVersionDescription: {
+		id: 'servers.manage.error.install.invalid-version.description',
+		defaultMessage:
+			'An invalid loader or Minecraft version was specified and could not be installed.',
+	},
+	installRecentMinecraftVersionNotice: {
+		id: 'servers.manage.error.install.invalid-version.recent-minecraft',
+		defaultMessage:
+			'If this version of Minecraft was released recently, please check if Modrinth Hosting supports it.',
+	},
+	installModpackCompatibilityNotice: {
+		id: 'servers.manage.error.install.invalid-version.modpack-compatibility',
+		defaultMessage:
+			"If you've installed a modpack, it may have been packaged incorrectly or may not be compatible with the loader.",
+	},
+	installChangeLoaderNotice: {
+		id: 'servers.manage.error.install.invalid-version.change-loader',
+		defaultMessage:
+			'Your server may need to be reinstalled with a valid mod loader and version. You can change the loader by clicking the "Change Loader" button.',
+	},
+	installSupportNotice: {
+		id: 'servers.manage.error.install.invalid-version.support',
+		defaultMessage: "If you're stuck, please contact Modrinth Support with the information below:",
+	},
+	installInternalErrorDescription: {
+		id: 'servers.manage.error.install.internal.description',
+		defaultMessage:
+			"An internal error occurred while installing your server. Don't fret - try reinstalling your server, and if the problem persists, please contact Modrinth support with your server's debug information.",
+	},
+	installUnsupportedVersionDescription: {
+		id: 'servers.manage.error.install.unsupported-version.description',
+		defaultMessage:
+			"An error occurred while installing your server because Modrinth Hosting does not support the version of Minecraft or the loader you specified. Try reinstalling your server with a different version or loader, and if the problem persists, please contact Modrinth Support with your server's debug information.",
+	},
+	installationErrorTitle: {
+		id: 'servers.manage.error.install.title',
+		defaultMessage: 'Installation error',
+	},
+	unknownError: {
+		id: 'servers.manage.error.unknown',
+		defaultMessage: 'Unknown error',
+	},
+	copyDebugInfo: {
+		id: 'servers.manage.error.copy-debug-info',
+		defaultMessage: 'Copy Debug Info',
+	},
+	openInstallationLog: {
+		id: 'servers.manage.error.open-installation-log',
+		defaultMessage: 'Open Installation Log',
+	},
+	changeLoader: {
+		id: 'servers.manage.error.change-loader',
+		defaultMessage: 'Change Loader',
+	},
+	websocketError: {
+		id: 'servers.manage.websocket.error',
+		defaultMessage: 'Something went wrong...',
+	},
+	websocketReconnecting: {
+		id: 'servers.manage.websocket.reconnecting',
+		defaultMessage: "Hang on, we're reconnecting to your server.",
+	},
+	serverDataTitle: {
+		id: 'servers.manage.debug.server-data',
+		defaultMessage: 'Server data',
+	},
 	serverSettings: {
 		id: 'servers.manage.server-settings',
 		defaultMessage: 'Server settings',
@@ -502,6 +635,67 @@ const messages = defineMessages({
 		id: 'servers.manage.nav.backups',
 		defaultMessage: 'Backups',
 	},
+	errorDismissingNotice: {
+		id: 'servers.manage.notice.dismiss-error',
+		defaultMessage: 'Error dismissing notice',
+	},
+	failedToRetryInstallation: {
+		id: 'servers.manage.install.retry-error',
+		defaultMessage: 'Failed to retry installation',
+	},
+	serverIdLabel: {
+		id: 'servers.manage.error-details.server-id',
+		defaultMessage: 'Server ID',
+	},
+	nodeLabel: {
+		id: 'servers.manage.error-details.node',
+		defaultMessage: 'Node',
+	},
+	errorMessageLabel: {
+		id: 'servers.manage.error-details.error-message',
+		defaultMessage: 'Error message',
+	},
+	timestampLabel: {
+		id: 'servers.manage.error-details.timestamp',
+		defaultMessage: 'Timestamp',
+	},
+	errorNameLabel: {
+		id: 'servers.manage.error-details.error-name',
+		defaultMessage: 'Error Name',
+	},
+	originalErrorLabel: {
+		id: 'servers.manage.error-details.original-error',
+		defaultMessage: 'Original Error',
+	},
+	stackTraceLabel: {
+		id: 'servers.manage.error-details.stack-trace',
+		defaultMessage: 'Stack Trace',
+	},
+	unknownLabel: {
+		id: 'servers.manage.error-details.unknown',
+		defaultMessage: 'Unknown',
+	},
+	nodePingFailed: {
+		id: 'servers.manage.error.node-ping-failed',
+		defaultMessage: 'Unable to reach node. Ping test failed.',
+	},
+	goToBillingSettings: {
+		id: 'servers.manage.action.go-to-billing-settings',
+		defaultMessage: 'Go to billing settings',
+	},
+	goBackToAllServers: {
+		id: 'servers.manage.action.go-back-to-all-servers',
+		defaultMessage: 'Go back to all servers',
+	},
+	reload: {
+		id: 'servers.manage.action.reload',
+		defaultMessage: 'Reload',
+	},
+	debugInfo: {
+		id: 'servers.manage.error.debug-info',
+		defaultMessage:
+			'Server ID: {serverId}\nError: {error}\nKind: {kind}\nProject ID: {projectId}\nVersion ID: {versionId}\nLog: {log}',
+	},
 })
 
 // disabled, keeping the animation logic cos it's really nice and we might want to re-enable in future
@@ -520,8 +714,14 @@ const isLoading = ref(true)
 const isMounted = ref(true)
 const copied = ref(false)
 const installError = ref<Error | null>(null)
-const errorTitle = ref('Error')
-const errorMessage = ref('An unexpected error occurred.')
+type InstallErrorTitle = 'generic' | 'installation'
+const errorTitle = ref<InstallErrorTitle>('generic')
+const errorTitleLabel = computed(() =>
+	errorTitle.value === 'installation'
+		? formatMessage(messages.installationErrorTitle)
+		: formatMessage(messages.generalErrorTitle),
+)
+const errorMessage = ref(formatMessage(messages.genericErrorMessage))
 const errorLog = ref('')
 const errorLogFile = ref('')
 const isOnboarding = computed(() => serverData.value?.flows?.intro)
@@ -824,7 +1024,7 @@ const surveyNotice = computed(() => serverData.value?.notices?.find((n) => n.lev
 async function dismissNotice(noticeId: number) {
 	await client.archon.servers_v0.dismissNotice(props.serverId, noticeId).catch((err) => {
 		addNotification({
-			title: 'Error dismissing notice',
+			title: formatMessage(messages.errorDismissingNotice),
 			text: err,
 			type: 'error',
 		})
@@ -928,7 +1128,7 @@ async function handleContentRetry() {
 	} catch (err) {
 		addNotification({
 			type: 'error',
-			text: err instanceof Error ? err.message : 'Failed to retry installation',
+			text: err instanceof Error ? err.message : formatMessage(messages.failedToRetryInstallation),
 		})
 	}
 }
@@ -978,9 +1178,9 @@ const handleInstallationResult = async (data: Archon.Websocket.v0.WSInstallation
 		case 'err': {
 			console.log('failed to install')
 			console.log(data)
-			errorTitle.value = 'Installation error'
-			errorMessage.value = data.reason ?? 'Unknown error'
-			installError.value = new Error(data.reason ?? 'Unknown error')
+			errorTitle.value = 'installation'
+			errorMessage.value = data.reason ?? formatMessage(messages.unknownError)
+			installError.value = new Error(errorMessage.value)
 
 			try {
 				let files = await client.kyros.files_v0.listDirectory('/', 1, 100)
@@ -1038,8 +1238,8 @@ const onReinstall = async (
 	}
 
 	installError.value = null
-	errorTitle.value = 'Error'
-	errorMessage.value = 'An unexpected error occurred.'
+	errorTitle.value = 'generic'
+	errorMessage.value = formatMessage(messages.genericErrorMessage)
 
 	modrinthServersConsole.clear()
 
@@ -1108,62 +1308,64 @@ const nodeAccessible = ref(true)
 
 const nodeUnavailableDetails = computed(() => [
 	{
-		label: 'Server ID',
+		label: formatMessage(messages.serverIdLabel),
 		value: props.serverId,
 		type: 'inline' as const,
 	},
 	{
-		label: 'Node',
+		label: formatMessage(messages.nodeLabel),
 		value:
 			(serverError.value?.responseData as { hostname?: string } | undefined)?.hostname ??
 			serverData.value?.datacenter ??
-			'Unknown',
+			formatMessage(messages.unknownLabel),
 		type: 'inline' as const,
 	},
 	{
-		label: 'Error message',
+		label: formatMessage(messages.errorMessageLabel),
 		value: nodeAccessible.value
-			? (serverError.value?.message ?? 'Unknown')
-			: 'Unable to reach node. Ping test failed.',
+			? (serverError.value?.message ?? formatMessage(messages.unknownLabel))
+			: formatMessage(messages.nodePingFailed),
 		type: 'block' as const,
 	},
 ])
 
 const suspendedDescription = computed(() => {
 	if (serverData.value?.suspension_reason === 'cancelled') {
-		return 'Your subscription has been cancelled.\nContact Modrinth Support if you believe this is an error.'
+		return formatMessage(messages.suspendedCancelledDescription)
 	}
 	if (serverData.value?.suspension_reason) {
-		return `Your server has been suspended: ${serverData.value.suspension_reason}\nContact Modrinth Support if you believe this is an error.`
+		return formatMessage(messages.suspendedReasonDescription, {
+			reason: serverData.value.suspension_reason,
+		})
 	}
-	return 'Your server has been suspended.\nContact Modrinth Support if you believe this is an error.'
+	return formatMessage(messages.suspendedDescription)
 })
 
 const generalErrorDetails = computed(() => [
 	{
-		label: 'Server ID',
+		label: formatMessage(messages.serverIdLabel),
 		value: props.serverId,
 		type: 'inline' as const,
 	},
 	{
-		label: 'Timestamp',
+		label: formatMessage(messages.timestampLabel),
 		value: String(new Date().toISOString()),
 		type: 'inline' as const,
 	},
 	{
-		label: 'Error Name',
+		label: formatMessage(messages.errorNameLabel),
 		value: serverError.value?.name,
 		type: 'inline' as const,
 	},
 	{
-		label: 'Error Message',
+		label: formatMessage(messages.errorMessageLabel),
 		value: serverError.value?.message,
 		type: 'block' as const,
 	},
 	...(serverError.value?.originalError
 		? [
 				{
-					label: 'Original Error',
+					label: formatMessage(messages.originalErrorLabel),
 					value: String(serverError.value.originalError),
 					type: 'hidden' as const,
 				},
@@ -1172,7 +1374,7 @@ const generalErrorDetails = computed(() => [
 	...(serverError.value?.stack
 		? [
 				{
-					label: 'Stack Trace',
+					label: formatMessage(messages.stackTraceLabel),
 					value: serverError.value.stack,
 					type: 'hidden' as const,
 				},
@@ -1181,26 +1383,33 @@ const generalErrorDetails = computed(() => [
 ])
 
 const suspendedAction = computed(() => ({
-	label: 'Go to billing settings',
+	label: formatMessage(messages.goToBillingSettings),
 	onClick: () => props.navigateToBilling?.(),
 	color: 'brand' as const,
 }))
 
 const generalErrorAction = computed(() => ({
-	label: 'Go back to all servers',
+	label: formatMessage(messages.goBackToAllServers),
 	onClick: () => props.navigateToServers?.(),
 	color: 'brand' as const,
 }))
 
 const nodeUnavailableAction = computed(() => ({
-	label: 'Reload',
+	label: formatMessage(messages.reload),
 	onClick: () => props.reloadPage(),
 	color: 'brand' as const,
 	disabled: false,
 }))
 
 const copyServerDebugInfo = () => {
-	const debugInfo = `Server ID: ${serverData.value?.server_id}\nError: ${errorMessage.value}\nKind: ${serverData.value?.upstream?.kind}\nProject ID: ${serverData.value?.upstream?.project_id}\nVersion ID: ${serverData.value?.upstream?.version_id}\nLog: ${errorLog.value}`
+	const debugInfo = formatMessage(messages.debugInfo, {
+		serverId: serverData.value?.server_id ?? '',
+		error: errorMessage.value,
+		kind: serverData.value?.upstream?.kind ?? '',
+		projectId: serverData.value?.upstream?.project_id ?? '',
+		versionId: serverData.value?.upstream?.version_id ?? '',
+		log: errorLog.value,
+	})
 	navigator.clipboard.writeText(debugInfo)
 	copied.value = true
 	setTimeout(() => {
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/worlds.vue b/packages/ui/src/layouts/wrapped/hosting/manage/worlds.vue
index 8079184675..2e6b9a70d2 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/worlds.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/worlds.vue
@@ -10,10 +10,7 @@
 				class="min-h-[19.75rem] animate-pulse rounded-2xl border border-solid border-surface-5 bg-bg-raised shadow-xl"
 			/>
 		</div>
-		<div
-			v-else
-			class="grid grid-cols-[repeat(auto-fit,minmax(min(100%,20.25rem),1fr))] gap-6"
-		>
+		<div v-else class="grid grid-cols-[repeat(auto-fit,minmax(min(100%,20.25rem),1fr))] gap-6">
 			<WorldCard
 				v-for="world in worldSlots"
 				:key="world.id"
@@ -135,10 +132,7 @@ async function loadContentSummary(
 	}
 }
 
-function toWorldSlot(
-	world: Archon.Servers.v1.WorldFull,
-	content: ContentSummary,
-): WorldSlot {
+function toWorldSlot(world: Archon.Servers.v1.WorldFull, content: ContentSummary): WorldSlot {
 	return {
 		type: 'world',
 		id: world.id,
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index cadb575b23..626d889c12 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -3191,6 +3191,15 @@
   "servers.listing.using-project-label": {
     "defaultMessage": "Using {projectTitle}"
   },
+  "servers.manage.action.go-back-to-all-servers": {
+    "defaultMessage": "Go back to all servers"
+  },
+  "servers.manage.action.go-to-billing-settings": {
+    "defaultMessage": "Go to billing settings"
+  },
+  "servers.manage.action.reload": {
+    "defaultMessage": "Reload"
+  },
   "servers.manage.checking-for-new-servers": {
     "defaultMessage": "Checking for new servers..."
   },
@@ -3203,15 +3212,102 @@
   "servers.manage.contact-support-button": {
     "defaultMessage": "Contact Modrinth Support"
   },
+  "servers.manage.debug.server-data": {
+    "defaultMessage": "Server data"
+  },
+  "servers.manage.error-details.error-message": {
+    "defaultMessage": "Error message"
+  },
+  "servers.manage.error-details.error-name": {
+    "defaultMessage": "Error Name"
+  },
+  "servers.manage.error-details.node": {
+    "defaultMessage": "Node"
+  },
+  "servers.manage.error-details.original-error": {
+    "defaultMessage": "Original Error"
+  },
+  "servers.manage.error-details.server-id": {
+    "defaultMessage": "Server ID"
+  },
+  "servers.manage.error-details.stack-trace": {
+    "defaultMessage": "Stack Trace"
+  },
+  "servers.manage.error-details.timestamp": {
+    "defaultMessage": "Timestamp"
+  },
+  "servers.manage.error-details.unknown": {
+    "defaultMessage": "Unknown"
+  },
   "servers.manage.error.alert-notice": {
     "defaultMessage": "Our systems automatically alert our team when there's an issue. We are already working on getting them back online."
   },
+  "servers.manage.error.change-loader": {
+    "defaultMessage": "Change Loader"
+  },
+  "servers.manage.error.contact-support": {
+    "defaultMessage": "Please contact Modrinth Support."
+  },
+  "servers.manage.error.copy-debug-info": {
+    "defaultMessage": "Copy Debug Info"
+  },
+  "servers.manage.error.debug-info": {
+    "defaultMessage": "Server ID: {serverId}\nError: {error}\nKind: {kind}\nProject ID: {projectId}\nVersion ID: {versionId}\nLog: {log}"
+  },
   "servers.manage.error.description": {
     "defaultMessage": "We may have temporary issues with our servers."
   },
   "servers.manage.error.details": {
     "defaultMessage": "Error details:"
   },
+  "servers.manage.error.general.message": {
+    "defaultMessage": "An unexpected error occurred."
+  },
+  "servers.manage.error.general.title": {
+    "defaultMessage": "An error occurred."
+  },
+  "servers.manage.error.install.internal.description": {
+    "defaultMessage": "An internal error occurred while installing your server. Don't fret - try reinstalling your server, and if the problem persists, please contact Modrinth support with your server's debug information."
+  },
+  "servers.manage.error.install.invalid-version.change-loader": {
+    "defaultMessage": "Your server may need to be reinstalled with a valid mod loader and version. You can change the loader by clicking the \"Change Loader\" button."
+  },
+  "servers.manage.error.install.invalid-version.description": {
+    "defaultMessage": "An invalid loader or Minecraft version was specified and could not be installed."
+  },
+  "servers.manage.error.install.invalid-version.modpack-compatibility": {
+    "defaultMessage": "If you've installed a modpack, it may have been packaged incorrectly or may not be compatible with the loader."
+  },
+  "servers.manage.error.install.invalid-version.recent-minecraft": {
+    "defaultMessage": "If this version of Minecraft was released recently, please check if Modrinth Hosting supports it."
+  },
+  "servers.manage.error.install.invalid-version.support": {
+    "defaultMessage": "If you're stuck, please contact Modrinth Support with the information below:"
+  },
+  "servers.manage.error.install.title": {
+    "defaultMessage": "Installation error"
+  },
+  "servers.manage.error.install.unsupported-version.description": {
+    "defaultMessage": "An error occurred while installing your server because Modrinth Hosting does not support the version of Minecraft or the loader you specified. Try reinstalling your server with a different version or loader, and if the problem persists, please contact Modrinth Support with your server's debug information."
+  },
+  "servers.manage.error.node-ping-failed": {
+    "defaultMessage": "Unable to reach node. Ping test failed."
+  },
+  "servers.manage.error.node-unavailable.data-description": {
+    "defaultMessage": "Your data is safe and will not be lost, and your server will be back online as soon as the issue is resolved."
+  },
+  "servers.manage.error.node-unavailable.description": {
+    "defaultMessage": "Your server's node, where your Modrinth Server is physically hosted, is not accessible at the moment. We are working to resolve the issue as quickly as possible."
+  },
+  "servers.manage.error.node-unavailable.support-description": {
+    "defaultMessage": "If reloading does not work initially, please contact Modrinth Support via the chat bubble in the bottom right corner and we'll be happy to help."
+  },
+  "servers.manage.error.node-unavailable.title": {
+    "defaultMessage": "Server Node Unavailable"
+  },
+  "servers.manage.error.open-installation-log": {
+    "defaultMessage": "Open Installation Log"
+  },
   "servers.manage.error.queue-notice": {
     "defaultMessage": "If you recently purchased your Modrinth Hosting server, it is currently in a queue and will appear here as soon as it's ready. <warning>Do not attempt to purchase a new server.</warning>"
   },
@@ -3221,15 +3317,39 @@
   "servers.manage.error.title": {
     "defaultMessage": "Servers could not be loaded"
   },
+  "servers.manage.error.unknown": {
+    "defaultMessage": "Unknown error"
+  },
   "servers.manage.handle-error.title": {
     "defaultMessage": "An error occurred"
   },
+  "servers.manage.install.retry-error": {
+    "defaultMessage": "Failed to retry installation"
+  },
+  "servers.manage.nav.backups": {
+    "defaultMessage": "Backups"
+  },
+  "servers.manage.nav.content": {
+    "defaultMessage": "Content"
+  },
+  "servers.manage.nav.files": {
+    "defaultMessage": "Files"
+  },
+  "servers.manage.nav.overview": {
+    "defaultMessage": "Overview"
+  },
+  "servers.manage.nav.worlds": {
+    "defaultMessage": "Worlds"
+  },
   "servers.manage.new-server-button": {
     "defaultMessage": "New server"
   },
   "servers.manage.no-servers-found": {
     "defaultMessage": "No servers found."
   },
+  "servers.manage.notice.dismiss-error": {
+    "defaultMessage": "Error dismissing notice"
+  },
   "servers.manage.purchase-unavailable.text": {
     "defaultMessage": "Payment information is still loading. Opening checkout as soon as it is ready."
   },
@@ -3260,6 +3380,9 @@
   "servers.manage.search-placeholder": {
     "defaultMessage": "Search {count} {count, plural, one {server} other {servers}}..."
   },
+  "servers.manage.server-settings": {
+    "defaultMessage": "Server settings"
+  },
   "servers.manage.servers-title": {
     "defaultMessage": "Modrinth Hosting"
   },
@@ -3272,6 +3395,69 @@
   "servers.manage.settings-hint.title": {
     "defaultMessage": "Your server settings have moved"
   },
+  "servers.manage.status.preparing.description": {
+    "defaultMessage": "Your server's hardware is being prepared and will be available shortly!"
+  },
+  "servers.manage.status.preparing.title": {
+    "defaultMessage": "We're getting your server ready"
+  },
+  "servers.manage.status.suspended.cancelled-description": {
+    "defaultMessage": "Your subscription has been cancelled.\nContact Modrinth Support if you believe this is an error."
+  },
+  "servers.manage.status.suspended.description": {
+    "defaultMessage": "Your server has been suspended.\nContact Modrinth Support if you believe this is an error."
+  },
+  "servers.manage.status.suspended.reason-description": {
+    "defaultMessage": "Your server has been suspended: {reason}\nContact Modrinth Support if you believe this is an error."
+  },
+  "servers.manage.status.suspended.title": {
+    "defaultMessage": "Server suspended"
+  },
+  "servers.manage.status.upgrading.description": {
+    "defaultMessage": "Your server's hardware is currently being upgraded and will be back online shortly!"
+  },
+  "servers.manage.status.upgrading.title": {
+    "defaultMessage": "Server upgrading"
+  },
+  "servers.manage.websocket.error": {
+    "defaultMessage": "Something went wrong..."
+  },
+  "servers.manage.websocket.reconnecting": {
+    "defaultMessage": "Hang on, we're reconnecting to your server."
+  },
+  "servers.manage.worlds.card.active": {
+    "defaultMessage": "Active"
+  },
+  "servers.manage.worlds.card.create": {
+    "defaultMessage": "Create world"
+  },
+  "servers.manage.worlds.card.created": {
+    "defaultMessage": "Created"
+  },
+  "servers.manage.worlds.card.edit": {
+    "defaultMessage": "Edit world"
+  },
+  "servers.manage.worlds.card.empty-description": {
+    "defaultMessage": "New world instance"
+  },
+  "servers.manage.worlds.card.installed-content": {
+    "defaultMessage": "Installed content"
+  },
+  "servers.manage.worlds.card.last-active": {
+    "defaultMessage": "Last active"
+  },
+  "servers.manage.worlds.card.none": {
+    "defaultMessage": "None"
+  },
+  "servers.manage.worlds.card.not-tracked-yet": {
+    "defaultMessage": "Not tracked yet"
+  },
+  "servers.manage.worlds.card.settings": {
+    "defaultMessage": "World settings"
+  },
+  "servers.manage.worlds.slot-name": {
+    "defaultMessage": "World #{index}"
+  },
   "servers.medal-listing.countdown.remaining": {
     "defaultMessage": "<days-count>{days}</days-count> {days, plural, one {day} other {days}} <hours-count>{hours}</hours-count> {hours, plural, one {hour} other {hours}} <minutes-count>{minutes}</minutes-count> {minutes, plural, one {minute} other {minutes}} <seconds-count>{seconds}</seconds-count> {seconds, plural, one {second} other {seconds}} remaining..."
   },

From ce99c35288b5505f6efedbd4114a1cbfdeb6ce23 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Mon, 27 Apr 2026 14:13:17 +0100
Subject: [PATCH 3/3] feat: world card alignment

---
 .../layouts/wrapped/hosting/manage/components/WorldCard.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/components/WorldCard.vue b/packages/ui/src/layouts/wrapped/hosting/manage/components/WorldCard.vue
index c338121c9f..fbf4244d45 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/components/WorldCard.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/components/WorldCard.vue
@@ -74,8 +74,8 @@
 					</defs>
 				</svg>
 				<div class="mt-6 flex flex-col gap-1">
-					<h2 class="m-0 text-2xl font-extrabold leading-8 text-contrast">{{ world.name }}</h2>
-					<p class="m-0 text-base font-medium leading-6 text-secondary">
+					<h2 class="m-0 text-2xl font-semibold leading-8 text-contrast">{{ world.name }}</h2>
+					<p class="m-0 text-base leading-6 text-secondary">
 						{{ formatMessage(messages.newWorldInstance) }}
 					</p>
 				</div>
@@ -83,7 +83,7 @@
 
 			<div class="px-5 pb-4">
 				<ButtonStyled color="brand">
-					<button class="w-full" @click="emit('create', world.id)">
+					<button class="w-full !h-10" @click="emit('create', world.id)">
 						<PlusIcon aria-hidden="true" />
 						{{ formatMessage(messages.createWorld) }}
 					</button>