From 75998757e39caf4b851665fc53752a7d53a3580f Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Fri, 2 Oct 2026 15:47:06 +0100
Subject: [PATCH 1/3] feat: sandboxing settings tab

---
 .../instances/settings-modal/index.vue        |  11 +
 .../settings-modal/sandbox-settings.vue       |   7 +
 .../settings/app-settings-modal/index.vue     |  11 +
 .../instance-defaults/sandbox-settings.vue    | 270 ++++++++++++++++++
 packages/ui/src/components/base/index.ts      |   1 +
 5 files changed, 300 insertions(+)
 create mode 100644 apps/app-frontend/src/features/instances/settings-modal/sandbox-settings.vue
 create mode 100644 apps/app-frontend/src/features/settings/instance-defaults/sandbox-settings.vue

diff --git a/apps/app-frontend/src/features/instances/settings-modal/index.vue b/apps/app-frontend/src/features/instances/settings-modal/index.vue
index e1d3d86d760..0ce229db9af 100644
--- a/apps/app-frontend/src/features/instances/settings-modal/index.vue
+++ b/apps/app-frontend/src/features/instances/settings-modal/index.vue
@@ -6,6 +6,7 @@ import {
 	CoffeeIcon,
 	InfoIcon,
 	Settings2Icon,
+	ShieldIcon,
 	UsersIcon,
 	WindowIcon,
 	WrenchIcon,
@@ -34,6 +35,7 @@ import HooksSettings from './hooks-settings.vue'
 import InstallationSettings from './installation-settings.vue'
 import { provideInstanceSettings } from './instance-settings-context.ts'
 import JavaSettings from './java-settings.vue'
+import SandboxSettings from './sandbox-settings.vue'
 import SharingSettings from './sharing-settings.vue'
 import SyncedOptionsSettings from './synced-options-settings.vue'
 import WindowSettings from './window-settings.vue'
@@ -132,6 +134,15 @@ const tabs = computed<TabbedModalTab[]>(() => [
 		content: SharingSettings,
 		shown: props.instance.shared_instance?.role === 'owner' && !props.instance.quarantined,
 	},
+	{
+		name: defineMessage({
+			id: 'instance.settings.tabs.sandbox',
+			defaultMessage: 'Sandboxing',
+		}),
+		icon: ShieldIcon,
+		category: tabCategories.game,
+		content: SandboxSettings,
+	},
 	{
 		name: defineMessage({
 			id: 'instance.settings.tabs.java.label',
diff --git a/apps/app-frontend/src/features/instances/settings-modal/sandbox-settings.vue b/apps/app-frontend/src/features/instances/settings-modal/sandbox-settings.vue
new file mode 100644
index 00000000000..90c4a22f073
--- /dev/null
+++ b/apps/app-frontend/src/features/instances/settings-modal/sandbox-settings.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import SandboxSettings from '@/features/settings/instance-defaults/sandbox-settings.vue'
+</script>
+
+<template>
+	<SandboxSettings instance-settings />
+</template>
diff --git a/apps/app-frontend/src/features/settings/app-settings-modal/index.vue b/apps/app-frontend/src/features/settings/app-settings-modal/index.vue
index 76249d97009..d17890115d8 100644
--- a/apps/app-frontend/src/features/settings/app-settings-modal/index.vue
+++ b/apps/app-frontend/src/features/settings/app-settings-modal/index.vue
@@ -11,6 +11,7 @@ import {
 	PaintbrushIcon,
 	RefreshCwIcon,
 	Settings2Icon,
+	ShieldIcon,
 	ToggleRightIcon,
 	UserIcon,
 	WindowIcon,
@@ -43,6 +44,7 @@ import FeaturesSettings from '@/features/settings/display/features-settings.vue'
 import LanguageSettings from '@/features/settings/display/language-settings.vue'
 import JavaAndMemorySettings from '@/features/settings/instance-defaults/java-and-memory-settings/index.vue'
 import LaunchHooksSettings from '@/features/settings/instance-defaults/launch-hooks-settings.vue'
+import SandboxSettings from '@/features/settings/instance-defaults/sandbox-settings.vue'
 import WindowSettings from '@/features/settings/instance-defaults/window-settings.vue'
 import type { InstanceDefaultsTab } from '@/features/settings/settings-actions'
 import SyncingSettings from '@/features/settings/syncing/syncing-settings.vue'
@@ -152,6 +154,15 @@ const tabs = [
 		icon: EyeOffIcon,
 		content: PrivacySettings,
 	},
+	{
+		name: defineMessage({
+			id: 'app.settings.tabs.sandbox',
+			defaultMessage: 'Sandboxing',
+		}),
+		category: tabCategories.instanceDefaults,
+		icon: ShieldIcon,
+		content: SandboxSettings,
+	},
 	{
 		name: defineMessage({
 			id: 'app.settings.tabs.java-and-memory',
diff --git a/apps/app-frontend/src/features/settings/instance-defaults/sandbox-settings.vue b/apps/app-frontend/src/features/settings/instance-defaults/sandbox-settings.vue
new file mode 100644
index 00000000000..c6c3506317a
--- /dev/null
+++ b/apps/app-frontend/src/features/settings/instance-defaults/sandbox-settings.vue
@@ -0,0 +1,270 @@
+<script setup lang="ts">
+import { CircleAlertIcon, FolderSearchIcon, PlusIcon, XIcon } from '@modrinth/assets'
+import {
+	Button,
+	commonMessages,
+	defineMessages,
+	IconButton,
+	Input,
+	LargeRadioButton,
+	Toggle,
+	useVIntl,
+} from '@modrinth/ui'
+import { computed, ref, useId } from 'vue'
+
+const props = defineProps<{ instanceSettings?: boolean }>()
+const { formatMessage } = useVIntl()
+const id = useId()
+const customSettings = ref(false)
+const disabled = computed(() => props.instanceSettings && !customSettings.value)
+const mode = ref('unrecognized')
+const permissions = ref({ network: true, downloads: true, documents: false })
+const folderPath = ref('')
+const folders = ref<string[]>([])
+const canAddFolder = computed(() => {
+	const path = folderPath.value.trim()
+	return !disabled.value && path.length > 0 && !folders.value.includes(path)
+})
+
+const messages = defineMessages({
+	custom: {
+		id: 'app.settings.sandbox.custom',
+		defaultMessage: 'Custom sandbox settings',
+	},
+	title: {
+		id: 'app.settings.sandbox.title',
+		defaultMessage: 'Sandbox instances',
+	},
+	description: {
+		id: 'app.settings.sandbox.description',
+		defaultMessage:
+			'Runs Minecraft in an isolated environment, so mods can only access your .minecraft folder and anything you allow below.',
+	},
+	never: {
+		id: 'app.settings.sandbox.never',
+		defaultMessage: 'Never',
+	},
+	neverDescription: {
+		id: 'app.settings.sandbox.never.description',
+		defaultMessage: 'Run instances with full access to your computer.',
+	},
+	unrecognized: {
+		id: 'app.settings.sandbox.unrecognized',
+		defaultMessage: 'Unrecognized files',
+	},
+	unrecognizedDescription: {
+		id: 'app.settings.sandbox.unrecognized.description',
+		defaultMessage: 'Sandbox instances containing files not from Modrinth.',
+	},
+	always: {
+		id: 'app.settings.sandbox.always',
+		defaultMessage: 'Always',
+	},
+	alwaysDescription: {
+		id: 'app.settings.sandbox.always.description',
+		defaultMessage: 'Run instances always in the sandbox.',
+	},
+	warning: {
+		id: 'app.settings.sandbox.warning',
+		defaultMessage: 'Some mods may not work if they require access blocked by the sandbox.',
+	},
+	network: {
+		id: 'app.settings.sandbox.network',
+		defaultMessage: 'Access network',
+	},
+	networkDescription: {
+		id: 'app.settings.sandbox.network.description',
+		defaultMessage: 'Allows connections to the internet, multiplayer servers, and online services.',
+	},
+	downloads: {
+		id: 'app.settings.sandbox.downloads',
+		defaultMessage: 'Access downloads folder',
+	},
+	downloadsDescription: {
+		id: 'app.settings.sandbox.downloads.description',
+		defaultMessage: 'Allows access to files in your Downloads folder.',
+	},
+	documents: {
+		id: 'app.settings.sandbox.documents',
+		defaultMessage: 'Access documents folder',
+	},
+	documentsDescription: {
+		id: 'app.settings.sandbox.documents.description',
+		defaultMessage: 'Allows access to files in your Documents folder.',
+	},
+	folders: {
+		id: 'app.settings.sandbox.folders',
+		defaultMessage: 'Access other folders',
+	},
+	foldersDescription: {
+		id: 'app.settings.sandbox.folders.description',
+		defaultMessage:
+			'Allows mods to read or modify files you choose. Only add folders you’re comfortable giving them access to.',
+	},
+	folderPlaceholder: {
+		id: 'app.settings.sandbox.folders.placeholder',
+		defaultMessage: 'Path to folder...',
+	},
+	browse: {
+		id: 'app.settings.sandbox.folders.browse',
+		defaultMessage: 'Browse for a folder',
+	},
+	add: {
+		id: 'app.settings.sandbox.folders.add',
+		defaultMessage: 'Add',
+	},
+})
+
+const modes = [
+	{ value: 'never', label: messages.never, description: messages.neverDescription },
+	{
+		value: 'unrecognized',
+		label: messages.unrecognized,
+		description: messages.unrecognizedDescription,
+	},
+	{ value: 'always', label: messages.always, description: messages.alwaysDescription },
+]
+const permissionOptions = [
+	{ key: 'network', label: messages.network, description: messages.networkDescription },
+	{ key: 'downloads', label: messages.downloads, description: messages.downloadsDescription },
+	{ key: 'documents', label: messages.documents, description: messages.documentsDescription },
+] as const
+
+function addFolder() {
+	if (!canAddFolder.value) return
+	folders.value.push(folderPath.value.trim())
+	folderPath.value = ''
+}
+
+function selectAdjacentMode(event: KeyboardEvent, index: number) {
+	const directions: Record<string, number> = { ArrowLeft: -1, ArrowUp: -1, ArrowRight: 1, ArrowDown: 1 }
+	const direction = directions[event.key]
+	if (direction === undefined || disabled.value) return
+	event.preventDefault()
+	const nextIndex = (index + direction + modes.length) % modes.length
+	mode.value = modes[nextIndex].value
+	const button = event.currentTarget as HTMLElement
+	button.parentElement?.querySelectorAll<HTMLButtonElement>('[role="radio"]')[nextIndex]?.focus()
+}
+</script>
+
+<template>
+	<div class="flex flex-col gap-6 pt-6">
+		<div
+			v-if="instanceSettings"
+			class="flex items-center justify-between gap-4 border-0 border-b border-solid border-surface-5 pb-6"
+		>
+			<label :for="`${id}-custom`" class="text-lg font-semibold text-contrast">
+				{{ formatMessage(messages.custom) }}
+			</label>
+			<Toggle :id="`${id}-custom`" v-model="customSettings" />
+		</div>
+		<fieldset
+			:disabled="disabled"
+			class="m-0 flex min-w-0 flex-col gap-6 border-0 p-0"
+			:class="{ 'opacity-50': disabled }"
+		>
+			<div class="flex flex-col gap-4">
+				<div class="flex flex-col gap-0.5">
+					<h2 :id="`${id}-title`" class="m-0 text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.title) }}
+					</h2>
+					<p class="m-0 leading-6">{{ formatMessage(messages.description) }}</p>
+				</div>
+				<div role="radiogroup" :aria-labelledby="`${id}-title`" class="grid grid-cols-3 gap-3">
+					<LargeRadioButton
+						v-for="(option, index) in modes"
+						:key="option.value"
+						type="button"
+						:selected="mode === option.value"
+						:tabindex="mode === option.value ? 0 : -1"
+						class="!grid min-w-0 grid-cols-[20px_1fr] content-start items-center !gap-x-2 !gap-y-1.5 !rounded-[20px] !border !p-3 !font-normal !leading-6"
+						:class="
+							mode === option.value
+								? '!border-brand !bg-brand-highlight'
+								: '!border-surface-4 !bg-surface-3'
+						"
+						@select="mode = option.value"
+						@keydown="selectAdjacentMode($event, index)"
+					>
+						<span class="font-semibold text-contrast">{{ formatMessage(option.label) }}</span>
+						<span class="col-span-2">{{ formatMessage(option.description) }}</span>
+					</LargeRadioButton>
+				</div>
+				<div
+					class="flex items-start gap-2 rounded-2xl border border-solid border-orange bg-highlight-orange p-4 text-contrast"
+				>
+					<CircleAlertIcon class="size-6 shrink-0 text-orange" aria-hidden="true" />
+					<p class="m-0 leading-6">{{ formatMessage(messages.warning) }}</p>
+				</div>
+			</div>
+			<div class="flex flex-col gap-3 border-0 border-t border-solid border-surface-5 pt-6">
+				<div
+					v-for="option in permissionOptions"
+					:key="option.key"
+					class="flex items-center justify-between gap-4"
+				>
+					<div class="flex flex-col gap-0.5">
+						<label :for="`${id}-${option.key}`" class="text-lg font-semibold text-contrast">
+							{{ formatMessage(option.label) }}
+						</label>
+						<p :id="`${id}-${option.key}-description`" class="m-0 leading-6">
+							{{ formatMessage(option.description) }}
+						</p>
+					</div>
+					<Toggle
+						:id="`${id}-${option.key}`"
+						v-model="permissions[option.key]"
+						:aria-describedby="`${id}-${option.key}-description`"
+					/>
+				</div>
+			</div>
+			<div class="flex flex-col gap-2.5 border-0 border-t border-solid border-surface-5 pt-6">
+				<div class="flex flex-col gap-0.5">
+					<h2 class="m-0 text-lg font-semibold text-contrast">
+						{{ formatMessage(messages.folders) }}
+					</h2>
+					<p class="m-0 leading-6">{{ formatMessage(messages.foldersDescription) }}</p>
+				</div>
+				<form class="flex gap-2" @submit.prevent="addFolder">
+					<Input
+						v-model="folderPath"
+						class="min-w-0 flex-1"
+						size="medium"
+						:aria-label="formatMessage(messages.folderPlaceholder)"
+						:placeholder="formatMessage(messages.folderPlaceholder)"
+					/>
+					<IconButton :label="formatMessage(messages.browse)" size="lg" disabled>
+						<FolderSearchIcon />
+					</IconButton>
+					<Button
+						native-type="submit"
+						type="colored"
+						color="brand"
+						size="lg"
+						:disabled="!canAddFolder"
+					>
+						<PlusIcon /> {{ formatMessage(messages.add) }}
+					</Button>
+				</form>
+				<div v-for="(folder, index) in folders" :key="folder" class="flex items-center gap-2">
+					<Input
+						:model-value="folder"
+						readonly
+						class="min-w-0 flex-1"
+						size="medium"
+						:aria-label="formatMessage(messages.folderPlaceholder)"
+					/>
+					<IconButton
+						:label="formatMessage(commonMessages.removeButton)"
+						type="quiet"
+						size="lg"
+						@click="folders.splice(index, 1)"
+					>
+						<XIcon />
+					</IconButton>
+				</div>
+			</div>
+		</fieldset>
+	</div>
+</template>
diff --git a/packages/ui/src/components/base/index.ts b/packages/ui/src/components/base/index.ts
index 99e2e1bdc32..c61212afea4 100644
--- a/packages/ui/src/components/base/index.ts
+++ b/packages/ui/src/components/base/index.ts
@@ -86,6 +86,7 @@ export {
 	Textarea,
 } from './inputs'
 export { default as IntlFormatted } from './IntlFormatted.vue'
+export { default as LargeRadioButton } from './LargeRadioButton.vue'
 export { default as LoadingBar } from './LoadingBar.vue'
 export { default as LoadingIndicator } from './LoadingIndicator.vue'
 export { default as ManySelect } from './ManySelect.vue'

From 55f4eb846f9eb5bce296327f238adfd4af6271c4 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Fri, 2 Oct 2026 17:05:44 +0100
Subject: [PATCH 2/3] refactor: settings overhaul

---
 .../settings-modal/sandbox-settings.vue       |  15 +-
 .../settings/app-settings-modal/index.vue     |   1 +
 .../instance-defaults/sandbox-settings.vue    | 215 ++++++++++--------
 .../src/features/settings/settings-actions.ts |   2 +-
 4 files changed, 131 insertions(+), 102 deletions(-)

diff --git a/apps/app-frontend/src/features/instances/settings-modal/sandbox-settings.vue b/apps/app-frontend/src/features/instances/settings-modal/sandbox-settings.vue
index 90c4a22f073..5ce40d98f2b 100644
--- a/apps/app-frontend/src/features/instances/settings-modal/sandbox-settings.vue
+++ b/apps/app-frontend/src/features/instances/settings-modal/sandbox-settings.vue
@@ -1,7 +1,20 @@
 <script setup lang="ts">
+import { defineMessage, useVIntl } from '@modrinth/ui'
+
 import SandboxSettings from '@/features/settings/instance-defaults/sandbox-settings.vue'
+
+import DefaultSettingsIntro from './default-settings-intro.vue'
+
+const { formatMessage } = useVIntl()
+const description = defineMessage({
+	id: 'instance.settings.tabs.sandbox.default-settings-description',
+	defaultMessage: 'Your instance uses the default sandbox permissions unless you override them here.',
+})
 </script>
 
 <template>
-	<SandboxSettings instance-settings />
+	<div class="flex flex-col gap-6">
+		<DefaultSettingsIntro tab="sandbox" :description="formatMessage(description)" />
+		<SandboxSettings instance-settings />
+	</div>
 </template>
diff --git a/apps/app-frontend/src/features/settings/app-settings-modal/index.vue b/apps/app-frontend/src/features/settings/app-settings-modal/index.vue
index d17890115d8..4b4da509d37 100644
--- a/apps/app-frontend/src/features/settings/app-settings-modal/index.vue
+++ b/apps/app-frontend/src/features/settings/app-settings-modal/index.vue
@@ -306,6 +306,7 @@ function showSyncedOptions(): void {
 
 function showInstanceDefaults(tab: InstanceDefaultsTab): void {
 	const content = {
+		sandbox: SandboxSettings,
 		java: JavaAndMemorySettings,
 		window: WindowSettings,
 		hooks: LaunchHooksSettings,
diff --git a/apps/app-frontend/src/features/settings/instance-defaults/sandbox-settings.vue b/apps/app-frontend/src/features/settings/instance-defaults/sandbox-settings.vue
index c6c3506317a..3ce3afd7a75 100644
--- a/apps/app-frontend/src/features/settings/instance-defaults/sandbox-settings.vue
+++ b/apps/app-frontend/src/features/settings/instance-defaults/sandbox-settings.vue
@@ -27,6 +27,10 @@ const canAddFolder = computed(() => {
 })
 
 const messages = defineMessages({
+	customDescription: {
+		id: 'app.settings.sandbox.custom-description',
+		defaultMessage: 'Override app sandbox settings for this instance.',
+	},
 	custom: {
 		id: 'app.settings.sandbox.custom',
 		defaultMessage: 'Custom sandbox settings',
@@ -149,120 +153,131 @@ function selectAdjacentMode(event: KeyboardEvent, index: number) {
 </script>
 
 <template>
-	<div class="flex flex-col gap-6 pt-6">
+	<div class="flex flex-col gap-6">
 		<div
 			v-if="instanceSettings"
 			class="flex items-center justify-between gap-4 border-0 border-b border-solid border-surface-5 pb-6"
 		>
-			<label :for="`${id}-custom`" class="text-lg font-semibold text-contrast">
-				{{ formatMessage(messages.custom) }}
-			</label>
-			<Toggle :id="`${id}-custom`" v-model="customSettings" />
+			<div class="flex min-w-0 flex-col gap-0.5">
+				<label :for="`${id}-custom`" class="text-lg font-semibold text-contrast">
+					{{ formatMessage(messages.custom) }}
+				</label>
+				<p :id="`${id}-custom-description`" class="m-0">
+					{{ formatMessage(messages.customDescription) }}
+				</p>
+			</div>
+			<Toggle
+				:id="`${id}-custom`"
+				v-model="customSettings"
+				:aria-describedby="`${id}-custom-description`"
+			/>
 		</div>
 		<fieldset
 			:disabled="disabled"
-			class="m-0 flex min-w-0 flex-col gap-6 border-0 p-0"
+			class="m-0 min-w-0 border-0 p-0"
 			:class="{ 'opacity-50': disabled }"
 		>
-			<div class="flex flex-col gap-4">
-				<div class="flex flex-col gap-0.5">
-					<h2 :id="`${id}-title`" class="m-0 text-lg font-semibold text-contrast">
-						{{ formatMessage(messages.title) }}
-					</h2>
-					<p class="m-0 leading-6">{{ formatMessage(messages.description) }}</p>
-				</div>
-				<div role="radiogroup" :aria-labelledby="`${id}-title`" class="grid grid-cols-3 gap-3">
-					<LargeRadioButton
-						v-for="(option, index) in modes"
-						:key="option.value"
-						type="button"
-						:selected="mode === option.value"
-						:tabindex="mode === option.value ? 0 : -1"
-						class="!grid min-w-0 grid-cols-[20px_1fr] content-start items-center !gap-x-2 !gap-y-1.5 !rounded-[20px] !border !p-3 !font-normal !leading-6"
-						:class="
-							mode === option.value
-								? '!border-brand !bg-brand-highlight'
-								: '!border-surface-4 !bg-surface-3'
-						"
-						@select="mode = option.value"
-						@keydown="selectAdjacentMode($event, index)"
+			<div class="flex flex-col gap-6">
+				<div class="flex flex-col gap-4">
+					<div class="flex flex-col gap-0.5">
+						<h2 :id="`${id}-title`" class="m-0 text-lg font-semibold text-contrast">
+							{{ formatMessage(messages.title) }}
+						</h2>
+						<p class="m-0 leading-6">{{ formatMessage(messages.description) }}</p>
+					</div>
+					<div role="radiogroup" :aria-labelledby="`${id}-title`" class="grid grid-cols-3 gap-3">
+						<LargeRadioButton
+							v-for="(option, index) in modes"
+							:key="option.value"
+							type="button"
+							:selected="mode === option.value"
+							:tabindex="mode === option.value ? 0 : -1"
+							class="!grid min-w-0 grid-cols-[20px_1fr] content-start items-center !gap-x-2 !gap-y-1.5 !rounded-[20px] !border !p-3 !font-normal !leading-6"
+							:class="
+								mode === option.value
+									? '!border-brand !bg-brand-highlight'
+									: '!border-surface-4 !bg-surface-3'
+							"
+							@select="mode = option.value"
+							@keydown="selectAdjacentMode($event, index)"
+						>
+							<span class="font-semibold text-contrast">{{ formatMessage(option.label) }}</span>
+							<span class="col-span-2">{{ formatMessage(option.description) }}</span>
+						</LargeRadioButton>
+					</div>
+					<div
+						class="flex items-start gap-2 rounded-2xl border border-solid border-orange bg-highlight-orange p-4 text-contrast"
 					>
-						<span class="font-semibold text-contrast">{{ formatMessage(option.label) }}</span>
-						<span class="col-span-2">{{ formatMessage(option.description) }}</span>
-					</LargeRadioButton>
+						<CircleAlertIcon class="size-6 shrink-0 text-orange" aria-hidden="true" />
+						<p class="m-0 leading-6">{{ formatMessage(messages.warning) }}</p>
+					</div>
 				</div>
-				<div
-					class="flex items-start gap-2 rounded-2xl border border-solid border-orange bg-highlight-orange p-4 text-contrast"
-				>
-					<CircleAlertIcon class="size-6 shrink-0 text-orange" aria-hidden="true" />
-					<p class="m-0 leading-6">{{ formatMessage(messages.warning) }}</p>
+				<div class="flex flex-col gap-3 border-0 border-t border-solid border-surface-5 pt-6">
+					<div
+						v-for="option in permissionOptions"
+						:key="option.key"
+						class="flex items-center justify-between gap-4"
+					>
+						<div class="flex flex-col gap-0.5">
+							<label :for="`${id}-${option.key}`" class="text-lg font-semibold text-contrast">
+								{{ formatMessage(option.label) }}
+							</label>
+							<p :id="`${id}-${option.key}-description`" class="m-0 leading-6">
+								{{ formatMessage(option.description) }}
+							</p>
+						</div>
+						<Toggle
+							:id="`${id}-${option.key}`"
+							v-model="permissions[option.key]"
+							:aria-describedby="`${id}-${option.key}-description`"
+						/>
+					</div>
 				</div>
-			</div>
-			<div class="flex flex-col gap-3 border-0 border-t border-solid border-surface-5 pt-6">
-				<div
-					v-for="option in permissionOptions"
-					:key="option.key"
-					class="flex items-center justify-between gap-4"
-				>
+				<div class="flex flex-col gap-2.5 border-0 border-t border-solid border-surface-5 pt-6">
 					<div class="flex flex-col gap-0.5">
-						<label :for="`${id}-${option.key}`" class="text-lg font-semibold text-contrast">
-							{{ formatMessage(option.label) }}
-						</label>
-						<p :id="`${id}-${option.key}-description`" class="m-0 leading-6">
-							{{ formatMessage(option.description) }}
-						</p>
+						<h2 class="m-0 text-lg font-semibold text-contrast">
+							{{ formatMessage(messages.folders) }}
+						</h2>
+						<p class="m-0 leading-6">{{ formatMessage(messages.foldersDescription) }}</p>
+					</div>
+					<form class="flex gap-2" @submit.prevent="addFolder">
+						<Input
+							v-model="folderPath"
+							class="min-w-0 flex-1"
+							size="medium"
+							:aria-label="formatMessage(messages.folderPlaceholder)"
+							:placeholder="formatMessage(messages.folderPlaceholder)"
+						/>
+						<IconButton :label="formatMessage(messages.browse)" size="lg" disabled>
+							<FolderSearchIcon />
+						</IconButton>
+						<Button
+							native-type="submit"
+							type="colored"
+							color="brand"
+							size="lg"
+							:disabled="!canAddFolder"
+						>
+							<PlusIcon /> {{ formatMessage(messages.add) }}
+						</Button>
+					</form>
+					<div v-for="(folder, index) in folders" :key="folder" class="flex items-center gap-2">
+						<Input
+							:model-value="folder"
+							readonly
+							class="min-w-0 flex-1"
+							size="medium"
+							:aria-label="formatMessage(messages.folderPlaceholder)"
+						/>
+						<IconButton
+							:label="formatMessage(commonMessages.removeButton)"
+							type="quiet"
+							size="lg"
+							@click="folders.splice(index, 1)"
+						>
+							<XIcon />
+						</IconButton>
 					</div>
-					<Toggle
-						:id="`${id}-${option.key}`"
-						v-model="permissions[option.key]"
-						:aria-describedby="`${id}-${option.key}-description`"
-					/>
-				</div>
-			</div>
-			<div class="flex flex-col gap-2.5 border-0 border-t border-solid border-surface-5 pt-6">
-				<div class="flex flex-col gap-0.5">
-					<h2 class="m-0 text-lg font-semibold text-contrast">
-						{{ formatMessage(messages.folders) }}
-					</h2>
-					<p class="m-0 leading-6">{{ formatMessage(messages.foldersDescription) }}</p>
-				</div>
-				<form class="flex gap-2" @submit.prevent="addFolder">
-					<Input
-						v-model="folderPath"
-						class="min-w-0 flex-1"
-						size="medium"
-						:aria-label="formatMessage(messages.folderPlaceholder)"
-						:placeholder="formatMessage(messages.folderPlaceholder)"
-					/>
-					<IconButton :label="formatMessage(messages.browse)" size="lg" disabled>
-						<FolderSearchIcon />
-					</IconButton>
-					<Button
-						native-type="submit"
-						type="colored"
-						color="brand"
-						size="lg"
-						:disabled="!canAddFolder"
-					>
-						<PlusIcon /> {{ formatMessage(messages.add) }}
-					</Button>
-				</form>
-				<div v-for="(folder, index) in folders" :key="folder" class="flex items-center gap-2">
-					<Input
-						:model-value="folder"
-						readonly
-						class="min-w-0 flex-1"
-						size="medium"
-						:aria-label="formatMessage(messages.folderPlaceholder)"
-					/>
-					<IconButton
-						:label="formatMessage(commonMessages.removeButton)"
-						type="quiet"
-						size="lg"
-						@click="folders.splice(index, 1)"
-					>
-						<XIcon />
-					</IconButton>
 				</div>
 			</div>
 		</fieldset>
diff --git a/apps/app-frontend/src/features/settings/settings-actions.ts b/apps/app-frontend/src/features/settings/settings-actions.ts
index 615cdf702bf..e7bfa5158e8 100644
--- a/apps/app-frontend/src/features/settings/settings-actions.ts
+++ b/apps/app-frontend/src/features/settings/settings-actions.ts
@@ -1,6 +1,6 @@
 import { createContext } from '@modrinth/ui'
 
-export type InstanceDefaultsTab = 'java' | 'window' | 'hooks'
+export type InstanceDefaultsTab = 'sandbox' | 'java' | 'window' | 'hooks'
 
 /**
  * Opens the app settings modal from anywhere in the app, optionally on a specific tab.

From c8100b0e22734c2a1a25f8e65d128c80940b5883 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Tue, 6 Oct 2026 07:54:24 +0100
Subject: [PATCH 3/3] fix: copy

---
 .../instance-defaults/sandbox-settings.vue    | 37 +++++++++++++++++--
 1 file changed, 33 insertions(+), 4 deletions(-)

diff --git a/apps/app-frontend/src/features/settings/instance-defaults/sandbox-settings.vue b/apps/app-frontend/src/features/settings/instance-defaults/sandbox-settings.vue
index 3ce3afd7a75..9c9ec186fa6 100644
--- a/apps/app-frontend/src/features/settings/instance-defaults/sandbox-settings.vue
+++ b/apps/app-frontend/src/features/settings/instance-defaults/sandbox-settings.vue
@@ -39,6 +39,10 @@ const messages = defineMessages({
 		id: 'app.settings.sandbox.title',
 		defaultMessage: 'Sandbox instances',
 	},
+	instanceTitle: {
+		id: 'app.settings.sandbox.instance.title',
+		defaultMessage: 'Sandbox instance',
+	},
 	description: {
 		id: 'app.settings.sandbox.description',
 		defaultMessage:
@@ -52,6 +56,10 @@ const messages = defineMessages({
 		id: 'app.settings.sandbox.never.description',
 		defaultMessage: 'Run instances with full access to your computer.',
 	},
+	instanceNeverDescription: {
+		id: 'app.settings.sandbox.instance.never.description',
+		defaultMessage: 'Run this instance with full access to your computer.',
+	},
 	unrecognized: {
 		id: 'app.settings.sandbox.unrecognized',
 		defaultMessage: 'Unrecognized files',
@@ -60,6 +68,10 @@ const messages = defineMessages({
 		id: 'app.settings.sandbox.unrecognized.description',
 		defaultMessage: 'Sandbox instances containing files not from Modrinth.',
 	},
+	instanceUnrecognizedDescription: {
+		id: 'app.settings.sandbox.instance.unrecognized.description',
+		defaultMessage: 'Sandbox this instance if it contains files not from Modrinth.',
+	},
 	always: {
 		id: 'app.settings.sandbox.always',
 		defaultMessage: 'Always',
@@ -68,6 +80,10 @@ const messages = defineMessages({
 		id: 'app.settings.sandbox.always.description',
 		defaultMessage: 'Run instances always in the sandbox.',
 	},
+	instanceAlwaysDescription: {
+		id: 'app.settings.sandbox.instance.always.description',
+		defaultMessage: 'Always run this instance in the sandbox.',
+	},
 	warning: {
 		id: 'app.settings.sandbox.warning',
 		defaultMessage: 'Some mods may not work if they require access blocked by the sandbox.',
@@ -120,13 +136,24 @@ const messages = defineMessages({
 })
 
 const modes = [
-	{ value: 'never', label: messages.never, description: messages.neverDescription },
+	{
+		value: 'never',
+		label: messages.never,
+		description: messages.neverDescription,
+		instanceDescription: messages.instanceNeverDescription,
+	},
 	{
 		value: 'unrecognized',
 		label: messages.unrecognized,
 		description: messages.unrecognizedDescription,
+		instanceDescription: messages.instanceUnrecognizedDescription,
+	},
+	{
+		value: 'always',
+		label: messages.always,
+		description: messages.alwaysDescription,
+		instanceDescription: messages.instanceAlwaysDescription,
 	},
-	{ value: 'always', label: messages.always, description: messages.alwaysDescription },
 ]
 const permissionOptions = [
 	{ key: 'network', label: messages.network, description: messages.networkDescription },
@@ -181,7 +208,7 @@ function selectAdjacentMode(event: KeyboardEvent, index: number) {
 				<div class="flex flex-col gap-4">
 					<div class="flex flex-col gap-0.5">
 						<h2 :id="`${id}-title`" class="m-0 text-lg font-semibold text-contrast">
-							{{ formatMessage(messages.title) }}
+							{{ formatMessage(instanceSettings ? messages.instanceTitle : messages.title) }}
 						</h2>
 						<p class="m-0 leading-6">{{ formatMessage(messages.description) }}</p>
 					</div>
@@ -202,7 +229,9 @@ function selectAdjacentMode(event: KeyboardEvent, index: number) {
 							@keydown="selectAdjacentMode($event, index)"
 						>
 							<span class="font-semibold text-contrast">{{ formatMessage(option.label) }}</span>
-							<span class="col-span-2">{{ formatMessage(option.description) }}</span>
+							<span class="col-span-2">{{
+								formatMessage(instanceSettings ? option.instanceDescription : option.description)
+							}}</span>
 						</LargeRadioButton>
 					</div>
 					<div