From 21fb17ad2e42f0d58d627b1d9030febd29aa0c70 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Mon, 3 Aug 2026 07:56:03 +0100
Subject: [PATCH 01/13] feat: server play frontend draft

---
 .../src/composables/use-app-settings.ts       |   1 +
 .../src/pages/hosting/manage/Index.vue        |   1 +
 .../src/pages/hosting/manage/Play.vue         |  18 ++
 .../src/pages/hosting/manage/index.js         |   3 +-
 apps/app-frontend/src/routes.js               |   5 +
 apps/frontend/src/composables/featureFlags.ts |   1 +
 .../src/pages/hosting/manage/[id].vue         |   1 +
 .../src/pages/hosting/manage/[id]/play.vue    |  19 ++
 .../manage/[id]/play/ServerPlayCard.vue       | 175 +++++++++++++
 .../manage/[id]/play/ServerPlayersTable.vue   | 200 ++++++++++++++
 .../wrapped/hosting/manage/[id]/play/play.vue | 245 ++++++++++++++++++
 .../wrapped/hosting/manage/[id]/play/types.ts |  11 +
 .../layouts/wrapped/hosting/manage/root.vue   |  13 +
 packages/ui/src/layouts/wrapped/index.ts      |   1 +
 14 files changed, 693 insertions(+), 1 deletion(-)
 create mode 100644 apps/app-frontend/src/pages/hosting/manage/Play.vue
 create mode 100644 apps/frontend/src/pages/hosting/manage/[id]/play.vue
 create mode 100644 packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayCard.vue
 create mode 100644 packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayersTable.vue
 create mode 100644 packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/play.vue
 create mode 100644 packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/types.ts

diff --git a/apps/app-frontend/src/composables/use-app-settings.ts b/apps/app-frontend/src/composables/use-app-settings.ts
index 0d58903fa12..9170b991820 100644
--- a/apps/app-frontend/src/composables/use-app-settings.ts
+++ b/apps/app-frontend/src/composables/use-app-settings.ts
@@ -23,6 +23,7 @@ export const DEFAULT_FEATURE_FLAGS = {
 	friends_offline_collapsed: true,
 	friends_pending_collapsed: true,
 	dismissed_photosensitivity_filter_warning: false,
+	ServerPlayFrontend: false,
 	localhost_sign_in: false,
 }
 
diff --git a/apps/app-frontend/src/pages/hosting/manage/Index.vue b/apps/app-frontend/src/pages/hosting/manage/Index.vue
index e182d1386fc..2a805918683 100644
--- a/apps/app-frontend/src/pages/hosting/manage/Index.vue
+++ b/apps/app-frontend/src/pages/hosting/manage/Index.vue
@@ -9,6 +9,7 @@
 			:reload-page="() => router.go(0)"
 			:resolve-viewer="resolveViewer"
 			:show-copy-id-action="appSettings.devMode"
+			:show-play-tab="appSettings.getFeatureFlag('ServerPlayFrontend')"
 			:auth-user="authUser"
 			:navigate-to-billing="() => openUrl('https://modrinth.com/settings/billing')"
 			:navigate-to-servers="() => router.push('/hosting/manage')"
diff --git a/apps/app-frontend/src/pages/hosting/manage/Play.vue b/apps/app-frontend/src/pages/hosting/manage/Play.vue
new file mode 100644
index 00000000000..3728c9ceb07
--- /dev/null
+++ b/apps/app-frontend/src/pages/hosting/manage/Play.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { ServersManagePlayPage } from '@modrinth/ui'
+import { useRoute, useRouter } from 'vue-router'
+
+import { useAppSettings } from '@/composables/use-app-settings.ts'
+
+const route = useRoute()
+const router = useRouter()
+const appSettings = useAppSettings()
+
+if (!appSettings.getFeatureFlag('ServerPlayFrontend')) {
+	await router.replace(`/hosting/manage/${String(route.params.id)}`)
+}
+</script>
+
+<template>
+	<ServersManagePlayPage />
+</template>
diff --git a/apps/app-frontend/src/pages/hosting/manage/index.js b/apps/app-frontend/src/pages/hosting/manage/index.js
index 0c10b07133d..073c5492961 100644
--- a/apps/app-frontend/src/pages/hosting/manage/index.js
+++ b/apps/app-frontend/src/pages/hosting/manage/index.js
@@ -4,5 +4,6 @@ import Content from './Content.vue'
 import Files from './Files.vue'
 import Index from './Index.vue'
 import Overview from './Overview.vue'
+import Play from './Play.vue'
 
-export { Access, Backups, Content, Files, Index, Overview }
+export { Access, Backups, Content, Files, Index, Overview, Play }
diff --git a/apps/app-frontend/src/routes.js b/apps/app-frontend/src/routes.js
index d94d13109d2..4ec2ce94fe0 100644
--- a/apps/app-frontend/src/routes.js
+++ b/apps/app-frontend/src/routes.js
@@ -20,6 +20,11 @@ export default new createRouter({
 			name: 'ServerManage',
 			component: () => import('@/pages/hosting/manage/Index.vue'),
 			children: [
+				{
+					path: 'play',
+					name: 'ServerManagePlay',
+					component: Hosting.Play,
+				},
 				{
 					path: '',
 					name: 'ServerManageOverview',
diff --git a/apps/frontend/src/composables/featureFlags.ts b/apps/frontend/src/composables/featureFlags.ts
index 1165ef04cca..e7300aec278 100644
--- a/apps/frontend/src/composables/featureFlags.ts
+++ b/apps/frontend/src/composables/featureFlags.ts
@@ -59,6 +59,7 @@ export const DEFAULT_FEATURE_FLAGS = validateValues({
 	alwaysShowVersionDevInfo: false,
 	advancedFiltersCollapsed: true,
 	dismissedPhotosensitivityFilterWarning: false,
+	ServerPlayFrontend: false,
 } as const)
 
 export type FeatureFlag = keyof typeof DEFAULT_FEATURE_FLAGS
diff --git a/apps/frontend/src/pages/hosting/manage/[id].vue b/apps/frontend/src/pages/hosting/manage/[id].vue
index 5f6d5245f42..9e218386abf 100644
--- a/apps/frontend/src/pages/hosting/manage/[id].vue
+++ b/apps/frontend/src/pages/hosting/manage/[id].vue
@@ -5,6 +5,7 @@
 		:resolve-viewer="resolveViewer"
 		:show-copy-id-action="flags.developerMode"
 		:show-advanced-debug-info="flags.advancedDebugInfo"
+		:show-play-tab="flags.ServerPlayFrontend"
 		:stripe-publishable-key="config.public.stripePublishableKey as string"
 		:site-url="config.public.siteUrl as string"
 		:products="products"
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/play.vue b/apps/frontend/src/pages/hosting/manage/[id]/play.vue
new file mode 100644
index 00000000000..b4866d98f76
--- /dev/null
+++ b/apps/frontend/src/pages/hosting/manage/[id]/play.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { injectModrinthServerContext, ServersManagePlayPage } from '@modrinth/ui'
+
+const { server } = injectModrinthServerContext()
+const flags = useFeatureFlags()
+const route = useNativeRoute()
+
+if (!flags.value.ServerPlayFrontend) {
+	await navigateTo(`/hosting/manage/${String(route.params.id)}`, { replace: true })
+}
+
+useHead({
+	title: computed(() => `Play - ${server.value?.name ?? 'Server'} - Modrinth`),
+})
+</script>
+
+<template>
+	<ServersManagePlayPage />
+</template>
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayCard.vue b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayCard.vue
new file mode 100644
index 00000000000..b5159719929
--- /dev/null
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayCard.vue
@@ -0,0 +1,175 @@
+<template>
+	<section
+		class="flex flex-col gap-4 rounded-[20px] border border-solid border-surface-4 bg-surface-3 p-5"
+	>
+		<div class="flex flex-col gap-8 md:flex-row md:items-center">
+			<div class="flex min-w-0 flex-1 flex-col gap-0.5">
+				<h2 class="m-0 text-xl font-semibold text-contrast">
+					{{ formatMessage(messages.playWithAppTitle) }}
+				</h2>
+				<p class="m-0 text-base leading-6 text-primary">
+					{{ formatMessage(messages.playWithAppDescription) }}
+				</p>
+			</div>
+			<div class="flex shrink-0 flex-col gap-2 md:w-[164px]">
+				<ButtonStyled color="brand">
+					<button class="!h-10 w-full" @click="emit('play')">
+						<PlayIcon aria-hidden="true" />
+						{{ formatMessage(messages.playServerButton) }}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled>
+					<button class="!h-10 w-full" @click="emit('invite')">
+						<UserPlusIcon aria-hidden="true" />
+						{{ formatMessage(messages.invitePlayersButton) }}
+					</button>
+				</ButtonStyled>
+			</div>
+		</div>
+
+		<div class="flex flex-col gap-3">
+			<div class="h-px w-full bg-surface-4"></div>
+			<div class="flex flex-col gap-0.5">
+				<h2 class="m-0 text-xl font-semibold text-contrast">
+					{{ formatMessage(messages.differentLauncherTitle) }}
+				</h2>
+				<p class="m-0 text-base leading-6 text-primary">
+					{{ formatMessage(messages.differentLauncherDescription) }}
+				</p>
+			</div>
+			<div class="flex flex-col gap-2 sm:flex-row sm:items-center">
+				<div class="joined-buttons shrink-0">
+					<ButtonStyled>
+						<a
+							v-if="modpackDownloadUrl"
+							class="!h-10"
+							:href="modpackDownloadUrl"
+							:download="modpackFilename"
+						>
+							<DownloadIcon aria-hidden="true" />
+							{{ formatMessage(messages.downloadModpackButton) }}
+						</a>
+						<button v-else type="button" class="!h-10">
+							<DownloadIcon aria-hidden="true" />
+							{{ formatMessage(messages.downloadModpackButton) }}
+						</button>
+					</ButtonStyled>
+					<ButtonStyled>
+						<a
+							v-if="modpackDownloadUrl"
+							v-tooltip="formatMessage(messages.downloadModpackButton)"
+							class="!h-10 !w-10 !px-0"
+							:href="modpackDownloadUrl"
+							:download="modpackFilename"
+							:aria-label="formatMessage(messages.downloadModpackButton)"
+						>
+							<ChevronDownIcon aria-hidden="true" />
+						</a>
+						<button
+							v-else
+							v-tooltip="formatMessage(messages.downloadModpackButton)"
+							type="button"
+							class="!h-10 !w-10 !px-0"
+							:aria-label="formatMessage(messages.downloadModpackButton)"
+						>
+							<ChevronDownIcon aria-hidden="true" />
+						</button>
+					</ButtonStyled>
+				</div>
+				<div
+					class="flex h-10 min-w-0 items-center justify-between gap-3 rounded-xl bg-surface-2 px-4 sm:w-[313px]"
+				>
+					<span class="min-w-0 truncate font-semibold text-primary">{{ address }}</span>
+					<button
+						v-tooltip="formatMessage(copied ? messages.copiedAddress : messages.copyAddress)"
+						type="button"
+						class="flex shrink-0 cursor-pointer items-center border-0 bg-transparent p-0 text-primary"
+						:aria-label="formatMessage(copied ? messages.copiedAddress : messages.copyAddress)"
+						@click="copyAddress"
+					>
+						<CheckIcon v-if="copied" class="size-5 text-brand" aria-hidden="true" />
+						<CopyIcon v-else class="size-5" aria-hidden="true" />
+					</button>
+				</div>
+			</div>
+		</div>
+	</section>
+</template>
+
+<script setup lang="ts">
+import {
+	CheckIcon,
+	ChevronDownIcon,
+	CopyIcon,
+	DownloadIcon,
+	PlayIcon,
+	UserPlusIcon,
+} from '@modrinth/assets'
+import { ref } from 'vue'
+
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+
+const props = defineProps<{
+	address: string
+	modpackDownloadUrl?: string
+	modpackFilename?: string
+}>()
+
+const emit = defineEmits<{
+	play: []
+	invite: []
+}>()
+
+const { formatMessage } = useVIntl()
+const copied = ref(false)
+
+const messages = defineMessages({
+	playWithAppTitle: {
+		id: 'servers.play.card.app.title',
+		defaultMessage: 'Play with Modrinth App',
+	},
+	playWithAppDescription: {
+		id: 'servers.play.card.app.description',
+		defaultMessage:
+			'The easiest way to play is with the Modrinth App, which automatically installs all the required content for you and the players on your server.',
+	},
+	playServerButton: {
+		id: 'servers.play.card.app.play-button',
+		defaultMessage: 'Play server',
+	},
+	invitePlayersButton: {
+		id: 'servers.play.card.app.invite-button',
+		defaultMessage: 'Invite players',
+	},
+	differentLauncherTitle: {
+		id: 'servers.play.card.launcher.title',
+		defaultMessage: 'Using a Different Launcher?',
+	},
+	differentLauncherDescription: {
+		id: 'servers.play.card.launcher.description',
+		defaultMessage:
+			'Install the required content using your preferred launcher, then add the server address in-game to join.',
+	},
+	downloadModpackButton: {
+		id: 'servers.play.card.launcher.download-button',
+		defaultMessage: 'Download modpack',
+	},
+	copyAddress: {
+		id: 'servers.play.card.address.copy',
+		defaultMessage: 'Copy server address',
+	},
+	copiedAddress: {
+		id: 'servers.play.card.address.copied',
+		defaultMessage: 'Server address copied',
+	},
+})
+
+async function copyAddress() {
+	await navigator.clipboard.writeText(props.address)
+	copied.value = true
+	setTimeout(() => {
+		copied.value = false
+	}, 2000)
+}
+</script>
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayersTable.vue b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayersTable.vue
new file mode 100644
index 00000000000..f2359226557
--- /dev/null
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayersTable.vue
@@ -0,0 +1,200 @@
+<template>
+	<div class="flex flex-col gap-4">
+		<div class="flex flex-col gap-2 md:flex-row">
+			<StyledInput
+				v-model="search"
+				:icon="SearchIcon"
+				:placeholder="`Search ${rows.length} users...`"
+				wrapper-class="min-w-0 flex-1"
+				input-class="!h-10"
+				clearable
+			/>
+			<Combobox
+				v-model="methodFilter"
+				class="md:!w-auto md:shrink-0"
+				:options="methodFilterOptions"
+				:display-value="selectedMethodFilterLabel"
+				trigger-class="min-w-[176px] !h-10 !min-h-10 !py-0"
+			>
+				<template #prefix>
+					<FilterIcon class="size-5 text-secondary" aria-hidden="true" />
+				</template>
+			</Combobox>
+		</div>
+
+		<Table
+			v-model:sort-column="sortColumn"
+			v-model:sort-direction="sortDirection"
+			:columns="columns"
+			:data="sortedRows"
+			row-key="id"
+			table-min-width="50rem"
+			@sort="handleSort"
+		>
+			<template #empty-state>
+				<div class="flex h-64 items-center justify-center px-4 text-center text-secondary">
+					No users match your filters.
+				</div>
+			</template>
+			<template #cell-username="{ row }">
+				<div class="flex min-w-0 max-w-full items-center gap-2">
+					<Avatar
+						:src="row.avatarUrl"
+						:alt="`${row.username}'s avatar`"
+						:tint-by="row.username"
+						size="24px"
+						circle
+						no-shadow
+					/>
+					<span class="min-w-0 truncate font-medium text-primary">{{ row.username }}</span>
+				</div>
+			</template>
+			<template #cell-lastPlayed="{ row }">
+				<span v-if="row.lastPlayedAt" v-tooltip="formatDateTime(row.lastPlayedAt)">
+					{{ formatPlayerDate(row.lastPlayedAt) }}
+				</span>
+				<span v-else>Never</span>
+			</template>
+			<template #cell-joined="{ row }">
+				<span
+					v-if="row.pending"
+					class="inline-flex h-7 items-center rounded-full border border-solid border-surface-5 bg-surface-4 px-2.5 py-1 text-sm font-semibold text-secondary"
+				>
+					Pending
+				</span>
+				<span v-else-if="row.joinedAt" v-tooltip="formatDateTime(row.joinedAt)">
+					{{ formatPlayerDate(row.joinedAt) }}
+				</span>
+			</template>
+			<template #cell-method="{ row }">
+				<span class="inline-flex min-w-0 items-center gap-2">
+					<UserPlusIcon v-if="row.method === 'direct'" class="size-5 shrink-0" />
+					<LinkIcon v-else class="size-5 shrink-0" />
+					<span class="min-w-0 truncate">{{ methodLabel(row.method) }}</span>
+				</span>
+			</template>
+			<template #cell-actions="{ row }">
+				<div class="flex items-center justify-end">
+					<ButtonStyled circular type="transparent">
+						<button
+							v-tooltip="row.pending ? 'Revoke invite' : 'More actions'"
+							:aria-label="`${row.pending ? 'Revoke invite' : 'More actions'} for ${row.username}`"
+							class="text-secondary hover:!filter-none"
+							:class="row.pending ? 'hover:text-red' : ''"
+							@click="row.pending ? emit('remove', row) : emit('open-actions', row)"
+						>
+							<XIcon v-if="row.pending" aria-hidden="true" />
+							<MoreHorizontalIcon v-else aria-hidden="true" />
+						</button>
+					</ButtonStyled>
+				</div>
+			</template>
+		</Table>
+	</div>
+</template>
+
+<script setup lang="ts">
+import {
+	FilterIcon,
+	LinkIcon,
+	MoreHorizontalIcon,
+	SearchIcon,
+	UserPlusIcon,
+	XIcon,
+} from '@modrinth/assets'
+import { computed, ref } from 'vue'
+
+import Avatar from '#ui/components/base/Avatar.vue'
+import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import Combobox, { type ComboboxOption } from '#ui/components/base/Combobox.vue'
+import StyledInput from '#ui/components/base/StyledInput.vue'
+import Table, { type SortDirection, type TableColumn } from '#ui/components/base/Table.vue'
+import { useFormatDateTime, useRelativeTime } from '#ui/composables'
+
+import type { ServerPlayerMethod, ServerPlayerRow } from './types'
+
+type MethodFilter = ServerPlayerMethod | 'all'
+type PlayerColumn = 'username' | 'lastPlayed' | 'joined' | 'method' | 'actions'
+
+const props = defineProps<{ rows: ServerPlayerRow[] }>()
+const emit = defineEmits<{
+	remove: [row: ServerPlayerRow]
+	'open-actions': [row: ServerPlayerRow]
+}>()
+
+const search = ref('')
+const methodFilter = ref<MethodFilter>('all')
+const sortColumn = ref<string | undefined>('joined')
+const sortDirection = ref<SortDirection>('desc')
+const formatRelativeTime = useRelativeTime({ style: 'narrow' })
+const formatDateTime = useFormatDateTime({ dateStyle: 'medium', timeStyle: 'short' })
+
+const methodFilterOptions: ComboboxOption<MethodFilter>[] = [
+	{ value: 'all', label: 'All' },
+	{ value: 'direct', label: 'Direct invite' },
+	{ value: 'link', label: 'Shareable link' },
+]
+const selectedMethodFilterLabel = computed(
+	() =>
+		`Method: ${
+			methodFilterOptions.find((option) => option.value === methodFilter.value)?.label ?? 'All'
+		}`,
+)
+const columns: TableColumn<PlayerColumn>[] = [
+	{ key: 'username', label: 'Username', enableSorting: true },
+	{ key: 'lastPlayed', label: 'Last played', enableSorting: true },
+	{ key: 'joined', label: 'Joined', enableSorting: true, defaultSortDirection: 'desc' },
+	{ key: 'method', label: 'Method', enableSorting: true },
+	{ key: 'actions', label: 'Actions', align: 'right' },
+]
+
+const filteredRows = computed(() => {
+	const query = search.value.trim().toLowerCase()
+	return props.rows.filter((row) => {
+		if (methodFilter.value !== 'all' && row.method !== methodFilter.value) return false
+		if (!query) return true
+		return [row.username, methodLabel(row.method)].some((value) =>
+			value.toLowerCase().includes(query),
+		)
+	})
+})
+const sortedRows = computed(() => [...filteredRows.value].sort(compareRows))
+
+function methodLabel(method: ServerPlayerMethod) {
+	return method === 'link' ? 'Shareable link' : 'Direct invite'
+}
+
+function formatPlayerDate(date: Date) {
+	const today = new Date()
+	if (
+		date.getFullYear() === today.getFullYear() &&
+		date.getMonth() === today.getMonth() &&
+		date.getDate() === today.getDate()
+	) {
+		return 'Today'
+	}
+	return formatRelativeTime(date)
+}
+
+function compareRows(a: ServerPlayerRow, b: ServerPlayerRow) {
+	let compared: number
+	if (sortColumn.value === 'username') compared = a.username.localeCompare(b.username)
+	else if (sortColumn.value === 'lastPlayed') {
+		compared =
+			(a.lastPlayedAt?.getTime() ?? Number.NEGATIVE_INFINITY) -
+			(b.lastPlayedAt?.getTime() ?? Number.NEGATIVE_INFINITY)
+	} else if (sortColumn.value === 'method') {
+		compared = methodLabel(a.method).localeCompare(methodLabel(b.method))
+	} else {
+		compared =
+			(a.pending ? Number.MAX_SAFE_INTEGER : (a.joinedAt?.getTime() ?? Number.NEGATIVE_INFINITY)) -
+				(b.pending ? Number.MAX_SAFE_INTEGER : (b.joinedAt?.getTime() ?? Number.NEGATIVE_INFINITY))
+	}
+	return sortDirection.value === 'asc' ? compared : -compared
+}
+
+function handleSort(column: string, direction: SortDirection) {
+	sortColumn.value = column
+	sortDirection.value = direction
+}
+</script>
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/play.vue b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/play.vue
new file mode 100644
index 00000000000..0c9fd04c2da
--- /dev/null
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/play.vue
@@ -0,0 +1,245 @@
+<template>
+	<div class="flex flex-col gap-6">
+		<ServerPlayCard
+			:address="serverAddress"
+			:modpack-download-url="modpackDownload?.url"
+			:modpack-filename="modpackDownload?.filename"
+			@play="props.onPlayServer?.(serverAddress)"
+			@invite="showInvitePlayers"
+		/>
+
+		<section class="flex flex-col gap-3">
+			<h1 class="m-0 text-2xl font-semibold text-contrast">
+				{{ formatMessage(messages.invitedPlayersTitle) }}
+			</h1>
+			<ServerPlayersTable
+				:rows="playersToDisplay"
+				@remove="removePlayer"
+				@open-actions="(player) => props.onOpenPlayerActions?.(player)"
+			/>
+		</section>
+
+		<InvitePlayersModal
+			ref="invitePlayersModal"
+			:header="invitePlayersHeader"
+			:friends="dummyFriends"
+			:search-users="searchInviteUsers"
+			:link="dummyInviteLink"
+			:link-expires-at="dummyInviteLinkExpiresAt"
+			:link-max-uses="10"
+			@invite="invitePlayer"
+			@cancel="cancelPlayerInvite"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useQuery } from '@tanstack/vue-query'
+import { computed, ref } from 'vue'
+
+import {
+	type InvitePlayersInvitePayload,
+	InvitePlayersModal,
+	type InvitePlayersSearchUser,
+	type InvitePlayersUser,
+} from '#ui/components/sharing'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { injectModrinthClient, injectModrinthServerContext } from '#ui/providers'
+
+import ServerPlayCard from './ServerPlayCard.vue'
+import ServerPlayersTable from './ServerPlayersTable.vue'
+import type { ServerPlayerRow } from './types'
+
+const props = defineProps<{
+	players?: ServerPlayerRow[]
+	onPlayServer?: (address: string) => void | Promise<void>
+	onInvitePlayers?: () => void | Promise<void>
+	onRemovePlayer?: (player: ServerPlayerRow) => void | Promise<void>
+	onOpenPlayerActions?: (player: ServerPlayerRow) => void | Promise<void>
+}>()
+
+const { formatMessage } = useVIntl()
+const client = injectModrinthClient()
+const { server, serverFull } = injectModrinthServerContext()
+const invitePlayersModal = ref<InstanceType<typeof InvitePlayersModal> | null>(null)
+const dummyPlayers = ref<ServerPlayerRow[]>(createDummyPlayers())
+const dummyFriends = ref<InvitePlayersUser[]>(createDummyFriends())
+const dummySearchUsers = createDummySearchUsers()
+const dummyInviteLinkExpiresAt = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
+const dummyInviteLink = 'https://modrinth.com/servers/invite/demo'
+
+const messages = defineMessages({
+	invitedPlayersTitle: {
+		id: 'servers.play.players.title',
+		defaultMessage: 'Invited players',
+	},
+})
+
+const playersToDisplay = computed(() => props.players ?? dummyPlayers.value)
+const invitePlayersHeader = computed(() => `Invite players to ${server.value.name}`)
+
+const serverAddress = computed(() => {
+	const subdomain = server.value.net.domain || serverFull.value?.subdomain
+	if (subdomain) {
+		return subdomain.endsWith('.modrinth.gg') ? subdomain : `${subdomain}.modrinth.gg`
+	}
+
+	return server.value.net.ip || ''
+})
+
+const modpackVersionId = computed(() =>
+	server.value.upstream?.kind === 'modpack' ? server.value.upstream.version_id : null,
+)
+
+const { data: modpackVersion } = useQuery({
+	queryKey: computed(() => ['servers', 'play', 'modpack-version', modpackVersionId.value]),
+	queryFn: () => client.labrinth.versions_v3.getVersion(modpackVersionId.value!),
+	enabled: computed(() => Boolean(modpackVersionId.value)),
+	staleTime: 5 * 60 * 1000,
+})
+
+const modpackDownload = computed(() => {
+	const version = modpackVersion.value
+	if (!version) return undefined
+	return version.files.find((file) => file.primary) ?? version.files[0]
+})
+
+function showInvitePlayers() {
+	invitePlayersModal.value?.show()
+	void props.onInvitePlayers?.()
+}
+
+async function searchInviteUsers(query: string): Promise<InvitePlayersSearchUser[]> {
+	const normalizedQuery = query.trim().toLowerCase()
+	const friendKeys = new Set(
+		dummyFriends.value.flatMap((friend) => [
+			friend.id.toLowerCase(),
+			friend.username.toLowerCase(),
+		]),
+	)
+
+	return dummySearchUsers.filter(
+		(user) =>
+			user.username.toLowerCase().startsWith(normalizedQuery) &&
+			!friendKeys.has(user.id.toLowerCase()) &&
+			!friendKeys.has(user.username.toLowerCase()),
+	)
+}
+
+function invitePlayer(payload: InvitePlayersInvitePayload) {
+	const existingFriend = dummyFriends.value.find((friend) => friend.id === payload.user.id)
+
+	if (existingFriend) {
+		existingFriend.status = 'pending'
+	} else {
+		dummyFriends.value.push({
+			...payload.user,
+			status: 'pending',
+		})
+	}
+
+	const existingPlayer = dummyPlayers.value.find((player) => player.id === payload.user.id)
+	if (existingPlayer) {
+		existingPlayer.pending = true
+		existingPlayer.method = 'direct'
+		return
+	}
+
+	dummyPlayers.value.push({
+		id: payload.user.id,
+		username: payload.user.username,
+		avatarUrl: payload.user.avatarUrl ?? undefined,
+		lastPlayedAt: null,
+		joinedAt: null,
+		method: 'direct',
+		pending: true,
+	})
+}
+
+function cancelPlayerInvite(user: InvitePlayersUser) {
+	const friend = dummyFriends.value.find((candidate) => candidate.id === user.id)
+	if (friend) friend.status = 'available'
+
+	dummyPlayers.value = dummyPlayers.value.filter(
+		(player) => player.id !== user.id || !player.pending,
+	)
+}
+
+function removePlayer(player: ServerPlayerRow) {
+	if (player.pending) {
+		cancelPlayerInvite({ id: player.id, username: player.username })
+	}
+
+	void props.onRemovePlayer?.(player)
+}
+
+function createDummyFriends(): InvitePlayersUser[] {
+	return [
+		{ id: 'coolbot', username: 'Coolbot', status: 'pending', online: true },
+		{ id: 'geometrically', username: 'Geometrically', status: 'added', online: true },
+		{ id: 'josh', username: 'Josh', status: 'added' },
+		{ id: 'prospector', username: 'Prospector', status: 'added' },
+		{ id: 'fetch', username: 'Fetch', status: 'available', online: true },
+		{ id: 'emma', username: 'Emma', status: 'available' },
+	]
+}
+
+function createDummySearchUsers(): InvitePlayersSearchUser[] {
+	return [
+		{ id: 'paperclip', username: 'Paperclip' },
+		{ id: 'steve', username: 'Steve' },
+		{ id: 'alex', username: 'Alex' },
+	]
+}
+
+function createDummyPlayers(): ServerPlayerRow[] {
+	const now = Date.now()
+	const daysAgo = (days: number) => new Date(now - days * 24 * 60 * 60 * 1000)
+
+	return [
+		{
+			id: 'coolbot',
+			username: 'Coolbot',
+			lastPlayedAt: null,
+			joinedAt: null,
+			method: 'direct',
+			pending: true,
+		},
+		{
+			id: 'geometrically',
+			username: 'Geometrically',
+			lastPlayedAt: daysAgo(0),
+			joinedAt: daysAgo(0),
+			method: 'link',
+		},
+		{
+			id: 'josh',
+			username: 'Josh',
+			lastPlayedAt: daysAgo(0),
+			joinedAt: daysAgo(0),
+			method: 'link',
+		},
+		{
+			id: 'boris',
+			username: 'Boris',
+			lastPlayedAt: daysAgo(4),
+			joinedAt: daysAgo(7),
+			method: 'direct',
+		},
+		{
+			id: 'prospector',
+			username: 'Prospector',
+			lastPlayedAt: daysAgo(4),
+			joinedAt: daysAgo(30),
+			method: 'direct',
+		},
+		{
+			id: 'imb',
+			username: 'IMB',
+			lastPlayedAt: daysAgo(14),
+			joinedAt: daysAgo(90),
+			method: 'direct',
+		},
+	]
+}
+</script>
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/types.ts b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/types.ts
new file mode 100644
index 00000000000..63f2dbb0550
--- /dev/null
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/types.ts
@@ -0,0 +1,11 @@
+export type ServerPlayerMethod = 'direct' | 'link'
+
+export type ServerPlayerRow = {
+	id: string
+	username: string
+	avatarUrl?: string
+	lastPlayedAt: Date | null
+	joinedAt: Date | null
+	method: ServerPlayerMethod
+	pending?: boolean
+}
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
index 9ccd656e70b..84bc3b13ba1 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
@@ -317,6 +317,7 @@ import {
 	LinkIcon,
 	LoaderCircleIcon,
 	LockIcon,
+	PlayIcon,
 	MoreVerticalIcon,
 	ServerIcon as ServerAssetIcon,
 	SettingsIcon,
@@ -394,6 +395,7 @@ const props = withDefaults(
 		showCopyIdAction?: boolean
 		showAdvancedDebugInfo?: boolean
 		showUptime?: boolean
+		showPlayTab?: boolean
 		additionalTabs?: Tab[]
 		stripePublishableKey?: string
 		siteUrl?: string
@@ -418,6 +420,7 @@ const props = withDefaults(
 		showCopyIdAction: false,
 		showAdvancedDebugInfo: false,
 		showUptime: true,
+		showPlayTab: false,
 		additionalTabs: () => [],
 		stripePublishableKey: undefined,
 		siteUrl: undefined,
@@ -775,6 +778,16 @@ watch(serverData, (data) => {
 })
 
 const navLinks = computed<Tab[]>(() => [
+	...(props.showPlayTab
+		? [
+				{
+					label: 'Play',
+					href: `/hosting/manage/${props.serverId}/play`,
+					icon: PlayIcon,
+					subpages: [],
+				},
+			]
+		: []),
 	{
 		label: 'Overview',
 		href: `/hosting/manage/${props.serverId}`,
diff --git a/packages/ui/src/layouts/wrapped/index.ts b/packages/ui/src/layouts/wrapped/index.ts
index 59ba8d71097..c4ddd4de573 100644
--- a/packages/ui/src/layouts/wrapped/index.ts
+++ b/packages/ui/src/layouts/wrapped/index.ts
@@ -5,5 +5,6 @@ export { default as ServersManageContentPage } from './hosting/manage/content.vu
 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 ServersManagePlayPage } from './hosting/manage/[id]/play/play.vue'
 export { default as ServersManageRootLayout } from './hosting/manage/root.vue'
 export * from './settings'

From 5bb26b5f569b36cadcfba5c314c5298a6ade846f Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Fri, 4 Sep 2026 15:30:06 +0100
Subject: [PATCH 02/13] fix: build error

---
 .../manage/[id]/play/ServerPlayCard.vue       | 95 +++++++++----------
 .../manage/[id]/play/ServerPlayersTable.vue   | 26 ++---
 2 files changed, 57 insertions(+), 64 deletions(-)

diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayCard.vue b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayCard.vue
index b5159719929..3fa2fb5bc0c 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayCard.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayCard.vue
@@ -12,18 +12,14 @@
 				</p>
 			</div>
 			<div class="flex shrink-0 flex-col gap-2 md:w-[164px]">
-				<ButtonStyled color="brand">
-					<button class="!h-10 w-full" @click="emit('play')">
-						<PlayIcon aria-hidden="true" />
-						{{ formatMessage(messages.playServerButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled>
-					<button class="!h-10 w-full" @click="emit('invite')">
-						<UserPlusIcon aria-hidden="true" />
-						{{ formatMessage(messages.invitePlayersButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="colored" color="brand" size="lg" class="w-full" @click="emit('play')">
+					<PlayIcon aria-hidden="true" />
+					{{ formatMessage(messages.playServerButton) }}
+				</Button>
+				<Button size="lg" class="w-full" @click="emit('invite')">
+					<UserPlusIcon aria-hidden="true" />
+					{{ formatMessage(messages.invitePlayersButton) }}
+				</Button>
 			</div>
 		</div>
 
@@ -38,44 +34,41 @@
 				</p>
 			</div>
 			<div class="flex flex-col gap-2 sm:flex-row sm:items-center">
-				<div class="joined-buttons shrink-0">
-					<ButtonStyled>
-						<a
-							v-if="modpackDownloadUrl"
-							class="!h-10"
-							:href="modpackDownloadUrl"
-							:download="modpackFilename"
-						>
-							<DownloadIcon aria-hidden="true" />
-							{{ formatMessage(messages.downloadModpackButton) }}
-						</a>
-						<button v-else type="button" class="!h-10">
-							<DownloadIcon aria-hidden="true" />
-							{{ formatMessage(messages.downloadModpackButton) }}
-						</button>
-					</ButtonStyled>
-					<ButtonStyled>
-						<a
-							v-if="modpackDownloadUrl"
-							v-tooltip="formatMessage(messages.downloadModpackButton)"
-							class="!h-10 !w-10 !px-0"
-							:href="modpackDownloadUrl"
-							:download="modpackFilename"
-							:aria-label="formatMessage(messages.downloadModpackButton)"
-						>
-							<ChevronDownIcon aria-hidden="true" />
-						</a>
-						<button
-							v-else
-							v-tooltip="formatMessage(messages.downloadModpackButton)"
-							type="button"
-							class="!h-10 !w-10 !px-0"
-							:aria-label="formatMessage(messages.downloadModpackButton)"
-						>
-							<ChevronDownIcon aria-hidden="true" />
-						</button>
-					</ButtonStyled>
-				</div>
+				<ButtonGroup class="shrink-0">
+					<ButtonLink
+						v-if="modpackDownloadUrl"
+						size="lg"
+						:href="modpackDownloadUrl"
+						:download="modpackFilename"
+					>
+						<DownloadIcon aria-hidden="true" />
+						{{ formatMessage(messages.downloadModpackButton) }}
+					</ButtonLink>
+					<Button v-else size="lg">
+						<DownloadIcon aria-hidden="true" />
+						{{ formatMessage(messages.downloadModpackButton) }}
+					</Button>
+					<ButtonLink
+						v-if="modpackDownloadUrl"
+						v-tooltip="formatMessage(messages.downloadModpackButton)"
+						size="lg"
+						class="!w-10 !px-0"
+						:href="modpackDownloadUrl"
+						:download="modpackFilename"
+						:aria-label="formatMessage(messages.downloadModpackButton)"
+					>
+						<ChevronDownIcon aria-hidden="true" />
+					</ButtonLink>
+					<IconButton
+						v-else
+						v-tooltip="formatMessage(messages.downloadModpackButton)"
+						size="lg"
+						:circular="false"
+						:label="formatMessage(messages.downloadModpackButton)"
+					>
+						<ChevronDownIcon aria-hidden="true" />
+					</IconButton>
+				</ButtonGroup>
 				<div
 					class="flex h-10 min-w-0 items-center justify-between gap-3 rounded-xl bg-surface-2 px-4 sm:w-[313px]"
 				>
@@ -107,7 +100,7 @@ import {
 } from '@modrinth/assets'
 import { ref } from 'vue'
 
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { Button, ButtonGroup, ButtonLink, IconButton } from '#ui/components/base/buttons'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 
 const props = defineProps<{
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayersTable.vue b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayersTable.vue
index f2359226557..56730841e2d 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayersTable.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayersTable.vue
@@ -75,18 +75,18 @@
 			</template>
 			<template #cell-actions="{ row }">
 				<div class="flex items-center justify-end">
-					<ButtonStyled circular type="transparent">
-						<button
-							v-tooltip="row.pending ? 'Revoke invite' : 'More actions'"
-							:aria-label="`${row.pending ? 'Revoke invite' : 'More actions'} for ${row.username}`"
-							class="text-secondary hover:!filter-none"
-							:class="row.pending ? 'hover:text-red' : ''"
-							@click="row.pending ? emit('remove', row) : emit('open-actions', row)"
-						>
-							<XIcon v-if="row.pending" aria-hidden="true" />
-							<MoreHorizontalIcon v-else aria-hidden="true" />
-						</button>
-					</ButtonStyled>
+					<IconButton
+						v-tooltip="row.pending ? 'Revoke invite' : 'More actions'"
+						type="quiet"
+						interaction="none"
+						:label="`${row.pending ? 'Revoke invite' : 'More actions'} for ${row.username}`"
+						class="!text-secondary"
+						:class="row.pending ? 'hover:!text-red' : ''"
+						@click="row.pending ? emit('remove', row) : emit('open-actions', row)"
+					>
+						<XIcon v-if="row.pending" aria-hidden="true" />
+						<MoreHorizontalIcon v-else aria-hidden="true" />
+					</IconButton>
 				</div>
 			</template>
 		</Table>
@@ -105,7 +105,7 @@ import {
 import { computed, ref } from 'vue'
 
 import Avatar from '#ui/components/base/Avatar.vue'
-import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
+import { IconButton } from '#ui/components/base/buttons'
 import Combobox, { type ComboboxOption } from '#ui/components/base/Combobox.vue'
 import StyledInput from '#ui/components/base/StyledInput.vue'
 import Table, { type SortDirection, type TableColumn } from '#ui/components/base/Table.vue'

From e0517718de5181416eebadb4c9384ac630139c17 Mon Sep 17 00:00:00 2001
From: "Calum H." <calum@modrinth.com>
Date: Fri, 4 Sep 2026 15:33:02 +0100
Subject: [PATCH 03/13] feat: start on content tab env focused design (#7386)

---
 apps/app-frontend/src/pages/Browse.vue        |  16 +-
 .../src/pages/discover/[type]/index.vue       |  16 +-
 .../src/modules/archon/content/v1.ts          |  51 ++
 .../api-client/src/modules/archon/types.ts    |  32 ++
 .../src/modules/kyros/content/v1.ts           |  18 +
 packages/ui/src/components/base/Toggle.vue    |  28 +-
 .../ui/src/composables/server-panel-sync.ts   |  51 +-
 packages/ui/src/composables/virtual-scroll.ts |  13 +-
 .../components/ContentCardItem.vue            |  59 ++-
 .../components/ContentCardItemIcon.vue        |  91 ++++
 .../components/ContentCardTable.vue           |  66 ++-
 .../components/ContentEnabledFor.vue          | 112 +++++
 .../managed-content-modal/index.vue           |  97 +++-
 .../src/layouts/shared/content-tab/layout.vue | 104 ++--
 .../content-tab/providers/content-manager.ts  |   4 +-
 .../src/layouts/shared/content-tab/types.ts   |  18 +
 .../server-settings/pages/installation.vue    |  43 +-
 .../wrapped/hosting/manage/content.vue        | 465 ++++++++++++------
 packages/ui/src/locales/cs-CZ/index.json      |   9 -
 packages/ui/src/locales/de-CH/index.json      |   9 -
 packages/ui/src/locales/de-DE/index.json      |   9 -
 packages/ui/src/locales/en-US/index.json      |  49 +-
 packages/ui/src/locales/es-419/index.json     |   9 -
 packages/ui/src/locales/es-ES/index.json      |   9 -
 packages/ui/src/locales/fil-PH/index.json     |   7 -
 packages/ui/src/locales/fr-FR/index.json      |   9 -
 packages/ui/src/locales/hu-HU/index.json      |   6 -
 packages/ui/src/locales/it-IT/index.json      |   9 -
 packages/ui/src/locales/ja-JP/index.json      |   9 -
 packages/ui/src/locales/ko-KR/index.json      |   9 -
 packages/ui/src/locales/ms-MY/index.json      |  10 -
 packages/ui/src/locales/nl-NL/index.json      |   9 -
 packages/ui/src/locales/pl-PL/index.json      |   9 -
 packages/ui/src/locales/pt-BR/index.json      |  10 -
 packages/ui/src/locales/ro-RO/index.json      |   9 -
 packages/ui/src/locales/ru-RU/index.json      |   9 -
 packages/ui/src/locales/sr-CS/index.json      |  10 -
 packages/ui/src/locales/sv-SE/index.json      |   9 -
 packages/ui/src/locales/th-TH/index.json      |   4 -
 packages/ui/src/locales/tr-TR/index.json      |   9 -
 packages/ui/src/locales/uk-UA/index.json      |   9 -
 packages/ui/src/locales/vi-VN/index.json      |  10 -
 packages/ui/src/locales/zh-CN/index.json      |   9 -
 packages/ui/src/locales/zh-TW/index.json      |   9 -
 .../ui/src/stories/base/Toggle.stories.ts     |  16 +-
 packages/ui/src/utils/common-messages.ts      |   2 +-
 46 files changed, 1065 insertions(+), 505 deletions(-)
 create mode 100644 packages/ui/src/layouts/shared/content-tab/components/ContentCardItemIcon.vue
 create mode 100644 packages/ui/src/layouts/shared/content-tab/components/ContentEnabledFor.vue

diff --git a/apps/app-frontend/src/pages/Browse.vue b/apps/app-frontend/src/pages/Browse.vue
index c088dfb550d..d410b4fd08d 100644
--- a/apps/app-frontend/src/pages/Browse.vue
+++ b/apps/app-frontend/src/pages/Browse.vue
@@ -909,17 +909,18 @@ function getCardActions(
 		const isQueued = queuedServerInstallProjectIds.value.has(projectResult.project_id)
 		const isQueuedRoot = queuedServerInstallRootProjectIds.value.has(projectResult.project_id)
 		const isInstallingSelection = isInstallingQueuedServerInstalls.value
+		const showAsInstalling = isInstalling || (isInstallingSelection && isQueuedRoot)
 		const validatingInstall =
 			isInstalling && currentProjectType !== 'modpack' && !isInstallingSelection
 		const installLabel = showAsInstalled
 			? commonMessages.installedLabel
 			: isQueued
-				? isInstalling || isInstallingSelection
+				? showAsInstalling
 					? validatingInstall
 						? commonMessages.validatingLabel
 						: messages.installingToServer
 					: commonMessages.selectedLabel
-				: isInstalling || isInstallingSelection
+				: showAsInstalling
 					? validatingInstall
 						? commonMessages.validatingLabel
 						: messages.installingToServer
@@ -928,16 +929,11 @@ function getCardActions(
 			{
 				key: 'install',
 				label: formatMessage(installLabel),
-				icon:
-					isInstalling || isInstallingSelection
-						? SpinnerIcon
-						: isQueued || showAsInstalled
-							? CheckIcon
-							: PlusIcon,
-				iconClass: isInstalling || isInstallingSelection ? 'animate-spin' : undefined,
+				icon: showAsInstalling ? SpinnerIcon : isQueued || showAsInstalled ? CheckIcon : PlusIcon,
+				iconClass: showAsInstalling ? 'animate-spin' : undefined,
 				disabled:
 					showAsInstalled || isInstalling || isInstallingSelection || (isQueued && !isQueuedRoot),
-				color: isQueued && !isInstalling && !isInstallingSelection ? 'green' : 'brand',
+				color: isQueued && !showAsInstalling ? 'green' : 'brand',
 				type: 'outlined',
 				onClick: async () => {
 					if (isQueuedRoot) {
diff --git a/apps/frontend/src/pages/discover/[type]/index.vue b/apps/frontend/src/pages/discover/[type]/index.vue
index 09213818fdb..74877228d4c 100644
--- a/apps/frontend/src/pages/discover/[type]/index.vue
+++ b/apps/frontend/src/pages/discover/[type]/index.vue
@@ -361,17 +361,18 @@ function getCardActions(
 			serverData.value.upstream?.project_id === result.project_id
 		const isInstalling = installingProjectIds.value.has(result.project_id)
 		const isInstallingSelection = isInstallingQueuedServerInstalls.value
+		const showAsInstalling = isInstalling || (isInstallingSelection && isQueuedRoot)
 		const validatingInstall =
 			isInstalling && currentProjectType !== 'modpack' && !isInstallingSelection
 		const installLabel = isInstalled
 			? formatMessage(commonMessages.installedLabel)
 			: isQueued
-				? isInstalling || isInstallingSelection
+				? showAsInstalling
 					? validatingInstall
 						? formatMessage(commonMessages.validatingLabel)
 						: formatMessage(commonMessages.installingLabel)
 					: formatMessage(commonMessages.selectedLabel)
-				: isInstalling || isInstallingSelection
+				: showAsInstalling
 					? validatingInstall
 						? formatMessage(commonMessages.validatingLabel)
 						: formatMessage(commonMessages.installingLabel)
@@ -381,16 +382,11 @@ function getCardActions(
 			{
 				key: 'install',
 				label: installLabel,
-				icon:
-					isInstalling || isInstallingSelection
-						? SpinnerIcon
-						: isQueued || isInstalled
-							? CheckIcon
-							: DownloadIcon,
-				iconClass: isInstalling || isInstallingSelection ? 'animate-spin' : undefined,
+				icon: showAsInstalling ? SpinnerIcon : isQueued || isInstalled ? CheckIcon : DownloadIcon,
+				iconClass: showAsInstalling ? 'animate-spin' : undefined,
 				disabled:
 					!!isInstalled || isInstalling || isInstallingSelection || (isQueued && !isQueuedRoot),
-				color: isQueued && !isInstalling && !isInstallingSelection ? 'green' : 'brand',
+				color: isQueued && !showAsInstalling ? 'green' : 'brand',
 				type: 'outlined',
 				onClick: () => serverInstall(projectResult),
 			},
diff --git a/packages/api-client/src/modules/archon/content/v1.ts b/packages/api-client/src/modules/archon/content/v1.ts
index fa0c951d6f2..71aedc9bd1f 100644
--- a/packages/api-client/src/modules/archon/content/v1.ts
+++ b/packages/api-client/src/modules/archon/content/v1.ts
@@ -105,6 +105,57 @@ export class ArchonContentV1Module extends AbstractModule {
 		})
 	}
 
+	/** POST /v1/:server_id/worlds/:world_id/addons/set-enabled-server */
+	public async setAddonEnabledServer(
+		serverId: string,
+		worldId: string,
+		request: Archon.Content.v1.SetAddonEnabledRequest,
+	): Promise<void> {
+		await this.client.request<void>(
+			`/servers/${serverId}/worlds/${worldId}/addons/set-enabled-server`,
+			{
+				api: 'archon',
+				version: 1,
+				method: 'POST',
+				body: request,
+			},
+		)
+	}
+
+	/** POST /v1/:server_id/worlds/:world_id/addons/set-enabled-player */
+	public async setAddonEnabledPlayer(
+		serverId: string,
+		worldId: string,
+		request: Archon.Content.v1.SetAddonEnabledRequest,
+	): Promise<void> {
+		await this.client.request<void>(
+			`/servers/${serverId}/worlds/${worldId}/addons/set-enabled-player`,
+			{
+				api: 'archon',
+				version: 1,
+				method: 'POST',
+				body: request,
+			},
+		)
+	}
+
+	/** POST /v1/:server_id/worlds/:world_id/addons/set-locked-side-toggle */
+	public async setAddonSideToggleLocked(
+		serverId: string,
+		worldId: string,
+		request: Archon.Content.v1.SetAddonSideToggleLockedRequest,
+	): Promise<void> {
+		await this.client.request<void>(
+			`/servers/${serverId}/worlds/${worldId}/addons/set-locked-side-toggle`,
+			{
+				api: 'archon',
+				version: 1,
+				method: 'POST',
+				body: request,
+			},
+		)
+	}
+
 	/** POST /v1/:server_id/worlds/:world_id/addons/delete-many */
 	public async deleteAddons(
 		serverId: string,
diff --git a/packages/api-client/src/modules/archon/types.ts b/packages/api-client/src/modules/archon/types.ts
index e0a95cc5836..3c47e3bc844 100644
--- a/packages/api-client/src/modules/archon/types.ts
+++ b/packages/api-client/src/modules/archon/types.ts
@@ -301,6 +301,25 @@ export namespace Archon {
 				environment?: Labrinth.Projects.v3.Environment | null
 			}
 
+			export type AddonManifestEnvironment =
+				| 'client_and_server'
+				| 'client_only'
+				| 'dedicated_server_only'
+
+			export type AddonManifestWarnings = {
+				multiple_mod_entries: number | null
+				malformed: boolean
+			}
+
+			export type AddonManifest = {
+				platform: Modloader
+				name: string | null
+				version: string | null
+				environment: AddonManifestEnvironment | null
+				icon_embedded: boolean
+				warnings: AddonManifestWarnings
+			}
+
 			export type AddonStatus =
 				| 'pending'
 				| 'installed'
@@ -316,6 +335,10 @@ export namespace Archon {
 				filesize: number
 				btime?: string
 				disabled: boolean
+				disabled_server: boolean
+				disabled_player: boolean
+				side_toggle_unlocked: boolean
+				manifest: AddonManifest | null
 				kind: AddonKind
 				from_modpack: boolean
 				status: AddonStatus
@@ -354,6 +377,14 @@ export namespace Archon {
 				filename: string
 			}
 
+			export type SetAddonEnabledRequest = RemoveAddonRequest & {
+				enabled: boolean
+			}
+
+			export type SetAddonSideToggleLockedRequest = RemoveAddonRequest & {
+				locked: boolean
+			}
+
 			export type UpdateAddonRequest = {
 				filename: string
 				version_id?: string | null
@@ -1087,6 +1118,7 @@ export namespace Archon {
 				project_id: string | null
 				pack_client_retained: boolean
 				pack_client_depends: boolean
+				manifest?: Archon.Content.v1.AddonManifest | null
 				status: Archon.Content.v1.AddonStatus
 				filesize: number | null
 				name: string | null
diff --git a/packages/api-client/src/modules/kyros/content/v1.ts b/packages/api-client/src/modules/kyros/content/v1.ts
index 9f5f4f8b160..02d32927a88 100644
--- a/packages/api-client/src/modules/kyros/content/v1.ts
+++ b/packages/api-client/src/modules/kyros/content/v1.ts
@@ -7,6 +7,24 @@ export class KyrosContentV1Module extends AbstractModule {
 		return 'kyros_content_v1'
 	}
 
+	/** GET /v1/worlds/:world_id/content/embedded-icon */
+	public async getEmbeddedAddonIcon(
+		worldId: string,
+		parentDirectory: 'mods' | 'plugins',
+		filename: string,
+	): Promise<Blob> {
+		return this.client.request<Blob>(`/worlds/${worldId}/content/embedded-icon`, {
+			api: '',
+			version: 'v1',
+			method: 'GET',
+			params: {
+				parent_directory: parentDirectory,
+				filename,
+			},
+			useNodeAuth: true,
+		})
+	}
+
 	/**
 	 * Upload addon files to a world via multipart form data
 	 *
diff --git a/packages/ui/src/components/base/Toggle.vue b/packages/ui/src/components/base/Toggle.vue
index 4ffa62d33ca..ddc0153102f 100644
--- a/packages/ui/src/components/base/Toggle.vue
+++ b/packages/ui/src/components/base/Toggle.vue
@@ -3,12 +3,12 @@
 		:id="id"
 		type="button"
 		role="switch"
-		:aria-checked="modelValue"
+		:aria-checked="indeterminate ? 'mixed' : modelValue"
 		:disabled="disabled"
 		class="group inline-flex shrink-0 touch-manipulation items-center rounded-full m-0 p-1 transition-all duration-200 cursor-pointer border border-solid border-surface-5"
 		:class="[
 			small ? 'h-5 !w-[40px]' : 'h-6 !w-[48px]',
-			modelValue ? 'bg-brand' : 'bg-button-bg',
+			indeterminate || modelValue ? 'bg-brand' : 'bg-button-bg',
 			disabled ? 'opacity-50 cursor-not-allowed' : '',
 		]"
 		@click="toggle"
@@ -16,17 +16,24 @@
 		<span
 			class="rounded-full transition-all duration-200"
 			:class="[
-				small ? 'w-3 h-3' : 'w-4 h-4',
-				modelValue
+				indeterminate
 					? small
-						? 'translate-x-[20px] bg-black/90'
-						: 'translate-x-[24px] bg-black/90'
-					: 'bg-secondary',
+						? 'h-0.5 w-2.5 translate-x-[11px] bg-black/90'
+						: 'h-0.5 w-3 translate-x-[14px] bg-black/90'
+					: modelValue
+						? small
+							? 'h-3 w-3 translate-x-[20px] bg-black/90'
+							: 'h-4 w-4 translate-x-[24px] bg-black/90'
+						: small
+							? 'h-3 w-3 bg-gray'
+							: 'h-4 w-4 bg-gray',
 				disabled
 					? ''
-					: small
-						? 'group-hover:w-[14px] group-hover:h-[14px] group-hover:m-[-1px] group-active:w-[10px] group-active:h-[10px] group-active:m-[1px]'
-						: 'group-hover:w-[18px] group-hover:h-[18px] group-hover:m-[-1px] group-active:w-[14px] group-active:h-[14px] group-active:m-[1px]',
+					: indeterminate
+						? 'group-hover:scale-x-110 group-active:scale-x-75'
+						: small
+							? 'group-hover:w-[14px] group-hover:h-[14px] group-hover:m-[-1px] group-active:w-[10px] group-active:h-[10px] group-active:m-[1px]'
+							: 'group-hover:w-[18px] group-hover:h-[18px] group-hover:m-[-1px] group-active:w-[14px] group-active:h-[14px] group-active:m-[1px]',
 			]"
 		/>
 	</button>
@@ -37,6 +44,7 @@ const props = defineProps<{
 	id?: string
 	disabled?: boolean
 	small?: boolean
+	indeterminate?: boolean
 }>()
 
 const modelValue = defineModel<boolean>()
diff --git a/packages/ui/src/composables/server-panel-sync.ts b/packages/ui/src/composables/server-panel-sync.ts
index 30541a240ef..400cc150705 100644
--- a/packages/ui/src/composables/server-panel-sync.ts
+++ b/packages/ui/src/composables/server-panel-sync.ts
@@ -254,17 +254,48 @@ export function useServerPanelSync(options: UseServerPanelSyncOptions) {
 		}
 
 		const content = worldContentUpdateToAddons(event)
-		queryClient.setQueryData<Archon.Content.v1.Addons>(contentListKey(serverId), {
+		queryClient.setQueryData<Archon.Content.v1.Addons>(contentListKey(serverId), (current) => ({
 			...content,
-			addons: content.addons?.filter((addon) => !addon.from_modpack) ?? null,
-		})
-		queryClient.setQueryData<Archon.Content.v1.Addons>(modpackContentListKey(serverId), {
-			...content,
-			addons: content.addons?.filter((addon) => addon.from_modpack) ?? null,
-		})
+			addons: mergeWorldContentSideState(
+				current?.addons ?? [],
+				content.addons?.filter((addon) => !addon.from_modpack) ?? [],
+			),
+		}))
+		queryClient.setQueryData<Archon.Content.v1.Addons>(
+			modpackContentListKey(serverId),
+			(current) => ({
+				...content,
+				addons: mergeWorldContentSideState(
+					current?.addons ?? [],
+					content.addons?.filter((addon) => addon.from_modpack) ?? [],
+				),
+			}),
+		)
+		void queryClient.invalidateQueries({ queryKey: contentListKey(serverId) })
+		void queryClient.invalidateQueries({ queryKey: modpackContentListKey(serverId) })
 		void queryClient.invalidateQueries({ queryKey: serverV1DetailKey(serverId) })
 	}
 
+	function mergeWorldContentSideState(
+		currentAddons: Archon.Content.v1.Addon[],
+		incomingAddons: Archon.Content.v1.Addon[],
+	) {
+		const currentByFilename = new Map(
+			currentAddons.map((addon) => [normalizeAddonFilename(addon.filename), addon] as const),
+		)
+		return incomingAddons.map((incoming) => {
+			const current = currentByFilename.get(normalizeAddonFilename(incoming.filename))
+			return current
+				? {
+						...incoming,
+						disabled_server: current.disabled_server,
+						disabled_player: current.disabled_player,
+						side_toggle_unlocked: current.side_toggle_unlocked,
+					}
+				: incoming
+		})
+	}
+
 	function worldContentUpdateToAddons(
 		event: Archon.Sync.v1.WorldContentUpdateEvent,
 	): Archon.Content.v1.Addons {
@@ -318,7 +349,11 @@ export function useServerPanelSync(options: UseServerPanelSyncOptions) {
 			filename: item.filename,
 			filesize: item.filesize ?? 0,
 			btime: item.btime,
-			disabled: item.filename.endsWith('.disabled'),
+			disabled: false,
+			disabled_server: false,
+			disabled_player: false,
+			side_toggle_unlocked: false,
+			manifest: item.manifest ?? null,
 			kind: parentDirectoryToAddonKind(item.parent_directory),
 			from_modpack: item.from_modpack,
 			status: item.status,
diff --git a/packages/ui/src/composables/virtual-scroll.ts b/packages/ui/src/composables/virtual-scroll.ts
index 9bfbfc1456c..54bc6d54bb3 100644
--- a/packages/ui/src/composables/virtual-scroll.ts
+++ b/packages/ui/src/composables/virtual-scroll.ts
@@ -7,7 +7,7 @@ export interface ScrollViewportOptions {
 }
 
 export interface VirtualScrollOptions {
-	itemHeight: number
+	itemHeight: number | Ref<number>
 	bufferSize?: number
 	initialItemCount?: number
 	enabled?: Ref<boolean>
@@ -140,6 +140,9 @@ export function useVirtualScroll<T>(items: Ref<T[]>, options: VirtualScrollOptio
 		onNearEnd,
 		nearEndThreshold = 0.2,
 	} = options
+	const resolvedItemHeight = computed(() =>
+		typeof itemHeight === 'number' ? itemHeight : itemHeight.value,
+	)
 
 	const {
 		containerOffset,
@@ -153,7 +156,7 @@ export function useVirtualScroll<T>(items: Ref<T[]>, options: VirtualScrollOptio
 		onScroll: checkNearEnd,
 	})
 
-	const totalHeight = computed(() => items.value.length * itemHeight)
+	const totalHeight = computed(() => items.value.length * resolvedItemHeight.value)
 
 	const visibleRange = computed(() => {
 		if (enabled && !enabled.value) {
@@ -164,8 +167,8 @@ export function useVirtualScroll<T>(items: Ref<T[]>, options: VirtualScrollOptio
 			return { start: 0, end: Math.min(items.value.length, initialItemCount) }
 		}
 
-		const start = Math.floor(relativeScrollTop.value / itemHeight)
-		const visibleCount = Math.ceil(viewportHeight.value / itemHeight)
+		const start = Math.floor(relativeScrollTop.value / resolvedItemHeight.value)
+		const visibleCount = Math.ceil(viewportHeight.value / resolvedItemHeight.value)
 		const rangeSize = visibleCount + bufferSize * 2
 
 		const rangeStart = Math.min(
@@ -181,7 +184,7 @@ export function useVirtualScroll<T>(items: Ref<T[]>, options: VirtualScrollOptio
 	})
 
 	const visibleTop = computed(() =>
-		enabled && !enabled.value ? 0 : visibleRange.value.start * itemHeight,
+		enabled && !enabled.value ? 0 : visibleRange.value.start * resolvedItemHeight.value,
 	)
 
 	const visibleItems = computed(() =>
diff --git a/packages/ui/src/layouts/shared/content-tab/components/ContentCardItem.vue b/packages/ui/src/layouts/shared/content-tab/components/ContentCardItem.vue
index feefeefd210..bb71a6e8cba 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/ContentCardItem.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/ContentCardItem.vue
@@ -29,11 +29,16 @@ import { truncatedTooltip } from '#ui/utils/truncate'
 
 import type {
 	ClientWarningType,
+	ContentCardEmbeddedIcon,
 	ContentCardProject,
 	ContentCardVersion,
+	ContentEnabledForState,
 	ContentOwner,
+	ContentSide,
 	ContentSource,
 } from '../types'
+import ContentCardItemIcon from './ContentCardItemIcon.vue'
+import ContentEnabledFor from './ContentEnabledFor.vue'
 
 const { formatMessage } = useVIntl()
 
@@ -90,6 +95,8 @@ interface Props {
 	hideDelete?: boolean
 	hideActions?: boolean
 	inline?: boolean
+	enabledFor?: ContentEnabledForState
+	embeddedIcon?: ContentCardEmbeddedIcon
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -120,6 +127,8 @@ const props = withDefaults(defineProps<Props>(), {
 	hideDelete: false,
 	hideActions: false,
 	inline: false,
+	enabledFor: undefined,
+	embeddedIcon: undefined,
 })
 
 const selected = defineModel<boolean>('selected')
@@ -128,6 +137,7 @@ const projectTitle = computed(() => props.project.title.replace(/§[0-9a-fk-orx]
 
 const emit = defineEmits<{
 	'update:enabled': [value: boolean]
+	'update:enabled-for': [side: ContentSide, value: boolean]
 	select: [value: boolean, event?: MouseEvent]
 	delete: [event: MouseEvent]
 	update: []
@@ -149,6 +159,11 @@ const isToggleDisabled = computed(() => isDisabled.value || props.toggleDisabled
 const syncStatusLabel = computed(() =>
 	formatMessage(props.syncUpdatePending ? messages.syncUpdatePending : messages.synced),
 )
+const toggleTooltip = computed(() => {
+	if (!isToggleDisabled.value) return undefined
+	return props.toggleDisabledTooltip ?? props.disabledTooltip ?? undefined
+})
+const isEnabledForDisabled = computed(() => !props.enabledFor?.server && !props.enabledFor?.player)
 
 const clientWarningMessage = computed(() => {
 	switch (props.clientWarning) {
@@ -173,12 +188,15 @@ const installTooltip = computed(() => {
 <template>
 	<div
 		role="row"
-		class="flex items-center justify-between"
+		class="flex items-center"
 		:class="{
-			'h-[74px] gap-4 px-3': !inline,
+			'h-[74px] gap-4 px-3': !inline && !enabledFor,
+			'h-[72px] gap-2 px-3': !inline && enabledFor,
 			'gap-3': inline,
+			'justify-between': !enabledFor,
 			'opacity-50 grayscale': disabled && !installing,
-			'opacity-50': installing,
+			'opacity-50':
+				installing || (enabledFor && (isEnabledForDisabled || enabled === false) && !disabled),
 		}"
 	>
 		<div
@@ -186,7 +204,9 @@ const installTooltip = computed(() => {
 			:class="
 				hideActions || !showVersion
 					? 'flex-1'
-					: 'flex-1 @[800px]:w-[45%] @[800px]:shrink-0 @[800px]:flex-none'
+					: enabledFor
+						? 'flex-1 @[800px]:w-[340px] @[800px]:shrink-0 @[800px]:flex-none'
+						: 'flex-1 @[800px]:w-[45%] @[800px]:shrink-0 @[800px]:flex-none'
 			"
 		>
 			<Checkbox
@@ -200,15 +220,14 @@ const installTooltip = computed(() => {
 
 			<div
 				class="flex min-w-0 items-center gap-3 transition-[filter,opacity] duration-200"
-				:class="enabled === false && !disabled ? 'grayscale opacity-50' : ''"
+				:class="!enabledFor && enabled === false && !disabled ? 'grayscale opacity-50' : ''"
 			>
 				<div v-tooltip="installTooltip" class="relative flex shrink-0 items-center">
-					<Avatar
+					<ContentCardItemIcon
 						:src="project.icon_url"
 						:alt="projectTitle"
-						size="3rem"
-						no-shadow
-						class="rounded-2xl border border-surface-5"
+						:tint-by="project.id"
+						:embedded-icon="embeddedIcon"
 					/>
 					<div
 						v-if="installing"
@@ -327,12 +346,21 @@ const installTooltip = computed(() => {
 			</div>
 		</div>
 
+		<div v-if="enabledFor" class="hidden w-[200px] shrink-0 @[800px]:block">
+			<ContentEnabledFor
+				:model-value="enabledFor"
+				:disabled="isDisabled"
+				:disabled-tooltip="isDisabled ? disabledTooltip : undefined"
+				@update:model-value="(side, value) => emit('update:enabled-for', side, value)"
+			/>
+		</div>
+
 		<div
 			v-if="showVersion"
 			class="hidden flex-col gap-0.5 transition-[filter,opacity] duration-200 @[800px]:flex"
 			:class="[
-				hideActions ? 'flex-1' : 'flex-1 min-w-0',
-				enabled === false && !disabled ? 'grayscale opacity-50' : '',
+				hideActions ? 'flex-1' : enabledFor ? 'min-w-0 flex-1' : 'flex-1 min-w-0',
+				!enabledFor && enabled === false && !disabled ? 'grayscale opacity-50' : '',
 			]"
 		>
 			<template v-if="version">
@@ -368,7 +396,8 @@ const installTooltip = computed(() => {
 
 		<div
 			v-if="!hideActions"
-			class="flex min-w-[160px] shrink-0 items-center justify-end gap-2 transition-colors duration-200"
+			class="flex shrink-0 items-center justify-end gap-2 transition-colors duration-200"
+			:class="enabledFor ? 'w-[168px]' : 'min-w-[160px]'"
 		>
 			<slot name="additionalButtonsLeft" />
 			<span
@@ -441,11 +470,7 @@ const installTooltip = computed(() => {
 
 			<Toggle
 				v-if="enabled !== undefined && !hideToggle"
-				v-tooltip="
-					isToggleDisabled && (toggleDisabledTooltip || disabledTooltip)
-						? (toggleDisabledTooltip ?? disabledTooltip)
-						: undefined
-				"
+				v-tooltip="toggleTooltip"
 				:model-value="enabled"
 				:disabled="isToggleDisabled"
 				:aria-label="projectTitle"
diff --git a/packages/ui/src/layouts/shared/content-tab/components/ContentCardItemIcon.vue b/packages/ui/src/layouts/shared/content-tab/components/ContentCardItemIcon.vue
new file mode 100644
index 00000000000..d1e5da69f58
--- /dev/null
+++ b/packages/ui/src/layouts/shared/content-tab/components/ContentCardItemIcon.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { useQuery } from '@tanstack/vue-query'
+import { computed, onScopeDispose, ref, watch } from 'vue'
+
+import Avatar from '#ui/components/base/Avatar.vue'
+
+import type { ContentCardEmbeddedIcon } from '../types'
+
+const props = defineProps<{
+	src?: string | null
+	fallbackUrl?: string | null
+	embeddedIcon?: ContentCardEmbeddedIcon
+	alt: string
+	tintBy?: string
+}>()
+
+const queryKey = computed(
+	() => props.embeddedIcon?.queryKey ?? (['content', 'embedded-icon', 'disabled'] as const),
+)
+
+const embeddedIconQuery = useQuery({
+	queryKey,
+	queryFn: () => {
+		if (!props.embeddedIcon) throw new Error('Missing embedded icon request')
+		return props.embeddedIcon.queryFn()
+	},
+	enabled: computed(
+		() => typeof window !== 'undefined' && !props.src && props.embeddedIcon !== undefined,
+	),
+	staleTime: Infinity,
+})
+
+const embeddedIconUrl = ref<string>()
+let pendingIconUrl: string | undefined
+let validationId = 0
+
+watch(
+	() => embeddedIconQuery.data.value,
+	(blob) => {
+		validationId += 1
+		const currentValidationId = validationId
+		if (embeddedIconUrl.value) URL.revokeObjectURL(embeddedIconUrl.value)
+		if (pendingIconUrl) URL.revokeObjectURL(pendingIconUrl)
+		embeddedIconUrl.value = undefined
+		pendingIconUrl = undefined
+		if (!blob) return
+
+		const candidateUrl = URL.createObjectURL(blob)
+		pendingIconUrl = candidateUrl
+		const image = new Image()
+		image.onload = () => {
+			if (currentValidationId !== validationId) return
+			pendingIconUrl = undefined
+			embeddedIconUrl.value = candidateUrl
+		}
+		image.onerror = () => {
+			if (currentValidationId !== validationId) return
+			pendingIconUrl = undefined
+			URL.revokeObjectURL(candidateUrl)
+		}
+		image.src = candidateUrl
+	},
+	{ immediate: true },
+)
+
+onScopeDispose(() => {
+	validationId += 1
+	if (embeddedIconUrl.value) URL.revokeObjectURL(embeddedIconUrl.value)
+	if (pendingIconUrl) URL.revokeObjectURL(pendingIconUrl)
+})
+
+const resolvedSrc = computed(
+	() =>
+		props.src ??
+		embeddedIconUrl.value ??
+		props.embeddedIcon?.fallbackUrl ??
+		props.fallbackUrl ??
+		undefined,
+)
+</script>
+
+<template>
+	<Avatar
+		:src="resolvedSrc"
+		:alt="alt"
+		:tint-by="tintBy"
+		size="3rem"
+		no-shadow
+		class="rounded-2xl border border-surface-5"
+	/>
+</template>
diff --git a/packages/ui/src/layouts/shared/content-tab/components/ContentCardTable.vue b/packages/ui/src/layouts/shared/content-tab/components/ContentCardTable.vue
index 02a606d4dc2..0ae7d96f63c 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/ContentCardTable.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/ContentCardTable.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { ChevronDownIcon, ChevronUpIcon } from '@modrinth/assets'
+import { ChevronDownIcon, ChevronUpIcon, InfoIcon } from '@modrinth/assets'
 import { computed, getCurrentInstance, ref, toRef, watch } from 'vue'
 
 import Checkbox from '#ui/components/base/Checkbox.vue'
-import { useVIntl } from '#ui/composables/i18n'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { useStickyObserver } from '#ui/composables/sticky-observer'
 import { useVirtualScroll } from '#ui/composables/virtual-scroll'
 import { commonMessages } from '#ui/utils/common-messages'
@@ -17,6 +17,18 @@ import ContentCardItem from './ContentCardItem.vue'
 
 const { formatMessage } = useVIntl()
 
+const messages = defineMessages({
+	enabledFor: {
+		id: 'content.enabled-for.label',
+		defaultMessage: 'Enabled for',
+	},
+	enabledForDescription: {
+		id: 'content.enabled-for.description',
+		defaultMessage:
+			'Choose where this content is enabled. Use the Actions toggle to enable or disable it entirely.',
+	},
+})
+
 interface Props {
 	items: ContentCardTableItem[]
 	highlightedItemId?: string
@@ -30,6 +42,7 @@ interface Props {
 	flat?: boolean
 	showItemActions?: boolean
 	showVersion?: boolean
+	showEnabledForColumn?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -43,6 +56,7 @@ const props = withDefaults(defineProps<Props>(), {
 	flat: false,
 	showItemActions: false,
 	showVersion: true,
+	showEnabledForColumn: false,
 })
 
 const stickyHeaderRef = ref<HTMLElement | null>(null)
@@ -52,6 +66,7 @@ const selectedIds = defineModel<string[]>('selectedIds', { default: () => [] })
 
 const emit = defineEmits<{
 	'update:enabled': [id: string, value: boolean]
+	'update:enabled-for': [id: string, side: 'server' | 'player', value: boolean]
 	delete: [id: string, event: MouseEvent]
 	update: [id: string]
 	switchVersion: [id: string]
@@ -68,6 +83,9 @@ const hasSwitchVersionListener = computed(
 const hasEnabledListener = computed(
 	() => typeof instance?.vnode.props?.['onUpdate:enabled'] === 'function',
 )
+const hasEnabledForColumn = computed(
+	() => props.showEnabledForColumn || props.items.some((item) => item.enabledFor !== undefined),
+)
 
 const hasAnyActions = computed(() => {
 	// Check if there are listeners for actions
@@ -83,16 +101,17 @@ const hasAnyActions = computed(() => {
 		(item) =>
 			(item.overflowOptions && item.overflowOptions.length > 0) ||
 			item.hasUpdate ||
-			item.enabled !== undefined,
+			(item.enabled !== undefined && !item.hideToggle),
 	)
 
 	return hasListeners || hasItemActions || props.showItemActions
 })
 
 // Virtualization
+const itemHeight = computed(() => (hasEnabledForColumn.value ? 72 : 74))
 const { listContainer, totalHeight, visibleRange, visibleTop, visibleItems, scrollToIndex } =
 	useVirtualScroll(toRef(props, 'items'), {
-		itemHeight: 74,
+		itemHeight,
 		bufferSize: 5,
 		initialItemCount: 20,
 		enabled: toRef(props, 'virtualized'),
@@ -190,8 +209,9 @@ function handleSort(column: ContentCardTableSortColumn) {
 			v-if="!hideHeader"
 			ref="stickyHeaderRef"
 			role="rowgroup"
-			class="sticky top-0 z-10 flex h-12 items-center justify-between gap-4 bg-surface-3 px-3"
+			class="sticky top-0 z-10 flex h-12 items-center bg-surface-3 px-3"
 			:class="[
+				hasEnabledForColumn ? 'gap-2' : 'justify-between gap-4',
 				flat || isStuck ? 'rounded-none' : 'rounded-t-[20px]',
 				isStuck
 					? 'transition-[border-radius] duration-100 border-0 border-y border-solid border-surface-4 shadow-md before:pointer-events-none before:absolute before:inset-x-0 before:-top-4 before:h-5 before:bg-surface-3'
@@ -203,7 +223,9 @@ function handleSort(column: ContentCardTableSortColumn) {
 				class="flex min-w-0 items-center gap-4"
 				:class="
 					hasAnyActions && showVersion
-						? 'flex-1 @[800px]:w-[45%] @[800px]:shrink-0 @[800px]:flex-none'
+						? hasEnabledForColumn
+							? 'flex-1 @[800px]:w-[340px] @[800px]:shrink-0 @[800px]:flex-none'
+							: 'flex-1 @[800px]:w-[45%] @[800px]:shrink-0 @[800px]:flex-none'
 						: 'flex-1'
 				"
 			>
@@ -238,10 +260,27 @@ function handleSort(column: ContentCardTableSortColumn) {
 				}}</span>
 			</div>
 
+			<div
+				v-if="hasEnabledForColumn"
+				role="columnheader"
+				class="hidden w-[200px] shrink-0 items-center gap-1.5 font-semibold text-secondary @[800px]:flex"
+			>
+				<span>{{ formatMessage(messages.enabledFor) }}</span>
+				<span
+					v-tooltip="formatMessage(messages.enabledForDescription)"
+					class="inline-flex size-4 cursor-help items-center justify-center"
+					tabindex="0"
+				>
+					<InfoIcon class="size-4" />
+				</span>
+			</div>
+
 			<div
 				v-if="showVersion"
 				class="hidden @[800px]:flex"
-				:class="hasAnyActions ? 'flex-1 min-w-0' : 'flex-1'"
+				:class="
+					hasAnyActions ? (hasEnabledForColumn ? 'min-w-0 flex-1' : 'flex-1 min-w-0') : 'flex-1'
+				"
 			>
 				<button
 					v-if="sortable"
@@ -264,7 +303,12 @@ function handleSort(column: ContentCardTableSortColumn) {
 				}}</span>
 			</div>
 
-			<div v-if="hasAnyActions" role="columnheader" class="min-w-[160px] shrink-0 text-right">
+			<div
+				v-if="hasAnyActions"
+				role="columnheader"
+				class="shrink-0 text-right"
+				:class="hasEnabledForColumn ? 'w-[168px]' : 'min-w-[160px]'"
+			>
 				<span class="font-semibold text-secondary">{{
 					formatMessage(commonMessages.actionsLabel)
 				}}</span>
@@ -308,6 +352,8 @@ function handleSort(column: ContentCardTableSortColumn) {
 					:toggle-disabled="item.toggleDisabled"
 					:toggle-disabled-tooltip="item.toggleDisabledTooltip"
 					:hide-toggle="item.hideToggle"
+					:enabled-for="item.enabledFor"
+					:embedded-icon="item.embeddedIcon"
 					:show-checkbox="showSelection"
 					:hide-delete="hideDelete || item.hideDelete"
 					:hide-actions="!hasAnyActions"
@@ -329,6 +375,7 @@ function handleSort(column: ContentCardTableSortColumn) {
 							toggleItemSelection(item.id, val ?? false, visibleRange.start + idx, event)
 					"
 					@update:enabled="(val) => emit('update:enabled', item.id, val)"
+					@update:enabled-for="(side, val) => emit('update:enabled-for', item.id, side, val)"
 					@delete="(e: MouseEvent) => emit('delete', item.id, e)"
 					@update="emit('update', item.id)"
 					v-on="
@@ -382,6 +429,8 @@ function handleSort(column: ContentCardTableSortColumn) {
 				:toggle-disabled="item.toggleDisabled"
 				:toggle-disabled-tooltip="item.toggleDisabledTooltip"
 				:hide-toggle="item.hideToggle"
+				:enabled-for="item.enabledFor"
+				:embedded-icon="item.embeddedIcon"
 				:show-checkbox="showSelection"
 				:hide-delete="hideDelete || item.hideDelete"
 				:hide-actions="!hasAnyActions"
@@ -398,6 +447,7 @@ function handleSort(column: ContentCardTableSortColumn) {
 				]"
 				@select="(val, event) => toggleItemSelection(item.id, val ?? false, index, event)"
 				@update:enabled="(val) => emit('update:enabled', item.id, val)"
+				@update:enabled-for="(side, val) => emit('update:enabled-for', item.id, side, val)"
 				@delete="(e: MouseEvent) => emit('delete', item.id, e)"
 				@update="emit('update', item.id)"
 				@switch-version="emit('switchVersion', item.id)"
diff --git a/packages/ui/src/layouts/shared/content-tab/components/ContentEnabledFor.vue b/packages/ui/src/layouts/shared/content-tab/components/ContentEnabledFor.vue
new file mode 100644
index 00000000000..f1e5a0fe388
--- /dev/null
+++ b/packages/ui/src/layouts/shared/content-tab/components/ContentEnabledFor.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { LockIcon, TriangleAlertIcon } from '@modrinth/assets'
+import { computed } from 'vue'
+
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+
+import type { ContentEnabledForState, ContentSide } from '../types'
+
+const messages = defineMessages({
+	server: {
+		id: 'content.enabled-for.server',
+		defaultMessage: 'Server',
+	},
+	player: {
+		id: 'content.enabled-for.player',
+		defaultMessage: 'Player',
+	},
+	locked: {
+		id: 'content.enabled-for.locked',
+		defaultMessage: 'These choices are locked. Select Unlock from the row menu to change them.',
+	},
+	requiredHere: {
+		id: 'content.enabled-for.required-here',
+		defaultMessage: 'This content needs to be enabled here to work correctly.',
+	},
+	notSupportedHere: {
+		id: 'content.enabled-for.not-supported-here',
+		defaultMessage: "This content isn't designed to be enabled here.",
+	},
+})
+
+const props = withDefaults(
+	defineProps<{
+		modelValue: ContentEnabledForState
+		disabled?: boolean
+		disabledTooltip?: string | null
+	}>(),
+	{
+		disabled: false,
+		disabledTooltip: undefined,
+	},
+)
+
+const emit = defineEmits<{
+	'update:model-value': [side: ContentSide, value: boolean]
+}>()
+
+const { formatMessage } = useVIntl()
+
+const sides: ContentSide[] = ['server', 'player']
+const disabledSides = computed(() => new Set(props.modelValue.disabledSides ?? []))
+
+function isSelected(side: ContentSide) {
+	return props.modelValue[side]
+}
+
+function isDisabled(side: ContentSide) {
+	return props.disabled || disabledSides.value.has(side)
+}
+
+function getDisabledTooltip(side: ContentSide) {
+	if (props.disabled) return props.disabledTooltip
+	if (!disabledSides.value.has(side)) return undefined
+	return formatMessage(isSelected(side) ? messages.requiredHere : messages.notSupportedHere)
+}
+
+function toggle(side: ContentSide) {
+	if (isDisabled(side)) return
+	emit('update:model-value', side, !isSelected(side))
+}
+</script>
+
+<template>
+	<div class="flex w-[200px] shrink-0 items-center gap-1.5">
+		<button
+			v-for="side in sides"
+			:key="side"
+			v-tooltip="getDisabledTooltip(side)"
+			type="button"
+			class="flex h-8 items-center rounded-xl border border-solid px-3 text-sm font-medium transition-[background-color,border-color,color,opacity,transform] duration-100 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-brand-shadow"
+			:class="[
+				isSelected(side)
+					? 'border-brand bg-brand-highlight text-brand'
+					: 'border-surface-5 bg-transparent text-primary hover:bg-surface-3',
+				isDisabled(side) ? 'cursor-not-allowed opacity-50' : 'cursor-pointer active:scale-[0.97]',
+			]"
+			:aria-pressed="isSelected(side)"
+			:aria-disabled="isDisabled(side)"
+			@click="toggle(side)"
+		>
+			{{ formatMessage(messages[side]) }}
+		</button>
+
+		<span
+			v-if="modelValue.locked && disabledSides.size > 0"
+			v-tooltip="formatMessage(messages.locked)"
+			class="inline-flex size-5 shrink-0 cursor-help items-center justify-center text-secondary"
+			tabindex="0"
+		>
+			<LockIcon class="size-5" />
+		</span>
+
+		<span
+			v-if="modelValue.warningTooltip"
+			v-tooltip="modelValue.warningTooltip"
+			class="inline-flex size-5 shrink-0 cursor-help items-center justify-center"
+			tabindex="0"
+		>
+			<TriangleAlertIcon class="size-5 text-orange" />
+		</span>
+	</div>
+</template>
diff --git a/packages/ui/src/layouts/shared/content-tab/components/managed-content-modal/index.vue b/packages/ui/src/layouts/shared/content-tab/components/managed-content-modal/index.vue
index 91a322254fa..12617e0dccd 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/managed-content-modal/index.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/managed-content-modal/index.vue
@@ -8,6 +8,7 @@ import {
 	PaintbrushIcon,
 	SearchIcon,
 	SpinnerIcon,
+	UnknownIcon,
 } from '@modrinth/assets'
 import Fuse from 'fuse.js'
 import { computed, nextTick, ref, watchSyncEffect } from 'vue'
@@ -30,7 +31,12 @@ import {
 } from '#ui/utils/common-messages'
 
 import { getClientWarningType } from '../../composables/content-filtering'
-import type { ContentCardProject, ContentCardTableItem, ContentItem } from '../../types'
+import type {
+	ContentCardProject,
+	ContentCardTableItem,
+	ContentItem,
+	ContentSide,
+} from '../../types'
 import ContentCardTable from '../ContentCardTable.vue'
 import ContentSelectionBar from '../ContentSelectionBar.vue'
 
@@ -44,6 +50,7 @@ interface Props {
 	sourceName?: string
 	sourceIconUrl?: string
 	enableToggle?: boolean
+	enableEnabledFor?: boolean
 	actionDisabled?: boolean
 	actionDisabledTooltip?: string | null
 	getOverflowOptions?: (item: ContentItem) => ButtonMenuOption[]
@@ -60,6 +67,7 @@ const props = withDefaults(defineProps<Props>(), {
 	sourceName: undefined,
 	sourceIconUrl: undefined,
 	enableToggle: false,
+	enableEnabledFor: false,
 	actionDisabled: false,
 	actionDisabledTooltip: undefined,
 	getOverflowOptions: undefined,
@@ -71,6 +79,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<{
 	'update:enabled': [item: ContentItem, value: boolean]
+	'update:enabled-for': [item: ContentItem, side: ContentSide, value: boolean]
 	'bulk:enable': [items: ContentItem[]]
 	'bulk:disable': [items: ContentItem[]]
 	hide: []
@@ -129,6 +138,18 @@ const messages = defineMessages({
 		id: 'instances.managed-content-modal.disabled',
 		defaultMessage: 'Disabled',
 	},
+	enabledFor: {
+		id: 'content.enabled-for.label',
+		defaultMessage: 'Enabled for',
+	},
+	enabledForDescription: {
+		id: 'content.enabled-for.description',
+		defaultMessage: 'Choose where this content is enabled. Turn both off to disable it.',
+	},
+	pleaseWait: {
+		id: 'content.enabled-for.please-wait',
+		defaultMessage: 'Please wait',
+	},
 })
 
 export interface ManagedContentModalState {
@@ -285,6 +306,7 @@ const tableItems = computed<ContentCardTableItem[]>(() =>
 			icon_url: item.embedded_metadata?.icon_url ?? null,
 		},
 		projectLink: !item.external && item.project?.id ? `/project/${item.project.id}` : undefined,
+		embeddedIcon: item.embeddedIcon,
 		version: props.showVersion
 			? (item.version ?? {
 					id: item.id,
@@ -307,18 +329,26 @@ const tableItems = computed<ContentCardTableItem[]>(() =>
 					link: item.source.link ?? sourceProjectLink(item.source.project),
 				}
 			: undefined,
-		...(props.enableToggle ? { enabled: item.enabled } : {}),
+		...(props.enableToggle || props.enableEnabledFor ? { enabled: item.enabled } : {}),
+		...(props.enableEnabledFor ? { enabledFor: item.enabledFor } : {}),
 		synced: !!item.synced_pack,
 		syncUpdatePending: item.synced_pack?.update_pending,
 		locked: item.locked,
 		installing: item.installing === true,
 		toggleDisabled: props.actionDisabled,
 		toggleDisabledTooltip: props.actionDisabled ? props.actionDisabledTooltip : undefined,
-		isClientOnly: getClientWarningType(item, props.showEnvironmentWarnings) !== null,
-		clientWarning: getClientWarningType(item, props.showEnvironmentWarnings),
+		isClientOnly:
+			!props.enableEnabledFor && getClientWarningType(item, props.showEnvironmentWarnings) !== null,
+		clientWarning: props.enableEnabledFor
+			? null
+			: getClientWarningType(item, props.showEnvironmentWarnings),
 		disabled:
 			props.actionDisabled || disabledIds.value.has(item.file_name) || item.installing === true,
-		disabledTooltip: props.actionDisabled ? props.actionDisabledTooltip : undefined,
+		disabledTooltip: props.actionDisabled
+			? props.actionDisabledTooltip
+			: disabledIds.value.has(item.file_name)
+				? formatMessage(messages.pleaseWait)
+				: undefined,
 		overflowOptions: [
 			...(props.switchVersion && !item.locked && item.project?.id && item.version?.id
 				? [
@@ -356,7 +386,9 @@ const externalUrls = computed(() => {
 	return urls
 })
 const hasExternalSlicerUrls = computed(() => Object.keys(externalSlicerUrls.value).length > 0)
-const showTableActions = computed(() => props.enableToggle || hasExternalSlicerUrls.value)
+const showTableActions = computed(
+	() => props.enableToggle || props.enableEnabledFor || hasExternalSlicerUrls.value,
+)
 
 function getTypeIcon(type: string) {
 	switch (type) {
@@ -399,6 +431,13 @@ function handleEnabledChange(id: string, value: boolean) {
 	emit('update:enabled', item, value)
 }
 
+function handleEnabledForChange(id: string, side: ContentSide, value: boolean) {
+	if (props.actionDisabled || !props.enableEnabledFor) return
+	const item = items.value.find((item) => item.id === id)
+	if (!item) return
+	emit('update:enabled-for', item, side, value)
+}
+
 function bulkEnable() {
 	if (props.actionDisabled) return
 	emit('bulk:enable', [...toggleableSelectedItems.value])
@@ -504,8 +543,12 @@ defineExpose({ show, showLoading, hide, getState, restore, updateItem, setItems
 <template>
 	<NewModal
 		ref="modal"
-		max-width="min(928px, calc(95vw - 10rem))"
-		width="min(928px, calc(95vw - 10rem))"
+		:max-width="
+			props.enableEnabledFor ? 'min(1080px, calc(95vw - 4rem))' : 'min(928px, calc(95vw - 10rem))'
+		"
+		:width="
+			props.enableEnabledFor ? 'min(1080px, calc(95vw - 4rem))' : 'min(928px, calc(95vw - 10rem))'
+		"
 		:on-hide="handleHide"
 		no-padding
 	>
@@ -579,13 +622,16 @@ defineExpose({ show, showLoading, hide, getState, restore, updateItem, setItems
 
 				<div v-else class="@container flex min-h-0 flex-col">
 					<div
-						class="flex h-12 shrink-0 items-center justify-between gap-4 border-0 border-b border-solid border-surface-4 bg-surface-3 px-3"
+						class="flex h-12 shrink-0 items-center border-0 border-b border-solid border-surface-4 bg-surface-3 px-3"
+						:class="props.enableEnabledFor ? 'gap-2' : 'justify-between gap-4'"
 					>
 						<div
 							class="flex min-w-0 items-center gap-4"
 							:class="
 								showTableActions && showVersion
-									? 'flex-1 @[800px]:w-[45%] @[800px]:shrink-0 @[800px]:flex-none'
+									? props.enableEnabledFor
+										? 'flex-1 @[800px]:w-[340px] @[800px]:shrink-0 @[800px]:flex-none'
+										: 'flex-1 @[800px]:w-[45%] @[800px]:shrink-0 @[800px]:flex-none'
 									: 'flex-1'
 							"
 						>
@@ -601,16 +647,39 @@ defineExpose({ show, showLoading, hide, getState, restore, updateItem, setItems
 								formatMessage(commonMessages.projectLabel)
 							}}</span>
 						</div>
+						<div
+							v-if="props.enableEnabledFor"
+							class="hidden w-[200px] shrink-0 items-center gap-1.5 @[800px]:flex"
+						>
+							<span class="font-semibold text-secondary">{{
+								formatMessage(messages.enabledFor)
+							}}</span>
+							<UnknownIcon
+								v-tooltip="formatMessage(messages.enabledForDescription)"
+								class="size-4 cursor-help text-secondary"
+								tabindex="0"
+							/>
+						</div>
 						<div
 							v-if="showVersion"
 							class="hidden @[800px]:flex"
-							:class="showTableActions ? 'flex-1 min-w-0' : 'flex-1'"
+							:class="
+								showTableActions
+									? props.enableEnabledFor
+										? 'min-w-0 flex-1'
+										: 'flex-1 min-w-0'
+									: 'flex-1'
+							"
 						>
 							<span class="font-semibold text-secondary">{{
 								formatMessage(commonMessages.versionLabel)
 							}}</span>
 						</div>
-						<div v-if="showTableActions" class="min-w-[160px] shrink-0 text-right">
+						<div
+							v-if="showTableActions"
+							class="shrink-0 text-right"
+							:class="props.enableEnabledFor ? 'w-[168px]' : 'min-w-[160px]'"
+						>
 							<span class="font-semibold text-secondary">{{
 								formatMessage(commonMessages.actionsLabel)
 							}}</span>
@@ -624,14 +693,16 @@ defineExpose({ show, showLoading, hide, getState, restore, updateItem, setItems
 							:show-selection="props.enableToggle"
 							:show-item-actions="showTableActions"
 							:show-version="showVersion"
+							:show-enabled-for-column="props.enableEnabledFor"
 							hide-delete
 							hide-header
 							flat
 							v-on="
-								props.enableToggle
+								props.enableToggle || props.enableEnabledFor
 									? { 'update:enabled': (id: string, val: boolean) => handleEnabledChange(id, val) }
 									: {}
 							"
+							@update:enabled-for="handleEnabledForChange"
 						>
 							<template #itemTitleBadges="{ item }">
 								<span
diff --git a/packages/ui/src/layouts/shared/content-tab/layout.vue b/packages/ui/src/layouts/shared/content-tab/layout.vue
index e14a31ba6e8..82ed341aaaa 100644
--- a/packages/ui/src/layouts/shared/content-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/content-tab/layout.vue
@@ -181,9 +181,18 @@ function getItemId(item: ContentItem) {
 }
 
 type SortMode = 'alphabetical-asc' | 'alphabetical-desc' | 'date-added-newest' | 'date-added-oldest'
+const defaultSortMode: SortMode = 'alphabetical-asc'
 const sortMode = ctx.filterPersistKey
-	? useSessionStorage<SortMode>(`content-sort:${ctx.filterPersistKey}`, 'alphabetical-asc')
-	: ref<SortMode>('alphabetical-asc')
+	? useSessionStorage<SortMode>(`content-sort:${ctx.filterPersistKey}`, defaultSortMode)
+	: ref<SortMode>(defaultSortMode)
+
+const validSortModes: readonly string[] = [
+	'alphabetical-asc',
+	'alphabetical-desc',
+	'date-added-newest',
+	'date-added-oldest',
+]
+if (!validSortModes.includes(sortMode.value)) sortMode.value = defaultSortMode
 
 const sortLabels: Record<SortMode, () => string> = {
 	'alphabetical-asc': () => formatMessage(messages.sortAlphabeticalAscending),
@@ -192,32 +201,36 @@ const sortLabels: Record<SortMode, () => string> = {
 	'date-added-oldest': () => formatMessage(messages.sortDateAddedOldest),
 }
 
-const sortOptions = computed<ButtonMenuOption[]>(() => [
-	{
-		id: 'alphabetical-asc',
-		label: formatMessage(messages.sortAlphabeticalAscending),
-		icon: ArrowDownAZIcon,
-		action: () => (sortMode.value = 'alphabetical-asc'),
-	},
-	{
-		id: 'alphabetical-desc',
-		label: formatMessage(messages.sortAlphabeticalDescending),
-		icon: ArrowUpZAIcon,
-		action: () => (sortMode.value = 'alphabetical-desc'),
-	},
-	{
-		id: 'date-added-newest',
-		label: formatMessage(messages.sortDateAddedNewest),
-		icon: ClockArrowDownIcon,
-		action: () => (sortMode.value = 'date-added-newest'),
-	},
-	{
-		id: 'date-added-oldest',
-		label: formatMessage(messages.sortDateAddedOldest),
-		icon: ClockArrowUpIcon,
-		action: () => (sortMode.value = 'date-added-oldest'),
-	},
-])
+const sortOptions = computed<ButtonMenuOption[]>(() => {
+	const options: ButtonMenuOption[] = [
+		{
+			id: 'alphabetical-asc',
+			label: formatMessage(messages.sortAlphabeticalAscending),
+			icon: ArrowDownAZIcon,
+			action: () => (sortMode.value = 'alphabetical-asc'),
+		},
+		{
+			id: 'alphabetical-desc',
+			label: formatMessage(messages.sortAlphabeticalDescending),
+			icon: ArrowUpZAIcon,
+			action: () => (sortMode.value = 'alphabetical-desc'),
+		},
+		{
+			id: 'date-added-newest',
+			label: formatMessage(messages.sortDateAddedNewest),
+			icon: ClockArrowDownIcon,
+			action: () => (sortMode.value = 'date-added-newest'),
+		},
+		{
+			id: 'date-added-oldest',
+			label: formatMessage(messages.sortDateAddedOldest),
+			icon: ClockArrowUpIcon,
+			action: () => (sortMode.value = 'date-added-oldest'),
+		},
+	]
+
+	return options
+})
 
 const sortedItems = computed(() => {
 	const items = [...ctx.items.value]
@@ -436,14 +449,22 @@ const tableItems = computed<ContentCardTableItem[]>(() => {
 		const base = ctx.mapToTableItem(item)
 		const id = getItemId(item)
 		const locked = base.locked ?? item.locked ?? false
-		const clientWarning = getClientWarningType(item, ctx.showEnvironmentWarnings)
+		const clientWarning = base.enabledFor
+			? null
+			: getClientWarningType(item, ctx.showEnvironmentWarnings)
 		return {
 			...base,
 			id,
 			locked,
 			disabled:
 				isChanging(id) || ctx.isBusy.value || isBulkOperating.value || item.installing === true,
-			disabledTooltip: ctx.isBusy.value ? (ctx.busyMessage?.value ?? null) : null,
+			disabledTooltip: ctx.isBusy.value
+				? (ctx.busyMessage?.value ?? null)
+				: isChanging(id)
+					? formatMessage(messages.pleaseWait)
+					: item.installing
+						? formatMessage(commonMessages.installingLabel)
+						: null,
 			toggleDisabled: ctx.isBusy.value || base.toggleDisabled,
 			toggleDisabledTooltip: ctx.isBusy.value
 				? (ctx.busyMessage?.value ?? null)
@@ -517,7 +538,10 @@ function canDeleteItem(item: ContentItem) {
 }
 
 function canToggleItem(item: ContentItem) {
-	return ctx.canToggleItem?.(item) ?? true
+	return (
+		ctx.canToggleItem?.(item) ??
+		!!(ctx.toggleEnabled || ctx.bulkEnableItems || ctx.bulkDisableItems)
+	)
 }
 
 const deletableSelectedItems = computed(() => selectedItems.value.filter(canDeleteItem))
@@ -640,6 +664,7 @@ async function disableItemsWithoutWarning(items: ContentItem[]) {
 		await ctx.bulkDisableItems(items)
 		return
 	}
+	if (!ctx.toggleEnabled) return
 
 	for (const item of items) {
 		const id = getItemId(item)
@@ -754,7 +779,7 @@ async function confirmDisable() {
 			if (ctx.bulkDisableItems) {
 				await ctx.bulkDisableItems(itemsToDisable)
 			} else {
-				await ctx.toggleEnabled(item)
+				await ctx.toggleEnabled?.(item)
 			}
 		} finally {
 			unmarkChanging(id)
@@ -768,7 +793,7 @@ async function confirmDisable() {
 }
 
 async function handleToggleEnabledById(id: string, _value: boolean) {
-	if (ctx.isBusy.value) return
+	if (ctx.isBusy.value || !ctx.toggleEnabled) return
 	const item = ctx.items.value.find((i) => getItemId(i) === id)
 	if (!item) return
 	if (!canToggleItem(item)) return
@@ -808,7 +833,8 @@ async function bulkEnable() {
 		}
 		return
 	}
-	await runBulk('enable', items, (item) => ctx.toggleEnabled(item), { onComplete: clearSelection })
+	if (!ctx.toggleEnabled) return
+	await runBulk('enable', items, (item) => ctx.toggleEnabled!(item), { onComplete: clearSelection })
 }
 
 async function bulkDisable() {
@@ -831,6 +857,14 @@ function handleSwitchVersionById(id: string) {
 	}
 }
 
+async function handleSetEnabledForById(id: string, side: 'server' | 'player', enabled: boolean) {
+	if (ctx.isBusy.value || !ctx.setEnabledFor) return
+	const item = ctx.items.value.find((candidate) => getItemId(candidate) === id)
+	if (!item) return
+
+	await ctx.setEnabledFor(item, side, enabled)
+}
+
 // Bulk updating
 const confirmBulkUpdateModal = ref<InstanceType<typeof ConfirmBulkUpdateModal>>()
 const pendingBulkUpdateItems = ref<ContentItem[]>([])
@@ -1247,7 +1281,9 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 							:items="tableItems"
 							:highlighted-item-id="highlightedItemId"
 							:show-selection="true"
+							:show-enabled-for-column="!!ctx.setEnabledFor"
 							@update:enabled="handleToggleEnabledById"
+							@update:enabled-for="handleSetEnabledForById"
 							@delete="handleDeleteById"
 							@update="handleUpdateById"
 							@switch-version="handleSwitchVersionById"
diff --git a/packages/ui/src/layouts/shared/content-tab/providers/content-manager.ts b/packages/ui/src/layouts/shared/content-tab/providers/content-manager.ts
index 71b052cde75..2f9f9d5485d 100644
--- a/packages/ui/src/layouts/shared/content-tab/providers/content-manager.ts
+++ b/packages/ui/src/layouts/shared/content-tab/providers/content-manager.ts
@@ -8,6 +8,7 @@ import type {
 	ContentActionWarning,
 	ContentCardTableItem,
 	ContentItem,
+	ContentSide,
 	ManagedContentCardData,
 } from '../types'
 
@@ -46,7 +47,8 @@ export interface ContentManagerContext {
 	contentTypeLabel: Ref<string> | ComputedRef<string>
 
 	// Core actions
-	toggleEnabled: (item: ContentItem) => Promise<void>
+	toggleEnabled?: (item: ContentItem) => Promise<void>
+	setEnabledFor?: (item: ContentItem, side: ContentSide, enabled: boolean) => Promise<void>
 	deleteItem: (item: ContentItem) => Promise<void>
 	refresh: () => Promise<void>
 	browse: () => void
diff --git a/packages/ui/src/layouts/shared/content-tab/types.ts b/packages/ui/src/layouts/shared/content-tab/types.ts
index f5cb9e76a50..16e1ea6b704 100644
--- a/packages/ui/src/layouts/shared/content-tab/types.ts
+++ b/packages/ui/src/layouts/shared/content-tab/types.ts
@@ -50,6 +50,22 @@ export interface EmbeddedContentMetadata {
 	icon_url?: string | null
 }
 
+export type ContentSide = 'server' | 'player'
+
+export interface ContentEnabledForState {
+	server: boolean
+	player: boolean
+	locked: boolean
+	disabledSides?: ContentSide[]
+	warningTooltip?: string | null
+}
+
+export interface ContentCardEmbeddedIcon {
+	queryKey: readonly unknown[]
+	queryFn: () => Promise<Blob>
+	fallbackUrl?: string | null
+}
+
 export interface ContentCardTableItem {
 	id: string
 	project: ContentCardProject
@@ -76,6 +92,8 @@ export interface ContentCardTableItem {
 	hideDelete?: boolean
 	hideSwitchVersion?: boolean
 	overflowOptions?: ButtonMenuOption[]
+	enabledFor?: ContentEnabledForState
+	embeddedIcon?: ContentCardEmbeddedIcon
 }
 
 export type ContentCardTableSortColumn = 'project' | 'version'
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/installation.vue b/packages/ui/src/layouts/shared/server-settings/pages/installation.vue
index 51e3c4ca3fd..72b316f0c7c 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/installation.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/installation.vue
@@ -500,6 +500,26 @@ async function uploadLocalModpackWithSoftOverride() {
 	return true
 }
 
+async function disableAddonsEverywhere(addons: Archon.Content.v1.Addon[]) {
+	await Promise.all(
+		addons.flatMap((addon) => {
+			const request: Archon.Content.v1.SetAddonEnabledRequest = {
+				kind: addon.kind,
+				filename: addon.filename,
+				enabled: false,
+			}
+			return [
+				...(!addon.disabled_server
+					? [client.archon.content_v1.setAddonEnabledServer(serverId, worldId.value!, request)]
+					: []),
+				...(!addon.disabled_player
+					? [client.archon.content_v1.setAddonEnabledPlayer(serverId, worldId.value!, request)]
+					: []),
+			]
+		}),
+	)
+}
+
 provideInstallationSettings({
 	closeSettings: serverSettings.closeModal,
 	afterSave: async () => {
@@ -899,12 +919,12 @@ provideInstallationSettings({
 		if (setupActionDisabled.value) return
 		debug('disableAllContent: fetching all addons')
 		const addons = await client.archon.content_v1.getAddons(serverId, worldId.value!)
-		const items = (addons.addons ?? [])
-			.filter((a) => !a.disabled)
-			.map((a) => ({ kind: a.kind, filename: a.filename }))
-		if (items.length > 0) {
-			debug('disableAllContent: disabling', items.length, 'addons')
-			await client.archon.content_v1.disableAddons(serverId, worldId.value!, items)
+		const activeAddons = (addons.addons ?? []).filter(
+			(addon) => !addon.disabled_server || !addon.disabled_player,
+		)
+		if (activeAddons.length > 0) {
+			debug('disableAllContent: disabling', activeAddons.length, 'addons')
+			await disableAddonsEverywhere(activeAddons)
 		}
 		debug('disableAllContent: done')
 	},
@@ -913,7 +933,9 @@ provideInstallationSettings({
 		if (setupActionDisabled.value) return
 		debug('disableIncompatibleContent: fetching addons')
 		const addons = await client.archon.content_v1.getAddons(serverId, worldId.value!)
-		const activeAddons = (addons.addons ?? []).filter((a) => !a.disabled)
+		const activeAddons = (addons.addons ?? []).filter(
+			(addon) => !addon.disabled_server || !addon.disabled_player,
+		)
 
 		const modrinthAddons = activeAddons.filter((a) => a.version?.id)
 		const customAddons = activeAddons.filter((a) => !a.version?.id)
@@ -936,7 +958,12 @@ provideInstallationSettings({
 
 		if (incompatibleItems.length > 0) {
 			debug('disableIncompatibleContent: disabling', incompatibleItems.length, 'addons')
-			await client.archon.content_v1.disableAddons(serverId, worldId.value!, incompatibleItems)
+			const incompatibleKeys = new Set(
+				incompatibleItems.map((item) => `${item.kind}:${item.filename}`),
+			)
+			await disableAddonsEverywhere(
+				activeAddons.filter((addon) => incompatibleKeys.has(`${addon.kind}:${addon.filename}`)),
+			)
 		}
 		debug('disableIncompatibleContent: done')
 	},
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/content.vue b/packages/ui/src/layouts/wrapped/hosting/manage/content.vue
index c32ba61b1e5..47e52c3dad4 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/content.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/content.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { type Archon, type Labrinth, ModrinthApiError } from '@modrinth/api-client'
-import { ClipboardCopyIcon } from '@modrinth/assets'
+import { ClipboardCopyIcon, LockIcon, LockOpenIcon } from '@modrinth/assets'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
 import { computed, nextTick, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
+import type { OverflowMenuOption } from '#ui/components/base/buttons'
 import ReadyTransition from '#ui/components/base/ReadyTransition.vue'
 import UnknownFileWarningModal from '#ui/components/modal/UnknownFileWarningModal.vue'
 import { useUploadSessionUpload } from '#ui/composables/hosting/kyros-session-upload'
@@ -34,7 +35,7 @@ import ContentUpdaterModal from '../../../shared/content-tab/components/modals/c
 import ContentPageLayout from '../../../shared/content-tab/layout.vue'
 import type { ManagedContentData } from '../../../shared/content-tab/providers/content-manager'
 import { provideContentManager } from '../../../shared/content-tab/providers/content-manager'
-import type { ContentItem } from '../../../shared/content-tab/types'
+import type { ContentItem, ContentSide } from '../../../shared/content-tab/types'
 import { summarizeManagedContent } from '../../../shared/content-tab/utils/managed-content'
 
 type AddonWithUiState = Archon.Content.v1.Addon & { installing?: boolean }
@@ -65,7 +66,15 @@ const messages = defineMessages({
 	},
 	failedToToggle: {
 		id: 'hosting.content.failed-to-toggle',
-		defaultMessage: 'Failed to toggle {name}',
+		defaultMessage: 'Failed to enable or disable {name}',
+	},
+	failedToSetEnabledFor: {
+		id: 'hosting.content.failed-to-set-enabled-for',
+		defaultMessage: 'Failed to change where {name} is enabled',
+	},
+	failedToSetSideLock: {
+		id: 'hosting.content.failed-to-set-side-lock',
+		defaultMessage: 'Failed to change the environment lock for {name}',
 	},
 	failedToUpload: {
 		id: 'hosting.content.failed-to-upload',
@@ -91,14 +100,6 @@ const messages = defineMessages({
 		id: 'hosting.content.failed-to-bulk-delete',
 		defaultMessage: 'Failed to delete content',
 	},
-	failedToBulkEnable: {
-		id: 'hosting.content.failed-to-bulk-enable',
-		defaultMessage: 'Failed to enable content',
-	},
-	failedToBulkDisable: {
-		id: 'hosting.content.failed-to-bulk-disable',
-		defaultMessage: 'Failed to disable content',
-	},
 	failedToBulkUpdate: {
 		id: 'hosting.content.failed-to-bulk-update',
 		defaultMessage: 'Failed to update content',
@@ -107,6 +108,19 @@ const messages = defineMessages({
 		id: 'hosting.content.failed-to-install',
 		defaultMessage: 'Failed to install content',
 	},
+	unknownEnvironment: {
+		id: 'hosting.content.enabled-for.unknown-environment',
+		defaultMessage:
+			"We couldn't tell where this content should be enabled. Review the Server and Player choices.",
+	},
+	lockEnvironment: {
+		id: 'hosting.content.enabled-for.lock-environment',
+		defaultMessage: 'Lock',
+	},
+	unlockEnvironment: {
+		id: 'hosting.content.enabled-for.unlock-environment',
+		defaultMessage: 'Unlock',
+	},
 })
 
 const client = injectModrinthClient()
@@ -299,12 +313,56 @@ const managedContent = computed<ManagedContentData | null>(() => {
 
 function friendlyAddonName(addon: Archon.Content.v1.Addon): string {
 	if (addon.name) return addon.name
+	if (addon.manifest?.name) return addon.manifest.name
 	let cleanName = addon.filename
 	const lastDotIndex = cleanName.lastIndexOf('.')
 	if (lastDotIndex !== -1) cleanName = cleanName.substring(0, lastDotIndex)
 	return cleanName
 }
 
+function getAddonEnvironment(
+	addon: Archon.Content.v1.Addon,
+): Labrinth.Projects.v3.Environment | undefined {
+	return addon.version?.environment ?? addon.manifest?.environment ?? undefined
+}
+
+function hasDetectedEnvironment(addon: Archon.Content.v1.Addon) {
+	const environment = getAddonEnvironment(addon)
+	return environment !== undefined && environment !== 'unknown'
+}
+
+function getEnvironmentLockedSides(addon: Archon.Content.v1.Addon): ContentSide[] {
+	switch (getAddonEnvironment(addon)) {
+		case 'client_and_server':
+		case 'client_only':
+		case 'singleplayer_only':
+		case 'server_only':
+		case 'dedicated_server_only':
+			return ['server', 'player']
+		case 'client_only_server_optional':
+			return ['player']
+		case 'server_only_client_optional':
+			return ['server']
+		default:
+			return []
+	}
+}
+
+function getLockedSides(addon: Archon.Content.v1.Addon): ContentSide[] {
+	return addon.side_toggle_unlocked ? [] : getEnvironmentLockedSides(addon)
+}
+
+function hasEnvironmentLock(addon: Archon.Content.v1.Addon) {
+	return getEnvironmentLockedSides(addon).length > 0
+}
+
+function getEnabledForWarning(addon: Archon.Content.v1.Addon) {
+	if (addon.pack_client_retained) return formatMessage(commonMessages.clientRetainedWarning)
+	if (addon.pack_client_depends) return formatMessage(commonMessages.clientDependsWarning)
+	if (!hasDetectedEnvironment(addon)) return formatMessage(messages.unknownEnvironment)
+	return null
+}
+
 const modpackAddons = ref<Archon.Content.v1.Addon[]>([])
 
 const addonLookup = computed(() => {
@@ -312,12 +370,23 @@ const addonLookup = computed(() => {
 	for (const addon of contentQuery.data.value?.addons ?? []) {
 		map.set(addon.filename, addon)
 	}
-	for (const addon of modpackAddons.value) {
-		map.set(addon.filename, addon)
-	}
 	return map
 })
 
+const modpackAddonLookup = computed(
+	() => new Map(modpackAddons.value.map((addon) => [addon.filename, addon])),
+)
+
+function getAddonForItem(item: ContentItem) {
+	return item.source_kind === 'modrinth_modpack'
+		? modpackAddonLookup.value.get(item.file_name)
+		: addonLookup.value.get(item.file_name)
+}
+
+function getAddonQueryKey(addon: Archon.Content.v1.Addon) {
+	return addon.from_modpack ? modpackContentQueryKey.value : queryKey.value
+}
+
 const projectMetadataBatchSize = 800
 const contentProjectIds = computed(() =>
 	[...(contentQuery.data.value?.addons ?? []), ...modpackAddons.value]
@@ -557,44 +626,184 @@ const deleteMutation = useMutation({
 	},
 })
 
-const toggleMutation = useMutation({
-	mutationFn: async ({ addon }: { addon: Archon.Content.v1.Addon }) => {
+const toggleEnabledMutation = useMutation({
+	mutationFn: async ({ addon, enabled }: { addon: Archon.Content.v1.Addon; enabled: boolean }) => {
 		const request: Archon.Content.v1.RemoveAddonRequest = {
 			filename: addon.filename,
 			kind: addon.kind,
 		}
-		if (addon.disabled) {
+		if (enabled) {
 			await client.archon.content_v1.enableAddon(serverId, worldId.value!, request)
 		} else {
 			await client.archon.content_v1.disableAddon(serverId, worldId.value!, request)
 		}
-		return { filename: addon.filename, newDisabled: !addon.disabled }
 	},
-	onSuccess: ({ filename, newDisabled }) => {
-		queryClient.setQueryData(queryKey.value, (oldData: Archon.Content.v1.Addons | undefined) => {
+	onMutate: async ({ addon, enabled }) => {
+		const targetQueryKey = getAddonQueryKey(addon)
+		await queryClient.cancelQueries({ queryKey: targetQueryKey })
+		const previousData = queryClient.getQueryData<Archon.Content.v1.Addons>(targetQueryKey)
+		queryClient.setQueryData(targetQueryKey, (oldData: Archon.Content.v1.Addons | undefined) => {
 			if (!oldData) return oldData
 			return {
 				...oldData,
-				addons: (oldData.addons ?? []).map((a) =>
-					a.filename === filename ? { ...a, disabled: newDisabled } : a,
+				addons: (oldData.addons ?? []).map((candidate) =>
+					candidate.filename === addon.filename && candidate.kind === addon.kind
+						? { ...candidate, disabled: !enabled }
+						: candidate,
 				),
 			}
 		})
-		queryClient.invalidateQueries({ queryKey: queryKey.value })
+		return { previousData, targetQueryKey }
+	},
+	onError: (error, { addon }, context) => {
+		if (context?.previousData) {
+			queryClient.setQueryData(context.targetQueryKey, context.previousData)
+		}
+		addNotification({
+			type: 'error',
+			title: formatMessage(messages.failedToToggle, {
+				name: friendlyAddonName(addon),
+			}),
+			text: error instanceof Error ? error.message : undefined,
+		})
+	},
+	onSettled: () => {
+		void queryClient.invalidateQueries({ queryKey: queryKey.value })
+		void queryClient.invalidateQueries({ queryKey: modpackContentQueryKey.value })
+	},
+})
+
+type SetEnabledForVariables = {
+	addon: Archon.Content.v1.Addon
+	sides: ContentSide[]
+	enabled: boolean
+}
+
+const setEnabledForMutation = useMutation({
+	mutationFn: async ({ addon, sides, enabled }: SetEnabledForVariables) => {
+		const request: Archon.Content.v1.SetAddonEnabledRequest = {
+			filename: addon.filename,
+			kind: addon.kind,
+			enabled,
+		}
+		await Promise.all(
+			sides.map((side) =>
+				side === 'server'
+					? client.archon.content_v1.setAddonEnabledServer(serverId, worldId.value!, request)
+					: client.archon.content_v1.setAddonEnabledPlayer(serverId, worldId.value!, request),
+			),
+		)
+	},
+	onMutate: async ({ addon, sides, enabled }) => {
+		const targetQueryKey = getAddonQueryKey(addon)
+		await queryClient.cancelQueries({ queryKey: targetQueryKey })
+		const previousData = queryClient.getQueryData<Archon.Content.v1.Addons>(targetQueryKey)
+		queryClient.setQueryData(targetQueryKey, (oldData: Archon.Content.v1.Addons | undefined) => {
+			if (!oldData) return oldData
+			return {
+				...oldData,
+				addons: (oldData.addons ?? []).map((candidate) => {
+					if (candidate.filename !== addon.filename || candidate.kind !== addon.kind)
+						return candidate
+					return {
+						...candidate,
+						...(sides.includes('server') ? { disabled_server: !enabled } : {}),
+						...(sides.includes('player') ? { disabled_player: !enabled } : {}),
+					}
+				}),
+			}
+		})
+		return { previousData, targetQueryKey }
+	},
+	onError: (error, { addon }, context) => {
+		if (context?.previousData) {
+			queryClient.setQueryData(context.targetQueryKey, context.previousData)
+		}
+		addNotification({
+			type: 'error',
+			title: formatMessage(messages.failedToSetEnabledFor, {
+				name: friendlyAddonName(addon),
+			}),
+			text: error instanceof Error ? error.message : undefined,
+		})
+	},
+	onSettled: () => {
+		void queryClient.invalidateQueries({ queryKey: queryKey.value })
+		void queryClient.invalidateQueries({ queryKey: modpackContentQueryKey.value })
+	},
+})
+
+const setSideLockMutation = useMutation({
+	mutationFn: async ({ addon, locked }: { addon: Archon.Content.v1.Addon; locked: boolean }) => {
+		await client.archon.content_v1.setAddonSideToggleLocked(serverId, worldId.value!, {
+			filename: addon.filename,
+			kind: addon.kind,
+			locked,
+		})
 	},
-	onError: (_err, { addon }) => {
+	onMutate: async ({ addon, locked }) => {
+		const targetQueryKey = getAddonQueryKey(addon)
+		await queryClient.cancelQueries({ queryKey: targetQueryKey })
+		const previousData = queryClient.getQueryData<Archon.Content.v1.Addons>(targetQueryKey)
+		queryClient.setQueryData(targetQueryKey, (oldData: Archon.Content.v1.Addons | undefined) => {
+			if (!oldData) return oldData
+			return {
+				...oldData,
+				addons: (oldData.addons ?? []).map((candidate) =>
+					candidate.filename === addon.filename && candidate.kind === addon.kind
+						? { ...candidate, side_toggle_unlocked: !locked }
+						: candidate,
+				),
+			}
+		})
+		return { previousData, targetQueryKey }
+	},
+	onError: (error, { addon }, context) => {
+		if (context?.previousData) {
+			queryClient.setQueryData(context.targetQueryKey, context.previousData)
+		}
 		addNotification({
 			type: 'error',
-			title: formatMessage(messages.failedToToggle, { name: friendlyAddonName(addon) }),
+			title: formatMessage(messages.failedToSetSideLock, {
+				name: friendlyAddonName(addon),
+			}),
+			text: error instanceof Error ? error.message : undefined,
 		})
 	},
+	onSettled: () => {
+		void queryClient.invalidateQueries({ queryKey: queryKey.value })
+		void queryClient.invalidateQueries({ queryKey: modpackContentQueryKey.value })
+	},
 })
 
+async function handleSetEnabledFor(item: ContentItem, side: ContentSide, enabled: boolean) {
+	if (contentActionDisabled.value) return
+	const addon = getAddonForItem(item)
+	if (!addon) return
+	await setEnabledForMutation.mutateAsync({ addon, sides: [side], enabled })
+}
+
 async function handleToggleEnabled(item: ContentItem) {
 	if (contentActionDisabled.value) return
-	const addon = addonLookup.value.get(item.file_name)
+	const addon = getAddonForItem(item)
 	if (!addon) return
-	await toggleMutation.mutateAsync({ addon })
+	await toggleEnabledMutation.mutateAsync({ addon, enabled: addon.disabled })
+}
+
+async function handleModpackSetEnabledFor(item: ContentItem, side: ContentSide, enabled: boolean) {
+	try {
+		await handleSetEnabledFor(item, side, enabled)
+	} catch {
+		return
+	}
+}
+
+async function handleModpackToggleEnabled(item: ContentItem) {
+	try {
+		await handleToggleEnabled(item)
+	} catch {
+		return
+	}
 }
 
 async function handleDeleteItem(item: ContentItem) {
@@ -629,38 +838,6 @@ async function handleBulkDelete(items: ContentItem[]) {
 	}
 }
 
-async function handleBulkEnable(items: ContentItem[]) {
-	if (contentActionDisabled.value) return
-	const requests = itemsToAddonRequests(items)
-	if (requests.length === 0) return
-	try {
-		await client.archon.content_v1.enableAddons(serverId, worldId.value!, requests)
-		await queryClient.invalidateQueries({ queryKey: queryKey.value })
-	} catch (err) {
-		addNotification({
-			type: 'error',
-			title: formatMessage(messages.failedToBulkEnable),
-			text: err instanceof Error ? err.message : undefined,
-		})
-	}
-}
-
-async function handleBulkDisable(items: ContentItem[]) {
-	if (contentActionDisabled.value) return
-	const requests = itemsToAddonRequests(items)
-	if (requests.length === 0) return
-	try {
-		await client.archon.content_v1.disableAddons(serverId, worldId.value!, requests)
-		await queryClient.invalidateQueries({ queryKey: queryKey.value })
-	} catch (err) {
-		addNotification({
-			type: 'error',
-			title: formatMessage(messages.failedToBulkDisable),
-			text: err instanceof Error ? err.message : undefined,
-		})
-	}
-}
-
 const modpackUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 const modpackContentModal = ref<InstanceType<typeof ManagedContentModal>>()
 const contentUpdaterModal = ref<InstanceType<typeof ContentUpdaterModal>>()
@@ -813,17 +990,48 @@ function addonToContentItem(addon: AddonWithUiState): ContentItem {
 	const projectMetadata = addon.project_id
 		? contentProjectsById.value.get(addon.project_id)
 		: undefined
+	const environment = getAddonEnvironment(addon)
+	const embeddedIcon =
+		!addon.icon_url &&
+		addon.manifest?.icon_embedded &&
+		worldId.value &&
+		(addon.kind === 'mod' || addon.kind === 'plugin')
+			? {
+					queryKey: [
+						'kyros',
+						'content',
+						'embedded-icon',
+						worldId.value,
+						addon.kind,
+						addon.filename,
+					] as const,
+					queryFn: () =>
+						client.kyros.content_v1.getEmbeddedAddonIcon(
+							worldId.value!,
+							addon.kind === 'mod' ? 'mods' : 'plugins',
+							addon.filename,
+						),
+					fallbackUrl: projectMetadata?.icon_url,
+				}
+			: undefined
+	const serverEnabled = !addon.disabled_server
+	const playerEnabled = !addon.disabled_player
+	const lockedSides = getLockedSides(addon)
 	return {
 		project: {
 			...(projectMetadata ?? {}),
 			id: addon.project_id ?? addon.filename,
 			slug: projectMetadata?.slug ?? addon.project_id ?? addon.filename,
 			title: projectMetadata?.title ?? friendlyAddonName(addon),
-			icon_url: addon.icon_url ?? projectMetadata?.icon_url ?? undefined,
+			icon_url:
+				addon.icon_url ?? (embeddedIcon ? undefined : projectMetadata?.icon_url) ?? undefined,
 		},
 		version: {
 			id: addon.version?.id ?? addon.filename,
-			version_number: addon.version?.name ?? formatMessage(commonMessages.unknownLabel),
+			version_number:
+				addon.version?.name ??
+				addon.manifest?.version ??
+				formatMessage(commonMessages.unknownLabel),
 			file_name: addon.filename,
 		},
 		owner: addon.owner
@@ -836,13 +1044,23 @@ function addonToContentItem(addon: AddonWithUiState): ContentItem {
 				}
 			: undefined,
 		id: addon.id ?? addon.filename,
+		external: !addon.project_id,
+		source_kind: addon.from_modpack ? 'modrinth_modpack' : undefined,
 		enabled: !addon.disabled,
+		enabledFor: {
+			server: serverEnabled,
+			player: playerEnabled,
+			locked: lockedSides.length > 0,
+			disabledSides: lockedSides,
+			warningTooltip: getEnabledForWarning(addon),
+		},
+		embeddedIcon,
 		file_name: addon.filename,
 		date_added: addon.btime,
 		project_type: addon.kind,
 		has_update: !!addon.has_update,
 		update_version_id: addon.has_update,
-		environment: addon.version?.environment ?? undefined,
+		environment,
 		pack_client_retained: addon.pack_client_retained,
 		pack_client_depends: addon.pack_client_depends,
 		installing: addon.installing ?? addon.status === 'pending',
@@ -877,86 +1095,6 @@ async function handleViewModpackContent() {
 	}
 }
 
-async function handleModpackContentToggle(item: ContentItem) {
-	if (contentActionDisabled.value) return
-	const addon = addonLookup.value.get(item.file_name)
-	if (!addon) return
-	modpackContentModal.value?.updateItem(item.file_name, { disabled: true })
-	try {
-		await toggleMutation.mutateAsync({ addon })
-		modpackAddons.value = modpackAddons.value.map((a) =>
-			a.filename === addon.filename ? { ...a, disabled: !addon.disabled } : a,
-		)
-		queryClient.setQueryData(
-			modpackContentQueryKey.value,
-			(oldData: Archon.Content.v1.Addons | undefined) =>
-				oldData
-					? {
-							...oldData,
-							addons: (oldData.addons ?? []).map((a) =>
-								a.filename === addon.filename ? { ...a, disabled: !addon.disabled } : a,
-							),
-						}
-					: oldData,
-		)
-		modpackContentModal.value?.updateItem(item.file_name, {
-			enabled: !item.enabled,
-			disabled: false,
-		})
-	} catch {
-		modpackContentModal.value?.updateItem(item.file_name, { disabled: false })
-	}
-}
-
-async function handleModpackBulkToggle(items: ContentItem[], enable: boolean) {
-	if (contentActionDisabled.value) return
-	const requests = itemsToAddonRequests(items)
-	if (requests.length === 0) return
-
-	// Optimistic update
-	for (const item of items) {
-		modpackAddons.value = modpackAddons.value.map((a) =>
-			a.filename === item.file_name ? { ...a, disabled: !enable } : a,
-		)
-		modpackContentModal.value?.updateItem(item.file_name, { enabled: enable })
-	}
-
-	try {
-		if (enable) {
-			await client.archon.content_v1.enableAddons(serverId, worldId.value!, requests)
-		} else {
-			await client.archon.content_v1.disableAddons(serverId, worldId.value!, requests)
-		}
-		queryClient.setQueryData(
-			modpackContentQueryKey.value,
-			(oldData: Archon.Content.v1.Addons | undefined) =>
-				oldData
-					? {
-							...oldData,
-							addons: (oldData.addons ?? []).map((addon) =>
-								items.some((item) => item.file_name === addon.filename)
-									? { ...addon, disabled: !enable }
-									: addon,
-							),
-						}
-					: oldData,
-		)
-		await queryClient.invalidateQueries({ queryKey: queryKey.value })
-	} catch (err) {
-		for (const item of items) {
-			modpackAddons.value = modpackAddons.value.map((a) =>
-				a.filename === item.file_name ? { ...a, disabled: enable } : a,
-			)
-			modpackContentModal.value?.updateItem(item.file_name, { enabled: !enable })
-		}
-		addNotification({
-			type: 'error',
-			title: formatMessage(enable ? messages.failedToBulkEnable : messages.failedToBulkDisable),
-			text: err instanceof Error ? err.message : undefined,
-		})
-	}
-}
-
 function handleModpackUnlink() {
 	modpackUnlinkModal.value?.show()
 }
@@ -1175,12 +1313,22 @@ function handleModpackUpdateCancel() {
 	pendingModpackUpdateVersion.value = null
 }
 
-function getOverflowOptions(item: ContentItem) {
-	const options: { id: string; icon?: typeof ClipboardCopyIcon; action: () => void }[] = []
+async function handleToggleSideLock(addon: Archon.Content.v1.Addon) {
+	if (contentActionDisabled.value) return
+	await setSideLockMutation.mutateAsync({
+		addon,
+		locked: addon.side_toggle_unlocked,
+	})
+}
+
+function getOverflowOptions(item: ContentItem): OverflowMenuOption[] {
+	const options: OverflowMenuOption[] = []
+	const addon = getAddonForItem(item)
 
-	if (item.project?.slug) {
+	if (addon?.project_id && item.project?.slug) {
 		options.push({
-			id: formatMessage(commonMessages.copyLinkButton),
+			id: 'copy-link',
+			label: formatMessage(commonMessages.copyLinkButton),
 			icon: ClipboardCopyIcon,
 			action: async () => {
 				await navigator.clipboard.writeText(
@@ -1190,6 +1338,18 @@ function getOverflowOptions(item: ContentItem) {
 		})
 	}
 
+	if (addon && hasEnvironmentLock(addon)) {
+		if (options.length > 0) options.push({ type: 'divider' })
+		options.push({
+			id: 'toggle-side-lock',
+			label: formatMessage(
+				addon.side_toggle_unlocked ? messages.lockEnvironment : messages.unlockEnvironment,
+			),
+			icon: addon.side_toggle_unlocked ? LockIcon : LockOpenIcon,
+			action: () => handleToggleSideLock(addon),
+		})
+	}
+
 	return options
 }
 
@@ -1205,10 +1365,9 @@ provideContentManager({
 	disableAddContentTooltip: permissionDeniedMessage.value,
 	contentTypeLabel: type,
 	toggleEnabled: handleToggleEnabled,
+	setEnabledFor: handleSetEnabledFor,
 	deleteItem: handleDeleteItem,
 	bulkDeleteItems: handleBulkDelete,
-	bulkEnableItems: handleBulkEnable,
-	bulkDisableItems: handleBulkDisable,
 	refresh: async () => {
 		await contentQuery.refetch()
 	},
@@ -1245,6 +1404,8 @@ provideContentManager({
 				: undefined,
 			external: item.external ?? !hasModrinthProject,
 			enabled: item.enabled,
+			enabledFor: item.enabledFor,
+			embeddedIcon: item.embeddedIcon,
 		}
 	},
 	filterPersistKey: `server:${serverId}:${worldId.value}`,
@@ -1274,13 +1435,13 @@ provideContentManager({
 					:source-name="managedContent?.card.manager.name"
 					:source-icon-url="managedContent?.card.manager.iconUrl"
 					:header="formatMessage(messages.modpackContent)"
-					enable-toggle
+					enable-enabled-for
 					show-environment-warnings
+					:get-overflow-options="getOverflowOptions"
 					:action-disabled="contentActionDisabled"
 					:action-disabled-tooltip="contentActionBusyMessage ?? undefined"
-					@update:enabled="handleModpackContentToggle"
-					@bulk:enable="handleModpackBulkToggle($event, true)"
-					@bulk:disable="handleModpackBulkToggle($event, false)"
+					@update:enabled="handleModpackToggleEnabled"
+					@update:enabled-for="handleModpackSetEnabledFor"
 					@hide="isModpackContentModalOpen = false"
 				/>
 				<ContentUpdaterModal
diff --git a/packages/ui/src/locales/cs-CZ/index.json b/packages/ui/src/locales/cs-CZ/index.json
index 83978dbb1c7..619ba326fa5 100644
--- a/packages/ui/src/locales/cs-CZ/index.json
+++ b/packages/ui/src/locales/cs-CZ/index.json
@@ -1820,12 +1820,6 @@
   "hosting.content.failed-to-bulk-delete": {
     "defaultMessage": "Obsah se nepodařilo smazat"
   },
-  "hosting.content.failed-to-bulk-disable": {
-    "defaultMessage": "Obsah se nepodařilo vypnout"
-  },
-  "hosting.content.failed-to-bulk-enable": {
-    "defaultMessage": "Obsah se nepodařilo zapnout"
-  },
   "hosting.content.failed-to-bulk-update": {
     "defaultMessage": "Obsah se nepodařilo nahrát"
   },
@@ -1841,9 +1835,6 @@
   "hosting.content.failed-to-remove": {
     "defaultMessage": "Obsah se nepodařilo odebrat"
   },
-  "hosting.content.failed-to-toggle": {
-    "defaultMessage": "Nepodařilo se přepnout {name}"
-  },
   "hosting.content.failed-to-unlink": {
     "defaultMessage": "Modpack se nepodařilo odpojit"
   },
diff --git a/packages/ui/src/locales/de-CH/index.json b/packages/ui/src/locales/de-CH/index.json
index 5c8f38a3f2e..d9dd3c3b85c 100644
--- a/packages/ui/src/locales/de-CH/index.json
+++ b/packages/ui/src/locales/de-CH/index.json
@@ -1961,12 +1961,6 @@
   "hosting.content.failed-to-bulk-delete": {
     "defaultMessage": "Entfernen von Inhalten fehlgeschlagen"
   },
-  "hosting.content.failed-to-bulk-disable": {
-    "defaultMessage": "Deaktivieren von Inhalten fehlgeschlagen"
-  },
-  "hosting.content.failed-to-bulk-enable": {
-    "defaultMessage": "Aktivieren von Inhalten fehltgeschlagen"
-  },
   "hosting.content.failed-to-bulk-update": {
     "defaultMessage": "Aktualisieren von Inhalten fehlgeschlagen"
   },
@@ -1982,9 +1976,6 @@
   "hosting.content.failed-to-remove": {
     "defaultMessage": "Entfernen von Inhalten fehlgeschlagen"
   },
-  "hosting.content.failed-to-toggle": {
-    "defaultMessage": "Umschalten von {name} fehlgeschlagen"
-  },
   "hosting.content.failed-to-unlink": {
     "defaultMessage": "Entkoppeln von Modpack fehlgeschlagen"
   },
diff --git a/packages/ui/src/locales/de-DE/index.json b/packages/ui/src/locales/de-DE/index.json
index 46a3f2c4366..2c4e4676018 100644
--- a/packages/ui/src/locales/de-DE/index.json
+++ b/packages/ui/src/locales/de-DE/index.json
@@ -1961,12 +1961,6 @@
   "hosting.content.failed-to-bulk-delete": {
     "defaultMessage": "Inhalte konnten nicht gelöscht werden"
   },
-  "hosting.content.failed-to-bulk-disable": {
-    "defaultMessage": "Inhalte konnten nicht deaktiviert werden"
-  },
-  "hosting.content.failed-to-bulk-enable": {
-    "defaultMessage": "Inhalte konnten nicht aktiviert werden"
-  },
   "hosting.content.failed-to-bulk-update": {
     "defaultMessage": "Inhalte konnten nicht aktualisiert werden"
   },
@@ -1982,9 +1976,6 @@
   "hosting.content.failed-to-remove": {
     "defaultMessage": "Entfernen von Inhalten fehlgeschlagen"
   },
-  "hosting.content.failed-to-toggle": {
-    "defaultMessage": "Umschalten von {name} fehlgeschlagen"
-  },
   "hosting.content.failed-to-unlink": {
     "defaultMessage": "Modpack konnte nicht getrennt werden"
   },
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index 37b196b3cb1..859757bc9f5 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -572,6 +572,30 @@
   "content.diff-modal.updated-count": {
     "defaultMessage": "{count} updated"
   },
+  "content.enabled-for.description": {
+    "defaultMessage": "Choose where this content is enabled. Turn both off to disable it."
+  },
+  "content.enabled-for.label": {
+    "defaultMessage": "Enabled for"
+  },
+  "content.enabled-for.locked": {
+    "defaultMessage": "These choices are locked. Select Unlock from the row menu to change them."
+  },
+  "content.enabled-for.not-supported-here": {
+    "defaultMessage": "This content isn't designed to be enabled here."
+  },
+  "content.enabled-for.player": {
+    "defaultMessage": "Player"
+  },
+  "content.enabled-for.please-wait": {
+    "defaultMessage": "Please wait"
+  },
+  "content.enabled-for.required-here": {
+    "defaultMessage": "This content needs to be enabled here to work correctly."
+  },
+  "content.enabled-for.server": {
+    "defaultMessage": "Server"
+  },
   "content.filter.disabled": {
     "defaultMessage": "Disabled"
   },
@@ -1964,14 +1988,17 @@
   "header.category.resolutions": {
     "defaultMessage": "Resolution"
   },
-  "hosting.content.failed-to-bulk-delete": {
-    "defaultMessage": "Failed to delete content"
+  "hosting.content.enabled-for.lock-environment": {
+    "defaultMessage": "Lock"
+  },
+  "hosting.content.enabled-for.unknown-environment": {
+    "defaultMessage": "We couldn't tell where this content should be enabled. Review the Server and Player choices."
   },
-  "hosting.content.failed-to-bulk-disable": {
-    "defaultMessage": "Failed to disable content"
+  "hosting.content.enabled-for.unlock-environment": {
+    "defaultMessage": "Unlock"
   },
-  "hosting.content.failed-to-bulk-enable": {
-    "defaultMessage": "Failed to enable content"
+  "hosting.content.failed-to-bulk-delete": {
+    "defaultMessage": "Failed to delete content"
   },
   "hosting.content.failed-to-bulk-update": {
     "defaultMessage": "Failed to update content"
@@ -1988,8 +2015,14 @@
   "hosting.content.failed-to-remove": {
     "defaultMessage": "Failed to remove content"
   },
+  "hosting.content.failed-to-set-enabled-for": {
+    "defaultMessage": "Failed to change where {name} is enabled"
+  },
+  "hosting.content.failed-to-set-side-lock": {
+    "defaultMessage": "Failed to change the environment lock for {name}"
+  },
   "hosting.content.failed-to-toggle": {
-    "defaultMessage": "Failed to toggle {name}"
+    "defaultMessage": "Failed to enable or disable {name}"
   },
   "hosting.content.failed-to-unlink": {
     "defaultMessage": "Failed to unlink modpack"
@@ -2544,7 +2577,7 @@
     "defaultMessage": "This is a client-side mod and may cause issues when starting your server"
   },
   "label.client-retained-warning": {
-    "defaultMessage": "This is a client-side mod that was installed as a dependency and may cause issues when starting your server"
+    "defaultMessage": "This client-side mod was also installed on the server because another mod depends on it"
   },
   "label.collections": {
     "defaultMessage": "Collections"
diff --git a/packages/ui/src/locales/es-419/index.json b/packages/ui/src/locales/es-419/index.json
index d6fea6c8480..b8acab93a7f 100644
--- a/packages/ui/src/locales/es-419/index.json
+++ b/packages/ui/src/locales/es-419/index.json
@@ -1961,12 +1961,6 @@
   "hosting.content.failed-to-bulk-delete": {
     "defaultMessage": "Error al eliminar el contenido"
   },
-  "hosting.content.failed-to-bulk-disable": {
-    "defaultMessage": "Error al desactivar el contenido"
-  },
-  "hosting.content.failed-to-bulk-enable": {
-    "defaultMessage": "Error al activar el contenido"
-  },
   "hosting.content.failed-to-bulk-update": {
     "defaultMessage": "Error al actualizar el contenido"
   },
@@ -1982,9 +1976,6 @@
   "hosting.content.failed-to-remove": {
     "defaultMessage": "Error al eliminar el contenido"
   },
-  "hosting.content.failed-to-toggle": {
-    "defaultMessage": "Error al activar/desactivar {name}"
-  },
   "hosting.content.failed-to-unlink": {
     "defaultMessage": "Error al desvincular el modpack"
   },
diff --git a/packages/ui/src/locales/es-ES/index.json b/packages/ui/src/locales/es-ES/index.json
index cdf25a310c5..ee18b5e52c8 100644
--- a/packages/ui/src/locales/es-ES/index.json
+++ b/packages/ui/src/locales/es-ES/index.json
@@ -1961,12 +1961,6 @@
   "hosting.content.failed-to-bulk-delete": {
     "defaultMessage": "No se ha podido eliminar el contenido"
   },
-  "hosting.content.failed-to-bulk-disable": {
-    "defaultMessage": "No se ha podido desactivar el contenido"
-  },
-  "hosting.content.failed-to-bulk-enable": {
-    "defaultMessage": "No se ha podido habilitar el contenido"
-  },
   "hosting.content.failed-to-bulk-update": {
     "defaultMessage": "No se ha podido actualizar el contenido"
   },
@@ -1982,9 +1976,6 @@
   "hosting.content.failed-to-remove": {
     "defaultMessage": "No se ha podido eliminar el contenido"
   },
-  "hosting.content.failed-to-toggle": {
-    "defaultMessage": "No se ha podido alternar {name}"
-  },
   "hosting.content.failed-to-unlink": {
     "defaultMessage": "No se ha podido desvincular el modpack"
   },
diff --git a/packages/ui/src/locales/fil-PH/index.json b/packages/ui/src/locales/fil-PH/index.json
index d87864a80b7..a88218a27c7 100644
--- a/packages/ui/src/locales/fil-PH/index.json
+++ b/packages/ui/src/locales/fil-PH/index.json
@@ -542,12 +542,6 @@
   "header.category.resolutions": {
     "defaultMessage": "Resolusyon"
   },
-  "hosting.content.failed-to-bulk-disable": {
-    "defaultMessage": "Bigong mapatay ang tumutunggaling kontento"
-  },
-  "hosting.content.failed-to-bulk-enable": {
-    "defaultMessage": "Bigong mabukas ang kontento"
-  },
   "hosting.content.failed-to-unlink": {
     "defaultMessage": "Bigong ma-unlink ang modpack"
   },
@@ -2736,4 +2730,3 @@
     "defaultMessage": "Uri"
   }
 }
-
diff --git a/packages/ui/src/locales/fr-FR/index.json b/packages/ui/src/locales/fr-FR/index.json
index b8033c7b0c1..8a8c430df57 100644
--- a/packages/ui/src/locales/fr-FR/index.json
+++ b/packages/ui/src/locales/fr-FR/index.json
@@ -1955,12 +1955,6 @@
   "hosting.content.failed-to-bulk-delete": {
     "defaultMessage": "Impossible de supprimer le contenu"
   },
-  "hosting.content.failed-to-bulk-disable": {
-    "defaultMessage": "Impossible de désactiver le contenu"
-  },
-  "hosting.content.failed-to-bulk-enable": {
-    "defaultMessage": "Impossible d'activer le contenu"
-  },
   "hosting.content.failed-to-bulk-update": {
     "defaultMessage": "Impossible de mettre à jour le contenu"
   },
@@ -1976,9 +1970,6 @@
   "hosting.content.failed-to-remove": {
     "defaultMessage": "Impossible de retirer le contenu"
   },
-  "hosting.content.failed-to-toggle": {
-    "defaultMessage": "Impossible de basculer {name}"
-  },
   "hosting.content.failed-to-unlink": {
     "defaultMessage": "Impossible de dissocier le modpack"
   },
diff --git a/packages/ui/src/locales/hu-HU/index.json b/packages/ui/src/locales/hu-HU/index.json
index bb2d8329d4d..6cb06b48895 100644
--- a/packages/ui/src/locales/hu-HU/index.json
+++ b/packages/ui/src/locales/hu-HU/index.json
@@ -1940,12 +1940,6 @@
   "hosting.content.failed-to-bulk-delete": {
     "defaultMessage": "Nem sikerült törölni a tartalmat"
   },
-  "hosting.content.failed-to-bulk-disable": {
-    "defaultMessage": "A tartalom letiltása nem sikerült"
-  },
-  "hosting.content.failed-to-bulk-enable": {
-    "defaultMessage": "A tartalom engedélyezése nem sikerült"
-  },
   "hosting.content.failed-to-bulk-update": {
     "defaultMessage": "A tartalom frissítése sikertelen"
   },
diff --git a/packages/ui/src/locales/it-IT/index.json b/packages/ui/src/locales/it-IT/index.json
index 190a1731c13..c055f5e17d7 100644
--- a/packages/ui/src/locales/it-IT/index.json
+++ b/packages/ui/src/locales/it-IT/index.json
@@ -1907,12 +1907,6 @@
   "hosting.content.failed-to-bulk-delete": {
     "defaultMessage": "Errore nella rimozione dei contenuti"
   },
-  "hosting.content.failed-to-bulk-disable": {
-    "defaultMessage": "Errore nella disabilitazione dei contenuti"
-  },
-  "hosting.content.failed-to-bulk-enable": {
-    "defaultMessage": "Errore nell'abilitazione dei contenuti"
-  },
   "hosting.content.failed-to-bulk-update": {
     "defaultMessage": "Errore nell'aggiornamento dei contenuti"
   },
@@ -1928,9 +1922,6 @@
   "hosting.content.failed-to-remove": {
     "defaultMessage": "Errore nella rimozione dei contenuti"
   },
-  "hosting.content.failed-to-toggle": {
-    "defaultMessage": "Impossibile cambiare lo stato di \"{name}\""
-  },
   "hosting.content.failed-to-unlink": {
     "defaultMessage": "Errore nello scollegamento del pacchetto"
   },
diff --git a/packages/ui/src/locales/ja-JP/index.json b/packages/ui/src/locales/ja-JP/index.json
index cd1d3bc8ef7..83c1fe49c30 100644
--- a/packages/ui/src/locales/ja-JP/index.json
+++ b/packages/ui/src/locales/ja-JP/index.json
@@ -1931,12 +1931,6 @@
   "hosting.content.failed-to-bulk-delete": {
     "defaultMessage": "コンテンツの削除に失敗しました"
   },
-  "hosting.content.failed-to-bulk-disable": {
-    "defaultMessage": "コンテンツの無効化に失敗しました"
-  },
-  "hosting.content.failed-to-bulk-enable": {
-    "defaultMessage": "コンテンツの有効化に失敗しました"
-  },
   "hosting.content.failed-to-bulk-update": {
     "defaultMessage": "コンテンツの更新に失敗しました"
   },
@@ -1952,9 +1946,6 @@
   "hosting.content.failed-to-remove": {
     "defaultMessage": "コンテンツの削除に失敗しました"
   },
-  "hosting.content.failed-to-toggle": {
-    "defaultMessage": "{name}の切り替えに失敗しました"
-  },
   "hosting.content.failed-to-unlink": {
     "defaultMessage": "Modパックのリンク解除に失敗しました"
   },
diff --git a/packages/ui/src/locales/ko-KR/index.json b/packages/ui/src/locales/ko-KR/index.json
index d76674fb1e9..63e7e23962a 100644
--- a/packages/ui/src/locales/ko-KR/index.json
+++ b/packages/ui/src/locales/ko-KR/index.json
@@ -1889,12 +1889,6 @@
   "hosting.content.failed-to-bulk-delete": {
     "defaultMessage": "콘텐츠 삭제 실패"
   },
-  "hosting.content.failed-to-bulk-disable": {
-    "defaultMessage": "콘텐츠 비활성화 실패"
-  },
-  "hosting.content.failed-to-bulk-enable": {
-    "defaultMessage": "콘텐츠 활성화 실패"
-  },
   "hosting.content.failed-to-bulk-update": {
     "defaultMessage": "콘텐츠 업데이트 실패"
   },
@@ -1910,9 +1904,6 @@
   "hosting.content.failed-to-remove": {
     "defaultMessage": "콘텐츠 제거 실패"
   },
-  "hosting.content.failed-to-toggle": {
-    "defaultMessage": "{name} 전환 실패"
-  },
   "hosting.content.failed-to-unlink": {
     "defaultMessage": "모드팩 연결 해제 실패"
   },
diff --git a/packages/ui/src/locales/ms-MY/index.json b/packages/ui/src/locales/ms-MY/index.json
index beb2abc64b6..0d025c5816b 100644
--- a/packages/ui/src/locales/ms-MY/index.json
+++ b/packages/ui/src/locales/ms-MY/index.json
@@ -1328,12 +1328,6 @@
   "hosting.content.failed-to-bulk-delete": {
     "defaultMessage": "Gagal memadamkan kandungan"
   },
-  "hosting.content.failed-to-bulk-disable": {
-    "defaultMessage": "Gagal menyahdayakan kandungan"
-  },
-  "hosting.content.failed-to-bulk-enable": {
-    "defaultMessage": "Gagal mendayakan kandungan"
-  },
   "hosting.content.failed-to-bulk-update": {
     "defaultMessage": "Gagal mengemas kini kandungan"
   },
@@ -1349,9 +1343,6 @@
   "hosting.content.failed-to-remove": {
     "defaultMessage": "Gagal mengalih keluar kandungan"
   },
-  "hosting.content.failed-to-toggle": {
-    "defaultMessage": "Gagal menogol {name}"
-  },
   "hosting.content.failed-to-unlink": {
     "defaultMessage": "Gagal menyahpaut pek mod"
   },
@@ -4953,4 +4944,3 @@
     "defaultMessage": "Jenis"
   }
 }
-
diff --git a/packages/ui/src/locales/nl-NL/index.json b/packages/ui/src/locales/nl-NL/index.json
index 68e6becf7ed..d78a3804b40 100644
--- a/packages/ui/src/locales/nl-NL/index.json
+++ b/packages/ui/src/locales/nl-NL/index.json
@@ -1958,12 +1958,6 @@
   "hosting.content.failed-to-bulk-delete": {
     "defaultMessage": "Het verwijderen van inhoud is mislukt"
   },
-  "hosting.content.failed-to-bulk-disable": {
-    "defaultMessage": "Het uitschakelen van inhoud is mislukt"
-  },
-  "hosting.content.failed-to-bulk-enable": {
-    "defaultMessage": "Het inschakelen van inhoud is mislukt"
-  },
   "hosting.content.failed-to-bulk-update": {
     "defaultMessage": "Het bijwerken van inhoud is mislukt"
   },
@@ -1979,9 +1973,6 @@
   "hosting.content.failed-to-remove": {
     "defaultMessage": "Het verwijderen van inhoud is mislukt"
   },
-  "hosting.content.failed-to-toggle": {
-    "defaultMessage": "Het omschakelen van {name} is mislukt"
-  },
   "hosting.content.failed-to-unlink": {
     "defaultMessage": "Het ontkoppelen van het modpack is mislukt"
   },
diff --git a/packages/ui/src/locales/pl-PL/index.json b/packages/ui/src/locales/pl-PL/index.json
index c065a8ec6a0..01500c2f059 100644
--- a/packages/ui/src/locales/pl-PL/index.json
+++ b/packages/ui/src/locales/pl-PL/index.json
@@ -1952,12 +1952,6 @@
   "hosting.content.failed-to-bulk-delete": {
     "defaultMessage": "Nie udało się usunąć zawartości"
   },
-  "hosting.content.failed-to-bulk-disable": {
-    "defaultMessage": "Nie udało się wyłączyć zawartości"
-  },
-  "hosting.content.failed-to-bulk-enable": {
-    "defaultMessage": "Nie udało się włączyć zawartości"
-  },
   "hosting.content.failed-to-bulk-update": {
     "defaultMessage": "Nie udało się zaktualizować zawartości"
   },
@@ -1973,9 +1967,6 @@
   "hosting.content.failed-to-remove": {
     "defaultMessage": "Nie udało się usunąć zawartości"
   },
-  "hosting.content.failed-to-toggle": {
-    "defaultMessage": "Nie udało się przełączyć {name}"
-  },
   "hosting.content.failed-to-unlink": {
     "defaultMessage": "Nie udało się rozłączyć od paczki modów"
   },
diff --git a/packages/ui/src/locales/pt-BR/index.json b/packages/ui/src/locales/pt-BR/index.json
index 66309098f8b..e2eab828c12 100644
--- a/packages/ui/src/locales/pt-BR/index.json
+++ b/packages/ui/src/locales/pt-BR/index.json
@@ -1961,12 +1961,6 @@
   "hosting.content.failed-to-bulk-delete": {
     "defaultMessage": "Falha ao excluir o conteúdo"
   },
-  "hosting.content.failed-to-bulk-disable": {
-    "defaultMessage": "Falha ao desativar o conteúdo"
-  },
-  "hosting.content.failed-to-bulk-enable": {
-    "defaultMessage": "Falha ao ativar o conteúdo"
-  },
   "hosting.content.failed-to-bulk-update": {
     "defaultMessage": "Falha ao atualizar o conteúdo"
   },
@@ -1982,9 +1976,6 @@
   "hosting.content.failed-to-remove": {
     "defaultMessage": "Falha ao remover o conteúdo"
   },
-  "hosting.content.failed-to-toggle": {
-    "defaultMessage": "Falha ao alterar {name}"
-  },
   "hosting.content.failed-to-unlink": {
     "defaultMessage": "Falha ao desvincular o pacote de mods"
   },
@@ -6984,4 +6975,3 @@
     "defaultMessage": "Tipo"
   }
 }
-
diff --git a/packages/ui/src/locales/ro-RO/index.json b/packages/ui/src/locales/ro-RO/index.json
index cf85c9e4d82..5f27c685331 100644
--- a/packages/ui/src/locales/ro-RO/index.json
+++ b/packages/ui/src/locales/ro-RO/index.json
@@ -854,12 +854,6 @@
   "hosting.content.failed-to-bulk-delete": {
     "defaultMessage": "Nu s-a putut șterge conținutul"
   },
-  "hosting.content.failed-to-bulk-disable": {
-    "defaultMessage": "Nu s-a putut dezactiva conținutul"
-  },
-  "hosting.content.failed-to-bulk-enable": {
-    "defaultMessage": "Nu s-a putut activa conținutul"
-  },
   "hosting.content.failed-to-bulk-update": {
     "defaultMessage": "Nu s-a putut actualiza conținutul"
   },
@@ -875,9 +869,6 @@
   "hosting.content.failed-to-remove": {
     "defaultMessage": "Nu s-a putut înlătura conținutul"
   },
-  "hosting.content.failed-to-toggle": {
-    "defaultMessage": "Nu s-a putut comuta {name}"
-  },
   "hosting.content.failed-to-unlink": {
     "defaultMessage": "Nu s-a putut nelinka pachetul de moduri"
   },
diff --git a/packages/ui/src/locales/ru-RU/index.json b/packages/ui/src/locales/ru-RU/index.json
index d42b3fb8126..883fc49da39 100644
--- a/packages/ui/src/locales/ru-RU/index.json
+++ b/packages/ui/src/locales/ru-RU/index.json
@@ -1883,12 +1883,6 @@
   "hosting.content.failed-to-bulk-delete": {
     "defaultMessage": "Не удалось удалить контент"
   },
-  "hosting.content.failed-to-bulk-disable": {
-    "defaultMessage": "Не удалось отключить контент"
-  },
-  "hosting.content.failed-to-bulk-enable": {
-    "defaultMessage": "Не удалось включить контент"
-  },
   "hosting.content.failed-to-bulk-update": {
     "defaultMessage": "Не удалось обновить контент"
   },
@@ -1904,9 +1898,6 @@
   "hosting.content.failed-to-remove": {
     "defaultMessage": "Не удалось удалить контент"
   },
-  "hosting.content.failed-to-toggle": {
-    "defaultMessage": "Не удалось переключить {name}"
-  },
   "hosting.content.failed-to-unlink": {
     "defaultMessage": "Не удалось отвязать сборку"
   },
diff --git a/packages/ui/src/locales/sr-CS/index.json b/packages/ui/src/locales/sr-CS/index.json
index d788b86f93d..0cc087ff522 100644
--- a/packages/ui/src/locales/sr-CS/index.json
+++ b/packages/ui/src/locales/sr-CS/index.json
@@ -1961,12 +1961,6 @@
   "hosting.content.failed-to-bulk-delete": {
     "defaultMessage": "Greška sa brisanjem sadržaja"
   },
-  "hosting.content.failed-to-bulk-disable": {
-    "defaultMessage": "Nije uspelo onemogućavanje sadržaja"
-  },
-  "hosting.content.failed-to-bulk-enable": {
-    "defaultMessage": "Nije uspelo omogućavanje sadržaja"
-  },
   "hosting.content.failed-to-bulk-update": {
     "defaultMessage": "Ažuriranje sadržaja nije uspelo"
   },
@@ -1982,9 +1976,6 @@
   "hosting.content.failed-to-remove": {
     "defaultMessage": "Greška sa brisanjem sadržaja"
   },
-  "hosting.content.failed-to-toggle": {
-    "defaultMessage": "Greška sa preklapanjem {name}"
-  },
   "hosting.content.failed-to-unlink": {
     "defaultMessage": "Greška sa uklanjanjem veze od modpacka"
   },
@@ -6243,4 +6234,3 @@
     "defaultMessage": "Tip"
   }
 }
-
diff --git a/packages/ui/src/locales/sv-SE/index.json b/packages/ui/src/locales/sv-SE/index.json
index a699f85beb4..2a50a7459db 100644
--- a/packages/ui/src/locales/sv-SE/index.json
+++ b/packages/ui/src/locales/sv-SE/index.json
@@ -1871,12 +1871,6 @@
   "hosting.content.failed-to-bulk-delete": {
     "defaultMessage": "Kunde inte radera innehåll"
   },
-  "hosting.content.failed-to-bulk-disable": {
-    "defaultMessage": "Kunde inte inaktivera innehåll"
-  },
-  "hosting.content.failed-to-bulk-enable": {
-    "defaultMessage": "Kunde inte aktivera innehåll"
-  },
   "hosting.content.failed-to-bulk-update": {
     "defaultMessage": "Kunde inte uppdatera innehåll"
   },
@@ -1892,9 +1886,6 @@
   "hosting.content.failed-to-remove": {
     "defaultMessage": "Kunde inte radera innehållet"
   },
-  "hosting.content.failed-to-toggle": {
-    "defaultMessage": "Kunde inte växla {name}"
-  },
   "hosting.content.failed-to-unlink": {
     "defaultMessage": "Kunde inte avlänka modpaketet"
   },
diff --git a/packages/ui/src/locales/th-TH/index.json b/packages/ui/src/locales/th-TH/index.json
index a8a0caebcc8..b37b3a7d280 100644
--- a/packages/ui/src/locales/th-TH/index.json
+++ b/packages/ui/src/locales/th-TH/index.json
@@ -242,9 +242,6 @@
   "hosting.content.failed-to-bulk-delete": {
     "defaultMessage": "ไม่สามารถลบเนื้อหาได้"
   },
-  "hosting.content.failed-to-bulk-disable": {
-    "defaultMessage": "ไม่สามารถปิดใช้งานเนื้อหาได้"
-  },
   "icon-select.edit": {
     "defaultMessage": "แก้ไขไอคอน"
   },
@@ -645,4 +642,3 @@
     "defaultMessage": "ภาษา"
   }
 }
-
diff --git a/packages/ui/src/locales/tr-TR/index.json b/packages/ui/src/locales/tr-TR/index.json
index fcc96d403c3..423c875b765 100644
--- a/packages/ui/src/locales/tr-TR/index.json
+++ b/packages/ui/src/locales/tr-TR/index.json
@@ -1958,12 +1958,6 @@
   "hosting.content.failed-to-bulk-delete": {
     "defaultMessage": "İçeriği silmek başarısız"
   },
-  "hosting.content.failed-to-bulk-disable": {
-    "defaultMessage": "İçeriği kapatmak başarısız"
-  },
-  "hosting.content.failed-to-bulk-enable": {
-    "defaultMessage": "İçeriği açmak başarısız"
-  },
   "hosting.content.failed-to-bulk-update": {
     "defaultMessage": "İçeriği güncelleme başarısız"
   },
@@ -1979,9 +1973,6 @@
   "hosting.content.failed-to-remove": {
     "defaultMessage": "İçerik çıkarılamadı"
   },
-  "hosting.content.failed-to-toggle": {
-    "defaultMessage": "{name} durumu değiştirilemedi"
-  },
   "hosting.content.failed-to-unlink": {
     "defaultMessage": "Mod paketinin bağlantısı koparılamadı"
   },
diff --git a/packages/ui/src/locales/uk-UA/index.json b/packages/ui/src/locales/uk-UA/index.json
index 08c170d83bf..400f029d252 100644
--- a/packages/ui/src/locales/uk-UA/index.json
+++ b/packages/ui/src/locales/uk-UA/index.json
@@ -1913,12 +1913,6 @@
   "hosting.content.failed-to-bulk-delete": {
     "defaultMessage": "Не вдалося видалити вміст"
   },
-  "hosting.content.failed-to-bulk-disable": {
-    "defaultMessage": "Не вдалося вимкнути вміст"
-  },
-  "hosting.content.failed-to-bulk-enable": {
-    "defaultMessage": "Не вдалося ввімкнути вміст"
-  },
   "hosting.content.failed-to-bulk-update": {
     "defaultMessage": "Не вдалося оновити вміст"
   },
@@ -1934,9 +1928,6 @@
   "hosting.content.failed-to-remove": {
     "defaultMessage": "Не вдалося видалити вміст"
   },
-  "hosting.content.failed-to-toggle": {
-    "defaultMessage": "Не вдалося перемкнути {name}"
-  },
   "hosting.content.failed-to-unlink": {
     "defaultMessage": "Не вдалося відв’язати збірку"
   },
diff --git a/packages/ui/src/locales/vi-VN/index.json b/packages/ui/src/locales/vi-VN/index.json
index ef1e256ff4c..02de58843c7 100644
--- a/packages/ui/src/locales/vi-VN/index.json
+++ b/packages/ui/src/locales/vi-VN/index.json
@@ -1346,12 +1346,6 @@
   "hosting.content.failed-to-bulk-delete": {
     "defaultMessage": "Không thể xóa nội dung"
   },
-  "hosting.content.failed-to-bulk-disable": {
-    "defaultMessage": "Không thể tắt nội dung"
-  },
-  "hosting.content.failed-to-bulk-enable": {
-    "defaultMessage": "Không thể bật nội dung"
-  },
   "hosting.content.failed-to-bulk-update": {
     "defaultMessage": "Không thể cập nhật nội dung"
   },
@@ -1367,9 +1361,6 @@
   "hosting.content.failed-to-remove": {
     "defaultMessage": "Không thể xóa nội dung"
   },
-  "hosting.content.failed-to-toggle": {
-    "defaultMessage": "Lỗi khi chuyển đổi {name}"
-  },
   "hosting.content.failed-to-unlink": {
     "defaultMessage": "Hủy liên kết modpack thất bại"
   },
@@ -4968,4 +4959,3 @@
     "defaultMessage": "Đội ngũ Modrinth"
   }
 }
-
diff --git a/packages/ui/src/locales/zh-CN/index.json b/packages/ui/src/locales/zh-CN/index.json
index af94cc42100..eb7d6d880d7 100644
--- a/packages/ui/src/locales/zh-CN/index.json
+++ b/packages/ui/src/locales/zh-CN/index.json
@@ -1961,12 +1961,6 @@
   "hosting.content.failed-to-bulk-delete": {
     "defaultMessage": "删除内容失败"
   },
-  "hosting.content.failed-to-bulk-disable": {
-    "defaultMessage": "禁用内容失败"
-  },
-  "hosting.content.failed-to-bulk-enable": {
-    "defaultMessage": "启用内容失败"
-  },
   "hosting.content.failed-to-bulk-update": {
     "defaultMessage": "更新内容失败"
   },
@@ -1982,9 +1976,6 @@
   "hosting.content.failed-to-remove": {
     "defaultMessage": "移除内容失败"
   },
-  "hosting.content.failed-to-toggle": {
-    "defaultMessage": "无法切换 {name}"
-  },
   "hosting.content.failed-to-unlink": {
     "defaultMessage": "链接整合包失败"
   },
diff --git a/packages/ui/src/locales/zh-TW/index.json b/packages/ui/src/locales/zh-TW/index.json
index 9dad0a811b2..817e94b0b65 100644
--- a/packages/ui/src/locales/zh-TW/index.json
+++ b/packages/ui/src/locales/zh-TW/index.json
@@ -1961,12 +1961,6 @@
   "hosting.content.failed-to-bulk-delete": {
     "defaultMessage": "無法刪除內容"
   },
-  "hosting.content.failed-to-bulk-disable": {
-    "defaultMessage": "無法停用內容"
-  },
-  "hosting.content.failed-to-bulk-enable": {
-    "defaultMessage": "無法啟用內容"
-  },
   "hosting.content.failed-to-bulk-update": {
     "defaultMessage": "無法更新內容"
   },
@@ -1982,9 +1976,6 @@
   "hosting.content.failed-to-remove": {
     "defaultMessage": "無法移除內容"
   },
-  "hosting.content.failed-to-toggle": {
-    "defaultMessage": "無法切換「{name}」"
-  },
   "hosting.content.failed-to-unlink": {
     "defaultMessage": "無法取消連結模組包"
   },
diff --git a/packages/ui/src/stories/base/Toggle.stories.ts b/packages/ui/src/stories/base/Toggle.stories.ts
index 9ab7590adf5..bd5ecf58c99 100644
--- a/packages/ui/src/stories/base/Toggle.stories.ts
+++ b/packages/ui/src/stories/base/Toggle.stories.ts
@@ -8,7 +8,8 @@ const meta = {
 	parameters: {
 		docs: {
 			description: {
-				component: 'Toggle uses touch manipulation so double tapping on mobile does not zoom.',
+				component:
+					'Toggle uses touch manipulation so double tapping on mobile does not zoom. Set indeterminate to show a line between its on and off states.',
 			},
 		},
 	},
@@ -30,6 +31,13 @@ export const Checked: Story = {
 	},
 }
 
+export const Indeterminate: Story = {
+	args: {
+		modelValue: false,
+		indeterminate: true,
+	},
+}
+
 export const Disabled: Story = {
 	args: {
 		modelValue: false,
@@ -63,6 +71,9 @@ export const AllStates: Story = {
 				<div style="display: flex; align-items: center; gap: 0.5rem;">
 					<Toggle :model-value="true" /> On
 				</div>
+				<div style="display: flex; align-items: center; gap: 0.5rem;">
+					<Toggle :model-value="false" :indeterminate="true" /> Indeterminate
+				</div>
 				<div style="display: flex; align-items: center; gap: 0.5rem;">
 					<Toggle :model-value="false" :disabled="true" /> Disabled
 				</div>
@@ -73,6 +84,9 @@ export const AllStates: Story = {
 				<div style="display: flex; align-items: center; gap: 0.5rem;">
 					<Toggle :model-value="true" :small="true" /> On
 				</div>
+				<div style="display: flex; align-items: center; gap: 0.5rem;">
+					<Toggle :model-value="false" :indeterminate="true" :small="true" /> Indeterminate
+				</div>
 				<div style="display: flex; align-items: center; gap: 0.5rem;">
 					<Toggle :model-value="false" :small="true" :disabled="true" /> Disabled
 				</div>
diff --git a/packages/ui/src/utils/common-messages.ts b/packages/ui/src/utils/common-messages.ts
index d64cbc42b59..0ad84cd44fb 100644
--- a/packages/ui/src/utils/common-messages.ts
+++ b/packages/ui/src/utils/common-messages.ts
@@ -495,7 +495,7 @@ export const commonMessages = defineMessages({
 	clientRetainedWarning: {
 		id: 'label.client-retained-warning',
 		defaultMessage:
-			'This is a client-side mod that was installed as a dependency and may cause issues when starting your server',
+			'This client-side mod was also installed on the server because another mod depends on it',
 	},
 	clientDependsWarning: {
 		id: 'label.client-depends-warning',

From 2a5aca3693019fff3b56a56da1ee5a893ca1bacb Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Fri, 4 Sep 2026 15:34:47 +0100
Subject: [PATCH 04/13] fix: remove feature flag

---
 .../src/composables/use-app-settings.ts        |  1 -
 .../src/pages/hosting/manage/Index.vue         |  1 -
 .../src/pages/hosting/manage/Play.vue          | 11 -----------
 apps/frontend/src/composables/featureFlags.ts  |  1 -
 .../frontend/src/pages/hosting/manage/[id].vue |  1 -
 .../src/pages/hosting/manage/[id]/play.vue     |  6 ------
 .../layouts/wrapped/hosting/manage/root.vue    | 18 ++++++------------
 7 files changed, 6 insertions(+), 33 deletions(-)

diff --git a/apps/app-frontend/src/composables/use-app-settings.ts b/apps/app-frontend/src/composables/use-app-settings.ts
index 9170b991820..0d58903fa12 100644
--- a/apps/app-frontend/src/composables/use-app-settings.ts
+++ b/apps/app-frontend/src/composables/use-app-settings.ts
@@ -23,7 +23,6 @@ export const DEFAULT_FEATURE_FLAGS = {
 	friends_offline_collapsed: true,
 	friends_pending_collapsed: true,
 	dismissed_photosensitivity_filter_warning: false,
-	ServerPlayFrontend: false,
 	localhost_sign_in: false,
 }
 
diff --git a/apps/app-frontend/src/pages/hosting/manage/Index.vue b/apps/app-frontend/src/pages/hosting/manage/Index.vue
index 2a805918683..e182d1386fc 100644
--- a/apps/app-frontend/src/pages/hosting/manage/Index.vue
+++ b/apps/app-frontend/src/pages/hosting/manage/Index.vue
@@ -9,7 +9,6 @@
 			:reload-page="() => router.go(0)"
 			:resolve-viewer="resolveViewer"
 			:show-copy-id-action="appSettings.devMode"
-			:show-play-tab="appSettings.getFeatureFlag('ServerPlayFrontend')"
 			:auth-user="authUser"
 			:navigate-to-billing="() => openUrl('https://modrinth.com/settings/billing')"
 			:navigate-to-servers="() => router.push('/hosting/manage')"
diff --git a/apps/app-frontend/src/pages/hosting/manage/Play.vue b/apps/app-frontend/src/pages/hosting/manage/Play.vue
index 3728c9ceb07..170357365d3 100644
--- a/apps/app-frontend/src/pages/hosting/manage/Play.vue
+++ b/apps/app-frontend/src/pages/hosting/manage/Play.vue
@@ -1,16 +1,5 @@
 <script setup lang="ts">
 import { ServersManagePlayPage } from '@modrinth/ui'
-import { useRoute, useRouter } from 'vue-router'
-
-import { useAppSettings } from '@/composables/use-app-settings.ts'
-
-const route = useRoute()
-const router = useRouter()
-const appSettings = useAppSettings()
-
-if (!appSettings.getFeatureFlag('ServerPlayFrontend')) {
-	await router.replace(`/hosting/manage/${String(route.params.id)}`)
-}
 </script>
 
 <template>
diff --git a/apps/frontend/src/composables/featureFlags.ts b/apps/frontend/src/composables/featureFlags.ts
index e7300aec278..1165ef04cca 100644
--- a/apps/frontend/src/composables/featureFlags.ts
+++ b/apps/frontend/src/composables/featureFlags.ts
@@ -59,7 +59,6 @@ export const DEFAULT_FEATURE_FLAGS = validateValues({
 	alwaysShowVersionDevInfo: false,
 	advancedFiltersCollapsed: true,
 	dismissedPhotosensitivityFilterWarning: false,
-	ServerPlayFrontend: false,
 } as const)
 
 export type FeatureFlag = keyof typeof DEFAULT_FEATURE_FLAGS
diff --git a/apps/frontend/src/pages/hosting/manage/[id].vue b/apps/frontend/src/pages/hosting/manage/[id].vue
index 9e218386abf..5f6d5245f42 100644
--- a/apps/frontend/src/pages/hosting/manage/[id].vue
+++ b/apps/frontend/src/pages/hosting/manage/[id].vue
@@ -5,7 +5,6 @@
 		:resolve-viewer="resolveViewer"
 		:show-copy-id-action="flags.developerMode"
 		:show-advanced-debug-info="flags.advancedDebugInfo"
-		:show-play-tab="flags.ServerPlayFrontend"
 		:stripe-publishable-key="config.public.stripePublishableKey as string"
 		:site-url="config.public.siteUrl as string"
 		:products="products"
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/play.vue b/apps/frontend/src/pages/hosting/manage/[id]/play.vue
index b4866d98f76..0c23d78a03e 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/play.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/play.vue
@@ -2,12 +2,6 @@
 import { injectModrinthServerContext, ServersManagePlayPage } from '@modrinth/ui'
 
 const { server } = injectModrinthServerContext()
-const flags = useFeatureFlags()
-const route = useNativeRoute()
-
-if (!flags.value.ServerPlayFrontend) {
-	await navigateTo(`/hosting/manage/${String(route.params.id)}`, { replace: true })
-}
 
 useHead({
 	title: computed(() => `Play - ${server.value?.name ?? 'Server'} - Modrinth`),
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
index 84bc3b13ba1..fdf9a2b5f42 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
@@ -395,7 +395,6 @@ const props = withDefaults(
 		showCopyIdAction?: boolean
 		showAdvancedDebugInfo?: boolean
 		showUptime?: boolean
-		showPlayTab?: boolean
 		additionalTabs?: Tab[]
 		stripePublishableKey?: string
 		siteUrl?: string
@@ -420,7 +419,6 @@ const props = withDefaults(
 		showCopyIdAction: false,
 		showAdvancedDebugInfo: false,
 		showUptime: true,
-		showPlayTab: false,
 		additionalTabs: () => [],
 		stripePublishableKey: undefined,
 		siteUrl: undefined,
@@ -778,16 +776,12 @@ watch(serverData, (data) => {
 })
 
 const navLinks = computed<Tab[]>(() => [
-	...(props.showPlayTab
-		? [
-				{
-					label: 'Play',
-					href: `/hosting/manage/${props.serverId}/play`,
-					icon: PlayIcon,
-					subpages: [],
-				},
-			]
-		: []),
+	{
+		label: 'Play',
+		href: `/hosting/manage/${props.serverId}/play`,
+		icon: PlayIcon,
+		subpages: [],
+	},
 	{
 		label: 'Overview',
 		href: `/hosting/manage/${props.serverId}`,

From 3c61c0edf6e9e606de65c28ba436d9d500df2db5 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Fri, 4 Sep 2026 16:03:22 +0100
Subject: [PATCH 05/13] fix: build

---
 .../wrapped/hosting/manage/[id]/play/ServerPlayersTable.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayersTable.vue b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayersTable.vue
index 56730841e2d..1426bdb6113 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayersTable.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayersTable.vue
@@ -1,12 +1,12 @@
 <template>
 	<div class="flex flex-col gap-4">
 		<div class="flex flex-col gap-2 md:flex-row">
-			<StyledInput
+			<Input
 				v-model="search"
 				:icon="SearchIcon"
 				:placeholder="`Search ${rows.length} users...`"
 				wrapper-class="min-w-0 flex-1"
-				input-class="!h-10"
+				size="medium"
 				clearable
 			/>
 			<Combobox
@@ -107,7 +107,7 @@ import { computed, ref } from 'vue'
 import Avatar from '#ui/components/base/Avatar.vue'
 import { IconButton } from '#ui/components/base/buttons'
 import Combobox, { type ComboboxOption } from '#ui/components/base/Combobox.vue'
-import StyledInput from '#ui/components/base/StyledInput.vue'
+import Input from '#ui/components/base/inputs/Input.vue'
 import Table, { type SortDirection, type TableColumn } from '#ui/components/base/Table.vue'
 import { useFormatDateTime, useRelativeTime } from '#ui/composables'
 

From db4659fae8c2ba0e0984324bd948c2c60bd863c3 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Fri, 4 Sep 2026 16:55:24 +0100
Subject: [PATCH 06/13] dev: notes

---
 SERVER_PLAY_NOTES.md | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 SERVER_PLAY_NOTES.md

diff --git a/SERVER_PLAY_NOTES.md b/SERVER_PLAY_NOTES.md
new file mode 100644
index 00000000000..80a156db144
--- /dev/null
+++ b/SERVER_PLAY_NOTES.md
@@ -0,0 +1,10 @@
+Flow:
+1. Shared instance wont exist until they:
+   - Click "Play server"
+     - Need special handling in-app
+   - Click "Invite players"
+   - Click "Download mrpack"
+   - disable btns until share response is done, then continue
+2. When content changes, watch shared_instance_needs_update: boolean on WorldsFull, show "Push update" admonition like app instances
+   1. Push update flow like usual, show content changes diff]
+   2. tbd

From 4e0ea14c877cd5448ecb38446010cd0c175b3932 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Thu, 10 Sep 2026 14:10:28 +0100
Subject: [PATCH 07/13] feat: impl endpoints into panel

---
 SERVER_PLAY_NOTES.md                          |  10 -
 apps/app-frontend/src/App.vue                 |  13 +
 .../ui/hosting/HostingPlayHandler.vue         | 185 ++++++++
 .../generated/app-events/CommandPayload.ts    |   2 +-
 .../generated/app-events/postcard/index.d.ts  |   2 +-
 .../generated/app-events/postcard/index.js    |   8 +
 .../src/pages/hosting/manage/Play.vue         |  14 +-
 apps/app-frontend/src/routes.js               |   2 +-
 apps/app/tauri.conf.json                      |   2 +-
 .../src/pages/hosting/manage/[id]/play.vue    |  23 +-
 .../src/modules/archon/content/v1.ts          |  12 +
 .../api-client/src/modules/archon/types.ts    |  34 ++
 .../modules/shared-instances/instances/v1.ts  |  18 +
 .../modules/shared-instances/invites/v1.ts    |  18 +
 .../src/modules/shared-instances/types.ts     |   7 +
 packages/api-client/src/platform/generic.ts   |   5 +-
 packages/api-client/src/platform/nuxt.ts      |   1 +
 packages/api-client/src/platform/tauri.ts     |   2 +-
 packages/api-client/src/types/request.ts      |   3 +
 packages/app-lib/src/api/handler.rs           |  15 +
 packages/app-lib/src/event/mod.rs             |   4 +
 .../ui/src/composables/server-panel-sync.ts   |  11 +
 .../shared/server-settings/pages/general.vue  |   8 +
 .../manage/[id]/play/ServerPlayCard.vue       |  60 +--
 .../manage/[id]/play/ServerPlayersTable.vue   |   4 +-
 .../wrapped/hosting/manage/[id]/play/play.vue | 415 +++++++++---------
 .../hosting/manage/[id]/play/share-diff.ts    |  35 ++
 .../manage/[id]/play/use-server-players.ts    | 116 +++++
 packages/ui/src/providers/index.ts            |   1 +
 packages/ui/src/providers/server-play.ts      |  20 +
 30 files changed, 774 insertions(+), 276 deletions(-)
 delete mode 100644 SERVER_PLAY_NOTES.md
 create mode 100644 apps/app-frontend/src/components/ui/hosting/HostingPlayHandler.vue
 create mode 100644 packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/share-diff.ts
 create mode 100644 packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/use-server-players.ts
 create mode 100644 packages/ui/src/providers/server-play.ts

diff --git a/SERVER_PLAY_NOTES.md b/SERVER_PLAY_NOTES.md
deleted file mode 100644
index 80a156db144..00000000000
--- a/SERVER_PLAY_NOTES.md
+++ /dev/null
@@ -1,10 +0,0 @@
-Flow:
-1. Shared instance wont exist until they:
-   - Click "Play server"
-     - Need special handling in-app
-   - Click "Invite players"
-   - Click "Download mrpack"
-   - disable btns until share response is done, then continue
-2. When content changes, watch shared_instance_needs_update: boolean on WorldsFull, show "Push update" admonition like app instances
-   1. Push update flow like usual, show content changes diff]
-   2. tbd
diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index 5faea7c84a0..2add6f3bddc 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -96,6 +96,9 @@ import OnboardingChecklist from '@/components/ui/onboarding-checklist/index.vue'
 import PrideFundraiserBanner from '@/components/ui/PrideFundraiserBanner.vue'
 import PromotionWrapper from '@/components/ui/PromotionWrapper.vue'
 import QuickInstanceSwitcher from '@/components/ui/QuickInstanceSwitcher.vue'
+import HostingPlayHandler from '@/components/ui/hosting/HostingPlayHandler.vue'
+import { provideServerPlay } from '@modrinth/ui'
+
 import SharedInstanceInviteHandler from '@/components/ui/shared-instances/shared-instance-invite-handler/index.vue'
 import SplashScreen from '@/components/ui/SplashScreen.vue'
 import SurveyPopup from '@/components/ui/SurveyPopup.vue'
@@ -1133,6 +1136,13 @@ const contentInstallModpackAlreadyInstalledModal = ref()
 const addServerToInstanceModal = ref()
 const incompatibilityWarningModal = ref()
 const installToPlayModal = ref()
+const hostingPlayHandler = ref()
+provideServerPlay({
+	async play(target) {
+		if (!hostingPlayHandler.value) throw new Error('Server play handler is not ready.')
+		await hostingPlayHandler.value.play(target)
+	},
+})
 const sharedInstanceInviteHandler = ref()
 const updateToPlayModal = ref()
 
@@ -1767,6 +1777,8 @@ async function handleCommand(e) {
 		} else {
 			await run(e.id).catch(handleError)
 		}
+	} else if (e.event === 'PlayHostingServer') {
+		await hostingPlayHandler.value?.play({ serverId: e.server_id, worldId: e.world_id })
 	} else if (e.event === 'InstallSharedInstanceInvite') {
 		await sharedInstanceInviteHandler.value?.installFromInviteId(e.invite_id)
 	} else if (e.event === 'InstallServer') {
@@ -2616,6 +2628,7 @@ provideAppUpdateDownloadProgress(appUpdateDownload)
 		@create-anyway="handleContentInstallModpackDuplicateCreateAnyway"
 		@go-to-instance="handleContentInstallModpackDuplicateGoToInstance"
 	/>
+	<HostingPlayHandler ref="hostingPlayHandler" />
 	<SharedInstanceInviteHandler ref="sharedInstanceInviteHandler" />
 	<InstallToPlayModal ref="installToPlayModal" :show-external-warnings="false" />
 	<UpdateToPlayModal ref="updateToPlayModal" :show-external-warnings="false" />
diff --git a/apps/app-frontend/src/components/ui/hosting/HostingPlayHandler.vue b/apps/app-frontend/src/components/ui/hosting/HostingPlayHandler.vue
new file mode 100644
index 00000000000..b952435e5e0
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/hosting/HostingPlayHandler.vue
@@ -0,0 +1,185 @@
+<template>
+	<ModrinthAccountRequiredModal ref="accountModal" :request-auth="requestAuth" />
+	<SharedInstanceInstallModal ref="installModal" />
+	<ContentDiffModal
+		ref="updateModal"
+		:header="formatMessage(messages.update)"
+		:admonition-header="formatMessage(messages.update)"
+		:description="formatMessage(messages.updateDescription)"
+		:diffs="updateDiffs"
+		:confirm-label="formatMessage(messages.update)"
+		:confirm-icon="DownloadIcon"
+		show-external-warnings
+		@confirm="confirmUpdate"
+	/>
+</template>
+
+<script setup lang="ts">
+import { DownloadIcon } from '@modrinth/assets'
+import { ContentDiffModal, type ContentDiffItem, getHostingServerAddress, defineMessages, injectAuth, injectModrinthClient, injectNotificationManager, type ServerPlayTarget, useVIntl } from '@modrinth/ui'
+import { useMutation, useQueryClient } from '@tanstack/vue-query'
+import { ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+
+import ModrinthAccountRequiredModal from '@/components/ui/modal/ModrinthAccountRequiredModal.vue'
+import SharedInstanceInstallModal from '@/components/ui/shared-instances/shared-instance-install-modal/index.vue'
+import { toError } from '@/helpers/errors'
+import { install_job_list, install_get_shared_instance_preview, install_get_shared_instance_update_preview, install_shared_instance, install_update_shared_instance, installJobInstanceId, wait_for_install_job } from '@/helpers/install'
+import { get, list } from '@/helpers/instance'
+import { get as getCredentials, type ModrinthAuthFlow } from '@/helpers/mr_auth'
+import { ensureManagedServerWorldExists, start_join_server } from '@/helpers/worlds'
+import { injectAppEvents } from '@/providers/app-events'
+
+type LaunchTarget = ServerPlayTarget & { sharedInstanceId: string; name: string; address: string; userId: string; icon: string | null }
+const auth = injectAuth()
+const client = injectModrinthClient()
+const appEvents = injectAppEvents()
+const queryClient = useQueryClient()
+const router = useRouter()
+const { handleError } = injectNotificationManager()
+const { formatMessage } = useVIntl()
+const accountModal = ref<InstanceType<typeof ModrinthAccountRequiredModal>>()
+const installModal = ref<InstanceType<typeof SharedInstanceInstallModal>>()
+const updateModal = ref<InstanceType<typeof ContentDiffModal>>()
+const updateDiffs = ref<ContentDiffItem[]>([])
+const pendingUpdate = ref<{ target: LaunchTarget; instanceId: string }>()
+
+async function assertAccount(target: LaunchTarget) {
+	if ((await getCredentials())?.user_id !== target.userId) throw new Error(formatMessage(messages.accountChanged))
+}
+async function findInstance(target: LaunchTarget) {
+	const instance = (await list()).find((instance) => instance.shared_instance?.id === target.sharedInstanceId && instance.shared_instance.linked_user_id === target.userId)
+	if (instance && instance.install_stage !== 'installed') {
+		const job = (await install_job_list(false)).find((job) => installJobInstanceId(job) === instance.id)
+		if (job) {
+			await wait_for_install_job(appEvents, job.job_id)
+			await assertAccount(target)
+			return await get(instance.id) ?? undefined
+		}
+	}
+	return instance
+}
+async function join(target: LaunchTarget, instanceId: string) {
+	await assertAccount(target)
+	const server = await client.archon.servers_v1.get(target.serverId)
+	if (!server.worlds.some((world) => world.id === target.worldId && world.is_active && world.content?.shared_instance_id === target.sharedInstanceId)) {
+		throw new Error(formatMessage(messages.worldChanged))
+	}
+	await assertAccount(target)
+	const instance = await get(instanceId)
+	if (!instance || instance.quarantined || instance.install_stage !== 'installed') throw new Error(formatMessage(messages.notReady))
+	const legacy = await client.archon.servers_v0.get(target.serverId)
+	const address = getHostingServerAddress(legacy.net, server.subdomain)
+	if (!address) throw new Error(formatMessage(messages.noAddress))
+	await assertAccount(target)
+	await ensureManagedServerWorldExists(instanceId, target.name, address)
+	await router.push(`/instance/${encodeURIComponent(instanceId)}`)
+	await start_join_server(instanceId, address)
+}
+const launchMutation = useMutation({
+	mutationFn: async ({ target, instanceId }: { target: LaunchTarget; instanceId?: string }) => {
+		await assertAccount(target)
+		const existing = await findInstance(target)
+		if (instanceId && existing?.id !== instanceId) throw new Error(formatMessage(messages.notReady))
+		if (existing) {
+			if (existing.quarantined || existing.install_stage !== 'installed') throw new Error(formatMessage(messages.notReady))
+			const update = await install_get_shared_instance_update_preview(existing.id)
+			await assertAccount(target)
+			if (update?.updateAvailable) {
+				if (!instanceId) {
+					showUpdate(target, existing.id, update)
+					return
+				}
+				const job = await install_update_shared_instance(existing.id)
+				await wait_for_install_job(appEvents, job.job_id)
+			}
+			await join(target, existing.id)
+		} else {
+			await assertAccount(target)
+			const job = await install_shared_instance(target.sharedInstanceId, target.name, null, target.name, target.icon, target.icon)
+			const installedId = installJobInstanceId(job)
+			if (!installedId) throw new Error(formatMessage(messages.notReady))
+			await queryClient.invalidateQueries({ queryKey: ['instances'] })
+			await wait_for_install_job(appEvents, job.job_id)
+			await join(target, installedId)
+		}
+	},
+	onError: (error) => handleError(toError(error)),
+	onSettled: () => queryClient.invalidateQueries({ queryKey: ['instances'] }),
+})
+function showUpdate(target: LaunchTarget, instanceId: string, preview: NonNullable<Awaited<ReturnType<typeof install_get_shared_instance_update_preview>>>) {
+	pendingUpdate.value = { target, instanceId }
+	updateDiffs.value = preview.diffs.map((diff) => ({
+		type: diff.type, projectName: diff.projectName ?? undefined, fileName: diff.fileName ? encodeURIComponent(diff.fileName) : undefined,
+		currentVersionName: diff.currentVersionName ?? undefined, newVersionName: diff.newVersionName ?? undefined,
+		fileCount: diff.configFileCount ?? undefined, disabled: diff.disabled,
+		external: diff.type === 'added' && !diff.projectId && !!diff.fileName,
+	}))
+	updateModal.value?.show()
+}
+function confirmUpdate() {
+	if (!pendingUpdate.value || launchMutation.isPending.value) return
+	launchMutation.mutate(pendingUpdate.value)
+	pendingUpdate.value = undefined
+}
+const prepareMutation = useMutation({
+	mutationFn: async ({ serverId, worldId }: ServerPlayTarget) => {
+		if (auth.isReady && !auth.isReady.value) {
+			await new Promise<void>((resolve) => {
+				const stop = watch(auth.isReady!, (ready) => { if (ready) { stop(); resolve() } })
+			})
+		}
+		if (!auth.session_token.value && !(await accountModal.value?.show())) return
+		const credentials = await getCredentials()
+		if (!credentials) return
+		const [server, legacy] = await Promise.all([client.archon.servers_v1.get(serverId), client.archon.servers_v0.get(serverId)])
+		const world = server.worlds.find((world) => world.id === worldId && world.is_active)
+		const sharedInstanceId = world?.content?.shared_instance_id
+		if (!sharedInstanceId) throw new Error(formatMessage(messages.worldChanged))
+		const remote = await client.sharedinstances.instances_v1.get(sharedInstanceId)
+		const address = getHostingServerAddress(legacy.net, server.subdomain)
+		if (!address) throw new Error(formatMessage(messages.noAddress))
+		const target: LaunchTarget = { serverId, worldId, sharedInstanceId, name: remote.name, address, userId: credentials.user_id, icon: remote.icon }
+		await assertAccount(target)
+		const existing = await findInstance(target)
+		if (existing) {
+			if (existing.quarantined || existing.install_stage !== 'installed') throw new Error(formatMessage(messages.notReady))
+			const preview = await install_get_shared_instance_update_preview(existing.id)
+			await assertAccount(target)
+			if (preview?.updateAvailable) showUpdate(target, existing.id, preview)
+			else await join(target, existing.id)
+		} else {
+			const preview = await install_get_shared_instance_preview(sharedInstanceId, target.name)
+			await assertAccount(target)
+			if (remote.icon) preview.iconUrl = remote.icon
+			installModal.value?.show(preview, async () => {
+				if (launchMutation.isPending.value) return
+				await launchMutation.mutateAsync({ target }).catch(() => {})
+			})
+		}
+	},
+	onError: (error) => handleError(toError(error)),
+})
+async function play(target: ServerPlayTarget) {
+	if (prepareMutation.isPending.value || launchMutation.isPending.value) return
+	await prepareMutation.mutateAsync(target).catch(() => {})
+}
+async function requestAuth(flow: ModrinthAuthFlow) {
+	await auth.requestSignIn('', flow, { showModal: false })
+	return !!(await getCredentials())
+}
+watch(() => auth.user.value?.id, () => {
+	installModal.value?.hide()
+	updateModal.value?.hide()
+	pendingUpdate.value = undefined
+})
+const messages = defineMessages({
+	update: { id: 'hosting.play.update-to-play', defaultMessage: 'Update to play' },
+	updateDescription: { id: 'hosting.play.update-description', defaultMessage: 'Update this instance to the server’s latest shared content before joining.' },
+	accountChanged: { id: 'hosting.play.account-changed', defaultMessage: 'Your Modrinth account changed. Press Play server again to continue.' },
+	worldChanged: { id: 'hosting.play.world-changed', defaultMessage: 'This world is no longer active or has not been shared. Open the server panel and press Play server again.' },
+	notReady: { id: 'hosting.play.not-ready', defaultMessage: 'This instance is not available to launch. Check its installation status in your library.' },
+	noAddress: { id: 'hosting.play.no-address', defaultMessage: 'This server does not have a connection address yet.' },
+})
+defineExpose({ play })
+</script>
diff --git a/apps/app-frontend/src/generated/app-events/CommandPayload.ts b/apps/app-frontend/src/generated/app-events/CommandPayload.ts
index 1183c97876c..d844877140a 100644
--- a/apps/app-frontend/src/generated/app-events/CommandPayload.ts
+++ b/apps/app-frontend/src/generated/app-events/CommandPayload.ts
@@ -1,3 +1,3 @@
 // This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
 
-export type CommandPayload = { "event": "InstallMod", id: string, } | { "event": "InstallVersion", id: string, } | { "event": "InstallModpack", id: string, } | { "event": "InstallServer", id: string, } | { "event": "LaunchInstance", id: string, server: string | null, singleplayer_world: string | null, } | { "event": "InstallSharedInstanceInvite", invite_id: string, } | { "event": "RunMRPack", path: string, };
+export type CommandPayload = { "event": "InstallMod", id: string, } | { "event": "InstallVersion", id: string, } | { "event": "InstallModpack", id: string, } | { "event": "InstallServer", id: string, } | { "event": "LaunchInstance", id: string, server: string | null, singleplayer_world: string | null, } | { "event": "InstallSharedInstanceInvite", invite_id: string, } | { "event": "RunMRPack", path: string, } | { "event": "PlayHostingServer", server_id: string, world_id: string, };
diff --git a/apps/app-frontend/src/generated/app-events/postcard/index.d.ts b/apps/app-frontend/src/generated/app-events/postcard/index.d.ts
index e763358993f..63f113e920c 100644
--- a/apps/app-frontend/src/generated/app-events/postcard/index.d.ts
+++ b/apps/app-frontend/src/generated/app-events/postcard/index.d.ts
@@ -40,7 +40,7 @@ export type LoadingPayload = { event: LoadingBarType, loader_uuid: string, fract
 export type WarningPayload = { message: string }
 export type InstanceBulkUpdateProgressPayload = { instanceId: string, stage: InstanceBulkUpdateProgressStage, current: u64, total: u64 }
 export type InstanceBulkUpdateProgressStage = { tag: "resolving_versions" } | { tag: "downloading" } | { tag: "finishing" }
-export type CommandPayload = { tag: "InstallMod", value: { id: string } } | { tag: "InstallVersion", value: { id: string } } | { tag: "InstallModpack", value: { id: string } } | { tag: "InstallServer", value: { id: string } } | { tag: "LaunchInstance", value: { id: string, server: string | undefined, singleplayer_world: string | undefined } } | { tag: "InstallSharedInstanceInvite", value: { invite_id: string } } | { tag: "RunMRPack", value: { path: string } }
+export type CommandPayload = { tag: "InstallMod", value: { id: string } } | { tag: "InstallVersion", value: { id: string } } | { tag: "InstallModpack", value: { id: string } } | { tag: "InstallServer", value: { id: string } } | { tag: "LaunchInstance", value: { id: string, server: string | undefined, singleplayer_world: string | undefined } } | { tag: "InstallSharedInstanceInvite", value: { invite_id: string } } | { tag: "RunMRPack", value: { path: string } } | { tag: "PlayHostingServer", value: { server_id: string, world_id: string } }
 export type ProcessPayload = { instance_id: string, uuid: string, event: ProcessPayloadType, message: string }
 export type ProcessPayloadType = { tag: "launched" } | { tag: "finished" }
 export type InstancePayload = { instance_id: string, event: InstancePayloadType }
diff --git a/apps/app-frontend/src/generated/app-events/postcard/index.js b/apps/app-frontend/src/generated/app-events/postcard/index.js
index 2407d7da9b5..d43f4a09165 100644
--- a/apps/app-frontend/src/generated/app-events/postcard/index.js
+++ b/apps/app-frontend/src/generated/app-events/postcard/index.js
@@ -300,6 +300,14 @@ function deserialize_COMMAND_PAYLOAD(d) {
                 path: d.deserialize_string()
             }
         };
+    case 7:
+        return {
+            tag: "PlayHostingServer",
+            value: {
+                server_id: d.deserialize_string(),
+                world_id: d.deserialize_string()
+            }
+        };
     default:
         throw "variant not implemented"
     }
diff --git a/apps/app-frontend/src/pages/hosting/manage/Play.vue b/apps/app-frontend/src/pages/hosting/manage/Play.vue
index 170357365d3..e9147c188e3 100644
--- a/apps/app-frontend/src/pages/hosting/manage/Play.vue
+++ b/apps/app-frontend/src/pages/hosting/manage/Play.vue
@@ -1,7 +1,17 @@
 <script setup lang="ts">
-import { ServersManagePlayPage } from '@modrinth/ui'
+import { injectServerPlay, ServersManagePlayPage } from '@modrinth/ui'
+import { save } from '@tauri-apps/plugin-dialog'
+import { writeFile } from '@tauri-apps/plugin-fs'
+
+import { config } from '@/config'
+
+const { play } = injectServerPlay()
+async function downloadMrpack(blob: Blob, filename: string) {
+	const path = await save({ defaultPath: filename, filters: [{ name: 'Modrinth modpack', extensions: ['mrpack'] }] })
+	if (path) await writeFile(path, new Uint8Array(await blob.arrayBuffer()))
+}
 </script>
 
 <template>
-	<ServersManagePlayPage />
+	<ServersManagePlayPage :on-play-server="play" :on-download-mrpack="downloadMrpack" :site-url="config.siteUrl" />
 </template>
diff --git a/apps/app-frontend/src/routes.js b/apps/app-frontend/src/routes.js
index 4ec2ce94fe0..12d5bd1c422 100644
--- a/apps/app-frontend/src/routes.js
+++ b/apps/app-frontend/src/routes.js
@@ -23,7 +23,7 @@ export default new createRouter({
 				{
 					path: 'play',
 					name: 'ServerManagePlay',
-					component: Hosting.Play,
+					component: () => import('@/pages/hosting/manage/Play.vue'),
 				},
 				{
 					path: '',
diff --git a/apps/app/tauri.conf.json b/apps/app/tauri.conf.json
index db4ef3624bf..9552e0c77c1 100644
--- a/apps/app/tauri.conf.json
+++ b/apps/app/tauri.conf.json
@@ -102,7 +102,7 @@
 			"capabilities": ["ads", "core", "plugins"],
 			"csp": {
 				"default-src": "'self' customprotocol: asset:",
-				"connect-src": "ipc: http://ipc.localhost https://modrinth.com https://*.modrinth.com https://*.nodes.modrinth.com https://*.posthog.com https://posthog.modrinth.com https://*.sentry.io https://api.mclo.gs http://textures.minecraft.net https://textures.minecraft.net https://js.stripe.com https://*.stripe.com wss://*.stripe.com https://*.intercom.io wss://*.intercom.io https://*.intercomcdn.com https://www.intercom-reporting.com https://app.getsentry.com wss://*.nodes.modrinth.com https://*.taila228c5.ts.net https://*.taila228c5.ts.net wss://*.taila228c5.ts.net https://fill.papermc.io https://api.purpurmc.org 'self' data: blob:",
+				"connect-src": "ipc: http://ipc.localhost https://modrinth.com https://*.modrinth.com https://*.nodes.modrinth.com https://*.posthog.com https://posthog.modrinth.com https://*.sentry.io https://api.mclo.gs http://textures.minecraft.net https://textures.minecraft.net https://js.stripe.com https://*.stripe.com wss://*.stripe.com https://*.intercom.io wss://*.intercom.io https://*.intercomcdn.com https://www.intercom-reporting.com https://app.getsentry.com wss://*.nodes.modrinth.com https://kyros-test2.tail029726.ts.net wss://kyros-test2.tail029726.ts.net https://fill.papermc.io https://api.purpurmc.org 'self' data: blob:",
 				"font-src": ["https://cdn.modrinth.com/fonts/", "https://js.intercomcdn.com"],
 				"img-src": "https: 'unsafe-inline' 'self' asset: http://asset.localhost http://textures.minecraft.net blob: data:",
 				"style-src": "'unsafe-inline' 'self'",
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/play.vue b/apps/frontend/src/pages/hosting/manage/[id]/play.vue
index 0c23d78a03e..630bc537b84 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/play.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/play.vue
@@ -1,13 +1,26 @@
 <script setup lang="ts">
-import { injectModrinthServerContext, ServersManagePlayPage } from '@modrinth/ui'
+import { injectModrinthServerContext, type ServerPlayTarget, ServersManagePlayPage } from '@modrinth/ui'
 
 const { server } = injectModrinthServerContext()
+const config = useRuntimeConfig()
+useHead({ title: computed(() => `Play - ${server.value?.name ?? 'Server'} - Modrinth`) })
 
-useHead({
-	title: computed(() => `Play - ${server.value?.name ?? 'Server'} - Modrinth`),
-})
+function playServer({ serverId, worldId }: ServerPlayTarget) {
+	window.location.assign(`modrinth://hosting/${encodeURIComponent(serverId)}/${encodeURIComponent(worldId)}`)
+}
+
+async function downloadMrpack(blob: Blob, filename: string) {
+	const url = URL.createObjectURL(blob)
+	const anchor = document.createElement('a')
+	anchor.href = url
+	anchor.download = filename
+	document.body.appendChild(anchor)
+	anchor.click()
+	anchor.remove()
+	setTimeout(() => URL.revokeObjectURL(url), 60_000)
+}
 </script>
 
 <template>
-	<ServersManagePlayPage />
+	<ServersManagePlayPage :on-play-server="playServer" :on-download-mrpack="downloadMrpack" :site-url="config.public.siteUrl" />
 </template>
diff --git a/packages/api-client/src/modules/archon/content/v1.ts b/packages/api-client/src/modules/archon/content/v1.ts
index 71aedc9bd1f..1720d758b78 100644
--- a/packages/api-client/src/modules/archon/content/v1.ts
+++ b/packages/api-client/src/modules/archon/content/v1.ts
@@ -6,6 +6,18 @@ export class ArchonContentV1Module extends AbstractModule {
 		return 'archon_content_v1'
 	}
 
+	public async share(serverId: string, worldId: string): Promise<Archon.Content.v1.ShareWorldContentResponse> {
+		return this.client.request(`/servers/${encodeURIComponent(serverId)}/worlds/${encodeURIComponent(worldId)}/content/share`, {
+			api: 'archon', version: 1, method: 'POST', timeout: 600_000, retry: false,
+		})
+	}
+
+	public async getShareDiff(serverId: string, worldId: string): Promise<Archon.Content.v1.SharedInstancePublishDiff> {
+		return this.client.request(`/servers/${encodeURIComponent(serverId)}/worlds/${encodeURIComponent(worldId)}/content/share/diff`, {
+			api: 'archon', version: 1, method: 'GET',
+		})
+	}
+
 	/** GET /v1/:server_id/worlds/:world_id/addons */
 	public async getAddons(
 		serverId: string,
diff --git a/packages/api-client/src/modules/archon/types.ts b/packages/api-client/src/modules/archon/types.ts
index 3c47e3bc844..22c68532943 100644
--- a/packages/api-client/src/modules/archon/types.ts
+++ b/packages/api-client/src/modules/archon/types.ts
@@ -284,6 +284,30 @@ export namespace Archon {
 
 	export namespace Content {
 		export namespace v1 {
+			export type ShareWorldContentResponse = {
+				shared_instance_id: string
+				version: number | null
+			}
+
+			export type SharedContentChange<T> =
+				| { kind: 'added'; after: T }
+				| { kind: 'removed'; before: T }
+				| { kind: 'updated'; before: T; after: T }
+
+			export type SharedContentDiffEntry =
+				| { type: 'project'; project_id: string; change: SharedContentChange<string> }
+				| { type: 'external_file'; file_type: string; file_name: string; kind: 'added' | 'removed' | 'updated' }
+				| { type: 'modpack' | 'game_version'; change: SharedContentChange<string> }
+				| { type: 'loader'; change: SharedContentChange<{ name: string; version: string | null }> }
+
+			export type SharedInstancePublishDiff = {
+				shared_instance_id: string
+				latest_version: number
+				local_updated_at: string
+				has_changes: boolean
+				diffs: SharedContentDiffEntry[]
+			}
+
 			export type AddonKind = 'mod' | 'plugin' | 'datapack' | 'shader' | 'resourcepack'
 
 			export type ContentOwnerType = 'user' | 'organization'
@@ -835,6 +859,8 @@ export namespace Archon {
 			}
 
 			export type WorldContentInfo = {
+				shared_instance_id: string | null
+				shared_instance_needs_update: boolean
 				modloader: string
 				modloader_version: string
 				game_version: string
@@ -1139,6 +1165,13 @@ export namespace Archon {
 				content: WorldContentItem[]
 			}
 
+			export type WorldSharedInstanceUpdateEvent = {
+				type: 'world.shared_instance.update'
+				world_id: string
+				shared_instance_id: string
+				needs_update: boolean
+			}
+
 			export type SyncEvent =
 				| ProtocolResetEvent
 				| ProtocolInvalidEvent
@@ -1158,6 +1191,7 @@ export namespace Archon {
 				| WorldContentAddonPatchEvent
 				| WorldContentBaseUpdateEvent
 				| WorldContentUpdateEvent
+				| WorldSharedInstanceUpdateEvent
 		}
 	}
 
diff --git a/packages/api-client/src/modules/shared-instances/instances/v1.ts b/packages/api-client/src/modules/shared-instances/instances/v1.ts
index 7b958104639..727568413c0 100644
--- a/packages/api-client/src/modules/shared-instances/instances/v1.ts
+++ b/packages/api-client/src/modules/shared-instances/instances/v1.ts
@@ -63,4 +63,22 @@ export class SharedInstancesInstancesV1Module extends AbstractModule {
 			},
 		)
 	}
+
+	public async inviteUsers(instanceId: string, userIds: string[]): Promise<{ failed: string[] }> {
+		return this.client.request(`/instances/${encodeURIComponent(instanceId)}/users`, {
+			api: 'sharedinstances', version: 1, method: 'POST', body: { user_ids: userIds }, retry: false,
+		})
+	}
+
+	public async removeUsers(instanceId: string, userIds: string[]): Promise<void> {
+		return this.client.request(`/instances/${encodeURIComponent(instanceId)}/users`, {
+			api: 'sharedinstances', version: 1, method: 'DELETE', body: { user_ids: userIds },
+		})
+	}
+
+	public async downloadMrpack(instanceId: string, version: number): Promise<Blob> {
+		return this.client.request(`/instances/${encodeURIComponent(instanceId)}/versions/${version}/mrpack`, {
+			api: 'sharedinstances', version: 1, method: 'GET', responseType: 'blob', timeout: 600_000,
+		})
+	}
 }
diff --git a/packages/api-client/src/modules/shared-instances/invites/v1.ts b/packages/api-client/src/modules/shared-instances/invites/v1.ts
index 72536cd0a0e..8ff2f2f92ac 100644
--- a/packages/api-client/src/modules/shared-instances/invites/v1.ts
+++ b/packages/api-client/src/modules/shared-instances/invites/v1.ts
@@ -18,4 +18,22 @@ export class SharedInstancesInvitesV1Module extends AbstractModule {
 			},
 		)
 	}
+
+	public async list(instanceId: string): Promise<SharedInstances.Invites.v1.InviteLink[]> {
+		return this.client.request(`/instances/${encodeURIComponent(instanceId)}/invites`, {
+			api: 'sharedinstances', version: 1, method: 'GET',
+		})
+	}
+
+	public async create(instanceId: string, options: { max_age?: number; max_uses: number }): Promise<{ id: string }> {
+		return this.client.request(`/instances/${encodeURIComponent(instanceId)}/invites`, {
+			api: 'sharedinstances', version: 1, method: 'POST', body: options, retry: false,
+		})
+	}
+
+	public async delete(instanceId: string, inviteId: string): Promise<void> {
+		return this.client.request(`/instances/${encodeURIComponent(instanceId)}/invites/${encodeURIComponent(inviteId)}`, {
+			api: 'sharedinstances', version: 1, method: 'DELETE',
+		})
+	}
 }
diff --git a/packages/api-client/src/modules/shared-instances/types.ts b/packages/api-client/src/modules/shared-instances/types.ts
index 4ad1e3afbf7..c41d30a55e9 100644
--- a/packages/api-client/src/modules/shared-instances/types.ts
+++ b/packages/api-client/src/modules/shared-instances/types.ts
@@ -23,6 +23,13 @@ export namespace SharedInstances {
 				joined_at: string | null
 			}
 
+			export type InviteLink = {
+				id: string
+				expiration: string
+				max_uses: number
+				uses: number
+			}
+
 			export type Invite = {
 				instance_id: string
 				instance_name: string
diff --git a/packages/api-client/src/platform/generic.ts b/packages/api-client/src/platform/generic.ts
index 7ec63b68249..bc2f1972286 100644
--- a/packages/api-client/src/platform/generic.ts
+++ b/packages/api-client/src/platform/generic.ts
@@ -46,8 +46,9 @@ export class GenericModrinthClient extends XHRUploadClient {
 
 	protected async executeRequest<T>(url: string, options: RequestOptions): Promise<T> {
 		try {
-			const response = await $fetch<T>(url, {
+			const response = await $fetch<T, 'json' | 'blob'>(url, {
 				method: options.method ?? 'GET',
+				responseType: options.responseType,
 				headers: options.headers,
 				body: options.body as BodyInit,
 				params: options.params as Record<string, string>,
@@ -55,7 +56,7 @@ export class GenericModrinthClient extends XHRUploadClient {
 				signal: options.signal,
 			})
 
-			return response
+			return response as T
 		} catch (error) {
 			// ofetch throws FetchError for HTTP errors
 			throw this.normalizeError(error)
diff --git a/packages/api-client/src/platform/nuxt.ts b/packages/api-client/src/platform/nuxt.ts
index a5308535ba3..b09f5077fca 100644
--- a/packages/api-client/src/platform/nuxt.ts
+++ b/packages/api-client/src/platform/nuxt.ts
@@ -160,6 +160,7 @@ export class NuxtModrinthClient extends XHRUploadClient {
 			// @ts-expect-error - $fetch is provided by Nuxt
 			const response = await $fetch<T>(url, {
 				method: options.method ?? 'GET',
+				responseType: options.responseType,
 				headers: options.headers,
 				body: options.body,
 				params: options.params,
diff --git a/packages/api-client/src/platform/tauri.ts b/packages/api-client/src/platform/tauri.ts
index ac82b53edba..78fd17787c2 100644
--- a/packages/api-client/src/platform/tauri.ts
+++ b/packages/api-client/src/platform/tauri.ts
@@ -92,7 +92,7 @@ export class TauriModrinthClient extends XHRUploadClient {
 
 			// Handle binary downloads (e.g. kyros fs files) before JSON parsing.
 			const contentType = response.headers.get('content-type')?.toLowerCase() ?? ''
-			if (fullUrl.includes('/fs/download')) {
+			if (options.responseType === 'blob' || fullUrl.includes('/fs/download')) {
 				return (await response.blob()) as T
 			}
 			if (
diff --git a/packages/api-client/src/types/request.ts b/packages/api-client/src/types/request.ts
index d1a57d8845a..ca7b9836530 100644
--- a/packages/api-client/src/types/request.ts
+++ b/packages/api-client/src/types/request.ts
@@ -29,6 +29,9 @@ export type RequestOptions = {
 	 */
 	method?: HttpMethod
 
+	/** Explicit response decoding for binary downloads. */
+	responseType?: 'blob'
+
 	/**
 	 * Request headers
 	 */
diff --git a/packages/app-lib/src/api/handler.rs b/packages/app-lib/src/api/handler.rs
index 1f16218dc8b..f53f465c719 100644
--- a/packages/app-lib/src/api/handler.rs
+++ b/packages/app-lib/src/api/handler.rs
@@ -30,6 +30,21 @@ pub async fn handle_url(sublink: &str) -> crate::Result<CommandPayload> {
         Some(("server", id)) => {
             CommandPayload::InstallServer { id: id.to_string() }
         }
+		Some(("hosting", path)) => {
+			let (server_id, world_id) = path.split_once('/').ok_or_else(|| {
+				crate::ErrorKind::InputError("Missing hosting world ID".to_string())
+			})?;
+			let server_id = uuid::Uuid::parse_str(server_id).map_err(|_| {
+				crate::ErrorKind::InputError("Invalid hosting server ID".to_string())
+			})?;
+			let world_id = uuid::Uuid::parse_str(world_id).map_err(|_| {
+				crate::ErrorKind::InputError("Invalid hosting world ID".to_string())
+			})?;
+			CommandPayload::PlayHostingServer {
+				server_id: server_id.to_string(),
+				world_id: world_id.to_string(),
+			}
+		}
         // /share/{invite_id}
         Some(("share", raw)) => {
             let (raw, _) = raw.split_once('?').unwrap_or((raw, ""));
diff --git a/packages/app-lib/src/event/mod.rs b/packages/app-lib/src/event/mod.rs
index 833349d4228..d222a7b9aca 100644
--- a/packages/app-lib/src/event/mod.rs
+++ b/packages/app-lib/src/event/mod.rs
@@ -413,6 +413,10 @@ pub enum CommandPayload {
         // run or install .mrpack
         path: String,
     },
+	PlayHostingServer {
+		server_id: String,
+		world_id: String,
+	},
 }
 
 #[derive(Serialize, Deserialize, Clone)]
diff --git a/packages/ui/src/composables/server-panel-sync.ts b/packages/ui/src/composables/server-panel-sync.ts
index 400cc150705..2758664ade2 100644
--- a/packages/ui/src/composables/server-panel-sync.ts
+++ b/packages/ui/src/composables/server-panel-sync.ts
@@ -118,6 +118,17 @@ export function useServerPanelSync(options: UseServerPanelSyncOptions) {
 			case 'world.content.base.update':
 				handleWorldContentBaseUpdate(serverId, event)
 				break
+			case 'world.shared_instance.update':
+				patchServerFullWorld(serverId, event.world_id, (world) => world.content ? {
+					...world,
+					content: {
+						...world.content,
+						shared_instance_id: event.shared_instance_id,
+						shared_instance_needs_update: event.needs_update,
+					},
+				} : world)
+				void queryClient.invalidateQueries({ queryKey: ['servers', 'share-diff', serverId, event.world_id] })
+				break
 			case 'world.content.update':
 				handleWorldContentUpdate(serverId, event)
 				break
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/general.vue b/packages/ui/src/layouts/shared/server-settings/pages/general.vue
index e54c06e13fc..8e7c1369dd0 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/general.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/general.vue
@@ -206,6 +206,11 @@ const preferences = {
 		description: 'Show RAM usage in bytes instead of a percentage.',
 		implemented: true,
 	},
+	reviewChangesBeforePlaying: {
+		displayName: 'Review changes before playing',
+		description: 'Show pending shared content changes before Play server publishes them. Saved on this device.',
+		implemented: true,
+	},
 } as const
 
 type PreferenceKeys = keyof typeof preferences
@@ -218,11 +223,14 @@ const defaultPreferences: UserPreferences = {
 	hideSubdomainLabel: false,
 	// autoRestart: false,
 	ramAsNumber: false,
+	reviewChangesBeforePlaying: false,
 }
 
 const userPreferences = useStorage<UserPreferences>(
 	`pyro-server-${serverId}-preferences`,
 	defaultPreferences,
+	undefined,
+	{ mergeDefaults: true },
 )
 
 const newUserPreferences = ref<UserPreferences>(JSON.parse(JSON.stringify(userPreferences.value)))
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayCard.vue b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayCard.vue
index 3fa2fb5bc0c..5e662bb1e9d 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayCard.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayCard.vue
@@ -12,12 +12,14 @@
 				</p>
 			</div>
 			<div class="flex shrink-0 flex-col gap-2 md:w-[164px]">
-				<Button type="colored" color="brand" size="lg" class="w-full" @click="emit('play')">
-					<PlayIcon aria-hidden="true" />
+				<Button type="colored" color="brand" size="lg" class="w-full" :disabled="disabled" @click="emit('play')">
+					<SpinnerIcon v-if="pendingAction === 'play'" class="animate-spin" aria-hidden="true" />
+					<PlayIcon v-else aria-hidden="true" />
 					{{ formatMessage(messages.playServerButton) }}
 				</Button>
-				<Button size="lg" class="w-full" @click="emit('invite')">
-					<UserPlusIcon aria-hidden="true" />
+				<Button size="lg" class="w-full" :disabled="disabled || !canInvite" @click="emit('invite')">
+					<SpinnerIcon v-if="pendingAction === 'invite'" class="animate-spin" aria-hidden="true" />
+					<UserPlusIcon v-else aria-hidden="true" />
 					{{ formatMessage(messages.invitePlayersButton) }}
 				</Button>
 			</div>
@@ -34,41 +36,11 @@
 				</p>
 			</div>
 			<div class="flex flex-col gap-2 sm:flex-row sm:items-center">
-				<ButtonGroup class="shrink-0">
-					<ButtonLink
-						v-if="modpackDownloadUrl"
-						size="lg"
-						:href="modpackDownloadUrl"
-						:download="modpackFilename"
-					>
-						<DownloadIcon aria-hidden="true" />
-						{{ formatMessage(messages.downloadModpackButton) }}
-					</ButtonLink>
-					<Button v-else size="lg">
-						<DownloadIcon aria-hidden="true" />
-						{{ formatMessage(messages.downloadModpackButton) }}
-					</Button>
-					<ButtonLink
-						v-if="modpackDownloadUrl"
-						v-tooltip="formatMessage(messages.downloadModpackButton)"
-						size="lg"
-						class="!w-10 !px-0"
-						:href="modpackDownloadUrl"
-						:download="modpackFilename"
-						:aria-label="formatMessage(messages.downloadModpackButton)"
-					>
-						<ChevronDownIcon aria-hidden="true" />
-					</ButtonLink>
-					<IconButton
-						v-else
-						v-tooltip="formatMessage(messages.downloadModpackButton)"
-						size="lg"
-						:circular="false"
-						:label="formatMessage(messages.downloadModpackButton)"
-					>
-						<ChevronDownIcon aria-hidden="true" />
-					</IconButton>
-				</ButtonGroup>
+				<Button size="lg" :disabled="disabled" @click="emit('download')">
+					<SpinnerIcon v-if="pendingAction === 'download'" class="animate-spin" aria-hidden="true" />
+					<DownloadIcon v-else aria-hidden="true" />
+					{{ formatMessage(messages.downloadModpackButton) }}
+				</Button>
 				<div
 					class="flex h-10 min-w-0 items-center justify-between gap-3 rounded-xl bg-surface-2 px-4 sm:w-[313px]"
 				>
@@ -92,26 +64,28 @@
 <script setup lang="ts">
 import {
 	CheckIcon,
-	ChevronDownIcon,
 	CopyIcon,
 	DownloadIcon,
 	PlayIcon,
+	SpinnerIcon,
 	UserPlusIcon,
 } from '@modrinth/assets'
 import { ref } from 'vue'
 
-import { Button, ButtonGroup, ButtonLink, IconButton } from '#ui/components/base/buttons'
+import { Button } from '#ui/components/base/buttons'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 
 const props = defineProps<{
 	address: string
-	modpackDownloadUrl?: string
-	modpackFilename?: string
+	disabled?: boolean
+	canInvite?: boolean
+	pendingAction?: string
 }>()
 
 const emit = defineEmits<{
 	play: []
 	invite: []
+	download: []
 }>()
 
 const { formatMessage } = useVIntl()
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayersTable.vue b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayersTable.vue
index 1426bdb6113..d0943ae8002 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayersTable.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayersTable.vue
@@ -76,6 +76,8 @@
 			<template #cell-actions="{ row }">
 				<div class="flex items-center justify-end">
 					<IconButton
+						v-if="canManage"
+						:disabled="disabled"
 						v-tooltip="row.pending ? 'Revoke invite' : 'More actions'"
 						type="quiet"
 						interaction="none"
@@ -116,7 +118,7 @@ import type { ServerPlayerMethod, ServerPlayerRow } from './types'
 type MethodFilter = ServerPlayerMethod | 'all'
 type PlayerColumn = 'username' | 'lastPlayed' | 'joined' | 'method' | 'actions'
 
-const props = defineProps<{ rows: ServerPlayerRow[] }>()
+const props = defineProps<{ rows: ServerPlayerRow[]; canManage?: boolean; disabled?: boolean }>()
 const emit = defineEmits<{
 	remove: [row: ServerPlayerRow]
 	'open-actions': [row: ServerPlayerRow]
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/play.vue b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/play.vue
index 0c9fd04c2da..111294c9a4e 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/play.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/play.vue
@@ -1,245 +1,244 @@
 <template>
 	<div class="flex flex-col gap-6">
+		<Admonition v-if="needsUpdate && canSetup" type="warning" :header="formatMessage(messages.unpublished)" inline-actions>
+			{{ formatMessage(messages.unpublishedBody) }}
+			<template #actions>
+				<Button :disabled="actionsLocked" @click="showPreview()">
+					<SpinnerIcon v-if="previewQuery.isFetching.value || pendingAction === 'push'" class="animate-spin" />
+					<UploadIcon v-else />
+					{{ formatMessage(messages.pushUpdate) }}
+				</Button>
+			</template>
+		</Admonition>
 		<ServerPlayCard
 			:address="serverAddress"
-			:modpack-download-url="modpackDownload?.url"
-			:modpack-filename="modpackDownload?.filename"
-			@play="props.onPlayServer?.(serverAddress)"
-			@invite="showInvitePlayers"
+			:disabled="actionsLocked || !worldId || (!canSetup && !sharedInstanceId)"
+			:can-invite="canSetup"
+			:pending-action="pendingAction"
+			@play="perform('play')"
+			@invite="perform('invite')"
+			@download="perform('download')"
 		/>
-
 		<section class="flex flex-col gap-3">
-			<h1 class="m-0 text-2xl font-semibold text-contrast">
-				{{ formatMessage(messages.invitedPlayersTitle) }}
-			</h1>
-			<ServerPlayersTable
-				:rows="playersToDisplay"
-				@remove="removePlayer"
-				@open-actions="(player) => props.onOpenPlayerActions?.(player)"
-			/>
+			<h1 class="m-0 text-2xl font-semibold text-contrast">{{ formatMessage(messages.invitedPlayersTitle) }}</h1>
+			<div v-if="players.members.isLoading.value" class="flex justify-center p-8" role="status" :aria-label="formatMessage(messages.loading)">
+				<SpinnerIcon class="animate-spin" />
+			</div>
+			<Admonition v-else-if="players.members.isError.value" type="critical" :header="formatMessage(messages.playersError)">
+				<Button @click="players.members.refetch()">{{ formatMessage(messages.retry) }}</Button>
+			</Admonition>
+			<ServerPlayersTable v-else :rows="players.rows.value" :can-manage="canSetup" :disabled="players.membershipMutation.isPending.value || actionsLocked" @remove="confirmRemove" @open-actions="confirmRemove" />
 		</section>
-
 		<InvitePlayersModal
 			ref="invitePlayersModal"
-			:header="invitePlayersHeader"
-			:friends="dummyFriends"
-			:search-users="searchInviteUsers"
-			:link="dummyInviteLink"
-			:link-expires-at="dummyInviteLinkExpiresAt"
-			:link-max-uses="10"
+			:header="formatMessage(messages.inviteHeader, { name: server.name })"
+			:friends="players.candidates.value"
+			:search-users="players.search"
+			:link="players.link.value ? `${siteUrl}/share/${encodeURIComponent(players.link.value.id)}` : undefined"
+			:link-expires-at="players.link.value?.expiration"
+			:link-max-uses="players.link.value?.max_uses"
+			:link-max-uses-limit="players.remaining.value"
+			:update-invite-link="updateInviteLink"
+			:can-invite="canSetup && !actionsLocked && !players.membershipMutation.isPending.value && players.remaining.value > 0"
+			:invite-disabled-message="formatMessage(messages.invitesUnavailable)"
 			@invite="invitePlayer"
-			@cancel="cancelPlayerInvite"
+			@cancel="(user) => changeMember(user.id, true)"
 		/>
+		<ContentDiffModal
+			ref="diffModal"
+			:header="formatMessage(messages.pushUpdate)"
+			:admonition-header="formatMessage(messages.shareChanges)"
+			:description="formatMessage(messages.shareChangesBody)"
+			:diffs="previewQuery.data.value?.items ?? []"
+			:confirm-label="formatMessage(previewAction === 'play' ? messages.pushAndPlay : messages.pushUpdate)"
+			:confirm-icon="UploadIcon"
+			:confirm-disabled="actionsLocked || previewQuery.isError.value || !previewQuery.data.value"
+			:added-label="formatMessage(messages.added)"
+			:removed-label="formatMessage(messages.removed)"
+			@confirm="perform(previewAction, true)"
+			@cancel="previewOpen = false"
+		>
+			<template #additional-content>
+				<p v-if="previewQuery.isFetching.value" class="m-0 flex items-center gap-2"><SpinnerIcon class="animate-spin" />{{ formatMessage(messages.refreshingPreview) }}</p>
+				<Admonition v-else-if="previewQuery.isError.value" type="critical" :header="formatMessage(messages.previewError)">
+					<Button @click="previewQuery.refetch()">{{ formatMessage(messages.retry) }}</Button>
+				</Admonition>
+			</template>
+		</ContentDiffModal>
+		<ConfirmModal ref="removeModal" :title="formatMessage(messages.removePlayer)" :description="formatMessage(messages.removeDescription, { username: playerToRemove?.username ?? '' })" :proceed-label="formatMessage(messages.removePlayer)" @proceed="removePlayer" />
 	</div>
 </template>
 
 <script setup lang="ts">
-import { useQuery } from '@tanstack/vue-query'
-import { computed, ref } from 'vue'
-
-import {
-	type InvitePlayersInvitePayload,
-	InvitePlayersModal,
-	type InvitePlayersSearchUser,
-	type InvitePlayersUser,
-} from '#ui/components/sharing'
+import type { Archon } from '@modrinth/api-client'
+import { SpinnerIcon, UploadIcon } from '@modrinth/assets'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import { useStorage } from '@vueuse/core'
+import { computed, nextTick, ref, watch } from 'vue'
+
+import Admonition from '#ui/components/base/Admonition.vue'
+import { Button } from '#ui/components/base/buttons'
+import ConfirmModal from '#ui/components/modal/ConfirmModal.vue'
+import { type InviteLinkSettings, type InvitePlayersInvitePayload, InvitePlayersModal } from '#ui/components/sharing'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
-import { injectModrinthClient, injectModrinthServerContext } from '#ui/providers'
+import { useServerPermissions } from '#ui/composables/server-permissions'
+import ContentDiffModal from '#ui/layouts/shared/installation-settings/components/ContentDiffModal.vue'
+import { getHostingServerAddress, injectAuth, injectModrinthClient, injectModrinthServerContext, injectNotificationManager, type ServerPlayTarget } from '#ui/providers'
 
 import ServerPlayCard from './ServerPlayCard.vue'
 import ServerPlayersTable from './ServerPlayersTable.vue'
+import { resolveServerShareDiff } from './share-diff'
 import type { ServerPlayerRow } from './types'
+import { useServerPlayers } from './use-server-players'
 
+type Action = 'play' | 'invite' | 'download' | 'push'
 const props = defineProps<{
-	players?: ServerPlayerRow[]
-	onPlayServer?: (address: string) => void | Promise<void>
-	onInvitePlayers?: () => void | Promise<void>
-	onRemovePlayer?: (player: ServerPlayerRow) => void | Promise<void>
-	onOpenPlayerActions?: (player: ServerPlayerRow) => void | Promise<void>
+	onPlayServer: (target: ServerPlayTarget) => void | Promise<void>
+	onDownloadMrpack: (blob: Blob, filename: string) => Promise<void>
+	siteUrl: string
 }>()
-
 const { formatMessage } = useVIntl()
+const { handleError } = injectNotificationManager()
 const client = injectModrinthClient()
-const { server, serverFull } = injectModrinthServerContext()
-const invitePlayersModal = ref<InstanceType<typeof InvitePlayersModal> | null>(null)
-const dummyPlayers = ref<ServerPlayerRow[]>(createDummyPlayers())
-const dummyFriends = ref<InvitePlayersUser[]>(createDummyFriends())
-const dummySearchUsers = createDummySearchUsers()
-const dummyInviteLinkExpiresAt = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
-const dummyInviteLink = 'https://modrinth.com/servers/invite/demo'
-
-const messages = defineMessages({
-	invitedPlayersTitle: {
-		id: 'servers.play.players.title',
-		defaultMessage: 'Invited players',
-	},
+const auth = injectAuth()
+const queryClient = useQueryClient()
+const { serverId, worldId, server, serverFull, busyReasons } = injectModrinthServerContext()
+const { canSetup } = useServerPermissions()
+const world = computed(() => serverFull.value?.worlds.find((world) => world.id === worldId.value))
+const sharedInstanceId = computed(() => world.value?.content?.shared_instance_id ?? null)
+const needsUpdate = computed(() => world.value?.content?.shared_instance_needs_update ?? false)
+const players = useServerPlayers(sharedInstanceId, canSetup)
+const invitePlayersModal = ref<InstanceType<typeof InvitePlayersModal>>()
+const diffModal = ref<InstanceType<typeof ContentDiffModal>>()
+const removeModal = ref<InstanceType<typeof ConfirmModal>>()
+const playerToRemove = ref<ServerPlayerRow>()
+const previewOpen = ref(false)
+const previewAction = ref<'play' | 'push'>('push')
+const preferences = useStorage(`pyro-server-${serverId}-preferences`, {
+	reviewChangesBeforePlaying: false,
 })
-
-const playersToDisplay = computed(() => props.players ?? dummyPlayers.value)
-const invitePlayersHeader = computed(() => `Invite players to ${server.value.name}`)
-
-const serverAddress = computed(() => {
-	const subdomain = server.value.net.domain || serverFull.value?.subdomain
-	if (subdomain) {
-		return subdomain.endsWith('.modrinth.gg') ? subdomain : `${subdomain}.modrinth.gg`
-	}
-
-	return server.value.net.ip || ''
-})
-
-const modpackVersionId = computed(() =>
-	server.value.upstream?.kind === 'modpack' ? server.value.upstream.version_id : null,
-)
-
-const { data: modpackVersion } = useQuery({
-	queryKey: computed(() => ['servers', 'play', 'modpack-version', modpackVersionId.value]),
-	queryFn: () => client.labrinth.versions_v3.getVersion(modpackVersionId.value!),
-	enabled: computed(() => Boolean(modpackVersionId.value)),
-	staleTime: 5 * 60 * 1000,
+const serverAddress = computed(() => getHostingServerAddress(server.value.net, serverFull.value?.subdomain))
+const previewQuery = useQuery({
+	queryKey: computed(() => ['servers', 'share-diff', serverId, worldId.value, auth.user.value?.id]),
+	enabled: computed(() => previewOpen.value && !!worldId.value && !!sharedInstanceId.value),
+	queryFn: async () => {
+		const diff = await client.archon.content_v1.getShareDiff(serverId, worldId.value!)
+		return { diff, items: await resolveServerShareDiff(client, diff) }
+	},
+	retry: false,
 })
-
-const modpackDownload = computed(() => {
-	const version = modpackVersion.value
-	if (!version) return undefined
-	return version.files.find((file) => file.primary) ?? version.files[0]
+const actionMutation = useMutation({
+	mutationFn: async ({ action, targetWorldId, userId }: { action: Action; targetWorldId: string; userId: string | undefined }) => {
+		if (busyReasons.value.length) throw new Error(formatMessage(messages.busy))
+		if (auth.user.value?.id !== userId) return
+		const sameContext = () => worldId.value === targetWorldId && auth.user.value?.id === userId
+		let id = serverFull.value?.worlds.find((world) => world.id === targetWorldId)?.content?.shared_instance_id
+		if (canSetup.value) {
+			const shared = await client.archon.content_v1.share(serverId, targetWorldId)
+			id = shared.shared_instance_id
+			queryClient.setQueryData<Archon.Servers.v1.ServerFull>(['servers', 'v1', 'detail', serverId], (current) => current ? {
+				...current,
+				worlds: current.worlds.map((world) => world.id === targetWorldId && world.content ? {
+					...world, content: { ...world.content, shared_instance_id: shared.shared_instance_id },
+				} : world),
+			} : current)
+			await queryClient.invalidateQueries({ queryKey: ['servers', 'v1', 'detail', serverId] })
+		} else if (action === 'invite' || action === 'push') {
+			throw new Error(formatMessage(messages.permission))
+		}
+		if (!id) throw new Error(formatMessage(messages.notShared))
+		if (!sameContext()) return
+		if (action === 'play') {
+			await props.onPlayServer({ serverId, worldId: targetWorldId })
+		} else if (action === 'invite') {
+			await nextTick()
+			await players.members.refetch({ throwOnError: true })
+			if (!sameContext()) return
+			await players.ensureLink(id)
+			if (sameContext()) invitePlayersModal.value?.show()
+		} else if (action === 'download') {
+			const latest = await client.sharedinstances.instances_v1.getLatestVersion(id)
+			if (!latest.ready) throw new Error(formatMessage(messages.notReady))
+			const blob = await client.sharedinstances.instances_v1.downloadMrpack(id, latest.version)
+			if (sameContext()) await props.onDownloadMrpack(blob, `${server.value.name.replace(/[\\/:*?"<>|]/g, '_')}.mrpack`)
+		} else {
+			previewOpen.value = false
+			await queryClient.invalidateQueries({ queryKey: ['servers', 'share-diff', serverId, targetWorldId] })
+		}
+	},
+	onError: (error) => handleError(error),
 })
-
-function showInvitePlayers() {
-	invitePlayersModal.value?.show()
-	void props.onInvitePlayers?.()
-}
-
-async function searchInviteUsers(query: string): Promise<InvitePlayersSearchUser[]> {
-	const normalizedQuery = query.trim().toLowerCase()
-	const friendKeys = new Set(
-		dummyFriends.value.flatMap((friend) => [
-			friend.id.toLowerCase(),
-			friend.username.toLowerCase(),
-		]),
-	)
-
-	return dummySearchUsers.filter(
-		(user) =>
-			user.username.toLowerCase().startsWith(normalizedQuery) &&
-			!friendKeys.has(user.id.toLowerCase()) &&
-			!friendKeys.has(user.username.toLowerCase()),
-	)
-}
-
-function invitePlayer(payload: InvitePlayersInvitePayload) {
-	const existingFriend = dummyFriends.value.find((friend) => friend.id === payload.user.id)
-
-	if (existingFriend) {
-		existingFriend.status = 'pending'
-	} else {
-		dummyFriends.value.push({
-			...payload.user,
-			status: 'pending',
-		})
-	}
-
-	const existingPlayer = dummyPlayers.value.find((player) => player.id === payload.user.id)
-	if (existingPlayer) {
-		existingPlayer.pending = true
-		existingPlayer.method = 'direct'
+const pendingAction = computed(() => actionMutation.isPending.value ? actionMutation.variables.value?.action : undefined)
+const actionsLocked = computed(() => actionMutation.isPending.value || previewQuery.isFetching.value || players.linkMutation.isPending.value || busyReasons.value.length > 0)
+function perform(action: Action, reviewed = false) {
+	if (!worldId.value || actionsLocked.value) return
+	if (action === 'play' && !reviewed && canSetup.value && needsUpdate.value && preferences.value.reviewChangesBeforePlaying) {
+		void showPreview(true)
 		return
 	}
-
-	dummyPlayers.value.push({
-		id: payload.user.id,
-		username: payload.user.username,
-		avatarUrl: payload.user.avatarUrl ?? undefined,
-		lastPlayedAt: null,
-		joinedAt: null,
-		method: 'direct',
-		pending: true,
-	})
+	previewOpen.value = false
+	actionMutation.mutate({ action, targetWorldId: worldId.value, userId: auth.user.value?.id })
 }
-
-function cancelPlayerInvite(user: InvitePlayersUser) {
-	const friend = dummyFriends.value.find((candidate) => candidate.id === user.id)
-	if (friend) friend.status = 'available'
-
-	dummyPlayers.value = dummyPlayers.value.filter(
-		(player) => player.id !== user.id || !player.pending,
-	)
+async function showPreview(playAfter = false) {
+	if (actionsLocked.value) return
+	const target = worldId.value
+	previewAction.value = playAfter ? 'play' : 'push'
+	previewOpen.value = true
+	const result = await previewQuery.refetch()
+	if (target !== worldId.value) return
+	if (!previewOpen.value) return
+	if (result.error) {
+		previewOpen.value = false
+		handleError(result.error)
+	} else diffModal.value?.show()
 }
-
-function removePlayer(player: ServerPlayerRow) {
-	if (player.pending) {
-		cancelPlayerInvite({ id: player.id, username: player.username })
-	}
-
-	void props.onRemovePlayer?.(player)
+function changeMember(userId: string, remove: boolean) {
+	if (!sharedInstanceId.value || players.membershipMutation.isPending.value || !canSetup.value) return
+	players.membershipMutation.mutate({ id: sharedInstanceId.value, userId, remove }, { onError: (error) => handleError(error) })
 }
-
-function createDummyFriends(): InvitePlayersUser[] {
-	return [
-		{ id: 'coolbot', username: 'Coolbot', status: 'pending', online: true },
-		{ id: 'geometrically', username: 'Geometrically', status: 'added', online: true },
-		{ id: 'josh', username: 'Josh', status: 'added' },
-		{ id: 'prospector', username: 'Prospector', status: 'added' },
-		{ id: 'fetch', username: 'Fetch', status: 'available', online: true },
-		{ id: 'emma', username: 'Emma', status: 'available' },
-	]
+function invitePlayer(payload: InvitePlayersInvitePayload) {
+	changeMember(payload.user.id, false)
 }
-
-function createDummySearchUsers(): InvitePlayersSearchUser[] {
-	return [
-		{ id: 'paperclip', username: 'Paperclip' },
-		{ id: 'steve', username: 'Steve' },
-		{ id: 'alex', username: 'Alex' },
-	]
+function confirmRemove(player: ServerPlayerRow) {
+	playerToRemove.value = player
+	removeModal.value?.show()
 }
-
-function createDummyPlayers(): ServerPlayerRow[] {
-	const now = Date.now()
-	const daysAgo = (days: number) => new Date(now - days * 24 * 60 * 60 * 1000)
-
-	return [
-		{
-			id: 'coolbot',
-			username: 'Coolbot',
-			lastPlayedAt: null,
-			joinedAt: null,
-			method: 'direct',
-			pending: true,
-		},
-		{
-			id: 'geometrically',
-			username: 'Geometrically',
-			lastPlayedAt: daysAgo(0),
-			joinedAt: daysAgo(0),
-			method: 'link',
-		},
-		{
-			id: 'josh',
-			username: 'Josh',
-			lastPlayedAt: daysAgo(0),
-			joinedAt: daysAgo(0),
-			method: 'link',
-		},
-		{
-			id: 'boris',
-			username: 'Boris',
-			lastPlayedAt: daysAgo(4),
-			joinedAt: daysAgo(7),
-			method: 'direct',
-		},
-		{
-			id: 'prospector',
-			username: 'Prospector',
-			lastPlayedAt: daysAgo(4),
-			joinedAt: daysAgo(30),
-			method: 'direct',
-		},
-		{
-			id: 'imb',
-			username: 'IMB',
-			lastPlayedAt: daysAgo(14),
-			joinedAt: daysAgo(90),
-			method: 'direct',
-		},
-	]
+function removePlayer() {
+	if (playerToRemove.value) changeMember(playerToRemove.value.id, true)
+}
+async function updateInviteLink(settings: InviteLinkSettings) {
+	if (!sharedInstanceId.value || players.linkMutation.isPending.value) return
+	await players.linkMutation.mutateAsync({ id: sharedInstanceId.value, settings, replaceId: players.link.value?.id })
 }
+watch([worldId, () => auth.user.value?.id], () => {
+	invitePlayersModal.value?.hide()
+	diffModal.value?.hide()
+	removeModal.value?.hide()
+	previewOpen.value = false
+	playerToRemove.value = undefined
+})
+const messages = defineMessages({
+	invitedPlayersTitle: { id: 'servers.play.players.title', defaultMessage: 'Invited players' },
+	unpublished: { id: 'servers.play.unpublished', defaultMessage: 'Your changes haven’t been shared yet' },
+	unpublishedBody: { id: 'servers.play.unpublished-body', defaultMessage: 'Push an update to share your content changes with players.' },
+	pushUpdate: { id: 'servers.play.push-update', defaultMessage: 'Push update' },
+	pushAndPlay: { id: 'servers.play.push-and-play', defaultMessage: 'Push update and play' },
+	shareChanges: { id: 'servers.play.share-changes', defaultMessage: 'Share your changes' },
+	shareChangesBody: { id: 'servers.play.share-changes-body', defaultMessage: 'These changes will be available to players when they update their instance.' },
+	inviteHeader: { id: 'servers.play.invite-header', defaultMessage: 'Invite players to {name}' },
+	refreshingPreview: { id: 'servers.play.refreshing-preview', defaultMessage: 'Refreshing changes…' },
+	previewError: { id: 'servers.play.preview-error', defaultMessage: 'Could not refresh the changes. Retry before publishing.' },
+	loading: { id: 'servers.play.loading', defaultMessage: 'Loading players' },
+	playersError: { id: 'servers.play.players-error', defaultMessage: 'Could not load invited players' },
+	retry: { id: 'servers.play.retry', defaultMessage: 'Retry' },
+	invitesUnavailable: { id: 'servers.play.invites-unavailable', defaultMessage: 'Invitations are unavailable while an action is in progress or the player limit has been reached.' },
+	removePlayer: { id: 'servers.play.remove-player', defaultMessage: 'Remove player' },
+	removeDescription: { id: 'servers.play.remove-description', defaultMessage: 'Remove {username} from this shared instance? This does not ban them from the Minecraft server.' },
+	added: { id: 'servers.play.diff-added', defaultMessage: 'Added' },
+	removed: { id: 'servers.play.diff-removed', defaultMessage: 'Removed' },
+	busy: { id: 'servers.play.busy', defaultMessage: 'Wait for the current server operation to finish.' },
+	permission: { id: 'servers.play.permission', defaultMessage: 'You do not have permission to share this world.' },
+	notShared: { id: 'servers.play.not-shared', defaultMessage: 'An owner or editor needs to share this world first.' },
+	notReady: { id: 'servers.play.not-ready', defaultMessage: 'The shared content is not ready yet. Please try again shortly.' },
+})
 </script>
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/share-diff.ts b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/share-diff.ts
new file mode 100644
index 00000000000..c66472cd508
--- /dev/null
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/share-diff.ts
@@ -0,0 +1,35 @@
+import type { AbstractModrinthClient, Archon } from '@modrinth/api-client'
+
+import type { ContentDiffItem } from '#ui/layouts/shared/installation-settings/types'
+
+type Change<T> = Archon.Content.v1.SharedContentChange<T>
+const before = <T>(change: Change<T>) => 'before' in change ? change.before : undefined
+const after = <T>(change: Change<T>) => 'after' in change ? change.after : undefined
+
+export async function resolveServerShareDiff(client: AbstractModrinthClient, diff: Archon.Content.v1.SharedInstancePublishDiff): Promise<ContentDiffItem[]> {
+	const versionIds = new Set<string>()
+	for (const entry of diff.diffs) {
+		if (entry.type !== 'project' && entry.type !== 'modpack') continue
+		const values = [before(entry.change), after(entry.change)]
+		for (const id of values) if (id) versionIds.add(id)
+	}
+	const versions = await Promise.all([...versionIds].map((id) => client.labrinth.versions_v3.getVersion(id)))
+	const projectIds = [...new Set(versions.map((version) => version.project_id))]
+	const projects = projectIds.length ? await client.labrinth.projects_v3.getMultiple(projectIds) : []
+	const versionName = (id?: string) => versions.find((version) => version.id === id)?.version_number ?? id
+	return diff.diffs.map((entry): ContentDiffItem => {
+		if (entry.type === 'external_file') return { type: entry.kind, fileName: encodeURIComponent(entry.file_name) }
+		if (entry.type === 'loader') {
+			const label = (value?: { name: string; version: string | null }) => value ? [value.name, value.version].filter(Boolean).join(' ') : undefined
+			return { type: 'loader_updated', currentVersionName: label(before(entry.change)), newVersionName: label(after(entry.change)) }
+		}
+		if (entry.type === 'game_version') return { type: 'game_version_updated', currentVersionName: before(entry.change), newVersionName: after(entry.change) }
+		const projectId = entry.type === 'project' ? entry.project_id : versions.find((version) => version.id === (after(entry.change) ?? before(entry.change)))?.project_id
+		return {
+			type: entry.type === 'project' ? entry.change.kind : entry.change.kind === 'added' ? 'modpack_linked' : entry.change.kind === 'removed' ? 'modpack_unlinked' : 'modpack_updated',
+			projectName: projects.find((project) => project.id === projectId)?.title ?? projectId,
+			currentVersionName: versionName(before(entry.change)),
+			newVersionName: versionName(after(entry.change)),
+		}
+	})
+}
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/use-server-players.ts b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/use-server-players.ts
new file mode 100644
index 00000000000..911836080be
--- /dev/null
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/use-server-players.ts
@@ -0,0 +1,116 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import { computed, type Ref } from 'vue'
+
+import type { InviteLinkSettings, InvitePlayersUser } from '#ui/components/sharing'
+import { injectAuth, injectModrinthClient } from '#ui/providers'
+
+import type { ServerPlayerRow } from './types'
+
+export function useServerPlayers(instanceId: Ref<string | null>, canManage: Ref<boolean>) {
+	const client = injectModrinthClient()
+	const auth = injectAuth()
+	const queryClient = useQueryClient()
+	const userId = computed(() => auth.user.value?.id)
+	const memberKey = (id: string) => ['shared-instances', id, 'players', userId.value] as const
+	const inviteKey = (id: string) => ['shared-instances', id, 'invites', userId.value] as const
+	const members = useQuery({
+		queryKey: computed(() => memberKey(instanceId.value ?? '')),
+		enabled: computed(() => !!instanceId.value && !!userId.value),
+		queryFn: async () => {
+			const response = await client.sharedinstances.instances_v1.getUsers(instanceId.value!)
+			const users = response.users.length
+				? await client.labrinth.users_v2.getMultiple(response.users.map((user) => user.id))
+				: []
+			const rows: ServerPlayerRow[] = response.users.filter((user) => user.join_type !== 'owner').map((member) => {
+				const user = users.find((user) => user.id === member.id)
+				return {
+					id: member.id,
+					username: user?.username ?? member.id,
+					avatarUrl: user?.avatar_url ?? undefined,
+					joinedAt: member.joined_at ? new Date(member.joined_at) : null,
+					lastPlayedAt: member.last_played ? new Date(member.last_played) : null,
+					pending: !member.joined_at,
+					method: member.join_type === 'link' ? 'link' : 'direct',
+				}
+			})
+			return { rows, remaining: Math.max(0, 50 - response.users.length - response.tokens) }
+		},
+		refetchInterval: 30_000,
+	})
+	const rows = computed(() => members.data.value?.rows ?? [])
+	const remaining = computed(() => members.data.value?.remaining ?? 0)
+	const friends = useQuery({
+		queryKey: computed(() => ['shared-instances', 'friends', userId.value]),
+		enabled: computed(() => !!userId.value && canManage.value),
+		queryFn: async () => {
+			const currentUserId = userId.value
+			const relationships = await client.labrinth.friends_v3.list()
+			const ids = relationships.filter((friend) => friend.accepted)
+				.map((friend) => friend.id === currentUserId ? friend.friend_id : friend.id)
+			return ids.length ? client.labrinth.users_v2.getMultiple(ids) : []
+		},
+	})
+	const candidates = computed<InvitePlayersUser[]>(() => {
+		const candidates = new Map<string, InvitePlayersUser>()
+		for (const friend of friends.data.value ?? []) {
+			candidates.set(friend.id, { id: friend.id, username: friend.username, avatarUrl: friend.avatar_url, status: 'available' })
+		}
+		for (const row of rows.value) {
+			candidates.set(row.id, { ...row, status: row.pending ? 'pending' : 'added' })
+		}
+		return [...candidates.values()]
+	})
+	const links = useQuery({
+		queryKey: computed(() => inviteKey(instanceId.value ?? '')),
+		enabled: computed(() => !!instanceId.value && canManage.value),
+		queryFn: () => client.sharedinstances.invites_v1.list(instanceId.value!),
+	})
+	const link = computed(() => links.data.value?.find((link) => new Date(link.expiration).getTime() > Date.now() && link.uses < link.max_uses))
+
+	const membershipMutation = useMutation({
+		mutationFn: async ({ id, userId, remove }: { id: string; userId: string; remove: boolean }) => {
+			if (!canManage.value) throw new Error('You do not have permission to manage players.')
+			if (remove) return client.sharedinstances.instances_v1.removeUsers(id, [userId])
+			const result = await client.sharedinstances.instances_v1.inviteUsers(id, [userId])
+			if (result.failed.includes(userId)) throw new Error('This player’s privacy settings do not allow this invitation.')
+		},
+		onSettled: (_data, _error, { id }) => queryClient.invalidateQueries({ queryKey: ['shared-instances', id, 'players'] }),
+	})
+	const linkMutation = useMutation({
+		mutationFn: async ({ id, settings, replaceId }: { id: string; settings: InviteLinkSettings; replaceId?: string }) => {
+			if (!canManage.value) throw new Error('You do not have permission to manage invite links.')
+			const created = await client.sharedinstances.invites_v1.create(id, {
+				max_age: Math.max(1, Math.min(604800, Math.floor((settings.expiresAt.getTime() - Date.now()) / 1000))),
+				max_uses: Math.max(1, Math.min(settings.maxUses, remaining.value)),
+			})
+			if (replaceId) {
+				try {
+					await client.sharedinstances.invites_v1.delete(id, replaceId)
+				} catch (error) {
+					await client.sharedinstances.invites_v1.delete(id, created.id)
+					throw error
+				}
+			}
+		},
+		onSettled: (_data, _error, { id }) => queryClient.invalidateQueries({ queryKey: ['shared-instances', id, 'invites'] }),
+	})
+
+	async function ensureLink(id: string) {
+		const available = await queryClient.fetchQuery({ queryKey: inviteKey(id), queryFn: () => client.sharedinstances.invites_v1.list(id), staleTime: 0 })
+		if (available.some((link) => new Date(link.expiration).getTime() > Date.now() && link.uses < link.max_uses)) return
+		if (remaining.value <= 0) return
+		await linkMutation.mutateAsync({ id, settings: { maxUses: Math.min(10, remaining.value), expiresAt: new Date(Date.now() + 86400_000) } })
+	}
+
+	async function search(query: string) {
+		const users = await queryClient.fetchQuery({
+			queryKey: ['users', 'search', query],
+			queryFn: () => client.labrinth.users_v3.search(query),
+			staleTime: 30_000,
+		})
+		return users.filter((user) => user.id !== userId.value && !candidates.value.some((candidate) => candidate.id === user.id))
+			.map((user) => ({ id: user.id, username: user.username, avatarUrl: user.avatar_url }))
+	}
+
+	return { members, rows, remaining, candidates, link, links, friends, membershipMutation, linkMutation, ensureLink, search }
+}
diff --git a/packages/ui/src/providers/index.ts b/packages/ui/src/providers/index.ts
index 9c6f8333ed1..89bbbe4ff27 100644
--- a/packages/ui/src/providers/index.ts
+++ b/packages/ui/src/providers/index.ts
@@ -28,3 +28,4 @@ export {
 export * from './user-country'
 export * from './user-preferences'
 export * from './web-notifications'
+export * from './server-play'
diff --git a/packages/ui/src/providers/server-play.ts b/packages/ui/src/providers/server-play.ts
new file mode 100644
index 00000000000..ae5b8d10254
--- /dev/null
+++ b/packages/ui/src/providers/server-play.ts
@@ -0,0 +1,20 @@
+import type { Archon } from '@modrinth/api-client'
+
+import { createContext } from './create-context'
+
+export type ServerPlayTarget = {
+	serverId: string
+	worldId: string
+}
+
+export const [injectServerPlay, provideServerPlay] = createContext<{
+	play: (target: ServerPlayTarget) => Promise<void>
+}>('root', 'serverPlay')
+
+export function getHostingServerAddress(net: Archon.Servers.v0.Net, subdomain?: string) {
+	const domain = net.domain || subdomain
+	if (domain) return domain.includes('.') ? domain : `${domain}.modrinth.gg`
+	if (!net.ip) return ''
+	const host = net.ip.includes(':') && !net.ip.startsWith('[') ? `[${net.ip}]` : net.ip
+	return net.port && net.port !== 25565 ? `${host}:${net.port}` : host
+}

From d5c96361f3d9e6a6a57dcc7177ba262cd12ed7ef Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Thu, 10 Sep 2026 15:31:31 +0100
Subject: [PATCH 08/13] qa: 1

---
 .../ui/hosting/HostingPlayHandler.vue         |  3 +
 .../instances/use-hosting-instance.ts         | 89 +++++++++++++++++
 .../instance-page-header-server-metadata.vue  | 13 ++-
 .../src/pages/instance/content/index.vue      |  8 +-
 .../src/pages/instance/layout.vue             | 96 +++++++------------
 .../components/project/server/ServerPing.vue  |  2 +-
 .../project/server/ServerRegion.vue           | 16 +++-
 .../admonitions/ServerPanelAdmonitions.vue    | 75 ++++++++++++++-
 .../wrapped/hosting/manage/[id]/play/play.vue | 37 ++++---
 9 files changed, 252 insertions(+), 87 deletions(-)
 create mode 100644 apps/app-frontend/src/composables/instances/use-hosting-instance.ts

diff --git a/apps/app-frontend/src/components/ui/hosting/HostingPlayHandler.vue b/apps/app-frontend/src/components/ui/hosting/HostingPlayHandler.vue
index b952435e5e0..fd230fda5e2 100644
--- a/apps/app-frontend/src/components/ui/hosting/HostingPlayHandler.vue
+++ b/apps/app-frontend/src/components/ui/hosting/HostingPlayHandler.vue
@@ -23,6 +23,7 @@ import { useRouter } from 'vue-router'
 
 import ModrinthAccountRequiredModal from '@/components/ui/modal/ModrinthAccountRequiredModal.vue'
 import SharedInstanceInstallModal from '@/components/ui/shared-instances/shared-instance-install-modal/index.vue'
+import { hostingInstanceMetadata, useHostingInstanceCache } from '@/composables/instances/use-hosting-instance'
 import { toError } from '@/helpers/errors'
 import { install_job_list, install_get_shared_instance_preview, install_get_shared_instance_update_preview, install_shared_instance, install_update_shared_instance, installJobInstanceId, wait_for_install_job } from '@/helpers/install'
 import { get, list } from '@/helpers/instance'
@@ -36,6 +37,7 @@ const client = injectModrinthClient()
 const appEvents = injectAppEvents()
 const queryClient = useQueryClient()
 const router = useRouter()
+const hostingInstances = useHostingInstanceCache()
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 const accountModal = ref<InstanceType<typeof ModrinthAccountRequiredModal>>()
@@ -73,6 +75,7 @@ async function join(target: LaunchTarget, instanceId: string) {
 	if (!address) throw new Error(formatMessage(messages.noAddress))
 	await assertAccount(target)
 	await ensureManagedServerWorldExists(instanceId, target.name, address)
+	hostingInstances.value[instanceId] = hostingInstanceMetadata(server, target.worldId, target.sharedInstanceId, address)
 	await router.push(`/instance/${encodeURIComponent(instanceId)}`)
 	await start_join_server(instanceId, address)
 }
diff --git a/apps/app-frontend/src/composables/instances/use-hosting-instance.ts b/apps/app-frontend/src/composables/instances/use-hosting-instance.ts
new file mode 100644
index 00000000000..1034b212c74
--- /dev/null
+++ b/apps/app-frontend/src/composables/instances/use-hosting-instance.ts
@@ -0,0 +1,89 @@
+import type { Archon } from '@modrinth/api-client'
+import { getHostingServerAddress, injectAuth, injectModrinthClient } from '@modrinth/ui'
+import { useQuery } from '@tanstack/vue-query'
+import { useStorage } from '@vueuse/core'
+import { computed, type Ref, watch } from 'vue'
+
+import type { GameInstance } from '@/helpers/types'
+import { get_instance_worlds } from '@/helpers/worlds'
+
+type HostingInstanceMetadata = {
+	sharedInstanceId: string
+	serverId: string
+	worldId: string
+	address: string
+	region?: string
+}
+
+export function hostingInstanceMetadata(
+	server: Archon.Servers.v1.ServerFull,
+	worldId: string,
+	sharedInstanceId: string,
+	address: string,
+): HostingInstanceMetadata {
+	const location = server.location
+	return {
+		sharedInstanceId,
+		serverId: server.id,
+		worldId,
+		address,
+		region: location.status === 'assigned' && location.location_metadata.region_should_be_user_displayed
+			? location.location_metadata.region
+			: undefined,
+	}
+}
+
+export function useHostingInstanceCache() {
+	return useStorage<Record<string, HostingInstanceMetadata>>('hosting-instance-metadata', {})
+}
+
+export function useHostingInstance(instance: Ref<GameInstance | undefined>, offline: Ref<boolean>) {
+	const client = injectModrinthClient()
+	const auth = injectAuth()
+	const cache = useHostingInstanceCache()
+	const isHostingInstance = computed(() => !!instance.value?.shared_instance?.server_manager_name)
+	const saved = computed(() => {
+		const current = instance.value
+		const metadata = current && cache.value[current.id]
+		return metadata?.sharedInstanceId === current?.shared_instance?.id ? metadata : undefined
+	})
+	const serverQuery = useQuery({
+		queryKey: computed(() => ['instances', instance.value?.id, 'hosting', auth.user.value?.id]),
+		enabled: computed(() => isHostingInstance.value && !offline.value && !!auth.user.value?.id && auth.user.value.id === instance.value?.shared_instance?.linked_user_id),
+		queryFn: async () => {
+			const current = instance.value!
+			const sharedId = current.shared_instance!.id
+			const known = saved.value
+			const servers = known
+				? [await client.archon.servers_v1.get(known.serverId)]
+				: await client.archon.servers_v1.list()
+			const server = servers.find((server) => server.worlds.some((world) => world.content?.shared_instance_id === sharedId))
+			const world = server?.worlds.find((world) => world.content?.shared_instance_id === sharedId)
+			if (!server || !world) return null
+			const legacy = await client.archon.servers_v0.get(server.id)
+			return { instanceId: current.id, metadata: hostingInstanceMetadata(server, world.id, sharedId, getHostingServerAddress(legacy.net, server.subdomain)) }
+		},
+		staleTime: 60_000,
+		retry: false,
+	})
+	watch(serverQuery.data, (result) => {
+		if (result) cache.value[result.instanceId] = result.metadata
+	})
+	const worldsQuery = useQuery({
+		queryKey: computed(() => ['instances', instance.value?.id, 'hosting-worlds']),
+		enabled: computed(() => isHostingInstance.value && !saved.value && instance.value?.install_stage === 'installed'),
+		queryFn: () => get_instance_worlds(instance.value!.id),
+	})
+	const address = computed(() => {
+		if (saved.value?.address) return saved.value.address
+		const world = worldsQuery.data.value?.find((world) =>
+			world.type === 'server' && world.name === instance.value?.shared_instance?.server_manager_name,
+		)
+		return world?.type === 'server' ? world.address : undefined
+	})
+	return {
+		isHostingInstance,
+		region: computed(() => saved.value?.region),
+		address,
+	}
+}
diff --git a/apps/app-frontend/src/pages/instance/components/page-header/instance-page-header-server-metadata.vue b/apps/app-frontend/src/pages/instance/components/page-header/instance-page-header-server-metadata.vue
index 04e0db3bfdd..915188e13e7 100644
--- a/apps/app-frontend/src/pages/instance/components/page-header/instance-page-header-server-metadata.vue
+++ b/apps/app-frontend/src/pages/instance/components/page-header/instance-page-header-server-metadata.vue
@@ -4,14 +4,15 @@
 			<ServerOnlinePlayers :online="playersOnline" :status-online="statusOnline" hide-label />
 		</PageHeaderMetadataItem>
 		<PageHeaderMetadataItem
-			v-if="minecraftServer?.region || (loadingServerPing && ping !== undefined)"
+			v-if="minecraftServer?.region || loadingServerPing"
 		>
-			<ServerRegion v-if="minecraftServer?.region" :region="minecraftServer.region" />
+			<ServerRegion v-if="minecraftServer?.region" :region="minecraftServer.region" flag-only />
 			<ServerPing
-				v-if="loadingServerPing && ping !== undefined"
+				v-if="loadingServerPing"
 				:ping="ping"
 				:status-online="statusOnline"
 			/>
+			<SpinnerIcon v-else class="size-4 animate-spin" :aria-label="formatMessage(commonMessages.loadingLabel)" role="status" />
 		</PageHeaderMetadataItem>
 		<PageHeaderMetadataItem
 			v-if="showInstancePlayTime && playtimeLabel"
@@ -25,15 +26,19 @@
 
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
-import { TimerIcon } from '@modrinth/assets'
+import { SpinnerIcon, TimerIcon } from '@modrinth/assets'
 import {
+	commonMessages,
 	PageHeaderMetadata,
 	PageHeaderMetadataItem,
 	ServerOnlinePlayers,
 	ServerPing,
 	ServerRegion,
+	useVIntl,
 } from '@modrinth/ui'
 
+const { formatMessage } = useVIntl()
+
 defineProps<{
 	loadingServerPing?: boolean
 	playersOnline?: number
diff --git a/apps/app-frontend/src/pages/instance/content/index.vue b/apps/app-frontend/src/pages/instance/content/index.vue
index 491e336b85e..1a7628c93ce 100644
--- a/apps/app-frontend/src/pages/instance/content/index.vue
+++ b/apps/app-frontend/src/pages/instance/content/index.vue
@@ -288,11 +288,13 @@ watch(projects, (newProjects) => {
 })
 
 const mergedProjects = computed<ContentItem[]>(() => {
+	const managedFiles = new Set(managedContentItems.value.map((item) => item.file_name))
+	const additionalProjects = projects.value.filter((item) => !managedFiles.has(item.file_name))
 	const active = installingItems.value.get(instance.value.id)
-	const pending = active ?? installingBuffer.value
-	if (pending.length === 0) return projects.value
+	const pending = (active ?? installingBuffer.value).filter((item) => !managedFiles.has(item.file_name))
+	if (pending.length === 0) return additionalProjects
 	const pendingProjectIds = new Set(pending.map((p) => p.project?.id).filter(Boolean))
-	const displayProjects = projects.value.map((project) =>
+	const displayProjects = additionalProjects.map((project) =>
 		project.project?.id && pendingProjectIds.has(project.project.id)
 			? { ...project, installing: true }
 			: project,
diff --git a/apps/app-frontend/src/pages/instance/layout.vue b/apps/app-frontend/src/pages/instance/layout.vue
index 7ec73ca240e..d1140970451 100644
--- a/apps/app-frontend/src/pages/instance/layout.vue
+++ b/apps/app-frontend/src/pages/instance/layout.vue
@@ -116,13 +116,13 @@ import { computed, type ComputedRef, onUnmounted, ref, shallowRef, watch } from
 import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'
 
 import ExportModal from '@/components/ui/ExportModal.vue'
+import { useHostingInstance } from '@/composables/instances/use-hosting-instance'
 import ConfirmDeleteInstanceModal from '@/components/ui/modal/ConfirmDeleteInstanceModal.vue'
 import UpdateToPlayModal from '@/components/ui/modal/UpdateToPlayModal.vue'
 import SharedInstanceInstallModal from '@/components/ui/shared-instances/shared-instance-install-modal/index.vue'
 import SharedInstanceUpdateModal from '@/components/ui/shared-instances/SharedInstanceUpdateModal.vue'
 import {
-	fetchCachedServerStatus,
-	getFreshCachedServerStatus,
+	getServerStatusQueryKey,
 } from '@/composables/instances/use-server-status-query'
 import { useAppEvent } from '@/composables/use-app-event'
 import { useAppSettings } from '@/composables/use-app-settings.ts'
@@ -149,7 +149,7 @@ import {
 import { useSharedInstanceErrors } from '@/helpers/shared-instance-errors'
 import type { GameInstance } from '@/helpers/types'
 import { createInstanceShortcut, showInstanceInFolder } from '@/helpers/utils.js'
-import type { ServerStatus } from '@/helpers/worlds'
+import { get_server_status, start_join_server } from '@/helpers/worlds'
 import { useRootBreadcrumb } from '@/providers/breadcrumbs'
 import { provideInstanceBackup } from '@/providers/instance-backup'
 import { injectServerInstall } from '@/providers/server-install'
@@ -259,7 +259,8 @@ const linkedProjectQuery = useQuery(
 	})),
 )
 const linkedProjectV3 = computed(() => linkedProjectQuery.data.value ?? undefined)
-const isServerInstance = computed(() => linkedProjectV3.value?.minecraft_server != null)
+const hosting = useHostingInstance(instance, offline)
+const isServerInstance = computed(() => hosting.isHostingInstance.value || linkedProjectV3.value?.minecraft_server != null)
 const processesQuery = useQuery(
 	computed(() => ({
 		...instanceProcessesQueryOptions(instanceId.value),
@@ -338,13 +339,11 @@ const { notifySharedInstanceError, notifySharedInstanceUnavailable } = useShared
 useLoadingBarToken(subpagePending)
 useLoadingBarToken(computed(() => instanceQuery.isPending.value && !instance.value))
 
-const minecraftServer = computed(() => linkedProjectV3.value?.minecraft_server)
+const minecraftServer = computed(() => hosting.isHostingInstance.value
+	? { region: hosting.region.value }
+	: linkedProjectV3.value?.minecraft_server,
+)
 const javaServerPingData = computed(() => linkedProjectV3.value?.minecraft_java_server?.ping?.data)
-const liveServerStatusOnline = ref(false)
-const statusOnline = computed(() => liveServerStatusOnline.value || !!javaServerPingData.value)
-const playersOnline = ref<number | undefined>(undefined)
-const ping = ref<number | undefined>(undefined)
-const loadingServerPing = ref(false)
 const sharedInstanceState = createSharedInstanceContext(
 	instance,
 	offline,
@@ -373,53 +372,19 @@ const sharedInstanceUpdateAvailable = computed(
 		sharedInstanceUpdateKey.value !== hiddenSharedInstanceUpdateKey.value,
 )
 
-function applyServerStatus(status: ServerStatus) {
-	playersOnline.value = status.players?.online
-	ping.value = status.ping
-	liveServerStatusOnline.value = true
-	loadingServerPing.value = true
-}
-
-function resetServerStatus() {
-	ping.value = undefined
-	playersOnline.value = undefined
-	liveServerStatusOnline.value = false
-	loadingServerPing.value = false
-}
-
-const serverAddress = computed(() => linkedProjectV3.value?.minecraft_java_server?.address)
-watch(
-	[instanceId, serverAddress, isServerInstance],
-	([requestedInstanceId, address, serverInstance]) => {
-		resetServerStatus()
-		if (serverInstance && address) {
-			const cachedStatus = getFreshCachedServerStatus(queryClient, address)
-			if (cachedStatus) {
-				applyServerStatus(cachedStatus)
-			} else {
-				playersOnline.value = undefined
-				ping.value = undefined
-				loadingServerPing.value = false
-			}
-
-			fetchCachedServerStatus(queryClient, address)
-				.then((status) => {
-					if (instanceId.value !== requestedInstanceId || serverAddress.value !== address) return
-					applyServerStatus(status)
-				})
-				.catch((error) => {
-					console.error(`Failed to fetch server status for ${address}:`, error)
-				})
-				.finally(() => {
-					if (instanceId.value !== requestedInstanceId) return
-					loadingServerPing.value = true
-				})
-		} else {
-			loadingServerPing.value = true
-		}
-	},
-	{ immediate: true },
-)
+const serverAddress = computed(() => hosting.isHostingInstance.value ? hosting.address.value : linkedProjectV3.value?.minecraft_java_server?.address)
+const serverStatusQuery = useQuery({
+	queryKey: computed(() => getServerStatusQueryKey(serverAddress.value ?? '')),
+	queryFn: () => get_server_status(serverAddress.value!),
+	enabled: computed(() => isServerInstance.value && !!serverAddress.value && !offline.value),
+	staleTime: 30_000,
+	refetchInterval: 30_000,
+	retry: false,
+})
+const statusOnline = computed(() => !serverStatusQuery.isError.value && (!!serverStatusQuery.data.value || !!javaServerPingData.value))
+const playersOnline = computed(() => serverStatusQuery.isError.value ? undefined : serverStatusQuery.data.value?.players?.online)
+const ping = computed(() => serverStatusQuery.isError.value ? undefined : serverStatusQuery.data.value?.ping)
+const loadingServerPing = computed(() => serverStatusQuery.isFetched.value || offline.value)
 
 async function refreshInstance() {
 	await Promise.all([instanceQuery.refetch(), sharedInstanceState.refreshAvailability()])
@@ -538,12 +503,13 @@ watch(
 
 const options = ref<InstanceType<typeof ContextMenu> | null>(null)
 
-const launchInstance = async (context: string) => {
+const launchInstance = async (context: string, address?: string) => {
 	if (!instance.value || instance.value.quarantined) return
 	const currentInstance = instance.value
 	loading.value = true
 	try {
-		await run(currentInstance.id)
+		if (address) await start_join_server(currentInstance.id, address)
+		else await run(currentInstance.id)
 		queryClient.setQueryData(instanceKeys.processes(currentInstance.id), [true])
 	} catch (err) {
 		handleSevereError(err, { instanceId: currentInstance.id })
@@ -597,7 +563,7 @@ function handleSharedInstanceUpdateComplete(successful: boolean) {
 	}
 }
 
-const startInstance = async (context: string) => {
+const startInstance = async (context: string, address?: string) => {
 	if (!instance.value || instance.value.quarantined) return
 	if (checkingSharedInstanceLaunch.value || loading.value || playing.value) return
 
@@ -626,7 +592,7 @@ const startInstance = async (context: string) => {
 		if (preview?.updateAvailable && sharedInstanceUpdateModal.value) {
 			sharedInstanceUpdateModal.value.show(instance.value, preview, async () => {
 				await refreshInstance()
-				await launchInstance(context)
+				await launchInstance(context, address)
 			})
 			return
 		}
@@ -636,7 +602,7 @@ const startInstance = async (context: string) => {
 		if (isSharedInstanceMember) {
 			updateToPlayModal.value.show(instance.value, null, async () => {
 				await refreshInstance()
-				await launchInstance(context)
+				await launchInstance(context, address)
 			})
 		} else {
 			updateToPlayModal.value.show(instance.value)
@@ -644,7 +610,7 @@ const startInstance = async (context: string) => {
 		return
 	}
 
-	await launchInstance(context)
+	await launchInstance(context, address)
 }
 
 const stopInstance = async (context: string) => {
@@ -663,6 +629,10 @@ const stopInstance = async (context: string) => {
 }
 
 const handlePlayServer = async () => {
+	if (hosting.isHostingInstance.value) {
+		if (serverAddress.value) await startInstance('InstancePage', serverAddress.value)
+		return
+	}
 	if (!instance.value?.link?.project_id || instance.value.quarantined) return
 	loading.value = true
 	try {
diff --git a/packages/ui/src/components/project/server/ServerPing.vue b/packages/ui/src/components/project/server/ServerPing.vue
index 1d2198b3aa5..706a7d1f4b3 100644
--- a/packages/ui/src/components/project/server/ServerPing.vue
+++ b/packages/ui/src/components/project/server/ServerPing.vue
@@ -46,7 +46,7 @@ const pingClass = computed(() => {
 </script>
 <template>
 	<TagItem
-		v-if="ping || statusOnline"
+		v-if="ping !== undefined || statusOnline"
 		class="border !border-solid !font-medium w-max"
 		:class="pingClass"
 	>
diff --git a/packages/ui/src/components/project/server/ServerRegion.vue b/packages/ui/src/components/project/server/ServerRegion.vue
index 1bf67167421..8ccfb45c168 100644
--- a/packages/ui/src/components/project/server/ServerRegion.vue
+++ b/packages/ui/src/components/project/server/ServerRegion.vue
@@ -3,10 +3,12 @@ import { computed } from 'vue'
 
 import { defineMessage, useVIntl } from '../../../composables'
 import { SERVER_REGIONS } from '../../../utils'
+import { regionOverrides } from '../../../utils/regions'
 import { TagItem } from '../../base'
 
-const { region } = defineProps<{
+const { region, flagOnly = false } = defineProps<{
 	region: string
+	flagOnly?: boolean
 }>()
 
 const { formatMessage } = useVIntl()
@@ -17,12 +19,22 @@ const tooltip = defineMessage({
 })
 
 const regionName = computed(() => {
+	const hostingRegion = regionOverrides[region as keyof typeof regionOverrides]
+	if (hostingRegion) return formatMessage(hostingRegion.name)
 	const name = SERVER_REGIONS[region]
 	if (name) return formatMessage(name)
 
 	return region
 })
+const regionFlag = computed(() => regionOverrides[region as keyof typeof regionOverrides]?.flag)
 </script>
 <template>
-	<TagItem v-tooltip="formatMessage(tooltip, { regionName })">{{ regionName }}</TagItem>
+	<img
+		v-if="flagOnly && regionFlag"
+		v-tooltip="regionName"
+		:src="regionFlag"
+		:alt="regionName"
+		class="h-4 w-6 rounded-sm object-cover"
+	/>
+	<TagItem v-else v-tooltip="formatMessage(tooltip, { regionName })">{{ regionName }}</TagItem>
 </template>
diff --git a/packages/ui/src/components/servers/admonitions/ServerPanelAdmonitions.vue b/packages/ui/src/components/servers/admonitions/ServerPanelAdmonitions.vue
index a7938c79a9b..7a09eeb172f 100644
--- a/packages/ui/src/components/servers/admonitions/ServerPanelAdmonitions.vue
+++ b/packages/ui/src/components/servers/admonitions/ServerPanelAdmonitions.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
+import { SpinnerIcon, UploadIcon } from '@modrinth/assets'
+import { useIsFetching, useIsMutating } from '@tanstack/vue-query'
 import { computed, reactive, ref } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 
 import Admonition from '#ui/components/base/Admonition.vue'
+import { Button } from '#ui/components/base/buttons'
 import StackedAdmonitions, {
 	type StackedAdmonitionItem,
 } from '#ui/components/base/StackedAdmonitions.vue'
@@ -25,7 +28,22 @@ const { formatMessage } = useVIntl()
 const client = injectModrinthClient()
 const ctx = injectModrinthServerContext()
 const route = useRoute()
+const router = useRouter()
 const { canSetup, canManageBackups, permissionDeniedMessage } = useServerPermissions()
+const needsShareUpdate = computed(() =>
+	ctx.serverFull.value?.worlds.find((world) => world.id === ctx.worldId.value)
+		?.content?.shared_instance_needs_update ?? false,
+)
+const shareActions = useIsMutating({ mutationKey: ['servers', 'share-action', ctx.serverId] })
+const sharePreviews = useIsFetching({ queryKey: ['servers', 'share-diff', ctx.serverId] })
+const sharePending = computed(() => shareActions.value > 0 || sharePreviews.value > 0)
+
+function reviewShareUpdate() {
+	void router.push({
+		path: `/hosting/manage/${encodeURIComponent(ctx.serverId)}/play`,
+		query: { ...route.query, reviewShare: 'true' },
+	})
+}
 
 const { activeOperations, backups, progressFor, invalidate } = useServerBackupsQueue(
 	computed(() => ctx.serverId),
@@ -33,6 +51,26 @@ const { activeOperations, backups, progressFor, invalidate } = useServerBackupsQ
 )
 
 const messages = defineMessages({
+	unpublished: {
+		id: 'app.instance.admonitions.shared-instance.changes-header',
+		defaultMessage: "Your changes haven't been shared yet",
+	},
+	unpublishedBody: {
+		id: 'servers.play.unpublished-body',
+		defaultMessage: 'Push an update to share your server’s content changes with players.',
+	},
+	pushUpdate: {
+		id: 'app.instance.admonitions.shared-instance.publish-button',
+		defaultMessage: 'Push update',
+	},
+	publishing: {
+		id: 'app.instance.admonitions.shared-instance.publishing-button',
+		defaultMessage: 'Pushing...',
+	},
+	reviewing: {
+		id: 'app.instance.admonitions.shared-instance.reviewing-button',
+		defaultMessage: 'Reviewing...',
+	},
 	backgroundTaskRunning: {
 		id: 'servers.admonitions.background-task-running',
 		defaultMessage: 'Background task running',
@@ -139,6 +177,7 @@ type ServerAdmonitionItem = StackedAdmonitionItem & {
 		| { kind: 'backup'; entry: BackupAdmonitionEntry }
 		| { kind: 'busy-content' }
 		| { kind: 'busy-files' }
+		| { kind: 'share-update' }
 	)
 
 const showInstallingBanner = computed(() => {
@@ -246,6 +285,17 @@ const stackItems = computed<ServerAdmonitionItem[]>(() => {
 		})
 	}
 
+	if (needsShareUpdate.value && canSetup.value) {
+		out.push({
+			id: 'share-update',
+			type: 'info',
+			dismissible: false,
+			kind: 'share-update',
+			priority: 3,
+			sortIndex: sortIndex++,
+		})
+	}
+
 	return out.sort((a, b) => a.priority - b.priority || a.sortIndex - b.sortIndex)
 })
 
@@ -367,8 +417,29 @@ function onInstallationDismiss() {
 		@dismiss-all="onDismissAll"
 	>
 		<template #item="{ item, dismissible }">
+			<Admonition
+				v-if="item.kind === 'share-update'"
+				type="info"
+				:header="formatMessage(messages.unpublished)"
+				inline-actions
+			>
+				{{ formatMessage(messages.unpublishedBody) }}
+				<template #actions>
+					<Button
+						type="colored"
+						color="blue"
+						size="lg"
+						:disabled="sharePending || ctx.busyReasons.value.length > 0"
+						@click="reviewShareUpdate"
+					>
+						<SpinnerIcon v-if="sharePending" class="animate-spin" aria-hidden="true" />
+						<UploadIcon v-else aria-hidden="true" />
+						{{ formatMessage(shareActions > 0 ? messages.publishing : sharePreviews > 0 ? messages.reviewing : messages.pushUpdate) }}
+					</Button>
+				</template>
+			</Admonition>
 			<InstallingBanner
-				v-if="item.kind === 'installing'"
+				v-else-if="item.kind === 'installing'"
 				:retry-disabled="!canSetup"
 				:retry-disabled-tooltip="permissionDeniedMessage"
 				@dismiss="onInstallationDismiss"
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/play.vue b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/play.vue
index 111294c9a4e..93d6dc32534 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/play.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/play.vue
@@ -1,15 +1,5 @@
 <template>
 	<div class="flex flex-col gap-6">
-		<Admonition v-if="needsUpdate && canSetup" type="warning" :header="formatMessage(messages.unpublished)" inline-actions>
-			{{ formatMessage(messages.unpublishedBody) }}
-			<template #actions>
-				<Button :disabled="actionsLocked" @click="showPreview()">
-					<SpinnerIcon v-if="previewQuery.isFetching.value || pendingAction === 'push'" class="animate-spin" />
-					<UploadIcon v-else />
-					{{ formatMessage(messages.pushUpdate) }}
-				</Button>
-			</template>
-		</Admonition>
 		<ServerPlayCard
 			:address="serverAddress"
 			:disabled="actionsLocked || !worldId || (!canSetup && !sharedInstanceId)"
@@ -75,6 +65,7 @@ import { SpinnerIcon, UploadIcon } from '@modrinth/assets'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
 import { useStorage } from '@vueuse/core'
 import { computed, nextTick, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 
 import Admonition from '#ui/components/base/Admonition.vue'
 import { Button } from '#ui/components/base/buttons'
@@ -102,6 +93,8 @@ const { handleError } = injectNotificationManager()
 const client = injectModrinthClient()
 const auth = injectAuth()
 const queryClient = useQueryClient()
+const route = useRoute()
+const router = useRouter()
 const { serverId, worldId, server, serverFull, busyReasons } = injectModrinthServerContext()
 const { canSetup } = useServerPermissions()
 const world = computed(() => serverFull.value?.worlds.find((world) => world.id === worldId.value))
@@ -128,6 +121,7 @@ const previewQuery = useQuery({
 	retry: false,
 })
 const actionMutation = useMutation({
+	mutationKey: ['servers', 'share-action', serverId],
 	mutationFn: async ({ action, targetWorldId, userId }: { action: Action; targetWorldId: string; userId: string | undefined }) => {
 		if (busyReasons.value.length) throw new Error(formatMessage(messages.busy))
 		if (auth.user.value?.id !== userId) return
@@ -192,6 +186,27 @@ async function showPreview(playAfter = false) {
 		handleError(result.error)
 	} else diffModal.value?.show()
 }
+const openingRequestedPreview = ref(false)
+watch(
+	[() => route.query.reviewShare, canSetup, sharedInstanceId, actionsLocked],
+	async ([requested, allowed, instanceId, locked]) => {
+		if (requested !== 'true' || !allowed || !instanceId || locked || openingRequestedPreview.value) return
+		openingRequestedPreview.value = true
+		const requestedPath = route.path
+		try {
+			await nextTick()
+			await showPreview()
+		} finally {
+			if (route.path === requestedPath && route.query.reviewShare === 'true') {
+				const query = { ...route.query }
+				delete query.reviewShare
+				await router.replace({ path: route.path, query, hash: route.hash })
+			}
+			openingRequestedPreview.value = false
+		}
+	},
+	{ immediate: true, flush: 'post' },
+)
 function changeMember(userId: string, remove: boolean) {
 	if (!sharedInstanceId.value || players.membershipMutation.isPending.value || !canSetup.value) return
 	players.membershipMutation.mutate({ id: sharedInstanceId.value, userId, remove }, { onError: (error) => handleError(error) })
@@ -219,8 +234,6 @@ watch([worldId, () => auth.user.value?.id], () => {
 })
 const messages = defineMessages({
 	invitedPlayersTitle: { id: 'servers.play.players.title', defaultMessage: 'Invited players' },
-	unpublished: { id: 'servers.play.unpublished', defaultMessage: 'Your changes haven’t been shared yet' },
-	unpublishedBody: { id: 'servers.play.unpublished-body', defaultMessage: 'Push an update to share your content changes with players.' },
 	pushUpdate: { id: 'servers.play.push-update', defaultMessage: 'Push update' },
 	pushAndPlay: { id: 'servers.play.push-and-play', defaultMessage: 'Push update and play' },
 	shareChanges: { id: 'servers.play.share-changes', defaultMessage: 'Share your changes' },

From 14c97a2d1071d9af64c7b227d8fd4443f7bcbaa2 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Wed, 16 Sep 2026 16:41:29 +0100
Subject: [PATCH 09/13] fix:

---
 .../src/helpers/shared-instance-errors.ts     |   9 +-
 .../components/settings-modal/index.vue       |   2 +-
 ...nstance-installation-settings-controls.vue |  71 -----
 .../settings-modal/sharing-settings.vue       | 245 ------------------
 .../settings-modal/sharing-settings/index.vue |  30 +++
 .../sharing-settings/use-sharing-settings.ts  |  98 +++++++
 .../src/pages/instance/share/index.vue        |  35 ++-
 .../src/modules/archon/content/v1.ts          |   9 +
 .../api-client/src/modules/archon/types.ts    |  13 +
 .../src/api/instance/shared/install.rs        |   6 +
 packages/ui/src/components/base/NavTabs.vue   |   8 +-
 .../ui/src/components/base/inputs/Input.vue   |  75 +++---
 .../servers/ServerSettingsModal.vue           |  19 +-
 .../admonitions/ServerPanelAdmonitions.vue    |  91 ++++++-
 .../ui/src/composables/server-panel-sync.ts   |   4 +
 packages/ui/src/layouts/index.ts              |   1 +
 .../shared/server-settings/pages/general.vue  |  46 +---
 .../shared/server-settings/pages/index.ts     |   1 +
 .../shared/server-settings/pages/sharing.vue  |  41 +++
 .../providers/server-settings.ts              |   1 +
 .../layouts/shared/server-settings/tabs.ts    |   9 +
 .../layouts/shared/server-sharing/cache.ts    |  39 +++
 .../layouts/shared/server-sharing/index.ts    |   3 +
 .../shared/server-sharing/query-options.ts    |  13 +
 .../server-sharing/use-server-sharing.ts      | 120 +++++++++
 .../components/active-invites.vue             | 130 ++++++++++
 .../components/revoke-invite-modal.vue        |  42 ++-
 .../components/unpublish-modal.vue            |  67 +++++
 .../layouts/shared/sharing-settings/index.ts  |   3 +
 .../shared/sharing-settings/layout.vue        | 153 +++++++++++
 .../providers/sharing-settings.ts             |  21 ++
 .../layouts/shared/sharing-settings/types.ts  |   6 +
 .../manage/[id]/play/ServerPlayCard.vue       |  27 +-
 .../manage/[id]/play/ServerPlayersTable.vue   |   3 +-
 .../wrapped/hosting/manage/[id]/play/play.vue |  49 +---
 .../hosting/manage/[id]/play/share-diff.ts    |  22 +-
 .../manage/[id]/play/use-server-players.ts    |  42 ++-
 .../layouts/wrapped/hosting/manage/root.vue   |   1 +
 packages/ui/src/utils/truncate.ts             |   8 +-
 standards/frontend/COMPONENT_STRUCTURE.md     |  22 +-
 40 files changed, 1061 insertions(+), 524 deletions(-)
 delete mode 100644 apps/app-frontend/src/pages/instance/components/settings-modal/sharing-settings.vue
 create mode 100644 apps/app-frontend/src/pages/instance/components/settings-modal/sharing-settings/index.vue
 create mode 100644 apps/app-frontend/src/pages/instance/components/settings-modal/sharing-settings/use-sharing-settings.ts
 create mode 100644 packages/ui/src/layouts/shared/server-settings/pages/sharing.vue
 create mode 100644 packages/ui/src/layouts/shared/server-sharing/cache.ts
 create mode 100644 packages/ui/src/layouts/shared/server-sharing/index.ts
 create mode 100644 packages/ui/src/layouts/shared/server-sharing/query-options.ts
 create mode 100644 packages/ui/src/layouts/shared/server-sharing/use-server-sharing.ts
 create mode 100644 packages/ui/src/layouts/shared/sharing-settings/components/active-invites.vue
 rename apps/app-frontend/src/pages/instance/components/settings-modal/confirm-revoke-shared-instance-invite-modal.vue => packages/ui/src/layouts/shared/sharing-settings/components/revoke-invite-modal.vue (72%)
 create mode 100644 packages/ui/src/layouts/shared/sharing-settings/components/unpublish-modal.vue
 create mode 100644 packages/ui/src/layouts/shared/sharing-settings/index.ts
 create mode 100644 packages/ui/src/layouts/shared/sharing-settings/layout.vue
 create mode 100644 packages/ui/src/layouts/shared/sharing-settings/providers/sharing-settings.ts
 create mode 100644 packages/ui/src/layouts/shared/sharing-settings/types.ts

diff --git a/apps/app-frontend/src/helpers/shared-instance-errors.ts b/apps/app-frontend/src/helpers/shared-instance-errors.ts
index b0ce5d0f74d..64126e94fe5 100644
--- a/apps/app-frontend/src/helpers/shared-instance-errors.ts
+++ b/apps/app-frontend/src/helpers/shared-instance-errors.ts
@@ -11,6 +11,10 @@ export const sharedInstanceErrorMessages = defineMessages({
 		id: 'instance.shared-instance.unavailable.title',
 		defaultMessage: 'Shared instance no longer available',
 	},
+	notFoundTitle: {
+		id: 'instance.shared-instance.unavailable.not-found-title',
+		defaultMessage: 'Shared instance unavailable',
+	},
 	lockedTitle: {
 		id: 'instance.shared-instance.unavailable.locked-title',
 		defaultMessage: 'Instance locked',
@@ -21,9 +25,9 @@ export const sharedInstanceErrorMessages = defineMessages({
 			"Your local instance is still available, but it is no longer linked and won't receive updates.",
 	},
 	deletedText: {
-		id: 'instance.shared-instance.unavailable.deleted-text',
+		id: 'instance.shared-instance.unavailable.not-found-text',
 		defaultMessage:
-			'The primary instance was deleted. This instance is still available, but it is no longer linked and will no longer receive updates.',
+			'We couldn’t find this shared instance. Your installed content is still on this device.',
 	},
 	accessRevokedText: {
 		id: 'instance.shared-instance.unavailable.access-revoked-text',
@@ -65,6 +69,7 @@ export function sharedInstanceUnavailableTextMessage(
 export function sharedInstanceUnavailableTitleMessage(
 	reason: SharedInstanceUnavailableReason | null,
 ) {
+	if (reason === 'deleted') return sharedInstanceErrorMessages.notFoundTitle
 	return reason === 'quarantined'
 		? sharedInstanceErrorMessages.lockedTitle
 		: sharedInstanceErrorMessages.unavailableTitle
diff --git a/apps/app-frontend/src/pages/instance/components/settings-modal/index.vue b/apps/app-frontend/src/pages/instance/components/settings-modal/index.vue
index e5c1de4cfc1..562ca044bd7 100644
--- a/apps/app-frontend/src/pages/instance/components/settings-modal/index.vue
+++ b/apps/app-frontend/src/pages/instance/components/settings-modal/index.vue
@@ -22,7 +22,7 @@ import type { GameInstance } from '@/helpers/types'
 import GeneralSettings from './general-settings.vue'
 import InstallationSettings from './installation-settings.vue'
 import { provideInstanceSettings } from './instance-settings-context.ts'
-import SharingSettings from './sharing-settings.vue'
+import SharingSettings from './sharing-settings/index.vue'
 import SyncedOptionsSettings from './synced-options-settings.vue'
 
 const { formatMessage } = useVIntl()
diff --git a/apps/app-frontend/src/pages/instance/components/settings-modal/shared-instance-installation-settings-controls.vue b/apps/app-frontend/src/pages/instance/components/settings-modal/shared-instance-installation-settings-controls.vue
index 62c55c1c797..92d515800e5 100644
--- a/apps/app-frontend/src/pages/instance/components/settings-modal/shared-instance-installation-settings-controls.vue
+++ b/apps/app-frontend/src/pages/instance/components/settings-modal/shared-instance-installation-settings-controls.vue
@@ -1,15 +1,4 @@
 <template>
-	<div v-if="canUnpublish" class="flex flex-col gap-2.5">
-		<span class="text-lg font-semibold text-contrast">{{ formatMessage(messages.title) }}</span>
-		<div>
-			<Button type="colored" color="orange" :disabled="busy" @click="unpublishModal?.show()">
-				<SpinnerIcon v-if="unpublishing" class="animate-spin" />
-				<UnlinkIcon v-else class="size-5" />
-				{{ formatMessage(unpublishing ? messages.unpublishingButton : messages.unpublishButton) }}
-			</Button>
-		</div>
-		<span class="text-primary">{{ formatMessage(messages.unpublishDescription) }}</span>
-	</div>
 	<div v-if="canUnlink" class="flex flex-col gap-2.5">
 		<span class="text-lg font-semibold text-contrast">{{
 			formatMessage(messages.linkedTitle)
@@ -24,25 +13,6 @@
 		<span class="text-primary">{{ formatMessage(messages.unlinkDescription) }}</span>
 	</div>
 
-	<NewModal
-		ref="unpublishModal"
-		:header="formatMessage(messages.unpublishModalHeader)"
-		fade="warning"
-		max-width="500px"
-	>
-		<Admonition type="warning" :header="formatMessage(messages.unpublishModalAdmonitionHeader)">{{
-			formatMessage(messages.unpublishModalBody)
-		}}</Admonition>
-		<template #actions
-			><div class="flex justify-end gap-2">
-				<Button type="outlined" class="!border" @click="unpublishModal?.hide()">
-					<XIcon />{{ formatMessage(commonMessages.cancelButton) }} </Button
-				><Button type="colored" color="orange" :disabled="busy" @click="confirmUnpublish">
-					<UnlinkIcon />{{ formatMessage(messages.unpublishButton) }}
-				</Button>
-			</div></template
-		>
-	</NewModal>
 	<NewModal
 		ref="unlinkModal"
 		:header="formatMessage(messages.unlinkModalHeader)"
@@ -92,60 +62,32 @@ import { ref } from 'vue'
 
 const props = withDefaults(
 	defineProps<{
-		canUnpublish?: boolean
 		canUnlink?: boolean
 		busy: boolean
-		unpublishing?: boolean
 		unlinking?: boolean
-		unpublish?: () => Promise<void>
 		unlink?: () => Promise<void>
 	}>(),
 	{
-		canUnpublish: false,
 		canUnlink: false,
-		unpublishing: false,
 		unlinking: false,
-		unpublish: undefined,
 		unlink: undefined,
 	},
 )
 const { formatMessage } = useVIntl()
-const unpublishModal = ref<InstanceType<typeof NewModal>>()
 const unlinkModal = ref<InstanceType<typeof NewModal>>()
 const backupCreator = ref<InstanceType<typeof InlineBackupCreator>>()
 const backupBusy = ref(false)
 
-async function confirmUnpublish() {
-	unpublishModal.value?.hide()
-	await props.unpublish?.()
-}
 async function confirmUnlink() {
 	unlinkModal.value?.hide()
 	await props.unlink?.()
 }
 
 const messages = defineMessages({
-	title: {
-		id: 'installation-settings.shared-instance.title',
-		defaultMessage: 'Unpublish instance',
-	},
 	linkedTitle: {
 		id: 'installation-settings.shared-instance.linked-title',
 		defaultMessage: 'Linked shared instance',
 	},
-	unpublishButton: {
-		id: 'installation-settings.shared-instance.unpublish-button',
-		defaultMessage: 'Unpublish shared instance',
-	},
-	unpublishingButton: {
-		id: 'installation-settings.shared-instance.unpublishing-button',
-		defaultMessage: 'Unpublishing...',
-	},
-	unpublishDescription: {
-		id: 'installation-settings.shared-instance.unpublish-description',
-		defaultMessage:
-			'Remove this shared instance from Modrinth and stop sending updates to anyone using it. Your local instance will not be affected.',
-	},
 	unlinkButton: {
 		id: 'installation-settings.shared-instance.unlink-button',
 		defaultMessage: 'Unlink shared instance',
@@ -158,19 +100,6 @@ const messages = defineMessages({
 		id: 'installation-settings.shared-instance.unlink-description',
 		defaultMessage: 'Disconnect this local instance from future shared updates.',
 	},
-	unpublishModalHeader: {
-		id: 'installation-settings.unpublish-shared-instance.modal.header',
-		defaultMessage: 'Unpublish shared instance',
-	},
-	unpublishModalAdmonitionHeader: {
-		id: 'installation-settings.unpublish-shared-instance.modal.admonition-header',
-		defaultMessage: 'Unpublishing shared instance',
-	},
-	unpublishModalBody: {
-		id: 'installation-settings.unpublish-shared-instance.modal.admonition-body',
-		defaultMessage:
-			"This deletes the shared instance from Modrinth's servers. People using it in the Modrinth App will stop receiving updates, but your local instance and its content will stay on this device.",
-	},
 	unlinkModalHeader: {
 		id: 'installation-settings.unlink-shared-instance.modal.header',
 		defaultMessage: 'Unlink shared instance',
diff --git a/apps/app-frontend/src/pages/instance/components/settings-modal/sharing-settings.vue b/apps/app-frontend/src/pages/instance/components/settings-modal/sharing-settings.vue
deleted file mode 100644
index e4f75271704..00000000000
--- a/apps/app-frontend/src/pages/instance/components/settings-modal/sharing-settings.vue
+++ /dev/null
@@ -1,245 +0,0 @@
-<template>
-	<div class="flex flex-col gap-8">
-		<section class="flex flex-col gap-4">
-			<div class="flex flex-col gap-1">
-				<h3 class="m-0 text-lg font-semibold text-contrast">
-					{{ formatMessage(messages.activeInvitesTitle) }}
-				</h3>
-				<p class="m-0 text-secondary">
-					{{ formatMessage(messages.activeInvitesDescription) }}
-				</p>
-			</div>
-
-			<Table :columns="inviteColumns" :data="activeInvites" row-key="id" table-min-width="36rem">
-				<template #empty-state>
-					<div class="flex h-40 items-center justify-center text-secondary">
-						<SpinnerIcon
-							v-if="activeInvitesQuery.isLoading.value"
-							class="animate-spin"
-							aria-hidden="true"
-						/>
-						<template v-else>
-							{{ formatMessage(messages.noActiveInvites) }}
-						</template>
-					</div>
-				</template>
-				<template #cell-id="{ row }">
-					<CopyCode
-						:text="`${config.siteUrl}/share/${encodeURIComponent(row.id)}`"
-						:display-text="`/${row.id}`"
-					/>
-				</template>
-				<template #cell-uses="{ row }">
-					<span class="font-medium text-primary">{{ row.uses }}</span>
-					<span> / {{ row.maxUses }}</span>
-				</template>
-				<template #cell-expiration="{ row }">
-					<span v-tooltip="formatDateTime(row.expiration)" class="whitespace-nowrap">
-						{{ formatRelativeTime(row.expiration) }}
-					</span>
-				</template>
-				<template #cell-actions="{ row }">
-					<div class="flex justify-end">
-						<IconButton
-							v-tooltip="formatMessage(messages.revokeInvite)"
-							type="quiet"
-							:label="
-								formatMessage(messages.revokeInviteWithCode, {
-									code: row.id,
-								})
-							"
-							:disabled="revokeInviteMutation.isPending.value || isBusy"
-							class="text-secondary hover:!filter-none hover:text-red focus-visible:!filter-none"
-							@click="revokeInviteModal?.show(row.id)"
-						>
-							<SpinnerIcon
-								v-if="
-									revokeInviteMutation.isPending.value &&
-									revokeInviteMutation.variables.value?.inviteId === row.id
-								"
-								class="animate-spin"
-								aria-hidden="true"
-							/>
-							<XIcon v-else aria-hidden="true" />
-						</IconButton>
-					</div>
-				</template>
-			</Table>
-		</section>
-
-		<SharedInstanceInstallationSettingsControls
-			can-unpublish
-			:busy="isBusy"
-			:unpublishing="unpublishing"
-			:unpublish="unpublishSharedInstance"
-		/>
-
-		<ConfirmRevokeSharedInstanceInviteModal ref="revokeInviteModal" @revoke="revokeInvite" />
-	</div>
-</template>
-
-<script setup lang="ts">
-import { SpinnerIcon, XIcon } from '@modrinth/assets'
-import { IconButton } from '@modrinth/ui'
-import {
-	CopyCode,
-	defineMessages,
-	Table,
-	type TableColumn,
-	useFormatDateTime,
-	useRelativeTime,
-	useVIntl,
-} from '@modrinth/ui'
-import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
-import { computed, ref } from 'vue'
-
-import { config } from '@/config'
-import {
-	get_shared_instance_invites,
-	revoke_shared_instance_invite,
-	type SharedInstanceInvite,
-	unpublish_shared_instance,
-} from '@/helpers/instance'
-import { useSharedInstanceErrors } from '@/helpers/shared-instance-errors'
-
-import { instanceKeys } from '../../query-options.ts'
-import ConfirmRevokeSharedInstanceInviteModal from './confirm-revoke-shared-instance-invite-modal.vue'
-import { injectInstanceSettings } from './instance-settings-context.ts'
-import SharedInstanceInstallationSettingsControls from './shared-instance-installation-settings-controls.vue'
-
-const { instance, offline, onUnlinked } = injectInstanceSettings()
-const { notifySharedInstanceError } = useSharedInstanceErrors()
-const { formatMessage } = useVIntl()
-const queryClient = useQueryClient()
-const unpublishing = ref(false)
-const revokeInviteModal = ref<InstanceType<typeof ConfirmRevokeSharedInstanceInviteModal>>()
-const formatRelativeTime = useRelativeTime()
-const formatDateTime = useFormatDateTime({ dateStyle: 'medium', timeStyle: 'short' })
-
-type InviteTableColumn = 'id' | 'uses' | 'expiration' | 'actions'
-type ActiveInvitesQueryKey = readonly ['sharedInstanceInvites', string]
-
-const activeInvitesQueryKey = computed(
-	() => ['sharedInstanceInvites', instance.value.id] as const satisfies ActiveInvitesQueryKey,
-)
-const activeInvitesQuery = useQuery({
-	queryKey: activeInvitesQueryKey,
-	queryFn: async ({ queryKey }) => {
-		try {
-			return await get_shared_instance_invites(queryKey[1])
-		} catch (error) {
-			notifySharedInstanceError(error)
-			throw error
-		}
-	},
-	enabled: () => !!instance.value.id && !offline,
-	retry: false,
-	staleTime: Infinity,
-	refetchOnMount: 'always',
-	refetchOnReconnect: false,
-	refetchOnWindowFocus: false,
-})
-const activeInvites = computed(() => activeInvitesQuery.data.value ?? [])
-
-const revokeInviteMutation = useMutation({
-	mutationFn: ({ instanceId, inviteId }: { instanceId: string; inviteId: string }) =>
-		revoke_shared_instance_invite(instanceId, inviteId),
-	onSuccess: (_data, { instanceId, inviteId }) => {
-		queryClient.setQueryData<SharedInstanceInvite[]>(
-			['sharedInstanceInvites', instanceId],
-			(invites = []) => invites.filter((invite) => invite.id !== inviteId),
-		)
-	},
-	onError: notifySharedInstanceError,
-})
-
-const isBusy = computed(
-	() =>
-		instance.value.install_stage !== 'installed' ||
-		unpublishing.value ||
-		revokeInviteMutation.isPending.value ||
-		!!offline,
-)
-
-const inviteColumns = computed<TableColumn<InviteTableColumn>[]>(() => [
-	{
-		key: 'id',
-		label: formatMessage(messages.inviteCodeLabel),
-		width: 'clamp(11rem, 34%, 19rem)',
-	},
-	{
-		key: 'uses',
-		label: formatMessage(messages.usesLabel),
-		width: 'clamp(7rem, 18%, 10rem)',
-	},
-	{
-		key: 'expiration',
-		label: formatMessage(messages.expiresLabel),
-		width: 'clamp(9rem, 28%, 14rem)',
-	},
-	{
-		key: 'actions',
-		label: formatMessage(messages.actionsLabel),
-		align: 'right',
-		width: '5.5rem',
-	},
-])
-
-function revokeInvite(inviteId: string) {
-	if (revokeInviteMutation.isPending.value) return
-	revokeInviteMutation.mutate({ instanceId: instance.value.id, inviteId })
-}
-
-async function unpublishSharedInstance() {
-	unpublishing.value = true
-	try {
-		await unpublish_shared_instance(instance.value.id)
-		queryClient.setQueryData(instanceKeys.sharedMembers(instance.value.id), [])
-		await queryClient.invalidateQueries({ queryKey: ['linkedModpackInfo', instance.value.id] })
-		onUnlinked()
-	} catch (error) {
-		notifySharedInstanceError(error)
-	} finally {
-		unpublishing.value = false
-	}
-}
-
-const messages = defineMessages({
-	activeInvitesTitle: {
-		id: 'instance.settings.sharing.active-invites.title',
-		defaultMessage: 'Active invites',
-	},
-	activeInvitesDescription: {
-		id: 'instance.settings.sharing.active-invites.description',
-		defaultMessage: 'Anyone with one of these invite links can join while it remains active.',
-	},
-	inviteCodeLabel: {
-		id: 'instance.settings.sharing.active-invites.code',
-		defaultMessage: 'Invite link',
-	},
-	usesLabel: {
-		id: 'instance.settings.sharing.active-invites.uses',
-		defaultMessage: 'Uses',
-	},
-	expiresLabel: {
-		id: 'instance.settings.sharing.active-invites.expires',
-		defaultMessage: 'Expires',
-	},
-	actionsLabel: {
-		id: 'instance.settings.sharing.active-invites.actions',
-		defaultMessage: 'Actions',
-	},
-	noActiveInvites: {
-		id: 'instance.settings.sharing.active-invites.empty',
-		defaultMessage: 'There are no active invites.',
-	},
-	revokeInvite: {
-		id: 'instance.settings.sharing.active-invites.revoke',
-		defaultMessage: 'Revoke invite',
-	},
-	revokeInviteWithCode: {
-		id: 'instance.settings.sharing.active-invites.revoke-with-code',
-		defaultMessage: 'Revoke invite {code}',
-	},
-})
-</script>
diff --git a/apps/app-frontend/src/pages/instance/components/settings-modal/sharing-settings/index.vue b/apps/app-frontend/src/pages/instance/components/settings-modal/sharing-settings/index.vue
new file mode 100644
index 00000000000..e65bd8f71c0
--- /dev/null
+++ b/apps/app-frontend/src/pages/instance/components/settings-modal/sharing-settings/index.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { defineMessages, provideSharingSettings, SharingSettingsLayout } from '@modrinth/ui'
+
+import { config } from '@/config'
+
+import { useInstanceSharingSettings } from './use-sharing-settings'
+
+provideSharingSettings(useInstanceSharingSettings())
+
+const messages = defineMessages({
+	unpublishDescription: {
+		id: 'installation-settings.shared-instance.unpublish-description',
+		defaultMessage:
+			'Remove this shared instance from Modrinth and stop sending updates to anyone using it. Your local instance will not be affected.',
+	},
+	unpublishConfirmation: {
+		id: 'installation-settings.unpublish-shared-instance.modal.admonition-body',
+		defaultMessage:
+			"This deletes the shared instance from Modrinth's servers. People using it in the Modrinth App will stop receiving updates, but your local instance and its content will stay on this device.",
+	},
+})
+</script>
+
+<template>
+	<SharingSettingsLayout
+		:site-url="config.siteUrl"
+		:unpublish-description="messages.unpublishDescription"
+		:unpublish-confirmation="messages.unpublishConfirmation"
+	/>
+</template>
diff --git a/apps/app-frontend/src/pages/instance/components/settings-modal/sharing-settings/use-sharing-settings.ts b/apps/app-frontend/src/pages/instance/components/settings-modal/sharing-settings/use-sharing-settings.ts
new file mode 100644
index 00000000000..45dc2da233a
--- /dev/null
+++ b/apps/app-frontend/src/pages/instance/components/settings-modal/sharing-settings/use-sharing-settings.ts
@@ -0,0 +1,98 @@
+import { injectAuth, type SharingSettingsContext } from '@modrinth/ui'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import { computed } from 'vue'
+
+import {
+	get_shared_instance_invites,
+	revoke_shared_instance_invite,
+	type SharedInstanceInvite,
+	unpublish_shared_instance,
+} from '@/helpers/instance'
+import { useSharedInstanceErrors } from '@/helpers/shared-instance-errors'
+
+import { instanceKeys } from '../../../query-options.ts'
+import { injectInstanceSettings } from '../instance-settings-context.ts'
+
+export function useInstanceSharingSettings(): SharingSettingsContext {
+	const { instance, offline, onUnlinked } = injectInstanceSettings()
+	const auth = injectAuth()
+	const { notifySharedInstanceError } = useSharedInstanceErrors()
+	const queryClient = useQueryClient()
+	const targetKey = computed(() => {
+		const sharedInstance = instance.value.shared_instance
+		return sharedInstance?.role === 'owner' && !instance.value.quarantined && auth.user.value
+			? JSON.stringify([instance.value.id, sharedInstance.id, auth.user.value.id])
+			: null
+	})
+	const invitesKey = computed(
+		() => ['sharedInstanceInvites', instance.value.id, auth.user.value?.id] as const,
+	)
+	const invites = useQuery({
+		queryKey: invitesKey,
+		queryFn: ({ queryKey }) => get_shared_instance_invites(queryKey[1]),
+		enabled: () => !!targetKey.value && !offline,
+		retry: false,
+		staleTime: Infinity,
+		refetchOnMount: 'always',
+		refetchOnReconnect: false,
+		refetchOnWindowFocus: false,
+	})
+
+	type ShareTarget = {
+		instanceId: string
+		invitesKey: typeof invitesKey.value
+	}
+	const revokeMutation = useMutation({
+		mutationFn: (target: ShareTarget & { inviteId: string }) =>
+			revoke_shared_instance_invite(target.instanceId, target.inviteId),
+		onSuccess: (_data, target) => {
+			queryClient.setQueryData<SharedInstanceInvite[]>(target.invitesKey, (current = []) =>
+				current.filter((invite) => invite.id !== target.inviteId),
+			)
+		},
+	})
+	const unpublishMutation = useMutation({
+		mutationFn: (target: ShareTarget) => unpublish_shared_instance(target.instanceId),
+		onSuccess: async (_data, target) => {
+			queryClient.setQueryData(instanceKeys.sharedMembers(target.instanceId), [])
+			queryClient.setQueryData(target.invitesKey, [])
+			await queryClient.invalidateQueries({ queryKey: ['linkedModpackInfo', target.instanceId] })
+			if (target.instanceId === instance.value.id && target.invitesKey[2] === auth.user.value?.id) {
+				onUnlinked()
+			}
+		},
+	})
+	const busy = computed(
+		() =>
+			!targetKey.value ||
+			!!offline ||
+			instance.value.install_stage !== 'installed' ||
+			revokeMutation.isPending.value ||
+			unpublishMutation.isPending.value,
+	)
+
+	function currentTarget(expectedKey: string): ShareTarget | undefined {
+		if (busy.value || expectedKey !== targetKey.value) return
+		return { instanceId: instance.value.id, invitesKey: invitesKey.value }
+	}
+
+	return {
+		targetKey,
+		invites: computed(() => invites.data.value ?? []),
+		loading: invites.isLoading,
+		error: invites.error,
+		busy,
+		refresh: async () => {
+			if (targetKey.value && !offline) await invites.refetch()
+		},
+		revokeInvite: async (inviteId, expectedKey) => {
+			const target = currentTarget(expectedKey)
+			if (target) await revokeMutation.mutateAsync({ ...target, inviteId })
+		},
+		unpublish: async (expectedKey) => {
+			const target = currentTarget(expectedKey)
+			if (target) await unpublishMutation.mutateAsync(target)
+		},
+		onError: notifySharedInstanceError,
+	}
+}
diff --git a/apps/app-frontend/src/pages/instance/share/index.vue b/apps/app-frontend/src/pages/instance/share/index.vue
index d88eed0d3ce..d889a75de13 100644
--- a/apps/app-frontend/src/pages/instance/share/index.vue
+++ b/apps/app-frontend/src/pages/instance/share/index.vue
@@ -57,16 +57,19 @@
 
 		<SharedInstanceMembersTable v-else-if="showMembersTable" />
 
-		<SharedInstanceShareEmptyState
+		<Admonition
 			v-else-if="sharedInstanceUnavailable"
-			:heading="formatMessage(sharedInstanceErrorMessages.unavailableTitle)"
-			:description="
-				formatSharedInstanceUnavailable(
-					sharedInstanceUnavailableReason,
-					sharedInstanceUnavailableManager,
-				)
-			"
-		/>
+			type="warning"
+			:header="formatMessage(sharedInstanceUnavailableTitleMessage(sharedInstanceUnavailableReason))"
+		>
+			{{ formatSharedInstanceUnavailable(sharedInstanceUnavailableReason, sharedInstanceUnavailableManager) }}
+			<template #actions>
+				<Button :disabled="retryingAvailability" @click="retryAvailability">
+					<SpinnerIcon v-if="retryingAvailability" class="animate-spin" aria-hidden="true" />
+					{{ formatMessage(commonMessages.retryButton) }}
+				</Button>
+			</template>
+		</Admonition>
 
 		<SharedInstanceShareEmptyState
 			v-else-if="sharedInstanceActionsLocked"
@@ -131,8 +134,10 @@
 <script setup lang="ts">
 import { LogInIcon, SpinnerIcon, UserPlusIcon } from '@modrinth/assets'
 import {
+	Admonition,
 	Avatar,
 	Button,
+	commonMessages,
 	ConfirmUnlinkModal,
 	defineMessages,
 	injectAuth,
@@ -154,7 +159,7 @@ import {
 import { edit } from '@/helpers/instance'
 import type { ModrinthAuthFlow } from '@/helpers/mr_auth.ts'
 import {
-	sharedInstanceErrorMessages,
+	sharedInstanceUnavailableTitleMessage,
 	useSharedInstanceErrors,
 } from '@/helpers/shared-instance-errors'
 
@@ -185,6 +190,16 @@ const actionsLocked = sharedInstanceState.shareActionsLocked
 const sharedInstanceActionsLocked = actionsLocked
 const currentUserId = computed(() => auth.user.value?.id ?? null)
 const isSignedIn = computed(() => !!auth.session_token.value)
+const retryingAvailability = ref(false)
+async function retryAvailability() {
+	if (retryingAvailability.value) return
+	retryingAvailability.value = true
+	try {
+		await sharedInstanceState.refreshAvailability()
+	} finally {
+		retryingAvailability.value = false
+	}
+}
 const sharedInstancesApiUnavailable = ref(false)
 const accountRequiredModal = ref<InstanceType<typeof ModrinthAccountRequiredModal>>()
 const invitePlayersModal = ref<InstanceType<typeof InvitePlayersModal>>()
diff --git a/packages/api-client/src/modules/archon/content/v1.ts b/packages/api-client/src/modules/archon/content/v1.ts
index 1720d758b78..ccb7a03fe68 100644
--- a/packages/api-client/src/modules/archon/content/v1.ts
+++ b/packages/api-client/src/modules/archon/content/v1.ts
@@ -18,6 +18,15 @@ export class ArchonContentV1Module extends AbstractModule {
 		})
 	}
 
+	public async unshare(serverId: string, worldId: string): Promise<void> {
+		return this.client.request(`/servers/${encodeURIComponent(serverId)}/worlds/${encodeURIComponent(worldId)}/content/share`, {
+			api: 'archon',
+			version: 1,
+			method: 'DELETE',
+			retry: false,
+		})
+	}
+
 	/** GET /v1/:server_id/worlds/:world_id/addons */
 	public async getAddons(
 		serverId: string,
diff --git a/packages/api-client/src/modules/archon/types.ts b/packages/api-client/src/modules/archon/types.ts
index 22c68532943..b8602783058 100644
--- a/packages/api-client/src/modules/archon/types.ts
+++ b/packages/api-client/src/modules/archon/types.ts
@@ -306,6 +306,12 @@ export namespace Archon {
 				local_updated_at: string
 				has_changes: boolean
 				diffs: SharedContentDiffEntry[]
+				projects: Record<string, { name: string; icon_url: string | null }>
+				versions: Record<string, {
+					project_id: string
+					name: string
+					version_number: string | null
+				}>
 			}
 
 			export type AddonKind = 'mod' | 'plugin' | 'datapack' | 'shader' | 'resourcepack'
@@ -1172,6 +1178,12 @@ export namespace Archon {
 				needs_update: boolean
 			}
 
+			export type WorldSharedInstanceDeleteEvent = {
+				type: 'world.shared_instance.delete'
+				world_id: string
+				shared_instance_id: string
+			}
+
 			export type SyncEvent =
 				| ProtocolResetEvent
 				| ProtocolInvalidEvent
@@ -1192,6 +1204,7 @@ export namespace Archon {
 				| WorldContentBaseUpdateEvent
 				| WorldContentUpdateEvent
 				| WorldSharedInstanceUpdateEvent
+				| WorldSharedInstanceDeleteEvent
 		}
 	}
 
diff --git a/packages/app-lib/src/api/instance/shared/install.rs b/packages/app-lib/src/api/instance/shared/install.rs
index f2de99b2c4f..ea422033e28 100644
--- a/packages/app-lib/src/api/instance/shared/install.rs
+++ b/packages/app-lib/src/api/instance/shared/install.rs
@@ -439,6 +439,12 @@ pub(super) async fn handle_unavailable_shared_instance_if_current_user(
     reason: SharedInstanceUnavailableReason,
     state: &State,
 ) -> crate::Result<()> {
+	// A missing ID can belong to another API environment. Keep the attachment
+	// so opening a production instance in a staging build cannot unlink it.
+	if reason == SharedInstanceUnavailableReason::Deleted {
+		return Ok(());
+	}
+
     if reason != SharedInstanceUnavailableReason::Quarantined
         && !shared_attachment_matches_current_user(attachment, state).await?
     {
diff --git a/packages/ui/src/components/base/NavTabs.vue b/packages/ui/src/components/base/NavTabs.vue
index 1958a4498b8..b74ecd34e6a 100644
--- a/packages/ui/src/components/base/NavTabs.vue
+++ b/packages/ui/src/components/base/NavTabs.vue
@@ -182,6 +182,8 @@ function computeActiveIndex(): { index: number; isSubpage: boolean } {
 		}
 	}
 
+	let subpageIndex = -1
+
 	for (let i = filteredLinks.value.length - 1; i >= 0; i--) {
 		const link = filteredLinks.value[i]
 		const decodedPath = decodeURIComponent(route.path)
@@ -204,12 +206,12 @@ function computeActiveIndex(): { index: number; isSubpage: boolean } {
 				(decodedPath.length === decodedHref.length || decodedPath[decodedHref.length] === '/')) ||
 			link.subpages?.some((subpage) => decodedPath.includes(subpage))
 
-		if (isSubpageMatch) {
-			return { index: i, isSubpage: true }
+		if (isSubpageMatch && subpageIndex === -1) {
+			subpageIndex = i
 		}
 	}
 
-	return { index: -1, isSubpage: false }
+	return { index: subpageIndex, isSubpage: subpageIndex !== -1 }
 }
 
 function getTabElement(index: number): HTMLElement | null {
diff --git a/packages/ui/src/components/base/inputs/Input.vue b/packages/ui/src/components/base/inputs/Input.vue
index ab805a9aa0f..9f1b5d5cf71 100644
--- a/packages/ui/src/components/base/inputs/Input.vue
+++ b/packages/ui/src/components/base/inputs/Input.vue
@@ -28,35 +28,52 @@
 					<slot name="prefix" />
 				</span>
 
-				<input
-					v-bind="mergeProps(controlAttrs(), inputAttrs ?? {})"
-					:id="id"
-					ref="inputRef"
-					:type="type"
-					:value="model"
-					:placeholder="placeholder"
-					:disabled="disabled"
-					:readonly="readonly"
-					:name="name"
-					:autocomplete="autocomplete"
-					:autocorrect="autocorrect"
-					:autocapitalize="autocapitalize"
-					:spellcheck="spellcheck"
-					:inputmode="inputmode"
-					:maxlength="maxlength"
-					:min="min"
-					:max="max"
-					:step="step"
-					:aria-invalid="error || undefined"
-					class="min-w-0 w-full flex-1 appearance-none !min-h-0 !border-0 !bg-transparent !p-0 font-medium text-primary !shadow-none !outline-none placeholder:text-secondary focus:text-contrast focus:ring-0"
-					:class="[
-						inputClass,
-						controlClass,
-						size === 'small' ? 'text-sm' : 'text-base',
-						disabled ? 'cursor-not-allowed' : '',
-					]"
-					@input="onInput"
-				/>
+				<div :class="$slots.suffix ? 'grid min-w-0' : 'contents'">
+					<span
+						v-if="$slots.suffix"
+						aria-hidden="true"
+						class="pointer-events-none invisible col-start-1 row-start-1 whitespace-pre font-medium"
+						:class="[size === 'small' ? 'text-sm' : 'text-base', inputClass, controlClass]"
+					>{{ hasValue ? model : placeholder || ' ' }}</span
+					>
+					<input
+						v-bind="mergeProps(controlAttrs(), inputAttrs ?? {})"
+						:id="id"
+						ref="inputRef"
+						:type="type"
+						:value="model"
+						:placeholder="placeholder"
+						:disabled="disabled"
+						:readonly="readonly"
+						:name="name"
+						:autocomplete="autocomplete"
+						:autocorrect="autocorrect"
+						:autocapitalize="autocapitalize"
+						:spellcheck="spellcheck"
+						:inputmode="inputmode"
+						:maxlength="maxlength"
+						:min="min"
+						:max="max"
+						:step="step"
+						:aria-invalid="error || undefined"
+						class="min-w-0 appearance-none !min-h-0 !border-0 !bg-transparent !p-0 font-medium text-primary !shadow-none !outline-none placeholder:text-secondary focus:text-contrast focus:ring-0"
+						:class="[
+							$slots.suffix ? 'col-start-1 row-start-1 w-0 !min-w-full' : 'w-full flex-1',
+							inputClass,
+							controlClass,
+							size === 'small' ? 'text-sm' : 'text-base',
+							disabled ? 'cursor-not-allowed' : '',
+						]"
+						@input="onInput"
+					/>
+				</div>
+				<span
+					v-if="$slots.suffix"
+					class="shrink-0 font-medium text-secondary opacity-60 transition-colors group-focus-within/input:text-contrast group-focus-within/input:opacity-100"
+					:class="size === 'small' ? 'text-sm' : 'text-base'"
+				>
+					<slot name="suffix" />
+				</span>
 			</div>
 		</div>
 
diff --git a/packages/ui/src/components/servers/ServerSettingsModal.vue b/packages/ui/src/components/servers/ServerSettingsModal.vue
index 1f6f66ca2bb..ac93c46960f 100644
--- a/packages/ui/src/components/servers/ServerSettingsModal.vue
+++ b/packages/ui/src/components/servers/ServerSettingsModal.vue
@@ -2,7 +2,7 @@
 import type { Archon } from '@modrinth/api-client'
 import { ChevronRightIcon } from '@modrinth/assets'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
-import { computed, nextTick, ref } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 
 import type { TabbedModalTab } from '#ui/components'
 import { TabbedModal } from '#ui/components'
@@ -13,6 +13,7 @@ import {
 	ServerSettingsInstallationPage,
 	ServerSettingsNetworkPage,
 	ServerSettingsPropertiesPage,
+	ServerSettingsSharingPage,
 	serverSettingsTabDefinitions,
 	type ServerSettingsTabId,
 } from '#ui/layouts/shared/server-settings'
@@ -31,6 +32,7 @@ type ShowOptions = {
 }
 
 const props = defineProps<{
+	siteUrl?: string
 	resolveViewer: () => Promise<{ userId: string | null; userRole: string | null }>
 	browseModpacks?: (args: {
 		serverId: string
@@ -53,7 +55,7 @@ const messages = defineMessages({
 
 const modal = ref<InstanceType<typeof TabbedModal> | null>(null)
 
-const { serverId: currentServerId, worldId, server } = injectModrinthServerContext()
+const { serverId: currentServerId, worldId, server, serverFull } = injectModrinthServerContext()
 
 const currentUserId = ref<string | null>(null)
 const currentUserRole = ref<string | null>(null)
@@ -74,6 +76,7 @@ useQuery({
 const serverSettingsTabComponentMap = {
 	general: ServerSettingsGeneralPage,
 	installation: ServerSettingsInstallationPage,
+	sharing: ServerSettingsSharingPage,
 	network: ServerSettingsNetworkPage,
 	properties: ServerSettingsPropertiesPage,
 	advanced: ServerSettingsAdvancedPage,
@@ -83,6 +86,7 @@ const saveBannerTarget = ref<HTMLElement | null>(null)
 const saveBannerShown = ref(false)
 
 provideServerSettings({
+	siteUrl: computed(() => (props.siteUrl ?? 'https://modrinth.com').replace(/\/$/, '')),
 	isApp,
 	currentUserId,
 	currentUserRole,
@@ -103,6 +107,8 @@ const tabs = computed<TabbedModalTab[]>(() =>
 			serverStatus: server.value?.status,
 			isOwner: isOwner.value,
 			isAdmin: isAdmin.value,
+			isShared: !!serverFull.value?.worlds.find((world) => world.id === worldId.value)?.content
+				?.shared_instance_id,
 		}
 		const name = defineMessage({
 			id: `server.settings.tabs.${tab.id}`,
@@ -128,6 +134,15 @@ const tabs = computed<TabbedModalTab[]>(() =>
 	}),
 )
 
+watch(tabs, (currentTabs, previousTabs) => {
+	if (!modal.value) return
+	const selectedTab = previousTabs.filter((tab) => tab.shown !== false)[modal.value.selectedTab]
+	const selectedIndex = currentTabs
+		.filter((tab) => tab.shown !== false)
+		.findIndex((tab) => tab.content === selectedTab?.content)
+	modal.value.setTab(Math.max(selectedIndex, 0))
+})
+
 async function fetchViewer() {
 	currentUserId.value = null
 	currentUserRole.value = null
diff --git a/packages/ui/src/components/servers/admonitions/ServerPanelAdmonitions.vue b/packages/ui/src/components/servers/admonitions/ServerPanelAdmonitions.vue
index 7a09eeb172f..08a45cfab50 100644
--- a/packages/ui/src/components/servers/admonitions/ServerPanelAdmonitions.vue
+++ b/packages/ui/src/components/servers/admonitions/ServerPanelAdmonitions.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { SpinnerIcon, UploadIcon } from '@modrinth/assets'
-import { useIsFetching, useIsMutating } from '@tanstack/vue-query'
-import { computed, reactive, ref } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useIsFetching, useIsMutating, useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import { computed, reactive, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
 
 import Admonition from '#ui/components/base/Admonition.vue'
 import { Button } from '#ui/components/base/buttons'
@@ -14,12 +14,16 @@ import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { useServerBackupsQueue } from '#ui/composables/server-backups-queue'
 import { useServerPermissions } from '#ui/composables/server-permissions'
 import type { FileOperation } from '#ui/layouts/shared/files-tab/types'
-import { injectModrinthClient, injectModrinthServerContext } from '#ui/providers'
+import ContentDiffModal from '#ui/layouts/shared/installation-settings/components/ContentDiffModal.vue'
+import { resolveServerShareDiff } from '#ui/layouts/wrapped/hosting/manage/[id]/play/share-diff'
+import { injectAuth, injectModrinthClient, injectModrinthServerContext, injectNotificationManager } from '#ui/providers'
 
 import BackupAdmonition, { type BackupAdmonitionEntry } from './BackupAdmonition.vue'
 import FileOperationAdmonition from './FileOperationAdmonition.vue'
 import UploadAdmonition from './UploadAdmonition.vue'
 
+defineOptions({ inheritAttrs: false })
+
 const emit = defineEmits<{
 	'installation-retry': []
 }>()
@@ -28,7 +32,9 @@ const { formatMessage } = useVIntl()
 const client = injectModrinthClient()
 const ctx = injectModrinthServerContext()
 const route = useRoute()
-const router = useRouter()
+const auth = injectAuth()
+const { handleError } = injectNotificationManager()
+const queryClient = useQueryClient()
 const { canSetup, canManageBackups, permissionDeniedMessage } = useServerPermissions()
 const needsShareUpdate = computed(() =>
 	ctx.serverFull.value?.worlds.find((world) => world.id === ctx.worldId.value)
@@ -38,19 +44,69 @@ const shareActions = useIsMutating({ mutationKey: ['servers', 'share-action', ct
 const sharePreviews = useIsFetching({ queryKey: ['servers', 'share-diff', ctx.serverId] })
 const sharePending = computed(() => shareActions.value > 0 || sharePreviews.value > 0)
 
-function reviewShareUpdate() {
-	void router.push({
-		path: `/hosting/manage/${encodeURIComponent(ctx.serverId)}/play`,
-		query: { ...route.query, reviewShare: 'true' },
-	})
+const diffModal = ref<InstanceType<typeof ContentDiffModal>>()
+const previewOpen = ref(false)
+const previewQuery = useQuery({
+	queryKey: computed(() => ['servers', 'share-diff', ctx.serverId, ctx.worldId.value, auth.user.value?.id]),
+	enabled: computed(() => previewOpen.value && !!ctx.worldId.value),
+	queryFn: async () => {
+		const diff = await client.archon.content_v1.getShareDiff(ctx.serverId, ctx.worldId.value!)
+		return { diff, items: resolveServerShareDiff(diff) }
+	},
+	retry: false,
+})
+const pushMutation = useMutation({
+	mutationKey: ['servers', 'share-action', ctx.serverId],
+	mutationFn: async (worldId: string) => {
+		await client.archon.content_v1.share(ctx.serverId, worldId)
+		await queryClient.invalidateQueries({ queryKey: ['servers', 'v1', 'detail', ctx.serverId] })
+		await queryClient.invalidateQueries({ queryKey: ['servers', 'share-diff', ctx.serverId, worldId] })
+	},
+	onError: (error) => handleError(error),
+})
+
+async function reviewShareUpdate() {
+	if (!ctx.worldId.value || !canSetup.value || sharePending.value || ctx.busyReasons.value.length) return
+	const worldId = ctx.worldId.value
+	const userId = auth.user.value?.id
+	previewOpen.value = true
+	const result = await previewQuery.refetch()
+	if (!previewOpen.value || ctx.worldId.value !== worldId || auth.user.value?.id !== userId) return
+	if (result.error) {
+		previewOpen.value = false
+		handleError(result.error)
+	} else {
+		diffModal.value?.show()
+	}
 }
 
+function pushShareUpdate() {
+	if (!ctx.worldId.value || !canSetup.value || sharePending.value || ctx.busyReasons.value.length) return
+	previewOpen.value = false
+	pushMutation.mutate(ctx.worldId.value)
+}
+
+watch([ctx.worldId, () => auth.user.value?.id], () => {
+	previewOpen.value = false
+	diffModal.value?.hide()
+})
+
 const { activeOperations, backups, progressFor, invalidate } = useServerBackupsQueue(
 	computed(() => ctx.serverId),
 	ctx.worldId,
 )
 
 const messages = defineMessages({
+	shareChanges: {
+		id: 'servers.play.share-changes',
+		defaultMessage: 'Share your changes',
+	},
+	shareChangesBody: {
+		id: 'servers.play.share-changes-body',
+		defaultMessage: 'These changes will be available to players when they update their instance.',
+	},
+	added: { id: 'servers.play.diff-added', defaultMessage: 'Added' },
+	removed: { id: 'servers.play.diff-removed', defaultMessage: 'Removed' },
 	unpublished: {
 		id: 'app.instance.admonitions.shared-instance.changes-header',
 		defaultMessage: "Your changes haven't been shared yet",
@@ -411,6 +467,7 @@ function onInstallationDismiss() {
 
 <template>
 	<StackedAdmonitions
+		v-bind="$attrs"
 		:items="stackItems"
 		:dismiss-all-enabled="hasBulkDismissableItems"
 		class="w-full"
@@ -484,4 +541,18 @@ function onInstallationDismiss() {
 			</Admonition>
 		</template>
 	</StackedAdmonitions>
+	<ContentDiffModal
+		ref="diffModal"
+		:header="formatMessage(messages.pushUpdate)"
+		:admonition-header="formatMessage(messages.shareChanges)"
+		:description="formatMessage(messages.shareChangesBody)"
+		:diffs="previewQuery.data.value?.items ?? []"
+		:confirm-label="formatMessage(messages.pushUpdate)"
+		:confirm-icon="UploadIcon"
+		:confirm-disabled="!canSetup || sharePending || ctx.busyReasons.value.length > 0 || previewQuery.isError.value || !previewQuery.data.value"
+		:added-label="formatMessage(messages.added)"
+		:removed-label="formatMessage(messages.removed)"
+		@confirm="pushShareUpdate"
+		@cancel="previewOpen = false"
+	/>
 </template>
diff --git a/packages/ui/src/composables/server-panel-sync.ts b/packages/ui/src/composables/server-panel-sync.ts
index 2758664ade2..ae42f9b6772 100644
--- a/packages/ui/src/composables/server-panel-sync.ts
+++ b/packages/ui/src/composables/server-panel-sync.ts
@@ -3,6 +3,7 @@ import { useQueryClient } from '@tanstack/vue-query'
 import type { ComputedRef, Ref } from 'vue'
 import { onMounted, onUnmounted, watch } from 'vue'
 
+import { clearServerSharedInstance } from '#ui/layouts/shared/server-sharing'
 import { injectModrinthClient } from '#ui/providers'
 
 import {
@@ -129,6 +130,9 @@ export function useServerPanelSync(options: UseServerPanelSyncOptions) {
 				} : world)
 				void queryClient.invalidateQueries({ queryKey: ['servers', 'share-diff', serverId, event.world_id] })
 				break
+			case 'world.shared_instance.delete':
+				void clearServerSharedInstance(queryClient, serverId, event.world_id, event.shared_instance_id)
+				break
 			case 'world.content.update':
 				handleWorldContentUpdate(serverId, event)
 				break
diff --git a/packages/ui/src/layouts/index.ts b/packages/ui/src/layouts/index.ts
index e2cc22785ee..d828ac37554 100644
--- a/packages/ui/src/layouts/index.ts
+++ b/packages/ui/src/layouts/index.ts
@@ -5,5 +5,6 @@ export * from './shared/content-tab'
 export * from './shared/files-tab'
 export * from './shared/installation-settings'
 export * from './shared/server-settings'
+export * from './shared/sharing-settings'
 export * from './shared/user-profile'
 export * from './wrapped'
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/general.vue b/packages/ui/src/layouts/shared/server-settings/pages/general.vue
index 8e7c1369dd0..2f58da7cb1b 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/general.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/general.vue
@@ -30,35 +30,19 @@
 						<div class="flex flex-col gap-2.5">
 							<label for="server-subdomain" class="flex flex-col gap-2.5">
 								<span class="text-lg font-semibold text-contrast">Hostname</span>
-								<div
-									class="flex w-full overflow-hidden rounded-xl bg-button-bg px-3 [box-shadow:var(--shadow-inset-sm)] transition-[box-shadow] duration-100 ease-in-out focus-within:[box-shadow:0_0_0_0.25rem_var(--color-brand-shadow)]"
+								<Input
+									id="server-subdomain"
+									v-model="serverSubdomain"
+									v-tooltip="advancedActionTooltip"
+									placeholder="Enter subdomain..."
+									:maxlength="32"
+									:disabled="!canUseAdvancedSettings"
+									wrapper-class="w-full"
+									autocomplete="off"
+									@keyup.enter="saveGeneral"
 								>
-									<div class="relative inline-flex min-h-9 items-center">
-										<span
-											class="pointer-events-none invisible whitespace-pre px-px text-base font-medium"
-											aria-hidden="true"
-											>{{ serverSubdomain || 'Enter subdomain...' }}</span
-										>
-										<input
-											id="server-subdomain"
-											v-tooltip="advancedActionTooltip"
-											:value="serverSubdomain"
-											placeholder="Enter subdomain..."
-											:maxlength="32"
-											:disabled="!canUseAdvancedSettings"
-											class="absolute left-px inset-0 bg-transparent !p-0 text-base font-medium text-primary !shadow-none transition-colors placeholder:text-secondary focus:text-contrast"
-											autocomplete="off"
-											@input="serverSubdomain = ($event.target as HTMLInputElement).value"
-											@keyup.enter="saveGeneral"
-										/>
-									</div>
-									<div
-										class="flex min-h-9 shrink-0 select-none items-center py-2 pr-4 font-medium opacity-50 [filter:grayscale(50%)]"
-										:class="!serverSubdomain ? '!ml-auto' : ''"
-									>
-										.modrinth.gg
-									</div>
-								</div>
+									<template #suffix>.modrinth.gg</template>
+								</Input>
 							</label>
 							<span>Your friends can connect to your server using this address.</span>
 							<div v-if="!isValidSubdomain" class="text-red font-medium">
@@ -206,11 +190,6 @@ const preferences = {
 		description: 'Show RAM usage in bytes instead of a percentage.',
 		implemented: true,
 	},
-	reviewChangesBeforePlaying: {
-		displayName: 'Review changes before playing',
-		description: 'Show pending shared content changes before Play server publishes them. Saved on this device.',
-		implemented: true,
-	},
 } as const
 
 type PreferenceKeys = keyof typeof preferences
@@ -223,7 +202,6 @@ const defaultPreferences: UserPreferences = {
 	hideSubdomainLabel: false,
 	// autoRestart: false,
 	ramAsNumber: false,
-	reviewChangesBeforePlaying: false,
 }
 
 const userPreferences = useStorage<UserPreferences>(
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/index.ts b/packages/ui/src/layouts/shared/server-settings/pages/index.ts
index 58ee8b39d33..568bfc37385 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/index.ts
+++ b/packages/ui/src/layouts/shared/server-settings/pages/index.ts
@@ -3,3 +3,4 @@ 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'
+export { default as ServerSettingsSharingPage } from './sharing.vue'
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/sharing.vue b/packages/ui/src/layouts/shared/server-settings/pages/sharing.vue
new file mode 100644
index 00000000000..4805c51dca1
--- /dev/null
+++ b/packages/ui/src/layouts/shared/server-settings/pages/sharing.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { useServerSharingSettings } from '#ui/layouts/shared/server-sharing'
+import { provideSharingSettings, SharingSettingsLayout } from '#ui/layouts/shared/sharing-settings'
+
+import { injectServerSettings } from '../providers/server-settings'
+
+const { siteUrl } = injectServerSettings()
+const { formatMessage } = useVIntl()
+const { settings, canSetup, permissionDeniedMessage, sharedInstanceId } = useServerSharingSettings()
+provideSharingSettings(settings)
+
+const messages = defineMessages({
+	unpublishDescription: {
+		id: 'server.settings.sharing.unpublish-description',
+		defaultMessage:
+			'Remove the shared instance for this server from Modrinth and stop sending content updates to players. Your server and its content will not be affected.',
+	},
+	unpublishConfirmation: {
+		id: 'server.settings.sharing.unpublish-confirmation',
+		defaultMessage:
+			'This deletes the shared instance and disables its invite links. Players will stop receiving shared content updates. Your server and its content will remain available.',
+	},
+	notShared: {
+		id: 'server.settings.sharing.not-shared',
+		defaultMessage:
+			'This world is not shared. Use Play server or Invite players on the Play page to publish its content.',
+	},
+})
+</script>
+
+<template>
+	<p v-if="!canSetup" class="m-0 text-secondary">{{ permissionDeniedMessage }}</p>
+	<p v-else-if="!sharedInstanceId" class="m-0 text-secondary">{{ formatMessage(messages.notShared) }}</p>
+	<SharingSettingsLayout
+		v-else
+		:site-url="siteUrl"
+		:unpublish-description="messages.unpublishDescription"
+		:unpublish-confirmation="messages.unpublishConfirmation"
+	/>
+</template>
diff --git a/packages/ui/src/layouts/shared/server-settings/providers/server-settings.ts b/packages/ui/src/layouts/shared/server-settings/providers/server-settings.ts
index 59abf87f198..fa2250c8f37 100644
--- a/packages/ui/src/layouts/shared/server-settings/providers/server-settings.ts
+++ b/packages/ui/src/layouts/shared/server-settings/providers/server-settings.ts
@@ -9,6 +9,7 @@ export interface ServerSettingsBrowseModpacksArgs {
 }
 
 export interface ServerSettingsContext {
+	siteUrl: Ref<string>
 	isApp: Ref<boolean>
 	currentUserId: Ref<string | null>
 	currentUserRole: Ref<string | null>
diff --git a/packages/ui/src/layouts/shared/server-settings/tabs.ts b/packages/ui/src/layouts/shared/server-settings/tabs.ts
index 7dcb5802459..74017484286 100644
--- a/packages/ui/src/layouts/shared/server-settings/tabs.ts
+++ b/packages/ui/src/layouts/shared/server-settings/tabs.ts
@@ -4,6 +4,7 @@ import {
 	ListIcon,
 	ModrinthIcon,
 	SettingsIcon,
+	UsersIcon,
 	TextQuoteIcon,
 	VersionIcon,
 	WrenchIcon,
@@ -13,6 +14,7 @@ import type { Component } from 'vue'
 export type ServerSettingsTabId =
 	| 'general'
 	| 'installation'
+	| 'sharing'
 	| 'network'
 	| 'properties'
 	| 'advanced'
@@ -25,6 +27,7 @@ export interface ServerSettingsTabContext {
 	serverStatus?: Archon.Servers.v0.Status | null
 	isOwner: boolean
 	isAdmin: boolean
+	isShared: boolean
 }
 
 export interface ServerSettingsTabDefinition {
@@ -47,6 +50,12 @@ export const serverSettingsTabDefinitions: ServerSettingsTabDefinition[] = [
 		label: 'Installation',
 		icon: WrenchIcon,
 	},
+	{
+		id: 'sharing',
+		label: 'Sharing',
+		icon: UsersIcon,
+		shown: ({ isShared }) => isShared,
+	},
 	{
 		id: 'network',
 		label: 'Network',
diff --git a/packages/ui/src/layouts/shared/server-sharing/cache.ts b/packages/ui/src/layouts/shared/server-sharing/cache.ts
new file mode 100644
index 00000000000..fab0913ff68
--- /dev/null
+++ b/packages/ui/src/layouts/shared/server-sharing/cache.ts
@@ -0,0 +1,39 @@
+import type { Archon } from '@modrinth/api-client'
+import type { QueryClient } from '@tanstack/vue-query'
+
+export async function clearServerSharedInstance(
+	queryClient: QueryClient,
+	serverId: string,
+	worldId: string,
+	sharedInstanceId: string,
+) {
+	const detailKey = ['servers', 'v1', 'detail', serverId] as const
+	const instanceKey = ['shared-instances', sharedInstanceId] as const
+	const diffKey = ['servers', 'share-diff', serverId, worldId] as const
+	await Promise.all([
+		queryClient.cancelQueries({ queryKey: detailKey }),
+		queryClient.cancelQueries({ queryKey: instanceKey }),
+		queryClient.cancelQueries({ queryKey: diffKey }),
+	])
+	queryClient.setQueryData<Archon.Servers.v1.ServerFull>(detailKey, (server) =>
+		server
+			? {
+					...server,
+					worlds: server.worlds.map((world) =>
+						world.id === worldId && world.content?.shared_instance_id === sharedInstanceId
+							? {
+									...world,
+									content: {
+										...world.content,
+										shared_instance_id: null,
+										shared_instance_needs_update: false,
+									},
+								}
+							: world,
+					),
+				}
+			: server,
+	)
+	queryClient.removeQueries({ queryKey: instanceKey })
+	queryClient.removeQueries({ queryKey: diffKey })
+}
diff --git a/packages/ui/src/layouts/shared/server-sharing/index.ts b/packages/ui/src/layouts/shared/server-sharing/index.ts
new file mode 100644
index 00000000000..e0c6049e1d9
--- /dev/null
+++ b/packages/ui/src/layouts/shared/server-sharing/index.ts
@@ -0,0 +1,3 @@
+export { clearServerSharedInstance } from './cache'
+export { sharedInstanceInvitesQueryOptions } from './query-options'
+export { useServerSharingSettings } from './use-server-sharing'
diff --git a/packages/ui/src/layouts/shared/server-sharing/query-options.ts b/packages/ui/src/layouts/shared/server-sharing/query-options.ts
new file mode 100644
index 00000000000..532f9dceee1
--- /dev/null
+++ b/packages/ui/src/layouts/shared/server-sharing/query-options.ts
@@ -0,0 +1,13 @@
+import type { AbstractModrinthClient } from '@modrinth/api-client'
+
+export function sharedInstanceInvitesQueryOptions(
+	client: AbstractModrinthClient,
+	instanceId: string,
+	userId: string | undefined,
+) {
+	return {
+		queryKey: ['shared-instances', instanceId, 'invites', userId] as const,
+		queryFn: () => client.sharedinstances.invites_v1.list(instanceId),
+		retry: false,
+	}
+}
diff --git a/packages/ui/src/layouts/shared/server-sharing/use-server-sharing.ts b/packages/ui/src/layouts/shared/server-sharing/use-server-sharing.ts
new file mode 100644
index 00000000000..57026f31338
--- /dev/null
+++ b/packages/ui/src/layouts/shared/server-sharing/use-server-sharing.ts
@@ -0,0 +1,120 @@
+import type { SharedInstances } from '@modrinth/api-client'
+import { useIsMutating, useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import { useStorage } from '@vueuse/core'
+import { computed } from 'vue'
+
+import { useServerPermissions } from '#ui/composables/server-permissions'
+import {
+	injectAuth,
+	injectModrinthClient,
+	injectModrinthServerContext,
+	injectNotificationManager,
+} from '#ui/providers'
+
+import type { SharingSettingsContext } from '../sharing-settings'
+import { clearServerSharedInstance } from './cache'
+import { sharedInstanceInvitesQueryOptions } from './query-options'
+
+export function useServerSharingSettings() {
+	const client = injectModrinthClient()
+	const auth = injectAuth()
+	const queryClient = useQueryClient()
+	const { handleError } = injectNotificationManager()
+	const { serverId, worldId, serverFull, busyReasons } = injectModrinthServerContext()
+	const { canSetup, permissionDeniedMessage } = useServerPermissions()
+	const preferences = useStorage(
+		`pyro-server-${serverId}-preferences`,
+		{ reviewChangesBeforePlaying: false },
+		undefined,
+		{ mergeDefaults: true },
+	)
+	const userId = computed(() => auth.user.value?.id)
+	const sharedInstanceId = computed(() =>
+		serverFull.value?.worlds.find((world) => world.id === worldId.value)?.content?.shared_instance_id,
+	)
+	const targetKey = computed(() =>
+		canSetup.value && worldId.value && sharedInstanceId.value && userId.value
+			? JSON.stringify([serverId, worldId.value, sharedInstanceId.value, userId.value])
+			: null,
+	)
+	const invites = useQuery(
+		computed(() => ({
+			...sharedInstanceInvitesQueryOptions(client, sharedInstanceId.value ?? '', userId.value),
+			enabled: !!targetKey.value,
+			refetchOnMount: 'always' as const,
+			refetchInterval: 30_000,
+		})),
+	)
+	const shareActions = useIsMutating({ mutationKey: ['servers', 'share-action', serverId] })
+
+	type ShareTarget = { worldId: string; instanceId: string }
+	const revokeMutation = useMutation({
+		mutationFn: (target: ShareTarget & { inviteId: string }) =>
+			client.sharedinstances.invites_v1.delete(target.instanceId, target.inviteId),
+		onSuccess: (_data, target) => {
+			queryClient.setQueriesData<SharedInstances.Invites.v1.InviteLink[]>(
+				{ queryKey: ['shared-instances', target.instanceId, 'invites'] },
+				(current) => current?.filter((invite) => invite.id !== target.inviteId),
+			)
+		},
+		onSettled: (_data, _error, target) =>
+			queryClient.invalidateQueries({ queryKey: ['shared-instances', target.instanceId, 'invites'] }),
+	})
+	const unpublishMutation = useMutation({
+		mutationKey: ['servers', 'share-action', serverId],
+		mutationFn: (target: ShareTarget) => client.archon.content_v1.unshare(serverId, target.worldId),
+		onSuccess: (_data, target) =>
+			clearServerSharedInstance(queryClient, serverId, target.worldId, target.instanceId),
+		onSettled: () => queryClient.invalidateQueries({ queryKey: ['servers', 'v1', 'detail', serverId] }),
+	})
+	const busy = computed(
+		() =>
+			!targetKey.value ||
+			busyReasons.value.length > 0 ||
+			shareActions.value > 0 ||
+			revokeMutation.isPending.value ||
+			unpublishMutation.isPending.value,
+	)
+
+	function currentTarget(expectedKey: string): ShareTarget | undefined {
+		if (busy.value || expectedKey !== targetKey.value || !worldId.value || !sharedInstanceId.value) {
+			return
+		}
+		return { worldId: worldId.value, instanceId: sharedInstanceId.value }
+	}
+
+	const settings: SharingSettingsContext = {
+		targetKey,
+		invites: computed(() =>
+			(invites.data.value ?? []).map((invite) => ({
+				id: invite.id,
+				expiration: invite.expiration,
+				maxUses: invite.max_uses,
+				uses: invite.uses,
+			})),
+		),
+		loading: invites.isLoading,
+		error: invites.error,
+		busy,
+		refresh: async () => {
+			if (targetKey.value) await invites.refetch()
+		},
+		revokeInvite: async (inviteId, expectedKey) => {
+			const target = currentTarget(expectedKey)
+			if (target) await revokeMutation.mutateAsync({ ...target, inviteId })
+		},
+		unpublish: async (expectedKey) => {
+			const target = currentTarget(expectedKey)
+			if (target) await unpublishMutation.mutateAsync(target)
+		},
+		onError: (error) => handleError(error),
+		reviewChangesBeforePlaying: computed({
+			get: () => preferences.value.reviewChangesBeforePlaying,
+			set: (value) => {
+				preferences.value.reviewChangesBeforePlaying = value
+			},
+		}),
+	}
+
+	return { settings, canSetup, permissionDeniedMessage, sharedInstanceId }
+}
diff --git a/packages/ui/src/layouts/shared/sharing-settings/components/active-invites.vue b/packages/ui/src/layouts/shared/sharing-settings/components/active-invites.vue
new file mode 100644
index 00000000000..33515907236
--- /dev/null
+++ b/packages/ui/src/layouts/shared/sharing-settings/components/active-invites.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { SpinnerIcon, XIcon } from '@modrinth/assets'
+import { computed } from 'vue'
+
+import {
+	Admonition,
+	Button,
+	CopyCode,
+	IconButton,
+	Table,
+	type TableColumn,
+} from '#ui/components/base'
+import { useFormatDateTime, useRelativeTime } from '#ui/composables'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { commonMessages } from '#ui/utils/common-messages'
+
+import { injectSharingSettings } from '../providers/sharing-settings'
+
+defineProps<{
+	siteUrl: string
+	busy: boolean
+	revokingId?: string
+}>()
+defineEmits<{ revoke: [inviteId: string] }>()
+
+const ctx = injectSharingSettings()
+const { formatMessage } = useVIntl()
+const formatRelativeTime = useRelativeTime()
+const formatDateTime = useFormatDateTime({ dateStyle: 'medium', timeStyle: 'short' })
+
+async function refresh() {
+	try {
+		await ctx.refresh()
+	} catch (error) {
+		ctx.onError(error)
+	}
+}
+
+const messages = defineMessages({
+	activeInvitesTitle: {
+		id: 'instance.settings.sharing.active-invites.title',
+		defaultMessage: 'Active invites',
+	},
+	activeInvitesDescription: {
+		id: 'instance.settings.sharing.active-invites.description',
+		defaultMessage: 'Anyone with one of these invite links can join while it remains active.',
+	},
+	inviteLink: { id: 'instance.settings.sharing.active-invites.code', defaultMessage: 'Invite link' },
+	uses: { id: 'instance.settings.sharing.active-invites.uses', defaultMessage: 'Uses' },
+	expires: { id: 'instance.settings.sharing.active-invites.expires', defaultMessage: 'Expires' },
+	actions: { id: 'instance.settings.sharing.active-invites.actions', defaultMessage: 'Actions' },
+	noInvites: {
+		id: 'instance.settings.sharing.active-invites.empty',
+		defaultMessage: 'There are no active invites.',
+	},
+	invitesError: {
+		id: 'server.settings.sharing.invites-error',
+		defaultMessage: 'Failed to load active invites',
+	},
+	retry: { id: 'server.settings.sharing.retry', defaultMessage: 'Retry' },
+	revoke: { id: 'instance.settings.sharing.active-invites.revoke', defaultMessage: 'Revoke invite' },
+	revokeWithCode: {
+		id: 'instance.settings.sharing.active-invites.revoke-with-code',
+		defaultMessage: 'Revoke invite {code}',
+	},
+})
+const columns = computed<TableColumn<'id' | 'uses' | 'expiration' | 'actions'>[]>(() => [
+	{ key: 'id', label: formatMessage(messages.inviteLink), width: 'clamp(11rem, 34%, 19rem)' },
+	{ key: 'uses', label: formatMessage(messages.uses), width: 'clamp(7rem, 18%, 10rem)' },
+	{ key: 'expiration', label: formatMessage(messages.expires), width: 'clamp(9rem, 28%, 14rem)' },
+	{ key: 'actions', label: formatMessage(messages.actions), align: 'right', width: '5.5rem' },
+])
+</script>
+
+<template>
+	<section class="flex flex-col gap-4">
+		<div class="flex flex-col gap-1">
+			<h3 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.activeInvitesTitle) }}
+			</h3>
+			<p class="m-0 text-secondary">{{ formatMessage(messages.activeInvitesDescription) }}</p>
+		</div>
+		<Admonition v-if="ctx.error.value" type="critical" :header="formatMessage(messages.invitesError)">
+			<Button @click="refresh">{{ formatMessage(messages.retry) }}</Button>
+		</Admonition>
+		<Table v-else :columns="columns" :data="ctx.invites.value" row-key="id" table-min-width="36rem">
+			<template #empty-state>
+				<div class="flex h-40 items-center justify-center text-secondary">
+					<SpinnerIcon
+						v-if="ctx.loading.value"
+						class="animate-spin"
+						:aria-label="formatMessage(commonMessages.loadingLabel)"
+						role="status"
+					/>
+					<template v-else>{{ formatMessage(messages.noInvites) }}</template>
+				</div>
+			</template>
+			<template #cell-id="{ row }">
+				<CopyCode
+					:text="`${siteUrl.replace(/\/$/, '')}/share/${encodeURIComponent(row.id)}`"
+					:display-text="`/${row.id}`"
+				/>
+			</template>
+			<template #cell-uses="{ row }">
+				<span class="font-medium text-primary">{{ row.uses }}</span>
+				<span> / {{ row.maxUses }}</span>
+			</template>
+			<template #cell-expiration="{ row }">
+				<span v-tooltip="formatDateTime(row.expiration)" class="whitespace-nowrap">
+					{{ formatRelativeTime(row.expiration) }}
+				</span>
+			</template>
+			<template #cell-actions="{ row }">
+				<div class="flex justify-end">
+					<IconButton
+						v-tooltip="formatMessage(messages.revoke)"
+						type="quiet"
+						:label="formatMessage(messages.revokeWithCode, { code: row.id })"
+						:disabled="busy"
+						class="text-secondary hover:!filter-none hover:text-red focus-visible:!filter-none"
+						@click="$emit('revoke', row.id)"
+					>
+						<SpinnerIcon v-if="revokingId === row.id" class="animate-spin" aria-hidden="true" />
+						<XIcon v-else aria-hidden="true" />
+					</IconButton>
+				</div>
+			</template>
+		</Table>
+	</section>
+</template>
diff --git a/apps/app-frontend/src/pages/instance/components/settings-modal/confirm-revoke-shared-instance-invite-modal.vue b/packages/ui/src/layouts/shared/sharing-settings/components/revoke-invite-modal.vue
similarity index 72%
rename from apps/app-frontend/src/pages/instance/components/settings-modal/confirm-revoke-shared-instance-invite-modal.vue
rename to packages/ui/src/layouts/shared/sharing-settings/components/revoke-invite-modal.vue
index 89fd9f6cd8f..0db1f327c3a 100644
--- a/apps/app-frontend/src/pages/instance/components/settings-modal/confirm-revoke-shared-instance-invite-modal.vue
+++ b/packages/ui/src/layouts/shared/sharing-settings/components/revoke-invite-modal.vue
@@ -1,7 +1,7 @@
 <template>
 	<NewModal ref="modal" :header="formatMessage(messages.header)" fade="danger" max-width="500px">
 		<Admonition type="critical" :header="formatMessage(messages.admonitionHeader)">
-			<IntlFormatted :message-id="messages.admonitionBody" :values="{ code: inviteCode }">
+			<IntlFormatted :message-id="messages.admonitionBody" :values="{ code: `/${inviteId}` }">
 				<template #monospace="{ children }">
 					<code class="font-mono"><component :is="() => children" /></code>
 				</template>
@@ -14,7 +14,7 @@
 					<XIcon />
 					{{ formatMessage(commonMessages.cancelButton) }}
 				</Button>
-				<Button type="colored" color="red" @click="confirm">
+				<Button type="colored" color="red" :disabled="busy" @click="$emit('confirm')">
 					<XIcon />
 					{{ formatMessage(messages.revokeButton) }}
 				</Button>
@@ -25,34 +25,19 @@
 
 <script setup lang="ts">
 import { XIcon } from '@modrinth/assets'
-import {
-	Admonition,
-	Button,
-	commonMessages,
-	defineMessages,
-	IntlFormatted,
-	NewModal,
-	useVIntl,
-} from '@modrinth/ui'
 import { ref } from 'vue'
 
-const { formatMessage } = useVIntl()
-const modal = ref<InstanceType<typeof NewModal>>()
-const inviteCode = ref('')
-
-const emit = defineEmits<{
-	revoke: [inviteCode: string]
-}>()
+import { Admonition, Button } from '#ui/components/base'
+import IntlFormatted from '#ui/components/base/IntlFormatted.vue'
+import NewModal from '#ui/components/modal/NewModal.vue'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { commonMessages } from '#ui/utils/common-messages'
 
-function show(code: string) {
-	inviteCode.value = code
-	modal.value?.show()
-}
+defineProps<{ inviteId: string; busy: boolean }>()
+defineEmits<{ confirm: [] }>()
 
-function confirm() {
-	modal.value?.hide()
-	emit('revoke', inviteCode.value)
-}
+const { formatMessage } = useVIntl()
+const modal = ref<InstanceType<typeof NewModal>>()
 
 const messages = defineMessages({
 	header: {
@@ -74,5 +59,8 @@ const messages = defineMessages({
 	},
 })
 
-defineExpose({ show })
+defineExpose({
+	show: () => modal.value?.show(),
+	hide: () => modal.value?.hide(),
+})
 </script>
diff --git a/packages/ui/src/layouts/shared/sharing-settings/components/unpublish-modal.vue b/packages/ui/src/layouts/shared/sharing-settings/components/unpublish-modal.vue
new file mode 100644
index 00000000000..5356282094a
--- /dev/null
+++ b/packages/ui/src/layouts/shared/sharing-settings/components/unpublish-modal.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { SpinnerIcon, UnlinkIcon, XIcon } from '@modrinth/assets'
+import { ref } from 'vue'
+
+import { Admonition, Button } from '#ui/components/base'
+import NewModal from '#ui/components/modal/NewModal.vue'
+import { defineMessages, type MessageDescriptor, useVIntl } from '#ui/composables/i18n'
+import { commonMessages } from '#ui/utils/common-messages'
+
+defineProps<{
+	busy: boolean
+	unpublishing?: boolean
+	description: MessageDescriptor
+}>()
+defineEmits<{ confirm: [] }>()
+
+const { formatMessage } = useVIntl()
+const modal = ref<InstanceType<typeof NewModal>>()
+const messages = defineMessages({
+	unpublishModalHeader: {
+		id: 'installation-settings.unpublish-shared-instance.modal.header',
+		defaultMessage: 'Unpublish shared instance',
+	},
+	unpublishModalAdmonitionHeader: {
+		id: 'installation-settings.unpublish-shared-instance.modal.admonition-header',
+		defaultMessage: 'Unpublishing shared instance',
+	},
+	unpublishButton: {
+		id: 'installation-settings.shared-instance.unpublish-button',
+		defaultMessage: 'Unpublish shared instance',
+	},
+	unpublishingButton: {
+		id: 'installation-settings.shared-instance.unpublishing-button',
+		defaultMessage: 'Unpublishing...',
+	},
+})
+
+defineExpose({
+	show: () => modal.value?.show(),
+	hide: () => modal.value?.hide(),
+})
+</script>
+
+<template>
+	<NewModal
+		ref="modal"
+		:header="formatMessage(messages.unpublishModalHeader)"
+		fade="warning"
+		max-width="500px"
+	>
+		<Admonition type="warning" :header="formatMessage(messages.unpublishModalAdmonitionHeader)">
+			{{ formatMessage(description) }}
+		</Admonition>
+		<template #actions>
+			<div class="flex justify-end gap-2">
+				<Button type="outlined" class="!border" @click="modal?.hide()">
+					<XIcon />{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button type="colored" color="orange" :disabled="busy" @click="$emit('confirm')">
+					<SpinnerIcon v-if="unpublishing" class="animate-spin" />
+					<UnlinkIcon v-else />
+					{{ formatMessage(unpublishing ? messages.unpublishingButton : messages.unpublishButton) }}
+				</Button>
+			</div>
+		</template>
+	</NewModal>
+</template>
diff --git a/packages/ui/src/layouts/shared/sharing-settings/index.ts b/packages/ui/src/layouts/shared/sharing-settings/index.ts
new file mode 100644
index 00000000000..fa4e1445363
--- /dev/null
+++ b/packages/ui/src/layouts/shared/sharing-settings/index.ts
@@ -0,0 +1,3 @@
+export { default as SharingSettingsLayout } from './layout.vue'
+export * from './providers/sharing-settings'
+export * from './types'
diff --git a/packages/ui/src/layouts/shared/sharing-settings/layout.vue b/packages/ui/src/layouts/shared/sharing-settings/layout.vue
new file mode 100644
index 00000000000..5bdd71e98a5
--- /dev/null
+++ b/packages/ui/src/layouts/shared/sharing-settings/layout.vue
@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { SpinnerIcon, UnlinkIcon } from '@modrinth/assets'
+import { computed, ref, watch } from 'vue'
+
+import { Button, Toggle } from '#ui/components/base'
+import { defineMessages, type MessageDescriptor, useVIntl } from '#ui/composables/i18n'
+
+import ActiveInvites from './components/active-invites.vue'
+import RevokeInviteModal from './components/revoke-invite-modal.vue'
+import UnpublishModal from './components/unpublish-modal.vue'
+import { injectSharingSettings } from './providers/sharing-settings'
+
+defineProps<{
+	siteUrl: string
+	unpublishDescription: MessageDescriptor
+	unpublishConfirmation: MessageDescriptor
+}>()
+
+const ctx = injectSharingSettings()
+const { formatMessage } = useVIntl()
+const { reviewChangesBeforePlaying } = ctx
+const revokeModal = ref<InstanceType<typeof RevokeInviteModal>>()
+const unpublishModal = ref<InstanceType<typeof UnpublishModal>>()
+const revokeTarget = ref<{ key: string; inviteId: string }>()
+const unpublishTarget = ref<string>()
+const revokingId = ref<string>()
+const unpublishing = ref(false)
+const busy = computed(
+	() => ctx.busy.value || !ctx.targetKey.value || !!revokingId.value || unpublishing.value,
+)
+
+function showRevoke(inviteId: string) {
+	if (busy.value || !ctx.targetKey.value) return
+	revokeTarget.value = { key: ctx.targetKey.value, inviteId }
+	revokeModal.value?.show()
+}
+
+async function revokeInvite() {
+	const target = revokeTarget.value
+	if (!target || busy.value || target.key !== ctx.targetKey.value) return
+	revokeModal.value?.hide()
+	revokingId.value = target.inviteId
+	try {
+		await ctx.revokeInvite(target.inviteId, target.key)
+	} catch (error) {
+		ctx.onError(error)
+	} finally {
+		revokingId.value = undefined
+	}
+}
+
+function showUnpublish() {
+	if (busy.value || !ctx.targetKey.value) return
+	unpublishTarget.value = ctx.targetKey.value
+	unpublishModal.value?.show()
+}
+
+async function unpublish() {
+	const target = unpublishTarget.value
+	if (!target || busy.value || target !== ctx.targetKey.value) return
+	unpublishing.value = true
+	try {
+		await ctx.unpublish(target)
+		if (unpublishTarget.value === target) unpublishModal.value?.hide()
+	} catch (error) {
+		ctx.onError(error)
+	} finally {
+		unpublishing.value = false
+	}
+}
+
+watch(
+	ctx.targetKey,
+	() => {
+		revokeModal.value?.hide()
+		unpublishModal.value?.hide()
+		revokeTarget.value = undefined
+		unpublishTarget.value = undefined
+	},
+	{ flush: 'sync' },
+)
+
+const messages = defineMessages({
+	reviewChangesBeforePlaying: {
+		id: 'server.settings.sharing.review-changes-before-playing',
+		defaultMessage: 'Review changes before playing',
+	},
+	reviewChangesBeforePlayingDescription: {
+		id: 'server.settings.sharing.review-changes-before-playing-description',
+		defaultMessage: 'Review content updates before sharing them with players. Saved on this device.',
+	},
+	unpublishTitle: {
+		id: 'installation-settings.shared-instance.title',
+		defaultMessage: 'Unpublish instance',
+	},
+	unpublish: {
+		id: 'installation-settings.shared-instance.unpublish-button',
+		defaultMessage: 'Unpublish shared instance',
+	},
+	unpublishing: {
+		id: 'installation-settings.shared-instance.unpublishing-button',
+		defaultMessage: 'Unpublishing...',
+	},
+})
+</script>
+
+<template>
+	<div class="flex flex-col gap-8">
+		<div
+			v-if="reviewChangesBeforePlaying !== undefined"
+			class="flex items-center justify-between gap-2"
+		>
+			<label for="review-changes-before-playing" class="flex flex-col gap-1">
+				<span class="text-lg font-semibold text-contrast">
+					{{ formatMessage(messages.reviewChangesBeforePlaying) }}
+				</span>
+				<span>{{ formatMessage(messages.reviewChangesBeforePlayingDescription) }}</span>
+			</label>
+			<Toggle
+				id="review-changes-before-playing"
+				v-model="reviewChangesBeforePlaying"
+				class="flex-none"
+			/>
+		</div>
+		<ActiveInvites :site-url="siteUrl" :busy="busy" :revoking-id="revokingId" @revoke="showRevoke" />
+		<section class="flex flex-col gap-2.5">
+			<h3 class="m-0 text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.unpublishTitle) }}
+			</h3>
+			<div>
+				<Button type="colored" color="orange" :disabled="busy" @click="showUnpublish">
+					<SpinnerIcon v-if="unpublishing" class="animate-spin" />
+					<UnlinkIcon v-else />
+					{{ formatMessage(unpublishing ? messages.unpublishing : messages.unpublish) }}
+				</Button>
+			</div>
+			<p class="m-0 text-primary">{{ formatMessage(unpublishDescription) }}</p>
+		</section>
+	</div>
+	<RevokeInviteModal
+		ref="revokeModal"
+		:invite-id="revokeTarget?.inviteId ?? ''"
+		:busy="busy"
+		@confirm="revokeInvite"
+	/>
+	<UnpublishModal
+		ref="unpublishModal"
+		:busy="busy"
+		:unpublishing="unpublishing"
+		:description="unpublishConfirmation"
+		@confirm="unpublish"
+	/>
+</template>
diff --git a/packages/ui/src/layouts/shared/sharing-settings/providers/sharing-settings.ts b/packages/ui/src/layouts/shared/sharing-settings/providers/sharing-settings.ts
new file mode 100644
index 00000000000..d8e6f27ea9f
--- /dev/null
+++ b/packages/ui/src/layouts/shared/sharing-settings/providers/sharing-settings.ts
@@ -0,0 +1,21 @@
+import type { Ref } from 'vue'
+
+import { createContext } from '#ui/providers/create-context'
+
+import type { SharingInvite } from '../types'
+
+export interface SharingSettingsContext {
+	targetKey: Readonly<Ref<string | null>>
+	invites: Readonly<Ref<SharingInvite[]>>
+	loading: Readonly<Ref<boolean>>
+	error: Readonly<Ref<unknown>>
+	busy: Readonly<Ref<boolean>>
+	refresh: () => Promise<void>
+	revokeInvite: (inviteId: string, targetKey: string) => Promise<void>
+	unpublish: (targetKey: string) => Promise<void>
+	onError: (error: unknown) => void
+	reviewChangesBeforePlaying?: Ref<boolean>
+}
+
+export const [injectSharingSettings, provideSharingSettings] =
+	createContext<SharingSettingsContext>('SharingSettingsLayout', 'sharingSettings')
diff --git a/packages/ui/src/layouts/shared/sharing-settings/types.ts b/packages/ui/src/layouts/shared/sharing-settings/types.ts
new file mode 100644
index 00000000000..288ea7ff398
--- /dev/null
+++ b/packages/ui/src/layouts/shared/sharing-settings/types.ts
@@ -0,0 +1,6 @@
+export interface SharingInvite {
+	id: string
+	expiration: string
+	maxUses: number
+	uses: number
+}
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayCard.vue b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayCard.vue
index 5e662bb1e9d..80abb4a6dc8 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayCard.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayCard.vue
@@ -41,21 +41,18 @@
 					<DownloadIcon v-else aria-hidden="true" />
 					{{ formatMessage(messages.downloadModpackButton) }}
 				</Button>
-				<div
-					class="flex h-10 min-w-0 items-center justify-between gap-3 rounded-xl bg-surface-2 px-4 sm:w-[313px]"
+				<Button
+					v-tooltip="formatMessage(copied ? messages.copiedAddress : messages.copyAddress)"
+					native-type="button"
+					size="lg"
+					class="w-full !justify-between text-left sm:w-[313px]"
+					:aria-label="formatMessage(copied ? messages.copiedAddress : messages.copyAddress)"
+					@click="copyAddress"
 				>
-					<span class="min-w-0 truncate font-semibold text-primary">{{ address }}</span>
-					<button
-						v-tooltip="formatMessage(copied ? messages.copiedAddress : messages.copyAddress)"
-						type="button"
-						class="flex shrink-0 cursor-pointer items-center border-0 bg-transparent p-0 text-primary"
-						:aria-label="formatMessage(copied ? messages.copiedAddress : messages.copyAddress)"
-						@click="copyAddress"
-					>
-						<CheckIcon v-if="copied" class="size-5 text-brand" aria-hidden="true" />
-						<CopyIcon v-else class="size-5" aria-hidden="true" />
-					</button>
-				</div>
+					<span class="min-w-0 truncate text-base font-semibold text-primary">{{ address }}</span>
+					<CheckIcon v-if="copied" class="size-5 shrink-0 text-brand" aria-hidden="true" />
+					<ClipboardCopyIcon v-else class="size-5 shrink-0 text-secondary" aria-hidden="true" />
+				</Button>
 			</div>
 		</div>
 	</section>
@@ -64,7 +61,7 @@
 <script setup lang="ts">
 import {
 	CheckIcon,
-	CopyIcon,
+	ClipboardCopyIcon,
 	DownloadIcon,
 	PlayIcon,
 	SpinnerIcon,
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayersTable.vue b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayersTable.vue
index d0943ae8002..2ba3def2038 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayersTable.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayersTable.vue
@@ -80,9 +80,8 @@
 						:disabled="disabled"
 						v-tooltip="row.pending ? 'Revoke invite' : 'More actions'"
 						type="quiet"
-						interaction="none"
 						:label="`${row.pending ? 'Revoke invite' : 'More actions'} for ${row.username}`"
-						class="!text-secondary"
+						class="!text-secondary hover:!filter-none focus-visible:!filter-none"
 						:class="row.pending ? 'hover:!text-red' : ''"
 						@click="row.pending ? emit('remove', row) : emit('open-actions', row)"
 					>
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/play.vue b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/play.vue
index 93d6dc32534..862f46b3b9d 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/play.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/play.vue
@@ -11,13 +11,10 @@
 		/>
 		<section class="flex flex-col gap-3">
 			<h1 class="m-0 text-2xl font-semibold text-contrast">{{ formatMessage(messages.invitedPlayersTitle) }}</h1>
-			<div v-if="players.members.isLoading.value" class="flex justify-center p-8" role="status" :aria-label="formatMessage(messages.loading)">
-				<SpinnerIcon class="animate-spin" />
-			</div>
-			<Admonition v-else-if="players.members.isError.value" type="critical" :header="formatMessage(messages.playersError)">
+			<Admonition v-if="players.members.isError.value" type="critical" :header="formatMessage(messages.playersError)">
 				<Button @click="players.members.refetch()">{{ formatMessage(messages.retry) }}</Button>
 			</Admonition>
-			<ServerPlayersTable v-else :rows="players.rows.value" :can-manage="canSetup" :disabled="players.membershipMutation.isPending.value || actionsLocked" @remove="confirmRemove" @open-actions="confirmRemove" />
+			<ServerPlayersTable :rows="players.rows.value" :can-manage="canSetup" :disabled="players.membershipMutation.isPending.value || actionsLocked" @remove="confirmRemove" @open-actions="confirmRemove" />
 		</section>
 		<InvitePlayersModal
 			ref="invitePlayersModal"
@@ -62,15 +59,14 @@
 <script setup lang="ts">
 import type { Archon } from '@modrinth/api-client'
 import { SpinnerIcon, UploadIcon } from '@modrinth/assets'
-import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import { useIsMutating, useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
 import { useStorage } from '@vueuse/core'
 import { computed, nextTick, ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
 
 import Admonition from '#ui/components/base/Admonition.vue'
 import { Button } from '#ui/components/base/buttons'
 import ConfirmModal from '#ui/components/modal/ConfirmModal.vue'
-import { type InviteLinkSettings, type InvitePlayersInvitePayload, InvitePlayersModal } from '#ui/components/sharing'
+import { type InviteLinkSettings, type InvitePlayersInvitePayload, InvitePlayersModal, type InvitePlayersUser } from '#ui/components/sharing'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { useServerPermissions } from '#ui/composables/server-permissions'
 import ContentDiffModal from '#ui/layouts/shared/installation-settings/components/ContentDiffModal.vue'
@@ -93,8 +89,6 @@ const { handleError } = injectNotificationManager()
 const client = injectModrinthClient()
 const auth = injectAuth()
 const queryClient = useQueryClient()
-const route = useRoute()
-const router = useRouter()
 const { serverId, worldId, server, serverFull, busyReasons } = injectModrinthServerContext()
 const { canSetup } = useServerPermissions()
 const world = computed(() => serverFull.value?.worlds.find((world) => world.id === worldId.value))
@@ -116,7 +110,7 @@ const previewQuery = useQuery({
 	enabled: computed(() => previewOpen.value && !!worldId.value && !!sharedInstanceId.value),
 	queryFn: async () => {
 		const diff = await client.archon.content_v1.getShareDiff(serverId, worldId.value!)
-		return { diff, items: await resolveServerShareDiff(client, diff) }
+		return { diff, items: resolveServerShareDiff(diff) }
 	},
 	retry: false,
 })
@@ -163,7 +157,8 @@ const actionMutation = useMutation({
 	onError: (error) => handleError(error),
 })
 const pendingAction = computed(() => actionMutation.isPending.value ? actionMutation.variables.value?.action : undefined)
-const actionsLocked = computed(() => actionMutation.isPending.value || previewQuery.isFetching.value || players.linkMutation.isPending.value || busyReasons.value.length > 0)
+const shareActions = useIsMutating({ mutationKey: ['servers', 'share-action', serverId] })
+const actionsLocked = computed(() => shareActions.value > 0 || previewQuery.isFetching.value || players.linkMutation.isPending.value || busyReasons.value.length > 0)
 function perform(action: Action, reviewed = false) {
 	if (!worldId.value || actionsLocked.value) return
 	if (action === 'play' && !reviewed && canSetup.value && needsUpdate.value && preferences.value.reviewChangesBeforePlaying) {
@@ -186,33 +181,12 @@ async function showPreview(playAfter = false) {
 		handleError(result.error)
 	} else diffModal.value?.show()
 }
-const openingRequestedPreview = ref(false)
-watch(
-	[() => route.query.reviewShare, canSetup, sharedInstanceId, actionsLocked],
-	async ([requested, allowed, instanceId, locked]) => {
-		if (requested !== 'true' || !allowed || !instanceId || locked || openingRequestedPreview.value) return
-		openingRequestedPreview.value = true
-		const requestedPath = route.path
-		try {
-			await nextTick()
-			await showPreview()
-		} finally {
-			if (route.path === requestedPath && route.query.reviewShare === 'true') {
-				const query = { ...route.query }
-				delete query.reviewShare
-				await router.replace({ path: route.path, query, hash: route.hash })
-			}
-			openingRequestedPreview.value = false
-		}
-	},
-	{ immediate: true, flush: 'post' },
-)
-function changeMember(userId: string, remove: boolean) {
+function changeMember(userId: string, remove: boolean, user?: InvitePlayersUser) {
 	if (!sharedInstanceId.value || players.membershipMutation.isPending.value || !canSetup.value) return
-	players.membershipMutation.mutate({ id: sharedInstanceId.value, userId, remove }, { onError: (error) => handleError(error) })
+	players.membershipMutation.mutate({ id: sharedInstanceId.value, userId, remove, user }, { onError: (error) => handleError(error) })
 }
 function invitePlayer(payload: InvitePlayersInvitePayload) {
-	changeMember(payload.user.id, false)
+	changeMember(payload.user.id, false, payload.user)
 }
 function confirmRemove(player: ServerPlayerRow) {
 	playerToRemove.value = player
@@ -225,7 +199,7 @@ async function updateInviteLink(settings: InviteLinkSettings) {
 	if (!sharedInstanceId.value || players.linkMutation.isPending.value) return
 	await players.linkMutation.mutateAsync({ id: sharedInstanceId.value, settings, replaceId: players.link.value?.id })
 }
-watch([worldId, () => auth.user.value?.id], () => {
+watch([worldId, sharedInstanceId, () => auth.user.value?.id], () => {
 	invitePlayersModal.value?.hide()
 	diffModal.value?.hide()
 	removeModal.value?.hide()
@@ -241,7 +215,6 @@ const messages = defineMessages({
 	inviteHeader: { id: 'servers.play.invite-header', defaultMessage: 'Invite players to {name}' },
 	refreshingPreview: { id: 'servers.play.refreshing-preview', defaultMessage: 'Refreshing changes…' },
 	previewError: { id: 'servers.play.preview-error', defaultMessage: 'Could not refresh the changes. Retry before publishing.' },
-	loading: { id: 'servers.play.loading', defaultMessage: 'Loading players' },
 	playersError: { id: 'servers.play.players-error', defaultMessage: 'Could not load invited players' },
 	retry: { id: 'servers.play.retry', defaultMessage: 'Retry' },
 	invitesUnavailable: { id: 'servers.play.invites-unavailable', defaultMessage: 'Invitations are unavailable while an action is in progress or the player limit has been reached.' },
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/share-diff.ts b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/share-diff.ts
index c66472cd508..6b0847ec711 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/share-diff.ts
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/share-diff.ts
@@ -1,4 +1,4 @@
-import type { AbstractModrinthClient, Archon } from '@modrinth/api-client'
+import type { Archon } from '@modrinth/api-client'
 
 import type { ContentDiffItem } from '#ui/layouts/shared/installation-settings/types'
 
@@ -6,17 +6,12 @@ type Change<T> = Archon.Content.v1.SharedContentChange<T>
 const before = <T>(change: Change<T>) => 'before' in change ? change.before : undefined
 const after = <T>(change: Change<T>) => 'after' in change ? change.after : undefined
 
-export async function resolveServerShareDiff(client: AbstractModrinthClient, diff: Archon.Content.v1.SharedInstancePublishDiff): Promise<ContentDiffItem[]> {
-	const versionIds = new Set<string>()
-	for (const entry of diff.diffs) {
-		if (entry.type !== 'project' && entry.type !== 'modpack') continue
-		const values = [before(entry.change), after(entry.change)]
-		for (const id of values) if (id) versionIds.add(id)
+export function resolveServerShareDiff(diff: Archon.Content.v1.SharedInstancePublishDiff): ContentDiffItem[] {
+	const versionName = (id?: string) => {
+		if (!id) return undefined
+		const version = diff.versions?.[id]
+		return version?.version_number ?? version?.name ?? id
 	}
-	const versions = await Promise.all([...versionIds].map((id) => client.labrinth.versions_v3.getVersion(id)))
-	const projectIds = [...new Set(versions.map((version) => version.project_id))]
-	const projects = projectIds.length ? await client.labrinth.projects_v3.getMultiple(projectIds) : []
-	const versionName = (id?: string) => versions.find((version) => version.id === id)?.version_number ?? id
 	return diff.diffs.map((entry): ContentDiffItem => {
 		if (entry.type === 'external_file') return { type: entry.kind, fileName: encodeURIComponent(entry.file_name) }
 		if (entry.type === 'loader') {
@@ -24,10 +19,11 @@ export async function resolveServerShareDiff(client: AbstractModrinthClient, dif
 			return { type: 'loader_updated', currentVersionName: label(before(entry.change)), newVersionName: label(after(entry.change)) }
 		}
 		if (entry.type === 'game_version') return { type: 'game_version_updated', currentVersionName: before(entry.change), newVersionName: after(entry.change) }
-		const projectId = entry.type === 'project' ? entry.project_id : versions.find((version) => version.id === (after(entry.change) ?? before(entry.change)))?.project_id
+		const versionId = after(entry.change) ?? before(entry.change)
+		const projectId = entry.type === 'project' ? entry.project_id : versionId ? diff.versions?.[versionId]?.project_id : undefined
 		return {
 			type: entry.type === 'project' ? entry.change.kind : entry.change.kind === 'added' ? 'modpack_linked' : entry.change.kind === 'removed' ? 'modpack_unlinked' : 'modpack_updated',
-			projectName: projects.find((project) => project.id === projectId)?.title ?? projectId,
+			projectName: (projectId ? diff.projects?.[projectId]?.name ?? projectId : versionId),
 			currentVersionName: versionName(before(entry.change)),
 			newVersionName: versionName(after(entry.change)),
 		}
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/use-server-players.ts b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/use-server-players.ts
index 911836080be..00d0300fdef 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/use-server-players.ts
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/use-server-players.ts
@@ -3,6 +3,7 @@ import { computed, type Ref } from 'vue'
 
 import type { InviteLinkSettings, InvitePlayersUser } from '#ui/components/sharing'
 import { injectAuth, injectModrinthClient } from '#ui/providers'
+import { sharedInstanceInvitesQueryOptions } from '#ui/layouts/shared/server-sharing'
 
 import type { ServerPlayerRow } from './types'
 
@@ -12,7 +13,6 @@ export function useServerPlayers(instanceId: Ref<string | null>, canManage: Ref<
 	const queryClient = useQueryClient()
 	const userId = computed(() => auth.user.value?.id)
 	const memberKey = (id: string) => ['shared-instances', id, 'players', userId.value] as const
-	const inviteKey = (id: string) => ['shared-instances', id, 'invites', userId.value] as const
 	const members = useQuery({
 		queryKey: computed(() => memberKey(instanceId.value ?? '')),
 		enabled: computed(() => !!instanceId.value && !!userId.value),
@@ -60,20 +60,46 @@ export function useServerPlayers(instanceId: Ref<string | null>, canManage: Ref<
 		}
 		return [...candidates.values()]
 	})
-	const links = useQuery({
-		queryKey: computed(() => inviteKey(instanceId.value ?? '')),
-		enabled: computed(() => !!instanceId.value && canManage.value),
-		queryFn: () => client.sharedinstances.invites_v1.list(instanceId.value!),
-	})
+	const links = useQuery(computed(() => ({
+		...sharedInstanceInvitesQueryOptions(client, instanceId.value ?? '', userId.value),
+		enabled: !!instanceId.value && !!userId.value && canManage.value,
+	})))
 	const link = computed(() => links.data.value?.find((link) => new Date(link.expiration).getTime() > Date.now() && link.uses < link.max_uses))
 
 	const membershipMutation = useMutation({
-		mutationFn: async ({ id, userId, remove }: { id: string; userId: string; remove: boolean }) => {
+		mutationFn: async ({ id, userId, remove }: { id: string; userId: string; remove: boolean; user?: InvitePlayersUser }) => {
 			if (!canManage.value) throw new Error('You do not have permission to manage players.')
 			if (remove) return client.sharedinstances.instances_v1.removeUsers(id, [userId])
 			const result = await client.sharedinstances.instances_v1.inviteUsers(id, [userId])
 			if (result.failed.includes(userId)) throw new Error('This player’s privacy settings do not allow this invitation.')
 		},
+		onMutate: async ({ id, userId, remove, user }) => {
+			const queryKey = memberKey(id)
+			await queryClient.cancelQueries({ queryKey, exact: true })
+			const previous = queryClient.getQueryData<{ rows: ServerPlayerRow[]; remaining: number }>(queryKey)
+			if (previous) {
+				const exists = previous.rows.some((row) => row.id === userId)
+				const addedRow: ServerPlayerRow = {
+					id: userId,
+					username: user?.username ?? userId,
+					avatarUrl: user?.avatarUrl ?? undefined,
+					joinedAt: null,
+					lastPlayedAt: null,
+					pending: true,
+					method: 'direct',
+				}
+				queryClient.setQueryData(queryKey, {
+					rows: remove
+						? previous.rows.filter((row) => row.id !== userId)
+						: exists ? previous.rows : [...previous.rows, addedRow],
+					remaining: Math.max(0, previous.remaining + (remove ? Number(exists) : -Number(!exists))),
+				})
+			}
+			return { queryKey, previous }
+		},
+		onError: (_error, _variables, context) => {
+			if (context?.previous) queryClient.setQueryData(context.queryKey, context.previous)
+		},
 		onSettled: (_data, _error, { id }) => queryClient.invalidateQueries({ queryKey: ['shared-instances', id, 'players'] }),
 	})
 	const linkMutation = useMutation({
@@ -96,7 +122,7 @@ export function useServerPlayers(instanceId: Ref<string | null>, canManage: Ref<
 	})
 
 	async function ensureLink(id: string) {
-		const available = await queryClient.fetchQuery({ queryKey: inviteKey(id), queryFn: () => client.sharedinstances.invites_v1.list(id), staleTime: 0 })
+		const available = await queryClient.fetchQuery({ ...sharedInstanceInvitesQueryOptions(client, id, userId.value), staleTime: 0 })
 		if (available.some((link) => new Date(link.expiration).getTime() > Date.now() && link.uses < link.max_uses)) return
 		if (remaining.value <= 0) return
 		await linkMutation.mutateAsync({ id, settings: { maxUses: Math.min(10, remaining.value), expiresAt: new Date(Date.now() + 86400_000) } })
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
index fdf9a2b5f42..89b4840ba6c 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
@@ -292,6 +292,7 @@
 	<Suspense>
 		<ServerSettingsModal
 			ref="serverSettingsModal"
+			:site-url="siteUrl"
 			:resolve-viewer="resolveViewer"
 			:browse-modpacks="handleBrowseModpacks"
 		/>
diff --git a/packages/ui/src/utils/truncate.ts b/packages/ui/src/utils/truncate.ts
index 9d442614146..f03acf5ae91 100644
--- a/packages/ui/src/utils/truncate.ts
+++ b/packages/ui/src/utils/truncate.ts
@@ -24,7 +24,9 @@ export function truncatedTooltip(
 	if (!el) return undefined
 	if (!tooltipText) return undefined
 
-	return el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight
-		? tooltipText
-		: undefined
+	if (el.scrollWidth > el.clientWidth) return tooltipText
+
+	// Single-line labels can overflow vertically because of font metrics without being truncated.
+	const wraps = getComputedStyle(el).whiteSpace !== 'nowrap'
+	return wraps && el.scrollHeight > el.clientHeight ? tooltipText : undefined
 }
diff --git a/standards/frontend/COMPONENT_STRUCTURE.md b/standards/frontend/COMPONENT_STRUCTURE.md
index f48ae26e96f..3f7dd051a00 100644
--- a/standards/frontend/COMPONENT_STRUCTURE.md
+++ b/standards/frontend/COMPONENT_STRUCTURE.md
@@ -8,9 +8,9 @@ Give each complex component its own folder:
 components/
 └── analytics-chart/
 	├── index.vue
-	├── analytics-chart-header.vue
-	├── analytics-chart-plot.vue
-	├── analytics-chart-data.ts
+	├── header.vue
+	├── plot.vue
+	├── data.ts
 	└── use-analytics-chart.ts
 ```
 
@@ -37,9 +37,9 @@ Keep files for only one component in that component's folder:
 ```
 analytics-chart/
 ├── index.vue
-├── analytics-chart-header.vue
-├── analytics-chart-plot.vue
-├── analytics-chart-tooltip.vue
+├── header.vue
+├── plot.vue
+├── tooltip.vue
 ├── chart-ranges.ts
 └── use-chart-hover-state.ts
 ```
@@ -60,8 +60,8 @@ Use clear names that show the relation between each subcomponent and its main co
 ```
 analytics-chart/
 ├── index.vue
-├── analytics-chart-header.vue
-└── analytics-chart-plot.vue
+├── header.vue
+└── plot.vue
 ```
 
 Do not use names that make a local component look like a public component:
@@ -73,7 +73,7 @@ analytics-chart/
 └── header.vue
 ```
 
-Add the `analytics-chart-` prefix to local filenames. This prefix shows the relation in search results, editor tabs, and imports.
+Add the `` prefix to local filenames. This prefix shows the relation in search results, editor tabs, and imports.
 
 ## Nesting
 
@@ -84,8 +84,8 @@ Use this structure:
 ```
 analytics-chart/
 ├── index.vue
-├── analytics-chart-header.vue
-├── analytics-chart-plot.vue
+├── header.vue
+├── plot.vue
 ├── use-chart-hover-state.ts
 └── use-chart-selection.ts
 ```

From b92069c7d2986750dcc5ba16f59eb8d245094659 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Wed, 16 Sep 2026 16:43:35 +0100
Subject: [PATCH 10/13] fix: csp

---
 apps/app/tauri.conf.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/app/tauri.conf.json b/apps/app/tauri.conf.json
index 9552e0c77c1..22a2e2f5f32 100644
--- a/apps/app/tauri.conf.json
+++ b/apps/app/tauri.conf.json
@@ -102,7 +102,7 @@
 			"capabilities": ["ads", "core", "plugins"],
 			"csp": {
 				"default-src": "'self' customprotocol: asset:",
-				"connect-src": "ipc: http://ipc.localhost https://modrinth.com https://*.modrinth.com https://*.nodes.modrinth.com https://*.posthog.com https://posthog.modrinth.com https://*.sentry.io https://api.mclo.gs http://textures.minecraft.net https://textures.minecraft.net https://js.stripe.com https://*.stripe.com wss://*.stripe.com https://*.intercom.io wss://*.intercom.io https://*.intercomcdn.com https://www.intercom-reporting.com https://app.getsentry.com wss://*.nodes.modrinth.com https://kyros-test2.tail029726.ts.net wss://kyros-test2.tail029726.ts.net https://fill.papermc.io https://api.purpurmc.org 'self' data: blob:",
+				"connect-src": "ipc: http://ipc.localhost https://modrinth.com https://*.modrinth.com https://*.nodes.modrinth.com https://*.posthog.com https://posthog.modrinth.com https://*.sentry.io https://api.mclo.gs http://textures.minecraft.net https://textures.minecraft.net https://js.stripe.com https://*.stripe.com wss://*.stripe.com https://*.intercom.io wss://*.intercom.io https://*.intercomcdn.com https://www.intercom-reporting.com https://app.getsentry.com wss://*.nodes.modrinth.com https://kyros-test3.tail029726.ts.net wss://kyros-test3.tail029726.ts.net https://fill.papermc.io https://api.purpurmc.org 'self' data: blob:",
 				"font-src": ["https://cdn.modrinth.com/fonts/", "https://js.intercomcdn.com"],
 				"img-src": "https: 'unsafe-inline' 'self' asset: http://asset.localhost http://textures.minecraft.net blob: data:",
 				"style-src": "'unsafe-inline' 'self'",

From 1aed2ec4ad6100b01ed0bede1faecaefa86be440 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Wed, 16 Sep 2026 17:56:22 +0100
Subject: [PATCH 11/13] fix: use correct shared instances api for staging
 archon

---
 apps/frontend/src/helpers/api.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/frontend/src/helpers/api.ts b/apps/frontend/src/helpers/api.ts
index 4a2af135c0a..b8c2bec23b0 100644
--- a/apps/frontend/src/helpers/api.ts
+++ b/apps/frontend/src/helpers/api.ts
@@ -39,7 +39,10 @@ export function createModrinthClient(
 		labrinthBaseUrl: config.apiBaseUrl,
 		archonBaseUrl: () =>
 			withStagingArchonBaseUrl(config.archonBaseUrl, flags.value.archonApiStaging),
-		sharedInstancesBaseUrl: config.sharedInstancesBaseUrl,
+		sharedInstancesBaseUrl: () =>
+			flags.value.archonApiStaging
+				? 'https://staging-shared-instances.modrinth.com'
+				: config.sharedInstancesBaseUrl,
 		userAgent: () => (import.meta.server ? getFrontendUserAgent(config.commitHash) : undefined),
 		headers: visitorUserAgent ? { [VISITOR_USER_AGENT_HEADER]: visitorUserAgent } : undefined,
 		archonSentryCapture: () => flags.value.archonSentryCapture,

From 78a476a2f29a09606b8b83a4b86b92aefc659d2b Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Wed, 16 Sep 2026 18:01:48 +0100
Subject: [PATCH 12/13] fix: archon

---
 packages/app-lib/.env.prod-with-staging-archon | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app-lib/.env.prod-with-staging-archon b/packages/app-lib/.env.prod-with-staging-archon
index d27b5433835..04cf875ab11 100644
--- a/packages/app-lib/.env.prod-with-staging-archon
+++ b/packages/app-lib/.env.prod-with-staging-archon
@@ -1,6 +1,6 @@
 MODRINTH_URL=https://modrinth.com/
 MODRINTH_API_BASE_URL=https://api.modrinth.com/
-SHARED_INSTANCES_API_BASE_URL=https://shared-instances.modrinth.com/
+SHARED_INSTANCES_API_BASE_URL=https://staging-shared-instances.modrinth.com/
 MODRINTH_ARCHON_BASE_URL=https://staging-archon.modrinth.com/
 MODRINTH_API_URL=https://api.modrinth.com/v2/
 MODRINTH_API_URL_V3=https://api.modrinth.com/v3/

From b0875618538332e9138589a2db65d01df300bc62 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Thu, 17 Sep 2026 15:27:26 +0100
Subject: [PATCH 13/13] fix: missing features

---
 .../ui/hosting/HostingPlayHandler.vue         |  70 ++--
 .../use-shared-instance-invite-handler.ts     |  15 +-
 .../instances/use-hosting-instance.ts         |  29 +-
 .../instances/use-instance-launch-state.ts    |  18 +
 .../src/helpers/shared-instance-errors.ts     |  15 +-
 .../src/pages/hosting/manage/Index.vue        |   8 +-
 .../src/pages/hosting/manage/Overview.vue     |   2 +-
 .../src/pages/instance/layout.vue             |  14 +-
 .../share/shared-instance-members-table.vue   | 322 ++----------------
 .../share/shared-instance-share-types.ts      |  26 +-
 apps/app/capabilities/plugins.json            |   7 +-
 .../src/modules/archon/content/v1.ts          |   3 +-
 .../src/modules/shared-instances/types.ts     |   1 +
 packages/app-lib/src/api/instance.rs          |   1 +
 .../app-lib/src/api/instance/shared/client.rs |   9 +-
 .../app-lib/src/api/instance/shared/diff.rs   |  23 +-
 .../src/api/instance/shared/install.rs        |  40 ++-
 .../app-lib/src/api/instance/shared/mod.rs    |   1 +
 .../src/api/instance/shared/publish.rs        |   2 +-
 packages/app-lib/src/api/pack/install_from.rs |  16 +-
 packages/app-lib/src/install/model.rs         |   8 +
 .../app-lib/src/install/shared_instance.rs    |  58 +++-
 .../ui/src/components/base/BaseTerminal.vue   |  15 +-
 .../ui/src/components/base/IntlFormatted.vue  |  14 +-
 .../servers/ServerConfigFilePicker.vue        | 146 ++++++++
 .../admonitions/ServerPanelAdmonitions.vue    |  34 +-
 .../ui/src/composables/hosting-intercom.ts    |  33 +-
 packages/ui/src/layouts/index.ts              |   1 +
 .../ui/src/layouts/shared/console/layout.vue  |  19 +-
 .../composables/use-invited-players-table.ts  |  77 +++++
 .../layouts/shared/invited-players/index.ts   |   2 +
 .../layouts/shared/invited-players/layout.vue | 228 +++++++++++++
 .../layouts/shared/invited-players/types.ts   |  16 +
 .../manage/[id]/play/ServerPlayersTable.vue   | 201 -----------
 .../wrapped/hosting/manage/[id]/play/play.vue |  70 +++-
 .../wrapped/hosting/manage/[id]/play/types.ts |  15 +-
 .../wrapped/hosting/manage/overview.vue       |  15 +-
 .../layouts/wrapped/hosting/manage/root.vue   |  15 +-
 packages/ui/src/providers/page-context.ts     |   1 +
 39 files changed, 924 insertions(+), 666 deletions(-)
 create mode 100644 apps/app-frontend/src/composables/instances/use-instance-launch-state.ts
 create mode 100644 packages/ui/src/components/servers/ServerConfigFilePicker.vue
 create mode 100644 packages/ui/src/layouts/shared/invited-players/composables/use-invited-players-table.ts
 create mode 100644 packages/ui/src/layouts/shared/invited-players/index.ts
 create mode 100644 packages/ui/src/layouts/shared/invited-players/layout.vue
 create mode 100644 packages/ui/src/layouts/shared/invited-players/types.ts
 delete mode 100644 packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayersTable.vue

diff --git a/apps/app-frontend/src/components/ui/hosting/HostingPlayHandler.vue b/apps/app-frontend/src/components/ui/hosting/HostingPlayHandler.vue
index fd230fda5e2..17498a9531f 100644
--- a/apps/app-frontend/src/components/ui/hosting/HostingPlayHandler.vue
+++ b/apps/app-frontend/src/components/ui/hosting/HostingPlayHandler.vue
@@ -15,6 +15,7 @@
 </template>
 
 <script setup lang="ts">
+import type { Archon } from '@modrinth/api-client'
 import { DownloadIcon } from '@modrinth/assets'
 import { ContentDiffModal, type ContentDiffItem, getHostingServerAddress, defineMessages, injectAuth, injectModrinthClient, injectNotificationManager, type ServerPlayTarget, useVIntl } from '@modrinth/ui'
 import { useMutation, useQueryClient } from '@tanstack/vue-query'
@@ -24,20 +25,24 @@ import { useRouter } from 'vue-router'
 import ModrinthAccountRequiredModal from '@/components/ui/modal/ModrinthAccountRequiredModal.vue'
 import SharedInstanceInstallModal from '@/components/ui/shared-instances/shared-instance-install-modal/index.vue'
 import { hostingInstanceMetadata, useHostingInstanceCache } from '@/composables/instances/use-hosting-instance'
+import { useInstanceLaunchState } from '@/composables/instances/use-instance-launch-state'
 import { toError } from '@/helpers/errors'
 import { install_job_list, install_get_shared_instance_preview, install_get_shared_instance_update_preview, install_shared_instance, install_update_shared_instance, installJobInstanceId, wait_for_install_job } from '@/helpers/install'
 import { get, list } from '@/helpers/instance'
 import { get as getCredentials, type ModrinthAuthFlow } from '@/helpers/mr_auth'
+import { get_by_instance_id } from '@/helpers/process'
 import { ensureManagedServerWorldExists, start_join_server } from '@/helpers/worlds'
+import { instanceKeys } from '@/pages/instance/query-options'
 import { injectAppEvents } from '@/providers/app-events'
 
-type LaunchTarget = ServerPlayTarget & { sharedInstanceId: string; name: string; address: string; userId: string; icon: string | null }
+type LaunchTarget = ServerPlayTarget & { sharedInstanceId: string; name: string; userId: string; icon: string | null }
 const auth = injectAuth()
 const client = injectModrinthClient()
 const appEvents = injectAppEvents()
 const queryClient = useQueryClient()
 const router = useRouter()
 const hostingInstances = useHostingInstanceCache()
+const instanceLaunch = useInstanceLaunchState()
 const { handleError } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 const accountModal = ref<InstanceType<typeof ModrinthAccountRequiredModal>>()
@@ -61,23 +66,35 @@ async function findInstance(target: LaunchTarget) {
 	}
 	return instance
 }
+async function openAndLaunch(instanceId: string, launch: () => Promise<void>) {
+	await instanceLaunch.run(instanceId, async () => {
+		await router.push(`/instance/${encodeURIComponent(instanceId)}`)
+		const processes = await get_by_instance_id(instanceId)
+		queryClient.setQueryData(instanceKeys.processes(instanceId), Array.isArray(processes) ? processes : [])
+		if (Array.isArray(processes) && processes.length) return
+		await launch()
+	})
+}
 async function join(target: LaunchTarget, instanceId: string) {
 	await assertAccount(target)
-	const server = await client.archon.servers_v1.get(target.serverId)
+	const [server, legacy] = await Promise.all([
+		client.archon.servers_v1.get(target.serverId),
+		client.archon.servers_v0.get(target.serverId),
+	])
 	if (!server.worlds.some((world) => world.id === target.worldId && world.is_active && world.content?.shared_instance_id === target.sharedInstanceId)) {
 		throw new Error(formatMessage(messages.worldChanged))
 	}
 	await assertAccount(target)
 	const instance = await get(instanceId)
 	if (!instance || instance.quarantined || instance.install_stage !== 'installed') throw new Error(formatMessage(messages.notReady))
-	const legacy = await client.archon.servers_v0.get(target.serverId)
 	const address = getHostingServerAddress(legacy.net, server.subdomain)
 	if (!address) throw new Error(formatMessage(messages.noAddress))
 	await assertAccount(target)
 	await ensureManagedServerWorldExists(instanceId, target.name, address)
 	hostingInstances.value[instanceId] = hostingInstanceMetadata(server, target.worldId, target.sharedInstanceId, address)
-	await router.push(`/instance/${encodeURIComponent(instanceId)}`)
+	await assertAccount(target)
 	await start_join_server(instanceId, address)
+	queryClient.setQueryData(instanceKeys.processes(instanceId), [true])
 }
 const launchMutation = useMutation({
 	mutationFn: async ({ target, instanceId }: { target: LaunchTarget; instanceId?: string }) => {
@@ -86,17 +103,19 @@ const launchMutation = useMutation({
 		if (instanceId && existing?.id !== instanceId) throw new Error(formatMessage(messages.notReady))
 		if (existing) {
 			if (existing.quarantined || existing.install_stage !== 'installed') throw new Error(formatMessage(messages.notReady))
-			const update = await install_get_shared_instance_update_preview(existing.id)
-			await assertAccount(target)
-			if (update?.updateAvailable) {
-				if (!instanceId) {
-					showUpdate(target, existing.id, update)
-					return
+			await openAndLaunch(existing.id, async () => {
+				const update = await install_get_shared_instance_update_preview(existing.id)
+				await assertAccount(target)
+				if (update?.updateAvailable) {
+					if (!instanceId) {
+						showUpdate(target, existing.id, update)
+						return
+					}
+					const job = await install_update_shared_instance(existing.id)
+					await wait_for_install_job(appEvents, job.job_id)
 				}
-				const job = await install_update_shared_instance(existing.id)
-				await wait_for_install_job(appEvents, job.job_id)
-			}
-			await join(target, existing.id)
+				await join(target, existing.id)
+			})
 		} else {
 			await assertAccount(target)
 			const job = await install_shared_instance(target.sharedInstanceId, target.name, null, target.name, target.icon, target.icon)
@@ -104,7 +123,7 @@ const launchMutation = useMutation({
 			if (!installedId) throw new Error(formatMessage(messages.notReady))
 			await queryClient.invalidateQueries({ queryKey: ['instances'] })
 			await wait_for_install_job(appEvents, job.job_id)
-			await join(target, installedId)
+			await openAndLaunch(installedId, () => join(target, installedId))
 		}
 	},
 	onError: (error) => handleError(toError(error)),
@@ -135,23 +154,26 @@ const prepareMutation = useMutation({
 		if (!auth.session_token.value && !(await accountModal.value?.show())) return
 		const credentials = await getCredentials()
 		if (!credentials) return
-		const [server, legacy] = await Promise.all([client.archon.servers_v1.get(serverId), client.archon.servers_v0.get(serverId)])
+		const server = queryClient.getQueryData<Archon.Servers.v1.ServerFull>(['servers', 'v1', 'detail', serverId])
+			?? await client.archon.servers_v1.get(serverId)
 		const world = server.worlds.find((world) => world.id === worldId && world.is_active)
 		const sharedInstanceId = world?.content?.shared_instance_id
 		if (!sharedInstanceId) throw new Error(formatMessage(messages.worldChanged))
-		const remote = await client.sharedinstances.instances_v1.get(sharedInstanceId)
-		const address = getHostingServerAddress(legacy.net, server.subdomain)
-		if (!address) throw new Error(formatMessage(messages.noAddress))
-		const target: LaunchTarget = { serverId, worldId, sharedInstanceId, name: remote.name, address, userId: credentials.user_id, icon: remote.icon }
+		const target: LaunchTarget = { serverId, worldId, sharedInstanceId, name: server.name, userId: credentials.user_id, icon: null }
 		await assertAccount(target)
 		const existing = await findInstance(target)
 		if (existing) {
 			if (existing.quarantined || existing.install_stage !== 'installed') throw new Error(formatMessage(messages.notReady))
-			const preview = await install_get_shared_instance_update_preview(existing.id)
-			await assertAccount(target)
-			if (preview?.updateAvailable) showUpdate(target, existing.id, preview)
-			else await join(target, existing.id)
+			await openAndLaunch(existing.id, async () => {
+				const preview = await install_get_shared_instance_update_preview(existing.id)
+				await assertAccount(target)
+				if (preview?.updateAvailable) showUpdate(target, existing.id, preview)
+				else await join(target, existing.id)
+			})
 		} else {
+			const remote = await client.sharedinstances.instances_v1.get(sharedInstanceId)
+			target.name = remote.name
+			target.icon = remote.icon
 			const preview = await install_get_shared_instance_preview(sharedInstanceId, target.name)
 			await assertAccount(target)
 			if (remote.icon) preview.iconUrl = remote.icon
diff --git a/apps/app-frontend/src/components/ui/shared-instances/shared-instance-invite-handler/use-shared-instance-invite-handler.ts b/apps/app-frontend/src/components/ui/shared-instances/shared-instance-invite-handler/use-shared-instance-invite-handler.ts
index 00bd70b9c04..173ba7dfd73 100644
--- a/apps/app-frontend/src/components/ui/shared-instances/shared-instance-invite-handler/use-shared-instance-invite-handler.ts
+++ b/apps/app-frontend/src/components/ui/shared-instances/shared-instance-invite-handler/use-shared-instance-invite-handler.ts
@@ -53,8 +53,7 @@ export function useSharedInstanceInviteHandler(
 	const auth = injectAuth()
 	const client = injectModrinthClient()
 	const { handleError } = injectNotificationManager()
-	const { notifySharedInstanceConnectionError, notifySharedInstanceError } =
-		useSharedInstanceErrors()
+	const { notifySharedInstanceError } = useSharedInstanceErrors()
 	const popupNotificationManager = injectPopupNotificationManager()
 	const queryClient = useQueryClient()
 	const router = useRouter()
@@ -83,21 +82,15 @@ export function useSharedInstanceInviteHandler(
 	}
 
 	async function resolveInvite(invite: SharedInstanceInvite) {
-		const [invitedBy, sharedInstance] = await Promise.all([
+		const invitedBy =
 			(!invite.invitedByUsername || !invite.invitedByAvatarUrl) && invite.invitedById
-				? get_user(invite.invitedById, 'bypass').catch(() => null)
-				: null,
-			client.sharedinstances.instances_v1.get(invite.sharedInstanceId).catch(() => {
-				notifySharedInstanceConnectionError()
-				return null
-			}),
-		])
+				? await get_user(invite.invitedById, 'bypass').catch(() => null)
+				: null
 
 		return {
 			...invite,
 			invitedByUsername: invite.invitedByUsername ?? invitedBy?.username ?? null,
 			invitedByAvatarUrl: invite.invitedByAvatarUrl ?? invitedBy?.avatar_url ?? null,
-			instanceIconUrl: sharedInstance ? sharedInstance.icon : invite.instanceIconUrl,
 		}
 	}
 
diff --git a/apps/app-frontend/src/composables/instances/use-hosting-instance.ts b/apps/app-frontend/src/composables/instances/use-hosting-instance.ts
index 1034b212c74..516b06c3c0d 100644
--- a/apps/app-frontend/src/composables/instances/use-hosting-instance.ts
+++ b/apps/app-frontend/src/composables/instances/use-hosting-instance.ts
@@ -1,5 +1,5 @@
 import type { Archon } from '@modrinth/api-client'
-import { getHostingServerAddress, injectAuth, injectModrinthClient } from '@modrinth/ui'
+import { injectAuth, injectModrinthClient } from '@modrinth/ui'
 import { useQuery } from '@tanstack/vue-query'
 import { useStorage } from '@vueuse/core'
 import { computed, type Ref, watch } from 'vue'
@@ -9,8 +9,8 @@ import { get_instance_worlds } from '@/helpers/worlds'
 
 type HostingInstanceMetadata = {
 	sharedInstanceId: string
-	serverId: string
-	worldId: string
+	serverId?: string
+	worldId?: string
 	address: string
 	region?: string
 }
@@ -41,7 +41,6 @@ export function useHostingInstance(instance: Ref<GameInstance | undefined>, offl
 	const client = injectModrinthClient()
 	const auth = injectAuth()
 	const cache = useHostingInstanceCache()
-	const isHostingInstance = computed(() => !!instance.value?.shared_instance?.server_manager_name)
 	const saved = computed(() => {
 		const current = instance.value
 		const metadata = current && cache.value[current.id]
@@ -49,19 +48,22 @@ export function useHostingInstance(instance: Ref<GameInstance | undefined>, offl
 	})
 	const serverQuery = useQuery({
 		queryKey: computed(() => ['instances', instance.value?.id, 'hosting', auth.user.value?.id]),
-		enabled: computed(() => isHostingInstance.value && !offline.value && !!auth.user.value?.id && auth.user.value.id === instance.value?.shared_instance?.linked_user_id),
+		enabled: computed(() => !!instance.value?.shared_instance && !offline.value && !!auth.user.value?.id && auth.user.value.id === instance.value.shared_instance.linked_user_id),
 		queryFn: async () => {
 			const current = instance.value!
 			const sharedId = current.shared_instance!.id
 			const known = saved.value
-			const servers = known
-				? [await client.archon.servers_v1.get(known.serverId)]
-				: await client.archon.servers_v1.list()
-			const server = servers.find((server) => server.worlds.some((world) => world.content?.shared_instance_id === sharedId))
-			const world = server?.worlds.find((world) => world.content?.shared_instance_id === sharedId)
-			if (!server || !world) return null
-			const legacy = await client.archon.servers_v0.get(server.id)
-			return { instanceId: current.id, metadata: hostingInstanceMetadata(server, world.id, sharedId, getHostingServerAddress(legacy.net, server.subdomain)) }
+			const shared = await client.sharedinstances.instances_v1.get(sharedId)
+			if (!shared.linked_server) return null
+			return {
+				instanceId: current.id,
+				metadata: {
+					...known,
+					sharedInstanceId: sharedId,
+					address: shared.linked_server.domain,
+					region: shared.linked_server.region,
+				},
+			}
 		},
 		staleTime: 60_000,
 		retry: false,
@@ -69,6 +71,7 @@ export function useHostingInstance(instance: Ref<GameInstance | undefined>, offl
 	watch(serverQuery.data, (result) => {
 		if (result) cache.value[result.instanceId] = result.metadata
 	})
+	const isHostingInstance = computed(() => !!saved.value || !!instance.value?.shared_instance?.server_manager_name)
 	const worldsQuery = useQuery({
 		queryKey: computed(() => ['instances', instance.value?.id, 'hosting-worlds']),
 		enabled: computed(() => isHostingInstance.value && !saved.value && instance.value?.install_stage === 'installed'),
diff --git a/apps/app-frontend/src/composables/instances/use-instance-launch-state.ts b/apps/app-frontend/src/composables/instances/use-instance-launch-state.ts
new file mode 100644
index 00000000000..8a920347bc5
--- /dev/null
+++ b/apps/app-frontend/src/composables/instances/use-instance-launch-state.ts
@@ -0,0 +1,18 @@
+import { reactive } from 'vue'
+
+const startingInstances = reactive(new Set<string>())
+
+export function useInstanceLaunchState() {
+	return {
+		isStarting: (instanceId: string) => startingInstances.has(instanceId),
+		async run(instanceId: string, launch: () => Promise<void>) {
+			if (startingInstances.has(instanceId)) return
+			startingInstances.add(instanceId)
+			try {
+				await launch()
+			} finally {
+				startingInstances.delete(instanceId)
+			}
+		},
+	}
+}
diff --git a/apps/app-frontend/src/helpers/shared-instance-errors.ts b/apps/app-frontend/src/helpers/shared-instance-errors.ts
index 64126e94fe5..6538a1b1597 100644
--- a/apps/app-frontend/src/helpers/shared-instance-errors.ts
+++ b/apps/app-frontend/src/helpers/shared-instance-errors.ts
@@ -1,10 +1,7 @@
+import { ModrinthApiError } from '@modrinth/api-client'
 import { defineMessages, injectNotificationManager, useVIntl } from '@modrinth/ui'
 
-import {
-	getErrorMessage,
-	isSharedInstancesApiError,
-	type SharedInstanceUnavailableReason,
-} from '@/helpers/install'
+import { getErrorMessage, type SharedInstanceUnavailableReason } from '@/helpers/install'
 
 export const sharedInstanceErrorMessages = defineMessages({
 	unavailableTitle: {
@@ -108,15 +105,13 @@ export function useSharedInstanceErrors() {
 	}
 
 	function notifySharedInstanceError(error: unknown) {
-		if (isSharedInstancesApiError(error)) {
-			notifySharedInstanceConnectionError()
-			return
-		}
+		const message = getErrorMessage(error)
+		const status = error instanceof ModrinthApiError ? error.statusCode : undefined
 
 		addNotification({
 			type: 'error',
 			title: formatMessage(sharedInstanceErrorMessages.errorTitle),
-			text: getErrorMessage(error),
+			text: status && !message.includes(`HTTP ${status}`) ? `HTTP ${status}: ${message}` : message,
 		})
 	}
 
diff --git a/apps/app-frontend/src/pages/hosting/manage/Index.vue b/apps/app-frontend/src/pages/hosting/manage/Index.vue
index e182d1386fc..60f6a84bf23 100644
--- a/apps/app-frontend/src/pages/hosting/manage/Index.vue
+++ b/apps/app-frontend/src/pages/hosting/manage/Index.vue
@@ -1,11 +1,11 @@
 <template>
 	<div
-		class="h-full w-full pt-6"
-		:class="isContainedServerRoute ? 'box-border min-h-0 overflow-hidden' : ''"
+		class="w-full pt-6"
+		:class="isOverviewRoute ? 'flex min-h-full flex-col' : 'h-full'"
 	>
 		<ServersManageRootLayout
 			:server-id="serverId"
-			:layout-mode="isContainedServerRoute ? 'contained' : 'page'"
+			:layout-mode="isOverviewRoute ? 'fill' : 'page'"
 			:reload-page="() => router.go(0)"
 			:resolve-viewer="resolveViewer"
 			:show-copy-id-action="appSettings.devMode"
@@ -74,7 +74,7 @@ const queryClient = useQueryClient()
 const appSettings = useAppSettings()
 const { formatMessage } = useVIntl()
 
-const isContainedServerRoute = computed(() => route.name === 'ServerManageOverview')
+const isOverviewRoute = computed(() => route.name === 'ServerManageOverview')
 
 const serverId = computed(() => {
 	const rawId = route.params.id
diff --git a/apps/app-frontend/src/pages/hosting/manage/Overview.vue b/apps/app-frontend/src/pages/hosting/manage/Overview.vue
index 35665de0540..bc665166e19 100644
--- a/apps/app-frontend/src/pages/hosting/manage/Overview.vue
+++ b/apps/app-frontend/src/pages/hosting/manage/Overview.vue
@@ -3,5 +3,5 @@ import { ServersManageOverviewPage } from '@modrinth/ui'
 </script>
 
 <template>
-	<ServersManageOverviewPage contained-console />
+	<ServersManageOverviewPage fill-console />
 </template>
diff --git a/apps/app-frontend/src/pages/instance/layout.vue b/apps/app-frontend/src/pages/instance/layout.vue
index d1140970451..7a967d20880 100644
--- a/apps/app-frontend/src/pages/instance/layout.vue
+++ b/apps/app-frontend/src/pages/instance/layout.vue
@@ -36,7 +36,7 @@
 				:show-instance-play-time="showInstancePlayTime"
 				:time-played="timePlayed"
 				:playing="playing"
-				:loading="loading"
+				:loading="loading || checkingSharedInstanceLaunch || instanceLaunch.isStarting(instance.id)"
 				:stopping="stopping"
 				:loading-server-ping="loadingServerPing"
 				:players-online="playersOnline"
@@ -125,6 +125,7 @@ import {
 	getServerStatusQueryKey,
 } from '@/composables/instances/use-server-status-query'
 import { useAppEvent } from '@/composables/use-app-event'
+import { useInstanceLaunchState } from '@/composables/instances/use-instance-launch-state'
 import { useAppSettings } from '@/composables/use-app-settings.ts'
 import { handleSevereError } from '@/composables/use-error.js'
 import { useInstanceConsole } from '@/composables/useInstanceConsole'
@@ -322,6 +323,7 @@ useRootBreadcrumb({
 })
 
 const loading = ref(false)
+const instanceLaunch = useInstanceLaunchState()
 const checkingSharedInstanceLaunch = ref(false)
 const subpagePending = ref(false)
 const stopping = ref(false)
@@ -508,9 +510,11 @@ const launchInstance = async (context: string, address?: string) => {
 	const currentInstance = instance.value
 	loading.value = true
 	try {
-		if (address) await start_join_server(currentInstance.id, address)
-		else await run(currentInstance.id)
-		queryClient.setQueryData(instanceKeys.processes(currentInstance.id), [true])
+		await instanceLaunch.run(currentInstance.id, async () => {
+			if (address) await start_join_server(currentInstance.id, address)
+			else await run(currentInstance.id)
+			queryClient.setQueryData(instanceKeys.processes(currentInstance.id), [true])
+		})
 	} catch (err) {
 		handleSevereError(err, { instanceId: currentInstance.id })
 	}
@@ -565,7 +569,7 @@ function handleSharedInstanceUpdateComplete(successful: boolean) {
 
 const startInstance = async (context: string, address?: string) => {
 	if (!instance.value || instance.value.quarantined) return
-	if (checkingSharedInstanceLaunch.value || loading.value || playing.value) return
+	if (checkingSharedInstanceLaunch.value || loading.value || playing.value || instanceLaunch.isStarting(instance.value.id)) return
 
 	const instanceId = instance.value.id
 	const isSharedInstanceMember = instance.value.shared_instance?.role === 'member'
diff --git a/apps/app-frontend/src/pages/instance/share/shared-instance-members-table.vue b/apps/app-frontend/src/pages/instance/share/shared-instance-members-table.vue
index 35d81cabc0d..48fc6dac4f4 100644
--- a/apps/app-frontend/src/pages/instance/share/shared-instance-members-table.vue
+++ b/apps/app-frontend/src/pages/instance/share/shared-instance-members-table.vue
@@ -1,175 +1,42 @@
 <template>
-	<div class="flex flex-col gap-4">
-		<div class="flex flex-col gap-2">
-			<div class="flex items-center gap-2">
-				<Input
-					v-model="search"
-					:icon="SearchIcon"
-					:placeholder="`Search ${rows.length} users...`"
-					wrapper-class="min-w-0 flex-1"
-					input-class="!h-10"
-					clearable
-				/>
-				<template v-if="!actionsLocked">
-					<Button
-						type="outlined"
-						size="lg"
-						class="shrink-0 !border"
-						:disabled="pushUpdateDisabled"
-						@click="management.pushUpdate($event)"
-					>
-						<SpinnerIcon v-if="pushUpdatePending" class="animate-spin" aria-hidden="true" />
-						<UploadIcon v-else aria-hidden="true" />
-						{{ formatMessage(messages.pushUpdate) }}
-					</Button>
-					<Button
-						type="colored"
-						color="brand"
-						size="lg"
-						class="shrink-0"
-						:disabled="invitePending || inviteDisabled"
-						@click="management.invite($event)"
-					>
-						<SpinnerIcon v-if="invitePending" class="animate-spin" aria-hidden="true" />
-						<UserPlusIcon v-else aria-hidden="true" />
-						Invite friends
-					</Button>
-				</template>
-			</div>
-			<div v-if="hasMultipleMethods" class="flex flex-wrap items-center gap-1.5">
-				<FilterIcon class="size-5 shrink-0 text-secondary" aria-hidden="true" />
-				<button
-					:class="filterClass(methodFilter === 'all')"
-					:aria-pressed="methodFilter === 'all'"
-					@click="methodFilter = 'all'"
-				>
-					All
-				</button>
-				<button
-					v-for="option in methodFilterOptions"
-					:key="option.id"
-					:class="filterClass(methodFilter === option.id)"
-					:aria-pressed="methodFilter === option.id"
-					@click="toggleMethodFilter(option.id)"
-				>
-					{{ option.label }}
-				</button>
-			</div>
-		</div>
-
-		<Table
-			v-model:sort-column="sortColumn"
-			v-model:sort-direction="sortDirection"
-			:columns="columns"
-			:data="sortedRows"
-			row-key="id"
-			table-min-width="42rem"
-			@sort="handleSort"
-		>
-			<template #empty-state
-				><div class="flex h-64 items-center justify-center text-secondary">
-					{{
-						formatMessage(rows.length === 0 ? messages.noUsersJoined : messages.noUsersMatchFilters)
-					}}
-				</div></template
+	<InvitedPlayersTableLayout
+		:rows="rows"
+		:can-manage="!actionsLocked"
+		@remove="management.remove"
+	>
+		<template v-if="!actionsLocked" #toolbar-actions>
+			<Button
+				type="outlined"
+				size="lg"
+				class="shrink-0 !border"
+				:disabled="pushUpdateDisabled"
+				@click="management.pushUpdate($event)"
+			>
+				<SpinnerIcon v-if="pushUpdatePending" class="animate-spin" aria-hidden="true" />
+				<UploadIcon v-else aria-hidden="true" />
+				{{ formatMessage(messages.pushUpdate) }}
+			</Button>
+			<Button
+				type="colored"
+				color="brand"
+				size="lg"
+				class="shrink-0"
+				:disabled="invitePending || inviteDisabled"
+				@click="management.invite($event)"
 			>
-			<template #cell-username="{ row }">
-				<div class="flex min-w-0 max-w-full items-center gap-2">
-					<AutoLink
-						v-tooltip="truncatedTooltip(usernameRefs[row.id], row.username)"
-						:to="userProfileLink(row.username)"
-						class="inline-flex max-w-full min-w-0 items-center gap-2 text-primary hover:underline"
-					>
-						<Avatar
-							:src="row.avatarUrl"
-							:alt="`${row.username}'s avatar`"
-							:tint-by="row.username"
-							size="24px"
-							circle
-							no-shadow
-						/>
-						<span
-							:ref="(element) => setUsernameRef(row.id, element)"
-							class="min-w-0 truncate font-medium"
-							>{{ row.username }}</span
-						>
-					</AutoLink>
-				</div>
-			</template>
-			<template #cell-lastPlayed="{ row }">
-				<span v-if="row.lastPlayedAt" v-tooltip="formatDateTime(row.lastPlayedAt)">{{
-					formatRelativeTime(row.lastPlayedAt)
-				}}</span>
-				<span v-else>Never</span>
-			</template>
-			<template #cell-joined="{ row }">
-				<span
-					v-if="row.pending"
-					class="inline-flex h-7 items-center rounded-full border border-surface-5 border-solid bg-surface-4 px-2.5 py-1 text-sm font-semibold text-secondary"
-					>Pending</span
-				>
-				<span v-else-if="row.joinedAt" v-tooltip="formatDateTime(row.joinedAt)">{{
-					formatRelativeTime(row.joinedAt)
-				}}</span>
-			</template>
-			<template #cell-method="{ row }">
-				<span class="inline-flex min-w-0 items-center gap-2">
-					<UserPlusIcon v-if="row.method === 'direct'" class="size-5 shrink-0" aria-hidden="true" />
-					<LinkIcon v-else class="size-5 shrink-0" aria-hidden="true" />
-					<span class="min-w-0 truncate">{{ methodLabels[row.method] }}</span>
-				</span>
-			</template>
-			<template #cell-actions="{ row }">
-				<div v-if="!actionsLocked" class="flex items-center justify-end">
-					<IconButton
-						v-tooltip="'Revoke access'"
-						type="quiet"
-						:label="`Revoke access for ${row.username}`"
-						class="text-secondary hover:!filter-none hover:text-red focus-visible:!filter-none"
-						@click="management.remove(row)"
-					>
-						<XIcon aria-hidden="true"
-					/></IconButton>
-				</div>
-			</template>
-		</Table>
-	</div>
+				<SpinnerIcon v-if="invitePending" class="animate-spin" aria-hidden="true" />
+				<UserPlusIcon v-else aria-hidden="true" />
+				Invite friends
+			</Button>
+		</template>
+	</InvitedPlayersTableLayout>
 </template>
 
 <script setup lang="ts">
-import {
-	FilterIcon,
-	LinkIcon,
-	SearchIcon,
-	SpinnerIcon,
-	UploadIcon,
-	UserPlusIcon,
-	XIcon,
-} from '@modrinth/assets'
-import { Button, IconButton } from '@modrinth/ui'
-import {
-	AutoLink,
-	Avatar,
-	defineMessages,
-	Input,
-	type SortDirection,
-	Table,
-	type TableColumn,
-	truncatedTooltip,
-	useFormatDateTime,
-	useRelativeTime,
-	useVIntl,
-} from '@modrinth/ui'
-import { computed, ref, watch } from 'vue'
+import { SpinnerIcon, UploadIcon, UserPlusIcon } from '@modrinth/assets'
+import { Button, defineMessages, InvitedPlayersTableLayout, useVIntl } from '@modrinth/ui'
 
 import { injectSharedInstanceManagement } from './shared-instance-management-context'
-import {
-	type MethodFilter,
-	methodLabels,
-	type ShareMethod,
-	type ShareRow,
-	type ShareTableColumn,
-} from './shared-instance-share-types'
 
 const management = injectSharedInstanceManagement()
 const {
@@ -180,136 +47,11 @@ const {
 	pushUpdateDisabled,
 	pushUpdatePending,
 } = management
-const search = ref('')
-const methodFilter = ref<MethodFilter>('all')
-const sortColumn = ref<string | undefined>('joined')
-const sortDirection = ref<SortDirection>('desc')
-const usernameRefs = ref<Record<string, HTMLElement | null>>({})
 const { formatMessage } = useVIntl()
-const formatRelativeTime = useRelativeTime({ style: 'narrow' })
-const formatDateTime = useFormatDateTime({ dateStyle: 'medium', timeStyle: 'short' })
-const methodFilterOptions: Array<{ id: ShareMethod; label: string }> = [
-	{ id: 'direct', label: methodLabels.direct },
-	{ id: 'link', label: methodLabels.link },
-]
-const hasMultipleMethods = computed(() => new Set(rows.value.map((row) => row.method)).size > 1)
-const columns = computed<TableColumn<ShareTableColumn>[]>(() => {
-	const result: TableColumn<ShareTableColumn>[] = [
-		{
-			key: 'username',
-			label: 'Username',
-			width: 'clamp(14rem, 30%, 26rem)',
-			enableSorting: true,
-			headerClass: '!pr-3',
-			cellClass: '!pr-3',
-		},
-		{
-			key: 'lastPlayed',
-			label: 'Last played',
-			width: 'clamp(7rem, 15%, 13rem)',
-			enableSorting: true,
-			headerClass: 'whitespace-nowrap !px-2',
-			cellClass: 'whitespace-nowrap !px-2',
-		},
-		{
-			key: 'joined',
-			label: 'Joined',
-			width: 'clamp(7rem, 14%, 12rem)',
-			enableSorting: true,
-			defaultSortDirection: 'desc',
-			headerClass: 'whitespace-nowrap !px-2',
-			cellClass: 'whitespace-nowrap !px-2',
-		},
-		{
-			key: 'method',
-			label: 'Method',
-			enableSorting: true,
-			headerClass: 'whitespace-nowrap !px-2',
-			cellClass: 'whitespace-nowrap !px-2',
-		},
-	]
-	if (!actionsLocked.value)
-		result.push({
-			key: 'actions',
-			label: 'Actions',
-			align: 'right',
-			width: 'clamp(5.5rem, 7%, 7rem)',
-			headerClass: 'whitespace-nowrap !pl-2 !pr-4',
-			cellClass: 'whitespace-nowrap !pl-2 !pr-4',
-		})
-	return result
-})
-const filteredRows = computed(() => {
-	const query = search.value.trim().toLowerCase()
-	return rows.value.filter((row) => {
-		if (methodFilter.value !== 'all' && row.method !== methodFilter.value) return false
-		if (!query) return true
-		return [
-			row.username,
-			row.lastPlayedAt ? formatRelativeTime(row.lastPlayedAt) : 'Never',
-			row.pending ? 'Pending' : row.joinedAt ? formatRelativeTime(row.joinedAt) : '',
-			methodLabels[row.method],
-		].some((value) => value.toLowerCase().includes(query))
-	})
-})
-const sortedRows = computed(() => [...filteredRows.value].sort(compareRows))
-
-function compareRows(a: ShareRow, b: ShareRow) {
-	let compared: number
-	if (sortColumn.value === 'username') compared = a.username.localeCompare(b.username)
-	else if (sortColumn.value === 'lastPlayed')
-		compared =
-			(a.lastPlayedAt?.getTime() ?? Number.NEGATIVE_INFINITY) -
-			(b.lastPlayedAt?.getTime() ?? Number.NEGATIVE_INFINITY)
-	else if (sortColumn.value === 'method')
-		compared = methodLabels[a.method].localeCompare(methodLabels[b.method])
-	else
-		compared =
-			(a.pending ? Number.MAX_SAFE_INTEGER : (a.joinedAt?.getTime() ?? Number.NEGATIVE_INFINITY)) -
-				(b.pending
-					? Number.MAX_SAFE_INTEGER
-					: (b.joinedAt?.getTime() ?? Number.NEGATIVE_INFINITY)) ||
-			a.username.localeCompare(b.username)
-	return sortDirection.value === 'asc' ? compared : -compared
-}
-function handleSort(column: string, direction: SortDirection) {
-	sortColumn.value = column
-	sortDirection.value = direction
-}
-function toggleMethodFilter(filter: ShareMethod) {
-	methodFilter.value = methodFilter.value === filter ? 'all' : filter
-}
-function filterClass(active: boolean) {
-	return [
-		'cursor-pointer rounded-full border border-solid px-3 py-1.5 text-base font-semibold leading-5 transition-all duration-100 active:scale-[0.97]',
-		active
-			? 'border-brand bg-brand-highlight text-brand'
-			: 'border-surface-5 bg-surface-4 text-primary hover:bg-surface-5',
-	]
-}
-
-watch(hasMultipleMethods, (multiple) => {
-	if (!multiple) methodFilter.value = 'all'
-})
-
 const messages = defineMessages({
 	pushUpdate: {
 		id: 'app.instance.admonitions.shared-instance.publish-button',
 		defaultMessage: 'Push update',
 	},
-	noUsersJoined: {
-		id: 'app.instance.share.members.empty',
-		defaultMessage: 'No users have joined yet',
-	},
-	noUsersMatchFilters: {
-		id: 'app.instance.share.members.no-filter-results',
-		defaultMessage: 'No users match your filters.',
-	},
 })
-function userProfileLink(username: string) {
-	return !username || username.includes('@') ? undefined : `/user/${encodeURIComponent(username)}`
-}
-function setUsernameRef(id: string, element: Element | null) {
-	usernameRefs.value[id] = element instanceof HTMLElement ? element : null
-}
 </script>
diff --git a/apps/app-frontend/src/pages/instance/share/shared-instance-share-types.ts b/apps/app-frontend/src/pages/instance/share/shared-instance-share-types.ts
index a9bebd01c25..9938247ea0f 100644
--- a/apps/app-frontend/src/pages/instance/share/shared-instance-share-types.ts
+++ b/apps/app-frontend/src/pages/instance/share/shared-instance-share-types.ts
@@ -1,22 +1,8 @@
-export type ShareMethod = 'direct' | 'link'
-export type MethodFilter = ShareMethod | 'all'
-export type ShareTableColumn = 'username' | 'lastPlayed' | 'joined' | 'method' | 'actions'
+export {
+	invitedPlayerMethodLabels as methodLabels,
+	normalizeInviteKey,
+	type InvitedPlayerMethod as ShareMethod,
+	type InvitedPlayerRow as ShareRow,
+} from '@modrinth/ui'
 
 export const SHARED_INSTANCE_USER_LIMIT = 50
-
-export type ShareRow = {
-	id: string
-	username: string
-	avatarUrl?: string
-	lastPlayedAt: Date | null
-	joinedAt: Date | null
-	method: ShareMethod
-	pending?: boolean
-}
-
-export const methodLabels: Record<ShareMethod, string> = {
-	direct: 'Direct invite',
-	link: 'Share link',
-}
-
-export { normalizeInviteKey } from '@modrinth/ui'
diff --git a/apps/app/capabilities/plugins.json b/apps/app/capabilities/plugins.json
index b08053e33eb..bc72394dcfa 100644
--- a/apps/app/capabilities/plugins.json
+++ b/apps/app/capabilities/plugins.json
@@ -2,7 +2,9 @@
 	"identifier": "plugins",
 	"description": "",
 	"local": true,
-	"windows": ["main"],
+	"windows": [
+		"main"
+	],
 	"permissions": [
 		"dialog:allow-open",
 		"dialog:allow-confirm",
@@ -31,6 +33,9 @@
 				{
 					"url": "https://*.nodes.modrinth.com/*"
 				},
+				{
+					"url": "https://*.tail029726.ts.net/*"
+				},
 				{
 					"url": "https://api.mclo.gs/*"
 				},
diff --git a/packages/api-client/src/modules/archon/content/v1.ts b/packages/api-client/src/modules/archon/content/v1.ts
index ccb7a03fe68..a4a20939449 100644
--- a/packages/api-client/src/modules/archon/content/v1.ts
+++ b/packages/api-client/src/modules/archon/content/v1.ts
@@ -6,9 +6,10 @@ export class ArchonContentV1Module extends AbstractModule {
 		return 'archon_content_v1'
 	}
 
-	public async share(serverId: string, worldId: string): Promise<Archon.Content.v1.ShareWorldContentResponse> {
+	public async share(serverId: string, worldId: string, configPaths: string[] = []): Promise<Archon.Content.v1.ShareWorldContentResponse> {
 		return this.client.request(`/servers/${encodeURIComponent(serverId)}/worlds/${encodeURIComponent(worldId)}/content/share`, {
 			api: 'archon', version: 1, method: 'POST', timeout: 600_000, retry: false,
+			body: { config_paths: configPaths },
 		})
 	}
 
diff --git a/packages/api-client/src/modules/shared-instances/types.ts b/packages/api-client/src/modules/shared-instances/types.ts
index c41d30a55e9..773039d06fe 100644
--- a/packages/api-client/src/modules/shared-instances/types.ts
+++ b/packages/api-client/src/modules/shared-instances/types.ts
@@ -48,6 +48,7 @@ export namespace SharedInstances {
 				name: string
 				icon: string | null
 				quarantine: boolean
+				linked_server: { domain: string; region: string } | null
 			}
 
 			export type JoinType = 'owner' | 'invite' | 'link'
diff --git a/packages/app-lib/src/api/instance.rs b/packages/app-lib/src/api/instance.rs
index 8a0040f46a3..b80235b085b 100644
--- a/packages/app-lib/src/api/instance.rs
+++ b/packages/app-lib/src/api/instance.rs
@@ -76,6 +76,7 @@ pub use self::screenshots::{
 };
 pub(crate) use self::shared::{
     CONFIG_BUNDLE_FILE_TYPE, CONFIG_DIRECTORY, CONFIG_FILE_EXTENSIONS,
+	CONFIG_FILE_TYPE, MAX_CONFIG_BUNDLE_FILE_SIZE,
     CONFIG_SYNC_ENABLED, MAX_CONFIG_BUNDLE_ENTRIES,
     read_bounded_config_bundle_entry,
 };
diff --git a/packages/app-lib/src/api/instance/shared/client.rs b/packages/app-lib/src/api/instance/shared/client.rs
index bedd567b3fc..8982213a86f 100644
--- a/packages/app-lib/src/api/instance/shared/client.rs
+++ b/packages/app-lib/src/api/instance/shared/client.rs
@@ -34,6 +34,11 @@ pub(super) enum SharedInstanceRemoteResponse<T> {
 
 #[derive(Clone, Debug, Deserialize)]
 pub(super) struct RemoteInstanceResponse {
+	pub(super) name: String,
+	pub(super) icon: Option<String>,
+	#[serde(default)]
+	pub(super) linked_server:
+		Option<crate::install::model::SharedInstanceLinkedServer>,
     #[serde(default)]
     pub(super) quarantine: bool,
 }
@@ -242,7 +247,7 @@ pub(super) async fn update_remote_instance(
 pub(super) async fn get_remote_instance_access(
     shared_instance_id: &str,
     state: &State,
-) -> crate::Result<SharedInstanceRemoteResponse<()>> {
+) -> crate::Result<SharedInstanceRemoteResponse<RemoteInstanceResponse>> {
     let operation = "get_instance";
     let method = Method::GET;
     let path = format!("/instances/{shared_instance_id}");
@@ -278,7 +283,7 @@ pub(super) async fn get_remote_instance_access(
         ));
     }
 
-    Ok(SharedInstanceRemoteResponse::Available(()))
+    Ok(SharedInstanceRemoteResponse::Available(instance))
 }
 
 pub(super) async fn update_remote_instance_icon(
diff --git a/packages/app-lib/src/api/instance/shared/diff.rs b/packages/app-lib/src/api/instance/shared/diff.rs
index 357b9bd0ac4..82c6bca407b 100644
--- a/packages/app-lib/src/api/instance/shared/diff.rs
+++ b/packages/app-lib/src/api/instance/shared/diff.rs
@@ -32,7 +32,7 @@ pub(super) async fn shared_instance_update_diffs(
         configuration: after_configuration,
     };
 
-    shared_content_diffs(
+    let mut diffs = shared_content_diffs(
         &before,
         &after,
         &HashSet::new(),
@@ -40,7 +40,24 @@ pub(super) async fn shared_instance_update_diffs(
         CommonExternalFilePolicy::AssumeUpdated,
         state,
     )
-    .await
+    .await?;
+	let config_file_count = version.external_files
+		.iter()
+		.filter(|file| file.file_type == CONFIG_FILE_TYPE)
+		.count();
+	if config_file_count > 0 {
+		diffs.push(SharedInstanceUpdateDiff {
+			type_: SharedInstanceUpdateDiffType::ConfigFilesUpdated,
+			project_id: None,
+			project_name: None,
+			file_name: None,
+			current_version_name: None,
+			new_version_name: None,
+			config_file_count: Some(config_file_count),
+			disabled: false,
+		});
+	}
+	Ok(diffs)
 }
 
 pub(super) async fn shared_instance_publish_diffs(
@@ -456,7 +473,7 @@ fn remote_shared_content(
     let external_files = version
         .external_files
         .iter()
-        .filter(|file| file.file_type != CONFIG_BUNDLE_FILE_TYPE)
+        .filter(|file| !matches!(file.file_type.as_str(), CONFIG_BUNDLE_FILE_TYPE | CONFIG_FILE_TYPE))
         .map(|file| shared_external_file_key(&file.file_type, &file.file_name))
         .collect::<crate::Result<_>>()?;
     Ok((version_ids, external_files))
diff --git a/packages/app-lib/src/api/instance/shared/install.rs b/packages/app-lib/src/api/instance/shared/install.rs
index ea422033e28..9bb71f77a4b 100644
--- a/packages/app-lib/src/api/instance/shared/install.rs
+++ b/packages/app-lib/src/api/instance/shared/install.rs
@@ -142,7 +142,7 @@ pub(super) async fn shared_instance_install_preview_from_version(
     let external_files = version
         .external_files
         .iter()
-        .filter(|file| file.file_type != CONFIG_BUNDLE_FILE_TYPE)
+        .filter(|file| !matches!(file.file_type.as_str(), CONFIG_BUNDLE_FILE_TYPE | CONFIG_FILE_TYPE))
         .map(|file| SharedInstanceExternalFilePreview {
             file_name: file.file_name.clone(),
             file_type: file.file_type.clone(),
@@ -529,6 +529,22 @@ pub(super) async fn shared_instance_install_data(
         .into());
     }
 
+	let remote = match get_remote_instance_access(shared_instance_id, state)
+		.await?
+	{
+		SharedInstanceRemoteResponse::Available(remote) => remote,
+		SharedInstanceRemoteResponse::Unavailable(reason) => {
+			return Err(shared_instance_unavailable_error(reason));
+		}
+	};
+	let (manager_id, server_manager_name, server_manager_icon_url) =
+		if remote.linked_server.is_some() {
+			(None, Some(remote.name), remote.icon.clone())
+		} else {
+			(manager_id, server_manager_name, server_manager_icon_url)
+		};
+	let instance_icon_url = remote.icon.or(instance_icon_url);
+
     let name = shared_instance_name(name);
     let linked_user_id = linked_modrinth_user_id(state).await?;
     let modpack = shared_instance_install_modpack(&version, state).await?;
@@ -540,7 +556,29 @@ pub(super) async fn shared_instance_install_data(
         .filter(|id| Some(id.as_str()) != modpack_version_id)
         .collect();
 
+	let mut config_count = 0;
+	let mut config_size = 0_u64;
+	for file in &version.external_files {
+		if file.file_type == CONFIG_FILE_TYPE {
+			config_count += 1;
+			config_size = config_size.saturating_add(
+				file.file_size
+					.and_then(|size| u64::try_from(size).ok())
+					.unwrap_or(u64::MAX),
+			);
+		}
+	}
+	if config_count > MAX_CONFIG_BUNDLE_ENTRIES
+		|| config_size > MAX_CONFIG_BUNDLE_TOTAL_SIZE
+	{
+		return Err(crate::ErrorKind::InputError(
+			"Shared instance config files exceed the size or file count limit"
+				.to_string(),
+		).into());
+	}
+
     Ok(SharedInstanceInstallData {
+		linked_server: remote.linked_server,
         shared_instance_id: shared_instance_id.to_string(),
         manager_id,
         server_manager_name,
diff --git a/packages/app-lib/src/api/instance/shared/mod.rs b/packages/app-lib/src/api/instance/shared/mod.rs
index 4fdce76f1c8..730736cddf0 100644
--- a/packages/app-lib/src/api/instance/shared/mod.rs
+++ b/packages/app-lib/src/api/instance/shared/mod.rs
@@ -32,6 +32,7 @@ use std::io::Read;
 
 pub(crate) const CONFIG_BUNDLE_FILE_NAME: &str = "configs.zip";
 pub(crate) const CONFIG_BUNDLE_FILE_TYPE: &str = "configs";
+pub(crate) const CONFIG_FILE_TYPE: &str = "config";
 pub(crate) const CONFIG_SYNC_ENABLED: bool = true;
 pub(crate) const CONFIG_DIRECTORY: &str = "config";
 pub(crate) const MAX_CONFIG_BUNDLE_ENTRIES: usize = 4096;
diff --git a/packages/app-lib/src/api/instance/shared/publish.rs b/packages/app-lib/src/api/instance/shared/publish.rs
index e49218df069..1bf7c444c53 100644
--- a/packages/app-lib/src/api/instance/shared/publish.rs
+++ b/packages/app-lib/src/api/instance/shared/publish.rs
@@ -195,7 +195,7 @@ pub(super) async fn remote_publish_content(
         version
             .external_files
             .iter()
-            .filter(|file| file.file_type != CONFIG_BUNDLE_FILE_TYPE)
+            .filter(|file| !matches!(file.file_type.as_str(), CONFIG_BUNDLE_FILE_TYPE | CONFIG_FILE_TYPE))
             .map(|file| {
                 shared_external_file_key(&file.file_type, &file.file_name)
             })
diff --git a/packages/app-lib/src/api/pack/install_from.rs b/packages/app-lib/src/api/pack/install_from.rs
index 0dfa24941b4..9baca6e6a6e 100644
--- a/packages/app-lib/src/api/pack/install_from.rs
+++ b/packages/app-lib/src/api/pack/install_from.rs
@@ -630,12 +630,16 @@ pub async fn set_instance_information(
         &instance_id,
         EditInstance {
             install_stage: Some(InstanceInstallStage::PackInstalling),
-            name: Some(
-                description
-                    .override_title
-                    .clone()
-                    .unwrap_or_else(|| backup_name.to_string()),
-            ),
+			name: if matches!(&link, Some(InstanceLink::SharedInstance { .. })) {
+				None
+			} else {
+				Some(
+					description
+						.override_title
+						.clone()
+						.unwrap_or_else(|| backup_name.to_string()),
+				)
+			},
             icon_path: description
                 .icon
                 .as_ref()
diff --git a/packages/app-lib/src/install/model.rs b/packages/app-lib/src/install/model.rs
index c80a1878220..a2123dfe98c 100644
--- a/packages/app-lib/src/install/model.rs
+++ b/packages/app-lib/src/install/model.rs
@@ -212,8 +212,16 @@ pub struct InstallPostInstallEdit {
     pub link: Option<InstanceLink>,
 }
 
+#[derive(Serialize, Deserialize, Clone, Debug)]
+pub struct SharedInstanceLinkedServer {
+	pub domain: String,
+	pub region: String,
+}
+
 #[derive(Serialize, Deserialize, Clone, Debug)]
 pub struct SharedInstanceInstallData {
+	#[serde(default)]
+	pub linked_server: Option<SharedInstanceLinkedServer>,
     pub shared_instance_id: String,
     pub manager_id: Option<String>,
     #[serde(default)]
diff --git a/packages/app-lib/src/install/shared_instance.rs b/packages/app-lib/src/install/shared_instance.rs
index 102f1500b76..43b9dbcb917 100644
--- a/packages/app-lib/src/install/shared_instance.rs
+++ b/packages/app-lib/src/install/shared_instance.rs
@@ -9,6 +9,7 @@ use super::runner::{
 };
 use crate::api::instance::{
     CONFIG_BUNDLE_FILE_TYPE, CONFIG_DIRECTORY, CONFIG_FILE_EXTENSIONS,
+	CONFIG_FILE_TYPE, MAX_CONFIG_BUNDLE_FILE_SIZE,
     CONFIG_SYNC_ENABLED, MAX_CONFIG_BUNDLE_ENTRIES,
     read_bounded_config_bundle_entry,
 };
@@ -56,6 +57,15 @@ pub(super) async fn finalize_shared_instance_attachment(
     data: &SharedInstanceInstallData,
     state: &State,
 ) -> crate::Result<()> {
+	if let Some(server) = &data.linked_server {
+		crate::api::worlds::ensure_managed_server_in_instance(
+			instance_id,
+			data.server_manager_name.clone()
+				.unwrap_or_else(|| data.name.clone()),
+			server.domain.clone(),
+		)
+		.await?;
+	}
     crate::state::attach_shared_instance(
         instance_id,
         SharedInstanceAttachmentInput {
@@ -117,6 +127,7 @@ struct DesiredSharedInstanceContent {
         DesiredSharedInstanceExternalFile,
     >,
     config_bundle: Option<SharedInstanceExternalFileData>,
+	config_files: Vec<SharedInstanceExternalFileData>,
 }
 
 struct SharedInstanceProjectUpdate {
@@ -134,6 +145,7 @@ struct SharedInstanceApplyPlan {
     external_updates: Vec<DesiredSharedInstanceExternalFile>,
     external_additions: Vec<DesiredSharedInstanceExternalFile>,
     config_bundle: Option<SharedInstanceExternalFileData>,
+	config_files: Vec<SharedInstanceExternalFileData>,
 }
 
 impl SharedInstanceApplyPlan {
@@ -169,6 +181,7 @@ impl SharedInstanceApplyPlan {
             project_removals,
             external_removals,
             config_bundle: desired.config_bundle,
+			config_files: desired.config_files,
             ..Default::default()
         };
 
@@ -203,7 +216,8 @@ impl SharedInstanceApplyPlan {
             + self.project_additions.len()
             + self.external_updates.len()
             + self.external_additions.len()
-            + usize::from(self.config_bundle.is_some())) as u64
+            + usize::from(self.config_bundle.is_some())
+			+ self.config_files.len()) as u64
     }
 }
 
@@ -367,10 +381,10 @@ pub(super) async fn apply_shared_instance_update(
         .await?;
     }
 
-    if let Some(config_bundle) = plan.config_bundle {
+    for config_file in plan.config_bundle.into_iter().chain(plan.config_files) {
         install_shared_instance_external_file(
             instance_id,
-            &config_bundle,
+            &config_file,
             state,
         )
         .await?;
@@ -518,6 +532,12 @@ async fn desired_shared_instance_content(
     }
 
     for file in &data.external_files {
+		if file.file_type == CONFIG_FILE_TYPE {
+			if CONFIG_SYNC_ENABLED {
+				content.config_files.push(file.clone());
+			}
+			continue;
+		}
         if file.file_type == CONFIG_BUNDLE_FILE_TYPE {
             if CONFIG_SYNC_ENABLED {
                 content.config_bundle = Some(file.clone());
@@ -788,11 +808,27 @@ async fn install_shared_instance_external_file(
     file: &SharedInstanceExternalFileData,
     state: &State,
 ) -> crate::Result<()> {
-    if file.file_type == CONFIG_BUNDLE_FILE_TYPE && !CONFIG_SYNC_ENABLED {
+	if matches!(
+		file.file_type.as_str(),
+		CONFIG_BUNDLE_FILE_TYPE | CONFIG_FILE_TYPE
+	) && !CONFIG_SYNC_ENABLED {
         return Ok(());
     }
 
-    validate_shared_instance_external_file_name(&file.file_name)?;
+	if file.file_type == CONFIG_FILE_TYPE {
+		crate::state::content_store::validate_relative(&file.file_name)?;
+		if file.file_name.split('/').any(|part| part.starts_with('.'))
+			|| !is_supported_config_file(std::path::Path::new(&file.file_name))
+			|| file.file_size > MAX_CONFIG_BUNDLE_FILE_SIZE
+		{
+			return Err(crate::ErrorKind::InputError(format!(
+				"Shared instance config file {} is unsupported or too large",
+				file.file_name
+			)).into());
+		}
+	} else {
+		validate_shared_instance_external_file_name(&file.file_name)?;
+	}
 
     if file.file_size > MAX_SHARED_INSTANCE_EXTERNAL_FILE_SIZE {
         return Err(crate::ErrorKind::InputError(format!(
@@ -863,6 +899,18 @@ async fn install_shared_instance_external_file(
     }
     let bytes = bytes::Bytes::from(bytes);
 
+	if file.file_type == CONFIG_FILE_TYPE {
+		let path = crate::api::instance::validate_instance_file_write(
+			instance_id,
+			&file.file_name,
+		).await?;
+		if let Some(parent) = path.parent() {
+			crate::util::io::create_dir_all(parent).await?;
+		}
+		crate::util::io::write(path, bytes).await?;
+		return Ok(());
+	}
+
     if file.file_type == CONFIG_BUNDLE_FILE_TYPE {
         return install_shared_instance_config_bundle(
             instance_id,
diff --git a/packages/ui/src/components/base/BaseTerminal.vue b/packages/ui/src/components/base/BaseTerminal.vue
index b169c1528fb..3a3399efcf2 100644
--- a/packages/ui/src/components/base/BaseTerminal.vue
+++ b/packages/ui/src/components/base/BaseTerminal.vue
@@ -1,9 +1,14 @@
 <template>
 	<div
-		class="flex h-full w-full flex-col bg-surface-2 overflow-hidden rounded-[20px] border border-solid border-surface-4"
+		class="flex w-full flex-col bg-surface-2 overflow-hidden rounded-[20px] border border-solid border-surface-4"
+		:class="minLogHeight ? 'min-h-min' : 'h-full min-h-0'"
 	>
-		<div ref="wrapperRef" class="relative min-h-0 flex-1 overflow-hidden pb-2 pt-1">
-			<div ref="containerRef" class="size-full" />
+		<div
+			ref="wrapperRef"
+			class="relative mb-2 mt-1 min-h-0 flex-1 overflow-hidden"
+			:style="{ minHeight: minLogHeight }"
+		>
+			<div ref="containerRef" class="absolute inset-0" />
 			<Transition name="terminal-loading-fade">
 				<div
 					v-if="loading"
@@ -20,7 +25,7 @@
 		<div
 			v-if="showInput"
 			ref="inputRef"
-			class="border-t border-solid border-b-0 border-x-0 border-surface-4 bg-surface-3 p-4"
+			class="shrink-0 border-t border-solid border-b-0 border-x-0 border-surface-4 bg-surface-3 p-4"
 		>
 			<Input
 				v-model="commandInput"
@@ -48,6 +53,7 @@ import { useTerminal } from '#ui/composables/terminal'
 const props = withDefaults(
 	defineProps<{
 		scrollback?: number
+		minLogHeight?: string
 		showInput?: boolean
 		disableInput?: boolean
 		disableInputTooltip?: string
@@ -58,6 +64,7 @@ const props = withDefaults(
 	}>(),
 	{
 		scrollback: Infinity,
+		minLogHeight: undefined,
 		showInput: false,
 		disableInput: false,
 		disableInputTooltip: undefined,
diff --git a/packages/ui/src/components/base/IntlFormatted.vue b/packages/ui/src/components/base/IntlFormatted.vue
index 7edebb2064c..a6a944bcb27 100644
--- a/packages/ui/src/components/base/IntlFormatted.vue
+++ b/packages/ui/src/components/base/IntlFormatted.vue
@@ -55,7 +55,9 @@ const formattedParts = computed(() => {
 
 	for (const slotName of slotNames) {
 		const normalizedName = slotName.startsWith('~') ? slotName.slice(1) : slotName
-		slotHandlers[normalizedName] = (chunks) => {
+		let handlerName = `intlSlot${Object.keys(slotHandlers).length}`
+		while (Object.prototype.hasOwnProperty.call(props.values ?? {}, handlerName)) handlerName += '_'
+		slotHandlers[handlerName] = (chunks) => {
 			const slot = slots[slotName]
 			if (slot) {
 				const nodes = slot({
@@ -69,10 +71,12 @@ const formattedParts = computed(() => {
 			return markRaw(chunks) as VNode[]
 		}
 
-		msg = msg.replace(
-			new RegExp(`\\{${normalizedName}\\}`, 'g'),
-			`<${normalizedName}></${normalizedName}>`,
-		)
+		msg = msg
+			.replaceAll(`<${normalizedName}>`, `<${handlerName}>`)
+			.replaceAll(`</${normalizedName}>`, `</${handlerName}>`)
+		if (!Object.prototype.hasOwnProperty.call(props.values ?? {}, normalizedName)) {
+			msg = msg.replaceAll(`{${normalizedName}}`, `<${handlerName}></${handlerName}>`)
+		}
 	}
 
 	try {
diff --git a/packages/ui/src/components/servers/ServerConfigFilePicker.vue b/packages/ui/src/components/servers/ServerConfigFilePicker.vue
new file mode 100644
index 00000000000..d0061c15727
--- /dev/null
+++ b/packages/ui/src/components/servers/ServerConfigFilePicker.vue
@@ -0,0 +1,146 @@
+<template>
+	<Accordion overflow-visible button-class="w-full bg-transparent m-0 p-0 border-none" @on-open="forceCheck">
+		<template #title>
+			<FileCogIcon class="size-4 shrink-0" />
+			<span class="text-lg font-semibold text-contrast">{{ formatMessage(messages.title) }}</span>
+		</template>
+		<div class="flex min-w-0 flex-col gap-3 pt-4">
+			<Admonition v-if="directory.isError.value" type="critical" :header="formatMessage(messages.error)">
+				<Button @click="directory.refetch()">{{ formatMessage(messages.retry) }}</Button>
+			</Admonition>
+			<div v-show="directory.data.value" class="relative overflow-hidden rounded-[20px]" :inert="disabled">
+				<div ref="container" class="max-h-[292px] overflow-y-auto">
+					<FileTreeSelect
+						v-model="includedPaths"
+						v-model:excluded-paths="excludedPaths"
+						:items="directory.data.value ?? []"
+						lazy
+						:show-size="false"
+						:show-modified="false"
+						@navigate="navigate"
+					/>
+				</div>
+				<div
+					v-if="showTopFade"
+					aria-hidden="true"
+					class="pointer-events-none absolute inset-x-0 top-0 z-10 h-6 bg-gradient-to-b from-surface-3 to-transparent"
+				/>
+				<div
+					v-if="showBottomFade"
+					aria-hidden="true"
+					class="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-6 bg-gradient-to-t from-surface-3 to-transparent"
+				/>
+			</div>
+		</div>
+	</Accordion>
+</template>
+
+<script setup lang="ts">
+import { FileCogIcon } from '@modrinth/assets'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
+import { computed, ref } from 'vue'
+
+import Accordion from '#ui/components/base/Accordion.vue'
+import Admonition from '#ui/components/base/Admonition.vue'
+import { Button } from '#ui/components/base/buttons'
+import FileTreeSelect, { type FileTreeSelectItem } from '#ui/components/base/FileTreeSelect.vue'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { useScrollIndicator } from '#ui/composables/scroll-indicator'
+import { injectAuth, injectModrinthClient } from '#ui/providers'
+
+const props = defineProps<{ serverId: string; worldId: string; disabled?: boolean }>()
+const { formatMessage } = useVIntl()
+const client = injectModrinthClient()
+const auth = injectAuth()
+const queryClient = useQueryClient()
+const currentPath = ref('')
+const includedPaths = ref<string[]>([])
+const excludedPaths = ref<string[]>([])
+const container = ref<HTMLElement | null>(null)
+const { showTopFade, showBottomFade, forceCheck } = useScrollIndicator(container)
+const extensions = new Set(['json', 'json5', 'jsonc', 'yml', 'yaml', 'css', 'toml', 'txt', 'ini', 'cfg', 'conf', 'properties', 'xml', 'nbt'])
+
+function directoryOptions(path: string) {
+	const worldId = props.worldId
+	const directoryPath = path ? `/config/${path}` : '/config'
+	return {
+		queryKey: ['servers', 'share-config-files', props.serverId, worldId, auth.user.value?.id, directoryPath],
+		queryFn: async () => {
+			const items: FileTreeSelectItem[] = []
+			let pages = 1
+			for (let page = 1; page <= pages; page++) {
+				const result = await client.kyros.files_v0.listDirectory(directoryPath, page, 2000)
+				pages = result.total
+				for (const item of result.items) {
+					if (item.name.startsWith('.') || /[/\\:]/.test(item.name) || /[. ]$/.test(item.name)) continue
+					if (item.type !== 'directory' && item.type !== 'file') continue
+					if (item.type === 'file' && !extensions.has(item.name.split('.').pop()?.toLowerCase() ?? '')) continue
+					items.push({
+						path: path ? `${path}/${item.name}` : item.name,
+						type: item.type,
+						size: item.size,
+					})
+				}
+			}
+			return items
+		},
+		staleTime: 0,
+		retry: false,
+	}
+}
+
+const directory = useQuery(computed(() => directoryOptions(currentPath.value)))
+
+function navigate(path: string) {
+	currentPath.value = path
+	if (container.value) container.value.scrollTop = 0
+}
+
+async function resolvePaths() {
+	const included = new Set(includedPaths.value)
+	const excluded = new Set(excludedPaths.value)
+	if (!included.size) return []
+	const selected: string[] = []
+	let totalSize = 0
+	const worldId = props.worldId
+	const userId = auth.user.value?.id
+	function isSelected(path: string) {
+		let selected = false
+		let prefix = ''
+		for (const segment of path.split('/')) {
+			prefix = prefix ? `${prefix}/${segment}` : segment
+			if (included.has(prefix)) selected = true
+			if (excluded.has(prefix)) selected = false
+		}
+		return selected
+	}
+	async function visit(path: string) {
+		if (props.worldId !== worldId || auth.user.value?.id !== userId) throw new Error(formatMessage(messages.contextChanged))
+		const items = await queryClient.fetchQuery(directoryOptions(path))
+		for (const item of items) {
+			if (item.type === 'directory') {
+				if (isSelected(item.path) || [...included].some((included) => included.startsWith(`${item.path}/`))) await visit(item.path)
+			} else if (isSelected(item.path)) {
+				const size = item.size ?? 0
+				totalSize += size
+				if (size > 16 * 1024 * 1024 || totalSize > 128 * 1024 * 1024 || selected.length >= 4096) {
+					throw new Error(formatMessage(messages.selectionTooLarge))
+				}
+				selected.push(`config/${item.path}`)
+			}
+		}
+	}
+	await visit('')
+	return selected
+}
+
+const messages = defineMessages({
+	title: { id: 'instance.shared-instance.publish-review.config-title-v2', defaultMessage: 'Select config files' },
+	error: { id: 'servers.play.config-files.error', defaultMessage: 'Could not load config files' },
+	retry: { id: 'servers.play.retry', defaultMessage: 'Retry' },
+	selectionTooLarge: { id: 'servers.play.config-files.selection-too-large', defaultMessage: 'Select up to 4,096 config files, with a maximum of 16 MiB per file and 128 MiB in total.' },
+	contextChanged: { id: 'servers.play.config-files.context-changed', defaultMessage: 'The world or account changed. Open Push update again.' },
+})
+
+defineExpose({ resolvePaths })
+</script>
diff --git a/packages/ui/src/components/servers/admonitions/ServerPanelAdmonitions.vue b/packages/ui/src/components/servers/admonitions/ServerPanelAdmonitions.vue
index 08a45cfab50..be5e722a73b 100644
--- a/packages/ui/src/components/servers/admonitions/ServerPanelAdmonitions.vue
+++ b/packages/ui/src/components/servers/admonitions/ServerPanelAdmonitions.vue
@@ -10,6 +10,7 @@ import StackedAdmonitions, {
 	type StackedAdmonitionItem,
 } from '#ui/components/base/StackedAdmonitions.vue'
 import InstallingBanner from '#ui/components/servers/InstallingBanner.vue'
+import ServerConfigFilePicker from '#ui/components/servers/ServerConfigFilePicker.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { useServerBackupsQueue } from '#ui/composables/server-backups-queue'
 import { useServerPermissions } from '#ui/composables/server-permissions'
@@ -42,7 +43,9 @@ const needsShareUpdate = computed(() =>
 )
 const shareActions = useIsMutating({ mutationKey: ['servers', 'share-action', ctx.serverId] })
 const sharePreviews = useIsFetching({ queryKey: ['servers', 'share-diff', ctx.serverId] })
-const sharePending = computed(() => shareActions.value > 0 || sharePreviews.value > 0)
+const resolvingConfigs = ref(false)
+const sharePending = computed(() => resolvingConfigs.value || shareActions.value > 0 || sharePreviews.value > 0)
+const configPicker = ref<InstanceType<typeof ServerConfigFilePicker>>()
 
 const diffModal = ref<InstanceType<typeof ContentDiffModal>>()
 const previewOpen = ref(false)
@@ -57,12 +60,11 @@ const previewQuery = useQuery({
 })
 const pushMutation = useMutation({
 	mutationKey: ['servers', 'share-action', ctx.serverId],
-	mutationFn: async (worldId: string) => {
-		await client.archon.content_v1.share(ctx.serverId, worldId)
+	mutationFn: async ({ worldId, configPaths }: { worldId: string; configPaths: string[] }) => {
+		await client.archon.content_v1.share(ctx.serverId, worldId, configPaths)
 		await queryClient.invalidateQueries({ queryKey: ['servers', 'v1', 'detail', ctx.serverId] })
 		await queryClient.invalidateQueries({ queryKey: ['servers', 'share-diff', ctx.serverId, worldId] })
 	},
-	onError: (error) => handleError(error),
 })
 
 async function reviewShareUpdate() {
@@ -80,10 +82,22 @@ async function reviewShareUpdate() {
 	}
 }
 
-function pushShareUpdate() {
+async function pushShareUpdate() {
 	if (!ctx.worldId.value || !canSetup.value || sharePending.value || ctx.busyReasons.value.length) return
-	previewOpen.value = false
-	pushMutation.mutate(ctx.worldId.value)
+	const worldId = ctx.worldId.value
+	const userId = auth.user.value?.id
+	resolvingConfigs.value = true
+	try {
+		const configPaths = await configPicker.value?.resolvePaths() ?? []
+		if (!previewOpen.value || ctx.worldId.value !== worldId || auth.user.value?.id !== userId || !canSetup.value || ctx.busyReasons.value.length) return
+		await pushMutation.mutateAsync({ worldId, configPaths })
+		previewOpen.value = false
+	} catch (error) {
+		handleError(error)
+		if (previewOpen.value && ctx.worldId.value === worldId && auth.user.value?.id === userId) diffModal.value?.show()
+	} finally {
+		resolvingConfigs.value = false
+	}
 }
 
 watch([ctx.worldId, () => auth.user.value?.id], () => {
@@ -554,5 +568,9 @@ function onInstallationDismiss() {
 		:removed-label="formatMessage(messages.removed)"
 		@confirm="pushShareUpdate"
 		@cancel="previewOpen = false"
-	/>
+	>
+		<template #additional-content>
+			<ServerConfigFilePicker v-if="previewOpen && ctx.worldId.value" :key="ctx.worldId.value" ref="configPicker" :server-id="ctx.serverId" :world-id="ctx.worldId.value" :disabled="sharePending" />
+		</template>
+	</ContentDiffModal>
 </template>
diff --git a/packages/ui/src/composables/hosting-intercom.ts b/packages/ui/src/composables/hosting-intercom.ts
index 6c986399891..ceb8d15a492 100644
--- a/packages/ui/src/composables/hosting-intercom.ts
+++ b/packages/ui/src/composables/hosting-intercom.ts
@@ -45,6 +45,9 @@ const LAUNCHER_SELECTOR =
 const RIGHT_VAR = '--modrinth-hosting-intercom-right'
 const BOTTOM_VAR = '--modrinth-hosting-intercom-bottom'
 const POINTER_EVENTS_VAR = '--modrinth-hosting-intercom-pointer-events'
+const LAUNCHER_OPACITY_VAR = '--modrinth-hosting-intercom-launcher-opacity'
+const LAUNCHER_VISIBILITY_VAR = '--modrinth-hosting-intercom-launcher-visibility'
+const LAUNCHER_POINTER_EVENTS_VAR = '--modrinth-hosting-intercom-launcher-pointer-events'
 
 function sanitizePixels(value: number | undefined, fallback = DEFAULT_PADDING) {
 	if (typeof value !== 'number' || !Number.isFinite(value)) return fallback
@@ -75,7 +78,12 @@ iframe[name='intercom-messenger-frame'] {
 iframe[name='intercom-launcher-frame'] {
 	right: var(${RIGHT_VAR}, ${DEFAULT_PADDING}px) !important;
 	bottom: var(${BOTTOM_VAR}, ${DEFAULT_PADDING}px) !important;
+	opacity: var(${LAUNCHER_OPACITY_VAR}, 1) !important;
+	visibility: var(${LAUNCHER_VISIBILITY_VAR}, visible) !important;
+	pointer-events: var(${LAUNCHER_POINTER_EVENTS_VAR}, auto) !important;
 	transition:
+		opacity 0.15s ease-out,
+		visibility 0.15s,
 		right 0.12s ease-out,
 		bottom 0.12s ease-out !important;
 }
@@ -95,6 +103,8 @@ export function useHostingIntercom(options: UseHostingIntercomOptions) {
 	const { stackCount } = useModalStack()
 	const horizontalPaddingRequests = new Map<symbol, number>()
 	const verticalClearanceRequests = new Map<symbol, number>()
+	const hiddenRequests = new Set<symbol>()
+	const launcherHidden = ref(false)
 	const requestedHorizontalPadding = ref<number | null>(null)
 	const requestedVerticalClearance = ref<number | null>(null)
 	const launcherWidth = ref(DEFAULT_LAUNCHER_WIDTH)
@@ -105,7 +115,7 @@ export function useHostingIntercom(options: UseHostingIntercomOptions) {
 	let syncAfterBoot = false
 	let stopSync: (() => void) | null = null
 	let stopPositionSync: (() => void) | null = null
-	let stopModalSync: (() => void) | null = null
+	let stopVisibilitySync: (() => void) | null = null
 	let launcherObserver: ResizeObserver | null = null
 	let documentObserver: MutationObserver | null = null
 	let observedLauncher: Element | null = null
@@ -145,6 +155,15 @@ export function useHostingIntercom(options: UseHostingIntercomOptions) {
 			POINTER_EVENTS_VAR,
 			stackCount.value > 0 ? 'none' : 'auto',
 		)
+		document.documentElement.style.setProperty(LAUNCHER_OPACITY_VAR, launcherHidden.value ? '0' : '1')
+		document.documentElement.style.setProperty(
+			LAUNCHER_VISIBILITY_VAR,
+			launcherHidden.value ? 'hidden' : 'visible',
+		)
+		document.documentElement.style.setProperty(
+			LAUNCHER_POINTER_EVENTS_VAR,
+			launcherHidden.value || stackCount.value > 0 ? 'none' : 'auto',
+		)
 
 		if (updateSdk && booted) {
 			updateIntercom({
@@ -180,6 +199,9 @@ export function useHostingIntercom(options: UseHostingIntercomOptions) {
 		document.documentElement.style.removeProperty(RIGHT_VAR)
 		document.documentElement.style.removeProperty(BOTTOM_VAR)
 		document.documentElement.style.removeProperty(POINTER_EVENTS_VAR)
+		document.documentElement.style.removeProperty(LAUNCHER_OPACITY_VAR)
+		document.documentElement.style.removeProperty(LAUNCHER_VISIBILITY_VAR)
+		document.documentElement.style.removeProperty(LAUNCHER_POINTER_EVENTS_VAR)
 	}
 
 	function stop() {
@@ -262,13 +284,13 @@ export function useHostingIntercom(options: UseHostingIntercomOptions) {
 			immediate: true,
 		})
 		stopPositionSync = watch([horizontalPadding, verticalPadding], () => applyPosition(true))
-		stopModalSync = watch(stackCount, () => applyPosition())
+		stopVisibilitySync = watch([stackCount, launcherHidden], () => applyPosition())
 	})
 
 	onBeforeUnmount(() => {
 		stopSync?.()
 		stopPositionSync?.()
-		stopModalSync?.()
+		stopVisibilitySync?.()
 		launcherObserver?.disconnect()
 		documentObserver?.disconnect()
 		stop()
@@ -279,6 +301,11 @@ export function useHostingIntercom(options: UseHostingIntercomOptions) {
 		intercomBubble: {
 			width: launcherWidth,
 			horizontalPadding,
+			requestHidden: (id: symbol, hidden: boolean) => {
+				if (hidden) hiddenRequests.add(id)
+				else hiddenRequests.delete(id)
+				launcherHidden.value = hiddenRequests.size > 0
+			},
 			requestHorizontalPadding: (id: symbol, value: number | null) =>
 				requestFromMap(horizontalPaddingRequests, requestedHorizontalPadding, id, value),
 			requestVerticalClearance: (id: symbol, value: number | null) =>
diff --git a/packages/ui/src/layouts/index.ts b/packages/ui/src/layouts/index.ts
index d828ac37554..64257c0a9de 100644
--- a/packages/ui/src/layouts/index.ts
+++ b/packages/ui/src/layouts/index.ts
@@ -4,6 +4,7 @@ export * from './shared/console'
 export * from './shared/content-tab'
 export * from './shared/files-tab'
 export * from './shared/installation-settings'
+export * from './shared/invited-players'
 export * from './shared/server-settings'
 export * from './shared/sharing-settings'
 export * from './shared/user-profile'
diff --git a/packages/ui/src/layouts/shared/console/layout.vue b/packages/ui/src/layouts/shared/console/layout.vue
index d6a04d753a3..aed88fda113 100644
--- a/packages/ui/src/layouts/shared/console/layout.vue
+++ b/packages/ui/src/layouts/shared/console/layout.vue
@@ -1,12 +1,14 @@
 <template>
 	<div
-		class="flex min-h-0 flex-1 flex-col gap-4"
-		:class="
-			isFullscreen ? `fixed inset-0 z-[15] bg-surface-1 p-6 py-8 ${isApp ? 'pt-12' : ''}` : ''
-		"
+		class="flex flex-1 flex-col gap-4"
+		:class="[
+			minLogHeight && !isFullscreen ? 'min-h-min' : 'min-h-0',
+			isFullscreen ? `fixed inset-0 z-[15] bg-surface-1 p-6 py-8 ${isApp ? 'pt-12' : ''}` : '',
+		]"
 	>
 		<CollapsibleAdmonition
 			v-if="ctx.crashAnalysis?.value && !isFullscreen"
+			class="shrink-0"
 			type="critical"
 			:header="crashHeader"
 			:items="crashItems"
@@ -14,7 +16,7 @@
 			@dismiss="ctx.onDismissCrash?.()"
 		/>
 
-		<div class="flex flex-col gap-2">
+		<div class="flex shrink-0 flex-col gap-2">
 			<div class="flex items-center gap-2">
 				<Input
 					v-model="searchQuery"
@@ -61,7 +63,8 @@
 
 		<BaseTerminal
 			ref="terminalRef"
-			class="min-h-0 flex-1"
+			class="flex-1"
+			:min-log-height="isFullscreen ? undefined : minLogHeight"
 			:show-input="resolvedShowInput"
 			:disable-input="resolvedInputDisabled"
 			:disable-input-tooltip="resolvedInputDisabledTooltip"
@@ -129,6 +132,10 @@ import type { ConditionalLevel } from './composables/console-filtering'
 import { injectConsoleManager } from './providers'
 import type { LogLevel, LogLine } from './types'
 
+defineProps<{
+	minLogHeight?: string
+}>()
+
 const ctx = injectConsoleManager()
 const client = injectModrinthClient()
 const modalBehavior = injectModalBehavior()
diff --git a/packages/ui/src/layouts/shared/invited-players/composables/use-invited-players-table.ts b/packages/ui/src/layouts/shared/invited-players/composables/use-invited-players-table.ts
new file mode 100644
index 00000000000..863cbf903ed
--- /dev/null
+++ b/packages/ui/src/layouts/shared/invited-players/composables/use-invited-players-table.ts
@@ -0,0 +1,77 @@
+import { computed, ref, type Ref, watch } from 'vue'
+
+import type { SortDirection } from '#ui/components/base/Table.vue'
+
+import {
+	invitedPlayerMethodLabels as methodLabels,
+	type InvitedPlayerMethod,
+	type InvitedPlayerRow,
+} from '../types'
+
+type MethodFilter = InvitedPlayerMethod | 'all'
+
+export function useInvitedPlayersTable(
+	rows: Ref<InvitedPlayerRow[]>,
+	formatRelativeTime: (date: Date) => string,
+) {
+	const search = ref('')
+	const methodFilter = ref<MethodFilter>('all')
+	const sortColumn = ref<string | undefined>('joined')
+	const sortDirection = ref<SortDirection>('desc')
+	const methodFilterOptions: Array<{ id: InvitedPlayerMethod; label: string }> = [
+		{ id: 'direct', label: methodLabels.direct },
+		{ id: 'link', label: methodLabels.link },
+	]
+	const hasMultipleMethods = computed(() => new Set(rows.value.map((row) => row.method)).size > 1)
+	const filteredRows = computed(() => {
+		const query = search.value.trim().toLowerCase()
+		return rows.value.filter((row) => {
+			if (methodFilter.value !== 'all' && row.method !== methodFilter.value) return false
+			if (!query) return true
+			return [
+				row.username,
+				row.lastPlayedAt ? formatRelativeTime(row.lastPlayedAt) : 'Never',
+				row.pending ? 'Pending' : row.joinedAt ? formatRelativeTime(row.joinedAt) : '',
+				methodLabels[row.method],
+			].some((value) => value.toLowerCase().includes(query))
+		})
+	})
+	const sortedRows = computed(() => [...filteredRows.value].sort(compareRows))
+
+	function compareRows(a: InvitedPlayerRow, b: InvitedPlayerRow) {
+		let compared: number
+		if (sortColumn.value === 'username') compared = a.username.localeCompare(b.username)
+		else if (sortColumn.value === 'lastPlayed')
+			compared =
+				(a.lastPlayedAt?.getTime() ?? Number.NEGATIVE_INFINITY) -
+				(b.lastPlayedAt?.getTime() ?? Number.NEGATIVE_INFINITY)
+		else if (sortColumn.value === 'method')
+			compared = methodLabels[a.method].localeCompare(methodLabels[b.method])
+		else
+			compared =
+				(a.pending ? Number.MAX_SAFE_INTEGER : (a.joinedAt?.getTime() ?? Number.NEGATIVE_INFINITY)) -
+					(b.pending
+						? Number.MAX_SAFE_INTEGER
+						: (b.joinedAt?.getTime() ?? Number.NEGATIVE_INFINITY)) ||
+				a.username.localeCompare(b.username)
+		return sortDirection.value === 'asc' ? compared : -compared
+	}
+	function toggleMethodFilter(filter: InvitedPlayerMethod) {
+		methodFilter.value = methodFilter.value === filter ? 'all' : filter
+	}
+
+	watch(hasMultipleMethods, (multiple) => {
+		if (!multiple) methodFilter.value = 'all'
+	})
+
+	return {
+		search,
+		methodFilter,
+		sortColumn,
+		sortDirection,
+		methodFilterOptions,
+		hasMultipleMethods,
+		sortedRows,
+		toggleMethodFilter,
+	}
+}
diff --git a/packages/ui/src/layouts/shared/invited-players/index.ts b/packages/ui/src/layouts/shared/invited-players/index.ts
new file mode 100644
index 00000000000..e8eadeeefe3
--- /dev/null
+++ b/packages/ui/src/layouts/shared/invited-players/index.ts
@@ -0,0 +1,2 @@
+export { default as InvitedPlayersTableLayout } from './layout.vue'
+export * from './types'
diff --git a/packages/ui/src/layouts/shared/invited-players/layout.vue b/packages/ui/src/layouts/shared/invited-players/layout.vue
new file mode 100644
index 00000000000..f1c23b8a8cf
--- /dev/null
+++ b/packages/ui/src/layouts/shared/invited-players/layout.vue
@@ -0,0 +1,228 @@
+<template>
+	<div class="flex min-w-0 flex-col gap-4">
+		<div class="flex flex-col gap-2">
+			<div class="flex items-center gap-2">
+				<Input
+					v-model="search"
+					:icon="SearchIcon"
+					:placeholder="`Search ${rows.length} users...`"
+					wrapper-class="min-w-0 flex-1"
+					size="medium"
+					clearable
+				/>
+				<slot name="toolbar-actions" />
+			</div>
+			<div v-if="hasMultipleMethods" class="flex flex-wrap items-center gap-1.5">
+				<FilterIcon class="size-5 shrink-0 text-secondary" aria-hidden="true" />
+				<button
+					:class="filterClass(methodFilter === 'all')"
+					:aria-pressed="methodFilter === 'all'"
+					@click="methodFilter = 'all'"
+				>
+					All
+				</button>
+				<button
+					v-for="option in methodFilterOptions"
+					:key="option.id"
+					:class="filterClass(methodFilter === option.id)"
+					:aria-pressed="methodFilter === option.id"
+					@click="toggleMethodFilter(option.id)"
+				>
+					{{ option.label }}
+				</button>
+			</div>
+		</div>
+
+		<Table
+			v-model:sort-column="sortColumn"
+			v-model:sort-direction="sortDirection"
+			:columns="columns"
+			:data="sortedRows"
+			row-key="id"
+			table-min-width="42rem"
+		>
+			<template #empty-state>
+				<div class="flex h-64 items-center justify-center px-4 text-center text-secondary">
+					{{
+						formatMessage(rows.length === 0 ? messages.noUsersJoined : messages.noUsersMatchFilters)
+					}}
+				</div>
+			</template>
+			<template #cell-username="{ row }">
+				<div class="flex min-w-0 max-w-full items-center gap-2">
+					<AutoLink
+						v-tooltip="truncatedTooltip(usernameRefs[row.id], row.username)"
+						:to="userProfileLink(row.username)"
+						class="inline-flex max-w-full min-w-0 items-center gap-2 text-primary hover:underline"
+					>
+						<Avatar
+							:src="row.avatarUrl"
+							:alt="`${row.username}'s avatar`"
+							:tint-by="row.username"
+							size="24px"
+							circle
+							no-shadow
+						/>
+						<span
+							:ref="(element) => setUsernameRef(row.id, element)"
+							class="min-w-0 truncate font-medium"
+							>{{ row.username }}</span
+						>
+					</AutoLink>
+				</div>
+			</template>
+			<template #cell-lastPlayed="{ row }">
+				<span v-if="row.lastPlayedAt" v-tooltip="formatDateTime(row.lastPlayedAt)">{{
+					formatRelativeTime(row.lastPlayedAt)
+				}}</span>
+				<span v-else>Never</span>
+			</template>
+			<template #cell-joined="{ row }">
+				<span
+					v-if="row.pending"
+					class="inline-flex h-7 items-center rounded-full border border-surface-5 border-solid bg-surface-4 px-2.5 py-1 text-sm font-semibold text-secondary"
+					>Pending</span
+				>
+				<span v-else-if="row.joinedAt" v-tooltip="formatDateTime(row.joinedAt)">{{
+					formatRelativeTime(row.joinedAt)
+				}}</span>
+			</template>
+			<template #cell-method="{ row }">
+				<span class="inline-flex min-w-0 max-w-full items-center gap-2">
+					<UserPlusIcon v-if="row.method === 'direct'" class="size-5 shrink-0" aria-hidden="true" />
+					<LinkIcon v-else class="size-5 shrink-0" aria-hidden="true" />
+					<span class="min-w-0 truncate">{{ methodLabels[row.method] }}</span>
+				</span>
+			</template>
+			<template #cell-actions="{ row }">
+				<div v-if="canManage" class="flex items-center justify-end">
+					<IconButton
+						:disabled="disabled"
+						v-tooltip="'Revoke access'"
+						type="quiet"
+						:label="`Revoke access for ${row.username}`"
+						class="text-secondary hover:!filter-none hover:text-red focus-visible:!filter-none"
+						@click="emit('remove', row)"
+					>
+						<XIcon aria-hidden="true"
+					/></IconButton>
+				</div>
+			</template>
+		</Table>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { FilterIcon, LinkIcon, SearchIcon, UserPlusIcon, XIcon } from '@modrinth/assets'
+import { computed, ref, toRef } from 'vue'
+
+import AutoLink from '#ui/components/base/AutoLink.vue'
+import Avatar from '#ui/components/base/Avatar.vue'
+import { IconButton } from '#ui/components/base/buttons'
+import Input from '#ui/components/base/inputs/Input.vue'
+import Table, { type TableColumn } from '#ui/components/base/Table.vue'
+import { useFormatDateTime, useRelativeTime } from '#ui/composables'
+import { defineMessages, useVIntl } from '#ui/composables/i18n'
+import { truncatedTooltip } from '#ui/utils/truncate'
+
+import { useInvitedPlayersTable } from './composables/use-invited-players-table'
+import { invitedPlayerMethodLabels as methodLabels, type InvitedPlayerRow } from './types'
+
+type InvitedPlayerColumn = 'username' | 'lastPlayed' | 'joined' | 'method' | 'actions'
+
+const props = defineProps<{
+	rows: InvitedPlayerRow[]
+	canManage?: boolean
+	disabled?: boolean
+}>()
+const emit = defineEmits<{
+	remove: [row: InvitedPlayerRow]
+}>()
+const usernameRefs = ref<Record<string, HTMLElement | null>>({})
+const { formatMessage } = useVIntl()
+const formatRelativeTime = useRelativeTime({ style: 'narrow' })
+const formatDateTime = useFormatDateTime({ dateStyle: 'medium', timeStyle: 'short' })
+const {
+	search,
+	methodFilter,
+	sortColumn,
+	sortDirection,
+	methodFilterOptions,
+	hasMultipleMethods,
+	sortedRows,
+	toggleMethodFilter,
+} = useInvitedPlayersTable(toRef(props, 'rows'), formatRelativeTime)
+
+const columns = computed<TableColumn<InvitedPlayerColumn>[]>(() => {
+	const result: TableColumn<InvitedPlayerColumn>[] = [
+		{
+			key: 'username',
+			label: 'Username',
+			width: 'clamp(14rem, 30%, 26rem)',
+			enableSorting: true,
+			headerClass: '!pr-3',
+			cellClass: '!pr-3',
+		},
+		{
+			key: 'lastPlayed',
+			label: 'Last played',
+			width: 'clamp(7rem, 15%, 13rem)',
+			enableSorting: true,
+			headerClass: 'whitespace-nowrap !px-2',
+			cellClass: 'whitespace-nowrap !px-2',
+		},
+		{
+			key: 'joined',
+			label: 'Joined',
+			width: 'clamp(7rem, 14%, 12rem)',
+			enableSorting: true,
+			defaultSortDirection: 'desc',
+			headerClass: 'whitespace-nowrap !px-2',
+			cellClass: 'whitespace-nowrap !px-2',
+		},
+		{
+			key: 'method',
+			label: 'Method',
+			enableSorting: true,
+			headerClass: 'whitespace-nowrap !px-2',
+			cellClass: 'whitespace-nowrap !px-2',
+		},
+	]
+	if (props.canManage)
+		result.push({
+			key: 'actions',
+			label: 'Actions',
+			align: 'right',
+			width: 'clamp(5.5rem, 7%, 7rem)',
+			headerClass: 'whitespace-nowrap !pl-2 !pr-4',
+			cellClass: 'whitespace-nowrap !pl-2 !pr-4',
+		})
+	return result
+})
+
+function filterClass(active: boolean) {
+	return [
+		'cursor-pointer rounded-full border border-solid px-3 py-1.5 text-base font-semibold leading-5 transition-all duration-100 active:scale-[0.97]',
+		active
+			? 'border-brand bg-brand-highlight text-brand'
+			: 'border-surface-5 bg-surface-4 text-primary hover:bg-surface-5',
+	]
+}
+
+const messages = defineMessages({
+	noUsersJoined: {
+		id: 'app.instance.share.members.empty',
+		defaultMessage: 'No users have joined yet',
+	},
+	noUsersMatchFilters: {
+		id: 'app.instance.share.members.no-filter-results',
+		defaultMessage: 'No users match your filters.',
+	},
+})
+function userProfileLink(username: string) {
+	return !username || username.includes('@') ? undefined : `/user/${encodeURIComponent(username)}`
+}
+function setUsernameRef(id: string, element: unknown) {
+	usernameRefs.value[id] = element instanceof HTMLElement ? element : null
+}
+</script>
diff --git a/packages/ui/src/layouts/shared/invited-players/types.ts b/packages/ui/src/layouts/shared/invited-players/types.ts
new file mode 100644
index 00000000000..8e559575f6e
--- /dev/null
+++ b/packages/ui/src/layouts/shared/invited-players/types.ts
@@ -0,0 +1,16 @@
+export type InvitedPlayerMethod = 'direct' | 'link'
+
+export type InvitedPlayerRow = {
+	id: string
+	username: string
+	avatarUrl?: string
+	lastPlayedAt: Date | null
+	joinedAt: Date | null
+	method: InvitedPlayerMethod
+	pending?: boolean
+}
+
+export const invitedPlayerMethodLabels: Record<InvitedPlayerMethod, string> = {
+	direct: 'Direct invite',
+	link: 'Share link',
+}
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayersTable.vue b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayersTable.vue
deleted file mode 100644
index 2ba3def2038..00000000000
--- a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/ServerPlayersTable.vue
+++ /dev/null
@@ -1,201 +0,0 @@
-<template>
-	<div class="flex flex-col gap-4">
-		<div class="flex flex-col gap-2 md:flex-row">
-			<Input
-				v-model="search"
-				:icon="SearchIcon"
-				:placeholder="`Search ${rows.length} users...`"
-				wrapper-class="min-w-0 flex-1"
-				size="medium"
-				clearable
-			/>
-			<Combobox
-				v-model="methodFilter"
-				class="md:!w-auto md:shrink-0"
-				:options="methodFilterOptions"
-				:display-value="selectedMethodFilterLabel"
-				trigger-class="min-w-[176px] !h-10 !min-h-10 !py-0"
-			>
-				<template #prefix>
-					<FilterIcon class="size-5 text-secondary" aria-hidden="true" />
-				</template>
-			</Combobox>
-		</div>
-
-		<Table
-			v-model:sort-column="sortColumn"
-			v-model:sort-direction="sortDirection"
-			:columns="columns"
-			:data="sortedRows"
-			row-key="id"
-			table-min-width="50rem"
-			@sort="handleSort"
-		>
-			<template #empty-state>
-				<div class="flex h-64 items-center justify-center px-4 text-center text-secondary">
-					No users match your filters.
-				</div>
-			</template>
-			<template #cell-username="{ row }">
-				<div class="flex min-w-0 max-w-full items-center gap-2">
-					<Avatar
-						:src="row.avatarUrl"
-						:alt="`${row.username}'s avatar`"
-						:tint-by="row.username"
-						size="24px"
-						circle
-						no-shadow
-					/>
-					<span class="min-w-0 truncate font-medium text-primary">{{ row.username }}</span>
-				</div>
-			</template>
-			<template #cell-lastPlayed="{ row }">
-				<span v-if="row.lastPlayedAt" v-tooltip="formatDateTime(row.lastPlayedAt)">
-					{{ formatPlayerDate(row.lastPlayedAt) }}
-				</span>
-				<span v-else>Never</span>
-			</template>
-			<template #cell-joined="{ row }">
-				<span
-					v-if="row.pending"
-					class="inline-flex h-7 items-center rounded-full border border-solid border-surface-5 bg-surface-4 px-2.5 py-1 text-sm font-semibold text-secondary"
-				>
-					Pending
-				</span>
-				<span v-else-if="row.joinedAt" v-tooltip="formatDateTime(row.joinedAt)">
-					{{ formatPlayerDate(row.joinedAt) }}
-				</span>
-			</template>
-			<template #cell-method="{ row }">
-				<span class="inline-flex min-w-0 items-center gap-2">
-					<UserPlusIcon v-if="row.method === 'direct'" class="size-5 shrink-0" />
-					<LinkIcon v-else class="size-5 shrink-0" />
-					<span class="min-w-0 truncate">{{ methodLabel(row.method) }}</span>
-				</span>
-			</template>
-			<template #cell-actions="{ row }">
-				<div class="flex items-center justify-end">
-					<IconButton
-						v-if="canManage"
-						:disabled="disabled"
-						v-tooltip="row.pending ? 'Revoke invite' : 'More actions'"
-						type="quiet"
-						:label="`${row.pending ? 'Revoke invite' : 'More actions'} for ${row.username}`"
-						class="!text-secondary hover:!filter-none focus-visible:!filter-none"
-						:class="row.pending ? 'hover:!text-red' : ''"
-						@click="row.pending ? emit('remove', row) : emit('open-actions', row)"
-					>
-						<XIcon v-if="row.pending" aria-hidden="true" />
-						<MoreHorizontalIcon v-else aria-hidden="true" />
-					</IconButton>
-				</div>
-			</template>
-		</Table>
-	</div>
-</template>
-
-<script setup lang="ts">
-import {
-	FilterIcon,
-	LinkIcon,
-	MoreHorizontalIcon,
-	SearchIcon,
-	UserPlusIcon,
-	XIcon,
-} from '@modrinth/assets'
-import { computed, ref } from 'vue'
-
-import Avatar from '#ui/components/base/Avatar.vue'
-import { IconButton } from '#ui/components/base/buttons'
-import Combobox, { type ComboboxOption } from '#ui/components/base/Combobox.vue'
-import Input from '#ui/components/base/inputs/Input.vue'
-import Table, { type SortDirection, type TableColumn } from '#ui/components/base/Table.vue'
-import { useFormatDateTime, useRelativeTime } from '#ui/composables'
-
-import type { ServerPlayerMethod, ServerPlayerRow } from './types'
-
-type MethodFilter = ServerPlayerMethod | 'all'
-type PlayerColumn = 'username' | 'lastPlayed' | 'joined' | 'method' | 'actions'
-
-const props = defineProps<{ rows: ServerPlayerRow[]; canManage?: boolean; disabled?: boolean }>()
-const emit = defineEmits<{
-	remove: [row: ServerPlayerRow]
-	'open-actions': [row: ServerPlayerRow]
-}>()
-
-const search = ref('')
-const methodFilter = ref<MethodFilter>('all')
-const sortColumn = ref<string | undefined>('joined')
-const sortDirection = ref<SortDirection>('desc')
-const formatRelativeTime = useRelativeTime({ style: 'narrow' })
-const formatDateTime = useFormatDateTime({ dateStyle: 'medium', timeStyle: 'short' })
-
-const methodFilterOptions: ComboboxOption<MethodFilter>[] = [
-	{ value: 'all', label: 'All' },
-	{ value: 'direct', label: 'Direct invite' },
-	{ value: 'link', label: 'Shareable link' },
-]
-const selectedMethodFilterLabel = computed(
-	() =>
-		`Method: ${
-			methodFilterOptions.find((option) => option.value === methodFilter.value)?.label ?? 'All'
-		}`,
-)
-const columns: TableColumn<PlayerColumn>[] = [
-	{ key: 'username', label: 'Username', enableSorting: true },
-	{ key: 'lastPlayed', label: 'Last played', enableSorting: true },
-	{ key: 'joined', label: 'Joined', enableSorting: true, defaultSortDirection: 'desc' },
-	{ key: 'method', label: 'Method', enableSorting: true },
-	{ key: 'actions', label: 'Actions', align: 'right' },
-]
-
-const filteredRows = computed(() => {
-	const query = search.value.trim().toLowerCase()
-	return props.rows.filter((row) => {
-		if (methodFilter.value !== 'all' && row.method !== methodFilter.value) return false
-		if (!query) return true
-		return [row.username, methodLabel(row.method)].some((value) =>
-			value.toLowerCase().includes(query),
-		)
-	})
-})
-const sortedRows = computed(() => [...filteredRows.value].sort(compareRows))
-
-function methodLabel(method: ServerPlayerMethod) {
-	return method === 'link' ? 'Shareable link' : 'Direct invite'
-}
-
-function formatPlayerDate(date: Date) {
-	const today = new Date()
-	if (
-		date.getFullYear() === today.getFullYear() &&
-		date.getMonth() === today.getMonth() &&
-		date.getDate() === today.getDate()
-	) {
-		return 'Today'
-	}
-	return formatRelativeTime(date)
-}
-
-function compareRows(a: ServerPlayerRow, b: ServerPlayerRow) {
-	let compared: number
-	if (sortColumn.value === 'username') compared = a.username.localeCompare(b.username)
-	else if (sortColumn.value === 'lastPlayed') {
-		compared =
-			(a.lastPlayedAt?.getTime() ?? Number.NEGATIVE_INFINITY) -
-			(b.lastPlayedAt?.getTime() ?? Number.NEGATIVE_INFINITY)
-	} else if (sortColumn.value === 'method') {
-		compared = methodLabel(a.method).localeCompare(methodLabel(b.method))
-	} else {
-		compared =
-			(a.pending ? Number.MAX_SAFE_INTEGER : (a.joinedAt?.getTime() ?? Number.NEGATIVE_INFINITY)) -
-				(b.pending ? Number.MAX_SAFE_INTEGER : (b.joinedAt?.getTime() ?? Number.NEGATIVE_INFINITY))
-	}
-	return sortDirection.value === 'asc' ? compared : -compared
-}
-
-function handleSort(column: string, direction: SortDirection) {
-	sortColumn.value = column
-	sortDirection.value = direction
-}
-</script>
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/play.vue b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/play.vue
index 862f46b3b9d..ad58837a112 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/play.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/play.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex flex-col gap-6">
+	<div class="relative flex flex-col gap-6">
 		<ServerPlayCard
 			:address="serverAddress"
 			:disabled="actionsLocked || !worldId || (!canSetup && !sharedInstanceId)"
@@ -14,8 +14,24 @@
 			<Admonition v-if="players.members.isError.value" type="critical" :header="formatMessage(messages.playersError)">
 				<Button @click="players.members.refetch()">{{ formatMessage(messages.retry) }}</Button>
 			</Admonition>
-			<ServerPlayersTable :rows="players.rows.value" :can-manage="canSetup" :disabled="players.membershipMutation.isPending.value || actionsLocked" @remove="confirmRemove" @open-actions="confirmRemove" />
+			<InvitedPlayersTableLayout :rows="players.rows.value" :can-manage="canSetup" :disabled="players.membershipMutation.isPending.value || actionsLocked" @remove="confirmRemove">
+				<template #toolbar-actions>
+					<Button
+						v-if="canSetup && sharedInstanceId"
+						type="outlined"
+						size="lg"
+						class="shrink-0 !border"
+						:disabled="actionsLocked || !worldId"
+						@click="showPreview()"
+					>
+						<SpinnerIcon v-if="previewQuery.isFetching.value || pendingAction === 'push'" class="animate-spin" aria-hidden="true" />
+						<UploadIcon v-else aria-hidden="true" />
+						{{ formatMessage(messages.pushUpdate) }}
+					</Button>
+				</template>
+			</InvitedPlayersTableLayout>
 		</section>
+		<span ref="pageBottom" class="pointer-events-none absolute bottom-0 h-px w-px" aria-hidden="true" />
 		<InvitePlayersModal
 			ref="invitePlayersModal"
 			:header="formatMessage(messages.inviteHeader, { name: server.name })"
@@ -46,6 +62,7 @@
 			@cancel="previewOpen = false"
 		>
 			<template #additional-content>
+				<ServerConfigFilePicker v-if="previewOpen && worldId" :key="worldId" ref="configPicker" :server-id="serverId" :world-id="worldId" :disabled="actionsLocked" />
 				<p v-if="previewQuery.isFetching.value" class="m-0 flex items-center gap-2"><SpinnerIcon class="animate-spin" />{{ formatMessage(messages.refreshingPreview) }}</p>
 				<Admonition v-else-if="previewQuery.isError.value" type="critical" :header="formatMessage(messages.previewError)">
 					<Button @click="previewQuery.refetch()">{{ formatMessage(messages.retry) }}</Button>
@@ -60,20 +77,22 @@
 import type { Archon } from '@modrinth/api-client'
 import { SpinnerIcon, UploadIcon } from '@modrinth/assets'
 import { useIsMutating, useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
-import { useStorage } from '@vueuse/core'
-import { computed, nextTick, ref, watch } from 'vue'
+import { useIntersectionObserver, useStorage } from '@vueuse/core'
+import { computed, nextTick, onScopeDispose, ref, watch } from 'vue'
 
 import Admonition from '#ui/components/base/Admonition.vue'
 import { Button } from '#ui/components/base/buttons'
 import ConfirmModal from '#ui/components/modal/ConfirmModal.vue'
+import ServerConfigFilePicker from '#ui/components/servers/ServerConfigFilePicker.vue'
 import { type InviteLinkSettings, type InvitePlayersInvitePayload, InvitePlayersModal, type InvitePlayersUser } from '#ui/components/sharing'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { useServerPermissions } from '#ui/composables/server-permissions'
 import ContentDiffModal from '#ui/layouts/shared/installation-settings/components/ContentDiffModal.vue'
+import InvitedPlayersTableLayout from '#ui/layouts/shared/invited-players/layout.vue'
 import { getHostingServerAddress, injectAuth, injectModrinthClient, injectModrinthServerContext, injectNotificationManager, type ServerPlayTarget } from '#ui/providers'
+import { injectPageContext } from '#ui/providers/page-context'
 
 import ServerPlayCard from './ServerPlayCard.vue'
-import ServerPlayersTable from './ServerPlayersTable.vue'
 import { resolveServerShareDiff } from './share-diff'
 import type { ServerPlayerRow } from './types'
 import { useServerPlayers } from './use-server-players'
@@ -85,6 +104,15 @@ const props = defineProps<{
 	siteUrl: string
 }>()
 const { formatMessage } = useVIntl()
+const pageContext = injectPageContext(null)
+const pageBottom = ref<HTMLElement | null>(null)
+const intercomHiddenRequestId = Symbol('server-play-bottom')
+useIntersectionObserver(pageBottom, ([entry]) => {
+	pageContext?.intercomBubble?.requestHidden?.(intercomHiddenRequestId, entry?.isIntersecting ?? false)
+})
+onScopeDispose(() => {
+	pageContext?.intercomBubble?.requestHidden?.(intercomHiddenRequestId, false)
+})
 const { handleError } = injectNotificationManager()
 const client = injectModrinthClient()
 const auth = injectAuth()
@@ -97,6 +125,8 @@ const needsUpdate = computed(() => world.value?.content?.shared_instance_needs_u
 const players = useServerPlayers(sharedInstanceId, canSetup)
 const invitePlayersModal = ref<InstanceType<typeof InvitePlayersModal>>()
 const diffModal = ref<InstanceType<typeof ContentDiffModal>>()
+const configPicker = ref<InstanceType<typeof ServerConfigFilePicker>>()
+const resolvingConfigs = ref(false)
 const removeModal = ref<InstanceType<typeof ConfirmModal>>()
 const playerToRemove = ref<ServerPlayerRow>()
 const previewOpen = ref(false)
@@ -116,13 +146,13 @@ const previewQuery = useQuery({
 })
 const actionMutation = useMutation({
 	mutationKey: ['servers', 'share-action', serverId],
-	mutationFn: async ({ action, targetWorldId, userId }: { action: Action; targetWorldId: string; userId: string | undefined }) => {
+	mutationFn: async ({ action, targetWorldId, userId, configPaths }: { action: Action; targetWorldId: string; userId: string | undefined; configPaths: string[] }) => {
 		if (busyReasons.value.length) throw new Error(formatMessage(messages.busy))
 		if (auth.user.value?.id !== userId) return
 		const sameContext = () => worldId.value === targetWorldId && auth.user.value?.id === userId
 		let id = serverFull.value?.worlds.find((world) => world.id === targetWorldId)?.content?.shared_instance_id
-		if (canSetup.value) {
-			const shared = await client.archon.content_v1.share(serverId, targetWorldId)
+		if (canSetup.value && (action !== 'play' || !id || needsUpdate.value || configPaths.length > 0)) {
+			const shared = await client.archon.content_v1.share(serverId, targetWorldId, configPaths)
 			id = shared.shared_instance_id
 			queryClient.setQueryData<Archon.Servers.v1.ServerFull>(['servers', 'v1', 'detail', serverId], (current) => current ? {
 				...current,
@@ -130,7 +160,9 @@ const actionMutation = useMutation({
 					...world, content: { ...world.content, shared_instance_id: shared.shared_instance_id },
 				} : world),
 			} : current)
-			await queryClient.invalidateQueries({ queryKey: ['servers', 'v1', 'detail', serverId] })
+			const refresh = queryClient.invalidateQueries({ queryKey: ['servers', 'v1', 'detail', serverId] })
+			if (action === 'play') void refresh
+			else await refresh
 		} else if (action === 'invite' || action === 'push') {
 			throw new Error(formatMessage(messages.permission))
 		}
@@ -158,15 +190,27 @@ const actionMutation = useMutation({
 })
 const pendingAction = computed(() => actionMutation.isPending.value ? actionMutation.variables.value?.action : undefined)
 const shareActions = useIsMutating({ mutationKey: ['servers', 'share-action', serverId] })
-const actionsLocked = computed(() => shareActions.value > 0 || previewQuery.isFetching.value || players.linkMutation.isPending.value || busyReasons.value.length > 0)
-function perform(action: Action, reviewed = false) {
+const actionsLocked = computed(() => resolvingConfigs.value || shareActions.value > 0 || previewQuery.isFetching.value || players.linkMutation.isPending.value || busyReasons.value.length > 0)
+async function perform(action: Action, reviewed = false) {
 	if (!worldId.value || actionsLocked.value) return
 	if (action === 'play' && !reviewed && canSetup.value && needsUpdate.value && preferences.value.reviewChangesBeforePlaying) {
 		void showPreview(true)
 		return
 	}
-	previewOpen.value = false
-	actionMutation.mutate({ action, targetWorldId: worldId.value, userId: auth.user.value?.id })
+	const targetWorldId = worldId.value
+	const userId = auth.user.value?.id
+	resolvingConfigs.value = true
+	try {
+		const configPaths = reviewed ? await configPicker.value?.resolvePaths() ?? [] : []
+		if (worldId.value !== targetWorldId || auth.user.value?.id !== userId || (reviewed && !previewOpen.value)) return
+		previewOpen.value = false
+		actionMutation.mutate({ action, targetWorldId, userId, configPaths })
+	} catch (error) {
+		handleError(error)
+		if (previewOpen.value && worldId.value === targetWorldId && auth.user.value?.id === userId) diffModal.value?.show()
+	} finally {
+		resolvingConfigs.value = false
+	}
 }
 async function showPreview(playAfter = false) {
 	if (actionsLocked.value) return
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/types.ts b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/types.ts
index 63f2dbb0550..d69cf7cad06 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/types.ts
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/play/types.ts
@@ -1,11 +1,4 @@
-export type ServerPlayerMethod = 'direct' | 'link'
-
-export type ServerPlayerRow = {
-	id: string
-	username: string
-	avatarUrl?: string
-	lastPlayedAt: Date | null
-	joinedAt: Date | null
-	method: ServerPlayerMethod
-	pending?: boolean
-}
+export type {
+	InvitedPlayerMethod as ServerPlayerMethod,
+	InvitedPlayerRow as ServerPlayerRow,
+} from '#ui/layouts/shared/invited-players/types'
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/overview.vue b/packages/ui/src/layouts/wrapped/hosting/manage/overview.vue
index f5608bb195f..95b607e48ce 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/overview.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/overview.vue
@@ -1,13 +1,10 @@
 <template>
 	<div
 		class="relative flex select-none flex-col gap-6"
-		:class="containedConsole ? 'h-full min-h-0 overflow-hidden' : ''"
+		:class="fillConsole ? 'flex-1' : ''"
 		data-pyro-server-manager-root
 	>
-		<div
-			class="flex flex-col gap-4"
-			:class="containedConsole ? 'min-h-0 flex-1 overflow-hidden' : ''"
-		>
+		<div class="flex flex-col gap-4" :class="fillConsole ? 'flex-1' : ''">
 			<ServerManageStats
 				class="shrink-0"
 				:data="!isWsAuthIncorrect ? stats : undefined"
@@ -16,11 +13,11 @@
 
 			<div
 				class="flex flex-col gap-2"
-				:class="containedConsole ? 'min-h-0 flex-1 overflow-hidden' : 'min-h-[700px]'"
+				:class="fillConsole ? 'flex-1' : 'min-h-[700px]'"
 			>
 				<span class="shrink-0 text-2xl font-semibold text-contrast">Console</span>
 
-				<ConsolePageLayout />
+				<ConsolePageLayout :min-log-height="fillConsole ? '28rem' : undefined" />
 			</div>
 		</div>
 
@@ -59,11 +56,11 @@ import { injectModrinthClient, injectModrinthServerContext } from '#ui/providers
 const props = withDefaults(
 	defineProps<{
 		showAdvancedDebugInfo?: boolean
-		containedConsole?: boolean
+		fillConsole?: boolean
 	}>(),
 	{
 		showAdvancedDebugInfo: false,
-		containedConsole: false,
+		fillConsole: false,
 	},
 )
 
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
index 89b4840ba6c..b5e3f693905 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
@@ -107,8 +107,8 @@
 		}"
 		:class="[
 			'server-panel-' + revealState,
-			containedLayout
-				? 'h-full min-h-0 overflow-hidden pb-6'
+			fillLayout
+				? 'flex-1 pb-6'
 				: constrainWidth
 					? 'min-h-[100svh] max-w-[1280px] pb-16'
 					: 'min-h-[calc(100svh-100px)] pb-6',
@@ -118,7 +118,7 @@
 			<div
 				v-if="!isOnboarding"
 				class="w-full flex flex-col gap-4"
-				:class="['server-stagger-item', containedLayout ? 'shrink-0' : '', { 'mt-4': isNuxt }]"
+				:class="['server-stagger-item', fillLayout ? 'shrink-0' : '', { 'mt-4': isNuxt }]"
 				:style="{ '--si': 0 }"
 			>
 				<PageHeader :title="serverData?.name || 'Server'">
@@ -227,13 +227,12 @@
 			<ServerOnboardingPanelPage v-if="isOnboarding" :browse-modpacks="handleBrowseModpacks" />
 
 			<template v-else>
-				<div class="server-stagger-item -mb-3">
+				<div class="server-stagger-item -mb-3" :class="fillLayout ? 'shrink-0' : ''">
 					<NavTabs
 						:links="navLinks"
 						replace
 						page-nav
 						data-pyro-navigation
-						:class="containedLayout ? 'shrink-0' : ''"
 						:style="{ '--si': 1 }"
 					/>
 				</div>
@@ -241,7 +240,7 @@
 				<div
 					data-pyro-mount
 					class="server-stagger-item w-full flex-1"
-					:class="containedLayout ? 'flex min-h-0 flex-col overflow-hidden' : 'h-full'"
+					:class="fillLayout ? 'flex flex-col' : 'h-full'"
 					:style="{ '--si': 2 }"
 				>
 					<div v-if="serverData.is_medal" class="mb-4">
@@ -414,7 +413,7 @@ const props = withDefaults(
 			type: 'mod' | 'plugin' | 'datapack'
 		}) => void | Promise<void>
 		constrainWidth?: boolean
-		layoutMode?: 'page' | 'contained'
+		layoutMode?: 'page' | 'fill'
 	}>(),
 	{
 		showCopyIdAction: false,
@@ -468,7 +467,7 @@ const DISABLE_LOADING_ANIM = true
 const { addNotification } = injectNotificationManager()
 const client = injectModrinthClient()
 const constrainWidth = computed(() => props.constrainWidth)
-const containedLayout = computed(() => props.layoutMode === 'contained')
+const fillLayout = computed(() => props.layoutMode === 'fill')
 const isNuxt = computed(() => client instanceof NuxtModrinthClient)
 const queryClient = useQueryClient()
 const route = useRoute()
diff --git a/packages/ui/src/providers/page-context.ts b/packages/ui/src/providers/page-context.ts
index 99585948aaa..b8eb0d444a1 100644
--- a/packages/ui/src/providers/page-context.ts
+++ b/packages/ui/src/providers/page-context.ts
@@ -16,6 +16,7 @@ export interface PageContext {
 		horizontalPadding: Ref<number> | ComputedRef<number>
 		requestHorizontalPadding?: (id: symbol, padding: number | null) => void
 		requestVerticalClearance: (id: symbol, clearance: number | null) => void
+		requestHidden?: (id: symbol, hidden: boolean) => void
 	}
 	featureFlags?: {
 		serverRamAsBytesAlwaysOn?: Ref<boolean>