From b9d623a23071f3f293a31428f02dcfd8fb1c4d3e 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 1/6] 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 df46e24f6b..3ec4546cab 100644
--- a/apps/app-frontend/src/composables/use-app-settings.ts
+++ b/apps/app-frontend/src/composables/use-app-settings.ts
@@ -22,6 +22,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 e182d1386f..2a80591868 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 0000000000..3728c9ceb0
--- /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 0c10b07133..073c549296 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 a5327694cb..33a29ac053 100644
--- a/apps/app-frontend/src/routes.js
+++ b/apps/app-frontend/src/routes.js
@@ -26,6 +26,11 @@ export default new createRouter({
 			name: 'ServerManage',
 			component: Hosting.Index,
 			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 1165ef04cc..e7300aec27 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 5f6d5245f4..9e218386ab 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 0000000000..b4866d98f7
--- /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 0000000000..b515971992
--- /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 0000000000..f235922655
--- /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 0000000000..0c9fd04c2d
--- /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 0000000000..63f2dbb055
--- /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 8dd42e6503..bda8e9e6ff 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
@@ -318,6 +318,7 @@ import {
 	LinkIcon,
 	LoaderCircleIcon,
 	LockIcon,
+	PlayIcon,
 	MoreVerticalIcon,
 	ServerIcon as ServerAssetIcon,
 	SettingsIcon,
@@ -395,6 +396,7 @@ const props = withDefaults(
 		showCopyIdAction?: boolean
 		showAdvancedDebugInfo?: boolean
 		showUptime?: boolean
+		showPlayTab?: boolean
 		additionalTabs?: Tab[]
 		stripePublishableKey?: string
 		siteUrl?: string
@@ -419,6 +421,7 @@ const props = withDefaults(
 		showCopyIdAction: false,
 		showAdvancedDebugInfo: false,
 		showUptime: true,
+		showPlayTab: false,
 		additionalTabs: () => [],
 		stripePublishableKey: undefined,
 		siteUrl: undefined,
@@ -776,6 +779,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 59ba8d7109..c4ddd4de57 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 96e9c2880fa567852577b194976d7c2b8ea9a55a 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 2/6] 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 b515971992..3fa2fb5bc0 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 f235922655..56730841e2 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 f739ece3ff4b944e21e9dabbc95767db44fa3c91 Mon Sep 17 00:00:00 2001
From: "Calum H." <calum@modrinth.com>
Date: Fri, 4 Sep 2026 15:33:02 +0100
Subject: [PATCH 3/6] 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            |  61 ++-
 .../components/ContentCardItemIcon.vue        |  91 ++++
 .../components/ContentCardTable.vue           |  71 ++-
 .../components/ContentEnabledFor.vue          | 112 +++++
 .../managed-content-modal/index.vue           |  99 +++-
 .../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      |  10 -
 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, 1073 insertions(+), 507 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 c088dfb550..d410b4fd08 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 10ef710b71..d7fe88af3b 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 fa0c951d6f..71aedc9bd1 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 beea64e832..d198ea1bf0 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
@@ -1073,6 +1104,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 9f5f4f8b16..02d32927a8 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 4ffa62d33c..ddc0153102 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 30541a240e..400cc15070 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 e80b2e503e..71c973c402 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 {
 		listContainer,
@@ -152,7 +155,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) {
@@ -163,8 +166,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(
@@ -180,7 +183,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 e707dc318c..352ad28c19 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/ContentCardItem.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/ContentCardItem.vue
@@ -28,11 +28,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()
 
@@ -77,6 +82,8 @@ interface Props {
 	hideDelete?: boolean
 	hideActions?: boolean
 	inline?: boolean
+	enabledFor?: ContentEnabledForState
+	embeddedIcon?: ContentCardEmbeddedIcon
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -104,12 +111,15 @@ const props = withDefaults(defineProps<Props>(), {
 	hideDelete: false,
 	hideActions: false,
 	inline: false,
+	enabledFor: undefined,
+	embeddedIcon: undefined,
 })
 
 const selected = defineModel<boolean>('selected')
 
 const emit = defineEmits<{
 	'update:enabled': [value: boolean]
+	'update:enabled-for': [side: ContentSide, value: boolean]
 	select: [value: boolean, event?: MouseEvent]
 	delete: [event: MouseEvent]
 	update: []
@@ -128,6 +138,11 @@ const fileNameRef = ref<HTMLElement | null>(null)
 
 const isDisabled = computed(() => props.disabled || props.installing)
 const isToggleDisabled = computed(() => isDisabled.value || props.toggleDisabled)
+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) {
@@ -152,18 +167,25 @@ 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
 			class="flex min-w-0 items-center gap-4"
 			:class="
-				hideActions ? 'flex-1' : 'flex-1 @[800px]:w-[45%] @[800px]:shrink-0 @[800px]:flex-none'
+				hideActions
+					? 'flex-1'
+					: enabledFor
+						? 'flex-1 @[800px]:w-[340px] @[800px]:shrink-0 @[800px]:flex-none'
+						: 'flex-1 @[800px]:w-[45%] @[800px]:shrink-0 @[800px]:flex-none'
 			"
 		>
 			<Checkbox
@@ -177,15 +199,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="project.title"
-						size="3rem"
-						no-shadow
-						class="rounded-2xl border border-surface-5"
+						:tint-by="project.id"
+						:embedded-icon="embeddedIcon"
 					/>
 					<div
 						v-if="installing"
@@ -295,11 +316,20 @@ 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
 			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">
@@ -335,7 +365,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" />
 
@@ -399,11 +430,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="project.title"
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 0000000000..d1e5da69f5
--- /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 a9e32f1d8d..6e1c50a1ec 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 } 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[]
 	showSelection?: boolean
@@ -28,6 +40,7 @@ interface Props {
 	hideHeader?: boolean
 	flat?: boolean
 	showItemActions?: boolean
+	showEnabledForColumn?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -40,6 +53,7 @@ const props = withDefaults(defineProps<Props>(), {
 	hideHeader: false,
 	flat: false,
 	showItemActions: false,
+	showEnabledForColumn: false,
 })
 
 const stickyHeaderRef = ref<HTMLElement | null>(null)
@@ -49,6 +63,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]
@@ -65,6 +80,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
@@ -80,17 +98,18 @@ 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 } = useVirtualScroll(
 	toRef(props, 'items'),
 	{
-		itemHeight: 74,
+		itemHeight,
 		bufferSize: 5,
 		initialItemCount: 20,
 		enabled: toRef(props, 'virtualized'),
@@ -179,8 +198,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'
@@ -191,7 +211,11 @@ function handleSort(column: ContentCardTableSortColumn) {
 				role="row"
 				class="flex min-w-0 items-center gap-4"
 				:class="
-					hasAnyActions ? 'flex-1 @[800px]:w-[45%] @[800px]:shrink-0 @[800px]:flex-none' : 'flex-1'
+					hasAnyActions
+						? 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'
 				"
 			>
 				<Checkbox
@@ -225,7 +249,27 @@ function handleSort(column: ContentCardTableSortColumn) {
 				}}</span>
 			</div>
 
-			<div class="hidden @[800px]:flex" :class="hasAnyActions ? 'flex-1 min-w-0' : 'flex-1'">
+			<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
+				class="hidden @[800px]:flex"
+				:class="
+					hasAnyActions ? (hasEnabledForColumn ? 'min-w-0 flex-1' : 'flex-1 min-w-0') : 'flex-1'
+				"
+			>
 				<button
 					v-if="sortable"
 					role="columnheader"
@@ -247,7 +291,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>
@@ -288,6 +337,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"
@@ -306,6 +357,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="
@@ -356,6 +408,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"
@@ -371,6 +425,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 0000000000..f1e5a0fe38
--- /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 47562c1eda..c5b0782a67 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'
 
@@ -42,6 +48,7 @@ interface Props {
 	sourceName?: string
 	sourceIconUrl?: string
 	enableToggle?: boolean
+	enableEnabledFor?: boolean
 	actionDisabled?: boolean
 	actionDisabledTooltip?: string | null
 	getOverflowOptions?: (item: ContentItem) => ButtonMenuOption[]
@@ -54,6 +61,7 @@ const props = withDefaults(defineProps<Props>(), {
 	sourceName: undefined,
 	sourceIconUrl: undefined,
 	enableToggle: false,
+	enableEnabledFor: false,
 	actionDisabled: false,
 	actionDisabledTooltip: undefined,
 	getOverflowOptions: undefined,
@@ -63,6 +71,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: []
@@ -109,6 +118,18 @@ const messages = defineMessages({
 		id: 'instances.managed-content-modal.download-file',
 		defaultMessage: 'Download File',
 	},
+	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 {
@@ -262,6 +283,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: item.version ?? {
 			id: item.id,
 			version_number: contentVersionLabel(item),
@@ -282,16 +304,24 @@ 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 } : {}),
 		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
 				? [
@@ -329,7 +359,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) {
@@ -372,6 +404,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])
@@ -474,8 +513,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
 	>
@@ -539,13 +582,16 @@ defineExpose({ show, showLoading, hide, getState, restore, updateItem, setItems
 
 				<div v-else class="@container flex-1 min-h-0 flex 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
-									? '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'
 							"
 						>
@@ -561,15 +607,38 @@ 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
 							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>
@@ -580,15 +649,17 @@ defineExpose({ show, showLoading, hide, getState, restore, updateItem, setItems
 							v-model:selected-ids="selectedIds"
 							:items="tableItems"
 							:show-selection="props.enableToggle"
-							:show-item-actions="hasExternalSlicerUrls"
+							:show-enabled-for-column="props.enableEnabledFor"
+							:show-item-actions="props.enableEnabledFor || hasExternalSlicerUrls"
 							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 dc674e51ae..c453200047 100644
--- a/packages/ui/src/layouts/shared/content-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/content-tab/layout.vue
@@ -180,9 +180,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),
@@ -191,32 +200,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]
@@ -424,14 +437,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)
@@ -505,7 +526,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))
@@ -617,6 +641,7 @@ async function disableItemsWithoutWarning(items: ContentItem[]) {
 		await ctx.bulkDisableItems(items)
 		return
 	}
+	if (!ctx.toggleEnabled) return
 
 	for (const item of items) {
 		const id = getItemId(item)
@@ -730,7 +755,7 @@ async function confirmDisable() {
 			if (ctx.bulkDisableItems) {
 				await ctx.bulkDisableItems(itemsToDisable)
 			} else {
-				await ctx.toggleEnabled(item)
+				await ctx.toggleEnabled?.(item)
 			}
 		} finally {
 			unmarkChanging(id)
@@ -744,7 +769,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
@@ -782,7 +807,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() {
@@ -805,6 +831,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[]>([])
@@ -1220,7 +1254,9 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 							class="mt-2"
 							:items="tableItems"
 							: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 10397a9c35..e0ae0d3479 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 6154b33ca1..407a691e8a 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
@@ -74,6 +90,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 51e3c4ca3f..72b316f0c7 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 c32ba61b1e..47e52c3dad 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 447473f516..5867932475 100644
--- a/packages/ui/src/locales/cs-CZ/index.json
+++ b/packages/ui/src/locales/cs-CZ/index.json
@@ -1538,12 +1538,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"
   },
@@ -1559,9 +1553,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"
   },
@@ -4470,4 +4461,3 @@
     "defaultMessage": "Typ"
   }
 }
-
diff --git a/packages/ui/src/locales/de-CH/index.json b/packages/ui/src/locales/de-CH/index.json
index 283afb949f..50b5d7c0f0 100644
--- a/packages/ui/src/locales/de-CH/index.json
+++ b/packages/ui/src/locales/de-CH/index.json
@@ -1901,12 +1901,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"
   },
@@ -1922,9 +1916,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 6c942a21f6..28ef47c039 100644
--- a/packages/ui/src/locales/de-DE/index.json
+++ b/packages/ui/src/locales/de-DE/index.json
@@ -1901,12 +1901,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"
   },
@@ -1922,9 +1916,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 2dbda49bb4..ad844fc46b 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -554,6 +554,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"
   },
@@ -1940,14 +1964,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"
@@ -1964,8 +1991,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"
@@ -2511,7 +2544,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 d463b32471..5691783cd0 100644
--- a/packages/ui/src/locales/es-419/index.json
+++ b/packages/ui/src/locales/es-419/index.json
@@ -1901,12 +1901,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"
   },
@@ -1922,9 +1916,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 c7d7a99361..efd37408f9 100644
--- a/packages/ui/src/locales/es-ES/index.json
+++ b/packages/ui/src/locales/es-ES/index.json
@@ -1871,12 +1871,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"
   },
@@ -1892,9 +1886,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 d87864a80b..a88218a27c 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 50519141bf..5f06567fbe 100644
--- a/packages/ui/src/locales/fr-FR/index.json
+++ b/packages/ui/src/locales/fr-FR/index.json
@@ -1763,12 +1763,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"
   },
@@ -1784,9 +1778,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 66f015f0b6..a999309c04 100644
--- a/packages/ui/src/locales/hu-HU/index.json
+++ b/packages/ui/src/locales/hu-HU/index.json
@@ -1595,12 +1595,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 191bc0c336..207b181147 100644
--- a/packages/ui/src/locales/it-IT/index.json
+++ b/packages/ui/src/locales/it-IT/index.json
@@ -1847,12 +1847,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"
   },
@@ -1868,9 +1862,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 49b623ee1c..c2c6293ca3 100644
--- a/packages/ui/src/locales/ja-JP/index.json
+++ b/packages/ui/src/locales/ja-JP/index.json
@@ -1718,12 +1718,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": "コンテンツの更新に失敗しました"
   },
@@ -1739,9 +1733,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 ed19500be4..b2b84062d2 100644
--- a/packages/ui/src/locales/ko-KR/index.json
+++ b/packages/ui/src/locales/ko-KR/index.json
@@ -1793,12 +1793,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": "콘텐츠 업데이트 실패"
   },
@@ -1814,9 +1808,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 2cf937941f..00240e52ac 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"
   },
@@ -4959,4 +4950,3 @@
     "defaultMessage": "Jenis"
   }
 }
-
diff --git a/packages/ui/src/locales/nl-NL/index.json b/packages/ui/src/locales/nl-NL/index.json
index 079a758a1e..71995c8178 100644
--- a/packages/ui/src/locales/nl-NL/index.json
+++ b/packages/ui/src/locales/nl-NL/index.json
@@ -1712,12 +1712,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"
   },
@@ -1733,9 +1727,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 b384ff226a..77442b6cac 100644
--- a/packages/ui/src/locales/pl-PL/index.json
+++ b/packages/ui/src/locales/pl-PL/index.json
@@ -1865,12 +1865,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"
   },
@@ -1886,9 +1880,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 bae928f400..c846664e5e 100644
--- a/packages/ui/src/locales/pt-BR/index.json
+++ b/packages/ui/src/locales/pt-BR/index.json
@@ -1829,12 +1829,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"
   },
@@ -1850,9 +1844,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"
   },
@@ -6429,4 +6420,3 @@
     "defaultMessage": "Tipo"
   }
 }
-
diff --git a/packages/ui/src/locales/ro-RO/index.json b/packages/ui/src/locales/ro-RO/index.json
index 5578c30912..5fbbd4a790 100644
--- a/packages/ui/src/locales/ro-RO/index.json
+++ b/packages/ui/src/locales/ro-RO/index.json
@@ -827,12 +827,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"
   },
@@ -848,9 +842,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 1c597255e9..3e15acec24 100644
--- a/packages/ui/src/locales/ru-RU/index.json
+++ b/packages/ui/src/locales/ru-RU/index.json
@@ -1820,12 +1820,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": "Не удалось обновить контент"
   },
@@ -1841,9 +1835,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 c58ab61a60..e65d09ca16 100644
--- a/packages/ui/src/locales/sr-CS/index.json
+++ b/packages/ui/src/locales/sr-CS/index.json
@@ -1664,12 +1664,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"
   },
@@ -1685,9 +1679,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"
   },
@@ -5658,4 +5649,3 @@
     "defaultMessage": "Tip"
   }
 }
-
diff --git a/packages/ui/src/locales/sv-SE/index.json b/packages/ui/src/locales/sv-SE/index.json
index fd9b647cf7..88637ad917 100644
--- a/packages/ui/src/locales/sv-SE/index.json
+++ b/packages/ui/src/locales/sv-SE/index.json
@@ -1712,12 +1712,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"
   },
@@ -1733,9 +1727,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 a8a0caebcc..b37b3a7d28 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 bcc5a02559..97fa71874d 100644
--- a/packages/ui/src/locales/tr-TR/index.json
+++ b/packages/ui/src/locales/tr-TR/index.json
@@ -1841,12 +1841,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"
   },
@@ -1862,9 +1856,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 a6d203efa3..7361d92ba8 100644
--- a/packages/ui/src/locales/uk-UA/index.json
+++ b/packages/ui/src/locales/uk-UA/index.json
@@ -1787,12 +1787,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": "Не вдалося оновити вміст"
   },
@@ -1808,9 +1802,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 0e823deb4f..0b8f6e45bc 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"
   },
@@ -4974,4 +4965,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 2a71f716fd..d23edd5902 100644
--- a/packages/ui/src/locales/zh-CN/index.json
+++ b/packages/ui/src/locales/zh-CN/index.json
@@ -1901,12 +1901,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": "更新内容失败"
   },
@@ -1922,9 +1916,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 da4f56a829..7d2cf1e92f 100644
--- a/packages/ui/src/locales/zh-TW/index.json
+++ b/packages/ui/src/locales/zh-TW/index.json
@@ -1901,12 +1901,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": "無法更新內容"
   },
@@ -1922,9 +1916,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 9ab7590adf..bd5ecf58c9 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 314863039e..41a3b876b6 100644
--- a/packages/ui/src/utils/common-messages.ts
+++ b/packages/ui/src/utils/common-messages.ts
@@ -491,7 +491,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 37043b6d3942db4ce6d9931a2922af344802ad37 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 4/6] 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 3ec4546cab..df46e24f6b 100644
--- a/apps/app-frontend/src/composables/use-app-settings.ts
+++ b/apps/app-frontend/src/composables/use-app-settings.ts
@@ -22,7 +22,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 2a80591868..e182d1386f 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 3728c9ceb0..170357365d 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 e7300aec27..1165ef04cc 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 9e218386ab..5f6d5245f4 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 b4866d98f7..0c23d78a03 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 bda8e9e6ff..1a199fe292 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
@@ -396,7 +396,6 @@ const props = withDefaults(
 		showCopyIdAction?: boolean
 		showAdvancedDebugInfo?: boolean
 		showUptime?: boolean
-		showPlayTab?: boolean
 		additionalTabs?: Tab[]
 		stripePublishableKey?: string
 		siteUrl?: string
@@ -421,7 +420,6 @@ const props = withDefaults(
 		showCopyIdAction: false,
 		showAdvancedDebugInfo: false,
 		showUptime: true,
-		showPlayTab: false,
 		additionalTabs: () => [],
 		stripePublishableKey: undefined,
 		siteUrl: undefined,
@@ -779,16 +777,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 8c732c5cf1722a7c46b97b8fa79034a040809730 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 5/6] 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 56730841e2..1426bdb611 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 acff4bf006a355acb55e7db637ac1c7c66fd119a 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 6/6] 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 0000000000..80a156db14
--- /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